/* Same dark token family as cart-recovery, rethemed with an ECOM orange accent. */
:root {
  --bg: #07090D;
  --surface: #0B0E14;
  --card: #10141C;
  --card-hover: #151A24;
  --border: rgba(255,255,255,0.07);
  --text-pri: #ECEFF5;
  --text-sec: #8A93A6;
  --text-dim: #4A5366;
  --accent: #F97316;
  --accent-light: #FB923C;
  --accent-dim: rgba(249,115,22,0.12);
  --green: #22D3A0;
  --green-dim: rgba(34,211,160,0.12);
  --red: #F87171;
  --red-dim: rgba(248,113,113,0.12);
  --amber: #FBBF24;
  --amber-dim: rgba(251,191,36,0.12);
  --ig: #E1306C;
  --fb: #3B82F6;
  --yt: #EF4444;
  --radius: 10px;
  --display: 'Bricolage Grotesque', sans-serif;
  --sans: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The global reset removes the browser margins that centre modal dialogs; restore them. */
dialog { margin: auto; }
body { background: var(--bg); color: var(--text-pri); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
.muted { color: var(--text-sec); }
.small { font-size: 12px; }
.error { color: var(--red); min-height: 1.2em; }
.mt { margin-top: 16px; }
a { color: var(--accent-light); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; }
h2 { font-size: 18px; }
h3 { font-size: 14px; margin-bottom: 10px; color: var(--text-sec); font-weight: 500; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

input, select, textarea {
  background: var(--surface); color: var(--text-pri); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font: inherit;
}
textarea { width: 100%; min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); }
label { display: block; color: var(--text-sec); font-size: 12px; margin: 12px 0 4px; }
label.acting { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }

.btn { border: 1px solid var(--border); background: var(--card); color: var(--text-pri); border-radius: 8px; padding: 7px 14px; font: 500 13px var(--sans); cursor: pointer; }
.btn:hover { background: var(--card-hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #111; }
.btn.primary:hover { background: var(--accent-light); }
.btn.danger { color: var(--red); border-color: var(--red-dim); }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: wait; }

.login { min-height: 100vh; display: grid; place-items: center; }
.login-card { width: 340px; display: grid; gap: 12px; background: var(--card); padding: 32px; border-radius: 14px; border: 1px solid var(--border); }
.login-card h1 span, .brand span { color: var(--accent); }

.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 12px 24px; background: rgba(7,9,13,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.brand { font: 700 18px var(--display); }
.tabs { display: flex; gap: 4px; }
.tab { background: none; border: 0; color: var(--text-sec); padding: 8px 14px; border-radius: 8px; font: 500 14px var(--sans); cursor: pointer; }
.tab.active { background: var(--accent-dim); color: var(--accent-light); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

main { padding: 20px 24px 60px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.toolbar input[type=search] { min-width: 240px; }
.chips { display: flex; gap: 6px; }
.chip { border: 1px solid var(--border); background: var(--card); color: var(--text-sec); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 12px; }
.chip.active { color: var(--text-pri); border-color: var(--accent); background: var(--accent-dim); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--card); color: var(--text-sec); border: 0; padding: 6px 14px; cursor: pointer; font: 500 13px var(--sans); }
.seg button.active { background: var(--accent-dim); color: var(--accent-light); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.badge.instagram { background: rgba(225,48,108,.14); color: #F472B6; }
.badge.facebook { background: rgba(59,130,246,.14); color: #93C5FD; }
.badge.youtube { background: rgba(239,68,68,.14); color: #FCA5A5; }
.status { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; }
.status.ok, .status.scheduled, .status.published, .status.posted, .status.completed { background: var(--green-dim); color: var(--green); }
.status.inactive { background: var(--surface); color: var(--text-sec); }
.account-name { font-weight: 400; }
strong.account-name { font-weight: 700; }
.status.warn, .status.running, .status.on_hold, .status.waiting_for_publication, .status.submitting { background: var(--amber-dim); color: var(--amber); }
.status.bad, .status.failed, .status.rejected, .status.reconciliation_required, .status.submission_uncertain, .status.cancelled { background: var(--red-dim); color: var(--red); }

.day { margin-bottom: 22px; }
.overview-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0 30px; }
.overview-heading h1 { font-size:clamp(24px,3vw,36px); letter-spacing:-.035em; margin-bottom:8px; }
.eyebrow { color:var(--accent-light); font:11px var(--mono); letter-spacing:.12em; margin-bottom:10px; }
.overview-item { display:flex; flex-direction:column; gap:4px; padding:12px 0; border-bottom:1px solid var(--border); }
.overview-item:last-child { border-bottom:0; }
#overview-attention { max-height:340px; overflow-y:auto; }
#kpis { grid-template-columns:repeat(5,minmax(0,1fr)); }
.mini { display:block; overflow-x:auto; }
@media(max-width:700px) { #kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.upload-card { background:var(--card); border:1px solid var(--border); border-radius:10px; margin-bottom:8px; }
.upload-card summary { display:flex; gap:14px; align-items:center; padding:14px; cursor:pointer; list-style:none; }
.upload-card summary::after { content:'⌄'; color:var(--text-sec); margin-left:auto; }
.upload-card[open] summary::after { content:'⌃'; }
.upload-title { min-width:0; flex:1; }
.upload-title b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-title .sub { color:var(--text-sec); font-size:12px; margin-top:5px; }
.upload-badges { max-width:35%; display:flex; flex-wrap:wrap; gap:4px; }
.upload-details { border-top:1px solid var(--border); padding:0 18px; }
.destination { padding:16px 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.destination p { margin-top:8px; white-space:pre-wrap; }
.destination button { float:right; }
.thumb.placeholder { display:grid; place-items:center; background:var(--accent-dim); color:var(--accent-light); flex-shrink:0; }
#coverage-table td { white-space:nowrap; }
button:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:700px) {
  .overview-heading { align-items:flex-start; }
  .upload-card summary { flex-wrap:wrap; }
  .upload-badges { max-width:100%; margin-left:50px; }
  .destination button { float:none; display:block; margin-top:10px; }
  .topbar { flex-wrap:wrap; gap:8px; }
  .topbar-right { width:100%; flex-wrap:wrap; margin-left:0; }
  .toolbar input[type=search] { min-width:0; width:100%; }
}
.day-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font: 700 15px var(--display); }
.day-head .muted { font: 400 12px var(--sans); }
.post { display: grid; grid-template-columns: 80px 92px 150px 1fr 220px 110px 70px; gap: 12px; align-items: center; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; }
.post:hover { background: var(--card-hover); }
.post .time { font-family: var(--mono); }
.post .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post .sub { color: var(--text-sec); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post .who { font-size: 12px; color: var(--text-sec); }
.post .who b { color: var(--text-pri); font-weight: 500; }

.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--text-sec); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--card); }
.table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr.click:hover td { background: var(--card-hover); cursor: pointer; }
.table td.title { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb { width: 36px; height: 64px; object-fit: cover; border-radius: 4px; background: var(--surface); display: block; }
.removed td { opacity: .45; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.kpi .label { color: var(--text-sec); font-size: 12px; }
.kpi .value { font: 700 26px var(--display); margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-width: 0; }
.chart { min-height: 220px; }
.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini td, .mini th { padding: 6px 4px; border-bottom: 1px solid var(--border); }
.mini th { color: var(--text-sec); font-weight: 500; font-size: 12px; text-align: left; }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; z-index: 20; background: var(--surface); border-left: 1px solid var(--border); padding: 20px; overflow-y: auto; box-shadow: -20px 0 40px rgba(0,0,0,.4); }
.drawer.wide { width: 620px; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.drawer .actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.drawer .meta { font-size: 12px; color: var(--text-sec); margin-top: 4px; }
.box { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-top: 12px; font-size: 13px; }
.rules { font-size: 12px; color: var(--text-sec); background: var(--accent-dim); border-radius: 8px; padding: 8px 12px; margin-top: 12px; }

.modal { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 20px; }
.modal-card { width: 820px; max-width: 100%; max-height: 92vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
.progress { height: 6px; background: var(--card); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.progress div { height: 100%; background: var(--accent); width: 0; transition: width .2s; }

.guide h3 { color: var(--text-pri); font-size: 15px; margin: 20px 0 8px; }
.guide ol, .guide ul { padding-left: 20px; }
.guide li { margin: 6px 0; color: var(--text-sec); }
.guide li b { color: var(--text-pri); }
.guide code { font-family: var(--mono); background: var(--card); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.guide .note { background: var(--amber-dim); color: var(--amber); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-top: 10px; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 40; background: var(--card); border: 1px solid var(--border); padding: 10px 18px; border-radius: 10px; max-width: 640px; }
.toast.bad { border-color: var(--red); color: var(--red); }
.toast.ok { border-color: var(--green); }
.empty { color: var(--text-sec); padding: 40px; text-align: center; }

@media (max-width: 1100px) {
  .post { grid-template-columns: 70px 80px 1fr 90px; }
  .post .hide-sm { display: none; }
  .grid2, .kpis { grid-template-columns: 1fr 1fr; }
}
.drive-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; }
@media(max-width:700px) {
  main { padding:16px 16px 40px; }
  .grid2 { grid-template-columns:minmax(0,1fr); }
  .chart { overflow-x:auto; }
}

/* 2026-10-25: every pop-up keeps a close X at its top-right while its content scrolls. */
.modal-x{position:sticky;top:0;float:right;z-index:6;display:inline-grid;place-items:center;width:34px;height:34px;margin:-6px -6px 4px 12px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text-pri);font-size:16px;line-height:1;cursor:pointer;box-shadow:0 2px 8px #0002}
.modal-x:hover{background:var(--card-hover)}
.modal-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modal-card>.drawer-head,.drawer>.drawer-head{position:sticky;top:-20px;z-index:5;background:var(--surface);margin:-20px -20px 12px;padding:14px 20px;border-bottom:1px solid var(--border)}
.drawer-head .modal-x{position:static;float:none;margin:0 0 0 12px;flex:none}

/* Primary video delivery action: generous target, stable contrast and keyboard focus. */
a.video-download-button,.generation-studio a.video-download-button,.bu-page a.video-download-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:180px;min-height:52px;padding:14px 24px;border:1px solid #15803d;border-radius:8px;background:#15803d;color:#fff;font-size:16px;font-weight:700;line-height:1.3;text-decoration:none;white-space:normal;text-align:center;flex-shrink:0}
a.video-download-button:hover,.generation-studio a.video-download-button:hover,.bu-page a.video-download-button:hover{background:#166534;border-color:#166534;color:#fff}
a.video-download-button:focus-visible,.generation-studio a.video-download-button:focus-visible,.bu-page a.video-download-button:focus-visible{outline:3px solid #86efac;outline-offset:3px}
@media(max-width:620px){a.video-download-button,.generation-studio a.video-download-button,.bu-page a.video-download-button{width:100%;min-width:0}}

/* Failed-generation SFW editor */
.gs-sfw-levels{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 10px;padding:16px;border:1px solid var(--border);border-radius:12px}.gs-sfw-levels legend{font-size:13px;font-weight:600;padding:0 6px}.gs-sfw-levels .gs-button{flex:1;min-width:135px}.gs-run-failure [data-action="make-sfw"]{margin:8px 10px 8px 0}