:root {
  --navy: #122a2c;
  --navy-soft: #1a3839;
  --green: #0f766e;
  --green-dark: #0a5c56;
  --mint: #dff4ed;
  --lime: #b9e8c8;
  --cream: #f7f5ef;
  --paper: #fff;
  --ink: #1c3031;
  --muted: #708081;
  --line: #e5e9e5;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--cream); }
button, input { font: inherit; }
svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.dashboard-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 250px; padding: 30px 22px;
  display: flex; flex-direction: column; color: white; background:
  radial-gradient(circle at 0 100%, rgba(104, 193, 163, .18), transparent 35%),
  linear-gradient(160deg, var(--navy-soft), var(--navy));
}
.brand { display: flex; align-items: center; gap: 12px; color: white; text-decoration: none; padding: 0 8px 34px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; background: #e5f4e7; color: var(--green-dark); }
.brand-mark svg { width: 25px; fill: currentColor; stroke: none; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 19px; letter-spacing: -.4px; }
.brand strong span { color: #ffc4dc; }
.brand small { margin-top: 2px; color: #aac0bd; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; }
.nav-label { margin: 32px 12px 13px; color: #78918f; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; }
.nav-item { display: flex; align-items: center; gap: 15px; height: 57px; margin: 7px 0; padding: 0 15px; border-radius: 12px; color: #abc0bd; text-decoration: none; font-size: 17px; font-weight: 600; }
.nav-item svg { width: 23px; }
.nav-item:hover, .nav-item.active { color: white; background: rgba(255,255,255,.1); }
.nav-item.active { box-shadow: inset 3px 0 var(--lime); }
.sidebar-help { margin-top: auto; padding: 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.06); }
.help-icon { width: 34px; height: 34px; margin-bottom: 14px; display: grid; place-items: center; border-radius: 9px; color: var(--navy); background: var(--lime); font-size: 16px; font-weight: 700; }
.sidebar-help strong { font-size: 21px; line-height: 1.25; }
.sidebar-help p { margin: 12px 0 0; color: #b2c6c3; font-size: 15px; line-height: 1.6; }
.sidebar-footer { margin: 24px 8px 0; color: #b3c7c4; font-size: 14px; font-weight: 600; line-height: 1.6; }
.complaint-trigger { width: 100%; margin-top: 18px; padding: 14px 12px; border: 0; border-radius: 12px; color: white; background: linear-gradient(100deg, var(--coral), var(--orange)); font-size: 16px; font-weight: 700; cursor: pointer; }

.page { grid-column: 2; min-width: 0; }
.topbar { min-height: 205px; padding: 20px clamp(28px, 5vw, 70px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.72); backdrop-filter: blur(10px); }
.school-heading { display: flex; align-items: center; gap: 18px; }
.school-logo { width: 152px; height: 152px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(20,52,49,.2)); }
.delima-title { margin: 0 0 8px; color: #f28ca0; font-family: "Titan One", "Trebuchet MS", sans-serif; font-size: 54px; font-weight: 400; line-height: .9; letter-spacing: .2px; -webkit-text-stroke: 2px #fff2d8; paint-order: stroke fill; text-shadow: 3px 4px 0 #17353a; }
.topbar h2 { margin: 0; font-family: "Chakra Petch", "Arial Narrow", sans-serif; font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: .2px; }
.school-name { display:flex; justify-content:space-between; margin: 7px 0 0; color: #55706b; font-size: 17px; font-weight: 700; letter-spacing: 0; white-space:nowrap; }
.live-datetime { display: grid; min-width: 230px; color: var(--green); font-size: 18px; font-weight: 700; line-height: 1.42; letter-spacing: .1px; text-align: right; }
.live-datetime span { display: block; }
.live-datetime .date-day { color: var(--ink); font-size: 23px; text-transform: capitalize; }
.live-datetime .date-time { color: var(--green-dark); font-variant-numeric: tabular-nums; }
.top-actions { display: flex; align-items: center; gap: 20px; }
.status { padding: 7px 11px; border: 1px solid #d5e9df; border-radius: 99px; color: var(--green); background: #eff9f4; font-size: 10px; font-weight: 700; }
.status i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #36a875; box-shadow: 0 0 0 3px rgba(54,168,117,.13); }

main { padding: 48px clamp(28px, 5vw, 70px) 40px; }
.hero-grid { max-width: 1120px; margin: auto; min-height: 500px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(370px, .8fr); align-items: center; gap: clamp(45px, 7vw, 100px); }
.hero-copy { padding: 20px 0; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 7px; color: var(--green); background: var(--mint); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; }
.badge svg { width: 15px; fill: currentColor; stroke: none; }
h1 { margin: 23px 0 20px; font-size: clamp(48px, 5.5vw, 76px); line-height: 1.03; letter-spacing: -3.5px; }
h1 em { color: var(--green); font-family: "Playfair Display", Georgia, serif; font-weight: 600; }
.hero-copy > p { max-width: 550px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.trust-row { display: flex; align-items: center; margin-top: 38px; }
.trust-row > span { min-width: 145px; padding: 0 28px; border-left: 1px solid #d9deda; }
.trust-row > span:first-child { padding-left: 0; border-left: 0; }
.trust-row b, .trust-row small { display: block; }
.trust-row b { color: var(--green); font-size: 34px; line-height: 1; letter-spacing: -1px; }
.trust-row small { margin-top: 7px; color: #667b78; font-size: 14px; font-weight: 600; }

.search-card { padding: 30px; border: 1px solid rgba(21,74,68,.09); border-radius: 20px; background: var(--paper); box-shadow: 0 25px 70px rgba(26,57,52,.12); }
.card-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 27px; padding-bottom: 21px; border-bottom: 1px solid #edf0ed; }
.card-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--green); }
.card-icon svg { width: 19px; }
.card-heading h3 { margin: 0 0 7px; font-size: 28px; line-height: 1.15; letter-spacing: -.5px; }
.card-heading p { margin: 0; color: #718582; font-size: 17px; line-height: 1.4; }
label { display: block; margin: 0 0 11px 2px; font-size: 16px; font-weight: 700; }
.input-wrap { position: relative; }
input { width: 100%; height: 58px; padding: 0 70px 0 47px; border: 1px solid #dce2de; border-radius: 10px; outline: 0; color: var(--ink); background: #fbfcfa; font-size: 13px; font-weight: 600; letter-spacing: .5px; transition: .2s; }
input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(15,118,110,.09); }
.input-icon { position: absolute; left: 16px; top: 18px; width: 20px; color: #758783; }
.digit-count { position: absolute; right: 14px; top: 20px; color: #87938f; font-size: 9px; font-weight: 700; }
.message-row { min-height: 32px; display: flex; justify-content: space-between; gap: 8px; padding: 7px 2px 4px; }
.input-help, .error { margin: 0; font-size: 13px; }
.input-help { color: #899592; }
.error { color: #b33a3a; font-weight: 700; text-align: right; }
button { border: 0; cursor: pointer; font: inherit; }
#search-button { width: 100%; height: 60px; padding: 0 18px; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 10px; color: white; background: var(--green); font-size: 17px; font-weight: 700; box-shadow: 0 10px 25px rgba(15,118,110,.2); transition: .2s; }
#search-button svg { position: absolute; right: 18px; width: 18px; }
#search-button:hover { background: var(--green-dark); transform: translateY(-1px); }
#search-button:disabled { opacity: .65; cursor: wait; transform: none; }
.privacy-note { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 18px; color: #7c8b88; }
.privacy-note svg { width: 16px; color: var(--green); }
.privacy-note p { margin: 0; font-size: 11px; line-height: 1.5; }
.privacy-note strong { color: #435b57; font-size: 15px; }

.results { max-width: 900px; margin: 20px auto 45px; }
.print-action { max-width: 900px; margin: 18px auto 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.print-cards-button { width:100%; min-height:76px; display:flex; align-items:center; gap:14px; padding:13px 16px; border:2px dashed #f3b2cf; border-radius:18px; color:#874f7c; background:rgba(255,249,252,.92); box-shadow:0 10px 24px rgba(190,91,142,.1); cursor:pointer; text-align:left; transition:transform .2s, box-shadow .2s; }
.print-cards-button:hover { transform:translateY(-2px); box-shadow:0 15px 28px rgba(190,91,142,.16); }
.print-button-icon { width:45px; height:45px; display:grid; place-items:center; flex:none; border-radius:14px; color:white; background:linear-gradient(145deg,#ff7caf,#bd8eec); font-size:25px; box-shadow:0 7px 14px rgba(236,108,166,.25); }
.print-cards-button strong,.print-cards-button small { display:block; }
.print-cards-button strong { font-size:16px; }
.print-cards-button small { margin-top:3px; color:#a7819e; font-size:11px; font-weight:600; }
.print-button-arrow { margin-left:auto; color:#e5679f; font-size:25px; }
.print-area { display:none; }
.result-heading { margin: 0 0 14px; color: var(--green); font-size: 15px; font-weight: 700; text-align: center; }
.result-card { overflow: hidden; margin-top: 14px; border: 1px solid #dfe5e0; border-radius: 17px; background: white; box-shadow: 0 15px 40px rgba(29,58,53,.08); }
.result-name { padding: 22px 25px; color: white; background: linear-gradient(115deg, var(--green-dark), var(--green)); }
.result-name small { display: block; margin-bottom: 7px; color: #b9ddd7; font-size: 11px; letter-spacing: 1.4px; }
.result-name h2 { margin: 0; font-size: 25px; line-height: 1.35; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; }
.field { padding: 20px 24px; border-bottom: 1px solid #edf0ed; }
.field:nth-child(odd) { border-right: 1px solid #edf0ed; }
.field.wide { grid-column: 1 / -1; border-right: 0; }
.field span { display: block; margin-bottom: 7px; color: #87938f; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.field strong { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.credential { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.copy-btn, .reveal-btn { height: 38px; padding: 0 15px; border: 1px solid #cfe0da; border-radius: 9px; color: var(--green); background: #f0f8f4; font-size: 13px; font-weight: 700; }

.guide-section { max-width: 1120px; margin: 70px auto 20px; padding-top: 40px; border-top: 1px solid #dde2de; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 25px; }
.section-heading span { color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; }
.section-heading h2 { margin: 9px 0 0; font-size: 36px; line-height: 1.15; letter-spacing: -1px; }
.section-heading > p { max-width: 430px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps article { position: relative; min-height: 235px; padding: 30px; overflow: hidden; border: 1px solid #e1e6e2; border-radius: 14px; background: rgba(255,255,255,.7); }
.step-number { position: absolute; top: 10px; right: 17px; color: #e5e9e5; font-family: "Playfair Display", serif; font-size: 54px; font-style: italic; }
.step-icon { width: 48px; height: 48px; margin-bottom: 28px; display: grid; place-items: center; border-radius: 12px; color: var(--green); background: var(--mint); }
.step-icon svg { width: 23px; }
.steps h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; }
.steps h3 a { color: inherit; text-decoration: none; }
.steps h3 a:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
footer { max-width: 1120px; margin: 50px auto 0; padding: 22px 0 5px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #dfe4df; color: #8b9694; font-size: 8px; }
.visitor-counter { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 99px; color: var(--green-dark); background: var(--mint); font-size: 10px; font-weight: 700; }
.visitor-counter i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(255,104,79,.15); }
.visitor-counter b { color: var(--ink); font-size: 11px; }

.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(12,35,38,.7); backdrop-filter: blur(6px); }
.modal-card { position: relative; z-index: 1; width: min(680px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 34px; border: 2px solid rgba(255,255,255,.8); border-radius: 26px; background: linear-gradient(155deg, #fffefb, #e7f5e4); box-shadow: 0 30px 90px rgba(5,24,26,.32); }
.modal-close { position: absolute; top: 17px; right: 18px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #58706d; background: #e4eee6; font-size: 25px; line-height: 1; cursor: pointer; }
.modal-heading { display: flex; align-items: center; gap: 14px; }
.modal-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: white; background: linear-gradient(145deg, var(--coral), var(--orange)); font-size: 24px; font-weight: 700; }
.modal-heading p { margin: 0 0 4px; color: var(--green-dark); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; }
.modal-heading h2 { margin: 0; font-size: 28px; }
.modal-intro { margin: 18px 0 24px; color: var(--muted); font-size: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.form-field.full { grid-column: 1 / -1; }
.form-field { position: relative; }
.form-field label { font-size: 13px; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 2px solid #d9e6dc; border-radius: 12px; outline: 0; color: var(--ink); background: rgba(255,255,255,.9); font: inherit; font-size: 14px; }
.form-field input, .form-field select { height: 50px; padding: 0 14px; }
.form-field textarea { padding: 13px 14px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(8,165,143,.09); }
.textarea-count { position: absolute; right: 11px; bottom: 9px; color: #81918e; font-size: 9px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.complaint-status { min-height: 21px; margin: 13px 0 8px; font-size: 12px; font-weight: 700; text-align: center; }
.complaint-status.success { color: var(--green-dark); }
.complaint-status.failed { color: #b33a3a; }
.complaint-submit { width: 100%; height: 56px; display: flex; align-items: center; justify-content: center; position: relative; border: 0; border-radius: 13px; color: white; background: linear-gradient(100deg, var(--coral), var(--orange)); font-size: 16px; font-weight: 700; cursor: pointer; }
.complaint-submit svg { position: absolute; right: 18px; width: 19px; }
.complaint-submit:disabled { opacity: .65; cursor: wait; }
.complaint-privacy { margin: 12px 0 0; color: #768985; font-size: 10px; text-align: center; }
.modal-open { overflow: hidden; }

@media (max-width: 980px) {
  .dashboard-shell { grid-template-columns: 78px minmax(0,1fr); }
  .sidebar { width: 78px; padding: 25px 13px; align-items: center; }
  .brand { padding: 0 0 25px; }
  .brand > span:last-child, .nav-label, .nav-item:not(.active), .nav-item.active { font-size: 0; }
  .nav-item { width: 48px; justify-content: center; padding: 0; }
  .nav-item svg { width: 20px; }
  .sidebar-help, .sidebar-footer { display: none; }
  .page { grid-column: 2; }
  .hero-grid { grid-template-columns: 1fr; max-width: 680px; gap: 25px; }
  .hero-copy { text-align: center; }
  .hero-copy > p { margin: auto; }
  .trust-row { justify-content: center; }
}

@media (max-width: 650px) {
  .dashboard-shell { display: block; }
  .sidebar { position: static; width: 100%; height: 67px; padding: 12px 18px; flex-direction: row; justify-content: space-between; }
  .brand { padding: 0; border: 0; }
  .brand > span:last-child { display: block; }
  .brand-mark { width: 39px; height: 39px; }
  .sidebar nav { display: flex; }
  .nav-label, .nav-item:not(.active) { display: none; }
  .nav-item.active { width: 42px; height: 42px; margin: 0; box-shadow: none; }
  .page { width: 100%; }
  .topbar { min-height: 154px; padding: 11px 16px; }
  .school-heading { gap: 10px; }
  .school-logo { width: 96px; height: 96px; }
  .delima-title { margin-bottom: 5px; font-size: 36px; -webkit-text-stroke-width: 1px; text-shadow: 2px 3px 0 #17353a; }
  .topbar h2 { max-width: 205px; font-size: 18px; line-height: 1.15; }
  .school-name { margin-top: 4px; font-size: 12px; }
  .top-actions { gap: 0; }
  .live-datetime { min-width: 120px; font-size: 12px; }
  .live-datetime .date-day { font-size: 15px; }
  .status { display: none; }
  main { padding: 35px 18px 25px; }
  .hero-grid { display: block; min-height: 0; }
  .hero-copy { padding: 0 0 30px; }
  h1 { margin-top: 18px; font-size: 45px; letter-spacing: -2.5px; }
  .hero-copy > p { font-size: 15px; }
  .trust-row { margin-top: 27px; }
  .trust-row > span { min-width: 98px; padding: 0 12px; }
  .trust-row b { font-size: 27px; }
  .trust-row small { margin-top: 5px; font-size: 11px; }
  .search-card { padding: 22px; border-radius: 16px; }
  .message-row { min-height: 38px; }
  .guide-section { margin-top: 50px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 10px; }
  .steps { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .field, .field:nth-child(odd) { border-right: 0; }
  .result-name h2 { font-size: 21px; }
  .field strong { font-size: 15px; }
  .field span { font-size: 10px; }
  .copy-btn, .reveal-btn { font-size: 12px; }
  footer { display: flex; flex-direction: column; text-align: center; }
  footer span { margin: 2px; }
  .section-heading span { font-size: 11px; }
  .section-heading h2 { font-size: 30px; }
  .section-heading > p { font-size: 14px; }
  .steps article { min-height: 215px; padding: 26px; }
  .step-number { font-size: 48px; }
  .steps h3 { font-size: 18px; }
  .steps p { font-size: 14px; }
}

/* Tema dashboard ceria — diinspirasikan oleh rujukan lampiran */
:root {
  --navy: #17353a;
  --navy-soft: #21484b;
  --green: #08a58f;
  --green-dark: #087e73;
  --mint: #dff3df;
  --lime: #a9e6c3;
  --cream: #f4f7ed;
  --paper: #fffefb;
  --ink: #17383a;
  --muted: #718987;
  --line: #dce9df;
  --coral: #ff684f;
  --orange: #ffad45;
  --blue: #4d91e8;
}

body {
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 173, 69, .13), transparent 22%),
    radial-gradient(circle at 38% 80%, rgba(8, 165, 143, .11), transparent 25%),
    var(--cream);
}

.sidebar {
  background:
    radial-gradient(circle at 12% 88%, rgba(255,104,79,.24), transparent 28%),
    radial-gradient(circle at 95% 8%, rgba(8,165,143,.2), transparent 25%),
    linear-gradient(155deg, #21494b, #142f34 70%);
}

.brand-mark {
  border-radius: 15px;
  background: linear-gradient(145deg, #f0faed, #bde8ce);
  box-shadow: 0 8px 20px rgba(0,0,0,.16);
}

.nav-item { border-radius: 14px; }
.nav-item.active {
  color: #17383a;
  background: var(--lime);
  box-shadow: 0 8px 20px rgba(6, 25, 26, .18);
}
.nav-item.active svg { color: var(--green-dark); }
.sidebar-help { border-radius: 20px; background: rgba(255,255,255,.08); }
.help-icon { color: white; background: linear-gradient(145deg, var(--coral), var(--orange)); box-shadow: 0 7px 15px rgba(255,104,79,.22); }

.topbar {
  border-bottom-color: #dbe8dc;
  background: rgba(255, 254, 249, .84);
  box-shadow: 0 5px 24px rgba(31,74,67,.05);
}
.school-logo { filter: drop-shadow(0 8px 12px rgba(20,52,49,.16)); }
.status {
  border: 0;
  color: var(--green-dark);
  background: var(--mint);
  box-shadow: inset 0 0 0 1px rgba(8,165,143,.12);
}
.status i { background: var(--green); }

.hero-grid { position: relative; }
.hero-grid::before, .hero-grid::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
}
.hero-grid::before { width: 70px; height: 70px; top: 35px; left: -35px; background: rgba(255,104,79,.1); }
.hero-grid::after { width: 45px; height: 45px; right: -15px; bottom: 45px; background: rgba(77,145,232,.12); }
.badge { padding: 9px 13px; border-radius: 99px; color: #b94332; background: #ffe1d9; }
h1 em { color: var(--coral); }
.trust-row b { color: var(--green-dark); }
.trust-row > span:nth-child(2) b { color: var(--coral); }
.trust-row > span:nth-child(3) b { color: var(--blue); }

.search-card {
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 28px;
  background: linear-gradient(155deg, #f4fff4, #dff1df);
  box-shadow: 0 28px 0 -18px rgba(17,95,82,.14), 0 28px 70px rgba(31,88,76,.16);
}
.card-heading { border-bottom-color: rgba(23,56,58,.09); }
.card-icon {
  border-radius: 14px;
  background: linear-gradient(145deg, var(--coral), #ff865f);
  box-shadow: 0 8px 18px rgba(255,104,79,.24);
  transform: rotate(-3deg);
}
input { border: 2px solid #d7e7da; border-radius: 14px; background: rgba(255,255,255,.9); }
input:focus { border-color: var(--green); box-shadow: 0 0 0 5px rgba(8,165,143,.11); }
#search-button {
  border-radius: 14px;
  background: linear-gradient(100deg, var(--coral), var(--orange));
  box-shadow: 0 12px 26px rgba(255,104,79,.27);
}
#search-button:hover { background: linear-gradient(100deg, #ef573f, #f69c32); }

.result-card { border-radius: 23px; border-color: #d8e8da; box-shadow: 0 18px 45px rgba(29,78,69,.11); }
.result-name { background: linear-gradient(110deg, var(--green-dark), var(--green)); }
.copy-btn, .reveal-btn { border: 0; border-radius: 9px; background: var(--mint); }

.guide-section { border-top-color: #d8e6d9; }
.steps article {
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(226,243,225,.82));
  box-shadow: 0 12px 30px rgba(27,78,67,.07);
  transition: transform .2s, box-shadow .2s;
}
.steps article:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(27,78,67,.12); }
.steps article:nth-child(2) .step-icon { color: #bf4735; background: #ffe0d8; }
.steps article:nth-child(3) .step-icon { color: #2769b4; background: #dcecff; }
.step-number { color: rgba(8,165,143,.11); }
.steps article:nth-child(2) .step-number { color: rgba(255,104,79,.12); }
.steps article:nth-child(3) .step-number { color: rgba(77,145,232,.12); }

@media (max-width: 650px) {
  .search-card { border-radius: 23px; }
  .hero-grid::before, .hero-grid::after { display: none; }
  .card-heading h3 { font-size: 23px; }
  .card-heading p { font-size: 14px; }
  label { font-size: 14px; }
  .input-help, .error { font-size: 11px; }
  #search-button { height: 57px; font-size: 15px; }
  .privacy-note strong { font-size: 13px; }
  .privacy-note p { font-size: 10px; }
  .print-action { grid-template-columns:1fr; margin-top:14px; }
  .print-cards-button strong { font-size:14px; }
  .print-cards-button small { font-size:10px; }
  .modal { padding: 10px; }
  .modal-card { max-height: calc(100vh - 20px); padding: 25px 19px; border-radius: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
}

@media print {
  @page { size:A4 portrait; margin:10mm; }
  body { background:white !important; }
  body > * { display:none !important; }
  #print-area { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8mm; width:100%; }
  .print-card { min-height:128mm; overflow:hidden; break-inside:avoid; border:1.5px solid #efb5ce; border-radius:8mm; color:#5f4164; background:#fff9fd; box-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .print-card-top { min-height:28mm; display:flex; align-items:center; gap:4mm; padding:5mm 6mm; color:white; background:linear-gradient(110deg,#ff78ac,#bf8ee9); }
  .print-card-top img { width:19mm; height:19mm; object-fit:contain; background:white; border-radius:50%; }
  .print-card-top small,.print-card-top strong { display:block; }
  .print-card-top small { font:700 14pt "DM Sans",sans-serif; letter-spacing:.5pt; }
  .print-card-top strong { margin-top:1mm; font:700 13pt "Chakra Petch",sans-serif; }
  .print-sparkle { margin-left:auto; font-size:18pt; color:#fff4b3; }
  .print-card-body { padding:6mm; }
  .print-school { margin:0 0 3mm; color:#bd6793; font:700 9pt "DM Sans",sans-serif; letter-spacing:1pt; }
  .print-card h2 { min-height:19mm; margin:0; color:#624869; font:700 17pt "Chakra Petch",sans-serif; line-height:1.12; }
  .print-class { display:flex; align-items:center; gap:1.5mm; margin:4mm 0 6mm; color:#a15c88; font:700 14pt "DM Sans",sans-serif; }
  .print-class span { padding:2mm 3.2mm; border-radius:99px; background:#ffe1ef; }
  .print-class i { width:1.5mm; height:1.5mm; border-radius:50%; background:#a885dd; }
  .print-account { margin-top:3mm; padding:3.5mm; border:1px solid #f0d9e6; border-radius:3mm; background:white; }
  .print-account span,.print-account strong { display:block; }
  .print-account span { margin-bottom:1.4mm; color:#b07496; font:700 9pt "DM Sans",sans-serif; letter-spacing:.6pt; }
  .print-account strong { color:#513d59; font:700 13pt "DM Sans",sans-serif; overflow-wrap:anywhere; }
  .print-card-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:4mm; padding:4mm 6mm; border-top:1px dashed #edc4d7; color:#9d7a9a; font:600 9pt "DM Sans",sans-serif; }
  .print-card-bottom b { color:#d76499; font-size:10.5pt; }
}

/* Salinan gaya kad untuk fail PDF yang dimuat turun */
#print-area.pdf-export-area { position:absolute; left:0; top:0; z-index:10000; pointer-events:none; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8mm; width:190mm; padding:0; background:white; }
.pdf-export-area .print-card { min-height:128mm; overflow:hidden; break-inside:avoid; border:1.5px solid #efb5ce; border-radius:8mm; color:#5f4164; background:#fff9fd; box-shadow:none; }
.pdf-export-area .print-card-top { min-height:28mm; display:flex; align-items:center; gap:4mm; padding:5mm 6mm; color:white; background:linear-gradient(110deg,#ff78ac,#bf8ee9); }
.pdf-export-area .print-card-top img { width:19mm; height:19mm; object-fit:contain; background:white; border-radius:50%; }
.pdf-export-area .print-card-top small,.pdf-export-area .print-card-top strong { display:block; }
.pdf-export-area .print-card-top small { font:700 14pt "DM Sans",sans-serif; letter-spacing:.5pt; }
.pdf-export-area .print-card-top strong { margin-top:1mm; font:700 13pt "Chakra Petch",sans-serif; }
.pdf-export-area .print-sparkle { margin-left:auto; font-size:18pt; color:#fff4b3; }
.pdf-export-area .print-card-body { padding:6mm; }
.pdf-export-area .print-school { margin:0 0 3mm; color:#bd6793; font:700 9pt "DM Sans",sans-serif; letter-spacing:1pt; }
.pdf-export-area .print-card h2 { min-height:19mm; margin:0; color:#624869; font:700 17pt "Chakra Petch",sans-serif; line-height:1.12; }
.pdf-export-area .print-class { display:flex; align-items:center; gap:1.5mm; margin:4mm 0 6mm; color:#a15c88; font:700 14pt "DM Sans",sans-serif; }
.pdf-export-area .print-class span { padding:2mm 3.2mm; border-radius:99px; background:#ffe1ef; }
.pdf-export-area .print-account { margin-top:3mm; padding:3.5mm; border:1px solid #f0d9e6; border-radius:3mm; background:white; }
.pdf-export-area .print-account span,.pdf-export-area .print-account strong { display:block; }
.pdf-export-area .print-account span { margin-bottom:1.4mm; color:#b07496; font:700 9pt "DM Sans",sans-serif; letter-spacing:.6pt; }
.pdf-export-area .print-account strong { color:#513d59; font:700 13pt "DM Sans",sans-serif; overflow-wrap:anywhere; }
.pdf-export-area .print-card-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:4mm; padding:4mm 6mm; border-top:1px dashed #edc4d7; color:#9d7a9a; font:600 9pt "DM Sans",sans-serif; }
.pdf-export-area .print-card-bottom b { color:#d76499; font-size:10.5pt; }

/* Tema candy & sugar */
:root { --navy:#583c67; --navy-soft:#744f87; --green:#59bea9; --green-dark:#379985; --mint:#dcf8ed; --lime:#ffe1ef; --cream:#fff4fb; --paper:#fffafd; --ink:#59415e; --muted:#957d9c; --line:#f0dce9; --coral:#ff72a9; --orange:#ffb66f; --blue:#9b8dea; }
body { background-color:#fff3fa; background-image:radial-gradient(circle at 8% 13%,rgba(255,186,211,.46) 0 38px,transparent 39px),radial-gradient(circle at 87% 26%,rgba(177,235,221,.42) 0 55px,transparent 56px),radial-gradient(circle at 72% 87%,rgba(204,191,255,.35) 0 68px,transparent 69px),linear-gradient(135deg,rgba(255,255,255,.4) 25%,transparent 25%) 0 0/18px 18px,linear-gradient(225deg,rgba(255,255,255,.34) 25%,transparent 25%) 0 0/18px 18px; }
.sidebar { background:radial-gradient(circle at 0 93%,rgba(255,190,213,.35),transparent 28%),radial-gradient(circle at 100% 0,rgba(211,190,255,.38),transparent 31%),linear-gradient(165deg,#795890,#553c67 72%); }
.brand-mark { background:linear-gradient(145deg,#fff3f9,#ffc7de); color:#d9598e; }.nav-item.active { color:#714777; background:#ffe6f1; box-shadow:0 8px 20px rgba(47,22,56,.2); }.nav-item.active svg { color:#e66098; }.sidebar-help { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.13); }.help-icon { background:linear-gradient(145deg,#ff92bd,#ffba78); }.complaint-trigger { background:linear-gradient(100deg,#ff75ad,#bd8ff0); }
.topbar { border-bottom-color:#f2ddeb; background:rgba(255,250,253,.88); }.school-logo { filter:drop-shadow(0 10px 14px rgba(149,79,128,.18)); }.delima-title { color:#fa79ae; -webkit-text-stroke-color:#fff7e5; text-shadow:3px 4px 0 #78507f; }.topbar h2 { color:#5b3d67; }.school-name { color:#9d6485; }.live-datetime { color:#9a63a0; }.live-datetime .date-day { color:#67496f; }.status { color:#ba5484; background:#ffe6f0; box-shadow:inset 0 0 0 1px #f7cade; }.status i { background:#ff7bae; box-shadow:0 0 0 3px rgba(255,123,174,.15); }
.hero-grid::before { background:rgba(255,135,181,.19); }.hero-grid::after { background:rgba(165,142,234,.19); }.badge { color:#b34f7a; background:#ffe2ef; }.badge svg { color:#ed6ea2; } h1 { color:#624466; } h1 em { color:#f26ea5; }.hero-copy>p { color:#8e7892; }.trust-row { background:rgba(255,255,255,.35); border-radius:20px; padding:14px 8px; }.trust-row>span { border-left-color:#f0d6e6; }.trust-row b,.trust-row>span:nth-child(2) b,.trust-row>span:nth-child(3) b { color:#ef6ca3; }.trust-row>span:nth-child(2) b { color:#8b75d6; }.trust-row>span:nth-child(3) b { color:#4eaf9c; }.trust-row small { color:#8d7490; }
.search-card { border-color:rgba(255,255,255,.92); background:linear-gradient(155deg,#fffaff,#ffe9f3); box-shadow:0 28px 0 -18px rgba(237,126,174,.17),0 28px 70px rgba(159,94,140,.15); }.card-heading { border-bottom-color:#f4dce9; }.card-icon { background:linear-gradient(145deg,#ff80b3,#c592ed); box-shadow:0 8px 18px rgba(226,104,165,.27); }.card-heading h3,label { color:#66466c; }.card-heading p,.input-help { color:#9f7da0; } input { border-color:#f0d8e6; background:rgba(255,255,255,.96); } input:focus { border-color:#f482b4; box-shadow:0 0 0 5px rgba(244,130,180,.13); }.input-icon { color:#bb78b5; } #search-button,.complaint-submit { background:linear-gradient(100deg,#ff70a8,#b98ced); box-shadow:0 12px 26px rgba(245,106,164,.28); } #search-button:hover { background:linear-gradient(100deg,#ed5e97,#a977db); }.privacy-note { color:#9a7c99; }.privacy-note svg { color:#e976aa; }.privacy-note strong { color:#805a7d; }
.guide-section { border-top-color:#efd9e8; }.section-heading span { color:#df6599; }.section-heading h2,.steps h3 { color:#65476b; }.section-heading>p,.steps p { color:#907a93; }.steps article { border-color:rgba(255,255,255,.95); background:linear-gradient(150deg,#fffaff,#ffedf5); box-shadow:0 12px 30px rgba(158,78,130,.09); }.steps article:nth-child(2) { background:linear-gradient(150deg,#fffaff,#f2edff); }.steps article:nth-child(3) { background:linear-gradient(150deg,#fffaff,#e6f8f2); }.step-icon { color:#df6298; background:#ffe2ee; }.steps article:nth-child(2) .step-icon { color:#836dce; background:#ede6ff; }.steps article:nth-child(3) .step-icon { color:#3caa94; background:#dff7ef; }.step-number,.steps article:nth-child(2) .step-number,.steps article:nth-child(3) .step-number { color:rgba(243,117,170,.13); }.steps article:nth-child(2) .step-number { color:rgba(147,119,218,.13); }.steps article:nth-child(3) .step-number { color:rgba(79,184,159,.13); }
.result-card { border-color:#f0dce8; box-shadow:0 18px 45px rgba(157,75,130,.1); }.result-name { background:linear-gradient(110deg,#b66ba7,#f17ca9); }.copy-btn,.reveal-btn { color:#a64f85; background:#ffe5f0; }.visitor-counter { color:#ae5688; background:#ffe5f0; }.visitor-counter i { background:#f174a9; }.visitor-counter b { color:#6c4d70; }.modal-card { background:linear-gradient(155deg,#fffaff,#ffe9f3); border-color:rgba(255,255,255,.92); }.modal-icon { background:linear-gradient(145deg,#ff80b3,#bd8ef0); }.modal-heading p { color:#d96099; }.modal-heading h2 { color:#65466c; }.modal-close { color:#9b7592; background:#ffe5f0; }.form-field input,.form-field select,.form-field textarea { border-color:#efd9e7; }.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:#ef7eae; box-shadow:0 0 0 4px rgba(239,126,174,.12); }
.guru-adiwira { width:100%; max-width:184px; margin:-20px auto 0; opacity:.12; border-radius:18px; pointer-events:none; user-select:none; }
.sidebar-help { transform:translateY(-22px); }
@media (max-width:980px) { .guru-adiwira { display:none; } }