:root{
  --bg:#fbf6f3; --surface:#ffffff; --ink:#4a4038; --muted:#9c8b84; --line:#eee2dc;
  --pink:#e7798e; --pink-deep:#c46779; --pink-soft:#fbe8ec; --pink-light:#f0b3c0;
  --on-pink:#ffffff; --done:#c4b6b0; --rule:#c46779;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#221c1a; --surface:#2c2522; --ink:#f1e8e3; --muted:#b3a39c; --line:#3d3430;
    --pink:#ef8fa2; --pink-deep:#f0a5b4; --pink-soft:#43292f; --pink-light:#8a4c59;
    --on-pink:#2a1b1f; --done:#6f625d; --rule:#ef8fa2;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#221c1a; --surface:#2c2522; --ink:#f1e8e3; --muted:#b3a39c; --line:#3d3430;
  --pink:#ef8fa2; --pink-deep:#f0a5b4; --pink-soft:#43292f; --pink-light:#8a4c59;
  --on-pink:#2a1b1f; --done:#6f625d; --rule:#ef8fa2;
}
body{background:var(--bg);color:var(--ink);font-family:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;line-height:1.7;padding:0 16px}
.wrap{max-width:1080px;margin:0 auto;padding-block:40px 56px}
.brand{text-align:center}
.brand svg{width:44px;height:44px;display:block;margin:0 auto 6px}
.brand .en{font-family:"Quicksand","Yu Gothic",sans-serif;font-weight:500;letter-spacing:.24em;font-size:.68rem;color:var(--muted);margin:0}
h1{font-weight:500;font-size:10pt;color:var(--muted);margin:4px 0 0;letter-spacing:.08em;text-wrap:balance}
.sub{color:var(--muted);margin:6px 0 0;font-size:.9rem}
.overall{max-width:420px;margin:0 auto 36px;display:flex;align-items:center;gap:14px}
.bar{flex:1;height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--pink);width:0;transition:width .3s}
.overall b{font-weight:500;color:var(--pink);font-variant-numeric:tabular-nums;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.col{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:22px 20px;display:flex;flex-direction:column;gap:10px}
.col header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.col h2{font-size:1.05rem;font-weight:500;color:var(--pink);margin:0}
.col .what{color:var(--muted);font-size:.82rem;margin:2px 0 0}
.pill{font-size:.72rem;padding:3px 12px;border-radius:999px;white-space:nowrap;border:1.5px solid}
.pill.run{background:var(--pink);border-color:var(--pink);color:var(--on-pink)}
.pill.todo{background:var(--surface);border-color:var(--pink-deep);color:var(--pink-deep)}
.pill.fin{background:var(--surface);border-color:var(--ink);color:var(--ink)}
.count{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-bottom:8px;border-bottom:1px solid var(--line)}
ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
li label{display:flex;gap:10px;align-items:flex-start;padding:6px 4px;border-radius:3px;cursor:pointer;font-size:.92rem}
li label:hover{background:var(--pink-soft)}
li input{margin-top:6px;accent-color:var(--pink);width:16px;height:16px;flex:none}
li.done span{color:var(--done);text-decoration:line-through}
li small{display:block;color:var(--muted);font-size:.76rem}
li.done small{color:var(--done)}
.add{display:flex;gap:8px;margin-top:auto;padding-top:12px}
.add input{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:3px;padding:8px 10px;font:inherit;font-size:.85rem}
.add button{border:0;background:var(--pink);color:var(--on-pink);border-radius:3px;padding:8px 16px;font:inherit;font-size:.85rem;cursor:pointer}
.add button:hover{background:var(--pink-deep)}
button:focus-visible,input:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.note{margin-top:28px;color:var(--muted);font-size:.78rem;text-align:center}
@media (prefers-reduced-motion: reduce){.bar>i{transition:none}}
li{display:flex;align-items:flex-start;gap:4px;border-radius:3px}
li:hover{background:var(--pink-soft)}
li label{flex:1;min-width:0}
li label:hover{background:transparent}
.acts{display:flex;gap:2px;padding-top:4px;opacity:0;transition:opacity .15s}
li:hover .acts,li:focus-within .acts{opacity:1}
@media (hover:none){.acts{opacity:1}}
.ico{border:0;background:transparent;color:var(--muted);width:28px;height:28px;border-radius:3px;cursor:pointer;display:grid;place-items:center;padding:0}
.ico svg{width:15px;height:15px}
.ico:hover{color:var(--pink-deep);background:var(--surface)}
.ico.del:hover{color:#c0392b}
li.editing{display:block;padding:8px 4px;background:var(--pink-soft)}
.edit{display:flex;flex-direction:column;gap:6px}
.edit input{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:3px;padding:7px 9px;font:inherit;font-size:.9rem}
.edit input.memo{font-size:.8rem}
.edbtns{display:flex;justify-content:flex-end;gap:6px}
.edbtns button{border:1.5px solid var(--pink);background:var(--pink);color:var(--on-pink);border-radius:999px;padding:4px 14px;font:inherit;font-size:.8rem;cursor:pointer}
.edbtns .ghost{background:var(--surface);color:var(--pink-deep);border-color:var(--pink-deep)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom, 0px));background:var(--ink);color:var(--bg);padding:10px 12px 10px 18px;border-radius:999px;display:flex;gap:14px;align-items:center;font-size:.85rem;box-shadow:0 4px 14px rgba(0,0,0,.28);max-width:calc(100% - 32px)}
.toast button{border:0;background:var(--pink);color:#fff;border-radius:999px;padding:5px 14px;font:inherit;font-size:.8rem;cursor:pointer;white-space:nowrap}

/* ---- サーバー版で追加 ---- */
.topbar{display:flex;justify-content:flex-end;align-items:center;gap:12px;font-size:.82rem;color:var(--muted);padding-top:16px;max-width:1080px;margin:0 auto}
.topbar form{margin:0}
.linkbtn{border:0;background:none;color:var(--pink-deep);font:inherit;cursor:pointer;text-decoration:underline;padding:0}
.sync{font-size:.75rem;color:var(--muted)}
.sync.err{color:#c0392b}
.col header .hacts{display:flex;align-items:center;gap:2px}
.col header .acts{opacity:0;padding-top:0}
.col:hover header .acts,.col header:focus-within .acts{opacity:1}
@media (hover:none){.col header .acts{opacity:1}}
.chedit{display:flex;flex-direction:column;gap:6px;background:var(--pink-soft);padding:10px;border-radius:3px}
.chedit input,.chedit select{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:3px;padding:7px 9px;font:inherit;font-size:.88rem}
.newcol{border:1.5px dashed var(--pink-light);background:transparent;color:var(--pink-deep);border-radius:3px;min-height:120px;font:inherit;font-size:.95rem;cursor:pointer}
.newcol:hover{background:var(--pink-soft)}
.loading{text-align:center;color:var(--muted);padding:40px 0}
/* ログイン・登録 */
body.auth{display:flex;justify-content:center}
.auth-box{width:100%;max-width:340px;padding-block:56px}
.auth-form{display:flex;flex-direction:column;gap:6px;margin-top:28px;padding-top:24px;border-top:1px solid var(--rule)}
.auth-form h2{color:var(--pink);font-weight:500;font-size:1.05rem;margin:0 0 10px}
.auth-form label{color:var(--muted);font-size:.85rem;margin-top:8px}
.auth-form input{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:3px;padding:10px;font:inherit}
.auth-form button{margin-top:20px;border:0;background:var(--pink);color:var(--on-pink);border-radius:3px;padding:11px;font:inherit;cursor:pointer}
.auth-form button:hover{background:var(--pink-deep)}
.auth-form .alt{text-align:center;font-size:.85rem;color:var(--muted);margin-top:14px}
.auth-form a{color:var(--pink-deep)}
.err{background:var(--pink-soft);color:var(--pink-deep);padding:8px 10px;border-radius:3px;font-size:.85rem;margin:0}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
li{position:relative}
li .acts{position:absolute;right:2px;top:3px;background:var(--pink-soft);border-radius:3px}
@media (hover:none){li label{padding-right:64px}}

/* 表示切り替え */
.views{display:flex;justify-content:center;gap:0;margin:24px auto 28px;padding-top:22px;border-top:1px solid var(--rule);max-width:420px}
.views button{border:1.5px solid var(--pink);background:var(--surface);color:var(--pink-deep);font:inherit;font-size:.9rem;padding:6px 26px;cursor:pointer}
.views button:first-child{border-radius:999px 0 0 999px}
.views button:last-child{border-radius:0 999px 999px 0;border-left:0}
.views button[aria-selected="true"]{background:var(--pink);color:var(--on-pink)}

/* メモ：色（タブの小さな丸だけに使う） */
.tone-pink{--tone:#f0b3c0}
.tone-cream{--tone:#e6c98f}
.tone-sage{--tone:#a9c7a2}
.tone-sky{--tone:#9dbfd8}
.tone-lilac{--tone:#bfaed6}

/* メモ：タブ（To Doのカードと同じトーン） */
.memo-tabs{display:flex;gap:6px;align-items:flex-end;overflow-x:auto;padding:0 2px;max-width:860px;margin:0 auto;scrollbar-width:thin}
.mtab{flex:0 0 auto;max-width:190px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-bottom:0;background:var(--bg);color:var(--muted);font:inherit;font-size:.85rem;padding:8px 16px 8px 13px;border-radius:3px 3px 0 0;cursor:pointer;transition:color .15s,background .15s}
.mtab::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--tone,var(--line))}
.mtab span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtab:hover{color:var(--ink);background:var(--surface)}
.mtab[aria-selected="true"]{background:var(--surface);color:var(--pink);position:relative;z-index:2;margin-bottom:-1px;padding-bottom:9px;box-shadow:inset 0 3px 0 var(--pink)}
.mtab.add{background:transparent;border:1.5px dashed var(--pink-light);border-bottom:0;color:var(--pink-deep);font-size:1rem;padding:6px 14px}
.mtab.add::before{display:none}

/* メモ：重なった紙（白いカード） */
.memo-stack{position:relative;max-width:860px;margin:0 auto 12px}
.memo-stack::before,.memo-stack::after{content:"";position:absolute;inset:0;border-radius:3px;background:var(--surface);border:1px solid var(--line);display:none}
.memo-stack.depth-1::before,.memo-stack.depth-2::before{display:block;transform:translate(6px,6px)}
.memo-stack.depth-2::after{display:block;transform:translate(12px,12px);z-index:-1}
.memo-stack::before{z-index:0}
.memo-sheet{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);border-radius:0 3px 3px 3px;padding:22px 24px 14px;display:flex;flex-direction:column;gap:10px}
.memo-title{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--pink);font:inherit;font-size:1.05rem;font-weight:500;padding:2px 0 10px}
.memo-title::placeholder{color:var(--pink-light)}
.memo-title:focus{outline:none;border-bottom-color:var(--pink)}
.memo-body{border:0;background:transparent;color:var(--ink);font:inherit;font-size:.92rem;line-height:1.9;resize:none;min-height:320px;padding:0;
  background-image:linear-gradient(transparent calc(1.9em - 1px),var(--line) calc(1.9em - 1px));background-size:100% 1.9em;background-attachment:local}
.memo-body:focus{outline:none}
.memo-foot{display:flex;align-items:center;gap:14px;font-size:.78rem;color:var(--muted);flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line)}
.memo-foot #memo-time{margin-right:auto;font-variant-numeric:tabular-nums}
.memo-tones{display:flex;gap:6px}
.swatch{width:16px;height:16px;border-radius:50%;border:0;background:var(--tone);cursor:pointer;padding:0}
.swatch[aria-pressed="true"]{outline:2px solid var(--pink);outline-offset:2px}
@media (max-width:520px){.memo-sheet{padding:18px 16px 12px}.mtab{max-width:140px;padding:7px 12px 7px 10px}}

/* 使い方（ログイン前） */
.guide{position:fixed;inset:0;z-index:50;background:rgba(74,64,56,.38);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.guide-card{background:var(--bg);color:var(--ink);width:100%;max-width:560px;border-radius:6px;padding:26px 28px 20px;box-shadow:0 10px 40px rgba(0,0,0,.25);border-top:4px solid var(--pink);max-height:calc(100vh - 32px);overflow-y:auto}
.guide-en{font-family:"Quicksand","Yu Gothic",sans-serif;letter-spacing:.22em;font-size:.68rem;color:var(--muted);margin:0}
.guide-card h2{font-weight:500;color:var(--pink);font-size:1.1rem;margin:4px 0 14px}
.slide figure{margin:0;height:290px;background:var(--pink-soft);border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:22px}
.slide img{max-width:100%;max-height:100%;object-fit:contain;border-radius:3px;box-shadow:0 2px 10px rgba(74,64,56,.15);background:#fff}
.slide h3{font-weight:500;font-size:.98rem;margin:16px 0 4px}
.slide p{font-size:.84rem;color:var(--muted);line-height:1.8;margin:0;min-height:4.5em}
.dots{display:flex;justify-content:center;gap:7px;margin:14px 0 4px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--pink)}
.guide-btns{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.guide-btns .spacer{flex:1}
.guide-btns button:not(.linkbtn){border:1.5px solid var(--pink);background:var(--pink);color:var(--on-pink);border-radius:999px;padding:8px 22px;font:inherit;font-size:.86rem;cursor:pointer;min-width:96px}
.guide-btns .ghost{background:var(--surface)!important;color:var(--pink-deep)!important;border-color:var(--pink-deep)!important}
.guide-btns .never{font-size:.8rem;color:var(--muted)}
@media (max-width:480px){.slide figure{height:200px}.guide-card{padding:20px 18px 16px}.guide-btns{flex-wrap:wrap}.guide-btns .never{order:3;width:100%;text-align:center;margin-top:6px}.guide-btns .spacer{display:none}.guide-btns button:not(.linkbtn){flex:1}}

/* 並べ替え */
.grip{flex:none;border:0;background:transparent;color:var(--line);width:16px;height:28px;margin:3px -4px 0 -2px;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center;border-radius:3px;opacity:0;transition:opacity .15s,color .15s}
.grip svg{width:8px;height:13px}
li:hover .grip,.grip:focus-visible{opacity:1;color:var(--muted)}
.grip:hover{color:var(--pink-deep)}
@media (hover:none){.grip{opacity:1;color:var(--muted)}}
li.dragging{background:var(--pink-soft);box-shadow:0 4px 14px rgba(74,64,56,.15);opacity:.95}
li.dragging .acts{display:none}
body.is-dragging,body.is-dragging *{cursor:grabbing!important;user-select:none}