/* Browser-selected tokens also apply before the interactive theme provider connects. */
:root[data-theme] {
  --mud-palette-background: var(--bg); --mud-palette-surface: var(--surface);
  --mud-palette-text-primary: var(--ink); --mud-palette-text-secondary: var(--muted);
  --mud-palette-action-default: var(--muted); --mud-palette-divider: var(--line);
  --mud-palette-lines-default: var(--line); --mud-palette-primary: var(--brand);
  --mud-palette-primary-rgb: 224,0,117; --mud-palette-primary-text: #fff;
  --mud-typography-default-family: Tahoma,'Segoe UI',Arial,sans-serif;
}
body { font-family: Tahoma,'Segoe UI',Arial,sans-serif; }
.brand-button.mud-button-root {
  display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px;
  border-radius: 10px; font-size: 14px; font-weight: 700; white-space: nowrap;
  min-height: 50px; background: var(--brand); color: #fff; line-height: 1.6;
}
.brand-button .mud-button-label { gap: 20px; }
.brand-button .mud-button-icon-end { margin: 0; }
.brand-button:hover { background: var(--brand-hover) !important; }
.brand-button .mud-icon-root { font-size: 20px; }
.brand-button.login { padding: 10px 18px; min-height: 44px; }
.brand-button.login .mud-button-label { gap: 14px; }
.header-preferences .mud-button-root, .header-preferences .mud-icon-button {
  color: var(--muted); min-height: 44px; border-radius: 10px;
}
.header-preferences .mud-button-root { min-width: 0; padding: 8px 9px; font-size: 13px; }
.header-preferences .mud-button-label { gap: 2px; }
.header-preferences .mud-button-icon-start { margin-right: 5px; margin-left: 0; }
.header-preferences .mud-button-icon-end { margin-left: 3px; margin-right: 0; }
.header-preferences .mud-icon-root { font-size: 19px; }
.header-preferences .mud-icon-button { width: 44px; height: 44px; }
.header-preferences .mud-button-root:hover, .header-preferences .mud-icon-button:hover { color: var(--ink); background: var(--subtle); }
.mud-menu-list .mud-menu-item { font-size: 14px; min-height: 44px; }
.quiet-link.mud-link, .footer-wordmark.mud-link { color: var(--ink); }
.quiet-link:hover { color: var(--accent); }
.principles.mud-expand-panels { border-top: 1px solid var(--line); background: transparent; }
.principles .mud-expand-panel { background: transparent; color: var(--ink); margin: 0 !important; border-bottom: 1px solid var(--line); box-shadow: none !important; }
.principles .mud-expand-panel:before { display: none; }
.principles .mud-expand-panel-header { padding: 26px 0; min-height: 0; font-size: 18px; font-weight: 700; letter-spacing: -.025em; gap: 16px; }
.principles .mud-expand-panel-content { padding: 0 20px 28px 0; }
.principles .mud-expand-panel-content p { color: var(--muted); font-size: 15px; line-height: 1.85; max-width: 560px; }
.principles .mud-expand-panel-icon { color: var(--accent); }
.principles .mud-expand-panel-icon.mud-transform { transform: rotate(45deg); }
.product-copy .quiet-link.mud-button-root { display: inline-flex; align-items: center; padding: 0; min-width: 0; color: var(--ink); font-size: 14px; font-weight: 700; }
.product-copy .quiet-link .mud-button-label { gap: 14px; }
.product-copy .quiet-link:hover { background: transparent; color: var(--accent); }
.product-copy .mud-button-icon-end svg { font-size: 18px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 16px; }
.legal-links a { font-size: 12px; color: var(--muted); }
.trace-dialog-description { font-size: 15px; line-height: 1.8; color: var(--muted); margin-bottom: 20px; }
.trace-dialog-figure img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); }
.trace-dialog-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.status-page { padding-block: 95px; min-height: 55vh; }
.status-page h1 { font-size: clamp(30px,4vw,50px); line-height: 1.15; letter-spacing: -.04em; margin-bottom: 20px; }
.status-page p { margin-bottom: 28px; color: var(--muted); max-width: 650px; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 3000; background: var(--surface); color: var(--ink); border-top: 1px solid var(--line); padding: 16px 24px; font-size: 14px; }
#blazor-error-ui a { margin-left: 20px; color: var(--accent); text-decoration: underline; }
#blazor-error-ui button { float: right; border: 0; background: none; color: var(--ink); font-size: 20px; }
#components-reconnect-modal { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
#components-reconnect-modal button { background: var(--brand); color: #fff; border: 0; border-radius: 10px; padding: 10px 18px; font: inherit; font-size: 14px; }
@media (max-width: 700px) {
  .brand-button.mud-button-root { font-size: 13px; padding: 13px 18px; min-height: 48px; }
  .brand-button .mud-button-label { gap: 16px; }
  .principles .mud-expand-panel-header { font-size: 17px; padding-block: 23px; }
}
@media (max-width: 380px) {
  .language-menu .mud-button-icon-start { display: none; }
  .header-preferences .mud-button-root { padding-inline: 6px; }
}

.header-preferences .mud-icon-button { padding: 8px; }
.header-preferences .language-menu .mud-button-root { padding-inline: 8px; }