/* SistemGuru.My — CSS KRITIKAL paparan pertama tetamu (landing #lp: nav, hero #lp-atas, CTA).
   2026-10-19 (audit prestasi, Bhg 46.13): dimuat MENYEKAT dalam <head>; 6 fail CSS penuh dimuat
   tanpa menyekat (preload + onload) dalam URUTAN asal, jadi kaskad akhir sama seperti dahulu.
   DIJANA (bukan ditulis tangan) daripada CSSOM: peraturan yang memadan html/body/#eguru-app/#lp
   dan elemen .lp-skip/.lp-nav/#lp-atas/#lp-lekat, ikut urutan fail asal. Jika gaya hero/nav dalam
   sg_lp.css / sg_gaya.css berubah, jana semula (skrip ekstrak CSSOM) dan naikkan ?v=. */
/* App (selain landing) disorok sehingga sg_gaya.css + sg_ui2.css siap dimuat — tiada FOUC. */
html.sg-css-tunggu #eguru-app>:not(.lp),html.sg-css-tunggu body>:not(#eguru-app){visibility:hidden}
/* sg_gaya.css */
html,*{-webkit-tap-highlight-color: transparent;}
#eguru-app{--primary: #059669; --primary-light: #34D399; --primary-dark: #047857; --gradient-bg: linear-gradient(135deg, #047857 0%, #064E3B 100%); --accent: #F59E0B; --accent-light: #FDE68A; --info: #0D9488; --info-light: #F0FDFA; --danger: #EF4444; --danger-light: #FEF2F2; --success: #10B981; --success-light: #ECFDF5; --bg: #F0FDF4; --card-bg: #FFFFFF; --text: #1F2937; --text-muted: #4B5563; --text-light: #6B7280; --primary-text: #047857; --info-text: #115E59; --accent-text: #78350F; --danger-text: #B91C1C; --kh: #0891B2; --kh-dark: #0E7490; --kh-light: #ECFEFF; --kh-text: #155E75; --border: #E5E7EB; --nav-h: 68px; --topbar-h: 62px; --sidebar-w: 236px; --modal-w: 560px; --shadow-sm: 0 1px 4px rgba(0,0,0,.06); --shadow: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 8px 32px rgba(0,0,0,.14); --t0: calc(var(--fs) * .60); --t1: calc(var(--fs) * .66); --t2: calc(var(--fs) * .72); --t3: calc(var(--fs) * .78); --t4: calc(var(--fs) * .84); --t5: calc(var(--fs) * .9); --t6: calc(var(--fs) * .96); --t7: calc(var(--fs) * 1.05); --t8: calc(var(--fs) * 1.22); --t9: calc(var(--fs) * 1.4); --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius: 14px; --radius-lg: 18px; --radius-full: 9999px; --sp-1: 4px; --sp-2: 6px; --sp-3: 10px; --sp-4: 14px; --sp-5: 18px; --ultra: #7C3AED; --ultra-dark: #6D28D9; --ultra-deep: #5B21B6; --ultra-light: #A855F7; --ultra-pale: #C4B5FD;}
#eguru-app.dark-theme{--primary: #059669; --primary-light: #6EE7B7; --primary-dark: #059669; --gradient-bg: linear-gradient(135deg, #064E3B 0%, #022C22 100%); --accent: #FBBF24; --accent-light: #3B2F00; --info: #2DD4BF; --info-light: #0F3B37; --danger: #F87171; --danger-light: #3B1515; --success: #34D399; --success-light: #0D2A1F; --bg: #0F172A; --card-bg: #1E293B; --text: #F1F5F9; --text-muted: #94A3B8; --text-light: #7C899C; --border: #334155; --primary-text: #34D399; --info-text: #5EEAD4; --accent-text: #FBBF24; --danger-text: #F87171; --kh: #06B6D4; --kh-dark: #0E7490; --kh-light: #0B2E38; --kh-text: #67E8F9;}
#eguru-app *{margin: 0px; padding: 0px; box-sizing: border-box !important; font-family: Inter, "Scheherazade New", system-ui, sans-serif !important; -webkit-tap-highlight-color: transparent !important;}
#eguru-app [dir="rtl"]{font-size: var(--t8); line-height: 1.7; font-family: "Scheherazade New", Amiri, "Noto Naskh Arabic", "Traditional Arabic", Inter, serif !important;}
#eguru-app [dir="rtl"] *{font-family: inherit !important;}
#eguru-app [dir="rtl"] [dir="ltr"],#eguru-app [dir="rtl"] [dir="ltr"] *{font-family: Inter, "Scheherazade New", system-ui, sans-serif !important;}
#eguru-app{inset: 0px; transition: background-color 0.3s, color 0.3s; font-size: var(--fs) !important; background-color: var(--bg) !important; color: var(--text) !important; position: fixed !important; z-index: 999999 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important;}
#eguru-app [class*="badge-bank-"]{box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset;}
#eguru-app :is(button, a, [role="button"], [tabindex], summary, input, select, textarea):focus-visible{border-radius: var(--radius-xs); outline: 3px solid var(--primary-light) !important; outline-offset: 2px !important;}
@media (min-width: 900px){
#eguru-app{grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "topbar topbar" "sidebar main"; display: grid !important;}
}
#eguru-app{--fs-base: 14px; --fs-scale: 1; --fs: calc(var(--fs-base) * var(--fs-scale));}
@media (max-width: 899px){
#eguru-app{--fs-base: 13.2px;}
}
@media (min-width: 1440px){
#eguru-app{--fs-base: 15px;}
}
#eguru-app{--ui-zoom: 1;}
@media (min-width: 900px){
#eguru-app{--ui-zoom: .90; zoom: var(--ui-zoom);}
}
@media (min-width: 1280px){
#eguru-app{--ui-zoom: .86;}
}
@media (min-width: 1600px){
#eguru-app{--ui-zoom: .82;}
}
#eguru-app button{font-size: inherit;}
#eguru-app p:not([class]),#eguru-app li:not([class]),#eguru-app ul:not([class]){font-size: var(--t4) !important;}
@media (min-width: 900px){
#eguru-app{--sidebar-w: 200px;}
}
@media (min-width: 1280px){
#eguru-app{--sidebar-w: 236px;}
}
#eguru-app{--pad-view: 16px; --sb-w: 0px;}
@media (max-width: 899px){
#eguru-app{--pad-view: 4px; --pad-atas: 12px;}
}
#eguru-app{--modal-gap: 24px;}
@media (max-width: 899px){
#eguru-app{--modal-gap: 10px;}
}
#eguru-app{--nav-gap: 0px;}
@media (max-width: 899px){
#eguru-app{--nav-gap: var(--pad-view);}
}
@media (prefers-reduced-motion: reduce){
#eguru-app :not(.spinner),#eguru-app ::before,#eguru-app ::after{animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;}
#eguru-app{scroll-behavior: auto !important;}
}
@media (max-width: 600px){
#eguru-app{--modal-gap: 2px;}
}
#eguru-app [data-mt-panel][hidden],#eguru-app [data-mt-nampak][hidden]{display: none !important;}
[data-hue="0"]{--h: #dc2626; --hs: #dd2f2f; --hd: #8f1919; --hl: #fca5a5; --hp: #fce9e9;}
[data-hue="1"]{--h: #c2410c; --hs: #c64e1d; --hd: #7e2a08; --hl: #fdba74; --hp: #f9ece7;}
[data-hue="2"]{--h: #b45309; --hs: #b75a13; --hd: #753606; --hl: #fcd34d; --hp: #f8eee6;}
[data-hue="3"]{--h: #a16207; --hs: #a4670e; --hd: #694005; --hl: #fde047; --hp: #f6efe6;}
[data-hue="4"]{--h: #4d7c0f; --hs: #548119; --hd: #32510a; --hl: #bef264; --hp: #edf2e7;}
[data-hue="5"]{--h: #15803d; --hs: #1e8545; --hd: #0e5328; --hl: #86efac; --hp: #e8f2ec;}
[data-hue="6"]{--h: #047857; --hs: #1b8466; --hd: #034e39; --hl: #6ee7b7; --hp: #e6f2ee;}
[data-hue="7"]{--h: #0f766e; --hs: #25827b; --hd: #0a4d48; --hl: #5eead4; --hp: #e7f1f0;}
[data-hue="8"]{--h: #0e7490; --hs: #217f99; --hd: #094b5e; --hl: #67e8f9; --hp: #e7f1f4;}
[data-hue="9"]{--h: #0369a1; --hs: #217bac; --hd: #024469; --hl: #7dd3fc; --hp: #e6f0f6;}
[data-hue="10"]{--h: #0F766E; --hs: #326cec; --hd: #184099; --hl: #5EEAD4; --hp: #e9effd;}
[data-hue="11"]{--h: #4f46e5; --hs: #645ce8; --hd: #332e95; --hl: #a5b4fc; --hp: #edecfc;}
[data-hue="12"]{--h: #7c3aed; --hs: #8a50ef; --hd: #51269a; --hl: #c4b5fd; --hp: #f2ebfd;}
[data-hue="13"]{--h: #9333ea; --hs: #9d45ec; --hd: #602198; --hl: #d8b4fe; --hp: #f4ebfd;}
[data-hue="14"]{--h: #a21caf; --hs: #ad37b9; --hd: #691272; --hl: #f0abfc; --hp: #f6e8f7;}
[data-hue="15"]{--h: #be185d; --hs: #c63470; --hd: #7c103c; --hl: #f9a8d4; --hp: #f8e8ef;}
#eguru-app [data-mod-cuba][hidden]{display: none !important;}
#eguru-app{--nk-pdpc: #0F766E; --nk-pbd: #7C3AED; --nk-intpel: #EA580C; --nk-ist: #D97706; --nk-ist2: #F59E0B;}
#eguru-app.dark-theme{--nk-pdpc: #2DD4BF; --nk-pbd: #A78BFA; --nk-intpel: #FB923C; --nk-ist: #FBBF24; --nk-ist2: #FCD34D;}
#eguru-app [data-grp="pdpc"]{--nk: var(--nk-pdpc);}
#eguru-app [data-grp="pbd"]{--nk: var(--nk-pbd);}
#eguru-app [data-grp="intpel"]{--nk: var(--nk-intpel);}
#eguru-app [data-grp="istimewa"]{--nk: var(--nk-ist);}
html.mod-murid #eguru-app{display: block !important;}
html.mod-murid body{margin: 0px !important;}
/* sg_takwim_kal.css */
html,*{-webkit-tap-highlight-color: transparent;}
#eguru-app{--tkk-cuti: #DC2626; --tkk-cuti-bg: #FEE2E2; --tkk-cuti-tx: #991B1B; --tkk-exam: #0F766E; --tkk-exam-bg: #CCFBF1; --tkk-exam-tx: #134E4A; --tkk-peri: #D97706; --tkk-peri-bg: #FEF3C7; --tkk-peri-tx: #92400E; --tkk-acara: #7C3AED; --tkk-acara-bg: #EDE9FE; --tkk-acara-tx: #5B21B6;}
#eguru-app.dark-theme{--tkk-cuti: #F87171; --tkk-cuti-bg: #4C1D1D; --tkk-cuti-tx: #FECACA; --tkk-exam: #2DD4BF; --tkk-exam-bg: #0F3B37; --tkk-exam-tx: #99F6E4; --tkk-peri: #FBBF24; --tkk-peri-bg: #4A3510; --tkk-peri-tx: #FDE68A; --tkk-acara: #A78BFA; --tkk-acara-bg: #3B2A63; --tkk-acara-tx: #DDD6FE;}
/* sg_lp.css */
html,*{-webkit-tap-highlight-color: transparent;}
#eguru-app .lp{--lp-bg: #FBFCFA; --lp-surface: #FFFFFF; --lp-soft: #F1F6F3; --lp-mint: #E3F4EA; --lp-ink: #0C1F17; --lp-ink-2: #34463E; --lp-muted: #5A6A63; --lp-line: #E2E9E5; --lp-brand: #047857; --lp-brand-2: #059669; --lp-brand-ink: #065F46; --lp-on-brand: #FFFFFF; --lp-gelap: #0C1F17; --lp-ultra: #6D28D9; --lp-ultra-soft: #EFE7FD; --lp-shadow: 0 1px 2px rgba(12,31,23,.05), 0 8px 24px rgba(12,31,23,.06); --lp-shadow-lg: 0 2px 6px rgba(12,31,23,.06), 0 24px 60px rgba(12,31,23,.13); --lp-gutter: clamp(16px, 2.2cqi, 56px); --lp-maks-teks: 74ch; --lp-maks-sempit: 980px; --lp-maks: none; --lp-maks-luas: none; --lp-nav-h: 66px; --lp-t1: 10.5px; --lp-t2: 11.5px; --lp-t3: 12.5px; --lp-t4: 13.5px; --lp-t5: 14.5px; --lp-t6: 15.5px; --lp-t7: 16.5px; --lp-badan: clamp(15.5px, 1.15cqi, 17.5px); --lp-lead-fs: clamp(16.5px, 1.25cqi, 19.5px); --lp-h3-fs: clamp(20px, 1.8cqi, 28px); --lp-h2-fs: clamp(27px, 2.5cqi, 42px); position: absolute; inset: 0px; z-index: 500; overflow: hidden auto; overscroll-behavior: contain; background: var(--lp-bg); color: var(--lp-ink); font-size: 16px; line-height: 1.6; container-type: inline-size;}
#eguru-app.dark-theme .lp,#eguru-app .lp[data-tema="gelap"]{--lp-bg: #09120F; --lp-surface: #0F1A16; --lp-soft: #14221D; --lp-mint: #0E3325; --lp-ink: #E8F1EC; --lp-ink-2: #C3D2CA; --lp-muted: #93A69D; --lp-line: #1E2E28; --lp-brand: #10B981; --lp-brand-2: #34D399; --lp-brand-ink: #6EE7B7; --lp-on-brand: #03241A; --lp-gelap: #12241E; --lp-ultra-soft: #261A3D; --lp-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.3); --lp-shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);}
html.lp-tiada #eguru-app .lp{display: none !important;}
#eguru-app .lp [hidden]{display: none !important;}
#eguru-app .lp a{color: inherit;}
#eguru-app .lp svg{fill: currentcolor;}
#eguru-app .lp *,#eguru-app .lp ::before,#eguru-app .lp ::after{box-sizing: border-box;}
#eguru-app .lp-wrap-luas{width: 100%; margin-inline: auto; padding-inline: var(--lp-gutter);}
#eguru-app .lp-wrap-luas{max-width: var(--lp-maks-luas);}
#eguru-app .lp-skip{position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--lp-brand); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: var(--lp-t5); font-weight: 700; text-decoration: none; transition: top 0.15s;}
#eguru-app .lp-skip:focus{top: 12px;}
#eguru-app .lp-btn{display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0px 24px; border-radius: 999px; font-size: var(--lp-t6); font-weight: 700; letter-spacing: -0.005em; line-height: 1; border: 1px solid transparent; background: transparent; color: var(--lp-ink); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, border-color 0.15s;}
#eguru-app .lp-btn svg{width: 18px; height: 18px; flex: 0 0 18px;}
#eguru-app .lp-btn-utama{background: var(--lp-brand); color: var(--lp-on-brand); box-shadow: rgba(4, 120, 87, 0.28) 0px 1px 2px, rgba(4, 120, 87, 0.22) 0px 8px 20px;}
#eguru-app .lp-btn-utama:hover{background: var(--lp-brand-2); transform: translateY(-1px); box-shadow: rgba(4, 120, 87, 0.3) 0px 2px 4px, rgba(4, 120, 87, 0.26) 0px 14px 28px;}
#eguru-app .lp-btn-sunyi{color: var(--lp-ink-2);}
#eguru-app .lp-btn-sunyi:hover{color: var(--lp-brand-ink); background: var(--lp-soft);}
#eguru-app .lp-btn-kecil{height: 40px; padding: 0px 18px; font-size: var(--lp-t5);}
#eguru-app .lp-btn-teks{display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0px 8px; border: 0px; background: none; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: var(--lp-t6); font-weight: 700; color: var(--lp-brand-ink); cursor: pointer; white-space: nowrap; text-decoration: underline 1px; text-underline-offset: 5px;}
#eguru-app .lp-btn-teks svg{width: 16px; height: 16px; flex: 0 0 16px;}
#eguru-app .lp-btn-teks:hover{color: var(--lp-brand-2);}
#eguru-app .lp-btn:focus-visible,#eguru-app .lp-btn-teks:focus-visible,#eguru-app .lp-nav-links a:focus-visible{outline: 3px solid var(--lp-brand-2); outline-offset: 2px; border-radius: 8px;}
#eguru-app .lp-nav{position: sticky; top: 0px; z-index: 5; height: var(--lp-nav-h); display: flex; align-items: center; background: color-mix(in srgb, var(--lp-bg) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s, background-color 0.2s;}
#eguru-app .lp-nav-in{display: flex; align-items: center; gap: 20px; width: 100%;}
#eguru-app .lp-logo{display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--lp-t7); letter-spacing: -0.02em; text-decoration: none; color: var(--lp-ink);}
#eguru-app .lp-logo img{width: 30px; height: 30px; border-radius: 8px; display: block;}
#eguru-app .lp-nav-links{display: flex; align-items: center; gap: 4px; margin-inline: auto;}
#eguru-app .lp-nav-links a{padding: 8px 14px; border-radius: 999px; font-size: var(--lp-t5); font-weight: 600; color: var(--lp-ink-2); text-decoration: none; transition: background-color 0.15s, color 0.15s;}
#eguru-app .lp-nav-links a:hover{background: var(--lp-soft); color: var(--lp-ink);}
#eguru-app .lp-nav-cta{display: flex; align-items: center; gap: 8px; margin-left: auto;}
@container (max-width: 1000px){
#eguru-app .lp-nav-links{display: none;}
#eguru-app .lp-nav-cta{margin-left: auto;}
}
#eguru-app .lp-nav-in{min-width: 0px;}
#eguru-app .lp-logo{min-width: 0px; flex: 0 1 auto; overflow: hidden;}
#eguru-app .lp-logo span{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#eguru-app .lp-nav-cta{flex: 0 0 auto;}
#eguru-app .lp-nav-cta .lp-btn{white-space: nowrap;}
#eguru-app .lp-nav-cuba{transition: opacity 0.2s, visibility 0.2s, transform 0.15s, box-shadow 0.15s, background-color 0.15s;}
@container (max-width: 560px){
#eguru-app .lp-logo span{display: none;}
#eguru-app .lp-nav-in{gap: 10px;}
#eguru-app .lp-nav-cta{gap: 6px;}
#eguru-app .lp-nav-cta .lp-btn-kecil{height: 38px; padding: 0px 13px; font-size: var(--lp-t4);}
}
@media (prefers-reduced-motion: reduce){
#eguru-app .lp *{animation: auto ease 0s 1 normal none running none !important;}
}
#eguru-app .lp-hero{position: relative; padding-block: clamp(44px, 4.6cqi, 88px) clamp(56px, 5.5cqi, 104px); overflow: hidden;}
#eguru-app .lp-hero::before{content: ""; position: absolute; inset: -20% -10% auto; height: 130%; background: radial-gradient(60% 55% at 22% 12%, color-mix(in srgb, var(--lp-brand-2) 13%, transparent) 0%, transparent 62%),
      radial-gradient(48% 48% at 88% 6%, color-mix(in srgb, var(--lp-brand) 9%, transparent) 0%, transparent 58%); pointer-events: none;}
#eguru-app .lp-hero-grid{position: relative; display: grid; grid-template-columns: minmax(0px, 1.02fr) minmax(0px, 1fr); gap: clamp(36px, 4cqi, 72px); align-items: center;}
@container (max-width: 1250px){
#eguru-app .lp-hero-grid{grid-template-columns: minmax(0px, 1fr); gap: 44px;}
}
#eguru-app .lp-chip{display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--lp-surface); border: 1px solid var(--lp-line); font-size: var(--lp-t4); font-weight: 600; color: var(--lp-ink-2); box-shadow: var(--lp-shadow);}
#eguru-app .lp-chip b{background: var(--lp-mint); color: var(--lp-brand-ink); padding: 3px 9px; border-radius: 999px; font-size: var(--lp-t2); font-weight: 800; letter-spacing: 0.5px;}
@container (max-width: 560px){
#eguru-app .lp-chip-lanjut{display: none;}
}
#eguru-app .lp-h1{font-size: clamp(34px, 4.1cqi, 68px); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; margin: 0px 0px 20px; max-width: 17ch;}
#eguru-app .lp-h1 em{font-style: normal; color: var(--lp-brand);}
#eguru-app .lp-lead{font-size: var(--lp-lead-fs); line-height: 1.62; color: var(--lp-ink-2); margin: 0px 0px 28px; max-width: 58ch;}
#eguru-app .lp-cta-row{display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px;}
@container (max-width: 560px){
#eguru-app .lp-cta-row .lp-btn{width: 100%;}
#eguru-app .lp-cta-row .lp-btn-teks{margin-inline: auto;}
}
#eguru-app .lp-jaminan{display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0px; margin: 0px 0px 16px;}
#eguru-app .lp-jaminan-i{display: inline-flex; align-items: center; gap: 7px; font-size: var(--lp-t4); font-weight: 600; color: var(--lp-muted);}
#eguru-app .lp-jaminan svg{width: 16px; height: 16px; color: var(--lp-brand-2);}
#eguru-app .lp-terbuka{display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--lp-mint); color: var(--lp-brand-ink); font-size: var(--lp-t5); line-height: 1.5; max-width: 62ch;}
#eguru-app .lp-titik{width: 8px; height: 8px; flex: 0 0 8px; margin-top: 6px; border-radius: 50%; background: var(--lp-brand-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-brand-2) 22%, transparent);}
#eguru-app .lp-demo{position: relative; display: grid; gap: 14px; justify-items: stretch;}
@container (max-width: 1250px){
#eguru-app .lp-demo{max-width: 620px; margin-inline: auto; width: 100%;}
}
#eguru-app .lp-dk{background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 16px; box-shadow: var(--lp-shadow);}
#eguru-app .lp-dk-kecil{padding: 12px 16px; font-size: var(--lp-t4); color: var(--lp-ink-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
#eguru-app .lp-dk-kecil b{color: var(--lp-ink); font-weight: 700;}
#eguru-app .lp-dk-lbl{font-size: var(--lp-t1); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--lp-muted); background: var(--lp-soft); padding: 3px 8px; border-radius: 999px;}
#eguru-app .lp-dk-besar{padding: 18px 20px; box-shadow: var(--lp-shadow-lg); border-radius: 18px;}
#eguru-app .lp-anak{display: flex; align-items: center; gap: 10px; justify-content: center; font-size: var(--lp-t2); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--lp-brand-ink);}
#eguru-app .lp-anak::before,#eguru-app .lp-anak::after{content: ""; height: 1px; flex: 1 1 0%; background: linear-gradient(90deg, transparent, var(--lp-line), transparent);}
#eguru-app .lp-anak span{background: var(--lp-mint); padding: 4px 11px; border-radius: 999px; white-space: nowrap;}
#eguru-app .lp-rph-kepala{display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--lp-line);}
#eguru-app .lp-rph-subjek{font-size: var(--lp-t7); font-weight: 800; letter-spacing: -0.01em;}
#eguru-app .lp-rph-kelas{font-size: var(--lp-t3); color: var(--lp-muted); margin-top: 3px;}
#eguru-app .lp-pil{display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; background: var(--lp-mint); color: var(--lp-brand-ink); font-size: var(--lp-t2); font-weight: 700; padding: 5px 10px; border-radius: 999px;}
#eguru-app .lp-pil svg{width: 13px; height: 13px;}
#eguru-app .lp-dl{display: grid; grid-template-columns: auto minmax(0px, 1fr); gap: 8px 14px; margin: 0px; font-size: var(--lp-t4);}
#eguru-app .lp-dl dt{color: var(--lp-muted); font-weight: 600;}
#eguru-app .lp-dl dd{margin: 0px; color: var(--lp-ink);}
#eguru-app .lp-tag-row{display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;}
#eguru-app .lp-tag-row span{font-size: var(--lp-t2); font-weight: 600; color: var(--lp-ink-2); background: var(--lp-soft); border: 1px solid var(--lp-line); padding: 4px 9px; border-radius: 999px;}
#eguru-app .lp-lekat{position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 6; display: none; align-items: center; gap: 12px; padding: 11px var(--lp-gutter) calc(11px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--lp-surface) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--lp-line); transform: translateY(100%); transition: transform 0.25s;}
#eguru-app .lp-lekat .lp-btn{flex: 1 1 0%;}
#eguru-app .lp-lekat-nota{font-size: var(--lp-t3); color: var(--lp-muted); line-height: 1.35; flex: 0 0 auto; max-width: 150px;}
@container (max-width: 1000px){
#eguru-app .lp-lekat{display: flex;}
}
@container (max-width: 560px){
#eguru-app .lp-lekat-nota{display: none;}
}
@supports not (container-type: inline-size){
@media (max-width: 1000px){
#eguru-app .lp-nav-links{display: none;}
#eguru-app .lp-nav-cta{margin-left: auto;}
}
@media (max-width: 560px){
#eguru-app .lp-logo span{display: none;}
#eguru-app .lp-nav-in{gap: 10px;}
#eguru-app .lp-nav-cta{gap: 6px;}
#eguru-app .lp-nav-cta .lp-btn-kecil{height: 38px; padding: 0px 13px; font-size: var(--lp-t4);}
}
@media (max-width: 1250px){
#eguru-app .lp-hero-grid{grid-template-columns: minmax(0px, 1fr); gap: 44px;}
}
@media (max-width: 560px){
#eguru-app .lp-chip-lanjut{display: none;}
}
@media (max-width: 560px){
#eguru-app .lp-cta-row .lp-btn{width: 100%;}
#eguru-app .lp-cta-row .lp-btn-teks{margin-inline: auto;}
}
@media (max-width: 1250px){
#eguru-app .lp-demo{max-width: 620px; margin-inline: auto; width: 100%;}
}
@media (max-width: 1000px){
#eguru-app .lp-lekat{display: flex;}
}
@media (max-width: 560px){
#eguru-app .lp-lekat-nota{display: none;}
}
}
@supports not (width: 1cqi){
#eguru-app .lp{--lp-gutter: clamp(16px, 2.2vw, 56px); --lp-badan: clamp(15.5px, 1.15vw, 17.5px); --lp-lead-fs: clamp(16.5px, 1.25vw, 19.5px); --lp-h3-fs: clamp(20px, 1.8vw, 28px); --lp-h2-fs: clamp(27px, 2.5vw, 42px);}
#eguru-app .lp-hero{padding-block: clamp(44px, 4.6vw, 88px) clamp(56px, 5.5vw, 104px);}
#eguru-app .lp-hero-grid{gap: clamp(36px, 4vw, 72px);}
#eguru-app .lp-h1{font-size: clamp(34px, 4.1vw, 68px);}
#eguru-app .lp-lead{font-size: var(--lp-lead-fs);}
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
#eguru-app .lp-nav{background: var(--lp-bg);}
#eguru-app .lp-hero::before{background: radial-gradient(60% 55% at 22% 12%, transparent 0%, transparent 62%), radial-gradient(48% 48% at 88% 6%, transparent 0%, transparent 58%);}
#eguru-app .lp-titik{box-shadow: 0 0 0 4px var(--lp-line);}
#eguru-app .lp-lekat{background: var(--lp-surface);}
}
#eguru-app .lp-bukti{list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 8px; margin: 4px 0px 16px; padding: 0px; max-width: 620px;}
#eguru-app .lp-bukti li{padding: 10px 12px; border-radius: 12px; background: var(--lp-surface); border: 1px solid var(--lp-line); display: flex; flex-direction: column; box-shadow: var(--lp-shadow);}
#eguru-app .lp-bukti b{font-size: 22px; font-weight: 800; color: var(--lp-ink); line-height: 1.1; letter-spacing: -0.02em;}
#eguru-app .lp-bukti span{font-size: var(--lp-t3); font-weight: 600; color: var(--lp-muted);}
#eguru-app .lp-bukti:has(li[hidden]){grid-template-columns: repeat(3, minmax(0px, 1fr)); max-width: 470px;}
@media (max-width: 560px){
#eguru-app .lp-bukti,#eguru-app .lp-bukti:has(li[hidden]){grid-template-columns: repeat(2, minmax(0px, 1fr));}
}
/* sg_ejen_hab.css */
html,*{-webkit-tap-highlight-color: transparent;}
/* sg_ui2.css */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait){
#eguru-app{--pad-atas: 4px;}
}
@media (min-width: 641px) and (orientation: landscape), (min-width: 1367px){
#eguru-app{--pad-view: 4px; --pad-atas: 4px;}
}
#eguru-app{--modal-gap: 24px; --modal-pad-x: 22px; --modal-rad: 24px;}
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait){
#eguru-app{--modal-gap: 4px; --modal-pad-x: 8px; --modal-rad: 4px;}
}
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait){
#eguru-app :is(div, section, footer):has(> .eksport-baris){width: 100%; max-width: 100%;}
}
/* sg_pakej.css */

/* 19 Okt (CLS): kad statistik hero — ruang DITEMPAH sebelum data pelan_awam tiba (dahulu display:none lalu muncul
   dan menolak .lp-demo ~420px). JS (lpIsiStatistik) memaparkan / menutup jika tiada data. Salinan sg_lp.css 864-870. */
#eguru-app .lp-bukti { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; padding: 0; max-width: 620px; }
#eguru-app .lp-bukti li { padding: 10px 12px; border-radius: 12px; background: var(--lp-surface); border: 1px solid var(--lp-line); display: flex; flex-direction: column; box-shadow: var(--lp-shadow); }
#eguru-app .lp-bukti b { font-size: 22px; font-weight: 800; color: var(--lp-ink); line-height: 1.1; letter-spacing: -.02em; }
#eguru-app .lp-bukti span { font-size: var(--lp-t3); font-weight: 600; color: var(--lp-muted); }
/* 2026-10-10 (pemilik): angka SENTIASA di atas, perkataan di bawah — termasuk item berpautan (<a> dahulu inline -> sebaris). */
#eguru-app .lp-bukti li > a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
#eguru-app .lp-bukti li > a:hover span { color: var(--lp-ink); text-decoration: underline; }
#eguru-app .lp-bukti[data-lp-stat-tunggu] { visibility: hidden; }   /* ruang ditempah; JS buang penanda bila data tiba */

/* 19 Okt (CLS): app DI BELAKANG landing tetamu disorok (visibility) — anjakan semasa JS mengisi Halaman Utama
   (#home-guest-banner, #home-dskp-sell, .pdpr) dikira CLS walaupun ditutup landing. lpKemas() menetapkan
   html.lp-tiada bila landing ditutup / pengguna log masuk (skrip <head> menetapkannya awal bagi guru berdaftar). */
html:not(.lp-tiada) #eguru-app > .topbar, html:not(.lp-tiada) #eguru-app > .main-content, html:not(.lp-tiada) #eguru-app > .bottom-nav { visibility: hidden; }

/* 19 Okt (CLS): peraturan yang tertinggal — grid kad statistik telefon/3 lajur & kotak promo hero (sg_lp.css 263-264, 871-872). */
#eguru-app .lp-terbuka { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--lp-mint); color: var(--lp-brand-ink); font-size: var(--lp-t5); line-height: 1.5; max-width: 62ch; }
#eguru-app .lp-titik { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 6px; border-radius: 50%; background: var(--lp-brand-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-brand-2) 22%, transparent); }
#eguru-app .lp-bukti:has(li[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 470px; }
@media (max-width: 560px) { #eguru-app .lp-bukti, #eguru-app .lp-bukti:has(li[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 19 Okt (audit a11y kesan pertama): sasaran sentuh bar atas >= 44px */
#eguru-app .lp-btn{min-height:44px}
#eguru-app .lp-logo{min-height:44px;min-width:44px;display:inline-flex;align-items:center}

@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait){
#eguru-app{--pad-view: 4px; --pad-atas: 4px;}   /* 21 Okt malam: tepi 4px (Bhg 3) */
}