:root { --bgb-ink:#142b43; --bgb-muted:#536575; --bgb-page:#f6f6f0; --bgb-paper:#fff; --bgb-line:#7d8f9c; --bgb-accent:#197c89; --bgb-soft:#e2f1ed; }
body { font-family:Arial,Helvetica,sans-serif; }
.bgb-brand { display:flex; align-items:center; gap:20px; }
.bgb-brand img { display:block; width:205px; height:65px; object-fit:contain; }
.bgb-brand span { color:var(--bgb-muted); border-left:1px solid #c6cfce; padding-left:20px; font-size:13px; font-weight:500; letter-spacing:.01em; }
.bgb-auth-page { min-height:100svh; display:flex; flex-direction:column; color:var(--bgb-ink); background:var(--bgb-page); }
.bgb-auth-page > nav { width:calc(100% - 96px); max-width:1280px; padding:14px 0; margin:0 auto; }
.bgb-auth-page > nav a { color:var(--bgb-ink); }
.bgb-auth-page > main { display:flex; flex:1; align-items:center; width:calc(100% - 112px); max-width:1210px; margin:16px auto 28px; padding:20px 0; }
.bgb-auth-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr); align-items:center; width:100%; gap:90px; }
.bgb-intro { padding:14px 0; }
.bgb-kicker { display:inline-flex; align-items:center; gap:10px; color:var(--bgb-accent); font-size:14px; font-weight:700; margin:0 0 23px; }
.bgb-kicker:before { content:""; width:24px; height:3px; border-radius:2px; background:currentColor; }
.bgb-intro h1 { color:var(--bgb-ink); max-width:570px; margin:0; font-size:clamp(38px,4.2vw,62px); font-weight:700; letter-spacing:-.045em; line-height:1.08; }
.bgb-intro h1 em { color:var(--bgb-accent); font-style:normal; }
.bgb-intro > p { max-width:455px; color:var(--bgb-muted); font-size:18px; line-height:1.65; margin:24px 0 0; }
.bgb-link-note { display:flex; gap:16px; align-items:flex-start; max-width:460px; margin-top:45px; padding:22px 24px; border-left:3px solid #75cbbb; background:var(--bgb-soft); border-radius:0 12px 12px 0; }
.bgb-link-note svg { flex:0 0 22px; margin-top:2px; color:var(--bgb-accent); }
.bgb-link-note strong { display:block; font-size:15px; margin-bottom:7px; color:var(--bgb-ink); }
.bgb-link-note p { font-size:14px; line-height:1.6; color:var(--bgb-muted); margin:0; }
.bgb-login-card { width:100%; max-width:465px; justify-self:end; background:var(--bgb-paper); padding:38px 36px 30px; border:1px solid #dce2df; border-radius:22px; box-shadow:0 4px 9px #18334b04,0 22px 56px #18334b09; }
.bgb-login-card h2 { margin:0; font-size:27px; line-height:1.2; letter-spacing:-.025em; font-weight:700; color:var(--bgb-ink); }
.bgb-login-card .bgb-card-description { font-size:15px; color:var(--bgb-muted); line-height:1.6; margin:12px 0 28px; }
.bgb-login-form { display:grid; gap:21px; }
.bgb-field { display:grid; gap:9px; }
.bgb-field label { font-size:14px; font-weight:700; color:var(--bgb-ink); }
.bgb-input { box-sizing:border-box; min-width:0; width:100%; height:51px; padding:0 14px; border:1px solid var(--bgb-line); border-radius:9px; color:var(--bgb-ink); background:var(--bgb-paper); font:400 16px Arial,Helvetica,sans-serif; outline:none; }
.bgb-input::placeholder { color:#60727f; opacity:1; }
.bgb-input:focus { border-color:var(--bgb-accent); outline:3px solid #50bdc443; outline-offset:2px; }
.bgb-password { position:relative; display:block; }
.bgb-password input { padding-right:52px; }
.bgb-password button { position:absolute; top:0; right:0; width:48px; height:51px; display:flex; align-items:center; justify-content:center; color:var(--bgb-muted); border-radius:0 9px 9px 0; }
.bgb-password button:focus-visible,.bgb-auth-page a:focus-visible { outline:3px solid #50bdc4; outline-offset:3px; }
.bgb-submit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:51px; border:1px solid transparent; border-radius:9px; background:#16374f; color:#fff; font-size:16px; font-weight:700; cursor:pointer; transition:background-color 150ms; }
.bgb-submit:focus-visible { outline:3px solid #50bdc4; outline-offset:3px; }
.bgb-submit:disabled { opacity:.6; cursor:wait; }
.bgb-security-note { display:flex; align-items:flex-start; justify-content:center; gap:8px; margin:23px 0 0; padding-top:22px; border-top:1px solid #e1e6e4; font-size:12px; color:var(--bgb-muted); line-height:1.6; text-align:center; }
.bgb-security-note svg { width:15px; height:15px; flex:0 0 15px; margin-top:2px; }
.bgb-otp { height:60px; font-size:25px; text-align:center; letter-spacing:.35em; font-variant-numeric:tabular-nums; }
.bgb-back { text-align:center; font-size:14px; color:var(--bgb-accent); text-decoration:underline; text-underline-offset:4px; }
.bgb-form-error { border:1px solid #d59595; background:#fff2f0; color:#842b2b; padding:14px 16px; border-radius:9px; font-size:14px; line-height:1.6; }
.bgb-footer { color:var(--bgb-muted); padding:24px 20px; font-size:12px; line-height:1.7; }
.bgb-auth-page .bgb-footer { margin-top:auto; }
@media (hover:hover) { .bgb-submit:not(:disabled):hover { background:#245775; } .bgb-back:hover { text-decoration-thickness:2px; } }
@media (prefers-reduced-motion:no-preference) { .bgb-submit:not(:disabled):active { scale:.96; transition:scale 150ms ease-out; } }
@media (max-width:960px) { .bgb-auth-grid { gap:40px; } .bgb-intro h1 { font-size:45px; } .bgb-login-card { padding:30px 26px; } .bgb-brand span { display:none; } }
@media (max-width:720px) { .bgb-auth-page > nav { width:calc(100% - 40px); padding:8px 0; } .bgb-brand img { width:167px; height:56px; } .bgb-auth-page > main { width:calc(100% - 40px); display:block; margin:15px auto 0; padding:0; } .bgb-auth-grid { grid-template-columns:1fr; gap:28px; } .bgb-intro { padding:8px 0 0; } .bgb-kicker { font-size:12px; margin-bottom:15px; } .bgb-intro h1 { max-width:390px; font-size:38px; } .bgb-intro > p { font-size:16px; line-height:1.6; margin-top:17px; } .bgb-link-note { display:none; } .bgb-login-card { justify-self:stretch; max-width:none; padding:27px 23px 23px; border-radius:18px; } .bgb-login-card h2 { font-size:25px; } .bgb-card-description { margin-bottom:23px!important; } .bgb-footer { padding:26px 16px 22px; font-size:11px; } }
@media (prefers-color-scheme:dark) { .bgb-auth-page { --bgb-ink:#edf4f5; --bgb-muted:#b8c6d0; --bgb-page:#0d1d2c; --bgb-paper:#172b3d; --bgb-line:#8394a1; --bgb-accent:#8bdbd1; --bgb-soft:#153a42; } .bgb-auth-page .bgb-brand img { background:#f6f6f0; border-radius:10px; padding:5px 10px; width:225px; height:65px; } .bgb-auth-page .bgb-login-card { border-color:#354b5c; box-shadow:none; } .bgb-auth-page .bgb-submit { background:#8bdbd1; color:#102e3d; } .bgb-auth-page .bgb-security-note { border-top-color:#354b5c; } .bgb-auth-page .bgb-input::placeholder { color:#a2b2bd; } }

@media (prefers-color-scheme:dark) and (hover:hover) { .bgb-auth-page .bgb-submit:not(:disabled):hover { background:#b2ece2; } }
@media (prefers-color-scheme:dark) and (max-width:720px) { .bgb-auth-page .bgb-brand img { width:167px; height:56px; padding:5px 8px; } }