:root {
  --bg1:#14061f;
  --bg2:#2d1243;
  --card:rgba(255,255,255,0.12);
  --line:rgba(255,255,255,0.15);
  --text:#f9f5ff;
  --muted:#dccff1;
  --purple:#8b5cf6;
  --orange:#ff8a00;
  --orange2:#ffb347;
  --danger:#ff5a7a;
  --success:#34d399;
  --warning:#fbbf24;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at top left,#4a1d70,transparent 30%),linear-gradient(135deg,var(--bg1),var(--bg2));min-height:100%}
a{text-decoration:none;color:inherit}
body{overflow-x:hidden}
.glass{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.display-body{min-height:100vh;padding:18px;background:
linear-gradient(rgba(17,6,30,.35),rgba(17,6,30,.55)),
radial-gradient(circle at right top,#ff8a0022,transparent 22%),
linear-gradient(135deg,#31104d,#1a0f2b)}
.display-shell{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-radius:24px;background:linear-gradient(90deg,#6d28d9,#ff8a00);font-weight:800;letter-spacing:.6px;box-shadow:0 16px 48px rgba(0,0,0,.25)}
.welcome{font-size:clamp(24px,4vw,58px);text-transform:uppercase}
.school{font-size:clamp(14px,1.6vw,24px);opacity:.95}
.headline-card{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:18px 22px;border-radius:28px}
.label-mini{font-size:12px;color:#ffd6a6;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:6px}
.big-text{font-weight:900;font-size:clamp(24px,3vw,48px)}
.hero-panel{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;padding:24px;border-radius:32px;min-height:58vh;background:
linear-gradient(120deg,rgba(139,92,246,.18),rgba(255,138,0,.15)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900"><rect width="100%" height="100%" fill="%23ffffff00"/><circle cx="1200" cy="160" r="100" fill="%23ffffff12"/><circle cx="240" cy="760" r="140" fill="%23ffffff10"/></svg>') center/cover no-repeat}
.hero-left,.hero-right{display:flex;flex-direction:column}
.hero-left{justify-content:center;align-items:center;text-align:center;padding:24px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))}
.rfid-icon-wrap{width:160px;height:160px;border-radius:40px;display:grid;place-items:center;background:linear-gradient(135deg,#7c3aed,#ff8a00);box-shadow:0 20px 50px rgba(124,58,237,.35);margin-bottom:18px}
.rfid-icon{font-size:76px}
.hero-title{font-size:clamp(40px,5vw,86px);font-weight:900;line-height:1.05;background:linear-gradient(90deg,#ffd479,#ff8a00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 6px 16px rgba(0,0,0,.25)}
.hero-sub{max-width:760px;font-size:18px;color:var(--muted);margin-top:12px}
.action-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.btn-primary,.btn-outline,.btn-danger{border:none;border-radius:16px;padding:14px 18px;font-weight:800;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;transition:.2s ease;min-height:50px}
.btn-primary{background:linear-gradient(90deg,#7c3aed,#ff8a00);color:white}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff}
.btn-danger{background:linear-gradient(90deg,#ff4d6d,#ff7b7b);color:white}
.btn-primary:hover,.btn-outline:hover,.btn-danger:hover{transform:translateY(-1px);filter:brightness(1.05)}
.wide{width:100%}
.scanner-input{opacity:0;position:absolute;pointer-events:none}
.status-card,.tips-card{padding:18px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.12)}
.status-card{min-height:280px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin-bottom:16px}
.status-head{font-size:14px;letter-spacing:1.4px;text-transform:uppercase;color:#ffd9a8;margin-bottom:10px}
.scan-status{font-size:38px;font-weight:900;margin-bottom:10px}
.scan-status.idle{color:#fff}
.scan-status.success{color:var(--success)}
.scan-status.warning{color:var(--warning)}
.scan-status.danger{color:#ff92aa}
.person-name{font-size:28px;font-weight:800}
.small-meta{margin-top:8px;color:var(--muted);font-size:15px}
.tips-card ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}
.footer-band{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-radius:24px;font-size:clamp(18px,2vw,34px);font-weight:800}
.login-body,.admin-body{min-height:100vh;padding:20px;background:linear-gradient(135deg,#1d0c2d,#341255)}
.login-card{max-width:460px;margin:6vh auto 0;padding:28px;border-radius:28px}
.brand-badge{display:inline-flex;padding:9px 14px;border-radius:999px;background:linear-gradient(90deg,#7c3aed,#ff8a00);font-weight:800;margin-bottom:10px}
.login-card h1{margin:8px 0 10px;font-size:34px}
.muted{color:var(--muted)}
input,select{width:100%;padding:14px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;outline:none}
label{display:block;margin-bottom:8px;font-size:14px;color:#ffe5bc}
form{display:grid;gap:12px}
.alert{padding:14px 16px;border-radius:16px;margin:12px 0;font-weight:700}
.alert.success{background:#063f35}
.alert.danger{background:#551a2a}
.back-link{display:inline-block;margin-top:14px;color:#ffce8d}
.admin-layout{display:grid;grid-template-columns:280px 1fr;gap:18px;max-width:1600px;margin:0 auto}
.sidebar{border-radius:28px;padding:20px;position:sticky;top:18px;height:calc(100vh - 36px)}
.admin-name{font-size:22px;font-weight:800;margin:8px 0 16px}
.sidebar nav{display:grid;gap:10px}
.sidebar nav a{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05)}
.content{display:grid;gap:18px}
.page-title{display:flex;justify-content:space-between;align-items:center;gap:14px}
.page-title h1{margin:0;font-size:42px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mini-card{padding:18px;border-radius:22px;display:flex;flex-direction:column;gap:8px}
.mini-card span{color:var(--muted)}
.mini-card b{font-size:38px}
.panel{padding:20px;border-radius:28px}
.panel h2{margin-top:0;font-size:28px}
.grid-form.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-span{grid-column:1/-1}
.inline-form{display:flex;gap:12px;flex-wrap:wrap}
.inline-form input{max-width:360px}
.table-wrap{overflow:auto;border-radius:18px;border:1px solid rgba(255,255,255,.12)}
table{width:100%;border-collapse:collapse;min-width:900px}
th,td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
th{background:rgba(255,255,255,.08);color:#ffd7a0}
.title-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
@media (max-width: 980px){
  .headline-card,.stats-grid,.grid-form.two,.hero-panel,.admin-layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .page-title,.footer-band,.topbar{flex-direction:column;align-items:flex-start}
  .hero-title{font-size:44px}
}