#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:56px 18px;color:#24143f;background:linear-gradient(135deg,#eee9ff 0%,#fff7fb 100%)}
.login-top{display:flex;position:fixed;top:18px;right:18px;z-index:4;width:42px;height:42px;border:1px solid rgba(36,20,63,.12);border-radius:12px;background:rgba(255,255,255,.78);color:#5d5275;box-shadow:0 12px 28px rgba(62,39,102,.14);backdrop-filter:blur(10px)}
.login-shell{width:min(760px,100%);padding:48px;background:rgba(255,255,255,.76);border-radius:24px;box-shadow:0 24px 70px rgba(62,39,102,.18)}
.login-card{width:min(520px,100%);margin:0 auto;background:rgba(255,255,255,.94);border:1px solid #d9cffc;border-radius:18px;box-shadow:0 18px 52px rgba(83,57,140,.12);padding:28px 34px 30px;text-align:center}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px;color:#cdb68d}
.brand .mark{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.brand .mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand b{font-size:14px;letter-spacing:.2px;color:#4b3d63}
.seg{display:flex;background:#fbfaff;border:1px solid #d9cffc;border-radius:14px;padding:5px;margin:0 auto 24px;max-width:430px;box-shadow:0 12px 28px rgba(106,79,190,.12)}
.seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:10px;border-radius:10px;font-weight:850;font-size:16px;color:#4f4266;transition:.15s}
.seg button.active{background:#625df2;color:#fff;box-shadow:0 14px 28px rgba(98,93,242,.24)}
.login-access-icon{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2563eb;background:#f2edff}
.login-card h1{font-size:34px;line-height:1.12;margin:0 0 12px;letter-spacing:-.6px;color:#211336}
.login-card .sub{color:#665879;font-size:16px;line-height:1.5;margin:0 auto 22px;max-width:460px}
.login-form{text-align:left;margin:0 auto;max-width:430px}
#login .field{margin-bottom:16px}
#login .field label{font-size:13.5px;font-weight:850;margin-bottom:7px;color:#24143f}
#login .input-wrap{display:flex;align-items:center;border:1px solid #d9cffc;border-radius:12px;background:#fff;overflow:hidden;transition:.15s}
#login .input-wrap:focus-within{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,.12)}
.login-input-icon{width:50px;align-self:stretch;display:flex;align-items:center;justify-content:center;background:#f7f2ff;color:#24143f;border-right:1px solid #eadfff}
#login .field input{border:0;border-radius:0;background:#fff;padding:13px 14px;color:#24143f;font-size:15px;box-shadow:none}
#login .field input::placeholder{color:#9aa0ad}
#login .field input:focus{border:0;box-shadow:none}
#login .eye{right:10px;color:#5d526e}
.login-form-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:2px 0 18px;color:#5d526e;font-size:13.5px}
.remember-row{display:flex;align-items:center;gap:8px}
.remember-row input{width:17px;height:17px;accent-color:#625df2}
.login-link{color:#2563eb;font-weight:800}
#login .btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:4px;padding:13px 18px;border-radius:10px;font-size:18px;font-weight:850;background:linear-gradient(90deg,#8b5cf6,#ec4899);box-shadow:0 18px 32px rgba(185,80,205,.2);color:#fff}
#login .btn-primary:hover{filter:brightness(.98);background:linear-gradient(90deg,#7c3aed,#db2777)}
#login .btn-ghost{border:1px solid #d9cffc;background:#fff;color:#4f4266;border-radius:10px;font-weight:800}
.secure-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;color:#665879;font-size:13px}
.secure-note .login-glyph{color:#16a34a}
#login .hint{max-width:430px;margin:14px auto 0;text-align:left;background:#fff;border-color:#d9cffc;color:#665879}
.login-glyph,.login-access-icon:before{display:inline-block;width:22px;height:22px;background:currentColor;content:"";-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat}
.login-access-icon:before{width:30px;height:30px}
.login-access-icon.staff:before,.brief{--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/g%3E%3C/svg%3E")}
.login-access-icon.client:before,.user{--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E")}
.mail{--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/g%3E%3C/svg%3E")}
.lock{--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/g%3E%3C/svg%3E")}
.eye-glyph{width:18px;height:18px;--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E")}
.login-arrow{--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/g%3E%3C/svg%3E")}
.shield{--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10zM9 12l2 2 4-5'/%3E%3C/g%3E%3C/svg%3E")}
html[data-theme="dark"] #login{color:#f8fafc;background:radial-gradient(circle at 16% 10%,rgba(99,102,241,.22),transparent 30%),radial-gradient(circle at 86% 88%,rgba(236,72,153,.18),transparent 34%),linear-gradient(135deg,#090b12 0%,#121722 58%,#201020 100%)}
html[data-theme="dark"] .login-top{border-color:rgba(148,163,184,.22);background:rgba(23,26,33,.78);color:#cbd5e1;box-shadow:0 14px 34px rgba(0,0,0,.36)}
html[data-theme="dark"] .login-shell{background:rgba(11,14,22,.72);border:1px solid rgba(148,163,184,.14);box-shadow:0 24px 70px rgba(0,0,0,.42)}
html[data-theme="dark"] .login-card{background:rgba(23,26,33,.96);border-color:#2b3140;box-shadow:0 18px 52px rgba(0,0,0,.42)}
html[data-theme="dark"] .brand{color:#d7bf95}
html[data-theme="dark"] .brand b{color:#f3f6fb}
html[data-theme="dark"] .seg{background:rgba(13,17,26,.72);border-color:#2b3140;box-shadow:0 12px 28px rgba(0,0,0,.22)}
html[data-theme="dark"] .seg button{color:#aeb8c7}
html[data-theme="dark"] .seg button.active{background:#625df2;color:#fff;box-shadow:0 14px 28px rgba(98,93,242,.26)}
html[data-theme="dark"] .login-access-icon{background:#1b2130;color:#6da2ff}
html[data-theme="dark"] .login-card h1{color:#f8fafc}
html[data-theme="dark"] .login-card .sub{color:#a8b1c2}
html[data-theme="dark"] #login .field label{color:#f8fafc}
html[data-theme="dark"] #login .input-wrap{background:#11151f;border-color:#2b3140}
html[data-theme="dark"] #login .field input{background:#11151f;color:#f8fafc}
html[data-theme="dark"] #login .field input::placeholder{color:#7f8998}
html[data-theme="dark"] .login-input-icon{background:#171c28;color:#d2d8e4;border-right-color:#2b3140}
html[data-theme="dark"] #login .eye{color:#aeb8c7}
html[data-theme="dark"] .login-form-actions{color:#a8b1c2}
html[data-theme="dark"] .login-link{color:#74a8ff}
html[data-theme="dark"] #login .btn-ghost{border-color:#2b3140;background:#11151f;color:#d2d8e4}
html[data-theme="dark"] .secure-note{color:#a8b1c2}
html[data-theme="dark"] #login .hint{background:#11151f;border-color:#2b3140;color:#a8b1c2}
@media(max-width:640px){#login{padding:18px 12px}.login-shell{padding:14px;border-radius:20px}.login-card{padding:24px 18px}.seg{max-width:none}.seg button{font-size:14px;min-height:46px}.login-card h1{font-size:28px}.login-card .sub{font-size:14px}.login-form-actions{align-items:flex-start;flex-direction:column}}