:root {
--bg-primary: #0f0f1a;
--bg-secondary: #1a1a2e;
--bg-card: #16213e;
--bg-card-hover: #1c2a4a;
--text-primary: #e0e0ff;
--text-secondary: #8888aa;
--accent-green: #00d4aa;
--accent-red: #ff4757;
--accent-yellow: #ffc048;
--accent-blue: #4a90d9;
--accent-purple: #9b59b6;
--border-color: #2a2a4a;
--gradient-green: linear-gradient(135deg, #00d4aa, #00b894);
--gradient-red: linear-gradient(135deg, #ff4757, #ff6b81);
--gradient-yellow: linear-gradient(135deg, #ffc048, #f9a825);
--gradient-blue: linear-gradient(135deg, #4a90d9, #5f27cd);
--shadow: 0 4px 20px rgba(0,0,0,0.3);
--radius: 16px;
}
.logo, .auth-logo {
display:flex;
align-items:center;
justify-content:center;
gap:.6rem;
}
.brand-logo-img{
display:block;
object-fit:contain;
filter:drop-shadow(0 0 1px rgba(224,224,255,.45));
}
.brand-logo-auth{width:44px;height:44px}
.brand-logo-header{width:30px;height:30px}
.logo-text{
font-weight:800;
background:var(--gradient-green);
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}

/* Гость (лендинг) / авторизация / приложение — видна одна область */
#landing-screen{display:flex;flex-direction:column;min-height:100vh;background:var(--bg-primary)}
#auth-screen{display:none;position:relative;z-index:10070;align-items:center;justify-content:center;min-height:100vh;padding:2rem}
#main-app{display:none}
html.mambik-view-app #landing-screen{display:none!important}
html.mambik-view-app #main-app{display:block!important}
html.mambik-view-auth #landing-screen{display:none!important}
html.mambik-view-auth #auth-screen{display:flex!important}
/* z-index: поверх слоёв Метрики (webvisor), чтобы клики доходили до формы входа */
.landing-header{
position:sticky;top:0;z-index:50;
background:rgba(15,15,26,.94);backdrop-filter:blur(10px);
border-bottom:1px solid var(--border-color);
}
.landing-header-inner{max-width:960px;margin:0 auto;padding:.85rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.landing-brand{display:flex;align-items:center;gap:.6rem;color:inherit}
.landing-header-cta{white-space:nowrap;padding:.55rem 1rem;font-size:.9rem}
.landing-main{flex:1;max-width:720px;margin:0 auto;padding:2rem 1.25rem 3rem;width:100%}
.landing-section{margin-bottom:2rem}
.landing-hero{padding-top:.25rem}
.landing-title{font-size:clamp(1.15rem,3.6vw,1.75rem);line-height:1.3;font-weight:800;margin-bottom:1rem;text-align:left;color:var(--text-primary)}
.landing-lead{font-size:1.02rem;line-height:1.55;color:var(--text-secondary);text-align:left;margin:0}
.landing-h2{font-size:1.12rem;margin:0 0 .75rem;color:var(--accent-green);font-weight:700}
.landing-p{margin:.55rem 0;line-height:1.55;font-size:.95rem;color:var(--text-secondary)}
.landing-p strong{color:var(--text-primary)}
.landing-steps,.landing-list{margin:.35rem 0 0 1.15rem;line-height:1.55;font-size:.95rem;color:var(--text-secondary)}
.landing-steps li,.landing-list li{margin:.35rem 0}
.landing-section--accent{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.25rem 1.35rem;margin:1.25rem 0}
.landing-note{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border-color)}
.landing-cta-block{text-align:left;padding-bottom:1rem}
.landing-footer-cta{margin-top:1.1rem}
.auth-back-to-landing{
display:block;width:100%;margin:0 0 1rem;text-align:left;
background:transparent;border:none;color:var(--accent-blue);cursor:pointer;font-size:.85rem;padding:0;font-family:inherit;text-decoration:underline;
}
.auth-back-to-landing:hover{color:var(--accent-green)}
.auth-container{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:2.5rem;width:100%;max-width:400px;text-align:center}
.auth-logo{font-size:2rem;margin-bottom:.5rem}
.auth-subtitle{color:var(--text-secondary);font-size:.9rem;margin-bottom:2rem}
.auth-tabs{display:flex;margin-bottom:1.5rem;background:var(--bg-primary);border-radius:10px;padding:3px}
.auth-tab{flex:1;padding:.6rem;border:none;border-radius:8px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.9rem}
.auth-tab.active{background:var(--bg-card);color:var(--text-primary);font-weight:600}
#auth-form .form-group{text-align:left;margin-bottom:1rem}
#auth-form input{width:100%;background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);padding:.75rem 1rem;border-radius:10px;font-size:1rem;font-family:inherit}
#auth-form input:focus{outline:none;border-color:var(--accent-green)}
.auth-error{margin-top:1rem;color:var(--accent-red);font-size:.9rem}

/* Header */
header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;flex-wrap:wrap;gap:.5rem}
.logo{font-size:1.5rem}
nav{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.nav-more-wrap{position:relative;flex-shrink:0}
.nav-more-menu{
position:absolute;top:calc(100% + 6px);right:0;min-width:200px;padding:.35rem;
background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;
box-shadow:var(--shadow);z-index:150;
}
.nav-more-menu[hidden]{display:none!important}
.nav-more-item{
display:block;width:100%;text-align:left;padding:.65rem .9rem;margin:0;border:none;border-radius:8px;
background:transparent;color:var(--text-primary);font-size:.9rem;font-family:inherit;cursor:pointer;
}
.nav-more-item:hover{background:rgba(0,212,170,.12);color:var(--accent-green)}
.nav-more-btn.nav-btn.active{background:rgba(74,144,217,.2);border-color:var(--accent-blue);color:var(--text-primary)}
.deals-subnav{display:flex;gap:.5rem;margin:0 auto 1.25rem;max-width:900px;background:var(--bg-primary);border-radius:12px;padding:4px;border:1px solid var(--border-color)}
.deals-subtab{flex:1;padding:.65rem 1rem;border:none;border-radius:10px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.9rem;font-weight:600;transition:all .25s}
.deals-subtab-nowrap{white-space:nowrap}
.deals-subtab:hover{color:var(--text-primary)}
.deals-subtab.active{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow)}
.deals-panel{display:none;padding-top:.25rem}
.deals-panel.active{display:block}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:.5rem 1rem;border-radius:10px;cursor:pointer;font-size:.9rem;transition:all .3s}
.nav-tab-logo{width:16px;height:16px;vertical-align:-2px;margin-right:.35rem;object-fit:contain}
.nav-btn:hover{border-color:var(--accent-green);color:var(--text-primary)}
.nav-btn.active{background:var(--gradient-green);color:#000;border-color:transparent;font-weight:600}
.user-info{display:flex;align-items:center;gap:.75rem;color:var(--text-secondary);font-size:.85rem}
.account-menu-dropdown{
position:absolute;
top:calc(100% + 6px);
right:0;
min-width:180px;
padding:.35rem;
background:var(--bg-card);
border:1px solid var(--border-color);
border-radius:12px;
box-shadow:var(--shadow);
z-index:160;
}
.account-menu-details:not([open]) .account-menu-dropdown{display:none!important}
.account-menu-details[open] .account-menu-dropdown{display:block}
.account-menu-details > summary{list-style:none}
.account-menu-details > summary::-webkit-details-marker{display:none}
.username-menu-btn{
border:none;
padding:.2rem .35rem;
text-decoration:underline;
text-underline-offset:2px;
color:var(--text-secondary);
cursor:pointer;
user-select:none;
}
.username-menu-btn:hover{
border:none;
color:var(--text-primary);
background:transparent;
}
.username-menu-btn.active{
background:rgba(74,144,217,.2)!important;
border:none!important;
color:var(--text-primary)!important;
}
@media(max-width:768px){
.account-menu-dropdown{right:0;left:auto;transform:none}
}
.btn-logout{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:.3rem .7rem;border-radius:8px;cursor:pointer;font-size:.8rem}
.btn-logout:hover{border-color:var(--accent-red);color:var(--accent-red)}

.auth-logo .logo-text{font-size:2rem}
.logo .logo-text{font-size:1.5rem}

/* Tabs */
.tab{display:none;padding:2rem;max-width:900px;margin:0 auto;animation:fadeIn .3s ease}
.tab.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
h2{margin-bottom:1.5rem;font-size:1.5rem;text-align:center}
h3{margin-bottom:1rem;font-size:1.1rem;color:var(--text-secondary)}

/* Pet Card */
.pet-card{text-align:center;padding:2rem;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-color);margin-bottom:1.5rem;max-width:600px;margin-left:auto;margin-right:auto}
.pet-sprite{font-size:5rem;margin-bottom:.5rem;animation:petBounce 2s ease-in-out infinite}
.pet-svg-container{width:280px;height:300px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.pet-png-stack{position:relative;width:280px;height:300px;margin:0 auto;display:flex;align-items:center;justify-content:center;transform-origin:center center}
.pet-png-stack.pet-png-float{animation:petPngFloat 2.8s ease-in-out infinite}
.pet-png-stack.pet-png-egg-bounce .pet-egg-placeholder{animation:petBounce 2s ease-in-out infinite}
.pet-png-stack .pet-egg-placeholder{display:block;line-height:0}
@keyframes petPngFloat{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(1deg)}100%{transform:translateY(0) rotate(0deg)}}
.pet-png-stack.pet-png-sick-shake{animation:petPngShake .2s infinite!important}
@keyframes petPngShake{0%{transform:translate(1px,1px)}25%{transform:translate(-1px,-2px)}50%{transform:translate(-2px,1px)}75%{transform:translate(2px,-1px)}100%{transform:translate(1px,1px)}}
.pet-png-stack.pet-png-vortex{animation:petPngVortex .6s ease-in-out 2!important}
@keyframes petPngVortex{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.pet-png-stack .pet-layer{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.pet-png-stack .pet-layer-base{z-index:1}
.pet-egg-placeholder{max-width:100%;height:auto;animation:petBounce 2s ease-in-out infinite}
.pet-create-egg-preview{display:flex;justify-content:center;margin:1rem 0;line-height:0}
.pet-create-egg-preview .pet-create-egg-img{max-height:20rem;width:auto;max-width:100%;display:block;animation:petBounce 2s ease-in-out infinite}
.pet-png-stack[data-aura]::before{content:'';position:absolute;top:-14px;left:-14px;right:-14px;bottom:-14px;border-radius:50%;pointer-events:none;z-index:0}
.pet-png-stack[data-aura="glow"]::before{background:radial-gradient(circle,rgba(255,215,150,.5) 0%,rgba(255,200,100,0) 78%);filter:blur(18px);animation:petAuraGlow 2.2s ease-in-out infinite alternate}
.pet-png-stack[data-aura="rainbow"]::before{background:linear-gradient(135deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#ff00ff);background-size:400% 400%;filter:blur(20px);opacity:.55;animation:petAuraRainbow 10s linear infinite}
.pet-png-stack[data-aura="pulse"]::before{background:radial-gradient(circle,#4a9eff,#0066cc);filter:blur(14px);animation:petAuraPulse 2.5s ease-in-out infinite}
.pet-png-stack[data-aura="fire"]::before{background:radial-gradient(circle,#ff4500,#b22200);filter:blur(18px);animation:petAuraFire .85s ease-in-out infinite alternate}
.pet-png-stack[data-aura="ice"]::before{background:radial-gradient(circle,#00bfff,#1e3c72);filter:blur(16px);animation:petAuraIce 2s ease-in-out infinite}
.pet-png-stack[data-aura="dark"]::before{background:radial-gradient(circle,#3b1e6b,#12002b);filter:blur(22px);animation:petAuraDark 3.2s ease-in-out infinite}
@keyframes petAuraGlow{0%{opacity:.55;transform:scale(.96)}100%{opacity:1;transform:scale(1.04)}}
@keyframes petAuraRainbow{0%{background-position:0 0}100%{background-position:100% 100%}}
@keyframes petAuraPulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes petAuraFire{0%{opacity:.55;transform:scale(.97)}100%{opacity:1;transform:scale(1.06)}}
@keyframes petAuraIce{0%,100%{opacity:.4;transform:scale(.98)}50%{opacity:.85;transform:scale(1.05)}}
@keyframes petAuraDark{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:.92;transform:scale(1.1)}}
.inventory-page{max-width:720px;margin:0 auto}
.inventory-page-title{text-align:center;margin-bottom:.5rem}
.inventory-page-lead{text-align:center;color:var(--text-secondary);font-size:.95rem;line-height:1.45;margin:0 auto 1.25rem;max-width:34rem}
.inventory-chest-hint{
  margin:0 auto 1rem;max-width:40rem;
  background:rgba(74,144,217,.12);border:1px solid rgba(74,144,217,.4);border-radius:14px;padding:.85rem 1rem;
}
.inventory-chest-hint-inner{display:flex;align-items:flex-start;gap:.75rem;flex-wrap:wrap}
.inventory-chest-hint-ico{font-size:1.35rem;line-height:1;flex-shrink:0}
.inventory-chest-hint-text{flex:1;min-width:12rem;text-align:left}
.inventory-chest-hint-text p{margin:.35rem 0 0;font-size:.85rem;color:var(--text-secondary);line-height:1.4}
.inventory-chest-hint-dismiss{flex-shrink:0}
.inventory-chest-bar{
  margin:0 auto 1.25rem;max-width:40rem;
  background:linear-gradient(135deg,rgba(0,212,170,.12),rgba(74,144,217,.08));
  border:1px solid rgba(0,212,170,.35);border-radius:16px;padding:1rem 1.1rem;
}
.inventory-chest-inner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.inventory-chest-ico{font-size:2rem;line-height:1}
.inventory-chest-text{flex:1;min-width:12rem;text-align:left}
.inventory-chest-text p{margin:.35rem 0 0;font-size:.85rem;color:var(--text-secondary);line-height:1.35}
.nav-tab-badge{
  display:inline-block;min-width:1.25rem;padding:.1rem .4rem;margin-left:.25rem;
  font-size:.72rem;font-weight:800;line-height:1.2;border-radius:999px;
  background:var(--accent-green);color:#0a0a12;vertical-align:2px;
}
.inventory-equipped-bar{margin-bottom:1.5rem}
.inventory-equip-wrap{background:linear-gradient(145deg,rgba(99,102,241,.08),rgba(16,185,129,.06));border:1px solid var(--border-color);border-radius:16px;padding:1rem 1.1rem 1.15rem;box-shadow:0 4px 24px rgba(0,0,0,.04)}
.inventory-equip-heading{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 .75rem;text-align:center}
.inventory-equip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem}
@media(min-width:520px){.inventory-equip-grid{grid-template-columns:repeat(4,1fr);gap:.75rem}}
.inventory-slot-tile{border-radius:12px;padding:.65rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center;min-height:5.5rem;justify-content:center;transition:background .2s,border-color .2s,box-shadow .2s}
.inventory-slot-tile--off{background:var(--bg-card);border:1.5px dashed rgba(120,120,140,.4)}
.inventory-slot-tile--on{background:var(--bg-card);border:1.5px solid rgba(99,102,241,.35);box-shadow:0 2px 12px rgba(99,102,241,.12)}
.inventory-slot-ico{font-size:1.35rem;line-height:1;opacity:.9}
.inventory-slot-label{font-size:.68rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.inventory-slot-value{font-size:.82rem;font-weight:600;color:var(--text-primary);line-height:1.25;word-break:break-word}
.inventory-slot-tile--off .inventory-slot-value{color:var(--text-secondary);font-weight:500}
.inventory-empty-cta{text-align:center;padding:2rem 1.25rem 2.25rem;margin-top:.5rem;background:var(--bg-card);border:1px dashed rgba(120,120,140,.35);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.inventory-empty-visual{position:relative;width:88px;height:88px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center}
.inventory-empty-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,rgba(99,102,241,.25),rgba(16,185,129,.2),rgba(251,191,36,.25),rgba(99,102,241,.25));animation:inventoryRingSpin 12s linear infinite}
@keyframes inventoryRingSpin{to{transform:rotate(360deg)}}
.inventory-empty-icon{position:relative;font-size:2.25rem;line-height:1;z-index:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.08))}
.inventory-empty-title{margin:0 0 .5rem;font-size:1.15rem;font-weight:700;color:var(--text-primary)}
.inventory-empty-text{margin:0 auto .75rem;max-width:26rem;font-size:.9rem;color:var(--text-secondary);line-height:1.5}
.inventory-dead-hint{text-align:center;color:var(--text-secondary);font-size:.9rem;padding:1.5rem;background:var(--bg-card);border-radius:12px;border:1px solid var(--border-color)}
.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.1rem;margin-top:.5rem}
.inventory-card-title{font-weight:600;font-size:.9rem;margin:0}
.inventory-card-meta{font-size:.75rem;color:var(--text-secondary)}
.inventory-card-actions{display:flex;flex-direction:column;gap:.35rem;margin-top:.35rem}
@keyframes petBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.pet-mood{font-size:1rem;color:var(--text-secondary);margin-bottom:.3rem}
.pet-stage{display:inline-block;background:var(--gradient-blue);padding:.2rem .7rem;border-radius:20px;font-size:.8rem;font-weight:600;margin:.3rem 0;color:#fff}
.pet-level{color:var(--text-secondary);font-size:.9rem;margin-bottom:.5rem}
.xp-bar{width:60%;margin:.3rem auto;height:6px;background:var(--bg-primary);border-radius:3px;overflow:hidden}
.xp-fill{height:100%;background:var(--gradient-green);border-radius:3px;transition:width .5s}
.health-section{margin-top:1.5rem}
.health-label{font-size:.9rem;margin-bottom:.4rem}
.health-bar{width:70%;margin:0 auto;height:14px;background:var(--bg-primary);border-radius:7px;overflow:hidden;border:1px solid var(--border-color)}
.health-fill{height:100%;background:var(--gradient-green);border-radius:7px;transition:width .5s}
.health-value{font-weight:700;font-size:1.2rem;margin-top:.4rem}
.streak-display{margin-top:1rem;color:var(--accent-yellow);font-weight:600;font-size:1.05rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.streak-display #daily-streak-fire{margin-right:1px}

/* Create Pet */
.create-form{background:var(--bg-card);padding:2rem;border-radius:var(--radius);border:1px solid var(--border-color);text-align:center;max-width:650px;margin:0 auto}
.create-form input[type="text"]{width:60%;background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);padding:.75rem 1rem;border-radius:10px;font-size:1.1rem;text-align:center;font-family:inherit;margin-bottom:.5rem}
.create-form input[type="text"]:focus{outline:none;border-color:var(--accent-green);box-shadow:0 0 15px rgba(0,212,170,.15)}
.create-form input[type="text"]::placeholder{color:var(--text-secondary)}
.section-label{font-size:.85rem;color:var(--text-secondary);margin:1.5rem 0 .5rem;text-transform:uppercase;letter-spacing:1px}
.style-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.65rem;margin:1rem 0;width:100%;align-items:stretch}
.style-option{
aspect-ratio:1;min-width:0;width:100%;
background:var(--bg-primary);border:2px solid var(--border-color);border-radius:12px;padding:0.45rem 0.4rem;cursor:pointer;transition:all .25s;
text-align:center;display:flex;flex-direction:column;align-items:stretch;gap:0.35rem;overflow:visible
}
.style-option:hover{border-color:var(--accent-green);transform:translateY(-2px)}
.style-option.selected{border-color:var(--accent-green);background:rgba(0,212,170,.1);box-shadow:0 0 20px rgba(0,212,170,.2)}
/* Превью: явная высота + absolute SVG — стабильно в WebKit; flex:1 забирает место между шапкой и текстом */
.style-option .style-icon{
position:relative;flex:1 0 auto;min-height:4.5rem;width:100%;margin:0;overflow:hidden;
box-sizing:border-box
}
.style-option .style-icon svg{
position:absolute;left:0;top:0;width:100%!important;height:100%!important;max-width:none;max-height:none;display:block;box-sizing:border-box
}
.style-option .style-name{font-weight:600;font-size:clamp(0.72rem,2.8vw,0.95rem);margin-bottom:0;line-height:1.2;flex-shrink:0}
.style-option .style-desc{font-size:clamp(0.62rem,2.2vw,0.75rem);color:var(--text-secondary);line-height:1.25;flex-shrink:0;overflow:visible;word-wrap:break-word;hyphens:auto}
.color-preview{width:200px;height:220px;margin:1.5rem auto .5rem;display:flex;align-items:center;justify-content:center}
.color-selector{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:1rem 0}
.color-option{width:48px;height:48px;border-radius:50%;cursor:pointer;border:3px solid var(--border-color);transition:all .25s;position:relative;flex-shrink:0}
.color-option:hover{transform:scale(1.15);box-shadow:0 4px 15px rgba(0,0,0,.3)}
.color-option.selected{border-color:#fff;transform:scale(1.2);box-shadow:0 0 20px rgba(255,255,255,.2)}
.create-form .btn-primary{margin-top:1.5rem;padding:1rem 2.5rem;font-size:1.1rem}

/* Death */
.death-screen{text-align:center;padding:3rem 2rem;background:var(--bg-card);border:2px solid var(--accent-red);border-radius:var(--radius);max-width:500px;margin:0 auto}
.death-sprite{font-size:6rem;margin-bottom:1rem}

/* Stats */
.dashboard-stats{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem}
.stats-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:.75rem}
.stats-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.stat-card-mini{background:var(--bg-primary);border-radius:12px;padding:1rem .5rem;text-align:center}
.stat-mini-value{font-size:1.4rem;font-weight:800}
.stat-mini-value.green{color:var(--accent-green)}
.stat-mini-value.red{color:var(--accent-red)}
.stat-mini-value.yellow{color:var(--accent-yellow)}
.stat-mini-value.blue{color:var(--accent-blue)}
.stat-mini-label{font-size:.7rem;color:var(--text-secondary);margin-top:.3rem}

/* Biases */
.dashboard-biases{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.5rem}
.bias-bar{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}
.bias-bar-name{font-size:.85rem;min-width:180px}
.bias-bar-track{flex:1;height:8px;background:var(--bg-primary);border-radius:4px;overflow:hidden}
.bias-bar-fill{height:100%;background:var(--gradient-red);border-radius:4px}
.bias-bar-count{font-size:.85rem;color:var(--text-secondary);min-width:30px;text-align:right}

/* Trade Form */
.trade-form{background:var(--bg-card);padding:2rem;border-radius:var(--radius);border:1px solid var(--border-color)}
.mode-selector{display:flex;gap:.5rem;margin-bottom:1rem;background:var(--bg-primary);border-radius:12px;padding:4px}
.mode-btn{flex:1;padding:.75rem;border:none;border-radius:10px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.9rem;transition:all .3s}
.mode-btn.active{background:var(--bg-card);color:var(--text-primary);font-weight:600;box-shadow:var(--shadow)}
.mode-hint{font-size:.8rem;color:var(--text-secondary);text-align:center;margin-bottom:1.5rem;font-style:italic}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;margin-bottom:.5rem;font-weight:600;font-size:.9rem}
.form-group input,.form-group textarea{width:100%;background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);padding:.75rem 1rem;border-radius:10px;font-size:1rem;transition:border-color .3s;font-family:inherit}
/* Не растягиваем чекбоксы/радио на всю ширину */
.form-group input[type="checkbox"],
.form-group input[type="radio"]{
    width:auto;
    padding:0;
    border-radius:6px;
}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent-green)}
.char-count{text-align:right;font-size:.8rem;color:var(--text-secondary);margin-top:.3rem}
.direction-toggle{display:flex;gap:.5rem}
.dir-btn{flex:1;padding:.75rem;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-secondary);border-radius:10px;cursor:pointer;font-size:.9rem;transition:all .3s}
.dir-btn.active[data-dir="buy"]{background:rgba(0,212,170,.15);border-color:var(--accent-green);color:var(--accent-green)}
.dir-btn.active[data-dir="sell"]{background:rgba(255,71,87,.15);border-color:var(--accent-red);color:var(--accent-red)}

/* Buttons */
.btn-primary{background:var(--gradient-green);color:#000;border:none;padding:.75rem 2rem;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s;width:100%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,212,170,.3)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-large{padding:1rem 2rem;font-size:1.1rem;margin-top:1rem}
.btn-secondary{background:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border-color);padding:.75rem 2rem;border-radius:12px;font-size:1rem;cursor:pointer;width:100%}
.btn-cancel{flex:1;padding:.75rem;border-radius:12px;background:rgba(255,71,87,.15);color:var(--accent-red);border:1px solid var(--accent-red);cursor:pointer;font-size:1rem;font-weight:600}
.btn-cancel:hover{background:rgba(255,71,87,.3)}

/* Analysis */
.analysis-result{margin-top:2rem;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-color);padding:2rem;animation:slideUp .5s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1}}
.analysis-header{text-align:center;font-size:1.3rem;font-weight:700;margin-bottom:1.5rem}
.score-circle{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .5rem;font-size:2rem;font-weight:800;border:4px solid}
.score-label{text-align:center;color:var(--text-secondary);margin-bottom:1.5rem}
.analysis-text,.analysis-recommendations{background:var(--bg-primary);padding:1rem;border-radius:10px;margin-bottom:1rem;line-height:1.6}
.analysis-biases{margin-bottom:1rem}
.bias-tag{display:inline-block;background:rgba(255,71,87,.15);color:var(--accent-red);padding:.3rem .8rem;border-radius:20px;font-size:.85rem;margin:.2rem}
.pet-impact{text-align:center;padding:1rem;border-radius:10px;font-weight:600}

/* Cooldown */
.cooldown-timer{text-align:center;padding:1.5rem;background:rgba(255,192,72,.1);border:1px solid var(--accent-yellow);border-radius:var(--radius);margin:1rem 0}
.timer-icon{font-size:2rem;margin-bottom:.5rem}
.timer-text{color:var(--accent-yellow);font-weight:600;margin-bottom:.5rem}
.timer-countdown{font-size:2.5rem;font-weight:800;color:var(--accent-yellow);margin-bottom:.5rem;font-variant-numeric:tabular-nums}
.timer-bar{width:80%;margin:0 auto;height:6px;background:var(--bg-primary);border-radius:3px;overflow:hidden}
.timer-fill{height:100%;background:var(--accent-yellow);border-radius:3px;transition:width 1s linear}
.pre-trade-buttons{display:flex;gap:1rem;margin-top:1rem}

/* Positions */
.position-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.position-info{flex:1}
.position-ticker{font-weight:700;font-size:1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .35rem}
.position-instrument-name{font-weight:700;font-size:1.05rem;line-height:1.25}
.position-instrument-ticker{font-size:.72rem;color:var(--text-secondary);font-weight:500;border:1px solid var(--border-color);padding:2px 6px;border-radius:6px;line-height:1.2}
.position-details{color:var(--text-secondary);font-size:.9rem;margin-top:.3rem}
.position-score{padding:.2rem .6rem;border-radius:20px;font-weight:700;font-size:.85rem}
.btn-close-trade{background:rgba(255,71,87,.15);color:var(--accent-red);border:1px solid var(--accent-red);padding:.5rem 1rem;border-radius:10px;cursor:pointer;font-size:.85rem;white-space:nowrap}
.btn-close-trade:hover{background:rgba(255,71,87,.3)}

/* Modal */
body.modal-open{overflow:hidden}
.modal[role="dialog"]{outline:none}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:200;display:flex;align-items:center;justify-content:center}
.modal-content{background:var(--bg-card);border-radius:var(--radius);padding:2rem;max-width:450px;width:90%;border:1px solid var(--border-color)}
.modal-trade-info{background:var(--bg-primary);padding:1rem;border-radius:10px;margin:1rem 0}
.modal-buttons{display:flex;gap:1rem;margin-top:1rem}
/* Интерактивный тур: затемнение + рамка + подсказка */
.tour-root{position:fixed;inset:0;z-index:10050;pointer-events:none}
.tour-root.tour-root--active{pointer-events:auto}
.tour-dim{position:fixed;background:rgba(0,0,0,.72);pointer-events:auto;transition:opacity .15s ease}
.tour-spotlight-ring{position:fixed;border:2px solid var(--accent-green);border-radius:12px;box-shadow:0 0 0 3px rgba(0,212,170,.25),0 0 24px rgba(0,212,170,.2);pointer-events:none;transition:opacity .15s ease}
.tour-popover{position:fixed;min-width:240px;max-width:min(360px,92vw);padding:1rem 1.1rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.45);pointer-events:auto;z-index:2}
.tour-popover-text{margin:0;font-size:.95rem;line-height:1.5;color:var(--text-primary)}
.tour-popover-footer{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;align-items:center;justify-content:flex-end}
.tour-popover-footer .btn-secondary,.tour-popover-footer .btn-primary{font-size:.85rem;padding:.45rem .85rem}
.tour-dots{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin:.85rem 0 0}
.tour-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .2s,transform .2s}
.tour-dot.active{background:var(--accent-blue);transform:scale(1.12)}
.tour-intro{position:fixed;inset:0;z-index:10060;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;padding:1rem;pointer-events:auto}
.tour-intro-card{max-width:420px;width:100%;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.5rem 1.35rem;box-shadow:0 16px 48px rgba(0,0,0,.5)}
.tour-intro-text{margin:0 0 1.25rem;font-size:1.05rem;line-height:1.5;color:var(--text-primary)}
.tour-intro-note{margin:0 0 1.25rem;font-size:.95rem;line-height:1.45;color:var(--text-secondary)}
.tour-intro-note a{color:var(--accent-blue);text-decoration:underline}
.tour-intro-note a:hover{text-decoration:none}
.tour-intro-buttons{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:flex-end}

/* Diary */
.diary-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}
.diary-stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.25rem;text-align:center}
.diary-stat-value{font-size:1.6rem;font-weight:800}
.diary-stat-label{font-size:.8rem;color:var(--text-secondary);margin-top:.3rem}
.diary-entry{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem;position:relative}
.diary-entry-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:.75rem}
.diary-entry-header-left{flex:1;min-width:0}
.diary-entry-header-right{display:flex;align-items:flex-start;flex-wrap:wrap;gap:.35rem .5rem;flex:0 1 auto;min-width:0;max-width:100%;justify-content:flex-end}
.diary-entry-time{flex-shrink:0;white-space:nowrap;font-size:.76rem;color:var(--text-secondary)}
.diary-entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;min-width:0;justify-content:flex-end;max-width:100%}
.diary-source-badge{display:inline-block;padding:2px 6px;border-radius:8px;font-size:.7rem;margin-left:.5rem;white-space:nowrap;vertical-align:middle}
.diary-source-tbank{background:rgba(255,192,72,.2);color:#ffc048}
.diary-explain-btn{width:auto;max-width:100%;box-sizing:border-box;padding:.25rem .6rem;font-size:.72rem;line-height:1.25;white-space:normal;text-align:center;word-break:break-word}
.diary-kebab-wrap{position:relative}
.diary-kebab-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:.2rem .45rem;border-radius:8px;font-size:1.15rem;line-height:1}
.diary-kebab-btn:hover{background:rgba(255,255,255,.08);color:var(--text-primary)}
.diary-kebab-menu{display:none;position:absolute;right:0;top:100%;margin-top:4px;min-width:220px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:.35rem;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.diary-kebab-wrap.open .diary-kebab-menu{display:block}
.diary-kebab-item{display:block;width:100%;text-align:left;padding:.5rem .75rem;border:none;background:transparent;color:var(--text-primary);cursor:pointer;border-radius:8px;font-size:.88rem}
.diary-kebab-item:hover{background:rgba(255,71,87,.12);color:var(--accent-red)}
.diary-ticker{font-weight:700;font-size:1.1rem}
.diary-score{padding:.2rem .6rem;border-radius:20px;font-weight:700;font-size:.9rem}
.score-high{background:rgba(0,212,170,.2);color:var(--accent-green)}
.score-mid{background:rgba(255,192,72,.2);color:var(--accent-yellow)}
.score-low{background:rgba(255,71,87,.2);color:var(--accent-red)}
.diary-reasoning{color:var(--text-secondary);font-size:.9rem;line-height:1.5;margin-bottom:.5rem}
.diary-ai-note{font-style:italic;color:var(--accent-blue);font-size:.85rem}
.diary-pnl{font-weight:700;margin-top:.5rem}
.diary-date{font-size:.8rem;color:var(--text-secondary);margin-top:.5rem}

/* Analytics */
.analytics-section,
.analytics-section-inner{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem}
.analytics-anchor-target{
scroll-margin-top:calc(var(--header-height, 64px) + var(--analytics-nav-h, 52px) + 12px);
border-radius:var(--radius);
}
/* Пустые секции: видимая «карточка», чтобы якорь и скролл не казались пустыми */
.analytics-anchor-target .analytics-section-inner:empty{
min-height:5.5rem;
display:flex;
align-items:center;
justify-content:center;
color:var(--text-secondary);
font-size:.9rem;
}
.analytics-anchor-target .analytics-section-inner:empty::before{
content:'Загрузка данных…';
opacity:.85;
}
/* Краткая подсветка при переходе по подменю аналитики */
.analytics-anchor-target.analytics-anchor-flash{
animation:analyticsAnchorFlash 1.15s ease-out;
}
@keyframes analyticsAnchorFlash{
0%{box-shadow:0 0 0 0 rgba(0,212,170,.55),0 0 28px rgba(0,212,170,.22);background:rgba(0,212,170,.1)}
30%{box-shadow:0 0 0 3px rgba(0,212,170,.4),0 0 36px rgba(0,212,170,.18);background:rgba(0,212,170,.07)}
100%{box-shadow:0 0 0 0 rgba(0,212,170,0),0 0 0 rgba(0,212,170,0);background:transparent}
}
@media (prefers-reduced-motion:reduce){
.analytics-anchor-target.analytics-anchor-flash{animation:analyticsAnchorFlashReduced .35s ease-out}
@keyframes analyticsAnchorFlashReduced{
0%{box-shadow:0 0 0 3px rgba(0,212,170,.45)}
100%{box-shadow:0 0 0 0 rgba(0,212,170,0)}
}
}
.analytics-nav{display:flex;flex-wrap:wrap;gap:.5rem;position:sticky;top:var(--header-height, 64px);z-index:90;margin:0 0 1rem;padding:.5rem 0 .75rem;background:var(--bg-primary);border-bottom:1px solid var(--border-color);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 8px 24px rgba(0,0,0,.25)}
.analytics-nav-link{display:inline-flex;align-items:center;padding:.45rem .85rem;border-radius:10px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary);font-size:.85rem;font-weight:600;text-decoration:none;transition:color .2s,border-color .2s,background .2s,background-color .2s}
.analytics-nav-link:hover{border-color:var(--accent-green);color:var(--text-primary)}
.analytics-nav-link.active{background:var(--gradient-green);color:#000;border-color:transparent}
@media(max-width:768px){
.analytics-nav{font-size:.8rem;gap:.35rem}
.analytics-nav-link{padding:.4rem .65rem;font-size:.78rem}
}
.corr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0}
.corr-card{background:var(--bg-primary);border-radius:12px;padding:1.25rem;text-align:center}
.corr-label{font-size:.8rem;color:var(--text-secondary);margin-bottom:.5rem}
.corr-value{font-size:1.5rem;font-weight:800}
.corr-sub{font-size:.75rem;color:var(--text-secondary);margin-top:.3rem}
.insight-box{background:rgba(0,212,170,.1);border:1px solid var(--accent-green);border-radius:12px;padding:1rem;margin-top:1rem;text-align:center;font-weight:600}
.bias-profile-item{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;padding:.5rem 0;border-bottom:1px solid var(--border-color)}
.bias-profile-name{min-width:180px;font-size:.9rem}
.bias-profile-bar{flex:1;height:10px;background:var(--bg-primary);border-radius:5px;overflow:hidden}
.bias-profile-fill{height:100%;border-radius:5px}
.bias-profile-meta{min-width:100px;text-align:right;font-size:.8rem}
.trend-improving{color:var(--accent-green)}
.trend-worsening{color:var(--accent-red)}
.trend-stable{color:var(--text-secondary)}
.recommendation-card{background:var(--bg-primary);border-radius:12px;padding:1rem;margin-top:.75rem}
.recommendation-bias{font-weight:700;color:var(--accent-yellow);margin-bottom:.3rem}
.recommendation-tip{font-size:.9rem;color:var(--text-secondary);line-height:1.5}

/* Close Analysis */
.close-analysis-block{background:var(--bg-primary);border-radius:10px;padding:1rem;margin-bottom:.75rem}
.close-analysis-label{font-weight:600;font-size:.85rem;color:var(--accent-blue);margin-bottom:.3rem}

/* Collection */
.collection-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;justify-content:center}
.coll-tab{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-secondary);padding:.5rem 1rem;border-radius:10px;cursor:pointer}
.coll-tab.active{background:var(--gradient-blue);color:#fff;border-color:transparent}
.collection-stats{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.25rem;margin-bottom:1.5rem;text-align:center}
.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.achievement-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.25rem;display:flex;align-items:center;gap:1rem}
.achievement-card.locked{opacity:.4;filter:grayscale(1)}
.achievement-card.unlocked{border-color:var(--accent-yellow)}
.achievement-icon{font-size:2rem;min-width:50px;text-align:center}
.achievement-info h3{font-size:1rem;margin-bottom:.25rem}
.achievement-info p{font-size:.8rem;color:var(--text-secondary)}
.rarity-badge{display:inline-block;font-size:.7rem;padding:.15rem .5rem;border-radius:10px;margin-top:.3rem;font-weight:600}
.rarity-common{background:rgba(136,136,170,.2);color:#8888aa}
.rarity-uncommon{background:rgba(0,212,170,.2);color:var(--accent-green)}
.rarity-rare{background:rgba(74,144,217,.2);color:var(--accent-blue)}
.rarity-epic{background:rgba(155,89,182,.2);color:var(--accent-purple)}
.rarity-legendary{background:rgba(255,192,72,.2);color:var(--accent-yellow)}
.rarity-habit{background:rgba(255,105,180,.15);color:#ff8cc8}
.pet-visit-card{margin-top:1rem;padding:1rem 1.1rem;border-radius:var(--radius);border:1px solid var(--border-color);background:var(--bg-secondary)}
#pet-visit-form{text-align:left}
.pet-visit-mood-label{font-size:.82rem;color:var(--text-secondary);margin:0 0 .4rem 0;font-weight:600}
.pet-visit-title{font-weight:700;margin-bottom:.35rem;font-size:1rem}
.pet-visit-streak-line{font-size:.85rem;color:var(--text-secondary);margin:.25rem 0 .75rem 0}
.pet-visit-moods{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.75rem;justify-content:flex-start}
.visit-mood-btn{font-size:1.35rem;padding:.4rem .55rem;border-radius:10px;border:2px solid transparent;background:var(--bg-card);cursor:pointer;line-height:1}
.visit-mood-btn.selected{border-color:var(--accent-green);background:rgba(0,212,170,.12)}
.pet-visit-note{width:100%;box-sizing:border-box;padding:.5rem .65rem;border-radius:10px;border:1px solid var(--border-color);background:var(--bg-primary);color:inherit;font-family:inherit;font-size:.85rem;margin-bottom:.75rem;resize:vertical}
.diary-note-form .pet-visit-note{margin-bottom:.75rem}
.diary-note-entry{border-left:3px solid rgba(0,212,170,.45)}
.diary-note-head{font-size:.75rem;font-weight:600;color:var(--accent-green);margin-bottom:.4rem}
.diary-note-body{white-space:pre-wrap;font-size:.9rem;line-height:1.45;color:var(--text-primary)}
.diary-note-date{font-size:.75rem;color:var(--text-secondary);margin-top:.5rem}
.pet-visit-done{color:var(--accent-green);font-size:.9rem;padding:.35rem 0}
.wisdom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.wisdom-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.5rem}
.wisdom-quote{font-style:italic;line-height:1.6;margin-bottom:.75rem}
.wisdom-author{color:var(--accent-yellow);font-weight:600;font-size:.9rem}

/* Notifications */
#notification-container{position:fixed;top:80px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:.5rem}
.notification{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:1rem 1.5rem;min-width:280px;max-width:380px;box-shadow:var(--shadow);animation:slideIn .3s ease,fadeOut .5s ease 3.5s forwards;display:flex;align-items:center;gap:.75rem}
.notification.success{border-left:4px solid var(--accent-green)}
.notification.warning{border-left:4px solid var(--accent-yellow)}
.notification.error{border-left:4px solid var(--accent-red)}
.notification.info{border-left:4px solid var(--accent-blue)}
.notification.legendary{border:2px solid var(--accent-yellow);animation:slideIn .3s ease,glow 1s ease infinite alternate,fadeOut .5s ease 5s forwards}
@keyframes slideIn{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeOut{to{opacity:0;transform:translateX(100px)}}
@keyframes glow{from{box-shadow:0 0 10px rgba(255,192,72,.3)}to{box-shadow:0 0 30px rgba(255,192,48,.6)}}
.notification-icon{font-size:1.5rem}
.notification-text{font-size:.9rem}
.loading{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.portfolio-loading-placeholder{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;color:var(--text-secondary);font-size:.9rem;line-height:1.45}
.broker-ui-loading{display:flex;align-items:center;gap:.75rem;padding:.5rem 0 1rem 0;color:var(--text-secondary);font-size:.9rem}
.empty-state{text-align:center;color:var(--text-secondary);padding:3rem}
.empty-state-icon{font-size:3rem;margin-bottom:1rem}

/* Responsive */
@media(max-width:768px){
header{flex-direction:column;gap:.75rem;padding:.75rem}
.analytics-nav{justify-content:center}
.header-nav{display:none!important;}
#bottom-nav{display:flex!important;}
#main-app{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
.header-nav .nav-btn{font-size:.8rem;padding:.45rem .75rem;min-height:44px}
.nav-more-menu{right:auto;left:50%;transform:translateX(-50%)}
.deals-subtab{font-size:.82rem;padding:.55rem .65rem}
.tab{padding:1rem}
.form-row{grid-template-columns:1fr}
.stats-grid-4{grid-template-columns:repeat(2,1fr)}
.stats-grid-3{grid-template-columns:1fr}
.diary-stats{grid-template-columns:repeat(2,1fr)}
.diary-entry-header{flex-direction:column;align-items:stretch}
/* Время слева, ⋮ справа в одной строке; статус и «Объяснить» — ниже на всю ширину */
.diary-entry-header-right{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:start;column-gap:.5rem;row-gap:.35rem;width:100%;max-width:100%}
.diary-entry-time{grid-column:1;grid-row:1;min-width:0}
.diary-kebab-wrap{grid-column:2;grid-row:1;justify-self:end;align-self:start}
.diary-entry-meta{grid-column:1/-1;grid-row:2;width:100%;max-width:100%;justify-content:flex-start}
.diary-score{max-width:100%;box-sizing:border-box}
.diary-explain-btn{flex:1 1 100%;width:100%;max-width:100%}
.corr-grid{grid-template-columns:1fr}
.pet-sprite{font-size:3.5rem}
.position-card{flex-direction:column;align-items:stretch}
.btn-close-trade{margin-left:0;margin-top:.5rem}
.user-info{width:100%;justify-content:center}
.pre-trade-buttons{flex-direction:column}
.broker-actions{flex-direction:column}
.market-sort-container{width:100%}
.stats-grid-2{grid-template-columns:1fr}
/* Выбор вида питомца: в 3 колонки на узком экране клетки ~90px — мало места под иконку и текст; в одну колонку карточки шире, превью крупнее */
.create-form .style-selector{grid-template-columns:1fr;max-width:min(300px,100%);margin-left:auto;margin-right:auto;gap:0.55rem}
.create-form .style-option{width:100%}
.create-form .style-option .style-icon{min-height:7.25rem}
}

/* Broker */
.broker-section{margin-bottom:1.5rem}
.broker-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem}
.broker-card h3{margin-bottom:1rem;color:var(--text-primary)}
/* Кнопка генерации чеклиста — акцент как у ключевых действий приложения */
.btn-strategy-generate-cta{
border:2px solid var(--accent-green)!important;
background:rgba(0,212,170,.1)!important;
color:var(--text-primary)!important;
box-shadow:0 0 0 1px rgba(0,212,170,.2),0 4px 16px rgba(0,212,170,.12);
font-weight:600;
}
.btn-strategy-generate-cta:hover{
border-color:#1ee6c5!important;
background:rgba(0,212,170,.18)!important;
box-shadow:0 0 0 1px rgba(0,212,170,.35),0 6px 20px rgba(0,212,170,.18);
}
.strategy-persist-banner{display:flex;align-items:flex-start;gap:.65rem;padding:.75rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.88rem;line-height:1.45}
.strategy-persist-banner--saved{border:1px solid rgba(0,212,170,.45);background:rgba(0,212,170,.1);color:var(--text-primary)}
.strategy-persist-banner--draft{border:1px solid rgba(255,192,72,.45);background:rgba(255,192,72,.08);color:var(--text-primary)}
.strategy-persist-banner .strategy-persist-icon{flex-shrink:0;line-height:1.35}
.broker-actions{display:flex;flex-direction:column;gap:.5rem}

/* Market sort buttons */
.market-sort-btn{
background:rgba(255,255,255,.03);
border:1px solid var(--border-color);
color:var(--text-secondary);
padding:.5rem 1rem;
border-radius:12px;
cursor:pointer;
font-size:.82rem;
font-weight:500;
transition:all .25s ease;
backdrop-filter:blur(4px);
position:relative;
overflow:hidden;
}
.market-sort-btn::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,transparent,rgba(74,144,217,.05));
opacity:0;
transition:opacity .25s;
}
.market-sort-btn:hover{
border-color:var(--accent-blue);
color:var(--accent-blue);
background:rgba(74,144,217,.08);
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(74,144,217,.15);
}
.market-sort-btn:hover::before{opacity:1}
.market-sort-btn.active{
background:linear-gradient(135deg,var(--accent-blue),#3a7bd5);
color:#fff;
border-color:transparent;
box-shadow:0 4px 15px rgba(74,144,217,.35);
font-weight:600;
}
.market-sort-btn.active:hover{
transform:translateY(-1px);
box-shadow:0 6px 20px rgba(74,144,217,.45);
}

/* Sort container */
.market-sort-container{
display:flex;
gap:.5rem;
margin-bottom:1rem;
flex-wrap:wrap;
padding:.3rem;
background:rgba(255,255,255,.02);
border-radius:14px;
border:1px solid var(--border-color);
width:fit-content;
}
.stats-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}

/* ===== Trading direction & order type buttons fix ===== */
.direction-toggle .dir-btn {
    padding: .6rem 1.2rem;
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 10px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: all .2s;
    flex: 1;
    text-align: center;
}
.direction-toggle .dir-btn:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}
.direction-toggle .dir-btn.active[data-dir="buy"],
.direction-toggle .dir-btn.active#order-type-market,
.direction-toggle .dir-btn.active#order-type-limit {
    border-color: var(--accent-green);
    background: rgba(0, 212, 170, .15);
    color: var(--accent-green);
}
.direction-toggle .dir-btn.active[data-dir="sell"] {
    border-color: var(--accent-red);
    background: rgba(255, 71, 87, .15);
    color: var(--accent-red);
}

/* ===== Custom checkboxes for SL/TP ===== */
#trading-order-form input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    cursor: pointer;
    vertical-align: middle;
    margin-right: 8px;
    position: relative;
    transition: all .2s;
    flex-shrink: 0;
}
#trading-order-form input[type="checkbox"]:checked {
    background: var(--accent-green);
    border-color: var(--accent-green);
}
#trading-order-form input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: 700;
}
#trading-order-form input[type="checkbox"]:hover {
    border-color: var(--accent-blue);
}
#trading-order-form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: .5rem;
}

/* Отключаем мигающий курсор везде на странице */
html, body, div, span, p, h1, h2, h3, h4, h5, h6,
a, button, label, td, th, li, section, article, header, nav, main {
    caret-color: transparent;
}

/* Возвращаем курсор только в поля ввода текста */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input:not([type]),
textarea {
    caret-color: auto;
}
/*
 * Стили для секции потенциальных закрытий
 */
.potential-close-card {
    transition: all 0.2s ease;
}

.potential-close-card:hover {
    box-shadow: var(--shadow);
}

.buy-match-option {
    transition: all 0.15s ease;
}

.buy-match-option:hover {
    transform: translateY(-1px);
}

.buy-match-option.suggested {
    background: rgba(0, 212, 170, .08);
    border-color: var(--accent-green);
}

.buy-match-option.selected {
    border-color: var(--accent-blue);
    background: rgba(74, 144, 217, .1);
}

/*
 * Бейдж для позиций с потенциальными закрытиями
 */
.position-card.has-potential-close {
    border-color: var(--accent-yellow);
    background: linear-gradient(135deg, rgba(255, 192, 72, .05), var(--bg-card));
}

/*
 * Уведомления для потенциальных закрытий
 */
.notification.potential-close {
    border-left: 4px solid var(--accent-yellow);
    background: linear-gradient(135deg, rgba(255, 192, 72, .1), var(--bg-card));
}

/*
 * Кнопки действий для связывания
 */
.link-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.link-actions .btn-primary,
.link-actions .btn-cancel {
    flex: 1;
    min-width: 120px;
}

/*
 * Стили для модального окна связывания
 */
#link-buy-options .buy-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

#link-buy-options .buy-option:hover {
    border-color: var(--accent-blue);
}

#link-buy-options .buy-option.selected {
    border-color: var(--accent-green);
    background: rgba(0, 212, 170, .08);
}

/*
 * Анимация для секции потенциальных закрытий
 */
@keyframes pulse-yellow {
    0% { box-shadow: 0 0 0 0 rgba(255, 192, 72, .4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 192, 72, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 192, 72, 0); }
}

.potential-closes-section .broker-card {
    animation: pulse-yellow 2s ease-out;
}

/* Подсказка под «Скрыть» у потенциальных закрытий */
.potential-closes-hide-hint{
font-size:.75rem;color:var(--text-secondary);margin:-.35rem 0 .85rem 0;line-height:1.35;
}

/* Подсказка к полю логина */
.auth-field-hint{
font-size:.75rem;color:var(--text-secondary);margin-top:.35rem;line-height:1.35;text-align:left;
}

/* Подсказка про меню «Ещё» */
.product-more-hint{
display:none;align-items:flex-start;justify-content:space-between;gap:.65rem;
max-width:900px;margin:0 auto 1rem;padding:.65rem 1rem;border-radius:var(--radius);
border:1px solid rgba(74,144,217,.4);background:rgba(74,144,217,.1);
}
.product-more-hint-text{font-size:.88rem;line-height:1.45;color:var(--text-primary);flex:1}
.product-more-hint-close{
flex-shrink:0;width:32px;height:32px;border:none;border-radius:8px;cursor:pointer;
background:transparent;color:var(--text-secondary);font-size:1.35rem;line-height:1;
}
.product-more-hint-close:hover{color:var(--text-primary);background:rgba(255,255,255,.06)}

/* Блок «как работает брокер» */
.broker-steps-card{margin-bottom:1rem;border-color:rgba(74,144,217,.35)!important;position:relative}
.broker-steps-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.65rem}
.broker-steps-title{font-size:1rem;margin:0;color:var(--text-primary);flex:1;line-height:1.35}
.broker-steps-close{
flex-shrink:0;width:34px;height:34px;border:none;border-radius:8px;cursor:pointer;
background:transparent;color:var(--text-secondary);font-size:1.35rem;line-height:1;
display:flex;align-items:center;justify-content:center;padding:0;
}
.broker-steps-close:hover{color:var(--text-primary);background:rgba(255,255,255,.06)}
.broker-steps-list{margin:0;padding-left:1.2rem;color:var(--text-secondary);font-size:.88rem;line-height:1.5}

/* Модалки: крестик */
.modal-content--has-close{position:relative;padding-top:2.65rem}
.modal-close{
position:absolute;top:.55rem;right:.55rem;width:38px;height:38px;border-radius:10px;
border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-secondary);
font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
z-index:2;
}
.modal-close:hover{color:var(--text-primary);border-color:var(--accent-green)}

/* Нижняя навигация (мобильные) */
.bottom-nav{
display:none;position:fixed;left:0;right:0;bottom:0;z-index:1005;
background:var(--bg-secondary);border-top:1px solid var(--border-color);
padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px)) 6px;
justify-content:space-between;align-items:stretch;gap:2px;
box-shadow:0 -4px 24px rgba(0,0,0,.25);
}
.bottom-nav .nav-btn{
flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:1px;padding:.3rem .15rem;font-size:.58rem;line-height:1.15;font-weight:600;
background:transparent;border:1px solid transparent;border-radius:10px;color:var(--text-secondary);
cursor:pointer;font-family:inherit;
}
.bottom-nav .nav-btn:hover{color:var(--text-primary)}
.bottom-nav .nav-btn.active{
background:rgba(0,212,170,.15);border-color:rgba(0,212,170,.35);color:var(--text-primary);
}
.bottom-nav-ico{font-size:1.1rem;line-height:1;display:block}
.bottom-nav-txt{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bottom-nav .nav-more-wrap{position:static;flex:1;min-width:0;display:flex;justify-content:center}
.bottom-nav .nav-more-btn{flex:1;min-width:0}
.bottom-nav .nav-more-menu{
top:auto;bottom:calc(100% + 6px);right:auto;left:50%;transform:translateX(-50%);
min-width:min(280px,94vw);
}

@media(max-width:768px){
#notification-container{
top:72px;right:8px;left:auto;max-width:min(360px,calc(100vw - 16px));
}
}

/* Глобальная полоса загрузки (активные запросы к API) */
.global-loading{
position:fixed;top:0;left:0;right:0;z-index:10080;height:3px;pointer-events:none;
overflow:hidden;background:rgba(0,0,0,.15);
}
.global-loading::after{
content:'';display:block;height:100%;width:42%;
background:linear-gradient(90deg,var(--accent-green),var(--accent-blue));
animation:mambikGlobalLoad 1.05s ease-in-out infinite;
}
@keyframes mambikGlobalLoad{
0%{transform:translateX(-120%)}
100%{transform:translateX(320%)}
}
@media (prefers-reduced-motion:reduce){
.global-loading::after{animation:none;opacity:.9;width:100%;transform:none}
}

/* Яйцо на главной */
.pet-png-stack.pet-png-egg-stage{
  width:min(100%,340px);
  height:min(360px,52vh);
  min-height:260px;
}
.pet-png-stack.pet-png-egg-stage .pet-egg-placeholder{
  position:relative;
  z-index:1;
  width:clamp(140px,min(72vw,280px),320px);
  max-height:min(50vh,300px);
  object-fit:contain;
  animation:petEggBob 3.2s ease-in-out infinite;
}
@keyframes petEggBob{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-14px) scale(1.03)}
}

/* Инвентарь: предупреждение на стадии яйца */
.inventory-egg-notice{
  display:none;
  margin:0 auto 1rem;
  max-width:36rem;
  padding:1rem 1.15rem;
  border-radius:14px;
  border:1px solid rgba(255,192,72,.35);
  background:linear-gradient(135deg,rgba(255,192,72,.12),rgba(255,100,80,.08));
  box-shadow:0 4px 20px rgba(0,0,0,.15);
}
.inventory-egg-notice-inner{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
  text-align:left;
  font-size:.9rem;
  line-height:1.45;
  color:var(--text-primary);
}
.inventory-egg-notice-ico{font-size:1.75rem;line-height:1;flex-shrink:0}

/* Карточки инвентаря */
.inventory-card{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--border-color);
  background:linear-gradient(165deg,var(--bg-card),rgba(22,33,62,.92));
  padding:0 0 .85rem;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.inventory-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  border-color:rgba(0,212,170,.35);
}
.inventory-card-slot-ribbon{
  position:absolute;top:0;left:0;z-index:3;
  font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.28rem .55rem .32rem;border-radius:0 0 10px 0;
  color:#fff;
  background:var(--gradient-blue);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.inventory-card--slot-body .inventory-card-slot-ribbon{background:var(--gradient-green)}
.inventory-card--slot-legs .inventory-card-slot-ribbon{background:var(--gradient-yellow);color:#1a1a2e}
.inventory-card--slot-aura .inventory-card-slot-ribbon{background:var(--gradient-blue);background:linear-gradient(135deg,#9b59b6,#4a90d9)}

.inventory-card-thumb-wrap{
  margin:.85rem .85rem 0;
  padding:.65rem;
  border-radius:14px;
  background:radial-gradient(ellipse at 50% 35%,rgba(74,144,217,.2),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  border:1px solid rgba(255,255,255,.06);
}
.inventory-card .inventory-thumb{
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:12px;
  background:rgba(0,0,0,.15);
}
.inventory-card-title{font-weight:700;font-size:.95rem;margin:.65rem .75rem .15rem;padding:0 .15rem}
.inventory-card-meta{font-size:.72rem;color:var(--accent-green);text-transform:uppercase;letter-spacing:.04em;margin:0 .9rem .5rem;font-weight:600}
.inventory-card-actions{padding:0 .75rem}

.inventory-card--locked .inventory-card-thumb-wrap{filter:grayscale(.25) brightness(.92);position:relative}
.inventory-card--locked .inventory-card-actions .btn-primary,
.inventory-card--locked .inventory-card-actions .btn-secondary{
  opacity:.85;
}

/* Выпадение скина — сундук + редкость (серый / фиолетовый / золотой) */
.skin-drop-overlay{
  display:none;
  position:fixed;inset:0;z-index:10070;
  align-items:center;justify-content:center;
  padding:1rem;
}
.skin-drop-overlay[aria-hidden="false"]{display:flex}
.skin-drop-backdrop{
  position:absolute;inset:0;
  background:rgba(8,10,20,.72);
  backdrop-filter:blur(6px);
  animation:skinDropBackdrop .45s ease-out;
}
@keyframes skinDropBackdrop{from{opacity:0}to{opacity:1}}
.skin-drop-modal{
  position:relative;
  z-index:1;
  max-width:22rem;width:100%;
  padding:1.75rem 1.5rem 1.5rem;
  border-radius:22px;
  border:1px solid rgba(0,212,170,.35);
  background:linear-gradient(165deg,var(--bg-card),#12182c);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05) inset;
  text-align:center;
  animation:skinDropPop .55s cubic-bezier(.2,1.15,.35,1);
}
.skin-drop-modal--loot{max-width:30rem}
@keyframes skinDropPop{
  0%{opacity:0;transform:scale(.88) translateY(24px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
.skin-drop-title{
  position:relative;z-index:1;
  font-size:1.35rem;margin:0 0 .75rem;
  background:var(--gradient-green);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.skin-drop-box-scene{
  position:relative;z-index:1;
  min-height:200px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  perspective:520px;margin:.25rem 0 1rem;
}
/* Единый вид награды — сундук (металл, скобы, замок) */
.loot-box{
  position:relative;z-index:2;width:156px;height:112px;transform-style:preserve-3d;
  transition:opacity .4s ease,transform .4s ease;
}
.loot-box--hide{opacity:0;transform:scale(.88);pointer-events:none}
.loot-box-decor{
  position:absolute;inset:0;pointer-events:none;z-index:2;
}
.loot-box-body{
  position:absolute;left:6%;right:6%;bottom:0;height:58%;z-index:1;
  border-radius:6px 6px 16px 16px;
  background:linear-gradient(180deg,#4a3020,#2d1a10);
  box-shadow:inset 0 0 0 2px rgba(180,140,80,.35),inset 0 -6px 14px rgba(0,0,0,.5),0 10px 22px rgba(0,0,0,.5);
}
.loot-box-body::before,
.loot-box-body::after{
  content:'';position:absolute;top:12%;bottom:12%;width:10%;border-radius:3px;
  background:linear-gradient(180deg,#c9a227,#6b5420);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.loot-box-body::before{left:6%}
.loot-box-body::after{right:6%}
.loot-box-rim{
  position:absolute;left:4%;right:4%;bottom:55%;height:11%;z-index:3;
  border-radius:4px;
  background:linear-gradient(90deg,rgba(201,162,39,.4),rgba(255,255,255,.15),rgba(201,162,39,.4));
  opacity:.8;
}
.loot-box-lid{
  position:absolute;left:4%;right:4%;top:0;height:44%;z-index:4;
  border-radius:18px 18px 8px 8px;
  transform-origin:50% 100%;
  transition:transform .58s cubic-bezier(.35,1.45,.45,1);
  background:linear-gradient(180deg,#6b4838,#3d2818);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 -2px 8px rgba(0,0,0,.35);
}
.loot-box-lid::after{
  content:'';position:absolute;left:50%;bottom:10%;transform:translateX(-50%);
  width:28%;height:42%;border-radius:6px;
  background:linear-gradient(145deg,#e8c547,#8a6a18);
  box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35);
}
.loot-box--open .loot-box-lid{transform:rotateX(-118deg)}
.loot-box--shake{animation:lootBoxShake .72s ease-in-out}
.loot-box--shake-fast{animation:lootBoxShakeFast .48s ease-in-out}
.loot-box--enter-pop{animation:lootEnterPop .48s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes lootBoxShake{
  0%,100%{transform:translate(0,0) rotate(0)}
  15%{transform:translate(-4px,2px) rotate(-3deg)}
  30%{transform:translate(5px,-1px) rotate(3deg)}
  45%{transform:translate(-5px,1px) rotate(-2deg)}
  60%{transform:translate(4px,0) rotate(2deg)}
}
@keyframes lootBoxShakeFast{
  0%,100%{transform:translate(0,0) scale(1)}
  20%{transform:translate(-6px,1px) rotate(-4deg) scale(1.02)}
  40%{transform:translate(7px,-2px) rotate(4deg)}
  60%{transform:translate(-5px,0) rotate(-3deg)}
}
@keyframes lootEnterPop{
  0%{transform:scale(.35) translateY(28px);opacity:.5}
  70%{transform:scale(1.06) translateY(-4px);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
.loot-box--rarity-normal .loot-box-body,.loot-box--rarity-normal .loot-box-lid{
  border:2px solid rgba(120,130,150,.85);
}
.loot-box--rarity-rare .loot-box-body,.loot-box--rarity-rare .loot-box-lid{
  border:2px solid rgba(168,85,247,.9);
  box-shadow:0 0 18px rgba(168,85,247,.35),inset 0 1px 0 rgba(255,255,255,.1);
}
.loot-box--rarity-super_rare .loot-box-body,.loot-box--rarity-super_rare .loot-box-lid{
  border:2px solid rgba(251,191,36,.95);
  background:linear-gradient(165deg,rgba(251,191,36,.25),rgba(180,120,40,.12));
  box-shadow:0 0 22px rgba(251,191,36,.45),inset 0 1px 0 rgba(255,255,255,.15);
}
.skin-drop-reveal{
  flex-direction:column;align-items:center;gap:.5rem;
  opacity:0;transform:scale(.92) translateY(8px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,1.2,.3,1);
}
.skin-drop-reveal--visible{
  opacity:1;transform:scale(1) translateY(0);
}
.skin-drop-thumb-wrap{
  position:relative;width:min(480px,88vw);height:min(480px,88vw);
  max-width:560px;max-height:560px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  animation:skinThumbPulse 2.5s ease-in-out infinite;
}
.skin-drop-thumb-wrap .skin-drop-thumb{
  width:100%;height:100%;max-width:none;max-height:none;
}
.skin-drop-thumb-wrap .skin-drop-aura-preview{
  width:100%;height:100%;max-width:none;max-height:none;
}
.skin-drop-thumb{
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 12px 24px rgba(0,212,170,.25));
}
.skin-drop-thumb-wrap--head .skin-drop-thumb{transform:translateY(10%);object-position:center 72%}
.skin-drop-thumb-wrap--legs .skin-drop-thumb{transform:translateY(-10%);object-position:center 28%}
.skin-drop-thumb-wrap--body .skin-drop-thumb{object-position:center center}
.skin-drop-thumb-wrap--aura .skin-drop-aura-preview{transform:scale(0.88)}
.skin-drop-aura-preview{
  position:relative;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(40,50,80,.5),var(--bg-card));
  border:2px solid var(--border-color);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.skin-drop-aura-preview::before{
  content:'';position:absolute;top:-14px;left:-14px;right:-14px;bottom:-14px;border-radius:50%;pointer-events:none;z-index:0;
}
.skin-drop-aura-preview[data-aura="glow"]::before{background:radial-gradient(circle,rgba(255,215,150,.55) 0%,rgba(255,200,100,0) 78%);filter:blur(18px);animation:petAuraGlow 2.2s ease-in-out infinite alternate}
.skin-drop-aura-preview[data-aura="rainbow"]::before{background:linear-gradient(135deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#ff00ff);background-size:400% 400%;filter:blur(20px);opacity:.55;animation:petAuraRainbow 10s linear infinite}
.skin-drop-aura-preview[data-aura="pulse"]::before{background:radial-gradient(circle,#4a9eff,#0066cc);filter:blur(14px);animation:petAuraPulse 2.5s ease-in-out infinite}
.skin-drop-aura-preview[data-aura="fire"]::before{background:radial-gradient(circle,#ff4500,#b22200);filter:blur(18px);animation:petAuraFire .85s ease-in-out infinite alternate}
.skin-drop-aura-preview[data-aura="ice"]::before{background:radial-gradient(circle,#00bfff,#1e3c72);filter:blur(16px);animation:petAuraIce 2s ease-in-out infinite}
.skin-drop-aura-preview[data-aura="dark"]::before{background:radial-gradient(circle,#3b1e6b,#12002b);filter:blur(22px);animation:petAuraDark 3.2s ease-in-out infinite}
@keyframes skinThumbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.skin-drop-name{
  font-size:1.08rem;font-weight:700;margin:0;color:var(--text-primary);
}
.skin-rarity-badge{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.35rem .75rem;border-radius:999px;
}
.skin-rarity-badge--normal{
  color:#cbd5e1;background:rgba(100,116,139,.35);border:1px solid rgba(148,163,184,.5);
}
.skin-rarity-badge--rare{
  color:#f3e8ff;background:rgba(168,85,247,.2);border:1px solid rgba(168,85,247,.55);
  box-shadow:0 0 14px rgba(168,85,247,.25);
}
.skin-rarity-badge--super_rare{
  color:#1a1508;background:linear-gradient(135deg,rgba(251,191,36,.45),rgba(245,158,11,.25));
  border:1px solid rgba(251,191,36,.75);
  box-shadow:0 0 16px rgba(251,191,36,.4);
}
.inventory-card--rarity-normal{border-color:rgba(100,116,139,.35)}
.inventory-card--rarity-rare{border-color:rgba(168,85,247,.45)}
.inventory-card--rarity-super_rare{border-color:rgba(251,191,36,.5)}
.inventory-card-meta > span:first-of-type{
  display:block;color:var(--text-secondary);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem;
}
.inventory-card-meta .inventory-rarity-pill{
  display:inline-block;margin-top:0;font-size:.65rem;font-weight:800;
  padding:.15rem .45rem;border-radius:6px;
}
.inventory-rarity-pill--normal{color:#94a3b8;background:rgba(71,85,105,.35)}
.inventory-rarity-pill--rare{color:#e9d5ff;background:rgba(126,34,206,.25)}
.inventory-rarity-pill--super_rare{color:#451a03;background:linear-gradient(135deg,rgba(251,191,36,.35),rgba(217,119,6,.2))}
.skin-drop-btn{width:100%;margin-top:.25rem}