:root{--auth-bg:#f5f7fb;--auth-ink:#111827;--auth-muted:#667085;--auth-line:#e4e7ec;--auth-brand:#0f766e;--auth-accent:#d8ff54;--auth-card:#fff}
.hidden{display:none!important}.auth-required{background:var(--auth-bg)}
.auth-gate{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);background:radial-gradient(circle at 8% 8%,rgba(15,118,110,.12),transparent 28rem),linear-gradient(180deg,#f9fbff,#f3f7f6)}
.auth-brand-panel{padding:clamp(32px,6vw,82px);display:flex;flex-direction:column;justify-content:space-between;min-height:100vh}.auth-brand-top{display:flex;align-items:center;gap:14px}.auth-logo{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:#111827;color:var(--auth-accent);font-weight:900;font-size:1.08rem;box-shadow:0 14px 34px rgba(17,24,39,.16)}.auth-brand-top strong{display:block;font-size:1.05rem}.auth-brand-top small{display:block;color:var(--auth-muted);margin-top:2px}.auth-copy{max-width:720px}.auth-kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(15,118,110,.16);border-radius:999px;background:rgba(255,255,255,.72);padding:7px 11px;color:var(--auth-brand);font-weight:800;font-size:.78rem;letter-spacing:.05em}.auth-copy h1{font-size:clamp(3rem,7vw,6.6rem);line-height:.88;letter-spacing:-.075em;margin:18px 0 20px;max-width:850px}.auth-copy p{font-size:clamp(1rem,1.8vw,1.24rem);max-width:620px;color:var(--auth-muted)}.auth-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px}.auth-benefit{border:1px solid rgba(228,231,236,.9);background:rgba(255,255,255,.75);border-radius:18px;padding:14px;backdrop-filter:blur(14px)}.auth-benefit i{width:20px;height:20px;color:var(--auth-brand)}.auth-benefit strong,.auth-benefit span{display:block}.auth-benefit strong{margin-top:12px}.auth-benefit span{font-size:.83rem;color:var(--auth-muted);margin-top:3px}.auth-foot{color:var(--auth-muted);font-size:.86rem}
.auth-form-panel{display:grid;place-items:center;padding:28px;background:rgba(255,255,255,.62);border-left:1px solid rgba(228,231,236,.8);backdrop-filter:blur(18px)}.auth-card{width:min(100%,500px);background:#fff;border:1px solid var(--auth-line);border-radius:28px;padding:clamp(24px,4vw,36px);box-shadow:0 30px 80px rgba(16,24,40,.1)}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#f2f4f7;border-radius:14px;padding:5px;margin-bottom:28px}.auth-tabs button{border:0;background:transparent;border-radius:10px;padding:11px;font-weight:800;color:var(--auth-muted)}.auth-tabs button.active{background:#fff;color:var(--auth-ink);box-shadow:0 4px 12px rgba(16,24,40,.08)}.auth-card h2{font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:-.04em;margin:0 0 7px}.auth-card>p{color:var(--auth-muted);margin:0 0 22px}.auth-form{display:grid;gap:15px}.field label{display:block;font-size:.8rem;font-weight:800;color:#344054;margin-bottom:7px}.field input{width:100%;min-height:50px;border:1px solid #d0d5dd;border-radius:14px;padding:12px 14px;font:inherit;color:var(--auth-ink);background:#fff;outline:none;transition:.18s}.field input:focus{border-color:#80cbc4;box-shadow:0 0 0 4px rgba(15,118,110,.09)}.password-wrap{position:relative}.password-wrap input{padding-right:50px}.password-toggle{position:absolute;right:7px;top:7px;width:36px;height:36px;border:0;border-radius:10px;background:#f7f8fa;color:#475467;display:grid;place-items:center}.password-toggle i{width:18px;height:18px}.auth-submit{min-height:52px;border:0;border-radius:14px;background:#111827;color:#fff;font-weight:900;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 12px 28px rgba(17,24,39,.18)}.auth-submit:hover{transform:translateY(-1px)}.auth-note{display:flex;gap:9px;align-items:flex-start;padding:12px;border-radius:13px;background:#f8fafc;color:var(--auth-muted);font-size:.82rem}.auth-note i{width:17px;height:17px;flex:0 0 auto;margin-top:1px}.auth-message{display:none;border-radius:12px;padding:11px 12px;font-size:.86rem;font-weight:700}.auth-message.show{display:block}.auth-message.error{background:#fff1f0;color:#a33a2b;border:1px solid #ffd1cc}.auth-message.success{background:#ecfdf3;color:#027a48;border:1px solid #abefc6}.spinner{width:17px;height:17px;border:2px solid rgba(255,255,255,.34);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}.spinner.dark{border-color:#d0d5dd;border-top-color:#111827}@keyframes spin{to{transform:rotate(360deg)}}
.account-footer-card{display:flex;align-items:center;gap:10px;border:1px solid var(--auth-line);border-radius:16px;padding:11px;background:#fff}.account-footer-card .avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#111827;color:var(--auth-accent);font-weight:900}.account-footer-card div{min-width:0;flex:1}.account-footer-card strong,.account-footer-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-footer-card small{color:var(--auth-muted)}.logout-btn{width:38px;height:38px;border:0;border-radius:11px;background:#f7f8fa;color:#475467;display:grid;place-items:center}.sync-line{font-size:.73rem;color:var(--auth-muted);padding:4px 3px 0}
.admin-live-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}.admin-live-card{border:1px solid var(--auth-line);border-radius:20px;background:#fff;padding:18px;box-shadow:0 12px 34px rgba(16,24,40,.05)}.admin-live-card span{display:flex;align-items:center;gap:7px;color:var(--auth-muted);font-weight:750;font-size:.82rem}.admin-live-card span i{width:17px;height:17px}.admin-live-card strong{display:block;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.06em;margin-top:16px}.admin-live-card small{color:var(--auth-muted)}.admin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}.search-field{position:relative;flex:1;max-width:560px}.search-field i{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#98a2b3}.search-field input{width:100%;min-height:46px;border:1px solid var(--auth-line);border-radius:14px;padding:10px 12px 10px 42px;background:#fff;font:inherit;outline:none}.search-field input:focus{border-color:#80cbc4;box-shadow:0 0 0 4px rgba(15,118,110,.08)}.admin-data-status{font-size:.8rem;color:var(--auth-muted)}.student-list{display:grid;gap:8px}.student-row{width:100%;display:grid;grid-template-columns:46px minmax(180px,1.5fr) 90px 90px 90px minmax(160px,.8fr) 22px;align-items:center;gap:12px;border:1px solid var(--auth-line);border-radius:16px;background:#fff;padding:12px;text-align:left;color:var(--auth-ink);transition:.16s}.student-row:hover{border-color:#b9c0cb;box-shadow:0 10px 26px rgba(16,24,40,.06);transform:translateY(-1px)}.student-avatar{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#111827;color:var(--auth-accent);font-weight:900}.student-avatar.large{width:64px;height:64px;border-radius:19px;font-size:1.12rem}.student-main,.student-stat,.student-last{min-width:0}.student-main strong,.student-main small,.student-stat strong,.student-stat small,.student-last strong,.student-last small{display:block}.student-main small,.student-stat small,.student-last small{color:var(--auth-muted);font-size:.76rem}.student-main small,.student-last strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-stat strong{font-size:1.04rem}.student-last strong{font-size:.82rem}.rank-list{display:grid;gap:8px}.rank-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;border:1px solid var(--auth-line);border-radius:14px;background:#fff;padding:11px;text-align:left;color:var(--auth-ink)}.rank-row>span{width:32px;height:32px;border-radius:10px;background:#f2f4f7;display:grid;place-items:center;font-weight:900}.rank-row>span i{width:16px;height:16px}.rank-row strong,.rank-row small{display:block}.rank-row small{color:var(--auth-muted);font-size:.76rem}.rank-row b{color:var(--auth-brand)}
.detail-modal{position:fixed;inset:0;z-index:120;background:rgba(15,23,42,.45);display:grid;place-items:center;padding:18px;backdrop-filter:blur(6px)}.detail-card{width:min(760px,100%);max-height:min(850px,92vh);overflow:auto;background:#fff;border-radius:24px;border:1px solid var(--auth-line);box-shadow:0 30px 90px rgba(15,23,42,.24)}.detail-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--auth-line);background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}.detail-head h3{margin:0}.detail-body{padding:20px}.detail-loading{min-height:260px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--auth-muted)}.detail-profile{display:flex;align-items:center;gap:14px}.detail-profile h3{margin:0 0 4px;font-size:1.35rem}.detail-profile p{margin:0;color:var(--auth-muted)}.detail-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:18px 0}.detail-metrics div{border:1px solid var(--auth-line);border-radius:15px;padding:13px}.detail-metrics strong,.detail-metrics span{display:block}.detail-metrics strong{font-size:1.4rem;letter-spacing:-.04em}.detail-metrics span{color:var(--auth-muted);font-size:.76rem}.detail-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.detail-meta div{border-radius:14px;background:#f8fafc;padding:12px}.detail-meta span,.detail-meta strong{display:block}.detail-meta span{font-size:.74rem;color:var(--auth-muted);margin-bottom:3px}.detail-meta strong{font-size:.87rem}.detail-section{margin-top:22px}.detail-section h3{margin:5px 0 12px}.detail-progress-row{margin:11px 0}.detail-progress-row>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;margin-bottom:6px}.detail-progress-row span{color:var(--auth-muted)}.detail-track{height:8px;border-radius:999px;background:#edf0f3;overflow:hidden}.detail-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#0f766e,#84cc16)}.admin-error{border:1px solid #ffd1cc;background:#fff7f6;color:#a33a2b;border-radius:15px;padding:16px}.admin-error strong,.admin-error span{display:block}.admin-error span{font-size:.84rem;margin-top:3px}.admin-empty.compact{padding:34px}
@media(max-width:980px){.auth-gate{grid-template-columns:1fr}.auth-brand-panel{min-height:auto;padding:34px 24px 20px}.auth-copy h1{font-size:clamp(2.6rem,12vw,5rem)}.auth-form-panel{border-left:0;border-top:1px solid var(--auth-line);padding:22px 16px 38px}.auth-benefits{grid-template-columns:1fr 1fr 1fr}.auth-foot{display:none}.admin-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.student-row{grid-template-columns:42px minmax(150px,1fr) 72px 72px 18px}.student-row .desktop-only{display:none!important}}
@media(max-width:620px){.auth-brand-panel{padding:24px 18px 14px}.auth-copy{margin-top:38px}.auth-copy h1{font-size:2.75rem}.auth-copy p{font-size:.95rem}.auth-benefits{grid-template-columns:1fr}.auth-benefit:nth-child(3){display:none}.auth-form-panel{padding:16px 12px 30px}.auth-card{border-radius:22px;padding:20px}.admin-live-grid{grid-template-columns:1fr 1fr;gap:8px}.admin-live-card{padding:14px;border-radius:16px}.admin-toolbar{align-items:stretch;flex-direction:column}.student-row{grid-template-columns:38px minmax(0,1fr) 58px 18px;padding:10px;gap:9px}.student-row .student-stat:nth-of-type(n+3){display:none}.student-row .student-stat{display:none}.student-row .student-stat:first-of-type{display:block}.student-main small{font-size:.72rem}.detail-modal{padding:0;place-items:end center}.detail-card{width:100%;max-height:92vh;border-radius:24px 24px 0 0}.detail-metrics{grid-template-columns:1fr 1fr}.detail-meta{grid-template-columns:1fr}.detail-body{padding:16px}}