/* Original layout retained. Theme overrides are opt-in. */
.appearance-switch {
  position: fixed; left: 24px; bottom: 84px; z-index: 25;
  display: flex; width: 190px; padding: 4px; gap: 3px;
  border: 1px solid #e2e3e9; border-radius: 14px; background: #f4f4f7;
  box-shadow: 0 3px 12px #25272c08; font-family: var(--font-ui, sans-serif);
}
.appearance-switch button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  flex: 1 0 auto; min-height: 36px; padding: 7px 8px;
  border: 1px solid transparent; border-radius: 10px; background: transparent;
  color: #5a5d69; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.appearance-switch button svg { width: 15px; height: 15px; flex: none; }
.appearance-switch button:hover { background: #ffffff80; }
.appearance-switch button[aria-pressed="true"] {
  color: #a31d2c; background: #fff; border-color: #fff; box-shadow: 0 2px 5px #32354412;
}
.login-page .appearance-switch, .media-page .appearance-switch { left: auto; right: 24px; bottom: 24px; }
/* Clear optical glass: bright edge reflections over a visible wallpaper. */
html[data-appearance="glass"] {
  --bg: #dbe8ee; --paper: #ffffff38; --ink: #192533; --muted: #35414f; --line: #ffffff90;
  --glass-fill: radial-gradient(ellipse at 8% 0%, #ffffff66, transparent 48%), linear-gradient(125deg, #ffffff4d, #ffffff1a 48%, #ffffff38);
  --glass-shadow: inset 0 1.5px 1px #fffffff0, inset 1px 0 1px #ffffffb3, inset -1px -1px 1px #ffffff99, inset 0 -2px 5px #3350640d, 0 2px 5px #29455b0a, 0 14px 38px #29455b1c;
  background: var(--bg);
}
html[data-appearance="glass"] body {
  background-color: var(--bg);
  background-image: none;
  isolation: isolate;
}
/* Blur only the wallpaper, leaving the interface and the source image intact. */
html[data-appearance="glass"] body::before {
  content: "";
  position: fixed;
  inset: -16px;
  z-index: -1;
  pointer-events: none;
  background: url('/static/glass-wallpaper-v2.webp') center / cover no-repeat;
  filter: blur(6px);
}
html[data-appearance="glass"] :is(.metric-kpi, .metric-panel, .stats article, .form-card, .table-wrap, .stack > article, .card, .media-upload-card, .media-item, dialog, .login-card) {
  background: var(--glass-fill);
  border-color: #ffffff9c;
  border-radius: 22px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(135%) brightness(1.04);
  backdrop-filter: blur(12px) saturate(135%) brightness(1.04);
}
/* The floating shell stays within the existing sidebar footprint. */
html[data-appearance="glass"] .admin-page > aside {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-appearance="glass"] .admin-page > aside::before {
  content: "";
  position: absolute;
  inset: 16px 10px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid #ffffffb3;
  border-radius: 30px;
  background: linear-gradient(150deg, #ffffff52, #ffffff1f 65%, #ffffff38);
  box-shadow: inset 0 1.5px 1px #fffffff0, inset 1px 0 1px #ffffffb3, inset -1px -1px 1px #ffffff99, 0 12px 30px #29455b26, 0 3px 8px #29455b12;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
html[data-appearance="glass"] :is(.admin-page > main, .media-main) { background: transparent; }
html[data-appearance="glass"] :is(.admin-page header, .media-header) { border-color: #ffffff80; }
html[data-appearance="glass"] .admin-page nav button { background: transparent; color: #38495c; border-radius: 14px; }
html[data-appearance="glass"] .admin-page nav button:hover { background: #ffffff40; }
html[data-appearance="glass"] .admin-page nav button.active {
  background: linear-gradient(125deg, #ffffff80, #ffffff38);
  box-shadow: inset 0 1px 1px #ffffffe6, inset 0 -1px 1px #ffffff99, 0 4px 12px #29455b12;
  color: #9a1630;
}
html[data-appearance="glass"] :is(.workspace-badge, .amarte-logout, .appearance-switch) {
  background: linear-gradient(125deg, #ffffff52, #ffffff26);
  border-color: #ffffffa6;
  border-radius: 999px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
  color: #38495c;
}
html[data-appearance="glass"] .appearance-switch button { border-radius: 999px; color: #38495c; }
html[data-appearance="glass"] .appearance-switch button[aria-pressed="true"] {
  background: linear-gradient(125deg, #ffffffbf, #ffffff66);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #ffffff80, 0 3px 8px #29455b1a;
  color: #961a2e;
}
html[data-appearance="glass"] :is(input, textarea, select) {
  background-color: #ffffff6b; border-color: #ffffffa6; border-radius: 12px;
  box-shadow: inset 0 1px 2px #28465b0d, 0 1px 0 #ffffff80;
  color: #192533;
}
html[data-appearance="glass"] :is(input, textarea, select):focus { border-color: #9d5667; background-color: #ffffffa3; }
html[data-appearance="glass"] :is(input[readonly], textarea[readonly]) { background: #e8eef34d; }
html[data-appearance="glass"] select option { background: #f5f8fa; color: #192533; }
html[data-appearance="glass"] button:not(.primary):not([data-view]):not([data-appearance-choice]) {
  background-color: #ffffff52; border-color: #ffffffa6; border-radius: 999px;
  box-shadow: inset 0 1px 1px #ffffffe6, inset 0 -1px 1px #ffffff80, 0 3px 10px #29455b0d;
}
html[data-appearance="glass"] button:not(.primary):not([data-view]):not([data-appearance-choice]):hover { background-color: #ffffff85; }
html[data-appearance="glass"] .primary {
  background: linear-gradient(150deg, #e84b59, #ce253d 55%, #b51934) !important;
  border-radius: 999px;
  box-shadow: inset 0 1.5px 1px #ffffff73, inset 0 -1px 1px #8e122657, 0 5px 15px #b61d3226;
}
html[data-appearance="glass"] button.danger:not(.primary) { background-color: #fff2f56b; border-color: #cd637780; color: #9b1931; }
html[data-appearance="glass"] .metric-table-wrap { background: transparent; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-appearance="glass"] :is(.media-picker, .empty-media, .metric-empty, .ignored-number-row) { background: #ffffff40; color: #475669; }
html[data-appearance="glass"] .card:hover { border-color: #ffffffe6; box-shadow: var(--glass-shadow), 0 16px 36px #29455b26; }
html[data-appearance="glass"] .mini-metrics > div { background: #ffffff30; border-radius: 16px; box-shadow: inset 0 1px 1px #ffffffb3, inset 0 -1px 1px #ffffff73; }
html[data-appearance="glass"] :is(.card img, .media-item img, .media-item video) { background-color: #ffffff26; }
html[data-appearance="glass"] th { background: #ffffff38; color: #35414f; }
html[data-appearance="glass"] :is(td, th) { border-color: #ffffff66; }
html[data-appearance="glass"] tbody tr:hover, html[data-appearance="glass"] tr:hover td { background: #ffffff26; }
html[data-appearance="glass"] :is(.rule, .pill) { background: #ffffff47; color: #475669; }
html[data-appearance="glass"] .donut::before { background: #edf4f6e6; }
html[data-appearance="glass"] :is(.modal-head, .actions) {
  background: #edf4f68c; border-color: #ffffff99;
  -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%);
}
html[data-appearance="glass"] dialog { background: linear-gradient(125deg, #ffffff80, #ffffff4d); box-shadow: var(--glass-shadow), 0 28px 80px #243e5a3d; }
html[data-appearance="glass"] dialog::backdrop { background: #28445c40; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-appearance="glass"] #toast { background: #1d3043e6; color: #fff; }
html[data-appearance="glass"] .login-identity {
  background: linear-gradient(145deg, #ffffff1a, #ffffff05); border-color: #ffffff66;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
html[data-appearance="glass"] .login-identity::after { opacity: .2; }
html[data-appearance="glass"] .login-card button { background: linear-gradient(150deg, #e84b59, #ce253d 55%, #b51934) !important; color: #fff; }
html[data-appearance="glass"] :is(.eyebrow, .metric-label, .nav-caption, .metric-footnote, .metric-kpi > small, .login-copy, .login-signature, .brand small) { color: #35414f; }
html[data-appearance="glass"] .login-intro > p:last-child { color: #35414f; }
html[data-appearance="glass"] .chart-grid { stroke: #ffffff70; }
html[data-appearance="glass"] .chart-axis { fill: #35414f; }
/* A pointer-controlled specular rim, independent of content and clicks. */
html[data-appearance="glass"] :is(.metric-kpi, .metric-panel, .stats article, .form-card, .stack > article, .card, .media-upload-card, .media-item, .login-card, .appearance-switch, .mini-metrics > div) {
  --glass-reflection-active: 0;
  --glass-reflection-x: 50%;
  --glass-reflection-y: 0%;
}
html[data-appearance="glass"] :is(.metric-kpi, .metric-panel, .stats article, .form-card, .stack > article, .card, .media-upload-card, .media-item, .login-card, .mini-metrics > div) { position: relative; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-appearance="glass"] :is(.metric-kpi, .metric-panel, .stats article, .form-card, .stack > article, .card, .media-upload-card, .media-item, .login-card, .appearance-switch, .mini-metrics > div)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(180px circle at var(--glass-reflection-x, 50%) var(--glass-reflection-y, 0%), #ffffff 0%, #f6fcffed 22%, #e8f6ff80 45%, #ffffff00 75%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 4px #ffffffb3);
    opacity: var(--glass-reflection-active, 0);
    transition: opacity .22s ease;
  }
}
/* The selector avoids the compact navigation and logout control. */
@media (max-width: 800px) {
  html[data-appearance="glass"] .admin-page > aside::before { inset: 8px 10px 6px; border-radius: 24px; }
  .appearance-switch, .login-page .appearance-switch, .media-page .appearance-switch {
    left: 50%; right: auto; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  }
}
@media (min-width: 801px) and (max-height: 760px) {
  .admin-page .appearance-switch { left: auto; right: 24px; bottom: 24px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-appearance="glass"] { --glass-fill: linear-gradient(135deg, #fffffff2, #ffffffe6); }
  html[data-appearance="glass"] .admin-page > aside::before { background: #f8f9fcf5; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-appearance="glass"] { --glass-fill: #f5f8fa; }
  html[data-appearance="glass"] .admin-page > aside::before { background: #f5f8fa; }
  html[data-appearance="glass"] :is(.appearance-switch, .workspace-badge, .amarte-logout, dialog, .login-identity, .modal-head, .actions) { background: #f5f8fa; }
}
@media print { .appearance-switch, html[data-appearance="glass"] body::before { display: none; } }
