/* app.css — Coding Practice Website
 *
 * Typography is built on a user-scalable rem system. The base is 19px at
 * scale 1.0, which is well above the 16px web default: the previous build
 * needed browser zoom to read comfortably, so the whole scale moved up and
 * the A-/A/A+ control in the header multiplies it further (0.9 – 1.5).
 * Nothing that carries meaning is ever below 16px.
 */

:root {
  --scale: 1;

  /* type scale — every size derives from --scale */
  --fs-xs:    calc(1rem * var(--scale));        /* 16px — badges, meta only */
  --fs-sm:    calc(1.0625rem * var(--scale));   /* 17px */
  --fs-base:  calc(1.1875rem * var(--scale));   /* 19px — body */
  --fs-md:    calc(1.3125rem * var(--scale));   /* 21px */
  --fs-lg:    calc(1.5rem * var(--scale));      /* 24px */
  --fs-xl:    calc(1.875rem * var(--scale));    /* 30px */
  --fs-2xl:   calc(2.375rem * var(--scale));    /* 38px */
  --fs-3xl:   calc(3rem * var(--scale));        /* 48px */
  --fs-code:  calc(1.0625rem * var(--scale));   /* 17px mono */

  /* dark palette — all text pairs tested at >= 4.5:1 on its background */
  --bg:        #0b0f1a;
  --bg-2:      #121826;
  --panel:     #161d2e;
  --panel-2:   #1d2537;
  --panel-3:   #232d42;
  --line:      #2c3852;
  --line-soft: #212b3f;

  --text:      #eef2f9;
  --text-dim:  #b3c0d6;   /* 8.9:1 on --panel */
  --text-mute: #8b9ab5;   /* 5.4:1 on --panel */

  --accent:    #5cd0d8;
  --accent-2:  #8fd9ff;
  --accent-ink:#04161c;
  --gold:      #f0b45c;
  --green:     #5fe08d;
  --red:       #ff8b8b;
  --purple:    #b79bff;

  --radius: 12px;
  --radius-lg: 16px;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .34s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); }

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

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

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

@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop     { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes draw    { to { stroke-dashoffset: 0; } }
@keyframes shimmer { to { background-position: 200% 0; } }

.anim-in { animation: fade-up var(--dur) var(--ease) both; }
.stagger > * { animation: fade-up var(--dur) var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .02s }
.stagger > *:nth-child(2) { animation-delay: .06s }
.stagger > *:nth-child(3) { animation-delay: .10s }
.stagger > *:nth-child(4) { animation-delay: .14s }
.stagger > *:nth-child(5) { animation-delay: .18s }
.stagger > *:nth-child(6) { animation-delay: .22s }
.stagger > *:nth-child(7) { animation-delay: .26s }
.stagger > *:nth-child(8) { animation-delay: .30s }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- skip link ---------- */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 14px 22px; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- topbar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 15, 26, .93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1360px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.brand {
  font-weight: 800; font-size: var(--fs-md); color: var(--text);
  display: flex; align-items: center; gap: 11px; text-decoration: none; white-space: nowrap;
}
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: grid; place-items: center; color: var(--accent-ink);
  font-weight: 900; font-size: var(--fs-sm);
}
.nav { display: flex; gap: 5px; flex-wrap: wrap; }
.nav a {
  padding: 10px 16px; border-radius: 9px; color: var(--text-dim);
  text-decoration: none; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  transition: background .16s, color .16s;
}
.nav a:hover { background: var(--panel-2); color: var(--text); }
.nav a.on { background: var(--accent); color: var(--accent-ink); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.text-size { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.text-size button {
  background: transparent; border: 0; color: var(--text-dim); cursor: pointer;
  font-family: inherit; font-weight: 800; padding: 8px 12px; line-height: 1;
  min-width: 42px; min-height: 42px;
}
.text-size button:hover { background: var(--panel-2); color: var(--text); }
.text-size button.on { background: var(--accent); color: var(--accent-ink); }
.text-size .t-sm { font-size: 15px; }
.text-size .t-md { font-size: 18px; }
.text-size .t-lg { font-size: 22px; }

.level-chip {
  font-size: var(--fs-sm); padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim); white-space: nowrap;
}
.level-chip b { color: var(--accent); }

main { max-width: 1360px; margin: 0 auto; padding: 34px 24px 120px; }

/* ---------- typography ---------- */

h1 { font-size: var(--fs-2xl); line-height: 1.18; letter-spacing: -.022em; margin-bottom: 12px; font-weight: 800; }
h2 { font-size: var(--fs-xl); line-height: 1.25; letter-spacing: -.015em; margin-bottom: 16px; font-weight: 750; }
h3 { font-size: var(--fs-lg); line-height: 1.35; margin-bottom: 10px; font-weight: 700; }
h4 { font-size: var(--fs-md); margin-bottom: 8px; font-weight: 650; }

.sub { color: var(--text-dim); font-size: var(--fs-md); margin-bottom: 28px; max-width: 68ch; line-height: 1.65; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-xs);
  color: var(--text-mute); font-weight: 800; margin-bottom: 9px;
}
.lead { font-size: var(--fs-md); color: var(--text-dim); }
.small { font-size: var(--fs-sm); color: var(--text-mute); }

/* ---------- panels ---------- */

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px; margin-bottom: 22px;
}
.panel-tight { padding: 18px 22px; }
.panel-accent { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(92,208,216,.14); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ---------- buttons ---------- */

.btn {
  padding: 13px 22px; border: 1px solid transparent; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
  font-size: var(--fs-sm); cursor: pointer; font-family: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px; min-height: 50px;
  transition: transform .16s var(--ease), filter .16s, background .16s;
}
.btn:hover { filter: brightness(1.09); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text-dim); }
.btn-ghost:hover { background: var(--panel-2); color: var(--text); }
.btn-solid { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.btn-solid:hover { background: var(--panel-3); }
.btn-lg { padding: 16px 30px; font-size: var(--fs-md); min-height: 58px; }
.btn-sm { padding: 9px 15px; font-size: var(--fs-xs); min-height: 40px; }
.btn-danger { background: transparent; border-color: #6b2b2b; color: var(--red); }
.btn-danger:hover { background: #2e1618; }

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

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; cursor: pointer; text-decoration: none; color: inherit; display: block;
  transition: border-color .18s, transform .18s var(--ease), background .18s;
}
.card:hover { border-color: var(--accent); transform: translateY(-3px); }
.card.flat, .card.flat:hover { cursor: default; border-color: var(--line); transform: none; }
.card p { color: var(--text-dim); font-size: var(--fs-sm); }

/* ---------- stats ---------- */

.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.stat .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); font-weight: 800; }
.stat .v { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.15; margin-top: 6px; }
.stat .v.accent { color: var(--accent); }
.stat .n { font-size: var(--fs-sm); color: var(--text-dim); }

/* ---------- bars ---------- */

.bar { height: 11px; background: #0a0f1c; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-soft); }
.bar > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s var(--ease); }
.bar.gold  > span { background: linear-gradient(90deg, var(--gold), #ffd08a); }
.bar.green > span { background: linear-gradient(90deg, var(--green), #a7f3c4); }
.bar.red   > span { background: linear-gradient(90deg, var(--red), #ffc0c0); }

.meter-row { display: grid; grid-template-columns: 1fr 120px; gap: 18px; align-items: center; margin: 15px 0; }
.meter-row .lab { font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: 7px; }
.meter-row .val { font-size: var(--fs-sm); text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---------- badges ---------- */

.badge {
  display: inline-block; padding: 5px 12px; border-radius: 7px; font-size: var(--fs-xs);
  font-weight: 800; letter-spacing: .03em; white-space: nowrap;
}
.b-easy   { background: #10331f; color: #86efac; }
.b-medium { background: #3a2c0e; color: #fcd472; }
.b-hard   { background: #3f1722; color: #ffa3b4; }
.b-beginner     { background: #10283e; color: #8fd9ff; }
.b-intermediate { background: #1b2c4c; color: #a9c3ff; }
.b-advanced     { background: #2c2049; color: #cfbcff; }
.b-master       { background: #3e1b39; color: #f6b6ff; }
.b-solved { background: #10331f; color: #86efac; }
.b-close  { background: #3a2c0e; color: #fcd472; }
.b-attempted { background: #2c2338; color: #cfbcff; }
.b-new    { background: #1b2436; color: var(--text-mute); }
.b-passed { background: #10331f; color: #86efac; }
.b-mc     { background: #172740; color: #a9c3ff; }
.b-code   { background: #2c2049; color: #cfbcff; }
.b-locked { background: #1b2436; color: var(--text-mute); }

.tag {
  display: inline-block; padding: 5px 13px; border-radius: 999px; font-size: var(--fs-xs);
  border: 1px solid var(--line); color: var(--text-dim); background: var(--panel-2);
}

/* ---------- prose ---------- */

.prose { max-width: 74ch; font-size: var(--fs-base); }
.prose p { margin-bottom: 18px; }
.prose h3 { color: var(--accent); margin: 34px 0 12px; }
.prose h4 { color: var(--text); margin: 26px 0 10px; }
.prose ul, .prose ol { margin: 0 0 20px 28px; }
.prose li { margin-bottom: 10px; }
.prose code {
  font-family: var(--mono); font-size: .92em; background: #0a0f1c;
  padding: 3px 7px; border-radius: 5px; color: var(--accent-2);
}
.prose blockquote {
  border-left: 4px solid var(--gold); padding: 14px 20px; margin: 20px 0;
  background: #201a10; color: #f3ddb8; border-radius: 0 9px 9px 0;
}
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: var(--fs-sm); }
.prose th, .prose td { border: 1px solid var(--line); padding: 12px 15px; text-align: left; }
.prose th { background: var(--panel-2); font-weight: 700; }

pre.code, .code-block {
  background: #060a13; border: 1px solid var(--line); border-left: 4px solid var(--gold);
  padding: 20px 22px; margin: 20px 0; border-radius: 10px;
  font-family: var(--mono); font-size: var(--fs-code); line-height: 1.75;
  overflow-x: auto; color: #d6ecee; white-space: pre; tab-size: 4;
}

/* ---------- roadmap ---------- */

.roadmap-wrap {
  position: relative; overflow-x: auto; padding: 12px 4px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.roadmap-svg { display: block; min-width: 900px; width: 100%; height: auto; }
.rm-edge { stroke: var(--line); stroke-width: 2.5; fill: none; }
.rm-edge.lit { stroke: var(--accent); stroke-width: 3; opacity: .85; }
.rm-node-box {
  fill: var(--panel-2); stroke: var(--line); stroke-width: 2; rx: 11;
  transition: fill .18s, stroke .18s;
}
.rm-node { cursor: pointer; }
.rm-node:hover .rm-node-box { stroke: var(--accent); fill: var(--panel-3); }
.rm-node.done .rm-node-box { stroke: var(--green); fill: #12291d; }
.rm-node.active .rm-node-box { stroke: var(--accent); fill: #12293a; }
.rm-node.locked { opacity: .48; }
.rm-node text { fill: var(--text); font-family: var(--sans); font-weight: 650; }
.rm-node .rm-sub { fill: var(--text-mute); font-weight: 500; }
.rm-node.done text { fill: #b6f0cd; }
.rm-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; font-size: var(--fs-sm); color: var(--text-dim); }
.rm-legend i { display: inline-block; width: 15px; height: 15px; border-radius: 5px; margin-right: 8px; vertical-align: -2px; border: 2px solid; }

/* ---------- editor / workspace ---------- */

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }

.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.tab {
  padding: 13px 20px; background: transparent; border: 0; border-bottom: 3px solid transparent;
  color: var(--text-mute); font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; white-space: nowrap; margin-bottom: -2px; min-height: 50px;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.editor-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #060a13; }
.editor-bar {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--panel-2); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.editor-bar .grow { flex: 1; }
textarea.editor {
  width: 100%; min-height: 440px; background: #060a13; color: #dcefef;
  border: 0; padding: 20px 22px; font-family: var(--mono); font-size: var(--fs-code);
  line-height: 1.75; resize: vertical; outline: none; tab-size: 4; white-space: pre;
}
textarea.editor:focus { box-shadow: inset 0 0 0 2px var(--accent); }

.lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.lang-toggle button {
  padding: 10px 18px; background: transparent; border: 0; color: var(--text-dim);
  cursor: pointer; font-size: var(--fs-sm); font-weight: 700; font-family: inherit; min-height: 44px;
}
.lang-toggle button.on { background: var(--accent); color: var(--accent-ink); }

/* ---------- checks / verdicts ---------- */

.check-list { list-style: none; margin: 14px 0 0; }
.check-list li {
  display: flex; gap: 13px; align-items: flex-start; padding: 12px 0;
  border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm);
}
.check-list li:last-child { border-bottom: 0; }
.check-ok   { color: var(--green); font-weight: 800; flex-shrink: 0; font-size: var(--fs-md); line-height: 1.2; }
.check-no   { color: var(--red);   font-weight: 800; flex-shrink: 0; font-size: var(--fs-md); line-height: 1.2; }
.check-warn { color: var(--gold);  font-weight: 800; flex-shrink: 0; font-size: var(--fs-md); line-height: 1.2; }

.verdict { padding: 18px 22px; border-radius: 11px; border-left: 4px solid; margin: 20px 0; font-size: var(--fs-sm); }
.verdict strong { display: block; margin-bottom: 6px; font-size: var(--fs-md); }
.verdict.pass    { background: #10291c; border-color: var(--green); color: #c3f3d6; }
.verdict.close,
.verdict.partial { background: #29200d; border-color: var(--gold);  color: #f6e3ba; }
.verdict.fail    { background: #2e151a; border-color: var(--red);   color: #fbcdd4; }
.verdict.empty   { background: var(--panel-2); border-color: var(--line); color: var(--text-dim); }

.note {
  background: #141d2e; border: 1px solid var(--line); border-left: 4px solid var(--accent);
  padding: 16px 20px; border-radius: 0 10px 10px 0; font-size: var(--fs-sm);
  color: var(--text-dim); margin: 20px 0;
}
.note b { color: var(--text); }

.hint-box {
  background: #201a10; border-left: 4px solid var(--gold); padding: 16px 20px;
  border-radius: 0 10px 10px 0; margin: 16px 0; font-size: var(--fs-sm); color: #f3ddb8;
}
.hint-box b { color: #ffd79a; }

/* ---------- coach ---------- */

.coach { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); margin-top: 20px; overflow: hidden; }
.coach-head {
  display: flex; align-items: center; gap: 12px; padding: 15px 20px;
  background: linear-gradient(90deg, rgba(92,208,216,.13), transparent);
  border-bottom: 1px solid var(--line);
}
.coach-dot {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: grid; place-items: center; color: var(--accent-ink); font-weight: 900;
}
.coach-body { padding: 20px; font-size: var(--fs-sm); }
.coach-msg { margin-bottom: 16px; }
.coach-msg:last-child { margin-bottom: 0; }
.coach-msg .who { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); font-weight: 800; margin-bottom: 6px; }
.coach-msg.you .bubble { background: var(--panel-3); }
.coach-msg .bubble { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 15px 18px; white-space: pre-wrap; }
.coach-thinking { color: var(--text-mute); font-style: italic; }
.coach-thinking:after { content: '…'; animation: fade-in 1s infinite alternate; }

.finding { border-left: 3px solid var(--gold); padding: 12px 16px; margin: 12px 0; background: #1b1810; border-radius: 0 9px 9px 0; }
.finding.err { border-color: var(--red); background: #241419; }
.finding.ok  { border-color: var(--green); background: #10251a; }
.finding .ftitle { font-weight: 750; margin-bottom: 4px; }
.finding .fline { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-mute); }

/* ---------- questions ---------- */

.q-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; }
.q-text { font-size: var(--fs-md); font-weight: 500; margin: 16px 0 26px; white-space: pre-wrap; line-height: 1.6; }
.opts { display: flex; flex-direction: column; gap: 13px; }
.opt {
  background: var(--bg-2); border: 2px solid var(--line); padding: 17px 20px;
  border-radius: 11px; cursor: pointer; text-align: left; color: var(--text);
  font-size: var(--fs-sm); font-family: inherit; width: 100%; min-height: 60px;
  display: flex; gap: 15px; align-items: flex-start; line-height: 1.55;
  transition: border-color .15s, background .15s, transform .15s var(--ease);
}
.opt:hover:not(:disabled) { border-color: var(--accent); transform: translateX(3px); }
.opt:disabled { cursor: default; }
.opt .k {
  width: 30px; height: 30px; border-radius: 8px; background: var(--line);
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 800;
  flex-shrink: 0; color: var(--text-dim);
}
.opt.sel   { border-color: var(--accent); background: #14293c; }
.opt.right { border-color: var(--green); background: #10291c; }
.opt.right .k { background: var(--green); color: #062012; }
.opt.wrong { border-color: var(--red); background: #2e151a; }
.opt.wrong .k { background: var(--red); color: #2e151a; }

.why {
  margin-top: 20px; padding: 18px 22px; border-radius: 11px; font-size: var(--fs-sm);
  background: var(--panel-2); border-left: 4px solid var(--accent-2); color: var(--text-dim);
  line-height: 1.65;
}
.why b { color: var(--text); }

/* ---------- exam ---------- */

.exam-head {
  position: sticky; top: 62px; z-index: 40; background: rgba(11,15,26,.96);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  padding: 16px 0 18px; margin-bottom: 28px;
}
.exam-progress { display: flex; gap: 4px; margin-top: 14px; }
.pip { height: 7px; border-radius: 4px; background: var(--line); flex: 1; transition: background .3s; }
.pip.done { background: var(--accent); }
.pip.now  { background: var(--gold); }

.result-hero { text-align: center; padding: 46px 26px; }
.result-level {
  font-size: var(--fs-3xl); font-weight: 900; letter-spacing: -.035em; line-height: 1.05;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; margin: 14px 0 10px;
}
.result-score { font-size: var(--fs-md); color: var(--text-dim); }
.ladder { display: flex; gap: 8px; margin: 34px auto; max-width: 780px; }
.ladder div {
  flex: 1; text-align: center; padding: 14px 8px; border-radius: 10px;
  background: var(--panel-2); border: 2px solid var(--line);
  font-size: var(--fs-xs); font-weight: 800; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .04em;
}
.ladder div.at { background: linear-gradient(135deg, var(--accent), var(--purple)); color: var(--accent-ink); border-color: transparent; }
.ladder div.below { color: var(--text-dim); }

.delta-up   { color: var(--green); font-weight: 700; }
.delta-down { color: var(--red); font-weight: 700; }
.delta-flat { color: var(--text-mute); }

/* ---------- flashcards ---------- */

.flash {
  min-height: 320px; display: grid; place-items: center; text-align: center;
  padding: 46px 34px; background: var(--panel); border: 2px solid var(--accent);
  border-radius: 18px; cursor: pointer; font-size: var(--fs-lg); line-height: 1.5;
  animation: pop .3s var(--ease);
}
.flash .side { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-mute); margin-bottom: 18px; font-weight: 800; }

/* ---------- lists ---------- */

.plist { display: flex; flex-direction: column; gap: 11px; }
.prow {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 18px; align-items: center;
  padding: 18px 22px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s var(--ease);
}
.prow:hover { border-color: var(--accent); transform: translateX(3px); }
.prow .t { font-weight: 650; font-size: var(--fs-sm); }
.prow .s { font-size: var(--fs-xs); color: var(--text-mute); }

.filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; align-items: center; }
select, input[type="text"], input[type="password"] {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 12px 16px; border-radius: 9px; font-family: inherit;
  font-size: var(--fs-sm); outline: none; min-height: 50px;
}
select:focus, input:focus { border-color: var(--accent); }

details.reveal { margin: 20px 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
details.reveal > summary {
  cursor: pointer; padding: 16px 22px; background: var(--panel-2);
  font-weight: 700; font-size: var(--fs-sm); list-style: none; user-select: none; min-height: 54px;
}
details.reveal > summary::-webkit-details-marker { display: none; }
details.reveal > summary:before { content: '▸'; color: var(--accent); margin-right: 10px; display: inline-block; transition: transform .2s; }
details.reveal[open] > summary:before { transform: rotate(90deg); }
details.reveal > div { padding: 8px 22px 20px; animation: fade-in .25s; }

.empty { text-align: center; padding: 70px 24px; color: var(--text-mute); font-size: var(--fs-md); }
.crumb { font-size: var(--fs-sm); color: var(--text-mute); margin-bottom: 18px; }
.crumb a { color: var(--text-dim); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: var(--panel-3); border: 1px solid var(--accent); color: var(--text);
  padding: 16px 26px; border-radius: 11px; font-size: var(--fs-sm); z-index: 120;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); max-width: 92vw; animation: fade-up .3s var(--ease);
}

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

@media (max-width: 1080px) {
  .workspace { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  :root { --scale: 1; }
  main { padding: 24px 16px 90px; }
  .topbar-inner { padding: 10px 16px; gap: 12px; }
  .brand span.full { display: none; }
  .nav a { padding: 9px 12px; }
  .panel { padding: 20px; }
  .q-card { padding: 22px; }
  .prow { grid-template-columns: 1fr auto; }
  .prow .hide-sm { display: none; }
  .exam-head { top: 58px; }
  .ladder { flex-wrap: wrap; }
  .ladder div { min-width: calc(50% - 8px); }
  .meter-row { grid-template-columns: 1fr 90px; }
  textarea.editor { min-height: 320px; }
}

@media print {
  .topbar, .btn, .tabs { display: none; }
  body { background: #fff; color: #000; }
}