:root,:root[data-theme=light]{--bg: #f7f8fa;--surface: #ffffff;--surface-soft: #f1f3f6;--border: #e6e8ec;--border-strong: #d4d7dd;--text: #2b303a;--text-dim: #6b7280;--text-faint: #9aa1ad;--primary: #4f7cff;--primary-hover: #3d6bf0;--primary-soft: #eaf0ff;--success: #1faa6c;--success-soft: #e6f6ee;--danger: #e5544b;--danger-soft: #fdeceb;--shadow-sm: 0 1px 2px rgba(20, 28, 46, .06);--shadow: 0 6px 16px -8px rgba(20, 28, 46, .18);--ring: 0 0 0 3px rgba(79, 124, 255, .18)}:root[data-theme=dark]{--bg: #15181e;--surface: #1e222b;--surface-soft: #1a1e26;--border: #2c313c;--border-strong: #3a404d;--text: #e7eaf0;--text-dim: #9aa3b2;--text-faint: #6b7385;--primary: #6f97ff;--primary-hover: #87a8ff;--primary-soft: #232a3d;--success: #34c184;--success-soft: #1c2f28;--danger: #f0685f;--danger-soft: #33211f;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow: 0 8px 20px -10px rgba(0, 0, 0, .6);--ring: 0 0 0 3px rgba(111, 151, 255, .25)}:root{--radius: 16px;--radius-sm: 11px;--transition: .15s ease;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;transition:background var(--transition),color var(--transition)}.app{max-width:960px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) 1.25rem 4rem}.app__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.75rem}.app__title{margin:0;font-size:clamp(1.6rem,4vw,2.1rem);font-weight:800;letter-spacing:-.02em;color:var(--text)}.app__subtitle{margin:.35rem 0 0;color:var(--text-dim);font-size:.95rem}.app__actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0}@media (max-width: 480px){.app__header{flex-wrap:wrap}.app__actions{width:100%;justify-content:space-between}}.app__badge{padding:.4rem .8rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-dim);font-size:.8rem;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-sm)}.add-form{display:flex;gap:.6rem;margin-bottom:1.75rem}.add-form__input{flex:1;padding:.8rem 1rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.97rem;transition:border-color var(--transition),box-shadow var(--transition)}.add-form__input::placeholder{color:var(--text-faint)}.add-form__input:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.8rem 1.2rem;border:1px solid transparent;border-radius:var(--radius-sm);font-size:.92rem;font-weight:600;cursor:pointer;transition:transform var(--transition),background var(--transition),opacity var(--transition),box-shadow var(--transition)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}.btn--primary:not(:disabled):hover{background:var(--primary-hover);box-shadow:var(--shadow)}.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-dim);cursor:pointer;transition:all var(--transition)}.icon-btn:hover{border-color:var(--border-strong);background:var(--surface-soft);color:var(--text)}.icon-btn--success:hover{border-color:var(--success);background:var(--success-soft);color:var(--success)}.icon-btn--danger:hover{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}.board{display:grid;grid-template-columns:repeat(var(--columns, 2),1fr);gap:1.1rem}@media (max-width: 640px){.board{grid-template-columns:1fr}}.column{--accent: var(--primary);display:flex;flex-direction:column;min-height:240px;padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-soft);transition:border-color var(--transition),background var(--transition),box-shadow var(--transition)}.column--over{border-color:var(--accent);background:var(--surface);box-shadow:var(--ring)}.column__head{display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem}.column__dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}.column__title{margin:0;font-size:.95rem;font-weight:700;letter-spacing:.01em}.column__count{margin-left:auto;min-width:24px;padding:.1rem .5rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-size:.78rem;font-weight:600;text-align:center}.column__clear{width:28px;height:28px}.column__body{display:flex;flex-direction:column;gap:.6rem;flex:1}.column__empty{margin:auto 0;padding:1.2rem .5rem;color:var(--text-faint);font-size:.86rem;text-align:center;border:1px dashed var(--border-strong);border-radius:var(--radius-sm)}.card{display:flex;align-items:center;gap:.55rem;padding:.7rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-sm);cursor:grab;transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition),opacity var(--transition)}.card:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow)}.card--dragging{opacity:.6;cursor:grabbing;transform:rotate(1.5deg) scale(1.02)}.card__grip{color:var(--text-faint);display:inline-flex;cursor:grab}.card__title{flex:1;margin:0;font-size:.92rem;line-height:1.35;word-break:break-word}.card__title--done{color:var(--text-dim);text-decoration:line-through;text-decoration-color:var(--text-faint)}.card__edit{flex:1;min-width:0;padding:.35rem .5rem;border:1px solid var(--primary);border-radius:8px;background:var(--surface);color:var(--text);font-size:.92rem;font-family:inherit}.card__edit:focus{outline:none;box-shadow:var(--ring)}.card__actions{display:flex;gap:.35rem}.banner{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;margin-bottom:1.25rem;border-radius:var(--radius-sm);font-size:.9rem}.banner--error{border:1px solid rgba(229,84,75,.35);background:var(--danger-soft);color:#b23b34}.banner__text{flex:1}.banner__close{border:none;background:transparent;color:inherit;font-size:1.2rem;line-height:1;cursor:pointer;opacity:.7}.banner__close:hover{opacity:1}.spinner{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:3rem 0;color:var(--text-dim)}.spinner__ring{width:34px;height:34px;border:3px solid var(--border-strong);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}.spinner__label{font-size:.9rem}@keyframes spin{to{transform:rotate(360deg)}}