:root{
  --ink:#182420; --ink-rgb:24,36,32; --paper:#FAF8EF; --card:#FFFFFF; --surface:#EAF6EC;
  --ink2:#4A5A50; --muted:#5C6C61; --coral:#108740; --coral-d:#0C7A37; --red:#E5484D;
  --gold:#F4B740; --gold-soft:#FBEFCB;
  --fs:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fd:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;
  --fzh:'Noto Serif SC','Songti SC','PingFang SC',serif;
  --shadow:0 6px 18px -6px rgba(11,60,35,.12);
  --shadow-lg:0 24px 48px -20px rgba(9,52,30,.26);
  --shadow-jade:0 14px 28px -12px rgba(15,140,64,.45);
  --ease-out:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);font-family:var(--fs);color:var(--ink);
  background-image:radial-gradient(ellipse at 10% 0,rgba(21,162,74,.08),transparent 55%),
    radial-gradient(ellipse at 90% 8%,rgba(244,183,64,.06),transparent 50%);min-height:100vh;}
h2,h3,.brand b{font-family:var(--fd);letter-spacing:-.015em;}
:focus-visible{outline:3px solid var(--coral-d);outline-offset:2px;border-radius:8px;}
.brand{display:flex;align-items:center;gap:9px;font-size:1.05rem;font-weight:700;}
.brand .brand-mark{width:32px;height:32px;border-radius:9px;object-fit:cover;flex:none;
  box-shadow:0 4px 12px -4px rgba(9,52,30,.45),0 0 0 1px rgba(11,60,35,.06);}
.brand .zi{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;
  background:linear-gradient(155deg,#59D86C,#159447);color:#fff;font-family:var(--fzh);font-weight:700;font-size:18px;}
.muted{color:var(--ink2);}

/* auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{width:100%;max-width:390px;background:var(--card);border:1px solid #E3E0D0;border-radius:24px;padding:32px 30px;box-shadow:var(--shadow-lg);}
.auth-card .brand{justify-content:center;font-size:1.2rem;margin-bottom:6px;}
.auth-card .muted{text-align:center;margin:0 0 20px;font-size:.9rem;}
.seg{display:flex;background:var(--surface);border-radius:12px;padding:4px;margin-bottom:16px;}
.seg button{flex:1;border:none;background:none;font-family:var(--fs);font-weight:700;font-size:.88rem;color:var(--muted);padding:9px 0;border-radius:9px;cursor:pointer;}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow);}
form{display:flex;flex-direction:column;gap:10px;}
input,textarea,select{width:100%;padding:12px 14px;border-radius:11px;border:1.5px solid rgba(var(--ink-rgb),.14);background:var(--surface);font-family:var(--fs);font-size:.95rem;color:var(--ink);outline:none;box-sizing:border-box;}
textarea{resize:vertical;}
input:focus,textarea:focus,select:focus{border-color:var(--coral);}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:46px;}
.pw-toggle{position:absolute;top:0;right:0;height:100%;width:44px;display:grid;place-items:center;background:none;border:none;padding:0;cursor:pointer;color:var(--ink2);}
.pw-toggle:hover{color:var(--coral);}
.pw-toggle svg{width:20px;height:20px;}
button.primary{margin-top:4px;padding:13px;border:none;border-radius:12px;background:var(--coral);color:#fff;font-family:var(--fd);font-weight:700;font-size:.98rem;cursor:pointer;
  box-shadow:var(--shadow-jade);transition:transform .16s var(--ease-out),box-shadow .2s var(--ease-out),filter .2s;}
button.primary:hover{filter:brightness(1.04);transform:translateY(-1px);}
button.primary:active{transform:scale(.97);}
button.primary[disabled]{opacity:.6;cursor:default;}
.err{color:var(--red);font-size:.82rem;min-height:1em;text-align:center;}

/* dashboard */
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:rgba(250,248,239,.85);
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid rgba(var(--ink-rgb),.08);position:sticky;top:0;z-index:10;}
.who{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--ink2);}
.who button{border:1.5px solid rgba(var(--ink-rgb),.14);background:var(--card);color:var(--ink);font-family:var(--fs);font-size:.82rem;
  padding:7px 14px;border-radius:99px;cursor:pointer;}
.wrap{max-width:920px;margin:0 auto;padding:28px;}
.add h2{margin:0 0 12px;font-size:1.3rem;}
.bk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.bk-head h2{margin:0;}
.bk-head .primary{width:auto;margin:0;padding:10px 16px;border-radius:11px;font-family:var(--fs);font-weight:700;font-size:.88rem;cursor:pointer;}
.bk-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.bk-filters select{flex:1;min-width:110px;}
.cls-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px;margin-bottom:14px;}
.cls-stat{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:12px 8px;text-align:center;}
.cls-stat b{display:block;font-size:1.5rem;font-weight:800;color:var(--ink);line-height:1.1;}
.cls-stat b small{font-size:.85rem;color:var(--muted);font-weight:600;}
.cls-stat span{font-size:.7rem;color:var(--muted);}
.cls-stat.warn b{color:#c0392b;}
.cls-att{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.cls-chip{font-size:.76rem;background:rgba(192,57,43,.08);color:#c0392b;border-radius:999px;padding:4px 10px;}
.add form{flex-direction:row;gap:10px;max-width:520px;}
.add input{flex:1;}
.add form button{width:auto;padding:12px 22px;margin:0;}
.list{margin-top:22px;}
.empty{padding:40px;text-align:center;color:var(--muted);background:var(--card);border-radius:16px;box-shadow:var(--shadow);}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);}
th,td{text-align:left;padding:13px 16px;font-size:.88rem;}
thead th{background:var(--surface);color:var(--ink2);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;}
tbody tr{border-top:1px solid rgba(var(--ink-rgb),.06);}
tbody td b{font-weight:700;}
td .dn{display:block;color:var(--muted);font-size:.76rem;font-weight:400;}
.rm{border:none;background:none;color:var(--muted);cursor:pointer;font-size:.9rem;padding:4px 8px;border-radius:8px;}
.rm:hover{background:rgba(var(--ink-rgb),.06);color:var(--red);}
.acts{display:flex;gap:6px;align-items:center;justify-content:flex-end;white-space:nowrap;}
.act{border:1.5px solid var(--coral);background:var(--coral);color:#fff;font-family:var(--fs);font-weight:600;font-size:.78rem;padding:6px 12px;border-radius:99px;cursor:pointer;
  transition:transform .16s var(--ease-out);}
.act:active{transform:scale(.95);}
.act.ghost{background:var(--card);color:var(--coral-d);border-color:rgba(var(--ink-rgb),.14);}
.lvlsel{padding:5px 8px;border-radius:8px;border:1.5px solid rgba(var(--ink-rgb),.14);background:var(--surface);font-family:var(--fs);font-size:.84rem;color:var(--ink);cursor:pointer;min-width:82px;}
/* Dates read as one token; wrapping "2026-07-25" across lines is unreadable. */
td[data-label="Terakhir"]{white-space:nowrap;}

/* modal */
.modal-ov{position:fixed;inset:0;z-index:100;background:rgba(var(--ink-rgb),.5);display:flex;align-items:center;justify-content:center;padding:20px;}
.modal{background:var(--card);border-radius:18px;padding:24px;max-width:440px;width:100%;box-shadow:0 24px 60px rgba(var(--ink-rgb),.3);max-height:88vh;overflow-y:auto;}
.modal h3{margin:0 0 14px;font-size:1.2rem;}
.modal .fl{display:block;font-size:.76rem;font-weight:700;color:var(--ink2);margin:12px 0 5px;}
.modal select{width:100%;padding:11px 13px;border-radius:11px;border:1.5px solid rgba(var(--ink-rgb),.14);background:var(--surface);font-family:var(--fs);font-size:.92rem;color:var(--ink);}
.chaps{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:200px;overflow-y:auto;padding:4px;border:1.5px solid rgba(var(--ink-rgb),.1);border-radius:11px;}
.chk{display:flex;align-items:center;gap:7px;font-size:.85rem;padding:6px 8px;border-radius:8px;cursor:pointer;}
/* The global input{width:100%} rule stretches checkboxes across the row and
   scatters the label text — pin them to their natural size. */
.chk input{width:auto;flex:none;margin:0;}
.chk:hover{background:var(--surface);}
.chk span{color:var(--muted);font-size:.74rem;}
.mrow{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}
.mrow .primary,.mrow .ghost{width:auto;padding:11px 20px;margin:0;border-radius:11px;font-family:var(--fs);font-weight:700;font-size:.9rem;cursor:pointer;}
.ghost{background:var(--surface);color:var(--ink);border:1.5px solid rgba(var(--ink-rgb),.14);}
.alist{display:flex;flex-direction:column;gap:8px;}
.arow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1.5px solid rgba(var(--ink-rgb),.1);border-radius:12px;}
.arow .dn{display:block;color:var(--muted);font-size:.76rem;font-weight:400;margin-top:2px;}
.badge{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px;background:rgba(var(--ink-rgb),.08);color:var(--ink2);}
.badge.done{background:rgba(43,178,76,.15);color:#2BB24C;}

/* Phase-3 dashboard tab nav */
.tnav{display:flex;gap:8px;padding:14px 28px 0;max-width:1100px;margin:0 auto;width:100%;box-sizing:border-box;}
.tnav button{border:none;background:var(--surface);color:var(--ink2);font-family:var(--fd);font-weight:600;font-size:.9rem;padding:9px 18px;border-radius:99px;cursor:pointer;
  transition:transform .16s var(--ease-out),background .2s,color .2s;}
.tnav button:hover{background:#DFF1E4;color:var(--coral-d);}
.tnav button:active{transform:scale(.96);}
.tnav button.on{background:var(--coral);color:#fff;box-shadow:var(--shadow-jade);}

/* Phase-3 results / grading */
.rscore{background:var(--surface);border-radius:11px;padding:11px 14px;font-size:.92rem;margin-bottom:10px;}
.rrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid rgba(var(--ink-rgb),.08);}
.rrow .dn{display:block;font-size:.78rem;color:var(--ink2);margin-top:2px;}
.rgrade{display:flex;gap:6px;flex:none;}

/* Phase-3 bank library: Level → Chapter → templates */
.bk-chap{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;margin-bottom:10px;}
.bk-chap-h{font-weight:800;font-size:.95rem;margin-bottom:9px;}
.bk-tpls{display:flex;flex-wrap:wrap;gap:8px;}
.bk-tpl{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1.5px solid rgba(var(--ink-rgb),.12);background:var(--surface);border-radius:11px;padding:8px 13px;cursor:pointer;font-family:var(--fs);min-width:78px;}
.bk-tpl b{font-size:.86rem;color:var(--ink);}
.bk-tpl span{font-size:.7rem;color:var(--muted);}
.bk-tpl.exam{border-color:var(--coral);background:linear-gradient(180deg,#E7F4EB,var(--card));}
.bk-tpl.exam b{color:var(--coral-d);}
.bk-tpl:hover{border-color:var(--coral);}
.tpq-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid rgba(var(--ink-rgb),.07);}
.tpq-row .dn{display:block;color:var(--muted);font-size:.76rem;margin-top:2px;}
.tpq-acts{display:flex;gap:2px;flex:none;}

/* Phase-3 send preview */
.bk-preview-h{font-size:.78rem;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em;margin:4px 2px 8px;}
.bk-send-preview{background:var(--surface);border-radius:11px;padding:11px 14px;font-size:.86rem;margin-bottom:6px;}

/* ---- Curriculum reference view ---- */
.cur { max-width: 880px; }
.cur-head h2 { margin: 0 0 4px; }
.cur-head p { color: #5a6b62; margin: 0 0 18px; font-size: .92rem; }
.cur-sec { margin: 0 0 26px; }
.cur-sec h3 { font-size: 1.05rem; margin: 0 0 10px; border-bottom: 2px solid #e3ece7; padding-bottom: 6px; }
.cur-sec h4 { font-size: .9rem; margin: 0 0 6px; color: #2b3a33; }
.cur-metrics { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.cur-metrics > div { background: #f3f8f5; border-radius: 10px; padding: 10px 16px; text-align: center; }
.cur-metrics b { display: block; font-size: 1.4rem; color: #159447; }
.cur-metrics span { font-size: .72rem; color: #5a6b62; }
.cur-note { font-size: .85rem; color: #5a6b62; line-height: 1.5; }
.cur-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cur-tbl th, .cur-tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eef3f0; }
.cur-tbl th { color: #5a6b62; font-weight: 600; }
.cur-w { text-align: right; font-weight: 700; color: #159447; }
.cur-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cur-chips, .cur-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.cur-chip { background: #eef6f1; border-radius: 99px; padding: 6px 13px; font-size: .82rem; }
.cur-ch { background: #f7faf8; border: 1px solid #e7efea; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.cur-ch summary { font-weight: 700; cursor: pointer; }
.cur-cando { margin: 8px 0; font-size: .82rem; color: #3a4a42; display: flex; flex-direction: column; gap: 3px; }
.cur-lessons { margin: 8px 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.cur-lessons li b { font-size: .88rem; }
.cur-lessons li span { display: block; font-size: .78rem; color: #5a6b62; }
.cur-keys { flex-direction: column; }
.cur-key { background: #f7faf8; border: 1px solid #e7efea; border-radius: 10px; padding: 8px 12px; }
.cur-key > b { font-size: .9rem; }
.cur-x { color: #c0392b; font-size: .82rem; }
.cur-ok { color: #159447; font-size: .82rem; }

.msub { font-size: .92rem; margin: 16px 0 8px; color: #2b3a33; }

/* ---- Jade Class join requests ---- */
.reqdot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: #c0392b; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; }
.reqrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid rgba(21, 148, 71, .14); border-radius: 14px; background: #fff; margin-bottom: 10px; }
.reqrow .dn { display: block; font-size: .8rem; color: #6b7c73; margin-top: 2px; }
.reqrow .acts { display: flex; gap: 8px; flex-shrink: 0; }
.prem { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, #159447, #0f7a39); color: #fff; font-size: .72rem; font-weight: 700; vertical-align: middle; }
.dn-inline { color: var(--muted); font-size: .76rem; font-weight: 400; }

/* ---- Beranda (home) ------------------------------------------------------
   The landing view answers "what needs my attention?" — cards are full
   buttons with generous tap targets, because tutors run this from a phone
   between classes.                                                          */
.home-hero { margin-bottom: 18px; }
.home-hero h2 { margin: 0 0 4px; font-size: 1.45rem; letter-spacing: -.01em; }
.home-hero .muted { margin: 0; font-size: .88rem; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 16px; }
.home-card { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--card); border: 1.5px solid rgba(var(--ink-rgb), .1); border-radius: 16px;
  padding: 15px 16px; cursor: pointer; font-family: var(--fs); box-shadow: var(--shadow); }
.home-card { transition: transform .2s var(--ease-out), border-color .2s, box-shadow .2s var(--ease-out); }
.home-card:hover { border-color: var(--coral); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.home-card:active { transform: scale(.985); }
.home-card .hc-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface); color: var(--coral-d); }
.home-card .hc-ico svg { width: 20px; height: 20px; }
.home-card.urgent .hc-ico { background: rgba(192, 57, 43, .08); color: #c0392b; }
.home-card .hc-tx { flex: 1; font-size: .92rem; color: var(--ink); line-height: 1.35; }
.home-card .hc-tx b { font-size: 1.15rem; font-weight: 800; margin-right: 2px; }
.home-card .hc-cta { flex: none; font-size: .78rem; font-weight: 700; color: var(--coral-d); white-space: nowrap; }
.home-card.urgent { border-color: rgba(192, 57, 43, .35); background: linear-gradient(180deg, #FFF6F4, var(--card)); }
.home-card.urgent .hc-tx b { color: #c0392b; }
.home-clear { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; font-size: .92rem; margin-bottom: 16px; }
.home-clear .hc-check { display: inline-flex; color: var(--coral-d); }
.home-clear .hc-check svg { width: 20px; height: 20px; }
.home-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.home-quick button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--coral); color: #fff; font-family: var(--fs); font-weight: 700;
  font-size: .86rem; padding: 11px 16px; border-radius: 99px; cursor: pointer; }
.home-quick button svg { width: 15px; height: 15px; flex: none; }
.home-quick button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.home-quick button { transition: transform .16s var(--ease-out), filter .2s; }
.home-quick button:active { transform: scale(.96); }
.home-quick #hqNote, .home-quick #hqBank { background: var(--card); color: var(--coral-d); border: 1.5px solid rgba(var(--ink-rgb), .14); }
.home-h { font-size: .8rem; font-weight: 800; color: var(--ink2); text-transform: uppercase; letter-spacing: .05em; margin: 20px 0 8px; }
.home-list { display: flex; flex-direction: column; gap: 8px; }
.home-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card); border-radius: 13px; box-shadow: var(--shadow); padding: 12px 14px; font-size: .9rem; }
.home-row .dn { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.home-row.muted { box-shadow: none; background: var(--surface); font-size: .84rem; }

/* ---- Jadwal (calendar) ---- */
.cal-card { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 14px 10px; margin-bottom: 16px; }
.cal-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-title { font-size: 1.02rem; font-weight: 800; text-transform: capitalize; min-width: 128px; text-align: center; }
.cal-navbtn { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid rgba(var(--ink-rgb), .12); background: var(--card);
  color: var(--ink); font-size: 1.1rem; font-weight: 700; cursor: pointer; line-height: 1; }
.cal-navbtn:hover { border-color: var(--coral); color: var(--coral-d); }
.cal-today { margin-left: auto; border: none; background: var(--surface); color: var(--coral-d); font-family: var(--fs);
  font-weight: 700; font-size: .78rem; padding: 8px 14px; border-radius: 99px; cursor: pointer; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: .68rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 4px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 74px; padding: 5px 5px 4px;
  border: 1.5px solid transparent; border-radius: 10px; background: var(--surface); cursor: pointer; font-family: var(--fs); text-align: left; }
.cal-cell:hover { border-color: rgba(var(--ink-rgb), .18); }
.cal-cell.out { background: transparent; }
.cal-cell.out .cal-d { color: var(--muted); opacity: .55; }
.cal-cell.today .cal-d { background: var(--coral); color: #fff; }
.cal-cell.sel { border-color: var(--coral); background: #EDFAF0; }
.cal-d { align-self: flex-start; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 8px;
  font-size: .78rem; font-weight: 800; color: var(--ink); padding: 0 4px; }
.cal-chips { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-chip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; font-weight: 700;
  padding: 2px 5px; border-radius: 6px; background: rgba(21, 162, 74, .14); color: var(--coral-d); }
.cal-chip.k-exam { background: rgba(192, 57, 43, .12); color: #c0392b; }
.cal-chip.k-holiday, .cal-chip.k-other { background: rgba(var(--ink-rgb), .08); color: var(--ink2); }
.cal-more { font-size: .64rem; font-weight: 800; color: var(--muted); padding-left: 2px; }
.cal-dots { display: none; gap: 3px; padding-left: 2px; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); display: inline-block; }
.cal-dot.k-exam { background: #c0392b; }
.cal-dot.k-holiday, .cal-dot.k-other { background: var(--muted); }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding: 8px 2px 2px; border-top: 1px solid rgba(var(--ink-rgb), .07); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--ink2); }
.cal-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-panel-h .home-h { margin: 14px 0 8px; }

.sched-head-acts { display: flex; gap: 8px; align-items: center; }
.sched-head-acts .primary { width: auto; margin: 0; padding: 10px 16px; border-radius: 11px; font-size: .88rem; }
.sched-sub { margin: -6px 0 14px; font-size: .88rem; }
.sched-kind { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 99px; margin-left: 6px; background: var(--surface); color: var(--coral-d); vertical-align: 1px; }
.sched-kind.exam { background: rgba(192, 57, 43, .1); color: #c0392b; }
.sched-kind.holiday { background: rgba(var(--ink-rgb), .07); color: var(--ink2); }
.sched-kind.other { background: rgba(var(--ink-rgb), .07); color: var(--ink2); }
.sched-dt { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.ics-row { display: flex; gap: 8px; }
.ics-row input { flex: 1; font-size: .8rem; }
.ics-help { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: .84rem; line-height: 1.5; }
.ics-help b { margin-top: 8px; }
.ics-help span { color: var(--ink2); }
.ics-help a { color: var(--coral-d); font-weight: 700; }

/* Live "this creates N homework tasks" preview in the assign modal. */
.grp-hint { margin-top: 6px; font-size: .78rem; line-height: 1.45; color: var(--ink2); }
.grp-hint.warn { color: #c0392b; font-weight: 600; }

/* Shared multi-student picker (assign + template send modals). */
.sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sp-head .fl { margin-bottom: 5px; }
.sp-all { border: none; background: none; color: var(--coral-d); font-family: var(--fs); font-weight: 700; font-size: .78rem; cursor: pointer; padding: 2px 4px; }
.sp-all:hover { text-decoration: underline; }
.sp-list { max-height: 150px; }

/* ---- Responsive ----------------------------------------------------------
   The portal was desktop-only: no media queries at all, and the roster is an
   8-column table. Tutors work from a phone between classes, so below 760px the
   table becomes one card per student (each cell labelled from its data-label)
   and the chrome tightens up. Nothing is hidden — a teacher on a phone gets the
   same information and the same actions.                                     */
@media (max-width: 760px) {
  .top { padding: 12px 16px; }
  .brand { font-size: .98rem; }
  .who { font-size: .82rem; gap: 8px; }
  .wrap { padding: 16px; }
  .tnav { padding: 12px 16px 0; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tnav::-webkit-scrollbar { display: none; }
  .tnav button { flex: 0 0 auto; padding: 9px 14px; font-size: .84rem; }

  .add form { flex-direction: column; }
  .add form button { width: 100%; }
  .cls-sum { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
  .cls-stat b { font-size: 1.25rem; }

  /* Roster table → stacked cards. */
  table { background: none; box-shadow: none; border-radius: 0; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  tbody tr { display: block; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 10px; border-top: none; }
  tbody td { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 6px 0; font-size: .88rem; }
  /* margin-right:auto pushes the label left and keeps the value parts (e.g.
     "1/3" + "· 1 proses") grouped together on the right instead of spreading. */
  tbody td::before { content: attr(data-label); margin-right: auto; color: var(--muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  tbody td.c-name { display: block; padding: 0 0 8px; border-bottom: 1px solid rgba(var(--ink-rgb), .07); margin-bottom: 4px; font-size: 1rem; }
  tbody td.c-name::before { content: none; }
  tbody td.acts { justify-content: flex-start; flex-wrap: wrap; white-space: normal; padding-top: 12px; }
  tbody td.acts::before { content: none; }
  .act { padding: 9px 14px; font-size: .82rem; }
  .rm { padding: 8px 10px; }
  /* Keep the destructive remove control off on its own edge, so a wrapped row
     doesn't read as a stray button under the primary actions. */
  tbody td.acts .rm { margin-left: auto; }
  .lvlsel { font-size: .88rem; padding: 7px 10px; }

  .reqrow { flex-direction: column; align-items: stretch; gap: 10px; }
  .reqrow .acts { justify-content: flex-start; }

  /* Month grid on a phone: compact cells, chips become dots, detail lives in
     the day panel below. */
  .cal-card { padding: 10px 8px 8px; }
  .cal-cell { min-height: 44px; padding: 3px; align-items: center; }
  .cal-d { align-self: center; }
  .cal-chips { display: none; }
  .cal-dots { display: flex; justify-content: center; }
  .cal-title { min-width: 0; flex: 1; }
  .cal-today { margin-left: 0; }
  .sched-head-acts { flex-wrap: wrap; }

  .home-hero h2 { font-size: 1.25rem; }
  .home-cards { grid-template-columns: 1fr; }
  .home-quick { gap: 6px; }
  .home-quick button { flex: 1 1 auto; padding: 12px 10px; font-size: .84rem; }

  .modal-ov { padding: 0; align-items: flex-end; }
  .modal { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
  .mrow { flex-direction: column-reverse; }
  .mrow .primary, .mrow .ghost { width: 100%; padding: 13px 20px; }
  .chaps { grid-template-columns: 1fr; max-height: 46vh; }
  .bk-filters select { min-width: 0; }

  .cur-2col { grid-template-columns: 1fr; }
  .cur-metrics > div { flex: 1 1 40%; }
  .cur-tbl { font-size: .78rem; }
  .cur-tbl th, .cur-tbl td { padding: 6px 4px; }
}

@media (max-width: 380px) {
  .cls-sum { grid-template-columns: repeat(2, 1fr); }
  /* Keep action pills at their natural width — stretching the last one on a
     wrapped row reads as a different, more important button than it is. */
  .act { padding: 9px 12px; font-size: .8rem; }
  .wrap { padding: 12px; }
  tbody tr { padding: 12px; }
}

/* Respect the OS reduced-motion setting for the toast and any hover polish. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}