
:root{
--wf-admin-accent:#D6A232;
--wf-admin-background:#0B0D12;
--wf-admin-surface:#171B24;
--wf-admin-surface-alt:#11151D;
--wf-admin-text:#F5F7FB;
--wf-admin-muted:#9CA7BC;
}
*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;font-family:Poppins,Arial,sans-serif;background:var(--wf-admin-background);color:var(--wf-admin-text)}
.login-scene{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,520px);background-size:cover;background-position:center;background-repeat:no-repeat}
.login-story{display:flex;flex-direction:column;justify-content:space-between;padding:48px 54px;background:linear-gradient(90deg, rgba(7,9,14,.42), rgba(7,9,14,.08))}
.brand{display:flex;flex-direction:column;gap:6px}
.brand-title{font-size:3rem;font-weight:800;letter-spacing:.28rem;line-height:.94}
.brand-subtitle{color:var(--wf-admin-text);font-size:1rem;max-width:460px;line-height:1.7;opacity:.88}
.story-copy{max-width:580px;padding-bottom:32px}
.story-kicker{display:inline-block;margin-bottom:18px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);font-size:.82rem;letter-spacing:.14rem;text-transform:uppercase;color:var(--wf-admin-accent)}
.story-copy h1{font-size:4.2rem;line-height:.95;margin-bottom:18px;max-width:640px}
.story-copy p{max-width:520px;color:var(--wf-admin-text);font-size:1.05rem;line-height:1.8;opacity:.9}
.story-footer{color:var(--wf-admin-text);font-size:.96rem;opacity:.78}
.login-panel-wrap{display:flex;align-items:center;justify-content:center;padding:32px;background:rgba(8,10,14,.78);backdrop-filter:blur(16px);border-left:1px solid rgba(255,255,255,.08)}
.login-panel{width:100%;max-width:420px;padding:34px;border-radius:28px;background:rgba(16,19,26,.82);border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 80px rgba(0,0,0,.42)}
.panel-header{margin-bottom:28px}
.panel-eyebrow{display:block;margin-bottom:10px;color:var(--wf-admin-accent);font-size:.82rem;font-weight:700;letter-spacing:.16rem;text-transform:uppercase}
.panel-header h2{font-size:2rem;margin-bottom:12px}
.panel-header p{color:var(--wf-admin-muted);line-height:1.7}
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:10px;font-size:.94rem;color:var(--wf-admin-text)}
.field input{width:100%;padding:16px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:var(--wf-admin-surface-alt);color:var(--wf-admin-text);font:inherit;outline:none;transition:border-color .2s ease, box-shadow .2s ease, background .2s ease}
.field input:focus{border-color:rgba(214,162,50,.75);box-shadow:0 0 0 4px rgba(214,162,50,.14);background:#161b28}
.submit{width:100%;padding:16px 18px;margin-top:8px;border:0;border-radius:16px;background:linear-gradient(135deg, color-mix(in srgb, var(--wf-admin-accent) 78%, white 22%), var(--wf-admin-accent));color:#121212;font:inherit;font-weight:700;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;box-shadow:0 18px 35px rgba(214,162,50,.22)}
.submit:hover{transform:translateY(-1px);filter:brightness(1.02)}
.error{margin-top:18px;padding:14px 16px;border-radius:16px;background:rgba(173,39,39,.18);border:1px solid rgba(255,120,120,.26);color:#ffb4b4;line-height:1.6}
.panel-links{display:flex;justify-content:flex-end;margin-top:14px}
.panel-links a{color:var(--wf-admin-accent);text-decoration:none;font-size:.92rem}
.panel-links a:hover{text-decoration:underline}
.panel-footer{margin-top:22px;color:var(--wf-admin-muted);font-size:.92rem;line-height:1.7}
.panel-footer strong{color:var(--wf-admin-text)}
@media (max-width: 1100px){.login-scene{grid-template-columns:1fr}.login-story{min-height:48vh}.login-panel-wrap{border-left:0;border-top:1px solid rgba(255,255,255,.08)}}
@media (max-width: 680px){.login-story,.login-panel-wrap{padding:24px}.login-panel{padding:24px;border-radius:22px}.brand-title{font-size:2.3rem}.story-copy h1{font-size:2.8rem}}

