*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  /* ── NEUBRUTALISM DARK ── */
  --bg: #0A0A0A;
  --bg2: #111111;
  --bg3: #161616;
  --bg4: #1A1A1A;
  --bg5: #222222;

  --line: #2A2A2A;
  --line2: #333333;

  /* Accent: kuning electric untuk highlight neubrutalism */
  --accent: #FFEA00;
  --accent-glow: rgba(255, 234, 0, 0.08);
  --accent-d: rgba(255, 234, 0, 0.06);

  --text: #F5F0E8;
  --text2: #A8A29E;
  --text3: #78716C;

  --green: #00D084;
  --amber: #FFEA00;
  --rose: #FF3B3B;
  --purple: #B794F4;
  --teal: #00D4AA;
  --pink: #FF6B9D;

  --font: 'Plus Jakarta Sans', sans-serif;
  --font-h: 'Outfit', sans-serif;
  --font-chat: 'Space Grotesk', sans-serif;
  --mono: 'Fira Code', monospace;

  /* NEUBRUTALISM: radius kecil, shadow offset blok */
  --r: 6px;
  --r2: 4px;
  --r3: 4px;

  --glass: rgba(10, 10, 10, 0.97);
  --blur: 0px; /* Neubrutalism: no blur */

  /* Shadow offset blok — ciri khas neubrutalism */
  --nb-shadow: 3px 3px 0 #FFEA00;
  --nb-shadow-dark: 3px 3px 0 #2A2A2A;
  --nb-shadow-sm: 2px 2px 0 #FFEA00;
  --nb-border: 2px solid #2A2A2A;
  --nb-border-accent: 2px solid #FFEA00;

  --nb-yellow: 3px 3px 0 #FFEA00;
  --nb-red: 3px 3px 0 #FF3B3B;
  --nb-blue: 3px 3px 0 #3B82F6;
  --nb-green: 3px 3px 0 #00D084;
  --nb-purple: 3px 3px 0 #9B72E6;
  --nb-pink: 3px 3px 0 #FF6B9D;
  --nb-orange: 3px 3px 0 #FF8C42;
  --nb-teal: 3px 3px 0 #00D4AA;

  --shadow: 4px 4px 0 #FFEA00;
  --glow: 4px 4px 0 #FFEA00;
}
html{scroll-behavior:smooth}
/* Pre-JS light theme applied via html class to prevent flash */
html.light-pre body{background:#F5F0E8;color:#0A0A0A;}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;overflow-x:hidden;transition:background .3s ease,color .3s ease}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 0;
  border: 1px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text2); }

/* ── AMBIENT BACKGROUND ── */
.ambient-bg{display: none;}
.blob{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(120px);opacity:0.08;animation:floatAmb 30s infinite alternate ease-in-out}
.blob-1{top:-150px;left:-150px;background:#333;animation-duration:40s;opacity:0.04}
.blob-2{bottom:-150px;right:-150px;background:#222;animation-duration:50s;opacity:0.03}
.blob-3{top:40%;left:50%;width:400px;height:400px;background:#2a2a2a;animation-duration:60s;opacity:0.02}
@keyframes floatAmb{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(120px,60px) scale(1.1)}
  66%{transform:translate(-60px,140px) scale(0.9)}
  100%{transform:translate(40px,-60px) scale(1.05)}
}

/* ── TOP NAV (desktop) ── */
.nav{position:sticky;top:0;z-index:100;background:var(--glass);backdrop-filter:none;border-bottom:var(--nb-border);transition:all 0.3s ease;padding-top:env(safe-area-inset-top);} /* safe-area: 0 di desktop & Android — hanya berpengaruh di HP ber-notch (iPhone) */
.nav-inner{max-width:1400px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:0;height:54px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:16px;flex-shrink:0;cursor:pointer;transition:transform .12s, opacity .12s; -webkit-tap-highlight-color:transparent}
.logo:active{ transform:translate(1px,1px) scale(.98); opacity:.92; }
.logo:active .logo-mark{ box-shadow:1px 1px 0 #2A2A2A; transform:translate(1px,1px); }
.logo-mark{
  width:28px; height:28px;
  border-radius: 4px;
  background: #fff;
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0;
  color: var(--bg);
  overflow:hidden;
  padding:0;
  transition:transform .12s, box-shadow .12s;
}
.logo-name{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.5px;white-space:nowrap}
.logo-name span{color:var(--text2); font-weight: 800;}
.hspace{flex:1}
.hbadge{
  font-family:var(--mono);
  font-size:11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--accent);
  border: var(--nb-border);
  color: var(--bg);
  padding: 3px 10px;
  border-radius: var(--r3);
  box-shadow: var(--nb-shadow-sm);
  white-space:nowrap;
  flex-shrink:0;
}
.hbadge b{
  color:#0A0A0A;
  background: #FFEA00;
  font-weight:800;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #0A0A0A;
  margin-right: 2px;
}
.nav-portfolio{
  width:34px; height:34px;
  border-radius: var(--r2);
  background: var(--bg3);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  text-decoration:none;
  flex-shrink:0;
  margin-left:8px;
  transition: transform .12s, box-shadow .12s;
  line-height:1;
}
.nav-portfolio:hover{
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--accent);
}

/* ── NAVBAR TWEAKS ── */
@media(max-width:767px){
  .hspace{display:none}
  .hbadge{display:none}
  .nav-inner{justify-content:flex-start}
}

/* ── BOTTOM NAV BAR ── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  z-index:300; background:var(--glass); backdrop-filter:none;
  border-top:var(--nb-border); display:none; 
  padding-bottom:env(safe-area-inset-bottom);
}

.bnav-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:7px 2px 9px; cursor:pointer; background:none; border:none;
  color:var(--text3); font-family:var(--font); transition:all .2s;
  position:relative; flex:1;
}
.bnav-item.on { color:var(--accent); }
.bnav-item:hover { color:var(--text); }
.bnav-icon svg { width: 22px; height: 22px; transition: transform 0.2s; }
.bnav-item:hover .bnav-icon svg { transform: scale(1.1); }
.bnav-label { font-size:10px; font-weight:600; letter-spacing:.01em; }

@media(max-width:767px) {
  .bottom-nav { 
    display:flex; height:64px; 
    mask-image: none !important; -webkit-mask-image: none !important; 
    box-shadow: none !important; 
  }
  .bottom-nav::after, .bottom-nav::before { display: none !important; }
  .bnav-item:not(.mobile-visible) { display: none; }
}

@media(min-width:768px) {
  .bottom-nav {
    display:flex; flex-direction:column; position:fixed;
    top:54px; left:0; bottom:0; width:220px;
    background:var(--bg2); border-right:var(--nb-border); border-top:none;
    padding:0; align-items:stretch; overflow:hidden; z-index:90;
    backdrop-filter: none;
  }
  .bnav-scroll {
    flex:1; overflow-y:auto; overflow-x:hidden;
    display:flex; flex-direction:column; align-items:stretch;
    padding:20px 0 12px;
  }
  .bnav-item {
    display: flex; flex-direction:row;
    width:calc(100% - 24px); padding: 10px 16px;
    justify-content:flex-start; align-items:center;
    gap:14px; flex:none; margin: 3px 12px;
    border-radius: var(--r2);
    background: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .1s, box-shadow .1s, border-color .1s, background .1s;
    color: var(--text2);
  }
  .bnav-item:hover {
    background: var(--bg3);
    border-color: var(--line2);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--line2);
  }
  .bnav-item.on {
    background: var(--accent);
    border: var(--nb-border);
    color: var(--bg);
    box-shadow: var(--nb-shadow);
    transform: none;
  }
  .bnav-item.on .bnav-label { color: var(--bg); font-weight: 700; }
  .bnav-item.on .bnav-icon svg { stroke: var(--bg); }
  .bnav-item.on::before { display: none; }
  /* Fix: hover pada item aktif (Timeline) jangan jadi putih transparan */
  .bnav-item.on:hover {
    background: var(--accent);
    border: var(--nb-border);
    color: var(--bg);
    box-shadow: var(--nb-shadow);
    transform: none;
  }
  .bnav-item.on:hover .bnav-label { color: var(--bg); }
  .bnav-item.on:hover .bnav-icon svg { stroke: var(--bg); }
  .bnav-item:hover { color: var(--text); }
  .bnav-item:hover .bnav-label { color: var(--text); }
  .bnav-item:hover .bnav-icon svg { stroke: var(--text); }
  .bnav-icon { 
    display: flex; align-items: center; justify-content: center; 
    width: 24px; height: 24px; flex-shrink: 0; 
  }
  .bnav-icon svg { width: 22px; height: 22px; }
  .bnav-label { font-size:14px; font-weight: 500; white-space: nowrap; }
  .bnav-item#bnav-more { display: none; }
  .bnav-dot { display: none !important; }
  .bnav-ai-mobile { display: none !important; }
  /* Section headers: BELAJAR / ALAT */
  .bnav-section {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 18px 24px 6px;
    margin: 0;
    opacity: .9;
  }
  .bnav-section:first-of-type { padding-top: 2px; }
  /* Docked Tanya AI at bottom of sidebar — fixed footer outside scroll */
  .bnav-ai-wrap {
    flex-shrink:0;
    padding: 16px 12px 12px;
    border-top: 1px solid var(--line);
    background: var(--bg2);
  }
  .bnav-ai {
    width: 100%;
    background: var(--accent);
    color: var(--bg);
    border: var(--nb-border);
    border-radius: var(--r2);
    padding: 12px 14px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: var(--nb-shadow);
    transition: transform .1s, box-shadow .1s;
  }
  .bnav-ai:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--line2);
  }
  .bnav-ai:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line2); }
  .bnav-ai-ico { display:flex; align-items:center; justify-content:center; }
}

/* ── MOBILE: Tanya AI floating di posisi saran sebelumnya (kanan) ── */
@media(max-width: 767px){
  .desktop-only { display: none !important; }
  .bnav-scroll { display: contents; }
  /* Hide docked Tanya AI in bottom bar — now floating */
  .bnav-ai-mobile { display: none !important; }
  /* Bottom nav 5 items evenly — smartphone friendly */
  .bottom-nav{ height: 68px; padding-bottom: env(safe-area-inset-bottom); }
  .bnav-item{ padding: 8px 4px 10px; gap: 3px; }
  .bnav-label{ font-size: 10px; }
  .bnav-icon svg{ width: 22px; height: 22px; }
}
@media(max-width: 360px){
  .bnav-item{ padding: 6px 2px 8px; }
  .bnav-label{ font-size: 9px; }
}

/* ── LAINNYA BOTTOM SHEET ── */
.sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: none;
  z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.sheet-overlay.on { opacity: 1; pointer-events: all; }
.more-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 501;
  background: var(--bg2);
  border-top: var(--nb-border);
  border-radius: 8px 8px 0 0;
  padding: 24px 16px 40px;
  transform: translateY(calc(100% + 20px));
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s, visibility 0.3s;
  max-width: 600px; margin: 0 auto;
  box-shadow: 0 -4px 0 var(--accent);
}
.more-sheet.on { transform: translateY(0); opacity:1; visibility:visible; pointer-events:all; }
.sheet-handle {
  width: 40px; height: 4px;
  background: var(--accent);
  border-radius: 2px;
  margin: -12px auto 20px;
}
.sheet-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.sheet-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--bg3);
  border: var(--nb-border);
  padding: 16px 8px;
  border-radius: var(--r2);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
  text-decoration: none; color: inherit;
  box-shadow: var(--nb-shadow-dark);
}
.sheet-item:active, .sheet-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--nb-shadow);
}
.sheet-icon { font-size: 24px; color: var(--accent); }
.sheet-label { font-size: 11px; font-weight: 600; color: var(--text2); text-align: center; }

/* scroll hint shadow kanan — lebih tebal */
.bottom-nav::after{
  content:'';
  position:fixed;
  bottom:calc(env(safe-area-inset-bottom) + 0px);
  right:0;width:44px;height:62px;
  background:linear-gradient(to left, var(--bg) 0%, rgba(3,4,8,0.8) 60%,transparent 100%);
  pointer-events:none;
  z-index:310;
  transition:opacity .4s;
}
@media(min-width:768px){
  .bottom-nav::after{
    display:none;
  }
}

/* PAGES — smooth transition */
.page{
  display:none;max-width:1400px;margin:0 auto;padding:0 16px 80px;
  opacity:0;transform:translateY(12px) scale(0.99);
  transition:opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
@media(min-width:768px){
  .page { margin-left:220px; padding:24px 32px 80px; max-width:none; }
  #page-kalk { padding-top:24px; }
  .konv-wrap, .quiz-wrap, .aiv-wrap, .logika-wrap, .resist-wrap { max-width:800px; margin:0; }
}
.page.on{display:block; animation: pageIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.page.on.visible{opacity:1;transform:translateY(0)}
@keyframes pageIn{
  from{opacity:0;transform:translateY(20px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:767px){
  .page{padding:0 14px 90px}
  #page-kalk{padding:0 0 90px}
}

/* ── KONVERSI SATUAN ── */
.konv-wrap{max-width:680px;margin:0 auto;padding:20px 0 60px}
.konv-header{margin-bottom:20px}
.konv-header h2{font-family:var(--font-h);font-size:24px;font-weight:700;background:linear-gradient(135deg, var(--text), var(--text2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px;letter-spacing:-.02em}
.konv-header p{font-size:13px;color:var(--text2)}
.konv-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.konv-cat-btn{
  font-size:11px;
  font-family:var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r3);
  cursor:pointer;
  border: var(--nb-border);
  background: transparent;
  color: var(--text2);
  transition: transform .1s, box-shadow .1s;
}
.konv-cat-btn.on{
  background: var(--accent);
  border: var(--nb-border);
  color: var(--bg);
  box-shadow: var(--nb-shadow);
  transform: translate(-1px, -1px);
}
.konv-card{
  background: var(--bg2);
  border: var(--nb-border);
  border-radius: var(--r);
  box-shadow: var(--nb-shadow-dark);
  padding: 20px;
  display: none;
}
.konv-card.on{display:block}
.konv-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.konv-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.konv-inp{
  flex:1;
  background: var(--bg3);
  border: var(--nb-border);
  border-radius: var(--r3);
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: box-shadow .1s, border-color .1s;
  min-width:0;
}
.konv-inp:focus{
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
}
.konv-lbl{font-size:12px;color:var(--text2);font-family:var(--mono);width:80px;flex-shrink:0}
.konv-sep{text-align:center;color:var(--text3);font-size:18px;margin:4px 0;user-select:none}
.konv-result-row{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  background: var(--bg4);
  border: var(--nb-border);
  border-radius: var(--r3);
  padding: 9px 12px;
  box-shadow: 2px 2px 0 var(--line2);
}
.konv-result-val{font-size:15px;font-weight:700;color:var(--accent);font-family:var(--mono);flex:1;min-width:0;word-break:break-all}
.konv-result-lbl{font-size:11px;color:var(--text3);font-family:var(--mono);flex-shrink:0}

/* ── SHARE SCORE ── */
.share-btn{
  display:flex;align-items:center;gap:8px;justify-content:center;
  background:linear-gradient(135deg,#25d366,#128c7e);
  border:none;border-radius:var(--r2);
  color:#fff;font-family:var(--font);font-size:13px;font-weight:600;
  padding:11px 24px;cursor:pointer;transition:all .15s;
  margin-top:8px;width:100%;max-width:300px;margin-left:auto;margin-right:auto;
}
.share-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #25d36644}
.share-copy-btn{
  display:flex;align-items:center;gap:8px;justify-content:center;
  background:var(--bg4);border:1px solid var(--line);
  border-radius:var(--r2);color:var(--text2);
  font-family:var(--font);font-size:13px;font-weight:500;
  padding:11px 24px;cursor:pointer;transition:all .15s;
  width:100%;max-width:300px;margin-left:auto;margin-right:auto;
}
.share-copy-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ═══════════════════ KAMUS PAGE ═══════════════════ */
.sbar{padding:14px 0;border-bottom:1px solid var(--line)}
.sfield{position:relative;max-width:600px}
.sfield input{
  width:100%;
  background: var(--bg2);
  border: var(--nb-border);
  border-radius: var(--r3);
  padding:10px 14px 10px 38px;
  font-family:var(--font);
  font-size:14px;
  color:var(--text);
  outline:none;
  transition: box-shadow .1s, transform .1s;
  box-shadow: var(--nb-shadow-dark);
}
.sfield input:focus{
  box-shadow: var(--nb-shadow);
  transform: translate(-1px, -1px);
  border-color: var(--accent);
}
.sfield input::placeholder{color:var(--text3)}
.sico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:13px;pointer-events:none}
.sx{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;display:none;padding:2px 4px}

.fbar-wrap { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 0px; }
.fbar{flex: 1; padding:10px 0; display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; border-bottom:none; scroll-behavior: smooth;}

.fbar-btn {
  width: 24px; height: 24px; background: var(--bg3); border: 1px solid var(--line); border-radius: 50%;
  color: var(--text2); display: none; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
  position: absolute; z-index: 10; box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.fbar-btn:hover { background: var(--accent-d); border-color: var(--accent); color: var(--text); transform: scale(1.1); }
.fbar-btn svg { width: 14px; height: 14px; }
.fbar-left { left: 0; transform: translateX(-50%); }
.fbar-right { right: 0; transform: translateX(50%); }

@media(min-width: 860px) {
  .fbar-wrap { align-items: flex-start; }
  .fbar { flex-wrap: wrap; overflow: visible; padding: 12px 0; gap: 6px; mask-image: none !important; -webkit-mask-image: none !important; }
  .fbar-btn { display: none !important; }
}
.fbar::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;
  font-size:11px;
  font-family:var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 5px 12px;
  border-radius: var(--r3);
  cursor:pointer;
  border: var(--nb-border);
  background: var(--bg3);
  color: var(--text2);
  transition: transform .1s, box-shadow .1s;
  white-space:nowrap;
}
.chip:hover{
  transform: translate(-2px, -2px);
  box-shadow: var(--nb-shadow-dark);
  color: var(--text);
  background: var(--bg4);
}
.chip.on{
  background: var(--accent);
  border: var(--nb-border);
  color: var(--bg);
  font-weight: 800;
  box-shadow: var(--nb-shadow);
  transform: none;
}
body.light .chip.on{
  background: var(--accent);
  border: var(--nb-border);
  color: var(--bg2);
  box-shadow: var(--nb-shadow);
}

.kbody{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:860px){.kbody{grid-template-columns:1fr 320px;gap:0;align-items:start}}

.ksec{padding:14px 0 40px}
.smeta{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.slabel{font-size:11px;color:var(--text3);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.scount{font-size:11px;color:var(--text3);font-family:var(--mono)}
.grid{display:flex;flex-direction:column;gap:8px}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
@media(min-width:768px) {
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
.core-card {
  padding: 14px 20px !important;
  border: var(--nb-border) !important;
  border-radius: var(--r) !important;
  background: var(--bg3) !important;
  box-shadow: var(--nb-shadow-dark) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
}
.ccore-body {
  display: flex;
  align-items: center;
  gap:16px;
  width: 100%;
}
.ccore-icon {
  width: 40px;
  height: 40px;
  background: var(--bg4);
  border: var(--nb-border);
  border-radius: var(--r2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: var(--nb-shadow-sm);
}
.ccore-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ccore-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ccore-sub {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
  text-transform: capitalize;
}
.core-card:hover {
  transform: translate(-3px, -3px) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--nb-shadow) !important;
}
.core-card .ctag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  padding: 2px 8px;
}
.compact-list .card {
  padding: 12px 18px !important;
  border-radius: var(--r) !important;
}
.compact-list .cdesc {
  font-size: 12px !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CARD - NEUBRUTALISM */
.card{
  background:var(--bg2);
  border: var(--nb-border);
  border-radius:var(--r);
  padding:18px 22px;
  cursor:pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
  animation:cardEntrance 0.5s cubic-bezier(.4,0,.2,1) both;
  position:relative;
  box-shadow: var(--nb-shadow-dark);
  overflow: hidden;
}
.card::before { display: none; }
.card > * { position: relative; z-index: 1; }
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(15px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.card:hover{
  border-color:var(--accent);
  background:var(--bg3);
  transform: translate(-3px, -3px);
  box-shadow: var(--nb-shadow);
}
.card:hover::before { opacity: 0.03; }
.card.open{border-color:var(--accent);background:var(--bg3);box-shadow:var(--shadow)}
@keyframes up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.ctop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cleft{flex:1;min-width:0}
.cen{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--text);line-height:1.2;margin-bottom:2px}
.cid{font-size:12px;color:var(--text2);font-weight:500}
.ctag{flex-shrink:0;font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:var(--r3);border:1px solid transparent;margin-top:1px}
.t-dasar{background:rgba(16,185,129,0.14);border-color:rgba(16,185,129,0.32);color:var(--green)}
.t-komponen{background:rgba(241,241,241,0.10);border-color:rgba(241,241,241,0.22);color:var(--text)}
.t-rangkaian{background:rgba(245,158,11,0.14);border-color:rgba(245,158,11,0.32);color:var(--amber)}
.t-daya{background:rgba(239,68,68,0.14);border-color:rgba(239,68,68,0.32);color:var(--rose)}
.t-elektronika{background:rgba(155,114,230,0.14);border-color:rgba(155,114,230,0.32);color:var(--purple)}
.t-pengukuran{background:rgba(46,196,182,0.14);border-color:rgba(46,196,182,0.32);color:#2ec4b6}
.t-digital{background:rgba(232,121,160,0.14);border-color:rgba(232,121,160,0.32);color:#e879a0}
.t-sinyal{background:rgba(245,158,11,0.14);border-color:rgba(245,158,11,0.32);color:var(--amber)}
.t-terbarukan{background:rgba(34,197,94,0.14);border-color:rgba(34,197,94,0.32);color:#22c55e}
.t-instalasi{background:rgba(99,102,241,0.14);border-color:rgba(99,102,241,0.32);color:#818cf8}
.t-mesin{background:rgba(249,115,22,0.14);border-color:rgba(249,115,22,0.32);color:#fb923c}
.t-kontrol{background:rgba(168,85,247,0.14);border-color:rgba(168,85,247,0.32);color:#a78bfa}
.t-komunikasi{background:rgba(6,182,212,0.14);border-color:rgba(6,182,212,0.32);color:#06b6d4}
.t-distribusi{background:rgba(234,179,8,0.14);border-color:rgba(234,179,8,0.32);color:#eab308}
body.light .t-dasar{background:rgba(16,185,129,0.12);border-color:rgba(16,185,129,0.28);color:#047857}
body.light .t-komponen{background:rgba(100,116,139,0.10);border-color:rgba(100,116,139,0.22);color:#334155}
body.light .t-rangkaian{background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.28);color:#92400e}
body.light .t-daya{background:rgba(220,38,38,0.10);border-color:rgba(220,38,38,0.24);color:#b91c1c}
body.light .t-elektronika{background:rgba(124,58,237,0.10);border-color:rgba(124,58,237,0.24);color:#6d28d9}
body.light .t-pengukuran{background:rgba(13,148,136,0.10);border-color:rgba(13,148,136,0.24);color:#0f766e}
body.light .t-digital{background:rgba(219,39,119,0.10);border-color:rgba(219,39,119,0.24);color:#be185d}
body.light .t-sinyal{background:rgba(180,83,9,0.10);border-color:rgba(180,83,9,0.24);color:#92400e}
body.light .t-terbarukan{background:rgba(22,163,74,0.10);border-color:rgba(22,163,74,0.24);color:#15803d}
body.light .t-instalasi{background:rgba(79,70,229,0.10);border-color:rgba(79,70,229,0.24);color:#4338ca}
body.light .t-mesin{background:rgba(234,88,12,0.10);border-color:rgba(234,88,12,0.24);color:#c2410c}
body.light .t-kontrol{background:rgba(147,51,234,0.10);border-color:rgba(147,51,234,0.24);color:#7e22ce}
body.light .t-komunikasi{background:rgba(8,145,178,0.10);border-color:rgba(8,145,178,0.24);color:#0e7490}
body.light .t-distribusi{background:rgba(202,138,4,0.10);border-color:rgba(202,138,4,0.24);color:#a16207}
.cdesc{font-size:13px;color:var(--text2);margin-top:6px;line-height:1.5;padding-right:18px}
.cpreview-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.cformula-mini{font-family:var(--mono);font-size:11px;color:var(--amber);background:var(--bg4);border:1px solid var(--line);padding:3px 8px;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cformula-mini .katex{font-size:11px;color:var(--amber)}
.cicon{width:32px;height:32px;border-radius:var(--r3);background:var(--bg4);border:var(--nb-border);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;box-shadow:var(--nb-shadow-sm)}
.cicon-core{width:40px;height:40px;border-radius:var(--r2);background:var(--bg4);border:var(--nb-border);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:var(--nb-shadow-sm)}
.card-progress{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);border-radius:var(--r) 0 0 var(--r);opacity:0;transition:opacity .2s}
.card-visited{position:absolute;left:8px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);opacity:0}
.card.visited .card-visited{opacity:1}
.cchev{position:absolute;right:13px;bottom:13px;font-size:10px;color:var(--text3);transition:transform .2s}
.card.open .cchev{transform:rotate(180deg)}
.cexp{max-height:0;overflow:hidden;transition:max-height .35s ease,opacity .25s;opacity:0}
.card.open .cexp{max-height:600px;opacity:1}
.expbody{padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}
.elabel{font-family:var(--mono);font-size:10px;color:var(--text3);letter-spacing:.07em;margin-bottom:4px}
.etext{font-size:13px;color:var(--text);line-height:1.65;margin-bottom:10px}
.eformula{background:var(--bg4);border:1px solid var(--line);border-radius:var(--r2);padding:10px 14px;margin-bottom:10px;overflow-x:auto}
.eformula .katex{color:var(--amber);font-size:.95em}
.eformula .katex-display{margin:.2em 0}
.etags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.etag{font-family:var(--mono);font-size:10px;background:var(--bg4);border:var(--nb-border);padding:2px 8px;border-radius:var(--r3);color:var(--text3)}
.eask{width:100%;background:transparent;border:1px solid var(--line);color:var(--text2);font-family:var(--font);font-size:12px;font-weight:500;padding:8px 12px;border-radius:var(--r2);cursor:pointer;transition:all .15s;text-align:left;display:flex;align-items:center;gap:6px}
.eask:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-d)}

.empty{text-align:center;padding:48px 20px;color:var(--text3);display:none;background:var(--bg2);border:1px dashed var(--line2);border-radius:var(--r);margin-top:16px}
.empty-ico{font-size:32px;margin-bottom:12px;opacity:0.8}
.empty-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px}
.empty-desc{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:16px;max-width:480px;margin-left:auto;margin-right:auto}
.empty-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.empty-btn{font-family:var(--font);font-size:12px;font-weight:600;padding:8px 16px;border-radius: var(--r3);cursor:pointer;border:1px solid var(--line);background:var(--bg3);color:var(--text2);transition:all .15s}
.empty-btn:hover{border-color:var(--accent);color:var(--text);background:var(--bg4)}
.empty-btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.empty-btn.primary:hover{filter:brightness(1.05)}
.wm{text-align:center;padding:20px 0;font-family:var(--mono);font-size:10px;color:var(--text3)}
.sfield{position:relative}
.suggest-box{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg2);border:var(--nb-border);border-radius:var(--r);max-height:340px;overflow-y:auto;z-index:60;box-shadow:var(--nb-shadow);display:none}
.suggest-box.show{display:block;animation:cardEntrance 0.2s ease}
.suggest-item{padding:10px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;border-bottom:1px solid var(--line2);transition:background .12s}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover,.suggest-item.on{background:var(--bg3)}
.suggest-ico{width:32px;height:32px;border-radius:8px;background:var(--bg4);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.suggest-main{flex:1;min-width:0}
.suggest-en{font-size:13px;font-weight:700;color:var(--text);line-height:1.2}
.suggest-id{font-size:11px;color:var(--text2)}
.suggest-cat{font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:4px;background:var(--bg4);border:1px solid var(--line);color:var(--text3);flex-shrink:0}
.smeta{flex-wrap:wrap;gap:10px}
.smeta-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.sort-select{font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:8px;background:var(--bg3);border:1px solid var(--line);color:var(--text2);cursor:pointer;outline:none;transition:all .15s}
.sort-select:focus{border-color:var(--accent);color:var(--text)}
.sort-label{font-family:var(--mono);font-size:10px;color:var(--text3);letter-spacing:.06em}

/* CHAT SIDEBAR */
@media(min-width:860px){
  .chat-sidebar{position:sticky;top:55px;height:calc(100vh - 55px);border-left:1px solid var(--line);display:flex;flex-direction:column;background:var(--bg);margin-left:16px}
  .fab{display:none!important}
  .chat-mobile{display:none!important}
  .overlay{display:none!important}
}
@media(max-width:859px){.chat-sidebar{display:none}}

/* FAB — hidden on mobile (pakai chat-fab-left), tampil di tablet mid-range */
.fab{
  position:fixed;
  bottom:20px;right:20px;
  z-index:400;
  width:52px;height:52px;
  border-radius:16px;
  background:linear-gradient(135deg,#4f9cf9,#2563eb);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  box-shadow:0 4px 24px rgba(79,156,249,.45), 0 2px 8px #0008;
  transition:transform .15s;
}
@media(max-width:639px){.fab{display:none!important}}

/* ── FLOATING CHAT BUBBLE LEFT (mobile only) ── */
.chat-fab-left{
  position:fixed;
  bottom:calc(64px + env(safe-area-inset-bottom) + 16px);
  right:16px; left:auto;
  z-index:400;
  width:54px;height:54px;
  border-radius: var(--r);
  background: #FFEA00;
  border: var(--nb-border);
  color: #0A0A0A;
  cursor:pointer;
  display:none;
  align-items:center;justify-content:center;
  box-shadow: var(--nb-shadow);
  transition:transform .12s, box-shadow .12s;
  animation:chatFabPulse 2.5s ease-in-out infinite;
}
.chat-fab-left:hover{
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #0A0A0A;
}
.chat-fab-left:active{transform: translate(1px,1px); box-shadow: 1px 1px 0 #0A0A0A;}
@media(max-width:767px){.chat-fab-left{display:flex}}

/* chat bubble SVG icon */
.chat-fab-left svg{
  width:24px;height:24px;fill:#0A0A0A;
  stroke:#0A0A0A;
}

/* subtle neubrut pulse */
@keyframes chatFabPulse{
  0%,100%{box-shadow: 3px 3px 0 #0A0A0A;}
  50%{box-shadow: 4px 4px 0 #0A0A0A;}
}

/* Tooltip for floating chat bubble */
.chat-fab-left-wrap{
  position:fixed;
  bottom:calc(64px + env(safe-area-inset-bottom) + 16px);
  right:16px; left:auto;
  z-index:400;
  display:none;
}
@media(max-width:767px){.chat-fab-left-wrap{display:block}}
.chat-open .chat-fab-left-wrap{display:none !important}
.chat-open .chat-fab-left{display:none !important}

body.light .chat-fab-left{
  background: #FFEA00;
  border: var(--nb-border);
  color: #0A0A0A;
  box-shadow: var(--nb-shadow);
}

/* ── FLOATING CHAT WINDOW (mobile < 860px) ── */
.chat-mobile{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:90dvh;
  z-index:350;
  display:flex;
  flex-direction:column;
  background:var(--glass);
  backdrop-filter:none;
  border-top: var(--nb-border);
  border-left: var(--nb-border);
  border-right: var(--nb-border);
  border-radius: var(--r) var(--r) 0 0;
  overflow:hidden;
  box-shadow: -4px -4px 0 var(--accent);
  transform:translateY(100%);
  opacity:0;
  pointer-events:none;
  transition:
    transform .4s cubic-bezier(.34,1.56,.64,1),
    opacity   .3s ease;
}
.chat-mobile.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:all;
}

/* Tablet mid-range (640–859px) → floating kanan bawah, lebih kecil */
@media(min-width:640px) and (max-width:859px){
  .chat-mobile{
    left:auto;
    right:20px;
    bottom:24px;
    width:360px;
    max-height:62vh;
    border-radius:20px;
  }
}
.chead{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.cava{width:28px;height:28px;border-radius:7px;background:var(--accent-d);border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;font-size:12px}
.cinfo{flex:1}.cname{font-family:var(--font-chat);font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--text)}.cstatus{font-size:10px;color:var(--green);font-family:var(--mono);transition:color .3s}
.cstatus.offline{color:var(--rose);animation:statusPulse 2s ease-in-out infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.5}}
.cback{background:none;border:1px solid var(--line);color:var(--text2);width:28px;height:28px;border-radius:7px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.cmsgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.cm{display:flex;flex-direction:column;gap:2px;animation:up .2s ease}
.cm.u{align-items:flex-end}.cm.b{align-items:flex-start}
.bbl{max-width:88%;padding:9px 12px;border-radius:var(--r2);font-family:var(--font-chat);font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1.7;word-break:break-word}
.cm.u .bbl{background:#1a3a5c;color:#cce0ff;border:var(--nb-border);border-radius:var(--r2);box-shadow:var(--nb-shadow-dark)}
.cm.b .bbl{background:var(--bg3);color:var(--text);border:var(--nb-border);border-radius:var(--r2);box-shadow:2px 2px 0 var(--accent)}
.cm.b.err .bbl{background:#1f1010;border-color:#4a2020;color:var(--rose)}
.bbl .katex{color:var(--amber);font-size:.95em}
.bbl .katex-display{margin:.3em 0;overflow-x:auto}
.ct{font-size:10px;color:var(--text3);font-family:var(--mono);padding:0 3px}
.tbbl{background:var(--bg3);border:1px solid var(--line);border-radius:13px;border-bottom-left-radius:3px;padding:10px 13px}
.tdots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin:0 2px;animation:td 1.1s infinite}
.tdots span:nth-child(2){animation-delay:.18s}.tdots span:nth-child(3){animation-delay:.36s}
@keyframes td{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.quick{padding:6px 12px;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line);flex-shrink:0}
.quick::-webkit-scrollbar{display:none}
.qchip{flex-shrink:0;font-size:11px;font-family:var(--font-chat);font-weight:700;letter-spacing:.02em;background:var(--bg3);border:1px solid var(--line);color:var(--text2);padding:5px 10px;border-radius: var(--r3);cursor:pointer;transition:all .15s;white-space:nowrap}
.qchip:hover{border-color:var(--accent);color:var(--accent)}
.cinp{padding:8px 12px 12px;border-top:1px solid var(--line);display:flex;gap:7px;align-items:flex-end;flex-shrink:0}
.cinp textarea{flex:1;background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;font-family:var(--font-chat);font-size:13px;font-weight:500;color:var(--text);resize:none;outline:none;min-height:38px;max-height:90px;line-height:1.5;transition:border-color .2s}
.cinp textarea:focus{border-color:var(--accent)}
.cinp textarea::placeholder{color:var(--text3)}
.csend{width:38px;height:38px;border-radius:10px;background:var(--accent);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
.csend:active{transform:scale(.92)}.csend:disabled{background:var(--bg4);cursor:not-allowed}
.csend svg{width:15px;height:15px;fill:#fff}.csend:disabled svg{opacity:.3}

.ctts{background:transparent;border:none;color:var(--text2);font-size:16px;cursor:pointer;padding:6px;border-radius:6px;transition:all .15s;}
.ctts:hover{background:var(--bg3);color:var(--text);}
.ctts.off{opacity:0.4;text-decoration:line-through;color:var(--rose);}

.cmic{width:38px;height:38px;border-radius:10px;background:transparent;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;color:var(--text2);font-size:18px;margin-right:6px;}
.cmic:hover{background:var(--bg3);color:var(--text);}
.cmic.recording{background:#ff4757;color:#fff;border-color:#ff4757;animation:micPulse 1.5s infinite;}
@keyframes micPulse{0%{box-shadow:0 0 0 0 rgba(255,71,87,.4)}70%{box-shadow:0 0 0 12px rgba(255,71,87,0)}100%{box-shadow:0 0 0 0 rgba(255,71,87,0)}}
.overlay{
  position:fixed;inset:0;z-index:340;
  background:rgba(0,0,0,.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display:none;
  /* fade in/out */
  opacity:0;
  transition:opacity .22s ease;
}
.overlay.on{display:block;opacity:1}

/* ═══════════════════ QUIZ PAGE ═══════════════════ */
.quiz-wrap{max-width:680px;margin:0 auto;padding:24px 0 60px}
.quiz-header{text-align:center;margin-bottom:20px}
.quiz-header h2{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px}
.quiz-header p{font-size:13px;color:var(--text2)}

/* difficulty selector */
.quiz-diff{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.qdiff-btn{
  font-size:11px;font-family:var(--mono);
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:5px 14px;border-radius:var(--r3);
  cursor:pointer;border:var(--nb-border);
  background:var(--bg3);color:var(--text2);
  transition: transform .1s, box-shadow .1s;
}
.qdiff-btn.on, .qdiff-btn:hover{
  background:var(--accent);border:var(--nb-border);
  color:var(--bg);transform:translate(-2px,-2px);
  box-shadow:var(--nb-shadow);
}

.quiz-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
.qcat-btn{
  font-size:11px;
  font-family:var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 14px;
  border-radius: var(--r3);
  cursor:pointer;
  border: var(--nb-border);
  background: var(--bg3);
  color: var(--text2);
  transition: transform .1s, box-shadow .1s;
}
.qcat-btn:hover, .qcat-btn.on{
  background: var(--accent);
  border: var(--nb-border);
  color: var(--bg);
  transform: translate(-2px, -2px);
  box-shadow: var(--nb-shadow);
}
.quiz-divider {
  width: 40px;
  height: 2px;
  background: var(--line);
  margin: 12px auto 20px;
  border-radius: 2px;
  opacity: 0.8;
}

/* start button */
.quiz-start-btn{
  display:block; width:100%; max-width:300px; margin:0 auto 20px;
  background: var(--accent);
  border: var(--nb-border);
  border-radius: var(--r2);
  padding: 13px 20px;
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bg);
  cursor: pointer;
  box-shadow: var(--nb-shadow);
  transition: transform .1s, box-shadow .1s;
}
.quiz-start-btn:hover:not(:disabled){
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--line2);
}
.quiz-start-btn:active:not(:disabled){
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--line2);
}
.quiz-start-btn:disabled{
  background: var(--bg4);
  border-color: var(--line2);
  color: var(--text3);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* loading state */
.quiz-loading{text-align:center;padding:48px 20px;display:none}
.quiz-loading.show{display:block}
.ql-spinner{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}
.ql-text{font-size:13px;color:var(--text2)}
.ql-sub{font-size:11px;color:var(--text3);font-family:var(--mono);margin-top:4px}

.quiz-box{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:16px;min-height:200px}
.q-num{font-family:var(--mono);font-size:11px;color:var(--text3);margin-bottom:10px;letter-spacing:.05em}
.q-text{font-size:15px;font-weight:600;color:var(--text);line-height:1.6;margin-bottom:18px}
.q-text .katex{color:var(--amber)}
.q-opts{display:flex;flex-direction:column;gap:8px}
.qopt{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r2);padding:11px 15px;cursor:pointer;font-size:13px;color:var(--text2);transition:all .15s;text-align:left;display:flex;align-items:center;gap:10px}
.qopt:hover:not(:disabled){border-color:var(--accent);color:var(--text);background:var(--bg4)}
.qopt.correct{background:#0e2a1c;border-color:var(--green);color:var(--green)}
.qopt.wrong{background:#1f0f0f;border-color:var(--rose);color:var(--rose)}
.qopt:disabled{cursor:default}
.qopt .katex{color:inherit}
.q-letter{width:22px;height:22px;border-radius:5px;background:var(--bg4);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;flex-shrink:0}
.qopt.correct .q-letter{background:#0e2a1c;border-color:var(--green)}
.qopt.wrong .q-letter{background:#1f0f0f;border-color:var(--rose)}

.q-explain{background:var(--bg4);border:1px solid var(--line);border-radius:var(--r2);padding:12px 15px;margin-top:14px;font-size:13px;color:var(--text2);line-height:1.65;display:none}
.q-explain.show{display:block}
.q-explain strong{color:var(--text)}
.q-explain .katex{color:var(--amber)}

.quiz-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qbtn{font-size:13px;font-weight:500;padding:9px 20px;border-radius:var(--r2);cursor:pointer;transition:all .15s;font-family:var(--font)}
.qbtn-p{background:transparent;border:1px solid var(--line);color:var(--text2)}
.qbtn-p:hover{border-color:var(--line2);color:var(--text)}
.qbtn-n{background:var(--accent);border:1px solid transparent;color:#fff}
.qbtn-n:hover{background:#444444}
.qbtn:disabled{opacity:.35;cursor:not-allowed}
.q-prog{font-family:var(--mono);font-size:11px;color:var(--text3)}

.quiz-score{text-align:center;padding:40px 20px;display:none}
.quiz-score.show{display:block}
.score-big{font-size:56px;font-weight:800;color:var(--accent);line-height:1;margin-bottom:6px}
.score-label{font-size:13px;color:var(--text2);margin-bottom:20px}
.score-bar{height:6px;background:var(--bg4);border-radius:3px;overflow:hidden;margin-bottom:20px}
.score-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--green));transition:width 1s ease}
.score-detail{display:flex;gap:16px;justify-content:center;margin-bottom:24px}
.sd{text-align:center}.sd-num{font-size:22px;font-weight:700;margin-bottom:2px}.sd-lbl{font-size:11px;color:var(--text3);font-family:var(--mono)}
.sd.c .sd-num{color:var(--green)}.sd.w .sd-num{color:var(--rose)}

/* ═══════════════════ KALKULATOR PAGE — TRUE CHAT BUBBLE ═══════════════════ */
#page-kalk{padding:0 0 100px}

.calc-chatview{
  width:100%;
  max-width:600px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  padding:0;
}

/* sticky top header mirip header chat */
.calc-chathead{
  position:sticky;top:54px;z-index:50;
  background:rgba(14,17,23,.97);
  backdrop-filter: none;
  border-bottom:1px solid var(--line);
  padding:10px 16px;
  display:flex;align-items:center;gap:10px;
}
.calc-chathead-ava{
  width:34px;height:34px;border-radius:10px;
  background:var(--accent-d);border:1px solid #2a2a2a;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.calc-chathead-info{flex:1}
.calc-chathead-name{font-size:13px;font-weight:600;color:var(--text)}
.calc-chathead-sub{font-size:10px;color:var(--green);font-family:var(--mono)}

/* scroll area */
.calc-msgarea{
  flex:1;
  padding:14px 16px 20px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* satu "pesan" kalkulator */
.calc-msg{
  display:flex;
  align-items:flex-start;
  gap:9px;
}

/* avatar bulat kiri */
.cmsg-ava{
  flex-shrink:0;
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  border:1px solid var(--line);
  margin-top:2px;
}

/* wrapper kanan: nama + bubble */
.cmsg-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}

/* nama pengirim di atas bubble */
.cmsg-name{
  font-size:11px;font-weight:600;
  font-family:var(--mono);
  padding-left:2px;
}

/* bubble utama */
.cmsg-bubble{
  background:var(--bg3);
  border:1px solid var(--line);
  border-radius:16px;
  border-top-left-radius:4px;
  padding:13px 14px;
  width:100%;
}

/* judul dalam bubble */
.cb-subtitle{font-size:11px;color:var(--text3);font-family:var(--mono);margin-bottom:10px}

/* formula row */
.cc-formula{
  background:var(--bg4);border:1px solid var(--line2);
  border-radius:6px;padding:7px 10px;
  margin-bottom:11px;overflow-x:auto;
}
.cc-formula .katex{color:var(--amber);font-size:.9em}

/* field rows */
.cc-fields{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.cf-row{display:flex;align-items:center;gap:6px}
.cf-lbl{
  font-size:10px;color:var(--text2);
  width:100px;flex-shrink:0;
  font-family:var(--mono);line-height:1.3;
}
.cf-inp{
  flex:1;min-width:0;
  background:var(--bg4);border:1px solid var(--line);
  border-radius:6px;padding:7px 9px;
  font-family:var(--mono);font-size:12px;color:var(--text);
  outline:none;transition:border-color .2s;
}
.cf-inp:focus{border-color:var(--accent)}
.cf-inp::placeholder{color:var(--text3);font-size:10px}
.cf-unit{font-size:10px;color:var(--text3);font-family:var(--mono);width:24px;flex-shrink:0;text-align:right}
.cf-sel{
  flex:1;background:var(--bg4);border:1px solid var(--line);
  border-radius:6px;padding:7px 9px;
  font-family:var(--mono);font-size:11px;color:var(--text);outline:none;cursor:pointer;
}

/* hitung button */
.cc-calc-btn{
  width:100%;
  background:var(--accent-d);border:1px solid #2a2a2a;
  color:var(--accent);font-family:var(--font);font-size:12px;font-weight:600;
  padding:9px;border-radius:8px;cursor:pointer;
  transition:all .15s;margin-bottom:9px;
}
.cc-calc-btn:hover{background:#1a3a6a}

/* result bubble — muncul setelah hitung, seolah reply */
.cmsg-result-wrap{
  display:flex;align-items:flex-start;gap:9px;
  padding-left:43px; /* indent setara avatar */
}
.cmsg-result-bubble{
  background:var(--bg2);border:1px solid var(--line);
  border-radius:16px;border-top-left-radius:4px;
  padding:11px 14px;flex:1;
  display:none;
}
.cmsg-result-bubble.show{display:block}
.cmsg-result-bubble.err{border-color:#4a2020;background:#1a0f0f}
.crb-label{font-size:10px;color:var(--text3);font-family:var(--mono);margin-bottom:4px}
.crb-val{font-size:22px;font-weight:800;color:var(--accent);line-height:1.1}
.crb-unit{font-size:11px;color:var(--text3);font-family:var(--mono);margin-top:2px}
.crb-multi{display:flex;flex-direction:column;gap:8px}
.crb-row{display:flex;flex-direction:column;gap:1px}
.crb-row-lbl{font-size:10px;color:var(--text3);font-family:var(--mono)}
.crb-row-val{font-size:17px;font-weight:700;color:var(--accent)}
.crb-err{font-size:12px;color:var(--rose);font-family:var(--mono)}

/* ═══════════════════ TIMELINE PAGE ═══════════════════ */
.tl-wrap{max-width:720px;margin:0 auto;padding:24px 0 80px}
.tl-header{margin-bottom:28px}
.tl-header h2{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px}
.tl-header p{font-size:13px;color:var(--text2)}

/* filter era */
.tl-eras{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.tl-era-btn{font-size:11px;font-family:var(--mono);padding:5px 14px;border-radius: var(--r3);cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--text2);transition:all .15s}
.tl-era-btn.on{background:var(--accent-d);border-color:#2a2a2a;color:var(--accent)}

/* timeline vertical line */
.tl-list{position:relative;padding-left:32px}
.tl-list::before{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent),var(--purple),var(--teal));border-radius:2px;opacity:.4}

/* event item */
.tl-item{position:relative;margin-bottom:6px;animation:up .3s ease both}
.tl-item::before{
  content:'';position:absolute;left:-25px;top:18px;
  width:10px;height:10px;border-radius:50%;
  background:var(--bg);border:2px solid var(--accent);
  transition:all .2s;z-index:1;
}
.tl-item.open::before{background:var(--accent);box-shadow:0 0 8px var(--accent)66}

.tl-card{
  background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 16px;
  cursor:pointer;transition:border-color .15s,background .15s;
  user-select:none;
}
.tl-card:hover{border-color:var(--line2);background:var(--bg3)}
.tl-item.open .tl-card{border-color:var(--line2);background:var(--bg3)}

.tl-top{display:flex;flex-direction:column;gap:4px}
.tl-top-row{display:flex;align-items:center;gap:8px}
.tl-year{
  font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--accent);flex-shrink:0;
  background:var(--accent-d);padding:2px 8px;border-radius:5px;
  border:1px solid #2a2a2a;
}
.tl-title{font-size:14px;font-weight:600;color:var(--text);flex:1;line-height:1.4}
.tl-person{font-size:11px;color:var(--text2);font-style:italic;padding-left:2px}
.tl-chev{font-size:10px;color:var(--text3);transition:transform .2s;flex-shrink:0}
.tl-item.open .tl-chev{transform:rotate(180deg)}

.tl-body{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease,opacity .25s;opacity:0;
}
.tl-item.open .tl-body{max-height:300px;opacity:1}
.tl-body-inner{
  padding:12px 0 4px;
  border-top:1px solid var(--line);margin-top:10px;
}
.tl-desc{font-size:13px;color:var(--text);line-height:1.7;margin-bottom:8px}
.tl-impact{
  font-size:11px;font-family:var(--mono);color:var(--teal);
  background:#0a1e1e;border:1px solid var(--teal)33;
  border-radius:5px;padding:4px 10px;display:inline-block;
}
.tl-era-tag{
  font-size:10px;font-family:var(--mono);
  float:right;padding:3px 8px;border-radius:5px;
  border:1px solid transparent;
}
.era-kuno{background:#1a1200;border-color:#f5a62333;color:var(--amber)}
.era-modern{background:#0a1a30;border-color:#f1f1f133;color:var(--accent)}
.era-digital{background:#1a0a30;border-color:#9b72e633;color:var(--purple)}
.era-kontemporer{background:#0a1e1e;border-color:#2ec4b633;color:var(--teal)}

/* ═══════════════════ FEEDBACK FLOATING BUTTON ═══════════════════ */
.tour-overlay{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  transition:opacity .3s;
}
.tour-overlay.off{opacity:0}

/* spotlight cutout via box-shadow */
.tour-spotlight{
  position:fixed;z-index:901;
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.72);
  transition:all .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}

/* tooltip */
.tour-tip{
  position:fixed;z-index:902;
  background:var(--bg2);border:1px solid var(--accent);
  border-radius:14px;padding:16px 18px;
  max-width:280px;width:max-content;
  box-shadow:0 8px 32px #0008,0 0 0 1px var(--accent)22;
  animation:slideUp .25s ease;
  pointer-events:all;
}
.tour-tip-step{font-size:10px;font-family:var(--mono);color:var(--accent);margin-bottom:6px;letter-spacing:.06em}
.tour-tip-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.tour-tip-desc{font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:14px}
.tour-tip-btns{display:flex;gap:8px;align-items:center}
.tour-tip-next{
  background:var(--accent);border:none;border-radius:8px;
  color:#fff;font-family:var(--font);font-size:12px;font-weight:600;
  padding:7px 16px;cursor:pointer;transition:all .15s;
}
.tour-tip-next:hover{background:#444444}
.tour-tip-skip{
  background:none;border:none;color:var(--text3);
  font-family:var(--font);font-size:11px;cursor:pointer;
  padding:4px 8px;border-radius:6px;transition:color .15s;
}
.tour-tip-skip:hover{color:var(--text2)}
.tour-tip-dots{display:flex;gap:4px;margin-left:auto}
.tour-dot{width:6px;height:6px;border-radius:50%;background:var(--line2);transition:background .2s}
.tour-dot.on{background:var(--accent)}

/* tour trigger button (pojok kiri bawah) */
.tour-trigger{ display:none !important; }

/* ═══════════════════ PDF EXPORT ═══════════════════ */
.pdf-btn{
  display:flex;align-items:center;gap:7px;
  background:var(--bg3);border:1px solid var(--line);
  border-radius:var(--r2);color:var(--text2);
  font-family:var(--font);font-size:12px;font-weight:500;
  padding:7px 14px;cursor:pointer;transition:all .15s;
  flex-shrink:0;
}
.pdf-btn:hover{border-color:var(--rose);color:var(--rose);background:#1f0a0a}
.pdf-btn svg{width:14px;height:14px;fill:currentColor;flex-shrink:0}

/* ── LIGHT MODE ── */
body.light{
  /* ── NEUBRUTALISM LIGHT ── */
  --bg: #F5F0E8;
  --bg2: #FFFFFF;
  --bg3: #FAF7F2;
  --bg4: #F0EBE3;
  --bg5: #E8E0D5;

  --line: #0A0A0A;
  --line2: #1A1A1A;

  /* Light mode: hitam sebagai accent */
  --accent: #0A0A0A;
  --accent-glow: rgba(10, 10, 10, 0.06);
  --accent-d: rgba(10, 10, 10, 0.05);

  --text: #0A0A0A;
  --text2: #3D3530;
  --text3: #6B5E57;

  --green: #008055;
  --amber: #C07800;
  --rose: #CC2200;
  --purple: #6B2FBF;
  --teal: #007A66;
  --pink: #CC3366;

  /* Shadow offset di light mode: hitam solid (default) */
  --nb-shadow: 3px 3px 0 #0A0A0A;
  --nb-shadow-dark: 3px 3px 0 #0A0A0A;
  --nb-shadow-sm: 2px 2px 0 #0A0A0A;
  --nb-border: 2px solid #0A0A0A;
  --nb-border-accent: 2px solid #0A0A0A;

  --nb-yellow: 3px 3px 0 #FFEA00;
  --nb-red: 3px 3px 0 #FF3B3B;
  --nb-blue: 3px 3px 0 #3B82F6;
  --nb-green: 3px 3px 0 #00D084;
  --nb-purple: 3px 3px 0 #9B72E6;
  --nb-pink: 3px 3px 0 #FF6B9D;
  --nb-orange: 3px 3px 0 #FF8C42;
  --nb-teal: 3px 3px 0 #00D4AA;

  --shadow: 4px 4px 0 #0A0A0A;
  --glow: 4px 4px 0 #0A0A0A;
}
/* ── LIGHT MODE NEUBRUTALISM EXTRAS ── */
body.light .nav { background: #F5F0E8; border-bottom: var(--nb-border); }
body.light .bottom-nav { background: #F5F0E8; }
body.light .bottom-nav::after { display: none; }
body.light .calc-chathead { background: #F5F0E8; border-bottom: var(--nb-border); }
body.light .chat-mobile {
  background: var(--bg2);
  border-color: var(--line);
  box-shadow: -4px -4px 0 #0A0A0A;
}
body.light .cm.u .bbl {
  background: #FFEA00;
  color: #0A0A0A;
  border: 2px solid #0A0A0A;
  box-shadow: 2px 2px 0 #0A0A0A;
}
body.light .cm.b .bbl {
  background: #fff;
  color: var(--text);
  border: 2px solid #0A0A0A;
  box-shadow: 2px 2px 0 #0A0A0A;
}
body.light .onboard-card {
  background: #fff;
  border: 2px solid #0A0A0A;
  box-shadow: 4px 4px 0 #0A0A0A;
}
body.light .mt-tip {
  background: rgba(10,10,10,0.04);
  border: 2px solid #0A0A0A;
  box-shadow: 3px 3px 0 #0A0A0A;
}
body.light .sk-diagram{filter:none}

/* theme toggle button */
.theme-toggle-btn{
  width:34px; height:34px;
  border-radius: var(--r2);
  background: var(--bg3);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color: var(--text);
  flex-shrink:0;
  margin-left:6px;
  transition: transform .12s, box-shadow .12s;
  line-height:1;
}
.theme-toggle-btn:hover{
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--accent);
}
.theme-toggle-btn:active{
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--accent);
}
.theme-btn{
  width:34px; height:34px;
  border-radius: var(--r2);
  background: var(--bg3);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; flex-shrink:0;
  margin-left:6px;
  transition: transform .12s, box-shadow .12s;
  line-height:1;
}
.theme-btn:hover{
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--accent);
}

/* ═══ ONBOARDING POPUP ═══ */
.onboard-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:fadeIn .3s ease;
}
.onboard-overlay.hide{animation:fadeOut .25s ease forwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}

.onboard-card{
  background: var(--bg2);
  border: var(--nb-border);
  border-radius: var(--r);
  box-shadow: var(--nb-shadow);
  width:100%; max-width:420px;
  overflow:hidden;
  animation:slideUp .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* quote section atas */
.onboard-quote{
  background: var(--bg3);
  border-bottom: var(--nb-border);
  padding: 24px 22px 20px;
  position:relative;
}
.onboard-quote-icon{font-size:28px;margin-bottom:8px}
.onboard-quote-text{
  font-size:14px;font-style:italic;color:var(--text);
  line-height:1.7;margin-bottom:10px;min-height:60px;
}
.onboard-quote-src{font-size:11px;color:var(--accent);font-family:var(--mono)}
.onboard-quote-loading{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--text3);font-family:var(--mono);
}
.oql-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:td 1s infinite}
.oql-dot:nth-child(2){animation-delay:.15s}.oql-dot:nth-child(3){animation-delay:.3s}

/* fitur list */
.onboard-body{padding:20px 22px}
.onboard-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px}
.onboard-sub{font-size:12px;color:var(--text2);margin-bottom:16px}
.onboard-features{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.onboard-feat{
  display:flex; align-items:center; gap:12px;
  background: var(--bg3);
  border: var(--nb-border);
  border-radius: var(--r2);
  padding:10px 14px;
  box-shadow: 2px 2px 0 var(--line2);
}
.onboard-feat-icon{font-size:20px;flex-shrink:0}
.onboard-feat-title{font-size:13px;font-weight:600;color:var(--text)}
.onboard-feat-desc{font-size:11px;color:var(--text2)}
.onboard-btn{
  width:100%;
  background: var(--accent);
  border: var(--nb-border);
  border-radius: var(--r2);
  color: var(--bg);
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 13px;
  cursor: pointer;
  box-shadow: var(--nb-shadow);
  transition: transform .1s, box-shadow .1s;
}
.onboard-btn:hover{
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--line2);
}

/* ═══ KODE WARNA RESISTOR ═══ */
.resist-wrap{max-width:500px;margin:0 auto;padding:20px 0 60px}
.resist-header{margin-bottom:20px}
.resist-header h2{font-size:20px;font-weight:700;color:var(--text);margin-bottom:4px}
.resist-header p{font-size:13px;color:var(--text2)}

/* mode toggle */
.resist-mode{display:flex;gap:6px;margin-bottom:18px}
.rmode-btn{font-size:12px;font-family:var(--mono);padding:6px 16px;border-radius: var(--r3);cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--text2);transition:all .15s}
.rmode-btn.on{background:var(--accent-d);border-color:#2a2a2a;color:var(--accent)}

/* resistor SVG visual */
.resist-svg-wrap{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;margin-bottom:16px;text-align:center;
}
.resist-svg-wrap svg{max-width:100%;height:auto}

/* band selectors */
.resist-bands{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.rband-row{display:flex;align-items:center;gap:10px}
.rband-lbl{font-size:12px;color:var(--text2);font-family:var(--mono);width:80px;flex-shrink:0}
.rband-sel{
  flex:1;background:var(--bg3);border:1px solid var(--line);
  border-radius:var(--r3);padding:8px 10px;
  font-family:var(--mono);font-size:12px;color:var(--text);
  outline:none;cursor:pointer;
}
.rband-swatch{width:24px;height:24px;border-radius:5px;flex-shrink:0;border:1px solid var(--line)}

/* result */
.resist-result{
  background:var(--bg4);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;text-align:center;
}
.resist-result-val{font-size:28px;font-weight:800;color:var(--accent);font-family:var(--mono);margin-bottom:4px}
.resist-result-tol{font-size:13px;color:var(--text2);margin-bottom:8px}
.resist-result-range{font-size:11px;color:var(--text3);font-family:var(--mono)}

/* ═══ AI VISION ═══ */
.aiv-wrap{max-width:600px;margin:0 auto;padding:20px 0 80px}
.aiv-header{margin-bottom:16px}
.aiv-header h2{font-size:20px;font-weight:700;color:var(--text);margin-bottom:4px; text-shadow: 0 4px 10px rgba(0,0,0,0.3);}
.aiv-header p{font-size:13px;color:var(--text2)}

/* mode toggle */
.aiv-modes{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap; justify-content: center;}
.aivm-btn{
  flex:1;min-width:140px;
  display:flex;align-items:center;gap:8px;
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;cursor:pointer;transition:all .15s;
}
.aivm-btn.on{border-color:var(--accent);background:var(--accent-d)}
.aivm-btn:hover:not(.on){border-color:var(--line2)}
.aivm-icon{font-size:22px}
.aivm-info{ display: flex; flex-direction: column; gap: 2px; }
.aivm-title{font-size:13px;font-weight:600;color:var(--text);text-align:left}
.aivm-desc{font-size:10px;color:var(--text2);text-align:left}

/* upload zone */
.aiv-upload{
  border:2px dashed var(--line2);border-radius:var(--r);
  padding:32px 20px;text-align:center;cursor:pointer;
  transition:all .2s;margin-bottom:14px;position:relative;
  background:var(--bg2);
}
.aiv-upload:hover,.aiv-upload.drag{border-color:var(--accent);background:var(--accent-d)}
.aiv-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.aiv-upload-icon{font-size:36px;margin-bottom:8px}
.aiv-upload-txt{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.aiv-upload-sub{font-size:12px;color:var(--text2)}

/* preview */
.aiv-preview{
  position:relative;margin-bottom:14px;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);display:none;
}
.aiv-preview.show{display:block}
.aiv-preview img{width:100%;max-height:280px;object-fit:contain;background:var(--bg4)}
.aiv-preview-del{
  position:absolute;top:8px;right:8px;
  width:28px;height:28px;border-radius:8px;
  background:rgba(0,0,0,.7);border:none;color:#fff;
  font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}

/* analyze button */
.aiv-analyze-btn{
  width:100%;background:var(--accent);border:none;border-radius:var(--r);
  color:#fff;font-family:var(--font);font-size:14px;font-weight:700;
  padding:13px;cursor:pointer;transition:all .15s;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.aiv-analyze-btn:hover{background:#444444;transform:translateY(-1px)}
.aiv-analyze-btn:disabled{background:var(--bg4);color:var(--text3);cursor:not-allowed;transform:none}

/* result chat bubble style */
.aiv-result{display:none;animation:pageIn .3s ease}
.aiv-result.show{display:block}
.aiv-result-head{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.aiv-result-ava{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
}
.aiv-result-name{font-size:12px;font-weight:600;color:var(--accent);font-family:var(--mono)}
.aiv-result-bubble{
  background:var(--bg3);border:1px solid var(--line);
  border-radius:16px;border-top-left-radius:4px;
  padding:16px 18px;font-family:var(--font-chat);font-size:13px;font-weight:500;color:var(--text);
  line-height:1.75;word-break:break-word;
}
.aiv-result-bubble .katex{color:var(--amber)}
.aiv-result-bubble .katex-display{margin:.5em 0;overflow-x:auto}
.aiv-result-bubble strong{color:var(--text);font-weight:700}
.aiv-result-bubble em{color:var(--text2)}
.aiv-result-bubble code{font-family:var(--mono)}

/* loading dots in result */
.aiv-loading{
  display:none;align-items:center;gap:8px;
  padding:14px 18px;background:var(--bg3);
  border:1px solid var(--line);border-radius:16px;border-top-left-radius:4px;
}
.aiv-loading.show{display:flex}
.aiv-loading-txt{font-size:12px;color:var(--text3);font-family:var(--mono)}

/* try again */
.aiv-reset{
  margin-top:10px;background:transparent;border:1px solid var(--line);
  color:var(--text2);font-family:var(--font);font-size:12px;
  padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .15s;
}
.aiv-reset:hover{border-color:var(--accent);color:var(--accent)}
/* ═══════════════════ LOGIKA SIMULATOR ═══════════════════ */
.logika-wrap { max-width:680px; margin:0 auto; padding:24px 0 80px; }
.logika-header { text-align:center; margin-bottom:24px; }
.logika-header h2 { font-size:22px; font-weight:700; color:var(--text); margin-bottom:4px; }
.logika-header p { font-size:13px; color:var(--text2); }

.logic-board {
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; display:flex; flex-direction:column; gap:24px; margin-bottom:20px;
}
.logic-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* Switch Inputs */
.logic-inputs { display:flex; flex-direction:column; gap:16px; min-width:120px; }
.l-input { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.l-lbl { font-family:var(--mono); font-size:14px; font-weight:600; color:var(--text); width:30px; }
.l-switch {
  position:relative; width:52px; height:28px; background:var(--bg4);
  border-radius:14px; cursor:pointer; transition:background .3s;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.2); flex-shrink:0;
}
.l-switch.on { background:var(--green); }
.l-switch::after {
  content:'0'; position:absolute; top:2px; left:2px; width:24px; height:24px;
  background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; font-weight:700; color:#333;
  transition:transform .3s;
}
.l-switch.on::after { content:'1'; transform:translateX(24px); color:var(--green); }

/* Gate Selector */
.logic-gate {
  background:var(--bg3); border:1px solid var(--line); border-radius:12px; padding:16px;
  display:flex; flex-direction:column; align-items:center; gap:12px; flex:1; min-width:140px;
}
.gate-label { font-size:11px; font-family:var(--mono); color:var(--text3); letter-spacing:.05em; }
.gate-select {
  background:var(--bg); border:1px solid var(--accent); color:var(--accent);
  font-family:var(--mono); font-size:16px; font-weight:700; padding:8px 16px;
  border-radius:8px; cursor:pointer; outline:none; text-align:center;
  appearance:none; width:100%; max-width:120px; transition:all .2s;
}
.gate-select:hover { background:var(--accent-d); }

/* LED Output */
.logic-out { display:flex; flex-direction:column; align-items:center; gap:12px; justify-content:center; min-width:100px; }
.led-bulb {
  width:52px; height:52px; border-radius:50%;
  background:#1a1a1a; box-shadow:inset 0 4px 8px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.2);
  border:2px solid #333; transition:all .15s;
  display:flex; align-items:center; justify-content:center;
}
.led-bulb.on {
  background:#3ecf8e; border-color:#84f3bd;
  box-shadow:0 0 24px #3ecf8e, inset 0 0 12px #fff;
}
.led-val { font-family:var(--mono); font-size:18px; font-weight:800; color:#444; transition:color .15s; }
.led-bulb.on .led-val { color:#0a3a20; }
.led-lbl { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--text); }

/* Truth Table */
.tt-wrap { background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.tt-table { width:100%; border-collapse:collapse; text-align:center; font-family:var(--mono); font-size:13px; }
.tt-table th { background:var(--bg3); color:var(--text2); font-weight:600; padding:12px; border-bottom:1px solid var(--line); }
.tt-table td { padding:10px; border-bottom:1px solid var(--line); color:var(--text); transition:background .2s; }
.tt-table tr:last-child td { border-bottom:none; }
.tt-row.active td { background:var(--accent-d); color:var(--accent); font-weight:700; border-color:var(--accent)44; }

body.light .led-bulb { background:#e0e0e0; border-color:#ccc; box-shadow:inset 0 2px 5px rgba(0,0,0,.1); }
body.light .led-val { color:#a0a0a0; }
body.light .led-bulb.on { background:#22c55e; border-color:#4ade80; box-shadow:0 0 20px #22c55e66, inset 0 0 10px #fff; }
body.light .led-bulb.on .led-val { color:#fff; }

/* ── DESKTOP FONT ENHANCEMENTS (min-width: 768px) ── */
@media(min-width:768px){
  /* Kamus Header & Search */
  .sfield input { font-size: 16px; padding: 14px 18px 14px 44px; }
  .sico { font-size: 18px; left: 16px; }
  .chip { font-size: 13px; padding: 7px 18px; }
  
  /* Meta Headers */
  .slabel { font-size: 12px; }
  .scount { font-size: 14px; }
  .pdf-btn { font-size: 13px; padding: 8px 16px; }
  .pdf-btn svg { width: 16px; height: 16px; }

  /* Kamus Cards */
  .cen { font-size: 17px; margin-bottom: 3px; }
  .cid { font-size: 14px; }
  .ctag { font-size: 11px; padding: 4px 10px; }
  .cdesc { font-size: 15px; margin-top: 10px; }
  
  /* Sidebar Nav */
  .bnav-label { font-size: 15px; font-weight: 600; }
  .bnav-icon { font-size: 22px; }
  .bnav-item { padding: 18px 24px; gap: 16px; }

  /* Chat Sidebar */
  .cname { font-size: 15px; }
  .bbl { font-size: 14px; padding: 12px 16px; }
  .cinp textarea { font-size: 15px; padding: 12px 14px; }
  .csend svg { width: 18px; height: 18px; }
  .csend { width: 44px; height: 44px; }
}

/* ── SPLASH SCREEN INTRO — PUTIH POLOS NEOBRUTALISM ── */
#splash-screen{
  position:fixed;inset:0;z-index:10000;
  background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.8s cubic-bezier(0.87,0,0.13,1),opacity 0.5s ease;
}
#splash-screen.fade-out{transform:translateY(-100%);opacity:0;pointer-events:none}
.splash-content{
  text-align:center;display:flex;flex-direction:column;align-items:center;
  padding:0 16px; background:transparent; border:none; box-shadow:none;
}
.splash-bolt{font-size:80px;filter:drop-shadow(0 0 20px var(--accent));opacity:0;transform:scale(0);animation:boltStrike 0.6s cubic-bezier(0.175,0.885,0.32,1.275) forwards}
.splash-logo{width:120px;height:120px;object-fit:contain;opacity:0;transform:scale(0);animation:boltStrike 0.6s cubic-bezier(0.175,0.885,0.32,1.275) forwards; filter:none; border-radius:12px; border:none; box-shadow:none;}
.splash-text{margin-top:20px;font-family:var(--font-h);font-size:32px;font-weight:700;color:var(--text);letter-spacing:-0.02em;opacity:0;transform:translateY(10px);animation:textRev 0.5s ease 0.4s forwards}
.splash-text span{color:var(--text); font-weight:800;}
.splash-text.typewriter{
  opacity:1; transform:none; animation:none;
  overflow:hidden; white-space:nowrap; border-right:3px solid var(--text);
  width:0; max-width: 13ch;
  animation: typing 1.3s steps(11) 0.85s forwards, caretBlink 0.65s step-end 0.85s 4, caretOff 0.2s forwards 2.6s;
}
.splash-sub{
  margin-top:10px; font-family:var(--font); font-size:13px; font-weight:500; color:var(--text2);
  letter-spacing:.02em; line-height:1.5; max-width: 320px; text-align:center;
  opacity:0; transform: translateY(6px);
  animation: subFade 0.5s ease 1.9s forwards;
}
.splash-by{
  margin-top:16px; font-family:var(--mono); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#FFEA00; background:#0A0A0A; border:2px solid #FFEA00; padding:8px 14px; border-radius:var(--r3);
  box-shadow:3px 3px 0 #FFEA00; opacity:0; transform:translateY(6px);
  animation: subFade 0.5s ease 2.35s forwards;
  max-width:360px; text-align:center; line-height:1.6; display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px;
}
.splash-smile{ display:inline-flex; align-items:center; justify-content:center; color:#FFEA00; flex-shrink:0; }
.splash-smile svg{ width:16px; height:16px; stroke:#FFEA00; }
@keyframes typing{ from{width:0} to{width:13ch} }
@keyframes caretBlink{ 0%,100%{border-color:transparent} 50%{border-color:#FFEA00} }
@keyframes caretOff{ to{border-color:transparent} }
@keyframes subFade{ to{opacity:1; transform:translateY(0)} }
@keyframes boltStrike{
  0%{opacity:0;transform:scale(0) rotate(-20deg)}
  70%{opacity:1;transform:scale(1.2) rotate(10deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}

/* ── PROJECT HUB ── */
.projects-wrap { max-width: 900px; margin: 0 auto; padding: 20px 0; }
.projects-header { margin-bottom: 30px; text-align: center; }
.projects-header h2 { font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 8px; font-family: var(--font-h); }
.projects-header p { color: var(--text2); font-size: 14px; }

.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.prj-card {
  background: var(--bg2);
  border: var(--nb-border);
  border-radius: var(--r);
  padding: 20px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  box-shadow: var(--nb-shadow-dark);
}
.prj-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--nb-shadow);
  border-color: var(--accent);
  background: var(--bg3);
}
.prj-card::before { display: none; }

.prj-card-title { font-size: 18px; font-weight: 700; color: var(--text); font-family: var(--font-h); line-height: 1.3; }
.prj-card-desc { font-size: 13px; color: var(--text2); line-height: 1.5; flex: 1; }
.prj-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.prj-card-diff { font-size: 10px; font-family: var(--mono); padding: 3px 10px; border-radius: var(--r3); font-weight: 700; text-transform: uppercase; }
.diff-mudah {
  background: rgba(0, 208, 132, 0.12);
  color: var(--green);
  border: 2px solid var(--green);
  border-radius: var(--r3);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .04em;
  box-shadow: 2px 2px 0 var(--green);
}
.diff-menengah {
  background: rgba(255, 234, 0, 0.10);
  color: var(--amber);
  border: 2px solid var(--amber);
  border-radius: var(--r3);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .04em;
  box-shadow: 2px 2px 0 var(--amber);
}
.diff-lanjut, .diff-advanced, .diff-sulit {
  background: rgba(255, 59, 59, 0.10);
  color: var(--rose);
  border: 2px solid var(--rose);
  border-radius: var(--r3);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .04em;
  box-shadow: 2px 2px 0 var(--rose);
}

/* ── DETAIL VIEW ── */
.pd-wrap { max-width: 800px; margin: 0 auto; padding: 20px 0; }
.pd-back {
    background: none; border: 1px solid var(--line); color: var(--text2);
    padding: 8px 16px; border-radius: var(--r2); cursor: pointer;
    font-size: 13px; font-weight: 600; margin-bottom: 24px; transition: all 0.2s;
}
.pd-back:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-d); }

.pd-header { margin-bottom: 32px; }
.pd-title { font-size: 32px; font-weight: 800; color: var(--text); font-family: var(--font-h); letter-spacing: -0.02em; margin-bottom: 8px; }
.pd-meta { display: flex; align-items: center; gap: 12px; }

.pd-section { margin-bottom: 40px; }
.pd-section-h { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }

.pd-components { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.pd-comp-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pd-comp-item { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
.pd-comp-item::before { content: '•'; color: var(--accent); font-weight: 800; font-size: 18px; }

.pd-schema-img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg3); display: block; }

.pd-code-wrap { position: relative; background: #0d1117; border-radius: var(--r2); border: 1px solid var(--line2); overflow: hidden; }
.pd-code-header { background: #161b22; padding: 8px 16px; border-bottom: 1px solid var(--line2); display: flex; align-items: center; justify-content: space-between; }
.pd-code-lang { font-family: var(--mono); font-size: 11px; color: var(--text3); text-transform: uppercase; }
.pd-code-copy {
    background: var(--bg4); border: 1px solid var(--line2); color: var(--text2);
    font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all 0.2s;
}
.pd-code-copy:hover { border-color: var(--accent); color: var(--accent); }
.pd-code-pre { padding: 16px; overflow-x: auto; margin: 0; white-space: pre-wrap; }
.pd-code-pre code { font-family: var(--mono); font-size: 13px; color: #e6edf3; line-height: 1.6; }

/* Step Table */
.pd-table-wrap { overflow-x: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); }
.pd-table { width: 100%; border-collapse: collapse; min-width: 400px; }
.pd-table th { background: var(--bg3); text-align: left; padding: 14px 16px; font-size: 12px; font-family: var(--mono); color: var(--text3); border-bottom: 1px solid var(--line); }
.pd-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; transition: all 0.2s; }
.pd-table tr:hover { background: var(--bg3); }
.pd-table tr.completed { background: rgba(16, 185, 129, 0.03); }
.pd-table tr.completed td { opacity: 0.5; }
.pd-table tr.completed .pd-step-txt { text-decoration: line-through; }

.pd-check { width: 40px; text-align: center; position: relative; }
.pd-check-input {
    width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line2);
    background: var(--bg4); appearance: none; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.pd-check-input:checked { background: var(--green); border-color: var(--green); }
.pd-check-input:checked::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 800; }

.pd-step-comp { font-weight: 600; color: var(--accent); font-size: 13px; display: block; margin-bottom: 4px; }
.pd-step-txt { font-size: 14px; color: var(--text); line-height: 1.5; }

/* ── AI GENERATOR BOX ── */
.prj-generator-box { 
    margin: 30px auto; max-width: 600px; display: flex; gap: 10px; 
    background: var(--bg2); border: 1px solid var(--line); padding: 8px; border-radius: var(--r);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.prj-input-wrapper { flex: 1; }
.prj-input-wrapper input {
    width: 100%; height: 48px; background: none; border: none; color: var(--text); padding: 0 15px; 
    font-size: 15px; outline: none; font-weight: 500;
}
.prj-gen-btn { 
    background: var(--accent); color: var(--bg); border: none; padding: 0 24px; border-radius: var(--r2); 
    font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s;
}
/* Kontras teks pada tombol berlatar --accent (accent selalu invers dari --bg) */
.qbtn-n, .tour-tip-next, .onboard-btn, .aiv-analyze-btn {
  color: var(--bg) !important;
}
.prj-gen-btn:hover { background: var(--accent-h); transform: translateY(-2px); box-shadow: var(--glow); }
.prj-gen-btn .btn-ico { font-size: 18px; }

.prj-loading { 
    text-align: center; margin: 40px 0; color: var(--text2); 
    display: flex; flex-direction: column; align-items: center; gap: 16px; 
    animation: fadeIn 0.4s ease;
}
.prj-loading p { font-size: 14px; color: var(--text3); font-style: italic; }
.prj-spinner {
    width: 44px; height: 44px; border: 4px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
    animation: prjSpin 1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}
@keyframes prjSpin { to { transform: rotate(360deg); } }
.hide { display: none !important; }

/* ── PROJECT UPGRADE STYLES ── */
.pd-disclaimer {
  background: rgba(245, 158, 11, 0.08); 
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--r2);
  padding: 14px 18px;
  margin-bottom: 30px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  animation: pageIn 0.5s ease;
}
.pd-disclaimer-icon {
  font-size: 20px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.4));
}
.pd-disclaimer-text {
  font-size: 13px;
  color: #fbbf24; /* Lighter amber for better readability on dark */
  line-height: 1.6;
  font-weight: 500;
}
.pd-table code {
  background: var(--bg4);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--line);
}

/* ── MARKDOWN ELEMENTS INSIDE .bbl (ElektroBot chat) ── */
.bbl { overflow: hidden; }
.bbl ul, .bbl ol { padding-left: 1.4em; margin: 6px 0; }
.bbl li { margin-bottom: 3px; line-height: 1.55; }
.bbl p { margin: 4px 0; }
.bbl h1, .bbl h2, .bbl h3, .bbl h4 { margin: 10px 0 4px; font-family: var(--font-h, inherit); font-weight: 700; }
.bbl code { background: var(--bg4, rgba(0,0,0,.25)); padding: 1px 5px; border-radius: 3px; font-size: .88em; font-family: var(--mono); }
.bbl pre { background: var(--bg4, rgba(0,0,0,.25)); border: 1px solid var(--line); padding: 10px; overflow-x: auto; font-size: 12px; margin: 6px 0; border-radius: 4px; }
.bbl pre code { background: none; padding: 0; }
.bbl blockquote { border-left: 3px solid var(--accent); padding-left: 10px; margin: 6px 0; color: var(--text2); font-style: italic; }
.bbl strong { font-weight: 700; }
.bbl em { font-style: italic; }

/* ── MARKDOWN TABLE STYLING ── */
.bbl table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
  border-radius: var(--r3);
  overflow: hidden;
  border: 1px solid var(--line2);
}
.bbl th, .bbl td {
  padding: 8px 12px;
  border: 1px solid var(--line2);
  text-align: left;
}
.bbl th {
  background: var(--bg4);
  font-weight: 600;
  color: var(--text);
  border-bottom: 2px solid var(--accent);
}
.bbl tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}

/* ═══════════════════ PRINT CSS FOR PDF EXPORT ═══════════════════ */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  
  /* Sembunyikan navigasi & UI yang ga perlu di-print */
  .nav, .bottom-nav, .chat-sidebar, .fab, .chat-fab-left, .chat-fab-left-wrap, .tour-trigger, .sbar, .fbar, .pdf-btn, .wm {
    display: none !important;
  }
  
  .page {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  
  /* General Print Cleanup: cegah patah di tengah card */
  .card {
    page-break-inside: avoid !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    background: #fff !important;
    margin-bottom: 12px !important;
    transform: none !important;
  }
  
  /* Fix Text Overlap: pisahkan judul dan subtitle dgn margin/gap */
  .cleft {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .cen, .cid {
    display: block !important;
    margin: 0 !important;
  }
  .cen { color: #000 !important; }
  .cid { color: #444 !important; font-style: italic !important; }

  /* Fix Stretched Text */
  .cdesc, .etext {
    text-align: left !important;
    letter-spacing: normal !important;
    color: #222 !important;
  }

  .ctop {
    align-items: flex-start !important;
  }

  .ctag {
    border: 1px solid #888 !important;
    color: #222 !important;
    background: transparent !important;
  }

  .cchev, .eask, .eformula button, .ambient-bg {
    display: none !important;
  }

  /* Force Expand All Cards in Print */
  .cexp {
    max-height: none !important;
    opacity: 1 !important;
    display: block !important;
    overflow: visible !important;
  }
  
  .eformula {
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
    color: #000 !important;
    break-inside: avoid !important;
  }
  .katex {
    color: #000 !important;
  }
}

/* ── Gemini-Style Bottom Sheet Overrides ── FIXED: no peek when closed ── */
.chat-mobile {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(calc(100% + 40px)) !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.3s !important;
  box-shadow: -4px -4px 0 var(--accent) !important;
  border-top: var(--nb-border) !important;
  border-left: var(--nb-border) !important;
  border-right: var(--nb-border) !important;
  border-radius: var(--r) var(--r) 0 0 !important;
  height: 90dvh !important; /* height mobile */
}
@media(min-width:768px){
  .chat-mobile {
    height: 70vh !important; /* height desktop */
  }
}
.chat-mobile.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
  transform: translateY(0) !important;
}
.chat-mobile:not(.open) .chat-handle { display: none !important; }
.chat-handle {
  width: 40px;
  height: 5px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  margin: 12px auto 8px;
  flex-shrink: 0;
}

/* ── Premium SaaS Sidebar & Header Overrides ── NEUBRUTALISM ADJUSTED */
@media(min-width:768px){
  .bottom-nav { width: 240px !important; border-right: var(--nb-border) !important; }
  .bnav-item { flex-direction: row !important; padding: 10px 16px !important; gap: 14px !important; border-radius: var(--r2) !important; margin: 3px 12px !important; font-weight: 600 !important; font-size: 14.5px !important; transition: transform .1s, box-shadow .1s, border-color .1s, background .1s !important; border: 2px solid transparent !important; }
  .bnav-item.on { background: var(--accent) !important; border: var(--nb-border) !important; color: var(--bg) !important; box-shadow: var(--nb-shadow) !important; transform: none !important; }
  .bnav-item.on:hover { background: var(--accent) !important; border: var(--nb-border) !important; color: var(--bg) !important; box-shadow: var(--nb-shadow) !important; transform: none !important; }
  .bnav-item.on:hover .bnav-label { color: var(--bg) !important; }
  .bnav-item:hover { background: var(--bg3) !important; border-color: var(--line2) !important; color: var(--text) !important; transform: translate(-2px, -2px) !important; box-shadow: 3px 3px 0 var(--line2) !important; }
  .bnav-item:hover .bnav-label { color: var(--text) !important; }
  .page { margin-left: 240px !important; }
}
.sfield { max-width: 440px !important; }
.sfield input { background: var(--bg2) !important; border: var(--nb-border) !important; border-radius: var(--r3) !important; padding: 10px 14px 10px 38px !important; box-shadow: var(--nb-shadow-dark) !important; }
.pdf-btn { background: var(--accent) !important; border-radius: 10px !important; padding: 10px 20px !important; font-weight: 700 !important; box-shadow: 0 4px 15px rgba(79, 156, 249, 0.2) !important; }
.pdf-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(79, 156, 249, 0.3) !important; }

/* ── Dedicated Chatbot Page Styles ── */
.chat-page-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  font-family: var(--font);
}
.chat-header {
  padding: 16px 20px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
}
.chat-back {
  background: var(--bg3);
  border: 1px solid var(--line2);
  color: var(--text);
  padding: 8px 16px;
  border-radius: var(--r3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.chat-back:hover { background: var(--bg4); transform: translateX(-4px); }
.chat-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-logo {
  width: 34px;
  height: 34px;
  background: var(--accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
}
.chat-h-info .chat-h-name { font-weight: 700; font-size: 16px; color: var(--text); }
.chat-h-info .chat-h-status { font-size: 11px; color: var(--green); display: flex; align-items: center; gap: 4px; }
.chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px 120px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.chat-bubble {
  max-width: 85%;
  padding: 14px 20px;
  border-radius: 20px;
  font-family: var(--font-chat);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  animation: bubbleAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes bubbleAppear {
  from { opacity: 0; transform: translateY(15px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-bubble-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent), #3b82f6);
  color: white;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}
.chat-bubble-ai {
  align-self: flex-start;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.chat-input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  pointer-events: none;
  z-index: 200;
}
.chat-model-switcher {
  max-width: 800px;
  margin: 0 auto 12px;
  display: flex;
  justify-content: center;
  pointer-events: auto;
}
.model-selector-new {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: none;
  color: var(--text2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.model-selector-new:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: var(--accent);
  color: var(--text);
}
.chat-input-wrap {
  pointer-events: auto;
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 8px 8px 8px 16px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-input-wrap:focus-within {
  border-color: rgba(79, 156, 249, 0.4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(79, 156, 249, 0.2);
}
.chat-add-btn {
  background: transparent;
  border: none;
  color: var(--text2);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.chat-add-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
.chat-input-wrap textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  padding: 10px 0;
  font-size: 16px;
  font-family: var(--font-chat);
  font-weight: 500;
  line-height: 1.5;
  resize: none;
  max-height: 200px;
  min-height: 24px;
}
.chat-input-wrap textarea::placeholder {
  color: var(--text3);
  opacity: 0.8;
}
.chat-send-btn {
  width: 44px;
  height: 44px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-bottom: 2px;
}
.chat-send-btn:hover:not(:disabled) {
  background: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.chat-send-btn:disabled {
  background: var(--bg3);
  opacity: 0.5;
  cursor: not-allowed;
}
.chat-send-btn svg {
  width: 20px;
  height: 20px;
}
.chat-branding-link {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  padding: 4px 8px;
  background: rgba(79, 156, 249, 0.1);
  border-radius: 6px;
  margin-top: 4px;
  border: 1px solid rgba(79, 156, 249, 0.2);
}

/* ── SPA-Style View Transitions ── */
@view-transition {
  navigation: auto;
}

body {
  animation: pageFadeIn 0.3s ease-out;
}

body.fade-out {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Smooth Navigation Overrides ── */
.bnav-item, .chat-back {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Markdown & Math Chat Enhancements ── */
.chat-bubble p { margin: 0; }
.chat-bubble p + p { margin-top: 10px; }
.chat-bubble ul, .chat-bubble ol { margin: 10px 0; padding-left: 1.4em; }
.chat-bubble { overflow: hidden; }
.chat-bubble li { margin-bottom: 4px; }
.chat-bubble code {
  background: rgba(0,0,0,0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Fira Code', monospace;
  font-size: 0.9em;
}
.chat-bubble pre {
  background: #0f172a;
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 10px 0;
  border: 1px solid var(--line);
}
.chat-bubble pre code { background: none; padding: 0; }

/* KaTeX Overflow Fix */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
  margin: 0.5em 0;
}
.chat-bubble .katex { font-size: 1.1em; }

/* ── Vision & Attachment UI Styles ── */
.model-selector {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
  margin-left: 10px;
}
.model-selector:hover { border-color: var(--accent); }

.image-preview-bar {
  background: var(--bg2);
  border-top: 1px solid var(--line);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.preview-container {
  position: relative;
  min-width: 60px;
  height: 60px;
  border-radius: 8px;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 15px;
  border: 2px solid var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.preview-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.file-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  max-width: 150px;
}
.file-icon { font-size: 1.5rem; }
.file-name {
  font-size: 0.75rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.remove-img-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 5;
}

.chat-tool-btn {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-tool-btn:hover { background: var(--bg3); color: var(--accent); }

.chat-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: chat-spin 0.8s linear infinite;
}
@keyframes chat-spin {
  to { transform: rotate(360deg); }
}

.user-msg-img {
  max-width: 200px;
  border-radius: 12px;
  margin-bottom: 8px;
  display: block;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* --- Chat Pro Features Actions --- */
.chat-header-actions {
  display: flex;
  gap: 8px;
  margin-right: 12px;
}
.chat-action-btn {
  background: var(--bg3);
  border: 1px solid var(--line2);
  color: var(--text2);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.chat-action-btn:hover {
  background: var(--bg4);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* --- Code Block Copy Button --- */
.code-block-wrapper {
  position: relative;
  margin: 14px 0;
}
.copy-code-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}
.copy-code-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.copy-code-btn.copied {
  background: #10b981;
  color: white;
  border-color: #10b981;
}

/* Fix mobile header for history actions */
@media(max-width: 600px) {
  .chat-header-actions { order: 2; margin-right: 0; }
  .chat-back { order: 4; width: 100%; margin-top: 8px; justify-content: center; }
}

/* ── MOBILE UX OPTIMIZATIONS ── */
.u-hide-mobile {
  display: inline-block;
}

@media (max-width: 500px) {
  .u-hide-mobile { display: none !important; }
  
  .chat-page-body {
    height: 100dvh; /* Use dynamic viewport height to prevent keyboard issues */
  }

  .chat-header {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .chat-title-wrap {
    order: 1;
    gap: 8px;
  }

  .chat-logo {
    width: 28px;
    height: 28px;
    font-size: 16px;
    border-radius: 8px;
  }

  .chat-h-info .chat-h-name {
    font-size: 14px;
  }

  .chat-header-actions {
    order: 2;
    margin-right: 0;
    gap: 6px;
  }

  .chat-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .chat-back {
    order: 4;
    padding: 6px 12px;
    font-size: 11px;
    position: absolute;
    right: 14px;
    top: 52px; /* Position next to/below selector */
  }
  
  /* Make model switcher its own row on mobile */
  .chat-model-switcher-header {
    order: 3;
    width: calc(100% - 100px); /* Leave room for back button if needed, or make it full */
    width: 100%;
    margin-top: 2px;
  }

  .model-selector-header {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-family: var(--font);
    outline: none;
  }

  .chat-history {
    padding: 12px 12px 150px; /* Extra bottom space for 2-row fixed input */
    gap: 12px;
  }

  .chat-bubble {
    max-width: 92%;
    padding: 12px 16px;
    font-size: 14px;
  }

  .chat-input-area {
    padding: 10px 10px 20px;
  }

  .chat-input-wrap {
    padding: 6px 6px 6px 14px;
    border-radius: 24px;
  }

  .chat-input-wrap textarea {
    font-size: 15px; /* Prevent auto-zoom on some browsers, or stay at 16 if preferred */
    padding: 8px 0;
  }

  .chat-send-btn {
    width: 40px;
    height: 40px;
  }
}

/* -- NEW ONBOARDING MODAL -- */
.onboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.onboard-overlay.on { opacity: 1; visibility: visible; }

.onboard-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg2);
  border-radius: var(--r);
  border: var(--nb-border);
  overflow: hidden;
  box-shadow: var(--nb-shadow);
  animation: slideUp 0.3s cubic-bezier(.34,1.56,.64,1);
}

.onboard-top {
  padding: 24px;
  background: var(--bg3);
  border-bottom: var(--nb-border);
}

.onboard-quote-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.quote-icon { font-size: 24px; }

.quote-content { flex: 1; }

#dynamic-quote {
  font-size: 14px;
  color: #ececec;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 8px;
}

.quote-src {
  font-size: 12px;
  color: #b4b4b4;
  font-weight: 500;
}

.quote-src .bot-name { color: #4f9cf9; font-weight: 700; }

.onboard-body { padding: 24px; }

.feat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.feat-card {
  background: #2a2a2a;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s ease;
}

.feat-card:hover { transform: translateX(5px); }

.feat-icon { font-size: 20px; }

.feat-info { display: flex; flex-direction: column; gap: 2px; }

.feat-info strong {
  font-size: 14px;
  color: #f1f1f1;
}

.feat-info span {
  font-size: 12px;
  color: #b4b4b4;
}

.onboard-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onboard-actions button {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-pdf {
  background: #2a2a2a;
  color: #ececec;
  border: 1px solid #333;
}

.btn-pdf:hover { background: #333; }

.btn-primary {
  background: #4f9cf9;
  color: #fff;
}

.btn-primary:hover {
  background: #3a8de8;
  transform: translateY(-2px);
}

@keyframes slideUp { from { opacity: 0; transform: translateY(30px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.onboard-overlay.hide {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* ── AI PARSER & KATEX SUPPORT ── */
.katex-display-wrap {
  margin: 1.5rem 0 !important;
  padding: 1rem !important;
  background: var(--bg4);
  border-radius: 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
}
.katex-inline-wrap {
  padding: 0 2px;
}
.q-explain br {
  margin-bottom: 0.5rem;
}
.q-text div { /* For the ▸ list items from parseAIText */
  margin: 0.5rem 0;
}

/* ═══════════════════════════════════════════════════════════
   ── PRINT STYLES (PDF EXPORT) ──
   ═══════════════════════════════════════════════════════════ */
@media print {
  /* Hide all non-essential UI */
  .nav, .bottom-nav, .chat-sidebar, .fab, .chat-mobile, .overlay, 
  .pdf-btn, .sbar, .fbar, .chat-fab-left-wrap, .wm, 
  .sheet-overlay, .more-sheet, .theme-btn,
  .csend, .cmic, .cback, .quick, .cinp {
    display: none !important;
  }

  /* Force white background and black text */
  html, body {
    background: #fff !important;
    color: #000 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .page {
    display: block !important;
    margin: 0 !important;
    padding: 20px !important;
    width: 100% !important;
    max-width: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: #fff !important;
  }

  /* Reset Card Styles for Printing */
  .grid {
    display: block !important;
    gap: 0 !important;
  }

  .card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    padding: 15px !important;
    box-shadow: none !important;
    transform: none !important;
    page-break-inside: avoid !important;
  }

  .card:hover { transform: none !important; }
  .card::before { display: none !important; }

  /* Expanded content visibility */
  .cexp {
    max-height: none !important;
    opacity: 1 !important;
    display: block !important;
  }

  .expbody {
    border-top: 1px solid #eee !important;
  }

  /* Text colors for high contrast */
  .cen, .cname, .ccore-title, .onboard-title {
    color: #000 !important;
  }

  .cid, .cdesc, .etext, .ccore-sub, .onboard-sub {
    color: #333 !important;
  }

  /* Formulas */
  .eformula {
    background: #f9f9f9 !important;
    border: 1px solid #eee !important;
  }
  
  .katex {
    color: #000 !important;
  }

  /* Table of contents or specific print header if needed */
  .smeta {
    border-bottom: 2px solid #000 !important;
    margin-bottom: 30px !important;
    padding-bottom: 10px !important;
  }

  .slabel {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #000 !important;
    letter-spacing: normal !important;
  }

  .scount {
    font-size: 14px !important;
    color: #666 !important;
  }

  /* Footer for each page */
  footer {
    display: none !important;
  }
}

/* -- WIKIPEDIA INTEGRATION -- */
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 8px;
}
.card-actions .eask, .card-actions .ewiki {
  flex: 1;
  text-align: center;
  justify-content: center;
}

.ewiki {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--text2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r2);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ewiki:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-d);
}
.ewiki.active {
  background: var(--accent-d);
  border-color: var(--accent);
  color: var(--accent);
}

.wiki-res {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
  opacity: 0;
  background: var(--bg4);
  border-radius: 12px;
}
.wiki-res.show {
  max-height: 600px;
  opacity: 1;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  animation: wikiFadeIn 0.4s ease;
}
@keyframes wikiFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.wiki-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media(min-width: 480px) {
  .wiki-content { flex-direction: row; align-items: flex-start; }
}
.wiki-img {
  width: 100px;
  height: auto;
  min-height: 100px;
  border-radius: 8px;
  object-fit: cover;
  background: #000;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.wiki-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wiki-title-ref {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: -4px;
}
.wiki-text p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wiki-link {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--mono);
}
.wiki-link:hover { text-decoration: underline; }
.wiki-retry {
  align-self: flex-start;
  cursor: pointer;
  background: var(--accent);
  color: var(--bg) !important;
  border: none;
  padding: 6px 14px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(79,156,249,.25);
}
.wiki-retry:hover { filter: brightness(1.1); }
.wiki-retry:disabled { opacity: .5; cursor: wait; }

/* -- TECH NEWS PAGE -- */
#page-news { padding-top: 10px; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

@media(max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; gap: 16px; }
}

.news-card {
  background: var(--bg2);
  border: var(--nb-border);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  animation: cardEntrance 0.5s cubic-bezier(0.4,0,0.2,1) both;
  box-shadow: var(--nb-shadow-dark);
}
.news-card:nth-child(6n+1){ box-shadow: var(--nb-yellow); }
.news-card:nth-child(6n+2){ box-shadow: var(--nb-red); }
.news-card:nth-child(6n+3){ box-shadow: var(--nb-blue); }
.news-card:nth-child(6n+4){ box-shadow: var(--nb-green); }
.news-card:nth-child(6n+5){ box-shadow: var(--nb-purple); }
.news-card:nth-child(6n+6){ box-shadow: var(--nb-orange); }
.news-card:hover {
  transform: translate(-3px,-3px);
  border-color: var(--line2);
  box-shadow: 4px 4px 0 var(--line2);
}

.news-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: var(--bg3);
  border-bottom: var(--nb-border);
}

.news-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.news-card:hover .news-img { transform: scale(1.1); }

.news-date {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #0A0A0A;
  color: #FFEA00;
  font-family: var(--font-chat);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: var(--r3);
  border: var(--nb-border);
  box-shadow: 2px 2px 0 var(--line2);
  z-index: 2;
}

.news-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-source {
  font-family: var(--font-chat);
  font-size: 10px;
  color: var(--text);
  background: var(--bg3);
  border: var(--nb-border);
  border-radius: var(--r3);
  padding: 3px 10px;
  display:inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
  font-weight: 800;
  box-shadow: 2px 2px 0 var(--line2);
  align-self: flex-start;
}

.news-title {
  font-family: var(--font-h);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-desc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.vtpl-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius: var(--r3);
  border:var(--nb-border);
  background:var(--bg3);
  color:var(--text);
  font-family:var(--font-chat);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:2px 2px 0 var(--line2);
  transition:transform .1s, box-shadow .1s, border-color .1s;
}
.vtpl-chip:hover { background:var(--accent); color:var(--bg); border-color:#0A0A0A; transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--line2); }
.news-btn {
  display: inline-flex; align-items:center; gap:6px;
  width: fit-content;
  background: var(--accent);
  border: var(--nb-border);
  color: var(--bg);
  font-family: var(--font-chat);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 16px;
  border-radius: var(--r2);
  text-decoration: none;
  box-shadow: var(--nb-shadow-sm);
  transition: transform .1s, box-shadow .1s;
  align-self: flex-start;
}

.news-btn:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: #0A0A0A;
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 #0A0A0A;
}
.news-btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 #0A0A0A; }

.news-refresh:hover {
  background: var(--accent-d) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: rotate(30deg);
}

.news-loading {
  animation: fadeIn 0.3s ease;
}

/* -- NEWS TRANSLATION -- */
.news-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  align-items: center;
  flex-wrap: wrap;
}

.news-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--line);
}

.news-btn.primary {
  background: var(--bg3);
  color: var(--text);
}

.news-btn.primary:hover {
  background: var(--line);
  transform: translateY(-2px);
}

.news-btn.g-trans {
  background: rgba(79, 156, 249, 0.1);
  color: var(--accent);
  border-color: rgba(79, 156, 249, 0.2);
}

.news-btn.g-trans:hover {
  background: rgba(79, 156, 249, 0.2);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 156, 249, 0.2);
}

/* ═══════════════════════════════════════════════════════════
   ── FIX ONBOARDING: tombol CTA terbaca + tidak memenuhi layar ──
   ═══════════════════════════════════════════════════════════
   Di dark mode, --accent bernilai #f1f1f1 (hampir putih), sehingga
   .onboard-btn (background:var(--accent) + color:#fff) menjadi teks
   putih di atas latar putih — tidak terbaca. Tombol CTA kini memakai
   biru brand #4f9cf9. Kartu onboarding juga dibuat scrollable agar
   tidak memenuhi layar smartphone dan konten bawah tidak terpotong.
*/
.onboard-overlay {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.onboard-card {
  margin: auto; /* tetap di tengah saat muat, bisa di-scroll saat lebih tinggi dari layar */
  background: var(--bg2);
  border: var(--nb-border);
  border-radius: var(--r);
  box-shadow: var(--nb-shadow);
}
.onboard-btn {
  background: var(--accent);
  border: var(--nb-border);
  color: var(--bg);
  box-shadow: var(--nb-shadow);
}
.onboard-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--line2);
}

/* Lebih kompak di layar pendek (smartphone landscape/HP kecil) */
@media (max-height: 720px) {
  .onboard-overlay { padding: 12px; }
  .onboard-quote { padding: 16px 18px 14px; }
  .onboard-quote-text { font-size: 13px; min-height: 0; margin-bottom: 6px; }
  .onboard-body { padding: 14px 16px; }
  .onboard-features { gap: 6px; margin-bottom: 12px; }
  .onboard-feat { padding: 8px 12px; gap: 10px; }
  .onboard-feat-icon { font-size: 18px; }
  .onboard-btn { padding: 11px; font-size: 13px; }
}

/* -- VIDEO PEMBELAJARAN PAGE -- */
.video-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.video-chip {
  background: var(--bg3);
  border: var(--nb-border);
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-chat);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 14px;
  border-radius: var(--r3);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s, border-color .1s, background .1s, color .1s;
  box-shadow: var(--nb-shadow-dark);
}
.video-chip:hover { border-color: var(--accent); color: var(--text); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--line2); }
.video-chip.on {
  background: var(--accent);
  border: var(--nb-border);
  color: var(--bg);
  box-shadow: var(--nb-shadow);
  transform:none;
}
.video-count {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 6px;
  font-family: var(--mono);
}
.vid-thumb-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: var(--bg3);
  border-bottom: var(--nb-border);
}
.vid-thumb-wrap:hover .news-img { transform: scale(1.05); }
.vid-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: var(--r2);
  background: #FFEA00;
  border: var(--nb-border);
  color: #0A0A0A;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s, box-shadow .12s, background .12s;
  box-shadow: var(--nb-shadow-sm);
  z-index: 2;
}
.vid-thumb-wrap:hover .vid-play {
  background: #FF3B3B;
  border-color: #0A0A0A;
  color: #fff;
  transform: translate(calc(-50% - 1px), calc(-50% - 1px)) scale(1.02);
  box-shadow: 3px 3px 0 #0A0A0A;
}
.vid-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #0A0A0A;
  color: #FFEA00;
  font-family: var(--font-chat);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: var(--r3);
  border: var(--nb-border);
  box-shadow: 2px 2px 0 var(--line2);
  z-index: 2;
}

/* -- VIDEO PLAYER MODAL (play inline di app) — NEOBRUTALISM -- */
.vid-modal-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.82); backdrop-filter: none;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.vid-modal-overlay.on { opacity: 1; pointer-events: all; }
.vid-modal {
  width: min(720px, 100%);
  background: var(--bg2);
  border: var(--nb-border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--nb-yellow);
  transform: translate(-3px, -3px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
}
.vid-modal-overlay.on .vid-modal { transform: translate(0,0) scale(1); box-shadow: 4px 4px 0 #FFEA00; }
.vid-modal-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  background: var(--bg3); border-bottom: var(--nb-border);
}
.vid-modal-info { flex: 1; min-width: 0; }
.vid-modal-channel {
  font-family: var(--font-chat); font-size: 10px; color: var(--accent);
  font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  background: var(--bg2); border: var(--nb-border); display:inline-block;
  padding:2px 8px; border-radius: var(--r3); box-shadow:1px 1px 0 var(--line2);
  margin-bottom: 6px;
}
.vid-modal-title {
  font-family: var(--font-h); font-size: 15px; font-weight: 800;
  color: var(--text); line-height: 1.35; letter-spacing:-.01em;
}
.vid-modal-close {
  flex: none; width: 36px; height: 36px; border-radius: var(--r2);
  background: var(--bg2); border: var(--nb-border); color: var(--text2);
  font-size: 15px; font-weight:700; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--nb-shadow-sm); transition: transform .1s, box-shadow .1s, background .1s, color .1s, border-color .1s;
}
.vid-modal-close:hover { background: #FF3B3B; border-color:#0A0A0A; color:#fff; transform:translate(-1px,-1px); box-shadow:3px 3px 0 #0A0A0A; }
.vid-modal-close:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 #0A0A0A; }
.vid-frame-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-top: var(--nb-border); border-bottom: var(--nb-border); }
.vid-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-modal-ext {
  display: flex; align-items:center; justify-content:center; gap:8px;
  margin:12px 16px 16px; padding:10px 14px;
  background: var(--accent); color: var(--bg); border: var(--nb-border); border-radius: var(--r2);
  font-size: 12px; font-weight: 800; text-transform:uppercase; letter-spacing:.06em;
  font-family: var(--font-chat); text-decoration: none; box-shadow: var(--nb-shadow-sm);
  transition: transform .1s, box-shadow .1s;
}
.vid-modal-ext:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--line2); text-decoration:none; }
.vid-modal-ext:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--line2); }

/* -- TENTANG PAGE (rendered README.md) -- */
#about-content h1, #about-content h2, #about-content h3 {
  font-family: var(--font-h); color: var(--text); line-height: 1.3; margin: 20px 0 10px;
}
#about-content h1 { font-size: 22px; }
#about-content h2 { font-size: 18px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
#about-content h3 { font-size: 15px; }
#about-content p { margin: 8px 0; }
#about-content ul, #about-content ol { padding-left: 22px; margin: 8px 0; }
#about-content li { margin: 4px 0; }
#about-content a { color: var(--accent); text-decoration: none; font-weight: 600; }
#about-content a:hover { text-decoration: underline; }
#about-content code {
  background: var(--bg3); border: 1px solid var(--line); padding: 1px 6px;
  border-radius: 6px; font-family: var(--mono); font-size: 12px; color: var(--text);
}
#about-content pre {
  background: var(--bg3); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; overflow-x: auto; font-family: var(--mono); font-size: 12px;
}
#about-content pre code { background: none; border: none; padding: 0; }
#about-content blockquote {
  border-left: 3px solid var(--accent); margin: 12px 0; padding: 6px 14px;
  background: var(--bg3); border-radius: 0 10px 10px 0; color: var(--text2);
}
#about-content table {
  width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px;
  display: block; overflow-x: auto;
}
#about-content th, #about-content td {
  border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top;
}
#about-content th { background: var(--bg3); font-family: var(--font-h); color: var(--text); white-space: nowrap; }
#about-content tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
#about-content img { max-width: 100%; border-radius: 10px; }
#about-content hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
#about-content strong { color: var(--text); }

/* ═══ PUIL TABLES & CALCULATOR ═══ */
.puil-table{width:100%;border-collapse:collapse;font-size:13px;}
.puil-table th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);color:var(--text3);font-size:10px;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;}
.puil-table td{padding:7px 6px;border-bottom:1px solid var(--line2);color:var(--text2);}
.puil-table td:first-child{font-weight:700;color:var(--text);font-family:var(--mono);white-space:nowrap;}
.puil-table tbody tr:hover td{background:var(--bg3);}
.puil-field{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.puil-lbl{width:180px;font-size:12px;color:var(--text2);flex-shrink:0;}
.puil-inp{flex:1;min-width:0;padding:10px 12px;background:var(--bg3);border:1px solid var(--line2);border-radius:10px;color:var(--text);font-size:14px;font-family:var(--mono);transition:border-color .2s;}
.puil-inp:focus{outline:none;border-color:var(--accent);}
.puil-result{margin-top:12px;border-radius:12px;padding:14px;background:var(--accent-d);border:1px solid var(--line2);}
.puil-result .pr-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;font-size:13px;}
.puil-result .pr-lbl{color:var(--text2);}
.puil-result .pr-val{font-weight:700;color:var(--accent);font-family:var(--mono);text-align:right;}
.puil-result .pr-big{font-size:15px;}
.puil-result .pr-hi{border-top:1px dashed var(--line2);margin-top:4px;padding-top:8px;}
.puil-err{margin-top:12px;border-radius:12px;padding:14px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);color:var(--rose);font-size:13px;line-height:1.5;}
.ip-digit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* Fix visual overflow in IP Explorer & AWG Converter cards */
.std-card{min-width:0;overflow:hidden;}
.puil-inp{width:100%;max-width:100%;box-sizing:border-box;}
#ip-preview,#awg-res-val{word-break:break-word;}
#std-extra-awg .puil-field,
#std-extra-awg > div[style*="grid"]{min-width:0;}

/* Theme toggle button */
#themeBtn:hover{border-color:var(--accent) !important;color:var(--accent) !important;}

@media(max-width:480px){
  .puil-field{flex-direction:column;align-items:stretch;gap:5px;}
  .puil-lbl{width:auto;}
  .ip-digit-grid{grid-template-columns:1fr;}
  #std-extra-awg > div[style*="grid"]{grid-template-columns:1fr !important;}
}

/* ── PUIL highlight & filter ── */
.puil-hl td{ background:rgba(255,234,0,0.08) !important; }
.std-card{ transition:opacity .25s, transform .25s; }
#std-filter .chip{ cursor:pointer; }
#std-filter .chip.on{ background:var(--accent); color:var(--bg); border-color:var(--line); }
.apd-item{ transition:all .2s; }
.golden-item input:checked + span{ text-decoration:line-through; opacity:.7; }
@media print{
  #std-filter, .puil-hl{ print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .std-card{ break-inside:avoid; }
}

/* ═══ WOKWI HARDWARE & GUIDES (dari wokwi-docs) ═══ */
.wk-hw-wrap{display:flex;flex-direction:column;gap:14px;}
.wk-hw-cat{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.wk-hw-cat-title{font-size:12px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.wk-hw-cat-title span{font-size:10px;color:var(--text3);background:var(--bg);border:1px solid var(--line2);border-radius: var(--r3);padding:1px 8px;}
.wk-hw-items{display:flex;flex-wrap:wrap;gap:6px;}
.wk-hw-item{font-size:11px;color:var(--text2);background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:4px 10px;cursor:default;}
.wk-hw-item:hover{border-color:var(--accent);color:var(--accent);}
.wk-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.wk-guide-card{display:flex;gap:12px;align-items:flex-start;background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;transition:border-color .2s,transform .2s;}
.wk-guide-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.wk-guide-icon{font-size:20px;line-height:1;flex-shrink:0;}
.wk-guide-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;}
.wk-guide-desc{font-size:11.5px;color:var(--text2);line-height:1.45;}

/* ═══ FIREBASE IoT DASHBOARD ═══ */
.fb-wrap{max-width:760px;margin:0 auto;padding:0 16px 110px;}
.fb-header{margin:14px 0 16px;}
.fb-header h2{font-size:20px;margin-bottom:6px;}
.fb-header p{font-size:13px;color:var(--text2);line-height:1.6;}
.fb-status{font-size:13px;padding:10px 14px;border-radius:10px;margin-bottom:14px;background:var(--bg3);border:1px solid var(--line);color:var(--text2);}
.fb-status-ok{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.35);color:var(--green);}
.fb-status-err{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35);color:var(--rose);}
.fb-status-warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.35);color:var(--amber);}
.fb-config{background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;}
.fb-config h3{font-size:14px;margin-bottom:12px;}
.fb-config-row{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.fb-field label{display:block;font-size:11px;font-weight:700;color:var(--text2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px;}
.fb-field input{width:100%;height:42px;background:var(--bg);border:1px solid var(--line2);border-radius:9px;color:var(--text);padding:0 12px;font-size:13px;outline:none;font-family:var(--mono);}
.fb-field input:focus{border-color:var(--accent);}
.fb-config-actions{display:flex;flex-wrap:wrap;gap:8px;}
.fb-btn{background:var(--bg);border:1px solid var(--line2);color:var(--text);border-radius:9px;padding:9px 16px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s;}
.fb-btn:hover{border-color:var(--accent);transform:translateY(-1px);}
.fb-btn-primary{background:var(--accent);color:var(--bg);border-color:transparent;}
.fb-guide{background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px;}
.fb-guide summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--text);user-select:none;list-style:none;}
.fb-guide summary::-webkit-details-marker{display:none;}
.fb-guide summary::after{content:'▾';float:right;color:var(--text3);font-size:12px;transition:transform .2s;}
.fb-guide[open] summary::after{transform:rotate(180deg);}
.fb-guide-body{margin-top:12px;font-size:13px;color:var(--text2);line-height:1.75;}
.fb-guide-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;}
.fb-guide-steps code,.fb-guide-note code{background:var(--bg);border:1px solid var(--line2);border-radius:5px;padding:1px 6px;font-family:var(--mono);font-size:11.5px;color:var(--accent);}
.fb-guide-note{margin-top:10px;background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:10px 14px;font-size:12.5px;line-height:1.7;}
.fb-guide-note b{color:var(--text);}
.fb-guide a{color:var(--accent);}
.fb-start-cta{background:rgba(79,156,249,.08);border:1px dashed rgba(79,156,249,.4);border-radius:12px;padding:16px;font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:14px;}
.fb-live-panel{display:flex;flex-direction:column;gap:16px;}
.fb-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.fb-card{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .3s;}
.fb-card.fb-state-on{border-color:var(--amber);background:rgba(245,158,11,.08);}
.fb-card-label{font-size:11px;color:var(--text2);margin-bottom:6px;}
.fb-card-val{font-size:20px;font-weight:800;color:var(--text);font-family:var(--mono);}
.fb-charts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;}
.fb-chart-box{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:12px;}
.fb-chart-title{font-size:12px;font-weight:700;margin-bottom:8px;color:var(--text);}
.fb-chart{width:100%;height:90px;display:block;}
.fb-controls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}
.fb-control-box{background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:16px;}
.fb-control-box h4{font-size:14px;margin-bottom:6px;}
.fb-hint{font-size:11.5px;color:var(--text2);line-height:1.5;margin-bottom:12px;}
.fb-hint code{color:var(--accent);font-family:var(--mono);}
.fb-slider-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.fb-slider-row input[type=range],.fb-rgb-row input[type=range]{flex:1;accent-color:#4facfe;}
.fb-slider-val{font-size:13px;font-weight:700;font-family:var(--mono);min-width:52px;text-align:right;}
.fb-rgb-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.fb-rgb-row{display:flex;align-items:center;gap:10px;}
.fb-rgb-row label{font-weight:800;width:16px;color:var(--text2);}
.fb-rgb-foot{display:flex;align-items:center;gap:10px;}
.fb-rgb-preview{width:34px;height:34px;border-radius:8px;border:1px solid var(--line2);background:#ff0000;flex-shrink:0;}
.fb-json-box{background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:14px;}
.fb-json-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.fb-json-head h4{font-size:13px;}
.fb-json-pre{background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:12px;font-size:11px;color:var(--text2);font-family:var(--mono);max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-all;}
.fb-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg4);border:1px solid var(--line2);color:var(--text);padding:10px 18px;border-radius: var(--r3);font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:all .3s;z-index:999;box-shadow:var(--shadow);}
.fb-toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
@media(min-width:640px){
  .fb-config-row{flex-direction:row;}
  .fb-field{flex:1;}
}

/* ═══ WOKWI PASANG MANUAL ═══ */
.wk-card-run{width:100%;margin-top:12px;padding:9px 14px;background:var(--bg);border:1px solid var(--line2);color:var(--text);border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;}
.wk-card-run:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.wk-manual-details{font-size:13px;}
.wk-manual-summary{cursor:pointer;font-weight:700;font-size:12.5px;color:var(--text2);padding:6px 2px;user-select:none;}
.wk-manual-summary:hover{color:var(--text);}

/* ═══ BOARD SELECTOR (AI Project Generator) ═══ */
.prj-board-selector{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap;}
.prj-board-label{font-size:12px;font-weight:700;color:var(--text2);}
.prj-board-opts{display:flex;gap:8px;background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:4px;}
.prj-board-opt{border:none;background:transparent;color:var(--text2);font-size:12px;font-weight:700;padding:7px 14px;border-radius:7px;cursor:pointer;transition:all .2s;}
.prj-board-opt.on{background:var(--accent);color:var(--bg);}
.prj-board-opt:hover:not(.on){color:var(--text);}

/* ═══ MATERI — MODUL BELAJAR ═══ */
.mt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.mt-card{background:var(--bg2);border:var(--nb-border);border-radius:var(--r);padding:16px;display:flex;gap:14px;cursor:pointer;transition:transform .12s, box-shadow .12s;position:relative;overflow:hidden;box-shadow:var(--nb-shadow-dark);}
.mt-card:hover{transform:translate(-3px,-3px);border-color:var(--accent);box-shadow:var(--nb-shadow);}
.mt-card-emoji{font-size:34px;display:flex;align-items:flex-start;line-height:1;}
.mt-card-body{flex:1;min-width:0;}
.mt-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
.mt-card-title{font-size:16px;font-weight:700;color:var(--text);font-family:var(--font-h);}
.mt-badge-done{font-size:10px;font-weight:700;color:var(--green);background:rgba(76,175,80,.15);border:1px solid rgba(76,175,80,.4);padding:2px 8px;border-radius:20px;}
.mt-card-sub{font-size:12px;color:var(--text2);line-height:1.5;margin-bottom:10px;}
.mt-card-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.mt-pill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text2);background:var(--bg3);border:var(--nb-border);padding:3px 9px;border-radius:var(--r3);box-shadow:1px 1px 0 var(--line2);}
.mt-card-foot{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--text3);}
.mt-card-open{color:var(--accent);font-weight:700;font-size:12px;}
.mt-back{background:transparent;border:1px solid var(--line);color:var(--text2);font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:10px;cursor:pointer;margin-bottom:14px;transition:all .2s;}
.mt-back:hover{border-color:var(--accent);color:var(--text);}
.mt-hero{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:14px;}
.mt-hero-emoji{font-size:44px;}
.mt-hero-title{font-size:22px;font-weight:800;color:var(--text);font-family:var(--font-h);letter-spacing:-.02em;margin-bottom:3px;}
.mt-hero-sub{font-size:13px;color:var(--text2);margin-bottom:10px;}
.mt-toc{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.mt-toc-item{background:var(--bg3);border:1px solid var(--line);color:var(--text2);font-size:12px;font-weight:600;padding:7px 13px;border-radius:10px;cursor:pointer;transition:all .15s;}
.mt-toc-item:hover{border-color:var(--accent);color:var(--text);}
.mt-section{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:14px;}
.mt-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.mt-sec-emoji{font-size:22px;}
.mt-sec-head h3{font-size:16px;font-weight:700;color:var(--text);font-family:var(--font-h);margin:0;}
.mt-sec-body{font-size:13.5px;color:var(--text);line-height:1.75;}
.mt-sec-body p{margin:0 0 12px;}
.mt-sec-body ul,.mt-sec-body ol{margin:0 0 12px;padding-left:22px;}
.mt-sec-body li{margin-bottom:4px;}
.mt-sec-body .katex-display{margin:14px 0;overflow-x:auto;overflow-y:hidden;}
.mt-sec-body .katex{color:var(--amber);}
.mt-tip{
  background: rgba(255, 234, 0, 0.07);
  border: 2px solid #FFEA00;
  border-radius: var(--r2);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin: 12px 0;
  box-shadow: 3px 3px 0 #FFEA00;
}
body.light .mt-tip{
  background: rgba(10, 10, 10, 0.04);
  border: 2px solid #0A0A0A;
  box-shadow: 3px 3px 0 #0A0A0A;
}
.mt-warn{
  background: rgba(255, 59, 59, 0.07);
  border: 2px solid #FF3B3B;
  border-radius: var(--r2);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin: 12px 0;
  box-shadow: 3px 3px 0 #FF3B3B;
}
body.light .mt-warn{
  background: rgba(200, 30, 0, 0.06);
  border: 2px solid #CC2200;
  box-shadow: 3px 3px 0 #CC2200;
}
.mt-ref{background:rgba(0,180,140,.07);border:1px dashed rgba(0,180,140,.35);border-radius:10px;padding:9px 13px;font-size:11.5px;color:var(--text3);margin:12px 0 4px;line-height:1.65;}
.mt-ref b{color:var(--green);}
.mt-contoh{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;}
.mt-contoh-head{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:8px;}
.mt-contoh-soal{font-size:13px;color:var(--text);margin-bottom:10px;line-height:1.6;}
.mt-contoh-steps{margin:0;padding-left:22px;font-size:12.5px;color:var(--text2);line-height:1.8;}
.mt-contoh-steps .katex{color:var(--amber);}
.mt-quiz-next{margin-top:14px;background:var(--accent);border:none;color:var(--bg);font-size:13px;font-weight:700;padding:11px 22px;border-radius:12px;cursor:pointer;transition:all .15s;}
.mt-quiz-next:hover{filter:brightness(1.1);}
.mt-done-btn{background:transparent;border:1px solid var(--line);color:var(--text2);font-size:13.5px;font-weight:700;padding:13px 26px;border-radius:14px;cursor:pointer;transition:all .2s;}
.mt-done-btn:hover{border-color:var(--green);color:var(--green);}
.mt-done-btn.on{background:rgba(76,175,80,.15);border-color:var(--green);color:var(--green);}

/* ═══ ANIMASI HUKUM OHM ═══ */
.ohm-wrap{background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:14px;margin:12px 0;}
.ohm-layout{display:flex;flex-direction:column;gap:12px;}
.ohm-layout canvas{width:100%;height:auto;background:var(--bg);border-radius:10px;border:1px solid var(--line);}
.ohm-caption{font-size:11px;color:var(--text3);text-align:center;}
.ohm-controls{display:flex;flex-direction:column;gap:6px;}
.ohm-controls label{font-size:12px;color:var(--text2);font-weight:600;display:flex;justify-content:space-between;align-items:center;}
.ohm-controls label b{color:var(--accent);font-family:var(--mono);}
.ohm-controls input[type=range]{width:100%;accent-color:var(--accent);}
.ohm-readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;}
.ohm-cell{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center;}
.ohm-cell-lbl{font-size:10px;color:var(--text3);margin-bottom:4px;}
.ohm-cell-val{font-size:15px;font-weight:800;color:var(--text);font-family:var(--mono);}

/* ═══ MATERI — GAMBAR, TABEL, KODE, LIGHTBOX ═══ */
.mt-img-wrap{
  border: var(--nb-border);
  border-radius: var(--r2);
  overflow: hidden;
  margin: 16px 0;
  box-shadow: var(--nb-shadow-dark);
  transition: transform .1s, box-shadow .1s;
  background:var(--bg);
  padding:10px;
}
.mt-img-wrap:hover{
  transform: translate(-2px, -2px);
  box-shadow: var(--nb-shadow);
}
.mt-img{width:100%;height:auto;border-radius:8px;cursor:zoom-in;display:block;}
.mt-img-cap{font-size:10.5px;color:var(--text3);text-align:center;margin-top:8px;}
/* ── Inline SVG dalam modul materi ── */
.mt-svg-wrap {
  margin: 16px 0;
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--bg3);
  border: var(--nb-border);
  padding: 12px;
  cursor: zoom-in;
  box-shadow: var(--nb-shadow-dark);
}
.mt-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 600px;
  margin: 0 auto;
}
/* Dark mode: paksa warna SVG mengikuti tema */
body:not(.light) .mt-svg-wrap svg path,
body:not(.light) .mt-svg-wrap svg line,
body:not(.light) .mt-svg-wrap svg rect,
body:not(.light) .mt-svg-wrap svg circle,
body:not(.light) .mt-svg-wrap svg polyline,
body:not(.light) .mt-svg-wrap svg polygon {
  stroke: var(--text2) !important;
}
body:not(.light) .mt-svg-wrap svg text {
  fill: var(--text2) !important;
}
body:not(.light) .mt-svg-wrap svg [fill="#ffffff"],
body:not(.light) .mt-svg-wrap svg [fill="white"] {
  fill: var(--bg3) !important;
}
body:not(.light) .mt-svg-wrap svg [fill="#000000"],
body:not(.light) .mt-svg-wrap svg [fill="black"] {
  fill: var(--text) !important;
}
.mt-svg-cap {
  font-size: 11px;
  color: var(--text3);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
  line-height: 1.5;
}
.mt-table{width:100%;border-collapse:collapse;font-size:12px;margin:12px 0;border-radius:var(--r2);overflow:hidden;border:var(--nb-border);box-shadow:var(--nb-shadow-dark);}
.mt-table th{background:var(--accent);color:var(--bg);font-weight:800;text-transform:uppercase;font-size:10px;letter-spacing:.06em;padding:9px 11px;text-align:left;border:var(--nb-border);}
.mt-table td{padding:8px 11px;border:1px solid var(--line2);color:var(--text2);}
.mt-table tr:nth-child(even) td{background:var(--bg3);}
.mt-code{background:#0d1117;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:12px;line-height:1.6;color:#e6edf3;overflow-x:auto;margin:12px 0;}
.mt-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:20000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .2s;cursor:zoom-out;}
.mt-lightbox.on{opacity:1;pointer-events:auto;}
.mt-lightbox-img{max-width:100%;max-height:100%;border-radius:8px;object-fit:contain;}
.mt-lightbox-close{position:absolute;top:16px;right:20px;background:var(--bg3);border:1px solid var(--line);color:var(--text);font-size:16px;width:38px;height:38px;border-radius:50%;cursor:pointer;z-index:1;}
.mt-lightbox-close:hover{border-color:var(--accent);}

/* ═══ BUBBLE CHAT AI GLOBAL (semua halaman) ═══ */
@keyframes mtFabPulse{0%{transform:scale(.88);opacity:.6}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}
@media(min-width:860px){
}
/* ── MOBILE ONLY (<860px): bubble biru bulat di KIRI dengan ikon SVG ──
   Mode desktop (>=860px) TIDAK disentuh. */
@media(max-width:859.98px){
}
/* Sembunyikan bubble lama yang duplikat — semua pakai bubble Tanya AI */

.mchat-welcome{font-size:12.5px;line-height:1.6;color:var(--text);}
.mchat-chip{display:inline-block;background:var(--bg4);border:1px solid var(--line);color:var(--accent);font-size:11px;font-weight:700;padding:6px 11px;border-radius:20px;margin:5px 4px 0 0;cursor:pointer;transition:all .15s;}
.mchat-chip:hover{border-color:var(--accent);background:var(--bg3);}
.chat-sidebar.flash{outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px;}

/* ═══ CHAT FLOATING PANEL — DESKTOP (>=860px) ═══
   Panel chat melebar dari bubble Tanya AI di semua halaman. */
@media(min-width:860px){
  .chat-mobile{
    display:flex !important;      /* mengalahkan display:none lama */
    left:auto !important;
    right:24px !important;
    bottom:24px !important;
    width:400px !important;
    max-width:calc(100vw - 48px);
    height:min(620px, 80vh) !important;
    border-radius: var(--r) !important;
    border: var(--nb-border) !important;
    box-shadow: -4px -4px 0 var(--accent) !important;
  }
}
/* Chat kini satu-satunya lewat panel floating — sembunyikan sidebar chat lama di dalam page-kamus */
@media(min-width:860px){
  .chat-sidebar{display:none !important;}
  .kbody{grid-template-columns:1fr !important;}
}

/* ═══ CHIP LIBRARY ═══ */
.c-search-bar{margin:16px 0 12px;}
.c-search-bar input{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);color:var(--text);font-size:13px;font-family:var(--font);}
.c-search-bar input:focus{outline:none;border-color:var(--accent);}
.c-flex{display:flex;gap:16px;min-height:400px;}
.c-list-side{width:220px;flex-shrink:0;overflow-y:auto;max-height:70vh;border:1px solid var(--line2);border-radius:12px;padding:6px;}
.c-viewer-side{flex:1;overflow-y:auto;max-height:70vh;}
.c-empty-view{color:var(--text3);font-size:13px;text-align:center;padding:60px 20px;}
.c-item{padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s;}
.c-item:hover{background:var(--bg2);}
.c-item.active{background:var(--accent);color:var(--bg);}
.c-item-name{font-size:13px;font-weight:700;}
.c-item-type{font-size:11px;color:var(--text3);font-family:var(--mono);}
.c-item.active .c-item-type{color:var(--bg);opacity:.8;}
.chip-detail-card{border:1px solid var(--line2);border-radius:14px;overflow:hidden;}
.chip-header{padding:16px;border-bottom:1px solid var(--line2);}
.chip-title-wrap{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.chip-title-wrap h3{margin:0;font-size:16px;}
.chip-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius: var(--r3);background:rgba(79,156,249,.12);color:var(--accent);border:1px solid rgba(79,156,249,.3);}
.chip-header p{margin:0;font-size:12.5px;color:var(--text2);line-height:1.6;}
.pinout-visual-container{padding:16px;}
.chip-actions{padding:12px 16px;border-top:1px solid var(--line2);display:flex;gap:8px;flex-wrap:wrap;}
.chip-btn-ds{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:8px;background:var(--accent);color:var(--bg);font-size:12px;font-weight:700;text-decoration:none;cursor:pointer;}
.chip-btn-ds:hover{filter:brightness(1.1);}
.chip-btn-ask{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:8px;background:var(--bg2);color:var(--text);border:1px solid var(--line2);font-size:12px;font-weight:700;cursor:pointer;}
.chip-btn-ask:hover{border-color:var(--accent);color:var(--accent);}

/* DIP-8 visual */
.dip-visual{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;background:var(--bg2);border-radius:12px;}
.dip-notch{width:20px;height:10px;border-radius:0 0 10px 10px;background:var(--text3);opacity:.4;}
.dip-side{display:flex;gap:8px;}
.dip-side .pin{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg);border:1px solid var(--line2);border-radius:8px;font-size:12px;min-width:90px;}
.dip-side .pin span{font-weight:700;color:var(--accent);font-family:var(--mono);min-width:14px;}
.dip-side .pin strong{font-weight:600;font-size:11px;}

/* TO-220 visual */
.to-220-visual{display:flex;flex-direction:column;align-items:center;padding:16px;background:var(--bg2);border-radius:12px;}
.to-hex-tab{width:80px;height:14px;background:var(--text3);opacity:.3;border-radius:4px 4px 0 0;}
.to-body{width:80px;padding:16px 0;background:var(--bg3);border:1px solid var(--line2);border-top:none;text-align:center;}
.to-label{font-size:11px;font-weight:700;color:var(--text);}
.to-pins{display:flex;gap:16px;margin-top:12px;}
.pin-to{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;background:var(--bg);border:1px solid var(--line2);border-radius:8px;font-size:12px;}
.pin-to span{font-weight:700;color:var(--accent);font-family:var(--mono);}
.pin-to strong{font-weight:600;font-size:11px;}

/* MCU / Module visual */
.mcu-visual{padding:16px;background:var(--bg2);border-radius:12px;}
.mcu-body{font-size:14px;font-weight:700;text-align:center;padding:12px;background:var(--bg3);border:1px solid var(--line2);border-radius:8px;margin-bottom:12px;color:var(--accent);}
.mcu-pins-list{display:flex;flex-direction:column;gap:4px;}
.mcu-pin-row{display:grid;grid-template-columns:32px 80px 1fr;gap:8px;padding:6px 10px;background:var(--bg);border:1px solid var(--line2);border-radius:6px;font-size:12px;align-items:center;}
.mcu-pn{font-weight:700;color:var(--accent);font-family:var(--mono);}
.mcu-pl{font-weight:700;font-size:11.5px;}
.mcu-pd{color:var(--text2);font-size:11.5px;}

@media(max-width:600px){
  .c-flex{flex-direction:column;}
  .c-list-side{width:100%;max-height:200px;}
}

/* ═══════════════════════════════════════════════════════════
   ── COLORFUL NEUBRUTALISM VARIATIONS (single light theme) ──
   Varied shadows & accents — hilangkan kesan hitam-putih
   ═══════════════════════════════════════════════════════════ */
/* Kamus cards — 6 warna shadow bergantian */
.card:nth-child(6n+1){ box-shadow: var(--nb-yellow); }
.card:nth-child(6n+1):hover{ box-shadow: 4px 4px 0 #FFEA00; }
.card:nth-child(6n+2){ box-shadow: var(--nb-red); }
.card:nth-child(6n+2):hover{ box-shadow: 4px 4px 0 #FF3B3B; }
.card:nth-child(6n+3){ box-shadow: var(--nb-blue); }
.card:nth-child(6n+3):hover{ box-shadow: 4px 4px 0 #3B82F6; }
.card:nth-child(6n+4){ box-shadow: var(--nb-green); }
.card:nth-child(6n+4):hover{ box-shadow: 4px 4px 0 #00D084; }
.card:nth-child(6n+5){ box-shadow: var(--nb-purple); }
.card:nth-child(6n+5):hover{ box-shadow: 4px 4px 0 #9B72E6; }
.card:nth-child(6n+6){ box-shadow: var(--nb-orange); }
.card:nth-child(6n+6):hover{ box-shadow: 4px 4px 0 #FF8C42; }

/* Materi cards — shadow warna-warni + icon bg */
.mt-card:nth-child(6n+1){ box-shadow: var(--nb-yellow); }
.mt-card:nth-child(6n+1) .mt-card-emoji{ background: rgba(255,234,0,0.14); border: var(--nb-border); border-radius: var(--r2); padding: 6px; box-shadow: 2px 2px 0 #FFEA00; }
.mt-card:nth-child(6n+2){ box-shadow: var(--nb-red); }
.mt-card:nth-child(6n+2) .mt-card-emoji{ background: rgba(255,59,59,0.10); border: var(--nb-border); border-radius: var(--r2); padding: 6px; box-shadow: 2px 2px 0 #FF3B3B; }
.mt-card:nth-child(6n+3){ box-shadow: var(--nb-blue); }
.mt-card:nth-child(6n+3) .mt-card-emoji{ background: rgba(59,130,246,0.10); border: var(--nb-border); border-radius: var(--r2); padding: 6px; box-shadow: 2px 2px 0 #3B82F6; }
.mt-card:nth-child(6n+4){ box-shadow: var(--nb-green); }
.mt-card:nth-child(6n+4) .mt-card-emoji{ background: rgba(0,208,132,0.10); border: var(--nb-border); border-radius: var(--r2); padding: 6px; box-shadow: 2px 2px 0 #00D084; }
.mt-card:nth-child(6n+5){ box-shadow: var(--nb-purple); }
.mt-card:nth-child(6n+5) .mt-card-emoji{ background: rgba(155,114,230,0.10); border: var(--nb-border); border-radius: var(--r2); padding: 6px; box-shadow: 2px 2px 0 #9B72E6; }
.mt-card:nth-child(6n+6){ box-shadow: var(--nb-teal); }
.mt-card:nth-child(6n+6) .mt-card-emoji{ background: rgba(0,212,170,0.10); border: var(--nb-border); border-radius: var(--r2); padding: 6px; box-shadow: 2px 2px 0 #00D4AA; }
.mt-card:hover{ border-color: var(--line); }

/* Project cards — variasi juga */
.prj-card:nth-child(6n+1){ box-shadow: var(--nb-blue); }
.prj-card:nth-child(6n+2){ box-shadow: var(--nb-green); }
.prj-card:nth-child(6n+3){ box-shadow: var(--nb-yellow); }
.prj-card:nth-child(6n+4){ box-shadow: var(--nb-red); }
.prj-card:nth-child(6n+5){ box-shadow: var(--nb-purple); }
.prj-card:nth-child(6n+6){ box-shadow: var(--nb-orange); }

/* Tags kamus — lebih vivid, background pastel solid */
.t-dasar{ background: #E6FFF6 !important; border-color: var(--green) !important; color: #007A55 !important; box-shadow: 1px 1px 0 var(--green); }
.t-komponen{ background: #FFF9DB !important; border-color: #FFEA00 !important; color: #8A7400 !important; box-shadow: 1px 1px 0 #FFEA00; }
.t-rangkaian{ background: #FFF1E0 !important; border-color: #FF8C42 !important; color: #B85A00 !important; box-shadow: 1px 1px 0 #FF8C42; }
.t-daya{ background: #FFE8E8 !important; border-color: var(--rose) !important; color: #CC0000 !important; box-shadow: 1px 1px 0 var(--rose); }
.t-elektronika{ background: #F0E8FF !important; border-color: var(--purple) !important; color: #6B2FBF !important; box-shadow: 1px 1px 0 var(--purple); }
.t-pengukuran{ background: #E0FFF8 !important; border-color: var(--teal) !important; color: #007A66 !important; box-shadow: 1px 1px 0 var(--teal); }
.t-digital{ background: #FFE8F0 !important; border-color: var(--pink) !important; color: #CC3366 !important; box-shadow: 1px 1px 0 var(--pink); }
.t-sinyal{ background: #E8F0FF !important; border-color: var(--nb-blue) !important; color: #1A5CCC !important; box-shadow: 1px 1px 0 #3B82F6; }

/* News / video cards shadow variasi */
.news-card:nth-child(6n+1) .news-img-wrap{ border-bottom: 3px solid #FFEA00; }
.news-card:nth-child(6n+2) .news-img-wrap{ border-bottom: 3px solid #FF3B3B; }
.news-card:nth-child(6n+3) .news-img-wrap{ border-bottom: 3px solid #3B82F6; }

/* ── SMARTPHONE UX — optimalkan <480px & floating Tanya AI ── */
@media(max-width:480px){
  .page{ padding: 0 12px 110px; }
  #page-kalk{ padding: 0 0 110px; }
  .card{ padding: 14px 16px; }
  .card:hover{ transform: translate(-2px,-2px); }
  .mt-card{ padding: 12px; gap: 10px; }
  .mt-card-title{ font-size: 15px; }
  .mt-card-sub{ font-size: 11.5px; }
  .mt-grid{ grid-template-columns: 1fr; gap: 10px; }
  .projects-grid{ grid-template-columns: 1fr; gap: 12px; }
  .news-grid{ grid-template-columns: 1fr; gap: 12px; }
  .feature-grid{ grid-template-columns: 1fr; }
  .sbar{ padding: 10px 0; }
  .sfield input{ font-size: 14px; padding: 10px 12px 10px 36px; }
  .chip{ font-size: 10px; padding: 4px 10px; }
  .qcat-btn{ font-size: 10px; padding: 5px 10px; }
  .chat-fab-left{ width: 50px; height: 50px; bottom: calc(68px + env(safe-area-inset-bottom) + 12px); right: 12px; font-size: 18px; }
  .chat-mobile{ height: 88dvh !important; }
  .sheet-grid{ grid-template-columns: repeat(3,1fr); gap: 10px; }
  .sheet-item{ padding: 12px 6px; }
  .onboard-card{ margin: 12px; max-width: calc(100vw - 24px); }
  .nav-inner{ padding: 0 12px; height: 52px; }
  .logo-name{ font-size: 15px; }
  .hbadge{ display: none; } /* hemat ruang di HP kecil */
}
@media(max-width:360px){
  .bnav-label{ font-size: 9px; letter-spacing: 0; }
  .chip{ font-size: 9px; }
  .card{ padding: 12px 14px; }
}

/* ── NEUBRUTALISM TOAST — pengganti alert() ── */
.toast-wrap{
  position:fixed; bottom:calc(80px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none; max-width: calc(100vw - 24px);
}
@media(min-width:768px){
  .toast-wrap{ left:auto; right:24px; bottom:24px; top:auto; transform:none; align-items:flex-end; }
}
.toast{
  background:#FFEA00; border:var(--nb-border); border-radius:var(--r);
  padding:12px 16px; font-family:var(--font); font-size:13px; font-weight:700;
  color:#0A0A0A; box-shadow: var(--nb-shadow); display:flex; align-items:center; gap:10px;
  pointer-events:auto; cursor:pointer; max-width: 360px; line-height:1.4;
  animation: toastIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
  transition: opacity 0.25s, transform 0.25s;
}
.toast.hide{ opacity:0; transform:translateY(8px) scale(0.98); }
.toast-ico{ font-size:16px; flex-shrink:0; }
.toast-msg{ flex:1; }
@keyframes toastIn{ from{opacity:0; transform:translateY(12px) scale(0.95)} to{opacity:1; transform:translateY(0) scale(1)} }

/* ═══════════════════════════════════════════════════════════
   HOTFIX: cegah geser kiri-kanan di tab Kamus — Infinix Note 40
   Root cause: beberapa elemen & shadow neubrutalism bisa bikin
   scrollWidth melebihi viewport di WebView Android → halaman
   jadi bisa di-pan horizontal. Kunci overflow & touch-action
   hanya di sumbu X, scroll vertikal tetap normal.
   ═══════════════════════════════════════════════════════════ */
html{
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior-x: none;
}
body{
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior-x: none;
  /* cegah rubber-band horizontal di Android */
  overscroll-behavior-y: auto;
  touch-action: pan-y;
  position: relative;
  width: 100%;
}
/* fbar: scroll horizontal khusus chip, tapi jangan bocor ke page */
.fbar-wrap{
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.fbar{
  max-width: 100% !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y !important;
}
#page-kamus{
  touch-action: pan-y !important;
  overscroll-behavior-x: none !important;
  overflow-x: clip !important;
}
@media(max-width:767px){
  .page,
  #page-kamus,
  .kbody,
  .ksec,
  .grid,
  .feature-grid,
  .compact-list{
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }
  .card,
  .core-card{
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* toast fixed: pakai % bukan 100vw biar tidak tambah scrollbar gutter di Android */
.toast-wrap{
  max-width: calc(100% - 24px) !important;
}
@media(max-width:767px){
  .toast-wrap{
    max-width: calc(100% - 24px) !important;
    /* tetap center di mobile, biarkan rule original left:50% + translate */
  }
  .page{ padding-left:12px !important; padding-right:12px !important; }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD — Neobrutalism Landing (varied colors, SVG only)
   ═══════════════════════════════════════════════════════════ */
.dash-wrap{ max-width:860px; margin:0 auto; padding:20px 16px 80px; display:flex; flex-direction:column; gap:18px; }
@media(max-width:767px){ .dash-wrap{ padding:16px 12px 90px; gap:14px; } }

/* HERO */
.dash-hero{
  background:var(--bg2);
  border:var(--nb-border);
  border-radius:var(--r);
  box-shadow:var(--nb-yellow);
  padding:24px;
  position:relative;
  overflow:hidden;
}
.dash-hero-top{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.dash-hero-logo{
  width:52px; height:52px; flex-shrink:0;
  background:#fff; border:var(--nb-border); border-radius:var(--r2);
  box-shadow:var(--nb-shadow-sm); overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.dash-hero-title{
  font-family:var(--font-h); font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1;
  color:var(--text);
}
.dash-hero-title span{ color:var(--text2); }
@media(max-width:480px){ .dash-hero-title{ font-size:24px; } .dash-hero-logo{ width:44px; height:44px; } }
.dash-hero-tagline{
  font-family:var(--font-chat); font-size:14px; font-weight:700; letter-spacing:-.01em;
  color:var(--accent); background:var(--accent-d); border:1px solid var(--line);
  display:inline-block; padding:6px 12px; border-radius:var(--r3); margin-bottom:12px;
}
body.light .dash-hero-tagline{ background:rgba(10,10,10,.06); border-color:var(--line); color:var(--text); }
.dash-hero-desc{
  font-size:13.5px; line-height:1.7; color:var(--text2); margin-bottom:14px; max-width:640px;
}
.dash-hero-desc b{ color:var(--text); font-weight:700; }
.dash-feature-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.dash-pill{
  font-family:var(--font-chat); font-size:11px; font-weight:700; letter-spacing:.02em;
  background:var(--bg3); border:var(--nb-border); border-radius:99px;
  padding:5px 12px; color:var(--text2); box-shadow:2px 2px 0 var(--line2);
}
.dash-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--bg); border:var(--nb-border); border-radius:var(--r2);
  padding:12px 20px; font-family:var(--font-h); font-size:13px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; cursor:pointer;
  box-shadow:var(--nb-shadow); transition:transform .1s, box-shadow .1s;
}
.dash-cta:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--line2); }
.dash-cta:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--line2); }
.dash-cta svg{ stroke:currentColor; }

/* STATS */
.dash-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:768px){ .dash-stats{ grid-template-columns:repeat(4,1fr); } }
.dash-stat-card{
  background:var(--bg2); border:var(--nb-border); border-radius:var(--r);
  padding:16px 14px; text-align:center; transition:transform .1s, box-shadow .1s;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.dash-stat-card:hover{ transform:translate(-2px,-2px); }
.dash-stat-card.dash-stat-1{ box-shadow:var(--nb-yellow); }
.dash-stat-card.dash-stat-2{ box-shadow:var(--nb-red); }
.dash-stat-card.dash-stat-3{ box-shadow:var(--nb-blue); }
.dash-stat-card.dash-stat-4{ box-shadow:var(--nb-green); }
.dash-stat-card:hover{ box-shadow:4px 4px 0 var(--line2) !important; }
.dash-stat-icon{
  width:38px; height:38px; border:var(--nb-border); border-radius:var(--r2);
  display:flex; align-items:center; justify-content:center; background:var(--bg3);
  color:var(--text); box-shadow:var(--nb-shadow-sm);
}
.dash-stat-1 .dash-stat-icon{ background:rgba(255,234,0,.12); }
.dash-stat-2 .dash-stat-icon{ background:rgba(255,59,59,.10); }
.dash-stat-3 .dash-stat-icon{ background:rgba(59,130,246,.10); }
.dash-stat-4 .dash-stat-icon{ background:rgba(0,208,132,.10); }
.dash-stat-num{ font-family:var(--font-h); font-size:26px; font-weight:800; line-height:1; color:var(--text); }
.dash-stat-label{ font-family:var(--font-chat); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text); }
.dash-stat-sub{ font-size:10px; color:var(--text3); font-family:var(--mono); }

/* SECTION TITLE */
.dash-section-title{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-h); font-size:16px; font-weight:800; color:var(--text);
  margin-top:4px; padding-bottom:8px; border-bottom:3px solid var(--accent);
  letter-spacing:-.01em;
}
.dash-section-icon{
  width:30px; height:30px; border:var(--nb-border); border-radius:var(--r2);
  background:var(--accent); color:var(--bg); display:flex; align-items:center; justify-content:center;
  box-shadow:2px 2px 0 var(--line2); flex-shrink:0;
}
.dash-section-sub{
  margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:600;
  color:var(--text3); background:var(--bg3); border:1px solid var(--line);
  padding:3px 8px; border-radius:99px;
}

/* WORD CARD */
.dash-word-card{
  background:var(--bg2); border:var(--nb-border); border-radius:var(--r);
  padding:18px; box-shadow:var(--nb-purple); transition:transform .1s;
}
.dash-word-card:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 #9B72E6; }
.dash-word-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.dash-word-name{ font-family:var(--font-h); font-size:18px; font-weight:800; color:var(--text); }
.dash-word-cat{
  font-family:var(--mono); font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; padding:3px 10px; border-radius:99px; border:2px solid;
}
.dash-word-id{ font-size:12px; color:var(--text2); font-weight:500; margin-bottom:10px; }
.dash-word-def{ font-size:13px; line-height:1.65; color:var(--text2); margin-bottom:14px; }
.dash-word-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg3); border:var(--nb-border); border-radius:var(--r2);
  padding:8px 14px; font-family:var(--font-chat); font-size:12px; font-weight:700;
  color:var(--text); cursor:pointer; box-shadow:2px 2px 0 var(--line2);
  transition:transform .1s, box-shadow .1s, border-color .1s;
}
.dash-word-btn:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--line2); border-color:var(--accent); color:var(--accent); }

/* QUICK GRID */
.dash-quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:480px){ .dash-quick-grid{ gap:8px; } }
.dash-quick-item{
  background:var(--bg2); border:var(--nb-border); border-radius:var(--r);
  padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; transition:transform .1s, box-shadow .1s, border-color .1s;
  text-align:center; min-height:84px; justify-content:center;
}
.dash-quick-item:hover{ transform:translate(-2px,-2px); border-color:var(--line2); }
.dash-quick-item:nth-child(8n+1){ box-shadow:var(--nb-yellow); }
.dash-quick-item:nth-child(8n+2){ box-shadow:var(--nb-red); }
.dash-quick-item:nth-child(8n+3){ box-shadow:var(--nb-blue); }
.dash-quick-item:nth-child(8n+4){ box-shadow:var(--nb-green); }
.dash-quick-item:nth-child(8n+5){ box-shadow:var(--nb-purple); }
.dash-quick-item:nth-child(8n+6){ box-shadow:var(--nb-orange); }
.dash-quick-item:nth-child(8n+7){ box-shadow:var(--nb-teal); }
.dash-quick-item:nth-child(8n+8){ box-shadow:var(--nb-pink); }
.dash-quick-item:hover{ box-shadow:4px 4px 0 var(--line2) !important; }
.dash-qi-icon{
  width:40px; height:40px; border:var(--nb-border); border-radius:var(--r2);
  background:var(--bg3); display:flex; align-items:center; justify-content:center;
  color:var(--text); box-shadow:var(--nb-shadow-sm);
}
.dash-qi-label{ font-family:var(--font-chat); font-size:11px; font-weight:700; line-height:1.2; color:var(--text); }
@media(max-width:360px){ .dash-qi-label{ font-size:10px; } .dash-qi-icon{ width:36px; height:36px; } }

/* RECENT */
.dash-recent{ display:flex; flex-wrap:wrap; gap:8px; }
.dash-recent-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg3); border:var(--nb-border); border-radius:99px;
  padding:6px 14px; font-family:var(--font-chat); font-size:12px; font-weight:600;
  color:var(--text2); cursor:pointer; box-shadow:2px 2px 0 var(--line2);
  transition:transform .1s, box-shadow .1s, border-color .1s;
}
.dash-recent-chip:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--line2); border-color:var(--accent); color:var(--text); }

/* FORMULA */
.dash-formula-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:12px; }
@media(max-width:640px){ .dash-formula-grid{ grid-template-columns:1fr; } }
.dash-formula-card{
  background:var(--bg2); border:var(--nb-border); border-radius:var(--r);
  padding:16px; display:flex; flex-direction:column; gap:8px;
  transition:transform .1s, box-shadow .1s;
}
.dash-formula-card.dash-fm-1{ box-shadow:var(--nb-blue); }
.dash-formula-card.dash-fm-2{ box-shadow:var(--nb-yellow); }
.dash-formula-card.dash-fm-3{ box-shadow:var(--nb-green); }
.dash-formula-card:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--line2) !important; }
.dash-formula-title{ font-family:var(--font-h); font-size:14px; font-weight:700; color:var(--text); }
.dash-formula-math{
  background:var(--bg3); border:var(--nb-border); border-radius:var(--r3);
  padding:10px 12px; font-family:var(--mono); font-size:13px; color:var(--amber);
  text-align:center; overflow-x:auto;
}
.dash-formula-math .katex{ color:var(--amber); font-size:13px; }
.dash-formula-desc{ font-size:12px; line-height:1.6; color:var(--text2); }

.dash-foot{
  text-align:center; font-family:var(--mono); font-size:10px; color:var(--text3);
  padding:14px 0 4px; border-top:1px solid var(--line); margin-top:6px;
}

/* MATERI PROGRESS */
.dash-materi-card{
  background:var(--bg2); border:var(--nb-border); border-radius:var(--r);
  padding:18px; box-shadow:var(--nb-teal); transition:transform .1s;
}
.dash-materi-card:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 #00D4AA; }
.dash-materi-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dash-materi-label{ font-family:var(--font-chat); font-size:13px; font-weight:700; color:var(--text); }
.dash-materi-pct{ font-family:var(--mono); font-size:13px; font-weight:800; color:var(--accent); background:var(--bg3); border:var(--nb-border); padding:3px 10px; border-radius:99px; box-shadow:2px 2px 0 var(--line2); }
.dash-materi-bar{ height:12px; background:var(--bg3); border:var(--nb-border); border-radius:99px; overflow:hidden; box-shadow:inset 1px 1px 0 var(--line2); }
.dash-materi-fill{ height:100%; background:linear-gradient(90deg,#FFEA00,#00D084); border-right:var(--nb-border); transition:width .6s cubic-bezier(.4,0,.2,1); }

/* FUN FACT */
.dash-funfact-card{
  background:var(--bg2); border:var(--nb-border); border-radius:var(--r);
  padding:18px; box-shadow:var(--nb-orange); min-height:80px; display:flex; flex-direction:column; justify-content:center;
}
.dash-funfact-card:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 #FF8C42; }
.dash-funfact-text{ font-family:var(--font-chat); font-size:14px; font-weight:600; line-height:1.6; color:var(--text); font-style:italic; }
.dash-funfact-src{ font-family:var(--mono); font-size:10px; color:var(--text3); margin-top:8px; text-align:right; }
.dash-funfact-loading{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--text3); }
.dash-ff-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:dashFFPulse 1s infinite; }
.dash-ff-dot:nth-child(2){ animation-delay:.15s } .dash-ff-dot:nth-child(3){ animation-delay:.3s }
@keyframes dashFFPulse{ 0%,80%,100%{ opacity:.3; transform:scale(.9) } 40%{ opacity:1; transform:scale(1.1) } }

/* KATEGORI GRID */
.dash-kat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:640px){ .dash-kat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:360px){ .dash-kat-grid{ gap:8px; } }
.dash-kat-card{
  background:var(--bg2); border:var(--nb-border); border-radius:var(--r);
  padding:12px 10px; display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; transition:transform .1s, box-shadow .1s, border-color .1s; text-align:center; min-height:86px; justify-content:center;
}
.dash-kat-card:hover{ transform:translate(-2px,-2px); border-color:var(--line2); }
.dash-kat-card:nth-child(14n+1){ box-shadow:var(--nb-yellow); }
.dash-kat-card:nth-child(14n+2){ box-shadow:var(--nb-red); }
.dash-kat-card:nth-child(14n+3){ box-shadow:var(--nb-blue); }
.dash-kat-card:nth-child(14n+4){ box-shadow:var(--nb-green); }
.dash-kat-card:nth-child(14n+5){ box-shadow:var(--nb-purple); }
.dash-kat-card:nth-child(14n+6){ box-shadow:var(--nb-orange); }
.dash-kat-card:nth-child(14n+7){ box-shadow:var(--nb-teal); }
.dash-kat-card:nth-child(14n+8){ box-shadow:var(--nb-pink); }
.dash-kat-card:nth-child(14n+9){ box-shadow:var(--nb-yellow); }
.dash-kat-card:nth-child(14n+10){ box-shadow:var(--nb-red); }
.dash-kat-card:nth-child(14n+11){ box-shadow:var(--nb-blue); }
.dash-kat-card:nth-child(14n+12){ box-shadow:var(--nb-green); }
.dash-kat-card:nth-child(14n+13){ box-shadow:var(--nb-purple); }
.dash-kat-card:nth-child(14n+14){ box-shadow:var(--nb-orange); }
.dash-kat-card:hover{ box-shadow:4px 4px 0 var(--line2) !important; }
.dash-kat-icon{
  width:36px; height:36px; border:var(--nb-border); border-radius:var(--r2);
  background:var(--bg3); display:flex; align-items:center; justify-content:center;
  color:var(--text); box-shadow:var(--nb-shadow-sm);
}
.dash-kat-info{ display:flex; flex-direction:column; gap:2px; }
.dash-kat-name{ font-family:var(--font-chat); font-size:11px; font-weight:700; color:var(--text); text-transform:capitalize; line-height:1.2; }
.dash-kat-count{ font-family:var(--mono); font-size:10px; color:var(--text3); }

/* TIPS */
.dash-tips{ display:flex; flex-direction:column; gap:10px; }
.dash-tip-card{
  background:var(--bg2); border:var(--nb-border); border-radius:var(--r);
  padding:14px; display:flex; gap:12px; align-items:flex-start;
  transition:transform .1s, box-shadow .1s;
}
.dash-tip-card:hover{ transform:translate(-2px,-2px); }
.dash-tip-card.dash-tip-1{ box-shadow:var(--nb-yellow); }
.dash-tip-card.dash-tip-2{ box-shadow:var(--nb-blue); }
.dash-tip-card.dash-tip-3{ box-shadow:var(--nb-green); }
.dash-tip-card:hover{ box-shadow:4px 4px 0 var(--line2) !important; }
.dash-tip-icon{
  width:38px; height:38px; border:var(--nb-border); border-radius:var(--r2);
  background:var(--bg3); display:flex; align-items:center; justify-content:center;
  color:var(--text); flex-shrink:0; box-shadow:var(--nb-shadow-sm);
}
.dash-tip-title{ font-family:var(--font-h); font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.dash-tip-desc{ font-size:12px; line-height:1.6; color:var(--text2); }
.dash-tip-desc b{ color:var(--text); }

/* ═══════════════════════════════════════════════════════════
   AUDIT — sisa komponen lama → neobrutalism varied
   ═══════════════════════════════════════════════════════════ */
/* Firebase IoT & Wokwi & PUIL & Materi — paksa neobrutalism */
.fb-config, .fb-guide, .fb-card, .fb-chart-box, .fb-control-box, .fb-json-box,
.wk-hw-cat, .wk-guide-card, .puil-table, .ohm-wrap, .ohm-cell,
.mt-section, .mt-img-wrap, .mt-code, .tt-wrap, .logic-board, .quiz-box, .konv-card, .resist-svg-wrap, .resist-result,
.aiv-upload, .aiv-result-bubble, .calc-msgarea, .calc-chatview{
  border: var(--nb-border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--nb-shadow-dark) !important;
}
.fb-card:nth-child(6n+1){ box-shadow:var(--nb-yellow) !important; }
.fb-card:nth-child(6n+2){ box-shadow:var(--nb-red) !important; }
.fb-card:nth-child(6n+3){ box-shadow:var(--nb-blue) !important; }
.fb-card:nth-child(6n+4){ box-shadow:var(--nb-green) !important; }
.fb-card:nth-child(6n+5){ box-shadow:var(--nb-purple) !important; }
.fb-card:nth-child(6n+6){ box-shadow:var(--nb-orange) !important; }
.wk-hw-cat:nth-child(6n+1){ box-shadow:var(--nb-blue) !important; }
.wk-hw-cat:nth-child(6n+2){ box-shadow:var(--nb-yellow) !important; }
.wk-hw-cat:nth-child(6n+3){ box-shadow:var(--nb-green) !important; }
.mt-section:nth-child(6n+1){ box-shadow:var(--nb-teal) !important; }
.mt-section:nth-child(6n+2){ box-shadow:var(--nb-yellow) !important; }
.mt-section:nth-child(6n+3){ box-shadow:var(--nb-purple) !important; }
.qopt{ border:var(--nb-border) !important; border-radius:var(--r2) !important; }
.qopt.correct{ box-shadow:var(--nb-green) !important; }
.qopt.wrong{ box-shadow:var(--nb-red) !important; }
.konv-card:nth-child(6n+1){ box-shadow:var(--nb-yellow) !important; }
.resist-svg-wrap{ box-shadow:var(--nb-blue) !important; }
.aiv-upload{ border:2px dashed var(--line2) !important; }
.aiv-upload:hover{ border-color:var(--accent) !important; box-shadow:3px 3px 0 var(--accent) !important; }

/* ═══════════════════════════════════════════════════════════
   NEOBRUTALISM RELOAD SITE? — ganti native "Reload site?"
   ═══════════════════════════════════════════════════════════ */
.nb-reload-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.78);
  backdrop-filter:none;
  display:none; align-items:center; justify-content:center;
  padding:16px;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.nb-reload-overlay.on{
  display:flex; opacity:1; pointer-events:all;
}
.nb-reload-modal{
  width:100%; max-width:380px;
  background:#FFFFFF;
  border:3px solid #0A0A0A;
  border-radius:8px;
  box-shadow:8px 8px 0 #0A0A0A;
  padding:20px 18px 16px;
  transform:translate(-2px,-2px) scale(.96);
  transition:transform .25s cubic-bezier(.175,.885,.32,1.275);
}
.nb-reload-overlay.on .nb-reload-modal{
  transform:translate(0,0) scale(1);
}
.nb-reload-header{
  display:flex; align-items:flex-start; gap:12px;
  margin-bottom:16px;
}
.nb-reload-icon{
  width:44px; height:44px; flex-shrink:0;
  background:#0A0A0A;
  border:3px solid #0A0A0A;
  border-radius:6px;
  box-shadow:3px 3px 0 #0A0A0A;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
  color:#FFEA00; font-weight:800;
}
.nb-reload-title-wrap{ flex:1; min-width:0; }
.nb-reload-title{
  font-family:var(--font-h); font-size:17px; font-weight:800;
  color:#0A0A0A; line-height:1.2; letter-spacing:-.02em;
  margin:0 0 4px;
}
.nb-reload-msg{
  font-size:13px; color:#5A5A5A; line-height:1.5;
  margin:0; font-weight:500;
}
.nb-reload-actions{
  display:flex; gap:10px; justify-content:flex-end;
  margin-top:18px;
}
.nb-btn{
  font-family:var(--font-h); font-size:13px; font-weight:800;
  padding:10px 18px; border-radius:6px;
  cursor:pointer; transition:transform .1s, box-shadow .1s, background .1s, border-color .1s, color .1s;
  min-width:88px; text-align:center;
  letter-spacing:.02em;
}
.nb-btn-cancel{
  background:#FFFFFF; color:#0A0A0A;
  border:2.5px solid #0A0A0A;
  box-shadow:4px 4px 0 #0A0A0A;
}
.nb-btn-cancel:hover{
  background:#F5F5F5; color:#0A0A0A;
  border-color:#0A0A0A;
  transform:translate(-1px,-1px);
  box-shadow:5px 5px 0 #0A0A0A;
}
.nb-btn-cancel:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 #0A0A0A; }
.nb-btn-reload{
  background:#FFEA00 !important; color:#0A0A0A !important;
  border:3px solid #0A0A0A !important;
  box-shadow:4px 4px 0 #0A0A0A !important;
  opacity:1 !important;
}
.nb-btn-reload:hover{
  background:#FFD500 !important; color:#0A0A0A !important;
  transform:translate(-1px,-1px);
  box-shadow:5px 5px 0 #0A0A0A !important;
}
.nb-btn-reload:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 #0A0A0A !important; }
.nb-btn:focus-visible{
  outline:3px solid #FFEA00;
  outline-offset:2px;
}
@media(max-width:480px){
  .nb-reload-modal{ padding:18px 16px 16px; max-width:92vw; }
  .nb-reload-title{ font-size:16px; }
  .nb-reload-msg{ font-size:12.5px; }
  .nb-btn{ flex:1; }
  .nb-reload-actions{ justify-content:stretch; }
}

/* -----------------------------------------------------------
   TOOLKIT FILEKIT � 6 alat client-side (neobrutalism)
   ----------------------------------------------------------- */
.toolkit-wrap{ max-width:860px; margin:0 auto; padding:20px 16px 80px; display:flex; flex-direction:column; gap:18px; }
@media(max-width:767px){ .toolkit-wrap{ padding:16px 12px 90px; gap:14px; } }
.toolkit-header{ background:var(--bg2); border:var(--nb-border); border-radius:var(--r); box-shadow:var(--nb-yellow); padding:20px; display:flex; gap:16px; align-items:center; }
.toolkit-header-icon{ width:52px; height:52px; flex-shrink:0; border:var(--nb-border); border-radius:var(--r2); display:flex; align-items:center; justify-content:center; box-shadow:var(--nb-shadow-sm); }
.toolkit-header h2{ font-family:var(--font-h); font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--text); margin-bottom:4px; }
.toolkit-header p{ font-size:13px; color:var(--text2); line-height:1.6; }
.toolkit-privacy{ background:#C1FF72; border:var(--nb-border); border-radius:var(--r2); padding:10px 14px; font-size:13px; font-weight:600; text-align:center; box-shadow:2px 2px 0 var(--line2); }
.toolkit-section-title{ font-family:var(--font-h); font-size:16px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:10px; padding-bottom:8px; border-bottom:3px solid var(--accent); margin-top:6px; }
.toolkit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:768px){ .toolkit-grid{ grid-template-columns:repeat(3,1fr); } }
.toolkit-card{ background:var(--bg2); border:var(--nb-border); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:transform .1s, box-shadow .1s; text-align:left; position:relative; box-shadow:var(--nb-shadow-dark); }
.toolkit-card:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--line2); border-color:var(--line2); }
.toolkit-card-icon{ width:48px; height:48px; border:var(--nb-border); border-radius:var(--r2); display:flex; align-items:center; justify-content:center; color:#0A0A0A; box-shadow:var(--nb-shadow-sm); }
.toolkit-card-title{ font-family:var(--font-h); font-size:14px; font-weight:800; color:var(--text); line-height:1.2; }
.toolkit-card-desc{ font-size:12px; color:var(--text2); line-height:1.5; }
.toolkit-card-arrow{ position:absolute; right:12px; top:12px; font-family:var(--font-h); font-weight:800; color:var(--text3); }
.toolkit-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:640px){ .toolkit-features{ grid-template-columns:1fr; } }
.toolkit-feat{ background:var(--bg2); border:var(--nb-border); border-radius:var(--r); padding:16px; text-align:center; box-shadow:var(--nb-shadow-dark); }
.toolkit-feat-ico{ font-size:24px; margin-bottom:8px; }
.toolkit-feat b{ display:block; font-family:var(--font-h); font-size:13px; font-weight:800; color:var(--text); margin-bottom:6px; }
.toolkit-feat p{ font-size:12px; color:var(--text2); line-height:1.5; }
/* Tool pages */
.toolkit-back{ background:transparent; border:var(--nb-border); color:var(--text2); font-size:13px; font-weight:700; padding:8px 14px; border-radius:var(--r2); cursor:pointer; align-self:flex-start; box-shadow:2px 2px 0 var(--line2); transition:all .15s; }
.toolkit-back:hover{ border-color:var(--accent); color:var(--text); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--line2); }
.toolkit-tool-head{ background:var(--bg2); border:var(--nb-border); border-radius:var(--r); box-shadow:var(--nb-shadow-dark); padding:16px; display:flex; gap:14px; align-items:center; }
.toolkit-tool-icon{ width:44px; height:44px; flex-shrink:0; border:var(--nb-border); border-radius:var(--r2); display:flex; align-items:center; justify-content:center; color:#0A0A0A; box-shadow:var(--nb-shadow-sm); }
.toolkit-tool-head h2{ font-family:var(--font-h); font-size:18px; font-weight:800; color:var(--text); margin-bottom:2px; }
.toolkit-tool-head p{ font-size:12px; color:var(--text2); }
.toolkit-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:860px){ .toolkit-grid2{ grid-template-columns:1fr; } }
.toolkit-panel{ display:flex; flex-direction:column; gap:12px; }
.toolkit-drop{ background:var(--bg2); border:2px dashed var(--line2); border-radius:var(--r); padding:32px 16px; text-align:center; cursor:pointer; transition:all .15s; display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:var(--nb-shadow-dark); }
.toolkit-drop.drag{ border-color:var(--accent); background:rgba(255,234,0,.08); transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--accent); }
.toolkit-drop b{ font-family:var(--font-h); font-size:14px; font-weight:800; color:var(--text); }
.toolkit-drop span{ font-size:12px; color:var(--text3); }
.toolkit-preview{ background:var(--bg2); border:var(--nb-border); border-radius:var(--r); padding:12px; text-align:center; box-shadow:var(--nb-shadow-dark); }
.toolkit-preview img{ max-height:220px; width:auto; max-width:100%; object-fit:contain; }
.toolkit-outmeta{ font-family:var(--mono); font-size:11px; color:var(--text3); text-align:center; margin-top:8px; }
.toolkit-card-white{ background:var(--bg2); border:var(--nb-border); border-radius:var(--r); padding:14px; box-shadow:var(--nb-shadow-dark); }
.toolkit-small-title{ font-family:var(--font-h); font-size:12px; font-weight:800; color:var(--text); display:block; margin-bottom:8px; }
.toolkit-presets{ display:flex; flex-wrap:wrap; gap:6px; }
.toolkit-presets button{ font-family:var(--mono); font-size:11px; font-weight:700; padding:6px 12px; border:var(--nb-border); border-radius:var(--r3); cursor:pointer; background:var(--bg3); color:var(--text2); transition:all .15s; box-shadow:1px 1px 0 var(--line2); }
.toolkit-presets button.on, .toolkit-presets button:hover{ background:var(--accent); color:var(--bg); border-color:var(--line2); transform:translate(-1px,-1px); box-shadow:2px 2px 0 var(--line2); }
.toolkit-dims{ display:flex; align-items:center; gap:8px; }
.toolkit-dims label{ flex:1; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text2); }
.toolkit-input{ width:100%; margin-top:4px; background:var(--bg3); border:var(--nb-border); border-radius:var(--r3); padding:8px 10px; font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text); outline:none; box-shadow:1px 1px 0 var(--line2); }
.toolkit-input:focus{ border-color:var(--accent); box-shadow:2px 2px 0 var(--accent); }
.toolkit-check{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; font-weight:600; color:var(--text2); cursor:pointer; }
.toolkit-actions{ display:flex; gap:10px; }
.toolkit-btn{ flex:1; font-family:var(--font-h); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:12px 16px; border:var(--nb-border); border-radius:var(--r2); cursor:pointer; transition:transform .1s, box-shadow .1s; box-shadow:var(--nb-shadow); }
.toolkit-btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--line2); }
.toolkit-btn-yellow{ background:var(--accent); color:var(--bg); }
.toolkit-btn-pink{ background:#FF6B9D; color:#fff; flex:none; }
.toolkit-btn-green{ background:#C1FF72; color:#0A0A0A; }
.toolkit-result{ background:var(--bg2); border:var(--nb-border); border-radius:var(--r); padding:20px; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:var(--nb-shadow-dark); }
.toolkit-muted{ color:var(--text3); font-weight:600; font-size:13px; }
.toolkit-file-item{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--bg3); border:var(--nb-border); border-radius:var(--r3); margin-bottom:6px; box-shadow:1px 1px 0 var(--line2); }
.toolkit-crop-area{ position:relative; width:100%; height:340px; background:var(--bg); border:var(--nb-border); border-radius:var(--r); overflow:hidden; box-shadow:var(--nb-shadow-dark); }
.toolkit-crop-area img{ width:100%; height:100%; object-fit:contain; }
.toolkit-crop-box{ position:absolute; border:2px dashed #FFEA00; background:rgba(255,234,0,.15); box-shadow:0 0 0 9999px rgba(0,0,0,.3); cursor:move; }

/* ── Reader chat: markdown rendered inside answer bubble ── */
#reader-chat > div {
  overflow: hidden;
}
#reader-chat > div ul,
#reader-chat > div ol {
  padding-left: 1.4em;
  margin: 6px 0;
}
#reader-chat > div li {
  margin-bottom: 3px;
  line-height: 1.55;
}
#reader-chat > div h1,
#reader-chat > div h2,
#reader-chat > div h3,
#reader-chat > div h4 {
  margin: 10px 0 4px;
  font-family: var(--font-h, inherit);
}
#reader-chat > div p {
  margin: 4px 0;
}
#reader-chat > div code {
  background: var(--bg3, #f3f3f3);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
  font-family: var(--mono, monospace);
}
#reader-chat > div pre {
  background: var(--bg3, #f3f3f3);
  border: 1px solid var(--line, #ddd);
  padding: 10px;
  overflow-x: auto;
  font-size: 11px;
  margin: 6px 0;
}

/* ═══════════════════════════════════════════════
   DASHBOARD — Progress Materi per Section (TASK 6C)
   ═══════════════════════════════════════════════ */
.dash-prog-list{ display:flex; flex-direction:column; gap:8px; }
.dash-prog-item{
  background:var(--bg2); border:var(--nb-border); border-radius:var(--r);
  padding:10px 14px; cursor:pointer; transition:transform .1s, box-shadow .1s;
}
.dash-prog-item:hover{ transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--accent); }
.dash-prog-header{
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
}
.dash-prog-emoji{ font-size:16px; flex-shrink:0; }
.dash-prog-title{ flex:1; font-size:13px; font-weight:700; color:var(--text); font-family:var(--font-chat); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-prog-count{ font-size:11px; color:var(--text3); font-family:var(--mono); white-space:nowrap; }
.dash-prog-done{
  font-size:10px; font-weight:700; background:var(--bg3); color:#00D4AA;
  border:1.5px solid #00D4AA; padding:1px 7px; border-radius:99px; flex-shrink:0;
}
.dash-prog-bar-bg{
  height:5px; background:var(--bg3); border-radius:99px; overflow:hidden;
  border:1px solid var(--line2);
}
.dash-prog-bar-fill{
  height:100%; background:linear-gradient(90deg,#FFEA00,#00D084);
  border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1);
  min-width:2px;
}

/* ═══════════════════════════════════════════════
   DASHBOARD — Tantang Diri / Kuis Kilat (TASK 8C)
   ═══════════════════════════════════════════════ */
.dash-challenge-card{
  background:var(--bg2); border:var(--nb-border); border-radius:var(--r);
  padding:16px 18px; display:flex; align-items:center; gap:16px;
  box-shadow:var(--nb-shadow); transition:transform .1s, box-shadow .1s;
}
.dash-challenge-card:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--accent); }
.dash-challenge-left{ flex:1; min-width:0; }
.dash-challenge-title{ font-size:16px; font-weight:800; color:var(--text); font-family:var(--font-chat); margin-bottom:3px; }
.dash-challenge-sub{ font-size:12px; color:var(--text3); margin-bottom:4px; font-family:var(--font-chat); }
.dash-challenge-cat{ font-size:12px; font-weight:700; color:var(--accent); font-family:var(--mono); }
.dash-challenge-btn{
  background:var(--accent); color:#000; border:var(--nb-border);
  border-radius:var(--r); padding:10px 20px;
  font-size:14px; font-weight:800; cursor:pointer; font-family:var(--font-chat);
  white-space:nowrap; box-shadow:3px 3px 0 var(--line2);
  transition:transform .1s, box-shadow .1s; flex-shrink:0;
}
.dash-challenge-btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--line2); }
.dash-challenge-btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--line2); }