/* Shared visual system. Layout and interaction remain owned by feature styles. */
:root {
  --ink: #1f2329;
  --muted: #72777f;
  --line: #e9ebef;
  --teal: #1677ff;
  --nav: #ffffff;
  --bg: #f5f6f8;
  --brand-hover: #4096ff;
  --brand-soft: #e6f4ff;
  --brand-text: #0958d9;
  --success: #389e0d;
  --warning: #ad6800;
  --danger: #cf1322;
  --surface-shadow: 0 1px 2px rgb(31 35 41 / 3%);
}
body.pro-theme {
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.pro-theme h1 { font-size: 24px; line-height: 1.4; font-weight: 600; letter-spacing: 0; }
.pro-theme h2 { font-size: 17px; font-weight: 600; }
.pro-theme h3 { font-size: 15px; font-weight: 600; }
.pro-theme .muted, .pro-theme .compact-note, .pro-theme .help-text { color: var(--muted); }
.pro-theme main { padding: 24px 28px; }
.pro-theme .page-heading { margin-bottom: 24px; }
.pro-theme .page-heading p { margin-top: 6px; color: var(--muted); }
.pro-theme .section-heading { margin-bottom: 16px; }
.pro-theme .section-heading .muted { font-size: 12px; }
.pro-theme .ui-icon { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }

/* Navigation: quiet chrome, a clear selected state, one icon family. */
.pro-theme .sidebar { background: #fff; color: #4e535b; border-right: 1px solid var(--line); padding: 24px 12px 0; }
.pro-theme .brand { color: var(--ink); font-size: 21px; letter-spacing: 0; gap: 10px; padding: 0 12px; }
.pro-theme .brand img { width: 36px; height: 36px; }
.pro-theme .brand small { color: #8c9199; font-size: 10px; letter-spacing: .5px; margin-top: 1px; }
.pro-theme .sidebar nav { margin-top: 28px; scrollbar-width: thin; scrollbar-color: #d9dde4 transparent; }
.pro-theme .sidebar nav a { min-height: 40px; border-radius: 6px; gap: 12px; padding: 9px 14px; margin-bottom: 4px; transition: background .15s, color .15s; }
.pro-theme .sidebar nav a:hover { color: var(--ink); background: #f5f6f8; }
.pro-theme .sidebar nav a.active { background: var(--brand-soft); color: var(--brand-text); box-shadow: none; font-weight: 500; }
.pro-theme .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; }
.pro-theme .nav-group { color: #8c9199; letter-spacing: 0; font-size: 12px; margin: 22px 14px 8px; }
.pro-theme .sidebar .profile { border-top: 1px solid var(--line); padding: 18px 8px; }
.pro-theme .profile strong { color: var(--ink); }
.pro-theme .profile small { color: var(--muted); font-size: 12px; }
.pro-theme .avatar { border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.pro-theme .settings-link { color: #717780; display: flex; padding: 6px; border-radius: 6px; }
.pro-theme .settings-link:hover { color: var(--teal); background: var(--brand-soft); }
.pro-theme .topbar { height: 56px; padding: 0 28px; border-bottom-color: var(--line); color: var(--muted); }
.pro-theme .topbar strong { color: #454b54; }
.pro-theme .topbar .muted { color: #c5c8ce; }
.pro-theme .top-actions { gap: 22px; }
.pro-theme .top-date { color: #8c9199; }
.pro-theme .source-tag { background: #fafafa; border: 1px solid #e5e7eb; color: #737982; font-size: 11px; border-radius: 4px; padding: 3px 8px; letter-spacing: 0; }

/* Cards and numbers share the same rhythm on all three workspaces. */
.pro-theme .panel, .pro-theme .stat, .pro-theme .task-card, .pro-theme .site-card,
.pro-theme .account-card, .pro-theme .filter-panel { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--surface-shadow); }
.pro-theme .panel { padding: 24px; }
.pro-theme .table-panel { padding: 0; }
.pro-theme .stats { gap: 20px; margin-bottom: 28px; }
.pro-theme .stat { padding: 20px 24px; }
.pro-theme .stat > span { color: #666d77; font-size: 13px; }
.pro-theme .stat strong { font-size: 34px; line-height: 1.3; font-weight: 500; letter-spacing: -.5px; color: var(--ink); margin: 12px 0 14px; font-variant-numeric: tabular-nums; }
.pro-theme .stat strong small { font-size: 12px; font-weight: 400; color: #8c9199; margin-left: 8px; }
.pro-theme .stat > small { color: #72777f; }
.pro-theme .stat p { color: var(--muted); font-size: 12px; }
.pro-theme .primary-stat { color: var(--ink); background: #fff; border: 1px solid var(--line); }
.pro-theme .primary-stat strong { color: var(--teal); }
.pro-theme .stat-warning strong { color: #d48806; }
.pro-theme .stat-attention strong { color: var(--danger); }
.pro-theme .stat-link:hover, .pro-theme .task-card:hover, .pro-theme .site-card:hover { border-color: #b7d8ff; box-shadow: 0 4px 14px rgb(31 35 41 / 6%); transform: none; }
.pro-theme .task-grid, .pro-theme .site-grid { gap: 20px; }
.pro-theme .task-card { padding: 24px; }
.pro-theme .task-card h2 { font-size: 17px; margin: 14px 0 6px; }
.pro-theme .task-card h3 { margin: 8px 0 6px; }
.pro-theme .task-card p { color: #72777f; font-size: 13px; margin-bottom: 12px; }
.pro-theme .task-card strong { color: var(--teal); font-size: 13px; font-weight: 500; }
.pro-theme .module-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--teal); background: var(--brand-soft); }
.pro-theme .module-icon .ui-icon { width: 22px; height: 22px; }
.pro-theme .task-list { padding: 0 24px; }
.pro-theme .task-list article { padding: 20px 0; border-bottom-color: #f0f1f3; }
.pro-theme .task-list h3 { font-size: 16px; margin: 9px 0 6px; }
.pro-theme .task-list p { font-size: 13px; color: #777e88; }
.pro-theme .task-list article > div > small { color: #8c9199; margin-left: 6px; }
.pro-theme .task-list .button.primary { color: var(--teal); background: #fff; border-color: #d9d9d9; box-shadow: none; }
.pro-theme .task-list .button.primary:hover { border-color: var(--brand-hover); background: #f5faff; }
.pro-theme .empty-inline { color: #8c9199; padding: 36px 0; }
.pro-theme .empty-inline h3 { font-size: 14px; font-weight: 400; margin-bottom: 16px; }
.pro-theme .empty-state { border-color: #d9dfe7; border-radius: 8px; }
.pro-theme .empty-state > span { color: #b8c7dc; }
.pro-theme .site-code { color: #8c9199; letter-spacing: .3px; font-size: 11px; }
.pro-theme .card-bottom { border-color: var(--line); }
.pro-theme .card-bottom a { color: var(--teal); }

/* Controls keep their existing actions and focus behavior. */
.pro-theme .button { min-height: 36px; padding: 7px 16px; border-radius: 6px; font-size: 14px; font-weight: 400; gap: 8px; transition: background .15s, border-color .15s, color .15s; }
.pro-theme .primary { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 2px 0 rgb(5 145 255 / 10%); }
.pro-theme .primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.pro-theme .secondary { color: #454b54; border-color: #d9d9d9; background: #fff; }
.pro-theme .secondary:hover { color: var(--teal); border-color: var(--brand-hover); background: #fff; }
.pro-theme .text-link, .pro-theme .text-button { color: var(--teal); font-weight: 400; }
.pro-theme input:not([type=checkbox]):not([type=hidden]), .pro-theme select, .pro-theme textarea { border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; color: var(--ink); min-height: 36px; padding: 7px 11px; }
.pro-theme input::placeholder, .pro-theme textarea::placeholder { color: #a0a5ad; }
.pro-theme input:hover, .pro-theme select:hover, .pro-theme textarea:hover { border-color: var(--brand-hover); }
.pro-theme input:focus, .pro-theme select:focus, .pro-theme textarea:focus { border-color: var(--teal); outline: 2px solid rgb(5 145 255 / 12%); outline-offset: 0; }
.pro-theme input:disabled, .pro-theme select:disabled, .pro-theme textarea:disabled { color: #8c9199; background: #f5f5f5; border-color: #d9d9d9; cursor: not-allowed; opacity: 1; }
.pro-theme input[type=checkbox] { flex-shrink: 0; }
.pro-theme [id] { scroll-margin-top: 88px; }
.pro-theme button:focus-visible, .pro-theme a:focus-visible, .pro-theme summary:focus-visible { outline: 2px solid #69b1ff; outline-offset: 3px; }
.pro-theme .form-field label, .pro-theme .chart-filters label { color: #595f69; font-size: 13px; font-weight: 400; }
.pro-theme .filter-panel { padding: 16px 20px; align-items: flex-end; gap: 12px; }
.pro-theme .filter-panel > label { display: grid; gap: 6px; color: #595f69; font-size: 13px; }
.pro-theme .filter-panel > label:has(input[type=checkbox]) { display: flex; align-items: center; min-height: 36px; }
.pro-theme .filter-panel select, .pro-theme .chart-filters input, .pro-theme .chart-filters select { font-size: 13px; }
.pro-theme .form-actions { border-top-color: var(--line); }
.pro-theme .edit-form { border-radius: 8px; }
.pro-theme .form-field .help-text, .pro-theme .helptext { color: #8c9199; font-size: 12px; }
.pro-theme .form-field > small { display: block; color: #8c9199; font-size: 12px; margin-top: 7px; }
.pro-theme .form-grid + button { margin-top: 24px; }
.pro-theme #id_sites { background: #fafbfc; border-color: var(--line); }
.pro-theme #id_sites label { font-size: 13px; color: #595f69; }
.pro-theme table { font-size: 13px; color: #454b54; }
.pro-theme th { background: #fafafa; color: #454b54; font-weight: 500; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pro-theme td { color: #595f69; border-color: #f0f0f0; padding: 16px 20px; }
.pro-theme td strong { color: #30353d; font-weight: 500; font-size: 14px; }
.pro-theme td small { color: #8c9199; font-size: 12px; }
.pro-theme tbody tr:hover { background: #fafcff; }
.pro-theme .county-scroll td, .pro-theme .county-scroll th { border-bottom-color: var(--line); }
.pro-theme .table-actions { white-space: nowrap; }
.pro-theme .table-actions a + a { margin-left: 16px; }

/* State colors retain business meaning; blue identifies selection and action. */
.pro-theme .badge { border: 1px solid transparent; border-radius: 4px; font-size: 12px; padding: 1px 7px; line-height: 20px; color: #595f69; background: #f5f5f5; }
.pro-theme .badge.fresh, .pro-theme .badge.success, .pro-theme .badge.normal { color: var(--success); background: #f6ffed; border-color: #d9f7be; }
.pro-theme .badge.stale, .pro-theme .badge.missing, .pro-theme .badge.warn { color: var(--warning); background: #fffbe6; border-color: #ffe58f; }
.pro-theme .badge.invalid, .pro-theme .badge.offline { color: var(--danger); background: #fff1f0; border-color: #ffccc7; }
.pro-theme .badge.neutral, .pro-theme .badge.disabled, .pro-theme .badge.history, .pro-theme .badge.empty { color: #72777f; background: #fafafa; border-color: #e5e7eb; }
.pro-theme .field-error, .pro-theme .form-error, .pro-theme .danger-text, .pro-theme .code-status.error { color: var(--danger); }
.pro-theme .notice { background: #e6f4ff; color: #0958d9; border-color: #91caff; border-radius: 6px; }
.pro-theme .notice.success { background: #f6ffed; color: #3f6600; border-color: #b7eb8f; }
.pro-theme .notice.warning, .pro-theme .video-card .notice, .pro-theme #video-fault { background: #fffbe6; color: #ad6800; border-color: #ffe58f; }
.pro-theme .badge.state-verify { color: #0958d9; background: #e6f4ff; border-color: #91caff; }
.pro-theme .badge.state-rectify { color: #ad6800; background: #fffbe6; border-color: #ffe58f; }
.pro-theme .badge.state-review { color: #531dab; background: #f9f0ff; border-color: #d3adf7; }
.pro-theme .badge.state-closed { color: #389e0d; background: #f6ffed; border-color: #b7eb8f; }
.pro-theme .alert-kpis h3 { color: #666d77; font-size: 13px; font-weight: 400; }
.pro-theme .alert-kpis strong { font-size: 30px; font-weight: 500; }
.pro-theme .alert-kpis .stat-attention strong { color: var(--danger); }
.pro-theme .notice.error, .pro-theme .form-error, .pro-theme .error-summary { background: #fff2f0; color: #a8071a; border-color: #ffccc7; }
.pro-theme .error-summary { border: 1px solid #ffccc7; border-radius: 6px; padding: 16px; margin-bottom: 20px; }
.pro-theme .error-summary ul { margin: 6px 0 0; padding-left: 20px; }
.pro-theme .error-summary a { text-decoration: underline; }
.pro-theme .error-summary:focus { outline: 2px solid #ff7875; outline-offset: 2px; }
.pro-theme .guide-disclosure { background: #f0f7ff; border-color: #d6e8ff; border-radius: 8px; padding: 12px 18px; }
.pro-theme .guide-disclosure > summary { color: #2f5f9a; font-weight: 500; }
.pro-theme .guide-card { background: #f0f7ff; border-color: #d6e8ff; border-radius: 8px; }
.pro-theme .guide-card h2 { color: var(--ink); }
.pro-theme .guide-card p, .pro-theme .guide-card small { color: #667587; }
.pro-theme .archive-tabs { gap: 28px; margin-bottom: 24px; border-color: #e5e7eb; }
.pro-theme .archive-tabs a { color: #72777f; font-size: 14px; padding: 10px 0; }
.pro-theme .archive-tabs a.selected { color: var(--teal); border-bottom: 2px solid var(--teal); font-weight: 500; }
.pro-theme .county-nav a, .pro-theme .county-actions > a:not(.button), .pro-theme .pilot-links a, .pro-theme .flow-strip a { border-color: #d9d9d9; color: #595f69; border-radius: 6px; background: #fff; padding: 7px 14px; }
.pro-theme .county-nav a.selected { color: var(--teal); border-color: #91caff; background: var(--brand-soft); }
.pro-theme .source-switch .selected, .pro-theme .section-jumps, .pro-theme .compact-note summary { color: var(--teal); border-color: var(--teal); }
.pro-theme .quick-periods a { border-color: #d9d9d9; color: #595f69; }
.pro-theme .quick-periods a.selected { color: var(--teal); border-color: #91caff; background: var(--brand-soft); }
.pro-theme .flow-strip span { color: #72777f; background: #f0f1f3; border-radius: 6px; }
.pro-theme .flow-strip .current { color: var(--brand-text); background: var(--brand-soft); }
.pro-theme .action-lead { border-left: 3px solid var(--teal); }

/* Domain surfaces: telemetry, video, field records and operations. */
.pro-theme .chart svg polyline, .pro-theme #event-evidence svg polyline { stroke: var(--teal); }
.pro-theme .chart svg circle:not([fill="#d5a14f"]) { fill: var(--teal); }
.pro-theme .chart svg text { fill: #8c9199; font-size: 11px; }
.pro-theme .chart svg line { stroke: #edf0f3; }
.pro-theme .chart-summary, .pro-theme .chart-filters label, .pro-theme .video-attribution { color: #72777f; }
.pro-theme .chart-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.pro-theme #event-evidence svg { background: #fafbfc !important; border-radius: 6px; }
.pro-theme .county-map { background: #f7faff; border-radius: 6px; }
.pro-theme .county-map text { fill: #72777f; }
.pro-theme .county-map circle.normal { fill: var(--teal); }
.pro-theme .county-map circle.attention { fill: #faad14; }
.pro-theme .county-map a:hover circle { stroke: var(--brand-text); }
.pro-theme .county-state span { color: #389e0d; background: #f6ffed; border-radius: 4px; }
.pro-theme .county-state span.warn { color: var(--warning); background: #fffbe6; }
.pro-theme .county-grid article > a:not(.button), .pro-theme .field-project-link { color: var(--teal); }
.pro-theme .field-description, .pro-theme .field-facts dt, .pro-theme .field-card-counts { color: #72777f; }
.pro-theme .field-facts dd, .pro-theme .field-card-counts b, .pro-theme .source-grid dd { color: #454b54; }
.pro-theme .metric-tags span { background: #f0f5ff; color: #2f54eb; border-radius: 4px; }
.pro-theme .field-status-banner, .pro-theme .pilot-summary { background: #f0f7ff; border-color: #d6e8ff; border-radius: 8px; }
.pro-theme .field-status-banner p, .pro-theme .pilot-summary small, .pro-theme .pilot-summary p, .pro-theme .pilot-summary em { color: #667587; }
.pro-theme .pilot-summary strong { color: var(--brand-text); font-weight: 500; }
.pro-theme .pilot-summary a, .pro-theme .source-record summary, .pro-theme .inspection-checklist h3 { color: var(--teal); }
.pro-theme .pilot-metrics strong, .pro-theme .pilot-values strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.pro-theme .pilot-chip { border-radius: 4px; color: #389e0d; background: #f6ffed; padding: 3px 9px; }
.pro-theme .pilot-chip.fault { color: var(--danger); background: #fff1f0; }
.pro-theme .pilot-chip.pending { color: var(--warning); background: #fffbe6; }
.pro-theme .pilot-chip.paused { color: #72777f; background: #f5f5f5; }
.pro-theme .ops-track { height: 10px; background: #f0f1f3; border-radius: 5px; }
.pro-theme .ops-track span { background: var(--teal); border-radius: 5px; }
.pro-theme .readiness-progress progress { accent-color: var(--teal); }
.pro-theme .video-symbol { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--teal); border-radius: 8px; }
.pro-theme .video-symbol .ui-icon { width: 24px; height: 24px; }
.pro-theme .video-card h2 { font-size: 17px; margin: 18px 0 8px; }
.pro-theme .video-card p { color: #72777f; font-size: 13px; }
.pro-theme .video-card p strong { color: #454b54; font-weight: 500; }
.pro-theme .video-card > .button { margin-top: 20px; }
.pro-theme .video-chips span { border-radius: 4px; padding: 3px 8px; background: #f5f5f5; color: #72777f; }
.pro-theme .video-chips .record-on { color: #389e0d; background: #f6ffed; }
.pro-theme .video-screen, .pro-theme .video-screen video { background: #141821; border-radius: 6px; }
.pro-theme .video-screen [role=status] { background: #1f2329dd; }
.pro-theme .video-info dt, .pro-theme .timeline-ruler { color: #8c9199; }
.pro-theme .record-calendar button { border-color: #e5e7eb; background: #fafafa; color: #8c9199; }
.pro-theme .record-calendar button.has-record { color: var(--brand-text); background: #e6f4ff; border-color: #bae0ff; }
.pro-theme .record-calendar button.selected { outline-color: var(--teal); }
.pro-theme .record-timeline { background: #f0f1f3; border-radius: 4px; }
.pro-theme .record-timeline button { background: #52c41a; }
.pro-theme .record-timeline button.broken { background: #ff7875; }
.pro-theme .record-timeline button:not(:disabled):hover { background: #73d13d; }
.pro-theme .record-timeline button:disabled { cursor: not-allowed; }
.pro-theme .segment-list button { border-color: #e5e7eb; border-radius: 6px; background: #fafbfc; color: #454b54; }
.pro-theme .segment-list button:disabled { color: var(--danger); background: #fff1f0; }

/* Account and login surfaces use the same palette and control sizing. */
.pro-theme .account-header { background: #fff; border-bottom: 1px solid var(--line); color: var(--ink); padding-top: 16px; padding-bottom: 16px; }
.pro-theme .account-header nav a, .pro-theme .account-header button { color: #595f69; }
.pro-theme .account-header nav a:hover, .pro-theme .account-header button:hover { color: var(--teal); }
.pro-theme .account-main { max-width: 1080px; padding: 32px 24px; }
.pro-theme .account-heading { margin-bottom: 20px; }
.pro-theme .account-heading h1, .pro-theme .account-card h1 { font-size: 24px; margin: 8px 0 16px; }
.pro-theme .account-eyebrow, .pro-theme .account-details dt, .pro-theme .account-help, .pro-theme .bound-identity { color: #8c9199; }
.pro-theme .account-card { padding: 24px; }
.pro-theme .account-card label { font-weight: 400; color: #454b54; font-size: 14px; }
.pro-theme .account-card input:not([type=checkbox]):not([type=hidden]), .pro-theme .account-card select, .pro-theme .account-card textarea { font-size: 14px; min-height: 40px; }
.pro-theme .account-card input:focus-visible, .pro-theme .account-card select:focus-visible { outline: 2px solid rgb(5 145 255 / 12%); outline-offset: 0; }
.pro-theme .account-tabs { border-color: var(--line); }
.pro-theme .account-tabs a, .pro-theme .login-tabs a { color: #72777f; }
.pro-theme .account-tabs a[aria-current], .pro-theme .login-tabs a[aria-current] { color: var(--teal); border-bottom: 2px solid var(--teal); font-weight: 500; }
.pro-theme .login-secondary a, .pro-theme .identity-card details summary, .pro-theme .code-status, .pro-theme .registration-steps .current { color: var(--teal); }
.pro-theme .account-danger { border-color: #ffd6d3; }
.pro-theme .account-danger p { color: #72777f; }
.pro-theme .danger-button { color: var(--danger); border-color: #ffccc7; background: #fff; }
.pro-theme .danger-button:hover { background: #fff1f0; border-color: #ff7875; }
.pro-theme .verified-contact, .pro-theme .success-mark { color: #389e0d; background: #f6ffed; }
.pro-theme .auth-unavailable, .pro-theme .wechat-intro { background: #fafafa; border-radius: 8px; }
.pro-theme .identity-heading h2 { font-size: 17px; }
.pro-theme .login-story { background: linear-gradient(150deg, #f0f5ff, #e6f4ff 65%, #f5f8ff); color: #1d3557; border-right: 1px solid #e6edf7; }
.pro-theme .login-story .brand { color: #1d3557; }
.pro-theme .login-story .brand small { color: #7890ad; }
.pro-theme .story-copy h1 { font-size: 38px; font-weight: 600; line-height: 1.6; letter-spacing: 1px; }
.pro-theme .city-art { opacity: .65; }
.pro-theme .city-art path { stroke: #7da6db; }
.pro-theme .city-art stop { stop-color: #91caff; }
.pro-theme .city-art path:last-of-type { stroke: #1677ff; }
.pro-theme .city-art circle { fill: #1677ff; }
.pro-theme .login-panel { background: #fff; padding: 48px; }
.pro-theme .login-card { width: 380px; }
.pro-theme .login-card h2 { font-size: 26px; font-weight: 600; margin: 0 0 8px; }
.pro-theme .login-card label { color: #595f69; }
.pro-theme .login-card input { height: 44px; }
.pro-theme .login-card .full { justify-content: center; height: 44px; padding: 10px 16px; }
.pro-theme .login-tabs { border-color: #e5e7eb; }
.pro-theme .company-footer { color: #8c9199; font-size: 11px; }

@media (max-width: 1250px) {
  .pro-theme main { padding: 24px; }
  .pro-theme .brand { font-size: 19px; padding: 0 6px; gap: 8px; }
  .pro-theme .sidebar nav a { padding: 9px 10px; gap: 10px; }
  .pro-theme .brand img { width: 32px; height: 32px; }
  .pro-theme .stats { gap: 16px; }
  .pro-theme .stat { padding: 20px; }
}
@media (max-width: 900px) {
  .pro-theme .brand { font-size: 17px; }
  .pro-theme .brand small { font-size: 9px; }
  .pro-theme .sidebar nav a { font-size: 13px; padding: 9px 8px; gap: 8px; }
  .pro-theme .story-copy h1 { font-size: 30px; }
}
@media (max-width: 680px) {
  .pro-theme main { padding: 20px 16px; }
  .pro-theme .sidebar { padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); box-shadow: 0 1px 4px rgb(31 35 41 / 4%); }
  .pro-theme .sidebar .brand { font-size: 19px; padding: 0; }
  .pro-theme .sidebar nav { margin-top: 12px; }
  .pro-theme .sidebar nav a { min-height: 44px; padding: 11px 14px; font-size: 14px; }
  .pro-theme .menu-toggle { color: #595f69; border-color: #d9d9d9; background: #fff; }
  .pro-theme .topbar { height: auto; min-height: 48px; padding: 10px 16px; }
  .pro-theme .top-actions { gap: 12px; }
  .pro-theme h1, .pro-theme .page-heading h1 { font-size: 22px; }
  .pro-theme .stats { gap: 12px; }
  .pro-theme .stat { padding: 16px; }
  .pro-theme .stat strong { font-size: 30px; margin: 10px 0; }
  .pro-theme .panel, .pro-theme .task-card, .pro-theme .account-card { padding: 20px; }
  .pro-theme .table-panel { padding: 0; }
  .pro-theme .task-list { padding: 0 20px; }
  .pro-theme .task-list .button { min-height: 40px; }
  .pro-theme .account-main { padding: 24px 16px; }
  .pro-theme .account-header { padding: 14px 20px; gap: 16px; }
  .pro-theme .account-header .brand { padding: 0; font-size: 20px; }
  .pro-theme .account-tabs { gap: 24px; }
  .pro-theme input:not([type=checkbox]):not([type=hidden]), .pro-theme select, .pro-theme textarea,
  .pro-theme .account-card input:not([type=checkbox]):not([type=hidden]), .pro-theme .account-card select, .pro-theme .account-card textarea { font-size: 16px; min-height: 40px; min-width: 0; max-width: 100%; }
  .pro-theme .button { min-height: 40px; }
  .pro-theme #id_sites label { min-height: 36px; }
  .pro-theme .login-story { min-height: 220px; padding: 24px; }
  .pro-theme .story-copy h1 { font-size: 25px; }
  .pro-theme .login-panel { min-height: 580px; padding: 36px 24px 80px; }
  .pro-theme .login-card { width: 100%; max-width: 420px; }
  .pro-theme .login-card h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pro-theme a, .pro-theme button { transition: none; }
}