:root{--page-bg: #f3f5f0;--text-main: #202124;--topbar-bg: #1f3329;--topbar-text: #f7f7f3;--muted-text: #cdd9d1;--accent: #f1cf5d;--accent-hover: #ffd95f;--accent-text: #172018;--panel-border: #d7ded6;--board-bg: #fbfcf8;--board-grid: rgb(56 80 65 / 8%);--soft-control: rgb(255 255 255 / 10%);--soft-control-hover: rgb(255 255 255 / 16%);--soft-control-border: rgb(255 255 255 / 18%);--field-border: rgb(255 255 255 / 22%);--field-bg: rgb(255 255 255 / 10%);--select-bg: #2c4538;--done-bg: #eef6ed;--done-bg-active: #d9f1dc;--done-border: #8ba796;--done-border-active: #2f7d49;--done-text: #365042;--done-muted: #607367;--empty-text: #59685e;--empty-strong: #26372d;--menu-bg: #ffffff;--note-control-bg: rgb(255 255 255 / 48%);--note-control-bg-soft: rgb(255 255 255 / 42%);--note-control-text: #293025;--note-text: #24251f;--note-completed-text: rgb(36 37 31 / 62%);--note-shadow: rgb(31 43 36 / 14%);--note-shadow-strong: rgb(31 43 36 / 22%);--note-yellow: #fff1a8;--note-pink: #ffc8d4;--note-blue: #bee3f8;--note-green: #cdf0c2;color:var(--text-main);background:var(--page-bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}:root[data-theme=dark]{--page-bg: #171b18;--text-main: #e8eee8;--topbar-bg: #0f1813;--topbar-text: #f2f5ef;--muted-text: #b9c6bd;--accent: #e4c04e;--accent-hover: #f0ce62;--accent-text: #17160d;--panel-border: #334239;--board-bg: #202721;--board-grid: rgb(218 230 219 / 7%);--soft-control: rgb(255 255 255 / 8%);--soft-control-hover: rgb(255 255 255 / 13%);--soft-control-border: rgb(255 255 255 / 14%);--field-border: rgb(255 255 255 / 18%);--field-bg: rgb(255 255 255 / 8%);--select-bg: #17231d;--done-bg: #19251d;--done-bg-active: #203824;--done-border: #496356;--done-border-active: #62ad76;--done-text: #cfe0d2;--done-muted: #9aaea0;--empty-text: #9aa99d;--empty-strong: #dce7df;--menu-bg: #273128;--note-control-bg: rgb(255 255 255 / 38%);--note-control-bg-soft: rgb(255 255 255 / 28%);--note-control-text: #151915;--note-text: #1f201a;--note-completed-text: rgb(31 32 26 / 62%);--note-shadow: rgb(0 0 0 / 32%);--note-shadow-strong: rgb(0 0 0 / 44%);--note-yellow: #d9c86b;--note-pink: #d8919e;--note-blue: #8bbbd8;--note-green: #95c48b;color-scheme:dark}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,textarea,select{font:inherit}.app-shell{display:grid;grid-template-rows:auto 1fr;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px clamp(16px,4vw,40px);color:var(--topbar-text);background:var(--topbar-bg);box-shadow:0 1px #ffffff1f inset}.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}.project-controls{display:flex;align-items:end;gap:8px}.project-select-label{display:grid;gap:4px;min-width:180px;color:var(--muted-text);font-size:.78rem;font-weight:700}.project-select-label select{width:100%;min-height:38px;border:1px solid rgb(255 255 255 / 22%);border-radius:8px;padding:0 10px;color:var(--topbar-text);background:var(--select-bg);outline:0}.project-button{min-width:38px;min-height:38px;padding:0 10px;border:1px solid var(--soft-control-border);border-radius:8px;color:var(--topbar-text);background:var(--soft-control);font-size:.84rem;font-weight:700;white-space:nowrap;cursor:pointer}.project-button:hover{background:var(--soft-control-hover)}.project-button.danger{color:#ffe3e3}.project-button:disabled{opacity:.42;cursor:not-allowed}.status-filter{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--soft-control-border);border-radius:8px;background:var(--soft-control)}.filter-button{min-height:34px;padding:0 12px;border:0;border-radius:6px;color:#dce7df;background:transparent;font-size:.86rem;font-weight:700;white-space:nowrap;cursor:pointer}.filter-button.is-active{color:var(--accent-text);background:var(--accent)}.search-box{display:grid;gap:4px;min-width:190px;color:var(--muted-text);font-size:.78rem;font-weight:700}.search-box input{width:100%;min-height:38px;border:1px solid var(--field-border);border-radius:8px;padding:0 12px;color:var(--topbar-text);background:var(--field-bg);outline:0}.search-box input::placeholder{color:#f7f7f394}.search-box input:focus-visible{border-color:#f1cf5d;box-shadow:0 0 0 3px #f1cf5d3d}.topbar h1{margin:0;font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.1;letter-spacing:0}.topbar p{margin:6px 0 0;color:var(--muted-text);font-size:.95rem}.primary-button{min-height:46px;padding:0 18px;border:0;border-radius:8px;color:var(--accent-text);background:var(--accent);font-weight:700;cursor:pointer;box-shadow:0 6px 16px #0000002e}.secondary-button{min-height:46px;padding:0 14px;border:1px solid var(--soft-control-border);border-radius:8px;color:var(--topbar-text);background:var(--soft-control);font-weight:700;white-space:nowrap;cursor:pointer}.secondary-button:hover{background:var(--soft-control-hover)}.new-note-colors{display:flex;align-items:center;gap:8px;min-width:0;margin:0;padding:0;border:0}.new-note-colors legend{width:1px;height:1px;overflow:hidden;position:absolute;white-space:nowrap;clip:rect(0 0 0 0)}.color-choice{display:inline-flex}.color-choice input{position:absolute;opacity:0;pointer-events:none}.color-swatch{width:34px;height:34px;overflow:hidden;border:2px solid rgb(255 255 255 / 28%);border-radius:999px;color:transparent;cursor:pointer;box-shadow:0 2px 6px #00000029}.color-choice input:checked+.color-swatch{border-color:#fff;outline:2px solid #f1cf5d;outline-offset:2px}.color-choice input:focus-visible+.color-swatch{outline:3px solid #2674c8;outline-offset:2px}.swatch-yellow{background:var(--note-yellow)}.swatch-pink{background:var(--note-pink)}.swatch-blue{background:var(--note-blue)}.swatch-green{background:var(--note-green)}.primary-button:hover{background:var(--accent-hover)}.primary-button:focus-visible,.secondary-button:focus-visible,.project-select-label select:focus-visible,.project-button:focus-visible,.filter-button:focus-visible,.complete-button:focus-visible,.delete-button:focus-visible,.note-color-trigger:focus-visible,.note-color-option:focus-visible,.note-size-trigger:focus-visible,.note-size-option:focus-visible,.note-handle:focus-visible,.note-text:focus-visible{outline:3px solid #2674c8;outline-offset:2px}.board-wrap{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:stretch;gap:14px;min-height:0;padding:clamp(12px,2.4vw,28px)}.board{position:relative;overflow:hidden;min-height:calc(100vh - 112px);border:1px solid var(--panel-border);border-radius:8px;background:linear-gradient(var(--board-grid) 1px,transparent 1px),linear-gradient(90deg,var(--board-grid) 1px,transparent 1px),var(--board-bg);background-size:32px 32px;touch-action:none}.done-zone{display:grid;align-content:center;justify-items:center;gap:8px;min-height:180px;border:2px dashed var(--done-border);border-radius:8px;color:var(--done-text);background:var(--done-bg);text-align:center;transition:border-color .14s ease,background .14s ease,transform .14s ease}.done-zone strong{font-size:1.05rem}.done-zone span{color:var(--done-muted);font-size:.9rem}.done-zone.is-over{border-color:var(--done-border-active);background:var(--done-bg-active);transform:scale(1.01)}.empty-state{position:absolute;inset:0;display:grid;place-content:center;gap:8px;padding:24px;color:var(--empty-text);text-align:center;pointer-events:none}.empty-state strong{color:var(--empty-strong);font-size:1.35rem}.note{position:absolute;display:grid;grid-template-rows:auto 1fr;width:240px;height:190px;border:1px solid rgb(31 43 36 / 14%);border-radius:8px;box-shadow:0 1px #ffffff6b inset,0 12px 22px var(--note-shadow);transition:box-shadow .14s ease,transform .14s ease;isolation:isolate}.note.is-dragging{z-index:5;box-shadow:0 18px 32px var(--note-shadow-strong);transform:rotate(-1deg)}.note.is-search-miss{opacity:.28;filter:saturate(.65)}.note.is-search-miss:focus-within,.note.is-search-miss:hover{opacity:.72}.note.is-completed{opacity:.78;box-shadow:0 1px #ffffff61 inset,0 8px 14px var(--note-shadow)}.note.is-completed .note-text{color:var(--note-completed-text);text-decoration:line-through;text-decoration-thickness:2px}.note-yellow{background:var(--note-yellow)}.note-green{background:var(--note-green)}.note-blue{background:var(--note-blue)}.note-pink{background:var(--note-pink)}.note-size-small .note-text{font-size:.94rem}.note-size-medium .note-text{font-size:1.08rem}.note-size-large .note-text{font-size:1.28rem}.note-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:8px 10px 4px}.note-color-dropdown,.note-size-dropdown{position:relative;flex:0 0 auto}.note-color-trigger{display:block;width:36px;height:34px;border:0;border-radius:7px;cursor:pointer;box-shadow:0 0 0 3px #ffffff7a inset,0 1px 5px #00000024}.note-color-trigger:after{content:"";display:block;width:0;height:0;margin:13px auto 0;border-top:5px solid rgb(36 37 31 / 72%);border-right:4px solid transparent;border-left:4px solid transparent}.note-color-menu{position:absolute;top:50%;right:calc(100% + 8px);z-index:10;display:none;grid-template-columns:repeat(4,30px);gap:7px;padding:8px;border-radius:8px;background:var(--menu-bg);box-shadow:0 12px 24px #1f2b2438;transform:translateY(-50%)}.note-color-dropdown.is-open .note-color-menu{display:grid}.note-color-option{width:30px;height:30px;border:2px solid #ffffff;border-radius:999px;color:transparent;cursor:pointer;box-shadow:0 1px 6px #0000002e}.note-size-trigger{display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;border:0;border-radius:7px;color:var(--note-control-text);background:var(--note-control-bg);font-family:Georgia,Times New Roman,serif;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 1px 5px #0000001f}.note-size-trigger.size-small{font-size:.86rem}.note-size-trigger.size-medium{font-size:1.08rem}.note-size-trigger.size-large{font-size:1.3rem}.note-size-menu{position:absolute;top:50%;right:calc(100% + 8px);z-index:10;display:none;grid-template-columns:repeat(3,32px);gap:6px;padding:8px;border-radius:8px;background:var(--menu-bg);box-shadow:0 12px 24px #1f2b2438;transform:translateY(-50%)}.note-size-dropdown.is-open .note-size-menu{display:grid}.note-size-option{width:32px;height:32px;border:0;border-radius:7px;color:var(--text-main);background:var(--page-bg);font-weight:700;line-height:1;cursor:pointer}.note-size-option.size-small{font-size:.82rem}.note-size-option.size-medium{font-size:1rem}.note-size-option.size-large{font-size:1.18rem}.complete-button{width:34px;min-width:34px;min-height:34px;padding:0;border:0;border-radius:7px;color:#31523b;background:var(--note-control-bg);font-size:1rem;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 1px 5px #0000001f}.complete-button[aria-pressed=true]{color:#fff;background:#2f7d49}.note-handle{flex:1 1 auto;min-width:0;min-height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;color:var(--note-control-text);background:var(--note-control-bg-soft);font-size:1.3rem;font-weight:700;line-height:1;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.note.is-dragging .note-handle{cursor:grabbing}.delete-button{width:34px;min-width:34px;min-height:34px;padding:0;border:0;border-radius:7px;color:#fff;background:#9c2f36;font-size:1.25rem;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer}.delete-button:hover{background:#7e232a}.note-text{width:100%;min-width:0;height:100%;padding:8px 12px 14px;border:0;color:var(--note-text);background:transparent;font-family:Comic Sans MS,Segoe Print,Bradley Hand ITC,cursive;font-size:1.08rem;line-height:1.65;letter-spacing:0;resize:none}.note-text::placeholder{color:#24251f7a}@media(max-width:900px){.topbar{padding:16px 20px}.topbar-actions{gap:12px}.project-controls{flex:1 1 100%;order:1}.project-select-label{flex:1 1 auto;min-width:0}.status-filter{order:4}.search-box{order:2;min-width:170px}.new-note-colors{order:3;gap:7px}.board-wrap{grid-template-columns:1fr;padding:14px}.done-zone{min-height:104px}.board{min-height:calc(100vh - 104px);background-size:28px 28px}.note{width:220px;height:180px}}@media(max-width:520px){.app-shell{min-height:100dvh}.topbar{align-items:stretch;gap:12px;padding:14px 12px}.topbar h1{font-size:1.2rem}.topbar p{font-size:.86rem}.primary-button{min-width:126px;min-height:52px;padding:0 12px;font-size:.95rem}.secondary-button{min-height:52px;padding:0 12px}.topbar-actions{flex-wrap:wrap;gap:10px}.project-controls{flex:1 1 100%;order:1;gap:6px}.project-select-label{min-width:0}.project-select-label select{min-height:46px}.project-button{min-width:44px;min-height:46px;padding:0 8px}.status-filter{order:4;width:100%}.filter-button{flex:1 1 0;min-height:44px;padding:0 6px}.search-box{flex:1 1 100%;min-width:0;order:2}.search-box input{min-height:46px}.new-note-colors{flex:1 1 100%;justify-content:flex-end;gap:10px;order:3}.color-swatch{width:42px;height:42px}.board-wrap{grid-template-columns:1fr;padding:10px}.done-zone{min-height:96px}.board{min-height:calc(100dvh - 102px);border-radius:7px;background-size:24px 24px}.note{width:170px;height:160px}.note-toolbar{min-height:46px;gap:4px;padding:8px 6px 4px}.delete-button,.complete-button,.note-color-trigger,.note-size-trigger{min-height:40px;font-size:.84rem}.note-handle{min-height:40px;font-size:1.4rem}.delete-button{width:32px;min-width:32px;padding:0;font-size:1.35rem}.complete-button{width:32px;min-width:32px;min-height:40px;font-size:1rem}.note-color-trigger{width:32px;height:40px}.note-size-trigger{width:30px;height:40px}.note-size-trigger.size-small{font-size:.82rem}.note-size-trigger.size-medium{font-size:1rem}.note-size-trigger.size-large{font-size:1.16rem}.note-color-trigger:after{margin-top:16px}.note-color-menu{grid-template-columns:repeat(2,24px);gap:5px;padding:7px;right:calc(100% + 6px);transform:translateY(-50%)}.note-color-option{width:24px;height:24px}.note-size-menu{grid-template-columns:repeat(3,28px);gap:5px;padding:7px;right:calc(100% + 6px);transform:translateY(-50%)}.note-size-option{width:28px;height:28px}.note-text{padding:8px 10px 12px}.note-size-small .note-text{font-size:.88rem}.note-size-medium .note-text{font-size:1rem}.note-size-large .note-text{font-size:1.16rem}}