:root{--dsu-navy:#0b2944;--dsu-blue:#23448c;--dsu-gold:#ffc229;--dsu-teal:#078a86;--dsu-ink:#122842}
body.dsu300-public-body{margin:0!important;background:#edf2f8;font-family:Inter,"Segoe UI",Arial,sans-serif}
body.dsu300-public-body main{width:100%;max-width:none!important;padding:0!important}
.dsu300-public,.dsu300-panel{font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--dsu-ink);font-size:14px;line-height:1.65}
.dsu300-public *,.dsu300-panel *{box-sizing:border-box}
.dsu300-public a{text-decoration:none}
.dsu300-btn{display:inline-flex!important;align-items:center;justify-content:center;border:0;border-radius:12px;padding:11px 18px;font:700 14px/1.4 Inter,"Segoe UI",Arial,sans-serif;text-decoration:none!important;cursor:pointer;transition:filter .2s}
.dsu300-btn:hover{filter:brightness(.94)}.dsu300-btn:focus-visible{outline:3px solid #f3b523;outline-offset:3px}
.dsu300-btn-gold{background:#ffc229!important;color:#102a50!important}
.dsu300-btn-blue{background:#23448c!important;color:#fff!important}
.dsu300-btn-light{background:#3153a6!important;color:#fff!important}
.dsu300-btn-outline{border:1px solid #b5c6dd!important;background:#fff!important;color:#1b487a!important}
.dsu300-nav{background:#203d88;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px clamp(20px,4vw,60px)}
.dsu300-brand{display:flex;align-items:center;gap:13px}.dsu300-brand>span{background:#ffc229;color:#152c65;font-weight:900;border-radius:13px;padding:12px 15px;font-size:21px}
.dsu300-brand strong{font-size:17px;display:block}.dsu300-brand small{display:block;color:#ffdc7c;font-size:12px}
.dsu300-nav nav{display:flex;align-items:center;flex-wrap:wrap;gap:18px}
.dsu300-nav nav>a:not(.dsu300-btn){color:white;font-weight:600}
.dsu300-hero{background:linear-gradient(125deg,#172a59,#24468f);color:white;display:grid;grid-template-columns:1.12fr 1fr;gap:40px;align-items:center;padding:65px clamp(20px,4vw,60px)}
.dsu300-kicker{color:#ffca46;font-size:12px;font-weight:850;letter-spacing:.6px}
.dsu300-hero h1{font-size:clamp(33px,4vw,59px)!important;line-height:1.12!important;color:#fff!important;margin:24px 0!important;font-weight:900}
.dsu300-hero h1 em{font-style:normal;color:#ffc229}.dsu300-hero p{font-size:16px;line-height:1.75;color:#e2eafc;max-width:650px}
.dsu300-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.dsu300-hero-visual{min-height:350px;background:linear-gradient(130deg,#fff,#cddfe8);border-radius:25px;display:flex;justify-content:center;align-items:center;gap:15px;font-size:clamp(50px,7vw,100px);box-shadow:0 15px 50px #071b3f70}
.dsu300-services,.dsu300-news{padding:50px clamp(20px,4vw,60px)}
.dsu300-services h2,.dsu300-news h2{font-size:clamp(24px,3vw,36px)!important;color:#102644!important;text-align:center;margin:0 0 35px!important}
.dsu300-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.dsu300-grid3 article{background:white;padding:26px;border:1px solid #dce4ef;border-radius:23px;box-shadow:0 6px 18px #1534580b}
.dsu300-grid3 article>span{font-size:32px}.dsu300-grid3 h3{font-size:19px!important;color:#102644!important;margin:15px 0}
.dsu300-grid3 article>img{width:100%;height:180px;object-fit:cover;border-radius:12px}
.dsu300-grid3 p{color:#4e617c}.dsu300-news{background:#e6edf7}
.dsu300-overlay[hidden]{display:none!important}.dsu300-overlay{position:fixed;inset:0;z-index:999999;background:#0b1731b8;backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;padding:15px;overflow:auto}
.dsu300-modal{position:relative;background:white;border-radius:27px;max-width:540px;width:100%;padding:32px clamp(20px,3vw,45px);box-shadow:0 15px 60px #020b2599;text-align:center}
.dsu300-login-logo{display:inline-flex;align-items:center;justify-content:center;background:#23448c;color:#ffc229;border-radius:17px;height:80px;width:100px;font-size:22px;font-weight:900}
.dsu300-modal h2{font-size:27px!important;color:#0e203d!important;margin:17px 0 2px!important}
.dsu300-modal>p{color:#70819b;margin:0 0 22px}.dsu300-modal form{text-align:left}
.dsu300-modal label,.dsu300-booking label{display:block;font-weight:700;color:#2c3e57;margin:12px 0}
.dsu300-modal input,.dsu300-modal select,.dsu300-booking input:not([type=checkbox]),.dsu300-booking select{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid #cad7e7;border-radius:11px;background:#f8fafc;font:inherit;color:#20334c}
.dsu300-modal input:focus,.dsu300-modal select:focus,.dsu300-booking input:focus,.dsu300-booking select:focus{outline:2px solid #4c83d6}
.dsu300-full{width:100%;margin-top:10px}.dsu300-modal-links{display:flex;justify-content:center;gap:20px;margin-top:18px}
.dsu300-modal-links a{color:#214a98;text-decoration:underline}.dsu300-close{position:absolute;top:13px;right:18px;background:none;border:0;color:#8494aa;font-size:30px;cursor:pointer}
.dsu300-error{color:#aa3045!important}
.dsu300-panel{background:#fff;border:1px solid #d9e5f1;border-radius:18px;padding:clamp(16px,2.3vw,28px);margin:16px 0;box-shadow:0 5px 22px #1027440a}
.dsu300-pagehead{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:23px}
.dsu300-pagehead small{font-size:11px;letter-spacing:1px;font-weight:800;color:#078a86}
.dsu300-pagehead h2{font-size:26px!important;margin:3px 0!important;color:#102644!important}
.dsu300-pagehead p{margin:0!important;color:#687b93}
.dsu300-steps{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.dsu300-steps span{background:#e9f0f7;color:#536880;padding:10px 14px;border-radius:10px;font-weight:750}.dsu300-steps span.active{background:#21458d;color:#fff}
.dsu300-formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.dsu300-step h3,.dsu300-records h3{font-size:20px!important;color:#102644!important;margin:20px 0!important}
.dsu300-stepactions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin:24px 0}
.dsu300-member{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;border:1px solid #e2eaf4;border-radius:12px;padding:12px;margin:8px 0}
.dsu300-member small{grid-column:1/-1;color:#536b82}.dsu300-member label{margin:0}
.dsu300-note{color:#6a7890;font-size:13px}
.dsu300-summary{background:#f3f7fc;border-radius:12px;padding:16px}
.dsu300-summary table,.dsu300-records table{width:100%;border-collapse:collapse;font-size:13px}
.dsu300-summary td,.dsu300-records td,.dsu300-records th{padding:12px;border-bottom:1px solid #e2eaf2;text-align:left;vertical-align:top}
.dsu300-records th{background:#153d79;color:#fff;font-weight:700}
.dsu300-records tbody tr:nth-child(even){background:#f6f9fc}
.dsu300-tablewrap{overflow-x:auto}.dsu300-status{background:#e5edf8;color:#23448c;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:750}
.dsu300-notice{background:#e7f7f0;border-left:4px solid #0d997c;padding:12px}
.dsu300-statgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.dsu300-stat{border-radius:15px;background:var(--c);color:#fff;padding:18px;min-width:0}.dsu300-stat span{display:block;font-size:12px;font-weight:650}.dsu300-stat strong{display:block;font-size:29px;margin-top:8px}
.dsu300-chartgrid{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;margin-top:18px}
.dsu300-chartbox{border:1px solid #dce5ef;border-radius:16px;padding:20px;min-width:0}
.dsu300-chartbox h3{font-size:18px!important;margin:0 0 17px!important}
.dsu300-donut{width:190px;height:190px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:auto}
.dsu300-donut>div{width:125px;height:125px;border-radius:50%;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:31px;font-weight:850}
.dsu300-donut small{font-size:12px;color:#7b8ba1;font-weight:500}
.dsu300-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:15px}.dsu300-legend span{font-size:11px}
.dsu300-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.dsu300-bars{height:225px;display:flex;gap:12px;align-items:end;justify-content:space-around;padding-top:25px}
.dsu300-baritem{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;min-width:0}
.dsu300-baritem>div{width:clamp(18px,3vw,44px);background:linear-gradient(0deg,#0e8b89,#3d71bd);border-radius:7px 7px 0 0}
.dsu300-baritem strong{font-size:12px}.dsu300-baritem small{font-size:11px;color:#6b7c94}
.dsu9-layout>main a.dsu300-action{display:inline-flex!important;padding:8px 13px!important;border-radius:9px!important;background:#0b6b80!important;color:white!important;text-decoration:none!important;font-weight:700!important;margin:3px!important}
.dsu9-layout>main :is(h1,h2,h3,h4){line-height:1.35!important}
.dsu9-layout>main :is(table){border-collapse:collapse;width:100%}
.dsu9-layout>main :is(th){background:#214480;color:#fff;padding:11px}
.dsu9-layout>main :is(td){padding:10px;border-bottom:1px solid #e1e8f1}
.dsu9-layout>main :is(tr:nth-child(even)){background:#f5f8fc}
@media(max-width:900px){.dsu300-hero{grid-template-columns:1fr}.dsu300-grid3{grid-template-columns:1fr}.dsu300-chartgrid{grid-template-columns:1fr}.dsu300-statgrid{grid-template-columns:repeat(2,1fr)}.dsu300-nav{flex-direction:column;align-items:flex-start}}
@media(max-width:600px){.dsu300-formgrid{grid-template-columns:1fr}.dsu300-hero-visual{min-height:180px}.dsu300-hero{padding-top:35px;padding-bottom:35px}.dsu300-modal{padding:22px}.dsu300-statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Booking slots and resources */
.dsu310-slotfield{grid-column:1/-1}
.dsu310-slotgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 20px}
.dsu310-slot{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;border:2px solid #09b783;background:#edfbf5;color:#123e3b;border-radius:16px;padding:17px;cursor:pointer;min-height:85px}
.dsu310-slot strong{font-size:15px}.dsu310-slot small{font-size:12px;color:#07885e}
.dsu310-slot.unavailable{border-color:#f1c3ca;background:#fff6f7;color:#a45b69;cursor:not-allowed}.dsu310-slot.unavailable small{color:#c85b6c}
.dsu310-slot.selected{outline:3px solid #23448c;outline-offset:2px;background:#d5f6e7}
.dsu310-checkgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 24px}
.dsu310-checkgrid label{display:flex;gap:10px;align-items:center;border:1px solid #d8e8e4;background:#f4fcf9;border-radius:14px;padding:15px;margin:0;cursor:pointer}
.dsu310-checkgrid input{width:18px;height:18px;flex-shrink:0}
.dsu310-rice{border:1px solid #f5ca65;background:#fff9e7;border-radius:15px;padding:17px;margin:15px 0}
.dsu310-rice label{margin:0!important}.dsu310-rice small{display:block;color:#9a601f;margin-top:6px}
@media(max-width:760px){.dsu310-slotgrid,.dsu310-checkgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.dsu310-slotgrid,.dsu310-checkgrid{grid-template-columns:1fr}}

/* Portal public refinements v3.2 */
.dsu300-nav .dsu300-navlink{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid #ffffff38;border-radius:10px;background:#ffffff0c;color:#fff;text-decoration:none}
.dsu300-nav .dsu300-navlink:hover{background:#ffffff25}
.dsu300-hero-visual{overflow:hidden;padding:0;min-height:350px}
.dsu320-hero-image{width:100%;height:100%;min-height:350px;max-height:540px;object-fit:cover;display:block}
.dsu320-hero-art{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;height:100%;min-height:350px}
@media(max-width:600px){.dsu320-hero-image,.dsu320-hero-art{min-height:200px}.dsu300-nav nav{gap:8px}}

/* Logo rasmi pada portal awam dan popup log masuk */
.dsu300-brand .dsu322-brand-image{display:block;width:85px;height:85px;max-width:30vw;object-fit:contain;flex-shrink:0;background:transparent;padding:0;border-radius:0}
.dsu300-modal .dsu322-login-image{display:block;width:165px;height:165px;max-width:65%;object-fit:contain;margin:0 auto 8px;background:transparent}
@media(max-width:600px){.dsu300-brand .dsu322-brand-image{width:66px;height:66px}.dsu300-modal .dsu322-login-image{width:135px;height:135px}}

/* v3.2.3: official branding on public portal and login */
.dsu300-public .dsu300-brand{display:flex;align-items:center;gap:16px}
.dsu300-public .dsu300-brand strong{font-size:19px!important;line-height:1.3!important;color:#fff!important;font-weight:800!important}
.dsu300-public .dsu300-brand .dsu322-brand-image{width:115px!important;height:105px!important;object-fit:contain!important}
.dsu300-modal .dsu322-login-image{display:block!important;width:190px!important;height:190px!important;max-width:65%!important;object-fit:contain!important;margin:0 auto 12px!important;background:transparent!important}
@media(max-width:650px){.dsu300-public .dsu300-brand .dsu322-brand-image{width:76px!important;height:80px!important}.dsu300-public .dsu300-brand strong{font-size:15px!important}.dsu300-modal .dsu322-login-image{width:145px!important;height:145px!important}}

/* v3.2.4: reference image branding, preserve public portal and login layout */
.dsu300-public .dsu300-nav{background:linear-gradient(110deg,#193c83,#164b9c);}
.dsu300-public .dsu300-brand .dsu322-brand-image{width:145px!important;height:145px!important;max-width:24vw!important;object-fit:contain!important;}
.dsu300-public .dsu300-brand strong{font-size:18px!important;color:#fff!important;}
.dsu300-modal .dsu322-login-image{width:205px!important;height:205px!important;max-width:70%!important;object-fit:contain!important;}
@media(max-width:650px){.dsu300-public .dsu300-brand .dsu322-brand-image{width:80px!important;height:80px!important}.dsu300-modal .dsu322-login-image{width:155px!important;height:155px!important}}

/* 3.2.6: Foto sebenar Photobook Dapur Siswa Madani, muka surat 11.
   Lapisan navy separa legap memastikan teks kekal jelas. */
body.dsu300-public-body .dsu300-hero {
  background-image: linear-gradient(100deg,rgba(12,29,70,.94) 0%,rgba(18,45,98,.90) 49%,rgba(19,48,106,.79) 100%),url('photobook-dapur-siswa-background-v326.webp?v=326')!important;
  background-size:cover!important;
  background-position:center 46%!important;
  background-repeat:no-repeat!important;
}
body.dsu300-public-body .dsu300-hero-visual {
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.3)!important;
  padding:8px!important;
  overflow:hidden!important;
  backdrop-filter:blur(4px);
}
body.dsu300-public-body .dsu326-photobook-hero {
  display:block!important;
  width:100%!important;
  height:350px!important;
  max-width:100%!important;
  object-fit:cover!important;
  object-position:center 54%!important;
  border-radius:18px!important;
}
@media(max-width:600px){body.dsu300-public-body .dsu326-photobook-hero{height:235px!important}}

/* 3.2.7 - photobook page 1, actual hero selectors (independent of body classes) */
.dsu300-hero{background-image:linear-gradient(100deg,rgba(10,30,71,.96) 0%,rgba(12,38,89,.91) 48%,rgba(16,53,112,.70) 100%),url('photobook-muka-pertama-background-v327.webp?v=327')!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important}
.dsu300-hero .dsu300-hero-visual{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.35)!important;overflow:hidden!important;padding:7px!important;backdrop-filter:blur(3px)}
.dsu300-hero .dsu326-photobook-hero{display:block!important;width:100%!important;max-width:100%!important;height:350px!important;object-fit:cover!important;object-position:center 52%!important;border-radius:19px!important}
@media(max-width:600px){.dsu300-hero .dsu326-photobook-hero{height:235px!important}}

/* Paparan berita tiga kad & logo navigasi lebih kemas (3.2.8) */
.dsu300-public .dsu300-nav .dsu322-brand-image{width:110px!important;height:110px!important;max-width:110px!important;object-fit:contain!important}
.dsu300-public .dsu328-info-icon{font-size:42px;line-height:1.4;margin-bottom:12px}
.dsu300-public .dsu328-info-card{display:flex;flex-direction:column}
.dsu300-public .dsu328-info-card .dsu300-btn{margin-top:auto;align-self:flex-start}
@media(max-width:700px){.dsu300-public .dsu300-nav .dsu322-brand-image{width:76px!important;height:76px!important}}

/* Berita photobook v3.2.9 */
.dsu300-public .dsu329-news-intro{text-align:center;color:#52647e;max-width:750px;margin:-15px auto 28px}
.dsu300-public .dsu329-story{display:flex;flex-direction:column;overflow:hidden}
.dsu300-public .dsu329-story img{height:215px;object-fit:cover;object-position:center top;width:100%}
.dsu300-public .dsu329-story small{display:block;color:#315e9e;font-weight:700;margin-top:14px}
.dsu300-public .dsu329-story p{flex:1}
.dsu300-public .dsu329-story .dsu300-btn{align-self:flex-start;margin-top:12px}

/* v3.3.2: announcements below portal, not above header */
.dsu332-bottom-announcements{display:block;clear:both;width:100%;position:relative;z-index:1}.dsu332-bottom-announcements > *{margin-top:0}.dsu332-already{padding:12px 0;text-align:center}.dsu332-already .dsu300-btn{margin:6px}