:root{
  --bg:#1a130e;--card:#2a1f17;--card2:#3a2b20;--line:rgba(255,214,170,.09);
  --tx:#fff2e2;--mut:#c9ad92;--acc1:#ffbd6e;--acc2:#ff8a5c;--ok:#9ad47f;--mid:#ffc857;--low:#ff7a66;
  --r:20px;--safe-b:env(safe-area-inset-bottom,0px);
  --glow:rgba(255,168,92,.22);--shadow:0 8px 24px rgba(0,0,0,.35);--key:0 2px 0 rgba(0,0,0,.28),inset 0 1px 0 rgba(255,235,210,.06);
  --wood1:#a8703f;--wood2:#6b4226;--glass:rgba(42,31,23,.86);--ontx:#2b1a0e;
}
[data-theme=light]{
  --bg:#f5eadc;--card:#fffaf2;--card2:#f2e3cf;--line:rgba(110,70,30,.12);
  --tx:#3d2a1c;--mut:#93775f;--acc1:#ffa552;--acc2:#f2705a;--ok:#6dbb5a;--mid:#f0b23a;--low:#e8604c;
  --glow:rgba(255,190,110,.45);--shadow:0 8px 22px rgba(120,80,40,.16);--key:0 2px 0 rgba(140,95,50,.18),inset 0 1px 0 #fff;
  --wood1:#c58a52;--wood2:#8a5a33;--glass:rgba(255,250,242,.9);--ontx:#3d2a1c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
input,textarea{user-select:text;-webkit-user-select:text}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font-family:Nunito,Manrope,-apple-system,"SF Pro Text",Roboto,"Segoe UI",sans-serif;font-weight:700;overflow:hidden;touch-action:manipulation}
body{background:radial-gradient(110% 55% at 50% -8%,var(--glow) 0%,transparent 62%),var(--bg)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#app{position:relative;z-index:1}
#app{max-width:480px;margin:0 auto;height:100%;display:flex;flex-direction:column}
button{font-family:inherit;color:inherit;border:0;cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--mut);font-weight:600}

/* header */
#hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 6px}
.who{display:flex;align-items:center;gap:10px}
#homeTitle{font-size:17px;font-weight:800;letter-spacing:-.2px}
#homeSub{font-size:12px;color:var(--mut);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.whot{min-width:0}
.hr{display:flex;align-items:center;gap:8px}
.iconbtn{width:34px;height:34px;border-radius:50%;background:var(--card2);border:1px solid var(--line);font-weight:800;font-size:15px;color:var(--mut)}
.ring{--p:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--acc1) calc(var(--p)*1%),rgba(255,255,255,.08) 0);position:relative}
.ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card)}
.ring span{position:relative;font-weight:900;font-size:14px}
.pill{background:var(--card2);border:1px solid var(--line);padding:7px 12px;border-radius:999px;font-size:14px}
#visitBanner{margin:0 12px 6px;padding:8px 8px 8px 14px;border-radius:14px;background:linear-gradient(90deg,#3b2a6b,#5b2a5e);display:flex;justify-content:space-between;align-items:center;font-size:13px}
#visitBanner button{background:rgba(255,255,255,.15);padding:7px 12px;border-radius:10px;font-size:13px}

/* pages */
.page{flex:1;overflow-y:auto;padding:4px 12px calc(84px + var(--safe-b));display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.page h3{margin:8px 4px 0;font-size:14px;color:var(--mut);font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}

/* rooms segmented */
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--card);border:1px solid var(--line);padding:4px;border-radius:16px}
.seg button{position:relative;background:transparent;border-radius:12px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:1px;transition:.2s}
.seg .ri{font-size:18px;line-height:1.1}
.seg .rn{font-size:11px;color:var(--mut)}
.seg button.on{background:linear-gradient(135deg,var(--acc1),var(--acc2));box-shadow:0 4px 14px rgba(255,93,143,.35)}
.seg button.on .rn{color:#fff}
.seg .dot{position:absolute;top:3px;right:6px;min-width:15px;height:15px;border-radius:8px;background:#fff;color:#2b1d2e;font-size:10px;display:grid;place-items:center;font-weight:900}

/* stage */
#stage{position:relative;width:100%;aspect-ratio:120/150;max-height:44vh;margin:0 auto;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px var(--line);flex-shrink:0}
#cv{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block;touch-action:none}
#bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bub{position:absolute;transform:translate(-50%,-100%);background:#fff;color:#2b1d2e;padding:6px 9px;font-size:12px;font-weight:800;border-radius:12px 12px 12px 4px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.25);animation:pop .25s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:translate(-50%,-80%) scale(.4);opacity:0}}
#modeBar{position:absolute;left:8px;right:8px;top:8px;display:flex;justify-content:space-between;align-items:center;background:rgba(15,12,23,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 6px 6px 12px;border-radius:14px;font-size:13px}
#modeBar button{background:rgba(255,255,255,.15);width:30px;height:30px;border-radius:10px;font-size:14px}
#toast{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(15,12,23,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 14px;font-size:13px;border-radius:999px;white-space:nowrap;animation:pop .25s}

/* cats */
#cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.catcard{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px 10px;text-align:left;transition:.2s}
.catcard.on{border-color:transparent;background:linear-gradient(var(--card2),var(--card2)) padding-box,linear-gradient(135deg,var(--acc1),var(--acc2)) border-box;border:2px solid transparent}
.catcard .ava{image-rendering:pixelated;flex-shrink:0}
.catcard .ct{display:flex;flex-direction:column;min-width:0}
.catcard b{font-size:15px;font-weight:900;white-space:nowrap}
.catcard small{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* stats */
#stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.stat{display:flex;align-items:center;gap:8px}
.stat .si{width:30px;height:30px;border-radius:10px;background:var(--card2);display:grid;place-items:center;font-size:15px;flex-shrink:0}
.stat .sb{flex:1;min-width:0}
.stat .sl{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);margin-bottom:4px}
.stat .sl b{color:var(--tx)}
.track{height:7px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.track i{display:block;height:100%;border-radius:5px;background:var(--ok);transition:width .4s}
.stat[data-lv=mid] .track i{background:var(--mid)}
.stat[data-lv=low] .track i{background:var(--low)}
.stat[data-lv=low] .si{animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(255,97,97,.25)}}

/* home chips */
#home{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:12px;color:var(--mut)}
.chip b{color:var(--tx);margin-left:2px}
.chip[data-lv=low]{border-color:rgba(255,97,97,.5);color:#ffb3b3}

/* actions */
#actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.act{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .1s,background .2s}
.act .ai{font-size:22px;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--card2)}
.act .al{font-size:11.5px;color:var(--tx);text-align:center;line-height:1.15}
.act:active{transform:scale(.95);background:var(--card2)}
.act:disabled{opacity:.4}

/* buttons */
.btn{background:var(--card2);padding:11px 16px;border-radius:14px;font-size:14px;font-weight:800}
.btn.primary{background:linear-gradient(135deg,var(--acc1),var(--acc2));box-shadow:0 6px 16px rgba(255,93,143,.3)}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:12px}
.btn:active{transform:scale(.97)}
.row{display:flex;gap:8px;margin-top:10px}.row .btn{flex:1}

/* friends */
.big{font-size:36px;margin-bottom:4px}
.empty,.invite{text-align:center}
.empty p,.invite p,.help p{color:var(--mut);font-weight:600;font-size:13.5px;line-height:1.45;margin:6px 0}
.empty.small{color:var(--mut);font-weight:600;font-size:14px}
.friend{display:flex;align-items:center;gap:10px;padding:10px}
.fa{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#6a5acd,#c056c0);display:grid;place-items:center;font-weight:900;font-size:17px;overflow:hidden;flex-shrink:0}
.fa img{width:100%;height:100%;object-fit:cover}
.fi{flex:1;min-width:0;display:flex;flex-direction:column}
.fi small{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600}
.gbi{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding-bottom:7px}
.gbi:last-child{border:0;padding:0}
.gbi small{color:var(--mut);font-size:11px}

/* album */
.album{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.album img,.album .lock{width:100%;aspect-ratio:3/4;image-rendering:pixelated;border-radius:12px;background:var(--card2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;color:var(--mut);object-fit:cover}
.album .lock small{font-size:11px}
.bigimg{width:100%;image-rendering:pixelated;border-radius:14px}
.help{font-size:14px}

/* tabbar */
#tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--safe-b));width:calc(100% - 24px);max-width:456px;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(27,22,38,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:5}
#tabbar button{background:transparent;padding:6px 0;border-radius:16px;font-size:10.5px;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:2px}
#tabbar button{position:relative;font-weight:700}
#tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:.2s}
#tabbar button.on{color:var(--tx);background:rgba(255,255,255,.07)}
#tabbar button.on svg{stroke:var(--acc1);transform:translateY(-1px)}
#tabbar button.badge::after{content:"";position:absolute;top:5px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--acc2);box-shadow:0 0 0 2px #1b1626}

/* sheet */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;z-index:9;animation:fade .2s}
@keyframes fade{from{opacity:0}}
#modalBox{background:var(--card);border:1px solid var(--line);border-radius:26px 26px 0 0;padding:10px 18px calc(18px + var(--safe-b));max-width:480px;width:100%;max-height:85vh;overflow:auto;text-align:center;animation:up .3s cubic-bezier(.2,1.2,.4,1)}
@keyframes up{from{transform:translateY(100%)}}
.grab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);margin:0 auto 12px}
#modalBody{font-size:15px;line-height:1.45}
#modalBody p{color:var(--mut);font-weight:600;font-size:14px}
#modalBody img:not(.bigimg){max-width:60%;image-rendering:pixelated;border-radius:12px;margin-top:8px}
#modalClose{width:100%;margin-top:14px}

/* shop */
.shophead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.shophead > div > b{font-size:18px;font-weight:900;display:block}
.shophead .pill{white-space:nowrap}
.shophead small{font-size:12px}
.item{display:flex;align-items:center;gap:12px;padding:10px 12px}
.item .ii{width:48px;height:48px;border-radius:14px;background:var(--card2);display:grid;place-items:center;font-size:26px;flex-shrink:0}
.item .it{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item .it b{font-size:15px;font-weight:900}
.item .it small{font-size:12px;color:var(--mut);font-weight:600;line-height:1.3}
.item .it em{font-style:normal;font-size:11px;color:var(--acc1);font-weight:800}
.item .btn{flex-shrink:0;min-width:64px}
.btn:disabled{opacity:.45}
.btn.ghost{background:transparent;border:1px solid var(--line);width:100%;margin-top:8px}
.picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.picker .btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px}
.picker .btn small{font-size:11px;color:var(--mut);font-weight:700}
.picker .pi{font-size:26px}

/* ===== v3 ===== */
.catcard .ct small.rm{opacity:.75}
.catcard b{display:flex;align-items:center;gap:4px;font-weight:800}
.catcard .nm{overflow:hidden;text-overflow:ellipsis}
.catcard .me{font-size:15px}
.catcard.add{justify-content:flex-start;border-style:dashed;background:transparent}
.catcard .plus{width:40px;height:30px;display:grid;place-items:center;font-size:24px;color:var(--acc1);font-weight:800}
#actions{display:flex;flex-direction:column;gap:10px}
.grp .gh{font-size:12px;color:var(--mut);font-weight:700;margin:0 4px 6px;letter-spacing:.2px}
.grp .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.act{padding:9px 2px 8px;border-radius:15px}
.act .ai{font-size:20px;width:38px;height:38px;border-radius:12px}
.act .al{font-size:11.5px;font-weight:700}
.shopseg{grid-template-columns:repeat(5,1fr)}
.center{text-align:center}
.card.small{font-size:12.5px;line-height:1.5}
/* train pad */
#trainPad{position:absolute;left:8px;right:8px;bottom:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#trainPad button{background:rgba(15,12,23,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px;padding:7px 0;font-size:11px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:1px;transition:.12s}
#trainPad button span{font-size:20px}
#trainPad button.lit{background:linear-gradient(135deg,var(--acc1),var(--acc2));transform:scale(1.08)}
#trainPad.wait button:not(.lit){opacity:.55}
/* earn */
.subsidy,.piggy,.job,.quest{display:flex;align-items:center;gap:12px;padding:10px 12px}
.piggy .pgi{font-size:30px;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#ffb3c7,#ff7aa2);display:grid;place-items:center;flex-shrink:0}
.subsidy .pgi{font-size:28px;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#ffe08a,#f5a524);display:grid;place-items:center;flex-shrink:0}
.subsidy{border:1.5px solid rgba(245,165,36,.45)}.subsidy.claimed{opacity:.75;border-color:transparent}
.job .ii,.quest .ii{width:42px;height:42px;border-radius:13px;background:var(--card2);display:grid;place-items:center;font-size:22px;flex-shrink:0}
.subsidy .it,.piggy .it,.job .it,.quest .it{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.subsidy b,.piggy b,.job b,.quest b{font-size:14px;font-weight:800}
.subsidy small,.piggy small,.job small,.quest small{font-size:12px;color:var(--mut);font-weight:600}
.subsidy .track,.piggy .track,.job .track,.quest .track{height:5px;margin-top:2px}
.job.active{border-color:rgba(255,154,90,.45)}
.job.lock{opacity:.55}
.quest.claimed{opacity:.55}
.subsidy .btn,.piggy .btn,.job .btn,.quest .btn{flex-shrink:0;min-width:62px}
/* themes */
.themes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.theme{background:var(--card2);border-radius:14px;padding:9px;text-align:left;display:flex;flex-direction:column;gap:3px;border:2px solid transparent}
.theme.on{border-color:var(--acc1)}
.theme .sw{display:flex;height:22px;border-radius:8px;overflow:hidden;margin-bottom:3px}
.theme .sw i{flex:1;font-style:normal;display:grid;place-items:center;font-size:15px}
.theme.rnd .sw{background:linear-gradient(90deg,#f4dfe6,#cfdcc4,#8d9094,#e9cfa8)}
.theme b{font-size:13px;font-weight:800}
.theme small{font-size:11.5px;color:var(--mut);font-weight:700}
/* sheets */
.pava{display:flex;justify-content:center;margin:4px 0 8px}
.pava .ava{image-rendering:pixelated}
.nameRow{display:flex;gap:8px;margin:6px 0}
.nameRow input{flex:1;min-width:0;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--tx);font:700 15px Manrope,Nunito,sans-serif;outline:none}
.nameRow input:focus{border-color:var(--acc1)}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--card2);padding:4px;border-radius:13px;margin:8px 0}
.seg2 button{background:transparent;padding:8px;border-radius:10px;font-weight:700;font-size:13px;color:var(--mut)}
.seg2 button.on{background:linear-gradient(135deg,var(--acc1),var(--acc2));color:#fff}
.lbl{text-align:left;font-size:12px;color:var(--mut);font-weight:700;margin:10px 2px 6px}
.coats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.coats button{background:var(--card2);border-radius:12px;padding:6px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid transparent}
.coats button.on{border-color:var(--acc1)}
.coats small{font-size:10px;color:var(--mut);font-weight:700;line-height:1.1}
.coats .ava{image-rendering:pixelated}
.eyes{display:flex;gap:10px;justify-content:center;margin-bottom:6px}
.eyes button{width:30px;height:30px;border-radius:50%;background:var(--c);border:3px solid var(--card);box-shadow:0 0 0 2px transparent}
.eyes button.on{box-shadow:0 0 0 2px var(--acc1)}
.btn.wide{width:100%;margin-top:12px}
.btn.danger{color:#ff9a9a;border-color:rgba(255,97,97,.35)}
.choice{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.choice .btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 12px}
.choice .btn b{font-size:15px}
.choice .btn small{font-size:12px;color:var(--mut);font-weight:600}
.choice .pi{font-size:28px}
.oava{display:flex;gap:6px}
.oava .ava{image-rendering:pixelated}
.help{text-align:left;font-size:14px}
.help p{color:var(--mut);font-weight:600;font-size:13.5px;line-height:1.5;margin:8px 0}
.help b{color:var(--tx)}

/* ===== ламповый стиль ===== */
#homeTitle,.shophead > div > b,.albumhead b,#modalBody > b,.card > b{font-family:Comfortaa,Nunito,sans-serif;letter-spacing:-.2px}
#homeTitle{font-weight:700}
.card{box-shadow:var(--shadow)}
.pill{background:var(--card);box-shadow:var(--key)}
.iconbtn{background:var(--card);box-shadow:var(--key)}
.ring::before{background:var(--card)}
.seg{background:var(--card);box-shadow:var(--shadow);border-radius:18px}
.seg button.on{box-shadow:0 4px 14px rgba(255,138,92,.35)}
.seg button.on .rn{color:var(--ontx)}
.seg .dot{background:var(--tx);color:var(--bg)}
/* сцена — окошко в деревянной рамке */
#stage{border-radius:20px;box-shadow:0 0 0 5px var(--wood1),0 0 0 8px var(--wood2),0 0 0 9px rgba(0,0,0,.15),0 16px 34px rgba(0,0,0,.35),0 0 60px var(--glow);margin:8px auto 6px;width:calc(100% - 16px)}
#stage::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 0 0 26px rgba(40,20,5,.28)}
.bub{background:#fff8ee;color:#3d2a1c;border-radius:14px 14px 14px 5px;box-shadow:0 4px 0 rgba(120,80,40,.15),0 6px 14px rgba(0,0,0,.2)}
#modeBar,#toast{background:var(--glass);color:var(--tx);box-shadow:var(--shadow)}
#modeBar button{background:var(--card2)}
/* карточки котов */
.catcard{background:var(--card);box-shadow:var(--key);border-radius:18px}
.catcard.on{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--acc1),var(--acc2)) border-box}
.catcard .ava{background:radial-gradient(circle at 50% 70%,var(--card2) 0 58%,transparent 60%);border-radius:12px;padding:2px}
.catcard.add{box-shadow:none;border:2px dashed var(--line)}
/* статы */
#stats{border-radius:20px}
.stat .si{background:var(--card2);border-radius:12px}
.track{background:var(--card2)}
.track i{background:linear-gradient(90deg,var(--ok),#c4e57f)}
.stat[data-lv=mid] .track i{background:linear-gradient(90deg,var(--mid),#ffe08a)}
.stat[data-lv=low] .track i{background:linear-gradient(90deg,var(--low),#ff9f7a)}
.chip{background:var(--card);box-shadow:var(--key)}
/* кнопки действий — мягкие «клавиши» */
.grp .gh{font-family:Comfortaa,Nunito,sans-serif;font-weight:700}
.act{background:var(--card);box-shadow:var(--key);border:1px solid var(--line)}
.act .ai{background:linear-gradient(160deg,var(--card2),transparent 140%);border-radius:14px}
.act:active{transform:translateY(2px);box-shadow:none}
.btn{background:var(--card2);color:var(--tx);box-shadow:var(--key)}
.btn.primary{color:#fff;text-shadow:0 1px 0 rgba(120,50,20,.25);box-shadow:0 3px 0 #c2563c,0 8px 18px rgba(255,120,80,.3)}
.btn.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #c2563c}
.btn.photo{background:linear-gradient(135deg,#ffe0b3,#ffc6a8);color:#5a2f17;margin:6px 0 4px}
/* таббар */
#tabbar{background:var(--glass);box-shadow:0 10px 30px rgba(0,0,0,.3)}
#tabbar button.on{background:var(--card2)}
#tabbar button.badge::after{box-shadow:0 0 0 2px var(--card)}
/* модалка */
#modalBox{background:var(--card);box-shadow:0 -10px 40px rgba(0,0,0,.35)}
#modal{background:rgba(25,14,6,.5)}
.grab{background:var(--line)}
.theme,.coats button,.seg2,.nameRow input{background:var(--card2)}
.picker .btn,.choice .btn{background:var(--card2)}
/* альбом */
.albumhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.albumhead > div{display:flex;flex-direction:column;gap:2px}
.albumhead small{font-size:12px}
.album{margin-top:0}
.album img,.album .lock,.album .slot{border-radius:14px;box-shadow:var(--key)}
.album img{border:4px solid #fffaf2;background:#fffaf2;box-shadow:0 3px 10px rgba(0,0,0,.25);transform:rotate(-1.2deg)}
.album img:nth-child(2n){transform:rotate(1.4deg)}
.album .slot{width:100%;aspect-ratio:3/4;background:var(--card);border:2px dashed var(--line);color:var(--acc1);font-size:24px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.album .slot small{font-size:11px;color:var(--mut)}
.gencta{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(255,189,110,.18),rgba(255,138,92,.12)),var(--card)}
.gencta .gi{font-size:28px;width:46px;height:46px;border-radius:14px;background:var(--card2);display:grid;place-items:center;flex-shrink:0}
.gencta .it{flex:1;display:flex;flex-direction:column;gap:2px}
.gencta small{font-size:12px;color:var(--mut);font-weight:600;line-height:1.3}
.bigimg{border:6px solid #fffaf2;box-shadow:var(--shadow)}
/* генератор */
.althumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.althumbs img{width:100%;aspect-ratio:3/4;border-radius:10px;image-rendering:pixelated;object-fit:cover}
.genrow{display:flex;gap:12px;align-items:center;margin:10px 0 4px}
.gphotos{display:flex;flex-direction:column;gap:6px;align-items:center}
.gmain{width:132px;height:176px;border-radius:14px;image-rendering:pixelated;border:4px solid #fffaf2;box-shadow:var(--shadow);cursor:crosshair;touch-action:manipulation}
.gthumbs{display:flex;gap:5px}
.gthumbs canvas,.gthumbs button{width:30px;height:40px;border-radius:7px;image-rendering:pixelated;opacity:.6;border:2px solid transparent}
.gthumbs canvas.on{opacity:1;border-color:var(--acc1)}
.gthumbs button{background:var(--card2);opacity:1;font-size:16px;color:var(--acc1)}
.gres{flex:1;display:flex;flex-direction:column;align-items:center}
.gslots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.gslots button{background:var(--card2);border-radius:12px;padding:8px 4px;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;border:2px solid transparent}
.gslots button.on{border-color:var(--acc1)}
.gslots i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)}
#modalBody p.hint{font-size:12px;margin:6px 0 0}
.looks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.looks button{background:var(--card2);border-radius:12px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid transparent}
.looks button.on{border-color:var(--acc1)}
.looks small{font-size:10px;color:var(--mut);font-weight:700;line-height:1.1}
.looks .ava{image-rendering:pixelated}
.chk{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;color:var(--mut);margin-top:10px}
.chk input{accent-color:var(--acc2);width:18px;height:18px}
/* выбор оформления */
.themepick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--card2);padding:4px;border-radius:13px;margin:6px 0 12px}
.themepick button{background:transparent;padding:8px 4px;border-radius:10px;font-weight:700;font-size:13px;color:var(--mut)}
.themepick button.on{background:var(--card);color:var(--tx);box-shadow:var(--key)}
/* генератор v2: прикрепить → сгенерировать → доработать */
.attach{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0 4px}
.achip{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border-radius:999px;padding:8px 8px 8px 12px;font-size:13px;font-weight:700;box-shadow:var(--key)}
.achip button{background:var(--card);width:22px;height:22px;border-radius:50%;font-size:11px;color:var(--mut)}
.achip.add{padding:9px 14px;color:var(--acc2);border:2px dashed var(--line);box-shadow:none;background:transparent}
.genwait{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0 4px}
.genwait .track{width:70%;height:8px}
.pava.reveal .ava{animation:reveal .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes reveal{from{transform:scale(.3) rotate(-12deg);opacity:0}}
.pats{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.pats button{background:var(--card2);border-radius:12px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid transparent}
.pats button.on{border-color:var(--acc1)}
.pats small{font-size:9.5px;color:var(--mut);font-weight:700;line-height:1.1}
.pats .ava{image-rendering:pixelated}
.swrow{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.swrow button,.cpick{width:28px;height:28px;border-radius:50%;background:var(--c);border:3px solid var(--card);box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;padding:0}
.swrow button.on{box-shadow:0 0 0 2px var(--acc1)}
.swrow button b{font-size:11px;filter:drop-shadow(0 0 2px #000)}
.cpick{position:relative;background:var(--card2);font-size:13px;overflow:hidden}
.cpick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}