@import url('/assets/fonts.css');
/* =====================================================================
   Sekolah Koku — sistem reka bentuk (selaras DELIMa Login)
   Latar cerah, sidebar & hero "ink" navy, satu warna jenama (ubah di
   Tetapan & Tema), Inter + Montserrat + Playfair Display (dihos sendiri).
   ===================================================================== */
:root{
  /* Asas tema — ditimpa oleh /?page=theme-css */
  --surface:#ffffff; --ink:#1B2432; --dark:#0B1A2B; --fg-dark:var(--dark);
  --primary:#C2410C; --btn:var(--primary); --accent:#FB923C;
  --pastel-lilac:#7C5CC4; --pastel-sky:#2563EB; --pastel-warm:#B45309; --danger:#B91C1C;
  /* Terbitan */
  --teal:color-mix(in srgb,var(--primary) 80%,var(--ink));
  --brand-soft:color-mix(in srgb,var(--primary) 9%,var(--surface));
  --bg:color-mix(in srgb,var(--dark) 4%,var(--surface));
  --surface-alt:color-mix(in srgb,var(--dark) 3%,var(--surface));
  --line:color-mix(in srgb,var(--dark) 13%,var(--surface));
  --line-strong:color-mix(in srgb,var(--dark) 22%,var(--surface));
  --muted:color-mix(in srgb,var(--ink) 70%,var(--surface));
  --mint:var(--brand-soft);
  --lilac:color-mix(in srgb,var(--pastel-lilac) 12%,var(--surface));
  --sky:color-mix(in srgb,var(--pastel-sky) 11%,var(--surface));
  --peach:color-mix(in srgb,var(--pastel-warm) 13%,var(--surface));
  --ok:#15803D; --ok-soft:color-mix(in srgb,#15803D 12%,var(--surface)); --ok-teks:color-mix(in srgb,#15803D 85%,var(--ink));
  --radius:14px; --r-sm:10px;
  --shadow:0 1px 2px color-mix(in srgb,var(--dark) 6%,transparent),0 8px 24px color-mix(in srgb,var(--dark) 6%,transparent);
  --fon-teks:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fon-tajuk:"Montserrat","Inter",system-ui,sans-serif;
  --fon-hero:"Playfair Display",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--fon-teks);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fon-tajuk);font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--fg-dark);margin:0}
h1{font-size:1.75rem}h2{font-size:1.4rem}h3{font-size:1.02rem}
p{margin:0}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:18px;height:18px;flex:none;vertical-align:-3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--muted);font-size:.86rem}
.teal{color:var(--teal)}
.eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.eyebrow.teal{color:var(--teal)}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:middle}

/* ---------- Butang ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:40px;padding:.55rem 1rem;border-radius:var(--r-sm);border:1.5px solid transparent;font:600 .88rem/1.2 var(--fon-teks);white-space:nowrap;text-decoration:none!important;transition:background .15s,border-color .15s,color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--btn);color:#fff}
.btn.primary:hover{background:color-mix(in srgb,var(--btn) 82%,#000)}
.btn.outline{background:var(--surface);border-color:var(--line);color:var(--fg-dark)}
.btn.outline:hover{border-color:var(--fg-dark)}
.btn.light{background:#fff;color:var(--dark)}
.btn.outline-ink{background:transparent;border-color:var(--line);color:var(--fg-dark)}
.btn.outline-ink:hover{border-color:var(--fg-dark)}
.btn.sm{min-height:36px;padding:.4rem .8rem;font-size:.82rem}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.button-group{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.text-link{font-size:.84rem;font-weight:600;color:var(--teal);white-space:nowrap}
.delete-btn{border:0;background:none;padding:0;color:var(--danger);font-size:.84rem;font-weight:600}
.delete-btn:hover{text-decoration:underline}
.delete-form{display:inline}

/* ---------- Kerangka: sidebar ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:264px;display:flex;flex-direction:column;padding:1rem .75rem .75rem;z-index:40;color:#fff;
  background:linear-gradient(180deg,var(--dark) 0%,color-mix(in srgb,var(--dark) 88%,#fff) 100%)}
.side-atas{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.9rem}
.brand,.side-brand{display:flex;align-items:center;gap:.65rem;min-width:0;padding:.2rem .35rem;color:inherit;text-decoration:none!important;font:800 1.08rem/1.1 var(--fon-tajuk);letter-spacing:-.03em}
.brand-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:var(--btn);color:#fff;font:800 1.2rem var(--fon-tajuk);letter-spacing:-.06em}
.brand-logo{width:38px;height:38px;flex:none;border-radius:10px;object-fit:contain;background:#fff;padding:3px}
.brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-light{font-weight:800;color:var(--accent)}
.side-brand{color:#fff}
.side-tutup{display:none;width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;align-items:center;justify-content:center}
.side-nav{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.side-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.kump{padding:1rem .75rem .4rem;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.kump:first-child{padding-top:.2rem}
.nav-item{display:flex;align-items:center;gap:.7rem;min-height:40px;padding:.5rem .75rem;border-radius:9px;color:rgba(255,255,255,.86);text-decoration:none!important;font-size:.9rem;font-weight:500;transition:background .15s,color .15s}
.nav-item .i{opacity:.9}
.nav-item:hover{background:rgba(255,255,255,.09);color:#fff}
.nav-item.active{background:var(--btn);color:#fff;font-weight:600}
.nav-item.active .i{opacity:1}
.nav-item:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.side-foot{border-top:1px solid rgba(255,255,255,.12);padding-top:.8rem;margin-top:.5rem}
.school-tag{display:flex;align-items:center;gap:.65rem;padding:.35rem .4rem}
.school-tag strong{display:block;font-size:.8rem;line-height:1.3;color:#fff}
.school-tag small{display:block;font-size:.7rem;color:rgba(255,255,255,.55);margin-top:.1rem}
.school-monogram{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:9px;background:rgba(255,255,255,.1);color:#fff;font:800 .95rem var(--fon-tajuk)}
.school-logo{flex:0 0 32px;width:32px;height:32px;object-fit:contain;border-radius:8px;background:#fff;padding:2px}
.scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--dark) 55%,transparent);z-index:35}

/* ---------- Kerangka: topbar & kandungan ---------- */
.workspace{margin-left:264px;min-height:100vh;display:flex;flex-direction:column;background:var(--surface-alt)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;min-height:68px;padding:.75rem 1.5rem;
  background:color-mix(in srgb,var(--surface) 96%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.mobile-toggle{display:none;flex:0 0 40px;width:40px;height:40px;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg-dark)}
.top-title{flex:1;min-width:0}
.top-h{font:700 1.2rem/1.2 var(--fon-tajuk);color:var(--fg-dark);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-title p:not(.top-h){font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-right{display:flex;align-items:center;gap:.8rem;flex-shrink:0}
.top-right form{margin:0}
.user-meta{text-align:right;line-height:1.25}
.user-meta strong{display:block;font-size:.88rem;color:var(--fg-dark)}
.user-meta small{font-size:.76rem;color:var(--muted)}
.avatar{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--brand-soft);color:var(--teal);font:800 .95rem var(--fon-tajuk)}
.avatar.small{width:32px;height:32px;font-size:.8rem}
.main-content{flex:1;width:100%;max-width:1400px;padding:1.5rem;display:block}
.print-school-header{display:none}
.footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.75rem 0 .5rem;font-size:.78rem;color:var(--muted)}
.footer strong{color:var(--fg-dark)}

/* ---------- Tajuk halaman ---------- */
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.page-heading h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.page-heading .eyebrow{margin-bottom:.3rem}
.page-heading .muted{font-size:.92rem;max-width:62ch}

/* ---------- Hero dashboard ---------- */
.welcome-banner{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.5rem;align-items:center;padding:2rem 2.2rem;border-radius:18px;color:#fff;
  background:radial-gradient(520px 260px at 92% 10%,color-mix(in srgb,var(--primary) 45%,transparent),transparent 70%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 1.5px) 0 0/18px 18px,var(--dark)}
.welcome-banner h2{font:800 clamp(1.7rem,2.6vw,2.4rem)/1.12 var(--fon-hero);letter-spacing:-.01em;color:#fff;margin:.9rem 0 .7rem}
.welcome-banner p{color:rgba(255,255,255,.78);max-width:56ch;margin-bottom:1.3rem;font-size:.95rem}
.hero-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:color-mix(in srgb,var(--primary) 22%,transparent);border:1px solid color-mix(in srgb,var(--primary) 55%,transparent);color:#fff}
.hero-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.banner-art{position:relative;height:200px}
.id-card{position:absolute;right:10px;top:12px;width:300px;padding:1rem 1.1rem;border-radius:16px;background:#fff;color:#1B2432;box-shadow:0 18px 50px rgba(0,0,0,.35);transform:rotate(-4deg)}
.id-card.back{right:-12px;top:30px;height:170px;background:color-mix(in srgb,var(--primary) 70%,#fff);transform:rotate(6deg);opacity:.55;box-shadow:none}
.id-top{display:flex;align-items:center;gap:.5rem;font:800 .66rem var(--fon-tajuk);letter-spacing:.12em;color:#64748B}
.id-chip{width:26px;height:18px;border-radius:4px;background:linear-gradient(135deg,#F6D58A,#C9A24A)}
.id-yr{margin-left:auto;color:var(--primary)}
.id-body{display:flex;gap:.85rem;align-items:center;margin-top:.85rem}
.id-photo{display:grid;place-items:center;flex:none;width:58px;height:66px;border-radius:10px;background:color-mix(in srgb,var(--primary) 12%,#fff);color:var(--primary)}
.id-photo .i{width:30px;height:30px}
.id-body b{display:block;font:800 1rem var(--fon-tajuk);color:#0B1A2B}
.id-body small{display:block;font-size:.76rem;color:#64748B;margin:.15rem 0 .5rem}
.id-tags{display:flex;gap:.3rem;flex-wrap:wrap}
.id-tags i{display:inline-flex;align-items:center;gap:.25rem;font:600 .66rem var(--fon-teks);font-style:normal;padding:.2rem .45rem;border-radius:6px;background:#F1F4F8;color:#334155}
.id-tags .i{width:12px;height:12px}
.id-stamp{position:absolute;right:14px;bottom:12px;padding:.15rem .5rem;border:2px solid var(--ok);border-radius:6px;color:var(--ok);font:800 .66rem var(--fon-tajuk);letter-spacing:.12em;transform:rotate(-8deg)}

/* ---------- Statistik ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.25rem 0}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:0 1px 2px color-mix(in srgb,var(--dark) 5%,transparent)}
.stat-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;color:var(--muted);font-size:.86rem;font-weight:500}
.stat-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:11px;background:var(--brand-soft);color:var(--teal)}
.stat-icon.ok{background:var(--ok-soft);color:var(--ok-teks)}
.stat-icon.warn{background:var(--peach);color:var(--pastel-warm)}
.stat-icon.mint{background:var(--brand-soft);color:var(--teal)}
.stat-icon.lilac{background:var(--lilac);color:var(--pastel-lilac)}
.stat-icon.sky{background:var(--sky);color:var(--pastel-sky)}
.stat-icon.peach{background:var(--peach);color:var(--pastel-warm)}
.stat-card>strong{display:block;font:800 1.9rem/1.1 var(--fon-tajuk);color:var(--fg-dark);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:.35rem 0 .6rem}
.stat-card>strong>span{font-size:1.1rem}
.stat-card>small{display:flex;justify-content:space-between;align-items:center;padding-top:.6rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.stat-card small a{font-weight:700}

/* ---------- Panel & kad ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 2px color-mix(in srgb,var(--dark) 5%,transparent)}
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.1rem 1.25rem}
.panel-heading h3{font-size:1rem}
.panel-heading .muted{font-size:.8rem;margin-top:.15rem}
.panel-foot{padding:.8rem 1.25rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.padded{padding:1.25rem}
.padded>h3{margin-bottom:.9rem}
.spaced{margin-top:1.25rem}
.dashboard-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:1.25rem;margin-bottom:1.25rem}
.small-pill{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--line);font-size:.72rem;font-weight:600;color:var(--muted)}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;padding:.1rem .45rem;margin-left:.35rem;border-radius:999px;background:var(--brand-soft);color:var(--teal);font:700 .74rem var(--fon-teks);vertical-align:2px}

.participation{padding:0 1.25rem;margin-bottom:1.1rem}
.participation>div{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;font-size:.88rem}
.participation strong{font-weight:600}
.participation div>span:last-child{margin-left:auto;font:800 .95rem var(--fon-tajuk);color:var(--fg-dark)}
.participation small{font:500 .74rem var(--fon-teks);color:var(--muted)}
.mini-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px}
.mini-icon .i{width:16px;height:16px}
.mini-icon.mint{background:var(--brand-soft);color:var(--teal)}
.mini-icon.lilac{background:var(--lilac);color:var(--pastel-lilac)}
.mini-icon.sky{background:var(--sky);color:var(--pastel-sky)}
progress{display:block;width:100%;height:8px;border:0;border-radius:99px;overflow:hidden;background:var(--surface-alt)}
progress::-webkit-progress-bar{background:color-mix(in srgb,var(--dark) 7%,var(--surface))}
progress::-webkit-progress-value{background:var(--primary);border-radius:99px}
progress::-moz-progress-bar{background:var(--primary)}
progress.lilac::-webkit-progress-value{background:var(--pastel-lilac)}
progress.lilac::-moz-progress-bar{background:var(--pastel-lilac)}
progress.sky::-webkit-progress-value{background:var(--pastel-sky)}
progress.sky::-moz-progress-bar{background:var(--pastel-sky)}

.activity-row{display:flex;align-items:center;gap:.85rem;margin:0 1.25rem;padding:.8rem 0;border-top:1px solid var(--line);color:inherit;text-decoration:none!important}
.activity-row:hover strong{color:var(--teal)}
.activity-row>div:nth-child(2){min-width:0}
.activity-row strong{display:block;font-size:.9rem;font-weight:600}
.activity-row small{display:block;font-size:.78rem;color:var(--muted)}
.activity-row>span{margin-left:auto;color:var(--muted)}
.date-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:48px;height:52px;border-radius:11px;background:var(--brand-soft);color:var(--teal)}
.date-tile small{font:700 .62rem var(--fon-teks);letter-spacing:.08em;color:var(--teal)}
.date-tile strong{font:800 1.2rem/1 var(--fon-tajuk);color:var(--teal)}
.achievements-panel{margin-bottom:1.25rem}
.medal{color:var(--accent)}

/* ---------- Jadual ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap;font-size:.88rem}
thead{background:color-mix(in srgb,var(--dark) 5%,var(--surface))}
th{padding:.7rem 1.25rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
td{padding:.8rem 1.25rem;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb,var(--primary) 3%,var(--surface))}
.student-cell{display:flex;align-items:center;gap:.65rem}
.student-cell strong{display:block;font-weight:600}
.student-cell small{display:block;font-size:.76rem;color:var(--muted)}
.row-actions{display:flex;align-items:center;gap:.9rem}

/* ---------- Lencana & notis ---------- */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:999px;font-size:.74rem;font-weight:600;background:color-mix(in srgb,var(--dark) 7%,var(--surface));color:color-mix(in srgb,var(--ink) 85%,var(--surface))}
.badge.green{background:var(--ok-soft);color:var(--ok-teks)}
.notice{display:flex;gap:.6rem;align-items:flex-start;padding:.8rem 1rem;margin-bottom:1rem;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--pastel-sky) 25%,var(--surface));background:var(--sky);color:color-mix(in srgb,var(--pastel-sky) 70%,var(--ink));font-size:.88rem}
.notice.error{background:color-mix(in srgb,var(--danger) 9%,var(--surface));border-color:color-mix(in srgb,var(--danger) 30%,var(--surface));color:color-mix(in srgb,var(--danger) 85%,var(--ink))}
.notice.success{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,var(--surface));color:var(--ok-teks)}
.empty{text-align:center;padding:3rem 1.5rem;color:var(--muted)}
.empty>span{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--brand-soft);color:var(--teal);margin-bottom:.8rem}
.empty>span .i{width:26px;height:26px}
.empty h3{margin-bottom:.35rem}
.empty p{font-size:.9rem}
.empty.compact{padding:1.75rem 1rem}

/* ---------- Borang ---------- */
.field{display:flex;flex-direction:column;gap:.4rem;font-size:.84rem;font-weight:600;color:var(--fg-dark)}
input,select,textarea{width:100%;min-width:0;min-height:42px;padding:.55rem .75rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:.92rem;font-weight:400;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,var(--surface))}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--primary)}
textarea{resize:vertical;min-height:110px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem;padding:0 1.25rem 1.25rem}
.padded .form-grid{padding:.25rem 0 0}
.full{grid-column:1/-1}
.form-actions{display:flex;justify-content:flex-end;gap:.6rem}
.form-actions.padded{padding:1rem 1.25rem}
.editor-panel{margin-bottom:1.25rem}
.search-form{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}
.search-form input{width:200px}
.search-form select{width:auto;max-width:180px}
.membership-form{display:grid;grid-template-columns:1.4fr 1.4fr 1fr auto;gap:1rem;align-items:end;padding:0 1.25rem 1.25rem}
.selector{display:flex;align-items:flex-end;gap:1rem;padding:1.25rem}
.selector .field{flex:1}
.stack{display:flex;flex-direction:column;gap:1rem}
dl{padding:0 1.25rem 1.25rem;margin:0}
dt{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.9rem}
dd{margin:.2rem 0 0;white-space:pre-wrap}
.print-btn{margin:0}
.secret{display:block;padding:.85rem 1rem;border:1.5px dashed var(--line-strong);border-radius:var(--r-sm);background:var(--surface-alt);font-size:1rem;letter-spacing:.06em;overflow-wrap:anywhere;user-select:all;color:var(--fg-dark)}
.recovery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;max-width:480px;margin:1.25rem 0}
.recovery-grid code{padding:.6rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--surface-alt);user-select:all}

/* ---------- Log masuk ---------- */
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.auth-story{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:2.5rem 3.25rem;color:#fff;
  background:radial-gradient(600px 340px at 85% 0%,color-mix(in srgb,var(--primary) 40%,transparent),transparent 70%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 1.5px) 0 0/18px 18px,var(--dark)}
.auth-story .brand{color:#fff;font-size:1.25rem;padding:0}
.auth-story h1{font:800 clamp(2.4rem,4.6vw,4rem)/1.05 var(--fon-hero);letter-spacing:-.01em;color:#fff;margin:1.2rem 0 1.1rem}
.auth-story h1 em{font-style:normal;color:var(--accent)}
.auth-story p{color:rgba(255,255,255,.78);max-width:46ch;font-size:1rem}
.story-grid{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.8rem}
.story-grid span{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:.84rem;font-weight:500}
.auth-story>small{color:rgba(255,255,255,.5);font-size:.78rem}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:2.5rem 1.5rem;background:var(--bg)}
.auth-form{width:100%;max-width:410px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:2rem;box-shadow:var(--shadow)}
.auth-form h2{font-size:1.6rem;margin-bottom:.4rem}
.auth-form>.muted{margin-bottom:1.3rem}
.auth-form .stack{margin-top:1.1rem}
.auth-form .btn{width:100%;min-height:46px;font-size:.95rem}
.auth-security{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);text-align:center;font-size:.78rem;color:var(--muted)}

/* ---------- Responsif ---------- */
@media(max-width:1180px){.stats-grid{grid-template-columns:repeat(2,1fr)}.welcome-banner{grid-template-columns:1fr}.banner-art{display:none}.membership-form{grid-template-columns:1fr 1fr}}
@media(max-width:960px){
  .sidebar{transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 0 60px rgba(0,0,0,.35)}
  .sidebar.open{transform:none}
  .side-tutup{display:flex}
  .workspace{margin-left:0}
  .mobile-toggle{display:flex}
  .dashboard-grid{grid-template-columns:1fr}
  .auth-shell{grid-template-columns:1fr}
  .auth-story{padding:2rem 1.5rem}
  .auth-story h1{font-size:2.4rem}
  .auth-story p,.story-grid,.auth-story>small{display:none}
}
@media(max-width:640px){
  .topbar{padding:.6rem 1rem;min-height:60px}
  .main-content{padding:1rem}
  .user-meta,.hide-sm{display:none}
  .top-h{font-size:1.02rem}
  .stats-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .stat-card{padding:.9rem}
  .stat-card>strong{font-size:1.5rem}
  .welcome-banner{padding:1.5rem 1.25rem}
  .form-grid,.membership-form{grid-template-columns:1fr;padding:0 1rem 1rem}
  .panel-heading{padding:1rem}
  th,td{padding:.65rem 1rem}
  .search-form input{width:auto;flex:1 1 60%}
  .search-form select{flex:1 1 40%;max-width:none}
  .selector{flex-direction:column;align-items:stretch;padding:1rem}
  .recovery-grid{grid-template-columns:1fr}
  .auth-form{padding:1.5rem}
  .footer>span:last-child{display:none}
}

/* ---------- Cetak ---------- */
@media print{
  :root{--surface:#fff;--bg:#fff;--ink:#000;--fg-dark:#000;--line:#ccc;color-scheme:light}
  body{background:#fff;font-size:12px}
  .sidebar,.topbar,.page-heading .button-group,.btn,.footer,.search-form,.selector,.delete-form,.text-link,.notice,.membership-form,.scrim,.sprite{display:none!important}
  .workspace{margin:0;background:#fff}
  .main-content{padding:0;max-width:none}
  .page-heading h1{position:static;width:auto;height:auto;clip:auto;font-size:20px}
  .panel{border:0;box-shadow:none;border-radius:0;overflow:visible}
  .table-wrap{overflow:visible}
  table{white-space:normal}
  th,td{padding:6px 8px;border-bottom:1px solid #ccc}
  .form-grid{display:block}
  .field{break-inside:avoid;margin-bottom:14px}
  .field input,.field textarea,.field select{border:0;padding:0;appearance:none;background:#fff;color:#000;box-shadow:none}
  .editor-panel~.panel{display:none}
  .print-school-header{display:block;font-size:11px;color:#555;margin-bottom:8px}
}
.print-report{display:none}
@media print{.editor-panel:has(.print-report)>.form-grid,.editor-panel:has(.print-report)>dl{display:none}.print-report{display:block;padding:20px;overflow-wrap:anywhere}}

/* Excel import workflow */
.import-steps{display:flex;gap:30px;margin:0 0 25px;color:color-mix(in srgb,var(--ink) 55%,var(--surface));font-size:11px}.import-steps span{display:flex;align-items:center;gap:9px}.import-steps b{display:grid;place-items:center;width:25px;height:25px;border:1px solid color-mix(in srgb,color-mix(in srgb,var(--primary) 60%,var(--accent)) 21%,var(--surface));border-radius:50%;font-weight:600}.import-steps .current{color:var(--teal);font-weight:600}.import-steps .current b{background:var(--btn);border-color:var(--btn);color:white}.import-guidance{padding:0 23px 18px;max-width:1050px;font-size:12px;color:color-mix(in srgb,color-mix(in srgb,var(--fg-dark) 80%,var(--accent)) 79%,var(--surface))}.import-guidance p{margin-bottom:12px}.import-guidance .notice{margin-bottom:0}.import-rules{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.import-rules span{border:1px solid color-mix(in srgb,color-mix(in srgb,var(--primary) 50%,var(--accent)) 22%,var(--surface));background:color-mix(in srgb,var(--accent) 9%,var(--surface));padding:5px 10px;border-radius:5px;font-size:10px}.import-upload{display:flex;align-items:center;gap:20px;padding:22px 23px;border-top:1px solid var(--line);background:var(--surface)}.import-upload .field{flex:1}.import-upload input[type=file]{background:var(--surface);padding:12px}.import-upload input::file-selector-button{border:0;border-radius:4px;padding:7px 11px;margin-right:12px;background:color-mix(in srgb,color-mix(in srgb,var(--primary) 40%,var(--accent)) 13%,var(--surface));color:color-mix(in srgb,color-mix(in srgb,var(--fg-dark) 80%,var(--accent)) 96%,var(--surface));font:inherit;cursor:pointer}.import-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:0 23px 22px}.import-summary>div{background:color-mix(in srgb,var(--ink) 5%,var(--surface));border:1px solid color-mix(in srgb,color-mix(in srgb,var(--primary) 40%,var(--accent)) 20%,var(--surface));border-radius:8px;padding:16px}.import-summary strong{display:block;font-size:27px;font-weight:600}.import-summary span{font-size:10px;color:color-mix(in srgb,color-mix(in srgb,var(--fg-dark) 80%,var(--accent)) 64%,var(--surface))}.import-summary .has-errors{background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-color:color-mix(in srgb,var(--pastel-warm) 20%,var(--surface));color:var(--pastel-warm)}.import-table{max-height:540px;overflow:auto}.import-table thead{position:sticky;top:0;z-index:1}.import-verdict{white-space:normal;min-width:320px;max-width:460px}.import-verdict ul{font-size:11px;padding-left:16px;margin:10px 0 0;line-height:1.8}.import-row-error td{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}.error-badge{background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--pastel-warm);border-color:color-mix(in srgb,var(--accent) 37%,var(--surface))}.import-confirm{padding:23px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:end;gap:20px}.import-confirm-form{max-width:760px}.confirm-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;font-weight:550}.confirm-check input{width:16px;height:16px;flex-shrink:0;accent-color:var(--teal);margin:2px 0 0}.import-confirm-form p{font-size:10px;margin:12px 0 20px}.btn:disabled{cursor:not-allowed;opacity:.42}.page-heading .button-group{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:600px){.import-steps{gap:13px;font-size:9px;flex-wrap:wrap}.import-steps b{width:21px;height:21px}.import-upload,.import-confirm{flex-direction:column;align-items:stretch;padding:18px}.import-summary{gap:8px;padding:0 17px 18px}.import-summary>div{padding:11px}.import-summary span{font-size:9px}.import-guidance{padding:0 17px 18px}.import-steps span{gap:6px}}
/* Printable documents, activity evidence and unit organisation. */
.print-school-header{display:none}.document-toolbar{display:flex;align-items:center;gap:18px;margin:0 0 22px}.document-toolbar .print-btn{margin:0}.document-page{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:40px;max-width:1100px;margin:0 auto 25px}.document-title{text-align:center;padding-bottom:24px;border-bottom:2px solid color-mix(in srgb,color-mix(in srgb,var(--primary) 40%,var(--fg-dark)) 93%,var(--surface));margin-bottom:24px}.document-title .eyebrow{font-size:11px;color:color-mix(in srgb,color-mix(in srgb,var(--fg-dark) 80%,var(--accent)) 78%,var(--surface));margin-bottom:12px}.document-title h2{font-size:25px;margin-bottom:9px}.document-title p{margin:0;color:color-mix(in srgb,color-mix(in srgb,var(--fg-dark) 80%,var(--accent)) 77%,var(--surface));font-size:14px}.document-meta{padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-bottom:30px}.document-meta>div{display:flex;gap:15px;font-size:12px}.document-meta dt{min-width:95px;margin:0}.document-meta dd{margin:0;white-space:normal}.report-section{margin:25px 0}.report-section h3{font-size:15px;border-left:3px solid color-mix(in srgb,color-mix(in srgb,var(--primary) 80%,var(--accent)) 83%,var(--surface));padding-left:11px;margin-bottom:12px}.report-section p{line-height:1.9;white-space:normal;overflow-wrap:anywhere;font-size:13px}.report-photo-grid{display:grid;grid-template-columns:1fr;gap:20px}.report-photo-grid figure{margin:0;break-inside:avoid}.report-photo-grid img{display:block;width:100%;max-height:340px;object-fit:contain;background:color-mix(in srgb,var(--ink) 4%,var(--surface));border:1px solid color-mix(in srgb,color-mix(in srgb,var(--primary) 50%,var(--accent)) 17%,var(--surface));border-radius:6px}.report-photo-grid figcaption{font-size:10px;color:color-mix(in srgb,color-mix(in srgb,var(--fg-dark) 80%,var(--accent)) 69%,var(--surface));margin-top:7px;text-align:center}.document-signatures{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-top:25px;border-top:1px solid var(--line);margin-top:35px;font-size:12px;break-inside:avoid}.document-signatures div{display:flex;flex-direction:column;gap:18px}.document-subline{font-size:12px;line-height:1.9}.document-bottom{margin-top:25px;border-top:1px solid var(--line);padding-top:15px;font-size:10px;color:color-mix(in srgb,color-mix(in srgb,var(--primary) 60%,var(--pastel-warm)) 72%,var(--surface))}.photo-editor{border-top:1px solid var(--line);padding-top:22px}.photo-editor h3{margin-bottom:9px}.photo-editor>.muted{margin-bottom:20px}.photo-editor .field{margin-top:18px;margin-bottom:10px}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.photo-card{border:1px solid color-mix(in srgb,color-mix(in srgb,var(--primary) 50%,var(--accent)) 21%,var(--surface));border-radius:8px;overflow:hidden}.photo-card img{width:100%;height:150px;object-fit:contain;background:color-mix(in srgb,var(--accent) 11%,var(--surface));display:block}.photo-card span{display:flex;gap:8px;padding:12px;font-size:10px;align-items:center}.photo-card input{width:15px;height:15px;margin:0;flex-shrink:0}.org-chart{max-width:1000px;margin:auto}.org-advisors{max-width:520px;margin:10px auto 30px;text-align:center;border:1px solid color-mix(in srgb,color-mix(in srgb,var(--primary) 70%,var(--accent)) 37%,var(--surface));border-top:4px solid color-mix(in srgb,var(--primary) 80%,var(--pastel-warm));padding:22px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-radius:9px;position:relative;break-inside:avoid}.org-advisors>span{font-size:9px;letter-spacing:1.6px;color:color-mix(in srgb,color-mix(in srgb,var(--primary) 60%,var(--accent)) 90%,var(--surface))}.org-advisors h3{font-size:18px;margin-top:9px}.org-advisors p{font-size:11px;line-height:1.8;margin:10px 0 0;color:color-mix(in srgb,color-mix(in srgb,var(--primary) 60%,var(--pastel-warm)) 75%,var(--surface))}.org-level{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin:0 0 24px;position:relative}.org-card{flex:0 1 29%;min-width:170px;text-align:center;border:1px solid color-mix(in srgb,color-mix(in srgb,var(--primary) 50%,var(--accent)) 24%,var(--surface));border-top:3px solid color-mix(in srgb,color-mix(in srgb,var(--primary) 60%,var(--accent)) 80%,var(--surface));border-radius:8px;padding:17px 13px;background:var(--surface);break-inside:avoid}.org-card span{display:block;font-size:10px;color:color-mix(in srgb,color-mix(in srgb,var(--primary) 70%,var(--pastel-warm)) 77%,var(--surface));font-weight:600;margin-bottom:7px}.org-card strong{display:block;font-size:12px;overflow-wrap:anywhere}.org-card small{display:block;font-size:10px;color:color-mix(in srgb,var(--accent) 50%,var(--pastel-sky));margin-top:7px}.org-members .org-card{border-top:1px solid color-mix(in srgb,color-mix(in srgb,var(--primary) 50%,var(--accent)) 24%,var(--surface));background:color-mix(in srgb,var(--accent) 6%,var(--surface));padding:12px}.member-print-table{white-space:normal}.member-print-table th,.member-print-table td{padding:12px 10px}.page-heading .print-btn{margin:0}.no-print .btn{margin:0}
@media(max-width:650px){.document-page{padding:22px 17px}.document-meta{grid-template-columns:1fr}.document-title h2{font-size:21px}.document-toolbar{align-items:flex-start;flex-direction:column;gap:10px}.photo-grid{grid-template-columns:1fr}.org-card{flex-basis:43%;min-width:130px}.document-signatures{grid-template-columns:1fr}.document-title p{font-size:12px}.document-meta>div{font-size:11px}}
@page{size:A4;margin:14mm}
@media print{.no-print,.document-toolbar,.photo-editor,.import-steps,.import-upload,.import-confirm{display:none!important}.print-school-header{display:block;font-size:10pt;margin-bottom:16px;border-bottom:1px solid #777;padding-bottom:8px}.main-content:has(.document-page)>.print-school-header{display:none}.document-page{border:0;border-radius:0;margin:0;padding:0;max-width:none;font-size:11pt}.document-page h2{font-size:19pt}.document-title{break-after:avoid}.document-meta{display:grid;grid-template-columns:1fr 1fr;font-size:10pt}.report-section h3{font-size:12pt;break-after:avoid}.report-section p{font-size:10pt;line-height:1.65;orphans:3;widows:3}.report-photo-grid{display:block}.report-photo-grid figure{margin:0 0 15px;break-inside:avoid}.report-photo-grid img{max-height:72mm;border:1px solid #ddd;background:#fff;object-fit:contain}.report-photo-grid figcaption{font-size:8pt;color:#333}.document-signatures{font-size:9pt;grid-template-columns:1fr 1fr}.document-bottom{font-size:8pt;color:#444}.org-card{flex-basis:29%;min-width:0;padding:10px;background:#fff!important;border-color:#888;box-shadow:none}.org-card strong{font-size:9pt}.org-card span,.org-card small{font-size:8pt;color:#333}.org-advisors{background:#fff;max-width:75%;margin-bottom:20px}.org-level{gap:10px;margin-bottom:18px}.org-members .org-card{padding:8px}.org-chart{overflow:visible}.document-page table th,.document-page table td{padding:8px 6px;font-size:9pt}thead{display:table-header-group;color:black;background:white}tr{break-inside:avoid}td,th{white-space:normal;overflow-wrap:anywhere}.table-wrap{overflow:visible!important}.panel-heading{padding:12px 0}.page-heading .eyebrow{display:none}.page-heading{margin-bottom:14px}.page-heading h1{font-size:18pt}.row-actions{display:none}.badge{color:black!important;background:white!important;border-color:#aaa!important}.footer{display:none}.panel{overflow:visible!important}.document-page img{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

@media print{.module-list-table th:last-child,.module-list-table td:last-child{display:none}}

/* v2: tema, pengurusan pengguna, kemudahan guna */
.brand-logo{width:36px;height:36px;object-fit:contain;border-radius:9px;margin-right:9px;background:var(--surface)}
.auth-story .brand-logo{width:42px;height:42px;background:#ffffff;padding:3px}
.brand-text{overflow:hidden;text-overflow:ellipsis}
.school-logo{flex:0 0 32px;width:32px;height:32px;object-fit:contain;border-radius:7px}
.enroll-steps{padding-left:20px;margin:0 0 18px;font-size:12px;line-height:1.9;color:var(--muted)}
.qr-box{display:flex;justify-content:center;padding:14px;background:#ffffff;border:1px solid var(--line);border-radius:12px;margin-bottom:14px}
.qr-box .qr{width:200px;height:200px;display:block}
.manual-key{margin-bottom:12px;font-size:12px}
.manual-key summary{cursor:pointer;color:var(--teal);font-weight:550;margin-bottom:10px}
.manual-key .secret{display:block;margin:10px 0 6px;word-spacing:6px}
.search-form{flex-wrap:wrap;align-items:center;justify-content:flex-end}
.search-form select{width:auto;max-width:180px;padding:9px 10px;font-size:11px}
.pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 23px;border-top:1px solid var(--line)}
.pagination div{display:flex;gap:6px;flex-wrap:wrap}
.pagination .btn{padding:8px 12px;min-width:38px}
.btn[aria-disabled=true]{opacity:.4;cursor:default}
.bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 23px 16px;font-size:11px}
.bulk-bar .btn{padding:8px 12px}
.attendance-tally{margin-left:auto;font-size:11px}
.select-search{margin-bottom:-2px;border-bottom-left-radius:0;border-bottom-right-radius:0;font-size:11px;padding:8px 11px;background:var(--bg)}
.select-search+select{border-top-left-radius:0;border-top-right-radius:0}
.select-search.no-match{border-color:var(--danger)}
.badge.warn{background:color-mix(in srgb,var(--pastel-warm) 12%,var(--surface));border-color:color-mix(in srgb,var(--pastel-warm) 25%,var(--surface));color:var(--danger)}
.row-muted td{opacity:.55}
.row-alert td{background:color-mix(in srgb,var(--pastel-warm) 6%,var(--surface))}
.cell-sub{display:block;font-size:9px;color:var(--muted);margin-top:3px}
.stat-card.alert{border-color:color-mix(in srgb,var(--pastel-warm) 40%,var(--surface))}
.stat-card.alert>strong{color:var(--danger)}
.admin-stats{margin-top:0}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--pastel-warm) 35%,var(--surface))}
.manage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 23px 24px}
.manage-card{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);border-radius:10px;padding:18px;background:var(--bg)}
.manage-card h4{margin:0;font-size:13px}
.manage-card .btn{margin-top:auto}
.confirm-field{border-top:1px dashed var(--line);padding-top:12px}
.audit-filter{display:grid;grid-template-columns:1.3fr 1.3fr 1fr 1fr auto auto;gap:12px;align-items:end;padding:0 23px 18px}
.audit-filter .confirm-check{font-size:11px;padding-bottom:11px;white-space:nowrap}
.audit-filter-actions{display:flex;gap:12px;align-items:center;padding-bottom:2px}
.settings-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.settings-preview{position:sticky;top:20px}
.settings-actions{margin-top:14px}
.settings-actions .btn{width:100%;padding:14px}
.settings-form .form-grid{padding:18px 0 0}
.settings-form .panel>.muted{margin-top:6px}
.subhead{margin:26px 0 12px}
.logo-row{display:flex;align-items:center;gap:14px}
.logo-preview{flex:0 0 56px;height:56px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.logo-preview img{width:100%;height:100%;object-fit:contain}
.logo-field{grid-column:1/-1}
.logo-remove{margin:10px 0 0}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:18px}
.preset-card,.mode-card{position:relative;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:10px;padding:13px;cursor:pointer;font-size:11px;font-weight:550;background:var(--surface)}
.preset-card input,.mode-card input{position:absolute;opacity:0;pointer-events:none}
.preset-card:has(input:checked),.mode-card:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 30%,transparent)}
.preset-card:has(input:focus-visible),.mode-card:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--primary) 65%,var(--surface));outline-offset:2px}
.swatches{display:flex;height:30px;border-radius:7px;overflow:hidden}
.swatches i{flex:1}
.swatches .sw1{flex:2}
.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.color-grid input[type=color]{height:44px;padding:4px;cursor:pointer}
.custom-colors.disabled{opacity:.5}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mode-card{flex-direction:row;align-items:center}
.mode-icon{font-size:18px;color:var(--teal)}
.preview-banner{background:var(--dark);color:#ffffff;border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:10px;margin:6px 0 16px}
.preview-banner small{font-size:8px;letter-spacing:1.5px;opacity:.7}
.preview-banner strong{font-size:17px;line-height:1.3;white-space:pre-line}
.preview-banner .btn{align-self:flex-start;background:color-mix(in srgb,var(--primary) 12%,#ffffff);color:var(--dark)}
.preview-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
:root[style] .settings-preview{transition:none}
@media(prefers-color-scheme:dark){input[type=date]{color-scheme:inherit}}
@media(max-width:1150px){.manage-grid{grid-template-columns:1fr}.audit-filter{grid-template-columns:1fr 1fr}.settings-layout{grid-template-columns:1fr}.settings-preview{position:static}}
@media(max-width:600px){.color-grid,.mode-grid{grid-template-columns:1fr}.audit-filter{grid-template-columns:1fr;padding:0 17px 16px}.bulk-bar{padding:0 17px 14px}.attendance-tally{margin-left:0;width:100%}.pagination{padding:14px 17px}.search-form select{max-width:none;flex:1}.manage-grid{padding:0 17px 18px}}
@media print{:root{--surface:#ffffff;--bg:#ffffff;--ink:#000000;--line:#dddddd;color-scheme:light}.bulk-bar,.pagination,.select-search{display:none!important}}
.logo-preview .school-monogram{width:34px;height:34px;flex:none}
.field small{font-size:10px;font-weight:400;line-height:1.6}
@media(max-width:600px){.panel-heading:has(.search-form){flex-direction:column;align-items:stretch}.search-form{width:100%;justify-content:flex-start}.search-form select{flex:1 1 40%;max-width:none}.search-form input{max-width:none;flex:1 1 60%}}
/* Pemasang */
body.installer{min-height:100vh}
.install-wrap{max-width:680px;margin:0 auto;padding:48px 16px}
.install-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.install-head .brand{padding:0}
.install-wrap h1{font-size:26px}
.install-wrap .stack{margin-top:6px}
.install-wrap code{overflow-wrap:anywhere}
.install-wrap .notice .secret{display:inline-block;margin:6px 0;font-size:12px}
.req-list{list-style:none;padding:0;margin:0 0 20px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.req-list li{display:flex;gap:12px;padding:11px 14px;border-top:1px solid var(--line);font-size:12px}
.req-list li:first-child{border-top:0}
.req-list li>span{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:11px}
.req-list small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.req-ok>span{background:var(--mint);color:var(--teal)}
.req-warn>span{background:var(--peach);color:var(--pastel-warm)}
.req-fail{background:color-mix(in srgb,var(--pastel-warm) 6%,var(--surface))}
.req-fail>span{background:var(--danger);color:#ffffff}
.install-foot{text-align:center;margin-top:18px;font-size:11px}
.step-no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--btn);color:#ffffff;font-size:12px;margin-right:8px;vertical-align:1px}
.subhead.first{margin-top:0}
.install-grid{padding:16px 0 18px}
.install-grid .full{grid-column:1/-1}
.install-go{width:100%;padding:14px;margin-top:14px}
.advanced{grid-column:1/-1;font-weight:500}
.advanced summary{cursor:pointer;color:var(--teal);font-size:11px}
.advanced .install-grid{padding:10px 0 0}
.done-list{padding-left:18px;line-height:1.9;font-size:13px}
.env-box{font-family:ui-monospace,Menlo,monospace;font-size:12px}
/* v3: pelarasan reka bentuk DELIMa */
.logo-preview .school-monogram{background:var(--brand-soft);color:var(--teal)}
.preview-banner{background:radial-gradient(240px 140px at 90% 0%,color-mix(in srgb,var(--primary) 45%,transparent),transparent 70%),var(--dark)}
.preview-banner strong{font-family:var(--fon-hero);font-size:1.2rem}
.bulk-bar{font-size:.84rem;font-weight:600}
input[type=file]{padding:.45rem .5rem;cursor:pointer}
input::file-selector-button{margin-right:.75rem;padding:.35rem .8rem;border:0;border-radius:8px;background:var(--brand-soft);color:var(--teal);font:600 .82rem var(--fon-teks);cursor:pointer}
.installer .brand-icon{width:38px;height:38px}
.install-head .brand{color:var(--fg-dark)}
.manage-card,.preset-card,.mode-card{border-radius:12px}
.enroll-steps{color:var(--muted)}
.welcome-banner{border:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.req-ok>span{background:var(--ok-soft);color:var(--ok-teks)}
/* Integriti & Status */
.stat-card.alert{border-color:color-mix(in srgb,var(--danger) 35%,var(--surface));background:color-mix(in srgb,var(--danger) 4%,var(--surface))}
.notice .i{flex:none;margin-top:1px}
.int-body{display:grid;gap:.8rem;padding-top:0}
.int-ok{display:flex;align-items:center;gap:.5rem;color:var(--ok-teks);font-weight:600}
.int-list{border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem}
.int-list summary{cursor:pointer;font-weight:600}
.int-list ul{margin:.5rem 0 0;padding-left:1.1rem;max-height:240px;overflow:auto;font-size:.82rem}
.int-list.danger{border-color:color-mix(in srgb,var(--danger) 40%,var(--surface));background:color-mix(in srgb,var(--danger) 5%,var(--surface))}
.int-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.accept-form{display:grid;gap:.8rem;padding:1rem;border:1px dashed var(--line-strong);border-radius:12px}
.uptime-bars{width:100%;height:auto;display:block}
.uptime-bars .up,.uptime-legend .up{fill:var(--ok);background:var(--ok)}
.uptime-bars .warn,.uptime-legend .warn{fill:#D97706;background:#D97706}
.uptime-bars .down,.uptime-legend .down{fill:var(--danger);background:var(--danger)}
.uptime-bars .none,.uptime-legend .none{fill:color-mix(in srgb,var(--dark) 10%,var(--surface));background:color-mix(in srgb,var(--dark) 10%,var(--surface))}
.uptime-legend{display:flex;gap:1rem;flex-wrap:wrap;margin:.6rem 0 0;font-size:.76rem;color:var(--muted)}
.uptime-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.subhead{font-size:.95rem;margin:1.2rem 0 .6rem}
.monitor-setup{display:grid;gap:.9rem;padding-top:0}
.setup-steps{margin:0;padding-left:1.2rem;line-height:1.9;font-size:.9rem}
.copy-field{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;background:var(--surface-alt)}
.sys-info{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.25rem;padding:0 1.25rem 1.25rem}
.sys-info dt{margin-top:.7rem}
.dashboard-grid.spaced{margin-top:1.25rem}
.twofa-grid{grid-template-columns:1fr 1fr;margin-top:1rem}
.twofa-card{align-items:flex-start}
.twofa-card strong{display:block;font-size:.88rem}
.twofa-card small{display:block;font-weight:400;color:var(--muted);font-size:.78rem;margin-top:.15rem}
@media(max-width:640px){.twofa-grid{grid-template-columns:1fr}}
/* Import guru */
.temp-pw{font-size:.92rem;letter-spacing:.04em;padding:.15rem .4rem;border-radius:6px;background:var(--surface-alt);border:1px solid var(--line);user-select:all}
.cred-slips{display:none}
@media print{
  .no-print{display:none!important}
  .cred-slips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cred-slip{border:1px dashed #888;border-radius:8px;padding:12px 14px;break-inside:avoid;font-size:11px}
  .cred-slip header{display:flex;justify-content:space-between;font-size:10px;color:#444;border-bottom:1px solid #ddd;padding-bottom:4px;margin-bottom:6px}
  .cred-slip h4{font-size:13px;margin:0 0 6px}
  .cred-slip dl{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;padding:0;margin:0 0 6px}
  .cred-slip dt{margin:0;font-size:9px;text-transform:uppercase;color:#555}
  .cred-slip dd{margin:0;white-space:normal;overflow-wrap:anywhere}
  .cred-slip code{font-size:14px;font-weight:700;letter-spacing:.06em}
  .cred-slip p{font-size:9.5px;color:#333}
}