/* LIGHT theme (default) — green + white */
:root, :root[data-theme="light"]{
  --bg-1:#ffffff; --bg-2:#eaf4e4; --ink:#15291d; --ink-dim:#4a5f52; --ink-faint:#7a9085;
  --accent:#1f9d55; --accent-2:#6fd424; --line:rgba(20,40,28,.14); --card:#ffffff;
  --field-bg:#f3f8f1; --topbar-bg:rgba(255,255,255,.9); --btn-ink:#04200f;
  --grad:linear-gradient(100deg,var(--accent),var(--accent-2));
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* DARK theme */
:root[data-theme="dark"]{
  --bg-1:#0b1220; --bg-2:#0f1b2e; --ink:#e8eef7; --ink-dim:#9fb2c7; --ink-faint:#65788f;
  --accent:#19c06a; --accent-2:#6fd424; --line:rgba(159,178,199,.16); --card:rgba(255,255,255,.04);
  --field-bg:rgba(255,255,255,.05); --topbar-bg:rgba(11,18,32,.85); --btn-ink:#04200f;
  --grad:linear-gradient(100deg,var(--accent),var(--accent-2));
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);min-height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(160deg,var(--bg-1),var(--bg-2));background-attachment:fixed;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}

/* bilingual spans — default English; toggled by html[data-lang] */
.id{display:none}
:root[data-lang="id"] .id{display:inline}
:root[data-lang="id"] .en{display:none}

/* theme + language toggle buttons in the nav */
.tgl{background:var(--card);border:1px solid var(--line);color:var(--ink-dim);font:inherit;font-weight:700;
  font-size:12.5px;cursor:pointer;padding:5px 10px;border-radius:8px;line-height:1}
.tgl:hover{color:var(--ink);border-color:var(--accent)}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--topbar-bg);backdrop-filter:blur(6px);z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand-logo{height:22px;filter:drop-shadow(0 0 1px rgba(255,255,255,.9))}
.topnav{display:flex;align-items:center;gap:18px;font-weight:600;font-size:14px}
.topnav a{color:var(--ink-dim);text-decoration:none}
.topnav a:hover{color:var(--ink)}
.who{color:var(--ink-faint);font-weight:500}
.inline{display:inline}
.linkish{background:none;border:none;color:var(--ink-dim);font:inherit;font-weight:600;cursor:pointer;padding:0}
.linkish:hover{color:var(--ink)}

.wrap{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:38px 28px}
.foot{padding:22px 28px;color:var(--ink-faint);font-size:13px;text-align:center;border-top:1px solid var(--line)}

/* profile */
.profile{display:grid;grid-template-columns:280px 1fr;gap:38px;align-items:start;margin-bottom:46px}
.avatar img{width:280px;height:340px;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:0 18px 50px -24px rgba(0,0,0,.7)}
.profile-body h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;margin-bottom:8px}
.roles{color:var(--ink-dim);font-weight:600;margin-bottom:12px}
.roles a{text-decoration:none}
.tagline{font-size:16px;margin-bottom:12px}
.bio{color:var(--ink-dim);line-height:1.6;max-width:64ch;margin-bottom:16px;white-space:pre-line}
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{font-size:13px;font-weight:600;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:7px 12px;background:var(--card)}
.links a:hover{border-color:var(--accent)}

/* sections */
.section{margin-bottom:40px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.section h1,.section h2{letter-spacing:-.01em}
.section h2{font-size:22px}
.more{font-size:13px;font-weight:600;text-decoration:none}
.muted{color:var(--ink-faint)}

/* presentation cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.pcard{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:14px;
  padding:18px;background:var(--card);transition:.16s;position:relative;overflow:hidden}
.pcard::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);opacity:.85}
.pcard:hover{transform:translateY(-3px);border-color:var(--accent)}
.pcard-top{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.pcard h3{font-size:16px;line-height:1.25;margin-bottom:6px}
.pcard p{font-size:13px;color:var(--ink-dim);line-height:1.45}
.pcard-event{margin-top:10px;font-size:11.5px;color:var(--ink-faint)}
.fmt{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;
  background:rgba(0,180,216,.16);color:var(--accent);border:1px solid rgba(0,180,216,.3)}
.fmt-pdf{background:rgba(244,162,97,.16);color:#f4a261;border-color:rgba(244,162,97,.3)}
.fmt-latex{background:rgba(111,212,36,.16);color:var(--accent-2);border-color:rgba(111,212,36,.3)}
.badge{font-size:10.5px;font-weight:600;color:var(--ink-faint);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.badge.lock{color:#f4a261;border-color:rgba(244,162,97,.3)}

/* forms */
.auth{max-width:380px;margin:30px auto}
.form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-dim)}
.form input,.form select,.form textarea{font:inherit;color:var(--ink);background:var(--field-bg);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.btn{font-weight:700;color:#022;background:var(--grad);border:none;border-radius:10px;padding:11px 18px;cursor:pointer;width:max-content}
.btn:hover{filter:brightness(1.06)}
.error{color:#ff8a8a;font-size:14px}
.upload{max-width:640px}

/* table */
.tbl{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl th{color:var(--ink-faint);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.tbl a{text-decoration:none}

@media (max-width:680px){
  .profile{grid-template-columns:1fr;gap:18px}
  .avatar img{width:220px;height:268px}
}

/* publish status */
.status{font-size:11px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:6px}
.status.pub{background:rgba(111,212,36,.16);color:var(--accent-2);border:1px solid rgba(111,212,36,.3)}
.status.priv{background:rgba(244,162,97,.16);color:#f4a261;border:1px solid rgba(244,162,97,.3)}

/* explicit contact block */
.contact{margin-top:18px}
.contact h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:8px}
.contact ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.contact li{font-size:14px;color:var(--ink-dim);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.contact .ctx{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);min-width:104px;display:inline-block}
.contact a{color:var(--accent);text-decoration:none}
.contact a:hover{text-decoration:underline}

/* websites + papers sections */
.fmt-web{background:rgba(79,157,255,.16);color:#7db4ff;border-color:rgba(79,157,255,.3)}
.papers{list-style:none;display:flex;flex-direction:column;gap:16px}
.paper a{font-weight:600;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.35}
.paper a:hover{color:var(--accent)}
.paper .pmeta{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--ink-faint);margin-left:8px;white-space:nowrap}
.paper p{font-size:13px;color:var(--ink-dim);margin-top:5px}

/* admin extras */
hr.sep{border:none;border-top:1px solid var(--line);margin:30px 0}
.linkish.danger{color:#ff8a8a}
.linkish.danger:hover{color:#ff5a5a}

/* share link */
.share-on{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.share-url{font-size:11px;width:240px;max-width:46vw;padding:5px 8px;background:var(--field-bg);border:1px solid var(--line);border-radius:7px;color:var(--ink-dim)}

/* research admin: share-link rows */
.rrow{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--field-bg);margin-bottom:10px}
.rrow-head{display:flex;align-items:center;gap:8px;font-size:13px}
.rrow-url{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rrow-url .share-url{flex:1 1 260px;max-width:none}
.rrow-meta{font-size:11.5px}
.rrow-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px}
.rrow-actions .inline{display:inline-flex}
.badge.ok{color:#6fd424;border-color:rgba(111,212,36,.35)}
.badge.hold{color:#f4a261;border-color:rgba(244,162,97,.35)}
.btn-sm{font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:5px 12px;border-radius:7px;border:1px solid var(--line);background:var(--field-bg);color:var(--ink)}
.btn-sm:hover{border-color:var(--ink-dim);color:var(--ink)}
.btn-sm.danger{color:#ff8a8a;border-color:rgba(255,138,138,.3)}
.btn-sm.danger:hover{color:#ff5a5a;border-color:rgba(255,90,90,.5)}
.btn-sm.primary{background:var(--accent);border-color:transparent;color:#fff}
.btn-sm.primary:hover{filter:brightness(1.08);color:#fff}

/* research admin: web card + create-link form + account-access grid */
.rweb{margin-bottom:18px}
.rweb-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rweb-head h3{margin:0}
.rweb-path{font-size:12px;color:var(--ink-faint);background:var(--field-bg);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.rweb-head-actions{display:flex;align-items:center;gap:10px}
.badge.gated{color:#f4a261;border-color:rgba(244,162,97,.35)}
.badge.public{color:#6fd424;border-color:rgba(111,212,36,.35)}
.rform{display:flex;flex-direction:column;gap:14px;max-width:680px;margin:6px 0 4px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld>span{font-size:11px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em}
.fld input,.fld select{padding:7px 10px;background:var(--field-bg);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;font-size:13px}
.rform-foot{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.rform-foot .fld{min-width:150px}
.ck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px 14px}
.grow{display:flex;flex-direction:column;gap:9px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--field-bg);margin-bottom:9px}
.grow-id{font-size:13px}

/* share UI extras */
.share-enable{display:flex;gap:6px;align-items:center}
.share-enable select{font-size:11px;padding:4px 6px;background:var(--field-bg);border:1px solid var(--line);border-radius:7px;color:var(--ink)}
.share-on{flex-wrap:wrap}
.share-on .exp{font-size:10.5px;color:var(--ink-faint);white-space:nowrap}

/* education list — one degree per line (a single run-on line is hard to scan) */
.edu{color:var(--ink-dim);font-size:14px;margin:0 0 12px;padding:0;list-style:none}
.edu li{position:relative;padding-left:22px;margin-bottom:4px;line-height:1.5}
.edu li::before{content:"🎓";position:absolute;left:0;top:0;font-size:12px;opacity:.8}
.edu li:last-child{margin-bottom:0}
.edu a{color:var(--ink);text-decoration:none;font-weight:600}
.edu a:hover{color:var(--accent)}

/* github pages sync bar */
.syncbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0 26px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.syncbar .muted{font-size:13px}

/* presentation date */
.pcard-date{margin-top:8px;font-size:11px;color:var(--ink-faint);font-weight:600}
.pcard-date.added{font-weight:400;font-style:italic}

/* profile photo gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:6px}
.gal-item{margin:0;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:0 14px 34px -18px rgba(0,0,0,.6)}
.gal-item img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .3s ease}
.gal-item:hover img{transform:scale(1.04)}
.gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:12.5px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.75))}
.gal-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:6px}
.gal-admin{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.gal-admin img{width:100%;height:110px;object-fit:cover;display:block}
.gal-admin span{font-size:11.5px;color:var(--ink-faint);padding:6px 8px 0}
.gal-admin form{padding:6px 8px 8px}
.linkish.danger{color:#ff6b6b;background:none;border:none;cursor:pointer;font-size:12px;padding:0}

/* profiles (professional / academic) */
.prof-switch{display:inline-flex;gap:6px;margin-bottom:14px;border:1px solid var(--line);border-radius:10px;padding:4px;background:var(--card)}
.prof-switch .tab{font-size:13px;font-weight:700;text-decoration:none;color:var(--ink-dim);padding:6px 14px;border-radius:7px}
.prof-switch .tab.on{background:var(--grad);color:var(--btn-ink)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.skills{display:grid;gap:0}
.skill{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.skill-cat{font-weight:700;color:var(--ink);font-size:14px}
.skill-items{color:var(--ink-dim);font-size:14px;line-height:1.5}
.cvlist{display:flex;flex-direction:column;gap:18px}
.job{border-left:3px solid var(--accent);padding:2px 0 2px 16px}
.job-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.job-head h4{font-size:16px}
.job-period{font-size:12px;color:var(--ink-faint);font-weight:600;white-space:nowrap}
.job-org{font-size:13px;color:var(--accent);font-weight:600;margin:2px 0 6px}
.job p{font-size:13.5px;color:var(--ink-dim);line-height:1.5}
@media(max-width:680px){.skill{grid-template-columns:1fr;gap:4px}}

/* admin tab/section nav + files manager */
.adm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 22px;position:sticky;top:53px;z-index:5;padding:8px 0;background:var(--bg-1)}
.adm-tabs a{font-size:13px;font-weight:700;text-decoration:none;color:var(--ink-dim);border:1px solid var(--line);border-radius:8px;padding:6px 12px;background:var(--card)}
.adm-tabs a:hover{color:var(--ink);border-color:var(--accent)}
.adm-help{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:10px 14px;margin:0 0 20px;font-size:12.5px;color:var(--ink-dim);line-height:1.6}
.adm-help b{color:var(--ink);font-weight:700}
.adm-tabs a.on{background:var(--grad);color:var(--btn-ink);border-color:transparent}
.adm-sub{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;font-size:12.5px}
.adm-sub a{color:var(--ink-dim);text-decoration:none;font-weight:600}
.adm-sub a:hover{color:var(--accent)}
.pv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 14px}
.pv-title{flex:1;min-width:140px;font-size:15px}
.pv-actions{display:flex;flex-wrap:wrap;gap:8px}
.btn.small{padding:6px 12px;font-size:13px}
.pv-stage{width:100%;height:78vh;background:#1b1f24;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.pv-stage:fullscreen{height:100vh;border-radius:0;border:0}
.pv-stage iframe{width:100%;height:100%;border:0;display:block}
.acl-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:13px;color:var(--ink-dim);margin:2px 0}
.acl-lbl{font-weight:700}
.ck{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:12.5px;color:var(--ink-dim)}
.acl-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fmeta{font-size:11px;color:var(--ink-faint);margin-top:2px}

/* search + publications + community */
.list-search{font:inherit;color:var(--ink);background:var(--field-bg);border:1px solid var(--line);border-radius:9px;padding:8px 12px;min-width:220px}
.list-search:focus{outline:none;border-color:var(--accent)}
.paper-t{font-weight:700;font-size:15.5px;line-height:1.35;color:var(--ink)}
.pmeta-line{font-size:12.5px;color:var(--ink-faint);margin:3px 0}
.pmeta-line .venue{font-weight:600}
.paper-links{font-size:13px;margin-top:6px}
.paper-links a{font-weight:600;text-decoration:none}
.abs{margin-top:6px}
.abs summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--accent)}
.abs p{font-size:13px;color:var(--ink-dim);line-height:1.5;margin-top:6px}
.docs{list-style:none;display:flex;flex-direction:column;gap:14px}
.doc{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--card)}
.doc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.doc-cat{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--field-bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.doc-t{font-weight:700;font-size:15.5px;line-height:1.35;color:var(--ink)}
.doc .dn{font-weight:700;color:var(--ink-dim)}
.doc-desc{font-size:13px;color:var(--ink-dim);line-height:1.5;margin-top:6px}
.doc-dl{font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
fieldset.acl{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:2px 0}
fieldset.acl legend{font-size:12px;font-weight:700;color:var(--ink-dim);padding:0 6px}
.cbx{display:inline-flex;align-items:center;gap:5px;margin-right:14px;font-size:13px}
/* LMS */
.lms-sec{margin:18px 0}
.lms-sec h2{font-size:16px;margin-bottom:8px}
.lms-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.lms-row{border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lms-row a{font-weight:700;text-decoration:none;color:var(--ink)}
.lms-row a:hover{color:var(--accent)}
.lms-row .mode{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint)}
.lms-row .win{flex-basis:100%;font-size:12px;color:var(--ink-faint)}
.badge.done{background:rgba(111,212,36,.18);border-color:var(--accent,#6fd424)}
.cl-box{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--card)}
/* An archived class stays readable but stops competing for attention with the running one. */
.cl-box.archived{opacity:.72;border-style:dashed}
.chip{display:inline-block;font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);background:var(--field-bg);color:var(--ink-faint);vertical-align:middle}
.chip.warn{border-color:#b4321c55;background:#b4321c14;color:#b4321c}
.sub-item,.sub-member{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
.sub-item input,.sub-member input{font:inherit;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--field-bg);color:var(--ink)}
.lms-sub{margin:10px 0}
.qq{border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0;background:var(--card)}
.qq-h{margin-bottom:8px}
.opt{display:block;margin:5px 0;cursor:pointer}
.essay,.quiz-form textarea{width:100%;font:inherit;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--field-bg);color:var(--ink)}
.opt-row{display:flex;gap:8px;align-items:center;margin:5px 0}
.opt-row input[type=text],.opt-row input:not([type]){flex:1}
.qresult{font-size:18px;margin:12px 0;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.grade-row{border-top:1px solid var(--line);padding:8px 0}
.essay-ans{white-space:pre-wrap;font-size:13px;color:var(--ink-dim);margin:4px 0}
.inline-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.quiz-timer{position:sticky;top:8px;z-index:5;display:inline-block;font-family:var(--mono,monospace);font-weight:700;font-size:18px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);margin:8px 0}
.quiz-timer.urgent{color:#fff;background:#c0392b;border-color:#c0392b}
.enroll-code{font-size:12px;color:var(--ink-dim);margin:0 6px}
.enroll-code b{font-family:var(--mono,monospace);letter-spacing:.05em}
.list-tools{display:inline-flex;gap:8px;align-items:center}
.sortbtn{white-space:nowrap}
/* admin dashboard tab panels */
.adm-sub{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.adm-tab{font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:9px;cursor:pointer;background:var(--card);border:1px solid var(--line);color:var(--ink-dim)}
.adm-tab:hover{border-color:var(--accent)}
.adm-tab.active{background:var(--accent,#6fd424);border-color:var(--accent,#6fd424);color:#04121d}
.adm-panel{display:none}
.adm-panel.active{display:block}
/* admin tab zones */
.adm-tabs{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.tab-group{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px 8px;border:1px solid var(--line);border-radius:10px}
.tg-label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-right:4px}
/* perkuliahan hub */
.course-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin:12px 0}
.course-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card)}
.cc-top{display:flex;align-items:center;gap:8px;font-size:16px}
.cc-meta{font-size:12.5px;color:var(--ink-faint);margin:4px 0}
.cc-stats{font-size:12.5px;color:var(--ink-dim);margin:8px 0}
.cc-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.restricted-note{border:1px solid var(--line);background:var(--field-bg);border-radius:10px;padding:12px 14px;margin:12px 0;font-size:13.5px;color:var(--ink-dim)}
.vis-pub{color:var(--accent,#6fd424);font-weight:700}
.vis-mem{color:var(--ink-faint);font-weight:700}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.cs-card{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--card);position:relative;overflow:hidden}
.cs-card::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);opacity:.85}
.cs-card h3{font-size:16px;line-height:1.3;margin-bottom:4px}
.cs-year{font-size:11.5px;color:var(--ink-faint);font-weight:600;margin-bottom:8px}
.cs-card p{font-size:13.5px;color:var(--ink-dim);line-height:1.5;margin-bottom:10px}
.reslist{list-style:none;display:flex;flex-direction:column;gap:6px;margin:8px 0}
.reslist a{text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600}
.reslist a:hover{color:var(--accent)}
.btn.small{font-size:12.5px;padding:7px 12px;text-decoration:none;display:inline-block}
.res-add{max-width:100%;border:1px dashed var(--line);border-radius:10px;padding:12px;margin-top:10px}
.cs-admin{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:16px;background:var(--card)}
.cs-admin-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}

/* teaching: meetings + version */
.meetings{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.meeting{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--card)}
.meeting-b{flex:1;min-width:0}
.meeting-b h3{font-size:15px;margin-bottom:6px}
.mbadge{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border-radius:9px;font-weight:800;font-size:13px;border:1px solid var(--line)}
.mb-reg{background:rgba(31,157,85,.12);color:var(--accent)}
.mb-uts{background:rgba(244,162,97,.16);color:#d2761f;font-size:11px}
.mb-uas{background:rgba(0,150,199,.14);color:#0a6e8c;font-size:11px}
.ver{font-family:var(--mono,monospace);font-size:10.5px;font-weight:700;color:var(--ink-faint);background:var(--field-bg);border:1px solid var(--line);border-radius:5px;padding:1px 6px}

/* blog editor (WYSIWYG) + post body */
.wz-label{font-size:13px;font-weight:700;color:var(--ink-dim);margin-top:6px}
.wz-tools{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.wz-tools button{font:inherit;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink-dim);background:var(--field-bg);border:1px solid var(--line);border-radius:7px;padding:5px 9px}
.wz-tools button:hover{color:var(--ink);border-color:var(--accent)}
.wz-editor{min-height:180px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--field-bg);color:var(--ink);line-height:1.6;overflow:auto}
.wz-editor:focus{outline:none;border-color:var(--accent)}
.wz-editor img,.post-body img{max-width:100%;border-radius:8px}
.wz-editor iframe,.post-body iframe{max-width:100%;aspect-ratio:16/9;width:100%;border:0;border-radius:10px}
.post{max-width:760px}
/* A post opened as one dense block: the h1 sat straight on the date, the date on the tags,
   and the first paragraph right under those. Give the title room and separate the meta line
   from the article proper — a reader should see where the heading ends. */
.post h1{font-size:clamp(26px,3.4vw,36px);line-height:1.25;margin:14px 0 12px}
.post .cs-year{margin-bottom:12px}
.post-body>h2:first-child,.post-body>p:first-child{margin-top:0}
/* When a post is about something you can install, the link to it should be findable
   without reading to the end — and should still look like part of the article. */
.post-body .dl{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:24px 0;
  padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;background:var(--card)}
.post-body .dl .dl-t{font-weight:700;color:var(--ink)}
.post-body .dl .dl-s{font-size:14px;color:var(--ink-dim);flex:1 1 220px}
.post-body .dl a{font-weight:700;color:#022;background:var(--grad);border-radius:10px;
  padding:10px 16px;text-decoration:none;white-space:nowrap}
.post-body .dl a:hover{filter:brightness(1.06)}
/* A drawn stand-in for a form the reader is about to fill in. It is NOT a screenshot and the
   caption says so — it exists so the choices that matter can be scanned in one look. */
.post-body .mock{border:1px solid var(--line);border-radius:12px;margin:20px 0;background:var(--card);overflow:hidden}
.post-body .mock .mh{padding:10px 16px;border-bottom:1px solid var(--line);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.post-body .mock .row{display:flex;gap:12px;align-items:baseline;padding:10px 16px;border-top:1px solid var(--line)}
.post-body .mock .row:first-of-type{border-top:0}
.post-body .mock .k{flex:1 1 auto}
.post-body .mock .v{font-size:14px;color:var(--ink-dim);text-align:right;white-space:nowrap}
.post-body .mock .pick{color:var(--accent);font-weight:700}
.post-body .mock .pick::before{content:"● ";}
.post-body .mock .off{color:var(--ink-faint)}
.post-body .mock .off::before{content:"○ ";}
.post-body .cap{font-size:13px;color:var(--ink-faint);margin:-12px 0 18px;font-style:italic}
/* Terminal transcripts. Real output, pasted — so it has to stay copyable text rather than
   become a picture of text, and it has to scroll on a phone instead of widening the page. */
.post-body pre{background:#0b1a14;color:#d7e6dd;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;overflow-x:auto;font-size:13.5px;line-height:1.6;margin:18px 0}
.post-body pre code{background:none;padding:0;color:inherit;font-size:inherit}
.post-body pre .c{color:#7fd39b;font-weight:700}
.post-body pre .o{color:#9fb2c7}
.post-body code{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 5px;font-size:.93em}
.post-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.post-body table td{border-top:1px solid var(--line);padding:9px 10px;vertical-align:top}
.post-body table td:first-child{white-space:nowrap;color:var(--ink)}
.post-body{line-height:1.75;color:var(--ink);font-size:16px;margin-top:26px}
.post-body h2{margin:20px 0 8px;font-size:22px}
.post-body p{margin:12px 0}
.post-body blockquote{border-left:3px solid var(--accent);padding-left:14px;color:var(--ink-dim);margin:14px 0}
.post-body ul{margin:12px 0 12px 22px}
.post-body a{color:var(--accent)}

/* meeting session photos */
.mphotos{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.mphotos img{width:160px;height:108px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.mphotos-admin{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.mp-thumb{position:relative}
.mp-thumb img{width:120px;height:80px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}
.mp-thumb form{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.5);border-radius:5px;padding:0 4px}
.mp-thumb .danger{color:#fff}

/* analytics */
.an-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:10px}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;margin:6px 0 20px;padding:12px 12px 6px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.bar>span{width:100%;max-width:26px;background:var(--grad);border-radius:4px 4px 0 0;min-height:2px}
.bar>em{font-size:9px;color:var(--ink-faint);font-style:normal;white-space:nowrap}

/* ---- tags, grant checkboxes, web-docs/websource extras ---- */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tag{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink-faint)}
.tag-penelitian{background:#e6f4ea;border-color:#bfe3c9;color:#1f7a3d}
.tag-pengabdian{background:#eaf0fb;border-color:#c6d6f5;color:#2b5bbd}
.tag-industri{background:#fdf0e6;border-color:#f3d6bd;color:#b56b1f}
[data-theme=dark] .tag-penelitian{background:#15301f;border-color:#1f5a34;color:#7fd6a0}
[data-theme=dark] .tag-pengabdian{background:#16223d;border-color:#27406f;color:#9bb6ef}
[data-theme=dark] .tag-industri{background:#33220f;border-color:#5a3c1c;color:#e3ad79}
.tagchips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.tagchip{font-size:13px;padding:4px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-faint);text-decoration:none}
.tagchip.on{background:var(--grad);color:#fff;border-color:transparent}
.fmt-doc{background:#eef;color:#446}
.ck-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0}
.ck-lbl{font-size:12px;font-weight:700;color:var(--ink-faint)}
.ck-row.grant{align-items:flex-start}
.grant-list{display:flex;flex-wrap:wrap;gap:8px;max-height:120px;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:8px}
.acl-cell{margin-top:6px}
.acl-cell .acl-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
textarea.md{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;width:100%;line-height:1.5}

/* CV/profile contact line (phone + email) */
.cv-contact{margin:6px 0 2px;font-size:14px;color:var(--ink-dim,#555)}
.cv-contact a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.cv-contact a:hover{color:var(--accent,#1f9d55)}

/* ---- 2-level categorized nav dropdowns ---- */
.nd{position:relative}
.nd>summary{list-style:none;cursor:pointer;color:var(--ink-dim);font-weight:600;display:inline-flex;align-items:center;gap:3px}
.nd>summary::-webkit-details-marker{display:none}
.nd>summary::after{content:"▾";font-size:10px;opacity:.55}
.nd>summary:hover,.nd[open]>summary{color:var(--ink)}
.nd-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:190px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:6px;display:flex;flex-direction:column;gap:1px;box-shadow:0 10px 28px -10px rgba(0,0,0,.45);z-index:30}
.nd-menu a{padding:8px 11px;border-radius:8px;white-space:nowrap;font-weight:600}
.nd-menu a:hover{background:var(--field-bg);color:var(--ink)}
@media (max-width:760px){.nd-menu{position:static;box-shadow:none;border:0;padding:4px 0 4px 12px;min-width:0}}
/* Marking sits beside the work it grades, so the row stays compact. */
.grade-row{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.grade-row .grow{flex:1 1 220px}
.grade-out{margin:10px 0;padding:10px 12px;border-radius:10px;background:var(--field-bg);border:1px solid var(--line)}
/* Per-class download switches: a short column of checkboxes, not a form grid. */
.dl-switches label.cb{flex-direction:row;align-items:center;gap:8px;font-weight:500}
.dl-switches input[type=checkbox]{width:auto;margin:0}
/* Import report: one badge per outcome, so a partial import reads at a glance. */
.imp-sum{margin:10px 0 4px;display:flex;flex-wrap:wrap;gap:8px}
.imp{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid var(--line)}
.imp.ok{background:rgba(111,212,36,.14);color:var(--accent-2);border-color:rgba(111,212,36,.3)}
.imp.warn{background:rgba(244,162,97,.16);color:#f4a261;border-color:rgba(244,162,97,.32)}
.imp.bad{background:rgba(180,50,28,.14);color:#b4321c;border-color:rgba(180,50,28,.32)}
/* A freshly minted API token: shown once, so make it easy to select. */
.tok{display:inline-block;padding:8px 10px;border-radius:8px;background:var(--field-bg);border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;word-break:break-all;user-select:all}
/* Class mark sheet: a wide table, letter chips, and a small distribution chart. */
.tblwrap{overflow-x:auto}
.grade{display:inline-block;min-width:30px;text-align:center;font-weight:700;font-size:12px;padding:2px 7px;border-radius:6px;
  background:var(--field-bg);border:1px solid var(--line)}
.grade.a{background:rgba(111,212,36,.16);color:var(--accent-2);border-color:rgba(111,212,36,.3)}
.grade.b{background:rgba(79,157,255,.14);color:#7db4ff;border-color:rgba(79,157,255,.3)}
.grade.c{background:rgba(244,162,97,.16);color:#f4a261;border-color:rgba(244,162,97,.32)}
.grade.d,.grade.e{background:rgba(180,50,28,.14);color:#b4321c;border-color:rgba(180,50,28,.32)}
.dist{display:flex;flex-direction:column;gap:5px;max-width:460px;margin:12px 0}
.distrow{display:flex;align-items:center;gap:10px;font-size:13px}
.distrow .dl{width:26px;font-weight:700;color:var(--ink-dim)}
.distrow .db{flex:1;height:12px;background:var(--field-bg);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.distrow .db i{display:block;height:100%;background:var(--grad)}
.distrow .dn{width:26px;text-align:right;color:var(--ink-faint)}
.wts{flex-direction:row;flex-wrap:wrap;gap:12px;align-items:end}
.wts label.wt{max-width:230px}

/* ---- LMS: quiz taking (one clickable box per option) ---- */
.quiz-help{font-size:14px;color:var(--ink-dim);background:var(--field-bg);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:10px 0 4px}
.quiz-form fieldset.qq{border:1px solid var(--line);border-radius:14px;padding:14px 16px 10px;margin:14px 0;background:var(--card)}
.quiz-form fieldset.qq.answered{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.qq-num{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink-faint);padding:0 6px;text-transform:uppercase}
.qq-prompt{font-size:16px;line-height:1.5;color:var(--ink);margin:2px 0 10px}
.qopts{display:flex;flex-direction:column;gap:8px}
.quiz-form label.qopt{display:flex;flex-direction:row;align-items:flex-start;gap:10px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--field-bg);font-size:15px;font-weight:400;color:var(--ink);cursor:pointer;line-height:1.45;transition:border-color .12s,background .12s}
.quiz-form label.qopt:hover{border-color:var(--accent)}
.quiz-form label.qopt input{margin:3px 0 0;flex:none;width:18px;height:18px;accent-color:var(--accent)}
.quiz-form label.qopt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--card));box-shadow:0 0 0 1px var(--accent) inset}
.qopt-key{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink-dim);background:var(--card)}
.quiz-form label.qopt:has(input:checked) .qopt-key{background:var(--accent);border-color:var(--accent);color:#fff}
.qopt-txt{flex:1;min-width:0}
.quiz-submit{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:12px 0;background:var(--topbar-bg);backdrop-filter:blur(6px);border-top:1px solid var(--line)}
.quiz-progress{font-size:14px;font-weight:600;color:var(--ink-dim)}

/* ---- LMS: admin quiz editor ---- */
.aq-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:14px 0;background:var(--card)}
.aq-card>summary{cursor:pointer}
.aq-card h2{margin-top:0}
.aq-sched{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}
.aq-sched label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--ink-dim)}
.aq-sched small{font-weight:400;color:var(--ink-faint);font-size:11px}
.aq-sched input{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--field-bg);color:var(--ink)}
.aq-sched-btns{grid-column:1/-1;display:flex;gap:14px;align-items:center}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink-dim);background:var(--field-bg)}
.pill.on{color:#fff;background:var(--accent);border-color:var(--accent)}
.pill.wait{color:#7a5300;background:#fff3cd;border-color:#f0d58c}
.pill.off{color:var(--ink-faint)}
.pill.draft{color:var(--ink-dim)}
.aq{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--card)}
.aq-head{display:flex;align-items:center;gap:8px;font-size:13px}
.aq-num{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:50%;background:var(--field-bg);border:1px solid var(--line);font-weight:700}
.aq-actions{margin-left:auto;display:flex;gap:12px;align-items:center}
.aq-prompt{font-weight:600;margin:8px 0 2px;color:var(--ink)}
.aq-prompt-en{font-size:13px;margin-bottom:6px}
.aq-opts{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:5px}
.aq-opt{display:flex;gap:10px;align-items:flex-start;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.aq-opt .muted{font-size:12px}
.aq-opt.correct{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.aq-badge{margin-left:auto;font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap}
.aq-edit{margin-top:8px}
.aq-edit>summary{cursor:pointer;font-size:13px;color:var(--accent)}
.qe-form textarea{width:100%}
.qe-pts input{max-width:90px}
.qe-opts{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.qe-opts>b{font-size:13px;color:var(--ink-dim)}
.qe-opt{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;align-items:center}
.form .qe-opt label.qe-key{flex-direction:row;align-items:center;gap:4px;font-weight:700;min-width:42px}
.qe-opt input[type=text],.qe-opt input:not([type]){padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--field-bg);color:var(--ink);font:inherit;min-width:0}
@media (max-width:640px){.qe-opt{grid-template-columns:auto 1fr}.qe-opt input[name^=opt_en]{grid-column:2}}

/* ---- LMS: assignment submission ---- */
.sub-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px}
.sub-meta .win{font-size:13px;color:var(--ink-dim)}
.sub-box{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card)}
.sub-help{font-size:13px}
#sub-items{display:flex;flex-direction:column;gap:12px;margin:10px 0}
.sub-item{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px;border:1px dashed var(--line);border-radius:12px;background:var(--field-bg)}
.sub-item>label:first-of-type{grid-column:1/-1}
.sub-item-n{position:absolute;top:-10px;left:12px;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink-faint)}
.sub-files{font-size:12px;font-weight:400}
.sub-types{font-size:12px;color:var(--ink-faint)}
.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)}
@media (max-width:640px){.sub-item{grid-template-columns:1fr}}

/* ---- course page: one block per meeting (materials · quiz · assignment) ---- */
.mb-parts{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px;margin-top:6px}
.mb-part{min-width:0}
.mb-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.mb-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.mb-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--field-bg);font-size:14px}
.mb-row>a{font-weight:600;text-decoration:none}
.mb-row>a:hover{text-decoration:underline}
.mb-row .mode{font-size:11px;color:var(--ink-faint);text-transform:uppercase}
.mb-win{flex-basis:100%;font-size:12px;color:var(--ink-faint)}
.mb-empty{font-size:12px;margin:0}
@media (max-width:860px){.mb-parts{grid-template-columns:1fr}}

.task-desc{font-size:15px;line-height:1.6;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 16px;margin:10px 0}
.task-desc p{margin:10px 0}

.mb-others{margin:18px 0;border:1px dashed var(--line);border-radius:12px;padding:10px 14px}
.mb-others>summary{cursor:pointer;font-weight:600;color:var(--ink-dim)}

/* ---- admin mode: managed meeting blocks ---- */
.admin-course h1{margin-bottom:6px}
.mb-desc{font-size:14px;color:var(--ink-dim);margin:2px 0 10px;line-height:1.5}
.am-block .meeting-b>h3{margin-bottom:2px}
.am-edit,.am-add{margin:6px 0}
.am-edit>summary,.am-add>summary{cursor:pointer;font-size:13px;color:var(--accent);font-weight:600}
.am-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.am-grid button{grid-column:1/-1;justify-self:start}
.am-add form{margin-top:6px}
.am-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--field-bg);font-size:13px;list-style:none}
.am-row>a{font-weight:600}
.am-act{flex-basis:100%;display:flex;gap:10px;align-items:center;font-size:12px}
@media (max-width:860px){.am-grid{grid-template-columns:1fr}}
.am-block .reslist .linkish{font-size:12px;font-weight:600}
/* name as ⟨Hendri | Karisma⟩ */
.ket{white-space:nowrap}
.ket .kb{font-weight:400;color:var(--accent);opacity:.9;font-family:"Cambria Math","STIX Two Math","Latin Modern Math",Georgia,serif}
.ket .kb:first-child{margin-right:.08em}
.ket .kb:last-child{margin-left:.08em}
.ket .kbar{margin:0 .22em}
/* roster + retake tables */
.table-wrap{overflow-x:auto}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.row-hl td{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.grp-card{margin-top:10px}
.grp-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;font-size:1.1em}
.grp-forms{display:flex;flex-wrap:wrap;gap:6px 18px}
/* ---- course statistics (lecturer) ---- */
.st-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0 6px}
.st-tile{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card)}
.st-tl{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}
.st-tv{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:2px}
.st-ts{font-size:12px;color:var(--ink-faint)}
.st-tbl td{vertical-align:top}
.st-tbl .st-d{font-size:12px;margin-top:2px}
.st-meter{min-width:120px}
.st-bar{height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink-faint) 18%,transparent);overflow:hidden}
.st-bar span{display:block;height:100%;border-radius:4px;background:var(--accent)}
.st-mv{font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-faint)}
.st-hist{display:flex;align-items:flex-end;gap:2px;height:28px;width:70px}
.st-hcol{flex:1;height:100%;display:flex;align-items:flex-end;cursor:default}
.st-hcol i{display:block;width:100%;border-radius:3px 3px 0 0;background:var(--accent)}
.st-hcol:hover i{outline:2px solid var(--ink)}
.st-dim td{opacity:.6}
.st-sep td{font-size:12px;color:var(--ink-faint);font-style:italic;background:color-mix(in srgb,var(--ink-faint) 6%,transparent)}
.st-hard{font-size:12px;margin-top:4px}.st-hard ol{margin:4px 0 0 18px;padding:0}
.st-q{font-size:12px;margin-bottom:4px}
.st-miss{font-size:12px;max-width:260px}
.st-note{font-size:13px}
.qr-box{border:1px dashed var(--line);border-radius:10px;padding:8px 12px;margin:8px 0;font-size:14px}
.qr-box summary{cursor:pointer}
.qr-box ul{margin:4px 0 6px 18px;padding:0}
.qr-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.qr-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.qr-act .muted{font-size:12px}
.qr-bulk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 12px}
.qr-bulk .muted{font-size:12px;flex-basis:100%}
/* ---- draft course book card (course page, members only) ---- */
.book-sec h2{margin-bottom:10px}
.bk-card{display:flex;gap:20px;align-items:center;padding:18px 20px;margin:0 0 10px;border-radius:16px;text-decoration:none;color:var(--ink);
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 14%,var(--card)),var(--card) 70%);
  box-shadow:0 12px 30px -18px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .15s ease,box-shadow .15s ease}
.bk-card:hover{transform:translateY(-2px);box-shadow:0 18px 36px -18px color-mix(in srgb,var(--accent) 85%,transparent)}
.bk-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.bk-cover{position:relative;flex:0 0 auto;width:92px;height:128px;border-radius:4px 8px 8px 4px;overflow:hidden;
  background:linear-gradient(160deg,#1f6f43,#0f3d26);color:#fff;box-shadow:4px 6px 14px -4px rgba(0,0,0,.45);
  display:flex;flex-direction:column;justify-content:flex-start;padding:12px 8px 8px 16px}
.bk-spine{position:absolute;left:0;top:0;bottom:0;width:8px;background:rgba(0,0,0,.28)}
.bk-ct{font-size:9px;letter-spacing:.08em;opacity:.8}
.bk-cn{font-size:11px;font-weight:700;line-height:1.25;margin-top:6px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bk-stamp{position:absolute;right:-18px;bottom:12px;transform:rotate(-30deg);background:#b4232c;color:#fff;font-size:9px;font-weight:800;letter-spacing:.12em;padding:2px 22px}
.bk-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.bk-kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.bk-title{font-size:22px;font-weight:800;line-height:1.2}
.bk-sub{font-size:14px;color:var(--ink-dim)}
.bk-meta{font-size:13px;color:var(--ink-faint)}
.bk-cta{align-self:flex-start;margin-top:8px;padding:8px 16px;border-radius:999px;background:var(--grad);color:var(--btn-ink);font-weight:800;font-size:14px}
.bk-warn{font-size:13px;color:var(--ink-dim);margin:4px 2px 0}
@media (max-width:560px){.bk-card{gap:14px;padding:14px}.bk-cover{width:70px;height:98px}.bk-title{font-size:18px}}
.bk-code{display:flex;align-items:center;gap:12px;margin:-2px 0 12px;padding:10px 16px;border-radius:12px;text-decoration:none;color:var(--ink);
  border:1px dashed color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--card)}
.bk-code:hover{border-style:solid}
.bk-code-i{flex:0 0 auto;font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);padding:6px 8px;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.bk-code b{display:block;font-size:15px}
.bk-code small{display:block;font-size:12px;color:var(--ink-faint)}
.bk-code-go{margin-left:auto;color:var(--accent);font-weight:700}

/* ---------- jadwal & booking ---------- */
.sc-wrap{max-width:860px}
.sc-head{margin-bottom:14px}
.sc-kicker{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sc-owner{color:var(--ink-dim);font-weight:600}
.sc-desc{margin:.4rem 0 0}
.sc-note,.sc-sub{color:var(--ink-dim);font-size:.88rem}
.sc-err{background:rgba(200,40,40,.1);border:1px solid rgba(200,40,40,.35);color:#b42318;padding:8px 12px;border-radius:8px;margin:8px 0}
.sc-okmsg{background:rgba(31,157,85,.1);border:1px solid rgba(31,157,85,.35);padding:8px 12px;border-radius:8px;margin:8px 0}
.sc-bad{color:#b42318}
.sc-durs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.sc-dur{padding:6px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600}
.sc-dur.on{background:var(--accent);border-color:var(--accent);color:#fff}
.sc-days{display:flex;flex-direction:column;gap:10px;margin:10px 0 16px}
.sc-day{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card)}
.sc-dlabel{font-weight:700;margin-bottom:6px}
.sc-slots{display:flex;flex-wrap:wrap;gap:6px}
.sc-slot input{position:absolute;opacity:0;pointer-events:none}
.sc-slot span{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-variant-numeric:tabular-nums;min-width:62px;text-align:center}
.sc-slot span:hover{border-color:var(--accent)}
.sc-slot input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}
.sc-slot input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.sc-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.sc-fields label,.sc-lgrid label{display:flex;flex-direction:column;gap:4px;font-size:.88rem;font-weight:600}
.sc-fields .sc-wide{grid-column:1/-1}
.sc-fields input,.sc-fields textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
.sc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sc-empty{padding:16px;border:1px dashed var(--line);border-radius:10px}
.sc-mine{margin:10px 0}
.sc-card{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--card)}
.sc-when{font-size:1.1rem;font-weight:700}
.sc-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0}
.sc-dl dt{color:var(--ink-dim)}
.sc-dl dd{margin:0;word-break:break-word}
.sc-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.sc-actions form{margin:0}
.sc-consult{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:10px 0;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;text-decoration:none;color:var(--ink);background:var(--card)}
.sc-consult small{display:block;color:var(--ink-dim)}
.sc-ci{font-size:1.5rem}
.sc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sc-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 10px;vertical-align:middle}
i.sc-book,.sc-it.sc-book{border-left-color:var(--accent)} i.sc-book{background:var(--accent)}
i.sc-teach{background:#d97706} .sc-it.sc-teach{border-left-color:#d97706}
i.sc-ext{background:#6366f1} .sc-it.sc-ext{border-left-color:#6366f1}
.sc-agenda{display:grid;gap:10px;margin-top:10px}
.sc-aday{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card)}
.sc-aday.wkend{opacity:.85}
.sc-aday h3{margin:0 0 6px;font-size:1rem}
.sc-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sc-it{display:flex;gap:12px;align-items:flex-start;border-left:4px solid var(--line);padding:4px 8px}
.sc-it form{margin-top:4px}
.sc-t{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;min-width:96px}
.sc-range{margin:8px 0;font-size:.9rem}
.sc-past{margin-top:16px}
.sc-jump{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 4px;font-size:.9rem}
.sc-admin h2{margin-top:28px;scroll-margin-top:70px}
.sc-admin input,.sc-admin select,.sc-admin textarea{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);max-width:100%}
.sc-inline{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
.sc-hours{display:grid;gap:6px;max-width:560px}
.sc-hrow{display:grid;grid-template-columns:90px 1fr;gap:8px;align-items:center}
.sc-hrow.wkend span{color:#d97706;font-weight:700}
.sc-emps,.sc-teach{display:grid;gap:8px}
.sc-emp,.sc-teachf{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px;border:1px solid var(--line);border-radius:8px}
.sc-emp.on{border-color:var(--accent)}
.sc-teachf.off,.sc-link.off{opacity:.6}
.sc-link{border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0;background:var(--card)}
.sc-lhead{margin-bottom:6px}
.sc-url{display:flex;gap:6px;margin-bottom:8px}
.sc-url input{flex:1;font-family:ui-monospace,monospace;font-size:.85rem}
.sc-lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.sc-chk{display:block;margin:8px 0 4px}
.sc-own{margin:6px 0 6px 20px}
@media (max-width:640px){.sc-fields{grid-template-columns:1fr}.sc-t{min-width:80px}.sc-it{flex-direction:column;gap:2px}}
.sc-own[hidden]{display:none}
.btn.danger{background:#b42318;border-color:#b42318;color:#fff;background-image:none}
.btn.danger:hover{background:#912018}
.sc-more summary{cursor:pointer;font-weight:700;padding:8px 0;color:var(--accent)}
.badge.sc-pend{background:#fef3c7;color:#92400e;border-color:#f59e0b}
.badge.sc-conf{background:rgba(31,157,85,.12);color:var(--accent);border-color:var(--accent)}
.sc-modes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.88rem;font-weight:600}
.sc-mode input{position:absolute;opacity:0;pointer-events:none}
.sc-mode span{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-weight:600}
.sc-mode input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}
.sc-mode input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.sc-loc[hidden]{display:none}
.sc-custom{margin:16px 0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card)}
.sc-custom summary{cursor:pointer;font-weight:700}
.sc-custom .sc-fields{grid-template-columns:repeat(3,1fr);margin-top:10px}
.sc-custom form>.sc-fields:last-of-type{grid-template-columns:1fr 1fr}
.sc-pending{border:1px solid #f59e0b;border-radius:10px;padding:10px 12px;margin:10px 0;background:rgba(245,158,11,.06)}
.sc-pending h2{margin:0 0 8px;font-size:1.05rem}
.sc-it.sc-pendi{border-left-color:#f59e0b}
.sc-modecfg{display:flex;gap:10px;align-items:center;font-size:.88rem;font-weight:600;flex-wrap:wrap}
@media (max-width:640px){.sc-custom .sc-fields,.sc-custom form>.sc-fields:last-of-type{grid-template-columns:1fr}}

/* ---------- pengaturan jadwal (cf-*) ---------- */
.cf{max-width:1040px}
.cf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:6px}
.cf-top h1{margin:0}
.cf-desc,.cf-intro{color:var(--ink-dim);margin:.25rem 0 0;font-size:.92rem}
.cf-intro{margin:0 0 14px}
.cf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0 16px;overflow-x:auto;scrollbar-width:none}
.cf-tab{padding:10px 14px;text-decoration:none;color:var(--ink-dim);font-weight:700;font-size:.92rem;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.cf-tab:hover{color:var(--ink)}
.cf-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.cf-n{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--line);color:var(--ink);font-size:.72rem;line-height:18px;text-align:center}
.cf-n.warn{background:#f59e0b;color:#fff}
.cf-flash{padding:10px 14px;border-radius:10px;margin:0 0 14px;font-size:.92rem}
.cf-flash.ok{background:rgba(31,157,85,.10);border:1px solid rgba(31,157,85,.35)}
.cf-flash.bad{background:rgba(200,40,40,.08);border:1px solid rgba(200,40,40,.35);color:#b42318}
.cf-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:0 0 16px}
.cf-card>header{margin:0 0 14px}
.cf-card>header h3{margin:0;font-size:1.05rem}
.cf-card>header p{margin:.2rem 0 0;color:var(--ink-dim);font-size:.88rem}
.cf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-grid2 .cf-card{margin:0}
.cf-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px 14px}
.cf-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.cf-lbl{font-size:.8rem;font-weight:700;color:var(--ink-dim)}
.cf-hint{font-size:.76rem;color:var(--ink-dim)}
.cf-hint.bad{color:#b42318}
.cf input:not([type=checkbox]):not([type=radio]),.cf select{font:inherit;font-size:.92rem;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg-1);color:var(--ink);width:100%;min-width:0;box-sizing:border-box}
.cf input:focus,.cf select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.cf-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.cf-row .cf-field{flex:1 1 150px}
.cf-row .btn{margin-bottom:1px}
.cf-form fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:14px 0 6px}
.cf-form fieldset:first-child{border-top:0;padding-top:4px}
.cf-form legend{font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding:0 8px 0 0}
.cf-form fieldset .sw{margin-top:12px}
.cf-switches{display:flex;gap:10px 22px;flex-wrap:wrap;margin:12px 0 4px}
.cf-actions{display:flex;gap:14px;align-items:center;margin-top:16px;flex-wrap:wrap}
.cf-empty{color:var(--ink-dim);font-size:.9rem;padding:10px 0;margin:0}
.cf-copy{display:flex;gap:8px;align-items:center;margin:10px 0}
.cf-copy span{font-size:.8rem;font-weight:700;color:var(--ink-dim);white-space:nowrap}
.cf-copy input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:.82rem!important;flex:1}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:.88rem;font-weight:700;color:var(--accent);cursor:pointer;text-decoration:none}
.linkbtn.danger{color:#b42318}
.linkbtn:hover{text-decoration:underline}
/* switch */
.sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem;user-select:none}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw-k{width:36px;height:20px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .15s}
.sw-k::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.sw input:checked+.sw-k{background:var(--accent)}
.sw input:checked+.sw-k::after{transform:translateX(16px)}
.sw input:focus-visible+.sw-k{outline:2px solid var(--accent);outline-offset:2px}
/* pills & chips */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:700;border:1px solid var(--line);color:var(--ink-dim);white-space:nowrap}
.pill.ok{background:rgba(31,157,85,.12);border-color:rgba(31,157,85,.4);color:var(--accent)}
.pill.bad{background:rgba(200,40,40,.08);border-color:rgba(200,40,40,.35);color:#b42318}
.pill.soft{opacity:.75}
.pill.k-teaching{background:rgba(217,119,6,.12);border-color:rgba(217,119,6,.4);color:#b45309}
.pill.k-practice{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.4);color:#4f46e5}
.pill.k-other{background:rgba(100,116,139,.12);border-color:rgba(100,116,139,.4)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:.8rem;padding:4px 10px;border-radius:8px;background:rgba(127,127,127,.08);border:1px solid var(--line)}
/* calendar cards */
.cal-card>header{display:flex;gap:12px;align-items:center}
.cal-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:900;color:#fff;flex:none}
.cal-google{background:linear-gradient(135deg,#4285f4,#34a853)}
.cal-microsoft{background:linear-gradient(135deg,#0078d4,#5e5ce6)}
.cal-acc{border-top:1px solid var(--line);padding:12px 0 4px;display:grid;gap:10px}
.cal-acc:first-of-type{border-top:0;padding-top:0}
.cal-acc .cf-row{align-items:center}
.cal-acc .cf-field{flex:0 1 200px}
/* hours editor */
.hx{display:grid;gap:2px}
.hx-day{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start;padding:10px 4px;border-bottom:1px solid var(--line)}
.hx-day:last-child{border-bottom:0}
.hx-day .sw{padding-top:6px}
.hx-day.wk b{color:#b45309}
.hx-rs{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.hx-r{display:flex;align-items:center;gap:8px}
.hx-r input{width:120px!important}
.hx-r[hidden]{display:none}
.hx-x{border:0;background:none;color:var(--ink-dim);font-size:1.1rem;cursor:pointer;padding:0 4px}
.hx-x:hover{color:#b42318}
.hx-add{border:0;background:none;color:var(--accent);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;padding:2px 0}
.hx-closed{display:none;color:var(--ink-dim);font-size:.88rem;padding-top:6px}
.hx-day.off .hx-rs{display:none}
.hx-day.off .hx-closed{display:block}
/* list items (routine, employers) */
.cf-list{display:grid;gap:8px}
.cf-item{border:1px solid var(--line);border-radius:10px;background:var(--card)}
.cf-item.off{opacity:.65}
.cf-item>summary{list-style:none;display:flex;gap:10px;align-items:center;padding:10px 14px;cursor:pointer;flex-wrap:wrap}
.cf-item>summary::-webkit-details-marker{display:none}
.cf-item-t{flex:0 1 auto}
.cf-item-m{color:var(--ink-dim);font-size:.88rem;flex:1 1 200px}
.cf-item-s{display:flex;gap:6px}
.cf-edit{font-size:.82rem;font-weight:700;color:var(--accent)}
.cf-item[open]>summary .cf-edit{visibility:hidden}
.cf-item[open]{border-color:var(--accent)}
.cf-item>.cf-form{padding:4px 14px 14px;border-top:1px solid var(--line)}
.tl .tl-dot{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.tl.on .tl-dot{background:var(--accent);box-shadow:0 0 0 3px rgba(31,157,85,.2)}
/* link cards */
.lk.off{opacity:.7}
.lk-h{display:flex;gap:10px;align-items:flex-start}
.lk-h>div{flex:1}
.lk-edit{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.lk-edit>summary{cursor:pointer;font-weight:700;color:var(--accent);font-size:.92rem}
.lk-edit>.cf-form{margin-top:10px}
.lk-own{margin:10px 0 0;padding:4px 12px;border:1px dashed var(--line);border-radius:10px}
.lk-own[hidden]{display:none}
.cf-tbl{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:14px}
.cf-tbl th{text-align:left;font-size:.78rem;color:var(--ink-dim);font-weight:700;border-bottom:1px solid var(--line);padding:6px 8px}
.cf-tbl td{border-bottom:1px solid var(--line);padding:8px}
.cf-tbl .r{text-align:right}
.cf-tbl .muted{color:var(--ink-dim)}
@media (max-width:760px){
  .cf-grid2{grid-template-columns:1fr}
  .hx-day{grid-template-columns:1fr;gap:6px}
  .cf-card{padding:14px}
  .cf-copy{flex-wrap:wrap}
}
.cf a.btn,.cf a.linkbtn{text-decoration:none}
.cf .cf-desc+.cf-actions{margin-top:12px}

/* ---------- perapian tata letak situs ---------- */
/* menu atas: desktop tetap; < 900px jadi tombol menu */
.nav-burger{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:40px;height:36px;padding:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.topbar.open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.topbar.open .nav-burger span:nth-child(2){opacity:0}
.topbar.open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nd-menu{z-index:20}
@media (max-width:900px){
  .topbar{padding:12px 16px;flex-wrap:wrap}
  .nav-burger{display:inline-flex}
  .topnav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:10px 0 4px;margin-top:10px;border-top:1px solid var(--line);max-height:calc(100vh - 70px);overflow-y:auto}
  .topbar.open .topnav{display:flex}
  .topnav>a,.topnav>.nd>summary,.topnav>details>summary{padding:12px 4px;font-size:15px;border-bottom:1px solid var(--line);display:flex}
  .topnav>.nd>summary::after{margin-left:auto}
  .nd-menu{position:static;box-shadow:none;border:0;background:transparent;padding:2px 0 8px 14px;min-width:0;display:flex;flex-direction:column}
  .nd-menu a{padding:10px 8px;font-size:14.5px}
  .topnav .tgl{align-self:flex-start;margin-top:10px;display:inline-block}
  .topnav .tgl+.tgl{margin-top:-30px;margin-left:58px}
  .wrap{padding:24px 16px}
}
/* judul halaman daftar + kotak cari tidak berdempetan */
.section-head{gap:12px;flex-wrap:wrap}
.section-head h1,.section-head h2{margin:0}
@media (max-width:640px){
  .section-head{flex-direction:column;align-items:stretch}
  .section-head .list-tools{width:100%}
  .section-head .list-search{flex:1;min-width:0;width:100%}
}
/* bilah navigasi admin: satu baris per kelompok, rapi dan sejajar */
.adm-tabs{display:flex!important;flex-direction:column;align-items:stretch!important;gap:4px;position:static!important;background:transparent!important;padding:10px 0 12px!important;margin:0 0 22px!important;border-bottom:1px solid var(--line)}
.adm-tabs .tab-group{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:2px;border:0;border-radius:0;padding:0 0 0 104px;position:relative;min-height:30px}
.adm-tabs .tg-label{position:absolute;left:0;top:8px;font-size:10.5px;letter-spacing:.09em;color:var(--ink-faint);margin:0}
@media (max-width:640px){
  .adm-tabs .tab-group{padding:16px 0 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .adm-tabs .tg-label{top:0}
  .adm-tabs .atab{white-space:nowrap}
}
.adm-tabs .atab{border:0!important;background:transparent!important;color:var(--ink-dim);padding:5px 10px!important;border-radius:999px!important;font-size:13px}
.adm-tabs .atab:hover{background:var(--field-bg)!important;color:var(--ink)}
.adm-tabs .atab.on{background:var(--accent)!important;color:#fff!important}

/* ---- quiz pause popup + history (migration 0041) ---- */
.qp-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:10px 0 14px;position:sticky;top:0;z-index:50;background:var(--bg-1,#fff);padding:8px 0;border-bottom:1px solid var(--line,#ddd)}
.qp-note{font-size:.85em;flex:1 1 260px}
.qp-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);display:flex;align-items:stretch;justify-content:center;padding:16px}
.qp-modal[hidden]{display:none}
.qp-box{background:var(--bg-1,#fff);color:inherit;border-radius:12px;width:min(1200px,100%);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.qp-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line,#ddd)}
.qp-head select{flex:1 1 260px;min-width:0;max-width:100%}
#qp-frame{flex:1;width:100%;border:0;min-height:60vh;background:#fff}
.qp-empty{padding:8px 14px;margin:0}
body.qp-on{overflow:hidden}
.ql-sum{margin:6px 0;display:flex;gap:6px;flex-wrap:wrap}
details.ql summary{cursor:pointer;font-size:.9em}
.ql-tbl{margin-top:6px;font-size:.88em}
.ql-tbl tr.ql-away td{color:var(--danger,#c0392b)}