:root{
  color-scheme: light;
  --surface-1:#fcfcfb; --page:#f2f2ef; --panel:#ffffff;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --muted:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7; --border:rgba(11,11,11,0.10);
  --border-strong:rgba(11,11,11,0.16);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4;
  --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --good-ink:#006300;
  --accent:#2a78d6; --accent-weak:#e8f1fc; --accent-ink:#184f95;
  --shadow:0 1px 2px rgba(11,11,11,.06),0 4px 16px rgba(11,11,11,.06);
  --shadow-lg:0 8px 40px rgba(11,11,11,.18);
  --radius:12px; --radius-sm:8px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html[data-theme="dark"]{
  color-scheme: dark;
  --surface-1:#1a1a19; --page:#0d0d0d; --panel:#1f1f1e;
  --text-primary:#ffffff; --text-secondary:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --baseline:#383835; --border:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.18);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181;
  --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --good-ink:#0ca30c;
  --accent:#3987e5; --accent-weak:#16304d; --accent-ink:#9ec5f4;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 8px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);background:var(--page);color:var(--text-primary);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--accent);text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--baseline);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

#app{display:grid;grid-template-columns:232px 1fr;height:100vh;overflow:hidden}
.sidebar{background:var(--surface-1);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--s1),var(--s7));display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;flex:none}
.brand .name{font-weight:700;font-size:16px;letter-spacing:-.2px}
.brand .sub{font-size:11px;color:var(--muted);font-weight:500}
.nav{padding:6px 10px;overflow-y:auto;flex:1}
.nav-section{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--text-secondary);font-weight:500;font-size:13.5px;margin-bottom:1px;cursor:pointer}
.nav a:hover{background:var(--accent-weak);color:var(--text-primary)}
.nav a.active{background:var(--accent);color:#fff}
.nav a .ico{width:18px;height:18px;flex:none;opacity:.85;text-align:center}
.nav a .badge{margin-left:auto;background:var(--critical);color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px;min-width:18px;text-align:center}
.nav a.active .badge{background:rgba(255,255,255,.25)}
.side-foot{padding:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.userchip{display:flex;align-items:center;gap:9px;padding:6px 4px}
.userchip .av{width:30px;height:30px;border-radius:8px;background:var(--accent-weak);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.userchip .nm{font-weight:650;font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userchip .rl{font-size:11px;color:var(--muted)}
.side-foot .row{display:flex;gap:8px}
.side-foot button{flex:1;background:transparent;border:1px solid var(--border-strong);color:var(--text-secondary);border-radius:8px;padding:7px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.side-foot button:hover{background:var(--accent-weak);color:var(--text-primary)}

.main{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.topbar{display:flex;align-items:center;gap:16px;padding:12px 22px;border-bottom:1px solid var(--border);background:var(--surface-1);flex:none}
.topbar h1{font-size:18px;font-weight:700;letter-spacing:-.3px}
.topbar .crumb{font-size:12px;color:var(--muted);font-weight:500}
.search{margin-left:auto;position:relative;width:320px;max-width:34vw}
.search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--border-strong);border-radius:10px;background:var(--panel);color:var(--text-primary)}
.search input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.search .si{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search-results{position:absolute;top:44px;left:0;right:0;background:var(--panel);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow-lg);max-height:60vh;overflow-y:auto;z-index:60;display:none;padding:6px}
.search-results.open{display:block}
.sr-group{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:8px 10px 4px}
.sr-item{padding:8px 10px;border-radius:8px;cursor:pointer;display:flex;gap:8px;align-items:center}
.sr-item:hover{background:var(--accent-weak)}
.sr-item .t{font-weight:600}
.sr-item .m{font-size:12px;color:var(--muted);margin-left:auto}
.content{flex:1;overflow-y:auto;padding:22px}

.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;font-weight:600;font-size:13px;border:1px solid transparent;background:var(--panel);color:var(--text-primary);white-space:nowrap}
.btn:hover{background:var(--accent-weak)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border-color:var(--border-strong);background:transparent}
.btn.ghost:hover{background:var(--accent-weak)}
.btn.danger{color:var(--critical);border-color:var(--border-strong);background:transparent}
.btn.danger:hover{background:var(--critical);color:#fff;border-color:transparent}
.btn.sm{padding:5px 10px;font-size:12px}

.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:18px}
.tile{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.tile .label{font-size:12px;color:var(--text-secondary);font-weight:600;display:flex;align-items:center;gap:7px}
.tile .val{font-size:27px;font-weight:750;letter-spacing:-.5px;margin-top:8px;line-height:1.1}
.tile .delta{font-size:12px;font-weight:600;margin-top:4px}
.tile .delta.up{color:var(--good-ink)} .tile .delta.down{color:var(--critical)}
.tile .tico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent-weak);color:var(--accent);float:right}

.panel{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}
.panel-h h3{font-size:15px;font-weight:700}
.panel-h .sub{font-size:12px;color:var(--muted)}
.panel-b{padding:18px}
.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
@media(max-width:1050px){.two-col{grid-template-columns:1fr}}

.tablewrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--surface-1)}
table.data td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.data tbody tr{cursor:pointer}
table.data tbody tr:hover{background:var(--accent-weak)}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:48px 20px;text-align:center;color:var(--muted)}
.empty .big{font-size:15px;font-weight:600;color:var(--text-secondary);margin-bottom:4px}

.badge-s{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.b-gray{background:var(--grid);color:var(--text-secondary)}
.b-blue{background:var(--accent-weak);color:var(--accent-ink)}
.b-green{background:rgba(12,163,12,.14);color:var(--good-ink)}
.b-amber{background:rgba(250,178,25,.18);color:#8a5a00}
.b-red{background:rgba(208,59,59,.14);color:var(--critical)}
.b-orange{background:rgba(235,104,52,.16);color:#b34418}
.b-violet{background:rgba(74,58,167,.14);color:#4a3aa7}
html[data-theme="dark"] .b-amber{color:var(--warning)}
html[data-theme="dark"] .b-orange{color:var(--serious)}
html[data-theme="dark"] .b-violet{color:var(--s7)}

.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:600;color:var(--text-secondary)}
input.inp,select.inp,textarea.inp,button.inp{width:100%;padding:9px 11px;border:1px solid var(--border-strong);border-radius:9px;background:var(--panel);color:var(--text-primary)}
input.inp:focus,select.inp:focus,textarea.inp:focus,button.inp:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
textarea.inp{resize:vertical;min-height:70px}
select.inp,button.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23898781' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
button.inp{text-align:left;font:inherit;cursor:pointer}
.chipbar{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:20px;border:1px solid var(--border-strong);background:var(--panel);font-size:12.5px;font-weight:600;color:var(--text-secondary)}
.chip.active{background:var(--accent);color:#fff;border-color:transparent}
.chip:hover{background:var(--accent-weak);color:var(--text-primary)}
.chip.active:hover{background:var(--accent);color:#fff}

.board{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;align-items:flex-start;min-height:60vh}
.col{background:var(--page);border:1px solid var(--border);border-radius:var(--radius);width:280px;flex:none;display:flex;flex-direction:column;max-height:calc(100vh - 190px)}
html[data-theme="dark"] .col{background:#141413}
.col-h{padding:11px 13px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.col-h .ct{font-weight:700;font-size:13px}
.col-h .cc{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-1);border:1px solid var(--border);padding:1px 8px;border-radius:10px}
.col-h .cbar{width:8px;height:8px;border-radius:3px;flex:none}
.col-h .csum{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.col-b{padding:9px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;flex:1;min-height:60px}
.col-b.drag-over{background:var(--accent-weak);outline:2px dashed var(--accent);outline-offset:-6px;border-radius:8px}
.load-card{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:11px 12px;box-shadow:var(--shadow);cursor:grab;border-left:3px solid var(--accent)}
.load-card:hover{border-color:var(--border-strong)}
.load-card.dragging{opacity:.45}
.load-card .ref{font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:6px}
.load-card .lane{font-size:12.5px;font-weight:600;margin:6px 0 2px;display:flex;align-items:center;gap:5px}
.load-card .meta{font-size:11.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 10px}
.load-card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px solid var(--border)}
.load-card .rate{font-weight:700;font-variant-numeric:tabular-nums}
.load-card .marg{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.marg.pos{color:var(--good-ink)} .marg.neg{color:var(--critical)}

.split{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.detail-grid{display:grid;grid-template-columns:1fr;gap:16px}
.mini-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;gap:10px}
.mini-row:last-child{border-bottom:none}
.mini-row .k{color:var(--muted);font-weight:500}
.mini-row .v{font-weight:600;text-align:right}
.avatar{width:38px;height:38px;border-radius:10px;background:var(--accent-weak);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.list-item{display:flex;gap:12px;align-items:center;padding:11px 6px;border-bottom:1px solid var(--border);cursor:pointer}
.list-item:hover{background:var(--accent-weak)}
.list-item:last-child{border-bottom:none}
.li-main{min-width:0;flex:1}
.li-main .t{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-main .s{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.owner-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-secondary)}
.owner-chip .oa{width:22px;height:22px;border-radius:6px;background:var(--accent-weak);color:var(--accent);display:grid;place-items:center;font-size:10px;font-weight:700;flex:none}
.owner-chip.none{color:var(--muted)}
.owner-chip.none .oa{background:var(--grid);color:var(--muted)}

.task-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-1);margin-bottom:9px}
.task-item.overdue{border-left:3px solid var(--critical)}
.task-item.today{border-left:3px solid var(--warning)}
.task-item.done{opacity:.55}
.task-item.done .tt{text-decoration:line-through}
.check{width:20px;height:20px;border-radius:6px;border:2px solid var(--baseline);flex:none;margin-top:1px;display:grid;place-items:center;cursor:pointer;background:var(--panel)}
.check.on{background:var(--good);border-color:var(--good)}
.task-item .tt{font-weight:600}
.task-item .tm{font-size:12px;color:var(--muted);margin-top:2px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.task-item .due{font-weight:600}
.due.od{color:var(--critical)} .due.td{color:#8a5a00}
html[data-theme="dark"] .due.td{color:var(--warning)}
.group-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:20px 0 10px}
.group-h:first-child{margin-top:0}

.overlay{position:fixed;inset:0;background:rgba(11,11,11,.42);backdrop-filter:blur(2px);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:40px 16px;overflow-y:auto}
.overlay.open{display:flex}
.modal{background:var(--panel);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:640px;border:1px solid var(--border);animation:pop .16s ease}
.modal.wide{max-width:820px}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-h{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-h h3{font-size:17px;font-weight:700;flex:1}
.modal-h .x{background:transparent;border:none;color:var(--muted);font-size:22px;line-height:1;padding:4px 8px;border-radius:8px}
.modal-h .x:hover{background:var(--accent-weak);color:var(--text-primary)}
.modal-b{padding:22px;max-height:66vh;overflow-y:auto}
.modal-f{display:flex;gap:10px;padding:16px 22px;border-top:1px solid var(--border);justify-content:flex-end}
.modal-f .spacer{flex:1}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}

#toasts{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--text-primary);color:var(--page);padding:11px 16px;border-radius:10px;font-weight:600;font-size:13px;box-shadow:var(--shadow-lg);animation:slidein .2s ease;display:flex;gap:9px;align-items:center}
.toast.good{background:var(--good)} .toast.bad{background:var(--critical)}
@keyframes slidein{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

.chart svg{display:block;width:100%;overflow:visible}
.chart-tip{position:fixed;background:var(--text-primary);color:var(--page);padding:7px 10px;border-radius:8px;font-size:12px;font-weight:600;pointer-events:none;z-index:150;box-shadow:var(--shadow-lg);display:none;white-space:nowrap}
.axis-lbl{fill:var(--muted);font-size:11px;font-family:var(--sans)}

.section-title{font-size:13px;font-weight:700;color:var(--text-secondary);margin:4px 0 12px;display:flex;align-items:center;gap:8px}
.hint{font-size:12px;color:var(--muted)}
.tag{display:inline-block;padding:1px 8px;border-radius:6px;background:var(--grid);font-size:11px;font-weight:600;color:var(--text-secondary)}
.linkish{color:var(--accent);font-weight:600;cursor:pointer}
.linkish:hover{text-decoration:underline}
.divider{height:1px;background:var(--border);margin:16px 0}
.pill-note{background:var(--accent-weak);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--text-secondary)}
.mono{font-variant-numeric:tabular-nums}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(1200px 500px at 50% -10%, rgba(42,120,214,.10), transparent),var(--page);padding:20px}
.login-card{width:100%;max-width:400px;background:var(--surface-1);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:30px 28px}
.login-card .logo{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--s1),var(--s7));display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;margin-bottom:16px}
.login-card h1{font-size:21px;font-weight:750;letter-spacing:-.3px}
.login-card p.sub{color:var(--muted);font-size:13px;margin:4px 0 20px}
.login-card .field{margin-bottom:14px}
.login-card .btn.primary{width:100%;justify-content:center;padding:11px;margin-top:4px}
.login-err{background:rgba(208,59,59,.12);color:var(--critical);border-radius:9px;padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:14px;display:none}
.login-err.show{display:block}
.login-foot{margin-top:18px;font-size:12px;color:var(--muted);text-align:center;line-height:1.6}