@font-face{font-family:Caveat;src:url("fon/Caveat.ttf") format("truetype");font-weight:400 700;font-display:swap}
/* TuitionOne — sistem reka bentuk web/app. Token warna dalam token.css (dijana dari ui_kit.py / .ai).
   Aras lebar (sama dengan responsif.py): L ≥1100 desktop · M ≥860 laptop/tablet landskap · P ≥600 tablet potret · S <600 mobile/app */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--laman);color:var(--teks);font-family:Inter,"Helvetica Neue",Helvetica,Arial,"Noto Sans Tamil","Noto Sans SC",sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100dvh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700}
p{margin:0}
[hidden]{display:none!important}
.ikon{width:20px;height:20px;flex:none;color:var(--teks2)}
.ikon-s{width:16px;height:16px}.ikon-l{width:26px;height:26px}
.teks2{color:var(--teks2)}.teks3{color:var(--teks3)}.hijau{color:var(--hijauTeks)}.merah{color:var(--merahTeks)}.kuning{color:var(--kuningTeks)}.biru{color:var(--biru)}
.kecil{font-size:12px}.kecil2{font-size:11px}.tebal{font-weight:700}.sederhana{font-weight:600}.tengah{text-align:center}.kanan{text-align:end}
.mono{font-family:Menlo,Consolas,monospace;font-size:12px}
.baris-f{display:flex;align-items:center;gap:10px}.antara{justify-content:space-between}.bungkus{flex-wrap:wrap}.tumbuh{flex:1;min-width:0}
.tegak{display:flex;flex-direction:column;gap:12px}
.potong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.sembunyi-s{display:none}
@media (min-width:600px){.sembunyi-s{display:initial}.sembunyi-l{display:none}}

/* ── cangkerang ── */
#app{min-height:100dvh}
.cangkerang{min-height:100dvh;display:flex;flex-direction:column}
.sisi{display:none}
.kepala{position:sticky;top:0;z-index:20;background:var(--permukaan);border-bottom:1px solid var(--garis);min-height:60px;display:flex;align-items:center;gap:12px;padding:10px 16px}
.kepala .tajuk{font-size:17px;font-weight:700}
.kepala .sub{font-size:11.5px;color:var(--teks3);margin-top:1px}
.kepala .balik{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;margin-left:-8px}
.kepala .balik .ikon{color:var(--teks)}
.kepala .aksi{margin-left:auto;display:flex;align-items:center;gap:8px}
.kepala.gelap{background:var(--bar);color:var(--barTeks);border-color:transparent}.kepala.gelap .sub{color:var(--barTeks2)}.kepala.gelap .ikon{color:var(--barTeks)}
.loceng{position:relative;width:36px;height:36px;display:grid;place-items:center;border-radius:50%}
.loceng .titik{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--merah);border:2px solid var(--permukaan)}
.isi{flex:1;padding:14px 16px 90px;width:100%}
.isi.tanpa-tab{padding-bottom:28px}
.bekas{width:100%;max-width:1200px;margin:0 auto}
.tab-bawah{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--permukaan);border-top:1px solid var(--garis);display:flex;height:64px;padding-bottom:env(safe-area-inset-bottom)}
.tab-bawah a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9.5px;font-weight:500;color:var(--teks3)}
.tab-bawah a .ikon{color:var(--teks3)}
.tab-bawah a.aktif{color:var(--hijauTeks);font-weight:700}.tab-bawah a.aktif .ikon{color:var(--hijauTeks)}
.nav-atas{display:none}
/* menu sisi (tutor/solo/pemilik/adminsistem) */
@media (min-width:700px){
  .cangkerang.ada-sisi{flex-direction:row}
  .cangkerang.ada-sisi .sisi{display:flex;flex-direction:column;flex:none;width:72px;background:var(--bar);color:var(--barTeks);position:sticky;top:0;height:100dvh;padding:14px 0}
  .cangkerang.ada-sisi > .utama{flex:1;min-width:0;display:flex;flex-direction:column}
  .sisi .logo{padding:0 20px 18px}.sisi .logo .wordmark{display:none}
  .sisi nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;flex:1;overflow:auto}
  .sisi nav a{display:flex;align-items:center;gap:12px;height:38px;border-radius:9px;padding:0 12px;color:var(--sisiAktifTeks);font-size:12.5px;white-space:nowrap}
  .sisi nav a .ikon{color:var(--sisiIkon);width:20px;height:20px}
  .sisi nav a.aktif{background:var(--hijauButang);color:#fff;font-weight:600}.sisi nav a.aktif .ikon{color:#fff}
  .sisi nav a span{display:none}
  .sisi .profil{display:none}
  .tab-bawah{display:none}
  .isi{padding:18px 20px 30px}
}
@media (min-width:1200px){
  .cangkerang.ada-sisi .sisi{width:232px}
  .sisi .logo .wordmark{display:block}
  .sisi nav a span{display:inline}
  .sisi .profil{display:flex;align-items:center;gap:10px;margin:0 20px;padding-top:14px;border-top:1px solid #22384B}
  .sisi .profil .nama{font-size:12.5px;font-weight:600}.sisi .profil .jawatan{font-size:10.5px;color:var(--sisiIkon)}
  .isi{padding:24px 28px 40px}
  .kepala{min-height:74px;padding:14px 28px}.kepala .tajuk{font-size:20px}.kepala .balik{display:none}
  .kepala .carian{display:flex;align-items:center;gap:8px;width:260px;height:36px;border:1.2px solid var(--garis2);border-radius:18px;padding:0 14px;background:var(--laman);color:var(--teks3);font-size:12px}
}
.kepala .carian{display:none}
/* nav atas (ibu bapa & murid) pada web lebar */
@media (min-width:700px){
  .cangkerang.ada-atas .kepala{display:none}
  .cangkerang.ada-atas .nav-atas{display:flex;align-items:center;gap:6px;height:68px;padding:0 24px;background:var(--permukaan);border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:20}
  .nav-atas .logo{margin-right:24px}
  .nav-atas a.item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;font-weight:500;color:var(--teks2);border-bottom:3px solid transparent;height:68px}
  .nav-atas a.item.aktif{color:var(--hijauTeks);font-weight:700;border-bottom-color:var(--hijauButang)}.nav-atas a.item.aktif .ikon{color:var(--hijauTeks)}
  .nav-atas .aksi{margin-left:auto;display:flex;align-items:center;gap:12px}
  .cangkerang.ada-atas .isi{padding:24px 24px 40px}
  .kepala-halaman{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
  .kepala-halaman h1{font-size:24px}
}
.kepala-halaman{display:none}
@media (min-width:700px){.kepala-halaman{display:flex}}

/* ── komponen ── */
.kad{background:var(--permukaan);border:1px solid var(--garis);border-radius:12px;padding:16px}
.kad.padat{padding:12px 14px}.kad.tanpa{padding:0;overflow:hidden}
.kad-tajuk{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.kad-tajuk .pautan{font-size:12px;font-weight:600;color:var(--hijauTeks)}
.grid{display:grid;gap:12px;grid-template-columns:1fr}
.g2{grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){.g2p{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g-sisi{grid-template-columns:minmax(0,1fr) 340px}}
.stat{background:var(--permukaan);border:1px solid var(--garis);border-radius:12px;padding:14px 16px}
.stat .lbl{font-size:11px;color:var(--teks3);margin-bottom:6px}
.stat .nilai{font-size:24px;font-weight:700;letter-spacing:-.01em}
.stat .sub{font-size:11px;color:var(--teks3);margin-top:4px}
.stat.padat .nilai{font-size:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:16px;font-size:13px;font-weight:600;border:1.2px solid transparent;white-space:nowrap;transition:filter .12s}
.btn:hover{filter:brightness(.96)}.btn:active{transform:translateY(1px)}
.btn.utama{background:var(--hijauButang);color:#fff;border-color:var(--hijauButang)}
.btn.kedua{background:var(--permukaan);color:var(--teks);border-color:var(--garis2)}
.btn.tinta{background:var(--bar);color:var(--barTeks);border-color:var(--bar)}
.btn.bahaya{background:var(--merahTeks);color:#fff;border-color:var(--merahTeks)}
.btn.halus{background:transparent;color:var(--hijauTeks);border-color:transparent;padding:0 8px}
.btn.kecil{height:32px;padding:0 12px;font-size:12px;border-radius:12px}.btn.penuh{width:100%}.btn.besar{height:48px;font-size:14px;border-radius:18px}
.btn .ikon{width:17px;height:17px;color:currentColor}
.btn:disabled{opacity:.5;cursor:default}
.lencana{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:11px;font-size:11px;font-weight:700;white-space:nowrap;background:color-mix(in srgb,var(--hijau) 14%,transparent);color:var(--hijauTeks)}
.lencana.kuning{background:color-mix(in srgb,var(--kuning) 14%,transparent);color:var(--kuningTeks)}
.lencana.merah{background:color-mix(in srgb,var(--merah) 14%,transparent);color:var(--merahTeks)}
.lencana.biru{background:color-mix(in srgb,var(--biru) 14%,transparent);color:var(--biru)}
.lencana.kelabu{background:var(--permukaan2);color:var(--teks2)}
.lencana.pejal{background:var(--hijauButang);color:#fff}.lencana.pejal.kuning{background:var(--kuningTeks)}.lencana.pejal.merah{background:var(--merahTeks)}
.avatar{display:inline-grid;place-items:center;border-radius:50%;width:36px;height:36px;font-weight:700;font-size:14px;background:color-mix(in srgb,var(--biru) 13%,transparent);color:var(--biru);flex:none}
.avatar.hijau{background:color-mix(in srgb,var(--hijau) 13%,transparent);color:var(--hijauTeks)}.avatar.pejal{background:var(--hijauButang);color:#fff}
.avatar.s{width:28px;height:28px;font-size:11px}.avatar.l{width:48px;height:48px;font-size:18px}.avatar.xl{width:64px;height:64px;font-size:24px}
.senarai{display:flex;flex-direction:column}
.senarai .baris{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--garis);min-height:56px}
.senarai .baris:first-child{border-top:0}
.senarai .baris .teks{flex:1;min-width:0}.senarai .baris .t{font-weight:600;font-size:13.5px}.senarai .baris .s{font-size:11.5px;color:var(--teks3);margin-top:2px}
.senarai .baris .kanan{text-align:end;flex:none}
.senarai .baris.tekan{cursor:pointer}.senarai .baris.tekan:hover{background:var(--zebra);margin:0 -16px;padding-left:16px;padding-right:16px}
.chev{width:16px;height:16px;color:var(--teks3);flex:none}
.jadual-bekas{overflow:auto;-webkit-overflow-scrolling:touch}
table.jadual{width:100%;border-collapse:collapse;font-size:13px}
.jadual th{background:var(--permukaan2);color:var(--teks3);font-size:11px;font-weight:700;text-align:start;padding:11px 12px;white-space:nowrap}
.jadual td{padding:12px;border-top:1px solid var(--garis);vertical-align:middle;white-space:nowrap}
.jadual tbody tr:nth-child(even){background:var(--zebra)}
.jadual tr.tekan{cursor:pointer}.jadual tr.tekan:hover td{background:var(--permukaan2)}
.jadual .kanan{text-align:end}.jadual .tengah{text-align:center}
.pil-bar{display:flex;gap:8px;overflow:auto;padding-bottom:4px;scrollbar-width:none}.pil-bar::-webkit-scrollbar{display:none}
.pil{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:16px;border:1.2px solid var(--garis2);background:var(--permukaan);font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--teks2)}
.pil.aktif{background:var(--hijauButang);color:#fff;border-color:var(--hijauButang)}
.tab-atas{display:flex;gap:20px;border-bottom:1px solid var(--garis);margin-bottom:14px;overflow:auto}
.tab-atas a{padding:8px 2px 10px;font-size:13px;font-weight:600;color:var(--teks3);border-bottom:2.5px solid transparent;white-space:nowrap}
.tab-atas a.aktif{color:var(--teks);border-bottom-color:var(--hijauButang)}
.medan{display:block;margin-bottom:14px}
.medan>span{display:block;font-size:11.5px;font-weight:500;color:var(--teks3);margin-bottom:6px}
.medan input,.medan select,.medan textarea{width:100%;height:44px;border:1.2px solid var(--garis2);border-radius:10px;padding:0 14px;background:var(--permukaan);outline:0}
.medan textarea{height:auto;min-height:88px;padding:12px 14px;resize:vertical}
.medan input:focus,.medan select:focus,.medan textarea:focus{border-color:var(--hijau);box-shadow:0 0 0 3px color-mix(in srgb,var(--hijau) 18%,transparent)}
.medan.ralat input{border-color:var(--merah)}
.togol{position:relative;width:44px;height:26px;border-radius:13px;background:var(--garis2);flex:none;transition:background .15s}
.togol::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.togol.hidup{background:var(--hijauButang)}.togol.hidup::after{left:21px}
.bar{height:7px;border-radius:4px;background:var(--permukaan2);overflow:hidden}.bar>i{display:block;height:100%;border-radius:4px;background:var(--hijau)}
.bar>i.kuning{background:var(--kuning)}.bar>i.merah{background:var(--merah)}.bar>i.biru{background:var(--biru)}
.hero{background:var(--bar);color:var(--barTeks);border-radius:16px;padding:18px}
.hero .sub{color:var(--barTeks2);font-size:12px}
.notis-kotak{border-radius:12px;padding:12px 14px;font-size:12.5px;display:flex;gap:10px;align-items:flex-start}
.notis-kotak.hijau{background:var(--hijauLatar);color:var(--hijauTeks)}.notis-kotak.kuning{background:var(--kuningLatar);color:var(--kuningTeks)}.notis-kotak.merah{background:color-mix(in srgb,var(--merah) 12%,transparent);color:var(--merahTeks)}
.notis-kotak .ikon{color:currentColor;flex:none}
.kosong{text-align:center;padding:40px 20px;color:var(--teks3)}.kosong .ikon{width:44px;height:44px;margin:0 auto 12px;color:var(--garis2)}
.kosong h3{color:var(--teks);font-size:15px;margin-bottom:6px}
.jubin{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--permukaan);border:1px solid var(--garis);border-radius:12px;min-height:96px}
.jubin .ikon{width:24px;height:24px;color:var(--hijauTeks)}.jubin .t{font-weight:600;font-size:13px}.jubin .s{font-size:11px;color:var(--teks3)}
.jubin.tekan{cursor:pointer}.jubin.tekan:hover{border-color:var(--garis2)}
.bintang{display:inline-flex;gap:2px}.bintang svg{width:12px;height:12px}
.pemisah{height:1px;background:var(--garis);margin:12px 0}
.qr{background:#fff;padding:12px;border-radius:12px;display:inline-block}
.gelembung{max-width:80%;padding:10px 14px;border-radius:14px;font-size:13px;background:var(--permukaan2)}
.gelembung.saya{background:var(--hijauButang);color:#fff;margin-left:auto}.gelembung .siapa{font-size:10.5px;color:var(--hijauTeks);font-weight:700;margin-bottom:2px}
.gelembung.saya .siapa{color:#dff5ea}
.papan-kalendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:12px}
.papan-kalendar .hari{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;position:relative}
.papan-kalendar .hari.ada::after{content:"";position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:var(--hijau)}
.papan-kalendar .hari.hari-ini{background:var(--hijauButang);color:#fff;font-weight:700}
.skeleton{background:linear-gradient(90deg,var(--permukaan2) 25%,var(--garis) 50%,var(--permukaan2) 75%);background-size:200% 100%;animation:kilau 1.2s infinite;border-radius:8px;height:14px}
@keyframes kilau{to{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--bar);color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:90vw}
.toast.merah{background:var(--merahTeks)}
.helaian-latar{position:fixed;inset:0;background:rgba(10,28,46,.5);z-index:80;display:flex;align-items:flex-end;justify-content:center}
.helaian{background:var(--permukaan);border-radius:20px 20px 0 0;padding:20px;width:100%;max-width:520px;max-height:88dvh;overflow:auto}
@media (min-width:600px){.helaian-latar{align-items:center}.helaian{border-radius:16px}}
.helaian .pemegang{width:40px;height:4px;border-radius:2px;background:var(--garis2);margin:-6px auto 14px}
.tindakan-bawah{position:sticky;bottom:0;background:linear-gradient(to top,var(--laman) 70%,transparent);padding:14px 0 6px;margin-top:8px}
@media (max-width:699px){body:has(.tab-bawah) .tindakan-bawah{bottom:calc(64px + env(safe-area-inset-bottom) + var(--jalur-h,0px))}}
@media (min-width:700px){.tindakan-bawah{position:static;background:none}}
.langkah{display:flex;gap:6px;margin-bottom:16px}.langkah i{flex:1;height:4px;border-radius:2px;background:var(--garis)}.langkah i.siap{background:var(--hijauButang)}
.kod-otp{display:flex;gap:8px;justify-content:center}.kod-otp input{width:44px;height:52px;text-align:center;font-size:22px;font-weight:700;border:1.2px solid var(--garis2);border-radius:10px;background:var(--permukaan)}
.corak{display:grid;grid-template-columns:repeat(3,64px);gap:22px;justify-content:center;touch-action:none}
.corak i{width:64px;height:64px;border-radius:50%;border:2px solid var(--garis2);display:grid;place-items:center}
.corak i::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--garis2)}.corak i.pilih{border-color:var(--hijau)}.corak i.pilih::after{background:var(--hijau)}
.splash{min-height:100dvh;background:var(--bar);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px}
.auth{min-height:100dvh;background:var(--bar);display:flex;flex-direction:column;align-items:center;padding:24px 20px 40px}
.auth .kotak{background:var(--permukaan);color:var(--teks);border-radius:20px;padding:24px 20px;width:100%;max-width:420px}
.auth .kotak-gelap{background:#15242F;color:#fff;border-radius:14px;padding:14px 16px;width:100%;max-width:420px;display:flex;gap:12px;align-items:center;font-size:13px}
.kiosk{min-height:100dvh;background:var(--bar);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}
.tv{min-height:100dvh;background:var(--bar);color:#fff;padding:40px;display:grid;grid-template-columns:2fr 1fr;gap:32px}
.nombor-besar{font-size:clamp(64px,12vw,160px);font-weight:800;letter-spacing:-.03em;line-height:1}
.dalam-pembinaan{border:1.5px dashed var(--garis2);border-radius:12px;padding:20px;color:var(--teks3);font-size:12.5px}
.carta-bar{display:flex;align-items:flex-end;gap:10px;height:140px}.carta-bar>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.carta-bar i{display:block;width:100%;background:var(--hijauMuda);border-radius:6px 6px 0 0}.carta-bar i.aktif{background:var(--hijau)}.carta-bar span{font-size:10px;color:var(--teks3)}
.doc{background:#fff;color:#0A1C2E;border-radius:12px;padding:28px;border:1px solid var(--garis);box-shadow:0 2px 12px rgba(10,28,46,.06)}
.doc .jalur{height:8px;border-radius:8px 8px 0 0;background:var(--hijau);margin:-28px -28px 24px}
@media print{.sisi,.kepala,.tab-bawah,.nav-atas,.tindakan-bawah,.btn{display:none!important}.isi{padding:0}.doc{border:0;box-shadow:none}}

/* ── Responsif ketat (26 Sep 2026): tiada limpahan mendatar pada 360 / 390 / 768 / 1024 / 1280 ── */
html, body { overflow-x: hidden; }
/* clip (bukan hidden) supaya body tidak jadi bekas skrol — position:sticky (menu sisi, kepala) berfungsi */
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
.grid > *, .tegak > *, .baris-f > *, .g-sisi > *, .senarai .baris > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width:600px) { .g2p { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width:960px) { .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g-sisi { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } }
/* grid dalam lajur sisi yang sempit: maksimum 2 lajur */
@media (min-width:960px) { .g-sisi > :last-child .g3, .g-sisi > :last-child .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kad, .stat, .jubin, .hero, .notis-kotak { min-width: 0; overflow-wrap: break-word; }
.stat .nilai { overflow-wrap: anywhere; }
.btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.senarai .baris { flex-wrap: wrap; }
.senarai .baris .teks { flex: 1 1 140px; }
.senarai .baris .kanan { flex: 0 1 auto; max-width: 100%; }
.senarai .baris .kanan .baris-f { flex-wrap: wrap; justify-content: flex-end; }
.baris-f.antara { flex-wrap: wrap; }
.kepala .aksi { flex-wrap: nowrap; min-width: 0; }
.kepala .aksi .btn { flex-shrink: 1; }
@media (max-width:599px) { .kepala .aksi .btn.kecil { padding: 0 10px; font-size: 11.5px; } .kepala .tajuk { font-size: 16px; } }
img, video, canvas, svg, table, pre { max-width: 100%; }
select.pil { max-width: 100%; }
/* nav atas (ibu bapa / murid / komuniti) pada tablet: padat, boleh tatal */
@media (min-width:700px) and (max-width:1099px) {
  .cangkerang.ada-atas .nav-atas { gap: 0; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .nav-atas::-webkit-scrollbar { display: none; }
  .nav-atas .logo .wordmark, .nav-atas > .lencana { display: none; }
  .nav-atas .logo { margin-right: 8px; }
  .nav-atas a.item { padding: 8px 9px; font-size: 12px; white-space: nowrap; }
  .nav-atas .aksi .btn .ikon + * { display: none; }
}

/* ── Skrin perincian & borang key-in (js/perincian.js · rs_perincian_pusat.py / rs_perincian_as.py) ── */
.teks-hijau{color:var(--hijauTeks)}.teks-merah{color:var(--merahTeks)}.teks-kuning{color:var(--kuningTeks)}.teks-biru{color:var(--biru)}.teks-teks{color:var(--teks)}
.pr-susun{align-items:start}
.pr-kv{display:flex;flex-direction:column}
.pr-kv-b{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13px}
.pr-kv-b span{min-width:0}.pr-kv-b b{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}.pr-kv-b b.tebal{font-weight:700}
.pr-kv-j{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--garis);margin-top:6px;padding-top:12px;font-weight:700;font-size:14px}
.pr-lbl{font-size:12px;font-weight:600;color:var(--teks2);margin-bottom:6px}
.pr-seg{display:flex;background:var(--permukaan2);border-radius:10px;padding:3px;gap:3px;margin-bottom:12px}
.pr-seg label{flex:1;min-width:0}.pr-seg input{position:absolute;opacity:0;pointer-events:none}
.pr-seg span{display:block;text-align:center;padding:9px 6px;border-radius:8px;font-size:13px;font-weight:600;color:var(--teks2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-seg input:checked + span{background:var(--hijauButang, var(--hijau));color:#fff}
.pr-seg input:focus-visible + span{outline:2px solid var(--hijau);outline-offset:2px}
.pr-masa{display:flex;flex-direction:column}
.pr-masa-b{display:flex;gap:12px;position:relative;padding-bottom:14px}
.pr-masa-b i{flex:0 0 12px;height:12px;border-radius:50%;background:var(--garis2);margin-top:4px;position:relative;z-index:1}
.pr-masa-b i.hijau{background:var(--hijauTeks)}.pr-masa-b i.kuning{background:var(--kuningTeks)}.pr-masa-b i.merah{background:var(--merahTeks)}.pr-masa-b i.biru{background:var(--biru)}
.pr-masa-b:not(:last-child)::before{content:"";position:absolute;left:5.5px;top:16px;bottom:0;width:1px;background:var(--garis2)}
.pr-fail{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;border:1.4px dashed var(--garis2);border-radius:10px;background:var(--permukaan2);cursor:pointer;text-align:center;margin-bottom:12px;position:relative}
.pr-fail .ikon{width:22px;height:22px;color:var(--teks3)}.pr-fail b{font-size:13px;overflow-wrap:anywhere}
.pr-fail input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pr-fail.ada{flex-direction:row;justify-content:flex-start;text-align:left;border-style:solid;background:var(--permukaan);flex-wrap:wrap}
.pr-fail.ada .ikon{color:var(--hijauTeks)}
.pr-profil{display:flex;gap:14px;align-items:flex-start}.pr-profil h2,.pr-angka h2{font-size:20px;margin:0 0 4px;overflow-wrap:anywhere}
.pr-stat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-top:1px solid var(--garis);margin-top:14px;padding-top:12px}
.pr-stat b{font-size:19px;display:block;margin-top:4px;overflow-wrap:anywhere}
.pr-angka{display:flex;gap:16px;align-items:flex-start}.pr-angka-n{font-size:28px;font-weight:700;white-space:nowrap}
.pr-cari{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.pr-cari input{flex:2 1 220px;min-width:0}.pr-cari select{flex:1 1 140px;min-width:0}
.pr-bar-pin{display:none}
.pr-kepala{display:inline-flex;gap:8px;flex-wrap:wrap}
.jadual tr.tekan{cursor:pointer}
@media (max-width:699px){
  .pr-stat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-angka{flex-direction:column;gap:6px}.pr-angka-n{font-size:24px}
  .pr-kepala{display:none}
  .pr-bar-pin{display:flex;gap:10px;position:sticky;bottom:8px;z-index:20;background:var(--laman);padding:10px 0;margin-top:12px;border-top:1px solid var(--garis)}
  body:has(.tab-bawah) .pr-bar-pin{bottom:64px}
  .pr-bar-pin .btn:first-child:not(:last-child){flex:0 0 42%}
  .pr-seg span{font-size:12px;padding:9px 4px}
}
.pr-cip-bar{display:flex;flex-wrap:wrap;gap:8px}
.pr-cip{position:relative}.pr-cip input{position:absolute;opacity:0;pointer-events:none}
.pr-cip span{display:flex;flex-direction:column;padding:8px 14px;border:1.2px solid var(--garis2);border-radius:14px;font-size:13px;font-weight:600;cursor:pointer;background:var(--permukaan)}
.pr-cip span small{font-size:11px;font-weight:400;color:var(--teks3)}
.pr-cip input:checked + span{background:var(--hijauLatar, rgba(0,135,86,.08));border-color:var(--hijauButang);color:var(--hijauTeks)}
.pr-cip input:focus-visible + span{outline:2px solid var(--hijau);outline-offset:2px}
.pr-cip.penuh span{opacity:.5;cursor:not-allowed}
.pr-kepala .btn{white-space:nowrap;flex:0 0 auto}
.pr-kepala .btn{display:inline-flex;align-items:center;gap:6px}.pr-kepala .btn .ikon{flex:0 0 auto}
.pr-langkah{display:flex;gap:12px;margin:14px 0}.pr-langkah .no{flex:0 0 26px;height:26px;border-radius:50%;background:var(--hijauButang);color:#fff;display:grid;place-items:center;font-size:12.5px}
/* cip pilihan berbilang (K18, KM9, SO21, D58) */
.pr-cip{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.pr-cip label{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1.2px solid var(--garis);border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;background:var(--permukaan);color:var(--teks2)}
.pr-cip input{position:absolute;opacity:0;pointer-events:none}
.pr-cip label:has(input:checked){border-color:var(--hijau);background:var(--hijauLatar);color:var(--hijauTeks)}
.pr-cip label:has(input:checked)::before{content:"✓";font-weight:700}
/* kalendar editorial (D69 / SO24) */
.kal-leg{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--teks2);margin-bottom:10px}.kal-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.kal-hn{font-size:11px;font-weight:700;color:var(--teks3);padding:2px 6px}
.kal-sel{min-height:88px;border:1px solid var(--garis);border-radius:8px;padding:6px;background:var(--permukaan);cursor:pointer;overflow:hidden}.kal-sel.luar{background:var(--laman);cursor:default}
.kal-sel .n{font-size:12px;font-weight:600;color:var(--teks2);display:flex;justify-content:space-between}.kal-sel.kini .n b{background:var(--hijauButang,#008756);color:#fff;border-radius:50%;width:22px;height:22px;display:inline-grid;place-items:center}
.kal-cip{display:block;font-size:11px;font-weight:600;border-radius:5px;padding:3px 6px 3px 8px;margin-top:4px;border-left:3px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-cip.dipost{background:var(--hijauLatar);color:var(--hijauTeks);border-color:var(--hijauTeks)}.kal-cip.dijadual{background:var(--permukaan2);color:var(--biru);border-color:var(--biru)}
.kal-cip.perlu{background:var(--permukaan2);color:var(--merahTeks);border-color:var(--merahTeks)}.kal-cip.draf{background:var(--permukaan2);color:var(--teks3);border-color:var(--teks3)}
@media (max-width:699px){.kal-sel{min-height:54px;padding:4px}.kal-cip{font-size:0;height:6px;padding:0;margin-top:3px;border-left:0}.kal-cip.dipost{background:var(--hijauTeks)}.kal-cip.dijadual{background:var(--biru)}.kal-cip.perlu{background:var(--merahTeks)}.kal-cip.draf{background:var(--teks3)}}

/* ── Gambar & foto (ejen G: gambar dummy marketplace) ── */
.avatar.ada-foto{position:relative;overflow:hidden}
.avatar.ada-foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;background:var(--permukaan2)}
.avatar.kotak{border-radius:12px}.avatar.s.kotak{border-radius:8px}.avatar.xl.kotak{border-radius:16px}
.gambar{position:relative;display:block;width:100%;overflow:hidden;background:var(--permukaan2);flex:none}
.gambar>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gambar>.atas{position:absolute;z-index:1}
.kulit-pusat{border-radius:16px;overflow:hidden;position:relative}
.kulit-pusat .gambar{aspect-ratio:16/9}
@media (min-width:700px){.kulit-pusat .gambar{aspect-ratio:16/5!important}}
.galeri-jalur{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,46%);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.galeri-jalur>*{scroll-snap-align:start;border-radius:10px;overflow:hidden}
@media (min-width:700px){.galeri-jalur{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));grid-auto-columns:auto;overflow:visible}}
.hanya-l{display:none!important}
@media (min-width:600px){.hanya-l{display:block!important}}
.kad-gambar{display:block;padding:0;overflow:hidden}
.kad-gambar>.gambar{border-radius:0}
.logo-tindih{margin-top:-30px;border:3px solid var(--permukaan);box-sizing:content-box}
.g-utama-sisi{display:flex;flex-direction:column;gap:12px}
.g-utama-sisi>.bah-sisi{order:0}.g-utama-sisi>.bah-utama{order:1}
@media (min-width:960px){.g-utama-sisi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:16px;align-items:start}.g-utama-sisi>.bah-utama{grid-column:1;grid-row:1}.g-utama-sisi>.bah-sisi{grid-column:2;grid-row:1}}
.g-utama-sisi>*{min-width:0}
.galeri-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.galeri-grid>a{border-radius:10px;overflow:hidden;display:block}
@media (min-width:960px){.bah-sisi .g3,.bah-sisi .g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gambar.muat>img{object-fit:contain}
.gambar>.ikon-ganti{position:absolute;inset:0;display:grid;place-items:center;color:var(--teks3)}
.thumb-bahan{width:56px;border-radius:8px;flex:none}
/* ── Fasa 1 kebolehbacaan (audit 2 Okt 2026, 01-Kajian/AUDIT-ALIRAN-UI.md §4): pengguna warga emas ── */
body{font-size:15px}
.kecil{font-size:13px}.kecil2{font-size:12px}
.tab-bawah a{font-size:11.5px;font-weight:600}.tab-bawah a .ikon{width:24px;height:24px}
.btn{height:44px;font-size:14px}.btn.kecil{height:36px;font-size:13px;padding:0 14px}.btn.besar{height:50px;font-size:15px}
.kepala .sub{font-size:12.5px}
.senarai .baris .t{font-size:15px}.senarai .baris .s{font-size:13px}
.jubin .t{font-size:14.5px}.jubin .s{font-size:12.5px}
.kad-tajuk{font-size:16px}
/* ikon kepala berlabel (Komuniti · Notis) */
.loceng.berlabel{width:auto;min-width:44px;height:auto;border-radius:10px;padding:2px 4px;display:flex;flex-direction:column;align-items:center;gap:1px}
.loceng.berlabel .lbl{font-size:10.5px;font-weight:600;color:var(--teks2);line-height:1.1}
.loceng.berlabel .titik{top:0;right:8px}
.kepala.gelap .loceng.berlabel .lbl{color:#fff;opacity:.85}
/* Teks besar (Saya › Bahasa & paparan) */
html.teks-besar .isi,html.teks-besar .helaian{zoom:1.15}
html.teks-besar .tab-bawah a{font-size:12.5px}
@media (max-width:599px){.sembunyi-s{display:none!important}}
/* kad bergambar: lencana atas dalam satu baris berbalut (tiada tindih) · rating tidak pecah */
.gambar>.lencana-atas{position:absolute;z-index:1;top:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between;align-items:flex-start;pointer-events:none}
.bintang{flex:none}
/* lencana di atas gambar berwarna: latar putih pejal supaya sentiasa terbaca */
.gambar .lencana{background:#fff!important;box-shadow:0 1px 4px rgba(10,28,46,.18);opacity:1}

/* ── Fasa 2: butang "Cari ciri" di kepala — telefon: ikon berlabel; ≥700: kotak carian ── */
@media (max-width:699px){.kepala .carian{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:40px;color:var(--teks);text-decoration:none}.kepala .carian .ikon{width:22px;height:22px}.kepala .carian .lbl{font-size:10.5px;font-weight:600;color:var(--teks2)}.kepala.gelap .carian,.kepala.gelap .carian .lbl{color:#fff}}
@media (min-width:700px){.kepala .carian{text-decoration:none;cursor:pointer}.kepala .carian .lbl{font-weight:600}}
@media (min-width:700px){.kepala .carian,.nav-atas .carian{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:200px;height:38px;border:1.2px solid var(--garis2);border-radius:19px;padding:0 14px;background:var(--laman);color:var(--teks3);font-size:13px}.nav-atas .carian .lbl{font-weight:600;color:var(--teks2)}}
@media (min-width:1200px){.kepala .carian{min-width:280px}}
/* Asas medan (3 Okt): input/select tanpa gaya skrin tidak lagi guna gaya pelayar (teks melekat pada garis). :where = kekhususan 0 → gaya skrin/komponen tetap menang */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=submit],[type=button]), select, textarea){font:inherit;color:var(--teks);background:var(--permukaan);border:1.2px solid var(--garis2,var(--garis));border-radius:8px;padding:8px 10px;min-height:38px;box-sizing:border-box}
:where(select){padding-right:28px}
/* Lencana tidak tersepit dalam baris flex (3 Okt: SEGERA, Demo, Dalam semakan) */
.lencana{flex-shrink:0;max-width:100%}.lencana.tu12-label{white-space:normal;flex-shrink:1;height:auto;line-height:1.3;padding-top:3px;padding-bottom:3px}

.harga-asal{text-decoration:line-through;text-decoration-thickness:2px;color:var(--teks3);font-weight:600;font-size:.72em;margin-right:.15em;white-space:nowrap}.harga-baru{white-space:nowrap}
td .harga-asal{font-size:.85em}
.teks-teks3{color:var(--teks3)}   /* v0.5.3 perjalanan & pemandu: label kelabu (Tiada · Tamat · Sekolah) */