/* assets/app.css — Fallo base styles. Brand (mockup › Brand sheet): Poppins headings, Inter text;
   Midnight #1F2547 text, Sunny #FFD166, Coral #FF8B8B, Lavender #A78BFA, Mint #6EDDC9, Soft Sky #E9E8FF. */
:root{
  --ink:#1F2547; --ink-2:#4B5272; --muted:#6B7190; --line:#E3E1F2; --sky:#E9E8FF; --bg:#FBFAFF; --card:#ffffff;
  --sunny:#FFD166; --coral:#FF8B8B; --lav:#A78BFA; --purple:#7C5BC7; --mint:#6EDDC9;
  --ok:#1E8A5E; --bad:#C2413B; --r:16px; --r-lg:24px;
  --head:'Poppins',system-ui,sans-serif; --text:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--text)}
a{color:var(--purple);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--head);letter-spacing:-0.02em;line-height:1.1;margin:0}
:focus-visible{outline:3px solid var(--lav);outline-offset:2px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)} .small{font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 15px/1 var(--text);cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none;border-color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff} .btn.primary:hover{background:#2C3463}
.btn.sunny{background:var(--sunny);border-color:var(--sunny);color:var(--ink)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-weight:600;font-size:14px}
input[type=text],input[type=email],input[type=password],input[type=url],select{min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
.flash{padding:12px 16px;border-radius:12px;margin:0 0 16px;font-size:15px}
.flash.ok{background:#E3F7EF;color:var(--ok)} .flash.bad{background:#FDE8E6;color:var(--bad)} .flash.warn{background:#FFF4D6;color:#7A5A00}
/* site header */
.site-nav{display:flex;align-items:center;gap:24px;height:72px}
.site-nav .brand{display:flex;align-items:center;gap:10px;font:800 24px/1 var(--head);color:var(--ink);text-decoration:none}
.site-nav .links{display:flex;gap:22px;flex:1;font-weight:500} .site-nav .links a{color:var(--ink)}
/* auth pages */
.auth{min-height:calc(100vh - 72px);display:flex;align-items:center;justify-content:center;padding:32px 16px}
.auth .card{width:100%;max-width:420px}
.auth h1{font-size:28px;margin-bottom:6px}
/* app shell */
.app{display:flex;flex-wrap:wrap;min-height:100vh}
.app-side{flex:1 1 220px;max-width:240px;background:#fff;border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:4px}
.app-side a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;color:var(--ink-2);font-weight:500}
.app-side a[aria-current]{background:var(--sky);color:var(--ink);font-weight:600}
.app-main{flex:999 1 560px;min-width:0;padding:28px 36px}
@media (max-width:800px){.site-nav .links{display:none}.app-side{max-width:none;flex-direction:row;flex-wrap:wrap}.app-main{padding:20px}}

/* ── Creator app: menu ──────────────────────────────────────────────────────── */
.app{display:flex;min-height:100vh;background:#F3F2FC}
.side{position:sticky;top:0;height:100vh;width:264px;flex-shrink:0;box-sizing:border-box;padding:22px 16px 18px;display:flex;flex-direction:column;gap:18px;
  background:radial-gradient(120% 40% at 0% 100%,rgba(167,139,250,0.28) 0%,rgba(167,139,250,0) 70%),#1F2547;color:#fff;overflow-y:auto}
.side-logo{display:flex;align-items:center;gap:10px;padding:2px 8px 6px;color:#fff;text-decoration:none;font:800 21px/1 var(--head);letter-spacing:-0.03em}
.side-logo i{font-style:normal;color:var(--lav)} .side-logo:hover{text-decoration:none}
.side-menu{display:flex;flex-direction:column;gap:3px}
.side-menu a,.side-soon{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;color:#C9C4E4;font-weight:500;font-size:15px;text-decoration:none;transition:background .15s,color .15s}
.side-menu a:hover{background:rgba(255,255,255,0.07);color:#fff;text-decoration:none}
.side-menu a[aria-current]{background:var(--sunny);color:var(--ink);font-weight:700;box-shadow:0 8px 20px -10px rgba(255,209,102,0.7)}
.side-soon{opacity:.5;cursor:default}
.side-n{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:999px;background:var(--coral);color:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;box-sizing:border-box}
.side-soon em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,0.12)}
.side-page{margin-top:auto;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.side-page-label{font-size:12px;color:#C9C4E4}
.side-page b{word-break:break-all}
.side-page-note{font-size:12px;color:#C9C4E4;line-height:1.45;margin-top:4px}
.side-page-btns{display:flex;gap:6px;margin-top:8px}
.side-page-btns button,.side-page-btns a{flex:1;display:flex;align-items:center;justify-content:center;height:34px;border-radius:999px;border:0;font:600 13px var(--text);cursor:pointer;text-decoration:none}
.side-page-btns button{background:var(--sunny);color:var(--ink)}
.side-page-btns a{background:rgba(255,255,255,0.12);color:#fff}
.side-me{display:flex;align-items:center;gap:10px;padding:10px 6px 0;border-top:1px solid rgba(255,255,255,0.1)}
.side-av{width:36px;height:36px;border-radius:50%;background:var(--lav);color:var(--ink);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.side-me-txt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13.5px}
.side-me-txt span{color:#C9C4E4;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-me a{color:#C9C4E4;display:flex;padding:6px;border-radius:8px} .side-me a:hover{background:rgba(255,255,255,0.08);color:#fff}
.app-main{flex:1;min-width:0;padding:28px 36px 48px;box-sizing:border-box}
.dash>*{min-width:0}

/* ── Creator app: overview ──────────────────────────────────────────────────── */
.dash{max-width:1120px;display:flex;flex-direction:column;gap:20px}
.dash-hero{position:relative;overflow:hidden;border-radius:24px;padding:28px 30px;color:#fff;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:radial-gradient(40% 80% at 100% 100%,rgba(255,209,102,0.75) 0%,rgba(255,209,102,0) 70%),radial-gradient(40% 80% at 70% 120%,rgba(255,139,139,0.7) 0%,rgba(255,139,139,0) 70%),linear-gradient(120deg,#1F2547 0%,#3B3F7A 45%,#7C5BC7 100%)}
.dash-hero h1{color:#fff;font-size:32px;margin:0}
.dash-hero p{margin:6px 0 0;color:rgba(255,255,255,0.88)}
.dash-hero .dash-av{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.35);flex-shrink:0;background:var(--sunny)}
.dash-pill{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.25);font-size:13px;font-weight:600}
.dash-pill i{width:8px;height:8px;border-radius:50%;background:#6EDDC9;box-shadow:0 0 0 4px rgba(110,221,201,0.25)}
.dash-pill.warn i{background:var(--sunny);box-shadow:0 0 0 4px rgba(255,209,102,0.25)}
.dash-hero-cta{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.dash-hero-cta .btn{border:0}
.dash-hero-cta .btn.sunny{box-shadow:0 10px 24px -12px rgba(255,209,102,0.9)}
.dash-hero-cta .btn.ghost{background:rgba(255,255,255,0.14);color:#fff}
.dash-steps{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 24px}
.dash-steps-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.dash-bar{height:8px;border-radius:999px;background:var(--sky);overflow:hidden;margin-bottom:18px}
.dash-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--lav))}
.dash-step-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dash-step{border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px}
.dash-step.now{border-color:var(--ink);box-shadow:0 12px 26px -18px rgba(31,37,71,0.5)}
.dash-step.done{background:#F7FCFA;border-color:#CDEFE2}
.dash-step-n{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:var(--sky)}
.dash-step.now .dash-step-n{background:var(--sunny)} .dash-step.done .dash-step-n{background:#E3F7EF;color:var(--ok)}
.dash-step b{font:700 16px/1.3 var(--head)}
.dash-step p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.dash-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dash-stat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;gap:14px;align-items:flex-start}
.dash-stat-ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dash-stat-n{font:800 30px/1.1 var(--head);letter-spacing:-0.02em}
.dash-stat-l{font-size:13.5px;color:var(--muted)}
.dash-stat-s{font-size:12.5px;margin-top:4px;color:var(--ok);font-weight:600}
.dash-two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.dash-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}
.dash-card h2{font-size:19px;margin:0 0 14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dash-card h2 small{font:500 13px var(--text);color:var(--muted)}
.dash-vid{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #F1F0F8}
.dash-vid:first-of-type{border-top:0}
.dash-vid img{width:96px;height:54px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--sky)}
.dash-vid-t{flex:1;min-width:0;font-size:14px}
.dash-vid-t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-vid-t span{font-size:12.5px;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.tag.sent{background:#E3F7EF;color:var(--ok)} .tag.live{background:#FDE8E6;color:#C2413B} .tag.wait{background:#FFF4D6;color:#7A5A00}
.tag.held{background:#EEEBFF;color:#5B3FD6} .tag.off{background:#F1F0F8;color:var(--muted)}
.dash-vid form{display:flex;gap:6px;margin:0}
.btn.xs{min-height:30px;padding:0 12px;font-size:12.5px}
.dash-src{display:flex;flex-direction:column;gap:12px;font-size:13.5px}
.dash-src-bar{height:8px;border-radius:999px;background:#F1F0F8;margin-top:5px;overflow:hidden}
.dash-src-bar span{display:block;height:100%;border-radius:999px}
.dash-empty{text-align:center;color:var(--muted);font-size:14px;padding:18px 8px;line-height:1.6}
.dash-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

@media (max-width:900px){
  .app{flex-direction:column}
  .side{position:static;width:auto;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px;gap:10px;overflow:visible}
  .app{min-width:0;max-width:100vw}
  .side{min-width:0;max-width:100%;box-sizing:border-box}
  .side-menu{flex-direction:row;overflow-x:auto;width:100%;min-width:0;order:3;gap:6px;padding-bottom:2px;scrollbar-width:none}
  .side-menu a,.side-soon{flex-shrink:0;min-height:38px;font-size:14px}
  .side-soon{display:none}
  .side-page{display:none}
  .side-me{margin-left:auto;border:0;padding:0}
  .side-me-txt{display:none}
  .app-main{padding:16px}
  .dash-step-row,.dash-stats,.dash-two{grid-template-columns:minmax(0,1fr)}
  .dash-vid{flex-wrap:wrap}
  .dash-vid-t{flex:1 1 calc(100% - 110px)}
  .dash-vid form,.dash-vid .tag{margin-left:108px}
  .dash-hero h1{font-size:26px}
  .dash-hero{padding:22px}
  .dash-hero-cta{margin-left:0}
}

/* ── Buttons (app): firm rounded rectangles with a slight edge, not pills ───────────────────────────────── */
.app .btn,.auth .btn,dialog .btn,.f-auth-form .btn{border-radius:11px;min-height:44px;padding:0 18px;font:650 14.5px/1 var(--text);letter-spacing:-0.005em;
  border:1px solid #D9D6EC;background:#fff;color:var(--ink);box-shadow:inset 0 -2px 0 #ECEAF6,0 1px 2px rgba(31,37,71,0.06);transition:transform .08s ease,box-shadow .12s ease,background .12s ease}
.app .btn:hover,.auth .btn:hover,dialog .btn:hover,.f-auth-form .btn:hover{background:#FAF9FE;border-color:#C9C5E2;transform:translateY(-1px);box-shadow:inset 0 -2px 0 #ECEAF6,0 4px 10px -6px rgba(31,37,71,0.35);text-decoration:none}
.app .btn:active,.auth .btn:active,dialog .btn:active,.f-auth-form .btn:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(31,37,71,0.12)}
.app .btn.primary,.auth .btn.primary,dialog .btn.primary,.f-auth-form .btn.primary{background:var(--ink);border-color:#141A38;color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,0.35),0 1px 2px rgba(31,37,71,0.2)}
.app .btn.primary:hover,.auth .btn.primary:hover,dialog .btn.primary:hover,.f-auth-form .btn.primary:hover{background:#2A3260;box-shadow:inset 0 -2px 0 rgba(0,0,0,0.35),0 6px 14px -6px rgba(31,37,71,0.55)}
.app .btn.sunny,.f-auth-form .btn.sunny,dialog .btn.sunny{background:var(--sunny);border-color:#E9B949;color:var(--ink);box-shadow:inset 0 -2px 0 #E0AE3C,0 1px 2px rgba(31,37,71,0.12)}
.app .btn.sunny:hover{background:#FFD97F}
.app .btn.xs,dialog .btn.xs{min-height:32px;padding:0 12px;border-radius:9px;font-size:13px}
.app .btn:focus-visible,.auth .btn:focus-visible,dialog .btn:focus-visible{outline:3px solid var(--lav);outline-offset:2px}
.app .btn[disabled]{opacity:.5;transform:none;cursor:not-allowed}
.side-page-btns button,.side-page-btns a{border-radius:9px}
.dash-hero-cta .btn{border-radius:11px}
.dash-hero-cta .btn.ghost{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.25);color:#fff;box-shadow:none}
.dash-hero-cta .btn.ghost:hover{background:rgba(255,255,255,0.22)}

/* On/off switch */
.tgl{position:relative;width:46px;height:28px;border-radius:999px;border:0;background:#D9D6EC;cursor:pointer;flex-shrink:0;padding:0;transition:background .15s ease}
.tgl i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(31,37,71,0.3);transition:left .15s ease}
.tgl.on{background:var(--ok)}
.tgl.on i{left:21px}
.tgl:focus-visible{outline:3px solid var(--lav);outline-offset:2px}

/* Shared confirm window (forms with data-confirm-title) */
dialog.cf-dlg{border:0;border-radius:20px;padding:24px;max-width:420px;width:calc(100% - 32px);box-shadow:0 30px 60px -20px rgba(31,37,71,0.5)}
dialog.cf-dlg::backdrop{background:rgba(31,37,71,0.45)}
dialog.cf-dlg h2{font-size:20px;margin:0 0 8px}
dialog.cf-dlg p{margin:0 0 20px;color:var(--ink-2);line-height:1.55;font-size:15px}
dialog.cf-dlg .cf-btns{display:flex;gap:10px;justify-content:flex-end}