:root{--bg:#0f172a;--surface:#1e293b;--surface-alt:#162032;--border:#334155;--text:#f1f5f9;--text-muted:#94a3b8;--primary:#3b82f6;--primary-hover:#2563eb;--note-low-bg:#fef08a;--note-low-border:#eab308;--note-normal-bg:#bae6fd;--note-normal-border:#38bdf8;--note-high-bg:#fecdd3;--note-high-border:#fb7185;--ink:#0f172a;--ink-muted:#334155}*{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(circle at top left, #172554 0%, var(--bg) 45%);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}#app{flex-direction:column;min-height:100vh;display:flex}.topbar{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;background:#0f172ad9;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;display:flex}.brand-mark{color:#0f172a;background:linear-gradient(135deg,#fde047 0%,#38bdf8 55%,#fb7185 100%);border-radius:9px;place-items:center;width:36px;height:36px;font-size:1.1rem;font-weight:800;display:grid;box-shadow:0 4px 12px #00000059}.brand h1{letter-spacing:-.02em;font-size:1.2rem;font-weight:700}.subtitle{color:var(--text-muted);margin-top:2px;font-size:.78rem}.topbar-actions{align-items:center;gap:18px;display:flex}.legend{color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;align-items:center;gap:12px;padding:6px 12px;font-size:.8rem;display:flex}.legend-item{align-items:center;gap:6px;display:inline-flex}.dot{border-radius:50%;width:10px;height:10px;display:inline-block}.dot-low{background:var(--note-low-bg)}.dot-normal{background:var(--note-normal-bg)}.dot-high{background:var(--note-high-bg)}.btn{cursor:pointer;border:none;border-radius:8px;padding:9px 16px;font-size:.88rem;font-weight:600;transition:background-color .15s,transform .1s,opacity .15s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn:active:not(:disabled){transform:translateY(1px)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-secondary{background:var(--surface-alt);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:#243247}.board{flex:1;grid-template-columns:repeat(4,minmax(260px,1fr));align-items:start;gap:18px;padding:20px 24px 28px;display:grid;overflow-x:auto}.column{border:1px solid var(--border);background:#1e293bc7;border-radius:14px;flex-direction:column;min-height:calc(100vh - 130px);max-height:calc(100vh - 130px);display:flex}.column-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.column-title-group{align-items:center;gap:9px;display:flex}.column-dot{border-radius:50%;width:9px;height:9px}.col-backlog{background:#94a3b8}.col-todo{background:#38bdf8}.col-doing{background:#fbbf24}.col-done{background:#4ade80}.column-header h2{letter-spacing:.01em;font-size:.95rem;font-weight:700}.column-count{color:var(--text);text-align:center;background:#334155;border-radius:999px;min-width:24px;padding:2px 8px;font-size:.76rem;font-weight:700}.col-add-btn{border:1px solid var(--border);background:var(--surface-alt);width:28px;height:28px;color:var(--text-muted);cursor:pointer;border-radius:7px;place-items:center;font-size:1.15rem;line-height:1;transition:background-color .15s,color .15s;display:grid}.col-add-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.column-cards{flex-direction:column;flex:1;gap:11px;padding:12px;transition:background-color .15s;display:flex;overflow-y:auto}.column-cards.drag-over{background:#3b82f614;border-bottom-right-radius:14px;border-bottom-left-radius:14px}.empty-state{text-align:center;color:var(--text-muted);border:1px dashed var(--border);pointer-events:none;border-radius:10px;padding:28px 12px;font-size:.82rem}.card{color:var(--ink);cursor:grab;-webkit-user-select:none;user-select:none;border-top:4px solid #0000;border-radius:4px 12px 10px 10px;padding:12px 13px 11px;transition:transform .14s,box-shadow .14s,opacity .14s;position:relative;box-shadow:0 4px 10px #00000047,0 1px 2px #0003}.card:hover{transform:translateY(-2px)rotate(-.3deg);box-shadow:0 8px 18px #0000005c}.card:active{cursor:grabbing}.card.dragging{opacity:.45;transform:scale(.98)}.card.priority-low{background:var(--note-low-bg);border-top-color:var(--note-low-border)}.card.priority-normal{background:var(--note-normal-bg);border-top-color:var(--note-normal-border)}.card.priority-high{background:var(--note-high-bg);border-top-color:var(--note-high-border)}.card-top{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.card-title{word-break:break-word;font-size:.92rem;font-weight:700;line-height:1.35}.card-delete{width:22px;height:22px;color:var(--ink);cursor:pointer;opacity:0;background:#0f172a1f;border:none;border-radius:5px;flex-shrink:0;place-items:center;font-size:1rem;line-height:1;transition:opacity .15s,background-color .15s;display:grid}.card:hover .card-delete,.card:focus-within .card-delete{opacity:1}.card-delete:hover{color:#fff;background:#dc2626e0}.card-desc{color:var(--ink-muted);white-space:pre-wrap;word-break:break-word;margin-top:7px;font-size:.8rem;line-height:1.4}.card-meta{text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);justify-content:space-between;align-items:center;margin-top:10px;font-size:.7rem;font-weight:700;display:flex}.priority-pill{background:#ffffff8c;border-radius:999px;padding:2px 7px}.drop-indicator{pointer-events:none;background:#60a5fa;border-radius:999px;height:4px;margin:2px 0;box-shadow:0 0 8px #60a5fae6}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;background:#020617b8;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;width:100%;max-width:460px;overflow:hidden;box-shadow:0 24px 48px #0000008c}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-header h2{font-size:1.05rem;font-weight:700}.icon-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.4rem;line-height:1}.icon-btn:hover{color:var(--text)}.modal-form{flex-direction:column;gap:14px;padding:18px 20px 20px;display:flex}.field{flex-direction:column;flex:1;gap:6px;display:flex}.field-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.field label{color:var(--text-muted);font-size:.8rem;font-weight:600}.required{color:#fb7185}.field input,.field textarea,.field select{background:var(--surface-alt);width:100%;color:var(--text);border:1px solid var(--border);font:inherit;border-radius:8px;padding:9px 11px;font-size:.9rem}.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--primary);border-color:#0000}.modal-footer{justify-content:flex-end;gap:10px;margin-top:4px;display:flex}.toast{color:var(--text);z-index:60;background:#1e293b;border:1px solid #475569;border-radius:10px;padding:10px 16px;font-size:.85rem;position:fixed;bottom:20px;right:20px;box-shadow:0 10px 24px #00000073}.toast.error{background:#4c0519;border-color:#fb7185}@media (width<=980px){.board{grid-template-columns:repeat(2,minmax(260px,1fr))}.column{min-height:360px;max-height:none}}@media (width<=640px){.topbar{flex-direction:column;align-items:flex-start}.legend{display:none}.board{grid-template-columns:1fr}}