/* auth-service pages (login, sign-up, join) in the Ordo look. Tokens copied from docs/design/canvas/ds/ordo/tokens.css. */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600;700&display=swap');

:root, [data-theme="light"] {--canvas:#eceef2;--canvas-hover:#e1e4ea;--surface:#ffffff;--surface-sunken:#f4f5f8;--surface-raised:#ffffff;--surface-hover:#f0f2f5;--surface-selected:#ebf0fc;--border:#e3e6eb;--border-control:#7f8796;--ink:#14181f;--ink-secondary:#485062;--ink-muted:#5f6879;--ink-disabled:#a2a9b5;--ink-inverse:#ffffff;--fill-inverse:#1f242d;--primary:#2a56c6;--primary-hover:#2147a8;--on-primary:#ffffff;--primary-soft:#ebf0fc;--primary-ink:#2450b8;--focus-ring:#2a56c6;--ai:#6a43cf;--ai-soft:#f2eefd;--ai-ink:#5733b8;--on-ai:#ffffff;--ai-border:#cfc2f7;--success:#18804d;--success-soft:#e5f4ec;--success-ink:#136a40;--warning:#b86a00;--warning-soft:#fdf1dd;--warning-ink:#8a4d00;--danger:#cc3a2f;--danger-soft:#fdecea;--danger-ink:#ae2a20;--info:#0b7ca3;--info-soft:#e3f2f8;--info-ink:#0a6789;--on-danger:#ffffff;--module-crm:#c0374f;--module-sales:#4a4ec2;--module-purchase:#0d7174;--module-inventory:#9c5410;--module-accounting:#137555;--module-hr:#7a3db3;--module-projects:#1c68ad;--module-helpdesk:#bb4318;--module-manufacturing:#4c5568;--module-pos:#4a7612;--module-marketing:#a8327a;--module-documents:#665a4b;--on-module:#ffffff;--chart-1:#2a56c6;--chart-2:#13a39b;--chart-3:#c2700c;--chart-4:#9b4fd0;--chart-5:#d24d6b;--chart-6:#8a93a3;--shadow-xs:0 1px 2px rgba(16,24,40,0.06);--shadow-sm:0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);--shadow-md:0 6px 16px rgba(16,24,40,0.10), 0 2px 4px rgba(16,24,40,0.05);--shadow-panel:0 0 0 1px rgba(16,24,40,0.05), 0 1px 2px rgba(16,24,40,0.04), 0 4px 12px rgba(16,24,40,0.04);--shadow-lg:0 20px 40px rgba(16,24,40,0.16), 0 4px 10px rgba(16,24,40,0.06);}
[data-theme="dark"] {--canvas:#090a0d;--canvas-hover:#181b22;--surface:#16191f;--surface-sunken:#111319;--surface-raised:#1d2129;--surface-hover:#20242d;--surface-selected:#1b2640;--border:#2a2f39;--border-control:#6b7385;--ink:#eceef2;--ink-secondary:#aab1bf;--ink-muted:#8c94a4;--ink-disabled:#545b69;--ink-inverse:#0e1014;--fill-inverse:#e9ebf0;--primary:#7096f2;--primary-hover:#8eaaf5;--on-primary:#0a1430;--primary-soft:#1b2640;--primary-ink:#94b2ff;--focus-ring:#94b2ff;--ai:#a68cf6;--ai-soft:#211a38;--ai-ink:#c4b3ff;--on-ai:#140a30;--ai-border:#3d3166;--success:#3fbf7f;--success-soft:#11291d;--success-ink:#74d6a2;--warning:#e8a33d;--warning-soft:#2d2111;--warning-ink:#f3be6a;--danger:#f06a5e;--danger-soft:#331716;--danger-ink:#ff9d93;--info:#4cbde2;--info-soft:#0f2730;--info-ink:#82d3ee;--on-danger:#1d0705;--module-crm:#c0374f;--module-sales:#5559c9;--module-purchase:#0d7174;--module-inventory:#9c5410;--module-accounting:#137555;--module-hr:#7f43b8;--module-projects:#1c68ad;--module-helpdesk:#bb4318;--module-manufacturing:#596276;--module-pos:#4a7612;--module-marketing:#a8327a;--module-documents:#6d6152;--on-module:#ffffff;--chart-1:#7096f2;--chart-2:#3cc9c0;--chart-3:#f0aa4b;--chart-4:#b884e8;--chart-5:#ec7a93;--chart-6:#6e7787;--shadow-xs:0 1px 2px rgba(0,0,0,0.4);--shadow-sm:0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);--shadow-md:0 8px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);--shadow-panel:0 0 0 1px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.5);--shadow-lg:0 24px 48px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.07);}
:root {--space-0-5:2px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-xs:4px;--radius-sm:6px;--radius-md:9px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:24px;--radius-full:9999px;--control-sm:28px;--control-md:34px;--control-lg:42px;--icon-sm:16px;--icon-md:20px;--row-height:40px;--topbar-height:52px;--sidebar-width:232px;--sidebar-collapsed:60px;--sheet-max:1140px;--assistant-width:380px;--palette-width:640px;--bottom-nav-height:64px;--dur-instant:90ms;--dur-fast:160ms;--dur-base:240ms;--dur-slow:600ms;--ease-out:cubic-bezier(0.16, 1, 0.3, 1);--ease-in:cubic-bezier(0.4, 0, 1, 1);--ease-standard:cubic-bezier(0.2, 0, 0, 1);--z-sticky:10;--z-sidebar:50;--z-dropdown:100;--z-drawer:200;--z-modal:300;--z-toast:400;--font-sans:Geist, "Segoe UI", system-ui, sans-serif;--font-mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: var(--font-sans); font-feature-settings: 'ss01', 'cv11'; font-size: 14px; line-height: 20px; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-16) var(--space-4); }
a { color: var(--primary-ink); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

.auth { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-6); }
.auth-wide { max-width: 480px; }
.brand { display: flex; align-items: center; gap: var(--space-2); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.brand-mark { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.card h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.card .sub { margin: var(--space-1) 0 0; color: var(--ink-muted); }
form { display: flex; flex-direction: column; gap: var(--space-4); }
.section { margin: var(--space-2) 0 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--ink-secondary); }
.label .optional { color: var(--ink-muted); font-weight: 400; }
.input { font: inherit; width: 100%; height: var(--control-md); padding: 0 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--border-control); border-radius: var(--radius-md); transition: border-color var(--dur-instant) var(--ease-standard), box-shadow var(--dur-instant) var(--ease-standard); }
.input:hover { border-color: var(--ink-muted); }
.input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input.invalid, .input.invalid:hover { border-color: var(--danger); }
.input.invalid:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.input::placeholder { color: var(--ink-muted); }
.mono { font-family: var(--font-mono); text-transform: uppercase; }
select.input { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.hint { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.error { font-size: 12px; line-height: 16px; color: var(--danger-ink); }

.btn { font: inherit; font-size: 14px; font-weight: 500; height: var(--control-lg); padding: 0 var(--space-4); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; background: var(--primary); color: var(--on-primary); width: 100%; transition: background-color var(--dur-instant) var(--ease-standard), transform var(--dur-instant) var(--ease-standard); }
.btn:hover { background: var(--primary-hover); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.alert { border-radius: var(--radius-md); padding: var(--space-3); font-size: 13px; line-height: 18px; }
.alert-danger { background: var(--danger-soft); color: var(--danger-ink); }
.alert-success { background: var(--success-soft); color: var(--success-ink); }
.alert-info { background: var(--info-soft); color: var(--info-ink); }
.footer { text-align: center; color: var(--ink-muted); }

@media (max-width: 480px) {
  body { padding: var(--space-8) var(--space-4); }
  .card { padding: var(--space-6) var(--space-5); }
  .row { grid-template-columns: 1fr; }
}