@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Cormorant+Garamond:wght@500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');
:root{
  --bg:#FDF6F3;
  --bg2:#FFFFFF;
  --bg3:#FAF0EC;
  --bg4:#F2E4DE;
  --border:rgba(200,133,74,0.12);
  --border2:rgba(200,133,74,0.22);
  --text:#1A1A1A;
  --text2:#6B4F44;
  --text3:#A8897E;
  --accent:#C8504A;
  --accent2:#E07060;
  --green:#2E8B57;
  --red:#C0392B;
  --amber:#C87800;
  --teal:#1A7A6E;
  --purple:#7B4FA6;
  --blush:#F5E8E4;
  --rose:#E8A09A;
  --coral:#C8504A;
  --r:14px;--r2:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:14px;line-height:1.5;min-height:100vh;}
::-webkit-scrollbar{width:4px;height:4px;}::-webkit-scrollbar-thumb{background:var(--rose);border-radius:4px;opacity:0.4;}

/* ── LAYOUT ── */
.app{display:flex;min-height:100vh;}
.sidebar{width:230px;flex-shrink:0;background:var(--accent);border-right:none;position:fixed;top:0;left:0;bottom:0;z-index:100;display:flex;flex-direction:column;overflow-y:auto;box-shadow:4px 0 24px rgba(200,80,74,0.15);}
.main{margin-left:230px;flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{background:rgba(253,246,243,0.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:90;gap:12px;flex-wrap:wrap;}
.content{padding:24px;flex:1;}

/* ── SIDEBAR ── */
.logo{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,0.15);}
.logo-name{font-size:20px;font-weight:800;letter-spacing:-.5px;color:#fff;font-family:'Cormorant Garamond',serif;}
.logo-name span{color:rgba(255,255,255,0.7);}
.logo-tag{font-size:9px;font-family:'DM Mono',monospace;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:.16em;margin-top:3px;}
.nav{padding:10px 10px;flex:1;}
.nav-section{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,0.45);font-family:'DM Mono',monospace;padding:12px 10px 5px;}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;cursor:pointer;color:rgba(255,255,255,0.75);font-size:13px;font-weight:500;transition:all .15s;margin-bottom:2px;border:none;background:transparent;width:100%;text-align:left;font-family:'Outfit',sans-serif;}
.nav-item:hover{background:rgba(255,255,255,0.12);color:#fff;}
.nav-item.active{background:rgba(255,255,255,0.22);color:#fff;font-weight:600;}
.nav-icon{width:18px;text-align:center;font-size:14px;}
.sidebar-footer{padding:14px;border-top:1px solid rgba(255,255,255,0.15);display:flex;flex-direction:column;gap:10px;}
.sf-label{font-size:10px;font-family:'DM Mono',monospace;color:rgba(255,255,255,0.5);margin-bottom:4px;}
.mode-toggle{display:flex;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:9px;overflow:hidden;}
.toggle-btn{padding:7px 0;cursor:pointer;font-size:11px;font-weight:700;font-family:'Outfit',sans-serif;letter-spacing:.06em;transition:all .2s;color:rgba(255,255,255,0.6);background:transparent;border:none;flex:1;text-align:center;}
.toggle-btn.active{background:#fff;color:var(--accent);}
.toggle-btn.active.net{background:#fff;color:var(--green);}

/* ── TOPBAR ── */
.topbar-left{display:flex;align-items:center;gap:12px;}
.topbar-title{font-size:15px;font-weight:700;color:var(--text);font-family:'Cormorant Garamond',serif;font-size:17px;letter-spacing:-.2px;}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.data-pill{background:var(--blush);border:1px solid var(--border);border-radius:8px;padding:4px 11px;font-size:10px;font-family:'DM Mono',monospace;color:var(--text3);}
.mode-lbl{font-size:10px;font-family:'DM Mono',monospace;padding:4px 10px;border-radius:6px;font-weight:600;}
.mode-lbl.total{background:rgba(200,80,74,.1);color:var(--accent);}
.mode-lbl.net{background:rgba(46,139,87,.1);color:var(--green);}

/* ── DATE FILTER BAR ── */
.date-bar{background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;}
.date-bar label{font-size:11px;font-family:'DM Mono',monospace;color:var(--text3);}
.date-input{background:var(--blush);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-family:'DM Mono',monospace;font-size:11px;color:var(--text);outline:none;cursor:pointer;}
.date-input:focus{border-color:var(--accent);}
.date-btn{padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:var(--blush);color:var(--text2);font-size:11px;font-family:'Outfit',sans-serif;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;}
.date-btn:hover{border-color:var(--accent);color:var(--accent);}
.date-btn.apply{background:var(--accent);border-color:var(--accent);color:#fff;}
.date-count{font-size:11px;font-family:'DM Mono',monospace;color:var(--text3);}

@media(max-width:860px){
  .date-bar{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:10px 14px;
    gap:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .date-bar::-webkit-scrollbar{display:none;}
  .date-bar label{white-space:nowrap;font-size:10px;}
  .date-input{font-size:11px;padding:7px 8px;flex-shrink:0;min-width:0;width:auto;}
  .date-btn{padding:7px 12px;font-size:11px;flex-shrink:0;}
  .date-count{flex-shrink:0;}
}

/* ── UPLOAD PANEL ── */
.upload-screen{display:none;position:fixed;inset:0;z-index:300;background:var(--bg);align-items:center;justify-content:center;padding:24px;}
.upload-screen.visible{display:flex;}
.upload-box{background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:44px;max-width:520px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(200,80,74,0.1);}
.upload-icon{font-size:48px;margin-bottom:16px;}
.upload-title{font-size:24px;font-weight:700;margin-bottom:8px;letter-spacing:-.5px;color:var(--text);font-family:'Cormorant Garamond',serif;}
.upload-sub{font-size:13px;color:var(--text2);margin-bottom:28px;line-height:1.6;}
.upload-drop{border:2px dashed var(--border2);border-radius:14px;padding:32px 20px;margin-bottom:20px;cursor:pointer;transition:all .2s;position:relative;background:var(--blush);}
.upload-drop:hover,.upload-drop.dragover{border-color:var(--accent);background:rgba(200,80,74,.05);}
.upload-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-drop-icon{font-size:32px;margin-bottom:10px;}
.upload-drop-text{font-size:13px;color:var(--text2);}
.upload-drop-hint{font-size:11px;color:var(--text3);margin-top:4px;font-family:'DM Mono',monospace;}
.upload-progress{display:none;margin-top:16px;}
.upload-progress-bar{height:4px;background:var(--bg4);border-radius:2px;overflow:hidden;margin-bottom:8px;}
.upload-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s;}
.upload-progress-text{font-size:12px;color:var(--text2);font-family:'DM Mono',monospace;}
.upload-skip{font-size:12px;color:var(--text3);cursor:pointer;text-decoration:underline;display:block;margin-top:16px;}
.upload-skip:hover{color:var(--accent);}
.upload-error{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.25);border-radius:8px;padding:12px;font-size:12px;color:var(--red);margin-top:12px;display:none;text-align:left;}

/* ── UPLOAD BUTTON (topbar) ── */
.upload-btn{display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:8px;border:1px solid var(--border2);background:var(--blush);color:var(--text2);font-size:11px;font-family:'Outfit',sans-serif;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;}
.upload-btn:hover{border-color:var(--accent);color:var(--accent);}
.upload-btn.has-data{border-color:rgba(46,139,87,.3);color:var(--green);}
.wipe-btn{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;border:1px solid rgba(192,57,43,.2);background:rgba(192,57,43,.06);color:var(--red);font-size:11px;font-family:'Outfit',sans-serif;font-weight:600;cursor:pointer;transition:all .15s;width:100%;justify-content:center;opacity:.75;}
.wipe-btn:hover{opacity:1;border-color:var(--red);}
/* WIPE MODAL */
.wipe-modal{display:none;position:fixed;inset:0;z-index:500;background:rgba(253,246,243,.85);align-items:center;justify-content:center;padding:24px;}
.wipe-modal.visible{display:flex;}
.wipe-box{background:var(--bg2);border:1px solid rgba(192,57,43,.25);border-radius:20px;padding:36px;max-width:380px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(200,80,74,0.12);}
.wipe-icon{font-size:40px;margin-bottom:14px;}
.wipe-title{font-size:18px;font-weight:700;color:var(--red);margin-bottom:8px;font-family:'Cormorant Garamond',serif;}
.wipe-sub{font-size:13px;color:var(--text2);margin-bottom:24px;line-height:1.6;}
.wipe-actions{display:flex;gap:10px;justify-content:center;}
.wipe-confirm{background:var(--red);color:#fff;border:none;border-radius:10px;padding:11px 24px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;cursor:pointer;}
.wipe-cancel{background:var(--blush);color:var(--text2);border:1px solid var(--border);border-radius:10px;padding:11px 24px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;cursor:pointer;}

/* ── MERGE BADGE ── */
.merge-info{background:rgba(62,207,142,.08);border:1px solid rgba(62,207,142,.2);border-radius:6px;padding:8px 14px;font-size:11px;font-family:'DM Mono',monospace;color:var(--green);display:none;}

/* ── PAGES ── */
.page{display:none;animation:fadeIn .2s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:translateY(0);}}

/* ── EMPTY STATE ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:40px;}
.empty-state-icon{font-size:56px;margin-bottom:20px;opacity:.4;}
.empty-state-title{font-size:20px;font-weight:700;margin-bottom:8px;color:var(--text2);}
.empty-state-sub{font-size:13px;color:var(--text3);margin-bottom:24px;line-height:1.6;}
.empty-cta{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s;}
.empty-cta:hover{opacity:.85;}

/* ── SKELETON LOADER ANIMATION ── */
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ── KPI CARDS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(200,80,74,0.06);}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.kpi.blue::before{background:linear-gradient(90deg,var(--accent),var(--rose));}
.kpi.green::before{background:linear-gradient(90deg,var(--green),#5EC88A);}
.kpi.red::before{background:linear-gradient(90deg,var(--red),#E06060);}
.kpi.amber::before{background:linear-gradient(90deg,var(--amber),#E0A840);}
.kpi.purple::before{background:linear-gradient(90deg,var(--purple),#B07ADA);}
.kpi.teal::before{background:linear-gradient(90deg,var(--teal),#3ABAB0);}
.kpi-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);font-family:'DM Mono',monospace;margin-bottom:8px;}
.kpi-val{font-size:26px;font-weight:700;letter-spacing:-1px;line-height:1;color:var(--text);}
.kpi-val.mono{font-family:'DM Mono',monospace;font-size:21px;}
.kpi-sub{font-size:11px;color:var(--text3);margin-top:5px;}
.kpi-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:600;font-family:'DM Mono',monospace;padding:2px 8px;border-radius:5px;margin-top:7px;}
.bg{background:rgba(46,139,87,.1);color:var(--green);}
.br{background:rgba(192,57,43,.1);color:var(--red);}
.ba{background:rgba(200,120,0,.1);color:var(--amber);}
.bb{background:rgba(200,80,74,.1);color:var(--accent);}
.bp{background:rgba(123,79,166,.1);color:var(--purple);}

/* ── CARD ── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:16px;box-shadow:0 2px 10px rgba(200,80,74,0.04);}
.card:last-child{margin-bottom:0;}
.card-header{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.card-title{font-size:13px;font-weight:700;color:var(--text);}
.card-sub{font-size:10px;font-family:'DM Mono',monospace;color:var(--text3);margin-top:2px;}
.card-tag{font-size:10px;font-family:'DM Mono',monospace;padding:2px 9px;border-radius:5px;background:rgba(200,80,74,.09);color:var(--accent);flex-shrink:0;font-weight:600;}

/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px;}
.g6535{display:grid;grid-template-columns:65fr 35fr;gap:16px;margin-bottom:16px;}
.g6040{display:grid;grid-template-columns:60fr 40fr;gap:16px;margin-bottom:16px;}

/* ── FUNNEL ── */
.funnel{padding:16px 18px;}
.f-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.f-lbl{width:148px;flex-shrink:0;font-size:11px;color:var(--text2);}
.f-track{flex:1;height:22px;background:var(--blush);border-radius:5px;overflow:hidden;}
.f-fill{height:100%;border-radius:5px;display:flex;align-items:center;padding-left:7px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.f-fill span{font-size:10px;font-family:'DM Mono',monospace;color:rgba(255,255,255,.9);font-weight:500;}
.f-n{width:44px;text-align:right;font-size:11px;font-family:'DM Mono',monospace;color:var(--text2);}
.f-p{width:36px;text-align:right;font-size:10px;font-family:'DM Mono',monospace;color:var(--text3);}
.f-div{border:none;border-top:1px dashed var(--border);margin:7px 0;}

/* ── PRODUCT TABLE ── */
.pt-head,.pt-row{display:grid;gap:6px;padding:8px 16px;align-items:center;}
.pt-6{grid-template-columns:20px 1fr 72px 68px 68px 60px;}
.pt-head{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:'DM Mono',monospace;border-bottom:1px solid var(--border);}
.pt-row{border-bottom:1px solid var(--border);transition:background .12s;}
.pt-row:last-child{border-bottom:none;}
.pt-row:hover{background:var(--blush);}
.pt-rank{font-size:10px;font-family:'DM Mono',monospace;color:var(--text3);}
.pt-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.pt-sku{font-size:9px;color:var(--text3);font-family:'DM Mono',monospace;margin-top:1px;}
.pt-cell{font-size:11px;font-family:'DM Mono',monospace;color:var(--text2);text-align:right;}
.pt-units-split{display:block;font-size:8.5px;color:var(--text3);font-family:'DM Mono',monospace;margin-top:1px;white-space:nowrap;}
.pt-bar{height:3px;background:var(--bg4);border-radius:2px;margin-top:3px;overflow:hidden;}
.pt-bar-fill{height:100%;border-radius:2px;}

/* ── HBAR ── */
.hb-wrap{padding:14px 18px;}
.hb-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.hb-lbl{width:140px;flex-shrink:0;font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hb-lbl.w180{width:180px;}
.hb-track{flex:1;height:7px;background:var(--blush);border-radius:4px;overflow:hidden;}
.hb-fill{height:100%;border-radius:4px;}
.hb-val{width:50px;text-align:right;font-size:10px;font-family:'DM Mono',monospace;color:var(--text3);}

/* ── DONUT ── */
.donut-wrap{display:flex;flex-direction:column;align-items:center;padding:18px;gap:12px;}
.dl-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);}
.dl-row:last-child{border-bottom:none;}
.dl-left{display:flex;align-items:center;gap:8px;}
.dl-dot{width:8px;height:8px;border-radius:50%;}
.dl-lbl{font-size:12px;color:var(--text2);}
.dl-val{font-size:12px;font-family:'DM Mono',monospace;color:var(--text);}
.dl-pct{font-size:10px;font-family:'DM Mono',monospace;color:var(--text3);margin-left:4px;}

/* ── STAT 2 ── */
.stat-2{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border);}
.stat-cell{padding:12px 16px;border-right:1px solid var(--border);}
.stat-cell:last-child{border-right:none;}
.stat-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-family:'DM Mono',monospace;color:var(--text3);margin-bottom:3px;}
.stat-val{font-size:18px;font-weight:700;color:var(--text);}
.stat-sub{font-size:10px;color:var(--text3);margin-top:2px;}

/* ── COUPON ROW ── */
.c-row{display:flex;align-items:center;gap:10px;padding:8px 18px;border-bottom:1px solid var(--border);}
.c-row:last-child{border-bottom:none;}
.c-code{font-family:'DM Mono',monospace;color:var(--accent);font-size:12px;font-weight:500;width:110px;flex-shrink:0;}
.c-bar-wrap{flex:1;height:5px;background:var(--blush);border-radius:3px;overflow:hidden;}
.c-bar{height:100%;border-radius:3px;background:var(--purple);}
.c-n{font-size:11px;font-family:'DM Mono',monospace;color:var(--text3);width:50px;text-align:right;}

/* ── REGION TABLE ── */
.reg-row{display:grid;grid-template-columns:1fr 56px 96px 48px 60px;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);align-items:center;}
.reg-row:last-child{border-bottom:none;}
.reg-head{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:'DM Mono',monospace;}
.reg-name{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.reg-n{font-size:11px;font-family:'DM Mono',monospace;color:var(--text2);text-align:right;}
.reg-rev{font-size:11px;font-family:'DM Mono',monospace;color:var(--text2);text-align:right;}
.reg-pct{font-size:10px;font-family:'DM Mono',monospace;color:var(--text3);text-align:right;}
.reg-deliv{font-size:11px;font-family:'DM Mono',monospace;text-align:right;font-weight:600;}

/* ── INSIGHT ── */
.insight{border-radius:var(--r2);padding:12px 16px;margin-bottom:14px;font-size:12px;color:var(--text2);line-height:1.65;}
.insight.blue{background:rgba(200,80,74,.05);border:1px solid rgba(200,80,74,.18);}
.insight.blue strong{color:var(--accent);}
.insight.warn{background:rgba(200,120,0,.05);border:1px solid rgba(200,120,0,.18);}
.insight.warn strong{color:var(--amber);}
.insight.ok{background:rgba(46,139,87,.05);border:1px solid rgba(46,139,87,.18);}
.insight.ok strong{color:var(--green);}
.ins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px;}
.ins-card{background:var(--blush);border:1px solid var(--border);border-radius:var(--r2);padding:13px 15px;}
.ins-ico{font-size:17px;margin-bottom:5px;}
.ins-t{font-size:12px;font-weight:700;margin-bottom:3px;color:var(--text);}
.ins-b{font-size:11px;color:var(--text2);line-height:1.6;}

/* ── RECOVERY GRID ── */
.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);}
.rec-cell{padding:16px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);}
.rec-cell.no-right{border-right:none;}
.rec-cell.no-bottom{border-bottom:none;}
.rc-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-family:'DM Mono',monospace;color:var(--text3);margin-bottom:4px;}
.rc-val{font-size:20px;font-weight:800;color:var(--text);}
.rc-sub{font-size:10px;margin-top:2px;color:var(--text3);}
.rec-section-label{grid-column:1/-1;font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-family:'DM Mono',monospace;font-weight:700;color:var(--text3);padding:10px 18px 6px;border-bottom:1px solid var(--border);background:var(--bg2);}
.rec-section-label:first-child{padding-top:6px;}

/* ── LOSS BREAKDOWN CARDS ── */
.lb-card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:18px 16px;display:flex;flex-direction:column;gap:12px;min-width:0;}
.lb-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.lb-cat-label{font-size:11px;font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-weight:700;}
.lb-pct-badge{font-size:9px;color:var(--text3);background:var(--bg4);padding:3px 8px;border-radius:20px;white-space:nowrap;border:1px solid var(--border);}
.lb-section{display:grid;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.lb-section:last-of-type{border-bottom:none;padding-bottom:0;}
.lb-orders-section{grid-template-columns:1fr 1fr;}
.lb-customers-section{grid-template-columns:1fr 1fr 1fr;}
.lb-revenue-section{grid-template-columns:1fr 1fr;}
.lb-metric{display:flex;flex-direction:column;gap:3px;}
.lb-metric-val{font-size:20px;font-weight:800;color:var(--text);line-height:1;}
.lb-metric-sm-val{font-size:15px;}
.lb-metric-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);font-family:'DM Mono',monospace;}
.lb-recovery-bar-wrap{position:relative;background:var(--blush);border-radius:4px;height:4px;overflow:hidden;margin-top:2px;}
.lb-recovery-bar{height:100%;background:var(--green);border-radius:4px;transition:width .4s;}
.lb-recovery-rate{display:none;} /* shown as bar only */

/* ── SHIPPING SEGMENTS ── */
.ship-segs{display:flex;flex-direction:column;gap:9px;padding:16px 18px;}
.seg{background:var(--blush);border-radius:10px;padding:12px 14px;}
.seg-title{font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;font-family:'DM Mono',monospace;}
.seg-nums{display:flex;gap:14px;flex-wrap:wrap;}
.sn{display:flex;flex-direction:column;}
.sn-val{font-size:17px;font-weight:800;color:var(--text);}
.sn-lbl{font-size:10px;color:var(--text3);margin-top:1px;}

/* ── SEARCH ── */
.s-wrap{padding:10px 16px 6px;}
.s-input{width:100%;background:var(--blush);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-family:'Outfit',sans-serif;font-size:12px;color:var(--text);outline:none;}
.s-input:focus{border-color:var(--accent);}
.s-input::placeholder{color:var(--text3);}

/* ── SORT CHIPS ── */
.chip{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:20px;font-size:10px;font-family:'DM Mono',monospace;font-weight:500;border:none;cursor:pointer;transition:opacity .15s;}
.chip:hover{opacity:.8;}
.chip-blue{background:rgba(200,80,74,.1);color:var(--accent);}
.chip-amber{background:rgba(200,120,0,.1);color:var(--amber);}
.chip-purple{background:rgba(123,79,166,.1);color:var(--purple);}

/* ── PH ── */
.ph{margin-bottom:20px;}
.ph h1{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--text);font-family:'Cormorant Garamond',serif;}
.ph p{font-size:11px;color:var(--text3);margin-top:3px;font-family:'DM Mono',monospace;}

/* ── ACTION ITEMS ── */
.action-item{background:var(--blush);border-radius:10px;padding:12px 14px;border-left:3px solid;}
.action-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-family:'DM Mono',monospace;margin-bottom:3px;}
.action-txt{font-size:12px;color:var(--text2);}

/* ── MOBILE TOP BAR ── */
.mob-top{display:none;position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(253,246,243,0.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:10px 14px;align-items:center;justify-content:space-between;}
.mob-logo{font-size:17px;font-weight:800;font-family:'Cormorant Garamond',serif;color:var(--text);}
.mob-logo span{color:var(--accent);}
.mob-logo-sub{font-size:9px;font-family:'DM Mono',monospace;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-top:1px;}
.mob-toggle{display:flex;background:var(--blush);border:1px solid var(--border2);border-radius:9px;overflow:hidden;}
.mob-toggle .toggle-btn{padding:6px 14px;font-size:11px;color:var(--text3);}
.mob-toggle .toggle-btn.active{background:var(--accent);color:#fff;}

/* ── MOBILE NAV BAR ── */
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(253,246,243,0.98);backdrop-filter:blur(16px);border-top:1px solid var(--border);flex-direction:column;}
.mob-nav-lbl{font-size:9px;font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);padding:6px 14px 2px;display:flex;align-items:center;justify-content:space-between;}
.mob-nav-upload{font-size:10px;font-family:'DM Mono',monospace;color:var(--accent);cursor:pointer;background:none;border:none;padding:0;}
.mob-nav-scroll{display:flex;overflow-x:auto;gap:7px;padding:5px 12px calc(10px + env(safe-area-inset-bottom));scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.mob-nav-scroll::-webkit-scrollbar{display:none;}
.mnav{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:25px;border:1px solid var(--border);background:var(--blush);color:var(--text2);font-size:12px;font-weight:600;font-family:'Outfit',sans-serif;white-space:nowrap;cursor:pointer;transition:all .18s;flex-shrink:0;}
.mnav.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.mnav-ico{font-size:13px;line-height:1;}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .sidebar{display:none;}
  .main{margin-left:0;padding-top:60px;padding-bottom:100px;}
  .topbar,.date-bar{display:none;}
  .mob-top{display:flex;}
  .mob-nav{display:flex;}
  .g2,.g3,.g6535,.g6040{grid-template-columns:1fr;}
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .content{padding:10px;}
  .ph{padding:8px 0 6px;margin-bottom:10px;}
  .ph h1{font-size:17px;letter-spacing:-.4px;}
  .ph p{font-size:10px;}
  .card{border-radius:10px;margin-bottom:10px;}
  .card-header{padding:10px 12px 8px;}
  .card-title{font-size:12px;}
  .kpi{padding:12px 14px;}
  .kpi-val{font-size:20px;}
  .kpi-lbl{font-size:9px;}
  /* In-page filter controls — stack into compact grid */
  .mob-filter-bar{display:grid !important;grid-template-columns:1fr 1fr;gap:6px;padding:10px 12px !important;align-items:center;}
  .mob-filter-bar .filter-row1{grid-column:1/-1;display:flex;align-items:center;gap:6px;}
  .mob-filter-bar .filter-row2{grid-column:1/-1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  /* Date inputs smaller on mobile */
  /* date-input mobile handled by .date-bar @media block above */
  /* Buttons in filter rows */
  .mob-filter-bar button{font-size:11px !important;padding:7px 10px !important;white-space:nowrap;}
  /* CEO hero grid — 2 cols on mobile */
  #page-ceo .ceo-hero{grid-template-columns:1fr 1fr !important;}
  #page-ceo .ceo-hero > div{padding:14px !important;}
  #page-ceo .ceo-hero .ceo-val{font-size:22px !important;}
  /* CEO second row — 2 cols */
  #page-ceo .ceo-row2{grid-template-columns:1fr 1fr !important;}
  /* Returning/New cards side by side */
  #page-ceo .ret-new-grid{grid-template-columns:1fr 1fr !important;gap:0 !important;}
  /* Ad pages */
  .kpi-grid{grid-template-columns:1fr 1fr;}
  #ga-camp-table,#fb-camp-table{font-size:11px;}
  /* Product/region tables — hide cols 5 (Total Units) & 6 (Bulk%) on BOTH
     header and rows so they stay column-aligned. Header cells are plain divs,
     row cells are .pt-cell, so target both shapes. */
  .pt-6{grid-template-columns:18px 1fr 58px 52px;}
  .pt-head.pt-6>div:nth-child(5),.pt-head.pt-6>div:nth-child(6),
  .pt-row.pt-6 .pt-cell:nth-child(5),.pt-row.pt-6 .pt-cell:nth-child(6){display:none;}
  .reg-row{grid-template-columns:1fr 52px 60px;}.reg-rev,.reg-pct{display:none;}
  .ins-grid{grid-template-columns:1fr;}
  .hb-lbl,.hb-lbl.w180{width:90px;}
  .f-lbl{width:100px;font-size:10px;}
  .rec-grid{grid-template-columns:1fr 1fr;}
  .rec-cell{border-right:1px solid var(--border);}
  .rec-cell.no-right,.rec-cell:nth-child(even){border-right:none;}
  #loss-breakdown-grid{grid-template-columns:1fr !important;}
  .lb-customers-section{grid-template-columns:1fr 1fr 1fr;}
  .lb-metric-val{font-size:18px;}
  /* CEO returning/new — full width stack on mobile */
  .ceo-ret-grid{grid-template-columns:1fr !important;}
  /* In-page filter controls on mobile — single line */
  .mob-filter-bar{flex-wrap:nowrap !important;overflow-x:auto;padding:8px 10px !important;gap:6px !important;scrollbar-width:none;}
  .mob-filter-bar::-webkit-scrollbar{display:none;}
  .mob-filter-bar .date-input{min-width:110px !important;width:110px !important;flex:none !important;}
  /* Google Ads / Facebook filter bar */
  #page-googleads .mob-filter-bar,#page-facebook .mob-filter-bar{flex-wrap:nowrap;}
  /* GA/FB KPI grid — 2 cols */
  #page-googleads .kpi-grid,#page-facebook .kpi-grid{grid-template-columns:1fr 1fr !important;}
}

/* ── FILTER CARD — shared across CEO, GA, FB ── */
.fcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:12px;box-shadow:0 2px 10px rgba(200,80,74,0.04);}
.fcard-row{display:flex;align-items:center;gap:10px;padding:12px 16px;}
.fcard-label{font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--text3);font-family:'DM Mono',monospace;white-space:nowrap;flex-shrink:0;}
.fcard-date{flex:1;min-width:0;background:var(--blush);border:1px solid var(--border2);border-radius:8px;padding:8px 10px;font-family:'DM Mono',monospace;font-size:12px;color:var(--text);outline:none;cursor:pointer;transition:border-color .15s;width:100%;}
.fcard-date:focus{border-color:var(--accent);}
.fcard-sep{font-size:11px;color:var(--text3);flex-shrink:0;}
.fcard-btn{flex-shrink:0;border:none;border-radius:8px;padding:8px 14px;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap;}
.fcard-btn.apply{background:var(--accent);color:#fff;}
.fcard-btn.apply:active{opacity:.85;}
.fcard-btn.sync{background:var(--green);color:#fff;}
.fcard-btn.sync:active{opacity:.85;}
.fcard-btn.sync-blue{background:rgba(200,80,74,.1);color:var(--accent);border:1px solid rgba(200,80,74,.2);}
.fcard-btn.clear{background:transparent;color:var(--text3);border:1px solid var(--border2);padding:8px 10px;}
.fcard-btn.clear:active{color:var(--text);}
.fcard-status{padding:8px 16px 10px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.fcard-status-txt{font-size:10px;font-family:'DM Mono',monospace;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fcard-status-ok{font-size:10px;font-family:'DM Mono',monospace;color:var(--green);white-space:nowrap;flex-shrink:0;}
.fcard-progress{padding:0 16px 10px;}
.fcard-progress-bar{height:2px;background:var(--blush);border-radius:2px;overflow:hidden;margin-bottom:5px;}
.fcard-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s;}
.fcard-progress-txt{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;}

/* ── CEO HERO CARDS ── */
.ceo-hero{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px;}
.ceo-hero-card{background:var(--bg2);border-radius:var(--r);padding:20px;position:relative;overflow:hidden;}
.ceo-hero-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.16em;font-family:'DM Mono',monospace;margin-bottom:10px;}
.ceo-hero-val{font-size:clamp(20px,2.8vw,36px);font-weight:800;line-height:1.05;letter-spacing:-1px;word-break:break-word;overflow-wrap:break-word;}
.ceo-hero-sub{font-size:10px;color:var(--text3);margin-top:8px;line-height:1.4;}

@media(max-width:860px){
  /* Filter bar on mobile — dates on row 1, action buttons wrap to row 2 with
     even spacing so "Clear"/"Sync"/"✕" never jam against the card edge. */
  .fcard-row{gap:6px;padding:10px 12px;flex-wrap:wrap;row-gap:8px;}
  .fcard-label{display:none;}
  .fcard-date{font-size:11px;padding:8px 8px;flex:1 1 110px;}
  .fcard-btn{font-size:11px;padding:8px 10px;flex:1 1 0;}
  /* CEO hero — 2×2 on mobile */
  .ceo-hero{grid-template-columns:1fr 1fr !important;gap:8px;}
  .ceo-hero-card{padding:14px 12px;}
  .ceo-hero-val{font-size:clamp(16px,5.5vw,26px) !important;word-break:break-word;}
  .ceo-hero-lbl{font-size:8px;margin-bottom:6px;}
  .ceo-hero-sub{font-size:9px;margin-top:5px;}
}

@media(max-width:400px){
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .mnav{padding:8px 10px;font-size:11px;}
}
.chip-green{background:rgba(46,139,87,.1);color:var(--green);border:1px solid rgba(46,139,87,.22);}

/* ═══════════════════════════════════════════════════════════════
   LOGIN SCREEN — SPLIT BRAND LAYOUT + ANIMATIONS
═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes loginFadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes loginFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes loginGradient{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
/* wrapper: entrance fade-up + continuous float */
@keyframes loginLogoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
/* image itself: 3D flip — no translateY here so there's zero conflict */
@keyframes loginLogoFlip{
  0%,30% {transform:perspective(600px) rotateY(0deg);}
  55%,85%{transform:perspective(600px) rotateY(-360deg);}
  100%   {transform:perspective(600px) rotateY(-360deg);}
}
@keyframes loginShine{0%{left:-100%;}100%{left:160%;}}
@keyframes loginOrb{0%,100%{transform:scale(1) rotate(0deg);}50%{transform:scale(1.06) rotate(180deg);}}

/* ── Screen shell ── */
.login-screen{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:row;opacity:0;pointer-events:none;transition:opacity .4s;}
.login-screen.visible{opacity:1;pointer-events:all;}

/* ── LEFT PANEL ── */
.login-left{
  flex:0 0 58%;
  background:linear-gradient(135deg,#9A6262,#AD7474,#C49090,#A87272,#956060);
  background-size:400% 400%;
  animation:loginGradient 10s ease infinite;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:52px 64px;overflow:hidden;position:relative;text-align:center;
}
/* Decorative soft orb — top right */
.login-left::before{
  content:'';position:absolute;width:420px;height:420px;border-radius:50%;
  border:1px solid rgba(255,255,255,.07);top:-100px;right:-100px;
  animation:loginOrb 18s ease-in-out infinite;pointer-events:none;
}
/* Decorative soft orb — bottom left */
.login-left::after{
  content:'';position:absolute;width:600px;height:600px;border-radius:50%;
  border:1px solid rgba(255,255,255,.04);bottom:-200px;left:-200px;
  animation:loginOrb 24s ease-in-out infinite reverse;pointer-events:none;
}
.login-left-inner{display:flex;flex-direction:column;align-items:center;gap:28px;flex:1;justify-content:center;position:relative;z-index:1;}
/* wrapper: opacity-only entrance (no transform) + float transform — zero conflict */
/* image:   rotateY flip only — zero conflict with wrapper's translateY           */
.login-logo-wrap{animation:loginFadeIn .9s .1s ease both,loginLogoFloat 4s 1s ease-in-out infinite;}
.login-brand-logo{width:200px;height:auto;object-fit:contain;filter:brightness(0) invert(1);animation:loginLogoFlip 6s 1s ease-in-out infinite;}
.login-left-body{display:flex;flex-direction:column;gap:14px;align-items:center;}
.login-tagline-sm{font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;color:rgba(255,255,255,.72);max-width:360px;line-height:1.7;margin:0;animation:loginFadeUp .7s .35s ease both;}
.login-tagline-lg{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:700;color:#fff;margin:0;line-height:1.2;animation:loginFadeUp .7s .55s ease both;}
.login-copy{font-size:11px;font-family:'DM Mono',monospace;color:rgba(255,255,255,.38);letter-spacing:.02em;position:relative;z-index:1;animation:loginFadeIn .8s .9s ease both;}

/* ── RIGHT PANEL ── */
.login-right{flex:1;background:#BE9090;display:flex;align-items:center;justify-content:center;padding:48px 32px;}
.login-form-wrap{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:22px;}
.login-icon{width:68px;height:auto;object-fit:contain;animation:loginFadeUp .7s .2s ease both;}
.login-welcome{font-family:'Outfit',sans-serif;font-size:14px;font-weight:400;color:rgba(255,255,255,.88);text-align:center;margin-top:-6px;animation:loginFadeUp .7s .35s ease both;}
.login-fields{width:100%;display:flex;flex-direction:column;gap:14px;animation:loginFadeUp .7s .5s ease both;}
.login-field{display:flex;flex-direction:column;gap:5px;width:100%;}
.login-label{font-size:13px;font-weight:500;color:rgba(255,255,255,.88);font-family:'Outfit',sans-serif;}
.login-req{color:rgba(255,255,255,.55);}
.login-input{background:rgba(245,234,230,.9);border:2px solid transparent;border-radius:50px;padding:12px 20px;font-size:14px;color:#3a2020;outline:none;transition:background .2s,border-color .2s,box-shadow .2s;font-family:'Outfit',sans-serif;width:100%;box-sizing:border-box;}
.login-input:focus{background:rgba(255,250,248,1);border-color:rgba(255,255,255,.5);box-shadow:0 0 0 4px rgba(255,255,255,.12);}
.login-input::placeholder{color:rgba(90,50,50,.3);}
.login-error{background:rgba(192,57,43,.18);border:1px solid rgba(192,57,43,.35);color:#fff;border-radius:10px;padding:10px 14px;font-size:12px;width:100%;box-sizing:border-box;font-family:'Outfit',sans-serif;animation:loginFadeUp .3s ease both;}
/* Button — with shine sweep on hover */
.login-btn{
  position:relative;overflow:hidden;
  background:#1c1212;color:#fff;border:none;border-radius:50px;
  padding:13px 0;font-size:14px;font-weight:600;font-family:'Outfit',sans-serif;
  cursor:pointer;transition:background .25s,transform .15s;
  width:100%;letter-spacing:.06em;
  animation:loginFadeUp .7s .65s ease both;
}
.login-btn::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg);transition:none;}
.login-btn:hover{background:#2e1e1e;transform:translateY(-1px);}
.login-btn:hover::after{animation:loginShine .55s ease forwards;}
.login-btn:active{transform:translateY(0);}
.login-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ── MOBILE — stack vertically ── */
@media(max-width:640px){
  .login-screen{flex-direction:column;}
  .login-left{flex:0 0 auto;padding:32px 24px 26px;text-align:center;}
  .login-brand-logo{width:140px;}
  .login-tagline-sm{font-size:12px;}
  .login-tagline-lg{font-size:26px;}
  .login-copy{margin-top:6px;font-size:10px;}
  .login-right{flex:1;padding:28px 22px;}
  .login-icon{width:52px;}
  .login-left::before{width:200px;height:200px;top:-60px;right:-60px;}
  .login-left::after{width:300px;height:300px;bottom:-100px;left:-100px;}
}

/* USER MANAGER PANEL */
.um-overlay{position:fixed;inset:0;background:rgba(253,246,243,.85);z-index:8000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;}
.um-overlay.visible{opacity:1;pointer-events:all;}
.um-box{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;padding:32px;width:100%;max-width:520px;max-height:80vh;overflow-y:auto;}
.um-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;color:var(--text);margin-bottom:6px;}
.um-sub{font-size:11px;color:var(--text3);margin-bottom:20px;}
.um-field{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.um-input{background:var(--blush);border:1px solid var(--border2);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--text);outline:none;font-family:'DM Mono',monospace;flex:1;min-width:100px;}
.um-input:focus{border-color:var(--accent);}
.um-add-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;}
.um-add-btn:hover{opacity:.85;}
.um-list{display:flex;flex-direction:column;gap:6px;}
.um-user-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg3);border-radius:8px;padding:10px 14px;}
.um-user-name{font-size:13px;font-weight:600;color:var(--text);}
.um-user-role{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em;}
.um-del-btn{background:rgba(192,57,43,.12);color:var(--red);border:none;border-radius:6px;padding:5px 10px;font-size:11px;cursor:pointer;}
.um-del-btn:hover{background:rgba(192,57,43,.25);}
.um-close-btn{background:var(--blush);color:var(--text2);border:none;border-radius:9px;padding:10px 18px;font-size:12px;cursor:pointer;margin-top:16px;width:100%;font-family:'Outfit',sans-serif;}
.um-msg{font-size:11px;padding:8px 12px;border-radius:7px;margin-bottom:10px;}
.um-msg.ok{background:rgba(46,139,87,.1);color:var(--green);}
.um-msg.err{background:rgba(192,57,43,.1);color:var(--red);}

/* User badge in topbar */
.user-badge{display:flex;align-items:center;gap:8px;background:var(--blush);border:1px solid var(--border);border-radius:9px;padding:5px 12px;font-size:11px;color:var(--text2);font-family:'DM Mono',monospace;}
.user-badge .ub-name{color:var(--text);font-weight:600;}
.signout-btn{background:none;border:none;color:var(--text3);font-size:11px;cursor:pointer;padding:0;margin-left:4px;}
.signout-btn:hover{color:var(--red);}
.manage-btn{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:4px 10px;font-size:10px;font-weight:700;cursor:pointer;margin-left:4px;font-family:'Outfit',sans-serif;}
.manage-btn:hover{opacity:.85;}

/* ── Comparisons workspace — metric info tooltips (P5 / P6) ── */
.cmp-info{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;height:14px;
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text3);
  font-family:'DM Mono',monospace;
  font-size:10px;
  font-weight:700;
  line-height:1;
  cursor:help;
  user-select:none;
  text-transform:none;
  letter-spacing:0;
  transition:color .15s, border-color .15s;
}
.cmp-info:hover, .cmp-info:focus{
  color:var(--accent);
  border-color:var(--accent);
  outline:none;
}
.cmp-tip{
  display:none;
  position:absolute;
  top:22px; left:50%;
  transform:translateX(-50%);
  width:280px; max-width:min(280px, calc(100vw - 32px));
  padding:14px 14px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,0.12);
  z-index:200;
  font-family:'Outfit',sans-serif;
  font-size:11px;
  font-weight:400;
  color:var(--text2);
  line-height:1.55;
  white-space:normal;
  text-align:left;
  text-transform:none;
  letter-spacing:0;
  pointer-events:none; /* matches the parent's "info" semantics — no need to interact */
}
.cmp-info:hover .cmp-tip,
.cmp-info:focus .cmp-tip,
.cmp-info:focus-within .cmp-tip{ display:block; }
.cmp-tip-title{
  font-family:'Outfit',sans-serif;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.cmp-tip-desc{ margin-bottom:8px; }
.cmp-tip-formula{
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text);
  background:var(--bg3);
  border-radius:6px;
  padding:6px 8px;
  margin-bottom:8px;
  word-break:break-word;
}
.cmp-tip-caveat{
  font-size:10px;
  color:var(--amber);
  background:rgba(220,150,80,.08);
  border:1px solid rgba(220,150,80,.18);
  border-radius:6px;
  padding:6px 8px;
  font-style:italic;
}

/* ── Generic metric info tooltip (reusable across ALL dashboards) ── */
.info-ic{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;height:14px;
  margin-left:6px;
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text3);
  font-family:'DM Mono',monospace;
  font-size:10px;font-weight:700;line-height:1;
  cursor:help;user-select:none;
  text-transform:none;letter-spacing:0;
  vertical-align:middle;
  transition:color .15s,border-color .15s;
}
.info-ic:hover,.info-ic:focus{ color:var(--accent);border-color:var(--accent);outline:none; }
.info-pop{
  display:none;
  position:absolute;
  top:20px;left:50%;
  transform:translateX(-50%);
  width:260px;max-width:min(260px,calc(100vw - 32px));
  padding:13px 14px 11px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,0.14);
  z-index:300;
  font-family:'Outfit',sans-serif;
  font-size:11px;font-weight:400;
  color:var(--text2);line-height:1.55;
  white-space:normal;text-align:left;
  text-transform:none;letter-spacing:0;
  pointer-events:none;
}
.info-ic:hover .info-pop,
.info-ic:focus .info-pop,
.info-ic:focus-within .info-pop{ display:block; }
.info-pop-title{
  font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;
  color:var(--text);margin-bottom:6px;padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.info-pop-desc{ display:block;margin-bottom:8px; }
.info-pop-formula{
  display:block;font-family:'DM Mono',monospace;font-size:10px;
  color:var(--text);background:var(--bg3);border-radius:6px;
  padding:6px 8px;margin-bottom:8px;word-break:break-word;
}
.info-pop-caveat{
  display:block;font-size:10px;color:var(--amber);
  background:rgba(220,150,80,.08);border:1px solid rgba(220,150,80,.18);
  border-radius:6px;padding:6px 8px;font-style:italic;
}
/* Floating popover — attached to <body>, positioned by JS, so it's never
   clipped by a card's overflow:hidden or the viewport edge. */
.info-pop-floating{
  position:fixed;display:none;z-index:1000;
  width:260px;max-width:calc(100vw - 16px);
  padding:13px 14px 11px;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,0.16);
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:400;
  color:var(--text2);line-height:1.55;text-align:left;
  text-transform:none;letter-spacing:0;pointer-events:none;
}

/* ── Date range presets ── */
.date-presets{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.date-presets::-webkit-scrollbar{display:none;}
.date-preset{padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text3);font-size:10px;font-family:'DM Mono',monospace;cursor:pointer;transition:all .12s;white-space:nowrap;flex-shrink:0;}
.date-preset:hover{border-color:var(--accent);color:var(--accent);background:rgba(200,80,74,.06);}
.date-divider{width:1px;height:20px;background:var(--border);margin:0 4px;align-self:center;}

/* ── P4 segment (dimension) filters ── */
.seg-btn.seg-active{background:var(--accent);color:#fff;border-color:var(--accent);}
.segment-panel{position:absolute;top:100%;right:24px;margin-top:6px;z-index:300;width:300px;max-height:70vh;overflow-y:auto;background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:16px;box-shadow:0 12px 32px rgba(0,0,0,.18);}
.seg-panel-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px;}
.seg-close{background:none;border:none;color:var(--text3);font-size:14px;cursor:pointer;line-height:1;}
.seg-close:hover{color:var(--text);}
.seg-group{margin-bottom:14px;}
.seg-group-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:'DM Mono',monospace;margin-bottom:7px;}
.seg-sub{text-transform:none;letter-spacing:0;color:var(--text3);}
.seg-radios{display:flex;gap:6px;flex-wrap:wrap;}
.seg-radio{padding:5px 12px;border-radius:7px;border:1px solid var(--border);background:var(--blush);color:var(--text2);font-size:11px;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .12s;}
.seg-radio:hover{border-color:var(--accent);}
.seg-radio.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;}
.seg-region-search{width:100%;box-sizing:border-box;background:var(--blush);border:1px solid var(--border);border-radius:7px;padding:6px 10px;font-size:11px;color:var(--text);outline:none;margin-bottom:6px;font-family:'Outfit',sans-serif;}
.seg-region-search:focus{border-color:var(--accent);}
.seg-region-list{max-height:160px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:4px;}
.seg-region-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--text);}
.seg-region-item:hover{background:var(--blush);}
.seg-region-item input{width:14px;height:14px;flex-shrink:0;cursor:pointer;}
.seg-region-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.seg-region-n{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;}
.seg-panel-foot{display:flex;gap:8px;margin-top:6px;}
.seg-panel-foot .date-btn{flex:1;text-align:center;}
.segment-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg2);border-bottom:1px solid var(--border);padding:8px 24px;}
.seg-chips-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:'DM Mono',monospace;}
.seg-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(200,80,74,.1);color:var(--accent);border:1px solid rgba(200,80,74,.25);border-radius:14px;padding:3px 10px;font-size:11px;font-weight:600;}
.seg-chip-x{cursor:pointer;font-size:10px;opacity:.7;}
.seg-chip-x:hover{opacity:1;}
.seg-chip-clear{background:transparent;border-color:var(--border);color:var(--text3);cursor:pointer;}
.seg-chip-clear:hover{color:var(--text);border-color:var(--text3);}
@media(max-width:640px){.segment-panel{right:8px;left:8px;width:auto;}}
/* CEO fcard presets */
.fcard-presets{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;padding:10px 16px 6px;border-bottom:1px solid var(--border);-webkit-overflow-scrolling:touch;}
.fcard-presets::-webkit-scrollbar{display:none;}
.fcard-preset{padding:3px 9px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--text3);font-size:10px;font-family:'DM Mono',monospace;cursor:pointer;transition:all .12s;white-space:nowrap;flex-shrink:0;}
.fcard-preset:hover{border-color:var(--accent);color:var(--accent);}

/* ── Week-over-week change badges ── */
.wow-badge{display:inline-block;font-size:9px;font-family:'DM Mono',monospace;font-weight:700;padding:2px 5px;border-radius:4px;margin-left:5px;vertical-align:middle;line-height:1.4;letter-spacing:.02em;}
.wow-up{background:rgba(46,139,87,.12);color:var(--green);}
.wow-down{background:rgba(192,57,43,.10);color:var(--red);}

/* ── P6c/P7 Investigate card ── */
.invst-body{padding:16px 20px;}
.invst-controls{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:14px;}
.invst-ctrl-group{display:flex;flex-direction:column;gap:6px;}
.invst-ctrl-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);font-family:'DM Mono',monospace;}
.invst-pills{display:flex;gap:6px;flex-wrap:wrap;}
.invst-pill{padding:5px 12px;border-radius:7px;border:1px solid var(--border);background:var(--blush);color:var(--text2);font-size:11px;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .12s;}
.invst-pill:hover{border-color:var(--accent);}
.invst-pill.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;}
.invst-headline{font-size:13px;color:var(--text);margin-bottom:14px;line-height:1.6;}
.invst-up{color:var(--green);font-weight:700;}
.invst-down{color:var(--red);font-weight:700;}
.invst-rows{display:flex;flex-direction:column;gap:8px;}
.invst-row{padding:8px 10px;border-radius:9px;background:var(--blush);}
.invst-clickable{cursor:pointer;transition:all .12s;}
.invst-clickable:hover{background:rgba(200,80,74,.08);outline:1px solid rgba(200,80,74,.25);}
.invst-row-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.invst-row-name{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.invst-row-delta{font-size:12px;font-family:'DM Mono',monospace;font-weight:700;white-space:nowrap;margin-left:10px;}
.invst-bar-track{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:5px;}
.invst-bar{height:100%;border-radius:3px;}
.invst-bar-up{background:var(--green);}
.invst-bar-down{background:var(--red);}
.invst-row-sub{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;}
.invst-hint{font-size:10px;color:var(--text3);font-style:italic;margin-top:12px;}

/* ── EXPORT BUTTON ─────────────────────────────────────────────────────────── */
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.ph>div{flex:1;min-width:0;}
.export-btn{flex-shrink:0;padding:6px 14px;border-radius:8px;border:1px solid var(--border2);background:var(--blush);color:var(--text2);font-size:11px;font-family:'DM Mono',monospace;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s;align-self:center;}
.export-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(200,80,74,.06);}

/* ── SPARKLINES in KPI cards ─────────────────────────────────────────────── */
.kpi-spark{margin-top:8px;}
.kpi-spark svg{width:100%;}
.spark-cap{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;}
.spark-cap-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);font-family:'DM Mono',monospace;}
.spark-delta{font-size:10px;font-weight:700;font-family:'DM Mono',monospace;}
.spk-hov{cursor:crosshair;}
.spk-hov:hover .spk-dot{opacity:1 !important;}
.spk-hov:hover rect{fill:rgba(127,127,127,.10);}
/* Shared interactive chart tooltip + hover columns */
.mini-tip{position:fixed;z-index:99999;pointer-events:none;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:7px 10px;font-size:11px;font-family:'DM Mono',monospace;color:var(--text);box-shadow:0 8px 28px rgba(0,0,0,.22);white-space:nowrap;display:none;line-height:1.55;}
.dlc-hov{cursor:crosshair;}
.dlc-hov:hover{fill:rgba(127,127,127,.08);}

/* ── PROJECTION CARD ─────────────────────────────────────────────────────── */
.proj-card{background:linear-gradient(135deg,rgba(56,200,200,.07),rgba(56,200,200,.02));border:1px solid rgba(56,200,200,.25);border-radius:var(--r);padding:14px 20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;}
.proj-lead{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding-right:22px;border-right:1px solid rgba(56,200,200,.2);}
.proj-tag{font-size:8px;font-weight:700;letter-spacing:.14em;color:var(--teal);font-family:'DM Mono',monospace;margin-bottom:3px;}
.proj-lead-pct{font-size:30px;font-weight:800;line-height:1;color:var(--teal);font-family:'DM Mono',monospace;}
.proj-lead-sub{font-size:10px;color:var(--text3);}
.proj-progress-wrap{display:flex;flex-direction:column;gap:6px;flex:1;}
.proj-progress-bar{height:6px;background:var(--bg4);border-radius:4px;overflow:hidden;}
.proj-progress-fill{height:100%;background:var(--teal);border-radius:4px;transition:width .4s ease;}
.proj-meta{font-size:10px;font-family:'DM Mono',monospace;color:var(--text2);}
.proj-note{font-size:9px;color:var(--text3);font-style:italic;}
.proj-kpis{display:flex;gap:24px;}
.proj-kpi{display:flex;flex-direction:column;gap:2px;text-align:right;}
.proj-kpi-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:'DM Mono',monospace;}
.proj-kpi-val{font-size:20px;font-weight:800;color:var(--teal);font-family:'DM Mono',monospace;line-height:1.1;}
.proj-kpi-sub{font-size:9px;color:var(--text3);font-family:'DM Mono',monospace;}
@media(max-width:640px){.proj-card{grid-template-columns:1fr;gap:14px;}.proj-lead{flex-direction:row;align-items:baseline;gap:8px;border-right:none;border-bottom:1px solid rgba(56,200,200,.2);padding-right:0;padding-bottom:10px;}.proj-tag{display:none;}.proj-kpis{flex-wrap:wrap;}.proj-kpi{text-align:left;}}

/* ── DAY-OF-WEEK GRID ────────────────────────────────────────────────────── */
.dow-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:16px 18px;}
.dow-cell{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:10px;padding:10px 6px;background:var(--blush);position:relative;transition:all .15s;cursor:default;}
.dow-cell:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(200,80,74,.1);}
.dow-cell.weekend{background:rgba(123,79,166,.07);border:1px solid rgba(123,79,166,.12);}
.dow-cell-label{font-size:9px;font-family:'DM Mono',monospace;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);}
.dow-cell.weekend .dow-cell-label{color:var(--purple);}
.dow-cell-bar-wrap{width:100%;height:50px;display:flex;align-items:flex-end;}
.dow-cell-bar{width:70%;margin:0 auto;border-radius:3px 3px 0 0;min-height:3px;transition:height .3s ease;}
.dow-cell-val{font-size:12px;font-weight:700;color:var(--text);font-family:'DM Mono',monospace;}
.dow-cell-sub{font-size:9px;color:var(--text3);}
@media(max-width:560px){.dow-grid{grid-template-columns:repeat(7,1fr);gap:4px;padding:10px;}.dow-cell{padding:6px 2px;}.dow-cell-val{font-size:10px;}}

/* ── HOURLY HEATMAP ──────────────────────────────────────────────────────── */
.hour-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:14px 18px;}
@media(max-width:640px){.hour-grid{grid-template-columns:repeat(4,1fr);}}
.hour-cell{border-radius:8px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .15s;cursor:default;}
.hour-cell:hover{transform:scale(1.04);box-shadow:0 3px 10px rgba(200,80,74,.12);}
.hour-cell-label{font-size:9px;font-family:'DM Mono',monospace;color:var(--text3);}
.hour-cell-val{font-size:11px;font-weight:700;color:var(--text);}

/* ── REORDER VELOCITY TABLE ──────────────────────────────────────────────── */
.vel-row{display:grid;grid-template-columns:1fr 80px 80px 140px;gap:8px;padding:9px 16px;border-bottom:1px solid var(--border);align-items:center;transition:background .1s;}
.vel-row:hover{background:var(--blush);}
.vel-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vel-sku{font-size:9px;color:var(--text3);font-family:'DM Mono',monospace;}
.vel-head{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);font-family:'DM Mono',monospace;font-weight:700;border-bottom:2px solid var(--border2);align-items:center;}
.vel-head:hover{background:transparent;}
.vel-daily{text-align:right;font-size:13px;font-weight:700;font-family:'DM Mono',monospace;}
.vel-total{text-align:right;font-size:12px;font-family:'DM Mono',monospace;color:var(--text2);}
.vel-bar-cell{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.vel-bar-num{font-size:12px;font-weight:700;font-family:'DM Mono',monospace;}
.vel-bar-track{width:100%;height:4px;background:var(--bg4);border-radius:2px;overflow:hidden;}
.vel-bar{height:100%;border-radius:2px;min-width:2px;}

/* ── SHARED TABLE TOOLBAR (sort / column chips) ──────────────────────────── */
.tbl-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--border);}
.tbl-tb-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.tbl-tb-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:'DM Mono',monospace;margin-right:2px;}
.tbl-tb-hint{font-size:11px;color:var(--text3);}
.tbl-chip{font-size:11px;font-family:'Outfit',sans-serif;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);border-radius:999px;padding:4px 11px;cursor:pointer;transition:all .12s;line-height:1.4;}
.tbl-chip:hover{border-color:var(--accent);color:var(--text);}
.tbl-chip-on{background:var(--accent);border-color:var(--accent);color:#fff;}
.tbl-chip-eye{opacity:.5;text-decoration:line-through;}
.tbl-chip-eye.tbl-chip-on{opacity:1;text-decoration:none;background:var(--bg4);border-color:var(--border2);color:var(--text);}

/* ── COUPON EFFECTIVENESS TABLE ──────────────────────────────────────────── */
.coup-eff-row{display:grid;gap:4px;padding:9px 16px;border-bottom:1px solid var(--border);align-items:center;transition:background .1s;}
.coup-eff-row:hover{background:var(--blush);}
.coup-eff-head{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);font-family:'DM Mono',monospace;font-weight:700;border-bottom:2px solid var(--border2);}
.coup-eff-head:hover{background:transparent;}
.coup-code{font-size:12px;font-weight:700;font-family:'DM Mono',monospace;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.coup-num{font-size:12px;font-family:'DM Mono',monospace;color:var(--text);}

/* ── GRID-TABLE ALIGNMENT (all screens) ─────────────────────────────────────
   These tables render the header and each data row as SEPARATE CSS grids that
   share a column template. A grid item defaults to min-width:auto, so a long
   no-wrap product name forces ITS column wider than the matching header column
   → the columns stop lining up and the row overflows its overflow:hidden card,
   clipping the right-hand values. Forcing min-width:0 on every cell lets the
   flexible name column shrink and ellipsis-truncate, keeping header and values
   perfectly aligned. */
.pt-head.pt-6>*,.pt-row.pt-6>*,
.vel-head>*,.vel-row>*,
.sku-split-row>*{min-width:0;}

/* ── MOBILE: dense data tables ──────────────────────────────────────────────
   The reorder-velocity and coupon-effectiveness tables are far too wide for a
   phone. Velocity has a fixed 4-col shape, so we drop the least-critical column
   ("Total Units") and give the product name room. The coupon table has up to 8
   user-toggleable columns, so a fixed column reduction is fragile — instead we
   let it scroll horizontally, the same pattern the GA/FB campaign tables use. */
@media(max-width:860px){
  /* Reorder velocity — drop "Total Units", keep Product / Daily Units / Velocity */
  .vel-row,.vel-head{grid-template-columns:1fr 56px 92px !important;}
  .vel-row>*:nth-child(3),.vel-head>*:nth-child(3){display:none;}
  /* Coupon effectiveness — horizontal scroll so every column stays reachable */
  #coupon-eff-table{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #coupon-eff-table::-webkit-scrollbar{height:0;}
  #coupon-eff-table .coup-eff-row,#coupon-eff-table .coup-eff-head{min-width:460px;}
}

/* ── MOBILE: Per-SKU Solo vs Bundle table ───────────────────────────────────
   6 columns won't fit a phone. Keep Product / Solo / Bundle (counts carry the
   proportion bars); drop Solo% / Bundle% / Top Bundle. Header + rows share the
   .sku-split-row class so they stay aligned. */
@media(max-width:860px){
  .sku-split-row{grid-template-columns:1fr 52px 52px !important;}
  .sku-split-row>*:nth-child(4),
  .sku-split-row>*:nth-child(5),
  .sku-split-row>*:nth-child(6){display:none;}
}

/* ── MOBILE: GA / Facebook "Campaign Breakdown" tables ───────────────────────
   8 columns: name(1fr) + 7 fixed cols summing ~530px. Wrap header + rows in one
   horizontal scroller so they scroll together and stay column-aligned. The row
   min-width (640) clears the fixed total so the 1fr campaign-name column keeps
   ~110px and truncates with ellipsis instead of collapsing. */
@media(max-width:860px){
  .camp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .camp-scroll::-webkit-scrollbar{height:0;}
  /* Both the header (.camp-row, direct child of .camp-scroll) and the body rows
     (.camp-row inside #ga/#fb-camp-table) are generated with an inline
     `grid-template-columns:1fr 80px …`. Inside a horizontal-scroll container the
     `1fr` name column can't resolve to a definite width, so a long campaign name
     expands the row past the fixed columns and the header stops lining up with
     the values. Override the template with a FIXED 200px name column (matching
     header + rows) so every column is identical width and the name truncates. */
  .camp-row{grid-template-columns:200px 80px 80px 70px 80px 80px 70px 70px !important;width:660px;}
}

/* ── MOBILE: Comparisons Period A / Period B pickers ────────────────────────
   Stack the two period cards instead of cramming them side by side, so the
   date inputs and preset dropdown have room. */
@media(max-width:640px){
  .cmp-period-card{flex:1 1 100% !important;}
}

/* ── PROMO TRACKER ───────────────────────────────────────────────────────── */
.promo-row{display:grid;grid-template-columns:1fr 62px 62px 110px 58px 64px 70px;gap:8px;padding:11px 16px;border-bottom:1px solid var(--border);align-items:center;transition:background .1s;}
.promo-row:hover{background:var(--blush);}
.promo-head{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);font-family:'DM Mono',monospace;font-weight:700;border-bottom:2px solid var(--border2);}
.promo-head:hover{background:transparent;}
.promo-name{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;overflow:hidden;}
.promo-name-unset{color:var(--text3);font-weight:500;font-style:italic;}
.promo-id{font-family:'DM Mono',monospace;font-size:9px;background:var(--blush);border:1px solid var(--border2);border-radius:5px;padding:2px 6px;color:var(--text3);white-space:nowrap;font-style:normal;}
.promo-id-hint{font-size:9px;color:var(--accent);font-style:normal;}
.promo-num{text-align:right;font-size:12px;font-family:'DM Mono',monospace;font-weight:600;color:var(--text);position:relative;}
.promo-num .promo-revbar{position:absolute;right:0;bottom:-3px;height:3px;background:var(--purple);border-radius:2px;opacity:.5;}
.promo-num span{position:relative;}
/* config mode */
.promo-cfg-head{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:'DM Mono',monospace;padding:8px 16px;border-bottom:1px solid var(--border);}
.promo-cfg-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);align-items:center;}
.promo-cfg-stats{font-size:11px;font-family:'DM Mono',monospace;color:var(--text3);display:flex;align-items:center;gap:8px;white-space:nowrap;}
.promo-label-input{font-size:12px;border:1px solid var(--border);border-radius:6px;padding:5px 9px;background:var(--bg2);color:var(--text);font-family:'Outfit',sans-serif;width:100%;outline:none;transition:border-color .15s;}
.promo-label-input:focus{border-color:var(--accent);}
.promo-toggle{position:relative;display:inline-block;width:34px;height:18px;cursor:pointer;flex-shrink:0;}
.promo-toggle input{opacity:0;width:0;height:0;position:absolute;}
.promo-toggle-track{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--border2);border-radius:999px;transition:.15s;}
.promo-toggle-track:before{content:'';position:absolute;width:12px;height:12px;left:3px;top:2px;background:var(--text3);border-radius:50%;transition:.15s;}
.promo-toggle input:checked + .promo-toggle-track{background:rgba(123,79,166,.25);border-color:var(--purple);}
.promo-toggle input:checked + .promo-toggle-track:before{transform:translateX(15px);background:var(--purple);}
.promo-no-data{padding:20px 18px;font-size:12px;color:var(--text3);line-height:1.7;}
@media(max-width:640px){.promo-row{grid-template-columns:1fr 54px 90px;}.promo-row>div:nth-child(3),.promo-row>div:nth-child(5),.promo-row>div:nth-child(6),.promo-row>div:nth-child(7){display:none;}}

/* ── WoW BADGE (ensure visible on sparkline cards) ───────────────────────── */
.kpi-val{position:relative;display:inline-block;}


/* ── P5b Custom Metrics modal ── */
.cm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9500;display:flex;align-items:center;justify-content:center;padding:20px;}
.cm-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;width:880px;max-width:100%;max-height:88vh;overflow-y:auto;padding:22px 24px;box-shadow:0 20px 50px rgba(0,0,0,.3);}
.cm-head{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:800;color:var(--text);}
.cm-close{background:none;border:none;color:var(--text3);font-size:16px;cursor:pointer;}
.cm-close:hover{color:var(--text);}
.cm-sub{font-size:12px;color:var(--text3);margin:4px 0 16px;line-height:1.5;}
.cm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:760px){.cm-grid2{grid-template-columns:1fr;}}
.cm-lbl{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:'DM Mono',monospace;margin:10px 0 5px;}
.cm-inp{width:100%;box-sizing:border-box;background:var(--blush);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:13px;color:var(--text);outline:none;font-family:'Outfit',sans-serif;}
.cm-inp:focus{border-color:var(--accent);}
.cm-textarea{min-height:64px;resize:vertical;font-family:'DM Mono',monospace;font-size:12px;line-height:1.5;}
.cm-row3{display:grid;grid-template-columns:1fr 80px 1fr;gap:8px;}
.cm-test{font-family:'DM Mono',monospace;font-size:11px;margin-top:10px;min-height:14px;line-height:1.4;}
.cm-test-ok{color:var(--green);}
.cm-test-err{color:var(--red);}
.cm-msg{font-size:12px;margin-top:8px;min-height:14px;}
.cm-msg.ok{color:var(--green);}
.cm-msg.err{color:var(--red);}
.cm-save{margin-top:12px;width:100%;background:var(--accent);color:#fff;border:none;border-radius:9px;padding:11px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Outfit',sans-serif;}
.cm-save:hover{filter:brightness(1.06);}
.cm-side-title{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:8px;}
.cm-hint2{font-weight:400;color:var(--text3);font-size:10px;}
.cm-list{display:flex;flex-direction:column;gap:6px;}
.cm-item{display:flex;align-items:center;gap:8px;background:var(--blush);border-radius:8px;padding:8px 10px;}
.cm-item-main{flex:1;overflow:hidden;}
.cm-item-name{display:block;font-size:12px;font-weight:600;color:var(--text);}
.cm-item-formula{display:block;font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cm-del{background:none;border:none;cursor:pointer;font-size:13px;opacity:.7;}
.cm-del:hover{opacity:1;}
.cm-refs{max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:4px;}
.cm-ref{display:flex;align-items:baseline;gap:8px;padding:5px 7px;border-radius:6px;cursor:pointer;}
.cm-ref:hover{background:var(--blush);}
.cm-ref-key{font-family:'DM Mono',monospace;font-size:11px;color:var(--accent);}
.cm-ref-name{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cm-fns{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);margin-top:10px;line-height:1.5;}
.cm-empty{font-size:11px;color:var(--text3);font-style:italic;padding:8px;}

/* ── CX (Customer Experience) tab ────────────────────────────────────────── */
.cx-note{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r2);padding:11px 15px;font-size:12.5px;color:var(--text2);margin-bottom:16px;display:flex;gap:9px;align-items:flex-start;line-height:1.55;}
.cx-note b{color:var(--text);}
.cx-pad{padding:16px 20px;}
.cx-sla-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;}
.cx-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.cx-two-col .card{margin-bottom:0;}
@media(max-width:900px){.cx-two-col{grid-template-columns:1fr;}}
/* Mobile: let the CX table toolbar wrap instead of clipping its right-side
   controls (search + count + limit + export) inside the overflow:hidden card */
@media(max-width:640px){
  .cx-tbl-bar{flex-wrap:wrap;}
  .cx-search{min-width:0;width:100%;flex:1 1 100%;}
  .cx-tbl-bar-right{flex-wrap:wrap;justify-content:flex-start;}
}
.cx-tbl{width:100%;}
.cx-tbl-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);}
.cx-tbl-bar-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.cx-search{background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:6px 11px;font-size:12px;color:var(--text);min-width:210px;font-family:'Outfit',sans-serif;outline:none;}
.cx-search:focus{border-color:var(--accent);}
.cx-count{font-size:10px;font-family:'DM Mono',monospace;color:var(--text3);white-space:nowrap;}
.cx-lim{background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:6px 8px;font-size:11px;color:var(--text2);cursor:pointer;font-family:'Outfit',sans-serif;}
.cx-lim:focus{outline:none;border-color:var(--accent);}
.cx-btn{background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:6px 11px;font-size:11px;color:var(--text2);cursor:pointer;font-family:'Outfit',sans-serif;white-space:nowrap;}
.cx-btn:hover{border-color:var(--accent);color:var(--accent);}
.cx-scroll{overflow-x:auto;}
.cx-table{width:100%;border-collapse:collapse;font-size:12px;}
.cx-table th,.cx-table td{padding:9px 14px;text-align:left;white-space:nowrap;}
.cx-table thead th{background:var(--bg3);border-bottom:1px solid var(--border2);}
.cx-th{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);font-family:'DM Mono',monospace;cursor:pointer;user-select:none;font-weight:600;}
.cx-th:hover{color:var(--accent);}
.cx-th.on{color:var(--accent);}
.cx-th.r,.cx-table td.r{text-align:right;}
.cx-table td{color:var(--text2);border-bottom:1px solid var(--border);}
.cx-table td.mono{font-family:'DM Mono',monospace;font-size:11px;}
.cx-table tbody tr:hover{background:var(--bg3);}
.cx-empty{text-align:center;color:var(--text3);padding:26px 14px !important;font-style:italic;}
/* CX SLA settings form */
.cx-sla-form{display:flex;flex-direction:column;gap:14px;}
.cx-sla-row label,.cx-sla-num label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:5px;}
.cx-sla-row label span,.cx-sla-num label span{font-weight:400;color:var(--text3);font-size:10px;}
.cx-sla-form input[type=text],.cx-sla-form input[type=number]{width:100%;box-sizing:border-box;background:var(--blush);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:13px;color:var(--text);outline:none;font-family:'Outfit',sans-serif;}
.cx-sla-form input:focus{border-color:var(--accent);}
.cx-sla-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.cx-wd-row{display:flex;flex-wrap:wrap;gap:14px;}
.cx-wd{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text2);font-weight:500;cursor:pointer;}
.cx-wd input{accent-color:var(--accent);}
.cx-sla-actions{display:flex;align-items:center;gap:14px;}
.cx-save-btn{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Outfit',sans-serif;}
.cx-save-btn:hover{filter:brightness(1.06);}
.cx-sla-msg{font-size:12px;font-family:'DM Mono',monospace;}
.cx-sla-msg.ok{color:var(--green);}
.cx-sla-msg.err{color:var(--red);}
.cx-section-head{font-size:15px;font-weight:800;color:var(--text);margin:26px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--border2);}
.cx-rep-filters{display:flex;flex-wrap:wrap;gap:18px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg3);}
.cx-rep-filters label{font-size:11px;color:var(--text2);font-weight:600;display:inline-flex;align-items:center;gap:7px;}
.cx-rep-filters input{width:70px;background:var(--bg);border:1px solid var(--border2);border-radius:7px;padding:5px 8px;font-size:12px;color:var(--text);font-family:'Outfit',sans-serif;}
.cx-rep-filters input:focus{outline:none;border-color:var(--accent);}
.cx-rep-filters select{background:var(--bg);border:1px solid var(--border2);border-radius:7px;padding:5px 8px;font-size:12px;color:var(--text);font-family:'Outfit',sans-serif;}
.cx-filter-summary{margin-left:auto;font-size:12px;color:var(--text2);font-family:'DM Mono',monospace;}
.cx-filter-summary b{color:var(--accent);}
.cx-i{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--border2);color:var(--text3);font-size:9px;cursor:help;vertical-align:middle;font-style:normal;font-family:'DM Mono',monospace;}
.cx-i:hover,.cx-i:focus{color:#fff;background:var(--accent);border-color:var(--accent);outline:none;}
.cx-tip-pop{position:fixed;max-width:240px;background:var(--text);color:#fff;padding:9px 11px;border-radius:9px;font-size:11px;line-height:1.5;font-weight:400;letter-spacing:0;text-transform:none;font-family:'Outfit',sans-serif;z-index:99999;box-shadow:0 8px 24px rgba(0,0,0,.3);white-space:normal;text-align:left;pointer-events:none;}
.cx-cr-upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.cx-cr-upload input[type=file]{font-size:12px;color:var(--text2);}