/* Reference material: softly raised frosted glass, not flat pastel fills. */
html[data-interface-style="crystal"] {
  --bright-ink: #25394e;
  --bright-muted: #4d627a;
  --glass-neutral: linear-gradient(175deg, rgba(255,255,255,.40) 0%, rgba(238,245,255,.16) 27%, rgba(219,230,247,.07) 62%, rgba(255,255,255,.35) 100%);
  --glass-blue: linear-gradient(175deg, rgba(200,237,255,.61), rgba(55,166,228,.35) 42%, rgba(41,143,211,.30) 72%, rgba(219,247,255,.68));
  --glass-mint: linear-gradient(175deg, rgba(236,255,251,.62), rgba(159,213,208,.21) 44%, rgba(132,190,188,.16) 72%, rgba(240,255,252,.56));
  --glass-rim: rgba(237,246,255,.64);
  --glass-button-shadow: inset 0 1.5px 2px rgba(66,92,128,.23), inset 1px 0 2px rgba(255,255,255,.43), inset -1px 0 2px rgba(83,107,145,.12), inset 0 -2.5px 2px rgba(255,255,255,.78), inset 0 -7px 8px rgba(238,248,255,.20), 0 4px 5px rgba(50,78,117,.20), 0 9px 15px rgba(51,81,124,.08), 0 -1px 1px rgba(255,255,255,.58);
  --glass-hover-shadow: inset 0 1px 2px rgba(66,92,128,.16), inset 1px 0 2px rgba(255,255,255,.62), inset 0 -3px 2px rgba(255,255,255,.91), 0 5px 7px rgba(50,78,117,.20), 0 12px 20px rgba(51,81,124,.10);
  --apple-button-surface: var(--glass-neutral);
  --apple-button-border: var(--glass-rim);
  --apple-button-shadow: var(--glass-button-shadow);
  --apple-button-shadow-hover: var(--glass-hover-shadow);
  --apple-glass-surface: linear-gradient(155deg, rgba(255,255,255,.40), rgba(242,247,255,.14) 62%, rgba(255,255,255,.24));
  --apple-glass-surface-strong: var(--apple-glass-surface);
  --apple-glass-border: rgba(248,252,255,.72);
  --apple-glass-shadow: inset 0 1px 1px rgba(255,255,255,.90), inset 0 -1px 1px rgba(73,104,144,.11), 0 8px 22px rgba(52,80,119,.095);
}
html[data-interface-style="crystal"] body {
  color: var(--bright-ink);
  background:
    radial-gradient(ellipse at 9% 0%, rgba(255,255,255,.94), transparent 58%),
    radial-gradient(ellipse at 83% 4%, hsl(calc(var(--fresh-theme-hue, 158) + 28) 78% 90% / .43), transparent 46%),
    radial-gradient(ellipse at 92% 94%, hsl(var(--fresh-theme-hue, 158) 70% 84% / .30), transparent 56%),
    linear-gradient(138deg,
      hsl(var(--fresh-theme-hue, 158) 48% 98%) 0%,
      hsl(var(--fresh-theme-hue, 158) 54% 95%) 42%,
      hsl(calc(var(--fresh-theme-hue, 158) + 15) 53% 91%) 100%) !important;
  background-attachment: fixed !important;
}
html[data-interface-style="crystal"] body :is(.body,.main-split,.split-left,.split-right,.dot-grid) { background: transparent !important; }
html[data-interface-style="crystal"] body .topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(230,238,250,.18)) !important;
  border-bottom: 1px solid rgba(255,255,255,.75) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 5px 16px rgba(62,88,125,.09) !important;
  -webkit-backdrop-filter: blur(22px) saturate(125%) !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
}
html[data-interface-style="crystal"] body :is(.card,.glass-card,.layout-panel,.lp-panel,.company-settings-card,.workspace-panel,.qoe-project) {
  background: var(--apple-glass-surface) !important;
  border: 1px solid var(--apple-glass-border) !important;
  box-shadow: var(--apple-glass-shadow) !important;
  -webkit-backdrop-filter: blur(15px) saturate(115%) !important;
  backdrop-filter: blur(15px) saturate(115%) !important;
}
html[data-interface-style="crystal"] body :is(#product-info-card .field,#spec-box .field,#spec-card .field,#spec-label .field) {
  background: linear-gradient(155deg, rgba(255,255,255,.27), rgba(255,255,255,.08)) !important;
  border-color: rgba(255,255,255,.53) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.67), 0 1px 2px rgba(80,108,148,.035) !important;
}
html[data-interface-style="crystal"] body :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),select,textarea) {
  color: var(--bright-ink) !important;
  background: linear-gradient(180deg, rgba(225,236,249,.23), rgba(255,255,255,.36)) !important;
  border-color: rgba(125,151,183,.24) !important;
  box-shadow: inset 0 1px 3px rgba(75,101,136,.085), 0 1px 0 rgba(255,255,255,.84) !important;
}
html[data-interface-style="crystal"] body :is(.card-title,.field>label,.qoe-product-line label>span) { color: var(--bright-muted) !important; }
html[data-interface-style="crystal"] body :is(button,input[type="button"],input[type="submit"],.tab,.pt,.settings-tab,.sp-trigger) {
  color: var(--bright-ink) !important;
  background: var(--glass-neutral) !important;
  border: 1px solid var(--glass-rim) !important;
  border-radius: 15px !important;
  box-shadow: var(--glass-button-shadow) !important;
  background-clip: padding-box !important;
  text-shadow: 0 1px 1px rgba(255,255,255,.70) !important;
  -webkit-backdrop-filter: blur(9px) saturate(125%) !important;
  backdrop-filter: blur(9px) saturate(125%) !important;
}
html[data-interface-style="crystal"] body :is(button.primary,button.b-primary,button.btn-primary,button.qoe-btn.primary,button.mobile-result-action,button.embedded-upload-btn,button.qoe-topbar-button,#quote-to-order-btn,#_login-submit),
html[data-interface-style="crystal"] body .quote-main-actions .btn:first-child,
html[data-interface-style="crystal"] body .quotation-topbar-tools #quick-order-entry-btn {
  color: #164867 !important;
  background: var(--glass-blue) !important;
  border-color: rgba(147,206,240,.60) !important;
  box-shadow: inset 0 2px 3px rgba(23,99,154,.27), inset 1px 0 2px rgba(228,250,255,.45), inset 0 -3px 2px rgba(221,251,255,.85), inset 0 -8px 8px rgba(174,228,254,.22), 0 4px 5px rgba(33,103,155,.22), 0 9px 16px rgba(41,114,167,.12), 0 -1px 1px rgba(235,252,255,.57) !important;
}
html[data-interface-style="crystal"] body .quotation-topbar-tools #company-document-settings-entry {
  color: #354e68 !important;
  background: var(--glass-neutral) !important;
  border-color: var(--glass-rim) !important;
  box-shadow: var(--glass-button-shadow) !important;
}
html[data-interface-style="crystal"] body .quotation-topbar-tools > .qoe-topbar-button { border-radius: 12px !important; }
html[data-interface-style="crystal"] body .topbar .tab {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-interface-style="crystal"] body .topbar .tab.active {
  color: #1d5d8c !important;
  background: var(--glass-neutral) !important;
  border-color: var(--glass-rim) !important;
  box-shadow: var(--glass-button-shadow) !important;
}
html[data-interface-style="crystal"] body :is(button.btn.factory,button.mobile-result-action.factory),
html[data-interface-style="crystal"] body .quote-main-actions .btn:nth-child(3) {
  color: #2e5d5a !important;
  background: var(--glass-mint) !important;
  border-color: var(--glass-rim) !important;
  box-shadow: var(--glass-button-shadow) !important;
}
html[data-interface-style="crystal"] body :is(button.btn-danger,button.b-bad,button.delete,button.ms-del-btn) {
  color: #a33949 !important;
  background: linear-gradient(175deg, rgba(255,255,255,.49), rgba(233,173,185,.18) 60%, rgba(255,245,247,.49)) !important;
}
html[data-interface-style="crystal"] body .quote-main-actions {
  background: transparent !important;
  box-shadow: none !important;
  gap: 9px !important;
  padding: 7px 3px 10px !important;
}
html[data-interface-style="crystal"] body .quote-main-actions .btn {
  min-height: 38px !important;
  border-radius: 13px !important;
  box-shadow: var(--glass-button-shadow) !important;
}
html[data-interface-style="crystal"] body button:hover:not(:disabled) {
  filter: brightness(1.045) saturate(1.06) !important;
  box-shadow: var(--glass-hover-shadow) !important;
}
html[data-interface-style="crystal"] body button:active:not(:disabled) {
  box-shadow: inset 0 2px 5px rgba(61,86,123,.24), inset 0 -1px 1px rgba(255,255,255,.70), 0 1px 3px rgba(58,88,125,.14) !important;
  filter: brightness(.99) !important;
}
html[data-interface-style="crystal"] body :is(button,input,select,textarea):focus-visible {
  outline: 2px solid #367da9 !important;
  outline-offset: 3px !important;
}
@media (prefers-reduced-transparency: reduce) {
  html[data-interface-style="crystal"] { --glass-neutral: #e3ebf5; --apple-glass-surface: #eaf0f7; }
}
/* Keep order/customer actions neutral even when the theme hue changes. */
html[data-interface-style="crystal"] body #tab-main .quote-main-actions :is(#quote-to-order-btn,#to-order-btn,.btn:first-child,.btn:nth-child(2)) {
  color: var(--bright-ink) !important;
  background: var(--glass-neutral) !important;
  border: 1px solid var(--glass-rim) !important;
  box-shadow: var(--glass-button-shadow) !important;
  text-shadow: 0 1px 1px rgba(255,255,255,.70) !important;
}
html[data-interface-style="crystal"] body #tab-main .quote-main-actions :is(#quote-to-order-btn,#to-order-btn,.btn:first-child,.btn:nth-child(2)):hover:not(:disabled) {
  box-shadow: var(--glass-hover-shadow) !important;
}
html[data-interface-style="crystal"] body #tab-main .quote-main-actions :is(#quote-to-order-btn,#to-order-btn,.btn:first-child,.btn:nth-child(2)):active:not(:disabled) {
  box-shadow: inset 0 2px 5px rgba(61,86,123,.24), inset 0 -1px 1px rgba(255,255,255,.70), 0 1px 3px rgba(58,88,125,.14) !important;
}