@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:44px;height:44px;flex:none;object-fit:contain;background:transparent;padding:0;border-radius:0}
.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 .6rem}
.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:44px;height:44px;object-fit:contain;margin-right:6px;background:transparent;padding:0;border-radius:0}
.auth-story .brand-logo{width:48px;height:48px;background:transparent;padding:0}
.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}
}
/* Logo unit */
.unit-cell{display:flex;align-items:center;gap:.65rem}
.unit-logo{width:34px;height:34px;flex:none;border-radius:9px;object-fit:contain;background:var(--surface);border:1px solid var(--line)}
.unit-logo.no-logo{display:grid;box-sizing:border-box;padding:0;place-items:center;background:var(--brand-soft);border-color:transparent;color:var(--teal)}
.unit-logo.no-logo .i{width:16px;height:16px}
.doc-logo{display:block;width:84px;height:84px;object-fit:contain;margin:0 auto 10px}
.logo-row-unit{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:0}
.logo-preview.big{flex:0 0 88px;width:88px;height:88px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--muted);overflow:hidden}
.logo-preview.big img{width:100%;height:100%;object-fit:contain}
.logo-preview.big .i{width:30px;height:30px}
.logo-upload{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;flex:1}
.logo-upload input[type=file]{max-width:340px}
@media print{.doc-logo{width:70px;height:70px}}

/* ===== PAJSK: penilaian & borang rumusan ===== */
.year-picker{display:flex;justify-content:flex-end;margin:-6px 0 14px}.year-picker label{display:flex;align-items:center;gap:.5rem;font-size:.84rem;font-weight:600;color:var(--muted)}.year-picker select{width:auto;min-width:96px}
.pajsk-table th small{display:block;font-weight:500;color:var(--muted);font-size:.68rem}.pajsk-table td,.pajsk-table th{white-space:nowrap}.pajsk-table td:first-child{white-space:normal;min-width:180px}.pajsk-table tr.pending td{color:var(--muted)}.pajsk-table tr.pending td:first-child strong{color:var(--fg-dark)}
.block{display:block}
.grade{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 6px;border-radius:7px;font-weight:800;font-size:.8rem;background:var(--surface-alt);color:var(--fg-dark)}
.grade-A{background:color-mix(in srgb,#16a34a 16%,var(--surface));color:#15803d}.grade-B{background:color-mix(in srgb,#2563eb 14%,var(--surface));color:#1d4ed8}.grade-C{background:color-mix(in srgb,#ca8a04 18%,var(--surface));color:#a16207}.grade-D,.grade-E{background:color-mix(in srgb,#dc2626 14%,var(--surface));color:#b91c1c}
.pajsk-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.pajsk-form fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 16px;margin:0 0 14px}.pajsk-form legend{padding:0 6px;font:700 .95rem var(--fon-tajuk);color:var(--fg-dark)}.pajsk-form legend small{font:500 .74rem var(--fon-teks);color:var(--muted);margin-left:4px}
.pajsk-form .form-grid.two{padding:0;margin-bottom:6px}.pajsk-form p.muted{margin:0 0 10px;font-size:.85rem}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}.radio-list{display:grid;gap:6px}
label.check{display:flex;align-items:flex-start;gap:8px;font-size:.86rem;line-height:1.35;cursor:pointer}label.check input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--primary)}label.check small{color:var(--muted)}
.check-grid.full-limit label.check:has(input:not(:checked)){opacity:.45}
.ach-ref{margin:8px 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-alt);font-size:.82rem}.ach-ref ul{margin:6px 0 0;padding-left:18px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.pajsk-summary{position:sticky;top:84px}.pajsk-summary h3{margin:0 0 10px}.pajsk-summary p{font-size:.78rem;margin:12px 0 0}
.score-table{width:100%;border-collapse:collapse;font-size:.88rem}.score-table th{text-align:left;font-weight:500;color:var(--muted);padding:7px 0;border-bottom:1px solid var(--line)}.score-table td{text-align:right;padding:7px 0 7px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}.score-table td.muted{width:52px;color:var(--muted)}.score-table tfoot th{color:var(--fg-dark);font-weight:700}.score-table tfoot td{font-weight:800}.score-table tfoot tr:last-child td{text-align:left}
.sync-form{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.pajsk-unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:0 1.25rem 1.25rem}
.pajsk-unit-card{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}.pajsk-unit-card:hover{border-color:var(--primary);transform:translateY(-1px)}.pajsk-unit-card span.muted{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.pajsk-unit-card strong{font-size:.95rem}.pajsk-unit-card small{color:var(--muted)}
/* Borang rumusan (paparan cetak) */
.rumus-page .document-title{margin-bottom:6px}.rumus{font-size:13px;color:#111}.rumus-code{text-align:right;font-weight:700;font-style:italic;margin:0}.rumus-title{text-align:center;font-size:17px;text-transform:uppercase;margin:4px 0;font-family:var(--fon-tajuk)}.rumus-sub{text-align:center;color:#555;margin:0 0 14px;font-size:12px}
.rumus table{width:100%;border-collapse:collapse;margin-bottom:12px}.rumus-info th,.rumus-info td,.rumus-marks th,.rumus-marks td{border:1px solid #555;padding:6px 8px;text-align:left;vertical-align:top}.rumus-info th,.rumus-marks thead th,.rumus-marks th.asp,.rumus-marks tfoot th{background:#eef0f3}.rumus-marks th.asp{width:20%}.rumus-marks .num{text-align:center;width:10%;font-variant-numeric:tabular-nums}.rumus-marks .right{text-align:right}.rumus-marks .big{font-size:16px;font-weight:800}
.rumus .cols{columns:2;column-gap:18px}.rumus .bx{font-family:"DejaVu Sans",system-ui,sans-serif;color:#999}.rumus .bx.on{color:#111}.rumus .att{display:inline-block;margin-right:6px;white-space:nowrap}
.rumus-note{font-size:12px}.rumus-note.warn{color:#b45309}.rumus-sign td{width:50%;text-align:center;padding-top:34px;font-size:12px}
@media(max-width:960px){.pajsk-layout{grid-template-columns:1fr}.pajsk-summary{position:static}}
@media(max-width:560px){.check-grid{grid-template-columns:1fr}.rumus .cols{columns:1}}
@media print{.year-picker{display:none}.rumus-page{border:0;padding:0}}
.rumus table tr:last-child>td,.rumus table tr:last-child>th{border-bottom:1px solid #555}.rumus table td{background:transparent}
.pajsk-unit-card:hover,.pajsk-unit-card:focus-visible{text-decoration:none}

/* ===== Takwim ===== */
.t-aktiviti{--tc:#2563eb}.t-cuti{--tc:#e11d48}.t-peperiksaan{--tc:#d97706}.t-mesyuarat{--tc:#7c3aed}.t-sukan{--tc:#059669}.t-lain{--tc:#64748b}.t-unit{--tc:var(--primary)}
.takwim{overflow:hidden}.takwim-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.takwim-nav{display:flex;align-items:center;gap:8px}.takwim-nav h3{margin:0 6px;min-width:150px;text-align:center;font-size:1.05rem}
.btn.icon-only{padding:0;width:34px;height:34px;justify-content:center}.btn.icon-only .i{margin:0}
.takwim-filter{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);border-radius:99px;font-size:.78rem;font-weight:600;color:var(--muted);text-decoration:none;background:var(--surface)}.chip:hover{text-decoration:none;border-color:var(--line-strong);color:var(--fg-dark)}.chip.on{background:var(--fg-dark);border-color:var(--fg-dark);color:var(--surface)}.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--tc)}
.takwim-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.takwim-dow{padding:9px 10px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);background:var(--surface-alt)}.takwim-dow .short{display:none}
.takwim-day{min-height:112px;padding:6px 6px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}.takwim-day:nth-child(7n+7){border-right:0}
.takwim-day.weekend{background:color-mix(in srgb,var(--surface-alt) 55%,var(--surface))}.takwim-day.out{background:var(--surface-alt)}.takwim-day.out .num{opacity:.4}
.takwim-day .num{font-size:.78rem;font-weight:700;color:var(--fg-dark);width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.takwim-day.today .num{background:var(--primary);color:#fff}
.takwim-day .ev{display:block;font-size:.72rem;line-height:1.35;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--tc) 13%,var(--surface));color:color-mix(in srgb,var(--tc) 75%,#000);border-left:3px solid var(--tc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}.takwim-day .ev:hover{text-decoration:none;background:color-mix(in srgb,var(--tc) 22%,var(--surface))}
.takwim-day .more{font-size:.7rem;color:var(--muted);padding-left:4px}.takwim-day .dots{display:none}
.agenda{list-style:none;margin:0;padding:0}.agenda li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:start;padding:14px 20px;border-top:1px solid var(--line);scroll-margin-top:90px}.agenda li:target{background:color-mix(in srgb,var(--tc) 8%,var(--surface))}
.agenda-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:color-mix(in srgb,var(--tc) 12%,var(--surface));color:color-mix(in srgb,var(--tc) 80%,#000)}.agenda-date strong{font-size:1.15rem;line-height:1}.agenda-date span{font-size:.68rem;font-weight:700;text-transform:uppercase}
.agenda-body h4{margin:4px 0 2px;font-size:.95rem}.agenda-body p{margin:0;font-size:.84rem}.agenda-desc{margin-top:6px!important;color:var(--fg-dark)}
.tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--tc) 80%,#000);background:color-mix(in srgb,var(--tc) 12%,var(--surface));padding:2px 7px;border-radius:5px}
.badge.danger{background:color-mix(in srgb,#dc2626 12%,var(--surface));color:#b91c1c}
.form-grid .time-field[hidden]{display:none}
.import-note{font-size:.8rem;margin:4px 0 0}
.feed-panel .panel-heading.flush{padding:0 0 12px}.copy-row{display:flex;gap:8px;margin:4px 0 14px}.copy-row .copy-field{flex:1;font-family:ui-monospace,monospace;font-size:.8rem}
.feed-steps{margin:0 0 12px;padding-left:20px;font-size:.88rem;line-height:1.7}
@media(max-width:760px){.takwim-dow .full{display:none}.takwim-dow .short{display:inline}.takwim-dow{padding:8px 4px;text-align:center}
 .takwim-day{min-height:58px;padding:4px;align-items:center}.takwim-day .ev,.takwim-day .more{display:none}.takwim-day .dots{display:flex;gap:3px}.takwim-day .dots i{width:6px;height:6px;border-radius:50%;background:var(--tc)}
 .takwim-nav h3{min-width:0}.agenda li{grid-template-columns:46px minmax(0,1fr);padding:12px 14px}.agenda li .row-actions{grid-column:2}.agenda-date{width:44px;height:46px}}
@media print{.takwim-filter,.takwim-nav .btn,.agenda .row-actions{display:none!important}.takwim-day{min-height:90px}}
.import-summary.four{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:700px){.import-summary.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.takwim-preview td{white-space:normal;vertical-align:top}.takwim-preview td:nth-child(3){min-width:220px;max-width:420px}.takwim-preview td:nth-child(2){white-space:nowrap}
a.num{text-decoration:none}a.num:hover{background:color-mix(in srgb,var(--primary) 14%,var(--surface));text-decoration:none}.takwim-day.today a.num:hover{background:var(--primary)}

/* =====================================================================
   LAMAN AWAM (website kokurikulum) — body.site
   ===================================================================== */
.site{background:var(--bg)}
.site .site-wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.site .site-wrap.narrow{width:min(780px,100% - 40px)}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--surface);padding:8px 14px;border-radius:8px}.skip-link:focus{left:12px}
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--dark) 96%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,#fff 8%,transparent)}
.site-header-in{display:flex;align-items:center;gap:22px;min-height:68px}
.site-brand{display:flex;align-items:center;gap:11px;text-decoration:none!important;color:#fff;min-width:0}
.site-brand img{width:42px;height:42px;object-fit:contain;flex:none}
.site-brand span{display:flex;flex-direction:column;min-width:0}.site-brand strong{font:800 1rem/1.15 var(--fon-tajuk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.site-brand small{font-size:.72rem;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.site-mono{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--btn);font:800 1.1rem var(--fon-tajuk)}
.site-nav{display:flex;gap:2px;margin-left:auto}
.site-nav a{color:rgba(255,255,255,.78);text-decoration:none;font-weight:600;font-size:.88rem;padding:8px 12px;border-radius:8px}.site-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.site-nav a[aria-current]{color:#fff;background:rgba(255,255,255,.12)}
.btn.ghost-light{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}.btn.ghost-light:hover{background:rgba(255,255,255,.1);border-color:#fff}
.site-login{flex:none}
.site-menu{display:none;margin-left:auto;position:relative}.site-menu summary{list-style:none;cursor:pointer;color:#fff;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.25)}.site-menu summary::-webkit-details-marker{display:none}
.site-menu nav{position:absolute;right:0;top:50px;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.18);padding:8px;display:flex;flex-direction:column}
.site-menu nav a{padding:11px 14px;border-radius:9px;text-decoration:none;color:var(--fg-dark);font-weight:600}.site-menu nav a[aria-current]{background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)}
/* Hero */
.site-hero{position:relative;overflow:hidden;background:var(--dark);color:#fff;padding:96px 0 34px;isolation:isolate}
.site-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(900px 480px at 85% -10%,color-mix(in srgb,var(--primary) 55%,transparent),transparent 65%),radial-gradient(600px 400px at -10% 110%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%)}
.site-hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 85%)}
.site-hero.has-img::before{background:linear-gradient(100deg,color-mix(in srgb,var(--dark) 94%,transparent) 0%,color-mix(in srgb,var(--dark) 78%,transparent) 48%,color-mix(in srgb,var(--dark) 30%,transparent) 100%)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-in>*{max-width:760px}
.site-hero .hero-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);font-size:.72rem;font-weight:700;letter-spacing:.14em}
.site-hero h1{color:#fff;font:700 clamp(2.4rem,5.4vw,4.4rem)/1.04 var(--fon-hero);margin:22px 0 18px;letter-spacing:-.01em}
.site-hero p{font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.6;color:rgba(255,255,255,.8);max-width:600px;margin:0}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-cta .btn{min-height:48px;padding:.7rem 1.3rem;font-size:.95rem}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:64px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.hero-stats div{padding:20px 18px 6px 0}.hero-stats div+div{padding-left:22px;border-left:1px solid rgba(255,255,255,.1)}
.hero-stats dt{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}.hero-stats dd{margin:6px 0 0;font:800 2rem var(--fon-tajuk);color:#fff}
/* Seksyen */
.site-sec{padding:72px 0}.site-sec.alt{background:color-mix(in srgb,var(--primary) 4%,var(--surface))}
.site-sec.dark{background:var(--dark);color:#fff}.site-sec.dark .eyebrow{color:var(--accent)}.site-sec.dark h2{color:#fff}.site-sec.dark .sec-link{color:#fff}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px}
.sec-head h2{margin:0;font:700 clamp(1.6rem,3vw,2.3rem)/1.15 var(--fon-hero);color:var(--fg-dark)}
.site .eyebrow{color:var(--primary);letter-spacing:.14em}
.sec-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.88rem;color:var(--primary);text-decoration:none;white-space:nowrap}.sec-link:hover{text-decoration:underline}.sec-link .i{width:16px;height:16px}
.site-sec+.site-sec:not(.alt):not(.dark){padding-top:24px}
/* Pengumuman */
.ann-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}.ann-grid.list{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.ann-card{--cc:var(--primary);position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 20px 18px;border-top:4px solid var(--cc);transition:transform .15s,box-shadow .15s}
.ann-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px color-mix(in srgb,var(--dark) 10%,transparent)}
.ann-card.c-kelab{--cc:#2563eb}.ann-card.c-uniform{--cc:#059669}.ann-card.c-sukan{--cc:#d97706}.ann-card.c-pelajar{--cc:#7c3aed}.ann-card.c-umum{--cc:var(--primary)}
.ann-card.pinned{background:color-mix(in srgb,var(--cc) 5%,var(--surface))}.ann-card .pin{color:var(--cc)}
.ann-meta{display:flex;justify-content:space-between;gap:10px;font-size:.74rem;margin-bottom:10px}.ann-meta .aud{font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--cc)}.ann-meta time{color:var(--muted)}
.ann-card h3{margin:0 0 8px;font:700 1.05rem/1.35 var(--fon-tajuk)}.ann-card h3 a{color:var(--fg-dark);text-decoration:none}.ann-card h3 a::after{content:"";position:absolute;inset:0}.ann-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
/* Program */
.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.prog-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none!important;color:inherit;transition:transform .15s,box-shadow .15s}
.prog-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px color-mix(in srgb,var(--dark) 12%,transparent)}
.prog-img{position:relative;aspect-ratio:16/10;background:var(--surface-alt);overflow:hidden}.prog-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.prog-card:hover .prog-img img{transform:scale(1.04)}
.prog-ph{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--pc,var(--primary)),color-mix(in srgb,var(--pc,var(--primary)) 55%,var(--dark)))}.prog-ph .i{width:46px;height:46px;opacity:.85}
.prog-ph.c-kelab{--pc:#2563eb}.prog-ph.c-uniform{--pc:#059669}.prog-ph.c-sukan{--pc:#d97706}
.date-chip{position:absolute;left:14px;top:14px;display:flex;flex-direction:column;align-items:center;min-width:50px;padding:6px 8px;border-radius:12px;background:var(--surface);color:var(--fg-dark);font-size:.68rem;font-weight:800;text-transform:uppercase;box-shadow:0 6px 16px rgba(0,0,0,.18)}.date-chip b{font-size:1.25rem;line-height:1}
.soon{position:absolute;right:12px;top:14px;padding:4px 10px;border-radius:99px;background:var(--accent);color:var(--dark);font-size:.7rem;font-weight:800}
.prog-body{padding:16px 18px 18px}.prog-unit{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}.prog-body h3{margin:6px 0 4px;font:700 1.08rem/1.35 var(--fon-tajuk);color:var(--fg-dark)}.prog-body p{margin:0;font-size:.86rem;color:var(--muted)}
/* Takwim di laman utama */
.cal-split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start}
.up-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.up-list li{display:flex;gap:16px;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.up-date{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border-radius:13px;background:color-mix(in srgb,var(--tc) 12%,var(--surface));color:color-mix(in srgb,var(--tc) 80%,#000);font-size:.68rem;font-weight:800;text-transform:uppercase}.up-date b{font-size:1.3rem;line-height:1}
.up-list h3{margin:4px 0 2px;font:700 .98rem/1.3 var(--fon-tajuk);color:var(--fg-dark)}.up-list p{margin:0;font-size:.84rem;color:var(--muted)}
.cal-cta{position:sticky;top:90px;padding:28px;border-radius:20px;background:var(--dark);color:#fff;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cal-cta>.i{width:34px;height:34px;color:var(--accent)}.cal-cta h3{color:#fff;margin:0;font:700 1.35rem var(--fon-hero)}.cal-cta p{margin:0;color:rgba(255,255,255,.72);font-size:.92rem}.cal-cta .text-link{color:#fff}
/* Galeri & lightbox */
.gal-grid{columns:4 220px;column-gap:14px}
.gal-item{position:relative;display:block;margin:0 0 14px;break-inside:avoid;border-radius:14px;overflow:hidden;background:var(--surface-alt)}
.gal-item img{width:100%;height:auto;display:block;transition:transform .35s,filter .35s}.gal-item:hover img{transform:scale(1.03);filter:brightness(.92)}
.gal-item span{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;font-size:.8rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));opacity:0;transition:opacity .2s}.gal-item:hover span,.gal-item:focus span{opacity:1}
.gal-grid.home{columns:4 200px}
.lightbox{display:none;position:fixed;inset:0;z-index:90;place-items:center;padding:24px}
.lightbox:target{display:grid}
.lb-bg{position:absolute;inset:0;background:rgba(5,10,18,.9)}
.lightbox figure{position:relative;margin:0;max-width:min(1200px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.lightbox img{max-width:100%;max-height:calc(100vh - 110px);border-radius:8px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox figcaption{color:#fff;font-size:.92rem;text-align:center}.lightbox figcaption small{display:block;color:rgba(255,255,255,.6)}
.lb-close,.lb-prev,.lb-next{position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:2rem;line-height:1;text-decoration:none}
.lb-close{top:18px;right:18px;font-size:1.8rem}.lb-prev{left:18px;top:50%;transform:translateY(-50%)}.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.25)}
/* Unit */
.unit-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.unit-col{--uc:var(--primary);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px}
.unit-col.c-kelab,.unit-card.c-kelab,.cat-title.c-kelab,.unit-head.c-kelab{--uc:#2563eb}.unit-col.c-uniform,.unit-card.c-uniform,.cat-title.c-uniform,.unit-head.c-uniform{--uc:#059669}.unit-col.c-sukan,.unit-card.c-sukan,.cat-title.c-sukan,.unit-head.c-sukan{--uc:#d97706}
.unit-col h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:700 1.05rem var(--fon-tajuk);color:var(--fg-dark)}.unit-col h3 .i{color:var(--uc)}.unit-col h3 small{margin-left:auto;color:var(--muted);font-weight:600}
.unit-col ul{list-style:none;margin:0;padding:0}.unit-col li a{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:9px;color:var(--fg-dark);text-decoration:none;font-weight:500;font-size:.92rem}.unit-col li a:hover{background:color-mix(in srgb,var(--uc) 8%,var(--surface))}
.unit-col li img{width:28px;height:28px;object-fit:contain}.u-dot{width:28px;height:28px;flex:none;border-radius:8px;background:color-mix(in srgb,var(--uc) 15%,var(--surface))}
.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-bottom:34px}
.unit-card{--uc:var(--primary);display:flex;gap:14px;align-items:center;padding:16px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--uc);border-radius:14px;text-decoration:none!important;color:inherit}
.unit-card:hover{box-shadow:0 10px 24px color-mix(in srgb,var(--dark) 9%,transparent)}
.unit-card img{width:54px;height:54px;object-fit:contain;flex:none}.u-mono{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:color-mix(in srgb,var(--uc) 14%,var(--surface));color:var(--uc);font:800 1.3rem var(--fon-tajuk)}
.unit-card strong{display:block;color:var(--fg-dark)}.unit-card small{display:block;color:var(--muted);font-size:.8rem}
.cat-title{display:flex;align-items:center;gap:10px;font:700 1.35rem var(--fon-hero)!important}.cat-title .i{color:var(--uc)}
.unit-head .site-wrap{display:flex;gap:28px;align-items:center}.unit-big-logo{width:120px;height:120px;object-fit:contain;flex:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,.3))}
.unit-facts{display:flex;flex-wrap:wrap;gap:10px 30px;margin:14px 0 0}.unit-facts dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6)}.unit-facts dd{margin:2px 0 0;font-weight:600}
/* Kepala halaman dalaman */
.site-pagehead{background:var(--dark);color:#fff;padding:56px 0 46px;position:relative;overflow:hidden;isolation:isolate}
.site-pagehead::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(700px 360px at 90% 0%,color-mix(in srgb,var(--uc,var(--primary)) 45%,transparent),transparent 65%)}
.site-pagehead .eyebrow{color:var(--accent)!important}.site-pagehead h1{color:#fff;margin:6px 0 10px;font:700 clamp(2rem,4.2vw,3.1rem)/1.1 var(--fon-hero)}.site-pagehead p{margin:0;color:rgba(255,255,255,.75);max-width:680px}
.site-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.site-chips a{padding:7px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85);text-decoration:none;font-size:.84rem;font-weight:600}.site-chips a:hover{background:rgba(255,255,255,.1)}.site-chips a[aria-current]{background:#fff;color:var(--dark);border-color:#fff}
.head-actions{margin-top:20px!important}
.prose{font-size:1.04rem;line-height:1.75;color:var(--fg-dark)}.prose h2{font:700 1.3rem var(--fon-tajuk);margin:28px 0 8px}.prose a{color:var(--primary)}
.site h2.sub{font:700 1.4rem var(--fon-hero);color:var(--fg-dark);margin:44px 0 18px}
.actions-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:34px}
.site-pager{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:34px;font-weight:600}.site-pager a{color:var(--primary)}
.site-empty{text-align:center;padding:60px 20px;border:1.5px dashed var(--line);border-radius:20px;color:var(--muted)}.site-empty .i{width:38px;height:38px;color:var(--primary)}.site-empty h2{font:700 1.3rem var(--fon-tajuk);color:var(--fg-dark);margin:10px 0 6px}.site-empty p{margin:0}
.about p{font:500 clamp(1.1rem,2vw,1.4rem)/1.65 var(--fon-hero);color:var(--fg-dark);max-width:880px;margin:8px 0 0}
.site-cal{background:var(--surface);border:1px solid var(--line);border-radius:18px}
.site-agenda{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}.site-agenda li:first-child{border-top:0}
/* Kaki */
.site-footer{background:color-mix(in srgb,var(--dark) 92%,#000);color:rgba(255,255,255,.72);padding:56px 0 0;font-size:.9rem}
.site-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:40px}.site-footer h4{color:#fff;font:700 .78rem var(--fon-teks);letter-spacing:.12em;text-transform:uppercase;margin:6px 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.site-footer a{color:rgba(255,255,255,.85);text-decoration:none}.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer p{max-width:380px;line-height:1.6}.site-footer .social{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.site-footer .social a{padding:6px 12px;border:1px solid rgba(255,255,255,.2);border-radius:99px;font-size:.8rem}
.site-foot-bottom{display:flex;justify-content:space-between;gap:12px;padding:20px 0 26px;margin-top:40px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem}
.auth-back{display:block;margin-top:18px;text-align:center;font-size:.86rem;color:var(--muted)}
/* Pengurusan galeri (dalam sistem) */
.gallery-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding:0 1.25rem 1.25rem}
.gallery-admin figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}.gallery-admin img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gallery-admin figure.hidden-photo img{opacity:.45}.gallery-admin figcaption{padding:10px;display:grid;gap:6px;font-size:.8rem}
.photo-edit{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}.photo-edit input[name=caption]{grid-column:1/-1;min-height:34px;font-size:.82rem}
.consent-note{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,var(--surface))}.consent-note .i{flex:none;width:16px;height:16px;margin-top:2px}
.hero-preview{display:flex;gap:14px;align-items:flex-end}.hero-preview img{max-width:320px;border-radius:10px;border:1px solid var(--line)}
@media(max-width:1020px){.site-nav{display:none}.site-menu{display:block}.site-login{display:none}.cal-split{grid-template-columns:1fr}.cal-cta{position:static}.unit-cols{grid-template-columns:1fr}.site-foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.site-hero{padding:64px 0 24px}.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-stats div:nth-child(3){padding-left:0;border-left:0}.hero-stats dd{font-size:1.6rem}
 .site-sec{padding:52px 0}.sec-head{flex-direction:column;align-items:flex-start}.gal-grid,.gal-grid.home{columns:2 140px;column-gap:10px}.gal-item{margin-bottom:10px}
 .site-foot-grid{grid-template-columns:1fr}.site-brand strong,.site-brand small{max-width:200px}.unit-head .site-wrap{flex-direction:column;align-items:flex-start}.unit-big-logo{width:84px;height:84px}
 .lb-prev,.lb-next{top:auto;bottom:18px;transform:none}}
.site .site-wrap>.sec-head:not(:first-child),.site .site-wrap>div+.sec-head{margin-top:60px}
.unit-facts{padding:0}.unit-facts div{margin:0}

/* ===== Gaya galeri: grid · mozek · karusel · 3D coverflow ===== */
.gal-uniform{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.gal-uniform .gal-item,.gal-mosaic .gal-item{margin:0;aspect-ratio:4/3}
.gal-uniform .gal-item img,.gal-mosaic .gal-item img,.gal-carousel .gal-item img,.gal-coverflow .gal-item img{width:100%;height:100%;object-fit:cover}
.gal-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:14px}
.gal-mosaic .gal-item:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal-mosaic .gal-item:first-child span{opacity:1;font-size:1rem;padding:40px 18px 16px}
/* Karusel */
.gal-carousel{position:relative}
.gc-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 14px;scrollbar-width:thin;outline:none}
.gc-track .gal-item{flex:0 0 clamp(250px,38%,520px);margin:0;aspect-ratio:4/3;scroll-snap-align:start}
.gc-track .gal-item span{opacity:1}
.g-nav{position:absolute;top:calc(50% - 30px);z-index:3;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:var(--surface);color:var(--fg-dark);font-size:1.9rem;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.25);transition:transform .15s}
.g-nav:hover{transform:scale(1.08)}.g-prev{left:-12px}.g-next{right:-12px}
.site-sec.dark .g-nav{background:#fff;color:#111}
/* 3D Coverflow (tanpa JS: gelongsor mendatar) */
.gal-coverflow{position:relative}
.cf-stage{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;outline:none}
.cf-stage .gal-item{flex:0 0 clamp(250px,45%,560px);margin:0;aspect-ratio:4/3;scroll-snap-align:center}
.gal-coverflow.is-3d .cf-stage{display:block;position:relative;overflow:visible;height:clamp(240px,34vw,440px);perspective:1400px;padding:0;touch-action:pan-y}
.gal-coverflow.is-3d .gal-item{position:absolute;left:50%;top:0;width:clamp(240px,46%,600px);height:100%;aspect-ratio:auto;margin-left:calc(clamp(240px,46%,600px) / -2);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s,filter .6s;transform-style:preserve-3d;box-shadow:0 26px 50px rgba(0,0,0,.4);will-change:transform}
.gal-coverflow.is-3d .gal-item:not(.active){filter:brightness(.55)}.gal-coverflow.is-3d .gal-item:not(.active) span{opacity:0}
.gal-coverflow.is-3d .gal-item.active span{opacity:1}
.gal-coverflow.is-3d .g-nav{top:calc(50% - 40px)}.gal-coverflow.is-3d .g-prev{left:6px}.gal-coverflow.is-3d .g-next{right:6px}
.cf-caption{min-height:1.4em;margin:18px 0 0;text-align:center;font-weight:600;opacity:.85}
.gal-coverflow:not(.is-3d) .cf-caption{display:none}
@media(prefers-reduced-motion:reduce){.gal-coverflow.is-3d .gal-item,.gc-track{transition:none;scroll-behavior:auto}}
@media(max-width:640px){.gal-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}.gc-track .gal-item{flex-basis:80%}.g-prev{left:4px}.g-next{right:4px}.gal-coverflow.is-3d .gal-item{width:70%;margin-left:-35%}}
/* Pemilih gaya (Tetapan laman) */
.style-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:14px 0 18px}
.style-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;background:var(--surface)}
.style-card input{position:absolute;opacity:0;pointer-events:none}
.style-card:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.style-card:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.style-card strong{font-size:.9rem}.style-card small{color:var(--muted);font-size:.76rem;line-height:1.4}
.mini{position:relative;display:grid;height:76px;border-radius:9px;background:var(--surface-alt);padding:6px;gap:4px;overflow:hidden}
.mini i{display:block;border-radius:4px;background:color-mix(in srgb,var(--primary) 55%,var(--surface))}
.mini i:nth-child(2n){background:color-mix(in srgb,var(--primary) 30%,var(--surface))}.mini i:nth-child(3n){background:color-mix(in srgb,var(--accent) 60%,var(--surface))}
.mini-masonry{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}.mini-masonry i:nth-child(1){grid-row:span 2}.mini-masonry i:nth-child(2){grid-row:span 3}.mini-masonry i:nth-child(3){grid-row:span 1}.mini-masonry i:nth-child(4){grid-row:span 2}.mini-masonry i:nth-child(5){grid-row:span 2}
.mini-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.mini-mosaic{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr)}.mini-mosaic i:first-child{grid-column:span 2;grid-row:span 2}
.mini-carousel{display:flex;align-items:center;gap:5px;padding:10px 0 10px 8px}.mini-carousel i{flex:0 0 42%;height:100%}
.mini-coverflow{display:block;perspective:200px}.mini-coverflow i{position:absolute;top:12px;bottom:12px;width:38%;left:31%}
.mini-coverflow i:nth-child(1){z-index:3}.mini-coverflow i:nth-child(2){transform:translateX(-62%) rotateY(45deg) scale(.85);z-index:2;opacity:.8}.mini-coverflow i:nth-child(3){transform:translateX(62%) rotateY(-45deg) scale(.85);z-index:2;opacity:.8}.mini-coverflow i:nth-child(4),.mini-coverflow i:nth-child(5){display:none}
.narrow-field{max-width:260px}
.gal-mosaic{grid-auto-rows:clamp(130px,14vw,210px)}
.gal-mosaic .gal-item,.gal-mosaic .gal-item:first-child{aspect-ratio:auto;height:100%}
.gal-mosaic.last-span-2 .gal-item:last-child{grid-column:span 2}.gal-mosaic.last-span-3 .gal-item:last-child{grid-column:span 3}.gal-mosaic.last-span-4 .gal-item:last-child{grid-column:span 4}
@media(max-width:640px){.gal-mosaic[class*=last-span] .gal-item:last-child{grid-column:span 2}}
@media(max-width:640px){.gal-mosaic{grid-auto-rows:120px}}

/* ===== Avatar / gambar profil ===== */
.avatar-link{display:inline-flex;border-radius:50%;text-decoration:none!important}.avatar-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
img.avatar{display:block;width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--surface-alt);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}
.avatar-sm{width:32px!important;height:32px!important;min-width:32px;font-size:.8rem!important;flex:none}
.avatar-xl{width:88px!important;height:88px!important;min-width:88px;font-size:2rem!important;flex:none}
span.avatar.avatar-sm,span.avatar.avatar-xl{display:grid;place-items:center;border-radius:50%}
.user-cell{display:flex;align-items:center;gap:10px}
.profile-panel{margin-bottom:18px}.profile-row{display:flex;gap:22px;align-items:flex-start}.profile-row h3{margin:4px 0 6px}.profile-row p{margin:0 0 12px}
.profile-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}.profile-form input[type=file]{max-width:340px}
.avatar-mod{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
@media(max-width:560px){.profile-row{flex-direction:column}}

/* ===== Akaun: daftar, lupa kata laluan, captcha ===== */
.captcha-box .field{gap:.45rem}
.captcha-img{display:flex;align-items:center;gap:8px}.captcha-img img{border-radius:10px;border:1px solid var(--line);background:#f3f4f6;max-width:100%;height:auto}
.captcha-refresh{min-width:42px;font-size:1.1rem}
.captcha-box input[name=captcha]{text-transform:uppercase;letter-spacing:.3em;font-weight:700}
.hp-field{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.account-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0 0;font-size:.88rem}.account-links a{color:var(--primary);font-weight:600}.account-links span{color:var(--muted)}
.account-done{text-align:center;padding:10px 0}.account-done>.i{width:46px;height:46px;padding:10px;border-radius:50%;background:var(--ok-soft);color:var(--ok-teks)}
.account-done.bad>.i{background:color-mix(in srgb,#dc2626 12%,var(--surface));color:#b91c1c}.account-done h3{margin:12px 0 6px}.account-done p{color:var(--muted);margin:0 0 18px}
.reset-for{margin:0}
.pending-panel{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.smtp-fields{padding:0!important;grid-column:1/-1}.smtp-fields[hidden]{display:none}
.captcha-img .captcha-refresh{width:46px!important;min-height:46px;flex:none;padding:0}
.captcha-box input[name=captcha]::placeholder{letter-spacing:normal;text-transform:none;font-weight:400}
.settings-form .radio-list{margin-bottom:14px}

/* ===== Editor WYSIWYG ===== */
.rte{border:1.5px solid var(--line);border-radius:var(--r-sm,10px);background:var(--surface);overflow:hidden;font-weight:400}
.rte:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.rte-bar{display:flex;flex-wrap:wrap;gap:2px;align-items:center;padding:6px;border-bottom:1px solid var(--line);background:var(--surface-alt);position:sticky;top:0;z-index:1}
.rte-bar button{min-width:34px;height:32px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:var(--fg-dark);font:600 .9rem var(--fon-teks);cursor:pointer;line-height:1}
.rte-bar button:hover{background:color-mix(in srgb,var(--primary) 10%,var(--surface))}
.rte-bar button[aria-pressed=true]{background:color-mix(in srgb,var(--primary) 16%,var(--surface));color:var(--primary)}
.rte-bar button:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.rte-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.rte-area{min-height:170px;max-height:520px;overflow:auto;padding:12px 14px;font-size:.95rem;line-height:1.65;color:var(--ink);outline:none}
.rte-area{position:relative}.rte.is-empty .rte-area::before{content:attr(data-placeholder);color:var(--muted);position:absolute;left:14px;top:12px;pointer-events:none}
.rte-area p{margin:0 0 .6em}.rte-area h3{font-size:1.08rem;margin:.8em 0 .4em}.rte-area h4{font-size:1rem;margin:.7em 0 .3em}
.rte-area ul,.rte-area ol{margin:.3em 0 .7em;padding-left:1.4em}.rte-area blockquote{margin:.6em 0;padding:.3em .9em;border-left:3px solid var(--primary);color:var(--muted);font-style:italic}
.rte-area a{color:var(--primary);text-decoration:underline}
.rte-foot{padding:4px 12px 6px;font-size:.74rem;color:var(--muted);text-align:right;border-top:1px solid var(--line)}.rte-foot.over{color:#b91c1c;font-weight:700}
.rich-body p{margin:0 0 .7em}.rich-body ul,.rich-body ol{margin:.3em 0 .8em;padding-left:1.4em}.rich-body h3{font-size:1.05rem;margin:.9em 0 .4em}.rich-body h4{font-size:1rem;margin:.8em 0 .3em}
.rich-body blockquote{margin:.6em 0;padding:.3em .9em;border-left:3px solid var(--primary);font-style:italic;color:var(--muted)}.rich-body a{color:var(--primary)}

/* ===== Combobox guru ===== */
.combo{position:relative}
.combo input{width:100%;padding-right:118px}
.combo-tag{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px;pointer-events:none}
.combo-tag:empty{display:none}
.combo-tag.ok{background:color-mix(in srgb,#16a34a 14%,var(--surface));color:#15803d}
.combo-tag.new{background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)}
.combo-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.14);max-height:280px;overflow:auto}
.combo-list li{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:7px;cursor:pointer;font-weight:400}
.combo-list li strong{font-weight:600;color:var(--ink);font-size:.92rem}
.combo-list li small{color:var(--muted);font-size:.76rem}
.combo-list li:hover,.combo-list li[aria-selected=true]{background:color-mix(in srgb,var(--primary) 10%,var(--surface))}
.combo-list .combo-new{color:var(--primary);font-weight:600;border-top:1px solid var(--line);margin-top:2px}
.combo-list .combo-empty{color:var(--muted);cursor:default}
.combo-hint{display:block;margin-top:4px}

/* ===== Tambah unit pukal ===== */
.unit-bulk .bulk-step{padding:16px 0;border-top:1px solid var(--line)}
.unit-bulk .bulk-step:first-of-type{border-top:0;padding-top:4px}
.unit-bulk h4{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:1rem}
.unit-bulk h4 span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:.8rem}
.unit-bulk textarea{width:100%;font-family:inherit}
.bulk-tools{display:flex;gap:8px;align-items:center;margin:8px 0}
.btn.small{padding:6px 12px;font-size:.82rem;min-height:0}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.preset-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-weight:500;font-size:.9rem;background:var(--surface)}
.preset-item:hover{border-color:var(--primary)}
.preset-item:has(input:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.preset-item input{width:16px;height:16px;accent-color:var(--primary);margin:0}
.bulk-file{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bulk-file input[type=file]{flex:1 1 260px}
.unit-bulk .form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:14px;border-top:1px solid var(--line)}

/* ===== Tambah ahli ikut kelas ===== */
.member-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:14px}
.member-summary{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.member-search{flex:1 1 220px;min-width:0}
.member-list{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px;max-height:560px;overflow:auto}
.member-list li label{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:var(--surface);font-weight:500}
.member-list li label:hover{border-color:var(--primary)}
.member-list li label:has(input:checked:not(:disabled)){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.member-list input{width:16px;height:16px;accent-color:var(--primary);margin:0;flex:none}
.member-list .m-name{display:flex;flex-direction:column;flex:1;min-width:0;font-size:.9rem}
.member-list .m-name small{color:var(--muted);font-size:.75rem;font-weight:400}
.member-list .m-state{font-size:.72rem;text-align:right;color:var(--muted);max-width:45%}
.member-list li.is-here label{background:color-mix(in srgb,#16a34a 7%,var(--surface));cursor:default}
.member-list li.is-here .m-state{color:#15803d;font-weight:700}
.member-list li.is-other label{opacity:.75}
.member-list li.is-other .m-state{color:#b45309;font-weight:600}
.member-list li[hidden]{display:none}
.member-actions{display:flex;flex-wrap:wrap;align-items:end;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.member-actions .field{flex:0 1 260px;margin:0}
.member-actions .btn{margin-left:auto}
.unit-bulk>form,.member-bulk>form,.member-bulk>p{padding:0 1.25rem 1.25rem}
.member-bulk>.member-filter{padding-bottom:0}
.bulk-tools{flex-wrap:wrap}
@media (max-width:760px){.unit-bulk>form,.member-bulk>form,.member-bulk>p{padding:0 1rem 1rem}.member-search{flex-basis:100%}.member-actions .btn{margin-left:0;width:100%}.member-list .m-state{max-width:40%}}
.editor-panel,#keahlian{overflow:visible}
/* ===== Edit jawatan dalam senarai ===== */
.combo.compact input{padding-right:12px}
.combo.compact .combo-tag{display:none}
.pos-edit{display:flex;gap:6px;align-items:center;min-width:220px}
.pos-edit .combo{flex:1;min-width:150px}
.pos-edit input[name=position]{padding:7px 10px;font-size:.9rem;border-color:transparent;background:transparent}
.pos-edit input[name=position]:hover{border-color:var(--line);background:var(--surface)}
.pos-edit input[name=position]:focus{border-color:var(--primary);background:var(--surface)}
.pos-edit.js button{display:none}
.pos-edit.js.changed button{display:inline-flex}
.pos-edit.js.changed input[name=position]{border-color:var(--primary);background:var(--surface)}
.combo-list{position:fixed;z-index:1000;right:auto}

/* ===== Halaman ralat ===== */
.error-body{min-height:100vh;margin:0;background:
  radial-gradient(900px 480px at 85% -10%,color-mix(in srgb,var(--primary) 14%,transparent),transparent 65%),
  radial-gradient(700px 420px at -10% 110%,color-mix(in srgb,var(--pastel-lilac) 12%,transparent),transparent 60%),
  var(--bg);color:var(--ink);font-family:var(--fon-teks)}
.error-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:32px 16px;box-sizing:border-box}
.error-top .brand{color:var(--ink);text-decoration:none}
.error-top .brand-name,.error-top .brand span{color:var(--ink)}
.error-card{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow),0 30px 60px -30px color-mix(in srgb,var(--dark) 30%,transparent);padding:38px 34px 30px;text-align:center;box-sizing:border-box;position:relative;overflow:hidden}
.error-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--primary),var(--accent))}
.error-visual{position:relative;display:grid;place-items:center;margin:4px auto 18px;height:132px}
.error-code{font-family:var(--fon-tajuk);font-weight:800;font-size:112px;line-height:1;letter-spacing:-.04em;color:transparent;background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 30%,var(--surface)),color-mix(in srgb,var(--primary) 8%,var(--surface)));-webkit-background-clip:text;background-clip:text;user-select:none}
.error-icon{position:absolute;display:grid;place-items:center;width:66px;height:66px;border-radius:20px;background:var(--surface);color:var(--primary);box-shadow:0 10px 26px -8px color-mix(in srgb,var(--primary) 45%,transparent),0 0 0 6px color-mix(in srgb,var(--primary) 10%,transparent)}
.error-icon svg{width:32px;height:32px}
.error-card .eyebrow{display:inline-block;margin-bottom:6px}
.error-card h1{font-family:var(--fon-tajuk);font-size:1.6rem;line-height:1.25;margin:0 0 10px;color:var(--fg-dark)}
.error-text{color:var(--muted);margin:0 auto 12px;max-width:40ch;line-height:1.6}
.error-detail{margin:14px auto 4px;padding:11px 14px;border-radius:12px;background:var(--brand-soft);color:var(--ink);font-size:.92rem;line-height:1.5;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--surface))}
.error-extra{text-align:left;margin-top:12px}
.error-extra pre{white-space:pre-wrap;font-size:12px;max-height:220px;overflow:auto}
.error-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.error-ref{margin:20px 0 0;font-size:.8rem;color:var(--muted)}
.error-ref code{font-size:.8rem;padding:1px 6px;border-radius:6px;background:var(--surface-alt);border:1px solid var(--line)}
.error-foot{font-size:.8rem;color:var(--muted);text-align:center}
@media (max-width:520px){.error-card{padding:30px 20px 24px;border-radius:18px}.error-code{font-size:88px}.error-visual{height:108px}.error-actions .btn{flex:1 1 100%}}

/* ---------- Pembaikan mudah alih: halaman tidak lagi "bergerak" ---------- */
/* 1. Elemen .sr-only (position:absolute) dalam jadual terlepas keluar dari .table-wrap
      dan melebarkan seluruh halaman (cth. Kelab/Uniform/Sukan → 767px pada telefon). */
.sr-only{top:0;left:0}
.table-wrap{position:relative;max-width:100%;-webkit-overflow-scrolling:touch}
/* 2. Dokumen cetak (Borang PAJSK, Dokumen Unit, Laporan PAJSK murid) ada jadual lebar A4.
      Pada skrin kecil, biar jadual itu diskrol dalam kad dokumen, bukan seluruh halaman. Cetakan tidak terjejas. */
@media screen and (max-width:760px){.document-page{overflow-x:auto;-webkit-overflow-scrolling:touch}}
/* 2b. Kad statistik dua lajur tidak boleh melebihi skrin kecil (320px). */
.stat-card{min-width:0;overflow-wrap:anywhere}
@media(max-width:640px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:340px){.stat-card{padding:.75rem}.stat-top{gap:.4rem}.stat-icon{flex-shrink:0}}
/* 3. Jaring keselamatan: tiada skrol mendatar pada paras halaman (clip tidak merosakkan position:sticky). */
html,body{overflow-x:clip}
/* 4. iPhone/iPad auto-zoom bila menekan medan bertulisan < 16px, menyebabkan halaman beralih.
      Hanya untuk peranti iOS supaya paparan desktop/Android kekal. */
@supports (-webkit-touch-callout:none){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important}
}

/* ---------- Butang tunjuk/sembunyi kata laluan ---------- */
.pw-wrap{position:relative;display:block;width:100%}
.pw-wrap>input{width:100%;padding-right:2.9rem}
.pw-toggle{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:calc(var(--r-sm) - 2px);background:transparent;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pw-toggle:hover{color:var(--ink);background:color-mix(in srgb,var(--muted) 12%,transparent)}
.pw-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:1px;color:var(--ink)}
.pw-toggle[aria-pressed=true]{color:var(--primary)}
.pw-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pw-toggle svg.pw-hidden{display:none}
input::-ms-reveal,input::-ms-clear{display:none}
@media print{.pw-toggle{display:none}}

/* ---------- Takwim (admin): klik mana-mana ruang petak hari untuk tambah acara ---------- */
.takwim-day.can-add{position:relative;cursor:pointer;transition:background-color .12s}
.takwim-day.can-add a.num::after{content:'';position:absolute;inset:0;z-index:0}
.takwim-day.can-add .ev,.takwim-day.can-add .more{position:relative;z-index:1}
.takwim-day.can-add::before{content:'+';position:absolute;top:5px;right:7px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--surface));opacity:0;transition:opacity .12s;pointer-events:none}
.takwim-day.can-add:hover{background:color-mix(in srgb,var(--primary) 5%,var(--surface))}
.takwim-day.can-add:hover::before,.takwim-day.can-add:focus-within::before{opacity:1}
.takwim-day.can-add:has(a.num:focus-visible){outline:2px solid var(--primary);outline-offset:-2px}
.takwim-day.can-add a.num:focus-visible{outline:none}
@media(max-width:760px){.takwim-day.can-add::before{display:none}.takwim-day.can-add:active{background:color-mix(in srgb,var(--primary) 10%,var(--surface))}}
#borang-acara{scroll-margin-top:84px}
@media print{.takwim-day.can-add::before{display:none}}

/* ---------- Mod demo ---------- */
.demo-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem;margin:0 0 1rem;padding:.6rem .9rem;border:1px dashed color-mix(in srgb,var(--primary) 55%,var(--line));border-radius:var(--r-sm);background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--ink);font-size:.82rem;line-height:1.45}
.demo-banner strong{display:inline-flex;align-items:center;padding:.1rem .55rem;border-radius:999px;background:var(--primary);color:#fff;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
body.site>.demo-banner{margin:0;border-radius:0;border-width:0 0 1px;justify-content:center;text-align:center}
.demo-accounts{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.demo-accounts h3{margin:0;font-size:.95rem}
.demo-accounts>p{margin:.15rem 0 .7rem;font-size:.8rem}
.demo-accounts ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.demo-fill{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .7rem;align-items:center;width:100%;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:border-color .15s,background-color .15s}
.demo-fill:hover,.demo-fill[aria-pressed=true]{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
.demo-fill:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.demo-role{grid-row:span 2;align-self:start;padding:.2rem .55rem;border-radius:999px;font-size:.7rem;font-weight:700;background:color-mix(in srgb,var(--primary) 14%,var(--surface));color:var(--primary)}
.demo-role.r-guru{background:color-mix(in srgb,#0f766e 14%,var(--surface));color:#0f766e}
.demo-role.r-pembaca{background:color-mix(in srgb,#475569 14%,var(--surface));color:#475569}
.demo-cred{display:flex;flex-wrap:wrap;gap:.25rem .6rem;min-width:0}
.demo-cred code{font-size:.78rem;overflow-wrap:anywhere;background:var(--surface-alt);padding:1px 6px;border-radius:6px}
.demo-fill small{color:var(--muted);font-size:.74rem;line-height:1.35}
.demo-file-note{display:block;margin-top:.3rem;color:var(--muted);font-size:.76rem;font-weight:500}
input[type=file]:disabled{opacity:.55;cursor:not-allowed}
.install-demo .notice{margin:.9rem 0}
@media print{.demo-banner{display:none}}

/* ---------- Versi & Perubahan ---------- */
.app-version{display:inline-flex;align-items:center;gap:.4rem;margin-left:.5rem;padding:.12rem .55rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.74rem;font-weight:600;text-decoration:none;white-space:nowrap}
.app-version:hover{color:var(--primary);border-color:var(--primary);text-decoration:none}
.app-version-new{padding:.05rem .4rem;border-radius:999px;background:var(--primary);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.changelog{display:grid;gap:0}
.cl-entry{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.cl-entry:first-child{padding-top:0}.cl-entry:last-child{border-bottom:0;padding-bottom:0}
.cl-entry header{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin-bottom:.5rem}
.cl-entry h3{margin:0;font-size:1.05rem}
.cl-entry time{font-size:.8rem}
.cl-entry ul{margin:0;padding-left:1.15rem;display:grid;gap:.35rem;line-height:1.5}
.cl-entry:not(.current) ul{color:var(--muted)}
@media(max-width:640px){.app-version{margin-left:0;margin-top:.3rem}}
@media print{.app-version-new{display:none}}

/* ---------- Carta organisasi (SVG) ---------- */
.org-svg{margin:6px auto 0}
.org-svg svg{display:block;width:100%;height:auto;margin:0 auto}
.document-page.is-landscape{max-width:1240px}
.org-designer .org-form{padding-top:0}
.org-designer .is-hidden{display:none}
@media screen and (max-width:760px){.org-svg.org-potret svg{min-width:560px}.org-svg.org-landskap svg{min-width:760px}}
@page orgland{size:A4 landscape;margin:10mm}
@media print{
 .document-page.is-landscape{page:orgland}
 .org-svg svg{width:auto;max-width:100%;max-height:200mm}
 .document-page.is-landscape .org-svg svg{max-height:118mm}
}

/* ---------- Guru penasihat & semakan penempatan ---------- */
.badge-lead{display:inline-block;margin-left:.3rem;padding:.08rem .45rem;border-radius:999px;background:color-mix(in srgb,var(--primary) 14%,var(--surface));color:var(--primary);font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle}
button.as-link{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.advisor-warn{list-style:none;margin:0 0 .8rem;padding:0 1.25rem;display:grid;gap:.35rem}
.advisor-warn li{padding:.45rem .7rem;border-radius:var(--r-sm);font-size:.82rem;border-left:3px solid}
.advisor-warn .w-bad{background:color-mix(in srgb,#dc2626 9%,var(--surface));border-color:#dc2626}
.advisor-warn .w-warn{background:color-mix(in srgb,#d97706 10%,var(--surface));border-color:#d97706}
.advisor-warn .w-info{background:var(--surface-alt);border-color:var(--line-strong)}
.place-tabs{margin:0 0 1rem}
.place-stats .stat-card strong{font-size:1.6rem}
.ok-text{color:color-mix(in srgb,#16a34a 85%,var(--ink))}.warn-text{color:color-mix(in srgb,#d97706 85%,var(--ink))}
.block{display:block}
.place-table td{vertical-align:top}
.place-unit{display:block;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35}
.place-unit:hover{color:var(--primary);text-decoration:underline}
.place-none{color:var(--muted)}
.place-over{background:color-mix(in srgb,#dc2626 7%,transparent)}
.place-badge{display:inline-block;white-space:nowrap;padding:.22rem .6rem;border-radius:999px;font-size:.74rem;font-weight:700}
.place-badge.is-ok{background:color-mix(in srgb,#16a34a 16%,var(--surface));color:color-mix(in srgb,#15803d 85%,var(--ink));border:1px solid color-mix(in srgb,#16a34a 45%,var(--surface))}
.place-badge.is-short{background:color-mix(in srgb,#f59e0b 16%,var(--surface));color:color-mix(in srgb,#b45309 85%,var(--ink));border:1px solid color-mix(in srgb,#f59e0b 45%,var(--surface))}
.place-badge.is-over{background:color-mix(in srgb,#dc2626 14%,var(--surface));color:color-mix(in srgb,#b91c1c 85%,var(--ink));border:1px solid color-mix(in srgb,#dc2626 40%,var(--surface))}
/* Takwim: tarikh yang telah lepas (tidak boleh tambah acara dari petak) */
.takwim-day.past .num{opacity:.5}
.takwim-day.out.past .num{opacity:.3}

/* ---------- Statistik ---------- */
.st-row{margin-top:0}
.st-tile strong span{font-size:.55em;margin-left:2px}
.st-tile.tone-ok strong{color:color-mix(in srgb,#16a34a 85%,var(--ink))}
.st-tile.tone-warn strong{color:color-mix(in srgb,#d97706 85%,var(--ink))}
.st-tile.tone-bad strong{color:color-mix(in srgb,#dc2626 85%,var(--ink))}
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:.25rem}
.st-grid .panel{margin:0}
.st-grid h3{margin:0}
.st-sub{margin:.2rem 0 .9rem;font-size:.82rem}
.st-h4{margin:1.1rem 0 .5rem;font-size:.82rem;color:var(--muted);font-weight:700}
.stat-svg{display:block;width:100%;height:auto;overflow:visible}
.stat-svg .sv-label{fill:var(--ink);font-size:13.5px;font-family:inherit}
.stat-svg .sv-label.sm{font-size:11px;fill:var(--muted)}
.stat-svg .sv-value{fill:var(--ink);font-size:13.5px;font-weight:700;font-family:inherit}
.stat-svg .sv-track{fill:color-mix(in srgb,var(--line) 70%,transparent)}
.stat-svg .sv-grid{stroke:var(--line);stroke-width:1}
.stat-svg g:hover rect:not(.sv-track){opacity:.85}
.stat-cols{max-width:520px}
@media(max-width:640px){.stat-svg .sv-label,.stat-svg .sv-value{font-size:15px}}
.stat-legend{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-size:.8rem}
.stat-legend li{display:inline-flex;align-items:center;gap:.4rem}
.stat-legend .sw{width:10px;height:10px;flex:none}
.stat-legend strong{font-weight:700}
.stat-legend small{color:var(--muted)}
.st-checks{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.35rem;font-size:.82rem}
.st-checks li{padding-left:1.4rem;position:relative}
.st-checks li::before{position:absolute;left:0;top:0;font-weight:700}
.st-checks li.ok::before{content:'✓';color:#15803d}
.st-checks li.warn::before{content:'!';color:#b45309}
.st-checks li.bad::before{content:'✕';color:#dc2626}
.st-more{margin:.8rem 0 0;font-size:.82rem}
@media(max-width:900px){.st-grid{grid-template-columns:1fr}}
@media print{.st-grid{grid-template-columns:1fr 1fr;gap:8px}.st-grid .panel{break-inside:avoid;border:1px solid #ccc}}
/* Carta organisasi di laman awam */
.site-org{max-width:820px;margin:0 auto 2.5rem;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;overflow-x:auto}
.site-org svg{display:block;width:100%;height:auto;min-width:520px}
.org-public-note{margin:-.3rem 0 0;font-size:.78rem}