@import './ui/workflow.css';
:root { --bg:#10131b; --surface:#171b24; --surface-2:#1d222d; --surface-3:#252b38; --surface-hover:#2a3140; --border:rgba(255,255,255,.1); --border-strong:rgba(255,255,255,.18); --text:#f0f1f5; --text-2:#bdc3d0; --text-3:#8c96aa; --down:#ff9fb0; --up:#69d6a2; --amber:#f4c15b; --src:#ef7a3c; --nau-accent-soft:rgba(239,122,60,.13); --nau-accent-border:rgba(239,122,60,.35); --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --font-ui:'Space Grotesk','Trebuchet MS',sans-serif; --font-mono:'DM Mono',monospace; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--text); background:radial-gradient(circle at 12% 5%,rgba(239,122,60,.12),transparent 32%),radial-gradient(circle at 90% 20%,rgba(111,94,224,.1),transparent 28%),var(--bg); font-family:var(--font-ui); } button,input,select { font:inherit; } button { cursor:pointer; }
.safe-loading { display:grid; place-items:center; min-height:100vh; color:var(--text-2); }
.safe-shell { width:min(1120px,100% - 36px); margin:0 auto; padding:22px 0 42px; } .safe-topbar { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--border); } .safe-brand { color:var(--text); font-size:12px; font-weight:800; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; } .safe-brand span { display:inline-grid; width:29px; height:29px; margin-right:8px; place-items:center; border-radius:9px 4px 9px 4px; background:var(--src); color:#fff; font:20px Georgia,serif; transform:rotate(-7deg); } .safe-logout { border:1px solid var(--border); border-radius:8px; padding:7px 10px; color:var(--text-2); background:transparent; font-size:11px; } .safe-heading { padding:50px 0 26px; } .safe-heading h1 { margin:7px 0 0; font-size:clamp(32px,5vw,55px); letter-spacing:-.06em; } .safe-kicker { color:var(--src); font:700 9px var(--font-mono); letter-spacing:.13em; } footer { padding:25px 2px 0; color:var(--text-3); font:9px var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.safe-login { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:10%; width:min(1060px,100% - 40px); min-height:100vh; margin:auto; } .safe-login-copy h1 { margin:14px 0 18px; font-size:clamp(50px,8vw,90px); line-height:.92; letter-spacing:-.08em; } .safe-login-copy h1 em { color:var(--src); font-family:Georgia,serif; font-weight:400; } .safe-login-copy p { max-width:430px; color:var(--text-2); font-size:17px; line-height:1.55; } .safe-login-card { padding:34px; border:1px solid var(--border); border-radius:20px; background:rgba(23,27,36,.9); box-shadow:0 25px 70px rgba(0,0,0,.25); } .safe-login-card h2 { margin:18px 0 8px; } .safe-login-card label { display:block; margin:26px 0 8px; color:var(--text-2); font:10px var(--font-mono); text-transform:uppercase; } .safe-login-card input { width:100%; padding:12px; border:1px solid var(--border-strong); border-radius:9px; color:var(--text); background:var(--surface-2); outline:none; } .safe-primary { width:100%; margin-top:16px; padding:13px 15px; border:0; border-radius:9px; color:#fff; background:var(--src); font-weight:800; text-align:left; } .safe-primary b { float:right; color:#ffe1c9; font-size:18px; } .safe-error { min-height:18px; margin:12px 0 0; color:var(--down); font-size:11px; }
/* The copied workflow stylesheet expects the all-in-one shell's utility classes. */
.card { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:0 8px 28px rgba(0,0,0,.12); } .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border); border-radius:8px; padding:8px 11px; color:var(--text-2); background:var(--surface-2); font-size:10px; font-weight:700; } .btn:disabled { cursor:not-allowed; opacity:.5; } .btn-primary { border-color:transparent; color:#fff; background:var(--src); } .btn-soft:hover,.btn-ghost:hover { border-color:var(--border-strong); background:var(--surface-hover); } .btn-ghost { background:transparent; } .btn.sm { padding:7px 9px; font-size:9px; }
@media (max-width:760px) { .safe-login { display:block; padding:70px 0; } .safe-login-copy { margin-bottom:45px; } .safe-shell { width:min(100% - 24px,1120px); } .safe-heading { padding-top:34px; } }