/* ======================================================================
   AMPOLSHOP V9 — tokenized themes, mobile density and operations UI
   This file is deliberately loaded last.
   ====================================================================== */

:root,
:root[data-theme="emerald"] {
    color-scheme: light;
    --theme-page: #f4faf7;
    --theme-page-alt: #e8f2ed;
    --theme-panel: rgba(255, 255, 255, .93);
    --theme-panel-strong: #ffffff;
    --theme-panel-soft: #edf6f1;
    --theme-text: #102019;
    --theme-muted: #5b7165;
    --theme-faint: #84968c;
    --theme-line: rgba(10, 91, 60, .16);
    --theme-line-strong: rgba(16, 185, 129, .38);
    --theme-accent: #10b981;
    --theme-accent-2: #087443;
    --theme-accent-3: #63e6a4;
    --theme-accent-soft: rgba(16, 185, 129, .12);
    --theme-accent-contrast: #ffffff;
    --theme-accent-text: #067647;
    --theme-action-from: #065f46;
    --theme-action-to: #047857;
    --theme-action-text: #ffffff;
    --theme-dark: #0d1c15;
    --theme-dark-2: #14291e;
    --theme-on-dark: #f4fff8;
    --theme-on-dark-muted: #b6cabf;
    --theme-header: rgba(255, 255, 255, .91);
    --theme-shadow: rgba(20, 67, 44, .14);
    --theme-hero-glow: rgba(16, 185, 129, .32);
}

:root[data-theme="crimson"] {
    color-scheme: light;
    --theme-page: #fff7e8;
    --theme-page-alt: #f3e6cf;
    --theme-panel: rgba(255, 252, 244, .94);
    --theme-panel-strong: #fffdf8;
    --theme-panel-soft: #f8ecd8;
    --theme-text: #321a17;
    --theme-muted: #785c53;
    --theme-faint: #a48b80;
    --theme-line: rgba(133, 54, 43, .17);
    --theme-line-strong: rgba(196, 61, 50, .40);
    --theme-accent: #c43d32;
    --theme-accent-2: #8f2721;
    --theme-accent-3: #d7a83d;
    --theme-accent-soft: rgba(196, 61, 50, .11);
    --theme-accent-contrast: #ffffff;
    --theme-accent-text: #9f2f27;
    --theme-action-from: #8f2721;
    --theme-action-to: #c43d32;
    --theme-action-text: #ffffff;
    --theme-dark: #2d1815;
    --theme-dark-2: #47211c;
    --theme-on-dark: #fff9ed;
    --theme-on-dark-muted: #e6cfc1;
    --theme-header: rgba(255, 250, 239, .92);
    --theme-shadow: rgba(91, 37, 25, .15);
    --theme-hero-glow: rgba(196, 61, 50, .33);
}

:root[data-theme="sapphire"] {
    color-scheme: light;
    --theme-page: #f2f8ff;
    --theme-page-alt: #e2edf8;
    --theme-panel: rgba(255, 255, 255, .94);
    --theme-panel-strong: #ffffff;
    --theme-panel-soft: #eaf3fb;
    --theme-text: #12283d;
    --theme-muted: #526b82;
    --theme-faint: #8196a9;
    --theme-line: rgba(23, 89, 146, .16);
    --theme-line-strong: rgba(35, 131, 219, .38);
    --theme-accent: #2383db;
    --theme-accent-2: #17558f;
    --theme-accent-3: #69b7f8;
    --theme-accent-soft: rgba(35, 131, 219, .11);
    --theme-accent-contrast: #ffffff;
    --theme-accent-text: #1767a9;
    --theme-action-from: #174f7d;
    --theme-action-to: #1767a9;
    --theme-action-text: #ffffff;
    --theme-dark: #102438;
    --theme-dark-2: #183a5a;
    --theme-on-dark: #f3f9ff;
    --theme-on-dark-muted: #bdd0e1;
    --theme-header: rgba(248, 252, 255, .92);
    --theme-shadow: rgba(24, 67, 104, .14);
    --theme-hero-glow: rgba(35, 131, 219, .34);
}

:root[data-theme="graphite"] {
    color-scheme: dark;
    --theme-page: #11151b;
    --theme-page-alt: #171d25;
    --theme-panel: rgba(28, 35, 44, .94);
    --theme-panel-strong: #202832;
    --theme-panel-soft: #252e38;
    --theme-text: #edf3f6;
    --theme-muted: #aebbc5;
    --theme-faint: #778692;
    --theme-line: rgba(214, 228, 238, .12);
    --theme-line-strong: rgba(125, 211, 168, .34);
    --theme-accent: #7dd3a8;
    --theme-accent-2: #2d8c65;
    --theme-accent-3: #b3ebce;
    --theme-accent-soft: rgba(125, 211, 168, .12);
    --theme-accent-contrast: #0d1a14;
    --theme-accent-text: #9be4be;
    --theme-action-from: #7dd3a8;
    --theme-action-to: #b3ebce;
    --theme-action-text: #0d1a14;
    --theme-dark: #0b0f14;
    --theme-dark-2: #161e26;
    --theme-on-dark: #f3f7f9;
    --theme-on-dark-muted: #adbac4;
    --theme-header: rgba(22, 27, 34, .92);
    --theme-shadow: rgba(0, 0, 0, .34);
    --theme-hero-glow: rgba(125, 211, 168, .26);
}

:root[data-theme="violet"] {
    color-scheme: light;
    --theme-page: #f8f5ff;
    --theme-page-alt: #ece7f7;
    --theme-panel: rgba(255, 255, 255, .94);
    --theme-panel-strong: #ffffff;
    --theme-panel-soft: #f0ebfb;
    --theme-text: #281d3d;
    --theme-muted: #6b5c82;
    --theme-faint: #9587a9;
    --theme-line: rgba(92, 58, 148, .16);
    --theme-line-strong: rgba(139, 92, 246, .38);
    --theme-accent: #8b5cf6;
    --theme-accent-2: #5b35b3;
    --theme-accent-3: #b79af9;
    --theme-accent-soft: rgba(139, 92, 246, .11);
    --theme-accent-contrast: #ffffff;
    --theme-accent-text: #7042d2;
    --theme-action-from: #5b35b3;
    --theme-action-to: #7c3aed;
    --theme-action-text: #ffffff;
    --theme-dark: #211735;
    --theme-dark-2: #39255c;
    --theme-on-dark: #faf7ff;
    --theme-on-dark-muted: #d5c8e8;
    --theme-header: rgba(252, 250, 255, .92);
    --theme-shadow: rgba(60, 38, 97, .15);
    --theme-hero-glow: rgba(139, 92, 246, .32);
}

html { background: var(--theme-page) !important; }
html.ampol-modal-open { overflow: hidden; }
body.ampol-app {
    color: var(--theme-text) !important;
    background:
        radial-gradient(circle at 8% -5%, var(--theme-accent-soft), transparent 29rem),
        radial-gradient(circle at 96% 35%, color-mix(in srgb, var(--theme-accent-2) 11%, transparent), transparent 32rem),
        linear-gradient(150deg, var(--theme-page), var(--theme-page-alt)) !important;
    background-attachment: fixed !important;
}
body.ampol-app::after { background: radial-gradient(circle at center, transparent 35%, color-mix(in srgb, var(--theme-dark) 10%, transparent)) !important; }
body.ampol-app::before { opacity: .12 !important; }

.site-canvas,
.storefront-page,
.product-service-page,
.ampol-orders-page,
.dashboard-shell { background: transparent !important; color: var(--theme-text); }

.premium-panel,
.glass-panel,
.metric-card,
.admin-surface,
.account-recent,
.account-support,
.account-activity,
.ampol-product-permission-card {
    color: var(--theme-text) !important;
    border-color: var(--theme-line) !important;
    background: linear-gradient(150deg, var(--theme-panel), var(--theme-panel-soft)) !important;
    box-shadow: 0 20px 58px var(--theme-shadow) !important;
}
.premium-panel::before,
.glass-panel::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme-accent) 34%, transparent), transparent) !important; }
.premium-panel :where(.text-white,.text-zinc-100,.text-zinc-200),
.glass-panel :where(.text-white,.text-zinc-100,.text-zinc-200),
.metric-card :where(.text-white,.text-zinc-100,.text-zinc-200),
.ampol-product-permission-card :where(.text-white,.text-zinc-100,.text-zinc-200) { color: var(--theme-text) !important; }
.premium-panel :where(.text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-zinc-700),
.glass-panel :where(.text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-zinc-700),
.metric-card :where(.text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-zinc-700) { color: var(--theme-muted) !important; }
.premium-panel :where([class~="bg-white"],[class*="bg-black/"]),
.glass-panel :where([class~="bg-white"],[class*="bg-black/"]) { background: var(--theme-panel-soft) !important; }
.premium-panel [class*="border-white"],
.glass-panel [class*="border-white"] { border-color: var(--theme-line) !important; }
.ampol-account-level-card { color: var(--theme-text); border-color: var(--theme-line) !important; background: var(--theme-panel-soft) !important; box-shadow: 0 18px 46px var(--theme-shadow) !important; }

.eyebrow,
.storefront-kicker { color: var(--theme-accent) !important; }
.eyebrow::before { background: linear-gradient(90deg, var(--theme-accent), transparent) !important; }
.section-title,
.ampol-section-head h2 { color: var(--theme-text) !important; }
.section-copy,
.ampol-section-head p { color: var(--theme-muted) !important; }

.btn-primary,
.ampol-login-button {
    color: var(--theme-accent-contrast) !important;
    border-color: transparent !important;
    background: linear-gradient(120deg, var(--theme-accent-2), var(--theme-accent), var(--theme-accent-3)) !important;
    box-shadow: 0 14px 36px color-mix(in srgb, var(--theme-accent) 27%, transparent) !important;
}
.btn-primary:hover,
.ampol-login-button:hover { box-shadow: 0 18px 44px color-mix(in srgb, var(--theme-accent) 38%, transparent) !important; }
.btn-secondary,
.btn-ghost {
    color: var(--theme-text) !important;
    border-color: var(--theme-line) !important;
    background: color-mix(in srgb, var(--theme-panel-strong) 78%, transparent) !important;
}
.btn-secondary:hover,
.btn-ghost:hover { color: var(--theme-accent-2) !important; border-color: var(--theme-line-strong) !important; background: var(--theme-accent-soft) !important; }
.copy-chip { color: var(--theme-accent-2) !important; border-color: var(--theme-line-strong) !important; background: var(--theme-accent-soft) !important; }
.copy-chip.is-copied,
[data-copy].is-copied { outline: 3px solid var(--theme-accent-soft); border-color: var(--theme-accent) !important; }

.field,
.select-field,
.textarea-field,
.ampol-app input:not([type="checkbox"]):not([type="radio"]),
.ampol-app textarea,
.ampol-app select {
    color: var(--theme-text) !important;
    border-color: var(--theme-line) !important;
    background-color: var(--theme-panel-strong) !important;
}
.ampol-app input::placeholder,
.ampol-app textarea::placeholder { color: var(--theme-faint) !important; opacity: 1; }
.field-label,
.form-label { color: var(--theme-text) !important; }
.field-help { color: var(--theme-muted) !important; }

/* Legacy utility classes now inherit the selected accent instead of leaking green. */
.ampol-app [class*="text-emerald-"] { color: var(--theme-accent-2) !important; }
.ampol-app [class*="border-emerald-"] { border-color: var(--theme-line-strong) !important; }
.ampol-app [class*="bg-emerald-"] { background-color: var(--theme-accent-soft) !important; }
.ampol-app [class*="shadow-emerald-"] { --tw-shadow-color: var(--theme-shadow) !important; }
.ampol-app [class*="from-emerald-"] {
    --tw-gradient-from: var(--theme-accent-2) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: color-mix(in srgb, var(--theme-accent-2) 0%, transparent) var(--tw-gradient-to-position) !important;
}
.ampol-app [class*="via-emerald-"] {
    --tw-gradient-to: color-mix(in srgb, var(--theme-accent) 0%, transparent) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--theme-accent) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.ampol-app [class*="to-emerald-"] { --tw-gradient-to: var(--theme-accent) var(--tw-gradient-to-position) !important; }
.ampol-app :where([class~="bg-[#eef8f3]"],[class~="bg-[#edf7f2]"],[class~="bg-[#f3f8f5]"]) { background: var(--theme-panel-soft) !important; }

/* Header */
.ampol-site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 80;
    border-bottom: 1px solid var(--theme-line);
    background: var(--theme-header);
    box-shadow: 0 10px 40px var(--theme-shadow);
    backdrop-filter: blur(22px) saturate(1.35);
}
.ampol-site-header__bar { display: flex; height: 4.7rem; align-items: center; justify-content: space-between; gap: 1rem; }
.ampol-header-spacer { height: 4.7rem; }
.ampol-brand { display: inline-flex; min-width: 0; align-items: center; gap: .7rem; color: var(--theme-text); }
.ampol-brand__mark { position: relative; display: grid; width: 2.65rem; height: 2.65rem; flex: 0 0 2.65rem; place-items: center; overflow: hidden; border-radius: .9rem; color: var(--theme-accent-contrast); background: linear-gradient(145deg,var(--theme-accent),var(--theme-accent-2)); box-shadow: 0 10px 26px color-mix(in srgb,var(--theme-accent) 28%,transparent); }
.ampol-brand__mark i { position: absolute; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; }
.ampol-brand__mark b { position: relative; font-size: 1rem; font-weight: 1000; }
.ampol-brand__copy { min-width: 0; line-height: 1; }
.ampol-brand__copy > b { display: block; white-space: nowrap; font-size: 1.03rem; font-weight: 1000; letter-spacing: -.04em; color: var(--theme-text); }
.ampol-brand__copy > b i { color: var(--theme-accent); font-style: normal; }
.ampol-brand__copy small { display: block; margin-top: .42rem; white-space: nowrap; font-size: .43rem; font-weight: 900; letter-spacing: .18em; color: var(--theme-faint); }
.ampol-desktop-nav { display: none; align-items: center; gap: .2rem; padding: .25rem; border: 1px solid var(--theme-line); border-radius: 1rem; background: color-mix(in srgb,var(--theme-panel-strong) 72%,transparent); }
.ampol-desktop-nav a { position: relative; border-radius: .75rem; padding: .65rem .85rem; font-size: .72rem; font-weight: 850; color: var(--theme-muted); transition: .2s ease; }
.ampol-desktop-nav a:hover,
.ampol-desktop-nav a.is-active { color: var(--theme-accent-2); background: var(--theme-accent-soft); }
.ampol-desktop-nav a.is-active::after { content: ''; position: absolute; inset-inline: 30%; bottom: .22rem; height: 2px; border-radius: 99px; background: var(--theme-accent); }
.ampol-header-actions { display: flex; align-items: center; gap: .45rem; }
.ampol-header-icon,
.ampol-menu-button { position: relative; display: inline-flex; width: 2.55rem; height: 2.55rem; align-items: center; justify-content: center; border: 1px solid var(--theme-line); border-radius: .82rem; color: var(--theme-text); background: color-mix(in srgb,var(--theme-panel-strong) 78%,transparent); transition: .2s ease; }
.ampol-header-icon:hover,
.ampol-menu-button:hover { color: var(--theme-accent-2); border-color: var(--theme-line-strong); background: var(--theme-accent-soft); }
.ampol-header-icon svg,
.ampol-menu-button svg { width: 1.15rem; height: 1.15rem; }
.ampol-header-search { width: auto; gap: .42rem; padding-inline: .75rem; }
.ampol-header-search span { display: none; font-size: .64rem; font-weight: 900; }
.ampol-theme-shortcut { display: none; }
.ampol-header-count { position: absolute; inset-inline-end: -.28rem; top: -.3rem; min-width: 1.18rem; padding: .1rem .25rem; border: 2px solid var(--theme-panel-strong); border-radius: 999px; color: var(--theme-accent-contrast); background: var(--theme-accent); text-align: center; font-size: .52rem; font-weight: 1000; }
.ampol-header-alert { display: none; height: 2.55rem; align-items: center; gap: .45rem; border: 1px solid rgba(217,119,6,.26); border-radius: .82rem; padding-inline: .65rem; color: #8a5204; background: #fff4d7; font-size: .6rem; font-weight: 900; }
.ampol-header-alert span { display: grid; width: 1.15rem; height: 1.15rem; place-items: center; border-radius: 99px; color: #fff; background: #d97706; }
.ampol-account-button { display: none; height: 2.55rem; align-items: center; gap: .5rem; border: 1px solid var(--theme-line); border-radius: .82rem; padding: .25rem .4rem .25rem .7rem; color: var(--theme-text); background: var(--theme-panel-strong); }
.ampol-account-button span { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border-radius: .65rem; color: var(--theme-accent-contrast); background: linear-gradient(145deg,var(--theme-accent),var(--theme-accent-2)); font-size: .65rem; font-weight: 1000; }
.ampol-account-button b { font-size: .62rem; font-weight: 900; }
.ampol-login-button { display: none; align-items: center; justify-content: center; min-height: 2.55rem; border-radius: .82rem; padding: .6rem .9rem; font-size: .66rem; font-weight: 950; }
.ampol-menu-button { display: inline-flex; }
.ampol-mobile-menu { border-top: 1px solid var(--theme-line); background: var(--theme-header); box-shadow: 0 22px 52px var(--theme-shadow); }
.ampol-mobile-menu__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; padding-block: .75rem; }
.ampol-mobile-menu__grid a { display: flex; min-height: 2.9rem; align-items: center; justify-content: center; border: 1px solid var(--theme-line); border-radius: .8rem; color: var(--theme-text); background: var(--theme-panel-soft); font-size: .72rem; font-weight: 900; }
.ampol-mobile-menu__grid a.is-primary { color: var(--theme-accent-contrast); border-color: transparent; background: var(--theme-accent); }
.ampol-mobile-menu__grid a.is-warning { grid-column: 1 / -1; color: #855009; border-color: rgba(217,119,6,.25); background: #fff4d7; }

.mobile-app-nav { border-color: var(--theme-line) !important; background: var(--theme-header) !important; box-shadow: 0 14px 45px var(--theme-shadow) !important; }
.mobile-app-nav > a { color: var(--theme-muted) !important; }
.mobile-app-nav > a.is-active { color: var(--theme-accent-2) !important; }
.mobile-app-nav__search > span { border-color: var(--theme-page) !important; color: var(--theme-accent-contrast) !important; background: linear-gradient(145deg,var(--theme-accent),var(--theme-accent-2)) !important; box-shadow: 0 12px 30px color-mix(in srgb,var(--theme-accent) 30%,transparent) !important; }

/* Home */
.ampol-home { min-height: 100vh; color: var(--theme-text); background: linear-gradient(150deg,var(--theme-page),var(--theme-page-alt)); }
.ampol-home-hero { position: relative; min-height: 42rem; overflow: hidden; border-bottom: 1px solid var(--theme-line); background: var(--theme-dark); }
.ampol-home-hero__image,
.ampol-home-hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ampol-home-hero__image img { object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.08); opacity: .34; }
.ampol-home-hero__overlay { position: absolute; inset: 0; background: radial-gradient(circle at 72% 36%,var(--theme-hero-glow),transparent 29rem),linear-gradient(90deg,color-mix(in srgb,var(--theme-dark) 98%,transparent) 0%,color-mix(in srgb,var(--theme-dark) 80%,transparent) 52%,color-mix(in srgb,var(--theme-dark) 35%,transparent) 100%),linear-gradient(to bottom,transparent 55%,var(--theme-dark)); }
.ampol-home-hero__grid { position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom,black,transparent 85%); }
.ampol-home-hero__layout { position: relative; z-index: 2; display: grid; min-height: 36rem; align-items: center; padding-block: 3.5rem 2rem; }
.ampol-home-hero__copy { position: relative; z-index: 3; max-width: 45rem; }
.ampol-live-chip { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid color-mix(in srgb,var(--theme-accent) 36%,transparent); border-radius: 999px; padding: .45rem .7rem; color: var(--theme-on-dark-muted); background: rgba(0,0,0,.28); backdrop-filter: blur(12px); font-size: .62rem; font-weight: 850; }
.ampol-live-chip i { width: .45rem; height: .45rem; border-radius: 99px; background: var(--theme-accent); box-shadow: 0 0 0 5px var(--theme-accent-soft); }
.ampol-live-chip b { border-inline-start: 1px solid rgba(255,255,255,.14); padding-inline-start: .55rem; color: var(--theme-accent-3); font-size: .55rem; }
.ampol-home-hero h1 { margin-top: 1.25rem; max-width: 43rem; color: var(--theme-on-dark); font-size: clamp(2.4rem,6vw,5.3rem); font-weight: 1000; line-height: 1.12; letter-spacing: -.055em; }
.ampol-home-hero h1 span { color: var(--theme-accent-3); text-shadow: 0 0 34px color-mix(in srgb,var(--theme-accent) 32%,transparent); }
.ampol-home-hero__copy > p { margin-top: 1.15rem; max-width: 39rem; color: var(--theme-on-dark-muted); font-size: .93rem; font-weight: 550; line-height: 2; }
.ampol-home-search { display: flex; max-width: 39rem; align-items: center; gap: .5rem; margin-top: 1.55rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1.15rem; padding: .42rem; background: rgba(4,10,7,.66); box-shadow: 0 22px 70px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.ampol-home-search svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-inline-start: .65rem; color: var(--theme-on-dark-muted); }
.ampol-home-search input { min-width: 0; flex: 1; border: 0 !important; padding: .75rem .2rem !important; color: var(--theme-on-dark) !important; background: transparent !important; box-shadow: none !important; font-size: .75rem; }
.ampol-home-search input::placeholder { color: color-mix(in srgb,var(--theme-on-dark-muted) 65%,transparent) !important; }
.ampol-home-search button { min-height: 2.8rem; border-radius: .85rem; padding-inline: 1.1rem; color: var(--theme-accent-contrast); background: linear-gradient(135deg,var(--theme-accent),var(--theme-accent-2)); font-size: .68rem; font-weight: 950; }
.ampol-home-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
.ampol-home-trust { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.15rem; color: var(--theme-on-dark-muted); font-size: .61rem; font-weight: 800; }
.ampol-home-trust i { color: var(--theme-accent-3); font-style: normal; }
.ampol-home-hero__visual { position: absolute; z-index: 1; inset-inline-end: 3%; top: 50%; width: 31rem; height: 31rem; transform: translateY(-52%); opacity: .95; }
.ampol-ampoule { position: absolute; inset-inline-start: 50%; top: 50%; width: 9.5rem; height: 23rem; transform: translate(-50%,-50%) rotate(8deg); filter: drop-shadow(0 35px 65px rgba(0,0,0,.45)); animation: ampolV9Float 6s ease-in-out infinite; }
.ampol-ampoule__cap { position: absolute; inset-inline: 2.15rem; top: 0; height: 4rem; border: 1px solid rgba(255,255,255,.28); border-radius: 1.5rem 1.5rem .65rem .65rem; background: linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.12),rgba(255,255,255,.35)); }
.ampol-ampoule__glass { position: absolute; inset: 3.35rem .65rem 1.1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.30); border-radius: 1.8rem 1.8rem 3.6rem 3.6rem; color: var(--theme-on-dark); background: linear-gradient(115deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 40%,rgba(255,255,255,.13)); box-shadow: inset 0 0 38px rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.ampol-ampoule__glass::after { content: ''; position: absolute; inset: 43% .3rem .3rem; border-radius: 1.2rem 1.2rem 3.2rem 3.2rem; background: linear-gradient(180deg,color-mix(in srgb,var(--theme-accent) 58%,transparent),var(--theme-accent-2)); box-shadow: 0 -10px 32px var(--theme-hero-glow); }
.ampol-ampoule__glass i { position: absolute; z-index: 2; inset-inline-start: 1rem; top: 1rem; width: .65rem; height: 70%; border-radius: 99px; background: linear-gradient(rgba(255,255,255,.65),transparent); opacity: .5; }
.ampol-ampoule__glass b,
.ampol-ampoule__glass small { position: relative; z-index: 3; }
.ampol-ampoule__glass b { font-size: 4rem; font-weight: 1000; line-height: 1; }
.ampol-ampoule__glass small { margin-top: .45rem; font-size: .55rem; font-weight: 950; letter-spacing: .3em; }
.ampol-ampoule__base { position: absolute; inset-inline: 1.6rem; bottom: 0; height: 1.5rem; border-radius: 999px; background: rgba(255,255,255,.24); filter: blur(.2px); }
.ampol-game-capsule { position: absolute; display: grid; grid-template-columns: 2.8rem 1fr; min-width: 9.5rem; align-items: center; gap: .55rem; border: 1px solid rgba(255,255,255,.15); border-radius: 1rem; padding: .55rem; color: var(--theme-on-dark); background: rgba(7,13,10,.58); box-shadow: 0 18px 48px rgba(0,0,0,.28); backdrop-filter: blur(14px); }
.ampol-game-capsule i { grid-row: 1 / 3; display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid color-mix(in srgb,var(--theme-accent) 40%,transparent); border-radius: .8rem; color: var(--theme-accent-3); background: var(--theme-accent-soft); font-size: .7rem; font-style: normal; font-weight: 1000; }
.ampol-game-capsule b { align-self: end; font-size: .66rem; font-weight: 950; }
.ampol-game-capsule small { align-self: start; color: var(--theme-on-dark-muted); font-size: .5rem; }
.ampol-game-capsule.is-one { inset-inline-start: 0; top: 15%; transform: rotate(-4deg); }
.ampol-game-capsule.is-two { inset-inline-end: 0; top: 38%; transform: rotate(4deg); }
.ampol-game-capsule.is-three { inset-inline-start: 1rem; bottom: 9%; transform: rotate(2deg); }
.ampol-home-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 46rem; margin-inline: auto; transform: translateY(-1.25rem); overflow: hidden; border: 1px solid var(--theme-line); border-radius: 1.25rem; background: var(--theme-panel); box-shadow: 0 18px 55px var(--theme-shadow); backdrop-filter: blur(18px); }
.ampol-home-stats span { padding: .85rem; text-align: center; }
.ampol-home-stats span + span { border-inline-start: 1px solid var(--theme-line); }
.ampol-home-stats b { display: block; color: var(--theme-accent-2); font-size: 1.15rem; font-weight: 1000; }
.ampol-home-stats small { display: block; margin-top: .22rem; color: var(--theme-muted); font-size: .55rem; font-weight: 850; }
.ampol-home-section { padding-block: 3.5rem; }
.ampol-home-section.is-soft { border-block: 1px solid var(--theme-line); background: color-mix(in srgb,var(--theme-panel-soft) 74%,transparent); }
.ampol-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.ampol-section-head h2 { margin-top: .6rem; font-size: clamp(1.45rem,3vw,2.45rem); font-weight: 1000; }
.ampol-section-head div > p:last-child { margin-top: .5rem; font-size: .72rem; line-height: 1.8; }
.ampol-section-head > a { flex: 0 0 auto; color: var(--theme-accent-2); font-size: .68rem; font-weight: 950; }
.ampol-home-services { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-top: 1.4rem; }
.ampol-home-service { position: relative; min-height: 10.5rem; overflow: hidden; border: 1px solid var(--theme-line); border-radius: 1.2rem; background: var(--theme-dark); box-shadow: 0 16px 42px var(--theme-shadow); transition: .25s ease; }
.ampol-home-service:hover { transform: translateY(-4px); border-color: var(--theme-line-strong); }
.ampol-home-service > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; transition: .5s ease; }
.ampol-home-service:hover > img { transform: scale(1.07); opacity: .57; }
.ampol-home-service > span { position: absolute; inset: 0; background: linear-gradient(to top,var(--theme-dark),transparent 75%); }
.ampol-home-service > div { position: absolute; z-index: 2; inset: auto .85rem .85rem; display: grid; grid-template-columns: 2.3rem 1fr; align-items: center; gap: .12rem .55rem; color: var(--theme-on-dark); }
.ampol-home-service i { grid-row: 1 / 3; display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: .75rem; color: var(--theme-accent-contrast); background: var(--theme-accent); font-size: .6rem; font-style: normal; font-weight: 1000; }
.ampol-home-service b { align-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; font-weight: 950; }
.ampol-home-service small { align-self: start; color: var(--theme-on-dark-muted); font-size: .5rem; }
.ampol-empty-block { grid-column: 1 / -1; border: 1px dashed var(--theme-line); border-radius: 1rem; padding: 2rem; color: var(--theme-muted); text-align: center; font-size: .75rem; }
.ampol-home-benefits { display: grid; gap: .75rem; }
.ampol-home-benefits article { display: flex; align-items: flex-start; gap: .8rem; border: 1px solid var(--theme-line); border-radius: 1.2rem; padding: 1.1rem; background: var(--theme-panel); box-shadow: 0 14px 36px var(--theme-shadow); }
.ampol-home-benefits article > span { display: grid; width: 2.45rem; height: 2.45rem; flex: 0 0 auto; place-items: center; border-radius: .8rem; color: var(--theme-accent-contrast); background: linear-gradient(145deg,var(--theme-accent),var(--theme-accent-2)); font-size: .62rem; font-weight: 1000; }
.ampol-home-benefits b { color: var(--theme-text); font-size: .85rem; font-weight: 950; }
.ampol-home-benefits p { margin-top: .35rem; color: var(--theme-muted); font-size: .64rem; line-height: 1.9; }

/* Product cards stay cinematic but use the selected accent. */
.store-product-card { border-color: color-mix(in srgb,var(--theme-accent) 22%,transparent) !important; background: linear-gradient(155deg,var(--theme-dark-2),var(--theme-dark)) !important; box-shadow: 0 18px 48px var(--theme-shadow) !important; }
.store-product-card :where(.text-white,.text-zinc-100,.text-zinc-200) { color: var(--theme-on-dark) !important; }
.store-product-card :where(.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-zinc-700) { color: var(--theme-on-dark-muted) !important; }
.store-product-card__category,
.store-product-card__commercial-badge,
.store-product-card__instant { border-color: color-mix(in srgb,var(--theme-accent) 28%,transparent) !important; color: var(--theme-on-dark) !important; background: color-mix(in srgb,var(--theme-dark) 82%,transparent) !important; }
.store-product-card__arrow { color: var(--theme-accent-3) !important; }
.store-filter-panel,
.store-search-results,
.store-empty-state,
.ampol-orders-table-wrap,
.ampol-orders-empty,
.ampol-mobile-order-card { color: var(--theme-text) !important; border-color: var(--theme-line) !important; background: var(--theme-panel) !important; box-shadow: 0 16px 44px var(--theme-shadow) !important; }
.ampol-mobile-order-card :where(b,strong) { color: var(--theme-text) !important; }
.ampol-mobile-order-card :where(small,span) { color: var(--theme-muted); }

/* Theme picker */
.ampol-theme-current { border: 1px solid var(--theme-line); border-radius: 999px; padding: .45rem .7rem; color: var(--theme-muted); background: var(--theme-panel-soft); font-size: .58rem; font-weight: 850; }
.ampol-theme-current b { color: var(--theme-accent-2); }
.ampol-theme-grid { display: grid; gap: .55rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
.ampol-theme-choice { position: relative; display: flex; min-height: 5.1rem; cursor: pointer; align-items: center; gap: .65rem; border: 1px solid var(--theme-line); border-radius: 1rem; padding: .7rem; background: var(--theme-panel-soft); transition: .2s ease; }
.ampol-theme-choice:hover { transform: translateY(-2px); border-color: var(--theme-line-strong); }
.ampol-theme-choice > input { position: absolute; opacity: 0; pointer-events: none; }
.ampol-theme-choice:has(input:checked) { border-color: var(--theme-accent); background: var(--theme-accent-soft); box-shadow: 0 0 0 3px var(--theme-accent-soft); }
.ampol-theme-choice__swatches { display: flex; width: 2.65rem; height: 2.65rem; flex: 0 0 auto; overflow: hidden; border: 2px solid var(--theme-panel-strong); border-radius: .8rem; box-shadow: 0 7px 18px var(--theme-shadow); }
.ampol-theme-choice__swatches i { flex: 1; background: var(--swatch); }
.ampol-theme-choice__copy { min-width: 0; flex: 1; }
.ampol-theme-choice__copy b { display: block; color: var(--theme-text); font-size: .7rem; font-weight: 950; }
.ampol-theme-choice__copy small { display: block; margin-top: .2rem; color: var(--theme-muted); font-size: .52rem; line-height: 1.65; }
.ampol-theme-choice__check { display: grid; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--theme-line); border-radius: 99px; color: transparent; font-size: .62rem; }
.ampol-theme-choice:has(input:checked) .ampol-theme-choice__check { color: var(--theme-accent-contrast); border-color: var(--theme-accent); background: var(--theme-accent); }

/* Checkbox system */
.ampol-check-option { color: var(--theme-text) !important; border-color: var(--theme-line) !important; background: var(--theme-panel-soft) !important; }
.ampol-check-option:hover { border-color: var(--theme-line-strong) !important; background: var(--theme-accent-soft) !important; }
.ampol-check-box { border-color: var(--theme-faint) !important; background: var(--theme-panel-strong) !important; }
.ampol-check-copy b { color: var(--theme-text) !important; }
.ampol-check-copy small { color: var(--theme-muted) !important; }
.ampol-check-input:checked ~ .ampol-check-box { color: var(--theme-accent-contrast) !important; border-color: var(--theme-accent) !important; background: linear-gradient(145deg,var(--theme-accent-2),var(--theme-accent)) !important; box-shadow: 0 0 0 4px var(--theme-accent-soft) !important; }
.ampol-check-input:checked ~ .ampol-check-state { color: var(--theme-accent-2) !important; background: var(--theme-accent-soft) !important; }
.ampol-check-option:has(.ampol-check-input:checked) { border-color: var(--theme-line-strong) !important; background: var(--theme-accent-soft) !important; }

/* Admin queue counters and quick view */
.ampol-admin-count { display: inline-flex; min-width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; border-radius: 999px; padding-inline: .35rem; color: var(--theme-accent-contrast); background: var(--theme-accent); box-shadow: 0 7px 20px color-mix(in srgb,var(--theme-accent) 28%,transparent); font-size: .56rem; font-weight: 1000; }
.ampol-eye-button { display: inline-flex; width: 2.45rem; height: 2.45rem; align-items: center; justify-content: center; border: 1px solid var(--theme-line-strong); border-radius: .8rem; color: var(--theme-accent-2); background: var(--theme-accent-soft); transition: .2s ease; }
.ampol-eye-button:hover { transform: translateY(-2px); color: var(--theme-accent-contrast); background: var(--theme-accent); }
.ampol-eye-button svg { width: 1.2rem; height: 1.2rem; }
.ampol-order-sidebar { color: var(--theme-text); border-color: var(--theme-line) !important; background: var(--theme-panel-strong) !important; box-shadow: 0 22px 70px var(--theme-shadow) !important; }
.ampol-order-sidebar :where(.text-white,.text-zinc-200) { color: var(--theme-text) !important; }
.ampol-order-sidebar :where(.text-zinc-500,.text-zinc-600,.text-zinc-700) { color: var(--theme-muted) !important; }
.ampol-order-sidebar [class*="bg-white"] { color: var(--theme-text); background: var(--theme-panel-soft) !important; }
.ampol-quick-order-drawer { color: var(--theme-text); border-inline-start: 1px solid var(--theme-line); background: var(--theme-panel-strong); box-shadow: -24px 0 90px rgba(0,0,0,.25); }
.ampol-quick-order-drawer__head,
.ampol-quick-order-drawer__foot { flex: 0 0 auto; border-color: var(--theme-line); background: var(--theme-panel-soft); }
.ampol-quick-order-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--theme-line); padding: 1rem 1.1rem; }
.ampol-quick-order-drawer__head p { color: var(--theme-accent-2); font-size: .55rem; font-weight: 1000; letter-spacing: .16em; }
.ampol-quick-order-drawer__head h2 { margin-top: .25rem; color: var(--theme-text); font-size: 1.25rem; font-weight: 1000; }
.ampol-quick-order-drawer__head button { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 1px solid var(--theme-line); border-radius: .75rem; color: var(--theme-text); background: var(--theme-panel-strong); font-size: 1.25rem; }
.ampol-quick-order-drawer__body { min-height: 0; flex: 1; overflow-y: auto; padding: 1rem; }
.ampol-quick-order-drawer__foot { border-top: 1px solid var(--theme-line); padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); }
.ampol-quick-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; border: 1px solid var(--theme-line); border-radius: 1rem; padding: .75rem; background: var(--theme-panel-soft); }
.ampol-quick-summary > div { min-width: 0; }
.ampol-quick-summary small { display: block; color: var(--theme-muted); font-size: .55rem; }
.ampol-quick-summary b { display: block; margin-top: .25rem; overflow: hidden; color: var(--theme-text); text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; font-weight: 950; }
.ampol-quick-summary span:not(.status-pill) { display: block; margin-top: .15rem; overflow: hidden; color: var(--theme-muted); text-overflow: ellipsis; white-space: nowrap; font-size: .54rem; }
.ampol-quick-item { border: 1px solid var(--theme-line); border-radius: 1.1rem; padding: .85rem; background: var(--theme-panel); box-shadow: 0 12px 30px var(--theme-shadow); }
.ampol-quick-item__title { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.ampol-quick-item__title small { color: var(--theme-accent-2); font-size: .52rem; font-weight: 950; }
.ampol-quick-item__title h3 { margin-top: .2rem; color: var(--theme-text); font-size: .78rem; font-weight: 950; }
.ampol-quick-data { display: grid; gap: .4rem; margin-top: .75rem; }
.ampol-quick-data > div { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1fr) auto; align-items: center; gap: .45rem; border: 1px solid var(--theme-line); border-radius: .75rem; padding: .55rem .6rem; background: var(--theme-panel-soft); }
.ampol-quick-data small { color: var(--theme-muted); font-size: .52rem; font-weight: 800; }
.ampol-quick-data span { overflow: hidden; color: var(--theme-text); text-overflow: ellipsis; white-space: nowrap; font-size: .61rem; font-weight: 850; }
.ampol-quick-data button { border-radius: .55rem; padding: .32rem .48rem; color: var(--theme-accent-2); background: var(--theme-accent-soft); font-size: .5rem; font-weight: 950; }
.ampol-quick-denied { margin-top: .7rem; border: 1px solid rgba(217,119,6,.2); border-radius: .75rem; padding: .65rem; color: #8a5204; background: #fff4d7; font-size: .56rem; font-weight: 850; }
.ampol-copy-toast { position: fixed; z-index: 200; inset-inline-start: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); transform: translate(-50%,1rem); pointer-events: none; border: 1px solid color-mix(in srgb,var(--theme-accent) 38%,transparent); border-radius: 999px; padding: .6rem .9rem; color: var(--theme-accent-contrast); background: var(--theme-accent-2); box-shadow: 0 14px 40px rgba(0,0,0,.25); opacity: 0; font-size: .66rem; font-weight: 950; transition: .2s ease; }
.ampol-copy-toast.is-visible { transform: translate(-50%,0); opacity: 1; }

/* Checkout: all payment choices share one contrast-safe component. */
.is-checkout-route .ampol-checkout-page section,
.is-checkout-route .ampol-checkout-page aside { color: var(--theme-text) !important; border-color: var(--theme-line) !important; background: linear-gradient(150deg,var(--theme-panel),var(--theme-panel-soft)) !important; box-shadow: 0 20px 58px var(--theme-shadow) !important; }
.is-checkout-route .ampol-checkout-page section :where(h1,h2,h3,b,strong,.text-white),
.is-checkout-route .ampol-checkout-page aside :where(h1,h2,h3,b,strong,.text-white) { color: var(--theme-text) !important; }
.is-checkout-route .ampol-checkout-page section :where(p,small,.text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600),
.is-checkout-route .ampol-checkout-page aside :where(p,small,.text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600) { color: var(--theme-muted) !important; }
.ampol-payment-option { position: relative; color: var(--theme-text) !important; border-color: var(--theme-line) !important; background: var(--theme-panel-strong) !important; box-shadow: 0 9px 24px var(--theme-shadow); }
.ampol-payment-option:hover,
.ampol-payment-option:has(input:checked) { border-color: var(--theme-accent) !important; background: var(--theme-accent-soft) !important; box-shadow: 0 0 0 3px var(--theme-accent-soft); }
.ampol-payment-option :where(b,strong,span,small,p) { color: var(--theme-text) !important; }
.ampol-payment-option small,
.ampol-payment-option span[class*="text-"] { color: var(--theme-muted) !important; }
.ampol-payment-option input[type="radio"] { accent-color: var(--theme-accent); }

/* Success, action dialog and dashboard readability. */
.purchase-success-card { color: var(--theme-text) !important; border-color: var(--theme-line-strong) !important; background: var(--theme-panel-strong) !important; box-shadow: 0 26px 75px var(--theme-shadow) !important; }
.purchase-success-card :where(h1,h2,h3,b,strong) { color: var(--theme-text) !important; }
.purchase-success-card :where(p,small,span) { color: var(--theme-muted); }
.success-orbit { color: var(--theme-accent-contrast) !important; background: linear-gradient(145deg,var(--theme-accent),var(--theme-accent-2)) !important; box-shadow: 0 0 0 10px var(--theme-accent-soft),0 18px 44px var(--theme-shadow) !important; }
.ampol-success-metric { color: var(--theme-text) !important; border: 1px solid var(--theme-line); background: var(--theme-panel-soft) !important; }
.ampol-success-page > .page-shell > section + section h2 { color: var(--theme-text) !important; }
.ampol-success-page > .page-shell > section + section > div > a { color: var(--theme-accent-2) !important; }
.ampol-action-dialog__panel { color: var(--theme-text) !important; border-color: var(--theme-line-strong) !important; background: var(--theme-panel-strong) !important; }
.ampol-action-dialog__header,
.ampol-action-dialog__footer { border-color: var(--theme-line) !important; background: var(--theme-panel-soft) !important; }
.ampol-action-dialog :where(b,p,span,label,legend) { color: var(--theme-text) !important; }
.ampol-action-dialog__body { overscroll-behavior: contain; }
.ampol-check-row { color: var(--theme-text) !important; border-color: var(--theme-line) !important; background: var(--theme-panel-soft) !important; }
.ampol-check-row:has(input:checked) { border-color: var(--theme-accent) !important; background: var(--theme-accent-soft) !important; }
.ampol-order-workspace article > .mt-6.grid > div { color: var(--theme-text) !important; border-color: var(--theme-line) !important; background: var(--theme-panel-soft) !important; }
.ampol-order-workspace article > .mt-6.grid > div :where(small,b,span) { color: var(--theme-text) !important; }
.ampol-order-workspace article > .mt-6.grid > div small { color: var(--theme-muted) !important; }
.ampol-correction-required-card,
.ampol-kyc-required-card { border-color: rgba(217,119,6,.30) !important; background: linear-gradient(145deg,#422d0e,#211a0e) !important; }
.ampol-correction-required-card :where(h1,h2,h3,b,strong),
.ampol-kyc-required-card :where(h1,h2,h3,b,strong) { color: #fff9e8 !important; }

@media (min-width: 640px) {
    .ampol-account-button,
    .ampol-login-button { display: inline-flex; }
    .ampol-theme-shortcut { display: inline-flex; }
    .ampol-header-search span { display: inline; }
    .ampol-theme-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .ampol-home-services { grid-template-columns: repeat(4,minmax(0,1fr)); gap: .85rem; }
    .ampol-home-benefits { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 800px) {
    .ampol-header-alert { display: inline-flex; }
}

@media (min-width: 1024px) {
    .ampol-desktop-nav { display: flex; }
    .ampol-menu-button { display: none; }
    .ampol-home-hero__layout { grid-template-columns: minmax(0,1fr) 31rem; min-height: 39rem; }
    .ampol-home-hero__visual { position: relative; inset: auto; top: auto; width: 31rem; height: 31rem; transform: none; }
    .ampol-theme-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

@media (max-width: 1023px) {
    .ampol-home-hero__visual { inset-inline-end: -8rem; opacity: .44; }
}

@media (max-width: 640px) {
    .ampol-site-header__bar { height: 4.1rem; }
    .ampol-header-spacer { height: 4.1rem; }
    .ampol-brand__mark { width: 2.35rem; height: 2.35rem; flex-basis: 2.35rem; border-radius: .78rem; }
    .ampol-brand__copy > b { font-size: .86rem; }
    .ampol-brand__copy small { display: none; }
    .ampol-header-search { display: none; }
    .ampol-header-icon,
    .ampol-menu-button { width: 2.35rem; height: 2.35rem; }
    .ampol-home-hero { min-height: 37rem; }
    .ampol-home-hero__layout { min-height: 33rem; padding-block: 2.8rem 1.4rem; }
    .ampol-home-hero__copy { text-align: center; }
    .ampol-live-chip { margin-inline: auto; }
    .ampol-home-hero h1 { margin-inline: auto; margin-top: 1rem; font-size: clamp(2rem,11vw,3rem); }
    .ampol-home-hero__copy > p { margin-inline: auto; font-size: .76rem; line-height: 1.9; }
    .ampol-home-search { margin-top: 1.25rem; border-radius: 1rem; }
    .ampol-home-search svg { display: none; }
    .ampol-home-search input { font-size: .66rem; }
    .ampol-home-search button { min-height: 2.55rem; padding-inline: .8rem; font-size: .6rem; }
    .ampol-home-actions,
    .ampol-home-trust { justify-content: center; }
    .ampol-home-hero__visual { inset-inline-end: -9rem; top: 45%; transform: translateY(-50%) scale(.83); opacity: .25; }
    .ampol-home-stats { width: calc(100% - 1.5rem); border-radius: 1rem; }
    .ampol-home-stats b { font-size: .92rem; }
    .ampol-home-stats small { font-size: .48rem; }
    .ampol-home-section { padding-block: 2.4rem; }
    .ampol-section-head { align-items: flex-start; }
    .ampol-section-head h2 { font-size: 1.25rem; }
    .ampol-section-head div > p:last-child { font-size: .62rem; }
    .ampol-section-head > a { display: none; }
    .ampol-home-service { min-height: 8.7rem; border-radius: 1rem; }
    .ampol-home-service > div { inset: auto .65rem .65rem; }

    .store-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: .55rem !important; }
    .store-product-card { border-radius: 1rem !important; }
    .store-product-card__visual { aspect-ratio: 1 / 1 !important; }
    .store-product-card > div { padding: .68rem !important; }
    .store-product-card > div > div:first-child { font-size: .46rem !important; }
    .store-product-card > div > a { min-height: 2.45rem !important; margin-top: .45rem !important; font-size: .66rem !important; line-height: 1.25rem !important; }
    .store-product-card > div > div:last-child { margin-top: .45rem !important; padding-top: .55rem !important; }
    .store-product-card__category,
    .store-product-card__discount,
    .store-product-card__commercial-badge,
    .store-product-card__instant { padding: .25rem .4rem !important; font-size: .45rem !important; }
    .store-product-card__arrow { width: 1.85rem !important; height: 1.85rem !important; }

    .dashboard-grid,
    .dashboard-grid > section { gap: .65rem !important; }
    .account-hero { border-radius: 1.2rem !important; padding: .9rem !important; }
    .account-hero h1 { font-size: 1.35rem !important; line-height: 1.5 !important; }
    .account-hero p { font-size: .64rem !important; line-height: 1.7 !important; }
    .account-metrics { gap: .45rem !important; }
    .account-metrics .metric-card { min-height: 5.2rem !important; border-radius: .9rem !important; padding: .65rem !important; }
    .ampol-theme-panel { border-radius: 1.1rem !important; padding: .85rem !important; }
    .ampol-theme-grid { gap: .42rem; }
    .ampol-theme-choice { min-height: 4.35rem; gap: .45rem; border-radius: .8rem; padding: .5rem; }
    .ampol-theme-choice__swatches { width: 2.1rem; height: 2.1rem; border-radius: .6rem; }
    .ampol-theme-choice__copy b { font-size: .6rem; }
    .ampol-theme-choice__copy small { display: none; }

    .ampol-mobile-order-card { border-radius: 1rem !important; padding: .75rem !important; }
    .ampol-mobile-order-card__main { margin-block: .45rem !important; padding-block: .45rem !important; }
    .ampol-order-metrics { gap: .45rem !important; }
    .ampol-order-metrics article { min-height: 4.2rem !important; border-radius: .85rem !important; padding: .55rem !important; }

    .ampol-action-dialog__panel { width: calc(100vw - .75rem) !important; max-height: calc(100dvh - .75rem) !important; border-radius: 1rem !important; }
    .ampol-action-dialog__header,
    .ampol-action-dialog__footer { position: relative; z-index: 2; padding: .75rem !important; }
    .ampol-action-dialog__body { padding: .75rem !important; }
    .ampol-quick-order-drawer__body { padding: .75rem; }
    .ampol-quick-data > div { grid-template-columns: minmax(0,.7fr) minmax(0,1fr) auto; }
    .ampol-copy-toast { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 370px) {
    .store-product-grid { grid-template-columns: minmax(0,1fr) !important; }
    .store-product-card__visual { aspect-ratio: 1.5 / 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ampol-ampoule { animation: none; }
}

@keyframes ampolV9Float {
    0%,100% { transform: translate(-50%,-50%) rotate(8deg); }
    50% { transform: translate(-50%,calc(-50% - 14px)) rotate(5deg); }
}

/* ======================================================================
   AMPOLSHOP V9.1 — global contrast contract
   The older V7/V8 compatibility layers are still loaded for component
   geometry. These selectors deliberately carry enough specificity to make
   the selected theme authoritative on every route.
   ====================================================================== */

html[data-theme] body.ampol-app {
    --ui-text-primary: var(--theme-text);
    --ui-text-secondary: var(--theme-muted);
    --ui-text-muted: var(--theme-faint);
    --ui-border: var(--theme-line);
    --ui-field-bg: var(--theme-panel-strong);
    --ui-field-border: var(--theme-line);
    --ui-soft-bg: var(--theme-panel-soft);
    --ui-soft-hover: var(--theme-accent-soft);
    color: var(--theme-text) !important;
}

/* Every standard application surface follows one foreground/background pair. */
html[data-theme] body.ampol-app :is(
    .premium-panel,
    .glass-panel,
    .glass-panel-hover,
    .metric-card,
    .admin-surface,
    .admin-order-row,
    .ticket-row,
    .account-recent,
    .account-support,
    .account-activity,
    .ampol-product-permission-card,
    .ampol-orders-table-wrap,
    .ampol-orders-empty,
    .ampol-mobile-order-card,
    .store-filter-panel,
    .store-empty-state,
    .product-order-card,
    .product-info-panel,
    .product-support-panel,
    .purchase-success-card,
    .ampol-action-dialog__panel,
    .ampol-order-sidebar,
    .ampol-quick-order-drawer
) {
    --ui-text-primary: var(--theme-text);
    --ui-text-secondary: var(--theme-muted);
    --ui-text-muted: var(--theme-faint);
    --ui-border: var(--theme-line);
    --ui-field-bg: var(--theme-panel-strong);
    --ui-field-border: var(--theme-line);
    --ui-soft-bg: var(--theme-panel-soft);
    --ui-soft-hover: var(--theme-accent-soft);
    color: var(--theme-text) !important;
    border-color: var(--theme-line) !important;
    background: linear-gradient(150deg,var(--theme-panel),var(--theme-panel-soft)) !important;
    color-scheme: normal;
}

/* Admin pages must not be forced back to the old Obsidian palette. */
html[data-theme] body.ampol-app .ampol-admin-ui {
    --ui-text-primary: var(--theme-text);
    --ui-text-secondary: var(--theme-muted);
    --ui-text-muted: var(--theme-faint);
    color: var(--theme-text) !important;
    background:
        radial-gradient(circle at 11% 8%,var(--theme-accent-soft),transparent 28rem),
        radial-gradient(circle at 90% 75%,color-mix(in srgb,var(--theme-accent-2) 10%,transparent),transparent 34rem),
        linear-gradient(150deg,var(--theme-page),var(--theme-page-alt)) !important;
}
html[data-theme] body.ampol-app .ampol-admin-ui :is(.premium-panel,.glass-panel,.admin-surface,.metric-card) {
    color: var(--theme-text) !important;
    border-color: var(--theme-line) !important;
    background: linear-gradient(150deg,var(--theme-panel),var(--theme-panel-soft)) !important;
    box-shadow: 0 20px 58px var(--theme-shadow) !important;
}

/* Legacy text utilities become semantic instead of literal colours. */
html[data-theme] body.ampol-app :is(
    .text-white,
    .text-slate-900,.text-slate-800,.text-slate-700,
    .text-gray-900,.text-gray-800,.text-gray-700,
    .text-zinc-900,.text-zinc-800,.text-zinc-700,
    .text-zinc-100,.text-zinc-200
) { color: var(--theme-text) !important; text-shadow: none; }

html[data-theme] body.ampol-app :is(
    .text-slate-600,.text-slate-500,.text-slate-400,
    .text-gray-600,.text-gray-500,.text-gray-400,
    .text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600
) { color: var(--theme-muted) !important; text-shadow: none; }

html[data-theme] body.ampol-app :is(.text-emerald-300,.text-emerald-400,.text-emerald-500,.text-emerald-600,.text-emerald-700,.text-emerald-800) {
    color: var(--theme-accent-text) !important;
}

html[data-theme] body.ampol-app :is(
    .premium-panel,.glass-panel,.glass-panel-hover,.metric-card,.admin-surface,
    .admin-order-row,.ticket-row,.account-recent,.account-support,.account-activity,
    .ampol-product-permission-card,.ampol-orders-table-wrap,.ampol-mobile-order-card,
    .product-order-card,.product-info-panel,.product-support-panel,.purchase-success-card,
    .ampol-action-dialog__panel,.ampol-order-sidebar,.ampol-quick-order-drawer
) :is(
    h1,h2,h3,h4,h5,h6,b,strong,
    .text-white,.text-slate-900,.text-slate-800,.text-slate-700,
    .text-gray-900,.text-gray-800,.text-gray-700,
    .text-zinc-900,.text-zinc-800,.text-zinc-700,.text-zinc-100,.text-zinc-200
) { color: var(--theme-text) !important; text-shadow: none !important; }

html[data-theme] body.ampol-app :is(
    .premium-panel,.glass-panel,.glass-panel-hover,.metric-card,.admin-surface,
    .admin-order-row,.ticket-row,.account-recent,.account-support,.account-activity,
    .ampol-product-permission-card,.ampol-orders-table-wrap,.ampol-mobile-order-card,
    .product-order-card,.product-info-panel,.product-support-panel,.purchase-success-card,
    .ampol-action-dialog__panel,.ampol-order-sidebar,.ampol-quick-order-drawer
) :is(
    p,small,
    .text-slate-600,.text-slate-500,.text-slate-400,
    .text-gray-600,.text-gray-500,.text-gray-400,
    .text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600
) { color: var(--theme-muted) !important; text-shadow: none !important; }

/* Pale utility cards stay theme-aware, including in Graphite. */
html[data-theme] body.ampol-app :is(
    [class~="bg-white"],[class~="bg-white/5"],[class~="bg-white/10"],[class~="bg-white/15"],[class~="bg-white/25"],
    [class~="bg-white/70"],[class~="bg-white/75"],[class~="bg-white/85"],[class~="bg-white/90"],[class~="bg-white/92"],[class~="bg-white/95"],
    [class~="bg-white/[.02]"],[class~="bg-white/[.025]"],[class~="bg-white/[.03]"],[class~="bg-white/[.035]"],
    [class~="bg-white/[.04]"],[class~="bg-white/[.05]"],[class~="bg-white/[.06]"],[class~="bg-white/[.07]"],[class~="bg-white/[.10]"],
    [class~="bg-white/[0.03]"],[class~="bg-white/[0.035]"],
    [class~="bg-slate-50"],[class~="bg-emerald-50"],[class~="bg-emerald-50/40"],
    [class~="bg-emerald-50/50"],[class~="bg-emerald-50/55"],[class~="bg-emerald-50/60"],[class~="bg-emerald-50/70"],
    [class~="bg-emerald-50/90"],[class~="bg-[#eef8f3]"],[class~="bg-[#edf7f2]"],
    [class~="bg-[#e9f5ef]"],[class~="bg-[#effaf4]"],[class~="bg-[#f2faf6]"],
    [class~="bg-[#f2faf5]"],[class~="bg-[#f4faf7]"],[class~="bg-[#f0f7f4]"]
) {
    --ui-text-primary: var(--theme-text);
    --ui-text-secondary: var(--theme-muted);
    --ui-text-muted: var(--theme-faint);
    color: var(--theme-text) !important;
    border-color: var(--theme-line) !important;
    background: var(--theme-panel-soft) !important;
    color-scheme: normal;
}
html[data-theme] body.ampol-app :is(
    [class~="bg-white"],[class~="bg-white/5"],[class~="bg-white/10"],[class~="bg-white/15"],[class~="bg-white/25"],
    [class~="bg-white/70"],[class~="bg-white/75"],[class~="bg-white/85"],[class~="bg-white/90"],[class~="bg-white/92"],[class~="bg-white/95"],
    [class~="bg-white/[.02]"],[class~="bg-white/[.025]"],[class~="bg-white/[.03]"],[class~="bg-white/[.035]"],
    [class~="bg-white/[.04]"],[class~="bg-white/[.05]"],[class~="bg-white/[.06]"],[class~="bg-white/[.07]"],[class~="bg-white/[.10]"],
    [class~="bg-white/[0.03]"],[class~="bg-white/[0.035]"],[class~="bg-slate-50"],
    [class~="bg-emerald-50"],[class~="bg-emerald-50/40"],[class~="bg-emerald-50/50"],
    [class~="bg-emerald-50/55"],[class~="bg-emerald-50/60"],[class~="bg-emerald-50/70"],[class~="bg-emerald-50/90"],
    [class~="bg-[#eef8f3]"],[class~="bg-[#edf7f2]"],[class~="bg-[#e9f5ef]"],
    [class~="bg-[#effaf4]"],[class~="bg-[#f2faf6]"],[class~="bg-[#f2faf5]"],
    [class~="bg-[#f4faf7]"],[class~="bg-[#f0f7f4]"]
) :is(h1,h2,h3,h4,h5,h6,p,span,b,strong,small,label,legend,th,td,a):not(.btn-primary):not(.btn-danger):not(.status-pill) {
    color: var(--theme-text) !important;
    text-shadow: none !important;
}
html[data-theme] body.ampol-app :is(
    [class~="bg-white"],[class~="bg-white/5"],[class~="bg-white/10"],[class~="bg-white/15"],[class~="bg-white/25"],
    [class~="bg-white/70"],[class~="bg-white/75"],[class~="bg-white/85"],[class~="bg-white/90"],[class~="bg-white/92"],[class~="bg-white/95"],
    [class~="bg-white/[.02]"],[class~="bg-white/[.025]"],[class~="bg-white/[.03]"],[class~="bg-white/[.035]"],
    [class~="bg-white/[.04]"],[class~="bg-white/[.05]"],[class~="bg-white/[.06]"],[class~="bg-white/[.07]"],[class~="bg-white/[.10]"],
    [class~="bg-white/[0.03]"],[class~="bg-white/[0.035]"],[class~="bg-slate-50"],
    [class~="bg-emerald-50"],[class~="bg-emerald-50/40"],[class~="bg-emerald-50/50"],
    [class~="bg-emerald-50/55"],[class~="bg-emerald-50/60"],[class~="bg-emerald-50/70"],[class~="bg-emerald-50/90"]
) :is(.text-slate-600,.text-slate-500,.text-slate-400,.text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600,small) {
    color: var(--theme-muted) !important;
}

/* Inputs, selects and textareas always match the containing theme surface. */
html[data-theme] body.ampol-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea,.field,.select-field,.textarea-field,.product-order-field) {
    color: var(--theme-text) !important;
    border-color: var(--theme-line) !important;
    background: var(--theme-panel-strong) !important;
    caret-color: var(--theme-accent);
    color-scheme: normal;
}
html[data-theme] body.ampol-app :is(input,textarea)::placeholder { color: var(--theme-faint) !important; opacity: 1 !important; }
html[data-theme] body.ampol-app option { color: var(--theme-text) !important; background: var(--theme-panel-strong) !important; }
html[data-theme] body.ampol-app :is(.field-label,.form-label) { color: var(--theme-text) !important; }
html[data-theme] body.ampol-app .field-help { color: var(--theme-muted) !important; }

/* Primary/accent controls use a separately audited foreground pair. */
html[data-theme] body.ampol-app :is(
    .btn-primary,.ampol-login-button,.product-order-submit,.free-fire-verify-button,
    .ampol-admin-count,.ampol-eye-button:hover,.success-orbit,
    .ampol-brand__mark,.ampol-header-count,.ampol-account-button > span,
    .mobile-app-nav__search > span,.ampol-home-search button,
    .ampol-home-service i,.ampol-home-benefits article > span
),
html[data-theme] body.ampol-app .ampol-theme-choice:has(input:checked) .ampol-theme-choice__check {
    color: var(--theme-action-text) !important;
    border-color: transparent !important;
    background: linear-gradient(120deg,var(--theme-action-from),var(--theme-action-to)) !important;
}
html[data-theme] body.ampol-app :is(
    .btn-primary,.ampol-login-button,.product-order-submit,.free-fire-verify-button,
    .ampol-admin-count,.ampol-eye-button:hover,.success-orbit,
    .ampol-brand__mark,.ampol-header-count,.ampol-account-button > span,
    .mobile-app-nav__search > span,.ampol-home-search button,
    .ampol-home-service i,.ampol-home-benefits article > span
) * {
    color: var(--theme-action-text) !important;
}
html[data-theme] body.ampol-app :is(a,button,span,div,section)[class*="text-white"][class*="from-emerald-"]:not(.ampol-payment-option) {
    --tw-gradient-from: var(--theme-action-from) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: var(--theme-action-to) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--theme-action-from),var(--theme-action-to) !important;
    color: var(--theme-action-text) !important;
}
html[data-theme] body.ampol-app :is(a,button,span,div,section)[class*="text-white"][class*="from-emerald-"]:not(.ampol-payment-option) :is(span,b,strong,small,svg) {
    color: var(--theme-action-text) !important;
}
html[data-theme] body.ampol-app :is(.bg-emerald-500,.bg-emerald-600,.bg-emerald-700,.bg-emerald-800) {
    color: var(--theme-action-text) !important;
    background: var(--theme-action-from) !important;
}

/* Deliberately dark/cinematic regions use the inverse foreground tokens. */
html[data-theme] body.ampol-app :is(
    .ampol-dark-surface,.store-product-card,.product-service-artwork,
    .ampol-home-hero,.ampol-home-service,.ampol-home-search,.ampol-game-capsule,
    .ampol-correction-required-card,.ampol-kyc-required-card
) {
    --ui-text-primary: var(--theme-on-dark);
    --ui-text-secondary: var(--theme-on-dark-muted);
    --ui-text-muted: var(--theme-on-dark-muted);
    color: var(--theme-on-dark) !important;
    color-scheme: dark;
}
html[data-theme] body.ampol-app :is(
    .ampol-dark-surface,.store-product-card,.product-service-artwork,
    .ampol-home-hero,.ampol-home-service,.ampol-home-search,.ampol-game-capsule,
    .ampol-correction-required-card,.ampol-kyc-required-card
) :is(h1,h2,h3,h4,b,strong,.text-white,.text-zinc-100,.text-zinc-200,.text-slate-900,.text-slate-800) {
    color: var(--theme-on-dark) !important;
}
html[data-theme] body.ampol-app :is(
    .ampol-dark-surface,.store-product-card,.product-service-artwork,
    .ampol-home-hero,.ampol-home-service,.ampol-home-search,.ampol-game-capsule,
    .ampol-correction-required-card,.ampol-kyc-required-card
) :is(p,small,.text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-slate-500,.text-slate-400) {
    color: var(--theme-on-dark-muted) !important;
}
html[data-theme] body.ampol-app :is(
    .ampol-dark-surface,.store-product-card,.product-service-artwork,
    .ampol-home-hero,.ampol-home-service,.ampol-home-search,.ampol-game-capsule,
    .ampol-correction-required-card,.ampol-kyc-required-card
) :is(
    [class~="bg-white/5"],[class~="bg-white/10"],[class~="bg-white/15"],[class~="bg-white/25"],
    [class~="bg-white/[.02]"],[class~="bg-white/[.025]"],[class~="bg-white/[.03]"],[class~="bg-white/[.035]"],
    [class~="bg-white/[.04]"],[class~="bg-white/[.05]"],[class~="bg-white/[.06]"],[class~="bg-white/[.07]"],[class~="bg-white/[.10]"]
) {
    color: var(--theme-on-dark) !important;
    border-color: rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.07) !important;
}
html[data-theme] body.ampol-app :is(
    .ampol-dark-surface,.store-product-card,.product-service-artwork,
    .ampol-home-hero,.ampol-home-service,.ampol-home-search,.ampol-game-capsule,
    .ampol-correction-required-card,.ampol-kyc-required-card
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea) {
    color: var(--theme-on-dark) !important;
    border-color: rgba(255,255,255,.16) !important;
    background: rgba(0,0,0,.34) !important;
    color-scheme: dark;
}
html[data-theme] body.ampol-app .ampol-home-search input { background: transparent !important; }

/* Tables and rows no longer mix a pale cell with a pale foreground. */
html[data-theme] body.ampol-app .admin-table { color: var(--theme-text) !important; }
html[data-theme] body.ampol-app .admin-table th {
    color: var(--theme-muted) !important;
    border-color: var(--theme-line) !important;
    background: var(--theme-panel-soft) !important;
}
html[data-theme] body.ampol-app .admin-table td {
    color: var(--theme-text) !important;
    border-color: var(--theme-line) !important;
    background: transparent !important;
}
html[data-theme] body.ampol-app .admin-table td :is(b,strong,.text-white,.text-slate-900,.text-zinc-100,.text-zinc-200) { color: var(--theme-text) !important; }
html[data-theme] body.ampol-app .admin-table td :is(small,.text-slate-500,.text-slate-400,.text-zinc-400,.text-zinc-500,.text-zinc-600) { color: var(--theme-muted) !important; }
html[data-theme] body.ampol-app .admin-table tbody tr:nth-child(odd) { background: color-mix(in srgb,var(--theme-panel-soft) 64%,transparent) !important; }
html[data-theme] body.ampol-app .admin-table tbody tr:hover { background: var(--theme-accent-soft) !important; }

/* Dashboard, checkout and admin route-specific rules outrank V8.2. */
html[data-theme] body.ampol-app.is-dashboard-route :is(.account-recent,.account-support,.account-activity) { color: var(--theme-text) !important; }
html[data-theme] body.ampol-app.is-dashboard-route .account-recent table :is(td,th) { color: var(--theme-text) !important; }
html[data-theme] body.ampol-app.is-dashboard-route .account-activity :is(p,b,strong,span):not(.status-pill) { color: var(--theme-text) !important; }
html[data-theme] body.ampol-app.is-dashboard-route .account-activity :is(small,.text-zinc-500,.text-zinc-600) { color: var(--theme-muted) !important; }

html[data-theme] body.ampol-app.is-checkout-route .ampol-checkout-page {
    color: var(--theme-text) !important;
    background: linear-gradient(150deg,var(--theme-page),var(--theme-page-alt)) !important;
}
html[data-theme] body.ampol-app.is-checkout-route .ampol-checkout-page form > div > :is(section,aside),
html[data-theme] body.ampol-app.is-checkout-route .ampol-checkout-page section,
html[data-theme] body.ampol-app.is-checkout-route .ampol-checkout-page aside {
    --ui-text-primary: var(--theme-text);
    --ui-text-secondary: var(--theme-muted);
    --ui-text-muted: var(--theme-faint);
    color: var(--theme-text) !important;
    border-color: var(--theme-line) !important;
    background: linear-gradient(150deg,var(--theme-panel),var(--theme-panel-soft)) !important;
}
html[data-theme] body.ampol-app.is-checkout-route .ampol-payment-option {
    color: var(--theme-text) !important;
    border-color: var(--theme-line) !important;
    background: var(--theme-panel-strong) !important;
}
html[data-theme] body.ampol-app.is-checkout-route .ampol-payment-option :is(b,strong,h1,h2,h3,.text-white,.text-slate-900) { color: var(--theme-text) !important; }
html[data-theme] body.ampol-app.is-checkout-route .ampol-payment-option :is(p,small,.text-slate-500,.text-zinc-400,.text-zinc-500) { color: var(--theme-muted) !important; }

html[data-theme] body.ampol-app.is-admin-route .ampol-admin-ui :is(h1,h2,h3,h4) { color: var(--theme-text) !important; }
html[data-theme] body.ampol-app.is-admin-route .ampol-admin-ui nav a { color: var(--theme-muted) !important; }
html[data-theme] body.ampol-app.is-admin-route .ampol-admin-ui nav a:hover,
html[data-theme] body.ampol-app.is-admin-route .ampol-admin-ui nav a[class*="text-emerald"] { color: var(--theme-accent-text) !important; }

/* Semantic statuses retain meaning on both light and dark themes. */
html[data-theme] body.ampol-app .status-green { color: #047857 !important; border-color: rgba(5,150,105,.30) !important; background: rgba(16,185,129,.14) !important; }
html[data-theme] body.ampol-app .status-yellow { color: #92400e !important; border-color: rgba(217,119,6,.30) !important; background: rgba(245,158,11,.15) !important; }
html[data-theme] body.ampol-app .status-red { color: #be123c !important; border-color: rgba(225,29,72,.28) !important; background: rgba(244,63,94,.13) !important; }
html[data-theme] body.ampol-app .status-blue { color: #0369a1 !important; border-color: rgba(2,132,199,.28) !important; background: rgba(14,165,233,.13) !important; }
html[data-theme] body.ampol-app .status-purple { color: #7e22ce !important; border-color: rgba(147,51,234,.28) !important; background: rgba(168,85,247,.13) !important; }
html[data-theme] body.ampol-app .status-zinc { color: var(--theme-muted) !important; border-color: var(--theme-line) !important; background: var(--theme-panel-soft) !important; }
:root[data-theme="graphite"] body.ampol-app .status-green { color: #9be4be !important; }
:root[data-theme="graphite"] body.ampol-app .status-yellow { color: #fcd66d !important; }
:root[data-theme="graphite"] body.ampol-app .status-red { color: #fda4af !important; }
:root[data-theme="graphite"] body.ampol-app .status-blue { color: #8ed8ff !important; }
:root[data-theme="graphite"] body.ampol-app .status-purple { color: #d8b4fe !important; }

/* Browser autofill must not reintroduce light text on a light field. */
html[data-theme] body.ampol-app input:-webkit-autofill,
html[data-theme] body.ampol-app textarea:-webkit-autofill,
html[data-theme] body.ampol-app select:-webkit-autofill {
    -webkit-text-fill-color: var(--theme-text) !important;
    box-shadow: 0 0 0 1000px var(--theme-panel-strong) inset !important;
}

/* ======================================================================
   AMPOLSHOP V9.2 — centered operation dialogs, Graphite repair and
   scroll-performance guard. This is the final compatibility layer.
   ====================================================================== */

/* Physical centering is intentional: logical inset-start shifts RTL dialogs. */
html[data-theme] body.ampol-app .ampol-action-dialog__panel {
    inset-inline: auto !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: min(calc(100vw - 2rem), 640px) !important;
    max-height: min(calc(100dvh - 2rem), 780px) !important;
    transform: translate(-50%, -50%) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
}
html[data-theme] body.ampol-app .ampol-action-dialog__backdrop {
    inset: 0 !important;
    background: rgba(3, 8, 6, .78) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html[data-theme] body.ampol-app .ampol-action-dialog__body {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
html[data-theme] body.ampol-app .ampol-action-dialog__header,
html[data-theme] body.ampol-app .ampol-action-dialog__footer {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
}

/* Quick order is a centered modal on both RTL and LTR layouts. */
html[data-theme] body.ampol-app .ampol-quick-order-overlay { isolation: isolate; }
html[data-theme] body.ampol-app .ampol-quick-order-backdrop {
    background: rgba(3, 8, 6, .78) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html[data-theme] body.ampol-app .ampol-quick-order-modal {
    --ui-text-primary: var(--theme-text);
    --ui-text-secondary: var(--theme-muted);
    --ui-text-muted: var(--theme-faint);
    max-height: min(calc(100dvh - 2rem), 820px);
    color: var(--theme-text) !important;
    border: 1px solid var(--theme-line-strong) !important;
    border-radius: 1.5rem;
    background: var(--theme-panel-strong) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .36) !important;
    color-scheme: normal;
}
html[data-theme] body.ampol-app .ampol-quick-order-modal :is(h1,h2,h3,b,strong,.text-white,.text-zinc-100,.text-zinc-200) {
    color: var(--theme-text) !important;
}
html[data-theme] body.ampol-app .ampol-quick-order-modal :is(p,small,.text-zinc-400,.text-zinc-500,.text-zinc-600) {
    color: var(--theme-muted) !important;
}

/* Graphite is fully dark: no pale legacy card may leak into this theme. */
:root[data-theme="graphite"] body.ampol-app {
    --ui-text-primary: #f3f7f9;
    --ui-text-secondary: #c5d0d7;
    --ui-text-muted: #9eacb6;
    --ui-field-bg: #202832;
    --ui-field-border: rgba(214, 228, 238, .16);
    color: #f3f7f9 !important;
    background: linear-gradient(150deg, #10151b, #171d25) !important;
}
:root[data-theme="graphite"] body.ampol-app :is(
    .site-canvas,.storefront-page,.product-service-page,.ampol-orders-page,
    .dashboard-shell,.ampol-admin-ui,.ampol-checkout-page
) {
    color: #f3f7f9 !important;
    background: linear-gradient(150deg, #10151b, #171d25) !important;
}
:root[data-theme="graphite"] body.ampol-app :is(
    .premium-panel,.glass-panel,.glass-panel-hover,.metric-card,.admin-surface,
    .admin-order-row,.ticket-row,.account-recent,.account-support,.account-activity,
    .ampol-product-permission-card,.ampol-orders-table-wrap,.ampol-orders-empty,
    .ampol-mobile-order-card,.store-filter-panel,.store-empty-state,.product-order-card,
    .product-info-panel,.product-support-panel,.purchase-success-card,.ampol-action-dialog__panel,
    .ampol-order-sidebar,.ampol-quick-order-modal,.ampol-theme-panel,.ampol-account-level-card
) {
    --ui-text-primary: #f3f7f9;
    --ui-text-secondary: #c5d0d7;
    --ui-text-muted: #9eacb6;
    color: #f3f7f9 !important;
    border-color: rgba(214, 228, 238, .14) !important;
    background: linear-gradient(150deg, #202832, #1a222b) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
    color-scheme: dark;
}
:root[data-theme="graphite"] body.ampol-app :is(
    [class~="bg-white"],[class~="bg-white/5"],[class~="bg-white/10"],[class~="bg-white/15"],
    [class~="bg-white/25"],[class~="bg-white/70"],[class~="bg-white/75"],[class~="bg-white/85"],
    [class~="bg-white/90"],[class~="bg-white/92"],[class~="bg-white/95"],
    [class~="bg-white/[.02]"],[class~="bg-white/[.025]"],[class~="bg-white/[.03]"],
    [class~="bg-white/[.035]"],[class~="bg-white/[.04]"],[class~="bg-white/[.05]"],
    [class~="bg-white/[.06]"],[class~="bg-white/[.07]"],[class~="bg-white/[.08]"],
    [class~="bg-white/[.10]"],[class~="bg-slate-50"],[class~="bg-emerald-50"],
    [class~="bg-emerald-50/40"],[class~="bg-emerald-50/50"],[class~="bg-emerald-50/55"],
    [class~="bg-emerald-50/60"],[class~="bg-emerald-50/70"],[class~="bg-emerald-50/90"],
    [class~="bg-[#eef8f3]"],[class~="bg-[#edf7f2]"],[class~="bg-[#e9f5ef]"],
    [class~="bg-[#effaf4]"],[class~="bg-[#f2faf6]"],[class~="bg-[#f2faf5]"],
    [class~="bg-[#f4faf7]"],[class~="bg-[#f0f7f4]"],[class~="bg-[#f3f8f5]"]
) {
    --ui-text-primary: #f3f7f9;
    --ui-text-secondary: #c5d0d7;
    --ui-text-muted: #9eacb6;
    color: #f3f7f9 !important;
    border-color: rgba(214, 228, 238, .14) !important;
    background: #252e38 !important;
    color-scheme: dark;
}
:root[data-theme="graphite"] body.ampol-app :is(
    .text-white,.text-slate-900,.text-slate-800,.text-slate-700,
    .text-gray-900,.text-gray-800,.text-gray-700,
    .text-zinc-900,.text-zinc-800,.text-zinc-700,.text-zinc-100,.text-zinc-200
) { color: #f3f7f9 !important; text-shadow: none !important; }
:root[data-theme="graphite"] body.ampol-app :is(
    .text-slate-600,.text-slate-500,.text-slate-400,
    .text-gray-600,.text-gray-500,.text-gray-400,
    .text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600
) { color: #b2c0c9 !important; text-shadow: none !important; }
:root[data-theme="graphite"] body.ampol-app :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,textarea,.field,.select-field,.textarea-field,.product-order-field
) {
    color: #f3f7f9 !important;
    border-color: rgba(214, 228, 238, .16) !important;
    background: #202832 !important;
    -webkit-text-fill-color: #f3f7f9 !important;
    color-scheme: dark;
}
:root[data-theme="graphite"] body.ampol-app :is(input,textarea)::placeholder {
    color: #9eacb6 !important;
    -webkit-text-fill-color: #9eacb6 !important;
}
:root[data-theme="graphite"] body.ampol-app option { color: #f3f7f9 !important; background: #202832 !important; }
:root[data-theme="graphite"] body.ampol-app .admin-table th { color: #b2c0c9 !important; background: #252e38 !important; }
:root[data-theme="graphite"] body.ampol-app .admin-table td { color: #f3f7f9 !important; background: transparent !important; }
:root[data-theme="graphite"] body.ampol-app .admin-table tbody tr:nth-child(odd) { background: #1b232c !important; }
:root[data-theme="graphite"] body.ampol-app .account-recent table td > :is(a,div,span) { color: #f3f7f9 !important; background-color: transparent !important; }
:root[data-theme="graphite"] body.ampol-app .btn-secondary,
:root[data-theme="graphite"] body.ampol-app .btn-ghost {
    color: #f3f7f9 !important;
    border-color: rgba(214, 228, 238, .16) !important;
    background: #252e38 !important;
}
:root[data-theme="graphite"] body.ampol-app .btn-secondary:hover,
:root[data-theme="graphite"] body.ampol-app .btn-ghost:hover { color: #b3ebce !important; background: #2b3742 !important; }
:root[data-theme="graphite"] body.ampol-app .status-green { color: #9be4be !important; }
:root[data-theme="graphite"] body.ampol-app .status-yellow { color: #fcd66d !important; }
:root[data-theme="graphite"] body.ampol-app .status-red { color: #fda4af !important; }
:root[data-theme="graphite"] body.ampol-app .status-blue { color: #8ed8ff !important; }
:root[data-theme="graphite"] body.ampol-app .status-purple { color: #d8b4fe !important; }

/* Scroll performance: remove expensive fixed repaints and giant blur layers. */
html { scroll-behavior: auto !important; }
body.ampol-app { background-attachment: scroll !important; }
body.ampol-app::before { display: none !important; animation: none !important; }
body.ampol-app::after { position: absolute !important; animation: none !important; }
body.ampol-app .absolute[class*="blur-["],
body.ampol-app .ampol-cart-animation,
body.ampol-app .ampol-checkout-animation,
body.ampol-app .ampol-order-details-animation { display: none !important; }
body.ampol-app :is(.store-product-card__visual-orb,.service-category-card__glow,.product-service-artwork__orb,.product-support-panel::after) {
    filter: none !important;
    opacity: .07 !important;
}
body.ampol-app :is(
    .ampol-site-header,.ampol-mobile-menu,.mobile-app-nav,.ampol-live-chip,.ampol-home-search,
    .ampol-ampoule__glass,.ampol-game-capsule,.ampol-home-stats,.premium-panel,.glass-panel,
    .metric-card,.product-order-card,.product-mobile-buybar,.store-product-card__category,
    .store-product-card__commercial-badge,.store-product-card__instant
) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body.ampol-app .ampol-site-header { background: var(--theme-panel-strong) !important; }
body.ampol-app :is(.premium-panel,.glass-panel,.metric-card,.store-product-card,.ampol-mobile-order-card) {
    box-shadow: 0 12px 32px var(--theme-shadow) !important;
}
body.ampol-app :is(.store-product-card,.ampol-mobile-order-card) {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}
body.ampol-app :is(
    .ampol-ampoule,.ampol-floating,.storefront-hero__ring,
    .storefront-floating-card,.product-service-artwork__ring,
    .animate-pulse-soft
) {
    animation: none !important;
}

@media (max-width: 640px) {
    html[data-theme] body.ampol-app .ampol-action-dialog__panel,
    html[data-theme] body.ampol-app .ampol-quick-order-modal {
        width: calc(100vw - .75rem) !important;
        max-height: calc(100dvh - .75rem) !important;
        border-radius: 1rem !important;
    }
    html[data-theme] body.ampol-app .ampol-quick-order-overlay { padding: .375rem !important; }
    html[data-theme] body.ampol-app .ampol-quick-data > div {
        grid-template-columns: minmax(0, .72fr) minmax(0, 1fr) auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ampol-app *,
    body.ampol-app *::before,
    body.ampol-app *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}