:root{--bg:#fff;--soft:#F5F8F5;--ink:#17302A;--mute:#5C7068;--line:#E3EAE5;--moss:#2F6B4F;--sage:#8DB596;--mist:#DDEBE3;--sun:#E8B04A;--card:#fff;--sh:0 1px 2px rgba(23,48,42,.05),0 12px 32px -12px rgba(23,48,42,.14)}
@media (prefers-color-scheme:dark){:root{--bg:#0F1B17;--soft:#142320;--ink:#EAF3EE;--mute:#9DB3A8;--line:#233630;--moss:#6FC196;--mist:#1B3028;--card:#14231E}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 'Hanken Grotesk',system-ui,sans-serif;padding-top:env(safe-area-inset-top)}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;line-height:1.1;letter-spacing:-.02em;margin:0}
a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid var(--sage);outline-offset:3px;border-radius:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
header{position:sticky;top:0;z-index:9;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:10px;font:700 21px 'Bricolage Grotesque'}
.logo i{width:28px;height:28px;border-radius:9px 9px 9px 2px;background:linear-gradient(135deg,var(--sage),var(--moss));transition:transform .5s}.logo:hover i{transform:rotate(-12deg)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;font:600 15px 'Hanken Grotesk';padding:12px 22px;border-radius:99px;background:var(--moss);color:var(--bg);transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px var(--moss)}.btn:disabled{opacity:.5;pointer-events:none}.btn.sm{padding:9px 16px;font-size:14px}.btn.del{background:transparent;color:#B4452F;border:1.5px solid var(--line)}
.hero{padding:70px 0 30px;max-width:700px}.hero h1{font-size:clamp(38px,6vw,62px)}.hero p{font-size:19px;color:var(--mute);margin:18px 0 0}
.leaf{display:inline-block;animation:sway 4s ease-in-out infinite;transform-origin:bottom}@keyframes sway{50%{transform:rotate(10deg)}}
section{padding:26px 0 60px}.head h2{font-size:clamp(26px,4vw,36px);margin-bottom:18px}
.tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}.tools input{flex:1;min-width:200px}
.pill{border:1.5px solid var(--line);background:var(--card);color:var(--mute);padding:9px 17px;border-radius:99px;cursor:pointer;font:500 14px 'Hanken Grotesk';transition:.25s}.pill:hover{border-color:var(--sage)}.pill.on{background:var(--moss);border-color:var(--moss);color:var(--bg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:11px;box-shadow:var(--sh);transition:transform .35s,border-color .35s;animation:rise .6s both;animation-delay:calc(var(--n)*50ms)}.card:hover{transform:translateY(-5px);border-color:var(--sage)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cover{height:112px;border-radius:12px;display:grid;place-items:center;font:700 34px 'Bricolage Grotesque'}.c0{background:var(--mist);color:var(--moss)}.c1{background:#D4E6EC;color:#2D6073}.c2{background:#F6E4B8;color:#8A5E10}.c3{background:#E6EBD3;color:#55703A}
.chip{align-self:flex-start;padding:3px 11px;border-radius:99px;background:var(--mist);color:var(--moss);font-size:13px;font-weight:600}.card h3{font-size:18px}.card p,.meta{margin:0;color:var(--mute);font-size:14px}.card .btn{margin-top:auto}
input,textarea,select{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 15px;width:100%;transition:.25s}input:focus,textarea:focus,select:focus{outline:0;border-color:var(--sage);box-shadow:0 0 0 4px var(--mist)}
.empty{padding:46px 24px;text-align:center;color:var(--mute);border:1.5px dashed var(--line);border-radius:20px;grid-column:1/-1}
footer{border-top:1px solid var(--line);background:var(--soft);padding:28px 0;color:var(--mute);text-align:center}
.panel{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.box{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--sh);display:grid;gap:12px}label{font-weight:600;font-size:14px;display:grid;gap:6px}
.drop{border:2px dashed var(--sage);border-radius:22px;background:var(--soft);padding:44px 20px;text-align:center;cursor:pointer;transition:.3s}.drop:hover,.drop.over{background:var(--mist)}.drop b{font:700 22px 'Bricolage Grotesque';display:block}.drop span{color:var(--mute)}
.q{display:grid;gap:8px;margin-top:12px}.qi{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:10px 14px;background:var(--soft);border-radius:12px;position:relative;overflow:hidden}.qi i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--sun);transition:width 1.2s}.qi.done i{width:100%;background:var(--moss)}.qi.bad i{width:100%;background:#B4452F}
.note{padding:14px 18px;border-left:3px solid var(--sun);background:var(--soft);border-radius:0 14px 14px 0;color:var(--mute);font-size:14px}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--ink);color:var(--bg);padding:12px 22px;border-radius:99px;font-weight:600;transition:transform .5s cubic-bezier(.2,.9,.3,1.2);z-index:50}#toast.show{transform:translate(-50%,0)}
@media(max-width:800px){.panel{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}