:root{
  color-scheme: light;
  --bg: #EFEDE6;
  --panel: #FBFAF7;
  --ink: #201F1C;
  --ink-soft: #5C594F;
  --line: #DBD7CB;
  --accent: #1F4B4A;
  --accent-soft: #E7EFEE;
  --signal: #C6621F;
  --signal-soft: #FBE9DC;
  --radius: 3px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
body{ background: var(--bg); color: var(--ink); }
/* Some browsers' forced-dark-mode still overrides page colors even with color-scheme
   declared, and it targets form controls the most aggressively — this pins the text
   color of plain text inputs, selects and textareas that don't already set their own
   color inline (status dropdowns compute their own contrasting text color deliberately,
   and must keep winning). Scoped to form fields only — buttons and containers already
   have their own correct color rules (including light-on-dark ones like the sidebar and
   primary button) and must not be touched here, or those break the same way in reverse. */
input:not([style*="color"]), select:not([style*="color"]), textarea:not([style*="color"]){ color:var(--ink) !important; }
input::placeholder, textarea::placeholder{ color:#8A8776 !important; opacity:1; }
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{ font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.45; }
#app{display:flex; min-height:100vh;}

/* ---------- Sidebar (black) ---------- */
.sidebar{ width: 216px; flex-shrink:0; background: #0A0A0A; color: #F2F1EC; padding: 20px 0; display:flex; flex-direction:column; }
.brand{ padding: 0 18px 18px 18px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 10px; }
.brand .logo-img{ max-width:100%; height:auto; display:block; }
.login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg,#F5F4EF); padding:20px; }
.login-card{ background:#fff; border-radius:16px; padding:40px 36px; width:380px; max-width:100%; box-shadow:0 8px 32px rgba(0,0,0,0.1); text-align:center; }
.login-card .login-logo{ max-width:140px; margin:0 auto 14px auto; }
.login-card h1{ font-size:19px; margin:2px 0 4px 0; }
.login-card .field{ text-align:left; margin-bottom:12px; }
.login-card select, .login-card input{ width:100%; }
.login-error{ color:#B03A3A; font-size:12.5px; margin-top:4px; text-align:left; }
.brand .kicker{ font-size:10.5px; letter-spacing:.08em; color:#9A9890; margin-top:8px; }
.brand h1{ font-size: 14px; margin: 4px 0 0 0; font-weight: 600; line-height:1.3; color:#C9C7BE;}
.nav-item{ display:flex; justify-content:space-between; align-items:center; padding: 10px 18px; cursor:pointer; color:#D6D4CB; border-left: 3px solid transparent; font-size: 13.5px; }
.nav-item:hover{ background: rgba(255,255,255,0.06); }
.nav-item.active{ background: rgba(255,255,255,0.08); color: #fff; font-weight:600; }
.nav-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:8px; }
.nav-count{ font-size:11px; color:#8A8880; }
.nav-item.active .nav-count{ color:#D6D4CB; }
.notif-badge{ background:#D93025; color:#fff; font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:20px; margin-left:8px; }
.pill-new-badge{ background:#D93025; color:#fff; font-size:10px; font-weight:800; padding:0px 6px; border-radius:20px; margin-left:4px; }
.sidebar-legend{ padding: 12px 18px; border-top:1px solid rgba(255,255,255,0.1); margin-top:8px;}
.legend-title{ font-size:10.5px; color:#8A8880; margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em;}
.legend-row{ display:flex; align-items:center; gap:7px; font-size:12px; color:#D6D4CB; margin-bottom:5px;}
.legend-swatch{ width:11px; height:11px; border-radius:3px; display:inline-block; flex-shrink:0; }
.sidebar-foot{ margin-top:auto; padding: 14px 18px 0 18px; font-size:11px; color:#8A8880; border-top:1px solid rgba(255,255,255,0.1);}
.nav-archive{ border-top:1px solid rgba(255,255,255,0.1); margin-top:6px; padding-top:12px; }

.main{ flex:1; min-width:0; padding: 22px 28px 60px 28px; }
.topbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px;}
.topbar h2{ margin:0 0 3px 0; font-size:21px; font-weight:700;}
.topbar .sub{ color:var(--ink-soft); font-size:13px;}
.btn{ font-family:var(--font); font-size:13.5px; font-weight:600; cursor:pointer; border-radius: var(--radius); border:1px solid transparent; padding: 9px 15px; display:inline-flex; align-items:center; gap:6px; }
a.btn{ text-decoration:none; }
.btn-primary{ background: #0A0A0A; color:#fff; }
.btn-primary:hover{ background:#000; }
.btn-ghost{ background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover{ background: #fff; }
.btn-sm{ padding:5px 10px; font-size:12.5px; }

.toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; }
.expand-collapse-row{ display:flex; gap:8px; margin-bottom:10px; }
.toolbar input[type=text], .toolbar select{ font-family:var(--font); font-size:13px; padding:7px 9px; border:1px solid var(--line); border-radius: var(--radius); background:#fff; color:var(--ink); }
.toolbar input[type=text]{ min-width: 220px; flex:1; }
.pill-toggle{ font-size:12.5px; padding:7px 11px; border-radius: 20px; border:1px solid var(--line); background:#fff; cursor:pointer; color: var(--ink-soft); }
.campaign-type-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.campaign-type-tag{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; color:#fff; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.pill-toggle.on{ background: var(--signal-soft); border-color: var(--signal); color:#8A3D0F; font-weight:600;}
.pill-toggle.on-amber{ background:#FBEBD2; border-color:#B15A2E; color:#8A5A0F; font-weight:600; }
.pill-toggle.on-red{ background:#FBDAD6; border-color:#D93025; color:#B23B2E; font-weight:600; }
.toolbar input[type=date]{ font-family:var(--font); font-size:13px; padding:6px 9px; border:1px solid var(--line); border-radius: var(--radius); background:#fff; color:var(--ink); }
.loaded-tag{ font-size:11px; color:var(--ink-soft); background:#F0EEE6; padding:3px 8px; border-radius:20px; }
.days-live-tag{ background:var(--accent-soft); color:var(--accent); font-weight:700; }
.site-stats{ display:flex; flex-wrap:wrap; gap:6px; padding: 8px 14px; background:#F5F4EF; border-top:1px solid var(--line); }
.stat-chip{ font-size:11px; padding:3px 9px; border-radius:20px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-weight:600; }
.stat-done{ background:#E4F1E8; border-color:#2F7A4F; color:#2F7A4F; }
.stat-needed{ background:#FBEBD2; border-color:#B15A2E; color:#8A5A0F; }
.stat-overdue{ background:#FBDAD6; border-color:#D93025; color:#B23B2E; }
.stat-due{ background:#FDE9D0; border-color:#E08A2E; color:#8A5A0F; }
.stat-images-yes{ background:#E4F1E8; border-color:#2F7A4F; color:#2F7A4F; }
.stat-images-no{ background:#F0EEE6; border-color:var(--line); color:var(--ink-soft); }

.status-strip{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
.status-chip{ font-size:11.5px; padding:5px 9px; border-radius:20px; cursor:pointer; border:1px solid transparent; opacity:.95; }
.status-chip.dim{ opacity:.35; }
.status-chip.chip-active{ box-shadow: 0 0 0 2px #201F1C inset; font-weight:800; }
.status-chip b{ font-weight:700; }

.type-tag{ font-size:10px; font-weight:700; letter-spacing:.02em; padding:2px 6px; border-radius:3px; margin-right:6px; }
.type-digital{ background:#1F4B4A; color:#fff; }
.type-static{ background:#D8D3C2; color:#4A4735; }
.type-digilite{ background:#3F7D32; color:#fff; }
.nav-overview{ border-top:1px solid rgba(255,255,255,0.1); margin-top:6px; padding-top:12px; }
.overview-wrap{ padding-bottom:20px; }
.overview-bignums{ display:flex; flex-wrap:wrap; gap:10px; }
.bignum-card{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px 18px; min-width:120px; flex:1; }
.bignum{ font-size:28px; font-weight:800; line-height:1; }
.bignum-label{ font-size:11.5px; color:var(--ink-soft); margin-top:5px; font-weight:600; }
.overview-bars{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px 16px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.bar-label{ width:230px; flex-shrink:0; font-size:12.5px; font-weight:600; color:var(--ink); }
.bar-track{ flex:1; background:#EDEBE3; border-radius:10px; height:16px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:10px; transition:width .3s ease; }
.bar-count{ width:36px; text-align:right; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.overview-table-wrap{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:10px; overflow-x:auto; }
.overview-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.overview-table th{ text-align:left; padding:8px 10px; color:var(--ink-soft); font-weight:600; border-bottom:2px solid var(--line); white-space:nowrap; }
.overview-table td{ padding:8px 10px; border-bottom:1px solid #EDEBE3; white-space:nowrap; }
.table-status-chip{ font-size:11px; padding:3px 9px; border-radius:20px; font-weight:600; white-space:nowrap; }
.group-tag{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.group-done{ background:#E4F1E8; color:#2F7A4F; }
.group-remaining{ background:#FBEBD2; color:#8A5A0F; }
.group-notreceived{ background:#E8E7E2; color:#5C594F; }
.cal-month-label{ font-weight:700; font-size:14px; padding:0 8px; min-width:150px; text-align:center; }
.cal-range-label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.cal-legend{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
.cal-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-left:8px; margin-right:2px; }
.cal-dot-green{ background:#04CA95; margin-left:0; }
.cal-dot-red{ background:#FF005B; }
.cal-dot-pca{ background:#F7D849; }
.calendar-wrap{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px; }
.calendar-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
.calendar-head-row{ margin-bottom:6px; }
.cal-head-cell{ font-size:11px; font-weight:700; color:var(--ink-soft); text-align:center; text-transform:uppercase; letter-spacing:.04em; padding-bottom:4px; }
.cal-cell{ min-height:74px; border:1px solid var(--line); border-radius:5px; background:#fff; padding:6px; cursor:pointer; display:flex; flex-direction:column; gap:3px; }
.cal-cell:hover{ background:#F7F6F1; }
.cal-cell-blank{ background:transparent; border-color:transparent; cursor:default; }
.cal-cell-blank:hover{ background:transparent; }
.cal-daynum{ font-size:12px; font-weight:700; color:var(--ink-soft); }
.cal-today .cal-daynum{ color:var(--signal); }
.cal-today{ border-color:var(--signal); border-width:2px; }
.cal-selected{ box-shadow: inset 0 0 0 2px #201F1C; }
.cal-event{ font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:10px; color:#fff; white-space:nowrap; }
.cal-event-green{ background:#04CA95; }
.cal-event-red{ background:#FF005B; }
.cal-event-pca{ background:#F7D849; color:#201F1C; }
.cal-event-pca-done{ background:#E7EFEE; color:#1F4B4A; }
.cal-detail{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.cal-detail-head{ font-weight:700; font-size:14px; margin-bottom:8px; }
.cal-detail-sub{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin:10px 0 6px 0; }
.cal-section-toggle{ cursor:pointer; user-select:none; }
.cal-section-toggle:hover{ opacity:0.75; }
.cal-detail-green{ color:#04CA95; }
.cal-detail-red{ color:#FF005B; }
.cal-detail-pca{ color:#8A6D00; }
.cal-event-row{ background:#fff; border:1px solid var(--line); border-radius:5px; padding:8px 10px; margin-bottom:6px; display:flex; flex-wrap:nowrap; align-items:center; gap:8px; }
.cal-event-row .cal-event-clickable{ flex:1 1 auto; min-width:0; overflow-wrap:break-word; }
.cal-pca-row-done{ background:#F7F9F8; }
.cal-pca-row-done .cal-event-clickable{ color:var(--ink-soft); }
.cal-pca-check-wrap{ flex-shrink:0; margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:16px; background:var(--panel); border:1px solid var(--line); cursor:pointer; font-size:12.5px; font-weight:600; white-space:nowrap; }
.cal-pca-check-wrap:hover{ background:#EFEDE6; }
.cal-pca-check-wrap input{ cursor:pointer; }
.cal-event-clickable{ cursor:pointer; }
.cal-event-clickable:hover{ border-color:var(--ink); background:#F9F8F4; }
.cal-jump-btn{ white-space:nowrap; }
.campaign-flash{ animation: campaignFlash 2.2s ease; }
@keyframes campaignFlash{
  0%{ box-shadow: 0 0 0 3px #C6621F; }
  70%{ box-shadow: 0 0 0 3px #C6621F; }
  100%{ box-shadow: none; }
}
.cal-event-main{ font-size:12.5px; flex:1; min-width:200px; }
.cal-event-meta{ font-size:11.5px; color:var(--ink-soft); }
@media (max-width: 760px){
  .cal-cell{ min-height:52px; padding:4px; }
  .cal-event{ font-size:9px; }
}
.bar-pct{ color:var(--ink-soft); font-weight:400; }
.tracking-card{ background:var(--panel); border:2px solid var(--line); border-radius:8px; padding:16px 18px; margin-bottom:14px; }
.tracking-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.tracking-verdict{ font-size:13px; font-weight:800; color:#fff; padding:5px 14px; border-radius:20px; }
.tracking-sub{ font-size:12.5px; color:var(--ink-soft); }
.tracking-track{ position:relative; height:14px; background:#EDEBE3; border-radius:10px; overflow:visible; }
.tracking-fill{ position:absolute; left:0; top:0; height:100%; border-radius:10px; opacity:0.85; }
.tracking-marker{ position:absolute; top:-4px; width:3px; height:22px; background:#201F1C; border-radius:2px; }
.region-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle;}
.section-header{ font-size:13px; font-weight:700; color:var(--ink); margin: 4px 0 8px 0; padding-bottom:6px; border-bottom:2px solid var(--line); display:flex; align-items:baseline; gap:8px;}
.section-count{ font-size:12px; font-weight:400; color:var(--ink-soft); }

.site-group{ border:1px solid var(--line); border-radius: var(--radius); margin-bottom:10px; background:var(--panel); overflow:hidden;}
.site-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 11px 14px; cursor:pointer; background:#fff; }
.site-head:hover{ background: #F5F4EF; }
.site-name{ font-weight:700; font-size:14px;}
.site-meta{ color:var(--ink-soft); font-size:12px; margin-left:8px; font-weight:400;}
.site-caret{ color: var(--ink-soft); font-size:12px; transition: transform .12s ease;}
.site-group.open .site-caret{ transform: rotate(90deg); }
.campaign-list{ display:none; }
.site-group.open .campaign-list{ display:block; }

/* ---------- Campaign block ---------- */
.campaign-block{ border-top:1px solid var(--line); padding: 12px 14px 14px 14px; }
.campaign-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.campaign-name-input{ font-family:var(--font); font-weight:700; font-size:14.5px; border:1px solid transparent; background:transparent; color:var(--ink); padding:3px 6px; border-radius:3px; flex:1; min-width:140px; }
.campaign-id-wrap{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--ink-soft); background:#F0EEE6; padding:4px 6px 4px 10px; border-radius:20px; white-space:nowrap; }
.renewal-pending-tag{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; color:#8A5A0F; background:#FBEBD2; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.pca-due-tag{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#201F1C; background:#F7D849; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.pca-due-tag label{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.pca-done-tag{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#1F4B4A; background:#E7EFEE; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.pca-notneeded-tag{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--ink-soft); background:#EEECE4; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.pca-mark-done, .pca-mark-notneeded, .cal-pca-mark-done, .cal-pca-mark-notneeded, .summary-pca-mark-done, .summary-pca-mark-notneeded{ text-decoration:underline; cursor:pointer; }
.pca-undo, .cal-pca-undo, .summary-pca-undo{ cursor:pointer; font-weight:700; opacity:0.7; }
.pca-undo:hover, .cal-pca-undo:hover, .summary-pca-undo:hover{ opacity:1; }
.campaign-id-input{ font-family:var(--font); font-weight:700; font-size:12px; border:1px solid var(--line); background:#fff; padding:3px 7px; border-radius:20px; width:90px; text-align:center; color:var(--ink); }
.extra-campaign-id-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--ink-soft); background:#F0EEE6; padding:4px 8px; border-radius:20px; white-space:nowrap; }
.extra-campaign-id-chip .remove-extra-id{ cursor:pointer; color:#B03A3A; font-weight:700; }
.extra-id-new-input{ font-family:var(--font); font-weight:700; font-size:12px; border:1px solid var(--line); background:#fff; padding:3px 7px; border-radius:20px; width:130px; text-align:center; color:var(--ink); }
.campaign-id-input:focus{ color:var(--ink); }
.campaign-name-input:hover, .campaign-name-input:focus{ border-color:var(--line); background:#fff; }
.coord-chip{ font-size:11.5px; padding:4px 10px; border-radius:20px; font-weight:600; white-space:nowrap; }
.campaign-dates{ font-size:12px; color:var(--ink-soft); white-space:nowrap;}
.campaign-dates-edit{ display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:13px; white-space:nowrap; }
.camp-date-input{ font-family:var(--font); font-weight:700; font-size:13px; border:1px solid transparent; background:transparent; color:var(--ink); padding:3px 5px; border-radius:3px; width:96px; text-align:center; }
.camp-date-input:hover, .camp-date-input:focus{ border-color:var(--line); background:#fff; }
.date-text-input{ width:100px; }
.date-deadline, .date-deadline + label, .deadline-label{ color:#D93025 !important; }
.mini-field:has(.date-deadline) label{ color:#D93025; }
.date-deadline{ border-color:#D93025 !important; font-weight:700; }
.date-field-wrap{ display:inline-flex; align-items:center; gap:2px; position:relative; }
.date-pick-btn{ background:none; border:none; cursor:pointer; font-size:13px; padding:2px 3px; border-radius:3px; line-height:1; opacity:0.75; }
.date-pick-btn:hover{ opacity:1; background:#EDEBE3; }
.date-shadow-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; left:0; top:0; }
input:disabled, select:disabled, textarea:disabled{ background:#F0EEE6; color:#8A8776; cursor:not-allowed; opacity:0.85; }
.campaign-sub{ display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color: var(--ink-soft); margin-bottom:8px;}
.remove-campaign-btn{ margin-left:auto; }

.creative-row{ background:#fff; border:1px solid var(--line); border-radius:3px; padding:10px 12px; margin-bottom:8px; }
.creative-row.overdue{ border-left: 4px solid #D93025; }
.creative-row.due-soon:not(.overdue){ border-left: 4px solid #E08A2E; }
.creative-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.creative-label-input{ font-family:var(--font); font-weight:600; font-size:13px; border:1px solid transparent; background:transparent; color:var(--ink); padding:3px 6px; border-radius:3px; flex:1; min-width:120px; }
.creative-label-input:hover, .creative-label-input:focus{ border-color:var(--line); background:#F9F8F4; }
.creative-site-tag{ font-size:11px; font-weight:700; color:var(--ink-soft); background:#F0EEE6; padding:3px 8px; border-radius:20px; white-space:nowrap; }
.status-select{ padding:5px 10px; font-size:12px; border-radius:20px; border:1px solid transparent; font-weight:700; font-family:var(--font); text-align:center; text-align-last:center; }
.production-select{ padding:5px 10px; font-size:12px; border-radius:20px; border:1px solid var(--line); font-weight:700; font-family:var(--font); text-align:center; text-align-last:center; }
.extra-dates-block{ margin-top:6px; }
.extra-date-row{ margin-top:4px; padding-top:6px; border-top:1px dashed var(--line); }
.notice-badge{ font-size:10.5px; padding:3px 10px; border-radius:20px; font-weight:700; white-space:nowrap; }
.notice-overdue{ background:#D93025; color:#fff; }
.notice-duesoon{ background:#E08A2E; color:#fff; }
.notice-outofrange{ background:#B15A2E; color:#fff; }
.notice-endingsoon{ background:#F2C94C; color:#4A3B00; }
.creative-dates-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.mini-field{ display:flex; flex-direction:column; gap:3px; }
.mini-field label{ font-size:10.5px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.mini-field input[type=date], .mini-field input[type=text]{ font-family:var(--font); font-size:12px; padding:5px 7px; border:1px solid var(--line); border-radius:3px; background:#fff; }
.mini-field.timeslot input{ width:260px; }
.notes-field textarea{ width:100%; font-family:var(--font); font-size:12.5px; padding:6px 8px; border:1px solid var(--line); border-radius:3px; margin-top:8px; resize:vertical; min-height:34px; background:#fff;}
.notes-pair{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.production-email-row{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.notes-pair .notes-field{ flex:1; min-width:220px; }
.notes-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); display:block; margin-bottom:3px; }
.rich-notes-wrap{ border:1px solid var(--line); border-radius:3px; background:#fff; overflow:hidden; }
.rich-notes-toolbar{ display:flex; gap:2px; padding:4px 5px; background:#F5F4EF; border-bottom:1px solid var(--line); }
.rn-btn{ background:#fff; border:1px solid var(--line); border-radius:3px; width:22px; height:22px; font-size:12px; cursor:pointer; padding:0; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.rn-btn:hover{ background:#EDEBE3; }
.rich-notes-editable{ min-height:34px; padding:6px 8px; font-family:var(--font); font-size:12.5px; outline:none; }
.rich-notes-editable:empty:before{ content: attr(data-placeholder); color:#B0AC9C; }
.entry-links{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap;}
.link-field{ display:flex; align-items:center; gap:5px; font-size:12px; }
.link-field input{ font-family:var(--font); font-size:12px; padding:4px 6px; border:1px solid var(--line); border-radius:3px; width:240px; background:#fff;}
.link-field label{ color: var(--ink-soft); font-weight:600; }
.creative-actions{ display:flex; gap:6px; margin-top:8px;}
.add-creative-btn{ margin-top:2px; }

.empty-state{ text-align:center; padding:60px 20px; color: var(--ink-soft); }
.empty-state.small{ padding:24px; font-size:12.5px; }
.empty-state h3{ color:var(--ink); margin-bottom:6px;}

.overlay{ position:fixed; inset:0; background: rgba(20,20,18,0.4); display:none; align-items:stretch; justify-content:flex-end; z-index:50;}
.overlay.show{ display:flex; }
.panel{ width: 480px; max-width:92vw; background:#fff; height:100%; overflow-y:auto; padding: 24px 26px 40px 26px; box-shadow: -6px 0 24px rgba(0,0,0,0.12);}
.panel h3{ margin:0 0 3px 0; font-size:18px;}
.panel .panel-sub{ color:var(--ink-soft); font-size:12.5px; margin-bottom:18px;}
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color: var(--ink);}
.field .hint{ font-size:11.5px; color:var(--ink-soft); font-weight:400; margin-top:4px;}
.field input[type=text], .field input[type=date], .field select, .field textarea{ width:100%; font-family:var(--font); font-size:13px; padding:8px 9px; border:1px solid var(--line); border-radius: var(--radius); background:#fff; color:var(--ink); }
.field textarea{ min-height:60px; resize:vertical; }
.row2{ display:flex; gap:10px; }
.row2 .field{ flex:1; }
.site-picker{ border:1px solid var(--line); border-radius:var(--radius); max-height:230px; overflow-y:auto; }
.site-picker-search{ padding:8px; border-bottom:1px solid var(--line); }
.site-picker-search input{ width:100%; }
.site-opt{ display:flex; align-items:center; gap:8px; padding:6px 10px; font-size:12.5px; border-bottom:1px solid #F0EFE9; cursor:pointer;}
.site-opt:hover{ background:#F7F6F1; }
.selected-count{ font-size:12px; color:var(--ink-soft); margin-top:6px;}
.panel-footer{ display:flex; gap:8px; margin-top:20px; }
.add-name-row{ display:flex; gap:6px; margin-top:6px; }
.add-name-row input{ flex:1; }
.brand-hint{ color:#1F6FB2; font-weight:600; }
.conflict-panel{ border-top:5px solid #D93025; }
.conflict-panel h3{ color:#B23B2E; }
.history-panel{ background:#F5F4EF; border-top:1px solid var(--line); padding:10px 14px; }
.history-row{ display:flex; gap:10px; align-items:baseline; padding:4px 0; font-size:12px; border-bottom:1px solid #EDEBE3; flex-wrap:wrap; }
.history-time{ color:var(--ink-soft); white-space:nowrap; font-weight:600; min-width:110px; }
.history-user{ color:var(--accent); font-weight:700; min-width:80px; }
.history-text{ flex:1; }
.ov-scope-label{ font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:10px; }
.summary-table td, .summary-table th{ white-space:normal; }
.summary-status-select{ display:block; margin:0 auto; padding:5px 10px; font-size:12px; border-radius:20px; border:1px solid transparent; font-weight:700; font-family:var(--font); text-align:center; text-align-last:center; }
.summary-tick-cell{ text-align:center; }
.summary-tick{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:4px; border:2px solid var(--line); color:#fff; font-weight:800; font-size:13px; }
.summary-tick.checked{ background:#2F7A4F; border-color:#2F7A4F; }
.summary-tick.notreceived{ background:#A6A6A6; border-color:#A6A6A6; }
.summary-row-done{ background:#F3F8F4; }
.summary-row-notreceived{ background:#EDEBE6; color:#8A8776; }
.summary-row-notreceived td{ color:#8A8776; }
.summary-region-tag{ color:var(--ink-soft); font-size:11px; }
.summary-campaign-link{ cursor:pointer; color:var(--accent); font-weight:600; }
.site-summary-list{ display:none; padding:6px 14px 10px 14px; }
.site-group.open .site-summary-list{ display:block; }
.site-summary-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:7px 0; border-top:1px solid #EDEBE3; font-size:12.5px; }
.site-summary-row:first-child{ border-top:none; }
.site-summary-period{ color:var(--ink-soft); white-space:nowrap; font-weight:600; }
.campaign-id-tag{ font-size:10.5px; font-weight:700; color:var(--ink-soft); background:#F0EEE6; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.site-summary-name-wrap{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.summary-campaign-link:hover{ text-decoration:underline; }
.toolbar input[type=month]{ font-family:var(--font); font-size:13px; padding:6px 9px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.field-divider{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:18px 0 10px 0; padding-top:14px; border-top:1px solid var(--line); }
.add-creative-block{ border:1px solid var(--line); border-radius:6px; padding:12px; margin-bottom:12px; background:#F9F8F4; }
.add-creative-block-head{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:700; margin-bottom:8px; color:var(--ink-soft); }
.site-picker-filters{ display:flex; gap:8px; margin-bottom:8px; }
.site-picker-filters select{ flex:1; }
#back-to-top{
  position:fixed; bottom:24px; right:24px; width:44px; height:44px; border-radius:50%;
  background:#0A0A0A; color:#fff; border:none; font-size:18px; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.25); opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:60;
}
#back-to-top.visible{ opacity:1; pointer-events:auto; }
#back-to-top:hover{ background:#1F4B4A; }
.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background: var(--ink); color:#fff; padding:9px 18px; border-radius:20px; font-size:13px; opacity:0; pointer-events:none; transition: opacity .2s ease; z-index:100; }
.toast.show{ opacity:1; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background: #C9C4B4; border-radius:6px;}
@media (max-width: 760px){
  #app{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; overflow-x:auto; padding:10px; }
  .brand{ display:none; }
  .sidebar-legend{ display:none; }
  .nav-item{ white-space:nowrap; }
  .main{ padding:16px; }
  .panel{ width:100%; }
}
#save-state{position:fixed;bottom:12px;left:260px;right:12px;z-index:9999;padding:12px 18px;background:#fff7dc;border:1px solid #ac8b39;border-radius:6px;box-shadow:0 2px 10px #0002;color:#3b321c;font-size:14px}
#save-state[hidden]{display:none}#save-state button{margin-left:12px;border:1px solid #ac8b39;background:#fff;padding:6px 10px;border-radius:4px;cursor:pointer}
@media(max-width:800px){#save-state{left:12px}.sidebar{position:relative;width:auto;height:auto}.main{margin-left:0;padding:18px}.topbar{flex-wrap:wrap;gap:12px}.toolbar{flex-wrap:wrap}.login-card{max-width:calc(100vw - 32px)}}
.topbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.nav-item{gap:10px}
@media(max-width:800px){.topbar-actions{justify-content:flex-start;max-width:100%}.topbar-actions .btn{white-space:nowrap}.main{width:100%;box-sizing:border-box}.sidebar{max-width:100%;box-sizing:border-box;flex-shrink:0}.toolbar input[type=text]{min-width:0;max-width:100%;box-sizing:border-box}}
.login-screen{flex:1;box-sizing:border-box;width:100%}.login-card .login-logo{display:block;background:#0a0a0a;border-radius:5px;padding:8px;box-sizing:border-box}
.import-dialog{position:fixed;inset:0 0 0 auto;margin:0;border:0;width:680px;max-width:100vw;height:100%;max-height:100%;box-sizing:border-box;padding:24px 26px 40px;background:#fff;color:var(--ink);box-shadow:-6px 0 24px #0002;overflow-y:auto}.import-dialog::backdrop{background:#14141266}.import-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.import-heading h3{font-size:18px;margin:0}.import-dialog .panel-sub{color:var(--ink-soft);font-size:13px;margin:12px 0 22px}.import-dialog h4{font-size:14px;margin:24px 0 10px}.import-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border-block:1px solid var(--line);padding:18px 0;margin:22px 0}.import-metrics strong{display:block;font-size:23px;font-variant-numeric:tabular-nums}.import-metrics span{font-size:12px;color:var(--ink-soft)}.import-error{padding:12px;color:#8a2424;background:#fff0ee;border-left:3px solid #b03a3a}.import-progress{color:var(--ink-soft)}.import-issues{padding-left:20px;line-height:1.6;font-size:13px}.import-issues li{margin-bottom:8px}.import-issue-error{color:#8a2424}.import-table-wrap{max-width:100%;overflow-x:auto}.import-table{border-collapse:collapse;width:100%;font-size:12.5px;text-align:left}.import-table th,.import-table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}.import-table th{color:var(--ink-soft);font-weight:600}.import-table small{display:block;color:var(--ink-soft);margin-top:4px}.import-acknowledge{display:flex;align-items:flex-start;gap:10px;margin-top:24px;font-size:13px}.import-acknowledge input{margin-top:3px}.import-dialog input[type=file]{display:block;max-width:100%;margin:10px 0}.import-complete{margin:24px 0}.import-dialog .panel-footer{flex-wrap:wrap}@media(max-width:600px){.import-dialog{padding:22px 18px 32px}.import-metrics{grid-template-columns:repeat(2,1fr)}}
.import-dialog [hidden]{display:none!important}