:root{
    --bg:#f4f7f8;
    --surface:#fff;
    --text:#0d2430;
    --muted:#718392;
    --line:#dfe8eb;
    --teal:#12a99c;
    --teal-dark:#087e77;
    --teal-soft:#e7f8f5;
    --red:#e45463;
    --red-soft:#fff0f2;
    --orange:#ee9a2e;
    --orange-soft:#fff6e8;
    --blue:#277de0;
    --blue-soft:#edf5ff;
    --green:#1f9b67;
    --green-soft:#eaf8f1;
    --sidebar:#101a1d;
    --shadow:0 2px 12px rgba(14,43,52,.06);
    --radius:14px;
}
*{box-sizing:border-box}
html{font-size:17px}
html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
body{font-size:1rem}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{max-width:100%}
.muted{color:var(--muted)}
.text-danger{color:var(--red)}
.text-success{color:var(--green)}
.text-warning{color:var(--orange)}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}
.hidden{display:none!important}

.login-page{display:grid;place-items:center;background:linear-gradient(135deg,#0d181b 0 33%,#eef4f5 33% 100%);min-height:100vh}
.login-card{width:min(520px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.login-brand{display:flex;align-items:center;gap:18px;background:#111b1e;color:#fff;border-radius:14px;padding:18px 20px;margin-bottom:30px}
.login-brand img{width:116px;height:52px;object-fit:contain}
.login-brand span{font-weight:700;font-size:17px}
.login-card h1{font-size:36px;line-height:1.15;margin:0 0 8px}