/* Material tokens belong to surfaces and controls, never to image/game content. */
:root, .material-sample {
  --m-base:#18212c;--m-text:#e8edf4;--m-line:rgba(178,202,225,.22);
  --m-highlight:rgba(142,173,206,.10);--m-shade:rgba(0,5,12,.55);
  --m-surface:var(--bg-surface,var(--bg-card,#18212c));--m-control:var(--bg-elevated,var(--bg-secondary,#253244));
  --m-field:var(--bg-input,#101720);--m-shadow:none;--m-inset:none;--m-radius:var(--corner-radius-base,12px);
  --m-blur:none;--m-border:1px solid var(--m-line);--m-accent:var(--blue,var(--accent,#0078d4));
  --m-button-bg:var(--m-control);--m-button-shadow:var(--m-shadow);--m-button-radius:calc(var(--m-radius) * .8);
}
:root[data-theme="light"], :root[data-theme="light"] .material-sample {
  --m-base:#e9eef3;--m-text:#243446;--m-line:rgba(36,52,70,.23);
  --m-highlight:rgba(255,255,255,.92);--m-shade:rgba(94,119,144,.25);
}
:is(:root[data-material="dew"],.material-sample[data-preview-material="dew"]) {
  --m-surface:color-mix(in srgb,var(--m-base) 89%,transparent);--m-control:color-mix(in srgb,var(--m-base) 92%,transparent);
  --m-field:color-mix(in srgb,var(--m-base) 86%,transparent);
  --m-shadow:8px 8px 20px var(--m-shade),-6px -6px 18px var(--m-highlight),inset 1px 1px 1px rgba(255,255,255,.28),inset -1px -1px 1px rgba(0,0,0,.12);
  --m-inset:inset 4px 4px 9px var(--m-shade),inset -4px -4px 9px var(--m-highlight);
  --m-border:1px solid color-mix(in srgb,var(--m-highlight) 75%,transparent);--m-blur:blur(12px) saturate(115%);
  --m-radius:calc(var(--corner-radius-base,12px) * 1.5);
}
:is(:root[data-material="mist"],.material-sample[data-preview-material="mist"]) {
  --m-surface:color-mix(in srgb,var(--m-base) 80%,transparent);--m-control:color-mix(in srgb,var(--m-base) 84%,transparent);
  --m-field:color-mix(in srgb,var(--m-base) 76%,transparent);--m-border:1px solid var(--m-line);
  --m-shadow:0 10px 30px var(--m-shade),inset 0 1px 0 var(--m-highlight);--m-inset:inset 0 1px 3px var(--m-shade);
  --m-blur:blur(20px) saturate(115%);--m-radius:calc(var(--corner-radius-base,12px) * 1.6);
}
:is(:root[data-material="tag"],.material-sample[data-preview-material="tag"]) {
  --m-surface:var(--m-base);--m-control:var(--m-base);--m-field:var(--m-base);
  --m-border:2px solid var(--m-text);--m-line:var(--m-text);--m-shadow:5px 5px 0 color-mix(in srgb,var(--m-text) 50%,transparent);--m-inset:none;--m-radius:4px;
}
:is(:root[data-material="paper"],.material-sample[data-preview-material="paper"]) {
  --m-base:#292824;--m-text:#ece7db;--m-line:#777267;--m-surface:var(--m-base);--m-control:#34322d;--m-field:#24231f;
  --m-shadow:0 2px 5px rgba(0,0,0,.15);--m-inset:inset 0 1px 2px rgba(0,0,0,.08);--m-border:1px solid var(--m-line);--m-radius:8px;
}
:root[data-theme="light"] :is(.material-sample[data-preview-material="paper"]),:root[data-theme="light"][data-material="paper"] {
  --m-base:#faf7ef;--m-text:#38382f;--m-line:#c5beaf;--m-control:#f4f0e6;--m-field:#f2eee3;--m-shadow:0 2px 5px rgba(74,61,36,.10);
}
:root[data-material="dew"] {--bg-page:var(--m-base);--bg-primary:var(--m-base);}
:root[data-material="paper"] {--text-primary:var(--m-text);--bg-page:var(--m-base);--bg-primary:var(--m-base);}
/* Inline page CSS can define dimensions; the shared layer only changes material. */
:root[data-material] :is(.navbar,.card-glass,.glass,.glass-heavy,.glass-light,.card,.modal-content,.modal-box,.wallpaper-panel,.nav-profile-menu,.notification-card,.chat-list,.chat-main,.chat-container,.game-player,.game-rules-card,.game-selected,.game-card,.download-card,.movie-card,.gallery-card,.photo-card,.fm-toolbar,.fm-tab-bar,.fm-sidebar,.fm-context-menu,.fm-ctx-submenu,.fm-statusbar,.fm-doc-toolbar,.settings-card-icon,.app-icon-tile,#page-dashboard .grid-tile.is-widget) {
  background:var(--m-surface)!important;border:var(--m-border)!important;box-shadow:var(--m-shadow)!important;border-radius:var(--m-radius)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
:root[data-material] :is(.navbar,.glass-heavy,.modal-content,.modal-box,.wallpaper-panel,.nav-profile-menu,.fm-context-menu) {backdrop-filter:var(--m-blur)!important;-webkit-backdrop-filter:var(--m-blur)!important;}
:root[data-material="dew"] :is(.card-glass,.modal-content,.modal-box,.app-icon-tile) {background-image:linear-gradient(155deg,rgba(255,255,255,.08),transparent 48%,rgba(0,120,212,.025))!important;}
:root[data-material] :is(.game-card.selected,.game-card[aria-pressed="true"],.wallpaper-thumb.active) {outline:2px solid var(--m-accent);outline-offset:2px;}
:root[data-material] :is(input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]),textarea,select,.form-input,.chat-input) {
  background:var(--m-field)!important;box-shadow:var(--m-inset)!important;border:var(--m-border)!important;color:var(--text-primary,var(--m-text))!important;
}
:root[data-material] :is(input,textarea,select):focus-visible {outline:2px solid var(--m-accent)!important;outline-offset:3px;}
:root[data-button-material="flat"] {--m-button-bg:var(--bg-elevated,var(--bg-secondary,#253244));--m-button-shadow:none;--m-button-radius:calc(var(--corner-radius-base,12px)*.8);}
:root[data-button-material="dew"] {--m-button-bg:color-mix(in srgb,var(--m-base) 94%,transparent);--m-button-shadow:5px 5px 12px var(--m-shade),-4px -4px 12px var(--m-highlight),inset 1px 1px 1px rgba(255,255,255,.28);--m-button-radius:calc(var(--corner-radius-base,12px)*1.3);}
:root[data-button-material="mist"] {--m-button-bg:color-mix(in srgb,var(--m-base) 82%,transparent);--m-button-shadow:0 4px 12px var(--m-shade),inset 0 1px 0 var(--m-highlight);--m-button-radius:999px;}
:root[data-button-material="tag"] {--m-button-bg:var(--m-base);--m-button-shadow:3px 3px 0 color-mix(in srgb,var(--m-text) 55%,transparent);--m-button-radius:3px;}
:root[data-button-material="paper"] {--m-button-bg:var(--m-base);--m-button-shadow:0 1px 2px var(--m-shade);--m-button-radius:6px;}
:root[data-button-material] :where(button,.btn,[role="button"]):where(:not(.nav-logo,.material-choice,.settings-wp-item,.wallpaper-thumb,.game-card,.game-library-card,.gallery-card,.photo-card,.mine-grid button,.sudoku-grid button)) {
  background:var(--m-button-bg)!important;box-shadow:var(--m-button-shadow)!important;border:1px solid var(--m-line)!important;
  border-radius:var(--m-button-radius)!important;
  transition:background-color 120ms ease,box-shadow 140ms ease,scale 70ms ease!important;
}
:root[data-button-material] :is(.btn-primary,.btn-send) {background:var(--m-accent)!important;color:#fff!important;}
:root[data-button-material] .btn-danger {background:var(--red,var(--error,#d13438))!important;color:#fff!important;}
:root[data-material] :is(.game-library-card[aria-pressed="true"],.game-filters button[aria-pressed="true"],.tab-btn.active,.auth-tab.active,.modal-tab.active,.sort-btn.active,.speed-option.active) {outline:2px solid var(--m-accent);outline-offset:2px;}
:root[data-button-material] :is(.photo-editor [aria-pressed="true"],.editor-view-switch [aria-pressed="true"]) {background:var(--m-accent)!important;color:#fff!important;}
:root[data-button-material] :is(.btn-icon,.icon-btn,.modal-close,.notification-heading button,.iv-tool-btn) {border-radius:999px!important;overflow:visible!important;}
:root[data-button-material="tag"] :is(button,.btn,[role="button"]):not(.nav-logo,.material-choice,.mine-grid button,.sudoku-grid button) {border:2px solid var(--m-text)!important;}
:root[data-button-material] :is(button,.btn,[role="button"]):focus-visible {outline:2px solid var(--m-accent)!important;outline-offset:4px!important;}
:root[data-button-material] :is(button,.btn,[role="button"]):disabled:not(.mine-grid button,.sudoku-grid button) {opacity:.5;cursor:not-allowed;}
:root[data-button-material="dew"] [data-jelly-pressed] {scale:1.045 .92;box-shadow:inset 3px 3px 7px var(--m-shade),inset -3px -3px 7px var(--m-highlight)!important;}
:root[data-button-material="dew"] :where(button,.btn):where(:not(.nav-logo,.material-choice,.settings-wp-item,.wallpaper-thumb,.game-card,.game-library-card,.gallery-card,.photo-card,.mine-grid button,.sudoku-grid button)) {background-image:linear-gradient(160deg,rgba(255,255,255,.16),transparent 58%,rgba(0,0,0,.04))!important;}
:root[data-button-material="tag"] :is(button,.btn):active:not(.mine-grid button,.sudoku-grid button) {translate:2px 2px;box-shadow:none!important;}
:root[data-material="dew"] .app-icon-tile svg {color:var(--m-accent)!important;}
:root[data-material] .toast {background:var(--m-surface)!important;box-shadow:var(--m-shadow)!important;border-radius:var(--m-radius)!important;}
:root[data-material="flat"] .glass-btn::before,:root[data-material="tag"] .glass-btn::before,:root[data-material="paper"] .glass-btn::before {display:none;}
/* Material swatches are independent of the current page material. */
.material-settings {margin:0 0 24px;}
.material-heading {display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.material-heading h3 {font-size:1.15rem;margin:0 0 6px;}
.material-heading p,.material-hint {font-size:.8rem;color:var(--text-secondary,var(--text-muted));line-height:1.6;}
.material-current {white-space:nowrap;font-size:.75rem;color:var(--m-accent);padding-top:3px;}
.material-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.material-choice {display:flex;flex-direction:column;text-align:left;min-width:0;padding:10px!important;gap:6px;background:var(--bg-surface,var(--bg-card))!important;color:var(--text-primary)!important;border:1px solid var(--border-input,var(--border-color))!important;border-radius:12px!important;box-shadow:none!important;cursor:pointer;}
.material-choice[aria-pressed="true"] {outline:2px solid var(--m-accent);outline-offset:1px;}
.material-sample {display:block;width:100%;padding:15px 13px;border-radius:8px;background:var(--m-base);color:var(--m-text);}
.material-demo-panel {display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--m-surface);border:var(--m-border);border-radius:var(--m-radius);box-shadow:var(--m-shadow);}
.material-demo-dots {display:flex;gap:4px;}.material-demo-dots i {display:block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;}
.material-demo-field {display:block;padding:5px 8px;font-size:10px;border:var(--m-border);border-radius:999px;background:var(--m-field);box-shadow:var(--m-inset);}
.material-demo-row {display:flex;gap:10px;align-items:center;}
.material-demo-button,.material-demo-icon {display:flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border:var(--m-border);background:var(--m-control);box-shadow:var(--m-shadow);border-radius:var(--m-radius);font-size:10px;}
.material-demo-icon {width:28px;padding:5px;border-radius:999px;}.material-demo-icon svg {width:17px;height:17px;}
.material-choice-title {display:flex;align-items:center;gap:8px;font-weight:650;font-size:.9rem;}
.material-choice-title small {font-size:.65rem;color:var(--m-accent);font-weight:500;}
.material-choice-description {font-size:.72rem;line-height:1.5;color:var(--text-secondary,var(--text-muted));white-space:normal;}
.material-button-label {display:flex;align-items:center;gap:14px;margin:18px 0 8px;font-size:.85rem;}.material-button-label select {flex:1;min-width:0;min-height:44px;padding:10px 12px;border-radius:var(--m-radius);font:inherit;}
.modal-content:has(.material-settings) {--m-modal-padding:28px;max-width:840px;width:min(840px,94vw);max-height:92dvh;overflow-y:auto;scroll-padding-block:24px 90px;padding:var(--m-modal-padding);animation:none!important;transform:none!important;}
.modal-overlay:has(.material-settings) {transition:none;}
.modal-content:has(.material-settings) .modal-actions {position:sticky;bottom:calc(-1 * var(--m-modal-padding));margin:24px calc(-1 * var(--m-modal-padding)) calc(-1 * var(--m-modal-padding));padding:16px var(--m-modal-padding);background:var(--m-surface);border-top:1px solid var(--m-line);z-index:10;}
.wallpaper-panel:has(.material-settings) {max-width:840px;width:min(840px,94vw);}
@media(max-width:600px) {.modal-content:has(.material-settings) {--m-modal-padding:18px;}.material-options {grid-template-columns:repeat(2,minmax(0,1fr));}.material-heading {gap:8px;}.material-current {display:none;}.material-sample {padding:13px 10px;}.material-choice-description {font-size:.7rem;}}
@media(prefers-reduced-motion:reduce) {:root[data-button-material] :is(button,.btn,[role="button"]) {transition:none!important;scale:none!important;translate:none!important;}}
@media(forced-colors:active) {:root[data-material] :is(.card-glass,.card,.modal-content,.modal-box,button,.btn,input,textarea,select) {box-shadow:none!important;border:1px solid CanvasText!important;}.material-choice[aria-pressed="true"] {outline-color:Highlight;}}