:root{--blue:#1a73e8;--blue-dk:#1557b0;--blue-lt:#e8f0fe;--blue-pill:#d3e3fd;--red:#d93025;--amber:#f9ab00;--green:#1e8e3e;--green-lt:#e6f4ea;--red-lt:#fce8e6;--amber-lt:#fef3cd;--s0:#fff;--s1:#f8f9fa;--s2:#f1f3f4;--border:#dadce0;--bm:#bdc1c6;--t1:#202124;--t2:#5f6368;--t3:#9aa0a6;--sh1:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);--sh2:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);--r:8px;--r2:4px;--sb-w:72px;--sb-exp:248px;--top-h:64px;--bh:28px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Google Sans','Roboto',sans-serif;font-size:14px;color:var(--t1);background:var(--s1);-webkit-font-smoothing:antialiased}
.demo-banner{background:#fff3cd;border-bottom:1px solid var(--amber);color:var(--t2);font-size:12px;font-family:'Roboto',sans-serif;text-align:center;padding:5px 16px;height:var(--bh);position:fixed;top:0;left:0;right:0;z-index:400}
.demo-banner strong{color:var(--t1)}
.topbar{position:fixed;top:var(--bh);left:0;right:0;height:var(--top-h);background:var(--s0);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px 0 8px;z-index:200;gap:8px}
.icon-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:var(--t2);flex-shrink:0;position:relative;transition:background .15s}.icon-btn:hover{background:var(--s2)}.icon-btn .material-icons-round{font-size:20px}
.notif-dot{position:absolute;top:8px;right:8px;width:7px;height:7px;background:var(--blue);border-radius:50%;border:1.5px solid #fff}
.brand{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:4px}.brand .material-icons-round{font-size:26px;color:var(--blue)}
.brand-name{font-size:20px;font-weight:400;color:var(--t2);letter-spacing:-.3px;white-space:nowrap}.brand-name b{color:var(--t1);font-weight:400}
.tsearch{flex:0 1 480px;display:flex;align-items:center;gap:8px;background:var(--s1);border-radius:24px;padding:0 16px;height:44px;margin:0 12px;cursor:text;transition:background .15s,box-shadow .15s}.tsearch:focus-within,.tsearch:hover{background:var(--s0);box-shadow:var(--sh1)}.tsearch input{border:none;background:none;outline:none;flex:1;font-size:16px;font-family:'Google Sans',sans-serif;color:var(--t1)}.tsearch input::placeholder{color:var(--t2);font-size:15px}.tsearch .material-icons-round{color:var(--t2);font-size:20px;flex-shrink:0}
.tb-sp{flex:1}.tb-acts{display:flex;align-items:center;gap:2px}
.role-badge{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 14px;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--s0);transition:background .15s;min-width:160px;max-width:220px;white-space:nowrap}.role-badge:hover{background:var(--s1)}
.rdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.rc .rdot{background:var(--blue)}.rp .rdot{background:var(--t1)}.ro .rdot{background:var(--green)}
.rb-lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;cursor:pointer;flex-shrink:0;margin-left:4px}.rc .avatar{background:var(--blue)}.rp .avatar{background:var(--t1)}.ro .avatar{background:var(--green)}
.app-body{display:flex;padding-top:calc(var(--bh) + var(--top-h));min-height:100vh}
.sidebar{position:fixed;top:calc(var(--bh) + var(--top-h));left:0;bottom:0;width:var(--sb-w);background:var(--s0);overflow:hidden;z-index:100;transition:width .2s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}.sidebar.exp{width:var(--sb-exp);box-shadow:var(--sh1)}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:99}.sb-backdrop.show{display:block}
.nav-item{display:flex;align-items:center;height:48px;padding:0 12px;cursor:pointer;color:var(--t2);white-space:nowrap;text-decoration:none;position:relative}
.nav-icon{width:48px;height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;border-radius:24px;transition:background .15s;flex-shrink:0}.nav-icon .material-icons-round{font-size:20px}
.nav-item:hover .nav-icon{background:var(--s2)}.nav-item.active .nav-icon{background:var(--blue-pill)}.nav-item.active{color:var(--t1)}.nav-item.active .nav-icon .material-icons-round{color:var(--blue)}
.nav-lbl{font-size:14px;font-weight:500;color:var(--t1);margin-left:4px;opacity:0;transition:opacity .1s .05s;pointer-events:none;overflow:hidden}.sidebar.exp .nav-lbl{opacity:1;pointer-events:auto}
.nav-dot{position:absolute;top:8px;left:42px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;border-radius:50%;font-size:9px;font-weight:700;border:2px solid #fff;transition:opacity .15s}.sidebar.exp .nav-dot{opacity:0;pointer-events:none}
.nav-cnt{display:none;min-width:20px;height:20px;border-radius:10px;align-items:center;justify-content:center;font-size:11px;font-weight:700;padding:0 5px;margin-left:auto}.sidebar.exp .nav-cnt{display:inline-flex}
.cnt-r{background:var(--red);color:#fff}.cnt-b{background:var(--blue);color:#fff}
.nav-sec{height:0;overflow:hidden;font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--t3);padding:0 20px;display:flex;align-items:center;transition:height .15s;white-space:nowrap;font-family:'Roboto',sans-serif}.sidebar.exp .nav-sec{height:36px}
.nav-div{height:1px;background:var(--border);margin:4px 0}
.sub-item{display:none;height:36px;padding:0 16px 0 64px;font-size:13px;color:var(--t2);cursor:pointer;align-items:center;gap:8px;white-space:nowrap;font-family:'Roboto',sans-serif}.sidebar.exp .sub-item.on{display:flex}.sub-item:hover{background:var(--s1);color:var(--t1)}
.rep-ch{font-size:16px;color:var(--t2);margin-left:auto;transition:transform .2s;flex-shrink:0}
.main{margin-left:var(--sb-w);flex:1;padding:32px 28px 28px;transition:margin-left .2s;min-width:0;max-width:1600px}.sidebar.exp~.main{margin-left:var(--sb-exp)}
.page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}.page-title{font-size:22px;font-weight:400;color:var(--t1)}.page-sub{font-size:13px;color:var(--t2);margin-top:3px;font-family:'Roboto',sans-serif}
.home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.span3{grid-column:span 3}.span1{grid-column:span 1}
@media(max-width:1100px){.home-grid{grid-template-columns:repeat(2,1fr)}.span3,.span1{grid-column:span 2}}
@media(max-width:600px){.home-grid{grid-template-columns:1fr}.span3,.span1{grid-column:span 1}}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.kpi-tile{background:var(--s0);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px}.kpi-lbl{font-size:11px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;color:var(--t2);font-family:'Roboto',sans-serif;margin-bottom:10px}.kpi-val{font-size:40px;font-weight:300;line-height:1;margin-bottom:6px}.kpi-val.red{color:var(--red)}.kpi-val.amber{color:#e37400}.kpi-val.green{color:var(--green)}.kpi-sub{font-size:12px;color:var(--t2);font-family:'Roboto',sans-serif;display:flex;align-items:center;gap:3px}.kpi-sub .material-icons-round{font-size:14px}.kpi-sub.up{color:var(--green)}.kpi-sub.dn{color:var(--red)}
.alert{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r);font-size:13px;font-family:'Roboto',sans-serif;margin-bottom:20px}.alert .material-icons-round{font-size:18px;flex-shrink:0}.alert.r{background:var(--red-lt);color:#c5221f}.alert.b{background:var(--blue-lt);color:#1557b0}.alert.a{background:var(--amber-lt);color:#b06000}
.alert-link{color:var(--blue);cursor:pointer;font-weight:500;white-space:nowrap;margin-left:auto}
.two-col{display:grid;grid-template-columns:3fr 2fr;gap:16px;align-items:start}
.card{background:var(--s0);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;margin-bottom:16px}.card:last-child,.card.mb0{margin-bottom:0}.card-hd{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--t1);margin-bottom:16px}.card-hd-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.rag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-family:'Roboto',sans-serif;white-space:nowrap}.rag-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}.rag.g .rag-dot{background:var(--green)}.rag.g{color:#137333}.rag.a .rag-dot{background:var(--amber)}.rag.a{color:#b06000}.rag.r .rag-dot{background:var(--red)}.rag.r{color:#c5221f}
.rag-dot-only{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}.rag-dot-only.g{background:var(--green)}.rag-dot-only.a{background:var(--amber)}.rag-dot-only.r{background:var(--red)}
.dt{width:100%;border-collapse:collapse;font-size:13px;font-family:'Roboto',sans-serif}.dt th{text-align:left;padding:0 16px 10px;font-size:11px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;color:var(--t2);border-bottom:1px solid var(--border);white-space:nowrap}.dt td{padding:11px 16px;border-bottom:1px solid var(--s2);color:var(--t1);vertical-align:middle}.dt tr:last-child td{border-bottom:none}.dt tbody tr:hover td{background:var(--s1);cursor:pointer}.dt td.num,.dt th.num{text-align:right}.dt td.ctr,.dt th.ctr{text-align:center}
.pipe-item{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--s2);gap:12px}.pipe-item:last-child{border-bottom:none}.pipe-text{flex:1;min-width:0}.pipe-name{font-size:13px;font-weight:500;color:var(--t1)}.pipe-sub{font-size:12px;color:var(--t2);margin-top:1px;font-family:'Roboto',sans-serif}.pipe-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.pipe-date{font-size:12px;color:var(--t2);font-family:'Roboto',sans-serif;white-space:nowrap}
.sup-item{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--s2);gap:12px}.sup-item:last-child{border-bottom:none}.sup-name{font-size:13px;font-weight:500}.sup-line{font-size:12px;color:var(--t2);font-family:'Roboto',sans-serif}.sup-score{font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 20px;height:36px;border-radius:var(--r2);font-size:14px;font-weight:500;font-family:'Google Sans',sans-serif;cursor:pointer;border:none;white-space:nowrap;transition:background .15s}.btn-p{background:var(--blue);color:#fff}.btn-p:hover{background:var(--blue-dk)}.btn-o{background:transparent;color:var(--blue);border:1px solid var(--border)}.btn-o:hover{background:var(--blue-lt)}.btn-val{background:var(--blue);color:#fff}.btn-app{background:var(--green);color:#fff}.btn-ret{background:var(--red);color:#fff}.btn .material-icons-round{font-size:18px}
.bdg{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;padding:0;line-height:1;flex-shrink:0}.bdg-r{color:var(--red);background:none}.bdg-b{color:var(--blue);background:none}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:16px;font-size:13px;font-weight:500;font-family:'Roboto',sans-serif;border:1px solid var(--border);background:var(--s0);color:var(--t2);cursor:pointer;transition:all .1s}.chip:hover{border-color:var(--t2);color:var(--t1)}.chip-active{background:var(--blue-lt);border-color:var(--blue-lt);color:var(--blue)}
.sla-g{color:var(--green);font-weight:500}.sla-a{color:#e37400;font-weight:500}.sla-r{color:var(--red);font-weight:500}
.score-ring{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:500;border:3px solid;flex-shrink:0}.score-ring.g{color:var(--green);border-color:var(--green);background:var(--green-lt)}.score-ring.a{color:#e37400;border-color:var(--amber);background:var(--amber-lt)}.score-ring.r{color:var(--red);border-color:var(--red);background:var(--red-lt)}
.sup-tab{padding:12px 20px;border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .15s;min-width:140px}.sup-tab:hover,.sup-tab-active{border-color:var(--blue);background:var(--blue-lt)}
.rmodal{display:none;position:fixed;inset:0;background:rgba(32,33,36,.5);z-index:900;align-items:flex-start;justify-content:flex-end;padding:calc(var(--bh) + var(--top-h) + 4px) 16px 0}.rmodal-box{background:#fff;border-radius:8px;box-shadow:var(--sh2);min-width:280px;border:1px solid var(--border);overflow:hidden}
.rmi{display:flex;align-items:flex-start;gap:14px;padding:12px 20px;cursor:pointer}.rmi:hover{background:var(--s1)}.rmi-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.flex{display:flex}.fc{align-items:center}.fb{justify-content:space-between}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}
.ts{color:var(--t2)}.tsm{font-size:12px;font-family:'Roboto',sans-serif}.fw5{font-weight:500}.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bm);border-radius:3px}
@media(max-width:900px){.two-col{grid-template-columns:1fr}.kpi-row{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.main{margin-left:0!important;padding:16px}.kpi-row{gap:8px}.kpi-tile{padding:14px 16px}.kpi-val{font-size:32px}.tsearch,.brand-name{display:none}}
/* ── GANTT / PIPELINE ─────────────────────────────── */
.gantt-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.gantt { min-width: 860px; }
.gantt-head {
  display: flex; align-items: stretch;
  border-bottom: 2px solid var(--border);
  position: sticky; top: 0; background: var(--s0); z-index: 10;
}
.gantt-lbl { width: 220px; min-width: 220px; flex-shrink: 0; padding: 8px 0; }
.gantt-tl { flex: 1; position: relative; min-height: 36px; }
.gantt-month {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 4px;
}
.gantt-month-lbl { font-size: 10px; font-family: 'Roboto',sans-serif; color: var(--t2); white-space: nowrap; padding-left: 4px; }
.gantt-month-year { font-size: 9px; color: var(--t3); font-family: 'Roboto',sans-serif; padding-left: 4px; margin-top: 1px; }
.gantt-month-line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--s2); }
.gantt-today-hd { position: absolute; top: 0; width: 2px; background: var(--blue); opacity: 0.6; bottom: 0; }
.gantt-row {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--s2);
  transition: background .1s;
}
.gantt-row:hover { background: var(--s1); }
.gantt-row.expanded { background: var(--s1); }
.gantt-row-lbl {
  width: 220px; min-width: 220px; flex-shrink: 0;
  padding: 8px 8px 8px 0;
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
}
.gantt-row-lbl .expand-btn {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px; color: var(--t2); font-size: 12px;
  transition: background .1s;
}
.gantt-row:hover .expand-btn { background: var(--s2); }
.gantt-row-name { font-size: 13px; font-weight: 500; color: var(--t1); }
.gantt-row-sub { font-size: 11px; color: var(--t2); font-family: 'Roboto',sans-serif; margin-top: 2px; }
.gantt-bars { flex: 1; position: relative; min-height: 36px; }
/* Sub-rows (expanded) */
.gantt-sub { display: none; }
.gantt-sub.open { display: block; }
.gantt-sub-row { display: flex; align-items: stretch; border-top: 1px solid var(--s2); }
.gantt-sub-lbl {
  width: 220px; min-width: 220px; flex-shrink: 0;
  padding: 4px 8px 4px 28px;
  font-size: 11px; color: var(--t2); font-family: 'Roboto',sans-serif;
  display: flex; align-items: center;
}
.gantt-sub-bars { flex: 1; position: relative; min-height: 28px; }
/* Bar elements */
.g-bar {
  position: absolute; height: 10px; border-radius: 3px;
  top: 50%; transform: translateY(-50%);
}
.g-bc   { background: #1a73e8; opacity: 0.85; }
.g-tma  { background: #f9ab00; opacity: 0.85; }
.g-riba { background: #1e8e3e; opacity: 0.85; }
.g-riba-ft { background: #1e8e3e; opacity: 0.3; }
.g-tma-only { background: #f9ab00; opacity: 0.7; }
/* Parallel zone */
.g-parallel {
  position: absolute; top: 0; bottom: 0;
  background: rgba(249,171,0,0.08);
  border-left: 1px dashed rgba(249,171,0,0.4);
  border-right: 1px dashed rgba(249,171,0,0.4);
}
/* Gate lines */
.g-gate { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: 0.6; }
.g-gate-hard { width: 2px; background: var(--red); opacity: 0.5; }
/* Milestone markers */
.g-ms {
  position: absolute; width: 10px; height: 10px;
  top: 50%; transform: translateY(-50%) translateX(-50%);
  border-radius: 50%; border: 2px solid #fff;
  cursor: pointer; z-index: 5;
  box-shadow: 0 0 0 1px currentColor;
}
.g-ms-la1 { background: #f9ab00; color: #f9ab00; border-radius: 2px; transform: translateY(-50%) translateX(-50%) rotate(45deg); }
.g-ms-la2 { background: #1a73e8; color: #1a73e8; border-radius: 2px; transform: translateY(-50%) translateX(-50%) rotate(45deg); width: 12px; height: 12px; }
/* Today line */
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--blue); opacity: 0.5; z-index: 8; }
.g-today::after {
  content: 'Today'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-family: 'Roboto',sans-serif; color: var(--blue); white-space: nowrap; font-weight: 500;
}
/* Legend */
.gantt-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; align-items: center; }
.g-leg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); font-family: 'Roboto',sans-serif; }
.g-leg-bar { width: 20px; height: 8px; border-radius: 2px; }
.g-leg-ms { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); }