* { box-sizing: border-box; }
:root {
    color-scheme: light;
    --paper: #f3f6fb;
    --surface: #ffffff;
    --muted: #e8edf5;
    --ink: #17243c;
    --ink-soft: #58657a;
    --line: #d9e0ea;
    --cobalt: #3159d5;
    --coral: #f06449;
    --mint: #21836e;
    --danger: #b83b3b;
    --midnight: #17243c;
    --on-midnight: #ffffff;
    --display: "Avenir Next", "Segoe UI", sans-serif;
    --body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --data: "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
    :root { color-scheme: dark; --paper:#0e1522; --surface:#151f30; --muted:#202d40; --ink:#f4f7fb; --ink-soft:#b8c2d1; --line:#2a394e; --cobalt:#7394ff; --coral:#ff8068; --mint:#57bea7; --danger:#ff8a8a; --midnight:#202d40; --on-midnight:#f4f7fb; }
}
html { min-height: 100%; background: var(--paper); }
body {
    min-height: 100vh;
    margin: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--cobalt) 44%, transparent); outline-offset: 3px; }
[hidden] { display: none !important; }
.app-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: 9px max(18px, env(safe-area-inset-right)) 9px max(18px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 93%, transparent);
    backdrop-filter: blur(18px);
}
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px 13px 13px 4px; background:var(--ink); color:var(--surface); font-family:var(--data); font-size:11px; font-weight:900; }
.brand strong, .brand small { display:block; }
.brand strong { font-family:var(--display); font-size:15px; letter-spacing:-.025em; }
.brand small { margin-top:1px; color:var(--ink-soft); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.app-actions { display:flex; align-items:center; gap:9px; }
.header-unpair, .header-shelves { padding:8px 4px; font-size:12px; }
.icon-button, .close-button { display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font-size:25px; }
.sync-chip { display:flex; align-items:center; gap:7px; color:var(--ink-soft); font-size:10px; font-weight:800; }
.sync-chip i { width:7px; height:7px; border-radius:50%; background:var(--mint); }
.sync-chip.is-offline i, .sync-chip.is-error i { background:var(--coral); }
.shell { width:min(920px, 100%); margin:0 auto; padding:clamp(24px, 6vw, 54px) max(18px, env(safe-area-inset-right)) 100px max(18px, env(safe-area-inset-left)); }
.eyebrow { margin:0 0 10px; color:var(--cobalt); font-family:var(--data); font-size:10px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
h1, h2, h3, p { overflow-wrap:anywhere; }
h1, h2, h3 { font-family:var(--display); letter-spacing:-.04em; }
h1 { margin:0; font-size:clamp(35px, 10vw, 64px); line-height:1.03; }
.lead { max-width:660px; margin:18px 0 0; color:var(--ink-soft); font-size:16px; line-height:1.65; }
.install-card, .pair-screen { max-width:760px; margin:3vh auto 0; padding:clamp(28px, 7vw, 60px); border:1px solid var(--line); border-radius:30px 30px 30px 9px; background:var(--surface); box-shadow:0 24px 70px rgba(23,36,60,.09); }
.install-steps { display:grid; gap:10px; margin:34px 0; padding:0; list-style:none; }
.install-steps li { display:grid; grid-template-columns:38px 1fr; gap:13px; align-items:center; padding:13px; border-top:1px solid var(--line); }
.install-steps li > span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--cobalt); color:#fff; font-family:var(--data); font-size:11px; font-weight:900; }
.install-steps p { margin:0; line-height:1.5; }
.privacy-note, .microcopy, .policy-note { color:var(--ink-soft); font-size:12px; line-height:1.55; }
.pair-intro { max-width:670px; }
.handoff-rail { display:flex; align-items:center; margin:34px 0; padding:18px; border:1px solid var(--line); border-radius:16px 16px 16px 5px; background:var(--paper); overflow-x:auto; }
.handoff-rail span { flex:none; color:var(--ink-soft); font-size:11px; font-weight:800; white-space:nowrap; }
.handoff-rail b { margin-right:5px; color:var(--cobalt); font-family:var(--data); }
.handoff-rail i { min-width:26px; flex:1; height:1px; margin:0 10px; background:var(--line); }
.pair-actions, .lesson-actions, .stacked-actions { display:flex; gap:10px; }
.primary-button, .secondary-button, .text-button, .lesson-button, .playlist-button {
    display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 19px; border-radius:13px 13px 13px 4px; font-weight:850; text-decoration:none; cursor:pointer;
}
.primary-button { border:1px solid var(--cobalt); background:var(--cobalt); color:#fff; box-shadow:0 12px 28px color-mix(in srgb, var(--cobalt) 22%, transparent); }
.secondary-button { border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.text-button { border:0; background:transparent; color:var(--ink-soft); }
.full-button { width:100%; }
.desk-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.desk-heading h1 { font-size:clamp(36px, 8vw, 58px); }
.desk-heading > p { max-width:250px; margin:0; color:var(--ink-soft); font-family:var(--data); font-size:11px; line-height:1.5; text-align:right; }
.premium-lane { display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:end; margin-bottom:24px; padding:24px; border-radius:22px 22px 22px 7px; background:var(--midnight); color:var(--on-midnight); }
.premium-lane h2 { margin:13px 0 0; font-size:clamp(21px, 5vw, 32px); line-height:1.12; }
.premium-lane p { margin:0; color:#c3cedf; font-size:12px; line-height:1.55; }
.youtube-badge { display:inline-block; padding:6px 9px; border-radius:7px; background:var(--coral); color:#fff; font-family:var(--data); font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.course-list { display:grid; gap:30px; }
.category-section { display:grid; gap:12px; }
.category-section-heading { display:grid; grid-template-columns:auto auto 1fr; align-items:baseline; gap:9px; }
.category-section-heading::after { content:""; grid-column:3; grid-row:1; height:1px; margin-left:9px; background:var(--line); }
.category-section-heading h2 { margin:0; font-size:18px; letter-spacing:-.025em; }
.category-section-order, .category-section-count { color:var(--ink-soft); font-family:var(--data); font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.category-section-count { grid-column:3; grid-row:1; justify-self:end; z-index:1; padding-left:9px; background:var(--paper); }
.category-course-list { display:grid; gap:16px; }
.course-card { overflow:hidden; border:1px solid var(--line); border-radius:22px 22px 22px 7px; background:var(--surface); box-shadow:0 14px 38px rgba(23,36,60,.06); }
.course-head { display:grid; grid-template-columns:110px minmax(0,1fr); gap:18px; padding:15px; }
.course-cover { position:relative; min-height:108px; overflow:hidden; border-radius:14px 14px 14px 5px; background:var(--muted); }
.course-cover img { width:100%; height:100%; object-fit:cover; }
.course-percent { position:absolute; right:7px; bottom:7px; padding:4px 7px; border-radius:7px; background:var(--ink); color:#fff; font-family:var(--data); font-size:11px; font-weight:900; }
.course-copy { min-width:0; }
.course-copy h2 { margin:2px 0 9px; font-size:clamp(19px,5vw,28px); line-height:1.13; }
.course-meta { margin:0; color:var(--ink-soft); font-family:var(--data); font-size:10px; line-height:1.5; }
.progress-track, .lesson-track { height:7px; margin:14px 0; overflow:hidden; border-radius:99px; background:var(--muted); }
.progress-track span, .lesson-track span { display:block; height:100%; background:var(--cobalt); }
.course-actions { display:flex; flex-wrap:wrap; gap:9px; }
.course-actions .primary-button, .playlist-button { min-height:42px; padding:0 13px; font-size:12px; }
.playlist-button { border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.category-course-button { cursor:pointer; }
.lesson-disclosure { border-top:1px solid var(--line); }
.lesson-disclosure > summary { padding:14px 18px; color:var(--ink-soft); font-size:12px; font-weight:800; cursor:pointer; list-style:none; }
.lesson-disclosure > summary::-webkit-details-marker { display:none; }
.lesson-disclosure > summary::after { content:"＋"; float:right; color:var(--cobalt); }
.lesson-disclosure[open] > summary::after { content:"−"; }
.lesson-list { border-top:1px solid var(--line); }
.lesson-row { display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding:15px 18px; border-bottom:1px solid var(--line); }
.lesson-row:last-child { border-bottom:0; }
.lesson-index { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--muted); color:var(--ink-soft); font-family:var(--data); font-size:10px; }
.lesson-main { min-width:0; }
.lesson-main h3 { margin:1px 0 5px; font-size:14px; line-height:1.3; letter-spacing:-.02em; }
.lesson-meta { margin:0; color:var(--ink-soft); font-family:var(--data); font-size:9px; }
.lesson-track { height:4px; margin:8px 0 10px; }
.lesson-actions { flex-wrap:wrap; }
.lesson-button { min-height:35px; padding:0 10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:10px; }
.lesson-button.is-primary { border-color:var(--cobalt); background:var(--cobalt); color:#fff; }
.lesson-button.is-download { border-color:color-mix(in srgb,var(--mint) 42%,var(--line)); color:var(--mint); }
.empty-library { padding:50px 24px; border:1px dashed var(--line); border-radius:20px; text-align:center; }
.empty-library h2 { margin:0 auto 24px; max-width:450px; }
dialog.sheet { width:min(680px, calc(100% - 20px)); max-height:calc(100dvh - 24px - env(safe-area-inset-top)); margin:auto auto max(10px, env(safe-area-inset-bottom)); padding:0; overflow:auto; border:1px solid var(--line); border-radius:24px 24px 15px 15px; background:var(--surface); color:var(--ink); box-shadow:0 28px 90px rgba(7,14,27,.38); }
dialog.sheet::backdrop { background:rgba(7,14,27,.62); backdrop-filter:blur(4px); }
.sheet > form, .sheet:not(:has(> form)) { padding:24px; }
.sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.sheet-head h2 { margin:0; font-size:27px; line-height:1.08; }
.close-button { flex:none; width:38px; height:38px; font-size:23px; }
.sheet label { display:block; margin:18px 0 7px; font-size:11px; font-weight:850; }
.sheet input:not([type="range"]) { width:100%; min-height:52px; padding:0 14px; border:1px solid var(--line); border-radius:12px 12px 12px 4px; background:var(--paper); color:var(--ink); outline:0; }
.code-input { font-family:var(--data) !important; font-size:22px !important; letter-spacing:.16em; text-transform:uppercase; }
.error-copy { min-height:18px; margin:9px 0; color:var(--danger); font-size:11px; font-weight:800; }
.category-manager-list { display:grid; gap:9px; margin-top:18px; }
.category-manager-row { display:grid; grid-template-columns:28px minmax(0,1fr); gap:7px 9px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:13px 13px 13px 4px; background:var(--paper); }
.category-manager-order, .category-manager-count { color:var(--ink-soft); font-family:var(--data); font-size:9px; }
.category-manager-row input { min-width:0; min-height:42px !important; padding:0 10px !important; background:var(--surface) !important; }
.category-manager-count, .category-manager-actions { grid-column:2; }
.category-manager-actions { display:flex; flex-wrap:wrap; gap:6px; }
.category-manager-actions button { min-height:34px; padding:0 9px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink-soft); }
.category-manager-actions button:disabled { opacity:.35; }
.category-manager-actions .is-danger { color:var(--danger); }
.category-manager-empty { padding:24px; border:1px dashed var(--line); border-radius:13px; text-align:center; }
.scanner-frame { position:relative; aspect-ratio:1; max-height:58vh; overflow:hidden; border-radius:18px 18px 18px 6px; background:#080c14; }
.scanner-frame video { width:100%; height:100%; object-fit:cover; }
.scanner-frame span { position:absolute; inset:13%; border:3px solid var(--coral); border-radius:18px; box-shadow:0 0 0 999px rgba(7,14,27,.42); }
.checkin-sheet > form { padding-bottom:max(26px, env(safe-area-inset-bottom)); }
.checkin-sheet form > p { color:var(--ink-soft); line-height:1.55; }
.time-readout { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:25px 0 10px; }
.time-readout span, .time-readout label { margin:0; color:var(--ink-soft); font-size:12px; font-weight:800; }
.time-readout input { width:132px !important; min-height:44px !important; font-family:var(--data) !important; font-size:19px !important; font-weight:900; text-align:center; }
.time-slider { width:100%; accent-color:var(--coral); }
.range-labels { display:flex; justify-content:space-between; color:var(--ink-soft); font-family:var(--data); font-size:9px; }
.stacked-actions { flex-direction:column; margin-top:22px; }
.automatic-sheet { width:min(800px, calc(100% - 20px)) !important; }
.player-frame { aspect-ratio:16/9; overflow:hidden; border-radius:15px 15px 15px 5px; background:#080c14; }
.automatic-sheet > .player-frame { display:block; width:100%; border:0; }
.player-frame iframe { width:100%; height:100%; }
.policy-note { padding:13px; border-left:3px solid var(--coral); background:var(--paper); }
.toast { position:fixed; z-index:50; right:max(16px, env(safe-area-inset-right)); bottom:max(18px, env(safe-area-inset-bottom)); left:max(16px, env(safe-area-inset-left)); padding:13px 16px; border-radius:12px; background:var(--ink); color:var(--surface); font-size:12px; font-weight:800; text-align:center; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .18s ease, transform .18s ease; }
.toast.is-visible { opacity:1; transform:none; }
@media (max-width:640px) {
    .shell { padding-top:24px; }
    .pair-actions, .desk-heading, .premium-lane { flex-direction:column; }
    .pair-actions { display:flex; }
    .pair-actions > * { width:100%; }
    .desk-heading { display:flex; align-items:flex-start; }
    .desk-heading > p { text-align:left; }
    .premium-lane { display:flex; align-items:flex-start; }
    .course-head { grid-template-columns:86px minmax(0,1fr); gap:13px; }
    .course-cover { min-height:88px; }
    .course-actions .primary-button { flex:1 1 100%; }
    .lesson-actions .lesson-button { flex:1 1 auto; }
}
@media (orientation:landscape) and (max-height:520px) {
    dialog.sheet { width:min(900px, calc(100% - 20px)); max-height:calc(100dvh - 12px); }
    .scanner-frame { max-height:62vh; aspect-ratio:16/9; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }