:root{
  color-scheme:dark;
  --bg:#121417;--bar:#16181b;--panel:#1b1e22;--card:#24282d;--card-hover:#2b3036;--card-drag:#30363d;--field:#14161a;--field-2:#181b1f;--raise:#292d33;--raise-hover:#333940;
  --surface-3:#24282d;--modal:#1f2226;--bubble:#272b30;--count:#272b31;--tab-active:#2b3036;--hover:#2a2e34;--hover-2:#2c3137;--hover-subtle:#1d2024;
  --menu:#23272c;--menu-hover:#32373e;--menu-border:#3f454e;--modal-border:#444b54;--line:#2f343a;--line-2:#3d434b;--line-3:#525a64;--line-dash:#353a41;--card-border:#363b42;--card-border-hover:#4b525b;--scroll:#454b54;
  --text:#e6e9ec;--text-strong:#f5f6f8;--text-2:#d0d7df;--dim:#a2aab4;--faint:#79828d;--on-text:#15171a;--code-text:#d6dde5;
  --avatar:#5b6470;--on-avatar:#14161a;--bot-bg:#cfd6df;--bot-fg:#1a1e24;
  --accent:#93b7ec;--primary:#bcd2ee;--primary-hover:#d2e1f5;--on-primary:#13202f;
  --danger:#f0a5a5;--danger-bg:#3d2a2d;--danger-solid:#e58c8c;--danger-solid-hover:#efa3a3;--danger-hover-text:#f7bcbc;--on-danger:#2a1012;
  --ok:#86c09f;--on-ok:#10261a;--warn:#e9b872;--bad:#e08f8f;--urgent:#f0a35e;--overdue:#efa4a4;--err-border:#6b3a3d;--err-bg:#2e1f21;--err-text:#f3b9b9;
  --overlay:#ffffff08;--overlay-strong:#ffffff1a;--backdrop:#06080ab8;--sh-1:#000a;--sh-2:#0006;--sh-3:#000c;--sh-4:#0009;
  --lane-w:276px;--card-pad:9px;--card-gap:6px;--card-font:13px;--card-lh:18px;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:13px;line-height:18px;
  font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%
}
/* Accent-derived tokens follow the chosen accent in both themes. */
:root{--accent-border:color-mix(in srgb,var(--accent) 72%,var(--bg));--accent-ring:color-mix(in srgb,var(--accent) 18%,transparent);--accent-select:color-mix(in srgb,var(--accent) 33%,transparent);
  --accent-soft:color-mix(in srgb,var(--accent) 11%,transparent);--accent-faint:color-mix(in srgb,var(--accent) 6%,transparent);--accent-line:color-mix(in srgb,var(--accent) 38%,var(--bg));
  --accent-bg:color-mix(in srgb,var(--accent) 12%,var(--bg));--accent-text:color-mix(in srgb,var(--accent) 70%,var(--text))}
:root[data-accent=violet]{--accent:#b6a4f4;--primary:#cdbff8;--primary-hover:#ddd3fb;--on-primary:#1e1636}
:root[data-accent=green]{--accent:#8fcfa8;--primary:#a9dcbd;--primary-hover:#c3e8d1;--on-primary:#10261a}
:root[data-accent=orange]{--accent:#efb07a;--primary:#f3c49b;--primary-hover:#f7d6b9;--on-primary:#2d1a0b}
:root[data-accent=pink]{--accent:#ee9cc4;--primary:#f3b9d6;--primary-hover:#f7d0e3;--on-primary:#2e1020}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#f4f5f7;--bar:#ffffff;--panel:#ebedf0;--card:#ffffff;--card-hover:#fafbfc;--card-drag:#ffffff;--field:#ffffff;--field-2:#ffffff;--raise:#ffffff;--raise-hover:#f2f4f6;
  --surface-3:#ffffff;--modal:#ffffff;--bubble:#f1f3f5;--count:#dde1e6;--tab-active:#ffffff;--hover:#e6e9ed;--hover-2:#e2e6ea;--hover-subtle:#eceef1;
  --menu:#ffffff;--menu-hover:#eef1f4;--menu-border:#d5dae0;--modal-border:#d5dae0;--line:#dde1e6;--line-2:#cdd2d9;--line-3:#aab2bc;--line-dash:#c6ccd4;--card-border:#dde1e6;--card-border-hover:#c3c9d1;--scroll:#c3c9d1;
  --text:#1c2026;--text-strong:#0f1216;--text-2:#2b3139;--dim:#535c67;--faint:#78818c;--on-text:#ffffff;--code-text:#2b3139;
  --avatar:#8a939e;--on-avatar:#ffffff;--bot-bg:#3a414a;--bot-fg:#ffffff;
  --accent:#2c66c8;--primary:#2c66c8;--primary-hover:#2459b2;--on-primary:#ffffff;
  --danger:#c23b3b;--danger-bg:#fbe9e9;--danger-solid:#d14343;--danger-solid-hover:#bb3535;--danger-hover-text:#a52c2c;--on-danger:#ffffff;
  --ok:#2f9a5f;--on-ok:#ffffff;--warn:#b87412;--bad:#c94c4c;--urgent:#d9701c;--overdue:#c23b3b;--err-border:#efc4c4;--err-bg:#fcf0f0;--err-text:#a52c2c;
  --overlay:#0000000a;--overlay-strong:#00000014;--backdrop:#0f141c66;--sh-1:#0f141c26;--sh-2:#0f141c14;--sh-3:#0f141c33;--sh-4:#0f141c26;
}
:root[data-theme=light][data-accent=violet]{--accent:#6a4fd3;--primary:#6a4fd3;--primary-hover:#5a40bd;--on-primary:#fff}
:root[data-theme=light][data-accent=green]{--accent:#24804c;--primary:#24804c;--primary-hover:#1d6c3f;--on-primary:#fff}
:root[data-theme=light][data-accent=orange]{--accent:#c25e12;--primary:#c25e12;--primary-hover:#a84f0d;--on-primary:#fff}
:root[data-theme=light][data-accent=pink]{--accent:#c1407f;--primary:#c1407f;--primary-hover:#a7346c;--on-primary:#fff}
@media (prefers-color-scheme:light){
:root[data-theme=system]{
  color-scheme:light;
  --bg:#f4f5f7;--bar:#ffffff;--panel:#ebedf0;--card:#ffffff;--card-hover:#fafbfc;--card-drag:#ffffff;--field:#ffffff;--field-2:#ffffff;--raise:#ffffff;--raise-hover:#f2f4f6;
  --surface-3:#ffffff;--modal:#ffffff;--bubble:#f1f3f5;--count:#dde1e6;--tab-active:#ffffff;--hover:#e6e9ed;--hover-2:#e2e6ea;--hover-subtle:#eceef1;
  --menu:#ffffff;--menu-hover:#eef1f4;--menu-border:#d5dae0;--modal-border:#d5dae0;--line:#dde1e6;--line-2:#cdd2d9;--line-3:#aab2bc;--line-dash:#c6ccd4;--card-border:#dde1e6;--card-border-hover:#c3c9d1;--scroll:#c3c9d1;
  --text:#1c2026;--text-strong:#0f1216;--text-2:#2b3139;--dim:#535c67;--faint:#78818c;--on-text:#ffffff;--code-text:#2b3139;
  --avatar:#8a939e;--on-avatar:#ffffff;--bot-bg:#3a414a;--bot-fg:#ffffff;
  --accent:#2c66c8;--primary:#2c66c8;--primary-hover:#2459b2;--on-primary:#ffffff;
  --danger:#c23b3b;--danger-bg:#fbe9e9;--danger-solid:#d14343;--danger-solid-hover:#bb3535;--danger-hover-text:#a52c2c;--on-danger:#ffffff;
  --ok:#2f9a5f;--on-ok:#ffffff;--warn:#b87412;--bad:#c94c4c;--urgent:#d9701c;--overdue:#c23b3b;--err-border:#efc4c4;--err-bg:#fcf0f0;--err-text:#a52c2c;
  --overlay:#0000000a;--overlay-strong:#00000014;--backdrop:#0f141c66;--sh-1:#0f141c26;--sh-2:#0f141c14;--sh-3:#0f141c33;--sh-4:#0f141c26;
}
:root[data-theme=system][data-accent=violet]{--accent:#6a4fd3;--primary:#6a4fd3;--primary-hover:#5a40bd;--on-primary:#fff}
:root[data-theme=system][data-accent=green]{--accent:#24804c;--primary:#24804c;--primary-hover:#1d6c3f;--on-primary:#fff}
:root[data-theme=system][data-accent=orange]{--accent:#c25e12;--primary:#c25e12;--primary-hover:#a84f0d;--on-primary:#fff}
:root[data-theme=system][data-accent=pink]{--accent:#c1407f;--primary:#c1407f;--primary-hover:#a7346c;--on-primary:#fff}
}
:root[data-density=compact]{--lane-w:248px;--card-pad:6px;--card-gap:4px;--card-font:12.5px;--card-lh:17px}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
button,input,select,textarea{font:inherit;line-height:inherit;color:inherit;margin:0;letter-spacing:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{opacity:.4;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-select)}
input,textarea,select{background:var(--field);border:1px solid var(--line-2);border-radius:6px;padding:0 10px;min-width:0;transition:border-color .12s,box-shadow .12s,background-color .12s}
input,select{height:32px}
textarea{padding:7px 10px;resize:vertical}
select{padding-right:28px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 15px) 14px,calc(100% - 11px) 14px;background-size:4px 4px;background-repeat:no-repeat}
input:hover,textarea:hover,select:hover{border-color:var(--line-3)}
input:focus,textarea:focus,select:focus{border-color:var(--accent-border)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
input[type=date]{color-scheme:dark}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
kbd{font:inherit;font-size:11px;line-height:16px;color:var(--faint)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:12px;height:12px;stroke-width:2.25}
.i-fill{fill:currentColor;stroke:none}

/* ---------- Buttons ---------- */
.btn{height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;white-space:nowrap;padding:0 12px;border:1px solid var(--line-2);background:var(--raise);border-radius:6px;font-size:13px;line-height:16px;font-weight:600;transition:background-color .12s,border-color .12s,color .12s,transform .08s}
.btn:hover{background:var(--raise-hover)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn>.i:first-child:not(:only-child){margin-left:-2px}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--dim)}
.btn.ghost:hover{background:var(--hover);color:var(--text)}
.btn.danger{color:var(--danger)}
.btn.danger:hover{background:var(--danger-bg);color:var(--danger-hover-text)}
.btn.danger-solid{background:var(--danger-solid);border-color:var(--danger-solid);color:var(--on-danger)}
.btn.danger-solid:hover{background:var(--danger-solid-hover);border-color:var(--danger-solid-hover)}
.btn.sm{height:28px;padding:0 10px;font-size:12px}
.icon-btn{width:32px;height:32px;display:inline-grid;place-items:center;flex:none;padding:0;border:0;border-radius:6px;background:transparent;color:var(--dim);transition:background-color .12s,color .12s,transform .08s}
.icon-btn:hover,.icon-btn[aria-expanded="true"]{background:var(--hover);color:var(--text)}
.icon-btn:active{transform:scale(.94)}
.icon-btn.sm{width:28px;height:28px}
.icon-btn.xs{width:24px;height:24px;border-radius:5px}
.icon-btn.xs .i{width:14px;height:14px}

/* ---------- Top bar ---------- */
.top{flex:none;height:48px;display:flex;align-items:center;gap:16px;padding:0 calc(12px + var(--safe-r)) 0 calc(16px + var(--safe-l));border-bottom:1px solid var(--line);background:var(--bar)}
.brand{display:flex;align-items:center;gap:8px;flex:none;font-size:15px;line-height:20px;font-weight:700;letter-spacing:-.02em;user-select:none}
.brand-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--text);color:var(--on-text)}
.brand-mark .i{stroke-width:2.5}
.board-tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0;height:100%;overflow-x:auto;scrollbar-width:none}
.board-tabs::-webkit-scrollbar{display:none}
.tab{display:block;flex:none;height:28px;max-width:200px;padding:0 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--dim);font-size:13px;line-height:26px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .12s,color .12s;-webkit-touch-callout:none;user-select:none}
.tab:hover{background:var(--surface-3);color:var(--text)}
.tab.active{background:var(--tab-active);border-color:var(--line-2);color:var(--text-strong)}
.tab.menu-target{border-color:var(--accent-border)}
.top-actions{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto}
.palette-btn{height:28px;display:inline-flex;align-items:center;gap:8px;padding:0 6px 0 8px;margin-right:6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--faint);font-size:12px;line-height:16px}
.palette-btn:hover{border-color:var(--line-2);color:var(--dim)}
.palette-btn kbd{height:18px;padding:0 4px;border:1px solid var(--line-2);border-radius:4px;line-height:16px}
.sync{height:28px;display:inline-flex;align-items:center;gap:8px;padding:0 8px;margin-right:4px;border:0;border-radius:6px;background:transparent;color:var(--dim);font-size:12px;line-height:16px;white-space:nowrap}
.sync:hover{background:var(--hover-subtle);color:var(--text)}
.sync-dot{position:relative;width:6px;height:6px;flex:none;border-radius:50%;background:var(--ok)}
.sync-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:currentColor;color:var(--ok);opacity:.18}
.sync.pending .sync-dot{background:var(--warn)}.sync.pending .sync-dot::after{color:var(--warn)}
.sync.failed .sync-dot{background:var(--bad)}.sync.failed .sync-dot::after{color:var(--bad)}
.sync.busy .sync-dot::after{animation:pulse 1s var(--ease) infinite}
.profile{max-width:168px;padding:0 10px 0 6px;gap:8px}
.profile>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---------- Avatars, chips, priority ---------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;padding:0;border-radius:50%;background:var(--c,var(--avatar));color:var(--on-avatar);font-size:10px;line-height:1;font-weight:700;letter-spacing:0;text-transform:uppercase;text-align:center;user-select:none;overflow:hidden}
/* Center the capital letters themselves, not the line box (which reserves room for descenders). */
@supports (text-box:trim-both cap alphabetic){.avatar{text-box:trim-both cap alphabetic}}
.avatar.lg{width:24px;height:24px;font-size:11px}
.avatar.bot{background:var(--bot-bg);color:var(--bot-fg)}
.avatar .i{width:62%;height:62%;stroke-width:2.25}
.avatar.empty{background:transparent;border:1px dashed var(--line-3);color:var(--faint)}
.chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;height:18px;padding:0 6px;border-radius:4px;background:color-mix(in srgb,var(--c,var(--faint)) 20%,transparent);color:var(--c,var(--dim));font-size:11px;line-height:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.lg{height:24px;padding:0 2px 0 8px;font-size:12px;border-radius:5px}
.chip .chip-x{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;opacity:.7}
.chip .chip-x:hover{opacity:1;background:var(--overlay-strong)}
.chip .chip-x .i{width:12px;height:12px}
.pri-1,.pri-2{color:var(--dim)}
.pri-3{color:var(--text)}
.pri-4{color:var(--urgent)}

/* ---------- Board header ---------- */
.boardhead{flex:none;min-height:48px;display:flex;align-items:center;gap:8px;padding:0 calc(12px + var(--safe-r)) 0 calc(16px + var(--safe-l));border-bottom:1px solid var(--surface-3)}
.boardhead-text{display:flex;align-items:baseline;gap:10px;min-width:0;margin-right:4px}
.boardname{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:20px;font-weight:700;letter-spacing:-.015em}
.boardhint{flex:none;font-size:12px;line-height:16px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.filters{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter-chip{display:inline-flex;align-items:center;gap:4px;flex:none;height:24px;padding:0 2px 0 8px;border:1px solid var(--accent-line);border-radius:12px;background:var(--accent-bg);color:var(--accent-text);font-size:12px;line-height:16px;white-space:nowrap}
.filter-chip button{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:10px;background:transparent;color:inherit}
.filter-chip button:hover{background:var(--overlay-strong)}
.filter-chip .i{width:12px;height:12px}
.boardcontrols{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}
.search{position:relative;display:block;width:200px;transition:width .2s var(--ease)}
.search:focus-within{width:260px}
.search>.i{position:absolute;left:9px;top:8px;color:var(--faint);pointer-events:none}
.search input{width:100%;height:32px;padding:0 30px 0 31px;background:var(--field-2);border-color:var(--line)}
.search input::-webkit-search-cancel-button{display:none}
.search kbd{position:absolute;right:6px;top:7px;width:18px;height:18px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:4px;line-height:16px;pointer-events:none}
.search input:focus~kbd,.search input:not(:placeholder-shown)~kbd{display:none}
.filter-btn.active{color:var(--accent)}

/* ---------- Columns + lanes ---------- */
.columns{flex:1;min-height:0;display:flex;align-items:flex-start;gap:10px;padding:12px calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-color:var(--scroll) transparent}
.lane{flex:0 0 var(--lane-w);width:var(--lane-w);max-height:100%;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;transition:border-color .12s}
.lane.is-target{border-color:var(--accent-border)}
.lane-header{flex:none;height:40px;display:flex;align-items:center;gap:4px;padding:0 4px;-webkit-touch-callout:none}
.drag-handle{display:grid;place-items:center;flex:none;width:24px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--faint);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.drag-handle:hover{color:var(--text-2);background:var(--hover-2)}
.drag-handle:active{cursor:grabbing}
.lane-title{flex:1;min-width:0;font-size:13px;line-height:18px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none}
.count{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--count);color:var(--dim);font-size:11px;line-height:20px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.cards{display:flex;flex-direction:column;gap:var(--card-gap);padding:0 6px 6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.cards:empty{padding-bottom:0}
.lane.is-target .cards:empty{min-height:44px;padding-bottom:6px}
.empty-note{margin:0 6px 6px;padding:10px 0;border:1px dashed var(--line-dash);border-radius:8px;color:var(--faint);font-size:12px;line-height:16px;text-align:center}

/* ---------- Cards ---------- */
.card{position:relative;flex:none;display:flex;align-items:stretch;min-height:38px;border:1px solid var(--card-border);border-radius:8px;background:var(--card);color:var(--text);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer;transition:background-color .12s,border-color .12s}
.card:hover{background:var(--card-hover);border-color:var(--card-border-hover)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.card.menu-target{border-color:var(--accent-border);background:var(--card-hover)}
.card.is-done .card-title{color:var(--dim)}
.card.is-pending{opacity:.6;cursor:progress}
.card.is-pending .drag-handle{visibility:hidden}
.card-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--card-gap);padding:var(--card-pad) 0 var(--card-pad) 10px}
.card-labels{display:flex;flex-wrap:wrap;gap:4px}
.card-title{font-size:var(--card-font);line-height:var(--card-lh);overflow-wrap:anywhere;white-space:pre-wrap}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:var(--faint);font-size:11px;line-height:16px;font-variant-numeric:tabular-nums}
.card-foot>span:not(.avatar){display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.card-foot .due-today{color:var(--warn)}
.card-foot .overdue{color:var(--overdue)}
.card-foot .complete{color:var(--ok)}
.card-foot .avatar{margin-left:auto;width:18px;height:18px;font-size:9px}
.card .drag-handle{width:24px;height:auto;align-self:stretch;margin-left:2px;border-radius:0 7px 7px 0;opacity:0;transition:opacity .12s}
.card:hover .drag-handle,.card:focus-visible .drag-handle{opacity:1}
.card .drag-handle:hover{background:transparent}
.card .drag-handle .i{width:14px;height:14px}

.add-row{flex:none;display:flex;align-items:center;gap:6px;padding:0 6px 6px}
.add-field{position:relative;flex:1;min-width:0}
.add-field>.i{position:absolute;left:9px;top:8px;color:var(--faint);pointer-events:none;transition:color .12s}
.add-input{display:block;width:100%;height:32px;padding:0 10px 0 31px;background:transparent;border-color:transparent}
.add-input:hover{background:var(--hover-subtle);border-color:transparent}
.add-input:focus{background:var(--field);border-color:var(--accent-border)}
.add-input:focus~.i,.add-input:not(:placeholder-shown)~.i{color:var(--dim)}
.add-submit{height:32px}
.add-row:has(.add-input:placeholder-shown) .add-submit{display:none}
.new-lane{flex:0 0 var(--lane-w);height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px dashed var(--line-2);border-radius:10px;background:transparent;color:var(--dim);font-size:13px;line-height:18px;font-weight:500;text-align:left;transition:background-color .12s,border-color .12s,color .12s}
.new-lane:hover{background:var(--hover-subtle);border-color:var(--line-3);color:var(--text)}

/* ---------- Drag and drop ---------- */
.drop-slot{flex:none;border:1px dashed var(--accent-border);border-radius:8px;background:var(--accent-soft);pointer-events:none}
.columns>.drop-slot{width:var(--lane-w);flex:0 0 var(--lane-w);border-radius:10px;background:var(--accent-faint)}
.drag-source{display:none!important}
.drag-preview{position:fixed;z-index:1000;pointer-events:none;margin:0!important;box-shadow:0 20px 40px var(--sh-1)!important;background:var(--card-drag)!important;border-color:var(--accent-border)!important;opacity:.97;transform:rotate(1.5deg) scale(1.02);transition:none!important;overflow:hidden}
.drag-preview .drag-handle{visibility:hidden}
.dragging,.dragging *{cursor:grabbing!important;user-select:none!important}
.dragging .columns{scroll-snap-type:none!important}

/* ---------- Menus ---------- */
.menu{position:fixed;left:0;top:0;z-index:1100;min-width:212px;max-width:300px;max-height:calc(100dvh - 16px);overflow-y:auto;margin:0;padding:4px;background:var(--menu);border:1px solid var(--menu-border);border-radius:10px;box-shadow:0 16px 40px var(--sh-1),0 2px 6px var(--sh-2);outline:none;color:var(--text);overscroll-behavior:contain;animation:menu-in .14s var(--ease-out);user-select:none;-webkit-user-select:none}
.menu[hidden]{display:none}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;height:30px;padding:0 8px;border:0;border-radius:6px;background:transparent;font-size:13px;line-height:16px;text-align:left;color:var(--text)}
.menu-item>.i:first-child{color:var(--dim)}
.menu-item>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-item>.avatar{width:16px;height:16px;font-size:8px}
.menu-item>.chev{width:14px;height:14px;color:var(--faint);margin-right:-2px}
.menu-item:focus{outline:none}
.menu-item:not(:disabled):hover,.menu-item:not(:disabled):focus,.menu-item.open{background:var(--menu-hover)}
.menu-item:not(:disabled):hover>.i:first-child,.menu-item:not(:disabled):focus>.i:first-child{color:var(--text)}
.menu-item.danger,.menu-item.danger>.i:first-child{color:var(--danger)!important}
.menu-item.danger:not(:disabled):hover,.menu-item.danger:not(:disabled):focus{background:var(--danger-bg)}
.menu-item:disabled{opacity:.4}
.menu-item .check{color:var(--accent)!important}
.menu-item>.pri-4{color:var(--urgent)!important}
.menu-sep{height:1px;margin:4px -4px;background:var(--line)}
.swatch{display:block;flex:none;width:10px;height:10px;margin:3px;border-radius:3px;background:var(--c)}

/* ---------- Dialogs ---------- */
.modal{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--modal-border);border-radius:12px;background:var(--modal);color:var(--text);box-shadow:0 24px 80px var(--sh-3)}
.modal[open]{animation:dlg-in .2s var(--ease-out)}
.modal::backdrop{background:var(--backdrop)}
.modal[open]::backdrop{animation:fade-in .2s ease-out}
.modal-head{position:sticky;top:0;z-index:2;height:52px;display:flex;align-items:center;gap:8px;padding:0 10px 0 20px;background:var(--modal)}
.modal h2{flex:1;min-width:0;margin:0;font-size:15px;line-height:20px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-body{padding:0 20px 16px}
.field{display:block;margin:0 0 14px}
.field:last-child{margin-bottom:0}
.field-label{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:var(--dim);font-size:12px;line-height:16px;font-weight:600}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{display:block;width:100%}
.dialog-footer{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:var(--modal)}
.dialog-footer .spacer{flex:1}
.dialog-footer kbd{margin-right:4px}
.dialog-note{margin:0 0 16px;color:var(--dim);font-size:13px;line-height:20px}
.short-modal{width:min(400px,calc(100vw - 24px))}

/* Card editor */
.card-modal{width:min(820px,calc(100vw - 24px))}
.crumb{flex:1;min-width:0;display:flex;align-items:center;gap:6px;color:var(--faint);font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden}
.crumb b{font-weight:600;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.crumb .i{width:12px;height:12px}
.card-grid{display:grid;grid-template-columns:minmax(0,1fr) 232px;grid-template-rows:auto 1fr;grid-template-areas:"title side" "main side";align-items:start;gap:0 24px;padding:0 20px 20px}
.edit-title-wrap{grid-area:title;margin-bottom:14px}
.edit-title{display:block;height:auto;min-height:36px;padding:4px 8px;margin:0 -9px;width:calc(100% + 18px);border-color:transparent;background:transparent;font-size:18px;line-height:26px;font-weight:650;letter-spacing:-.015em;resize:none;overflow:hidden}
.edit-title:hover{background:var(--overlay);border-color:transparent}
.edit-title:focus{background:var(--field);border-color:var(--accent-border)}
.card-main{grid-area:main;min-width:0}
.card-side{grid-area:side;display:flex;flex-direction:column;gap:12px;padding-left:20px;border-left:1px solid var(--line)}
.card-side .field{margin:0}
.side-meta{margin-top:4px;padding-top:12px;border-top:1px solid var(--line);color:var(--faint);font-size:12px;line-height:18px}
.side-meta div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inline-row{display:flex;gap:6px}
.inline-row>input{flex:1}
.link-btn{flex:none;height:32px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--accent);font-size:12px;font-weight:600}
.link-btn:hover{background:var(--accent-soft)}
.label-box{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:32px;padding:3px;border:1px solid var(--line-2);border-radius:6px;background:var(--field);cursor:text;transition:border-color .12s,box-shadow .12s}
.label-box:focus-within{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-ring)}
.label-box input{flex:1;min-width:64px;height:24px;padding:0 5px;border:0;background:transparent;box-shadow:none!important}
.suggest{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.suggest:empty{display:none}
.suggest button{height:22px;padding:0 6px;border:1px dashed var(--line-2);border-radius:4px;background:transparent;color:var(--dim);font-size:11px;line-height:16px;font-weight:600}
.suggest button:hover{border-style:solid;border-color:var(--c);color:var(--c)}
.description{min-height:112px;line-height:20px}
.section{margin-top:20px}
.section-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--dim);font-size:12px;line-height:16px;font-weight:600}
.section-head .aside{margin-left:auto;color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums}
.progress{height:4px;margin:0 0 8px;border-radius:2px;background:var(--hover-2);overflow:hidden}
.progress>div{height:100%;width:0;border-radius:2px;background:var(--ok);transition:width .25s var(--ease)}
.checklist{list-style:none;margin:0;padding:0}
.check-row{display:flex;align-items:center;gap:4px;min-height:32px;margin:0 -6px;padding:0 0 0 6px;border-radius:6px}
.check-row:hover,.check-row:focus-within{background:var(--overlay)}
.check-row .text{flex:1;height:30px;padding:0 6px;border-color:transparent;background:transparent}
.check-row .text:focus{background:var(--field);border-color:var(--accent-border)}
.check-row.done .text{color:var(--faint);text-decoration:line-through}
.check-row .icon-btn{opacity:0}
.check-row:hover .icon-btn,.check-row:focus-within .icon-btn{opacity:1}
.checkbox{appearance:none;display:grid;place-items:center;flex:none;width:16px;height:16px;margin:0 4px 0 0;padding:0;border:1.5px solid var(--line-3);border-radius:4px;background:transparent;cursor:pointer;transition:background-color .12s,border-color .12s}
.checkbox:hover{border-color:var(--dim)}
.checkbox:checked{background:var(--ok);border-color:var(--ok)}
.checkbox:checked::after{content:'';width:8px;height:4px;margin-top:-2px;border:2px solid var(--on-ok);border-top:0;border-right:0;transform:rotate(-45deg)}
.check-add{margin-top:4px}
.check-add input{width:100%;background:transparent;border-style:dashed}
.check-add input:focus{border-style:solid;background:var(--field)}
.comments{display:flex;flex-direction:column;gap:12px}
.comments:not(:empty){margin-bottom:12px}
.comment{display:flex;gap:10px;min-width:0}
.comment-main{flex:1;min-width:0}
.comment-meta{display:flex;align-items:center;gap:8px;height:24px;font-size:12px;line-height:16px}
.comment-meta b{font-weight:650}
.comment-meta time{color:var(--faint)}
.comment-meta .icon-btn{margin-left:auto;opacity:0}
.comment:hover .comment-meta .icon-btn,.comment:focus-within .comment-meta .icon-btn{opacity:1}
.comment-body{margin:0;padding:8px 10px;border-radius:8px;background:var(--bubble);font-size:13px;line-height:19px;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
.composer{display:flex;gap:10px;align-items:flex-start}
.composer-box{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.composer textarea{min-height:36px;height:36px;resize:none;overflow:hidden;line-height:20px}
.composer-actions{display:none;align-items:center;gap:8px;justify-content:flex-end}
.composer-box:focus-within .composer-actions,.composer-box.has-text .composer-actions{display:flex}

/* Archive, help, palette */
.archive-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.archive-item{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-3)}
.archive-item div{flex:1;min-width:0}
.archive-item b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.archive-item small{display:block;color:var(--faint);font-size:11px;line-height:16px}
.empty-state{padding:24px 0;color:var(--faint);text-align:center}
.keys{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0;font-size:13px;line-height:22px}
.keys dt{color:var(--dim)}
.keys dd{margin:0;display:flex;gap:4px;justify-content:flex-end}
.keys kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--surface-3);color:var(--text);font-size:11px;line-height:16px}
.palette{width:min(600px,calc(100vw - 24px));margin:min(12vh,96px) auto auto;max-height:min(520px,calc(100dvh - 24px));display:none;flex-direction:column;overflow:hidden}
.palette[open]{display:flex}
.palette-search{position:relative;flex:none;border-bottom:1px solid var(--line)}
.palette-search>.i{position:absolute;left:16px;top:16px;color:var(--faint);pointer-events:none}
.palette-search input{width:100%;height:48px;padding:0 16px 0 42px;border:0;border-radius:0;background:transparent;font-size:15px;box-shadow:none!important}
.palette-list{flex:1;min-height:0;overflow-y:auto;margin:0;padding:6px;list-style:none;overscroll-behavior:contain}
.palette-group{padding:8px 10px 4px;color:var(--faint);font-size:11px;line-height:16px;font-weight:600}
.palette-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:6px;cursor:pointer;color:var(--text)}
.palette-item>.i{color:var(--dim)}
.palette-item>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-item>small{flex:none;max-width:40%;color:var(--faint);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-item[aria-selected="true"]{background:var(--menu-hover)}
.palette-item[aria-selected="true"]>.i{color:var(--text)}
.palette-foot{flex:none;display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--line);color:var(--faint);font-size:11px;line-height:16px}

/* Activity, agents */
.activity-list{list-style:none;margin:0;padding:0}
.activity-item{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;margin:0 -6px;border-radius:6px;font-size:13px;line-height:20px}
.activity-item .avatar{margin-top:2px}
.activity-item div{flex:1;min-width:0;overflow-wrap:anywhere}
.activity-item b{font-weight:650}
.activity-item time{display:block;color:var(--faint);font-size:11px;line-height:16px}
.activity-item.link{cursor:pointer}
.activity-item.link:hover{background:var(--overlay)}
.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;color:var(--faint);font-size:12px;line-height:18px}
.history b{font-weight:600;color:var(--dim)}
.agent-form{display:flex;align-items:flex-end;gap:8px;margin-bottom:16px}
.agent-form .field{flex:1;margin:0}
.setup{display:flex;flex-direction:column;gap:14px;margin:0 0 20px;padding:16px;border:1px solid var(--accent-line);border-radius:10px;background:var(--accent-bg)}
.step-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;line-height:16px;font-weight:600;color:var(--dim)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--accent-line);color:var(--accent-text);font-size:11px;line-height:1}
@supports (text-box:trim-both cap alphabetic){.step-num{text-box:trim-both cap alphabetic}}
.code-wrap{position:relative}
.code{margin:0;padding:8px 40px 8px 10px;border:1px solid var(--line-2);border-radius:6px;background:var(--field);color:var(--code-text);font:12px/18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.code.nowrap{white-space:pre;overflow-x:auto;overflow-wrap:normal}
.code-wrap .icon-btn{position:absolute;top:3px;right:3px;background:var(--field)}
#agents-dialog{width:min(640px,calc(100vw - 24px))}
.setup-warning{display:flex;gap:8px;margin:0;color:var(--warn);font-size:12px;line-height:18px}
.setup-warning .i{margin-top:1px}
.agent-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.agent-item{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-3)}
.agent-item div{flex:1;min-width:0}
.agent-item b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-item small{display:block;color:var(--faint);font-size:11px;line-height:16px}
.endpoint{margin:0;color:var(--faint);font-size:12px;line-height:18px;overflow-wrap:anywhere}
.endpoint code{font:12px/18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--dim);user-select:text}


/* ---------- Settings ---------- */
.settings-modal{width:min(880px,calc(100vw - 24px));height:min(680px,calc(100dvh - 24px));display:none;flex-direction:column;overflow:hidden}
.settings-modal[open]{display:flex}
.settings{flex:1;min-height:0;display:grid;grid-template-columns:188px minmax(0,1fr);border-top:1px solid var(--line)}
.settings-nav{display:flex;flex-direction:column;gap:2px;padding:12px 8px;border-right:1px solid var(--line);overflow-y:auto}
.settings-nav button{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--dim);font-size:13px;line-height:16px;font-weight:500;text-align:left;white-space:nowrap}
.settings-nav button:hover{background:var(--hover);color:var(--text)}
.settings-nav button[aria-selected=true]{background:var(--accent-soft);color:var(--text)}
.settings-nav button[aria-selected=true] .i{color:var(--accent)}
.settings-panes{min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 28px}
.pane[hidden]{display:none}
.pane-title{margin:0 0 4px;font-size:16px;line-height:22px;font-weight:700;letter-spacing:-.01em}
.pane-note{margin:0 0 20px;color:var(--dim);font-size:13px;line-height:20px;max-width:60ch}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:10px 0;border-top:1px solid var(--line)}
.setting-row:last-of-type{border-bottom:1px solid var(--line)}
.setting-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.setting-text b{font-weight:600;font-size:13px;line-height:18px}
.setting-text small{color:var(--faint);font-size:12px;line-height:16px}
.switch-row{cursor:pointer;margin-bottom:12px;border-bottom:1px solid var(--line)}
.segmented{display:inline-flex;flex:none;padding:2px;border:1px solid var(--line-2);border-radius:8px;background:var(--field)}
.segmented button{height:26px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--dim);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap}
.segmented button:hover{color:var(--text)}
.segmented button[aria-checked=true]{background:var(--raise-hover);color:var(--text);box-shadow:0 1px 2px var(--sh-2)}
.swatches{display:flex;gap:8px;flex:none}
.swatches button{width:24px;height:24px;padding:0;border:2px solid transparent;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px var(--modal)}
.swatches button[aria-checked=true]{border-color:var(--c)}
.swatches [data-value=blue]{--c:#5b8fe0}.swatches [data-value=violet]{--c:#8a6fe6}.swatches [data-value=green]{--c:#3fa36b}.swatches [data-value=orange]{--c:#e08a3c}.swatches [data-value=pink]{--c:#d9649d}
.switch{appearance:none;position:relative;flex:none;width:36px;height:20px;margin:0;padding:0;border:0;border-radius:10px;background:var(--line-3);cursor:pointer;transition:background-color .15s}
.switch::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0004;transition:transform .15s var(--ease)}
.switch:checked{background:var(--accent)}
.switch:checked::after{transform:translateX(16px)}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.keys{margin-bottom:16px}
.keys .key-btn{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--surface-3);color:var(--text);font:inherit;font-size:11px;line-height:16px;cursor:pointer}
.keys .key-btn:hover{border-color:var(--accent-border)}
.keys .key-btn.listening{border-color:var(--accent);color:var(--accent);animation:pulse-border 1s infinite}
.keys.disabled dd{opacity:.45}
@keyframes pulse-border{50%{border-color:var(--line-2)}}
.inline-form{display:flex;align-items:flex-end;gap:8px;max-width:420px}
.inline-form .field{flex:1;margin:0}
.webhook-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.webhook-item{display:flex;align-items:center;gap:12px;padding:10px 8px 10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-3)}
.webhook-item .wh-text{flex:1;min-width:0}
.webhook-item b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.webhook-item small{display:block;color:var(--faint);font-size:12px;line-height:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.webhook-item .status{display:inline-flex;align-items:center;gap:6px}
.webhook-item .status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--faint)}
.webhook-item .status.ok::before{background:var(--ok)}.webhook-item .status.bad::before{background:var(--bad)}.webhook-item .status.wait::before{background:var(--warn)}
.webhook-item.off{opacity:.6}
.webhook-form{margin-top:12px;padding:20px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-3)}
.webhook-form .field{margin:0 0 16px}
.settings-panes input:not([type=checkbox]):not([type=radio]),.settings-panes select{height:36px}
.form-title{margin:0 0 16px;font-size:15px;line-height:20px;font-weight:700}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;align-items:start}
.field-help{display:block;margin-top:6px;color:var(--faint);font-size:12px;line-height:16px}
fieldset.field{margin:0 0 16px;padding:0;border:0;min-width:0}
fieldset.field>legend{padding:0;float:left;width:100%}
fieldset.field>legend+*{clear:both}
.check-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 16px;padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--field)}
.check{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:6px 0;font-size:13px;line-height:18px;cursor:pointer}
.check>span{min-width:0;overflow-wrap:break-word}
.check small{display:block;margin-top:1px;color:var(--faint);font-size:12px;line-height:16px}
.check .checkbox{flex:none;margin:1px 0 0}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.toggle-row .setting-text b{font-weight:500}
.segmented.fill{display:flex;width:100%}
.segmented.fill button{flex:1;height:30px}
.form-actions{display:flex;align-items:center;gap:8px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.form-actions .spacer{flex:1}
.empty-inline{color:var(--faint);font-size:13px;padding:4px 0 8px}

/* ---------- Images in comments ---------- */
.comment-images{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin-top:6px}
.comment-images button{display:block;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface-3);overflow:hidden;cursor:zoom-in;line-height:0}
.comment-images img{display:block;max-width:220px;max-height:160px;width:auto;height:auto;object-fit:cover}
.comment-images.single img{max-width:min(100%,420px);max-height:280px}
.pending-images{display:flex;flex-wrap:wrap;gap:6px}
.pending{position:relative;width:64px;height:64px;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--surface-3)}
.pending img{width:100%;height:100%;object-fit:cover;display:block}
.pending .icon-btn{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:10px;background:#000a;color:#fff}
.pending .icon-btn .i{width:12px;height:12px}
.composer-box.drag-over textarea{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.composer-actions .spacer{flex:1}
.composer-box.has-images .composer-actions{display:flex}
.lightbox{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;padding:0;border:0;background:#0b0d10f2;color:#fff;display:none;place-items:center}
.lightbox[open]{display:grid;animation:fade-in .15s ease-out}
.lightbox::backdrop{background:transparent}
.lightbox img{max-width:calc(100vw - 120px);max-height:calc(100dvh - 120px);object-fit:contain;border-radius:6px;box-shadow:0 20px 60px #000c;user-select:none}
.lightbox-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:4px;padding:calc(8px + env(safe-area-inset-top,0px)) 8px 8px 16px;font-size:13px;line-height:18px}
.lightbox-bar .icon-btn{color:#cfd6df}
.lightbox-bar .icon-btn:hover{background:#ffffff1f;color:#fff}
.lightbox-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfd6df}
.lightbox-nav{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;border:0;border-radius:22px;background:#ffffff14;color:#fff}
.lightbox-nav:hover{background:#ffffff26}
.lightbox-nav.prev{left:12px}.lightbox-nav.next{right:12px}
.lightbox-nav[hidden]{display:none}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));z-index:1200;transform:translateX(-50%);max-width:calc(100vw - 24px);display:flex;align-items:center;gap:12px;min-height:40px;padding:4px 4px 4px 14px;border:1px solid var(--modal-border);border-radius:10px;background:var(--hover-2);color:var(--text);font-size:13px;line-height:18px;box-shadow:0 10px 40px var(--sh-4);animation:toast-in .22s var(--ease-out)}
.toast[hidden]{display:none}
.toast span{padding:7px 0}
.toast:not(:has(button)){padding-right:14px}
.toast button{height:30px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--accent);font-weight:650}
.toast button:hover{background:var(--accent-soft)}

/* ---------- Login ---------- */
.login-screen{flex:1;display:grid;place-items:center;padding:20px;overflow:auto}
.login-panel{width:min(360px,100%);padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px var(--sh-2);animation:dlg-in .3s var(--ease-out)}
.login-panel .brand-mark{width:36px;height:36px;border-radius:9px}
.login-panel .brand-mark .i{width:20px;height:20px}
.login-panel h1{margin:20px 0 6px;font-size:20px;line-height:28px;letter-spacing:-.02em}
.login-panel p{margin:0;color:var(--dim);font-size:13px;line-height:20px}
.login-panel form{margin-top:20px}
.key-field{position:relative;display:block}
.key-field input{width:100%;height:40px;padding-right:44px;font-size:16px}
.key-field .icon-btn{position:absolute;right:4px;top:4px}
.login-panel .btn{width:100%;height:40px;margin-top:12px}
.login-error{display:flex;align-items:flex-start;gap:8px;margin-top:16px!important;padding:10px 12px;border:1px solid var(--err-border);border-radius:8px;background:var(--err-bg);color:var(--err-text)!important;animation:shake .3s var(--ease)}
.login-error .i{margin-top:2px}
.footer-note{margin-top:20px!important;color:var(--faint)!important;font-size:12px!important;line-height:16px!important;text-align:center}

/* ---------- Public suggestion page + inbox ---------- */
.suggest-panel{width:min(440px,100%)}
.suggest-panel .field input{height:40px}
.suggest-panel textarea{min-height:96px}
.suggest-panel a.btn{text-decoration:none;margin-top:20px}
.optional{font-weight:400;color:var(--faint)}
.footer-note a{color:inherit}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.suggestion-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.suggestion-item{display:flex;align-items:flex-start;gap:8px;padding:10px 8px 10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-3)}
.suggestion-text{flex:1;min-width:0}
.suggestion-text b{display:block;font-weight:600;overflow-wrap:anywhere}
.suggestion-text p{margin:4px 0 0;color:var(--dim);font-size:13px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:200px;overflow:auto}
.suggestion-text small{display:block;margin-top:4px;color:var(--faint);font-size:11px;line-height:16px;overflow-wrap:anywhere}
.suggestion-actions{display:flex;align-items:center;gap:4px;flex:none}
.suggestion-foot{display:flex;justify-content:flex-end;padding-top:4px}
#suggestions-note code{overflow-wrap:anywhere}
#suggestions-note .link-btn{height:auto;padding:0 4px}
#app-menu{position:relative}
#app-menu.has-badge::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---------- Motion ---------- */
@keyframes menu-in{from{opacity:0;transform:scale(.96)}}
@keyframes dlg-in{from{opacity:0;transform:translateY(6px) scale(.985)}}
@keyframes sheet-in{from{transform:translateY(32px);opacity:0}}
@keyframes fade-in{from{opacity:0}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}}
@keyframes pulse{50%{opacity:.5;transform:scale(1.6)}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---------- Responsive ---------- */
@media (pointer:coarse){
  .segmented button{height:32px;padding:0 12px}
  .settings-nav button{height:36px}
  .card .drag-handle{opacity:1;width:36px}
  .menu-item{height:40px;font-size:14px}
  .check-row .icon-btn,.comment-meta .icon-btn{opacity:1}
  input,select,textarea,.search input{font-size:16px}
  .palette-btn{display:none}
}
@media (max-width:960px){
  .boardhint{display:none}
  .palette-btn span{display:none}
  .search{width:160px}.search:focus-within{width:200px}
}
@media (max-width:720px){
  .top{height:auto;display:grid;grid-template-columns:1fr auto;grid-template-rows:48px 40px;gap:0 8px;padding:0 calc(8px + var(--safe-r)) 0 calc(12px + var(--safe-l))}
  .top .brand{grid-column:1;grid-row:1}
  .top-actions{grid-column:2;grid-row:1}
  .board-tabs{grid-column:1/-1;grid-row:2;height:40px;margin:0 -4px;padding:0 4px 6px}
  .palette-btn{display:none}
  .sync{width:32px;height:32px;justify-content:center;padding:0;margin:0}
  .sync-text{display:none}
  .profile{max-width:120px}
  .boardhead{flex-wrap:wrap;gap:8px;padding:8px calc(8px + var(--safe-r)) 8px calc(12px + var(--safe-l))}
  .boardhead-text{display:none}
  .boardcontrols{margin-left:0;flex:1}
  .search,.search:focus-within{width:auto;flex:1}
  .search kbd{display:none}
  .filters{order:3;flex-basis:100%}
  .filters:empty{display:none}
  .columns{padding:10px calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));gap:10px;scroll-snap-type:x mandatory;scroll-padding:0 12px;scrollbar-width:none}
  .lane,.new-lane,.columns>.drop-slot{width:calc(100vw - 52px);flex-basis:calc(100vw - 52px);scroll-snap-align:start}
  .card{min-height:44px}
  .card-body{padding:11px 0 11px 12px}
  .modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .card-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .card-modal[open]{animation:sheet-in .26s var(--ease-out)}
  .card-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"title" "side" "main";padding:0 16px 16px}
  .card-side{padding:0 0 16px;margin-bottom:4px;border-left:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .card-side .wide,.side-meta{grid-column:1/-1}
  .side-meta{margin-top:0}
  .card-modal .modal-head{padding:env(safe-area-inset-top,0px) 6px 0 16px;height:calc(52px + env(safe-area-inset-top,0px))}
  .modal-head{padding:0 6px 0 16px}
  .modal-body{padding:0 16px 16px}
  .dialog-footer{padding:10px 16px calc(10px + var(--safe-b))}
  .dialog-footer kbd,.palette-foot{display:none}
  .palette{margin-top:8px}
  .agent-form{flex-wrap:wrap}.agent-form .btn{width:100%}
  .settings-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .settings-modal[open]{animation:sheet-in .26s var(--ease-out)}
  .settings-modal .modal-head{padding-top:env(safe-area-inset-top,0px);height:calc(52px + env(safe-area-inset-top,0px))}
  .settings{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .settings-nav{flex-direction:row;padding:8px 12px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .settings-nav::-webkit-scrollbar{display:none}
  .settings-nav button{flex:none;height:32px}
  .settings-panes{padding:16px 16px calc(24px + var(--safe-b))}
  .setting-row{flex-wrap:wrap}
  .form-grid,.check-grid{grid-template-columns:minmax(0,1fr)}
  .webhook-form{padding:16px;margin-left:-4px;margin-right:-4px}
  .inline-form{flex-wrap:wrap;max-width:none}.inline-form .btn{width:100%}
  .lightbox img{max-width:100vw;max-height:calc(100dvh - 140px);border-radius:0}
  .lightbox-nav{top:auto;bottom:calc(20px + var(--safe-b));margin:0}
  .comment-images img{max-width:140px;max-height:120px}
}
@media (max-width:380px){.profile>span:last-child{display:none}.profile{padding:0;width:32px;justify-content:center}.card-side{grid-template-columns:1fr}}
[data-motion=reduce] *,[data-motion=reduce] *::before,[data-motion=reduce] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){:root:not([data-motion=full]) *,:root:not([data-motion=full]) *::before,:root:not([data-motion=full]) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}