:root{--p:#2f9e6e;--p2:#7bd389;--acc:#ffb347;--bg:#f4fbf6;--card:#fff;--ink:#1d3b2f;--mut:#6b8579;--line:#e3efe7;--r:20px;--sh:0 10px 30px -12px rgba(30,80,55,.25)}
body.t-berry{--p:#c2417a;--p2:#f59ac0;--acc:#ffd166;--bg:#fff5f9;--ink:#43172b;--mut:#8f6176;--line:#f6e1ea}
body.t-ocean{--p:#2878c8;--p2:#7cc4f5;--acc:#ffcf5c;--bg:#f3f8fe;--ink:#14304d;--mut:#617a94;--line:#e1ebf6}
body.t-sunset{--p:#e06c2b;--p2:#ffb38a;--acc:#8ac926;--bg:#fff8f2;--ink:#46230f;--mut:#93705c;--line:#f6e6da}
body.t-night{--p:#7bd389;--p2:#2f9e6e;--acc:#ffb347;--bg:#0f1c17;--card:#18291f;--ink:#e6f4ea;--mut:#9bb5a6;--line:#24392d}
*{box-sizing:border-box}html,body{margin:0}body{font-family:Nunito,system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;
background-image:radial-gradient(circle at 10% -10%,color-mix(in srgb,var(--p2) 35%,transparent),transparent 40%),radial-gradient(circle at 110% 10%,color-mix(in srgb,var(--acc) 25%,transparent),transparent 35%);background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}
.splash{display:grid;place-items:center;height:100vh;font-size:64px;animation:bob 1.2s infinite ease-in-out}
@keyframes bob{50%{transform:translateY(-12px) rotate(-6deg)}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
.hidden{display:none!important}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 18px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-weight:900;font-size:22px;display:flex;gap:6px;align-items:center;cursor:pointer;color:var(--p)}
.grow{flex:1}
.btn{border:0;border-radius:14px;padding:11px 18px;font-weight:800;cursor:pointer;background:var(--p);color:#fff;box-shadow:0 6px 16px -8px var(--p);transition:.15s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:2px solid var(--line)}
.btn.danger{background:#e5484d;box-shadow:none}.btn.sm{padding:7px 12px;font-size:14px;border-radius:10px}
.iconbtn{border:0;background:var(--card);width:42px;height:42px;border-radius:14px;cursor:pointer;font-size:20px;box-shadow:var(--sh);display:grid;place-items:center}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,var(--p2),var(--p));color:#fff;display:grid;place-items:center;font-weight:900;cursor:pointer;flex:none}
.avatar.lg{width:96px;height:96px;font-size:36px}
.wrap{max-width:1100px;margin:0 auto;padding:20px 18px 100px;animation:pop .3s}
.hero{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:6px 0 18px}
.hero h1{margin:0;font-size:clamp(24px,4vw,34px);font-weight:900}.hero p{margin:2px 0 0;color:var(--mut)}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{border:2px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;font-weight:800;cursor:pointer}
.chip.on{background:var(--p);border-color:var(--p);color:#fff}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media(max-width:700px){.quick{grid-template-columns:repeat(2,1fr)}}
.qa{border:0;border-radius:var(--r);padding:20px 14px;cursor:pointer;color:#fff;text-align:left;box-shadow:var(--sh);transition:.2s;position:relative;overflow:hidden;min-height:118px}
.qa:hover{transform:translateY(-3px) rotate(-.5deg)}.qa .e{font-size:34px;display:block}.qa b{font-size:19px;display:block;margin-top:6px}.qa small{opacity:.9}
.qa::after{content:"";position:absolute;right:-30px;bottom:-30px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.18)}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:8px 0 12px}.sec-h h2{margin:0;font-size:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--sh);border:1px solid var(--line);animation:pop .3s;position:relative}
.card h3{margin:0 0 10px;font-size:17px;display:flex;gap:8px;align-items:center}
.card .rm{position:absolute;top:10px;right:10px;border:0;background:transparent;cursor:pointer;opacity:.4;font-size:16px}.card .rm:hover{opacity:1}
.big{font-size:34px;font-weight:900;color:var(--p)}.mut{color:var(--mut)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.stats div{background:var(--bg);border-radius:14px;padding:10px 4px}.stats b{display:block;font-size:22px}
.add-w{border:3px dashed var(--line);background:transparent;box-shadow:none;display:grid;place-items:center;min-height:150px;cursor:pointer;color:var(--mut);font-weight:800;font-size:17px}
.add-w:hover{border-color:var(--p);color:var(--p)}
.menu{position:fixed;inset:0 0 0 auto;width:min(340px,90vw);background:var(--card);z-index:50;box-shadow:-20px 0 50px rgba(0,0,0,.2);transform:translateX(105%);transition:.25s;overflow:auto;padding:18px}
.menu.open{transform:none}.scrim{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:40}
.menu details{border-bottom:1px solid var(--line);padding:6px 0}.menu summary{font-weight:900;cursor:pointer;padding:10px 6px;list-style:none;display:flex;justify-content:space-between}
.menu summary::after{content:"▾";color:var(--mut)}.menu details[open] summary::after{content:"▴"}
.mi{display:flex;gap:10px;align-items:center;width:100%;border:0;background:transparent;padding:10px 12px;border-radius:12px;cursor:pointer;text-align:left;font-weight:700}
.mi:hover{background:var(--bg)}.mi span:first-child{font-size:20px;width:26px;text-align:center}
.modal{position:fixed;inset:0;background:rgba(10,30,20,.45);z-index:60;display:grid;place-items:center;padding:16px;backdrop-filter:blur(3px)}
.modal-card{background:var(--card);border-radius:24px;width:min(560px,100%);max-height:92vh;overflow:auto;padding:24px;position:relative;animation:pop .2s}
.x{position:absolute;top:14px;right:14px;border:0;background:var(--bg);width:34px;height:34px;border-radius:50%;cursor:pointer}
label{display:block;font-weight:800;font-size:14px;margin:12px 0 5px}
input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--bg);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--p)}textarea{min-height:80px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.list{display:flex;flex-direction:column;gap:8px}.li{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--bg);cursor:pointer}
.li:hover{outline:2px solid var(--p2)}.li .ic{font-size:22px}.li .t{flex:1;min-width:0}.li .t b{display:block}.li .t small{color:var(--mut)}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:14px;font-weight:800;z-index:99;transition:.3s}
.toast.show{transform:translate(-50%,0)}
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}@media(max-width:850px){.auth{grid-template-columns:1fr}.auth .pitch{display:none}}
.pitch{background:linear-gradient(140deg,var(--p),#1c6b4a);color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:center}
.pitch h1{font-size:48px;margin:0 0 10px;font-weight:900}.pitch ul{list-style:none;padding:0;font-size:18px;line-height:2}
.authbox{display:grid;place-items:center;padding:30px}.authbox .card{width:min(420px,100%);padding:30px}
.tabs{display:flex;background:var(--bg);border-radius:14px;padding:4px;margin-bottom:10px}.tabs button{flex:1;border:0;background:transparent;padding:10px;border-radius:10px;font-weight:800;cursor:pointer}
.tabs button.on{background:var(--card);box-shadow:var(--sh)}
.hint{font-size:13px;margin-top:4px}.ok{color:var(--p)}.bad{color:#e5484d}
.wpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}.wp{border:2px solid var(--line);border-radius:16px;padding:12px;cursor:pointer;background:var(--card);text-align:left}
.wp.on{border-color:var(--p);background:color-mix(in srgb,var(--p2) 18%,var(--card))}.wp b{display:block}.wp small{color:var(--mut)}
canvas{width:100%;height:160px}.bar{height:10px;border-radius:9px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--p2),var(--p))}
.fab{position:fixed;right:20px;bottom:20px;width:62px;height:62px;border-radius:50%;font-size:30px;border:0;background:var(--acc);color:var(--ink);box-shadow:var(--sh);cursor:pointer;z-index:30}
.empty{text-align:center;padding:30px;color:var(--mut)}.empty .e{font-size:48px}
.swatches{display:flex;gap:10px}.sw{width:40px;height:40px;border-radius:50%;border:3px solid transparent;cursor:pointer}.sw.on{border-color:var(--ink)}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;background:var(--brand,#2fbf71);color:#fff;margin-left:4px;vertical-align:middle}
#ap details{border-bottom:1px solid rgba(0,0,0,.08);padding:10px 0}#ap details summary{cursor:pointer;font-size:17px}
.perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 14px}
.fab.fb{right:auto;left:18px;background:#8e7cf0}
.li select,.li input{margin:4px}