/* Shared visual system with Forms and Tenant. */
:root {
  --fc-bg: #f8f9ff; --fc-paper: #ffffff; --fc-panel: #eef0fa;
  --fc-text: #202a3a; --fc-muted: #7a8190; --fc-border: #e5e7ef;
  --fc-primary: #557bc0; --fc-primary-dark: #234e8f; --fc-success: #2e9d72;
  --fc-warning-bg: #fff8e9; --fc-warning-border: #e7bb65;
  --fc-shadow: 0 2px 5px rgba(32,45,75,.16);
}
:root[data-theme="dark"] {
  --fc-bg: #111827; --fc-paper: #182234; --fc-panel: #202c41;
  --fc-text: #eef3fb; --fc-muted: #aab6c9; --fc-border: #324158;
  --fc-primary: #81a6ec; --fc-primary-dark: #bad2ff; --fc-success: #4fc68d;
  --fc-warning-bg: #3a2c14; --fc-warning-border: #af8437;
  --fc-shadow: 0 12px 30px rgba(0,0,0,.22);
}
:root, body { color: var(--fc-text); background: var(--fc-bg); }
body { font-family: Poppins, Inter, ui-sans-serif, system-ui, sans-serif; background: var(--fc-bg); }
main { max-width: none; padding: 0; }
.preferences { display: flex; align-items: center; gap: 4px; }.language-area { position: relative; }.icon-button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fc-primary); box-shadow: none; font-size: 17px; }.icon-button:hover { background: #edf2fc; color: var(--fc-primary-dark); box-shadow: none; }.icon-button svg { width: 21px; height: 21px; fill: currentColor; }
.panel { border: 1px solid var(--fc-border); border-radius: 12px; background: var(--fc-paper); box-shadow: var(--fc-shadow); }
button { border-radius: 22px; background: var(--fc-primary); color: #fff; box-shadow: 0 5px 12px rgba(85,123,192,.2); }
button:hover { background: var(--fc-primary-dark); }
.brand { color: var(--fc-text); font-size: 12px; letter-spacing: .08em; }.brand-mark { background: #dce7fb; color: var(--fc-primary); }.eyebrow { color: var(--fc-primary); } h1,h2 { color: var(--fc-text); }
.login-panel { background: var(--fc-paper); }.login-copy p:last-child,.flight-description,.widget-card>p:not(.eyebrow),.modal-copy { color: var(--fc-muted); }.login-form label { color: var(--fc-text); }
.login-panel { position: relative; }.login-language-selector { display: flex; gap: 4px; position: absolute; top: 16px; right: 16px; z-index: 1; padding: 4px; border-radius: 10px; background: color-mix(in srgb, var(--fc-paper) 90%, transparent); box-shadow: 0 2px 10px rgba(15,43,70,.12); }.login-language-selector button { min-width: 38px; min-height: 30px; padding: 5px 9px; border-radius: 7px; background: transparent; color: var(--fc-primary); box-shadow: none; }.login-language-selector button[aria-pressed="true"] { background: var(--fc-primary); color: #fff; box-shadow: 0 3px 8px rgba(85,123,192,.2); }
.login-form input,.otp-inputs input { border-color: var(--fc-border); border-radius: 10px; background: var(--fc-bg); color: var(--fc-text); }.login-form input:focus,.otp-inputs input:focus { border-color: var(--fc-primary); box-shadow: 0 0 0 3px rgba(85,123,192,.16); }
.topbar { height: 74px; margin: 0; padding: 0 48px; border-bottom: 1px solid var(--fc-border); background: var(--fc-paper); box-shadow: 0 1px 4px rgba(30,45,75,.03); }.topbar-status { gap: 10px; }
.connection-status { border-color: transparent; background: color-mix(in srgb,var(--fc-success) 14%,transparent); color: var(--fc-success); }.account-area { position: relative; }.user-chip { display: grid; width: 40px; height: 40px; place-items: center; border: 0; background: transparent; padding: 3px; box-shadow: none; }.user-chip:hover { background: #edf2fc; box-shadow: none; }.user-avatar { width: 34px; height: 34px; flex-basis: 34px; background: #163b67; color: #fff; font-size: 11px; }.topbar .user-name { display: none; }.account-menu { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; min-width: 190px; padding: 6px; border: 1px solid var(--fc-border); border-radius: 10px; background: var(--fc-paper); box-shadow: 0 10px 24px rgba(20,35,61,.18); }.language-menu { min-width: 140px; }.account-menu-name { padding: 8px 10px 9px; border-bottom: 1px solid var(--fc-border); color: var(--fc-text); font-size: 12px; font-weight: 700; }.account-menu-item { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 7px; background: transparent; color: var(--fc-primary); box-shadow: none; text-align: left; }.account-menu-item:hover { background: #edf2fc; box-shadow: none; }.account-menu-item svg { width: 18px; height: 18px; fill: currentColor; }
.flight-layout { height: calc(100dvh - 74px); gap: 32px; padding: 28px 48px; background: var(--fc-bg); }.flight-card,.widget-card { padding: clamp(24px,3vw,40px); }.flight-steps>div { border-color: var(--fc-border); background: var(--fc-bg); }.step-icon { border-color: var(--fc-primary); color: var(--fc-primary); }.flight-steps strong { color: var(--fc-text); }.flight-steps small { color: var(--fc-muted); }.live-dot { color: var(--fc-success); }.live-dot::before { background: var(--fc-success); box-shadow: 0 0 0 4px color-mix(in srgb,var(--fc-success) 12%,transparent); }.warning { border-color: var(--fc-warning-border); background: var(--fc-warning-bg); color: var(--fc-text); }.pairing-status { color: var(--fc-success); }
dialog { border-color: var(--fc-border); background: var(--fc-paper); color: var(--fc-text); box-shadow: 0 24px 70px rgba(10,42,78,.28); } dialog::backdrop { background: rgba(18,28,47,.48); }.modal-close { border-color: var(--fc-border); background: transparent; color: var(--fc-muted); box-shadow: none; }
@media(max-width:760px){.topbar{padding:0 18px}.flight-layout{padding:18px;gap:18px}}
@media(orientation:landscape) and (max-height:640px){.icon-button{width:30px;height:30px;font-size:14px}.topbar{height:42px;padding:0 20px}.topbar-status{gap:6px}.flight-layout{height:calc(100dvh - 42px);padding:10px 20px;gap:16px}}