/* Shared app appearance: "Lagune" (light) and "Nachtschicht" (dark).
   Landing and unmarked documents are deliberately outside this scope.
   Every text colour reaches at least 4.5:1 on its surface; field borders and
   focus rings reach at least 3:1. */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans/plus-jakarta-sans-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans/plus-jakarta-sans-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans/plus-jakarta-sans-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans/plus-jakarta-sans-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans/plus-jakarta-sans-800.ttf') format('truetype'); font-weight: 800 900; font-style: normal; font-display: swap; }
:root {
  --ui-bg: #f3f6f9;
  --ui-bg-fill: linear-gradient(180deg, #e4f4f2 0, #f3f6f9 420px);
  --ui-surface: #ffffff;
  --ui-surface-soft: #f5f8fb;
  --ui-text: #0f1b2d;
  --ui-muted: #44536a;
  --ui-subtle: #5d6b80;
  --ui-border: #e1e8ef;
  --ui-field-border: #7c8c9f;
  --ui-accent: #0a7383;
  --ui-accent-strong: #065f66;
  --ui-accent-soft: #e2f4f3;
  --ui-teal: #0b7a68;
  --ui-grad: linear-gradient(135deg, #0a7383 0%, #0b7a68 100%);
  --ui-on-grad: #ffffff;
  --ui-grad-shadow: 0 8px 20px rgba(10, 115, 131, 0.28);
  --ui-focus: #0e8f9a;
  --ui-danger: #b4232c;
  --ui-danger-soft: #fde8ea;
  --ui-warning: #8a5300;
  --ui-warning-soft: #fff1d2;
  --ui-success: #177245;
  --ui-success-soft: #ddf5e8;
  --ui-info: #1d5bb8;
  --ui-info-soft: #e3eefd;
  --ui-track: #e6ecf2;
  --ui-disabled: #e9eef3;
  --ui-shadow: 0 1px 2px rgba(15, 27, 45, 0.05), 0 10px 30px rgba(15, 27, 45, 0.07);
  --ui-shadow-raised: 0 20px 50px rgba(15, 27, 45, 0.22);
  --ui-radius-field: 14px;
  --ui-radius-item: 20px;
  --ui-radius-card: 26px;
  --ui-radius-dialog: 32px;
  --ui-radius-pill: 999px;
  --ui-font: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --ui-bg: #0b1220;
  --ui-bg-fill: radial-gradient(900px 520px at 0% 0%, rgba(34, 211, 238, 0.14), rgba(11, 18, 32, 0) 70%), radial-gradient(700px 500px at 100% 0%, rgba(124, 58, 237, 0.10), rgba(11, 18, 32, 0) 70%), #0b1220;
  --ui-surface: #121b2e;
  --ui-surface-soft: #18233a;
  --ui-text: #eef3fb;
  --ui-muted: #b4c0d4;
  --ui-subtle: #8c9ab3;
  --ui-border: #26344f;
  --ui-field-border: #63759a;
  --ui-accent: #22d3ee;
  --ui-accent-strong: #a5f0f8;
  --ui-accent-soft: #16304a;
  --ui-teal: #2dd4bf;
  --ui-grad: linear-gradient(135deg, #22d3ee 0%, #2dd4bf 100%);
  --ui-on-grad: #06202a;
  --ui-grad-shadow: 0 8px 24px rgba(34, 211, 238, 0.25);
  --ui-focus: #22d3ee;
  --ui-danger: #ff8e96;
  --ui-danger-soft: #3f1820;
  --ui-warning: #fbbf5a;
  --ui-warning-soft: #3a2b10;
  --ui-success: #6ee7a8;
  --ui-success-soft: #12352a;
  --ui-info: #a9d2ff;
  --ui-info-soft: #183554;
  --ui-track: #26344f;
  --ui-disabled: #1d2840;
  --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --ui-shadow-raised: 0 20px 50px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
html:has(body.app-design), body.app-design {
  --bg-dark: var(--ui-bg); --bg: var(--ui-bg); --canvas: var(--ui-bg);
  --bg-primary: var(--ui-bg); --bg-secondary: var(--ui-surface-soft);
  --bg-card: var(--ui-surface); --card-bg: var(--ui-surface); --surface: var(--ui-surface);
  --bg-card-hover: var(--ui-surface-soft);
  --text-primary: var(--ui-text); --text: var(--ui-text); --text-secondary: var(--ui-muted); --text-muted: var(--ui-subtle); --muted: var(--ui-muted);
  --border-color: var(--ui-border); --border: var(--ui-border); --card-border: var(--ui-border);
  --primary: var(--ui-accent); --primary-hover: var(--ui-accent-strong); --primary-gradient: var(--ui-grad);
  --accent: var(--ui-teal); --accent-hover: var(--ui-teal); --focus: var(--ui-focus);
  --success: var(--ui-success); --success-bg: var(--ui-success-soft);
  --warning: var(--ui-warning); --warning-bg: var(--ui-warning-soft);
  --danger: var(--ui-danger); --danger-bg: var(--ui-danger-soft);
  --info: var(--ui-info);
  --font-body: var(--ui-font); --font-display: var(--ui-font);
  --care-primary: var(--ui-accent); --care-primary-strong: var(--ui-accent-strong);
  --care-surface: var(--ui-surface); --care-surface-solid: var(--ui-surface); --care-border: var(--ui-border);
  --care-text: var(--ui-text); --care-muted: var(--ui-muted); --care-radius: var(--ui-radius-card);
  --legal-ink: var(--ui-text); --legal-muted: var(--ui-muted); --legal-line: var(--ui-border); --legal-accent: var(--ui-accent);
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06); --shadow-md: var(--ui-shadow); --shadow-lg: var(--ui-shadow-raised);
}
body.app-design {
  background: var(--ui-bg-fill) !important;
  background-color: var(--ui-bg) !important;
  color: var(--ui-text);
  font-family: var(--ui-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.app-design::before { background: none; }
body.app-design :is(h1,h2,h3,h4,h5,h6,.logo,.logo-title,.brand,.care-brand) {
  font-family: var(--ui-font); letter-spacing: -0.02em;
}
body.app-design :is(h1,h2,h3) { line-height: 1.25; font-weight: 800; }
body.app-design :is(p,li,label,legend,.avv-page,.avv-dialog,.legal-document) { color: var(--ui-text); }
body.app-design :is(.muted,.subtitle,.lead,.breadcrumb,.related,.avv-muted,.avv-subtitle) { color: var(--ui-muted); }
body.app-design :where(a:not(.btn):not(.button):not(.care-nav-link)) { color: var(--ui-accent); }
body.app-design :is(button,input,select,textarea) { font: inherit; }
body.app-design .forgot-pwd-link-container { flex-wrap: wrap; gap: 8px 18px; }
body.app-design :is(.forgot-pwd-link-container,.auth-switch) a { font-weight: 600; }
body.app-design :is(.forgot-pwd-link-container,.auth-switch) a:hover { color: var(--ui-accent-strong); }
/* Times, countdowns and counters keep their width while they tick. */
body.app-design :is(time,.countdown,.timer,.case-timer,.remaining-time,.stat-value,.badge) { font-variant-numeric: tabular-nums; }

/* Fields */
body.app-design :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),select,textarea,.premium-input) {
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-field-border) !important;
  border-radius: var(--ui-radius-field);
}
body.app-design :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),select,textarea,.premium-input):focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px var(--ui-accent-soft) !important;
}
body.app-design :is(input,select,textarea)[aria-invalid='true'] { border: 2px solid var(--ui-danger) !important; }
body.app-design :is(input,textarea)::placeholder { color: var(--ui-subtle); opacity: 1; }
body.app-design :is(input[type='checkbox'],input[type='radio']) { accent-color: var(--ui-accent); }
body.app-design select option { background-color: var(--ui-surface); color: var(--ui-text); }

/* Buttons: pill shapes, one gradient primary, soft tonal variants */
body.app-design :is(button,.btn,.button,.care-button,.avv-link) { border-radius: var(--ui-radius-pill); box-shadow: none; }
body.app-design :is(.btn,.button,.care-button) { font-weight: 700; }
body.app-design :is(.btn-primary,.btn-login,.button-primary,.care-button-primary,.avv-primary) {
  background: var(--ui-grad) !important; border-color: transparent !important; color: var(--ui-on-grad) !important;
  font-weight: 800; box-shadow: var(--ui-grad-shadow);
}
body.app-design :is(.btn-primary,.btn-login,.button-primary,.care-button-primary,.avv-primary) :is(i,span) { color: inherit; }
body.app-design #btn-admin-passkey-login { background: var(--ui-accent-soft) !important; border-color: transparent !important; color: var(--ui-accent-strong) !important; box-shadow: none !important; }
body.app-design .login-card div[style*='opacity: 0.3'] { opacity: 1 !important; color: var(--ui-muted); }
body.app-design .login-card hr { border-top-color: var(--ui-border) !important; }
body.app-design :is(.btn-secondary,.btn-ghost,.care-button-secondary,.avv-entry button) {
  background: var(--ui-surface); border: 1px solid var(--ui-border); color: var(--ui-text);
}
body.app-design :is(.btn-secondary,.btn-ghost,.care-button-secondary):hover { background: var(--ui-surface-soft); border-color: var(--ui-field-border); }
body.app-design .btn-danger { background: var(--ui-danger-soft); border: 1px solid transparent; color: var(--ui-danger); font-weight: 800; }
body.app-design .btn-success { background: var(--ui-success-soft); border: 1px solid transparent; color: var(--ui-success); font-weight: 800; }
body.app-design .btn-warning { background: var(--ui-warning-soft); border: 1px solid transparent; color: var(--ui-warning); font-weight: 800; }
body.app-design :is(.btn-danger,.btn-success,.btn-warning):hover { border-color: currentColor; }
body.app-design .btn-small { border-radius: var(--ui-radius-pill); }
body.app-design .btn-icon { border-radius: 50%; color: var(--ui-muted); }
body.app-design .btn-icon:hover { background: var(--ui-surface-soft); color: var(--ui-text); }
body.app-design :is(.btn,button)[disabled] { background: var(--ui-disabled) !important; color: var(--ui-subtle) !important; box-shadow: none !important; opacity: 1; }

/* Surfaces */
body.app-design :is(.card,.panel,.glass-card,.dashboard-card,.stat-card,.auth-card,.login-container,.login-card,.care-card,.care-panel,.care-auth-card,.care-invite-card,.vpn-enroll-card,.legal-center__card,.legal-center__masthead,.avv-onboarding,.avv-provider,.avv-offer,.cta-box) {
  background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card); box-shadow: var(--ui-shadow); backdrop-filter: none;
}
body.app-design :is(.main-header,.care-header,.care-auth-shell,.care-mobile-shell,.care-mobile-header,.care-bottom-nav,.care-public-invite-card,.sidebar,.care-sidebar,.mobile-drawer,.avv-dialog,main.legal-document > header,main.legal-document > section,main.legal-document > footer) {
  background: var(--ui-surface) !important; color: var(--ui-text); border-color: var(--ui-border) !important;
}
body.app-design .main-header { box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05) !important; backdrop-filter: none; }
body.app-design :is(.modal-content,.modal-card,.custom-modal-card,main.legal-document > section,main.legal-document > header) {
  background: var(--ui-surface); color: var(--ui-text); border-radius: var(--ui-radius-dialog); border-color: var(--ui-border);
}
body.app-design :is(.modal-content,.modal-card,.custom-modal-card) { box-shadow: var(--ui-shadow-raised); }
body.app-design :is(.nav-link.active,.nav-item.active,.care-nav-item.is-active,.care-nav-link[aria-current='page'],.tab-button.active) {
  background: var(--ui-accent-soft); color: var(--ui-accent-strong) !important; box-shadow: none; border-radius: var(--ui-radius-pill);
}
body.app-design .main-nav li { border-radius: var(--ui-radius-pill); }
body.app-design .modal-tabs button.active { background: var(--ui-accent-soft) !important; color: var(--ui-accent-strong) !important; border-color: transparent !important; box-shadow: none; }
body.app-design :is(th,td,.care-row,.avv-steps li) { border-color: var(--ui-border); }
body.app-design :is(thead,.table-header) { background: var(--ui-surface-soft); }

/* Status */
body.app-design .badge { border-radius: var(--ui-radius-pill); background: var(--ui-surface-soft); color: var(--ui-muted); text-transform: none; letter-spacing: 0; font-size: 0.75rem; padding: 3px 10px; }
body.app-design .toast {
  background: var(--ui-surface); color: var(--ui-text); border: 0; border-radius: var(--ui-radius-item);
  box-shadow: var(--ui-shadow-raised); backdrop-filter: none;
}
body.app-design .toast.is-error { padding-right: 10px; }
body.app-design .toast-close {
  flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--ui-surface-soft); color: var(--ui-muted); cursor: pointer;
}
body.app-design .toast-close:hover { color: var(--ui-text); }
body.app-design .toast-icon { color: var(--ui-success); }
body.app-design .toast-icon.error { color: var(--ui-danger); }

body.app-design :is(.avv-page,.legal-document) { font-family: var(--ui-font); }
body.app-design .legal-document, body.app-design.legal-document {
  --legal-ink: var(--ui-text); --legal-muted: var(--ui-muted); --legal-line: var(--ui-border); --legal-accent: var(--ui-accent);
}
body.app-design :is(.legal-nav,.legal-notice,.care-auth-intro,.care-public-invite-summary) {
  background: var(--ui-accent-soft); color: var(--ui-text); border-color: var(--ui-border);
}
body.app-design .avv-message:not(.avv-error) { background: var(--ui-accent-soft); color: var(--ui-text); }
body.app-design .care-auth-status:is([data-tone='error'],[data-tone='danger']) { color: var(--ui-danger); }
body.app-design .care-auth-status[data-tone='warning'] { color: var(--ui-warning); }
body.app-design .care-auth-status[data-tone='success'] { color: var(--ui-success); }
body.app-design :is(.avv-page,.legal-document,.avv-dialog) :is(p,li,h1,h2,h3,label) { color: var(--ui-text); }
body.app-design :is(.avv-entry button,.avv-dialog button,.avv-dialog .avv-link) { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
/* Tonal button and solid danger confirmation */
body.app-design .btn-tonal { background: var(--ui-accent-soft); border: 1px solid transparent; color: var(--ui-accent-strong); font-weight: 800; }
body.app-design .btn-tonal:hover { border-color: currentColor; }
body.app-design .btn-danger-solid { background: var(--ui-danger) !important; border: 1px solid transparent; color: var(--ui-on-danger) !important; font-weight: 800; }

/* Active cases: toolbar, cards, avatar, remaining-time ring */
:root { --ui-on-danger: #ffffff;
  --ui-avatar-0-bg: #ffe3d6; --ui-avatar-0-fg: #8a3b12; --ui-avatar-1-bg: #ede7ff; --ui-avatar-1-fg: #4b2ea8;
  --ui-avatar-2-bg: #ddeeff; --ui-avatar-2-fg: #144e8c; --ui-avatar-3-bg: #ddf5ea; --ui-avatar-3-fg: #145c3a;
  --ui-avatar-4-bg: #fff1c9; --ui-avatar-4-fg: #6e4a00;
  --ui-ring-ok: #08757f; --ui-ring-warn: #b87700; --ui-ring-crit: #d02f3a; }
:root[data-theme='dark'] { --ui-on-danger: #2a0a0e;
  --ui-avatar-0-bg: #4a2b22; --ui-avatar-0-fg: #ffc2a8; --ui-avatar-1-bg: #2f2754; --ui-avatar-1-fg: #cdbeff;
  --ui-avatar-2-bg: #183554; --ui-avatar-2-fg: #a9d2ff; --ui-avatar-3-bg: #173d2e; --ui-avatar-3-fg: #9eebc4;
  --ui-avatar-4-bg: #4a3a12; --ui-avatar-4-fg: #ffe08a;
  --ui-ring-ok: #2dd4bf; --ui-ring-warn: #fbbf5a; --ui-ring-crit: #ff8e96; }
body.app-design .case-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 4px 0 20px;
  padding: 12px; border-radius: var(--ui-radius-card); background: var(--ui-surface); box-shadow: var(--ui-shadow);
}
body.app-design .case-search {
  flex: 1 1 260px; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius-field); background: var(--ui-surface); color: var(--ui-subtle);
}
body.app-design .case-search:focus-within { border-color: var(--ui-focus); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
body.app-design .case-search #active-cases-search { flex: 1; min-width: 0; min-height: 44px; border: 0 !important; box-shadow: none !important; padding: 0; background: transparent !important; outline: none; }
body.app-design .case-search #active-cases-search:focus-visible { outline: none !important; }
body.app-design .case-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.app-design .case-filter-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); font-weight: 700;
}
body.app-design .case-filter-chip[aria-pressed='true'] { background: var(--ui-accent-soft); color: var(--ui-accent-strong); border-color: transparent; }
body.app-design .case-filter-count {
  min-width: 24px; padding: 1px 7px; border-radius: var(--ui-radius-pill); background: var(--ui-surface-soft);
  color: var(--ui-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; text-align: center;
}
body.app-design .case-filter-chip[aria-pressed='true'] .case-filter-count { background: var(--ui-surface); color: var(--ui-accent-strong); }
body.app-design .case-sort { display: flex; align-items: center; gap: 8px; color: var(--ui-muted); font-weight: 600; font-size: 0.9rem; }
body.app-design .case-sort select { min-height: 44px; padding: 0 12px; }
body.app-design .premium-card { border-radius: var(--ui-radius-card); box-shadow: var(--ui-shadow); backdrop-filter: none; }
body.app-design .premium-card:hover { transform: none; box-shadow: var(--ui-shadow-raised); }
body.app-design .premium-card.active-case-card::before { background: var(--ui-grad); }
body.app-design .case-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
body.app-design .case-card-person { flex: 1; min-width: 0; }
body.app-design .case-card-person .card-title { margin: 0; font-size: 1.1rem; font-weight: 800; overflow-wrap: anywhere; }
body.app-design .case-card-person .subtitle { margin: 0; font-size: 0.85rem; }
body.app-design .case-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem; letter-spacing: 0;
}
body.app-design .case-avatar.tone-0 { background: var(--ui-avatar-0-bg); color: var(--ui-avatar-0-fg); }
body.app-design .case-avatar.tone-1 { background: var(--ui-avatar-1-bg); color: var(--ui-avatar-1-fg); }
body.app-design .case-avatar.tone-2 { background: var(--ui-avatar-2-bg); color: var(--ui-avatar-2-fg); }
body.app-design .case-avatar.tone-3 { background: var(--ui-avatar-3-bg); color: var(--ui-avatar-3-fg); }
body.app-design .case-avatar.tone-4 { background: var(--ui-avatar-4-bg); color: var(--ui-avatar-4-fg); }
body.app-design .case-ring { position: relative; flex: none; width: 58px; height: 58px; }
body.app-design .case-ring svg { display: block; }
body.app-design .case-ring circle { fill: none; stroke-width: 6; }
body.app-design .case-ring-track { stroke: var(--ui-track); }
body.app-design .case-ring-value { stroke: var(--ui-ring-ok); stroke-linecap: round; transition: stroke-dasharray 0.6s linear; }
body.app-design .case-ring[data-stage='soon'] .case-ring-value { stroke: var(--ui-ring-warn); }
body.app-design .case-ring[data-stage='critical'] .case-ring-value { stroke: var(--ui-ring-crit); }
body.app-design .case-ring-time {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ui-text); letter-spacing: -0.02em;
}
body.app-design .case-ring-time.is-long { font-size: 0.62rem; }
body.app-design .case-ring[data-stage='soon'] .case-ring-time { color: var(--ui-warning); }
body.app-design .case-ring:is([data-stage='critical'],[data-stage='ended']) .case-ring-time { color: var(--ui-danger); }
body.app-design .case-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
body.app-design .case-chip-status {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--ui-radius-pill);
  font-size: 0.75rem; font-weight: 700; background: var(--ui-success-soft); color: var(--ui-success);
}
body.app-design .case-chip-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body.app-design .case-chip-status.is-warning { background: var(--ui-warning-soft); color: var(--ui-warning); }
body.app-design .case-chip-status.is-critical { background: var(--ui-danger-soft); color: var(--ui-danger); }
body.app-design .card-badge, body.app-design .card-badge.rettung, body.app-design .card-badge.bereitschaft {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--ui-radius-pill) !important;
  background: var(--ui-info-soft) !important; color: var(--ui-info) !important; border: 0 !important; font-weight: 700;
}
body.app-design .case-door-control { display: flex; gap: 8px; width: 100%; margin-top: 12px; }
body.app-design .case-door-control .btn { flex: 1; justify-content: center; }
body.app-design .active-case-card .card-actions { margin-top: 15px; flex-wrap: wrap; }
body.app-design .case-readonly-note {
  width: 100%; padding: 8px 12px; border-radius: var(--ui-radius-item); border: 1px dashed var(--ui-border);
  color: var(--ui-muted); font-size: 0.85rem; text-align: center;
}
@media (max-width: 640px) {
  body.app-design .case-sort { flex: 1 1 100%; }
  body.app-design .case-sort select { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { body.app-design .case-ring-value { transition: none; } }

body.app-design :focus-visible { outline: 3px solid var(--ui-focus) !important; outline-offset: 3px; }
body.app-design [hidden] { display: none !important; }
.app-theme-control {
  position: fixed; right: 20px; bottom: 20px; z-index: 700;
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px;
  max-width: calc(100vw - 32px); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill);
  background: var(--ui-surface); color: var(--ui-muted); box-shadow: var(--ui-shadow);
  font: 600 12px/1.4 var(--ui-font);
}
body.app-design .app-theme-control select { border: 0 !important; border-radius: var(--ui-radius-pill); min-height: 34px; padding: 5px 8px; max-width: 112px; font-size: 12px; }
.app-theme-control-inline { position: static; box-shadow: none; }
@media (max-width: 640px) { .app-theme-control { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) {
  body.app-design *, body.app-design *::before, body.app-design *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
  :root, :root[data-theme] { --ui-bg: #fff; --ui-bg-fill: #fff; --ui-surface: #fff; --ui-surface-soft: #fff; --ui-text: #111; --ui-muted: #444; --ui-subtle: #444; --ui-border: #ccc; --ui-field-border: #888; --ui-accent: #333; --ui-teal: #333; --ui-accent-soft: #fff; color-scheme: light; }
  .app-theme-control { display: none !important; }
  body.app-design { background: #fff !important; color: #111 !important; }
}