:root {
  --maroon: #6d213c;
  --maroon-dark: #4d172a;
  --bronze: #b08a3c;
  --ink: #20242a;
  --muted: #68707b;
  --line: #dfe3e8;
  --panel: #ffffff;
  --bg: #f5f6f8;
  --warn: #fff4dc;
  --warn-border: #e2b55f;
  --good: #edf7f0;
  --shadow: 0 8px 24px rgba(25, 31, 38, .07);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.topbar { background: linear-gradient(115deg, var(--maroon-dark), var(--maroon)); color: white; padding: 22px max(24px, calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; box-shadow: var(--shadow); }
.topbar h1 { margin: 1px 0 0; font-size: 26px; }
.eyebrow { color: #e7cc91; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.authbar { display:flex; align-items:center; gap:10px; }
main { max-width: 1180px; margin: 24px auto 60px; padding: 0 22px; }
.panel { background: var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow); }
.login-panel { padding: 28px; max-width: 620px; margin: 50px auto; text-align:center; }
.toolbar { padding: 18px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.toolbar-actions { display:flex; flex-wrap:wrap; gap:9px; }
.button { border:0; border-radius:9px; padding:10px 14px; font-weight:700; cursor:pointer; font-size:14px; }
.button:disabled { opacity:.55; cursor:not-allowed; }
.button.primary { background: var(--bronze); color:#1d1d1d; }
.button.secondary { background: var(--maroon); color:white; }
.button.ghost { background:#eef0f3; color:var(--ink); }

.settings-panel { margin-top:16px; padding:18px 20px; display:grid; grid-template-columns:minmax(220px,.8fr) minmax(360px,1.2fr); gap:24px; align-items:start; }
.settings-copy { padding-top:3px; }
.recipient-editor { display:grid; gap:10px; }
.recipient-add { display:grid; grid-template-columns:1fr auto; gap:8px; }
.recipient-add input { width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 11px; font:inherit; color:var(--ink); background:white; }
.recipient-list { display:grid; gap:7px; }
.recipient-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fafbfc; font-size:14px; }
.recipient-remove { border:0; background:transparent; color:var(--maroon); font-weight:800; cursor:pointer; padding:4px 2px; }
.recipient-save-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; }
.settings-status.error { color:#8c1c1c; }

.date-nav { margin-top:16px; padding:18px 20px; display:grid; grid-template-columns: 1fr auto; gap:22px; align-items:end; }
.section-label { font-size:12px; text-transform:uppercase; color:var(--muted); font-weight:800; letter-spacing:.08em; margin-bottom:9px; }
.date-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.date-button { border:1px solid var(--line); background:white; border-radius:8px; padding:8px 11px; cursor:pointer; font-weight:700; }
.date-button.active { background:var(--maroon); color:white; border-color:var(--maroon); }
.older-picker { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
select { min-width:180px; border:1px solid var(--line); border-radius:8px; padding:9px 10px; background:white; color:var(--ink); }
.status { margin:16px 0; padding:12px 15px; border-radius:9px; background:var(--good); border:1px solid #bfdfc9; }
.status.error { background:#fff0f0; border-color:#e5b3b3; color:#8c1c1c; }
.report-header { margin-top:18px; padding:22px; }
.report-title-row { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.report-header h2 { margin:0 0 5px; font-size:25px; color:var(--maroon-dark); }
.pill { display:inline-block; padding:5px 9px; border-radius:999px; background:#efe8eb; color:var(--maroon-dark); font-size:12px; font-weight:800; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; }
.metric { background:white; border:1px solid var(--line); border-radius:12px; padding:16px; }
.metric .value { font-size:25px; font-weight:800; color:var(--maroon-dark); }
.metric .label { margin-top:4px; color:var(--muted); font-size:12px; font-weight:700; }
.section { margin-top:16px; padding:20px; }
.section h3 { margin:0 0 14px; color:var(--maroon-dark); font-size:18px; }
.warning { background:var(--warn); border-color:var(--warn-border); }
.tech-grid { display:grid; gap:10px; }
.tech-item { padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:white; }
.tech-top { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.tech-name { font-weight:800; text-transform:capitalize; }
.tech-count { font-weight:800; color:var(--maroon); }
.muted { color:var(--muted); }
.small { font-size:12px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:9px 8px; border-bottom:1px solid var(--line); text-align:right; font-size:14px; }
th:first-child, td:first-child { text-align:left; }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.comment-card { border:1px solid var(--line); border-radius:11px; padding:15px; margin:11px 0; background:white; }
.comment-head { display:flex; justify-content:space-between; gap:12px; }
.comment-video { font-weight:800; }
.priority { text-transform:uppercase; font-size:11px; font-weight:900; color:var(--maroon); }
.comment-text { margin:10px 0; line-height:1.5; }
.reply-box { margin-top:9px; padding:10px 12px; border-left:3px solid var(--bronze); background:#faf8f2; }
a { color:var(--maroon); font-weight:700; }
ul { margin:8px 0; padding-left:22px; }
.empty { padding:16px; color:var(--muted); text-align:center; }
.hidden { display:none !important; }
footer { max-width:1180px; margin:0 auto 35px; padding:0 22px; color:var(--muted); font-size:12px; }
@media (max-width: 850px) {
  .topbar, .toolbar { align-items:flex-start; flex-direction:column; }
  .date-nav, .settings-panel { grid-template-columns:1fr; }
  .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .authbar { flex-wrap:wrap; }
}
@media (max-width: 520px) { .metrics-grid { grid-template-columns:1fr; } .recipient-add { grid-template-columns:1fr; } .recipient-save-row { align-items:stretch; flex-direction:column; } }

/* V3.2 editable delivery schedule */
.delivery-editor { display:grid; gap:16px; }
.settings-subsection { display:grid; gap:9px; }
.settings-subsection + .settings-subsection { border-top:1px solid var(--line); padding-top:14px; }
.settings-heading { font-weight:800; color:var(--maroon-dark); font-size:14px; }
.schedule-controls { display:grid; grid-template-columns:minmax(220px,1fr) minmax(220px,1fr); gap:12px; align-items:end; }
.field-label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.field-label input { width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 11px; font:inherit; color:var(--ink); background:white; }
.time-add { display:grid; grid-template-columns:minmax(120px,1fr) auto; gap:8px; }
.send-time-list { display:flex; flex-wrap:wrap; gap:8px; min-height:32px; align-items:center; }
.send-time-chip { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:7px 10px 7px 12px; background:#fafbfc; font-size:13px; font-weight:700; }
.send-time-remove { border:0; background:transparent; color:var(--maroon); font-weight:900; cursor:pointer; padding:0 2px; font-size:16px; line-height:1; }
@media (max-width: 700px) { .schedule-controls { grid-template-columns:1fr; } .time-add { grid-template-columns:1fr auto; } }
.report-run-picker { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:12px; }
.report-run-button { border:1px solid var(--line); background:white; color:var(--ink); border-radius:999px; padding:6px 9px; font-size:11px; font-weight:800; cursor:pointer; }
.report-run-button.active { background:var(--maroon); color:white; border-color:var(--maroon); }
