/* Shared OKLCH interface palette. Product artwork and hardware keep their own colors. */
:root, :root[data-ui-theme="light"], :root[data-ui-theme="dark"] {
  color-scheme: light;
  background: var(--ui-page);
  --ui-page: oklch(89.4% .013 78);
  --ui-wall-texture: url("/assets/wall-texture-light-v1.webp");
  --ui-ink: oklch(23% .012 255);
  --ui-muted: oklch(46% .014 255);
  --ui-glass: oklch(100% 0 0 / .25);
  --ui-glass-hover: oklch(100% 0 0 / .46);
  --ui-sheet: oklch(97.5% .004 255 / .9);
  --ui-solid: oklch(97% .005 255);
  --ui-field: oklch(100% 0 0 / .62);
  --ui-field-line: oklch(60% .012 255);
  --ui-line: oklch(35% .012 255 / .18);
  --ui-highlight: oklch(100% 0 0 / .86);
  --ui-shadow: oklch(22% .02 255 / .09);
  --ui-accent: oklch(54% .22 27);
  --ui-accent-hover: oklch(48% .2 27);
  --ui-on-accent: oklch(100% 0 0);
  --ui-focus: oklch(50% .2 255);
  --ui-selected: oklch(54% .14 255 / .12);
  --ui-notice: oklch(93% .06 85);
  --ui-notice-ink: oklch(38% .065 70);
  --ui-backdrop: oklch(18% .012 255 / .25);
  --ui-glass-shadow: inset 0 1px 0 var(--ui-highlight), 0 3px 8px var(--ui-shadow), 0 12px 28px oklch(20% .01 255 / .03);
  --page: var(--ui-page);
  --surface: var(--ui-solid);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --strong-line: var(--ui-line);
  --focus: var(--ui-focus);
}
:root[data-ui-theme="dark"] {
  color-scheme: dark;
  --ui-page: oklch(35.6% 0 0);
  --ui-wall-texture: url("/assets/wall-texture-dark-v1.webp");
  --ui-ink: oklch(95% .006 255);
  --ui-muted: oklch(76% .013 255);
  --ui-glass: oklch(34% .012 255 / .24);
  --ui-glass-hover: oklch(42% .015 255 / .42);
  --ui-sheet: oklch(25% .01 255 / .94);
  --ui-solid: oklch(28% .01 255);
  --ui-field: oklch(19% .009 255 / .48);
  --ui-field-line: oklch(60% .012 255);
  --ui-line: oklch(85% .01 255 / .19);
  --ui-highlight: oklch(100% 0 0 / .15);
  --ui-shadow: oklch(0% 0 0 / .22);
  --ui-focus: oklch(78% .13 255);
  --ui-selected: oklch(78% .13 255 / .18);
  --ui-notice: oklch(34% .045 75);
  --ui-notice-ink: oklch(91% .07 85);
  --ui-backdrop: oklch(8% .01 255 / .55);
}
html { background: var(--ui-page); }
body[data-simple-studio="true"], body.commerce-page, body.legal-page {
  --simple-ink: var(--ui-ink);
  --simple-muted: var(--ui-muted);
  --commerce-ink: var(--ui-ink);
  --commerce-paper: var(--ui-sheet);
  --commerce-line: var(--ui-line);
  --commerce-red: var(--ui-accent);
  color: var(--ui-ink);
  background: var(--ui-page);
  isolation: isolate;
}
/* A fixed decorative layer avoids tiled seams and mobile fixed-background resizing.
   Only the active theme's compressed image is requested; it never affects layout. */
:is(body[data-simple-studio="true"], body.commerce-page, body.legal-page)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .6;
  background: var(--ui-wall-texture) center / cover no-repeat;
}
button, input, select, textarea { accent-color: var(--ui-focus); }
button, summary, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
body :is(button, a, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 4px;
}
/* Self-hosted Tabler outline icons, shared by static and generated controls. */
.ui-icon { display: inline-block; width: 22px; height: 22px; flex: none; background: currentColor; mask: var(--ui-icon) center / contain no-repeat; -webkit-mask: var(--ui-icon) center / contain no-repeat; }
.icon-user { --ui-icon: url("/assets/icon-user.svg"); }
.icon-sun { --ui-icon: url("/assets/icon-sun.svg"); }
.icon-moon { --ui-icon: url("/assets/icon-moon.svg"); }
.icon-cart { --ui-icon: url("/assets/icon-shopping-cart.svg"); }
.icon-undo { --ui-icon: url("/assets/icon-arrow-back-up.svg"); }
.icon-upload { --ui-icon: url("/assets/icon-upload.svg"); }
.icon-x { --ui-icon: url("/assets/icon-x.svg"); }
.icon-chevron { --ui-icon: url("/assets/icon-chevron-down.svg"); }
.icon-angle { --ui-icon: url("/assets/icon-rotate-3d.svg"); }
.theme-toggle { box-sizing: border-box; }
.theme-toggle, body[data-simple-studio="true"] .topbar #theme-button,
body[data-simple-studio="true"] .topbar .brand-mark-link,
body[data-simple-studio="true"] .topbar #buy-action,
body[data-simple-studio="true"] #studio-signin, #studio-profile {
  display: inline-grid; place-items: center; position: relative;
  flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 0; border: 1px solid var(--ui-highlight); border-radius: 50%;
  color: var(--ui-ink); background: var(--ui-glass); box-shadow: var(--ui-glass-shadow);
  backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25);
  pointer-events: auto; cursor: pointer; transition: background .16s, box-shadow .16s;
}
.theme-toggle:hover, body[data-simple-studio="true"] .topbar :is(#theme-button, #buy-action, #studio-signin, .brand-mark-link):hover,
#studio-profile:hover { background: var(--ui-glass-hover); }
body[data-simple-studio="true"] .topbar #theme-button { grid-column: 1; grid-row: 1; justify-self: end; }
body[data-simple-studio="true"] .topbar .brand-mark-link { grid-column: 1; grid-row: 1; justify-self: start; }
body[data-simple-studio="true"] .topbar .brand-mark-link .brand-mark { display: block; width: 26px; height: 26px; }
.theme-toggle .icon-sun, :root[data-ui-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-ui-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
body[data-simple-studio="true"] #studio-signin[hidden] { display: none; }
#studio-signin[aria-busy="true"] { opacity: .6; cursor: wait; }
.studio-header-actions { gap: 8px; }
.studio-avatar-initials { color: var(--ui-ink); background: var(--ui-solid); }
:root[data-ui-theme="dark"] :is(.brand-mark, .brand-wordmark, .commerce-header > a > img) { filter: invert(1); }
.cart-count { top: -4px; right: -4px; color: var(--ui-on-accent); background: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-page); }
.studio-account-menu { color: var(--ui-ink); background: var(--ui-sheet); border-color: var(--ui-highlight); box-shadow: var(--ui-glass-shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.studio-account-menu :is(a,button):hover { background: var(--ui-glass-hover); }

/* Glass is concentrated on interactive surfaces, with quiet space around the clock. */
body[data-simple-studio="true"] :is(#undo-design, #preview-angle-toggle) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px; border: 1px solid var(--ui-highlight); border-radius: 24px;
  color: var(--ui-ink); background: var(--ui-glass); box-shadow: var(--ui-glass-shadow);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
body[data-simple-studio="true"] #preview-angle-toggle[aria-pressed="true"] { background: var(--ui-selected); text-decoration: none; border-color: var(--ui-focus); }
body[data-simple-studio="true"] #design-save-status { flex: 1; min-width: 0; color: var(--ui-muted); font-size: 12px; }
body[data-simple-studio="true"] #reset-tilt {
  position: static; flex: none; transform: none; color: var(--ui-ink);
  background: var(--ui-glass); border-color: var(--ui-highlight); box-shadow: var(--ui-glass-shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body[data-simple-studio="true"] #reset-tilt:not(:disabled):hover { background: var(--ui-glass-hover); transform: none; }
body[data-simple-studio="true"] .simple-radial-controls { padding: 4px 16px; border: 1px solid var(--ui-highlight); border-radius: 24px; background: var(--ui-glass); box-shadow: var(--ui-glass-shadow); backdrop-filter: blur(8px) saturate(1.15); -webkit-backdrop-filter: blur(8px) saturate(1.15); }
body[data-simple-studio="true"] .simple-radial-control { border-color: var(--ui-line); }
body[data-simple-studio="true"] .simple-radial-control:first-child { border-top: 0; }
body[data-simple-studio="true"] .radial-category-label { padding-block: 12px; min-height: 76px; border-radius: 16px; }
/* A rounded, inset glass edge makes keyboard focus distinct from a chosen design. */
body[data-simple-studio="true"] .radial-category-label:focus-visible {
  outline: 2px solid var(--ui-ink) !important;
  outline-offset: -2px;
  background: var(--ui-glass-hover);
}
:root[data-studio-input="pointer"] body[data-simple-studio="true"] .radial-category-label:focus-visible {
  outline: none !important;
  background: transparent;
}
@media (hover: hover) {
  body[data-simple-studio="true"] .radial-category-label:hover { background: var(--ui-glass-hover); }
}
body[data-simple-studio="true"] .selector-chevron { color: var(--ui-ink); }
body[data-simple-studio="true"] :is(.radial-option-label, .layout-preset-copy, .choice-copy, .contrast-control, .appearance-auto-control, .appearance-more, .selector-upload) { color: var(--ui-ink); }
body[data-simple-studio="true"] :is(.upload-quality, .contrast-help) { color: var(--ui-muted); }
body[data-simple-studio="true"] .selector-upload > span:first-child { color: var(--ui-ink); background: var(--ui-glass); border: 1px solid var(--ui-highlight); box-shadow: var(--ui-glass-shadow); }
body[data-simple-studio="true"] :is(.radial-option-visual, .layout-preset-visual, .choice-visual) { box-shadow: 0 2px 6px var(--ui-shadow); }
body[data-simple-studio="true"] .radial-option input:checked + .radial-option-visual,
body[data-simple-studio="true"] .layout-preset-choice input:checked + .layout-preset-visual,
body[data-simple-studio="true"] .appearance-combination-choice input:checked + .choice-visual { outline-color: var(--ui-ink); }
body[data-simple-studio="true"] #appearance-options .radial-tray-heading { display: none; }
body[data-simple-studio="true"] #contrast-range { height: 44px; accent-color: var(--ui-focus); }
body[data-simple-studio="true"] .appearance-more summary { display: flex; align-items: center; gap: 8px; list-style: none; }
body[data-simple-studio="true"] .appearance-more summary::-webkit-details-marker { display: none; }
body[data-simple-studio="true"] .appearance-more summary::before { content: ""; width: 16px; height: 16px; background: currentColor; mask: url("/assets/icon-chevron-down.svg") center / contain no-repeat; -webkit-mask: url("/assets/icon-chevron-down.svg") center / contain no-repeat; }
body[data-simple-studio="true"] .appearance-more[open] summary::before { transform: rotate(180deg); }
body[data-simple-studio="true"] .upload-review-details { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; padding: 0; border: 0; }
body[data-simple-studio="true"] .upload-review-details .upload-rights { display: block; flex: 1; min-height: 0; margin: 0; color: var(--ui-muted); font-size: 12px; line-height: 1.4; }
body[data-simple-studio="true"] .selector-replace-upload { flex: none; margin-inline-start: auto; min-height: 44px; padding: 0 10px; border: 1px solid var(--ui-highlight); border-radius: 14px; background: var(--ui-glass); color: var(--ui-ink); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
body[data-simple-studio="true"] .selector-replace-upload:hover { background: var(--ui-glass-hover); }
body[data-simple-studio="true"] #hands-color { color: var(--ui-ink); background: var(--ui-field); border-color: var(--ui-field-line); border-radius: 12px; }
body[data-simple-studio="true"] .studio-purchase { border-color: var(--ui-highlight); background: var(--ui-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body[data-simple-studio="true"] #review-clock-action, .clock-cart .commerce-primary, .commerce-page .commerce-primary {
  color: var(--ui-on-accent); background: linear-gradient(oklch(100% 0 0 / .1), transparent), var(--ui-accent);
  border: 1px solid oklch(100% 0 0 / .24); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .22), 0 4px 12px oklch(35% .1 27 / .15);
}
body[data-simple-studio="true"] #review-clock-action:hover, .clock-cart .commerce-primary:hover, .commerce-page .commerce-primary:hover { background-color: var(--ui-accent-hover); }
body[data-simple-studio="true"] #status[data-toast="true"]:not(:empty) { background: var(--ui-sheet); color: var(--ui-ink); border: 1px solid var(--ui-line); box-shadow: var(--ui-glass-shadow); }

.clock-cart { --commerce-ink: var(--ui-ink); --commerce-paper: var(--ui-sheet); --commerce-line: var(--ui-line); --commerce-red: var(--ui-accent); }
dialog.clock-cart { border-left: 1px solid var(--ui-highlight); background: var(--ui-sheet); box-shadow: -12px 0 60px var(--ui-shadow); backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3); }
.clock-cart::backdrop { background: var(--ui-backdrop); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cart-header { background: var(--ui-sheet); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.clock-cart #cart-status { color: var(--ui-muted); }
.clock-cart button, .commerce-page button, .ops-nav a {
  color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 14px;
  background: var(--ui-glass); box-shadow: inset 0 1px 0 var(--ui-highlight), 0 2px 4px var(--ui-shadow);
}
.clock-cart button:hover, .commerce-page button:hover, .ops-nav a:hover { background: var(--ui-glass-hover); }
.clock-cart .commerce-icon { display: grid; place-items: center; border: 1px solid var(--ui-highlight); border-radius: 50%; background: var(--ui-glass); }
.clock-cart :is(.cart-item p, .google-maps-attribution), .cart-shipping .shipping-feedback, .commerce-dev { color: var(--ui-muted); }
.clock-cart .cart-item .cart-price { color: var(--ui-ink); }
.cart-shipping input, .commerce-page :is(input,textarea,select) { color: var(--ui-ink); background: var(--ui-field); border-color: var(--ui-field-line); border-radius: 12px; box-shadow: inset 0 1px 3px var(--ui-shadow); }
.clock-cart a { color: var(--ui-focus); text-underline-offset: 3px; }
.cart-shipping input::placeholder, .commerce-page :is(input,textarea)::placeholder { color: var(--ui-muted); }
.cart-shipping .shipping-suggestions, .cart-address-review { background: var(--ui-solid); color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-line); }
.commerce-check input { accent-color: var(--ui-focus); }
.commerce-notice, .cart-edit-banner { background: var(--ui-notice); color: var(--ui-notice-ink); }
.order-card, .order-detail { background: var(--ui-glass); border: 1px solid var(--ui-highlight); box-shadow: var(--ui-glass-shadow); }
.order-meta span, .ops-avatar { background: var(--ui-field); }
.ops-nav { padding: 6px; width: fit-content; border-radius: 22px; background: var(--ui-glass); border: 1px solid var(--ui-highlight); box-shadow: var(--ui-glass-shadow); }
.ops-nav a { box-shadow: none; border-color: transparent; }
.ops-nav a[aria-current="page"] { color: var(--ui-ink); background: var(--ui-glass-hover); box-shadow: var(--ui-glass-shadow); border-color: var(--ui-line); }
.commerce-header .theme-toggle { border-radius: 50%; padding: 0; }
.legal-header nav { align-items: center; }
.legal-header nav a, .legal-footer a, .commerce-legal a { min-height: 44px; display: inline-flex; align-items: center; }
.legal-updated { color: var(--ui-muted); }
.legal-footer, .commerce-legal { border-color: var(--ui-line); }
body[data-simple-studio="true"] .studio-footer { gap: 16px; margin: 4px 0 0; padding: 0; border: 0; font-size: 12px; }
body[data-simple-studio="true"] .studio-footer a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; color: var(--ui-muted); text-decoration: none; }
body[data-simple-studio="true"] .studio-footer a:hover { color: var(--ui-ink); }
@media (min-width: 980px), (min-width: 760px) and (max-height: 500px) {
  body[data-simple-studio="true"] .studio-purchase { border: 0; padding-top: 8px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body[data-simple-studio="true"] .studio-footer { justify-content: flex-start; }
}
@media (min-width: 980px) and (max-height: 760px) {
  body[data-simple-studio="true"] .radial-category-label { min-height: 60px; padding-block: 8px; }
  body[data-simple-studio="true"] .simple-radial-control .layout-preset-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
  body[data-simple-studio="true"] .layout-preset-visual { width: 52px; height: 52px; }
  body[data-simple-studio="true"] .simple-radial-controls :is(.radial-option-tray,.dial-editor) { padding-bottom: 10px; }
  body[data-simple-studio="true"] .studio-purchase { margin-top: 4px; padding-top: 4px; }
}
@media (min-width: 980px) and (max-height: 660px) {
  body[data-simple-studio="true"] .app-shell { padding-bottom: 4px; }
  body[data-simple-studio="true"] .topbar { height: 56px; }
  body[data-simple-studio="true"] .studio-intro { display: flex; align-items: baseline; gap: 12px; margin: 2px 0 8px; }
  body[data-simple-studio="true"] .studio-intro h1 { font-size: 26px; }
  body[data-simple-studio="true"] .studio-intro p { font-size: 14px; margin: 0; }
  body[data-simple-studio="true"] .radial-category-label { min-height: 56px; }
  body[data-simple-studio="true"] .simple-radial-controls :is(.radial-option-tray,.dial-editor) { padding-bottom: 8px; }
  body[data-simple-studio="true"] :is(.radial-option-visual,.selector-upload > span:first-child) { width: 52px; height: 52px; }
}
@media (max-width: 430px) {
  body[data-simple-studio="true"] .topbar { grid-template-columns: 92px minmax(0,1fr) 92px; }
  body[data-simple-studio="true"] .brand-wordmark { width: min(100%,100px); }
  .studio-header-actions { gap: 4px; }
  body[data-simple-studio="true"] .simple-radial-controls { padding-inline: 12px; }
  body[data-simple-studio="true"] :is(#undo-design,#preview-angle-toggle) { padding-inline: 10px; }
  body[data-simple-studio="true"] #preview-angle-toggle .ui-icon { display: none; }
  .commerce-header { flex-wrap: wrap; gap: 12px; }
  .commerce-header h1 { flex-basis: calc(100% - 72px); }
  .legal-header { align-items: center; }
  .legal-header nav { gap: 12px; }
}
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-ui-theme] { --ui-glass: var(--ui-solid); --ui-sheet: var(--ui-solid); --ui-field: var(--ui-solid); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, body[data-simple-studio="true"] .topbar :is(#theme-button,#buy-action,#studio-signin) { transition: none; }
}
@media (forced-colors: active) {
  :root, :root[data-ui-theme] { --ui-wall-texture: none; }
  .ui-icon { forced-color-adjust: none; background: ButtonText; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-ui-theme] { --ui-glass: var(--ui-solid); --ui-sheet: var(--ui-solid); }
}