/* NS Media — one stylesheet, no framework, no build step.
   The palette is lifted straight from the Stephen app so the two look like one
   system: navy, gold, and a light working surface. */
:root{
  --navy:#1E3A5F;
  --navy-deep:#0F172A;
  --gold:#B89968;
  --gold-light:#D4B98A;
  --gold-deep:#C8861A;
  --silver:#D6DCE3;
  --silver-dim:#A8B0BC;
  --light:#F8FAFC;
  --border:#D9DEE6;
  --grey:#475569;
  --ink:#0F172A;
  --white:#fff;

  --good:#15803D;
  --warn:#B45309;
  --bad:#B91C1C;

  --radius:14px;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.18);
  --font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--light);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
a{color:inherit;text-decoration:none;cursor:pointer}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em;color:var(--navy-deep)}
code{background:#EEF2F7;border-radius:5px;padding:1px 5px;font-size:.9em}
[hidden]{display:none !important}
.pt-safe{padding-top:env(safe-area-inset-top)}

/* ---------- the gold hairline under every navy band ---------- */
.rule{height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-deep))}

/* ---------- sign in ---------- */
.gate{min-height:100%;display:flex;flex-direction:column;background:var(--navy-deep)}
.gate .top-band{background:var(--navy);padding:44px 20px 30px;text-align:center}
.gate .top-band img{height:52px;width:auto}
.gate .kicker{margin-top:14px;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--silver);font-weight:300}
.gate .body{flex:1;display:grid;place-items:center;padding:28px 20px}
.login{width:min(390px,100%);background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
.login h2{font-size:19px;margin-bottom:4px}
.login label{display:block;font-size:12px;color:var(--grey);margin:14px 0 5px;font-weight:600}
.login .btn{width:100%;margin-top:20px}

/* ---------- app shell ---------- */
.shell{min-height:100%;display:flex;flex-direction:column}
.masthead{background:var(--navy);color:#fff}
.masthead .inner{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:18px}
.masthead img.logo{height:34px;width:auto;flex:none}
.masthead .spacer{flex:1}
.masthead .who{font-size:12px;color:var(--silver);display:flex;align-items:center;gap:8px}
.masthead .role{border:1px solid rgba(214,220,227,.35);border-radius:999px;padding:1px 8px;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase}
.masthead .modepill{border:1px solid var(--gold);color:var(--gold-light);border-radius:999px;
  padding:2px 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.masthead .linkbtn{color:var(--silver);border:1px solid rgba(214,220,227,.3);border-radius:9px;
  padding:6px 11px;font-size:12px;font-weight:600;background:none;cursor:pointer}
.masthead .linkbtn:hover{background:rgba(255,255,255,.08);color:#fff}

.navbar{background:var(--navy-deep)}
.navbar .inner{max-width:1180px;margin:0 auto;padding:0 12px;display:flex;gap:2px;overflow-x:auto}
.navbar a{padding:11px 13px;font-size:13.5px;font-weight:600;color:var(--silver-dim);white-space:nowrap;
  border-bottom:3px solid transparent}
.navbar a:hover{color:#fff}
.navbar a.active{color:var(--gold-light);border-bottom-color:var(--gold)}

.main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:24px 20px 64px}
.pagehead{margin-bottom:18px}
.pagehead h2{font-size:23px}
.pagehead .sub{margin:3px 0 0;color:var(--grey);font-size:13.5px}

/* ---------- home tiles ---------- */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.tile{position:relative;background:var(--navy);border:2px solid var(--gold);border-radius:18px;
  padding:20px 18px;color:#fff;box-shadow:var(--shadow);cursor:pointer;transition:transform .12s,box-shadow .12s;
  display:flex;flex-direction:column;gap:5px;min-height:132px}
.tile:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(15,23,42,.45)}
.tile:active{transform:scale(.985)}
.tile .ic{font-size:21px;color:var(--gold-light)}
.tile b{font-size:16px}
.tile span{font-size:12.5px;color:var(--silver);line-height:1.45}
.tile .count{position:absolute;top:14px;right:16px;background:var(--gold);color:var(--navy-deep);
  border-radius:999px;min-width:24px;text-align:center;padding:1px 8px;font-size:12px;font-weight:700}

/* ---------- cards ---------- */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow)}
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.stat b{display:block;font-size:27px;line-height:1.15;color:var(--navy)}
.stat span{color:var(--grey);font-size:13px}

.btn{background:var(--navy);border:1px solid var(--navy);border-radius:10px;padding:10px 16px;
  font-weight:650;cursor:pointer;color:#fff;font-size:14px}
.btn:hover{background:#17304F}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--white);border-color:var(--border);color:var(--navy)}
.btn.ghost:hover{background:#F1F5F9}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.btn.gold:hover{background:var(--gold-light)}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.danger{background:var(--bad);border-color:var(--bad)}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.hint{color:var(--grey);font-size:13px}
.err{color:var(--bad);font-size:13px;margin:8px 0 0}
.pill{background:#EEF2F7;border:1px solid var(--border);border-radius:999px;padding:2px 10px;
  font-size:11.5px;color:var(--grey);letter-spacing:.04em}
.pill.mock{border-color:var(--warn);color:var(--warn);background:#FFFBEB}
.pill.live{border-color:var(--good);color:var(--good);background:#F0FDF4}

textarea,input[type=text],input[type=email],input[type=password],input[type=search],
input[type=datetime-local],input[type=file],select{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--white);
  color:var(--ink)}
textarea:focus,input:focus,select:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
textarea{min-height:150px;resize:vertical}
label.fld{display:block;margin:14px 0 5px;font-size:12px;color:var(--grey);font-weight:600}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--grey);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
tr:last-child td{border-bottom:0}
.empty{padding:34px;text-align:center;color:var(--grey)}

/* ---------- utilities (classes, never inline styles — the CSP forbids those) */
.gap{height:15px}
.mt{margin-top:14px}
.mb{margin-bottom:10px}
.sec{margin:26px 0 10px;font-size:15px;text-transform:uppercase;letter-spacing:.1em;color:var(--grey)}
.w-sm{width:180px}
.w-md{width:230px}
.w-auto{width:auto}
.warn-card{border-left:4px solid var(--warn)}
.bad-card{border-left:4px solid var(--bad)}

/* ---------- status ---------- */
.status{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;border-radius:999px;
  padding:2px 9px;border:1px solid;font-weight:700;white-space:nowrap}
.s-draft{border-color:var(--border);color:var(--grey);background:#F8FAFC}
.s-pending_approval{border-color:var(--warn);color:var(--warn);background:#FFFBEB}
.s-scheduled{border-color:#0E7490;color:#0E7490;background:#ECFEFF}
.s-published{border-color:var(--good);color:var(--good);background:#F0FDF4}
.s-failed,.s-retrying{border-color:var(--bad);color:var(--bad);background:#FEF2F2}

/* ---------- platform chips ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:13px;
  cursor:pointer;background:var(--white);user-select:none;font-weight:600;color:var(--grey)}
.chip:hover{border-color:var(--gold)}
.chip.on{color:#fff;border-color:transparent}
.chip.on.p-linkedin{background:#0a66c2}
.chip.on.p-facebook{background:#1877f2}
.chip.on.p-instagram{background:#e1306c}
.chip.on.p-tiktok{background:#111}
.chip.on.p-youtube{background:#f00}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.d-linkedin{background:#0a66c2}.d-facebook{background:#1877f2}.d-instagram{background:#e1306c}
.d-tiktok{background:#111}.d-youtube{background:#f00}

/* ---------- photo library ---------- */
.lib{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.ph{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:2px solid transparent;
  background:#E7ECF2;cursor:pointer;box-shadow:var(--shadow)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.sel{border-color:var(--gold)}
.ph .tick{position:absolute;top:6px;right:6px;min-width:23px;height:23px;border-radius:999px;
  background:var(--gold);color:var(--navy-deep);display:none;place-items:center;font-size:12px;font-weight:700}
.ph.sel .tick{display:grid}
.ph .vid{position:absolute;top:6px;left:6px;background:rgba(15,23,42,.72);border-radius:6px;
  padding:1px 7px;font-size:11px;color:#fff}
.ph .lab{position:absolute;left:0;right:0;bottom:0;padding:5px 7px;font-size:10px;
  background:linear-gradient(transparent,rgba(15,23,42,.85));color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.thumbs img{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}

/* ---------- posts ---------- */
.post{border:1px solid var(--border);border-radius:var(--radius);padding:15px;background:var(--white);
  display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow)}
.post + .post{margin-top:11px}
.post p{margin:0;white-space:pre-wrap}
.post .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--grey)}
.target{font-size:12px;color:var(--grey)}
.target.bad{color:var(--bad)}

/* ---------- compliance ---------- */
.warnlist{margin:8px 0 10px;padding-left:18px;color:var(--grey);font-size:13px}
.warnlist li{margin:2px 0}

/* ---------- email preview + reels ---------- */
.mailpreview{width:100%;height:540px;border:1px solid var(--border);border-radius:12px;background:#fff;margin-top:10px}
.reelrow{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
.reelrow img{width:56px;height:56px;object-fit:cover;border-radius:9px;flex:none}
.reelrow .grow{flex:1;min-width:0}
.reelvid{width:264px;max-width:100%;border-radius:12px;margin-top:10px;background:#000}
.bar{height:7px;background:#E7ECF2;border-radius:999px;overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-deep));transition:width .4s}
.bar i.good{background:linear-gradient(90deg,var(--gold),var(--gold-deep))}
.bar i.warn{background:linear-gradient(90deg,#F59E0B,#D97706)}
.bar i.bad{background:linear-gradient(90deg,#EF4444,#B91C1C)}
code{background:#EEF2F7;border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-size:13px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--navy-deep);color:#fff;border-radius:11px;padding:11px 17px;transition:.2s;
  font-size:14px;z-index:50;max-width:90vw;box-shadow:0 12px 34px -12px rgba(15,23,42,.6)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--bad)}

/* ---------- phone ---------- */
@media (max-width:760px){
  .masthead .inner{padding:11px 14px;gap:10px}
  .masthead img.logo{height:28px}
  .masthead .who span:first-child{display:none}
  .main{padding:16px 14px 56px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile{min-height:118px;padding:16px 14px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .lib{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .w-sm,.w-md{width:100%}
  .mailpreview{height:420px}
}

/* progress-bar widths as classes — the CSP forbids inline styles */
.bar i.w0{width:0%}
.bar i.w5{width:5%}
.bar i.w10{width:10%}
.bar i.w15{width:15%}
.bar i.w20{width:20%}
.bar i.w25{width:25%}
.bar i.w30{width:30%}
.bar i.w35{width:35%}
.bar i.w40{width:40%}
.bar i.w45{width:45%}
.bar i.w50{width:50%}
.bar i.w55{width:55%}
.bar i.w60{width:60%}
.bar i.w65{width:65%}
.bar i.w70{width:70%}
.bar i.w75{width:75%}
.bar i.w80{width:80%}
.bar i.w85{width:85%}
.bar i.w90{width:90%}
.bar i.w95{width:95%}
.bar i.w100{width:100%}

/* ---- the upload tray -------------------------------------------------------
   Rendered live while files are going up, so it has to read at arm's length on
   a phone held in one hand. */
.uprow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 0;border-top:1px solid var(--border)}
.uprow:first-of-type{border-top:none}
.upname{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uphint{font-size:13px;color:var(--grey);text-align:right;white-space:nowrap}
.uprow .bar{grid-column:1 / -1;margin-top:4px}
.uprow .hint{grid-column:1 / -1;font-size:12px}

/* A clip still being squeezed is usable, so it must not look broken — just busy. */
.ph.busy img{opacity:.55}
.ph .cook{position:absolute;left:6px;bottom:6px;background:rgba(15,23,42,.82);color:var(--gold-light);
  font-size:11px;letter-spacing:.04em;padding:2px 7px;border-radius:999px}
.ph .vid{position:absolute;left:6px;top:6px;background:rgba(15,23,42,.82);color:#fff;
  font-size:11px;padding:2px 7px;border-radius:999px}