/* LIQUID glass sidebar · stage 5 — Graphite: the keyboard list in Settings. */
:root {
  /* primitives */
  --g-950: #0b0b0d; --g-850: #17171a; --g-800: #1c1c20; --g-700: #26262b; --g-500: #6e6e78; --g-300: #b9b9c1; --g-100: #f4f4f6;
  --blue: #5b9dff; --blue-2: #8db9ff; --red: #ff5f57; --green: #3ccf8e; --amber: #f2b14c;
  /* semantic */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bg: var(--g-950); --ink: var(--g-100); --ink-2: #cfcfd6; --ink-3: #8d8d97; --line: rgba(255, 255, 255, .075);
  --accent: var(--blue); --accent-hot: var(--red); --focus: var(--blue-2); --kbd-bg: rgba(255, 255, 255, .06);
  --card-bg: rgba(26, 26, 30, .86); --card-line: rgba(255, 255, 255, .065);
  /* glass */
  --glass-bg: linear-gradient(172deg, rgba(78, 78, 86, .6) 0%, rgba(44, 44, 49, .55) 36%, rgba(30, 30, 34, .62) 100%);
  --glass-filter: blur(26px) saturate(140%);
  --glass-filter-strong: blur(40px) saturate(150%);
  --glass-rim: linear-gradient(162deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .1) 18%, rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .12) 100%);
  --glass-sheen: linear-gradient(118deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 24%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .03) 100%);
  --glass-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 2px 6px rgba(0, 0, 0, .35);
  --edge-line: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 12%, rgba(255, 255, 255, .1) 70%, rgba(255, 255, 255, 0));
  --hover-bg: rgba(255, 255, 255, .05);
  --pill-bg: linear-gradient(180deg, rgba(255, 255, 255, .135), rgba(255, 255, 255, .075));
  --pill-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 18px -10px rgba(0, 0, 0, .9);
  --pill-shadow-rm: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .14);
  --tip-bg: rgba(38, 38, 43, .9); --tip-ink: var(--g-100); --pop-shadow: 0 12px 28px -10px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08);
  --scrim: rgba(4, 4, 6, .5);
  --pal-bg: rgba(30, 30, 34, .8); --pal-shadow: 0 40px 90px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .05); --pal-sel: rgba(255, 255, 255, .075); --pal-ic-bg: rgba(255, 255, 255, .06);
  --overlay-shadow: 40px 0 90px -30px rgba(0, 0, 0, .9);
  --dot-ring: #222226;
  /* component */
  --side-w: 256px; --rail-w: 76px; --icon-cx: 30px; --row-h: 42px; --row-fs: 14.5px; --radius-sb: 18px; --lane: 62px;
}

body { background: radial-gradient(1200px 800px at 70% -10%, #17171b, transparent 60%), var(--bg); }
.bg-lights { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.bg-lights::before, .bg-lights::after { content: ''; position: absolute; border-radius: 50%; filter: blur(60px); }
.bg-lights::before { width: 360px; height: 520px; left: -120px; top: 6%; background: radial-gradient(closest-side, rgba(70, 110, 255, .26), rgba(70, 110, 255, 0)); }
.bg-lights::after { width: 300px; height: 380px; left: 40px; bottom: -80px; background: radial-gradient(closest-side, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); }

/* ---------- sidebar ---------- */
.ws-btn { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 44px; padding: 0 8px 0 7px; border-radius: 11px; text-align: left; }
.ws-btn:hover { background: var(--hover-bg); }
.ws-logo { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; color: #fff; font-weight: 700; font-size: 15px;
  background: linear-gradient(150deg, #4a4a52, #1d1d22 60%, #121215); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 10px -3px rgba(0, 0, 0, .7); }
.ws-logo svg { width: 20px; height: 20px; }
.ws-name { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--ink-3); transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--hover-bg); color: var(--ink); }
.icon-btn .ic { width: 18px; height: 18px; }
.icon-btn.sm { width: 28px; height: 28px; }
.icon-btn.sm .ic { width: 16px; height: 16px; }

.badge { min-width: 22px; height: 20px; padding: 0 7px; display: grid; place-items: center; border-radius: 10px; background: rgba(91, 157, 255, .2); color: #b5d0ff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.badge .n { line-height: 1; }
.sub-item .ic { color: var(--ink-3); }
.sub-li.is-active .ic { color: var(--ink); }
.item .ic { color: var(--ink-3); }
.is-active > .item .ic, .item:hover .ic, .group.has-active > .row > .item .ic { color: var(--ink); }

.sb-foot { margin: 0 var(--sb-pad); padding: 12px 0 12px; border-top: 1px solid var(--line); position: relative; }
.me { display: flex; align-items: center; gap: 11px; height: 52px; padding: 0 6px 0 calc(var(--icon-cx) - var(--sb-pad) - 18px); border-radius: 12px; text-decoration: none; }
.me:hover { background: var(--hover-bg); }
.me-av { width: 36px; height: 36px; }
.me-tx { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; transition: opacity .2s .1s; }
.me-tx b { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.status { font-size: 12.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(60, 207, 142, .7); }
.expand-btn { position: absolute; left: calc(var(--icon-cx) - var(--sb-pad) - 17px); top: -50px; }
.m-rail:not(.is-overlay) .sb-head .ws-btn { padding-left: calc(var(--icon-cx) - var(--sb-pad) - 15px); }
.sb-head .ws-btn { padding-left: calc(var(--icon-cx) - var(--sb-pad) - 15px); }

.avatar { display: inline-block; width: 26px; height: 26px; border-radius: 50%; flex: none; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .6); }
.avatar .av { width: 100%; height: 100%; display: block; }
.avatar.sm { width: 22px; height: 22px; }
.avatar.lg { width: 40px; height: 40px; }
.avatar.xl { width: 64px; height: 64px; }

/* ---------- main ---------- */
main { padding: 4px 6px 24px 4px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 4px; height: 60px; margin-bottom: 8px; background: linear-gradient(var(--bg) 70%, rgba(11, 11, 13, 0)); }
.tb-title { margin: 0 0 0 4px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.tb-jump { color: var(--ink-2); }
.tb-actions { position: relative; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.boxed { height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); }
.icon-btn.boxed { width: 38px; color: var(--ink-2); position: relative; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; font-weight: 500; color: var(--ink); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s; white-space: nowrap; }
.btn:hover { background: rgba(255, 255, 255, .11); }
.btn .ic { width: 17px; height: 17px; }
.btn.ghost { background: transparent; }
.vh { margin: -2px 4px 12px; }
.vh-sub { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.view[data-view="projects"] > .vh { display: none; }

.panel { background: var(--card-bg); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--card-line), 0 1px 0 rgba(255, 255, 255, .02); }
.panel-h { display: flex; align-items: center; gap: 12px; padding: 14px 12px 4px 18px; }
.panel-h h2, .panel-t { margin: 0; font-size: 15px; font-weight: 600; }
.panel-t { padding: 16px 18px 8px; }
.muted { color: var(--ink-3); margin: 0; }

/* board */
.view[data-view="projects"] { display: flex; flex-direction: column; gap: 14px; min-height: calc(100dvh - 2 * var(--app-pad) - 96px); }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col-card { background: var(--card-bg); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--card-line); }
.col-h { display: flex; align-items: center; gap: 8px; padding: 12px 10px 11px 16px; border-bottom: 1px solid var(--line); }
.col-h h2 { margin: 0; font-size: 15px; font-weight: 600; }
.col-n { font-size: 12px; color: var(--ink-3); padding: 1px 7px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.col-h .icon-btn { margin-left: auto; }
.task { padding: 13px 16px 14px; border-radius: 14px; outline: none; }
.task:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.task-t { margin: 0 0 10px; font-size: 14.5px; line-height: 1.42; color: #d9d9df; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-tags { margin: -2px 0 10px; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 6px; color: #c7c7ce; background: rgba(255, 255, 255, .06); white-space: nowrap; }
.tag-bug { color: #ffb4ae; background: rgba(255, 95, 87, .12); } .tag-feature { color: #b5d0ff; background: rgba(91, 157, 255, .13); }
.tag-design { color: #d6c4ff; background: rgba(155, 120, 255, .14); } .tag-copy, .tag-writing, .tag-content { color: #ffd9a0; background: rgba(242, 177, 76, .13); }
.who { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); }
.who .avatar { width: 28px; height: 28px; }
.who-with { margin-left: auto; display: flex; }
.who-with .avatar { width: 26px; height: 26px; }
.prog { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.prog-n { color: var(--ink-2); font-weight: 600; }
.bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #3f7dff, var(--blue-2)); transform-origin: left; transform: scaleX(var(--p)); }

/* burndown */
.burn { flex: 1; display: flex; flex-direction: column; min-height: 280px; }
.legend { display: flex; gap: 16px; margin-left: auto; font-size: 13px; color: var(--ink-2); }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg::before { content: ''; width: 16px; height: 3px; border-radius: 2px; }
.lg-a::before { background: var(--blue); } .lg-b::before { background: rgba(255, 255, 255, .5); }
.bd { flex: 1; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: 1fr 30px; padding: 10px 22px 6px 12px; min-height: 0; }
.bd-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-right: 10px; font-size: 12px; color: var(--ink-3); transform: translateY(-6px); margin-bottom: -12px; }
.bd-plot { position: relative; min-height: 160px; touch-action: pan-y; }
.bd-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bd-grid { stroke: rgba(255, 255, 255, .055); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bd-axis { stroke: rgba(255, 255, 255, .14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bd-l1 { fill: none; stroke: var(--blue); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bd-glow { fill: none; stroke: rgba(91, 157, 255, .22); stroke-width: 8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bd-l2 { fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.bd-l3 { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bd-today { position: absolute; top: 0; bottom: 0; background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); }
.bd-review { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(255, 255, 255, .28); }
.bd-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2.5px #1a1a1e, 0 0 10px rgba(91, 157, 255, .8); }
.bd-x { grid-column: 2; display: grid; grid-template-columns: repeat(10, 1fr); align-items: end; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.bd-cross { position: absolute; left: 0; top: 0; bottom: 0; width: 0; opacity: 0; pointer-events: none; transition: opacity .15s; }
.bd-cross.on { opacity: 1; }
.bd-cross i { position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px; background: rgba(255, 255, 255, .35); }
.bd-tip { position: absolute; top: 6px; left: 10px; white-space: nowrap; padding: 6px 9px; border-radius: 8px; font-size: 12px; background: var(--tip-bg); box-shadow: var(--pop-shadow); }
.bd-tip.flip { left: auto; right: 10px; }

/* issues */
.issues { padding-bottom: 8px; }
.ig-h { display: flex; align-items: center; gap: 9px; margin: 0; padding: 14px 18px 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ig-n { color: var(--ink-3); font-weight: 500; }
.ilist { list-style: none; margin: 0; padding: 0 6px; }
.issue { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.issue:hover { background: rgba(255, 255, 255, .035); }
.issue-l { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.issue-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.issue-r { display: flex; align-items: center; gap: 10px; flex: none; }
.iid { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.due { font-size: 12.5px; color: var(--ink-3); width: 48px; text-align: right; }
.proj-chip { font-size: 12px; color: var(--ink-3); padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.prio { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; width: 14px; flex: none; }
.prio i { width: 3px; border-radius: 1px; background: rgba(255, 255, 255, .18); }
.prio i:nth-child(1) { height: 5px; } .prio i:nth-child(2) { height: 8px; } .prio i:nth-child(3) { height: 12px; }
.prio.p1 i:nth-child(1), .prio.p2 i:nth-child(-n+2), .prio.p3 i { background: var(--ink-2); }
.st { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.6px var(--ink-3); }
.st-progress { box-shadow: inset 0 0 0 1.6px var(--amber); background: conic-gradient(var(--amber) 0 50%, transparent 0) content-box; padding: 3px; }
.st-review { box-shadow: inset 0 0 0 1.6px var(--green); background: conic-gradient(var(--green) 0 75%, transparent 0) content-box; padding: 3px; }
.st-todo { box-shadow: inset 0 0 0 1.6px var(--ink-2); }
.st-backlog { box-shadow: none; background: radial-gradient(circle, transparent 5px, var(--ink-3) 5.5px, var(--ink-3) 7px, transparent 7.5px); -webkit-mask: repeating-conic-gradient(#000 0 20deg, transparent 0 40deg); }

/* inbox */
.inbox { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 14px; align-items: start; }
.msgs { list-style: none; margin: 0; padding: 6px; }
.msg { width: 100%; display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border-radius: 11px; text-align: left; position: relative; }
.msg:hover { background: rgba(255, 255, 255, .035); }
.msg.is-sel { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--line); }
.msg .avatar { width: 32px; height: 32px; margin-top: 2px; }
.msg-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; font-size: 13.5px; }
.msg-top { display: flex; align-items: baseline; gap: 8px; }
.msg-top b { font-weight: 600; color: var(--ink); }
.msg-time { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.msg-what { color: var(--ink-3); }
.msg-t { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; flex: none; }
.msg.unread .unread-dot { background: var(--blue); box-shadow: 0 0 8px rgba(91, 157, 255, .8); }
.msg.unread .msg-t { color: var(--ink); }
.msg-view { padding: 22px 24px; min-height: 260px; }
.mv-h { display: flex; gap: 14px; align-items: flex-start; }
.mv-who, .mv-t { margin: 0; }
.mv-who { color: var(--ink-3); font-size: 13.5px; }
.mv-who b { color: var(--ink); font-weight: 600; }
.mv-t { font-size: 17px; font-weight: 600; margin-top: 3px; }
.mv-body { margin: 20px 0 22px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.mv-actions { display: flex; gap: 8px; }
.empty { padding: 48px 24px; text-align: center; color: var(--ink-3); }
.empty-t { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }

/* project */
.proj-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-bottom: 14px; }
.proj-sum { display: flex; gap: 20px; align-items: center; padding: 20px 22px; }
.proj-ring { position: relative; width: 84px; height: 84px; flex: none; display: grid; place-items: center; }
.proj-ring b { position: absolute; font-size: 18px; font-weight: 600; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-bg { stroke: rgba(255, 255, 255, .08); } .ring-fg { stroke: var(--blue); stroke-linecap: round; }
.proj-desc { margin: 0 0 12px; color: var(--ink-2); line-height: 1.55; }
.proj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-3); }
.proj-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.proj-meta .ic { width: 15px; height: 15px; }
.pill { padding: 3px 10px; border-radius: 20px; font-weight: 500; font-size: 12.5px; color: var(--ink-2); background: rgba(255, 255, 255, .07); }
.pill.ok { color: #9ff0c9; background: rgba(60, 207, 142, .13); } .pill.warn { color: #ffd59a; background: rgba(242, 177, 76, .14); }
.ms { padding-bottom: 12px; }
.ms-row { display: grid; grid-template-columns: 1fr 1.2fr 42px; align-items: center; gap: 14px; padding: 9px 18px; font-size: 14px; color: var(--ink-2); }
.ms-v { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13px; }

/* roadmap */
.road { --road-label: 180px; padding: 6px 0 14px; overflow: hidden; }
.road-head { display: grid; grid-template-columns: var(--road-label) repeat(4, 1fr); padding: 12px 18px 10px; font-size: 12.5px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.road-body { position: relative; padding: 6px 18px 0; }
.road-today { position: absolute; top: 0; bottom: -8px; width: 0; border-left: 1px solid rgba(255, 95, 87, .7); z-index: 1; }
.road-today span { position: absolute; top: -2px; left: 6px; font-size: 11px; color: #ff8f88; }
.road-row { display: grid; grid-template-columns: var(--road-label) 1fr; align-items: center; height: 52px; }
.road-n { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.road-track { position: relative; height: 30px; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .05) calc(25% - 1px) 25%); }
.road-bar { position: absolute; top: 0; height: 100%; border-radius: 9px; overflow: hidden; background: color-mix(in srgb, var(--c) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); display: flex; align-items: center; }
.road-bar i { position: absolute; inset: 0; background: color-mix(in srgb, var(--c) 45%, transparent); transform-origin: left; transform: scaleX(var(--p)); }
.road-bar b { position: relative; margin-left: 10px; font-size: 12px; font-weight: 600; color: #fff; }

/* team */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.member { position: relative; padding: 22px 18px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.member h2 { margin: 12px 0 2px; font-size: 15px; font-weight: 600; }
.member .muted { font-size: 13px; }
.member-load { width: 100%; margin-top: 16px; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--ink-3); }
.member-load .bar { flex: none; width: 100%; }
.presence { position: absolute; top: 14px; right: 14px; font-size: 11.5px; color: #9ff0c9; display: inline-flex; align-items: center; gap: 5px; }
.presence::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.presence.away { color: var(--ink-3); } .presence.away::before { background: var(--amber); }

/* settings */
.settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.set { padding-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; padding: 6px 18px; }
.field label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.field input { height: 40px; padding: 0 12px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; outline: none; }
.field input:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.set .muted { padding: 0 18px; font-size: 13px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 18px; color: var(--ink-2); font-size: 14px; }
.keys { margin: 0; padding: 0 18px; display: grid; gap: 10px; }
.keys div { display: flex; align-items: center; gap: 12px; }
.keys dt { display: flex; gap: 4px; min-width: 92px; }
.keys dd { margin: 0; color: var(--ink-2); font-size: 14px; }

/* touch */
@media (pointer: coarse) {
  .icon-btn, .icon-btn.boxed, .btn.boxed { min-width: 44px; height: 44px; }
  .icon-btn.sm { width: 44px; height: 44px; margin: -8px -6px -8px 0; }
  .col-h .icon-btn.sm { margin-left: auto; }
}

/* ---------- wide screens: more air ---------- */
@media (min-width: 1700px) { :root { --app-pad: 16px; --gap: 18px; } }

/* ---------- tablet & narrow desktop ---------- */
@media (max-width: 1280px) { .task-t { font-size: 14px; } .legend .lg-b { display: none; } }
@media (max-width: 960px) {
  .board { gap: 10px; }
  .col { gap: 10px; }
  .task { padding: 12px 13px; }
  .task-t { font-size: 13.5px; }
  .who-with { display: none; }
  .proj-top, .inbox { grid-template-columns: 1fr; }
  .issue-r .proj-chip, .issue-r .tag { display: none; }
}