/* Material hierarchy over the existing app styles. Geometry, semantic action
   colours, the quota rail silhouette and business artwork remain app-owned. */
html, .sb-preview {
  --slg-tint: rgb(255 255 255 / calc(.56 - .34 * var(--sa-strength, .65)));
  --slg-reading: rgb(255 255 255 / calc(.94 - .10 * var(--sa-strength, .65)));
  --slg-content-share: calc(98% - 22% * var(--sa-strength, .65));
  --slg-project-share: calc(82% - 40% * var(--sa-strength, .65));
  --slg-edge-tint: rgb(255 255 255 / .22);
  --slg-line: rgb(128 146 143 / .24);
  --slg-glint: none;
  --slg-preview-solid: #fff;
  --slg-edge-light: rgb(255 255 255 / calc(.42 + .50 * var(--sa-strength, .65)));
  --slg-edge-side: rgb(255 255 255 / calc(.10 + .28 * var(--sa-strength, .65)));
  --slg-edge-shade: rgb(38 67 82 / calc(.08 + .18 * var(--sa-strength, .65)));
  --slg-edge-glow: rgb(255 255 255 / calc(.16 + .42 * var(--sa-strength, .65)));
  --slg-cast: rgb(22 42 54 / calc(.07 + .09 * var(--sa-strength, .65)));
  /* All glass surfaces share one soft native contour, including focused
     inputs and dialogs. Hard directional inset strokes left corner seams. */
  --slg-bevel: var(--slg-soft-bevel);
  --slg-depth: var(--slg-bevel), 0 5px 14px -7px var(--slg-cast), 0 1px 3px rgb(22 42 54 / .05);
  --slg-soft-bevel: inset 0 1px 2px rgb(255 255 255 / calc(.24 + .25 * var(--sa-strength, .65))), inset 0 -1px 2px rgb(38 67 82 / .08);
}
html[data-steve-appearance="on"] { --sa-layer-image: none; }
/* The quota widget owns literal palette colours rather than --surface.
   Resolve its reading material at its own body; never inherit the shared
   --sa-solid fallback (#fff) when its Shanghai schedule selects dark mode. */
html[data-steve-appearance="on"] body[data-appearance-app="quota"] {
  --sa-solid: #f5f7fb;
  --slg-quota-caption: #536079;
}
html[data-steve-appearance="on"][data-theme="dark"] body[data-appearance-app="quota"] {
  --sa-solid: #232d3f;
  --slg-quota-caption: #aebdd3;
}
html[data-steve-appearance="on"] body[data-appearance-app="quota"] :is(.reset, .value span, .mini-value span) { color: var(--slg-quota-caption); }
body[data-appearance-app="attention"] .goal-bar { color: var(--ink); }
html:not([data-stevetab-theme="dark"]) body[data-appearance-app="attention"] .goal-bar b { color: #9f5c0c; }
html:is([data-theme="dark"], [data-stevetab-theme="dark"], [data-steve-liquid-theme="dark"]),
.sb-preview[data-theme="dark"] {
  --slg-tint: rgb(25 32 40 / calc(.64 - .34 * var(--sa-strength, .65)));
  --slg-reading: rgb(25 32 40 / calc(.96 - .10 * var(--sa-strength, .65)));
  --slg-edge-tint: rgb(25 32 40 / .38);
  --slg-line: rgb(255 255 255 / calc(.035 + .025 * var(--sa-strength, .65)));
  --slg-glint:
    radial-gradient(ellipse 60% 2px at 26% 0, rgb(255 255 255 / calc(.10 + .10 * var(--sa-strength, .65))), transparent),
    radial-gradient(ellipse 24% 1px at 88% 0, rgb(255 255 255 / calc(.035 + .035 * var(--sa-strength, .65))), transparent);
  --slg-bevel: var(--slg-soft-bevel);
  --slg-cast: rgb(0 0 0 / calc(.18 + .10 * var(--sa-strength, .65)));
  --slg-depth: var(--slg-bevel), 0 5px 14px -8px var(--slg-cast);
  --slg-soft-bevel: inset 0 1px 2px rgb(255 255 255 / calc(.025 + .04 * var(--sa-strength, .65))), inset 0 -1px 2px rgb(0 0 0 / .14);
  --slg-preview-solid: #252c29;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-stevetab-theme="light"]):not([data-steve-liquid-theme="light"]) {
    --slg-tint: rgb(25 32 40 / calc(.64 - .34 * var(--sa-strength, .65)));
    --slg-reading: rgb(25 32 40 / calc(.96 - .10 * var(--sa-strength, .65)));
    --slg-edge-tint: rgb(25 32 40 / .38);
    --slg-line: rgb(255 255 255 / calc(.035 + .025 * var(--sa-strength, .65)));
    --slg-glint:
      radial-gradient(ellipse 60% 2px at 26% 0, rgb(255 255 255 / calc(.10 + .10 * var(--sa-strength, .65))), transparent),
      radial-gradient(ellipse 24% 1px at 88% 0, rgb(255 255 255 / calc(.035 + .035 * var(--sa-strength, .65))), transparent);
    --slg-bevel: var(--slg-soft-bevel);
    --slg-cast: rgb(0 0 0 / calc(.18 + .10 * var(--sa-strength, .65)));
    --slg-depth: var(--slg-bevel), 0 5px 14px -8px var(--slg-cast);
  --slg-soft-bevel: inset 0 1px 2px rgb(255 255 255 / calc(.025 + .04 * var(--sa-strength, .65))), inset 0 -1px 2px rgb(0 0 0 / .14);
    --slg-preview-solid: #252c29;
  }
}
/* Material belongs only to existing boxed surfaces. Bare titles, captions,
   links and footers keep their app-owned text styling without a new backing. */
/* Remove the old artificial lens artwork, including stale cached markup. */
.sa-optics { display: none !important; }
html[data-steve-appearance="on"] body::before { content: none !important; }
html[data-steve-appearance="on"] :is(.composer, .segments, .engine-menu, dialog)::after { content: none !important; }
html[data-steve-appearance="on"] body[data-appearance-app] :is(.composer, .segments, .segmented, .tabs, .engine-menu, .sa-glass, .composer-card, .search-field, .upload-zone, .appearance-controls),
html[data-steve-appearance="on"] body[data-appearance-app="models"] .sidebar,
html[data-steve-appearance="on"] body[data-appearance-app="attention"] :is(.stevetab-nav, .bottombar, .text-search, .back-top) {
  background-color: var(--slg-tint);
  background-image: var(--slg-glint);
  border-color: var(--slg-line);
  box-shadow: var(--slg-depth);
  -webkit-backdrop-filter: blur(calc(4px + 14px * var(--sa-strength, .65))) saturate(115%);
  backdrop-filter: blur(calc(4px + 14px * var(--sa-strength, .65))) saturate(115%);
}
html[data-steve-appearance="on"] dialog,
html[data-steve-appearance="on"] :is(#salary-dialog.salary-dialog, #steve-background-dialog, #delete-dialog) {
  background-color: var(--slg-reading) !important;
  background-image: var(--slg-glint) !important;
  border-color: var(--slg-line);
  --slg-tint: var(--slg-edge-tint);
  box-shadow: var(--slg-bevel), 0 20px 56px -12px var(--slg-cast);
}
/* A native modal gets its backdrop from the actual page root; applying a CSS
   filter to that root changes fixed geometry and would blur the snapshot twice. */
html[data-steve-appearance="on"] body:has(> dialog[open]) > :is(#app, .page, #body-app, .canvas) { filter: none !important; }
html[data-steve-appearance="on"] dialog::backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.slg-positioned { position: relative; }
html[data-steve-appearance="on"] .slg-mounted {
  isolation: isolate;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  /* Keep the native corner radius in agreement with the optical mask. */
  corner-shape: round;
}
.steve-liquid-lens {
  position: absolute !important;
  inset: 0;
  z-index: -1;
  display: block;
  border-radius: inherit;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
  contain: layout style;
}
/* Selected labels remain crisp; the moving indicator alone owns its lens. */
html[data-steve-appearance="on"] body[data-appearance-app="pets"] .tab[aria-selected="true"] { background: transparent; box-shadow: none; }
html[data-steve-appearance="on"] :is(.segments, .tabs):has(> .slg-mounted) { background-color: rgb(128 146 143 / .08); }
html[data-steve-appearance="on"] body[data-appearance-app] :is(.card:not(.composer-card), .sa-solid, .file-card, .history-row, .transfer-row, .guest-card, .login-card, .load-error, .pending-panel, .quota-detail, .paper-card, .expense-row),
html[data-steve-appearance="on"] body[data-appearance-app="attention"] :is(.task, .exp, .chapter, .review-item, .miscon),
html[data-steve-appearance="on"] body[data-appearance-app="models"] :is(.code-block, .reasoning, .table-scroll, .message-file) {
  background-color: color-mix(in srgb, var(--sa-solid, var(--surface, #fff)) var(--slg-content-share), transparent);
  background-image: var(--slg-glint);
  border-color: var(--slg-line);
  box-shadow: var(--slg-depth);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Home's short project and shortcut cards use the clearest material. Long
   records retain more reading tint. Original artwork and geometry stay intact. */
html[data-steve-appearance="on"] body[data-appearance-app="home"] #grid .card {
  background-color: color-mix(in srgb, var(--sa-solid, var(--surface, #fff)) var(--slg-project-share), transparent);
  background-image: var(--slg-glint);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
  border-color: color-mix(in srgb, var(--slg-line) 75%, transparent);
  /* Soft native bevels follow the browser corner exactly; offset hard
     side shadows produced a separate one-pixel contour at the corner joins. */
  box-shadow: var(--slg-soft-bevel), 0 5px 14px -7px var(--slg-cast);
}
/* Device feedback rejected the live refraction renderer. For the approved CSS mode,
   leave ordinary native CSS material only on the small functional controls.
   Repeated record/project cards and modal content need no extra blur surface. */
html[data-steve-liquid-mode="css-stable"][data-steve-appearance="on"] body[data-appearance-app="home"] #grid .card,
html[data-steve-liquid-mode="css-stable"][data-steve-appearance="on"] dialog {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-steve-liquid-mode="css-stable"][data-steve-appearance="on"] body[data-appearance-app] :is(.composer, .segments, .segmented, .tabs, .engine-menu, .composer-card, .search-field, .upload-zone) {
  -webkit-backdrop-filter: blur(calc(4px + 6px * var(--sa-strength, .65))) saturate(110%);
  backdrop-filter: blur(calc(4px + 6px * var(--sa-strength, .65))) saturate(110%);
}
/* The active, read-only prototype predates shared theme tokens. Its original
   palette remains the off state; enabled material supplies a matching palette. */
html[data-steve-appearance="on"] body[data-appearance-app="prototype"] {
  --sa-solid: var(--paper);
  --surface: var(--paper);
  --text: var(--ink);
  --border: var(--line);
  --accent: var(--brand);
}
html[data-steve-appearance="on"][data-steve-liquid-theme="dark"] body[data-appearance-app="prototype"] {
  --paper: #252c34; --ink: #e9edf2; --muted: #b1bac5;
  --line: #3a424d; --brand: #c0cbd8;
}
html[data-steve-appearance="on"] body[data-appearance-app="prototype"] :is(.hero, .pet-card, .record, .panel, .fact, .notice, .readonly, .empty, .tag, .filter:not(.active)) {
  background-color: color-mix(in srgb, var(--sa-solid) var(--slg-content-share), transparent);
  background-image: var(--slg-glint);
  border-color: var(--slg-line);
  box-shadow: var(--slg-depth);
  color: var(--ink);
}
html[data-steve-appearance="on"] body[data-appearance-app="prototype"] .tab.active {
  background-color: var(--paper);
  background-image: var(--slg-glint);
  box-shadow: var(--slg-depth);
  color: var(--brand);
}
html[data-steve-appearance="on"][data-steve-liquid-theme="dark"] body[data-appearance-app="prototype"] .filter.active { color: #202833; }
/* Full rollout: these controls already had their own shape/background.
   Nested fields use static tint only, so long forms do not multiply blur layers. */
html[data-steve-appearance="on"] body[data-appearance-app="home"] :is(#logout, #confirm-dialog button:not(.primary), #paper-clear-search, #filter, .engine-group, .expense-segments, .expense-close),
html[data-steve-appearance="on"] body[data-appearance-app="home"] dialog :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.expense-amount-row input),
html[data-steve-appearance="on"] body[data-appearance-app="home"] #salary-dialog .salary-field :is(input, select),
html[data-steve-appearance="on"] body[data-appearance-app="files"] :is(.share-url, .login-card input),
html[data-steve-appearance="on"] body[data-appearance-app="pets"] :is(.age-button, .capsule, .weight-input, input.field, select.field, textarea.field),
html[data-steve-appearance="on"] body[data-appearance-app="body"] :is(.dialog-header .icon-button, .button:not(.primary):not(.danger):not(.soft), .row-actions button:not(.danger), .pending-row button, .upload-row button, .switch-button:not([aria-pressed="true"]), .mobile-period select, .photo-placeholder, .kcal-input, .form-field input, .form-field select, .form-field textarea, .note-details textarea),
html[data-steve-appearance="on"] body[data-appearance-app="models"] :is(.suggestions button, .new-chat, .attach-button, #cancel-delete),
html[data-steve-appearance="on"] body[data-appearance-app="attention"] .recite-ok textarea,
html[data-steve-appearance="on"] body[data-appearance-app] :is(.sb-entry, .sb-tabs, .sb-types),
html[data-steve-appearance="on"] body[data-appearance-app]:not([data-appearance-app="body"]):not([data-appearance-app="models"]) :is(.icon-button, .round-button, .close, .small-button, .engine-button):not(.primary):not(.danger),
html[data-steve-appearance="on"] #steve-background-dialog :is(.sb-close, .sb-pick, .sb-actions button:not(.sb-primary)) {
  background-color: var(--slg-tint);
  background-image: var(--slg-glint);
  border-color: var(--slg-line);
  box-shadow: var(--slg-depth);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-steve-appearance="on"] body[data-appearance-app="home"] :is(.expense-section, .salary-day-summary, .salary-time-details),
html[data-steve-appearance="on"] body[data-appearance-app="pets"] :is(.analysis-metric, .sheet-notice, .operation-inline:not([data-type="failure"])),
html[data-steve-appearance="on"] body[data-appearance-app="body"] :is(.conflict-box, .photo-tile, .upload-row),
html[data-steve-appearance="on"] body[data-appearance-app="models"] :is(.user-bubble, .attachment:not(.image)),
html[data-steve-appearance="on"] body[data-appearance-app="attention"] :is(.entry, pre.copy-skel, .ch-body pre),
html[data-steve-appearance="on"] #steve-background-dialog .sb-conflict {
  background-color: color-mix(in srgb, var(--sa-solid, var(--surface, #fff)) var(--slg-content-share), transparent);
  background-image: var(--slg-glint);
  border-color: var(--slg-line);
  box-shadow: var(--slg-depth);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-steve-appearance="on"] body[data-appearance-app] :is(.segment-indicator, .tab-indicator),
html[data-steve-appearance="on"] body[data-appearance-app] .segmented button:is([aria-pressed="true"], [aria-selected="true"]),
html[data-steve-appearance="on"] body[data-appearance-app="home"] .expenses-dialog .expense-segments button[aria-pressed="true"],
html[data-steve-appearance="on"] #steve-background-dialog :is(.sb-tabs, .sb-types) button[aria-pressed="true"] {
  background-color: var(--sa-solid, var(--surface, #fff));
  background-image: var(--slg-glint);
  box-shadow: var(--slg-depth);
}
html[data-steve-appearance="on"] body[data-appearance-app="home"] .expense-overview-scroll { background: transparent; }
/* Rows inside the existing engine group share its material instead of masking
   it with opaque rectangles or adding a separate bevel to every text row. */
html[data-steve-appearance="on"] body[data-appearance-app="home"] .engine-group .engine-option { background: transparent; }
html[data-steve-appearance="on"] body[data-appearance-app="home"] .engine-group .engine-option:is(:hover, :focus-visible) { background-color: var(--slg-tint); }

/* Preview material follows its own light/dark draft, independently of the
   surrounding editor theme; captions remain unframed like the actual page. */
html[data-steve-appearance="on"] .sb-preview .sb-preview-search,
html[data-steve-appearance="on"] .sb-preview .sb-preview-cards > span {
  background-color: var(--slg-tint);
  background-image: var(--slg-glint);
  border-color: var(--slg-line);
  box-shadow: var(--slg-depth);
}
html[data-steve-appearance="on"] .sb-preview .sb-preview-cards > span {
  background-color: color-mix(in srgb, var(--slg-preview-solid) var(--slg-project-share), transparent);
}
html .sb-preview[data-theme] .sb-preview-copy { background: transparent; border-radius: 0; }
/* Body's plain icon actions (outside an originally boxed dialog close button)
   must not inherit the old global button highlight. */
html[data-steve-appearance="on"] body[data-appearance-app="body"] .icon-button:not(.dialog-header .icon-button),
html[data-steve-appearance="on"] body[data-appearance-app="models"] .icon-button:not(.attach-button) {
  box-shadow: none;
}
/* Maintain the existing focus cue above all material rules. */
html[data-steve-appearance="on"] body[data-appearance-app] :is(.composer, .search-field, .weight-input, .kcal-input):focus-within {
  border-color: var(--accent, var(--teal-deep, var(--brand, #287c5c)));
  box-shadow: var(--slg-bevel), 0 0 0 2px color-mix(in srgb, var(--accent, #287c5c) 18%, transparent), 0 5px 14px -8px var(--slg-cast);
}
/* Canvas UI Glass rim optics, cached for existing surfaces only. The texture
   adds directional curved light without changing geometry or capturing DOM. */
html[data-steve-appearance="on"] body[data-appearance-app] [data-glass-material="rim"] {
  background-image: var(--slg-rim-image), var(--slg-glint) !important;
  background-size: 100% 100% !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  background-repeat: no-repeat !important;
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-steve-appearance="on"] body[data-appearance-app] [data-glass-material="rim"] { background-image: none !important; }
  html[data-steve-appearance="on"], html[data-steve-appearance="on"] .sb-preview { --slg-tint: var(--sa-solid, Canvas); --slg-reading: var(--sa-solid, Canvas); --slg-glint: none !important; --slg-content-share: 100%; --slg-project-share: 100%; }
  .steve-liquid-lens { display: none !important; }
  html[data-steve-appearance="on"] .slg-mounted { background: var(--sa-solid, Canvas) !important; }
  html[data-steve-appearance="on"] :is(.composer, .segments, .segmented, .tabs, .engine-menu, .sa-glass, .composer-card, .search-field, .upload-zone, .sidebar, .stevetab-nav, .bottombar, .text-search, .back-top, .appearance-controls, .card, dialog),
  html[data-steve-appearance="on"] :is(#salary-dialog.salary-dialog, #steve-background-dialog, #delete-dialog) {
    background-color: var(--sa-solid, Canvas) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-steve-appearance="on"] dialog::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html[data-steve-appearance="on"] body[data-appearance-app] :is(.card, .sa-solid, .file-card, .history-row, .transfer-row, .guest-card, .login-card, .load-error, .pending-panel, .quota-detail, .paper-card, .expense-row),
  html[data-steve-appearance="on"] body[data-appearance-app="attention"] :is(.task, .exp, .chapter, .review-item, .miscon),
  html[data-steve-appearance="on"] body[data-appearance-app="models"] :is(.code-block, .reasoning, .table-scroll, .message-file) {
    background-color: var(--sa-solid, Canvas) !important;
    box-shadow: none;
  }

  html[data-steve-appearance="on"] body[data-appearance-app="home"] :is(#logout, #confirm-dialog button:not(.primary), #paper-clear-search, #filter, .engine-group, .expense-segments, .expense-close),
  html[data-steve-appearance="on"] body[data-appearance-app="home"] dialog :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.expense-amount-row input),
  html[data-steve-appearance="on"] body[data-appearance-app="home"] #salary-dialog .salary-field :is(input, select),
  html[data-steve-appearance="on"] body[data-appearance-app="files"] :is(.share-url, .login-card input),
  html[data-steve-appearance="on"] body[data-appearance-app="pets"] :is(.age-button, .capsule, .weight-input, input.field, select.field, textarea.field),
  html[data-steve-appearance="on"] body[data-appearance-app="body"] :is(.dialog-header .icon-button, .button:not(.primary):not(.danger):not(.soft), .row-actions button:not(.danger), .pending-row button, .upload-row button, .switch-button:not([aria-pressed="true"]), .mobile-period select, .photo-placeholder, .kcal-input, .form-field input, .form-field select, .form-field textarea, .note-details textarea),
  html[data-steve-appearance="on"] body[data-appearance-app="models"] :is(.suggestions button, .new-chat, .attach-button, #cancel-delete),
  html[data-steve-appearance="on"] body[data-appearance-app="attention"] .recite-ok textarea,
  html[data-steve-appearance="on"] body[data-appearance-app] :is(.sb-entry, .sb-tabs, .sb-types),
  html[data-steve-appearance="on"] body[data-appearance-app]:not([data-appearance-app="body"]):not([data-appearance-app="models"]) :is(.icon-button, .round-button, .close, .small-button, .engine-button):not(.primary):not(.danger),
  html[data-steve-appearance="on"] #steve-background-dialog :is(.sb-close, .sb-pick, .sb-actions button:not(.sb-primary)),
  html[data-steve-appearance="on"] body[data-appearance-app="home"] :is(.expense-section, .salary-day-summary, .salary-time-details),
  html[data-steve-appearance="on"] body[data-appearance-app="pets"] :is(.analysis-metric, .sheet-notice, .operation-inline:not([data-type="failure"])),
  html[data-steve-appearance="on"] body[data-appearance-app="body"] :is(.conflict-box, .photo-tile, .upload-row),
  html[data-steve-appearance="on"] body[data-appearance-app="models"] :is(.user-bubble, .attachment:not(.image)),
  html[data-steve-appearance="on"] body[data-appearance-app="attention"] :is(.entry, pre.copy-skel, .ch-body pre),
  html[data-steve-appearance="on"] #steve-background-dialog .sb-conflict,
  html[data-steve-appearance="on"] body[data-appearance-app] :is(.segment-indicator, .tab-indicator),
  html[data-steve-appearance="on"] body[data-appearance-app] .segmented button:is([aria-pressed="true"], [aria-selected="true"]),
  html[data-steve-appearance="on"] body[data-appearance-app="home"] .expenses-dialog .expense-segments button[aria-pressed="true"],
  html[data-steve-appearance="on"] #steve-background-dialog :is(.sb-tabs, .sb-types) button[aria-pressed="true"] {
    background-color: var(--sa-solid, Canvas) !important;
    background-image: none !important;
    box-shadow: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html[data-steve-appearance="on"] body[data-appearance-app="prototype"] :is(.hero, .pet-card, .record, .panel, .fact, .notice, .readonly, .empty, .tag, .filter:not(.active), .tab.active) {
    background: var(--paper) !important;
    box-shadow: none;
  }

  html[data-steve-appearance="on"] .sb-preview :is(.sb-preview-search, .sb-preview-cards > span) {
    background: var(--slg-preview-solid) !important;
    box-shadow: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

}