/* QADIX — дизайн-система (соответствует макету Figma «QADIX · Дизайн v0.1») */
:root {
  --bg-canvas:#F4F5F1; --bg-surface:#FFFFFF; --bg-subtle:#EEF0EB; --bg-hover:#E7EAE4;
  --border:#E2E5DF; --border-strong:#C9CEC6;
  --text:#14201F; --text-2:#5E6B67; --text-3:#8A9591; --text-inv:#FFFFFF;
  --brand-900:#0E2A2C; --brand-800:#15393B; --brand-700:#1D4A4B; --brand-600:#0F766E; --brand-500:#14917F; --brand-100:#DDF1EC; --brand-050:#EFF8F5;
  --side-text:#A9C2BE; --side-text-active:#FFFFFF;
  --amber:#E6A23C; --amber-100:#FCF0DA; --amber-700:#A86A10;
  --danger:#D64545; --danger-100:#FBE4E2;
  --success:#2F9E6A; --success-100:#DFF3E8;
  --info:#3B6FD9; --info-100:#E2EAFB;
  --violet:#7A5AE0; --violet-100:#ECE6FC;
  --shadow-card:0 1px 2px rgba(13,31,31,.06),0 4px 12px rgba(13,31,31,.05);
  --shadow-pop:0 12px 32px -4px rgba(13,31,31,.16);
  --focus:0 0 0 3px rgba(15,118,110,.18);
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --font:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --pad-row:12px;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg-canvas:#0F1514; --bg-surface:#161E1D; --bg-subtle:#1C2625; --bg-hover:#253230;
  --border:#263331; --border-strong:#34443F;
  --text:#E8EEEC; --text-2:#A3B1AD; --text-3:#73827E;
  --brand-900:#0A1110; --brand-800:#132120; --brand-700:#1C3432; --brand-600:#14917F; --brand-500:#2BB39E; --brand-100:#12302C; --brand-050:#10251F;
  --side-text:#9FB5B1;
  --amber-100:#3A2C14; --amber-700:#F0B95C; --danger:#E5605F; --danger-100:#3A1C1C; --success:#45B883; --success-100:#15301F;
  --info:#6A95F0; --info-100:#1A2640; --violet:#9C82F0; --violet-100:#261F3D;
  --shadow-card:0 1px 2px rgba(0,0,0,.3); --shadow-pop:0 12px 32px -4px rgba(0,0,0,.5);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg-canvas:#0F1514; --bg-surface:#161E1D; --bg-subtle:#1C2625; --bg-hover:#253230;
    --border:#263331; --border-strong:#34443F;
    --text:#E8EEEC; --text-2:#A3B1AD; --text-3:#73827E;
    --brand-900:#0A1110; --brand-800:#132120; --brand-700:#1C3432; --brand-600:#14917F; --brand-500:#2BB39E; --brand-100:#12302C; --brand-050:#10251F;
    --side-text:#9FB5B1;
    --amber-100:#3A2C14; --amber-700:#F0B95C; --danger:#E5605F; --danger-100:#3A1C1C; --success:#45B883; --success-100:#15301F;
    --info:#6A95F0; --info-100:#1A2640; --violet:#9C82F0; --violet-100:#261F3D;
    --shadow-card:0 1px 2px rgba(0,0,0,.3); --shadow-pop:0 12px 32px -4px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-density="compact"] { --pad-row:7px; }

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; }
body { font-family:var(--font); font-size:14px; line-height:20px; color:var(--text); background:var(--bg-canvas); -webkit-font-smoothing:antialiased; }
a { color:var(--brand-600); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,p { margin:0; }
button,input,select,textarea { font:inherit; color:inherit; }
.i { flex:none; display:inline-block; vertical-align:middle; }
.mono { font-family:var(--mono); font-size:12px; }
.muted { color:var(--text-3); } .text-secondary { color:var(--text-2); }
.small { font-size:13px; line-height:18px; } .caption { font-size:12px; line-height:16px; }
.overline { font-size:11px; line-height:16px; letter-spacing:.06em; font-weight:600; text-transform:uppercase; color:var(--text-3); }
.h1 { font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.5px; }
.h2 { font-size:18px; line-height:26px; font-weight:600; letter-spacing:-.2px; }
.h3 { font-size:15px; line-height:22px; font-weight:600; }
.center { text-align:center; } .nowrap { white-space:nowrap; } .grow { flex:1; min-width:0; }
.c-danger { color:var(--danger); } .c-amber { color:var(--amber-700); } .c-success { color:var(--success); } .c-brand { color:var(--brand-600); }
.stack-4>*+*{margin-top:4px}.stack-8>*+*{margin-top:8px}.stack-12>*+*{margin-top:12px}.stack-16>*+*{margin-top:16px}.stack-20>*+*{margin-top:20px}.stack-24>*+*{margin-top:24px}
.row { display:flex; align-items:center; gap:8px; } .row-12 { display:flex; align-items:center; gap:12px; } .between { justify-content:space-between; } .wrap { flex-wrap:wrap; }
.hidden { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- кнопки ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 14px; border-radius:var(--r-md); border:1px solid transparent; background:transparent; font-size:13px; line-height:18px; font-weight:500; cursor:pointer; white-space:nowrap; text-decoration:none !important; transition:background .12s, border-color .12s; }
.btn:focus-visible { outline:none; box-shadow:var(--focus); }
.btn-primary { background:var(--brand-600); color:#fff; }
.btn-primary:hover { background:var(--brand-700); }
:root[data-theme="dark"] .btn-primary:hover { background:var(--brand-500); }
.btn-secondary { background:var(--bg-surface); border-color:var(--border-strong); color:var(--text); }
.btn-secondary:hover { background:var(--bg-subtle); }
.btn-ghost { color:var(--text); } .btn-ghost:hover { background:var(--bg-subtle); }
.btn-danger { background:var(--danger); color:#fff; } .btn-danger:hover { filter:brightness(.95); }
.btn-danger-ghost { color:var(--danger); } .btn-danger-ghost:hover { background:var(--danger-100); }
.btn-sm { padding:6px 10px; font-size:12px; } .btn-lg { padding:12px 18px; font-size:14px; }
.btn-block { width:100%; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn .i { color:currentColor; }
.icon-btn { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-md); border:0; background:transparent; color:var(--text-2); cursor:pointer; position:relative; }
.icon-btn:hover { background:var(--bg-subtle); color:var(--text); }

/* ---------- бейджи ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; font-size:12px; line-height:16px; font-weight:500; white-space:nowrap; background:var(--bg-subtle); color:var(--text-2); }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.no-dot::before { display:none; }
.tone-neutral { background:var(--bg-subtle); color:var(--text-2); }
.tone-brand { background:var(--brand-100); color:var(--brand-600); }
.tone-amber { background:var(--amber-100); color:var(--amber-700); }
.tone-danger { background:var(--danger-100); color:var(--danger); }
.tone-success { background:var(--success-100); color:var(--success); }
.tone-info { background:var(--info-100); color:var(--info); }
.tone-violet { background:var(--violet-100); color:var(--violet); }
.count { display:inline-flex; min-width:20px; justify-content:center; padding:1px 6px; border-radius:999px; font-size:12px; line-height:16px; font-weight:500; background:var(--bg-subtle); color:var(--text-3); }
.count.amber { background:var(--amber); color:var(--brand-900); } .count.active { background:var(--brand-100); color:var(--brand-600); } .count.soft-amber { background:var(--amber-100); color:var(--amber-700); }

/* ---------- аватар, статус, конверт ---------- */
.avatar { width:28px; height:28px; border-radius:50%; background:var(--brand-100); color:var(--brand-600); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; flex:none; overflow:hidden; border:2px solid var(--bg-surface); position:relative; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar.lg { width:40px; height:40px; font-size:14px; } .avatar.xl { width:72px; height:72px; font-size:22px; } .avatar.md { width:34px; height:34px; }
.avatar-wrap { position:relative; display:inline-flex; flex:none; }
.presence { position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; border:2px solid var(--bg-surface); }
.pr-office{background:var(--success)} .pr-remote{background:var(--info)} .pr-client{background:var(--amber)} .pr-dnd{background:var(--danger)} .pr-vacation{background:var(--violet)}
.avatars { display:flex; } .avatars .avatar+.avatar { margin-left:-6px; }
.env { position:relative; display:inline-flex; color:var(--text-3); }
.env.unread { color:var(--amber); }
.env.unread::after { content:""; position:absolute; top:-1px; right:-2px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:1.5px solid var(--bg-surface); }

/* ---------- поля ---------- */
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field>span:first-child { font-size:13px; line-height:18px; font-weight:500; }
.field .hint { font-size:12px; color:var(--text-3); }
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea, select.input {
  width:100%; padding:10px 14px; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--bg-surface); font-size:14px; line-height:20px; outline:none; transition:border-color .12s, box-shadow .12s; }
.field textarea { min-height:96px; resize:vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color:var(--brand-600); box-shadow:var(--focus); }
.field input[readonly], .field input:disabled, .field select:disabled { background:var(--bg-subtle); border-color:var(--border); color:var(--text-2); }
.input-icon { position:relative; } .input-icon>.i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-3); pointer-events:none; }
.input-icon>input { padding-left:42px !important; }
.input-icon .trail { position:absolute; right:8px; top:50%; transform:translateY(-50%); }
.input-icon .lock { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-3); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .col-2 { grid-column:span 2; }
.checkbox { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); cursor:pointer; }
.checkbox input { width:18px; height:18px; accent-color:var(--brand-600); }
.switch { position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; color:var(--text-2); }
.switch input { position:absolute; opacity:0; }
.switch .track { width:34px; height:20px; border-radius:10px; background:var(--border-strong); position:relative; transition:background .15s; flex:none; }
.switch .track::after { content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s; }
.switch input:checked+.track { background:var(--brand-600); } .switch input:checked+.track::after { left:16px; }
.seg { display:inline-flex; gap:2px; padding:3px; border-radius:var(--r-md); background:var(--bg-hover); }
.seg label, .seg a, .seg button { padding:6px 14px; border-radius:8px; font-size:13px; font-weight:500; color:var(--text-3); cursor:pointer; border:0; background:none; text-decoration:none; }
.seg input { display:none; } .seg input:checked+span, .seg .on { background:var(--bg-surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.seg label span { display:block; padding:0; margin:-6px -14px; padding:6px 14px; border-radius:8px; }
.seg.sm label span, .seg.sm a { padding:4px 8px; font-size:12px; } .seg.sm label span { margin:-4px -8px; }
.seg label.disabled { opacity:.45; cursor:not-allowed; }

/* ---------- карточки ---------- */
.card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.pad { padding:18px; } .pad-lg { padding:24px; }
.card-head { display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--border); }
.card-head .h3 { flex:1; }
.card-body { padding:18px; }
.alert { padding:12px 14px; border-radius:var(--r-md); font-size:13px; line-height:18px; border:1px solid transparent; }
.alert-danger { background:var(--danger-100); color:var(--danger); } .alert-success { background:var(--success-100); color:var(--success); }
.alert-info { background:var(--info-100); color:var(--info); } .alert-warn { background:var(--amber-100); color:var(--amber-700); }
.note { display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:var(--r-md); background:var(--bg-subtle); font-size:13px; color:var(--text-2); }
.note.warn { background:var(--amber-100); color:var(--amber-700); }
.note .i { margin-top:1px; }
.icon-badge { width:52px; height:52px; border-radius:14px; background:var(--brand-050); color:var(--brand-600); display:flex; align-items:center; justify-content:center; }
.icon-badge.success { background:var(--success-100); color:var(--success); }
.empty { padding:40px 20px; text-align:center; color:var(--text-3); }
.empty .i { color:var(--text-3); margin-bottom:8px; }
.kv { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.kv>span:first-child { color:var(--text-3); }
.divider { height:1px; background:var(--border); border:0; margin:0; }

/* ---------- каркас приложения ---------- */
.app { display:flex; min-height:100vh; }
.sidebar { width:260px; flex:none; background:var(--brand-900); color:var(--side-text); display:flex; flex-direction:column; padding:20px 16px 16px; position:sticky; top:0; height:100vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--brand-700) transparent; }
.logo-lockup { display:flex; align-items:center; gap:10px; }
.logo-mark { width:34px; height:34px; border-radius:9px; background:var(--brand-600); color:#fff; font-family:'Unbounded',var(--font); font-weight:700; font-size:17px; display:inline-flex; align-items:center; justify-content:center; position:relative; flex:none; }
.logo-mark::after { content:""; position:absolute; right:4px; top:4px; width:7px; height:7px; border-radius:2px; background:var(--amber); }
.logo-mark.img { background:#fff; overflow:hidden; } .logo-mark.img::after { display:none; } .logo-mark.img img { width:100%; height:100%; object-fit:contain; }
.wordmark { font-family:'Unbounded',var(--font); font-weight:700; font-size:18px; line-height:22px; letter-spacing:.04em; color:var(--text); }
.sidebar .wordmark { color:#fff; }
.sidebar .logo-lockup { padding:0 6px 14px; }
.sidebar .tenant { font-size:12px; line-height:16px; color:var(--side-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.nav-group { font-size:11px; line-height:16px; letter-spacing:.06em; font-weight:600; color:var(--side-text); opacity:.55; padding:12px 12px 4px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:8px; color:var(--side-text); font-size:13px; font-weight:500; text-decoration:none !important; }
.nav-item:hover { background:rgba(255,255,255,.05); color:#fff; }
.nav-item.active { background:var(--brand-700); color:#fff; }
.nav-item .label { flex:1; }
.nav-item .count { background:var(--amber); color:var(--brand-900); }
.nav-item.soon-item { opacity:.55; }
.nav-item.soon-item.active { opacity:1; }
.nav-item .soon { width:6px; height:6px; border-radius:50%; border:1px solid var(--side-text); }
.recent { display:flex; align-items:center; gap:10px; padding:5px 12px; font-size:13px; color:var(--side-text); text-decoration:none !important; border-radius:8px; }
.recent:hover { background:rgba(255,255,255,.05); }
.recent .env { color:var(--side-text); } .recent .env.unread { color:var(--amber); }
.recent .env.unread::after { border-color:var(--brand-900); }
.recent.unread { color:#fff; font-weight:500; }
.recent span.t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar .spacer { flex:1; min-height:12px; }
.user-card { display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; background:var(--brand-800); cursor:pointer; border:0; width:100%; text-align:left; color:inherit; }
.user-card:hover, .user-card[aria-expanded="true"] { background:var(--brand-700); }
.user-card .avatar { border-color:var(--brand-800); }
.user-card .presence { border-color:var(--brand-800); }
.user-card .n { color:#fff; font-size:13px; font-weight:500; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-card .r { font-size:12px; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { height:64px; display:flex; align-items:center; gap:12px; padding:0 24px 0 32px; background:var(--bg-surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; }
.crumbs { flex:1; display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-3); min-width:0; }
.crumbs a { color:var(--text-3); } .crumbs b { color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search { position:relative; width:400px; }
.search input { width:100%; padding:9px 70px 9px 38px; border-radius:var(--r-md); border:1px solid transparent; background:var(--bg-subtle); font-size:13px; outline:none; }
.search input:focus { background:var(--bg-surface); border-color:var(--brand-600); box-shadow:var(--focus); }
.search>.i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); }
.kbd { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:11px; color:var(--text-3); background:var(--bg-surface); border:1px solid var(--border); border-radius:6px; padding:1px 6px; }
.badge-dot { position:absolute; top:1px; right:0; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--danger); color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-surface); }
.content { padding:28px 32px 40px; flex:1; }
.page-head { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.page-head .t { flex:1; min-width:0; }
.page-head .sub { font-size:13px; color:var(--text-2); margin-top:4px; }

/* ---------- выпадающие меню ---------- */
.dd { position:relative; }
.pop { position:absolute; z-index:50; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); min-width:220px; overflow:hidden; }
.pop[hidden] { display:none; }
.pop .item { display:flex; align-items:center; gap:12px; padding:8px 10px; margin:0 8px; border-radius:8px; color:var(--text); font-size:13px; font-weight:500; text-decoration:none !important; cursor:pointer; border:0; background:none; width:calc(100% - 16px); text-align:left; }
.pop .item:hover { background:var(--bg-subtle); }
.pop .item .i { color:var(--text-2); }
.pop .item .sub { display:block; font-size:12px; color:var(--text-3); font-weight:400; }
.pop .sec { padding:8px 0; } .pop .sec+.sec { border-top:1px solid var(--border); }
.pop .item.danger, .pop .item.danger .i { color:var(--danger); }
.profile-pop { left:16px; bottom:76px; width:300px; position:fixed; }
.profile-pop .head { display:flex; gap:12px; align-items:center; padding:16px 16px 14px; }
.status-opt { display:flex; align-items:center; gap:10px; padding:6px 8px; margin:0 8px; border-radius:8px; font-size:13px; color:var(--text-2); cursor:pointer; border:0; background:none; width:calc(100% - 16px); text-align:left; }
.status-opt:hover { background:var(--bg-subtle); }
.status-opt.on { background:var(--bg-subtle); color:var(--text); }
.status-opt .d { width:8px; height:8px; border-radius:50%; flex:none; }
.status-opt .ck { margin-left:auto; color:var(--brand-600); }
.notif-pop { right:0; top:46px; width:380px; max-height:480px; display:flex; flex-direction:column; }
.notif-pop .nh { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); }
.notif-pop .nl { overflow:auto; }
.notif { display:flex; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); text-decoration:none !important; color:var(--text); }
.notif:hover { background:var(--bg-subtle); }
.notif .dot { width:8px; height:8px; border-radius:50%; background:var(--amber); flex:none; margin-top:6px; }
.notif.read .dot { background:transparent; }
.notif .t { font-size:13px; font-weight:500; } .notif .b { font-size:13px; color:var(--text-2); } .notif .w { font-size:12px; color:var(--text-3); }
.search-pop { left:0; right:0; top:44px; max-height:420px; overflow:auto; }
.search-pop .grp { padding:8px 16px 4px; } .search-pop a.item { width:auto; }
.create-pop { right:0; top:46px; }

/* ---------- KPI и виджеты ---------- */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.kpi { padding:18px; }
.kpi .h { display:flex; align-items:center; gap:10px; }
.kpi .ib { width:32px; height:32px; border-radius:9px; background:var(--brand-050); color:var(--brand-600); display:flex; align-items:center; justify-content:center; flex:none; }
.kpi .tl { flex:1; font-size:13px; font-weight:500; color:var(--text-2); }
.kpi .v { font-size:28px; line-height:34px; font-weight:600; letter-spacing:-.5px; margin-top:10px; }
.kpi .n { font-size:12px; line-height:16px; margin-top:10px; color:var(--text-2); font-weight:500; }
.widgets { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.widget { overflow:hidden; }
.widget.wide { grid-column:span 2; }
.widget .card-head .drag { cursor:grab; color:var(--text-3); display:inline-flex; }
.widget.dragging { opacity:.5; }
.widget.drop-target { outline:2px dashed var(--brand-500); outline-offset:2px; }
.widget .wl { font-size:13px; font-weight:500; }
.wrow { display:flex; align-items:center; gap:14px; padding:var(--pad-row) 18px; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none !important; }
.wrow:last-child { border-bottom:0; }
a.wrow:hover { background:var(--bg-subtle); }
.wrow .t { font-size:14px; } .wrow .t.b { font-weight:500; }
.wrow .s { font-size:12px; color:var(--text-3); line-height:16px; }
.datebox { width:44px; height:46px; border-radius:10px; background:var(--bg-subtle); display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; }
.datebox b { font-size:15px; line-height:20px; font-weight:600; } .datebox span { font-size:10px; letter-spacing:.06em; font-weight:600; color:var(--text-3); }
.datebox.urgent { background:var(--danger-100); } .datebox.urgent b, .datebox.urgent span { color:var(--danger); }
.bar { height:8px; border-radius:4px; background:var(--bg-subtle); flex:1; overflow:hidden; }
.bar>i { display:block; height:100%; border-radius:4px; background:var(--brand-500); }
.bar.over>i { background:var(--danger); }
.prog { display:flex; gap:3px; }
.prog i { width:18px; height:4px; border-radius:2px; background:var(--bg-hover); }
.prog i.done { background:var(--brand-500); } .prog i.cur { background:var(--amber); }
.prog.sm i { width:12px; }
.widget-config { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; padding:12px; }

/* ---------- вкладки, фильтры, таблицы ---------- */
.tabs { display:flex; gap:24px; border-bottom:1px solid var(--border); margin-bottom:20px; overflow-x:auto; }
.tabs a { display:flex; align-items:center; gap:6px; padding:4px 0 12px; font-size:13px; font-weight:500; color:var(--text-2); text-decoration:none !important; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.tabs a.on { color:var(--text); border-color:var(--brand-600); }
.filters { display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.filters .search-f { position:relative; width:260px; }
.filters .search-f input { padding:8px 12px 8px 36px; border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--bg-surface); width:100%; font-size:13px; outline:none; }
.filters .search-f input:focus { border-color:var(--brand-600); box-shadow:var(--focus); }
.filters .search-f .i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); }
.chip-select { padding:8px 30px 8px 12px; border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A9591' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; font-size:13px; color:var(--text-2); appearance:none; outline:none; cursor:pointer; max-width:220px; }
.chip-select.on { border-color:var(--brand-500); background-color:var(--brand-050); color:var(--brand-600); font-weight:500; }
.stage-chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.stage-chip { display:inline-flex; gap:6px; align-items:center; padding:5px 10px; border-radius:999px; background:var(--bg-surface); border:1px solid var(--border); font-size:12px; color:var(--text-2); text-decoration:none !important; }
.stage-chip b { font-family:var(--mono); font-weight:500; color:var(--text); }
.stage-chip.on { border-color:var(--brand-500); background:var(--brand-050); }
.table-card { overflow:hidden; }
table.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; padding:10px 8px; background:var(--bg-subtle); border-bottom:1px solid var(--border); font-size:11px; letter-spacing:.06em; font-weight:600; color:var(--text-3); text-transform:uppercase; white-space:nowrap; }
.tbl td { padding:var(--pad-row) 8px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:13px; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tbody tr { cursor:pointer; } .tbl tbody tr:hover { background:var(--bg-subtle); }
.tbl tbody tr.noclick { cursor:default; }
.tbl td:first-child, .tbl th:first-child { padding-left:16px; } .tbl td:last-child, .tbl th:last-child { padding-right:16px; }
.tbl .client { font-size:14px; } .tbl .client.b { font-weight:500; }
.tbl .meta { font-size:12px; color:var(--text-3); margin-top:2px; }
.pager { display:flex; align-items:center; gap:6px; margin-top:16px; }
.pager .info { flex:1; font-size:13px; color:var(--text-2); }
.pager a, .pager span.p { min-width:32px; height:32px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--border); background:var(--bg-surface); font-size:13px; font-weight:500; color:var(--text-2); text-decoration:none !important; }
.pager .on { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }

/* ---------- страница проекта ---------- */
.proj-head { display:flex; gap:16px; align-items:flex-start; }
.stage-track { display:flex; gap:4px; margin-top:16px; }
.stage-track .st { flex:1; display:flex; flex-direction:column; gap:6px; font-size:11px; color:var(--text-3); min-width:0; }
.stage-track .st i { height:6px; border-radius:3px; background:var(--bg-hover); display:block; }
.stage-track .st.done i { background:var(--brand-500); } .stage-track .st.cur i { background:var(--amber); }
.stage-track .st.cur { color:var(--text); font-weight:500; }
.stage-track .st span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.two-col { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
.feed-item { display:flex; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border); }
.feed-item:last-child { border-bottom:0; }
.feed-item .tx { font-size:13px; color:var(--text-2); white-space:pre-wrap; word-break:break-word; }
.feed-item .tx b { color:var(--text); font-weight:500; }
.feed-item.sys .tx { color:var(--text-3); }
.comment-box { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; gap:10px; align-items:flex-end; }
.comment-box textarea { flex:1; min-height:42px; max-height:200px; resize:vertical; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--bg-surface); outline:none; }
.comment-box textarea:focus { border-color:var(--brand-600); box-shadow:var(--focus); }
.member { display:flex; align-items:center; gap:10px; padding:8px 18px; }
.member .n { font-size:13px; font-weight:500; } .member .r { font-size:12px; color:var(--text-3); }

/* ---------- настройки ---------- */
.settings { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.subnav { display:flex; flex-direction:column; gap:2px; position:sticky; top:88px; }
.subnav a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:var(--text-2); font-size:13px; font-weight:500; text-decoration:none !important; border:1px solid transparent; }
.subnav a:hover { background:var(--bg-subtle); }
.subnav a.on { background:var(--bg-surface); border-color:var(--border); color:var(--text); }
.subnav a.on .i { color:var(--brand-600); }
.subnav .grp { font-size:11px; letter-spacing:.06em; font-weight:600; color:var(--text-3); padding:14px 12px 4px; text-transform:uppercase; }
.sec-card { padding:22px 24px 24px; }
.sec-card .sh { margin-bottom:20px; } .sec-card .sh p { font-size:13px; color:var(--text-2); margin-top:2px; }
.save-bar { display:flex; align-items:center; gap:8px; justify-content:flex-end; margin-top:20px; }
.status-opts { display:flex; gap:8px; flex-wrap:wrap; }
.status-opts label { cursor:pointer; }
.status-opts input { display:none; }
.status-opts span { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r-md); border:1px solid var(--border-strong); font-size:13px; font-weight:500; color:var(--text-2); background:var(--bg-surface); }
.status-opts span i { width:8px; height:8px; border-radius:50%; display:inline-block; }
.status-opts input:checked+span { border-color:var(--brand-500); box-shadow:inset 0 0 0 1px var(--brand-500); background:var(--brand-050); color:var(--text); }
.themes { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.themes label { cursor:pointer; } .themes input { display:none; }
.theme-card { display:block; padding:10px; border-radius:12px; border:1px solid var(--border); background:var(--bg-surface); }
.themes input:checked+.theme-card { border:2px solid var(--brand-600); padding:9px; }
.theme-prev { height:96px; border-radius:8px; overflow:hidden; display:flex; position:relative; }
.theme-prev .s { width:40px; } .theme-prev .m { flex:1; padding:12px 10px; display:flex; flex-direction:column; gap:8px; }
.theme-prev .m i { display:block; border-radius:4px; height:26px; } .theme-prev .m i+i { height:38px; }
.tp-light { background:#F4F5F1; } .tp-light .s { background:#0E2A2C; } .tp-light .m i { background:#fff; border:1px solid #E2E5DF; }
.tp-dark { background:#0F1514; } .tp-dark .s { background:#0A1110; } .tp-dark .m i { background:#161E1D; border:1px solid #263331; }
.tp-auto { background:linear-gradient(90deg,#F4F5F1 50%,#0F1514 50%); } .tp-auto .s { background:#0E2A2C; } .tp-auto .m i { background:linear-gradient(90deg,#fff 50%,#161E1D 50%); border:1px solid #9aa; }
.theme-card .lbl { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; font-weight:500; color:var(--text-2); }
.theme-card .lbl::before { content:""; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border-strong); box-sizing:border-box; }
.themes input:checked+.theme-card .lbl { color:var(--text); } .themes input:checked+.theme-card .lbl::before { border:5px solid var(--brand-600); }
.perm-group { border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; }
.perm-group+.perm-group { margin-top:12px; }
.perm-group .checkbox { display:flex; margin-top:8px; }
.tree { display:flex; flex-direction:column; }
.tree-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); }
.tree-row:last-child { border-bottom:0; }
.audit-ok { color:var(--success); } .audit-bad { color:var(--danger); }
.logo-preview { width:72px; height:72px; border-radius:14px; border:1px solid var(--border); background:var(--bg-subtle); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.logo-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.secret-box { font-family:var(--mono); font-size:13px; letter-spacing:.08em; padding:10px 12px; border-radius:var(--r-md); background:var(--bg-subtle); word-break:break-all; }
.codes { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; font-family:var(--mono); font-size:14px; }
.codes span { padding:8px 10px; border-radius:8px; background:var(--bg-subtle); text-align:center; }
.qr { width:200px; height:200px; background:#fff; padding:8px; border-radius:12px; border:1px solid var(--border); }
.qr img, .qr svg { width:100%; height:100%; }
.swatch { width:14px; height:14px; border-radius:4px; display:inline-block; vertical-align:middle; }

/* ---------- toast ---------- */
.toasts { position:fixed; right:20px; bottom:20px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.toast { min-width:280px; max-width:420px; padding:12px 14px; border-radius:var(--r-md); background:var(--brand-900); color:#fff; font-size:13px; box-shadow:var(--shadow-pop); display:flex; gap:10px; align-items:flex-start; animation:tin .2s ease-out; }
.toast.error { background:var(--danger); } .toast.success .i { color:#7fe0b6; }
@keyframes tin { from { transform:translateY(8px); opacity:0; } }

/* ---------- вход ---------- */
.auth-body { background:var(--bg-canvas); }
.auth { display:flex; min-height:100vh; }
.auth-brand { width:43%; max-width:620px; background:var(--brand-900); color:var(--side-text); padding:56px 64px 48px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.auth-brand::before { content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(0deg, rgba(29,74,75,.35) 0 1px, transparent 1px 48px); }
.auth-brand::after { content:""; position:absolute; width:520px; height:520px; right:-200px; bottom:-160px; border-radius:50%; background:radial-gradient(circle, rgba(20,145,127,.45), rgba(20,145,127,0) 70%); }
.auth-brand>* { position:relative; z-index:1; }
.auth-brand .logo-mark { width:42px; height:42px; font-size:21px; border-radius:11px; }
.auth-brand .wordmark { color:#fff; font-size:22px; }
.auth-brand .ov { margin-top:auto; font-size:11px; letter-spacing:.06em; font-weight:600; color:var(--amber); }
.auth-brand .big { font-size:52px; line-height:58px; font-weight:600; letter-spacing:-1.5px; color:#fff; margin:16px 0 20px; }
.auth-brand .lead { max-width:440px; }
.auth-brand .track { display:flex; gap:6px; margin-top:36px; } .auth-brand .track i { width:48px; height:6px; border-radius:3px; background:var(--brand-700); } .auth-brand .track i.d { background:var(--brand-500); } .auth-brand .track i.c { background:var(--amber); }
.auth-brand .feats { margin-top:40px; display:flex; flex-direction:column; gap:14px; }
.auth-brand .feat { display:flex; align-items:center; gap:12px; color:#fff; font-size:13px; font-weight:500; }
.auth-brand .feat b { width:32px; height:32px; border-radius:8px; background:var(--brand-800); color:var(--brand-500); display:flex; align-items:center; justify-content:center; }
.auth-brand .foot { margin-top:auto; font-size:12px; }
.auth-panel { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; position:relative; }
.auth-card { width:100%; max-width:440px; padding:40px 40px 36px; }
.auth-card .h1 + p { margin-top:6px; }
.auth-note { margin-top:20px; display:flex; gap:8px; align-items:center; font-size:12px; color:var(--text-3); }
.client-hint { display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:12px; background:var(--brand-050); text-decoration:none !important; }
.client-hint b { display:block; font-size:13px; color:var(--text); font-weight:500; } .client-hint span { font-size:13px; color:var(--brand-600); }
.otp { display:flex; gap:10px; }
.otp input { width:100%; height:58px; text-align:center; font-size:24px; font-weight:600; letter-spacing:.5em; padding-left:.5em !important; font-family:var(--mono); }
.auth-portal .auth-brand { background:var(--brand-800); }

.install { max-width:760px; margin:0 auto; padding:40px 20px 60px; }
.install-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.checks { margin-top:12px; } .check-row { display:grid; grid-template-columns:14px 1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.check-row .dot { width:10px; height:10px; border-radius:50%; } .dot.ok { background:var(--success); } .dot.bad { background:var(--danger); } .dot.warn { background:var(--amber); }

/* ---------- портал ---------- */
.portal-top { height:64px; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:16px; padding:0 32px; }
.portal-wrap { max-width:1100px; margin:0 auto; padding:28px 24px 48px; }
.pcard { padding:20px; display:flex; flex-direction:column; gap:12px; text-decoration:none !important; color:var(--text); }
.pcard:hover { border-color:var(--brand-500); }

/* ---------- адаптив ---------- */
@media (max-width:1280px) { .search { width:280px; } .kpis { grid-template-columns:repeat(2,1fr); } }
@media (max-width:1100px) { .widgets, .two-col { grid-template-columns:1fr; } .widget.wide { grid-column:auto; } .auth-brand { display:none; } }
@media (max-width:900px) {
  .sidebar { position:fixed; left:-280px; z-index:60; transition:left .2s; } body.nav-open .sidebar { left:0; }
  .menu-btn { display:inline-flex !important; } .search { display:none; } .content { padding:20px 16px; } .topbar { padding:0 16px; }
  .settings { grid-template-columns:1fr; } .subnav { position:static; flex-direction:row; overflow-x:auto; }
  .grid-2, .grid-3, .themes { grid-template-columns:1fr; } .col-2 { grid-column:auto; } .kpis { grid-template-columns:1fr; }
  .tbl .hide-m { display:none; }
}
.menu-btn { display:none !important; }