/* ============================================================================
   Reeluse design system — the single stylesheet every screen links.
   Language: Linear (near-black canvas, translucent borders, tight type, ring
   shadows) · Identity: Reeluse gold accent · Type: Sora (UI) + Geist Mono (data).
   Full rationale + rules in docs/DESIGN.md. Build with these classes; do not
   hand-roll per-page CSS.
   ========================================================================== */

@font-face{font-family:'Sora';font-weight:100 900;font-display:swap;
  src:url('/static/fonts/sora.woff2') format('woff2');}
@font-face{font-family:'Geist Mono';font-weight:100 900;font-display:swap;
  src:url('/static/fonts/geist-mono.woff2') format('woff2');}

/* ---- Tokens: dark is the signature default; light is first-class ---- */
:root{
  --ground:#08090a; --shell:#0f1011; --elev:#191a1b;
  --card:rgba(255,255,255,.024); --card-h:rgba(255,255,255,.045);
  --bd:rgba(255,255,255,.08); --bd-sub:rgba(255,255,255,.05); --bd-st:rgba(255,255,255,.13);
  --t1:#f7f8f8; --t2:#d0d6e0; --t3:#8a8f98; --t4:#62666d;
  --gold:#f4b01e; --gold-h:#ffc53d; --gold-ink:#12100a; --gold-soft:rgba(244,176,30,.12);
  --green:#3fae5a; --green-soft:rgba(63,174,90,.13);
  --amber:#e8973a; --amber-soft:rgba(232,151,58,.13);
  --red:#ef5b52; --red-soft:rgba(239,91,82,.13);
  --indigo:#7170ff; --indigo-soft:rgba(113,112,255,.14);
  --ring:0 0 0 1px rgba(0,0,0,.25); --shadow:0 1px 2px rgba(0,0,0,.4);
  --sans:'Sora',-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,"SF Mono",Menlo,monospace;
  --r-btn:6px; --r-card:8px; --r-panel:12px; --r-pill:9999px;
}
@media (prefers-color-scheme:light){:root{
  --ground:#f7f8f8; --shell:#ffffff; --elev:#ffffff; --card:#ffffff; --card-h:#f3f4f5;
  --bd:#e6e6e6; --bd-sub:#eceef0; --bd-st:#d0d6e0;
  --t1:#08090a; --t2:#3c4149; --t3:#6b7280; --t4:#8a8f98;
  --gold:#c98706; --gold-h:#b07603; --gold-ink:#fffdf7; --gold-soft:rgba(201,135,6,.12);
  --green:#1f9d4d; --green-soft:rgba(31,157,77,.12);
  --amber:#b9741c; --amber-soft:rgba(185,116,28,.12);
  --red:#d0402f; --red-soft:rgba(208,64,47,.1);
  --indigo:#5e6ad2; --indigo-soft:rgba(94,106,210,.12);
  --ring:0 0 0 1px rgba(0,0,0,.04); --shadow:0 1px 2px rgba(9,10,12,.06),0 2px 8px rgba(9,10,12,.04);
}}
:root[data-theme="dark"]{--ground:#08090a;--shell:#0f1011;--elev:#191a1b;--card:rgba(255,255,255,.024);--card-h:rgba(255,255,255,.045);--bd:rgba(255,255,255,.08);--bd-sub:rgba(255,255,255,.05);--bd-st:rgba(255,255,255,.13);--t1:#f7f8f8;--t2:#d0d6e0;--t3:#8a8f98;--t4:#62666d;--gold:#f4b01e;--gold-ink:#12100a;--gold-soft:rgba(244,176,30,.12);--green:#3fae5a;--green-soft:rgba(63,174,90,.13);--amber:#e8973a;--amber-soft:rgba(232,151,58,.13);--red:#ef5b52;--red-soft:rgba(239,91,82,.13);--indigo:#7170ff;--indigo-soft:rgba(113,112,255,.14);--ring:0 0 0 1px rgba(0,0,0,.25);--shadow:0 1px 2px rgba(0,0,0,.4);}
:root[data-theme="light"]{--ground:#f7f8f8;--shell:#ffffff;--elev:#ffffff;--card:#ffffff;--card-h:#f3f4f5;--bd:#e6e6e6;--bd-sub:#eceef0;--bd-st:#d0d6e0;--t1:#08090a;--t2:#3c4149;--t3:#6b7280;--t4:#8a8f98;--gold:#c98706;--gold-h:#b07603;--gold-ink:#fffdf7;--gold-soft:rgba(201,135,6,.12);--green:#1f9d4d;--green-soft:rgba(31,157,77,.12);--amber:#b9741c;--amber-soft:rgba(185,116,28,.12);--red:#d0402f;--red-soft:rgba(208,64,47,.1);--indigo:#5e6ad2;--indigo-soft:rgba(94,106,210,.12);--ring:0 0 0 1px rgba(0,0,0,.04);--shadow:0 1px 2px rgba(9,10,12,.06),0 2px 8px rgba(9,10,12,.04);}

/* ---- Base ---- */
*{box-sizing:border-box;}
body{margin:0;background:var(--ground);color:var(--t1);font-family:var(--sans);
  font-size:14px;line-height:1.5;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
.rl-num,.rl-mono{font-variant-numeric:tabular-nums;}
.rl-mono{font-family:var(--mono);}
.rl-wrap{max-width:880px;margin:0 auto;padding:20px;}
.rl-eyebrow{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--t4);}
h1,h2,h3{letter-spacing:-.02em;font-weight:600;text-wrap:balance;margin:0;}
h1{font-size:24px;} h2{font-size:16px;} h3{font-size:14px;}

/* ---- Buttons ---- */
.rl-btn{font-family:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:var(--r-btn);
  border:1px solid var(--bd-st);background:rgba(255,255,255,.02);color:var(--t2);cursor:pointer;letter-spacing:-.01em;}
.rl-btn:hover{background:var(--card-h);color:var(--t1);}
.rl-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
.rl-btn--primary{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);}
.rl-btn--primary:hover{background:var(--gold-h);}
.rl-btn--ghost{border-color:transparent;background:transparent;color:var(--t3);}
.rl-btn--danger{border-color:var(--red);color:var(--red);background:transparent;}

/* ---- Status pill ---- */
.rl-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.01em;
  padding:3px 8px 3px 7px;border-radius:var(--r-pill);border:1px solid transparent;}
.rl-pill__dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.rl-pill--run{color:var(--indigo);background:var(--indigo-soft);}
.rl-pill--run .rl-pill__dot{animation:rl-pulse 1.6s ease-in-out infinite;}
.rl-pill--ok{color:var(--green);background:var(--green-soft);}
.rl-pill--warn{color:var(--amber);background:var(--amber-soft);}
.rl-pill--fail{color:var(--red);background:var(--red-soft);}
@keyframes rl-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---- Card ---- */
.rl-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-card);
  box-shadow:var(--ring),var(--shadow);overflow:hidden;}
.rl-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 17px 0;}
.rl-title{font-size:15px;font-weight:600;letter-spacing:-.014em;line-height:1.3;text-wrap:balance;}
.rl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;margin-top:5px;font-size:12.5px;color:var(--t4);}
.rl-meta__dot{width:2.5px;height:2.5px;border-radius:50%;background:var(--t4);}

/* ---- Stage tracker (job pipeline) ---- */
.rl-track{display:grid;grid-template-columns:repeat(4,1fr);margin:16px 17px 2px;}
.rl-step{position:relative;padding-top:20px;padding-right:12px;}
.rl-step__node{position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;background:var(--elev);
  border:1.5px solid var(--bd-st);z-index:2;}
.rl-step__bar{position:absolute;top:5.5px;left:13px;right:0;height:2px;background:var(--bd-sub);z-index:1;}
.rl-step:last-child .rl-step__bar{display:none;}
.rl-step__name{font-size:12.5px;font-weight:500;color:var(--t3);line-height:1.25;letter-spacing:-.01em;}
.rl-step__info{font-size:11px;color:var(--t4);margin-top:2px;}
.rl-step--done .rl-step__node{background:var(--green);border-color:var(--green);}
.rl-step--done .rl-step__node::after{content:"";position:absolute;inset:2.5px;background:var(--ground);
  clip-path:polygon(41% 66%,80% 20%,90% 30%,41% 86%,12% 54%,22% 44%);}
.rl-step--done .rl-step__bar{background:var(--green);}
.rl-step--done .rl-step__name{color:var(--t2);}
.rl-step--active .rl-step__node{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);animation:rl-pulse 1.8s ease-in-out infinite;}
.rl-step--active .rl-step__bar{background:linear-gradient(90deg,var(--gold),var(--bd-sub) 70%);}
.rl-step--active .rl-step__name{color:var(--gold);}
.rl-step--active .rl-step__info{color:var(--t2);}

/* ---- Usage meter ---- */
.rl-meter{height:5px;background:var(--card-h);border-radius:var(--r-pill);overflow:hidden;box-shadow:var(--ring);}
.rl-meter>i{display:block;height:100%;background:var(--gold);}
.rl-meter--warn>i{background:var(--amber);} .rl-meter--full>i{background:var(--red);}

/* ---- Clip tile (9:16) ---- */
.rl-clip{background:var(--card);border:1px solid var(--bd-sub);border-radius:var(--r-card);overflow:hidden;}
.rl-clip:hover{background:var(--card-h);}
.rl-clip__thumb{aspect-ratio:9/16;background:radial-gradient(130% 75% at 50% 0%,var(--gold-soft),transparent),var(--elev);
  position:relative;}
.rl-clip__body{padding:8px 10px 10px;}
.rl-clip__hook{font-size:12px;font-weight:500;line-height:1.35;color:var(--t2);letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rl-chip{font-size:10px;font-weight:600;padding:1.5px 6px;border-radius:var(--r-pill);
  background:rgba(8,9,10,.72);color:var(--t1);border:1px solid var(--bd);backdrop-filter:blur(6px);}
.rl-chip--kind{color:var(--gold);}

/* ---- Inputs ---- */
.rl-input{width:100%;background:rgba(255,255,255,.02);color:var(--t1);font-family:inherit;font-size:14px;
  border:1px solid var(--bd);border-radius:var(--r-btn);padding:9px 12px;}
.rl-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.rl-input::placeholder{color:var(--t4);}

/* ---- Table (admin) ---- */
.rl-table{width:100%;border-collapse:collapse;font-size:13px;}
.rl-table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--t4);padding:8px 10px;border-bottom:1px solid var(--bd);}
.rl-table td{padding:9px 10px;border-bottom:1px solid var(--bd-sub);color:var(--t2);}
.rl-table td.rl-num,.rl-table th.rl-num{text-align:right;font-variant-numeric:tabular-nums;}

/* ---- States ---- */
.rl-error{font-size:12.5px;color:var(--red);}
.rl-recovering{font-size:12.5px;color:var(--amber);}
.rl-empty{text-align:center;padding:48px 20px;color:var(--t3);}
.rl-skeleton{background:var(--card-h);border-radius:var(--r-btn);animation:rl-sk 1.4s ease-in-out infinite;}
@keyframes rl-sk{50%{opacity:.5}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;}}

/* ═══ App shell — the familiar SaaS chrome: fixed sidebar + topbar + content ═══
   Every authed page uses this. Sidebar = primary nav (icons + labels, active state);
   topbar = page title + user; content = max-width column. Collapses on mobile. */
.rl-shell{display:flex;min-height:100vh;}
.rl-side{width:220px;flex-shrink:0;background:var(--shell);border-right:1px solid var(--bd-sub);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.rl-side__brand{display:flex;align-items:center;gap:9px;padding:18px 16px 14px;
  font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--t1);text-decoration:none;}
.rl-side__mark{width:22px;height:22px;border-radius:7px;background:var(--gold);position:relative;flex-shrink:0;}
.rl-side__mark::after{content:"";position:absolute;inset:6px 7px;background:var(--gold-ink);
  clip-path:polygon(0 0,100% 50%,0 100%);}
.rl-side__nav{display:flex;flex-direction:column;gap:2px;padding:8px 10px;flex:1;}
.rl-side__label{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--t4);padding:14px 8px 5px;}
.rl-side__link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;
  font-size:13.5px;font-weight:500;color:var(--t3);text-decoration:none;letter-spacing:-.01em;}
.rl-side__link:hover{color:var(--t1);background:var(--card-h);}
.rl-side__link.active{color:var(--t1);background:var(--card-h);box-shadow:inset 2px 0 0 var(--gold);}
.rl-side__link svg{width:17px;height:17px;flex-shrink:0;opacity:.85;}
.rl-side__foot{padding:12px 14px;border-top:1px solid var(--bd-sub);display:flex;align-items:center;gap:9px;}
.rl-side__avatar{width:28px;height:28px;border-radius:50%;background:var(--card-h);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--t2);flex-shrink:0;}
.rl-side__who{min-width:0;flex:1;}
.rl-side__email{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rl-side__out{font-size:11px;color:var(--t4);background:none;border:none;padding:0;cursor:pointer;font-family:inherit;}
.rl-side__out:hover{color:var(--red);}
.rl-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.rl-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 28px;border-bottom:1px solid var(--bd-sub);position:sticky;top:0;
  background:var(--ground);z-index:20;}
.rl-top__title{font-size:16px;font-weight:600;letter-spacing:-.02em;}
.rl-content{padding:24px 28px 48px;max-width:860px;width:100%;}
@media (max-width:760px){
  .rl-side{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .2s;}
  .rl-side.open{transform:none;}
  .rl-shell{display:block;}
  .rl-top{padding:12px 16px;}
  .rl-content{padding:16px 16px 40px;}
  .rl-menu-btn{display:inline-flex !important;}
}
.rl-menu-btn{display:none;background:none;border:1px solid var(--bd);border-radius:6px;
  color:var(--t2);padding:5px 9px;cursor:pointer;font-size:14px;}

/* ═══ Upload dropzone + asset state card (branding assets, any file setting) ═══ */
.rl-drop{border:1.5px dashed var(--bd-st);border-radius:var(--r-card);padding:22px 16px;
  text-align:center;cursor:pointer;color:var(--t3);font-size:13px;transition:border-color .15s,background .15s;}
.rl-drop:hover,.rl-drop.drag{border-color:var(--gold);background:var(--gold-soft);color:var(--t2);}
.rl-drop b{color:var(--gold);font-weight:600;}
.rl-drop .hint{display:block;margin-top:4px;font-size:11.5px;color:var(--t4);}
.rl-asset{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card-h);
  border:1px solid var(--bd-sub);border-radius:var(--r-card);}
.rl-asset__thumb{width:44px;height:44px;border-radius:8px;background:var(--elev);border:1px solid var(--bd);
  object-fit:contain;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--t4);overflow:hidden;}
.rl-asset__thumb img,.rl-asset__thumb video{width:100%;height:100%;object-fit:contain;}
.rl-asset__meta{flex:1;min-width:0;}
.rl-asset__name{font-size:13px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rl-asset__sub{font-size:11.5px;color:var(--green);display:flex;align-items:center;gap:5px;}
.rl-asset__sub::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);}
.rl-asset__acts{display:flex;gap:6px;flex-shrink:0;}