/* Bexuvra interface theme — Claude design handoff (24 Oct 2026), built on v22.
   Presentation only. Depends on /design-system/tokens.css (+ fonts.css, motion.css) loaded before/after this file.
   Keeps every v22 selector that scripts rely on (IDs, [hidden], .connection-scene[data-state], .session-intro, .auth-submit-pending). */

/* ---------- Map v22 variables onto the new tokens (older layers in index.html read these) ---------- */
:root, :root[data-theme=dark], :root[data-theme=light] {
  color-scheme: dark;
  --bg: var(--bx-bg); --surface: var(--bx-surface-solid); --surface-raised: #17264A;
  --ink-900: var(--bx-text); --ink-600: var(--bx-muted); --ink-400: var(--bx-subtle);
  --line: rgba(150,175,230,.14); --line-strong: rgba(150,175,230,.26);
  --accent: var(--bx-link); --accent-ink: #C3D4FF; --accent-soft: rgba(61,107,245,.16); --accent-soft-line: rgba(85,128,255,.4);
  --good: var(--bx-good); --critical: var(--bx-bad); --shadow: rgba(2,7,19,.25);
  --cat-slot-0: var(--bx-series-1); --cat-slot-1: var(--bx-series-2); --cat-slot-2: var(--bx-series-3); --cat-slot-3: var(--bx-series-4);
}

/* ---------- Base ---------- */
html { min-height: 100%; background: var(--bx-bg); scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--bx-bg); background-image: none; color: var(--bx-text); font-family: var(--bx-font);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; } button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--bx-focus); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: #8D9FBD; opacity: 1; }
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: var(--bx-link); } a:hover { color: var(--bx-link-hover); }
.hero-figure, .an-kpi strong, table.ledger td.amt, .an-table td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- Page frame: side nav on desktop ---------- */
.page { max-width: 1680px; padding: 24px 30px 36px calc(var(--bx-nav-w) + 28px); margin: auto; min-height: 100svh; }
.top { min-height: 56px; margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid rgba(150,175,230,.12); align-items: center; gap: 16px; }
.brand h1 { font: 800 18px/1.2 var(--bx-font); letter-spacing: .01em; display: flex; gap: 10px; align-items: center; margin: 0; }
.brand p { display: none; }
/* The mark never sits on a plaque: no background, no border, no clipping. */
.brand-emblem { background: none !important; border: 0 !important; width: 32px; height: 32px; overflow: visible !important; border-radius: 0 !important; }
.brand h1 .brand-emblem img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.top #account-actions { gap: 10px; flex-wrap: wrap; justify-content: flex-end; font-size: 12px; }
#account-email { background: rgba(28,46,77,.9); border: 1px solid rgba(150,175,230,.2); color: var(--bx-text-2); max-width: 240px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; padding: 7px 12px; font-size: 12px; border-radius: var(--bx-r-pill); }

/* ---------- Buttons ---------- */
.export-btn, .an-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.04);
  border: 1px solid var(--bx-border-strong); color: var(--bx-text); border-radius: var(--bx-r-md); padding: 9px 14px; min-height: 40px;
  box-shadow: none; font-weight: 700; font-size: 13px; transition: background var(--bx-dur-fast) ease, border-color var(--bx-dur-fast) ease, transform var(--bx-dur-fast) ease; }
.export-btn:hover, .an-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(150,175,230,.4); }
.an-btn.primary, .submit-btn { background: var(--bx-primary); border: 1px solid transparent; color: #fff; box-shadow: 0 8px 22px rgba(61,107,245,.25); }
.an-btn.primary:hover, .submit-btn:not(:disabled):hover { background: var(--bx-primary-press); border-color: transparent; transform: none; }
.an-btn:disabled, .export-btn:disabled { opacity: .55; box-shadow: none; }
.an-btn.primary:disabled, .submit-btn:disabled { background: rgba(61,107,245,.45); color: rgba(255,255,255,.8); opacity: 1; box-shadow: none; }
.submit-btn::after { content: none; }
.an-btn:active, .submit-btn:active { transform: translateY(1px); }

/* ---------- Side navigation ---------- */
.app-nav { position: fixed; left: 0; top: 0; bottom: 0; width: var(--bx-nav-w); z-index: 20; display: flex; flex-direction: column; gap: 2px; margin: 0;
  padding: 22px 16px 18px; border: 0; border-right: 1px solid rgba(150,175,230,.10); border-radius: 0; background: rgba(12,22,48,.97); overflow: auto; }
.app-nav button { flex: none; text-align: left; display: flex; gap: 12px; align-items: center; padding: 10px 12px; min-height: 42px; font-size: 14px; font-weight: 600;
  color: #B7C3DD; background: transparent; border: 0; border-radius: var(--bx-r-md); transition: background var(--bx-dur-fast) ease, color var(--bx-dur-fast) ease; }
.app-nav button > span { width: 18px; height: 18px; flex: none; font-size: 0; color: #8EA9D3; background: currentColor;
  -webkit-mask: var(--bx-ico) center / 18px 18px no-repeat; mask: var(--bx-ico) center / 18px 18px no-repeat; }
.app-nav button:hover { background: rgba(255,255,255,.06); color: var(--bx-text); }
.app-nav button[aria-pressed=true], .app-nav button[aria-current=page] { background: rgba(61,107,245,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(85,128,255,.45); }
.app-nav button[aria-pressed=true] > span, .app-nav button[aria-current=page] > span { color: var(--bx-link); }
.app-nav:has([aria-current=page]) button[aria-pressed=true]:not([aria-current=page]) { background: transparent; box-shadow: none; color: #B7C3DD; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; font-size: 18px; font-weight: 800; letter-spacing: .01em; }
.sidebar-brand img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.sidebar-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bx-subtle); padding: 18px 12px 6px; margin: 0; }
.sidebar-bottom { margin-top: auto; padding: 12px 0 0; display: grid; gap: 4px; border-top: 1px solid rgba(150,175,230,.10); }
.sidebar-bottom button { font-size: 13px; }
.sidebar-bottom a { color: var(--bx-muted); text-decoration: none; font-size: 13px; padding: 8px 12px; border-radius: var(--bx-r-md); }
.sidebar-bottom a:hover { background: rgba(255,255,255,.06); color: var(--bx-text); }
#sidebar-company { background: rgba(255,255,255,.04); border: 1px solid rgba(150,175,230,.18); border-radius: var(--bx-r-lg); padding: 10px 12px; margin-bottom: 16px; }
#sidebar-company .an-field { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bx-muted); gap: 2px; }
#sidebar-company select { font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; background: transparent; padding: 4px 0; border: 0; border-radius: 0;
  max-width: 100%; color: var(--bx-text); min-height: 32px; color-scheme: dark; }
#sidebar-company .sidebar-role { font-size: 12px; color: var(--bx-muted); margin: 2px 0 0; }
/* Nav icons: glyph text hidden, stroke icon drawn by mask (design-system/assets/icons.svg) */
.app-nav #nav-company { --bx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='9' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='5.5' rx='2'/%3E%3Crect x='13.5' y='11.5' width='7.5' height='9.5' rx='2'/%3E%3Crect x='3' y='15' width='7.5' height='6' rx='2'/%3E%3C/svg%3E"); }
.app-nav #nav-analytics { --bx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.app-nav [data-destination=co-cases] { --bx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19L12 3Z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.3'/%3E%3C/svg%3E"); }
.app-nav [data-destination=co-tasks] { --bx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.5 9'/%3E%3C/svg%3E"); }
.app-nav [data-destination=budgets] { --bx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v9l6.4 6.4'/%3E%3C/svg%3E"); }
.app-nav [data-destination=co-report] { --bx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8l-5-5Z'/%3E%3Cpath d='M14 3v5h5M8.5 13h7M8.5 17h5'/%3E%3C/svg%3E"); }
.app-nav [data-destination=sources] { --bx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='7.5' ry='2.8'/%3E%3Cpath d='M4.5 5.5v13c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8v-13M4.5 12c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8'/%3E%3C/svg%3E"); }
.app-nav [data-destination=co-team] { --bx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z'/%3E%3C/svg%3E"); }
.app-nav #sidebar-security { --bx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.2 7.5 9.5 4.3-1.3 7.5-4.9 7.5-9.5V6L12 3Z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E"); }

/* ---------- Headings, panels, fields ---------- */
.an-heading { align-items: center; margin: 8px 0 22px; }
.an-heading h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.an-heading .an-eyebrow { display: none; }
.an-heading p { font-size: 13px; margin: 0; }
.an-eyebrow { color: var(--bx-gold-text); }
.an-quality-badge { background: rgba(255,255,255,.06); border: 1px solid rgba(150,175,230,.18); color: var(--bx-text-2); border-radius: var(--bx-r-pill); font-size: 12px; font-weight: 700; padding: 6px 11px; }
.an-panel, .summary, .card { background: var(--bx-surface); border: 1px solid var(--bx-border); border-radius: var(--bx-r-2xl); box-shadow: none;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .an-panel, .summary, .card, .auth-content { background: var(--bx-surface-solid); } }
.an-panel { padding: 20px; margin-bottom: 16px; }
.an-panel h3 { font-size: 17px; font-weight: 800; margin: 0 0 12px; letter-spacing: 0; }
.an-panel h4 { font-size: 14px; margin: 22px 0 10px; }
.an-muted, .an-summary-note { color: var(--bx-muted); font-size: 13px; line-height: 1.6; }
.an-notice { background: rgba(61,107,245,.10); border: 1px solid rgba(85,128,255,.3); border-left: 3px solid var(--bx-gold); border-radius: var(--bx-r-lg); font-size: 13px; color: #D6E2F6; padding: 12px 14px; }
.an-notice:empty { display: none; }
.an-fields { gap: 14px; }
.an-field { color: var(--bx-text-2); font-size: 13px; font-weight: 600; gap: 8px; }
.an-field input, .an-field select, .an-field textarea, .field input, .co-case textarea {
  background: var(--bx-field); color: var(--bx-text); border: 1px solid rgba(150,175,230,.22); border-radius: var(--bx-r-md); min-height: 44px; padding: 10px 12px;
  font: inherit; font-weight: 400; max-width: 100%; color-scheme: dark; transition: border-color var(--bx-dur-fast) ease, box-shadow var(--bx-dur-fast) ease; }
.an-field input:focus-visible, .an-field select:focus-visible, .field input:focus-visible, .co-case textarea:focus-visible {
  border-color: var(--bx-primary-hover); outline: none; box-shadow: 0 0 0 3px rgba(85,128,255,.28); }
.an-field input:user-invalid, .field input:user-invalid { border-color: rgba(255,138,122,.7); }

/* ---------- KPIs, tables, bars (rendered by analytics/company scripts) ---------- */
.an-kpis { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.an-kpi { background: var(--bx-surface); border: 1px solid var(--bx-border); border-radius: var(--bx-r-2xl); padding: 18px; }
.an-kpi small { color: var(--bx-muted); font-size: 13px; font-weight: 700; }
.an-kpi strong { font-size: 28px; font-weight: 800; letter-spacing: -.01em; color: var(--bx-text); margin-top: 8px; }
.an-table { font-size: 13.5px; }
.an-table th { background: transparent; color: var(--bx-muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.an-table td, .an-table th { padding: 10px 12px; border-bottom: 1px solid rgba(150,175,230,.10); }
.an-table tbody tr:hover { background: rgba(255,255,255,.03); }
.an-bar-track { background: rgba(255,255,255,.06); border-radius: 4px; height: 10px; }
.an-bar { background: var(--bx-series-1); border-radius: 4px; }
.an-bar.negative { background: var(--bx-series-neg); }
.an-source-list button { background: rgba(18,30,62,.5); color: var(--bx-text-2); border: 1px solid rgba(150,175,230,.16); border-radius: var(--bx-r-lg); padding: 12px; text-align: left; }
.an-source-list button[aria-current=true] { border-color: rgba(85,128,255,.55); background: rgba(61,107,245,.16); color: #fff; }
.an-upload { background: rgba(61,107,245,.10); border: 1px dashed rgba(143,176,255,.55); color: var(--bx-text); padding: 20px; border-radius: var(--bx-r-lg); font-size: 14px; font-weight: 700; }
.an-empty { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at top, rgba(26,45,80,.7), transparent 70%); border: 1px dashed rgba(150,175,230,.28); border-radius: var(--bx-r-2xl); padding: 42px 24px; }
.an-empty-mark { width: 72px; height: 72px; font-size: 0; margin-bottom: 8px; background: url('/bexuvra-mark.png') center / contain no-repeat; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.an-empty h3 { font-size: 22px; }
.co-case { border-top: 1px solid rgba(150,175,230,.14); padding: 16px 0; }
.co-case summary { color: var(--bx-text); font-size: 14px; font-weight: 700; }
.co-case[open] { background: var(--bx-surface-inset); border: 1px solid rgba(85,128,255,.35); border-radius: var(--bx-r-lg); padding: 18px; margin: 12px 0; }
#co-report > .an-panel:first-child { background: radial-gradient(ellipse at 90% 0%, rgba(35,62,120,.55), transparent 60%), var(--bx-surface); }
#co-report > .an-panel:first-child > h3 { font-size: 22px; }
#co-role { font-size: 12px; }
.an-charts { gap: 16px; }
.an-bar-label { font-size: 12px; }
.an-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 22px; }
.workspace-section-note { font-size: 13px; color: #D6E2F6; padding: 12px 16px; border: 1px solid rgba(85,128,255,.3); border-radius: var(--bx-r-lg); background: rgba(61,107,245,.10); margin-bottom: 18px; }
footer.foot { color: var(--bx-subtle); font-size: 12px; border-color: rgba(150,175,230,.12); margin-top: 28px; padding-top: 16px; display: flex; gap: 14px; flex-wrap: wrap; }
.foot a { color: var(--bx-link); }
.founder-line { color: var(--bx-muted); font-weight: 400; }

/* ---------- Company create ---------- */
.company-create { margin: 0 0 16px; border: 1px solid var(--bx-border); border-radius: var(--bx-r-2xl); background: var(--bx-surface-2); }
.company-create > summary { font-size: 14px; font-weight: 800; color: var(--bx-text); padding: 14px 18px; cursor: pointer; }
.company-create > .an-panel { margin: 0; border: 0; border-top: 1px solid rgba(150,175,230,.12); border-radius: 0 0 var(--bx-r-2xl) var(--bx-r-2xl); padding: 18px; background: transparent; backdrop-filter: none; }
.an-panel:has(> #co-datasets) { padding: 16px 20px; }
.an-panel:has(> #co-datasets) > p { font-size: 12.5px; max-width: 90ch; }
.an-panel:has(> #co-datasets) h3 { font-size: 15px; }
#co-datasets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#co-datasets button { padding: 10px 14px; font-size: 13px; flex: 1 1 200px; }
.an-panel:has(> #co-datasets) .an-actions { margin: 10px 0; }

/* ---------- Dialogs (security, recovery, MFA, email reset) ---------- */
.security-dialog { width: min(92vw, 480px); background: linear-gradient(140deg, #1E2C46, #101C33); border: 1px solid #465470; border-radius: 20px; box-shadow: 0 26px 100px rgba(0,0,0,.55); color: var(--bx-text); padding: 0; }
.security-dialog::backdrop { background: rgba(2,8,23,.66); backdrop-filter: blur(8px); }
.security-content { padding: 30px; }
.security-content h2 { font-size: 23px; font-weight: 800; }
.security-content textarea { background: var(--bx-field); color: var(--bx-text); border: 1px solid rgba(150,175,230,.22); border-radius: var(--bx-r-md); }
.security-dialog[open] { animation: bx-rise 240ms var(--bx-ease-out) both; }
.security-dialog .an-btn { min-height: 44px; }
#mfa-login input { font-size: 27px; letter-spacing: 12px; text-align: center; font-variant-numeric: tabular-nums; }
#mfa-login .security-content::before, #email-reset .security-content::before { content: ""; display: block; width: 72px; height: 72px; margin: 0 auto 18px;
  background: url('/bexuvra-mark.png') center / contain no-repeat; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
#mfa-login-status:not(:empty), #email-reset-status:not(:empty), #email-new-password-status:not(:empty), #recovery-message:not(:empty) { margin: 12px 0; font-size: 13px; color: var(--bx-text-2); }

/* =================================================================================================
   Login — composition of the owner PDF + motion video. Mark sits in the navy with a light, no plaque.
   ================================================================================================= */
body:has(#auth-panel:not([hidden])) { background: radial-gradient(1100px 700px at 22% 40%, var(--bx-glow), transparent 60%), var(--bx-bg); }
body:has(#auth-panel:not([hidden])) .page { padding: 24px; max-width: 1440px; display: flex; align-items: center; justify-content: center; min-height: 100svh; }
body:has(#auth-panel:not([hidden])) .top, body:has(#auth-panel:not([hidden])) .foot { display: none; }
#auth-panel { width: 100%; max-width: 1180px; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; margin: 0; padding: 48px 30px; border: 0;
  background: none; box-shadow: none; border-radius: 0; min-height: 680px; backdrop-filter: none; }
.auth-intro { padding: 0; background: none; border: 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; isolation: isolate; }
.auth-brand-art { position: relative; width: min(100%, 320px); aspect-ratio: 1; line-height: 0; display: grid; place-items: center; }
.auth-brand-art::before { content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(67,105,199,.38), transparent 70%); filter: none; }
.auth-brand-art img { width: 82%; height: auto; object-fit: contain; filter: var(--bx-shadow-mark); position: relative; z-index: 1; }
.auth-brand-art .bx-ring, .auth-brand-art .bx-orbit, .auth-brand-art .bx-orbit-2, .auth-brand-art .bx-halo { width: 100%; }
.auth-brand-art .bx-orbit-2 { width: 112% !important; }
.auth-brand-art .bx-glint { inset: 9%; z-index: 2; }
.auth-intro h2 { font: 800 36px/1.15 var(--bx-font); letter-spacing: -.02em; margin: 28px 0 14px; color: var(--bx-text); }
.auth-intro > p { font-size: 16px; line-height: 1.6; color: var(--bx-muted); max-width: 380px; margin: 0; }
.auth-content { padding: 34px; background: var(--bx-surface); border: 1px solid var(--bx-border); border-radius: var(--bx-r-3xl); box-shadow: var(--bx-shadow-card);
  -webkit-backdrop-filter: blur(var(--bx-blur)); backdrop-filter: blur(var(--bx-blur)); max-width: 440px; width: 100%; animation: bx-rise var(--bx-dur-enter) var(--bx-ease-out) 120ms both; }
.auth-content h2 { font: 800 26px/1.25 var(--bx-font); letter-spacing: -.01em; margin: 0 0 6px; }
.auth-content > p { font-size: 14px; color: var(--bx-muted); line-height: 1.5; margin: 0; }
.auth-card-mark { display: none; }
#auth-form { margin-top: 22px; display: grid; gap: 16px; }
.field { margin: 0; }
.field label { display: block; margin-bottom: 8px; font-size: 13px; color: var(--bx-text-2); font-weight: 600; text-transform: none; letter-spacing: 0; }
.field input, .auth-panel input { background: var(--bx-field); border: 1px solid rgba(150,175,230,.22); color: var(--bx-text); border-radius: var(--bx-r-lg); width: 100%;
  min-height: 48px; padding: 12px 14px; font-size: 15px; box-shadow: none; }
.field input:focus-visible, .auth-panel input:focus-visible { outline: none; border-color: var(--bx-primary-hover); box-shadow: 0 0 0 3px rgba(85,128,255,.28); }
.field small.an-muted { display: block; margin-top: 6px; font-size: 12.5px; }
.submit-btn { width: 100%; min-height: 50px; font-size: 16px; font-weight: 700; border-radius: var(--bx-r-lg); margin: 4px 0 0; display: flex; align-items: center; justify-content: center; }
.auth-content #auth-toggle { display: block; width: 100%; text-align: center; background: none; border: 0; box-shadow: none; font-size: 14px; font-weight: 700; color: var(--bx-link); padding: 14px 0 6px; margin: 0; min-height: 44px; }
.auth-content #forgot-password { display: block; width: 100%; background: none; border: 0; box-shadow: none; padding: 6px; font-size: 12.5px; font-weight: 600; color: var(--bx-muted); min-height: 36px; margin-top: 2px; }
.auth-content .account-help { font-size: 12px; line-height: 1.55; color: var(--bx-subtle); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(150,175,230,.14); }
#auth-message { font-size: 13px; line-height: 1.5; margin: 0; color: #F0D9A6; overflow-wrap: anywhere; }
#auth-message:empty { display: none; }
#auth-message:not(:empty) { display: block !important; padding: 10px 12px; border-radius: var(--bx-r-lg); background: rgba(216,181,106,.10); border: 1px solid var(--bx-gold-line); }
#auth-panel[data-bx-state="error"] #auth-message:not(:empty) { color: var(--bx-bad-text); background: rgba(255,120,100,.10); border-color: rgba(255,138,122,.35); }
.auth-content #email-actions { display: grid; gap: 2px; margin: 0; }
.auth-content #email-actions .an-btn { background: none; border: 0; box-shadow: none; min-height: 36px; font-weight: 600; }
#email-forgot { font-size: 13px; color: var(--bx-link); text-align: center; width: 100%; padding: 6px 0; margin: 0; }
#email-resend { font-size: 12.5px; color: var(--bx-muted); }
#oauth-buttons { margin-top: 14px; }
.auth-mode-enter { animation: bx-mode var(--bx-dur-mode) var(--bx-ease-out) both; }
.auth-submit-pending::after, .submit-btn[aria-busy="true"]::after { content: ""; display: inline-block; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; margin-left: 10px; animation: bx-spin var(--bx-dur-spin) linear infinite; }
#auth-panel[data-bx-state="pending"] .submit-btn { background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  background-size: 220px 100%; background-repeat: no-repeat; animation: bx-shimmer 1.2s linear infinite; cursor: progress; }
#auth-panel[data-bx-state="error"] .auth-content { animation: bx-shake 450ms ease-in-out; }
/* Password requirements (presentation of the existing checks in account-auth.js) */
.bx-rules { list-style: none; margin: 0; padding: 12px 14px; border-radius: var(--bx-r-lg); background: var(--bx-surface-inset); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.bx-rules li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--bx-muted); }
.bx-rules li::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: rgba(163,177,207,.4); transition: background var(--bx-dur-fast); }
.bx-rules li[data-ok="true"] { color: var(--bx-good-text); }
.bx-rules li[data-ok="true"]::before { background: var(--bx-good); }

/* ---------- Email confirmation + unauthenticated start screen ---------- */
.email-confirmation { display: grid; gap: 14px; margin-top: 22px; }
.email-confirmation > p { margin: 0; font-size: 14px; color: var(--bx-text-2); line-height: 1.6; }
.confirmation-symbol { width: 56px; height: 56px; border: 1px solid rgba(85,128,255,.4); border-radius: 16px; background: var(--bx-primary-soft); color: transparent; font-size: 0; margin: 0 auto 4px;
  display: grid; place-items: center; position: relative; }
.confirmation-symbol::before { content: ""; width: 28px; height: 28px; background: var(--bx-link);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.email-confirmation .confirmation-address { font-weight: 700; color: var(--bx-text); overflow-wrap: anywhere; }
.email-confirmation .an-btn { width: 100%; min-height: 46px; }
.email-confirmation .an-btn:disabled { cursor: wait; }
.email-confirmation .an-muted { font-size: 12.5px; }
#email-confirmed-notice { border-left-color: var(--bx-good); margin-bottom: 16px; }
#auth-form[hidden] + #auth-toggle { display: none; }
.auth-content:has(#email-confirmation:not([hidden])) > p:not(#auth-message) { display: none; }

body:has(#signup-start:not([hidden])) { background: radial-gradient(900px 600px at 85% 0%, var(--bx-glow), transparent 60%), var(--bx-bg); }
body:has(#signup-start:not([hidden])) .page { padding: 32px 28px; max-width: 1200px; margin: 0 auto; }
body:has(#signup-start:not([hidden])) .top, body:has(#signup-start:not([hidden])) .foot { display: none; }
.signup-start { animation: bx-mode var(--bx-dur-mode) var(--bx-ease-out) both; }
.signup-start-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; }
.signup-start-brand img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.signup-start-brand strong { font-size: 20px; font-weight: 800; }
.signup-start-brand > span { margin-left: auto; color: var(--bx-muted); font-size: 13px; }
.signup-start-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.signup-start .an-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--bx-gold-text); margin: 0; }
.signup-start h1 { font-size: 38px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 8px 0 12px; }
.signup-start-lead { font-size: 16px; color: var(--bx-muted); max-width: 48ch; margin: 0 0 22px; }
.signup-start .an-notice { margin-bottom: 22px; border-left-color: var(--bx-gold); background: rgba(216,181,106,.10); border-color: var(--bx-gold-line); color: #F0D9A6; }
.signup-start-steps { display: grid; gap: 12px; }
.signup-start-steps .an-panel { margin: 0; padding: 20px; background: var(--bx-surface-2); }
.signup-start-steps article > span { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--bx-link); }
.signup-start-steps h2 { font-size: 17px; font-weight: 800; margin: 4px 0 6px; }
.signup-start-steps p { font-size: 13px; color: var(--bx-muted); margin: 0 0 10px; }
.signup-start-steps button:disabled { opacity: .65; cursor: not-allowed; }
.signup-start-mail { background: var(--bx-surface); border: 1px solid var(--bx-border); border-radius: var(--bx-r-3xl); padding: 28px; position: sticky; top: 28px;
  -webkit-backdrop-filter: blur(var(--bx-blur)); backdrop-filter: blur(var(--bx-blur)); box-shadow: var(--bx-shadow-card); animation: bx-rise var(--bx-dur-enter) var(--bx-ease-out) 120ms both; }
.signup-start-mail > h2 { font-size: 22px; font-weight: 800; margin: 0; }
.signup-start-mail #auth-message { margin-top: 14px; }
.signup-start .email-confirmation { margin-top: 18px; }
.signup-start .confirmation-symbol { margin-left: 0; }
.signup-start .email-confirmation p { font-size: 13px; }

/* ---------- Session check overlay (decorative; v22 behaviour unchanged) ---------- */
.session-intro { position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse at 50% 43%, #233E78, var(--bx-bg) 65%); display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; transition: opacity .35s ease, visibility .35s; }
.session-intro img { width: 130px; height: auto; filter: var(--bx-shadow-mark); animation: bx-float 5s ease-in-out infinite; }
.session-intro strong { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin-top: 20px; }
.session-intro span { font-size: 13px; color: var(--bx-muted); margin-top: 32px; }
.session-intro.dismissed { opacity: 0; visibility: hidden; }
.workspace-enter { animation: bx-rise 420ms var(--bx-ease-out) both; }
.section-focus { animation: section-focus 1s ease; }
@keyframes section-focus { 0%, 35% { outline: 2px solid var(--bx-link); outline-offset: 5px; } 100% { outline-color: transparent; } }
@keyframes auth-card-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

/* Workspace content entrances (rendered on data load, i.e. after real responses) */
.an-kpis > .an-kpi { animation: bx-rise 520ms var(--bx-ease-out) both; }
.an-kpis > .an-kpi:nth-child(2) { animation-delay: 70ms; } .an-kpis > .an-kpi:nth-child(3) { animation-delay: 140ms; } .an-kpis > .an-kpi:nth-child(n+4) { animation-delay: 210ms; }
.an-bar-track > .an-bar { transform-origin: left; animation: bx-grow-x 800ms var(--bx-ease-out) 150ms both; }

/* =================================================================================================
   Connection scene — PostgreSQL → Bexuvra. data-state is written by owner-interface.js from real DOM state.
   ================================================================================================= */
.connection-scene { margin: 16px 0 0; padding: 20px; background: radial-gradient(ellipse at 75% 35%, rgba(56,91,154,.35), rgba(21,35,61,.6) 80%);
  border: 1px solid rgba(85,128,255,.28); border-radius: var(--bx-r-2xl); overflow: hidden; }
.connection-status { font-size: 15px; font-weight: 800; color: var(--bx-text-2); margin: 0 0 18px; }
.connection-path { display: flex; align-items: center; justify-content: center; gap: 0; min-height: 96px; }
.connection-database { flex: none; width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(150,175,230,.3); position: relative; box-shadow: none; }
.connection-database::before { content: ""; position: absolute; inset: 16px; border: 0; border-radius: 0; height: auto; background: #8FA9D3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='7.5' ry='2.8'/%3E%3Cpath d='M4.5 5.5v13c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8v-13M4.5 12c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='7.5' ry='2.8'/%3E%3Cpath d='M4.5 5.5v13c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8v-13M4.5 12c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8'/%3E%3C/svg%3E") center/contain no-repeat; }
.connection-database::after { content: none; }
.connection-wire { flex: 1; min-width: 60px; max-width: 220px; height: 40px; margin: 0 10px; position: relative; background: none; }
.connection-wire::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px;
  background-image: repeating-linear-gradient(90deg, rgba(150,175,230,.35) 0 10px, transparent 10px 18px); }
.connection-wire::after { content: none; }
.connection-wire .bx-conn__packet { opacity: 0; }
.connection-path img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); border-radius: 50%; }
.connection-caption { display: flex; justify-content: space-between; font-size: 12px; color: var(--bx-muted); margin-top: 10px; }
.connection-steps { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(150,175,230,.14); display: flex; flex-direction: column; gap: 10px; }
.connection-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.connection-steps li small { margin-left: auto; font-size: 12px; color: var(--bx-muted); text-align: right; }
.connection-steps li[data-step="done"] small { color: var(--bx-good-text); }
.connection-steps li[data-step="fail"] small { color: var(--bx-bad-text); }
.connection-scene[data-state=pending] .connection-status { color: #C3D4FF; }
.connection-scene[data-state=pending] .connection-wire::before { background-image: repeating-linear-gradient(90deg, var(--bx-primary-hover) 0 10px, transparent 10px 18px); animation: bx-dash .7s linear infinite; }
.connection-scene[data-state=pending] .bx-conn__packet { animation: bx-packet var(--bx-dur-packet) ease-in-out infinite; }
.connection-scene[data-state=pending] .bx-conn__packet:nth-child(2) { animation-delay: 530ms; }
.connection-scene[data-state=pending] .bx-conn__packet:nth-child(3) { animation-delay: 1060ms; }
.connection-scene[data-state=pending] .connection-path img { animation: bx-pulse-blue 1.4s ease-out infinite; }
.connection-scene[data-state=connected] { border-color: rgba(79,209,165,.45); }
.connection-scene[data-state=connected] .connection-status { color: var(--bx-good-text); }
.connection-scene[data-state=connected] .connection-wire::before { background: var(--bx-good); transform-origin: left; animation: bx-grow-x 600ms var(--bx-ease-out) both; }
.connection-scene[data-state=connected] .connection-database { border-color: var(--bx-good); }
.connection-scene[data-state=connected] .connection-database::before { background: var(--bx-good); }
.connection-scene[data-state=connected] .connection-path img { animation: bx-glow-good 1s ease-out 2; }
.connection-scene[data-state=error] { border-color: rgba(255,138,122,.45); }
.connection-scene[data-state=error] .connection-status { color: var(--bx-bad-text); }
.connection-scene[data-state=error] .connection-wire::before { background-image: linear-gradient(90deg, var(--bx-bad) 0 42%, transparent 42% 58%, var(--bx-bad) 58% 100%); }
.connection-scene[data-state=error] .connection-database { border-color: var(--bx-bad); }
.connection-scene[data-state=error] .connection-database::before { background: var(--bx-bad); }
.connection-scene[data-state=error] .connection-path { animation: bx-shake 450ms ease-in-out; }

/* ---------- Desktop wide / tablet ---------- */
@media (min-width: 1600px) { .app-nav { left: max(0px, calc((100vw - 1680px) / 2)); border-left: 1px solid rgba(150,175,230,.10); } }
@media (max-width: 1100px) {
  :root { --bx-nav-w: 210px; }
  .page { padding: 20px 22px 30px calc(var(--bx-nav-w) + 20px); }
  .an-layout { grid-template-columns: 260px minmax(0, 1fr); }
  #auth-panel { gap: 48px; padding: 40px 18px; }
  .auth-brand-art { width: 260px; }
  .auth-content { padding: 28px; }
  .an-heading .an-quality-badge { max-width: 200px; white-space: normal; }
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .an-layout { grid-template-columns: minmax(0, 1fr); }
  #an-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  #an-sources > .an-panel { margin: 0; }
  #auth-panel { gap: 28px; }
  .auth-intro > p { font-size: 14px; }
  .auth-brand-art { width: 220px; }
  .auth-intro h2 { font-size: 30px; }
  .auth-content { padding: 24px; }
  .top #account-actions { gap: 6px; }
  .top #account-email { max-width: 150px; }
  .signup-start-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .signup-start-layout > div { display: contents; }
  .signup-start-mail { position: static; grid-row: 2; padding: 22px; }
  .signup-start-brand { margin-bottom: 24px; }
  .signup-start h1 { font-size: 28px; }
  body:has(#signup-start:not([hidden])) .page { padding: 20px 16px 40px; }
}

/* ---------- Phone: bottom tab bar, compact header ---------- */
@media (max-width: 650px) {
  html { scroll-padding-top: 28px; }
  .page { padding: 16px 16px 112px; }
  .top { margin-bottom: 16px; padding-bottom: 12px; gap: 10px; min-height: 44px; flex-wrap: nowrap; }
  .top > .brand { display: none; }
  .brand h1 { font-size: 17px; }
  .top #account-email { display: none; }
  .top #account-actions { margin-left: auto; flex-wrap: nowrap; }
  .top #account-actions .export-btn { font-size: 12px; padding: 8px 10px; min-height: 40px; }
  .app-nav { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; max-height: 160px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
    padding: 6px 6px max(10px, env(safe-area-inset-bottom)); background: rgba(12,22,48,.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border: 0; border-top: 1px solid rgba(150,175,230,.12); overflow-x: hidden; overflow-y: auto; }
  .app-nav button { font-size: 11px; font-weight: 700; min-height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 2px; line-height: 1.2; text-align: center; }
  .app-nav button > span { width: 20px; height: 20px; -webkit-mask-size: 20px 20px; mask-size: 20px 20px; }
  .app-nav button[aria-pressed=true], .app-nav button[aria-current=page] { background: transparent; box-shadow: none; color: #fff; }
  .app-nav button[data-destination=co-team] { display: none; }
  .sidebar-brand, .sidebar-label, .sidebar-bottom { display: none; }
  #sidebar-company { display: block; position: static; flex: 0 1 50%; max-width: 220px; width: 50%; z-index: auto; padding: 2px 12px; margin: 0; background: rgba(28,46,77,.9); border-radius: var(--bx-r-pill); }
  #sidebar-company .an-field { font-size: 0; gap: 0; }
  #sidebar-company select { font-size: 13px; min-height: 36px; margin: 0; padding: 4px 0; }
  .sidebar-role { display: none; }
  .an-heading { margin: 6px 0 18px; align-items: flex-start; gap: 12px; }
  .an-heading h2 { font-size: 24px; }
  .an-heading .an-quality-badge { font-size: 11px; max-width: 140px; }
  .an-heading > div > p { font-size: 12px; }
  .an-kpis { gap: 10px; }
  .an-kpi { padding: 14px; }
  .an-kpi strong { font-size: 22px; }
  .an-panel { padding: 18px; border-radius: var(--bx-r-xl); }
  .an-fields { grid-template-columns: minmax(0, 1fr); }
  #an-sources { grid-template-columns: minmax(0, 1fr); }
  .security-content { padding: 24px; }
  .an-actions { gap: 8px; }
  .an-table td, .an-table th { padding: 10px; }
  .an-charts { grid-template-columns: minmax(0, 1fr); }
  body:has(#auth-panel:not([hidden])) .page { padding: 28px 16px; align-items: flex-start; }
  #auth-panel { min-height: 0; max-width: 400px; padding: 0; display: flex; flex-direction: column; gap: 22px; margin: auto; }
  .auth-brand-art { width: 120px; }
  .auth-intro h2 { font-size: 26px; margin: 14px 0 8px; }
  .auth-intro > p { font-size: 13px; max-width: 300px; }
  .auth-content { padding: 24px 20px; border-radius: 20px; max-width: 400px; }
  .auth-content h2 { font-size: 24px; }
  #auth-form { gap: 14px; margin-top: 20px; }
  .field input, .auth-panel input { font-size: 16px; min-height: 48px; }
  .bx-rules { grid-template-columns: minmax(0, 1fr); }
  .an-bar-row { grid-template-columns: 85px 1fr 65px; }
  .foot { margin-bottom: 14px; }
  #mfa-login input { letter-spacing: 8px; }
  .session-intro img { width: 110px; }
  .connection-scene { padding: 16px; }
  .connection-path img { width: 64px; height: 64px; }
  .connection-database { width: 52px; height: 52px; border-radius: 14px; }
  .connection-database::before { inset: 13px; }
}

/* ---------- Wide database layout (v22 behaviour kept) ---------- */
@media (min-width: 1000px) {
  .an-database-panel details[open] { display: block; }
  .connection-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
  .an-database-panel details[open] .connection-layout > form, .an-database-panel details[open] .connection-layout > #an-db-tables { grid-column: 1; grid-row: 1; margin-top: 14px; }
  .an-database-panel details[open] .connection-layout > .connection-scene { grid-column: 2; grid-row: 1; min-height: 300px; margin-top: 14px; display: flex; flex-direction: column; justify-content: center; }
  .an-database-panel details[open] > .an-muted { max-width: none; }
  .an-layout:has(.an-database-panel details[open]) { grid-template-columns: minmax(0, 1fr); }
  .an-layout:has(.an-database-panel details[open]) #an-sources { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 18px; }
  .an-layout:has(.an-database-panel details[open]) #an-sources > .an-panel { margin: 0; }
  .an-database-panel:has(details[open]) { grid-column: 2; grid-row: 1 / span 2; }
  .an-database-panel .connection-path img { width: 96px; height: 96px; }
  .an-database-panel .connection-status { margin-bottom: 26px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .session-intro.dismissed { display: none; }
  .connection-wire .bx-conn__packet { display: none; }
  .auth-submit-pending::after, .submit-btn[aria-busy="true"]::after { border-top-color: rgba(255,255,255,.35); border-right-color: #fff; }
}

/* ---------- Print ---------- */
@media print {
  body, .page { background: white !important; color: #111 !important; }
  .app-nav, .connection-scene, .session-intro, .bx-success-stage { display: none !important; }
  .page { padding: 0 !important; }
  .an-panel, .an-kpi, .an-table th { background: white !important; color: #111 !important; backdrop-filter: none !important; border-color: #bbb !important; }
  .an-muted, .an-field { color: #333 !important; }
  .an-table td, .an-table th { border-color: #bbb !important; }
}

/* Mark stage pieces inside .auth-brand-art (spans added by owner-interface.js) */
.auth-brand-art .bx-ring, .auth-brand-art .bx-orbit, .auth-brand-art .bx-orbit-2, .auth-brand-art .bx-halo { position: absolute; border-radius: 50%; aspect-ratio: 1; pointer-events: none; z-index: 0; }
.auth-brand-art .bx-ring { border: 1px solid rgba(150,175,230,.45); box-shadow: 0 0 60px rgba(150,175,230,.16); animation: bx-breathe 3.2s ease-in-out infinite; }
.auth-brand-art .bx-orbit, .auth-brand-art .bx-orbit-2, .auth-brand-art .bx-halo { display: none; }
.auth-brand-art .bx-orbit { border: 3px solid transparent; border-top-color: var(--bx-primary-hover); border-right-color: rgba(85,128,255,.35); }
.auth-brand-art .bx-orbit-2 { border: 2px solid transparent; border-bottom-color: var(--bx-gold); }
.auth-brand-art .bx-halo { border: 2px solid rgba(195,212,255,.7); }
#auth-panel[data-bx-state="idle"] .auth-brand-art img { animation: bx-float 5s ease-in-out infinite; }
#auth-panel[data-bx-state="pending"] .auth-brand-art .bx-ring { border-color: rgba(85,128,255,.8); }
#auth-panel[data-bx-state="pending"] .auth-brand-art .bx-orbit { display: block; animation: bx-spin var(--bx-dur-orbit) var(--bx-ease-in-out) infinite; }
#auth-panel[data-bx-state="pending"] .auth-brand-art .bx-orbit-2 { display: block; animation: bx-spin-rev 2.2s linear infinite; }
#auth-panel[data-bx-state="error"] .auth-brand-art .bx-ring { border-color: rgba(255,138,122,.8); animation: none; }
#auth-password-confirm[aria-invalid="true"] { border-color: rgba(255,138,122,.7); }
/* Loading a table snapshot after connect: packets flow again (real #an-db-load request) */
.connection-scene[data-load=pending] .connection-wire::before { background: none; background-image: repeating-linear-gradient(90deg, var(--bx-good) 0 10px, transparent 10px 18px); animation: bx-dash .7s linear infinite; transform: none; }
.connection-scene[data-load=pending] .bx-conn__packet { animation: bx-packet var(--bx-dur-packet) ease-in-out infinite; background: var(--bx-good-text); box-shadow: 0 0 14px var(--bx-good); }
.connection-scene[data-load=pending] .bx-conn__packet:nth-child(2) { animation-delay: 530ms; }
.connection-scene[data-load=pending] .bx-conn__packet:nth-child(3) { animation-delay: 1060ms; }
@media (prefers-reduced-motion: reduce) { .connection-scene .bx-conn__packet { display: none; } }
/* Header: the sidebar already shows the brand once signed in; phones keep company + actions on one row */
body:has(#app-nav:not([hidden])) header.top > .brand { display: none; }
body:has(#app-nav:not([hidden])) header.top { justify-content: flex-end; }
@media (max-width: 650px) { header.top { flex-wrap: nowrap; align-items: center; justify-content: space-between; } }

/* File drag states reuse the supplied Claude theme. */
.an-upload[data-dragover="true"] { outline: 2px solid var(--bx-primary); outline-offset: 3px; }
.an-upload[aria-busy="true"] { opacity: .65; cursor: wait; }

/* Accessible targets and keyboard focus, using the existing design tokens. */
#company-app details:not(.bx-metric-info) > summary,
#analytics-app details:not(.bx-metric-info) > summary {
  min-height: 44px; box-sizing: border-box; padding-block: 12px;
}
#an-file { min-height: 44px; box-sizing: border-box; }
.foot a, #analytics-app a[download] {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere;
}
#company-app summary:focus-visible, #analytics-app summary:focus-visible,
#company-app textarea:focus-visible, #analytics-app textarea:focus-visible,
.foot a:focus-visible, #analytics-app a[download]:focus-visible {
  outline: 3px solid var(--bx-focus); outline-offset: 3px;
}
.an-upload:focus-within { outline: 3px solid var(--bx-focus); outline-offset: 3px; }