:root { --g1:#667eea; --g2:#764ba2; --ink:#1d1d1f; --muted:#6b7280; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:#f4f5f7; color:var(--ink); }
.muted { color:var(--muted); font-size:13px; }
.err { color:#b91c1c; font-size:13px; margin-top:10px; }

/* --- вход --- */
.auth-bg { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--g1),var(--g2)); padding:16px; }
.auth-card { background:#fff; padding:28px; border-radius:14px; width:340px; box-shadow:0 10px 40px rgba(0,0,0,.25); }
.auth-card h1 { margin:0; font-size:20px; }
.auth-card .sub { margin:4px 0 18px; color:var(--muted); font-size:13px; }

label { display:block; font-size:13px; color:#374151; margin-bottom:12px; }
input { width:100%; margin-top:5px; padding:9px 11px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; }
input:focus { outline:none; border-color:var(--g1); }

button { background:var(--g1); color:#fff; border:0; padding:10px 14px; border-radius:8px; font-size:14px; cursor:pointer; }
button:hover { filter:brightness(1.06); }
button:disabled { opacity:.6; cursor:default; }
button.link { background:none; color:#374151; padding:6px 8px; font-size:13px; }

/* --- shell --- */
.topbar { display:flex; align-items:center; gap:16px; padding:12px 20px; background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff; }
.topbar .brand { font-weight:700; letter-spacing:.3px; }
.topbar .user { margin-left:auto; display:flex; align-items:center; gap:4px; font-size:13px; }
.topbar button.link { color:#fff; opacity:.9; }
.topbar button.link:hover { opacity:1; text-decoration:underline; }

.tabs { display:flex; gap:8px; flex-wrap:wrap; }

/* основной контейнер кабинета — широкий, центрированный (~80% окна) */
.wrap { max-width:1280px; margin:20px auto 40px; padding:0 24px; }
.card { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:20px; margin-bottom:16px; }
.card h2 { margin:0 0 10px; font-size:15px; }
.row { display:flex; gap:10px; align-items:center; margin-top:8px; }

/* --- модалка --- */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:1100; }
.modal[hidden] { display:none; }
.modal-card { background:#fff; padding:24px; border-radius:12px; width:340px; }
.modal-card.wide { width:460px; }
.modal-card h3 { margin:0 0 14px; font-size:16px; }
.modal-card select { width:100%; margin-top:5px; padding:9px 11px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; background:#fff; }

/* --- вкладки в шапке --- */
.tabbtn { background:rgba(255,255,255,.18); color:#fff; border:0; padding:7px 12px; border-radius:8px; font-size:13px; cursor:pointer; }
.tabbtn:hover { background:rgba(255,255,255,.28); }
.tabbtn.on { background:#fff; color:#4b3f9e; font-weight:600; }

/* --- модуль Таймшита --- */
.ts-top { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
label.inline { display:flex; align-items:center; gap:6px; margin:0; font-size:13px; color:#374151; }
label.inline input, label.inline select, .ts-top select { margin-top:0; width:auto; }
.ts-rows { display:flex; flex-direction:column; gap:8px; }
.ts-row { display:grid; grid-template-columns: 2fr 2fr 80px 3fr 28px; gap:8px; align-items:center; }
.ts-row select, .ts-row input { margin-top:0; }
.ts-del { color:#b91c1c; padding:4px 6px; }
.ts-edit { color:#4b3f9e; padding:4px 6px; }
#ts-total { margin:0 auto 0 8px; font-weight:600; color:#1d1d1f; }
.ts-day { margin-top:14px; font-size:13px; background:#eef3ff; border:1px solid #d7e1ff; border-radius:8px; padding:10px 12px; color:#374151; }
.ts-daylist { margin:6px 0 0; padding-left:18px; }
.ts-table { width:100%; border-collapse:collapse; font-size:13px; }
.ts-table th, .ts-table td { text-align:left; padding:6px 8px; border-bottom:1px solid #eef0f4; vertical-align:top; }
.ts-table th { color:#6b7280; font-weight:600; }
.ts-table td:last-child { white-space:nowrap; }
.toast { position:fixed; bottom:20px; right:20px; background:#0b1020; color:#fff; padding:11px 16px; border-radius:8px; font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.28); z-index:1200; max-width:360px; }

/* подвкладки таймшита */
.subtabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.subtab { background:#eef0f4; color:#374151; border:0; padding:7px 14px; border-radius:8px; font-size:13px; cursor:pointer; }
.subtab:hover { background:#e2e6ee; }
.subtab.on { background:var(--g1); color:#fff; font-weight:600; }
/* фильтры истории */
.ts-filters { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:12px; padding-bottom:14px; border-bottom:1px solid #eef0f4; }
.ts-filters input, .ts-filters select { margin-top:0; width:auto; }
/* справочники */
.ref-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ref-head h2 { margin:0; }
button.small { padding:7px 12px; font-size:13px; }
.ref-budget { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px 12px; align-items:center; margin-top:4px; }
.ref-budget input { margin-top:0; }
.ref-groups { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:4px; }
.ref-groups label.inline { margin:0; }
.modal-card.wide label.inline { display:flex; align-items:center; gap:6px; margin:8px 0; }
/* справочники — строки и пилюли */
.ref-add { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.ref-add input { margin-top:0; }
.ref-add input:first-child { flex:1; }
.ref-add input:nth-child(2) { width:120px; flex:none; }
.ref-add button { flex:none; }
.ref-add-groups { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:12px; font-size:13px; }
.ref-add-groups label.inline { margin:0; display:inline-flex; align-items:center; gap:5px; }
.ref-row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid #eef0f4; }
.ref-row-main { flex:1; min-width:0; }
.ref-pills { margin-top:6px; }
.ref-actions { display:flex; gap:2px; align-items:center; white-space:nowrap; }
.ref-actions button { background:none; border:0; cursor:pointer; font-size:15px; padding:5px 7px; border-radius:6px; color:#374151; }
.ref-actions button:hover { background:#f0f2f6; }
.ref-actions .icon-del { color:#b91c1c; }
.pill { display:inline-block; padding:2px 9px; border-radius:11px; font-size:12px; margin:2px 3px 0 0; white-space:nowrap; }
.pill-b { background:#e3f5e8; color:#1b7a3d; }
.pill-e { background:#ece9fb; color:#5b4bb3; }
.pill-code { background:#eef0f4; color:#374151; }
.pill-group { background:#e8eefc; color:#3b5bcc; }
.pill-all { background:#eef0f4; color:#6b7280; }

/* дашборд */
.kpi-row { display:flex; gap:0; flex-wrap:wrap; }
.kpi { flex:1; min-width:140px; text-align:center; padding:6px 12px; border-right:1px solid #eef0f4; }
.kpi:last-child { border-right:0; }
.kpi-v { font-size:26px; font-weight:700; color:#1d2333; }
.kpi-l { font-size:12px; color:#6b7280; margin-top:2px; }
.dash-filt-top { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.dash-filt-top input, .dash-filt-top select { margin-top:0; width:auto; }
.chip-lbl { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:#374151; margin:0; }
.multi-box { max-height:120px; overflow-y:auto; border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px; display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:4px; }
.dash-subtabs { margin-top:4px; }
.dash-h { margin:0 0 12px; font-size:13px; letter-spacing:.4px; color:#6b7280; text-transform:uppercase; }
.chart-scroll { max-height:70vh; overflow-y:auto; position:relative; }
.chart-scroll.mini { max-height:320px; }
.chart-scroll canvas { width:100% !important; }
/* drill-down */
.modal-card.drill { width:min(1100px,94vw); max-height:92vh; overflow-y:auto; }
.drill-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.drill-head h3 { margin:0; }
.crumbs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 0; }
.crumb { background:#eef2ff; color:#3b5bcc; padding:3px 10px; border-radius:10px; font-size:12px; cursor:pointer; }
.crumb.on { background:#3b5bcc; color:#fff; cursor:default; }
.crumb-sep { color:#9ca3af; }
.drill-cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:8px; }
.drill-col h4 { margin:0 0 8px; font-size:14px; }
.drill-tbl { margin-top:8px; }
.drill-row { cursor:pointer; }
.drill-row:hover { background:#f6f8fc; }
.drill-arrow { color:#3b5bcc; font-weight:700; }
@media (max-width:720px){ .drill-cols { grid-template-columns:1fr; } }