:root { --ink:#10233f; --muted:#64748b; --cream:#f3f7fc; --paper:#ffffff; --green:#1769c2; --green2:#0d4f9b; --lime:#7dd3fc; --line:#d8e2ef; --danger:#c93838; --warning:#b86b00; --success:#16835f; --info:#1769c2; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 18% 0%,#ffffff 0,transparent 38%),linear-gradient(145deg,#f6f9fd 0,#edf4fb 100%); }
button,input { font:inherit; }
.hidden { display:none !important; }
.brand-bar { height:78px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(30,75,125,.12); background:rgba(255,255,255,.88); backdrop-filter:blur(12px); }
.brand { color:inherit; display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(145deg,#2580db,#0d4f9b); color:white; font-weight:800; letter-spacing:-.04em; box-shadow:0 8px 22px rgba(23,105,194,.24); }
.brand strong,.brand small { display:block; }.brand strong { font-size:18px; }.brand small { margin-top:2px; color:var(--muted); font-size:11px; }
.environment { padding:7px 11px; border:1px solid #cbd3ca; border-radius:999px; color:var(--muted); font-size:12px; }
.center-card { min-height:calc(100vh - 78px); display:grid; place-content:center; justify-items:center; color:var(--muted); }
.spinner { width:30px; height:30px; border:3px solid #dce4db; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.auth-layout { min-height:calc(100vh - 78px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:clamp(50px,8vw,130px); align-items:center; padding:60px clamp(24px,8vw,130px); }
.auth-story { max-width:650px; }.auth-story h1 { margin:10px 0 24px; max-width:630px; font-family:Georgia,serif; font-size:clamp(44px,6vw,76px); line-height:.98; letter-spacing:-.045em; font-weight:500; }.auth-story>p:not(.eyebrow) { max-width:590px; font-size:18px; line-height:1.65; color:var(--muted); }
.eyebrow { margin:0; color:var(--green); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:800; }
.trust-list { margin:35px 0 0; padding:0; display:grid; gap:13px; list-style:none; }.trust-list li:before { content:"✓"; display:inline-grid; place-items:center; width:23px; height:23px; margin-right:10px; border-radius:50%; background:#dceeff; color:var(--green2); font-weight:900; }
.auth-card,.panel { background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:24px; box-shadow:0 24px 70px rgba(25,67,112,.10); }.auth-card { width:100%; max-width:480px; justify-self:end; padding:38px; }.auth-card h2 { margin:8px 0 28px; font-family:Georgia,serif; font-size:31px; font-weight:500; }
label { display:grid; gap:8px; margin:17px 0; font-size:13px; font-weight:700; } input { width:100%; padding:13px 14px; border:1px solid #cbd2ca; border-radius:10px; color:var(--ink); background:white; outline:none; } input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(20,92,72,.12); }
.primary-button { border:0; border-radius:10px; padding:14px 18px; background:linear-gradient(135deg,#1976d2,#0d55aa); color:white; font-weight:800; cursor:pointer; box-shadow:0 8px 20px rgba(23,105,194,.2); transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease; }.primary-button:hover { transform:translateY(-1px); box-shadow:0 11px 25px rgba(23,105,194,.25); }.primary-button:disabled { cursor:wait; opacity:.65; transform:none; }.auth-card .primary-button { width:100%; margin-top:10px; }
.form-note { margin:18px 0 0; color:var(--muted); font-size:12px; line-height:1.5; text-align:center; }.form-error { padding:11px; color:var(--danger); background:#fbeaea; border-radius:9px; font-size:13px; }
.app-layout { min-height:calc(100vh - 78px); display:grid; grid-template-columns:225px 1fr; }.sidebar { padding:34px 22px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); background:#eaf2fb; }.sidebar nav { display:grid; gap:7px; }.sidebar nav a,.sidebar nav span { display:flex; justify-content:space-between; padding:12px 14px; color:var(--muted); text-decoration:none; border-radius:9px; font-size:14px; }.sidebar nav .active { background:linear-gradient(135deg,#1976d2,#0d55aa); color:white; font-weight:700; box-shadow:0 8px 18px rgba(23,105,194,.18); }.sidebar em { font-size:9px; text-transform:uppercase; font-style:normal; letter-spacing:.08em; opacity:.7; }.text-button { border:0; background:none; color:var(--muted); text-align:left; cursor:pointer; padding:12px 14px; }
.workspace { padding:45px clamp(25px,5vw,75px) 80px; max-width:1450px; width:100%; }.workspace-header { display:flex; justify-content:space-between; align-items:end; margin-bottom:32px; }.workspace-header h1 { margin:7px 0 0; font-family:Georgia,serif; font-size:39px; font-weight:500; }.identity { text-align:right; }.identity strong,.identity span { display:block; }.identity span { margin-top:5px; color:var(--muted); font-size:12px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.metric-grid article { min-height:155px; padding:25px; background:var(--paper); border:1px solid var(--line); border-radius:18px; }.metric-grid span,.metric-grid small { display:block; color:var(--muted); }.metric-grid strong { display:block; margin:16px 0 8px; font-family:Georgia,serif; font-size:34px; font-weight:500; }.metric-grid .healthy { color:var(--green); font-size:27px; }.metric-grid small { font-size:12px; }
.panel { margin-top:20px; padding:28px; display:grid; grid-template-columns:minmax(230px,.7fr) minmax(320px,1.3fr); gap:40px; align-items:start; }.panel h2 { margin:7px 0; font-family:Georgia,serif; font-size:27px; font-weight:500; }.panel>div>p:last-child { color:var(--muted); line-height:1.5; }.readiness-list { display:grid; gap:10px; }.readiness-list p { margin:0; padding:12px 15px; border:1px solid var(--line); border-radius:10px; font-size:13px; }.readiness-list span { display:inline-block; min-width:70px; margin-right:10px; color:var(--green); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.inline-form { display:grid; grid-template-columns:1fr 1fr; gap:0 15px; }.inline-form label:last-of-type { grid-column:1/-1; }.inline-form button { grid-column:1/-1; justify-self:start; }.secret-result { grid-column:1/-1; margin-top:20px; padding:18px; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid #83b8eb; border-radius:10px; background:#eaf4ff; font-family:ui-monospace,monospace; }
.progress-track { position:fixed; z-index:1000; inset:0 0 auto; height:3px; overflow:hidden; background:#d8e9fa; }.progress-track span { display:block; width:38%; height:100%; background:linear-gradient(90deg,#38bdf8,#1769c2); animation:progress 1.05s ease-in-out infinite; } @keyframes progress { from { transform:translateX(-110%); } to { transform:translateX(365%); } }
.toast-region { position:fixed; z-index:1100; top:92px; right:24px; width:min(390px,calc(100vw - 48px)); display:grid; gap:10px; pointer-events:none; }.toast { display:grid; grid-template-columns:10px 1fr auto; gap:12px; align-items:start; padding:15px 16px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:0 16px 45px rgba(25,67,112,.18); animation:toast-in .22s ease-out; pointer-events:auto; }.toast:before { content:""; width:9px; height:9px; margin-top:5px; border-radius:50%; background:var(--info); }.toast.success:before { background:var(--success); }.toast.warning:before { background:var(--warning); }.toast.error:before { background:var(--danger); }.toast strong,.toast span { display:block; }.toast strong { font-size:13px; }.toast span { margin-top:3px; color:var(--muted); font-size:12px; line-height:1.4; }.toast button { border:0; background:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; } @keyframes toast-in { from { opacity:0; transform:translateY(-8px); } }
@media (max-width:850px) { .auth-layout { grid-template-columns:1fr; }.auth-story h1 { font-size:48px; }.auth-card { justify-self:start; }.app-layout { grid-template-columns:1fr; }.sidebar { display:none; }.metric-grid { grid-template-columns:1fr; }.panel { grid-template-columns:1fr; }.workspace-header { align-items:start; gap:20px; }.environment { display:none; } }