/* ==========================================================================
   Qiran Jia — personal site
   No build step. Edit content in the .html files; edit looks here.
   ========================================================================== */

/* --- Theme palettes -------------------------------------------------------
   Every theme overrides the same tokens. To add one: copy a block, rename it,
   and add an <li> to the theme menu in each page's nav.
   -------------------------------------------------------------------------- */
:root {
  /* This is the site's default (always-on, not OS-dependent) look: a dark
     "neo sci-fi" palette. Every other [data-theme] block below sets its own
     --accent2 / --font-display / --glow / --grid-opacity / --particle-opacity
     so the shared background chrome (grid + glow blobs + particle field)
     stays coherent no matter which theme a visitor picks. */
  --bg: #05070d;
  --bg-2: #0a0f1c;
  --surface: rgba(255, 255, 255, .04);
  --surface-strong: rgba(255, 255, 255, .07);
  --text: #edf1fb;
  --muted: #8b93ad;
  --accent: #4fd6ff;
  --accent2: #9a7bff;
  --accent-soft: rgba(79, 214, 255, .12);
  --on-accent: #04070d;
  --border: rgba(148, 168, 210, .18);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 20px 60px rgba(0, 0, 0, .55);
  --glow: 0 0 1px rgba(79, 214, 255, .8), 0 0 22px rgba(79, 214, 255, .28);

  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Space Grotesk", var(--font-sans);
  --radius: 14px;
  --measure: 46rem;
  --grid-opacity: .5;
  --particle-opacity: .6;
}

html[data-theme="minimal"] {
  --bg: #ffffff; --surface: #fafafa; --text: #111111; --muted: #6b6b6b;
  --accent: #111111; --accent-soft: #eeeeee; --on-accent: #ffffff;
  --border: #e5e5e5; --shadow: none;
  --accent2: var(--accent); --font-display: var(--font-sans); --glow: none;
  --grid-opacity: .15; --particle-opacity: .18;
}
html[data-theme="contrast"] {
  --bg: #000000; --surface: #0d0d0d; --text: #ffffff; --muted: #cfcfcf;
  --accent: #ffe600; --accent-soft: #2b2600; --on-accent: #000000;
  --border: #3a3a3a; --shadow: none;
  --accent2: var(--accent); --font-display: var(--font-sans);
  --glow: 0 0 16px rgba(255, 230, 0, .35);
  --grid-opacity: .35; --particle-opacity: .3;
}
html[data-theme="coffee"] {
  --bg: #f3ece3; --surface: #e9dfd2; --text: #2f2418; --muted: #6d5b47;
  --accent: #8a5a2b; --accent-soft: #e0cdb6; --on-accent: #fdf8f2;
  --border: #d8c8b4; --shadow: 0 1px 2px rgba(70, 50, 30, .08), 0 8px 24px rgba(70, 50, 30, .07);
  --accent2: var(--accent); --font-display: var(--font-sans); --glow: none;
  --grid-opacity: .12; --particle-opacity: .16;
}
html[data-theme="cupcake"] {
  --bg: #fff6f9; --surface: #ffe9f1; --text: #3d2733; --muted: #8a6b78;
  --accent: #e0568a; --accent-soft: #ffd7e5; --on-accent: #ffffff;
  --border: #f7d3e0; --shadow: 0 1px 2px rgba(190, 100, 140, .1), 0 8px 24px rgba(190, 100, 140, .08);
  --accent2: var(--accent); --font-display: var(--font-sans); --glow: none;
  --grid-opacity: .1; --particle-opacity: .16;
}
html[data-theme="dracula"] {
  --bg: #282a36; --surface: #343746; --text: #f8f8f2; --muted: #a5abc0;
  --accent: #bd93f9; --accent-soft: #3b3352; --on-accent: #282a36;
  --border: #44475a; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
  --accent2: #ff79c6; --font-display: var(--font-sans);
  --glow: 0 0 18px rgba(189, 147, 249, .28);
  --grid-opacity: .3; --particle-opacity: .3;
}
html[data-theme="marine"] {
  --bg: #071a2b; --surface: #0d2739; --text: #e2f1f8; --muted: #93b4c6;
  --accent: #38bdf8; --accent-soft: #123449; --on-accent: #04141f;
  --border: #1b3d54; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
  --accent2: #22d3ee; --font-display: var(--font-sans);
  --glow: 0 0 18px rgba(56, 189, 248, .3);
  --grid-opacity: .32; --particle-opacity: .32;
}
html[data-theme="matcha"] {
  --bg: #f4f7ef; --surface: #e8efdd; --text: #22301c; --muted: #5c6f52;
  --accent: #4f7a2e; --accent-soft: #dbe8c9; --on-accent: #ffffff;
  --border: #d3e0c2; --shadow: 0 1px 2px rgba(50, 70, 40, .07), 0 8px 24px rgba(50, 70, 40, .06);
  --accent2: var(--accent); --font-display: var(--font-sans); --glow: none;
  --grid-opacity: .1; --particle-opacity: .14;
}
html[data-theme="retro"] {
  --bg: #f6efe0; --surface: #efe4cd; --text: #33291b; --muted: #6f6046;
  --accent: #c2571f; --accent-soft: #f2d9c2; --on-accent: #fdf6e9;
  --border: #ded0b4; --shadow: 0 1px 2px rgba(90, 70, 40, .08), 0 8px 24px rgba(90, 70, 40, .06);
  --accent2: var(--accent); --font-display: var(--font-sans); --glow: none;
  --grid-opacity: .1; --particle-opacity: .14;
}
html[data-theme="solar"] {
  --bg: #fdf6e3; --surface: #f4ecd8; --text: #073642; --muted: #657b83;
  --accent: #268bd2; --accent-soft: #e3e9d8; --on-accent: #fdf6e3;
  --border: #e4dbc4; --shadow: 0 1px 2px rgba(7, 54, 66, .07), 0 8px 24px rgba(7, 54, 66, .06);
  --accent2: var(--accent); --font-display: var(--font-sans); --glow: none;
  --grid-opacity: .1; --particle-opacity: .14;
}
html[data-theme="synthwave"] {
  --bg: #1a1030; --surface: #241844; --text: #f6e9ff; --muted: #b39ede;
  --accent: #ff5ea3; --accent-soft: #3a1f52; --on-accent: #14082a;
  --border: #3d2a63; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 24px rgba(255, 94, 163, .12);
  --accent2: #7afcff; --font-display: var(--font-sans);
  --glow: 0 0 20px rgba(255, 94, 163, .3);
  --grid-opacity: .4; --particle-opacity: .35;
}

/* --- Background chrome: grid + glow blobs + particle field ---------------
   Fixed decorative layers behind everything. Token-driven so every theme
   gets a tasteful version of the same effect instead of a hard style break.
   -------------------------------------------------------------------------- */
html { background: var(--bg); }
/* body paints no background of its own — the html canvas background above
   is the true bottom layer, so the fixed grid/glow/particle layers below
   (negative z-index, position: fixed) stay visible instead of being
   painted over by an opaque body box. */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}
/* Fine technical grid */
body::before {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--accent) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--accent) 70%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: calc(var(--grid-opacity) * .12);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 85%);
}
/* Two soft glow blobs, top-left cyan / bottom-right violet */
body::after {
  background:
    radial-gradient(38rem 26rem at 8% -6%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 60%),
    radial-gradient(34rem 26rem at 96% 18%, color-mix(in srgb, var(--accent2) 24%, transparent), transparent 60%),
    radial-gradient(40rem 30rem at 50% 120%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
  opacity: .8;
}

#fx {
  position: fixed; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: var(--particle-opacity);
}
@media (prefers-reduced-motion: reduce) { #fx { display: none; } }

/* --- Base ----------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* thin neon scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px; border: 2px solid var(--bg);
}
* { scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent; scrollbar-width: thin; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -.015em; font-family: var(--font-display); }
h2 {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono);
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  font-weight: 600;
  margin: 3.25rem 0 1.35rem;
}
h2::before {
  content: "";
  width: .55rem; height: .55rem;
  background: var(--accent);
  box-shadow: var(--glow);
  flex: 0 0 auto;
  transform: rotate(45deg);
}
p { margin: 0 0 1rem; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; }
.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 1rem; top: .5rem; z-index: 100; background: var(--accent);
  color: var(--on-accent); padding: .5rem .75rem; border-radius: 8px;
}

/* --- Top bar -------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 25%, transparent);
}
.topbar-inner {
  max-width: var(--measure); margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}
.brand {
  font-family: var(--font-display); font-weight: 650; color: var(--text); letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; color: var(--accent); text-shadow: var(--glow); }

.nav { display: flex; gap: .25rem; margin-left: auto; align-items: center; }
.nav a {
  position: relative;
  color: var(--muted); padding: .35rem .6rem; border-radius: 8px;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
}
.nav a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); background: var(--accent-soft); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: 1px;
  height: 2px; background: var(--accent); box-shadow: var(--glow);
}

.menu-btn {
  display: none; margin-left: auto; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: .35rem .5rem; cursor: pointer;
}

/* Theme picker */
.theme { position: relative; }
.theme-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: .35rem .6rem; font: inherit; font-family: var(--font-mono); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; display: flex; align-items: center; gap: .35rem;
}
.theme-btn:hover { color: var(--text); border-color: var(--accent); }
.theme-list {
  position: absolute; right: 0; top: calc(100% + .4rem);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: .35rem; margin: 0; list-style: none;
  min-width: 10rem; max-height: 70vh; overflow: auto;
}
.theme-list[hidden] { display: none; }
.theme-list button {
  width: 100%; text-align: left; background: none; border: 0; color: var(--text);
  font: inherit; font-size: .92rem; padding: .35rem .5rem; border-radius: 6px; cursor: pointer;
}
.theme-list button:hover { background: var(--surface); }
.theme-list button[aria-pressed="true"] { color: var(--accent); font-weight: 600; }
.theme-list button[aria-pressed="true"]::after { content: " ✓"; }

/* --- Hero ----------------------------------------------------------------- */
main { padding-bottom: 4rem; }
.hero { display: flex; gap: 1.75rem; align-items: center; padding: 3.5rem 0 .5rem; }
.avatar {
  position: relative;
  width: 108px; height: 108px; border-radius: 50%; flex: 0 0 108px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  font-size: 2.1rem; font-weight: 650; letter-spacing: -.03em;
  border: 1px solid var(--border); overflow: hidden;
  box-shadow: var(--glow);
}
.avatar::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--accent), var(--accent2), var(--accent));
  opacity: .8;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.hero h1 {
  font-size: 2.35rem; margin: 0 0 .25rem;
  background: linear-gradient(95deg, var(--text) 35%, var(--accent) 75%, var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.role { color: var(--text); font-weight: 550; margin: 0; }
.tagline {
  color: var(--muted); font-size: .85rem; margin: .4rem 0 0;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
}

/* Contact icon row */
.links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; }
.links a {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: 999px; padding: .4rem .9rem;
  font-family: var(--font-mono); font-size: .82rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.links a:hover {
  text-decoration: none; border-color: var(--accent); color: var(--accent);
  box-shadow: var(--glow); transform: translateY(-1px);
}
.links svg { width: 15px; height: 15px; fill: currentColor; }

/* --- Pills ---------------------------------------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.pills li {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .32rem .85rem; font-size: .85rem;
  font-family: var(--font-mono);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pills li:hover { border-color: var(--accent); box-shadow: var(--glow); }

/* --- Skill groups ------------------------------------------------------------- */
.skill-groups { display: grid; gap: 1.4rem; }
.skill-group h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-family: var(--font-mono); font-weight: 600;
  margin: 0 0 .55rem;
}

/* --- Timeline ------------------------------------------------------------- */
.timeline {
  list-style: none; margin: 0; padding: 0 0 0 1.4rem;
  border-left: 2px solid var(--border);
}
.timeline > li { position: relative; padding: 0 0 2rem .35rem; }
.timeline > li:last-child { padding-bottom: .5rem; }
.timeline > li::before {
  content: ""; position: absolute; left: calc(-1.4rem - 6px); top: .45rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  box-shadow: var(--glow);
}
.tl-title { font-weight: 600; margin: 0; font-family: var(--font-display); }
.tl-org { color: var(--accent); font-weight: 500; }
.tl-date {
  color: var(--muted); font-size: .8rem; margin: .2rem 0 .6rem;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em;
}
.timeline ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.timeline ul li { margin-bottom: .5rem; }

/* --- Publications --------------------------------------------------------- */
.pubs { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pubs > li {
  padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pubs > li:hover { border-color: var(--accent); box-shadow: var(--glow); transform: translateY(-1px); }
.pub-title { font-weight: 600; margin: 0 0 .3rem; font-family: var(--font-display); }
.pub-authors { color: var(--muted); font-size: .92rem; margin: 0 0 .15rem; }
.pub-authors .me { color: var(--text); font-weight: 650; }
.pub-venue {
  font-size: .8rem; color: var(--accent); margin: 0; font-style: normal;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em;
}
.pub-links { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .65rem; }
.pub-links a {
  font-family: var(--font-mono); font-size: .78rem; border: 1px solid var(--border); border-radius: 6px;
  padding: .15rem .55rem; color: var(--muted);
}
.pub-links a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; box-shadow: var(--glow); }

/* --- Posts / news --------------------------------------------------------- */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.posts > li {
  padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.posts > li:hover { border-color: var(--accent); box-shadow: var(--glow); }
.posts time {
  color: var(--accent); font-size: .76rem; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.posts .post-title { font-weight: 600; margin: .25rem 0; font-family: var(--font-display); }
.posts p { margin: .15rem 0 0; color: var(--muted); font-size: .93rem; }

.post-body { padding-top: 2rem; }
.post-body h1 { font-size: 1.9rem; margin: 0 0 .3rem; }
.post-body .meta {
  color: var(--accent); font-size: .78rem; margin-bottom: 2rem;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
}
.post-body blockquote {
  margin: 1.5rem 0; padding: .3rem 0 .3rem 1rem;
  border-left: 3px solid var(--accent); color: var(--muted);
}
.post-body code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: .1em .35em;
}
.post-body pre {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; overflow-x: auto;
}
.post-body pre code { background: none; border: 0; padding: 0; }

/* --- Footer --------------------------------------------------------------- */
.foot {
  position: relative;
  border-top: 1px solid var(--border); margin-top: 3rem; padding: 1.5rem 0 3rem;
  color: var(--muted); font-size: .8rem; font-family: var(--font-mono);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  opacity: .7;
}

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .menu-btn { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: .5rem .75rem 1rem; margin: 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  }
  .nav.open { display: flex; }
  .nav a { padding: .6rem .5rem; }
  .theme { margin-top: .5rem; }
  .theme-btn { width: 100%; justify-content: space-between; }
  .theme-list { left: 0; right: 0; }
  .hero { flex-direction: column; align-items: flex-start; gap: 1rem; padding-top: 2rem; }
  .hero h1 { font-size: 1.75rem; }
}