:root{
  --bg:#F4F6FC; --surface:#FFFFFF; --surface-2:#EDF1FB;
  --text:#0E1A4A; --text-muted:#5B6690; --border:#DFE5F5;
  --brand:#1D3FBF;        /* biru logo */
  --brand-ink:#132A8C;
  --accent:#F0532A;       /* oranye-merah logo */
  --gold:#F6C21C;         /* kuning bintang logo */
  --sidebar:#0F1F6B; --sidebar-text:#C8D3F5; --sidebar-active:rgba(255,255,255,.09);
  --ring:rgba(29,63,191,.22);
  --shadow: 0 1px 2px rgba(14,26,74,.05), 0 10px 30px -14px rgba(14,26,74,.20);
}
html.dark{
  --bg:#0A1030; --surface:#111A44; --surface-2:#0E1638; --text:#EEF2FF; --text-muted:#98A4D0;
  --border:#1F2B66; --sidebar:#070C26; --sidebar-text:#A9B6E6; --sidebar-active:#16225A;
  --brand:#5B82FF; --brand-ink:#9DB4FF; --accent:#FF7A4D; --gold:#F6C21C; --ring:rgba(91,130,255,.30);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.55);
} 
body.theme-siswa{
  --bg:#F7EEDC;
  --surface: color-mix(in srgb, var(--brand) 32%, #FFFFFF);
  --surface-2: color-mix(in srgb, var(--brand) 42%, #FBF5E9);
  --border:#E9DFC8;
  --brand-ink: color-mix(in srgb, var(--brand) 70%, black);
  --sidebar: color-mix(in srgb, var(--brand) 45%, #3B2E1F);
  --sidebar-active: color-mix(in srgb, var(--brand) 30%, #3B2E1F);
  --sidebar-text: color-mix(in srgb, var(--brand) 18%, #F3E9D2);
  --accent: var(--brand);
  --ring: color-mix(in srgb, var(--brand) 25%, transparent);
}
html.dark body.theme-siswa{
  --bg:#0A1030; --surface:#111A44; --surface-2:#0E1638; --border:#1F2B66;
  --text:#EEF2FF; --text-muted:#98A4D0; --sidebar:#070C26; --sidebar-active:#16225A; --sidebar-text:#A9B6E6;
}
body.theme-siswa .page-hero{
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--bg)), var(--bg));
  border-radius: 1.25rem;
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
}
body.theme-siswa .surface{ border-color: color-mix(in srgb, var(--brand) 14%, var(--border)); }
body.theme-siswa .shadow-card{ box-shadow: 0 1px 2px rgba(18,33,28,.04), 0 10px 26px -16px var(--brand); }
body.theme-siswa .card-accent{ border-top:3px solid var(--brand); transition: transform .18s ease, box-shadow .18s ease; }
body.theme-siswa .card-accent:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -14px var(--brand); }
body.theme-siswa .btn-primary:hover{ filter:brightness(1.08); box-shadow:0 8px 18px -6px var(--brand); }
*{box-sizing:border-box}
body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
h1,h2,h3,.font-display{font-family:'Sora',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
.surface{background:var(--surface); border:1px solid var(--border);}
.surface-2{background:var(--surface-2);}
.bg-app{background:var(--bg);}
.text-main{color:var(--text);}
.text-muted{color:var(--text-muted);}
.border-app{border-color:var(--border);}
.brand-text{color:var(--brand);}
.brand-bg{background:var(--brand);}
.brand-gradient-text{background:linear-gradient(90deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
.shadow-card{box-shadow:var(--shadow); transition:box-shadow .2s ease;}
.shadow-card:hover{box-shadow:0 18px 40px -18px rgba(14,26,74,.30);}
.ring-brand{box-shadow:0 0 0 4px var(--ring);}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.sidebar{background:var(--sidebar); color:var(--sidebar-text);}
.side-link{display:flex;align-items:center;gap:.65rem;padding:.55rem .75rem;border-radius:.6rem;font-size:.875rem;font-weight:500;transition:background .15s ease,color .15s ease;color:var(--sidebar-text);}
.side-link:hover{background:var(--sidebar-active);color:#fff;}
.side-link.active{background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 80%,#fff));color:#fff;box-shadow:0 6px 14px -8px var(--accent);}
.side-link svg{flex-shrink:0}
input,select,textarea{background:var(--surface);border:1px solid var(--border);color:var(--text);transition:border-color .15s, box-shadow .15s;}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 4px var(--ring);border-color:var(--brand);}
table{border-collapse:separate;border-spacing:0}
th{background:var(--surface-2);color:var(--text-muted);font-weight:600;font-size:.72rem;letter-spacing:.02em;text-transform:uppercase;}
tbody tr{border-top:1px solid var(--border);}
tbody tr:hover{background:var(--surface-2);}
.btn{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.875rem;padding:.55rem 1rem;border-radius:.65rem;transition:filter .12s ease, transform .05s ease;white-space:nowrap;}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 75%,#4F7BFF));color:#fff;box-shadow:0 6px 16px -8px var(--brand);}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);}
.btn-outline{border:1px solid var(--border);color:var(--text);background:var(--surface);}
.btn-outline:hover{background:var(--surface-2)}
.btn-ghost{color:var(--text-muted);}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-accent{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 80%,#FFD08A));color:#fff;}
.btn-accent:hover{filter:brightness(1.06)}
.btn-danger{color:#B4232A;}
.btn-danger:hover{background:rgba(180,35,42,.08)}
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;padding:.2rem .55rem;border-radius:999px;}
.badge-gold{background:color-mix(in srgb,var(--gold) 22%,#fff);color:#7A5A00;}
.modal-backdrop{background:rgba(8,15,12,.55);backdrop-filter:blur(2px)}
.pulse-ring{animation:pulse-ring 2s cubic-bezier(0.4,0,0.6,1) infinite}
@keyframes pulse-ring{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes scanline{0%{top:6%}50%{top:92%}100%{top:6%}}
.scanline{position:absolute;left:6%;right:6%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:scanline 2.2s ease-in-out infinite;box-shadow:0 0 12px var(--accent)}
@keyframes toastin{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.toast{animation:toastin .25s ease}
.tick{animation:tickpop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes tickpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.landing-grid{
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 40%),
    radial-gradient(circle at 10% 90%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 45%),
    radial-gradient(var(--border) 1px,transparent 1px);
  background-size:auto,auto,22px 22px;
}
.auth-hero{
  min-height:calc(100vh - 4rem);
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb,var(--gold) 30%,transparent), transparent 32%),
    radial-gradient(circle at 90% 85%, color-mix(in srgb,var(--accent) 28%,transparent), transparent 38%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(160deg,#132A8C 0%,#1D3FBF 55%,#3B62E0 100%);
  background-size:auto,auto,24px 24px,auto;
}
html.dark .auth-hero{
  background:
    radial-gradient(circle at 12% 18%, rgba(246,194,28,.14), transparent 32%),
    radial-gradient(circle at 90% 85%, rgba(255,122,77,.14), transparent 38%),
    linear-gradient(160deg,#070C26 0%,#0F1F6B 60%,#132A8C 100%);
}
/* teks di luar kartu (judul halaman daftar) */
.auth-hero h1{color:#fff;}
.auth-hero .text-muted{color:rgba(255,255,255,.78);}
.auth-hero .brand-text{color:var(--gold);}
.auth-hero img{filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));}

/* kartu form: tetap terang dan terbaca */
.auth-hero .surface{
  color:var(--text); border:0; border-radius:1.5rem;
  box-shadow:inset 0 4px 0 var(--gold), 0 30px 60px -20px rgba(0,0,0,.5);
}
.auth-hero .surface h1,.auth-hero .surface h2{color:var(--text);}
.auth-hero .surface .text-muted{color:var(--text-muted);}
.auth-hero .surface .brand-text{color:var(--brand);}

/* kartu login dua kolom */
.auth-hero .surface.login-card{box-shadow:0 30px 70px -20px rgba(0,0,0,.55);}
.login-side{
  background:
    radial-gradient(circle at 90% 8%, color-mix(in srgb,var(--gold) 38%,transparent), transparent 42%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb,var(--accent) 45%,transparent), transparent 50%),
    linear-gradient(155deg,#132A8C,#1D3FBF 70%);
}
.auth-hero .surface .login-side h1,
.auth-hero .surface .login-side h2{color:#fff;}
.login-check{background:var(--gold);color:#132A8C;}

/* tab Guru / Siswa */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:.9rem;background:var(--surface-2);border:1px solid var(--border);}
.seg-btn{padding:.6rem 1rem;border-radius:.7rem;font-weight:600;font-size:.875rem;color:var(--text-muted);transition:background .15s,color .15s,box-shadow .15s;}
.seg-btn:hover{color:var(--text);}
.seg-btn.on{background:var(--surface);color:var(--brand);box-shadow:0 2px 8px -2px rgba(14,26,74,.28);}

/* garis tiga warna logo di atas navbar & header */
nav.sticky, header:not(#_){
  background-image:linear-gradient(90deg,var(--brand) 0 40%,var(--gold) 40% 60%,var(--accent) 60% 100%) !important;
  background-size:100% 4px !important;
  background-repeat:no-repeat !important;
  background-position:top !important;
}
.shell-max{max-width:1400px;}
.modal-card{max-height:88vh;}
.qr-panel{min-height:360px;}
.tbl-560{min-width:560px;}
.tbl-640{min-width:640px;}
.tbl-720{min-width:720px;}
.search-min{min-width:200px;}
.laporan-scroll{max-height:520px;}
.toast-top{z-index:80;}
.tight-1{line-height:1.1;}
.fs-10{font-size:10px;}
.fs-11{font-size:11px;}
.fs-13{font-size:13px;}
.fs-14{font-size:14px;}
.fs-15{font-size:15px;}
.r-2{border-radius:2px;}

#splashScreen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#132A8C,#1D3FBF);color:#fff;transition:opacity .45s ease,visibility .45s ease}
#splashScreen.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-logo{width:78px;height:78px;border-radius:24px;background:#fff;color:#1D3FBF;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 50px rgba(0,0,0,.2);animation:splashpop .8s cubic-bezier(.34,1.56,.64,1)}
.splash-dot{width:8px;height:8px;border-radius:999px;background:#F6C21C;animation:splashpulse 1s ease-in-out infinite}
@keyframes splashpop{from{transform:scale(.65);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes splashpulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

#printArea{display:none;}
@media print{
  body *{visibility:hidden;}
  #printArea, #printArea *{visibility:visible;}
  #printArea{display:block;position:absolute;top:0;left:0;width:100%;padding:10mm;}
  #printArea h1{font-family:'Sora',sans-serif;font-size:20px;margin:0 0 4px 0;}
  #printArea .print-meta{font-size:11px;color:#444;margin-bottom:2px;}
  #printArea table{width:100%;border-collapse:collapse;margin-top:10px;font-size:11px;}
  #printArea th,#printArea td{border:1px solid #999;padding:4px 6px;text-align:left;}
  #printArea th{background:#eee;font-weight:700;}
  @page{size:A4 landscape;margin:12mm;}
}