/* Surface hierarchy only: preserve semantic alerts, primary actions and native flows. */
:root, html[data-theme="light"] {
  --bg: #edf2f8;
  --bg-strong: #e5ecf5;
  --paper: #ffffff;
  --paper-strong: #f0f5fb;
  --line: #cbd6e4;
  --soft-line: #dce5f0;
  --muted: #576579;
  --surface-gradient: linear-gradient(145deg, #ffffff 0%, #fafcff 55%, #f0f5fd 100%);
  --surface-inset: #f0f5fb;
  --surface-deep: #e6eef8;
  --surface-input: #ffffff;
  --surface-hover: #e1ecfa;
  --surface-shadow: 0 8px 28px rgba(41, 65, 102, .065);
}
html:root[data-theme="dark"] {
  --bg: #14171d;
  --bg-strong: #11141a;
  --paper: #222833;
  --paper-strong: #2a3240;
  --line: #445065;
  --soft-line: #354052;
  --muted: #b7c3d4;
  --surface-gradient: linear-gradient(145deg, #262c37 0%, #222833 55%, #1d2634 100%);
  --surface-inset: #2b3443;
  --surface-deep: #354256;
  --surface-input: #181f2a;
  --surface-hover: #3c4c64;
  --surface-shadow: 0 8px 28px rgba(0, 0, 0, .16);
}
html[data-theme] :is(.cabinet-card, .surface-card, .section-surface, .faq-main-panel,
  .import-panel, .setup-card, .proxy-banner-section, .benefits-surface,
  .web-notice, .web-support-tickets, .web-support-form) {
  background: var(--surface-gradient);
  border-color: var(--line);
  box-shadow: var(--surface-shadow);
}
html[data-theme] :is(.profile-subsection, .account-panel, .section-list-panel,
  .setting-tile, .settings-disclosure, .device-disclosure, .kb-card,
  .step-details, .article-hero-spoiler, .referral-table-card) {
  background: var(--surface-inset);
  border-color: var(--line);
  box-shadow: none;
}
html[data-theme] :is(.summary-item, .account-metric, .account-metric-bonus,
  .account-action-bar, .settings-choice, .settings-toggle, .auto-profile-choice,
  .device-edit, .device-remove) {
  background: var(--surface-deep);
  border-color: var(--line);
  box-shadow: none;
}
html[data-theme] details details {
  background: var(--surface-deep);
  border-color: var(--line);
}
html[data-theme] :is(.device-edit, .device-remove) {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
}
html[data-theme] :is(.device-edit, .device-remove) > summary { padding-block: 4px; }
html[data-theme] :is(.device-disclosure, .settings-disclosure, .step-details)[open] {
  border-color: var(--accent-line);
}
html[data-theme] :is(.device-disclosure-summary, .settings-disclosure > summary):hover {
  background: var(--surface-hover);
}
html[data-theme] .device-disclosure-summary { border-radius: 21px; }
html[data-theme] .device-disclosure[open] > summary { border-radius: 21px 21px 0 0; }
html[data-theme] :is(.device-access-card input, .settings-form input:not([type="checkbox"]):not([type="radio"]),
  .web-support-form textarea, .platform-select, .import-platform-select, .import-application-select) {
  background: var(--surface-input); color: var(--ink); border-color: var(--line);
}
html[data-theme] .web-support-message:not(.web-support-message-own) {
  background: var(--surface-inset); border-color: var(--line);
}
html[data-theme] .device-remove summary { color: #b52d3d; }
html[data-theme="dark"] .device-remove summary { color: #ffb2bb; }
/* Give expanded content its own breathing room below the summary. */
html[data-theme] .device-disclosure-body { padding-top: 20px; }
html[data-theme] .device-access-card .button.device-key-view {
  border: 1px solid var(--accent);
  background: var(--surface-input);
}
html[data-theme] .device-access-card .button.device-key-view:hover { background: var(--surface-hover); }
html[data-theme] .device-key-view:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
html[data-theme] .web-support-tickets {
  display: flex; flex-direction: column; gap: 12px;
}
html[data-theme] .web-support-tickets h2 { margin: 0 0 4px; }
html[data-theme] .web-support-tickets > a:not(.button) {
  border: 1px solid var(--line); background: var(--surface-inset);
}
html[data-theme] .web-support-tickets > a[aria-current] {
  background: var(--accent-soft); border-color: var(--accent-line);
}
.web-notice-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.web-notice-heading > div { min-width: 0; }
.web-notice-delete { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-inset); color: #b52d3d; cursor: pointer; }
.web-notice-delete svg { width: 22px; height: 22px; }
html[data-theme="dark"] .web-notice-delete { color: #ffb2bb; }
.web-notice-delete:hover { background: var(--surface-deep); }
.web-notice-delete:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }