:root {
  color-scheme: dark;
  --bg: #070b13;
  --surface: #101a2b;
  --border: #2a3d57;
  --text: #f3f8ff;
  --muted: #a0b2c8;
  --blue: #4086ff;
  --cyan: #70d9ff;
  --danger: #ff8791;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  overflow-x: hidden;
  background: radial-gradient(circle at 75% -20%, #15375f 0, transparent 38%), var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('/static/stars-mobile.webp') center / cover no-repeat;
  opacity: .58;
}
.cosmic-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: .52;
}
.meteor-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
.meteor { 
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f4fcff;
  box-shadow: 0 0 4px 1px #72caff66;
  opacity: 0;
  animation: meteor-flight 8s linear var(--delay) infinite;
  will-change: transform, opacity;
}
.meteor::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0;
  width: var(--length);
  height: 2px;
  transform: rotate(-53deg);
  transform-origin: left center;
  background: linear-gradient(90deg, #e9faff, #7cc9ff9c 24%, transparent);
}
@keyframes meteor-flight {
  0%, 3% { opacity: 0; transform: translate3d(0, 0, 0); }
  5% { opacity: .38; }
  11% { opacity: .33; }
  17%, 100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0); }
}
@media (min-width: 800px) {
  body::before { background-image: url('/static/stars-desktop.webp'); }
}
.glow {
  position: fixed;
  z-index: 0;
  width: min(75vw, 750px);
  height: 350px;
  top: -280px;
  left: 12%;
  pointer-events: none;
  filter: blur(100px);
  background: #2163b7;
  opacity: .38;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
a { color: #a5ceff; text-decoration: none; }
a:hover { color: white; }
h1 { letter-spacing: -.055em; line-height: 1.12; }
.ui-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.ui-icon.tiny { width: 15px; height: 15px; }
.ui-icon.brand-icon { width: 24px; height: 24px; }
.app-shell {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 25px 28px 115px;
}
.header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 29px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 800; letter-spacing: .14em; white-space: nowrap; }
.mark {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  flex: none;
  border: 1px solid #82c5ff98;
  border-radius: 13px;
  background: linear-gradient(145deg, #287ddd, #12376c 78%);
  color: #e8f7ff;
  box-shadow: 0 6px 24px #2b75dd4f, inset 0 1px 0 #ffffff46;
}
.header-right { display: flex; align-items: center; gap: 9px; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #355479; border-radius: 99px; padding: 8px 11px; background: #101c2bdc; color: #bfd4ed; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill .ui-icon { color: var(--cyan); }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: none; overflow: hidden; border: 2px solid #5194ea; border-radius: 50%; background: #234b7f; font-weight: 800; object-fit: cover; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #87c0ff; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow .ui-icon { width: 16px; height: 16px; }
.hero {
  position: relative;
  isolation: isolate;
  min-height: 266px;
  overflow: hidden;
  border: 1px solid #42678f;
  border-radius: 26px;
  padding: 32px;
  background: linear-gradient(110deg, #0d1a30ed 8%, #132f54c9 58%, #102640ad);
  box-shadow: 0 16px 55px #00000038, inset 0 1px 0 #ffffff1d;
}
.hero::after { content: ''; position: absolute; z-index: -1; top: -80px; right: -50px; width: 300px; height: 300px; border-radius: 50%; background: #3989ef; opacity: .21; filter: blur(60px); }
.hero-content { position: relative; z-index: 2; max-width: 65%; }
.hero-art { position: absolute; z-index: 1; right: -12px; top: 50%; width: min(46%, 400px); height: auto; transform: translateY(-50%); filter: drop-shadow(0 18px 34px #0d56b46b); pointer-events: none; }
.hero h1 { max-width: 580px; margin: 15px 0 11px; font-size: clamp(30px, 5vw, 50px); }
.hero p { max-width: 490px; margin: 0 0 25px; color: #c7d9eb; line-height: 1.65; font-size: 13px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #7eb7ff5c; border-radius: 12px; padding: 11px 16px; background: linear-gradient(135deg, #3986ff, #1c5bd0); color: white; font-weight: 800; box-shadow: 0 9px 24px #2169d03d; transition: transform .15s, filter .15s; }
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn.ghost { border: 1px solid #35506f; background: #17263bd9; box-shadow: none; }
.btn.small { padding: 8px 11px; font-size: 12px; }
.btn .ui-icon { width: 17px; height: 17px; }
.section { margin-top: 32px; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.section-title h2 { margin: 0; font-size: 20px; letter-spacing: -.04em; }
.section-title a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.cat-card, .product-card, .card { border: 1px solid var(--border); border-radius: 19px; background: linear-gradient(155deg, #17283ce8, #0d1726ee); box-shadow: 0 10px 30px #00000023; backdrop-filter: blur(12px); }
.cat-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 122px; padding: 16px; cursor: pointer; transition: transform .16s, border-color .16s, background .16s; }
.cat-card:hover, .product-card:hover { transform: translateY(-3px); border-color: #539afa; }
.cat-card strong { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 13px; }
.cat-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #428fe767; border-radius: 11px; color: #a8d9ff; background: #1739668c; }
.cat-icon .ui-icon { width: 21px; height: 21px; }
.product-card { overflow: hidden; padding: 0; cursor: pointer; transition: transform .16s, border-color .16s; }
.product-card { position: relative; background: rgba(16,35,59,.30); }
.product-card.selected { border-color: #f5fbff; box-shadow: 0 0 0 1px #f5fbff, 0 0 22px #b9e6ff93; }
.product-card.selected::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(110deg, transparent 34%, #ffffff14 47%, #ffffff52 50%, #ffffff14 53%, transparent 66%); background-size: 300% 100%; animation: card-sheen 2.2s linear infinite; }
.select-hint { display: block; margin-top: 8px; color: #e2f4ff; font-size: 10px; }
.product-cover { display: grid; place-items: center; height: 145px; overflow: hidden; background: rgba(17,43,74,.30); }
.product-cover img { width: 100%; height: 100%; object-fit: cover; }
.product-cover img.illustration { width: 82%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px #177fe46d); }
.product-glyph { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid #76c9ff73; border-radius: 19px; background: #28578a76; color: #c9efff; box-shadow: 0 0 48px #45aeff64, inset 0 1px 0 #ffffff47; transform: rotate(-8deg); }
.product-glyph .ui-icon { width: 33px; height: 33px; transform: rotate(8deg); stroke-width: 1.6; }
.product-info { padding: 15px; }
.product-info h3 { min-height: 39px; margin: 8px 0 12px; font-size: 13px; line-height: 1.45; }
.subtle { color: var(--muted); font-size: 12px; line-height: 1.6; }
.price { display: inline-flex; align-items: center; gap: 5px; color: #d6eaff; font-size: 16px; font-weight: 800; white-space: nowrap; }
.price .ui-icon { color: #7cc7ff; fill: #7cc7ff30; }
.price-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.tag { display: inline-block; border: 1px solid #3b659766; border-radius: 7px; padding: 4px 7px; background: #21477965; color: #abd6ff; font-size: 10px; font-weight: 700; }
.nav { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-around; gap: 4px; max-width: 1120px; margin: 0 auto; padding: 10px 8px max(10px, env(safe-area-inset-bottom)); border: 1px solid #304764; border-bottom: 0; border-radius: 20px 20px 0 0; background: #091423ed; box-shadow: 0 -12px 38px #0000006e; backdrop-filter: blur(18px); }
.nav :is(button,a) { display: grid; justify-items: center; gap: 4px; min-width: 65px; border: 0; border-radius: 11px; padding: 7px 9px; background: transparent; color: #9db0c8; font-size: 10px; font-weight: 700; }
.nav :is(button,a).on { background: #1d467880; color: #d5edff; }
.nav :is(button,a).on .icon { animation: nav-pop .24s ease-out; }
.nav .icon { display: grid; place-items: center; width: 22px; height: 22px; }
.nav .icon .ui-icon { width: 21px; height: 21px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack { display: grid; gap: 12px; }
.card { position: relative; padding: 18px; }
.card h3 { margin: 0 0 10px; font-size: 15px; }
.card p { margin: 7px 0; }
.muted { color: var(--muted); }
.field { width: 100%; outline: none; border: 1px solid #3b5068; border-radius: 11px; padding: 11px 12px; background: #0b1726; color: white; }
.field:focus { border-color: #69b1ff; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.form { display: grid; gap: 12px; margin-top: 16px; }
.form.two { grid-template-columns: 1fr 1fr; }
.wide { grid-column: 1 / -1; }
.toast { position: fixed; pointer-events: none; z-index: 150; bottom: 100px; left: 50%; width: max-content; max-width: 90vw; transform: translateX(-50%); border: 1px solid #5592c4; border-radius: 13px; padding: 12px 17px; background: #172f4a; box-shadow: 0 12px 30px #0009; }
.error { color: var(--danger); }
.splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; height: 85vh; }
.splash .mark { width: 70px; height: 70px; border-radius: 22px; }
.splash .mark .ui-icon { width: 42px; height: 42px; }
.splash span { max-width: 300px; color: var(--muted); font-size: 13px; text-align: center; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { white-space: nowrap; border: 1px solid #354b63; border-radius: 99px; padding: 9px 13px; background: #13253adc; color: #b7cbe0; font-size: 12px; }
.tabs button.on { border-color: #77bdff; background: #235993; color: white; }
.filters { margin-top: 18px; border: 1px solid #35506d; border-radius: 15px; background: #101e30db; }
.filters summary { display: flex; align-items: center; gap: 9px; padding: 13px 15px; cursor: pointer; font-weight: 700; list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary span { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 500; }
.filter-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 2px 15px 15px; }
.tap-tip { margin: 12px 0 0; }
.review-proof { color: #b5e0ff; font-size: 12px; }
.detail { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; }
.detail .product-cover { height: 330px; border: 1px solid #42678f; border-radius: 20px; }
.gallery { min-width: 0; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border: 1px solid #42678f; border-radius: 20px; background: rgba(17,43,74,.30); touch-action: pan-x pan-y; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { display: grid; place-items: center; min-width: 100%; height: 330px; scroll-snap-align: center; }
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; }
.gallery-dots { display: flex; justify-content: center; gap: 8px; padding: 13px 0; }
.gallery-dot { width: 7px; height: 7px; border: 0; border-radius: 9px; padding: 0; background: #718ca8; transition: width .18s, background .18s; }
.gallery-dot.on { width: 22px; background: #77baff; }
.detail .product-glyph { width: 98px; height: 98px; border-radius: 25px; }
.detail .product-glyph .ui-icon { width: 47px; height: 47px; }
.back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px; border: 0; padding: 0; background: transparent; color: #b0d7ff; }
.back .ui-icon { width: 17px; height: 17px; }
.order-row { border-bottom: 1px solid var(--border); padding: 13px 0; }
.order-row:last-child { border: 0; }
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head .avatar { width: 58px; height: 58px; font-size: 22px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.copy { word-break: break-all; }
.profile-title { margin: 9px 0 18px; }
.profile-hero { overflow: hidden; padding: 26px; background: radial-gradient(circle at 95% 0%,#3789ed42,transparent 43%),linear-gradient(130deg,#172e4deb,#0c1b30ef); border-color:#557baa; }
.profile-identity { display:flex; align-items:center; gap:17px; min-width:0; }
.profile-identity .avatar { width:70px; height:70px; font-size:27px; border-width:3px; box-shadow:0 0 0 5px #4297f629; }
.profile-name { min-width:0; }
.profile-name h2 { margin:4px 0 3px; font-size:clamp(21px,4vw,28px); letter-spacing:-.04em; overflow-wrap:anywhere; }
.profile-kicker { color:#8fc8fa; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.profile-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 15px; margin:21px 0 10px; color:#b9cee4; font-size:12px; }
.profile-meta strong { color:var(--text); font-weight:700; }
.profile-status,.profile-connection { display:inline-flex; align-items:center; gap:5px; border:1px solid #47709c; border-radius:99px; padding:5px 10px; background:#14395d; color:#b8ddfa; font-size:11px; font-weight:700; }
.profile-link { display:inline-flex; align-items:center; gap:5px; padding:3px 0; font-size:12px; font-weight:700; }
.profile-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:17px; }
.profile-stat { display:flex; align-items:flex-start; flex-direction:column; gap:9px; min-width:0; padding:19px; }
.profile-stat-icon { display:grid; place-items:center; width:37px; height:37px; border:1px solid #4e8ed2; border-radius:11px; background:#215385a6; color:#b5e3ff; }
.profile-stat-icon .ui-icon { width:19px; height:19px; }
.profile-stat small { color:var(--muted); font-size:11px; }
.profile-stat strong { font-size:clamp(20px,3vw,26px); letter-spacing:-.035em; }
.profile-text-link { display:inline-flex; align-items:center; gap:4px; border:0; padding:3px 0; background:none; color:#9bcaff; font-size:12px; font-weight:700; text-align:left; }
.profile-text-link .ui-icon { width:14px; height:14px; }
.profile-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.profile-shortcut { display:flex; align-items:center; gap:10px; width:100%; min-width:0; padding:15px; color:var(--text); text-align:left; }
.profile-shortcut>span { flex:1; font-size:13px; font-weight:700; }
.profile-shortcut>.ui-icon:first-child { color:#90c9fa; }
.profile-shortcut>.ui-icon:last-child { width:15px; height:15px; color:var(--muted); }
.profile-shortcut:hover,.profile-recent-row:hover:is(button) { border-color:#72adf0; background:#1c3a5b; }
.profile-linked-grid,.profile-duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.profile-linked { min-width:0; min-height:132px; }
.profile-linked-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; }
.profile-provider { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:800; }
.profile-provider .ui-icon { color:#a6d7ff; }
.google-g { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:#fff; color:#4285f4; font-size:14px; }
.profile-connection { border-color:#596777; background:#283444; color:#b5c5d6; white-space:nowrap; }
.profile-connection.on { border-color:#428777; background:#163f3b; color:#a6f0d6; }
.profile-linked p { min-height:23px; overflow-wrap:anywhere; }
.profile-provider-action { min-height:4px; margin-top:13px; }
.profile-logout { margin-top:12px; }
.profile-feature { min-width:0; padding:20px; }
.profile-feature h2 { margin:0; font-size:17px; letter-spacing:-.03em; }
.profile-feature-head { display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.profile-offer { display:flex; flex-wrap:wrap; align-items:center; gap:9px; color:var(--muted); font-size:12px; }
.profile-offer strong { border:1px solid #66a7ec; border-radius:8px; padding:6px 8px; background:#255b96; color:#edf7ff; letter-spacing:.05em; }
.profile-promo-form { display:flex; gap:8px; margin-top:17px; }
.profile-promo-form .field { min-width:0; flex:1; }
.profile-referral-link { border:1px dashed #4a6b8e; border-radius:9px; padding:10px; background:#0d1e31; color:#b8d6f3; font-size:11px; }
.profile-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.profile-feature .section-title { margin-bottom:5px; }
.profile-recent-row { display:flex; align-items:center; justify-content:space-between; gap:9px; width:100%; min-width:0; border:0; border-bottom:1px solid var(--border); padding:12px 0; background:none; color:var(--text); text-align:left; }
.profile-recent-row:last-child { border-bottom:0; }
.profile-recent-row span:first-child { min-width:0; }
.profile-recent-row strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.profile-recent-row small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
.profile-recent-row .badge { flex:none; font-size:10px; }
.profile-loading { width:85%; height:15px; margin:17px 0; border-radius:8px; background:#2a4561; animation:skeleton-shimmer 1.5s ease-in-out infinite alternate; }
.profile-loading.short { width:55%; }
.cart-header { position:relative; display:grid; place-items:center; width:38px; height:38px; border:1px solid #466d95; border-radius:12px; background:#173554dd; color:#dbf1ff; }
.cart-header .ui-icon { width:19px; height:19px; }
.cart-header span { position:absolute; top:-7px; right:-6px; display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:12px; background:#418af3; color:white; font-size:10px; font-weight:800; }
.cart-header.cart-bump { animation:cart-bump .4s ease-out; }
.add-cart { width:100%; margin-top:12px; }
.cart-title { margin:10px 0 18px; }
.cart-title h1 { margin:0; }
.cart-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr); align-items:start; gap:16px; }
.cart-line { display:flex; align-items:center; gap:14px; padding:13px; }
.cart-thumb { display:grid; place-items:center; width:72px; height:72px; flex:none; overflow:hidden; border:1px solid #42678f; border-radius:12px; background:#143454; }
.cart-thumb img { width:100%; height:100%; object-fit:cover; }
.cart-line-info { min-width:0; flex:1; }
.cart-line-info h3 { margin:0 0 6px; overflow-wrap:anywhere; }
.rental-select { margin:14px 0; }
.cart-term-label { max-width:255px; margin-top:8px; font-size:10px; }
.cart-term-label .field { padding:7px; font-size:11px; }
.cart-remove { display:grid; place-items:center; width:33px; height:33px; flex:none; border:1px solid #456789; border-radius:10px; background:#192d43; color:#bad5ed; font-size:21px; }
.cart-summary { padding:22px; border-color:#527eae; }
.cart-summary h2 { margin:8px 0 19px; font-size:22px; }
.cart-totals { display:grid; gap:12px; border-bottom:1px solid var(--border); padding-bottom:15px; }
.cart-totals>div { display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.cart-totals>div span { color:var(--muted); }
.cart-totals .cart-discount strong { color:#90e4c7; }
.cart-totals .cart-final { align-items:center; margin-top:5px; }
.cart-totals .cart-final span { color:var(--text); font-weight:700; }
.cart-totals .cart-final strong { font-size:21px; }
.cart-totals p { margin:0; }
.cart-before { color:var(--muted); text-decoration:line-through; }
.cart-promo { display:grid; gap:9px; padding-top:19px; }
.cart-promo label { display:flex; align-items:center; justify-content:space-between; font-weight:700; color:var(--text); }
.promo-applied { color:#88ddbf; font-size:11px; }
.cart-promo-row { display:flex; gap:7px; }
.cart-promo-row .field { min-width:0; }
.cart-checkout { width:100%; margin-top:20px; padding:14px; }
.cart-security { display:flex; align-items:center; gap:6px; margin:13px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.cart-empty { display:grid; justify-items:center; gap:10px; max-width:580px; margin:30px auto 70px; padding:45px 20px; text-align:center; }
.cart-empty-icon { display:grid; place-items:center; width:74px; height:74px; border:1px solid #589be5; border-radius:22px; background:linear-gradient(140deg,#315f97,#163457); color:#d9f0ff; box-shadow:0 15px 40px #3285e93b; }
.cart-empty-icon .ui-icon { width:38px; height:38px; }
.cart-empty h2 { margin:10px 0 0; font-size:24px; }
.cart-empty .btn { margin-top:15px; }
.cart-payment-veil { position:fixed; z-index:80; inset:0; display:grid; place-items:end center; padding:18px; background:#030a17ce; backdrop-filter:blur(12px); }
.cart-payment-card { position:relative; width:min(100%,450px); padding:25px; border:1px solid #67a8e9; border-radius:25px; background:linear-gradient(140deg,#183b62,#0b1b31); box-shadow:0 20px 80px #000b; color:#f2f8ff; animation:sheet-in .3s ease-out; }
.cart-payment-card h2 { margin:12px 0 7px; }
.cart-payment-close { position:absolute; top:15px; right:16px; width:30px; height:30px; border:0; background:transparent; color:#d3e5f5; font-size:25px; }
.cart-pay-option { display:flex; align-items:center; gap:12px; border:1px solid #41658b; border-radius:14px; padding:13px; margin-top:11px; }
.cart-pay-option.selected { border-color:#74b6f7; background:#234a77; }
.cart-pay-option.unavailable { opacity:.63; }
.cart-pay-option>span:last-child { flex:1; }
.cart-pay-option input { accent-color:#78bcff; }
.cart-pay-option strong,.cart-pay-option small { display:block; }
.cart-pay-option small { margin-top:4px; font-size:10px; color:#bdd2e8; }
.cart-payment-note { text-align:center; }
.cart-result { display:grid; justify-items:center; max-width:650px; margin:45px auto 85px; padding:30px; text-align:center; }
.cart-result-symbol { display:grid; place-items:center; width:77px; height:77px; margin-bottom:17px; border-radius:50%; background:#22538a; color:#d2edff; font-size:41px; }
.cart-result-symbol.complete { background:#126b60; box-shadow:0 0 38px #27d6a166; color:#f0fff9; }
.cart-result h1 { margin:12px 0; }
.cart-order-id { max-width:100%; overflow-wrap:anywhere; border:1px dashed #69aae8; border-radius:11px; padding:11px; background:#123454; color:#d8eeff; font-weight:800; letter-spacing:.02em; }
.cart-result-orders { width:100%; margin:18px 0; text-align:left; }
.cart-result-orders>.row { gap:8px; border-bottom:1px solid var(--border); padding:10px 0; font-size:12px; }
.referral-hero { display:flex; justify-content:space-between; align-items:center; gap:15px; overflow:hidden; padding:29px; border-color:#4d8dd3; background:radial-gradient(circle at 90% 8%,#2773d3a0,transparent 42%),linear-gradient(125deg,#163a63,#0f213b); }
.referral-hero h1 { margin:12px 0; font-size:clamp(27px,4vw,40px); }
.referral-hero p { max-width:450px; color:#bddaf4; line-height:1.55; }
.referral-art { display:grid; place-items:center; width:145px; height:145px; flex:none; border:1px solid #6aa9ef; border-radius:35px; background:#307bd0b8; color:#e3f3ff; font-size:83px; box-shadow:0 0 55px #4c9df084; transform:rotate(-12deg); animation:referral-float 4s ease-in-out infinite; }
.referral-user { flex-wrap:wrap; }
.ban-screen { display:grid; place-items:center; min-height:100vh; padding:20px; }
.ban-screen .card { width:min(100%,520px); padding:28px; }
.ban-screen h1 { margin:18px 0; }
.ban-screen .btn { margin-top:15px; }
.cookie-notice { position:fixed; z-index:70; right:15px; bottom:calc(88px + env(safe-area-inset-bottom)); left:15px; display:flex; align-items:center; justify-content:space-between; gap:16px; width:min(620px,calc(100% - 30px)); margin:0 auto; border:1px solid #6599c9; border-radius:15px; padding:14px 16px; background:#132a45f7; color:#edf6ff; box-shadow:0 15px 45px #0009; }
.cookie-notice p { margin:5px 0 0; color:#b9cee4; font-size:11px; line-height:1.5; }
.cookie-notice .btn { flex:none; }
@keyframes referral-float { 50% { transform:translateY(-7px) rotate(-5deg); } }
@keyframes cart-bump { 50% { transform:translateY(-5px) scale(1.1); } }
@keyframes sheet-in { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
.admin-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 23px; }
.admin-menu { display: grid; align-content: start; gap: 7px; }
.admin-menu button { display: flex; align-items: center; gap: 11px; border: 1px solid #314961; border-radius: 10px; padding: 11px; background: #122137e6; color: #c2d3e7; text-align: left; }
.admin-menu button.on { border-color: #5198ed; background: #1d4d82; color: white; }
.admin-menu button .ui-icon { width: 17px; height: 17px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 11px; }
.table th, .table td { max-width: 190px; overflow: hidden; border-bottom: 1px solid #304259; padding: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.table th { color: #a3c9ee; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.badge { display: inline-block; border: 1px solid #416b94; border-radius: 9px; padding: 6px 9px; background: #1c426c; color: #b9deff; font-size: 11px; }
.site-footer { display: grid; gap: 8px; margin-top: 52px; padding: 24px 0 12px; border-top: 1px solid #5780ad55; color: #95b1cc; font-size: 12px; }
.footer-title { color: #e5f2ff; font-weight: 800; letter-spacing: .05em; }
.site-footer a { display: block; width: fit-content; padding: 3px 0; }
.copyright { margin-top: 10px; color: #8099b6; font-size: 11px; }
.menu-toggle { display: grid; place-content: center; gap: 4px; width: 39px; height: 39px; flex: none; border: 1px solid #4c7096; border-radius: 12px; background: #132842e8; color: #e8f5ff; }
.menu-toggle span { display: block; width: 17px; height: 2px; border-radius: 9px; background: currentColor; }
.account-menu { position: absolute; z-index: 25; top: 76px; right: 28px; width: min(310px,calc(100vw - 32px)); display: grid; gap: 5px; padding: 12px; border: 1px solid #719ac4; border-radius: 20px; background: #0d2139f5; box-shadow: 0 28px 65px #000a; backdrop-filter: blur(18px); }
.account-menu[hidden],.key-reveal[hidden] { display: none; }
.account-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 12px; background: transparent; color: #e2f1ff; text-align: left; }
@media(hover:hover) and (pointer:fine){.account-menu button:hover{background:#315f9459}}
html[data-input="keyboard"] .account-menu button:focus-visible{outline:2px solid #d9eeff}
.account-menu button .ui-icon { color: #85c7ff; }
.account-menu small { display: block; margin: 5px 10px 2px; color: #a9c1da; }
.custom-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; overflow: hidden; border: 1px solid #579ce9; border-radius: 23px; background: radial-gradient(circle at 95% 12%,#286cc096,transparent 35%),linear-gradient(115deg,#12345bbd,#0c1b31d9); box-shadow: 0 14px 35px #07182d7a; }
.custom-cta h2 { margin: 6px 0; font-size: clamp(18px,3vw,25px); }
.custom-cta p { margin: 0; color: #afcee9; line-height: 1.5; font-size: 12px; }
.custom-cta .btn { flex: none; }
.review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.review-card { min-height: 136px; padding: 18px; border: 1px solid #42688e; border-radius: 19px; background: #112840d9; }
.review-card .stars { color: #ffe69a; letter-spacing: .12em; }
.review-card strong { display: block; margin: 12px 0 6px; }
.review-card p { color: #cbdced; font-size: 12px; line-height: 1.55; }
.settings-card { display: grid; gap: 18px; max-width: 650px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.toggle-row small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.4; }
.toggle-row input { width: 21px; height: 21px; accent-color: #448dff; }
.ticket-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; width: 100%; color: var(--text); text-align: left; }
.ticket-row small { grid-column: 1/-1; color: var(--muted); }
.message-list { display: grid; gap: 12px; max-height: 480px; margin: 20px 0; overflow-y: auto; }
.ticket-message { max-width: 90%; padding: 13px 15px; border: 1px solid #476b90; border-radius: 15px; background: #183857; }
.ticket-message.mine { justify-self: end; background: #23518a; }
.ticket-message p { margin: 7px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-message small { color: #aec8df; }
.admin-ticket-layout { display: grid; grid-template-columns: minmax(190px,1fr) minmax(0,1.4fr); gap: 14px; }
.key-reveal { margin-top: 20px; padding: 15px; border: 1px solid #68a7e9; border-radius: 13px; background: #193d64; }
.key-reveal code { display: block; margin-bottom: 13px; overflow-wrap: anywhere; }
.wallet-card { display: grid; justify-items: start; gap: 13px; max-width: 600px; padding: 27px; background: linear-gradient(120deg,#173c68,#11263f); }
.wallet-card strong { font-size: 33px; }
.wallet-trigger { transition: border-color .2s, transform .2s; }
.wallet-trigger:hover { border-color: #7eb7ff; transform: translateY(-2px); }
.wallet-hero { position:relative;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:28px;background:linear-gradient(120deg,#174477,#11263f);overflow:hidden; }
.wallet-hero strong { display:block;margin:8px 0;font-size:clamp(28px,5vw,44px);letter-spacing:-.05em; }
.wallet-hero p { color:#b3cbe4; }
.wallet-orbit { display:grid;place-items:center;width:95px;height:95px;border:1px solid #91c7ff73;border-radius:29px;background:#559bea38;transform:rotate(-10deg); }
.wallet-orbit .ui-icon { width:44px;height:44px;color:#bce4ff; }
.wallet-grid,.api-layout { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:15px; }
.wallet-methods,.wallet-activity,.wallet-ledger,.api-main,.api-example { padding:23px; }
.wallet-options { display:grid;gap:9px; }
.wallet-option { display:flex;align-items:center;gap:12px;padding:15px;border:1px solid #41658c;border-radius:15px;background:#143456ab;cursor:pointer;transition:border-color .2s,transform .2s; }
.wallet-option:has(input:checked) { border-color:#8bcaff;background:#214e7a;transform:translateY(-2px); }
.wallet-option.disabled { opacity:.55;cursor:not-allowed; }
.wallet-option input { accent-color:#5ca9ff; }
.wallet-option span { display:grid;gap:5px; }
.wallet-option small,.wallet-topup small { color:var(--muted);font-size:11px;line-height:1.4; }
.wallet-fineprint { margin-top:18px;font-size:11px; }
.wallet-topup { display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 0;border-bottom:1px solid var(--border); }
.wallet-topup>span:first-child { display:grid;gap:4px;margin-right:auto; }
.wallet-topup a { width:100%;font-size:12px;font-weight:700; }
.api-heading { display:flex;align-items:center;gap:12px; }
.api-heading h2 { margin:0; }
.api-heading p { margin:5px 0; }
.api-permissions { display:flex;flex-wrap:wrap;gap:7px;margin:20px 0; }
.api-status { display:grid;gap:5px;margin:18px 0;padding:16px;border:1px solid var(--border);border-radius:13px;background:#112b47; }
.api-status span { color:var(--muted);font-size:12px; }
.api-example pre { overflow:auto;padding:18px;border:1px solid var(--border);border-radius:13px;background:#09182b;color:#a9dcff;font-size:12px;line-height:1.6; }
.news-channel { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.news-card time { color: #8fc4f4; font-size: 11px; }
.news-card p { white-space: pre-wrap; overflow-wrap: anywhere; }
.wrap { flex-wrap: wrap; }
html[data-theme="light"] { color-scheme: light; --bg:#eef5ff; --surface:#fff; --border:#c2d7ec; --text:#162d47; --muted:#496481; --blue:#206cdd; --cyan:#155ead; --danger:#b8243d; }
html[data-theme="light"] body { background:linear-gradient(145deg,#ecf6ff,#f9fcff);color:var(--text); }
html[data-theme="light"] body::before,html[data-theme="light"] .cosmic-video { filter:invert(1) grayscale(1) contrast(.83); opacity:.18; }
html[data-theme="light"] .glow { opacity:.11; }
html[data-theme="light"] .meteor { background:#183857; box-shadow:0 0 6px 2px #1a4c7b77; }
html[data-theme="light"] .meteor::before { background:linear-gradient(90deg,#0d355b,#4b7498aa 24%,transparent); }
html[data-theme="light"] .hero { background:linear-gradient(112deg,#eff8ff,#d9ecff);border-color:#a8c8ea;box-shadow:0 18px 45px #4276a42d; }
html[data-theme="light"] .hero p,html[data-theme="light"] .custom-cta p { color:#415f7d; }
html[data-theme="light"] .cat-card,html[data-theme="light"] .product-card,html[data-theme="light"] .card,html[data-theme="light"] .review-card { background:#fffffff2;border-color:#c5d9ed;box-shadow:0 9px 25px #44729b15;color:var(--text); }
html[data-theme="light"] .product-cover,html[data-theme="light"] .gallery-track { background:#e7f2ff; }
html[data-theme="light"] .custom-cta,html[data-theme="light"] .wallet-card { background:linear-gradient(115deg,#deefff,#f8fbff);border-color:#a9c9eb;color:var(--text); }
html[data-theme="light"] .nav,html[data-theme="light"] .account-menu { background:#fffffff4;border-color:#bed4e9;box-shadow:0 15px 35px #365d801f; }
html[data-theme="light"] .nav :is(button,a),html[data-theme="light"] .account-menu button { color:#3d5b7a; }
html[data-theme="light"] .nav :is(button,a).on { color:#145ab5;background:#ddebff; }
html[data-theme="light"] .pill,html[data-theme="light"] .menu-toggle { color:#245178;background:#fff;border-color:#c0d6ed; }
html[data-theme="light"] .field,html[data-theme="light"] .filters,html[data-theme="light"] .tabs button,html[data-theme="light"] .admin-menu button { color:#193652;background:#fff;border-color:#b8d1ea; }
html[data-theme="light"] .btn.ghost { color:#205a9a;background:#eaf4ff;border-color:#b0cdea; }
html[data-theme="light"] .price,html[data-theme="light"] .review-proof,html[data-theme="light"] .footer-title,html[data-theme="light"] .review-card p { color:#194c82; }
html[data-theme="light"] .tag,html[data-theme="light"] .badge { color:#245c9b;background:#e2efff;border-color:#bfd8f3; }
html[data-theme="light"] .site-footer { border-color:#c4d9ec;color:#55718e; }
html[data-theme="light"] .ticket-message { color:#204568;background:#e2f0ff; }
html[data-theme="light"] .ticket-message.mine { background:#d0e6ff; }
html[data-theme="light"] .ticket-message small { color:#506d88; }
html[data-theme="light"] a,html[data-theme="light"] .account-menu small,html[data-theme="light"] .eyebrow,html[data-theme="light"] .news-card time { color:#215e9e; }
html[data-theme="light"] .account-menu button .ui-icon { color:#2b75be; }
html[data-theme="light"] .profile-hero { background:radial-gradient(circle at 95% 0%,#82bdff80,transparent 45%),linear-gradient(130deg,#edf7ff,#dceeff);border-color:#a9c9e8; }
html[data-theme="light"] .profile-kicker,html[data-theme="light"] .profile-meta,html[data-theme="light"] .profile-link,html[data-theme="light"] .profile-text-link { color:#245e9d; }
html[data-theme="light"] .profile-status { color:#195a92;background:#d4ebff;border-color:#a9cbe9; }
html[data-theme="light"] .profile-stat-icon,html[data-theme="light"] .profile-offer strong { color:#185b9b;background:#e0efff;border-color:#bdd9f5; }
html[data-theme="light"] .profile-connection { color:#516780;background:#edf3f8;border-color:#cbd8e4; }
html[data-theme="light"] .profile-connection.on { color:#14654f;background:#d9f6ed;border-color:#a4dfcc; }
html[data-theme="light"] .profile-referral-link { color:#2b5d88;background:#f0f7ff;border-color:#b7d3eb; }
html[data-theme="light"] .profile-shortcut:hover,html[data-theme="light"] .profile-recent-row:hover:is(button) { background:#e5f2ff; }
html[data-theme="light"] .cart-header,html[data-theme="light"] .cart-remove,html[data-theme="light"] .cart-thumb { color:#215d92;background:#e5f3ff;border-color:#b6d4f0; }
html[data-theme="light"] .cart-totals .cart-discount strong,html[data-theme="light"] .promo-applied { color:#16805e; }
html[data-theme="light"] .cart-empty-icon,html[data-theme="light"] .cart-order-id { color:#195d98;background:#e2f2ff; }
html[data-theme="light"] .referral-hero { background:linear-gradient(125deg,#e8f4ff,#d0e9ff);border-color:#a7c8e9; }
html[data-theme="light"] .referral-hero p { color:#426489; }
html[data-theme="light"] .wallet-hero { background:linear-gradient(120deg,#d3eaff,#e9f5ff); }
html[data-theme="light"] .wallet-hero p { color:#496e92; }
html[data-theme="light"] .wallet-orbit { background:#9acafa77;border-color:#8db9df; }
html[data-theme="light"] .wallet-orbit .ui-icon { color:#205b9c; }
html[data-theme="light"] .wallet-option,html[data-theme="light"] .api-status { background:#edf6ff;border-color:#bbd4ed; }
html[data-theme="light"] .wallet-option:has(input:checked) { background:#daecff;border-color:#3986d6; }
html[data-theme="light"] .api-example pre { background:#e5f1fd;color:#17426b; }
html[data-motion="off"] .cosmic-video,html[data-motion="off"] .meteor-layer { display:none; }
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after { animation:none !important;transition:none !important;scroll-behavior:auto !important; }
.skeleton-page { padding-top: 8px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.skeleton-card { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; padding: 0 12px 16px; background: #122033; }
.skeleton-cover { height: 120px; margin: 0 -12px 16px; }
.skeleton-line { width: 82%; height: 13px; border-radius: 8px; margin: 10px 0; }
.skeleton-line.short { width: 38%; }
.skeleton-line.title { width: 65%; height: 32px; }
.skeleton-cover, .skeleton-line { background: linear-gradient(110deg, #1c2c40 8%, #314b65 18%, #1c2c40 33%); background-size: 240% 100%; animation: skeleton-shimmer 1.5s linear infinite; }
.success-sparks { position: absolute; right: 24px; top: 18px; color: #80caff; font-size: 22px; letter-spacing: 8px; animation: sparks-in .8s ease-out both; pointer-events: none; }
@keyframes skeleton-shimmer { to { background-position-x: -240%; } }
@keyframes nav-pop { 50% { transform: translateY(-3px) scale(1.12); } }
@keyframes sparks-in { from { opacity: 0; transform: translateY(14px) scale(.4); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes card-sheen { to { background-position-x: -300%; } }

@media (max-width: 750px) {
  .cat-card, .product-card, .card, .nav { backdrop-filter: none; }
  .app-shell { padding: 17px 15px 112px; }
  .header { margin-bottom: 22px; }
  .brand { font-size: 12px; gap: 8px; }
  .mark { width: 36px; height: 36px; border-radius: 11px; }
  .pill { font-size: 11px; padding: 7px 9px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero { min-height: 240px; padding: 22px; }
  .hero h1 { font-size: clamp(27px, 7vw, 34px); }
  .hero-content { max-width: 73%; }
  .hero-art { width: 52%; right: -27px; top: 49%; opacity: .92; }
  .hero p { max-width: 235px; font-size: 11px; line-height: 1.5; margin-bottom: 18px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .09em; }
  .hero-cta { font-size: 12px; padding: 10px 12px; }
  .skeleton-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cat-card { min-height: 112px; }
  .product-cover { height: 125px; }
  .product-info { padding: 12px; }
  .product-info h3 { min-height: 36px; }
  .price-line { align-items: flex-start; flex-direction: column; gap: 3px; }
  .detail { grid-template-columns: 1fr; }
  .detail .product-cover { height: 210px; }
  .gallery-slide { height: 225px; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-menu { display: flex; overflow-x: auto; scrollbar-width: none; }
  .admin-menu button { flex: none; white-space: nowrap; }
  .form.two { grid-template-columns: 1fr; }
  .filter-fields { grid-template-columns: 1fr; }
  .account-menu { right: 15px; top: 64px; }
  .custom-cta, .news-channel { align-items: flex-start; flex-direction: column; }
  .review-grid, .admin-ticket-layout { grid-template-columns: 1fr; }
  .profile-stats { gap:8px; }
  .profile-stat { padding:13px; }
  .profile-stat strong { font-size:19px; }
  .profile-stat .profile-text-link { font-size:10px; }
  .profile-shortcuts { gap:8px; }
  .profile-shortcut { flex-wrap:wrap; gap:6px; padding:11px; }
  .profile-shortcut>span { flex-basis:calc(100% - 28px); font-size:11px; }
  .profile-shortcut>.ui-icon:last-child { display:none; }
  .profile-linked-grid,.profile-duo { grid-template-columns:1fr; }
  .cart-layout { grid-template-columns:1fr; }
  .wallet-grid,.api-layout { grid-template-columns:1fr; }
  .cart-summary { position:relative; }
  .referral-art { width:85px; height:85px; border-radius:22px; font-size:50px; }
  .cookie-notice { flex-direction:column; align-items:flex-start; }
}
@media (max-width:390px) {
  .profile-hero { padding:19px; }
  .profile-identity .avatar { width:58px; height:58px; }
  .profile-stat { padding:10px; }
  .profile-stat strong { font-size:16px; }
  .profile-stat .profile-stat-icon { width:30px; height:30px; }
  .profile-shortcuts { grid-template-columns:1fr; }
  .profile-shortcut>span { flex-basis:auto; }
  .cart-header { width:34px; height:34px; }
  .cart-promo-row { flex-wrap:wrap; }
  .cart-promo-row .btn { flex:1; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmic-video { display: none; }
  .meteor-layer { display: none; }
  .btn, .cat-card, .product-card { transition: none; }
  .nav :is(button,a).on .icon, .success-sparks, .skeleton-line, .skeleton-cover { animation: none; }
  .product-card.selected::after { animation: none; background: none; }
  .gallery-track { scroll-behavior: auto; }
}
/* Verified reviews */
.product-reviews{scroll-margin-top:26px}
.product-reviews .section-title{align-items:center;gap:12px}
.product-reviews .section-title h2{margin:4px 0}
.review-form{margin:16px 0 20px;max-width:740px}
.review-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.product-review{min-width:0}
.product-review .row{align-items:center}
.product-review p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.product-review small{color:var(--muted,#9eafca)}
.review-stars{color:#f7cb72;letter-spacing:.09em;font-size:1.1rem}
.payment-config-form{max-width:900px}
.payment-config-field{display:grid;gap:6px;padding:12px 0;border-bottom:1px solid #8497b326}
.payment-config-field small{color:var(--muted,#9eafca)}
.payment-config-field .toggle-row{max-width:300px;font-size:.86rem}

/* Version comparison stays readable on mobile. */
.update-file-list{display:grid;gap:8px;margin:18px 0;max-height:420px;overflow:auto}
.update-file{display:grid;grid-template-columns:108px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid #ffffff15;border-radius:12px}
.update-file code{overflow-wrap:anywhere;font-size:13px}.update-file small{white-space:nowrap;color:#a9b8ce}
#updateComparison details{margin:18px 0}#updateComparison summary{cursor:pointer;font-weight:600}
#updateComparison ul{max-height:240px;overflow:auto;overflow-wrap:anywhere}
.product-review p,.review-card p{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:600px){.update-file{grid-template-columns:1fr auto}.update-file code{grid-column:1/-1;grid-row:2}.update-file .badge{justify-self:start}}


/* 2026 mobile-first admin refresh */
.login-wrap {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}
.login-card {
  width: min(100%, 520px);
  border: 1px solid #42688f;
  border-radius: 26px;
  padding: clamp(24px, 6vw, 38px);
  background: linear-gradient(150deg, rgba(17, 34, 57, .97), rgba(8, 18, 32, .97));
  color: var(--text);
  box-shadow: 0 24px 70px #000b, inset 0 1px 0 #ffffff1c;
}
.login-card > .mark { margin-bottom: 18px; }
.login-card h1 { margin: 13px 0 12px; color: var(--text); font-size: clamp(30px, 8vw, 46px); }
.login-card .subtle { color: #b8cbe0; font-size: 13px; }
.login-buttons { display: grid; gap: 12px; margin: 22px 0 16px; }
.login-buttons > div { min-height: 44px; max-width: 100%; overflow: hidden; }
.login-buttons iframe { max-width: 100% !important; }
.consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-top: 20px;
  color: #c4d4e6;
  line-height: 1.5;
}
.consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--blue); }
.telegram-login-fallback {
  display: grid;
  gap: 10px;
  border: 1px solid #395c7e;
  border-radius: 14px;
  padding: 14px;
  background: #10243b;
}
.telegram-login-fallback .btn { width: 100%; }

.admin-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 8px 0 20px; }
.admin-heading h1 { margin: 0 0 7px; }
.admin-content { min-width: 0; }
.admin-menu button { min-height: 45px; }
.admin-menu button span { overflow: hidden; text-overflow: ellipsis; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-module { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 13px; min-width: 0; }
.settings-module.compact { min-height: 150px; }
.settings-module.wide-module { grid-column: 1 / -1; }
.settings-module h3 { margin: 1px 0 7px; }
.settings-module p { margin: 0; }
.settings-module-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #4c7aaa; border-radius: 13px; background: #183d65; color: #b7e1ff; }
.settings-module-icon .ui-icon { width: 20px; height: 20px; }
.status-line { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.inline-settings-form { display: flex; gap: 9px; margin-top: 13px; }
.inline-settings-form .field { flex: 1; min-width: 0; }
.table-actions { display: flex; gap: 7px; }

@media (max-width: 750px) {
  .app-shell { width: 100%; max-width: 100%; padding: 14px 12px calc(104px + env(safe-area-inset-bottom)); }
  .header { position: relative; gap: 8px; margin-bottom: 18px; }
  .header-right { gap: 6px; min-width: 0; }
  .brand { min-width: 0; letter-spacing: .08em; }
  .header .avatar { display: none; }
  .pill { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .account-menu { position: fixed; top: calc(64px + env(safe-area-inset-top)); right: 12px; left: 12px; width: auto; max-height: calc(100dvh - 150px); overflow-y: auto; }
  .admin-heading { margin-bottom: 14px; }
  .admin-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .admin-menu {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    overflow: visible !important;
    padding: 0;
  }
  .admin-menu button { width: 100%; min-height: 50px; flex: none; justify-content: flex-start; border-radius: 14px; padding: 13px 14px; white-space: normal !important; font-size: 13px; }
  .admin-content > h2 { margin-top: 4px; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-module, .settings-module.wide-module { grid-column: auto; }
  .settings-module { grid-template-columns: 42px minmax(0, 1fr); }
  .settings-module > .btn { grid-column: 1 / -1; width: 100%; }
  .inline-settings-form { flex-direction: column; }
  .inline-settings-form .btn { width: 100%; }
  .admin-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .admin-actions .btn { width: 100%; min-height: 44px; }
  .row { align-items: flex-start; flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .table-wrap { overflow: visible; border: 0; padding: 0; background: transparent; box-shadow: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tbody { display: grid; gap: 10px; }
  .table tr { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(155deg, #17283cf2, #0d1726f5); }
  .table td {
    display: grid;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    gap: 10px;
    max-width: none;
    min-height: 39px;
    border-bottom: 1px solid #304259;
    padding: 10px 12px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .table td:last-child { border-bottom: 0; }
  .table td::before { content: attr(data-label); color: #8fb9df; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  .table-actions { display: flex !important; grid-template-columns: none !important; flex-wrap: wrap; }
  .table-actions::before { width: 100%; }
  .table-actions .btn { flex: 1; min-width: 120px; }
  .login-card { border-radius: 21px; padding: 24px 18px; }
}

@media (max-width: 430px) {
  .brand { font-size: 11px; }
  .mark { width: 34px; height: 34px; }
  .menu-toggle, .cart-header { width: 36px; height: 36px; }
  .pill { max-width: 92px; padding-inline: 8px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: 260px; border-radius: 22px; padding: 21px 17px; }
  .hero-content { max-width: 78%; }
  .hero-art { right: -42px; width: 58%; opacity: .8; }
  .nav :is(button,a) { min-width: 0; flex: 1; padding-inline: 4px; }
  .admin-heading { align-items: flex-start; flex-direction: column; }
}


/* Mobile touch feedback: remove Android/Telegram WebView blue tap boxes without
   sacrificing deliberate press animation. Keyboard focus remains visible on
   desktop; coarse touch pointers get a clean native-looking press state. */
html {
  -webkit-tap-highlight-color: transparent;
}
:where(
  button,
  a,
  summary,
  [role="button"],
  .btn,
  .cat-card,
  .product-card,
  .profile-shortcut,
  .profile-recent-row
) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:where(button, .btn, [role="button"]) {
  -webkit-appearance: none;
  appearance: none;
}
:where(
  button,
  a,
  summary,
  [role="button"],
  .btn,
  .cat-card,
  .product-card,
  .profile-shortcut,
  .profile-recent-row
) {
  -webkit-user-select: none;
  user-select: none;
}

/* One consistent press animation for customer UI + admin UI. */
:where(
  .btn,
  .admin-menu button,
  .nav :is(button,a),
  .tabs button,
  .account-menu button,
  .menu-toggle,
  .cart-header,
  .cat-card,
  .product-card,
  .profile-shortcut,
  .profile-recent-row:is(button),
  .table-actions button
) {
  transform-origin: center;
  transition:
    transform .14s cubic-bezier(.2,.8,.2,1),
    filter .14s ease,
    background-color .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}
:where(
  .btn,
  .admin-menu button,
  .nav :is(button,a),
  .tabs button,
  .account-menu button,
  .menu-toggle,
  .cart-header,
  .cat-card,
  .product-card,
  .profile-shortcut,
  .profile-recent-row:is(button),
  .table-actions button
):active:not(:disabled) {
  transform: scale(.965);
  filter: brightness(.96);
  transition-duration: .055s;
}

/* Some Android WebView builds treat a finger tap as :focus-visible and draw a
   blue rectangular focus ring. Disable that ring only for coarse touch input. */
@media (hover: none), (pointer: coarse) {
  :where(button, a, summary, [role="button"]):focus,
  :where(button, a, summary, [role="button"]):focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
  }
  .btn:hover,
  .cat-card:hover,
  .product-card:hover {
    transform: none;
  }
  :where(
    .btn,
    .admin-menu button,
    .nav :is(button,a),
    .tabs button,
    .account-menu button,
    .menu-toggle,
    .cart-header,
    .cat-card,
    .product-card,
    .profile-shortcut,
    .profile-recent-row:is(button),
    .table-actions button
  ):active:not(:disabled) {
    transform: scale(.965);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .btn,
    .admin-menu button,
    .nav :is(button,a),
    .tabs button,
    .account-menu button,
    .menu-toggle,
    .cart-header,
    .cat-card,
    .product-card,
    .profile-shortcut,
    .profile-recent-row:is(button),
    .table-actions button
  ) {
    transition-duration: .01ms !important;
  }
}

/* Short composited feedback: no permanent animation on every card. */
.product-card{backdrop-filter:none;contain:layout style}.product-card.selected::after{display:none;animation:none}
.product-card.selected{box-shadow:0 0 0 1px #d5ecff}.select-hint{min-height:12px;visibility:hidden}
.product-card.selected .select-hint{visibility:visible}.product-cover img{content-visibility:auto}
.gallery-slide{contain:layout paint}.gallery-slide img{cursor:zoom-in}
.gallery-dot{width:28px;height:28px;background:none;transition:none;display:grid;place-items:center}
.gallery-dot::before{content:'';width:7px;height:7px;border-radius:6px;background:#718ca8;transition:transform .15s}
.gallery-dot.on{width:28px;background:none}.gallery-dot.on::before{background:#77baff;transform:scaleX(2)}
.meteor-layer.paused .meteor{animation-play-state:paused}.image-view-open{overflow:hidden}
.product-image-dialog{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:20px;border:0;background:#060c16;color:white;overflow:hidden}
.product-image-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr);justify-items:center;gap:16px}
.product-image-dialog::backdrop{background:#060c16}.product-image-dialog button{justify-self:end}
.product-image-dialog img{display:block;width:100%;height:100%;object-fit:contain}
@media(hover:none){.product-card:hover,.cat-card:hover{transform:none}}

/* Taps, navigation and menus share a short, responsive motion curve. */
.page-content{min-width:0}
.product-card{transition:transform .24s cubic-bezier(.2,.75,.3,1),border-color .2s;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.product-card::before{content:'';position:absolute;inset:0;border:2px solid #b5e1ff;border-radius:inherit;pointer-events:none;opacity:0;z-index:1}
.product-card.tap-highlight::before{animation:tap-highlight .46s ease-out both}
@keyframes tap-highlight{0%{opacity:.85}100%{opacity:0}}
.product-card.selected{border-color:#b5e1ff;box-shadow:0 0 0 1px #b5e1ff}
.product-card .select-hint{display:block;visibility:visible;opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s}
.product-card.selected .select-hint{opacity:1;transform:translateY(0)}
.product-card:focus-visible,.gallery-slide img:focus-visible{outline:2px solid #b5e1ff;outline-offset:3px}
.product-card.is-opening{pointer-events:none}
.account-menu:not([hidden]){animation:menu-appear .18s ease-out both;transform-origin:top right}
@keyframes menu-appear{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.btn,.nav :is(button,a),.wallet-trigger{touch-action:manipulation;transition:transform .16s ease-out,filter .16s ease-out}
.btn:active,.nav :is(button,a):active,.wallet-trigger:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){.product-card,.select-hint,.btn,.nav :is(button,a),.wallet-trigger{transition:none!important}.product-card::before,.account-menu{animation:none!important}}
html[data-motion="off"] .product-card::before,html[data-motion="off"] .account-menu{animation:none!important}

.wipe-danger{border-color:#b54a60;background:linear-gradient(145deg,#3b1c29ee,#151829ee)}
.btn.danger{background:#a42c43;border-color:#db6880;box-shadow:none;color:#fff}
.wipe-dialog{box-sizing:border-box;width:min(92vw,560px);max-height:90dvh;padding:24px;border:1px solid #c3576c;border-radius:22px;background:#101c2c;color:#f5f7ff;overflow:auto}
.wipe-dialog::backdrop{background:#050b15d9}.wipe-dialog h2{margin:0}.wipe-dialog p{line-height:1.5}.wipe-dialog input[type="checkbox"]{accent-color:#dd7287}
html[data-theme="light"] .wipe-danger{background:#fff2f3;color:#481f2b}.wipe-danger pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* Mobile shop layout: compact cards, readable forms and one vertical admin menu. */
html{-webkit-tap-highlight-color:transparent;scroll-padding-bottom:100px}
button,a,summary,[role="button"]{-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default;opacity:.5}
.admin-navigation{min-width:0}.admin-navigation>summary{display:none}
.admin-navigation:not([open])>.admin-menu{display:grid!important}
.admin-menu{grid-template-columns:minmax(0,1fr)}
.admin-menu button{min-width:0;text-align:left;gap:12px;justify-content:flex-start}
.login-buttons>div{overflow:visible}.login-buttons{gap:16px}
.telegram-login-button{min-height:50px;width:100%;font-size:14px}
.login-widget-details{margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:14px}
.login-widget-details summary{font-size:13px;padding:4px;cursor:pointer}.widget-slot{padding-top:12px;overflow:hidden}
.login-divider{text-align:center;color:var(--muted);font-size:12px}.login-footnote{font-size:12px!important}
.login-session-note{padding:12px;border:1px solid #94664d;border-radius:14px;font-size:13px;line-height:1.5;margin-bottom:16px;background:#31291d}
.catalog-pagination{display:flex;gap:12px;align-items:center;justify-content:center;margin:24px 0}
@media(max-width:750px){
  body{font-size:14px;line-height:1.5}body::before{opacity:.3}.cosmic-video{opacity:.24}
  .app-shell{padding:12px 14px calc(100px + env(safe-area-inset-bottom));width:100%;max-width:100%}
  .header{padding:10px 0 16px;margin-bottom:12px;gap:8px;min-width:0}
  .brand{font-size:11px;letter-spacing:.06em;gap:7px}.header-right{gap:6px}
  h1{font-size:clamp(26px,7vw,36px);line-height:1.15;overflow-wrap:anywhere}
  h2{font-size:21px;line-height:1.3}h3{font-size:16px;line-height:1.4}
  .section{margin-top:24px}.section-title{gap:10px;align-items:center}.section-title a{font-size:12px;flex:none}
  .hero{min-height:260px;padding:24px 20px;border-radius:24px;border-color:#31577c}
  .hero-content{max-width:77%;position:relative;z-index:1}.hero h1{font-size:clamp(29px,8vw,40px)}
  .hero-art{width:55%;right:-48px;opacity:.72;top:55%}.hero p{font-size:13px;max-width:220px}
  .card,.cat-card,.product-card{border-radius:18px;background:#102033ee;box-shadow:0 8px 24px #0002}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cat-card{min-height:104px;padding:15px}
  .product-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px}
  .product-card{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:stretch;min-height:170px}
  .product-cover{height:auto;min-height:160px;border-right:1px solid #38516b50}.product-cover img{height:100%;max-height:190px;object-fit:cover}
  .product-cover img.illustration{width:100%;height:100%;object-fit:contain;filter:none}
  .product-info{padding:14px;min-width:0}.product-info h3{font-size:14px;min-height:0;margin:6px 0 9px;line-height:1.35}
  .product-info .tag{max-width:100%;font-size:9px}.price-line{flex-direction:row;align-items:center;flex-wrap:wrap;gap:5px 10px}
  .price{font-size:18px}.price-line .subtle{font-size:11px}.product-card .add-cart{min-height:36px;padding:7px 10px;margin-top:8px;font-size:11px}
  .product-card .select-hint{font-size:10px;margin-top:6px;min-height:15px}
  .field,textarea,select,input:not([type="checkbox"]):not([type="radio"]){font-size:16px;max-width:100%;min-width:0}
  .field{min-height:48px;border-radius:13px}.form{gap:14px}.form label{font-size:13px;min-width:0}
  .btn:not(.small){min-height:46px}.btn.small{min-height:40px}.btn{border-radius:13px;font-size:13px}
  .profile-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}.profile-actions .btn{width:100%}
  .profile-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-stat{padding:12px 9px;min-width:0}.profile-stat strong{font-size:18px;overflow-wrap:anywhere}
  .profile-hero{padding:20px}.profile-identity{gap:12px}.profile-identity h1{font-size:25px}.profile-shortcuts{grid-template-columns:1fr}
  .profile-linked-grid,.profile-duo,.api-layout,.wallet-grid,.cart-layout,.review-grid,.admin-ticket-layout{grid-template-columns:minmax(0,1fr)}
  .gallery-slide{height:280px}.detail .gallery{margin-bottom:8px}.detail h1{font-size:27px}
  .cart-item{flex-wrap:wrap;min-width:0}.cart-totals,.cart-summary{min-width:0}.cart-payment-card{padding:22px 18px}.cart-payment-veil{padding:12px}
  .cart-promo-row{flex-wrap:wrap}.cart-promo-row .btn{width:100%}
  .wallet-option{min-height:58px}.api-key,.copy{overflow-wrap:anywhere;max-width:100%;word-break:break-word}
  .cookie-notice{bottom:calc(82px + env(safe-area-inset-bottom));left:12px;right:12px;width:auto;padding:14px}.cookie-notice .btn{align-self:stretch}
  .nav{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-width:none;border-radius:22px;padding:7px 4px;background:#0c1c31f5;box-shadow:0 10px 28px #0006}
  .nav :is(button,a){font-size:10px;min-height:52px;min-width:0;flex:1;padding:5px 2px;gap:4px}.nav .ui-icon{width:21px;height:21px}
  .site-footer{padding:28px 4px 10px;font-size:12px}.site-footer a{min-height:36px;line-height:1.5}
  .settings-grid{grid-template-columns:minmax(0,1fr)}.settings-module.compact{min-height:0}.settings-module .btn{min-height:44px}
  .admin-heading{flex-direction:row;align-items:center;margin-bottom:14px}.admin-heading h1{font-size:27px}.admin-heading p{margin-bottom:0;font-size:12px}
  .admin-layout{gap:18px}.admin-navigation{border:1px solid #3e5c7c;border-radius:16px;background:#12243a}
  .admin-navigation>summary{display:flex;align-items:center;gap:10px;list-style:none;min-height:54px;padding:12px 14px;cursor:pointer}
  .admin-navigation>summary::-webkit-details-marker{display:none}.admin-navigation>summary span{flex:1;font-weight:700}.admin-navigation>summary small{font-size:10px;color:var(--muted)}
  .admin-navigation>summary>.ui-icon:last-child{transition:transform .2s}.admin-navigation[open]>summary>.ui-icon:last-child{transform:rotate(90deg)}
  .admin-navigation:not([open])>.admin-menu{display:none!important}.admin-navigation .admin-menu{padding:0 8px 8px;gap:5px;grid-template-columns:minmax(0,1fr);max-height:55dvh;overflow-y:auto!important;overscroll-behavior:contain}
  .admin-menu button{min-height:48px;border-radius:11px;padding:12px;white-space:normal!important}.admin-menu button span{white-space:normal;text-overflow:clip;overflow:visible}
  .admin-actions{grid-template-columns:minmax(0,1fr)}.admin-actions .btn{min-height:44px}.admin-content{overflow-wrap:anywhere;min-width:0}
  .admin-content .row.wrap>.row,.admin-content .row.wrap>.btn{width:100%}.admin-content .row.wrap>.row{display:grid;grid-template-columns:1fr;gap:8px}
  .admin-content .table td{font-size:12px}.admin-content .table-actions .btn{min-height:42px}
  .wipe-dialog{padding:22px 18px}.wipe-dialog h2{font-size:24px}.wipe-dialog .row{display:grid;grid-template-columns:1fr}.wipe-dialog .btn{width:100%}
  html.keyboard-open .nav{display:none}
}
@media(max-width:360px){.app-shell{padding-inline:10px}.product-card{grid-template-columns:92px minmax(0,1fr)}.product-info{padding:12px}.header .pill{max-width:82px}.brand{font-size:10px}.hero-content{max-width:84%}.hero-art{opacity:.45}.gallery-slide{height:240px}}
html[data-input="touch"] :where(button,a,summary,[role="button"]):focus{outline:none!important}
html[data-input="keyboard"] :where(button,a,summary,[role="button"]):focus-visible{outline:2px solid #dae9f8!important;outline-offset:3px!important}

.admin-product-thumb{display:block;width:56px;height:56px;object-fit:cover;border-radius:12px;background:#132e4b}
.table-cell-details{min-width:0;max-width:100%;font-size:12px}.table-cell-details summary{cursor:pointer;overflow-wrap:anywhere;line-height:1.5}.table-cell-details>div{margin-top:12px;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:750px){.product-card .product-cover{position:relative}.product-card .product-cover img,.product-card .product-cover img.illustration{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;object-fit:contain;content-visibility:visible}}

/* Keep four payment choices reachable on small screens and with large text. */
.cart-payment-card{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.cart-pay-option:has(input:focus-visible){outline:2px solid #c4e8ff;outline-offset:3px}