/* COMPANY_OS panel — тёмная тема (токены DASHBOARD_DESIGN 05, WCAG AA+). v1 read-only. */
:root{
  --bg:#14181A; --surface:#1B2124; --surface-2:#232B2E; --border:#2E3A3E;
  --text-hi:#ECEFEC; --text-mid:#A9B2AE; --text-low:#6F7A76;
  --accent:#C9A24B; --st-todo:#8A938F; --st-progress:#5B93C9; --st-review:#E0A83E;
  --st-done:#4FB286; --st-block:#E5674E;
  --r-w:14px; --r-c:12px; --r-pill:8px; --shadow:0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text-hi);
  font-family:Inter,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.45;}
.hidden{display:none !important;}
.muted{color:var(--text-mid);} .small{font-size:12px;} .err{color:var(--st-block);}
/* header */
header{display:flex;align-items:center;gap:8px;padding:12px 18px;background:var(--surface);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;}
header b{font-weight:700;} header .sub{color:var(--text-low);font-size:12px;}
header .who{margin-left:auto;color:var(--text-mid);font-size:13px;}
button{cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--text-hi);
  border-radius:var(--r-pill);padding:6px 12px;font-size:13px;}
button:hover{background:var(--border);}
input{padding:9px 11px;border:1px solid var(--border);background:var(--bg);color:var(--text-hi);
  border-radius:var(--r-pill);font-size:14px;}
section{padding:0 18px 24px;} .wrap{max-width:1100px;margin:0 auto;}
h2{margin:18px 0 10px;font-size:20px;} h3.sec{font-size:14px;font-weight:600;color:var(--text-mid);margin:0 0 8px;}
/* login */
#login{max-width:320px;margin:48px auto;display:flex;flex-direction:column;gap:10px;}
/* карточки проектов */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-w);
  padding:16px;box-shadow:var(--shadow);}
.proj{cursor:pointer;transition:box-shadow .12s,border-color .12s;}
.proj:hover{border-color:var(--st-progress);box-shadow:0 6px 18px rgba(0,0,0,.5);}
.ptitle{font-weight:600;font-size:16px;} .focus{margin-top:8px;font-size:14px;color:var(--text-mid);}
.badges{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;}
.badge{font-size:12px;background:var(--surface-2);border-radius:20px;padding:2px 9px;color:var(--text-mid);}
.badge.b-red{background:rgba(229,103,78,.15);color:var(--st-block);}
.badge.b-hot{background:rgba(201,162,75,.15);color:var(--accent);}
/* топбар проекта */
.ptop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 6px;}
.ptop .pn{font-size:22px;font-weight:600;} .ptop .pm{color:var(--text-mid);}
.hint{color:var(--text-low);font-size:12px;border:1px dashed var(--border);border-radius:10px;
  padding:7px 11px;margin-bottom:14px;}
.hint b{color:var(--text-mid);}
/* KPI */
.grid-kpi{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:12px;margin-bottom:14px;}
.prog .lbl,.kpi .lbl{color:var(--text-low);font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
.prog .pct{font-size:34px;font-weight:700;line-height:1.15;margin:2px 0 8px;}
.track{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.track>i{display:block;height:100%;background:var(--st-done);border-radius:99px;}
.prog .sub{color:var(--text-mid);font-size:13px;margin-top:6px;}
.kpi{position:relative;padding-left:18px;}
.kpi::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--bar,var(--st-todo));}
.kpi .lbl{display:flex;gap:6px;align-items:center;} .kpi .num{font-size:32px;font-weight:700;line-height:1.15;margin-top:4px;}
/* графики/владельцы */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;}
.legend span{font-size:12px;color:var(--text-mid);display:inline-flex;align-items:center;gap:6px;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.donut{position:relative;width:150px;height:150px;flex:0 0 auto;}
.donut .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.donut .mid b{font-size:26px;font-weight:700;} .donut .mid s{font-size:11px;color:var(--text-low);text-decoration:none;text-transform:uppercase;}
.owner{display:grid;grid-template-columns:64px 1fr 24px;align-items:center;gap:8px;margin:7px 0;}
.owner .b{height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden;}
.owner .b>i{display:block;height:100%;background:var(--st-progress);border-radius:6px;}
.owner .n{text-align:right;color:var(--text-mid);font-size:13px;}
.chip{background:var(--surface-2);border-radius:var(--r-pill);padding:2px 9px;font-size:11px;color:var(--text-mid);}
/* блок «потребує уваги» */
.attn{border:1px solid var(--st-block);background:rgba(229,103,78,.08);border-radius:var(--r-w);padding:14px;margin-bottom:14px;}
.attn h3{margin:0 0 8px;font-size:14px;color:var(--st-block);font-weight:600;}
.attn .row{display:flex;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--border);font-size:13px;}
.attn .row:first-of-type{border-top:0;} .attn .row .ic{width:16px;}
.attn .row .who{margin-left:auto;color:var(--text-low);font-size:12px;white-space:nowrap;}
.attn .ok{color:var(--text-mid);font-size:13px;}
/* доска — колонки */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
.col{background:var(--surface-2);border-radius:10px;padding:8px;}
.col .colh{font-size:13px;font-weight:600;margin-bottom:6px;display:flex;gap:6px;align-items:center;}
.col .cnt{background:var(--surface);border-radius:99px;padding:0 8px;font-size:11px;color:var(--text-mid);}
.collapsed{color:var(--text-low);font-size:12px;padding:8px 2px 0;}
.task{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-c);
  padding:9px 11px 9px 14px;margin-bottom:8px;}
.task::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:4px;background:var(--pr,var(--st-progress));}
.task.mine{outline:1px solid rgba(91,147,201,.5);}
.task .tt{font-size:14px;font-weight:500;color:var(--text-hi);}
.task .meta{margin-top:5px;font-size:12px;color:var(--text-low);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.task .meta .own{background:var(--surface-2);border-radius:var(--r-pill);padding:1px 8px;font-size:11px;color:var(--text-mid);}
.task .blk{color:var(--st-block);}
/* шапка виджета + сегмент-фильтр */
.hd{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.seg{display:inline-flex;gap:2px;background:var(--surface-2);border-radius:var(--r-pill);padding:3px;}
.seg button{border:0;background:transparent;color:var(--text-mid);font-size:13px;padding:6px 14px;border-radius:6px;min-height:34px;}
.seg button.on{background:var(--surface);color:var(--text-hi);box-shadow:0 1px 4px rgba(0,0,0,.4);}
/* роль-чипы на карточке */
.rchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.rchip{font-size:11px;background:rgba(201,162,75,.14);color:var(--accent);border-radius:var(--r-pill);padding:1px 7px;}
.task.expandable{cursor:pointer;}
.task .caret{color:var(--text-low);font-size:12px;transition:transform .12s;display:inline-block;}
.task.open .caret{transform:rotate(90deg);}
/* разворот ТЗ */
.tzdetail{margin-top:10px;border-top:1px solid var(--border);padding-top:10px;}
.tzrole{margin-bottom:10px;}
.tzhead{font-size:13px;color:var(--text-hi);margin-bottom:4px;}
.tzhead b{color:var(--accent);}
.tztext{font-size:13px;color:var(--text-mid);white-space:pre-wrap;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;max-height:220px;overflow:auto;}
.tzbtns{display:flex;gap:10px;align-items:center;margin-top:6px;}
.copybtn{min-height:34px;font-size:12px;background:var(--surface-2);}
.canon{color:var(--st-progress);font-size:12px;text-decoration:none;}
.canon:hover{text-decoration:underline;}
@media(max-width:820px){.grid-kpi{grid-template-columns:1fr 1fr;}.grid-2{grid-template-columns:1fr;}.ptop .pn{font-size:19px;}}