:root {
  --bg: #F6F2E9; --surface: #FFFDF8; --surface-2: #F1ECDF; --line: #E3DCCB; --line-2: #D4CCB7;
  --ink: #2E3227; --muted: #6A6E60; --soft: #8F9282;
  --pri: #5F7C45; --pri-d: #4A6235; --pri-l: #E4EBD8;
  --acc: #C47A52; --acc-l: #F6E3D6; --warn: #B7791F; --err: #B44A3E;
  --r: 14px; --r-sm: 9px; --shadow: 0 1px 2px rgba(60,55,40,.06), 0 4px 14px rgba(60,55,40,.05);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --on-pri: #FFFFFF; --field: #FFFFFF; --grid: #E7E1D3; --notice-ink: #6B3F24; --info-ink: #3E5229; --focus: #9DB67F; --danger-bg: #FBEDEA; --danger-line: #E3B9B2; --scrim: rgba(30, 28, 20, .45);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #191B16; --surface: #22251E; --surface-2: #2C3027; --line: #383C31; --line-2: #4A4F42;
    --ink: #ECEBE3; --muted: #A9AC9C; --soft: #8B8E7F;
    --pri: #8DAE6E; --pri-d: #B2CF93; --pri-l: #2F3A25; --acc: #D9946D; --acc-l: #3A2A20; --err: #E07B6E;
    --on-pri: #14170F; --field: #1C1F18; --grid: #383C31; --notice-ink: #F0C9AE; --info-ink: #CFE0B8; --danger-bg: #3A2320; --danger-line: #6E3B33; --scrim: rgba(0, 0, 0, .6);
    --shadow: 0 1px 2px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #191B16; --surface: #22251E; --surface-2: #2C3027; --line: #383C31; --line-2: #4A4F42;
  --ink: #ECEBE3; --muted: #A9AC9C; --soft: #8B8E7F;
  --pri: #8DAE6E; --pri-d: #B2CF93; --pri-l: #2F3A25; --acc: #D9946D; --acc-l: #3A2A20; --err: #E07B6E;
  --on-pri: #14170F; --field: #1C1F18; --grid: #383C31; --notice-ink: #F0C9AE; --info-ink: #CFE0B8; --danger-bg: #3A2320; --danger-line: #6E3B33; --scrim: rgba(0, 0, 0, .6);
  --shadow: 0 1px 2px rgba(0,0,0,.3);
  color-scheme: dark;
}

/* ---------- Dialog di dalam halaman ---------- */
.modal { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; padding: 16px; z-index: 60; }
.modal-box { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; width: min(520px, 100%); max-height: 90vh; overflow: auto; display: grid; gap: 12px; }
.modal-box p { margin: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--pri-d); }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }
h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .7em; }
small, .muted { color: var(--muted); }
.ico { flex: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.view:focus { outline: none; }

/* ---------- Kerangka ---------- */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--line); padding: 18px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.brand { display: flex; gap: 10px; align-items: center; padding: 4px 8px 18px; }
.brand b { display: block; font-size: 1.1rem; }
.brand small { display: block; font-size: .78rem; line-height: 1.3; }
.logo { width: 38px; height: 38px; border-radius: 11px; background: var(--pri); color: var(--on-pri); display: grid; place-items: center; }
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav a, .bottomnav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500; }
.sidenav a:hover { background: var(--surface-2); color: var(--ink); }
.sidenav a.on { background: var(--pri-l); color: var(--pri-d); }
.side-foot { margin-top: auto; padding: 10px; font-size: .78rem; }
.main { min-width: 0; padding: 0 28px 40px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 14px; }
.top-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.top h1 { font-size: 1.45rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back { font-size: 1.8rem; line-height: 1; text-decoration: none; color: var(--muted); padding: 0 6px; }
.who { display: flex; align-items: center; gap: 10px; }
.who-t b { display: block; font-size: .9rem; line-height: 1.2; }
.who-t small { font-size: .76rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bottomnav { display: none; }

/* ---------- Komponen ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); }
.card + .card { margin-top: 14px; }
.card h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.widgets .card + .card { margin-top: 0; }
.w-wide { grid-column: 1 / -1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 15px; border-radius: 10px; border: 1px solid var(--pri); background: var(--pri); color: var(--on-pri); font: 600 .9rem var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--pri-d); }
.btn.ghost { background: transparent; color: var(--pri-d); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.soft { background: var(--pri-l); color: var(--pri-d); border-color: transparent; }
.btn.danger { background: transparent; color: var(--err); border-color: var(--danger-line); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.sm { padding: 6px 11px; font-size: .82rem; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.iconbtn { border: 1px solid var(--line-2); background: var(--surface); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; color: var(--muted); font-size: 1rem; }
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tile { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.tile b { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
.tile span { font-size: .82rem; color: var(--muted); }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 11px 0; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.wrap { flex-wrap: wrap; }
.meta { font-size: .82rem; color: var(--muted); }
.clamp { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.lvl { display: inline-block; font-size: .76rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.lvl-none { background: var(--surface-2); color: var(--soft); font-weight: 500; }
.dtag { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--ink); }
.dtag::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--dc); }
.sbadge { display: inline-block; font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); margin-right: 4px; }
.s-iep { background: #E6ECF6; color: #3D5584; } .s-skl { background: #F8EBD8; color: #8A5A1E; } .s-trp { background: #EEE6F4; color: #64478A; }
.pill { display: inline-block; font-size: .75rem; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ac); color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }

.kidgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.kid { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); }
.kid:hover { border-color: var(--line-2); transform: translateY(-1px); }
.kid h3 { margin: 0; font-size: 1.05rem; }
.mini-bars { display: flex; gap: 3px; margin-top: 12px; height: 34px; align-items: flex-end; }
.mini-bars i { flex: 1; border-radius: 3px 3px 0 0; min-height: 3px; display: block; }

.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar { display: grid; grid-template-columns: minmax(110px, 190px) 1fr 52px; gap: 10px; align-items: center; font-size: .86rem; }
.hbar .track { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 999px; }
.hbar .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--muted); margin-top: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 16px; overflow-x: auto; }
.tabs a { padding: 9px 14px; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--pri-d); border-color: var(--pri); }

.empty { text-align: center; padding: 28px 16px; color: var(--muted); }
.notice { background: var(--acc-l); border-radius: 12px; padding: 11px 14px; font-size: .88rem; color: var(--notice-ink); }
.notice.info { background: var(--pri-l); color: var(--info-ink); }

/* ---------- Form ---------- */
.form { display: grid; gap: 14px; }
.field label, .field > span { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 5px; }
.field small { display: block; margin-top: 4px; }
input[type=text], input[type=date], input[type=number], input[type=email], input[type=search], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--field); font: inherit; color: var(--ink);
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--pri); outline: 3px solid var(--pri-l); }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.gp { margin-bottom: 10px; }
.gp legend { margin-bottom: 6px; }
.chip { display: inline-flex; max-width: 100%; margin: 0 6px 6px 0; cursor: pointer; position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: block; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 16px; font-size: .84rem; line-height: 1.35; background: var(--field); }
.chip input:checked + span { background: var(--pri-l); border-color: var(--pri); color: var(--pri-d); font-weight: 600; }
.chip input:focus-visible + span { outline: 3px solid var(--focus); }
.lvlpick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lvlpick label { cursor: pointer; }
.lvlpick input { position: absolute; opacity: 0; }
.lvlpick span { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 6px; border: 2px solid var(--line); border-radius: 12px; font-size: .78rem; background: var(--field); height: 100%; }
.lvlpick b { font-size: 1.2rem; }
.lvlpick input:checked + span { background: var(--lc); color: var(--li); border-color: var(--lc); }
.lvlpick input:focus-visible + span { outline: 3px solid var(--focus); }
.check { display: flex; gap: 8px; align-items: center; font-size: .9rem; }

/* ---------- Bank goal & tabel ---------- */
.mg { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 8px; }
.mg > summary { list-style: none; cursor: pointer; padding: 11px 14px; display: flex; gap: 10px; align-items: center; }
.mg > summary::-webkit-details-marker { display: none; }
.mg > summary::after { content: "›"; margin-left: auto; color: var(--soft); font-size: 1.2rem; transition: transform .15s; }
.mg[open] > summary::after { transform: rotate(90deg); }
.mg .mg-body { padding: 0 14px 12px; border-top: 1px dashed var(--line); }
.mid { font: 600 .75rem/1 ui-monospace, Consolas, monospace; color: var(--muted); background: var(--surface-2); padding: 4px 6px; border-radius: 6px; flex: none; }
.src { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .87rem; }
.src:last-child { border: 0; }
table.t { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.t th, table.t td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t th { font-size: .78rem; color: var(--muted); font-weight: 600; background: var(--surface-2); }
.tablewrap { overflow-x: auto; }

/* ---------- Laporan ---------- */
.report-text { width: 100%; min-height: 520px; font: 14px/1.6 var(--font); background: var(--field); }
.ck-dom { margin-bottom: 16px; break-inside: avoid; }
.ck-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ck-mark { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.ck-src { font-size: .8rem; color: var(--muted); margin: 4px 0 0; padding-left: 16px; }
.poster-wrap { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 20px; align-items: start; }
.poster-wrap svg { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow); background: #fff; }
.swatches { display: flex; gap: 8px; }
.swatches button, .swatches .sw { display: block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; }
.swatches button.on, .swatches .sw.on { box-shadow: 0 0 0 2px var(--ink); }
.chart svg { width: 100%; height: auto; display: block; }
.print-only { display: none; }

/* ---------- Foto dokumentasi ---------- */
.phgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 6px; }
.phgrid.big { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.phgrid figure { margin: 0; min-width: 0; }
.phgrid figcaption { font-size: .76rem; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--surface-2); display: block; max-width: 100%; }
.ph.missing { outline: 1px dashed var(--line-2); }
.phbox { position: relative; }
.phx { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--scrim); color: #fff; font-size: 1rem; cursor: pointer; line-height: 1; }
.phnew { position: absolute; left: 6px; bottom: 6px; font-size: .68rem; font-weight: 700; background: var(--pri); color: var(--on-pri); padding: 1px 6px; border-radius: 6px; }

/* ---------- Perbandingan per area ---------- */
.cmp { display: grid; gap: 12px; }
.cmp-row { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) 70px 160px; gap: 12px; align-items: center; }
.cmp-label small { display: block; color: var(--muted); font-size: .74rem; margin-top: 2px; }
.cmp-bars { display: grid; gap: 4px; }
.cmp-bars .track { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.cmp-bars .track.prev { height: 6px; }
.cmp-bars .track.prev .fill { background: var(--line-2); }
.cmp-bars .fill { height: 100%; border-radius: 999px; }
.cmp-val { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-val b { display: block; font-size: 1.05rem; }
.delta { font-size: .78rem; font-weight: 700; color: var(--muted); }
.delta.up { color: var(--pri-d); } .delta.down { color: var(--err); }
.spark { display: block; max-width: 100%; height: auto; }
.howto { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: .86rem; margin-bottom: 14px; }
.narr { padding-left: 18px; display: grid; gap: 8px; margin: 0; }
.narr li { line-height: 1.55; }
.narr-in { display: block; margin: 6px 0; min-height: 110px; }

/* ---------- Dokumen laporan (siap PDF) ---------- */
.report-doc { max-width: 920px; }
.rhead { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid var(--pri); padding-bottom: 12px; margin-bottom: 14px; }
.rhead h1 { font-size: 1.5rem; color: var(--pri-d); margin: 2px 0 0; }
.rhead small { color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.rname { font-size: 1.25rem; font-weight: 700; margin: 4px 0 2px; }
.rtiles { margin-bottom: 6px; }
.rsec { margin-top: 22px; }
.rsec > h2, .rsec h3 { break-after: avoid; page-break-after: avoid; }
.rsec > h2 { font-size: 1.08rem; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 10px; }
.rsec h3 { margin: 14px 0 6px; }
.rsec textarea { min-height: 90px; }
.dlog { padding: 12px 0; border-bottom: 1px solid var(--line); }
.dlog p { margin: 4px 0; font-size: .92rem; }
.rfoot { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 10px; }
.navbtn { display: inline-grid; place-items: center; text-decoration: none; flex: none; }

/* ---------- Checklist goal ---------- */
.cksum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cks-item { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font-size: .88rem; }
.cks-item b { font-size: 1.15rem; }
.cks-item small { display: block; color: var(--muted); font-size: .74rem; line-height: 1.3; }
.ckbox { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .95rem; border: 2px solid var(--line-2); background: var(--field); color: var(--soft); cursor: pointer; padding: 0; font-family: inherit; }
span.ckbox { cursor: default; width: 26px; height: 26px; }
.ckbox.st-done { background: var(--pri); border-color: var(--pri); color: var(--on-pri); }
.ckbox.st-auto { border-color: var(--pri); color: var(--pri-d); background: var(--pri-l); }
.ckbox.st-near { border-color: #C99A2E; color: #8A6512; background: #F6EBC8; }
.ckbox.st-prog { border-color: var(--acc); color: var(--acc); }
.ckm { display: grid; grid-template-columns: 34px minmax(0, 1fr) 160px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ckm-main > b { display: block; line-height: 1.35; }
.ckm-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .8rem; color: var(--muted); margin-top: 6px; }
.tgt select { width: auto; padding: 3px 8px; font-size: .8rem; border-radius: 8px; margin-left: 4px; }
.ck-items { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.ck-items label { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; cursor: pointer; }
.ck-items input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--pri); flex: none; }
.ck-items .sbadge { flex: none; margin-top: 1px; }
.ck-txt { min-width: 0; }
.orig { display: block; color: var(--soft); font-style: italic; margin-top: 2px; }
.origd { font-size: .8rem; color: var(--soft); margin-top: 2px; }
.origd summary { cursor: pointer; color: var(--muted); }
.origd[open] { font-style: italic; }
.ckm-stat { text-align: right; font-size: .85rem; }
.ckm-stat small { display: block; color: var(--muted); font-size: .74rem; }
.ckm-stat.st-done b, .ckm-stat.st-auto b { color: var(--pri-d); }
.ckm-stat.st-near b { color: var(--warn); }
.ckm-stat.st-prog b { color: var(--acc); }
.ckm-stat.st-none b { color: var(--soft); }

/* ---------- Laporan harian ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chip-clear span { color: var(--soft); }
.mealbox { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.mealrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; align-items: center; }
.mealrow > small { color: var(--muted); font-weight: 600; }
.routines { display: grid; gap: 6px; }
.moodbig { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; border-radius: 14px; background: var(--surface-2); border: 2px solid var(--mc); text-align: center; }
.moodbig { align-items: flex-start; text-align: left; border-width: 0 0 0 4px; border-radius: 10px; padding: 8px 14px; }
.moodbig small { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.moodbig b { font-size: .95rem; }
.mdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.arow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; margin: 6px 0; font-size: .92rem; align-items: start; }
.arow .lbl { min-width: 0; padding-top: 2px; }
.goallist { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.addgoal { margin-top: 8px; }
.addgoal summary { cursor: pointer; color: var(--pri-d); font-weight: 600; font-size: .88rem; }
.addgoal-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px; margin: 8px 0 4px; }
.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.links a { display: flex; gap: 8px; align-items: center; text-decoration: none; min-width: 0; }
.linkurl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; min-width: 0; }
.lead { font-size: 1.02rem; line-height: 1.6; margin: 0; }
.dcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.dcard { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.dcard small { display: block; color: var(--muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.dcard b { display: block; margin: 2px 0; }
.dcard p { margin: 2px 0 0; font-size: .88rem; }
.rtlist { display: flex; flex-wrap: wrap; gap: 6px; }
.rt { font-size: .84rem; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); }
.rt b { margin-left: 4px; }
.rt.rt-ok b { color: var(--pri-d); } .rt.rt-mid b { color: var(--warn); } .rt.rt-low b { color: var(--err); }
.actcard { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.actcard:not(:has(.actph)) { grid-template-columns: minmax(0, 1fr); }
.actph { display: grid; gap: 6px; }
.acttitle { font-size: 1.02rem; }
.actbody p { margin: 4px 0; font-size: .92rem; }
.lbl { display: inline-block; min-width: 110px; color: var(--muted); font-size: .8rem; font-weight: 600; }
.dotsx { letter-spacing: 2px; font-size: 1rem; }
.hl { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hl li { display: flex; gap: 10px; align-items: flex-start; }
.hlicon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; }
.hlicon.star { background: var(--acc); } .hlicon.up { background: var(--pri); }
.tip { background: var(--pri-l); color: var(--info-ink); border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: .9rem; }

/* ---------- Rencana mingguan & bulanan ---------- */
.calnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calnav h2 { margin: 0; font-size: 1.1rem; }
.wfocus input { flex: 1; }
.weekgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; align-items: start; }
.wday { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; min-height: 180px; display: grid; gap: 8px; align-content: start; }
.wday header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.wday header b { font-size: .95rem; }
.wday header span { color: var(--muted); font-size: .8rem; }
.wday.today { border-color: var(--pri); box-shadow: 0 0 0 2px var(--pri-l); }
.wday.off { background: var(--surface-2); }
.wplan { display: grid; gap: 3px; text-decoration: none; color: var(--ink); background: var(--surface-2); border-radius: 10px; padding: 8px 9px; border-left: 4px solid var(--acc); }
.wplan.done { border-left-color: var(--pri); opacity: .85; }
.wplan b { font-size: .86rem; line-height: 1.3; }
.wplan .meta { font-size: .74rem; }
.wdoms { display: flex; align-items: center; gap: 4px; }
.wdoms i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.wdoms small { color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wadd { font-size: .82rem; font-weight: 600; color: var(--pri-d); text-decoration: none; padding: 6px; border: 1px dashed var(--line-2); border-radius: 10px; text-align: center; }
.wadd:hover { background: var(--pri-l); }
.monthgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.monthgrid .card + .card { margin-top: 0; }
.weekcard { text-decoration: none; color: var(--ink); display: block; }
.weekcard:hover { border-color: var(--pri); }
.wfocus-s { margin: 6px 0 0; color: var(--pri-d); font-weight: 600; font-size: .9rem; }
.wdots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.wdots span { text-align: center; font-size: .72rem; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: 5px 2px; }
.wdots span b { display: block; font-size: 1rem; color: var(--soft); }
.wdots span.has { background: var(--pri-l); color: var(--pri-d); }
.wdots span.has b { color: var(--pri-d); }
.wdots span.off { outline: 2px solid var(--acc-l); }
@media (max-width: 1100px) { .weekgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .weekgrid { grid-template-columns: minmax(0, 1fr); } .wday { min-height: 0; } .monthgrid { grid-template-columns: minmax(0, 1fr); } }

/* Cetak rencana mingguan (A4 mendatar) */
.pp-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px max(16px, env(safe-area-inset-left, 0px)); background: var(--surface); border-bottom: 1px solid var(--line); }
.pp { max-width: 1120px; margin: 0 auto; padding: 18px 16px 30px; background: var(--surface); color: var(--ink); }
.pp-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid var(--pri); padding-bottom: 10px; }
.pp-head h1 { margin: 2px 0; font-size: 1.4rem; color: var(--pri-d); }
.pp-head small { color: var(--muted); font-weight: 600; }
.pp-head p { margin: 0; }
.pp-focus { background: var(--pri-l); border-radius: 10px; padding: 8px 14px; max-width: 360px; }
.pp-focus small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.pp-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 12px; font-size: .86rem; }
.pp-table th { background: var(--surface-2); padding: 8px; text-align: left; border: 1px solid var(--line-2); }
.pp-table th small { display: block; font-weight: 500; color: var(--muted); }
.pp-table td { vertical-align: top; padding: 8px; border: 1px solid var(--line-2); }
.pp-act { margin-bottom: 10px; break-inside: avoid; }
.pp-act b { display: block; line-height: 1.3; }
.pp-act p { margin: 3px 0 0; font-size: .8rem; line-height: 1.4; }
.pp-act p span { font-weight: 700; }
.pp-why { color: var(--pri-d); }
.pp-empty, .pp-off { color: var(--soft); margin: 0; }
.pp-foot { margin-top: 12px; font-size: .78rem; color: var(--muted); }
.pp-foot p { margin: 2px 0; }
@media print { .pp { max-width: none; padding: 0; background: #fff; } .pp-table { font-size: 10.5px; } }
@media (max-width: 760px) { .pp-table, .pp-table tbody, .pp-table tr, .pp-table td { display: block; width: 100%; } .pp-table thead { display: none; } .pp-head { flex-direction: column; } }

/* ---------- Lampiran file ---------- */
.attlist { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.attlist li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.attname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.attbtns { flex: none; gap: 6px; }
.fbadge { flex: none; font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.f-pdf { background: #F6DCD7; color: #8A2E22; } .f-gambar { background: #E6ECF6; color: #3D5584; }
.f-word { background: #DDE8F6; color: #24508F; } .f-powerpoint { background: #F8E3D6; color: #8A4A1E; } .f-excel { background: #DDEFE2; color: #23663A; }
.hc-files { margin-top: 8px; display: grid; gap: 6px; }
.hc-file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .attlist li { flex-wrap: wrap; } .attbtns { width: 100%; justify-content: flex-end; } }

/* ---------- Absensi ---------- */
.attrow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.attrow:last-child { border-bottom: 0; }
.attchips { margin-top: 6px; }
.attnote { margin-top: 4px; }
.attpill { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border-left: 4px solid var(--ac); }

/* ---------- Kegiatan rumah ---------- */
.homecard { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; background: var(--surface); break-inside: avoid; }
.hc-title { font-size: 1.02rem; }
.hc-why { color: var(--pri-d); font-weight: 600; margin: 4px 0 6px; }
.homecard p { margin: 4px 0; font-size: .92rem; }
.hc-steps { margin: 0 0 4px; padding-left: 22px; font-size: .92rem; }
.hc-tip { background: var(--surface-2); border-radius: 8px; padding: 6px 10px; }
.hc-links a { font-weight: 600; }
.homebox { padding: 12px; border: 1px dashed var(--line-2); border-radius: 12px; display: grid; gap: 8px; }

/* ---------- Halaman orang tua (ramah untuk semua usia) ---------- */
.o-preview { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--ink); color: var(--bg); padding: 10px max(16px, env(safe-area-inset-left, 0px)); }
.o-preview small { color: var(--bg); opacity: .8; }
.o-preview .btn.ghost { color: var(--bg); border-color: rgba(255,255,255,.4); }
.ortu { max-width: 640px; margin: 0 auto; padding: 18px 16px 60px; font-size: 18px; line-height: 1.6; }
.o-head h1 { font-size: 1.6rem; margin: 4px 0; color: var(--pri-d); }
.o-head small { color: var(--muted); font-weight: 600; }
.o-head p { margin: 0; color: var(--muted); font-size: .95rem; }
.o-warn { background: var(--acc-l); color: var(--notice-ink); border-radius: 12px; padding: 10px 14px; font-size: .9rem; margin: 14px 0; }
.o-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-top: 16px; }
.o-sec h2 { font-size: 1.3rem; margin-bottom: 8px; }
.o-absent { border: 2px solid var(--acc); }
.o-date { color: var(--muted); font-size: .95rem; margin: 0 0 8px; }
.o-sum { font-size: 1.05rem; }
.o-box { background: var(--surface-2); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.o-box p { margin: 4px 0; }
.o-box.good { background: var(--pri-l); }
.o-box.note { border-left: 4px solid var(--pri); }
.o-act { border-top: 1px solid var(--line); padding: 14px 0 6px; }
.o-act-t { font-size: 1.1rem; display: block; margin-bottom: 4px; }
.o-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.o-lbl { margin: 8px 0 2px; font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.o-goals { margin: 0; padding-left: 22px; }
.o-res { display: inline-block; font-weight: 700; padding: 4px 14px; border-radius: 999px; background: var(--surface-2); }
.o-res.r3, .o-res.r4 { background: var(--pri-l); color: var(--pri-d); }
.o-res.r2 { background: #F6EBC8; color: #6E520F; }
.o-res.r0, .o-res.r1 { background: var(--acc-l); color: var(--notice-ink); }
.o-more, .o-day, .o-ck { margin-top: 12px; }
.o-more > summary, .o-day > summary, .o-ck > summary { cursor: pointer; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.o-more > summary::after, .o-day > summary::after, .o-ck > summary::after { content: "▾"; color: var(--muted); }
.o-day { margin-left: 4px; }
.o-day > summary { background: transparent; border: 1px solid var(--line); font-weight: 600; }
.o-ck > summary span { font-weight: 500; color: var(--muted); font-size: .92rem; margin-left: auto; }
.o-ck ul { list-style: none; padding: 8px 4px; margin: 0; display: grid; gap: 8px; }
.o-ck li { display: flex; gap: 10px; align-items: flex-start; }
.o-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 10px; }
.o-seg a { text-align: center; padding: 12px 4px; border-radius: 12px; border: 2px solid var(--line-2); text-decoration: none; color: var(--ink); font-weight: 700; font-size: .95rem; }
.o-seg a.on { background: var(--pri); border-color: var(--pri); color: var(--on-pri); }
.o-areas { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.o-areas li { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.o-areas p { margin: 2px 0 0; font-size: .95rem; color: var(--muted); }
.o-chip { flex: none; display: inline-block; font-size: .82rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
.o-chip.ok { background: var(--pri-l); color: var(--pri-d); }
.o-chip.near { background: #F6EBC8; color: #6E520F; }
.o-chip.prog { background: var(--acc-l); color: var(--notice-ink); }
.o-chip.none { background: var(--surface-2); color: var(--soft); }
.o-foot { margin-top: 24px; text-align: center; color: var(--muted); font-size: .95rem; }
.ortu .homecard p, .ortu .hc-steps { font-size: 1rem; }
.o-head { display: grid; gap: 4px; }
.o-vsel { display: inline-flex; background: rgba(255,255,255,.12); border-radius: 10px; padding: 3px; gap: 2px; }
.o-vsel a { color: var(--bg); text-decoration: none; padding: 5px 12px; border-radius: 8px; font-size: .85rem; font-weight: 600; }
.o-vsel a.on { background: var(--bg); color: var(--ink); }

/* Bingkai pratinjau perangkat */
.o-frame { margin: 20px auto 40px; background: var(--bg); }
.o-frame-hp { width: 390px; max-width: calc(100% - 32px); height: 800px; max-height: 80vh; overflow: auto; border: 10px solid #23251f; border-radius: 38px; box-shadow: var(--shadow); }
.o-frame-tablet { width: 820px; max-width: calc(100% - 32px); height: 1000px; max-height: 82vh; overflow: auto; border: 14px solid #23251f; border-radius: 30px; box-shadow: var(--shadow); }
.o-frame-desktop { width: 100%; }

/* Tablet: tetap digulir, isi dua kolom */
.o-tablet { max-width: 780px; }
.o-tablet .o-grid, .o-tablet .o-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.o-tablet .o-grid .homecard { margin-top: 0; }

/* Desktop: satu bagian per layar + tombol Sebelumnya/Berikutnya */
.o-desk { max-width: 1180px; padding: 20px 28px 40px; font-size: 17px; }
.o-desk .o-head { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 20px; }
.o-desk .o-head .o-warn { margin: 0; }
.o-steps { display: flex; gap: 8px; margin: 18px 0 12px; flex-wrap: wrap; }
.o-steps button { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 8px 16px 8px 8px; font: 600 .95rem var(--font); cursor: pointer; }
.o-steps button span { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: .85rem; }
.o-steps button.on { border-color: var(--pri); background: var(--pri-l); color: var(--pri-d); }
.o-steps button.on span { background: var(--pri); color: var(--on-pri); }
.o-stage { min-height: 58vh; }
.o-desk .o-sec { margin-top: 0; padding: 24px 28px; }
.o-desk .o-grid, .o-desk .o-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.o-desk .o-grid .homecard { margin-top: 0; }
.o-desk .o-act { border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.o-desk .o-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.o-desk .o-ckgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Daftar kemampuan: sumber & rincian */
.o-ck li { align-items: flex-start; }
.o-ckt { min-width: 0; flex: 1; }
.o-srcs { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.o-rinci { margin-top: 4px; font-size: .9rem; }
.o-rinci > summary { cursor: pointer; color: var(--pri-d); font-weight: 600; }
.o-rinci ul { padding: 6px 0 2px !important; gap: 6px !important; }
.o-rinci li { display: flex; gap: 8px; }
.o-tick { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: var(--soft); margin-top: 2px; }
.o-tick.ok { background: var(--pri); border-color: var(--pri); color: var(--on-pri); }
.o-done { color: var(--pri-d); font-weight: 600; }
.o-filter { grid-template-columns: repeat(4, 1fr); }

/* Pilihan varian di bilah pratinjau */
.o-vsel { flex-wrap: wrap; }
.o-frame-tablet-land { width: 1180px; max-width: calc(100% - 32px); height: 820px; max-height: 82vh; overflow: auto; border: 14px solid #23251f; border-radius: 30px; box-shadow: var(--shadow); }

/* HP · Menu lompat */
.o-jumpbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin: 8px 0 0; background: var(--bg); scrollbar-width: none; }
.o-jumpbar button { flex: none; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 8px 14px; font: 700 .95rem var(--font); cursor: pointer; }
.o-jumpbar button:active { background: var(--pri-l); }
.o-jump .o-sec { scroll-margin-top: 70px; }

/* HP · Tab bawah (seperti WhatsApp) */
.o-hptab { padding-bottom: 20px; }
.o-bottomtabs { position: sticky; bottom: 0; z-index: 5; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
.o-bottomtabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; color: var(--muted); font: 600 .78rem var(--font); padding: 6px 2px; border-radius: 12px; cursor: pointer; min-height: 58px; }
.o-bottomtabs button b { font-weight: 700; }
.o-bottomtabs button.on { color: var(--pri-d); background: var(--pri-l); }

/* Tablet · Tab atas */
.o-toptabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; background: var(--bg); padding: 10px 0; margin-top: 6px; }
.o-toptabs button, .o-sidenav button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 14px; padding: 12px 10px; font: 700 1rem var(--font); cursor: pointer; }
.o-toptabs button.on, .o-sidenav button.on { border-color: var(--pri); background: var(--pri); color: var(--on-pri); }
.o-tabtop .o-sec, .o-side .o-sec { margin-top: 6px; }

/* Tablet · Menu samping (mendatar) */
.o-side { max-width: 1120px; }
.o-side .o-head { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center; gap: 16px; }
.o-side .o-head .o-warn { margin: 0; }
.o-sidegrid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.o-sidenav { position: sticky; top: 10px; display: grid; gap: 8px; }
.o-sidenav button { justify-content: flex-start; padding: 14px 14px; }
.o-side .o-sec { margin-top: 0; }
.o-side .o-grid, .o-side .o-acts, .o-side .o-ckgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.o-desk .o-ck { margin-top: 0; }
.o-pager { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); }
.o-pager .btn { font-size: 1.05rem; padding: 12px 24px; min-width: 170px; }
.o-pager span { color: var(--muted); font-weight: 600; }

/* ---------- Mode online ---------- */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--pri-d); text-decoration: underline; cursor: pointer; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.joinbox { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.joinbox p { margin: 0 0 8px; }
.joincode { font: 700 1.4rem ui-monospace, Consolas, monospace; letter-spacing: .15em; background: var(--surface); border: 2px dashed var(--line-2); border-radius: 10px; padding: 4px 14px; }
.o-link { font-family: ui-monospace, Consolas, monospace; word-break: break-all; }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(520px, 100%); }
.login-card .brand { padding: 0 0 14px; }
.acct { display: flex; width: 100%; align-items: center; gap: 12px; text-align: left; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); cursor: pointer; font: inherit; color: inherit; margin-bottom: 8px; }
.acct:hover { border-color: var(--pri); background: var(--pri-l); }

/* ---------- Toast ---------- */
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-size: .9rem; box-shadow: var(--shadow); transition: opacity .4s, transform .4s; max-width: 340px; }
.toast.err { background: var(--err); color: var(--on-pri); }
.toast.out { opacity: 0; transform: translateY(6px); }

/* ---------- Responsif ---------- */
/* ---------- Isian form: jangan melebihi kolomnya (Safari iPad memberi lebar minimum pada input tanggal) ---------- */
input, select, textarea { min-width: 0; max-width: 100%; }
input[type=date] { -webkit-appearance: none; appearance: none; display: block; min-height: 42px; text-align: left; }
input[type=date]::-webkit-date-and-time-value { text-align: left; }
.field, .grid > *, .row > .field { min-width: 0; }

/* ---------- Laptop kecil & iPad mendatar (≤1280px) ---------- */
@media (max-width: 1280px) {
  .shell { grid-template-columns: 210px 1fr; }
  .main { padding: 0 22px 40px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hbar { grid-template-columns: minmax(100px, 160px) minmax(0, 1fr) 44px; }
  .cmp-row { grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) 60px 120px; }
}
@media (max-width: 1100px) {
  .widgets, .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poster-wrap { grid-template-columns: 1fr; }
  .poster-wrap > div:first-child { max-width: 520px; }
  .ckm { grid-template-columns: 34px minmax(0, 1fr) 130px; }
  .mealrow { grid-template-columns: 120px minmax(0, 1fr); }
}
/* ---------- iPad tegak (≤900px): menu pindah ke bawah supaya konten selebar layar ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .main { padding: 0 20px 100px; }
  .bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--line); justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); z-index: 20; }
  .bottomnav a { flex-direction: column; gap: 3px; font-size: .74rem; padding: 6px 4px; flex: 1; text-align: center; border-radius: 10px; }
  .bottomnav a.on { color: var(--pri-d); background: var(--pri-l); }
  #toasts { bottom: 90px; }
  .cmp-row { grid-template-columns: minmax(0, 1fr) 64px; row-gap: 6px; }
  .cmp-label, .cmp-spark { grid-column: 1 / -1; }
  .ckm { grid-template-columns: 34px minmax(0, 1fr); }
  .ckm-stat { grid-column: 2; text-align: left; }
  .actcard { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .main { padding: 0 16px 92px; }
  .top { padding-top: 14px; }
  .top h1 { font-size: 1.2rem; }
  .who-t, #btnLogout { display: none; }
  .widgets, .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--line); justify-content: space-around; padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); z-index: 20; }
  .bottomnav a { flex-direction: column; gap: 2px; font-size: .64rem; padding: 6px 2px; flex: 1; text-align: center; }
  .bottomnav a.on { color: var(--pri-d); }
  .bottomnav a:nth-child(6) { display: none; }
  .lvlpick { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lvlpick span { font-size: .66rem; padding: 8px 2px; }
  .hbar { grid-template-columns: 100px 1fr 40px; }
  .cmp-row { grid-template-columns: minmax(0, 1fr) 64px; row-gap: 6px; }
  .cmp-label { grid-column: 1 / -1; }
  .cmp-spark { grid-column: 1 / -1; }
  .rhead .avatar { display: none; }
  .actcard { grid-template-columns: minmax(0, 1fr); }
  .actph { grid-template-columns: 1fr 1fr; }
  .mealrow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lbl { display: block; }
  .arow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .addgoal-row { grid-template-columns: minmax(0, 1fr); }
  .ckm { grid-template-columns: 34px minmax(0, 1fr); }
  .ckm-stat { grid-column: 2; text-align: left; }
  #toasts { bottom: 80px; left: 16px; right: 16px; }
}

/* ---------- Cetak ---------- */
@media print {
  body { background: #fff; font-size: 12px; }
  .side, .top, .bottomnav, .page-actions, .no-print, #toasts, .tabs { display: none !important; }
  .shell { display: block; } .main { padding: 0; }
  .card { box-shadow: none; border: 0; padding: 0; }
  .print-only { display: block; }
  .report-text { border: 0; min-height: 0; }
  @page { size: A4; margin: 14mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-doc { max-width: none; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .cmp-row { grid-template-columns: 170px minmax(0, 1fr) 60px 130px; }
  .phgrid.big { grid-template-columns: repeat(3, 1fr); }
  .tablewrap { overflow: visible; }
  tr, figure, .dlog, .cmp-row, .howto, .narr li, .tile { break-inside: avoid; page-break-inside: avoid; }
  .card, .report-doc { background: transparent; }
  .rsec { margin-top: 14px; }
  .rhead { margin-bottom: 10px; padding-bottom: 8px; }
  .tiles { gap: 6px; }
  .tile { padding: 8px 10px; }
  .tile b { font-size: 1.25rem; }
  .cmp { gap: 6px; }
  .howto { margin-bottom: 8px; padding: 8px 10px; }
  .narr { gap: 5px; }
  /* Kegiatan boleh terpotong antarhalaman supaya tidak meninggalkan ruang kosong */
  .actcard { break-inside: auto; page-break-inside: auto; grid-template-columns: 48mm minmax(0, 1fr); gap: 4mm; padding: 6px 0; }
  .actcard:not(:has(.actph)) { grid-template-columns: minmax(0, 1fr); }
  .actph { grid-template-columns: 1fr; break-inside: avoid; }
  .actph .ph { max-height: 40mm; }
  .arow, .hl li, .dcard { break-inside: avoid; page-break-inside: avoid; }
  .arow { margin: 3px 0; }
  .dcards { gap: 6px; }
}