/* Dashboard murid (Area Murid) — ramah HP, netral dengan aksen pink HiClass */
.dm { --dm-ink:#2B2A2E; --dm-ink2:#645E66; --dm-line:#EDE6EB; --dm-pink:#C45C8A; --dm-pink-soft:#FDF2F6;
  display:grid; gap:1rem; color:var(--dm-ink); margin-bottom:1.5rem; }
.dm h2 { font-size:1.05rem; margin:0 0 .6rem; }
.dm h3 { font-size:.98rem; margin:0; }
.dm-profil { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; background:linear-gradient(135deg,#fff,#FDF2F6); border:1px solid var(--dm-line); border-radius:16px; padding:1.1rem 1.2rem; }
.dm-sapa { margin:0; color:var(--dm-pink); font-weight:700; }
.dm-nama { margin:.15rem 0 .25rem; font-size:1.45rem; line-height:1.2; }
.dm-meta { margin:0; color:var(--dm-ink2); font-size:.92rem; }
.dm-keluar { flex:0 0 auto; }
.dm-grid { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:860px){ .dm-grid { grid-template-columns:1fr 1fr; } }
.dm-kartu { background:#fff; border:1px solid var(--dm-line); border-radius:16px; padding:1rem 1.1rem; }
.dm-kecil { color:var(--dm-ink2); font-size:.84rem; margin:.35rem 0; }
.dm-sub { margin:.9rem 0 .4rem !important; font-size:.9rem !important; color:var(--dm-ink2); }
.dm-hsia { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin:.6rem 0; }
.dm-hsia div { border-radius:12px; padding:.6rem .3rem; text-align:center; }
.dm-hsia b { display:block; font-size:1.5rem; line-height:1.1; }
.dm-hsia span { font-size:.78rem; font-weight:600; }
.st-H { background:#dcfce7; color:#15803d; } .st-S { background:#fef3c7; color:#b45309; }
.st-I { background:#dbeafe; color:#1d4ed8; } .st-A { background:#fee2e2; color:#b91c1c; }
.dm-bar { height:8px; background:#f1edf0; border-radius:99px; overflow:hidden; }
.dm-bar span { display:block; height:100%; background:var(--dm-pink); border-radius:99px; }
.dm-pct { margin:.45rem 0 0; font-size:.92rem; }
.dm-list { list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.dm-list li { font-size:.92rem; }
.dm-tag { display:inline-block; min-width:3.6rem; text-align:center; border-radius:99px; padding:.05rem .5rem; font-size:.75rem; font-weight:700; margin-right:.35rem; }
.dm-detail { margin-top:.7rem; }
.dm-detail summary { cursor:pointer; color:var(--dm-pink); font-weight:700; font-size:.9rem; }
.dm-tabel { width:100%; border-collapse:collapse; margin-top:.5rem; font-size:.88rem; }
.dm-tabel th { text-align:left; width:5.5rem; vertical-align:top; padding:.35rem .4rem; color:var(--dm-ink2); }
.dm-tabel td { padding:.35rem .4rem; border-top:1px solid var(--dm-line); }
.dm-tabel tr:first-child td { border-top:0; }
.dm-mapel { border-top:1px solid var(--dm-line); padding:.85rem 0; }
.dm-mapel:first-of-type { border-top:0; padding-top:.2rem; }
.dm-mapel-kepala { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.6rem; }
.dm-angka { display:flex; gap:.45rem; }
.dm-angka div { background:#FBFAFB; border:1px solid var(--dm-line); border-radius:10px; padding:.3rem .6rem; text-align:center; min-width:4.2rem; }
.dm-angka span { display:block; font-size:.68rem; color:var(--dm-ink2); }
.dm-angka b { font-size:1.15rem; }
.dm-angka .dm-total { background:var(--dm-pink-soft); border-color:#f3cfe0; }
.dm-angka .dm-total b { color:var(--dm-pink); }
.dm-kelompok { margin-top:.6rem; }
.dm-kelompok-nama { margin:0 0 .3rem; font-size:.8rem; font-weight:700; color:var(--dm-ink2); text-transform:uppercase; letter-spacing:.03em; }
.dm-sel { display:grid; grid-template-columns:repeat(auto-fill,minmax(3.6rem,1fr)); gap:.35rem; }
.dm-sel div { border:1px solid var(--dm-line); border-radius:8px; text-align:center; padding:.25rem .2rem; }
.dm-sel span { display:block; font-size:.68rem; color:var(--dm-ink2); }
.dm-sel b { font-size:.98rem; }
.dm-sel .kosong b { color:#bbb; }
.dm-umum article + article { border-top:1px solid var(--dm-line); margin-top:.6rem; padding-top:.6rem; }
.dm-umum h3 { margin-bottom:.25rem; }
.dm-privasi { font-size:.84rem; color:var(--dm-ink2); text-align:center; margin:.2rem 0 0; }
.cek-card .flash-err-inline { display:block; margin-top:.5rem !important; padding:.65rem .8rem; border-radius:10px; background:#fde8ee; color:#a3123f; font-weight:600; line-height:1.4; }
@media (max-width:560px){ .dm-profil { flex-direction:column; } .dm-angka { width:100%; } .dm-angka div { flex:1; } }
.dm-desk { margin:.5rem 0 0; padding:.5rem .7rem; background:#FBFAFB; border-left:3px solid var(--dm-pink); border-radius:6px; font-size:.88rem; line-height:1.5; color:var(--dm-ink); }

/* Pratinjau guru & akses sementara nama+kelas */
.dm-pratinjau { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; justify-content:space-between; margin-bottom:.8rem; padding:.6rem .9rem; border-radius:12px; background:#FFF7E6; border:1px solid #F5D9A8; color:#7A4B00; font-size:.9rem; }
.cek-atau { display:flex; align-items:center; gap:.6rem; margin:1rem 0 .6rem; color:#8a8290; font-size:.8rem; }
.cek-atau::before, .cek-atau::after { content:""; flex:1; border-top:1px dashed #E6DDE3; }

/* ===== Area Murid Gen-Z (bento, pastel, radius 16px) ===== */
.am { --am-ink:#2B2A2E; --am-ink2:#6B6470; --am-line:#EFE7EE; --am-pink:#C45C8A; --am-pink-soft:#FDF0F6;
  --am-mint:#E3F7EE; --am-mint-ink:#1D7A52; --am-lilac:#EFEAFD; --am-lilac-ink:#5B45B0;
  --am-peach:#FFF0E3; --am-peach-ink:#A4541A; --am-sky:#E6F2FD; --am-sky-ink:#1F5F9E;
  background:#FBF8FA; color:var(--am-ink); min-height:100vh; display:flex; flex-direction:column; }
.am main.wrap { flex:1 0 auto; }
.am-pita-guru { background:linear-gradient(90deg,#F6EEFF,#FDF0F6); color:#4B3A6B; text-align:center; font-size:.85rem; padding:.45rem 1rem; border-bottom:1px solid #EADFF5; }
.am-pita-guru a { color:var(--am-pink); font-weight:700; white-space:nowrap; }
.am-header { display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding-top:1rem; padding-bottom:1rem; }
.am-brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--am-ink); -webkit-tap-highlight-color:transparent; user-select:none; }
.am-brand img { border-radius:11px; }
.am-brand b { display:block; font-size:1.15rem; letter-spacing:-.01em; }
.am-brand small { display:block; font-size:.74rem; color:var(--am-ink2); }
.am-header-kanan { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.am-badge-ta { background:var(--am-lilac); color:var(--am-lilac-ink); border-radius:99px; padding:.25rem .7rem; font-size:.76rem; font-weight:700; white-space:nowrap; }
.am-btn-kecil { background:var(--am-pink); color:#fff; border-radius:99px; padding:.35rem .85rem; font-size:.82rem; font-weight:700; text-decoration:none; }
.am-footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:1.2rem; padding-bottom:1.4rem; color:var(--am-ink2); font-size:.8rem; }
.am-kunci { opacity:.28; text-decoration:none; font-size:.85rem; filter:grayscale(1); transition:opacity .2s; }
.am-kunci:hover, .am-kunci:focus { opacity:.8; }

.am-bento { display:grid; gap:1rem; grid-template-columns:1fr; margin-bottom:1.2rem; }
@media (min-width:860px){
  .am-bento { grid-template-columns:1.35fr 1fr; }
  .am-status { grid-column:1; }
  .am-papan { grid-column:1; }
  .am-masuk { grid-column:2; grid-row:1 / span 3; align-self:start; }
  .am-jadwal-umum { grid-column:1; }
}
.am-kartu { background:#fff; border:1px solid var(--am-line); border-radius:16px; padding:1.1rem 1.2rem; box-shadow:0 1px 2px rgba(60,30,50,.04); }
.am-judul { font-size:1.02rem; margin:0 0 .7rem; }
.am-label { margin:0 0 .35rem; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--am-ink2); }
.am-kecil { color:var(--am-ink2); font-size:.84rem; margin:.3rem 0 .7rem; }
.am-status { border:0; }
.am-status-kbm { background:linear-gradient(135deg,var(--am-mint),#F3FBF7); }
.am-status-nonkbm { background:linear-gradient(135deg,var(--am-lilac),#F7F4FF); }
.am-status-libur { background:linear-gradient(135deg,var(--am-peach),#FFF8F1); }
.am-status-isi, .dm-status { display:flex; align-items:center; gap:.9rem; }
.am-status-ikon { font-size:2.3rem; line-height:1; flex:0 0 auto; }
.am-status h1, .am-status h2 { margin:0; font-size:1.3rem; line-height:1.25; }
.am-status p { margin:.2rem 0 0; color:var(--am-ink2); font-size:.92rem; }
.am-status-kbm h1, .am-status-kbm h2 { color:var(--am-mint-ink); }
.am-status-nonkbm h1, .am-status-nonkbm h2 { color:var(--am-lilac-ink); }
.am-status-libur h1, .am-status-libur h2 { color:var(--am-peach-ink); }
.am-segera { margin:.8rem 0 0 !important; padding:.5rem .7rem; background:rgba(255,255,255,.7); border-radius:12px; font-size:.84rem !important; }
.am-kosong { display:flex; align-items:center; gap:.7rem; background:var(--am-pink-soft); border-radius:14px; padding:.8rem 1rem; }
.am-kosong span { font-size:1.6rem; }
.am-kosong p { margin:0; font-size:.92rem; }
.am-pengumuman { display:grid; gap:.7rem; }
.am-pengumuman article { background:#FCFAFB; border:1px solid var(--am-line); border-radius:14px; padding:.75rem .9rem; }
.am-pengumuman h3 { margin:.35rem 0 .25rem; font-size:.98rem; }
.am-pengumuman-isi { font-size:.92rem; line-height:1.5; }
.am-chip { display:inline-block; background:var(--am-sky); color:var(--am-sky-ink); border-radius:99px; padding:.08rem .55rem; font-size:.72rem; font-weight:700; vertical-align:middle; }
.am-chip-pink { background:var(--am-pink-soft); color:var(--am-pink); margin-left:.3rem; }
.am-jadwal { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.am-jadwal li { background:#FCFAFB; border:1px solid var(--am-line); border-radius:12px; padding:.5rem .75rem; font-size:.92rem; }
.am-jadwal li b { margin-right:.4rem; font-variant-numeric:tabular-nums; }
.am-jadwal li.am-sekarang { background:var(--am-pink-soft); border-color:#F2C9DC; box-shadow:0 0 0 2px #F7DCE8; }
.am-btn { border-radius:99px !important; }
.am .cek-card .form-stack input, .am .cek-card .form-stack select { border-radius:12px; }

/* Tab dashboard murid */
.am-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; background:#fff; border:1px solid var(--am-line); border-radius:16px; padding:.35rem; position:sticky; top:.4rem; z-index:5; }
.am-tabs button { border:0; background:transparent; border-radius:12px; padding:.55rem .3rem; font:inherit; font-size:.86rem; font-weight:700; color:var(--am-ink2); cursor:pointer; line-height:1.2; }
.am-tabs button[aria-selected="true"] { background:var(--am-pink-soft); color:var(--am-pink); }
.am-panel { display:grid; gap:1rem; }
.dm-status { padding:.9rem 1.1rem; }
@media (max-width:560px){
  .am-tabs button span { display:block; font-size:.7rem; margin-top:.15rem; }


  .am-brand small { display:none; }
}
@media (max-width:859px){ .am-bento .am-status { order:1; } .am-bento .am-masuk { order:2; } .am-bento .am-papan { order:3; } .am-bento .am-jadwal-umum { order:4; } }
.am-panel[hidden] { display:none; }