/* ASAR OS — дизайн-система: токены, светлая и тёмная темы */
:root{
  --bg:#f6f6f4;--panel:#ffffff;--panel-2:#fafaf9;--sidebar:#f6f6f4;--hover:rgba(0,0,0,.04);
  --ink:#141414;--ink-2:#3d3d3a;--muted:#8a8a85;--faint:#b4b4ae;
  --line:#ebebe7;--line-2:#f1f1ee;--soft:#f0f0ed;--track:#ececE8;
  --accent:#141414;--on-accent:#ffffff;--focus:rgba(20,20,20,.12);
  --ok:#1f7a4d;--ok-bg:#e9f5ee;--warn:#9a6700;--warn-bg:#fdf3dc;--danger:#c0362c;--danger-bg:#fdecea;
  --blue:#2f5fb3;--blue-bg:#ebf1fc;--violet:#6b46c1;--violet-bg:#f2edfd;
  --vac:#e9b949;--overlay:rgba(20,20,20,.28);
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);--shadow-lg:0 24px 64px rgba(0,0,0,.14);
  --radius:14px;--radius-sm:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1012;--panel:#16171a;--panel-2:#1b1c20;--sidebar:#0f1012;--hover:rgba(255,255,255,.05);
    --ink:#ededeb;--ink-2:#c4c4bf;--muted:#8b8b88;--faint:#5c5c5a;
    --line:#26272b;--line-2:#1f2024;--soft:#212226;--track:#2a2b30;
    --accent:#ededeb;--on-accent:#111214;--focus:rgba(255,255,255,.14);
    --ok:#4cc38a;--ok-bg:rgba(76,195,138,.12);--warn:#e2b453;--warn-bg:rgba(226,180,83,.13);--danger:#f07167;--danger-bg:rgba(240,113,103,.13);
    --blue:#7aa5f5;--blue-bg:rgba(122,165,245,.13);--violet:#b69cf6;--violet-bg:rgba(182,156,246,.13);
    --overlay:rgba(0,0,0,.55);--shadow-sm:none;--shadow-lg:0 24px 64px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1012;--panel:#16171a;--panel-2:#1b1c20;--sidebar:#0f1012;--hover:rgba(255,255,255,.05);
  --ink:#ededeb;--ink-2:#c4c4bf;--muted:#8b8b88;--faint:#5c5c5a;
  --line:#26272b;--line-2:#1f2024;--soft:#212226;--track:#2a2b30;
  --accent:#ededeb;--on-accent:#111214;--focus:rgba(255,255,255,.14);
  --ok:#4cc38a;--ok-bg:rgba(76,195,138,.12);--warn:#e2b453;--warn-bg:rgba(226,180,83,.13);--danger:#f07167;--danger-bg:rgba(240,113,103,.13);
  --blue:#7aa5f5;--blue-bg:rgba(122,165,245,.13);--violet:#b69cf6;--violet-bg:rgba(182,156,246,.13);
  --overlay:rgba(0,0,0,.55);--shadow-sm:none;--shadow-lg:0 24px 64px rgba(0,0,0,.5);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
body{transition:background .2s,color .2s}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
::selection{background:var(--focus)}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Layout ---------- */
.app{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--sidebar);border-right:1px solid var(--line);padding:20px 12px 14px;display:flex;flex-direction:column}
.brand{font-size:19px;font-weight:700;letter-spacing:.18em;margin:2px 10px 22px;display:flex;align-items:center;gap:10px}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:13px;letter-spacing:0}
.brand small{display:block;font-size:9.5px;font-weight:500;letter-spacing:.1em;color:var(--muted);margin-top:2px}
.nav{display:flex;flex-direction:column;gap:1px;overflow:auto;flex:1;min-height:0}
.nav a{border-radius:9px;padding:7px 10px;color:var(--ink-2);text-decoration:none;font-size:13px;display:flex;gap:10px;align-items:center;transition:background .12s,color .12s}
.nav a svg{opacity:.7}
.nav a:hover{background:var(--hover);color:var(--ink)}
.nav a.active{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line),var(--shadow-sm)}
.nav a.active svg{opacity:1}
.nav .nav-label{padding:14px 10px 5px;color:var(--faint);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.09em}
.sidebar-bottom{padding-top:10px;border-top:1px solid var(--line);margin-top:10px}
.user{display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:10px;padding:6px}
.user:hover{background:var(--hover)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.user b{font-size:13px}.user small{color:var(--muted);font-size:11px}
.side-tools{display:flex;gap:4px;margin-top:6px}
.icon-btn{border:0;background:transparent;border-radius:9px;width:34px;height:32px;display:inline-grid;place-items:center;cursor:pointer;color:var(--ink-2);position:relative;flex:none}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
.side-tools .spacer{flex:1}
.badge{position:absolute;top:2px;right:2px;background:var(--danger);color:#fff;border-radius:99px;font-size:9px;font-weight:600;min-width:15px;height:15px;display:grid;place-items:center;padding:0 4px}
main{padding:32px 40px 80px;max-width:1640px;min-width:0;width:100%}

/* ---------- Header ---------- */
.top{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:24px;flex-wrap:wrap}
.eyebrow{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.02em}
.eyebrow a{text-decoration:none;color:var(--muted)}.eyebrow a:hover{color:var(--ink)}
h1{font-size:26px;font-weight:650;letter-spacing:-.025em;margin:4px 0 6px}
h2,h3{letter-spacing:-.01em}
.sub{color:var(--muted);font-size:13px;max-width:720px;line-height:1.55}
.top-actions,.row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Controls ---------- */
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 12px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:border-color .12s,background .12s,opacity .12s;line-height:1.3}
.btn:hover{border-color:var(--faint)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover{opacity:.88}
.btn.small{font-size:12px;padding:5px 9px;border-radius:8px}
.btn.danger{color:var(--danger)}
.btn.ok{color:var(--ok)}
select.btn{appearance:none;padding-right:28px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 14px) 52%,calc(100% - 10px) 52%;background-size:4px 4px;background-repeat:no-repeat}
.month-nav{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);overflow:hidden}
.month-nav button{border:0;background:transparent;padding:7px 10px;cursor:pointer;color:var(--ink-2)}
.month-nav button:hover{background:var(--hover)}
.month-nav b{font-size:13px;font-weight:600;min-width:118px;text-align:center}

/* ---------- Grid & cards ---------- */
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:14px}
.kpis.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.two{grid-template-columns:1.35fr .65fr}
.half{grid-template-columns:1fr 1fr}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.mt{margin-top:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;min-width:0;box-shadow:var(--shadow-sm)}
.metric{padding:16px 18px}
.metric .label{font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:500}
.metric .value{font-size:26px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.metric .delta{font-size:11.5px;margin-top:6px;color:var(--muted)}
.ok-t{color:var(--ok)!important}.warn-t{color:var(--warn)!important}.danger-t{color:var(--danger)!important}
.section-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.section-title h2{margin:0;font-size:14px;font-weight:600}
.section-title span{font-size:11.5px;color:var(--muted)}
.muted{color:var(--muted)}
.empty{color:var(--muted);font-size:12.5px;padding:10px 0}

/* ---------- Tags ---------- */
.tag{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;background:var(--soft);color:var(--ink-2);font-size:11px;font-weight:500;white-space:nowrap;gap:4px;line-height:1.35}
.tag.dark{background:var(--accent);color:var(--on-accent)}
.tag.ok{background:var(--ok-bg);color:var(--ok)}.tag.warn{background:var(--warn-bg);color:var(--warn)}.tag.danger{background:var(--danger-bg);color:var(--danger)}
.tag.blue{background:var(--blue-bg);color:var(--blue)}.tag.client{background:var(--violet-bg);color:var(--violet)}
.tag.t-Advertising{background:var(--danger-bg);color:var(--danger)}.tag.t-Informational{background:var(--blue-bg);color:var(--blue)}
.tag.t-Aesthetic{background:var(--violet-bg);color:var(--violet)}.tag.t-Graphic{background:var(--ok-bg);color:var(--ok)}.tag.t-Presentation{background:var(--warn-bg);color:var(--warn)}

/* ---------- Tables & lists ---------- */
.table{width:100%;border-collapse:collapse}
.table th{font-size:11px;color:var(--muted);text-align:left;font-weight:500;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{font-size:12.5px;padding:10px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tr.click{cursor:pointer}.table tr.click:hover td{background:var(--hover)}
.table tr.vac td{background:var(--warn-bg)}
.scroll-x{overflow-x:auto}
.list{display:flex;flex-direction:column;gap:6px}
.item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);align-items:center;transition:border-color .12s,background .12s}
.item.click{cursor:pointer}.item.click:hover{border-color:var(--faint);background:var(--panel-2)}
.item b{font-size:13px;font-weight:600}
.item small{display:block;color:var(--muted);margin-top:3px;font-size:11.5px;line-height:1.45}
.item-right{text-align:right;flex:none}

/* ---------- Progress ---------- */
.progress{height:6px;border-radius:99px;overflow:hidden;background:var(--track);position:relative}
.progress i{display:block;height:100%;background:var(--accent);position:absolute;left:0;top:0;border-radius:99px;transition:width .4s}
.progress i.light{background:var(--faint);opacity:.55}
.bar-row{display:grid;grid-template-columns:150px 1fr 48px;gap:12px;align-items:center;margin:10px 0}
.bar-row span{font-size:12px;color:var(--ink-2)}.bar-row b{text-align:right;font-size:12px;font-variant-numeric:tabular-nums}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.toolbar select,.toolbar input{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-sm);padding:7px 10px;font-size:13px;outline:none}
.toolbar input{min-width:200px}
.toolbar input:focus,.toolbar select:focus{border-color:var(--faint);box-shadow:0 0 0 3px var(--focus)}

/* ---------- Tasks ---------- */
.task-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px}
.task-list{display:flex;flex-direction:column;gap:6px}
.task-row{display:grid;grid-template-columns:minmax(220px,1.5fr) 120px 150px 160px 96px 96px;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;cursor:pointer;transition:border-color .12s,background .12s}
.task-row:hover{border-color:var(--faint);background:var(--panel-2)}
.task-row.head{background:transparent;border:0;padding-top:0;padding-bottom:2px;cursor:default;color:var(--muted);font-size:11px;font-weight:500}
.task-row.head:hover{background:transparent}
.task-row.overdue{box-shadow:inset 3px 0 0 var(--danger)}
.task-row.blocked{box-shadow:inset 3px 0 0 var(--warn)}
.task-title{font-size:13px;font-weight:600}
.task-row small,.cell small{font-size:11px;color:var(--muted);display:block;margin-top:4px}
.task-row small .tag{margin-right:2px}
.cell b{font-size:12px;font-weight:600}
.mini-avatar{width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--ink);display:grid;place-items:center;font-size:9px;font-weight:600;flex:none;border:1px solid var(--line)}
.mini-avatar.vac{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.person{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
.person span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-progress{height:4px;background:var(--track);border-radius:99px;overflow:hidden;margin-top:6px}
.mini-progress i{display:block;height:100%;background:var(--accent);border-radius:99px}

/* ---------- Processes ---------- */
.process-card{padding:0;overflow:hidden}
.process-card.off{opacity:.5}
.process-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.process-head h3{margin:0 0 4px;font-size:15px;font-weight:600}
.flow{display:flex;gap:20px;padding:16px 18px;overflow:auto}
.step{min-width:160px;border:1px solid var(--line);background:var(--panel-2);border-radius:var(--radius-sm);padding:10px 11px;position:relative;flex:none}
.step:not(:last-child):after{content:'';position:absolute;right:-16px;top:50%;width:12px;height:1px;background:var(--faint)}
.step-num{font-size:10.5px;color:var(--muted);font-weight:500}
.step b{display:block;font-size:12.5px;margin:4px 0;font-weight:600}
.step small{font-size:11px;color:var(--muted)}

/* ---------- Client value ---------- */
.action-card{box-shadow:inset 3px 0 0 var(--line),var(--shadow-sm)}
.action-card.priority{box-shadow:inset 3px 0 0 var(--danger),var(--shadow-sm)}
.action-card h2{font-size:15px;margin:0 0 6px;font-weight:600}
.action-meta{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.action-note{font-size:13px;line-height:1.6;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:12px}
.decision-log{font-size:12px;color:var(--muted);margin-top:10px}
.recommendation{display:grid;grid-template-columns:1fr 210px;gap:16px}
.impact{background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:14px}
.impact strong{font-size:20px;font-weight:650;letter-spacing:-.02em;display:block;margin:4px 0}
.impact small{display:block;color:var(--muted);font-size:11.5px}
.result-box{padding:10px 12px;border-radius:var(--radius-sm);background:var(--ok-bg);margin-top:10px;font-size:12px;color:var(--ok);line-height:1.55}
.wait-time{font-weight:650;font-size:13px}
.scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.scope-card h3{margin:0 0 3px;font-size:16px;font-weight:600}
.scope-row{margin-top:14px}
.scope-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px;gap:8px}
.health-hero{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}
.score-ring{width:176px;height:176px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) var(--score),var(--track) 0);position:relative;margin:auto}
.score-ring:before{content:'';position:absolute;inset:14px;background:var(--panel);border-radius:50%}
.score-ring .inside{position:relative;text-align:center}
.score-ring .inside b{font-size:44px;font-weight:650;letter-spacing:-.05em}
.score-ring .inside small{display:block;color:var(--muted);font-size:10px;letter-spacing:.08em}
.health-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.issue{padding:10px 12px;border-radius:var(--radius-sm);background:var(--panel-2);border:1px solid var(--line-2);margin-bottom:6px}
.issue b{font-size:13px;font-weight:600}
.issue small{font-size:12px;color:var(--muted);display:block;margin-top:3px}
.brief{max-width:880px}
.brief-header{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.brief-header h2{font-size:22px;margin:4px 0;font-weight:650}
.brief-section{margin:20px 0}
.brief-section h3{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 9px;font-weight:600}
.brief-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.brief-stat div{padding:12px;border-radius:var(--radius-sm);background:var(--panel-2);border:1px solid var(--line-2)}
.brief-stat b{font-size:19px;font-weight:650}
.brief-stat small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.client-shell{border:1px solid var(--line);border-radius:18px;padding:6px;background:var(--soft)}
.client-browser{background:var(--bg);border-radius:13px;overflow:hidden;border:1px solid var(--line)}
.client-topbar{background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:12px 20px;gap:10px}
.client-body{padding:22px}
.client-brand{font-weight:700;letter-spacing:.18em;font-size:16px;display:flex;align-items:center;gap:10px}
.client-brand .sub-l{font-weight:500;font-size:10.5px;letter-spacing:.08em;color:var(--muted)}
.client-page{max-width:1280px;margin:0 auto;padding:0 24px 60px}
.stage-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.stage-strip div{background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:12px 8px;text-align:center}
.stage-strip b{font-size:20px;display:block;font-weight:650}
.stage-strip small{font-size:11px;color:var(--muted)}

/* ---------- Content board ---------- */
.board{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}
.column{background:var(--soft);border-radius:var(--radius);padding:8px;min-height:120px}
.column h4{margin:4px 6px 10px;font-size:12px;font-weight:600;color:var(--ink-2);display:flex;justify-content:space-between}
.column h4 span{color:var(--muted);font-weight:500}
.kcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;margin-bottom:6px;cursor:pointer;transition:border-color .12s,transform .12s}
.kcard:hover{border-color:var(--faint);transform:translateY(-1px)}
.kcard b{font-size:12.5px;display:block;margin:7px 0 2px;font-weight:600;line-height:1.35}
.kcard small{font-size:11px;color:var(--muted)}
.kcard.overdue{box-shadow:inset 3px 0 0 var(--danger)}
.type-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}

/* ---------- Projects & setup ---------- */
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.project-card .project-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.project-card h3{margin:2px 0 0;font-size:17px;font-weight:650}
.service-list{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.service-line{display:grid;grid-template-columns:1fr 100px auto;gap:8px;align-items:center;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;font-size:12px}
.service-line small{color:var(--muted);display:block;font-size:10.5px}
.builder{display:flex;flex-direction:column;gap:6px}
.builder-row{display:grid;grid-template-columns:24px minmax(130px,1fr) 170px 90px;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.builder-row.disabled{opacity:.45}
.builder-row select,.builder-row input[type=number]{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--panel);min-width:0}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role-grid label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted);font-weight:500}
.role-grid select{width:100%}
.step-editor{display:grid;grid-template-columns:24px 1fr 1fr 160px 70px 96px;gap:6px;align-items:center;margin-bottom:6px}
.step-editor input,.step-editor select{border:1px solid var(--line);border-radius:8px;padding:7px 8px;min-width:0;background:var(--panel);outline:none}
.setup-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.setup-mini{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.setup-mini b{font-size:22px;font-weight:650}
.setup-mini small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.module-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;gap:7px;align-items:center;border:1px solid var(--line);border-radius:99px;padding:5px 11px;font-size:12px;cursor:pointer;background:var(--panel)}
.chip:has(input:checked){border-color:var(--accent)}
.chip input{margin:0;width:14px;height:14px}
.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.project-meta div{background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;padding:9px 10px}
.project-meta small{display:block;color:var(--muted);font-size:10.5px}
.project-meta b{font-size:12.5px}
.note{font-size:12.5px;line-height:1.6;padding:12px 14px;border-radius:var(--radius-sm);background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink-2)}
.steps-flow{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Access ---------- */
.access-wrap{overflow:auto}
.access-table{border-collapse:collapse;min-width:100%}
.access-table th{font-size:10px;color:var(--muted);padding:8px 4px;font-weight:500;writing-mode:vertical-rl;transform:rotate(180deg);height:120px;text-align:left}
.access-table th.name,.access-table td.name{writing-mode:initial;transform:none;height:auto;position:sticky;left:0;background:var(--panel);z-index:1;text-align:left;min-width:170px}
.access-table td{border-bottom:1px solid var(--line-2);padding:7px 4px;text-align:center;font-size:12px}
.access-table tr:hover td{background:var(--hover)}
.switch{position:relative;width:32px;height:18px;display:inline-block}
.switch input{display:none}
.slider{position:absolute;inset:0;background:var(--track);border-radius:99px;cursor:pointer;transition:background .15s}
.slider:before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked+.slider{background:var(--accent)}
.switch input:checked+.slider:before{transform:translateX(14px);background:var(--on-accent)}
.switch input:disabled+.slider{opacity:.4;cursor:default}
.tabs{display:inline-flex;gap:2px;margin-bottom:16px;background:var(--soft);border-radius:var(--radius-sm);padding:3px;max-width:100%;overflow:auto}
.tabs button{border:0;background:transparent;border-radius:8px;padding:6px 14px;cursor:pointer;font-size:13px;color:var(--muted);font-weight:500;white-space:nowrap}
.tabs button.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm),0 0 0 1px var(--line)}

/* ---------- Overlays ---------- */
.overlay{position:fixed;inset:0;background:var(--overlay);z-index:50;backdrop-filter:blur(2px);animation:fade .15s ease}
.modal{position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,calc(100vw - 28px));max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow-lg);animation:pop .18s ease}
.modal.wide{width:min(960px,calc(100vw - 28px))}
.drawer{position:fixed;z-index:60;right:0;top:0;width:min(560px,100vw);height:100vh;overflow:auto;background:var(--panel);border-left:1px solid var(--line);padding:24px;box-shadow:var(--shadow-lg);animation:slidein .2s ease}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{transform:translate(-50%,-48%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
@keyframes fade{from{opacity:0}}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:18px}
.modal-head h2{font-size:19px;margin:3px 0 0;font-weight:650}
.close{border:0;background:var(--soft);color:var(--ink-2);border-radius:9px;width:32px;height:32px;cursor:pointer;flex:none;font-size:17px;display:grid;place-items:center}
.close:hover{color:var(--ink)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field>label{font-size:12px;font-weight:500;color:var(--ink-2)}
.field input,.field select,.field textarea,.handoff textarea,.login input{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 11px;background:var(--panel);outline:none;min-width:0;transition:border-color .12s,box-shadow .12s}
.field input:focus,.field select:focus,.field textarea:focus,.handoff textarea:focus,.login input:focus,.step-editor input:focus{border-color:var(--faint);box-shadow:0 0 0 3px var(--focus)}
.field input:disabled{background:var(--panel-2);color:var(--muted)}
.field textarea{min-height:80px;resize:vertical}
.field .hint,.hint{font-size:11.5px;color:var(--muted);line-height:1.5}
.checkline{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;font-weight:400!important;color:var(--ink)!important}
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}
.timeline{display:flex;flex-direction:column}
.timeline-row{display:grid;grid-template-columns:22px 1fr;gap:10px;position:relative;padding-bottom:12px}
.timeline-row:not(:last-child):before{content:'';position:absolute;left:10px;top:22px;bottom:0;width:1px;background:var(--line)}
.tl-dot{width:21px;height:21px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:var(--panel);font-size:9px;z-index:1;color:var(--muted)}
.tl-dot.done{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tl-dot.cur{border:2px solid var(--accent);color:var(--ink);font-weight:700}
.timeline-row b{font-size:13px;font-weight:600}
.timeline-row small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0}
.detail-box{background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:9px 11px}
.detail-box small{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}
.detail-box b{font-size:13px;font-weight:600}
.handoff{border:1px solid var(--line);padding:14px;border-radius:var(--radius);margin-top:14px;background:var(--panel-2)}
.handoff>b{font-size:13px}
.handoff textarea{width:100%;min-height:56px;resize:vertical;margin:8px 0}
.drawer h3{font-size:13px;font-weight:600}
.event{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
.event small{color:var(--muted);font-size:11px;white-space:nowrap}
.event .txt{line-height:1.5}
.event .quote{display:block;margin-top:5px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;color:var(--ink-2)}
.week-bars{display:flex;gap:6px;align-items:flex-end;height:80px;margin-top:18px}
.week-bars div{flex:1;background:var(--accent);border-radius:5px 5px 2px 2px;min-height:3px;position:relative;opacity:.9}
.week-bars div:hover{opacity:1}
.week-bars div span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10px;color:var(--muted)}
.week-bars div em{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;font-style:normal;color:var(--ink-2)}
.notif{padding:11px 6px;border-bottom:1px solid var(--line-2);cursor:pointer;font-size:13px;border-radius:8px}
.notif:hover{background:var(--hover)}
.notif.unread{font-weight:600}
.notif.unread:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--danger);margin-right:8px;vertical-align:middle}
.notif small{display:block;color:var(--muted);font-size:11px;margin-top:3px;font-weight:400}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,10px);background:var(--accent);color:var(--on-accent);border-radius:10px;padding:10px 16px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:100;max-width:440px;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--danger);color:#fff}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(1200px 600px at 50% -10%,var(--soft),transparent 70%)}
.login{width:min(380px,100%);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow-lg)}
.login .brand{margin:0;font-size:20px}
.login form{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.login input{padding:10px 12px}
.login .btn{justify-content:center;padding:10px}
.login .err{color:var(--danger);font-size:12.5px;min-height:16px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel)}
.seg button{border:0;background:transparent;padding:5px 9px;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--muted);display:grid;place-items:center}
.seg button.on{background:var(--soft);color:var(--ink)}
.loading{color:var(--muted);font-size:13px;padding:40px 0}
.skeleton{height:90px;border-radius:var(--radius);background:linear-gradient(90deg,var(--soft),var(--panel-2),var(--soft));background-size:200% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.hide{display:none!important}
@media print{.sidebar,.top-actions,.client-topbar{display:none!important}.app{display:block}body{background:#fff}}

/* ---------- Responsive ---------- */
@media(max-width:1200px){.kpis,.kpis.six{grid-template-columns:repeat(3,1fr)}.two,.half,.three,.four,.scope-grid,.project-grid{grid-template-columns:1fr}.health-hero{grid-template-columns:1fr}.task-layout{grid-template-columns:1fr}.task-row{grid-template-columns:1fr 120px 140px}.task-row .hide-md{display:none}.recommendation{grid-template-columns:1fr}.type-summary{grid-template-columns:1fr 1fr}}
@media(max-width:780px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:sticky;top:0;z-index:20;height:auto;min-width:0;padding:8px 10px;flex-direction:row;align-items:center;gap:6px;border-right:0;border-bottom:1px solid var(--line)}
  .brand{margin:0;font-size:16px}.brand>div{display:none}
  .nav{flex-direction:row;overflow-x:auto;flex:1;min-width:0;gap:2px}.nav .nav-label{display:none}.nav a span{display:none}.nav a{padding:8px;flex:none}
  .sidebar-bottom{border:0;margin:0;padding:0;flex:none}.sidebar-bottom .user{display:none}.side-tools{margin:0;gap:0}.side-tools .seg,.side-tools .spacer{display:none}
  .client-topbar{padding:10px 14px}.client-brand .sub-l{display:none}.client-topbar .seg{display:none}
  .item{flex-wrap:wrap}.item-right{flex:1 1 auto;justify-content:flex-end}
  main{padding:20px 16px 60px}.top{flex-direction:column;align-items:flex-start}h1{font-size:22px}
  .kpis,.kpis.six{grid-template-columns:1fr 1fr}.task-row{grid-template-columns:1fr 96px}.task-row .hide-sm{display:none}
  .form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.brief-stat,.stage-strip{grid-template-columns:repeat(2,1fr)}
  .client-body{padding:14px}.client-page{padding:0 16px 40px}.builder-row{grid-template-columns:24px 1fr}.builder-row select,.builder-row input[type=number]{grid-column:2}
  .role-grid{grid-template-columns:1fr}.step-editor{grid-template-columns:1fr 1fr}.health-breakdown{grid-template-columns:1fr}.setup-summary{grid-template-columns:1fr 1fr}
  .toolbar input{min-width:0;flex:1}.event{grid-template-columns:1fr}
}

/* ---------- Charts (v1.1) ---------- */
:root{--c1:#2f5fb3;--c2:#1f9d6b;--c3:#e08a1e;--c4:#8b5cf6;--c5:#d9485f;--c6:#0ea5a4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c1:#7aa5f5;--c2:#4cc38a;--c3:#f0b35b;--c4:#b69cf6;--c5:#f07b8b;--c6:#4fd1c5}}
:root[data-theme="dark"]{--c1:#7aa5f5;--c2:#4cc38a;--c3:#f0b35b;--c4:#b69cf6;--c5:#f07b8b;--c6:#4fd1c5}
.chart{width:100%;display:block;overflow:visible}
.chart .grid-l{stroke:var(--line-2);stroke-width:1}
.chart .ax,.donut-wrap .ax{fill:var(--muted);font-size:10px;font-family:inherit}
.chart rect:hover,.chart .pt:hover{opacity:.8}
.spark{display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.legend.col{flex-direction:column;gap:7px;margin:0}
.legend.col span{justify-content:flex-start}.legend.col b{margin-left:auto;padding-left:14px;font-weight:600}
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut-c{fill:var(--ink);font-size:24px;font-weight:650}
.funnel{display:flex;flex-direction:column;gap:9px}
.f-row{display:grid;grid-template-columns:100px 1fr 60px 44px;gap:10px;align-items:center;font-size:12px}
.f-row .f-l{color:var(--ink-2)}.f-row b{text-align:right;font-variant-numeric:tabular-nums}.f-row small{color:var(--muted);text-align:right}
.f-bar{height:22px;background:var(--track);border-radius:6px;overflow:hidden}.f-bar i{display:block;height:100%;border-radius:6px;opacity:.85}
.hbars{display:flex;flex-direction:column;gap:9px}
.hb-row{display:grid;grid-template-columns:140px 1fr 60px;gap:10px;align-items:center;font-size:12px}
.hb-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}.hb-row b{text-align:right;font-variant-numeric:tabular-nums}
.delta-up{color:var(--ok)}.delta-down{color:var(--danger)}
.metric .spark{margin-top:6px}
.pcard{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.pcard .big{font-size:28px;font-weight:650;letter-spacing:-.03em}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line)}
.calendar .ch{background:var(--panel-2);padding:8px;font-size:11px;color:var(--muted);font-weight:600;text-align:center}
.calendar .cd{background:var(--panel);min-height:108px;padding:6px;display:flex;flex-direction:column;gap:4px}
.calendar .cd.out{background:var(--panel-2);opacity:.55}
.calendar .cd.today{box-shadow:inset 0 0 0 2px var(--accent)}
.calendar .dn{font-size:11px;color:var(--muted);font-weight:600}
.calendar .ev{font-size:11px;padding:3px 6px;border-radius:6px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:3px solid var(--c1);background:var(--panel-2)}
.calendar .ev.done{opacity:.6;text-decoration:line-through}
.ev.t-Advertising{border-color:var(--danger)}.ev.t-Informational{border-color:var(--blue)}.ev.t-Aesthetic{border-color:var(--violet)}.ev.t-Graphic{border-color:var(--ok)}
.checklist{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.checklist label{display:flex;gap:9px;align-items:center;font-size:12.5px;cursor:pointer}
.checklist label.done span{text-decoration:line-through;color:var(--muted)}
.link-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--blue);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-chip:hover{text-decoration:underline}
.stars{display:flex;gap:4px;flex-wrap:wrap}
.stars button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-weight:600;color:var(--ink-2)}
.stars button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.search-box{position:fixed;z-index:70;left:50%;top:14vh;transform:translateX(-50%);width:min(620px,calc(100vw - 28px));background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;animation:fade .12s}
.search-box input{width:100%;border:0;border-bottom:1px solid var(--line);padding:16px 18px;font-size:15px;background:transparent;outline:none}
.search-box .res{max-height:52vh;overflow:auto;padding:6px}
.search-box .res a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:9px;text-decoration:none;font-size:13px}
.search-box .res a.sel,.search-box .res a:hover{background:var(--hover)}
.search-box .res small{color:var(--muted);margin-left:auto;font-size:11px}
.search-box .grp{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;padding:8px 12px 4px;font-weight:600}
.search-trigger{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:7px 10px;margin:0 2px 12px;color:var(--muted);font-size:12.5px;cursor:pointer;width:calc(100% - 4px)}
.search-trigger kbd{margin-left:auto;font-size:10px;border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-family:inherit}
.rule-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line-2);font-size:13px}
.rule-row small{color:var(--muted);font-size:11.5px}
.wd{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:780px){.search-trigger{display:none}.f-row{grid-template-columns:70px 1fr 50px 36px}.hb-row{grid-template-columns:90px 1fr 50px}.calendar .cd{min-height:70px}.calendar .ev{font-size:10px}.rule-row{grid-template-columns:auto 1fr}}
.handoff input.field-input{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 11px;background:var(--panel);outline:none}
.handoff input.field-input:focus{border-color:var(--faint);box-shadow:0 0 0 3px var(--focus)}
.cl-area{margin:8px 0 0 30px;width:calc(100% - 30px);min-height:42px;border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:var(--panel);outline:none;resize:vertical}
.actions.field{flex-direction:row;justify-content:flex-end;align-items:center}
.actions.field .btn{flex:none}

/* ==========================================================================
   v2 — современный вид и анимации (поверх базовых стилей)
   ========================================================================== */
:root{
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --radius:16px;--radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(16,16,14,.04),0 1px 1px rgba(16,16,14,.02);
  --shadow-md:0 1px 2px rgba(16,16,14,.04),0 8px 24px -8px rgba(16,16,14,.10);
  --shadow-lg:0 2px 6px rgba(16,16,14,.05),0 32px 72px -12px rgba(16,16,14,.22);
  --glow:rgba(47,95,179,.07);--ring:0 0 0 3px var(--focus);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--shadow-md:0 0 0 1px rgba(255,255,255,.02),0 12px 28px -10px rgba(0,0,0,.6);--glow:rgba(122,165,245,.07)}}
:root[data-theme="dark"]{--shadow-md:0 0 0 1px rgba(255,255,255,.02),0 12px 28px -10px rgba(0,0,0,.6);--glow:rgba(122,165,245,.07)}

/* Фон: мягкое свечение сверху рабочей области */
main{position:relative;isolation:isolate}
main:before{content:'';position:absolute;z-index:-1;inset:0 0 auto 0;height:420px;pointer-events:none;
  background:radial-gradient(700px 260px at 18% -40px,var(--glow),transparent 70%),radial-gradient(520px 220px at 85% -60px,var(--glow),transparent 70%)}
h1{font-size:28px;letter-spacing:-.03em}

/* Сайдбар: стеклянный, плавающий индикатор активного пункта */
.sidebar{background:color-mix(in srgb,var(--sidebar) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);z-index:10}
.nav{position:relative}
.nav a{position:relative;z-index:1;transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
.nav a:hover{transform:translateX(2px)}
.nav a.active{background:transparent;box-shadow:none}
.nav a.active svg{color:var(--blue)}
.nav-pill{position:absolute;left:0;right:0;top:0;z-index:0;border-radius:9px;background:var(--panel);box-shadow:0 0 0 1px var(--line),var(--shadow-md);
  transition:transform .38s var(--spring),height .3s var(--ease),opacity .2s;pointer-events:none}
.nav-pill:before{content:'';position:absolute;left:0;top:26%;bottom:26%;width:3px;border-radius:0 3px 3px 0;background:var(--blue)}
.brand .mark{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--blue)));box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 60%,transparent);transition:transform .4s var(--spring)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}

/* Карточки: мягкие тени, подъём при наведении */
.card{transition:box-shadow .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.card:hover{box-shadow:var(--shadow-md)}
.metric{position:relative;overflow:hidden}
.metric:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,color-mix(in srgb,var(--panel) 10%,rgba(255,255,255,.35)) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none;opacity:.6}
.metric:hover:after{transform:translateX(120%);transition:transform .9s var(--ease)}
.metric:hover{transform:translateY(-2px)}
.metric .value{font-size:28px}
.item.click,.kcard,.task-row,.table tr.click td{transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.item.click:hover,.kcard:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.task-row:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}

/* Кнопки: нажатие, волна, фокус */
.btn,.icon-btn,.tabs button,.seg button{position:relative;overflow:hidden;transition:border-color .15s,background .15s,opacity .15s,transform .15s var(--ease),box-shadow .2s var(--ease)}
.btn:active:not(:disabled),.icon-btn:active,.tabs button:active{transform:scale(.96)}
.btn:hover:not(:disabled){box-shadow:var(--shadow-sm)}
.btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,var(--on-accent)),var(--accent));box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 4px 14px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn.primary:hover{opacity:1;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 20px -8px color-mix(in srgb,var(--accent) 80%,transparent);transform:translateY(-1px)}
.btn:focus-visible,.icon-btn:focus-visible,.nav a:focus-visible{outline:none;box-shadow:var(--ring)}
.m-ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.14;transform:scale(0);pointer-events:none;animation:m-ripple .55s var(--ease) forwards}
@keyframes m-ripple{to{transform:scale(1);opacity:0}}
.field input:focus,.field select:focus,.field textarea:focus,.handoff textarea:focus,.login input:focus{border-color:var(--faint);box-shadow:var(--ring)}
.tabs button{transition:color .18s,background .18s}
.tabs button.active{animation:m-pop .25s var(--spring)}
.icon-btn[data-theme-btn] svg{transition:transform .5s var(--spring)}
.icon-btn[data-theme-btn]:hover svg{transform:rotate(25deg)}
.badge{animation:m-pulse 2.4s ease-in-out infinite}
@keyframes m-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 45%,transparent)}50%{box-shadow:0 0 0 5px transparent}}

/* Теги и переключатели */
.tag{transition:transform .15s var(--ease)}
.switch .slider:before{transition:transform .3s var(--spring),background .2s}

/* Появление страницы */
.m-reveal{animation:m-rise .55s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes m-rise{from{opacity:0;transform:translateY(12px) scale(.985);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes m-pop{from{transform:scale(.92)}to{transform:none}}

/* Графики */
.m-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:m-draw 1.1s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes m-draw{to{stroke-dashoffset:0}}
.m-grow{transform-box:fill-box;transform-origin:50% 100%;animation:m-grow .7s var(--spring) both;animation-delay:var(--d,0ms)}
@keyframes m-grow{from{transform:scaleY(0)}}
.m-bar{transform-origin:0 50%;animation:m-bar .9s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes m-bar{from{transform:scaleX(0)}}
.m-spin{animation:m-spin .9s var(--ease) both}
@keyframes m-spin{from{transform:rotate(-90deg) scale(.85);opacity:0}}
svg.chart circle.pt{transition:r .15s var(--ease)}
svg.chart circle.pt:hover{r:5}
svg.chart rect{transition:opacity .15s}
svg.chart:hover rect[fill]:not([fill="transparent"]):not(:hover){opacity:.55}
.progress i{transition:width .6s var(--ease)}

/* Окна и шторки: пружинное появление и плавное закрытие */
.overlay{backdrop-filter:blur(6px) saturate(1.1);animation:fade .25s var(--ease)}
.modal{border-radius:20px;animation:m-modal .38s var(--spring)}
@keyframes m-modal{from{transform:translate(-50%,-46%) scale(.96);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
.drawer{animation:m-drawer .42s var(--ease);border-radius:20px 0 0 20px}
@keyframes m-drawer{from{transform:translateX(100%)}to{transform:none}}
.drawer > *{animation:m-rise .5s var(--ease) both}
.drawer > *:nth-child(2){animation-delay:60ms}.drawer > *:nth-child(3){animation-delay:110ms}.drawer > *:nth-child(4){animation-delay:160ms}.drawer > *:nth-child(n+5){animation-delay:200ms}
.overlay.m-leaving{animation:m-fadeout .18s var(--ease) forwards}
.modal.m-leaving{animation:m-modal-out .18s var(--ease) forwards}
.drawer.m-leaving{animation:m-drawer-out .2s var(--ease) forwards}
.m-leaving{pointer-events:none}
@keyframes m-fadeout{to{opacity:0}}
@keyframes m-modal-out{from{transform:translate(-50%,-50%)}to{transform:translate(-50%,-48%) scale(.97);opacity:0}}
@keyframes m-drawer-out{to{transform:translateX(40px);opacity:0}}
.close{transition:transform .3s var(--spring),background .15s}
.close:hover{transform:rotate(90deg)}
.search-box{animation:m-modal-top .3s var(--spring)}
@keyframes m-modal-top{from{transform:translateX(-50%) translateY(-10px) scale(.97);opacity:0}}

/* Уведомление */
.toast{transition:opacity .25s var(--ease),transform .45s var(--spring);transform:translate(-50%,24px) scale(.95);border-radius:12px;backdrop-filter:blur(8px)}
.toast.show{transform:translate(-50%,0) scale(1)}

/* Скелетон и вход */
.skeleton{background:linear-gradient(100deg,var(--soft) 30%,var(--panel-2) 50%,var(--soft) 70%);background-size:220% 100%;animation:shimmer 1.3s ease-in-out infinite,fade .3s}
.login{animation:m-modal-login .6s var(--spring)}
@keyframes m-modal-login{from{opacity:0;transform:translateY(16px) scale(.97)}}
.login-wrap{background:radial-gradient(900px 500px at 20% -10%,var(--glow),transparent 60%),radial-gradient(700px 500px at 90% 110%,var(--glow),transparent 60%),var(--bg)}

/* Смена темы: круговое раскрытие (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.m-theme *{transition:none!important}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   v3 — UX: свёрнутое меню, мобильная панель, палитра, аватары, мелкие правки
   ========================================================================== */
html,body{font-optical-sizing:auto}
body{font-feature-settings:"cv11","ss01","ss03"}
.metric .value,.big,.table td b,.item-right b{font-variant-numeric:tabular-nums}

/* Заголовок страницы: описание в одну строку, раскрывается по клику */
.top .sub{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;max-width:680px;transition:color .15s}
.top .sub:hover{color:var(--ink-2)}
.top .sub.open{-webkit-line-clamp:unset}
.top{align-items:center}

/* Единый вид выпадающих списков */
select:not([multiple]){appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 11px) 52%;background-size:4px 4px;background-repeat:no-repeat;padding-right:30px!important;cursor:pointer}
.toolbar select,.toolbar input{transition:border-color .15s,box-shadow .15s;height:34px}
.toolbar select:hover,.toolbar input:hover{border-color:var(--faint)}
.toolbar select:focus,.toolbar input:focus{box-shadow:var(--ring);border-color:var(--faint)}
.toolbar input[placeholder]{padding-left:32px;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a85' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 10px 50%/15px no-repeat}

/* Аватары: мягкий цвет по сотруднику */
.mini-avatar:not(.vac){background:hsl(var(--h,0) 62% 93%);color:hsl(var(--h,0) 42% 32%);border-color:transparent}
.sidebar .avatar{background:linear-gradient(135deg,hsl(var(--h,220) 65% 58%),hsl(calc(var(--h,220) + 40) 65% 48%));color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mini-avatar:not(.vac){background:hsl(var(--h,0) 28% 22%);color:hsl(var(--h,0) 70% 80%)}}
:root[data-theme="dark"] .mini-avatar:not(.vac){background:hsl(var(--h,0) 28% 22%);color:hsl(var(--h,0) 70% 80%)}

/* Кнопка «Готово» — спокойная, зеленеет при наведении */
.btn.done-btn{background:var(--panel);color:var(--ink-2);border-color:var(--line)}
.btn.done-btn:hover{background:var(--ok-bg);color:var(--ok);border-color:transparent}

/* Таблица задач: гибкие колонки, без наложения на правую панель */
.task-row{grid-template-columns:minmax(0,2.1fr) minmax(84px,.8fr) minmax(0,1fr) minmax(0,1.25fr) 78px 84px;padding:11px 14px}
.task-row > div{min-width:0}
.task-row .cell b,.task-row .task-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-row .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.task-layout > *{min-width:0}
@media(max-width:1200px){.task-row{grid-template-columns:minmax(0,2fr) minmax(84px,.8fr) minmax(0,1fr) minmax(0,1.2fr)}}
@media(max-width:780px){.task-row{grid-template-columns:minmax(0,1fr) auto}}

/* Пустые состояния */
.card.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:36px 20px;text-align:center}
.card.empty:before{content:'';width:40px;height:40px;border-radius:12px;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l2 3h4l2-3h4'/%3E%3Cpath d='M5.5 5h13L21 13v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5z'/%3E%3C/svg%3E") center/20px no-repeat}

/* Уведомление с иконкой */
.toast{display:flex;align-items:center;gap:9px}
.toast:before{content:'✓';display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,currentColor 20%,transparent);font-size:10px;font-weight:700;flex:none}
.toast.err:before{content:'!'}

/* Клавиши */
kbd{font-family:inherit;font-size:10.5px;font-weight:600;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;background:var(--panel-2);color:var(--ink-2);line-height:1.5}
.search-box .res a kbd{margin-left:auto}
.search-box input{font-size:16px;padding:18px 20px}
.kb-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.kb-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px}
@media(max-width:780px){.kb-grid{grid-template-columns:1fr}}

/* Подсказка */
.tip{position:fixed;z-index:200;background:var(--ink);color:var(--bg);font-size:12px;font-weight:500;padding:5px 9px;border-radius:7px;pointer-events:none;white-space:nowrap;animation:fade .12s;box-shadow:var(--shadow-md)}
.tip[data-side="right"]{transform:translateY(-50%)}
.tip[data-side="top"]{transform:translate(-50%,-100%)}

/* Кнопка сворачивания меню */
.brand{position:relative}
.rail-btn{margin-left:auto;width:28px;height:28px;opacity:0;transition:opacity .2s,background .15s}
.sidebar:hover .rail-btn,.rail-btn:focus-visible{opacity:.8}
.m-only,.tabbar{display:none}

/* Свёрнутое меню (только на десктопе) */
@media(min-width:781px){
  .app{transition:grid-template-columns .32s var(--ease)}
  .rail .app{grid-template-columns:72px minmax(0,1fr)}
  .rail .sidebar{padding:18px 10px 14px}
  .rail .brand{flex-direction:column;margin:2px 0 14px;gap:8px}
  .rail .brand>div{display:none}
  .rail .rail-btn{margin:0;opacity:.7}
  .rail .rail-btn svg{transform:scaleX(-1)}
  .rail .search-trigger{font-size:0;justify-content:center;padding:8px 0;margin:0 0 10px;width:100%}
  .rail .search-trigger kbd{display:none}
  .rail .nav a{justify-content:center;padding:9px 0}
  .rail .nav a span{display:none}
  .rail .nav a:hover{transform:none}
  .rail .nav .nav-label{font-size:0;padding:10px 0 6px}
  .rail .nav .nav-label:after{content:'';display:block;height:1px;background:var(--line);margin:0 14px}
  .rail .user{justify-content:center;padding:6px 0}
  .rail .user > div:last-child{display:none}
  .rail .side-tools{flex-direction:column;align-items:center;gap:2px}
  .rail .side-tools .seg,.rail .side-tools .spacer{display:none}
}

/* Мобильная версия: верхняя панель + нижняя навигация */
@media(max-width:780px){
  .sidebar .nav,.sidebar .search-trigger,.rail-btn{display:none}
  .m-only{display:inline-grid}
  .sidebar{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.4)}
  .sidebar-bottom{margin-left:auto}
  .tabbar{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(18px) saturate(1.5);border:1px solid var(--line);border-radius:22px;padding:6px;box-shadow:var(--shadow-lg);gap:2px}
  .tabbar a,.tabbar button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border:0;background:transparent;border-radius:16px;color:var(--muted);font-size:10px;font-weight:500;text-decoration:none;cursor:pointer;transition:color .2s,background .25s var(--ease)}
  .tabbar .on{color:var(--ink);background:var(--soft)}
  .tabbar .on svg{color:var(--blue)}
  .tabbar svg{width:20px;height:20px}
  .tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  main{padding-bottom:120px}
  .toast{bottom:100px}
  .drawer.sheet{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;max-height:84vh;border-radius:24px 24px 0 0;border-left:0;border-top:1px solid var(--line);animation:m-sheet .4s var(--ease);padding:8px 16px calc(20px + env(safe-area-inset-bottom))}
  .drawer.sheet.m-leaving{animation:m-sheet-out .22s var(--ease) forwards}
  .top .sub{-webkit-line-clamp:2}
  .toolbar select,.toolbar input{flex:1 1 140px;min-width:0}
}
.sheet-grip{width:40px;height:4px;border-radius:9px;background:var(--line);margin:4px auto 8px}
.sheet-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:600;margin:14px 4px 8px}
.sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sheet-grid a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;border-radius:16px;background:var(--panel-2);border:1px solid var(--line);text-decoration:none;color:var(--ink-2);font-size:11.5px;text-align:center;line-height:1.25}
.sheet-grid a.on{border-color:var(--ink);color:var(--ink)}
.sheet-grid svg{width:20px;height:20px}
.sheet-tools{display:flex;gap:8px;margin-top:16px}
.sheet-tools .btn{flex:1;justify-content:center;padding:10px}
@keyframes m-sheet{from{transform:translateY(100%)}}
@keyframes m-sheet-out{to{transform:translateY(100%)}}
.task-row small.meta-line{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.task-row small.meta-line > span:last-child{overflow:hidden;text-overflow:ellipsis}
@media(max-width:780px){.top{align-items:flex-start}}
.task-row small.meta-line .tag{flex:none;max-width:none}

/* ==========================================================================
   v4 — правка в строке, «Отменить», виды, плотность, обучение, карточки, фото
   ========================================================================== */
/* Всплывающее меню */
.pop{position:fixed;z-index:120;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;animation:m-pop-in .18s var(--ease);max-height:min(420px,70vh);overflow:auto}
.pop[data-dir="up"]{animation-name:m-pop-up}
@keyframes m-pop-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes m-pop-up{from{opacity:0;transform:translateY(4px) scale(.98)}}
.pop-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:600;padding:6px}
.pop-list{display:flex;flex-direction:column;gap:1px}
.pop-list button{display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:9px;padding:7px 8px;cursor:pointer;text-align:left;font-size:13px;color:var(--ink)}
.pop-list button:hover{background:var(--hover)}
.pop-list button.on{background:var(--soft);font-weight:600}
.pop-list button small{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.pop-search{width:100%;border:1px solid var(--line);border-radius:9px;padding:7px 10px;margin-bottom:6px;background:var(--panel-2);outline:none}
.pop-search:focus{box-shadow:var(--ring)}
.pop-form{display:flex;flex-direction:column;gap:8px;padding:4px}
.pop-form label{font-size:12px;color:var(--muted)}
.pop-form input{border:1px solid var(--line);border-radius:9px;padding:7px 10px;background:var(--panel);outline:none}
.pop-form input:focus{box-shadow:var(--ring)}
.pop-actions{display:flex;justify-content:flex-end}
.pop-quick{display:flex;gap:6px;flex-wrap:wrap}
.pop-seg{display:flex;margin:0 4px 6px}.pop-seg button{flex:1;padding:6px 8px}
.pop-checks{display:flex;flex-direction:column}
.pop-checks label{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;cursor:pointer;font-size:13px}
.pop-checks label:hover{background:var(--hover)}
.pop-hint{font-size:11px;color:var(--muted);padding:6px 8px 2px}

/* Правка в строке */
.inline-edit{cursor:pointer;border-radius:8px;transition:background .15s,box-shadow .15s;display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0}
.inline-edit:hover{background:var(--hover);box-shadow:0 0 0 4px var(--hover)}
b.inline-edit{display:inline-block}
.tag.ghost{background:transparent;border:1px dashed var(--line);color:var(--faint)}
.task-row:not(:hover) .tag.ghost{opacity:0}

/* Чипы (виды задач) */
.views-bar{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 14px}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--ink-2);border-radius:99px;padding:5px 12px;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s,color .15s;font-weight:500}
.chip:hover{border-color:var(--faint)}
.chip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.chip.add{border-style:dashed;color:var(--muted)}
.chip .x{opacity:.5;font-size:14px;line-height:1;margin-right:-4px}
.chip .x:hover{opacity:1}

/* Уведомления с «Отменить» */
.undo-stack{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:110;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.undo-toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 10px 10px 16px;font-size:13px;box-shadow:var(--shadow-lg);animation:m-undo-in .4s var(--spring);max-width:min(460px,calc(100vw - 24px))}
.undo-toast button{border:0;background:color-mix(in srgb,var(--bg) 16%,transparent);color:inherit;font-weight:600;border-radius:8px;padding:6px 11px;cursor:pointer;font-size:12.5px}
.undo-toast button:hover{background:color-mix(in srgb,var(--bg) 26%,transparent)}
.undo-toast i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:color-mix(in srgb,var(--bg) 50%,transparent);transform-origin:0 50%;animation:m-undo-bar linear forwards}
.undo-toast.out{animation:m-fadeout .25s var(--ease) forwards}
@keyframes m-undo-in{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes m-undo-bar{to{transform:scaleX(0)}}
.m-removing{animation:m-collapse .3s var(--ease) forwards;pointer-events:none}
tr.m-removing{animation:none;opacity:.25}
@keyframes m-collapse{to{opacity:0;transform:translateX(12px);height:0;padding-top:0;padding-bottom:0;margin:0;border-width:0}}
@media(max-width:780px){.undo-stack{bottom:96px}}

/* Подтверждение */
.modal.ask-modal{width:min(420px,calc(100vw - 28px))}
.ask p{margin:4px 0 18px;font-size:14px;line-height:1.55}
.ask .actions{display:flex;justify-content:flex-end;gap:8px}

/* Перетаскивание */
.kcard[draggable="true"]{cursor:grab}
.kcard.dragging,.ev.dragging{opacity:.4}
.is-dragging .column{transition:opacity .2s,background .2s}
.is-dragging .column:not(.drop-ok){opacity:.55}
.column.drop-ok{outline:2px dashed color-mix(in srgb,var(--blue) 45%,transparent);outline-offset:-2px}
.column.drop-over{background:var(--blue-bg)}
.kcard.moved{animation:m-pop .35s var(--spring)}
.calendar .ev[draggable="true"]{cursor:grab}
.calendar .cd.drop-over{background:var(--blue-bg);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--blue) 45%,transparent)}

/* Настройка карточек */
.kpi-grid{position:relative}
.kpi-grid .kpi-off{display:none}
.kpis.kpi-custom{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.kpi-gear{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--muted);opacity:0;transition:opacity .2s,transform .3s var(--spring);box-shadow:var(--shadow-md);z-index:2}
.kpi-gear svg{width:14px;height:14px}
.kpi-grid:hover .kpi-gear,.kpi-gear:focus-visible{opacity:1}
.kpi-gear:hover{transform:rotate(45deg);color:var(--ink)}
@media(hover:none){.kpi-gear{opacity:.8;top:-8px;right:-4px}}

/* Обучение */
.tour-hole{position:fixed;z-index:150;border-radius:14px;box-shadow:0 0 0 9999px rgba(10,10,12,.55),0 0 0 2px var(--blue);transition:all .35s var(--ease);pointer-events:none}
.tour-card{position:fixed;z-index:151;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:16px 16px 12px;transition:left .35s var(--ease),top .35s var(--ease);animation:m-pop-in .3s var(--ease)}
.tour-card b{font-size:15px;display:block;margin:4px 0 6px}
.tour-card p{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.tour-step{font-size:11px;color:var(--muted);font-weight:600}
.tour-actions{display:flex;gap:6px;align-items:center}
.tour-actions .spacer{flex:1}

/* Фото */
.mini-avatar.has-photo,.avatar.has-photo{padding:0;overflow:hidden;background:var(--soft)}
.mini-avatar img,.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.photo-block{display:flex;align-items:center;gap:16px;padding:4px 0 18px;margin-bottom:16px;border-bottom:1px solid var(--line-2)}
.photo-block b{font-size:15px;display:block}
.photo-block small{color:var(--muted);font-size:12px}
.photo-big{width:72px;height:72px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:22px;font-weight:600;overflow:hidden;background:linear-gradient(135deg,hsl(var(--h,220) 65% 58%),hsl(calc(var(--h,220) + 40) 65% 48%));color:#fff;box-shadow:0 0 0 4px var(--panel),0 0 0 5px var(--line)}
.photo-big img{width:100%;height:100%;object-fit:cover}

/* Компактный режим */
.compact main{padding-top:24px}
.compact .card{padding:14px}
.compact .metric{padding:12px 14px}
.compact .metric .value{font-size:22px}
.compact .metric .label{margin-bottom:5px}
.compact .grid{gap:10px}
.compact .kpis{margin-bottom:10px}
.compact .item{padding:7px 10px}
.compact .list{gap:4px}
.compact .task-row{padding:7px 12px}
.compact .task-row small{margin-top:2px}
.compact .table td{padding:6px 8px}
.compact .top{margin-bottom:16px}
.compact h1{font-size:23px}
.compact .kcard{padding:8px;margin-bottom:4px}
.compact .nav a{padding:5px 10px}
.task-row small.meta-line > .inline-edit{flex:none}
.task-row small.meta-line .inline-edit .tag{flex:none;max-width:none}

/* ---------- Посещаемость ---------- */
.att-card .att-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.att-sum{font-size:26px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.att-sched{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);background:var(--soft);border-radius:99px;padding:4px 10px;white-space:nowrap}
.att-sched svg{width:13px;height:13px}
.att-today{margin-top:12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--panel-2);border:1px solid var(--line-2);font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.att-checkin{width:100%;justify-content:center;margin-top:14px;padding:11px;font-size:14px}
.att-checkin svg{width:17px;height:17px}
.att-note{margin-bottom:14px}
.warn-note{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.att-table td{vertical-align:middle}
.att-table td .btn{margin-left:4px}
.att-table td .btn svg{width:13px;height:13px}
.att-preview{font-size:12.5px;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:9px 12px}
.att-h{font-size:13px;margin:18px 0 8px}
.att-h:first-child{margin-top:0}
.att-sched-grid{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow:auto}
.att-sched-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px;gap:8px;align-items:center}
.att-sched-row.head{font-size:11px;color:var(--muted)}
.att-sched-row input,.att-tier input{border:1px solid var(--line);border-radius:9px;padding:6px 9px;background:var(--panel);min-width:0;outline:none}
.att-sched-row input:focus,.att-tier input:focus{box-shadow:var(--ring)}
.att-tiers{display:flex;flex-direction:column;gap:4px}
.att-tier{display:grid;grid-template-columns:minmax(0,1fr) 80px 36px 130px 36px;gap:8px;align-items:center;font-size:13px;margin-top:4px}
.att-tier span{color:var(--muted);font-size:12px}
@media(max-width:780px){.att-sched-row{grid-template-columns:minmax(0,1fr) 90px 90px}.att-tier{grid-template-columns:1fr 64px 30px 100px 30px}}

/* ---------- Бренд: логотип ASAR™ и перо (водяной знак) ---------- */
/* SVG подключены как маски: цвет берётся из темы, логотип одинаково чёткий в светлой и тёмной теме. */
.wordmark{display:block;height:15px;aspect-ratio:444/80;background:var(--ink);
  -webkit-mask:url(/brand/logo.svg) left center/contain no-repeat;mask:url(/brand/logo.svg) left center/contain no-repeat}
.brand{letter-spacing:0;font-size:inherit}
.brand small{margin-top:5px}
.brand .mark{font-size:0;position:relative}
.brand .mark:after{content:'';position:absolute;inset:5px 6px;background:var(--on-accent);
  -webkit-mask:url(/brand/watermark.svg) center/contain no-repeat;mask:url(/brand/watermark.svg) center/contain no-repeat}
.login .wordmark{height:17px}
.client-brand .wordmark{height:14px}
.client-brand .brand{display:flex;align-items:center;gap:10px}

/* Водяной знак: крупное перо на фоне, едва заметное */
body:before{content:'';position:fixed;z-index:-1;pointer-events:none;right:-60px;bottom:-80px;width:520px;height:663px;
  background:var(--ink);opacity:.035;-webkit-mask:url(/brand/watermark.svg) center/contain no-repeat;mask:url(/brand/watermark.svg) center/contain no-repeat}
body{position:relative;isolation:isolate}
.login-wrap{position:relative;overflow:hidden}
.login-wrap:after{content:'';position:absolute;pointer-events:none;left:50%;top:50%;width:760px;height:969px;transform:translate(-8%,-46%) rotate(8deg);
  background:var(--ink);opacity:.05;-webkit-mask:url(/brand/watermark.svg) center/contain no-repeat;mask:url(/brand/watermark.svg) center/contain no-repeat}
.login{position:relative;z-index:1}
@media(max-width:780px){body:before{width:300px;height:383px;right:-50px;bottom:40px}}
@media print{body:before{display:none}}