body[data-store-accent="forest"] { --green: #0b765d; --green-dark: #075540; --lime: #d7ef77; --bs-primary: #0b765d; --bs-primary-rgb: 11, 118, 93; }
body[data-store-accent="ocean"] { --green: #286b8f; --green-dark: #164864; --lime: #a6dfde; --bs-primary: #286b8f; --bs-primary-rgb: 40, 107, 143; }
body[data-store-accent="coral"] { --green: #c25847; --green-dark: #7d302d; --lime: #f4c09d; --bs-primary: #c25847; --bs-primary-rgb: 194, 88, 71; }
body[data-store-accent="citrus"] { --green: #637617; --green-dark: #45560c; --lime: #e8f26e; --bs-primary: #637617; --bs-primary-rgb: 99, 118, 23; }

body[data-store-dark="true"] {
  color-scheme: dark;
  --ink: #edf4ef;
  --muted: #afc2bb;
  --line: #334943;
  --paper: #12201d;
  --white: #1c302b;
}
body[data-store-dark="true"] .topbar { background: rgba(20, 38, 34, .96); border-color: var(--line); }
body[data-store-dark="true"] .panel,
body[data-store-dark="true"] .order-row,
body[data-store-dark="true"] .history-row,
body[data-store-dark="true"] .customer-row,
body[data-store-dark="true"] .secret-result { color: var(--ink); background-color: var(--white); border-color: var(--line); }
body[data-store-dark="true"] .form-stack label,
body[data-store-dark="true"] .order-title,
body[data-store-dark="true"] .order-amount { color: var(--ink); }
body[data-store-dark="true"] .form-stack input,
body[data-store-dark="true"] .form-stack select { color: var(--ink); background-color: #152722; border-color: var(--line); }
body[data-store-dark="true"] .button-quiet { color: var(--ink); border-color: var(--line); }
body[data-store-dark="true"] .button-quiet:hover { background: #294039; }
body[data-store-dark="true"] .auth-shell { background: var(--white); border-color: var(--line); }
body[data-store-dark="true"] .auth-panel h1,
body[data-store-dark="true"] .auth-panel .wordmark { color: var(--ink); }

body[data-store-template="minimal"] .panel { border-radius: 2px; box-shadow: none; }
body[data-store-template="minimal"] .topbar { border-bottom-width: 2px; }
body[data-store-template="editorial"] .panel { border-radius: 12px; box-shadow: 0 18px 42px rgba(8, 38, 31, .08); }
body[data-store-template="editorial"] .store-heading h1,
body[data-store-template="editorial"] .panel-heading h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
body.store-theme[data-store-template="minimal"] .nxl-navigation { box-shadow: none; border-right: 1px solid var(--line); }
body.store-theme[data-store-template="editorial"] .nxl-navigation { border-right: 3px solid var(--lime); }
body.store-theme[data-store-dark="true"] { color: var(--ink); background-color: #12201d; }
body.store-theme[data-store-dark="true"] .nxl-navigation,
body.store-theme[data-store-dark="true"] .nxl-header,
body.store-theme[data-store-dark="true"] .nxl-container,
body.store-theme[data-store-dark="true"] .nxl-content { color: var(--ink); background-color: #12201d; }
body.store-theme[data-store-dark="true"] .nxl-link,
body.store-theme[data-store-dark="true"] .nxl-mtext,
body.store-theme[data-store-dark="true"] .text-dark { color: var(--ink) !important; }
body.store-theme[data-store-dark="true"] .bg-white,
body.store-theme[data-store-dark="true"] .bg-light,
body.store-theme[data-store-dark="true"] .card,
body.store-theme[data-store-dark="true"] .offcanvas { color: var(--ink); background-color: #1c302b !important; border-color: #334943 !important; }
body.store-theme[data-store-dark="true"] .form-control,
body.store-theme[data-store-dark="true"] .form-select { color: var(--ink); background-color: #152722; border-color: #334943; }

.store-theme-preview {
  --preview-accent: #08775e;
  display: flex;
  min-width: 145px;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e2de;
  border-radius: 7px;
  color: #102b28;
  background: #f4f7f2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .7px;
}
.store-theme-preview-mark {
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 5px;
  color: white;
  background: var(--preview-accent);
  font: 15px Georgia, serif;
}
.store-brand-logo { width: 28px; height: 28px; margin-right: 7px; border-radius: 5px; object-fit: contain; vertical-align: middle; }
.store-theme-preview[data-template="editorial"] { border-radius: 13px; font-family: Georgia, "Times New Roman", serif; }
.store-theme-preview[data-template="minimal"] { border-radius: 1px; box-shadow: none; }
.store-theme-preview[data-dark="true"] { color: #edf4ef; background: #1c302b; border-color: #334943; }

body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) {
  --ink: #263345;
  --muted: #617086;
  --glass-surface: rgba(255, 255, 255, .78);
  --glass-control: rgba(255, 255, 255, .86);
  --glass-line: rgba(255, 255, 255, .9);
  --glass-edge: rgba(70, 88, 115, .16);
  --glass-shadow: 0 18px 48px rgba(37, 49, 66, .09), inset 0 1px 0 rgba(255, 255, 255, .95);
  color: var(--ink);
  background-color: #eaf0f8;
  background-image: linear-gradient(118deg, rgba(88, 143, 217, .2), transparent 44%), linear-gradient(153deg, transparent 56%, rgba(223, 152, 138, .13) 56%, rgba(255, 255, 255, .3) 84%), repeating-linear-gradient(118deg, transparent 0 95px, rgba(255, 255, 255, .38) 96px 97px, transparent 98px 192px);
  background-attachment: fixed;
}

body[data-page="merchant"] { --green: #3454d1; --green-dark: #2742b5; --bs-primary-rgb: 52, 84, 209; }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .topbar { position: sticky; top: 0; z-index: 10; min-height: 72px; gap: 20px; padding: 12px max(24px, calc((100% - 1120px) / 2)); border-color: var(--glass-edge); background: var(--glass-surface); }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .wordmark { display: inline-flex; min-width: 0; align-items: center; gap: 10px; font-size: 13px; }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .wordmark span { color: var(--green); font-weight: 700; overflow-wrap: anywhere; }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .store-brand-logo { width: 32px; height: 32px; flex: 0 0 32px; margin: 0; padding: 4px; border: 1px solid var(--glass-edge); border-radius: 6px; background: #ffffff; }
body:is([data-page="customer-store"], [data-page="merchant"]) .topbar-right { gap: 16px; }
body:is([data-page="customer-store"], [data-page="merchant"]) .page-shell { padding: 36px 0 48px; }
body:is([data-page="customer-store"], [data-page="merchant"]) .store-heading { align-items: center; margin-bottom: 26px; }
body:is([data-page="customer-store"], [data-page="merchant"]) .store-heading > div:first-child { min-width: 0; }
body:is([data-page="customer-store"], [data-page="merchant"]) .store-heading h1 { margin-top: 8px; font: 650 30px/1.2 "Avenir Next", Avenir, "Segoe UI", sans-serif; overflow-wrap: anywhere; }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .eyebrow { color: var(--muted); letter-spacing: 0; font-size: 10px; font-weight: 700; }

body[data-page="customer-store"] .wallet-readout { display: flex; min-width: 200px; flex: 0 0 auto; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid var(--glass-line); border-radius: 8px; background: var(--glass-surface); box-shadow: var(--glass-shadow); }
body[data-page="customer-store"] .wallet-readout > i { color: var(--green); font-size: 22px; }
body[data-page="customer-store"] .wallet-readout > div { min-width: 0; }
body[data-page="customer-store"] .wallet-readout span { letter-spacing: 0; font-size: 10px; font-weight: 600; }
body[data-page="customer-store"] .wallet-readout strong { margin-top: 4px; color: var(--ink); font-size: 22px; overflow-wrap: anywhere; }
body[data-page="customer-store"] .store-grid { grid-template-columns: minmax(290px, .82fr) minmax(0, 1.18fr); gap: 32px; }

body:is([data-page="customer-store"], [data-page="merchant"]) .panel { min-width: 0; padding: 26px; border: 1px solid var(--glass-line); border-radius: 8px; background: var(--glass-surface); box-shadow: var(--glass-shadow); }
body:is([data-page="customer-store"], [data-page="merchant"]) .panel-heading { align-items: center; margin-bottom: 22px; }
body:is([data-page="customer-store"], [data-page="merchant"]) .panel-heading > div { min-width: 0; }
body:is([data-page="customer-store"], [data-page="merchant"]) .panel-heading h2 { margin-top: 5px; font-size: 18px; font-weight: 650; overflow-wrap: anywhere; }
.glass-tool-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid var(--glass-edge); border-radius: 6px; color: var(--green); background: var(--glass-control); font-size: 19px; }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .form-stack { gap: 10px; }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .form-stack label { color: var(--ink); font-size: 12px; font-weight: 600; }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .form-stack input,
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .form-stack select { min-height: 46px; border-color: var(--glass-edge); border-radius: 6px; background: var(--glass-control); font-size: 13px; }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .form-stack select option { color: var(--ink); background: var(--white); }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .form-stack input:focus,
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .form-stack select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 52, 84, 209), .13); }
body[data-page="customer-store"] .price-row { padding: 16px 0; border-color: var(--glass-edge); font-size: 12px; }
body[data-page="customer-store"] .price-row strong { color: var(--ink); font-size: 19px; }

body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .button { min-height: 44px; gap: 8px; border-radius: 6px; font-size: 12px; font-weight: 650; letter-spacing: 0; transform: none; }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .button i { flex: 0 0 auto; font-size: 15px; }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .button-primary { margin-top: 8px; box-shadow: 0 6px 18px rgba(var(--bs-primary-rgb, 52, 84, 209), .18); }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .button-outline,
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .button-quiet { color: var(--ink); border-color: var(--glass-edge); background: var(--glass-control); }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .button-outline:hover,
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .button-quiet:hover { color: var(--green); border-color: var(--green); background: var(--glass-surface); }
body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.glass-icon-button { width: 44px; flex: 0 0 44px; padding: 0; }

body[data-page="customer-store"] .orders-panel,
body[data-page="merchant"] .queue-panel,
body[data-page="merchant"] .customer-panel { padding: 26px 0 0; border: 0; border-top: 1px solid var(--glass-edge); border-radius: 0; background: transparent; box-shadow: none; }
body[data-page="customer-store"] .orders-panel { padding-top: 8px; border-top: 0; }
body:is([data-page="customer-store"], [data-page="merchant"]) .section-label { margin: 24px 0 12px; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: 0; text-transform: none; }
body:is([data-page="customer-store"], [data-page="merchant"]) .order-list,
body:is([data-page="customer-store"], [data-page="merchant"]) .history-list { gap: 10px; }
body:is([data-page="customer-store"], [data-page="merchant"]) .order-row,
body:is([data-page="customer-store"], [data-page="merchant"]) .history-row,
body[data-page="merchant"] .customer-row,
body[data-page="merchant"] .blocked-number-row { min-width: 0; padding: 15px 16px; border-color: var(--glass-line); border-radius: 6px; background: var(--glass-surface); box-shadow: 0 3px 12px rgba(37, 49, 66, .03); }
body:is([data-page="customer-store"], [data-page="merchant"]) .order-row,
body:is([data-page="customer-store"], [data-page="merchant"]) .history-row { grid-template-columns: minmax(0, 1fr) auto; }
body:is([data-page="customer-store"], [data-page="merchant"]) .order-title { color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
body:is([data-page="customer-store"], [data-page="merchant"]) .order-meta { margin-top: 5px; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
body:is([data-page="customer-store"], [data-page="merchant"]) .order-amount { font-size: 12px; }
body:is([data-page="customer-store"], [data-page="merchant"]) .order-state { font-size: 10px; letter-spacing: 0; }
body:is([data-page="customer-store"], [data-page="merchant"]) .order-list > .muted,
body:is([data-page="customer-store"], [data-page="merchant"]) .history-list > .muted { margin: 0; padding: 24px 16px; border: 1px dashed var(--glass-edge); border-radius: 6px; background: var(--glass-surface); line-height: 1.6; }
body[data-page="merchant"] .merchant-order { border-color: var(--glass-edge); }
body[data-page="merchant"] .customer-store-share { border-color: var(--glass-edge); }
body[data-page="merchant"] .customer-key-dialog { border-color: var(--glass-line); background: var(--glass-surface); }
body[data-page="merchant"] .customer-key-dialog::backdrop { background: rgba(20, 30, 48, .5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
body[data-page="merchant"] .secret-result { border-radius: 6px; border-left-color: var(--green); background: var(--glass-control); }

.glass-footer { display: flex; justify-content: flex-end; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--glass-edge); }
.glass-footer a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; text-decoration: none; }
.glass-footer a:hover { color: var(--green); }
.glass-footer a:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

body[data-page="login"] .auth-shell { width: min(960px, 100%); min-height: 540px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border-color: var(--glass-line); border-radius: 8px; background: var(--glass-surface); box-shadow: var(--glass-shadow); }
body[data-page="login"] .auth-panel { min-width: 0; padding: 48px; }
body[data-page="login"] .auth-panel .wordmark { margin-bottom: 44px; }
body[data-page="login"] .auth-panel h1 { font: 600 32px/1.2 "Avenir Next", Avenir, "Segoe UI", sans-serif; overflow-wrap: anywhere; }
body[data-page="login"] .auth-art { min-width: 0; padding: 36px; background-color: var(--green-dark); background-image: linear-gradient(135deg, rgba(255, 255, 255, .14), transparent 55%), linear-gradient(155deg, transparent 50%, rgba(255, 255, 255, .12) 50.2%, transparent 78%); }
body[data-page="login"] .auth-art-mark { width: 80px; height: 80px; margin-bottom: auto; padding: 14px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 8px; background: rgba(255, 255, 255, .78); box-shadow: 0 16px 30px rgba(0, 0, 0, .1); }
body[data-page="login"] .auth-art p { font: 500 28px/1.3 "Avenir Next", Avenir, "Segoe UI", sans-serif; }
body[data-page="login"] .art-line { background: rgba(255, 255, 255, .65); }
body[data-page="login"] .text-link { display: inline-flex; align-items: center; gap: 8px; line-height: 1.6; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:is([data-page="customer-store"], [data-page="merchant"]) .topbar,
  body[data-page="customer-store"] .wallet-readout,
  body[data-page="customer-store"] .order-panel,
  body[data-page="merchant"] .merchant-grid > .panel,
  body[data-page="login"] .auth-shell { -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%); }
}

body:is([data-page="login"], [data-page="customer-store"])[data-store-dark="true"] { --ink: #eaf0f7; --muted: #afb9c7; --glass-surface: rgba(28, 34, 45, .85); --glass-control: rgba(17, 22, 31, .88); --glass-line: rgba(255, 255, 255, .13); --glass-edge: rgba(255, 255, 255, .15); --glass-shadow: 0 18px 48px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .06); background-color: #141a25; }
body[data-page="customer-store"][data-store-dark="true"] .orders-panel { background: transparent; }
body[data-page="customer-store"][data-store-dark="true"] .order-state { color: #f2c47c; }
body:is([data-page="login"], [data-page="customer-store"])[data-store-dark="true"] .form-message[data-kind="success"] { color: #a9dbbc; }
body:is([data-page="login"], [data-page="customer-store"])[data-store-dark="true"] .form-message[data-kind="error"] { color: #fda4af; }
body[data-page="customer-store"][data-store-template="minimal"] .order-panel { border-radius: 2px; box-shadow: none; }
body[data-page="customer-store"][data-store-template="editorial"] .store-heading h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) { --glass-surface: #f7f9fd; --glass-control: #ffffff; }
  body:is([data-page="login"], [data-page="customer-store"])[data-store-dark="true"] { --glass-surface: #202735; --glass-control: #11161f; }
}

@media (max-width: 760px) {
  body:is([data-page="customer-store"], [data-page="merchant"]) .topbar { min-height: 68px; gap: 12px; padding: 12px 16px; }
  body[data-page="merchant"] .topbar { grid-template-columns: minmax(0, 1fr) 44px; }
  body[data-page="merchant"] .merchant-nav-toggle { width: 44px; height: 44px; padding: 0; }
  body[data-page="merchant"] .merchant-nav-links { border-color: var(--glass-line); background: var(--glass-surface); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  body:is([data-page="customer-store"], [data-page="merchant"]) .topbar-right { gap: 8px; }
  body:is([data-page="customer-store"], [data-page="merchant"]) .page-shell { width: calc(100% - 32px); padding: 26px 0 36px; }
  body:is([data-page="customer-store"], [data-page="merchant"]) .store-heading { align-items: stretch; gap: 20px; }
  body:is([data-page="customer-store"], [data-page="merchant"]) .store-heading h1 { font-size: 26px; }
  body[data-page="customer-store"] .wallet-readout { width: 100%; min-width: 0; padding: 14px 16px; }
  body[data-page="customer-store"] .wallet-readout strong { font-size: 21px; }
  body[data-page="customer-store"] .store-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body:is([data-page="customer-store"], [data-page="merchant"]) .panel { padding: 20px; }
  body[data-page="customer-store"] .orders-panel,
  body[data-page="merchant"] .queue-panel,
  body[data-page="merchant"] .customer-panel { padding: 24px 0 0; }
  body[data-page="customer-store"] .orders-panel { padding: 0; }
  body[data-page="merchant"] .customer-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="merchant"] .customer-row > .order-title:first-child { grid-column: 1 / -1; }
  body[data-page="merchant"] .customer-row .button { grid-column: auto; margin: 0; padding: 0 8px; }
  body[data-page="merchant"] .customer-row .button:last-child { grid-column: 1 / -1; }
  body[data-page="merchant"] .customer-store-share { grid-template-columns: minmax(0, 1fr); }
  body[data-page="merchant"] .customer-store-share > .button { justify-self: start; }
  .glass-footer { justify-content: flex-start; }
  body[data-page="login"] { padding: 16px; }
  body[data-page="login"] .auth-shell { display: block; min-height: 0; }
  body[data-page="login"] .auth-panel { padding: 32px 24px; }
  body[data-page="login"] .auth-panel h1 { font-size: 28px; }
  body[data-page="login"] .auth-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body:is([data-page="login"], [data-page="customer-store"], [data-page="merchant"]) .button { transition: none; }
}