:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #18212f;
  --muted: #667085;
  --line: #e3e8ef;
  --line-strong: #d3dae5;
  --blue: #1769e0;
  --blue-soft: #eaf2ff;
  --blue-dark: #0f4fb4;
  --orange: #f47c20;
  --orange-soft: #fff1e7;
  --green: #16845b;
  --green-soft: #e8f7f0;
  --red: #c83737;
  --red-soft: #fdecec;
  --amber: #ad6b00;
  --amber-soft: #fff5df;
  --shadow: 0 8px 24px rgba(16, 24, 40, .055);
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.hidden { display:none !important; }

.login-shell { min-height:100vh; display:grid; place-items:center; padding:28px; background:linear-gradient(145deg,#f8fafc 0%,#f3f7fd 55%,#fff7f0 100%); }
.login-card { width:min(480px,100%); background:#fff; border:1px solid var(--line); border-radius:18px; padding:38px; box-shadow:0 22px 65px rgba(15,23,42,.10); position:relative; overflow:hidden; }
.login-card::before { content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg,var(--blue) 0 72%,var(--orange) 72%); }
.brand-mark { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:var(--blue); color:#fff; font-weight:800; letter-spacing:-.03em; box-shadow:inset -5px -5px 0 rgba(244,124,32,.18); }
.brand-mark.large { width:58px; height:58px; border-radius:14px; font-size:20px; margin-bottom:22px; }
.login-copy h1 { margin:7px 0 9px; font-size:31px; letter-spacing:-.035em; }
.login-copy p { color:var(--muted); line-height:1.55; margin:0 0 26px; }
.google-slot { min-height:44px; }
.dev-login { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); display:flex; gap:10px; }
.dev-login input { flex:1; }
.form-error { margin-top:14px; color:var(--red); font-size:13px; background:var(--red-soft); border:1px solid #f6cece; padding:10px 12px; border-radius:9px; }

.app-shell { min-height:100vh; display:grid; grid-template-columns:230px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; background:#111827; color:#d9e0ea; padding:18px 14px 14px; display:flex; flex-direction:column; z-index:5; }
.sidebar-brand { display:flex; align-items:center; gap:11px; padding:5px 7px 22px; }
.sidebar-brand strong { display:block; color:#fff; font-size:15px; }
.sidebar-brand small { display:block; font-size:12px; color:#8e9bae; margin-top:1px; }
.nav { display:flex; flex-direction:column; gap:3px; }
.nav button { width:100%; border:0; background:transparent; color:#aeb9c9; display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:8px; text-align:left; font-weight:600; font-size:13px; }
.nav button:hover { background:#192334; color:#fff; }
.nav button.active { background:#1d2c42; color:#fff; box-shadow:inset 3px 0 0 var(--blue); }
.nav .icon { width:18px; text-align:center; color:#7f91a8; }
.nav button.active .icon { color:#7db0ff; }
.nav-separator { height:1px; background:#263244; margin:10px 8px; }
.sidebar-foot { margin-top:auto; border-top:1px solid #263244; padding:14px 7px 2px; font-size:11px; color:#738198; display:flex; flex-direction:column; gap:8px; }
.sidebar-foot a:hover { color:#fff; }

.main { min-width:0; }
.topbar { min-height:79px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 28px; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:4; backdrop-filter:blur(10px); }
.topbar h1 { margin:2px 0 0; font-size:22px; letter-spacing:-.025em; }
.eyebrow { font-size:10px; font-weight:800; letter-spacing:.12em; color:var(--blue); }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.user-chip { display:flex; gap:9px; align-items:center; padding:4px 9px 4px 4px; }
.user-chip > span { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue-dark); font-weight:800; }
.user-chip strong { display:block; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.user-chip small { display:block; color:var(--muted); font-size:10px; text-transform:capitalize; }
.content { padding:25px 28px 45px; max-width:1600px; margin:0 auto; }

.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:17px; }
.toolbar-group { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.button { border:1px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--text); padding:9px 13px; font-weight:700; font-size:12px; transition:.15s ease; }
.button:hover { border-color:#b8c2d0; transform:translateY(-1px); }
.button.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.button.primary:hover { background:var(--blue-dark); }
.button.orange { background:var(--orange); color:#fff; border-color:var(--orange); }
.button.ghost { background:transparent; }
.button.small { padding:7px 10px; font-size:11px; }
.icon-button { width:36px; height:36px; border:1px solid var(--line); background:#fff; border-radius:8px; color:var(--muted); font-size:17px; }
.icon-button:hover { color:var(--blue); border-color:#bfd3f5; }
input,select,textarea { border:1px solid var(--line-strong); background:#fff; color:var(--text); border-radius:8px; padding:9px 10px; outline:none; }
input:focus,select:focus,textarea:focus { border-color:#8bb7f8; box-shadow:0 0 0 3px rgba(23,105,224,.09); }
textarea { min-height:90px; resize:vertical; }
.search { min-width:260px; }

.grid { display:grid; gap:14px; }
.kpi-grid { grid-template-columns:repeat(6,minmax(140px,1fr)); margin-bottom:18px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); min-height:114px; position:relative; overflow:hidden; }
.kpi::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--blue); opacity:.55; }
.kpi.orange::before { background:var(--orange); opacity:.85; }
.kpi.bad::before { background:var(--red); opacity:.8; }
.kpi .label { color:var(--muted); font-size:11px; font-weight:700; margin-bottom:13px; }
.kpi strong { display:block; font-size:24px; letter-spacing:-.035em; }
.kpi .sub { color:var(--muted); font-size:10px; margin-top:6px; }
.kpi .sub.good { color:var(--green); }
.kpi .sub.bad { color:var(--red); }

.two-col { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.7fr); gap:16px; align-items:start; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding:16px 18px; border-bottom:1px solid var(--line); }
.card-head h2 { margin:0; font-size:14px; }
.card-head p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.card-body { padding:18px; }
.section-title { display:flex; justify-content:space-between; align-items:end; gap:15px; margin:26px 0 12px; }
.section-title:first-child { margin-top:0; }
.section-title h2 { margin:0; font-size:15px; }
.section-title p { margin:3px 0 0; color:var(--muted); font-size:11px; }

.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { color:#7a8596; font-size:10px; text-transform:uppercase; letter-spacing:.05em; text-align:left; padding:10px 12px; background:#fafbfc; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:11px 12px; border-bottom:1px solid #edf0f4; vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#fbfcfe; }
.cell-title { font-weight:700; color:#202939; }
.cell-sub { color:var(--muted); font-size:10px; margin-top:2px; }
.numeric { text-align:right; font-variant-numeric:tabular-nums; }

/* Status tags are intentionally compact/squared rather than bubble-shaped. */
.pill { display:inline-flex; align-items:center; gap:5px; padding:3px 6px; border:1px solid #dfe5ec; border-radius:5px; font-size:10px; font-weight:800; background:#f7f8fa; color:#556172; text-transform:capitalize; white-space:nowrap; }
.pill.blue { background:#f5f8fd; border-color:#d9e6f8; color:var(--blue-dark); }
.pill.orange { background:#fff8f2; border-color:#f5d5bd; color:#b54f05; }
.pill.green { background:#f4faf7; border-color:#d5eadf; color:var(--green); }
.pill.red { background:#fff7f7; border-color:#f0d1d1; color:var(--red); }
.pill.amber { background:#fffaf1; border-color:#ecdfbf; color:var(--amber); }
.dot { width:5px; height:5px; border-radius:1px; background:currentColor; }
.meta-label { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.channel-mark { display:inline-flex; align-items:center; gap:7px; color:#344054; font-size:11px; font-weight:700; white-space:nowrap; }
.channel-mark::before { content:""; width:3px; height:13px; border-radius:1px; background:var(--blue); opacity:.9; }
.channel-mark[data-brand="AVE"]::before { background:var(--orange); }

.channel-grid { grid-template-columns:repeat(3,minmax(250px,1fr)); }
.channel-card { padding:17px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
.channel-card-top { display:flex; justify-content:space-between; gap:10px; align-items:start; }
.channel-icon { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-weight:800; background:var(--blue-soft); color:var(--blue-dark); }
.channel-card h3 { margin:11px 0 3px; font-size:14px; }
.channel-card p { color:var(--muted); font-size:11px; margin:0; }
.channel-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:16px; border-top:1px solid var(--line); padding-top:13px; }
.channel-stats span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.channel-stats strong { display:block; font-size:14px; margin-top:3px; }

.launch-board { display:grid; grid-template-columns:repeat(4,minmax(260px,1fr)); gap:13px; align-items:start; overflow:auto; padding-bottom:6px; }
.board-col { background:#edf1f6; border:1px solid #e1e6ed; border-radius:11px; min-height:380px; min-width:260px; padding:10px; }
.board-col-head { display:flex; align-items:center; justify-content:space-between; padding:3px 3px 10px; }
.board-col-head strong { font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.board-col-head span { color:var(--muted); font-size:10px; }
.launch-card { background:#fff; border:1px solid #dde3eb; border-radius:10px; padding:13px; margin-bottom:9px; box-shadow:0 3px 10px rgba(16,24,40,.035); cursor:pointer; position:relative; overflow:hidden; }
.launch-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#94a3b8; }
.launch-card[data-priority="medium"]::before { background:#d69b1f; }
.launch-card[data-priority="high"]::before { background:var(--orange); }
.launch-card[data-priority="critical"]::before { background:var(--red); }
.launch-card:hover { border-color:#b8c8df; transform:translateY(-1px); }
.launch-card-top { display:flex; justify-content:space-between; gap:8px; }
.launch-card h3 { margin:0; font-size:12px; line-height:1.35; }
.launch-card .brand { color:var(--muted); font-size:10px; margin-top:4px; }
.score { min-width:38px; height:34px; display:grid; place-items:center; background:#f2f4f7; border-radius:8px; font-size:13px; font-weight:800; }
.launch-meta { display:flex; gap:5px; flex-wrap:wrap; margin-top:10px; }
.launch-progress { margin-top:11px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:9px; }
.progress { height:5px; flex:1; border-radius:99px; background:#edf0f4; overflow:hidden; }
.progress span { display:block; height:100%; background:var(--blue); border-radius:99px; }

.agenda-group { margin-bottom:19px; }
.agenda-group h3 { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 8px; }
.agenda-row { display:grid; grid-template-columns:110px minmax(0,1fr) 140px 110px; gap:12px; align-items:center; padding:11px 13px; background:#fff; border:1px solid var(--line); margin-bottom:7px; border-radius:9px; }
.agenda-row.overdue { border-left:3px solid var(--red); }
.agenda-row.today { border-left:3px solid var(--orange); }
.agenda-title strong { display:block; font-size:12px; }
.agenda-title span { display:block; color:var(--muted); font-size:10px; margin-top:2px; }

.health-stack { display:grid; gap:10px; }
.health-item { border:1px solid var(--line); border-radius:9px; padding:12px 13px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.health-item strong { font-size:18px; }
.health-item span { color:var(--muted); font-size:10px; }
.health-item.alert { background:#fffaf6; border-color:#f4d2b8; }
.health-item.bad { background:#fff8f8; border-color:#f1cccc; }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.form-grid .full { grid-column:1/-1; }
.field label { display:block; color:var(--muted); font-size:10px; font-weight:700; margin:0 0 5px; }
.field input,.field select,.field textarea { width:100%; }
.form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; padding-top:15px; border-top:1px solid var(--line); }
.check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.check { display:flex; gap:8px; align-items:center; border:1px solid var(--line); padding:9px 10px; border-radius:8px; font-size:11px; }
.check input { width:auto; }

.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.44); display:grid; place-items:center; z-index:30; padding:25px; backdrop-filter:blur(3px); }
.modal-panel { width:min(900px,100%); max-height:92vh; overflow:auto; background:#fff; border-radius:14px; box-shadow:0 28px 80px rgba(15,23,42,.25); border:1px solid rgba(255,255,255,.3); }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding:18px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:2; }
.modal-head h2 { margin:0; font-size:17px; }
.modal-head p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.modal-body { padding:20px; }
.modal-close { border:0; background:#f2f4f7; width:30px; height:30px; border-radius:8px; font-size:16px; }
.task-list { display:grid; gap:7px; }
.task-row { display:grid; grid-template-columns:28px minmax(0,1fr) 110px; align-items:center; gap:9px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; }
.task-row.done { opacity:.6; }
.task-row.done .task-name { text-decoration:line-through; }
.task-name { font-size:11px; font-weight:700; }
.task-due { color:var(--muted); font-size:9px; text-align:right; }

.admin-tabs { display:flex; gap:5px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.admin-tabs button { border:0; background:transparent; padding:10px 12px; color:var(--muted); font-size:11px; font-weight:800; border-bottom:2px solid transparent; }
.admin-tabs button.active { color:var(--blue); border-color:var(--blue); }
.integration-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.integration { border:1px solid var(--line); border-radius:10px; padding:14px; }
.integration h3 { margin:0 0 8px; font-size:13px; }
.integration dl { display:grid; grid-template-columns:120px 1fr; gap:6px 10px; margin:0; font-size:10px; }
.integration dt { color:var(--muted); }
.integration dd { margin:0; overflow-wrap:anywhere; }

.empty { padding:35px 20px; text-align:center; color:var(--muted); font-size:12px; }
.toast { position:fixed; right:20px; bottom:20px; z-index:50; background:#172033; color:#fff; padding:11px 14px; border-radius:9px; font-size:11px; box-shadow:0 12px 35px rgba(15,23,42,.22); }
.muted { color:var(--muted); }
.text-good { color:var(--green); }
.text-bad { color:var(--red); }
.right { text-align:right; }

@media (max-width:1280px) {
  .kpi-grid { grid-template-columns:repeat(3,1fr); }
  .channel-grid { grid-template-columns:repeat(2,1fr); }
  .launch-board { grid-template-columns:repeat(4,270px); }
}
@media (max-width:900px) {
  .app-shell { grid-template-columns:72px minmax(0,1fr); }
  .sidebar-brand > div:last-child,.nav button span:last-child,.sidebar-foot a { display:none; }
  .sidebar-brand { justify-content:center; padding-left:0; padding-right:0; }
  .nav button { justify-content:center; }
  .nav .icon { width:auto; }
  .sidebar-foot { align-items:center; }
  .topbar { padding:14px 18px; }
  .content { padding:19px 18px 35px; }
  .two-col { grid-template-columns:1fr; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .agenda-row { grid-template-columns:90px 1fr; }
  .agenda-row > :nth-child(3),.agenda-row > :nth-child(4) { display:none; }
}
@media (max-width:600px) {
  .user-chip div,.topbar .ghost { display:none; }
  .kpi-grid,.channel-grid,.form-grid,.integration-list { grid-template-columns:1fr; }
  .content { padding:15px 12px 30px; }
  .topbar { padding:12px; }
  .modal-backdrop { padding:8px; }
}