@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Nunito:wght@400;600;700;800&display=swap');
:root { --ink:#26322d; --muted:#7d827f; --paper:#f3f1ea; --orange:#ee7f4f; --wood:#a96e3f; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font-family:Nunito,sans-serif; }
.toolbar { min-height:95px; padding:18px clamp(18px,4vw,56px); display:flex; align-items:center; justify-content:space-between; gap:24px; background:#fffdf8; border-bottom:1px solid #e5e0d7; }.brand { display:flex; align-items:center; gap:13px; }.brand-mark { color:white; background:var(--orange); border-radius:12px; font-size:24px; width:45px; height:45px; display:grid; place-items:center; transform:rotate(-6deg); }.brand p { margin:0 0 2px; letter-spacing:.13em; color:#9b9489; font-size:10px; font-weight:800; }.brand h1 { margin:0; font-size:20px; letter-spacing:-.04em; }.tools { display:flex; align-items:center; gap:9px; }.search { height:40px; width:205px; display:flex; gap:7px; align-items:center; padding:0 11px; color:#8d918e; background:#f5f4ef; border-radius:9px; }.search input { background:transparent; border:0; outline:0; width:100%; font:inherit; }.tools select { height:40px; border:1px solid #e6e3dc; border-radius:9px; padding:0 9px; color:#5e665e; background:#fff; font:inherit; }.add-button { height:41px; border:0; border-radius:9px; padding:0 15px; background:var(--orange); color:#fff; font-weight:800; box-shadow:0 4px 0 #d7673b; }.add-button:active { transform:translateY(2px); box-shadow:0 2px 0 #d7673b; }
main { padding:30px clamp(18px,4vw,56px) 55px; display:grid; grid-template-columns:minmax(0,1fr) 235px; gap:22px; max-width:1500px; margin:auto; }.board-wrap { min-width:0; }.board-label { display:flex; justify-content:space-between; margin:0 4px 10px; color:#615b51; font-size:11px; font-weight:800; letter-spacing:.13em; }.board-label small { color:#a3a097; letter-spacing:.04em; }.board { position:relative; min-height:680px; overflow:hidden; border:13px solid #714a31; border-radius:5px; background-color:#b97b4c; background-image:radial-gradient(#ce9568 1px,transparent 1px),linear-gradient(25deg,rgba(84,51,31,.09) 1px,transparent 1px); background-size:14px 14px,7px 7px; box-shadow:inset 0 0 40px rgba(73,42,25,.35),0 12px 20px rgba(61,45,32,.12); }.board::before { content:''; inset:0; position:absolute; pointer-events:none; border:2px solid rgba(255,240,210,.24); }
.note { position:absolute; display:flex; flex-direction:column; width:175px; height:164px; padding:18px 14px 10px; background:#ffe979; box-shadow:4px 7px 10px rgba(61,38,25,.28); transition:box-shadow .15s,opacity .15s; touch-action:none; }.note:hover { box-shadow:7px 11px 16px rgba(61,38,25,.3); }.note.dragging { opacity:.6; z-index:5; }.note textarea { width:100%; height:105px; resize:none; border:0; outline:0; background:transparent; color:#51462c; font:600 18px/1.45 'Klee One',cursive; }.note textarea::placeholder { color:rgba(81,70,44,.54); }.note-footer { display:flex; justify-content:space-between; align-items:center; }.colors { display:flex; gap:4px; }.colors button { padding:0; border:2px solid rgba(0,0,0,.08); width:12px; height:12px; border-radius:50%; }.colors button.selected { outline:2px solid #fff; outline-offset:1px; }.yellow { background:#ffe979; }.pink { background:#ffb2c1; }.blue { background:#a9d9f3; }.green { background:#bfe29e; }.drag-handle { color:rgba(67,55,34,.4); cursor:grab; font-size:20px; line-height:1; }.delete { display:grid; place-items:center; position:absolute; top:5px; right:6px; border:0; background:transparent; color:rgba(66,53,32,.44); font-size:19px; opacity:0; }.note:hover .delete { opacity:1; }.note[data-color="pink"] { background:#ffb2c1; }.note[data-color="blue"] { background:#a9d9f3; }.note[data-color="green"] { background:#bfe29e; }
.done-zone { border:2px dashed #c7c3b9; border-radius:14px; padding:23px 16px; text-align:center; height:fit-content; min-height:230px; color:#676d66; transition:.2s; }.done-zone.over { background:#e4f2d6; border-color:#83ad6d; transform:scale(1.02); }.done-icon { display:grid; place-items:center; width:35px; height:35px; margin:auto; border-radius:50%; background:#cfe6b8; color:#527a43; font-size:20px; font-weight:800; }.done-zone p { margin:10px 0 2px; font-size:10px; letter-spacing:.13em; font-weight:800; color:#879180; }.done-zone h2 { margin:0; font-size:17px; }.done-zone small { display:block; margin:7px 0 14px; color:#8d938d; font-size:11px; }.done-list { text-align:left; }.done-item { border-top:1px solid #dedbd3; padding:9px 3px; font:600 14px/1.4 'Klee One',cursive; word-break:break-word; }.done-item button { float:right; border:0; background:none; color:#a09e95; cursor:pointer; }
@media (max-width:800px) { .toolbar { align-items:start; flex-direction:column; }.tools { width:100%; flex-wrap:wrap; }.search { flex:1; min-width:150px; }.add-button { flex:1; } main { grid-template-columns:1fr; }.board { min-height:590px; }.done-zone { min-height:130px; } } @media (max-width:460px) { .tools select { display:none; }.board { border-width:8px; }.note { width:150px; height:148px; }.note textarea { font-size:16px; height:95px; } }