:root {
  --bg: #0a0d12;
  --bg-soft: #111722;
  --panel: rgba(16, 22, 33, 0.9);
  --panel-2: rgba(23, 31, 47, 0.96);
  --panel-3: rgba(11, 16, 26, 0.92);
  --line: rgba(255,255,255,.08);
  --line-2: rgba(89, 241, 139, .18);
  --text: #ecf2ff;
  --muted: #9aa8c4;
  --green: #5cf28f;
  --green-2: #22c55e;
  --blue: #48bcff;
  --gold: #ffcf6b;
  --danger: #ff6f88;
  --shadow: 0 18px 50px rgba(0,0,0,.38);
  --radius: 22px;
  --radius-sm: 16px;
  --content: min(1420px, calc(100% - 32px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, system-ui, Arial, sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(72,188,255,.12), transparent 25%),
    radial-gradient(circle at 90% 10%, rgba(92,242,143,.12), transparent 20%),
    linear-gradient(180deg, #080b11 0%, #0b1018 55%, #0d121b 100%);
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button, input, select { font: inherit; }
.hide { display: none !important; }

.container { width: var(--content); margin: 0 auto; }
.section { padding: 34px 0; }
.page-spacing { padding: 34px 0 56px; }

.topbar,
.shopbar {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar { background: rgba(8, 12, 18, 0.8); }
.shopbar { background: rgba(7, 10, 16, 0.92); }

.topbar-inner,
.shopbar-inner {
  width: var(--content);
  margin: 0 auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(92,242,143,.28), rgba(72,188,255,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  overflow: hidden;
}
.brand-text { line-height: 1.05; }
.brand-text strong { display: block; font-size: 1rem; }
.brand-text small { color: var(--muted); }

.nav-links,
.shop-links,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-links a,
.shop-links a,
.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  transition: .18s ease;
}
.nav-links a:hover,
.shop-links a:hover,
.btn:hover,
button.btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.06); }
.btn-primary { background: linear-gradient(135deg, rgba(92,242,143,.18), rgba(72,188,255,.18)); border-color: rgba(92,242,143,.24); }
.btn-danger { background: rgba(255,111,136,.1); border-color: rgba(255,111,136,.25); }
.btn-gold { background: rgba(255,207,107,.12); border-color: rgba(255,207,107,.28); }

.hero {
  padding: 48px 0 26px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
  align-items: stretch;
}
.panel,
.card,
.auth-card,
.dashboard-card,
.stat-card,
.table-card,
.shop-card,
.catalog-card,
.cart-card,
.sidebar-card,
.profile-dropdown,
.credit-card-widget,
.transaction-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(20,28,42,.93), rgba(12,18,27,.97));
  box-shadow: var(--shadow);
}
.hero-copy { padding: 30px; position: relative; overflow: hidden; }
.hero-copy::after {
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(92,242,143,.18), transparent 68%);
  filter: blur(8px);
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(92,242,143,.08);
  border: 1px solid rgba(92,242,143,.18);
  color: #d9ffe8;
}
.hero h1, .page-head h1 { margin: 0 0 14px; line-height: 1.02; font-size: clamp(2rem, 5vw, 4.1rem); }
.page-head h2 { margin: 0; }
.hero p, .page-head p, .muted { color: var(--muted); }
.hero-actions, .inline-actions, .split-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-side { display: grid; gap: 18px; }
.hero-image {
  overflow: hidden;
  min-height: 240px;
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }

.metric-grid,
.feature-grid,
.news-grid,
.cards-grid,
.settings-grid,
.analytics-grid,
.transaction-grid {
  display: grid;
  gap: 18px;
}
.metric-grid { grid-template-columns: repeat(3, 1fr); }
.feature-grid { grid-template-columns: repeat(3, 1fr); }
.news-grid { grid-template-columns: repeat(3, 1fr); }
.cards-grid { grid-template-columns: repeat(2, 1fr); }
.settings-grid { grid-template-columns: repeat(2, 1fr); }
.analytics-grid { grid-template-columns: repeat(4, 1fr); }
.transaction-grid { grid-template-columns: repeat(2, 1fr); }

.metric,
.feature,
.news-card,
.dashboard-card,
.stat-card,
.auth-card,
.table-card,
.status-box,
.sidebar-card,
.profile-card,
.credit-card-widget,
.transaction-card,
.shop-card {
  padding: 22px;
}
.metric strong, .stat-card strong { display: block; font-size: 1.6rem; margin-bottom: 8px; }
.icon-chip {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); margin-bottom: 14px;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.notice,
.status-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04);
}
.notice.warning { border-color: rgba(255,207,107,.26); background: rgba(255,207,107,.09); color: #ffe8ad; }
.status-chip { border-color: rgba(92,242,143,.22); background: rgba(92,242,143,.08); color: #dcffe9; }
.check {
  width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(92,242,143,.18);
}
.dot {
  width: 10px; height: 10px; border-radius: 999px; background: var(--green); display: inline-block;
}
.pulse { animation: pulse 1.35s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(92,242,143,.7); }
  70% { box-shadow: 0 0 0 9px rgba(92,242,143,0); }
  100% { box-shadow: 0 0 0 0 rgba(92,242,143,0); }
}

.auth-layout,
.dashboard-layout,
.shop-layout,
.billing-layout {
  display: grid;
  gap: 22px;
}
.auth-layout { grid-template-columns: 1fr 1fr; }
.dashboard-layout { grid-template-columns: 1.1fr .9fr; }
.shop-layout { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
.billing-layout { grid-template-columns: 1.1fr .9fr; align-items: start; }

.form-grid { display: grid; gap: 14px; }
label { display: grid; gap: 8px; color: var(--muted); }
input, select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: var(--text);
}

.shop-shell { padding: 24px 0 46px; }
.shop-topline {
  display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 18px;
}
.shop-topline h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.shop-links a.active,
.nav-links a.active { border-color: rgba(92,242,143,.28); background: rgba(92,242,143,.08); }

.shopbar-right { display: flex; align-items: center; gap: 12px; }
.cart-pill {
  min-width: 58px;
  padding: 10px 14px;
  border-radius: 999px;
  display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
}
.profile-menu-wrap { position: relative; }
.avatar-btn {
  width: 46px; height: 46px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(92,242,143,.2), rgba(72,188,255,.18));
  display: grid; place-items: center; cursor: pointer; font-weight: 800;
}
.profile-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); width: 260px; padding: 16px; display: none; z-index: 99;
}
.profile-dropdown.open { display: block; }
.profile-dropdown a,
.profile-dropdown button {
  width: 100%; justify-content: flex-start; margin-top: 8px;
}
.profile-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }

.sidebar-card h3,
.shop-card h3,
.cart-card h3,
.dashboard-card h2,
.auth-card h2,
.credit-card-widget h3 { margin-top: 0; }
.sidebar-links { display: grid; gap: 10px; margin-top: 14px; }
.sidebar-links a {
  padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
}
.sidebar-links a.active { border-color: rgba(92,242,143,.26); background: rgba(92,242,143,.08); }
.shop-balance { margin-top: 16px; padding: 16px; border-radius: 16px; background: rgba(92,242,143,.08); border: 1px solid rgba(92,242,143,.12); }

.shop-content { display: grid; gap: 18px; }
.filters-bar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(180px, .6fr));
  gap: 14px;
  width: 100%;
}
.filters-bar.full { width: 100%; }
.filters-bar .search-wide { grid-column: 1 / 2; }
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.catalog-card {
  padding: 18px;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.catalog-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.catalog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: var(--muted); font-size: .85rem;
}
.tag.active { color: #d9ffe8; border-color: rgba(92,242,143,.22); background: rgba(92,242,143,.08); }
.price-row { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.price { font-size: 1.3rem; font-weight: 800; }
.stock-ok { color: #adffcc; }
.stock-low { color: #ffd48f; }
.stock-pre { color: #c8d4ff; }

.cart-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.cart-list { display: grid; gap: 14px; }
.cart-item {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 14px; align-items: center;
}
.qty-controls { display: inline-flex; align-items: center; gap: 8px; }
.qty-controls button { width: 34px; height: 34px; padding: 0; border-radius: 10px; }
.total-box {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.total-line { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.total-line.final { font-size: 1.08rem; font-weight: 800; padding-top: 10px; border-top: 1px solid var(--line); }

.credit-card-widget {
  min-height: 270px;
  position: relative;
  overflow: hidden;
}
.credit-card {
  position: relative;
  min-height: 210px;
  border-radius: 24px;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.14), transparent 32%),
    linear-gradient(135deg, #1e283b 0%, #162134 45%, #101722 100%);
  border: 1px solid rgba(255,255,255,.12);
}
.credit-card::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92,242,143,.18), transparent 70%);
  animation: floatGlow 4s ease-in-out infinite;
}
.credit-card::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72,188,255,.14), transparent 68%);
  animation: floatGlow 5s ease-in-out infinite reverse;
}
@keyframes floatGlow {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(10px); }
}
.card-chip { width: 52px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #d6b266, #9f7c2d); margin-bottom: 22px; }
.card-number { font-size: 1.35rem; letter-spacing: .12em; margin-bottom: 28px; }
.card-meta { display: flex; justify-content: space-between; gap: 10px; align-items: end; }
.solde-box {
  margin-top: 18px; padding: 18px; border-radius: 18px; background: rgba(92,242,143,.08); border: 1px solid rgba(92,242,143,.14);
}
.solde-box strong { display: block; font-size: 1.7rem; margin-top: 8px; }
.log-table { width: 100%; border-collapse: collapse; }
.log-table th, .log-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.log-table th { color: var(--muted); font-weight: 600; }
.log-positive { color: #b8ffd0; }
.log-negative { color: #ffc0cc; }

.table-wrap { overflow: auto; }
.footer {
  border-top: 1px solid var(--line);
  margin-top: 44px;
  background: rgba(7,10,16,.8);
}
.footer-inner {
  width: var(--content); margin: 0 auto; padding: 22px 0 34px; color: var(--muted);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

@media (max-width: 1320px) {
  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1120px) {
  .hero-grid,
  .auth-layout,
  .dashboard-layout,
  .shop-layout,
  .billing-layout,
  .cart-layout { grid-template-columns: 1fr; }
  .feature-grid,
  .news-grid,
  .analytics-grid,
  .metric-grid,
  .grid-3,
  .transaction-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .topbar-inner,
  .shopbar-inner { min-height: auto; padding: 12px 0; flex-direction: column; align-items: stretch; }
  .nav-links,
  .shop-links,
  .topbar-right,
  .shopbar-right { justify-content: center; }
  .filters-bar { grid-template-columns: 1fr; }
  .filters-bar .search-wide { grid-column: auto; }
  .catalog-grid,
  .feature-grid,
  .news-grid,
  .metric-grid,
  .cards-grid,
  .settings-grid,
  .grid-2,
  .transaction-grid { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-item { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .container, .topbar-inner, .shopbar-inner, .footer-inner { width: min(100% - 24px, 100%); }
  .hero-copy, .metric, .feature, .news-card, .dashboard-card, .stat-card, .auth-card, .table-card, .status-box, .sidebar-card, .profile-card, .credit-card-widget, .transaction-card, .shop-card, .catalog-card { padding: 18px; }
  .catalog-grid { grid-template-columns: 1fr; }
}

.premium-header {
  background: rgba(6,10,18,.88);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.premium-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(72,188,255,.35), rgba(92,242,143,.35), transparent);
}
.premium-header-inner {
  padding: 16px 0;
}
.shop-header-lite .shopbar-inner {
  justify-content: space-between;
}
.compact-right { margin-left: auto; }
.live-pill {
  min-width: 58px;
  padding: 10px 14px;
  border-radius: 999px;
  display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
}
.dashboard-nav { justify-content: flex-end; }
.profile-summary-card { min-height: 220px; }
.stats-grid-xl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.stat-rich strong { display:block; font-size:1.9rem; margin-top:12px; }
.dual-stats {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px;
}
.dual-stats > div,
.market-stats > div,
.mini-item {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.podium-list { margin: 14px 0 0; padding-left: 18px; display:grid; gap:10px; }
.podium-list li { display:flex; justify-content:space-between; gap:12px; }
.mini-carousel {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px;
}
.mini-item img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; margin-bottom:8px; }
.mini-list { display:grid; gap:10px; margin-top:14px; }
.mini-list-row {
  display:flex; justify-content:space-between; gap:14px; align-items:flex-start;
  padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.coupon-box { margin-top: 18px; }
.market-card { display:grid; gap:18px; }
.market-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.market-stats { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px; }
.intershop-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; }
.intershop-hero { margin-bottom:22px; }
.sidebar-card .sidebar-links a,
.sidebar-links a { transition:.18s ease; }
.sidebar-links a:hover { transform: translateX(2px); }
button[disabled] { opacity:.55; cursor:not-allowed; }

@media (max-width: 1120px) {
  .stats-grid-xl, .intershop-grid, .mini-carousel, .market-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .stats-grid-xl, .intershop-grid, .mini-carousel, .market-stats { grid-template-columns: 1fr; }
  .market-head, .mini-list-row { flex-direction: column; }
}


/* --- V4 shop refinements --- */
.shop-header-clean { min-height: 92px; }
.shop-header-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.live-pill, .cart-pill { min-width:74px; justify-content:center; }
.compact-only .muted + strong { font-size: 1.9rem; }
.shop-layout { grid-template-columns: 300px 1fr; align-items: start; }
.shop-content { min-width:0; }
.shop-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.sidebar-card { position: sticky; top: 110px; }
.sidebar-links a { display:flex; align-items:center; min-height:48px; padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.sidebar-links a.active { background: linear-gradient(135deg, rgba(92,242,143,.14), rgba(72,188,255,.1)); border-color: rgba(92,242,143,.24); }
.shop-balance { margin-top:18px; padding:18px; border:1px solid rgba(92,242,143,.14); border-radius:18px; background: linear-gradient(135deg, rgba(92,242,143,.08), rgba(72,188,255,.06)); }

.landing-grid-main { display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; }
.wide-two, .stats-wide, .month-orders-card { grid-column: 1 / -1; }
.connected-summary { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.connected-summary strong { font-size:2.4rem; }
.avatar-cloud { display:flex; flex-wrap:wrap; gap:10px; }
.user-bubble { width:50px; height:50px; border-radius:999px; display:grid; place-items:center; font-weight:800; border:1px solid rgba(255,255,255,.1); background: linear-gradient(135deg, rgba(92,242,143,.14), rgba(72,188,255,.12)); position:relative; cursor:default; }
.user-bubble::after { content: attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%); white-space:nowrap; background:#0d1420; color:#fff; border:1px solid rgba(255,255,255,.1); padding:8px 10px; border-radius:12px; opacity:0; pointer-events:none; transition:.15s; font-size:.85rem; }
.user-bubble:hover::after { opacity:1; }
.podium-card { min-height: 320px; overflow:hidden; position:relative; }
.podium-card::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 50% 0%, rgba(255,207,107,.12), transparent 40%); pointer-events:none; }
.podium-wrap { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; align-items:end; min-height:220px; margin-top:20px; }
.podium { border:1px solid rgba(255,255,255,.08); border-radius:22px 22px 10px 10px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); display:flex; flex-direction:column; justify-content:flex-end; align-items:center; text-align:center; padding:16px 10px; }
.podium .place { font-weight:800; margin-bottom:8px; }
.podium strong { font-size:1.1rem; }
.podium small { color: var(--gold); }
.podium-1 { min-height: 180px; }
.podium-2 { min-height: 145px; }
.podium-3 { min-height: 125px; }
.news-strip, .vendor-carousel { display:grid; gap:14px; }
.news-strip { grid-template-columns: repeat(5, minmax(0,1fr)); }
.news-chip { display:flex; gap:12px; align-items:center; padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); min-width:0; }
.news-chip img { width:54px; height:54px; object-fit:contain; border-radius:14px; background: rgba(255,255,255,.03); }
.vendor-carousel { grid-template-columns: repeat(4,minmax(0,1fr)); }
.vendor-card { text-align:center; padding:16px; border-radius:20px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.vendor-avatar { width:62px; height:62px; margin:0 auto 12px; border-radius:16px; display:grid; place-items:center; font-size:1.5rem; background: linear-gradient(135deg, rgba(92,242,143,.14), rgba(72,188,255,.1)); }
.orders-scroll { max-height: 250px; overflow:auto; padding-right:8px; }
.orders-scroll::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width:8px; height:8px; }
.orders-scroll::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius:999px; }
.order-row { display:grid; grid-template-columns: 110px 1.6fr 160px 120px 120px; gap:12px; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); margin-bottom:10px; align-items:center; }
.order-row strong { font-size:1rem; }

.catalog-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; }
.clean-card { display:flex; flex-direction:column; gap:16px; min-width:0; }
.clean-card h3 { margin:0; font-size:1.05rem; }
.line-clamp { min-height: 92px; }
.clean-thumb { aspect-ratio: 1/1; display:grid; place-items:center; padding:18px; }
.clean-thumb img { width:100%; height:100%; object-fit:contain; }
.product-meta { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; padding-top:6px; border-top:1px solid rgba(255,255,255,.06); }
.product-meta strong { display:block; margin-top:4px; font-size:1.15rem; }
.full-btn { width:100%; }
.search-wide { width:100%; min-width:0; }
.filters-bar.full { display:grid; grid-template-columns: minmax(0,1.6fr) 220px 220px; gap:14px; align-items:center; }

.offer-modal { position: fixed; inset:0; background: rgba(3,7,12,.72); backdrop-filter: blur(10px); display:none; align-items:center; justify-content:center; z-index:120; padding:20px; }
.offer-modal.open { display:flex; }
.offer-modal-panel { width:min(980px, 100%); max-height:85vh; overflow:auto; padding:24px; border-radius:24px; border:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(18,25,37,.98), rgba(10,14,22,.99)); box-shadow: var(--shadow); }
.offer-modal-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px; }
.offer-modal-grid { display:grid; grid-template-columns: 1.5fr .8fr; gap:20px; }
.offer-item-head { display:flex; gap:18px; align-items:flex-start; margin-bottom:18px; }
.offer-item-head img { width:124px; height:124px; object-fit:contain; border-radius:20px; background: rgba(255,255,255,.03); padding:14px; }
.offer-list { display:grid; gap:10px; }
.offer-row { display:grid; grid-template-columns: 24px 1fr auto auto; gap:12px; align-items:center; padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.offer-row.selected { border-color: rgba(92,242,143,.28); background: rgba(92,242,143,.08); }
.offer-side { display:grid; gap:18px; align-content:start; }
.offer-summary { padding:18px; border-radius:20px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.field-stack label { display:grid; gap:8px; }
.modal-open { overflow:hidden; }

.cart-bottom-total { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-radius:16px; background: rgba(92,242,143,.08); border:1px solid rgba(92,242,143,.16); margin-top:14px; }
.cart-layout { grid-template-columns: 1.3fr .8fr; }
.cart-item { grid-template-columns: 1.5fr auto auto; }

.flip-container { perspective: 1000px; width: 360px; height: 220px; margin: 0 auto; }
.flipper { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-container:hover .flipper { transform: rotateY(180deg); }
.front, .back { position:absolute; width:100%; height:100%; backface-visibility:hidden; border-radius:24px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); color:white; padding:20px; }
.front, .back { background: linear-gradient(135deg, #1e293b, #0f172a); }
.back { transform: rotateY(180deg); }
.chip { width:40px; height:30px; background:#fbbf24; border-radius:5px; margin-bottom:40px; }
.card-num { font-size:1.35rem; letter-spacing:2px; font-family:monospace; margin-bottom:25px; }
.card-name { text-transform:uppercase; font-size:.86rem; }
.card-exp { position:absolute; bottom:20px; right:86px; font-size:.92rem; }
.card-logo { position:absolute; bottom:20px; right:20px; font-weight:800; font-style:italic; font-size:1.2rem; }
.bank-title { position:absolute; top:18px; right:18px; font-size:1.1rem; font-weight:900; }
.magnetic-strip { background:#000; height:40px; width:100%; position:absolute; left:0; top:20px; }
.cvv-box { background:#fff; color:#000; width:100%; margin-top:60px; padding:10px; border-radius:4px; text-align:right; font-family:monospace; position:relative; }
.cvv-box span { position:absolute; top:-20px; right:0; color:white; font-size:.7rem; }
.billing-top-grid { display:grid; grid-template-columns: .95fr .95fr; gap:22px; align-items:start; }
.billing-wide { margin-top:22px; }

.log-table th, .log-table td { padding:14px 12px; }

@media (max-width: 1200px){
  .catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .news-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .vendor-carousel { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px){
  .shop-layout, .billing-top-grid, .offer-modal-grid, .landing-grid-main, .cart-layout { grid-template-columns: 1fr; }
  .sidebar-card { position:static; }
  .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filters-bar.full { grid-template-columns: 1fr; }
  .news-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px){
  .catalog-grid { grid-template-columns: 1fr; }
  .news-strip, .vendor-carousel, .podium-wrap { grid-template-columns: 1fr; }
  .order-row { grid-template-columns: 1fr; }
  .flip-container { width:100%; }
}