/* Reversible Liquid Glass experience. Classic remains the base stylesheet. */
.ui-style-toggle,
.admin-ui-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--clay);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}

.ui-style-glyph {
  position: relative;
  width: 17px;
  height: 15px;
  display: inline-block;
}

.ui-style-glyph i {
  position: absolute;
  width: 12px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 4px;
}

.ui-style-glyph i:first-child { left: 0; top: 0; }
.ui-style-glyph i:last-child { right: 0; bottom: 0; background: color-mix(in srgb, currentColor 8%, transparent); }

.admin-ui-toggle { min-height: 49px; border-radius: 16px; }
.login-form-wrap { position: relative; }
.login-ui-toggle { position: absolute; top: 28px; right: 28px; }

html[data-ui-style="glass"] {
  --clay: #e0e7e8;
  --clay-deep: #cfd9db;
  --clay-light: #f2f5f5;
  --paper: #f7f9f9;
  --ink: #171a1b;
  --muted: #586064;
  --line: rgba(255, 255, 255, .68);
  --contrast-panel: #171b1c;
  --contrast-ink: #f4f3ef;
  --contrast-muted: #c1c7c7;
  --contrast-line: rgba(255, 255, 255, .13);
  --glass-clear: rgba(250, 253, 253, .68);
  --glass-soft: rgba(232, 239, 240, .74);
  --glass-line: rgba(255, 255, 255, .8);
  --glass-shadow: 0 18px 46px rgba(47, 61, 65, .12), inset 0 1px rgba(255, 255, 255, .66);
  --shadow: 0 22px 55px rgba(47, 61, 65, .13), inset 0 1px rgba(255, 255, 255, .68);
  --shadow-soft: 0 10px 28px rgba(47, 61, 65, .1), inset 0 1px rgba(255, 255, 255, .7);
  --inset: inset 0 1px rgba(255, 255, 255, .78), 0 12px 30px rgba(47, 61, 65, .08);
}

html[data-theme="dark"][data-ui-style="glass"] {
  --clay: #202526;
  --clay-deep: #15191a;
  --clay-light: #2a3031;
  --paper: #171b1c;
  --ink: #f0f1ee;
  --muted: #bec5c5;
  --line: rgba(255, 255, 255, .13);
  --contrast-panel: #101314;
  --glass-clear: rgba(37, 43, 44, .7);
  --glass-soft: rgba(27, 32, 33, .76);
  --glass-line: rgba(255, 255, 255, .13);
  --glass-shadow: 0 22px 54px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .08);
  --shadow: 0 24px 58px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .08);
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .07);
  --inset: inset 0 1px rgba(255, 255, 255, .08), 0 10px 28px rgba(0, 0, 0, .2);
}

[data-ui-style="glass"] body {
  background:
    radial-gradient(circle at 82% 4%, rgba(197, 154, 112, .16), transparent 24rem),
    radial-gradient(circle at 10% 28%, rgba(255, 255, 255, .72), transparent 30rem),
    linear-gradient(145deg, var(--clay-light), var(--clay-deep));
  background-attachment: fixed;
}

[data-theme="dark"][data-ui-style="glass"] body {
  background:
    radial-gradient(circle at 80% 4%, rgba(154, 107, 63, .16), transparent 25rem),
    linear-gradient(145deg, #0f1213, #262b2c);
}

[data-ui-style="glass"] .site-header { padding-top: 10px; }
[data-ui-style="glass"] .site-header.scrolled { background: transparent; box-shadow: none; backdrop-filter: none; }

[data-ui-style="glass"] .header-inner {
  height: 68px;
  width: min(1280px, calc(100vw - 28px));
  padding: 0 18px;
  border: 1px solid var(--glass-line);
  border-radius: 24px;
  background: var(--glass-clear);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

[data-ui-style="glass"] :is(.icon-button, .account-link, .ui-style-toggle, .menu-button, .mobile-nav-close) {
  border: 1px solid var(--glass-line);
  background: color-mix(in srgb, var(--glass-clear) 86%, transparent);
  box-shadow: 0 8px 22px rgba(38, 52, 56, .09), inset 0 1px rgba(255, 255, 255, .55);
}

[data-ui-style="glass"] .brand-mark {
  background: linear-gradient(145deg, #2b3031, #111415);
  color: #f5f4ef;
  box-shadow: 0 8px 22px rgba(26, 32, 34, .2), inset 0 1px rgba(255, 255, 255, .15);
}

[data-ui-style="glass"] .mobile-nav {
  background:
    radial-gradient(circle at 18% 72%, rgba(197, 154, 112, .2), transparent 28%),
    color-mix(in srgb, var(--clay) 84%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
}

[data-ui-style="glass"] .hero {
  background:
    radial-gradient(circle at 74% 25%, rgba(197, 154, 112, .2), transparent 27%),
    radial-gradient(circle at 10% 4%, rgba(255, 255, 255, .86), transparent 33%),
    linear-gradient(145deg, #f2f5f5, #d6dfe1);
}

[data-theme="dark"][data-ui-style="glass"] .hero {
  background:
    radial-gradient(circle at 74% 25%, rgba(154, 107, 63, .18), transparent 27%),
    linear-gradient(145deg, #101314, #272c2d);
}

[data-ui-style="glass"] :is(.hero-search, .inventory-toolbar, .filter-panel, .model-control-bar, .viewer-controls, .chat-panel) {
  border: 1px solid var(--glass-line);
  background: var(--glass-clear);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

[data-ui-style="glass"] .hero-search button,
[data-ui-style="glass"] .button-primary {
  background: linear-gradient(145deg, #2d3233, #111415);
  color: #f5f4ef;
  box-shadow: 0 12px 28px rgba(24, 31, 33, .22), inset 0 1px rgba(255, 255, 255, .16);
}

[data-ui-style="glass"] :is(.clay-card, .contact-option, .account-card, .profile-panel, .reseller-panel, .error-card, .service-card, .journal-card, .value-card) {
  border-color: var(--glass-line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(220, 229, 231, .56));
  box-shadow: var(--glass-shadow);
}

[data-theme="dark"][data-ui-style="glass"] :is(.clay-card, .contact-option, .account-card, .profile-panel, .reseller-panel, .error-card, .service-card, .journal-card, .value-card) {
  background: linear-gradient(145deg, rgba(51, 58, 59, .76), rgba(24, 29, 30, .76));
}

[data-ui-style="glass"] .vehicle-media {
  border: 1px solid var(--glass-line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(207, 217, 219, .72));
  box-shadow: 0 24px 55px rgba(47, 61, 65, .15), inset 0 1px rgba(255, 255, 255, .72);
}

[data-theme="dark"][data-ui-style="glass"] .vehicle-media {
  background: radial-gradient(circle at 50% 45%, #3a4142, #181c1d 72%);
}

[data-ui-style="glass"] :is(input, select, textarea) {
  border-color: var(--glass-line);
  background: color-mix(in srgb, var(--glass-clear) 74%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, .48);
}

[data-ui-style="glass"] .cove-light { --cove-color: color-mix(in srgb, var(--paper) 90%, transparent); }
[data-ui-style="glass"] .cove-clay { --cove-color: color-mix(in srgb, var(--clay) 88%, transparent); }
[data-ui-style="glass"] .cove-soft { --cove-color: color-mix(in srgb, var(--clay-light) 9%, transparent); }
[data-ui-style="glass"] .floating-chat { box-shadow: 0 18px 44px rgba(21, 28, 30, .26), inset 0 1px rgba(255, 255, 255, .18); }

/* Management studio: restrained glass for controls and work surfaces. */
[data-ui-style="glass"] .admin-body,
[data-ui-style="glass"] .login-form-wrap {
  background:
    radial-gradient(circle at 86% 8%, rgba(197, 154, 112, .13), transparent 24rem),
    linear-gradient(145deg, var(--clay-light), var(--clay-deep));
}

[data-ui-style="glass"] .login-card {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--glass-line);
  border-radius: 30px;
  background: var(--glass-clear);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}

[data-ui-style="glass"] :is(.admin-ui-toggle, .admin-theme-toggle) {
  border: 1px solid var(--glass-line);
  background: var(--glass-clear);
  box-shadow: var(--glass-shadow);
}

[data-ui-style="glass"] .admin-sidebar {
  border-right: 1px solid rgba(255, 255, 255, .11);
  background: rgba(15, 18, 19, .88);
  box-shadow: 18px 0 48px rgba(10, 14, 15, .15);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
}

[data-ui-style="glass"] .admin-main {
  background:
    radial-gradient(circle at 82% 0, rgba(197, 154, 112, .11), transparent 26rem),
    linear-gradient(145deg, color-mix(in srgb, var(--clay-light) 82%, transparent), color-mix(in srgb, var(--clay-deep) 78%, transparent));
}

[data-ui-style="glass"] :is(.stat, .analytics-section, .popular-section, .quick-actions, .settings-section, .vehicle-form-section, [data-admin-section] > .admin-section, .form-dialog) {
  border-color: var(--glass-line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .7), rgba(218, 228, 229, .58));
  box-shadow: var(--glass-shadow);
}

[data-theme="dark"][data-ui-style="glass"] :is(.stat, .analytics-section, .popular-section, .quick-actions, .settings-section, .vehicle-form-section, [data-admin-section] > .admin-section, .form-dialog) {
  background: linear-gradient(145deg, rgba(49, 56, 57, .78), rgba(22, 27, 28, .78));
}

[data-ui-style="glass"] :is(.conversation-list, .conversation-detail, .customer-card, .job-card, .empty-job, .staff-form, .media-upload-panel, .setup-instructions article) {
  border-color: var(--glass-line);
  background: color-mix(in srgb, var(--glass-clear) 76%, transparent);
}

[data-ui-style="glass"] .admin-nav button.active,
[data-ui-style="glass"] .admin-nav button:hover {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

@supports not (backdrop-filter: blur(1px)) {
  [data-ui-style="glass"] :is(.header-inner, .mobile-nav, .hero-search, .inventory-toolbar, .filter-panel, .model-control-bar, .viewer-controls, .chat-panel, .login-card, .admin-sidebar) {
    background: var(--clay-light);
  }
}

@media (prefers-reduced-transparency: reduce) {
  [data-ui-style="glass"] :is(.header-inner, .mobile-nav, .hero-search, .inventory-toolbar, .filter-panel, .model-control-bar, .viewer-controls, .chat-panel, .login-card, .admin-sidebar) {
    background: var(--clay-light);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 1180px) {
  .ui-style-toggle [data-ui-style-label] { display: none; }
  .ui-style-toggle { width: 44px; padding: 0; }
}

@media (max-width: 760px) {
  [data-ui-style="glass"] .site-header { padding-top: 7px; }
  [data-ui-style="glass"] .header-inner { width: calc(100vw - 16px); padding: 0 12px; border-radius: 21px; }
  [data-ui-style="glass"] .admin-sidebar { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .11); }
  .login-ui-toggle { top: 16px; right: 16px; min-height: 42px; }
  [data-ui-style="glass"] .login-card { padding: 28px 20px; }
}