/*
 * Apple-style glass visual layer.
 * Visual properties only: no layout, state, event, pricing or order logic.
 */
:root {
  --apple-glass-surface:
    radial-gradient(105% 82% at 9% -13%, rgba(255, 255, 255, .86) 0 19%, rgba(255, 255, 255, 0) 57%),
    radial-gradient(65% 92% at 103% 96%, rgba(98, 201, 228, .10), rgba(98, 201, 228, 0) 69%),
    radial-gradient(58% 88% at -4% 103%, rgba(255, 183, 206, .09), rgba(255, 183, 206, 0) 70%),
    radial-gradient(48% 72% at 70% -8%, rgba(255, 220, 132, .07), rgba(255, 220, 132, 0) 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .27), rgba(245, 241, 251, .15) 58%, rgba(224, 235, 247, .10));
  --apple-glass-surface-strong:
    radial-gradient(105% 84% at 10% -13%, rgba(255, 255, 255, .91) 0 21%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(64% 92% at 103% 95%, rgba(101, 202, 227, .11), rgba(101, 202, 227, 0) 69%),
    radial-gradient(56% 85% at -3% 103%, rgba(248, 176, 213, .08), rgba(248, 176, 213, 0) 70%),
    linear-gradient(145deg, rgba(255, 255, 255, .35), rgba(244, 240, 250, .20) 58%, rgba(220, 234, 246, .13));
  --apple-glass-border: rgba(122, 145, 179, .11);
  --apple-glass-shadow:
    inset 1px 1.5px 1px rgba(255, 255, 255, .88),
    inset -1px -1.5px 2px rgba(83, 125, 185, .16),
    inset 0 -1px 5px rgba(75, 188, 255, .08),
    inset -2px 0 5px rgba(255, 177, 87, .06),
    0 0 0 1px rgba(255, 255, 255, .20),
    0 6px 18px rgba(45, 56, 78, .075),
    6px 7px 16px rgba(54, 170, 255, .035),
    -5px 7px 15px rgba(255, 157, 74, .030);
  --apple-glass-shadow-hover:
    inset 1px 1.5px 1px rgba(255, 255, 255, .96),
    inset -1px -1.5px 2px rgba(76, 121, 187, .19),
    inset 0 -1px 6px rgba(75, 188, 255, .10),
    inset -2px 0 6px rgba(255, 177, 87, .08),
    0 0 0 1px rgba(255, 255, 255, .27),
    0 9px 22px rgba(45, 56, 78, .095),
    7px 9px 18px rgba(54, 170, 255, .045),
    -6px 9px 17px rgba(255, 157, 74, .040);
  --apple-button-surface:
    radial-gradient(92% 105% at 12% -16%, rgba(255, 255, 255, .88) 0 18%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(63% 105% at 102% 96%, rgba(78, 201, 232, .13), rgba(78, 201, 232, 0) 68%),
    radial-gradient(56% 92% at -3% 106%, rgba(255, 166, 205, .11), rgba(255, 166, 205, 0) 70%),
    radial-gradient(48% 75% at 72% -9%, rgba(255, 220, 122, .08), rgba(255, 220, 122, 0) 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .20), rgba(242, 239, 249, .10) 58%, rgba(218, 232, 247, .065));
  --apple-button-border: rgba(104, 132, 171, .10);
  --apple-button-shadow:
    inset 1px 1.5px 1px rgba(255, 255, 255, .92),
    inset -1px -1.5px 2px rgba(78, 123, 187, .17),
    inset 0 -1px 5px rgba(56, 177, 255, .09),
    inset -2px 0 5px rgba(255, 172, 77, .07),
    0 0 0 1px rgba(255, 255, 255, .17),
    0 3px 9px rgba(45, 55, 75, .085),
    4px 4px 10px rgba(56, 169, 255, .035),
    -4px 4px 10px rgba(255, 158, 69, .030);
  --apple-button-shadow-hover:
    inset 1px 1.5px 1px rgba(255, 255, 255, 1),
    inset -1px -1.5px 2px rgba(69, 116, 184, .21),
    inset 0 -1px 6px rgba(56, 177, 255, .11),
    inset -2px 0 6px rgba(255, 172, 77, .09),
    0 0 0 1px rgba(255, 255, 255, .24),
    0 6px 14px rgba(45, 55, 75, .105),
    5px 6px 12px rgba(56, 169, 255, .045),
    -5px 6px 12px rgba(255, 158, 69, .040);
  --apple-primary-surface:
    radial-gradient(96% 110% at 14% -18%, rgba(255, 255, 255, .76) 0 18%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(60% 100% at 101% 96%, rgba(255, 213, 119, .24), rgba(255, 213, 119, 0) 70%),
    radial-gradient(52% 92% at -3% 105%, rgba(238, 137, 212, .17), rgba(238, 137, 212, 0) 70%),
    linear-gradient(145deg, rgba(244, 179, 196, .72), rgba(221, 145, 186, .61) 58%, rgba(244, 189, 137, .57));
  --apple-primary-border: rgba(187, 124, 172, .13);
}

html[data-interface-style="crystal"] body {
  background:
    radial-gradient(46rem 36rem at -7% 4%, rgba(76, 203, 229, .25), transparent 66%),
    radial-gradient(42rem 32rem at 28% -9%, rgba(255, 216, 111, .20), transparent 68%),
    radial-gradient(44rem 35rem at 74% -7%, rgba(245, 153, 210, .21), transparent 68%),
    radial-gradient(40rem 34rem at 106% 34%, rgba(170, 136, 232, .20), transparent 67%),
    radial-gradient(42rem 35rem at 93% 105%, rgba(100, 207, 152, .18), transparent 69%),
    radial-gradient(40rem 34rem at 43% 108%, rgba(189, 137, 235, .18), transparent 69%),
    radial-gradient(38rem 32rem at -6% 94%, rgba(255, 179, 105, .18), transparent 68%),
    linear-gradient(145deg, #edf3f2 0%, #f3eef4 50%, #edf1f4 100%) !important;
  background-attachment: fixed !important;
}

/* All real buttons share one translucent material without changing dimensions. */
html body button,
html body input[type="button"],
html body input[type="submit"],
html body input[type="reset"] {
  -webkit-backdrop-filter: blur(18px) saturate(185%) !important;
  backdrop-filter: blur(18px) saturate(185%) !important;
  background: var(--apple-button-surface) !important;
  border-color: var(--apple-button-border) !important;
  box-shadow: var(--apple-button-shadow) !important;
  background-clip: padding-box !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 14px !important;
  color: #182032 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .76);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease !important;
}

/* Several navigation and upload controls are div/label based but behave as buttons. */
html body :is(
  .tab,
  .pt,
  .settings-tab,
  .sp-trigger,
  .order-image-detail-add,
  .order-image-add-small
) {
  -webkit-backdrop-filter: blur(18px) saturate(185%) !important;
  backdrop-filter: blur(18px) saturate(185%) !important;
  background: var(--apple-button-surface) !important;
  border-color: var(--apple-button-border) !important;
  box-shadow: var(--apple-button-shadow) !important;
  background-clip: padding-box !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 14px !important;
  color: #182032 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .76);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

html body :is(.tab, .pt, .settings-tab, .sp-trigger, .order-image-detail-add, .order-image-add-small):hover {
  box-shadow: var(--apple-button-shadow-hover) !important;
  filter: brightness(1.035) saturate(1.06);
}

html body button:hover:not(:disabled),
html body input[type="button"]:hover:not(:disabled),
html body input[type="submit"]:hover:not(:disabled),
html body input[type="reset"]:hover:not(:disabled) {
  box-shadow: var(--apple-button-shadow-hover) !important;
  filter: brightness(1.035) saturate(1.06);
}

html body button:active:not(:disabled),
html body input[type="button"]:active:not(:disabled),
html body input[type="submit"]:active:not(:disabled),
html body input[type="reset"]:active:not(:disabled) {
  box-shadow: inset 0 2px 2px rgba(76, 94, 125, .16), inset 0 -1px 1px rgba(255, 255, 255, .72), 0 2px 5px rgba(44, 67, 105, .10) !important;
  filter: brightness(.97) saturate(.96);
  transform: translateY(1px);
}

html body button:focus-visible,
html body input[type="button"]:focus-visible,
html body input[type="submit"]:focus-visible,
html body input[type="reset"]:focus-visible {
  outline: 2px solid rgba(67, 126, 255, .76) !important;
  outline-offset: 2px !important;
}

html body button:disabled,
html body input[type="button"]:disabled,
html body input[type="submit"]:disabled,
html body input[type="reset"]:disabled {
  opacity: .64 !important;
  filter: saturate(.58) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .65) inset, 0 2px 6px rgba(44, 67, 105, .05) !important;
}

/* Primary actions use the warm liquid-glass accent from the visual reference. */
html body button.primary,
html body button.b-primary,
html body button.btn-primary,
html body button.cp-confirm,
html body button.qoe-btn.primary,
html body button.mobile-result-action,
html body button.embedded-upload-btn,
html body button.qoe-topbar-button,
html body #multi-die-stage-actions button,
html body button.multi-deep-restart,
html body .album-layout-toolbar button.active,
html body .production-print-toolbar button.primary,
html body button[style*="color:#fff"],
html body button[style*="color: #fff"],
html body button[style*="color:white"],
html body button[style*="color: white"],
html body #_login-submit,
html body #quote-to-order-btn,
html body .settings-tab.active {
  background: var(--apple-primary-surface) !important;
  border-color: var(--apple-primary-border) !important;
  color: #182032 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .58) !important;
  box-shadow:
    inset 1px 1.5px 1px rgba(255, 255, 255, .70),
    inset -1px -1.5px 2px rgba(127, 80, 145, .15),
    inset 0 -1px 6px rgba(244, 157, 210, .09),
    inset -2px 0 6px rgba(104, 189, 218, .06),
    0 0 0 1px rgba(255, 242, 248, .14),
    0 5px 12px rgba(84, 66, 96, .09),
    5px 6px 12px rgba(243, 169, 199, .04),
    -5px 6px 11px rgba(91, 184, 216, .035) !important;
}

/* Factory quotation keeps its teal/indigo identity with sufficient contrast. */
html body button.btn.factory,
html body button.mobile-result-action.factory {
  background:
    radial-gradient(105% 96% at 17% -17%, rgba(255, 255, 255, .73) 0 19%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(58% 95% at 102% 96%, rgba(86, 207, 226, .18), transparent 70%),
    radial-gradient(52% 92% at -3% 104%, rgba(192, 142, 239, .16), transparent 70%),
    linear-gradient(145deg, rgba(158, 207, 232, .65), rgba(135, 174, 223, .56) 62%, rgba(166, 147, 219, .51)) !important;
  border-color: rgba(102, 139, 190, .13) !important;
  color: #182032 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .56) !important;
  box-shadow: inset 1px 1.5px 1px rgba(255, 255, 255, .66), inset -1px -1.5px 2px rgba(70, 88, 148, .14), inset 0 -1px 6px rgba(76, 202, 226, .08), 0 0 0 1px rgba(232, 246, 252, .13), 0 5px 12px rgba(63, 77, 118, .085), 5px 6px 12px rgba(87, 194, 216, .04), -5px 6px 11px rgba(192, 146, 223, .035) !important;
}

/* Quick-order header controls sit on a coloured header and need dark glass. */
html body .qoe-head button.qoe-btn.ghost,
html body .qoe-head button.qoe-btn.return {
  background: linear-gradient(180deg, rgba(86, 86, 170, .72), rgba(43, 46, 104, .62)) !important;
  border-color: rgba(255, 255, 255, .30) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .34) !important;
}

/* Image preview controls are displayed on a dark overlay. */
html body .order-image-lightbox-close,
html body .order-image-zoom-controls button {
  background: linear-gradient(180deg, rgba(62, 72, 94, .82), rgba(22, 29, 45, .72)) !important;
  border-color: rgba(255, 255, 255, .25) !important;
  color: #fff !important;
}

/* Selected segmented controls use a lighter blue glass. */
html body button.active:not(.primary):not(.b-primary):not(.btn-primary),
html body .gl-filter-btn.active,
html body .pt.active,
html body .tab.active,
html body .mode-tab.active,
html body .side-mode-btn.active {
  background: radial-gradient(90% 105% at 12% -16%, rgba(255, 255, 255, .72) 0 18%, transparent 58%), radial-gradient(58% 95% at 102% 96%, rgba(132, 170, 198, .11), transparent 70%), linear-gradient(145deg, rgba(228, 235, 242, .42), rgba(191, 207, 224, .25)) !important;
  border-color: rgba(111, 140, 175, .13) !important;
  color: #365b87 !important;
}

/* Semantic success and destructive actions keep their color cues. */
html body button.btn-success,
html body button.b-ok,
html body button.lp-upload-btn {
  background: radial-gradient(92% 105% at 12% -16%, rgba(255, 255, 255, .72) 0 18%, transparent 58%), radial-gradient(58% 95% at 102% 96%, rgba(80, 214, 180, .17), transparent 70%), radial-gradient(50% 90% at -3% 105%, rgba(101, 196, 228, .12), transparent 70%), linear-gradient(145deg, rgba(141, 221, 194, .58), rgba(104, 191, 178, .49)) !important;
  border-color: rgba(75, 151, 132, .12) !important;
  color: #183b37 !important;
  box-shadow: inset 1px 1.5px 1px rgba(255, 255, 255, .64), inset -1px -1.5px 2px rgba(48, 118, 103, .12), inset 0 -1px 6px rgba(67, 205, 174, .07), 0 0 0 1px rgba(232, 250, 244, .12), 0 5px 11px rgba(55, 99, 91, .075), 5px 6px 11px rgba(79, 189, 182, .035) !important;
}

html body button.btn-danger,
html body button.b-bad,
html body button.delete,
html body button.ms-del-btn,
html body .order-image-thumb > button,
html body .pending-order-image > button {
  background: radial-gradient(92% 105% at 12% -16%, rgba(255, 255, 255, .76) 0 18%, transparent 58%), radial-gradient(58% 95% at 102% 96%, rgba(249, 129, 184, .13), transparent 70%), radial-gradient(50% 90% at -3% 105%, rgba(184, 144, 234, .08), transparent 70%), linear-gradient(145deg, rgba(246, 197, 217, .48), rgba(226, 174, 202, .37)) !important;
  border-color: rgba(178, 105, 143, .11) !important;
  color: #743c58 !important;
}

html body .order-image-thumb > button,
html body .pending-order-image > button,
html body .order-image-lightbox-close,
html body .mobile-panel-close,
html body .cp-close {
  border-radius: 999px !important;
}

/* Major app modules use a deeper frosted material. */
html body :is(
  .card,
  .glass-card,
  .sc-card,
  .lp-panel,
  .lp-card,
  .metric,
  .hist-item,
  .qt-page,
  .quick-order-card,
  .gl-drawer,
  .cp-modal-card,
  .qoe-summary-card,
  .qoe-history-panel,
  .qoe-entry,
  .layout-waiting-card,
  .schedule-order-dialog,
  .portrait-lock-card,
  #_login-card
) {
  -webkit-backdrop-filter: blur(26px) saturate(175%) !important;
  backdrop-filter: blur(26px) saturate(175%) !important;
  background: var(--apple-glass-surface) !important;
  border-color: var(--apple-glass-border) !important;
  box-shadow: var(--apple-glass-shadow) !important;
  background-clip: padding-box !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 15px !important;
}

html body :is(.card, .glass-card, .sc-card, .lp-card, .metric, .hist-item):hover {
  box-shadow: var(--apple-glass-shadow-hover) !important;
}

/* Nested parameter and batch blocks are a quieter secondary glass layer. */
html body :is(.field, .ms-row, .qt-client-row, .gl-drawer-head, .qoe-order-fields, .qoe-summary-project) {
  -webkit-backdrop-filter: blur(16px) saturate(165%) !important;
  backdrop-filter: blur(16px) saturate(165%) !important;
  background: radial-gradient(140% 90% at 16% -18%, rgba(255, 255, 255, .92) 0 24%, transparent 60%), linear-gradient(145deg, rgba(255, 255, 255, .52), rgba(229, 238, 251, .30)) !important;
  border-color: rgba(130, 149, 180, .14) !important;
  box-shadow: inset 1px 1.5px 1px rgba(255, 255, 255, .62), inset -1px -1.5px 2px rgba(95, 140, 202, .08), 0 0 0 1px rgba(255, 255, 255, .13), 0 2px 6px rgba(47, 73, 116, .035) !important;
  border-radius: 12px !important;
}

/* Inputs receive the same clear, readable material without changing their behavior. */
html body :is(
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  select,
  textarea
) {
  background: radial-gradient(150% 96% at 18% -26%, rgba(255, 255, 255, .92) 0 24%, transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(228, 238, 252, .32)) !important;
  border-color: rgba(115, 139, 176, .15) !important;
  border-radius: 14px !important;
  box-shadow: inset 1px 1.5px 1px rgba(255, 255, 255, .58), inset -1px -1.5px 2px rgba(80, 126, 193, .08), 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 6px rgba(51, 70, 102, .03) !important;
}

/* Order detail is assembled dynamically with inline-tinted module cards. */
html body .gl-drawer [style*="background:rgba(255,255,255"],
html body .gl-drawer [style*="background: rgba(255,255,255"] {
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(239, 246, 255, .48)) !important;
  border-color: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .88) inset, 0 4px 14px rgba(47, 73, 116, .06) !important;
}

html body .gl-drawer [style*="background:rgba(124,58,237"],
html body .gl-drawer [style*="background:rgba(99,102,241"] {
  -webkit-backdrop-filter: blur(20px) saturate(175%) !important;
  backdrop-filter: blur(20px) saturate(175%) !important;
  background: linear-gradient(145deg, rgba(245, 240, 255, .78), rgba(224, 220, 255, .46)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .82) inset, 0 6px 18px rgba(104, 77, 170, .08) !important;
}

html body .gl-drawer [style*="background:rgba(16,185,129"] {
  -webkit-backdrop-filter: blur(20px) saturate(175%) !important;
  backdrop-filter: blur(20px) saturate(175%) !important;
  background: linear-gradient(145deg, rgba(233, 255, 247, .78), rgba(203, 242, 229, .48)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .82) inset, 0 6px 18px rgba(28, 132, 98, .08) !important;
}

/* Standalone recognition and proofing modules use the same material. */
html body :is(
  article.panel,
  .spec-section,
  .project-section,
  .upload-card,
  .align-sidebar,
  .hint-box,
  .status-box,
  .prog-box
) {
  -webkit-backdrop-filter: blur(24px) saturate(175%) !important;
  backdrop-filter: blur(24px) saturate(175%) !important;
  background: var(--apple-glass-surface-strong) !important;
  border-color: var(--apple-glass-border) !important;
  box-shadow: var(--apple-glass-shadow) !important;
}

/*
 * v8 — integrated milky-glass system.
 * The reference uses one continuous glass surface per module. Controls are
 * recessed into that surface instead of appearing as separate floating pills.
 */
:root {
  --apple-glass-surface:
    radial-gradient(78% 96% at 8% 8%, rgba(206, 238, 230, .36), transparent 66%),
    radial-gradient(70% 92% at 102% 96%, rgba(245, 211, 202, .24), transparent 70%),
    linear-gradient(145deg, rgba(255, 255, 252, .72), rgba(247, 246, 240, .53));
  --apple-glass-surface-strong:
    radial-gradient(82% 104% at 4% 4%, rgba(204, 238, 228, .42), transparent 67%),
    radial-gradient(72% 94% at 101% 99%, rgba(246, 214, 205, .28), transparent 71%),
    linear-gradient(145deg, rgba(255, 255, 252, .82), rgba(247, 246, 240, .62));
  --apple-glass-border: rgba(97, 116, 111, .12);
  --apple-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    inset 0 -1px 0 rgba(122, 139, 134, .08),
    0 0 0 1px rgba(255, 255, 255, .42),
    0 10px 26px rgba(65, 78, 74, .075),
    0 3px 8px rgba(65, 78, 74, .045);
  --apple-glass-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(122, 139, 134, .09),
    0 0 0 1px rgba(255, 255, 255, .50),
    0 11px 28px rgba(65, 78, 74, .08),
    0 3px 9px rgba(65, 78, 74, .05);
  --apple-button-surface:
    radial-gradient(110% 120% at 10% -26%, rgba(255, 255, 255, .90) 0 20%, transparent 60%),
    linear-gradient(145deg, rgba(255, 255, 252, .48), rgba(241, 244, 239, .29));
  --apple-button-border: rgba(95, 117, 111, .10);
  --apple-button-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    inset 0 -1px 0 rgba(92, 116, 109, .08),
    0 3px 8px rgba(66, 81, 76, .055);
  --apple-button-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -1px 0 rgba(92, 116, 109, .09),
    0 5px 11px rgba(66, 81, 76, .07);
  --apple-primary-surface:
    radial-gradient(105% 118% at 14% -22%, rgba(255, 255, 255, .78) 0 20%, transparent 60%),
    linear-gradient(145deg, rgba(182, 229, 216, .78), rgba(148, 207, 195, .58));
  --apple-primary-border: rgba(91, 155, 142, .14);
}

html[data-interface-style="crystal"] body {
  background:
    radial-gradient(58rem 42rem at -8% 4%, rgba(190, 231, 221, .42), transparent 68%),
    radial-gradient(52rem 38rem at 106% 18%, rgba(242, 211, 203, .34), transparent 68%),
    radial-gradient(48rem 34rem at 54% 108%, rgba(215, 234, 225, .28), transparent 70%),
    linear-gradient(145deg, #f4f1eb 0%, #f7f5f0 48%, #f2eee9 100%) !important;
  color: #283533 !important;
}

/* The whole header is the banner; its tabs become connected segments. */
html[data-interface-style="crystal"] body .topbar {
  margin: 6px 8px 0 !important;
  width: auto !important;
  padding: 4px 7px !important;
  gap: 2px !important;
  background:
    radial-gradient(42% 140% at 9% 8%, rgba(187, 229, 217, .40), transparent 72%),
    radial-gradient(36% 130% at 96% 100%, rgba(245, 215, 207, .25), transparent 74%),
    linear-gradient(145deg, rgba(255, 255, 252, .76), rgba(245, 245, 239, .58)) !important;
  border: 1px solid rgba(92, 112, 107, .12) !important;
  border-radius: 17px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .90),
    inset 0 -1px 0 rgba(105, 124, 119, .07),
    0 0 0 1px rgba(255, 255, 255, .42),
    0 8px 22px rgba(66, 78, 74, .07) !important;
}

html[data-interface-style="crystal"] body .topbar-secondary-group {
  gap: 0 !important;
  padding: 2px !important;
  background: rgba(255, 255, 252, .22) !important;
  border: 1px solid rgba(98, 118, 112, .07) !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px 2px rgba(79, 96, 91, .04) !important;
}

html[data-interface-style="crystal"] body .topbar :is(.tab, .topbar-more-btn, .interface-style-toggle) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  color: #34413f !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

html[data-interface-style="crystal"] body .topbar .tab:hover:not(.active) {
  background: rgba(255, 255, 252, .28) !important;
  color: #263331 !important;
}

html[data-interface-style="crystal"] body .topbar .tab.active {
  background:
    radial-gradient(105% 130% at 12% -25%, rgba(255, 255, 255, .82) 0 20%, transparent 62%),
    linear-gradient(145deg, rgba(178, 226, 214, .76), rgba(149, 205, 193, .52)) !important;
  border: 1px solid rgba(87, 147, 135, .12) !important;
  color: #25463f !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .80),
    inset 0 -1px 0 rgba(67, 128, 116, .08),
    0 3px 8px rgba(58, 103, 94, .08) !important;
}

/* One calm material language for every large module. */
html[data-interface-style="crystal"] body :is(
  .card,
  .glass-card,
  .sc-card,
  .lp-panel,
  .lp-card,
  .metric,
  .hist-item,
  .qt-page,
  .quick-order-card,
  .gl-drawer,
  .cp-modal-card,
  .qoe-summary-card,
  .qoe-history-panel,
  .qoe-entry,
  article.panel,
  .spec-section,
  .project-section,
  .upload-card,
  .align-sidebar,
  .hint-box,
  .status-box,
  .prog-box
) {
  border-color: var(--apple-glass-border) !important;
  border-radius: 18px !important;
  background: var(--apple-glass-surface) !important;
  box-shadow: var(--apple-glass-shadow) !important;
  transform: none !important;
}

html[data-interface-style="crystal"] body :is(.card, .glass-card, .sc-card, .lp-card, .metric, .hist-item):hover {
  box-shadow: var(--apple-glass-shadow-hover) !important;
  transform: none !important;
}

html[data-interface-style="crystal"] body :is(.card-title, .cost-detail-title) {
  color: #42504d !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .70) !important;
}

/* Specification rows are shared trays; fields no longer float like stickers. */
html[data-interface-style="crystal"] body :is(
  #product-info-card .product-info-grid,
  #spec-box > .row,
  #spec-card > .row,
  #spec-label > .row
) {
  padding: 5px !important;
  background: linear-gradient(145deg, rgba(255, 255, 252, .30), rgba(237, 242, 236, .16)) !important;
  border: 1px solid rgba(102, 121, 115, .07) !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px 2px rgba(76, 94, 88, .035), inset 0 1px 0 rgba(255, 255, 255, .56) !important;
}

html[data-interface-style="crystal"] body :is(
  #product-info-card .field,
  #spec-box .field,
  #spec-card .field,
  #spec-label .field
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html[data-interface-style="crystal"] body :is(
  #product-info-card .field,
  #spec-box .field,
  #spec-card .field,
  #spec-label .field
):focus-within {
  background: rgba(255, 255, 252, .19) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-interface-style="crystal"] body :is(
  #product-info-card .field,
  #spec-box .field,
  #spec-card .field,
  #spec-label .field
) label {
  color: #5c6865 !important;
  text-shadow: none !important;
}

html[data-interface-style="crystal"] body :is(
  #product-info-card .field,
  #spec-box .field,
  #spec-card .field,
  #spec-label .field
) :is(input, select, textarea, .sp-trigger) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(180deg, rgba(255, 255, 252, .52), rgba(239, 242, 236, .28)) !important;
  border: 1px solid rgba(95, 116, 110, .09) !important;
  border-radius: 9px !important;
  color: #2d3a37 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), inset 0 1px 3px rgba(76, 92, 87, .035) !important;
}

/* Buttons remain crystalline, but use the same low-contrast ivory palette. */
html[data-interface-style="crystal"] body :is(button, input[type="button"], input[type="submit"], input[type="reset"]) {
  color: #2d3a37 !important;
  background: var(--apple-button-surface) !important;
  border-color: var(--apple-button-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--apple-button-shadow) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72) !important;
}

html[data-interface-style="crystal"] body :is(button, input[type="button"], input[type="submit"], input[type="reset"]):hover:not(:disabled) {
  box-shadow: var(--apple-button-shadow-hover) !important;
  filter: brightness(1.015) !important;
  transform: none !important;
}

html[data-interface-style="crystal"] body :is(button, input[type="button"], input[type="submit"], input[type="reset"]):active:not(:disabled) {
  box-shadow: inset 0 2px 4px rgba(66, 86, 79, .10), inset 0 1px 0 rgba(255, 255, 255, .62) !important;
  filter: none !important;
  transform: none !important;
}

html[data-interface-style="crystal"] body :is(
  button.primary,
  button.b-primary,
  button.btn-primary,
  button.cp-confirm,
  button.qoe-btn.primary,
  button.mobile-result-action,
  button.embedded-upload-btn,
  button.qoe-topbar-button,
  #multi-die-stage-actions button,
  button.multi-deep-restart,
  #_login-submit,
  #quote-to-order-btn
) {
  background: var(--apple-primary-surface) !important;
  border-color: var(--apple-primary-border) !important;
  color: #25443e !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80), inset 0 -1px 0 rgba(65, 126, 114, .08), 0 4px 10px rgba(55, 99, 90, .075) !important;
}

html[data-interface-style="crystal"] body button.btn.factory,
html[data-interface-style="crystal"] body button.mobile-result-action.factory {
  background:
    radial-gradient(100% 120% at 14% -25%, rgba(255, 255, 255, .80) 0 20%, transparent 60%),
    linear-gradient(145deg, rgba(240, 222, 212, .68), rgba(225, 207, 198, .47)) !important;
  border-color: rgba(149, 120, 109, .10) !important;
  color: #4b3e39 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), inset 0 -1px 0 rgba(130, 99, 88, .06), 0 4px 10px rgba(93, 73, 66, .06) !important;
}

html[data-interface-style="crystal"] body :is(button.btn-success, button.b-ok, button.lp-upload-btn) {
  background: linear-gradient(145deg, rgba(193, 229, 218, .68), rgba(162, 209, 196, .48)) !important;
  border-color: rgba(86, 148, 132, .10) !important;
  color: #295047 !important;
}

html[data-interface-style="crystal"] body :is(button.btn-danger, button.b-bad, button.delete, button.ms-del-btn) {
  background: linear-gradient(145deg, rgba(244, 222, 215, .66), rgba(232, 203, 196, .46)) !important;
  border-color: rgba(162, 111, 99, .10) !important;
  color: #754c43 !important;
}

/* The quotation footer mirrors the reference segmented-control tray. */
html[data-interface-style="crystal"] body .quote-main-actions {
  gap: 0 !important;
  padding: 4px !important;
  background:
    radial-gradient(58% 160% at 10% 0%, rgba(200, 234, 224, .30), transparent 72%),
    radial-gradient(46% 150% at 100% 100%, rgba(242, 215, 207, .20), transparent 74%),
    linear-gradient(145deg, rgba(255, 255, 252, .62), rgba(244, 244, 238, .43)) !important;
  border: 1px solid rgba(98, 118, 112, .11) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), inset 0 -1px 0 rgba(98, 116, 111, .06), 0 7px 20px rgba(65, 78, 74, .065) !important;
}

html[data-interface-style="crystal"] body .quote-main-actions .btn {
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid rgba(91, 111, 105, .08) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: #34423f !important;
  transform: none !important;
}

html[data-interface-style="crystal"] body .quote-main-actions .btn:first-child {
  border-left: 0 !important;
  background: linear-gradient(145deg, rgba(184, 227, 216, .72), rgba(154, 207, 194, .50)) !important;
  color: #25443e !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 3px 8px rgba(57, 102, 92, .065) !important;
}

html[data-interface-style="crystal"] body .quote-main-actions .btn:nth-child(3) {
  background: linear-gradient(145deg, rgba(244, 228, 220, .42), rgba(232, 215, 207, .26)) !important;
}

html[data-interface-style="crystal"] body .quote-main-actions .btn:hover:not(:disabled) {
  background: rgba(255, 255, 252, .32) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64) !important;
}

html[data-interface-style="crystal"] body .quote-main-actions .btn:first-child:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(190, 232, 221, .78), rgba(158, 211, 198, .56)) !important;
}

/* Controls on dark media overlays keep their necessary white contrast. */
html[data-interface-style="crystal"] body :is(.order-image-lightbox-close, .order-image-zoom-controls button) {
  background: linear-gradient(180deg, rgba(62, 72, 82, .82), rgba(31, 39, 47, .74)) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .30) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --apple-glass-surface: linear-gradient(145deg, rgba(48, 57, 76, .74), rgba(27, 34, 50, .54));
    --apple-glass-surface-strong: linear-gradient(145deg, rgba(55, 65, 86, .82), rgba(29, 36, 53, .64));
    --apple-glass-border: rgba(255, 255, 255, .14);
    --apple-glass-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, 0 -1px 0 rgba(0, 0, 0, .20) inset, 0 12px 30px rgba(0, 0, 0, .26), 0 2px 8px rgba(0, 0, 0, .20);
    --apple-glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, .13) inset, 0 -1px 0 rgba(0, 0, 0, .22) inset, 0 16px 36px rgba(0, 0, 0, .32), 0 3px 10px rgba(0, 0, 0, .22);
    --apple-button-surface: linear-gradient(180deg, rgba(72, 83, 105, .76), rgba(42, 50, 68, .58));
    --apple-button-border: rgba(255, 255, 255, .16);
    --apple-button-shadow: 0 1px 0 rgba(255, 255, 255, .13) inset, 0 -1px 0 rgba(0, 0, 0, .22) inset, 0 6px 16px rgba(0, 0, 0, .22);
    --apple-button-shadow-hover: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 -1px 0 rgba(0, 0, 0, .25) inset, 0 9px 22px rgba(0, 0, 0, .30);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body button,
  html body input[type="button"],
  html body input[type="submit"],
  html body input[type="reset"] {
    transition: none !important;
  }
}

/* Compact user-selected pastel theme for the fresh interface. */
:root {
  --fresh-theme-hue: 158;
  --fresh-theme-soft: hsl(var(--fresh-theme-hue) 54% 85% / .76);
  --fresh-theme-soft-2: hsl(calc(var(--fresh-theme-hue) + 18) 48% 88% / .56);
  --fresh-theme-wash: hsl(var(--fresh-theme-hue) 56% 80% / .38);
  --fresh-theme-border: hsl(var(--fresh-theme-hue) 30% 43% / .13);
  --fresh-theme-text: hsl(var(--fresh-theme-hue) 31% 27%);
  --apple-glass-surface:
    radial-gradient(78% 96% at 8% 8%, var(--fresh-theme-wash), transparent 66%),
    radial-gradient(70% 92% at 102% 96%, var(--fresh-theme-soft-2), transparent 70%),
    linear-gradient(145deg, rgba(255, 255, 252, .72), rgba(247, 246, 240, .53));
  --apple-glass-surface-strong:
    radial-gradient(82% 104% at 4% 4%, hsl(var(--fresh-theme-hue) 56% 80% / .44), transparent 67%),
    radial-gradient(72% 94% at 101% 99%, var(--fresh-theme-soft-2), transparent 71%),
    linear-gradient(145deg, rgba(255, 255, 252, .82), rgba(247, 246, 240, .62));
  --apple-glass-border: var(--fresh-theme-border);
  --apple-button-surface:
    radial-gradient(110% 120% at 10% -26%, rgba(255, 255, 255, .90) 0 20%, transparent 60%),
    linear-gradient(145deg, rgba(255, 255, 252, .48), hsl(var(--fresh-theme-hue) 42% 89% / .34));
  --apple-button-border: hsl(var(--fresh-theme-hue) 29% 42% / .11);
  --apple-primary-surface:
    radial-gradient(105% 118% at 14% -22%, rgba(255, 255, 255, .78) 0 20%, transparent 60%),
    linear-gradient(145deg, hsl(var(--fresh-theme-hue) 60% 83% / .84), hsl(var(--fresh-theme-hue) 50% 74% / .64));
  --apple-primary-border: hsl(var(--fresh-theme-hue) 39% 43% / .15);
}

html[data-interface-style="crystal"] body {
  background:
    radial-gradient(58rem 42rem at -8% 4%, hsl(var(--fresh-theme-hue) 58% 80% / .44), transparent 68%),
    radial-gradient(52rem 38rem at 106% 18%, hsl(calc(var(--fresh-theme-hue) + 24) 48% 86% / .34), transparent 68%),
    radial-gradient(48rem 34rem at 54% 108%, hsl(calc(var(--fresh-theme-hue) - 18) 44% 84% / .28), transparent 70%),
    linear-gradient(145deg, #f4f2ed 0%, #f8f6f1 48%, #f3f0eb 100%) !important;
}

html[data-interface-style="crystal"] body .topbar {
  background:
    radial-gradient(42% 140% at 9% 8%, hsl(var(--fresh-theme-hue) 56% 80% / .42), transparent 72%),
    radial-gradient(36% 130% at 96% 100%, hsl(calc(var(--fresh-theme-hue) + 22) 44% 87% / .27), transparent 74%),
    linear-gradient(145deg, rgba(255, 255, 252, .76), rgba(245, 245, 239, .58)) !important;
}

html[data-interface-style="crystal"] body .topbar .tab.active {
  background:
    radial-gradient(105% 130% at 12% -25%, rgba(255, 255, 255, .82) 0 20%, transparent 62%),
    linear-gradient(145deg, hsl(var(--fresh-theme-hue) 58% 83% / .80), hsl(var(--fresh-theme-hue) 47% 74% / .58)) !important;
  border-color: hsl(var(--fresh-theme-hue) 38% 42% / .13) !important;
  color: var(--fresh-theme-text) !important;
}

html[data-interface-style="crystal"] body :is(
  button.primary,
  button.b-primary,
  button.btn-primary,
  button.cp-confirm,
  button.qoe-btn.primary,
  button.mobile-result-action,
  button.embedded-upload-btn,
  button.qoe-topbar-button,
  #multi-die-stage-actions button,
  button.multi-deep-restart,
  #_login-submit,
  #quote-to-order-btn
) {
  color: var(--fresh-theme-text) !important;
}

html[data-interface-style="crystal"] body .quote-main-actions .btn:first-child {
  background: linear-gradient(145deg, hsl(var(--fresh-theme-hue) 58% 83% / .77), hsl(var(--fresh-theme-hue) 48% 74% / .56)) !important;
  color: var(--fresh-theme-text) !important;
}

html[data-interface-style="crystal"] body .interface-style-stack {
  background:
    radial-gradient(115% 100% at 8% 0%, rgba(255,255,255,.72), transparent 58%),
    linear-gradient(145deg, hsl(var(--fresh-theme-hue) 56% 88% / .68), hsl(var(--fresh-theme-hue) 48% 82% / .46)) !important;
  border-color:hsl(var(--fresh-theme-hue) 38% 46% / .14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 3px 10px hsl(var(--fresh-theme-hue) 35% 38% / .08) !important;
}

html[data-interface-style="crystal"] body .interface-style-stack #theme-btn {
  color:var(--fresh-theme-text) !important;
}
/* Fresh specification selects keep their native behavior but gain a visible glass cue. */
html[data-interface-style="crystal"] body :is(
  #product-info-card .field,
  #spec-box .field,
  #spec-card .field,
  #spec-label .field
) select:not([multiple]) {
  -webkit-appearance:none!important;
  appearance:none!important;
  padding-right:40px!important;
  cursor:pointer!important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9.25' fill='%23fff' fill-opacity='.42' stroke='%2378928b' stroke-opacity='.25'/%3E%3Cpath d='M7.7 9.4 11 12.6l3.3-3.2' fill='none' stroke='%23475c56' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.8 6.2c1.55-1.18 4.75-1.58 6.55-.68' fill='none' stroke='%23fff' stroke-opacity='.78' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,252,.52),rgba(239,242,236,.28))!important;
  background-repeat:no-repeat,no-repeat!important;
  background-position:right 8px center,0 0!important;
  background-size:22px 22px,100% 100%!important;
}

html[data-interface-style="crystal"] body :is(
  #product-info-card .field,
  #spec-box .field,
  #spec-card .field,
  #spec-label .field
) select:not([multiple]):hover {
  background-size:23px 23px,100% 100%!important;
}

html[data-interface-style="crystal"] body :is(#bx-sp-trigger,#sp-trigger,#lb-sp-trigger) {
  position:relative!important;
  padding-right:40px!important;
  cursor:pointer!important;
}

html[data-interface-style="crystal"] body :is(#bx-sp-trigger,#sp-trigger,#lb-sp-trigger)::after {
  content:"";
  position:absolute;
  z-index:1;
  right:8px;
  top:50%;
  width:22px;
  height:22px;
  transform:translateY(-50%);
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9.25' fill='%23fff' fill-opacity='.42' stroke='%2378928b' stroke-opacity='.25'/%3E%3Cpath d='M7.7 9.4 11 12.6l3.3-3.2' fill='none' stroke='%23475c56' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.8 6.2c1.55-1.18 4.75-1.58 6.55-.68' fill='none' stroke='%23fff' stroke-opacity='.78' stroke-linecap='round'/%3E%3C/svg%3E") center/22px 22px no-repeat;
  transition:transform .16s ease,filter .16s ease;
}

html[data-interface-style="crystal"] body :is(#bx-sp-trigger,#sp-trigger,#lb-sp-trigger):hover::after {
  transform:translateY(-50%) scale(1.05);
  filter:brightness(1.04) saturate(1.08);
}