/* fonts: self-hosted (SIL OFL, see fonts/) */
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/jetbrains-mono-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/jetbrains-mono-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#F3F5F8; --surface:#FFFFFF; --surface-2:#EDF0F5; --text:#1A2230; --muted:#66738A; --border:#DCE2EB; --border-strong:#C5CDD9;
  --accent:#3057D5; --accent-soft:#E3E9FB; --accent-text:#FFFFFF;
  --danger:#D6413B; --danger-soft:#FBE5E3; --warn:#D08B0A; --ok:#2B9A57;
  --week-alt:rgba(48,87,213,0.035); --today:#E0443A; --shadow:0 10px 30px rgba(20,30,50,0.14);
  --left-w:300px; --row-lane:26px;
  --row-z:#F6F8FB; --row-hover:#EEF2FA; --sep:#C9D1DD; --env:rgba(26,34,48,.035); --env-b:rgba(26,34,48,.10);
  --past:rgba(26,34,48,.05); --today-line:rgba(26,34,48,.45); --today-col:rgba(26,34,48,.045); --zebra:rgba(26,34,48,.035); --zebra-mix:3.5%; --hover-a:rgba(48,87,213,.06);
  --rail:rgba(102,115,138,.6); --danger-text:#B8322D; --badge-fg:#FFFFFF;
  --act-mix:20%; --act-bd:60%; --plan-mix:6%; --plan-bd:60%; --done-mix:24%; --done-bd:45%; --done-op:1; --tag-mix:14%; --tag-fg:60%; --grp-mix:8%;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E131A; --surface:#161C26; --surface-2:#1E2632; --text:#E4E9F1; --muted:#8C98AB; --border:#28313F; --border-strong:#38445A;
    --accent:#7C9CFF; --accent-soft:#233052; --accent-text:#0E131A;
    --danger:#F0665F; --danger-soft:#3D2222; --warn:#E8B048; --ok:#4FC27C;
    --week-alt:rgba(124,156,255,0.05); --today:#FF6B62; --shadow:0 12px 34px rgba(0,0,0,0.5);
    --row-z:#1A212C; --row-hover:#212A38; --sep:#3A4558; --env:rgba(228,233,241,.045); --env-b:rgba(228,233,241,.13);
    --past:rgba(0,0,0,.24); --today-line:rgba(228,233,241,.5); --today-col:rgba(228,233,241,.05); --zebra:rgba(228,233,241,.04); --zebra-mix:4%; --hover-a:rgba(124,156,255,.07);
    --rail:rgba(140,152,171,.6); --danger-text:#FF9A94; --badge-fg:#0E131A;
    --act-mix:30%; --act-bd:75%; --plan-mix:8%; --plan-bd:70%; --done-mix:16%; --done-bd:35%; --done-op:.85; --tag-mix:22%; --tag-fg:55%; --grp-mix:12%;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E131A; --surface:#161C26; --surface-2:#1E2632; --text:#E4E9F1; --muted:#8C98AB; --border:#28313F; --border-strong:#38445A;
  --accent:#7C9CFF; --accent-soft:#233052; --accent-text:#0E131A;
  --danger:#F0665F; --danger-soft:#3D2222; --warn:#E8B048; --ok:#4FC27C;
  --week-alt:rgba(124,156,255,0.05); --today:#FF6B62; --shadow:0 12px 34px rgba(0,0,0,0.5);
  --row-z:#1A212C; --row-hover:#212A38; --sep:#3A4558; --env:rgba(228,233,241,.045); --env-b:rgba(228,233,241,.13);
  --past:rgba(0,0,0,.24); --today-line:rgba(228,233,241,.5); --today-col:rgba(228,233,241,.05); --zebra:rgba(228,233,241,.04); --zebra-mix:4%; --hover-a:rgba(124,156,255,.07);
  --rail:rgba(140,152,171,.6); --danger-text:#FF9A94; --badge-fg:#0E131A;
  --act-mix:30%; --act-bd:75%; --plan-mix:8%; --plan-bd:70%; --done-mix:16%; --done-bd:35%; --done-op:.85; --tag-mix:22%; --tag-fg:55%; --grp-mix:12%;
}
*{box-sizing:border-box}
html,body{height:100%}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.4}
#app{height:100%;display:flex;flex-direction:column}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- toolbar ---------- */
.top{padding:14px 16px 10px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--border);background:var(--surface)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row.between{justify-content:space-between}
h1{margin:0;font-size:18px;font-weight:700;letter-spacing:-0.01em;text-wrap:balance}
.sub{color:var(--muted);font-size:12.5px}
.btn{border:1px solid var(--border-strong);background:var(--surface);border-radius:8px;padding:7px 12px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn.small{padding:4px 9px;font-size:12px;border-radius:6px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:7px 12px;font-weight:600;font-size:13px}
.seg button.on{background:var(--accent);color:var(--accent-text)}
.field{display:flex;flex-direction:column;gap:3px}
.field label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
select,input[type=text],input[type=password],input[type=date],input[type=url],input[type=search],textarea{border:1px solid var(--border-strong);background:var(--surface);border-radius:7px;padding:6px 8px;font-size:13px;min-width:0}
input[type=search]{min-width:180px}
.filters select{min-width:150px}
.readonly{background:var(--surface-2);color:var(--muted);padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;border:1px solid var(--border)}

/* ---------- board ---------- */
.board-wrap{flex:1;min-height:0;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.board{flex:1;min-height:320px;overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--surface);position:relative}
.hdr{position:sticky;top:0;z-index:5;display:flex;background:var(--surface);border-bottom:1px solid var(--border-strong)}
.corner{position:sticky;left:0;z-index:6;width:var(--left-w);min-width:var(--left-w);background:var(--surface);border-right:1px solid var(--border-strong);padding:8px 12px;display:flex;flex-direction:column;justify-content:flex-end;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.hdr-tl{position:relative;height:52px;flex:none}
.months{position:absolute;top:0;left:0;right:0;height:24px}
.month{position:absolute;top:0;height:24px;border-left:1px solid var(--border);padding:4px 0;font-size:12px;font-weight:700;white-space:nowrap}
.month>span{position:sticky;left:calc(var(--left-w) + 8px);padding:0 8px;display:inline-block}
.month.major{border-left-color:var(--border-strong)}
.weeks{position:absolute;top:24px;left:0;right:0;height:28px}
.week{position:absolute;top:0;height:28px;border-left:1px solid transparent;padding:6px 6px 0;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden}
.week.wk0{border-left-color:var(--border)}
.week .lb:empty{display:none}
.week.cur .lb{background:var(--text);color:var(--bg);border-radius:5px;padding:1px 5px;font-weight:700}
.week.wkend{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.week.dayc{display:flex;align-items:center;justify-content:center;padding:0}
.week.dayc .lb{display:flex;flex-direction:column;align-items:center;line-height:1.1;gap:1px;padding:2px 3px}
.week.dayc .dd{font-size:11px}
.week.dayc .wd{font-size:9.5px;opacity:.8}
.body{position:relative}
.hdr,.grp,.pgrp,.rowp{width:max-content;min-width:100%}
/* grid: dimmed past, lines only at week and month starts, today column and line */
.grid{position:absolute;top:0;bottom:0;pointer-events:none;z-index:0}
.gpast{position:absolute;top:0;bottom:0;left:0;background:var(--past);pointer-events:none}
.gl{position:absolute;top:0;bottom:0;width:0;border-left:1px solid var(--border)}
.gl.major{border-left-color:var(--border-strong)}
.gw{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--muted) 9%,transparent)}
.gtd{position:absolute;top:0;bottom:0;background:var(--today-col)}
/* today line sits above rows, separators and zebra; only stage bars, overdue marks and the sticky left column are above it */
.today-line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--today-line);pointer-events:none;z-index:1}
/* group rows: teams, people, markets, directions */
.grp,.pgrp{display:flex;background:var(--surface-2);border-bottom:1px solid var(--border)}
.grp .lcell,.pgrp .lcell{position:sticky;left:0;z-index:4;width:var(--left-w);min-width:var(--left-w);background:var(--surface-2);border-right:1px solid var(--border-strong);padding:0 12px;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.pgrp .lcell{padding-left:24px}
.grp .lcell:hover,.pgrp .lcell:hover{box-shadow:inset 0 0 0 999px var(--hover-a)}
.grp .rcell,.pgrp .rcell{height:44px}
.pw{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.pw .nm{display:flex;align-items:baseline;gap:5px;min-width:0;white-space:nowrap}
.pw .nm b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.pw .rl{flex:none;font-size:11px;font-weight:500;color:var(--muted)}
.pw .role{color:var(--muted);font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp.free .pw b,.pgrp.free .pw b{color:var(--muted);font-weight:600}
.chev{display:inline-block;width:14px;flex:none;color:var(--muted);transition:transform .15s}
.grp.closed .chev,.pgrp.closed .chev{transform:rotate(-90deg)}
.grp.d1 .lcell,.pgrp.d1 .lcell,.rowp.d1 .lcell{padding-left:28px}
.grp.d2 .lcell,.pgrp.d2 .lcell,.rowp.d2 .lcell{padding-left:44px}
.grp.d3 .lcell,.pgrp.d3 .lcell,.rowp.d3 .lcell{padding-left:60px}
.pgrp.d4 .lcell,.rowp.d4 .lcell{padding-left:76px}
.grp.d1,.grp.d1 .lcell{background:color-mix(in srgb,var(--surface-2) 60%,var(--surface))}
.grp.d2,.grp.d3,.grp.d2 .lcell,.grp.d3 .lcell{background:color-mix(in srgb,var(--surface-2) 35%,var(--surface))}
.gdot{flex:none;width:10px;height:10px;border-radius:3px;background:var(--gc)}
.grp.c,.grp.c .lcell,.pgrp.c,.pgrp.c .lcell{background:color-mix(in srgb,var(--gc) var(--grp-mix),var(--surface-2))}
.tg-label{font-size:12px;color:var(--muted);font-weight:600}
.seg.tg button+button{border-left:1px solid var(--border-strong)}
.seg.tg button:not(.on):hover{background:var(--surface-2)}
.seg.tg button.on::before{content:"✓ "}
/* project rows: 2 lines for the name + 1 line for status and current stages; zebra + hairline between rows */
.rowp{display:flex;position:relative;border-bottom:1px solid var(--border)}
.rowp.z{background:var(--zebra)}
.rowp .lcell{position:sticky;left:0;z-index:4;width:var(--left-w);min-width:var(--left-w);background:var(--surface);border-right:1px solid var(--border-strong);padding:0 12px;display:flex;flex-direction:column;justify-content:center;gap:3px;cursor:pointer;overflow:hidden}
.rowp.z .lcell{background:color-mix(in srgb,var(--text) var(--zebra-mix),var(--surface))}
.rowp:hover{background:var(--hover-a)}
.rowp:hover .lcell{background:var(--row-hover)}
.rowp .lcell.static{cursor:default}
.pname{font-weight:600;font-size:13px;line-height:16px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.pmeta{display:flex;gap:4px;align-items:center;font-size:11px;color:var(--muted);flex-wrap:nowrap;overflow:hidden;min-width:0;min-height:16px;flex-shrink:0}
.pmeta a{color:var(--muted);text-decoration:none;margin-left:2px}
.pill{padding:0 7px;border-radius:99px;font-size:10.5px;font-weight:600;line-height:15px;border:1px solid var(--border-strong);color:var(--muted);white-space:nowrap;flex:none}
.pill.active{color:var(--ok);border-color:var(--ok)} .pill.paused{color:var(--warn);border-color:var(--warn)} .pill.done{opacity:.7}
.stags{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.stags b{padding:0 5px;border-radius:4px;font-size:10px;font-weight:800;line-height:16px;letter-spacing:.02em;background:color-mix(in srgb,var(--sc) var(--tag-mix),var(--surface));color:color-mix(in srgb,var(--sc) var(--tag-fg),var(--text))}
.rcell{position:relative;flex:none}
/* stage bars: colour = stage, fill/outline = status; chip with the stage at the start */
.sbar{position:absolute;box-sizing:border-box;border-radius:6px;display:flex;align-items:center;padding:0 5px;font-size:12px;white-space:nowrap;overflow:hidden;overflow:clip;cursor:pointer;border:1px solid transparent;z-index:1}
/* the label sticks to the visible left edge when the bar starts off-screen (overflow:clip keeps sticky working) */
.sbar .in{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;overflow:hidden;position:sticky;left:calc(var(--left-w) + 6px)}
.sbar:hover{filter:brightness(1.06);z-index:2}
.sbar .tag{flex:none;padding:0 6px;height:16px;line-height:16px;border-radius:4px;font-size:10.5px;font-weight:800;letter-spacing:.02em}
.sbar .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.sbar.progress,.sbar.blocked{background:color-mix(in srgb,var(--sc) var(--act-mix),var(--surface));border-color:color-mix(in srgb,var(--sc) var(--act-bd),transparent)}
.sbar.progress .tag,.sbar.blocked .tag{background:var(--sc);color:var(--tc)}
.sbar.progress .txt,.sbar.blocked .txt{color:var(--text);font-weight:600}
.sbar.blocked{background-image:repeating-linear-gradient(135deg,color-mix(in srgb,var(--danger) 22%,transparent) 0 4px,transparent 4px 9px);border:1.5px solid var(--danger)}
.sbar.plan{background:color-mix(in srgb,var(--sc) var(--plan-mix),var(--surface));border:1.5px dashed color-mix(in srgb,var(--sc) var(--plan-bd),transparent)}
.sbar.plan .tag{color:color-mix(in srgb,var(--sc) 60%,var(--text));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc) 70%,transparent)}
.sbar.plan .txt{color:color-mix(in srgb,var(--text) 80%,var(--muted))}
.sbar.done{background:color-mix(in srgb,var(--sc) var(--done-mix),var(--surface));border-color:color-mix(in srgb,var(--sc) var(--done-bd),transparent);opacity:var(--done-op)}
.sbar.done .tag{color:color-mix(in srgb,var(--sc) 65%,var(--muted))}
.sbar.done .txt{color:var(--muted)}
.sbar.paused{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 20%,transparent) 0 5px,transparent 5px 10px);border:1px dashed var(--muted)}
.sbar.paused .tag{background:color-mix(in srgb,var(--muted) 22%,transparent);color:var(--text)}
.sbar.paused .txt{color:var(--muted)}
.sbar.support{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--sc) 30%,var(--surface)) 0 5px,color-mix(in srgb,var(--sc) 12%,var(--surface)) 5px 10px);border:1px solid color-mix(in srgb,var(--sc) 55%,transparent)}
.sbar.support.plan{border-style:dashed}
.sbar.support.done{opacity:.55}
.sbar.support .tag{background:transparent;color:color-mix(in srgb,var(--sc) 60%,var(--text));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc) 60%,transparent)}
.sbar.support .txt{color:var(--text)}
/* project bar without "Стадии": one neutral colour for all projects; stage colours only on the chips */
.sbar.proj{background:color-mix(in srgb,var(--text) 7%,var(--surface));border-color:var(--border-strong)}
.sbar.proj .tag{background:var(--sc);color:var(--tc)}
.sbar.proj .tag.nx{background:transparent;color:color-mix(in srgb,var(--sc) 60%,var(--text));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc) 70%,transparent)}
.sbar.proj .tag.bl{box-shadow:0 0 0 1.5px var(--danger)}
.sbar.proj .txt{color:var(--text);font-weight:600}
.sbar.proj.p-paused{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 20%,transparent) 0 5px,transparent 5px 10px);border:1px dashed var(--muted)}
.sbar.proj.p-paused .txt{color:var(--muted)}
.sbar.proj.p-done{opacity:.55}
.sbar.late,.sbar.proj.late{border:1.5px solid var(--danger)}
.sbar .txt.warn{color:var(--danger-text);font-weight:700}
.rail{position:absolute;height:2px;background:repeating-linear-gradient(90deg,var(--rail) 0 4px,transparent 4px 8px);pointer-events:none}
.late-tail{position:absolute;height:0;border-top:2px dashed var(--danger);pointer-events:none;z-index:1}
.late-badge{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--danger);color:var(--badge-fg);box-shadow:0 0 0 2px var(--surface);font-size:11px;font-weight:800;line-height:16px;text-align:center;z-index:2;cursor:pointer}
.late-badge.static{position:static;display:inline-block;box-shadow:none;cursor:default}
/* milestones and release (the "Стадии" mode) */
.ms{position:absolute;bottom:2px;height:16px;width:0;z-index:2;cursor:pointer}
.ms i{position:absolute;bottom:2px;left:-7px;width:12px;height:12px;transform:rotate(45deg);background:var(--sc);border-radius:2px;box-shadow:0 0 0 2px var(--surface)}
.ms span{position:absolute;bottom:0;left:9px;font-size:10.5px;font-weight:700;color:var(--sc);white-space:nowrap;background:var(--surface);padding:0 3px;border-radius:3px}
.ms.past{opacity:.6}
.swd{width:10px;height:10px;transform:rotate(45deg);background:var(--sc);border-radius:2px;display:inline-block;margin:0 5px}
.stg.msrow{border-left-style:dashed}
.ms.br i{border-radius:50%;transform:none;width:11px;height:11px;left:-6.5px;background:var(--surface);border:2.5px solid var(--sc);box-shadow:0 0 0 2px var(--surface)}
.rtest{position:absolute;bottom:3px;height:12px;z-index:1;cursor:pointer}
.rtest::before{content:'';position:absolute;left:0;right:0;top:5px;border-top:2px dotted color-mix(in srgb,var(--sc) 75%,transparent)}
.rtest span{position:absolute;left:50%;transform:translateX(-50%);top:-1px;font-size:9.5px;font-weight:700;color:var(--sc);white-space:nowrap;background:var(--surface);padding:0 3px;border-radius:3px;line-height:12px}
.swb{width:9px;height:9px;border-radius:50%;border:2px solid var(--sc);display:inline-block}
.swrt{width:18px;height:0;border-top:2px dotted var(--muted);display:inline-block}
.ro .sbar,.ro .late-badge,.ro .ms,.ro .rowp .lcell{cursor:default}
.empty{padding:40px 16px;color:var(--muted);text-align:center}
.empty b{color:var(--text)}

/* ---------- legend ---------- */
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);align-items:center}
.legend .li{display:inline-flex;align-items:center;gap:6px}
.lsw{width:22px;height:12px;border-radius:3px;border:1px solid transparent;display:inline-block}
.lsw.progress{background:color-mix(in srgb,var(--muted) 35%,var(--surface));border-color:color-mix(in srgb,var(--muted) 75%,transparent)}
.lsw.plan{border:1.5px dashed var(--muted)}
.lsw.done{background:color-mix(in srgb,var(--muted) 16%,var(--surface))}
.lsw.blocked{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--danger) 30%,transparent) 0 3px,transparent 3px 6px);border:1.5px solid var(--danger)}
.lsw.paused{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 35%,transparent) 0 4px,transparent 4px 8px);border:1px dashed var(--muted)}
.lsw.support{background:repeating-linear-gradient(135deg,var(--muted) 0 3px,transparent 3px 6px);border-color:var(--muted)}
.lchips{display:inline-flex;align-items:center;gap:4px}
.lchip{padding:0 6px;border-radius:4px;font-size:10px;font-weight:800;line-height:16px;letter-spacing:.02em;background:var(--sc);color:var(--tc)}
.legend .sep{width:1px;height:14px;background:var(--border-strong)}
.btn.icon{padding:6px 8px}
.btn.icon svg{display:block}

/* ---------- drawer & modals ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,14,22,.45);z-index:20;display:flex;justify-content:flex-end}
.scrim.center{justify-content:center;align-items:center;padding:16px}
.drawer{width:min(620px,100%);height:100%;background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.modal{width:min(760px,100%);max-height:100%;background:var(--surface);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.dh{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.dh h2{margin:0;font-size:16px;font-weight:700;flex:1}
.db{padding:16px 18px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.df{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.df .spacer{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.field.full{grid-column:1/-1}
textarea{min-height:60px;resize:vertical}
.stg{border:1px solid var(--border);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;border-left:5px solid var(--sc)}
.stg .line{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.stg .line .field{flex:1;min-width:120px}
.stg .line .field.narrow{flex:0 0 auto}
.chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.chip{background:var(--accent-soft);border-radius:99px;padding:2px 8px 2px 10px;font-size:12px;display:inline-flex;align-items:center;gap:4px;font-weight:600}
.chip button{border:0;background:transparent;padding:0 2px;line-height:1;font-size:14px;color:var(--muted)}
.chip button:hover{color:var(--danger)}
.h3{margin:4px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.hint{font-size:12px;color:var(--muted)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 18px;overflow-x:auto}
.tabs button{white-space:nowrap}
.tabs button{border:0;background:transparent;padding:10px 12px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--text);border-color:var(--accent)}
.list{display:flex;flex-direction:column;gap:6px}
.list .it{display:flex;gap:8px;align-items:center}
.list .it input[type=text]{flex:1}
.list .it select{flex:1}
.list .it input[type=color]{width:34px;height:30px;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface);padding:2px}
.warnbox{background:var(--danger-soft);color:var(--danger);padding:8px 12px;border-radius:8px;font-size:13px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:9px 14px;border-radius:8px;font-size:13px;font-weight:600;z-index:50;box-shadow:var(--shadow);max-width:90vw}
.saving{position:fixed;inset:0;z-index:40;background:rgba(10,14,22,.25);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:15px}
@media (max-width:640px){
  :root{--left-w:170px}
  .top{padding:12px 16px 8px}
  .board-wrap{padding:8px 16px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ---------- server edition ---------- */
.me{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);font-weight:600;padding-left:6px;border-left:1px solid var(--border);margin-left:2px;white-space:nowrap}
.login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--bg)}
.login-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.login-card h1{font-size:20px}
.login-card input{padding:9px 10px;font-size:14px}
.login-card .btn{justify-content:center;padding:10px 12px;font-size:14px}
.warnbox.conflict{background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:var(--text);border:1px solid color-mix(in srgb,var(--warn) 55%,transparent)}
.hist{width:100%;border-collapse:collapse;font-size:12.5px}
.hist th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--border-strong);position:sticky;top:-16px;background:var(--surface)}
.hist td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:top}
.hist td.mono{white-space:nowrap;color:var(--muted)}
@media (max-width:640px){.hist td,.hist th{padding:6px 4px}}