:root{--navy:#17324d;--navy2:#24496e;--acc:#e07a2f;--bg:#f4f6f9;--card:#fff;--ink:#1b2733;--mute:#6b7a8a;--line:#dfe4ea;--ok:#2e8b57;--warn:#d9922b;--bad:#c8432f;--r:12px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){--bg:#10171f;--card:#192430;--ink:#e6ebf0;--mute:#93a1b0;--line:#2a3846;--navy:#0e2236;--navy2:#2c5683}}
:root[data-theme=dark]{--bg:#10171f;--card:#192430;--ink:#e6ebf0;--mute:#93a1b0;--line:#2a3846;--navy:#0e2236;--navy2:#2c5683}
:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding-bottom:84px}
a{color:var(--navy2);text-decoration:none}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]) a{color:#7fb2e6}}
:root[data-theme=dark] a{color:#7fb2e6}
h1{font-size:20px;margin:0}h2{font-size:15px;margin:0 0 10px}h3{font-size:14px;margin:14px 0 6px}
header.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:3px solid var(--acc)}
header.top .brand{font-weight:700;letter-spacing:.2px;font-size:17px;color:#fff}
header.top nav{display:none;gap:2px;flex:1;margin-left:14px}
header.top nav a{color:#cfdbe8;padding:6px 11px;border-radius:8px;font-size:14px}
header.top nav a.on{background:rgba(255,255,255,.15);color:#fff}
header.top .sp{flex:1}
.iconbtn{background:none;border:0;color:#fff;font-size:14px;padding:6px 8px;border-radius:8px;cursor:pointer}
main{max-width:1180px;margin:0 auto;padding:14px 16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sp{flex:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.grid{display:grid;gap:12px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.kpi .l{font-size:12px;color:var(--mute)}.kpi .v{font-size:22px;font-weight:700;margin-top:2px}.kpi .s{font-size:11px;color:var(--mute)}
.pos{color:var(--ok)}.neg{color:var(--bad)}
.cols2,.cols3{display:grid;gap:12px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
select,input,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 10px;width:100%}
.filters select{width:auto;padding:7px 9px}
textarea{min-height:80px;resize:vertical}
input[type=checkbox]{width:auto}
button{font:inherit;cursor:pointer}
.btn{background:var(--navy2);color:#fff;border:0;border-radius:9px;padding:9px 14px;font-weight:600}
.btn.acc{background:var(--acc)}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn.bad{background:var(--bad)}.btn.sm{padding:5px 10px;font-size:13px}
.chip{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:#e8edf3;color:#35495e;margin:1px 2px 1px 0}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]) .chip{background:#26394b;color:#c9d6e3}}
:root[data-theme=dark] .chip{background:#26394b;color:#c9d6e3}
.chip.High,.chip.High\ value,.chip.Won{background:#ddf2e5;color:#1d6b40}.chip.Active{background:#dbeaf9;color:#1f5f9b}
.chip.Inactive,.chip.Lost{background:#f6dcd7;color:#9b3322}.chip.New{background:#f6ecd0;color:#8a6212}.chip.Medium,.chip.Quoted{background:#f6ecd0;color:#8a6212}.chip.Low{background:#e8edf3;color:#5a6b7c}.chip.Negotiation{background:#e4dcf6;color:#4e3a8c}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;color:var(--mute);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
td.n,th.n{text-align:right;white-space:nowrap}
tr.click{cursor:pointer}tr.click:hover{background:rgba(127,127,127,.08)}
.scroll{overflow-x:auto}
.mute{color:var(--mute)}.small{font-size:12px}
.deal{border:1px solid var(--line);border-left:5px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--card);cursor:pointer}
.deal.High{border-left-color:var(--ok)}.deal.Medium{border-left-color:var(--warn)}.deal.Low{border-left-color:#9aa8b6}
.deal .t{font-weight:600}.deal .m{font-size:13px;color:var(--mute);margin-top:2px}.deal .v{font-weight:700;float:right}
.tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto}
.tabs button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:7px 14px;border-radius:99px;white-space:nowrap}
.tabs button.on{background:var(--navy2);color:#fff;border-color:var(--navy2)}
.board{display:grid;gap:12px}
.bar-wrap{display:flex;align-items:flex-end;gap:4px;height:130px;padding-top:6px}
.bar{flex:1;max-width:72px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:14px;height:100%}
.bar i{display:block;width:100%;background:var(--navy2);border-radius:4px 4px 0 0;min-height:2px}
.bar i.f{background:repeating-linear-gradient(45deg,var(--acc),var(--acc) 3px,#f0a56a 3px,#f0a56a 6px)}
.bar span{font-size:10px;color:var(--mute);margin-top:3px;white-space:nowrap}.bar b{font-size:10px;font-weight:600}
.hbar{height:8px;background:var(--line);border-radius:5px;overflow:hidden}.hbar i{display:block;height:100%;background:var(--navy2)}
nav.bottom{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:space-around;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
nav.bottom a{flex:1;text-align:center;padding:9px 0 8px;font-size:12px;color:var(--mute)}
nav.bottom a.on{color:var(--acc);font-weight:700}
nav.bottom a b{display:block;font-size:19px;line-height:1.1}
.fab{position:fixed;right:16px;bottom:78px;width:58px;height:58px;border-radius:50%;background:var(--acc);color:#fff;border:0;font-size:32px;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:31;line-height:1}
.overlay{position:fixed;inset:0;background:rgba(10,20,30,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:16px 16px 22px}
.sheet h2{font-size:17px}
.fld{margin-bottom:11px}.fld label{display:block;font-size:12px;color:var(--mute);margin-bottom:3px;font-weight:600}
.typegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.typegrid button{padding:13px 8px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;font-weight:600}
.typegrid button.on{background:var(--navy2);color:#fff;border-color:var(--navy2)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;background:#1b2733;color:#fff;padding:10px 16px;border-radius:10px;z-index:99;font-size:14px}
.toast.err{background:var(--bad)}
.rem{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}.rem:last-child{border:0}
.rem .k{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--acc);min-width:92px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.cal div{text-align:center;padding:9px 0;border-radius:8px;border:1px solid var(--line);font-size:13px;cursor:pointer}
.cal div.on{background:var(--ok);color:#fff;border-color:var(--ok)}.cal div.h{border:0;cursor:default;color:var(--mute);font-size:11px;padding:2px}.cal div.e{border:0;cursor:default}
.login{max-width:340px;margin:18vh auto;padding:0 20px}.login h1{margin-bottom:14px}
@media(min-width:800px){
 body{padding-bottom:20px}
 header.top nav{display:flex}nav.bottom{display:none}.fab{bottom:24px}
 .kpis{grid-template-columns:repeat(6,1fr)}.cols2{grid-template-columns:1fr 1fr}.cols3{grid-template-columns:repeat(3,1fr)}
 .board{grid-template-columns:repeat(3,1fr)}
 .overlay{align-items:center}.sheet{border-radius:18px}
 .kpi .v{font-size:20px}
}
@media print{header.top,nav.bottom,.fab,.filters{display:none}}

/* ---- restyle: clean sidebar (mockup A) ---- */
:root{--bg:#f5f6f8;--line:#e6e9ee;--navy2:#24496e;--hero:#17324d}
:root[data-theme=dark]{--hero:#24496e}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){--hero:#24496e}}
.card,.kpi{border-radius:14px;border-color:var(--line)}
.kpis:not(.flat) .kpi:first-child{background:var(--hero);color:#fff;border-color:var(--hero)}
.kpis:not(.flat) .kpi:first-child .l,.kpis:not(.flat) .kpi:first-child .s{color:#a9bdd2}
.kpis:not(.flat) .kpi:first-child .v{color:#fff;font-size:30px}
.kpi .v{color:var(--ink)}
.pagehead{display:flex;align-items:center;gap:12px;margin-bottom:16px}.pagehead h1{font-size:24px;color:var(--ink)}
.pill,.filters select{border-radius:99px}
.btn.pill{padding:9px 20px}
aside.side{display:none}
.app{display:block}
@media(min-width:800px){
 body{padding-bottom:0}
 .app{display:flex;min-height:100vh}
 aside.side{display:flex;flex-direction:column;gap:2px;width:220px;flex:none;position:sticky;top:0;height:100vh;background:var(--card);border-right:1px solid var(--line);padding:22px 14px}
 aside.side .logo{font-weight:700;font-size:18px;color:var(--navy2);padding:0 10px 18px}.aside.side .logo b,aside.side .logo b{color:var(--acc)}
 aside.side .sn{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--mute);font-size:14px}
 aside.side .sn i{width:8px;height:8px;border-radius:3px;background:var(--line)}
 aside.side .sn:hover{background:rgba(127,127,127,.08)}
 aside.side .sn.on{background:rgba(36,73,110,.10);color:var(--ink);font-weight:600}
 aside.side .sn.on i{background:var(--acc)}
 aside.side .me{border-top:1px solid var(--line);padding-top:10px;display:flex;justify-content:space-between}
 aside.side .iconbtn{color:var(--mute);font-size:13px}
 .content{flex:1;min-width:0}
 header.top{display:none}
 main{max-width:1180px;padding:26px 30px}
 .fab{display:none}
 .kpis{grid-template-columns:1.4fr repeat(5,1fr)}
 .kpis.flat{grid-template-columns:repeat(4,1fr)!important}
}
.fbar{height:16px;border-radius:8px;overflow:hidden;min-width:20px}.fbar i{display:block;height:100%;border-radius:8px}

/* ---- Stay Proactive brand theme: charcoal #374548, blush #ffcdd0, rose accent ---- */
:root{--bg:#fbf6f5;--card:#fff;--ink:#2b3436;--mute:#7b8689;--line:#efe3e2;--navy:#374548;--navy2:#374548;--acc:#d4606c;--hero:#374548;--blush:#ffcdd0}
:root[data-theme=dark]{--bg:#161c1e;--card:#1f282a;--ink:#eaf0f0;--mute:#98a6a9;--line:#2c383b;--navy:#1d2527;--navy2:#5d6f73;--hero:#3a4b4f;--blush:#4a3a3c}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){--bg:#161c1e;--card:#1f282a;--ink:#eaf0f0;--mute:#98a6a9;--line:#2c383b;--navy:#1d2527;--navy2:#5d6f73;--hero:#3a4b4f;--blush:#4a3a3c}}
:root[data-theme=dark] a{color:#f2b8bd}
header.top{background:var(--navy);border-bottom:3px solid var(--blush)}
header.top .brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.3px}
.mark{width:22px;height:auto;flex:none}
aside.side .logo{display:flex;align-items:center;gap:12px;color:var(--navy);padding:4px 10px 22px;font-weight:700;font-size:20px;line-height:1;letter-spacing:-.5px}
:root[data-theme=dark] aside.side .logo{color:#f2b8bd}
aside.side .logo .mark{width:34px}
aside.side .logo small{display:block;font-size:8.5px;letter-spacing:3.2px;font-weight:600;margin-top:5px;color:var(--mute)}
@media(min-width:800px){aside.side .sn.on{background:var(--blush);color:var(--ink)}aside.side .sn.on i{background:var(--acc)}}
.kpis:not(.flat) .kpi:first-child .l,.kpis:not(.flat) .kpi:first-child .s{color:#d9e0e1}
.bar i{background:var(--navy2)}
.bar i.f{background:repeating-linear-gradient(45deg,#d4606c,#d4606c 3px,#ffcdd0 3px,#ffcdd0 6px)}
.chip.Negotiation{background:#fbd9dc;color:#9b3340}
.tag,.rem .k{color:var(--acc)}
.loginlogo{width:100%;border-radius:18px;margin-bottom:18px;display:block}
.login{margin:8vh auto}
.btn.acc{background:var(--acc)}