@import url('/assets/design-tokens.css?v=20260820-3');
@import url('/assets/global-ui.css?v=20260820-3');

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;background: var(--ds-color-bg);
  font-family: var(--ds-font-body);
  color: var(--ink);
  line-height: 1.6;
}
a {
  text-decoration: none;
  color: inherit;
}
.pss-shell {
  width: min(1180px, calc(100% - 3rem));
  margin: auto;
}
.pss-nav {
  height: 84px;background: var(--ds-appbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(1.5rem, calc((100vw - 1180px) / 2));
}
.pss-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.pss-brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  object-position: center;background: transparent;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.pss-brand b {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.pss-brand small {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
}
.pss-links {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4e5b57;
}
.pss-links > a {
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.pss-links > a:hover,
.pss-links .active {
  color: var(--teal);
  border-color: var(--brass);
}
.pss-links .back-link {
  background: var(--forest);
  color: #fff;
  border-radius: 5px;
  padding: 0.55rem 0.75rem;
}
.pss-dropdown {
  position: relative;
  z-index: 4;
}
.pss-dropdown summary {
  list-style: none;
  padding: 0.35rem 0;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.pss-dropdown summary::-webkit-details-marker {
  display: none;
}
.pss-dropdown summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 0.78rem;
  margin-left: 0.3rem;
  color: var(--ds-color-accent);
}
.pss-dropdown:hover summary,
.pss-dropdown[open] summary,
.pss-dropdown.active summary {
  color: var(--teal);
  border-color: var(--brass);
}
.pss-dropdown > div {
  display: grid;
  position: absolute;
  top: 100%;
  left: -0.75rem;
  z-index: 20;
  min-width: 185px;
  padding: 0.45rem;background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 12px 26px rgba(20, 32, 31, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
}
.pss-dropdown:hover > div,
.pss-dropdown[open] > div {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.pss-dropdown > div a {
  padding: 0.45rem 0.55rem;
  font-size: 0.72rem;
  white-space: nowrap;
}
.pss-dropdown > div a:hover {
  background:var(--ds-color-brand-soft);
  color: var(--teal);
}
.menu-toggle {
  display: none;background: none;
  border: 0;
}
.menu-toggle span {
  display: block;
  width: 23px;
  height: 2px;background: var(--forest);
  margin: 4px;
}
.eyebrow {
  font-weight: 800;
  letter-spacing: 0.13em;
  font-size: 0.65rem;
  color: var(--ds-color-accent);
  margin: 0 0 0.65rem;
}
.pss-home-hero .eyebrow { color: #f1d984; }
.library-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #f9e6b0;
  margin: 0 0 0.3rem;
}
.pss-home-hero {
  height: 470px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.pss-home-hero > picture,
.pss-home-hero > picture img,
.pss-home-hero > img,
.pss-home-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pss-home-hero > picture { display: block; }
.pss-home-shade {
  background: linear-gradient(
    90deg,
    rgba(13, 35, 32, 0.93),
    rgba(13, 35, 32, 0.56) 48%,
    rgba(13, 35, 32, 0.08)
  );
}
.pss-home-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 3rem));
  color: #fff;
}
.pss-home-inner h1,
.pss-page h1 {
  font: 800 clamp(2.4rem, 5vw, 4.4rem)/1 var(--font-display);
  margin: 0.1rem 0 1rem;
}
.pss-home-inner > p:last-of-type {
  max-width: 45ch;
  color: #dfe9e5;
  font-size: 0.9rem;
}
.hero-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.hero-actions a {
  background: var(--brass);
  color: #17231f;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.75rem 1rem;
  border-radius: 5px;
}
.hero-actions .ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.pss-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1.2rem 0 3.8rem;
}
.pss-home-card {
  min-height: 210px;
  padding: 1.4rem;background: var(--cream);
  border: 1px solid var(--line);
  transition: 0.18s;
}
.pss-home-card:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
}
.pss-home-card.emphasis {
  background: var(--forest);
  color: #fff;
}
.pss-home-card span,
.nilam-links span {
  color: var(--brass);
  font: 700 1.15rem var(--font-display);
}
.pss-home-card h2 {
  font: 700 1.55rem var(--font-display);
  margin: 0.85rem 0 0.4rem;
}
.pss-home-card p {
  font-size: 0.77rem;
  color: var(--muted);
  margin: 0 0 1.2rem;
}
.pss-home-card.emphasis p {
  color: #c5d8d3;
}
.pss-home-card b {
  font-size: 0.72rem;
  color: var(--teal);
}
.pss-home-card.emphasis b {
  color: #f9e6b0;
}
.pss-brief {
  padding: 2.8rem 0;
  display: grid;
  grid-template-columns: 0.72fr 1fr 1fr;
  gap: 1rem;
  border-top: 1px solid var(--line);
}
.pss-brief h2 {
  font: 700 1.9rem/1.1 var(--font-display);
  margin: 0;
}
.pss-brief article {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0.8rem;
  border-left: 1px solid var(--line);
  padding-left: 1rem;
}
.pss-brief time {
  color: var(--teal);
  font: 700 1.7rem/1 var(--font-display);
}
.pss-brief time small,
.pss-brief span {
  font: 700 0.58rem var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pss-brief h3 {
  font-size: 0.83rem;
  line-height: 1.35;
  margin: 0.25rem 0;
}
.pss-brief p {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0;
}
.pss-service-strip {
  padding: 2.8rem 0;background:var(--ds-color-brand-soft);
}
.pss-service-strip > div > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.pss-service-strip a {
  border-top: 2px solid var(--teal);
  padding-top: 0.7rem;
}
.pss-service-strip b,
.pss-service-strip span {
  display: block;
}
.pss-service-strip b {
  font-size: 0.84rem;
}
.pss-service-strip span {
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 0.2rem;
}
.pss-page {
  width: min(1050px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 5rem 0;
  min-height: 65vh;
}
.pss-page h1 {
  font-size: 3.5rem;
}
.page-intro {
  color: var(--muted);
  max-width: 60ch;
}
.pss-tabbar {
  display: flex;
  gap: 0.45rem;
  border-bottom: 1px solid var(--line);
  margin: 2.3rem 0 1.2rem;
  padding-bottom: 0.6rem;
}
.pss-tab {
  border: 0;background: transparent;
  padding: 0.55rem 0.75rem;
  font: 700 0.76rem var(--sans);
  color: var(--muted);
  cursor: pointer;
}
.pss-tab.active {
  background: var(--forest);
  color: #fff;
}
.pss-chart-panel h2 {
  font: 700 1.75rem var(--font-display);
  margin: 0.3rem 0;
}
.pss-chart-panel > p {
  font-size: 0.8rem;
  color: var(--muted);
}
.pss-chart-panel > img,
.pss-roster img {
  display: block;
  width: 100%;
  margin-top: 1.2rem;
  border: 1px solid var(--line);background: #fff;
}
.pss-roster {
  margin-top: 1.2rem;
  border: 1px solid var(--line);
  padding: 1rem;background: var(--cream);
}
.pss-roster summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
}
.nilam-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
  gap: 1rem;
  margin-top: 2rem;
}
.nilam-links a {
  padding: 1.7rem;background: var(--cream);
  border: 1px solid var(--line);
}
.nilam-links a:hover {
  border-color: var(--teal);
}
.nilam-links h2,
.nilam-note h2 {
  font: 700 1.7rem var(--font-display);
  margin: 0.7rem 0;
}
.nilam-links p,
.nilam-note p {
  font-size: 0.8rem;
  color: var(--muted);
}
.nilam-links b,
.nilam-note a {
  font-size: 0.74rem;
  color: var(--teal);
}
.nilam-note {
  margin-top: 1rem;
  padding: 1.5rem;background:var(--ds-color-brand-soft);
}
.nilam-note h2 {
  margin-top: 0;
}
.submenu-page {
  min-height: calc(100vh - 220px);
}
.submenu-card {
  max-width: 680px;
  margin-top: 1.8rem;
  padding: 1.5rem;background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(20, 32, 31, 0.04);
}
.submenu-card > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 6px;background:var(--ds-color-brand-soft);
  color: var(--forest);
  font-size: 0.68rem;
  font-weight: 800;
}
.submenu-card h2 {
  margin: 0.9rem 0 0.35rem;
  color: var(--forest);
  font-size: 1.2rem;
}
.submenu-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}
.submenu-action {
  display: inline-flex;
  margin-top: 1.2rem;
  padding: 0.72rem 0.95rem;
  border-radius: 6px;background: var(--forest);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}
.pss-footer {
  background: var(--ds-color-brand-strong);
  color: #cfdad7;
  padding: 2.5rem 0;
}
.pss-footer .pss-shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.pss-footer .pss-shell > div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.pss-footer img {
  width: 40px;
  height: 40px;
  object-fit: contain;background: #fff;
  padding: 3px;
  border-radius: 6px;
  flex: 0 0 40px;
  margin: 0;
}
.pss-footer p {
  font-size: 0.68rem;
  margin: 0;
}
.pss-footer p b {
  color: #fff;
  font-size: 0.78rem;
}
.pss-footer a {
  font-size: 0.7rem;
  margin-left: 1rem;
}
@media (max-width: 820px) {
  .pss-links {
    display: none;
  }
  .pss-links.open {
    display: flex;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;background: var(--cream);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
  }
  .menu-toggle {
    display: block;
  }
  .pss-dropdown {
    width: 100%;
  }
  .pss-dropdown > div {
    position: static;
    display: none;
    margin: 0.2rem 0 0;
    padding-left: 0.75rem;
    border: 0;
    box-shadow: none;background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
  .pss-dropdown[open] > div {
    display: grid;
  }
  .pss-home-grid,
  .pss-brief,
  .pss-service-strip > div > div,
  .nilam-links {
    grid-template-columns: 1fr;
  }
  .pss-brief article {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 1rem 0 0;
  }
  .pss-home-hero {
    height: 500px;
  }
}
@media (max-width: 560px) {
  .pss-shell,
  .pss-home-inner,
  .pss-page {
    width: calc(100% - 2rem);
  }
  .pss-nav {
    padding: 0 1rem;
  }
  .pss-page {
    padding: 3.5rem 0;
  }
  .pss-page h1 {
    font-size: 2.6rem;
  }
  .pss-home-grid {
    padding-bottom: 2.5rem;
  }
  .pss-brief {
    padding: 2.5rem 0;
  }
  .pss-home-hero {
    height: 520px;
  }
  .pss-footer .pss-shell {
    align-items: flex-start;
    flex-direction: column;
  }
  .pss-footer a {
    display: inline-block;
    margin: 0.25rem 0.8rem 0.25rem 0;
  }
}

/* ---------- Aplikasi PSS: sistem visual iOS ---------- */
body{background:var(--ds-color-bg)}
.pss-nav{height:76px;background:var(--ds-appbar-bg);color:var(--ink);box-shadow:none;padding:0 max(1.5rem,calc((100vw - 1180px)/2))}
.pss-brand b{color:var(--forest);font-size:.84rem}.pss-links{gap:1rem}.pss-links .back-link{background:var(--forest);border-radius:6px;padding:.48rem .68rem}.pss-dropdown>div{border-radius:7px;box-shadow:0 10px 22px rgba(20,32,31,.12)}
.pss-home-hero{height:420px}.pss-home-shade{background:rgba(13,45,41,.78)}.pss-home-inner h1,.pss-page h1{font-family:var(--sans);font-weight:800;letter-spacing:0}.pss-home-inner h1{max-width:14ch;font-size:clamp(2.15rem,4.4vw,3.7rem)}
.pss-home-grid{padding:1rem 0 2.8rem;gap:.8rem}.pss-home-card{min-height:185px;background:#fff;border-radius:8px;box-shadow:0 8px 20px rgba(20,32,31,.045)}.pss-home-card h2,.pss-brief h2,.pss-chart-panel h2,.nilam-links h2,.nilam-note h2{font-family:var(--sans);font-weight:800;letter-spacing:0}.pss-home-card h2{font-size:1.12rem;margin:.65rem 0 .35rem}.pss-home-card.emphasis{background:var(--forest)}

/* ---------- Akses utama Portal PSS ---------- */
.pss-home-grid-expanded{grid-template-columns:1.12fr .88fr .88fr;grid-template-areas:"info catalog nilam" "info loan loan"}.pss-home-grid-expanded>a:nth-child(1){grid-area:info}.pss-home-grid-expanded>a:nth-child(2){grid-area:catalog}.pss-home-grid-expanded>a:nth-child(3){grid-area:nilam}.pss-home-grid-expanded>a:nth-child(4){grid-area:loan}.pss-home-grid-expanded .pss-home-card:first-child{display:flex;flex-direction:column;justify-content:flex-end;min-height:378px;background:var(--forest);color:#fff}.pss-home-grid-expanded .pss-home-card:first-child span{background:var(--brass-bright);color:var(--ink)}.pss-home-grid-expanded .pss-home-card:first-child p{color:#D6E4DF}.pss-home-card-loan{background:#FCF7E9}.pss-home-grid-expanded .pss-home-card span{width:auto;min-width:30px;padding:0 .35rem}@media(max-width:820px){.pss-home-grid-expanded{grid-template-columns:1fr 1fr;grid-template-areas:"info info" "catalog nilam" "loan loan"}.pss-home-grid-expanded .pss-home-card:first-child{min-height:165px}}@media(max-width:560px){.pss-home-grid-expanded{grid-template-columns:1fr;grid-template-areas:"info" "catalog" "nilam" "loan"}.pss-home-grid-expanded .pss-home-card:first-child{min-height:152px}}
.pss-brief{gap:.8rem;padding:2.2rem 0;border:0}.pss-brief>div,.pss-brief article{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.1rem;box-shadow:0 8px 20px rgba(20,32,31,.04)}.pss-brief article{grid-template-columns:42px 1fr;border-left:1px solid var(--line)}.pss-brief h2{font-size:1.25rem}.pss-brief time{font-family:var(--sans);font-weight:800;font-size:1.25rem}
.pss-service-strip{background:transparent;padding:1rem 0}.pss-service-strip>div{ background:var(--ds-color-brand-soft);border:1px solid #D2E1DD;border-radius:8px;padding:1.1rem}.pss-service-strip>div>div{gap:.8rem}.pss-service-strip a{background:#fff;border:1px solid var(--line);border-top:0;border-radius:6px;padding:.9rem}.pss-service-strip b{color:var(--forest)}
.pss-page{padding:3.8rem 0}.pss-page h1{font-size:clamp(2rem,4vw,3.25rem)}.pss-tabbar{ background:var(--ds-color-brand-soft);border:0;border-radius:7px;padding:.3rem;margin:1.8rem 0 1.1rem}.pss-tab{border-radius:5px}.pss-tab.active{background:var(--forest);border-radius:5px}.pss-chart-panel,.pss-roster,.nilam-links a,.nilam-note{border-radius:8px}.pss-roster{background:#fff;box-shadow:0 8px 20px rgba(20,32,31,.04)}.nilam-links a{background:#fff;box-shadow:0 8px 20px rgba(20,32,31,.04)}.nilam-note{border-top:0;box-shadow:0 8px 20px rgba(20,32,31,.04)}
@media(max-width:820px){.pss-links.open{top:76px;background:var(--ds-appbar-bg)}.pss-home-hero{height:460px}.pss-brief>div,.pss-brief article{border-left:1px solid var(--line)}}
@media(max-width:560px){.pss-home-hero{height:470px}.pss-home-inner h1{font-size:2.2rem}.pss-home-grid{gap:.7rem}.pss-brief{gap:.7rem}.pss-brief>div,.pss-brief article{padding:1rem}}

/* ---------- Maklum balas aplikasi yang dikongsi dengan laman utama ---------- */
.pss-home-card,.pss-service-strip a,.nilam-links a,.pss-tab,.pss-links .back-link{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease}.pss-home-card:hover,.nilam-links a:hover{transform:translateY(-3px);box-shadow:0 13px 26px rgba(20,32,31,.10)}.pss-service-strip a:hover{transform:translateY(-2px);box-shadow:0 10px 18px rgba(20,32,31,.08);border-color:#8BBAB3}.pss-home-card span{width:30px;height:30px;display:grid;place-items:center;border-radius:6px;background:var(--ds-color-brand-soft);color:var(--forest);font:800 .6rem var(--sans)}.pss-home-card.emphasis span{background:rgba(255,255,255,.14);color:#F7DE92}.pss-home-card b{display:inline-flex;align-items:center;gap:.35rem}.pss-page .page-intro{font-size:.9rem;line-height:1.7}.pss-tab:focus-visible,.pss-links a:focus-visible,.pss-home-card:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- Panel submenu PSS ---------- */
.pss-links{position:relative;gap:1rem}.pss-links .pss-mega{position:static}.pss-links .pss-mega-panel{left:auto;right:0;top:calc(100% + 1px);width:min(660px,calc(100vw - 3rem));min-width:0;display:grid;grid-template-columns:minmax(155px,.7fr) minmax(0,1.45fr);gap:0;padding:0;overflow:hidden;border-radius:8px;box-shadow:0 16px 32px rgba(20,32,31,.15)}
.pss-mega-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.1rem;background:var(--forest);color:#fff}.pss-mega-copy strong{font:800 1.02rem var(--sans);color:#fff}.pss-mega-copy small{font-size:.72rem;line-height:1.5;color:#D6E4DF}.pss-links .pss-mega-copy .pss-mega-overview{margin-top:auto;padding:.45rem .55rem;background:var(--brass-bright);border:1px solid var(--brass-bright);border-radius:6px;color:var(--ink);font-size:.68rem;line-height:1.2;white-space:normal}.pss-links .pss-mega-copy .pss-mega-overview:hover{background:#fff;border-color:#fff;color:var(--forest)}
.pss-mega-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;background:var(--cream)}.pss-links .pss-mega-links a{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;min-height:76px;padding:.82rem .9rem;color:var(--ink);white-space:normal;border:0;border-bottom:1px solid var(--line);border-radius:0}.pss-links .pss-mega-links a:nth-child(odd){border-right:1px solid var(--line)}.pss-links .pss-mega-links a:hover{ background:var(--ds-color-brand-soft);color:var(--teal)}.pss-mega-links b{font-size:.75rem;line-height:1.35}.pss-mega-links small{font-size:.65rem;font-weight:500;line-height:1.4;color:var(--muted)}
@media(max-width:820px){.pss-links .pss-mega-panel{width:auto;grid-template-columns:1fr;gap:0}.pss-mega-copy{padding:.95rem}.pss-mega-links{grid-template-columns:1fr}.pss-links .pss-mega-links a:nth-child(odd){border-right:0}.pss-links .pss-dropdown[open] > .pss-mega-panel{display:grid}}
@media(prefers-reduced-motion:reduce){.pss-links .pss-mega-panel{transition:none}}

/* ---------- Visual kad akses Portal PSS ---------- */
.pss-card-with-image{display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden}.pss-card-image{display:block;width:100%;height:96px;flex:0 0 auto;object-fit:cover;object-position:center;border-radius:6px;margin:0 0 .8rem}.pss-card-with-image:not(.pss-card-maklumat) b{margin-top:auto}.pss-home-grid-expanded .pss-card-maklumat .pss-card-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;margin:0;border-radius:inherit;object-position:center}.pss-home-grid-expanded .pss-card-maklumat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,61,56,.1) 0%,rgba(13,61,56,.92) 73%)}.pss-home-grid-expanded .pss-card-maklumat>*:not(.pss-card-image){position:relative;z-index:1}@media(max-width:560px){.pss-card-image{height:124px}.pss-home-grid-expanded .pss-card-maklumat .pss-card-image{height:100%}}

/* ---------- Rak Buku Maya ---------- */
.virtual-book{color:#fff;text-decoration:none}.virtual-book[data-category="Melayu Klasik"]{background:#6B4A25}.virtual-book[data-category="Klasik"]{background:#9D5147}.virtual-book[data-category="Kanak-kanak"]{background:#70456F}.virtual-book[data-category="Pengembaraan"]{background:#3E517A}.virtual-book[data-category="STEM"]{background:#235548}
.virtual-shelf-page{width:min(1180px,calc(100% - 3rem));margin:0 auto;padding:3.8rem 0}.virtual-shelf-page h1{font:800 clamp(2rem,4vw,3.25rem) var(--sans);margin:.2rem 0 .7rem}.virtual-shelf-intro{max-width:66ch;color:var(--muted);font-size:.9rem;line-height:1.75}.virtual-shelf-tools{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin:1.8rem 0 1rem}.virtual-shelf-tools input{min-width:min(100%,260px);flex:1;padding:.72rem .85rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:600 .76rem var(--sans)}.virtual-shelf-filter{padding:.62rem .75rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--forest);font:800 .68rem var(--sans);cursor:pointer}.virtual-shelf-filter.active,.virtual-shelf-filter:hover{background:var(--forest);border-color:var(--forest);color:#fff}.virtual-shelf-status{margin:.3rem 0 1.25rem;color:var(--muted);font-size:.72rem}.virtual-shelf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem 1.1rem;padding:1.25rem 1rem 1rem;background:linear-gradient(180deg,#E8DED0 0,#E8DED0 calc(100% - 12px),#846142 calc(100% - 12px),#5D402B 100%);border:1px solid #D6C4B0;border-radius:10px;box-shadow:0 14px 30px rgba(65,45,29,.12)}.virtual-book{min-height:196px;display:flex;flex-direction:column;justify-content:flex-end;padding:.72rem .62rem;border:0;border-radius:5px 6px 3px 4px;box-shadow:3px 4px 0 rgba(61,42,27,.2),inset 3px 0 rgba(255,255,255,.14);color:#fff;text-align:left;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.virtual-book:hover,.virtual-book:focus-visible{transform:translateY(-7px);box-shadow:4px 10px 0 rgba(61,42,27,.22),inset 3px 0 rgba(255,255,255,.18);outline:2px solid var(--brass);outline-offset:3px}.virtual-book small{font:800 .58rem var(--sans);letter-spacing:.06em;opacity:.82}.virtual-book b{display:block;margin-top:.4rem;font:800 .79rem/1.35 var(--sans)}.virtual-book span{display:block;margin-top:.45rem;font-size:.61rem;line-height:1.35;opacity:.86}.virtual-book[data-category="Fiksyen"]{background:#9D5147}.virtual-book[data-category="Sains"]{background:#396D75}.virtual-book[data-category="Sejarah"]{background:#8B6632}.virtual-book[data-category="Agama"]{background:#235548}.virtual-book[data-category="Motivasi"]{background:#70456F}.virtual-book[data-category="Bahasa"]{background:#3E517A}.virtual-shelf-note{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;padding:1rem;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:.75rem;line-height:1.6}.virtual-shelf-note b{display:block;color:var(--forest);font-size:.78rem}@media(max-width:900px){.virtual-shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:560px){.virtual-shelf-page{width:calc(100% - 2rem);padding:3rem 0}.virtual-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;padding:.9rem}.virtual-book{min-height:180px}.virtual-shelf-tools input{flex-basis:100%}}

/* ---------- Minggu ini dan navigasi mudah alih PSS ---------- */
.pss-weekly {
  padding: 0 0 0.95rem;
}

.pss-weekly-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.pss-weekly-heading h2 {
  margin: 0.2rem 0 0;
  color: var(--forest);
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.pss-weekly-heading a {
  color: var(--teal);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.pss-weekly-grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr 1fr;
  gap: 0.85rem;
}

.pss-weekly-card {
  display: flex;
  min-height: 10.2rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.pss-weekly-card:hover {
  transform: translateY(-3px);
  border-color: rgba(13, 109, 101, 0.48);
  box-shadow: 0 12px 26px rgba(20, 69, 63, 0.12);
}

.pss-weekly-card:focus-visible,
.pss-weekly-heading a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.pss-weekly-card span {
  display: inline-flex;
  margin-bottom: 0.72rem;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;background: rgba(20, 69, 63, 0.1);
  color: var(--forest);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.pss-weekly-card strong {
  font-size: 1rem;
  line-height: 1.3;
}

.pss-weekly-card small {
  margin-top: auto;
  padding-top: 0.65rem;
  color: var(--muted);
  line-height: 1.45;
}

.pss-weekly-book {
  border-color: rgba(20, 69, 63, 0.6);background: var(--forest);
  color: #fff;
}

.pss-weekly-book span {
  background: var(--brass);
  color: var(--forest);
}

.pss-weekly-book small {
  color: rgba(255, 255, 255, 0.78);
}

.pss-weekly-activity {
  background: #f3f8f6;
}

.pss-weekly-nilam {
  background: #fff9eb;
}

.pss-mobile-dock {
  display: none;
}

@media (max-width: 820px) {
  .pss-weekly-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pss-weekly-book {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  body {
    padding-bottom: 4.8rem;
  }

  .pss-weekly-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }

  .pss-weekly-grid {
    grid-template-columns: 1fr;
  }

  .pss-weekly-book {
    grid-column: auto;
  }

  .pss-weekly-card {
    min-height: 8.8rem;
  }

  .pss-mobile-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.15rem;
    padding: 0.42rem 0.45rem calc(0.42rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);background: rgba(255, 252, 245, 0.96);
    box-shadow: 0 -8px 24px rgba(20, 69, 63, 0.12);
    backdrop-filter: blur(12px);
  }

  .pss-mobile-dock a,
  .pss-mobile-dock button {
    display: grid;
    min-height: 2.55rem;
    place-items: center;
    padding: 0.25rem 0.1rem;
    border: 0;
    border-radius: 0.55rem;background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    text-decoration: none;
  }

  .pss-mobile-dock a:first-child,
  .pss-mobile-dock button {
    color: var(--teal);
  }

  .pss-mobile-dock button {
    cursor: pointer;
  }

  .pss-mobile-dock a:focus-visible,
  .pss-mobile-dock button:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pss-weekly-card {
    transition: none;
  }

  .pss-weekly-card:hover {
    transform: none;
  }
}

/* ---------- Sistem jenama Portal PSS ---------- */
.pss-nav{height:88px;background:var(--ds-appbar-bg);border-color:var(--ds-color-border)}.pss-brand img{width:56px;height:56px;padding:3px;border:1px solid var(--ds-card-border);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-sm)}.pss-links>a:focus-visible,.pss-dropdown summary:focus-visible,.pss-links .back-link:focus-visible{outline:none;box-shadow:var(--ds-focus-ring)}.pss-links .back-link{border-radius:var(--ds-radius-md);background:var(--ds-button-primary-bg)}.pss-dropdown>div{border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-md)}.pss-home-hero{height:500px}.pss-home-shade{background:rgba(16,42,39,.58)}.pss-home-inner h1{letter-spacing:0}.pss-hero-search{display:flex;max-width:430px;margin:1.2rem 0 .8rem;border:1px solid rgba(255,255,255,.56);border-radius:var(--ds-radius-md);overflow:hidden;background:var(--ds-appbar-bg)}.pss-hero-search input{min-width:0;flex:1;border:0;background:transparent;color:var(--ds-color-text);padding:.72rem .8rem;font:600 .76rem var(--ds-font-body);outline:none}.pss-hero-search input::placeholder{color:var(--ds-color-text-muted)}.pss-hero-search button{border:0;background:var(--ds-color-accent-bright);color:var(--ds-color-text);padding:.72rem .85rem;font:800 .72rem var(--ds-font-body);cursor:pointer}.pss-hero-search button:hover{background:#ddba5d}.pss-hero-search:focus-within{box-shadow:var(--ds-focus-ring)}.pss-home-card,.pss-widget,.pss-weekly-card,.pss-info-grid section,.pss-month{border-radius:var(--ds-card-radius);border-color:var(--ds-card-border);box-shadow:var(--ds-card-shadow)}.pss-home-card{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.pss-home-card:hover{border-color:var(--ds-color-brand-strong);box-shadow:var(--ds-shadow-md)}.pss-home-card b{color:var(--ds-color-brand-strong)}.pss-home-card.emphasis b,.pss-home-card.emphasis span{color:var(--ds-color-accent-soft)}.pss-home-card:focus-visible,.pss-weekly-card:focus-visible,.pss-widget a:focus-visible{outline:none;box-shadow:var(--ds-focus-ring)}.pss-home-card .pss-card-image{border-radius:var(--ds-radius-sm)}.pss-home-widgets{gap:1rem}.pss-widget{padding:1.25rem}.pss-widget-link{color:var(--ds-color-brand-strong)}.pss-mobile-dock{border-color:var(--ds-color-border);background:var(--ds-appbar-bg)}@media(max-width:560px){.pss-nav{height:72px}.pss-brand img{width:44px;height:44px}.pss-home-hero{height:470px}.pss-hero-search{max-width:none}.pss-hero-search input{font-size:.78rem}.pss-home-inner h1{font-size:2.65rem}.pss-mobile-dock a.active{color:var(--ds-color-brand-strong);background:var(--ds-color-brand-soft)}}

/* ---------- Widget laman utama, aktiviti dan cadangan buku ---------- */
.pss-home-widgets{display:grid;grid-template-columns:1.15fr .85fr;gap:.9rem;padding:0 0 2.8rem}.pss-widget{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.15rem;box-shadow:0 8px 20px rgba(20,32,31,.04)}.pss-widget h2{font:800 1.2rem var(--sans);margin:.15rem 0 .3rem}.pss-widget>p{color:var(--muted);font-size:.76rem;margin:0 0 1rem}.pss-book-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.pss-book-pick{display:grid;grid-template-columns:28px 1fr;gap:.6rem;align-items:start;padding:.65rem;border:1px solid #D8E3DF;border-radius:6px;background:#F7F9F8}.pss-book-pick>span{display:grid;place-items:center;width:28px;height:28px;background:var(--forest);color:#fff;border-radius:5px;font:800 .61rem var(--sans)}.pss-book-pick b,.pss-book-pick small{display:block}.pss-book-pick b{font-size:.72rem;line-height:1.38}.pss-book-pick small{margin-top:.12rem;color:var(--muted);font-size:.64rem;line-height:1.4}.pss-widget-link{display:inline-block;margin-top:.85rem;color:var(--teal);font-size:.72rem;font-weight:800}.pss-widget-empty{color:var(--muted);font-size:.74rem;margin:0}.pss-nilam-rank{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.65rem 0;border-bottom:1px solid var(--ds-color-brand-soft)}.pss-nilam-rank:last-of-type{border-bottom:0}.pss-nilam-rank-badge{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--ds-color-brand-soft);color:var(--forest);font:800 .7rem var(--sans)}.pss-nilam-rank[data-rank="1"] .pss-nilam-rank-badge{background:var(--brass);color:var(--ink)}.pss-nilam-rank[data-rank="2"] .pss-nilam-rank-badge{background:#D9E0DF;color:var(--ink)}.pss-nilam-rank[data-rank="3"] .pss-nilam-rank-badge{background:#DDBB98;color:var(--ink)}.pss-nilam-rank-info{min-width:0}.pss-nilam-rank-info b,.pss-nilam-rank-info small{display:block}.pss-nilam-rank-info b{overflow:hidden;font-size:.74rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.pss-nilam-rank-info small{margin-top:.15rem;color:var(--muted);font-size:.64rem}.pss-nilam-rank>strong{color:var(--teal);font:800 1rem var(--sans);text-align:right;white-space:nowrap}.pss-nilam-rank>strong small{display:block;color:var(--muted);font:600 .58rem var(--font-mono);letter-spacing:.03em}.pss-nilam-updated{margin:.7rem 0 0;color:var(--muted);font:600 .62rem var(--font-mono)}.pss-activity-page{width:min(1080px,calc(100% - 3rem));margin:0 auto;padding:3.8rem 0}.pss-activity-page h1{font:800 clamp(2rem,4vw,3.25rem) var(--sans);margin:.2rem 0 .7rem}.pss-activity-page>.page-intro{max-width:64ch;color:var(--muted);font-size:.9rem}.pss-activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:2rem}.pss-month{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem}.pss-month h2{font:800 .98rem var(--sans);color:var(--forest);margin:0 0 .7rem}.pss-activity-item{padding:.7rem 0;border-top:1px solid var(--ds-color-brand-soft)}.pss-activity-item:first-of-type{border-top:0;padding-top:0}.pss-activity-item time,.pss-activity-item small{display:block;color:var(--teal);font-size:.64rem;font-weight:800}.pss-activity-item h3{font:800 .76rem/1.4 var(--sans);margin:.2rem 0}.pss-activity-item p{color:var(--muted);font-size:.68rem;line-height:1.5;margin:0}.pss-info-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:.9rem;margin-top:1.8rem}.pss-info-grid section{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.15rem}.pss-info-grid h2{font:800 1.08rem var(--sans);margin:0 0 .5rem}.pss-info-grid p,.pss-info-grid li{color:var(--muted);font-size:.78rem}.pss-info-grid ul{padding-left:1.1rem;margin:.4rem 0}.suggestion-layout{grid-template-columns:1fr .42fr}.suggestion-note{align-self:start}@media(max-width:820px){.pss-home-widgets,.pss-info-grid{grid-template-columns:1fr}.pss-activity-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.pss-home-widgets{padding-bottom:2.2rem}.pss-book-list,.pss-activity-grid{grid-template-columns:1fr}.pss-activity-page{width:calc(100% - 2rem);padding:3rem 0}}

/* ---------- Portal perpustakaan moden ---------- */
.pss-home-grid-expanded .pss-home-card{position:relative;isolation:isolate;overflow:hidden;color:#fff;border-color:transparent;background:var(--forest)}
.pss-home-grid-expanded .pss-home-card .pss-card-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;margin:0;border-radius:inherit;object-position:center}
.pss-home-grid-expanded .pss-home-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,42,38,.15) 0%,rgba(10,42,38,.88) 76%)}
.pss-home-grid-expanded .pss-home-card>*:not(.pss-card-image){position:relative;z-index:1}
.pss-home-grid-expanded .pss-card-katalog::after{background:linear-gradient(180deg,rgba(85,55,11,.12) 0%,rgba(106,71,14,.88) 76%)}
.pss-home-grid-expanded .pss-card-nilam{background:#4f3152}.pss-home-grid-expanded .pss-card-nilam::after{background:linear-gradient(180deg,rgba(55,24,60,.12) 0%,rgba(61,35,65,.9) 76%)}
.pss-home-grid-expanded .pss-card-pinjaman{background:var(--teal)}.pss-home-grid-expanded .pss-card-pinjaman::after{background:linear-gradient(180deg,rgba(5,72,68,.12) 0%,rgba(7,87,81,.9) 76%)}
.pss-home-grid-expanded .pss-home-card span{display:inline-flex;width:max-content;height:auto;min-height:1.65rem;align-items:center;padding:.18rem .45rem;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.18);font:800 .6rem var(--sans);letter-spacing:.08em}
.pss-home-grid-expanded .pss-card-katalog span{background:#f7dfa2;border-color:#f7dfa2;color:#4d3109}
.pss-home-grid-expanded .pss-home-card p{color:rgba(255,255,255,.84)}
.pss-home-grid-expanded .pss-home-card b,.pss-home-grid-expanded .pss-home-card.emphasis b{color:#fff}
.pss-breadcrumb{display:flex;align-items:center;gap:.45rem;margin-bottom:1.25rem;color:var(--muted);font-size:.68rem;font-weight:700}
.pss-breadcrumb a{color:var(--teal);text-decoration:underline;text-underline-offset:.2rem}
.pss-footer-admin{margin-left:auto;padding:.4rem .6rem;border:1px solid rgba(255,255,255,.28);border-radius:6px;color:#fff;font-size:.64rem!important;font-weight:800}
.pss-footer-admin:hover{background:#fff;color:var(--forest)}
@media(max-width:820px){.pss-footer-admin{margin-left:0!important}}

/* ---------- Pengumuman PSS ---------- */
.pss-announcement-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.34fr);gap:1.4rem;margin-top:2rem}.pss-announcement-layout h2{font:800 1.3rem var(--sans);margin:.25rem 0 0;color:var(--forest)}.pss-announcement-list{margin-top:1rem;border-top:1px solid var(--line)}.pss-announcement-list .notis-item{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}.pss-announcement-list .notis-date{align-self:start;display:inline-flex;width:max-content;min-width:0;padding:.35rem .5rem;background:var(--ds-color-brand-soft);color:var(--forest);font:700 .66rem/1.3 var(--font-mono)}.pss-announcement-list h4{font:800 .9rem/1.45 var(--sans);color:var(--ink);margin:0}.pss-announcement-list p{margin:.3rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.6}.pss-announcement-state{padding:1rem 0;color:var(--muted);font-size:.8rem}.pss-announcement-aside{align-self:start;display:grid;gap:.7rem;padding:1rem 0 1rem 1.35rem;border-left:1px solid var(--line)}.pss-announcement-aside h2{margin:0}.pss-announcement-aside>p:not(.eyebrow){margin:0;color:var(--muted);font-size:.78rem;line-height:1.6}.pss-announcement-aside a{display:block;color:var(--teal);font-size:.76rem;font-weight:800;text-decoration:underline;text-decoration-color:var(--ds-color-accent);text-underline-offset:.25rem}.pss-announcement-aside a:focus-visible{outline:none;box-shadow:var(--ds-focus-ring)}@media(max-width:720px){.pss-announcement-layout{grid-template-columns:1fr}.pss-announcement-aside{padding:1rem 0;border-left:0;border-top:1px solid var(--line)}}@media(max-width:480px){.pss-announcement-list .notis-item{grid-template-columns:1fr;gap:.55rem}.pss-announcement-list .notis-date{width:max-content}}

/* ---------- Mobile dock: keadaan aktif dan sasaran sentuhan ---------- */
@media (max-width: 560px) {
  body { padding-bottom: calc(5.45rem + env(safe-area-inset-bottom)); }
  .pss-mobile-dock a,
  .pss-mobile-dock button { min-height: 44px; }
  .pss-mobile-dock a.active,
  .pss-mobile-dock button[aria-expanded="true"] {
    background: var(--ds-color-brand-soft);
    box-shadow: inset 0 0 0 1px rgba(13, 105, 99, 0.22);
    color: var(--forest);
  }
}

/* ---------- Carta Pendahulu NILAM ---------- */
.nilam-leaderboard-panel{margin-top:2rem;background:#fff;border:1px solid var(--line);border-radius:var(--ds-card-radius);padding:1.15rem;box-shadow:var(--ds-card-shadow)}.nilam-leaderboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.nilam-leaderboard-head h2{font:800 1.2rem var(--sans);margin:.15rem 0 0;color:var(--forest)}.nilam-leaderboard-updated{color:var(--muted);font:600 .68rem var(--font-mono);text-align:right}.nilam-table-wrap{overflow-x:auto;border:1px solid var(--ds-color-brand-soft);border-radius:6px}.nilam-leaderboard-table{width:100%;border-collapse:collapse;min-width:650px}.nilam-leaderboard-table th,.nilam-leaderboard-table td{padding:.72rem .75rem;border-bottom:1px solid var(--ds-color-brand-soft);text-align:left;font-size:.75rem}.nilam-leaderboard-table thead th{background:var(--forest);color:#fff;font:800 .64rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.nilam-leaderboard-table tbody tr:last-child td,.nilam-leaderboard-table tbody tr:last-child th{border-bottom:0}.nilam-leaderboard-table tbody tr:nth-child(-n+3){background:#fffcf2}.nilam-leaderboard-table tbody tr:hover{background:#f3f8f6}.nilam-leaderboard-table .nilam-rank-number{width:4.5rem;color:var(--forest);font:800 1rem var(--sans)}.nilam-leaderboard-table .nilam-student-name{color:var(--ink);font-size:.78rem}.nilam-leaderboard-table .nilam-form,.nilam-leaderboard-table .nilam-class{color:var(--muted)}.nilam-leaderboard-table .nilam-count{color:var(--teal);font-weight:800;white-space:nowrap}.nilam-leaderboard-status{margin:.8rem 0 0;color:var(--muted);font-size:.72rem}@media(max-width:720px){.nilam-leaderboard-head{display:block}.nilam-leaderboard-updated{display:block;margin-top:.45rem;text-align:left}}

/* ---------- Carta NILAM: podium, motion dan telefon ---------- */
:root { --pss-nav-height: 88px; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.pss-nav { height: var(--pss-nav-height); }
html { scroll-padding-top: calc(var(--pss-nav-height) + var(--ds-space-3)); }

.nilam-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0.7rem;
  margin: 0 0 1rem;
}
.nilam-podium-card {
  display: grid;
  min-width: 0;
  min-height: 8.4rem;
  align-content: start;
  gap: 0.35rem;
  padding: 0.9rem;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-card-radius);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
  box-shadow: var(--ds-shadow-sm);
}
.nilam-podium-card[data-rank="1"] {
  order: 2;
  min-height: 10rem;
  border-color: #dfc57e;
  background: var(--ds-color-accent-soft);
}
.nilam-podium-card[data-rank="2"] { order: 1; background: #f3f6f5; }
.nilam-podium-card[data-rank="3"] { order: 3; background: #f8efe8; }
.nilam-podium-rank {
  color: var(--ds-color-accent);
  font: 800 var(--ds-text-2xs)/1 var(--ds-font-mono);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
}
.nilam-podium-card[data-rank="1"] .nilam-podium-rank { color: #6d5218; }
.nilam-podium-card b {
  color: var(--ds-color-text);
  font: 800 var(--ds-text-sm)/1.35 var(--ds-font-body);
  overflow-wrap: anywhere;
}
.nilam-podium-card small {
  min-width: 0;
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-2xs);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.nilam-podium-card strong {
  margin-top: auto;
  color: var(--ds-color-brand);
  font: 800 var(--ds-text-lg)/1 var(--ds-font-body);
  font-variant-numeric: tabular-nums;
}
.nilam-podium-card[data-rank="1"] strong { color: #6d5218; }

#home-nilam-list { display: grid; gap: 0.42rem; }
#home-nilam-list .pss-nilam-rank {
  margin: 0;
  padding: 0.62rem;
  border: 1px solid var(--ds-color-brand-soft);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
}
#home-nilam-list .pss-nilam-rank[data-rank="1"] {
  padding: 0.8rem;
  border-color: #dfc57e;
  background: var(--ds-color-accent-soft);
}
#home-nilam-list .pss-nilam-rank-info b {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
#home-nilam-list .pss-nilam-rank strong { font-variant-numeric: tabular-nums; }
#home-nilam-list .pss-nilam-rank[data-rank="1"] strong { color: #6d5218; font-size: var(--ds-text-lg); }
#home-nilam-list .pss-nilam-rank[data-rank="1"] .pss-nilam-rank-badge { background: var(--ds-gold-600); color: var(--ds-ink-900); }
#home-nilam-list .pss-nilam-updated { margin: 0.25rem 0 0; }

.nilam-leaderboard-table tbody tr[data-rank="1"] { background: var(--ds-color-accent-soft); }
.nilam-leaderboard-table tbody tr[data-rank="2"] { background: #f3f6f5; }
.nilam-leaderboard-table tbody tr[data-rank="3"] { background: #f8efe8; }
.nilam-leaderboard-table tbody tr[data-rank="1"] .nilam-rank-number { color: #6d5218; }

@keyframes pss-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .pss-home-inner > * { animation: pss-rise-in 360ms ease both; }
  .pss-home-inner > *:nth-child(2) { animation-delay: 45ms; }
  .pss-home-inner > *:nth-child(3) { animation-delay: 90ms; }
  .pss-home-inner > *:nth-child(4) { animation-delay: 135ms; }
  .pss-home-inner > *:nth-child(5) { animation-delay: 180ms; }
  .pss-home-card,
  .pss-weekly-card,
  .pss-widget { animation: pss-rise-in 320ms ease both; }
  .pss-home-card:nth-child(2),
  .pss-weekly-card:nth-child(2),
  .pss-widget:nth-child(2) { animation-delay: 60ms; }
  .pss-home-card:nth-child(3),
  .pss-weekly-card:nth-child(3) { animation-delay: 120ms; }
  .pss-home-card:nth-child(4) { animation-delay: 180ms; }
  .nilam-podium-card { animation: pss-rise-in 300ms ease both; }
  .nilam-podium-card[data-rank="2"] { animation-delay: 45ms; }
  .nilam-podium-card[data-rank="1"] { animation-delay: 90ms; }
  .nilam-podium-card[data-rank="3"] { animation-delay: 135ms; }
  .nilam-leaderboard-table tbody tr { animation: pss-rise-in 260ms ease both; }
  .nilam-leaderboard-table tbody tr:nth-child(2) { animation-delay: 35ms; }
  .nilam-leaderboard-table tbody tr:nth-child(3) { animation-delay: 70ms; }
}
.pss-home-card,
.pss-weekly-card,
.pss-widget,
.nilam-podium-card { transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
@media (hover: hover) {
  .pss-widget:hover,
  .nilam-podium-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-md); }
}
@media (hover: none) {
  .pss-home-card:active,
  .pss-weekly-card:active,
  .nilam-podium-card:active { transform: scale(0.99); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .pss-home-inner > *,
  .pss-home-card,
  .pss-weekly-card,
  .pss-widget,
  .nilam-podium-card,
  .nilam-leaderboard-table tbody tr {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 820px) {
  :root { --pss-nav-height: 76px; }
  .pss-nav { height: var(--pss-nav-height); }
  .pss-brand img { width: 46px; height: 46px; }
  .pss-links.open {
    top: var(--pss-nav-height);
    max-height: calc(100dvh - var(--pss-nav-height));
    overflow-y: auto;
  }
}
@media (max-width: 760px) {
  .pss-home-widgets { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nilam-podium { grid-template-columns: 1fr; gap: 0.55rem; }
  .nilam-podium-card { min-height: 0; }
  .nilam-podium-card[data-rank="1"] { order: 1; min-height: 0; }
  .nilam-podium-card[data-rank="2"] { order: 2; }
  .nilam-podium-card[data-rank="3"] { order: 3; }
  .nilam-leaderboard-panel { padding: 0.9rem; }
  .nilam-table-wrap { overflow: visible; border: 0; }
  .nilam-leaderboard-table { display: block; min-width: 0; }
  .nilam-leaderboard-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nilam-leaderboard-table tbody { display: grid; gap: 0.55rem; }
  .nilam-leaderboard-table tbody tr {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas: "rank name count" "rank form class";
    align-items: center;
    gap: 0.35rem 0.55rem;
    padding: 0.75rem;
    border: 1px solid var(--ds-color-brand-soft);
    border-radius: var(--ds-radius-md);
    background: #fff;
  }
  .nilam-leaderboard-table th,
  .nilam-leaderboard-table td { padding: 0; border: 0; }
  .nilam-leaderboard-table .nilam-rank-number { grid-area: rank; width: auto; font-size: var(--ds-text-lg); }
  .nilam-leaderboard-table .nilam-student-name { grid-area: name; overflow-wrap: anywhere; }
  .nilam-leaderboard-table .nilam-form { grid-area: form; min-width: 0; overflow-wrap: anywhere; font-size: var(--ds-text-2xs); }
  .nilam-leaderboard-table .nilam-class { grid-area: class; min-width: 0; overflow-wrap: anywhere; font-size: var(--ds-text-2xs); }
  .nilam-leaderboard-table .nilam-count { grid-area: count; font-size: var(--ds-text-xs); }
  .nilam-leaderboard-table tbody tr[data-rank="1"] { background: var(--ds-color-accent-soft); border-color: #dfc57e; }
  .nilam-leaderboard-table tbody tr[data-rank="2"] { background: #f3f6f5; }
  .nilam-leaderboard-table tbody tr[data-rank="3"] { background: #f8efe8; }
}
@media (max-width: 560px) {
  html { scroll-padding-bottom: calc(5.45rem + env(safe-area-inset-bottom)); }
  .pss-home-hero { height: auto; min-height: 430px; padding: 3rem 0; }
  .pss-hero-search { max-width: none; }
  .hero-actions a { display: grid; min-height: 44px; flex: 1 1 10rem; place-items: center; text-align: center; }
  .pss-book-list { grid-template-columns: 1fr; }
}

/* ---------- Ilustrasi custom hero Portal PSS ---------- */
.pss-home-hero .pss-hero-art {
  position: absolute;
  inset: auto max(1.5rem, calc((100vw - 1180px) / 2)) -0.1rem auto;
  right: max(1.5rem, calc((100vw - 1180px) / 2));
  bottom: -0.1rem;
  z-index: 1;
  width: min(42vw, 520px);
  height: auto;
  max-height: 96%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(9, 42, 37, 0.28));
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pss-home-hero .pss-hero-art { animation: pss-rise-in 520ms 80ms ease both; }
}
@media (max-width: 980px) {
  .pss-home-hero .pss-hero-art {
    right: -2.5rem;
    width: min(48vw, 420px);
    opacity: 0.48;
  }
}
@media (max-width: 820px) {
  .pss-home-hero .pss-hero-art { display: none; }
}

/* ---------- Set ilustrasi SVG Portal PSS ---------- */
.pss-home-grid-expanded .pss-card-illustrated::after {
  background: linear-gradient(180deg, rgba(10, 42, 38, 0.02) 0%, rgba(10, 42, 38, 0.82) 80%);
}
.pss-weekly-card,
.pss-home-widgets .pss-widget:first-child,
.pss-service-strip > .pss-shell { position: relative; overflow: hidden; }
.pss-weekly-card > *,
.pss-home-widgets .pss-widget:first-child > *,
.pss-service-strip > .pss-shell > * { position: relative; z-index: 1; }
.pss-weekly-card::after,
.pss-home-widgets .pss-widget:first-child::after,
.pss-service-strip > .pss-shell::after {
  position: absolute;
  right: -1.2rem;
  bottom: -1.7rem;
  width: 10.5rem;
  height: 10.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  opacity: 0.22;
  pointer-events: none;
}
.pss-weekly-book::after { background-image: url('/assets/pss-art/reading-pick.svg'); }
.pss-weekly-activity::after { background-image: url('/assets/pss-art/creative-workshop.svg'); }
.pss-weekly-nilam::after { background-image: url('/assets/pss-art/podium.svg'); }
.pss-home-widgets .pss-widget:first-child::after {
  right: -1.4rem;
  bottom: -2.1rem;
  background-image: url('/assets/pss-art/suggest.svg');
  opacity: 0.18;
}
.pss-service-strip > .pss-shell::after {
  right: 1rem;
  bottom: -3.8rem;
  width: 15rem;
  height: 15rem;
  background-image: url('/assets/pss-art/students.svg');
  opacity: 0.16;
}
@media (max-width: 560px) {
  .pss-weekly-card::after { width: 8.5rem; height: 8.5rem; opacity: 0.18; }
  .pss-home-widgets .pss-widget:first-child::after { width: 8.5rem; height: 8.5rem; opacity: 0.16; }
  .pss-service-strip > .pss-shell::after { right: -1.8rem; width: 11rem; height: 11rem; opacity: 0.14; }
}

/* ---------- Kalendar PSS: aktiviti dan program dalam satu paparan ---------- */
.pss-calendar-page{width:min(1180px,calc(100% - 3rem));margin:0 auto;padding:3.2rem 0 4.5rem}.pss-calendar-page h1{font:800 clamp(2rem,4vw,3.35rem)/1.08 var(--sans);margin:.2rem 0 .65rem}.pss-calendar-page>.page-intro{max-width:65ch;color:var(--muted);font-size:.88rem}.pss-calendar-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);gap:1rem;margin-top:2rem}.pss-calendar-panel,.pss-calendar-agenda{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.1rem;box-shadow:0 8px 20px rgba(20,32,31,.04)}.pss-calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-bottom:1rem;border-bottom:1px solid var(--ds-color-brand-soft)}.pss-calendar-toolbar h2{font:800 1.1rem var(--sans);margin:0;color:var(--forest)}.pss-calendar-actions{display:flex;gap:.35rem}.pss-calendar-actions button{height:34px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--forest);padding:0 .65rem;font:800 .66rem var(--sans);cursor:pointer}.pss-calendar-actions button:hover,.pss-calendar-actions button:focus-visible{border-color:var(--teal);color:var(--teal)}.pss-calendar-actions button:focus-visible{outline:3px solid rgba(200,158,67,.35);outline-offset:2px}.pss-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;margin-top:1rem}.pss-calendar-weekday{padding:.25rem;color:var(--muted);font:800 .6rem var(--font-mono);letter-spacing:.04em;text-align:center;text-transform:uppercase}.pss-calendar-day{min-height:80px;padding:.55rem .45rem;background:#F7F9F8;border:1px solid var(--ds-color-brand-soft);border-radius:5px}.pss-calendar-day.is-empty{background:transparent;border-style:dashed;opacity:.45}.pss-calendar-day.is-today{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}.pss-calendar-day.has-event{background:#F1F7F4;border-color:#B9D5CA}.pss-calendar-number{display:block;color:var(--ink);font:800 .78rem var(--sans)}.pss-calendar-day.has-event small{display:block;margin-top:.35rem;color:var(--teal);font-size:.58rem;line-height:1.3}.pss-calendar-markers{display:flex;gap:.22rem;margin-top:.55rem}.pss-calendar-markers span{width:6px;height:6px;border-radius:50%;background:var(--brass)}.pss-calendar-agenda header{display:flex;align-items:end;justify-content:space-between;gap:.6rem;padding-bottom:.9rem;border-bottom:1px solid var(--ds-color-brand-soft)}.pss-calendar-agenda h2{font:800 1.1rem var(--sans);margin:0;color:var(--forest)}.pss-calendar-agenda header p{margin:0;color:var(--muted);font:700 .62rem var(--font-mono);text-align:right}.pss-calendar-list{display:grid;gap:0}.pss-calendar-event{display:grid;grid-template-columns:65px 1fr;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--ds-color-brand-soft)}.pss-calendar-event:last-child{border-bottom:0}.pss-calendar-event time{color:var(--teal);font:800 .64rem var(--font-mono);line-height:1.35}.pss-calendar-event h3{font:800 .76rem/1.35 var(--sans);margin:0;color:var(--ink)}.pss-calendar-event p{margin:.25rem 0 0;color:var(--muted);font-size:.67rem;line-height:1.45}.pss-calendar-empty{color:var(--muted);font-size:.75rem;line-height:1.5}.pss-calendar-note{margin-top:1rem;padding:.85rem 1rem;background:var(--ds-color-surface);border:1px solid #E5D9B8;border-radius:6px;color:#695116;font-size:.7rem;line-height:1.55}@media(max-width:900px){.pss-calendar-layout{grid-template-columns:1fr}.pss-calendar-agenda{order:-1}}@media(max-width:620px){.pss-calendar-page{width:calc(100% - 2rem);padding:2.6rem 0 4rem}.pss-calendar-grid{gap:.22rem}.pss-calendar-day{min-height:58px;padding:.4rem .3rem}.pss-calendar-weekday{font-size:.52rem}.pss-calendar-day.has-event small{font-size:0}.pss-calendar-day.has-event small::after{content:'Aktiviti';font-size:.5rem}.pss-calendar-toolbar{align-items:flex-start;flex-direction:column}.pss-calendar-actions{width:100%;justify-content:space-between}.pss-calendar-actions button{flex:1}.pss-calendar-event{grid-template-columns:55px 1fr}}