/* ============================================================
   IWS — Kimia Dasar 2 (RADEC) · Design System
   Modern EdTech · UPI navy + gold / Undana accents
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand themes (driven by Tweaks; default = UPI Navy & Emas) */
  --brand:        #1c3f8f;   /* primary navy */
  --brand-strong: #14306b;
  --brand-soft:   #eaf0fb;
  --brand-softer: #f3f7fe;
  --accent:       #e6a417;   /* gold */
  --accent-strong:#c98708;
  --accent-soft:  #fdf3da;

  /* Neutrals */
  --ink:        #16223b;
  --ink-2:      #38486a;
  --ink-3:      #6b7896;
  --line:       #e3e8f2;
  --line-2:     #eef2f9;
  --surface:    #ffffff;
  --bg:         #eef2f9;
  --bg-2:       #f6f8fc;

  /* Phase colors (Tiga Kotak) */
  --read:       #475569;
  --k1:         #2563b8;   /* ANSWER  — biru */
  --k1-soft:    #eef4fd;
  --k2:         #0d9488;   /* DISCUSS — teal (tatap muka) */
  --k2-soft:    #e8f6f4;
  --k2-bg:      #f1f8f8;   /* soft blue/teal section bg */
  --k3:         #7c3aed;   /* EXPLAIN — ungu */
  --k3-soft:    #f2ecfe;

  /* Pegangan dosen boxes */
  --peg-blue:   #2563b8;   --peg-blue-bg:#eef4fd;
  --peg-yellow: #b7791f;   --peg-yellow-bg:#fdf6e3;
  --peg-green:  #15803d;   --peg-green-bg:#e9f7ee;
  --peg-pink:   #be185d;   --peg-pink-bg:#fdecf3;

  --ok:         #15803d;
  --warn:       #c2410c;

  --radius:     16px;
  --radius-sm:  11px;
  --radius-lg:  22px;
  --shadow-sm:  0 1px 2px rgba(20,32,60,.06), 0 1px 3px rgba(20,32,60,.05);
  --shadow:     0 6px 22px -10px rgba(20,40,90,.28), 0 2px 6px rgba(20,40,90,.06);
  --shadow-lg:  0 28px 60px -28px rgba(15,30,70,.45);

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, serif;

  --maxw: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
button { font-family: inherit; }
sub, sup { font-size: .72em; }

/* ---------- App bar ---------- */
.appbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  height: 62px; padding: 0 22px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-strong) 100%);
  display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.brand-mark::after {
  content: ""; position: absolute; right: -7px; bottom: -7px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
  opacity: .9;
}
.brand-mark svg { width: 21px; height: 21px; position: relative; z-index: 1; }
.brand-name { font-weight: 800; letter-spacing: -.01em; font-size: 15.5px; line-height: 1.05; }
.brand-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.appbar-spacer { flex: 1; }

.crumbs { display: flex; align-items: center; gap: 8px; color: var(--ink-3);
  font-size: 13px; font-weight: 600; min-width: 0; }
.crumbs b { color: var(--ink); font-weight: 700; }
.crumbs .sep { opacity: .5; }
.crumbs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.save-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--ok);
  background: #eaf7ef; border: 1px solid #cfead9;
  padding: 6px 11px; border-radius: 999px;
}
.save-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.save-chip[data-state="saving"] { color: var(--ink-3); background: #f0f2f7; border-color: var(--line); }
.save-chip[data-state="saving"] .dot { background: var(--ink-3); animation: pulse 1s infinite; }
.save-chip[data-state="local"]  { color: var(--warn); background: #fdf0e8; border-color: #f6d6c2; }
.save-chip[data-state="local"] .dot { background: var(--warn); }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }

.role-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: default;
  padding: 5px 6px 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 700;
  color: var(--ink);
}
.role-chip .avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800;
  background: linear-gradient(150deg, var(--brand), var(--brand-strong));
}
.role-chip[data-role="dosen"] .avatar { background: linear-gradient(150deg, #475569, #1f2937); }

/* ---------- Layout primitives ---------- */
.screen { display: none; }
.screen.active { display: block; animation: screen-in .32s ease both; }
@keyframes screen-in { from { transform: translateY(7px); } to { transform: none; } }

/* Sub-batch 5.10: Boot overlay — hindari flash login screen saat refresh.
   Cover full viewport sampai app.js init IIFE selesai (auth resolve + navigate first fire).
   Kemudian di-remove oleh JS. Warna konsisten brand (UPI navy). */
#appBoot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--brand-softer);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .18s ease;
}
#appBoot.ab-fade-out { opacity: 0; pointer-events: none; }
#appBoot .ab-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
#appBoot .ab-spinner {
  width: 44px; height: 44px;
  border: 3px solid var(--brand-soft);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: appboot-spin .8s linear infinite;
}
#appBoot .ab-text {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: .01em;
}
@keyframes appboot-spin { to { transform: rotate(360deg); } }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 30px 22px 120px; }
.wrap-narrow { max-width: 880px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand);
}
.eyebrow .tick { width: 18px; height: 2px; background: var(--accent); border-radius: 2px; }
h1.page-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 6px; }
.page-lead { color: var(--ink-2); font-size: 15px; max-width: 70ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14px; font-weight: 700; cursor: pointer; border: none;
  padding: 11px 18px; border-radius: 11px; min-height: 44px;
  background: #eef1f7; color: var(--ink); transition: transform .12s, box-shadow .2s, background .2s;
  text-decoration: none;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(150deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn-primary:hover { box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--brand) 65%, transparent); }
.btn-gold { background: linear-gradient(150deg, var(--accent), var(--accent-strong)); color: #3b2a05; }
.btn-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-quiet { background: transparent; color: var(--ink-3); min-height: 38px; padding: 8px 12px; }
.btn-quiet:hover { color: var(--brand); }
.btn-sm { min-height: 38px; padding: 8px 14px; font-size: 13px; border-radius: 9px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* ============================================================
   LOGIN
   ============================================================ */
.auth { min-height: calc(100vh - 0px); display: grid; grid-template-columns: 1.05fr .95fr; }
.auth-hero {
  position: relative; overflow: hidden; color: #fff; padding: 54px 56px;
  background: radial-gradient(120% 90% at 15% 10%, #24509f 0%, var(--brand-strong) 55%, #0e2150 100%);
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-hero .hero-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
  right: -90px; top: -90px; filter: blur(8px); }
.auth-hero h2 { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.18; letter-spacing: -.01em; margin: 0; max-width: 18ch; }
.auth-hero .hero-tag { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 85%, white); }
.auth-hero ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; }
.auth-hero li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #d6e0f5; }
.auth-hero li .ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff; }
.auth-hero li .ic svg { width: 16px; height: 16px; }
.auth-hero li b { color: #fff; font-weight: 700; }
.hero-foot { font-size: 12px; color: #9fb2da; position: relative; z-index: 1; }
.radec-pills { display: flex; gap: 7px; margin-top: 14px; }
.radec-pills span { font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: #cdd9f2; border: 1px solid rgba(255,255,255,.14); }
.radec-pills span.on { background: var(--accent); color: #3b2a05; border-color: transparent; }

.auth-form-side { display: grid; place-items: center; padding: 40px; background: var(--surface); }
.auth-card { width: 100%; max-width: 392px; }
.auth-card h3 { font-size: 23px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.01em; }
.auth-card p.sub { color: var(--ink-3); font-size: 14px; margin: 0 0 24px; }
.role-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--bg);
  border-radius: 13px; margin-bottom: 22px; }
.role-toggle button { border: none; background: transparent; padding: 10px; border-radius: 9px; font-weight: 700;
  font-size: 13.5px; color: var(--ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.role-toggle button.on { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; }
.field input {
  width: 100%; padding: 13px 14px; border-radius: 11px; border: 1px solid var(--line);
  font-size: 15px; font-family: inherit; color: var(--ink); background: var(--bg-2); outline: none; transition: .15s;
}
.field input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--brand-soft); }
.auth-note { font-size: 12px; color: var(--ink-3); margin-top: 16px; text-align: center; line-height: 1.5; }

/* ============================================================
   CONSENT
   ============================================================ */
.consent-wrap { max-width: 760px; margin: 0 auto; padding: 40px 22px 80px; }
.consent-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow: hidden; }
.consent-head { padding: 30px 38px; background: linear-gradient(150deg, var(--brand-strong), #0e2150); color: #fff; }
.consent-head .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb,var(--accent) 85%, white); }
.consent-head h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.32; margin: 10px 0 0; }
.consent-body { padding: 30px 38px; }
.consent-body h4 { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); margin: 22px 0 8px; }
.consent-body h4:first-child { margin-top: 0; }
.consent-body p { color: var(--ink-2); font-size: 14.5px; margin: 0 0 10px; }
.consent-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 16px 18px; background: var(--brand-softer);
  border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 4px 0 6px; }
.consent-meta div { font-size: 13px; }
.consent-meta.vertical { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.consent-head { display: flex; flex-direction: column; gap: 8px; }
.consent-info-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13.5px; color: var(--ink-3); text-decoration: none; border-bottom: 1px solid transparent; }
.consent-info-link svg { width: 15px; height: 15px; }
.consent-info-link:hover { color: var(--brand); border-bottom-color: currentColor; }
.peneliti-info-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,.5); padding: 20px; }
.peneliti-info-modal.open { display: flex; }
.pim-card { width: min(92vw, 560px); max-height: 88vh; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 24px 60px rgba(15,23,42,.28); }
.pim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.pim-head h3 { margin: 0; font-size: 16px; }
.pim-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: var(--brand-softer); color: var(--ink-2); border-radius: 8px; cursor: pointer; }
.pim-x:hover { background: var(--brand-soft); color: var(--brand); }
.pim-x svg { width: 18px; height: 18px; }
.pim-body { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.pim-body div { font-size: 13.5px; color: var(--ink-1); }
.pim-body span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 2px; }
.consent-meta span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 2px; }
.rights { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.rights li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.rights li svg { width: 19px; height: 19px; color: var(--ok); flex: none; margin-top: 1px; }
.consent-check { display: flex; gap: 13px; align-items: flex-start; margin: 26px 0 6px; padding: 16px 18px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: .15s; }
.consent-check.on { border-color: var(--brand); background: var(--brand-soft); }
.consent-check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--brand); flex: none; cursor: pointer; }
.consent-check span { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.consent-actions { display: flex; gap: 12px; margin-top: 20px; }

/* ============================================================
   DASHBOARD MAHASISWA
   ============================================================ */
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.stat-chip { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 11px 16px; min-width: 120px; box-shadow: var(--shadow-sm); }
.stat-chip b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.stat-chip span { font-size: 12px; color: var(--ink-3); font-weight: 600; }

.meet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.meet-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 22px; cursor: pointer; transition: transform .16s, box-shadow .2s, border-color .2s; position: relative; overflow: hidden; }
.meet-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb,var(--brand) 35%, var(--line)); }
.meet-card .mc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.meet-num { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 19px; background: linear-gradient(150deg, var(--brand), var(--brand-strong)); box-shadow: var(--shadow-sm); }
.meet-card[data-locked="true"] { opacity: .72; }
.meet-card[data-locked="true"] .meet-num { background: linear-gradient(150deg,#94a3b8,#64748b); }
.meet-card h3 { font-size: 18.5px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 3px; }
.meet-card .units { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.mc-theme { font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }
.progress { height: 9px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin: 16px 0 8px; }
.progress > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.mc-foot { display: flex; align-items: center; justify-content: space-between; }
.mc-foot .pct { font-size: 12.5px; color: var(--ink-2); font-weight: 700; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800;
  padding: 5px 11px; border-radius: 999px; letter-spacing: .01em;
}
.badge-grey { background: #eef1f7; color: var(--ink-3); }
.badge-amber { background: var(--accent-soft); color: var(--accent-strong); }
.badge-green { background: #e7f6ed; color: var(--ok); }
.badge-blue { background: var(--brand-soft); color: var(--brand); }

/* Pretest/Posttest strip */
.test-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.test-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.test-card .tc-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; }
.test-card h4 { margin: 0; font-size: 15px; font-weight: 800; }
.test-card p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* ============================================================
   HALAMAN PERTEMUAN (sidebar sub-bab)
   ============================================================ */
.meeting-layout { display: grid; grid-template-columns: 290px 1fr; gap: 24px; align-items: start; }
.subnav { position: sticky; top: 82px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.subnav-head { padding: 16px 18px; border-bottom: 1px solid var(--line-2); }
.subnav-head h4 { margin: 0; font-size: 15px; font-weight: 800; }
.subnav-head p { margin: 3px 0 0; font-size: 12px; color: var(--ink-3); }
.subnav-list { padding: 8px; }
.subnav-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: .14s; }
.subnav-item:hover { background: var(--bg-2); }
.subnav-item.on { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.subnav-item .lbl { flex: 1; min-width: 0; }
.subnav-item .lbl small { display: block; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.subnav-item.on .lbl small { color: color-mix(in srgb,var(--brand) 65%, var(--ink-3)); }
.subnav-item.create { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 14px; }
.subnav-item.create .stat-dot { background: var(--accent); }

.stat-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; position: relative; border: 2px solid var(--line); }
.stat-dot[data-s="done"] { background: var(--ok); border-color: var(--ok); }
.stat-dot[data-s="done"]::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 900; }
.stat-dot[data-s="k1"] { border-color: var(--k1); background: conic-gradient(var(--k1) 33%, #fff 0); }
.stat-dot[data-s="k2"] { border-color: var(--k2); background: conic-gradient(var(--k2) 66%, #fff 0); }
.stat-dot[data-s="todo"] { background: #fff; }

/* mobile subnav tabs */
.subnav-mobile { display: none; }

/* ============================================================
   SUB-BAB — TIGA KOTAK
   ============================================================ */
.subbab { max-width: 880px; }
.subbab-hero { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 22px 24px; margin-bottom: 18px; }
.subbab-hero .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag-chip { font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }

/* Section shell */
.section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  margin-bottom: 18px; overflow: hidden; scroll-margin-top: 130px; }
.section-head { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--line-2); }
.section-head .sec-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; font-weight: 800; }
.section-head .sec-meta { flex: 1; min-width: 0; }
.section-head .phase { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.section-head h3 { margin: 1px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.section-head .when { font-size: 11.5px; font-weight: 700; color: var(--ink-3); padding: 5px 10px; border-radius: 999px; background: var(--bg); white-space: nowrap; }
.section-body { padding: 22px 24px; }

.sec-read .sec-ic { background: var(--read); }
.sec-read .phase { color: var(--read); }
.sec-k1 .sec-ic { background: var(--k1); }   .sec-k1 .phase { color: var(--k1); }
.sec-k2 .sec-ic { background: var(--k2); }   .sec-k2 .phase { color: var(--k2); }
.sec-k3 .sec-ic { background: var(--k3); }   .sec-k3 .phase { color: var(--k3); }

/* READ content */
.read-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.prose p { font-size: 15px; color: var(--ink-2); margin: 0 0 13px; line-height: 1.62; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose .prose-h { font-family: var(--serif, Georgia, serif); font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 10px; line-height: 1.3; }
.prose .prose-h4 { font-size: 14.5px; font-weight: 800; color: var(--ink); margin: 4px 0 10px; }
.prose .prose-ul { margin: 0 0 13px; padding-left: 20px; display: grid; gap: 7px; }
.prose .prose-ul li { font-size: 15px; color: var(--ink-2); line-height: 1.58; }
.prose .prose-hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }
.read-figph { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 92px; padding: 18px 20px;
  margin: 0 0 14px; border: 1.5px dashed color-mix(in srgb, var(--brand) 38%, var(--line)); border-radius: var(--radius-sm);
  background: var(--brand-softer); color: var(--brand-strong); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.prose .fig-cap { font-size: 13px; color: var(--ink-3); text-align: center; margin: -6px 0 4px; }
.read-catatan { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 0; padding: 15px 16px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); }
.read-catatan .rc-figph { flex: none; width: 88px; min-height: 62px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 8px; border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent-strong); font-size: 10.5px; font-weight: 700; line-height: 1.3; }
.read-catatan .rc-h { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 6px; }
.read-catatan .rc-body p { font-size: 14px; color: #5a4210; margin: 0; line-height: 1.6; }
.read-catatan .rc-body strong { color: #4a3608; }
.read-cari { margin: 4px 0 16px; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--brand-soft);
  border-left: 3px solid var(--brand); font-size: 14px; color: var(--ink-2); line-height: 1.58; }
.read-cari .rc-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand-strong); margin-right: 8px; }
.prose .read-quote { margin: 4px 0 14px; padding: 12px 18px; border-left: 3px solid var(--brand); background: var(--brand-softer);
  border-radius: var(--radius-sm); font-size: 15.5px; color: var(--ink); line-height: 1.5; }
.prose .read-quote em { font-style: italic; font-weight: 600; }
.prose .rep-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: middle;
  color: var(--brand-strong); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  padding: 1px 8px; border-radius: 999px; margin-left: 7px; text-transform: none; }
.prose .prose-ul .prose-ul { margin: 7px 0 0; }
.formula { display: block; text-align: center; font-size: 18px; color: var(--brand-strong); background: var(--brand-softer);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; margin: 6px 0 14px; font-weight: 600; }
.formula em { font-style: italic; }
.prose .read-table { width: 100%; border-collapse: collapse; margin: 4px 0 14px; font-size: 14px; }
.prose .read-table th { text-align: left; font-weight: 800; color: var(--ink); background: var(--brand-softer);
  border: 1px solid var(--line); padding: 9px 12px; }
.prose .read-table td { border: 1px solid var(--line); padding: 9px 12px; color: var(--ink-2); line-height: 1.5; vertical-align: top; }
.prose .read-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--brand) 4%, #fff); }
.prose .read-table strong { color: var(--ink); }
.prose .read-summary { margin: 8px 0 4px; padding: 18px 20px; border-radius: var(--radius); background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line)); }
.prose .read-summary > .prose-h:first-child { margin-top: 0; }
.prose .read-summary .prose-h { color: var(--brand-strong); }
.prose .read-summary .rs-tag { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-strong); margin-bottom: 8px; }
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); font-size: 13.5px; color: #6b4e10; margin: 4px 0 0; }
.callout svg { width: 19px; height: 19px; flex: none; color: var(--accent-strong); margin-top: 1px; }
.callout b { color: #5a4210; }

.sim-launch { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: linear-gradient(120deg, var(--brand-softer), #fff); border: 1px solid color-mix(in srgb,var(--brand) 22%, var(--line)); margin-top: 4px; }
.sim-launch .sl-ic { width: 48px; height: 48px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--brand), var(--brand-strong)); }
.sim-launch .sl-ic svg { width: 24px; height: 24px; }
.sim-launch h4 { margin: 0; font-size: 15px; font-weight: 800; }
.sim-launch p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.sim-launch .grow { flex: 1; }

.shortcut-sim { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--brand);
  background: var(--brand-soft); border: 1px dashed color-mix(in srgb,var(--brand) 35%, var(--line)); padding: 9px 14px; border-radius: 10px; cursor: pointer; margin-bottom: 16px; }
.shortcut-sim:hover { background: #fff; }
.shortcut-sim svg { width: 16px; height: 16px; }

/* instruction block (read-only redaksi) */
.redaksi { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--k1); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 16px; }
.redaksi .rlabel { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.redaksi p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.sec-k2 .redaksi { border-left-color: var(--k2); }
.sec-k3 .redaksi { border-left-color: var(--k3); }

/* Question card */
.qcard { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 17px; margin-bottom: 14px; background: #fff; }
.qcard .qhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qnum { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 800;
  background: var(--k1-soft); color: var(--k1); }
.kps-badge { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-strong);
  letter-spacing: .01em; }
.kps-badge.tpack { background: #ede9fe; color: #6d28d9; }
.qtext { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0 0 12px; line-height: 1.5; }
.answer-ta {
  width: 100%; min-height: 132px; resize: vertical; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line);
  font-family: inherit; font-size: 14.5px; color: var(--ink); background: var(--bg-2); outline: none; line-height: 1.55; transition: .15s;
}
.answer-ta:focus { border-color: var(--k1); background: #fff; box-shadow: 0 0 0 4px var(--k1-soft); }
.sec-k2 .answer-ta:focus { border-color: var(--k2); box-shadow: 0 0 0 4px var(--k2-soft); }
.sec-k3 .answer-ta:focus { border-color: var(--k3); box-shadow: 0 0 0 4px var(--k3-soft); }
.sec-k2 .qnum { background: var(--k2-soft); color: var(--k2); }
.sec-k3 .qnum { background: var(--k3-soft); color: var(--k3); }

/* submitted lock state */
.kotak-locked .answer-ta { background: #f4f6fa; color: var(--ink-2); border-style: dashed; cursor: not-allowed; }
.locked-flag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: var(--ok);
  background: #e8f6ee; border: 1px solid #c9e9d5; padding: 6px 12px; border-radius: 999px; }
.kotak-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.kotak-actions .grow { flex: 1; }

/* Visual divider — batas temporal */
.divider-temporal { margin: 22px 0; border-radius: var(--radius); overflow: hidden; position: relative;
  background: var(--k2-bg); border: 1px solid color-mix(in srgb,var(--k2) 24%, var(--line)); }
.divider-temporal .dt-inner { padding: 22px 24px; text-align: center; position: relative; }
.divider-temporal .dline { height: 0; border-top: 2px dashed color-mix(in srgb,var(--k2) 45%, var(--line)); margin: 4px 12% 16px; }
.divider-temporal .dline.b { margin: 16px 12% 4px; }
.divider-temporal .dt-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--k2); color: #fff; display: grid; place-items: center; margin: 0 auto 11px; }
.divider-temporal .dt-ic svg { width: 22px; height: 22px; }
.divider-temporal h4 { margin: 0; font-size: 16px; font-weight: 800; color: var(--k2); }
.divider-temporal p { margin: 5px 0 0; font-size: 13px; color: var(--ink-2); }

/* sticky temporal banner */
.temporal-banner { position: fixed; top: 62px; left: 0; right: 0; z-index: 40; display: none;
  background: var(--k2); color: #fff; text-align: center; font-size: 12.5px; font-weight: 700; padding: 8px 16px;
  box-shadow: 0 6px 16px -8px rgba(13,148,136,.6); transform: translateY(-100%); transition: transform .25s; }
.temporal-banner.show { display: block; transform: none; }
.temporal-banner svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }

/* Gate overlay */
.gate { position: relative; }
.gate-veil { position: absolute; inset: 0; z-index: 5; background: rgba(247,249,252,.78); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.gate-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px; max-width: 440px; width: 100%; text-align: center; }
.gate-card .glock { width: 50px; height: 50px; border-radius: 14px; background: var(--bg); display: grid; place-items: center; margin: 0 auto 14px; color: var(--ink-3); }
.gate-card .glock svg { width: 24px; height: 24px; }
.gate-card h4 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.gate-card p { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-2); }
.member-list { display: grid; gap: 8px; text-align: left; margin: 14px 0 18px; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--bg-2); font-size: 13.5px; font-weight: 600; }
.member-row .mstat { margin-left: auto; font-size: 12px; font-weight: 800; }
.member-row .mstat.ok { color: var(--ok); }
.member-row .mstat.no { color: var(--ink-3); }
.member-row .mav { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; background: var(--k2); }
.member-row .mav.no { background: #cbd5e1; }
.gate-demo { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.gate-demo a { color: var(--brand); font-weight: 700; cursor: pointer; text-decoration: none; border-bottom: 1px dashed; }
.autorefresh { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-top: 12px; }
.autorefresh .spin { width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--k2); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Comparison cards (DISCUSS) */
.compare-wrap { display: grid; gap: 10px; margin-bottom: 18px; }
.compare-card { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.compare-head { display: flex; align-items: center; gap: 11px; padding: 12px 15px; cursor: pointer; background: var(--bg-2); }
.compare-head .mav { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; background: var(--k2); flex: none; }
.compare-head .cname { font-size: 13.5px; font-weight: 700; }
.compare-head .cmeta { font-size: 11.5px; color: var(--ink-3); }
.compare-head .chev { margin-left: auto; transition: transform .2s; color: var(--ink-3); }
.compare-card.open .chev { transform: rotate(180deg); }
.compare-body { display: none; padding: 4px 15px 14px; }
.compare-card.open .compare-body { display: block; }
.compare-qa { padding: 10px 0; border-top: 1px solid var(--line-2); }
.compare-qa:first-child { border-top: none; }
.compare-qa .cq { font-size: 12px; font-weight: 700; color: var(--k2); margin-bottom: 4px; }
.compare-qa .ca { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

.explain-ref { background: var(--k3-soft); border: 1px solid color-mix(in srgb,var(--k3) 22%, var(--line)); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 16px; }
.explain-ref .rlabel { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--k3); margin-bottom: 8px; }
.explain-ref .ref-qa { font-size: 13.5px; color: var(--ink-2); padding: 7px 0; border-top: 1px solid color-mix(in srgb,var(--k3) 14%, var(--line)); }
.explain-ref .ref-qa:first-of-type { border-top: none; }
.explain-ref .ref-qa b { color: var(--k3); font-weight: 700; display: block; font-size: 12px; margin-bottom: 2px; }

.same-check { display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer; margin-bottom: 16px; transition: .15s; }
.same-check.on { border-color: var(--k3); background: var(--k3-soft); }
.same-check input { width: 21px; height: 21px; accent-color: var(--k3); margin-top: 1px; flex: none; cursor: pointer; }
.same-check span { font-size: 14px; font-weight: 600; color: var(--ink); }

.subbab-done { text-align: center; padding: 30px; }
.subbab-done .dic { width: 64px; height: 64px; border-radius: 18px; background: #e8f6ee; color: var(--ok); display: grid; place-items: center; margin: 0 auto 14px; }
.subbab-done .dic svg { width: 32px; height: 32px; }
.subbab-done h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.subbab-done p { margin: 0 0 18px; color: var(--ink-2); font-size: 14px; }

/* ============================================================
   SIMULATION PANEL
   ============================================================ */
.sim-overlay { position: fixed; inset: 0; z-index: 90; display: none; }
.sim-overlay.open { display: block; }
.sim-overlay .sim-scrim { position: absolute; inset: 0; background: rgba(13,22,45,.5); backdrop-filter: blur(3px); }
.sim-shell { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--bg-2);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slidein .3s ease; }
@keyframes slidein { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.sim-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.sim-top .st-ic { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(150deg,var(--brand),var(--brand-strong)); color: #fff; display: grid; place-items: center; flex: none; }
.sim-top h4 { margin: 0; font-size: 15.5px; font-weight: 800; }
.sim-top p { margin: 1px 0 0; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.sim-close { margin-left: auto; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
.sim-close:hover { color: var(--ink); border-color: var(--ink-3); }
.sim-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 4px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); }
.sim-scroll { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }

.sim-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.sim-panel .sp-head { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-bottom: 1px solid var(--line-2); }
.sim-panel .sp-tag { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.sp-tag.micro { background: #e8f0fe; color: #1d4ed8; }
.sp-tag.macro { background: #e9f7ee; color: #15803d; }
.sp-tag.symbol { background: #f3ecfe; color: #7c3aed; }
.sim-panel .sp-head h5 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.sim-panel .sp-body { padding: 14px 15px; }
#sim-canvas, #sim-graph { display: block; width: 100%; border-radius: 10px; background: #0d1f3d; }
.sim-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 11px; }
.sim-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.sim-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

/* makro gauge */
.gauge-row { display: flex; align-items: center; gap: 16px; }
.gauge { flex: 1; }
.gauge .glabel { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; }
.gauge .gbar { height: 16px; border-radius: 999px; background: var(--line-2); overflow: hidden; position: relative; }
.gauge .gbar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #38bdf8, #2563b8); transition: width .12s; }
.gauge .gval { font-size: 13px; font-weight: 800; color: var(--brand); margin-top: 5px; }
.beaker-illu { width: 88px; height: 96px; flex: none; }

/* symbolic readout */
.sym-eq { text-align: center; font-size: 17px; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; margin-bottom: 12px; font-weight: 600; }
.sym-eq b { color: var(--k3); }
.sym-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.sym-cell { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px; text-align: center; }
.sym-cell span { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.sym-cell b { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.sym-cell small { font-size: 11px; color: var(--ink-3); font-weight: 600; }

/* sim controls */
.sim-controls { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }
.sim-controls h5 { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ctl { margin-bottom: 16px; }
.ctl:last-child { margin-bottom: 0; }
.ctl label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
.ctl label b { color: var(--brand); }
.ctl input[type=range] { width: 100%; height: 28px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.ctl input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg,var(--brand),var(--accent)); }
.ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); margin-top: -10px; box-shadow: var(--shadow-sm); }
.ctl input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--brand); }
.ctl input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.seg { display: flex; gap: 6px; background: var(--bg); padding: 5px; border-radius: 11px; }
.seg button { flex: 1; border: none; background: transparent; padding: 9px 6px; border-radius: 8px; font-weight: 700; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.seg button.on { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.sim-guide { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.sim-guide b { color: var(--ink-2); }

/* ============================================================
   CREATE — Stepper
   ============================================================ */
.create-hero { background: linear-gradient(135deg, var(--brand-strong), #0e2150); color: #fff; border-radius: var(--radius-lg);
  padding: 30px 34px; margin-bottom: 20px; position: relative; overflow: hidden; }
.create-hero .ch-glow { position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb,var(--accent) 45%, transparent), transparent 70%); }
.create-hero .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb,var(--accent) 85%, white); position: relative; }
.create-hero h1 { font-size: 27px; font-weight: 800; margin: 9px 0 6px; letter-spacing: -.02em; position: relative; }
.create-hero p { font-size: 14px; color: #cdd9f2; margin: 0; max-width: 60ch; position: relative; }

.qbox { background: var(--accent-soft); border: 1px solid color-mix(in srgb,var(--accent) 30%, var(--line)); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px; }
.qbox .qlabel { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 8px; }
.qbox .qlabel svg { width: 16px; height: 16px; }
.qbox p { margin: 0; font-size: 16px; font-weight: 600; color: #5a4210; line-height: 1.5; font-family: var(--serif); }

.theme-pick { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.theme-pick h4 { margin: 0 0 14px; font-size: 15px; font-weight: 800; }
.theme-opt { display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; margin-bottom: 10px; transition: .14s; }
.theme-opt:hover { border-color: color-mix(in srgb,var(--brand) 40%, var(--line)); }
.theme-opt.on { border-color: var(--brand); background: var(--brand-soft); }
.theme-opt .radio { width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--line); flex: none; margin-top: 1px; display: grid; place-items: center; }
.theme-opt.on .radio { border-color: var(--brand); }
.theme-opt.on .radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--brand); }
.theme-opt .topt-body h5 { margin: 0 0 3px; font-size: 14.5px; font-weight: 800; }
.theme-opt .topt-body p { margin: 0; font-size: 13px; color: var(--ink-2); }

.stepper { display: grid; gap: 11px; }
.phase-label { display: flex; align-items: center; gap: 11px; margin: 14px 0 4px; }
.phase-label .pl-line { flex: 1; height: 1px; background: var(--line); }
.phase-label span { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.step.locked { opacity: .62; }
.step-head { display: flex; align-items: center; gap: 13px; padding: 15px 18px; cursor: pointer; }
.step.locked .step-head { cursor: not-allowed; }
.step-num { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 13.5px; font-weight: 800;
  background: var(--brand-soft); color: var(--brand); }
.step.done .step-num { background: var(--ok); color: #fff; }
.step-head .sh-body { flex: 1; min-width: 0; }
.step-head .sh-body h4 { margin: 0; font-size: 14.5px; font-weight: 800; }
.step-head .sh-body .kps-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.step-head .save-mini { font-size: 11px; font-weight: 700; color: var(--ok); white-space: nowrap; }
.step-head .chev { color: var(--ink-3); transition: transform .2s; flex: none; }
.step.open .chev { transform: rotate(180deg); }
.step-body { display: none; padding: 0 18px 20px; }
.step.open .step-body { display: block; }
.step-body .slabel { font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.55; }
.step-body .slabel .tmpl { display: block; background: var(--bg-2); border: 1px dashed var(--line); border-radius: 9px; padding: 10px 12px; margin-top: 8px; font-size: 13px; color: var(--ink-3); font-style: italic; }
.step .answer-ta { min-height: 96px; }
.lock-msg { display: flex; gap: 11px; align-items: center; padding: 13px 16px; background: var(--bg-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink-2); }
.lock-msg svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }

/* mini tables for CREATE */
.build-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; margin-bottom: 10px; }
.build-table th { text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); padding: 7px 9px; }
.build-table td { padding: 4px; }
.build-table input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; background: var(--bg-2); outline: none; }
.build-table input:focus { border-color: var(--brand); background: #fff; }
.build-table .rm { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink-3); cursor: pointer; }
.build-table .rm:hover { color: var(--warn); border-color: var(--warn); }
.add-row { font-size: 12.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border: 1px dashed color-mix(in srgb,var(--brand) 35%, var(--line));
  padding: 8px 13px; border-radius: 9px; cursor: pointer; }
.proc-list { display: grid; gap: 8px; margin-bottom: 10px; }
.proc-item { display: flex; align-items: center; gap: 10px; }
.proc-item .pn { width: 26px; height: 26px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.proc-item input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13.5px; background: var(--bg-2); outline: none; }

.upload-zone { border: 2px dashed var(--line); border-radius: var(--radius); padding: 26px; text-align: center; background: var(--bg-2); }
.upload-zone svg { width: 34px; height: 34px; color: var(--ink-3); }
.upload-zone h5 { margin: 10px 0 3px; font-size: 14px; font-weight: 800; }
.upload-zone p { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-3); }
.upload-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--ink-3); font-size: 12px; font-weight: 700; }
.upload-or::before, .upload-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ============================================================
   DOSEN
   ============================================================ */
.dosen-grid-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px; }
.dstat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.dstat .dlabel { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.dstat b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.dstat .dsub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.dstat .dbar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin-top: 10px; }
.dstat .dbar > i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

.alert-box { display: flex; gap: 13px; padding: 15px 18px; border-radius: var(--radius); background: #fdf0e8; border: 1px solid #f6d6c2; margin-bottom: 20px; }
.alert-box svg { width: 20px; height: 20px; color: var(--warn); flex: none; margin-top: 1px; }
.alert-box h5 { margin: 0 0 3px; font-size: 13.5px; font-weight: 800; color: #9a3412; }
.alert-box p { margin: 0; font-size: 13px; color: #9a3412; }
.alert-box b { font-weight: 800; }

.panel-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 18px; }
.panel-card .pc-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line-2); }
.panel-card .pc-head h4 { margin: 0; font-size: 15px; font-weight: 800; }
.panel-card .pc-head .grow { flex: 1; }

.monitor-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.monitor-table th, .monitor-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line-2); }
.monitor-table thead th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); background: var(--bg-2); position: sticky; top: 0; }
.monitor-table tbody tr:hover { background: var(--bg-2); }
.monitor-table .name { font-weight: 700; color: var(--ink); }
.monitor-table .nim { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.monitor-table .cell-status { text-align: center; }
.mstat-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 900; }
.mstat-dot[data-s="done"] { background: var(--ok); color: #fff; }
.mstat-dot[data-s="k2"] { background: var(--k2); color: #fff; }
.mstat-dot[data-s="k1"] { background: var(--k1); color: #fff; }
.mstat-dot[data-s="todo"] { background: var(--line); color: var(--ink-3); }
.grp-tag { font-size: 11px; font-weight: 700; color: var(--ink-3); }

/* monitoring sub-bab 3 panel */
.dosen-mon { display: grid; grid-template-columns: 230px 1fr 320px; gap: 16px; align-items: start; }
.mon-left { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: 82px; }
.mon-left .ml-head { padding: 13px 15px; border-bottom: 1px solid var(--line-2); font-size: 13px; font-weight: 800; }
.mon-left .ml-list { padding: 7px; max-height: 60vh; overflow-y: auto; }
.ml-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; }
.ml-item:hover { background: var(--bg-2); }
.ml-item.on { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.ml-item .mav { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; background: var(--k2); flex: none; }
.ml-item .clr-link { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--ink-3); }

.mon-center { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.mon-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); background: var(--bg-2); }
.mon-tab { border: none; background: transparent; padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.mon-tab.on { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.mon-answers { padding: 16px 18px; }
.mon-qa { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.mon-qa:last-child { border-bottom: none; }
.mon-qa .mq { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.mon-qa .ma { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; background: var(--bg-2); border-radius: 9px; padding: 11px 13px; }
.mon-qa .ma.k3-diff { border-left: 3px solid var(--k3); }
.flag-same { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: #e8f6ee; color: var(--ok); }
.flag-diff { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: var(--k3-soft); color: var(--k3); }

.pegangan { display: grid; gap: 11px; flex: 1; overflow-y: auto; min-height: 0; padding-right: 4px; }
.peg-box { border-radius: var(--radius); padding: 15px 16px; border: 1px solid; }
.peg-box h5 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.peg-box h5 .pdot { width: 9px; height: 9px; border-radius: 50%; }
.peg-box ul { margin: 0; padding-left: 17px; display: grid; gap: 5px; }
.peg-box li { font-size: 12.5px; line-height: 1.45; }
.peg-blue { background: var(--peg-blue-bg); border-color: color-mix(in srgb,var(--peg-blue) 25%, var(--line)); color: #1e3a6e; }
.peg-blue h5 { color: var(--peg-blue); } .peg-blue .pdot { background: var(--peg-blue); }
.peg-yellow { background: var(--peg-yellow-bg); border-color: color-mix(in srgb,var(--peg-yellow) 25%, var(--line)); color: #7a5310; }
.peg-yellow h5 { color: var(--peg-yellow); } .peg-yellow .pdot { background: var(--peg-yellow); }
.peg-green { background: var(--peg-green-bg); border-color: color-mix(in srgb,var(--peg-green) 25%, var(--line)); color: #14532d; }
.peg-green h5 { color: var(--peg-green); } .peg-green .pdot { background: var(--peg-green); }
.peg-pink { background: var(--peg-pink-bg); border-color: color-mix(in srgb,var(--peg-pink) 25%, var(--line)); color: #831843; }
.peg-pink h5 { color: var(--peg-pink); } .peg-pink .pdot { background: var(--peg-pink); }

.mon-right { display: flex; flex-direction: column; position: sticky; top: 82px; max-height: calc(100vh - 100px); gap: 11px; }
.clarify-bar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; margin-top: 0; flex-shrink: 0; }
.clarify-bar .cb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.clarify-bar h5 { margin: 0; font-size: 14px; font-weight: 800; }
.clarify-bar p { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-3); }
.clarify-state { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.clarify-state.pending { background: var(--accent-soft); color: var(--accent-strong); }
.clarify-state.done { background: #e8f6ee; color: var(--ok); }

/* ============================================================
   FLOATING PROTOTYPE NAVIGATOR
   ============================================================ */
.proto-fab { position: fixed; left: 20px; bottom: 20px; z-index: 70; display: flex; align-items: center; gap: 9px;
  padding: 11px 16px 11px 13px; border-radius: 999px; border: none; cursor: pointer; color: #fff; font-weight: 800; font-size: 13px;
  background: linear-gradient(150deg, #1f2937, #0f172a); box-shadow: var(--shadow-lg); }
.proto-fab svg { width: 17px; height: 17px; }
.proto-menu { position: fixed; left: 20px; bottom: 72px; z-index: 71; width: 290px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 12px; display: none; animation: screen-in .2s ease;
  max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; }
.proto-menu.open { display: block; }
.proto-menu .pm-label { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px 4px; }
.proto-link { display: flex; align-items: center; gap: 10px; padding: 9px 9px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.proto-link:hover { background: var(--bg-2); color: var(--ink); }
.proto-link .pl-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--bg); display: grid; place-items: center; color: var(--brand); flex: none; }
.proto-link .pl-ic svg { width: 15px; height: 15px; }
.proto-link.on { background: var(--brand-soft); color: var(--brand); }
.proto-divider { height: 1px; background: var(--line-2); margin: 8px 4px; }

/* Confirm dialog */
.modal-scrim { position: fixed; inset: 0; z-index: 95; background: rgba(13,22,45,.5); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-scrim.open { display: flex; }
.modal { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 420px; width: 100%; padding: 26px; animation: screen-in .25s ease; }
.modal .m-ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 14px; }
.modal h4 { margin: 0 0 7px; font-size: 18px; font-weight: 800; }
.modal p { margin: 0 0 20px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* toast */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 99; display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; background: #14223b; color: #fff; padding: 12px 18px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg); animation: toast-in .3s ease; }
.toast svg { width: 18px; height: 18px; color: #4ade80; flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   STATE MACHINE — sidebar 8-state indicators (3A.1)
   ============================================================ */
.st-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; position: relative; border: 2px solid var(--line);
  background: conic-gradient(var(--stc, #cbd5e1) var(--pct, 0%), #fff 0); transition: .2s; }
.st-dot[data-st="belum_dibuka"] { --stc: #cbd5e1; background: #fff; border-style: dashed; }
.st-dot[data-st="read_aktif"]   { --stc: var(--read); border-color: var(--read); }
.st-dot[data-st="kotak1_draft"] { --stc: var(--accent); border-color: var(--accent); }
.st-dot[data-st="kotak1_submitted"] { --stc: var(--k1); border-color: var(--k1); }
.st-dot[data-st="kotak2_unlocked"]  { --stc: var(--k2); border-color: var(--k2); }
.st-dot[data-st="kotak2_submitted"] { --stc: var(--k2); border-color: var(--k2); }
.st-dot[data-st="kotak3_unlocked"]  { --stc: var(--k3); border-color: var(--k3); }
.st-dot[data-st="selesai"] { background: var(--ok); border-color: var(--ok); }
.st-dot[data-st="selesai"]::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 900; }
.st-dot[data-st="kotak2_unlocked"], .st-dot[data-st="kotak3_unlocked"] { animation: dotpulse 2s ease-in-out infinite; }
@keyframes dotpulse { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--stc) 30%, transparent); } }

.subnav-item .state-pip { font-size: 10px; font-weight: 800; color: var(--ink-3); background: var(--bg); border-radius: 999px;
  padding: 2px 7px; letter-spacing: .02em; flex: none; }
.subnav-item.on .state-pip { background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); }

.subnav-legend { margin: 4px 8px 8px; border-top: 1px dashed var(--line); }
.subnav-legend summary { list-style: none; cursor: pointer; padding: 11px 4px 9px; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.subnav-legend summary::-webkit-details-marker { display: none; }
.subnav-legend summary::after { content: "▾"; margin-left: auto; transition: .2s; }
.subnav-legend[open] summary::after { transform: rotate(180deg); }
.subnav-legend ol { list-style: none; margin: 0 0 6px; padding: 2px 4px; display: grid; gap: 7px; counter-reset: stp; }
.subnav-legend li { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); counter-increment: stp; }
.subnav-legend li::before { content: counter(stp); width: 15px; height: 15px; border-radius: 5px; background: var(--bg);
  color: var(--ink-3); font-size: 9px; font-weight: 800; display: grid; place-items: center; flex: none; }

/* ============================================================
   WAIT OVERLAY — "Menunggu anggota kelompok" (K2 locked, 3A.1 state 4)
   ============================================================ */
.wait-overlay { position: fixed; inset: 0; z-index: 92; display: none; align-items: center; justify-content: center; padding: 24px; }
.wait-overlay.open { display: flex; }
.wait-scrim { position: absolute; inset: 0; background: rgba(13,22,45,.5); backdrop-filter: blur(4px); }
.wait-card { position: relative; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-width: 460px; width: 100%; padding: 28px; text-align: center; animation: screen-in .28s ease; }
.wait-anim { width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 22px; display: grid; place-items: center;
  background: var(--k2-soft); color: var(--k2); position: relative; }
.wait-anim svg { width: 34px; height: 34px; }
.wait-anim::before, .wait-anim::after { content: ""; position: absolute; inset: 0; border-radius: 22px; border: 2px solid var(--k2);
  opacity: 0; animation: waitring 2.4s ease-out infinite; }
.wait-anim::after { animation-delay: 1.2s; }
@keyframes waitring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } }
.wait-card h3 { margin: 0 0 7px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.wait-card > p { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.wait-progress { font-size: 12.5px; font-weight: 700; color: var(--k2); background: var(--k2-soft); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 14px; }
.wait-members { display: grid; gap: 8px; text-align: left; margin-bottom: 18px; }
.wm-row { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 11px; background: var(--bg-2);
  border: 1px solid transparent; }
.wm-row.waiting { background: var(--accent-soft); border-color: #f3e2b8; }
.wm-row .mav { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  font-size: 11px; font-weight: 800; background: var(--k2); flex: none; }
.wm-row .mav.no { background: #cbd5e1; }
.wm-name { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wm-stat { font-size: 12px; font-weight: 800; }
.wm-stat.ok { color: var(--ok); }
.wm-stat.no { color: var(--accent-strong); }
.wait-foot { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }

/* appbar network chip */
.net-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; padding: 6px 12px;
  border-radius: 999px; cursor: pointer; margin-right: 4px; }
.net-chip[data-state="off"] { background: #fdf0e8; color: #9a3412; border: 1px solid #f6d6c2; }
.net-chip[data-state="pending"] { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid #f3e2b8; }
.net-chip .nc-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: dotpulse2 1.3s infinite; }
@keyframes dotpulse2 { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ============================================================
   DOSEN — Override Kotak 2 (emergency, 3A.5)
   ============================================================ */
.override-strip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 16px 18px; margin-bottom: 20px; }
.ovr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.ovr-head svg { width: 18px; height: 18px; color: #be123c; flex: none; }
.ovr-head h4 { margin: 0; font-size: 14px; font-weight: 800; }
.ovr-card { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 12px; background: #fdf0e8;
  border: 1px solid #f6d6c2; margin-bottom: 9px; }
.ovr-card.done { background: #e8f6ee; border-color: #c2e8d0; }
.ovr-card .ovr-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: #fff; color: #be123c; font-size: 16px; font-weight: 900; }
.ovr-card.done .ovr-ic { color: var(--ok); }
.ovr-main { flex: 1; min-width: 0; }
.ovr-main h5 { margin: 0 0 2px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.ovr-main p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.ovr-done-tag { font-size: 11.5px; font-weight: 800; color: var(--ok); background: #fff; border-radius: 999px; padding: 5px 11px; }
.ovr-empty { font-size: 13px; color: var(--ink-3); padding: 8px 2px; }
.ovr-log { margin-top: 13px; border-top: 1px dashed var(--line); padding-top: 12px; }
.ovr-log-h { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
.ovr-log-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 12.5px; border-bottom: 1px solid var(--line-2); }
.ovr-log-row:last-child { border-bottom: none; }
.oll-grp { font-weight: 800; color: var(--ink); flex: none; }
.oll-reason { flex: 1; color: var(--ink-2); }
.oll-meta { font-size: 11px; color: var(--ink-3); font-weight: 600; flex: none; }

.btn-danger { background: #be123c; color: #fff; border: 1px solid #be123c; flex: none; }
.btn-danger:hover { background: #9f1239; border-color: #9f1239; }

/* override + recovery dialogs (reuse .modal-scrim / .modal) */
.modal.override-modal, .modal.recovery-modal { max-width: 460px; text-align: left; }
.modal .m-ic.ovr { background: #fdecef; color: #be123c; }
.modal .m-ic.rec { background: var(--k1-soft); color: var(--k1); }
.ovr-field { margin: 4px 0 14px; }
.ovr-field label { display: block; font-size: 12px; font-weight: 800; color: var(--ink-2); margin-bottom: 7px; }
.ovr-field textarea { width: 100%; min-height: 82px; resize: vertical; border: 1.5px solid var(--line); border-radius: 11px;
  padding: 11px 13px; font-family: var(--font); font-size: 13.5px; color: var(--ink); outline: none; }
.ovr-field textarea:focus { border-color: var(--brand); }
.ovr-ack { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
  background: var(--bg-2); padding: 12px 13px; border-radius: 11px; margin-bottom: 20px; cursor: pointer; }
.ovr-ack input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: #be123c; }
.rec-saved { display: flex; align-items: center; gap: 11px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 20px; }
.rec-saved .rs-ic { width: 34px; height: 34px; border-radius: 9px; background: #e8f6ee; color: var(--ok);
  display: grid; place-items: center; flex: none; }
.rec-saved .rs-ic svg { width: 18px; height: 18px; }
.rec-saved .rs-txt b { display: block; font-size: 13px; font-weight: 800; color: var(--ink); }
.rec-saved .rs-txt span { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }

/* ============================================================
   DOSEN — PENILAIAN EKK (split-screen rubric)
   ============================================================ */
.pen-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.pen-progress { min-width: 240px; }
.pp-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.pp-row b { font-size: 15px; color: var(--brand); }
.pp-bar { height: 7px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.pp-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 999px; transition: width .4s; }

.pen-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.pen-left { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; }
.pen-studentbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.psb-nav { display: flex; align-items: center; gap: 12px; }
.psb-arrow { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 18px; color: var(--ink-2); line-height: 1; }
.psb-arrow:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); }
.psb-arrow[disabled] { opacity: .4; cursor: not-allowed; }
.psb-id { display: flex; align-items: center; gap: 10px; }
.psb-id b { font-size: 15px; font-weight: 800; display: block; }
.psb-id span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.psb-status { font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.psb-status.done { background: #e8f6ee; color: var(--ok); }
.psb-status.pending { background: #fdf0e8; color: var(--warn); }
.mav { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; background: linear-gradient(150deg, var(--brand), var(--brand-strong)); }
.mav.no { background: #cbd5e1; }
.pen-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.pen-chip { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.pen-chip .mav { width: 24px; height: 24px; font-size: 10px; }
.pen-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

.pen-qblock { padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.pen-qblock:last-child { border-bottom: none; padding-bottom: 0; }
.pen-qhead { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.pen-qtext { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 13px; line-height: 1.5; }
.pen-ans { margin-bottom: 10px; }
.pa-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.pa-body { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); background: var(--bg-2); border-radius: 10px; padding: 12px 14px; }
.pen-ans.final .pa-body { background: var(--k3-soft); color: #3b2a66; border-left: 3px solid var(--k3); }

.pen-right { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; position: sticky; top: 82px; }
.rub-head h4 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.rub-head p { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.rub-q { margin-bottom: 16px; }
.rub-qh { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 800; color: var(--ink); margin-bottom: 9px; }
.rub-score { font-size: 12px; font-weight: 800; color: var(--brand); background: var(--brand-soft); border-radius: 7px; padding: 3px 9px; }
.rub-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 7px; cursor: pointer; transition: .12s; }
.rub-item:hover { border-color: var(--brand); }
.rub-item.on { border-color: var(--ok); background: #f0faf4; }
.rub-item input { margin-top: 1px; width: 17px; height: 17px; flex: none; accent-color: var(--ok); pointer-events: none; }
.ri-txt { flex: 1; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.rub-item.on .ri-txt { color: var(--ink); }
.lvl-chip { font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 6px; flex: none; align-self: flex-start; white-space: nowrap; }
.lvl-makro { background: #e9f7ee; color: #15803d; }
.lvl-submikro { background: #eef4fd; color: #2563b8; }
.lvl-simbolik { background: #f2ecfe; color: #7c3aed; }
.rub-total { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: 11px; background: var(--brand-softer); border: 1px solid var(--line); margin: 4px 0 14px; }
.rub-total span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.rub-total b { font-size: 22px; font-weight: 800; color: var(--brand); }
.rub-total b small { font-size: 14px; color: var(--ink-3); font-weight: 700; }
.rub-note label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.rub-note textarea { width: 100%; min-height: 70px; resize: vertical; border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 13px; font-family: var(--font); font-size: 13px; color: var(--ink); outline: none; }
.rub-note textarea:focus { border-color: var(--brand); }
.rub-foot { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.rub-foot #penSave { flex: 1; }

/* ============================================================
   DOSEN — KINERJA HEATMAP
   ============================================================ */
.kin-tabs { display: inline-flex; gap: 6px; background: var(--bg); padding: 5px; border-radius: 12px; margin-bottom: 18px; }
.kin-tab { border: none; background: none; padding: 9px 18px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.kin-tab.on { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.kin-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.kin-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.kin-sel { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.kin-sel select { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.kps-note { font-size: 12.5px; color: var(--ink-3); max-width: 60ch; line-height: 1.45; }
.heat-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 12px; }
.hl-chip { display: inline-flex; align-items: center; gap: 6px; }
.hsw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.hsw-lo { background: rgba(220,38,38,.55); }
.hsw-mid { background: rgba(217,119,6,.6); }
.hsw-hi { background: rgba(21,128,61,.7); }
.heat-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.heat-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.heat-table th, .heat-table td { padding: 9px 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.heat-table thead th { font-size: 11px; font-weight: 800; color: var(--ink-3); background: var(--bg-2); position: sticky; top: 0; z-index: 2; }
.heat-table .hsticky { position: sticky; left: 0; z-index: 3; background: #fff; text-align: left; min-width: 168px; box-shadow: 1px 0 0 var(--line-2); }
.heat-table thead .hsticky { z-index: 4; background: var(--bg-2); }
.heat-table .hname b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.heat-table .hname span { font-size: 11px; color: var(--ink-3); font-weight: 700; }
.heat-table .hcell { font-weight: 800; font-variant-numeric: tabular-nums; }
.heat-table .havg { font-weight: 900; box-shadow: inset 2px 0 0 var(--line); }
.heat-table thead .havg { box-shadow: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .dosen-mon { grid-template-columns: 1fr; }
  .mon-left, .pegangan, .mon-right { position: static; }
  .mon-right { max-height: none; }
  .pegangan { grid-template-columns: 1fr 1fr; flex: initial; overflow-y: visible; }
  .dosen-grid-stats { grid-template-columns: repeat(2,1fr); }
  .pen-split { grid-template-columns: 1fr; }
  .pen-right { position: static; }
}
@media (max-width: 920px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .meeting-layout { grid-template-columns: 1fr; }
  .subnav { position: static; display: none; }
  .subnav-mobile { display: block; margin-bottom: 16px; }
  .subnav-mobile .sm-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .subnav-mobile .sm-tab { white-space: nowrap; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
    font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; gap: 8px; flex: none; }
  .subnav-mobile .sm-tab.on { background: var(--brand); color: #fff; border-color: var(--brand); }
}
@media (max-width: 760px) {
  .wrap { padding: 20px 16px 110px; }
  .meet-grid { grid-template-columns: 1fr; }
  .test-strip { grid-template-columns: 1fr; }
  .sym-grid { grid-template-columns: 1fr; }
  .pegangan { grid-template-columns: 1fr; }
  .dosen-grid-stats { grid-template-columns: 1fr 1fr; }
  .welcome-row { flex-direction: column; align-items: flex-start; }
  .consent-head, .consent-body { padding-left: 22px; padding-right: 22px; }
  .crumbs { display: none; }
  .sim-shell { width: 100%; }
  .create-hero { padding: 22px; }
  h1.page-title { font-size: 24px; }
  .section-head { padding: 15px 16px; }
  .section-body { padding: 16px; }
  .proto-menu { width: calc(100vw - 40px); }
  .monitor-wrap { overflow-x: auto; }
  .monitor-table { min-width: 640px; }
}
@media (max-width: 420px) {
  .dosen-grid-stats { grid-template-columns: 1fr; }
  .role-chip .rc-text { display: none; }
}