@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { --ink:#0b1d38; --muted:#66758d; --blue:#1769e0; --green:#45bd3a; --line:#dfe7f1; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:#f4f7fb; font-family:'DM Sans',system-ui,sans-serif; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:38px 24px 58px; overflow:hidden; position:relative; background:radial-gradient(circle at 20% 0%,#edf7ff 0,transparent 38%),linear-gradient(135deg,#f8fafc,#eef3f9); }
.auth-page::before { content:""; position:absolute; inset:0; opacity:.26; background-image:linear-gradient(#cdd8e6 1px,transparent 1px),linear-gradient(90deg,#cdd8e6 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
.aurora { position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(90px); opacity:.22; }
.aurora-one { background:#65a7ff; left:-160px; top:-160px; }.aurora-two { background:#6ee7b7; right:-200px; bottom:-220px; }
.shell { width:min(1080px,100%); min-height:650px; position:relative; display:grid; grid-template-columns:1.02fr .98fr; background:rgba(255,255,255,.93); border:1px solid rgba(255,255,255,.9); border-radius:28px; box-shadow:0 30px 80px rgba(19,42,77,.16); overflow:hidden; z-index:1; }
.brand-panel { padding:54px 58px; position:relative; color:white; display:flex; flex-direction:column; background:linear-gradient(148deg,#081a35 0%,#0f335a 58%,#0b4a60 100%); }
.brand-panel::after { content:""; position:absolute; width:300px; height:300px; border:1px solid rgba(255,255,255,.08); border-radius:50%; right:-140px; top:80px; box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018); }
.logo { width:160px; height:auto; object-fit:contain; object-position:left; margin-bottom:70px; border-radius:7px; }
.eyebrow { margin:0 0 12px; color:#79b4ff; font-size:12px; letter-spacing:.17em; font-weight:800; }
.brand-panel h1 { margin:0; font:800 clamp(34px,4vw,48px)/1.12 'Manrope',sans-serif; letter-spacing:-.04em; }.brand-panel h1 span { color:#67d75f; }
.intro { max-width:400px; color:#b9c9da; line-height:1.7; font-size:15px; }
.trust-list { list-style:none; padding:0; margin:auto 0 0; display:grid; gap:16px; }.trust-list li { display:flex; gap:14px; align-items:center; }.trust-list li>span { display:grid; place-items:center; width:34px; height:34px; border:1px solid #365878; border-radius:50%; color:#71da68; font-size:11px; font-weight:700; }.trust-list strong,.trust-list small { display:block; }.trust-list strong { font-size:14px; }.trust-list small { color:#90a6bc; margin-top:2px; }
.form-panel { padding:52px clamp(36px,5vw,70px); display:grid; align-items:center; background:rgba(255,255,255,.76); }
.form-wrap { width:100%; max-width:390px; margin:auto; }.form-wrap.compact { max-width:410px; }.shield { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; background:#eaf3ff; margin-bottom:27px; box-shadow:inset 0 0 0 1px #d8e9ff; }.shield svg { width:29px; fill:var(--blue); }
h2 { margin:0 0 12px; font:800 32px/1.2 'Manrope',sans-serif; letter-spacing:-.035em; }.muted { color:var(--muted); line-height:1.6; margin:0 0 27px; }
.alert { padding:12px 14px; margin:0 0 18px; border:1px solid #ffc8c8; border-radius:10px; color:#a31d1d; background:#fff3f3; font-size:14px; }
.google-button,button { width:100%; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:12px; font:700 15px 'DM Sans',sans-serif; cursor:pointer; transition:.18s ease; }.google-button { color:#17263c; border:1px solid #d4deea; background:white; text-decoration:none; box-shadow:0 4px 12px rgba(25,50,80,.06); }.google-button:hover { border-color:#aebed0; transform:translateY(-1px); box-shadow:0 8px 20px rgba(25,50,80,.1); }.google-button svg { width:21px; }
.divider { display:flex; align-items:center; gap:13px; margin:25px 0; color:#9aa8ba; }.divider span { height:1px; background:#e3e9f0; flex:1; }.divider small { font-size:10px; font-weight:700; letter-spacing:.13em; }
.info-card { display:flex; gap:12px; align-items:flex-start; background:#f5f8fc; border:1px solid #e5ebf3; border-radius:12px; padding:14px; }.info-card p { margin:0; font-size:13px; line-height:1.5; color:#728096; }.info-card strong { color:#33445c; }.lock-dot { width:22px; height:22px; flex:none; border-radius:50%; background:#e3f8e0; color:#299b20; display:grid; place-items:center; font-weight:bold; }
.user-chip { padding:11px 13px; display:flex; gap:11px; align-items:center; border-radius:12px; background:#f5f8fc; border:1px solid #e4eaf2; margin-bottom:20px; }.user-chip img { width:36px; height:36px; border-radius:50%; }.user-chip strong,.user-chip small { display:block; }.user-chip strong { font-size:14px; }.user-chip small { margin-top:2px; color:#7c899a; }
.qr-wrap { width:174px; height:174px; margin:0 auto 15px; padding:8px; border-radius:16px; border:1px solid var(--line); box-shadow:0 8px 24px rgba(23,48,76,.08); }.qr-wrap img { width:100%; height:100%; display:block; }details { margin:0 auto 18px; text-align:center; color:#6a788b; font-size:12px; }details code { display:block; margin-top:8px; padding:8px; border-radius:8px; background:#f2f5f9; color:#21324a; word-break:break-all; }
.code-form { display:grid; gap:10px; }.code-form label { color:#3d4e65; font-size:13px; font-weight:700; }.code-form input { width:100%; height:56px; padding:0 17px; border:1px solid #ccd7e4; border-radius:12px; outline:none; text-align:center; letter-spacing:.34em; font:700 21px 'DM Sans',sans-serif; color:#163251; background:white; }.code-form input:focus { border-color:#3985ea; box-shadow:0 0 0 4px #e5f0ff; }.code-form button { margin-top:4px; color:white; border:0; background:linear-gradient(135deg,#1769e0,#1155bb); box-shadow:0 8px 18px rgba(23,105,224,.24); }.code-form button:hover { transform:translateY(-1px); box-shadow:0 11px 22px rgba(23,105,224,.3); }.code-form button span { font-size:20px; }
.text-link { display:block; text-align:center; color:#5f7390; margin-top:21px; font-size:13px; text-decoration:none; }.text-link:hover { color:#1769e0; }.footer-note { z-index:1; position:absolute; bottom:17px; margin:0; color:#8390a2; font-size:12px; }.footer-note span { margin:0 7px; color:#b3bdc9; }
.login-form input:not([type="hidden"]), .admin-form input:not([type="hidden"]) { text-align:left; letter-spacing:normal; font-size:15px; font-weight:500; }.password-input { letter-spacing:.1em !important; }.notice { padding:12px 14px; margin:0 0 18px; border:1px solid #bce9c0; border-radius:10px; color:#176e22; background:#effcf0; font-size:14px; }.admin-wrap { max-width:460px; }.admin-form { padding:19px; border:1px solid #e1e8f1; border-radius:15px; background:#f8fafc; }.admin-form h3,.user-list-title { margin:0 0 13px; font:800 17px 'Manrope',sans-serif; }.admin-form select { height:48px; border:1px solid #ccd7e4; border-radius:12px; padding:0 12px; color:#163251; background:white; font:500 14px 'DM Sans',sans-serif; }.user-list-title { margin-top:27px; }.user-list { max-height:245px; overflow:auto; border-top:1px solid #e5ebf2; }.admin-user { padding:13px 2px; border-bottom:1px solid #e5ebf2; display:flex; gap:12px; align-items:center; justify-content:space-between; }.admin-user strong,.admin-user small { display:block; }.admin-user strong { font-size:13px; }.admin-user small { margin-top:3px; font-size:11px; line-height:1.4; color:#758399; }.admin-user.inactive { opacity:.55; }.danger-button,.text-button { border:0; background:transparent; font:700 12px 'DM Sans',sans-serif; cursor:pointer; }.danger-button { color:#b12d2d; }.status-off { color:#7b8999; font-size:12px; }.logout-form { margin-top:20px; text-align:center; }.text-button { color:#5f7390; }.text-button:hover,.danger-button:hover { text-decoration:underline; }
@media (max-width:800px) { .auth-page { padding:18px 14px 48px; }.shell { grid-template-columns:1fr; }.brand-panel { padding:30px; min-height:auto; }.logo { width:130px; margin-bottom:34px; }.brand-panel h1 { font-size:32px; }.trust-list { display:none; }.form-panel { padding:42px 26px; }.footer-note { font-size:10px; } }
@media (max-width:420px) { .brand-panel { padding:25px; }.intro { margin-bottom:0; }.form-panel { padding:35px 21px; }h2 { font-size:27px; } }