:root{
  --bg:#f7f8fa; --panel:#ffffff; --text:#1c2330; --muted:#6b7280;
  --border:#e2e5ea; --accent:#2f6feb;
  --ontrack:#3aa66f; --ontrack-bg:#e3f5ea;
  --delay:#d1495b; --delay-bg:#fbe6e9;
  --plan:#c9cfda;
  --warn:#b7791f; --warn-bg:#fdf3e1;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14171c; --panel:#1b1f27; --text:#e7e9ee;
    --border:#2b3038; --accent:#5b8def;
    --ontrack:#4fbf85; --ontrack-bg:#173327;
    --delay:#e5677a; --delay-bg:#3a1f24;
    --plan:#3a4150;
    --warn:#e0a44a; --warn-bg:#3a2f1c;
  }
}
:root[data-theme="dark"]{
  --bg:#14171c; --panel:#1b1f27; --text:#e7e9ee;
  --border:#2b3038; --accent:#5b8def;
  --ontrack:#4fbf85; --ontrack-bg:#173327;
  --delay:#e5677a; --delay-bg:#3a1f24;
  --plan:#3a4150;
  --warn:#e0a44a; --warn-bg:#3a2f1c;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:14px;
}
main{max-width:1400px;margin:0 auto;padding:16px}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--border);
}
.brand{font-weight:700; color:var(--text); text-decoration:none}
.btn, .btn-danger{
  display:inline-block; padding:8px 14px; border-radius:8px; border:1px solid var(--accent);
  background:var(--accent); color:#fff; text-decoration:none; cursor:pointer; font-size:14px;
}
.btn-danger{border-color:var(--delay); background:var(--delay)}
.back{color:var(--accent); text-decoration:none; display:inline-block; margin-bottom:10px}
.flash{background:var(--ontrack-bg); color:var(--ontrack); padding:8px 14px; border-radius:8px; margin-bottom:12px}

.filters{margin:14px 0; display:flex; flex-wrap:wrap; gap:18px; align-items:end}
.filter-row{display:flex; gap:14px; flex-wrap:wrap}
.filter-row label, .new-quarter-form label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted)}
.new-quarter-form{display:flex; gap:8px; align-items:end}
.btn-secondary{padding:7px 12px; border-radius:8px; border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer}
select, input[type=text]{padding:6px 9px; border:1px solid var(--border); border-radius:6px; background:var(--panel); color:var(--text)}

.section-title{margin:22px 0 10px; font-size:16px}
.empty-state{padding:28px; text-align:center; color:var(--muted); background:var(--panel); border:1px dashed var(--border); border-radius:10px}

.chart-card{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px; overflow-x:auto}
.chart-axis-label{font-size:9px; fill:var(--muted)}
.chart-baseline{stroke:var(--border); stroke-width:1}

.legend{display:flex; align-items:center; gap:14px; margin-top:10px; font-size:12px; color:var(--muted); flex-wrap:wrap}
.chip{width:12px; height:12px; border-radius:3px; display:inline-block; margin-right:2px}

.table-wrap{overflow-x:auto; background:var(--panel); border:1px solid var(--border); border-radius:10px}
table.gantt{border-collapse:collapse; width:100%; min-width:1100px}
table.gantt th, table.gantt td{border:1px solid var(--border); padding:6px 8px; text-align:left}
table.gantt thead th{background:var(--bg); position:sticky; top:0}
.week-head{text-align:center; width:26px; padding:4px}
.week-cell{width:26px; padding:0; height:26px; text-align:center; font-size:12px; font-weight:700}
.week-cell.plan{background:var(--plan)}
.week-cell.mark-ontrack{background:var(--ontrack); color:#fff}
.week-cell.mark-delay{background:var(--delay); color:#fff}
.title-cell a{color:var(--text)}
.num{text-align:center}
.empty{text-align:center; color:var(--muted); padding:24px}

.status{padding:2px 8px; border-radius:6px; font-size:12px; white-space:nowrap}
.status-в-работе{background:var(--plan); color:var(--text)}
.status-отложена{background:var(--delay-bg); color:var(--delay)}
.status-готова{background:var(--ontrack-bg); color:var(--ontrack)}

h1{margin-top:6px}
.meta{display:flex; gap:18px; flex-wrap:wrap; color:var(--muted); margin-bottom:12px}
.inline{margin-bottom:18px}

table.week-table{border-collapse:collapse; width:100%; max-width:640px; background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden}
table.week-table th, table.week-table td{border-bottom:1px solid var(--border); padding:6px 10px; text-align:left}
.muted{color:var(--muted)}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:640px; margin:14px 0}
.form-grid label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted)}
.form-grid label.wide{grid-column:1 / -1}
.form-grid input, .form-grid select, .form-grid textarea{
  padding:7px 9px; border:1px solid var(--border); border-radius:6px; background:var(--panel); color:var(--text); font-size:14px;
}
.week-checks{display:flex; flex-wrap:wrap; gap:8px}
.week-check{flex-direction:row !important; align-items:center; gap:4px !important; border:1px solid var(--border); padding:4px 8px; border-radius:6px}

.report{background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:10px 14px; margin-bottom:8px}
.report-date{font-size:12px; color:var(--muted)}
.danger-zone{margin-top:30px; padding-top:14px; border-top:1px dashed var(--border)}

.nav-links{display:flex; align-items:center; gap:14px}
.nav-links a:not(.btn){color:var(--accent); text-decoration:none; font-size:14px}

.feed-item{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:10px}
.feed-head{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:6px; font-size:13px}
.feed-week{color:var(--muted)}
.feed-who{color:var(--muted)}
.feed-date{margin-left:auto; font-size:12px}
.feed-task a{color:var(--text); font-weight:600; text-decoration:none}
.feed-comment{margin-top:6px; color:var(--text)}

/* авторизация и меню */
.user-menu{display:flex; align-items:center; gap:8px; padding-left:12px; border-left:1px solid var(--border)}
.inline-form{display:inline; margin:0}
.link-btn{background:none; border:none; color:var(--accent); cursor:pointer; font-size:14px; padding:0}
.auth-card{max-width:380px; margin:60px auto; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:24px}
.form-grid.single{grid-template-columns:1fr}
.flash.warn{background:var(--warn-bg); color:var(--warn)}
.actions-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:14px 0}
.btn-secondary{text-decoration:none; display:inline-block}
input[type=email], input[type=password], input[type=number], input[type=date]{padding:6px 9px; border:1px solid var(--border); border-radius:6px; background:var(--panel); color:var(--text)}
.checkbox-label{flex-direction:row !important; align-items:center; gap:6px !important}

/* KPI */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px}
.kpi-card{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 14px}
.kpi-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px}
.kpi-name{font-weight:600}
.kpi-pct{font-size:24px; font-weight:700; font-variant-numeric:tabular-nums}
.kpi-pct.good{color:var(--ontrack)} .kpi-pct.warn{color:var(--warn)} .kpi-pct.bad{color:var(--delay)}
.kpi-bar{display:flex; gap:2px; height:8px; border-radius:4px; overflow:hidden; background:var(--bg)}
.kpi-bar .seg{display:block; height:100%}
.seg.on-time{background:var(--ontrack)} .seg.late{background:var(--warn)} .seg.overdue{background:var(--delay)} .seg.pending{background:var(--plan)}
.kpi-legend{font-size:12px; color:var(--muted); margin-top:6px}
.kpi-forecast{font-size:12px; margin-top:4px}

.state{padding:1px 6px; border-radius:6px; font-size:11px; white-space:nowrap; margin-left:4px}
.state-overdue{background:var(--delay-bg); color:var(--delay)}
.state-late{background:var(--warn-bg); color:var(--warn)}
.state-on_time{background:var(--ontrack-bg); color:var(--ontrack)}
.state-pending, .state-postponed{background:var(--bg); color:var(--muted)}

/* гант: срок и текущая неделя */
.week-cell.mark-done{background:var(--ontrack); color:#fff}
.week-cell.deadline{box-shadow:inset 0 0 0 2px var(--text)}
.week-cell.current, .week-head.current{outline:2px solid var(--accent); outline-offset:-2px}
.chip-deadline{box-shadow:inset 0 0 0 2px var(--text)}
.chip-current{outline:2px solid var(--accent); outline-offset:-2px}
.row-deadline td{background:var(--bg)}
.row-highlight td{background:var(--ontrack-bg)}
table.week-table.wide-table{max-width:none}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}

/* недельный отчёт */
.weekly-form{max-width:760px}
.weekly-item{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin:0 0 12px; display:flex; flex-direction:column; gap:8px}
.weekly-item legend{font-weight:600; padding:0 4px}
.weekly-item label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted)}
.weekly-item textarea{padding:7px 9px; border:1px solid var(--border); border-radius:6px; background:var(--panel); color:var(--text); font-size:14px; font-family:inherit}
.weekly-item.has-error{border-color:var(--delay)}
.error-text{color:var(--delay); font-size:13px}
.radio-row{display:flex; gap:16px; flex-wrap:wrap}
.radio-row label{flex-direction:row; align-items:center; gap:6px; color:var(--text); font-size:14px}

@media (max-width: 720px){
  .topbar{flex-direction:column; align-items:flex-start; gap:8px}
  .nav-links{flex-wrap:wrap}
  .user-menu{border-left:none; padding-left:0}
  .form-grid{grid-template-columns:1fr}
}