[hidden]{display:none!important;}
*{box-sizing:border-box}body{margin:0;background:#f3f6fb;color:#152b40;font:16px/1.5 Arial,sans-serif}header{background:#102a43;color:white;padding:18px max(20px,calc((100% - 1200px)/2));display:flex;align-items:center;gap:20px;flex-wrap:wrap}header a{color:white}nav{display:flex;gap:16px;flex-wrap:wrap}main{max-width:1200px;margin:30px auto;padding:0 18px}h1{font-size:28px}.card{background:white;border-radius:14px;padding:24px;margin:20px 0;box-shadow:0 4px 20px #102a430b}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.grid .card{margin:0}label{display:block;margin:12px 0 6px}input,select,textarea,button{font:inherit;max-width:100%}input,select,textarea{width:100%;padding:10px;border:1px solid #8798a8;border-radius:6px}button,.button{display:inline-block;border:0;border-radius:6px;padding:10px 16px;background:#1556a0;color:#fff;cursor:pointer;margin:12px 6px 4px 0;text-decoration:none}button:disabled{opacity:.55;cursor:wait}a{color:#1556a0}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #e1e7ee}td button{margin:0}.table-wrap{overflow:auto}.muted,small{color:#566b7e}.error{color:#9c102b;background:#fff0f2;padding:12px}.success{color:#135a34;background:#eaf9ef;padding:12px}.notice{background:#fff3cd;padding:12px 18px;text-align:center;color:#493900}.narrow{max-width:600px}.messages{height:360px;overflow:auto;padding:12px;border:1px solid #dde4ee}.message{max-width:85%;padding:12px;background:#eef2f7;margin:10px 0;border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere}.message.mine{margin-left:auto;background:#e4f0ff}.message small{display:block;white-space:normal}.conversation{display:block;text-align:left;width:100%;background:#eef2f7;color:#152b40}.conversation.active{outline:2px solid #1556a0}.chat-grid{display:grid;grid-template-columns:280px 1fr;gap:20px}#app-status:empty{display:none}form{max-width:720px}summary{cursor:pointer;font-weight:bold}dialog{border:0;border-radius:12px;max-width:500px;width:90%}dialog::backdrop{background:#0007}:focus-visible{outline:3px solid #d38d00;outline-offset:3px}@media(max-width:720px){.chat-grid{grid-template-columns:1fr}.card{padding:16px}header{padding:16px}.messages{height:300px}}
.app-brand{display:inline-flex;background:#fff;padding:10px 14px;border-radius:8px;flex-shrink:0}.app-brand img{width:280px;max-width:65vw;height:auto;display:block}

.password-toggle{display:flex;align-items:center;gap:8px;margin:12px 0}.password-toggle input{width:auto}.footer-email{color:#fff!important;text-decoration:underline;font-weight:700}

.password-field{position:relative}.password-field input{padding-right:52px}.password-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:42px;margin:0;padding:8px;border-radius:8px;background:transparent;color:#334e68;display:inline-flex;align-items:center;justify-content:center}.password-eye:hover{background:#eef3f8}.password-eye svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.password-eye .eye-closed{display:none}.password-eye[aria-pressed="true"] .eye-open{display:none}.password-eye[aria-pressed="true"] .eye-closed{display:block}

/* Floating customer support */
.sg-support-fab{position:fixed!important;right:18px!important;bottom:18px!important;left:auto!important;top:auto!important;z-index:9998;width:58px;height:58px;border:0;border-radius:50%;margin:0;padding:0;background:#1556a0;color:#fff;box-shadow:0 12px 30px #102a4340;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.sg-support-fab:hover{transform:translateY(-2px);box-shadow:0 16px 34px #102a4350}.sg-support-fab svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.sg-support-fab .sg-support-close{display:none}.sg-support-fab[aria-expanded="true"] .sg-support-chat{display:none}.sg-support-fab[aria-expanded="true"] .sg-support-close{display:block}.sg-support-pulse{position:absolute;right:1px;top:1px;width:12px;height:12px;border-radius:50%;background:#1db954;border:2px solid #fff}.sg-support-panel{position:fixed!important;right:18px!important;bottom:94px!important;left:auto!important;top:auto!important;z-index:9997;width:min(390px,calc(100vw - 28px));height:min(570px,calc(100vh - 130px));background:#fff;border:1px solid #d9e2ec;border-radius:18px;box-shadow:0 22px 60px #102a4340;overflow:hidden;display:none;flex-direction:column}.sg-support-panel.open{display:flex}.sg-support-head{background:#102a43;color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.sg-support-head strong{display:block;font-size:16px}.sg-support-head small{display:flex;align-items:center;gap:6px;color:#d9e7f5}.sg-support-head small::before{content:"";width:8px;height:8px;border-radius:50%;background:#1db954}.sg-support-minimize{border:0;background:transparent;color:#fff;margin:0;padding:6px;border-radius:8px;font-size:20px;line-height:1}.sg-support-panel iframe{border:0;width:100%;flex:1;background:#fff}.sg-support-label{position:fixed!important;right:92px!important;bottom:31px!important;left:auto!important;top:auto!important;z-index:9996;background:#102a43;color:#fff;border-radius:999px;padding:8px 12px;font-size:13px;box-shadow:0 8px 22px #102a4330;pointer-events:none}.sg-support-fab[aria-expanded="true"]+.sg-support-label{display:none}@media(max-width:600px){.sg-support-fab{right:16px;bottom:16px;width:56px;height:56px}.sg-support-label{display:none}.sg-support-panel{right:10px;bottom:82px;width:calc(100vw - 20px);height:min(560px,calc(100vh - 100px));border-radius:16px}}

.remember-row{display:flex;align-items:center;gap:10px;margin:12px 0 18px;font-weight:600;color:#334e68}.remember-row input{width:18px;height:18px;margin:0;accent-color:#315fa7}.remember-row span{line-height:1.3}

/* 2026 professional authentication layout */
body[data-page="login"],body[data-page="register"],body[data-page="reset"],body[data-page="update-password"]{background:linear-gradient(180deg,#eef4fb 0,#f7f9fc 100%);min-height:100vh}
body[data-page="login"] header,body[data-page="register"] header,body[data-page="reset"] header,body[data-page="update-password"] header{padding:14px clamp(16px,4vw,36px);justify-content:space-between;gap:14px;box-shadow:0 4px 18px rgba(15,42,67,.12)}
body[data-page="login"] header nav,body[data-page="register"] header nav,body[data-page="reset"] header nav,body[data-page="update-password"] header nav{margin-left:auto}
body[data-page="login"] main,body[data-page="register"] main,body[data-page="reset"] main,body[data-page="update-password"] main{max-width:680px;margin:34px auto;padding:0 clamp(16px,4vw,24px)}
body[data-page="login"] .card,body[data-page="register"] .card,body[data-page="reset"] .card,body[data-page="update-password"] .card{width:100%;max-width:620px;margin:0 auto;padding:clamp(22px,5vw,34px);border:1px solid #e0e7ef;border-radius:20px;box-shadow:0 18px 50px rgba(16,42,67,.10)}
body[data-page="login"] .card.narrow{max-width:560px}
body[data-page="login"] h1,body[data-page="register"] h1,body[data-page="reset"] h1,body[data-page="update-password"] h1{font-size:clamp(28px,7vw,38px);margin:0 0 8px;color:#102a43}
body[data-page="login"] form,body[data-page="register"] form,body[data-page="reset"] form,body[data-page="update-password"] form{width:100%;max-width:none;margin-top:22px}
body[data-page="login"] label,body[data-page="register"] label,body[data-page="reset"] label,body[data-page="update-password"] label{font-weight:700;color:#334e68;margin-top:16px}
body[data-page="login"] input,body[data-page="register"] input,body[data-page="reset"] input,body[data-page="update-password"] input{min-height:50px;border:1px solid #9fb0c1;border-radius:10px;padding:12px 14px;background:#fff;font-size:16px}
body[data-page="login"] form>button,body[data-page="register"] form>button,body[data-page="reset"] form>button,body[data-page="update-password"] form>button{width:100%;min-height:50px;margin:22px 0 6px;border-radius:10px;font-weight:700;font-size:16px}
body[data-page="login"] .card>p:last-child,body[data-page="register"] .card>a{display:block;margin-top:16px;text-align:center}
body[data-page="login"] #app-status,body[data-page="register"] #app-status,body[data-page="reset"] #app-status,body[data-page="update-password"] #app-status{max-width:620px;margin:0 auto 14px;border-radius:10px}
@media(max-width:720px){
 body[data-page="login"] header,body[data-page="register"] header,body[data-page="reset"] header,body[data-page="update-password"] header{display:block;text-align:center;padding:14px 16px}
 body[data-page="login"] .app-brand,body[data-page="register"] .app-brand,body[data-page="reset"] .app-brand,body[data-page="update-password"] .app-brand{display:inline-flex;margin:0 auto 10px}
 body[data-page="login"] .app-brand img,body[data-page="register"] .app-brand img,body[data-page="reset"] .app-brand img,body[data-page="update-password"] .app-brand img{max-width:230px;width:min(68vw,230px)}
 body[data-page="login"] header nav,body[data-page="register"] header nav,body[data-page="reset"] header nav,body[data-page="update-password"] header nav{justify-content:center;gap:12px;font-size:14px}
 body[data-page="login"] main,body[data-page="register"] main,body[data-page="reset"] main,body[data-page="update-password"] main{margin:20px auto;padding:0 14px}
 body[data-page="login"] .card,body[data-page="register"] .card,body[data-page="reset"] .card,body[data-page="update-password"] .card{padding:22px 18px;border-radius:16px}
 .password-eye{right:5px;width:42px;height:42px}
}

/* Active account indicators */
.account-status{display:inline-flex;align-items:center;gap:9px;vertical-align:middle}.active-status-dot{display:inline-block;width:12px;height:12px;flex:0 0 12px;border-radius:50%;background:#40bf59;box-shadow:0 0 0 2px #fff}
