/* Qualitechs liquid-glass system: shared by public, tool, admin, auth and store screens. */
:root,
html[data-theme="dark"] {
  --glass-page: #070708;
  --glass-page-alt: #111114;
  --glass-panel: rgba(28, 28, 32, 0.58);
  --glass-panel-strong: rgba(24, 24, 28, 0.76);
  --glass-control: rgba(255, 255, 255, 0.075);
  --glass-control-hover: rgba(255, 255, 255, 0.12);
  --glass-line: rgba(255, 255, 255, 0.17);
  --glass-line-strong: rgba(255, 255, 255, 0.28);
  --glass-highlight: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.1);
  --glass-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.08);
  --glass-input: rgba(10, 10, 12, 0.46);
  --glass-chrome: rgba(8, 8, 10, 0.7);
  --glass-red: rgba(225, 29, 46, 0.72);
  --glass-red-hover: rgba(225, 29, 46, 0.88);
}

html[data-theme="light"] {
  --glass-page: #f5f6f8;
  --glass-page-alt: #fff7f8;
  --glass-panel: rgba(255, 255, 255, 0.58);
  --glass-panel-strong: rgba(255, 255, 255, 0.78);
  --glass-control: rgba(255, 255, 255, 0.48);
  --glass-control-hover: rgba(255, 228, 233, 0.72);
  --glass-line: rgba(255, 255, 255, 0.8);
  --glass-line-strong: rgba(255, 255, 255, 0.96);
  --glass-highlight: rgba(255, 255, 255, 0.94);
  --glass-shadow: 0 18px 48px rgba(72, 31, 39, 0.12), inset 0 1px rgba(255, 255, 255, 0.96);
  --glass-shadow-soft: 0 10px 28px rgba(72, 31, 39, 0.09), inset 0 1px rgba(255, 255, 255, 0.9);
  --glass-input: rgba(255, 255, 255, 0.52);
  --glass-chrome: rgba(255, 255, 255, 0.7);
  --glass-red: rgba(225, 29, 46, 0.8);
  --glass-red-hover: rgba(190, 18, 48, 0.9);
}

body:not(.store-app) {
  background-color: var(--glass-page);
  background-image:
    radial-gradient(circle at 10% 2%, rgba(225, 29, 46, 0.13), transparent 28rem),
    radial-gradient(circle at 92% 22%, rgba(251, 113, 133, 0.1), transparent 25rem),
    radial-gradient(circle at 54% 92%, rgba(245, 210, 10, 0.055), transparent 24rem),
    linear-gradient(145deg, var(--glass-page), var(--glass-page-alt));
  background-attachment: fixed;
}

body:not(.store-app) #app,
body:not(.store-app) #site,
body:not(.store-app) .view,
body:not(.store-app) .site-alt,
body:not(.store-app) .site-section,
body:not(.store-app) .site-page-head {
  background-color: transparent;
}

.topbar,
.site-top,
.nav,
.admin-nav,
.builder-jumps {
  border-color: var(--glass-line) !important;
  background: var(--glass-chrome) !important;
  box-shadow: 0 8px 30px rgba(12, 8, 9, 0.12), inset 0 1px var(--glass-highlight);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.site-top,
.topbar { border-bottom: 1px solid var(--glass-line) !important; }

.nav a.active,
.admin-nav a.is-on,
.site-nav a.is-on {
  border-color: var(--glass-line-strong);
  background: color-mix(in srgb, var(--accent) 13%, var(--glass-control)) !important;
  box-shadow: inset 0 1px var(--glass-highlight), 0 6px 18px rgba(120, 20, 35, 0.1);
}

.card:not(.review-card),
.dash-panel,
.saved-sidebar,
.saved-toolbar,
.api-card,
.module-item,
.field-chip,
.quick-rule,
.rule-item,
.extract-item,
.test-case,
.dash-run,
.sched-card,
.sched-history,
.sched-dash,
.sched-mod,
.sched-run,
.report-stat,
.report-toolbar,
.report-side,
.report-tests,
.run-table-wrap,
.monitor-filters,
.monitor-issue,
.admin-perm-card,
.admin-password-box,
.admin-rule,
.admin-review-item,
.assertion-overview,
.create-block:has(.field-list),
.create-block:has(.quick-actions),
.login-card,
.login-brand,
.coupon-card,
.site-card,
.site-plan,
.site-price-tease {
  border-color: var(--glass-line) !important;
  background: linear-gradient(145deg, var(--glass-panel-strong), var(--glass-panel)) !important;
  box-shadow: var(--glass-shadow-soft);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.card:not(.review-card),
.dash-panel,
.api-card,
.sched-card,
.report-stat,
.monitor-issue,
.admin-perm-card,
.admin-review-item,
.site-card,
.site-plan {
  border-radius: clamp(16px, 2vw, 22px);
}

.card:not(.review-card):hover,
.api-card:hover,
.site-card:hover,
.site-plan:hover {
  border-color: var(--glass-line-strong) !important;
  box-shadow: var(--glass-shadow);
}

.modal {
  background: color-mix(in srgb, var(--modal-backdrop) 76%, transparent) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.modal-card,
.login-country-menu,
.toast,
.conn-banner {
  border: 1px solid var(--glass-line) !important;
  background: var(--glass-panel-strong) !important;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
}

.modal-card { border-radius: 24px; }
.toast { border-radius: 18px; }

.field input,
.field select,
.field textarea,
.input,
input.input,
select.input,
textarea.input,
.admin-search,
.admin-api-form input,
.admin-api-form select,
.admin-api-form textarea,
.admin-password-row input,
.monitor-filters input,
.monitor-filters select,
.create-page input,
.create-page select,
.create-page textarea {
  border-color: var(--glass-line) !important;
  background-color: var(--glass-input) !important;
  box-shadow: inset 0 1px var(--glass-highlight), 0 5px 16px rgba(20, 12, 14, 0.045);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.input:hover {
  border-color: var(--glass-line-strong) !important;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--glass-line-strong)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent), inset 0 1px var(--glass-highlight);
}

.btn:not(.primary):not(.green):not(.red):not(.danger),
.theme-toggle,
.row-actions button,
.quick-actions button {
  border-color: var(--glass-line) !important;
  background: var(--glass-control) !important;
  box-shadow: inset 0 1px var(--glass-highlight), 0 6px 16px rgba(20, 12, 14, 0.055);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}

.btn:not(.primary):not(.green):not(.red):not(.danger):hover,
.theme-toggle:hover {
  border-color: var(--glass-line-strong) !important;
  background: var(--glass-control-hover) !important;
}

html[data-theme="dark"] .theme-toggle { color: #fff; }
html[data-theme="light"] .theme-toggle { color: #111; }

html[data-theme="light"] .btn.icon:hover:not(:disabled):not(.is-off),
html[data-theme="light"] .btn.icon:focus-visible:not(:disabled):not(.is-off),
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .theme-toggle:focus-visible {
  background: var(--glass-control) !important;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--glass-line)) !important;
  filter: none;
  transform: none;
  transition: none !important;
}

html[data-theme="light"] .secret-toggle:hover,
html[data-theme="light"] .secret-toggle:focus-visible {
  background: transparent !important;
  color: var(--accent);
  filter: none;
  transform: translateY(-50%);
  transition: none !important;
}

html[data-theme="light"] .site-brand,
html[data-theme="light"] .site-brand img,
html[data-theme="light"] .btn.icon,
html[data-theme="light"] .btn.icon svg,
html[data-theme="light"] .secret-toggle,
html[data-theme="light"] .secret-toggle svg,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .theme-toggle svg,
html[data-theme="light"] .wa-support,
html[data-theme="light"] .wa-support-mark,
html[data-theme="light"] .store-icon-link,
html[data-theme="light"] .store-theme,
html[data-theme="light"] .store-pass-toggle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: none !important;
}

html[data-theme="light"] .store-icon-link:hover,
html[data-theme="light"] .store-icon-link:focus-visible,
html[data-theme="light"] .store-theme:hover,
html[data-theme="light"] .store-theme:focus-visible {
  background: var(--s-glass-control) !important;
  border-color: rgba(225, 29, 46, 0.55) !important;
  filter: none;
  transform: none;
}

.btn.primary,
.btn.red {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: linear-gradient(145deg, var(--glass-red), color-mix(in srgb, var(--accent-hover) 88%, transparent)) !important;
  box-shadow: 0 10px 26px rgba(166, 18, 42, 0.22), inset 0 1px rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
}

.btn.primary:hover,
.btn.primary:focus-visible,
.btn.red:hover,
.btn.red:focus-visible {
  background: linear-gradient(
    145deg,
    var(--glass-red-hover),
    color-mix(in srgb, var(--accent-hover) 94%, transparent)
  ) !important;
}

.pill,
.count-pill,
.monitor-pill,
.field-picked,
.method,
.session-badge {
  border-color: var(--glass-line) !important;
  background: var(--glass-control) !important;
  box-shadow: inset 0 1px var(--glass-highlight);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.table th,
.monitor-table th,
.admin-table th {
  background: var(--glass-panel-strong) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.table tr:hover td,
.admin-table tr.admin-row:hover,
.run-row:hover { background: var(--glass-control) !important; }

.modal-actions {
  background: color-mix(in srgb, var(--glass-panel-strong) 84%, transparent) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Store liquid glass */
:root,
html[data-theme="dark"] {
  --s-glass-panel: rgba(27, 29, 31, 0.6);
  --s-glass-strong: rgba(20, 23, 26, 0.78);
  --s-glass-control: rgba(255, 255, 255, 0.075);
  --s-glass-line: rgba(255, 255, 255, 0.17);
  --s-glass-chrome: rgba(14, 18, 24, 0.76);
}

html[data-theme="light"] {
  --s-glass-panel: rgba(255, 255, 255, 0.58);
  --s-glass-strong: rgba(255, 255, 255, 0.8);
  --s-glass-control: rgba(255, 255, 255, 0.52);
  --s-glass-line: rgba(255, 255, 255, 0.82);
  --s-glass-chrome: rgba(28, 34, 43, 0.78);
}

body.store-app {
  background-color: var(--s-bg);
  background-image:
    radial-gradient(circle at 8% 0%, rgba(196, 21, 38, 0.14), transparent 28rem),
    radial-gradient(circle at 90% 30%, rgba(254, 189, 105, 0.1), transparent 24rem),
    linear-gradient(145deg, var(--s-bg), var(--s-bg-2));
  background-attachment: fixed;
}

.store-chrome,
.store-mast,
.store-depts,
.store-foot {
  background: var(--s-glass-chrome) !important;
  border-color: var(--s-glass-line) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 8px 26px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.store-auth-panel { background: transparent !important; }

.store-auth-card,
.store-login-card,
.store-card,
.store-filters,
.store-line,
.store-summary,
.store-form,
.store-minicart,
.store-sizes button {
  border-color: var(--s-glass-line) !important;
  background: linear-gradient(145deg, var(--s-glass-strong), var(--s-glass-panel)) !important;
  box-shadow: 0 14px 34px rgba(15, 17, 17, 0.12), inset 0 1px rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.store-auth-card,
.store-login-card,
.store-card,
.store-filters,
.store-line,
.store-summary,
.store-form,
.store-minicart { border-radius: 20px; }

.store-auth-form input,
.store-form input,
.store-form select,
.store-form textarea,
.store-filters input,
.store-filters select,
.store-pass-wrap,
.store-search {
  border-color: var(--s-glass-line) !important;
  background: var(--s-glass-control) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
}

.store-search input { background: transparent !important; color: var(--s-ink) !important; }
.store-search-go { border-left: 1px solid rgba(255, 255, 255, 0.18); }

.store-ghost,
.store-toolbtn,
.store-theme,
.store-switch select,
.store-icon-link,
.store-deliver {
  border-color: var(--s-glass-line) !important;
  background: var(--s-glass-control) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.store-auth-submit,
.store-solid,
.store-add,
.store-signin {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(145deg, rgba(225, 29, 46, 0.82), rgba(170, 16, 36, 0.86)) !important;
  box-shadow: 0 10px 24px rgba(155, 16, 37, 0.2), inset 0 1px rgba(255, 255, 255, 0.28);
}

@media (max-width: 720px) {
  .card:not(.review-card),
  .dash-panel,
  .api-card,
  .modal-card,
  .login-card,
  .store-card,
  .store-form,
  .store-summary { border-radius: 18px; }

  .topbar,
  .site-top,
  .nav,
  .admin-nav,
  .store-chrome { -webkit-backdrop-filter: blur(16px) saturate(135%); backdrop-filter: blur(16px) saturate(135%); }

  .site-nav {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar, .site-top, .nav, .admin-nav, .card, .dash-panel, .api-card, .modal-card,
  .login-card, .login-brand {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--card) !important;
  }

  .store-chrome, .store-card, .store-form, .store-summary {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--s-card) !important;
  }
}