/* ==========================================================================
   SureShotFX Learn — the only stylesheet, for the customer and admin sides.

   1. Tokens        colours, type scale, spacing, radii (change things here)
   2. Base          reset, typography, links, focus
   3. Layout        topbar, page container, footer, grid helpers
   4. Components    buttons, fields, alerts, badges, cards, progress, tables
   5. Auth          sign-in / reset screens
   6. Customer      dashboard, course cards, player, lesson list
   7. Admin         stats, toolbars, forms, lesson ordering
   8. Utilities

   Type follows the browser default: 1rem = 16px body copy, nothing below
   .75rem, inputs at 1rem (also stops iOS zooming on focus).
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root{
  /* brand — sureshotfx.com palette */
  --brand:#00F595;
  --brand-ink:#000000;          /* text on brand */
  --brand-soft:rgba(0,245,149,.12);

  /* surfaces (dark is the default) */
  --bg:#000000;
  --surface:#00140B;
  --surface-2:#011D10;
  --surface-3:#002313;
  --border:#0B2A1C;
  --border-strong:rgba(0,245,149,.37);
  --overlay:rgba(0,0,0,.6);

  /* text */
  --text:#FFFFFF;
  --text-2:#CFCFCF;
  --text-3:#8F8F8F;
  --accent:#00F595;             /* links, highlights */

  /* status */
  --ok-bg:rgba(0,245,149,.10);  --ok-border:rgba(0,245,149,.35);  --ok-text:#7DFFC7;
  --err-bg:rgba(220,80,70,.12); --err-border:rgba(220,80,70,.40); --err-text:#F2A49B;
  --warn:#F5C542;

  /* form controls stay white, as on sureshotfx.com */
  --input-bg:#FFFFFF;
  --input-text:#0A0A0A;
  --input-border:#E5E5E5;
  --input-placeholder:#8F8F8F;

  /* type */
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;
  --fs-xs:.75rem;     /* 12px — badges only */
  --fs-sm:.875rem;    /* 14px — labels, meta, table cells */
  --fs-base:1rem;     /* 16px — body, inputs, buttons */
  --fs-md:1.125rem;   /* 18px */
  --fs-lg:1.25rem;    /* 20px — h3 */
  --fs-xl:1.5rem;     /* 24px — h2 */
  --fs-2xl:2rem;      /* 32px — h1 */
  --fs-3xl:2.5rem;    /* 40px — sign-in heading */
  --lh:1.5;
  --lh-tight:1.2;

  /* spacing */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:2.5rem; --sp-8:3rem;

  /* shape */
  --radius-sm:6px;
  --radius:8px;
  --radius-lg:14px;
  --shadow:0 24px 60px -30px rgba(0,0,0,.95);

  /* layout */
  --bar:64px;
  --container:1200px;
  --gutter:clamp(1rem,3vw,2rem);
}

:root[data-theme="light"]{
  --bg:#F3F6F4;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#E8F3ED;
  --border:rgba(0,35,19,.12);
  --border-strong:rgba(0,138,82,.35);
  --overlay:rgba(0,20,11,.35);
  --text:#0A0A0A;
  --text-2:#454545;
  --text-3:#6B6B6B;
  --accent:#008A52;
  --brand-soft:rgba(0,138,82,.10);
  --ok-bg:rgba(0,138,82,.08); --ok-border:rgba(0,138,82,.35); --ok-text:#006B40;
  --err-bg:rgba(200,60,50,.08); --err-border:rgba(200,60,50,.35); --err-text:#9A2E22;
  --input-border:rgba(0,35,19,.2);
  --shadow:0 20px 50px -34px rgba(0,35,19,.45);
}

/* 2. Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-base);
  line-height:var(--lh);font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0 0 var(--sp-3);line-height:var(--lh-tight);font-weight:700;letter-spacing:-.01em}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg);font-weight:600}
h4{font-size:var(--fs-base);font-weight:600}
p{margin:0 0 var(--sp-4)}
a{color:var(--accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img,video,iframe{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
code{font-family:var(--mono);font-size:.9em}
hr{border:0;border-top:1px solid var(--border);margin:var(--sp-6) 0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
[hidden],.is-hidden{display:none!important}

/* 3. Layout --------------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:40;height:var(--bar);display:flex;align-items:center;gap:var(--sp-4);
  padding:0 var(--gutter);background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.topbar-brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;flex:none}
.topbar-brand .brandlogo img{height:22px}
.topnav{display:flex;gap:var(--sp-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.topnav a{padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);color:var(--text-2);text-decoration:none;
  font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.topnav a:hover{color:var(--text);background:var(--surface-2)}
.topnav a.is-on{color:var(--text);background:var(--surface-3)}
.topbar-tools{display:flex;align-items:center;gap:var(--sp-1);flex:none}
.topbar-who{font-size:var(--fs-sm);color:var(--text-3);margin-right:var(--sp-2);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.page{width:100%;max-width:var(--container);margin:0 auto;padding:var(--sp-6) var(--gutter) var(--sp-8);flex:1}
.page--narrow{max-width:760px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.page-head h1{margin:0}
.page-head p{margin:var(--sp-1) 0 0;color:var(--text-2)}
.section{margin-top:var(--sp-7)}
.section > h2{margin-bottom:var(--sp-4)}
.crumbs{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--sp-3)}
.crumbs a{color:var(--text-2);text-decoration:none}
.crumbs a:hover{color:var(--accent)}

.sitefoot{text-align:center;padding:var(--sp-5) var(--gutter);border-top:1px solid var(--border);
  font-size:var(--fs-sm);color:var(--text-3)}
.sitefoot a{color:var(--text-2)}

.grid{display:grid;gap:var(--sp-5)}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}
.stack > * + *{margin-top:var(--sp-4)}
.row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.row--end{justify-content:flex-end}
.row--between{justify-content:space-between}
.inline{display:inline}

/* 4. Components ----------------------------------------------------------- */
/* icons */
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.iconbtn{width:40px;height:40px;display:inline-grid;place-items:center;border:0;border-radius:var(--radius);
  background:none;color:var(--text-2);text-decoration:none}
.iconbtn:hover{background:var(--surface-2);color:var(--text)}
.iconbtn--sm{width:32px;height:32px}
.iconbtn--sm .icon{width:16px;height:16px}
.iconbtn:disabled{opacity:.3;cursor:default;background:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;padding:var(--sp-3) var(--sp-5);
  border:1px solid transparent;border-radius:var(--radius);background:var(--brand);color:var(--brand-ink);
  font-size:var(--fs-base);font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;transition:filter .15s,background .15s}
.btn:hover{filter:brightness(.92);text-decoration:none}
.btn .icon{width:18px;height:18px}
.btn--block{display:flex;width:100%}
.btn--sm{min-height:36px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--surface-2);filter:none}
.btn--danger{background:transparent;color:var(--err-text);border-color:var(--err-border)}
.btn--danger:hover{background:var(--err-bg);filter:none}
.btn:disabled{opacity:.5;cursor:default;filter:none}
.linkbtn{background:none;border:0;padding:0;color:var(--text-2);text-decoration:underline;text-underline-offset:3px;font-size:var(--fs-sm)}
.linkbtn:hover{color:var(--accent)}

/* fields */
.field{margin-bottom:var(--sp-4)}
.field > label,.field-label{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--text-2);margin-bottom:var(--sp-2)}
.field-hint{display:block;font-size:var(--fs-sm);color:var(--text-3);margin-top:var(--sp-1)}
.input,.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field select,.field textarea{
  width:100%;min-height:48px;padding:var(--sp-3) var(--sp-4);background:var(--input-bg);color:var(--input-text);
  border:1px solid var(--input-border);border-radius:var(--radius);font-size:var(--fs-base)}
.field textarea{min-height:120px;resize:vertical;line-height:var(--lh)}
.field input::placeholder,.field textarea::placeholder,.input::placeholder{color:var(--input-placeholder)}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,245,149,.35)}
.field input[type=file]{width:100%;font-size:var(--fs-sm);color:var(--text-2)}
.field input[type=file]::file-selector-button{margin-right:var(--sp-3);padding:var(--sp-2) var(--sp-4);border-radius:var(--radius);
  border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:inherit;cursor:pointer}
.check{display:flex;align-items:flex-start;gap:var(--sp-2);font-size:var(--fs-base);color:var(--text-2);cursor:pointer}
.check input{width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--brand);flex:none}
.checks{display:grid;gap:var(--sp-2)}
.fieldset{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-4)}
.fieldset legend{padding:0 var(--sp-2);font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}

/* alerts */
.alert{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);border:1px solid;margin-bottom:var(--sp-4);font-size:var(--fs-sm);line-height:var(--lh)}
.alert--ok{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok-text)}
.alert--err{background:var(--err-bg);border-color:var(--err-border);color:var(--err-text)}
.alert code{font-size:var(--fs-base);color:var(--text);background:var(--surface-3);padding:.1rem .4rem;border-radius:var(--radius-sm);user-select:all}

/* badges */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:.125rem .5rem;border-radius:99px;border:1px solid var(--border);
  font-size:var(--fs-xs);font-weight:500;line-height:1.5;color:var(--text-3);white-space:nowrap;vertical-align:middle}
.badge--accent{color:var(--accent);border-color:var(--border-strong)}
.badge--ok{color:var(--ok-text);border-color:var(--ok-border);background:var(--ok-bg)}
.badge--err{color:var(--err-text);border-color:var(--err-border);background:var(--err-bg)}
.badge .icon{width:12px;height:12px}

/* cards */
.card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-5)}
.card > h2,.card > h3{margin-bottom:var(--sp-4)}
.card--flush{padding:0;overflow:hidden}

/* progress */
.progress{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.progress span{display:block;height:100%;background:var(--brand);border-radius:inherit;transition:width .3s}

/* tables */
.tablewrap{overflow-x:auto;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th{text-align:left;font-weight:500;color:var(--text-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text-2)}
.table tr:last-child td{border-bottom:0}
.table td strong{color:var(--text);font-weight:500}
.table td.actions{text-align:right;white-space:nowrap}
.table td.empty{text-align:center;color:var(--text-3);padding:var(--sp-6)}
.table a{text-decoration:none}
.table a:hover{text-decoration:underline}

/* pager */
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--text-3)}

/* empty state */
.empty{text-align:center;padding:var(--sp-8) var(--sp-5);border:1px dashed var(--border-strong);border-radius:var(--radius-lg);color:var(--text-2)}
.empty h2{font-size:var(--fs-lg)}

/* 5. Auth ------------------------------------------------------------------ */
.auth{flex:1;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:var(--sp-6) var(--sp-5);
  position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.auth::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../img/auth-bg.svg") center/cover no-repeat}
:root[data-theme="light"] .auth::before{opacity:.5}
.auth-box{width:min(400px,100%)}
.brandlogo{display:inline-block}
.brandlogo img{display:block;height:28px;width:auto;max-width:100%}
.brandlogo .logo-on-light{display:none}
:root[data-theme="light"] .brandlogo .logo-on-dark{display:none}
:root[data-theme="light"] .brandlogo .logo-on-light{display:block}
.auth-title{font-size:clamp(var(--fs-2xl),6vw,var(--fs-3xl));color:var(--accent);margin:var(--sp-5) 0 var(--sp-5)}
.auth-lede{color:var(--text-2);margin:calc(-1 * var(--sp-2)) 0 var(--sp-5)}
.auth .btn{margin-top:var(--sp-1)}
.auth-links{display:grid;justify-items:center;gap:var(--sp-2);margin-top:var(--sp-5)}
.auth-links a,.auth-links .linkbtn{font-size:var(--fs-sm);color:var(--text-2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 50%,transparent)}
.auth-links a:hover,.auth-links .linkbtn:hover{color:var(--accent)}
.auth-note{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--text-3)}
.auth-tag{display:inline-block;margin-left:var(--sp-2)}
.otp{letter-spacing:.5em;text-align:center;font-family:var(--mono);font-size:var(--fs-xl)!important}

/* 6. Customer -------------------------------------------------------------- */
.hello{font-size:clamp(var(--fs-xl),4vw,var(--fs-2xl))}
.hello em{font-style:normal;color:var(--accent)}

/* continue watching */
.resume{display:grid;grid-template-columns:200px 1fr auto;gap:var(--sp-5);align-items:center;padding:var(--sp-4);
  background:linear-gradient(120deg,var(--surface-3),var(--surface-2));border:1px solid var(--border-strong);border-radius:var(--radius-lg);text-decoration:none;color:inherit}
.resume:hover{border-color:var(--brand)}
.resume .thumb{aspect-ratio:16/9;border-radius:var(--radius)}
.resume-kicker{font-size:var(--fs-sm);color:var(--accent);font-weight:500;margin:0 0 var(--sp-1)}
.resume h3{margin:0 0 var(--sp-1)}
.resume p{margin:0 0 var(--sp-3);color:var(--text-2);font-size:var(--fs-sm)}
@media (max-width:720px){.resume{grid-template-columns:1fr}.resume .btn{width:100%}}

/* course card */
.course-card{display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
a.course-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.course-card .thumb{aspect-ratio:16/9;border-radius:0}
.course-card-body{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5) var(--sp-5);flex:1}
.course-card h3{margin:0}
.course-card p{margin:0;color:var(--text-2);font-size:var(--fs-sm)}
.course-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);color:var(--text-3)}
.course-meta span{display:inline-flex;align-items:center;gap:var(--sp-1)}
.course-meta .icon{width:16px;height:16px}
.course-card-foot{margin-top:auto;padding-top:var(--sp-3);display:grid;gap:var(--sp-2)}
.course-card-foot small{font-size:var(--fs-sm);color:var(--text-3)}
.course-card.is-locked .thumb{filter:grayscale(.6) brightness(.7)}

/* thumbnail (cover image or brand placeholder) */
.thumb{position:relative;background:linear-gradient(135deg,var(--surface-3),#003d22 60%,var(--surface));overflow:hidden;display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .icon{width:44px;height:44px;color:var(--brand);opacity:.85}
.thumb-lock{position:absolute;top:var(--sp-3);right:var(--sp-3);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--overlay);color:#fff}
.thumb-lock .icon{width:18px;height:18px;opacity:1;color:#fff}

/* course page: player + lessons */
.course-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--sp-5);align-items:start}
@media (max-width:1000px){.course-layout{grid-template-columns:1fr}}
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border)}
.player video,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.player-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-3);text-align:center;padding:var(--sp-5)}
.lesson-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin:var(--sp-5) 0 var(--sp-3)}
.lesson-head h1{font-size:var(--fs-xl);margin:0}
.lesson-head .kicker{font-size:var(--fs-sm);color:var(--text-3);margin:0 0 var(--sp-1)}
.lesson-nav{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.lesson-body{color:var(--text-2);white-space:pre-line;max-width:75ch}
.is-done-btn{color:var(--ok-text);border-color:var(--ok-border);background:var(--ok-bg)}

.lessons{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;position:sticky;top:calc(var(--bar) + var(--sp-4))}
@media (max-width:1000px){.lessons{position:static}}
.lessons-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.lessons-head h2{font-size:var(--fs-md);margin:0 0 var(--sp-2)}
.lessons-head small{display:block;font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--sp-2)}
.lessons-list{max-height:calc(100vh - var(--bar) - 11rem);overflow-y:auto;padding:var(--sp-2) 0}
@media (max-width:1000px){.lessons-list{max-height:none}}
.lessons-section{padding:var(--sp-3) var(--sp-5) var(--sp-1);font-size:var(--fs-sm);font-weight:600;color:var(--text-3)}
.lesson-link{display:grid;grid-template-columns:28px 1fr auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-5);
  color:var(--text-2);text-decoration:none;border-left:3px solid transparent}
.lesson-link:hover{background:var(--surface-3);color:var(--text)}
.lesson-link.is-current{background:var(--brand-soft);color:var(--text);border-left-color:var(--brand)}
.lesson-link .num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-sm);
  border:1px solid var(--border-strong);color:var(--text-3)}
.lesson-link.is-done .num{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.lesson-link .num .icon{width:16px;height:16px;stroke-width:2.4}
.lesson-link .title{font-size:var(--fs-sm);line-height:1.4}
.lesson-link .dur{font-size:var(--fs-sm);color:var(--text-3)}

/* locked course */
.locked{max-width:640px;margin:var(--sp-6) auto;text-align:center}
.locked .thumb{aspect-ratio:16/9;border-radius:var(--radius-lg);margin-bottom:var(--sp-5)}

/* 7. Admin ----------------------------------------------------------------- */
.topbar--admin{background:color-mix(in srgb,var(--surface) 92%,transparent)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-6)}
.stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5)}
.stat small{display:block;font-size:var(--fs-sm);color:var(--text-3)}
.stat b{display:block;font-size:var(--fs-2xl);font-weight:600;line-height:1.3;color:var(--text)}
.stat span{font-size:var(--fs-sm);color:var(--text-3)}
.toolbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.toolbar .input{width:auto;flex:1;min-width:220px;max-width:420px}
.toolbar select.input{flex:0 1 auto;min-width:160px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 var(--sp-4)}
.form-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;margin-top:var(--sp-2)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--sp-5);align-items:start}
@media (max-width:1000px){.split{grid-template-columns:1fr}}
.source-pick{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.source-pick .check{padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.source-pick .check:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.source-panel{margin-bottom:var(--sp-4)}
.cover-preview{width:100%;max-width:360px;aspect-ratio:16/9;border-radius:var(--radius);margin-bottom:var(--sp-3)}
.order-btns{display:inline-flex;gap:2px}
.mono{font-family:var(--mono);font-size:var(--fs-sm)}
.danger-zone{border-color:var(--err-border)}
.danger-zone h3{color:var(--err-text)}
.upload-progress{margin-top:var(--sp-3)}
.upload-progress small{display:block;margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--text-3)}

/* 8. Utilities ------------------------------------------------------------- */
.h3{font-size:var(--fs-lg);font-weight:600}
.muted{color:var(--text-3)}
.text-2{color:var(--text-2)}
.small{font-size:var(--fs-sm)}
.nowrap{white-space:nowrap}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-4{margin-top:var(--sp-4)}.mb-4{margin-bottom:var(--sp-4)}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:720px){
  .topbar{gap:var(--sp-2)}
  .topbar-who{display:none}
  .topbar-brand .brandlogo img{height:18px}
  .topbar-brand .badge{display:none}
  .page{padding-top:var(--sp-5)}
  h1{font-size:var(--fs-xl)}
}
@media (max-width:520px){
  .topbar{flex-wrap:wrap;height:auto;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
  .topnav{order:3;flex-basis:100%}
}