/* ZIGEN app: FEIVO's signed-in look. A dark frame and sidebar around one rounded content panel, neutral
   greys, compact navigation, quiet cards and dark primary buttons; on phones a dark header and a floating
   tab bar. Sizes and colours follow FEIVO's dashboard (measured 22 Oct 2026); the content is Hanzi Map's. */

@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url(fonts/plus-jakarta-sans-500.latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url(fonts/plus-jakarta-sans-500.ext.woff2) format("woff2"); unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-017E, U+01C4-01CC, U+01CD-01DC, U+0300-030C; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url(fonts/plus-jakarta-sans-600.latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url(fonts/plus-jakarta-sans-600.ext.woff2) format("woff2"); unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-017E, U+01C4-01CC, U+01CD-01DC, U+0300-030C; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url(fonts/plus-jakarta-sans-700.latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url(fonts/plus-jakarta-sans-700.ext.woff2) format("woff2"); unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-017E, U+01C4-01CC, U+01CD-01DC, U+0300-030C; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url(fonts/plus-jakarta-sans-800.latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url(fonts/plus-jakarta-sans-800.ext.woff2) format("woff2"); unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-017E, U+01C4-01CC, U+01CD-01DC, U+0300-030C; }

:root {
  --frame: #141414;
  --panel: #fbfbfb;
  --card: #fff;
  --sunk: #f1f1f1;
  --tint: #f7f7f7;
  --line: #e3e3e3;
  --line-2: #ebebeb;
  --ink: #303030;
  --ink-2: #616161;
  --ink-3: #737373;
  --muted: #8a8a8a;
  --accent: #2464ed;
  --accent-soft: rgb(37 99 235 / .1);
  --btn: #303030;
  --btn-hover: #1f1f1f;
  --on-btn: #fff;
  --btn-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 -1px 0 rgb(0 0 0 / .6), 0 1px 2px rgb(0 0 0 / .12);
  --card-shadow: 0 1px 0 rgb(26 26 26 / .07), 0 1px 2px rgb(26 26 26 / .04);
  --pop-shadow: 0 12px 40px rgb(0 0 0 / .16);
  --seal: #b8382b;
  --good: #047857; --good-soft: rgb(16 185 129 / .12);
  --warn: #b45309; --warn-soft: rgb(245 158 11 / .14);
  --bad: #dc2626; --bad-soft: rgb(239 68 68 / .1);
  --blue: #2563eb; --blue-soft: rgb(59 130 246 / .1);
  --t1: #cf3f35; --t2: #bf7a0b; --t3: #2b8a4c; --t4: #2d68cf; --t5: #8a8f97;
  --tile-known: #303030; --on-tile-known: #fbfbfb; --on-tile-known-2: #b9b9b9;
  --glass: rgb(255 255 255 / .92);
  --glass-line: rgb(0 0 0 / .06);
  --glass-on: #ececec;

  --ui: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hanzi: "Kaiti SC", "STKaiti", "KaiTi", "PingFang SC", "Noto Serif SC", serif;
  --hanzi-text: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;

  --gap: 8px;
  --radius: 16px;
  --rail: 244px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur: 340ms;
  --spring: cubic-bezier(.2, .9, .25, 1);
  --tabbar-space: calc(90px + env(safe-area-inset-bottom, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --frame: #0b0b0b; --panel: #1a1a1a; --card: #232323; --sunk: #2e2e2e; --tint: #212121; --line: #333; --line-2: #2b2b2b;
    --ink: #ececec; --ink-2: #b5b5b5; --ink-3: #9a9a9a; --muted: #7a7a7a; --accent: #8fb4ff; --accent-soft: rgb(143 180 255 / .12);
    --btn: #ececec; --btn-hover: #fff; --on-btn: #1a1a1a; --btn-shadow: none; --card-shadow: none; --pop-shadow: 0 12px 40px rgb(0 0 0 / .5);
    --seal: #e0675a; --good: #6ee7b7; --good-soft: rgb(16 185 129 / .14); --warn: #fcd34d; --warn-soft: rgb(245 158 11 / .14);
    --bad: #fca5a5; --bad-soft: rgb(239 68 68 / .14); --blue: #93b4ff; --blue-soft: rgb(59 130 246 / .16);
    --t1: #ff7b6f; --t2: #f1b14f; --t3: #61cf87; --t4: #7aa7ff; --t5: #9aa0a9;
    --tile-known: #ececec; --on-tile-known: #1a1a1a; --on-tile-known-2: #5a5a5a;
    --glass: rgb(38 38 38 / .92); --glass-line: rgb(255 255 255 / .08); --glass-on: #3a3a3a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --frame: #0b0b0b; --panel: #1a1a1a; --card: #232323; --sunk: #2e2e2e; --tint: #212121; --line: #333; --line-2: #2b2b2b;
  --ink: #ececec; --ink-2: #b5b5b5; --ink-3: #9a9a9a; --muted: #7a7a7a; --accent: #8fb4ff; --accent-soft: rgb(143 180 255 / .12);
  --btn: #ececec; --btn-hover: #fff; --on-btn: #1a1a1a; --btn-shadow: none; --card-shadow: none; --pop-shadow: 0 12px 40px rgb(0 0 0 / .5);
  --seal: #e0675a; --good: #6ee7b7; --good-soft: rgb(16 185 129 / .14); --warn: #fcd34d; --warn-soft: rgb(245 158 11 / .14);
  --bad: #fca5a5; --bad-soft: rgb(239 68 68 / .14); --blue: #93b4ff; --blue-soft: rgb(59 130 246 / .16);
  --t1: #ff7b6f; --t2: #f1b14f; --t3: #61cf87; --t4: #7aa7ff; --t5: #9aa0a9;
  --tile-known: #ececec; --on-tile-known: #1a1a1a; --on-tile-known-2: #5a5a5a;
  --glass: rgb(38 38 38 / .92); --glass-line: rgb(255 255 255 / .08); --glass-on: #3a3a3a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html, body { background: var(--frame); }
body { color: var(--ink); font: 14px/1.5 var(--ui); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hz { font-family: var(--hanzi); font-weight: 400; }
.zh { font-family: var(--hanzi-text); }
.t1 { color: var(--t1); } .t2 { color: var(--t2); } .t3 { color: var(--t3); } .t4 { color: var(--t4); } .t5 { color: var(--t5); }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: 13px; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); font: 600 11px/1 var(--ui); }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- frame ------------------------------------------------------------------------------------- */

.zg { min-height: 100vh; }
.zg-main { position: relative; background: var(--panel); outline: none; }
.zg-page { width: 100%; max-width: 1152px; margin: 0 auto; padding: 40px; }
.zg-page.narrow { max-width: 760px; }

@media (min-width: 1024px) {
  .zg-main {
    margin: var(--gap) var(--gap) var(--gap) var(--rail);
    min-height: calc(100vh - 2 * var(--gap));
    border-radius: var(--radius);
    transition: margin-left var(--dur) var(--ease);
  }
  /* A fixed ring of frame colour keeps the panel's rounded window shape while the page scrolls under it. */
  .zg-main::after {
    content: "";
    position: fixed;
    z-index: 29;
    top: var(--gap); right: var(--gap); bottom: var(--gap); left: var(--rail);
    border-radius: var(--radius);
    box-shadow: 0 0 0 32px var(--frame);
    pointer-events: none;
    transition: left var(--dur) var(--ease);
  }
  .zg-mhead, .zg-tabbar, .zg-menu { display: none !important; }
  html.rail-closed { --rail: 76px; }
}

/* ---- sidebar ----------------------------------------------------------------------------------- */

.zg-side {
  position: fixed; z-index: 40; inset: 0 auto 0 0;
  display: none; flex-direction: column;
  width: var(--rail);
  background: var(--frame);
  color: #e3e3e3;
  transition: width var(--dur) var(--ease);
  overflow: clip;
}
@media (min-width: 1024px) { .zg-side { display: flex; } }
.zg-side-top { position: relative; display: flex; align-items: center; height: 60px; padding: 0 14px 0 24px; flex: none; }
.zg-logo { display: flex; align-items: center; gap: 0; color: #fff; text-decoration: none; height: 28px; }
.zg-logo .letters { display: block; overflow: hidden; width: 62px; transition: width var(--dur) var(--ease); }
.zg-logo .letters span { display: block; font: 800 17px/1 var(--display); letter-spacing: -.02em; transform-origin: 100% 50%; transition: transform var(--dur) var(--ease), opacity calc(var(--dur) * .6) ease; white-space: nowrap; }
.zg-logo .logo-glyph { display: block; font: 400 19px/1 var(--hanzi); margin-left: 4px; transform-origin: 0 50%; transition: transform var(--dur) var(--ease); }
.rail-closed .zg-logo .letters { width: 0; }
.rail-closed .zg-logo .letters span { transform: scale(0, 1.25); opacity: 0; }
.rail-closed .zg-logo .logo-glyph { transform: translateX(-2px) scale(1.45); }
.zg-collapse { position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border: 0; border-radius: 8px; background: none; color: #a8a8a8; transition: background-color .15s, color .15s, transform var(--dur) var(--ease); }
.zg-collapse:hover { background: rgb(255 255 255 / .08); color: #fff; }
.zg-collapse::before { content: ""; grid-area: 1 / 1; width: 17px; height: 15px; border: 1.6px solid currentColor; border-radius: 4.5px; }
.zg-collapse::after { content: ""; grid-area: 1 / 1; width: 1.6px; height: 15px; background: currentColor; transform: translateX(-2.6px); }
.rail-closed .zg-collapse { position: absolute; top: 60px; left: 22px; }

.zg-nav { display: flex; flex-direction: column; padding: 4px 8px 12px; transition: padding-top var(--dur) var(--ease); }
.rail-closed .zg-nav { padding-top: 48px; }
.zg-search {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; margin-bottom: 10px; padding: 0 10px 0 21px;
  border: 1px solid rgb(255 255 255 / .1); border-radius: 8px; background: rgb(255 255 255 / .08); color: #fff;
  font-size: 13px; font-weight: 500; text-align: left; transition: background-color .15s;
}
.zg-search:hover { background: rgb(255 255 255 / .13); }
.zg-search .ico { width: 16px; height: 16px; color: #8fb4ff; }
.zg-search .label { color: #bdbdbd; flex: 1; white-space: nowrap; }
.zg-search kbd { border-color: rgb(255 255 255 / .14); background: transparent; color: #8f8f8f; }
.zg-nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; margin-bottom: 1px; padding: 6px 10px 6px 19px;
  border-radius: 8px; color: #d4d4d4; text-decoration: none; transition: background-color .15s, color .15s;
}
.zg-nav-item:hover { background: rgb(255 255 255 / .06); color: #fff; }
.zg-nav-item[aria-current="page"] { background: rgb(255 255 255 / .12); color: #fff; }
.zg-nav-item .ico { opacity: .92; }
.zg-nav-item .label { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; }
.zg-nav-item[aria-current="page"] .label { font-weight: 600; }
.zg-nav-item .count { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 6px; background: rgb(255 255 255 / .12); color: #ececec; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.zg-nav-item .soon { padding: 1px 6px; border-radius: 6px; background: rgb(255 255 255 / .08); color: #9a9a9a; font-size: 10px; font-weight: 550; white-space: nowrap; }
.zg-side-links { margin-top: auto; padding: 0 8px 4px; display: grid; }
.zg-side-links button, .zg-side-links a { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px 0 21px; border: 0; border-radius: 8px; background: none; color: #bdbdbd; font-size: 13px; text-decoration: none; text-align: left; transition: background-color .15s, color .15s; }
.zg-side-links :is(button, a):hover { color: #fff; }
.zg-side-links .ico { width: 16px; height: 16px; }
.zg-user { display: flex; align-items: center; gap: 10px; margin: 4px 8px 12px; padding: 6px 10px 6px 14px; border-radius: 8px; color: #fff; }
.zg-user .av { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: #4f46e5; color: #fff; font: 400 16px/1 var(--hanzi); }
.zg-user .who { display: grid; min-width: 0; line-height: 1.25; }
.zg-user .who b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.zg-user .who span { color: #9a9a9a; font-size: 11px; white-space: nowrap; }
.zg-user .who span em { font-style: normal; color: #8fb4ff; }

/* Text that only exists in the open rail fades in as it opens, and out before it closes. */
.zg-side :is(.label, .count, .soon, .who, .zg-search kbd) { transition: opacity .12s ease-out; }
.rail-closed .zg-side :is(.label, .count, .soon, .who, .zg-search kbd) { opacity: 0; }
html:not(.rail-closed) .zg-side :is(.label, .count, .who) { animation: zg-label-in .24s ease-out 90ms backwards; }
@keyframes zg-label-in { from { opacity: 0; transform: translateX(-4px); } }
.rail-closed .zg-search { padding-left: 21px; }

/* ---- phone header, tab bar and menu ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .zg-mhead {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 10px; height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
    background: var(--frame); color: #fff;
  }
  /* The header carries two curved corners just below itself, so the page slides under them. */
  .zg-mhead::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: var(--radius);
    background:
      radial-gradient(circle at 100% 100%, transparent calc(var(--radius) - .5px), var(--frame) var(--radius)) left top / var(--radius) var(--radius) no-repeat,
      radial-gradient(circle at 0 100%, transparent calc(var(--radius) - .5px), var(--frame) var(--radius)) right top / var(--radius) var(--radius) no-repeat;
    pointer-events: none;
  }
  .zg-main { border-radius: var(--radius) var(--radius) 0 0; min-height: calc(100vh - 56px); padding-bottom: var(--tabbar-space); }
  .zg-page { padding: 24px max(20px, env(safe-area-inset-right, 0px)) 32px max(20px, env(safe-area-inset-left, 0px)); }
}
.zg-mhead .zg-logo .letters { width: auto; }
.zg-mhead .pinyin-menu summary { border-color: rgb(255 255 255 / .14); background: rgb(255 255 255 / .06); color: #fff; }

.zg-tabbar {
  position: fixed; z-index: 45; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.zg-tabbar > * { pointer-events: auto; }
.zg-orb, .zg-pill-bar {
  border: 1px solid var(--glass-line); background: var(--glass);
  box-shadow: 0 10px 30px rgb(0 0 0 / .14), 0 2px 6px rgb(0 0 0 / .06);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.zg-orb { position: relative; display: grid; flex: 0 0 60px; height: 60px; place-items: center; border-radius: 50%; color: var(--ink); text-decoration: none; transition: background-color .15s; }
.zg-pill-bar { display: flex; flex: 1; min-width: 0; height: 64px; padding: 5px; gap: 2px; border-radius: 999px; }
.zg-tab { position: relative; display: grid; flex: 1; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.zg-tab[aria-current="page"], .zg-tab[aria-expanded="true"], .zg-orb[aria-current="page"] { background: var(--glass-on); }
.zg-tabbar .ico { width: 26px; height: 26px; }
.zg-tabbar .badge { position: absolute; top: 7px; left: calc(50% + 5px); min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid var(--card); border-radius: 999px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; }
/* Chorus: a glass orb holding a soft, slowly turning blob in the tone colours. */
.zg-orb.chorus-orb { overflow: hidden; }
.chorus-blob { width: 34px; height: 34px; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; background: radial-gradient(circle at 35% 30%, #fde4e1, #f7b4ab 22%, #a39ef7 55%, #738cf7 85%); box-shadow: 0 0 14px rgb(115 140 247 / .45); animation: zg-blob 9s ease-in-out infinite; }
@keyframes zg-blob { 0%, 100% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; transform: rotate(0); } 50% { border-radius: 56% 44% 46% 54% / 40% 56% 44% 60%; transform: rotate(160deg) scale(1.05); } }

.zg-menu { position: fixed; z-index: 44; inset: calc(56px + env(safe-area-inset-top, 0px)) 0 0; overflow: auto; padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(var(--tabbar-space) + 72px) max(12px, env(safe-area-inset-left, 0px)); background: var(--frame); color: #d4d4d4; animation: zg-fade .2s ease-out; }
.zg-menu a, .zg-menu button { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: #d4d4d4; font-size: 17px; font-weight: 550; text-decoration: none; text-align: left; }
.zg-menu [aria-current="page"] { background: rgb(255 255 255 / .12); color: #fff; }
.zg-menu .ico { width: 22px; height: 22px; }
.zg-menu .count { margin-left: auto; padding: 0 7px; border-radius: 6px; background: rgb(255 255 255 / .12); color: #ececec; font-size: 13px; }
.zg-menu hr { border: 0; border-top: 1px solid rgb(255 255 255 / .08); margin: 8px 16px; }
.zg-menu::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-space) + 84px); background: linear-gradient(to bottom, transparent, var(--frame) 62%); pointer-events: none; }
.zg-tabbar.is-menu .zg-pill-bar { flex: 0 1 auto; }
.zg-tabbar.is-menu { justify-content: center; }
.zg-tabbar.is-menu :is(.zg-orb, .zg-pill-bar) { border-color: rgb(255 255 255 / .08); background: #262626; color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .45); }
.zg-tabbar.is-menu .zg-tab { padding: 0 22px; gap: 10px; display: flex; color: #fff; font-size: 17px; font-weight: 600; }
.zg-tabbar.is-menu .zg-tab .ico { width: 22px; height: 22px; }
@keyframes zg-fade { from { opacity: 0; } }

/* ---- page header and type ---------------------------------------------------------------------- */

.zg-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.zg-head > div:first-child { min-width: 0; flex: 1 1 280px; }
.zg-eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 13px; font-weight: 500; }
h1.zg-h1 { margin: 0; font: 650 clamp(22px, 2vw, 28px)/1.33 var(--display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.zg-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.zg-label { margin: 0; font: 600 13px/1.5 var(--display); color: var(--ink-2); }
.zg-label-row { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.zg-label-row a, .zg-link { color: var(--ink-3); font-size: 12px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; }
.zg-label-row a:hover, .zg-link:hover { color: var(--ink); }
.zg-section { margin-top: 28px; }

/* ---- cards ------------------------------------------------------------------------------------- */

.zg-card { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); }
.zg-card.pad { padding: 20px; }
.zg-card-title { margin: 0; font: 600 13px/1.5 var(--display); letter-spacing: -.01em; color: var(--ink); }
.zg-card-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.stack { display: grid; gap: 12px; }
.stack.lg { gap: 20px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }

/* Setup checklist */
.zg-check > summary { display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; list-style: none; }
.zg-check > summary::-webkit-details-marker { display: none; }
.zg-check .mark { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: rgb(99 102 241 / .1); color: #6366f1; }
.zg-check .mark b { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #6366f1; color: #fff; font-size: 10px; font-weight: 700; box-shadow: 0 0 0 2px var(--card); }
.zg-check .t { display: grid; gap: 6px; flex: 1; min-width: 0; }
.zg-check .t p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.25; }
.zg-check .bar { display: flex; align-items: center; gap: 12px; }
.zg-check .bar i { display: block; width: 120px; height: 4px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.zg-check .bar i::before { content: ""; display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: #6366f1; transition: width .5s var(--spring); }
.zg-check .bar span { color: var(--muted); font-size: 12px; }
.zg-check .chev { transition: transform .2s; color: var(--muted); }
.zg-check[open] .chev { transform: rotate(180deg); }
.zg-check ul { list-style: none; margin: 0; padding: 0 20px 14px 70px; display: grid; gap: 6px; }
.zg-check li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.zg-check li .tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.4px solid var(--line); flex: none; }
.zg-check li.done { color: var(--muted); text-decoration: line-through; }
.zg-check li.done .tick { border-color: transparent; background: var(--ink); color: var(--panel); }
.zg-check li .tick .ico { width: 11px; height: 11px; stroke-width: 3; }
.zg-check li a { margin-left: auto; color: var(--accent); font-weight: 600; text-decoration: none; }

/* Quick actions */
.zg-qa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.zg-qa-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; text-align: left; transition: border-color .2s, box-shadow .2s, transform .2s; }
.zg-qa-card:hover { border-color: color-mix(in oklab, var(--ink) 25%, var(--line)); box-shadow: 0 4px 14px -6px rgb(0 0 0 / .14); }
.zg-qa-card .ico { width: 18px; height: 18px; color: var(--ink-2); }
.zg-qa-card p { margin: 0; }
.zg-qa-card .t { font-size: 13px; font-weight: 500; line-height: 1.5; }
.zg-qa-card .s { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.zg-qa-card .zg-pill { position: absolute; top: 12px; right: 12px; }

/* Stat cards */
.zg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zg-stat { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); }
.zg-stat .top { display: flex; align-items: center; gap: 12px; }
.zg-stat .top .ico { width: 22px; height: 22px; color: var(--accent); stroke-width: 1.6; }
.zg-stat .top p { margin: 0; color: var(--ink-2); font-size: 11px; font-weight: 600; }
.zg-stat .num { margin: 14px 0 0; font-size: 36px; font-weight: 600; line-height: 1.2; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.zg-stat .num small { color: var(--muted); font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.zg-stat .meter { display: block; height: 6px; margin-top: 12px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.zg-stat .meter i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }

/* Two columns: feed and side cards */
.zg-cols { display: grid; grid-template-columns: minmax(0, 1fr) 341px; gap: 24px; align-items: start; }
.zg-side-cards { display: grid; gap: 24px; }

/* Feed rows */
.zg-feed .zg-card-head .zg-card-title { margin-right: auto; }
.zg-select { height: 30px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card) right 9px center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M48 96l80 80 80-80' fill='none' stroke='%238a8a8a' stroke-width='28' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); color: var(--ink-2); font-size: 12px; appearance: none; }
.zg-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 20px; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: inherit; text-align: left; transition: background-color .15s; }
.zg-row:last-child { border-bottom: 0; }
button.zg-row:hover, a.zg-row:hover { background: var(--tint); }
.zg-av { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line-2); color: var(--ink); font: 400 24px/1 var(--hanzi); }
.zg-av.wide { font-size: 17px; }
.zg-row .main { display: grid; min-width: 0; flex: 1; }
.zg-row .title { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.zg-row .meta { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.zg-row .end { display: flex; align-items: center; gap: 10px; flex: none; }
.zg-row .when { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zg-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 24px; text-align: center; }
.zg-empty .ico { width: 26px; height: 26px; color: var(--muted); }
.zg-empty b { font-size: 14px; }
.zg-empty p { margin: 0; max-width: 40ch; color: var(--muted); font-size: 13px; }

/* Pills */
.zg-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--sunk); color: var(--ink-3); font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.zg-pill.sm { padding: 2px 8px; }
.zg-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.zg-pill.blue { background: var(--blue-soft); color: var(--blue); }
.zg-pill.green { background: var(--good-soft); color: var(--good); }
.zg-pill.amber { background: var(--warn-soft); color: var(--warn); }
.zg-pill.red { background: var(--bad-soft); color: var(--bad); }
.zg-pill.ink { background: var(--btn); color: var(--on-btn); }

/* Side cards */
.zg-mini .head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.zg-mini .head .ico { width: 16px; height: 16px; color: var(--ink-2); }
.zg-mini .head .zg-card-title { flex: 1; }
.zg-mini p { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.zg-mini .big { margin: 2px 0 2px; font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.zg-mini .lines { display: grid; gap: 8px; margin-top: 12px; }
.zg-mini .line { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12px; }
.zg-mini .line i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }
.zg-mini .line b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.zg-meter { display: block; height: 6px; margin: 4px 0 14px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.zg-meter i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .6s var(--spring); }

/* ---- buttons and controls ---------------------------------------------------------------------- */

.zg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .12s; }
.zg-btn:hover { background: var(--tint); }
.zg-btn:active { transform: scale(.98); }
.zg-btn:disabled { opacity: .5; cursor: default; }
.zg-btn .ico { width: 16px; height: 16px; }
.zg-btn.primary { border-color: var(--btn); background: var(--btn); color: var(--on-btn); box-shadow: var(--btn-shadow); }
.zg-btn.primary:hover { background: var(--btn-hover); }
.zg-btn.primary kbd { border-color: rgb(127 127 127 / .35); background: transparent; color: inherit; opacity: .75; }
.zg-btn.ghost { border-color: transparent; background: none; color: var(--ink-2); }
.zg-btn.ghost:hover { background: var(--sunk); color: var(--ink); }
.zg-btn.block { width: 100%; border-radius: 12px; font-size: 12px; min-height: 34px; }
.zg-btn.sm { min-height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.zg-btn.icon { width: 36px; padding: 0; }
/* The big black pill from FEIVO's sign-up: Continue, Practise, Next. */
.zg-cta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 0; border-radius: 99px; background: var(--btn); color: var(--on-btn); font: 700 17px/1 var(--display); text-decoration: none; transition: background .2s, transform .12s, opacity .12s; }
.zg-cta:hover { background: var(--btn-hover); }
.zg-cta:active { transform: scale(.975); opacity: .9; }
.zg-cta:disabled { background: #c9c9ce; color: #fff; cursor: default; }
.zg-cta .ico { width: 18px; height: 18px; }
.zg-enter-hint { color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.zg-enter-hint kbd { font: inherit; height: auto; padding: 2px 6px; }
@media (hover: none) { .zg-enter-hint { display: none; } }

/* Round tool buttons (FEIVO's ✕ i ➤ under the job card, and the prompt box tools). */
.zg-round { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: var(--card-shadow); transition: background-color .15s, transform .12s; }
.zg-round:hover { background: var(--tint); }
.zg-round:active { transform: scale(.94); }
.zg-round .ico { width: 18px; height: 18px; }
.zg-round.sm { width: 34px; height: 34px; }
.zg-round.sm .ico { width: 15px; height: 15px; }
.zg-round .slow { font: 400 16px/1 var(--hanzi); }
.audio-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.audio-tools .voice { color: var(--muted); font-size: 12px; }

/* Segmented control: FEIVO's inbox tabs, the active one a dark pill. */
.zg-seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--card-shadow); }
.zg-seg button { display: flex; align-items: center; justify-content: center; gap: 7px; flex: 1; min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color .15s, color .15s; }
.zg-seg button:hover { color: var(--ink); }
.zg-seg button[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); box-shadow: var(--btn-shadow); }
/* With a sliding pill (ui.js slide), the pill is the background and the buttons sit on it. */
.zg-seg { position: relative; }
.zg-seg > .mark { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 8px; background: var(--btn); box-shadow: var(--btn-shadow); transition: transform var(--dur) var(--ease), width var(--dur) var(--ease); }
.zg-seg:has(> .mark) button { position: relative; transition: color var(--dur) var(--ease); }
.zg-seg:has(> .mark) button[aria-pressed="true"] { background: none; box-shadow: none; }
.zg-seg button .n { opacity: .65; font-variant-numeric: tabular-nums; }
.zg-seg.inline { display: inline-flex; justify-self: start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.zg-seg.inline button { flex: none; }

/* Filter tabs: FEIVO's application filters (All · Active · Sent ...) */
.zg-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.zg-filters button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 99px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.zg-filters button:hover { background: var(--sunk); }
.zg-filters button .n { display: grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--sunk); color: var(--ink-3); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.zg-filters button[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); }
.zg-filters button[aria-pressed="true"] .n { background: rgb(127 127 127 / .3); color: inherit; }

/* Underline tabs: FEIVO's settings tabs */
.zg-tabs { display: flex; gap: 22px; margin-bottom: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.zg-tabs button { position: relative; padding: 0 0 10px; border: 0; background: none; color: var(--ink-3); font-size: 13px; font-weight: 500; white-space: nowrap; }
.zg-tabs button:hover { color: var(--ink); }
.zg-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
/* Room for the label in bold, so choosing a tab doesn't nudge its neighbours. */
.zg-tabs button[data-label]::before { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
/* The underline is one mark that slides between tabs (ui.js slide). */
.zg-tabs { position: relative; }
.zg-tabs > .mark { position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--dur) var(--ease), width var(--dur) var(--ease); }

/* Toggle switch */
.zg-switch { position: relative; width: 40px; height: 24px; flex: none; border: 0; border-radius: 99px; background: var(--line); transition: background .2s; padding: 0; }
.zg-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .25s var(--spring); }
.zg-switch[aria-checked="true"] { background: var(--btn); }
.zg-switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--card); }
:root[data-theme="dark"] .zg-switch[aria-checked="true"]::after { background: #1a1a1a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zg-switch[aria-checked="true"]::after { background: #1a1a1a; } }

/* Settings rows: a bordered sub-card with title, help and control */
.zg-set { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.zg-set .txt { flex: 1; min-width: 0; }
.zg-set .txt b { display: block; font-size: 13px; font-weight: 600; }
.zg-set .txt > span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.zg-field { display: grid; gap: 6px; }
.zg-field label { color: var(--ink-2); font-size: 12px; font-weight: 500; }
.zg-input { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 14px; }
.zg-input:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px rgb(127 127 127 / .15); }
.zg-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.zg-stepper button { width: 36px; height: 36px; border: 0; background: none; font-size: 18px; color: var(--ink-2); }
.zg-stepper button:hover { background: var(--tint); }
.zg-stepper output { min-width: 44px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Pinyin quick menu (拼) */
.pinyin-menu { position: relative; }
.pinyin-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.pinyin-menu summary::-webkit-details-marker { display: none; }
.pinyin-menu summary .hz { font-size: 16px; line-height: 1; }
.pinyin-menu summary .warn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.pinyin-menu .pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; display: grid; gap: 10px; width: max-content; max-width: calc(100vw - 32px); padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--pop-shadow); color: var(--ink); animation: zg-pop .18s var(--spring); }
.pinyin-menu .pop .zg-eyebrow { margin: 0; font-size: 12px; }
@keyframes zg-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---- study ------------------------------------------------------------------------------------- */

.study-wrap { max-width: 720px; margin: 0 auto; display: grid; gap: 18px; }
.study-card { padding: 28px; border-radius: 20px; }
.study-top { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.study-top .zg-pill { flex: none; }
.zg-progress { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 99px; background: var(--line-2); }
.zg-progress i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--ink); transition: width .5s var(--spring); }
.zg-progress i.miss { background: var(--bad); }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dots i.done { background: var(--good); }
.dots i.miss { background: var(--bad); }

.teach { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: start; }
.glyph { display: grid; place-items: center; min-width: 168px; height: 168px; padding: 0 16px; border: 1px solid var(--line); border-radius: 20px; background-color: var(--card); background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 50% 50%; background-position: center; font: 400 116px/1 var(--hanzi); }
.glyph.word { font-size: 84px; }
.glyph.part { color: var(--ink-2); }
.teach .info { display: grid; gap: 14px; min-width: 0; }
.teach .pinyin { font: 600 22px/1.2 var(--ui); letter-spacing: 0; }
.teach .pinyin .written { margin-left: 10px; color: var(--muted); font-size: 13px; font-weight: 500; }
.teach h2.meaning { margin: 0; font: 650 26px/1.2 var(--display); letter-spacing: -.02em; }
.meaning-more { display: flex; gap: 8px; align-items: baseline; color: var(--ink-3); font-size: 13px; }
.meaning-more .mm-text { min-width: 0; }
.meaning-more.clamped .mm-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); font-size: 12px; font-weight: 600; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: 99px; background: var(--sunk); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; transition: background-color .15s; }
button.chip:hover { background: var(--line); }
.chip .hz { font-size: 20px; line-height: 1; }
.chip .py, .chip .m { color: var(--ink-3); font-size: 12px; }
.sub-label { margin: 0 0 8px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.why { padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--ink-2); font-size: 13px; }
.why b { color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 12px; }
.why b .ico { width: 14px; height: 14px; }
.study-foot { display: grid; gap: 10px; margin-top: 26px; }
.study-foot .note { text-align: center; }

.prompt { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 6px 0 4px; }
.prompt .big { font: 400 104px/1.05 var(--hanzi); }
.prompt .english { font: 650 26px/1.25 var(--display); letter-spacing: -.02em; }
.prompt .ask { color: var(--ink-2); font-size: 15px; font-weight: 500; }
.prompt .credit { color: var(--muted); font-size: 12px; }
.ex-credit { font-size: 11px; }
.prompt .audio-tools { justify-content: center; }
.prompt .listen { width: 88px; height: 88px; }
.prompt .listen .ico { width: 30px; height: 30px; }

/* Answer options: FEIVO's grey option rows, with a number key on desktop and a radio at the end. */
.options { display: grid; gap: 12px; margin-top: 22px; }
.options.short { grid-template-columns: 1fr 1fr; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 0 18px; border: 1.6px solid transparent; border-radius: 16px; background: var(--sunk); color: var(--ink); text-align: left; font-size: 16px; font-weight: 600; transition: transform .12s ease-out, opacity .12s, background .2s, border-color .2s; }
.opt:not(:disabled):hover { background: color-mix(in oklab, var(--sunk) 70%, var(--line)); }
.opt:not(:disabled):active { transform: scale(.975); opacity: .9; }
.opt .v { flex: 1; min-width: 0; }
.opt .k { order: 4; }
.opt .radio { order: 5; position: relative; width: 22px; height: 22px; flex: none; border: 1.4px solid rgb(138 138 138 / .55); border-radius: 50%; transition: border .25s var(--spring); }
.opt.hz-opt .v { font: 400 32px/1.2 var(--hanzi); padding: 6px 0; }
.opt.py-opt .v { font-size: 20px; }
.opt:disabled { cursor: default; }
.opt.right { border-color: var(--good); background: var(--card); }
.opt.right .radio { border: 0; background: var(--good); }
.opt.right .radio::after, .opt.wrong .radio::after { content: ""; position: absolute; inset: 0; background: center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M40 144l56 56L216 80' fill='none' stroke='white' stroke-width='36' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.opt.wrong { border-color: var(--bad); background: var(--card); }
.opt.wrong .radio { border: 0; background: var(--bad); }
.opt.wrong .radio::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M64 64l128 128M192 64L64 192' fill='none' stroke='white' stroke-width='36' stroke-linecap='round'/%3E%3C/svg%3E"); }
.opt:disabled:not(.right):not(.wrong) { opacity: .55; }
@media (hover: none) { .opt .k { display: none; } }

.answer-input { width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-radius: 14px; outline: 0; background: var(--sunk); color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: .02em; }
.answer-input::placeholder { color: var(--muted); font-weight: 500; }
.answer-input:focus { box-shadow: inset 0 0 0 1.6px var(--ink); }
.preview-marks { min-height: 28px; font-size: 20px; font-weight: 600; text-align: center; }

/* Feedback and the lesson result */
.feedback { display: grid; gap: 10px; margin-top: 20px; padding: 18px 20px; border-radius: 16px; background: var(--sunk); }
.feedback .head { display: flex; align-items: center; gap: 8px; font: 700 17px/1.2 var(--display); }
.feedback .head .badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; }
.feedback .head .badge .ico { width: 13px; height: 13px; stroke-width: 3; }
.feedback.good .head .badge { background: var(--good); }
.feedback.bad .head .badge { background: var(--bad); }
.feedback.good { background: var(--good-soft); }
.feedback.bad { background: var(--bad-soft); }
.feedback .answer .hz { font-size: 24px; }
.node-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--card); }
.node-line .hz { font-size: 28px; line-height: 1; }
.node-line .pinyin { font-weight: 600; }
.lesson-result { display: flex; gap: 16px; align-items: flex-start; margin-top: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); animation: zg-rise-in .5s var(--spring); }
.stamp { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border: 2.5px solid var(--bad); border-radius: 12px; color: var(--bad); font-size: 34px; line-height: 1; transform: rotate(-6deg); }
.lesson-result.passed .stamp { border-color: var(--seal); color: var(--seal); }
.lr-body { display: grid; gap: 6px; min-width: 0; }
.lr-title { font: 700 17px/1.3 var(--display); }
.lr-title .hz { font-size: 22px; }
.rel { display: flex; flex-wrap: wrap; gap: 6px; }

/* Sentences: pinyin over each word */
.sentence { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 6px; }
.tok { display: inline-grid; justify-items: center; cursor: pointer; border-radius: 6px; padding: 0 2px; }
.tok:hover { background: var(--sunk); }
.tok.p { cursor: default; }
.tok.p:hover { background: none; }
.tok .py { min-height: 18px; font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.tok .ch { font: 400 34px/1.25 var(--hanzi-text); }
.sentence.small .tok .ch { font-size: 24px; }
.sentence.small .tok .py { font-size: 12px; }
.tok.new .ch { color: var(--bad); }
.tok.new { box-shadow: inset 0 -2px 0 var(--bad); border-radius: 0; }
.tok.blank .ch, .tok.filled .ch { color: var(--accent); }
.tok.target { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.tok.target .ch, .tok.target .py { color: var(--accent); font-weight: 700; }
.reveal { margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: var(--sunk); }
.self-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
@media (max-width: 1023px) {
  .self-grade { position: sticky; bottom: calc(var(--tabbar-space) + 4px); z-index: 5; padding-top: 10px; background: linear-gradient(transparent, var(--card) 18px); }
}
.prompt .sentence { justify-content: center; }

.next-row { display: grid; gap: 10px; margin-top: 20px; }
@media (max-width: 1023px) {
  .next-row { position: sticky; bottom: calc(var(--tabbar-space) + 4px); z-index: 5; padding-top: 10px; background: linear-gradient(transparent, var(--card) 18px); }
}

/* ---- map --------------------------------------------------------------------------------------- */

.map-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
/* The level switch sits above the search; on a phone it scrolls sideways rather than wrapping. */
.map-levels { margin-bottom: 14px; }
.map-levels button .n { font-size: 11px; }
.map-levels .seg-label { flex: none; align-self: center; padding: 0 2px 0 8px; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.map-levels button:has(+ .seg-label) { margin-right: 4px; }
.map-more { display: flex; justify-content: center; margin-top: 12px; }
.map-search { position: relative; flex: 1 1 180px; max-width: 420px; }
.map-search .ico { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); }
.map-search input { padding-left: 36px; height: 38px; border-radius: 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 24px; color: var(--muted); font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--card); position: relative; }
.map-section { margin-bottom: 28px; }
.map-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.map-section-head h2 { margin: 0; font: 650 17px/1.3 var(--display); letter-spacing: -.01em; }
.map-section-head .note { font-size: 12px; }
.sec-bar { position: relative; display: flex; width: 140px; height: 6px; margin-left: auto; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.sec-bar i.k { background: var(--ink); }
.sec-bar i.l { background: var(--blue); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.cell { position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 60px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); transition: transform .12s, box-shadow .15s, border-color .15s; }
.cell:hover { border-color: var(--ink-3); box-shadow: 0 4px 12px -6px rgb(0 0 0 / .2); }
.cell:active { transform: scale(.96); }
.cell .hz { font-size: 24px; line-height: 1.1; }
.cell .py { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.cell.wide { grid-column: span 2; }
.cell.grammar { grid-column: span 2; }
.cell.grammar .hz { font-size: 17px; }
.cell.st-known, .cell.st-due, .cell.st-fading, .cell.st-learning, .cell.st-relearning { border-color: transparent; background: var(--tile-known); color: var(--on-tile-known); }
.cell.st-known .py, .cell.st-due .py, .cell.st-fading .py, .cell.st-learning .py, .cell.st-relearning .py { color: var(--on-tile-known-2); }
.cell.st-due, .cell.st-fading { box-shadow: inset 0 0 0 2px var(--warn); }
.cell.st-learning, .cell.st-relearning { box-shadow: inset 0 0 0 2px var(--blue); }
.cell.st-locked { background: var(--tint); color: var(--muted); border-style: dashed; }
.cell.st-locked .hz { opacity: .45; }
.cell.st-new::after, .cell.st-retry::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--seal); }
.legend .sw.st-known { background: var(--tile-known); border-color: transparent; }
.legend .sw.st-due { background: var(--tile-known); box-shadow: inset 0 0 0 2px var(--warn); border-color: transparent; }
.legend .sw.st-learning { background: var(--tile-known); box-shadow: inset 0 0 0 2px var(--blue); border-color: transparent; }
.legend .sw.st-new::after { content: ""; position: absolute; top: 2px; right: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--seal); }
.legend .sw.st-locked { border-style: dashed; background: var(--tint); }

/* ---- details sheet ----------------------------------------------------------------------------- */

.sheet-scrim { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .28); animation: zg-fade .2s; }
.sheet { position: fixed; z-index: 61; top: var(--gap); right: var(--gap); bottom: var(--gap); width: min(520px, calc(100vw - 2 * var(--gap))); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .45); animation: zg-sheet-in .35s var(--spring); outline: none; }
@keyframes zg-sheet-in { from { transform: translateX(24px); opacity: 0; } }
.sheet-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.sheet-bar .done { border: 0; background: none; color: var(--accent); font-size: 15px; font-weight: 600; padding: 4px 6px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 22px 24px 28px; display: grid; gap: 20px; align-content: start; }
.sheet-foot { padding: 12px 24px max(16px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-2); }
.sheet .teach { grid-template-columns: 1fr; }
.sheet .glyph { justify-self: start; min-width: 120px; height: 120px; font-size: 84px; }
.sheet .glyph.word { font-size: 58px; }
@media (max-width: 640px) {
  .sheet { inset: auto 0 0 0; top: calc(env(safe-area-inset-top, 0px) + 24px); width: 100%; border-radius: 22px 22px 0 0; animation-name: zg-sheet-up; }
  @keyframes zg-sheet-up { from { transform: translateY(100%); } }
}
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; }
.list { display: grid; gap: 10px; }
.list-item { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.list-item .en { color: var(--ink-3); font-size: 13px; }

/* Needs → this → unlocks ladder */
.ladder { position: relative; display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--tint); }
.ladder-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.ladder-lines path { fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.ladder-lines path.dash { stroke-dasharray: 3 3; opacity: .7; }
.ladder-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 600; }
.ladder-needs, .ladder-unlocks { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.ladder-unlocks { margin: 14px 0 0; }
.ladder-more { align-self: center; padding: 0 4px; font-size: 12px; }
.ladder-self { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ladder .cell { min-width: 52px; min-height: 52px; }
.ladder-self .cell { min-width: 64px; min-height: 64px; box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---- read -------------------------------------------------------------------------------------- */

.read-list { overflow: hidden; }
.read-item { display: grid; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); animation: zg-page-in .4s var(--ease) backwards; }
.read-item:last-child { border-bottom: 0; }
.read-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.read-actions .credit { margin-left: auto; color: var(--muted); font-size: 11px; }
.read-item .en { color: var(--ink-3); font-size: 13px; }

/* ---- chorus page and dialog -------------------------------------------------------------------- */

.chorus-hero { position: relative; display: grid; justify-items: center; gap: 14px; padding: 48px 24px 40px; border-radius: 22px; overflow: hidden; text-align: center; background: radial-gradient(420px circle at 20% 0%, rgb(163 158 247 / .22), transparent 70%), radial-gradient(380px circle at 90% 100%, rgb(247 180 171 / .25), transparent 70%), var(--card); border: 1px solid var(--line); }
.chorus-hero .orb-big { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: 0 20px 50px -20px rgb(80 80 160 / .45); }
.chorus-hero .orb-big .chorus-blob { width: 72px; height: 72px; }
.chorus-hero h2 { margin: 0; font: 650 24px/1.2 var(--display); letter-spacing: -.02em; }
.chorus-hero p { margin: 0; max-width: 46ch; color: var(--ink-3); font-size: 14px; }
.listen-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.listen-pill i { width: 18px; height: 8px; background: radial-gradient(circle, currentColor 1.4px, transparent 1.6px) 0 50% / 6px 6px repeat-x; opacity: .7; }

dialog.chorus { width: min(780px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--card); color: var(--ink); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .5); }
dialog.chorus[open] { animation: zg-pop .25s var(--spring); }
dialog.chorus::backdrop { background: rgb(0 0 0 / .32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
dialog.chorus .inner { display: grid; gap: 16px; padding: 22px 24px 24px; }
dialog.chorus .row { gap: 10px; }
dialog.chorus h2 { font: 650 20px/1.2 var(--display) !important; letter-spacing: -.02em; }
dialog.chorus .voice-label { color: var(--muted); font-size: 12px; }
dialog.chorus .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; }
dialog.chorus .btn:hover { background: var(--tint); }
dialog.chorus .btn:disabled { opacity: .45; cursor: default; }
dialog.chorus .btn.primary { border-color: var(--btn); background: var(--btn); color: var(--on-btn); box-shadow: var(--btn-shadow); }
dialog.chorus .btn.primary kbd { border-color: rgb(127 127 127 / .35); background: transparent; color: inherit; opacity: .75; }
dialog.chorus .btn.ghost { width: 34px; padding: 0; border-color: transparent; border-radius: 50%; background: var(--sunk); }
dialog.chorus .segmented { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
dialog.chorus .segmented button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 500; }
dialog.chorus .segmented button[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); }
/* Record is the orb: a glass circle that pulses with the "Listening" look while it records. */
dialog.chorus [data-rec] { min-width: 108px; border-radius: 99px; border-color: transparent; background: radial-gradient(circle at 30% 25%, #fde4e1, #f7b4ab 20%, #a39ef7 60%, #738cf7); color: #1a1a2e; box-shadow: 0 8px 22px -10px rgb(115 140 247 / .8); }
dialog.chorus [data-rec]:hover { filter: brightness(1.05); background: radial-gradient(circle at 30% 25%, #fde4e1, #f7b4ab 20%, #a39ef7 60%, #738cf7); }
dialog.chorus [data-rec].rec { animation: zg-listen 1.4s ease-in-out infinite; }
@keyframes zg-listen { 50% { box-shadow: 0 0 0 8px rgb(115 140 247 / .18), 0 8px 22px -10px rgb(115 140 247 / .8); } }
dialog.chorus [data-mine] { border-radius: 99px; }
dialog.chorus .prompt { padding: 4px 0; gap: 6px; }
dialog.chorus .prompt .big { font-size: 76px; }
dialog.chorus .prompt .pinyin { font-size: 20px; font-weight: 600; display: flex; gap: 6px; }
dialog.chorus .sentence { justify-content: center; }
dialog.chorus .tok { cursor: default; }
dialog.chorus .tok:hover { background: none; }
dialog.chorus canvas { display: block; width: 100%; height: 220px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
dialog.chorus .key-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
dialog.chorus .key-legend > span { display: inline-flex; align-items: center; gap: 6px; }
dialog.chorus .key-legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
dialog.chorus .note { color: var(--ink-3); font-size: 13px; }
dialog.chorus label.row { flex-wrap: nowrap; align-items: flex-start; color: var(--muted); font-size: 13px; }
dialog.chorus label.row input { margin-top: 3px; flex: none; accent-color: var(--ink); }
dialog.chorus .tips { color: var(--muted); font-size: 13px; }

/* ---- install bar, toasts ----------------------------------------------------------------------- */

.install-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 13px; box-shadow: var(--card-shadow); }
.result { padding: 12px 14px; border-radius: 12px; background: var(--sunk); font-size: 13px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat-cell { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.stat-cell b { font-size: 24px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-cell span { color: var(--muted); font-size: 12px; }
.theme-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.theme-card { display: grid; gap: 10px; padding: 10px; border: 1.6px solid var(--line); border-radius: 14px; background: var(--card); text-align: left; font-size: 13px; font-weight: 600; }
.theme-card[aria-pressed="true"] { border-color: var(--ink); }
.theme-card .swatch { height: 64px; border-radius: 9px; border: 1px solid var(--line); background: linear-gradient(90deg, #141414 0 22%, #fbfbfb 22%); }
.theme-card .swatch.dark { background: linear-gradient(90deg, #0b0b0b 0 22%, #1a1a1a 22%); }
.theme-card .swatch.system { background: linear-gradient(135deg, #fbfbfb 0 50%, #1a1a1a 50%); }

/* ---- motion ------------------------------------------------------------------------------------ */

/* Every block of a page rises into place in turn, as FEIVO's sign-up does: short and close together, so
   switching tabs feels quick rather than busy. */
.rise > * { animation: zg-page-in .4s var(--ease) backwards; }
.rise > :nth-child(2) { animation-delay: .04s; }
.rise > :nth-child(3) { animation-delay: .08s; }
.rise > :nth-child(4) { animation-delay: .12s; }
.rise > :nth-child(n+5) { animation-delay: .16s; }
@keyframes zg-page-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes zg-rise-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ---- responsive -------------------------------------------------------------------------------- */

@media (max-width: 1023px) { .desk-only { display: none !important; } }

@media (max-width: 1100px) { .zg-cols { grid-template-columns: minmax(0, 1fr); } .zg-side-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 767px) {
  .zg-qa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .zg-stats { grid-template-columns: minmax(0, 1fr); }
  .teach { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .teach .glyph { justify-self: center; }
  .study-card { padding: 20px; }
  .options { margin-top: 18px; gap: 10px; }
  .options.short { gap: 8px; }
  .options.short .opt { padding: 0 14px; }
  .prompt .big { font-size: 88px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .zg-head { margin-bottom: 20px; }
  .zg-feed .zg-card-head .zg-select { display: none; }
  .zg-row { padding: 12px 16px; }
  .read-item { padding: 14px 16px; }
  .sec-bar { width: 90px; }
}