:root{--ink:#16342e;--muted:#70847e;--line:#dfe9e5;--paper:#f8fbf9;--green:#236154;--mint:#dff1e9;--yellow:#f5bd54;--coral:#ee806a}
*{box-sizing:border-box}
body{margin:0;overflow-x:hidden;color:var(--ink);background:var(--paper);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif}
button,input,select{font:inherit}
[hidden]{display:none!important}
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(360px,500px) minmax(380px,440px);align-items:center;justify-content:center;gap:clamp(45px,9vw,130px);padding:42px;background:radial-gradient(circle at 13% 17%,#dff2e9 0 13%,transparent 29%),radial-gradient(circle at 87% 85%,#f7ead1 0 10%,transparent 24%),#f8fbf9}
.welcome{min-height:510px;display:flex;flex-direction:column}
.brand,.logo{display:flex;align-items:center;gap:11px}
.brand h1{margin:0;font-size:32px;letter-spacing:-1.7px}
.brand p{margin:2px 0 0;color:var(--muted)}
.brand-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:var(--green);box-shadow:0 7px 15px #23615435;color:white;font-size:23px;font-weight:800}
.welcome-copy{margin-top:auto}
.eyebrow,.welcome-badge{color:var(--green);font-size:11px;font-weight:800;letter-spacing:1.4px}
.welcome-copy h2{margin:13px 0 15px;font-size:clamp(37px,4.4vw,52px);line-height:1.19;letter-spacing:-3px}
.welcome-copy p{color:var(--muted);line-height:1.85}
.preview-card{display:flex;align-items:center;gap:10px;width:250px;margin:23px 0 0 44px;padding:13px 14px;border:1px solid #dce8e2;border-radius:13px;background:#fffffff0;box-shadow:0 13px 25px #30554816;font-size:14px;transform:rotate(-2deg)}
.preview-card.second{width:275px;margin:-4px 0 0 112px;transform:rotate(2.4deg)}
.preview-check{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#e1f1ea;color:var(--green);font-size:12px;font-weight:bold}
.preview-card i{margin-left:auto;border-radius:20px;background:#f6e8cc;padding:4px 7px;color:#906820;font-size:10px;font-style:normal}
.second i{background:#f8dfdb;color:#ad6053}
.card{width:min(440px,calc(100vw - 40px));padding:32px;border:1px solid #e1eae6;border-radius:22px;background:#fffffff5;box-shadow:0 24px 70px #173b3020}
.card-heading h2{margin:7px 0 2px;font-size:25px;letter-spacing:-1px}
.card-heading p{margin:0;color:var(--muted);font-size:14px}
.tabs{display:flex;gap:4px;margin:26px 0 20px;padding:4px;border-radius:10px;background:#f0f5f2}
.tabs button,.filters button,.text-btn{border:0;background:transparent;color:var(--muted);cursor:pointer}
.tabs button{flex:1;padding:9px 13px;border-radius:7px;font-size:14px}
.tabs .active{background:#fff;color:var(--green);box-shadow:0 2px 7px #173b3012;font-weight:700}
.card label{display:block;margin:16px 0;color:#506660;font-size:13px;font-weight:650}
.card input{width:100%;margin-top:7px;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:#fcfdfc;color:var(--ink);outline:none;transition:.15s}
.card input:focus{border-color:#579487;box-shadow:0 0 0 3px #dff1e9}
.primary{border:0;border-radius:10px;background:var(--green);padding:11px 17px;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 6px 13px #23615425}
.primary:hover{background:#1b5045}
.card .primary{display:flex;justify-content:space-between;width:100%;margin-top:14px;padding:13px 16px}
.error{min-height:1.2em;margin-bottom:0;color:#b44131;font-size:13px}
.card #auth-note{margin:13px 0 0;color:var(--muted);font-size:12px}
#app{max-width:850px;margin:auto;padding:20px 24px 70px}
header{display:flex;align-items:center;justify-content:space-between;padding:5px 0 32px}
.logo b{font-size:21px}
.logo small{color:var(--muted);border-left:1px solid var(--line);padding-left:10px}
.hero{padding:24px 27px;border-radius:18px;background:linear-gradient(120deg,#e1f4ed,#eef6e6)}
.hero p{margin:0;color:var(--muted)}
.hero h2{margin:7px 0 0;font-size:27px;letter-spacing:-1px}
.filters{display:flex;gap:5px;overflow-x:auto;margin:24px 0 15px}
.filters button{white-space:nowrap;padding:8px 12px;border-radius:20px}
.filters .active{background:var(--mint);color:var(--green);font-weight:700}
.composer{display:flex;gap:8px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff}
.composer select{border:0;background:#f2f6f3;border-radius:7px;padding:7px;color:var(--ink)}
.composer input{flex:1;min-width:0;border:0;outline:0;padding:6px}
.list{border-top:1px solid var(--line)}
.item{display:flex;align-items:center;gap:10px;min-height:51px;border-bottom:1px solid var(--line);background:transparent}
.item.child{margin-left:var(--indent);position:relative}
.item.child:before{content:"";position:absolute;left:-18px;top:calc(50% - 9px);width:9px;height:9px;border-left:1px solid #bed0c8;border-bottom:1px solid #bed0c8}
.check{display:grid;place-items:center;width:22px;height:22px;padding:0;border:1.5px solid #b4c8c0;border-radius:50%;background:white;cursor:pointer;flex:none;line-height:1}
.done .check{background:var(--green);border-color:var(--green)}
.done .check:after{content:"✓";transform:translateY(-.5px);color:white;font-size:13px;font-weight:bold;line-height:1}
.kind{width:8px;height:8px;border-radius:50%;background:var(--yellow);flex:none}
.kind.idea{background:var(--coral)}
.kind.shopping{background:#6c9ad0}
.item-text{flex:1;min-width:0;border:0;background:transparent;outline:0;padding:10px 0;color:var(--ink)}
.due{white-space:nowrap;color:var(--muted);font-size:11px}
.overdue{background:#fff1ef}
.overdue .due{color:#bd4939;font-weight:750}
.archive-context{opacity:.45;filter:grayscale(.55)}
.archive-context .item-text{color:var(--muted)}
.done .item-text{text-decoration:line-through;color:var(--muted)}
.edit,.sub,.archive{border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer;opacity:.65}
.edit:hover,.sub:hover,.archive:hover{opacity:1;color:var(--green)}
.edit{font-size:18px}
.move-menu{position:relative;flex:none}
.move-menu summary{list-style:none;color:var(--muted);font-size:19px;line-height:1;cursor:pointer;opacity:.65}
.move-menu summary::-webkit-details-marker{display:none}
.move-menu[open] summary{color:var(--green);opacity:1}
.move-menu div{position:absolute;z-index:3;right:0;top:25px;display:grid;min-width:138px;padding:5px;border:1px solid var(--line);border-radius:9px;background:var(--paper);box-shadow:0 10px 25px #173b3030}
.move-menu button{border:0;border-radius:5px;background:transparent;padding:7px 9px;color:var(--ink);font-size:12px;text-align:left;cursor:pointer}
.move-menu button:hover{background:var(--mint);color:var(--green)}
.move-menu summary:active{cursor:grabbing}
.item.dragging{opacity:.35}
.item.drop-before{box-shadow:inset 0 3px 0 var(--green)}
.item.drop-after{box-shadow:inset 0 -3px 0 var(--green)}
.close{border:0;background:transparent;color:var(--muted);font-size:25px;cursor:pointer}
dialog{width:min(440px,calc(100vw - 34px));padding:0;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 22px 70px #0006}
dialog::backdrop{background:#10231c88;backdrop-filter:blur(3px)}
#edit-form{padding:24px}
#edit-form header{padding:0 0 20px;align-items:start}
#edit-form h2{margin:5px 0 0;font-size:22px}
#edit-form label{display:block;color:var(--muted);font-size:12px;font-weight:700}
#edit-form input,#edit-form select{width:100%;margin-top:7px;padding:11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);outline:0}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:26px}
.inline-child-form{display:flex;align-items:center;gap:8px;margin:6px 0 6px var(--indent);padding:8px 10px;border:1px dashed #9abdb1;border-radius:10px;background:#eef7f2}
.inline-child-form input{flex:1;min-width:0;border:0;border-bottom:1px solid #aacbbf;background:transparent;padding:7px 4px;color:var(--ink);outline:none}
.inline-child-form .primary{padding:8px 12px;font-size:13px}
.inline-child-form .text-btn{font-size:12px}
.empty{text-align:center;padding:54px 0;color:var(--muted);line-height:1.8}
@media(max-width:760px){.auth{display:block;padding:28px 20px}
.welcome{min-height:0;margin:0 auto 34px;max-width:440px}
.welcome-copy{margin-top:45px}
.welcome-copy h2{font-size:38px}
.preview-card{display:none}
.card{margin:auto}
}
@media(max-width:500px){#app{padding:15px 14px 45px}
header{padding-bottom:20px}
.hero{padding:20px}
.hero h2{font-size:24px}
.composer{flex-wrap:wrap}
.composer input{width:calc(100% - 70px);order:3}
.composer .primary{order:4;padding:9px 13px}
.item{gap:8px}
.item.child{margin-left:var(--mobile-indent)}
.inline-child-form{margin-left:var(--mobile-indent)}
.archive{display:none}
.due{display:none}
.auth{padding:22px 17px}
.welcome-copy{margin-top:34px}
.welcome-copy p{font-size:14px}
.card{padding:25px 21px}
}
@media(prefers-color-scheme:dark){
  :root{--ink:#e6f0eb;--muted:#a9bbb4;--line:#31463f;--paper:#101916;--green:#67b29e;--mint:#1d3d35;--yellow:#f1c566;--coral:#f19380}
  body{background:var(--paper)}
  .auth{background:radial-gradient(circle at 13% 17%,#183b32 0 13%,transparent 29%),radial-gradient(circle at 87% 85%,#382d1c 0 10%,transparent 24%),#101916}
  .brand-mark{background:#438f7d;box-shadow:0 7px 17px #0007}
  .welcome-copy h2{color:#f0f7f3}
  .preview-card{border-color:#385048;background:#1b2823eF;box-shadow:0 13px 25px #0005}
  .preview-check{background:#214c40;color:#9ce1ce}
  .preview-card i{background:#463a21;color:#f2cd78}
  .second i{background:#4b2d2d;color:#f4a295}
  .card{border-color:#33473f;background:#19241feF;box-shadow:0 24px 70px #0008}
  .card input{border-color:#385048;background:#111a16;color:var(--ink)}
  .card input::placeholder{color:#718780}
  .card input:focus{border-color:#6db9a5;box-shadow:0 0 0 3px #2c5c50}
  .tabs{background:#111a16}
  .tabs .active{background:#263832;color:#9ce1ce;box-shadow:none}
  .primary{background:#438f7d;box-shadow:0 6px 13px #0005}
  .primary:hover{background:#55a891}
  .hero{background:linear-gradient(120deg,#193a31,#273b29)}
  .composer{border-color:var(--line);background:#19241f}
  .composer select{background:#263832;color:var(--ink)}
  .check{border-color:#5e786f;background:#19241f}
  .overdue{background:#402a29}
  .overdue .due{color:#ffac9d}
  dialog{background:#19241f;border-color:#385048}
  #edit-form input,#edit-form select{background:#111a16;border-color:#385048;color:var(--ink)}
  .inline-child-form{border-color:#497164;background:#18352d}
  .inline-child-form input{border-color:#547c6e;color:var(--ink)}
  .move-menu div{background:#19241f;border-color:#385048;box-shadow:0 10px 25px #0008}
  .item.child:before{border-color:#4b675d}
  .sub:hover,.archive:hover{color:#9ce1ce}
}