/* Settings detail views keep their existing data and use the active product shell. */
body.settings-detail-open #drawer,
#drawer[data-settings-context="true"] {
  --xsd-text: #f0f0f4;
  --xsd-muted: #9b9da9;
  --xsd-line: #ffffff0c;
  --xsd-surface: #252632;
  --xsd-raised: #2d2f3b;
  --xsd-accent: #fe2c55;
  background: var(--xsd-surface);
  color: var(--xsd-text);
  color-scheme: dark;
}

#drawer[data-settings-context="true"] > .drawer-header { background: var(--xsd-surface); color: var(--xsd-text); border-bottom-color: var(--xsd-line); }
#drawer[data-settings-context="true"] > .drawer-header h2,
#drawer[data-settings-context="true"] #drawer-close { color: var(--xsd-text); }
#drawer[data-settings-context="true"] > .drawer-body { display: block; min-width: 0; min-height: 0; padding: 0; overflow-x: hidden; overflow-y: auto; background: var(--xsd-surface); }
#drawer[data-settings-context="true"] > .drawer-body.xs-detail-host { display: flex; flex: 1 1 auto; overflow: hidden; }
#drawer .xs-detail-view,
#drawer .xs-detail-view *,
#drawer .xs-detail-view *::before,
#drawer .xs-detail-view *::after { box-sizing: border-box; }
#drawer .xs-detail-view { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; min-width: 0; min-height: 0; overflow: hidden; color: var(--xsd-text); font-size: 14px; line-height: 1.7; -webkit-text-size-adjust: 100%; }
#drawer .xs-detail-view [hidden] { display: none !important; }
#drawer .xs-detail-scroll { flex: 1 1 auto; min-height: 0; padding: 24px 28px 32px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #4e505c transparent; }
#drawer .xs-detail-view a { color: #ff8aa1; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
#drawer .xs-detail-view a:hover { color: #ffb4c3; }
#drawer .xs-detail-view :is(button,a,summary):focus-visible { outline: 2px solid var(--xsd-accent); outline-offset: 3px; }
#drawer .xs-detail-intro { margin: 0 0 18px; color: var(--xsd-muted); font-size: 13px; line-height: 1.8; }
#drawer .xs-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; padding: 40px 28px; text-align: center; }
#drawer .xs-detail-empty h3 { margin: 0 0 8px; color: var(--xsd-text); font-size: 16px; font-weight: 600; line-height: 1.6; }
#drawer .xs-detail-empty p { max-width: 310px; margin: 0; color: var(--xsd-muted); font-size: 13px; line-height: 1.8; }
#drawer .xs-detail-action { min-height: 36px; margin: 20px 0 0; padding: 7px 19px; border: 1px solid #ffffff14; border-radius: 5px; background: #ffffff08; color: var(--xsd-text); font-size: 13px; cursor: pointer; }
#drawer .xs-detail-action:hover { background: #ffffff12; }
#drawer .xs-detail-loader { display: block; width: 22px; height: 22px; margin-bottom: 18px; border: 2px solid var(--xsd-line); border-top-color: var(--xsd-accent); border-radius: 50%; animation: xs-detail-spin 800ms linear infinite; }

/* Policy documents are read inside Settings without importing the public page shell. */
#drawer .xs-document-intro { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--xsd-line); }
#drawer .xs-document-brand { margin: 0 0 12px; color: var(--xsd-text); font-size: 17px; font-weight: 650; line-height: 1.5; }
#drawer .xs-document-intro p { margin: 0 0 12px; }
#drawer .xs-document-lede { color: var(--xsd-muted); font-size: 13px; line-height: 1.9; }
#drawer .xs-document-updated { color: #777a8b; font-size: 11px; }
#drawer .xs-document-tagline { color: var(--xsd-text); font-size: 20px; font-weight: 600; line-height: 1.6; }
#drawer .xs-document-contents { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 0 0 28px; padding: 0 0 18px; border-bottom: 1px solid var(--xsd-line); }
#drawer .xs-document-contents a { color: #babcc7; font-size: 12px; text-decoration: none; }
#drawer .xs-document-section { margin: 0 0 27px; }
#drawer .xs-document h2 { margin: 0 0 13px; color: var(--xsd-text); font-size: 17px; font-weight: 600; line-height: 1.7; }
#drawer .xs-document h3,
#drawer .xs-document h4 { margin: 19px 0 8px; color: var(--xsd-text); font-size: 14px; font-weight: 600; line-height: 1.7; }
#drawer .xs-document p { margin: 0 0 13px; font-size: 13px; line-height: 1.95; overflow-wrap: anywhere; }
#drawer .xs-document ul,
#drawer .xs-document ol { margin: 0 0 15px; padding-left: 21px; }
#drawer .xs-document li { margin: 0 0 10px; color: var(--xsd-muted); font-size: 13px; line-height: 1.95; }
#drawer .xs-document strong { color: var(--xsd-text); font-weight: 600; }
#drawer .xs-document code { padding: 2px 5px; border-radius: 3px; background: #ffffff09; color: #d7d9e4; font-size: 12px; }
#drawer .xs-document li h2 { margin: 18px 0 8px; font-size: 14px; }
#drawer .xs-document-note { margin: 16px 0; padding: 12px 16px; border-left: 2px solid #8a8da0; background: #ffffff04; color: var(--xsd-muted); }
#drawer .xs-document-note p:last-child { margin-bottom: 0; }
#drawer .xs-document .xs-document-example { margin: 15px 0; padding: 14px 16px; border-radius: 5px; background: #1f202a; color: #aeb0bf; font-size: 12px; white-space: pre-line; }
#drawer .xs-document .xs-document-fine-print { color: var(--xsd-muted); font-size: 11px; }
#drawer .xs-document .xs-document-contact { overflow-wrap: anywhere; }
#drawer .xs-document-feature { margin: 0 0 18px; }
#drawer .xs-document-feature h3 { margin-top: 0; }

/* Help uses accessible native disclosure rows and a compact shortcut legend. */
#drawer .xs-help-item { border-bottom: 1px solid var(--xsd-line); }
#drawer .xs-help-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; color: var(--xsd-text); font-size: 14px; font-weight: 500; list-style: none; cursor: pointer; }
#drawer .xs-help-item summary::-webkit-details-marker { display: none; }
#drawer .xs-help-chevron { width: 7px; height: 7px; margin-right: 4px; border-right: 1.5px solid var(--xsd-muted); border-bottom: 1.5px solid var(--xsd-muted); transform: rotate(45deg); transition: transform 160ms ease; }
#drawer .xs-help-item[open] .xs-help-chevron { transform: rotate(225deg); }
#drawer .xs-help-answer { margin: -2px 22px 18px 0; color: var(--xsd-muted); font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
#drawer .xs-help-shortcuts { margin: 24px 0 12px; }
#drawer .xs-help-shortcuts h3 { margin: 0 0 12px; color: var(--xsd-text); font-size: 14px; font-weight: 600; }
#drawer .xs-help-shortcuts dl { margin: 0; }
#drawer .xs-help-shortcuts dl > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--xsd-line); }
#drawer .xs-help-shortcuts dt { flex: 0 0 auto; }
#drawer .xs-help-shortcuts kbd { display: inline-block; min-width: 30px; padding: 1px 7px; border: 1px solid #ffffff14; border-radius: 4px; background: #ffffff04; color: #d5d6df; font: inherit; font-size: 12px; text-align: center; }
#drawer .xs-help-shortcuts dd { margin: 0; color: var(--xsd-muted); font-size: 12px; text-align: right; }

/* Shared list treatment for feedback and hidden-video management. */
#drawer[data-settings-context="true"] > .drawer-body > .xs-detail-intro { margin: 22px 28px 12px; }
#drawer .xs-detail-list { padding: 0 28px 28px; }
#drawer .xs-detail-row { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 17px 0; border-bottom: 1px solid var(--xsd-line); }
#drawer .xs-detail-row > div { flex: 1 1 auto; min-width: 0; }
#drawer .xs-detail-row h3 { margin: 0 0 5px; color: var(--xsd-text); font-size: 14px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
#drawer .xs-detail-row p { margin: 0; color: var(--xsd-muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
#drawer .xs-detail-row .xs-detail-action { flex: 0 0 auto; margin: 0; padding: 6px 12px; }

/* P2P keeps the existing live metrics, controls and data attributes. */
#drawer[data-settings-context="true"] .p2p-panel { padding: 25px 28px 30px; color: var(--xsd-text); }
#drawer[data-settings-context="true"] .p2p-eyebrow { margin-bottom: 9px; color: var(--xsd-muted); font-size: 11px; letter-spacing: .04em; }
#drawer[data-settings-context="true"] .p2p-panel h3 { font-size: 23px; }
#drawer[data-settings-context="true"] .p2p-intro { margin-top: 11px; margin-bottom: 23px; color: var(--xsd-muted); font-size: 13px; }
#drawer[data-settings-context="true"] .p2p-control { gap: 16px; padding: 16px 0; border: 0; border-top: 1px solid var(--xsd-line); border-bottom: 1px solid var(--xsd-line); border-radius: 0; background: transparent; }
#drawer[data-settings-context="true"] .p2p-control small { color: var(--xsd-muted); font-size: 11px; }
#drawer[data-settings-context="true"] .p2p-status { margin-top: 22px; color: var(--xsd-muted); }
#drawer[data-settings-context="true"] .p2p-metrics { border-color: var(--xsd-line); border-radius: 8px; background: var(--xsd-line); }
#drawer[data-settings-context="true"] .p2p-metrics div { padding: 17px 16px; background: var(--xsd-raised); }
#drawer[data-settings-context="true"] .p2p-metrics dd { color: var(--xsd-text); font-size: 23px; overflow-wrap: anywhere; }
#drawer[data-settings-context="true"] .p2p-metrics dt,
#drawer[data-settings-context="true"] .p2p-note { color: var(--xsd-muted); }
#drawer[data-settings-context="true"] .p2p-note { font-size: 11px; }
#drawer[data-settings-context="true"] .p2p-privacy { color: #ff8aa1; }

html[data-ui="mobile"] #drawer[data-settings-context="true"] {
  --xsd-text: #16171b;
  --xsd-muted: #8c8e99;
  --xsd-line: #f0f0f2;
  --xsd-surface: #fff;
  --xsd-raised: #f7f7f8;
  color-scheme: light;
}
html[data-ui="mobile"] #drawer[data-mobile-page="true"][data-settings-context="true"] > .drawer-header { background: #fff; border-bottom-color: var(--xsd-line); }
html[data-ui="mobile"] #drawer[data-mobile-page="true"][data-settings-context="true"] > .drawer-header h2,
html[data-ui="mobile"] #drawer[data-mobile-page="true"][data-settings-context="true"] #drawer-close { color: var(--xsd-text); }
html[data-ui="mobile"] #drawer[data-mobile-page="true"][data-settings-context="true"] > .drawer-body { min-width: 0; min-height: 0; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; background: var(--xsd-surface); }
html[data-ui="mobile"] #drawer[data-mobile-page="true"][data-settings-context="true"] > .drawer-body.xs-detail-host { display: flex; flex: 1 1 auto; overflow: hidden; }
html[data-ui="mobile"] #drawer .xs-detail-scroll { padding: 20px max(20px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); scrollbar-width: none; }
html[data-ui="mobile"] #drawer .xs-detail-scroll::-webkit-scrollbar { display: none; }
html[data-ui="mobile"] #drawer .xs-detail-intro { font-size: 12px; }
html[data-ui="mobile"] #drawer .xs-detail-action { border-color: #ececf0; background: #f7f7f8; color: #464851; }
html[data-ui="mobile"] #drawer .xs-detail-action:active { background: #eeeef1; }
html[data-ui="mobile"] #drawer .xs-document-intro { margin-bottom: 24px; padding-bottom: 17px; }
html[data-ui="mobile"] #drawer .xs-document-brand { font-size: 16px; }
html[data-ui="mobile"] #drawer .xs-document p,
html[data-ui="mobile"] #drawer .xs-document li { font-size: 13px; line-height: 1.95; }
html[data-ui="mobile"] #drawer .xs-document h2 { font-size: 16px; }
html[data-ui="mobile"] #drawer .xs-document code { background: #f3f3f5; color: #6b6d78; }
html[data-ui="mobile"] #drawer .xs-document .xs-document-example { background: #f7f7f8; color: #747682; }
html[data-ui="mobile"] #drawer .xs-document-note { border-left-color: #d8d9e0; background: #f7f7f8; }
html[data-ui="mobile"] #drawer .xs-document-contents a { color: #7f818c; }
html[data-ui="mobile"] #drawer .xs-detail-view a { color: #e74a6b; }
html[data-ui="mobile"] #drawer .xs-help-item summary { min-height: 57px; font-size: 15px; }
html[data-ui="mobile"] #drawer .xs-help-answer { font-size: 13px; }
html[data-ui="mobile"] #drawer .xs-help-shortcuts kbd { border-color: #e7e7ec; background: #f8f8fa; color: #777a85; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] > .drawer-body > .xs-detail-intro { margin: 18px 20px 10px; }
html[data-ui="mobile"] #drawer .xs-detail-list { padding: 0 max(20px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-panel { max-width: 640px; padding: 22px max(20px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-panel h3 { font-size: 24px; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-control strong { font-size: 15px; font-weight: 500; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-control input { background: #d9dadd; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-control input:checked { background: #fe2c55; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-control input:focus-visible { outline-color: #fe2c55; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-status { margin-top: 21px; font-size: 12px; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-metrics { border-radius: 6px; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-metrics dd { font-size: 22px; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-metrics dt { font-size: 11px; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-privacy { color: #e74a6b; }

@media (max-height: 480px) {
  html[data-ui="mobile"] #drawer .xs-detail-scroll { padding-top: 15px; }
  html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-panel { padding-top: 16px; }
  html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
  html[data-ui="mobile"] #drawer[data-settings-context="true"] .p2p-metrics div { padding: 15px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #drawer .xs-detail-view *, #drawer .xs-detail-view *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@keyframes xs-detail-spin { to { transform: rotate(360deg); } }

/* The install page reuses PWA's actual prompt and device-specific instructions. */
#drawer[data-settings-context="true"] > .drawer-body.xs-install-host {
  display: block;
  padding: 26px 32px 30px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#drawer[data-settings-context="true"] .xs-install-host .pwa-hero { padding-top: 2px; }
#drawer[data-settings-context="true"] .xs-install-host .pwa-app-icon { width: 78px; height: 78px; margin-bottom: 17px; border-radius: 20px; }
#drawer[data-settings-context="true"] .xs-install-host .pwa-hero h3 { color: var(--xsd-text); font-size: 22px; line-height: 1.5; }
#drawer[data-settings-context="true"] .xs-install-host .pwa-hero p { max-width: 380px; color: var(--xsd-muted); font-size: 13px; }
#drawer[data-settings-context="true"] .xs-install-host .pwa-features { gap: 12px; margin: 23px 0 17px; padding-bottom: 18px; border-bottom: 1px solid var(--xsd-line); }
#drawer[data-settings-context="true"] .xs-install-host .pwa-feature { min-height: 58px; color: var(--xsd-muted); font-size: 11px; }
#drawer[data-settings-context="true"] .xs-install-host .pwa-feature .pwa-icon { color: var(--xsd-text); }
#drawer[data-settings-context="true"] .xs-install-host .pwa-status { margin-bottom: 17px; color: var(--xsd-muted); font-size: 12px; }
#drawer[data-settings-context="true"] .xs-install-host .pwa-instructions { padding: 16px 18px; border: 1px solid var(--xsd-line); border-radius: 8px; background: var(--xsd-raised); }
#drawer[data-settings-context="true"] .xs-install-host .pwa-instructions h4 { color: var(--xsd-text); font-size: 13px; }
#drawer[data-settings-context="true"] .xs-install-host .pwa-steps { color: var(--xsd-muted); font-size: 12px; }
#drawer[data-settings-context="true"] .xs-install-host .pwa-steps li::marker { color: var(--xsd-muted); }
#drawer[data-settings-context="true"] .xs-install-host .pwa-layout-note { color: var(--xsd-muted); font-size: 11px; }
#drawer[data-settings-context="true"] .xs-install-host .pwa-install { border-radius: 6px; background: var(--xsd-accent); color: #fff; }
#drawer[data-settings-context="true"] .xs-install-host .pwa-done { border: 1px solid var(--xsd-line); border-radius: 6px; background: var(--xsd-raised); color: var(--xsd-text); }
#drawer[data-settings-context="true"] .xs-install-host button:focus-visible { outline: 2px solid var(--xsd-accent); outline-offset: 3px; }
#drawer[data-settings-context="true"] .xs-install-host button:disabled { opacity: .5; cursor: default; }
html[data-ui="mobile"] #drawer[data-mobile-page="true"][data-settings-context="true"] > .drawer-body.xs-install-host { padding: 28px max(22px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px)); }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .xs-install-host .pwa-hero h3 { font-size: 23px; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .xs-install-host .pwa-hero p { font-size: 13px; line-height: 1.9; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .xs-install-host .pwa-instructions { border-color: transparent; background: #f7f7f8; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .xs-install-host .pwa-instructions h4 { font-size: 14px; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .xs-install-host .pwa-steps { font-size: 13px; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .xs-install-host :is(.pwa-done,.pwa-install) { min-height: 45px; font-size: 14px; }

/* An embedded library keeps its actions and uses the surrounding Settings header. */
html[data-ui="mobile"] #drawer[data-mobile-page="true"][data-settings-context="true"]:has(.xme-collection) > .drawer-header { display: flex; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .xme-collection-header { display: none; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .xme-collection-header:has(.xme-collection-head-action) { display: flex; justify-content: flex-end; min-height: 42px; padding: 0 max(18px, env(safe-area-inset-right, 0px)) 0 max(18px, env(safe-area-inset-left, 0px)); border: 0; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .xme-collection-header :is(.xme-back,.xme-collection-heading,.xme-collection-header-spacer) { display: none; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] .xme-collection-head-action { min-height: 40px; font-size: 12px; }
html[data-ui="mobile"] #drawer[data-settings-context="true"] > .drawer-body:has(.xme-collection) { display: flex; flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] .xdp-collection { min-height: 0; padding: 20px 26px 26px; --xdp-muted: var(--xsd-muted); --xdp-border: var(--xsd-line); }
html[data-ui="desktop"] #drawer[data-settings-context="true"] .xdp-collection > .xdp-page-heading { display: none; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] .xdp-collection > .xdp-page-heading:has(> .xdp-button) { display: flex; justify-content: flex-end; min-height: 0; margin: 0 0 16px; padding: 0; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] .xdp-collection > .xdp-page-heading > div { display: none; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] .xdp-collection > .xdp-page-heading > .xdp-button { min-width: 0; min-height: 34px; padding: 6px 12px; font-size: 12px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] .xdp-video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 17px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] .xdp-video-media { aspect-ratio: 4 / 3; border-radius: 7px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] .xdp-video-title { font-size: 13px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] .xdp-content-area { min-height: 0; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] .xdp-empty { min-height: 300px; }

/* The profile editor retains its real Back/Save controls inside the desktop dialog. */
html[data-ui="desktop"] #drawer[data-settings-context="true"] > .drawer-header h2 { flex: 1 1 auto; min-width: 0; margin: 0 12px; text-align: left; }
html[data-ui="desktop"] #drawer[data-settings-context="true"]:has(.xpe) > .drawer-header { display: contents; }
html[data-ui="desktop"] #drawer[data-settings-context="true"]:has(.xpe) > .drawer-header :is(h2,#settings-back) { display: none; }
html[data-ui="desktop"] #drawer[data-settings-context="true"]:has(.xpe) > .drawer-header #drawer-close { position: absolute; top: 18px; right: 16px; z-index: 4; }
html[data-ui="desktop"] #drawer[data-settings-context="true"]:has(.xpe) > #drawer-body { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe {
  --xpe-bg: #252632;
  --xpe-card: #2d2f3b;
  --xpe-text: #f0f0f4;
  --xpe-secondary: #a3a5b2;
  --xpe-muted: #7f8293;
  --xpe-line: #ffffff0b;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--xpe-bg);
  box-shadow: none;
  color-scheme: dark;
}
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-header { grid-template-columns: 40px minmax(0,1fr) 68px; min-height: 65px; gap: 8px; padding: 10px 64px 10px 22px; border-bottom-color: var(--xpe-line); background: var(--xpe-bg); }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-header h1 { font-size: 17px; text-align: left; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-back { color: #a8aab7; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-back:hover { background: #ffffff08; color: #fff; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-save { min-width: 64px; min-height: 32px; padding: 6px 14px; border-radius: 5px; font-size: 12px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-scroll { display: grid; grid-template-columns: 175px minmax(0,1fr); align-items: start; gap: 22px; padding: 25px 24px 30px; scrollbar-color: #4e505c transparent; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-hero { margin: 0; padding: 13px 5px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-avatar-picker { width: 88px; height: 88px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-avatar { border-color: #ffffff1f; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-avatar-initial { font-size: 33px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-display-name { margin-top: 14px; font-size: 17px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-progress { margin-top: 19px; color: #828595; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-progress strong { color: #a1a4b3; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-progress-track { background: #3e404e; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-card { border-radius: 8px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-section-title { color: #bcbeca; font-size: 12px; font-weight: 500; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-section + .xpe-section { margin-top: 20px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-field { padding: 12px 14px 10px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-field:focus-within { background: #ffffff04; box-shadow: inset 0 0 0 1px #fe2c5540; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-field :is(input,textarea,select) { font-size: 14px; line-height: 23px; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-field select option { background: var(--xpe-card); color: var(--xpe-text); }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-field :is(input,textarea)::placeholder { color: #737687; -webkit-text-fill-color: #737687; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-field:has([aria-invalid="true"]) { background: #fe2c5508; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-count { color: #777b8d; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body :is(.xpe-copy,.xpe-avatar-reset):not(:disabled):hover { background: #ffffff08; color: #c6c8d2; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-copy { background: #ffffff06; color: #a3a6b4; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-id-row > :first-child > :last-child { color: #8b8f9f; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-inline-status { border-color: #ffffff0a; background: #303340; color: #a6aab9; }
html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-error { border-color: #f5658522; background: #fe2c550a; color: #f58ca4; }

/* Every settings descendant follows the same mobile push and back transition. */
html[data-ui="mobile"] #drawer[data-settings-context="true"].is-entering { animation: xs-mobile-push 260ms cubic-bezier(.2,.75,.25,1) both; }
html[data-ui="mobile"] #drawer[data-settings-context="true"].is-returning { animation: xs-mobile-return 220ms cubic-bezier(.2,.75,.25,1) both; }
html[data-ui="mobile"] #drawer[data-settings-context="true"].is-closing { pointer-events: none; animation: xs-mobile-pop 220ms ease-in both; }

@media (max-width: 620px) {
  html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-scroll { display: block; padding: 20px; }
  html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-hero { display: grid; grid-template-columns: 80px minmax(0,1fr); align-items: center; gap: 2px 17px; margin: 0 0 22px; padding: 0; text-align: left; }
  html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-avatar-picker { grid-row: 1 / span 3; width: 76px; height: 76px; }
  html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-display-name { margin: 0; }
  html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-avatar-reset { justify-self: start; min-height: 26px; margin: 0; padding: 3px 0; }
  html[data-ui="desktop"] #drawer[data-settings-context="true"] #drawer-body .xpe-progress { grid-column: 1 / -1; max-width: none; margin-top: 12px; }
}
@media (max-height: 480px) {
  html[data-ui="mobile"] #drawer[data-mobile-page="true"][data-settings-context="true"] > .drawer-body.xs-install-host { padding-top: 18px; }
  html[data-ui="mobile"] #drawer[data-settings-context="true"] .xs-install-host .pwa-app-icon { width: 62px; height: 62px; margin-bottom: 12px; border-radius: 16px; }
  html[data-ui="mobile"] #drawer[data-settings-context="true"] .xs-install-host .pwa-features { margin-top: 16px; margin-bottom: 12px; padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="mobile"] #drawer[data-settings-context="true"],
  #drawer[data-settings-context="true"] .xs-install-host *,
  #drawer[data-settings-context="true"] .p2p-control,
  #drawer[data-settings-context="true"] .p2p-control::after { animation: none !important; transition: none !important; }
}