/* Shell styling for the login and error pages.
   Same tokens as the dashboard export, so the app reads as one product. */
:root{--bg:#f4f6fa;--card:#fff;--ink:#1a2333;--mut:#6b7688;--acc:#2458c5;--neg:#c0392b;--bd:#e3e8f0;--nav:#16233f}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;min-height:100vh;display:flex;flex-direction:column}

header{background:var(--nav);color:#fff;padding:14px 22px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
header h1{font-size:18px;font-weight:600}
header .sub{color:#9fb0d0;font-size:12px}

main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 16px}
.panel{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:22px 24px;width:100%;max-width:400px}
.panel h2{font-size:16px;margin-bottom:5px}
.muted{font-size:12.5px;color:var(--mut);line-height:1.55}

form.login{margin-top:18px}
form.login label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);margin-bottom:6px}
form.login input{width:100%;padding:9px 11px;border:1px solid var(--bd);border-radius:6px;background:#fff;color:var(--ink);font:inherit}
form.login input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(36,88,197,.15)}
form.login button{width:100%;margin-top:16px;padding:10px 14px;border:0;border-radius:8px;background:var(--acc);color:#fff;font:inherit;font-weight:700;cursor:pointer}
form.login button:hover{background:#1c48a5}

.alert{background:#fde3de;color:#a33025;border:1px solid #f6c8c0;border-radius:8px;padding:9px 12px;font-size:12.5px;font-weight:600;margin-top:16px}
.errcode{font-size:34px;font-weight:700;color:var(--acc);letter-spacing:-1px;margin-bottom:2px}
.backlink{display:inline-block;margin-top:14px;color:var(--acc);font-size:13px;font-weight:600;text-decoration:none}
.backlink:hover{text-decoration:underline}