body{background:#f5f7f9}.card{border:0;border-radius:1rem}.stat-card{min-height:130px}.table>:not(caption)>*>*{vertical-align:middle}.login-wrap{min-height:100vh;background:linear-gradient(135deg,#146c43,#198754 55%,#75b798)}.login-card{max-width:430px;border-radius:1.25rem}.brand-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#e9f7ef;color:#198754;font-size:2.2rem}.badge-role{text-transform:uppercase;letter-spacing:.04em}.score-input{max-width:110px}.table-responsive{min-height:.01%}.navbar-brand{white-space:normal}@media(max-width:575.98px){.display-6{font-size:2rem}.card-body{padding:1rem}.btn{min-height:40px}}@media print{.no-print,nav,footer{display:none!important}body{background:#fff}.container{max-width:none!important}.card{box-shadow:none!important;border:1px solid #ddd!important}}
.barcode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.barcode-card{background:#fff;border:1px solid #dfe3e6;border-radius:12px;padding:14px;text-align:center;break-inside:avoid;page-break-inside:avoid}.barcode-svg{max-width:100%;display:block;margin:4px auto}.barcode-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;letter-spacing:.04em}.sticky-col{position:sticky;left:0;z-index:2;min-width:160px}.object-fit-cover{object-fit:cover}@media print{.barcode-grid{grid-template-columns:repeat(2,1fr);gap:8mm}.barcode-card{border:1px solid #000;border-radius:0;padding:6mm}.barcode-code{font-size:9pt}.sticky-col{position:static}}
.qr-img{width:min(280px,80vw);height:auto;image-rendering:pixelated}.qr-single-card{max-width:560px}.attendance-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;overflow-wrap:anywhere}.qr-print-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.qr-print-card{background:#fff;border:1px solid #dfe3e6;border-radius:14px;padding:22px;text-align:center;break-inside:avoid;page-break-inside:avoid}@media print{.qr-print-grid{grid-template-columns:repeat(2,1fr);gap:8mm}.qr-print-card{border:1px solid #000;border-radius:0;padding:8mm}.qr-img{width:62mm}.qr-single-card{max-width:120mm!important;border:1px solid #000!important}.attendance-code{font-size:8pt}}
.score-status{font-size:1.35rem;line-height:1}.score-done{color:#198754}.score-missing{color:#dc3545}.status-score-table th,.status-score-table td{white-space:nowrap}@media print{.score-done{color:#000!important}.score-missing{color:#666!important}}
.rekap-score-table th,.rekap-score-table td{white-space:nowrap}.rekap-score-table .sticky-col{min-width:130px}

/* ===== LT III 2026 Login ===== */
.lt3-login-page{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  background:#fff;
  color:#25272b;
}
.lt3-login-bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 13%,rgba(255,86,95,.16),transparent 27%),
    radial-gradient(circle at 14% 31%,rgba(216,23,37,.12),transparent 26%),
    linear-gradient(180deg,#fff 0%,#fffafa 66%,#fff5f5 100%);
  z-index:0;
}
.lt3-orb{position:absolute;border-radius:50%;filter:blur(2px)}
.lt3-orb.orb-1{width:520px;height:520px;left:-260px;top:-255px;background:linear-gradient(145deg,#ef2b35,#b60416);opacity:.95}
.lt3-orb.orb-2{width:380px;height:380px;right:-215px;top:120px;background:linear-gradient(145deg,rgba(246,59,70,.28),rgba(178,3,22,.06))}
.lt3-line{position:absolute;width:78vw;height:1.5px;background:linear-gradient(90deg,transparent,rgba(217,24,38,.42),transparent);transform-origin:center}
.lt3-line.line-1{top:23%;right:-20%;transform:rotate(-35deg)}
.lt3-line.line-2{top:63%;left:-24%;transform:rotate(-31deg);opacity:.55}
.lt3-cityscape{position:absolute;left:0;right:0;bottom:118px;height:160px;opacity:.075}
.city-building,.city-monument{position:absolute;bottom:0;background:#86111a}
.building-a{left:7%;width:120px;height:74px;border-radius:18px 18px 0 0;box-shadow:30px -23px 0 -16px #86111a,68px -40px 0 -27px #86111a}
.building-b{left:24%;width:68px;height:108px;border-radius:16px 16px 0 0}
.building-c{right:25%;width:90px;height:62px;border-radius:18px 18px 0 0}
.city-monument{right:12%;width:24px;height:126px;border-radius:13px 13px 0 0;box-shadow:0 -18px 0 -7px #86111a}
.city-monument:after{content:"";position:absolute;left:-24px;bottom:0;width:72px;height:19px;background:#86111a;border-radius:50% 50% 0 0}
.lt3-wave{position:absolute;left:-10%;right:-10%;bottom:-170px;height:305px;border-radius:48% 52% 0 0/32% 36% 0 0;transform:rotate(1deg)}
.lt3-wave.wave-back{background:rgba(247,82,92,.45);bottom:-150px;transform:rotate(-4deg)}
.lt3-wave.wave-front{background:linear-gradient(100deg,#d91322 0%,#a90016 55%,#ef3140 100%);box-shadow:0 -18px 45px rgba(201,11,27,.13)}

/* Desktop dibuat lebih ringkas agar proporsional seperti mockup. */
.lt3-login-shell{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px 135px;
}
.lt3-login-panel{
  width:min(100%,410px);
  text-align:center;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.88);
  border-radius:28px;
  padding:28px 30px 24px;
  box-shadow:
    0 24px 60px rgba(80,18,25,.15),
    0 8px 22px rgba(31,35,40,.08),
    inset 0 0 0 1px rgba(214,217,222,.52);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.lt3-logo-circle{
  width:154px;
  height:154px;
  margin:0 auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:2px solid rgba(224,38,51,.48);
  box-shadow:0 12px 28px rgba(174,12,29,.15),0 0 0 7px rgba(216,23,37,.035);
}
.lt3-logo-img{width:83%;height:83%;object-fit:contain;display:block}
.lt3-login-heading{margin-bottom:20px}
.lt3-kicker{margin:0 0 5px;font-size:.64rem;letter-spacing:.16em;font-weight:800;color:#8f9398}
.lt3-login-heading h1{margin:0;color:#c91524;font-weight:850;font-size:2.15rem;letter-spacing:-.035em;line-height:1.05}
.lt3-login-heading p:last-child{margin:8px auto 0;color:#646970;font-size:.91rem;line-height:1.45;max-width:320px}
.lt3-login-alert{border:0;border-radius:13px;box-shadow:0 8px 22px rgba(183,24,42,.10);text-align:left;font-size:.9rem}
.lt3-login-form{display:grid;gap:13px}
.lt3-field{
  position:relative;
  display:flex;
  align-items:center;
  min-height:56px;
  background:#fff;
  border:1.5px solid #cfd3d8;
  border-radius:15px;
  box-shadow:0 6px 16px rgba(31,38,45,.07),inset 0 1px 0 rgba(255,255,255,.9);
  transition:.2s ease;
}
.lt3-field:hover{border-color:#b9bdc3}
.lt3-field:focus-within{
  border-color:#d11727;
  box-shadow:0 8px 20px rgba(203,19,34,.11),0 0 0 4px rgba(216,23,37,.07);
  transform:translateY(-1px)
}
.lt3-field-icon{width:54px;display:grid;place-items:center;color:#646a70;font-size:1.35rem;flex:0 0 54px}
.lt3-input{width:100%;height:54px;border:0;outline:0;background:transparent;font-size:1rem;font-weight:500;color:#25272b;padding:0 16px 0 0}
.lt3-input::placeholder{color:#9ea2a7;font-weight:500}
.lt3-password-input{padding-right:52px}
.lt3-password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:12px;background:transparent;color:#6d7278;font-size:1.18rem;display:grid;place-items:center}
.lt3-password-toggle:hover,.lt3-password-toggle:focus{background:#fff0f1;color:#c91524;outline:0}
.lt3-login-button{
  min-height:56px;
  margin-top:2px;
  border:0;
  border-radius:15px;
  background:linear-gradient(100deg,#c60e1f,#ef2633);
  color:#fff;
  font-weight:800;
  font-size:1.08rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  box-shadow:0 11px 23px rgba(195,13,31,.25),inset 0 1px 0 rgba(255,255,255,.27);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.lt3-login-button i{font-size:1.2rem;transition:transform .18s ease}
.lt3-login-button:hover{filter:saturate(1.08);transform:translateY(-2px);box-shadow:0 14px 28px rgba(195,13,31,.31)}
.lt3-login-button:hover i{transform:translateX(4px)}
.lt3-login-button:active{transform:translateY(0)}
.lt3-divider{display:flex;align-items:center;gap:10px;margin:19px 12px 0;color:#8e9297}
.lt3-divider span{height:1px;background:#cfd2d6;flex:1}
.lt3-divider small{font-weight:750;letter-spacing:.07em;font-size:.72rem}
.lt3-login-footer{margin:7px 0 0;color:#676b70;font-size:.82rem;font-weight:600}

@media(max-width:575.98px){
  .lt3-login-shell{align-items:flex-start;padding:22px 14px 120px}
  .lt3-login-panel{width:min(100%,430px);padding:23px 19px 21px;border-radius:24px}
  .lt3-logo-circle{width:146px;height:146px;margin-bottom:17px}
  .lt3-login-heading{margin-bottom:18px}
  .lt3-login-heading h1{font-size:2rem}
  .lt3-login-heading p:last-child{font-size:.88rem;padding:0 4px}
  .lt3-field,.lt3-login-button{min-height:55px;border-radius:14px}
  .lt3-input{height:53px;font-size:.98rem}
  .lt3-orb.orb-1{width:360px;height:360px;left:-200px;top:-180px}
  .lt3-wave{height:235px;bottom:-145px}
  .lt3-wave.wave-back{bottom:-132px}
  .lt3-cityscape{bottom:83px;height:120px}
}
@media(min-width:992px){
  .lt3-login-panel{width:390px;padding:25px 28px 22px}
  .lt3-logo-circle{width:142px;height:142px;margin-bottom:16px}
  .lt3-login-heading h1{font-size:2rem}
  .lt3-login-heading p:last-child{font-size:.88rem}
  .lt3-field,.lt3-login-button{min-height:53px}
  .lt3-input{height:51px}
}
@media(max-height:760px) and (min-width:576px){
  .lt3-login-shell{padding-top:20px;padding-bottom:110px}
  .lt3-login-panel{padding-top:20px;padding-bottom:18px}
  .lt3-logo-circle{width:118px;height:118px;margin-bottom:12px}
  .lt3-login-heading{margin-bottom:14px}
  .lt3-login-heading h1{font-size:1.85rem}
  .lt3-login-heading p:last-child{margin-top:5px}
  .lt3-login-form{gap:10px}
  .lt3-field,.lt3-login-button{min-height:49px}
  .lt3-input{height:47px}
  .lt3-divider{margin-top:14px}
}