:root{
  --bg:#f7f4ec; --ink:#33312b; --muted:#8a857a; --line:#e7e1d4;
  --y:#fff3b0; --b:#cfe8ff; --g:#d6f5d6; --p:#ffd9e6; --v:#e7dcff; --gr:#e9e6df;
  --shadow:0 2px 6px rgba(60,50,30,.10),0 8px 24px rgba(60,50,30,.06);
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#211f1b; --ink:#efece3; --muted:#a49e90; --line:#3a362e;
    --y:#6b6321; --b:#274b63; --g:#2f5a38; --p:#6b3350; --v:#453a63; --gr:#3a362e; }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.topbar{position:sticky;top:0;z-index:5;display:flex;gap:12px;align-items:center;
  padding:12px 18px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.2px}
.topbar h1 span{color:var(--muted)}
.search{flex:1;max-width:420px}
.search input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-size:14px}
.status{font-size:12px;color:var(--muted);text-transform:capitalize}
.status.online{color:#3a9d5d}.status.syncing{color:#c98a1a}
.btn-new{border:0;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:999px;font-weight:600;cursor:pointer}
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;padding:18px;align-items:start}
.card{background:var(--y);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);cursor:pointer;min-height:96px;position:relative;overflow:hidden;transition:transform .08s ease}
.card:hover{transform:translateY(-2px)}
.card.c-yellow{background:var(--y)}.card.c-blue{background:var(--b)}.card.c-green{background:var(--g)}
.card.c-pink{background:var(--p)}.card.c-purple{background:var(--v)}.card.c-gray{background:var(--gr)}
.card h3{margin:0 0 6px;font-size:15px;font-weight:700;padding-right:18px}
.card .body{font-size:13.5px;color:var(--ink);opacity:.9;max-height:150px;overflow:hidden;word-break:break-word}
.card .pin{position:absolute;top:10px;right:10px;font-size:13px}
.card .meta{display:flex;gap:10px;margin-top:8px;font-size:12px;color:var(--muted)}
.card .meta .due.soon{color:#c0522a;font-weight:600}
.empty{text-align:center;color:var(--muted);margin-top:60px}
/* editor */
.editor-backdrop{position:fixed;inset:0;background:rgba(30,25,15,.32);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.editor{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--y);border-radius:18px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:10px}
.editor.c-yellow{background:var(--y)}.editor.c-blue{background:var(--b)}.editor.c-green{background:var(--g)}
.editor.c-pink{background:var(--p)}.editor.c-purple{background:var(--v)}.editor.c-gray{background:var(--gr)}
.editor-head{display:flex;align-items:center;gap:6px}
.editor-head .spacer{flex:1}
.colors{display:flex;gap:6px}
.swatch{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,0,0,.12);cursor:pointer}
.swatch.sel{outline:2px solid var(--ink);outline-offset:1px}
.icon{border:0;background:transparent;font-size:16px;cursor:pointer;padding:4px 6px;border-radius:8px;color:var(--ink)}
.icon:hover{background:rgba(0,0,0,.06)}
.icon.on{background:rgba(0,0,0,.12)}
.icon.danger:hover{background:rgba(200,60,40,.15)}
.ed-title{border:0;background:transparent;font-size:18px;font-weight:700;color:var(--ink);outline:none}
.toolbar{display:flex;gap:4px}
.toolbar button{border:0;background:rgba(0,0,0,.06);width:30px;height:28px;border-radius:7px;cursor:pointer;color:var(--ink)}
.ed-body{min-height:120px;outline:none;font-size:15px;line-height:1.55}
.ed-body:empty::before{content:attr(data-ph);color:var(--muted)}
.checklist{display:flex;flex-direction:column;gap:6px}
.cl-item{display:flex;align-items:center;gap:8px}
.cl-item input[type=text]{flex:1;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);padding:2px 0;outline:none}
.cl-item.done input[type=text]{text-decoration:line-through;color:var(--muted)}
.cl-add{align-self:flex-start;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px}
.remind-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.remind-row input{font:inherit}
@media (max-width:520px){.board{grid-template-columns:repeat(auto-fill,minmax(45%,1fr));padding:12px;gap:10px}.topbar{flex-wrap:wrap}.search{order:3;max-width:100%;flex-basis:100%}}