:root{
    --navy:#151B6B; --navy-dark:#0B1140; --blue:#3B4FD6; --blue-light:#EEF0FD;
    --gray:#6B7280; --border:#E2E4F3; --bg:#F5F6FB; --white:#FFFFFF;
    --danger:#DC2626; --success:#16A34A;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Montserrat',Arial,sans-serif;
    color:var(--navy-dark);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background-image:
      linear-gradient(rgba(245,246,251,.93), rgba(245,246,251,.93)),
      url('background.jpg');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    background-repeat:no-repeat;
  }
  header{background:var(--navy);color:#fff;padding:22px 20px;text-align:center;}
  .header-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;max-width:480px;margin:0 auto;}
  .header-logo{width:56px;height:56px;flex-shrink:0;object-fit:contain;}
  .header-text{text-align:center;}
  header h1{margin:0;font-size:.92rem;font-weight:700;letter-spacing:.2px;line-height:1.3;}
  header .header-address{margin:1px 0 0;font-size:.68rem;font-weight:500;opacity:.7;}
  header .header-divider{height:1px;background:rgba(255,255,255,.18);margin:10px 0 8px;}
  header .header-system{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.5px;}
  header .header-sub{margin:2px 0 0;font-size:.72rem;font-weight:500;opacity:.8;}
  @media (max-width: 380px){
    .header-logo{width:44px;height:44px;}
    header h1{font-size:.8rem;}
    header .header-address{font-size:.62rem;}
    header .header-system{font-size:.7rem;}
    header .header-sub{font-size:.66rem;}
  }
  main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px;}
  .card{background:var(--white);border-radius:16px;box-shadow:0 10px 30px rgba(21,27,107,.10);padding:32px 28px;width:100%;max-width:400px;}
  .card h2{margin:0 0 4px;font-size:1.15rem;font-weight:700;color:var(--navy);text-align:center;}
  .card .sub{margin:0 0 22px;font-size:.82rem;color:var(--gray);text-align:center;line-height:1.4;}
  label{display:block;font-size:.75rem;font-weight:600;color:var(--navy);margin-bottom:6px;margin-top:16px;}
  input[type=text],input[type=password]{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:.95rem;outline:none;transition:border-color .15s;}
  input[type=text]:focus,input[type=password]:focus{border-color:var(--blue);}
  .btn{width:100%;padding:13px;border:none;border-radius:10px;background:var(--blue);color:#fff;font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer;margin-top:22px;letter-spacing:.2px;transition:filter .15s, transform .1s;}
  .btn:hover{filter:brightness(1.08);}
  .btn:active{transform:scale(.98);}
  .btn:disabled{opacity:.55;cursor:not-allowed;}
  .btn.secondary{background:var(--blue-light);color:var(--blue);margin-top:10px;}
  .error{background:#FEF2F2;color:var(--danger);border:1px solid #FCA5A5;border-radius:8px;padding:10px 12px;font-size:.8rem;font-weight:600;margin-top:16px;display:none;text-align:center;}
  .hint{margin-top:18px;font-size:.7rem;color:var(--gray);text-align:center;line-height:1.5;}
  #resultView{display:none;}
  .student-name{text-align:center;font-size:1.15rem;font-weight:700;color:var(--navy);margin:0 0 2px;}
  .student-meta{text-align:center;font-size:.78rem;color:var(--gray);font-weight:500;margin:0 0 20px;}
  .qr-wrap{background:var(--blue-light);border-radius:14px;padding:20px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
  #qrcode{background:#fff;padding:12px;border-radius:8px;}
  #qrcode img,#qrcode canvas{display:block;}
  .id-display{text-align:center;font-size:.85rem;font-weight:700;color:var(--navy);letter-spacing:1px;margin:14px 0 0;}
  .status-badge{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:20px;font-size:.68rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;}
  .status-enrolled{background:#ECFDF5;color:var(--success);}
  .status-other{background:#FFFBEB;color:#B45309;}
  footer{text-align:center;padding:16px;font-size:.68rem;color:var(--gray);}
  .spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px;}
  @keyframes spin{to{transform:rotate(360deg);}}