/* Layout: one calm phone-width column on white. Each course owns one colour; lessons are a
   full-screen vertical feed, one idea per screen, with the picture, chart or diagram on top. */
:root {
    --bg: #ffffff;
    --soft: #f4f5f7;
    --surface: #ffffff;
    --ink: #18181b;
    --muted: #6b6b76;
    --line: #e9e9ee;
    --good: #2b8a3e;
    --bad: #d6336c;
    --font: "Figtree", -apple-system, "Segoe UI", sans-serif;
    --radius: 20px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f0f11;
        --soft: #1a1a1e;
        --surface: #17171a;
        --ink: #f4f4f5;
        --muted: #a1a1ab;
        --line: #2a2a30;
        --good: #51cf66;
        --bad: #ff8787;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #0f0f11;
    --soft: #1a1a1e;
    --surface: #17171a;
    --ink: #f4f4f5;
    --muted: #a1a1ab;
    --line: #2a2a30;
    --good: #51cf66;
    --bad: #ff8787;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font: 17px/1.5 var(--font); -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--c, #3b5bdb); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.02em; }

.app {
    max-width: 560px; margin: 0 auto;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    padding-block: 18px 110px;
}
.section-title { font-size: 20px; font-weight: 800; margin: 48px 0 18px; }

/* ---------- home ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; }
.streak { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--muted); }
.streak svg { width: 20px; height: 20px; }
.storage-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

.create { margin-top: 32px; }
.create h1 { font-size: clamp(30px, 8vw, 40px); line-height: 1.05; letter-spacing: -0.035em; }
.create h1 span { color: var(--muted); }
.ask { margin-top: 24px; display: flex; gap: 10px; background: var(--soft); border-radius: 18px; padding: 8px; }
.ask input { flex: 1; min-width: 0; border: 0; background: none; padding: 12px 14px; font-size: 17px; outline: none; }
.ask button { border: 0; border-radius: 12px; padding: 12px 20px; background: var(--ink); color: var(--bg); font-weight: 700; }
.ask button:disabled { opacity: .4; cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--muted); }
.chip:hover { color: var(--ink); border-color: var(--muted); }
.settings { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 22px; }
.seg { display: inline-flex; align-items: center; gap: 2px; background: var(--soft); border-radius: 10px; padding: 3px; }
.seg span { font-size: 11px; font-weight: 700; color: var(--muted); padding: 0 6px 0 8px; text-transform: uppercase; letter-spacing: .05em; }
.seg button { border: 0; background: none; border-radius: 8px; padding: 7px 12px; font-size: 14px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.unavailable { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--soft); color: var(--muted); font-size: 15px; }

.working { margin-top: 24px; background: var(--soft); border-radius: 18px; padding: 22px; display: grid; gap: 14px; }
.working p { margin: 0; }
.working .t { font-weight: 700; }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 30%; background: var(--c, var(--ink)); border-radius: 3px; animation: indet 1.4s ease-in-out infinite; }
.bar.det i { animation: none; transition: width .4s; }
@keyframes indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.link { border: 0; background: none; padding: 0; color: var(--muted); text-decoration: underline; font-size: 14px; justify-self: start; }
.error { color: var(--bad); font-size: 15px; }

.continue { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 0; }
.continue .cover { border-radius: 16px; }
.continue .t { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.continue .s { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }

.cover { background: var(--tint); border-radius: 18px; aspect-ratio: 1; display: grid; place-items: center; padding: 10%; max-width: 100%; }
.cover svg { width: 100%; height: auto; }
.library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
.tile { border: 0; background: none; padding: 0; text-align: left; display: grid; gap: 10px; min-width: 0; align-content: start; }
.tile .t { font-weight: 800; font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; }
.tile .s { font-size: 13px; color: var(--muted); }
.mini-meter { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.mini-meter i { display: block; height: 100%; background: var(--c); }

/* ---------- course ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 0; color: var(--muted); font-weight: 600; }
.course-head { display: grid; gap: 16px; margin: 10px 0 34px; }
.course-head .cover { aspect-ratio: 16 / 10; padding: 6% 22%; }
.course-head h1 { font-size: clamp(30px, 8vw, 38px); line-height: 1.05; letter-spacing: -0.035em; }
.course-head p { margin: 0; color: var(--muted); }
.course-head .gen-note { font-size: 13px; }
.lessons { display: grid; }
.lesson-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 16px; align-items: center; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; padding: 20px 0; }
.lesson-row:last-child { border-bottom: 1px solid var(--line); }
.lesson-row .num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: var(--tint); color: var(--c); }
.lesson-row.done .num { background: var(--c); color: #fff; }
.lesson-row .t { display: block; font-weight: 700; font-size: 17px; line-height: 1.25; }
.lesson-row .s { display: block; color: var(--muted); font-size: 14px; }
.lesson-row .go { font-weight: 700; font-size: 14px; color: var(--c); }
.course-foot { display: grid; gap: 14px; margin-top: 32px; }
.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; }
.danger { border: 0; border-radius: 10px; padding: 8px 14px; background: var(--bad); color: #fff; font-weight: 700; }
.plain { border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; background: none; font-weight: 600; }

/* ---------- lesson feed ---------- */
.player { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--bg); }
.player-bar {
    display: flex; align-items: center; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto;
    padding: calc(12px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 8px max(20px, env(safe-area-inset-left, 0px));
}
.close { border: 0; background: none; width: 32px; height: 32px; display: grid; place-items: center; flex: none; color: var(--muted); padding: 0; }
.progress { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--c); border-radius: 2px; transition: width .35s ease; }
.feed { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; width: 100%; max-width: 560px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
.card {
    min-height: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: 24px;
    padding: 16px max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px));
}
.card h2 { font-size: clamp(26px, 7vw, 32px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
.card-intro h2 { font-size: clamp(30px, 8.5vw, 40px); }
.card p { margin: 0; font-size: 18px; line-height: 1.55; }
.card .key { font-weight: 600; padding: 2px 0 2px 14px; border-left: 3px solid var(--c); }
.kicker { font-size: 13px !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.hint { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px !important; }
.hint svg { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-5px); } }

.sketch { background: var(--tint); border-radius: var(--radius); height: min(32dvh, 250px); display: flex; justify-content: center; padding: 14px; flex: none; }
.sketch svg { height: 100%; width: auto; max-width: 100%; filter: url(#rough); }
.visual { margin: 0; background: var(--soft); border-radius: var(--radius); padding: 16px 16px 12px; display: grid; gap: 8px; }
.visual.chart svg { width: 100%; height: auto; max-height: 30dvh; display: block; }
.v-title { font-size: 14px; font-weight: 700; color: var(--muted); }
.v-source { margin: 0 !important; font-size: 12px !important; color: var(--muted); }

.save { position: absolute; top: 12px; right: max(24px, env(safe-area-inset-right, 0px)); z-index: 1; border: 0; background: var(--surface); border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.save svg { width: 19px; height: 19px; }
.save.on { color: var(--c); }
.save.on svg path { fill: currentColor; }

.options { display: grid; gap: 14px; }
.option { text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 16px; padding: 16px 18px; font-size: 16px; line-height: 1.35; transition: border-color .2s, background .2s; }
.option:not(:disabled):hover { border-color: var(--muted); }
.option:disabled { cursor: default; }
.option.right { border-color: var(--good); background: color-mix(in oklab, var(--good) 10%, var(--surface)); }
.option.wrong { border-color: var(--bad); background: color-mix(in oklab, var(--bad) 9%, var(--surface)); }
.option.dim { opacity: .5; }
.verdict { font-weight: 800; font-size: 16px !important; }
.verdict.right { color: var(--good); }
.verdict.wrong { color: var(--bad); }
.explain { font-size: 16px !important; color: var(--muted); }

textarea { width: 100%; min-height: 140px; resize: vertical; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; font-size: 17px; line-height: 1.5; background: var(--surface); }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 17px; line-height: 1.4; }
.points li::before {
    content: ""; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
    background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.primary { border: 0; border-radius: 14px; padding: 16px 20px; background: var(--c, var(--ink)); color: #fff; font-weight: 800; font-size: 17px; width: 100%; }
.secondary { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 20px; background: none; font-weight: 700; font-size: 16px; width: 100%; }

.status { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; text-align: center; padding: 24px; max-width: 560px; margin: 0 auto; }
.status .cover { width: 170px; }
.status h2 { font-size: 30px; letter-spacing: -0.03em; }
.status p { color: var(--muted); margin: 0; }
.status .bar { width: 220px; }
.status .actions { display: grid; gap: 14px; width: 100%; margin-top: 18px; }
.stats { display: flex; gap: 28px; justify-content: center; }
.stat b { display: block; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--muted); }

/* ---------- review + saved ---------- */
.page-title { font-size: 32px; letter-spacing: -0.035em; margin: 8px 0 6px; }
.page-sub { color: var(--muted); margin: 0 0 30px; }
.empty { background: var(--soft); border-radius: var(--radius); padding: 26px 20px; text-align: center; color: var(--muted); }
.empty .cover { width: 130px; margin: 0 auto 10px; background: none; }
.saved-list { display: grid; }
.saved-item { border-top: 1px solid var(--line); padding: 20px 0; display: grid; gap: 6px; }
.saved-item .from { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.saved-item h3 { font-size: 18px; }
.saved-item p { margin: 0; color: var(--muted); font-size: 15px; }
.saved-item .link { margin-top: 4px; }

/* ---------- nav ---------- */
.nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: color-mix(in oklab, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.nav div { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.nav button { border: 0; background: none; display: grid; justify-items: center; gap: 2px; padding: 6px; color: var(--muted); font-size: 12px; font-weight: 600; position: relative; }
.nav button svg { width: 24px; height: 24px; }
.nav button[aria-current="page"] { color: var(--ink); }
.badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; padding: 0 5px; }

/* ---------- diagrams ---------- */
.v-grid { stroke: var(--line); stroke-width: 1; }
.v-axis { stroke: var(--muted); stroke-width: 1.5; }
.v-bar { fill: color-mix(in oklab, var(--c) 40%, var(--soft)); }
.v-bar-hi { fill: var(--c); }
.v-val { fill: var(--ink); font: 700 12px var(--font); }
.v-lab { fill: var(--muted); font: 500 11px var(--font); }
.v-lab-strong { fill: var(--ink); font: 700 12px var(--font); }
.v-tick { fill: var(--muted); font: 500 10.5px var(--font); }
.v-line { fill: none; stroke: var(--c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.v-line-2 { stroke: var(--muted); stroke-dasharray: 5 5; }
.v-area { fill: var(--c); opacity: .12; }
.v-dot { fill: var(--c); } .v-dot-2 { fill: var(--muted); }
.v-key { fill: var(--c); } .v-key-2 { fill: var(--muted); }
.v-arc { fill: none; stroke: var(--muted); stroke-width: 2; }
.v-arrowhead { fill: var(--muted); }
.v-node { fill: var(--surface); stroke: var(--c); stroke-width: 2; }
.v-node-hi { fill: var(--c); }
.v-node-t { fill: var(--ink); font: 600 10px var(--font); }
.v-node-t-hi { fill: #fff; font: 700 10px var(--font); }
.v-venn-a { fill: var(--c); opacity: .28; }
.v-venn-b { fill: var(--ink); opacity: .12; }

.v-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: step; }
.v-flow li { position: relative; background: var(--surface); border-radius: 12px; padding: 10px 14px 10px 46px; font-weight: 600; font-size: 15px; line-height: 1.3; counter-increment: step; }
.v-flow li::before { content: counter(step); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.v-flow li + li::after { content: ""; position: absolute; left: 23px; top: -16px; width: 2px; height: 14px; background: var(--c); opacity: .4; }
.v-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v-compare > div { background: var(--surface); border-radius: 12px; padding: 12px; min-width: 0; }
.v-compare > div.hi { box-shadow: inset 0 0 0 2px var(--c); }
.v-compare b { display: block; font-size: 15px; margin-bottom: 6px; }
.v-compare ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.35; display: grid; gap: 4px; }
.v-matrix { display: grid; gap: 6px; }
.v-matrix .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.v-matrix .grid div { background: var(--surface); border-radius: 10px; padding: 14px 10px; text-align: center; font-weight: 600; font-size: 14px; line-height: 1.25; }
.v-matrix .grid div.hi { background: var(--c); color: #fff; }
.v-matrix .ax { font-size: 12px; color: var(--muted); font-weight: 600; }
.v-matrix .ax-x { text-align: center; }
.v-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v-timeline li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.35; }
.v-timeline b { color: var(--c); font-size: 14px; }
.v-pyramid { display: grid; justify-items: center; gap: 5px; }
.v-pyramid div { background: color-mix(in oklab, var(--c) 30%, var(--surface)); border-radius: 8px; padding: 8px 6px; text-align: center; font-weight: 600; font-size: 14px; line-height: 1.2; }
.v-pyramid div:first-child { background: var(--c); color: #fff; }
.v-equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 12px 0; }
.v-equation .term { background: var(--surface); border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: 16px; }
.v-equation .term:first-child { background: var(--c); color: #fff; }
.v-equation .op { font-weight: 800; font-size: 22px; color: var(--muted); }
.v-stat { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 8px 0; }
.v-stat b { font-size: clamp(48px, 15vw, 72px); line-height: 1; letter-spacing: -0.04em; color: var(--c); }
.v-stat span { font-size: 15px; font-weight: 600; max-width: 30ch; }

/* ---------- motif sketches ---------- */
.cover svg, .sketch svg { display: block; overflow: visible; }
.f-c { fill: var(--c); } .f-k { fill: var(--ink); } .f-t { fill: color-mix(in oklab, var(--c) 22%, transparent); } .f-p { fill: var(--surface); }
.s-c { stroke: var(--c); } .s-k { stroke: var(--ink); } .s-p { stroke: var(--surface); }
.float { animation: float 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.spin { animation: spin 12s linear infinite; transform-box: fill-box; transform-origin: center; }
.tick { animation: spin 6s steps(12) infinite; transform-box: view-box; transform-origin: 100px 70px; }
.pulse { animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.drop { animation: drop 2.2s ease-in infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.05); } }
@keyframes drop { 0% { transform: translateY(-12px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .float, .spin, .tick, .pulse, .drop, .hint svg, .bar i { animation: none; }
}

/* ---------- ask Claude about a card ---------- */
.deeper { display: grid; gap: 12px; }
.deeper-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.deeper-actions button { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.deeper-actions button:hover { color: var(--ink); border-color: var(--muted); }
.deeper-ask { display: flex; gap: 10px; background: var(--soft); border-radius: 14px; padding: 6px; }
.deeper-ask input { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 10px; outline: none; font-size: 16px; }
.deeper-ask button { border: 0; border-radius: 10px; padding: 8px 14px; background: var(--c); color: #fff; font-weight: 700; }
.deeper-answer { background: var(--tint); border-radius: 14px; padding: 14px 16px; font-size: 16px; line-height: 1.5; white-space: pre-wrap; }

/* ---------- explore ---------- */
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.area { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 12px; border: 0; border-radius: 18px; background: var(--tint); padding: 10px 14px 10px 10px; text-align: left; min-width: 0; }
.area .cover { background: var(--surface); border-radius: 14px; padding: 8px; }
.area .t { font-weight: 800; font-size: 15px; line-height: 1.2; letter-spacing: -0.01em; }
.area-head .cover { aspect-ratio: 16 / 9; }
.subtopics { display: grid; margin-top: 28px; }
.subtopic { border-top: 1px solid var(--line); }
.subtopic:last-child { border-bottom: 1px solid var(--line); }
.sub-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; background: none; padding: 20px 0; text-align: left; font-weight: 700; font-size: 17px; }
.sub-head .chev { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--c); font-size: 20px; flex: none; }
.sub-body { display: grid; gap: 14px; padding: 0 0 24px; }
.label-sm { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ideas { display: grid; gap: 10px; }
.idea { text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 14px 16px; font-weight: 600; font-size: 15px; line-height: 1.3; }
.idea:hover { border-color: var(--c); }
.compact .sketch { height: min(22dvh, 170px); }
.compact .visual { padding: 12px 14px 10px; }
.compact .visual.chart svg { max-height: 22dvh; }

/* ---------- account ---------- */
.top-right { display: flex; align-items: center; gap: 14px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft); font-weight: 800; color: var(--ink); }
.auth { display: grid; gap: 14px; padding-top: 40px; }
.auth h1 { font-size: 32px; letter-spacing: -0.035em; margin-top: 8px; }
.auth-cover { width: 150px; margin-top: 18px; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.auth-form input, .confirm-delete input { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; font-size: 17px; background: var(--surface); color: var(--ink); }
.auth .link { justify-self: center; margin-top: 6px; }
.limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.limits div { background: var(--soft); border-radius: 16px; padding: 14px; display: grid; gap: 2px; }
.limits b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.limits span { font-size: 13px; color: var(--muted); }
.note { color: var(--muted); font-size: 15px; margin: 0; }
.account-actions { display: grid; gap: 18px; margin-top: 36px; }
.confirm-delete { display: grid; gap: 12px; }
.confirm-delete p { margin: 0; }

.import { display: grid; gap: 12px; margin-top: 14px; }
.file-pick { text-align: center; cursor: pointer; }
.import details { display: grid; gap: 10px; }
.import summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.import textarea { min-height: 100px; margin: 10px 0; }

.added { margin: 0; justify-self: start; background: color-mix(in oklab, var(--good) 14%, var(--surface)); color: var(--good); font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 999px; }

.handoff { margin-top: 14px; display: block; text-align: center; text-decoration: none; }

:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
[hidden] { display: none !important; }