:root{
  --bg: #090a10;
  --surface: #121422;
  --surface-2: #1a1d30;
  --text: #f0f3fe;
  --muted: #8e96b0;
  --accent: #00f2fe;
  --accent-2: #4facfe;
  --gold: #00f2fe;
  --wine: #7928ca;
  --key: #10b981;
  --danger: #ff4d4d;
  --warn: #f59e0b;
  --border: rgba(255,255,255,0.08);
  --gold-line: rgba(0, 242, 254, 0.30);
  --radius-lg: 18px;
  --radius-md: 14px;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
  position:relative;
}

/* Luxury Glowing Background */
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%, rgba(0, 242, 254, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(121, 40, 202, 0.12) 0%, transparent 50%),
    #090a10;
}
main, .tabbar, .toast, .modal-overlay{ position:relative; z-index:1; }

.header{ padding: 22px 20px 8px; display:flex; align-items:center; justify-content:space-between; gap:13px; }
.header-left{ display:flex; align-items:center; gap:13px; min-width:0; }
.header h1{ margin:0; font-size:22px; font-weight:700; letter-spacing:0; font-family:'Cinzel',serif; }
.subtitle{ margin:4px 0 0; color:var(--muted); font-size:13px; }
.header-icon{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  background:linear-gradient(150deg, var(--accent), var(--accent-2)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(201,147,46,0.32), inset 0 1px 0 rgba(255,255,255,0.28);
  border:1px solid rgba(255,255,255,0.12);
}
.header-icon svg{ width:21px; height:21px; }

/* ---- Language switch ---- */
.lang-switch{
  flex-shrink:0;
  background:rgba(240,195,109,0.10); border:1px solid var(--gold-line); color:var(--gold);
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; letter-spacing:.05em;
  padding:7px 11px; border-radius:999px; cursor:pointer;
  transition:background .15s ease, transform .12s ease;
}
.lang-switch:active{ transform:scale(0.94); }
.lang-switch:hover{ background:rgba(240,195,109,0.18); }
.hero-block .lang-switch{
  position:absolute; top:14px; right:14px; z-index:3;
}
.page-hero .lang-switch{
  position:absolute; top:14px; right:14px; z-index:3;
}

/* ---- Art Deco frame (double border + diamond corners) ---- */
.deco-frame{
  position:relative;
  border:1px solid var(--gold-line) !important;
}
.deco-frame::before{
  content:''; position:absolute; inset:5px; border:1px solid var(--gold-line);
  border-radius:16px; pointer-events:none;
}
.deco-corner{
  position:absolute; width:7px; height:7px; background:var(--gold);
  transform:rotate(45deg); z-index:2; opacity:.85;
}
.deco-corner.tl{ top:-4px; left:22px; }
.deco-corner.tr{ top:-4px; right:22px; }

.deco-divider{ display:flex; align-items:center; gap:8px; margin:10px 0 2px; width:100%; max-width:220px; }
.deco-divider span{ flex:1; height:1px; background:var(--gold-line); }
.deco-divider i{ font-style:normal; color:var(--gold); font-size:9px; }

/* ---- Lightweight framed block — used across product/order/info cards so
   every surface reads as "collected" under the same badge language, without
   the full double-line treatment reserved for hero/balance/checker. ---- */
.framed{
  position:relative;
  border:1px solid var(--gold-line);
  box-shadow:inset 0 1px 0 rgba(240,195,109,0.08);
}
.framed::after{
  content:''; position:absolute; top:9px; left:9px; width:5px; height:5px;
  border-top:1px solid var(--gold-line); border-left:1px solid var(--gold-line);
  pointer-events:none;
}

/* ---- Giveaway Card (Розыгрыш) ---- */
.giveaway-card {
  margin: 16px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(30,22,15,0.95), rgba(15,12,18,0.98));
  border: 1px solid rgba(240, 195, 109, 0.45) !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(240,195,109,0.25);
  position: relative;
  overflow: hidden;
}
.giveaway-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(240,195,109,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.giveaway-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.giveaway-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(240, 195, 109, 0.15);
  border: 1px solid rgba(240, 195, 109, 0.4);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-glow 1.5s infinite alternate;
}
@keyframes pulse-glow {
  0% { opacity: 0.4; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.2); }
}
.giveaway-timer {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.giveaway-title {
  margin: 6px 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  font-family: 'Cinzel', serif, system-ui;
  line-height: 1.3;
}
.giveaway-desc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.giveaway-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.giveaway-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}
.giveaway-stat-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.giveaway-stat-val {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
}
.giveaway-stat-val.gold {
  color: var(--gold);
}
.giveaway-join-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0d0e14;
  font-weight: 800;
  font-size: 14px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(240, 195, 109, 0.35);
  transition: all 0.2s ease;
}
.giveaway-join-btn:active {
  transform: scale(0.97);
}
.giveaway-join-btn.joined {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.giveaway-join-btn.completed {
  background: rgba(255,255,255,0.1);
  color: var(--muted);
  box-shadow: none;
}

/* ---- Hero block (Products tab) ---- */
.hero-block{
  position:relative; overflow:hidden; text-align:center;
  margin:16px 16px 6px; padding:30px 20px 22px;
  background:
    radial-gradient(120% 100% at 50% -20%, rgba(240,195,109,0.14), transparent 60%),
    linear-gradient(165deg, rgba(201,147,46,0.10), rgba(255,255,255,0.015));
  border-radius:20px;
}
.hero-sunburst{
  position:absolute; width:340px; height:340px; border-radius:50%;
  left:50%; top:-40px; transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg, rgba(240,195,109,0.10) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask-image:radial-gradient(circle, #000 45%, transparent 72%);
  mask-image:radial-gradient(circle, #000 45%, transparent 72%);
  pointer-events:none; animation:sunburstSpin 90s linear infinite;
}
@keyframes sunburstSpin{ from{ transform:translateX(-50%) rotate(0deg);} to{ transform:translateX(-50%) rotate(360deg);} }
/* Logo artwork is a square art-deco badge (not a circular crop) — keep it whole,
   framed as a rounded square instead of forcing it into a circle. */
.hero-logo{
  position:relative; z-index:1;
  width:92px; height:92px; border-radius:18px; display:block; margin:0 auto 14px;
  object-fit:cover; border:1px solid var(--gold-line);
  box-shadow:0 10px 26px rgba(0,0,0,0.45), 0 0 0 1px rgba(240,195,109,0.08);
}
.hero-block h1{
  position:relative; z-index:1; margin:0; font-size:23px; font-weight:700; letter-spacing:0.06em;
  font-family:'Cinzel',serif;
  background:linear-gradient(120deg, #fff 30%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-block .deco-divider{ position:relative; z-index:1; margin-left:auto; margin-right:auto; }
.hero-sub{ position:relative; z-index:1; margin:8px 0 0; color:var(--muted); font-size:12.5px; letter-spacing:.02em; }
.hero-stats{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; }
.stat-item{ display:flex; flex-direction:column; gap:2px; align-items:center; }
.stat-item b{ font-family:'Cinzel', serif; font-size:19px; font-weight:700; color:var(--gold); line-height:1; }
.stat-item span{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.stat-divider{ width:1px; height:24px; background:var(--gold-line); }

/* ---- Page hero (Profile / Checker / About headers) ----
   Same idea as the main hero-block: the artwork is shown at a real size where
   its detail actually reads, instead of being crushed into a 44px icon. */
.page-hero{
  position:relative; overflow:hidden; text-align:center;
  margin:16px 16px 6px; padding:22px 20px 20px;
  background:
    radial-gradient(120% 100% at 50% -20%, rgba(240,195,109,0.12), transparent 60%),
    linear-gradient(165deg, rgba(201,147,46,0.08), rgba(255,255,255,0.015));
  border-radius:20px;
}
.page-hero-badge{
  width:76px; height:76px; border-radius:16px; display:block; margin:0 auto 12px;
  object-fit:cover; border:1px solid var(--gold-line);
  box-shadow:0 10px 22px rgba(0,0,0,0.42), 0 0 0 1px rgba(240,195,109,0.08);
}
.page-hero h1{ position:relative; z-index:1; margin:0; font-size:20px; font-weight:700; font-family:'Cinzel',serif; }
.page-hero .subtitle{ position:relative; z-index:1; margin:5px 0 0; }

/* ---- Section label ---- */
.section-label{
  padding:18px 20px 6px; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700;
}

/* ---- Profile mini stats ---- */
.stat-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:4px 16px 0; }
.mini-stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px;
}
.mini-stat-label{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.mini-stat-value{ font-family:'JetBrains Mono', monospace; font-size:18px; font-weight:700; margin-top:5px; }
.mini-stat-value.accent{ color:var(--accent-2); }
.mini-stat-value.pos{ color:var(--key); }

/* ---- Checker mini hint ---- */
.mini-hint-card{
  flex-direction:row; align-items:center; gap:12px; padding:15px 18px;
}
.mini-hint-icon{ font-size:20px; flex-shrink:0; }
.mini-hint-card p{ margin:0; color:var(--muted); font-size:12.5px; line-height:1.5; }

/* ---- Info card ---- */
.info-card{ position:relative; }

/* ---- About page: quick facts, replaces what used to be a bare/empty spot
   under the intro paragraph with actual content. ---- */
.feature-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  margin:0 16px 4px;
}
.feature-item{
  background:var(--surface); border:1px solid var(--gold-line);
  box-shadow:inset 0 1px 0 rgba(240,195,109,0.08);
  border-radius:var(--radius-md);
  padding:14px 8px 12px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.feature-icon{
  width:34px; height:34px; border-radius:10px; margin-bottom:2px;
  background:linear-gradient(150deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:0 6px 14px rgba(201,147,46,0.28);
}
.feature-title{ font-weight:700; font-size:12.5px; }
.feature-sub{ color:var(--muted); font-size:10.5px; line-height:1.35; }

/* ---- Payment trust badges ---- */
.payment-badges{ display:flex; flex-direction:column; gap:10px; padding:6px 16px 14px; }
.payment-badge{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--gold-line); border-radius:var(--radius-md); padding:13px 15px;
  box-shadow:inset 0 1px 0 rgba(240,195,109,0.08);
}
.payment-badge-icon{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px;
}
.payment-badge-name{ font-weight:600; font-size:13.5px; }
.payment-badge-sub{ color:var(--muted); font-size:12px; margin-top:1px; }

.view{ display:none; padding-bottom:96px; }
.view.active{ display:block; animation: viewIn .3s cubic-bezier(.2,.8,.2,1); }
@keyframes viewIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

.stack{ display:flex; flex-direction:column; gap:12px; padding:14px 16px; }
.stack > *{ animation: cardIn .32s cubic-bezier(.2,.8,.2,1) backwards; }
.stack > *:nth-child(1){ animation-delay:.02s; }
.stack > *:nth-child(2){ animation-delay:.06s; }
.stack > *:nth-child(3){ animation-delay:.10s; }
.stack > *:nth-child(4){ animation-delay:.14s; }
.stack > *:nth-child(n+5){ animation-delay:.16s; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }

/* ---- Category chips ----
   Note: overflow-x:auto on this row implicitly makes overflow-y auto as well,
   which was clipping the glow (box-shadow) under the active chip. Extra
   vertical padding keeps the shadow inside the scrollable box so it renders
   in full instead of getting cut off. */
.chips-row{
  display:flex; gap:8px; overflow-x:auto; padding:8px 16px 20px;
  scrollbar-width:none;
}
.chips-row::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:500;
  background:var(--surface); border:1px solid var(--gold-line); color:var(--muted);
  cursor:pointer; white-space:nowrap; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.chip:active{ transform:scale(0.95); }
.chip.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color:transparent; color:#fff;
  box-shadow:0 6px 16px rgba(201,147,46,0.35);
}

.chips-row.sub{ padding-top:4px; padding-left:26px; padding-bottom:16px; margin-top:-6px; display:none; }
.chip.sub{ padding:6px 13px; font-size:12px; background:transparent; border-style:dashed; }
.chip.sub.active{ border-style:solid; }

/* ---- Catalog toolbar ---- */
.catalog-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px 8px; margin-top:-8px;
}
.catalog-count{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--muted); }
.view-toggle{
  display:flex; gap:3px; padding:3px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border);
}
.view-toggle-btn{
  border:none; background:transparent; color:var(--muted);
  width:30px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .16s ease, color .16s ease;
}
.view-toggle-btn svg{ width:16px; height:16px; }
.view-toggle-btn.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;
}

/* ---- Product card (comfortable, default) ---- */
.product-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border:1px solid var(--gold-line);
  box-shadow:inset 0 1px 0 rgba(240,195,109,0.08);
  border-radius:var(--radius-lg);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .18s ease, border-color .18s ease;
}
.product-card:active{ transform:scale(0.985); }
.product-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.product-name{ font-weight:600; font-size:16.5px; letter-spacing:0; font-family:'Cinzel',serif; }
.product-desc{ color:var(--muted); font-size:13px; line-height:1.45; margin-top:4px; }

.price-wrap{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.price-old{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--muted);
  text-decoration:line-through; opacity:.8;
}
.price-chip{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:14px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(201,147,46,0.28);
}
.price-chip.discounted{ background:linear-gradient(135deg, var(--key), #7A9450); box-shadow:0 6px 14px rgba(156,184,107,0.28); }

.product-bottom{ display:flex; justify-content:space-between; align-items:center; }
.stock{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.stock.low{ color:var(--danger); }
.stock.low::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--danger);
  animation:stockPulse 1.4s ease-in-out infinite;
}
@keyframes stockPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(0.7); } }

.buy-btn{
  border:none; border-radius:10px; padding:9px 18px;
  background:var(--accent); color:#fff; font-weight:600; font-size:14px;
  cursor:pointer; transition:transform .12s ease, box-shadow .18s ease;
  box-shadow:0 6px 16px rgba(201,147,46,0.3);
}
.buy-btn.full{ width:100%; padding:12px 18px; }
.buy-btn:disabled{ background:var(--surface-2); color:var(--muted); box-shadow:none; }
.buy-btn:active{ transform: scale(0.96); }

/* ---- Product row (compact view) ---- */
.stack.compact{ gap:8px; }
.product-row{
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transition:transform .18s ease, border-color .18s ease;
}
.product-row:active{ transform:scale(0.985); }
.product-row-info{ min-width:0; flex:1; }
.product-row-name{
  font-weight:600; font-size:14px; font-family:'Cinzel',serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.product-row-meta{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.product-row-stock{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:4px; }
.product-row-stock.low{ color:var(--danger); }
.product-row-stock.low::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--danger);
  animation:stockPulse 1.4s ease-in-out infinite;
}
.product-row-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.product-row-price{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:13px; color:var(--accent);
  white-space:nowrap;
}
.buy-btn.row-btn{ padding:7px 12px; font-size:12.5px; border-radius:8px; }

/* ---- Skeleton loading ---- */
.skeleton-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; display:flex; flex-direction:column; gap:10px; overflow:hidden; position:relative;
}
.skeleton-line{
  height:12px; border-radius:6px;
  background:linear-gradient(90deg, var(--surface-2) 25%, rgba(255,255,255,0.08) 37%, var(--surface-2) 63%);
  background-size:400% 100%;
  animation:skeletonShine 1.4s ease infinite;
}
.skeleton-line.title{ width:55%; height:15px; }
.skeleton-line.desc{ width:80%; }
.skeleton-line.price{ width:70px; height:24px; border-radius:10px; }
.skeleton-row{ display:flex; justify-content:space-between; align-items:center; }
@keyframes skeletonShine{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }

/* ---- Balance card ---- */
.balance-card{
  position:relative; overflow:hidden;
  margin:14px 16px 4px;
  background:linear-gradient(160deg, rgba(201,147,46,0.16), rgba(255,255,255,0.02));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 18px 16px;
}
.balance-orb{
  position:absolute; width:180px; height:180px; border-radius:50%; right:-60px; top:-80px;
  background:radial-gradient(circle, rgba(156,184,107,0.28), transparent 68%);
  filter:blur(6px); pointer-events:none;
  animation:orbPulse 6s ease-in-out infinite;
}
@keyframes orbPulse{ 0%,100%{ opacity:.65; transform:scale(1);} 50%{ opacity:1; transform:scale(1.08);} }
.balance-top{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; }
.balance-label{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.balance-value{ font-family:'JetBrains Mono', monospace; font-size:24px; font-weight:700; color:var(--key); margin-top:3px; }
.topup-btn{
  border:none; border-radius:10px; padding:10px 16px;
  background:var(--accent); color:#fff; font-weight:600; font-size:13px; cursor:pointer;
  box-shadow:0 6px 16px rgba(201,147,46,0.3);
}
.topup-btn:active{ transform: scale(0.97); }
.discount-pill{
  position:relative; z-index:1; margin-top:12px; display:inline-block;
  background:rgba(156,184,107,0.14); color:var(--key); border:1px solid rgba(156,184,107,0.3);
  font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px;
}

.amount-input{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; color:var(--text); font-size:16px; font-family:'JetBrains Mono', monospace;
  margin-bottom:4px;
}
.amount-input:focus{ outline:none; border-color:var(--accent); }
.modal-text{ color:var(--muted); font-size:13px; text-align:center; margin:0 0 6px; }

/* ---- Order / key card ---- */
.order-card{
  background:var(--surface);
  border:1px solid var(--gold-line);
  box-shadow:inset 0 1px 0 rgba(240,195,109,0.08);
  border-radius:var(--radius-lg);
  padding:16px;
}
.order-head{ display:flex; justify-content:space-between; align-items:center; }
.order-product{ font-weight:600; font-size:15.5px; font-family:'Cinzel',serif; }
.order-status{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 8px; border-radius:8px; }
.order-status.paid{ color:var(--key); background:rgba(156,184,107,0.12); }
.order-status.pending{ color:var(--warn); background:rgba(255,195,105,0.12); }
.order-status.cancelled{ color:var(--danger); background:rgba(226,105,75,0.12); }

.key-box{
  margin-top:12px;
  font-family:'JetBrains Mono', monospace;
  background:repeating-linear-gradient(90deg, transparent 0 8px, var(--border) 8px 9px);
  background-color:var(--surface-2);
  border:1px dashed var(--border);
  border-radius:12px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:13px;
  word-break:break-all;
}
.copy-btn{
  flex-shrink:0;
  border:none; background:var(--accent); color:#fff;
  border-radius:8px; padding:6px 10px; font-size:12px; font-weight:600; cursor:pointer;
}

.order-date{ margin-top:8px; color:var(--muted); font-size:11px; font-family:'JetBrains Mono', monospace; }

/* ---- Checker ---- */
.checker-card{ align-items:center; text-align:center; gap:14px; padding:28px 20px; }
.checker-icon{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;
  box-shadow:0 10px 24px rgba(201,147,46,0.35);
  transition:transform .3s ease;
}
.checker-icon.lock{ background:linear-gradient(135deg, var(--danger), #F2996E); box-shadow:0 10px 24px rgba(226,105,75,0.3); }
.checker-icon svg{ width:26px; height:26px; }
.checker-icon.checking{ animation:checkerSpin 1s linear infinite; }
@keyframes checkerSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

.checker-lock-title{ font-weight:700; font-size:17px; }
.checker-lock-text{ color:var(--muted); font-size:13px; line-height:1.5; margin:0; }
.checker-price{
  font-family:'JetBrains Mono', monospace; font-size:30px; font-weight:700;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.checker-segments{ display:flex; flex-direction:column; gap:10px; width:100%; }
.checker-seg{
  text-align:center; background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:13px 6px; color:var(--text); font-size:17px; font-family:'JetBrains Mono', monospace; letter-spacing:2px;
  width:100%;
}
.checker-seg:focus{ outline:none; border-color:var(--accent); }
.checker-segments-row{ display:flex; gap:8px; }
.checker-seg-small{ flex:1; min-width:0; }

.checker-input{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:13px 14px; color:var(--text); font-size:15px; font-family:'JetBrains Mono', monospace; text-align:center;
}
.checker-input:focus{ outline:none; border-color:var(--accent); }
.checker-result{
  width:100%; min-height:0; border-radius:12px; font-weight:700; font-size:14px;
  overflow:hidden; max-height:0; opacity:0; transition:max-height .3s ease, opacity .3s ease, padding .3s ease;
}
.checker-result.show{ max-height:80px; opacity:1; padding:13px; }
.checker-result.valid{ background:rgba(156,184,107,0.14); color:var(--key); border:1px solid rgba(156,184,107,0.3); }
.checker-result.invalid{ background:rgba(226,105,75,0.14); color:var(--danger); border:1px solid rgba(226,105,75,0.3); }

/* ---- Info ---- */
.info-card{
  margin:14px 16px; background:var(--surface); border:1px solid var(--gold-line);
  box-shadow:inset 0 1px 0 rgba(240,195,109,0.08);
  border-radius:var(--radius-lg); padding:18px;
}
.info-card p{ line-height:1.6; color:var(--text); font-size:14px; white-space:pre-line; margin:0; }
.support-link{ display:inline-block; margin-top:12px; color:var(--accent-2); font-weight:600; text-decoration:none; font-size:14px; }
.hint-card{ background:linear-gradient(160deg, rgba(201,147,46,0.12), rgba(255,255,255,0.02)); }
.hint-title{ font-weight:700; font-size:14.5px; margin-bottom:6px; }
.hint-text{ color:var(--muted) !important; font-size:13px !important; }

/* ---- Tabbar ---- */
.tabbar{
  position:fixed; bottom:0; left:0; right:0;
  display:flex;
  background:rgba(32,24,17,0.88);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index:10;
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; color:var(--muted); font-size:10.5px; font-family:inherit;
  padding:6px 0; cursor:pointer; transition:color .15s ease, transform .15s ease;
}
.tab svg{ width:22px; height:22px; }
.tab.active{ color:var(--accent-2); transform:translateY(-1px); }
.tab:active{ transform:scale(0.92); }

/* ---- Modal ---- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  display:none; align-items:flex-end; justify-content:center; z-index:20;
}
.modal-overlay.active{ display:flex; }
.modal{
  width:100%; background:var(--surface); border-radius:22px 22px 0 0;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:10px;
  animation: slideup .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideup{ from{ transform:translateY(30px); opacity:0;} to{ transform:none; opacity:1;} }
.modal-title{ font-weight:700; font-size:16px; margin-bottom:6px; text-align:center; }
.pay-option{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; cursor:pointer; color:var(--text); transition:border-color .15s ease;
}
.pay-option:active{ transform:scale(0.98); }
.pay-option-name{ font-weight:600; font-size:14px; }
.pay-option-hint{ font-size:12px; color:var(--muted); }
.modal-cancel{
  margin-top:6px; background:none; border:none; color:var(--muted);
  font-size:14px; padding:10px; cursor:pointer;
}

/* ---- Toast ---- */
.toast{
  position:fixed; top:16px; left:50%; transform:translateX(-50%) translateY(-30px);
  background:rgba(42,32,22,0.94); backdrop-filter:blur(10px); color:var(--text); border:1px solid var(--border);
  padding:11px 18px; border-radius:12px; font-size:13px; z-index:30;
  opacity:0; transition: all .28s cubic-bezier(.2,.8,.2,1); pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.empty{ text-align:center; color:var(--muted); font-size:13px; padding:40px 20px; }
.empty-state{
  text-align:center; color:var(--muted); font-size:13px;
  padding:48px 24px; display:flex; flex-direction:column; align-items:center; gap:10px;
  animation: cardIn .32s cubic-bezier(.2,.8,.2,1) backwards;
}
.empty-state-icon{
  font-size:34px; width:64px; height:64px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  opacity:.9;
}
.empty-state p{ margin:0; max-width:220px; line-height:1.5; }

.card{
  margin:14px 16px; background:var(--surface); border:1px solid var(--gold-line);
  box-shadow:inset 0 1px 0 rgba(0,242,254,0.08);
  border-radius:var(--radius-lg); padding:18px; display:flex; flex-direction:column; gap:12px;
}

/* ---- Seller Chips ---- */
.chips-row.seller-chips{
  margin-top:-6px;
  margin-bottom:10px;
}
.chip.seller-chip{
  background:rgba(0, 242, 254, 0.06);
  border-color:rgba(0, 242, 254, 0.22);
  color:var(--accent);
}
.chip.seller-chip.active{
  background:var(--accent);
  color:#000;
  border-color:var(--accent);
  font-weight:700;
}

/* ---- Support Chat Overlay ---- */
.support-modal{
  max-width:440px;
  width:92%;
  height:75vh;
  display:flex;
  flex-direction:column;
  padding:18px;
  background:var(--surface);
  border:1px solid var(--gold-line);
  border-radius:22px;
}
.support-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.modal-sub{
  font-size:12px;
  color:var(--muted);
  margin:2px 0 0;
}
.modal-close-btn{
  background:none;
  border:none;
  color:var(--muted);
  font-size:20px;
  cursor:pointer;
  padding:4px 8px;
}
.support-messages-list{
  flex:1;
  overflow-y:auto;
  margin:12px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-right:4px;
}
.support-msg{
  max-width:82%;
  padding:10px 14px;
  border-radius:14px;
  font-size:13px;
  line-height:1.45;
  word-break:break-word;
}
.support-msg.user{
  align-self:flex-end;
  background:linear-gradient(135deg, #00f2fe, #00a8ff);
  color:#000;
  font-weight:600;
  border-bottom-right-radius:3px;
}
.support-msg.admin{
  align-self:flex-start;
  background:var(--surface-2);
  color:var(--text);
  border:1px solid var(--border);
  border-bottom-left-radius:3px;
}
.support-msg-time{
  font-size:10px;
  opacity:0.65;
  margin-top:4px;
  text-align:right;
}
.support-input-row{
  display:flex;
  gap:8px;
}
.support-input-row input{
  flex:1;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 14px;
  border-radius:12px;
  font-size:13px;
  outline:none;
}
.support-input-row button{
  background:linear-gradient(135deg, #00f2fe, #00a8ff);
  color:#000;
  font-weight:700;
  border:none;
  padding:0 18px;
  border-radius:12px;
  cursor:pointer;
}
.support-link-btn{
  width:100%;
  padding:12px;
  background:linear-gradient(135deg, rgba(0,242,254,0.12), rgba(121,40,202,0.18));
  border:1px solid var(--accent);
  color:var(--accent);
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  margin-top:10px;
}