:root {
      --navy: #0f172a;
      --blue: #0d47a1;
      --blue-light: #e8f1ff;
      --green: #1b5e20;
      --green-light: #eaf6ec;
      --ink: #1f2937;
      --muted: #64748b;
      --line: #e5e7eb;
      --bg: #f8fafc;
      --white: #ffffff;
      --accent: #00bcd4;
      --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.7;
    }
    a { color: inherit; }
    .topbar {
      position: sticky; top: 0; z-index: 10;
      background: rgba(15, 23, 42, 0.94);
      color: var(--white);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .nav {
      max-width: 1180px; margin: 0 auto; padding: 14px 24px;
      display: flex; align-items: center; justify-content: space-between; gap: 20px;
    }
    .brand { font-weight: 800; letter-spacing: .02em; text-decoration: none; }
    .navlinks { display: flex; flex-wrap: wrap; gap: 16px; font-size: .92rem; color: #dbeafe; }
    .navlinks a { text-decoration: none; }
    .navlinks a:hover { color: var(--accent); }

    header.hero {
      background:
        radial-gradient(circle at 20% 20%, rgba(0,188,212,.22), transparent 26%),
        radial-gradient(circle at 80% 30%, rgba(34,197,94,.20), transparent 28%),
        linear-gradient(135deg, #0f172a 0%, #102a43 52%, #0b3b2e 100%);
      color: var(--white);
      padding: 90px 24px 82px;
    }
    .hero-inner { max-width: 1180px; margin: 0 auto; }
    .eyebrow {
      display: inline-flex; padding: 6px 12px; border: 1px solid rgba(255,255,255,.24);
      border-radius: 999px; color: #dff6ff; font-size: .88rem; margin-bottom: 22px;
    }
    .hero h1 {
      margin: 0; font-size: clamp(2.2rem, 5vw, 4.6rem);
      line-height: 1.08; letter-spacing: -.04em; max-width: 980px;
    }
    .hero p { max-width: 790px; font-size: 1.18rem; color: #dbeafe; margin: 24px 0 0; }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
    .button {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 12px 18px; border-radius: 999px; font-weight: 700;
      border: 1px solid rgba(255,255,255,.24); text-decoration: none;
      transition: transform .2s, background .2s;
    }
    .button.primary { background: var(--accent); color: #06202a; border-color: transparent; }
    .button.secondary { color: var(--white); }
    .button:hover { transform: translateY(-2px); }

    main { max-width: 1180px; margin: -38px auto 0; padding: 0 24px 60px; }
    section {
      background: var(--white);
      border-radius: 22px;
      padding: 38px;
      box-shadow: var(--shadow);
      margin-bottom: 28px;
      border: 1px solid rgba(226,232,240,.8);
    }
    .section-title {
      margin: 0 0 12px;
      font-size: 2rem;
      letter-spacing: -.03em;
      color: var(--navy);
    }
    .section-lead { color: var(--muted); margin: 0 0 24px; max-width: 850px; }

    .overview-grid, .members-grid, .students-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    }
    .overview-grid { margin-top: 26px; }
    .stat-card, .member-card, .student-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 20px;
      background: #fff;
    }
    .stat-card { background: var(--bg); }
    .stat-card strong { display: block; font-size: 1.25rem; color: var(--navy); margin-bottom: 6px; }

    .tag-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
    .tag {
      background: #eef6ff; color: #0b4a6f; border: 1px solid #cfe8ff;
      border-radius: 999px; padding: 8px 12px; font-weight: 650; font-size: .92rem;
    }

    .research-section {
      background: linear-gradient(135deg, #eaf6ec 0%, #d8f0df 100%);
      color: var(--ink);
    }
    .research-section .section-title { color: var(--green); }
    .research-section .section-lead { color: #355e3b; opacity: 1; }
    .research-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px;
    }
    .research-card {
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(27,94,32,.18);
      border-radius: 18px;
      padding: 20px;
      min-height: 230px;
    }
    .research-card .number {
      width: 34px; height: 34px; display: grid; place-items: center;
      border-radius: 50%; background: rgba(27,94,32,.12);
      color: var(--green); font-weight: 800; margin-bottom: 14px;
    }
    .research-card h3 { margin: 0 0 10px; font-size: 1.08rem; line-height: 1.35; color: var(--green); }
    .research-card p { margin: 0; color: #334155; font-size: .96rem; }

    .publications details {
      border: 1px solid var(--line); border-radius: 16px; background: #fff;
      margin: 12px 0; overflow: hidden;
    }
    .publications summary {
      cursor: pointer; padding: 16px 18px; font-weight: 800; color: var(--navy); background: #f8fafc;
    }
    .publications ol { margin: 0; padding: 18px 28px 22px 42px; }
    .publications li { margin-bottom: 10px; }
    

    .member-card a {
      color: var(--blue);
      font-weight: 800;
      text-underline-offset: 3px;
    }
    .member-card h3, .student-card h3 { margin-top: 0; color: var(--navy); }

    .students-section {
      background: linear-gradient(135deg, #e8f1ff 0%, #dbeafe 100%);
      color: var(--ink);
    }
    .students-section .section-title { color: var(--blue); }
    .students-section .section-lead { color: #334155; opacity: 1; }
    .students-section .student-card {
      background: rgba(255,255,255,.84);
      border-color: rgba(13,71,161,.18);
    }
    .students-section .student-card h3 { color: var(--blue); }
    .students-section .student-card p, .students-section .student-card li { color: #334155; }

    .contact-box {
      display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; align-items: stretch;
    }
    .contact-panel {
      border-radius: 18px; padding: 24px; background: var(--blue-light); border: 1px solid #c7ddff;
    }
    .contact-button {
      display: inline-flex; margin-top: 12px; padding: 12px 18px;
      border-radius: 999px; background: var(--blue); color: white; font-weight: 800; text-decoration: none;
    }

    footer { background: var(--navy); color: #cbd5e1; padding: 34px 24px; text-align: center; }
    footer strong { color: white; }

    @media (max-width: 900px) {
      .overview-grid, .research-grid, .members-grid, .students-grid, .contact-box {
        grid-template-columns: 1fr;
      }
      .nav { align-items: flex-start; flex-direction: column; }
      section { padding: 28px; }
    }

/* Shared styles for Research Area detail pages */
.detail-hero{background:radial-gradient(circle at top right,rgba(255,255,255,.12),transparent 34%),linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);color:white;padding:72px 24px 62px}
.detail-hero .hero-inner{max-width:1180px;margin:0 auto;padding:0}.detail-hero .eyebrow{color:#bfdbfe}.detail-hero h1{margin:10px 0 18px;max-width:980px;font-size:clamp(2.1rem,4.5vw,3.8rem);line-height:1.15}.detail-hero p{max-width:880px;margin:0;color:#e2e8f0;font-size:1.08rem}
.breadcrumb{max-width:1180px;margin:0 auto;padding:15px 24px;color:var(--muted);font-size:.9rem}.breadcrumb a{color:var(--blue)}
.detail-main{max-width:1180px;margin:0 auto;padding:22px 24px 76px}.detail-main section{margin:38px 0 0;padding:32px;scroll-margin-top:90px}.detail-main h2{margin-top:0;color:var(--navy)}.detail-main h3{color:var(--navy)}
.detail-panel{background:white;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:30px;align-items:start}
.detail-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.detail-nav a,.detail-tag{display:inline-flex;padding:7px 12px;border-radius:999px;background:var(--blue-light);color:var(--blue);font-size:.88rem;font-weight:800;text-decoration:none}
.detail-callout{background:var(--blue-light);border-left:5px solid var(--blue);border-radius:0 14px 14px 0;padding:21px 23px}
.detail-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}.detail-feature{padding:22px;background:white;border:1px solid var(--line);border-radius:16px}.detail-feature h3{margin-top:0}
.detail-table-wrap{overflow-x:auto;margin-top:20px}.detail-table{width:100%;min-width:780px;border-collapse:collapse;background:white}.detail-table caption{text-align:left;margin-bottom:10px;color:var(--navy);font-weight:800}.detail-table th,.detail-table td{padding:14px 15px;border:1px solid var(--line);text-align:left;vertical-align:top}.detail-table th{background:var(--navy);color:white}.detail-table tbody tr:nth-child(even){background:#f8fafc}
.detail-figure{margin:0;padding:17px;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.detail-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.detail-figure figcaption{margin-top:10px;color:var(--muted);font-size:.88rem}
.detail-formula{margin:18px 0;padding:17px 19px;background:#f8fafc;border:1px solid var(--line);border-radius:12px;font-family:'Times New Roman',serif;font-size:1.08rem}
.detail-back{display:inline-flex;margin-top:38px;padding:11px 17px;border:1px solid var(--blue);border-radius:999px;color:var(--blue);font-weight:800;text-decoration:none}.template-note{border:1px dashed #94a3b8;background:#f8fafc;border-radius:14px;padding:18px;color:#475569}
@media(max-width:900px){.detail-grid,.detail-feature-grid{grid-template-columns:1fr}.detail-main section{padding:26px}}