
:root{
  --bg:#f5f6fa;--card:#ffffff;--text:#1a1d23;--muted:#6b7280;--border:#e5e7eb;
  --accent:#2563eb;--accent-light:#dbeafe;--green:#059669;--green-bg:#d1fae5;
  --yellow:#d97706;--yellow-bg:#fef3c7;--red:#dc2626;--red-bg:#fee2e2;
  --gray:#6b7280;--gray-bg:#f3f4f6;--radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Golos Text Variable',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
.header{background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 100%);color:#fff;padding:28px 32px 20px}
.header h1{font-size:22px;font-weight:700;margin-bottom:4px}
.header .sub{font-size:13px;opacity:.85}
.container{max-width:1400px;margin:0 auto;padding:20px 24px}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--card);border-radius:var(--radius);padding:16px 18px;border:1px solid var(--border)}
.kpi .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.kpi .value{font-size:28px;font-weight:700}
.kpi .value.green{color:var(--green)}.kpi .value.yellow{color:var(--yellow)}.kpi .value.red{color:var(--red)}.kpi .value.blue{color:var(--accent)}
.filters{background:var(--card);border-radius:var(--radius);padding:16px 18px;border:1px solid var(--border);margin-bottom:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.filter-group{display:flex;flex-direction:column;gap:4px}
.filter-group label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.filter-group select,.filter-group input{font-family:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:#fff;min-width:160px}
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
@media(max-width:900px){.charts-row{grid-template-columns:1fr}}
.chart-card{background:var(--card);border-radius:var(--radius);padding:16px 16px 8px;border:1px solid var(--border)}
.chart-card h3{font-size:14px;font-weight:600;margin-bottom:10px}
.chart-scroll{overflow-x:auto}
.chart-svg{display:block}
.bar-label{font-size:11px;fill:var(--muted)}
.bar-num{font-size:11px;fill:var(--muted);font-weight:600}
.bar-axis{stroke:var(--border);stroke-width:1}
.bar-grid{stroke:var(--border);stroke-width:1;stroke-dasharray:3 3}
.table-section{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;margin-bottom:20px}
.table-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.table-header h3{font-size:15px;font-weight:600}
.table-count{font-size:12px;color:var(--muted)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:#f8f9fb;padding:10px 12px;text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);border-bottom:1px solid var(--border);position:sticky;top:0;white-space:nowrap}
tbody td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
tbody tr:hover{background:#f8fafc}
.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-profile{background:var(--accent-light);color:var(--accent)}
.status-select{font-family:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--border);border-radius:5px;background:#fff;cursor:pointer}
.col-id{font-weight:600;color:var(--accent);white-space:nowrap}
.col-pp{color:var(--muted);white-space:nowrap}
.col-title{min-width:300px}
.item-title{font-weight:500}
.item-detail{font-size:12px;color:var(--muted);margin-top:2px}
.continuous{font-size:10px;color:var(--muted);font-style:italic}
.deadline{white-space:nowrap;font-variant-numeric:tabular-nums}
.deadline.overdue{color:var(--red);font-weight:600}
.deadline.soon{color:var(--yellow);font-weight:600}
.dl-note{font-size:11px;color:var(--muted);font-weight:400}
.col-status{white-space:nowrap}
.col-progress{min-width:320px}
.statusform{display:inline-block}
.progressform{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:300px}
.in-owner{width:150px}.in-comment{width:230px}
.btn{display:inline-block;font-family:inherit;font-size:13px;padding:7px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text);cursor:pointer;text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-sm{padding:5px 10px;font-size:12px}
.empty{text-align:center;padding:24px;color:var(--muted)}
.legend{display:flex;gap:14px;flex-wrap:wrap;padding:10px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.legend-item{display:flex;align-items:center;gap:4px}
.legend-dot{width:10px;height:10px;border-radius:50%}
.dot-green{background:var(--green)}.dot-yellow{background:var(--yellow)}.dot-gray{background:var(--gray)}.dot-red{background:var(--red)}
.footer{text-align:center;padding:16px;font-size:11px;color:var(--muted)}
