:root {
  --wash: #ebe7e1;
  --bg: #ebe7e1;
  --paper: rgba(255, 255, 255, 0.92);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #8e8e93;
  --line: rgba(60, 60, 67, 0.12);
  --tint: #007aff;
  --ink: #1c1c1e;
  --ok: #34c759;
  --bad: #ff3b30;
  --math: #0a84ff;
  --rus: #af52de;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --nav-h: calc(84px + var(--safe-bot));
  --app-h: 100%;
  /* System stack first — works offline / under VPN without fonts.googleapis */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --bezel: #1a1a1c;
  /* surfaces: card = opaque paper, glass = chrome only. Never blur content over the wash. */
  --card: #ffffff;
  --card-solid: #ffffff;
  --card-edge: rgba(60, 60, 67, 0.12);
  --card-blur: none;
  --glass: rgba(255, 255, 255, 0.42);
  --glass-strong: rgba(255, 255, 255, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-hi: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 18px 50px rgba(30, 24, 18, 0.14);
  --fill: rgba(118, 118, 128, 0.12);
  --press: rgba(60, 60, 67, 0.08);
  --on-ink: #ffffff;
  --shadow: 0 10px 30px rgba(30, 24, 18, 0.08);
  --scrim: rgba(20, 16, 12, 0.22);
  --canvas-grid: rgba(60, 60, 67, 0.08);
}
html[data-theme="dark"] {
  --wash: #0b0b0c;
  --bg: #0b0b0c;
  --paper: rgba(255, 255, 255, 0.10);
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --faint: #8e8e93;
  --line: rgba(255, 255, 255, 0.16);
  --ink: #f5f5f7;
  --ok: #30d158;
  --bad: #ff453a;
  --tint: #0a84ff;
  --card: #222226;
  --card-solid: #222226;
  --card-edge: rgba(255, 255, 255, 0.22);
  --card-blur: none;
  --glass: rgba(34, 34, 38, 0.46);
  --glass-strong: rgba(40, 40, 44, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.18);
  --glass-hi: rgba(255, 255, 255, 0.28);
  --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --fill: rgba(255, 255, 255, 0.12);
  --press: rgba(255, 255, 255, 0.09);
  --on-ink: #0b0b0c;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  --scrim: rgba(0, 0, 0, 0.35);
  --canvas-grid: rgba(255, 255, 255, 0.10);
  color-scheme: dark;
}
html[data-theme="ink"] {
  --wash: #e8dfd0;
  --bg: #e8dfd0;
  --paper: rgba(250, 245, 236, 0.94);
  --text: #2a241c;
  --muted: #7a6e5e;
  --faint: #b3a48e;
  --line: rgba(42, 36, 28, 0.12);
  --tint: #b8572a;
  --ink: #2a241c;
  --math: #3d6b8a;
  --rus: #8b4a6f;
  --card: #fcf8f0;
  --card-solid: #fcf8f0;
  --card-edge: rgba(255, 252, 245, 0.9);
  --card-blur: none;
  --glass: rgba(250, 244, 232, 0.5);
  --glass-strong: rgba(250, 244, 232, 0.72);
  --glass-edge: rgba(255, 250, 240, 0.8);
  --fill: rgba(42, 36, 28, 0.07);
  --press: rgba(42, 36, 28, 0.07);
  --on-ink: #fcf8f0;
  --canvas-grid: rgba(42, 36, 28, 0.08);
}

* { box-sizing: border-box; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
html, body {
  margin: 0;
  height: 100%;
  background: #c9c3bb;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  color-scheme: light;
}
html[data-theme="dark"] body { background: #1e1e20; color-scheme: dark; }
html[data-theme="ink"] body { background: #cfc4b0; }
body { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; color: inherit; }
.field { font-size: 16px; min-height: 44px; }
button { appearance: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
a { color: var(--tint); }
[hidden], .hidden { display: none !important; }
input[type="number"]::-webkit-inner-spin-button { appearance: none; }
input[type="date"] { color-scheme: light; }
html[data-theme="dark"] input[type="date"] { color-scheme: dark; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.42s; animation-timing-function: var(--ease); }

.lg {
  background: var(--glass);
  backdrop-filter: blur(40px) saturate(1.85);
  -webkit-backdrop-filter: blur(40px) saturate(1.85);
  border: 0.5px solid var(--glass-edge);
  box-shadow:
    inset 0 0.5px 0 var(--glass-hi),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.04),
    var(--glass-shadow);
}
html[data-theme="dark"] .lg {
  box-shadow:
    inset 0 0.5px 0 var(--glass-hi),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.35),
    var(--glass-shadow);
}

/* Splash chrome lives inline in index.html for first paint; keep photo wash upgrade when CSS arrives. */
#splash.splash {
  background: transparent;
}
html:not([data-theme]) #splash .wash,
html[data-theme="light"] #splash .wash {
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(10, 132, 255, 0.12), transparent 70%),
    #ebe7e1 url("../assets/img/lotus-wash.png") center / cover no-repeat;
}
html[data-theme="dark"] #splash .wash {
  background:
    linear-gradient(180deg, rgba(9, 9, 11, 0.35) 0%, rgba(9, 9, 11, 0.62) 100%),
    #0b0b0c url("../assets/img/lotus-wash-dark.png") center / cover no-repeat;
}
html[data-theme="ink"] #splash .wash {
  background:
    radial-gradient(120% 70% at 50% 0%, #f6efe2 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(42, 36, 28, 0.025) 0 1px, transparent 1px 28px),
    #e8dfd0;
}

.app {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
  background: var(--wash) url("../assets/img/lotus-wash.png") center top / cover no-repeat;
}
.app::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.38), rgba(235,231,225,0.55));
  pointer-events: none;
}
.app.notop { grid-template-rows: 1fr; }

.topbar {
  position: relative;
  z-index: 2;
  padding: calc(var(--safe-top) + 10px) 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.brand .name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip {
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.view {
  position: relative;
  z-index: 1;
  overflow: auto;
  padding: 4px 16px calc(var(--nav-h) + 28px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.view::-webkit-scrollbar { display: none; }
.app.nonav .view { padding-bottom: calc(28px + var(--safe-bot)); }
.app.notop .view { padding-top: calc(var(--safe-top) + 8px); }

.nav {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(10px + var(--safe-bot));
  height: 58px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-radius: 999px;
  z-index: 40;
  padding: 4px;
  background: var(--glass);
  backdrop-filter: blur(40px) saturate(1.9);
  -webkit-backdrop-filter: blur(40px) saturate(1.9);
  border: 0.5px solid var(--glass-edge);
  box-shadow:
    inset 0 0.5px 0 var(--glass-hi),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.04),
    var(--glass-shadow);
}
.nav button {
  position: relative;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-height: 44px;
  transition: color 0.2s var(--ease), transform 0.25s var(--spring);
}
.nav button.active { color: var(--text); }
.nav button.active::before {
  content: "";
  position: absolute;
  inset: 0 3px;
  border-radius: 999px;
  background: var(--fill);
  animation: navPill 0.42s var(--spring) both;
}
.nav button > * { position: relative; }
.nav button.active svg { stroke: var(--tint); }
@keyframes navPill { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.nav svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hello { padding: 10px 4px 18px; }
.hello .hi { margin: 0; color: var(--muted); font-size: 13px; font-weight: 500; }
.hello-name {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.hello-name:active { opacity: 0.7; }
.hello h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: -0.035em;
  font-weight: 600;
  line-height: 1.08;
}
.hello .meta { margin: 6px 0 0; color: var(--muted); font-size: 15px; }

.group {
  background: var(--card-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  animation: deal 0.5s var(--ease) both;
}
.cell {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 14px 16px;
  min-height: 52px;
  cursor: pointer;
  border-bottom: 0.5px solid var(--line);
  transition: background-color 0.18s var(--ease);
}
.cell:last-child { border-bottom: 0; }
.cell b { display: block; font-size: 17px; font-weight: 590; letter-spacing: -0.022em; }
.cell small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.cell .val {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 400;
}
.cell .chev { color: var(--faint); font-size: 20px; margin-left: 6px; }
.cell .n {
  width: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--tint);
  font-size: 15px;
}

.sec {
  margin: 0 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
}

.today {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}
.photo {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  border-radius: 18px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  border: 0;
  background: #ccc center / cover no-repeat;
  background-image: var(--cover, none);
  color: #fff;
  box-shadow: 0 10px 28px rgba(30, 24, 18, 0.12);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(20, 16, 12, 0.55));
}
.photo > * { position: relative; z-index: 1; }
.photo .tag {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
}
.photo b { display: block; margin-top: 48px; font-size: 15px; letter-spacing: -0.03em; }
.photo em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; opacity: 0.85; }

.page-title {
  margin: 6px 4px 4px;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.03em;
  font-weight: 600;
  line-height: 1.12;
}
.lead {
  margin: 0 4px 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--fill);
  border-radius: 9px;
  padding: 2px;
  margin-bottom: 14px;
}
.segment button, .segment .choice {
  border: 0;
  background: transparent;
  color: var(--text);
  opacity: 0.72;
  border-radius: 7px;
  padding: 7px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  margin: 0;
  text-align: center;
}
.segment button.on, .segment .choice.on {
  background: var(--card-solid);
  color: var(--text);
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.task-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 16px;
  margin: 0;
  cursor: pointer;
  border-bottom: 0.5px solid var(--line);
}
.group .task-row:last-child { border-bottom: 0; }
.task-row .n {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 650;
  width: 28px;
  color: var(--tint);
}
.task-row b { display: block; font-size: 16px; font-weight: 590; letter-spacing: -0.02em; }
.task-row small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.task-row .chev { margin-left: auto; color: var(--faint); font-size: 20px; }
.task-row .pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fill);
  flex: 0 0 auto;
}
html[data-theme="dark"] .task-row .pip { background: rgba(255, 255, 255, 0.22); }
.task-row .pip.on { background: var(--ok); }
.task-row .pip.mid { background: #ff9f0a; }

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 0.5px 0 var(--glass-hi);
  transition: transform 0.25s var(--spring);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--text);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.row { display: flex; gap: 10px; align-items: center; }
.grow { flex: 1; min-width: 0; }
.mt { margin-top: 12px; }
.mb { margin-bottom: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.022em;
  transition: transform 0.25s var(--spring), opacity 0.2s;
}
.btn.wide { width: 100%; }
.btn.ghost {
  background: var(--card);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  color: var(--text);
}
.btn.link {
  background: none;
  color: var(--tint);
  font-weight: 590;
  font-size: 16px;
  padding: 12px;
}

.field {
  width: 100%;
  color: var(--text);
  background: var(--card-solid);
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  outline: none;
  box-shadow: 0 0 0 0.5px var(--line);
  font-size: 16px;
  min-height: 48px;
}
.field:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint) 28%, transparent); }
textarea.field { min-height: 180px; resize: vertical; line-height: 1.5; }

.choice {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin: 8px 0;
  cursor: pointer;
  font-weight: 590;
  transition: transform 0.25s var(--spring), border-color 0.2s, background-color 0.2s;
}
.choice.on {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 12%, var(--card-solid));
}
html[data-theme="dark"] .segment button,
html[data-theme="dark"] .segment .choice { opacity: 0.8; }
html[data-theme="dark"] .segment button.on,
html[data-theme="dark"] .segment .choice.on {
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 0 0 0.5px var(--card-edge);
}
.choice.ok { border-color: var(--ok); }
.choice.bad { border-color: var(--bad); }

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--fill);
  color: var(--muted);
}
.pill.math, .pill.rus {
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 16%, transparent);
}
html[data-theme="dark"] .pill { color: var(--text); opacity: 0.92; }

.theory { font-size: 17px; line-height: 1.47; letter-spacing: -0.022em; }
.theory h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 10px;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.theory h4 {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 22px 0 8px;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.theory p { margin: 0 0 12px; color: var(--text); }
.formula {
  background: var(--paper);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 26px;
  row-gap: 10px;
}
html[data-theme="dark"] .formula,
html[data-theme="dark"] .video {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
.fpart { display: block; max-width: 100%; }
.formula .katex-display { margin: 0; overflow: hidden; }
.formula .katex { font-size: 1.08em; }
.callout {
  border-radius: 16px;
  padding: 14px 16px;
  margin: 12px 0;
  background: var(--card);
  font-size: 15px;
  line-height: 1.5;
}
.callout.trap { background: rgba(255, 159, 10, 0.12); }
.callout.trap b { color: #c77700; }
html[data-theme="dark"] .callout.trap b { color: #ffb340; }
.callout.sage { background: rgba(52,199,89,0.1); }
.callout.bad { background: rgba(255,59,48,0.08); }
.callout b {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 650;
  color: var(--tint);
}

.hint-stack { display: grid; gap: 8px; margin-top: 10px; }
.hint {
  background: var(--card);
  border-radius: 14px;
  padding: 12px;
  font-size: 15px;
  line-height: 1.45;
}
.hint .lvl { display: block; font-size: 12px; font-weight: 650; color: var(--tint); margin-bottom: 4px; }

.katex-block { overflow-x: auto; padding: 4px 0; }
.diagram {
  color: var(--text);
  background: var(--card);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  border-radius: 20px;
  padding: 12px;
  margin: 12px 0;
  animation: deal 0.5s var(--ease) both;
}
.diagram text { font-family: var(--font) !important; font-weight: 600; }
.diagram svg { width: 100%; height: auto; display: block; }

.studio {
  margin: 10px 0 16px;
  background: var(--card-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  isolation: isolate;
  animation: deal 0.5s var(--ease) both;
}
.studio-stage {
  height: 230px;
  background: color-mix(in srgb, var(--fill) 55%, var(--card-solid));
}
.studio-stage.tall { height: 260px; }
html[data-theme="dark"] .studio-stage {
  background: color-mix(in srgb, var(--fill) 80%, #121214);
}
.studio-note.hint.caption {
  margin: -4px 14px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
  min-height: 0;
}
.studio-note {
  margin: -2px 14px 10px;
  min-height: 34px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: var(--text);
  animation: rise 0.3s var(--ease) both;
}
.studio-note.hint { color: var(--muted); font-size: 12px; }
.studio-pick { display: grid; gap: 0; }
.studio-stage.grab { touch-action: none; cursor: grab; }
.studio-stage.grab:active { cursor: grabbing; }
.studio-stage canvas { display: block; width: 100%; height: 100%; }
.studio-panel {
  position: relative;
  z-index: 3;
  padding: 4px 10px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px;
}
.studio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 8px;
}
.studio-chip {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  background: var(--fill);
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.25s var(--spring);
}
.studio-chip.on { background: var(--ink); color: var(--on-ink); }
.studio-chip.ov {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  opacity: 0.88;
}
.studio-chip.ov.on {
  background: var(--tint);
  color: #fff;
  box-shadow: none;
  opacity: 1;
}
html[data-theme="dark"] .studio-chip:not(.on) {
  color: var(--text);
  opacity: 0.92;
}
html[data-theme="dark"] .studio-chip.ov:not(.on) {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 42px;
  padding: 3px 3px 3px 12px;
  border-radius: 14px;
  background: var(--fill);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
html[data-theme="dark"] .step {
  color: var(--text);
  background: rgba(255, 255, 255, 0.10);
}
.step > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-ctrl { display: flex; align-items: center; gap: 2px; }
.step-ctrl button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  background: var(--card-solid);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s var(--spring), background-color 0.15s;
}
.step-ctrl b {
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 650;
  font-size: 14px;
}
.step-ctrl b.tick { animation: tick 0.28s var(--spring); }
@keyframes tick { 0% { transform: scale(0.8); opacity: 0.4; } 100% { transform: none; opacity: 1; } }

.sandbox { height: 300px; border-radius: 24px; overflow: hidden; margin: 8px 0 12px; touch-action: none; }
.sandbox.tall { height: min(52dvh, 420px); }

.video {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border: 0;
  background: var(--paper);
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.video .play {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  /* fixed red, not --ink: --ink flips to white in dark and swallowed the white glyph */
  background: linear-gradient(160deg, #ff5a4e, #e0241b);
  color: #fff;
  box-shadow: 0 4px 12px rgba(224, 36, 27, 0.28);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.video .play svg { width: 15px; height: 15px; fill: #fff; stroke: none; margin-left: 2px; }
.video b { display: block; font-size: 15px; }
.video span { color: var(--muted); font-size: 12px; }

.exam-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px; }
.exam-q {
  font-size: 17.5px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-weight: 560;
  margin: 4px 2px 12px;
  white-space: pre-line;
}

.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  border: 0;
  background: var(--fill);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tab.on { color: var(--on-ink); background: var(--ink); }
html[data-theme="dark"] .tab:not(.on) {
  color: var(--text);
  opacity: 0.88;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--nav-h) + 8px);
  transform: translateX(-50%);
  background: rgba(28,28,30,0.92);
  color: #fff;
  padding: 12px 16px;
  border-radius: 14px;
  z-index: 85;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.onboard { min-height: 100%; display: flex; flex-direction: column; padding-top: 8px; }
.onboard-paper {
  background: var(--card-solid);
  border-radius: 20px;
  padding: 16px 16px 20px;
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.onboard-paper .page-title, .onboard-paper .lead { text-align: center; }
.onboard-paper .field {
  background: var(--fill);
  box-shadow: none;
}
html[data-theme="dark"] .onboard-paper .field {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
html[data-theme="dark"] .track:not(.on) {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
.onboard .group {
  background: var(--card-solid);
  backdrop-filter: none;
}
.track-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 4px;
}
.track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 14px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--fill);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
}
.track b {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.track small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.track.on {
  background: var(--text);
  color: var(--on-ink);
  box-shadow: none;
}
.track.on small { color: color-mix(in srgb, var(--on-ink) 72%, transparent); }
html[data-theme="dark"] .track.on {
  background: #f5f5f7;
  color: #1d1d1f;
}
html[data-theme="dark"] .track.on small { color: rgba(0, 0, 0, 0.55); }
html[data-theme="ink"] .track.on small { color: color-mix(in srgb, var(--on-ink) 72%, transparent); }
.ob-dots { display: flex; justify-content: center; gap: 6px; margin: 8px 0 4px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--fill); }
.ob-dots i.on { width: 18px; background: var(--tint); }
.ob-dots i.done { background: var(--tint); opacity: 0.35; }
html[data-theme="dark"] .ob-dots i { background: rgba(255, 255, 255, 0.22); }
.hint-cap {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 4px 0 16px;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.onboard .page-title, .onboard .lead { text-align: center; }
.lbl { font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 4px 8px; }
.mark {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.answer-box { display: flex; gap: 8px; margin-top: 14px; }
.answer-box input { flex: 1; font-size: 20px; font-weight: 650; letter-spacing: -0.03em; }

.play-progress {
  height: 3px;
  background: var(--fill);
  border-radius: 99px;
  overflow: hidden;
  margin: 0 0 12px;
}
.play-progress i { display: block; height: 100%; background: var(--tint); }
.play-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ink {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  background: var(--glass-strong);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge);
  font-variant-numeric: tabular-nums;
}
.play-foot {
  position: relative;
  margin-top: 18px;
  padding: 4px 0 calc(8px + var(--safe-bot));
}
.play-tools { display: flex; gap: 8px; margin-top: 8px; }
.play-tools button {
  flex: 1;
  background: var(--card);
  border: 0;
  border-radius: 12px;
  padding: 13px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.hint-link {
  background: none;
  border: 0;
  color: var(--tint);
  font-weight: 590;
  cursor: pointer;
  padding: 12px;
  min-height: 44px;
  width: 100%;
  font-size: 16px;
}

.small { font-size: 14px; color: var(--muted); line-height: 1.45; }
.fade-in { animation: rise 0.45s var(--ease) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.wordcount { font-size: 12px; color: var(--muted); margin: 6px 0 12px; }
.wordcount.ok { color: var(--ok); }
.ref-card { padding: 14px 4px; border-bottom: 0.5px solid var(--line); }
.ref-card .w { font-size: 18px; }
.accent { color: var(--rus); }

.big-action {
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--paper);
  padding: 20px 16px;
  cursor: pointer;
  border-bottom: 0.5px solid var(--line);
}
.big-action .n { font-size: 28px; letter-spacing: -0.045em; font-weight: 700; color: var(--text); }
.big-action h4 { margin: 4px 0 2px; font-size: 17px; }
.big-action p { margin: 0; color: var(--muted); font-size: 14px; }

.cut-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; width: 100%; }
.cut-progress { flex: 1; display: flex; gap: 4px; }
.cut-progress span { flex: 1; height: 3px; border-radius: 99px; background: var(--fill); }
.cut-progress span.on { background: var(--tint); }
.cut-progress span.done { background: var(--ok); }
.chip-task {
  display: inline-flex;
  margin: 0 auto 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 590;
  color: var(--text);
  background: var(--glass-strong);
  backdrop-filter: blur(20px);
}
html[data-theme="dark"] .chip-task {
  background: rgba(40, 40, 44, 0.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 0.5px var(--glass-edge);
}
.cut-stage { display: flex; flex-direction: column; align-items: center; }
.sheet {
  margin-top: auto;
  width: 100%;
  border-radius: 24px 24px 20px 20px;
  padding: 10px 18px 18px;
  background: var(--glass-strong);
  backdrop-filter: blur(36px) saturate(1.7);
  -webkit-backdrop-filter: blur(36px) saturate(1.7);
}
html[data-theme="dark"] .sheet {
  background: rgba(28, 28, 30, 0.92);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
}
.sheet .grab {
  width: 36px;
  height: 5px;
  border-radius: 99px;
  background: var(--fill);
  margin: 4px auto 12px;
}
.sheet h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.035em; }
.sheet p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.next-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: var(--fill);
  margin: 14px 0;
}
.next-card .ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-solid);
}
.next-card .ico img { width: 100%; height: 100%; object-fit: cover; }
.next-card b { display: block; font-size: 15px; }
.next-card span { color: var(--muted); font-size: 13px; }

.subj-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.subj-row > * { min-width: 0; max-width: 100%; }
.date-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
}
.date-cell {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.date-cell > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.date-cell .field,
input.field[type="date"] {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  padding-right: 10px;
}
input.field[type="date"]::-webkit-datetime-edit {
  min-width: 0;
  overflow: hidden;
}
.hint-dates {
  margin: 10px 0 8px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  padding: 0 2px;
  box-sizing: border-box;
}
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  border: 0;
  background: var(--card);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  border-radius: 18px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: deal 0.5s var(--ease) both;
  transition: transform 0.25s var(--spring);
}
.tile .tile-ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  background: var(--fill);
  color: var(--tint);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.tile b { display: block; font-size: 16px; margin-bottom: 4px; }
.tile span { color: var(--muted); font-size: 13px; }

.hero, .cta, .subj, .day-card, .modes, .mode, .bar { display: none; }

#yt-root {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: rgba(20, 16, 12, 0.48);
  display: flex;
  align-items: flex-end;
  padding: 12px 12px calc(12px + var(--safe-bot));
}
#yt-root[hidden] { display: none !important; }
.yt-card {
  width: 100%;
  border-radius: 24px;
  background: var(--card-solid);
  overflow: hidden;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 50px rgba(20, 16, 12, 0.28);
}
.yt-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 10px;
}
.yt-bar b { display: block; font-size: 16px; letter-spacing: -0.02em; line-height: 1.25; }
.yt-bar small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.yt-bar .icon-btn { margin-left: auto; flex: 0 0 auto; }
.yt-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #111;
}
.yt-frame iframe,
.yt-frame img,
.yt-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.yt-poster {
  background: #1c1c1e;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.yt-poster img { opacity: 0.55; }
.yt-play {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: grid;
  place-items: center;
}
.yt-play svg { width: 22px; height: 22px; fill: #1c1c1e; stroke: none; margin-left: 3px; }
.yt-poster em {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 1;
  font-style: normal;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  text-align: center;
}
.yt-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #bbb;
  font-size: 14px;
}
.yt-actions { padding: 12px 14px 16px; display: grid; gap: 8px; }
.yt-hint { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }

.video { min-height: 64px; }

.desk { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.iphone {
  position: relative;
  width: 390px;
  height: 844px;
  flex: 0 0 auto;
}
.side-btn {
  position: absolute;
  width: 4px;
  background: #2c2c2e;
  border-radius: 2px;
  z-index: 2;
}
.side-btn-l { left: -3px; top: 140px; height: 32px; }
.side-btn-l::before, .side-btn-l::after {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  height: 52px;
  background: #2c2c2e;
  border-radius: 2px;
}
.side-btn-l::before { top: 48px; }
.side-btn-l::after { top: 108px; height: 64px; }
.side-btn-r { right: -3px; top: 210px; height: 88px; }
.iphone-bezel {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bezel);
  border-radius: 54px;
  padding: 11px;
  box-shadow:
    0 0 0 1px #3a3a3c,
    0 40px 80px rgba(20,16,12,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}
.iphone-screen {
  position: relative;
  height: 100%;
  border-radius: 44px;
  overflow: hidden;
  background: var(--wash);
}
.island {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 60;
  width: 118px;
  height: 34px;
  margin-left: -59px;
  background: #000;
  border-radius: 20px;
  pointer-events: none;
}
/* Veil lives in the same background stack as the photo: a pseudo-element overlay flickers in WebView compositing. */
html[data-theme="dark"] .app {
  background:
    linear-gradient(180deg, rgba(9, 9, 11, 0.38) 0%, rgba(9, 9, 11, 0.56) 45%, rgba(9, 9, 11, 0.82) 100%),
    #0b0b0c url("../assets/img/lotus-wash-dark.png") center top / cover no-repeat;
}
html[data-theme="dark"] .app::before { background: none; }
html[data-theme="dark"] .photo { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 16px 40px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .step-ctrl button { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.2); }
html[data-theme="dark"] .hello h1,
html[data-theme="dark"] .page-title { text-shadow: 0 1px 24px rgba(10, 132, 255, 0.18); }

html[data-theme="ink"] .app {
  background:
    radial-gradient(120% 70% at 50% 0%, #f6efe2 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(42, 36, 28, 0.025) 0 1px, transparent 1px 28px),
    #e8dfd0;
}
html[data-theme="ink"] .app::before {
  background: linear-gradient(180deg, rgba(255, 248, 236, 0.35), rgba(232, 223, 208, 0.2));
}
html[data-theme="dark"] .lg,
html[data-theme="ink"] .lg { background: var(--glass); }

.fig {
  margin: 14px 0 16px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  padding: 12px;
  animation: deal 0.5s var(--ease) both;
}
.fig svg { display: block; width: 100%; height: auto; }
.fig figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.fig .sv-ink { stroke: var(--text); }
.fig .sv-mute { stroke: var(--faint); }
.fig .sv-tint { stroke: var(--tint); }
.fig .sv-fill-tint { fill: var(--tint); }
.fig .sv-text { fill: var(--text); font: 600 12px var(--font); }
.fig .sv-text-mute { fill: var(--muted); font: 500 11px var(--font); }
.fig .sv-card { fill: var(--card-solid); stroke: var(--line); }
.fig-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 6px 0; }
.fig-words span {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--fill);
}
.fig-words i { font-style: normal; color: var(--tint); text-decoration: underline; text-underline-offset: 4px; }
.mw-list { display: grid; gap: 12px; padding: 6px 0; }
.mw { display: flex; justify-content: center; align-items: flex-end; font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.05; }
.mw > span { position: relative; padding: 13px 1px 0; }
.mw svg.mk { position: absolute; left: 1px; right: 1px; top: 2px; width: calc(100% - 2px); height: 10px; overflow: visible; }
.mw svg.mk path { fill: none; stroke: var(--tint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mw .end { border: 1.7px solid var(--tint); border-radius: 3px; padding: 0 3px; margin: 0 0 1px 3px; line-height: 1.1; min-width: 18px; }
.mw-legend { margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.ege-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 14px; }
.ege-row small { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.ege-chip {
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 650;
  background: rgba(0, 122, 255, 0.1);
  color: var(--tint);
  cursor: pointer;
  transition: transform 0.25s var(--spring);
}
.ege-chip.rus { background: rgba(175, 82, 222, 0.12); color: var(--rus); }
.lesson-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.lesson-meta span { font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 9px; border-radius: 999px; background: var(--fill); }
.lesson-meta span.zadel { color: #c77700; background: rgba(255, 159, 10, 0.14); }
html[data-theme="dark"] .lesson-meta span.zadel { color: #ffb340; }
.lesson-hero {
  position: relative;
  height: 128px;
  border-radius: 22px;
  margin: 10px 0 6px;
  background: center / cover no-repeat;
  overflow: hidden;
  animation: deal 0.5s var(--ease) both;
}
.lesson-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(20, 16, 12, 0.55)); }
.lesson-hero span { position: absolute; left: 14px; bottom: 12px; z-index: 1; color: #fff; font-size: 13px; font-weight: 600; opacity: 0.92; }

.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.course-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.course-card {
  position: relative;
  overflow: hidden;
  min-height: 158px;
  border: 0;
  border-radius: 22px;
  padding: 14px;
  text-align: left;
  color: #fff;
  cursor: pointer;
  background: #9a9188 center / cover no-repeat;
  background-image: var(--cover, none);
  animation: deal 0.5s var(--ease) both;
  box-shadow: 0 10px 28px rgba(30, 24, 18, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.course-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 18%, rgba(20,16,12,0.62));
}
.course-card > * { position: relative; z-index: 1; }
.course-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.course-card span { display: block; margin-top: 4px; font-size: 12px; opacity: 0.9; }

.drawer-scrim {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--ease);
}
.drawer-scrim.on { opacity: 1; pointer-events: auto; }
/* Floating liquid-glass slab: inset from the screen edge so the specular rim reads as an object, not a panel. */
.drawer {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 71;
  width: min(82%, 300px);
  transform: translateX(calc(-100% - 24px)) scale(0.96);
  transform-origin: left center;
  opacity: 0.4;
  transition: transform 0.46s var(--spring), opacity 0.3s var(--ease);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 42%),
    var(--glass);
  backdrop-filter: blur(44px) saturate(2);
  -webkit-backdrop-filter: blur(44px) saturate(2);
  border-radius: 34px;
  border: 0.5px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    var(--glass-shadow);
  padding: 48px 12px 18px;
  overflow: auto;
  pointer-events: none;
}
html[data-theme="dark"] .drawer {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 40%),
    var(--glass);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    var(--glass-shadow);
}
.drawer.on { transform: none; opacity: 1; pointer-events: auto; }
.drawer.on > * { animation: drawerItem 0.46s var(--ease) both; }
.drawer.on > *:nth-child(2) { animation-delay: 0.03s; }
.drawer.on > *:nth-child(3) { animation-delay: 0.06s; }
.drawer.on > *:nth-child(4) { animation-delay: 0.09s; }
.drawer.on > *:nth-child(5) { animation-delay: 0.12s; }
.drawer.on > *:nth-child(6) { animation-delay: 0.15s; }
.drawer.on > *:nth-child(n+7) { animation-delay: 0.18s; }
@keyframes drawerItem { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 0 8px 14px; }
.drawer-head img { width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.drawer-head b { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; }
.drawer-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.drawer-list {
  border-radius: 20px;
  background: var(--fill);
  overflow: hidden;
  margin-bottom: 14px;
}
.drawer .cell { padding: 11px 12px; min-height: 48px; gap: 12px; }
.drawer .cell b { font-size: 15px; }
.drawer .cell small { font-size: 12px; }
.drawer .cell .d-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--card-solid);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.drawer .cell .d-ico svg { width: 17px; height: 17px; stroke: var(--tint); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drawer .sec { margin: 4px 10px 8px; }
.theme-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 20px;
  background: var(--fill);
  margin: 0 0 14px;
}
.theme-dot {
  border: 0;
  border-radius: 16px;
  padding: 10px 4px 9px;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 6px;
  transition: background-color 0.25s, color 0.25s, transform 0.25s var(--spring);
}
.theme-dot i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.12);
}
.theme-dot[data-theme="light"] i { background: radial-gradient(circle at 35% 30%, #fff, #e9e3db); }
.theme-dot[data-theme="dark"] i { background: radial-gradient(circle at 35% 30%, #4a4a50, #0e0e10 70%); }
.theme-dot[data-theme="ink"] i { background: radial-gradient(circle at 35% 30%, #fbf5ea, #d9ccb6); }
.theme-dot.on { background: var(--card-solid); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

.group .lesson-card { border-bottom: 0.5px solid var(--line); border-radius: 0; }
.group .lesson-card:last-child { border-bottom: 0; }
.lesson-card {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}
.lesson-card .chev { color: var(--faint); font-size: 20px; }
.lesson-card.on .chev { color: var(--ok); font-size: 16px; font-weight: 700; }
.lesson-card .grow b {
  display: block;
  font-size: 17px;
  font-weight: 590;
  letter-spacing: -0.022em;
  line-height: 1.25;
}
.lesson-card .grow small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}
.group > :nth-child(1) { animation-delay: 0s; }
.lesson-card .glyph {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--fill) var(--cover, none) center / cover no-repeat;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

.glyph-line { display: none; }
.glyph-line svg { display: block; width: 100%; height: 100%; fill: none; stroke: rgba(245, 245, 247, 0.84); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.glyph-line .ac { stroke: var(--cc); stroke-width: 1.8; }
.glyph-line .dot { fill: rgba(245, 245, 247, 0.84); stroke: none; }
.glyph-line .ac.dot { fill: var(--cc); }
.glyph-line .dash { stroke-dasharray: 2 3.2; opacity: 0.42; }
[data-course="alg"], [data-course="math"] { --cc: #0a84ff; }
[data-course="geo"] { --cc: #64d2ff; }
[data-course="prob"] { --cc: #ff9f0a; }
[data-course="rus"] { --cc: #bf5af2; }

/* Dark: no stock photos. Glass slab + line instrument; the wallpaper behind supplies the only imagery. */
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .photo {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.02) 62%), rgba(16, 16, 18, 0.58);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  color: var(--text);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.13),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.24),
    0 16px 40px rgba(0, 0, 0, 0.42);
}
html[data-theme="dark"] .course-card::after,
html[data-theme="dark"] .photo::after {
  inset: auto 14px 0;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cc), transparent 70%);
  opacity: 0.7;
}
html[data-theme="dark"] .glyph-line { display: block; }
html[data-theme="dark"] .course-card .glyph-line { position: absolute; top: 14px; left: 12px; width: 44px; height: 44px; }
html[data-theme="dark"] .photo .glyph-line { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; }
html[data-theme="dark"] .course-card b { letter-spacing: -0.02em; }
html[data-theme="dark"] .course-card span,
html[data-theme="dark"] .photo em {
  color: var(--muted);
  opacity: 1;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .photo .tag { background: rgba(255, 255, 255, 0.08); color: var(--muted); backdrop-filter: none; }
html[data-theme="dark"] .lesson-card .glyph { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .lesson-card .glyph-line { width: 28px; height: 28px; }
.lesson-card .num {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--fill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--tint);
}
.lesson-card.on .num { background: rgba(52, 199, 89, 0.14); color: var(--ok); }
.lesson-card.locked { opacity: 0.85; }
.lesson-card.locked .chev {
  font-size: 14px;
  font-weight: 700;
  color: var(--tint);
}
.lock-hero { margin-bottom: 12px; }
@keyframes deal {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.drill { padding-top: 8px; }
.deal-card {
  background: var(--card);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border-radius: 24px;
  padding: 28px 18px;
  margin: 12px 0 18px;
  min-height: 150px;
  display: grid;
  place-items: center;
  animation: cardIn 0.5s var(--spring) both;
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
}
.deal-in { animation: cardIn 0.5s var(--spring) both; }
.deal-card.hit { animation: hit 0.5s var(--spring); }
.deal-card.miss { animation: miss 0.42s var(--ease); }
@keyframes cardIn {
  from { opacity: 0; transform: translateX(40px) rotate(3deg) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes hit { 40% { transform: scale(1.035); } 100% { transform: none; } }
@keyframes miss {
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.stress-word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
}
.vowel {
  border: 0;
  background: var(--fill);
  color: var(--text);
  border-radius: 12px;
  min-width: 38px;
  height: 52px;
  font: inherit;
  cursor: pointer;
  transition: transform 0.25s var(--spring), background-color 0.2s, color 0.2s;
}
.vowel.ok { background: var(--ok); color: #fff; animation: hit 0.45s var(--spring); }
.vowel.bad { background: var(--bad); color: #fff; }
.spell-gap {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0 0 14px;
  text-align: center;
}
.field.ok { box-shadow: 0 0 0 4px rgba(52,199,89,0.25); }
.field.bad { box-shadow: 0 0 0 4px rgba(255,59,48,0.25); }
.drill-score { text-align: center; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.drill-rule {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--fill);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  animation: rise 0.35s var(--ease) both;
}
.drill-rule.ok { background: rgba(52, 199, 89, 0.12); }
.drill-rule.bad { background: rgba(255, 59, 48, 0.1); }
.drill-rule b { font-weight: 700; }
.deal-card.hit { box-shadow: inset 0 0 0 1.5px rgba(52, 199, 89, 0.55), var(--shadow); }
.deal-card.miss { box-shadow: inset 0 0 0 1.5px rgba(255, 59, 48, 0.5), var(--shadow); }
.deal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.deal-row .choice { text-align: center; font-weight: 600; }
.deal-row .choice.big-letter {
  min-height: 64px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.root-chips {
  margin: 0 0 12px;
  padding: 0;
  max-height: 88px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
.root-chips .studio-chip { flex: 0 0 auto; }
.root-gap { font-size: 28px; font-weight: 700; letter-spacing: 0.04em; text-align: center; }
.paron-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
}
.paron-gap {
  display: inline-block;
  min-width: 64px;
  border-bottom: 2px solid var(--tint);
  color: var(--tint);
  transition: color 0.2s;
}
.paron-gap.filled { animation: rise 0.35s var(--spring) both; border-bottom-color: transparent; }

.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 18px;
}
.game-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 108px;
  padding: 14px 14px 12px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(165deg, rgba(10, 132, 255, 0.06), transparent 42%),
    var(--card-solid);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  animation: deal 0.45s var(--spring) both;
  transition: transform 0.25s var(--spring), box-shadow 0.25s;
  overflow: hidden;
}
.game-tile::after {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 99px;
  background: var(--tint);
  opacity: 0.55;
}
.game-tile:active { transform: scale(0.97); }
.game-grid > .game-tile:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 84px; }
.game-tile b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.game-tile small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.game-tag {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tint);
  margin-bottom: 2px;
}
.drill-streak {
  display: inline-flex;
  align-self: center;
  margin: 0 auto 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 149, 0, 0.14);
  color: #c77700;
  font-size: 13px;
  font-weight: 650;
}
html[data-theme="dark"] .drill-streak { color: #ffb340; }
.drill-streak.pop { animation: hit 0.45s var(--spring); }
.pleo-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.55;
  text-align: center;
}
.pleo-word {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0 1px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.pleo-word:hover { background: var(--fill); }
.pleo-word.ok { background: var(--ok); color: #fff; }
.pleo-word.bad { background: var(--bad); color: #fff; }

/* Lotus+ paywall — paper cards, not glass tiles */
.plus { padding-top: 4px; }
.plus-hero {
  text-align: center;
  margin-bottom: 18px;
  animation: rise 0.45s var(--ease) both;
}
.plus-hero.on .page-title { color: var(--ok); }
.plus-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.plus-col {
  border-radius: 16px;
  padding: 14px 12px 12px;
  background: var(--card-solid);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  animation: deal 0.5s var(--spring) both;
}
.plus-col.pro {
  background: var(--text);
  color: var(--on-ink);
  box-shadow: none;
  animation-delay: 0.06s;
}
.plus-col.pro small,
.plus-col.pro em { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
html[data-theme="dark"] .plus-col.pro {
  background: #f5f5f7;
  color: #1d1d1f;
}
html[data-theme="dark"] .plus-col.pro small,
html[data-theme="dark"] .plus-col.pro em { color: rgba(0, 0, 0, 0.55); }
.plus-col > small {
  display: block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.plus-col > b {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.plus-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plus-col li {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.plus-col li span {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}
.plus-col li em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}
.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.plan-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--card-solid);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  animation: deal 0.45s var(--spring) both;
  transition: transform 0.25s var(--spring), box-shadow 0.2s;
}
.plan-card b {
  grid-column: 1;
  font-size: 16px;
  font-weight: 650;
}
.plan-card strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.03em;
}
.plan-card small {
  grid-column: 1;
  color: var(--muted);
  font-size: 12px;
}
.plan-card.on {
  box-shadow: inset 0 0 0 1.5px var(--text);
}
.plan-card.feat.on {
  background: var(--text);
  color: var(--on-ink);
  box-shadow: none;
}
.plan-card.feat.on small { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
html[data-theme="dark"] .plan-card.feat.on {
  background: #f5f5f7;
  color: #1d1d1f;
}
html[data-theme="dark"] .plan-card.feat.on small { color: rgba(0, 0, 0, 0.55); }
.plan-save {
  position: absolute;
  top: -7px;
  left: 14px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ok);
  color: #fff;
}
.pay-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.pay-sheet.on {
  opacity: 1;
  pointer-events: auto;
}
.pay-sheet[hidden] { display: none; }
.pay-sheet.on[hidden] { display: grid; }
.pay-sheet-card {
  width: min(280px, 86vw);
  padding: 28px 22px 24px;
  border-radius: 20px;
  background: var(--card-solid);
  text-align: center;
  box-shadow: var(--shadow);
  animation: cardIn 0.45s var(--spring) both;
}
.pay-sheet-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  margin: 14px 0 4px;
}
.pay-sheet-card small { color: var(--muted); }
.pay-spin {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2.5px solid var(--fill);
  border-top-color: var(--text);
  animation: spin 0.7s linear infinite;
}
.pay-spin.done {
  border-color: var(--ok);
  animation: hit 0.45s var(--spring);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Soft Plus — one card, value first */
.plus-soft {
  margin: 14px 0 18px;
  border-radius: 16px;
  background: var(--card-solid);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  overflow: hidden;
  animation: deal 0.45s var(--spring) both;
}
.plus-soft-bar {
  height: 3px;
  background: var(--fill);
}
.plus-soft-bar i {
  display: block;
  height: 100%;
  background: var(--text);
  transition: width 0.4s var(--ease);
}
.plus-soft-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.plus-soft-body b {
  display: block;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.plus-soft-body small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.btn.sm {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  border: 0;
  background: var(--text);
  color: var(--on-ink);
  cursor: pointer;
}
html[data-theme="dark"] .btn.sm {
  background: #f5f5f7;
  color: #1d1d1f;
}

.value-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin: 0 0 14px;
}
.value-strip span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--card-solid);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  text-align: center;
  animation: deal 0.4s var(--spring) both;
}
.value-strip span:nth-child(2) { animation-delay: 0.05s; }
.value-strip span:nth-child(3) { animation-delay: 0.1s; }
.value-strip b {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.value-strip small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.profile {
  padding-top: 4px;
  padding-bottom: 12px;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
.profile .onboard-paper { width: 100%; }

/* Press feedback: touch devices never keep :active reliably inside WebView, so JS adds .is-pressed too. */
button:active, .is-pressed { transition-duration: 0.08s; }
.btn:active, .btn.is-pressed,
.tile:active, .tile.is-pressed,
.course-card:active, .course-card.is-pressed,
.photo:active, .photo.is-pressed,
.choice:active, .choice.is-pressed,
.icon-btn:active, .icon-btn.is-pressed,
.studio-chip:active, .studio-chip.is-pressed,
.ege-chip:active, .ege-chip.is-pressed,
.theme-dot:active, .theme-dot.is-pressed,
.vowel:active, .vowel.is-pressed { transform: scale(0.955); }
.step-ctrl button:active, .step-ctrl button.is-pressed { transform: scale(0.86); background: var(--fill); }
.nav button:active, .nav button.is-pressed { transform: scale(0.88); }
.cell:active, .cell.is-pressed,
.lesson-card:active, .lesson-card.is-pressed,
.task-row:active, .task-row.is-pressed,
.big-action:active, .big-action.is-pressed { background-color: var(--press); }
.course-card, .photo { transition: transform 0.3s var(--spring); }

/* ---------- theory building blocks ---------- */
.theory ul, .theory ol { margin: 0 0 14px; padding-left: 22px; }
.theory li { margin: 4px 0; }
.theory ul.keys {
  list-style: none;
  padding: 12px 14px 12px 16px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
}
.theory ul.keys li { position: relative; padding-left: 16px; margin: 6px 0; font-size: 16px; }
.theory ul.keys li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tint);
}
.theory ol.steps { list-style: none; counter-reset: st; padding-left: 0; }
.theory ol.steps > li { counter-increment: st; position: relative; padding-left: 34px; margin: 8px 0; }
.theory ol.steps > li::before {
  content: counter(st);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--tint);
  background: rgba(10, 132, 255, 0.12);
}
.theory .why {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(175, 82, 222, 0.1), rgba(10, 132, 255, 0.06));
  box-shadow: inset 3px 0 0 #af52de;
  font-size: 16px;
}
.theory .why > b, .theory .ex > b {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #af52de;
}
html[data-theme="dark"] .theory .why > b { color: #d08cff; }
.theory .why p:last-child { margin-bottom: 0; }
.theory .ex {
  margin: 14px 0;
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  font-size: 16px;
}
.theory .ex > b { color: var(--tint); }
.theory .ex p.q { font-weight: 600; margin-bottom: 10px; }
.theory .ex ol.steps { margin-bottom: 8px; }
.theory .ex p.ans {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(52, 199, 89, 0.12);
  font-weight: 650;
}
.theory .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; font-size: 15px; line-height: 1.4; }
.theory .pair > div { padding: 12px; border-radius: 14px; background: rgba(52, 199, 89, 0.1); }
.theory .pair > div + div { background: rgba(255, 59, 48, 0.08); }
.theory .pair b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--ok); }
.theory .pair > div + div b { color: var(--bad); }
.theory .pair > div + div { text-decoration-color: var(--bad); }
.theory table.tbl {
  width: 100%;
  margin: 14px 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.35;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
}
.theory .tbl th, .theory .tbl td { padding: 8px 9px; text-align: left; vertical-align: top; border-bottom: 0.5px solid var(--line); }
.theory .tbl th { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--fill); }
.theory .tbl tr:last-child td { border-bottom: 0; }
.theory .tbl .katex { font-size: 1em; }
.theory details.check {
  margin: 10px 0;
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  overflow: hidden;
}
.theory details.check summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 44px 13px 16px;
  position: relative;
  font-weight: 600;
  font-size: 16px;
}
.theory details.check summary::-webkit-details-marker { display: none; }
.theory details.check summary::after {
  content: "?";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--tint);
  background: rgba(10, 132, 255, 0.12);
  transition: transform 0.3s var(--spring);
}
.theory details.check[open] summary::after { content: "✓"; color: var(--ok); background: rgba(52, 199, 89, 0.14); transform: rotate(360deg); }
.theory details.check > p, .theory details.check > div { margin: 0; padding: 0 16px 14px; font-size: 15px; color: var(--muted); }
.theory details.check[open] > p { animation: viewIn 0.3s var(--ease) both; }
.theory pre.code {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(28, 28, 30, 0.92);
  color: #f5f5f7;
  overflow-x: auto;
  font: 500 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
html[data-theme="dark"] .theory pre.code {
  background: #0e0e10;
  color: #f5f5f7;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
.theory pre.code code { font: inherit; background: none; padding: 0; color: inherit; }
.theory code { font: 500 0.88em ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: 1px 5px; border-radius: 6px; background: var(--fill); }
.theory .katex { font-size: 1.04em; }

/* ---------- subjects ---------- */
[data-course="inf"] { --cc: #5e5ce6; }
[data-course="bio"] { --cc: #30d158; }
.ege-chip.inf { background: rgba(94, 92, 230, 0.12); color: #5e5ce6; }
.ege-chip.bio { background: rgba(48, 209, 88, 0.14); color: #1f9e46; }
html[data-theme="dark"] .ege-chip.inf { color: #8e8cff; }
html[data-theme="dark"] .ege-chip.bio { color: #4fe07a; }
.subj-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; }
.subj-card {
  display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left;
  padding: 10px 12px; border: 0; border-radius: 16px; cursor: pointer; color: var(--text);
  background: var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge);
  transition: transform 0.2s var(--spring), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.subj-card:active { transform: scale(0.97); }
.subj-card .sj-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--fill); color: var(--muted); }
.subj-card .sj-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.subj-card .sj-txt { min-width: 0; display: grid; gap: 1px; }
.subj-card b { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
.subj-card small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.subj-card.on { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.subj-card.on .sj-ico { background: rgba(255, 255, 255, 0.16); color: var(--on-ink); }
html:not([data-theme="dark"]) .subj-card.on .sj-ico { background: rgba(255, 255, 255, 0.2); }
.subj-card.on small { color: var(--on-ink); opacity: 0.72; }
@media (max-width: 340px) { .subj-card small { display: none; } }
.course-grid.cols-3 .course-card { min-height: 128px; padding: 12px; }
.course-grid.cols-3 .course-card b { font-size: 15px; }
.cc-bar { display: block; height: 3px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.cc-bar i { display: block; height: 100%; border-radius: 3px; background: #fff; transition: width 0.6s var(--ease); }
html[data-theme="dark"] .cc-bar { background: rgba(255, 255, 255, 0.1); opacity: 1 !important; }
html[data-theme="dark"] .cc-bar i { background: var(--cc); }
.progress-line { display: flex; align-items: center; gap: 10px; margin: 0 4px 16px; }
.progress-line small { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { display: block; flex: 1; height: 6px; border-radius: 6px; background: var(--fill); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--tint), #5ac8fa); transition: width 0.6s var(--ease); }
.subj-progress .bar { margin-top: 8px; }
.subj-progress .bar i { background: var(--cc, var(--tint)); }
.lesson-meta .lm-course { color: var(--cc, var(--tint)); background: color-mix(in srgb, var(--cc, #0a84ff) 14%, transparent); }
.lesson-meta .lm-pos { margin-left: auto; font-variant-numeric: tabular-nums; }
.back-btn { margin-bottom: 2px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.pager-btn {
  text-align: left;
  border: 0;
  border-radius: 16px;
  padding: 11px 13px;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  cursor: pointer;
  min-width: 0;
  transition: transform 0.25s var(--spring);
}
.pager-btn.next { text-align: right; }
.pager-btn small { display: block; font-size: 12px; font-weight: 650; color: var(--tint); }
.pager-btn b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 590; line-height: 1.25; margin-top: 2px; }
.pager-btn:active, .pager-btn.is-pressed { transform: scale(0.97); }
#mark.done { color: var(--ok); }
.center { text-align: center; }

/* ---------- flame ---------- */
.flame { display: block; overflow: visible; }
.flame .f-out { fill: none; stroke: var(--faint); stroke-width: 1.7; stroke-linejoin: round; }
.flame .f-core { fill: none; stroke: none; }
.lit .flame .f-out, .flame-chip.lit .f-out, .badge.on .flame .f-out { fill: #ff8a00; stroke: #ff8a00; }
.lit .flame .f-core, .flame-chip.lit .f-core, .badge.on .flame .f-core { fill: #ffd27a; }
.flame path { transform-origin: 50% 92%; transform-box: fill-box; }
.lit .flame .f-out, .flame-chip.lit .f-out { animation: flick 1.8s ease-in-out infinite; }
.lit .flame .f-core { animation: flick 1s ease-in-out infinite reverse; }
@keyframes flick {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  30% { transform: scale(0.97, 1.04) skewX(-1.5deg); }
  60% { transform: scale(1.02, 0.98) skewX(1deg); }
}
.top-chips { display: flex; align-items: center; gap: 4px; }
.flame-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 0;
  cursor: pointer;
  background: var(--glass-strong);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge);
  padding: 5px 10px 5px 7px;
}
.flame-chip .flame { width: 16px; height: 16px; }
.flame-chip.lit .flame { filter: drop-shadow(0 0 4px rgba(255, 138, 0, 0.45)); }
.flame-chip b { font-size: 13px; color: var(--text); }

/* ---------- streak card (home) ---------- */
.streak-card {
  width: 100%;
  display: grid;
  gap: 12px;
  text-align: left;
  border: 0;
  cursor: pointer;
  color: var(--text);
  padding: 14px 14px 12px;
  margin: 0 0 10px;
  border-radius: 22px;
  background: var(--card);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  animation: deal 0.5s var(--ease) both;
  transition: transform 0.25s var(--spring);
  position: relative;
  overflow: hidden;
}
.streak-card.lit::before {
  content: "";
  position: absolute;
  left: -30px;
  top: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 149, 0, 0.18), transparent 68%);
  pointer-events: none;
}
.streak-card:active, .streak-card.is-pressed { transform: scale(0.985); }
.sc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-flame { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--fill); }
.streak-card.lit .sc-flame { background: rgba(255, 138, 0, 0.14); }
.sc-flame .flame { width: 26px; height: 26px; }
.sc-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sc-main > b { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.sc-main > small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.sc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sc-week .wk { display: grid; justify-items: center; gap: 4px; }
.sc-week .wk i { width: 100%; height: 8px; border-radius: 99px; background: var(--fill); }
.sc-week .wk.seen i { background: rgba(255, 138, 0, 0.28); }
.sc-week .wk.on i { background: #ff8a00; }
.sc-week .wk em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--faint); }
.sc-week .wk.now em { color: var(--text); font-weight: 700; }
.sc-goal { position: relative; flex: 0 0 auto; width: 48px; height: 48px; }
.sc-goal em { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; font-style: normal; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.sc-goal em i { font-style: normal; font-size: 9.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.sc-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 0.5px solid var(--line); padding-top: 10px; }
.sc-foot > span { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sc-foot > span + span { padding-left: 12px; border-left: 0.5px solid var(--line); }
.sc-foot b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-foot b i { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; }
.sc-foot small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exam-chip { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; background: var(--glass-strong); box-shadow: inset 0 0 0 0.5px var(--glass-edge); padding: 5px 10px 5px 8px; }
.exam-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.exam-chip span { font-size: 12px; font-weight: 600; }
.exam-chip b { font-size: 13px; color: var(--text); }
.goal-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.goal-ring circle { fill: none; stroke-width: 5; }
.goal-ring .track { stroke: var(--fill); }
.goal-ring .fill { stroke: #ff8a00; stroke-linecap: round; animation: ringIn 1s var(--ease) 0.15s forwards; }
.goal-ring .fill.full { stroke: var(--ok); }
.goal-ring.big circle { stroke-width: 7; }
@keyframes ringIn { to { stroke-dashoffset: var(--to); } }
.sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 22px; }
.sc-stats.wide { grid-template-columns: repeat(4, 1fr); }
.sc-stats > div {
  padding: 10px 10px 9px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  animation: deal 0.5s var(--ease) both;
}
.sc-stats b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sc-stats b i { font-style: normal; font-size: 13px; color: var(--muted); font-weight: 600; }
.sc-stats small { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; line-height: 1.25; }

/* ---------- stats page ---------- */
.stats-hero { display: grid; justify-items: center; padding: 6px 0 20px; position: relative; }
.stats-hero.lit::before {
  content: "";
  position: absolute;
  top: -10px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 149, 0, 0.24), transparent 66%);
  pointer-events: none;
}
.sh-flame .flame { width: 96px; height: 108px; }
.stats-hero.lit .sh-flame .flame { filter: drop-shadow(0 8px 26px rgba(255, 149, 0, 0.5)); }
.stats-hero > b { font-family: var(--font-display); font-size: 54px; font-weight: 600; line-height: 1; margin-top: 4px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stats-hero > small { font-size: 14px; color: var(--muted); margin-top: 4px; }
.today-box { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.today-ring { position: relative; width: 76px; height: 76px; flex: 0 0 auto; }
.today-ring em { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-style: normal; font-size: 20px; font-weight: 700; line-height: 1; }
.today-ring em i { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.today-nums { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.today-nums b { display: block; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.today-nums small { font-size: 12px; color: var(--muted); }
.heat-box { padding: 14px 14px 10px; }
.heat { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.heat > span { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 3px; }
.heat i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--fill); }
.heat i.h1, .heat-legend i.h1 { background: rgba(255, 149, 0, 0.3); }
.heat i.h2, .heat-legend i.h2 { background: rgba(255, 149, 0, 0.55); }
.heat i.h3, .heat-legend i.h3 { background: rgba(255, 122, 0, 0.8); }
.heat i.h4, .heat-legend i.h4 { background: #ff6a00; }
.heat i.fut { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.heat i.now { outline: 1.5px solid var(--text); outline-offset: 1px; }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 8px; }
.heat-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--fill); }
.heat-legend small { font-size: 10.5px; color: var(--muted); margin: 0 4px; }
.badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 22px; }
.badge {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  animation: deal 0.5s var(--ease) both;
}
.badge .flame { grid-row: span 2; width: 24px; height: 26px; }
.badge b { font-size: 14px; }
.badge small { font-size: 11px; color: var(--muted); }
.badge:not(.on) b { color: var(--muted); }
.badge.on { background: linear-gradient(150deg, rgba(255, 149, 0, 0.14), var(--card) 70%); }

/* ---------- quiz ---------- */
.quiz-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.quiz-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--fill); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff9500, #ffcc00); transition: width 0.5s var(--ease); }
.quiz-count { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.quiz-card {
  margin: 8px 0 12px;
  padding: 18px 18px 16px;
  border-radius: 24px;
  background: var(--card);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  animation: deal 0.45s var(--ease) both;
}
.quiz-topic { margin: 0 0 8px; font-size: 12px; font-weight: 650; color: var(--tint); }
.quiz-q { font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; }
.quiz-opts .choice, .lq-opts .choice { font-size: 16px; line-height: 1.35; animation: deal 0.4s var(--ease) both; }
.quiz-opts .choice:nth-child(2) { animation-delay: 0.04s; }
.quiz-opts .choice:nth-child(3) { animation-delay: 0.08s; }
.quiz-opts .choice:nth-child(4) { animation-delay: 0.12s; }
.choice.ok { background: rgba(52, 199, 89, 0.12); }
.choice.bad { background: rgba(255, 59, 48, 0.1); animation: shake 0.35s var(--ease); }
.choice:disabled { cursor: default; color: var(--text); opacity: 1; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.quiz-combo { display: flex; align-items: center; justify-content: center; gap: 6px; height: 26px; margin: 4px 0; opacity: 0; transition: opacity 0.3s; font-size: 13px; font-weight: 700; color: #ff9500; }
.quiz-combo.on { opacity: 1; }
.quiz-combo .flame { width: 16px; height: 18px; filter: none; }
.quiz-combo.pop { animation: pop 0.45s var(--spring); }
@keyframes pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: none; } }
.quiz-result { position: relative; width: 150px; height: 150px; margin: 10px auto 4px; }
.quiz-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.quiz-ring circle { fill: none; stroke-width: 10; }
.quiz-ring .track { stroke: var(--fill); }
.quiz-ring .fill { stroke: #ff9500; stroke-linecap: round; animation: ringIn 1.1s var(--ease) 0.1s forwards; }
.quiz-pct { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.quiz-pct b { font-family: var(--font-display); font-size: 44px; font-weight: 600; line-height: 1; }
.quiz-pct span { font-size: 13px; color: var(--muted); }
.lq { margin: 22px 0 10px; }
.lq-item {
  margin: 0 0 12px;
  padding: 14px 14px 6px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
}
.lq-q { display: flex; gap: 10px; margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.lq-q > span {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #ff9500;
  background: rgba(255, 149, 0, 0.14);
}
.lq-opts .choice { padding: 11px 13px; margin: 6px 0; font-weight: 500; }
.lq-why { margin: 6px 0 8px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.45; animation: viewIn 0.3s var(--ease) both; }
.lq-why.ok { background: rgba(52, 199, 89, 0.1); }
.lq-why.bad { background: rgba(255, 59, 48, 0.08); }
.lq-score { text-align: center; font-size: 13px; font-weight: 650; color: var(--muted); margin: 4px 0 0; }
.lq-score.ok { color: var(--ok); }

/* sections: hub, rules demos, lab */
.sec-note { margin: -4px 4px 10px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.stereo .mark-pill {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--fill);
  border-radius: 999px;
  padding: 4px 8px;
}
.stereo-hero-cell .solid-ico { width: 36px; height: 36px; margin-right: 4px; flex-shrink: 0; }
.stereo .cell.static { pointer-events: none; opacity: 0.92; }
.stereo-stage {
  margin: 8px 0 4px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper, #fff);
  border: 1px solid var(--line);
}
.stereo-stage .studio { margin: 0; }
.stereo-stage .studio-stage { min-height: 220px; }
.stereo-nav { display: grid; gap: 8px; margin-top: 12px; }
.stereo-play .deal-card { margin-top: 10px; }

.sec-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; }
.sec-hero > div {
  padding: 12px 10px;
  border-radius: 16px;
  text-align: center;
  background: var(--card);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
}
.sec-hero b { display: block; font-size: 24px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sec-hero b small { font-size: 14px; color: var(--faint); font-weight: 600; }
.sec-hero span { font-size: 12px; color: var(--muted); font-weight: 600; }
.solid-ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.solid-badge {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 12%, transparent);
}
.solid-badge[data-body="tetra"] { color: #ff9f0a; background: rgba(255, 159, 10, 0.13); }
.solid-badge[data-body="pyr"] { color: #af52de; background: rgba(175, 82, 222, 0.13); }
.solid-badge[data-body="prism"] { color: #30b0c7; background: rgba(48, 176, 199, 0.14); }
.sec-level.done .solid-badge { box-shadow: inset 0 0 0 1.5px var(--ok); }
.stars { display: inline-flex; gap: 1px; margin-left: auto; font-size: 14px; letter-spacing: 0; }
.stars i { font-style: normal; color: var(--faint); opacity: 0.55; }
.stars i.on { color: #ffb300; opacity: 1; }
.rnd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rnd-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--tint); }
.rnd-tile b { color: var(--text); }
.rnd-tile small { color: var(--muted); font-size: 12.5px; }

.sec-demo-wrap { margin: 14px 0; }
.sec-demo {
  height: 230px;
  border-radius: 18px;
  overflow: hidden;
  touch-action: none;
  background: var(--card-solid);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
}
.sec-demo-wrap figcaption { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.theory em { font-style: normal; font-weight: 650; }
.dot-k { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 2px; }
.dot-k.given { background: var(--tint); }
.dot-k.sec { background: var(--card-solid); box-shadow: inset 0 0 0 2.4px var(--tint); }
.dot-k.aux { background: #ff9f0a; }

.cell.static { cursor: default; pointer-events: none; }
.admin-box { margin-top: 18px; }
.lab { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.lab-top { display: flex; align-items: center; gap: 10px; }
.lab-title { min-width: 0; }
.lab-title small { display: block; font-size: 12px; font-weight: 650; color: var(--muted); }
.lab-title b { display: block; font-size: 18px; letter-spacing: -0.03em; line-height: 1.15; overflow-wrap: anywhere; }
.lab-q { font-size: 18px; font-weight: 700; color: var(--text); }
.lab-task {
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--card-solid);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
}
.lab-task b { display: block; font-size: 15px; }
.lab-task span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.lab-task i {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.lab-stage {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--card-solid);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
}
.lab-canvas { height: clamp(270px, calc(100dvh - 450px), 410px); touch-action: none; cursor: pointer; }
.lab-canvas canvas { display: block; }
.lab-hud {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.lab-hud .cut-progress span { height: 4px; background: var(--fill); }
.lab-hud .cut-progress span.done { background: var(--ok); }
.lab-hud > span { font-size: 12px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lab-rules span {
  padding: 6px 4px;
  border-radius: 12px;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
  background: var(--card-solid);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  transition: background-color 0.2s, color 0.2s, transform 0.25s var(--spring);
}
.lab-rules span b { display: block; font-size: 12.5px; font-weight: 680; color: var(--text); }
.lab-rules span.on b { color: var(--tint); }
.lab-rules span.on { color: var(--tint); background: color-mix(in srgb, var(--tint) 14%, var(--card-solid)); transform: scale(1.04); }
.lab-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lab-btn {
  border: 0;
  cursor: pointer;
  padding: 10px 4px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 620;
  color: var(--text);
  background: var(--card-solid);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  transition: transform 0.25s var(--spring);
}
.lab-btn[data-lab-act="hint"] { color: #c77700; }
html[data-theme="dark"] .lab-btn[data-lab-act="hint"] { color: #ffb340; }
.lab-sheet {
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--card-solid);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  border-left: 4px solid transparent;
  animation: viewIn 0.28s var(--ease) both;
}
.lab-sheet h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.025em; }
.lab-sheet p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.lab-sheet.ok { border-left-color: var(--tint); }
.lab-sheet.sel { border-left-color: var(--faint); }
.lab-sheet.hint { border-left-color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 10%, var(--card-solid)); }
.lab-sheet.bad { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--card-solid)); animation: shake 0.4s var(--ease) both; }
.lab-sheet.bad h3 { color: var(--bad); }
.lab-sheet.win { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--card-solid)); }
.lab-sheet.win p { margin-bottom: 12px; color: var(--text); }
.lab-sheet.win .win-meta { color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
.win-head { display: flex; flex-direction: column; gap: 4px; }
.win-head .stars { margin-left: 0; font-size: 22px; }
.win-head h3 { font-size: 20px; }

.view { animation: viewIn 0.4s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 720px) {
  .topbar { padding-top: 48px; }
  .app.notop .view { padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 719px) {
  body { background: var(--wash); }
  .desk { padding: 0; display: block; min-height: 100dvh; }
  .iphone, .iphone-bezel { width: 100%; height: 100dvh; border-radius: 0; padding: 0; background: none; box-shadow: none; }
  .island, .side-btn { display: none; }
  .iphone-screen { border-radius: 0; height: 100dvh; }
}

/* Mini App: Telegram already is the chrome. The iPhone mockup is only for desktop preview. */
html.in-tg, html.in-tg body {
  height: 100%;
  background: var(--wash);
}
html.in-tg .desk { padding: 0; display: block; min-height: 100%; height: 100%; }
html.in-tg .iphone, html.in-tg .iphone-bezel {
  width: 100%;
  height: 100%;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
html.in-tg .island, html.in-tg .side-btn { display: none; }
html.in-tg .iphone-screen { border-radius: 0; height: 100%; height: 100dvh; }
html.in-tg .topbar { padding-top: calc(var(--safe-top) + 10px); }
html.in-tg .app.notop .view { padding-top: calc(var(--safe-top) + 8px); }

.tg-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin: 0 0 14px;
  border-radius: 16px;
  background: var(--card-solid);
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
  min-width: 0;
}
.tg-card-hero {
  padding: 16px;
  margin: 0 0 12px;
  gap: 14px;
}
.tg-card-hero .tg-ava {
  width: 64px;
  height: 64px;
}
.tg-card-hero b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.tg-card-hero small { font-size: 13px; }
.tg-card .grow { min-width: 0; }
.tg-card .grow b,
.tg-card .grow small {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tg-ava {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--fill);
}
.tg-ava.fallback {
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--on-ink);
  background: var(--tint);
}
.tg-card b { display: block; font-size: 16px; }
.tg-card small { color: var(--muted); font-size: 13px; }
.tg-card.tg-empty { opacity: 0.92; }
.drawer-head .tg-ava, .drawer-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }

/* —— Play loop: petals, quests, combo HUD —— */
.quest-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 14px 14px 16px;
  border: 0;
  border-radius: 18px;
  background: var(--card);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  animation: deal 0.45s var(--spring) both;
}
.quest-strip:active { transform: scale(0.985); }
.qs-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--fill); color: var(--muted); }
.quest-strip.all .qs-ico { background: rgba(52, 199, 89, 0.14); color: var(--ok); }
.qs-ico svg, .qb-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qs-xp, .qb-xp { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; color: var(--text); }
.qs-xp { padding: 5px 9px 5px 6px; border-radius: 999px; background: var(--fill); }
.qs-xp svg, .qb-xp svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.qs-xp b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qb-xp svg { width: 18px; height: 18px; }
.qb-xp b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.qb-xp small { color: var(--muted); font-size: 12px; font-weight: 600; margin-left: 3px; }
.qs-main b em { font-style: normal; color: var(--muted); font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.qb-mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ok); display: grid; place-items: center; }
.qb-item.done .qb-mark { box-shadow: none; }
.qs-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.qs-main b { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; }
.qs-main small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qs-bars { display: flex; gap: 4px; margin-top: 2px; }
.qs-bars i {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--fill);
  position: relative;
  overflow: hidden;
}
.qs-bars i::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: var(--tint);
  border-radius: inherit;
  transition: width 0.35s var(--ease);
}
.qs-bars i.on { background: rgba(52, 199, 89, 0.35); }
.qs-bars i.on::after { width: 100%; background: var(--ok); }

.quest-board {
  margin: 0 0 18px;
  padding: 14px;
  border-radius: 20px;
  background: var(--card);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow);
}
.qb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--line);
}
.qb-combo { text-align: right; }
.qb-combo b {
  display: block;
  font-size: 22px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.qb-combo small { color: var(--muted); font-size: 11px; font-weight: 600; }
.qb-list { display: grid; gap: 8px; }
.qb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--fill);
}
.qb-item.done { background: rgba(52, 199, 89, 0.12); }
.qb-item b { display: block; font-size: 14px; font-weight: 650; }
.qb-item small { color: var(--muted); font-size: 12px; }
.qb-prog {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tint);
}
.qb-item.done .qb-prog { color: var(--ok); }

.drill-hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 10px;
}
.drill-hud > span {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 14px;
  background: var(--fill);
  text-align: center;
}
.drill-hud b {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.drill-hud small { font-size: 11px; font-weight: 600; color: var(--muted); }
.drill-hud .dh-combo.hot {
  background: rgba(255, 149, 0, 0.16);
}
.drill-hud .dh-combo.hot b { color: #c77700; }
html[data-theme="dark"] .drill-hud .dh-combo.hot b { color: #ffb340; }

.deal-card { position: relative; }
.float-gain {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translate(-50%, 0);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: #0a84ff;
  pointer-events: none;
  animation: floatGain 0.85s var(--spring) forwards;
  text-shadow: 0 2px 12px rgba(10, 132, 255, 0.35);
  z-index: 2;
}
html[data-theme="dark"] .float-gain { color: #64d2ff; }
@keyframes floatGain {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.85); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(1.05); }
}
.rule-xp {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(52, 199, 89, 0.16);
  color: #1f9e46;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .rule-xp { color: #4fe07a; }

.badge-mark {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--line);
  grid-row: span 2;
  align-self: center;
}
.badge.on .badge-mark {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2);
}
.badges.titles .badge { grid-template-columns: 14px 1fr; }

.game-tile { padding-left: 18px; }

/* Доступность: видимый фокус для клавиатуры и переключателей (в полях ввода свой фокус-ринг выше). */
:focus-visible { outline: 2px solid var(--tint, #0a84ff); outline-offset: 2px; }
.field:focus-visible { outline: none; }

.value-card {
  background: var(--card-solid);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 0.5px var(--card-edge);
}
.value-card > b { display: block; font-size: 17px; margin-bottom: 8px; }
.value-card ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.value-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.35; }
.value-card li span {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink, #1c1c1e); color: var(--bg, #fff);
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.value-card small { color: var(--muted, #6b6b70); font-size: 12px; }
.more-opts { margin-top: 12px; }
.more-opts > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted, #6b6b70);
  padding: 10px 0; list-style: none;
}
.more-opts > summary::-webkit-details-marker { display: none; }
.more-opts > summary::after { content: " ▾"; }
.more-opts[open] > summary::after { content: " ▴"; }

.start-card {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--ink); color: var(--bg); border: 0; border-radius: 18px;
  padding: 14px 16px; margin: 6px 0 14px; cursor: pointer; font: inherit;
}
.start-card b { display: block; font-size: 15px; }
.start-card small { display: block; opacity: 0.75; font-size: 12px; margin-top: 2px; }
.start-card .chev { opacity: 0.7; font-size: 20px; }

.exam-q table.tbl { border-collapse: collapse; margin: 8px 0; font-weight: 500; font-size: 14px; }
.exam-q table.tbl th, .exam-q table.tbl td { border: 1px solid var(--card-edge, rgba(0,0,0,.2)); padding: 5px 9px; text-align: center; }
.exam-q table.tbl th { background: var(--fill, rgba(0,0,0,.05)); }

/* —— Скидка по промокоду —— */
.plan-card .was { color: var(--faint); font-weight: 400; font-size: 0.78em; text-decoration: line-through; }

/* —— Админ-панель (мобильная раскладка) —— */
.adm { padding-bottom: 24px; }
.adm-tabs { position: sticky; top: 0; z-index: 3; margin: 6px 0 10px; }
.adm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
.adm-tile { background: var(--card); border-radius: 18px; padding: 14px 14px 12px; box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow); min-width: 0; }
.adm-tile b { display: block; font-size: 26px; font-weight: 640; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.adm-tile span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--text); }
.adm-tile small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); line-height: 1.3; }
.adm-bars { display: grid; gap: 8px; margin: 4px 0 6px; }
.adm-bar { display: grid; grid-template-columns: minmax(84px, 38%) 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; }
.adm-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-bar i { display: block; height: 10px; width: var(--w); border-radius: 6px; background: var(--tint); opacity: 0.85; }
.adm-bar em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin: 6px 0 10px; }
.adm-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.adm-col i { display: block; width: 100%; height: var(--h); border-radius: 5px 5px 2px 2px; background: var(--tint); opacity: 0.85; }
.adm-col small { font-size: 10px; color: var(--muted); margin-top: 3px; }
.adm-form { display: grid; gap: 10px; margin: 6px 0 12px; }
.adm-form .field { width: 100%; box-sizing: border-box; margin: 0; }
.adm-subj { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 14.5px; }
.adm-subj label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.adm-row { display: flex; gap: 10px; }
.adm-row .btn { flex: 1; }
.adm-promo { background: var(--card); border-radius: 18px; padding: 14px; margin: 0 0 10px; box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow); }
.adm-promo.off, .adm-promo.expired, .adm-promo.exhausted { opacity: 0.72; }
.adm-promo p { margin: 6px 0 0; }
.adm-promo-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.adm-promo code { font-size: 17px; font-weight: 640; letter-spacing: 0.04em; word-break: break-all; cursor: copy; }
.adm-sub { color: var(--muted); font-size: 13px; }
.adm-tag { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 16%, transparent); white-space: nowrap; }
.adm-tag.ok { background: color-mix(in srgb, var(--good, #2fa46b) 20%, transparent); }
.adm-tag.off, .adm-tag.expired, .adm-tag.exhausted { background: color-mix(in srgb, var(--bad, #d6453d) 16%, transparent); }
.adm-user { background: var(--card); border-radius: 18px; padding: 14px; margin: 4px 0 12px; box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--shadow); }
@media (min-width: 520px) { .adm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adm-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-tabs button { font-size: 13px; padding-inline: 4px; }
.adm-lab { display: grid; gap: 4px; }
.adm-lab > span, .adm-cap { font-size: 12.5px; color: var(--muted); }