:root {
  --bg: #ffffff;
  --grid: rgba(20, 24, 32, 0.075);
  --ink: #10131a;
  --muted: #657083;
  --line: rgba(13, 16, 24, 0.10);
  --shadow: 0 24px 70px rgba(16, 24, 40, 0.14);
  --soft-shadow: 0 12px 34px rgba(16, 24, 40, 0.10);
  --done: #20b26b;
  --progress: #f29b2e;
  --waiting: #ef4d4d;
  --low: #64748b;
  --medium: #2563eb;
  --high: #f97316;
  --critical: #dc2626;
  --pin: #111827;
  --z: 1;
  --card-w: calc(318px * var(--z));
  --card-min-h: calc(178px * var(--z));
  --card-radius: calc(30px * var(--z));
  --card-pad-x: calc(20px * var(--z));
  --card-pad-top: calc(18px * var(--z));
  --card-pad-bottom: calc(66px * var(--z));
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family:
    "Segoe UI Variable Text", "Segoe UI", "SF Pro Text", "Inter", "Manrope",
    "Noto Sans", "Noto Sans Cyrillic", "Noto Sans CJK SC", "Noto Sans Arabic",
    "Noto Sans Hebrew", "Noto Sans Devanagari", Arial, sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: var(--bg);
  cursor: none;
  user-select: none;
}
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, .task-card, canvas { cursor: none; }

.cursor-cross { position: fixed; left: -9px; top: -9px; z-index: 5000; width: 18px; height: 18px; pointer-events: none; mix-blend-mode: multiply; }
.cursor-cross::before, .cursor-cross::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(17, 23, 34, .78); border-radius: 99px; }
.cursor-cross::before { width: 18px; height: 2px; }
.cursor-cross::after { width: 2px; height: 18px; }
.cursor-trail { position: fixed; left: 0; top: 0; z-index: 4999; height: 2px; pointer-events: none; transform-origin: 0 50%; border-radius: 999px; background: linear-gradient(90deg, rgba(17, 23, 34, .36), rgba(17, 23, 34, 0)); }

.login-page {
  display: grid;
  place-items: center;
  background: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), #fff;
  background-size: 34px 34px;
}
.login-shell { width: min(440px, calc(100vw - 32px)); }
.login-card { padding: 34px; border: 1px solid var(--line); border-radius: 32px; background: rgba(255,255,255,.86); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.brand-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; font-weight: 950; letter-spacing: -.055em; border: 1px solid rgba(0,0,0,.08); background: #111827; color: white; box-shadow: 0 14px 28px rgba(17,24,39,.18); }
.login-card h1 { margin: 22px 0 6px; font-size: 30px; letter-spacing: -.045em; }
.login-card p { margin: 0 0 26px; color: var(--muted); }
.login-card label { display: grid; gap: 8px; margin: 15px 0; font-weight: 760; color: #2b3240; }
.login-card input { width: 100%; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; outline: none; background: rgba(255,255,255,.92); transition: border .2s, box-shadow .2s, transform .2s; }
.login-card input:focus { border-color: rgba(17,24,39,.34); box-shadow: 0 0 0 4px rgba(17,24,39,.08); }
.login-card button { width: 100%; margin-top: 10px; border: 0; border-radius: 18px; padding: 15px 16px; font-weight: 900; color: white; background: #111827; box-shadow: 0 14px 28px rgba(17,24,39,.18); transition: transform .2s, opacity .2s, box-shadow .2s; }
.login-card button:hover { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(17,24,39,.2); }
.login-card button:disabled { opacity: .65; }
.login-error { min-height: 22px; margin-top: 12px; color: #d83b3b; font-weight: 750; }

.topbar {
  position: fixed;
  left: 18px;
  right: 18px;
  top: 16px;
  z-index: 30;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(245px, .75fr) minmax(500px, 1.4fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 20px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(16px);
  transition: transform .22s ease, box-shadow .22s ease;
}
.topbar strong { display: block; font-size: 17px; letter-spacing: -.035em; font-weight: 900; }
.topbar span { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 550; }
.board-filters { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(120px, .55fr)); gap: 8px; align-items: center; }
.search-box { position: relative; display: block; }
.search-box span { position: absolute; left: 14px; top: 6px; margin: 0; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: rgba(31,41,55,.45); pointer-events: none; }
.search-box input, .board-filters select {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 16px;
  outline: none;
  background: rgba(255,255,255,.9);
  color: #111827;
  box-shadow: 0 8px 20px rgba(16,24,40,.045);
  transition: border .18s, box-shadow .18s, transform .18s, background .18s;
}
.search-box input { padding: 17px 14px 5px; }
.board-filters select { padding: 0 12px; font-weight: 820; color: rgba(31,41,55,.78); }
.search-box input:focus, .board-filters select:focus { border-color: rgba(17,24,39,.28); box-shadow: 0 0 0 4px rgba(17,24,39,.07); }
.ghost-btn { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.92); padding: 10px 14px; font-weight: 820; color: #1f2937; transition: transform .18s, box-shadow .18s, background .18s; white-space: nowrap; }
.ghost-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(16, 24, 40, .08); }

.viewport { position: fixed; inset: 0; overflow: hidden; background: #fff; }
.grid-layer { position: absolute; inset: -100px; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: var(--grid-size, 34px) var(--grid-size, 34px); will-change: background-position, background-size; transition: background-size .18s linear; }
.links-layer { position: fixed; inset: 0; z-index: 6; width: 100vw; height: 100vh; overflow: visible; pointer-events: none; }
.link-path { fill: none; stroke: rgba(8, 11, 18, .86); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 7px 12px rgba(16, 24, 40, .12)); vector-effect: non-scaling-stroke; }
.link-path.is-new { animation: linkIn .24s ease-out; }
@keyframes linkIn { from { opacity: 0; stroke-dasharray: 8 10; } to { opacity: 1; stroke-dasharray: 0; } }
.world { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.viewport.dragging .task-card { pointer-events: none; }

.task-card {
  position: absolute;
  width: var(--card-w);
  min-height: var(--card-min-h);
  padding: var(--card-pad-top) var(--card-pad-x) var(--card-pad-bottom);
  border: max(1px, calc(1px * var(--z))) solid rgba(15, 23, 42, .10);
  border-radius: var(--card-radius);
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.99), rgba(255,255,255,.84)), rgba(255,255,255,.94);
  box-shadow: 0 calc(18px * var(--z)) calc(46px * var(--z)) rgba(15, 23, 42, .13);
  backdrop-filter: blur(12px);
  left: 0; top: 0;
  transform: translate3d(var(--sx), var(--sy), 0);
  transition: opacity .18s, box-shadow .22s ease, border-color .22s ease, background .22s ease, width .18s linear, min-height .18s linear, padding .18s linear, border-radius .18s linear;
  pointer-events: auto;
  contain: layout paint;
}
.task-card.hidden-by-filter { opacity: 0; pointer-events: none; }
.task-card:hover, .task-card.selected, .task-card.link-target { border-color: rgba(15, 23, 42, .24); box-shadow: 0 calc(24px * var(--z)) calc(64px * var(--z)) rgba(15, 23, 42, .18); }
.task-card.link-source { border-color: rgba(15, 23, 42, .34); box-shadow: 0 0 0 calc(4px * var(--z)) rgba(15,23,42,.07), 0 calc(24px * var(--z)) calc(64px * var(--z)) rgba(15, 23, 42, .18); }
.task-card.overdue { border-color: rgba(220,38,38,.34); box-shadow: 0 0 0 calc(3px * var(--z)) rgba(220,38,38,.06), 0 calc(24px * var(--z)) calc(64px * var(--z)) rgba(220,38,38,.12); }
.task-card.pinned { z-index: 18; border-color: rgba(17,24,39,.32); background: radial-gradient(circle at 22% 0%, rgba(255,255,255,1), rgba(255,255,255,.9)), rgba(255,255,255,.97); box-shadow: 0 0 0 calc(4px * var(--z)) rgba(17,24,39,.055), 0 calc(28px * var(--z)) calc(70px * var(--z)) rgba(15,23,42,.20); }
.task-card.pinned::after { content: "Закреплено"; position: absolute; left: calc(73px * var(--z)); top: calc(14px * var(--z)); height: calc(23px * var(--z)); display: inline-flex; align-items: center; padding: 0 calc(9px * var(--z)); border-radius: calc(10px * var(--z)); background: rgba(17,24,39,.88); color: white; font-size: clamp(7px, calc(10px * var(--z)), 14px); font-weight: 920; letter-spacing: -.01em; pointer-events: none; }
.task-card::before { content: ""; position: absolute; left: calc(20px * var(--z)); top: calc(17px * var(--z)); width: calc(46px * var(--z)); height: max(3px, calc(5px * var(--z))); border-radius: 99px; opacity: .9; background: var(--waiting); transition: background .22s, width .18s linear, height .18s linear; }
.task-card[data-status="progress"]::before { background: var(--progress); }
.task-card[data-status="done"]::before { background: var(--done); }
.card-topline { display: flex; justify-content: flex-end; align-items: center; gap: calc(7px * var(--z)); min-height: calc(24px * var(--z)); }
.priority-pill { display: inline-flex; align-items: center; height: calc(25px * var(--z)); padding: 0 calc(9px * var(--z)); border-radius: calc(11px * var(--z)); border: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.86); font-size: clamp(8px, calc(11px * var(--z)), 15px); line-height: 1; font-weight: 930; color: #1f2937; }
.priority-pill.low { color: #475569; background: rgba(100,116,139,.09); }
.priority-pill.medium { color: #1d4ed8; background: rgba(37,99,235,.08); }
.priority-pill.high { color: #c2410c; background: rgba(249,115,22,.10); }
.priority-pill.critical { color: #b91c1c; background: rgba(220,38,38,.10); }
.pin-task-btn, .open-card-btn { width: calc(26px * var(--z)); height: calc(26px * var(--z)); display: grid; place-items: center; border: 1px solid rgba(15,23,42,.08); border-radius: calc(10px * var(--z)); background: rgba(255,255,255,.86); color: rgba(31,41,55,.72); font-size: clamp(9px, calc(13px * var(--z)), 18px); font-weight: 900; padding: 0; transition: transform .16s, background .16s; }
.pin-task-btn:hover, .open-card-btn:hover { transform: translateY(-1px); background: white; }
.pin-task-btn { font-size: clamp(9px, calc(12px * var(--z)), 17px); opacity: .46; }
.pin-task-btn.active { opacity: 1; background: #111827; color: #fff; border-color: rgba(17,24,39,.34); box-shadow: 0 calc(8px * var(--z)) calc(16px * var(--z)) rgba(17,24,39,.15); }
.task-text { margin-top: calc(10px * var(--z)); min-height: calc(54px * var(--z)); max-height: calc(230px * var(--z)); overflow: auto; outline: none; font-size: clamp(10px, calc(18px * var(--z)), 26px); line-height: 1.34; letter-spacing: -.018em; font-weight: 770; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; unicode-bidi: plaintext; user-select: text; cursor: text; color: #111827; scrollbar-width: thin; }
.task-text:empty::before { content: "Новая задача"; color: rgba(31, 41, 55, .38); }
.tag-row { display: flex; gap: calc(5px * var(--z)); flex-wrap: wrap; margin-top: calc(9px * var(--z)); max-height: calc(45px * var(--z)); overflow: hidden; }
.tag-row span { display: inline-flex; align-items: center; height: calc(22px * var(--z)); max-width: calc(105px * var(--z)); padding: 0 calc(8px * var(--z)); border-radius: calc(10px * var(--z)); background: rgba(15,23,42,.055); color: rgba(31,41,55,.72); font-size: clamp(7px, calc(10px * var(--z)), 14px); font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check-mini { position: absolute; left: calc(18px * var(--z)); bottom: calc(44px * var(--z)); color: rgba(31,41,55,.42); font-size: clamp(8px, calc(11px * var(--z)), 15px); font-weight: 850; }
.check-mini.active { color: rgba(31,41,55,.72); }
.due-pill { position: absolute; left: calc(18px * var(--z)); bottom: calc(15px * var(--z)); display: inline-flex; align-items: center; gap: calc(6px * var(--z)); max-width: calc(145px * var(--z)); padding: calc(7px * var(--z)) calc(9px * var(--z)); border-radius: calc(13px * var(--z)); border: 1px solid rgba(15, 23, 42, .08); background: rgba(255,255,255,.82); color: rgba(31, 41, 55, .56); font-size: clamp(8px, calc(11px * var(--z)), 15px); line-height: 1; font-weight: 820; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.due-pill.active { color: #1f2937; background: rgba(255,255,255,.94); box-shadow: 0 calc(8px * var(--z)) calc(16px * var(--z)) rgba(15, 23, 42, .07); }
.due-pill.overdue { color: #b91c1c; border-color: rgba(220,38,38,.18); background: rgba(254,242,242,.94); }
.status-pill { position: absolute; right: calc(14px * var(--z)); bottom: calc(14px * var(--z)); display: inline-flex; align-items: center; gap: calc(7px * var(--z)); max-width: calc(184px * var(--z)); padding: calc(8px * var(--z)) calc(10px * var(--z)); border-radius: calc(14px * var(--z)); border: 1px solid rgba(15, 23, 42, .09); background: rgba(255,255,255,.94); box-shadow: 0 calc(9px * var(--z)) calc(18px * var(--z)) rgba(15, 23, 42, .08); font-size: clamp(8px, calc(12px * var(--z)), 16px); line-height: 1; font-weight: 920; color: #1f2937; white-space: nowrap; transition: transform .24s cubic-bezier(.2,.8,.2,1), background .24s, border-color .24s, padding .18s linear; }
.status-pill.changed { transform: scale(1.08); }
.status-pill .dot, .status-menu .dot { width: 9px; height: 9px; border-radius: 99px; flex: 0 0 9px; }
.dot.done { background: var(--done); } .dot.progress { background: var(--progress); } .dot.waiting { background: var(--waiting); }
.priority-mark { width: 10px; height: 10px; border-radius: 99px; display: inline-block; }
.priority-mark.low { background: var(--low); } .priority-mark.medium { background: var(--medium); } .priority-mark.high { background: var(--high); } .priority-mark.critical { background: var(--critical); }

.status-menu { position: fixed; z-index: 50; display: none; width: 294px; padding: 9px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); backdrop-filter: blur(18px); transform-origin: top left; animation: menuIn .15s ease-out; }
@keyframes menuIn { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.status-menu.open { display: block; }
.menu-title { padding: 8px 12px 6px; font-size: 12px; font-weight: 920; letter-spacing: .08em; text-transform: uppercase; color: rgba(31, 41, 55, .48); }
.status-menu button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 11px 12px; border-radius: 14px; font-weight: 820; color: #1f2937; text-align: left; transition: background .16s, transform .16s; }
.status-menu button:hover { background: rgba(15, 23, 42, .06); transform: translateY(-1px); }
.status-menu hr { border: 0; height: 1px; background: var(--line); margin: 7px 6px; }
.status-menu .delete-action { color: #d83b3b; }
.status-menu .link-action, .status-menu .pin-action { color: #111827; }
.status-menu .pin-action { background: rgba(17,24,39,.045); }
.date-control { display: grid; gap: 7px; padding: 8px 10px 4px; color: #1f2937; font-size: 12px; font-weight: 850; }
.date-control span { color: rgba(31, 41, 55, .56); }
.date-control input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 10px 11px; outline: none; background: rgba(255,255,255,.94); color: #111827; transition: border .16s, box-shadow .16s; }
.date-control input:focus { border-color: rgba(17,24,39,.34); box-shadow: 0 0 0 4px rgba(17,24,39,.07); }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 3px 8px 0; }
.menu-row button { justify-content: center; padding: 9px 8px; background: rgba(15,23,42,.045); }

.zoom-panel, .minimap, .autosave { position: fixed; z-index: 36; border: 1px solid var(--line); background: rgba(255,255,255,.84); box-shadow: var(--soft-shadow); backdrop-filter: blur(16px); }
.zoom-panel { left: 18px; bottom: 18px; display: flex; align-items: center; gap: 7px; padding: 8px; border-radius: 20px; }
.zoom-panel button, .zoom-panel strong { height: 36px; min-width: 40px; display: inline-grid; place-items: center; border: 1px solid rgba(15,23,42,.08); border-radius: 14px; background: rgba(255,255,255,.9); color: #111827; font-weight: 900; transition: transform .16s, background .16s, box-shadow .16s; }
.zoom-panel button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(16,24,40,.08); }
.zoom-panel strong { padding: 0 10px; font-size: 13px; color: rgba(31,41,55,.72); }
.minimap { right: 18px; bottom: 18px; width: 260px; padding: 10px; border-radius: 22px; }
.minimap-title { padding: 0 2px 8px; font-size: 12px; font-weight: 930; color: rgba(31,41,55,.55); letter-spacing: .08em; text-transform: uppercase; }
.minimap canvas { display: block; width: 240px; height: 150px; border: 1px solid rgba(15,23,42,.08); border-radius: 16px; background: rgba(255,255,255,.86); }
.autosave { left: 50%; bottom: 18px; transform: translateX(-50%); min-width: 126px; text-align: center; padding: 11px 14px; border-radius: 18px; font-size: 13px; font-weight: 900; color: rgba(31,41,55,.72); transition: background .2s, color .2s, transform .2s, border .2s; }
.autosave.saving { color: #92400e; border-color: rgba(245,158,11,.22); background: rgba(255,251,235,.9); }
.autosave.error { color: #b91c1c; border-color: rgba(220,38,38,.2); background: rgba(254,242,242,.9); }
.autosave.saved { color: #166534; border-color: rgba(34,197,94,.18); background: rgba(240,253,244,.92); }

.modal-backdrop { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; padding: 22px; background: rgba(15,23,42,.20); backdrop-filter: blur(12px); animation: fadeIn .18s ease-out; }
.modal-backdrop.open { display: grid; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.task-modal-card { width: min(860px, calc(100vw - 36px)); max-height: min(820px, calc(100vh - 36px)); overflow: auto; position: relative; padding: 26px; border: 1px solid rgba(15,23,42,.12); border-radius: 32px; background: rgba(255,255,255,.94); box-shadow: 0 32px 90px rgba(15,23,42,.24); animation: modalIn .22s cubic-bezier(.2,.8,.2,1); }
@keyframes modalIn { from { opacity: 0; transform: scale(.97) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-close { position: absolute; right: 18px; top: 18px; width: 38px; height: 38px; border: 1px solid rgba(15,23,42,.08); border-radius: 14px; background: white; color: #111827; font-size: 26px; line-height: 1; transition: transform .16s, box-shadow .16s; }
.modal-close:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(16,24,40,.08); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-right: 48px; margin-bottom: 18px; }
.modal-kicker { color: rgba(31,41,55,.48); font-size: 12px; font-weight: 930; letter-spacing: .08em; text-transform: uppercase; }
.modal-head h2 { margin: 5px 0 0; font-size: 30px; letter-spacing: -.045em; line-height: 1.06; }
.modal-state { margin-top: 3px; padding: 9px 12px; border-radius: 14px; font-size: 12px; font-weight: 900; white-space: nowrap; background: rgba(15,23,42,.055); color: rgba(31,41,55,.62); }
.modal-state.saving { color: #92400e; background: rgba(255,251,235,.95); }
.modal-state.error { color: #b91c1c; background: rgba(254,242,242,.95); }
.modal-state.saved { color: #166534; background: rgba(240,253,244,.95); }
.modal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.modal-field { display: grid; gap: 8px; margin-bottom: 14px; }
.modal-field.full { grid-column: 1 / -1; }
.modal-field span, .checklist-head strong { font-size: 13px; font-weight: 900; color: rgba(31,41,55,.68); }
.modal-field input, .modal-field textarea, .modal-field select, .checklist-add input { width: 100%; border: 1px solid rgba(15,23,42,.10); border-radius: 18px; background: rgba(255,255,255,.92); color: #111827; outline: none; padding: 13px 14px; transition: border .18s, box-shadow .18s; }
.modal-field textarea { resize: vertical; min-height: 58px; line-height: 1.36; }
.modal-field input:focus, .modal-field textarea:focus, .modal-field select:focus, .checklist-add input:focus { border-color: rgba(17,24,39,.32); box-shadow: 0 0 0 4px rgba(17,24,39,.07); }
.checklist-box { margin-top: 4px; padding: 16px; border: 1px solid rgba(15,23,42,.08); border-radius: 24px; background: rgba(248,250,252,.72); }
.checklist-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.checklist-head span { color: rgba(31,41,55,.55); font-weight: 900; }
.checklist-items { display: grid; gap: 8px; }
.check-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid rgba(15,23,42,.07); border-radius: 16px; background: rgba(255,255,255,.82); }
.check-item input { width: 18px; height: 18px; accent-color: #111827; }
.check-item span { outline: none; min-height: 20px; line-height: 1.3; user-select: text; cursor: text; color: #111827; }
.check-item:has(input:checked) span { color: rgba(31,41,55,.50); text-decoration: line-through; }
.check-item button { width: 30px; height: 30px; border: 1px solid rgba(15,23,42,.08); border-radius: 12px; background: white; color: #b91c1c; font-size: 19px; line-height: 1; }
.checklist-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.checklist-add button { border: 0; border-radius: 16px; background: #111827; color: #fff; padding: 0 16px; font-weight: 900; box-shadow: 0 12px 24px rgba(17,24,39,.16); }

.toast { position: fixed; left: 50%; bottom: 76px; z-index: 80; max-width: min(520px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid rgba(15,23,42,.1); border-radius: 18px; background: rgba(17,24,39,.92); color: white; box-shadow: 0 20px 52px rgba(16,24,40,.22); opacity: 0; pointer-events: none; transform: translate(-50%, 10px) scale(.98); transition: opacity .2s, transform .2s; font-weight: 760; }
.toast.open { opacity: 1; transform: translate(-50%, 0) scale(1); }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: 1fr auto; }
  .board-filters { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .topbar { left: 10px; right: 10px; top: 10px; height: auto; min-height: 60px; padding: 12px; border-radius: 20px; }
  .topbar span { display: none; }
  .board-filters { grid-template-columns: 1fr; }
  .zoom-panel { left: 10px; bottom: 10px; }
  .minimap { right: 10px; bottom: 74px; width: 210px; }
  .minimap canvas { width: 190px; height: 116px; }
  .autosave { bottom: 10px; transform: none; left: 152px; }
  .task-card { --card-w: calc(284px * var(--z)); }
  .modal-grid { grid-template-columns: 1fr; }
  .task-modal-card { padding: 20px; border-radius: 26px; }
  .checklist-add { grid-template-columns: 1fr; }
  .checklist-add button { height: 44px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }