@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --app-height: 100vh;
  --bg: var(--tg-theme-bg-color, #f1f1f1);
  --surface: var(--tg-theme-section-bg-color, #ffffff);
  --surface-2: var(--tg-theme-secondary-bg-color, #e9e9eb);
  --text: var(--tg-theme-text-color, #101011);
  --hint: var(--tg-theme-hint-color, #77777c);
  --link: var(--tg-theme-link-color, #2457ff);
  --button: var(--tg-theme-button-color, #2457ff);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --separator: var(--tg-theme-section-separator-color, rgba(0,0,0,.09));
  --destructive: var(--tg-theme-destructive-text-color, #e43b3b);
  --blue: #2457ff;
  --radius: 18px;
  --nav-height: 67px;
}

@supports (height: 100dvh) { :root { --app-height: 100dvh; } }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { width: 100%; min-width: 300px; min-height: 100%; overflow-x: clip; scroll-padding-bottom: calc(var(--nav-height) + 28px + env(safe-area-inset-bottom)); }
body { width: 100%; min-width: 300px; min-height: var(--app-height); overflow-x: clip; overflow-y: visible; background: var(--bg); color: var(--text); font-family: "Onest", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; touch-action: pan-y; }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden], .hidden { display: none !important; }
.copy-helper { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.app { min-height: var(--app-height); padding: 0 0 calc(var(--nav-height) + 28px + env(safe-area-inset-bottom)); }
.screen { min-height: calc(var(--app-height) - var(--nav-height)); overflow: visible; animation: enter .18s ease-out; }
@keyframes enter { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.boot { min-height: 82vh; display: grid; place-items: center; align-content: center; gap: 18px; color: var(--hint); font-size: 13px; }
.boot__mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; background: #0b0b0c; color: #fff; font-size: 28px; font-weight: 900; }
.boot__mark img { width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.spinner { width: 24px; height: 24px; border: 2px solid var(--separator); border-top-color: var(--button); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.topbar { position: sticky; top: 0; z-index: 20; min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 91%, transparent); border-bottom: .5px solid var(--separator); backdrop-filter: blur(18px); }
.topbar__brand { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 900; letter-spacing: -.04em; }
.topbar__mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--text); color: var(--bg); font-size: 14px; }
.topbar__meta { margin-left: auto; color: var(--hint); font-size: 12px; font-weight: 600; }

.mast { position: relative; margin: 12px 12px 0; min-height: 158px; overflow: hidden; border-radius: 22px; background: #fff; color: #0a0a0a; }
.mast img { width: 100%; height: 158px; object-fit: cover; }
.mast::after { content: none; }

.section-title { margin: 24px 16px 10px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.section-title h1, .section-title h2 { font-size: 27px; line-height: 1; letter-spacing: -.05em; }
.section-title p { color: var(--hint); font-size: 12px; }

.search { margin: 14px 16px 0; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; background: var(--surface-2); }
.search svg { width: 19px; color: var(--hint); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; }
.search input::placeholder { color: var(--hint); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 13px 16px 5px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: 36px; padding: 0 15px; border: .5px solid var(--separator); border-radius: 18px; background: var(--surface); color: var(--hint); font-size: 13px; font-weight: 700; }
.chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 12px 22px; }
.product { min-width: 0; overflow: hidden; border-radius: 17px; background: var(--surface); text-align: left; box-shadow: 0 1px 0 var(--separator); }
.product:active { transform: scale(.985); }
.product__media { position: relative; aspect-ratio: 1.22; overflow: hidden; background: #0c0c0d; }
.product__media img { width: 100%; height: 100%; object-fit: cover; }
.product__fallback { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-size: 38px; font-weight: 900; letter-spacing: -.08em; }
.product__sale { position: absolute; top: 8px; right: 8px; padding: 4px 7px; border-radius: 8px; background: #2457ff; color: #fff; font-size: 10px; font-weight: 900; }
.product__body { min-height: 128px; display: flex; flex-direction: column; padding: 12px; }
.product__name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; font-weight: 750; line-height: 1.18; letter-spacing: -.025em; }
.product__meta { margin-top: 6px; color: var(--hint); font-size: 11px; }
.product__price { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; gap: 6px; font-size: 16px; font-weight: 850; letter-spacing: -.035em; }
.product__price s { color: var(--hint); font-size: 10px; font-weight: 500; }
.product.off { opacity: .55; }

.empty { margin: 22px 16px; padding: 44px 24px; border-radius: var(--radius); background: var(--surface); text-align: center; }
.empty h2 { font-size: 21px; letter-spacing: -.03em; }
.empty p { margin-top: 9px; color: var(--hint); font-size: 14px; line-height: 1.5; }

.detail-media { position: relative; aspect-ratio: 16 / 10; background: #0b0b0c; overflow: hidden; }
.detail-media img { width: 100%; height: 100%; object-fit: cover; }
.detail-media__fallback { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-size: 72px; font-weight: 900; letter-spacing: -.09em; }
.detail-card { position: relative; z-index: 2; margin: -18px 12px 0; padding: 20px; border-radius: 22px; background: var(--surface); }
.kicker { color: var(--link); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.detail-card h1 { margin-top: 8px; font-size: 29px; line-height: 1.05; letter-spacing: -.055em; }
.detail-price { margin-top: 16px; display: flex; align-items: baseline; gap: 10px; font-size: 28px; font-weight: 900; letter-spacing: -.055em; }
.detail-price s { color: var(--hint); font-size: 14px; font-weight: 500; }
.detail-note { margin-top: 10px; color: var(--hint); font-size: 13px; }
.detail-desc,.detail-warranty,.detail-reservation,.order-reservation { margin: 12px; padding: 20px; border-radius: 18px; background: var(--surface); font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.detail-reservation,.order-reservation { display:grid; gap:4px; border:1px solid var(--separator); }
.detail-reservation b,.order-reservation b { font-size:14px; font-weight:900; }
.detail-reservation span,.order-reservation span { color:var(--hint); font-size:12px; line-height:1.45; }
.detail-warranty { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding-top:15px; padding-bottom:15px; }
.detail-desc small,.detail-warranty small { display: block; margin-bottom: 8px; color: var(--hint); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.detail-warranty small { flex:0 0 auto; margin:0; }
.detail-warranty span { min-width:0; text-align:right; font-size:14px; font-weight:800; overflow-wrap:anywhere; }
.quantity { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.quantity__label span { display: block; color: var(--hint); font-size: 12px; }
.quantity__label b { font-size: 14px; }
.stepper { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 13px; background: var(--surface-2); }
.stepper button { width: 38px; height: 36px; border-radius: 10px; font-size: 21px; }
.stepper button:active { background: var(--surface); }
.stepper b { min-width: 36px; text-align: center; }

.cart-list, .order-list { padding: 4px 12px 22px; }
.cart-row { margin-top: 10px; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 17px; background: var(--surface); }
.cart-row__img { width: 54px; height: 54px; overflow: hidden; border-radius: 13px; background: #0b0b0c; }
.cart-row__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__img span { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-weight: 900; }
.cart-row__name { font-size: 14px; font-weight: 750; line-height: 1.2; }
.cart-row__price { margin-top: 4px; color: var(--hint); font-size: 12px; }
.mini-stepper { display: grid; grid-template-columns: 30px 30px; gap: 4px; }
.mini-stepper button { height: 30px; border-radius: 9px; background: var(--surface-2); font-size: 17px; }
.mini-stepper span { grid-column: 1 / -1; text-align: center; color: var(--hint); font-size: 11px; font-weight: 700; }
.promo-box { margin: 2px 12px 0; padding: 15px; border-radius: 17px; background: var(--surface); }
.promo-box label { display: block; color: var(--hint); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.promo-box input { width: 100%; height: 43px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--separator); outline: 0; border-radius: 11px; background: var(--surface-2); font-size: 16px; text-transform: uppercase; }
.promo-box p { margin-top: 7px; color: var(--hint); font-size: 11px; }
.promo-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; margin-top:8px; }
.promo-entry input { margin-top:0; }
.promo-entry button { min-width:92px; padding:0 12px; border-radius:11px; background:#eee; color:#111; font-size:11px; font-weight:900; }
.promo-entry button:disabled { background:rgba(255,255,255,.09); color:#666; }
.promo-box p.promo-success { color:#e7e7e9; font-weight:850; }
.total-prices { display:flex; align-items:baseline; gap:8px; }
.total-prices s { color:#77777d; font-size:12px; }
.total { margin: 10px 12px; padding: 18px; display: flex; align-items: baseline; justify-content: space-between; border-radius: 18px; background: var(--surface); }
.total span { color: var(--hint); font-size: 13px; }
.total b { font-size: 25px; letter-spacing: -.05em; }

.order-card { margin-top: 10px; padding: 16px; border-radius: 18px; background: var(--surface); text-align: left; }
.order-card__top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.order-card__num { font-size: 17px; font-weight: 850; letter-spacing: -.03em; }
.order-card__items { margin-top: 5px; color: var(--hint); font-size: 12px; line-height: 1.4; }
.order-card__price { margin-top: 14px; font-size: 17px; font-weight: 850; }
.pill { flex: 0 0 auto; padding: 5px 8px; border-radius: 8px; background: var(--surface-2); color: var(--hint); font-size: 10px; font-weight: 800; }
.pill.paid { background: color-mix(in srgb, #25a45a 16%, var(--surface)); color: #1f9a53; }
.pill.wait { background: color-mix(in srgb, #f1a300 17%, var(--surface)); color: #c77d00; }
.pill.cancelled { color: var(--destructive); }

.order-head { padding: 28px 18px 20px; text-align: center; }
.order-head__num { color: var(--hint); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.order-head__amount { margin-top: 8px; font-size: 39px; font-weight: 900; letter-spacing: -.065em; }
.order-head .pill { display: inline-block; margin-top: 10px; }
.timeline { margin: 0 12px; padding: 16px 18px; border-radius: 18px; background: var(--surface); }
.timeline__row { position: relative; min-height: 35px; display: flex; gap: 12px; color: var(--hint); font-size: 13px; }
.timeline__row::before { content: ""; width: 2px; position: absolute; top: 17px; bottom: -2px; left: 6px; background: var(--separator); }
.timeline__row:last-child::before { display: none; }
.timeline__dot { position: relative; z-index: 1; width: 14px; height: 14px; flex: 0 0 auto; border: 2px solid var(--hint); border-radius: 50%; background: var(--surface); }
.timeline__row.done { color: var(--text); font-weight: 700; }
.timeline__row.done .timeline__dot { border-color: #28a85e; background: #28a85e; box-shadow: inset 0 0 0 3px var(--surface); }
.payment-box { margin: 10px 12px; padding: 16px; border-radius: 18px; background: var(--surface); }
.payment-box h2 { font-size: 18px; letter-spacing: -.03em; }
.payment-option { width: 100%; min-height: 62px; margin-top: 9px; display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--separator); border-radius: 14px; text-align: left; }
.payment-option:active { background: var(--surface-2); }
.payment-option__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 900; }
.payment-option__copy { min-width: 0; flex: 1; }
.payment-option__copy b { display: block; font-size: 14px; }
.payment-option__copy span { display: block; margin-top: 2px; color: var(--hint); font-size: 11px; }
.payment-option__arrow { color: var(--hint); }
.danger-link { width: calc(100% - 24px); min-height: 48px; margin: 2px 12px 18px; color: var(--destructive); font-size: 14px; font-weight: 700; }
.delivery { margin: 10px 12px; padding: 16px; border: 1px solid #28a85e; border-radius: 18px; background: var(--surface); }
.delivery h2 { color: #249a57; font-size: 16px; }
.delivery pre { margin-top: 10px; overflow-wrap: anywhere; white-space: pre-wrap; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.copy-button { margin-top: 12px; color: var(--link); font-size: 13px; font-weight: 800; }

.profile-card { margin: 12px; padding: 20px; border-radius: 22px; background: var(--text); color: var(--bg); }
.profile-card__eyebrow { opacity: .58; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.profile-card h1 { margin-top: 7px; font-size: 28px; letter-spacing: -.055em; }
.profile-card__balance { margin-top: 28px; font-size: 34px; font-weight: 900; letter-spacing: -.065em; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 12px; }
.profile-stats div { min-width: 0; padding: 14px 10px; border-radius: 15px; background: var(--surface); }
.profile-stats b { display: block; overflow: hidden; font-size: 17px; text-overflow: ellipsis; }
.profile-stats span { display: block; margin-top: 3px; color: var(--hint); font-size: 10px; }
.action-list { margin: 10px 12px; overflow: hidden; border-radius: 18px; background: var(--surface); }
.action-row { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 10px 15px; border-top: .5px solid var(--separator); text-align: left; }
.action-row:first-child { border-top: 0; }
.action-row b { display: block; font-size: 14px; }
.action-row span { display: block; margin-top: 2px; color: var(--hint); font-size: 11px; }
.action-row__arrow { margin-left: auto; color: var(--hint); }

.review { padding: 32px 18px; text-align: center; }
.review h1 { font-size: 28px; letter-spacing: -.05em; }
.review p { margin-top: 8px; color: var(--hint); font-size: 14px; }
.stars { display: flex; justify-content: center; gap: 7px; margin: 28px 0; }
.stars button { font-size: 40px; color: var(--separator); }
.stars button.on { color: #ffb300; }
.review textarea { width: 100%; min-height: 120px; padding: 14px; border: 1px solid var(--separator); outline: 0; border-radius: 15px; background: var(--surface); resize: none; }

.preview-note { margin: 12px; padding: 13px 16px; border: 1px solid var(--separator); border-radius: 14px; color: var(--hint); font-size: 12px; line-height: 1.5; text-align: center; }
.inline-action { min-height: 42px; margin-top: 12px; padding: 0 15px; border-radius: 12px; background: var(--button); color: var(--button-text); font-size: 13px; font-weight: 800; }

.bottom-nav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(var(--nav-height) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px 7px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 94%, transparent); border-top: .5px solid var(--separator); backdrop-filter: blur(18px); }
.nav-button { position: relative; min-width: 0; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--hint); font-size: 10px; }
.nav-button svg { width: 22px; height: 22px; }
.nav-button.on { color: var(--link); font-weight: 700; }
.nav-badge { position: absolute; top: 1px; left: calc(50% + 8px); min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--surface); border-radius: 9px; background: #ff3b30; color: #fff; font-size: 9px; font-weight: 900; }

.fallback-action { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(var(--nav-height) + 10px + env(safe-area-inset-bottom)); width: calc(100% - 24px); min-height: 52px; padding: 0 18px; border-radius: 15px; background: var(--button); color: var(--button-text); font-size: 15px; font-weight: 800; box-shadow: 0 8px 28px rgba(0,0,0,.16); }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(var(--nav-height) + 74px + env(safe-area-inset-bottom)); max-width: calc(100% - 40px); padding: 10px 15px; border-radius: 18px; background: rgba(10,10,11,.9); color: #fff; font-size: 13px; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .18s, transform .18s; backdrop-filter: blur(10px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 620px) {
  .app { width: 620px; margin: 0 auto; border-inline: .5px solid var(--separator); }
  .bottom-nav { width: 620px; left: 50%; right: auto; transform: translateX(-50%); }
  .fallback-action { width: 596px; left: 50%; right: auto; transform: translateX(-50%); }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 350px) {
  .product-grid { gap: 7px; padding-inline: 8px; }
  .product__body { padding: 10px; }
  .product__name { font-size: 14px; }
  .profile-stats { gap: 5px; }
}

@media (prefers-color-scheme: dark) {
  :root { --separator: var(--tg-theme-section-separator-color, rgba(255,255,255,.1)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===== LEVVS monochrome Liquid Glass ===== */
:root {
  color-scheme: dark;
  --bg: #09090a;
  --surface: rgba(38, 38, 41, .62);
  --surface-2: rgba(255, 255, 255, .075);
  --text: #f3f3f5;
  --hint: #97979d;
  --link: #f3f3f5;
  --button: #f3f3f5;
  --button-text: #111113;
  --separator: rgba(255, 255, 255, .13);
  --destructive: #b5b5ba;
  --blue: #f3f3f5;
  --radius: 16px;
}

body {
  background: radial-gradient(circle at 10% -10%, #303033 0, #121214 31%, #09090a 64%);
  color: var(--text);
  font-weight: 500;
}

.liquid-bg { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.liquid-bg i { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 47% 53% 42% 58% / 48% 42% 58% 52%; background: radial-gradient(circle at 30% 23%, rgba(255,255,255,.17), rgba(255,255,255,.045) 40%, rgba(255,255,255,.012) 70%); box-shadow: inset 13px 13px 26px rgba(255,255,255,.035), inset -16px -16px 30px rgba(0,0,0,.28), 0 24px 70px rgba(0,0,0,.32); will-change: transform, opacity; transform: translate3d(0,0,0); }
.liquid-bg i:nth-child(1) { width: 220px; height: 250px; left: -85px; top: 16%; animation: app-drop-a 15s ease-in-out infinite; }
.liquid-bg i:nth-child(2) { width: 190px; height: 220px; right: -72px; top: 4%; animation: app-drop-b 18s ease-in-out infinite; }
.liquid-bg i:nth-child(3) { width: 150px; height: 135px; left: 38%; bottom: 7%; opacity: .58; animation: app-drop-c 13s ease-in-out infinite; }
@keyframes app-drop-a { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(28px,-20px,0) rotate(8deg); } }
@keyframes app-drop-b { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(-25px,30px,0) rotate(-9deg); } }
@keyframes app-drop-c { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(26px,-18px,0) scale(1.05); } }

.app { position: relative; z-index: 2; }
.screen { animation-duration: .14s; }
.boot__mark { border: 1px solid rgba(255,255,255,.2); background: #f3f3f5; color: #111; box-shadow: inset 0 1px 0 #fff, 0 14px 35px rgba(0,0,0,.3); }
.spinner { border-color: rgba(255,255,255,.13); border-top-color: #fff; }

.topbar { min-height: 49px; margin: 6px 8px 0; padding: 7px 10px; border: 1px solid var(--separator); border-radius: 15px; background: linear-gradient(135deg, rgba(55,55,59,.69), rgba(20,20,22,.57)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px rgba(0,0,0,.22); backdrop-filter: blur(25px) saturate(125%); -webkit-backdrop-filter: blur(25px) saturate(125%); }
.topbar__mark { width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: #f2f2f3; color: #111; }
.topbar__brand { font-size: 15px; font-weight: 900; }
.topbar__meta { font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.mast { min-height: 108px; margin: 8px 8px 0; border: 1px solid var(--separator); border-radius: 17px; box-shadow: 0 15px 40px rgba(0,0,0,.25); }
.mast img { height: 108px; }
.mast::after { content: none; }
.section-title { margin: 15px 12px 7px; }
.section-title h1, .section-title h2 { font-size: 24px; font-weight: 900; }
.section-title p { font-size: 10px; font-weight: 700; }
.search { height: 39px; margin: 8px 10px 0; border: 1px solid var(--separator); border-radius: 13px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.chips { padding: 8px 10px 4px; }
.chip { min-height: 31px; padding: 0 12px; border-radius: 11px; background: rgba(255,255,255,.05); font-size: 11px; font-weight: 800; backdrop-filter: blur(12px); }
.chip.on { border-color: #fff; background: #f3f3f5; color: #111; box-shadow: 0 8px 22px rgba(0,0,0,.25); }

.product-grid { grid-template-columns: 1fr; gap: 7px; padding: 8px 8px 16px; }
.product { display: grid; grid-template-columns: 84px minmax(0,1fr); min-height: 84px; overflow: hidden; border: 1px solid var(--separator); border-radius: 15px; background: linear-gradient(135deg, rgba(48,48,52,.66), rgba(20,20,22,.57)); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 10px 27px rgba(0,0,0,.2); backdrop-filter: blur(23px) saturate(120%); -webkit-backdrop-filter: blur(23px) saturate(120%); contain: layout paint; content-visibility: auto; }
.product__media { height: 84px; aspect-ratio: auto; border-right: 1px solid var(--separator); }
.product__media img { filter: grayscale(1); }
.product__fallback { font-size: 24px; }
.product__sale { top: 6px; right: 6px; padding: 3px 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; background: rgba(9,9,10,.75); color: #fff; font-size: 8px; backdrop-filter: blur(7px); }
.product__body { min-height: 84px; padding: 10px 11px; }
.product__name { font-size: 14px; font-weight: 850; }
.product__meta { margin-top: 3px; font-size: 9px; font-weight: 650; }
.product__price { padding-top: 7px; font-size: 15px; font-weight: 900; }
.product.off { opacity: .48; }

.empty, .detail-card, .detail-desc, .cart-row, .promo-box, .total, .order-card, .timeline, .payment-box, .delivery, .profile-stats div, .action-list, .review textarea, .preview-note { border: 1px solid var(--separator); background: linear-gradient(135deg, rgba(46,46,50,.66), rgba(20,20,22,.58)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 34px rgba(0,0,0,.2); backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%); }
.empty { margin: 14px 10px; padding: 28px 18px; border-radius: 16px; }
.detail-media { max-height: 220px; }
.detail-card { margin: -14px 8px 0; padding: 15px; border-radius: 18px; }
.kicker { color: #aaa; font-size: 9px; }
.detail-card h1 { margin-top: 5px; font-size: 25px; font-weight: 900; }
.detail-price { margin-top: 11px; font-size: 24px; font-weight: 900; }
.detail-note { margin-top: 6px; font-size: 10px; }
.detail-desc { margin: 7px 8px; padding: 14px; border-radius: 15px; font-size: 13px; }
.quantity { margin-top: 13px; }
.stepper, .qtybtn, .mini-stepper button { background: rgba(255,255,255,.075); }
.stepper { border: 1px solid var(--separator); }
.cart-list, .order-list { padding-inline: 8px; }
.cart-row { margin-top: 7px; padding: 9px; border-radius: 15px; }
.promo-box, .total, .order-card, .timeline, .payment-box, .delivery { margin-inline: 8px; border-radius: 16px; }
.order-head { padding: 21px 14px 14px; }
.order-head__amount { font-size: 33px; }
.pill, .pill.paid, .pill.wait, .pill.cancelled { border: 1px solid var(--separator); background: rgba(255,255,255,.07); color: #b8b8bd; }
.timeline__row.done .timeline__dot { border-color: #ddd; background: #ddd; }
.payment-option { min-height: 56px; border-color: var(--separator); background: rgba(255,255,255,.035); }
.payment-option__icon { background: #f1f1f2; color: #111; }
.delivery { border-color: rgba(255,255,255,.25); }
.delivery h2 { color: #eee; }
.copy-button { color: #ddd; }
.danger-link { color: #999; }
.profile-card { margin: 8px; padding: 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; background: linear-gradient(145deg, #eee, #bfc0c3); color: #111; box-shadow: inset 0 1px 0 #fff, 0 17px 45px rgba(0,0,0,.3); }
.profile-card h1 { font-weight: 900; }
.profile-card__balance { margin-top: 20px; font-size: 30px; }
.profile-stats { margin: 6px 8px; gap: 6px; }
.profile-stats--two { grid-template-columns: repeat(2, 1fr); }
.profile-stats div { padding: 11px 8px; border-radius: 13px; }
.profile-card__note { max-width: 240px; font-size: 13px; line-height: 1.3; letter-spacing: -.01em; }
.action-list { margin: 7px 8px; border-radius: 16px; overflow: hidden; }
.action-row { min-height: 50px; }
.stars button { color: #555; }
.stars button.on { color: #f1f1f2; text-shadow: 0 0 14px rgba(255,255,255,.18); }
.inline-action, .fallback-action { border: 1px solid #fff; background: linear-gradient(180deg,#fff,#d5d5d8); color: #111; font-weight: 900; }
.fallback-action { border-radius: 15px; box-shadow: inset 0 1px 0 #fff, 0 14px 35px rgba(0,0,0,.38); }
.toast { border: 1px solid rgba(255,255,255,.17); background: rgba(31,31,34,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 34px rgba(0,0,0,.3); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.bottom-nav { left: 7px; right: 7px; bottom: calc(5px + env(safe-area-inset-bottom)); height: 58px; padding: 3px 5px; border: 1px solid var(--separator); border-radius: 18px; background: linear-gradient(135deg, rgba(53,53,57,.76), rgba(20,20,22,.68)); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 16px 44px rgba(0,0,0,.4); backdrop-filter: blur(28px) saturate(125%); -webkit-backdrop-filter: blur(28px) saturate(125%); }
.nav-button { font-weight: 700; }
.nav-button.on { color: #fff; font-weight: 900; }
.nav-badge { border-color: #29292c; background: #eee; color: #111; }

@media (min-width: 520px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 620px) {
  .bottom-nav { width: 606px; left: 50%; right: auto; }
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .topbar, .product, .bottom-nav, .empty, .detail-card, .detail-desc, .cart-row, .promo-box, .total, .order-card, .timeline, .payment-box, .delivery, .profile-stats div, .action-list { background: rgba(29,29,32,.96); }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-bg i { animation: none !important; }
}
@media (max-width: 430px) {
  .liquid-bg i:nth-child(3) { display: none; }
}

/* Native type, calmer geometry and a thinner refractive glass edge. */
body { font-family: "Onest", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; }
.topbar { border-color: rgba(255,255,255,.19); background: linear-gradient(145deg,rgba(255,255,255,.085),rgba(14,14,16,.28)); box-shadow: inset 0 1px 0 rgba(255,255,255,.31), inset 1px 0 0 rgba(255,255,255,.065), inset 0 -1px 0 rgba(0,0,0,.38), 0 12px 30px rgba(0,0,0,.18); backdrop-filter: blur(30px) saturate(116%); -webkit-backdrop-filter: blur(30px) saturate(116%); }
.topbar__mark { width:27px; height:27px; object-fit:cover; border:1px solid rgba(255,255,255,.22); border-radius:9px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.topbar__meta { display:none; }
.mast { min-height:0; aspect-ratio:16/9; background:#fff; border-color:rgba(255,255,255,.2); }
.mast img { width:100%; height:100%; object-fit:contain; }
.mast::after { content:none; }
.product,.empty,.detail-card,.detail-desc,.detail-warranty,.cart-row,.promo-box,.total,.order-card,.payment-box,.delivery,.profile-stats div,.action-list,.review textarea,.preview-note { border-color:rgba(255,255,255,.18); background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(14,14,16,.27)); box-shadow:inset 0 1px 0 rgba(255,255,255,.29),inset 1px 0 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.36),0 12px 32px rgba(0,0,0,.16); backdrop-filter:blur(29px) saturate(116%); -webkit-backdrop-filter:blur(29px) saturate(116%); }
.bottom-nav { border-color:rgba(255,255,255,.19); background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(12,12,14,.37)); box-shadow:inset 0 1px 0 rgba(255,255,255,.31),inset 1px 0 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.38),0 16px 44px rgba(0,0,0,.27); backdrop-filter:blur(32px) saturate(116%); -webkit-backdrop-filter:blur(32px) saturate(116%); }
.detail-media { height:min(62vw,230px); aspect-ratio:auto; margin:8px; border:1px solid rgba(255,255,255,.18); border-radius:16px; background:#fff; }
.detail-media img { width:100%; height:100%; padding:6px; object-fit:contain; border-radius:14px; }
.product__media { padding:5px; border-right:0; background:transparent; }
.product__media img,.product__fallback { width:100%; height:100%; border-radius:12px; }
.cart-row__img,.cart-row__img img { border-radius:12px; }
.product__body { padding-left:7px; }
.order-card { display:block; width:100%; text-align:left; }
.order-card__name { padding-right:8px; font-size:16px; font-weight:850; line-height:1.2; letter-spacing:-.03em; }
.order-card__num { margin-top:4px; color:var(--hint); font-size:11px; font-weight:650; letter-spacing:0; }
.order-card__price { margin-top:12px; }
.order-card__status,.order-head__status { margin-top:12px; padding-top:9px; border-top:1px solid rgba(255,255,255,.1); color:var(--hint); font-size:11px; font-weight:750; }
.order-list { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.order-list .order-card { min-width:0; margin-top:0; align-self:stretch; }
.order-card__name { overflow-wrap:anywhere; }
.order-card__status { width:100%; }
.order-head h1 { max-width:440px; font-size:22px; line-height:1.12; letter-spacing:-.04em; }
.order-head__num { margin-top:5px; color:var(--hint); font-size:11px; font-weight:650; letter-spacing:0; }
.order-head__status { max-width:420px; }
.timeline,.pill { display:none; }
.auth-card { margin:8px; padding:20px; border:1px solid rgba(255,255,255,.19); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(14,14,16,.28)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 1px 0 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.36),0 15px 38px rgba(0,0,0,.18); backdrop-filter:blur(30px) saturate(116%); -webkit-backdrop-filter:blur(30px) saturate(116%); }
.auth-card h1 { font-size:28px; line-height:1; letter-spacing:-.055em; }
.auth-card>p { margin-top:7px; color:var(--hint); font-size:12px; font-weight:650; }
.auth-choices { display:grid; gap:7px; margin-top:20px; }
.auth-choice { min-height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:rgba(255,255,255,.045); text-align:left; }
.auth-choice b { font-size:14px; font-weight:850; }.auth-choice span { color:var(--hint); font-size:11px; }
.telegram-login { min-height:48px; display:grid; place-items:center; padding:4px 0; }
.telegram-login__widget { min-height:40px; display:grid; place-items:center; }
.telegram-login__widget iframe { max-width:100%!important; }
.auth-email { display:block; margin-top:18px; }.auth-email>span { display:block; margin-bottom:6px; color:var(--hint); font-size:10px; font-weight:800; }
.auth-input { width:100%; height:48px; padding:0 13px; border:1px solid rgba(255,255,255,.16); outline:0; border-radius:13px; background:rgba(255,255,255,.055); font-size:16px; font-weight:700; }
.auth-input:focus { border-color:rgba(255,255,255,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.auth-code-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.auth-code-head h1 { flex:0 0 auto; }
.auth-code-head span { min-width:0; overflow:hidden; color:var(--hint); text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; }
.otp { position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin-top:22px; }
.otp__input { position:absolute; z-index:2; inset:0; width:100%; height:100%; border:0; outline:0; opacity:.01; color:transparent; background:transparent; caret-color:transparent; }
.otp__cell { height:52px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.17); border-radius:13px; background:rgba(255,255,255,.035); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); color:#eee; font-size:22px; font-style:normal; font-weight:900; transition:border-color .14s ease,background .14s ease,transform .14s ease; }
.otp__cell.filled { background:rgba(255,255,255,.075); }
.otp__cell.current { border-color:rgba(255,255,255,.52); background:rgba(255,255,255,.095); transform:translateY(-1px); }
.auth-primary { width:100%; min-height:48px; margin-top:9px; border:1px solid #fff; border-radius:13px; background:#f3f3f4; color:#111; font-size:14px; font-weight:900; }
.auth-back,.auth-resend,.profile-logout { color:var(--hint); font-size:12px; font-weight:750; }.auth-back { margin-bottom:18px; font-size:24px; }.auth-resend { width:100%; min-height:40px; margin-top:5px; }.profile-logout { display:block; min-height:44px; margin:8px auto 18px; padding:0 14px; }
.money-card { margin:8px; padding:20px; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(14,14,16,.27)); box-shadow:inset 0 1px 0 rgba(255,255,255,.29),inset 1px 0 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.36),0 12px 32px rgba(0,0,0,.16); backdrop-filter:blur(29px); }
.money-card h1 { font-size:27px; letter-spacing:-.05em; }.money-card>p { margin-top:6px; color:var(--hint); font-size:12px; }.money-card label { display:block; margin-top:22px; }.money-card label>span { display:block; margin-bottom:6px; color:var(--hint); font-size:10px; font-weight:800; }
.money-input { font-size:24px; font-weight:900; }
.money-methods { display:grid; gap:7px; margin-top:14px; }
.money-methods .auth-primary { margin-top:0; }
.money-methods .auth-choice { width:100%; }
.preferences { margin:8px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:16px; background:rgba(255,255,255,.045); }
.preference-row { width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-top:1px solid rgba(255,255,255,.09); text-align:left; font-size:14px; font-weight:800; }.preference-row:first-child{border-top:0}.switch{position:relative;width:38px;height:22px;border-radius:11px;background:#3a3a3e}.switch::after{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;border-radius:50%;background:#aaa;transition:transform .18s ease,background .18s ease}.switch.on{background:#eee}.switch.on::after{background:#111;transform:translateX(16px)}
.support-loading,.support-empty { padding:42px 18px; color:var(--hint); text-align:center; font-size:12px; }
.support-thread { height:calc(var(--app-height) - 238px); min-height:280px; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:8px; scroll-behavior:smooth; }
.support-message { max-width:84%; margin:7px 0; padding:10px 12px; border:1px solid rgba(255,255,255,.15); border-radius:13px; background:rgba(255,255,255,.055); overflow-wrap:anywhere; font-size:13px; line-height:1.4; }
.support-message p { white-space:pre-wrap; }
.support-message.staff { margin-left:auto; background:#eee; color:#111; }
.support-file { width:100%; min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:7px; padding:7px 9px; border:1px solid rgba(255,255,255,.15); border-radius:10px; background:rgba(255,255,255,.055); text-align:left; }
.support-file b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.support-file span { flex:0 0 auto; color:var(--hint); font-size:8px; }
.support-message.staff .support-file { border-color:rgba(0,0,0,.14); background:rgba(0,0,0,.045); }
.support-message.staff .support-file span { color:#666; }
.support-compose { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:7px; margin:8px; padding:7px; border:1px solid rgba(255,255,255,.18); border-radius:15px; background:rgba(255,255,255,.05); }
.support-compose textarea { min-height:42px; max-height:110px; padding:10px 4px; border:0; outline:0; background:transparent; resize:none; font-family:inherit; font-size:13px; line-height:1.4; }
.support-compose button { padding:0 9px; color:#eee; font-size:11px; font-weight:850; }
.support-attach { height:38px; align-self:center; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:11px; color:#bbb; font-size:20px; cursor:pointer; }
.support-attach input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.bottom-nav.five { grid-template-columns:repeat(5,1fr); }.bottom-nav.five .nav-button { font-size:9px; }.bottom-nav.five .nav-button svg { width:20px;height:20px; }
.admin-loading,.admin-empty { padding:44px 16px; color:var(--hint); text-align:center; font-size:12px; }.admin-title,.admin-head { min-height:54px; display:flex; align-items:center; gap:10px; padding:10px 13px; }.admin-title h1,.admin-head h1 { font-size:24px; line-height:1; letter-spacing:-.05em; }.admin-title button{margin-left:auto;font-size:18px}.admin-head button{width:28px;font-size:24px;color:var(--hint)}
.admin-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 8px 8px; }.admin-stats div { min-width:0;padding:11px 9px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(255,255,255,.045); }.admin-stats b{display:block;overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}.admin-stats span{display:block;margin-top:2px;color:var(--hint);font-size:9px}
.admin-menu,.admin-block,.admin-detail,.admin-form,.admin-actions { margin:8px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(14,14,16,.27));box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.34);backdrop-filter:blur(27px) }.admin-menu button,.admin-row{width:100%;min-height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-top:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:800}.admin-menu button:first-child,.admin-row:first-child{border-top:0}.admin-menu i{color:var(--hint);font-style:normal;font-size:17px}.admin-list{padding:0 8px 14px}.admin-order,.admin-product,.admin-user{width:100%;display:block;margin-top:7px;padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.045);text-align:left}.admin-order b,.admin-product b,.admin-user b{display:block;font-size:14px;line-height:1.2}.admin-order span,.admin-product span,.admin-user span{display:block;margin-top:4px;color:var(--hint);font-size:10px}.admin-order em{display:block;margin-top:9px;padding-top:7px;border-top:1px solid rgba(255,255,255,.09);color:var(--hint);font-size:10px;font-style:normal}.admin-user{display:flex;align-items:center;justify-content:space-between;gap:8px}.admin-user>div{min-width:0}.admin-user button{flex:0 0 auto;color:var(--hint);font-size:9px;font-weight:800}
.admin-block{padding-bottom:5px}.admin-block-title{min-height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px}.admin-block-title button,.admin-add{color:#eee;font-size:10px;font-weight:850}.admin-add{display:block;margin:0 8px 7px;padding:9px 11px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.05)}.admin-row button{color:var(--hint);font-size:9px;font-weight:800}
.admin-detail{padding:16px}.admin-detail>span{color:var(--hint);font-size:10px}.admin-detail h2{margin-top:5px;font-size:28px;letter-spacing:-.05em}.admin-detail p{margin-top:12px;color:#bbb;font-size:11px;line-height:1.5}.admin-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.1)}.admin-actions button{min-height:44px;background:#171719;color:#bbb;font-size:10px;font-weight:800}
.admin-form{padding:14px}.admin-form+ .admin-form{margin-top:7px}.admin-form label{display:block;margin-top:12px;color:#b9b9be;font-size:10px;font-weight:850;letter-spacing:.01em}.admin-form label:first-of-type{margin-top:0}.admin-form input,.admin-form textarea,.admin-form select{width:100%;min-height:44px;margin-top:5px;padding:10px 11px;border:1px solid rgba(255,255,255,.17);outline:0;border-radius:11px;background:rgba(255,255,255,.055);color:#f2f2f3;font-family:inherit;font-size:14px;font-weight:720;line-height:1.35}.admin-form input::placeholder,.admin-form textarea::placeholder{color:#77777d;opacity:1}.admin-form textarea{min-height:94px;resize:vertical}.admin-form select{appearance:auto}.admin-form>button{width:100%;min-height:44px;margin-top:11px;border:1px solid #fff;border-radius:12px;background:#eee;color:#111;font-size:12px;font-weight:900}.admin-form>button.admin-delete{border-color:rgba(255,255,255,.13);background:transparent;color:#999}.admin-check{display:flex!important;align-items:center;gap:8px}.admin-check input{width:18px!important;min-height:18px!important;margin:0!important}.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.admin-setting textarea{min-height:72px}.admin-setting>button{min-height:40px}
.admin-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:4px 8px 16px;color:var(--hint);font-size:11px;font-weight:800}.admin-pager button{width:36px;height:34px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.045)}.admin-pager button:disabled{opacity:.25}
.admin-upload input[type="file"] { padding:8px; font-size:11px; }
.admin-image-upload { display:grid; grid-template-columns:112px minmax(0,1fr); gap:11px; align-items:center; margin-top:8px; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:13px; background:rgba(255,255,255,.04); }
.admin-image-preview { position:relative; width:112px; aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:11px; background:#f4f4f5; color:#777; font-size:10px; font-weight:800; }
.admin-image-preview img { width:100%; height:100%; object-fit:contain; }
.admin-image-controls { min-width:0; display:grid; align-content:center; gap:7px; }
.admin-image-button { min-height:39px!important; display:grid!important; place-items:center; margin:0!important; padding:0 12px; border:1px solid #fff; border-radius:11px; background:#eee; color:#111!important; font-size:11px!important; font-weight:900!important; cursor:pointer; }
.admin-image-button input { position:absolute; width:1px!important; height:1px!important; min-height:1px!important; margin:0!important; padding:0!important; border:0!important; opacity:0; pointer-events:none; }
.admin-image-controls>span { min-height:24px; color:var(--hint); font-size:9px; font-weight:700; line-height:1.3; }
.admin-image-controls>span[data-state="loading"] { color:#d8d8dc; }
.admin-image-controls>span[data-state="success"] { color:#f2f2f3; font-weight:850; }
.admin-image-controls>span[data-state="error"] { color:#b8b8bd; font-weight:850; }
.admin-image-upload.is-uploading .admin-image-button { opacity:.45; pointer-events:none; }
.admin-image-upload.is-uploading .admin-image-preview::after { content:""; position:absolute; width:20px; height:20px; border:2px solid rgba(0,0,0,.18); border-top-color:#111; border-radius:50%; animation:spin .7s linear infinite; }
.admin-form-note { margin-top:5px; color:var(--hint); font-size:9px; font-weight:650; }

.maintenance-screen {
  margin:18px 10px;
  padding:28px 20px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  background:
    radial-gradient(100% 75% at 12% 0,rgba(255,255,255,.13),transparent 45%),
    linear-gradient(145deg,rgba(30,30,34,.72),rgba(8,8,10,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 18px 48px rgba(0,0,0,.24);
  backdrop-filter:blur(22px) saturate(128%);
  -webkit-backdrop-filter:blur(22px) saturate(128%);
}
.maintenance-screen>span {
  color:#aaaab0;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.maintenance-screen h1 { margin-top:8px;font-size:29px;line-height:1;letter-spacing:-.055em; }
.maintenance-screen p { margin-top:13px;color:#dedee2;font-size:14px;font-weight:650;line-height:1.5;white-space:pre-wrap; }
.maintenance-screen small { display:block;margin-top:14px;color:var(--hint);font-size:10px;line-height:1.4; }
.maintenance-screen__actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:20px; }
.maintenance-screen__actions button {
  min-height:43px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#f5f5f6;
  font-size:11px;
  font-weight:850;
}
.admin-maintenance-banner {
  width:calc(100% - 16px);
  min-height:52px;
  margin:0 8px 8px;
  padding:10px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:15px;
  background:rgba(255,255,255,.1);
  color:#f4f4f5;
  text-align:left;
}
.admin-maintenance-banner b { font-size:12px; }
.admin-maintenance-banner span { color:#aaaab0;font-size:10px;font-weight:700; }
.maintenance-control__status { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.maintenance-control__status span { font-size:17px;font-weight:900;letter-spacing:-.025em; }
.maintenance-control__status i { width:9px;height:9px;border-radius:50%;background:#bfc1c5;box-shadow:0 0 0 4px rgba(255,255,255,.08); }
.maintenance-control.is-closed .maintenance-control__status i { background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.13); }
.maintenance-control.is-closed>button { background:#f1f1f2;color:#111; }
.maintenance-control.is-open>button { border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#f2f2f3; }
.order-file-picker input { min-height:44px; }
.delivery-files { display:grid; gap:7px; margin-top:12px; }
.delivery-file { width:100%; min-height:48px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:8px 11px; border:1px solid rgba(255,255,255,.13); border-radius:12px; background:rgba(255,255,255,.045); text-align:left; }
.delivery-file span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:820; }
.delivery-file small { color:var(--hint); font-size:9px; }
.delivery-file b { font-size:17px; }

/* Interface-owned dropdowns: the native select remains as the form value. */
.admin-form.has-ui-select,.admin-search.has-ui-select,.support-compose.has-ui-select { position:relative; overflow:visible; }
.admin-form.select-open,.admin-search.select-open,.support-compose.select-open { z-index:90; }
.ui-select { position:relative; z-index:1; width:100%; margin-top:5px; }
.ui-select.open { z-index:100; }
.admin-form select.ui-select__native { position:absolute!important; width:1px!important; min-height:1px!important; height:1px!important; margin:0!important; padding:0!important; border:0!important; opacity:0; pointer-events:none; }
.admin-search select.ui-select__native { position:absolute!important; width:1px!important; height:1px!important; opacity:0; pointer-events:none; }
.support-compose select.ui-select__native { position:absolute!important; width:1px!important; height:1px!important; opacity:0; pointer-events:none; }
.ui-select__button { width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 12px; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(17,17,19,.24)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); color:#eee; text-align:left; font-size:13px; font-weight:750; }
.ui-select__button i { width:8px; height:8px; flex:0 0 auto; border-right:1.5px solid #a8a8ad; border-bottom:1.5px solid #a8a8ad; transform:rotate(45deg) translateY(-2px); transition:transform .16s ease; }
.ui-select.open .ui-select__button { border-color:rgba(255,255,255,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 8px 24px rgba(0,0,0,.18); }
.ui-select.open .ui-select__button i { transform:rotate(225deg) translate(-2px,-1px); }
.ui-select__value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-select__menu { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:120; max-height:232px; overflow:auto; padding:5px; border:1px solid rgba(255,255,255,.2); border-radius:13px; background:rgba(25,25,28,.88); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 48px rgba(0,0,0,.48); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-4px) scale(.99); transform-origin:top; transition:opacity .14s ease,transform .14s ease,visibility .14s; backdrop-filter:blur(30px) saturate(118%); -webkit-backdrop-filter:blur(30px) saturate(118%); scrollbar-width:thin; }
.ui-select.open .ui-select__menu { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.ui-select__option { position:relative; width:100%; min-height:42px; display:flex; align-items:center; padding:8px 34px 8px 11px; border-radius:9px; color:#c8c8cc; text-align:left; font-size:13px; font-weight:720; }
.ui-select__option:hover,.ui-select__option:focus-visible { background:rgba(255,255,255,.08); color:#fff; outline:0; }
.ui-select__option.selected { background:rgba(255,255,255,.11); color:#fff; font-weight:850; }
.ui-select__option.selected::after { content:"✓"; position:absolute; right:12px; color:#ddd; font-size:12px; font-weight:900; }
.ui-select__option:disabled { opacity:.35; }

/* Fixed navigation must never cover the final control in long admin forms. */
.screen > .admin-form:last-child { margin-bottom:calc(var(--nav-height) + 26px + env(safe-area-inset-bottom)); }

.cart-row__price.sale { display:flex; align-items:baseline; gap:7px; }
.cart-row__price.sale s { color:#707075; font-size:10px; font-weight:700; }
.cart-row__price.sale b { color:#f3f3f4; font-size:12px; font-weight:900; }
.cart-row__price.sale small { color:#aaaab0; font-size:9px; font-weight:850; }
.admin-form-title { margin-bottom:12px; font-size:15px; letter-spacing:-.02em; }
.discount-preview { margin-top:10px; color:#ddd; font-size:11px; font-weight:800; }
.stats-periods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0 8px 8px; }
.stats-periods>div { min-width:0; padding:10px 9px; border:1px solid rgba(255,255,255,.17); border-radius:13px; background:rgba(255,255,255,.05); }
.stats-periods span,.stats-periods small { display:block; color:var(--hint); font-size:8px; font-weight:750; }
.stats-periods b { display:block; margin:4px 0 2px; overflow:hidden; text-overflow:ellipsis; font-size:14px; white-space:nowrap; }
.stats-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0 8px 8px; }
.stats-overview>div { min-width:0; padding:12px; border:1px solid rgba(255,255,255,.17); border-radius:13px; background:rgba(255,255,255,.045); }
.stats-overview b,.stats-overview span { display:block; }
.stats-overview b { overflow:hidden; text-overflow:ellipsis; font-size:17px; white-space:nowrap; }
.stats-overview span { margin-top:2px; color:var(--hint); font-size:9px; }
.admin-metrics .admin-row>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-metrics .admin-row>span small { display:block; margin-top:2px; color:var(--hint); font-size:8px; font-weight:700; }
.admin-metrics .admin-row>b { flex:0 0 auto; margin-left:10px; font-size:11px; }
.admin-empty.compact { padding:22px 14px; }
.admin-copy-link { width:100%; min-height:44px; margin-top:12px; padding:0 12px; border-radius:12px; background:#eee; color:#111; font-size:11px; font-weight:900; }
.admin-copy-link.muted { margin-top:7px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.045); color:#bbb; }
.reservation-result p { margin-top:10px; }
.stock-list { margin-top:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:12px; }
.stock-row { min-height:46px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:9px; padding:8px 10px; border-top:1px solid rgba(255,255,255,.09); }
.stock-row:first-child { border-top:0; }
.stock-row code { min-width:0; overflow:hidden; color:#c9c9cd; font:650 10px/1.35 ui-monospace,SFMono-Regular,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.stock-row button { color:#999; font-size:9px; font-weight:850; }
.settings-section { margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); }
.settings-form>.admin-grid { align-items:start; }
.broadcast-failure { margin-top:7px; padding:12px; border:1px solid rgba(255,255,255,.15); border-radius:13px; background:rgba(255,255,255,.045); }
.broadcast-failure b,.broadcast-failure span { display:block; }
.broadcast-failure b { font-size:13px; }
.broadcast-failure span { margin-top:3px; color:var(--hint); font-size:9px; }
.broadcast-failure p { margin-top:9px; padding-top:8px; border-top:1px solid rgba(255,255,255,.09); color:#bbb; font-size:10px; line-height:1.4; }
.admin-search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; margin:0 8px 5px; }
.admin-search input { min-width:0; height:42px; padding:0 11px; border:1px solid rgba(255,255,255,.16); border-radius:11px; outline:0; background:rgba(255,255,255,.05); color:#eee; font-size:12px; font-weight:700; }
.admin-search button { padding:0 13px; border-radius:11px; background:#eee; color:#111; font-size:10px; font-weight:900; }
.admin-orders-filter>input { grid-column:1/-1; }
.admin-orders-filter>.ui-select { margin-top:0; }
.admin-orders-filter .ui-select__button { min-height:42px; border-radius:11px; font-size:11px; }
.admin-orders-filter>button { min-height:42px; }
.admin-count { margin:8px 11px 2px; color:var(--hint); font-size:9px; font-weight:750; }
.ledger-filter { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:7px; padding:9px; }
.ledger-filter label { margin:0; }
.ledger-filter>button { width:auto; min-height:44px; margin:0; padding:0 13px; }
.support-template { grid-column:1/-1; }
.support-template .ui-select { margin-top:0; }
.support-template .ui-select__button { min-height:38px; border-radius:10px; font-size:11px; }
.screen:has(.admin-support-compose) .support-thread { height:calc(var(--app-height) - 292px); }

@keyframes app-drop-mobile {
  0%,100% { transform:translate3d(6px,-5px,0) rotate(1deg); }
  50% { transform:translate3d(18px,-12px,0) rotate(4deg); }
}

/* Mobile WebView: keep one compositor-only drop without repainting every blurred card. */
@media (max-width: 619px), (pointer: coarse) {
  html { scroll-behavior:auto; }
  .screen { animation:none; }
  .liquid-bg i { animation:none!important; will-change:auto; }
  .liquid-bg i:nth-child(1) { opacity:.62; animation:app-drop-mobile 28s ease-in-out infinite!important; will-change:transform; }
  .liquid-bg i:nth-child(2) { opacity:.58; transform:translate3d(-8px,12px,0) rotate(-4deg); }
  .liquid-bg i:nth-child(3) { display:none; }

  .product,
  .empty,
  .detail-card,
  .detail-desc,
  .detail-warranty,
  .detail-reservation,
  .order-reservation,
  .cart-row,
  .promo-box,
  .total,
  .order-card,
  .timeline,
  .payment-box,
  .delivery,
  .profile-stats div,
  .action-list,
  .review textarea,
  .preview-note,
  .auth-card,
  .money-card,
  .admin-menu,
  .admin-block,
  .admin-detail,
  .admin-form,
  .admin-actions {
    background:linear-gradient(145deg,rgba(39,39,43,.94),rgba(14,14,16,.96));
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .search,
  .chip,
  .toast,
  .ui-select__menu {
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .search,.chip { background:rgba(31,31,34,.94); }
  .toast { background:rgba(31,31,34,.96); }
  .ui-select__menu { background:rgba(25,25,28,.98); }

  .topbar {
    background:linear-gradient(145deg,rgba(38,38,42,.84),rgba(12,12,14,.8));
    -webkit-backdrop-filter:blur(15px) saturate(108%);
    backdrop-filter:blur(15px) saturate(108%);
  }
  .bottom-nav {
    background:linear-gradient(145deg,rgba(43,43,47,.87),rgba(12,12,14,.83));
    -webkit-backdrop-filter:blur(17px) saturate(108%);
    backdrop-filter:blur(17px) saturate(108%);
  }

  .product,
  .cart-row,
  .order-card,
  .admin-order,
  .admin-product,
  .admin-user,
  .broadcast-failure,
  .stock-row {
    content-visibility:auto;
    contain:layout paint style;
    contain-intrinsic-size:auto 84px;
  }
  .support-thread { scroll-behavior:auto; }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-bg i:nth-child(1) { animation:none!important; will-change:auto; }
}

/* ===== Fluid Glass 2: one light field, crisp refractive edges, mobile-safe ===== */
:root {
  --text: #fbfbfd;
  --hint: #b2b2ba;
  --separator: rgba(255,255,255,.19);
  --glass-fill: rgba(22,22,26,.52);
  --glass-fill-deep: rgba(8,8,11,.36);
  --glass-edge: rgba(255,255,255,.24);
  --glass-shine: rgba(255,255,255,.34);
  --glass-shadow: 0 18px 48px rgba(0,0,0,.28);
}

html, body { max-width:100%; }
body {
  background:#070708;
  color:var(--text);
  font-family:"Onest",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  font-weight:560;
  letter-spacing:-.012em;
}

.liquid-bg {
  background:
    radial-gradient(70% 48% at 7% 2%,rgba(255,255,255,.14),transparent 54%),
    radial-gradient(62% 55% at 96% 14%,rgba(185,190,205,.11),transparent 58%),
    radial-gradient(50% 40% at 48% 100%,rgba(255,255,255,.07),transparent 66%),
    linear-gradient(155deg,#151518 0,#09090b 42%,#050506 100%);
}
.liquid-bg::before {
  content:"";
  position:absolute;
  inset:-14%;
  background:
    linear-gradient(118deg,transparent 28%,rgba(255,255,255,.026) 43%,transparent 56%),
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.035),transparent 42%);
  transform:rotate(-5deg);
}
.liquid-bg i {
  border-color:rgba(255,255,255,.19);
  background:
    radial-gradient(circle at 27% 18%,rgba(255,255,255,.27),rgba(255,255,255,.08) 22%,rgba(255,255,255,.025) 52%,rgba(255,255,255,.008) 67%),
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(0,0,0,.04));
  box-shadow:
    inset 9px 11px 19px rgba(255,255,255,.07),
    inset -15px -18px 30px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 28px 80px rgba(0,0,0,.35);
}

.topbar,
.product,
.empty,
.detail-card,
.detail-desc,
.detail-warranty,
.detail-reservation,
.order-reservation,
.cart-row,
.promo-box,
.total,
.order-card,
.payment-box,
.delivery,
.profile-stats div,
.action-list,
.preview-note,
.auth-card,
.money-card,
.preferences,
.admin-menu,
.admin-block,
.admin-detail,
.admin-form,
.admin-actions,
.support-compose {
  position:relative;
  isolation:isolate;
  border-color:var(--glass-edge);
  background:
    radial-gradient(120% 72% at 9% 0,rgba(255,255,255,.12),transparent 38%),
    linear-gradient(145deg,var(--glass-fill),var(--glass-fill-deep));
  box-shadow:
    inset 0 1px 0 var(--glass-shine),
    inset 1px 0 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.52),
    var(--glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(134%) contrast(104%);
  backdrop-filter:blur(18px) saturate(134%) contrast(104%);
}

.topbar::before,
.product::before,
.empty::before,
.detail-card::before,
.detail-desc::before,
.detail-warranty::before,
.detail-reservation::before,
.order-reservation::before,
.cart-row::before,
.promo-box::before,
.total::before,
.order-card::before,
.payment-box::before,
.delivery::before,
.profile-stats div::before,
.action-list::before,
.preview-note::before,
.auth-card::before,
.money-card::before,
.preferences::before,
.admin-menu::before,
.admin-block::before,
.admin-detail::before,
.admin-form::before,
.admin-actions::before,
.support-compose::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(112deg,rgba(255,255,255,.16),rgba(255,255,255,.025) 21%,transparent 44%),
    radial-gradient(95% 30% at 50% 0,rgba(255,255,255,.12),transparent 72%);
  opacity:.74;
}

.topbar > *,
.product > *,
.empty > *,
.detail-card > *,
.detail-desc > *,
.detail-warranty > *,
.detail-reservation > *,
.order-reservation > *,
.cart-row > *,
.promo-box > *,
.total > *,
.order-card > *,
.payment-box > *,
.delivery > *,
.profile-stats div > *,
.action-list > *,
.preview-note > *,
.auth-card > *,
.money-card > *,
.preferences > *,
.admin-menu > *,
.admin-block > *,
.admin-detail > *,
.admin-form > *,
.admin-actions > *,
.support-compose > * { position:relative; z-index:1; }

.bottom-nav {
  border-color:rgba(255,255,255,.28);
  background:
    radial-gradient(100% 90% at 12% 0,rgba(255,255,255,.16),transparent 45%),
    linear-gradient(145deg,rgba(38,38,44,.61),rgba(7,7,10,.54));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 18px 52px rgba(0,0,0,.48);
  -webkit-backdrop-filter:blur(20px) saturate(145%) contrast(106%);
  backdrop-filter:blur(20px) saturate(145%) contrast(106%);
}

.admin-stats div,
.admin-order,
.admin-product,
.admin-user,
.broadcast-failure,
.stock-list,
.stock-row,
.stats-periods > div,
.stats-overview > div,
.ui-select__button,
.ui-select__menu,
.search,
.chip,
.payment-option,
.auth-choice {
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(5,5,8,.23));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}

.section-title h1,
.section-title h2,
.detail-card h1,
.profile-card h1,
.auth-card h1,
.money-card h1,
.admin-title h1,
.admin-head h1,
.admin-detail h2,
.admin-form-title {
  color:#fff;
  font-family:"Onest",sans-serif;
  font-weight:820;
  text-wrap:balance;
}
.product__name,
.order-card__name,
.admin-order b,
.admin-product b,
.admin-user b,
.admin-menu button,
.admin-row { color:#f9f9fb; }
.product__meta,
.detail-note,
.admin-count,
.admin-form-note,
.admin-order span,
.admin-product span,
.admin-user span { color:var(--hint); }

.admin-form label { color:#d2d2d8; font-size:11px; font-weight:760; }
.admin-form input,
.admin-form textarea,
.admin-form select,
.admin-search input,
.auth-input {
  border-color:rgba(255,255,255,.21);
  background:rgba(5,5,8,.38);
  color:#fff;
  caret-color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 rgba(0,0,0,.28);
}
.admin-form input:focus,
.admin-form textarea:focus,
.admin-search input:focus,
.auth-input:focus {
  border-color:rgba(255,255,255,.52);
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08);
}
.admin-form input::placeholder,
.admin-form textarea::placeholder,
.admin-search input::placeholder,
.auth-input::placeholder { color:#85858e; }

.screen,
.admin-list,
.admin-menu,
.admin-form { touch-action:pan-y; }
.screen > :last-child:not(.bottom-nav) { scroll-margin-bottom:calc(var(--nav-height) + 24px + env(safe-area-inset-bottom)); }

@media (max-width:619px), (pointer:coarse) {
  html { overscroll-behavior-y:contain; }
  body { min-height:var(--app-height); overscroll-behavior-y:contain; touch-action:pan-y; }
  .app { min-height:var(--app-height); }
  .screen { min-height:calc(var(--app-height) - var(--nav-height)); padding-bottom:10px; animation:none; }

  .topbar,
  .product,
  .empty,
  .detail-card,
  .detail-desc,
  .detail-warranty,
  .detail-reservation,
  .order-reservation,
  .cart-row,
  .promo-box,
  .total,
  .order-card,
  .payment-box,
  .delivery,
  .profile-stats div,
  .action-list,
  .preview-note,
  .auth-card,
  .money-card,
  .preferences,
  .admin-menu,
  .admin-block,
  .admin-detail,
  .admin-form,
  .admin-actions,
  .support-compose {
    background:
      radial-gradient(115% 70% at 8% 0,rgba(255,255,255,.12),transparent 39%),
      linear-gradient(145deg,rgba(29,29,34,.72),rgba(7,7,10,.63));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 1px 0 0 rgba(255,255,255,.055),
      inset 0 -1px 0 rgba(0,0,0,.55),
      0 12px 32px rgba(0,0,0,.22);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .topbar,
  .bottom-nav {
    -webkit-backdrop-filter:blur(15px) saturate(138%);
    backdrop-filter:blur(15px) saturate(138%);
  }
  html:not(.glass-low-power) .admin-menu,
  html:not(.glass-low-power) .admin-block,
  html:not(.glass-low-power) .admin-detail,
  html:not(.glass-low-power) .admin-form,
  html:not(.glass-low-power) .auth-card,
  html:not(.glass-low-power) .money-card {
    -webkit-backdrop-filter:blur(10px) saturate(126%);
    backdrop-filter:blur(10px) saturate(126%);
  }

  .admin-form { padding:15px; overflow:visible; }
  .admin-menu,.admin-block,.admin-detail,.admin-actions { overflow:hidden; }
  .admin-form input,
  .admin-form textarea,
  .admin-form select,
  .admin-search input,
  .ui-select__button { min-height:47px; font-size:16px; }
  .admin-form textarea { min-height:112px; line-height:1.45; }
  .admin-form > button { min-height:48px; font-size:13px; }
  .admin-menu button,.admin-row { min-height:52px; font-size:14px; }
  .admin-order,.admin-product,.admin-user { padding:13px; }
  .admin-order b,.admin-product b,.admin-user b { font-size:15px; }
  .admin-order span,.admin-product span,.admin-user span { font-size:11px; line-height:1.45; }
  .admin-actions button { min-height:48px; font-size:11px; }
  .ui-select__menu { max-height:min(278px,44vh); -webkit-overflow-scrolling:touch; }
  .support-thread { min-height:220px; }

  .liquid-bg i { animation:none!important; will-change:auto; }
  .liquid-bg i:nth-child(1) { opacity:.72; }
  .liquid-bg i:nth-child(2) { opacity:.48; }
  html:not(.glass-low-power) .liquid-bg i:nth-child(1) { animation:app-drop-mobile 34s ease-in-out infinite!important; will-change:transform; }
  html.glass-low-power .liquid-bg i:nth-child(2) { display:none; }
}

@media (max-width:360px) {
  .admin-grid { grid-template-columns:minmax(0,1fr); }
  .admin-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-periods { grid-template-columns:minmax(0,1fr); }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .topbar,.bottom-nav,.product,.auth-card,.money-card,.admin-menu,.admin-block,.admin-detail,.admin-form { background:rgba(23,23,27,.94); }
}

/* ===== Support chat: compact, directional and keyboard-safe ===== */
.app:has(.support-chat) {
  height:var(--app-height);
  min-height:var(--app-height);
  padding-bottom:0;
  overflow:hidden;
}
.screen:has(.support-chat) {
  height:calc(var(--app-height) - var(--nav-height) - 12px - env(safe-area-inset-bottom));
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding-bottom:0;
}
.screen:has(.support-chat) > .topbar { flex:0 0 auto; }
.support-chat {
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  margin:0 8px 5px;
  overflow:visible;
}
.support-chat__head {
  min-height:54px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 3px 7px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.support-chat__back {
  width:38px;
  height:38px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.13);
  border-radius:13px;
  background:rgba(255,255,255,.04);
  color:#d7d7dc;
}
.support-chat__back svg { width:19px; height:19px; }
.support-chat__head > div { min-width:0; }
.support-chat__head h1 {
  overflow:hidden;
  color:#fff;
  font-size:19px;
  font-weight:830;
  line-height:1.08;
  letter-spacing:-.035em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.support-chat__head span {
  display:block;
  overflow:hidden;
  margin-top:3px;
  color:var(--hint);
  font-size:10px;
  font-weight:660;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.support-thread,
.screen:has(.admin-support-compose) .support-thread {
  width:100%;
  height:auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:8px 3px 12px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.16) transparent;
}
.support-day {
  display:flex;
  justify-content:center;
  margin:8px 0 6px;
}
.support-day span {
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:9px;
  background:rgba(8,8,10,.42);
  color:#8f8f98;
  font-size:8px;
  font-weight:720;
  line-height:1.2;
}
.support-message-row {
  width:100%;
  display:flex;
  padding:2px 0;
  content-visibility:auto;
  contain:layout paint style;
  contain-intrinsic-size:auto 40px;
}
.support-message-row.group-start { margin-top:5px; }
.support-message-row.incoming { justify-content:flex-start; }
.support-message-row.outgoing { justify-content:flex-end; }
.support-message {
  width:fit-content;
  max-width:min(78%,440px);
  min-width:54px;
  margin:0;
  padding:8px 11px 6px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:17px 17px 17px 6px;
  background:linear-gradient(145deg,rgba(43,43,48,.72),rgba(15,15,18,.67));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 5px 18px rgba(0,0,0,.14);
  color:#f1f1f3;
  overflow-wrap:anywhere;
  font-size:13.5px;
  font-weight:560;
  line-height:1.38;
}
.support-message-row.outgoing .support-message {
  border-color:rgba(255,255,255,.72);
  border-radius:17px 17px 6px 17px;
  background:linear-gradient(180deg,#fafafb,#dedee2);
  box-shadow:inset 0 1px 0 #fff,0 7px 22px rgba(0,0,0,.22);
  color:#111114;
}
.support-message p { white-space:pre-wrap; }
.support-message time {
  display:block;
  margin-top:3px;
  color:#898991;
  font-size:8px;
  font-weight:650;
  line-height:1;
  text-align:right;
}
.support-message-row.outgoing .support-message time { color:#64646b; }
.support-file {
  width:min(270px,100%);
  min-height:46px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  margin-top:7px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:11px;
  background:rgba(255,255,255,.05);
  color:inherit;
  text-align:left;
}
.support-file > i {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.09);
  font-size:14px;
  font-style:normal;
}
.support-file > span { min-width:0; display:block; }
.support-file b,
.support-file small { display:block; }
.support-file b {
  overflow:hidden;
  color:inherit;
  font-size:10px;
  font-weight:780;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.support-file small { margin-top:2px; color:#9999a1; font-size:8px; font-weight:620; }
.support-file > em { color:#9999a1; font-size:11px; font-style:normal; }
.support-message-row.outgoing .support-file { border-color:rgba(0,0,0,.11); background:rgba(0,0,0,.045); }
.support-message-row.outgoing .support-file > i { background:rgba(0,0,0,.07); }
.support-message-row.outgoing .support-file small,
.support-message-row.outgoing .support-file > em { color:#66666d; }
.support-empty {
  height:100%;
  min-height:160px;
  display:grid;
  place-items:center;
  padding:24px;
  color:#85858d;
  font-size:11px;
  font-weight:650;
  text-align:center;
}
.support-compose {
  position:relative;
  z-index:5;
  display:block;
  margin:0;
  padding:5px;
  overflow:visible;
  border:1px solid rgba(255,255,255,.22);
  border-radius:19px;
  background:
    radial-gradient(110% 90% at 8% 0,rgba(255,255,255,.12),transparent 46%),
    linear-gradient(145deg,rgba(37,37,42,.72),rgba(8,8,11,.67));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 32px rgba(0,0,0,.24);
  -webkit-backdrop-filter:blur(16px) saturate(132%);
  backdrop-filter:blur(16px) saturate(132%);
}
.support-compose:focus-within { border-color:rgba(255,255,255,.4); }
.support-compose__row {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 40px;
  align-items:end;
  gap:5px;
}
.support-compose textarea {
  width:100%;
  height:40px;
  min-height:40px;
  max-height:104px;
  margin:0;
  padding:10px 5px 8px;
  overflow-y:auto;
  border:0;
  outline:0;
  background:transparent;
  color:#f7f7f9;
  caret-color:#fff;
  resize:none;
  font-family:inherit;
  font-size:14px;
  font-weight:560;
  line-height:1.4;
}
.support-compose textarea::placeholder { color:#85858e; opacity:1; }
.support-attach,
.support-send {
  width:40px;
  height:40px;
  min-height:40px;
  align-self:end;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border-radius:13px;
}
.support-attach {
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.045);
  color:#c5c5cb;
  font-size:21px;
  font-weight:430;
  cursor:pointer;
}
.support-attach input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.support-compose .support-send {
  border:1px solid #fff;
  background:linear-gradient(180deg,#fff,#dcdce0);
  color:#111114;
  font-size:21px;
  font-weight:850;
  line-height:1;
  box-shadow:inset 0 1px 0 #fff,0 5px 15px rgba(0,0,0,.2);
}
.support-attach:active,
.support-send:active { transform:scale(.95); }
.support-selection {
  min-height:30px;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 3px 4px;
  padding:4px 5px 4px 9px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:rgba(255,255,255,.04);
}
.support-selection > span {
  min-width:0;
  flex:1;
  overflow:hidden;
  color:#c7c7cd;
  font-size:9px;
  font-weight:690;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.support-selection > button {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:8px;
  background:rgba(255,255,255,.07);
  color:#aaaab1;
  font-size:15px;
}
.support-template { margin:0 0 5px; }
.support-template .ui-select { margin:0; }
.support-template .ui-select__button { min-height:37px; border-radius:12px; font-size:11px; }
.support-template .ui-select__menu { bottom:calc(100% + 6px); top:auto; transform-origin:bottom; }

@media (max-width:619px), (pointer:coarse) {
  .screen:has(.support-chat) { height:calc(var(--app-height) - var(--nav-height) - 9px - env(safe-area-inset-bottom)); }
  .support-chat { margin:0 6px 3px; }
  .support-chat__head { min-height:50px; padding-block:4px 6px; }
  .support-chat__back { width:36px; height:36px; border-radius:12px; }
  .support-chat__head h1 { font-size:18px; }
  .support-thread { padding:7px 2px 10px; scroll-behavior:auto; }
  .support-message { max-width:86%; padding:8px 10px 6px; font-size:14px; }
  .support-compose { -webkit-backdrop-filter:none; backdrop-filter:none; }
  html:not(.glass-low-power) .support-compose { -webkit-backdrop-filter:blur(11px) saturate(126%); backdrop-filter:blur(11px) saturate(126%); }
  .support-compose textarea { font-size:16px; }
  .support-day { margin-block:6px 4px; }
}

@media (max-width:350px) {
  .support-message { max-width:90%; }
  .support-compose__row { grid-template-columns:38px minmax(0,1fr) 38px; gap:4px; }
  .support-attach,.support-send { width:38px; height:38px; min-height:38px; }
}

/* Mobile admin selects stay in the document flow and never cover form fields. */
@media (max-width:619px), (pointer:coarse) {
  .admin-form .ui-select__menu {
    position:relative;
    inset:auto;
    max-height:0;
    margin-top:0;
    padding:0 5px;
    overflow:hidden;
    border-width:0;
    box-shadow:none;
    transform:none;
    transform-origin:top;
    transition:max-height .18s ease,margin-top .18s ease,padding .18s ease,opacity .14s ease,visibility .14s;
  }
  .admin-form .ui-select.open .ui-select__menu {
    max-height:min(278px,44vh);
    margin-top:6px;
    padding:5px;
    overflow:auto;
    border-width:1px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 12px 30px rgba(0,0,0,.32);
  }
}

/* Keep every uploaded product image visible, regardless of its aspect ratio. */
.product__media {
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.035);
}
.product__media img {
  object-fit:contain;
  object-position:50% 50%;
  image-rendering:auto;
}
.cart-row__img {
  padding:4px;
  background:rgba(255,255,255,.045);
}
.cart-row__img img {
  object-fit:contain;
  object-position:50% 50%;
}

/* A product image is always shown as a complete square in cards and details. */
.product__media {
  width:84px;
  height:84px;
  aspect-ratio:1/1;
  align-self:start;
}
.detail-media {
  width:clamp(184px,54vw,220px);
  height:auto;
  max-height:none;
  margin:8px auto 0;
  aspect-ratio:1/1;
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 10px 28px rgba(0,0,0,.18);
}
.detail-media img {
  padding:8px;
  object-fit:contain;
  object-position:50% 50%;
  border-radius:16px;
}
.detail-media + .detail-card { margin:8px 8px 0; }
.admin-image-preview { aspect-ratio:1/1; }