:root {
    --login-ink:#14243e;
    --login-muted:#5b6b83;
    --login-blue:#225de4;
    --login-blue-dark:#1749bd;
    --login-sky:#81c7ff;
    --login-paper:#f4f7fc;
    --login-navy:#081c3b;
}

* { box-sizing:border-box; }
html, body { min-width:320px; min-height:100%; }
body.tms-auth { min-height:100vh; margin:0; color:var(--login-ink); background:var(--login-paper); font-family:Nunito,"Segoe UI",Arial,sans-serif; font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; }
button { cursor:pointer; }

.tms-login-shell { display:grid; grid-template-columns:minmax(390px,1.08fr) minmax(390px,1fr); min-height:100vh; overflow:hidden; }
.tms-login-story { position:relative; display:flex; min-height:100vh; padding:38px clamp(30px,4vw,58px) 30px; flex-direction:column; overflow:hidden; isolation:isolate; color:#fff; background:radial-gradient(circle at 18% 48%,rgba(35,91,187,.22),transparent 42%),linear-gradient(160deg,#071a38 0%,#0a2248 100%); }
.tms-login-story::before { position:absolute; top:105px; left:-160px; width:650px; height:650px; z-index:-2; border-radius:50%; background:radial-gradient(circle,rgba(35,91,187,.35),transparent 66%); content:""; }
.tms-login-story::after { position:absolute; right:-205px; bottom:-250px; width:540px; height:540px; z-index:-1; border:1px solid rgba(129,199,255,.12); border-radius:50%; box-shadow:0 0 0 75px rgba(129,199,255,.035),0 0 0 150px rgba(129,199,255,.02); content:""; }

.tms-codebright-logo { position:relative; z-index:2; display:block; width:min(230px,58%); color:#fff; text-decoration:none; }
.tms-codebright-logo img { display:block; width:100%; height:auto; filter:brightness(0) invert(1) drop-shadow(0 7px 16px rgba(0,0,0,.15)); }
.tms-story-copy { position:relative; z-index:1; }
.tms-story-eyebrow { display:flex; margin:29px 0 0; align-items:center; gap:10px; color:#b4ddff; font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.tms-story-eyebrow::before { width:21px; height:1px; background:var(--login-sky); content:""; }
.tms-story-copy h1 { max-width:540px; margin:18px 0 20px; color:#fff; font-size:clamp(38px,4.3vw,60px); font-weight:700; letter-spacing:-.055em; line-height:1.04; }
.tms-story-copy h1 span { color:#8bcaff; }
.tms-story-intro { max-width:430px; margin:0; color:#d4e1f5; font-size:14px; line-height:1.8; }

.tms-truck-scene { position:relative; height:238px; margin:24px -14px 7px; }
.tms-scene-orbit { position:absolute; inset:9px 8% 23px; border:1px solid rgba(148,184,240,.14); border-radius:50%; transform:rotate(-15deg); }
.tms-scene-orbit::after { position:absolute; inset:28px -28px; border:1px solid rgba(148,184,240,.075); border-radius:50%; content:""; }
.tms-scene-road { position:absolute; top:137px; right:0; left:0; height:72px; overflow:hidden; border-top:1px solid #2b4976; border-bottom:1px solid #2b4976; background:#102e56; transform:skewY(-8deg); }
.tms-scene-road::after { position:absolute; top:35px; left:-100%; width:300%; height:2px; background:repeating-linear-gradient(90deg,#86a8d6 0 24px,transparent 24px 63px); animation:tms-road 1.15s linear infinite; content:""; }
.tms-truck { position:absolute; top:58px; left:11%; width:310px; height:130px; filter:drop-shadow(0 20px 10px rgba(0,0,0,.33)); animation:tms-drive 7s ease-in-out infinite; }
.tms-trailer { position:absolute; top:2px; left:0; width:205px; height:94px; border-top:4px solid #fff; border-radius:4px; background:repeating-linear-gradient(90deg,transparent 0 15px,rgba(103,139,185,.1) 15px 16px),linear-gradient(135deg,#f2f7ff,#9bbadd); box-shadow:inset 0 -7px #658bbb; }
.tms-trailer::after { position:absolute; top:21px; left:28px; color:#24528c; font-size:32px; font-weight:900; letter-spacing:2px; content:"TMS"; }
.tms-cab { position:absolute; top:9px; right:0; width:86px; height:94px; border-radius:6px 14px 4px 3px; background:linear-gradient(100deg,#2985de 0%,#6bbaff 69%,#1f6fb6 70%); box-shadow:inset 0 -8px #1a5490; clip-path:polygon(0 11%,12% 0,72% 0,87% 12%,100% 35%,100% 100%,0 100%); }
.tms-cab::before { position:absolute; top:12px; right:20px; left:10px; height:3px; border-radius:3px; background:#b0ddff; content:""; }
.tms-cab::after { position:absolute; top:54px; left:13px; width:40px; height:29px; border:1px solid rgba(14,76,136,.24); border-radius:2px; content:""; }
.tms-window { position:absolute; top:31px; right:29px; width:45px; height:27px; border-left:3px solid #123a65; background:linear-gradient(135deg,#8fb8d4 0%,#173e68 28%,#0b2546 100%); clip-path:polygon(0 0,85% 0,100% 100%,0 100%); }
.tms-scania-name { position:absolute; top:62px; right:0; width:34px; color:#fff; font-size:7px; font-weight:900; letter-spacing:.4px; line-height:1.4; text-align:center; transform:skewY(8deg); }
.tms-grille { position:absolute; top:75px; right:0; width:31px; height:20px; border:2px solid #236ba7; border-radius:2px; background:repeating-linear-gradient(0deg,#0a2443 0 3px,#4e7eab 3px 4px); transform:skewY(8deg); }
.tms-mirror { position:absolute; top:39px; right:-4px; width:7px; height:16px; border-radius:2px; background:#0a2443; box-shadow:-6px -3px 0 -2px #d7e9ff; }
.tms-headlight { position:absolute; top:98px; right:2px; width:17px; height:4px; border-radius:2px; background:#e6f5ff; box-shadow:4px 0 14px 3px rgba(160,214,255,.26); }
.tms-step { position:absolute; top:97px; right:42px; width:24px; height:5px; border-radius:1px; background:#d0ddeb; }
.tms-chassis { position:absolute; right:-3px; bottom:20px; left:6px; height:9px; border-radius:3px; background:#3b5c83; }
.tms-wheel { position:absolute; bottom:0; width:34px; height:34px; border:8px solid #07172c; border-radius:50%; background:#afc5e0; box-shadow:0 0 0 2px #28456e; }
.tms-wheel::before { position:absolute; inset:0; border-radius:50%; background:conic-gradient(#d5e4f3 0deg 35deg,#587797 35deg 75deg,#d5e4f3 75deg 110deg,#587797 110deg 150deg,#d5e4f3 150deg 185deg,#587797 185deg 225deg,#d5e4f3 225deg 260deg,#587797 260deg 300deg,#d5e4f3 300deg 335deg,#587797 335deg 360deg); animation:tms-wheel-spin 1.15s linear infinite; content:""; }
.tms-wheel::after { position:absolute; inset:6px; border-radius:50%; background:#a6bdd7; content:""; }
.tms-wheel-a { left:28px; }
.tms-wheel-b { left:66px; }
.tms-wheel-c { right:28px; }
.tms-wheel-d { right:77px; }
.tms-scene-tag { position:absolute; top:7px; right:4%; display:flex; padding:8px 12px; align-items:center; gap:8px; border:1px solid #42648f; border-radius:9px; color:#c5dcfa; background:#15365d; font-size:11px; animation:tms-float 5s ease-in-out infinite; }
.tms-scene-tag span { width:6px; height:6px; border-radius:50%; background:var(--login-sky); box-shadow:0 0 0 4px rgba(129,199,255,.08); }
.tms-scene-caption { position:absolute; bottom:3px; left:9%; margin:0; color:#bfd2ee; font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.tms-capabilities { position:relative; display:flex; margin-top:auto; padding-top:21px; flex-wrap:wrap; gap:20px; border-top:1px solid rgba(255,255,255,.11); }
.tms-capabilities span { display:flex; align-items:center; gap:8px; color:#e1ebfa; font-size:11px; font-weight:700; }
.tms-capabilities i { color:#89bfff; font-size:17px; }

.tms-login-form-side { position:relative; display:flex; min-width:0; min-height:100vh; padding:31px clamp(30px,4.2vw,58px) 27px; flex-direction:column; background:linear-gradient(145deg,#f7f9fd,#f0f4fb); }
.tms-login-topline { color:var(--login-muted); font-size:11px; }
.tms-login-form-wrap { width:100%; max-width:410px; margin:auto; padding:38px 0 42px; animation:tms-enter .7s ease both; }
.tms-product-brand { display:flex; margin-bottom:25px; align-items:center; gap:14px; }
.tms-product-mark { display:grid; width:48px; height:48px; flex:0 0 48px; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#2d68eb,#225de4); box-shadow:0 10px 22px rgba(34,93,228,.2); font-size:22px; }
.tms-product-brand strong { display:block; color:var(--login-ink); font-size:27px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.tms-product-brand small { display:block; margin-top:6px; color:#566b89; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.tms-login-overline { margin:0 0 7px; color:var(--login-blue); font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.tms-login-form-wrap h2 { margin:0 0 10px; color:var(--login-ink); font-size:36px; font-weight:700; letter-spacing:-.045em; line-height:1.2; }
.tms-login-description { max-width:340px; margin:0 0 28px; color:var(--login-muted); font-size:13px; line-height:1.65; }
.tms-login-alert, .tms-validation-summary { margin:0 0 20px; padding:12px 13px; border:1px solid #fecdd3; border-radius:9px; color:#9f1239; background:#fff1f2; font-size:12px; font-weight:700; line-height:1.45; }
.tms-login-alert { display:flex; align-items:flex-start; gap:9px; }
.tms-login-alert i { margin-top:1px; flex:0 0 auto; font-size:17px; }
.tms-validation-summary:empty, .tms-validation-summary.validation-summary-valid { display:none; }
.tms-validation-summary ul { margin:0; padding-left:18px; }
.tms-field { margin-bottom:18px; }
.tms-field-label { display:block; margin:0 0 7px; color:#182235; font-size:12px; font-weight:800; }
.tms-input-wrap { position:relative; }
.tms-input-icon { position:absolute; top:50%; left:15px; color:#7789a5; font-size:18px; transform:translateY(-50%); pointer-events:none; }
.tms-input { width:100%; height:52px; padding:0 46px; border:1px solid #cbd6e7; border-radius:9px; outline:0; color:var(--login-ink); background:#fff; font-size:14px; transition:border-color .2s,box-shadow .2s; }
.tms-input::placeholder { color:#8392a9; }
.tms-input:hover { border-color:#aebdd1; }
.tms-input:focus { border-color:var(--login-blue); box-shadow:0 0 0 3px rgba(34,93,228,.1); }
.tms-input-wrap:focus-within .tms-input-icon { color:var(--login-blue); }
.tms-input.input-validation-error { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.08); }
.tms-field-error { display:block; margin-top:5px; color:#dc2626; font-size:11px; font-weight:700; }
.tms-field-error:empty { display:none; }
.tms-password-toggle { position:absolute; top:4px; right:5px; display:grid; width:44px; height:44px; padding:0; border:0; border-radius:6px; place-items:center; color:#617694; background:transparent; font-size:18px; }
.tms-password-toggle:hover { color:var(--login-blue); background:#edf2fb; }
.tms-password-toggle:focus-visible { outline:2px solid var(--login-blue); outline-offset:1px; }
.tms-login-options { display:flex; min-height:44px; margin:-1px 0 18px; align-items:center; justify-content:space-between; gap:12px; }
.tms-remember { position:relative; display:flex; min-height:44px; margin:0; align-items:center; gap:9px; color:#4d6282; font-size:12px; cursor:pointer; user-select:none; }
.tms-remember input { position:absolute; left:0; width:40px; height:24px; margin:0; opacity:0; }
.tms-remember-switch { position:relative; display:block; width:40px; height:24px; flex:0 0 40px; border-radius:20px; background:#c9d3e3; transition:background .2s; pointer-events:none; }
.tms-remember-switch::after { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(19,40,75,.15); transition:transform .2s; content:""; }
.tms-remember input:checked + input + .tms-remember-switch,
.tms-remember input:checked + .tms-remember-switch { background:var(--login-blue); }
.tms-remember input:checked + input + .tms-remember-switch::after,
.tms-remember input:checked + .tms-remember-switch::after { transform:translateX(16px); }
.tms-remember input:focus-visible + input + .tms-remember-switch,
.tms-remember input:focus-visible + .tms-remember-switch { outline:2px solid var(--login-blue); outline-offset:3px; }
.tms-password-help { color:#667994; font-size:11px; font-weight:700; text-align:right; }
.tms-login-submit { display:flex; width:100%; height:52px; padding:0 18px; align-items:center; justify-content:center; gap:11px; border:0; border-radius:9px; color:#fff; background:var(--login-blue); box-shadow:0 8px 20px rgba(34,93,228,.17); font-size:13px; font-weight:800; transition:background .2s,box-shadow .2s,transform .2s; }
.tms-login-submit:hover { background:var(--login-blue-dark); box-shadow:0 12px 23px rgba(34,93,228,.27); transform:translateY(-2px); }
.tms-login-submit:active { transform:translateY(0); }
.tms-login-submit:focus-visible { outline:3px solid rgba(34,93,228,.28); outline-offset:3px; }
.tms-login-submit:disabled { opacity:.78; cursor:wait; transform:none; }
.tms-submit-spinner { display:none; width:17px; height:17px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:tms-spin .7s linear infinite; }
.tms-login-submit.is-loading .tms-submit-spinner { display:block; }
.tms-login-submit.is-loading .tms-submit-arrow { display:none; }
.tms-authorized-note { display:flex; margin:21px 0 0; align-items:center; justify-content:center; gap:7px; color:#617694; font-size:11px; }
.tms-authorized-note i { color:#466b9d; font-size:15px; }
.tms-login-footer { color:#6b7e9a; font-size:10px; line-height:1.55; text-align:center; }
.tms-login-footer strong { color:#324e78; font-weight:800; }

@keyframes tms-wheel-spin { to { transform:rotate(360deg); } }
@keyframes tms-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes tms-float { 50% { transform:translateY(-6px); } }
@keyframes tms-drive { 0%,100% { transform:translate(-8px,0); } 25% { transform:translate(0,-2px); } 50% { transform:translate(12px,0); } 75% { transform:translate(4px,-1px); } }
@keyframes tms-road { to { transform:translateX(-63px); } }
@keyframes tms-spin { to { transform:rotate(360deg); } }

@media (min-width:1400px) {
    .tms-login-story { padding:48px 70px 35px; }
    .tms-story-eyebrow { margin-top:42px; }
    .tms-login-form-side { padding-right:70px; padding-left:70px; }
}

@media (max-width:1080px) and (min-width:761px) {
    .tms-login-shell { grid-template-columns:minmax(350px,.92fr) minmax(410px,1.08fr); }
    .tms-login-story { padding:30px; }
    .tms-story-copy h1 { font-size:42px; letter-spacing:-.045em; }
    .tms-story-intro { font-size:13px; }
    .tms-truck { left:2%; transform:scale(.9); transform-origin:left center; }
    .tms-scene-tag { right:0; }
    .tms-capabilities { gap:12px; }
    .tms-login-form-side { padding-right:34px; padding-left:34px; }
}

@media (max-height:760px) and (min-width:761px) {
    .tms-login-story { padding-top:24px; padding-bottom:22px; }
    .tms-codebright-logo { width:180px; }
    .tms-story-eyebrow { margin-top:17px; }
    .tms-story-copy h1 { margin:10px 0 11px; font-size:38px; }
    .tms-story-intro { font-size:12px; line-height:1.55; }
    .tms-truck-scene { height:190px; margin-top:8px; transform:scale(.86); transform-origin:top left; }
    .tms-capabilities { padding-top:14px; }
    .tms-login-form-wrap { padding:20px 0 24px; }
    .tms-product-brand { margin-bottom:17px; }
    .tms-login-description { margin-bottom:20px; }
    .tms-field { margin-bottom:13px; }
}

@media (max-width:760px) {
    .tms-login-shell { display:block; min-height:100vh; overflow:visible; }
    .tms-login-story { min-height:0; padding:24px clamp(20px,6vw,38px) 25px; }
    .tms-codebright-logo { width:185px; }
    .tms-story-eyebrow { margin-top:20px; }
    .tms-story-copy h1 { max-width:470px; margin:10px 0 12px; font-size:clamp(34px,9vw,46px); }
    .tms-story-intro { max-width:520px; font-size:12px; line-height:1.65; }
    .tms-truck-scene { display:none; }
    .tms-capabilities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:20px; padding-top:16px; gap:12px 20px; }
    .tms-capabilities span { min-width:0; }
    .tms-login-form-side { min-height:auto; padding:22px clamp(20px,6vw,38px) 24px; }
    .tms-login-topline { display:none; }
    .tms-login-form-wrap { max-width:520px; margin:0 auto; padding:18px 0 31px; }
    .tms-login-footer { margin-top:auto; }
}

@media (max-width:440px) {
    .tms-login-story { padding-top:20px; }
    .tms-codebright-logo { width:160px; }
    .tms-story-eyebrow { margin-top:15px; font-size:9px; }
    .tms-story-copy h1 { font-size:32px; }
    .tms-story-intro { display:none; }
    .tms-capabilities { grid-template-columns:1fr; margin-top:15px; }
    .tms-capabilities span { font-size:10px; }
    .tms-login-form-side { padding-right:18px; padding-left:18px; }
    .tms-product-brand { margin-bottom:21px; }
    .tms-product-mark { width:44px; height:44px; flex-basis:44px; }
    .tms-product-brand strong { font-size:24px; }
    .tms-product-brand small { font-size:9.5px; }
    .tms-login-form-wrap h2 { font-size:31px; }
    .tms-login-description { margin-bottom:23px; }
    .tms-login-options { align-items:flex-start; flex-direction:column; gap:0; }
    .tms-password-help { margin-left:49px; text-align:left; }
}

@media (prefers-reduced-motion:reduce) {
    .tms-login-shell *, .tms-login-shell *::before, .tms-login-shell *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}