:root{
    --bg:#f8f3e8;--card:#ffffff;--text:#2c3a39;--muted:#9aa8a3;
    --accent:#3f8f8a;--accent-dark:#1f5f5b;--accent-soft:#d9ede9;
    --done:#3f8f8a;--done-soft:#ece9dc;--line:#e8e0cc;--danger:#b8392b;
    --shadow:0 2px 8px rgba(44,58,57,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
    font:18px/1.4 -apple-system,system-ui,"Segoe UI","Heebo",Arial,sans-serif;overflow-x:hidden}
header{background:linear-gradient(135deg,#4a9d97,#357f7a);color:#fff;
    padding:calc(env(safe-area-inset-top) + 18px) 16px 20px;text-align:center;
    border-radius:0 0 26px 26px;box-shadow:0 4px 14px rgba(31,95,91,.25)}
h1{margin:0;font-size:24px;font-weight:700;letter-spacing:.2px}
#banner{margin:12px 4% 0;background:#fff1d6;color:#7a5410;
    border-radius:12px;padding:10px 14px;text-align:center;font-size:15px}
main{padding:16px 4% calc(120px + env(safe-area-inset-bottom))}
ul{list-style:none;margin:0;padding:0}
li{display:flex;align-items:center;gap:14px;background:var(--card);
    border-radius:18px;margin-bottom:10px;padding:8px 14px;min-height:68px;
    box-shadow:var(--shadow);transition:background .15s}
li.done{background:var(--done-soft);box-shadow:none}
.check{flex:none;width:44px;height:44px;border-radius:50%;border:2.5px solid var(--accent);
    background:#fff;color:#fff;font-size:24px;font-weight:700;line-height:1;padding:0}
li.done .check{background:var(--done);border-color:var(--done)}
.label{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
    min-height:52px;justify-content:center;background:none;border:0;text-align:start;
    font:inherit;font-size:19px;font-weight:600;color:inherit;padding:0}
.label small{font-size:14px;font-weight:500;color:var(--accent-dark);
    background:var(--accent-soft);padding:2px 10px;border-radius:999px}
li.done .label{text-decoration:line-through;color:var(--muted);font-weight:500}
li.done .label small{color:var(--muted);background:#fff}
#empty{text-align:center;color:var(--muted);margin-top:60px;font-size:20px}
#add{position:fixed;inset-inline-start:20px;bottom:calc(22px + env(safe-area-inset-bottom));
    width:68px;height:68px;border-radius:50%;border:0;color:#fff;font-size:40px;line-height:1;
    background:linear-gradient(135deg,#4a9d97,#357f7a);box-shadow:0 6px 16px rgba(31,95,91,.4)}
#add:active{transform:scale(.95)}
dialog{border:0;border-radius:24px;padding:20px;width:min(92vw,440px);
    background:var(--bg);color:var(--text);box-shadow:0 12px 40px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(44,58,57,.45)}
#name,#amount{width:100%;font:inherit;padding:15px;border:2px solid var(--line);
    border-radius:14px;margin-bottom:12px;background:#fff;color:var(--text)}
#name:focus,#amount:focus{outline:none;border-color:var(--accent)}
.kinds{display:flex;gap:8px;margin-bottom:12px}
.kinds label{flex:1}
.kinds input{position:absolute;opacity:0}
.kinds span{display:block;text-align:center;padding:14px 0;border:2px solid var(--line);
    border-radius:14px;background:#fff;color:var(--muted)}
.kinds input:checked+span{border-color:var(--accent);background:var(--accent-soft);
    color:var(--accent-dark);font-weight:700}
.actions{display:flex;gap:8px;margin-top:4px}
.actions button{flex:1;font:inherit;padding:15px 0;border-radius:14px;
    border:2px solid var(--line);background:#fff;color:var(--text)}
.actions .primary{background:var(--accent);border-color:var(--accent);color:#fff;flex:2;font-weight:700}
.actions .danger{color:var(--danger);border-color:#f3d4cf}
#stepper{display:flex;direction:ltr;align-items:center;gap:8px;margin-bottom:12px}
#stepper button{flex:none;width:56px;height:56px;border-radius:14px;border:2px solid var(--accent);
    background:#fff;color:var(--accent-dark);font-size:30px;line-height:1;padding:0}
#stepper button:active{background:var(--accent-soft)}
#stepper #amount{flex:1;min-width:0;margin:0;height:56px;text-align:center;font-size:22px;font-weight:600}
#stepper[hidden]{display:none}