.admin-subs th:last-child{ width:200px; }
.admin-subs td:last-child{ width:200px; white-space:nowrap; }
.admin-subs td:last-child form{ display:flex; justify-content:flex-end; }
.admin-subs td:last-child .ghost{ width:180px; text-align:center; }
:root { --bg1:#140b0b; --bg2:#1a0f12; --fg:#e5e7eb; --muted:#9ca3af; --card:#1a0f12aa; --acc:#f43f5e; }
/* Shop images inside pricing cards */
.pricing-card .shop-img{ display:block; width:calc(100% - 32px); margin:8px 16px; border-radius:12px; border:1px solid #2b1f24; object-fit:cover; max-height:220px; transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.pricing-card .shop-img:hover{ transform: scale(1.02) translateZ(0); box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(239,68,68,.18) inset; }

/* Neon frame wrapper for shop images */
.shop-img-wrap{ position:relative; margin:8px 16px; border-radius:14px; overflow:hidden; }
/* crisp neon stroke + glow kept ABOVE the image */
.shop-img-wrap::before{ content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; z-index:3;
  border:2px solid #ff4d4f; box-shadow: 0 0 14px rgba(255,77,79,.8), 0 0 28px rgba(255,77,79,.45), inset 0 0 8px rgba(255,77,79,.35);
  animation: neonPulse 3.2s ease-in-out infinite;
}
.shop-img-wrap::after{ content:""; position:absolute; inset:-18px; border-radius:22px; z-index:2; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,77,79,.18), rgba(255,77,79,0) 70%);
  filter: blur(14px);
}
.shop-img-wrap > .shop-img{ position:relative; z-index:1; width:100%; margin:0; display:block; border-radius:12px; background:#0f0a0c; object-fit:cover; transition: transform .25s ease; }
.shop-img-wrap:hover > .shop-img{ transform: scale(1.02); }
@keyframes neonPulse{ 0%,100%{ box-shadow: 0 0 12px rgba(255,77,79,.75), 0 0 26px rgba(255,77,79,.40), inset 0 0 8px rgba(255,77,79,.30); } 50%{ box-shadow: 0 0 18px rgba(255,77,79,.95), 0 0 36px rgba(255,77,79,.55), inset 0 0 12px rgba(255,77,79,.42); } }

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:20;opacity:0;transition:opacity .2s;pointer-events:none}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:21;opacity:0;transform:scale(.98);transition:opacity .2s, transform .2s;pointer-events:none}
.modal-card{background:#140b0fcc;border:1px solid #2b1f24;border-radius:14px;max-width:520px;width:calc(100% - 40px);padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.45); text-align:center}
.modal-title{margin:0 0 8px;font-size:20px; text-align:center}
.modal-text{margin-bottom:12px;color:#cbd5e1; text-align:center}
.modal-actions{display:flex;gap:10px;justify-content:center}
.modal.show{opacity:1;transform:scale(1);pointer-events:auto}
.modal-backdrop.show{opacity:1;pointer-events:auto}
html{ scrollbar-gutter: auto; background: var(--bg1); }

/* ===== Page Loading Overlay ===== */
.page-loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0f0a0c;z-index:30050;opacity:1;visibility:visible;transition:opacity .25s ease, visibility .25s ease}
.page-loading.hide{opacity:0;visibility:hidden;pointer-events:none}
/* From Uiverse.io by milley69 */
.loading svg polyline{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.loading svg polyline#back{fill:none;stroke:#ff4d5033}
.loading svg polyline#front{fill:none;stroke:#ff4d4f;stroke-dasharray:48,144;stroke-dashoffset:192;animation:dash_682 1.4s linear infinite}
@keyframes dash_682{72.5%{opacity:0}to{stroke-dashoffset:0}}
@font-face{
  font-family:"FindSans Pro";
  src: url('/static/fonts/FindSansPro.woff2') format('woff2'), url('/static/fonts/FindSansPro.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto; color:var(--fg); overflow-x: hidden; background: var(--bg1); }
/* Global scrollbar */
body::-webkit-scrollbar, html::-webkit-scrollbar{ width:10px; }
body::-webkit-scrollbar-track, html::-webkit-scrollbar-track{ background:#0f0a0c; }
body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb{ background:#2b1f24; border-radius:10px; border:1px solid #140b0f; }
body{ scrollbar-width:thin; scrollbar-color: #2b1f24 #0f0a0c; }
#bg-anim{
  position: fixed; inset: 0; pointer-events:none;
  background:
    radial-gradient(800px 600px at 10% 20%, #2b1212 0%, transparent 60%),
    radial-gradient(600px 600px at 92% -20%, rgba(239,68,68,.10) 0%, transparent 60%),
    radial-gradient(700px 700px at 20% 100%, rgba(190,18,60,.12) 0%, transparent 60%),
    linear-gradient(120deg, var(--bg1), var(--bg2));
  filter: saturate(1.1);
  animation: floatGrad 20s ease-in-out infinite alternate;
  z-index: 0; /* above page background, below content */
}
/* Cursor-follow spot */
#mouse-spot{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  /* супер-огромный круг, перекрывающий сайт — сделал темнее */
  background: radial-gradient(160vmax 120vmax at var(--mx,50%) var(--my,40%), rgba(239,68,68,.10), rgba(190,18,60,.06) 32%, rgba(20,11,11,0) 65%);
  transition: background-position .05s linear;
  animation: spotHue 10s ease-in-out infinite alternate;
}
@keyframes spotHue{ from{ filter: hue-rotate(0deg) saturate(1.05);} to{ filter: hue-rotate(18deg) saturate(1.25);} }
/* Убрали анимированное кольцо */
#mouse-spot::after{ display:none; }
/* Trail of small fading sparks */
#mouse-trail{ position:fixed; inset:0; pointer-events:none; z-index:0; }
/* On login page, lift the trail above page backgrounds but below the card */
body:has(.login-hero) #mouse-trail{ z-index:4; }
#mouse-trail .t{
  position:absolute; left:0; top:0; width:18px; height:18px; border-radius:999px;
  background: radial-gradient(circle, rgba(190,18,60,.65), rgba(190,18,60,0) 70%);
  filter: blur(7px);
  animation: trail .9s ease-out forwards;
}
@keyframes trail{
  from{ opacity:.70; transform: translate(-50%,-50%) scale(1); }
  to  { opacity:0;   transform: translate(-50%,-50%) scale(2.6); }
}
header.glass { position: sticky; top:0; backdrop-filter: blur(12px) saturate(1.2); background: #140b0baa; border-bottom: 1px solid #2b1f24; z-index: 5; }
.wrap { max-width: 780px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border:1px solid #2b1f24cc; padding: 18px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03); backdrop-filter: blur(10px); transform: translateZ(0); }
.card.rise { animation: rise .6s ease both; }
a { color: var(--acc); text-decoration: none; }
.muted { color: var(--muted); }
.btn, .ghost { display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid #2b1f24; transition: transform .2s ease, filter .2s ease, background .3s; text-align:center; user-select:none; }
.btn { background:#ef4444; color:white; border-color:#b91c1c; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.ghost { background: transparent; color: var(--fg); }
.ghost:hover { background:#140b0f; }
/* small button for compact places */
.btn.btn-sm { padding:6px 10px; border-radius:10px; font-size:13px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.vform label { display:block; margin: 10px 0 6px; color:var(--muted); font-size:14px; }
.focusable, input, button { width:100%; padding:12px 14px; border-radius: 12px; border:1px solid #3a2230; background:#140b0f; color:var(--fg); outline:none; transition: box-shadow .2s ease, border-color .2s ease, transform .1s ease; }
.focusable:focus, input:focus { border-color:#ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.3); }
button.btn { cursor:pointer; }
.err { color:#ef4444; margin:10px 0; }
.msg { color:#22c55e; margin:10px 0; }
@keyframes floatGrad { 0% { filter: hue-rotate(0deg) saturate(1.05);} 100% { filter: hue-rotate(12deg) saturate(1.25);} }
@keyframes rise { from { transform: translateY(6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

/* Центрирование контента */
main .wrap { display:flex; flex-direction:column; align-items:center; gap:16px; }
.card { width:100%; max-width:780px; margin:0 auto; text-align:center; }
@media (max-width: 768px) {
  .card { max-width: 100% !important; }
}
.row { justify-content:center; }

/* Шапка */
.site-header .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.header-left{ display:flex; align-items:center; gap:12px; }
.status-chip{ margin-left:8px; border:none; background: transparent; color:#e5e7eb; font-size:12px; border-radius:999px; padding:4px 10px; display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; font-weight:900; letter-spacing:.6px; }
.status-chip .status-text{ background-image: linear-gradient(90deg,#ef4444,#b91c1c); -webkit-background-clip:text; background-clip:text; color: transparent; }
.status-chip::before{ content:""; width:8px; height:8px; border-radius:999px; background:#7f1d1d; box-shadow:0 0 8px rgba(239,68,68,.5) inset; }
.status-chip.online{ border:none; background: transparent; }
.status-chip.online .status-text{ background-image: linear-gradient(90deg,#22c55e,#16a34a); }
.status-chip.online::before{ background:#16a34a; box-shadow:0 0 10px rgba(34,197,94,.45); }
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo{width:36px;height:36px;object-fit:contain}
.brand-text{font-weight:700;font-size:18px;letter-spacing:.5px}

/* Header layout helpers */
.header-left{display:flex;align-items:center;gap:10px}
.site-header .wrap{max-width:none}

/* Hamburger button with avatar-like hover animation */
.hamburger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid #2b1f24;background:#140b0f;color:#e5e7eb;cursor:pointer;isolation:isolate;transition:transform .15s ease, filter .2s ease, box-shadow .2s}
.hamburger i{font-size:18px;line-height:1;display:inline-block; background-image: linear-gradient(90deg,#ff5151,#ff7a7a); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 8px rgba(239,68,68,.55), 0 0 16px rgba(239,68,68,.35)}
.hamburger span{display:block;width:18px;height:3px;background:#ef4444;border-radius:999px;transition:transform .2s ease, opacity .2s ease, width .2s ease, background-color .2s ease}
.hamburger span:nth-child(2){margin:0;width:18px;opacity:.95}
.hamburger:hover span{background:#fb7185;width:19px}
.hamburger:active{transform:translateY(1px) scale(.98)}
.hamburger::before{content:"";position:absolute;inset:-3px;border-radius:999px;pointer-events:none;background:conic-gradient(from 0deg, rgba(244,63,94,0) 0deg, rgba(244,63,94,.70) 120deg, rgba(244,63,94,0) 180deg, rgba(244,63,94,.60) 300deg, rgba(244,63,94,0) 360deg);-webkit-mask: radial-gradient(circle, transparent 60%, black 62%, black 80%, transparent 82%);mask: radial-gradient(circle, transparent 60%, black 62%, black 80%, transparent 82%);opacity:0;transform:rotate(0);z-index:2;transition:opacity .25s ease}
.hamburger:hover::before{opacity:1;animation:spin360 1.8s linear infinite}
.hamburger::after{content:"";position:absolute;inset:-6px;border-radius:999px;pointer-events:none;opacity:0;background:radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%);transform:rotate(25deg);z-index:2;transition:opacity .25s ease}
.hamburger:hover::after{opacity:.25;animation:avatarShine 1.2s ease-in-out infinite}
.hamburger:hover i{ background-image: linear-gradient(90deg,#ff6363,#ff8585); text-shadow: 0 0 10px rgba(239,68,68,.75), 0 0 20px rgba(239,68,68,.45) }
.hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);width:18px}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);width:18px}

/* Notifications bell button – same look & feel as hamburger */
.notif-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid #2b1f24;background:#140b0f;color:#e5e7eb;cursor:pointer;isolation:isolate;transition:transform .15s ease, filter .2s ease, box-shadow .2s}
.notif-btn i{font-size:18px; background-image: linear-gradient(90deg,#ff5151,#ff7a7a); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 8px rgba(239,68,68,.55), 0 0 16px rgba(239,68,68,.35)}
.notif-btn:hover{filter:brightness(1.05)}
.notif-btn:hover i, body.notif-open .notif-btn i{ background-image: linear-gradient(90deg,#ff6363,#ff8585); text-shadow: 0 0 10px rgba(239,68,68,.75), 0 0 20px rgba(239,68,68,.45) }
.notif-btn:active{transform:translateY(1px) scale(.98)}
/* Hover animated ring (non-badge state only) */
.notif-btn:not([data-badge])::before{content:"";position:absolute;inset:-3px;border-radius:999px;pointer-events:none;background:conic-gradient(from 0deg, rgba(244,63,94,.0) 0deg, rgba(244,63,94,.70) 120deg, rgba(244,63,94,.0) 180deg, rgba(244,63,94,.60) 300deg, rgba(244,63,94,.0) 360deg);-webkit-mask:radial-gradient(circle, transparent 60%, black 62%, black 80%, transparent 82%);mask:radial-gradient(circle, transparent 60%, black 62%, black 80%, transparent 82%);opacity:0;transform:rotate(0deg);z-index:2;transition:opacity .25s ease}
.notif-btn:not([data-badge]):hover::before{opacity:1;animation:spin360 1.8s linear infinite}
/* Hover shine effect */
.notif-btn::after{content:"";position:absolute;inset:-6px;border-radius:999px;pointer-events:none;opacity:0;background:radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%);transform:rotate(25deg);z-index:2;transition:opacity .25s ease}
.notif-btn:hover::after{opacity:.25;animation:avatarShine 1.2s ease-in-out infinite}
/* Badge counter - always visible, perfectly circular */
.notif-btn[data-badge]::before{content: attr(data-badge); position:absolute; top:-3px; right:-3px; width:20px; height:20px; border-radius:50%; background:#ef4444; color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; border:1px solid #7f1d1d; box-shadow:0 0 8px rgba(239,68,68,.6); z-index:10; pointer-events:none; opacity:1 !important; animation:none !important}

/* Drawer */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:5}
.side-drawer{position:fixed;left:0;top:0;height:100vh;width:300px;background:#140b0fcc;border-right:1px solid #2b1f24;backdrop-filter:blur(14px);transform:translateX(-105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:6;box-shadow: 0 20px 60px rgba(0,0,0,.45)}
.notif-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:10002}
.notif-panel{position:fixed;right:0;top:0;height:100vh;width:360px;background:#140b0fcc;border-left:1px solid #2b1f24;backdrop-filter:blur(14px);transform:translateX(105%);opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;z-index:10003;box-shadow: 0 20px 60px rgba(0,0,0,.45);display:flex;flex-direction:column}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #2b1f24}
.notif-body{padding:10px;min-height:120px;flex:1;overflow-y:auto}
.notif-empty{border:1px dashed #2b1f24;border-radius:12px;padding:16px;text-align:center;color:#9ca3af;background:rgba(20,11,15,.4)}
.notif-item{border:1px solid #2b1f24;background:#1a0f12;border-radius:12px;padding:10px;margin-bottom:8px}
.notif-item button.btn, .notif-item .btn{ width:auto !important; white-space:nowrap; flex:0 0 auto }
.notif-foot{padding:10px;border-top:1px solid #2b1f24;display:flex;justify-content:flex-end;flex-shrink:0}
/* Clear notifications button animation */
#notifClear{transition:transform .2s ease, background .25s ease, box-shadow .25s ease, filter .2s ease}
#notifClear:hover{background:#1a0b0b;transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.15);filter:brightness(1.08)}
#notifClear:active{transform:translateY(0) scale(.98);box-shadow:0 2px 6px rgba(239,68,68,.1)}
/* Collapsible admin comment inside notification */
.notif-item details{border:1px solid #2b1f24;border-radius:10px;padding:8px 10px;background:#140b0f}
.notif-item summary{cursor:pointer;font-weight:800;color:#e5e7eb;list-style:none}
.notif-item summary::-webkit-details-marker{display:none}
.notif-item .notif-comment-body{color:#cbd5e1;margin-top:6px}
.drawer-menu{display:flex;flex-direction:column;height:100%;padding:18px}
.drawer-body{display:flex;flex-direction:column;gap:10px}
.drawer-footer{margin-top:auto;padding-top:12px;border-top:1px solid #2b1f24}
.drawer-link{display:block;padding:12px 14px;border-radius:12px;border:1px solid #2b1f24;background:#1a0f12;color:#e5e7eb;font-weight:700}
.drawer-link:hover{filter:brightness(1.08)}
.drawer-link.active{background:#170b0b;border-color:#7f1d1d;box-shadow:0 0 0 1px rgba(239,68,68,.35) inset, 0 8px 26px rgba(239,68,68,.12)}
.drawer-link.danger{background:#1a0b0b;color:#fecaca;border-color:#7f1d1d}
body.drawer-open .side-drawer{transform:translateX(0)}
body.drawer-open .drawer-backdrop{opacity:1;pointer-events:auto}
body.notif-open .notif-panel{transform:translateX(0); opacity:1}
body.notif-open .notif-backdrop{opacity:1;pointer-events:auto}

/* Ensure modal overlays above notifications panel */
#modalBackdrop{position:fixed;inset:0;z-index:20000}
#modal{position:fixed;z-index:20001}

/* Language switcher */
.lang-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.lang-label{color:#cbd5e1;font-weight:700}
.lang-buttons{display:flex;gap:8px}
.lang-btn{padding:8px 10px;border-radius:10px;border:1px solid #2b1f24;background:#140b0f;color:#e5e7eb;cursor:pointer;font-weight:800;min-width:46px}
.lang-btn:hover{filter:brightness(1.08)}
.lang-btn.active{background:#170b0b;border-color:#7f1d1d;box-shadow:0 0 0 1px rgba(239,68,68,.35) inset}

/* Balance chips */
.balance-chip{display:flex;align-items:center;gap:8px;border:1px solid #2b1f24;border-radius:999px;background:#1a0f12;padding:6px 8px;margin-right:10px}
.balance-chip .balance-amount{font-weight:900;color:#e5e7eb}
.topup-btn{width:28px;height:28px;border-radius:999px;border:1px solid #2b1f24;background:radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%), #140b0f;position:relative;cursor:pointer}
.topup-btn::before,.topup-btn::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:#ef4444;border-radius:4px;transform:translate(-50%,-50%)}
.topup-btn::after{transform:translate(-50%,-50%) rotate(90deg)}
.topup-btn:hover{filter:brightness(1.1)}

.balance-box{border:1px dashed #2b1f24;border-radius:12px;padding:10px;margin-bottom:12px}
.balance-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.balance-row .balance-amount{font-weight:900;color:#e5e7eb}

/* Shop page */
.shop-hero{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
.shop-wrap{max-width:860px;width:100%}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:10px}
.shop-card{border:1px solid #2b1f24;border-radius:14px;padding:14px;background:#140b0fcc}
.shop-title{font-weight:900;margin-bottom:4px}
.shop-desc{opacity:.9;margin-bottom:8px}
.price-tag{font-weight:900;color:#e5e7eb}
.owned-badge{font-weight:900;color:#22c55e}

/* Pricing layout */
.pricing-title{font-size:22px;margin:0 0 10px;text-align:center}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
@media (min-width: 900px){
  .pricing-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pricing-card{border:1px solid #2b1f24;border-radius:14px;background:#140b0fcc;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.pricing-card .h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pricing-card .plan{font-weight:900}
.pricing-card .price{font-weight:900;color:#e5e7eb}
.pricing-card ul{list-style:none;margin:8px 0 12px;padding:0;color:#cbd5e1}
.pricing-card ul li{margin:6px 0}
.pricing-card .btn{width:100%}

/* Перелив заголовков */
.rgb-wave{
  background-image: linear-gradient(90deg,#b91c1c 0%, #ef4444 25%, #fb7185 50%, #ef4444 75%, #b91c1c 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wave 10s linear infinite;
  will-change: background-position;
}
@keyframes wave{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* Аккаунт (только аватар, без бейджа/ника) */
.account-box{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto}
.avatar-link{display:inline-flex;align-items:center;justify-content:center}
.avatar{
  width:38px;height:38px;border-radius:999px;
  border:1px solid #2b1f24;
  box-shadow: 0 0 8px rgba(244,63,94,.26), 0 2px 8px rgba(0,0,0,.22);
  background:transparent;object-fit:cover; display:block;
}
/* Header avatar hover (glow ring + sweep) */
.account-box .avatar-link{ position:relative; display:inline-flex; border-radius:999px; isolation:isolate; }
.account-box .avatar-link .avatar{ position:relative; z-index:1; }
.account-box .avatar-link::before{
  content:""; position:absolute; inset:-3px; border-radius:999px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(244,63,94,.0) 0deg, rgba(244,63,94,.70) 120deg, rgba(244,63,94,.0) 180deg, rgba(244,63,94,.60) 300deg, rgba(244,63,94,.0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 62%, black 80%, transparent 82%);
          mask: radial-gradient(circle, transparent 60%, black 62%, black 80%, transparent 82%);
  opacity:0; transform: rotate(0deg); z-index:2;
  transition: opacity .25s ease;
}
.account-box .avatar-link:hover::before{ opacity:1; animation: spin360 1.8s linear infinite; }
.account-box .avatar-link::after{
  content:""; position:absolute; inset:-6px; border-radius:999px; pointer-events:none; opacity:0;
  background: radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%);
  transform: rotate(25deg); z-index:2;
  transition: opacity .25s ease;
}
.account-box .avatar-link:hover::after{ opacity:.25; animation: avatarShine 1.2s ease-in-out infinite; }
@keyframes spin360{ to { transform: rotate(360deg); } }
@keyframes avatarShine{ 0%{ transform:translateX(-4px) rotate(25deg);} 100%{ transform:translateX(4px) rotate(25deg);} }
/* усиление свечения самого изображения при ховере */
.account-box .avatar-link:hover .avatar{ box-shadow: 0 0 12px rgba(244,63,94,.65), 0 0 26px rgba(244,63,94,.40), 0 2px 8px rgba(0,0,0,.22); transform: translateZ(0) scale(1.03); transition: box-shadow .2s ease, transform .2s ease; }

/* Текст про подписку (если используется) */
.sub-note{
  margin:6px 0 14px;
  font-weight:700;
  font-size:16px;
  letter-spacing:.3px;
}
.sub-note .shine{
  background-image: linear-gradient(90deg,#fb7185 0%, #ef4444 40%, #fda4af 50%, #ef4444 60%, #fb7185 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip:text; color:transparent;
  text-shadow: 0 0 12px rgba(244,63,94,.18);
  animation: shineMove 3.8s linear infinite;
}
@keyframes shineMove{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
.sub-note .date{
  padding:2px 8px;
  border-radius:8px;
  background: linear-gradient(180deg, #2b1212, #1a0b0f);
  border:1px solid #7f1d1d;
  color: var(--fg);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  box-shadow: 0 6px 18px rgba(239,68,68,.22), 0 2px 8px rgba(0,0,0,.35);
}
/* Inactive subscription block with FindSans Pro */
.sub-note.inactive{ display:flex; align-items:center; gap:12px; margin:6px 0 14px; font-family:'FindSans Pro', 'Segoe UI', 'Inter', ui-sans-serif, system-ui; }
.sub-note.inactive .inactive-text{ color:#fda4af; font-weight:700; }
.sub-note.inactive .buy-link{ color:#f43f5e; text-decoration:underline; text-underline-offset:3px; font-weight:800; cursor:pointer; }

/* Launcher button: smooth gradient wave */
.btn.launcher-btn{ position:relative; overflow:hidden; border-color:#b91c1c; box-shadow:0 10px 28px rgba(239,68,68,.35);
  background-image: linear-gradient(90deg,#ef4444 0%, #fb7185 50%, #ef4444 100%);
  background-size: 220% 100%;
}
.btn.launcher-btn:hover{ transform: translateY(-2px); box-shadow:0 14px 40px rgba(239,68,68,.45); animation: btnWave 1.6s ease-in-out infinite; }
@keyframes btnWave{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }
.btn.launcher-btn::after{ display:none !important; }

/* Center download button with top margin */
.cta-download{ text-align:center; margin: 28px 0 8px; }

/* Fixed overlay for CTA: exact center of viewport */
.home-hero{ position:fixed; left:0; right:0; top:0; height:100vh; display:block; pointer-events:none; }
@media (max-width: 768px) {
  .home-hero { 
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}
.home-hero .cta-download{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); margin:0; }
.home-hero .guest-card{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); max-width:640px; width:calc(100% - 40px); text-align:center; }
@media (max-width: 768px) {
  .home-hero .guest-card { 
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
  }
}
.home-hero .sub-note{ position:absolute; left:50%; top: calc(50% + 60px); transform: translateX(-50%); margin:0; }
.home-hero .animated-button1, .home-hero .cta-download, .home-hero .sub-note, .home-hero .buy-link, .home-hero .guest-card{ pointer-events:auto; }

/* Guide page center layout */
.guide-hero{ position:fixed; left:0; right:0; top:0; height:100vh; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.guide-hero .card{ pointer-events:auto; max-width:680px; width:100%; text-align:center; }
.guide-hero .fallback-link{ display:inline-block; margin-top:12px; color:#fda4af; text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-weight:800; }
.guide-hero .fallback-link:hover{ color:#fecaca; }
/* Login page */
.login-hero{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:3; }
.login-card{ pointer-events:auto; max-width:520px; width:calc(100% - 40px); position:relative; z-index:5; }
#login-bg{ position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(600px 400px at var(--lx,50%) var(--ly,40%), rgba(239,68,68,.18), rgba(239,68,68,0) 70%),
    radial-gradient(800px 600px at calc(100% - var(--lx,50%)) calc(100% - var(--ly,40%)), rgba(190,18,60,.12), rgba(190,18,60,0) 65%),
    linear-gradient(120deg, var(--bg1), var(--bg2));
  filter: saturate(1.08);
  animation: spotHue 16s ease-in-out infinite alternate;
}
/* Guide full page */
html:has(.guide-page){ scroll-behavior:smooth; }
.guide-page{ display:flex; flex-direction:column; gap:12px; }
.guide-page .card{ max-width:980px; margin:0 auto; }
.guide-toc .ghost{ padding:8px 10px }
.guide-step h3{ margin-top:0 }
.guide-img{ width:100%; max-width:960px; height:360px; object-fit:cover; border-radius:12px; border:1px solid #2b1f24; display:block; margin:8px auto }
/* subtle shadow for subscription line */
.home-hero .sub-note{ text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.home-hero .sub-note .date{ text-shadow: 0 1px 8px rgba(0,0,0,.65); }

/* Disable scroll only on pages that contain .home-hero */
html:has(.home-hero), body:has(.home-hero){ overflow:hidden; }
/* Remove reserved gutter on homepage to avoid right black bar */
html:has(.home-hero){ scrollbar-gutter: auto; }
html.no-scroll, body.no-scroll{ overflow:hidden; height:100%; }

/* Settings form */
.settings-card{ max-width:560px; margin:0 auto; }
.settings-form .field{ margin-bottom:12px; }
.pw-wrap{ position:relative; }
.pw-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#e5e7eb; background:#1b0f11; border:1px solid #2b1f24; }
.pw-toggle:hover{ filter:brightness(1.15); }

/* Animated border button (variant #24 adapted to theme) */
/* new download button (Uiverse-like, themed red) */
.download-btn{ position:relative; overflow:hidden; display:inline-block; padding:17px 40px; border-radius:50px; cursor:pointer; border:1px solid #4b5563; text-transform:none; letter-spacing:.3px; font-size:16px; font-weight:700; color:var(--fg); text-shadow: 0 1px 6px rgba(0,0,0,.55); background:#6b7280; /* gray-500 */
  transition: border-color .35s ease, box-shadow .35s ease, color .35s ease, transform .1s ease; box-shadow: rgba(0,0,0,.18) 0 0 18px;
}
/* burgundy overlay */
.download-btn::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, #7f1d1d, #5b1013); opacity:0; transition: opacity .35s ease; z-index:0; }
/* corner highlight */
.download-btn::after{ content:""; position:absolute; inset:0; background: radial-gradient(140% 100% at 22% 12%, rgba(255,255,255,.18), rgba(255,255,255,0) 44%); opacity:.35; transition: opacity .35s ease; z-index:0; }
.download-btn:hover{ border-color:#a61b2b; box-shadow: rgba(0,0,0,.35) 0 10px 28px; filter: brightness(1.02); }
.download-btn:hover::before{ opacity:1; }
.download-btn:hover::after{ opacity:.55; }
.download-btn:active{ transform: translateY(8px); transition:transform 100ms; box-shadow: rgba(0,0,0,0) 0 0 0 0; }

/* inner content */
.download-btn .label{ position:relative; z-index:2; transition: opacity .25s ease, transform .25s ease; }
.download-btn:hover .label{ opacity:0; transform: translateY(-6px); }

.download-btn .icon-lift{ position:absolute; left:50%; top:50%; transform: translate(-50%, 40%); width:28px; height:28px; border-radius:999px; border:2px solid #fca5a5; background: rgba(255,255,255,.06); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; opacity:0; transition: opacity .35s ease, transform .35s ease; z-index:2; box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 2px 8px rgba(239,68,68,.22); }
.download-btn .icon-lift::before{ content:'\2191'; font-size:14px; line-height:1; }
.download-btn:hover .icon-lift{ opacity:1; transform: translate(-50%, -10%); }

.download-btn .icon-bird{ position:absolute; left:50%; top:100%; transform: translate(-50%, 0); opacity:0; z-index:2; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.download-btn .icon-bird::before{ content:'\1F54A'; /* dove */ font-size:18px; }
@supports (content: '🕊️'){
  .download-btn .icon-bird::before{ content:'🕊️'; }
}
.download-btn.downloading .icon-bird{ opacity:1; animation: birdFly .7s ease-in forwards; }
@keyframes birdFly{
  0%{ transform: translate(-50%, 140%); opacity:0; }
  40%{ transform: translate(-50%, 0%); opacity:1; }
  100%{ transform: translate(-50%, 180%); opacity:0; }
}

/* Bigger variant for the launcher button and without static border */
.animated-button1.big{ padding:18px 34px; font-size:20px; border:none; border-radius:14px; }

/* Download button (from Uiverse.io by mrhyddenn) adapted to red theme */
.animated-button{
  -moz-appearance:none;
  -webkit-appearance:none;
  appearance:none;
  border:none;
  background:none;
  color:#0f1923;
  cursor:pointer;
  position:relative;
  padding:8px;
  text-transform:uppercase;
  font-weight:bold;
  font-size:14px;
  transition:all .15s ease;
  display:inline-block;
}
.animated-button::before,
.animated-button::after{
  display:none;
}
.animated-button:active,
.animated-button:focus{
  outline:none;
}
.animated-button:active::before,
.animated-button:active::after{
  right:3px;
  left:3px;
}
.animated-button:active::before{
  top:3px;
}
.animated-button:active::after{
  bottom:3px;
}
.button_lg{
  position:relative;
  display:block;
  padding:10px 20px;
  width:190px;
  color:#fff;
  background-color:#0f1923;
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.15), 0 -2px 8px rgba(255,255,255,.15);
  text-align:center;
}
.button_lg::before,
.button_lg::after{
  display:none;
}
.button_sl{
  display:block;
  position:absolute;
  top:0;
  bottom:-1px;
  left:-8px;
  width:0;
  background-color:#ff4655;
  transform:skew(-15deg);
  transition:all .2s ease;
}
.button_text{
  position:relative;
}
.animated-button:hover{
  color:#0f1923;
}
.animated-button:hover .button_sl{
  width:calc(100% + 15px);
}

/* Download page centered card + video */
.download-hero{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; }
.download-card{ width:min(960px, calc(100% - 40px)); }
.tutorial-video{ width:100%; height:auto; aspect-ratio:16/9; border-radius:12px; border:1px solid #2b1f24; margin-top:12px; background:#0f0a0c; }

/* Shop page animated background */
.shop-page{ position:relative; }
.shop-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; --ang:0deg; --dx:0px; --dy:0px; }
.shop-bg .sq{ position:absolute; background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(190,18,60,.10)); border:1px solid rgba(239,68,68,.25); border-radius:8px; transform-origin:center; transform: translate(var(--dx), var(--dy)) rotate(var(--ang)) scale(var(--d)); filter: blur(0.4px) saturate(1.1); box-shadow: 0 8px 26px rgba(0,0,0,.25); will-change: transform; }
.shop-hero{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; }
/* --- Portal animation inside card (no text) --- */
.portal-card{ position:relative; background: transparent !important; --portal-size: min(100vmin, 1200px); --p1:#fb7185; --p2:#c084fc; --p3:#60a5fa; --pDark:#12080c; }
.portal-card > *{ position:relative; z-index:2; }
.portal-card::after{ content:""; position:absolute; inset:8px; border-radius:16px; pointer-events:none; z-index:1; background: radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 56%, rgba(0,0,0,.14) 74%, rgba(0,0,0,0) 88%); }
.portal-card .portal{ position:absolute; inset:-32px; z-index:0; pointer-events:none; }
.portal-card .portal-rotor{
  position:absolute; left:50%; top:50%; width:var(--portal-size); height:var(--portal-size); transform: translate(-50%,-50%) rotate(0deg);
  animation: portalOrbit 36s linear reverse infinite;
}
.portal-card .ring{
  position:absolute; left:50%; top:50%; border-style:solid; border-width:14px; border-radius:50%;
  transform: translate(-50%,-50%);
  background: rgba(253,164,175,.05);
  border-left-color: rgba(253,164,175,.08); border-right-color: rgba(253,164,175,.08);
  border-top-color: var(--p1); border-bottom-color: var(--pDark);
  box-shadow: inset 0 0 60px rgba(253,164,175,.06), 0 0 40px rgba(253,164,175,.04);
}
.portal-card .ring::before,
.portal-card .ring::after{
  content:""; position:absolute; left:50%; top:50%; width:100%; height:1px; background: rgba(255,255,255,.18);
}
.portal-card .ring::before{ transform: translate(-50%,-50%) rotate(45deg); }
.portal-card .ring::after{ transform: translate(-50%,-50%) rotate(-45deg); }

/* Sizes and speeds for 12 rings (responsive) */
.portal-card .ring:nth-child(1)  { width: calc(var(--portal-size)*.14); height: calc(var(--portal-size)*.14); animation: portalRing 36s linear infinite; }
.portal-card .ring:nth-child(2)  { width: calc(var(--portal-size)*.22); height: calc(var(--portal-size)*.22); animation: portalRing 24s linear infinite; }
.portal-card .ring:nth-child(3)  { width: calc(var(--portal-size)*.30); height: calc(var(--portal-size)*.30); animation: portalRing 16s linear infinite; }
.portal-card .ring:nth-child(4)  { width: calc(var(--portal-size)*.38); height: calc(var(--portal-size)*.38); animation: portalRing 12s linear infinite; }
.portal-card .ring:nth-child(5)  { width: calc(var(--portal-size)*.46); height: calc(var(--portal-size)*.46); animation: portalRing 10s linear infinite; }
.portal-card .ring:nth-child(6)  { width: calc(var(--portal-size)*.54); height: calc(var(--portal-size)*.54); animation: portalRing 8s linear infinite; }
.portal-card .ring:nth-child(7)  { width: calc(var(--portal-size)*.62); height: calc(var(--portal-size)*.62); animation: portalRing 6.8s linear infinite; }
.portal-card .ring:nth-child(8)  { width: calc(var(--portal-size)*.70); height: calc(var(--portal-size)*.70); animation: portalRing 5.8s linear infinite; }
.portal-card .ring:nth-child(9)  { width: calc(var(--portal-size)*.78); height: calc(var(--portal-size)*.78); animation: portalRing 5.0s linear infinite; }
.portal-card .ring:nth-child(10) { width: calc(var(--portal-size)*.86); height: calc(var(--portal-size)*.86); animation: portalRing 4.4s linear infinite; }
.portal-card .ring:nth-child(11) { width: calc(var(--portal-size)*.94); height: calc(var(--portal-size)*.94); animation: portalRing 3.8s linear infinite; }
.portal-card .ring:nth-child(12) { width: calc(var(--portal-size)*1.02); height: calc(var(--portal-size)*1.02); animation: portalRing 3.2s linear infinite; }

/* Color shifts by ring groups for a pleasant rose/purple gradient */
.portal-card .ring:nth-child(-n+4)  { border-top-color: var(--p1); background: rgba(253,164,175,.08); }
.portal-card .ring:nth-child(n+5):nth-child(-n+8)  { border-top-color: var(--p2); background: rgba(244,114,182,.07); }
.portal-card .ring:nth-child(n+9) { border-top-color: var(--p3); background: rgba(167,139,250,.06); }

/* Ensure text over portal stays readable */
.portal-card h3,
.portal-card .muted,
.portal-card .sub-note,
.portal-card .sub-note .date,
.portal-card .btn{ text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 1px rgba(0,0,0,.5); }

@keyframes portalRing{ to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes portalOrbit{ to { transform: translate(-50%,-50%) rotate(360deg); } }

/* --- Portal as fixed background layer with edge blur --- */
.portal-bg{
  position: fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden;
  --portal-size: min(100vmin, 1200px);
  /* red palette */
  --p1:#fecaca; /* light rose */
  --p2:#ef4444; /* red */
  --p3:#b91c1c; /* dark red */
  --pDark:#2b0d0d;
}

.portal-bg::before{ display:none; }

.portal-bg::after{ /* radial fade + blur from portal edge to background */
  content:""; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); pointer-events:none; z-index:2;
  width: calc(var(--portal-size) + 420px); height: calc(var(--portal-size) + 420px);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26,10,10,0) 62%, rgba(26,10,10,.08) 80%, rgba(26,10,10,.18) 92%, rgba(26,10,10,.28) 100%);
  filter: blur(100px);
  opacity:.42;
}
.portal-bg .portal-rotor{
  position:absolute; left:50%; top:50%; width:var(--portal-size); height:var(--portal-size);
  transform: translate(-50%,-50%); animation: portalOrbit 36s linear reverse infinite;
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, #000 48%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.4) 75%, rgba(0,0,0,0) 100%);
          mask: radial-gradient(circle closest-side at 50% 50%, #000 48%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.4) 75%, rgba(0,0,0,0) 100%);
}
.portal-bg .ring{
  position:absolute; left:50%; top:50%; border-style:solid; border-width:14px; border-radius:50%;
  transform: translate(-50%,-50%);
  background: rgba(239,68,68,.045);
  border-left-color: rgba(239,68,68,.08); border-right-color: rgba(239,68,68,.08);
  border-top-color: var(--p2); border-bottom-color: rgba(239,68,68,.15);
  box-shadow: inset 0 0 60px rgba(239,68,68,.06), 0 0 40px rgba(239,68,68,.04);
}
.portal-bg .ring::before,
.portal-bg .ring::after{
  content:""; position:absolute; left:50%; top:50%; width:100%; height:1px; background: rgba(255,255,255,.18);
}
.portal-bg .ring::before{ transform: translate(-50%,-50%) rotate(45deg); }
.portal-bg .ring::after{ transform: translate(-50%,-50%) rotate(-45deg); }
/* responsive sizes */
.portal-bg .ring:nth-child(1)  { width: calc(var(--portal-size)*.14); height: calc(var(--portal-size)*.14); animation: portalRing 36s linear infinite; }
.portal-bg .ring:nth-child(2)  { width: calc(var(--portal-size)*.22); height: calc(var(--portal-size)*.22); animation: portalRing 24s linear infinite; }
.portal-bg .ring:nth-child(3)  { width: calc(var(--portal-size)*.30); height: calc(var(--portal-size)*.30); animation: portalRing 16s linear infinite; }
.portal-bg .ring:nth-child(4)  { width: calc(var(--portal-size)*.38); height: calc(var(--portal-size)*.38); animation: portalRing 12s linear infinite; }
.portal-bg .ring:nth-child(5)  { width: calc(var(--portal-size)*.46); height: calc(var(--portal-size)*.46); animation: portalRing 10s linear infinite; }
.portal-bg .ring:nth-child(6)  { width: calc(var(--portal-size)*.54); height: calc(var(--portal-size)*.54); animation: portalRing 8s linear infinite; }
.portal-bg .ring:nth-child(7)  { width: calc(var(--portal-size)*.62); height: calc(var(--portal-size)*.62); animation: portalRing 6.8s linear infinite; }
.portal-bg .ring:nth-child(8)  { width: calc(var(--portal-size)*.70); height: calc(var(--portal-size)*.70); animation: portalRing 5.8s linear infinite; }
.portal-bg .ring:nth-child(9)  { width: calc(var(--portal-size)*.78); height: calc(var(--portal-size)*.78); animation: portalRing 5.0s linear infinite; }
.portal-bg .ring:nth-child(10) { width: calc(var(--portal-size)*.86); height: calc(var(--portal-size)*.86); animation: portalRing 4.4s linear infinite; }
.portal-bg .ring:nth-child(11) { width: calc(var(--portal-size)*.94); height: calc(var(--portal-size)*.94); animation: portalRing 3.8s linear infinite; opacity:.58; filter: blur(1px); }
.portal-bg .ring:nth-child(12) { width: calc(var(--portal-size)*1.02); height: calc(var(--portal-size)*1.02); animation: portalRing 3.2s linear infinite; opacity:.38; filter: blur(1.6px); }
.portal-bg .ring:nth-child(-n+4)  { border-top-color: var(--p1); background: rgba(254,202,202,.08); }
.portal-bg .ring:nth-child(n+5):nth-child(-n+8)  { border-top-color: var(--p2); background: rgba(239,68,68,.06); }
.portal-bg .ring:nth-child(n+9) { border-top-color: var(--p3); background: rgba(185,28,28,.05); }

/* Волновая кнопка скачать */
.btn.wave{
  background-image: linear-gradient(90deg,#a51a1a 0%, #ef4444 25%, #fb7185 50%, #ef4444 75%, #b91c1c 100%);
  background-size: 200% 100%;
  color:#140b0b;
  border-color:#2b1f24;
  font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  animation: wave 10s linear infinite;
  will-change: background-position;
}
.btn.wave:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.btn.wide{ display:block; max-width:460px; margin: 0 auto; padding:16px 22px; font-size:18px; border-radius:14px; }

/* === Profile page === */
/* Old layout (not used now) kept for reference */
.profile-layout{ width:100%; display:grid; grid-template-columns: 220px 1fr; gap:16px; align-items:start; }
.profile-sidebar{ background: var(--card); border:1px solid #2b1f24; border-radius:16px; padding:12px; position:sticky; top:80px; }
.profile-menu{ display:flex; flex-direction:column; gap:6px; }
.profile-menu .item{ display:block; padding:10px 12px; border-radius:10px; color:var(--fg); border:1px solid transparent; transition: background .25s, border-color .25s, transform .15s; }
.profile-menu .item:hover{ background:#140b0f; border-color:#2b1f24; transform: translateX(2px); }
.profile-menu .item.active{ background:#140b0f; border-color:#ef4444; color:#fff; }

.profile-main{ text-align:left; }
.profile-header{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.profile-avatar{ position:relative; width:112px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.profile-avatar img{ width:96px; height:96px; border-radius:999px; object-fit:cover; border:1px solid #2b1f24; box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 4px rgba(239,68,68,.15); background:#140b0f; transition: transform .25s ease, box-shadow .25s ease; }
.avatar-camera-btn{ position:absolute; right:8px; bottom:16px; width:32px; height:32px; border-radius:999px; border:1px solid #2b1f24; background: radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), #140b0f; color:#ef4444; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.35); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; z-index:2; }
.avatar-camera-btn i{ font-size:16px; }
.avatar-camera-btn:hover{ transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.45); filter: brightness(1.1); }
.profile-avatar img:hover{ transform: translateY(-2px) scale(1.02); box-shadow:0 14px 36px rgba(0,0,0,.4), 0 0 0 6px rgba(239,68,68,.20); }
.profile-avatar img.clickable{ cursor:pointer; }
.profile-avatar.animated-default{ --orb: 96px; }
/* Hide fallback image but keep element for click target */
.profile-avatar.animated-default img{ opacity:0.002; pointer-events:auto; }
/* Glowing red orb */
.profile-avatar.animated-default::before{
  content:""; position:absolute; inset:0; margin:auto; width:var(--orb); height:var(--orb); border-radius:999px;
  background:
    radial-gradient(60% 60% at 50% 35%, rgba(239,68,68,.95), rgba(190,18,60,.55) 60%, rgba(20,11,11,0) 100%),
    radial-gradient(100% 100% at 60% 60%, rgba(244,63,94,.35) 0%, rgba(244,63,94,0) 65%);
  box-shadow: 0 0 20px rgba(239,68,68,.35), inset 0 8px 24px rgba(0,0,0,.5);
  filter: saturate(1.2);
  animation: orbPulse 6s ease-in-out infinite alternate;
  pointer-events: none;
}
/* Rotating rings */
.profile-avatar.animated-default::after{
  content:""; position:absolute; inset:0; margin:auto; width:var(--orb); height:var(--orb); border-radius:999px;
  background: conic-gradient(from 0deg,
    rgba(239,68,68,.25), rgba(239,68,68,0) 35%, rgba(239,68,68,.35) 50%, rgba(239,68,68,0) 75%, rgba(239,68,68,.25));
  -webkit-mask: radial-gradient(circle, transparent 58%, black 60%);
          mask: radial-gradient(circle, transparent 58%, black 60%);
  animation: spin 7s linear infinite;
  pointer-events: none;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes orbPulse{ 0%{ transform: scale(1); filter:hue-rotate(0deg) saturate(1.1);} 100%{ transform: scale(1.04); filter:hue-rotate(8deg) saturate(1.25);} }
.avatar-form .btn.small{ padding:8px 12px; font-size:13px; border-radius:10px; }
.avatar-form .btn.small.uploading{ opacity:.7; pointer-events:none; }

.profile-title h2{ margin:0 0 4px; font-size:22px; }
.profile-title .muted{ font-family: 'FindSans Pro', 'Segoe UI', 'Inter', ui-sans-serif, system-ui; font-weight:600; letter-spacing:.2px; }

.profile-body{ margin-top:10px; }
.profile-grid{ display:grid; grid-template-columns: 1fr; gap:12px; margin-top:12px; }
.field{ display:block; }
.field > span{ display:block; margin-bottom:6px; font-size:14px; font-weight:800; letter-spacing:.4px;
  font-family: "Segoe UI", "Inter", ui-sans-serif, system-ui;
  background-image: linear-gradient(90deg,#f43f5e 0%, #fb7185 100%);
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.field input{ width:100%; }

@media (min-width: 700px){
  .profile-grid{ grid-template-columns: 1fr; }
}

/* tilt effect helper */
.tilt{ transform: perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform .08s linear; will-change: transform; }

/* NEW centered profile wrapper: horizontally and vertically centered */
.profile-center{
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: min(1320px, 100vw - 96px);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  align-items: start;
  min-height: calc(100vh - 150px); /* reserve space for header/footer */
  place-content: center; /* center grid tracks both axes */
  transform: translateY(-28px); /* slightly up from exact center */
}
.profile-center .profile-sidebar{ position: static; align-self: center; z-index: 2; }
.profile-center .profile-main.card{ max-width: 100%; z-index: 2; }

@media (max-width: 980px){
  .profile-center{ grid-template-columns: 1fr; gap: 14px; }
}

/* Help widget */
.help-fab{ position:fixed; right:20px; bottom:20px; width:48px; height:48px; border-radius:999px; border:1px solid #2b1f24; background: radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), #140b0f; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 16px rgba(239,68,68,.18); cursor:pointer; z-index:1005; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; outline:none; }
.help-fab .fab-icon i{ font-size:20px; line-height:1; }
.help-fab:hover{ transform: translateY(-2px); filter: brightness(1.05); box-shadow:0 14px 32px rgba(0,0,0,.4), 0 0 24px rgba(239,68,68,.28); }
.help-fab::after{ content:""; position:absolute; inset:-3px; border-radius:999px; border:2px solid rgba(239,68,68,.45); opacity:0; transform: scale(.9); transition: opacity .25s ease, transform .25s ease; pointer-events:none; box-shadow: 0 0 10px rgba(239,68,68,.35), inset 0 0 6px rgba(239,68,68,.2); }
.help-fab:hover::after{ opacity:1; transform: scale(1); }
@keyframes help-ring-pulse{ 0%{ opacity:.5; transform: scale(.92);} 70%{ opacity:.12; transform: scale(1.08);} 100%{ opacity:0; transform: scale(1.12);} }
.help-fab:hover::before{ content:""; position:absolute; inset:-6px; border-radius:999px; border:2px solid rgba(239,68,68,.3); pointer-events:none; animation: help-ring-pulse 1.2s ease-out infinite; }
/* place FABs without overlap */
#adminFab{ right: 20px !important; }
#helpFab{ right: 84px !important; }
#wishesFab{ right: 148px !important; }
.help-fab:focus-visible{ outline:2px solid rgba(239,68,68,.5); outline-offset:2px; }
.help-window{ position:fixed; right:20px; bottom:84px; width:320px; height: min(520px, 70vh); border:1px solid #2b1f24; border-radius:14px; background:#140b0fcc; box-shadow:0 26px 64px rgba(0,0,0,.45); display:flex; flex-direction:column; z-index:10000; opacity:0; transform: translateY(8px) scale(.98); transition: opacity .18s ease, transform .18s ease; pointer-events:auto; overflow:hidden; --foot-h:56px; --quick-h:64px; }
.help-window[hidden]{ display:none !important; }
.help-window.admin:not(.show){ pointer-events:none; }
.help-window.offset-admin{ right: calc(20px + 640px + 16px); }
.help-window.show{ opacity:1; transform: translateY(0) scale(1); }
.help-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid #2b1f24; user-select:none; cursor:grab; background:none; }
.help-head .h-left{ display:flex; align-items:center; gap:8px; }
.help-close{ position:relative; width:28px; height:28px; border-radius:8px; border:1px solid #2b1f24; background:#1a0f12; color:transparent; cursor:pointer; overflow:visible; padding:4px; }
.help-close::before, .help-close::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; background:#e5e7eb; border-radius:2px; transform-origin:center; pointer-events:none; }
.help-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.help-close::after{ transform: translate(-50%,-50%) rotate(-45deg); }
.help-close:hover{ filter:brightness(1.08); }
.help-body{ position:relative; z-index:1; padding:10px; padding-bottom: calc(var(--foot-h) + var(--quick-h) + 110px); overflow:auto; display:flex; flex-direction:column; gap:8px; }
.help-body.compact{ padding-bottom: calc(var(--foot-h) + 40px); }
.help-body{ scrollbar-gutter: stable; }
.help-foot{ position:absolute; left:0; right:0; bottom:8px; height: var(--foot-h); display:flex; gap:8px; padding:10px; border-top:1px solid #2b1f24; background: linear-gradient(180deg, rgba(20,11,15,0), rgba(20,11,15,.65) 35%, rgba(20,11,15,.85)); z-index:4; }
.help-input-wrap{ position:relative; flex:1; display:flex; align-items:center; }
.help-input{ flex:1; border:1px solid rgba(43,31,36,.75); background: rgba(15,10,12,.55); color:#e5e7eb; border-radius:10px; padding:8px 36px 8px 10px; backdrop-filter: blur(2px); height: calc(var(--foot-h) - 20px); box-sizing: border-box; }
.help-attach{ position:absolute; right:10px; top:50%; transform: translateY(-50%); width:auto; height:auto; border:none; background: transparent; color:#cbd5e1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.help-attach i{ font-size:16px; opacity:.85; }
.help-attach:hover{ filter:none; transform: translateY(-50%); }
.help-send{ width:42px; height: calc(var(--foot-h) - 20px); border-radius:10px; border:1px solid rgba(43,31,36,.75); background: rgba(26,15,18,.55); color:#e5e7eb; cursor:pointer; backdrop-filter: blur(2px); display:inline-flex; align-items:center; justify-content:center; box-sizing: border-box; }
.help-send i{ font-size:16px; }
.help-window button, .help-window input{ pointer-events:auto; }
.fab-badge[hidden]{ display:none !important; }
.help-quick{ position:absolute; left:0; right:0; bottom: calc(var(--foot-h) + 8px); display:flex; flex-wrap:wrap; gap:6px; padding:6px 10px; z-index:3; pointer-events:auto; }
.help-quick .quick{ border:1px solid transparent; background: rgba(26,15,18,.55); color:#e5e7eb; border-radius:999px; padding:6px 10px; font-size:12px; cursor:pointer; backdrop-filter: blur(2px); transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; outline:none; }
.help-quick .quick:hover{ transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.help-quick .quick.op:hover{ box-shadow: 0 4px 12px rgba(0,0,0,.3), 0 0 12px rgba(239,68,68,.25); }
.help-quick .quick:focus-visible{ outline:2px solid rgba(239,68,68,.5); outline-offset:2px; }
.help-quick .quick.op{ background: rgba(43,13,16,.55); color:#fda4af; }
.msg{ max-width:86%; padding:8px 10px; border-radius:12px; font-size:14px; line-height:1.35; }

/* Wishes page */
.wish-drop{ border:1px dashed #2b1f24; border-radius:12px; padding:16px; text-align:center; background: rgba(20,11,15,.5); cursor:pointer; }
.wish-drop.drag{ background: rgba(20,11,15,.7); filter: brightness(1.05); }
.wish-list{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.wish-list .file-pill{ border:1px solid #2b1f24; background: rgba(26,15,18,.55); color:#e5e7eb; padding:6px 10px; border-radius:999px; font-size:12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.wish-list .file-pill .file-x{ border:1px solid #2b1f24; background: rgba(43,25,30,.8); color:#e5e7eb; width:18px; height:18px; border-radius:999px; line-height:16px; text-align:center; cursor:pointer; padding:0; font-weight:900; display:inline-flex; align-items:center; justify-content:center; }
.wish-list .file-pill .file-x:hover{ filter: brightness(1.1); }
.wish-thumb{ width:64px; height:48px; object-fit:cover; border-radius:8px; border:1px solid #2b1f24; cursor:pointer; display:inline-block; }
.modal-text .modal-img{ display:block; max-width:min(90vw, 680px); max-height:75vh; width:auto; height:auto; margin:6px auto 0; border-radius:12px; border:1px solid #2b1f24; }
.msg.user{ align-self:flex-end; background:#1b0f11; border:1px solid #2b1f24; }
.msg.bot{ align-self:flex-start; background:#0f0a0c; border:1px solid #2b1f24; }

/* Help widget polish */
.help-window, .help-window *{ font-weight:700; }
.help-head{ background: none; }
.help-ico{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; filter:saturate(1.2); }
.help-ico i{ font-size:18px; line-height:1; }
.help-ico img{ display:block; width:20px; height:20px; object-fit:contain; filter:saturate(1.1); }
.help-body{ scrollbar-width:thin; }
.help-body::-webkit-scrollbar{ width:8px; }
.help-body::-webkit-scrollbar-track{ background:#0f0a0c; }
.help-body::-webkit-scrollbar-thumb{ background: #2b1f24; border-radius:10px; }
.help-input:focus{ outline:none; box-shadow:0 0 0 2px rgba(239,68,68,.25) inset; }
.help-send:hover{ filter:brightness(1.06); transform: translateY(-1px); }
.help-quick .quick{ transition: transform .15s ease, filter .15s ease; }
.help-quick .quick:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.msg{ border:1px solid #2b1f24; color:#e5e7eb; background: linear-gradient(180deg, rgba(26,15,18,.9), rgba(20,11,15,.9)); box-shadow: inset 0 -1px 0 rgba(239,68,68,.08); }
.msg.user{ background: linear-gradient(180deg, rgba(31,17,20,.95), rgba(24,12,14,.95)); }
.msg.bot{ color:#86efac; }
.msg.op{ align-self:flex-start; background:linear-gradient(180deg, rgba(31,11,11,.95), rgba(24,8,8,.95)); border:1px solid #7f1d1d; color:#fca5a5; box-shadow: inset 0 -1px 0 rgba(239,68,68,.18); }
.msg.sys{ align-self:center; background:rgba(30,30,35,.75); border:1px solid #3f3f46; color:#a1a1aa; font-size:12px; padding:6px 10px; font-style:italic; max-width:90%; }

/* Admin console layout */
.help-fab.admin{ right:76px; }
.fab-badge{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#ef4444; color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #140b0f; }
.help-window.admin{ width:640px; z-index:10001; }
.admin-wrap{ display:grid; grid-template-columns: 180px 1fr; min-height:320px; height: calc(100% - 56px); }
.admin-top{ display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:8px 10px; border-bottom:1px solid #2b1f24; }
.btn-accept{ border:1px solid #14532d; background:#052e1a; color:#86efac; border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:800; }
.btn-accept[disabled]{ opacity:.6; cursor:not-allowed; }
.btn-leave{ border:1px solid #7f1d1d; background:#450a0a; color:#fca5a5; border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:800; }
.btn-leave[disabled]{ opacity:.6; cursor:not-allowed; }
.admin-list{ border-right:1px solid #2b1f24; padding:8px; display:flex; flex-direction:column; gap:6px; }
.admin-list .ticket{ text-align:left; border:1px solid #2b1f24; background:#1a0f12; border-radius:10px; padding:8px 10px; color:#e5e7eb; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.admin-list .ticket.active{ outline:2px solid rgba(239,68,68,.35); }
.admin-list .t-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-list .t-badge{ min-width:18px; height:18px; border-radius:999px; background:#ef4444; color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.admin-chat{ position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden; }
.admin-chat .help-body{ flex:1; overflow:auto; padding:10px; padding-bottom:60px; }
.help-window.admin .help-head{ cursor:move; }

/* Disable side-by-side on narrow screens */
@media (max-width: 1200px){
  .help-window.offset-admin{ right:20px; }
}

/* ==================== MOBILE ADAPTATIONS ==================== */
@media (max-width: 768px) {
  /* Base adjustments */
  .wrap { padding: 12px !important; }
  body { font-size: 15px; }
  
  /* Сохраняем базовый layout для main */
  main .wrap { display: flex !important; flex-direction: column !important; align-items: center !important; }
  
  /* Header */
  .site-header .header-inner { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .header-left { flex-wrap: wrap; gap: 6px; }
  .brand-text { font-size: 16px; }
  .logo { width: 32px; height: 32px; }
  .hamburger { width: 40px; height: 40px; }
  .hamburger i { font-size: 16px; }
  .status-chip { font-size: 10px; padding: 3px 8px; margin-left: 4px; }
  
  /* Account box */
  .account-box { gap: 6px; margin-left: auto; }
  .avatar { width: 34px; height: 34px; }
  .notif-btn { width: 40px; height: 40px; }
  .notif-btn i { font-size: 16px; }
  .balance-chip { padding: 5px 6px; margin-right: 6px; }
  .balance-chip .balance-amount { font-size: 13px; }
  .topup-btn { width: 24px; height: 24px; }
  
  /* Cards - адаптация для мобильных */
  .card { 
    padding: 20px !important; 
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .card h2, .card h3 { 
    font-size: 22px !important; 
    line-height: 1.3 !important;
    margin: 0 0 12px 0 !important;
  }
  .card .muted { 
    font-size: 15px !important; 
    line-height: 1.5 !important;
  }
  
  /* Buttons - увеличенные для удобства касания */
  .btn, .ghost { 
    padding: 14px 20px !important; 
    font-size: 16px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    width: auto !important;
  }
  .btn.btn-sm { padding: 8px 12px; font-size: 13px; min-height: 36px; }
  .row { gap: 12px; }
  .row .btn, .row .ghost { 
    flex: 1 1 auto; 
    min-width: 0; 
    width: 100% !important;
  }
  
  /* Drawer */
  .side-drawer { width: 280px; }
  .drawer-menu { padding: 14px; }
  .drawer-link { padding: 10px 12px; font-size: 14px; }
  .balance-box { padding: 8px; margin-bottom: 10px; }
  .lang-switch { flex-direction: column; gap: 8px; align-items: stretch; }
  .lang-buttons { justify-content: center; }
  
  /* Notifications panel */
  .notif-panel { width: 100%; max-width: 360px; }
  .notif-head, .notif-foot { padding: 8px 10px; }
  .notif-body { padding: 8px; }
  .notif-item { padding: 8px; margin-bottom: 6px; }
  .notif-item button.btn { width: auto !important; padding: 6px 10px; font-size: 12px; }
  
  /* Modal */
  .modal-card { width: calc(100% - 24px); padding: 14px; max-width: 480px; }
  .modal-title { font-size: 18px; }
  .modal-text { font-size: 14px; }
  .modal-actions { flex-direction: column; gap: 8px; }
  .modal-actions .btn, .modal-actions .ghost { width: 100%; }
  
  /* Переопределение базовых стилей для мобильных */
  .home-hero .guest-card { 
    width: calc(100% - 32px) !important; 
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
    padding: 20px !important; 
    margin: 0 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  /* Убеждаемся что wrap не ограничивает ширину */
  main .wrap { 
    max-width: 100% !important;
  }
  
  /* Убираем ограничения ширины для всех карточек */
  .card.guest-card,
  .card.login-card {
    max-width: calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
  }
  .home-hero .guest-card h2 { 
    font-size: 22px !important; 
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
  }
  .home-hero .guest-card p { 
    font-size: 15px !important; 
    margin: 0 0 20px 0 !important;
    line-height: 1.5 !important;
  }
  .home-hero .guest-card .row { 
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  .home-hero .guest-card .btn { 
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    min-height: 48px !important;
  }
  .home-hero .sub-note { 
    font-size: 15px !important; 
    padding: 0 16px !important;
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .cta-download { margin: 20px 0 6px; }
  .animated-button { font-size: 14px; }
  .button_lg { width: 180px; padding: 12px 20px; min-height: 48px; }
  
  /* Login/Register pages */
  .login-card { width: calc(100% - 24px); padding: 16px; }
  .login-hero { padding: 16px; }
  
  /* Profile page */
  .profile-center { grid-template-columns: 1fr !important; gap: 12px; width: 100%; padding: 0; transform: none; min-height: auto; margin-top: 12px; }
  .profile-sidebar { position: static; }
  .profile-menu { gap: 4px; }
  .profile-menu .item { padding: 8px 10px; font-size: 14px; }
  .profile-main { padding: 14px; }
  .profile-header { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .profile-avatar { width: auto; }
  .profile-avatar img { width: 80px; height: 80px; }
  .avatar-camera-btn { width: 28px; height: 28px; right: 4px; bottom: 12px; }
  .profile-title h2 { font-size: 20px; }
  .profile-grid { gap: 10px; }
  .field { margin-bottom: 10px; }
  .field > span { font-size: 13px; }
  .field input { padding: 10px 12px; font-size: 14px; }
  
  /* Shop page */
  .shop-hero { padding: 16px; }
  .shop-wrap { width: 100%; }
  .pricing-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .pricing-card { padding: 12px; }
  .pricing-card .h { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pricing-card .plan { font-size: 16px; }
  .pricing-card .price { font-size: 18px; }
  .pricing-card .shop-img, .shop-img-wrap { margin: 6px 0; }
  .pricing-card .shop-img { max-height: 180px; }
  .pricing-title { font-size: 20px; }
  
  /* Download page */
  .download-hero { padding: 16px; }
  .download-card { width: 100%; }
  .tutorial-video { margin-top: 10px; }
  
  /* Forms */
  .vform label { font-size: 13px; margin: 8px 0 5px; }
  input, textarea, .focusable { padding: 10px 12px; font-size: 14px; }
  textarea { min-height: 100px; }
  
  /* Wishes page */
  .wish-drop { padding: 12px; font-size: 13px; }
  .wish-list { gap: 6px; }
  .wish-list .file-pill { font-size: 11px; padding: 5px 8px; }
  .wish-thumb { width: 56px; height: 42px; }
  
  /* Help windows */
  .help-window { width: calc(100% - 24px); max-width: 100%; right: 12px; left: 12px; bottom: 12px; height: calc(100vh - 24px); }
  .help-window.admin { width: calc(100% - 24px); max-width: 100%; }
  .help-head { padding: 8px 10px; }
  .help-body { padding: 8px; }
  .help-foot { padding: 8px; height: auto; }
  .help-input { padding: 8px 32px 8px 8px; font-size: 13px; }
  .help-attach { right: 8px; }
  .help-send { width: 38px; }
  .help-quick { padding: 6px 8px; gap: 5px; }
  .help-quick .quick { padding: 5px 8px; font-size: 11px; }
  .msg { max-width: 90%; padding: 6px 8px; font-size: 13px; }
  
  /* Admin console */
  .admin-wrap { grid-template-columns: 1fr !important; min-height: auto; }
  .admin-list { border-right: none; border-bottom: 1px solid #2b1f24; padding: 6px; max-height: 120px; overflow-y: auto; }
  .admin-list .ticket { padding: 6px 8px; font-size: 12px; }
  .admin-top { padding: 6px 8px; flex-wrap: wrap; gap: 6px; }
  .admin-top .btn-accept, .admin-top .btn-leave { padding: 6px 8px; font-size: 12px; flex: 1 1 auto; }
  .admin-chat .help-body { padding: 8px; }
  
  /* FAB buttons */
  .help-fab { width: 44px; height: 44px; right: 12px; bottom: 12px; }
  #helpFab { right: 12px !important; }
  #adminFab { right: 64px !important; }
  #wishesFab { right: 116px !important; }
  .fab-badge { font-size: 11px; min-width: 16px; height: 16px; padding: 0 4px; }
  
  /* Tables - horizontal scroll on mobile */
  .admin-subs, .admin-users { 
    font-size: 12px; 
    display: block; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  .admin-subs thead, .admin-subs tbody, .admin-users thead, .admin-users tbody { 
    display: table; 
    width: 100%;
    table-layout: auto;
  }
  .admin-subs tr, .admin-users tr { 
    display: table-row; 
  }
  .admin-subs th, .admin-subs td, .admin-users th, .admin-users td { 
    padding: 6px 4px; 
    font-size: 11px; 
    word-break: break-word;
    white-space: nowrap;
  }
  .admin-subs th:last-child, .admin-subs td:last-child { width: auto; min-width: 100px; }
  .admin-subs td:last-child form { flex-direction: column; gap: 4px; }
  .admin-subs td:last-child .ghost { width: 100%; font-size: 10px; padding: 4px 6px; white-space: normal; }
  .admin-users td:last-child { min-width: 50px; }
  
  /* Admin panel forms - только для форм в админке */
  .card form.vform[style*="display:flex"] { flex-direction: column; gap: 8px; }
  .card form.vform span { font-size: 13px; }
  .card form.vform .row { flex-direction: column; }
  .card form.vform .row input { width: 100%; }
  
  /* Settings */
  .settings-card { padding: 14px; }
  .pw-toggle { width: 20px; height: 20px; right: 8px; }
  
  /* Portal animations - reduce on mobile */
  .portal-bg .ring { border-width: 10px; }
  .portal-card .ring { border-width: 10px; }
  
  /* Subscription note */
  .sub-note { font-size: 14px; margin: 4px 0 10px; }
  .sub-note .date { padding: 2px 6px; font-size: 13px; }
  .sub-note.inactive { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  
  /* Guide page */
  .guide-page { gap: 10px; }
  .guide-img { height: 240px; }
  
  /* Error and message styling */
  .err, .msg { font-size: 13px; margin: 8px 0; padding: 8px; }
  
  /* Header nick badge - hide on very small screens */
  .nick-badge { display: none; }
  
  /* Prevent text overflow */
  .brand-text, .balance-amount, .status-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  
  /* Ensure images don't overflow */
  img { max-width: 100%; height: auto; }
  
  /* Fix modal images */
  .modal-img { max-width: calc(100vw - 48px) !important; }
  
  /* Admin launcher updates page */
  .admin-launcher-updates table { font-size: 11px; }
  .admin-launcher-updates th, .admin-launcher-updates td { padding: 4px 2px; }
  
  /* Details/summary elements */
  details summary { font-size: 14px; padding: 8px; }
  details[open] { padding-bottom: 8px; }
  
  /* Animations - reduce on mobile for performance */
  #mouse-trail .t { width: 14px; height: 14px; }
  
  /* Prevent overflow issues */
  img, video, iframe, embed, object { max-width: 100%; }
  table { max-width: 100%; }
  .card, .modal-card, .help-window { max-width: 100%; }
  
  /* Improve touch targets */
  a, button { touch-action: manipulation; }
  
  /* Better scrolling */
  .help-body, .notif-body, .admin-chat .help-body { 
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
  .wrap { padding: 10px; }
  .card { padding: 12px; }
  .btn, .ghost { padding: 9px 12px; font-size: 13px; }
  .brand-text { font-size: 14px; }
  .hamburger { width: 36px; height: 36px; }
  .notif-btn { width: 36px; height: 36px; }
  .avatar { width: 32px; height: 32px; }
  .balance-chip { padding: 4px 5px; }
  .balance-chip .balance-amount { font-size: 12px; }
  .modal-card { padding: 12px; }
  .modal-title { font-size: 16px; }
  .help-window { width: calc(100% - 20px); right: 10px; left: 10px; }
  .side-drawer { width: 260px; }
  .profile-avatar img { width: 72px; height: 72px; }
  .pricing-card { padding: 10px; }
  .pricing-card .shop-img { max-height: 150px; }
  .admin-list { max-height: 100px; }
  #helpFab { right: 10px !important; }
  #adminFab { right: 54px !important; }
  #wishesFab { right: 98px !important; }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .help-window { height: calc(100vh - 20px); max-height: 480px; }
  .admin-list { max-height: 80px; }
  .home-hero .sub-note { top: calc(50% + 80px); }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn, .ghost { min-height: 44px; }
  .hamburger, .notif-btn, .help-fab { min-width: 44px; min-height: 44px; }
  .drawer-link { min-height: 44px; }
  .lang-btn { min-height: 36px; }
  .help-quick .quick { min-height: 36px; }
  input, textarea, .focusable { min-height: 44px; }
  .help-input { min-height: 36px; }
}