/* =====================================================================
   EDUGAME — Antarmuka Guru (dashboard, wizard, editor, pengaturan)
   Identitas "Cosmic Intelligence" Masri.Cloud, sejalan dengan landing page.
   ===================================================================== */
:root{
  --bg:#050810; --bg2:#0a0f1f; --ink:#eef2ff; --ink2:#a6b0d6; --ink3:#6f7aa6;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.08);
  --cyan:#00d4ff; --indigo:#6366f1; --violet:#8b5cf6; --amber:#ffb547;
  --green:#22e3a0; --pink:#ff5d8f; --red:#ff6b6b;
  --grad:linear-gradient(120deg,#6366f1 0%,#00d4ff 100%);
  --r:18px; --r-s:12px; --r-l:26px;
  --head:"Syne","Segoe UI",system-ui,sans-serif;
  --body:"DM Sans","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --tap:46px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:var(--body); background:var(--bg); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer }
img{ max-width:100%; display:block }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap }

/* Aurora latar */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 12% -8%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(52vw 44vh at 92% 4%, rgba(0,212,255,.16), transparent 62%),
    radial-gradient(48vw 40vh at 50% 108%, rgba(139,92,246,.14), transparent 60%);
}

/* ── Navigasi ─────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:14px;
  padding:12px clamp(14px,3vw,30px);
  background:rgba(5,8,16,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--head); font-weight:800;
  letter-spacing:-.01em }
.brand i{ width:32px; height:32px; border-radius:9px; background:var(--grad);
  display:grid; place-items:center; font-style:normal; font-size:14px; color:#fff }
.nav-links{ display:flex; gap:4px; margin-left:auto; align-items:center }
.nav-links a{ padding:9px 14px; border-radius:10px; font-size:.9rem; color:var(--ink2);
  font-weight:500; transition:background .18s, color .18s }
.nav-links a:hover{ background:var(--glass2); color:var(--ink) }
.nav-links a[aria-current="page"]{ background:var(--glass2); color:var(--ink); font-weight:700 }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--glass2);
  border:1px solid var(--line2); object-fit:cover }

/* ── Tata letak ───────────────────────────────────────────────────── */
.wrap{ max-width:1180px; margin:0 auto; padding:clamp(20px,3.4vw,40px) clamp(14px,3vw,30px) 72px }
.wrap-narrow{ max-width:820px }
h1{ font-family:var(--head); font-size:clamp(1.55rem,3.4vw,2.3rem); font-weight:800;
  letter-spacing:-.025em; line-height:1.15 }
h2{ font-family:var(--head); font-size:clamp(1.1rem,2vw,1.35rem); font-weight:700;
  letter-spacing:-.015em }
h3{ font-size:1rem; font-weight:700 }
.lead{ color:var(--ink2); max-width:68ch; margin-top:8px }
.muted{ color:var(--ink3); font-size:.88rem }
.row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.between{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  flex-wrap:wrap }
.stack{ display:grid; gap:clamp(14px,2vw,20px) }
.grid{ display:grid; gap:clamp(14px,2vw,20px) }
.g2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)) }
.g3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)) }
.mt{ margin-top:clamp(20px,3vw,32px) }
.mb{ margin-bottom:clamp(14px,2vw,20px) }

/* ── Kartu ────────────────────────────────────────────────────────── */
.card{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(16px,2.4vw,24px); backdrop-filter:blur(8px);
}
.card.hi{ background:var(--glass2); border-color:var(--line2) }
.card-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px }

/* ── Tombol ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 20px; border-radius:12px;
  font-weight:700; font-size:.94rem; white-space:nowrap;
  background:var(--glass2); color:var(--ink); border:1px solid var(--line2);
  transition:transform .18s var(--ease), background .18s, border-color .18s, opacity .18s;
}
.btn:hover{ background:rgba(255,255,255,.13) }
.btn:active{ transform:translateY(1px) }
.btn:disabled{ opacity:.45; cursor:not-allowed }
.btn-glow{ background:var(--grad); border-color:transparent; color:#fff;
  box-shadow:0 6px 24px rgba(99,102,241,.32) }
.btn-glow:hover{ filter:brightness(1.08) }
.btn-ghost{ background:transparent }
.btn-danger{ border-color:rgba(255,107,107,.4); color:#ffb4b4 }
.btn-danger:hover{ background:rgba(255,107,107,.14) }
.btn-sm{ min-height:36px; padding:0 13px; font-size:.83rem; border-radius:10px }

/* ── Formulir ─────────────────────────────────────────────────────── */
label{ display:block; font-size:.84rem; font-weight:700; color:var(--ink2);
  margin-bottom:6px; letter-spacing:.01em }
.inp, select, textarea.inp{
  width:100%; min-height:var(--tap); padding:11px 14px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid var(--line2);
  color:var(--ink); font:inherit; font-size:.94rem;
  transition:border-color .18s, background .18s;
}
.inp:focus, select:focus, textarea.inp:focus{ border-color:var(--cyan); outline:none;
  background:rgba(255,255,255,.08) }
.inp::placeholder{ color:var(--ink3) }
textarea.inp{ resize:vertical; min-height:88px; line-height:1.5 }
select{ appearance:none; background-image:
  linear-gradient(45deg,transparent 50%,var(--ink3) 50%),
  linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:38px }
.field{ margin-bottom:16px }
.hint{ font-size:.8rem; color:var(--ink3); margin-top:5px }
.err{ font-size:.82rem; color:#ffb4b4; margin-top:5px }

/* Chip pilihan */
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  min-height:38px; padding:0 14px; border-radius:999px; font-size:.86rem; font-weight:600;
  background:var(--glass); border:1px solid var(--line); color:var(--ink2);
  display:inline-flex; align-items:center; gap:6px;
  transition:border-color .18s, background .18s, color .18s;
}
.chip:hover{ border-color:var(--line2); color:var(--ink) }
.chip[aria-pressed="true"]{ background:rgba(99,102,241,.2); border-color:var(--indigo);
  color:var(--ink) }
.tag{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:.74rem; font-weight:700; background:var(--glass2); color:var(--ink2);
  letter-spacing:.02em }
.tag.ok{ background:rgba(34,227,160,.16); color:#7ff0c6 }
.tag.no{ background:rgba(255,107,107,.16); color:#ffb4b4 }
.tag.warn{ background:rgba(255,181,71,.16); color:#ffd79a }
.tag.run{ background:rgba(0,212,255,.16); color:#8ee9ff }

/* ── Kuota ────────────────────────────────────────────────────────── */
.quota{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.quota-n{ font-family:var(--head); font-size:2.1rem; font-weight:800; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent }

/* ── Daftar media ─────────────────────────────────────────────────── */
.m-card{ display:flex; flex-direction:column; gap:12px }
.m-top{ display:flex; align-items:flex-start; gap:10px; justify-content:space-between }
.m-title{ font-family:var(--head); font-weight:700; font-size:1.02rem; line-height:1.3 }
.m-meta{ display:flex; flex-wrap:wrap; gap:6px }
.m-acts{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:4px }

/* ── Langkah wizard ───────────────────────────────────────────────── */
.steps{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap }
.step{ display:flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line); font-size:.86rem;
  font-weight:600; color:var(--ink3) }
.step b{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--glass2); font-size:.78rem }
.step[aria-current="step"]{ border-color:var(--indigo); background:rgba(99,102,241,.16);
  color:var(--ink) }
.step[data-done="1"]{ border-color:rgba(34,227,160,.4); color:#7ff0c6 }
.pane{ display:none }
.pane[data-on="1"]{ display:block; animation:up .35s var(--ease) both }
@keyframes up{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

/* ── Editor ───────────────────────────────────────────────────────── */
.ed{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
.ed-list{ display:grid; gap:10px }
.ed-scr{ border:1px solid var(--line); border-radius:var(--r-s); background:var(--glass);
  overflow:hidden }
.ed-scr-h{ display:flex; align-items:center; gap:9px; padding:11px 14px; cursor:pointer;
  width:100%; text-align:left }
.ed-scr-h:hover{ background:var(--glass2) }
.ed-scr-b{ display:none; padding:4px 14px 16px; border-top:1px solid var(--line) }
.ed-scr[data-open="1"] .ed-scr-b{ display:block }
.ed-num{ width:24px; height:24px; border-radius:7px; background:var(--glass2);
  display:grid; place-items:center; font-size:.76rem; font-weight:700; flex:0 0 auto }
.ed-mv{ display:flex; gap:4px; margin-left:auto; flex:0 0 auto }
.ed-mv button{ width:30px; height:30px; border-radius:8px; background:var(--glass2);
  font-size:.72rem; display:grid; place-items:center }
.ed-mv button:hover{ background:rgba(255,255,255,.16) }
.ed-sub{ border-left:2px solid var(--line2); padding-left:12px; margin:12px 0 }
.ed-prev{ position:sticky; top:74px; height:calc(100vh - 100px); display:flex;
  flex-direction:column; gap:10px }
.ed-prev iframe{ flex:1; width:100%; border:1px solid var(--line2); border-radius:var(--r-s);
  background:#fff }
@media (max-width:980px){
  .ed{ grid-template-columns:1fr }
  .ed-prev{ position:static; height:70vh }
}

/* ── Modal & toast ────────────────────────────────────────────────── */
.modal{ position:fixed; inset:0; z-index:90; display:none; align-items:center;
  justify-content:center; padding:16px; background:rgba(5,8,16,.76);
  backdrop-filter:blur(4px) }
.modal[data-open="1"]{ display:flex }
.modal-box{ background:#0c1226; border:1px solid var(--line2); border-radius:var(--r-l);
  width:min(560px,100%); max-height:86vh; overflow:auto; padding:clamp(18px,3vw,28px);
  animation:up .3s var(--ease) both }
.toasts{ position:fixed; z-index:95; right:16px; bottom:16px; display:flex;
  flex-direction:column; gap:9px; width:min(360px,calc(100vw - 32px)) }
.toast{ padding:12px 16px; border-radius:12px; font-size:.9rem; font-weight:600;
  background:#101832; border:1px solid var(--line2); box-shadow:0 10px 34px rgba(0,0,0,.42);
  animation:up .28s var(--ease) both }
.toast.ok{ border-color:rgba(34,227,160,.42) }
.toast.no{ border-color:rgba(255,107,107,.42) }

/* ── Kondisi kosong / memuat ──────────────────────────────────────── */
.empty{ text-align:center; padding:clamp(28px,6vw,60px) 20px }
.empty-ico{ font-size:2.6rem; margin-bottom:12px }
.spin{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line2);
  border-top-color:var(--cyan); animation:sp .7s linear infinite; display:inline-block }
@keyframes sp{ to{ transform:rotate(360deg) } }
.skel{ background:linear-gradient(90deg,var(--glass),var(--glass2),var(--glass));
  background-size:200% 100%; animation:sk 1.3s linear infinite; border-radius:10px;
  height:14px }
@keyframes sk{ to{ background-position:-200% 0 } }

@media (max-width:640px){
  .nav-links a{ padding:8px 10px; font-size:.84rem }
  .nav-links a.hide-s{ display:none }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important }
}

/* ── MODE TERANG ─────────────────────────────────────────────────────
   Dipasang /assets/tema.js lewat <html data-tema="terang">. Mode gelap tetap
   identitas bawaan; terang dipakai bila guru memilihnya atau perangkatnya terang. */
:root{ color-scheme:dark }
:root[data-tema="terang"]{
  color-scheme:light;
  --bg:#f4f6fb; --bg2:#ffffff; --ink:#0f172a; --ink2:#475569; --ink3:#5b6b82;
  --line:rgba(15,23,42,.1); --line2:rgba(15,23,42,.2);
  --glass:rgba(255,255,255,.85); --glass2:rgba(15,23,42,.05);
  --cyan:#0369a1; --green:#047857; --amber:#b45309; --red:#dc2626; --pink:#be185d;
}
:root[data-tema="terang"] .nav{ background:rgba(255,255,255,.86) }
:root[data-tema="terang"] .btn:hover{ background:rgba(15,23,42,.08) }
:root[data-tema="terang"] .btn-glow{ color:#fff }
:root[data-tema="terang"] .btn-danger{ border-color:rgba(220,38,38,.45); color:#b91c1c }
:root[data-tema="terang"] .inp{ background:#fff }
:root[data-tema="terang"] .err{ color:#b91c1c }
:root[data-tema="terang"] .tag.ok{ background:rgba(4,120,87,.12); color:#047857 }
:root[data-tema="terang"] .tag.no{ background:rgba(220,38,38,.1); color:#b91c1c }
:root[data-tema="terang"] .step[data-done="1"]{ border-color:rgba(4,120,87,.45); color:#047857 }
:root[data-tema="terang"] .ed-mv button:hover{ background:rgba(15,23,42,.08) }
:root[data-tema="terang"] .modal{ background:rgba(15,23,42,.45) }
:root[data-tema="terang"] .card, :root[data-tema="terang"] .modal-box{ box-shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06) }
:root[data-tema="terang"] .modal-box{ background:#fff }
:root[data-tema="terang"] .tag.warn{ background:rgba(180,83,9,.12); color:#92400e }
:root[data-tema="terang"] .tag.run{ background:rgba(3,105,161,.1); color:#075985 }
:root[data-tema="terang"] .toast{ background:#fff; box-shadow:0 10px 34px rgba(15,23,42,.16) }
:root[data-tema="terang"] .toast.ok{ border-color:rgba(4,120,87,.45) }
:root[data-tema="terang"] .toast.no{ border-color:rgba(220,38,38,.45) }