:root { --rb-blue:#155eef; --rb-navy:#101828; --rb-muted:#667085; --rb-line:#dfe5ef; }
* { box-sizing:border-box; }
body.login-page { margin:0; min-width:320px; min-height:100vh; overflow-x:hidden; color:var(--rb-navy); background:#eef2f8; font-family:"Segoe UI",Inter,Arial,sans-serif; }
.rb-login-shell { min-height:100vh; display:grid; place-items:center; padding:clamp(18px,3.2vw,48px); background:radial-gradient(circle at 8% 5%,#fff 0,transparent 30%),linear-gradient(135deg,#f7f9fc,#e9eef6); }
.rb-login-card { position:relative; display:grid; grid-template-columns:minmax(370px,.92fr) minmax(400px,1.08fr); gap:0; width:min(920px,100%); min-height:min(610px,calc(100vh - 50px)); padding:8px; overflow:hidden; background:linear-gradient(145deg,#fff 0%,#f5f8ff 48%,#fff 100%); border:1px solid rgba(255,255,255,.98); border-radius:24px; box-shadow:0 28px 65px rgba(16,40,92,.2),0 9px 22px rgba(16,24,40,.11),inset 0 1px 0 #fff,inset 0 -2px 5px rgba(81,104,145,.12); outline:1px solid rgba(186,201,225,.65); outline-offset:-1px; }
.rb-login-card:before { position:absolute; inset:2px 7% auto; z-index:3; height:1px; content:""; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent); }
.rb-login-form-panel { position:relative; display:flex; flex-direction:column; min-width:0; height:100%; padding:25px clamp(28px,3.5vw,48px) 18px; overflow:hidden; color:#fff; background:linear-gradient(145deg,#071d50 0%,#092866 55%,#0b347d 100%); border-radius:16px 0 0 16px; box-shadow:inset 1px 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.2); }
.rb-login-form-panel:before { position:absolute; top:-150px; left:-130px; width:360px; height:360px; content:""; pointer-events:none; background:radial-gradient(circle,rgba(35,132,255,.2) 0,rgba(35,132,255,0) 68%); border-radius:50%; }
.rb-login-form-panel:after { position:absolute; right:-125px; bottom:-170px; width:390px; height:390px; content:""; pointer-events:none; background:radial-gradient(circle,rgba(20,184,255,.12) 0,rgba(20,184,255,0) 68%); border-radius:50%; }
.rb-login-form-panel>* { position:relative; z-index:1; }
.rb-brand img { display:block; width:128px; height:36px; object-fit:contain; object-position:left center; }
.rb-login-form-wrap { width:100%; max-width:360px; margin:auto; padding:15px 0; }
.rb-welcome { margin-bottom:18px; }
.rb-eyebrow { margin:0 0 8px!important; color:#29c4ff!important; font-size:12px!important; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.rb-welcome h1 { margin:0 0 7px; font-size:clamp(27px,2.6vw,34px); line-height:1.15; font-weight:750; letter-spacing:-.035em; }
.rb-welcome>p:last-child { margin:0; color:#cbdcff; font-size:14px; line-height:1.55; }
.rb-login-form { display:grid; gap:12px; }
.rb-field { display:grid; gap:7px; }
.rb-field>label { color:#f5f8ff; font-size:13px; font-weight:650; }
.rb-input-wrap { position:relative; }
.rb-input-wrap>svg { position:absolute; top:50%; left:14px; width:18px; height:18px; transform:translateY(-50%); fill:none; stroke:#70a8ff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.rb-field input,.rb-field select,.rb-captcha-row input { width:100%; height:41px; padding:0 40px; color:#fff; font:500 13px inherit; outline:0; color-scheme:dark; background:rgba(5,24,68,.42); border:1px solid rgba(106,160,255,.52); border-radius:9px; box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 4px 12px rgba(0,10,40,.1); transition:border-color .18s,box-shadow .18s,background .18s; }
.rb-field select { appearance:auto; }
.rb-field input[readonly] { color:#dce8ff; background:rgba(5,24,68,.28); }
.rb-field input::placeholder,.rb-captcha-row input::placeholder { color:#91a9d4; font-weight:400; }
.rb-field input:focus,.rb-field select:focus,.rb-captcha-row input:focus { background:rgba(9,38,94,.78); border-color:#35b9ff; box-shadow:0 0 0 3px rgba(41,196,255,.16); }
.rb-field select option { color:#101828; background:#fff; }
.rb-password-toggle { position:absolute; top:50%; right:7px; display:grid; place-items:center; width:34px; height:34px; padding:0; transform:translateY(-50%); color:#aac8ff; background:transparent; border:0; border-radius:7px; cursor:pointer; }
.rb-password-toggle:hover { color:#fff; background:rgba(255,255,255,.08); }
.rb-password-toggle svg,.rb-refresh svg,.rb-submit svg,.rb-clock>svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rb-captcha-row { display:grid; grid-template-columns:105px 40px 1fr; gap:8px; }
.rb-captcha-row>img { width:105px; height:41px; object-fit:fill; border:1px solid var(--rb-line); border-radius:9px; }
.rb-captcha-row input { min-width:0; padding:0 12px; }
.rb-refresh { display:grid; place-items:center; width:40px; height:41px; padding:0; color:#c7dcff; background:rgba(5,24,68,.42); border:1px solid rgba(106,160,255,.52); border-radius:9px; cursor:pointer; }
.rb-refresh:hover { color:#fff; background:rgba(41,196,255,.12); border-color:#35b9ff; }
.rb-field-error,.rb-validation { color:#d92d20; font-size:11px; }
.rb-validation:empty,.rb-field-error:empty { display:none; }
.rb-validation ul { margin:0; padding-left:18px; }
.rb-submit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:43px; margin-top:3px; color:#fff; font-size:13px; font-weight:700; background:linear-gradient(100deg,#155eef,#3b6ff5); border:0; border-radius:9px; box-shadow:0 8px 18px rgba(21,94,239,.22); cursor:pointer; transition:transform .18s,box-shadow .18s; }
.rb-submit:hover { transform:translateY(-1px); box-shadow:0 11px 24px rgba(21,94,239,.3); }
.rb-login-footer { display:flex; justify-content:space-between; gap:15px; color:#8faadc; font-size:11px; }
.rb-login-visual { position:relative; display:flex; flex-direction:column; justify-content:center; min-width:0; height:100%; margin:0; padding:clamp(30px,3.7vw,46px); overflow:hidden; color:#fff; background:linear-gradient(145deg,#153fd0 0%,#0969ef 47%,#6b27ed 125%); border-left:1px solid rgba(100,191,255,.38); border-radius:0 16px 16px 0; box-shadow:inset -1px 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.16); isolation:isolate; }
.rb-login-visual:before,.rb-login-visual:after { position:absolute; z-index:-1; content:""; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.rb-login-visual:before { width:480px; height:480px; top:-245px; right:-140px; }
.rb-login-visual:after { width:550px; height:550px; bottom:-360px; left:-240px; }
.rb-visual-glow { position:absolute; z-index:-2; border-radius:50%; filter:blur(2px); }
.rb-glow-one { width:310px; height:310px; top:-70px; right:-65px; background:rgba(121,92,255,.38); }
.rb-glow-two { width:300px; height:300px; bottom:-120px; left:-90px; background:rgba(22,214,255,.18); }
.rb-visual-copy { max-width:510px; }
.rb-visual-badge { display:inline-flex; padding:7px 11px; margin-bottom:18px; color:#dbe7ff; font-size:10px; font-weight:700; letter-spacing:.13em; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.13); border-radius:999px; }
.rb-visual-copy h2 { max-width:500px; margin:0 0 12px; font-size:clamp(27px,3vw,37px); line-height:1.09; font-weight:700; letter-spacing:-.035em; }
.rb-visual-copy p { max-width:480px; margin:0; color:#d6e3ff; font-size:14px; line-height:1.65; }
.rb-dashboard-preview { position:relative; width:min(390px,96%); height:165px; margin:23px auto 20px; overflow:hidden; contain:paint; background:linear-gradient(145deg,#eaf2ff,#dceaff); border:4px solid rgba(255,255,255,.82); border-radius:11px; box-shadow:0 22px 42px rgba(3,19,64,.35),inset 0 0 0 1px rgba(83,132,220,.18); isolation:isolate; transform:perspective(1100px) rotateX(2deg) rotateY(-4deg); }
.rb-preview-top { display:flex; align-items:center; gap:5px; height:25px; padding:0 9px; background:linear-gradient(90deg,#e7effc,#d8e6fa); border-bottom:1px solid #cbdaf0; }
.rb-preview-top i { width:5px; height:5px; background:#bfc7d5; border-radius:50%; }.rb-preview-top span { width:37%; height:6px; margin-left:12px; background:#e2e8f0; border-radius:9px; }
.rb-preview-body { position:relative; display:block; width:100%; height:calc(100% - 25px); overflow:hidden; background:#102d68; clip-path:inset(0); }.rb-preview-photo { position:absolute!important; inset:0!important; display:block!important; width:100%!important; max-width:100%!important; height:100%!important; max-height:100%!important; margin:0!important; padding:0!important; object-fit:cover!important; object-position:center 48%!important; border:0!important; }.rb-preview-sidebar { display:none; }.rb-preview-sidebar b { height:5px; background:rgba(255,255,255,.33); border-radius:6px; }.rb-preview-sidebar b:first-child { height:16px; margin-bottom:5px; background:#fff; opacity:.8; }
.rb-preview-content { display:none; }.rb-preview-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.rb-preview-stats i { background:linear-gradient(135deg,#f8fbff,#e7f0ff); border:1px solid #cbdcf5; border-radius:5px; box-shadow:0 3px 7px rgba(31,76,145,.08); }.rb-preview-chart { display:flex; align-items:end; gap:11px; padding:8px 15px; background:rgba(247,251,255,.86); border:1px solid #c9daf2; border-radius:6px; }.rb-preview-chart span { flex:1; height:40%; background:#72a3ff; border-radius:3px 3px 0 0; }.rb-preview-chart span:nth-child(2) { height:72%; }.rb-preview-chart span:nth-child(3) { height:53%; }.rb-preview-chart span:nth-child(4) { height:88%; background:#155eef; }.rb-preview-chart span:nth-child(5) { height:65%; }.rb-preview-chart span:nth-child(6) { height:78%; }.rb-preview-lines { display:grid; gap:5px; padding:7px 10px; background:rgba(247,251,255,.86); border:1px solid #c9daf2; border-radius:6px; }.rb-preview-lines i { background:linear-gradient(90deg,#b9ccea 32%,transparent 32% 38%,#d4e1f3 38%); border-radius:4px; }
.rb-clock { display:flex; align-items:center; align-self:flex-start; gap:13px; padding:12px 15px; background:rgba(8,32,94,.25); border:1px solid rgba(255,255,255,.17); border-radius:12px; backdrop-filter:blur(8px); }.rb-clock>svg { width:24px; height:24px; color:#d9e5ff; }.rb-clock-day { margin-bottom:3px; font-size:13px; font-weight:700; }.rb-clock div div:last-child { display:flex; gap:14px; color:#d9e5ff; font-size:11px; }.rb-clock strong { color:#fff; font-weight:650; }
@media (max-width:900px) {
    .rb-login-shell { align-items:start; min-height:100dvh; }
    .rb-login-card { grid-template-columns:1fr; width:min(570px,100%); min-height:0; padding:7px; }
    .rb-login-visual { order:-1; min-height:245px; padding:32px; border-left:0; border-radius:15px 15px 0 0; }
    .rb-login-form-panel { border-radius:0 0 15px 15px; }
    .rb-visual-copy h2 { font-size:28px; }
    .rb-dashboard-preview { display:none; }
    .rb-clock { margin-top:22px; }
    .rb-login-form-panel { min-height:0; }
}
@media (max-width:520px) {
    body.login-page { background:#edf4ff; }
    .rb-login-shell { display:block; min-height:100dvh; padding:0; background:#edf4ff; }
    .rb-login-card { width:100%; min-height:100dvh; padding:0; border:0; border-radius:0; box-shadow:none; outline:0; }
    .rb-login-visual { min-height:188px; margin:0; padding:22px max(20px,env(safe-area-inset-right)) 20px max(20px,env(safe-area-inset-left)); border-left:0; border-radius:0 0 22px 22px; }
    .rb-login-form-panel { border-radius:0; }
    .rb-visual-badge { padding:5px 9px; margin-bottom:10px; font-size:9px; }
    .rb-visual-copy h2 { margin-bottom:0; font-size:22px; line-height:1.15; }
    .rb-visual-copy p { display:none; }
    .rb-clock { gap:10px; margin-top:15px; padding:9px 11px; }
    .rb-clock>svg { width:20px; height:20px; }
    .rb-clock-day { font-size:12px; }
    .rb-clock div div:last-child { gap:10px; font-size:10px; }
    .rb-login-form-panel { min-height:0; padding:20px max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
    .rb-brand img { width:116px; height:32px; }
    .rb-login-form-wrap { max-width:none; padding:24px 0 28px; }
    .rb-welcome { margin-bottom:17px; }
    .rb-welcome h1 { font-size:27px; }
    .rb-welcome>p:last-child { font-size:13px; }
    .rb-login-form { gap:13px; }
    .rb-field input,.rb-field select,.rb-captcha-row input { height:46px; font-size:16px; }
    .rb-password-toggle { width:38px; height:38px; }
    .rb-captcha-row { grid-template-columns:88px 42px minmax(0,1fr); gap:7px; }
    .rb-captcha-row>img { width:88px; height:46px; }
    .rb-refresh { width:42px; height:46px; }
    .rb-submit { min-height:48px; font-size:15px; }
    .rb-login-footer { flex-direction:column; gap:4px; padding-bottom:env(safe-area-inset-bottom); }
}
@media (max-width:360px) {
    .rb-login-visual { min-height:174px; padding-top:18px; }
    .rb-visual-copy h2 { font-size:20px; }
    .rb-login-form-panel { padding-right:16px; padding-left:16px; }
    .rb-captcha-row { grid-template-columns:80px 40px minmax(0,1fr); gap:6px; }
    .rb-captcha-row>img { width:80px; }
    .rb-refresh { width:40px; }
}
@media (max-width:900px) and (max-height:560px) and (orientation:landscape) {
    .rb-login-card { grid-template-columns:minmax(340px,.95fr) minmax(380px,1.05fr); width:min(820px,100%); min-height:100dvh; padding:6px; }
    .rb-login-visual { order:initial; min-height:100%; margin:0; padding:24px; border-left:1px solid rgba(100,191,255,.38); border-radius:0 14px 14px 0; }
    .rb-login-form-panel { border-radius:14px 0 0 14px; }
    .rb-visual-copy h2 { font-size:24px; }
    .rb-visual-copy p,.rb-dashboard-preview { display:none; }
    .rb-clock { margin-top:20px; }
    .rb-login-form-panel { padding:18px 26px 14px; }
    .rb-brand img { width:105px; height:28px; }
    .rb-login-form-wrap { padding:8px 0; }
    .rb-welcome { margin-bottom:10px; }
    .rb-welcome h1 { font-size:23px; }
    .rb-welcome>p:last-child { display:none; }
    .rb-login-form { gap:7px; }
    .rb-field { gap:3px; }
    .rb-field input,.rb-field select,.rb-captcha-row input { height:37px; font-size:14px; }
    .rb-captcha-row>img,.rb-refresh { height:37px; }
    .rb-submit { height:39px; min-height:39px; }
    .rb-login-footer { display:none; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }