:root{
  --bg:#0f172a; --card:#fff; --ink:#0f172a; --muted:#64748b;
  --brand:#1d4ed8; --brand2:#0ea5e9; --line:#e2e8f0;
  --ok:#16a34a; --bad:#dc2626; --warn:#b45309;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  background:#f1f5f9;line-height:1.55;-webkit-text-size-adjust:100%}
.wrap{max-width:920px;margin:0 auto;padding:0 16px}
a{color:var(--brand)}

header.top{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  padding:24px 0 20px;border-radius:0 0 22px 22px;box-shadow:0 10px 30px rgba(2,8,23,.18)}
header.top .brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px}
header.top .logo{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:20px}
header.top p{margin:9px 0 0;opacity:.95;font-size:14px;max-width:62ch}

nav{position:sticky;top:0;z-index:9;background:#ffffffe6;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;gap:6px;overflow-x:auto;padding:10px 16px}
nav a{white-space:nowrap;text-decoration:none;font-weight:600;font-size:14px;padding:7px 12px;
  border-radius:999px;background:#eff6ff;color:var(--brand)}
nav a.active{background:var(--brand);color:#fff}

section{margin:20px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;
  box-shadow:0 6px 18px rgba(2,8,23,.05);margin-bottom:16px}
h1{font-size:22px;margin:4px 0 2px}
h2{font-size:19px;margin:0 0 6px}
.sub{color:var(--muted);font-size:14px;margin:0 0 14px}
.badge{display:inline-block;background:#ecfeff;color:#0369a1;border:1px solid #bae6fd;
  font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:10px}

.mode-banner{font-size:13px;font-weight:600;padding:9px 14px;border-radius:12px;margin:14px 0;border:1px solid}
.mode-banner.local{background:#fffbeb;border-color:#fcd34d;color:var(--warn)}
.mode-banner.supabase{background:#f0fdf4;border-color:#86efac;color:var(--ok)}

.field{margin:0 0 13px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;border:1px solid var(--line);
  border-radius:11px;font-size:15px;font-family:inherit;background:#fff}
.field input[type=file]{padding:10px}
.hint{font-size:12.5px;color:var(--muted);margin-top:5px}

.btn{display:inline-block;background:var(--brand);color:#fff;border:none;border-radius:12px;
  padding:13px 18px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none}
.btn.alt{background:#0f766e}
.btn.small{padding:9px 13px;font-size:13.5px;border-radius:10px}
.btn:disabled{opacity:.55;cursor:not-allowed}

.msg{padding:12px 14px;border-radius:12px;font-size:14px;margin-top:12px;display:none}
.msg.show{display:block}
.msg.ok{background:#f0fdf4;border:1px solid #86efac;color:var(--ok)}
.msg.err{background:#fef2f2;border:1px solid #fca5a5;color:var(--bad)}

.gallery{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.gallery{grid-template-columns:1fr 1fr}}
.karya{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 5px 14px rgba(2,8,23,.05)}
.karya model-viewer{width:100%;height:240px;background:#e8eef6;display:block}
.karya-info{padding:12px 14px}
.karya-info b{display:block;font-size:15px}
.karya-info>span{display:block;font-size:13px;color:var(--muted);margin:2px 0 8px}
.nilai-badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:#f0fdf4;color:var(--ok);border:1px solid #86efac}
.nilai-badge.belum{background:#f8fafc;color:var(--muted);border-color:var(--line)}
.ar-btn{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:var(--brand);
  color:#fff;border:none;border-radius:999px;padding:9px 15px;font-weight:700;font-size:13px;
  box-shadow:0 8px 20px rgba(29,78,216,.4);cursor:pointer}

.grader{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.grader input[type=number]{width:120px}
.grader input[type=text]{flex:1;min-width:140px}
.grader input{padding:9px 11px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.save-status{font-size:12.5px;font-weight:700}
.empty{text-align:center;color:var(--muted);padding:30px 10px;font-size:14.5px}

footer{color:var(--muted);font-size:12.5px;text-align:center;padding:26px 16px 40px}
.loading{text-align:center;color:var(--muted);padding:24px;font-size:14px}

/* ====== AKUN / LOGIN ====== */
.auth-wrap{max-width:460px;margin:0 auto;padding:0 16px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;
  box-shadow:0 12px 34px rgba(2,8,23,.10);margin:18px 0}
.auth-card h1{font-size:21px;margin:0 0 2px}
.seg{display:flex;gap:6px;background:#f1f5f9;border-radius:12px;padding:5px;margin:4px 0 16px}
.seg button{flex:1;border:none;background:transparent;padding:10px;border-radius:9px;font-weight:700;
  font-size:14px;color:var(--muted);cursor:pointer}
.seg button.active{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(2,8,23,.08)}
.linkrow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:14px}
.linkbtn{background:none;border:none;color:var(--brand);font-weight:600;font-size:13.5px;
  cursor:pointer;padding:0;text-decoration:underline}
.fold{display:none;border-top:1px dashed var(--line);margin-top:14px;padding-top:14px}
.fold.open{display:block}
.fold h3{font-size:15px;margin:0 0 4px}
.btn.block{display:block;width:100%;text-align:center}
.btn.ghost{background:#eff6ff;color:var(--brand)}
.tiny{font-size:12.5px;color:var(--muted);margin-top:8px}
.role-pick{display:flex;gap:8px;margin-bottom:13px}
.role-pick label{flex:1;border:1px solid var(--line);border-radius:11px;padding:11px;font-size:14px;
  font-weight:600;text-align:center;cursor:pointer;background:#fff}
.role-pick input{display:none}
.role-pick input:checked + span{color:var(--brand)}
.role-pick label:has(input:checked){border-color:var(--brand);background:#eff6ff}

/* ====== USER BAR (sesudah login) ====== */
.userbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:10px 14px;margin:14px 0}
.userbar .who{font-weight:700;font-size:14px}
.userbar .pill{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:#eff6ff;color:var(--brand)}
.userbar .pill.guru{background:#f5f3ff;color:#7c3aed}
.userbar .spacer{flex:1}

/* ====== HERO TABS (dashboard) ====== */
.tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px}
.tabs button{white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:999px;cursor:pointer}
.tabs button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.hero{background:linear-gradient(135deg,#eef4ff,#e6f7ff);border:1px solid var(--line);border-radius:18px;
  padding:18px;display:grid;grid-template-columns:1fr;gap:12px;align-items:center}
@media(min-width:640px){.hero{grid-template-columns:1.05fr .95fr}}
.hero-illust{background:#fff;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;
  min-height:200px;overflow:hidden}
.hero-illust svg{width:100%;height:auto;display:block}
.hero h2{font-size:20px;margin:0 0 6px}
.hero p{font-size:14px;color:#334155;margin:0 0 14px}
.panel{display:none}
.panel.active{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.panel.active{grid-template-columns:1.05fr .95fr}}

/* ====== FEATURE GRID ====== */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:640px){.feat{grid-template-columns:repeat(3,1fr)}}
.feat a{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:13px;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px}
.feat a .fi{width:38px;height:38px;border-radius:10px;background:#eff6ff;display:grid;place-items:center;font-size:19px;flex:none}
.feat a.guru .fi{background:#f5f3ff}

/* ====== DAFTAR AKUN (panel guru) ====== */
.acct{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;margin-bottom:9px;background:#fff}
.acct .info{flex:1;min-width:150px}
.acct .info b{display:block;font-size:14.5px}
.acct .info span{font-size:12.5px;color:var(--muted)}
.acct .tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#eff6ff;color:var(--brand)}
.acct .tag.guru{background:#f5f3ff;color:#7c3aed}
.btn.danger{background:#dc2626}
.btn.warnavy{background:#475569}

/* tombol hapus pada kartu karya */
.karya-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* =====================================================================
   MODERN + ANIMASI  (dipakai SEMUA halaman)
   ===================================================================== */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulseo{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes revealUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes slideX{0%,100%{transform:translateX(0)}50%{transform:translateX(13px)}}
@keyframes spark{0%,100%{opacity:0}45%,55%{opacity:1}}

/* header gradient yang bergerak + logo FreeCAD di brand */
header.top{background:linear-gradient(125deg,#1e3a8a,#1d4ed8,#0ea5e9,#1d4ed8);
  background-size:300% 300%;animation:gradientShift 16s ease infinite}
.brand .fclogo{height:26px;width:auto;vertical-align:middle;margin-left:6px;
  background:#fff;border-radius:7px;padding:3px;box-shadow:0 3px 8px rgba(0,0,0,.2)}

/* muncul halus saat scroll (digerbangi .js → tetap tampil bila JS mati) */
.js .reveal{opacity:0}
.js .reveal.in{animation:revealUp .7s cubic-bezier(.2,.7,.2,1) forwards}

/* kartu sedikit hidup saat disentuh */
.card{transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(2,8,23,.10)}

/* pita logo (footer semua halaman) */
.brandband{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:24px 0 8px;
  box-shadow:0 6px 18px rgba(2,8,23,.05)}
.brandband img{height:48px;width:auto;display:block}
.brandband img.fc{height:40px}
.brandband .sep{width:1px;height:36px;background:var(--line)}
.brandband .bb-txt{font-size:12px;color:var(--muted);font-weight:600;text-align:left;line-height:1.4}

/* helper animasi untuk ilustrasi SVG */
.gear{transform-box:fill-box;transform-origin:center}
.g-slow{animation:spin 9s linear infinite}
.g-fast{animation:spinr 6s linear infinite}
.fl{animation:floaty 4.5s ease-in-out infinite}
.fl.d1{animation-delay:.6s}.fl.d2{animation-delay:1.2s}
.arglow{animation:pulseo 2.3s ease-in-out infinite}
.tool{animation:slideX 2.6s ease-in-out infinite}
.spark{animation:spark 2.6s ease-in-out infinite}

/* ====== LAYAR LOGIN (landing sangat modern + bergerak) ====== */
.landing{position:relative;overflow:hidden;border-radius:0 0 30px 30px;margin-bottom:8px;color:#fff;
  background:linear-gradient(125deg,#0f2a6b,#1d4ed8,#0ea5e9,#2563eb);background-size:320% 320%;
  animation:gradientShift 16s ease infinite;padding:16px 16px 28px;box-shadow:0 22px 50px rgba(2,8,23,.30)}
.landing .blob{position:absolute;border-radius:50%;background:#fff;filter:blur(12px);opacity:.16;z-index:0}
.landing .lb1{width:210px;height:210px;top:-80px;right:-50px;animation:floaty 11s ease-in-out infinite}
.landing .lb2{width:160px;height:160px;bottom:-70px;left:-40px;opacity:.12;animation:floaty2 8s ease-in-out infinite}
.land-top{display:flex;align-items:center;justify-content:center;gap:14px;position:relative;z-index:2;margin-bottom:6px}
.land-top img{height:50px;width:auto;background:#fff;border-radius:12px;padding:5px;
  box-shadow:0 8px 20px rgba(0,0,0,.20);animation:pop .6s both}
.land-top img.fc{height:42px}
.land-top .lt-sep{width:1px;height:32px;background:rgba(255,255,255,.5)}
.land-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:10px;align-items:center}
@media(min-width:760px){.land-grid{grid-template-columns:1.05fr .95fr}}
.land-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 24px rgba(0,0,0,.25))}
.land-head{text-align:center}
@media(min-width:760px){.land-head{text-align:left}}
.land-head .chip{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);
  font-size:11px;font-weight:800;letter-spacing:.5px;padding:5px 12px;border-radius:999px;animation:fadeIn .9s both}
.land-head h1{font-size:25px;line-height:1.18;margin:10px 0 6px;animation:revealUp .7s .1s both}
.land-head p{font-size:13.8px;opacity:.95;margin:0;animation:revealUp .7s .25s both}

/* kartu login bergaya glass */
.glasscard{background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.6);border-radius:22px;
  padding:20px;box-shadow:0 24px 50px rgba(2,8,23,.26);animation:revealUp .7s .15s both}

/* logo kecil di pojok userbar dashboard */
.userbar .ub-logos{display:flex;align-items:center;gap:8px}
.userbar .ub-logos img{height:26px;width:auto}
.userbar .ub-logos img.fc{height:22px}

/* =====================================================================
   DASHBOARD APP-SHELL  (menu kiri / drawer ☰ + view yang berganti)
   ===================================================================== */
/* di dalam aplikasi, sembunyikan header & footer global → tampil app penuh */
body.in-app header.top, body.in-app > footer{display:none}

.dashbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;color:#fff;
  background:linear-gradient(125deg,#1e3a8a,#1d4ed8,#0ea5e9,#1d4ed8);background-size:300% 300%;
  animation:gradientShift 16s ease infinite;padding:10px 14px;box-shadow:0 6px 18px rgba(2,8,23,.18)}
.dashbar .db-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px}
.dashbar .db-brand .fclogo{height:22px;width:auto;background:#fff;border-radius:6px;padding:2px}
.dashbar .spacer{flex:1}
.dashbar .who-mini{font-size:13px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.dashbar .who-mini .pill{font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.22);color:#fff}
.dashbar .who-mini .pill.guru{background:#fde047;color:#1e293b}

.ham{width:42px;height:38px;border:none;border-radius:11px;background:rgba(255,255,255,.16);cursor:pointer;padding:0}
.ham span{display:block;width:20px;height:2.4px;background:#fff;border-radius:2px;margin:4px auto;transition:.3s}
.nav-open .ham span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
.nav-open .ham span:nth-child(2){opacity:0}
.nav-open .ham span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}

.shell{position:relative;max-width:1140px;margin:0 auto}
.sidebar{position:fixed;top:0;left:0;z-index:40;width:268px;height:100vh;overflow-y:auto;padding:14px;
  background:#fff;border-right:1px solid var(--line);box-shadow:0 20px 50px rgba(2,8,23,.20);
  transform:translateX(-100%);transition:transform .32s cubic-bezier(.3,.8,.3,1)}
.nav-open .sidebar{transform:translateX(0)}
.scrim{position:fixed;inset:0;z-index:35;background:rgba(2,8,23,.45);opacity:0;visibility:hidden;transition:.3s}
.nav-open .scrim{opacity:1;visibility:visible}

.side-user{display:flex;align-items:center;gap:11px;padding:11px;border-radius:14px;
  background:linear-gradient(135deg,#eef4ff,#e6f7ff);margin-bottom:12px}
.side-user .su-ava{width:42px;height:42px;border-radius:12px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:20px;flex:none}
.side-user b{display:block;font-size:14.5px;line-height:1.2}
.side-user .su-kelas{font-size:12.5px;color:var(--muted)}

.side-nav{display:flex;flex-direction:column;gap:3px}
.side-nav .snav,.side-nav a{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:none;background:transparent;color:var(--ink);font-weight:600;font-size:14.5px;
  padding:10px 11px;border-radius:11px;cursor:pointer;text-decoration:none;transition:background .15s}
.side-nav .snav .si,.side-nav a .si{width:30px;height:30px;border-radius:9px;background:#f1f5f9;
  display:grid;place-items:center;font-size:16px;flex:none}
.side-nav .snav:hover,.side-nav a:hover{background:#f1f5f9}
.side-nav .snav.active{background:var(--brand);color:#fff}
.side-nav .snav.active .si{background:rgba(255,255,255,.22)}
.side-nav .guru-link .si{background:#f5f3ff}
.side-nav .danger-link{color:var(--bad)}
.side-sep{font-size:10.5px;font-weight:800;letter-spacing:.6px;color:var(--muted);
  text-transform:uppercase;padding:13px 11px 5px}

.content{padding:16px;min-height:62vh}

/* DESKTOP: sidebar menetap, tombol ☰ disembunyikan */
@media(min-width:980px){
  .ham{display:none}
  .shell{display:grid;grid-template-columns:268px 1fr}
  .sidebar{position:sticky;top:0;transform:none;box-shadow:none;height:auto;
    min-height:calc(100vh - 58px);max-height:none}
  .scrim{display:none}
  .content{padding:22px 26px}
}

/* PERGANTIAN VIEW (animasi halus) */
.view{display:none}
.view.active{display:block;animation:fadeIn .4s both}

/* ====== BERANDA: welcome hero + visi ====== */
.welcome-hero{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;color:#fff;
  background:linear-gradient(135deg,#0f2a6b,#1d4ed8,#0ea5e9);background-size:200% 200%;
  animation:gradientShift 14s ease infinite;border-radius:20px;padding:20px;
  box-shadow:0 18px 40px rgba(2,8,23,.22)}
@media(min-width:760px){.welcome-hero{grid-template-columns:1fr 1fr}}
.welcome-hero .wh-art{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:10px}
.welcome-hero .wh-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 22px rgba(0,0,0,.25))}
.welcome-hero h1{font-size:23px;line-height:1.22;margin:9px 0 8px}
.welcome-hero .grad{background:linear-gradient(90deg,#fde047,#fca5a5);-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome-hero p{font-size:14px;opacity:.96;margin:0 0 15px}
.chip2{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);
  font-size:11px;font-weight:800;letter-spacing:.5px;padding:5px 12px;border-radius:999px;animation:fadeIn .9s both}
.wh-cta{display:flex;flex-wrap:wrap;gap:9px}
.welcome-hero .btn.ghost{background:rgba(255,255,255,.18);color:#fff}

.visi{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:16px;
  box-shadow:0 6px 18px rgba(2,8,23,.05)}
.visi>p{color:#334155;font-size:14.5px;margin:6px 0 0}
.visi-cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:15px}
@media(min-width:760px){.visi-cards{grid-template-columns:repeat(4,1fr)}}
.vc{background:linear-gradient(135deg,#f8fafc,#eff6ff);border:1px solid var(--line);border-radius:14px;
  padding:15px 13px;text-align:center}
.vc .vi{font-size:28px;display:block;margin-bottom:7px}
.vc b{display:block;font-size:14px;margin-bottom:3px}
.vc p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5}

/* ====== AR UKURAN ASLI ====== */
.realsize{background:#fff;border:1px solid var(--line);border-radius:18px;padding:6px 18px;margin-top:14px;
  box-shadow:0 6px 18px rgba(2,8,23,.05)}
.rs-row{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-bottom:1px dashed var(--line)}
.rs-row:last-child{border-bottom:none}
.rs-ic{width:46px;height:46px;border-radius:13px;background:#eff6ff;display:grid;place-items:center;
  font-size:23px;flex:none}
.rs-row b{font-size:15px}
.rs-row p{margin:4px 0 0;font-size:13.5px;color:#475569}
.rs-row code{background:#0f172a;color:#7dd3fc;padding:1px 7px;border-radius:6px;font-size:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.ar-cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}

/* ====== KUIS (kerjakan + editor guru) ====== */
.kuis-top{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.qsoal{font-weight:700;margin:0 0 8px;font-size:15px}
.q{margin:0 0 16px}
.guru-edit{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9}
.qedit{border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:12px;background:#f8fafc}
.qe-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.qe-soal{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;font-family:inherit;
  font-size:14px;resize:vertical;background:#fff}
.qe-opt{display:flex;align-items:center;gap:10px;margin:8px 0}
.qe-opt input[type=radio]{width:20px;height:20px;flex:none;cursor:pointer}
.qe-optx{flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;background:#fff}
.kuis-tools{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:8px}

/* ====== DESAIN 2D: pemilih etiket A4 ====== */
.etk-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.etk-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:#fff;border:2px solid var(--line);border-radius:15px;padding:12px 12px 14px;cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.etk-opt:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(2,8,23,.12)}
.etk-opt.active{border-color:var(--brand);box-shadow:0 16px 34px rgba(29,78,216,.20)}
.etk-opt img{width:100%;height:auto;max-height:180px;object-fit:contain;
  border:1px solid var(--line);border-radius:9px;background:#fff}
.etk-opt .etk-num{position:absolute;top:9px;left:9px;width:27px;height:27px;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;
  box-shadow:0 4px 10px rgba(29,78,216,.4)}
.etk-opt .etk-lab{font-weight:700;font-size:14px;color:var(--ink);text-align:center}
.etk-opt.active .etk-lab{color:var(--brand)}

.etk-detail{animation:fadeIn .4s both}
.etk-detail h3{font-size:16px;margin:17px 0 5px}
.etk-show{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}
.etk-show img{width:100%;max-width:660px;height:auto;display:inline-block}
.etk-fields{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0}
@media(min-width:560px){.etk-fields{grid-template-columns:1fr 1fr}}
.etk-fields>div{background:#f8fafc;border:1px solid var(--line);border-radius:11px;padding:9px 12px}
.etk-fields>div b{font-size:13.5px;color:var(--ink)}
.etk-fields>div span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.etk-3d{margin-top:6px}