:root{
  --bg:#0a0a0a;--bg2:rgba(255,255,255,0.04);--bg3:rgba(255,255,255,0.10);
  --ac:#dc143c;--ac2:#ff1744;--ac3:#06b6d4;--ac4:#fbbf24;
  --t1:rgba(255,255,255,.92);--t2:rgba(255,255,255,.5);--t3:rgba(255,255,255,.3);
  --glow:rgba(220,20,60,.3);--r:10px;--rs:10px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --grid-line:#111111;
  --border-primary:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.14);
  --bg-tertiary:#1a1a1a;--primary-dark:#b01030;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
.coin{width:20px;height:20px;vertical-align:middle;display:inline-block;flex-shrink:0}
.coin-sm{width:16px;height:16px}
.coin-lg{width:24px;height:24px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:50px 50px;color:var(--t1);min-height:100vh;overflow-x:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.bg-grad{position:fixed;inset:0;background:transparent;z-index:0}
.particles{display:none}
.particle{display:none}

#app{position:relative;z-index:2;display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:920px;margin:0 auto}
.top-bar{position:fixed;top:0;left:0;right:0;background:#0d0d0deb;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-primary);z-index:200;animation:fadeD .5s ease}
.top-bar-inner{max-width:1600px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between}
.top-bar-left{display:flex;align-items:center;gap:20px}
.top-bar-right{display:flex;align-items:center;gap:10px}
@keyframes fadeD{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.logo{font-size:20px;font-weight:800;color:var(--ac);letter-spacing:-.5px}
.bal-badge{background:var(--bg-tertiary);border:1px solid var(--primary-dark);border-radius:10px;padding:6px 12px;font-size:14px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:6px;cursor:pointer}
.bal-amount{color:var(--ac);font-weight:700;font-size:15px}
.bal-plus{display:flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--ac);color:#fff;border-radius:5px;font-size:16px;font-weight:700;line-height:1;margin-left:2px}
.top-avatar-btn{display:flex;align-items:center;background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer;padding:5px;transition:background .2s,border-color .2s}
.top-avatar-btn:hover{background:transparent;border-color:transparent}
.top-avatar-btn:active{transform:none;background:transparent;border-color:transparent}
.top-avatar{width:34px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0}
.top-avatar-placeholder{width:34px;height:34px;border-radius:8px;background:var(--bg-tertiary);border:1px solid var(--border-primary);display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:16px}

.content{flex:1;overflow:hidden;position:relative;scroll-behavior:smooth;padding-top:56px}
.content::-webkit-scrollbar{width:3px}
.content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px}

/* In site-mode keep the screen container full-width (so its scrollbar stays at the
   right edge of the viewport), but cap the inner content to the same width as a
   row of feed cards (4 × 290px + 3 × 16px gap + 40px L/R padding = ~1288px).
   This is achieved by symmetric padding that grows past 40px on wide screens. */
@media (min-width: 900px){
  .site-mode .screen{padding-left:max(40px, calc(50% - 644px));padding-right:max(40px, calc(50% - 644px))}

  /* PROFILE: PC-friendly layout — horizontal header, larger avatar, 4-col stats, padded rows */
  .site-mode .prof-header{
    display:flex;flex-direction:row;align-items:center;text-align:left;gap:24px;
    padding:32px 36px;margin-bottom:18px;
  }
  .site-mode .prof-avatar{width:96px;height:96px;margin:0;flex-shrink:0}
  .site-mode .prof-avatar svg{width:42px;height:42px}
  .site-mode .prof-name{font-size:24px;margin-bottom:6px}
  .site-mode .prof-id{font-size:14px;color:var(--t2)}
  .site-mode .prof-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .site-mode .prof-stat{padding:22px 18px;cursor:default}
  .site-mode .prof-stat-icon{font-size:26px;margin-bottom:8px}
  .site-mode .prof-stat-val{font-size:22px}
  .site-mode .prof-stat-label{font-size:11px;margin-top:6px}

  /* Settings rows: bigger hit-target, hover state, smoother spacing */
  .site-mode .prof-settings{margin-bottom:8px}
  .site-mode .prof-set-row{padding:18px 24px;transition:background .18s}
  .site-mode .prof-set-row:hover{background:rgba(255,255,255,.04)}
  .site-mode .prof-set-icon{width:42px;height:42px;font-size:18px}
  .site-mode .prof-set-label{font-size:15px}
  .site-mode .prof-set-sub{font-size:13px}
  .site-mode .prof-set-action svg{width:18px;height:18px}

  /* Promo card a touch roomier */
  .site-mode .prof-promo-card{padding:20px 24px}
  .site-mode .prof-promo-input{font-size:15px;padding:12px 14px}

  /* HOME: tabs + search row on the same line on desktop */
  .site-mode .feed-toolbar{display:flex;align-items:stretch;gap:16px;margin-bottom:18px}
  .site-mode .feed-toolbar .feed-tabs{margin-bottom:0;flex-shrink:0}
  .site-mode .site-search-row{display:flex;gap:12px;align-items:stretch;flex:1;margin-bottom:0}
  .site-search-input-wrap{flex:1;position:relative;display:flex;align-items:center}
  .site-search-input-wrap svg{position:absolute;left:14px;width:18px;height:18px;stroke:var(--t3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
  .site-search-input{flex:1;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:12px;padding:12px 14px 12px 42px;color:var(--t1);font-size:14px;font-family:inherit;outline:none;transition:border-color .18s;width:100%}
  .site-search-input::placeholder{color:var(--t3)}
  .site-search-input:focus{border-color:var(--ac)}
  .site-filters-btn{display:flex;align-items:center;gap:8px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:12px;padding:0 18px;color:var(--t1);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color .18s;white-space:nowrap}
  .site-filters-btn:hover{border-color:var(--ac)}
  .site-filters-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .site-filters-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ac);color:#fff;font-size:11px;font-weight:700}
  .site-filters-badge[hidden]{display:none !important}

  /* Hide horizontal pill row on desktop site — replaced by modal */
  .site-mode .feed-filters{display:none}
  /* HOME: bigger hero, larger tabs/pills, more vertical breathing room */
  .site-mode .hero{padding:60px 40px;border-radius:18px;margin-bottom:28px;min-height:240px}
  .site-mode .hero-icon{font-size:64px;margin-bottom:16px}
  .site-mode .hero h2{font-size:34px;margin-bottom:12px;letter-spacing:-.4px}
  .site-mode .hero p{font-size:16px;max-width:580px;margin:0 auto 8px;line-height:1.5}
  .site-mode .feed-tabs{gap:10px;margin-bottom:18px;max-width:420px}
  .site-mode .feed-tab{padding:12px 18px;font-size:14px;border-radius:12px;flex:0 0 auto;min-width:130px}
  .site-mode .feed-tab:hover{border-color:var(--border-strong)}
  .site-mode .feed-tab.active:hover{border-color:var(--ac)}
  .site-mode .feed-filters{gap:10px;margin-bottom:20px;flex-wrap:wrap;overflow:visible}
  .site-mode .feed-pill{padding:9px 20px;font-size:13px;transition:all .18s}
  .site-mode .feed-pill:hover{border-color:var(--ac);color:var(--t1)}
  .site-mode .feed-pill.active:hover{color:#fff}
  /* Slightly bigger gap between feed cards on big screens */
  .site-mode .feed-grid{gap:18px}

  /* BALANCE: bigger current-balance card, packages in a grid, polished summary */
  .site-mode #sc-balance .card.text-c{padding:32px 28px;border-radius:14px;margin-bottom:24px}
  .site-mode #sc-balance .card.text-c [id="b-cur-label"]{font-size:14px;letter-spacing:.4px;text-transform:uppercase;color:var(--t3);margin-bottom:14px !important}
  .site-mode #sc-balance .card.text-c > div:nth-child(2){font-size:42px !important;font-weight:800 !important;letter-spacing:-1px}
  .site-mode #sc-balance .card.text-c .coin-lg{width:36px;height:36px}

  .site-mode #sc-balance .bal-section{margin-bottom:32px}
  .site-mode #sc-balance .bal-section-title{font-size:18px;margin-bottom:16px}

  /* Packages as a responsive grid */
  .site-mode #sc-balance .pkg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;flex-direction:row}
  @media (min-width: 1280px){
    .site-mode #sc-balance .pkg-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  .site-mode #sc-balance .pkg{padding:18px 22px}
  .site-mode #sc-balance .pkg-credits{font-size:22px}
  .site-mode #sc-balance .pkg-price{font-size:20px}

  /* Payment methods — also a responsive grid */
  .site-mode #sc-balance .pm-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;flex-direction:row}
  .site-mode #sc-balance .pm{padding:18px 22px}
  .site-mode #sc-balance .pm .pm-i{font-size:24px;width:32px}
  .site-mode #sc-balance .pm .pm-t{font-size:16px}

  /* Summary card */
  .site-mode #sc-balance .bal-summary{padding:24px 28px;border-radius:14px;gap:18px}
  .site-mode #sc-balance .bal-summary-label{font-size:16px}
  .site-mode #sc-balance .bal-summary-value{font-size:20px}
  .site-mode #sc-balance .bal-continue{padding:16px 28px;font-size:16px;border-radius:12px;cursor:pointer;transition:transform .15s,box-shadow .15s}
  .site-mode #sc-balance .bal-continue:hover{transform:translateY(-1px);box-shadow:0 8px 24px var(--glow)}

  /* GENERATIONS HISTORY: header / search bigger, filters as a horizontal pill row, cards in a wider grid */
  .site-mode #sc-generations .gh-title{font-size:32px;letter-spacing:-.5px;margin-bottom:24px}
  .site-mode #sc-generations .gh-search-wrap{display:flex;align-items:center;gap:14px;margin-bottom:24px}
  .site-mode #sc-generations .gh-search{flex:1;margin-bottom:0}
  .site-mode #sc-generations .gh-search-input{padding:14px 16px 14px 46px;font-size:15px;border-radius:12px}
  .site-mode #sc-generations .gh-search-icon{left:16px;width:20px;height:20px}
  .site-mode #sc-generations .gh-filters{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto}
  .site-mode #sc-generations .gh-filter{padding:10px 18px;font-size:13px;border-radius:10px;transition:all .18s}
  .site-mode #sc-generations .gh-filter:hover{border-color:var(--ac);color:var(--t1)}
  .site-mode #sc-generations .gh-filter.on:hover{color:#fff}
  /* Grid follows the same breakpoints as the main feed */
  .site-mode #sc-generations .gh-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .site-mode #sc-generations .gh-card{transition:transform .18s}
  .site-mode #sc-generations .gh-card:hover{transform:translateY(-3px)}
  .site-mode #sc-generations .gh-card:hover .gh-card-media{border-color:var(--ac);box-shadow:0 6px 20px rgba(0,0,0,.3)}
  .site-mode #sc-generations .gh-empty{padding:80px 20px;font-size:16px}
}
@media (min-width: 1100px){
  .site-mode #sc-generations .gh-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width: 1500px){
  .site-mode #sc-generations .gh-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* GENERATE / Upload screen — PC layout */
@media (min-width: 900px){
  .site-mode #sc-generate .upload-card{padding:32px 36px;border-radius:18px}
  .site-mode #sc-generate .upload-header{margin-bottom:24px;gap:14px}
  .site-mode #sc-generate .upload-header-icon{width:48px;height:48px;border-radius:12px}
  .site-mode #sc-generate .upload-header-icon svg{width:22px;height:22px}
  .site-mode #sc-generate .upload-header-text{font-size:20px}
  .site-mode #sc-generate .upload-header-sub{font-size:14px;margin-top:3px}

  /* Upload zone — bigger drop area, dashed border, "drag & drop" feel */
  .site-mode #sc-generate .uz{padding:60px 32px;max-width:none;aspect-ratio:auto;min-height:340px;border-radius:16px}
  .site-mode #sc-generate .uz:hover{border-color:var(--ac);background:rgba(220,20,60,.06)}
  .site-mode #sc-generate .uz-icon svg{width:64px !important;height:64px !important}
  .site-mode #sc-generate .uz-text{font-size:17px;margin-top:12px}
  .site-mode #sc-generate .uz-hint{font-size:13px;margin-top:10px}

  /* Preview after a file is chosen */
  .site-mode #sc-generate .preview-w{max-width:380px}
  .site-mode #sc-generate .preview-w img{aspect-ratio:9/15.4}
  .site-mode #sc-generate .gen-btn{padding:16px 24px;font-size:16px;margin-top:18px}

  /* Tips row — more breathing room, larger icons */
  .site-mode #sc-generate .tips{gap:14px;margin-top:24px}
  .site-mode #sc-generate .tip{padding:16px 12px;border-radius:12px;gap:10px}
  .site-mode #sc-generate .tip-icon{width:42px;height:42px;border-radius:10px}
  .site-mode #sc-generate .tip-icon svg{width:22px;height:22px}
  .site-mode #sc-generate .tip-text{font-size:13px;line-height:1.4}

  /* Back button positioning */
  .site-mode #sc-generate .back-row{font-size:14px;padding:10px 14px}

  /* REFERRAL: PC-friendly spacing & sizing */
  .site-mode #sc-referral .text-c{margin-bottom:28px !important}
  .site-mode #sc-referral .text-c > div:first-child > div{width:80px !important;height:80px !important}
  .site-mode #sc-referral .text-c > div:first-child svg{width:36px !important;height:36px !important}
  .site-mode #sc-referral [id="ref-title"]{font-size:24px !important}
  .site-mode #sc-referral [id="ref-desc"]{font-size:15px !important;line-height:1.6 !important;max-width:640px;margin-left:auto;margin-right:auto}
  .site-mode #sc-referral .card{padding:24px 28px;border-radius:14px;margin-bottom:18px !important}
  .site-mode #sc-referral .ref-link-row{padding:16px 18px}
  .site-mode #sc-referral .ref-link-row:hover{border-color:var(--ac)}
  .site-mode #sc-referral .ref-link-text{font-size:15px}
  .site-mode #sc-referral .ref-copy-icon{width:40px;height:40px}
  .site-mode #sc-referral .ref-copy-icon svg{width:18px;height:18px}
  .site-mode #sc-referral .stats-dash{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px !important}
  .site-mode #sc-referral .sd-card{padding:24px}
  .site-mode #sc-referral .sd-val{font-size:32px}
  .site-mode #sc-referral .sd-label{font-size:12px;margin-top:6px}
  .site-mode #sc-referral [id="ref-bal-usd"]{font-size:34px !important}
  .site-mode #sc-referral .ref-withdraw-btn{padding:18px 24px;font-size:15px;transition:background .18s}
  .site-mode #sc-referral .ref-withdraw-btn:hover{background:rgba(255,255,255,.08)}
  .site-mode #sc-referral .ref-withdraw-btn svg{width:18px;height:18px}
  .site-mode #sc-referral .btn{padding:14px 18px;font-size:14px}
}

/* Site-mode (browser) custom scrollbar — neutral grey with a slightly lighter thumb. */
.site-mode,.site-mode *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) rgba(255,255,255,.04)}
.site-mode ::-webkit-scrollbar{width:10px;height:10px;background:transparent}
.site-mode ::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:0}
.site-mode ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border:2px solid transparent;border-radius:8px;background-clip:padding-box;transition:background .15s}
.site-mode ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:padding-box}
.site-mode ::-webkit-scrollbar-thumb:active{background:rgba(255,255,255,.4);background-clip:padding-box}
.site-mode ::-webkit-scrollbar-corner{background:transparent}

/* ── Mobile bottom nav — landing aesthetic ──
   Deep gradient surface, hairline crimson glow on top edge, soft accent
   active state with glowing icon (instead of a loud red gradient pill). */
.nav{
  display:flex;
  position:fixed;
  bottom:calc(16px + var(--safe-b));
  left:12px;right:12px;
  z-index:200;
  max-width:896px;
  margin:0 auto;
  padding:7px 6px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(14,14,16,0.92) 0%, rgba(7,7,10,0.96) 100%);
  border:1px solid rgba(255,255,255,0.06);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  backdrop-filter:blur(24px) saturate(140%);
  box-shadow:
    0 24px 64px -24px rgba(0,0,0,0.7),
    0 4px 18px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
  isolation:isolate;
  overflow:hidden;
}
.nav::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(220,20,60,0.55) 50%, transparent 100%);
  pointer-events:none;
  z-index:1;
}
.nav-pill{display:none}
.nav-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:9px 0 7px;
  cursor:pointer;
  border:none;
  background:transparent;
  color:rgba(238,239,241,0.5);
  font-size:10px;
  font-weight:500;
  letter-spacing:-0.005em;
  border-radius:14px;
  margin:0 2px;
  position:relative;
  z-index:1;
  transition:
    color .35s cubic-bezier(.4,0,.2,1),
    background .35s cubic-bezier(.4,0,.2,1),
    box-shadow .35s cubic-bezier(.4,0,.2,1);
}
.nav-btn .ni{
  font-size:20px;
  line-height:0;
  transition:
    transform .4s cubic-bezier(.34,1.56,.64,1),
    filter .35s ease;
}
.nav-btn .ni svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-btn span:last-child{transition: color .3s ease, opacity .25s, transform .25s}
.nav-btn.on{
  color:#ff8aa3;
  background:linear-gradient(180deg, rgba(220,20,60,0.16) 0%, rgba(220,20,60,0.04) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(220,20,60,0.28),
    0 6px 18px -6px rgba(220,20,60,0.4);
}
.nav-btn.on .ni{
  transform:translateY(-1px) scale(1.06);
  filter:drop-shadow(0 0 8px rgba(220,20,60,0.55));
}
.nav-btn.on span:last-child{color:#ffd2dc;font-weight:600}

.screen{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateX(0);transition:opacity .32s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1);will-change:opacity,transform;overflow-y:auto;overflow-x:hidden;padding:24px 16px calc(90px + var(--safe-b));-webkit-overflow-scrolling:touch}
.screen.active{position:relative;opacity:1;pointer-events:auto;transform:translateX(0);height:100%;flex-shrink:0}
.screen.slide-left{transform:translateX(-40px);opacity:0}
.screen.slide-right{transform:translateX(40px);opacity:0}

.card{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--r);padding:18px;margin-bottom:12px}
.card h2{font-size:16px;font-weight:700;margin-bottom:12px}
.card h3{font-size:14px;font-weight:600;margin-bottom:10px;color:var(--t2)}

.btn{display:flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:var(--rs);border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;width:100%;-webkit-tap-highlight-color:transparent}
.btn-p{background:var(--ac);color:#fff;box-shadow:0 4px 16px var(--glow);border-radius:10px}
.btn-p:active{transform:scale(.97)}
.btn-s{background:var(--bg-tertiary);color:var(--t1);border:1px solid var(--border-primary);border-radius:10px}
.btn-g{background:transparent;color:var(--t2);padding:8px}
.btn-sm{padding:6px 12px;font-size:12px;width:auto;border-radius:8px}
.btn:disabled{opacity:.45;pointer-events:none}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}
.text-c{text-align:center}
.hidden{display:none!important}

/* Hero — base (Mini App). В site-mode переопределяется в large-screen блок ниже. */
.hero{background:var(--bg-tertiary);border:none;border-radius:10px;padding:0;text-align:center;position:relative;overflow:hidden;margin-bottom:14px;min-height:180px;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px);opacity:.45;z-index:0;pointer-events:none;transform:scale(1.1)}
.hero::before{display:none}
/* Track — позиционный контейнер; слайды лежат поверх друг друга с opacity-fade. */
.hero-track{position:relative;z-index:1;width:100%;min-height:200px}
.hero-slide{position:absolute;inset:0;padding:24px 18px 36px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s;pointer-events:none}
.hero-slide.active{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s}
.hero-icon{font-size:48px;margin-bottom:10px;position:relative;z-index:1}
.hero h2,.hero p,.hero .btn{position:relative;z-index:1}
.hero h2{font-size:20px;font-weight:700;margin-bottom:6px}
.hero p{color:var(--t2);font-size:13px;margin-bottom:0}
.hero-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 8px;border-radius:999px;border:1px solid rgba(220,20,60,.32);background:rgba(220,20,60,.12);color:rgba(255,255,255,.95);font-size:12px;font-weight:600;letter-spacing:.02em;margin-bottom:10px;position:relative;z-index:1}
.hero-chip img,.hero-chip svg{width:14px;height:14px;display:block;flex-shrink:0;stroke:#ff8aa3;fill:none}
.hero-chip-brand img{filter:drop-shadow(0 0 6px rgba(220,20,60,.6))}
.hero-chip-brand span{background:linear-gradient(135deg,#fff 0%,#ff8aa3 60%,#dc143c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.hero-cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:9px 18px;border-radius:999px;border:none;background:linear-gradient(135deg,var(--ac),#a01030);color:#fff;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px -4px rgba(220,20,60,.6)}
.hero-cta svg{width:13px;height:13px;stroke:currentColor;fill:none}
.hero-dots{position:absolute;left:0;right:0;bottom:8px;z-index:2;display:flex;justify-content:center;gap:5px;pointer-events:none}
.hero-arrow{position:absolute;bottom:8px;z-index:3;width:34px;height:34px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.4);border-radius:11px;color:rgba(255,255,255,.7);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,border-color .2s,color .2s,transform .15s;-webkit-tap-highlight-color:transparent}
@media (hover:hover) and (pointer:fine){
  .hero-arrow:hover{background:rgba(220,20,60,.2);border-color:rgba(220,20,60,.45);color:#fff}
}
.hero-arrow.flash{background:rgba(220,20,60,.2);border-color:rgba(220,20,60,.45);color:#fff}
.hero-arrow:active{transform:scale(.92)}
.hero-arrow svg{width:16px;height:16px;display:block;stroke-width:2.2}
.hero-arrow-prev{left:12px}
.hero-arrow-next{right:12px}
.hero-dot{pointer-events:auto;width:7px;height:6px;border-radius:999px;border:none;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:width .35s cubic-bezier(.22,1,.36,1),background .25s ease;position:relative;overflow:hidden}
.hero-dot.active{width:30px;background:rgba(255,255,255,.18)}
.hero-dot.active::after{content:'';position:absolute;top:0;left:0;bottom:0;width:0;background:linear-gradient(90deg,#ff8aa3 0%,#dc143c 100%);border-radius:inherit;box-shadow:0 0 8px rgba(220,20,60,.55);animation:heroDotProgress var(--hero-duration,10000ms) linear forwards}
.hero-carousel.paused .hero-dot.active::after{animation-play-state:paused}
@keyframes heroDotProgress{from{width:0}to{width:100%}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Stats dashboard */
.stats-dash{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.sd-card{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px;padding:18px 12px;text-align:center;position:relative;overflow:hidden;transition:transform .2s;opacity:0;animation:sdSlideIn .5s ease forwards}
.sd-card:nth-child(1){animation-delay:.05s}
.sd-card:nth-child(2){animation-delay:.15s}
.sd-card:nth-child(3){animation-delay:.25s}
.sd-card:nth-child(4){animation-delay:.35s}
.sd-card:active{transform:scale(.97)}
.sd-card .sd-icon{font-size:28px;margin-bottom:8px;display:inline-block;animation:sdFloat 3s ease-in-out infinite}
.sd-card .sd-val{font-size:24px;font-weight:800;color:var(--ac);min-height:30px}
.sd-card .sd-label{font-size:11px;color:var(--t2);margin-top:4px;font-weight:500;letter-spacing:.3px}
.sd-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(220,20,60,.06),transparent,rgba(220,20,60,.03),transparent);animation:sdRotate 8s linear infinite;pointer-events:none}
.sd-card::after{content:'';position:absolute;inset:0;background:var(--bg-tertiary);border-radius:9px;z-index:0}
.sd-card>*{position:relative;z-index:1}
@keyframes sdSlideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes sdRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes countUp{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.sd-val.animate{animation:countUp .5s ease forwards}

/* Feed tabs & filters */
.feed-tabs{display:flex;gap:6px;margin-bottom:10px}
.site-search-row{display:none}
.feed-tab{flex:1;padding:10px;border:1px solid var(--border-primary);border-radius:10px;background:var(--bg-tertiary);color:var(--t2);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
.feed-tab.active{background:var(--ac);color:#fff;border-color:var(--ac);box-shadow:0 4px 16px var(--glow)}
.feed-tab:active{transform:scale(.97)}
.feed-filters{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0}
.feed-filters::-webkit-scrollbar{display:none}
.feed-pill{padding:7px 16px;border-radius:20px;border:1px solid var(--border-primary);background:var(--bg-tertiary);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0}
.feed-pill.active{background:var(--ac);color:#fff;border-color:var(--ac)}
.feed-pill:active{transform:scale(.95)}
.feed-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));padding:2px;-webkit-overflow-scrolling:touch}
.site-mode .feed-grid{padding:0}

/* Quick actions (profile) */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.qa{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px;padding:16px 10px;text-align:center;cursor:pointer;transition:all .2s}
.qa:active{transform:scale(.96)}
@media(hover:hover){.qa:hover{background:var(--bg3)}}
.qa .qi{font-size:28px;margin-bottom:4px}
.qa .qt{font-size:12px;font-weight:600}

/* Selected preset card */
.sel-preset{display:flex;align-items:center;gap:12px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:12px;padding:10px 14px;margin-bottom:14px;animation:fadeUp .35s ease}
.sel-preset-thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;border:1px solid var(--border-strong)}
.sel-preset-info{flex:1;min-width:0}
.sel-preset-name{font-size:14px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-preset-meta{display:flex;align-items:center;gap:6px;margin-top:3px}
.sel-preset-type{font-size:11px;font-weight:600;color:var(--ac);background:rgba(220,20,60,.12);padding:2px 8px;border-radius:10px}
.sel-preset-price{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--t2)}
.sel-preset-price .coin{width:14px;height:14px}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Upload */
.upload-card{border:1px solid var(--border-primary);border-radius:14px;background:var(--bg-tertiary)}
.upload-title{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.uz{border:2px dashed rgba(220,20,60,.25);border-radius:14px;padding:48px 20px;text-align:center;cursor:pointer;transition:all .3s;background:rgba(220,20,60,.03);aspect-ratio:9/15.4;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:240px;margin:0 auto}
.uz:active{transform:scale(.98);background:rgba(220,20,60,.07)}
.uz.dragover{border-color:var(--ac);background:rgba(220,20,60,.08)}
.uz-icon{margin-bottom:10px;line-height:0}
.uz-text{color:var(--t2);font-size:13px;font-weight:500}
.uz-hint{color:var(--t3);font-size:11px;margin-top:6px}
.preview-w{position:relative;border-radius:12px;overflow:hidden;margin-bottom:12px;max-width:240px;margin-left:auto;margin-right:auto}
.preview-w img{width:100%;aspect-ratio:9/15.4;object-fit:cover;display:block}
.preview-close{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;z-index:2}
.preview-close:active{transform:scale(.9)}
.preview-close svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round}
.gen-btn{background:linear-gradient(135deg,var(--ac),#e8254a);color:#fff;font-size:15px;font-weight:700;padding:14px 20px;border-radius:12px;border:none;box-shadow:0 4px 20px var(--glow);display:flex;align-items:center;justify-content:center;gap:8px;width:100%;cursor:pointer;transition:all .2s;margin-top:12px}
.gen-btn:active{transform:scale(.97);box-shadow:0 2px 12px var(--glow)}
.gen-btn .gen-btn-price{display:inline-flex;align-items:center;gap:4px;background:#fff;color:var(--ac);padding:4px 12px;border-radius:20px;font-size:13px;font-weight:800}
.gen-btn .gen-btn-price .coin{width:14px;height:14px}

/* Toast — exact kisex replica */
.toast-container{position:fixed;top:20px;left:0;right:0;z-index:9999;display:flex;flex-direction:column;align-items:center;pointer-events:none;padding:0 16px}
.toast-container>*{pointer-events:all}
.toast{display:flex;align-items:center;gap:12px;min-width:280px;max-width:500px;padding:16px;border-radius:12px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 8px 24px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.10);animation:toastSlideIn .4s cubic-bezier(.16,1,.3,1);margin-bottom:8px;position:relative}
.toast.removing{animation:toastSlideOut .3s cubic-bezier(.4,0,1,1) forwards}
.toast-error{background:#0d0d0d;border:1px solid rgba(220,20,60,.3)}
.toast-error .toast-icon{color:#dc143c}
.toast-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.toast-msg{flex:1;font-size:14px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.92)}
.toast-close{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;opacity:.6;transition:opacity .2s ease;color:rgba(255,255,255,.92);padding:0}
.toast-close:hover{opacity:1}
@keyframes toastSlideIn{0%{transform:translateY(-120%);opacity:0;scale:.9}100%{transform:translateY(0);opacity:1;scale:1}}
@keyframes toastSlideOut{0%{transform:translateY(0);opacity:1;scale:1}100%{transform:translateY(-120%);opacity:0;scale:.9}}

.upload-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.upload-header-icon{width:36px;height:36px;border-radius:10px;background:rgba(220,20,60,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.upload-header-icon svg{width:18px;height:18px;stroke:var(--ac);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.upload-header-text{font-size:15px;font-weight:700;color:var(--t1)}
.upload-header-sub{font-size:12px;color:var(--t2);font-weight:400;margin-top:1px}
.tips{display:flex;gap:8px;margin-top:14px}
.tip{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--border-primary);text-align:center}
.tip-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(220,20,60,.08)}
.tip-icon svg{width:16px;height:16px;stroke:var(--ac);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tip-text{font-size:10px;color:var(--t2);line-height:1.3;font-weight:500}
.back-row{display:flex;align-items:center;gap:4px;color:var(--t2);font-size:13px;cursor:pointer;padding:6px 0;margin-bottom:8px;background:none;border:none}
.back-row:active{opacity:.6}


/* ── Category grid (sb2c9 style — video left, photos right on desktop; stacked on mobile) ── */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.cat-grid{grid-template-columns:1fr}}
.cat-right{display:flex;flex-direction:column;gap:20px}
.cat-card{position:relative;overflow:hidden;cursor:pointer;border-radius:10px;border:1px solid var(--border-primary);background:var(--bg-tertiary);transition:border-color .35s,box-shadow .35s,transform .35s;min-height:180px}
@media(hover:hover){.cat-card:hover{border-color:var(--ac);box-shadow:0 8px 24px var(--glow);transform:translateY(-4px)}}
.cat-card:active{transform:scale(.98)}
@media(hover:hover){.cat-card:hover .cat-bg{transform:scale(1.05)}}
.cat-video{min-height:580px}
@media(max-width:768px){.cat-video{min-height:400px}}
.cat-photo{flex:1;min-height:0}
@media(max-width:768px){.cat-photo{min-height:200px}}
.cat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .7s}
.cat-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:24px 28px;border-radius:10px;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.05) 65%)}
.cat-title{font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:#fff;position:relative;z-index:1;transition:font-size .3s ease}
@media(hover:hover){.cat-card:hover .cat-title{font-size:32px}}

/* ── Panel title (1doee _panelTitle style) ── */
.panel-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--t2);margin-bottom:14px;margin-top:0}

/* ── Item cards with media (1doee style) ── */
.media-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));overflow-y:auto;padding:2px;-webkit-overflow-scrolling:touch}
.media-grid::-webkit-scrollbar{width:3px}
.media-grid::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
.mc{position:relative;aspect-ratio:9/16;background:var(--bg-tertiary);border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;padding:0;min-width:0;width:100%;transition:border-color .25s,box-shadow .25s,transform .2s;display:block}
@media(hover:hover){.mc:hover{border-color:var(--ac);transform:translateY(-3px);box-shadow:0 8px 24px var(--glow)}}
.mc:active{transform:scale(.97)}
.mc .mc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}
.mc .mc-media-visible{opacity:1}
.mc .mc-fallback{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a1a,#0d0d0d)}
.mc .mc-overlay{position:absolute;bottom:0;left:0;right:0;z-index:2;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 60%);padding:16px 12px 12px;border-radius:0 0 8px 8px}
.mc .mc-name{font-size:1rem;font-weight:700;color:#fff;display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc .mc-price{display:inline-flex;align-items:center;gap:5px;background:var(--ac);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:20px;box-shadow:0 2px 8px var(--glow);margin-top:4px;white-space:nowrap}
.mc .mc-coin{width:14px;height:14px;flex-shrink:0}
.mc .mc-badge{position:absolute;top:8px;right:8px;z-index:3;background:var(--ac);color:#fff;font-size:14px;font-weight:700;padding:3px 10px;border-radius:20px;box-shadow:0 2px 8px var(--glow);white-space:nowrap;pointer-events:none}

/* ── Video model cards with media (1doee + sb2c9 hybrid) ── */
.vmc-list{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));overflow-y:auto;padding:2px;-webkit-overflow-scrolling:touch}
.vmc-list::-webkit-scrollbar{width:3px}
.vmc-list::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
.vmc{position:relative;aspect-ratio:9/16;background:var(--bg-tertiary);border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;padding:0;min-width:0;width:100%;transition:border-color .25s,box-shadow .25s,transform .2s;display:block}
@media(hover:hover){.vmc:hover{border-color:var(--ac);transform:translateY(-3px);box-shadow:0 8px 24px var(--glow)}}
.vmc:active{transform:scale(.97)}
.vmc .vmc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}
.vmc .vmc-overlay{position:absolute;bottom:0;left:0;right:0;z-index:2;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 60%);padding:16px 12px 12px;border-radius:0 0 8px 8px}
.vmc .vmc-name{font-size:1rem;font-weight:700;color:#fff;display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vmc .vmc-badge{position:absolute;top:8px;right:8px;z-index:3;background:var(--ac);color:#fff;font-size:14px;font-weight:700;padding:3px 10px;border-radius:20px;box-shadow:0 2px 8px var(--glow);white-space:nowrap;pointer-events:none;display:inline-flex;align-items:center;gap:4px}

.og{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:50vh;overflow-y:auto;padding:2px;margin-bottom:8px;-webkit-overflow-scrolling:touch}
.og::-webkit-scrollbar{width:2px}
.og::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px}
.oi{background:var(--bg2);border:1px solid rgba(255,255,255,.08);border-radius:var(--rs);padding:10px 6px;text-align:center;cursor:pointer;transition:all .2s;font-size:11px;line-height:1.3}
.oi:active{transform:scale(.95)}
@media(hover:hover){.oi:hover{background:var(--bg3)}}

.ol{max-height:55vh;overflow-y:auto;padding:2px;-webkit-overflow-scrolling:touch}
.ol::-webkit-scrollbar{width:2px}
.ol::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px}
.oli{background:var(--bg2);border:1px solid rgba(255,255,255,.08);border-radius:var(--rs);padding:12px 14px;margin-bottom:6px;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center}
.oli:active{transform:scale(.98)}
@media(hover:hover){.oli:hover{background:var(--bg3)}}
.oli .nm{font-size:12px;font-weight:500}
.oli .pr{font-size:11px;color:var(--ac);background:rgba(220,20,60,.12);padding:3px 8px;border-radius:10px}

.spinner{width:52px;height:52px;margin:0 auto 18px;position:relative}
.spinner .sd{position:absolute;width:10px;height:10px;border-radius:50%;animation:orbit 1.8s linear infinite}
.spinner .sd:nth-child(1){background:var(--ac);animation-delay:0s}
.spinner .sd:nth-child(2){background:var(--ac2);animation-delay:.6s}
.spinner .sd:nth-child(3){background:var(--ac3);animation-delay:1.2s}
@keyframes orbit{0%{top:50%;left:50%;transform:translate(-50%,-50%) rotate(0deg) translateX(20px)}100%{top:50%;left:50%;transform:translate(-50%,-50%) rotate(360deg) translateX(20px)}}
.pulse-text{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ─── Processing screen ─── */
.proc-screen{padding:20px 0;text-align:center;animation:procFadeIn .5s ease}
@keyframes procFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.proc-visual{position:relative;width:120px;height:120px;margin:0 auto 28px}
.proc-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(220,20,60,.1);border-top-color:var(--ac);animation:ringSpin 1.5s linear infinite}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.proc-ring-2,.proc-ring-3{display:none}
.proc-center{position:absolute;inset:12px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(220,20,60,.06)}
.proc-emoji{line-height:0;animation:procPulse 2s ease-in-out infinite}
.proc-emoji svg{width:36px;height:36px;stroke:var(--ac);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes procPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.8}}
.proc-particles,.proc-waves{display:none}

/* Progress bar */
.proc-bar-wrap{width:100%;max-width:260px;margin:0 auto 20px;position:relative}
.proc-bar-bg{height:4px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.proc-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ac),var(--ac2),#ff4444);background-size:300% 100%;animation:procBarShimmer 2s ease-in-out infinite;width:0%;transition:width .5s ease}
@keyframes procBarShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.proc-bar-pct{font-size:12px;color:var(--t2);margin-top:6px;font-weight:600;min-height:16px}

/* Status text with typing effect */
.proc-status{font-size:16px;font-weight:700;margin-bottom:6px;min-height:24px;color:var(--t1)}
.proc-substatus{font-size:12px;color:var(--t2);min-height:16px;margin-bottom:16px}

/* Fun facts card */
.proc-fact{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px;padding:14px 16px;max-width:280px;margin:0 auto;animation:procFactIn .4s ease;font-size:12px;color:var(--t2);line-height:1.5;text-align:center}
@keyframes procFactIn{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}
.proc-fact-icon{margin-bottom:6px;line-height:0}
.proc-fact-icon svg{width:20px;height:20px;stroke:var(--ac);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Timer */
.proc-timer{font-size:11px;color:var(--t3);margin-top:12px;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;gap:4px}
.proc-timer svg{width:13px;height:13px;stroke:var(--t3);fill:none;stroke-width:2;stroke-linecap:round}

.check-pop{animation:popIn .5s cubic-bezier(.175,.885,.32,1.275);line-height:0;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:rgba(52,211,153,.1);border:2px solid rgba(52,211,153,.25);margin:0 auto}
.check-pop svg{width:36px;height:36px;stroke:#34d399;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.error-pop{animation:popIn .5s cubic-bezier(.175,.885,.32,1.275);line-height:0;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:rgba(220,20,60,.1);border:2px solid rgba(220,20,60,.25);margin:0 auto}
.error-pop svg{width:36px;height:36px;stroke:var(--ac);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.done-result{max-width:260px;margin:0 auto;border-radius:16px;overflow:hidden;cursor:pointer;position:relative}
.done-result-placeholder{width:100%;aspect-ratio:9/15.4;border-radius:16px;background:var(--bg-tertiary);position:relative;overflow:hidden}
.done-result-placeholder::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);animation:shimmer 1.5s ease-in-out infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.done-result img,.done-result video{width:100%;display:block;border-radius:16px;object-fit:cover}
.done-actions{max-width:300px;margin:0 auto}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s ease;pointer-events:none}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img,.lightbox video{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;transform:scale(.9);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.lightbox.open img,.lightbox.open video{transform:scale(1)}
.lightbox-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.lightbox-close svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
@keyframes popIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}

.err{background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.25);border-radius:var(--rs);padding:9px 12px;margin-top:8px;font-size:12px;color:#fda4af;animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* Packages */
.bal-section{margin-bottom:28px}
.bal-section-title{font-size:16px;font-weight:700;color:var(--t1);margin-bottom:12px}
.pkg-list{display:flex;flex-direction:column;gap:10px}
.pkg{position:relative;padding:14px 18px;background:var(--c1);border:2px solid var(--border-primary);border-radius:12px;cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pkg:active{transform:scale(.97)}
@media(hover:hover){.pkg:hover{border-color:var(--ac)}}
.pkg.pkg-selected{border-color:var(--ac)!important;box-shadow:0 0 0 3px rgba(220,20,60,.2)}
.pkg-credits{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;color:var(--t1)}
.pkg-credits-old{font-size:20px;font-weight:700;color:var(--t1);text-decoration:line-through;opacity:.5}
.pkg-price{font-size:18px;font-weight:700;color:var(--t1);white-space:nowrap}

/* Payment methods */
.pm-list{display:flex;flex-direction:column;gap:10px}
.pm{padding:14px 18px;background:var(--c1);border:2px solid var(--border-primary);border-radius:12px;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:12px}
.pm:active{transform:scale(.97)}
@media(hover:hover){.pm:hover{border-color:var(--ac)}}
.pm.pm-selected{border-color:var(--ac)!important;box-shadow:0 0 0 3px rgba(220,20,60,.2)}
.pm .pm-i{font-size:22px;width:28px;text-align:center;display:flex;align-items:center;justify-content:center}
.pm .pm-i img{width:24px;height:24px;object-fit:contain}
.pm .pm-t{font-size:15px;font-weight:600;color:var(--t1)}
.bal-summary{padding:20px;background:var(--c1);border:1px solid var(--border-primary);border-radius:12px;display:flex;flex-direction:column;gap:14px}
.bal-summary-row{display:flex;align-items:center;justify-content:space-between}
.bal-summary-label{font-size:15px;font-weight:600;color:var(--t2)}
.bal-summary-value{display:flex;align-items:center;gap:6px;font-size:17px;font-weight:700;color:var(--t1)}
.bal-continue{width:100%;padding:14px 24px;background:var(--ac);color:#fff;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border:none;border-radius:10px;cursor:pointer;transition:all .25s}
.bal-continue:active{transform:scale(.97);opacity:.9}
.pm .pm-d{font-size:11px;color:var(--t2)}

/* Referral */
.ref-link-row{display:flex;align-items:center;gap:10px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color .2s}
.ref-link-row:active{border-color:var(--ac)}
.ref-link-text{flex:1;font-size:13px;color:var(--t1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-copy-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:all .2s}
.ref-copy-icon svg{width:16px;height:16px;stroke:var(--t2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.ref-copy-icon.copied{background:rgba(52,211,153,.12)}
.ref-copy-icon.copied svg{stroke:#34d399}
.ref-withdraw-btn{width:100%;display:flex;align-items:center;gap:10px;padding:14px 18px;background:rgba(255,255,255,.04);border:none;border-top:1px solid var(--border-primary);color:var(--t1);font-size:13px;font-weight:600;cursor:pointer;transition:background .2s;font-family:inherit;text-align:left}
.ref-withdraw-btn:active{background:rgba(255,255,255,.08)}
.ref-withdraw-btn:disabled{opacity:.4;pointer-events:none}

/* Profile header */
.prof-header{text-align:center;padding:28px 20px 24px;position:relative;overflow:hidden;margin-bottom:14px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px}
.prof-header::before{content:'';position:absolute;top:-60%;left:-30%;width:160%;height:160%;background:conic-gradient(from 180deg,transparent,rgba(220,20,60,.08),transparent,rgba(220,20,60,.04),transparent);animation:sdRotate 12s linear infinite;pointer-events:none}
.prof-avatar{width:72px;height:72px;border-radius:50%;background:rgba(220,20,60,.08);border:2px solid rgba(220,20,60,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative;z-index:1}
.prof-avatar svg{width:32px;height:32px;stroke:var(--ac);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.prof-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.prof-name{font-size:18px;font-weight:700;position:relative;z-index:1;margin-bottom:4px}
.prof-id{font-size:12px;color:var(--t3);position:relative;z-index:1;font-weight:500;letter-spacing:.3px}

/* Profile stats */
.prof-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.prof-stat{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px;padding:16px 12px;text-align:center;position:relative;overflow:hidden;opacity:0;animation:sdSlideIn .5s ease forwards}
.prof-stat:nth-child(1){animation-delay:.05s}
.prof-stat:nth-child(2){animation-delay:.1s}
.prof-stat:nth-child(3){animation-delay:.15s}
.prof-stat:nth-child(4){animation-delay:.2s}
.prof-stat::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(220,20,60,.05),transparent,rgba(220,20,60,.02),transparent);animation:sdRotate 10s linear infinite;pointer-events:none}
.prof-stat::after{content:'';position:absolute;inset:0;background:var(--bg-tertiary);border-radius:9px;z-index:0}
.prof-stat>*{position:relative;z-index:1}
.prof-stat-icon{font-size:22px;margin-bottom:6px;display:inline-block}
.prof-stat-val{font-size:20px;font-weight:800;color:var(--ac)}
.prof-stat-val .coin{vertical-align:middle;margin-left:2px}
.prof-stat-label{font-size:10px;color:var(--t2);margin-top:3px;font-weight:500;letter-spacing:.3px;text-transform:uppercase}

/* Profile settings rows */
.prof-settings{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px;margin-bottom:14px;overflow:hidden}
.prof-set-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:background .15s}
.prof-set-row:last-child{border-bottom:none}
.prof-set-row:active{background:rgba(255,255,255,.04)}
.prof-set-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.prof-set-icon.lang-icon{background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.15)}
.prof-set-icon.rules-icon{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.15)}
.prof-set-icon.support-icon{background:rgba(220,20,60,.1);border:1px solid rgba(220,20,60,.15)}
.prof-set-text{flex:1;min-width:0}
.prof-set-label{font-size:13px;font-weight:600;color:var(--t1)}
.prof-set-sub{font-size:11px;color:var(--t3);margin-top:1px}
.prof-set-action{font-size:12px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:4px}
.prof-set-action svg{width:14px;height:14px;stroke:var(--t3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Profile promo card */
.prof-promo-card{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px;padding:16px;margin-bottom:14px}
.prof-promo-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.prof-qa-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.prof-qa-icon.promo-qa{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.15)}
.prof-promo-text{flex:1}
.prof-promo-title{font-size:14px;font-weight:700}
.prof-promo-sub{font-size:11px;color:var(--t3);margin-top:2px}
.prof-promo-form{display:flex;gap:8px}
.prof-promo-input-wrap{flex:1;position:relative}
.prof-promo-input-wrap .prof-promo-input{padding-right:36px}
.prof-promo-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:none;background:rgba(255,255,255,.1);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:opacity .15s}
.prof-promo-clear svg{width:12px;height:12px;stroke:var(--t3);fill:none;stroke-width:2.5;stroke-linecap:round}
.prof-promo-clear:active{opacity:.5}
.prof-promo-btn{width:44px;flex-shrink:0;background:var(--ac);border:none;border-radius:10px;color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:opacity .15s;display:flex;align-items:center;justify-content:center}
.prof-promo-btn:active{opacity:.6}
.prof-promo-btn:disabled{opacity:.4;pointer-events:none}

/* Lang modal */
.lang-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;display:none;align-items:flex-end;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* On the site (browser-mode) center the language modal too. Mini App keeps the slide-up. */
.site-mode #langOverlay{align-items:center;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:rgba(0,0,0,.55)}
.site-mode #langOverlay .lang-modal{border-radius:16px;max-width:420px;width:calc(100% - 32px);margin:0 16px;padding:28px 24px}
.site-mode #langOverlay.show .lang-modal{animation:none}

/* Login & logout modals: centered + smooth fade-in/scale animation. */
#loginOverlay,#logoutOverlay,#filtersOverlay{
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0);
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s ease,visibility 0s linear .26s,background .26s ease,backdrop-filter .26s ease,-webkit-backdrop-filter .26s ease;
}
#loginOverlay.show,#logoutOverlay.show,#filtersOverlay.show{
  opacity:1;visibility:visible;pointer-events:auto;
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:opacity .26s ease,visibility 0s linear 0s,background .26s ease,backdrop-filter .26s ease,-webkit-backdrop-filter .26s ease;
}
#loginOverlay .lang-modal,#logoutOverlay .lang-modal,#filtersOverlay .lang-modal{
  opacity:0;transform:scale(.94) translateY(8px);
  transition:opacity .24s ease,transform .28s cubic-bezier(.34,1.56,.64,1);
  animation:none !important;
}
#loginOverlay .lang-modal,#logoutOverlay .lang-modal{
  border-radius:16px;max-width:420px;width:calc(100% - 32px);margin:0 16px;padding:32px 24px;
}
#loginOverlay.show .lang-modal,#logoutOverlay.show .lang-modal,#filtersOverlay.show .lang-modal{
  opacity:1;transform:scale(1) translateY(0);
}
.lang-overlay.show{display:flex}
.lang-modal{background:#141414;border:1px solid var(--border-primary);border-radius:16px 16px 0 0;width:100%;max-width:460px;padding:24px 20px calc(20px + var(--safe-b));transition:transform .25s ease,opacity .25s ease;transform:translateY(0);opacity:1}
.lang-overlay.show .lang-modal{animation:slideUp .25s ease}
.lang-overlay.closing .lang-modal{transform:translateY(100%);opacity:0}
.lang-overlay.closing{background:rgba(0,0,0,0);transition:background .25s ease}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.lang-modal-title{font-size:17px;font-weight:800;margin-bottom:16px}
.lang-option{display:flex;align-items:center;padding:14px 16px;border-radius:12px;cursor:pointer;transition:background .15s;margin-bottom:4px;font-size:15px;font-weight:500}
.lang-option:active{transform:scale(.98)}
.lang-option.selected{background:var(--ac);color:#fff}
.lang-option .lang-check{margin-left:auto;opacity:0;font-size:18px}
.lang-option.selected .lang-check{opacity:1}
.lang-option:not(.selected):hover{background:transparent}

/* Rules screen */
.rules-back{display:inline-flex;align-items:center;gap:4px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px;padding:8px 14px 8px 8px;color:var(--t2);font-size:13px;font-weight:600;cursor:pointer;margin-bottom:12px;transition:all .2s;font-family:inherit}
.rules-back svg{width:18px;height:18px;stroke:var(--ac);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rules-back:active{transform:scale(.96);opacity:.7}
.rules-hero{text-align:center;padding:24px 20px 20px;margin-bottom:14px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px;position:relative;overflow:hidden}
.rules-hero::before{content:'';position:absolute;top:-60%;left:-30%;width:160%;height:160%;background:conic-gradient(from 90deg,transparent,rgba(251,191,36,.06),transparent,rgba(251,191,36,.03),transparent);animation:sdRotate 12s linear infinite;pointer-events:none}
.rules-hero-icon{font-size:40px;margin-bottom:10px;position:relative;z-index:1}
.rules-hero-title{font-size:18px;font-weight:700;position:relative;z-index:1}
.rules-hero-sub{font-size:11px;color:var(--t3);margin-top:4px;position:relative;z-index:1}
.rules-body{padding-bottom:20px}
.rules-intro{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:16px;padding:0 4px}
.rules-section{display:flex;gap:14px;margin-bottom:14px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px;padding:16px}
.rules-num{width:28px;height:28px;border-radius:50%;background:rgba(220,20,60,.1);border:1px solid rgba(220,20,60,.15);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ac);flex-shrink:0;margin-top:1px}
.rules-content{flex:1;min-width:0}
.rules-content h3{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--t1)}
.rules-content p{font-size:12px;color:var(--t2);line-height:1.6}

/* Input */
.inp{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:10px;padding:11px 14px;font-size:14px;color:var(--t1);width:100%;outline:none;transition:border-color .2s}
.inp:focus{border-color:var(--ac)}
.inp::placeholder{color:var(--t3)}

/* Confetti */
.confetti-c{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}
.confetti-p{position:absolute;width:8px;height:8px;top:-10px;animation:cFall 3s ease-in forwards}
@keyframes cFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* Generations History */
.gh-title{font-size:24px;font-weight:800;color:var(--t1);margin-bottom:14px}
.gh-search-wrap{margin-bottom:16px}
.gh-search{position:relative;margin-bottom:10px}
.gh-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--t3);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.gh-search-input{width:100%;padding:12px 14px 12px 42px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:12px;color:var(--t1);font-size:14px;font-family:inherit;outline:none;transition:border-color .2s}
.gh-search-input::placeholder{color:var(--t3)}
.gh-search-input:focus{border-color:var(--ac)}
.gh-filters{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gh-filter{padding:9px 10px;border-radius:10px;border:1px solid var(--border-primary);background:var(--bg-tertiary);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;font-family:inherit}
.gh-filter.on{background:var(--ac);color:#fff;border-color:var(--ac);box-shadow:0 2px 10px var(--glow)}
.gh-filter:active{transform:scale(.97)}
.gh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gh-empty{text-align:center;padding:60px 20px;color:var(--t2);font-size:15px}
.gh-card{background:transparent;border:none;padding:0;cursor:pointer;transition:transform .25s}
.gh-card:active{transform:scale(.97)}
.gh-card-media{position:relative;width:100%;aspect-ratio:9/16;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:12px;overflow:hidden}
.gh-card-media img,.gh-card-media video{width:100%;height:100%;object-fit:cover}
.gh-placeholder{width:100%;height:100%;background:linear-gradient(135deg,rgba(220,20,60,.1),rgba(220,20,60,.05))}
.gh-video-placeholder{display:flex;align-items:center;justify-content:center}
.gh-play-icon{width:48px;height:48px;background:rgba(220,20,60,.8);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;padding-left:4px}
.gh-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}
.gh-play-btn svg{width:18px;height:18px;margin-left:2px}
.gh-spinner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:2}
.gh-spinner{width:36px;height:36px;border:3px solid rgba(220,20,60,.2);border-top-color:var(--ac);border-radius:50%;animation:ghSpin .8s linear infinite}
@keyframes ghSpin{to{transform:rotate(360deg)}}
.gh-status{position:absolute;top:8px;right:8px;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:700;text-transform:uppercase;z-index:1;color:#fff}
.gh-status-processing{background:#3b82f6e6}
.gh-status-completed{background:#22c55ee6}
.gh-status-failed{background:#ef4444e6}
.gh-card-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);padding:24px 10px 10px;pointer-events:none}
.gh-preset{font-size:13px;font-weight:700;color:#fff;line-height:1.3}
.gh-date{font-size:11px;color:rgba(255,255,255,.7)}

/* Generation Modal */
.gh-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end;justify-content:center;background:transparent;opacity:0;pointer-events:none;transition:all .3s ease}
.gh-modal.open{opacity:1;pointer-events:all;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.gh-modal-dialog{width:100%;max-width:920px;max-height:90vh;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:16px 16px 0 0;overflow:hidden;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1)}
.gh-modal.open .gh-modal-dialog{transform:translateY(0)}
.gh-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-primary);flex-shrink:0}
.gh-modal-title{font-size:18px;font-weight:700;color:var(--t1)}
.gh-modal-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:none;border-radius:50%;color:var(--t1);cursor:pointer;font-size:24px;line-height:1;transition:all .2s}
.gh-modal-close:hover{background:var(--ac);color:#fff}
.gh-modal-body{flex:1;overflow-y:auto;padding:20px}
.gh-modal-preview{width:100%;aspect-ratio:9/16;max-height:50vh;background:var(--bg-primary);border-radius:12px;overflow:hidden;margin-bottom:16px}
.gh-modal-preview img,.gh-modal-preview video{width:100%;height:100%;object-fit:contain}
.gh-modal-details{display:flex;flex-direction:column;gap:0;padding:12px;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:12px;margin-bottom:16px}
.gh-detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-primary)}
.gh-detail-row:last-child{border-bottom:none}
.gh-detail-label{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.5px}
.gh-detail-value{font-size:13px;font-weight:600;color:var(--t1)}
.gh-download{width:100%;padding:14px;background:var(--ac);color:#fff;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border:none;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-family:inherit;transition:opacity .2s}
.gh-download:hover{opacity:.9}
.gh-delete{width:100%;margin-top:10px;padding:12px;background:transparent;color:var(--t2);font-size:14px;font-weight:600;border:1px solid var(--border-primary);border-radius:10px;cursor:pointer;transition:all .2s}
.gh-delete:hover{color:var(--t1);border-color:var(--t2)}

/* (old toast removed — using kisex-style toast system) */

.success-badge{background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.3);color:#34d399;border-radius:var(--rs);padding:10px 14px;font-size:13px;text-align:center;margin-bottom:10px}

/* Sub overlay */
.sub-overlay{position:fixed;inset:0;z-index:300;background:rgba(10,10,26,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}
.sub-overlay .sub-icon{font-size:56px;margin-bottom:16px;animation:bounce 2.5s ease infinite}
.sub-overlay h2{font-size:20px;font-weight:700;margin-bottom:8px}
.sub-overlay p{font-size:13px;color:var(--t2);margin-bottom:20px;line-height:1.5}
.sub-channels{width:100%;max-width:320px}
.sub-ch{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(220,20,60,.1);border:1px solid rgba(220,20,60,.2);border-radius:10px;padding:14px;margin-bottom:8px;cursor:pointer;text-decoration:none;color:var(--t1);font-size:14px;font-weight:600;transition:all .2s}
.sub-ch:active{transform:scale(.97)}
.sub-check-btn{margin-top:12px}

/* Withdrawal modal */
.wd-modal-bg{position:fixed;inset:0;z-index:400;background:rgba(10,10,26,.85);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.wd-modal-bg.active{opacity:1;pointer-events:auto}
.wd-modal{background:var(--bg-tertiary);border:1px solid rgba(220,20,60,.25);border-radius:14px;padding:24px;width:100%;max-width:360px;transform:scale(.9);transition:transform .25s}
.wd-modal-bg.active .wd-modal{transform:scale(1)}
.wd-modal h3{font-size:17px;font-weight:700;margin-bottom:4px;text-align:center}
.wd-modal .wd-sub{font-size:12px;color:var(--t2);text-align:center;margin-bottom:16px}
.wd-modal .wd-amount{text-align:center;font-size:22px;font-weight:700;color:var(--ac);margin-bottom:16px}
.wd-modal textarea{width:100%;min-height:80px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:var(--t1);padding:10px 12px;font-size:13px;resize:vertical;font-family:inherit}
.wd-modal textarea::placeholder{color:var(--t2)}
.wd-modal .wd-btns{display:flex;gap:8px;margin-top:14px}
.wd-modal .wd-btns button{flex:1;padding:10px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.wd-modal .wd-btns button:active{transform:scale(.96)}
.wd-modal .wd-send{background:var(--ac);color:#fff}
.wd-modal .wd-cancel{background:rgba(255,255,255,.08);color:var(--t2)}

/* Manual payment flow */
.manual-card{background:linear-gradient(135deg,rgba(220,20,60,.12),rgba(244,63,94,.08));border:1px solid rgba(220,20,60,.2);border-radius:var(--r);padding:24px 18px;text-align:center;position:relative;overflow:hidden;animation:manualIn .5s ease}
@keyframes manualIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.manual-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(220,20,60,.1),transparent 70%);pointer-events:none}
.manual-icon{font-size:44px;margin-bottom:12px;animation:manualPulse 2s ease-in-out infinite}
@keyframes manualPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.manual-amount{font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--ac),var(--ac2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:8px 0}
.manual-label{font-size:12px;color:var(--t2);margin-bottom:4px}
.manual-details{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;margin:14px 0;text-align:left;font-size:13px;color:var(--t1);line-height:1.6;word-break:break-word;white-space:pre-wrap}
.manual-copy-row{display:flex;gap:8px;margin-top:10px}
.manual-copy-num{flex:1;background:rgba(220,20,60,.12);border:1px solid rgba(220,20,60,.25);border-radius:10px;padding:10px 14px;font-size:15px;font-weight:700;font-family:monospace;letter-spacing:1.5px;color:var(--ac);text-align:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.manual-copy-num:active{transform:scale(.97)}
.manual-copy-num.copied{background:rgba(52,211,153,.15);border-color:rgba(52,211,153,.3);color:#34d399}
.manual-copy-num.copied::after{content:'✓';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:16px}

/* Receipt upload */
.receipt-zone{border:2px dashed rgba(220,20,60,.3);border-radius:var(--r);padding:32px 16px;text-align:center;cursor:pointer;transition:all .3s;animation:receiptPulse 2.5s ease-in-out infinite;position:relative;overflow:hidden}
.receipt-zone::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(220,20,60,.04),rgba(244,63,94,.02));pointer-events:none}
.receipt-zone.dragover{border-color:var(--ac);background:rgba(220,20,60,.08);transform:scale(1.01)}
@keyframes receiptPulse{0%,100%{border-color:rgba(220,20,60,.2)}50%{border-color:rgba(220,20,60,.5)}}
.receipt-icon{font-size:36px;margin-bottom:8px;animation:bounce 2.5s ease infinite}
.receipt-text{color:var(--t2);font-size:13px}
.receipt-hint{color:var(--t3);font-size:11px;margin-top:4px}
.receipt-preview{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:12px;animation:fadeScale .3s ease}
@keyframes fadeScale{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.receipt-preview img{width:100%;max-height:220px;object-fit:cover;display:block;border-radius:var(--r)}
.receipt-preview .rp-overlay{position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,.6));display:flex;align-items:flex-end;justify-content:center;padding:12px}
.receipt-preview .rp-change{background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:8px;padding:6px 14px;font-size:12px;cursor:pointer;transition:all .2s}
.receipt-preview .rp-change:active{transform:scale(.95)}

/* Manual pending */
.manual-pending{text-align:center;padding:30px 18px;animation:manualIn .5s ease}
.manual-pending-icon{font-size:48px;margin-bottom:12px;animation:pendSpin 3s linear infinite}
@keyframes pendSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.manual-status-badge{display:inline-block;padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;margin-top:12px;animation:statusPulse 2s ease-in-out infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.6}}
.msb-pending{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.25);color:#fbbf24}
.msb-approved{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.25);color:#34d399}
.msb-rejected{background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.25);color:#fda4af}

/* Step indicator */
.manual-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:18px}
.ms-step{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:rgba(255,255,255,.06);color:var(--t3);border:2px solid rgba(255,255,255,.08);transition:all .4s cubic-bezier(.4,0,.2,1)}
.ms-step.active{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border-color:transparent;transform:scale(1.1);box-shadow:0 0 16px rgba(220,20,60,.4)}
.ms-step.done{background:rgba(52,211,153,.15);color:#34d399;border-color:rgba(52,211,153,.3)}
.ms-line{width:28px;height:2px;background:rgba(255,255,255,.08);transition:background .4s}
.ms-line.done{background:linear-gradient(90deg,#34d399,var(--ac))}

/* ═══════════════════════════════════════════════════════════
   DESKTOP LAYOUT (>= 900px)
   Mobile bottom nav becomes a left sidebar; content gets wider.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 900px){
  body{user-select:auto;-webkit-user-select:auto}
  /* Browser site-mode goes full width so the inner-scrollbar sits at the right edge of the viewport.
     Mini App keeps the original max-width:1500px centered look. */
  #app{max-width:1500px;flex-direction:row;height:100vh;height:100dvh}
  .site-mode #app{max-width:none;margin:0}

  /* Sidebar (was bottom .nav) */
  .nav{
    position:fixed;top:0;left:0;bottom:0;right:auto;
    width:240px;height:100vh;height:100dvh;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    border-radius:0;border:none;border-right:1px solid var(--border-primary);
    background:rgba(13,13,13,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    padding:80px 12px 16px;gap:6px;margin:0;max-width:none;box-shadow:none;
  }
  .nav-pill{display:none}
  .nav-btn{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;
    padding:12px 16px;font-size:14px;border-radius:12px;margin:0;
    text-align:left;width:100%;
  }
  .nav-btn .ni svg{width:20px;height:20px}
  .nav-btn span:last-child{transform:none}
  /* Login button (visible only on desktop, only when not logged in) */
  .nav-login{margin-top:auto;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;font-weight:600;border:none;border-radius:12px;padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;justify-content:center;font-size:14px;transition:transform .15s,box-shadow .15s}
  .nav-login:hover{transform:translateY(-1px);box-shadow:0 6px 18px var(--glow)}
  .nav-login svg{width:18px;height:18px}

  /* Top-bar shifted to the right of sidebar */
  .top-bar{left:240px}
  .top-bar-inner{padding:14px 32px;max-width:1260px}
  .logo{font-size:24px}

  /* Content area */
  .content{padding-top:64px;padding-left:240px}
  .screen{padding:32px 40px 60px}

  /* Hero / feed get more breathing room */
  .hero{padding:48px 32px;border-radius:14px;margin-bottom:24px}
  /* 900–999px: 3 cards per row */
  .feed-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
/* 1000–1649px: 4 cards per row, fluid size */
@media (min-width: 1000px){
  .feed-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* 1650px+: 4 cards per row, capped at 290px (max card 290×517 with 9:16 aspect).
   Achieved by sizing the screen content area (via padding) to exactly 4×290 + 3×16 = 1208px,
   then using repeat(4, 1fr) so the grid fills it without leftover side gaps. */
@media (min-width: 1650px){
  .feed-grid{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:initial}
  .site-mode .screen{padding-left:max(40px, calc(50% - 604px)) !important;padding-right:max(40px, calc(50% - 604px)) !important}
}
/* On mobile, hide the desktop-only login button */
@media (max-width: 899px){
  .nav-login{display:none !important}
  .nav-user{display:none !important}
}
/* Honor [hidden] attribute — CSS display:flex above otherwise overrides it */
.nav-login[hidden],.nav-user[hidden],.profile-logout-btn[hidden]{display:none !important}

/* === Browser-mode site (opened in a real browser, not Telegram Mini App) === */
/* No top-bar; sidebar replaced with a horizontal header on desktop. */
.site-mode .top-bar{display:none !important}
.site-mode .content{padding-top:0 !important}
.nav-logo{display:none}  /* unused now (replaced with site-header) */

/* ── Site header (kisex-inspired) — desktop browser-mode only ─────── */
.site-header{display:none}
@media (min-width: 900px){
  .site-mode .nav{display:none !important}
  .site-mode .site-header{display:block}
  .site-mode .content{padding-left:0 !important}
  .site-mode #app{height:calc(100vh - 66px) !important;height:calc(100dvh - 66px) !important}
}
.site-header{position:sticky;top:0;width:100%;background:#0d0d0deb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-primary);z-index:200}
.site-header-inner{max-width:1600px;margin:0 auto;padding:12px 48px;display:flex;align-items:center;justify-content:space-between}
.site-header-left{display:flex;align-items:center;gap:36px}
.site-header-right{display:flex;align-items:center;gap:14px}
.site-logo{display:flex;align-items:center;gap:5px;text-decoration:none;cursor:pointer;transition:opacity .2s}
.site-logo:hover{opacity:.8}
.site-logo-text{font-weight:800;font-size:25px;text-transform:uppercase;color:var(--ac);letter-spacing:-.5px}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav-link{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--t2);text-decoration:none;padding:6px 12px;border-radius:8px;transition:color .2s,background .2s;cursor:pointer;-webkit-user-select:none;user-select:none;background:none;border:none;font-family:inherit}
.site-nav-link:hover{color:var(--t1)}
.site-nav-link.active{color:var(--t1) !important;background:var(--bg-tertiary)}
.site-credits{background:var(--bg-tertiary);border:1px solid var(--primary-dark);border-radius:10px;padding:8px 16px;font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;color:var(--t2);cursor:pointer;transition:all .2s;font-family:inherit}
.site-credits:hover{border-color:var(--ac)}
.site-coin{width:18px;height:18px;flex-shrink:0}
.site-credits-amount{color:var(--ac);font-weight:700;font-size:16px}
.site-credits-plus{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--ac);color:#fff;border-radius:5px;font-size:18px;font-weight:700;line-height:1;margin-left:4px}
.site-login-btn{background:linear-gradient(135deg,var(--ac),var(--ac2));border:none;color:#fff;font-weight:600;font-size:14px;padding:10px 18px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:inherit;transition:transform .15s,box-shadow .15s}
.site-login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px var(--glow)}
.site-login-btn svg{width:16px;height:16px}
.site-user-menu{position:relative}
.site-user-btn{display:flex;align-items:center;gap:9px;background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer;padding:5px 10px;transition:background .2s,border-color .2s;font-family:inherit}
.site-user-btn:hover{background:var(--bg-tertiary);border-color:var(--border-primary)}
.site-user-ava{width:34px;height:34px;border-radius:8px;background:var(--bg-tertiary);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:14px;font-weight:600}
.site-user-ava img{width:100%;height:100%;object-fit:cover}
.site-user-name{font-size:14px;font-weight:600;color:var(--t1);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-user-chevron{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--t2);transition:transform .2s}
.site-user-menu.open .site-user-chevron{transform:rotate(180deg)}
.site-user-popup{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:#1a1a1a;border:1px solid var(--border-primary);border-radius:12px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:300;display:none}
.site-user-popup.show{display:block;animation:popupIn .18s ease-out}
.site-user-popup-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--t1);font-size:13px;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit}
.site-user-popup-item:hover{background:rgba(255,255,255,.06)}
.site-user-popup-item svg{width:16px;height:16px}
.site-user-popup-item.danger{color:#f87171}
/* Honor [hidden] on header items */
.site-login-btn[hidden],.site-user-menu[hidden],.site-credits[hidden],.site-user-popup-item[hidden]{display:none !important}

/* Sidebar user card (desktop only, when logged in via browser) */
.nav-user{margin-top:auto;display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--border-primary);border-radius:14px;cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.nav-user:hover{background:rgba(255,255,255,.07);border-color:var(--border-strong)}
.nav-user-ava{width:36px;height:36px;border-radius:50%;background:var(--bg-tertiary);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:14px;font-weight:600}
.nav-user-ava img{width:100%;height:100%;object-fit:cover}
.nav-user-info{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:2px}
.nav-user-name{color:var(--t1);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-user-bal{color:var(--t2);font-size:11px;display:flex;align-items:center;gap:4px}
.nav-user-menu-btn{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;padding:0}
.nav-user-menu-btn svg{width:18px;height:18px}
.nav-user-popup{position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);background:#1a1a1a;border:1px solid var(--border-primary);border-radius:12px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:10;display:none}
.nav-user-popup.show{display:block;animation:popupIn .18s ease-out}
@keyframes popupIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nav-user-popup-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--t1);font-size:13px;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit}
.nav-user-popup-item:hover{background:rgba(255,255,255,.06)}
.nav-user-popup-item svg{width:16px;height:16px}
.nav-user-popup-item.danger{color:#f87171}

/* Logout button inside profile screen (mobile, where sidebar isn't visible) */
.profile-logout-btn{margin-top:18px;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3);color:#f87171;padding:13px 18px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,border-color .15s}
.profile-logout-btn:hover{background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.5)}
.profile-logout-btn svg{width:18px;height:18px}
@media (min-width: 900px){
  .profile-logout-btn{display:none}  /* on desktop logout lives in sidebar instead */
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING AESTHETIC — applied universally (browser, Mini App, mobile, desktop)
   Desktop-only layout (sidebar, site-header) is gated by separate @media
   (min-width: 900px) blocks earlier in this stylesheet. Site-header is hidden
   by default and only shown on desktop site-mode, so site-header design rules
   below are inert on mobile (no rendering side-effects).
   Inspired by the landing at /css/style.css — same palette, gradients, fonts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Background: deep matte black + subtle crimson glow at top ─────── */
.site-mode body{
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(220, 20, 60, 0.10) 0%, transparent 60%),
    radial-gradient(40% 30% at 90% 20%, rgba(220, 20, 60, 0.05) 0%, transparent 70%),
    linear-gradient(180deg, #050507 0%, #000000 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
.site-mode body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 17% 22%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,0.12), transparent 50%),
    radial-gradient(1.5px 1.5px at 38% 64%, rgba(255,255,255,0.14), transparent 50%),
    radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,0.10), transparent 50%),
    radial-gradient(2px 2px at 53% 88%, rgba(255,255,255,0.12), transparent 50%),
    radial-gradient(1px 1px at 8% 49%, rgba(255,255,255,0.16), transparent 50%);
  background-size: 1200px 800px;
  background-position: 0 0;
  animation: siteStarsDrift 90s linear infinite;
  opacity:.55;
}
@keyframes siteStarsDrift{
  from{background-position:0 0}
  to{background-position:1200px 800px}
}

.site-mode .bg-grad{display:none}

/* ── Sidebar nav: refined glass ─────────────────────────────────────── */
.site-mode .nav{
  background: linear-gradient(180deg, rgba(8,8,9,0.92) 0%, rgba(5,5,6,0.95) 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
.site-mode .nav-btn{
  color: rgba(238,239,241,.75);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color .25s, background .25s, transform .15s;
}
.site-mode .nav-btn:hover{
  color: #eeeff1;
  background: rgba(255,255,255,0.05);
}
.site-mode .nav-btn.on{
  color:#fff;
  background: linear-gradient(135deg, rgba(220,20,60,0.95) 0%, rgba(156,14,43,0.9) 100%);
  box-shadow: 0 4px 20px rgba(220,20,60,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
/* Reset accent-colored text from mobile-nav redesign — sidebar uses solid white on red */
.site-mode .nav-btn.on span:last-child{color:#fff}
.site-mode .nav-btn.on .ni{filter:none}

/* ── Top bar: layered blur like landing nav ────────────────────────── */
.site-mode .top-bar{
  background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-mode .top-bar::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 70%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 70%);
}
.site-mode .top-bar-inner{padding:16px 32px}
.site-mode .logo{
  font-size:22px;font-weight:800;letter-spacing:-0.02em;
  background: linear-gradient(135deg, #ff8aa3 0%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(220,20,60,0.4));
}

/* ── Balance badge: pill with rotating crimson glow border ─────────── */
.site-mode .bal-badge{
  position:relative;
  background: linear-gradient(180deg, #4a1320 0%, #6e0d22 100%);
  border: 1px solid rgba(255, 80, 110, 0.45);
  border-radius: 999px;
  padding: 8px 14px 8px 12px;
  box-shadow:
    inset 0 -3px 4px rgba(255,255,255,0.18),
    0 4px 16px -4px rgba(220, 20, 60, 0.5);
  transition: transform .25s ease, box-shadow .35s ease;
  cursor:pointer;
}
.site-mode .bal-badge:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 -3px 6px rgba(255,255,255,0.25),
    0 8px 24px -4px rgba(220, 20, 60, 0.6);
}
.site-mode .bal-badge .bal-amount{color:#fff;font-weight:700;letter-spacing:0.005em}
.site-mode .bal-plus{
  background: rgba(255,255,255,0.18);
  border-radius: 6px;
}

/* ── Avatar button: clean pill ─────────────────────────────────────── */
.site-mode .top-avatar-btn{
  border-radius: 12px;
  padding: 4px;
  transition: background .2s ease, border-color .2s ease;
}
.site-mode .top-avatar-btn:hover{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
.site-mode .top-avatar{border-radius:10px}
.site-mode .top-avatar-placeholder{
  border-radius:10px;
  background: linear-gradient(180deg, #18181b 0%, #0e0e10 100%);
  border-color: rgba(255,255,255,0.12);
}

/* ── HERO carousel: 3 slides, auto-rotate, swipe ─────────────────── */
.site-mode .hero.hero-carousel{
  position: relative;
  padding: 0;
  margin-bottom: 28px;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(220, 20, 60, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #0c0c0e 0%, #06060a 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 32px 80px -32px rgba(0,0,0,0.7);
  animation: siteHeroIn 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 260px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
@keyframes siteHeroIn{
  from{opacity:0;transform:translateY(20px);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.site-mode .hero.hero-carousel::before{
  content:'';
  display:block;
  position:absolute;
  top:-1px;left:-1px;right:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(220,20,60,0.6) 50%, transparent 100%);
  z-index: 3;
}
.site-mode .hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  filter: blur(80px) brightness(0.45) saturate(1.4);
  opacity: 0.4;
  z-index:0;
  transform: scale(1.1);
  pointer-events:none;
}
.site-mode .hero-track{
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 260px;
}
.site-mode .hero-slide{
  position: absolute;
  inset: 0;
  padding: 36px 40px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.5s;
  pointer-events: none;
}
.site-mode .hero-slide.active{
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
/* Chip — фирменная пилюля с иконкой */
.site-mode .hero-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(220, 20, 60, 0.32);
  background: rgba(220, 20, 60, 0.1);
  color: rgba(238, 239, 241, 0.95);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: 'Inter', sans-serif;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px -4px rgba(220, 20, 60, 0.4);
}
.site-mode .hero-chip img,
.site-mode .hero-chip svg{
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}
.site-mode .hero-chip-brand img{
  filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.6));
}
.site-mode .hero-chip svg{
  stroke: #ff8aa3;
  filter: drop-shadow(0 0 6px rgba(220, 20, 60, 0.5));
}
.site-mode .hero-chip-brand span{
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 60%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.site-mode .hero h2{
  position: relative;
  z-index: 1;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 50%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 32px rgba(220, 20, 60, 0.25));
  margin-bottom: 10px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.site-mode .hero p{
  position: relative;
  z-index: 1;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(238, 239, 241, 0.7);
  max-width: 540px;
  margin: 0 auto;
  font-weight: 400;
  letter-spacing: -0.005em;
}
/* CTA-кнопка внутри слайдов 2 и 3 */
.site-mode .hero-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 80, 110, 0.5);
  background:
    radial-gradient(60% 50% at 50% 100%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 60, 90, 0.4) 55%,
      rgba(255, 60, 90, 0) 100%),
    linear-gradient(180deg, #4a1320 0%, #6e0d22 100%);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    inset 0 -3px 4px rgba(255, 255, 255, 0.2),
    0 6px 22px -6px rgba(220, 20, 60, 0.55);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.site-mode .hero-cta:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 -3px 5px rgba(255, 255, 255, 0.3),
    0 10px 28px -6px rgba(220, 20, 60, 0.7);
}
.site-mode .hero-cta svg{
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}
.site-mode .hero-cta:hover svg{transform: translateX(2px)}
/* Pagination dots — progress-bar pill (story-style) */
.site-mode .hero-dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.site-mode .hero-arrow{
  position: absolute;
  bottom: 14px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(14, 14, 16, 0.6);
  border-radius: 13px;
  color: rgba(238, 239, 241, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.3s ease;
}
@media (hover: hover) and (pointer: fine){
  .site-mode .hero-arrow:hover{
    background: rgba(220, 20, 60, 0.22);
    border-color: rgba(220, 20, 60, 0.5);
    color: #fff;
    box-shadow: 0 6px 18px -4px rgba(220, 20, 60, 0.55);
  }
}
.site-mode .hero-arrow.flash{
  background: rgba(220, 20, 60, 0.22);
  border-color: rgba(220, 20, 60, 0.5);
  color: #fff;
  box-shadow: 0 6px 18px -4px rgba(220, 20, 60, 0.55);
}
.site-mode .hero-arrow:active{transform: scale(0.93)}
.site-mode .hero-arrow svg{width: 18px; height: 18px; display: block; stroke-width: 2.2}
.site-mode .hero-arrow-prev{left: 16px}
.site-mode .hero-arrow-next{right: 16px}
@media (max-width: 600px){
  .site-mode .hero-arrow{width: 36px; height: 36px; bottom: 10px; border-radius: 11px}
  .site-mode .hero-arrow svg{width: 16px; height: 16px}
  .site-mode .hero-arrow-prev{left: 12px}
  .site-mode .hero-arrow-next{right: 12px}
}
.site-mode .hero-dot{
  pointer-events: auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
  position: relative;
  overflow: hidden;
}
.site-mode .hero-dot:hover{background: rgba(255, 255, 255, 0.45)}
/* Active dot — wider pill with track bg + progress fill via ::after */
.site-mode .hero-dot.active{
  width: 38px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.35);
}
.site-mode .hero-dot.active::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #ff8aa3 0%, #dc143c 100%);
  border-radius: inherit;
  box-shadow: 0 0 10px rgba(220, 20, 60, 0.6);
  animation: heroDotProgress var(--hero-duration, 10000ms) linear forwards;
}
.site-mode .hero-carousel.paused .hero-dot.active::after{animation-play-state: paused}
@media (max-width: 600px){
  .site-mode .hero.hero-carousel{min-height: 220px;border-radius: 18px}
  .site-mode .hero-track{min-height: 220px}
  .site-mode .hero-slide{padding: 28px 22px 44px}
  .site-mode .hero h2{font-size: 1.5rem}
  .site-mode .hero p{font-size: 0.9rem}
  .site-mode .hero-chip{font-size: 12px;padding: 6px 12px 6px 9px}
  .site-mode .hero-chip img,.site-mode .hero-chip svg{width: 16px;height: 16px}
  .site-mode .hero-cta{padding: 10px 18px;font-size: 13px;margin-top: 14px}
  .site-mode .hero-dots{bottom: 10px}
}

/* ── Feed toolbar (tabs + search + filters) ───────────────────────── */
.site-mode .feed-toolbar{
  margin-bottom: 28px;
  gap: 14px;
}

.site-mode .feed-tabs{
  background: rgba(18,18,21,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 4px;
  gap: 0;
}
.site-mode .feed-tab{
  background: transparent;
  border: none;
  color: rgba(238,239,241,0.55);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 10px 22px;
  border-radius: 10px;
  transition: color 0.25s, background 0.25s, box-shadow 0.3s;
  min-width: 110px;
  flex: 0 0 auto;
}
.site-mode .feed-tab:hover{
  color: rgba(238,239,241,0.95);
  background: rgba(255,255,255,0.04);
  border-color: transparent;
}
.site-mode .feed-tab.active{
  color: #fff;
  background: linear-gradient(180deg, #4a1320 0%, #6e0d22 100%);
  border-color: rgba(255, 80, 110, 0.45);
  box-shadow:
    inset 0 -3px 4px rgba(255,255,255,0.18),
    0 4px 16px -4px rgba(220, 20, 60, 0.45);
}
.site-mode .feed-tab.active:hover{
  background: linear-gradient(180deg, #5a1a26 0%, #7e1129 100%);
}

/* Search input + filter button */
.site-mode .site-search-input-wrap svg{
  stroke: rgba(238,239,241,0.4);
}
.site-mode .site-search-input{
  background: rgba(18,18,21,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px 16px 12px 46px;
  font-size: 14px;
  color: #eeeff1;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.3s ease;
}
.site-mode .site-search-input::placeholder{color: rgba(238,239,241,0.4)}
.site-mode .site-search-input:focus{
  border-color: rgba(220, 20, 60, 0.4);
  background: rgba(18,18,21,0.9);
  box-shadow: 0 0 0 4px rgba(220, 20, 60, 0.08);
}

.site-mode .site-filters-btn{
  background: rgba(18,18,21,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: #eeeff1;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.site-mode .site-filters-btn:hover{
  border-color: rgba(220, 20, 60, 0.4);
  background: rgba(220, 20, 60, 0.08);
  transform: translateY(-1px);
}
.site-mode .site-filters-btn svg{stroke: currentColor}
.site-mode .site-filters-badge{
  background: var(--ac);
  box-shadow: 0 2px 8px rgba(220, 20, 60, 0.5);
}

/* ── Feed pills (categories) ─────────────────────────────────────── */
.site-mode .feed-pill{
  background: rgba(18,18,21,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(238,239,241,0.65);
  letter-spacing: -0.005em;
  transition: all 0.2s ease;
}
.site-mode .feed-pill:hover{
  border-color: rgba(220, 20, 60, 0.35);
  color: #eeeff1;
  background: rgba(220, 20, 60, 0.06);
}
.site-mode .feed-pill.active{
  background: linear-gradient(180deg, #4a1320 0%, #6e0d22 100%);
  border-color: rgba(255, 80, 110, 0.55);
  color: #fff;
  box-shadow:
    inset 0 -2px 3px rgba(255,255,255,0.18),
    0 3px 12px -2px rgba(220, 20, 60, 0.45);
}

/* ── Feed cards (.mc) — premium, glowy, smooth ────────────────────── */
.site-mode .feed-grid{gap: 22px}

.site-mode .mc{
  position: relative;
  background: linear-gradient(180deg, #18181b 0%, #0d0d10 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease;
  isolation: isolate;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
}
.site-mode .mc::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), inset 0 -40px 60px -20px rgba(0,0,0,0.4);
  z-index: 1;
}
.site-mode .mc::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(80% 60% at 50% 0%, rgba(220, 20, 60, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.site-mode .mc:hover{
  transform: translateY(-6px);
  border-color: rgba(220, 20, 60, 0.35);
  box-shadow:
    0 24px 48px -16px rgba(0,0,0,0.7),
    0 0 0 1px rgba(220, 20, 60, 0.15),
    0 8px 32px -12px rgba(220, 20, 60, 0.4);
}
.site-mode .mc:hover::before{opacity: 1}
.site-mode .mc:hover .mc-media{transform: scale(1.04)}

.site-mode .mc .mc-media{transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)}

.site-mode .mc .mc-overlay{
  z-index: 3;
  background: linear-gradient(to top, rgba(5,5,8,0.95) 0%, rgba(5,5,8,0.6) 50%, transparent 100%);
  padding: 32px 18px 18px;
}
.site-mode .mc .mc-name{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
  margin-bottom: 10px;
  line-height: 1.2;
}
.site-mode .mc .mc-price{
  background: rgba(255,255,255,0.96);
  color: #18181b;
  border: none;
  border-radius: 999px;
  padding: 5px 12px 5px 7px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  margin-top: 0;
  gap: 5px;
}
.site-mode .mc .mc-price .mc-coin{width: 16px; height: 16px}
.site-mode .mc .mc-price .mc-coin path{fill: #dc143c !important}
.site-mode .mc .mc-badge{
  top: 12px;right: 12px;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Larger viewport — bigger card text */
@media (min-width: 1200px){
  .site-mode .mc .mc-overlay{padding: 36px 20px 20px}
  .site-mode .mc .mc-name{font-size: 19px; margin-bottom: 12px}
  .site-mode .mc .mc-price{font-size: 14px; padding: 6px 14px 6px 8px}
  .site-mode .mc .mc-price .mc-coin{width: 17px; height: 17px}
  .site-mode .mc .mc-badge{font-size: 12px; padding: 5px 12px}
}
@media (min-width: 1500px){
  .site-mode .mc .mc-overlay{padding: 40px 22px 22px}
  .site-mode .mc .mc-name{font-size: 20px}
  .site-mode .mc .mc-price{font-size: 14px}
  .site-mode .mc .mc-badge{font-size: 13px}
}

/* Card entry stagger animation when feed grid loads */
.site-mode .feed-grid > .mc{
  animation: siteCardIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.site-mode .feed-grid > .mc:nth-child(1){animation-delay: 0.05s}
.site-mode .feed-grid > .mc:nth-child(2){animation-delay: 0.10s}
.site-mode .feed-grid > .mc:nth-child(3){animation-delay: 0.15s}
.site-mode .feed-grid > .mc:nth-child(4){animation-delay: 0.20s}
.site-mode .feed-grid > .mc:nth-child(5){animation-delay: 0.25s}
.site-mode .feed-grid > .mc:nth-child(6){animation-delay: 0.30s}
.site-mode .feed-grid > .mc:nth-child(7){animation-delay: 0.35s}
.site-mode .feed-grid > .mc:nth-child(8){animation-delay: 0.40s}
@keyframes siteCardIn{
  from{opacity: 0;transform: translateY(24px) scale(0.97);filter: blur(6px)}
  to{opacity: 1;transform: none;filter: blur(0)}
}

/* Feed toolbar fade-in */
.site-mode .feed-toolbar{animation: siteToolbarIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards}
.site-mode .feed-filters{animation: siteToolbarIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards}
@keyframes siteToolbarIn{
  from{opacity: 0;transform: translateY(12px)}
  to{opacity: 1;transform: none}
}

/* ── Login buttons (sidebar + topbar) — premium with rotating conic border ── */
@property --site-btn-angle{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes siteBtnBorderRotate{
  to{--site-btn-angle: 360deg}
}

.site-mode .nav-login,
.site-mode .site-login-btn{
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  border: 1px solid rgba(255, 80, 110, 0.55);
  background:
    radial-gradient(60% 50% at 50% 100%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 60, 90, 0.4) 55%,
      rgba(255, 60, 90, 0) 100%),
    linear-gradient(180deg, #4a1320 0%, #6e0d22 100%) !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow:
    inset 0 -4px 4px rgba(255, 255, 255, 0.25),
    0 6px 24px -4px rgba(220, 20, 60, 0.5),
    0 2px 8px rgba(220, 20, 60, 0.35) !important;
  transition: transform 0.25s ease, box-shadow 0.4s ease, background-color 0.3s ease !important;
  overflow: visible;
}
.site-mode .nav-login{
  padding: 14px 20px;
  font-size: 14px;
}
.site-mode .site-login-btn{
  padding: 11px 22px;
  font-size: 14px;
  border-radius: 999px;
  gap: 8px;
}
.site-mode .nav-login:hover,
.site-mode .site-login-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 -4px 6px rgba(255, 255, 255, 0.35),
    0 12px 32px -4px rgba(220, 20, 60, 0.65),
    0 4px 12px rgba(220, 20, 60, 0.45) !important;
}
.site-mode .nav-login:active,
.site-mode .site-login-btn:active{
  transform: translateY(0) !important;
}

/* Rotating conic-gradient border — sits behind the button via z-index */
.site-mode .nav-login::before,
.site-mode .site-login-btn::before{
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--site-btn-angle),
    transparent 25%,
    rgba(255, 122, 142, 0.9) 45%,
    rgba(255, 220, 230, 0.95) 55%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: siteBtnBorderRotate 3.4s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Soft outer halo behind the button */
.site-mode .nav-login::after,
.site-mode .site-login-btn::after{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(50% 70% at 50% 50%, rgba(220, 20, 60, 0.25) 0%, transparent 70%);
  z-index: -2;
  opacity: 0.6;
  filter: blur(6px);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.site-mode .nav-login:hover::after,
.site-mode .site-login-btn:hover::after{opacity: 1}

/* Icon styling tweak — slight glow */
.site-mode .nav-login svg,
.site-mode .site-login-btn svg{
  filter: drop-shadow(0 0 4px rgba(255, 220, 230, 0.4));
  transition: transform 0.3s ease;
}
.site-mode .nav-login:hover svg,
.site-mode .site-login-btn:hover svg{
  transform: translateX(2px);
}

/* ════════════════════════════════════════════════════════════════
   GENERATIONS — landing aesthetic
   ════════════════════════════════════════════════════════════════ */

/* Title with gradient accent */
.site-mode #sc-generations .gh-title{
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 60%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(220, 20, 60, 0.2));
  margin-bottom: 32px;
  animation: siteHeroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Search wrap layout */
.site-mode #sc-generations .gh-search-wrap{
  margin-bottom: 28px;
  gap: 14px;
  animation: siteToolbarIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

/* Search input */
.site-mode #sc-generations .gh-search-input{
  background: rgba(18,18,21,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px 18px 14px 48px;
  font-size: 15px;
  color: #eeeff1;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.3s ease;
}
.site-mode #sc-generations .gh-search-input::placeholder{
  color: rgba(238,239,241,0.4);
}
.site-mode #sc-generations .gh-search-input:focus{
  border-color: rgba(220, 20, 60, 0.4);
  background: rgba(18,18,21,0.9);
  box-shadow: 0 0 0 4px rgba(220, 20, 60, 0.08);
}
.site-mode #sc-generations .gh-search-icon{
  width: 20px;
  height: 20px;
  stroke: rgba(238,239,241,0.4);
}

/* Filter pills — same as home feed-pills */
.site-mode #sc-generations .gh-filters{gap: 10px}
.site-mode #sc-generations .gh-filter{
  background: rgba(18,18,21,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(238,239,241,0.65);
  letter-spacing: -0.005em;
  transition: all 0.2s ease;
}
.site-mode #sc-generations .gh-filter:hover{
  border-color: rgba(220, 20, 60, 0.35);
  color: #eeeff1;
  background: rgba(220, 20, 60, 0.06);
}
.site-mode #sc-generations .gh-filter.on{
  background: linear-gradient(180deg, #4a1320 0%, #6e0d22 100%);
  border-color: rgba(255, 80, 110, 0.55);
  color: #fff;
  box-shadow:
    inset 0 -2px 3px rgba(255,255,255,0.18),
    0 3px 12px -2px rgba(220, 20, 60, 0.45);
}

/* Grid spacing */
.site-mode #sc-generations .gh-grid{gap: 22px}

/* Card — premium with hover glow & lift */
.site-mode #sc-generations .gh-card{
  position: relative;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-mode #sc-generations .gh-card:hover{
  transform: translateY(-6px);
}
.site-mode #sc-generations .gh-card:active{transform: translateY(-2px)}

.site-mode #sc-generations .gh-card-media{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, #18181b 0%, #0d0d10 100%);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
  transition: border-color 0.3s ease, box-shadow 0.4s ease;
  position: relative;
}
.site-mode #sc-generations .gh-card-media::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  z-index: 1;
}
.site-mode #sc-generations .gh-card-media::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(80% 60% at 50% 0%, rgba(220, 20, 60, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}
.site-mode #sc-generations .gh-card:hover .gh-card-media{
  border-color: rgba(220, 20, 60, 0.35);
  box-shadow:
    0 24px 48px -16px rgba(0,0,0,0.7),
    0 0 0 1px rgba(220, 20, 60, 0.15),
    0 8px 32px -12px rgba(220, 20, 60, 0.4);
}
.site-mode #sc-generations .gh-card:hover .gh-card-media::before{opacity: 1}
.site-mode #sc-generations .gh-card-media img,
.site-mode #sc-generations .gh-card-media video{
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-mode #sc-generations .gh-card:hover .gh-card-media img,
.site-mode #sc-generations .gh-card:hover .gh-card-media video{
  transform: scale(1.04);
}

/* Overlay (preset name + date) */
.site-mode #sc-generations .gh-card-overlay{
  z-index: 4;
  background: linear-gradient(to top, rgba(5,5,8,0.95) 0%, rgba(5,5,8,0.6) 50%, transparent 100%);
  padding: 32px 16px 16px;
}
.site-mode #sc-generations .gh-preset{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.site-mode #sc-generations .gh-date{
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}

/* Status badge — glassy */
.site-mode #sc-generations .gh-status{
  z-index: 4;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 6px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  color: #fff;
}
.site-mode #sc-generations .gh-status-completed{
  background: rgba(34, 197, 94, 0.7);
  border-color: rgba(34, 197, 94, 0.45);
}
.site-mode #sc-generations .gh-status-processing{
  background: rgba(59, 130, 246, 0.7);
  border-color: rgba(59, 130, 246, 0.45);
}
.site-mode #sc-generations .gh-status-failed{
  background: rgba(239, 68, 68, 0.7);
  border-color: rgba(239, 68, 68, 0.45);
}

/* Play button overlay */
.site-mode #sc-generations .gh-play-btn{
  z-index: 3;
  width: 56px;
  height: 56px;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, background 0.3s ease;
}
.site-mode #sc-generations .gh-card:hover .gh-play-btn{
  background: rgba(220, 20, 60, 0.85);
  border-color: rgba(255, 122, 142, 0.6);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 6px 24px rgba(220, 20, 60, 0.5);
}
.site-mode #sc-generations .gh-play-btn svg{width: 22px; height: 22px}

/* Spinner overlay */
.site-mode #sc-generations .gh-spinner-overlay{
  z-index: 3;
  background: rgba(5,5,8,0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-mode #sc-generations .gh-spinner{
  width: 44px;
  height: 44px;
  border-width: 3px;
  border-color: rgba(255,255,255,0.1);
  border-top-color: var(--ac);
  filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.5));
}

/* Card stagger entry */
.site-mode #sc-generations .gh-grid > .gh-card{
  animation: siteCardIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.site-mode #sc-generations .gh-grid > .gh-card:nth-child(1){animation-delay: 0.05s}
.site-mode #sc-generations .gh-grid > .gh-card:nth-child(2){animation-delay: 0.10s}
.site-mode #sc-generations .gh-grid > .gh-card:nth-child(3){animation-delay: 0.15s}
.site-mode #sc-generations .gh-grid > .gh-card:nth-child(4){animation-delay: 0.20s}
.site-mode #sc-generations .gh-grid > .gh-card:nth-child(5){animation-delay: 0.25s}
.site-mode #sc-generations .gh-grid > .gh-card:nth-child(6){animation-delay: 0.30s}
.site-mode #sc-generations .gh-grid > .gh-card:nth-child(7){animation-delay: 0.35s}
.site-mode #sc-generations .gh-grid > .gh-card:nth-child(8){animation-delay: 0.40s}

/* Larger viewport — bigger card text */
@media (min-width: 1200px){
  .site-mode #sc-generations .gh-card-overlay{padding: 36px 18px 18px}
  .site-mode #sc-generations .gh-preset{font-size: 17px}
  .site-mode #sc-generations .gh-date{font-size: 13px}
  .site-mode #sc-generations .gh-status{font-size: 12px; padding: 5px 12px}
}
@media (min-width: 1500px){
  .site-mode #sc-generations .gh-card-overlay{padding: 40px 20px 20px}
  .site-mode #sc-generations .gh-preset{font-size: 18px; margin-bottom: 6px}
  .site-mode #sc-generations .gh-date{font-size: 13px}
  .site-mode #sc-generations .gh-status{font-size: 12px}
}

/* Empty state */
.site-mode #sc-generations .gh-empty{
  padding: 100px 20px;
  font-size: 17px;
  color: rgba(238,239,241,0.6);
  font-weight: 500;
}
.site-mode #sc-generations .gh-empty > div:first-child > div{
  width: 80px !important;
  height: 80px !important;
  background: radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.18) 0%, transparent 70%) !important;
  border: 1px solid rgba(220, 20, 60, 0.25);
  box-shadow: 0 0 32px rgba(220, 20, 60, 0.15);
}
.site-mode #sc-generations .gh-empty > div:first-child svg{
  width: 36px !important;
  height: 36px !important;
}

/* ── Generation detail modal ─────────────────────────────────── */
.site-mode .gh-modal{
  align-items: center;
  padding: 24px;
}
.site-mode .gh-modal.open{
  background: rgba(0,0,0,0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-mode .gh-modal-dialog{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #0e0e10 0%, #07070a 100%);
  max-width: 560px;
  max-height: 90vh;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(220, 20, 60, 0.1);
  transform: translateY(40px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-mode .gh-modal.open .gh-modal-dialog{
  transform: translateY(0) scale(1);
}
.site-mode .gh-modal-header{
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(220,20,60,0.05) 0%, transparent 100%);
}
.site-mode .gh-modal-title{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.site-mode .gh-modal-close{
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 20px;
  font-weight: 400;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.site-mode .gh-modal-close:hover{
  background: rgba(220, 20, 60, 0.15);
  border-color: rgba(220, 20, 60, 0.4);
  transform: rotate(90deg);
  color: #fff;
}
.site-mode .gh-modal-body{padding: 24px}
.site-mode .gh-modal-preview{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: #050507;
  margin-bottom: 20px;
  box-shadow: 0 16px 32px -16px rgba(0,0,0,0.7);
}
.site-mode .gh-modal-details{
  background: rgba(18,18,21,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.site-mode .gh-detail-row{
  border-bottom-color: rgba(255,255,255,0.05);
  padding: 10px 0;
}
.site-mode .gh-detail-label{
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(238,239,241,0.5);
}
.site-mode .gh-detail-value{
  font-size: 14px;
  color: #eeeff1;
}

/* Download button — landing btn-primary style */
.site-mode .gh-download{
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  border: 1px solid rgba(255, 80, 110, 0.55);
  background:
    radial-gradient(60% 50% at 50% 100%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 60, 90, 0.4) 55%,
      rgba(255, 60, 90, 0) 100%),
    linear-gradient(180deg, #4a1320 0%, #6e0d22 100%);
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow:
    inset 0 -4px 4px rgba(255, 255, 255, 0.25),
    0 6px 24px -4px rgba(220, 20, 60, 0.5),
    0 2px 8px rgba(220, 20, 60, 0.35);
  transition: transform 0.25s, box-shadow 0.4s;
  overflow: visible;
}
.site-mode .gh-download:hover{
  transform: translateY(-2px);
  opacity: 1;
  box-shadow:
    inset 0 -4px 6px rgba(255, 255, 255, 0.35),
    0 12px 32px -4px rgba(220, 20, 60, 0.65),
    0 4px 12px rgba(220, 20, 60, 0.45);
}
.site-mode .gh-download::before{
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--site-btn-angle),
    transparent 25%,
    rgba(255, 122, 142, 0.9) 45%,
    rgba(255, 220, 230, 0.95) 55%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: siteBtnBorderRotate 3.4s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Delete button — ghost danger style */
.site-mode .gh-delete{
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.25);
  color: rgba(248, 113, 113, 0.9);
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.site-mode .gh-delete:hover{
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
}

/* ════════════════════════════════════════════════════════════════
   REFERRAL — landing aesthetic
   ════════════════════════════════════════════════════════════════ */

/* Hero block (centred icon + title + description) */
.site-mode #sc-referral .text-c{
  margin-bottom: 36px !important;
  animation: siteHeroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-mode #sc-referral .text-c > div:first-child{margin-bottom: 20px !important}
.site-mode #sc-referral .text-c > div:first-child > div{
  width: 96px !important;
  height: 96px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.18) 0%, rgba(220, 20, 60, 0.06) 100%) !important;
  border: 1px solid rgba(220, 20, 60, 0.35) !important;
  box-shadow:
    0 0 40px rgba(220, 20, 60, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.site-mode #sc-referral .text-c > div:first-child svg{
  width: 42px !important;
  height: 42px !important;
  stroke: #ff8aa3 !important;
  filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.5));
}

.site-mode #sc-referral [id="ref-title"]{
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 60%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(220, 20, 60, 0.2));
  margin-bottom: 14px !important;
}
.site-mode #sc-referral [id="ref-desc"]{
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: rgba(238,239,241,0.65) !important;
  max-width: 580px;
  margin: 0 auto !important;
  font-weight: 400;
}

/* Cards */
.site-mode #sc-referral .card{
  background: linear-gradient(180deg, #0e0e10 0%, #07070a 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 16px 32px -16px rgba(0,0,0,0.5);
  animation: siteToolbarIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

/* Link labels (Telegram + Site) — оба ярлыка одного размера */
.site-mode #sc-referral [id="ref-link-label"],
.site-mode #sc-referral [id="ref-link-site-label"]{
  font-size: 12px !important;
  color: rgba(238,239,241,0.5) !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 12px !important;
}
.site-mode #sc-referral [id="ref-link-site-label"]{
  margin-top: 18px !important;
}

/* Copy-link row */
.site-mode #sc-referral .ref-link-row{
  background: rgba(18,18,21,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px 18px;
  gap: 14px;
  transition: border-color 0.25s, background 0.25s;
}
.site-mode #sc-referral .ref-link-row:hover{
  border-color: rgba(220, 20, 60, 0.4);
  background: rgba(220, 20, 60, 0.04);
}
.site-mode #sc-referral .ref-link-text{
  font-size: 15px;
  color: #eeeff1;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.site-mode #sc-referral .ref-copy-icon{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(220, 20, 60, 0.12);
  border: 1px solid rgba(220, 20, 60, 0.2);
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.site-mode #sc-referral .ref-copy-icon:hover{
  background: rgba(220, 20, 60, 0.25);
  border-color: rgba(220, 20, 60, 0.5);
  transform: translateY(-1px);
}
.site-mode #sc-referral .ref-copy-icon svg{
  width: 18px;
  height: 18px;
  stroke: #ff8aa3;
}
.site-mode #sc-referral .ref-copy-icon.copied{
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.4);
}
.site-mode #sc-referral .ref-copy-icon.copied svg{stroke: #34d399}

/* Share button — premium primary */
.site-mode #sc-referral [id="ref-share-btn"],
.site-mode #sc-referral [id="ref-share-site-btn"]{
  position: relative;
  isolation: isolate;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 80, 110, 0.55);
  background:
    radial-gradient(60% 50% at 50% 100%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 60, 90, 0.4) 55%,
      rgba(255, 60, 90, 0) 100%),
    linear-gradient(180deg, #4a1320 0%, #6e0d22 100%) !important;
  padding: 14px 22px !important;
  font-size: 14px;
  font-weight: 600;
  margin-top: 16px !important;
  box-shadow:
    inset 0 -4px 4px rgba(255, 255, 255, 0.25),
    0 6px 24px -4px rgba(220, 20, 60, 0.5),
    0 2px 8px rgba(220, 20, 60, 0.35) !important;
  transition: transform 0.25s, box-shadow 0.4s !important;
  overflow: visible;
}
.site-mode #sc-referral [id="ref-share-btn"]:hover,
.site-mode #sc-referral [id="ref-share-site-btn"]:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 -4px 6px rgba(255, 255, 255, 0.35),
    0 12px 32px -4px rgba(220, 20, 60, 0.65),
    0 4px 12px rgba(220, 20, 60, 0.45) !important;
}
.site-mode #sc-referral [id="ref-share-btn"]::before,
.site-mode #sc-referral [id="ref-share-site-btn"]::before{
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--site-btn-angle),
    transparent 25%,
    rgba(255, 122, 142, 0.9) 45%,
    rgba(255, 220, 230, 0.95) 55%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: siteBtnBorderRotate 3.4s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Stats cards (percent + count) */
.site-mode #sc-referral .stats-dash{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px !important;
}
.site-mode #sc-referral .sd-card{
  background: linear-gradient(180deg, #0e0e10 0%, #07070a 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  padding: 32px 24px !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.4s;
  position: relative;
  overflow: hidden;
}
.site-mode #sc-referral .sd-card::after{
  background: var(--bg-card) !important;
}
.site-mode #sc-referral .sd-card:hover{
  transform: translateY(-4px);
  border-color: rgba(220, 20, 60, 0.35) !important;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(220, 20, 60, 0.15);
}
.site-mode #sc-referral .sd-val{
  font-size: 40px !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ff8aa3 0%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 0 18px rgba(220, 20, 60, 0.25));
}
.site-mode #sc-referral .sd-label{
  font-size: 13px !important;
  color: rgba(238,239,241,0.55) !important;
  margin-top: 8px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Income card — refined */
.site-mode #sc-referral .card[style*="overflow:hidden"]{
  padding: 0 !important;
}
.site-mode #sc-referral .card[style*="overflow:hidden"] > div:first-child{
  padding: 28px 28px 4px !important;
}
.site-mode #sc-referral [id="ref-income-label"]{
  font-size: 12px !important;
  color: rgba(238,239,241,0.5) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  margin-bottom: 16px !important;
}
.site-mode #sc-referral [id="ref-bal-usd"]{
  font-size: 48px !important;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 50%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 0 24px rgba(220, 20, 60, 0.25));
}
.site-mode #sc-referral [id="ref-bal-usd"] span{
  -webkit-text-fill-color: rgba(238,239,241,0.5);
  background: none;
  filter: none;
}
.site-mode #sc-referral [id="ref-bal-rub"],
.site-mode #sc-referral [id="ref-bal-usdt"]{
  font-size: 18px !important;
  font-weight: 700;
  color: #eeeff1 !important;
}
.site-mode #sc-referral [id="ref-bal-rub-label"],
.site-mode #sc-referral [id="ref-bal-usdt"] + div{
  font-size: 11px !important;
  color: rgba(238,239,241,0.5) !important;
  letter-spacing: 0.06em !important;
}

/* Withdraw button — secondary ghost */
.site-mode #sc-referral .ref-withdraw-btn{
  background: rgba(220, 20, 60, 0.05) !important;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 22px 28px !important;
  font-size: 15px !important;
  color: #eeeff1;
  gap: 14px;
  transition: background 0.25s, color 0.25s;
}
.site-mode #sc-referral .ref-withdraw-btn:hover{
  background: rgba(220, 20, 60, 0.12) !important;
}
.site-mode #sc-referral .ref-withdraw-btn svg{
  width: 22px !important;
  height: 22px !important;
  stroke: #ff8aa3;
}
.site-mode #sc-referral .ref-withdraw-btn .ref-wd-arrow{
  width: 16px !important;
  height: 16px !important;
  stroke: rgba(238,239,241,0.5);
}
.site-mode #sc-referral [id="ref-withdraw-text"]{
  font-weight: 600;
  letter-spacing: -0.005em;
}
.site-mode #sc-referral [id="ref-min-hint"]{
  font-size: 12px !important;
  color: rgba(238,239,241,0.45) !important;
  margin-top: 3px !important;
}

/* Wallet input area */
.site-mode #sc-referral [id="refWalletWrap"]{
  padding: 22px 28px 28px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(220, 20, 60, 0.03);
}
.site-mode #sc-referral [id="ref-wallet-title"]{
  font-size: 14px !important;
  margin-bottom: 6px !important;
}
.site-mode #sc-referral [id="ref-wd-amount"]{
  font-size: 12px !important;
  color: rgba(238,239,241,0.5) !important;
  margin-bottom: 14px !important;
}
.site-mode #sc-referral [id="refWalletInput"]{
  background: rgba(18,18,21,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  color: #eeeff1;
  width: 100%;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.3s;
}
.site-mode #sc-referral [id="refWalletInput"]::placeholder{
  color: rgba(238,239,241,0.4);
}
.site-mode #sc-referral [id="refWalletInput"]:focus{
  border-color: rgba(220, 20, 60, 0.4);
  background: rgba(18,18,21,0.9);
  box-shadow: 0 0 0 4px rgba(220, 20, 60, 0.08);
}

/* Confirm button — premium */
.site-mode #sc-referral [id="ref-confirm-btn"]{
  position: relative;
  isolation: isolate;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 80, 110, 0.55);
  background:
    radial-gradient(60% 50% at 50% 100%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 60, 90, 0.4) 55%,
      rgba(255, 60, 90, 0) 100%),
    linear-gradient(180deg, #4a1320 0%, #6e0d22 100%) !important;
  padding: 14px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  margin-top: 12px !important;
  box-shadow:
    inset 0 -4px 4px rgba(255, 255, 255, 0.25),
    0 6px 24px -4px rgba(220, 20, 60, 0.5),
    0 2px 8px rgba(220, 20, 60, 0.35) !important;
  transition: transform 0.25s, box-shadow 0.4s !important;
  overflow: visible;
}
.site-mode #sc-referral [id="ref-confirm-btn"]:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 -4px 6px rgba(255, 255, 255, 0.35),
    0 12px 32px -4px rgba(220, 20, 60, 0.65),
    0 4px 12px rgba(220, 20, 60, 0.45) !important;
}
.site-mode #sc-referral [id="ref-confirm-btn"]::before{
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--site-btn-angle),
    transparent 25%,
    rgba(255, 122, 142, 0.9) 45%,
    rgba(255, 220, 230, 0.95) 55%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: siteBtnBorderRotate 3.4s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Back row */
.site-mode #sc-referral .back-row{
  font-size: 14px;
  color: rgba(238,239,241,0.6);
  background: rgba(18,18,21,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 10px 18px;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.site-mode #sc-referral .back-row:hover{
  background: rgba(220, 20, 60, 0.08);
  color: #eeeff1;
  border-color: rgba(220, 20, 60, 0.25);
}

/* ════════════════════════════════════════════════════════════════
   SITE HEADER — landing aesthetic
   Replaces the kisex-style header with a layered-blur premium nav.
   ════════════════════════════════════════════════════════════════ */
.site-mode .site-header{
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 200;
  padding: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
}
/* Layered backdrop-filter masks for the smooth-fade-out blur effect */
.site-mode .site-header::before,
.site-mode .site-header::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.site-mode .site-header::before{
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}
.site-mode .site-header::after{
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.site-mode .site-header-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-mode .site-header-left{
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}
.site-mode .site-header-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Logo — gradient text with crimson glow */
.site-mode .site-logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.3s ease;
  flex-shrink: 0;
}
.site-mode .site-logo:hover{
  transform: translateY(-1px);
  opacity: 1;
}
.site-mode .site-logo-text{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 60%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(220, 20, 60, 0.4));
  color: transparent;
}

/* Nav links — pill strip in landing aesthetic */
.site-mode .site-nav{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: linear-gradient(180deg, rgba(14, 14, 16, 0.6) 0%, rgba(10, 10, 13, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.site-mode .site-nav-link{
  position: relative;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(238, 239, 241, 0.7);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition:
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s ease;
  white-space: nowrap;
}
.site-mode .site-nav-link:hover{
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}
.site-mode .site-nav-link:active{
  transform: translateY(1px);
}
.site-mode .site-nav-link.active{
  color: #ffffff !important;
  font-weight: 600;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 80, 110, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.22) 0%, rgba(220, 20, 60, 0.08) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(220, 20, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 20px -6px rgba(220, 20, 60, 0.5);
  text-shadow: 0 0 18px rgba(220, 20, 60, 0.35);
}

/* Credits badge — premium pill matching landing button */
.site-mode .site-credits{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255, 80, 110, 0.45);
  background:
    radial-gradient(60% 50% at 50% 100%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 60, 90, 0.4) 55%,
      rgba(255, 60, 90, 0) 100%),
    linear-gradient(180deg, #4a1320 0%, #6e0d22 100%);
  box-shadow:
    inset 0 -3px 4px rgba(255, 255, 255, 0.18),
    0 4px 16px -4px rgba(220, 20, 60, 0.5);
  transition: transform 0.25s ease, box-shadow 0.4s ease;
}
.site-mode .site-credits:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 -3px 6px rgba(255, 255, 255, 0.25),
    0 8px 24px -4px rgba(220, 20, 60, 0.6);
  border-color: rgba(255, 122, 142, 0.6);
}
.site-mode .site-coin{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255, 220, 230, 0.4));
}
.site-mode .site-credits-amount{
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.site-mode .site-credits-plus{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* User menu button (avatar + name + chevron) */
.site-mode .site-user-menu{position: relative}
.site-mode .site-user-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 6px;
  background: rgba(18, 18, 21, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.site-mode .site-user-btn:hover{
  background: rgba(220, 20, 60, 0.1);
  border-color: rgba(220, 20, 60, 0.3);
  transform: translateY(-1px);
}
.site-mode .site-user-ava{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #18181b 0%, #0e0e10 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ff8aa3;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.site-mode .site-user-name{
  font-size: 14px;
  font-weight: 600;
  color: #eeeff1;
  letter-spacing: -0.005em;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-mode .site-user-chevron{
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(238, 239, 241, 0.55);
  transition: transform 0.25s ease;
}
.site-mode .site-user-menu.open .site-user-chevron{
  transform: rotate(180deg);
  border-top-color: #ff8aa3;
}

/* User popup */
.site-mode .site-user-popup{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: rgba(10, 10, 12, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    0 20px 40px -16px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(220, 20, 60, 0.05);
  z-index: 300;
}
.site-mode .site-user-popup-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(238, 239, 241, 0.85);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}
.site-mode .site-user-popup-item:hover{
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.site-mode .site-user-popup-item.danger{
  color: rgba(248, 113, 113, 0.9);
}
.site-mode .site-user-popup-item.danger:hover{
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}
.site-mode .site-user-popup-item svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Account for slightly taller header in content offset */
@media (min-width: 900px){
  .site-mode #app{height: calc(100vh - 64px) !important; height: calc(100dvh - 64px) !important}
}

/* Mobile-narrow site-header (rare — Mini App on tablets) */
@media (max-width: 1100px){
  .site-mode .site-header-inner{padding: 12px 20px; gap: 14px}
  .site-mode .site-header-left{gap: 18px}
  .site-mode .site-user-name{max-width: 100px}
}

/* ════════════════════════════════════════════════════════════════
   SHARE MODAL — landing aesthetic
   ════════════════════════════════════════════════════════════════ */
.site-mode #shareOverlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}
.site-mode #shareOverlay.show{
  opacity: 1;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.site-mode #shareOverlay .share-modal{
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 32px 28px 28px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #0e0e10 0%, #07070a 100%);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.85),
    0 0 0 1px rgba(220, 20, 60, 0.1);
  transform: translateY(40px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  isolation: isolate;
  overflow: hidden;
}
.site-mode #shareOverlay.show .share-modal{
  transform: translateY(0) scale(1);
}
/* Subtle crimson glow at the top of the modal */
.site-mode #shareOverlay .share-modal::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(220, 20, 60, 0.6) 50%, transparent 100%);
}
.site-mode #shareOverlay .share-modal::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(220, 20, 60, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.site-mode #shareOverlay .share-close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(238, 239, 241, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.3s;
  z-index: 2;
}
.site-mode #shareOverlay .share-close:hover{
  background: rgba(220, 20, 60, 0.15);
  border-color: rgba(220, 20, 60, 0.4);
  color: #fff;
  transform: rotate(90deg);
}
.site-mode #shareOverlay .share-close svg{width: 16px; height: 16px}

.site-mode #shareOverlay .share-head{
  text-align: center;
  margin-bottom: 28px;
}
.site-mode #shareOverlay .share-head-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.18) 0%, rgba(220, 20, 60, 0.06) 100%);
  border: 1px solid rgba(220, 20, 60, 0.3);
  box-shadow: 0 0 24px rgba(220, 20, 60, 0.2);
  color: #ff8aa3;
}
.site-mode #shareOverlay .share-head-icon svg{
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 6px rgba(220, 20, 60, 0.5));
}

.site-mode #shareOverlay .share-title{
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 70%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.site-mode #shareOverlay .share-sub{
  font-size: 14px;
  color: rgba(238, 239, 241, 0.55);
  line-height: 1.5;
  font-weight: 400;
}

/* ── Link card (above the grid, click to copy) ────────────────── */
.site-mode #shareOverlay .share-link-card{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 22px;
  padding: 14px 14px 14px 18px;
  background:
    linear-gradient(180deg, rgba(220, 20, 60, 0.06) 0%, rgba(220, 20, 60, 0.02) 100%),
    rgba(18, 18, 21, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease, transform 0.25s ease;
  position: relative;
  overflow: hidden;
}
.site-mode #shareOverlay .share-link-card::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 100% at 50% 100%, rgba(220, 20, 60, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.site-mode #shareOverlay .share-link-card:hover{
  border-color: rgba(220, 20, 60, 0.4);
  background:
    linear-gradient(180deg, rgba(220, 20, 60, 0.10) 0%, rgba(220, 20, 60, 0.04) 100%),
    rgba(24, 24, 27, 0.8);
  box-shadow: 0 8px 24px -8px rgba(220, 20, 60, 0.35);
  transform: translateY(-1px);
}
.site-mode #shareOverlay .share-link-card:hover::before{opacity: 1}
.site-mode #shareOverlay .share-link-card:active{transform: translateY(0)}

.site-mode #shareOverlay .share-link-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(220, 20, 60, 0.15);
  border: 1px solid rgba(220, 20, 60, 0.25);
  color: #ff8aa3;
}
.site-mode #shareOverlay .share-link-icon svg{
  width: 18px;
  height: 18px;
}

.site-mode #shareOverlay .share-link-text{
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  color: rgba(238, 239, 241, 0.85);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-mode #shareOverlay .share-link-copy{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(238, 239, 241, 0.7);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
  position: relative;
}
.site-mode #shareOverlay .share-link-card:hover .share-link-copy{
  background: rgba(220, 20, 60, 0.18);
  border-color: rgba(220, 20, 60, 0.35);
  color: #fff;
}
.site-mode #shareOverlay .share-link-copy svg{
  width: 16px;
  height: 16px;
  position: absolute;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.site-mode #shareOverlay .share-link-copy .share-link-check-i{
  opacity: 0;
  transform: scale(0.6);
  color: #34d399;
}
.site-mode #shareOverlay .share-link-card.copied{
  border-color: rgba(52, 211, 153, 0.45);
  background:
    linear-gradient(180deg, rgba(52, 211, 153, 0.10) 0%, rgba(52, 211, 153, 0.03) 100%),
    rgba(18, 18, 21, 0.7);
}
.site-mode #shareOverlay .share-link-card.copied .share-link-icon{
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.35);
  color: #34d399;
}
.site-mode #shareOverlay .share-link-card.copied .share-link-copy{
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.35);
}
.site-mode #shareOverlay .share-link-card.copied .share-link-copy-i{
  opacity: 0;
  transform: scale(0.6);
}
.site-mode #shareOverlay .share-link-card.copied .share-link-check-i{
  opacity: 1;
  transform: scale(1);
}

/* ── Share grid ───────────────────────────────────────────────── */
.site-mode #shareOverlay .share-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 540px){
  .site-mode #shareOverlay .share-grid{grid-template-columns: repeat(2, 1fr)}
}

.site-mode #shareOverlay .share-target{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px;
  background: rgba(18, 18, 21, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #eeeff1;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease;
  isolation: isolate;
  position: relative;
  overflow: hidden;
}
.site-mode #shareOverlay .share-target::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--share-glow, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
.site-mode #shareOverlay .share-target:hover{
  transform: translateY(-3px);
  border-color: var(--share-color, rgba(255, 255, 255, 0.16));
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--share-color, transparent);
}
.site-mode #shareOverlay .share-target:hover::before{opacity: 1}
.site-mode #shareOverlay .share-target:active{transform: translateY(-1px)}

/* Icon container — transparent by default; brand SVGs include own bg.
   Per-platform background only added for icons that don't ship one. */
.site-mode #shareOverlay .share-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}
.site-mode #shareOverlay .share-target:hover .share-icon{
  transform: scale(1.08) rotate(-4deg);
}
.site-mode #shareOverlay .share-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Brand-shipped backgrounds — these SVGs already have own colored shape */
.site-mode #shareOverlay .share-target--tg .share-icon,
.site-mode #shareOverlay .share-target--vk .share-icon,
.site-mode #shareOverlay .share-target--sc .share-icon,
.site-mode #shareOverlay .share-target--max .share-icon{
  background: transparent;
}

/* Solid-color backgrounds for icons where the SVG is just a glyph */
.site-mode #shareOverlay .share-target--wa .share-icon{
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}
.site-mode #shareOverlay .share-target--wa .share-icon svg{
  width: 60%;
  height: 60%;
}
.site-mode #shareOverlay .share-target--copy .share-icon{
  background: linear-gradient(135deg, rgba(220, 20, 60, 0.85) 0%, rgba(156, 14, 43, 0.85) 100%);
  border: 1px solid rgba(255, 80, 110, 0.35);
}
.site-mode #shareOverlay .share-target--copy .share-icon svg{
  width: 50%;
  height: 50%;
  color: #fff;
}

.site-mode #shareOverlay .share-label{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Per-platform brand tints (used for hover glow + border) */
.site-mode #shareOverlay .share-target--tg{
  --share-color: rgba(38, 168, 224, 0.85);
  --share-glow: radial-gradient(60% 80% at 50% 0%, rgba(38, 168, 224, 0.2) 0%, transparent 70%);
}
.site-mode #shareOverlay .share-target--wa{
  --share-color: rgba(37, 211, 102, 0.85);
  --share-glow: radial-gradient(60% 80% at 50% 0%, rgba(37, 211, 102, 0.2) 0%, transparent 70%);
}
.site-mode #shareOverlay .share-target--vk{
  --share-color: rgba(0, 119, 255, 0.85);
  --share-glow: radial-gradient(60% 80% at 50% 0%, rgba(0, 119, 255, 0.22) 0%, transparent 70%);
}
.site-mode #shareOverlay .share-target--sc{
  --share-color: rgba(255, 252, 0, 0.92);
  --share-glow: radial-gradient(60% 80% at 50% 0%, rgba(255, 252, 0, 0.2) 0%, transparent 70%);
}
.site-mode #shareOverlay .share-target--max{
  --share-color: rgba(83, 50, 226, 0.85);
  --share-glow: radial-gradient(60% 80% at 50% 0%, rgba(83, 50, 226, 0.22) 0%, transparent 70%);
}
.site-mode #shareOverlay .share-target--copy{
  --share-color: rgba(220, 20, 60, 0.7);
  --share-glow: radial-gradient(60% 80% at 50% 0%, rgba(220, 20, 60, 0.2) 0%, transparent 70%);
}

/* ════════════════════════════════════════════════════════════════
   BALANCE — landing aesthetic
   ════════════════════════════════════════════════════════════════ */

/* Current balance hero card — left-aligned, premium */
.site-mode #sc-balance .card.text-c{
  position: relative;
  padding: 36px 40px !important;
  border-radius: 24px !important;
  text-align: left !important;
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(220, 20, 60, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #0c0c0e 0%, #06060a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 36px !important;
  overflow: hidden;
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
  animation: siteHeroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.site-mode #sc-balance .card.text-c::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(220, 20, 60, 0.6) 50%, transparent 100%);
}

.site-mode #sc-balance .card.text-c [id="b-cur-label"]{
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: rgba(238, 239, 241, 0.5) !important;
  margin: 0 0 10px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.site-mode #sc-balance .card.text-c [id="b-cur-label"]::before{
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-light, #ff3057);
  box-shadow: 0 0 10px rgba(220, 20, 60, 0.6);
  animation: pulse 1.8s ease-in-out infinite;
}

/* The flex row containing the coin + value — DO NOT put gradient on the
   container itself, otherwise the <img> inherits text-fill-color masking. */
.site-mode #sc-balance .card.text-c > div:nth-child(2){
  font-size: clamp(2.75rem, 5.5vw, 4.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  margin: 0 !important;
}
.site-mode #sc-balance .card.text-c .coin-lg{
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(220, 20, 60, 0.4));
}
/* Apply the gradient ONLY to the value span — keeps the coin image intact. */
.site-mode #sc-balance .card.text-c [id="b-cur-val"]{
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 50%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(220, 20, 60, 0.3));
}

/* Decorative coin-stack icon on the right side of the hero (desktop only) */
.site-mode #sc-balance .card.text-c::after{
  content: '';
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 20, 60, 0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Section title */
.site-mode #sc-balance .bal-section-title{
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 18px !important;
  color: #eeeff1;
}

/* Package card — vertical, premium, no overlap with selected indicator */
.site-mode #sc-balance .pkg{
  position: relative;
  padding: 24px 24px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #0e0e10 0%, #07070a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  cursor: pointer;
  isolation: isolate;
  /* GPU-accelerated only — transform & border. The shadow + glow live on
     ::before so we animate just one opacity property = perfectly smooth. */
  transform: translateZ(0);
  will-change: transform;
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: visible !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  min-height: 130px;
  /* Default subtle shadow (so we don't go from 0→big on hover) */
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4) !important;
}
/* Glow + extra shadow as a single fading layer behind the card.
   Animating just `opacity` is GPU-friendly and butter-smooth. */
.site-mode #sc-balance .pkg::before{
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(80% 100% at 50% 0%, rgba(220, 20, 60, 0.18) 0%, transparent 70%);
  box-shadow:
    0 16px 32px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(220, 20, 60, 0.18),
    0 0 24px -4px rgba(220, 20, 60, 0.35);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: -1;
}
.site-mode #sc-balance .pkg > *{position: relative; z-index: 1}
.site-mode #sc-balance .pkg:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}
.site-mode #sc-balance .pkg:hover::before{opacity: 1}
.site-mode #sc-balance .pkg:active{
  transform: translateY(-2px) scale(0.99) !important;
  transition: transform 0.15s ease-out !important;
}

.site-mode #sc-balance .pkg.pkg-selected{
  border-color: rgba(255, 80, 110, 0.55) !important;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(220, 20, 60, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, #18101a 0%, #0a0508 100%) !important;
  box-shadow:
    inset 0 -3px 4px rgba(255, 255, 255, 0.18),
    0 12px 32px -4px rgba(220, 20, 60, 0.5),
    0 0 0 1px rgba(220, 20, 60, 0.25) !important;
}
.site-mode #sc-balance .pkg.pkg-selected::before{opacity: 1}

/* Credits row (top) */
.site-mode #sc-balance .pkg-credits{
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #eeeff1;
  gap: 10px !important;
  align-items: center;
}
.site-mode #sc-balance .pkg-credits .coin{
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.4));
}
.site-mode #sc-balance .pkg-credits-old{
  font-size: 16px !important;
  font-weight: 500;
  text-decoration: line-through;
  color: rgba(238, 239, 241, 0.32) !important;
  margin-right: 2px;
}

/* Price row (bottom) — solid colour to keep the ₽ glyph always visible */
.site-mode #sc-balance .pkg-price{
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #eeeff1 !important;
  white-space: nowrap;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  filter: none !important;
  display: inline-flex !important;
  align-items: baseline;
  gap: 4px;
}
.site-mode #sc-balance .pkg-price > span{
  color: rgba(238, 239, 241, 0.55) !important;
  font-size: 18px;
  font-weight: 600;
  opacity: 1 !important;
}
.site-mode #sc-balance .pkg.pkg-selected .pkg-price{
  color: #fff !important;
}
.site-mode #sc-balance .pkg.pkg-selected .pkg-price > span{
  color: rgba(255, 122, 142, 0.95) !important;
}

/* Decorative arrow after the struck-through original number (≥ symbol or →).
   Implemented with inline-block so the parent's line-through doesn't span it. */
.site-mode #sc-balance .pkg-credits-old{
  display: inline-block;
}
.site-mode #sc-balance .pkg-credits-old::after{
  content: '→';
  display: inline-block;
  margin: 0 0 0 8px;
  color: rgba(255, 122, 142, 0.7);
  font-weight: 600;
  text-decoration: none;
  filter: drop-shadow(0 0 6px rgba(220, 20, 60, 0.3));
  font-size: 16px;
}

/* Selected indicator — small pill in the top-right corner.
   Stays out of the price's way (price is on the bottom now). */
.site-mode #sc-balance .pkg::after{
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.3s ease-out;
  z-index: 2;
}
.site-mode #sc-balance .pkg:hover::after{
  border-color: rgba(220, 20, 60, 0.4);
}
.site-mode #sc-balance .pkg.pkg-selected::after{
  content: '';
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 14px no-repeat,
    linear-gradient(180deg, #dc143c 0%, #9c0e2b 100%);
  border-color: rgba(255, 122, 142, 0.6);
  box-shadow: 0 0 16px rgba(220, 20, 60, 0.6), inset 0 -2px 3px rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

/* Payment methods */
.site-mode #sc-balance .pm{
  position: relative;
  padding: 20px 24px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #0e0e10 0%, #07070a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  cursor: pointer;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: visible !important;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4) !important;
}
.site-mode #sc-balance .pm::before{
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(80% 100% at 50% 0%, rgba(220, 20, 60, 0.16) 0%, transparent 70%);
  box-shadow:
    0 12px 24px -6px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(220, 20, 60, 0.18),
    0 0 20px -4px rgba(220, 20, 60, 0.3);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: -1;
}
.site-mode #sc-balance .pm:hover{
  transform: translateY(-3px) !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}
.site-mode #sc-balance .pm:hover::before{opacity: 1}
.site-mode #sc-balance .pm:active{
  transform: translateY(-1px) scale(0.99) !important;
  transition: transform 0.15s ease-out !important;
}
.site-mode #sc-balance .pm.pm-selected{
  border-color: rgba(255, 80, 110, 0.55) !important;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(220, 20, 60, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #18101a 0%, #0a0508 100%) !important;
  box-shadow: 0 8px 24px -4px rgba(220, 20, 60, 0.4) !important;
}
.site-mode #sc-balance .pm .pm-i{
  font-size: 26px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(220, 20, 60, 0.12);
  border: 1px solid rgba(220, 20, 60, 0.2);
  color: #ff8aa3;
  transition: background 0.3s ease-out, border-color 0.3s ease-out;
}
.site-mode #sc-balance .pm:hover .pm-i{
  background: rgba(220, 20, 60, 0.22);
  border-color: rgba(220, 20, 60, 0.4);
}
.site-mode #sc-balance .pm .pm-i img{width: 22px; height: 22px}
.site-mode #sc-balance .pm .pm-t{
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.site-mode #sc-balance .pm .pm-d{
  font-size: 12px !important;
  color: rgba(238, 239, 241, 0.5) !important;
  margin-top: 2px;
}

/* Summary card */
.site-mode #sc-balance .bal-summary{
  padding: 28px 32px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(220, 20, 60, 0.15) 0%, transparent 70%),
    linear-gradient(180deg, #0e0e10 0%, #07070a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  gap: 20px !important;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
  animation: siteToolbarIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-mode #sc-balance .bal-summary-label{
  font-size: 14px !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(238, 239, 241, 0.55) !important;
  text-transform: uppercase;
}
.site-mode #sc-balance .bal-summary-value{
  font-size: 24px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff !important;
  /* No gradient text-fill: it would mask the inline ₽ <span> and the coin <img>.
     Plain white + a soft drop-shadow keeps the premium feel and stays readable. */
  filter: drop-shadow(0 0 18px rgba(220, 20, 60, 0.25));
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-mode #sc-balance .bal-summary-value > span{
  color: rgba(255, 138, 163, 0.85) !important;
  font-weight: 600;
  opacity: 1 !important;
  font-size: 20px;
}
.site-mode #sc-balance .bal-summary-value .coin{
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.4));
}

/* Continue button — premium primary */
.site-mode #sc-balance .bal-continue{
  position: relative;
  isolation: isolate;
  padding: 16px 28px !important;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 80, 110, 0.55) !important;
  background:
    radial-gradient(60% 50% at 50% 100%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 60, 90, 0.4) 55%,
      rgba(255, 60, 90, 0) 100%),
    linear-gradient(180deg, #4a1320 0%, #6e0d22 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 -4px 4px rgba(255, 255, 255, 0.25),
    0 6px 24px -4px rgba(220, 20, 60, 0.5),
    0 2px 8px rgba(220, 20, 60, 0.35) !important;
  transition:
    transform 0.3s ease-out,
    box-shadow 0.3s ease-out,
    border-color 0.3s ease-out !important;
  overflow: visible;
}
.site-mode #sc-balance .bal-continue:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(255, 122, 142, 0.7) !important;
  box-shadow:
    inset 0 -4px 6px rgba(255, 255, 255, 0.35),
    0 12px 32px -4px rgba(220, 20, 60, 0.65),
    0 4px 12px rgba(220, 20, 60, 0.45) !important;
}
.site-mode #sc-balance .bal-continue::before{
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--site-btn-angle),
    transparent 25%,
    rgba(255, 122, 142, 0.9) 45%,
    rgba(255, 220, 230, 0.95) 55%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: siteBtnBorderRotate 3.4s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Card stagger entry — `backwards` (NOT `both`) so the post-animation state
   is released and our :hover transitions can take over cleanly. With `both`
   the final keyframe (transform: none) lives in the animation origin of the
   cascade, which beats hover transforms even with !important. */
.site-mode #sc-balance .pkg-list > .pkg{
  animation: siteCardIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.site-mode #sc-balance .pkg-list > .pkg:nth-child(1){animation-delay: 0.05s}
.site-mode #sc-balance .pkg-list > .pkg:nth-child(2){animation-delay: 0.10s}
.site-mode #sc-balance .pkg-list > .pkg:nth-child(3){animation-delay: 0.15s}
.site-mode #sc-balance .pkg-list > .pkg:nth-child(4){animation-delay: 0.20s}
.site-mode #sc-balance .pkg-list > .pkg:nth-child(5){animation-delay: 0.25s}
.site-mode #sc-balance .pkg-list > .pkg:nth-child(6){animation-delay: 0.30s}

.site-mode #sc-balance .pm-list > .pm{
  animation: siteCardIn 0.45s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.site-mode #sc-balance .pm-list > .pm:nth-child(1){animation-delay: 0.05s}
.site-mode #sc-balance .pm-list > .pm:nth-child(2){animation-delay: 0.10s}
.site-mode #sc-balance .pm-list > .pm:nth-child(3){animation-delay: 0.15s}

/* ════════════════════════════════════════════════════════════════
   GENERATE — UPLOAD STEP — landing aesthetic
   ════════════════════════════════════════════════════════════════ */

/* Back row — pill (matches other pages) */
.site-mode #sc-generate .back-row{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(18, 18, 21, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px !important;
  font-weight: 500;
  color: rgba(238, 239, 241, 0.7);
  margin-bottom: 24px !important;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.site-mode #sc-generate .back-row:hover{
  background: rgba(220, 20, 60, 0.08);
  border-color: rgba(220, 20, 60, 0.25);
  color: #eeeff1;
  transform: translateX(-2px);
}

/* Upload card — premium hero card */
.site-mode #sc-generate .upload-card{
  position: relative;
  padding: 36px 40px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(220, 20, 60, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, #0c0c0e 0%, #06060a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 24px !important;
  overflow: hidden;
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
  animation: siteHeroIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.site-mode #sc-generate .upload-card::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(220, 20, 60, 0.6) 50%, transparent 100%);
  pointer-events: none;
}

/* Header — icon + text + sub */
.site-mode #sc-generate .upload-header{
  display: flex !important;
  align-items: center;
  gap: 18px !important;
  margin-bottom: 28px !important;
}
.site-mode #sc-generate .upload-header-icon{
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.18) 0%, rgba(220, 20, 60, 0.05) 100%) !important;
  border: 1px solid rgba(220, 20, 60, 0.32) !important;
  box-shadow: 0 0 24px rgba(220, 20, 60, 0.2);
  color: #ff8aa3;
}
.site-mode #sc-generate .upload-header-icon svg{
  width: 26px !important;
  height: 26px !important;
  stroke: currentColor !important;
  filter: drop-shadow(0 0 6px rgba(220, 20, 60, 0.5));
}
.site-mode #sc-generate .upload-header-text{
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 80%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(220, 20, 60, 0.18));
  line-height: 1.15;
}
.site-mode #sc-generate .upload-header-sub{
  font-size: 14px !important;
  color: rgba(238, 239, 241, 0.55) !important;
  margin-top: 4px !important;
  letter-spacing: -0.005em;
}

/* Drop zone */
.site-mode #sc-generate .uz{
  position: relative;
  max-width: 320px !important;
  aspect-ratio: 9 / 13 !important;
  padding: 40px 24px !important;
  border-radius: 20px !important;
  border: 2px dashed rgba(220, 20, 60, 0.3) !important;
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(220, 20, 60, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.04) 0%, rgba(220, 20, 60, 0.01) 100%) !important;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.4s ease;
  margin: 0 auto !important;
  isolation: isolate;
  overflow: hidden;
}
.site-mode #sc-generate .uz::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 100% at 50% 0%, rgba(220, 20, 60, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}
.site-mode #sc-generate .uz:hover{
  border-color: rgba(220, 20, 60, 0.55) !important;
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(220, 20, 60, 0.14) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.06) 0%, rgba(220, 20, 60, 0.02) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(220, 20, 60, 0.3);
}
.site-mode #sc-generate .uz:hover::before{opacity: 1}
.site-mode #sc-generate .uz:hover .uz-icon{transform: translateY(-2px) scale(1.05)}
.site-mode #sc-generate .uz.dragover{
  border-color: var(--ac) !important;
  border-style: solid !important;
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(220, 20, 60, 0.22) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.10) 0%, rgba(220, 20, 60, 0.04) 100%) !important;
  transform: scale(1.02);
}

.site-mode #sc-generate .uz-icon{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 0 0 18px !important;
  border-radius: 24px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.14) 0%, rgba(220, 20, 60, 0.04) 100%);
  border: 1px solid rgba(220, 20, 60, 0.28);
  box-shadow: 0 0 28px rgba(220, 20, 60, 0.2);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-mode #sc-generate .uz-icon svg{
  width: 40px !important;
  height: 40px !important;
  stroke: #ff8aa3 !important;
  filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.5));
}
.site-mode #sc-generate .uz-text{
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #eeeff1 !important;
  letter-spacing: -0.01em;
  margin-bottom: 8px !important;
}
.site-mode #sc-generate .uz-hint{
  font-size: 13px !important;
  color: rgba(238, 239, 241, 0.5) !important;
  letter-spacing: 0.02em;
  margin-top: 0 !important;
}

/* Preview */
.site-mode #sc-generate .preview-w{
  max-width: 320px !important;
  margin: 0 auto 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}
.site-mode #sc-generate .preview-w img{
  border-radius: 20px !important;
  aspect-ratio: 9/13 !important;
}
.site-mode #sc-generate .preview-close{
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, transform 0.3s ease;
}
.site-mode #sc-generate .preview-close:hover{
  background: rgba(220, 20, 60, 0.4);
  transform: scale(1.05);
}

/* "Продолжить" button — premium pill */
.site-mode #sc-generate .gen-btn{
  position: relative;
  isolation: isolate;
  max-width: 320px;
  margin: 16px auto 0 !important;
  padding: 16px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 80, 110, 0.55) !important;
  background:
    radial-gradient(60% 50% at 50% 100%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 60, 90, 0.4) 55%,
      rgba(255, 60, 90, 0) 100%),
    linear-gradient(180deg, #4a1320 0%, #6e0d22 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 -4px 4px rgba(255, 255, 255, 0.25),
    0 6px 24px -4px rgba(220, 20, 60, 0.5),
    0 2px 8px rgba(220, 20, 60, 0.35) !important;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !important;
  overflow: visible;
  cursor: pointer;
  display: flex;
}
.site-mode #sc-generate .gen-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 -4px 6px rgba(255, 255, 255, 0.35),
    0 12px 32px -4px rgba(220, 20, 60, 0.65),
    0 4px 12px rgba(220, 20, 60, 0.45) !important;
}
.site-mode #sc-generate .gen-btn::before{
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--site-btn-angle),
    transparent 25%,
    rgba(255, 122, 142, 0.9) 45%,
    rgba(255, 220, 230, 0.95) 55%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: siteBtnBorderRotate 3.4s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Tips block */
.site-mode #sc-generate .tips{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px !important;
  margin-top: 24px !important;
}
.site-mode #sc-generate .tip{
  padding: 14px 12px !important;
  border-radius: 14px !important;
  background: rgba(18, 18, 21, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.site-mode #sc-generate .tip:hover{
  border-color: rgba(220, 20, 60, 0.25);
  background: rgba(220, 20, 60, 0.04);
}
.site-mode #sc-generate .tip-icon{
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.14) 0%, rgba(220, 20, 60, 0.04) 100%) !important;
  border: 1px solid rgba(220, 20, 60, 0.28);
  box-shadow: 0 0 14px rgba(220, 20, 60, 0.15);
}
.site-mode #sc-generate .tip-icon svg{
  width: 18px !important;
  height: 18px !important;
  stroke: #ff8aa3 !important;
}
.site-mode #sc-generate .tip-text{
  font-size: 12px !important;
  color: rgba(238, 239, 241, 0.65) !important;
  letter-spacing: -0.005em;
  line-height: 1.45 !important;
  margin-top: 6px;
}

/* ── Action selection: Video / Photo cards (kisex-style premium) ── */
.site-mode #sc-generate .cat-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 20px !important;
  margin-top: 8px;
}
.site-mode #sc-generate .cat-right{gap: 20px !important}

.site-mode #sc-generate .cat-card{
  position: relative;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: linear-gradient(180deg, #18181b 0%, #0d0d10 100%) !important;
  overflow: hidden !important;
  cursor: pointer;
  min-height: 240px !important;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  animation: siteCardIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.site-mode #sc-generate .cat-card::before{
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(80% 60% at 50% 0%, rgba(220, 20, 60, 0.2) 0%, transparent 70%);
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(220, 20, 60, 0.18),
    0 0 32px -4px rgba(220, 20, 60, 0.4);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}
.site-mode #sc-generate .cat-card:hover{
  transform: translateY(-6px);
  border-color: rgba(220, 20, 60, 0.4) !important;
}
.site-mode #sc-generate .cat-card:hover::before{opacity: 1}
.site-mode #sc-generate .cat-card:hover .cat-bg{transform: scale(1.06)}
.site-mode #sc-generate .cat-card:nth-child(1){animation-delay: 0.05s}
.site-mode #sc-generate .cat-card:nth-child(2){animation-delay: 0.10s}
.site-mode #sc-generate .cat-right .cat-card{animation-delay: 0.10s}

.site-mode #sc-generate .cat-bg{
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.site-mode #sc-generate .cat-overlay{
  z-index: 3 !important;
  background: linear-gradient(to top, rgba(5, 5, 8, 0.9) 0%, rgba(5, 5, 8, 0.5) 50%, transparent 100%) !important;
  padding: 32px 24px 22px !important;
}
.site-mode #sc-generate .cat-title{
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  transition: font-size 0.3s ease, transform 0.3s ease !important;
}
.site-mode #sc-generate .cat-card:hover .cat-title{
  font-size: 28px !important;
  letter-spacing: 0.2em !important;
}

@media (max-width: 768px){
  .site-mode #sc-generate .cat-grid{grid-template-columns: 1fr !important}
}

/* Selected preset (sel-preset) — refined */
.site-mode #sc-generate .sel-preset{
  padding: 14px 18px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(220, 20, 60, 0.06) 0%, rgba(220, 20, 60, 0.02) 100%) !important;
  border: 1px solid rgba(220, 20, 60, 0.2) !important;
  margin-bottom: 20px !important;
  gap: 14px !important;
}
.site-mode #sc-generate .sel-preset-thumb{
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.site-mode #sc-generate .sel-preset-name{
  font-size: 15px !important;
  letter-spacing: -0.01em;
}
.site-mode #sc-generate .sel-preset-type{
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════
   RULES — landing aesthetic
   ════════════════════════════════════════════════════════════════ */

/* Back button (Профиль) — pill matching other pages */
.site-mode #sc-rules .rules-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(18, 18, 21, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-size: 14px !important;
  font-weight: 500;
  color: rgba(238, 239, 241, 0.7) !important;
  margin-bottom: 28px !important;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.site-mode #sc-rules .rules-back:hover{
  background: rgba(220, 20, 60, 0.08) !important;
  border-color: rgba(220, 20, 60, 0.25) !important;
  color: #eeeff1 !important;
  transform: translateX(-2px);
}
.site-mode #sc-rules .rules-back svg{
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  transition: transform 0.25s ease;
}
.site-mode #sc-rules .rules-back:hover svg{transform: translateX(-2px)}

/* Hero card — premium with gradient */
.site-mode #sc-rules .rules-hero{
  position: relative;
  padding: 40px 36px 32px !important;
  border-radius: 24px !important;
  text-align: left !important;
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(251, 191, 36, 0.16) 0%, transparent 70%),
    radial-gradient(40% 100% at 20% 50%, rgba(220, 20, 60, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, #0c0c0e 0%, #06060a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 28px !important;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  gap: 24px !important;
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
  animation: siteHeroIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.site-mode #sc-rules .rules-hero::before{
  /* override the rotating conic from base CSS */
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  right: -1px !important;
  bottom: auto !important;
  height: 1px !important;
  width: auto !important;
  background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, 0.6) 50%, transparent 100%) !important;
  animation: none !important;
}

.site-mode #sc-rules .rules-hero-icon{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 80px !important;
  height: 80px !important;
  margin: 0 !important;
  border-radius: 24px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(251, 191, 36, 0.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.05) 100%);
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow:
    0 0 32px rgba(251, 191, 36, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #fcd34d;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.site-mode #sc-rules .rules-hero-icon svg{
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

.site-mode #sc-rules .rules-hero-title{
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 8px !important;
  background: linear-gradient(135deg, #ffffff 0%, #fcd34d 60%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.2));
  position: relative;
  z-index: 1;
}
.site-mode #sc-rules .rules-hero-sub{
  font-size: 13px !important;
  color: rgba(238, 239, 241, 0.5) !important;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
}

/* Intro paragraph */
.site-mode #sc-rules .rules-intro{
  position: relative;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(238, 239, 241, 0.7) !important;
  padding: 24px 28px 24px 78px !important;
  background:
    radial-gradient(40% 100% at 0% 50%, rgba(220, 20, 60, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.04) 0%, transparent 100%) !important;
  border: 1px solid rgba(220, 20, 60, 0.18) !important;
  border-radius: 16px !important;
  margin-bottom: 32px !important;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4);
}
/* Info icon — inline SVG via data URL, gradient circle + clean "i" glyph */
.site-mode #sc-rules .rules-intro::before{
  content: '';
  position: absolute;
  left: 24px;
  top: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255, 122, 142, 0.45) 0%, transparent 70%),
    linear-gradient(180deg, #dc143c 0%, #6e0d22 100%);
  border: 1px solid rgba(255, 122, 142, 0.5);
  box-shadow:
    inset 0 -2px 3px rgba(255, 255, 255, 0.18),
    0 0 18px rgba(220, 20, 60, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.4);
}
/* The "i" glyph is rendered with a separate ::after overlay (centered SVG icon) */
.site-mode #sc-rules .rules-intro::after{
  content: '';
  position: absolute;
  left: 24px;
  top: 22px;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='8' x2='12.01' y2='8'/><polyline points='11 12 12 12 12 16 13 16'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Sections list */
.site-mode #sc-rules .rules-body{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-mode #sc-rules .rules-section{
  position: relative;
  display: block !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #0e0e10 0%, #07070a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  margin: 0 !important;
  overflow: hidden !important; /* clip rules-section-body content to rounded corners */
  transform: translateZ(0);
  will-change: transform;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: siteCardIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
/* Accordion head — clickable button row with num + title + chevron */
.site-mode #sc-rules .rules-section-head{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.site-mode #sc-rules .rules-section-head h3{
  flex: 1;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  color: #eeeff1;
  line-height: 1.35;
}
.site-mode #sc-rules .rules-chevron{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: rgba(238, 239, 241, 0.4);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}
.site-mode #sc-rules .rules-section.expanded .rules-chevron{
  transform: rotate(180deg);
  color: #ff8aa3;
}
.site-mode #sc-rules .rules-section.expanded .rules-num{
  background: linear-gradient(180deg, #dc143c 0%, #9c0e2b 100%) !important;
  border-color: rgba(255, 122, 142, 0.6) !important;
  color: #fff !important;
}
/* Collapsible body — grid-template-rows 0fr → 1fr trick animates unknown height */
.site-mode #sc-rules .rules-section-body{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-mode #sc-rules .rules-section.expanded .rules-section-body{
  grid-template-rows: 1fr;
}
.site-mode #sc-rules .rules-section-body-inner{
  overflow: hidden;
  min-height: 0;
}
.site-mode #sc-rules .rules-section-body-content{
  padding: 4px 26px 24px 70px;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
  margin-top: 4px;
  padding-top: 18px;
}
.site-mode #sc-rules .rules-section-body-content p{
  font-size: 14px;
  line-height: 1.65;
  color: rgba(238, 239, 241, 0.78);
  margin-bottom: 12px;
}
.site-mode #sc-rules .rules-section-body-content p:last-child{margin-bottom: 0}
.site-mode #sc-rules .rules-section-body-content h4{
  font-size: 13px;
  font-weight: 600;
  color: rgba(238, 239, 241, 0.92);
  margin: 16px 0 8px;
  letter-spacing: -0.005em;
}
.site-mode #sc-rules .rules-section-body-content h4:first-child{margin-top: 0}
.site-mode #sc-rules .rules-section-body-content ul{
  padding-left: 20px;
  margin: 6px 0 12px;
  color: rgba(238, 239, 241, 0.78);
  font-size: 14px;
  line-height: 1.6;
}
.site-mode #sc-rules .rules-section-body-content li{margin-bottom: 5px}
.site-mode #sc-rules .rules-section-body-content a{
  color: #ff8aa3;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 600px){
  .site-mode #sc-rules .rules-section-head{padding: 18px 18px;gap: 14px}
  .site-mode #sc-rules .rules-section-body-content{padding: 4px 18px 20px 60px}
}
.site-mode #sc-rules .rules-section::before{
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(80% 100% at 0% 50%, rgba(220, 20, 60, 0.16) 0%, transparent 70%);
  box-shadow:
    0 16px 32px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(220, 20, 60, 0.18),
    0 0 24px -4px rgba(220, 20, 60, 0.3);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: -1;
}
.site-mode #sc-rules .rules-section:hover{
  transform: translateY(-3px);
  border-color: rgba(220, 20, 60, 0.32) !important;
}
.site-mode #sc-rules .rules-section:hover::before{opacity: 1}
.site-mode #sc-rules .rules-section:hover .rules-num{
  transform: scale(1.06);
  background: linear-gradient(180deg, #dc143c 0%, #9c0e2b 100%);
  border-color: rgba(255, 122, 142, 0.6);
  color: #fff;
}

/* Stagger entry for sections (capped at ~0.6s — beyond that the user has already scrolled) */
.site-mode #sc-rules .rules-section:nth-child(1){animation-delay: 0.05s}
.site-mode #sc-rules .rules-section:nth-child(2){animation-delay: 0.08s}
.site-mode #sc-rules .rules-section:nth-child(3){animation-delay: 0.11s}
.site-mode #sc-rules .rules-section:nth-child(4){animation-delay: 0.14s}
.site-mode #sc-rules .rules-section:nth-child(5){animation-delay: 0.17s}
.site-mode #sc-rules .rules-section:nth-child(6){animation-delay: 0.20s}
.site-mode #sc-rules .rules-section:nth-child(7){animation-delay: 0.23s}
.site-mode #sc-rules .rules-section:nth-child(8){animation-delay: 0.26s}
.site-mode #sc-rules .rules-section:nth-child(9){animation-delay: 0.29s}
.site-mode #sc-rules .rules-section:nth-child(10){animation-delay: 0.32s}
.site-mode #sc-rules .rules-section:nth-child(11){animation-delay: 0.35s}
.site-mode #sc-rules .rules-section:nth-child(12){animation-delay: 0.38s}
.site-mode #sc-rules .rules-section:nth-child(13){animation-delay: 0.41s}
.site-mode #sc-rules .rules-section:nth-child(14){animation-delay: 0.44s}
.site-mode #sc-rules .rules-section:nth-child(15){animation-delay: 0.47s}
.site-mode #sc-rules .rules-section:nth-child(16){animation-delay: 0.50s}
.site-mode #sc-rules .rules-section:nth-child(17){animation-delay: 0.53s}
.site-mode #sc-rules .rules-section:nth-child(18){animation-delay: 0.56s}
.site-mode #sc-rules .rules-section:nth-child(19){animation-delay: 0.59s}

/* Section number — premium pill */
.site-mode #sc-rules .rules-num{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.18) 0%, rgba(220, 20, 60, 0.04) 100%) !important;
  border: 1px solid rgba(220, 20, 60, 0.32) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ff8aa3 !important;
  flex-shrink: 0;
  margin: 0 !important;
  box-shadow: 0 0 16px rgba(220, 20, 60, 0.18);
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.site-mode #sc-rules .rules-content{
  flex: 1;
  min-width: 0;
}
.site-mode #sc-rules .rules-content h3{
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px !important;
  color: #eeeff1;
  line-height: 1.3;
}
.site-mode #sc-rules .rules-content p{
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: rgba(238, 239, 241, 0.65) !important;
  letter-spacing: -0.005em;
}

/* ════════════════════════════════════════════════════════════════
   LANGUAGE MODAL — landing aesthetic with SVG flags
   ════════════════════════════════════════════════════════════════ */
.site-mode #langOverlay{
  align-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: opacity 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}
.site-mode #langOverlay.show{
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.site-mode #langOverlay .lang-modal{
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 32px 28px 24px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #0e0e10 0%, #07070a 100%) !important;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(220, 20, 60, 0.1);
  isolation: isolate;
  overflow: hidden;
  margin: 0 !important;
  animation: none !important;
}
/* Entry animations — run every time .show is added */
@keyframes langOverlayIn{
  from{
    opacity: 0;
    background: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
  to{
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
@keyframes langModalIn{
  from{
    opacity: 0;
    transform: translateY(30px) scale(0.94);
    filter: blur(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
/* Exit animations — separate keyframes (mirror of In) so they reliably fire
   when .closing is added on top of .show. Using `direction: reverse` on the
   same name doesn't always restart the animation in all browsers. */
@keyframes langOverlayOut{
  from{
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  to{
    opacity: 0;
    background: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}
@keyframes langModalOut{
  from{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to{
    opacity: 0;
    transform: translateY(20px) scale(0.94);
    filter: blur(4px);
  }
}
.site-mode #langOverlay.show{
  animation: langOverlayIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) backwards !important;
}
.site-mode #langOverlay.show .lang-modal{
  animation: langModalIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards !important;
}
/* Stagger entry for each language option for a richer feel */
.site-mode #langOverlay.show .lang-option{
  animation: langModalIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards !important;
}
.site-mode #langOverlay.show .lang-option:nth-child(1){animation-delay: 0.10s}
.site-mode #langOverlay.show .lang-option:nth-child(2){animation-delay: 0.16s}
.site-mode #langOverlay.show .lang-option:nth-child(3){animation-delay: 0.22s}
.site-mode #langOverlay.show .lang-option:nth-child(4){animation-delay: 0.28s}
/* When .closing is added — exit animation (different keyframe name forces restart) */
.site-mode #langOverlay.closing{
  animation: langOverlayOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
.site-mode #langOverlay.closing .lang-modal{
  animation: langModalOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
.site-mode #langOverlay.closing .lang-option{
  animation: langModalOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
.site-mode #langOverlay .lang-modal::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(220, 20, 60, 0.6) 50%, transparent 100%);
  pointer-events: none;
}
.site-mode #langOverlay .lang-modal::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(220, 20, 60, 0.16) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Close button */
.site-mode #langOverlay .lang-close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(238, 239, 241, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.3s;
  z-index: 2;
  font-family: inherit;
}
.site-mode #langOverlay .lang-close:hover{
  background: rgba(220, 20, 60, 0.15);
  border-color: rgba(220, 20, 60, 0.4);
  color: #fff;
  transform: rotate(90deg);
}
.site-mode #langOverlay .lang-close svg{width: 16px; height: 16px}

/* Header (icon + title + sub) */
.site-mode #langOverlay .lang-modal-head{
  text-align: center;
  margin-bottom: 24px;
  padding: 0 8px;
}
.site-mode #langOverlay .lang-modal-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.18) 0%, rgba(220, 20, 60, 0.06) 100%);
  border: 1px solid rgba(220, 20, 60, 0.3);
  box-shadow: 0 0 24px rgba(220, 20, 60, 0.2);
  color: #ff8aa3;
}
.site-mode #langOverlay .lang-modal-icon svg{
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 6px rgba(220, 20, 60, 0.5));
}
.site-mode #langOverlay .lang-modal-title{
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 70%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 6px !important;
  line-height: 1.15;
}
.site-mode #langOverlay .lang-modal-sub{
  font-size: 13px;
  color: rgba(238, 239, 241, 0.55);
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}

/* Options list */
.site-mode #langOverlay #langOptions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 540px){
  .site-mode #langOverlay #langOptions{grid-template-columns: 1fr}
}

.site-mode #langOverlay .lang-option{
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: rgba(18, 18, 21, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  color: #eeeff1 !important;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  isolation: isolate;
  overflow: hidden;
}
.site-mode #langOverlay .lang-option::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 100% at 50% 100%, rgba(220, 20, 60, 0.16) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: -1;
}
.site-mode #langOverlay .lang-option:hover{
  transform: translateY(-2px);
  border-color: rgba(220, 20, 60, 0.3) !important;
  background: rgba(18, 18, 21, 0.85) !important;
}
.site-mode #langOverlay .lang-option:hover::before{opacity: 1}
.site-mode #langOverlay .lang-option:active{
  transform: translateY(0);
}
.site-mode #langOverlay .lang-option.selected{
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(220, 20, 60, 0.22) 0%, transparent 70%),
    linear-gradient(180deg, #18101a 0%, #0a0508 100%) !important;
  border-color: rgba(255, 80, 110, 0.55) !important;
  color: #fff !important;
  box-shadow:
    inset 0 -2px 3px rgba(255, 255, 255, 0.12),
    0 8px 24px -4px rgba(220, 20, 60, 0.4);
}

/* Flag */
.site-mode #langOverlay .lang-flag{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 26px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.site-mode #langOverlay .lang-flag svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Text (native + code) */
.site-mode #langOverlay .lang-text{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.site-mode #langOverlay .lang-native{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #eeeff1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-mode #langOverlay .lang-option.selected .lang-native{color: #fff}
.site-mode #langOverlay .lang-code{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(238, 239, 241, 0.45);
}
.site-mode #langOverlay .lang-option.selected .lang-code{
  color: rgba(255, 138, 163, 0.85);
}

/* Check icon — hidden by default, shown on .selected */
.site-mode #langOverlay .lang-check{
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  margin-left: 0 !important;
  opacity: 0 !important;
  transform: scale(0.6);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0 !important;
}
.site-mode #langOverlay .lang-check svg{
  width: 16px;
  height: 16px;
}
.site-mode #langOverlay .lang-option.selected .lang-check{
  opacity: 1 !important;
  transform: scale(1);
  background: linear-gradient(180deg, #dc143c 0%, #9c0e2b 100%);
  color: #fff;
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.5);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-mode #langOverlay,
  .site-mode #langOverlay .lang-modal,
  .site-mode #langOverlay .lang-option{
    transition: opacity 0.2s ease !important;
  }
  .site-mode #langOverlay .lang-option:hover{transform: none}
}

/* ════════════════════════════════════════════════════════════════
   PROFILE — landing aesthetic
   ════════════════════════════════════════════════════════════════ */

/* Profile header — wide premium card */
.site-mode #sc-profile .prof-header{
  position: relative;
  padding: 36px 40px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(220, 20, 60, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #0c0c0e 0%, #06060a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 28px !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  gap: 28px !important;
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
  animation: siteHeroIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.site-mode #sc-profile .prof-header::before{
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  right: -1px !important;
  height: 1px !important;
  width: auto !important;
  background: linear-gradient(90deg, transparent 0%, rgba(220, 20, 60, 0.6) 50%, transparent 100%) !important;
  animation: none !important;
}

/* Avatar */
.site-mode #sc-profile .prof-avatar{
  width: 96px !important;
  height: 96px !important;
  margin: 0 !important;
  flex-shrink: 0;
  border-radius: 28px !important;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.18) 0%, rgba(220, 20, 60, 0.06) 100%) !important;
  border: 1px solid rgba(220, 20, 60, 0.35) !important;
  box-shadow:
    0 0 32px rgba(220, 20, 60, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.site-mode #sc-profile .prof-avatar svg{
  width: 42px !important;
  height: 42px !important;
  stroke: #ff8aa3 !important;
  filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.5));
}
.site-mode #sc-profile .prof-avatar img{
  border-radius: 28px !important;
}

.site-mode #sc-profile .prof-name{
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 6px !important;
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 80%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(220, 20, 60, 0.2));
}
.site-mode #sc-profile .prof-id{
  font-size: 13px !important;
  color: rgba(238, 239, 241, 0.5) !important;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Stats grid */
.site-mode #sc-profile .prof-stats{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}
@media (max-width: 1100px){
  .site-mode #sc-profile .prof-stats{grid-template-columns: repeat(2, minmax(0, 1fr)) !important}
}

.site-mode #sc-profile .prof-stat{
  position: relative;
  padding: 28px 22px 24px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #0e0e10 0%, #07070a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  text-align: left;
  transform: translateZ(0);
  will-change: transform;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  /* Override base .prof-stat{opacity:0} so cards stay visible after entry
     animation completes with `backwards`. */
  opacity: 1 !important;
  animation: siteCardIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
/* Hover halo. Explicitly override the base ::before geometry (top:-50%, left:-50%, w/h:200%)
   that was used for the rotating conic-gradient — otherwise inset doesn't reset width/height. */
.site-mode #sc-profile .prof-stat::before{
  content: '';
  position: absolute;
  top: -1px !important;
  left: -1px !important;
  right: -1px !important;
  bottom: -1px !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit;
  background: radial-gradient(80% 100% at 50% 0%, var(--stat-glow, rgba(220, 20, 60, 0.18)) 0%, transparent 70%) !important;
  box-shadow:
    0 16px 32px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--stat-color, rgba(220, 20, 60, 0.25)),
    0 0 24px -4px var(--stat-shadow, rgba(220, 20, 60, 0.35));
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: -1;
  animation: none !important;
}
.site-mode #sc-profile .prof-stat::after{
  display: none !important;
}
.site-mode #sc-profile .prof-stat > *{position: relative; z-index: 1}
.site-mode #sc-profile .prof-stat:hover{
  transform: translateY(-4px);
  border-color: var(--stat-color, rgba(220, 20, 60, 0.4)) !important;
}
.site-mode #sc-profile .prof-stat:hover::before{opacity: 1}
.site-mode #sc-profile .prof-stat:hover .prof-stat-icon{
  transform: scale(1.06) rotate(-3deg);
}

/* Icon — coloured square container (landing-style) */
.site-mode #sc-profile .prof-stat-icon{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background:
    radial-gradient(60% 60% at 50% 50%, var(--stat-glow, rgba(220, 20, 60, 0.3)) 0%, transparent 70%),
    linear-gradient(180deg, var(--stat-bg-light, rgba(220, 20, 60, 0.18)) 0%, var(--stat-bg-dark, rgba(220, 20, 60, 0.05)) 100%);
  border: 1px solid var(--stat-color, rgba(220, 20, 60, 0.32));
  box-shadow: 0 0 18px var(--stat-shadow, rgba(220, 20, 60, 0.18));
  color: var(--stat-icon, #ff8aa3);
  flex-shrink: 0;
  margin: 0 !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-mode #sc-profile .prof-stat-icon svg{
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 6px var(--stat-shadow, rgba(220, 20, 60, 0.4)));
}

/* Value — large gradient number, but solid color so child <span> + <img> render correctly */
.site-mode #sc-profile .prof-stat-val{
  font-size: 30px !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff !important;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  filter: drop-shadow(0 0 14px var(--stat-shadow, rgba(220, 20, 60, 0.25)));
}
.site-mode #sc-profile .prof-stat-val .coin{
  width: 22px;
  height: 22px;
  align-self: center;
  filter: drop-shadow(0 0 6px rgba(220, 20, 60, 0.4));
}
.site-mode #sc-profile .prof-stat-label{
  font-size: 11px !important;
  color: rgba(238, 239, 241, 0.5) !important;
  margin-top: -4px !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Per-stat brand colors (landing-style) */
.site-mode #sc-profile .prof-stat--tokens{
  --stat-color: rgba(220, 20, 60, 0.32);
  --stat-glow: rgba(220, 20, 60, 0.28);
  --stat-shadow: rgba(220, 20, 60, 0.4);
  --stat-bg-light: rgba(220, 20, 60, 0.18);
  --stat-bg-dark: rgba(220, 20, 60, 0.05);
  --stat-icon: #ff8aa3;
}
.site-mode #sc-profile .prof-stat--ref{
  --stat-color: rgba(52, 211, 153, 0.32);
  --stat-glow: rgba(52, 211, 153, 0.25);
  --stat-shadow: rgba(52, 211, 153, 0.4);
  --stat-bg-light: rgba(52, 211, 153, 0.16);
  --stat-bg-dark: rgba(52, 211, 153, 0.04);
  --stat-icon: #6ee7b7;
}
.site-mode #sc-profile .prof-stat--gen{
  --stat-color: rgba(6, 182, 212, 0.32);
  --stat-glow: rgba(6, 182, 212, 0.25);
  --stat-shadow: rgba(6, 182, 212, 0.4);
  --stat-bg-light: rgba(6, 182, 212, 0.16);
  --stat-bg-dark: rgba(6, 182, 212, 0.04);
  --stat-icon: #67e8f9;
}
.site-mode #sc-profile .prof-stat--users{
  --stat-color: rgba(251, 191, 36, 0.32);
  --stat-glow: rgba(251, 191, 36, 0.25);
  --stat-shadow: rgba(251, 191, 36, 0.4);
  --stat-bg-light: rgba(251, 191, 36, 0.16);
  --stat-bg-dark: rgba(251, 191, 36, 0.04);
  --stat-icon: #fcd34d;
}

.site-mode #sc-profile .prof-stat:nth-child(1){animation-delay: 0.05s}
.site-mode #sc-profile .prof-stat:nth-child(2){animation-delay: 0.10s}
.site-mode #sc-profile .prof-stat:nth-child(3){animation-delay: 0.15s}
.site-mode #sc-profile .prof-stat:nth-child(4){animation-delay: 0.20s}

/* Promo card */
.site-mode #sc-profile .prof-promo-card{
  position: relative;
  padding: 24px 28px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(251, 191, 36, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #0e0e10 0%, #07070a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 20px !important;
  overflow: hidden;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.5);
}
.site-mode #sc-profile .prof-promo-header{
  margin-bottom: 16px !important;
  gap: 14px !important;
}
.site-mode #sc-profile .prof-qa-icon{
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  font-size: 22px !important;
}
.site-mode #sc-profile .prof-qa-icon.promo-qa{
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(251, 191, 36, 0.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.2);
}
.site-mode #sc-profile .prof-promo-title{
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.site-mode #sc-profile .prof-promo-sub{
  font-size: 13px !important;
  color: rgba(238, 239, 241, 0.55) !important;
  margin-top: 4px !important;
}
.site-mode #sc-profile .prof-promo-form{gap: 10px !important}
.site-mode #sc-profile .prof-promo-input{
  padding: 14px 16px 14px 18px !important;
  font-size: 14px !important;
  background: rgba(18, 18, 21, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  color: #eeeff1 !important;
  letter-spacing: 0.04em;
  font-weight: 500;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.3s;
}
.site-mode #sc-profile .prof-promo-input::placeholder{
  color: rgba(238, 239, 241, 0.4) !important;
  letter-spacing: 0;
  font-weight: 400;
}
.site-mode #sc-profile .prof-promo-input:focus{
  border-color: rgba(251, 191, 36, 0.5) !important;
  background: rgba(18, 18, 21, 0.9) !important;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.08) !important;
}

.site-mode #sc-profile .prof-promo-btn{
  position: relative;
  isolation: isolate;
  width: 56px !important;
  height: auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 80, 110, 0.55) !important;
  background:
    radial-gradient(60% 50% at 50% 100%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 60, 90, 0.4) 55%,
      rgba(255, 60, 90, 0) 100%),
    linear-gradient(180deg, #4a1320 0%, #6e0d22 100%) !important;
  color: #fff !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 -3px 4px rgba(255, 255, 255, 0.22),
    0 4px 16px -4px rgba(220, 20, 60, 0.5) !important;
  transform: translateZ(0);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.site-mode #sc-profile .prof-promo-btn svg{
  width: 22px;
  height: 22px;
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 220, 230, 0.4));
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-mode #sc-profile .prof-promo-btn:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow:
    inset 0 -3px 6px rgba(255, 255, 255, 0.32),
    0 10px 24px -4px rgba(220, 20, 60, 0.6) !important;
}
.site-mode #sc-profile .prof-promo-btn:hover:not(:disabled) svg{
  transform: translateX(3px);
}
.site-mode #sc-profile .prof-promo-btn:disabled{
  opacity: 0.45 !important;
  cursor: not-allowed;
}

/* Settings card (rows of menu items) */
.site-mode #sc-profile .prof-settings{
  background: linear-gradient(180deg, #0e0e10 0%, #07070a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
  margin-bottom: 16px !important;
  overflow: hidden;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.5);
}
.site-mode #sc-profile .prof-set-row{
  display: flex !important;
  align-items: center;
  gap: 16px !important;
  padding: 20px 26px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  cursor: pointer;
  transition: background 0.25s ease, padding-left 0.3s ease;
}
.site-mode #sc-profile .prof-set-row:last-child{border-bottom: none !important}
.site-mode #sc-profile .prof-set-row:hover{
  background: rgba(255, 255, 255, 0.03);
  padding-left: 30px !important;
}
.site-mode #sc-profile .prof-set-row:hover .prof-set-action svg{
  transform: translateX(4px);
}

.site-mode #sc-profile .prof-set-icon{
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-mode #sc-profile .prof-set-row:hover .prof-set-icon{
  transform: scale(1.05);
}
.site-mode #sc-profile .prof-set-icon.lang-icon{
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(6, 182, 212, 0.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.05) 100%) !important;
  border: 1px solid rgba(6, 182, 212, 0.28) !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.18);
}
.site-mode #sc-profile .prof-set-icon.rules-icon{
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(251, 191, 36, 0.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.28) !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.18);
}
.site-mode #sc-profile .prof-set-icon.support-icon{
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.15) 0%, rgba(220, 20, 60, 0.05) 100%) !important;
  border: 1px solid rgba(220, 20, 60, 0.32) !important;
  box-shadow: 0 0 16px rgba(220, 20, 60, 0.2);
}

.site-mode #sc-profile .prof-set-label{
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #eeeff1;
}
.site-mode #sc-profile .prof-set-sub{
  font-size: 13px !important;
  color: rgba(238, 239, 241, 0.5) !important;
  margin-top: 3px !important;
}
/* Inline flag in language sub-text (replaces the broken 🇷🇺 emoji on PC).
   Applies in both Mini App and site mode so the SVG never renders at its
   intrinsic (huge) size. */
#pr-lang-btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pr-lang-flag{
  display: inline-flex;
  width: 18px;
  height: 13px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  vertical-align: middle;
}
.pr-lang-flag svg{
  width: 100%;
  height: 100%;
  display: block;
}
.site-mode #sc-profile .prof-set-action svg{
  width: 16px !important;
  height: 16px !important;
  stroke: rgba(238, 239, 241, 0.4);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logout button — shown on mobile (hidden ≥900px by base CSS), but in case
   it's visible due to width changes, polish it consistently. */
.site-mode #sc-profile .profile-logout-btn{
  margin-top: 8px !important;
  padding: 14px 24px !important;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 14px !important;
  background: rgba(248, 113, 113, 0.06) !important;
  border: 1px solid rgba(248, 113, 113, 0.25) !important;
  color: rgba(248, 113, 113, 0.9) !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-mode #sc-profile .profile-logout-btn:hover{
  background: rgba(248, 113, 113, 0.12) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
  color: #f87171 !important;
  transform: translateY(-1px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-mode .hero,
  .site-mode .feed-grid > .mc,
  .site-mode .feed-toolbar,
  .site-mode .feed-filters,
  .site-mode body::before,
  .site-mode .nav-login::before,
  .site-mode .site-login-btn::before,
  .site-mode #sc-generations .gh-title,
  .site-mode #sc-generations .gh-search-wrap,
  .site-mode #sc-generations .gh-grid > .gh-card,
  .site-mode .gh-download::before,
  .site-mode #sc-referral .text-c,
  .site-mode #sc-referral .card,
  .site-mode #sc-referral [id="ref-share-btn"]::before,
  .site-mode #sc-referral [id="ref-share-site-btn"]::before,
  .site-mode #sc-referral [id="ref-confirm-btn"]::before,
  .site-mode #shareOverlay,
  .site-mode #shareOverlay .share-modal,
  .site-mode #sc-balance .card.text-c,
  .site-mode #sc-balance .pkg-list > .pkg,
  .site-mode #sc-balance .pm-list > .pm,
  .site-mode #sc-balance .bal-summary,
  .site-mode #sc-balance .bal-continue::before,
  .site-mode #sc-profile .prof-header,
  .site-mode #sc-profile .prof-stat{
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
  .site-mode .mc:hover,
  .site-mode #sc-generations .gh-card:hover,
  .site-mode #sc-referral .sd-card:hover,
  .site-mode #shareOverlay .share-target:hover,
  .site-mode #sc-balance .pkg:hover,
  .site-mode #sc-balance .pm:hover,
  .site-mode #sc-profile .prof-stat:hover,
  .site-mode #sc-profile .prof-set-row:hover{transform: none !important}
}

/* ════════════════════════════════════════════════════════════════════════════
   FEED EMPTY STATE — landing aesthetic
   Shown when no items match the current filters or the catalog is empty.
   ════════════════════════════════════════════════════════════════════════════ */
.site-mode .feed-empty-state{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 24px;
  border-radius: 24px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(220, 20, 60, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, #0c0c0e 0%, #06060a 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  animation: siteHeroIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.site-mode .feed-empty-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 26px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.16) 0%, rgba(220, 20, 60, 0.04) 100%);
  border: 1px solid rgba(220, 20, 60, 0.3);
  box-shadow: 0 0 32px rgba(220, 20, 60, 0.18);
  color: #ff8aa3;
  margin-bottom: 22px;
}
.site-mode .feed-empty-icon svg{
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.45));
}
.site-mode .feed-empty-title{
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 80%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(220, 20, 60, 0.2));
  margin-bottom: 10px;
  line-height: 1.15;
}
.site-mode .feed-empty-sub{
  font-size: 15px;
  color: rgba(238, 239, 241, 0.55);
  max-width: 380px;
  line-height: 1.55;
}
.site-mode .feed-empty-reset{
  margin-top: 22px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 80, 110, 0.55);
  background:
    radial-gradient(60% 50% at 50% 100%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 60, 90, 0.4) 55%,
      rgba(255, 60, 90, 0) 100%),
    linear-gradient(180deg, #4a1320 0%, #6e0d22 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  box-shadow:
    inset 0 -3px 4px rgba(255, 255, 255, 0.22),
    0 6px 20px -4px rgba(220, 20, 60, 0.5);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.site-mode .feed-empty-reset:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 -3px 6px rgba(255, 255, 255, 0.32),
    0 10px 28px -4px rgba(220, 20, 60, 0.6);
}

/* ════════════════════════════════════════════════════════════════════════════
   FILTERS MODAL — landing aesthetic (universal — desktop & mobile)
   ════════════════════════════════════════════════════════════════════════════ */
/* Always-rendered overlay — visibility/opacity NOT toggled. Modal is moved
   off-screen via transform on .lang-modal; backdrop fades via background +
   backdrop-filter only. No visibility/display tricks → transitions are
   guaranteed to fire on every browser, every time. */
.site-mode #filtersOverlay{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition:
    background 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-backdrop-filter 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-mode #filtersOverlay.show{
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Dialog */
.site-mode #filtersOverlay .lang-modal{
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  padding: 0 !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #0e0e10 0%, #07070a 100%) !important;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(220, 20, 60, 0.1);
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  /* Desktop: hidden by opacity 0; mobile overrides opacity to 1 (pure slide). */
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
  animation: none !important;
}
.site-mode #filtersOverlay.show .lang-modal{
  transform: translateY(0) scale(1);
  opacity: 1;
  animation: none !important;
}
.site-mode #filtersOverlay .lang-modal::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(220, 20, 60, 0.6) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Header */
.site-mode #filtersOverlay .filters-head{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.site-mode #filtersOverlay .filters-head-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(220, 20, 60, 0.18) 0%, rgba(220, 20, 60, 0.05) 100%);
  border: 1px solid rgba(220, 20, 60, 0.32);
  box-shadow: 0 0 16px rgba(220, 20, 60, 0.18);
  color: #ff8aa3;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-mode #filtersOverlay .filters-head-icon svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(220, 20, 60, 0.4));
}
.site-mode #filtersOverlay .filters-head-title{
  flex: 1;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #ff8aa3 80%, #dc143c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(220, 20, 60, 0.18));
}
.site-mode #filtersOverlay .filters-close{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(238, 239, 241, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s ease;
  font-family: inherit;
}
.site-mode #filtersOverlay .filters-close:hover{
  background: rgba(220, 20, 60, 0.15);
  border-color: rgba(220, 20, 60, 0.4);
  color: #fff;
  transform: rotate(90deg);
}
.site-mode #filtersOverlay .filters-close svg{
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Body (scrollable) */
.site-mode #filtersOverlay .filters-body{
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  /* Prevent scroll-chaining: when user scrolls past the top/bottom of this
     container, browser does NOT pass the gesture up to the page behind. */
  overscroll-behavior: contain;
  -ms-overscroll-behavior: contain;
}
.site-mode #filtersOverlay .lang-modal{
  overscroll-behavior: contain;
}
.site-mode #filtersOverlay .filters-body::-webkit-scrollbar{width: 4px}
.site-mode #filtersOverlay .filters-body::-webkit-scrollbar-thumb{
  background: rgba(220, 20, 60, 0.3);
  border-radius: 2px;
}

/* Sections */
.site-mode #filtersOverlay .filters-section{margin-bottom: 22px}
.site-mode #filtersOverlay .filters-section:last-child{margin-bottom: 0}
.site-mode #filtersOverlay .filters-section-title{
  font-size: 11px;
  font-weight: 600;
  color: rgba(238, 239, 241, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.site-mode #filtersOverlay .filters-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Chips */
.site-mode #filtersOverlay .filter-chip{
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 18, 21, 0.6);
  color: rgba(238, 239, 241, 0.65);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.site-mode #filtersOverlay .filter-chip:hover{
  border-color: rgba(220, 20, 60, 0.35);
  color: #eeeff1;
  background: rgba(220, 20, 60, 0.06);
}
.site-mode #filtersOverlay .filter-chip.active{
  background: linear-gradient(180deg, #4a1320 0%, #6e0d22 100%);
  border-color: rgba(255, 80, 110, 0.55);
  color: #fff;
  box-shadow:
    inset 0 -2px 3px rgba(255, 255, 255, 0.18),
    0 3px 12px -2px rgba(220, 20, 60, 0.45);
}

/* Filter group cards */
.site-mode #filtersOverlay .filter-group{
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.site-mode #filtersOverlay .filter-group:last-child{margin-bottom: 0}
.site-mode #filtersOverlay .filter-group-title{
  font-size: 11px;
  color: rgba(238, 239, 241, 0.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.site-mode #filtersOverlay .filter-group .filter-chip-hidden{display: none}
.site-mode #filtersOverlay .filter-group.expanded .filter-chip-hidden{display: inline-flex}

.site-mode #filtersOverlay .filter-more-btn{
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: rgba(238, 239, 241, 0.55);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
.site-mode #filtersOverlay .filter-more-btn:hover{
  color: #ff8aa3;
  background: rgba(220, 20, 60, 0.08);
}
.site-mode #filtersOverlay .filter-more-btn svg{
  width: 12px;
  height: 12px;
  transition: transform 0.25s ease;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-mode #filtersOverlay .filter-group.expanded .filter-more-btn svg{transform: rotate(180deg)}

/* Footer */
.site-mode #filtersOverlay .filters-foot{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(220, 20, 60, 0.03) 100%);
}
.site-mode #filtersOverlay .filters-reset{
  flex: 0 0 auto;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 18, 21, 0.6);
  color: rgba(238, 239, 241, 0.7);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.site-mode #filtersOverlay .filters-reset:hover{
  background: rgba(255, 255, 255, 0.06);
  color: #eeeff1;
}
.site-mode #filtersOverlay .filters-apply{
  position: relative;
  isolation: isolate;
  flex: 1;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 80, 110, 0.55);
  background:
    radial-gradient(60% 50% at 50% 100%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 60, 90, 0.4) 55%,
      rgba(255, 60, 90, 0) 100%),
    linear-gradient(180deg, #4a1320 0%, #6e0d22 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 -3px 4px rgba(255, 255, 255, 0.22),
    0 6px 20px -4px rgba(220, 20, 60, 0.5),
    0 2px 8px rgba(220, 20, 60, 0.35);
  transition: transform 0.3s ease, box-shadow 0.4s ease;
  overflow: visible;
}
.site-mode #filtersOverlay .filters-apply:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 -4px 6px rgba(255, 255, 255, 0.32),
    0 10px 28px -4px rgba(220, 20, 60, 0.65),
    0 4px 12px rgba(220, 20, 60, 0.45);
}
.site-mode #filtersOverlay .filters-apply::before{
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--site-btn-angle),
    transparent 25%,
    rgba(255, 122, 142, 0.9) 45%,
    rgba(255, 220, 230, 0.95) 55%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: siteBtnBorderRotate 3.4s linear infinite;
  pointer-events: none;
  z-index: -1;
}
.site-mode #filtersOverlay .filters-apply:disabled{
  opacity: 0.5;
  pointer-events: none;
}

/* Mobile / phone — convert to bottom-sheet for ergonomic reach */
@media (max-width: 600px){
  .site-mode #filtersOverlay{
    align-items: flex-end;
    padding: 0;
  }
  .site-mode #filtersOverlay .lang-modal{
    max-width: 100%;
    width: 100%;
    max-height: 90vh;
    border-radius: 24px 24px 0 0 !important;
    /* Mobile bottom-sheet: pure slide. opacity stays 1 throughout — visibility
       is controlled by transform alone (modal off-screen below viewport). */
    transform: translateY(100%) !important;
    opacity: 1 !important;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  .site-mode #filtersOverlay.show .lang-modal{
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
  /* Drag-handle indicator at the top of the sheet */
  .site-mode #filtersOverlay .lang-modal::after{
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
    z-index: 2;
  }
  .site-mode #filtersOverlay .filters-head{
    padding: 22px 20px 18px;
  }
  .site-mode #filtersOverlay .filters-head-title{font-size: 18px}
  .site-mode #filtersOverlay .filters-body{
    padding: 18px 20px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0));
  }
  .site-mode #filtersOverlay .filters-foot{
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0));
    gap: 10px;
  }
  .site-mode #filtersOverlay .filter-chip{
    padding: 9px 15px;
    font-size: 13px;
  }
  .site-mode #filtersOverlay .filter-group{
    padding: 14px 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE TWEAKS (≤ 600px)
   Tighten padding, reduce icon sizes, single-column grids.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px){

  /* Hero cards in general — tighter padding */
  .site-mode #sc-balance .card.text-c{
    padding: 28px 22px !important;
    border-radius: 20px !important;
    gap: 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .site-mode #sc-balance .card.text-c::after{display: none}
  .site-mode #sc-balance .card.text-c > div:nth-child(2){
    font-size: clamp(2rem, 12vw, 3rem) !important;
    gap: 10px !important;
  }
  .site-mode #sc-balance .card.text-c .coin-lg{
    width: 36px !important;
    height: 36px !important;
  }

  /* Profile header — stack vertically */
  .site-mode #sc-profile .prof-header{
    flex-direction: column !important;
    text-align: center !important;
    padding: 28px 22px !important;
    gap: 18px !important;
  }
  .site-mode #sc-profile .prof-avatar{
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto !important;
  }
  .site-mode #sc-profile .prof-avatar svg{
    width: 36px !important;
    height: 36px !important;
  }
  .site-mode #sc-profile .prof-name{
    font-size: 1.75rem !important;
  }

  /* Profile stats grid — 2 columns on phones */
  .site-mode #sc-profile .prof-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .site-mode #sc-profile .prof-stat{
    padding: 22px 18px 20px !important;
    border-radius: 16px !important;
  }
  .site-mode #sc-profile .prof-stat-icon{
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  .site-mode #sc-profile .prof-stat-icon svg{
    width: 22px;
    height: 22px;
  }
  .site-mode #sc-profile .prof-stat-val{
    font-size: 24px !important;
  }
  .site-mode #sc-profile .prof-stat-label{
    font-size: 10px !important;
    letter-spacing: 0.1em;
  }

  /* Profile promo & settings — tighter padding */
  .site-mode #sc-profile .prof-promo-card{
    padding: 20px 22px !important;
    border-radius: 18px !important;
  }
  .site-mode #sc-profile .prof-set-row{
    padding: 16px 20px !important;
    gap: 14px !important;
  }
  /* No hover padding-shift on phone — it shows up as a "twitch" on tap */
  .site-mode #sc-profile .prof-set-icon{
    width: 38px !important;
    height: 38px !important;
  }
  .site-mode #sc-profile .prof-set-label{font-size: 14px !important}
  .site-mode #sc-profile .prof-set-sub{font-size: 12px !important}

  /* Generations title smaller */
  .site-mode #sc-generations .gh-title{
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    margin-bottom: 22px !important;
  }
  .site-mode #sc-generations .gh-search-wrap{
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px !important;
  }
  .site-mode #sc-generations .gh-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* Referral hero icon smaller */
  .site-mode #sc-referral .text-c > div:first-child > div{
    width: 80px !important;
    height: 80px !important;
    border-radius: 24px !important;
  }
  .site-mode #sc-referral .text-c > div:first-child svg{
    width: 36px !important;
    height: 36px !important;
  }
  .site-mode #sc-referral .card{
    padding: 22px !important;
    border-radius: 18px !important;
  }
  .site-mode #sc-referral [id="ref-bal-usd"]{
    font-size: 38px !important;
  }
  .site-mode #sc-referral .stats-dash{gap: 12px !important}
  .site-mode #sc-referral .sd-card{
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }
  .site-mode #sc-referral .sd-val{font-size: 32px !important}

  /* Balance cards */
  .site-mode #sc-balance .pkg{
    padding: 20px !important;
    min-height: 116px;
  }
  .site-mode #sc-balance .pkg-credits{font-size: 20px !important}
  .site-mode #sc-balance .pkg-price{font-size: 19px !important}
  .site-mode #sc-balance .pkg-price > span{font-size: 16px !important}
  .site-mode #sc-balance .bal-summary{
    padding: 22px 24px !important;
    border-radius: 20px !important;
  }
  .site-mode #sc-balance .bal-summary-value{font-size: 22px !important}

  /* Rules — stack hero, smaller sections */
  .site-mode #sc-rules .rules-hero{
    flex-direction: column !important;
    align-items: flex-start;
    text-align: left;
    padding: 28px 22px !important;
    gap: 16px !important;
  }
  .site-mode #sc-rules .rules-hero-icon{
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px;
  }
  .site-mode #sc-rules .rules-hero-icon svg{
    width: 28px;
    height: 28px;
  }
  .site-mode #sc-rules .rules-hero-title{
    font-size: 1.625rem !important;
  }
  .site-mode #sc-rules .rules-section{
    padding: 18px 20px !important;
    gap: 14px !important;
    border-radius: 16px !important;
  }
  .site-mode #sc-rules .rules-num{
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
  }
  .site-mode #sc-rules .rules-content h3{font-size: 15px !important}
  .site-mode #sc-rules .rules-content p{font-size: 13px !important}
  .site-mode #sc-rules .rules-intro{
    font-size: 14px !important;
    padding: 22px 22px 22px 70px !important;
  }
  .site-mode #sc-rules .rules-intro::before,
  .site-mode #sc-rules .rules-intro::after{
    width: 32px;
    height: 32px;
    left: 22px;
    top: 22px;
  }
  .site-mode #sc-rules .rules-intro::after{
    background-size: 18px 18px;
  }

  /* Generate upload — tighter */
  .site-mode #sc-generate .upload-card{
    padding: 26px 22px !important;
    border-radius: 20px !important;
  }
  .site-mode #sc-generate .upload-header{
    margin-bottom: 22px !important;
    gap: 14px !important;
  }
  .site-mode #sc-generate .upload-header-icon{
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }
  .site-mode #sc-generate .upload-header-icon svg{
    width: 22px !important;
    height: 22px !important;
  }
  .site-mode #sc-generate .upload-header-text{font-size: 19px !important}
  .site-mode #sc-generate .upload-header-sub{font-size: 13px !important}
  .site-mode #sc-generate .uz{
    padding: 32px 18px !important;
    border-radius: 18px !important;
  }
  .site-mode #sc-generate .uz-icon{
    width: 72px;
    height: 72px;
    border-radius: 20px;
    margin-bottom: 14px !important;
  }
  .site-mode #sc-generate .uz-icon svg{
    width: 32px !important;
    height: 32px !important;
  }
  .site-mode #sc-generate .uz-text{font-size: 14px !important}
  .site-mode #sc-generate .uz-hint{font-size: 12px !important}
  .site-mode #sc-generate .tips{
    grid-template-columns: repeat(3, 1fr);
    gap: 8px !important;
    margin-top: 18px !important;
  }
  .site-mode #sc-generate .tip{
    padding: 12px 8px !important;
    border-radius: 12px !important;
  }
  .site-mode #sc-generate .tip-icon{
    width: 30px !important;
    height: 30px !important;
  }
  .site-mode #sc-generate .tip-icon svg{
    width: 15px !important;
    height: 15px !important;
  }
  .site-mode #sc-generate .tip-text{font-size: 11px !important}

  /* Cat cards (Photo/Video) — single column */
  .site-mode #sc-generate .cat-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .site-mode #sc-generate .cat-card{min-height: 200px !important}
  .site-mode #sc-generate .cat-title{font-size: 22px !important}

  /* Modals — fit phone screens better */
  .site-mode #shareOverlay{padding: 16px}
  .site-mode #shareOverlay .share-modal{
    padding: 26px 22px 22px;
    border-radius: 22px;
  }
  .site-mode #shareOverlay .share-head{margin-bottom: 22px}
  .site-mode #shareOverlay .share-head-icon{width: 56px; height: 56px}
  .site-mode #shareOverlay .share-head-icon svg{width: 24px; height: 24px}
  .site-mode #shareOverlay .share-title{font-size: 20px}
  .site-mode #shareOverlay .share-sub{font-size: 13px}

  .site-mode #langOverlay{padding: 16px}
  .site-mode #langOverlay .lang-modal{
    padding: 26px 22px 22px !important;
    border-radius: 22px !important;
  }
  .site-mode #langOverlay .lang-modal-icon{
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }
  .site-mode #langOverlay .lang-modal-icon svg{width: 24px; height: 24px}
  .site-mode #langOverlay .lang-modal-title{font-size: 20px !important}
  .site-mode #langOverlay .lang-modal-sub{font-size: 13px}

  /* Background stars are heavy on slow phones — disable the drift animation */
  .site-mode body::before{animation: none}
}

/* ════════════════════════════════════════════════════════════════════════════
   TOUCH DEVICES — kill all hover-state visual changes
   Matches: touch-only devices OR any viewport < 900px (so iPad-with-mouse,
   browser-narrow on desktop, etc. all get the static treatment).
   ════════════════════════════════════════════════════════════════════════════ */
@media (hover: none), (max-width: 899px){
  /* Disable transitions on cards entirely — no border/shadow/background fade,
     no transform interpolation, completely static on tap. */
  .site-mode .mc,
  .site-mode .mc::before,
  .site-mode .mc .mc-media,
  .site-mode #sc-balance .pkg,
  .site-mode #sc-balance .pkg::before,
  .site-mode #sc-balance .pm,
  .site-mode #sc-balance .pm::before,
  .site-mode #sc-balance .pm .pm-i,
  .site-mode #sc-generations .gh-card,
  .site-mode #sc-generations .gh-card .gh-card-media,
  .site-mode #sc-generations .gh-card .gh-card-media::before,
  .site-mode #sc-generations .gh-card .gh-play-btn,
  .site-mode #sc-profile .prof-stat,
  .site-mode #sc-profile .prof-stat::before,
  .site-mode #sc-profile .prof-stat-icon,
  .site-mode #sc-profile .prof-set-row,
  .site-mode #sc-profile .prof-set-icon,
  .site-mode #sc-profile .prof-set-action svg,
  .site-mode #sc-profile .prof-promo-btn,
  .site-mode #sc-profile .prof-promo-btn svg,
  .site-mode #sc-rules .rules-section,
  .site-mode #sc-rules .rules-section::before,
  .site-mode #sc-rules .rules-num,
  .site-mode #sc-rules .rules-back,
  .site-mode #sc-rules .rules-back svg,
  .site-mode #sc-referral .sd-card,
  .site-mode #sc-referral .sd-card::before,
  .site-mode #sc-referral .ref-link-row,
  .site-mode #sc-referral .ref-copy-icon,
  .site-mode #sc-referral .back-row,
  .site-mode #sc-generate .uz,
  .site-mode #sc-generate .uz::before,
  .site-mode #sc-generate .uz-icon,
  .site-mode #sc-generate .cat-card,
  .site-mode #sc-generate .cat-card::before,
  .site-mode #sc-generate .cat-bg,
  .site-mode #sc-generate .back-row,
  .site-mode #shareOverlay .share-target,
  .site-mode #shareOverlay .share-target::before,
  .site-mode #shareOverlay .share-icon,
  .site-mode #langOverlay .lang-option,
  .site-mode #langOverlay .lang-option::before,
  .site-mode #filtersOverlay .filter-chip,
  .site-mode .feed-pill,
  .site-mode .feed-tab,
  .site-mode .nav-link,
  .site-mode .nav-btn{
    transition: none !important;
  }
  /* Reset transform on any directly-hovered element */
  .site-mode *:hover{
    transform: none !important;
  }
  /* Block 1 — cards that "lift"/"glow" on hover.
     Reset only border-color back to the default value. DO NOT touch background
     (inheriting transparent from parent makes them turn black on tap). */
  .site-mode .mc:hover,
  .site-mode #sc-balance .pkg:hover,
  .site-mode #sc-balance .pm:hover,
  .site-mode #sc-profile .prof-stat:hover,
  .site-mode #sc-rules .rules-section:hover,
  .site-mode #sc-referral .sd-card:hover,
  .site-mode #sc-generate .cat-card:hover,
  .site-mode .feature-card:hover,
  .site-mode #sc-referral .ref-link-row:hover,
  .site-mode #sc-referral .ref-copy-icon:hover,
  .site-mode .feed-tab:hover{
    border-color: rgba(255, 255, 255, 0.06) !important;
  }
  /* Generations card has nested .gh-card-media — reset its border + shadow */
  .site-mode #sc-generations .gh-card:hover .gh-card-media{
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5) !important;
  }
  /* Upload zone has dashed border — keep its default color */
  .site-mode #sc-generate .uz:hover{
    border-color: rgba(220, 20, 60, 0.3) !important;
  }
  /* Rules-num: keep the default crimson-tinted state on touch */
  .site-mode #sc-rules .rules-section:hover .rules-num{
    background:
      radial-gradient(60% 60% at 50% 50%, rgba(220, 20, 60, 0.25) 0%, transparent 70%),
      linear-gradient(180deg, rgba(220, 20, 60, 0.18) 0%, rgba(220, 20, 60, 0.04) 100%) !important;
    border-color: rgba(220, 20, 60, 0.32) !important;
    color: #ff8aa3 !important;
  }
  /* Pay-method icon: don't change bg/border on hover */
  .site-mode #sc-balance .pm:hover .pm-i{
    background: rgba(220, 20, 60, 0.12) !important;
    border-color: rgba(220, 20, 60, 0.2) !important;
  }

  /* ── :active state — fires on every tap. Without this reset cards still
     visibly flash/scale on touch even though :hover is suppressed. ─────── */
  .site-mode .mc:active,
  .site-mode #sc-balance .pkg:active,
  .site-mode #sc-balance .pm:active,
  .site-mode #sc-balance .bal-continue:active,
  .site-mode #sc-profile .prof-set-row:active,
  .site-mode #sc-profile .prof-stat:active,
  .site-mode #sc-rules .rules-section:active,
  .site-mode #sc-rules .rules-back:active,
  .site-mode #sc-referral .sd-card:active,
  .site-mode #sc-referral .ref-link-row:active,
  .site-mode #sc-referral .ref-copy-icon:active,
  .site-mode #sc-referral .back-row:active,
  .site-mode #sc-referral .ref-withdraw-btn:active,
  .site-mode #sc-generate .uz:active,
  .site-mode #sc-generate .cat-card:active,
  .site-mode #sc-generate .gen-btn:active,
  .site-mode #sc-generate .back-row:active,
  .site-mode #sc-generate .preview-close:active,
  .site-mode .feed-tab:active,
  .site-mode .feed-pill:active,
  .site-mode #sc-generations .gh-card:active,
  .site-mode #sc-generations .gh-filter:active,
  .site-mode #langOverlay .lang-option:active,
  .site-mode #shareOverlay .share-target:active,
  .site-mode #filtersOverlay .filter-chip:active,
  .site-mode #filtersOverlay .filters-apply:active,
  .site-mode #filtersOverlay .filters-reset:active,
  .site-mode .top-avatar-btn:active,
  .site-mode .bal-badge:active,
  .site-mode .nav-btn:active,
  .site-mode .nav-link:active,
  .site-mode .nav-login:active,
  .site-mode .site-login-btn:active,
  .site-mode .site-credits:active,
  .site-mode .qa:active,
  .site-mode .btn-p:active,
  .site-mode .btn-s:active,
  .site-mode .vmc:active,
  .site-mode .oi:active,
  .site-mode .oli:active,
  .site-mode .sub-ch:active,
  .site-mode #sc-profile .prof-promo-btn:active,
  .site-mode #sc-profile .prof-promo-clear:active{
    transform: none !important;
    opacity: 1 !important;
  }
  /* Restore the specific backgrounds/borders changed by :active rules */
  .site-mode #sc-profile .prof-set-row:active{
    background: transparent !important;
  }
  .site-mode #sc-referral .ref-link-row:active{
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
  .site-mode #sc-referral .ref-withdraw-btn:active{
    background: rgba(220, 20, 60, 0.05) !important;
  }
  .site-mode #sc-generate .uz:active{
    background:
      radial-gradient(70% 80% at 50% 0%, rgba(220, 20, 60, 0.08) 0%, transparent 70%),
      linear-gradient(180deg, rgba(220, 20, 60, 0.04) 0%, rgba(220, 20, 60, 0.01) 100%) !important;
  }
  /* Filter chips & feed pills: keep their default look on touch (active state
     still wins via separate selector below). */
  .site-mode .feed-pill:not(.active),
  .site-mode #sc-generations .gh-filter:not(.on),
  .site-mode #filtersOverlay .filter-chip:not(.active){
    background: rgba(18, 18, 21, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: rgba(238, 239, 241, 0.65) !important;
  }
  /* Active pills stay highlighted */
  .site-mode .feed-pill.active,
  .site-mode #sc-generations .gh-filter.on,
  .site-mode #filtersOverlay .filter-chip.active{
    background: linear-gradient(180deg, #4a1320 0%, #6e0d22 100%) !important;
    border-color: rgba(255, 80, 110, 0.55) !important;
    color: #fff !important;
  }
  /* Glow/halo overlays don't fade in on touch — keep them off */
  .site-mode .mc:hover::before,
  .site-mode #sc-balance .pkg:hover::before,
  .site-mode #sc-balance .pm:hover::before,
  .site-mode #sc-generations .gh-card:hover .gh-card-media::before,
  .site-mode #sc-profile .prof-stat:hover::before,
  .site-mode #sc-rules .rules-section:hover::before,
  .site-mode #sc-referral .sd-card:hover::before,
  .site-mode #shareOverlay .share-target:hover::before,
  .site-mode #langOverlay .lang-option:hover::before,
  .site-mode #filtersOverlay .filter-chip:hover::before,
  .site-mode #sc-generate .uz:hover::before,
  .site-mode #sc-generate .cat-card:hover::before{
    opacity: 0 !important;
  }
  /* Media zoom on parent hover — disable child transforms too */
  .site-mode .mc:hover .mc-media,
  .site-mode #sc-generations .gh-card:hover .gh-card-media img,
  .site-mode #sc-generations .gh-card:hover .gh-card-media video,
  .site-mode #sc-generate .cat-card:hover .cat-bg,
  .site-mode #sc-balance .pm:hover .pm-i,
  .site-mode #sc-generate .uz:hover .uz-icon,
  .site-mode #sc-profile .prof-set-row:hover .prof-set-icon,
  .site-mode #sc-profile .prof-stat:hover .prof-stat-icon,
  .site-mode #shareOverlay .share-target:hover .share-icon,
  .site-mode #sc-rules .rules-section:hover .rules-num,
  .site-mode #sc-generations .gh-card:hover .gh-play-btn,
  .site-mode #sc-rules .rules-back:hover svg,
  .site-mode #sc-generate .back-row:hover .t-back,
  .site-mode #sc-profile .prof-promo-btn:hover svg,
  .site-mode .nav-login:hover svg,
  .site-mode .site-login-btn:hover svg{
    transform: none !important;
  }
  /* Background tints on hover — reset to default so cards don't look "selected".
     Lock padding to the mobile default (20px) — without this, the desktop rule
     padding-left: 30px wins on tap and the row visibly jumps. */
  .site-mode #sc-profile .prof-set-row,
  .site-mode #sc-profile .prof-set-row:hover,
  .site-mode #sc-profile .prof-set-row:active,
  .site-mode #sc-profile .prof-set-row:focus,
  .site-mode #sc-profile .prof-set-row:focus-visible{
    background: transparent !important;
    padding-left: 20px !important;
  }
  .site-mode #sc-profile .prof-set-row:hover .prof-set-action svg,
  .site-mode #sc-profile .prof-set-row:active .prof-set-action svg{
    transform: none !important;
  }
  .site-mode #sc-profile .prof-set-row:hover .prof-set-icon,
  .site-mode #sc-profile .prof-set-row:active .prof-set-icon{
    transform: none !important;
    scale: 1 !important;
  }
  .site-mode .feed-pill:hover{
    background: rgba(18, 18, 21, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: rgba(238, 239, 241, 0.65) !important;
  }
  .site-mode .feed-pill.active:hover{
    background: linear-gradient(180deg, #4a1320 0%, #6e0d22 100%) !important;
    border-color: rgba(255, 80, 110, 0.55) !important;
    color: #fff !important;
  }
  .site-mode #sc-generations .gh-filter:hover{
    background: rgba(18, 18, 21, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: rgba(238, 239, 241, 0.65) !important;
  }
  .site-mode #sc-generations .gh-filter.on:hover{
    background: linear-gradient(180deg, #4a1320 0%, #6e0d22 100%) !important;
    border-color: rgba(255, 80, 110, 0.55) !important;
    color: #fff !important;
  }
  /* Buttons in modals — don't change visuals on tap-hover */
  .site-mode #shareOverlay .share-target:hover{
    background: rgba(18, 18, 21, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
  }
  .site-mode #langOverlay .lang-option:hover{
    background: rgba(18, 18, 21, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }
  .site-mode #filtersOverlay .filter-chip:hover{
    background: rgba(18, 18, 21, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(238, 239, 241, 0.65) !important;
  }
  .site-mode #filtersOverlay .filter-chip.active:hover{
    background: linear-gradient(180deg, #4a1320 0%, #6e0d22 100%) !important;
    border-color: rgba(255, 80, 110, 0.55) !important;
    color: #fff !important;
  }
}

/* Larger phones / small tablets (601-899px) — moderate adjustments */
@media (min-width: 601px) and (max-width: 899px){
  .site-mode #sc-profile .prof-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .site-mode #sc-generations .gh-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   FEED TOOLBAR ON MOBILE — tabs (segmented pill) left + filter button right
   Both have matching height (44px) and the same dark pill aesthetic.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 899px){
  .site-mode .feed-toolbar{
    display: flex !important;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px !important;
    height: auto;
    animation: siteToolbarIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  /* Segmented control: tabs container itself is the pill, inner tabs are segments */
  .site-mode .feed-toolbar .feed-tabs{
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0 !important;
    height: 44px;
    display: flex;
    gap: 0 !important;
    padding: 3px;
    background: rgba(18,18,21,0.7);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    align-items: stretch;
  }
  .site-mode .feed-toolbar .feed-tab{
    flex: 1 1 0;
    min-width: 0 !important;
    height: auto;
    padding: 0 12px !important;
    font-size: 13px;
    font-weight: 600;
    border: none !important;
    background: transparent !important;
    color: rgba(238,239,241,0.55);
    border-radius: 10px;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease;
  }
  .site-mode .feed-toolbar .feed-tab.active{
    color: #fff !important;
    background: linear-gradient(180deg, #4a1320 0%, #6e0d22 100%) !important;
    box-shadow:
      inset 0 -2px 3px rgba(255,255,255,0.18),
      0 3px 10px -2px rgba(220, 20, 60, 0.5) !important;
  }

  /* Filter button — matching pill, same 44px height */
  .site-mode .feed-toolbar .site-search-row{
    display: flex !important;
    flex: 0 0 auto;
    margin-bottom: 0;
    gap: 0;
    align-items: stretch;
    height: 44px;
  }
  .site-mode .feed-toolbar .site-search-input-wrap{display: none}
  .site-mode .feed-toolbar .site-filters-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 14px;
    background: rgba(18, 18, 21, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #eeeff1;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
  }
  .site-mode .feed-toolbar .site-filters-btn:hover,
  .site-mode .feed-toolbar .site-filters-btn:active{
    border-color: rgba(220, 20, 60, 0.4);
    background: rgba(220, 20, 60, 0.08);
    color: #fff;
  }
  .site-mode .feed-toolbar .site-filters-btn svg{
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }
  .site-mode .feed-toolbar .site-filters-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ac);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    margin-left: 2px;
  }
  /* Honor [hidden] — without this our display:inline-flex hides the attr */
  .site-mode .feed-toolbar .site-filters-badge[hidden]{
    display: none !important;
  }

  /* Feed-filters pills row (Все/Фото/Видео + 3 categories) */
  .site-mode .feed-filters{
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding: 2px 2px;
  }
  .site-mode .feed-filters::-webkit-scrollbar{display: none}
  .site-mode .feed-pill{
    padding: 8px 16px !important;
    font-size: 12px !important;
    flex-shrink: 0;
    border-radius: 999px !important;
  }
}
/* Very narrow screens — collapse the filter button to icon-only */
@media (max-width: 420px){
  .site-mode .feed-toolbar .site-filters-btn{
    padding: 0;
    width: 44px;
    flex-shrink: 0;
  }
  .site-mode .feed-toolbar .site-filters-btn span:not(.site-filters-badge){
    display: none;
  }
}
/* end of universal landing aesthetic block */