/* ============================================================
   Social Media Production Dashboard — Version 26
   Themeable UI. :root holds the DAYLIGHT (light) palette; the
   dark themes (Cosmic Purple default, Midnight, Emerald, Rose,
   Amber) live in the [data-theme=...] blocks near the bottom and
   just re-map these same variables. See "THEME PALETTES".
   ============================================================ */
:root{
  /* accent (brand) */
  --brand:#a90006; --brand-dark:#880002; --brand-darker:#520100; --brand-soft:#fbedeb;
  --grad:linear-gradient(90deg,#a90006,#880002);
  --grad-2:linear-gradient(135deg,#a90006,#880002);
  --navy:#520100; --navy-2:#880002; --navy-3:#a90006;
  /* status accents + their readable "ink" (text on the soft tint) */
  --green:#16a34a; --green-soft:#e7f6ec; --green-ink:#0b6b39;
  --gold:#d97706;  --gold-soft:#fef3e2;  --gold-ink:#92400e;
  --red:#dc2626;   --red-soft:#fdecec;   --red-ink:#b42318;
  /* neutrals: surfaces + text + lines */
  --page:#fbf8f4; --card:#ffffff; --surface-2:#fcfaf8; --surface-3:#f7f4ee;
  --ink:#332523; --ink-2:#503b38; --muted:#85736a; --muted-2:#b3a299;
  --line:#efebe3; --line-2:#f7f4ee; --line-strong:#e0d9cc;
  /* app chrome */
  --topbar-bg:var(--brand); --topbar-ink:#ffffff; --topbar-line:rgba(0,0,0,.06);
  --side-bg:#ffffff; --side-line:var(--line);
  --app-bg:var(--page); --app-glow-1:transparent; --app-glow-2:transparent;
  --shadow:0 1px 2px rgba(36,22,20,.06);
  --shadow-md:0 1px 3px rgba(36,22,20,.10);
  --shadow-lg:0 8px 24px rgba(36,22,20,.12);
  --radius:10px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Inter","Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;
  color:var(--ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background:var(--app-bg); background-attachment:fixed;
}
/* soft ambient glows behind everything (dark themes light these up) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60vw 60vh at 12% -8%, var(--app-glow-1), transparent 60%),
             radial-gradient(55vw 55vh at 108% 112%, var(--app-glow-2), transparent 60%);}
button{font-family:inherit;cursor:pointer}
a{color:var(--brand-dark);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0}
code{background:var(--surface-3);color:#880002;padding:1px 6px;border-radius:5px;font-size:12.5px}
.hidden{display:none !important}
hr.sep{border:none;border-top:1px solid var(--line);margin:18px 0}

/* ---------- Top bar ---------- */
.topbar{
  height:58px; color:#fff; display:flex; align-items:center; padding:0 20px; gap:14px;
  position:sticky; top:0; z-index:40;
  background:var(--brand); box-shadow:var(--shadow-md); border-bottom:1px solid rgba(0,0,0,.06);
}
.topbar .logo{display:flex;align-items:center;gap:10px}
.topbar .mark{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;letter-spacing:.03em;color:#fff}
.topbar .logo-txt{font-weight:700;font-size:16px;letter-spacing:.01em}
.topbar .ver{opacity:.85;font-weight:600;font-size:11px;border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:1px 7px}
.topbar .spacer{flex:1}
.pill{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.32);
  border-radius:8px;padding:6px 12px;font-size:12.5px;display:flex;align-items:center;gap:8px;font-weight:600}

/* live user stats in header — inline, animated: (•) 4 Users / (•) 1 Online / (•) 3 Offline */
.hstats{display:flex;align-items:center;gap:9px;margin-right:2px}
.hstat{display:inline-flex;align-items:center;gap:6px;line-height:1;color:#fff}
.hstat b{font-size:15px;font-weight:700;color:#fff}
.hstat i{font-size:12px;color:rgba(255,255,255,.85);font-style:normal;font-weight:600}
.hsep{color:rgba(255,255,255,.45);font-weight:600}
.hdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.hdot.users{background:var(--card);animation:hpulse 2.4s ease-in-out infinite}
.hdot.on{background:#34d399}
.hdot.on.pulse{animation:onpulse 1.8s ease-out infinite}
.hdot.off{background:var(--line-strong)}
.hstat b.bump{animation:bump .45s ease}
@keyframes onpulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@keyframes hpulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.35);color:#f9dfdc}100%{transform:scale(1)}}
@media(max-width:900px){.hstats{display:none}}

/* user-card action buttons (List of Users) */
.uc-actions{margin-top:11px;display:flex;gap:7px;flex-wrap:wrap;border-top:1px solid var(--line-2);padding-top:11px}
.user-card.me{border-color:#f7d9d5;box-shadow:0 0 0 1px #f7d9d5 inset,var(--shadow)}
.you-tag{font-size:10px;font-weight:700;background:var(--brand-soft);color:var(--brand-dark);border-radius:999px;padding:1px 7px}

/* running-tasks button + panel */
.tasks-wrap{position:relative}
#tasksBtn{display:inline-flex;align-items:center;gap:7px}
#tasksBtn.busy{background:rgba(255,255,255,.28)}
.spin{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tasks-panel{position:absolute;right:0;top:44px;width:340px;max-height:440px;overflow:auto;
  background:var(--card);border-radius:12px;box-shadow:var(--shadow-lg);border:1px solid var(--line);z-index:50}
.tasks-panel h4{padding:12px 15px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink)}
.trow{padding:11px 15px;border-bottom:1px solid var(--line-2)}
.trow:last-child{border-bottom:none}
.tr-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tr-label{font-weight:600;font-size:12.5px;color:var(--ink)}
.tr-bar{height:6px;background:var(--surface-3);border-radius:99px;overflow:hidden;margin:7px 0 4px}
.tr-bar span{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .3s}
.tr-msg{font-size:11px;color:var(--muted)}
.trow.done .tr-msg{margin-top:4px}
.tr-badge{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px}
.tr-badge.completed{background:var(--green-soft);color:var(--green-ink)}
.tr-badge.failed{background:var(--red-soft);color:var(--red-ink)}
.btn.xs{padding:3px 9px;font-size:11px;border-radius:7px}

/* ---------- Buttons ---------- */
.btn{border:none;border-radius:8px;padding:9px 16px;font-weight:600;font-size:13px;
  background:var(--brand);color:#fff;transition:.15s;white-space:nowrap;letter-spacing:.01em;box-shadow:none}
.btn:hover{background:var(--brand-dark)}
.btn:active{transform:translateY(.5px)}
.btn.brand{background:var(--brand)}
.btn.navy{background:var(--navy)}
.btn.navy:hover{background:var(--brand-darker)}
.btn.green{background:var(--green)} .btn.green:hover{filter:brightness(.94)}
.btn.gold{background:var(--gold);color:#fff} .btn.gold:hover{filter:brightness(.94)}
.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line-strong)}
.btn.ghost.onnavy{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff}
.btn.ghost.onnavy:hover{background:rgba(255,255,255,.26)}
.btn.danger{background:var(--red)} .btn.danger:hover{filter:brightness(.94)}
.btn.sm{padding:7px 13px;font-size:12px;border-radius:7px}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:none}

/* ---------- Read-only banner ---------- */
.readonly-banner{background:var(--gold-soft);color:var(--gold-ink);
  text-align:center;padding:9px 14px;font-size:12.5px;font-weight:600;border-bottom:1px solid #fcd9a8}

/* ---------- Layout ---------- */
.shell{display:flex; min-height:calc(100vh - 58px)}
.sidepanel{width:248px;flex-shrink:0;padding:14px 12px;color:var(--ink);
  background:var(--card);border-right:1px solid var(--line)}
.sidepanel h4{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin:18px 10px 8px;font-weight:700}
.navitem{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;color:var(--ink-2);
  font-weight:600;font-size:13.5px;cursor:pointer;margin-bottom:2px;border:1px solid transparent;transition:.13s}
.navitem:hover{background:var(--surface-3)}
.navitem.active{background:var(--brand-soft);color:var(--brand-dark);border-color:#f7d9d5}
.navitem .ic{width:18px;text-align:center;font-size:15px;opacity:.95}
.navitem .badge{margin-left:auto;background:var(--surface-3);color:var(--ink-2);border-radius:7px;padding:1px 8px;font-size:11.5px;font-weight:700}
.navitem.active .badge{background:#f8dedb;color:var(--brand-dark)}
.subitem{padding:8px 12px 8px 40px;font-size:12.5px;color:var(--muted);border-radius:8px;cursor:pointer;display:flex;gap:9px;align-items:center}
.subitem:hover{background:var(--surface-3);color:var(--ink-2)}
.subitem .cnt{margin-left:auto;font-weight:700}
.sdot{width:9px;height:9px;border-radius:3px;background:var(--muted);display:inline-block}
.sdot.new,.sdot.input{background:var(--gold)} .sdot.inprogress,.sdot.processing{background:var(--brand)} .sdot.completed{background:var(--green)}

.content{flex:1;padding:24px 28px;overflow:auto}
.page-head,.panel-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.page-head h2,.panel-head h2{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.panel-head{flex-direction:column;align-items:flex-start;gap:4px}
.panel-head .sub,.sub{color:var(--muted);font-size:13px;font-weight:400;margin:0;max-width:720px}
.page-head .spacer{flex:1}
.loading{color:var(--muted);font-size:13px;padding:20px 0}

/* remove any leftover blur usage */
.tile,.col,.cal-grid,.tools-status,.pubcard,.cw-card,.cw-hist,.vcard,.auth-card,.tool,.step{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* ---------- Count tiles ---------- */
.tiles{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.tile{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 20px;min-width:150px;border:1px solid var(--line);border-top:3px solid var(--line-strong);position:relative;overflow:hidden}
.tile .n{font-size:28px;font-weight:700;line-height:1;letter-spacing:-.02em}
.tile .l{font-size:11px;color:var(--muted);margin-top:6px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.tile.new,.tile.input{border-top-color:var(--gold)}
.tile.inprogress,.tile.processing{border-top-color:var(--brand)}
.tile.completed{border-top-color:var(--green)}
.tile.red{border-top-color:var(--red)} .tile.red .n{color:var(--red)}
.tile.green{border-top-color:var(--green)} .tile.green .n{color:var(--green)}
.tile.click{cursor:pointer;transition:.14s} .tile.click:hover{box-shadow:var(--shadow-md);border-color:#f7d9d5}

/* ---------- Kanban board ---------- */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.col{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);padding:15px;min-height:250px}
.col h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:14px;font-weight:700}
.col h3 .tag{width:10px;height:10px;border-radius:3px}
.tag-new,.tag-input{background:var(--gold)} .tag-inprogress,.tag-processing{background:var(--brand)} .tag-completed{background:var(--green)}
.col.drag-over{outline:2px dashed var(--brand);outline-offset:-5px;background:var(--brand-soft)}
.tcard{cursor:grab}
.tcard.dragging{opacity:.45;cursor:grabbing}
.vcard{border:1px solid var(--line);border-radius:9px;padding:13px 14px;margin-bottom:11px;background:var(--card);transition:.14s}
.vcard:hover{border-color:#f7d9d5;box-shadow:var(--shadow)}
.vcard.overdue{border-color:#f4c0c0;background:var(--red-soft)}
.vcard .t{font-weight:700;font-size:13.5px;margin-bottom:6px;word-break:break-word;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vcard .meta{font-size:11.5px;color:var(--muted);margin:6px 0}
.vcard .cap{font-size:12.5px;margin:6px 0;line-height:1.5}
.vcard .cap.muted-i{color:var(--muted);font-style:italic}
.vcard .tags{font-size:12px;color:var(--brand-dark);word-break:break-word;font-weight:500}
.vcard .row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vcard .actions{margin-top:10px}
.vcard.editable{border-color:#f7d9d5}
.vcard .vedit{margin:8px 0 4px;display:flex;flex-direction:column;gap:3px}
.vcard .vedit .fl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:6px}
.vcard .vedit .f{width:100%;font-size:12.5px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);box-sizing:border-box}
.vcard .vedit .f:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft,#fbebea)}
.vcard .vedit textarea.f{resize:vertical;line-height:1.5;font-family:inherit}
.vcard .vdrive{font-size:11.5px;margin:4px 0;color:var(--muted)}
.vcard .vdrive a{color:var(--brand-dark);font-weight:600;text-decoration:none}
.vcard .vdrive a:hover{text-decoration:underline}
.chip{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 10px;text-transform:uppercase;letter-spacing:.04em}
.chip.new,.chip.input{background:var(--gold-soft);color:var(--gold-ink)}
.chip.draft{background:var(--surface-3);color:var(--ink-2)}
.chip.inprogress,.chip.processing{background:var(--brand-soft);color:var(--brand-dark)}
.chip.completed{background:var(--green-soft);color:var(--green-ink)}
.select-tag{font-size:12px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--card)}
.empty{color:var(--muted);font-size:12.5px;text-align:center;padding:28px 0}

/* progress bars */
.bar{height:8px;background:var(--surface-3);border-radius:99px;overflow:hidden;margin-top:6px}
.bar .fill{height:100%;width:0;background:var(--brand);border-radius:99px;transition:width .3s ease}
.dl-progress{margin-top:6px}
.gen-progress{margin-top:10px}
.gp-msg{font-size:11.5px;color:var(--muted);margin-top:5px}

/* ---------- Calendar ---------- */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cal-head h3{font-size:17px;min-width:190px;text-align:center;font-weight:700}
.cal-grid{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface-2);color:var(--muted);border-bottom:1px solid var(--line)}
.cal-dow div{padding:10px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:center}
.cal-body{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-cell{min-height:108px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:6px 7px;position:relative;cursor:pointer;transition:.1s;background:var(--card)}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell:hover{background:var(--surface-2)}
.cal-cell.out{background:var(--surface-2);color:var(--line-strong);cursor:default}
.cal-cell.today .dnum{background:var(--brand);color:#fff;border-radius:7px;min-width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.cal-cell.red{background:var(--red-soft)}
.cal-cell.green{background:var(--green-soft)}
.dnum{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.cal-cell .ev{margin-top:4px;font-size:10.5px;border-radius:5px;padding:2px 7px;color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev.uploaded{background:var(--gold)}
.ev.submitted{background:var(--brand)}
.ev.approved{background:var(--brand-dark)}
.ev.published{background:var(--green)}
.ev.overdue{background:var(--red)}
.more{font-size:10px;color:var(--muted);margin-top:2px;font-weight:600}
.legend{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(38,22,19,.45);display:flex;align-items:center;justify-content:center;
  z-index:60;padding:20px}
.modal{background:var(--card);border-radius:14px;box-shadow:var(--shadow-lg);width:100%;max-width:500px;max-height:90vh;overflow:auto;border:1px solid var(--line)}
.modal.wide{max-width:720px}
.modal-head{padding:17px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal-head h3{font-size:16px;font-weight:700}
.modal-head .x{margin-left:auto;background:none;border:none;font-size:23px;color:var(--muted);line-height:1;cursor:pointer}
.modal-body{padding:20px 22px}
.modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
label.f{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin:12px 0 5px}
input.f,textarea.f,select.f{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;font-family:inherit;background:var(--card);color:var(--ink)}
input.f:focus,textarea.f:focus,select.f:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea.f{min-height:70px;resize:vertical}
.hr-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11.5px;margin:16px 0;text-transform:uppercase;letter-spacing:.06em}
.hr-or::before,.hr-or::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth-btn{width:100%;display:flex;align-items:center;gap:12px;justify-content:center;padding:11px;border-radius:8px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:13.5px;margin-bottom:10px;transition:.14s}
.oauth-btn:hover{background:var(--surface-2)}
.oauth-btn.done{border-color:var(--green);background:var(--green-soft)}
.oauth-btn .gi{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:12px}
.oauth-btn.g .gi{background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0)}
.oauth-btn.ig .gi{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.oauth-btn .ok{margin-left:auto;color:var(--green);font-weight:700}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tabs button{flex:1;padding:9px;border:1px solid var(--line);background:var(--card);border-radius:8px;font-weight:600;color:var(--muted);font-size:13px}
.tabs button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.note{font-size:11.5px;color:var(--ink-2);background:var(--surface-2);border-radius:8px;padding:10px 12px;margin-top:12px;border:1px solid var(--line)}
.err{color:var(--red);font-size:12px;margin-top:8px;min-height:15px}

/* ---------- Tools list + dots ---------- */
.tool{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:var(--card)}
.tool .ti{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;font-size:16px}
.tool .info{flex:1;min-width:0}
.tool .info .n{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:7px}
.tool .info .d{font-size:12px;color:var(--muted);margin-top:1px}
.tool .info .st{font-size:11.5px;margin-top:4px;font-weight:600}
.st.ok{color:var(--green)} .st.no{color:var(--muted)} .st.busy{color:var(--gold)} .st.err{color:var(--red)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot.g{background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.dot.r{background:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,.16)}
.ready{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:700;font-size:12.5px}
.badge-ok{background:var(--green-soft);color:var(--green-ink);border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:700}

/* ---------- Notifications ---------- */
.notif-wrap{position:relative}
.notif-panel{position:absolute;right:0;top:44px;width:352px;max-height:440px;overflow:auto;
  background:var(--card);border-radius:12px;box-shadow:var(--shadow-lg);border:1px solid var(--line);z-index:50;color:var(--ink)}
.notif-panel h4{padding:13px 15px;border-bottom:1px solid var(--line);font-size:13px;display:flex;align-items:center;font-weight:700;color:var(--ink)}
.notif{padding:11px 15px;border-bottom:1px solid var(--line-2);font-size:12.5px;display:flex;gap:10px;color:var(--ink)}
.notif .msg{color:var(--ink);font-weight:500}
.notif:last-child{border-bottom:none}
.notif .nd{color:var(--muted);font-size:11px;margin-top:3px}
.notif .kd{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--brand)}
.notif.remove .kd{background:var(--red)} .notif.upload .kd{background:var(--gold)}
.notif.publish .kd{background:var(--green)} .notif.approval .kd{background:var(--green)}
.count-dot{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;border-radius:99px;font-size:10px;font-weight:700;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:10px}
.toast{background:#261613;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow-lg);font-size:13px;max-width:340px;animation:slide .22s ease}
.toast.good{background:var(--green)} .toast.warn{background:var(--red)} .toast.gold{background:var(--gold)}
@keyframes slide{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ---------- presence dots (shared) ---------- */
.pdot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.pdot.on{background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.pdot.off{background:var(--line-strong);box-shadow:0 0 0 3px rgba(179,162,153,.14)}

/* ============================================================
   CONNECT PANEL
   ============================================================ */
.conn-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-bottom:22px}
.conn-card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:20px}
.cc-top{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.cc-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.cc-ico.instagram{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.cc-ico.google{background:var(--brand-soft)}
.cc-name{font-weight:700;font-size:15.5px;margin-bottom:4px}
.conn-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px}
.conn-badge.on{background:var(--green-soft);color:var(--green-ink)}
.conn-badge.off{background:var(--surface-3);color:var(--muted)}
.cc-desc{color:var(--muted);font-size:12.5px;margin:0 0 12px}
.conn-acct{font-size:13px;font-weight:600;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;margin-bottom:8px}
.conn-folder{font-size:12.5px;margin-bottom:8px}
.conn-mode{font-size:11.5px;color:var(--gold-ink);background:var(--gold-soft);border:1px solid #fcd9a8;border-radius:8px;padding:7px 10px;margin-bottom:8px}
.cc-act{margin-top:6px}
.cfg-note{font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:11px 13px}
.oauth-cfg{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:4px 4px}
.oauth-cfg>summary{cursor:pointer;font-weight:700;font-size:13px;padding:12px 16px;color:var(--ink);list-style:none}
.oauth-cfg>summary::-webkit-details-marker{display:none}
.oauth-cfg>summary::before{content:"▸ ";color:var(--muted)}
.oauth-cfg[open]>summary::before{content:"▾ "}
.ocfg-body{padding:6px 16px 16px}
.ocfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-bottom:10px}
@media(max-width:640px){.ocfg-grid{grid-template-columns:1fr}}
.ocfg-sep{border:none;border-top:1px solid var(--line);margin:16px 0 12px}
/* Top-bar AI status chip */
.ai-chip{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.ai-chip.ai-on{color:#22e08a;border-color:rgba(34,224,138,.55);background:rgba(34,224,138,.10)}
.ai-chip.ai-off{opacity:.7}
.cred-cell{white-space:nowrap}
.cred-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--muted)}
.cred-toggle input{cursor:pointer}

/* ============================================================
   LIST OF USERS
   ============================================================ */
.user-stats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.ustat{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:14px 20px;min-width:120px;border-top:3px solid var(--line-strong)}
.ustat b{font-size:26px;font-weight:700;display:block;line-height:1}
.ustat span{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.ustat.green{border-top-color:var(--green)} .ustat.green b{color:var(--green)}
.ustat.gray{border-top-color:var(--muted-2)}
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.user-card{background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:15px}
.uc-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.uav{width:42px;height:42px;border-radius:50%;flex-shrink:0;object-fit:cover}
.uav.ph{background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.uc-name{font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}
.uc-role{font-size:11.5px;color:var(--muted);text-transform:capitalize;margin-top:1px}
.uc-last{font-size:11.5px;color:var(--muted)}
.uc-last.on{color:var(--green);font-weight:600}
.uact{font-size:11.5px;color:var(--brand-dark);margin-top:3px;background:var(--brand-soft);border-radius:6px;padding:2px 8px;display:inline-block}
.uc-svcs{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.usvc{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px}
.usvc.g{background:var(--brand-soft);color:var(--brand-dark)}
.usvc.i{background:#fdeef4;color:#bc1888}
.usvc.none{background:var(--surface-3);color:var(--muted-2)}

/* ---------- Video preview ---------- */
.video-preview{width:100%;max-height:300px;border-radius:10px;background:#000;margin-top:8px;display:block}
.pre-list .pre-item{margin-bottom:12px}
.pre-name{font-size:12px;color:var(--muted);margin-bottom:4px;word-break:break-word}
.thumb-btn{background:none;border:none;padding:0;cursor:pointer}

/* ---------- Accounts popup ---------- */
.acct-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px 13px;margin-bottom:10px;background:var(--card)}
.acct-row .ai{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px}
.ai.g{background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0)}
.ai.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.acct-row .adet{flex:1;min-width:0}
.acct-row .adet .ap{font-weight:700;font-size:13px}
.acct-row .adet .aa{font-size:12px;color:var(--muted);word-break:break-word}
.acct-row .adet .aa.off{color:var(--red)}

/* ---------- Published panel ---------- */
.pubcard{display:flex;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.pubcard.focus-flash{outline:2px solid var(--brand);outline-offset:2px;animation:flash 1.6s ease}
@keyframes flash{0%,100%{box-shadow:var(--shadow)}30%{box-shadow:0 0 0 4px var(--brand-soft)}}
.pubcard .pub-main{flex:1;min-width:0}
.pubcard .t{font-weight:700;font-size:15px;margin-bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pubcard .cap{font-size:13px;margin:6px 0;line-height:1.5}
.pubcard .tags{font-size:12px;color:var(--brand-dark);word-break:break-word;margin-bottom:4px;font-weight:500}
.pubcard .meta{font-size:11.5px;color:var(--muted)}
.pubcard .row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pub-side{width:270px;flex-shrink:0;border-left:1px solid var(--line);padding-left:16px}
.likes-field{background:var(--brand-soft);border-radius:10px;padding:12px;text-align:center;margin-bottom:12px}
.likes-field .lf-n{font-size:24px;font-weight:700;color:var(--brand-dark)}
.likes-field .lf-l{font-size:11px;color:var(--brand-dark);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.cmt-head{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.cmt-list{max-height:240px;overflow:auto}
.cmt{border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:8px;background:var(--card)}
.cmt-top{display:flex;align-items:center;justify-content:space-between;font-size:12.5px}
.cmt-likes{color:var(--brand-dark);font-weight:700;font-size:11.5px}
.cmt-text{font-size:12.5px;margin-top:3px;color:var(--ink-2)}
@media(max-width:820px){.pubcard{flex-direction:column}.pub-side{width:auto;border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:12px}}

/* ---------- Notification click + comment popup ---------- */
.notif.clickable{cursor:pointer}
.notif.clickable:hover{background:var(--surface-2)}
.comment-pop{background:var(--card);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--brand);cursor:pointer;max-width:360px}
.comment-pop .cp-head{font-weight:700;font-size:12.5px;margin-bottom:4px;color:var(--ink)}
.comment-pop .cp-body{font-size:12.5px;color:var(--ink)}
.comment-pop .cp-cta{margin-top:6px;font-size:12px;font-weight:700;color:var(--brand-dark);text-decoration:underline}

/* ---------- Content Writing ---------- */
.cw-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.cw-prov{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cw-lbl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.prov-pill{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:8px 14px;font-weight:700;font-size:13px;color:var(--ink)}
.prov-pill small{font-weight:400;color:var(--muted)}
.prov-pill.on{background:var(--brand);color:#fff;border-color:transparent}
.prov-pill.on small{color:#f8e2e0}
.cw-input{display:flex;gap:10px;flex-wrap:wrap}
.cw-input .f{flex:1;min-width:240px}
.cw-h{margin:24px 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.cw-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:16px;overflow:hidden}
.cw-card-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cw-card-head .cw-title{font-weight:700;font-size:15px;flex:1;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cw-toggle{font-size:13px;line-height:1;padding:4px 8px;min-width:26px}
.cw-card.closed .cw-card-head{border-bottom:none}
.cw-body{padding:8px 22px 20px;color:var(--ink-2)}
.cw-body.md h2{font-size:20px;margin:16px 0 8px} .cw-body.md h3{font-size:16px;margin:14px 0 6px}
.cw-body.md h4,.cw-body.md h5{font-size:14px;margin:12px 0 6px}
.cw-body.md p{margin:9px 0;line-height:1.65} .cw-body.md ul{margin:8px 0 8px 20px} .cw-body.md li{margin:4px 0}
.cw-body.md b{font-weight:700}
.cw-hist{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 15px;margin-bottom:9px}
.cw-hist-main{flex:1;min-width:0}
.cw-meta{font-size:11.5px;color:var(--muted);margin-left:8px}
.cs-test{font-size:12px;margin-top:10px;min-height:16px;word-break:break-word}
.cs-test.ok{color:var(--green);font-weight:600}
.cs-test.bad{color:var(--red);font-weight:600}
.cw-title-in{font-weight:700;font-size:15px;border:1px solid transparent;border-radius:8px;padding:5px 8px;background:transparent;min-width:200px;max-width:420px;flex:0 1 auto;color:var(--ink)}
.cw-title-in:hover{border-color:var(--line)} .cw-title-in:focus{outline:none;border-color:var(--brand);background:var(--card)}
.save-ind{font-size:11.5px;color:var(--muted);font-weight:600} .save-ind.ok{color:var(--green)}
.cw-edit{width:100%;min-height:340px;border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);padding:16px 22px;font-family:"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.65;resize:vertical;background:var(--card);color:var(--ink)}
.cw-edit:focus{outline:none;border-color:var(--brand)}
.dl-menu{position:relative}
.dl-list{position:absolute;right:0;top:38px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);z-index:30;min-width:170px;overflow:hidden}
.dl-list button{display:block;width:100%;text-align:left;background:transparent;border:none;padding:11px 15px;font-size:13px;font-weight:600;color:var(--ink)}
.dl-list button:hover{background:var(--brand-soft)}

/* ---------- Tools status strip ---------- */
.tools-status{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px 18px;margin-bottom:20px;flex-wrap:wrap}
.tools-status .ring{--p:0;width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--brand) calc(var(--p)*1%), var(--surface-3) 0);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:var(--ink)}
.tools-status .ring span{width:36px;height:36px;background:var(--card);border-radius:50%;display:flex;align-items:center;justify-content:center}
.tools-status .ts-txt{font-size:12.5px}
.tools-status .ts-txt b{font-size:13px}
.tstat-row{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px 16px}
.tstat{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:12.5px;color:var(--ink)}
.ts-chip{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 10px;margin:2px 4px 2px 0;display:inline-block}
.ts-chip.on{background:var(--green-soft);color:var(--green-ink)}
.ts-chip.off{background:var(--red-soft);color:var(--red-ink)}
.tools-status .sp{flex:1}

/* ---------- Login / auth page ---------- */
.auth{min-height:calc(100vh - 58px);display:flex;align-items:center;justify-content:center;padding:34px 20px}
.auth-inner{width:100%;max-width:900px;text-align:center}
.auth-title{font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink);animation:floatIn .6s ease both}
.auth-sub{color:var(--muted);margin:10px 0 30px;font-size:15px;animation:floatIn .7s ease both}
.auth-grid{display:grid;grid-template-columns:1fr 1.18fr;gap:22px;text-align:left;align-items:stretch}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);padding:28px;position:relative;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.auth-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--brand)}
.auth-card:hover{box-shadow:var(--shadow-lg);border-color:#f7d9d5}
.setup-card{display:flex;flex-direction:column;gap:4px;justify-content:center}
.ac-ico{width:52px;height:52px;border-radius:13px;background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;margin-bottom:10px}
.ac-ico.grad{background:var(--brand);color:#fff}
.auth-card h3{font-size:18px;font-weight:700;margin-bottom:4px}
.auth-card>p{color:var(--muted);font-size:13px;margin:0 0 16px}
.auth-card .f{margin-bottom:10px}
.btn.full{width:100%;justify-content:center;margin-top:4px;text-align:center}
.auth-links{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.auth-links a{color:var(--brand-dark);font-weight:700}
.auth-tabs{display:flex;gap:5px;margin:2px 0 15px;background:var(--surface-3);border-radius:10px;padding:4px}
.auth-tabs button{flex:1;padding:8px 6px;border:none;background:transparent;border-radius:8px;font-weight:700;color:var(--muted);font-size:12.5px;transition:.15s}
.auth-tabs button.active{background:var(--card);color:var(--brand-dark);box-shadow:var(--shadow)}
.auth-pane{animation:fadeIn .28s ease}
.auth-hint{font-size:11.5px;color:var(--muted);margin-top:12px;text-align:center}
.ok-msg{color:var(--green);font-weight:700;font-size:12.5px;margin:2px 0 8px}
.pop{opacity:0;animation:popIn .5s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes popIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes floatIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:760px){.auth-grid{grid-template-columns:1fr}}

@media(max-width:860px){.board{grid-template-columns:1fr}.sidepanel{width:210px}}

/* ============================================================
   V16 — content-type picker, download-access manager
   ============================================================ */
/* content type (Reel/Post/Story) */
.ctype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ctype{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:16px 12px;text-align:center;cursor:pointer;transition:.14s}
.ctype:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);transform:translateY(-2px)}
.ct-ico{font-size:26px;line-height:1;margin-bottom:8px}
.ct-name{font-weight:700;font-size:14px;color:var(--ink)}
.ct-desc{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}
@media(max-width:560px){.ctype-grid{grid-template-columns:1fr}}

/* locked download button */
.btn.locked{opacity:.8;border-style:dashed;color:var(--muted)}

/* download-access entry row in Connect */
.da-entry{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:18px}
.da-entry b{font-size:14px}
.da-entry .sub{margin-top:2px}
.da-entry .btn{margin-left:auto;flex-shrink:0}

/* download-access manager modal */
.da-quick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.da-quick .f{margin:0}
.da-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.da-col{border:1px solid var(--line);border-radius:11px;background:var(--surface-2);min-height:200px;overflow:hidden}
.da-col.granted{background:var(--brand-soft)}
.da-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line);background:var(--card)}
.da-col.granted h4{color:var(--brand-dark)}
.da-list{padding:12px;min-height:150px;display:flex;flex-direction:column;gap:8px}
.da-list[data-col].drag-over{background:var(--brand-soft);outline:2px dashed var(--brand);outline-offset:-6px}
.da-chip{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 10px;cursor:grab;box-shadow:var(--shadow)}
.da-chip.dragging{opacity:.45}
.da-chip.locked{cursor:default;opacity:.85;background:var(--surface-3)}
.da-av{width:28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}
.da-nm{font-weight:600;font-size:13px;color:var(--ink)}
.da-nm i{color:var(--muted);font-weight:500;font-style:normal;font-size:11px}
.da-move{margin-left:auto;background:var(--surface-3);border:1px solid var(--line);border-radius:7px;width:26px;height:24px;font-size:12px;color:var(--muted);cursor:pointer}
.da-move:hover{background:var(--brand-soft);color:var(--brand-dark)}
@media(max-width:560px){.da-cols{grid-template-columns:1fr}}

/* V17 — awaiting-approval hint */
.await-approval{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--gold);background:var(--gold-soft);border:1px solid #fcd9a8;border-radius:7px;padding:5px 10px}

/* ============================================================
   V18 — video detail, notifications page, dropzones, badges
   ============================================================ */
/* input card description snippet */
.vdesc{font-size:12px;color:var(--muted);margin:6px 0;line-height:1.45;background:var(--surface-2);border:1px solid var(--line-2);border-radius:7px;padding:6px 9px}
.muted-i{color:var(--muted);font-style:italic}

/* video detail modal */
.vd-desc-ro{font-size:13px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:38px}
.vd-comments{max-height:230px;overflow:auto;margin-bottom:10px}
.vd-cmt{border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:8px;background:var(--card)}
.vd-cmt-h{font-size:12px;color:var(--muted)}
.vd-cmt-h b{color:var(--ink)}
.vd-cmt-h .tag-user{color:var(--brand-dark);font-weight:600}
.vd-cmt-t{margin-left:6px}
.vd-cmt-b{font-size:13px;color:var(--ink-2);margin-top:3px}
.vd-add textarea{min-height:56px}
.vd-add-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}

/* sidebar unread badge */
.nav-unread{margin-left:auto;background:var(--red);color:#fff;border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;padding:0 5px}
.navitem .nav-unread + .badge{margin-left:6px}

/* notifications panel read/unread */
.notif.is-unread{background:var(--brand-soft)}
.notif.is-unread .msg{font-weight:600}
.notif.is-read{opacity:.72}

/* notifications full page */
.nf-tabs{display:flex;gap:4px;background:var(--surface-3);border-radius:9px;padding:3px}
.nf-tab{border:none;background:transparent;border-radius:7px;padding:6px 14px;font-weight:600;font-size:12.5px;color:var(--muted);cursor:pointer}
.nf-tab.active{background:var(--card);color:var(--brand-dark);box-shadow:var(--shadow)}
.nf-item{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden}
.nf-item.is-unread{border-left:3px solid var(--brand)}
.nf-item.is-read{opacity:.82}
.nf-main{display:flex;align-items:flex-start;gap:11px;padding:13px 15px}
.nf-main .kd{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--brand)}
.nf-main .kd.remove{background:var(--red)} .nf-main .kd.upload{background:var(--gold)}
.nf-main .kd.publish{background:var(--green)} .nf-main .kd.comment{background:var(--brand-dark)}
.nf-body{flex:1;min-width:0}
.nf-msg{font-size:13.5px;color:var(--ink)}
.nf-meta{font-size:11.5px;color:var(--muted);margin-top:3px}
.nf-open{font-weight:600}
.nf-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.nf-readtag{font-size:11px;color:var(--muted)}
.nf-thread{border-top:1px solid var(--line-2);background:var(--surface-2);padding:12px 15px}
.nf-reply{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:7px;font-size:13px}
.nf-reply .nf-rt{font-size:11px;color:var(--muted);margin-left:6px}
.nf-reply-box{display:flex;gap:8px;margin-top:8px}
.nf-reply-box .f{flex:1}

/* dropzones */
.dropzone{border:2px dashed var(--line-strong);border-radius:10px;padding:18px;text-align:center;color:var(--muted);cursor:pointer;background:var(--surface-2);transition:.14s}
.dropzone:hover{border-color:var(--brand);background:var(--brand-soft)}
.dropzone.drag-over{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}
.dz-ico{font-size:22px;margin-bottom:4px}
.dz-browse{color:var(--brand-dark);font-weight:700;text-decoration:underline}
.cal-cell.drop-hot{outline:2px dashed var(--brand);outline-offset:-3px;background:var(--brand-soft)}

/* ============================================================
   V19 — countdown, reports, chat files/mentions, calls, filter
   ============================================================ */
/* deadline countdown on cards */
.countdown{display:inline-block;font-size:11.5px;font-weight:700;color:var(--brand-dark);background:var(--brand-soft);border:1px solid #f7d9d5;border-radius:7px;padding:3px 9px;margin:6px 0}
.countdown.over{color:var(--red-ink);background:var(--red-soft);border-color:#f4c0c0}
.countdown.done{color:var(--green-ink);background:var(--green-soft);border-color:#bfe6cd}
.countdown.done.over{color:var(--red-ink);background:var(--red-soft);border-color:#f4c0c0}
.vdone{font-size:11.5px;color:var(--green-ink);font-weight:600;margin:2px 0 6px}

/* reports table */
.rep-table-wrap{overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.rep-table{width:100%;border-collapse:collapse;font-size:13px}
.rep-table th{text-align:left;background:var(--surface-2);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.rep-table td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
.rep-table tr:last-child td{border-bottom:none}
.rep-name{font-weight:600;color:var(--ink)}
.perf{font-weight:700;font-size:12px;border-radius:999px;padding:2px 10px;white-space:nowrap}
.perf.early{background:var(--green-soft);color:var(--green-ink)}
.perf.late{background:var(--red-soft);color:var(--red-ink)}
.perf.none{background:var(--surface-3);color:var(--muted)}
.perf.pending{background:var(--gold-soft);color:var(--gold-ink)}

/* notification filter bar */
.nf-filter{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.nf-filter .f{max-width:280px}
.nf-filter #nf-date{max-width:170px}

/* chat attachments + mention */
.att-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:var(--card);font-size:15px;flex-shrink:0}
.att-btn:hover{background:var(--surface-3)}
.nf-att-preview{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.att-file{display:inline-block;font-size:12px;background:var(--surface-3);border-radius:6px;padding:3px 8px;color:var(--ink-2)}
.nf-atts{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.att-img{max-width:150px;max-height:120px;border-radius:8px;border:1px solid var(--line)}
.nf-reply{position:relative}
.nf-del{position:absolute;top:6px;right:6px;background:none;border:none;cursor:pointer;font-size:12px;opacity:.5}
.nf-del:hover{opacity:1}
.mention-pop{position:absolute;left:0;bottom:40px;width:240px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);z-index:20;overflow:hidden}
.ment-item{display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:13px;cursor:pointer}
.ment-item:hover{background:var(--brand-soft)}
.ment-av{width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px}
.ment-ad{font-size:10px;color:var(--muted)}

/* incoming call toast */
.call-incoming{background:#261613;color:#fff;border-radius:12px;padding:14px 16px;box-shadow:var(--shadow-lg);min-width:250px}
.ci-title{font-weight:700;font-size:13px}
.ci-name{font-size:13px;margin:4px 0 10px;color:var(--line-strong)}
.ci-btns{display:flex;gap:8px}

/* call window */
.call-ov{position:fixed;inset:0;background:rgba(26,14,12,.86);z-index:120;display:flex;align-items:center;justify-content:center}
.call-box{width:min(760px,92vw);background:#1d100e;border-radius:16px;padding:16px;box-shadow:var(--shadow-lg)}
.call-status{color:#efebe3;font-weight:600;text-align:center;margin-bottom:12px}
.call-videos{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.call-remote{width:100%;height:100%;object-fit:cover;background:#000}
.call-local{position:absolute;right:12px;bottom:12px;width:150px;border-radius:9px;border:2px solid rgba(255,255,255,.6);object-fit:cover;background:#111}
.call-controls{display:flex;gap:10px;justify-content:center;margin-top:14px}

/* ============================================================
   V20 — Messenger chat, video edit, notif bulk-select
   ============================================================ */
.vdue{font-size:11.5px;color:var(--ink-2);font-weight:600;margin:6px 0 2px}

/* notif bulk select */
.nf-selall{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600}
.nf-check{margin-top:3px;flex-shrink:0}

/* new-chat modal */
.nc-users{max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:8px;margin-bottom:6px}
.nc-user{display:flex;align-items:center;gap:8px;padding:5px 6px;font-size:13px;border-radius:6px;cursor:pointer}
.nc-user:hover{background:var(--brand-soft)}

/* ---- Messenger launcher + list ---- */
/* Round 3D launcher with a blinking eye — draggable anywhere on screen */
.msgr-launcher{position:fixed;right:22px;bottom:22px;z-index:1200;width:64px;height:64px;border-radius:50%;border:none;padding:0;
  background:radial-gradient(circle at 34% 28%, #ff0112 0%, #a90006 46%, #880002 100%);
  box-shadow:0 12px 24px rgba(136,0,2,.45), inset 0 3px 7px rgba(255,255,255,.6), inset 0 -7px 12px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none;transition:transform .16s ease, box-shadow .16s ease}
.msgr-launcher:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 16px 30px rgba(136,0,2,.5), inset 0 3px 7px rgba(255,255,255,.65), inset 0 -7px 12px rgba(0,0,0,.3)}
.msgr-launcher:active{cursor:grabbing}
.msgr-launcher.dragging{transition:none;transform:scale(1.1);cursor:grabbing;opacity:.96}
/* glossy top highlight for the 3D “bubble” look */
.msgr-launcher::after{content:"";position:absolute;top:8px;left:14px;width:24px;height:14px;border-radius:50%;
  background:rgba(255,255,255,.55);filter:blur(2.5px);pointer-events:none}
/* the eye */
.msgr-eye{position:relative;width:36px;height:36px;border-radius:50%;background:var(--card);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.28), inset 0 -1px 2px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transform-origin:center;animation:msgrBlink 4.4s infinite}
.msgr-pupil{position:relative;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #9d0004 0%, #470100 70%);
  animation:msgrLook 6s infinite}
.msgr-pupil::after{content:"";position:absolute;top:2px;left:3px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.95)}
.msgr-launcher.dragging .msgr-eye,.msgr-launcher.dragging .msgr-pupil{animation-play-state:paused}
@keyframes msgrBlink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}97%{transform:scaleY(1)}}
@keyframes msgrLook{0%,35%{transform:translateX(0)}45%,62%{transform:translateX(-6px)}72%,88%{transform:translateX(5px)}96%,100%{transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){.msgr-eye,.msgr-pupil{animation:none}}
.msgr-badge{position:absolute;top:-2px;right:-2px;background:var(--red);color:#fff;border-radius:999px;min-width:20px;height:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.msgr-list{position:fixed;right:22px;bottom:88px;z-index:1190;width:300px;max-height:60vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg)}
.msgr-list-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.msgr-conv{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.msgr-conv:hover{background:var(--surface-2)}
.msgr-conv.unread .msgr-conv-t{font-weight:800}
.msgr-av{width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.msgr-conv-main{flex:1;min-width:0}
.msgr-conv-t{font-size:13.5px;color:var(--ink)}
.grp-tag{font-size:10px;color:var(--muted);font-weight:600}
.msgr-conv-last{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgr-unread{background:var(--red);color:#fff;border-radius:999px;min-width:18px;height:18px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}

/* ---- chat window ---- */
.msgr-window{position:fixed;bottom:22px;z-index:111;width:300px;height:420px;background:var(--card);border:1px solid var(--line);border-radius:14px 14px 10px 10px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden}
.msgr-window.flash{animation:flash 1s ease}
.msgr-win-head{background:var(--brand);color:#fff;padding:10px 13px;display:flex;align-items:center;justify-content:space-between}
.msgr-win-title{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgr-win-x{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1}
.msgr-msgs{flex:1;overflow:auto;padding:12px;background:var(--page);display:flex;flex-direction:column;gap:8px}
.mw-msg{display:flex}
.mw-msg.me{justify-content:flex-end}
.mw-bubble{max-width:80%;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:7px 10px}
.mw-msg.me .mw-bubble{background:var(--brand);color:#fff;border-color:transparent}
.mw-auth{font-size:10.5px;color:var(--brand-dark);font-weight:700;margin-bottom:2px}
.mw-text{font-size:13px;line-height:1.4;word-break:break-word}
.mw-time{font-size:9.5px;opacity:.7;margin-top:3px}
.mw-msg.me .mw-time{color:#f8e2e0}
.mw-del{cursor:pointer;text-decoration:underline}
.chat-at{color:#880002;font-weight:700}
.mw-msg.me .chat-at{color:#f8e2e0}
.chat-ref{background:rgba(136,0,2,.12);border-radius:5px;padding:0 5px;font-weight:600}
.msgr-inbar{display:flex;align-items:center;gap:6px;padding:8px;border-top:1px solid var(--line)}
.msgr-inbar .f{font-size:13px;padding:8px 10px}
.mw-attp{padding:0 8px 6px;display:flex;gap:5px;flex-wrap:wrap}
@media(max-width:640px){.msgr-window{right:8px!important;width:calc(100vw - 16px)}}

/* V21 — form hint text */
.hint{font-size:11px;color:var(--muted);margin:-2px 0 6px}

/* V22 — cancelled task badge */
.tr-badge.cancelled{background:#fef3e2;color:var(--gold-ink)}
.trow.done.cancelled{opacity:.85}

/* ============================================================
   V26 — THEME PALETTES
   :root above is DAYLIGHT (light). Below: dark themes. Each only
   re-maps variables — every component inherits the new look.
   ============================================================ */
/* shared dark neutrals for all dark themes */
body[data-theme="cosmic"],body[data-theme="midnight"],body[data-theme="emerald"],
body[data-theme="rose"],body[data-theme="amber"],body[data-theme="corporate"]{
  --page:#140b0a; --card:#261815; --surface-2:#301e1b; --surface-3:#3d2824;
  --ink:#f9eeec; --ink-2:#e2d7c5; --muted:#b09b91; --muted-2:#8e7b71;
  --line:#4c322e; --line-2:#3b2622; --line-strong:#725a4e;
  --green:#22c55e; --green-soft:rgba(34,197,94,.16);  --green-ink:#6ee7a0;
  --gold:#f59e0b;  --gold-soft:rgba(245,158,11,.16);  --gold-ink:#fbbf5a;
  --red:#f05252;   --red-soft:rgba(240,82,82,.18);    --red-ink:#fca5a5;
  --topbar-ink:#ffffff; --topbar-line:rgba(255,255,255,.07);
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 6px 18px rgba(0,0,0,.45);
  --shadow-lg:0 20px 48px rgba(0,0,0,.6);
}
body[data-theme="cosmic"]{
  --brand:#ed0010; --brand-dark:#c8000a; --brand-darker:#a80006; --brand-soft:rgba(237,0,16,.18);
  --grad:linear-gradient(90deg,#ed0010,#ef0010); --grad-2:linear-gradient(135deg,#e8000f,#ef0010);
  --topbar-bg:linear-gradient(90deg,#311c19,#211311);
  --side-bg:linear-gradient(180deg,#271714,#1b0f0d);
  --app-bg:radial-gradient(1300px 760px at 18% -12%, #351f1b 0%, #160d0b 55%);
  --app-glow-1:rgba(200,0,10,.24); --app-glow-2:rgba(209,0,12,.16);
}
body[data-theme="midnight"]{
  --brand:#d1000c; --brand-dark:#b50007; --brand-darker:#9e0005; --brand-soft:rgba(209,0,12,.18);
  --grad:linear-gradient(90deg,#d0000c,#d1000c); --grad-2:linear-gradient(135deg,#b50007,#d1000c);
  --topbar-bg:linear-gradient(90deg,#2b1714,#1e100e);
  --side-bg:linear-gradient(180deg,#221311,#1a0e0d);
  --app-bg:radial-gradient(1300px 760px at 18% -12%, #351d19 0%, #140b0a 55%);
  --app-glow-1:rgba(208,0,12,.22); --app-glow-2:rgba(181,0,7,.16);
}
body[data-theme="emerald"]{
  --brand:#10b981; --brand-dark:#059669; --brand-darker:#047857; --brand-soft:rgba(16,185,129,.18);
  --grad:linear-gradient(90deg,#34d399,#10b981); --grad-2:linear-gradient(135deg,#2dd4bf,#10b981);
  --topbar-bg:linear-gradient(90deg,#082a20,#08130f);
  --side-bg:linear-gradient(180deg,#0a1c16,#07120d);
  --app-bg:radial-gradient(1300px 760px at 18% -12%, #0b2c22 0%, #06110d 55%);
  --app-glow-1:rgba(16,185,129,.22); --app-glow-2:rgba(45,212,191,.14);
}
body[data-theme="rose"]{
  --brand:#fb7185; --brand-dark:#f43f5e; --brand-darker:#e11d48; --brand-soft:rgba(244,63,94,.18);
  --grad:linear-gradient(90deg,#fb7185,#f43f5e); --grad-2:linear-gradient(135deg,#f472b6,#f43f5e);
  --topbar-bg:linear-gradient(90deg,#2b0f1c,#160a11);
  --side-bg:linear-gradient(180deg,#1d0d15,#12080d);
  --app-bg:radial-gradient(1300px 760px at 18% -12%, #2b1121 0%, #120810 55%);
  --app-glow-1:rgba(244,63,94,.22); --app-glow-2:rgba(236,72,153,.15);
}
body[data-theme="amber"]{
  --brand:#f59e0b; --brand-dark:#d97706; --brand-darker:#b45309; --brand-soft:rgba(245,158,11,.19);
  --grad:linear-gradient(90deg,#fbbf24,#f59e0b); --grad-2:linear-gradient(135deg,#f59e0b,#ef4444);
  --topbar-bg:linear-gradient(90deg,#2b1d07,#17110a);
  --side-bg:linear-gradient(180deg,#1d1509,#120d07);
  --app-bg:radial-gradient(1300px 760px at 18% -12%, #2b200c 0%, #120d06 55%);
  --app-glow-1:rgba(245,158,11,.22); --app-glow-2:rgba(239,68,68,.13);
}
/* ---- Corporate / Executive (navy) — the default look ----
   Primary navy #470100, deep #381f1b, pale accent #f3dfdd. A restrained,
   professional palette: deep-navy chrome, mid-navy cards, pale-blue accents. */
body[data-theme="corporate"]{
  /* navy neutrals: page + surfaces + text + lines */
  --page:#2f1a16; --card:#442520; --surface-2:#470100; --surface-3:#4e0100;
  --ink:#f9eeec; --ink-2:#eee0c9; --muted:#bfa79b; --muted-2:#9f8578;
  --line:#613b35; --line-2:#470100; --line-strong:#7b5847;
  /* status accents tuned for navy */
  --green:#2FB37A; --green-soft:rgba(47,179,122,.16);  --green-ink:#7FE3B6;
  --gold:#E0A32E;  --gold-soft:rgba(224,163,46,.16);   --gold-ink:#F6C765;
  --red:#E5544B;   --red-soft:rgba(229,84,75,.18);     --red-ink:#F7A9A3;
  /* brand: navy primary, pale-blue soft highlight */
  --brand:#470100; --brand-dark:#640000; --brand-darker:#381f1b; --brand-soft:rgba(243,223,221,.16);
  --grad:linear-gradient(90deg,#470100,#640000); --grad-2:linear-gradient(135deg,#640000,#470100);
  --navy:#381f1b; --navy-2:#470100; --navy-3:#640000;
  /* app chrome — deep navy topbar + sidebar */
  --topbar-bg:linear-gradient(90deg,#381f1b,#281613);
  --side-bg:linear-gradient(180deg,#381f1b,#281613);
  --app-bg:radial-gradient(1300px 760px at 18% -12%, #412420 0%, #201210 55%);
  --app-glow-1:rgba(71,1,0,.38); --app-glow-2:rgba(243,223,221,.06);
  --topbar-ink:#ffffff; --topbar-line:rgba(243,223,221,.10);
}
/* Corporate: quiet, uniform navy nav icons (no rainbow) + pale-accent section labels */
body[data-theme="corporate"] .navitem .ic{background:linear-gradient(135deg,#640000,#470100);
  box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(243,223,221,.10)}
body[data-theme="corporate"] .sidepanel h4{color:#f3dfdd;opacity:.9}
body[data-theme="corporate"] .navitem.active{background:linear-gradient(90deg,rgba(243,223,221,.14),transparent 82%)}
body[data-theme="corporate"] .navitem.active .ic{box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 0 2px rgba(243,223,221,.30)}
body[data-theme="corporate"] a{color:#f3dfdd}
body[data-theme="corporate"] code{color:#f3dfdd;background:rgba(243,223,221,.10)}

/* Daylight uses :root defaults; nothing to override */

/* ---- Topbar themed ---- */
.topbar{background:var(--topbar-bg);border-bottom:1px solid var(--topbar-line)}
.topbar .mark{background:var(--grad-2);border:1px solid rgba(255,255,255,.35);box-shadow:0 4px 12px rgba(0,0,0,.35)}

/* ============================================================
   V26 — Sidebar redesign (reference look)
   ============================================================ */
.sidepanel{background:var(--side-bg);border-right:1px solid var(--side-line);padding:16px 12px;transition:width .18s ease}
.sidepanel h4{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin:20px 10px 10px;font-weight:800}
.sidepanel h4::before{content:"✦";font-size:9px;opacity:.85}
.sidepanel h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.navitem{gap:12px;padding:9px 11px;border-radius:12px;color:var(--ink-2);font-size:13.5px;position:relative;border:1px solid transparent}
.navitem:hover{background:var(--surface-2)}
.navitem .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#fff;background:var(--grad-2);box-shadow:0 4px 10px rgba(0,0,0,.28);flex-shrink:0;opacity:1}
.navitem[data-nav="input"] .ic{background:linear-gradient(135deg,#ef0010,#d1000c)}
.navitem[data-nav="calendar"] .ic{background:linear-gradient(135deg,#b3a299,#64544c)}
.navitem[data-nav="published"] .ic{background:linear-gradient(135deg,#ed0010,#ef0010)}
.navitem[data-nav="content"] .ic{background:linear-gradient(135deg,#10b981,#059669)}
.navitem[data-nav="reports"] .ic{background:linear-gradient(135deg,#e8000f,#c8000a)}
.navitem[data-nav="notifications"] .ic{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.navitem[data-nav="connect"] .ic{background:linear-gradient(135deg,#b50007,#6c0000)}
.navitem[data-nav="users"] .ic{background:linear-gradient(135deg,#ec4899,#db2777)}
.navitem .nav-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navitem.active{background:linear-gradient(90deg,var(--brand-soft),transparent 82%);color:var(--ink);
  border-color:transparent;box-shadow:0 0 0 1px var(--brand-soft) inset}
.navitem.active::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:0 4px 4px 0;
  background:var(--brand);box-shadow:0 0 12px var(--brand)}
.navitem.active .ic{box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 0 2px var(--brand-soft)}
.navitem .badge{margin-left:auto;background:var(--surface-3);color:var(--muted)}
.navitem.active .badge{background:var(--brand);color:#fff}
.subitem{padding:8px 12px 8px 12px;gap:12px;color:var(--muted)}
.subitem:hover{background:var(--surface-2);color:var(--ink-2)}
.side-collapse{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;background:var(--surface-2)}
.side-collapse:hover{color:var(--ink);border-color:var(--brand-soft)}
.side-collapse .sc-ic{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:transform .2s}
/* collapsed rail */
.sidepanel.collapsed{width:76px}
.sidepanel.collapsed h4{margin:14px 8px 8px;height:1px;font-size:0;overflow:hidden;background:var(--line);border-radius:2px}
.sidepanel.collapsed h4::before,.sidepanel.collapsed h4::after{display:none}
.sidepanel.collapsed .navitem{justify-content:center;padding:9px}
.sidepanel.collapsed .navitem .nav-txt,
.sidepanel.collapsed .navitem .badge,
.sidepanel.collapsed .navitem .nav-unread,
.sidepanel.collapsed .subitem .nav-txt,
.sidepanel.collapsed .side-collapse .nav-txt{display:none}
.sidepanel.collapsed .subitem{justify-content:center}
.sidepanel.collapsed .side-collapse{justify-content:center}
.sidepanel.collapsed .side-collapse .sc-ic{transform:rotate(180deg)}

/* subtle depth on dark cards */
body:not([data-theme="daylight"]) .tile,
body:not([data-theme="daylight"]) .col,
body:not([data-theme="daylight"]) .cw-card,
body:not([data-theme="daylight"]) .pubcard,
body:not([data-theme="daylight"]) .conn-card,
body:not([data-theme="daylight"]) .user-card,
body:not([data-theme="daylight"]) .tools-status,
body:not([data-theme="daylight"]) .auth-card{
  border-color:var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, var(--shadow-md);
}

/* ============================================================
   V26 — Theme picker popover
   ============================================================ */
.theme-pop{position:fixed;z-index:1300;width:250px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;color:var(--ink);animation:popIn .18s ease}
.tp-head{padding:12px 15px;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border-bottom:1px solid var(--line)}
.tp-grid{padding:8px}
.tp-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:1px solid transparent;
  border-radius:10px;padding:9px 10px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.tp-item:hover{background:var(--surface-2)}
.tp-item.on{border-color:var(--brand-soft);background:var(--brand-soft)}
.tp-sw{width:22px;height:22px;border-radius:7px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.3)}
.tp-nm{flex:1}
.tp-ck{color:var(--brand);font-weight:800}

/* ============================================================
   V26 — Robot launcher (round 3D, blinking eyes, antennae)
   ============================================================ */
.msgr-launcher.robo{
  background:radial-gradient(circle at 38% 30%, #ffffff 0%, #f8f4ee 46%, #e5dccd 100%);
  box-shadow:0 14px 28px rgba(23,13,11,.5), inset 0 3px 8px rgba(255,255,255,.9), inset 0 -9px 15px rgba(121,93,79,.35);
  overflow:visible;
}
.msgr-launcher.robo::after{display:none}
.robo-face{position:relative;width:42px;height:30px;border-radius:13px;
  background:radial-gradient(circle at 50% 32%, #503531 0%, #281a18 82%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.65), 0 1px 2px rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;gap:7px}
.robo-eye{width:11px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #fceeed 0%, #ff1928 68%, #e4000f 100%);
  box-shadow:0 0 9px rgba(255,18,33,.95);animation:roboBlink 4s infinite;transform-origin:center}
@keyframes roboBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
.robo-antenna{position:absolute;top:-8px;width:3px;height:12px;border-radius:3px;background:#d9cdc7}
.robo-antenna::before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#ff2130);
  box-shadow:0 0 7px rgba(255,30,45,.85);animation:roboTip 2.4s ease-in-out infinite}
.robo-antenna.l{left:19px;transform:rotate(-18deg)}
.robo-antenna.r{right:19px;transform:rotate(18deg)}
@keyframes roboTip{0%,100%{opacity:.65}50%{opacity:1}}
.msgr-launcher.robo:hover .robo-eye{animation-duration:1.5s}
.msgr-launcher.dragging .robo-eye,.msgr-launcher.dragging .robo-antenna::before{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.robo-eye,.robo-antenna::before{animation:none}}

/* V28 — role badges in List of Users / user management */
.urole-badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.2px;vertical-align:middle}
.urole-badge.role-superadmin{background:#c8000a;color:#fff}
.urole-badge.role-admin{background:#b50007;color:#fff}
.urole-badge.role-user{background:rgba(146,132,125,.22);color:inherit}

/* V28.1 — Access panel + Logins table */
.acc-roles{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.acc-card{flex:1 1 320px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.acc-card h3{margin:0 0 10px;font-size:15px}
.acc-h{margin:18px 0 4px;font-size:15px}
.acc-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px}
.acc-chk{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.acc-chk input{width:15px;height:15px;cursor:pointer}
.acc-user{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-bottom:10px}
.acc-user-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.acc-users{margin-top:6px}
.logins-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.logins-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.logins-tbl th,.logins-tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.logins-tbl thead th{background:var(--surface-2);font-weight:700;color:var(--muted);white-space:nowrap}
.logins-tbl tbody tr:hover{background:var(--surface-2)}
.logins-act{white-space:nowrap;display:flex;gap:6px}

/* ============================================================
   V29 — Subscription banners, payment methods, sub-user badge,
   and the calendar publishing status panel.
   ============================================================ */
.sub-banner{border-radius:12px;padding:11px 14px;margin-bottom:14px;font-weight:600;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sub-banner.warn{background:var(--gold-soft);border:1px solid var(--gold);color:var(--gold-ink)}
.sub-banner.lock{background:var(--red-soft);border:1px solid var(--red);color:var(--red-ink)}
body.sub-warn .topbar{box-shadow:inset 0 -3px 0 var(--gold), var(--shadow-md)}
body.sub-locked .topbar{box-shadow:inset 0 -3px 0 var(--red), var(--shadow-md)}

.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
@media(max-width:600px){.pm-grid{grid-template-columns:1fr}}
.pm{position:relative;border:1px solid var(--line);border-radius:12px;padding:14px;
  background:var(--surface-2);cursor:pointer}
.pm.sel{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.pm-logo{font-weight:800;font-size:16px;margin-bottom:6px}
.pm .sub{font-size:12px;color:var(--muted)}
.pm-tick{position:absolute;top:12px;right:12px;color:var(--brand);font-weight:800;display:none}
.pm.sel .pm-tick{display:block}

.urole-badge.role-subuser{background:var(--surface-3);color:var(--ink-2)}
.btn.pale{background:var(--brand-soft);color:var(--ink)}
.btn.pale:hover{filter:brightness(1.08)}

/* Calendar right-side publishing status panel */
.pub-status{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px}
.pub-status h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.ps-row{border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:9px;background:var(--surface-2)}
.ps-row .t{display:flex;justify-content:space-between;gap:8px;font-weight:600;font-size:12.5px;margin-bottom:7px}
.ps-bar{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.ps-bar>span{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .4s}
.ps-msg{font-size:11px;color:var(--muted);margin-top:6px}

/* ============================================================
   V30 — Cosmic Glass. Single fixed theme (the login reference):
   deep purple space, frosted-glass surfaces everywhere EXCEPT
   the Notifications section, and a redesigned login page.
   ============================================================ */
body[data-theme="cosmic"]{
  --app-bg:radial-gradient(1200px 760px at 14% -12%, #470100 0%, #140b09 52%),
           radial-gradient(1000px 720px at 112% 118%, #470100 0%, transparent 55%), #0e0807;
  --app-glow-1:rgba(200,0,10,.30); --app-glow-2:rgba(239,0,16,.20);
  --brand:#e8000f; --brand-dark:#ed0010; --brand-darker:#c8000a; --brand-soft:rgba(232,0,15,.18);
  --grad:linear-gradient(90deg,#e8000f,#ef0010); --grad-2:linear-gradient(135deg,#ff1525,#ef0010);
}

/* Frosted glass on all major surfaces (NOT notifications — see the reset below) */
body[data-theme="cosmic"] .card,
body[data-theme="cosmic"] .tile,
body[data-theme="cosmic"] .col,
body[data-theme="cosmic"] .cw-card,
body[data-theme="cosmic"] .cw-hist,
body[data-theme="cosmic"] .vcard,
body[data-theme="cosmic"] .pubcard,
body[data-theme="cosmic"] .conn-card,
body[data-theme="cosmic"] .user-card,
body[data-theme="cosmic"] .tools-status,
body[data-theme="cosmic"] .auth-card,
body[data-theme="cosmic"] .role,
body[data-theme="cosmic"] .pm,
body[data-theme="cosmic"] .pub-status,
body[data-theme="cosmic"] .status-row,
body[data-theme="cosmic"] .cal-grid,
body[data-theme="cosmic"] .modal,
body[data-theme="cosmic"] .tasks-panel,
body[data-theme="cosmic"] .theme-pop,
body[data-theme="cosmic"] .inv{
  background:rgba(55,33,29,.42) !important;
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,30,45,.18);
  box-shadow:0 10px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
body[data-theme="cosmic"] .ps-row,
body[data-theme="cosmic"] .da-chip{background:rgba(66,40,36,.38) !important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,30,45,.14)}
/* glass sidebar + topbar */
body[data-theme="cosmic"] .sidepanel{background:rgba(32,18,16,.55);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-right:1px solid rgba(255,30,45,.14)}
body[data-theme="cosmic"] .topbar{background:linear-gradient(90deg,rgba(38,21,18,.6),rgba(25,14,12,.6));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,30,45,.14)}
body[data-theme="cosmic"] .nav-txt,body[data-theme="cosmic"] .navitem{color:var(--ink-2)}

/* NOTIFICATIONS — kept SOLID (no glassmorphism), per requirement */
body[data-theme="cosmic"] .notif-panel,
body[data-theme="cosmic"] #notifFeed,
body[data-theme="cosmic"] #notifFeed .notif,
body[data-theme="cosmic"] .notif,
body[data-theme="cosmic"] .nf-thread,
body[data-theme="cosmic"] .nf-filter,
body[data-theme="cosmic"] .comment-pop{
  background:#231513 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-color:var(--line);
}
body[data-theme="cosmic"] .notif-panel{border:1px solid var(--line);box-shadow:var(--shadow-lg)}

/* ---------- Login page (matches the reference) ---------- */
.auth{position:relative;overflow:hidden}
.auth-inner{position:relative;z-index:2;max-width:1040px}
.auth-title{font-size:54px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.auth-title .grad-a{background:linear-gradient(90deg,#ff1525,#e8000f);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-title .grad-b{background:linear-gradient(90deg,#ff0f1f,#d0000c);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-sub{font-size:16px;margin:12px 0 30px}
.auth-grid.solo{grid-template-columns:1fr;max-width:440px;margin:0 auto}
.login-card{background:rgba(53,31,27,.5) !important;-webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,30,45,.24);
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06)}
.login-card::before{background:linear-gradient(90deg,#e8000f,#ef0010)}
.login-card .ac-ico.grad{background:linear-gradient(135deg,#e8000f,#ef0010);box-shadow:0 8px 22px rgba(200,0,10,.5)}
.fld{position:relative;margin-bottom:12px}
.fld-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.85;pointer-events:none}
.fld .f{padding-left:38px;margin-bottom:0;background:rgba(25,14,12,.5);border-color:rgba(255,30,45,.22)}
.grad-btn{background:linear-gradient(90deg,#e8000f,#c8000a) !important;border:none;
  box-shadow:0 12px 28px rgba(200,0,10,.45);font-weight:700}
.grad-btn:hover{filter:brightness(1.1)}
.auth-links a{color:#f3c4bf}
.auth-features{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:36px;flex-wrap:wrap}
.feat{display:flex;align-items:center;gap:11px;text-align:left}
.feat-ic{font-size:20px}
.feat b{display:block;font-size:13px;color:var(--ink)}
.feat span{font-size:11.5px;color:var(--muted)}
.feat-sep{width:1px;height:32px;background:rgba(255,30,45,.28)}
@media(max-width:700px){.feat-sep{display:none}.auth-features{gap:14px}.auth-title{font-size:38px}}

/* floating decorative orbs / crystals behind the login */
.auth-orb,.auth-gem{position:absolute;pointer-events:none;z-index:0;animation:cosmFloat 8s ease-in-out infinite}
.auth-orb{border-radius:50%}
.auth-orb.o1{width:120px;height:120px;left:5%;bottom:16%;
  background:radial-gradient(circle at 32% 28%,#ed0010,#470100 70%);box-shadow:0 0 90px rgba(200,0,10,.5)}
.auth-orb.o2{width:58px;height:58px;right:11%;top:52%;
  background:radial-gradient(circle at 32% 28%,#e8000f,#470100 70%);box-shadow:0 0 60px rgba(232,0,15,.5);animation-duration:10s}
.auth-orb.o3{width:24px;height:24px;right:24%;bottom:24%;
  background:radial-gradient(circle at 32% 28%,#ff1525,#a80006 70%);box-shadow:0 0 34px rgba(255,21,37,.6);animation-duration:6s}
.auth-gem{width:130px;height:130px;opacity:.55;filter:blur(.5px);
  background:conic-gradient(from 120deg,#e8000f,#ef0010,#ff1525,#c8000a,#e8000f);
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.auth-gem.g1{right:7%;top:12%;transform:rotate(10deg)}
.auth-gem.g2{right:12%;bottom:9%;width:84px;height:84px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation-duration:9s}
@keyframes cosmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@media(max-width:760px){.auth-gem,.auth-orb.o2,.auth-orb.o3{display:none}}


/* ============================================================
   V33 — LIGHT BLUE. Soft sky-blue gradient background, white
   frosted-glass surfaces, blue accents & buttons, dark readable
   text. This block is last, so it defines the final look.
   ============================================================ */
body[data-theme="cosmic"]{
  --app-bg:linear-gradient(160deg,#fceeed 0%, #fbe9e7 45%, #f9e2e0 100%);
  --app-glow-1:rgba(209,0,12,.10); --app-glow-2:rgba(244,0,16,.10);
  --page:#fdf2f0; --card:rgba(255,255,255,.66); --surface-2:rgba(255,255,255,.55); --surface-3:rgba(251,231,228,.7);
  --ink:#470100; --ink-2:#550100; --muted:#8d7163; --muted-2:#b89f92;
  --line:rgba(255,255,255,.75); --line-2:rgba(255,255,255,.5); --line-strong:rgba(239,0,16,.5);
  --brand:#ce000b; --brand-dark:#c10009; --brand-darker:#9e0005; --brand-soft:rgba(206,0,11,.12);
  --grad:linear-gradient(90deg,#d0000c,#ce000b); --grad-2:linear-gradient(135deg,#f40010,#ce000b);
  --green:#12b886; --green-soft:rgba(18,184,134,.15); --green-ink:#0b8f6a;
  --gold:#e8a23d;  --gold-soft:rgba(232,162,61,.18);  --gold-ink:#b26b06;
  --red:#f0546b;   --red-soft:rgba(240,84,107,.15);   --red-ink:#d23553;
  --topbar-ink:#470100; --topbar-line:rgba(255,255,255,.6);
  --shadow:0 2px 8px rgba(120,0,1,.10);
  --shadow-md:0 8px 24px rgba(120,0,1,.14);
  --shadow-lg:0 20px 50px rgba(120,0,1,.18);
  --radius:16px;
}
body[data-theme="cosmic"] a{color:#c10009}
body[data-theme="cosmic"] code{color:#c10009;background:rgba(206,0,11,.10)}

/* White frosted-glass surfaces, thin light border, soft blue shadow */
body[data-theme="cosmic"] .card,
body[data-theme="cosmic"] .tile,
body[data-theme="cosmic"] .col,
body[data-theme="cosmic"] .cw-card,
body[data-theme="cosmic"] .cw-hist,
body[data-theme="cosmic"] .vcard,
body[data-theme="cosmic"] .pubcard,
body[data-theme="cosmic"] .conn-card,
body[data-theme="cosmic"] .user-card,
body[data-theme="cosmic"] .role,
body[data-theme="cosmic"] .pm,
body[data-theme="cosmic"] .pub-status,
body[data-theme="cosmic"] .cal-grid,
body[data-theme="cosmic"] .modal,
body[data-theme="cosmic"] .inv,
body[data-theme="cosmic"] .pf-row,
body[data-theme="cosmic"] .ob-conn,
body[data-theme="cosmic"] .card.glass,
body[data-theme="cosmic"] .status-row{
  background:rgba(255,255,255,.66) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);
  border-radius:16px;
  box-shadow:0 8px 28px rgba(120,0,1,.12), inset 0 1px 0 rgba(255,255,255,.7);
}
body[data-theme="cosmic"] .ps-row,
body[data-theme="cosmic"] .da-chip{background:rgba(255,255,255,.55) !important;border:1px solid rgba(255,255,255,.7)}
body[data-theme="cosmic"] .sidepanel{background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,.65)}
body[data-theme="cosmic"] .topbar{background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.65);
  box-shadow:0 4px 20px rgba(120,0,1,.08)}
body[data-theme="cosmic"] .topbar .logo-txt,body[data-theme="cosmic"] .topbar .mark{color:#470100}
body[data-theme="cosmic"] .topbar .mark{background:var(--grad-2);color:#fff}
body[data-theme="cosmic"] .navitem{color:var(--ink-2)}
body[data-theme="cosmic"] .navitem .ic{background:var(--grad-2);box-shadow:0 4px 12px rgba(206,0,11,.30)}
body[data-theme="cosmic"] .navitem.active{background:linear-gradient(90deg,rgba(206,0,11,.14),transparent 82%);color:#470100}
body[data-theme="cosmic"] .sidepanel h4{color:#ce000b}
body[data-theme="cosmic"] .pill{background:rgba(206,0,11,.12);border:1px solid rgba(206,0,11,.25);color:#550100}
body[data-theme="cosmic"] .btn.ghost.onnavy{color:#550100;border:1px solid rgba(239,0,16,.35);background:rgba(255,255,255,.5)}
body[data-theme="cosmic"] .f{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85);color:#470100}
body[data-theme="cosmic"] .f::placeholder{color:#b89f92}
body[data-theme="cosmic"] .f:focus{border-color:#f40010;box-shadow:0 0 0 3px rgba(244,0,16,.2)}
body[data-theme="cosmic"] .btn{background:var(--grad);color:#fff;border-radius:12px;box-shadow:0 6px 16px rgba(206,0,11,.28)}
body[data-theme="cosmic"] .btn:hover{filter:brightness(1.06)}
body[data-theme="cosmic"] .btn.ghost{background:rgba(255,255,255,.55);color:#550100;border:1px solid rgba(255,255,255,.85);box-shadow:none}
body[data-theme="cosmic"] .btn.ghost:hover{background:rgba(255,255,255,.8)}
body[data-theme="cosmic"] .grad-btn{background:linear-gradient(90deg,#d0000c,#ce000b) !important;box-shadow:0 10px 24px rgba(206,0,11,.35)}
body[data-theme="cosmic"] .chip.completed{background:var(--green-soft);color:var(--green-ink)}
body[data-theme="cosmic"] .chip.draft{background:rgba(239,0,16,.16);color:#8d7163}

/* ---------- Login page (light blue) ---------- */
body[data-theme="cosmic"] .auth{min-height:calc(100vh - 58px);overflow:hidden}
body[data-theme="cosmic"] .auth-title{font-size:58px;font-weight:800}
body[data-theme="cosmic"] .auth-title .grad-a{background:linear-gradient(90deg,#d0000c,#ce000b);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-theme="cosmic"] .auth-title .grad-b{background:linear-gradient(90deg,#ce000b,#9e0005);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-theme="cosmic"] .auth-sub{color:#8d7163}
body[data-theme="cosmic"] .login-card{background:rgba(255,255,255,.7) !important;border:1px solid rgba(255,255,255,.85);
  box-shadow:0 24px 60px rgba(120,0,1,.2), inset 0 1px 0 rgba(255,255,255,.8)}
body[data-theme="cosmic"] .login-card::before{background:linear-gradient(90deg,#d0000c,#ce000b)}
body[data-theme="cosmic"] .login-card h3{color:#470100}
body[data-theme="cosmic"] .login-card>p{color:#8d7163}
body[data-theme="cosmic"] .login-card .ac-ico.grad{background:var(--grad-2);box-shadow:0 10px 22px rgba(206,0,11,.4)}
body[data-theme="cosmic"] .fld .f{background:rgba(255,255,255,.8)}
body[data-theme="cosmic"] .auth-links a{color:#ce000b}
body[data-theme="cosmic"] .feat b{color:#470100} body[data-theme="cosmic"] .feat span{color:#8d7163}
body[data-theme="cosmic"] .feat-sep{background:rgba(239,0,16,.3)}

/* perspective grid floor (soft blue) */
.cosmic-floor{position:absolute;left:0;right:0;bottom:0;height:32vh;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,transparent 100%)}
.cosmic-floor::before{content:"";position:absolute;left:-50%;right:-50%;bottom:-40%;top:0;
  background-image:linear-gradient(rgba(244,0,16,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,0,16,.28) 1px,transparent 1px);
  background-size:44px 44px;transform:perspective(340px) rotateX(62deg);transform-origin:bottom center}

/* floating crystals + glowing spheres (blue-tinted, subtle) */
.crystal{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(0 18px 36px rgba(206,0,11,.32));
  animation:cosmFloat 9s ease-in-out infinite;opacity:.9}
.crystal.c-gem{right:6%;top:12%;width:200px}
.crystal.c-cube{right:9%;bottom:12%;width:150px;animation-duration:11s}
.crystal.c-cube2{left:8%;top:26%;width:70px;opacity:.7;animation-duration:8s}
.sphere{position:absolute;border-radius:50%;z-index:0;pointer-events:none;animation:cosmFloat 10s ease-in-out infinite}
.sphere.s1{left:2%;bottom:16%;width:140px;height:140px;
  background:radial-gradient(circle at 34% 30%,#ff2331,#d1000c 70%);box-shadow:0 0 70px rgba(244,0,16,.5)}
.sphere.s1::after{content:"";position:absolute;inset:-32px -56px;border-radius:50%;
  border:2px solid rgba(244,0,16,.4);transform:rotate(-24deg)}
.sphere.s2{right:16%;top:52%;width:52px;height:52px;
  background:radial-gradient(circle at 34% 30%,#f4c8c3,#d1000c 72%);box-shadow:0 0 44px rgba(244,0,16,.5);animation-duration:7s}
.sphere.s3{right:26%;bottom:24%;width:20px;height:20px;
  background:radial-gradient(circle at 34% 30%,#fae6e4,#f40010 72%);box-shadow:0 0 22px rgba(255,35,49,.6);animation-duration:6s}
@keyframes cosmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@media(max-width:900px){.crystal.c-cube2,.sphere.s2,.sphere.s3{display:none}}
@media(max-width:760px){.crystal,.sphere{opacity:.5!important}.crystal.c-gem{width:120px}.auth-title{font-size:38px}}

/* ---------- Setup panel: connection grid ---------- */
.cred-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:10px 0}
@media(max-width:820px){.cred-grid{grid-template-columns:1fr}}
.pf-grid{display:flex;flex-direction:column;gap:12px}
.pf-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;flex-wrap:wrap}
.pf-left{display:flex;align-items:center;gap:12px;min-width:180px}
.pf-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:var(--grad-2);color:#fff;box-shadow:0 6px 14px rgba(206,0,11,.35)}
.pf-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.pf-cred{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-cred .f{max-width:180px;padding:7px 10px}
.pf-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:760px){.pf-right{justify-content:flex-start;width:100%}.pf-cred .f{max-width:none;flex:1}}

/* AI Connected status (Content Writing) */
.ai-connected{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;
  color:#0b8f6a;background:rgba(18,184,134,.15);border:1px solid rgba(18,184,134,.35);border-radius:999px;padding:5px 12px}
.ai-disconnected{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;
  color:#b26b06;background:rgba(232,162,61,.16);border:1px solid rgba(232,162,61,.4);border-radius:999px;padding:5px 12px}

.side-collapse.mid{margin:12px 6px 14px;justify-content:center}
.side-collapse .sc-ic{font-weight:800}

/* ---------- Onboarding welcome + wizard ---------- */
.ob-badge{width:64px;height:64px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;
  font-size:30px;background:var(--grad-2);color:#fff;box-shadow:0 10px 26px rgba(206,0,11,.4)}
.ob-dl{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px}
.ob-steps{display:flex;gap:6px;padding:12px 18px 4px;flex-wrap:wrap}
.ob-dot{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);opacity:.7}
.ob-dot span{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(239,0,16,.18);color:#8d7163;font-weight:700;font-size:11px}
.ob-dot.on{opacity:1;color:#470100}
.ob-dot.on span{background:var(--grad);color:#fff}
.ob-dot.done span{background:var(--green);color:#fff}
.ob-conn-h{display:flex;align-items:center;gap:8px}
.ob-ic{font-size:18px}
.ob-review{margin-top:8px}
.obr{display:flex;justify-content:space-between;padding:8px 2px;border-bottom:1px solid rgba(239,0,16,.18)}
.obr b.ok{color:#0b8f6a}

/* ---- Recommended hashtags (Content Writing) ---- */
.cw-tags{margin-top:14px;padding-top:12px;border-top:1px solid rgba(49,27,24,.10)}
.cw-tags.hidden{display:none}
.cw-tags-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cw-tags-head b{font-size:.86rem;letter-spacing:.02em;color:var(--brand,#9e0005)}
.cw-tags-chips{display:flex;flex-wrap:wrap;gap:7px}
.tag-chip{display:inline-block;padding:4px 11px;border-radius:999px;
  font-size:.82rem;font-weight:600;color:var(--brand,#9e0005);
  background:rgba(158,0,5,.10);border:1px solid rgba(158,0,5,.22)}
#cw-tags-edit{min-height:60px;margin-top:4px}

/* ============================================================
   Calendar reschedule (drag chips / Change date) + video chat
   ============================================================ */
.ev.scheduled{background:var(--brand)}
.cal-cell .ev.movable{cursor:grab}
.cal-cell .ev.movable:active{cursor:grabbing}
.cal-cell .ev.dragging{opacity:.45}
.chat-btn{display:inline-flex;align-items:center;gap:6px}
.chat-unread{background:var(--red);color:#fff;border-radius:999px;min-width:18px;height:18px;font-size:10.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.chat-cnt{background:var(--brand-soft);color:var(--brand-dark);border-radius:999px;min-width:18px;height:18px;font-size:10.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.msgr-window.chat-win{z-index:1300;width:340px;height:460px;background:#fff;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.msgr-window.chat-win .msgr-msgs{background:#fdf6f5}
.msgr-window.chat-win .mw-bubble{background:#fff;border-color:#f3e1df}
.msgr-window.chat-win .mw-msg.me .mw-bubble{background:var(--brand);border-color:transparent}
.msgr-window.chat-win .mw-msg.me .att-file{background:rgba(255,255,255,.2);color:#fff}
.msgr-window.chat-win .msgr-inbar .f{border:1px solid #f3e1df;border-radius:8px}

/* ============================================================
   V31 — SVG icons, multi-platform publishing, analytics, inbox,
   queue, team & activity pages
   ============================================================ */
:root{--viz-1:#a70006}
.ico{flex-shrink:0;vertical-align:-3px}
.pico{flex-shrink:0;vertical-align:-3px;display:inline-block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn .ico{vertical-align:0}
.muted{color:var(--muted)}
#pageContent .card{padding:16px 18px;margin-bottom:16px;border-radius:var(--radius,16px)}
#pageContent .card h4{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 6px;color:var(--ink)}
.sel-sm{width:auto!important;max-width:230px;flex:0 0 auto;padding:6px 10px!important;font-size:12.5px;border-radius:9px}

/* nav icon tiles for the new tabs */
.navitem .ic .ico{vertical-align:0}
.navitem[data-nav="queue"] .ic{background:linear-gradient(135deg,#d0000c,#780001)}
.navitem[data-nav="analytics"] .ic{background:linear-gradient(135deg,#34d399,#0d9488)}
.navitem[data-nav="inbox"] .ic{background:linear-gradient(135deg,#fb7185,#e11d48)}
.navitem[data-nav="team"] .ic{background:linear-gradient(135deg,#f472b6,#a10005)}
.navitem[data-nav="activity"] .ic{background:linear-gradient(135deg,#fbbf24,#ea580c)}
.navitem[data-nav="setup"] .ic{background:linear-gradient(135deg,#f40010,#cc000b)}
.navitem .badge.alert{background:var(--red)!important;color:#fff!important}
.side-collapse .sc-ic .ico{vertical-align:0}
.sidepanel.collapsed .side-collapse .sc-ic{transform:none}

/* topbar */
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer}
.icon-btn:hover{color:var(--brand);border-color:var(--brand-soft)}
.icon-btn.sm{width:28px;height:28px;border-radius:8px;flex-shrink:0}
.bell-dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);
  color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:6px}
.brand-switch .bs-label{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink-2)}
.brand-switch select{border:none;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;outline:none}

/* chips */
.chip{display:inline-flex;align-items:center;gap:4px}
.chip.gold{background:var(--gold-soft);color:var(--gold-ink)}
.chip.navy{background:var(--brand-soft);color:var(--brand-dark)}
.chip.danger{background:var(--red-soft);color:var(--red-ink)}

/* segmented control */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.seg button{border:none;background:transparent;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--brand);color:#fff}
.seg.sm button{padding:4px 9px;font-size:11.5px}

/* empty states & notes */
.empty-state{text-align:center;padding:48px 16px;color:var(--muted)}
.empty-state h3{margin:10px 0 4px;color:var(--ink);font-size:16px}
.warn-note{background:var(--gold-soft);border:1px solid rgba(232,162,61,.35);border-radius:10px;padding:10px 12px;margin-bottom:14px;
  display:flex;gap:8px;align-items:flex-start;color:var(--ink-2)}

/* ---------- calendar ---------- */
.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media(max-width:1100px){.cal-layout{grid-template-columns:1fr}}
.cal-cell .ev{display:flex;align-items:center;gap:4px}
.cal-cell .ev .ev-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend-tip{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.ps-plats{display:flex;gap:4px;margin:4px 0}
.tdot{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;background:#fff;
  box-shadow:0 0 0 2px var(--line)}
.tdot.st-published{box-shadow:0 0 0 2px var(--green)}
.tdot.st-failed{box-shadow:0 0 0 2px var(--red)}
.tdot.st-skipped{box-shadow:0 0 0 2px var(--line);opacity:.45}
.tdot.st-publishing,.tdot.st-pending,.tdot.st-retrying{box-shadow:0 0 0 2px var(--brand);animation:pulseRing 1.2s infinite}
@keyframes pulseRing{50%{box-shadow:0 0 0 4px var(--brand-soft)}}
@media (prefers-reduced-motion: reduce){.tdot{animation:none!important}}

.plat-pick{display:flex;flex-wrap:wrap;gap:6px}
.pp{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer;position:relative;opacity:.65}
.pp:hover{opacity:1}
.pp.on{opacity:1;border-color:var(--brand);background:var(--brand-soft);color:var(--ink);box-shadow:0 0 0 1px var(--brand) inset}
.pp.unsup{text-decoration:line-through;text-decoration-color:var(--red)}
.pp:disabled{opacity:.35;cursor:not-allowed}
.pp-live{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}

.vcard.post .post-row{display:flex;gap:12px;align-items:flex-start}
.post-main{flex:1;min-width:0}
.vthumb{position:relative;width:88px;height:88px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#1d100e;
  flex-shrink:0;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;color:#fff}
.vthumb img,.vthumb video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.vthumb.txt{background:var(--surface-3);color:var(--muted);cursor:default}
.vcount{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border-radius:6px;font-size:10px;padding:1px 5px;display:flex;gap:3px;align-items:center}
.vplay{position:absolute;left:6px;bottom:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.tchips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.tchip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;
  background:var(--surface-3);color:var(--ink-2);border:1px solid transparent}
.tchip a{color:inherit;display:inline-flex}
.tc-published{background:var(--green-soft);color:var(--green-ink)}
.tc-failed{background:var(--red-soft);color:var(--red-ink)}
.tc-skipped{background:var(--surface-3);color:var(--muted);text-decoration:line-through;text-decoration-color:var(--muted-2)}
.tc-pending,.tc-publishing,.tc-retrying{background:var(--brand-soft);color:var(--brand-dark)}
.tc-retry{border:none;background:#fff;color:var(--red-ink);border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;cursor:pointer;
  display:inline-flex;align-items:center;gap:3px}
.tc-sim{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--gold-soft);color:var(--gold-ink);
  border-radius:5px;padding:1px 5px}
.vreview{font-size:12px;background:var(--gold-soft);color:var(--ink-2);border-radius:8px;padding:6px 9px;margin:6px 0;display:flex;gap:6px}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.ctype.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.ctype .ct-ico{color:var(--brand)}
@media(max-width:560px){.vthumb{width:64px;height:64px}}

/* post editor */
.editor .modal-head .chip{margin-left:6px}
.pe-sec{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:rgba(255,255,255,.45)}
.pe-sec h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13.5px}
.pe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.pcap{margin-top:8px}
.pcap-h{display:flex;align-items:center;gap:6px;font-size:12.5px;margin-bottom:3px}
.pcap-n{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.pcap-n.over{color:var(--red-ink);font-weight:700}
.pcap textarea{min-height:64px}
.pe-checks{display:flex;flex-direction:column;gap:6px}
.chk{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;padding:7px 10px;border-radius:9px;background:var(--surface-3)}
.chk-error{background:var(--red-soft);color:var(--red-ink)}
.chk-warn{background:var(--gold-soft);color:var(--gold-ink)}
.chk-ok{background:var(--green-soft);color:var(--green-ink)}
.chk span{flex:1;min-width:180px}
.chk-fix{display:inline-flex;gap:4px;flex:0 0 auto!important;min-width:0!important}
.pe-thumb{margin-top:10px}
.thumb-sm{width:56px;height:56px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.best-times{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:12px}
.bt-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:3px 9px;font-size:11.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.bt-chip:hover{border-color:var(--brand);color:var(--brand)}
.bt-chip.static{cursor:default}
.rl-list{display:flex;flex-direction:column;gap:6px}
.rl-row{display:flex;gap:8px;align-items:center;font-size:12.5px;flex-wrap:wrap}

/* setup */
.setup-card .sc-title{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pf-ic{background:#fff!important;box-shadow:0 4px 12px rgba(120,0,1,.14)!important}
.pf-err{font-size:11.5px;color:var(--red-ink);display:flex;align-items:center;gap:4px;margin-top:2px}
.pf-redirect{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);max-width:100%}
.pf-redirect code{background:var(--surface-3);border-radius:6px;padding:3px 7px;color:var(--ink-2);font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:360px}
.pf-redirect.big code{max-width:none;flex:1;white-space:normal;word-break:break-all;padding:8px 10px}
.pf-opt{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.pf-opt .f{width:auto;padding:5px 8px}
.guide-steps{padding-left:20px;margin:0 0 12px;display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.5}
details.smtp{margin-top:10px}
details.smtp summary{cursor:pointer;font-weight:600;font-size:13px;display:flex;gap:6px;align-items:center}

/* analytics */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.kpi-ic{width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.kpi-n{font-size:24px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi-l{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.viz-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}
.viz{position:relative;width:100%}
.viz > svg{display:block;width:100%;height:auto;overflow:visible}
.viz-grid{stroke:rgba(141,113,99,.18);stroke-width:1}
.viz-axis{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.viz-hit{fill:transparent;cursor:crosshair}
svg .viz-hit.hover{fill:rgba(167,0,6,.07)}
.viz-tip{position:absolute;pointer-events:none;background:#470100;color:#fff;font-size:12px;line-height:1.4;padding:7px 10px;border-radius:8px;
  box-shadow:0 8px 20px rgba(71,1,0,.25);white-space:nowrap;z-index:5}
.hbars{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.hb-row{display:grid;grid-template-columns:130px 1fr 90px;align-items:center;gap:10px;padding:4px 6px;border-radius:8px}
.hb-row.hover{background:rgba(167,0,6,.07)}
.hb-lab{font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:6px;white-space:nowrap}
.hb-track{height:14px;border-radius:4px}
.hb-bar{height:100%;border-radius:0 4px 4px 0}
.hb-val{font-size:12.5px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.tbl-toggle{margin-top:10px}
.tbl-toggle summary{cursor:pointer;font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.top-list{display:flex;flex-direction:column;gap:8px}
.top-row{display:flex;gap:10px;align-items:flex-start}
.top-row .rank{width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tl-main .muted{font-size:12px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rep-table.cmp td.best{background:var(--green-soft)}
.best-tag{display:inline-flex;gap:3px;align-items:center;font-size:10.5px;font-weight:700;color:var(--green-ink)}
@media(max-width:560px){.viz-grid2{grid-template-columns:1fr}.hb-row{grid-template-columns:96px 1fr 64px}}

/* inbox */
.ib-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
.ib-item.neg{border-left:4px solid var(--red)}
.ib-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.ib-head .muted{font-size:12px}
.ib-text{font-size:14px;margin:8px 0;line-height:1.5}
.ib-reply{font-size:12.5px;background:var(--brand-soft);border-radius:8px;padding:6px 9px;margin-bottom:6px}
.ib-actions .row{flex-wrap:wrap}
.ib-actions .f{flex:1;min-width:200px}
.ib-sugg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;align-items:center;font-size:11.5px}
.sugg{border:1px dashed var(--brand);background:var(--brand-soft);color:var(--ink-2);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;text-align:left}

/* queue */
.slot-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.sw-day{background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:10px;padding:8px 6px;min-height:80px;display:flex;flex-direction:column;gap:5px;align-items:center}
.sw-h{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--muted)}
.slot{display:inline-flex;align-items:center;gap:3px;background:var(--brand);color:#fff;border-radius:7px;font-size:11.5px;font-weight:700;padding:2px 4px 2px 7px}
.slot button{border:none;background:transparent;color:#fff;cursor:pointer;display:inline-flex;padding:0}
.up-list{display:flex;flex-direction:column;gap:4px}
.up-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;flex-wrap:wrap}
.up-row:hover{background:var(--surface-2)}
.up-when{font-size:12px;color:var(--muted);min-width:150px;font-variant-numeric:tabular-nums}
.up-plats{display:flex;gap:3px;margin-left:auto}
@media(max-width:640px){.slot-week{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* team & activity */
.br-row{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--line-2)}
.br-row .spacer{flex:1}
.br-dot{width:12px;height:12px;border-radius:4px}
.rep-table.perm td,.rep-table.perm th{text-align:center}
.rep-table.perm td:first-child,.rep-table.perm th:first-child{text-align:left}
.act-chip{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.act-published,.act-client_approve,.act-approved{background:var(--green-soft);color:var(--green-ink)}
.act-deleted,.act-client_changes,.act-disconnected{background:var(--red-soft);color:var(--red-ink)}
.act-scheduled,.act-queued,.act-publish_now{background:var(--brand-soft);color:var(--brand-dark)}

/* published */
.pt-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.pt-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;padding:6px 8px;border-radius:9px;background:var(--surface-3)}
.pt-row.tc-published{background:rgba(18,184,134,.08)}
.pt-plat{display:inline-flex;align-items:center;gap:6px;font-weight:700;min-width:120px}
.pt-stat{display:inline-flex;align-items:center;gap:3px;color:var(--ink-2);font-variant-numeric:tabular-nums;flex:1}
.pt-act{display:inline-flex;gap:6px;align-items:center}

/* ============================================================
   V31 — Notifications page (light glass, matches the rest of the app).
   Overrides the old dark "solid" notification block above.
   ============================================================ */
body[data-theme="cosmic"] #notifFeed{background:transparent !important;border:none}
body[data-theme="cosmic"] .nf-filter,
body[data-theme="cosmic"] .nf-thread,
body[data-theme="cosmic"] .notif-panel,
body[data-theme="cosmic"] .comment-pop{background:rgba(255,255,255,.85) !important}
body[data-theme="cosmic"] .notif,
body[data-theme="cosmic"] #notifFeed .notif{background:transparent !important}
.nf-count{font-size:12.5px;font-weight:600;color:var(--muted);margin-left:10px;padding:3px 10px;border-radius:999px;background:var(--brand-soft)}
.nf-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.nf-filter .spacer{flex:1}
.nf-search{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;max-width:380px;padding:7px 12px;border-radius:10px;
  border:1px solid var(--line-strong);background:#fff;color:var(--muted)}
.nf-search input{border:none;outline:none;background:transparent;font:inherit;font-size:13px;color:var(--ink);flex:1;min-width:0}
.nf-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.nf-filter .nf-date{width:auto!important;max-width:170px;padding:7px 10px!important;background:#fff!important;border:1px solid var(--line-strong)!important}
.nf-selall{color:var(--ink-2)}
.nf-day{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:18px 4px 8px}
.nf-day:first-child{margin-top:0}
.nf-item{background:#fff !important;border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 1px 3px rgba(120,0,1,.08);
  margin-bottom:8px;overflow:hidden;transition:box-shadow .15s,border-color .15s}
.nf-item:hover{box-shadow:var(--shadow-md);border-color:rgba(206,0,11,.35)}
.nf-item.is-unread{border-left:4px solid var(--brand);background:linear-gradient(90deg,rgba(206,0,11,.06),#fff 40%) !important}
.nf-item.is-read{opacity:1}
.nf-item.is-read .nf-msg{color:var(--ink-2);font-weight:400}
.nf-item.is-unread .nf-msg{font-weight:600}
.nf-main{display:flex;align-items:center;gap:12px;padding:12px 14px}
.nf-check{margin:0;flex-shrink:0;width:15px;height:15px;accent-color:var(--brand)}
.nf-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand-dark)}
.nf-ic.k-publish,.nf-ic.k-approval{background:var(--green-soft);color:var(--green-ink)}
.nf-ic.k-upload,.nf-ic.k-subscription{background:var(--gold-soft);color:var(--gold-ink)}
.nf-ic.k-remove,.nf-ic.k-alert{background:var(--red-soft);color:var(--red-ink)}
.nf-ic.k-content{background:rgba(237,0,16,.14);color:#b90008}
.nf-ic.k-calendar,.nf-ic.k-comment{background:var(--brand-soft);color:var(--brand-dark)}
.nf-item.k-alert.is-unread{border-left-color:var(--red)}
.nf-body{flex:1;min-width:0}
.nf-msg{font-size:13.5px;color:var(--ink);line-height:1.45;word-break:break-word}
.nf-meta{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.nf-kind{font-weight:700;color:var(--ink-2)}
.nf-open{display:inline-flex;align-items:center;gap:2px;font-weight:700}
.nf-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;opacity:.75;transition:opacity .15s}
.nf-item:hover .nf-actions{opacity:1}
.nf-actions .icon-btn{background:#fff}
.nf-chat{position:relative}
.nf-rc{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;border-radius:999px;background:var(--brand);color:#fff;
  font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.nf-thread{border-top:1px solid var(--line-2)}
/* dropdown panel dots */
.notif .kd{background:var(--brand)}
.notif.k-remove .kd,.notif.k-alert .kd{background:var(--red)}
.notif.k-upload .kd{background:var(--gold)}
.notif.k-publish .kd,.notif.k-approval .kd{background:var(--green)}
.nf-body{flex:1 1 220px}
@media(max-width:640px){.nf-main{flex-wrap:wrap;align-items:flex-start}.nf-actions{opacity:1;margin-left:auto}.nf-search{max-width:none}}
@media(max-width:900px){.nf-main{flex-wrap:wrap}.nf-actions{opacity:1;width:100%;justify-content:flex-end}}

/* narrow screens: the sidebar becomes the compact icon rail automatically */
@media(max-width:760px){
  .sidepanel{width:68px!important;padding-left:6px!important;padding-right:6px!important}
  .sidepanel h4{margin:14px 6px 8px;height:1px;font-size:0;overflow:hidden;background:var(--line);border-radius:2px}
  .sidepanel h4::before,.sidepanel h4::after{display:none}
  .sidepanel .navitem{justify-content:center;padding:8px}
  .sidepanel .navitem .nav-txt,.sidepanel .navitem .badge,.sidepanel .navitem .nav-unread,
  .sidepanel .side-collapse{display:none}
  .content{padding:16px 14px}
  .topbar .logo-txt,.pill{font-size:0}
  .pill .ico{font-size:initial}
  .page-head{flex-wrap:wrap;gap:8px}
}

/* not-connected platforms in pickers */
.pp.off{border-style:dashed}
.pp.off .pico{filter:grayscale(1);opacity:.7}

.empty-state .sub{margin:0 auto;max-width:520px}

/* ============================================================ V32 : library · link in bio · accounts · DMs · brand kit · 2FA */
.navitem[data-nav="library"] .ic{background:linear-gradient(135deg,#2dd4bf,#0f766e)}
.navitem[data-nav="bio"] .ic{background:linear-gradient(135deg,#ff0f1f,#a90006)}

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.lib-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px}
.lib-thumb{aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface-3)}
.lib-thumb img,.lib-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.lib-t{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-list{display:flex;flex-direction:column;gap:8px}
.lib-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.lib-row .lib-body{white-space:pre-wrap;font-size:13px;color:var(--ink-2);margin-top:4px}
.lib-row .tags{font-size:12.5px;color:var(--brand-dark);margin-top:4px;word-break:break-word}
.lib-anchor{position:relative}
.lib-pop{position:absolute;right:0;top:28px;z-index:30;width:min(360px,90vw);max-height:280px;overflow:auto;background:var(--card);
  border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow-lg);padding:4px}
.lib-pop button{display:block;width:100%;text-align:left;border:none;background:transparent;border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--ink)}
.lib-pop button:hover{background:var(--brand-soft)}
.lib-pop span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.clk-plat{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lk-url{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bio-link .f{flex:1;min-width:0}

.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.acc-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.acc-h .muted{font-size:12px}
.acc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.acc-kpis .kpi-n{font-size:18px;font-weight:700;color:var(--ink)}
.acc-kpis .kpi-n.up{color:var(--green-ink)} .acc-kpis .kpi-n.down{color:var(--red-ink)}
.acc-kpis .kpi-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

.dm-wrap{display:grid;grid-template-columns:300px 1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);min-height:460px}
.dm-list{border-right:1px solid var(--line);overflow:auto;max-height:620px}
.dm-conv{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;border-bottom:1px solid var(--line-2);background:transparent;padding:10px 12px;cursor:pointer;color:var(--ink)}
.dm-conv:hover{background:var(--surface-2)} .dm-conv.on{background:var(--brand-soft)}
.dm-conv.unread b{color:var(--brand-dark)}
.dm-cmain{flex:1;min-width:0}
.dm-cmain b{display:block;font-size:13px}
.dm-cmain span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-thread{display:flex;flex-direction:column;min-width:0}
.dm-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.dm-msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px;max-height:480px;background:var(--surface-2)}
.dm-msg{display:flex} .dm-msg.out{justify-content:flex-end}
.dm-bubble{max-width:72%;padding:8px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:13.5px;word-break:break-word;color:var(--ink)}
.dm-text{white-space:pre-wrap}
.dm-msg.out .dm-bubble{background:var(--brand);border-color:var(--brand);color:#fff}
.dm-time{font-size:10.5px;opacity:.7;margin-top:3px}
.dm-reply{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
@media (max-width:760px){ .dm-wrap{grid-template-columns:1fr} .dm-list{border-right:none;border-bottom:1px solid var(--line);max-height:240px} .acc-kpis{grid-template-columns:repeat(2,1fr)} }

.bk-grid{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px}
.bk-logo{display:flex;flex-direction:column;align-items:center;gap:8px}
.bk-logo img,.bk-ph{width:88px;height:88px;border-radius:12px;object-fit:contain;background:var(--surface-3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted)}

.pf-scope{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:4px}
.pf-own summary{cursor:pointer;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.pub-ext{width:44px;height:44px;border-radius:8px;object-fit:cover;vertical-align:middle;margin-right:8px}

.tf-qr{display:flex;justify-content:center;margin:8px 0}
.tf-qr svg{width:180px;height:180px;background:#fff;padding:8px;border-radius:10px;border:1px solid var(--line)}
.tf-steps{margin:0 0 4px;padding-left:18px;font-size:13px;color:var(--ink-2)}
.tf-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0}
.tf-codes code{background:var(--surface-3);border-radius:6px;padding:5px 8px;text-align:center;font-size:13px;letter-spacing:.05em}
.code-in{font-size:20px!important;letter-spacing:.3em;text-align:center}
.tf-off summary{cursor:pointer;font-size:12.5px;color:var(--muted);margin-top:8px}
#pageContent .row,.modal .row{display:flex;flex-wrap:wrap;align-items:center}
.bio-link{flex-wrap:nowrap!important}
input[type=color].f{height:40px;padding:4px 6px;cursor:pointer}

/* ============================================================
   V34 — STUDIO. Clean white surfaces, violet primary with
   per-page accents (violet, blue, teal, green, indigo, pink,
   emerald, amber). Last block, so it defines the final look.
   ============================================================ */
body[data-theme="cosmic"]{
  --brand:#e3000f; --brand-dark:#c7000a; --brand-darker:#a50005; --brand-soft:#fcf1f0;
  --grad:linear-gradient(90deg,#f40010,#d2000c); --grad-2:linear-gradient(135deg,#ff0919,#d2000c);
  --page:#fcfaf7; --card:#ffffff; --surface-2:#fdfbf8; --surface-3:#faf7f1;
  --ink:#281a17; --ink-2:#54423f; --muted:#847770; --muted-2:#b7aca6;
  --line:#f4f1eb; --line-2:#f9f6f1; --line-strong:#ebe5db;
  --green:#16b364; --green-soft:#e6f7ee; --green-ink:#0b7f45;
  --gold:#f59e0b;  --gold-soft:#fff4de;  --gold-ink:#9a5b00;
  --red:#ef4462;   --red-soft:#ffecf0;   --red-ink:#c41d3e;
  --topbar-ink:#281a17; --topbar-line:#f7f4ee;
  --app-bg:#fcfaf7; --app-glow-1:rgba(244,0,16,.10); --app-glow-2:rgba(206,0,11,.07);
  --shadow:0 1px 2px rgba(54,30,26,.04),0 4px 14px rgba(77,1,0,.05);
  --shadow-md:0 2px 6px rgba(54,30,26,.05),0 12px 30px rgba(77,1,0,.08);
  --shadow-lg:0 24px 60px rgba(71,1,0,.16);
  --radius:18px; --viz-1:#e3000f;
}
body[data-theme="cosmic"] a{color:var(--brand-dark)}
body[data-theme="cosmic"] code{color:var(--brand-dark);background:var(--brand-soft)}

/* solid white cards everywhere (no frosted glass) */
body[data-theme="cosmic"] .card,body[data-theme="cosmic"] .tile,body[data-theme="cosmic"] .col,
body[data-theme="cosmic"] .cw-card,body[data-theme="cosmic"] .cw-hist,body[data-theme="cosmic"] .pubcard,
body[data-theme="cosmic"] .conn-card,body[data-theme="cosmic"] .user-card,body[data-theme="cosmic"] .role,
body[data-theme="cosmic"] .pm,body[data-theme="cosmic"] .pub-status,body[data-theme="cosmic"] .cal-grid,
body[data-theme="cosmic"] .inv,body[data-theme="cosmic"] .pf-row,body[data-theme="cosmic"] .ob-conn,
body[data-theme="cosmic"] .card.glass,body[data-theme="cosmic"] .status-row,body[data-theme="cosmic"] .kpi,
body[data-theme="cosmic"] .lib-card,body[data-theme="cosmic"] .lib-row,body[data-theme="cosmic"] .dm-wrap{
  background:#fff !important; -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
}
body[data-theme="cosmic"] .vcard{background:#fff !important;-webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(54,30,26,.04)}
body[data-theme="cosmic"] .vcard:hover{border-color:#f8dad7;box-shadow:0 8px 22px rgba(227,0,15,.10)}
body[data-theme="cosmic"] .modal{background:#fff !important;-webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg)}
body[data-theme="cosmic"] .overlay{background:rgba(45,26,23,.38)}
body[data-theme="cosmic"] .ps-row,body[data-theme="cosmic"] .da-chip{background:var(--surface-2) !important;border:1px solid var(--line)}
body[data-theme="cosmic"] .pe-sec{background:var(--surface-2);border-color:var(--line)}
body[data-theme="cosmic"] label.f{color:var(--ink-2);background:none}

/* ---------- top bar ---------- */
body[data-theme="cosmic"] .topbar{height:68px;padding:0 24px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid var(--topbar-line);box-shadow:0 1px 0 rgba(54,30,26,.02)}
body[data-theme="cosmic"] .topbar .mark{width:40px;height:40px;border-radius:12px;background:var(--grad-2);border:none;color:#fff;
  font-size:14px;box-shadow:0 6px 16px rgba(227,0,15,.35)}
body[data-theme="cosmic"] .topbar .logo-txt{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
body[data-theme="cosmic"] .shell{min-height:calc(100vh - 68px)}
.top-search{position:relative;flex:0 1 560px;min-width:220px;max-width:560px;margin-left:clamp(12px,12vw,210px);display:flex;align-items:center;gap:10px;height:44px;
  padding:0 8px 0 14px;border-radius:12px;background:#faf8f5;border:1px solid #f6f3ed;color:var(--muted)}
.top-search:focus-within{background:#fff;border-color:#f7d0cb;box-shadow:0 0 0 4px rgba(227,0,15,.10)}
.top-search input{flex:1;min-width:0;border:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);outline:none}
.top-search input::placeholder{color:#a49892}
.top-search input::-webkit-search-cancel-button{display:none}
.top-search kbd{font:inherit;font-size:11.5px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:7px;padding:3px 7px;white-space:nowrap}
.ts-pop{position:absolute;top:52px;left:0;right:0;z-index:1500;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);max-height:440px;overflow:auto;padding:6px}
.ts-grp{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);padding:8px 10px 4px}
.ts-item{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;text-align:left;padding:8px 10px;border-radius:10px;color:var(--ink)}
.ts-item.on,.ts-item:hover{background:var(--brand-soft)}
.ts-ri{width:30px;height:30px;border-radius:9px;background:var(--surface-3);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ts-rt{min-width:0;display:flex;flex-direction:column}
.ts-rt b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-rt span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-empty{padding:16px;text-align:center;color:var(--muted);font-size:13px}
@media(max-width:900px){.top-search kbd{display:none}.top-search{margin-left:12px}}
@media(max-width:700px){.top-search{display:none}}

body[data-theme="cosmic"] .icon-btn{border:none;background:transparent;color:var(--ink-2);width:40px;height:40px}
body[data-theme="cosmic"] .icon-btn:hover{background:var(--surface-3);color:var(--brand)}
body[data-theme="cosmic"] .icon-btn.sm{width:28px;height:28px;border:1px solid var(--line);background:#fff}
body[data-theme="cosmic"] #bellBtn .bell-dot{top:4px;right:4px;min-width:16px;height:16px;font-size:9.5px;border:2px solid #fff}
body[data-theme="cosmic"] .pill.user-pill{background:transparent;border:none;color:var(--ink);font-size:14px;font-weight:600;padding:4px 8px;gap:10px;border-radius:12px}
body[data-theme="cosmic"] .pill.user-pill:hover{background:var(--surface-3)}
.user-pill .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#4f0100,#b50007);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;letter-spacing:.02em}
@media(max-width:900px){.user-pill .up-name{display:none}}
body[data-theme="cosmic"] .btn.ghost.onnavy.logout-btn{background:#fff;color:var(--brand-dark);border:1.5px solid #f6cdc8;border-radius:12px;
  padding:9px 16px;font-size:13.5px;font-weight:700;box-shadow:none}
body[data-theme="cosmic"] .btn.ghost.onnavy.logout-btn:hover{background:var(--brand-soft)}
body[data-theme="cosmic"] .brand-switch .bs-label{background:#fff;border-color:var(--line);border-radius:12px;padding:8px 8px 8px 12px}

/* ---------- sidebar ---------- */
body[data-theme="cosmic"] .sidepanel{width:250px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-right:1px solid var(--line);padding:22px 14px}
body[data-theme="cosmic"] .sidepanel h4{color:#a2958e;font-size:11.5px;letter-spacing:.1em;margin:14px 10px 10px;font-weight:700}
body[data-theme="cosmic"] .sidepanel h4:first-child{margin-top:4px}
body[data-theme="cosmic"] .sidepanel h4::before{content:"\2022";font-size:14px;opacity:1;line-height:0}
body[data-theme="cosmic"] .sidepanel h4::after{display:none}
body[data-theme="cosmic"] .navitem{padding:10px 12px;margin-bottom:4px;border-radius:12px;font-size:14.5px;font-weight:600;color:#3b2c2a;gap:14px}
body[data-theme="cosmic"] .navitem:hover{background:#fcfaf6}
body[data-theme="cosmic"] .navitem .ic,
body[data-theme="cosmic"] .navitem[data-nav] .ic{width:24px;height:24px;background:none !important;box-shadow:none !important;color:#463431;border-radius:0}
body[data-theme="cosmic"] .navitem .ic .ico{width:22px;height:22px}
body[data-theme="cosmic"] .navitem.active{background:#fcf1f0;color:var(--brand-dark);box-shadow:none;border-color:transparent}
body[data-theme="cosmic"] .navitem.active .ic{color:var(--brand) !important;box-shadow:none !important}
body[data-theme="cosmic"] .navitem.active::before{left:-14px;top:6px;bottom:6px;width:4px;border-radius:0 4px 4px 0;background:var(--brand);box-shadow:none}
body[data-theme="cosmic"] .navitem .badge{min-width:26px;height:24px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;background:#f7f5f1;color:#3b2c2a;font-size:12.5px;font-weight:700}
body[data-theme="cosmic"] .navitem[data-nav="input"] .badge{background:#fae5e2;color:var(--brand-dark)}
body[data-theme="cosmic"] .navitem[data-nav="published"] .badge{background:#dcf5e7;color:var(--green-ink)}
body[data-theme="cosmic"] .navitem.active .badge{background:#fae0dd;color:var(--brand-dark)}
body[data-theme="cosmic"] .side-collapse{background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--muted)}
body[data-theme="cosmic"] .side-collapse.mid{margin:14px 4px 10px}
body[data-theme="cosmic"] .sidepanel.collapsed{width:78px}

/* ---------- page header (eyebrow + title + subtitle + art) ---------- */
body[data-theme="cosmic"] .content{padding:26px 34px 44px}
#pageContent{--acc:#e3000f;--acc-2:#ff1d2c;--acc-soft:#fcf1f0}
#pageContent[data-accent="blue"]{--acc:#ce000b;--acc-2:#ff0213;--acc-soft:#fceeed}
#pageContent[data-accent="teal"]{--acc:#0ea5a4;--acc-2:#4fd8c8;--acc-soft:#e3f7f5}
#pageContent[data-accent="green"]{--acc:#16b364;--acc-2:#5ee08f;--acc-soft:#e6f7ee}
#pageContent[data-accent="indigo"]{--acc:#ec0010;--acc-2:#ff2c3a;--acc-soft:#fcf1f0}
#pageContent[data-accent="pink"]{--acc:#e8458f;--acc-2:#ff9bc8;--acc-soft:#fdeef6}
#pageContent[data-accent="emerald"]{--acc:#0f9f6e;--acc-2:#7ee0b8;--acc-soft:#e5f6ef}
#pageContent[data-accent="amber"]{--acc:#ee8a07;--acc-2:#ffc857;--acc-soft:#fff3dc}
.hero-head{position:relative;display:flex !important;flex-direction:row !important;align-items:flex-start !important;
  justify-content:space-between;gap:18px;min-height:132px;margin:0 0 20px !important;flex-wrap:nowrap !important}
.hero-head .ph-title{position:relative;z-index:2;min-width:0;width:max-content;max-width:min(640px,52%)}
.hero-head .eyebrow{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);margin:2px 0 8px}
.hero-head .eb-dot{width:7px;height:7px;border-radius:50%;background:var(--acc)}
body[data-theme="cosmic"] .hero-head h2{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.hero-head .ph-title .sub{font-size:16px;color:#5b504a;margin-top:12px;max-width:620px;line-height:1.55}
.hero-head .ph-actions{position:relative;z-index:3;display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:46px;max-width:62%}
.hero-head .ph-actions .tiles{margin:0}
.hero-head .ph-art{position:absolute;z-index:1;top:-30px;right:0;pointer-events:none;transition:opacity .2s}
.hero-head .ph-art svg{display:block;width:420px;height:auto}
.hero-head .ph-art.dim{opacity:.35}
@media(max-width:1000px){.hero-head .ph-art{display:none}}
@media(max-width:820px){.hero-head{flex-wrap:wrap !important;min-height:0}.hero-head .ph-actions{margin-top:0;max-width:none;justify-content:flex-start}
  body[data-theme="cosmic"] .hero-head h2{font-size:30px}}
@media (prefers-reduced-motion: no-preference){.hero-head .ph-art svg{animation:artFloat 7s ease-in-out infinite}}
@keyframes artFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- buttons, inputs, segmented control ---------- */
body[data-theme="cosmic"] .btn{background:var(--grad);color:#fff;border-radius:12px;padding:11px 20px;font-size:14px;font-weight:700;
  box-shadow:0 8px 20px rgba(227,0,15,.28);border:none}
body[data-theme="cosmic"] .btn:hover{filter:brightness(1.06)}
body[data-theme="cosmic"] .btn.sm{padding:8px 14px;font-size:12.5px;border-radius:10px;box-shadow:0 4px 12px rgba(227,0,15,.22)}
body[data-theme="cosmic"] .btn.xs{padding:5px 10px;font-size:11.5px;border-radius:8px;box-shadow:none}
body[data-theme="cosmic"] .btn.ghost{background:#fff;color:var(--ink);border:1px solid #f1ede5;box-shadow:0 1px 2px rgba(54,30,26,.05)}
body[data-theme="cosmic"] .btn.ghost:hover{background:#fefafa;border-color:#f4d6d3;filter:none}
body[data-theme="cosmic"] .btn.green{background:linear-gradient(90deg,#1fc27a,#12a561);box-shadow:0 6px 16px rgba(22,179,100,.25)}
body[data-theme="cosmic"] .btn.danger{background:linear-gradient(90deg,#f25a75,#e13455);box-shadow:0 6px 16px rgba(239,68,98,.22)}
body[data-theme="cosmic"] .btn.brand{background:linear-gradient(90deg,#e8000f,#e3000f)}
body[data-theme="cosmic"] .btn:disabled{opacity:.55;cursor:not-allowed;filter:none}
body[data-theme="cosmic"] .grad-btn{background:var(--grad) !important;box-shadow:0 10px 24px rgba(227,0,15,.32)}
body[data-theme="cosmic"] .f{background:#fff;border:1px solid #efeae2;color:var(--ink);border-radius:10px}
body[data-theme="cosmic"] .f::placeholder{color:#afa49e}
body[data-theme="cosmic"] .f:focus{border-color:#ff2433;box-shadow:0 0 0 4px rgba(227,0,15,.12)}
body[data-theme="cosmic"] .seg{background:#faf7f2;border:1px solid #f5f1eb;border-radius:12px;padding:3px;gap:2px}
body[data-theme="cosmic"] .seg button{border-radius:9px;padding:7px 13px;color:var(--muted)}
body[data-theme="cosmic"] .seg button.on{background:#fff;color:var(--brand-dark);box-shadow:0 1px 3px rgba(54,30,26,.10)}
.date-sel{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 14px;background:#fff;border:1px solid #f1ede5;border-radius:12px;
  color:var(--ink);box-shadow:0 1px 2px rgba(54,30,26,.05);cursor:pointer}
.date-sel select{border:none;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;outline:none;padding-right:4px}
.hero-head .ph-actions > .btn:not(.sm):not(.xs){height:46px}
body[data-theme="cosmic"] .chip.draft{background:#f7f4f0;color:var(--muted)}
body[data-theme="cosmic"] .chip.completed{background:var(--green-soft);color:var(--green-ink)}
body[data-theme="cosmic"] .chip.new,body[data-theme="cosmic"] .chip.input{background:#fceeed;color:var(--brand-dark)}
body[data-theme="cosmic"] .chip.processing{background:#fcedeb;color:#9e0005}
body[data-theme="cosmic"] .pp.on{background:var(--brand-soft);border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}

/* ---------- stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:20px}
@media(max-width:1100px){.stat-grid{grid-template-columns:1fr}}
.stat-card{--sc:#e3000f;--sc-soft:#fbebea;--sc-bg:#fef7f6;position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;
  min-height:140px;padding:22px 24px;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(120deg,var(--sc-bg) 0%,#fff 75%);box-shadow:var(--shadow)}
.stat-card.tone-blue{--sc:#ce000b;--sc-soft:#fbe9e7;--sc-bg:#fdf5f4}
.stat-card.tone-green{--sc:#16b364;--sc-soft:#dcf5e7;--sc-bg:#effbf4}
.stat-card.tone-pink{--sc:#e8458f;--sc-soft:#fde2ef;--sc-bg:#fff4f9}
.stat-card.tone-amber{--sc:#ee8a07;--sc-soft:#ffecc9;--sc-bg:#fff9ee}
.sc-ico{position:relative;z-index:1;width:82px;height:82px;border-radius:50%;background:var(--sc-soft);color:var(--sc);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-check{width:40px;height:40px;border-radius:50%;background:var(--sc);color:#fff;display:flex;align-items:center;justify-content:center}
.sc-check .ico{stroke-width:3}
.sc-main{position:relative;z-index:1;min-width:0}
.sc-n{font-size:34px;font-weight:800;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sc-l{font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-top:10px}
.sc-s{font-size:14px;color:#6b5f59;margin-top:4px}
.sc-delta{position:absolute;z-index:1;top:22px;right:22px;text-align:right;font-size:11px;color:var(--muted)}
.sc-d{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:14px;font-weight:800;margin-bottom:2px}
.sc-d.up,.sc-d.flat{color:var(--green)} .sc-d.down{color:var(--red)}
.sc-d .ico{stroke-width:2.6}
.sc-spark{position:absolute;right:18px;bottom:18px;width:44%;height:64px;pointer-events:none}

/* generic tiles on other pages (Published, Calendar…) */
body[data-theme="cosmic"] .tiles{gap:14px}
body[data-theme="cosmic"] .tile{border-top:1px solid var(--line) !important;min-width:130px;padding:14px 18px;
  background:linear-gradient(120deg,#fef7f6,#fff 80%) !important}
body[data-theme="cosmic"] .tile.processing,body[data-theme="cosmic"] .tile.inprogress{background:linear-gradient(120deg,#fdf5f4,#fff 80%) !important}
body[data-theme="cosmic"] .tile.completed,body[data-theme="cosmic"] .tile.green{background:linear-gradient(120deg,#effbf4,#fff 80%) !important}
body[data-theme="cosmic"] .tile.red{background:linear-gradient(120deg,#fff1f4,#fff 80%) !important}
body[data-theme="cosmic"] .tile.new{background:linear-gradient(120deg,#fff4f9,#fff 80%) !important}
body[data-theme="cosmic"] .tile .n{font-size:26px;font-weight:800}
body[data-theme="cosmic"] .tile .l{color:#6b5f59;letter-spacing:.06em}
body[data-theme="cosmic"] .kpi-ic{background:var(--acc-soft,#fcf1f0);color:var(--acc,#e3000f)}

/* ---------- Input board ---------- */
.board.v2{gap:20px}
.board.v2 .col{--cc:#e3000f;--cc-soft:#fbebea;--cc-soft2:#fdf6f6;--cc-ink:#c7000a;padding:20px;min-height:380px;border-radius:20px}
.board.v2 .col-processing{--cc:#ce000b;--cc-soft:#fbe6e3;--cc-soft2:#fdf4f3;--cc-ink:#9e0005}
.board.v2 .col-completed{--cc:#16b364;--cc-soft:#d9f4e5;--cc-soft2:#effbf4;--cc-ink:#0b7f45}
.col-h{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.col-dot{width:14px;height:14px;border-radius:4px;background:var(--cc)}
.col-count{margin-left:auto;min-width:32px;height:28px;padding:0 8px;border-radius:9px;background:var(--cc-soft2);color:var(--cc-ink);
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.board.v2 .col-body{display:flex;flex-direction:column}
.col-empty{min-height:292px;border-radius:16px;background:linear-gradient(180deg,#fffdfc,#fcfaf7);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:24px;gap:6px}
.col-empty .ea{margin-bottom:8px}
.col-empty b{font-size:16px;color:var(--ink)}
.col-empty span{font-size:13.5px;color:#746760}
.in-drop{border:1.5px dashed #f7d9d5;border-radius:16px;background:linear-gradient(180deg,#fffdfc,#fef9f9);min-height:292px;padding:26px 18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;cursor:pointer;transition:border-color .15s,background .15s}
.in-drop:hover,.col.drag-over .in-drop{border-color:var(--brand);background:#fdf5f4}
.in-drop:focus-visible{outline:3px solid rgba(227,0,15,.35);outline-offset:2px}
.in-drop-ic{width:76px;height:76px;border-radius:50%;background:#fbebea;color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.in-drop-t{font-size:16px;font-weight:800;color:var(--ink)}
.in-drop-s{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.in-drop-btn{min-width:220px;height:48px;border-radius:14px !important}
.in-drop-f{display:flex;align-items:center;gap:18px;margin-top:20px;font-size:13px;color:var(--muted);font-weight:600}
.in-drop-f span{display:inline-flex}
.in-drop.compact{min-height:0;flex-direction:row;gap:10px;padding:14px;margin-top:4px}
.in-drop.compact .in-drop-ic{width:36px;height:36px;margin:0}
.in-drop.compact .in-drop-t{font-size:13.5px} .in-drop.compact .in-drop-s{margin:0;font-size:12.5px}
body[data-theme="cosmic"] .col.drag-over{outline:2px dashed var(--brand);background:#fef9f9 !important}

/* ---------- charts, tables, misc ---------- */
body[data-theme="cosmic"] svg .viz-hit.hover{fill:rgba(227,0,15,.07)}
body[data-theme="cosmic"] .hb-row.hover{background:rgba(227,0,15,.06)}
body[data-theme="cosmic"] .viz-tip{background:#35221f;box-shadow:0 10px 24px rgba(53,29,25,.25)}
body[data-theme="cosmic"] .dm-msg.out .dm-bubble{background:var(--brand);border-color:var(--brand)}
body[data-theme="cosmic"] .msgr-window.chat-win .msgr-msgs{background:#fcf7f7}
body[data-theme="cosmic"] .msgr-window.chat-win .mw-bubble{border-color:var(--line)}

/* ---------- login page ---------- */
body[data-theme="cosmic"].logged-out{--app-bg:radial-gradient(900px 520px at 85% 0%,#fceeec 0%,transparent 60%),
  radial-gradient(800px 520px at 0% 100%,#fcedeb 0%,transparent 60%),#fcfaf7}
body[data-theme="cosmic"] .auth-title .grad-a{background:linear-gradient(90deg,#ff0919,#d2000c);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-theme="cosmic"] .auth-title .grad-b{background:linear-gradient(90deg,#d2000c,#ce000b);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-theme="cosmic"] .auth-sub{color:var(--muted)}
body[data-theme="cosmic"] .login-card{background:#fff !important;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(77,1,0,.14)}
body[data-theme="cosmic"] .login-card::before{background:var(--grad)}
body[data-theme="cosmic"] .login-card h3{color:var(--ink)} body[data-theme="cosmic"] .login-card>p{color:var(--muted)}
body[data-theme="cosmic"] .login-card .ac-ico.grad{background:var(--grad-2);box-shadow:0 10px 22px rgba(227,0,15,.35)}
body[data-theme="cosmic"] .fld .f{background:#fff}
body[data-theme="cosmic"] .auth-links a{color:var(--brand-dark)}
body[data-theme="cosmic"] .feat b{color:var(--ink)} body[data-theme="cosmic"] .feat span{color:var(--muted)}
body[data-theme="cosmic"] .feat-ic{color:var(--brand)}
body[data-theme="cosmic"] .feat-sep{background:var(--line-strong)}
body[data-theme="cosmic"] .cosmic-floor::before{background-image:linear-gradient(rgba(244,0,16,.22) 1px,transparent 1px),
  linear-gradient(90deg,rgba(244,0,16,.22) 1px,transparent 1px)}
body[data-theme="cosmic"] .crystal{filter:drop-shadow(0 18px 36px rgba(227,0,15,.28))}
body[data-theme="cosmic"] .sphere.s1{background:radial-gradient(circle at 34% 30%,#f3c4bf,#e3000f 70%);box-shadow:0 0 70px rgba(244,0,16,.45)}
body[data-theme="cosmic"] .sphere.s1::after{border-color:rgba(244,0,16,.35)}
body[data-theme="cosmic"] .sphere.s2{background:radial-gradient(circle at 34% 30%,#f4c8c3,#ce000b 72%);box-shadow:0 0 44px rgba(206,0,11,.45)}
body[data-theme="cosmic"] .sphere.s3{background:radial-gradient(circle at 34% 30%,#fbcfe8,#e8458f 72%);box-shadow:0 0 22px rgba(232,69,143,.5)}
body[data-theme="cosmic"] .topbar .logo{flex-shrink:0;white-space:nowrap}
body[data-theme="cosmic"] .pill.user-pill,body[data-theme="cosmic"] .logout-btn{white-space:nowrap;flex-shrink:0}
body[data-theme="cosmic"] label.f{background:none !important;border:none !important;box-shadow:none !important;padding:0;border-radius:0}
.setup-card > .btn,.card > .btn{align-self:flex-start}
/* V34 — small screens */
.board.v2{grid-template-columns:repeat(3,minmax(0,1fr))}
.board.v2 .col{min-width:0}
@media(max-width:860px){.board.v2{grid-template-columns:minmax(0,1fr)}}
@media(max-width:820px){.hero-head .ph-title{width:auto;max-width:none;flex:1 1 100%}}
@media(max-width:700px){
  body[data-theme="cosmic"] .topbar{padding:0 12px;gap:8px}
  body[data-theme="cosmic"] .topbar .logo-txt{font-size:16px}
  body[data-theme="cosmic"] .btn.ghost.onnavy.logout-btn{padding:8px 10px;font-size:0;gap:0}
  body[data-theme="cosmic"] .btn.ghost.onnavy.logout-btn .ico{width:18px;height:18px}
  body[data-theme="cosmic"] .content{padding:18px 14px 32px}
  .brand-switch{display:none}
}
@media(max-width:560px){
  .stat-card{flex-wrap:wrap;gap:14px;padding:18px}
  .sc-ico{width:58px;height:58px} .sc-ico .ico{width:24px;height:24px}
  .sc-delta{position:static;order:3;width:100%;display:flex;align-items:center;gap:6px;text-align:left}
  .sc-d{margin:0}
  .sc-spark{width:40%;height:48px}
  .in-drop-btn{min-width:0;width:100%}
}
/* V34 — sidebar fills the screen height; collapse button sits in the bottom-right corner
   as an icon and slides its label out to the left on hover */
body[data-theme="cosmic"] .sidepanel{position:sticky;top:68px;align-self:flex-start;height:calc(100vh - 68px);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
body[data-theme="cosmic"] .side-collapse.corner{margin:auto 0 0 auto;flex-shrink:0;display:inline-flex;align-items:center;justify-content:flex-end;
  gap:0;height:40px;min-width:40px;padding:0 11px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink-2);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 1px 2px rgba(54,30,26,.05);
  transition:background .2s,color .2s,border-color .2s}
body[data-theme="cosmic"] .side-collapse.corner .sc-ic{width:18px;height:18px;border:none;border-radius:0;flex-shrink:0;transform:none}
.side-collapse.corner .sc-label{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;margin-right:0;
  transform:translateX(12px);transition:max-width .28s ease,opacity .2s ease,margin .28s ease,transform .28s ease}
body[data-theme="cosmic"] .side-collapse.corner:hover,body[data-theme="cosmic"] .side-collapse.corner:focus-visible{
  background:var(--brand-soft);border-color:#f7d9d5;color:var(--brand-dark)}
.side-collapse.corner:hover .sc-label,.side-collapse.corner:focus-visible .sc-label{max-width:90px;opacity:1;margin-right:8px;transform:none}
body[data-theme="cosmic"] .sidepanel.collapsed .side-collapse.corner{margin:auto auto 0}
.sidepanel.collapsed .side-collapse.corner .sc-label{display:none}
@media (prefers-reduced-motion: reduce){.side-collapse.corner .sc-label{transition:none}}
.hero-head .ph-art.off{display:none}
/* Setup: breathing room between the platform list and the cards around it */
body[data-theme="cosmic"] .pf-grid{gap:14px;margin:0 0 28px}
body[data-theme="cosmic"] .pf-row{flex-shrink:0}
body[data-theme="cosmic"] #setupBody > .setup-card{margin-bottom:28px}
/* Setup: platform tiles */
.pf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:18px;margin:0 0 28px}
.pf-tile{display:flex;flex-direction:column;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);transition:box-shadow .18s,border-color .18s,transform .18s}
.pf-tile:hover{box-shadow:var(--shadow-md);border-color:#f6e0de;transform:translateY(-1px)}
.pf-tile.is-live{border-color:#bfe9d2}
.pt-top{display:flex;align-items:center;gap:12px}
.pt-top .pf-ic{width:48px;height:48px;border-radius:14px;flex-shrink:0}
.pt-name{min-width:0;flex:1;display:flex;flex-direction:column}
.pt-name b{font-size:15.5px;color:var(--ink)}
.pt-name .sub{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-chips{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.pt-meta{display:flex;flex-direction:column;gap:6px;flex:1}
.pt-scope{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.pt-scope.big{font-size:13px;background:var(--surface-3);border-radius:10px;padding:9px 11px;color:var(--ink-2);margin-bottom:4px;align-items:flex-start}
.pt-import{display:flex;align-items:center;gap:6px;font-size:12px}
.link-btn{border:none;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:700;color:var(--brand-dark);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.link-btn:hover{text-decoration:underline}
.link-btn:disabled{opacity:.6;cursor:wait}
.pt-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pt-actions .btn{justify-content:center;padding:9px 8px !important;white-space:nowrap}
.pf-ic.sm{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 2px 8px rgba(77,1,0,.12)}
@media(max-width:420px){.pt-actions{grid-template-columns:1fr}}
/* AI provider picker */
.sc-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.sc-sub .muted{font-size:12.5px}
.ai-provs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:10px;margin-bottom:12px}
.ai-prov{display:flex;flex-direction:column;gap:5px;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.ai-prov:hover{border-color:#f4d6d3}
.ai-prov.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand) inset}
.ai-prov:focus-visible{outline:3px solid rgba(227,0,15,.35);outline-offset:2px}
.ap-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ap-top b{font-size:14px}
.ap-badge{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 8px;white-space:nowrap}
.ap-badge.free{background:var(--green-soft);color:var(--green-ink)}
.ap-badge.paid{background:#f7f4f0;color:var(--muted)}
.ap-note{font-size:12px;color:var(--muted);line-height:1.4}
.ap-state{font-size:11.5px;color:var(--ink-2);display:flex;align-items:center;gap:4px}
.ai-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.ai-fields{grid-template-columns:1fr}}
.ai-fields label.f{display:flex !important;align-items:center;gap:6px}
.ai-keylink{margin-left:auto;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:3px}
.ai-model-row{display:flex;gap:8px}
.ai-model-row .f{flex:1;min-width:0}
.ai-test-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 14px}
.ai-using{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;padding:9px 12px;border-radius:10px;margin:0 0 12px}
.ai-using .ico{flex-shrink:0;margin-top:2px}
.ai-using.own{background:var(--green-soft);color:var(--green-ink)}
.ai-using.platform{background:var(--brand-soft);color:var(--brand-dark)}
.ai-using.none{background:var(--gold-soft);color:var(--gold-ink)}
.chk.ai-share{margin:-4px 0 14px;cursor:pointer}
.ai-paidwarn{display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:7px 10px;border-radius:9px;background:var(--gold-soft);color:var(--gold-ink);font-size:12px;font-weight:600}
.vdesc-sm{font-size:12.5px;color:var(--ink-2);margin:4px 0 6px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============================================================
   Brand logo + loading animation (logo inside a spinning gradient ring)
   ============================================================ */
.topbar .brand-logo{height:34px;width:auto;display:block}
.auth-logo{display:block;width:168px;height:auto;margin:0 auto 6px;filter:drop-shadow(0 16px 30px rgba(227,0,15,.22))}
@media(max-width:700px){.topbar .brand-logo{height:34px}.auth-logo{width:120px}}

.loading{position:relative;display:flex !important;align-items:center;justify-content:center;
  min-height:140px;padding:0 !important;margin:0 auto;font-size:0 !important;color:transparent !important;overflow:hidden}
.loading::before{content:"";width:62px;height:62px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from 0deg,rgba(227,0,15,0) 0deg,rgba(227,0,15,.15) 90deg,#e3000f 250deg,#ce000b 350deg,rgba(206,0,11,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));
  animation:ldSpin .95s linear infinite}
.loading::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  background:url(/static/img/solo-mark.png) center/contain no-repeat;animation:ldPulse 1.6s ease-in-out infinite}
.loading.sm{min-height:70px}
.loading.sm::before{width:38px;height:38px}
.loading.sm::after{width:20px;height:20px;margin:-10px 0 0 -10px}
.loading.lg{min-height:0}
.loading.lg::before{width:96px;height:96px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.5px))}
.loading.lg::after{width:54px;height:54px;margin:-27px 0 0 -27px}
@keyframes ldSpin{to{transform:rotate(360deg)}}
@keyframes ldPulse{0%,100%{transform:scale(.9);opacity:.8}50%{transform:scale(1.04);opacity:1}}
@media (prefers-reduced-motion: reduce){.loading::before{animation-duration:2.6s}.loading::after{animation:none}}
.app-splash{min-height:calc(100vh - 68px);display:flex;align-items:center;justify-content:center}
/* ============================================================
   Compact icon rail (collapsed sidebar):
   counts become a small round badge on the icon, so icons stay aligned
   ============================================================ */
body[data-theme="cosmic"] .sidepanel.collapsed .navitem{justify-content:center;padding:10px 0;gap:0}
body[data-theme="cosmic"] .sidepanel.collapsed .navitem .badge,
body[data-theme="cosmic"] .sidepanel.collapsed .navitem .nav-unread + .badge{
  display:inline-flex;position:absolute;top:3px;left:calc(50% + 4px);margin:0;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;font-size:10px;font-weight:800;line-height:1;background:var(--grad) !important;color:#fff !important;
  border:2px solid #fff;box-shadow:0 2px 6px rgba(227,0,15,.35)}
body[data-theme="cosmic"] .sidepanel.collapsed .navitem[data-nav="published"] .badge{background:linear-gradient(135deg,#22c55e,#12a561) !important;box-shadow:0 2px 6px rgba(22,179,100,.35)}
body[data-theme="cosmic"] .sidepanel.collapsed .navitem .badge.alert{background:linear-gradient(135deg,#f25a75,#e13455) !important}
body[data-theme="cosmic"] .sidepanel.collapsed .navitem .badge.is-zero{display:none}
/* ============================================================
   Stat cards that adapt to their OWN width (container queries):
   wide = icon | numbers | change, sparkline behind on the right;
   narrow = icon + change on top, numbers below, sparkline under them
   ============================================================ */
.stat-card{container-type:inline-size;display:block;padding:20px 22px;min-height:0}
.sc-in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico main delta";
  align-items:center;column-gap:18px;min-height:98px}
.sc-in .sc-ico{grid-area:ico}
.sc-in .sc-main{grid-area:main;z-index:1}
.sc-in .sc-delta{grid-area:delta;position:static;align-self:start;z-index:1;white-space:nowrap}
.sc-in .sc-sparkwrap{position:absolute;right:-4px;bottom:-6px;width:42%;height:58px;pointer-events:none;z-index:0}
.sc-in .sc-spark{position:static;width:100%;height:100%}
.sc-l,.sc-s{overflow-wrap:anywhere}
@container (max-width: 380px){
  .sc-in{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico delta" "main main" "spark spark";row-gap:12px;min-height:0}
  .sc-in .sc-ico{width:54px;height:54px}
  .sc-in .sc-ico > .ico{width:24px;height:24px}
  .sc-in .sc-check{width:30px;height:30px}
  .sc-in .sc-delta{justify-self:end;align-self:center;text-align:right}
  .sc-in .sc-main{padding-right:0}
  .sc-in .sc-n{font-size:30px}
  .sc-in .sc-sparkwrap{grid-area:spark;position:static;width:100%;height:40px}
}
@container (max-width: 250px){
  .sc-in .sc-delta > span:not(.sc-d){display:none}   /* keep just the arrow + %, the card is very narrow */
}
/* Top bar fits any width: the search box shrinks first, then the name text hides (avatar stays) */
body[data-theme="cosmic"] #topbar-actions{flex-shrink:0}
.top-search{min-width:0 !important;margin-left:clamp(12px,6vw,120px)}
@media(max-width:1180px){ .user-pill .up-name{display:none} .top-search{margin-left:16px} }
@media(max-width:1000px){ .top-search kbd{display:none} }
/* Small screens: calendar, two-column card grids and long URL rows shrink instead of spilling */
.cal-dow,.cal-body{grid-template-columns:repeat(7,minmax(0,1fr))}
.viz-grid2{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.pf-redirect.big{flex-wrap:wrap}
@media(max-width:700px){
  .cal-head{flex-wrap:wrap;gap:8px}
  .cal-head h3{min-width:0;flex:1;font-size:15px}
  .cal-dow div{padding:8px 2px;font-size:9.5px;letter-spacing:0}
  .cal-cell{min-height:64px;padding:4px !important}
  .cal-cell .dnum{font-size:11px}
  .cal-cell .ev{font-size:9px;padding:1px 4px;border-radius:4px}
  .cal-cell .ev .ico{display:none}
  .pf-redirect.big > span{min-width:0 !important;width:100%}
}
@media(max-width:700px){
  #pageContent table.rep-table,#pageContent table.logins-tbl{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
.in-drop-btn{min-width:min(220px,100%) !important;max-width:100%}
.in-drop-f{flex-wrap:wrap;justify-content:center;gap:10px 16px}
/* ============================================================
   Loader sizing: one size variable (--ld) that scales with the screen.
   A page-level loader (the only thing in a page area) is large and
   centred in the free space; loaders inside cards stay compact.
   ============================================================ */
.loading{--ld:clamp(54px,5.5vw,72px)}
/* the loader is the SoLo "S" turning on its own (no ring) */
.loading::before{width:calc(var(--ld)*.8) !important;height:calc(var(--ld)*.8) !important;border-radius:0;
  background:url(/static/img/solo-mark.png) center/contain no-repeat;-webkit-mask:none !important;mask:none !important;
  animation:ldSpin 1.15s cubic-bezier(.6,.05,.4,.95) infinite}
.loading::after{display:none !important}
.loading.sm{--ld:clamp(34px,3vw,40px)}
.loading.lg{--ld:clamp(88px,10vw,132px)}
#pageContent > .loading,
#pageContent > :not(.card):not(.col):not(.stat-grid) > .loading:only-child{--ld:clamp(76px,8vw,120px);min-height:max(260px,calc(100vh - 360px))}
@media (prefers-reduced-motion: reduce){.loading::before{animation-duration:2.4s}}
/* ============================================================
   Workspaces (SuperAdmin) + connection-mode chooser
   ============================================================ */
.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:18px}
.ws-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.ws-card.is-off{background:#fdfcfb;border-style:dashed}
.ws-card.is-off .ws-av{filter:grayscale(1);opacity:.6}
.ws-top{display:flex;align-items:center;gap:12px}
.ws-av{width:46px;height:46px;border-radius:14px;background:var(--grad-2);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ws-id{flex:1;min-width:0;display:flex;flex-direction:column}
.ws-id b{font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-id span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--surface-2);border-radius:12px;padding:10px}
.ws-stats div{display:flex;flex-direction:column;align-items:center}
.ws-stats b{font-size:20px;color:var(--ink)} .ws-stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ws-meta{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-2)}
.ws-meta > div{display:flex;align-items:center;gap:6px}
.ws-plats{display:flex;gap:6px;flex-wrap:wrap}
.ws-actions{display:flex;gap:8px;flex-wrap:wrap}
.ws-actions .btn{flex:1 1 auto;justify-content:center}
.ws-actions .btn.danger{flex:0 0 auto}
.ws-cred-box{border:1px solid #f8e3e1;background:#fefbfb;border-radius:14px;padding:12px 14px;margin:12px 0 4px}
.ws-creds{display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border-radius:12px;padding:12px 14px}
.ws-creds div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.ws-creds span{color:var(--muted)} .ws-creds b{font-family:ui-monospace,Consolas,monospace;word-break:break-all;text-align:right}
.mode-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px;margin:6px 0}
.mode-opt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:14px;cursor:pointer;background:#fff}
.mode-opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand) inset}
.mode-opt input{margin-top:3px;accent-color:var(--brand)}
.mode-opt b{display:block;font-size:13.5px;color:var(--ink)}
.mode-opt small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
.navitem[data-nav="workspaces"] .ic{background:none}
.ws-actions{flex-wrap:nowrap}
.ws-actions .btn.sm{padding:8px 9px !important;font-size:12px;min-width:0}
.ws-actions .btn.danger{padding:8px 10px !important}
@container (max-width:300px){.ws-actions{flex-wrap:wrap}}
.su-login{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);background:var(--brand-soft);border-radius:9px;padding:6px 8px;margin:8px 0 2px}
.su-login b{font-family:ui-monospace,Consolas,monospace;color:var(--brand-dark)}
.su-login .icon-btn{margin-left:auto}
.dm-help{padding:0 10px 12px;display:flex;flex-direction:column;gap:8px}
.dm-err{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;font-size:12.5px;display:flex;flex-direction:column;gap:6px}
.dm-err > b{display:inline}
.dm-err-msg{color:var(--red-ink);word-break:break-word}
.dm-err-fix{color:var(--ink-2);background:var(--gold-soft);border-radius:8px;padding:8px 10px;line-height:1.45;display:flex;gap:6px;align-items:flex-start}
.dm-err-fix .ico{flex-shrink:0;margin-top:2px}
.dm-err-fix > span{flex:1;min-width:0;overflow-wrap:anywhere}
.dm-list{overflow-x:hidden}
.ob-never{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:12.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.ob-never input{width:15px;height:15px;accent-color:var(--accent,#f30010);cursor:pointer}

/* ================= Login page (V37) =================
   Fixed light palette — the login keeps its look whatever theme the user picked. */
body.logged-out .topbar{display:none}
.lp{--lp-ink:#2a1916;--lp-ink2:#62554f;--lp-muted:#847771;--lp-line:#ede6d9;--lp-brand:#e0000f;
  --lp-grad:linear-gradient(90deg,#e8000f 0%,#e5000f 45%,#d0000c 100%);
  position:relative;min-height:100vh;box-sizing:border-box;display:grid;
  grid-template-columns:minmax(330px,1.1fr) minmax(0,1.4fr) minmax(0,clamp(420px,23vw,500px));align-items:center;gap:clamp(12px,1.6vw,32px);
  padding:clamp(28px,4.6vh,56px) clamp(24px,4.2vw,110px);overflow:hidden;isolation:isolate;
  background:radial-gradient(38% 46% at 0% 100%,#fbe8e6 0%,rgba(251,232,230,0) 70%),
    radial-gradient(34% 40% at 6% 0%,#fceeed 0%,rgba(252,238,237,0) 70%),#fdf7f6;
  font-family:"Plus Jakarta Sans","Inter","Segoe UI",Roboto,sans-serif;color:var(--lp-ink)}
.lp-hero{align-self:stretch;display:flex;flex-direction:column;min-width:0;container-type:inline-size}
.lp-brand{display:flex;align-items:center;gap:16px}
.lp-brand img{width:clamp(118px,8.6vw,160px);height:auto}
.lp-by{font-size:clamp(14px,1vw,17px);font-weight:600;line-height:1.2;color:var(--lp-ink2)}
.lp-by b{font-weight:800;color:var(--lp-ink)}
.lp-tag{font-size:14px;color:var(--lp-ink2);margin-top:6px}
.lp-copy{margin:auto 0;padding:clamp(28px,6vh,72px) 0 12px}
.lp-eyebrow{font-size:clamp(12px,.85vw,15px);font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--lp-brand)}
.lp-h1{font-size:clamp(32px,8.6cqi,72px);font-weight:800;line-height:1.04;letter-spacing:-.035em;margin:14px 0 22px;color:var(--lp-ink)}
.lp-h1 span{background:var(--lp-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-lead{font-size:clamp(15px,3.3cqi,19px);line-height:1.55;color:var(--lp-ink2);margin:0 0 clamp(26px,5vh,54px);max-width:30em}
.lp-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:480px}
.lp-feat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.lp-feat b{font-size:15px;font-weight:700;color:var(--lp-ink);margin-top:8px}
.lp-feat small{font-size:12px;line-height:1.4;color:var(--lp-muted)}
.lf-ic{width:clamp(52px,3.6vw,66px);height:clamp(52px,3.6vw,66px);border-radius:50%;display:grid;place-items:center}
.lf-ic.c1{background:#fcedeb;color:#f40010} .lf-ic.c2{background:#ffe4ee;color:#f43f7f}
.lf-ic.c3{background:#fbe8e6;color:#c7000a} .lf-ic.c4{background:#dcf6e9;color:#12a560}

.lp-card{justify-self:end;width:100%;box-sizing:border-box;background:#fff;border-radius:28px;
  padding:clamp(28px,4.4vh,46px) clamp(26px,2.6vw,46px) clamp(24px,3.6vh,36px);text-align:center;
  box-shadow:0 30px 80px rgba(120,0,1,.14),0 2px 6px rgba(120,0,1,.05);animation:floatIn .5s ease both}
.lp-card-logo{width:clamp(150px,11vw,196px);height:auto;margin:0 auto 4px;display:block}
.lp-card .lp-by{font-size:14px}
.lp-card .lp-tag{font-size:13px;margin-top:4px}
.lp-welcome{font-size:clamp(24px,1.75vw,31px);font-weight:800;letter-spacing:-.02em;color:var(--lp-ink);margin:clamp(18px,3.4vh,34px) 0 6px}
.lp-sub{font-size:15px;color:var(--lp-ink2);margin:0 0 clamp(18px,3vh,30px)}
.lp-fld{display:flex;align-items:center;gap:10px;height:52px;border:1.5px solid var(--lp-line);border-radius:12px;
  padding:0 14px;margin-bottom:14px;background:#fff;cursor:text;transition:border-color .15s,box-shadow .15s}
.lp-fld:focus-within{border-color:var(--lp-brand);box-shadow:0 0 0 4px rgba(224,0,15,.12)}
.lp-fic{color:#847771;display:grid;place-items:center;flex-shrink:0}
.lp-fld input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--lp-ink);height:100%}
.lp-fld input::placeholder{color:#9f928c}
.lp-eye{border:0;background:transparent;color:#847771;padding:6px;border-radius:8px;display:grid;place-items:center}
.lp-eye:hover{color:var(--lp-brand);background:#fdf3f2}
.lp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 14px;font-size:14px;flex-wrap:wrap}
.lp-check{display:inline-flex;align-items:center;gap:9px;color:var(--lp-ink2);cursor:pointer;user-select:none}
.lp-check input{width:17px;height:17px;margin:0;accent-color:var(--lp-brand);cursor:pointer}
.lp a{color:var(--lp-brand);font-weight:700}
.lp .err{text-align:left;margin:0 0 10px}
.lp-go{width:100%;height:54px;border:0;border-radius:12px;background:linear-gradient(90deg,#dc000e,#f10010);color:#fff;
  font:inherit;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 14px 30px rgba(224,0,15,.32);transition:transform .15s,box-shadow .15s,filter .15s}
.lp-go:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 18px 36px rgba(224,0,15,.38)}
.lp-go:disabled{opacity:.7;cursor:wait;transform:none}
.lp-go .ico{transition:transform .15s} .lp-go:hover .ico{transform:translateX(3px)}
.lp-foot{margin:clamp(20px,3.4vh,32px) 0 0;font-size:15px;color:var(--lp-ink2)}
.lp-scene{min-width:0;align-self:center;container-type:inline-size}
/* large soft background shapes (right side) */
.lp::before,.lp::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.lp::before{right:-14vw;top:-26vh;width:62vw;height:118vh;border-radius:50%;
  background:radial-gradient(closest-side,#f9dcd9 0%,#fbe7e4 55%,rgba(251,235,233,0) 100%);opacity:.95}
.lp::after{right:-22vw;bottom:-38vh;width:70vw;height:80vh;border-radius:50%;
  background:linear-gradient(160deg,#f8d6d2 0%,#f4cac5 60%,#f8dad7 100%);opacity:.55;filter:blur(2px)}

/* ---- login "concept video": a player built in code (static/js/loginart.js) ----
   1em follows the player width (container units), so it keeps its proportions at any size */
.lp-scene{display:flex;justify-content:center}
.cv{--g:linear-gradient(90deg,#dc000e,#f10010);--c-line:#f8ebea;--c-soft:#fcf8f8;--c-brand:#e0000f;
  position:relative;width:min(94%,860px,calc((100vh - 220px)*1.18));container-type:inline-size;color:var(--lp-ink)}
.cv>*{font-size:2.45cqi}
.cv>.cv-cap,.cv>.cv-tl{font-size:max(2.45cqi,12.5px)}   /* captions stay readable on smaller laptops */
.cv .ico,.cv .pico{width:1.15em;height:1.15em;flex-shrink:0}
.cv b{font-weight:800}

/* window */
.cv-win{background:#fff;border:1px solid var(--c-line);border-radius:1.2em;overflow:hidden;
  box-shadow:0 2em 4em rgba(120,0,1,.16),0 .2em .6em rgba(120,0,1,.06)}
.cv-bar{display:flex;align-items:center;gap:.8em;padding:.65em .9em;border-bottom:1px solid #f8f4ee;background:#fefcfc}
.cv-dots{display:flex;gap:.35em}
.cv-dots i{width:.62em;height:.62em;border-radius:50%;background:#ff8a8a}
.cv-dots i:nth-child(2){background:#ffd36b} .cv-dots i:nth-child(3){background:#5fd38d}
.cv-url{display:inline-flex;align-items:center;gap:.35em;font-size:.64em;font-weight:600;color:var(--lp-muted);background:#faf7f1;border-radius:9em;padding:.3em .9em}
.cv-url .ico{width:1em;height:1em}
.cv-sp{flex:1}
.cv-count{font-size:.64em;font-weight:800;color:var(--c-brand);font-variant-numeric:tabular-nums}
.cv-scr{position:relative;height:24em;overflow:hidden;background:radial-gradient(120% 90% at 100% 0%,#fdf3f2 0%,#fff 60%)}
.cv-sc{position:absolute;inset:0;padding:1.4em;box-sizing:border-box;display:none}
.cv-sc.on{display:flex;animation:cvIn .5s ease both}

/* shared bits */
.cv-eye{font-size:.66em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-brand)}
.cv-thumb{position:relative;flex-shrink:0;width:2.8em;height:2.8em;border-radius:.6em;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,#ffb36b,#ff5f8a 55%,#f10010)}
.cv-play{width:1.3em;height:1.3em;border-radius:50%;background:rgba(255,255,255,.92);color:var(--c-brand);display:grid;place-items:center}
.cv-play .ico{width:.7em;height:.7em}
.cv-ok{width:1.3em;height:1.3em;border-radius:50%;background:#dcfce7;color:#15803d;display:grid;place-items:center;flex-shrink:0}
.cv-ok .ico{width:.7em;height:.7em}
.cv-ib{width:1.9em;height:1.9em;border-radius:.6em;background:#fceeed;color:var(--c-brand);display:grid;place-items:center;flex-shrink:0}
.cv-ib.g{background:#dcfce7;color:#15803d}
.cv-spark{width:2em;height:2em;border-radius:50%;display:grid;place-items:center;color:#fff;flex-shrink:0;
  background:linear-gradient(135deg,#e8000f,#ef0010);box-shadow:0 .4em .9em rgba(224,0,15,.35)}
.cv-pill{display:flex;align-items:center;justify-content:center;gap:.1em;height:1.5em;border-radius:.45em;background:#fff;border:1px solid var(--c-line);font-style:normal}
.cv-pill .pico{width:.95em;height:.95em}
.s3-gen,.s5-btn,.s7-send{display:inline-flex;align-items:center;gap:.35em;font-size:.68em;font-weight:700;color:#fff;border-radius:.7em;
  padding:.55em .9em;background:var(--g);box-shadow:0 .5em 1em rgba(224,0,15,.3);white-space:nowrap}
.cv-spin{width:.8em;height:.8em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;box-sizing:border-box;animation:cvSpin .7s linear infinite}

/* 1 · connect */
.s1{align-items:center;gap:1.4em}
.s1-ring{--R:7.6em;position:relative;width:19em;height:19em;flex-shrink:0}
.s1-hub{position:absolute;left:50%;top:50%;width:4.6em;height:4.6em;margin:-2.3em;border-radius:50%;background:#fff;display:grid;place-items:center;z-index:2;
  box-shadow:0 .8em 2em rgba(120,0,1,.18),0 0 0 .5em rgba(224,0,15,.08);animation:cvPop .5s cubic-bezier(.3,1.5,.5,1) both,cvPulse 2.2s ease-in-out 1.6s infinite}
.s1-hub img{height:2.9em;width:auto}
.s1-line{position:absolute;left:50%;top:50%;width:var(--R);height:2px;margin-top:-1px;transform-origin:0 50%;transform:rotate(var(--a));
  background:linear-gradient(90deg,#f3bab4,#fbebea);animation:cvLine .5s ease var(--d) both}
.s1-node{position:absolute;left:50%;top:50%;width:3.2em;height:3.2em;margin:-1.6em;z-index:2;
  transform:rotate(var(--a)) translate(var(--R)) rotate(calc(-1 * var(--a)))}
.s1-pop{position:relative;width:100%;height:100%;border-radius:50%;background:#fff;border:1px solid #f8eceb;display:grid;place-items:center;
  box-shadow:0 .5em 1.2em rgba(120,0,1,.14);animation:cvPop .5s cubic-bezier(.3,1.6,.5,1) var(--d) both}
.s1-pop .pico{width:1.5em;height:1.5em}
.s1-ok{position:absolute;right:-.25em;bottom:-.25em;width:1.25em;height:1.25em;border-radius:50%;background:#16a34a;color:#fff;
  display:grid;place-items:center;border:.14em solid #fff;animation:cvPop .35s ease calc(var(--d) + .45s) both}
.s1-ok .ico{width:.7em;height:.7em}
.s1-txt{flex:1;min-width:0}
.s1-n{font-size:3.6em;font-weight:800;letter-spacing:-.03em;line-height:1}
.s1-n b{font-variant-numeric:tabular-nums} .s1-n span{font-size:.42em;color:var(--lp-muted);margin-left:.1em}
.s1-l{font-size:1em;font-weight:700;color:var(--lp-ink2);margin:.35em 0 1.1em}
.cv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em}
.cv-list li{display:flex;align-items:center;gap:.55em;font-size:.74em;font-weight:600;color:var(--lp-ink2);background:var(--c-soft);
  border:1px solid #f8f4ee;border-radius:.75em;padding:.6em .75em;animation:cvUp .45s ease var(--d) both}
.cv-list .ico{color:var(--c-brand)}

/* 2 · upload */
.s2{gap:1.2em;align-items:stretch}
.s2-drop{position:relative;flex:1.2;min-width:0;border:2px dashed #f7d0cb;border-radius:1.1em;background:#fefafa;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.35em;padding:1em 1em 5.4em;text-align:center;box-sizing:border-box;animation:s2Hi var(--dur) both}
.s2-ic{width:3.2em;height:3.2em;border-radius:1em;background:#fceeed;color:var(--c-brand);display:grid;place-items:center;margin-bottom:.3em}
.s2-ic .ico{width:1.6em;height:1.6em}
.s2-drop>b{font-size:.95em} .s2-drop>small{font-size:.68em;color:var(--lp-muted)}
.s2-file{position:absolute;left:1em;right:1em;bottom:1em;display:flex;align-items:center;gap:.7em;background:#fff;border:1px solid var(--c-line);
  border-radius:.9em;padding:.6em .7em;box-shadow:0 1em 2em rgba(120,0,1,.14);animation:s2File .9s cubic-bezier(.45,0,.25,1) .3s both}
.s2-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15em;text-align:left}
.s2-meta b{font-size:.74em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .s2-meta small{font-size:.6em;color:var(--lp-muted)}
.s2-bar{display:block;height:.4em;border-radius:9em;background:#fceeed;overflow:hidden;margin-top:.3em}
.s2-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--g);animation:cvFill 1.7s cubic-bezier(.3,.6,.3,1) 1.1s both}
.s2-pct{font-size:.78em;font-weight:800;color:var(--c-brand);min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
.s2-done{width:1.5em;height:1.5em;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center;flex-shrink:0;animation:cvPop .35s ease 2.85s both}
.s2-done .ico{width:.8em;height:.8em}
.s2-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:.55em;justify-content:center}
.s2-fmt{display:flex;align-items:center;gap:.6em;background:#fff;border:1px solid var(--c-line);border-radius:.8em;padding:.55em .7em;animation:cvUp .45s ease var(--d) both}
.s2-fmt b{font-size:.76em;min-width:2.9em} .s2-fmt small{font-size:.64em;color:var(--lp-ink2);flex:1;min-width:0}
.s2-ratio{border:.14em solid var(--c-brand);border-radius:.2em;background:#fcf1f0;flex-shrink:0;box-sizing:border-box}
.r916{width:.85em;height:1.45em} .r169{width:1.55em;height:.9em} .r11{width:1.15em;height:1.15em}
.rcov{width:1.35em;height:1.05em;border-color:#ff5f8a;background:linear-gradient(135deg,#ffb36b,#ff5f8a)}

/* 3 · create with AI */
.s3{gap:1.2em;align-items:center}
.s3-post{width:10.5em;flex-shrink:0;background:#fff;border:1px solid var(--c-line);border-radius:1em;padding:.6em;display:flex;flex-direction:column;gap:.25em;
  box-shadow:0 1em 2.2em rgba(120,0,1,.1)}
.cv-thumb.big{width:100%;height:12.6em;border-radius:.7em;margin-bottom:.35em}
.cv-thumb.big .cv-play{width:2.4em;height:2.4em} .cv-thumb.big .cv-play .ico{width:1.1em;height:1.1em}
.s3-post b{font-size:.78em} .s3-post small{font-size:.62em;color:var(--lp-muted)}
.s3-ai{flex:1;min-width:0;background:#fff;border:1px solid var(--c-line);border-radius:1em;padding:1em;display:flex;flex-direction:column;gap:.75em;
  box-shadow:0 1em 2.2em rgba(120,0,1,.1)}
.s3-h{display:flex;align-items:center;gap:.55em} .s3-h b{font-size:.86em;flex:1}
.s3-gen{animation:cvPress .35s ease .95s both}
.s3-tone{display:flex;align-items:center;gap:.4em;font-size:.64em}
.s3-tone span{color:var(--lp-muted);font-weight:600} .s3-tone b{background:#fbf8f2;border-radius:9em;padding:.25em .7em;font-weight:700;color:var(--lp-ink2)}
.s3-cap{font-size:.84em;line-height:1.55;margin:0;min-height:4.7em}
.s3-cap span{display:inline-block;animation:s3Word .25s ease calc(1.2s + var(--i) * .07s) both}
.s3-tags{display:flex;flex-wrap:wrap;gap:.35em}
.s3-tags span{font-size:.64em;font-weight:700;color:var(--c-brand);background:#fcf1f0;border-radius:9em;padding:.3em .7em;animation:cvPop .3s ease var(--d) both}
.s3-adapt{display:flex;flex-wrap:wrap;align-items:center;gap:.4em;padding-top:.65em;border-top:1px solid #f8f4ee}
.s3-adapt small{font-size:.62em;color:var(--lp-muted);font-weight:600;margin-right:.2em}
.s3-adapt span{display:inline-flex;align-items:center;gap:.3em;font-size:.62em;font-weight:700;color:var(--lp-ink2);border:1px solid var(--c-line);
  border-radius:.6em;padding:.3em .6em;animation:cvUp .35s ease var(--d) both}
.s3-adapt .pico{width:1.1em;height:1.1em}

/* 4 · schedule */
.s4{gap:1.1em;align-items:center}
.s4-cal{width:24em;flex-shrink:0;background:#fff;border:1px solid var(--c-line);border-radius:1em;padding:.9em;box-sizing:border-box;
  box-shadow:0 1em 2.2em rgba(120,0,1,.1)}
.s4-h{display:flex;align-items:center;gap:.55em;margin-bottom:.75em}
.s4-h b{font-size:.84em} .s4-h small{font-size:.6em;font-weight:700;color:var(--lp-ink2);border:1px solid #f4eee3;border-radius:.7em;padding:.35em .7em}
.s4-wk,.s4-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3em}
.s4-wk span{font-size:.54em;font-weight:700;color:var(--lp-muted);text-align:center;text-transform:uppercase;letter-spacing:.06em;padding-bottom:.35em}
.s4-day{position:relative;height:3.7em;border-radius:.55em;background:var(--c-soft);border:1px solid #f8f4ee;padding:.3em;box-sizing:border-box;
  display:flex;flex-direction:column;gap:.25em;min-width:0}
.s4-day>span{font-size:.6em;font-weight:700;color:var(--lp-ink2)}
.s4-day.old{opacity:.55}
.s4-day.tgt{animation:s4Hi var(--dur) both}
.s4-new{animation:cvPop .35s cubic-bezier(.3,1.6,.5,1) 2.05s both}
.s4-new .pico{width:.78em;height:.78em}
.s4-fly{position:absolute;left:.2em;top:1.2em;z-index:5;opacity:0;pointer-events:none;animation:s4Fly 1.3s cubic-bezier(.5,0,.3,1) .8s both}
.s4-fly .cv-thumb{width:2.5em;height:2.5em;box-shadow:0 .7em 1.5em rgba(120,0,1,.35)}
.s4-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:.6em}
.s4-card,.s4-best{display:flex;align-items:center;gap:.6em;background:#fff;border:1px solid var(--c-line);border-radius:.9em;padding:.55em .65em;
  box-shadow:0 .8em 1.8em rgba(120,0,1,.1)}
.s4-card{animation:s4Lift var(--dur) both}
.s4-card b,.s4-best b{display:block;font-size:.74em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s4-card small{display:flex;gap:.25em;margin-top:.25em} .s4-card small .pico{width:.95em;height:.95em}
.s4-card>div,.s4-best>div{min-width:0}
.s4-best{animation:cvUp .4s ease 2.3s both} .s4-best small{display:block;font-size:.6em;color:var(--lp-muted);font-weight:600}
.s4-ok{display:flex;align-items:center;gap:.45em;font-size:.68em;font-weight:700;color:#15803d;background:#dcfce7;border-radius:.8em;padding:.6em .8em;
  animation:cvUp .4s ease 2.7s both}
.s4-q{display:flex;gap:.45em;align-items:flex-start;font-size:.64em;line-height:1.45;color:var(--lp-ink2);animation:cvUp .4s ease 3.2s both}
.s4-q .ico{color:var(--c-brand);margin-top:.1em}

/* 5 · publish */
.s5{align-items:flex-start;justify-content:center}
.s5-main{width:27em;background:#fff;border:1px solid var(--c-line);border-radius:1em;padding:.9em;display:flex;flex-direction:column;gap:.42em;
  box-shadow:0 1em 2.2em rgba(120,0,1,.1)}
.s5-h{display:flex;align-items:center;gap:.6em;margin-bottom:.3em}
.s5-h b{display:block;font-size:.8em} .s5-h small{font-size:.62em;color:var(--lp-muted)}
.s5-btn{animation:cvPress .35s ease .75s both}
.s5-row{display:flex;align-items:center;gap:.6em;padding:.48em .6em;border-radius:.7em;background:var(--c-soft)}
.s5-row b{font-size:.72em;flex:1;min-width:0}
.s5-st{display:inline-grid;font-size:.6em;font-weight:800}
.s5-st>span{grid-area:1/1;justify-self:end;display:inline-flex;align-items:center;gap:.35em;padding:.3em .75em;border-radius:9em;white-space:nowrap;opacity:0}
.s5-st .ico{width:1.05em;height:1.05em}
.s5-st .q{background:#f7f4f0;color:#847771;animation:cvShow var(--d) linear}
.s5-st .p{background:#fbe7e4;color:#9e0005;animation:cvShow .9s linear var(--d)}
.s5-st .ok{background:#dcfce7;color:#15803d;opacity:1;animation:cvHide calc(var(--d) + .9s) linear}
.s5-prog{height:.4em;border-radius:9em;background:#fceeed;overflow:hidden;margin-top:.35em}
.s5-prog i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--g);animation:cvFill 2.6s linear 1.1s both}
.s5-toast{position:absolute;right:1.5em;bottom:1.2em;display:flex;align-items:center;gap:.6em;background:#2a1916;color:#fff;border-radius:.9em;
  padding:.7em .9em;box-shadow:0 1em 2em rgba(42,25,22,.3);animation:cvUp .45s ease 4s both}
.s5-toast>.ico{width:1.5em;height:1.5em;padding:.25em;border-radius:50%;background:#16a34a;box-sizing:border-box}
.s5-toast b{display:block;font-size:.74em} .s5-toast small{font-size:.6em;opacity:.75}

/* 6 · analyze */
.s6{flex-direction:column;justify-content:center;gap:.8em}
.s6-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8em}
.s6-k{background:#fff;border:1px solid var(--c-line);border-radius:.9em;padding:.7em .8em;box-shadow:0 .8em 1.8em rgba(120,0,1,.08);animation:cvUp .45s ease both}
.s6-k:nth-child(2){animation-delay:.12s} .s6-k:nth-child(3){animation-delay:.24s}
.s6-k small{display:flex;align-items:center;gap:.35em;font-size:.58em;font-weight:700;color:var(--lp-muted);text-transform:uppercase;letter-spacing:.06em}
.s6-k>b{display:block;font-size:1.5em;letter-spacing:-.02em;margin:.15em 0;font-variant-numeric:tabular-nums}
.s6-k em{display:inline-flex;align-items:center;gap:.2em;font-style:normal;font-size:.58em;font-weight:800;color:#16a34a;background:#dcfce7;border-radius:9em;padding:.2em .55em}
.s6-row{display:grid;grid-template-columns:1.25fr 1fr;gap:.8em}
.s6-chart,.s6-cmp{background:#fff;border:1px solid var(--c-line);border-radius:.9em;padding:.8em;box-shadow:0 .8em 1.8em rgba(120,0,1,.08);
  animation:cvUp .45s ease .35s both;min-width:0}
.s6-bars{position:relative;height:8.4em;display:flex;align-items:flex-end;gap:.35em;margin-top:.6em}
.s6-bars i{flex:1;height:var(--h);border-radius:.3em .3em .15em .15em;background:linear-gradient(180deg,#ff0617,#c10009);transform-origin:bottom;
  animation:cvBar .7s cubic-bezier(.2,.8,.2,1) var(--d) both}
.s6-bars i:nth-last-child(2){background:linear-gradient(180deg,#3fd48e,#16a34a)}
.s6-tip{position:absolute;right:-.3em;top:-.4em;display:inline-flex;align-items:center;gap:.3em;font-size:.58em;font-weight:800;background:#2a1916;color:#fff;
  border-radius:.5em;padding:.35em .6em;animation:cvPop .3s ease 2.7s both}
.s6-pl{display:grid;grid-template-columns:1.2em minmax(0,1fr) 2.2em 2.6em;align-items:center;gap:.45em;margin-top:.6em}
.s6-pl>span{height:.6em;border-radius:9em;background:#fcf1f0;overflow:hidden}
.s6-pl>span i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--g);animation:cvFill .8s ease var(--d) both}
.s6-pl>b{font-size:.66em;text-align:right;font-variant-numeric:tabular-nums}
.s6-pl em{font-style:normal;font-size:.52em;font-weight:800;color:#15803d;background:#dcfce7;border-radius:9em;padding:.2em .5em;text-align:center}
.s6-pdf{display:inline-flex;align-items:center;gap:.35em;margin-top:.8em;font-size:.62em;font-weight:700;color:var(--c-brand);background:#fcf1f0;
  border-radius:.6em;padding:.4em .7em;animation:cvPop .3s ease 3s both}

/* 7 · engage */
.s7{gap:1em;align-items:center}
.s7-inbox{flex:1.15;min-width:0;background:#fff;border:1px solid var(--c-line);border-radius:1em;padding:.8em;display:flex;flex-direction:column;gap:.45em;
  box-shadow:0 1em 2.2em rgba(120,0,1,.1)}
.s7-h{display:flex;align-items:center;gap:.55em;margin-bottom:.2em} .s7-h b{font-size:.82em}
.s7-n{font-size:.58em;font-weight:800;color:#fff;background:#f25a75;border-radius:9em;padding:.2em .6em}
.s7-c{display:flex;align-items:flex-start;gap:.55em;padding:.55em .6em;border-radius:.7em;background:var(--c-soft);border:1px solid transparent;
  animation:s7In .45s ease var(--d) both}
.s7-c.sel{animation:s7In .45s ease var(--d) both,s7Sel var(--dur) both}
.s7-c .pico{margin-top:.15em}
.s7-c>div{flex:1;min-width:0} .s7-c b{font-size:.66em} .s7-c p{margin:.12em 0 0;font-size:.68em;line-height:1.35;color:var(--lp-ink2)}
.s7-tag{font-size:.54em;font-weight:800;border-radius:9em;padding:.2em .55em;white-space:nowrap}
.s7-tag.pos{background:#dcfce7;color:#15803d} .s7-tag.q{background:#fbe7e4;color:#9e0005}
.s7-reply{flex:1;min-width:0;background:#fff;border:1px solid var(--c-line);border-radius:1em;padding:.9em;display:flex;flex-direction:column;gap:.65em;
  box-shadow:0 1em 2.2em rgba(120,0,1,.1);animation:cvUp .45s ease 1.7s both}
.s7-reply p{margin:0;font-size:.74em;line-height:1.5;background:#fefafa;border:1px dashed #f7d9d5;border-radius:.7em;padding:.6em .7em}
.s7-send{align-self:flex-start;animation:cvPress .35s ease 3s both}
.s7-ok{display:flex;align-items:center;gap:.4em;font-size:.68em;font-weight:700;color:#15803d;animation:cvUp .4s ease 3.4s both}

/* pointer */
.cv-cursor{position:absolute;z-index:30;left:105%;top:50%;width:1.6em;height:1.6em;display:none;pointer-events:none;
  filter:drop-shadow(0 .2em .3em rgba(42,25,22,.3))}
.cv-cursor svg{width:100%;height:100%;fill:#2a1916;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.cv-cursor i{position:absolute;left:-.45em;top:-.45em;width:1.4em;height:1.4em;border-radius:50%;background:rgba(224,0,15,.4);opacity:0}
.cv[data-step="1"] .cv-cursor,.cv[data-step="2"] .cv-cursor,.cv[data-step="3"] .cv-cursor,
.cv[data-step="4"] .cv-cursor,.cv[data-step="5"] .cv-cursor,.cv[data-step="6"] .cv-cursor{display:block}
.cv[data-step="1"] .cv-cursor{animation:cur1 var(--dur) ease-in-out both}
.cv[data-step="2"] .cv-cursor{animation:cur2 var(--dur) ease-in-out both}
.cv[data-step="2"] .cv-cursor i{animation:clk2 var(--dur) both}
.cv[data-step="3"] .cv-cursor{animation:cur3 var(--dur) ease-in-out both}
.cv[data-step="3"] .cv-cursor i{animation:clk3 var(--dur) both}
.cv[data-step="4"] .cv-cursor{animation:cur4 var(--dur) ease-in-out both}
.cv[data-step="4"] .cv-cursor i{animation:clk4 var(--dur) both}
.cv[data-step="5"] .cv-cursor{animation:cur5 var(--dur) ease-in-out both}
.cv[data-step="6"] .cv-cursor{animation:cur6 var(--dur) ease-in-out both}
.cv[data-step="6"] .cv-cursor i{animation:clk6 var(--dur) both}
@keyframes cur1{0%{left:72%;top:6%}6%{left:var(--x1);top:var(--y1)}23%,31%{left:var(--x2);top:var(--y2)}50%,100%{left:104%;top:96%}}
@keyframes cur2{0%{left:62%;top:100%}15%,24%{left:var(--x1);top:var(--y1)}42%,100%{left:104%;top:62%}}
@keyframes clk2{0%,17%{opacity:0;transform:scale(.3)}18%{opacity:.9;transform:scale(.3)}27%,100%{opacity:0;transform:scale(1.9)}}
@keyframes cur3{0%{left:84%;top:100%}12%,16%{left:var(--x1);top:var(--y1)}40%,46%{left:var(--x2);top:var(--y2)}62%,100%{left:104%;top:72%}}
@keyframes clk3{0%,13%{opacity:0;transform:scale(.3)}14%{opacity:.9;transform:scale(.3)}22%{opacity:0;transform:scale(1.9)}41%{opacity:0;transform:scale(.3)}42%{opacity:.9;transform:scale(.3)}50%,100%{opacity:0;transform:scale(1.9)}}
@keyframes cur4{0%{left:68%;top:100%}12%,19%{left:var(--x1);top:var(--y1)}36%,100%{left:104%;top:42%}}
@keyframes clk4{0%,13%{opacity:0;transform:scale(.3)}14%{opacity:.9;transform:scale(.3)}23%,100%{opacity:0;transform:scale(1.9)}}
@keyframes cur5{0%,36%{left:62%;top:104%}50%,100%{left:var(--x1);top:var(--y1)}}
@keyframes cur6{0%{left:50%;top:104%}22%,31%{left:var(--x1);top:var(--y1)}50%,62%{left:var(--x2);top:var(--y2)}78%,100%{left:104%;top:82%}}
@keyframes clk6{0%,26%{opacity:0;transform:scale(.3)}27%{opacity:.9;transform:scale(.3)}35%{opacity:0;transform:scale(1.9)}56%{opacity:0;transform:scale(.3)}57%{opacity:.9;transform:scale(.3)}65%,100%{opacity:0;transform:scale(1.9)}}

/* caption + controls + chapters */
.cv-cap{display:flex;align-items:flex-start;gap:1em;margin-top:1.1em}
.cv-cap-txt{flex:1;min-width:0;min-height:4.7em}
.cv.swap .cv-cap-txt{animation:cvUp .5s ease both}
.cv-cap-n{display:block;font-size:.64em;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--c-brand)}
.cv-cap-t{display:block;font-size:1.25em;letter-spacing:-.01em;margin:.15em 0 .2em}
.cv-cap-d{margin:0;font-size:.78em;line-height:1.5;color:var(--lp-ink2)}
.cv-pp{flex-shrink:0;width:2.6em;height:2.6em;border-radius:50%;border:1px solid #f5e6e4;background:#fff;color:var(--c-brand);
  display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 .5em 1.2em rgba(120,0,1,.12);transition:transform .15s}
.cv-pp:hover{transform:scale(1.06)}
.cv-pp svg{width:1.05em;height:1.05em;fill:currentColor}
.cv-i-play,.cv.paused .cv-i-pause{display:none} .cv.paused .cv-i-play{display:block}
.cv-tl{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.45em;margin-top:.8em}
.cv-seg{border:0;background:none;padding:.3em 0;margin:0;cursor:pointer;display:flex;flex-direction:column;gap:.45em;font:inherit;text-align:left;color:var(--lp-muted)}
.cv-seg-bar{display:block;height:.32em;border-radius:9em;background:#f5e6e4;overflow:hidden}
.cv-seg-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#e8000f,#d0000c)}
.cv-seg.done .cv-seg-bar i{width:100%}
.cv-seg.on .cv-seg-bar i{animation:cvSeg var(--dur) linear forwards}
.cv-seg-l{font-size:.66em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-seg:hover .cv-seg-l{color:var(--lp-ink)} .cv-seg.on .cv-seg-l{color:var(--c-brand)}
.cv-pp:focus-visible,.cv-seg:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px;border-radius:.4em}
/* pausing freezes every animation, including the chapter bar that moves the video on */
.cv.paused *,.cv.paused *::before,.cv.paused *::after{animation-play-state:paused !important}
.cv.paused .cv-cap-txt{animation-play-state:running !important}

@keyframes cvIn{from{opacity:0;transform:translateY(.6em) scale(.985)}}
@keyframes cvUp{from{opacity:0;transform:translateY(.8em)}}
@keyframes cvPop{from{opacity:0;transform:scale(.55)}}
@keyframes cvFill{from{width:0}}
@keyframes cvBar{from{transform:scaleY(0)}}
@keyframes cvSeg{from{width:0}to{width:100%}}
@keyframes cvShow{from,to{opacity:1}}
@keyframes cvHide{from,to{opacity:0}}
@keyframes cvPress{50%{transform:scale(.88);filter:brightness(1.15)}}
@keyframes cvSpin{to{transform:rotate(360deg)}}
@keyframes cvPulse{50%{box-shadow:0 .8em 2em rgba(120,0,1,.18),0 0 0 .9em rgba(224,0,15,.12)}}
@keyframes cvLine{from{transform:rotate(var(--a)) scaleX(0)}}
@keyframes s2Hi{0%,8%,32%,100%{border-color:#f7d0cb;background:#fefafa}14%,26%{border-color:#e0000f;background:#fcf1f0}}
@keyframes s2File{from{opacity:0;transform:translate(8em,-10em) rotate(7deg) scale(.92)}55%{opacity:1}}
@keyframes s3Word{from{opacity:0;transform:translateY(.35em);filter:blur(2px)}}
@keyframes s4Hi{0%,36%{background:#fcf8f8;border-color:#f8f4ee}42%,100%{background:#fdf2f1;border-color:#f3bab4;box-shadow:0 0 0 .2em rgba(224,0,15,.12)}}
@keyframes s4Fly{0%{opacity:0;transform:translate(var(--fx,11.8em),var(--fy,-4.3em)) scale(1.05)}10%{opacity:1}82%{opacity:1;transform:translate(0,0) scale(.72)}100%{opacity:0;transform:translate(0,0) scale(.5)}}
@keyframes s4Lift{0%,15%{opacity:1;transform:none}20%,100%{opacity:.5;transform:scale(.98)}}
@keyframes s7In{from{opacity:0;transform:translateX(-1.2em)}}
@keyframes s7Sel{0%,28%{border-color:transparent;background:#fcf8f8}33%,100%{border-color:#f7d0cb;background:#fdf2f1}}
@media (prefers-reduced-motion:reduce){
  .cv *{animation:none !important}
  .cv-seg.on .cv-seg-bar i{width:100%}
  .cv-cursor{display:none !important}
}

/* laptops: tighter columns */
@media (max-width:1560px){ .lp{grid-template-columns:minmax(290px,.9fr) minmax(0,1.55fr) minmax(0,390px)} }
@media (max-width:1366px){ .lp{grid-template-columns:minmax(280px,.85fr) minmax(0,1.5fr) minmax(0,370px)} }
/* small laptops / tablets: text + card, no illustration */
@media (max-width:1240px){
  .lp{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
  .lp-scene{display:none}
}
/* portrait tablets 961-1240px (iPad 13-inch): headline across the top, the concept video beside the sign-in card */
@media (min-width:961px) and (max-width:1240px) and (orientation:portrait){
  .lp{grid-template-columns:minmax(0,1fr) minmax(0,400px);grid-template-areas:"hero hero" "scene card";
    align-content:center;row-gap:clamp(28px,4vh,56px)}
  .lp-hero{grid-area:hero}
  .lp-copy{margin:0;padding:clamp(24px,4vh,48px) 0 0}
  .lp-lead{margin-bottom:0}
  .lp-feats{display:none}               /* the video shows the same steps */
  .lp-scene{display:flex;grid-area:scene}
  .lp-scene .cv{width:100%}
  .lp-card{grid-area:card}
}
/* phones and portrait tablets up to 960px (iPad 11-inch): brand on top, the concept video, and a "Sign in" button at the bottom.
   "Sign in" swaps the video for the form (.lp.m-form), which slides up from the bottom. */
.lp-mcta,.lp-tour{display:none}
@media (max-width:760px), (max-width:960px) and (orientation:portrait){
  .lp{display:flex;flex-direction:column;align-items:stretch;gap:14px;min-height:100vh;min-height:100dvh;
    padding:calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 18px)}
  .in-app-ios .lp{padding-top:20px;padding-bottom:18px}   /* the iOS app already keeps the page clear of the notch and home bar */
  .lp::before{right:-50vw;top:-20vh;width:120vw;height:70vh}
  .lp::after{right:-40vw;bottom:-30vh;width:130vw;height:60vh}
  .lp-hero{align-self:stretch;width:100%;flex:none}
  .lp-copy{display:none}
  .lp-scene{display:flex;flex:1 1 auto;align-self:stretch;align-items:center;justify-content:center;min-height:0}
  /* the video gets narrower on short screens so brand, video and "Sign in" fit without scrolling
     (its height is about 1.63 x its width; the rest of the page takes about 200px) */
  .lp-scene .cv{width:min(100%, calc((var(--lp-h, 100vh) - 200px) / 1.65));max-width:520px}
  .lp-mcta{display:block;flex:none;width:100%;max-width:520px;align-self:center}
  .lp-card{display:none;align-self:center;border-radius:22px;max-width:460px;margin-top:auto}
  .lp-card-logo,.lp-card>.lp-by,.lp-card>.lp-tag{display:none}
  .lp-welcome{margin-top:0}
  .lp.m-form .lp-scene,.lp.m-form .lp-mcta{display:none}
  .lp.m-form .lp-card{display:block;animation:lpSheet .38s cubic-bezier(.2,.8,.2,1) both}
  .lp-tour{display:inline-flex;align-items:center;gap:6px;margin:-4px 0 14px;padding:6px 12px 6px 9px;border:1px solid #f5e6e4;border-radius:99px;
    background:#fefafa;color:var(--lp-brand);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
  .lp-tour .ico{width:13px;height:13px}
}
@keyframes lpSheet{from{opacity:0;transform:translateY(40px)}}
/* iOS app: the web view already pads the page for the status bar and home indicator, so a login page of
   exactly one screen would scroll by that much — take those strips off its height */
.in-app-ios .lp{--lp-h:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:var(--lp-h)}
@media (max-width:760px) and (prefers-reduced-motion:reduce), (max-width:960px) and (orientation:portrait) and (prefers-reduced-motion:reduce){ .lp.m-form .lp-card{animation:none} }

/* the concept video on phones (portrait player): each scene's parts stack, sizes follow the player width */
@media (max-width:760px), (max-width:960px) and (orientation:portrait){
  .cv>*{font-size:3.9cqi}
  .cv>.cv-cap{font-size:3.6cqi}
  .cv>.cv-tl{font-size:3.3cqi}
  .cv-seg-l{font-size:.82em}
  .cv-cap{margin-top:.9em}
  .cv-cap-txt{min-height:5.6em}
  .cv-scr{height:30em}
  .cv-sc{flex-direction:column;align-items:stretch;justify-content:center;gap:.9em;padding:1.2em}
  /* 1 · connect */
  .s1{align-items:center}
  .s1-ring{--R:5.5em;width:14.4em;height:14.4em}
  .s1-node{width:2.7em;height:2.7em;margin:-1.35em}
  .s1-pop .pico{width:1.3em;height:1.3em}
  .s1-hub{width:3.8em;height:3.8em;margin:-1.9em} .s1-hub img{height:2.4em}
  .s1-txt{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
  .s1-n{font-size:2.5em} .s1-l{margin:.2em 0 .7em}
  .cv-list{width:100%}
  /* 2 · upload */
  .s2-drop{flex:none;height:13.5em;padding-bottom:5.2em}
  .s2-side{flex:none}
  /* 3 · write with AI */
  .s3-post{width:auto;flex-direction:row;align-items:center;gap:.7em;padding:.5em .6em}
  .s3-post .cv-thumb.big{width:3em;height:3em;margin:0}
  .s3-post .cv-thumb.big .cv-play{width:1.4em;height:1.4em}
  .s3-post small{margin-left:auto}
  /* 4 · schedule */
  .s4-cal{width:100%}
  .s4-day{height:3.3em}
  .s4-q{display:none}
  /* 5 · publish */
  .s5{justify-content:flex-start}
  .s5-main{width:100%;box-sizing:border-box}
  .s5-toast{left:1.2em;right:1.2em}
  /* 6 · analyze */
  .s6-row{grid-template-columns:minmax(0,1fr)}
  .s6-kpis{gap:.5em}
  .s6-k{padding:.6em .65em}
  .s6-k small{font-size:.5em;letter-spacing:.03em}
  .s6-k>b{font-size:1.15em}
  .s6-bars{height:5.6em}
  .s6-pl{margin-top:.45em}
  .s6-pdf{margin-top:.6em}
  /* 7 · engage */
  .s7-inbox,.s7-reply{flex:none}
}
@media (max-width:380px){ .lp-brand img{width:104px} .lp-row{font-size:13px} }

/* ================= Loan Reminders (V38) ================= */
.lr-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 16px;padding:5px;border-radius:14px;background:var(--surface-3);width:fit-content;max-width:100%}
.lr-tab{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);font-weight:600;font-size:13px;
  padding:8px 13px;border-radius:10px;cursor:pointer;white-space:nowrap}
.lr-tab:hover{color:var(--ink)}
.lr-tab.on{background:var(--card);color:var(--brand-dark);box-shadow:0 2px 8px rgba(71,1,0,.08)}
.lr-status{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;margin-bottom:16px}
.lr-status>div:first-child{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lr-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lr-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lr-toolbar select.f{width:auto;min-width:150px}
.lr-search{position:relative;display:flex;align-items:center;flex:1 1 240px;max-width:380px}
.lr-search .ico{position:absolute;left:11px;color:var(--muted);pointer-events:none}
.lr-search input.f{padding-left:34px}
.lr-table td{vertical-align:middle}
.lr-table td.r,.lr-table th.r{text-align:right}
.lr-table tr.paid td{color:var(--muted)}
.lr-table.sm td,.lr-table.sm th{padding:6px 8px;font-size:12.5px}
.lr-body{max-width:420px;white-space:normal;line-height:1.4}
.nowrap{white-space:nowrap}
.red-t{color:var(--red-ink,#b42318)}
.link-btn.strong{font-weight:700;color:var(--ink)}
.empty-state.sm{padding:18px 10px}
.lr-gchip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:2px 8px;margin:1px 4px 1px 0;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-dark)}
.lr-checks{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.lr-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none}
.lr-check input{accent-color:var(--brand);width:15px;height:15px;margin:0}
.lr-check.off{opacity:.5;cursor:not-allowed}
.lr-pick{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px;margin-top:8px;background:var(--card)}
.lr-check.row-check{display:flex;width:100%;padding:7px 8px;border-radius:8px}
.lr-check.row-check:hover{background:var(--surface-3)}
.lr-contact{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;color:var(--ink-2);font-size:13px}
.lr-contact>span{display:inline-flex;align-items:center;gap:6px}
.lr-loan{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0;background:var(--card)}
.lr-loan.closed{opacity:.75}
.lr-loan-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.lr-bal{font-size:12.5px;color:var(--muted)}
.lr-hist{margin-top:14px}
.lr-hist summary{cursor:pointer;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px}
.lr-msg{border-top:1px solid var(--line-2);padding:8px 0;font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lr-msg>div{flex-basis:100%;color:var(--ink-2)}
.lr-crow{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:6px;align-items:center}
.lr-prev{margin-top:12px;border:1px dashed var(--line-strong);border-radius:10px;padding:10px;max-height:260px;overflow:auto}
.lr-pre{font-size:11.5px;background:var(--surface-3);padding:10px;border-radius:8px;overflow:auto;white-space:pre}
.lr-ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.lr-gcard{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.lr-gname{display:flex;align-items:center;gap:8px;font-size:15px}
.lr-gcount{color:var(--muted);font-size:12.5px}
.lr-send{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.lr-send .card{padding:16px 18px}
.lr-ph{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.lr-phb{border:1px dashed var(--line-strong);background:var(--card);color:var(--brand-dark);border-radius:7px;font-size:11.5px;
  font-family:ui-monospace,Consolas,monospace;padding:2px 7px;cursor:pointer}
.lr-phb:hover{background:var(--brand-soft)}
.lr-send #ls-go{margin:12px 0 6px}
.lr-camp{border-top:1px solid var(--line-2);padding:9px 0;font-size:13px;display:flex;flex-direction:column;gap:3px}
.lr-camp:first-of-type{border-top:0}
.lr-rules{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.lr-rule{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.lr-rule-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lr-rule-h select.f{width:auto}
.lr-days{width:76px !important}
.cred-toggle.big{align-items:flex-start;gap:10px}
.lr-ic{color:var(--brand-dark);background:var(--brand-soft)}
@media (max-width:900px){ .lr-send{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
  .lr-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}
  .lr-crow{grid-template-columns:1fr 1fr 32px}
  .lr-toolbar select.f{flex:1 1 140px}
}
.lr-sect{display:flex;align-items:center;gap:8px}
.lr-sect .spacer{flex:1}
/* ============================================================
   Phone layout fixes (Android / iOS app and small browsers)
   ============================================================ */
/* ============================================================
   Phones: the side menu becomes a bottom bar with 4 headings
   (MOBILE_NAV in app.js); tapping one slides up a sheet with its pages
   ============================================================ */
.mnav,.mnav-sheet{display:none}
@media(max-width:700px){
  :root{--mnav-h:64px}
  body[data-theme="cosmic"] .topbar{gap:6px}
  body[data-theme="cosmic"] .topbar .brand-logo{height:28px;width:auto}
  body[data-theme="cosmic"] #topbar-actions{gap:6px !important}
  body[data-theme="cosmic"] .sidepanel{display:none !important}
  body:has(#mnav) .topbar .logout-btn{display:none}             /* Log out lives under Account */
  body[data-theme="cosmic"] .content{padding-bottom:calc(var(--mnav-h) + 28px + env(safe-area-inset-bottom))}
  .toast-wrap{bottom:calc(var(--mnav-h) + 12px + env(safe-area-inset-bottom))}

  .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    height:calc(var(--mnav-h) + env(safe-area-inset-bottom));padding:6px 6px env(safe-area-inset-bottom);
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(71,1,0,.06)}
  .mnav-btn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    border:0;background:none;padding:0;color:var(--muted);font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent}
  .mnav-ic{position:relative;display:grid;place-items:center;width:58px;height:32px;border-radius:999px;transition:background .2s,color .2s}
  .mnav-lb{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mnav-btn.active{color:var(--brand-dark)}
  .mnav-btn.active .mnav-ic{background:var(--brand-soft);color:var(--brand)}
  .mnav-btn.open{color:var(--brand-dark)}
  .mnav-btn.open .mnav-ic{background:var(--brand);color:#fff}
  .mnav-dot{display:none;position:absolute;top:3px;right:14px;width:10px;height:10px;border-radius:50%;
    background:var(--red);border:2px solid #fff}
  .mnav-btn.attn .mnav-dot{display:block}

  .mnav-sheet{display:block;position:fixed;left:0;right:0;top:0;bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom));
    z-index:49;visibility:hidden;pointer-events:none;transition:visibility 0s .22s}
  .mnav-sheet.open{visibility:visible;pointer-events:auto;transition:none}
  .mns-backdrop{position:absolute;inset:0;background:rgba(45,26,23,.38);opacity:0;transition:opacity .2s}
  .mnav-sheet.open .mns-backdrop{opacity:1}
  .mns-panel{position:absolute;left:0;right:0;bottom:0;max-height:72vh;overflow:auto;overscroll-behavior:contain;
    background:#fff;border-radius:24px 24px 0 0;padding:10px 16px 18px;box-shadow:0 -12px 40px rgba(71,1,0,.16);
    transform:translateY(28px);opacity:0;transition:transform .22s ease,opacity .18s ease}
  .mnav-sheet.open .mns-panel{transform:none;opacity:1}
  .mns-grab{width:40px;height:4px;border-radius:4px;background:var(--line-strong);margin:0 auto 8px}
  .mns-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}
  .mns-head b{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
  .mns-head .mns-x{width:34px;height:34px}
  .mns-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .mns-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 12px;min-width:0;
    border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink-2);
    font:inherit;font-size:12.5px;font-weight:700;line-height:1.25;text-align:center;-webkit-tap-highlight-color:transparent}
  .mns-item:active{background:var(--surface-2)}
  .mns-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--surface-3);color:#463431}
  .mns-lb{max-width:100%;overflow-wrap:anywhere}
  .mns-item.active{border-color:#f7d9d5;background:#fdf6f6;color:var(--brand-dark)}
  .mns-item.active .mns-ic{background:var(--grad-2);color:#fff;box-shadow:0 6px 16px rgba(227,0,15,.30)}
  .mns-item.mns-out{color:var(--red-ink)}
  .mns-item.mns-out .mns-ic{background:var(--red-soft);color:var(--red)}
  .mns-badge{position:absolute;top:8px;right:8px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
    display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
    background:var(--brand-soft);color:var(--brand-dark)}
  .mns-badge.alert{background:var(--red);color:#fff}
}
@media (prefers-reduced-motion: reduce){.mns-panel,.mns-backdrop,.mnav-ic{transition:none}}
@media(max-width:390px){ body[data-theme="cosmic"] .topbar .logo-txt{display:none} }
/* Calendar → Publishing status: room between the platform icons and the progress bar */
.ps-plats{flex-wrap:wrap;gap:6px;margin:6px 0 12px}
/* Queue → Best times to post: a list instead of a 3-column table */
.bt-list{container-type:inline-size;display:flex;flex-direction:column}
.bt-row{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) auto;grid-template-areas:"plat slots src";
  align-items:center;gap:6px 14px;padding:11px 2px;border-bottom:1px solid var(--line)}
.bt-row:last-child{border-bottom:none}
.bt-plat{grid-area:plat;display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.bt-src{grid-area:src;font-size:11.5px;white-space:nowrap}
.bt-slots{grid-area:slots;display:flex;flex-wrap:wrap;gap:6px}
@container (max-width: 520px){
  .bt-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"plat src" "slots slots";padding:12px 2px}
}
/* Published → per-platform rows: name left, Open / Retry right, stats or the error underneath */
.pt-row .pf-err{align-items:flex-start;margin-top:0;line-height:1.45}
.pt-row .pf-err > .ico{flex-shrink:0;margin-top:2px}
.pt-row.tc-skipped{text-decoration:none}
.pt-row.tc-skipped .pt-plat{text-decoration:line-through;text-decoration-color:var(--muted-2)}
.pt-row.tc-skipped .pf-err{color:var(--muted)}
@media(max-width:760px){
  .pt-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"plat act" "stat stat";
    align-items:center;gap:8px 10px;padding:10px 12px}
  .pt-row .pt-plat{grid-area:plat;min-width:0}
  .pt-row .pt-act{grid-area:act;justify-self:end}
  .pt-row .pt-act:empty{display:none}
  .pt-row .pt-stat{grid-area:stat;flex-wrap:wrap;row-gap:4px}
}
/* Analytics → Platform comparison: the metric switch moves under the title on narrow cards */
#pageContent .card h4.pc-head{flex-wrap:wrap;row-gap:10px}
.pc-seg{margin-left:auto}
.hb-lab{min-width:0;overflow:hidden}
.hb-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){
  .pc-seg{margin-left:0;width:100%;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-seg button{text-align:center;white-space:nowrap;padding:8px 6px !important}
}
/* Activity log → cards grouped by day on phones; the table stays on larger screens */
.ac-list{display:none}
@media(max-width:700px){
  .ac-table{display:none}
  .ac-list{display:flex;flex-direction:column;gap:8px}
  .ac-day{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 2px 2px}
  .ac-day:first-child{margin-top:0}
  .ac-card{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--card);border:1px solid var(--line);
    border-radius:14px;box-shadow:0 1px 2px rgba(54,30,26,.04)}
  .ac-av{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;
    background:var(--brand-soft);color:var(--brand-dark)}
  .ac-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
  .ac-top{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13.5px}
  .ac-top b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ac-time{flex-shrink:0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .ac-detail{font-size:12.5px;color:var(--ink-2);line-height:1.45;overflow-wrap:anywhere}
  .ac-detail a{display:inline-flex;align-items:center;gap:3px;font-weight:700;white-space:nowrap}
  .hero-head .ph-actions #acQ,#acQ{flex:1 1 100%;max-width:none;width:100%}
  .hero-head .ph-actions #acA,#acA{flex:1 1 0;min-width:0;max-width:none}
}
/* ============================================================
   Team & Brands → Publishing permissions + Client accounts
   Tables on wide screens; one card per person on phones
   ============================================================ */
.tm-av,.tm-mob{display:none}
.cl-id{display:inline-flex;flex-direction:column;gap:1px}
.pm-chk{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
@media(max-width:700px){
  .tm-mob{display:inline}
  .tm-av{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;
    background:var(--brand-soft);color:var(--brand-dark);font-weight:800;font-size:14px}
  /* the wrappers stop being a scroll box; each row is its own card */
  #pageContent .perm-wrap,#pageContent .cl-wrap{overflow:visible;background:none;border:none;box-shadow:none;border-radius:0}
  #pageContent table.rep-table.perm,#pageContent table.rep-table.cl-table{display:block;overflow:visible}
  .perm thead,.cl-table thead{display:none}
  .perm tbody,.cl-table tbody{display:flex;flex-direction:column;gap:10px}
  #pageContent .perm tr,#pageContent .cl-table tr{display:grid;gap:8px;padding:14px;background:var(--card);
    border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(54,30,26,.05)}
  #pageContent .perm td,#pageContent .cl-table td{display:block;padding:0;border:none;text-align:left;background:none}

  /* Publishing permissions: name, "All platforms" switch, a 2-column grid of platform toggles, Save */
  #pageContent .perm tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pageContent .perm td.pm-user{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;margin-bottom:2px}
  #pageContent .perm td.pm-allc,#pageContent .perm td.pm-act{grid-column:1/-1}
  .perm .pm-chk{width:100%;justify-content:flex-start;gap:7px;padding:10px;border:1px solid var(--line);border-radius:12px;
    background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--ink-2);min-height:44px;box-sizing:border-box;min-width:0}
  .perm .pm-chk .tm-mob{display:inline-flex;align-items:center;gap:5px;min-width:0}
  .perm .pm-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .perm .pm-chk input{width:18px;height:18px;margin:0;flex-shrink:0;accent-color:var(--brand)}
  .perm .pm-chk:has(input:checked){border-color:#f7d9d5;background:var(--brand-soft);color:var(--brand-dark)}
  .perm .pm-chk:has(input:disabled){cursor:default;opacity:.7}
  .perm td.pm-allc .pm-chk{font-weight:700}
  .perm .pm-save{width:100%;justify-content:center;margin-top:4px}

  /* Client accounts: login on top, then label / value lines, then the actions */
  #pageContent .cl-table td.cl-login{display:flex;align-items:center;gap:10px;font-size:14px;padding-bottom:4px}
  #pageContent .cl-table td[data-label]{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding-top:8px;border-top:1px solid var(--line);font-size:13px;text-align:right;min-width:0}
  #pageContent .cl-table td[data-label]::before{content:attr(data-label);color:var(--muted);font-weight:600;font-size:12px;text-align:left;flex-shrink:0}
  #pageContent .cl-table td.cl-email{overflow-wrap:anywhere}
  #pageContent .cl-table td.cl-act{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
  #pageContent .cl-table td.cl-act:empty{display:none}
  .cl-table td.cl-act .btn{flex:1 1 auto;justify-content:center;padding:9px 10px !important}
  .cl-table td.cl-act .btn.danger{flex:0 0 auto}
}
/* ============================================================
   Analytics → "Same post, different platforms" and Reports table:
   tables on wide screens, cards on phones
   ============================================================ */
.cmp-cards{display:none}
@media(max-width:700px){
  #pageContent .cmp-wrap{display:none}
  .cmp-cards{display:flex;flex-direction:column;gap:10px}
  .cmp-card{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
  .cmp-title{font-weight:700;font-size:14px;color:var(--ink);line-height:1.35;margin-bottom:10px;overflow-wrap:anywhere}
  .cmp-head,.cmp-line{display:grid;grid-template-columns:minmax(0,1fr) 64px 56px;align-items:center;gap:8px}
  .cmp-head{padding:0 10px 6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .cmp-head span:not(:first-child),.cmp-n{text-align:right}
  .cmp-line{padding:9px 10px;border-radius:10px;font-size:13px}
  .cmp-line + .cmp-line{margin-top:2px}
  .cmp-line.best{background:var(--green-soft)}
  .cmp-plat{display:flex;align-items:center;gap:7px;min-width:0;font-weight:600;color:var(--ink-2)}
  .cmp-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmp-plat .best-tag{flex-shrink:0}
  .cmp-n{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

  /* Reports (and any .m-cards table): title on top, then label / value lines */
  #pageContent .m-cards-wrap{overflow:visible;background:none;border:none;box-shadow:none;border-radius:0}
  #pageContent table.rep-table.m-cards{display:block;overflow:visible}
  .m-cards thead{display:none}
  .m-cards tbody{display:flex;flex-direction:column;gap:10px}
  #pageContent .m-cards tr{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--card);
    border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(54,30,26,.05)}
  #pageContent .m-cards td{display:block;padding:0;border:none;background:none;text-align:left}
  #pageContent .m-cards td.mc-title{font-size:14.5px;padding-bottom:2px;overflow-wrap:anywhere}
  #pageContent .m-cards td[data-label]{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding-top:8px;border-top:1px solid var(--line);font-size:13px;text-align:right;min-width:0}
  #pageContent .m-cards td[data-label]::before{content:attr(data-label);color:var(--muted);font-weight:600;font-size:12px;text-align:left;flex-shrink:0}
  #pageContent .m-cards td[data-label] > span{min-width:0;overflow-wrap:anywhere}
}
/* ============================================================
   Notifications date box, chat on phones, calendar list layout,
   Reports tiles on phones
   ============================================================ */
/* date filter: a readable box ("Any date" / the chosen day); the native date field sits invisibly on top */
.nf-datebox{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:150px;padding:8px 12px;border-radius:10px;
  background:#fff;border:1px solid var(--line-strong);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;box-sizing:border-box}
.nf-datebox .ico{color:var(--brand);flex-shrink:0}
.nf-datebox.set{color:var(--ink);border-color:#f7d0cb;background:var(--brand-soft)}
.nf-filter .nf-datebox input#nf-date{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.nf-datebox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
@media(max-width:700px){
  .nf-filter{gap:8px}
  .nf-filter .nf-search{flex:1 1 100%;max-width:none;min-width:0}
  .nf-filter .nf-datebox{flex:1 1 auto}
}
/* chat window on phones: sits above the bottom menu and fits the screen */
@media(max-width:700px){
  .msgr-window.chat-win{left:8px;right:8px !important;width:auto !important;
    bottom:calc(var(--mnav-h,64px) + env(safe-area-inset-bottom) + 10px) !important;
    height:min(460px,calc(100vh - var(--mnav-h,64px) - 96px));height:min(460px,calc(100dvh - var(--mnav-h,64px) - 96px));
    border-radius:16px;box-shadow:0 18px 48px rgba(42,25,22,.28)}
}
/* calendar: Grid / List switch and the list layout */
.cal-viewsw{margin-left:auto}
.cal-viewsw button{display:inline-flex;align-items:center;gap:6px}
.cal-list{display:none}
#calMain.cal-mode-list .cal-grid{display:none}
#calMain.cal-mode-list .cal-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
#calMain.cal-mode-list .legend-tip{display:none}
.cl-day{display:flex;gap:12px;align-items:flex-start;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 3px rgba(54,30,26,.05)}
.cl-day.today{border-color:#f7d0cb;box-shadow:0 0 0 3px var(--brand-soft)}
.cl-date{flex-shrink:0;width:52px;padding:6px 0;border:0;border-radius:12px;background:var(--surface-3);color:var(--ink);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;font:inherit}
.cl-date small{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cl-date b{font-size:20px;font-weight:800;line-height:1.1}
.cl-day.today .cl-date{background:var(--brand);color:#fff} .cl-day.today .cl-date small{color:rgba(255,255,255,.8)}
.cl-day.past .cl-date{opacity:.7}
.cl-items{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cl-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px 9px 12px;border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:10px;background:var(--surface-2);cursor:pointer;font:inherit;color:var(--ink)}
.cl-item:hover{border-color:#f7d0cb;border-left-color:inherit}
.cl-item.st-draft{border-left-color:var(--gold)} .cl-item.st-published{border-left-color:var(--green)} .cl-item.st-overdue{border-left-color:var(--red)}
.cl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cl-main b{font-size:13.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.cl-main small{font-size:12px;color:var(--muted)}
.cl-st{font-weight:700}
.st-published .cl-st{color:var(--green-ink)} .st-overdue .cl-st{color:var(--red-ink)} .st-draft .cl-st{color:#a16207}
.cl-plats{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end;max-width:84px;flex-shrink:0}
.cl-plats .pico{width:14px;height:14px}
.cal-list-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 16px;text-align:center;color:var(--muted);
  background:var(--card);border:1px dashed var(--line-strong);border-radius:14px}
.cal-list-empty .ico{color:var(--brand)} .cal-list-empty b{color:var(--ink)}
@media(max-width:700px){
  .cal-viewsw{margin-left:0;width:100%;display:grid !important;grid-template-columns:1fr 1fr}
  .cal-viewsw button{justify-content:center}
}
/* Reports (and other summary tiles): two even columns across the phone */
@media(max-width:700px){
  .user-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .user-stats .ustat{min-width:0;box-sizing:border-box}
}
/* Phones: summary tile rows (Published, Workspaces, Calendar, Billing, Loan Reminders) as an even
   2-column grid across the screen; an odd last tile takes the full row */
@media(max-width:700px){
  .tiles{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px !important;width:100%}
  .hero-head .ph-actions .tiles{width:100%;flex:1 1 100%}
  .tiles>.tile{min-width:0 !important;box-sizing:border-box}
  .tiles>.tile:last-child:nth-child(odd){grid-column:1 / -1}
}
/* Phones: while the chat window is open the page behind it doesn't scroll,
   and scrolling inside the chat stops at its ends instead of moving the page */
@media(max-width:700px){
  .msgr-window.chat-win{touch-action:pan-y;overscroll-behavior:contain}
  .msgr-window.chat-win .msgr-msgs{overscroll-behavior:contain}
  body .chat-backdrop{display:block;position:fixed;inset:0;z-index:1299;background:rgba(42,25,22,.22);touch-action:none;
    animation:chatDim .2s ease both}
}
.chat-backdrop{display:none}
@keyframes chatDim{from{opacity:0}}
/* ============================================================
   Push notifications card (Notifications page)
   ============================================================ */
.push-card{padding:14px 16px;margin-bottom:14px;display:flex;flex-direction:column;gap:12px}
.push-card:empty{display:none}
.push-row{display:flex;align-items:center;gap:12px}
.push-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:var(--surface-3);color:var(--muted)}
.push-ic.on{background:var(--brand-soft);color:var(--brand-dark)}
.push-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.push-txt b{font-size:14px} .push-txt small{font-size:12.5px;color:var(--muted);line-height:1.45}
.push-prefs{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:10px;border-top:1px solid var(--line)}
.push-prefs .btn{margin-left:auto}
.push-sw{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;user-select:none}
.push-sw input{position:absolute;opacity:0;width:0;height:0}
.push-sw span{position:relative;width:36px;height:20px;border-radius:99px;background:#e7e1d7;transition:background .2s;flex-shrink:0}
.push-sw span::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.push-sw input:checked + span{background:var(--brand)}
.push-sw input:checked + span::after{transform:translateX(16px)}
.push-sw input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.push-fcm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.push-fcm>span{flex:1;min-width:200px}
.push-up{cursor:pointer}
@media(max-width:700px){ .push-prefs .btn{margin-left:0} .push-row .btn{flex-shrink:0} }

/* ============================================================
   V40 — SoLo by Fairway. Built from the logo: SoLo red (#E30010, the arrow),
   maroon (#570100, the letters) and the cream it sits on. Maroon menu,
   cream canvas, white cards, red for actions. Last block = final look.
   ============================================================ */
body[data-theme="cosmic"]{
  --solo-red:#e30010; --solo-red-2:#c2000e; --solo-red-3:#9e000b;
  --solo-maroon:#570100; --solo-maroon-2:#7a0a0c; --solo-maroon-deep:#3a0100;
  --solo-cream:#fcf9f2; --solo-cream-2:#f7f1e6; --solo-sand:#e8ddcc;
  --brand:#e30010; --brand-dark:#c2000e; --brand-darker:#8f000a; --brand-soft:#fdecea;
  --grad:linear-gradient(180deg,#ef1424,#d4000f); --grad-2:linear-gradient(135deg,#e30010,#7a0a0c);
  --page:#fcf9f2; --card:#ffffff; --surface-2:#fdfaf5; --surface-3:#f7f1e6;
  --ink:#2a0f0c; --ink-2:#4f3632; --muted:#7f6b66; --muted-2:#ab9b95;
  --line:#efe7da; --line-2:#f6f1e8; --line-strong:#e3d7c4;
  --green:#1d8a5c; --green-soft:#e3f3ea; --green-ink:#11603f;
  --gold:#d48a16;  --gold-soft:#fcf0da;  --gold-ink:#8c5507;
  --red:#c8102e;   --red-soft:#fce8eb;   --red-ink:#a10d25;
  --topbar-ink:#2a0f0c; --topbar-line:#efe6d8;
  --app-bg:#fcf9f2; --app-glow-1:rgba(227,0,16,.045); --app-glow-2:rgba(87,1,0,.035);
  --shadow:0 1px 2px rgba(70,20,10,.05),0 4px 14px rgba(70,20,10,.05);
  --shadow-md:0 2px 6px rgba(70,20,10,.06),0 12px 30px rgba(70,20,10,.08);
  --shadow-lg:0 24px 60px rgba(60,10,5,.18);
  --radius:16px; --viz-1:#e30010;
}
body,body[data-theme="cosmic"]{font-family:"DM Sans","Segoe UI",Roboto,-apple-system,Arial,sans-serif}
body[data-theme="cosmic"] .hero-head h2,body[data-theme="cosmic"] .modal-head h3,.sc-n,
body[data-theme="cosmic"] .tile .n,.mns-head b,.lp-h1,.lp-welcome{font-family:"Outfit","DM Sans",sans-serif}
::selection{background:#fbd3cf;color:#3a0100}
body[data-theme="cosmic"] a{color:var(--brand-dark)}
body[data-theme="cosmic"] .overlay{background:rgba(42,8,4,.42)}

/* ---------- top bar: warm white, red focus ---------- */
body[data-theme="cosmic"] .topbar{background:#fffdf8;border-bottom:1px solid var(--topbar-line);box-shadow:0 1px 0 rgba(70,20,10,.03)}
.top-search{background:#f7f2e9;border-color:#eee5d6}
.top-search:focus-within{background:#fff;border-color:#efb3ae;box-shadow:0 0 0 4px rgba(227,0,16,.10)}
.top-search input::placeholder{color:#9b8a84}
.user-pill .avatar{background:linear-gradient(135deg,#8a0f10,#3a0100);color:#fff4ec}
body[data-theme="cosmic"] .btn.ghost.onnavy.logout-btn{color:var(--solo-maroon);border:1.5px solid #e6d9c6;background:#fff}
body[data-theme="cosmic"] .btn.ghost.onnavy.logout-btn:hover{background:#fbf3ea}
body[data-theme="cosmic"] .icon-btn:hover{background:#f7efe4;color:var(--brand)}

/* ---------- side menu: maroon, like the SOLO letters ---------- */
body[data-theme="cosmic"] .sidepanel{background:linear-gradient(180deg,#5e0703 0%,#470201 55%,#360100 100%);border-right:0;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.12)}
body[data-theme="cosmic"] .sidepanel h4{color:rgba(255,224,212,.58)}
body[data-theme="cosmic"] .sidepanel h4::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--solo-red);line-height:normal}
body[data-theme="cosmic"] .navitem{color:#f7e6df}
body[data-theme="cosmic"] .sidepanel .nav-txt{color:inherit}
body[data-theme="cosmic"] .navitem:hover{background:rgba(255,255,255,.07)}
body[data-theme="cosmic"] .navitem .ic,body[data-theme="cosmic"] .navitem[data-nav] .ic{color:#f0cabd}
body[data-theme="cosmic"] .navitem.active{background:#fcf8f0;color:var(--solo-maroon);box-shadow:0 8px 20px rgba(0,0,0,.20)}
body[data-theme="cosmic"] .navitem.active .ic{color:var(--solo-red) !important}
body[data-theme="cosmic"] .navitem.active::before{background:var(--solo-red)}
body[data-theme="cosmic"] .navitem .badge{background:rgba(255,255,255,.13);color:#fff}
body[data-theme="cosmic"] .navitem[data-nav="input"] .badge{background:var(--solo-red);color:#fff}
body[data-theme="cosmic"] .navitem[data-nav="published"] .badge{background:#1d8a5c;color:#fff}
body[data-theme="cosmic"] .navitem.active .badge{background:#fde3e1;color:var(--brand-dark)}
body[data-theme="cosmic"] .side-collapse,body[data-theme="cosmic"] .side-collapse.corner{background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);color:#f7e6df;box-shadow:none}
body[data-theme="cosmic"] .side-collapse.corner:hover,body[data-theme="cosmic"] .side-collapse.corner:focus-visible{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff}
body[data-theme="cosmic"] .sidepanel.collapsed h4{background:rgba(255,255,255,.16)}

/* ---------- page header: red eyebrow (like the deck), maroon title ---------- */
.hero-head .eyebrow{letter-spacing:.16em}
.hero-head .eb-dot{border-radius:2px}
body[data-theme="cosmic"] .hero-head h2{color:#4a0100;font-weight:800;letter-spacing:-.02em}
.hero-head .ph-title .sub{color:#5f4945}
#pageContent{--acc:#e30010;--acc-2:#ff7a72;--acc-soft:#fdecea}
#pageContent[data-accent="blue"]{--acc:#7a0a0c;--acc-2:#d9706a;--acc-soft:#f7e6e3}
#pageContent[data-accent="teal"]{--acc:#b5532b;--acc-2:#eba179;--acc-soft:#f9ebe2}
#pageContent[data-accent="green"],#pageContent[data-accent="emerald"]{--acc:#1d8a5c;--acc-2:#6fd1a2;--acc-soft:#e3f3ea}
#pageContent[data-accent="indigo"]{--acc:#8c1c13;--acc-2:#e88a7e;--acc-soft:#f8e7e3}
#pageContent[data-accent="pink"]{--acc:#d4364b;--acc-2:#f59aa5;--acc-soft:#fde9ec}
#pageContent[data-accent="amber"]{--acc:#d48a16;--acc-2:#f6c46a;--acc-soft:#fcf0da}

/* ---------- buttons, inputs ---------- */
body[data-theme="cosmic"] .btn{background:var(--grad);box-shadow:0 6px 16px rgba(227,0,16,.22),inset 0 1px 0 rgba(255,255,255,.18)}
body[data-theme="cosmic"] .btn.sm{box-shadow:0 3px 10px rgba(227,0,16,.18)}
body[data-theme="cosmic"] .btn.xs{box-shadow:none}
body[data-theme="cosmic"] .btn.ghost{background:#fff;color:var(--solo-maroon);border:1px solid #e8ddcc;box-shadow:0 1px 2px rgba(70,20,10,.05)}
body[data-theme="cosmic"] .btn.ghost:hover{background:#fcf6ee;border-color:#dccab2}
body[data-theme="cosmic"] .btn.brand{background:linear-gradient(135deg,#7a0a0c,#3a0100);box-shadow:0 6px 16px rgba(87,1,0,.25)}
body[data-theme="cosmic"] .btn.green{background:linear-gradient(180deg,#22a06b,#17855a);box-shadow:0 6px 16px rgba(29,138,92,.22)}
body[data-theme="cosmic"] .btn.danger{background:linear-gradient(180deg,#b3001b,#8a0013);box-shadow:0 6px 16px rgba(140,0,20,.22)}
/* small destructive buttons in lists: red outline, so they don't compete with the main action */
body[data-theme="cosmic"] .btn.danger.sm,body[data-theme="cosmic"] .btn.danger.xs{background:#fff;color:#b3001b;
  border:1px solid #f0c0c5;box-shadow:none}
body[data-theme="cosmic"] .btn.danger.sm:hover,body[data-theme="cosmic"] .btn.danger.xs:hover{background:#fff1f2;border-color:#e58f99;filter:none}
body[data-theme="cosmic"] .grad-btn{background:var(--grad) !important;box-shadow:0 10px 24px rgba(227,0,16,.26)}
body[data-theme="cosmic"] .f{border-color:#e6dccd}
body[data-theme="cosmic"] .f:focus{border-color:#ea8a8f;box-shadow:0 0 0 4px rgba(227,0,16,.10)}
body[data-theme="cosmic"] .seg{background:#f5efe4;border-color:#ece3d4}
body[data-theme="cosmic"] .seg button.on{color:var(--solo-maroon)}
.date-sel{border-color:#e8ddcc}
body[data-theme="cosmic"] .chip.new,body[data-theme="cosmic"] .chip.input{background:#fdeceb;color:var(--brand-dark)}
body[data-theme="cosmic"] .chip.processing{background:#fcf0da;color:#8c5507}
body[data-theme="cosmic"] code{color:var(--brand-dark);background:#fdecea}

/* ---------- cards ---------- */
body[data-theme="cosmic"] .vcard:hover{border-color:#f0c4c0;box-shadow:0 8px 22px rgba(227,0,16,.08)}
.stat-card{--sc:#e30010;--sc-soft:#fde3e1;--sc-bg:#fff6f4}
.stat-card.tone-blue{--sc:#7a0a0c;--sc-soft:#f6e3e0;--sc-bg:#fcf5f3}
.stat-card.tone-green{--sc:#1d8a5c;--sc-soft:#dcf1e6;--sc-bg:#f2faf5}
.stat-card.tone-pink{--sc:#b5532b;--sc-soft:#f8e4d9;--sc-bg:#fdf6f1}
.stat-card.tone-amber{--sc:#d48a16;--sc-soft:#fcebcc;--sc-bg:#fffaf0}
body[data-theme="cosmic"] .tile{background:linear-gradient(120deg,#fff4f2,#fff 80%) !important}
body[data-theme="cosmic"] .tile.processing,body[data-theme="cosmic"] .tile.inprogress{background:linear-gradient(120deg,#fff7e9,#fff 80%) !important}
body[data-theme="cosmic"] .tile.completed,body[data-theme="cosmic"] .tile.green{background:linear-gradient(120deg,#eef9f3,#fff 80%) !important}
body[data-theme="cosmic"] .tile.new{background:linear-gradient(120deg,#fbf6ee,#fff 80%) !important}
.board.v2 .col{--cc:#e30010;--cc-soft:#fde3e1;--cc-soft2:#fff3f2;--cc-ink:#c2000e}
.board.v2 .col-processing{--cc:#d48a16;--cc-soft:#fcebcc;--cc-soft2:#fff8ec;--cc-ink:#8c5507}
.board.v2 .col-completed{--cc:#1d8a5c;--cc-soft:#dcf1e6;--cc-soft2:#f0faf4;--cc-ink:#11603f}
.in-drop{border-color:#f0c2bf;background:linear-gradient(180deg,#fffdfa,#fdf7f0)}
.in-drop:hover,.col.drag-over .in-drop{border-color:var(--solo-red);background:#fff6f4}
.in-drop-ic{background:#fde3e1;color:var(--solo-red)}
.col-empty{background:linear-gradient(180deg,#fffdfa,#faf5ec)}
body[data-theme="cosmic"] .viz-tip{background:#2a0f0c;box-shadow:0 10px 24px rgba(42,8,4,.25)}
body[data-theme="cosmic"] svg .viz-hit.hover{fill:rgba(227,0,16,.06)}
body[data-theme="cosmic"] .hb-row.hover{background:rgba(227,0,16,.05)}
body[data-theme="cosmic"] .dm-msg.out .dm-bubble{background:var(--solo-red);border-color:var(--solo-red)}

/* ---------- phones: maroon bottom bar to match the side menu ---------- */
@media(max-width:700px){
  .mnav{background:linear-gradient(180deg,#5a0603,#3f0101);border-top:0;box-shadow:0 -8px 24px rgba(60,10,5,.18)}
  .mnav-btn{color:rgba(255,230,220,.78)}
  .mnav-btn.active,.mnav-btn.open{color:#fff}
  .mnav-btn.active .mnav-ic{background:#fcf8f0;color:var(--solo-red)}
  .mnav-btn.open .mnav-ic{background:var(--solo-red);color:#fff}
  .mnav-dot{border-color:#4a0201;background:#ff3b30}
  .mns-backdrop{background:rgba(42,8,4,.42)}
  .mns-panel{background:#fffdf8}
  .mns-item{background:#fff;border-color:#efe6d8}
  .mns-ic{background:#f7efe4;color:var(--solo-maroon)}
  .mns-item.active{border-color:#f0b9b4;background:#fff4f2;color:var(--brand-dark)}
  .mns-item.active .mns-ic{background:#fde3e1;color:var(--solo-red)}
}

/* ---------- login: cream page, red corner (deck), maroon headline ---------- */
.lp{--lp-ink:#2a0f0c;--lp-ink2:#5b4541;--lp-muted:#88746f;--lp-line:#e8ddcc;--lp-brand:#e30010;
  --lp-grad:linear-gradient(90deg,#e30010,#8f000a);background:#fcf9f2;font-family:"DM Sans","Segoe UI",Roboto,sans-serif}
.lp::before{right:-11vw;top:-15vw;bottom:auto;left:auto;width:38vw;height:38vw;border-radius:50%;background:var(--solo-red);opacity:1;filter:none}
.lp::after{display:none}
.lp-eyebrow{color:var(--solo-red);letter-spacing:.2em;font-weight:800}
.lp-h1{color:#3a0100;letter-spacing:-.03em;font-size:clamp(40px,14cqi,84px);line-height:1}
.lp-brand-top .lp-tag{white-space:nowrap}
.lp-feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;max-width:520px}
.lf-ic.c1{background:#fde3e1;color:#e30010} .lf-ic.c2{background:#f6e3e0;color:#7a0a0c}
.lf-ic.c3{background:#fcebcc;color:#b06d06} .lf-ic.c4{background:#dcf1e6;color:#17855a}
.lf-ic.c5{background:#f8e4d9;color:#b5532b} .lf-ic.c6{background:#fde9ec;color:#c8102e}
.lp-card{border:1px solid #f1e8da;box-shadow:0 30px 80px rgba(87,1,0,.16),0 2px 6px rgba(87,1,0,.05)}
.lp-fld:focus-within{border-color:var(--solo-red);box-shadow:0 0 0 4px rgba(227,0,16,.10)}
.lp-eye:hover{background:#fdecea}
.lp-go{background:linear-gradient(180deg,#ef1424,#d4000f);box-shadow:0 14px 30px rgba(227,0,16,.28)}
.lp-go:hover{box-shadow:0 18px 36px rgba(227,0,16,.34)}
.cv{--g:linear-gradient(90deg,#e30010,#c2000e);--c-line:#f0e8dc;--c-soft:#fcf8f2;--c-brand:#e30010}
@media(max-width:700px){
  .lp::before{right:-27vw;top:-31vw;width:50vw;height:50vw}
  .lp-brand-top .lp-tag{white-space:normal;max-width:15em}
}