/* ----------------- RESET & TOKENS ----------------- */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }

:root{
  /* Base palette */
  --bg:#0b1020;
  --panel:#0f172a;
  --ink:#e5e7eb;
  --sub:#94a3b8;
  --brand:#60a5fa;
  --accent:#a78bfa;
  --card:#0b1221;
  --border:#1f2937;
  --muted:#0b1221;
  --shadow:0 20px 60px rgba(2,6,23,.35);

  /* Chips and rings */
  --ring:0 0 0 3px rgba(96,165,250,.26);

  /* CV gradient (blue ➜ purple) */
  --cv-grad-start:#3b82f6;        /* blue-500 */
  --cv-grad-end:#a78bfa;          /* violet-400/500 */
  --cv-grad-start-hover:#60a5fa;  /* hover lighten */
  --cv-grad-end-hover:#c4b5fd;
  --cv-text:#0b1020;              /* dark text on gradient */
}

body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 700px at 10% -10%, #1f2a44 0%, transparent 70%), var(--bg);
  line-height:1.6;
}
a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }
.container{ width:min(1200px, 92%); margin-inline:auto; }

/* ----------------- LAYOUT ----------------- */
.layout{
  display:grid; grid-template-columns: 300px 1fr; gap: 2rem; padding: 1.5rem 0 3rem;
}

.sidebar{
  position:sticky; top:1rem; align-self:start;
  background: linear-gradient(180deg, #0e1426, #0a0f1e);
  border:1px solid var(--border); border-radius: 18px; padding: 1.2rem;
  box-shadow: var(--shadow);
}

/* Avatar */
.avatar{
  width:88px; height:88px; border-radius:50%;
  object-fit:cover; display:block; box-shadow: inset 0 0 0 4px #0f172a;
}

.name{ font-weight:800; font-size:1.2rem; margin:.8rem 0 .1rem; }
.role{ color:var(--sub); font-weight:600; }
.sidebar .meta{ margin:.6rem 0 1rem; color:var(--sub); font-size:.95rem; }

.side-links a{
  display:block; padding:.45rem .6rem; border-radius:10px; color:var(--ink);
  border:1px solid transparent;
}
.side-links a:hover{ background:#0b1221; border-color:#162033; text-decoration:none; }

/* ----------------- TOP NAV ----------------- */
.topnav{ display:flex; align-items:center; gap:.6rem; justify-content:space-between; padding:.8rem 0; }
.topnav .links{ display:flex; gap:.4rem; flex-wrap:wrap; }
.topnav .links a{
  padding:.45rem .7rem; border-radius:999px; color:#cbd5e1; border:1px solid #1f2937;
}
.topnav .links a.active,
.topnav .links a:hover{ background:#101a31; color:#fff; text-decoration:none; }

/* ----------------- LANGUAGE TOGGLE ----------------- */
.langbar{ display:flex; gap:.4rem; padding:.4rem; background:#0d1425; border:1px solid #162033; border-radius:999px; }
.langbar label{ padding:.35rem .65rem; border-radius:999px; cursor:pointer; color:#cbd5e1; font-weight:700; }
.lang-input{ position:absolute; left:-9999px; }
#lang-zh:checked ~ .page .lang-en{ display:none !important; }
#lang-en:checked ~ .page .lang-zh{ display:none !important; }
#lang-en:checked ~ .page .switch-en,
#lang-zh:checked ~ .page .switch-zh{ background:#0a0f1e; color:#fff; box-shadow: var(--shadow); }

/* ---------- Utility: superscript '2' for NLP²CT ---------- */
.sup2{ font-size:.7em; vertical-align:super; line-height:0; }

/* ----------------- CONTENT ----------------- */
main{
  background: linear-gradient(180deg,#0c1324 0%, #0b1020 60%);
  border:1px solid var(--border); border-radius:18px; padding:1.2rem;
  box-shadow: var(--shadow);
}
h1{ font-size: clamp(1.6rem, 2.4vw, 2rem); margin:.2rem 0 1rem; }
h2{ font-size:1.2rem; letter-spacing:.3px; margin:1.6rem 0 .8rem; border-left: 4px solid var(--accent); padding-left:.6rem; }
.lead{ color:#cbd5e1; font-size:1.05rem; }

/* Chips */
.kv{ display:flex; gap:.5rem; flex-wrap:wrap; }
.tag{
  background:#101a31; color:#a5b4fc; padding:.28rem .6rem; border-radius:999px;
  font-weight:700; font-size:.85rem; border:1px solid #1f2937;
}

/* Cards & Grid */
.card{ background:var(--card); border:1px solid #162033; border-radius:14px; padding:1rem; box-shadow:var(--shadow); }
.grid{ display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr); }
.col-12{ grid-column: span 12; } .col-8{ grid-column: span 8; }
.col-6{ grid-column: span 6; } .col-4{ grid-column: span 4; }

/* Projects list (two tall pills) */
.projects-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top:1rem;
}

/* Experience blocks */
.timeline{ display:flex; flex-direction:column; gap:1.25rem; margin-top:.75rem; }
.timeline::before{ content:none !important; }
.item::before{ content:none !important; }
.exp-card{
  background:#0b1221; border:1px solid #162033; border-radius:14px; padding:1.1rem 1.25rem;
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease;
}
.exp-card:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.45); }
.exp-header{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.35rem .75rem; margin-bottom:.35rem; }
.exp-title{ font-size:1.1rem; font-weight:800; color:var(--brand); margin:0; }
.exp-org{ font-weight:700; color:var(--ink); }
.exp-date{ font-size:.92rem; color:var(--sub); white-space:nowrap; justify-self:end; }
.exp-location{ font-size:.92rem; color:var(--sub); margin:0 0 .4rem; }
.exp-bullets{ margin:0; padding-left:1.2rem; }
.exp-bullets li{ margin:.28rem 0; color:#d1d5db; }

/* Generic lists */
ul{ margin:.4rem 0 .8rem 1.1rem; }
li{ margin:.25rem 0; }

/* ===== APA citation styling ===== */
.apa-list { list-style: decimal; padding-left:1.4rem; margin:.4rem 0 1rem; }
.apa-list li { margin:.5rem 0; }
.apa-item { display:block; text-indent:-1.4rem; padding-left:1.4rem; }
.apa-title { font-weight:700; }
.apa-list a { word-break:break-all; }

/* ----------------- CV BUTTONS (blue ➜ purple gradient) ----------------- */
.cv-group{ display:flex; flex-direction:column; gap:.65rem; margin-top:.9rem; }

.cv-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:.62rem 1.05rem; width:100%;
  border-radius:999px;
  background: linear-gradient(135deg,var(--cv-grad-start),var(--cv-grad-end));
  color:var(--cv-text);
  border:0;
  font-weight:800; letter-spacing:.2px;
  text-decoration:none;
  box-shadow: 0 10px 24px rgba(2,6,23,.28);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.cv-btn:hover{
  background: linear-gradient(135deg,var(--cv-grad-start-hover),var(--cv-grad-end-hover));
  filter: saturate(1.05);
  box-shadow: var(--ring), 0 16px 36px rgba(2,6,23,.36);
  text-decoration:none;
}
.cv-btn:active{ transform: translateY(1px); }

/* Keep old .side-cta in case some pages still use it – map to gradient */
.side-cta{
  display:inline-block; margin-top:.6rem; width:100%;
  background: linear-gradient(135deg,var(--cv-grad-start),var(--cv-grad-end));
  color:var(--cv-text); font-weight:800;
  padding:.62rem 1.05rem; border-radius:999px; border:0;
  box-shadow: 0 10px 24px rgba(2,6,23,.28);
}
.side-cta:hover{
  background: linear-gradient(135deg,var(--cv-grad-start-hover),var(--cv-grad-end-hover));
  box-shadow: var(--ring), 0 16px 36px rgba(2,6,23,.36);
  text-decoration:none;
}

/* ----------------- FOOTER ----------------- */
footer{ color:#94a3b8; padding:1.6rem 0 3rem; text-align:center; }
footer .flag{ margin-top:.8rem; opacity:.95; }
footer a{ text-decoration: underline; }