/* ══════════════════════════════════════════════════════════════
   AMFree v3 — Neumorphism Edition
   Theme: light (default) / dark (via [data-theme="dark"])
   Color toggle: card button top-left → putih / hitam
   ══════════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ──────────────────────────────────────────── */
/* default load = dark; JS toggles data-theme="dark"|removed */
:root {
  --bg:       #e8ecf0;
  --bg2:      #dde3ea;
  --surface:  #e8ecf0;
  --text:     #2d3748;
  --text-sub: #718096;
  --text-muted: #a0aec0;
  --accent:   #5b7cfa;
  --accent2:  #4a67e8;
  --dot-color: rgba(45,55,72,0.08);

  /* neumorphism shadows */
  --neu-light: rgba(255,255,255,0.85);
  --neu-dark:  rgba(163,177,198,0.65);
  --neu-sm:    4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
  --neu-md:    6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
  --neu-lg:    10px 10px 22px var(--neu-dark), -10px -10px 22px var(--neu-light);
  --neu-inset: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
  --neu-inset-md: inset 5px 5px 12px var(--neu-dark), inset -5px -5px 12px var(--neu-light);

  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  22px;
  --radius-xl:  28px;

  --border: rgba(0,0,0,0.08);
  --green:  #b6f542;
  --yellow: #ffe44d;
  --red:    #ff4757;
}

[data-theme="dark"] {
  --border: rgba(255,255,255,0.08);
  --bg:       #1a1d23;
  --bg2:      #13151a;
  --surface:  #1a1d23;
  --text:     #e8eaf0;
  --text-sub: #9da8c0;
  --text-muted: #636b82;
  --dot-color: rgba(255,255,255,0.04);

  --neu-light: rgba(40,45,58,0.8);
  --neu-dark:  rgba(0,0,0,0.55);
  --neu-sm:    4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
  --neu-md:    6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
  --neu-lg:    10px 10px 22px var(--neu-dark), -10px -10px 22px var(--neu-light);
  --neu-inset: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
  --neu-inset-md: inset 5px 5px 12px var(--neu-dark), inset -5px -5px 12px var(--neu-light);
}

/* ── RESET ─────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;}
body{
  font-family:'Space Grotesk',sans-serif;
  background-color:var(--bg);
  background-image:radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size:24px 24px;
  color:var(--text);
  min-height:100vh;overflow-x:clip;
  padding-bottom:120px;padding-top:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color .35s, color .35s;
}
h1,h2,h3,.brand{font-family:'Space Grotesk',sans-serif;font-weight:800;}
.mono{font-family:'JetBrains Mono',monospace;}

/* ── THEME TOGGLE CARD (top-left fixed) ──────────────────── */
.theme-toggle-card{
  position:fixed;top:16px;left:16px;z-index:999;
  background:var(--surface);
  box-shadow:var(--neu-md);
  border-radius:var(--radius-md);
  padding:8px 14px;
  display:flex;align-items:center;gap:10px;
  cursor:pointer;
  transition:all .2s;
  border:none;
}
.theme-toggle-card:active{box-shadow:var(--neu-inset);}
.theme-toggle-label{
  font-size:11px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--text-sub);
  font-family:'JetBrains Mono',monospace;
}
.theme-toggle-icons{display:flex;gap:6px;align-items:center;}
.theme-icon{
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);box-shadow:var(--neu-sm);
  font-size:13px;transition:all .25s;
}
.theme-icon.active{
  background:var(--accent);
  box-shadow:0 3px 12px rgba(91,124,250,0.4);
  color:#fff;
}

/* ── PAGES ─────────────────────────────────────────────────── */
.page{display:none;}
.page.active{display:block;position:relative;z-index:1;}

/* ── NAV FLOAT WRAPPER ──────────────────────────────────────── */
.nav-float-wrap{
  position:sticky;top:10px;z-index:100;
  padding:0 16px;pointer-events:none;
}
.nav{
  max-width:728px;margin:0 auto;
  padding:10px 16px;position:relative;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--surface);
  box-shadow:var(--neu-md);
  border-radius:var(--radius-lg);
  pointer-events:all;
  margin-top:10px;min-width:0;
  transition:background .35s,box-shadow .35s;
}
.brand{
  display:flex;align-items:center;gap:8px;
  font-size:clamp(14px,4vw,17px);letter-spacing:-.3px;color:var(--text);
  flex-shrink:0;min-width:0;
}
.brand .mark{
  width:36px;height:36px;border-radius:10px;overflow:hidden;
  box-shadow:var(--neu-sm);flex-shrink:0;
}
.brand .mark img{width:100%;height:100%;object-fit:cover;display:block;}
.nav-badge-am{
  display:inline-flex;align-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;font-weight:700;letter-spacing:1px;
  background:var(--accent);color:#fff;
  padding:3px 8px;border-radius:6px;
  box-shadow:0 2px 8px rgba(91,124,250,0.35);
}
.nav-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:flex-end;flex-shrink:0;}
.nav-donasi{
  display:flex;align-items:center;gap:6px;
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:700;
  color:var(--text-sub);background:none;border:none;cursor:pointer;padding:0;
  transition:color .15s;
}
.nav-donasi:hover{color:var(--accent);}
.nav-donasi svg{width:16px;height:16px;fill:#e84393;stroke:#e84393;}
.nav-contact{
  display:flex;align-items:center;gap:6px;
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(10px,2.5vw,11.5px);font-weight:700;
  color:#fff;background:#25d366;
  padding:7px 12px;border-radius:10px;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 4px 12px rgba(37,211,102,0.35);
  transition:all .15s;
}
.nav-contact:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(37,211,102,0.45);}
.nav-contact svg{width:15px;height:15px;fill:#fff;flex-shrink:0;}

/* ── QRIS MODAL ──────────────────────────────────────────── */
.qris-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;padding:20px;backdrop-filter:blur(8px);
}
.qris-overlay.hidden{display:none;}
.qris-box{
  background:var(--surface);
  box-shadow:var(--neu-lg);
  border-radius:var(--radius-lg);padding:24px 22px;
  max-width:340px;width:100%;position:relative;text-align:center;
}
.qris-close{
  position:absolute;top:12px;right:12px;
  background:var(--bg);box-shadow:var(--neu-sm);
  border:none;border-radius:8px;
  width:30px;height:30px;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--text);transition:all .15s;
}
.qris-close:hover{color:var(--accent);}
.qris-title{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:16px;font-weight:800;color:var(--text);margin-bottom:6px;
}
.qris-title svg{width:18px;height:18px;fill:#e84393;stroke:#e84393;}
.qris-sub{font-size:12.5px;color:var(--text-sub);margin-bottom:14px;}
.qris-img{width:100%;border-radius:12px;box-shadow:var(--neu-md);display:block;}
.qris-note{font-size:11.5px;color:var(--text-muted);margin-top:12px;}

/* ── BG SHAPES (removed rockets, kept minimal dots) ──────── */
.bg-shapes{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1;}
.shape{position:absolute;opacity:0;}
/* hide all decorative shapes & rockets */
.rocket-deco,.ufo-deco,.planet-deco,
.shape-star,.shape-circle,.shape-dot,.shape-sq{display:none;}

/* ── INFO BAR ─────────────────────────────────────────────── */
.info-bar{
  max-width:760px;margin:12px auto 10px;padding:4px 16px 8px;
  display:flex;gap:10px;flex-wrap:nowrap;
  position:relative;z-index:2;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.info-bar::-webkit-scrollbar{display:none;}
.info-bar{-ms-overflow-style:none;scrollbar-width:none;}
.info-card{
  display:flex;align-items:center;gap:8px;
  box-shadow:var(--neu-md);
  border-radius:var(--radius-md);
  padding:10px 14px;
  flex:1;min-width:90px;max-width:160px;flex-shrink:0;
  background:var(--surface);
  transition:background .35s,box-shadow .35s;
}
.info-card svg{width:14px;height:14px;flex-shrink:0;color:var(--accent);opacity:.8;}
.info-card-inner{display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden;}
.info-label{
  font-family:'JetBrains Mono',monospace;
  font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-muted);white-space:nowrap;
}
.info-value{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(10px,2.5vw,12px);font-weight:800;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.info-card-date{}
.info-card-time{}
.info-card-bat{}
.info-card-uptime{}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{
  max-width:760px;margin:0 auto;
  padding:8px 20px 20px;
  position:relative;z-index:2;
}
.hero-rocket-inline{display:none;} /* remove rocket inline */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:#fff;background:var(--accent);
  padding:6px 14px;border-radius:20px;margin-bottom:16px;
  box-shadow:0 4px 14px rgba(91,124,250,0.35);
}
.hero-badge svg{width:16px;height:16px;flex-shrink:0;}
.hero h1{
  font-size:clamp(26px,5vw,38px);font-weight:800;
  line-height:1.08;letter-spacing:-1.5px;
  color:var(--text);margin-bottom:8px;
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
}
.hero p{font-size:14px;color:var(--text-sub);line-height:1.65;max-width:480px;}

/* ── STATS BAR ────────────────────────────────────────────── */
.stats-bar{
  max-width:760px;margin:0 auto 16px;
  padding:0 20px;display:flex;gap:12px;
  position:relative;z-index:2;
}
.stat-box{
  flex:1;
  background:var(--surface);
  box-shadow:var(--neu-md);
  border-radius:var(--radius-md);
  padding:16px 18px;position:relative;
  transition:background .35s,box-shadow .35s;
}
.stat-box.stat-today{background:var(--surface);}
.stat-label{
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;
}
.stat-value{
  font-size:clamp(24px,6vw,32px);font-weight:800;letter-spacing:-2px;color:var(--accent);
  line-height:1;
}
.stat-icon{position:absolute;top:14px;right:14px;width:28px;height:28px;opacity:.15;}
.stat-icon svg{width:100%;height:100%;}

/* ── WORKSPACE ────────────────────────────────────────────── */
.workspace{
  max-width:760px;margin:0 auto;
  padding:0 20px 32px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;z-index:2;
}

/* ── PANEL ────────────────────────────────────────────────── */
.panel{
  background:var(--surface);
  box-shadow:var(--neu-md);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:background .35s,box-shadow .35s;
}
.panel-header{
  padding:14px 18px 0;
  font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-muted);font-family:'JetBrains Mono',monospace;
}
.panel-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px;}

/* ── TABS (inside panel, Send/Verif) ─────────────────────── */
.tab-bar{display:flex;gap:8px;}
.tab-btn{
  flex:1;padding:10px 14px;
  border-radius:var(--radius-sm);
  border:none;
  background:var(--bg);
  box-shadow:var(--neu-sm);
  color:var(--text-sub);
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;font-weight:700;cursor:pointer;
  transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.tab-btn:hover{color:var(--accent);}
.tab-btn.active{
  background:var(--surface);
  box-shadow:var(--neu-inset);
  color:var(--accent);
}
.tab-btn svg{width:15px;height:15px;}

/* ── INPUT ────────────────────────────────────────────────── */
.input-group{display:flex;flex-direction:column;gap:7px;}
.input-group label{font-size:12px;font-weight:700;color:var(--text-sub);letter-spacing:.3px;}
.input-field{
  width:100%;padding:12px 16px;
  border-radius:var(--radius-sm);border:none;
  background:var(--bg);
  box-shadow:var(--neu-inset);
  color:var(--text);
  font-size:14px;font-family:'Space Grotesk',sans-serif;
  outline:none;transition:all .2s;
}
.input-field::placeholder{color:var(--text-muted);font-size:13px;}
.input-field:focus{
  box-shadow:var(--neu-inset-md), 0 0 0 2px rgba(91,124,250,0.25);
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{
  border:none;border-radius:var(--radius-md);
  padding:13px 20px;
  font-size:14px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;transition:all .18s;width:100%;
  font-family:'Space Grotesk',sans-serif;letter-spacing:.1px;
}
.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:0 6px 18px rgba(91,124,250,0.4);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(91,124,250,0.5);}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(91,124,250,0.3);}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn-secondary{
  background:var(--surface);color:var(--text);
  box-shadow:var(--neu-sm);
}
.btn-secondary:hover{box-shadow:var(--neu-md);color:var(--accent);}
.btn-secondary:active{box-shadow:var(--neu-inset);}
.btn-dark{background:var(--text);color:var(--bg);box-shadow:var(--neu-sm);}
.btn-dark:hover{box-shadow:var(--neu-md);}
.btn svg{width:17px;height:17px;flex-shrink:0;}
.btn-reset{
  border:none;border-radius:var(--radius-sm);
  padding:11px 20px;font-size:13px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--surface);color:var(--text-sub);
  box-shadow:var(--neu-sm);
  width:100%;margin-top:4px;
  font-family:'Space Grotesk',sans-serif;transition:all .18s;
}
.btn-reset:hover{color:var(--accent);box-shadow:var(--neu-md);}
.btn-reset svg{width:16px;height:16px;}

/* ── STAGE ────────────────────────────────────────────────── */
.stage{
  border-radius:var(--radius-sm);
  background:var(--bg);
  box-shadow:var(--neu-inset);
  min-height:160px;position:relative;
  display:flex;flex-direction:column;
  padding:16px;overflow:hidden;
}
.stage-head{
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:12px;
}
.placeholder{text-align:center;color:var(--text-muted);font-size:14px;line-height:1.7;max-width:280px;margin:auto;}
.placeholder-icon{
  width:50px;height:50px;margin:0 auto 12px;
  border-radius:var(--radius-sm);background:var(--surface);
  box-shadow:var(--neu-sm);
  display:flex;align-items:center;justify-content:center;
}
.placeholder-icon svg{width:24px;height:24px;color:var(--text-muted);}
.placeholder strong{display:block;color:var(--text-sub);font-size:14px;font-weight:700;margin-bottom:4px;}
.loading{
  position:absolute;inset:0;background:rgba(var(--surface),.95);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);z-index:5;
  background:var(--bg);
}
.loader-wrap{position:relative;width:44px;height:44px;margin-bottom:14px;}
.loader-wrap .ring{
  position:absolute;inset:0;border-radius:50%;
  border:3px solid transparent;border-top-color:var(--accent);
  animation:spin 1.1s linear infinite;
}
.loader-wrap .ring:nth-child(2){inset:7px;border-top-color:#b6f542;animation:spin 1.7s linear infinite reverse;}
.loader-wrap .ring:nth-child(3){inset:14px;border-top-color:#ffe44d;animation:spin 2.2s linear infinite;}
@keyframes spin{100%{transform:rotate(360deg);}}
.loading p{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;}
.loading span{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-muted);letter-spacing:.5px;}
#resultBoxSend,#resultBoxVerif{display:none;width:100%;animation:pop .25s ease;}
@keyframes pop{from{transform:translateY(6px);opacity:0;}to{transform:none;opacity:1;}}

/* ── RESULT CARDS ─────────────────────────────────────────── */
.result-card{
  background:var(--surface);box-shadow:var(--neu-sm);
  border-radius:var(--radius-sm);padding:14px;margin-top:6px;
}
.result-card.result-success{background:var(--surface);}
.result-card.result-error{background:var(--surface);}
.result-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.result-header svg{width:16px;height:16px;}
.result-header h3{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
.result-header.ok h3,.result-header.ok svg{color:#27ae60;}
.result-header.fail h3,.result-header.fail svg{color:var(--red);}
.result-body-rows{display:flex;flex-direction:column;gap:5px;}
.result-row{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.4;}
.result-row svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;color:var(--text-muted);}
.result-row .key{color:var(--text-sub);font-weight:700;}
.result-row .sep{color:var(--text-muted);margin:0 2px;}
.result-row .value{color:var(--text);}

/* ══════════════════════════════════════════════════════════════
   BOTTOM NAV — V5 style: pill with elevated center (+) button
   Active = big blue circle overlapping pill (tindih effect)
   ══════════════════════════════════════════════════════════════ */


/* ── DISCLAIMER MODAL ─────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;animation:fadein .2s ease;
}
.modal-overlay.hidden{display:none;}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
.modal-box{
  background:var(--surface);
  box-shadow:var(--neu-lg);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:28px 24px 36px;
  width:100%;max-width:520px;
  animation:slideup .25s cubic-bezier(.4,0,.2,1);
}
@keyframes slideup{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;}
.modal-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  background:var(--accent);color:#fff;
  padding:6px 14px;border-radius:20px;
  box-shadow:0 4px 12px rgba(91,124,250,0.35);
}
.modal-badge svg{width:12px;height:12px;}
.modal-close{
  background:var(--bg);box-shadow:var(--neu-sm);
  border:none;border-radius:8px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text);transition:all .15s;flex-shrink:0;
}
.modal-close:hover{color:var(--accent);}
.modal-box h2{font-size:22px;font-weight:800;color:var(--text);margin-bottom:10px;letter-spacing:-.5px;}
.modal-box p{font-size:13.5px;color:var(--text-sub);line-height:1.65;margin-bottom:10px;}
.modal-box strong{color:var(--text);}
.modal-warning{
  background:var(--bg);box-shadow:var(--neu-inset);
  border-radius:var(--radius-sm);padding:12px 14px;margin:14px 0;
}
.modal-warning-title{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text);margin-bottom:5px;}
.modal-warning p{font-size:12.5px;color:var(--text-sub);margin-bottom:0;}
.modal-btn-row{display:flex;flex-direction:column;gap:8px;margin-top:18px;}
.modal-btn-primary{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;border-radius:var(--radius-md);
  border:none;background:var(--accent);color:#fff;
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:800;
  text-decoration:none;cursor:pointer;
  box-shadow:0 6px 18px rgba(91,124,250,0.4);transition:all .15s;
}
.modal-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(91,124,250,0.5);}
.modal-btn-primary svg{width:16px;height:16px;}
.modal-btn-secondary{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:var(--radius-md);
  border:none;background:var(--surface);color:var(--text);
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:800;
  cursor:pointer;transition:all .15s;
  box-shadow:var(--neu-sm);
}
.modal-btn-secondary:hover{box-shadow:var(--neu-md);}
.modal-btn-secondary svg{width:15px;height:15px;}
.modal-footer{text-align:center;margin-top:14px;font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;letter-spacing:.5px;}

/* ── COMMUNITY ────────────────────────────────────────────── */
.community-grid{display:flex;flex-direction:column;gap:12px;}
.community-card{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);
  box-shadow:var(--neu-md);
  border-radius:var(--radius-md);
  padding:14px 16px;text-decoration:none;color:var(--text);
  transition:all .2s;
}
.community-card:hover{box-shadow:var(--neu-lg);transform:translateY(-2px);}
.community-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:var(--neu-sm);
}
.community-icon svg{width:20px;height:20px;}
.community-icon-wa{background:#25D366;color:#fff;}
.community-icon-tg{background:#229ED9;color:#fff;}
.community-icon-tt{background:#000;color:#fff;}
.community-icon-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;}
.community-info{flex:1;display:flex;flex-direction:column;gap:2px;}
.community-label{font-size:14px;font-weight:700;color:var(--text);}
.community-desc{font-size:12px;color:var(--text-muted);}
.community-arrow{color:var(--text-muted);opacity:.5;}
.community-arrow svg{width:18px;height:18px;}

/* ── DOCS ─────────────────────────────────────────────────── */
.docs-workspace{display:flex;flex-direction:column;gap:12px;}
.docs-apikey-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);box-shadow:var(--neu-md);
  border-radius:var(--radius-md);padding:14px 16px;
}
.docs-apikey-left{display:flex;align-items:center;gap:10px;}
.docs-apikey-left svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;}
.docs-apikey-label{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px;}
.docs-apikey-val{display:block;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:var(--text);}
.docs-copy-key{
  display:flex;align-items:center;gap:6px;
  background:var(--accent);color:#fff;border:none;border-radius:8px;
  padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;
  box-shadow:0 4px 12px rgba(91,124,250,0.35);
  transition:all .15s;
}
.docs-copy-key:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(91,124,250,0.45);}
.docs-copy-key svg{width:13px;height:13px;}
.docs-lang-bar{display:flex;gap:6px;}
.lang-btn{
  padding:7px 18px;border-radius:var(--radius-sm);
  border:none;background:var(--bg);box-shadow:var(--neu-sm);
  color:var(--text-sub);
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;cursor:pointer;
  transition:all .15s;
}
.lang-btn:hover{color:var(--accent);}
.lang-btn.active{background:var(--surface);box-shadow:var(--neu-inset);color:var(--accent);}
.docs-endpoint-card{
  background:var(--surface);box-shadow:var(--neu-md);
  border-radius:var(--radius-md);overflow:hidden;
}
.docs-ep-header{padding:16px 18px 14px;}
.ep-badge{
  display:inline-flex;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;margin-bottom:8px;
  background:var(--bg);box-shadow:var(--neu-sm);color:var(--text-sub);
}
.ep-title-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.ep-method{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  background:var(--accent);color:#fff;
  padding:3px 9px;border-radius:20px;
  box-shadow:0 3px 8px rgba(91,124,250,0.3);
}
.ep-path{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--text);}
.ep-desc{font-size:12.5px;color:var(--text-sub);line-height:1.55;}
.docs-code-block{background:#0f0f0f;}
.code-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;border-bottom:1px solid #333;
}
.code-lang-label{font-family:'JetBrains Mono',monospace;font-size:10px;color:#aaa;letter-spacing:1px;}
.code-copy-btn{
  display:flex;align-items:center;gap:5px;background:none;border:none;
  color:#ccc;font-family:'JetBrains Mono',monospace;font-size:10px;cursor:pointer;
  transition:color .15s;
}
.code-copy-btn:hover{color:var(--accent);}
.code-copy-btn svg{width:13px;height:13px;}
.code-pre{padding:14px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#e0e0e0;overflow-x:auto;white-space:pre;line-height:1.55;}
.resp-terminal-wrap{
  margin-top:0;border-radius:0 0 var(--radius-md) var(--radius-md);overflow:hidden;background:#111;
}
.resp-terminal-header{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;background:#1a1a1a;border-bottom:1px solid #2a2a2a;
}
.resp-terminal-tabs{display:flex;gap:4px;flex:1;}
.resp-tab{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  background:none;border:none;color:#555;cursor:pointer;
  padding:3px 8px;border-radius:4px;transition:all .15s;
}
.resp-tab.active{background:#0f0f0f;color:#e0e0e0;}
.resp-tab:hover:not(.active){color:#aaa;}
.resp-body{background:#111;overflow:hidden;}
.resp-pre{
  padding:12px 14px;margin:0;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;
  color:#e0e0e0;overflow-x:auto;white-space:pre;line-height:1.6;background:transparent;
}
.docs-info-card{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);box-shadow:var(--neu-sm);
  border-radius:var(--radius-md);padding:12px 16px;
}
.docs-info-card svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;}
.docs-info-card strong{display:block;font-size:11px;font-weight:700;margin-bottom:2px;color:var(--text-sub);}
.docs-info-card .mono{font-size:13px;color:var(--text);}

/* ── DOCS PARAMS ──────────────────────────────────────── */
.docs-params{border-top:1px solid var(--border);padding:12px 16px;display:flex;flex-direction:column;gap:10px;}
.docs-params-row{display:flex;flex-direction:column;gap:6px;}
.docs-params-label{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-sub);padding-bottom:2px;border-bottom:1px solid var(--border);}
.docs-params-list{display:flex;flex-direction:column;gap:5px;}
.docs-param-item{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;font-size:12px;padding:4px 0;}
.docs-param-key{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;color:#ffe44d;background:rgba(255,228,77,.12);padding:1px 7px;border-radius:20px;white-space:nowrap;}
.docs-param-type{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#7eb8f7;background:rgba(126,184,247,.12);padding:1px 7px;border-radius:20px;white-space:nowrap;}
.docs-param-req{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:#ff5f57;white-space:nowrap;}
.docs-param-desc{font-size:12px;color:var(--text-sub);line-height:1.5;}
.docs-param-code{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--bg);box-shadow:var(--neu-sm);padding:1px 5px;border-radius:4px;color:var(--accent);}

/* ── DOCS TRY BLOCK ───────────────────────────────────── */
.docs-try-block{border-top:1px solid var(--border);background:rgba(91,124,250,.04);}
.docs-try-header{display:flex;align-items:center;gap:7px;padding:9px 16px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;color:var(--text-sub);border-bottom:1px solid var(--border);}
.docs-try-live{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:9.5px;color:#28c840;}
.docs-try-dot{width:7px;height:7px;border-radius:50%;background:#28c840;animation:pulse-dot 1.4s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.35;}}
.docs-try-body{padding:12px 16px;display:flex;flex-direction:column;gap:8px;}
.docs-try-label{display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:1px;color:var(--text-sub);text-transform:uppercase;}
.docs-try-input{background:var(--bg);box-shadow:var(--neu-inset);border:none;border-radius:8px;padding:9px 12px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--text);outline:none;width:100%;box-sizing:border-box;transition:box-shadow .15s;}
.docs-try-input:focus{box-shadow:var(--neu-inset),0 0 0 2px var(--accent);}
.docs-try-textarea{resize:vertical;min-height:64px;line-height:1.5;}
.docs-try-btn{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;cursor:pointer;transition:opacity .15s,box-shadow .15s;box-shadow:0 3px 10px rgba(91,124,250,.35);}
.docs-try-btn:hover{opacity:.88;}
.docs-try-btn:active{opacity:.75;box-shadow:none;}
.docs-try-result{margin-top:2px;padding:12px 14px;border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.6;white-space:pre;overflow-x:auto;}
.docs-try-loading{background:var(--bg);box-shadow:var(--neu-inset);color:var(--text-sub);}
.docs-try-ok{background:var(--bg);box-shadow:var(--neu-inset);color:var(--text);}
.docs-try-err{background:var(--bg);box-shadow:var(--neu-inset);color:#ff6b6b;}
.docs-api-note{font-size:12.5px;color:var(--text-sub);margin-top:8px;}
.docs-api-note code{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;
  background:var(--bg);box-shadow:var(--neu-sm);padding:1px 6px;border-radius:4px;color:var(--accent);
}

/* ── BULK ─────────────────────────────────────────────────── */
.bulk-count-wrap{display:flex;align-items:stretch;gap:0;}
.bulk-counter-btn{
  width:40px;min-height:40px;
  border:none;background:var(--bg);box-shadow:var(--neu-sm);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;flex-shrink:0;
}
.bulk-counter-btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
.bulk-counter-btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.bulk-counter-btn:hover{color:var(--accent);box-shadow:var(--neu-md);}
.bulk-counter-btn:active{box-shadow:var(--neu-inset);color:var(--accent);}
.bulk-counter-btn svg{width:15px;height:15px;stroke:currentColor;}
.bulk-count-input{
  border-radius:0;border-left:1px solid var(--border);border-right:1px solid var(--border);
  text-align:center;font-weight:800;
  width:56px;flex-shrink:0;min-height:40px;font-size:15px;
}
.captcha-group{}
.captcha-row{display:flex;align-items:center;gap:10px;}
.captcha-question{
  background:var(--surface);box-shadow:var(--neu-sm);border-radius:var(--radius-sm);
  padding:10px 18px;font-family:'JetBrains Mono',monospace;
  font-size:16px;font-weight:800;color:var(--accent);white-space:nowrap;
}
.captcha-input{flex:1;}
.bulk-account-item{
  background:var(--surface);box-shadow:var(--neu-sm);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:8px;
}
.bulk-item-header{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:800;color:#27ae60;
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;
}
.bulk-item-header svg{width:14px;height:14px;}
.bulk-item-email{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;color:var(--text);word-break:break-all;margin-bottom:4px;}
.bulk-item-inbox{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:var(--text-sub);}
.bulk-item-inbox svg{width:13px;height:13px;flex-shrink:0;margin-top:1px;}
.bulk-item-inbox a{color:var(--accent);text-decoration:underline;word-break:break-all;}
.bulk-summary{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;}
.bulk-actions{display:flex;gap:8px;margin-top:4px;}
.btn-bulk-action{
  flex:1;padding:10px;border-radius:var(--radius-sm);
  border:none;box-shadow:var(--neu-sm);
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .15s;
}
.btn-bulk-copy{background:var(--surface);color:var(--text);}
.btn-bulk-copy:hover{color:var(--accent);}
.btn-bulk-download{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(91,124,250,0.35);}
.btn-bulk-download:hover{transform:translateY(-1px);}
.btn-bulk-action svg{width:15px;height:15px;}

/* ── TOAST ────────────────────────────────────────────────── */
.ds-toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--surface);color:var(--text);
  box-shadow:var(--neu-md);
  border-radius:var(--radius-md);padding:10px 18px;
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  opacity:0;transition:all .25s;z-index:500;white-space:nowrap;
}
.ds-toast-show{opacity:1;transform:translateX(-50%) translateY(0);}
.ds-toast-warn{background:var(--surface);}
.ds-toast-ok{background:var(--accent);color:#fff;}

/* ── TERMINAL LOG ─────────────────────────────────────────── */
.terminal-wrap{
  margin:16px 16px 0;border-radius:var(--radius-md);
  overflow:hidden;background:#111;
  box-shadow:var(--neu-md);
}
.terminal-header{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:#1a1a1a;border-bottom:1px solid #2a2a2a;
}
.terminal-dots{display:flex;gap:5px;}
.terminal-dots span{width:10px;height:10px;border-radius:50%;display:block;}
.terminal-dots span:nth-child(1){background:#ff5f57;}
.terminal-dots span:nth-child(2){background:#febc2e;}
.terminal-dots span:nth-child(3){background:#28c840;}
.terminal-title{flex:1;display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#aaa;}
.terminal-title svg{width:12px;height:12px;}
.terminal-copy-btn{
  display:flex;align-items:center;gap:4px;background:none;border:none;
  font-family:'JetBrains Mono',monospace;font-size:10px;color:#aaa;
  cursor:pointer;padding:2px 6px;border-radius:4px;transition:color .15s;
}
.terminal-copy-btn:hover{color:var(--accent);}
.terminal-copy-btn svg{width:12px;height:12px;}
.terminal-body{padding:12px 14px;max-height:140px;overflow-y:auto;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.7;}
.terminal-line{display:flex;gap:6px;flex-wrap:wrap;}
.t-tag{font-weight:700;padding:0 4px;border-radius:3px;flex-shrink:0;font-size:10.5px;line-height:1.8;}
.t-system{background:#1e3a5f;color:#5bc8ff;}
.t-ready{background:#1a3d1a;color:#4ddd4d;}
.t-send{background:#3d2a00;color:#ffb74d;}
.t-ok{background:#1a3d1a;color:#4ddd4d;}
.t-info{background:#2a2a2a;color:#aaa;}
.t-error{background:#4a0000;color:#ff6b6b;}
.t-text{color:#e0e0e0;}
.t-green{color:#4ddd4d;}

/* ── PANDUAN ──────────────────────────────────────────────── */
.guide-wrap{
  margin:16px 16px 16px;border-radius:var(--radius-md);
  overflow:hidden;background:var(--surface);box-shadow:var(--neu-md);
}
.guide-header{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-sub);
}
.guide-header svg{width:15px;height:15px;flex-shrink:0;color:var(--accent);}
.guide-steps{padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.guide-step{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--bg);box-shadow:var(--neu-inset);
  border-radius:var(--radius-sm);padding:12px 14px;
}
.guide-num{
  width:28px;height:28px;border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;
  flex-shrink:0;color:#fff;
  box-shadow:0 4px 12px rgba(91,124,250,0.35);
}
.guide-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;color:var(--text);}
.guide-desc{font-size:12px;color:var(--text-sub);line-height:1.5;}
.guide-footer{
  background:var(--accent);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:1px;text-align:center;padding:10px 16px;
}

/* ── ADMIN NEUMORPHISM OVERRIDE ───────────────────────────── */
body.is-admin,[data-selectable],[data-selectable]*{
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;
}
.adm-wrap{max-width:540px;margin:0 auto;padding:16px 16px 100px;}
.adm-login-hero{text-align:center;padding:32px 0 24px;}
.adm-lock-badge{
  width:72px;height:72px;
  background:var(--accent);
  box-shadow:0 8px 24px rgba(91,124,250,0.4);
  border-radius:var(--radius-md);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;margin-bottom:16px;
}
.adm-h1{font-family:'Space Grotesk',sans-serif;font-size:2.6rem;font-weight:900;line-height:1;letter-spacing:-2px;color:var(--text);margin-bottom:8px;}
.adm-sub{font-size:.9rem;color:var(--text-sub);font-weight:600;}
.adm-card{
  background:var(--surface);box-shadow:var(--neu-md);
  border-radius:var(--radius-lg);padding:18px;margin-bottom:14px;
}
.adm-card-label{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px;}
.adm-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.adm-input{
  width:100%;padding:11px 14px;
  font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:600;
  background:var(--bg);box-shadow:var(--neu-inset);
  border:none;border-radius:var(--radius-sm);
  color:var(--text);outline:none;transition:all .2s;resize:none;
}
.adm-input:focus{box-shadow:var(--neu-inset-md),0 0 0 2px rgba(91,124,250,.25);}
.adm-input::placeholder{color:var(--text-muted);font-weight:500;}
.adm-pw-row{display:flex;gap:10px;align-items:stretch;}
.adm-pw-row .adm-input{flex:1;}
.adm-form-stack{display:flex;flex-direction:column;gap:10px;}
.adm-btn-red{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;font-family:'Space Grotesk',sans-serif;font-size:.85rem;font-weight:800;letter-spacing:.04em;
  background:#ff4757;color:#fff;border:none;
  box-shadow:0 4px 14px rgba(255,71,87,0.35);
  border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:all .15s;
}
.adm-btn-red:active{transform:translateY(1px);}
.adm-btn-green{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;font-family:'Space Grotesk',sans-serif;font-size:.85rem;font-weight:800;letter-spacing:.04em;
  background:var(--accent);color:#fff;border:none;
  box-shadow:0 4px 14px rgba(91,124,250,0.35);
  border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:all .15s;
}
.adm-btn-green:active{transform:translateY(1px);}
.adm-btn-full{width:100%;}
.adm-btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;font-family:'Space Grotesk',sans-serif;font-size:.78rem;font-weight:700;
  background:var(--surface);color:var(--text);border:none;
  box-shadow:var(--neu-sm);border-radius:var(--radius-sm);cursor:pointer;
  white-space:nowrap;transition:all .15s;
}
.adm-btn-ghost:hover{color:var(--accent);}
.adm-btn-unban{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;
  background:var(--surface);color:#ff4757;border:none;box-shadow:var(--neu-sm);
  border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s;
}
.adm-btn-del{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;
  background:var(--surface);color:var(--text);border:none;box-shadow:var(--neu-sm);
  border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s;
}
.adm-hint{font-size:.75rem;color:var(--text-muted);margin-top:10px;font-weight:500;}
.adm-hint code{font-family:'JetBrains Mono',monospace;background:var(--bg);box-shadow:var(--neu-sm);padding:1px 5px;border-radius:4px;font-size:.8em;}
.adm-alert-box{margin-top:10px;padding:10px 14px;border-radius:var(--radius-sm);font-size:.84rem;font-weight:700;box-shadow:var(--neu-sm);}
.adm-alert-err{background:#ff4757;color:#fff;}
.adm-alert-ok{background:var(--accent);color:#fff;}
.adm-alert-info{background:var(--surface);color:var(--text);}
.adm-dash-bar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--text);color:var(--bg);
  padding:12px 16px;border-radius:var(--radius-md);margin-bottom:14px;
  box-shadow:var(--neu-md);
}
.adm-dash-brand{font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;gap:8px;}
.adm-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:14px;}
.adm-tab{
  padding:9px 4px;font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;justify-content:center;gap:5px;
  background:var(--surface);color:var(--text-sub);border:none;
  box-shadow:var(--neu-sm);border-radius:var(--radius-sm);cursor:pointer;
  transition:all .15s;min-width:0;
}
.adm-tab svg{flex:none;}
.adm-tab-active{background:var(--surface);box-shadow:var(--neu-inset);color:var(--accent);}
.adm-list{display:flex;flex-direction:column;gap:8px;}
.adm-list-item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:12px;background:var(--bg);box-shadow:var(--neu-inset);
  border-radius:var(--radius-sm);
}
.adm-item-info{flex:1;min-width:0;}
.adm-item-ip{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;word-break:break-all;color:var(--text);}
.adm-item-meta{font-size:.72rem;color:var(--text-muted);margin-top:3px;font-weight:500;}
.adm-item-key{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  background:var(--text);color:var(--bg);
  padding:3px 7px;border-radius:5px;word-break:break-all;
  cursor:pointer;display:inline-block;margin-top:3px;user-select:all;
}
.adm-item-key.copied{background:var(--accent);color:#fff;}
.adm-loading{display:flex;align-items:center;gap:10px;padding:12px 4px;font-size:.85rem;font-weight:600;color:var(--text-muted);}
.adm-spin{width:18px;height:18px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:adm-spin .6s linear infinite;flex-shrink:0;}
@keyframes adm-spin{to{transform:rotate(360deg);}}
.adm-empty{text-align:center;padding:20px;font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;color:var(--text-muted);letter-spacing:.05em;}
.ic{display:inline-block;vertical-align:-.15em;flex-shrink:0;}
.adm-field-label{display:flex;align-items:center;gap:6px;margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--text);}
.adm-chips{display:flex;flex-wrap:wrap;gap:8px;}
.adm-chip{
  padding:7px 11px;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  background:var(--surface);color:var(--text-sub);border:none;box-shadow:var(--neu-sm);border-radius:var(--radius-sm);cursor:pointer;
  transition:all .15s;
}
.adm-chip-on{background:var(--surface);box-shadow:var(--neu-inset);color:var(--accent);}
.adm-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
.adm-toggle-row{
  display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 14px;
  background:var(--bg);box-shadow:var(--neu-inset);border-radius:var(--radius-sm);
  cursor:pointer;user-select:none;
}
.adm-toggle-left{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.adm-toggle-info{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--text);}
.adm-toggle-desc{font-size:.76rem;font-weight:500;color:var(--text-muted);line-height:1.4;}
.adm-toggle-pill{
  flex-shrink:0;display:inline-flex;align-items:center;
  width:48px;height:28px;
  background:var(--bg);box-shadow:var(--neu-inset);border-radius:14px;
  transition:background .2s;padding:2px;box-sizing:border-box;border:none;
}
.adm-toggle-pill.on{background:var(--accent);box-shadow:0 2px 8px rgba(91,124,250,.35);}
.adm-toggle-pill-knob{
  width:20px;height:20px;
  background:#fff;border-radius:50%;
  transition:transform .2s;flex-shrink:0;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.adm-toggle-pill.on .adm-toggle-pill-knob{transform:translateX(20px);}
.adm-toggle-chk{display:none;}

/* Admin modals */
.adm-modal{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein .15s ease;}
.adm-modal.hidden{display:none;}
.adm-modal-box{width:100%;max-width:380px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--neu-lg);padding:20px 18px 18px;animation:admPop .18s cubic-bezier(.2,1.4,.4,1);}
@keyframes admPop{from{transform:scale(.88) translateY(8px);opacity:0}to{transform:none;opacity:1}}
.adm-modal-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.adm-modal-ico{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:#ff4757;color:#fff;border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(255,71,87,.35);}
.adm-modal-ico.warn{background:var(--accent);box-shadow:0 4px 12px rgba(91,124,250,.35);}
.adm-modal-tag{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:800;letter-spacing:.1em;background:var(--text);color:var(--bg);padding:4px 10px;border-radius:6px;}
.adm-modal-title{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:800;letter-spacing:-.5px;color:var(--text);margin-bottom:6px;}
.adm-modal-msg{font-size:.86rem;font-weight:600;color:var(--text-sub);line-height:1.5;margin-bottom:12px;}
.adm-modal-detail{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;color:var(--bg);background:var(--text);padding:9px 12px;border-radius:var(--radius-sm);word-break:break-all;margin-bottom:16px;}
.adm-modal-detail:empty{display:none;}
.adm-modal-actions{display:flex;gap:10px;}
.adm-btn-lg{flex:1;justify-content:center;padding:12px 14px!important;font-size:.85rem!important;}
.adm-btn-ghost.adm-btn-lg{background:var(--surface);}

/* admin notice / chips */
.adm-textarea{resize:none;}
.notice-preview{background:var(--surface);box-shadow:var(--neu-sm);border-radius:var(--radius-md);overflow:hidden;}
.notice-preview[data-type="maintenance"]{background:var(--surface);}
.notice-preview+.notice-preview{margin-top:14px;}
.notice-preview-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:var(--bg);border-bottom:1px solid rgba(0,0,0,.06);font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--text-sub);}
.np-tag{display:inline-flex;align-items:center;gap:6px;}
.notice-preview-body{padding:12px 14px 4px;}
.notice-preview-title{font-size:.95rem;font-weight:800;line-height:1.35;word-break:break-word;color:var(--text);}
.notice-preview-msg{font-size:.84rem;font-weight:500;color:var(--text-sub);margin-top:4px;line-height:1.45;white-space:pre-wrap;word-break:break-word;}
.notice-preview-meta{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text-muted);margin-top:8px;}
.notice-preview-actions{display:flex;gap:8px;padding:10px 14px 14px;}
.notice-preview-actions button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;position:relative;z-index:1;}

/* ban / maint screens keep their neo-brutalist style */
.ban-screen{position:fixed;inset:0;z-index:2147483647;background-color:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;font-family:'Space Grotesk',system-ui,sans-serif;color:var(--text);}
.ban-card{width:100%;max-width:440px;background:var(--surface);box-shadow:var(--neu-lg);border-radius:var(--radius-lg);padding:20px 18px 18px;animation:banPop .22s cubic-bezier(.2,1.4,.4,1);}
@keyframes banPop{from{transform:scale(.9) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.ban-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;}
.ban-badge{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:800;letter-spacing:.1em;background:var(--text);color:var(--bg);padding:5px 10px;border-radius:6px;white-space:nowrap;}
.ban-host{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;color:var(--text-muted);word-break:break-all;text-align:right;}
.ban-ico{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#ff4757;color:#fff;box-shadow:0 8px 20px rgba(255,71,87,.35);border-radius:var(--radius-md);margin-bottom:16px;}
.ban-ico svg{width:34px;height:34px;}
.ban-title{font-size:clamp(2rem,10vw,2.8rem);font-weight:800;letter-spacing:-1.5px;line-height:1;text-transform:uppercase;margin-bottom:12px;color:var(--text);}
.ban-title span{display:inline-block;background:var(--accent);padding:2px 8px;margin-top:6px;transform:rotate(-1.5deg);color:#fff;border-radius:6px;}
.ban-lead{font-size:.95rem;font-weight:600;color:var(--text-sub);line-height:1.5;margin-bottom:16px;}
.ban-row{box-shadow:var(--neu-sm);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden;}
.ban-k{display:block;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--bg);padding:4px 10px;color:var(--text-sub);}
.ban-v{display:block;font-family:'JetBrains Mono',monospace;font-size:.85rem;font-weight:700;padding:9px 10px;word-break:break-word;color:var(--text);}
.ban-help{font-size:.82rem;font-weight:700;color:var(--text-sub);margin:16px 0 10px;}
.ban-btn{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);color:#fff;border-radius:var(--radius-md);box-shadow:0 6px 18px rgba(91,124,250,.4);padding:13px 14px;font-weight:800;font-size:.88rem;text-decoration:none;text-transform:uppercase;letter-spacing:.02em;transition:all .15s;}
.ban-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(91,124,250,.5);}
.ban-btn svg{width:20px;height:20px;flex:none;}
.maint-screen{position:fixed;inset:0;z-index:2147483646;background-color:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;font-family:'Space Grotesk',system-ui,sans-serif;color:var(--text);}
.maint-card{width:100%;max-width:440px;background:var(--surface);box-shadow:var(--neu-lg);border-radius:var(--radius-lg);padding:20px 18px 18px;animation:banPop .22s cubic-bezier(.2,1.4,.4,1);}
.maint-ico{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--accent);border-radius:var(--radius-md);box-shadow:0 8px 20px rgba(91,124,250,.35);margin-bottom:16px;color:#fff;}
.maint-title{font-size:clamp(1.8rem,9vw,2.5rem);font-weight:800;letter-spacing:-1.5px;line-height:1;text-transform:uppercase;margin-bottom:12px;color:var(--text);}
.maint-title span{display:inline-block;background:var(--accent);padding:2px 8px;margin-top:6px;transform:rotate(-1.5deg);color:#fff;border-radius:6px;}
.maint-lead{font-size:.95rem;font-weight:600;color:var(--text-sub);line-height:1.5;margin-bottom:16px;}
.maint-msg-box{box-shadow:var(--neu-sm);border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden;}
.maint-msg-label{display:block;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--bg);padding:4px 10px;color:var(--text-sub);}
.maint-msg-val{display:block;font-size:.88rem;font-weight:600;padding:9px 10px;line-height:1.45;color:var(--text);}
.maint-btn{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);color:#fff;border-radius:var(--radius-md);box-shadow:0 6px 18px rgba(91,124,250,.4);padding:13px 14px;font-weight:800;font-size:.88rem;text-decoration:none;text-transform:uppercase;letter-spacing:.02em;width:100%;cursor:pointer;border:none;transition:all .15s;margin-top:6px;}
.maint-btn:hover{transform:translateY(-2px);}
.maint-btn-alt{background:var(--surface);color:var(--text);box-shadow:var(--neu-sm);}
.maint-ico svg{width:32px;height:32px;}
@keyframes maintSpin{to{transform:rotate(360deg)}}
.maint-btn.is-spin svg{animation:maintSpin .7s linear infinite;}

/* notice banner */
.notice-banner{display:flex;align-items:stretch;box-sizing:border-box;width:calc(100% - 32px);max-width:728px;height:44px;margin:12px auto 14px;background:var(--surface);box-shadow:var(--neu-sm);border-radius:var(--radius-md);overflow:hidden;}
.nb-label{display:flex;align-items:center;gap:6px;flex:none;padding:0 12px;background:var(--accent);color:#fff;font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:800;letter-spacing:.12em;}
.nb-marquee{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);}
.nb-track{display:flex;flex:none;width:max-content;white-space:nowrap;animation:nbScroll 30s linear infinite;will-change:transform;}
.nb-item{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-size:.84rem;font-weight:600;color:var(--text);}
.nb-dot{width:5px;height:5px;border-radius:50%;background:var(--text-muted);flex:none;}
@keyframes nbScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.notice-banner:hover .nb-track,.notice-banner:active .nb-track{animation-play-state:paused;}

/* ── ANTI-FLASH ROUTING ───────────────────────────────────── */
html[data-route] .page{display:none!important}
html[data-route="bulk"] #page-bulk,
html[data-route="docs"] #page-docs,
html[data-route="community"] #page-community,
html[data-route="admin"] #page-admin{display:block!important;position:relative;z-index:1}

html[data-adm="in"] #adm-login{display:none!important}
html[data-adm="in"] #adm-dash{display:block!important}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media screen and (max-width:380px){
  .nav{padding:8px 10px;gap:6px;}
  .brand{font-size:13px;gap:6px;}
  .brand .mark{width:30px;height:30px;}
  .nav-badge-am{display:none;}
  .nav-donasi{display:none;}
  .nav-contact{padding:5px 8px;font-size:10px;}
  .theme-toggle-card{top:8px;left:8px;padding:6px 10px;gap:6px;}
  .theme-toggle-label{display:none;}
  .info-bar{padding:4px 12px 8px;gap:6px;}
  .info-card{min-width:75px;padding:6px 8px;}
  .hero{padding:6px 14px 16px;}
  .hero h1{font-size:22px;}
  .stats-bar{padding:0 14px;gap:8px;}
  .workspace{padding:0 14px 28px;}
  .panel-body{padding:12px 14px;}
  .btn{font-size:13px;padding:11px 16px;}

}
@media screen and (min-width:381px) and (max-width:480px){
  .hero{padding:8px 18px 18px;}
  .stats-bar{padding:0 18px;}
  .workspace{padding:0 18px 30px;}
  .info-bar{padding:4px 18px 8px;}
}
.hero,.stats-bar,.workspace,.info-bar{width:100%;}

/* ══════════════════════════════════════════════════════════════
   PATCH 5 — Neo-brutalist brand font
   PATCH 6 — Entry animations + staggered delays
   ══════════════════════════════════════════════════════════════ */

/* ── 5. BRAND "Lekzo" — neo-brutalist heavy ─────────────── */
.brand-text{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(15px,4vw,18px);
  font-weight:900;
  letter-spacing:-1.2px;
  color:var(--text);
  /* subtle text shadow khas neo-brutalism: solid offset */
  text-shadow:1px 1px 0 var(--neu-dark), -1px -1px 0 var(--neu-light);
  transition:color .3s;
  line-height:1;
  user-select:none;
}
/* inside dark mode, flip shadow */
[data-theme="dark"] .brand-text{
  text-shadow:1.5px 1.5px 0 rgba(0,0,0,.45), -1px -1px 0 rgba(50,55,70,.6);
}

/* keep the badge vertically aligned */
.brand{align-items:center;gap:9px;}

/* ── 6. KEYFRAMES ────────────────────────────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeDown{
  from{opacity:0;transform:translateY(-12px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.88);}
  to{opacity:1;transform:scale(1);}
}
@keyframes slideRight{
  from{opacity:0;transform:translateX(-16px);}
  to{opacity:1;transform:translateX(0);}
}

/* ── 6. ANIMATION CLASSES ─────────────────────────────────────── */
.anim-fade-up{
  animation:fadeUp .5s cubic-bezier(.22,1,.36,1) both;
}
.anim-fade-down{
  animation:fadeDown .45s cubic-bezier(.22,1,.36,1) both;
}
.anim-fade-in{
  animation:fadeIn .45s ease both;
}
.anim-scale-in{
  animation:scaleIn .45s cubic-bezier(.22,1,.36,1) both;
}
.anim-slide-right{
  animation:slideRight .42s cubic-bezier(.22,1,.36,1) both;
}

/* Stagger delays (apply along with an anim-* class) */
.d0{animation-delay:.05s;}
.d1{animation-delay:.12s;}
.d2{animation-delay:.19s;}
.d3{animation-delay:.26s;}
.d4{animation-delay:.33s;}
.d5{animation-delay:.40s;}
.d6{animation-delay:.50s;}
.d7{animation-delay:.60s;}

/* ── Nav ── */
.nav-float-wrap{
  animation:fadeDown .4s cubic-bezier(.22,1,.36,1) both;
  animation-delay:.04s;
}
/* ── Theme toggle card ── */
.theme-toggle-card{
  animation:slideRight .42s cubic-bezier(.22,1,.36,1) both;
  animation-delay:.08s;
}
/* ── Info bar cards ── */
.info-card:nth-child(1){animation:fadeUp .45s cubic-bezier(.22,1,.36,1) .10s both;}
.info-card:nth-child(2){animation:fadeUp .45s cubic-bezier(.22,1,.36,1) .17s both;}
.info-card:nth-child(3){animation:fadeUp .45s cubic-bezier(.22,1,.36,1) .24s both;}
.info-card:nth-child(4){animation:fadeUp .45s cubic-bezier(.22,1,.36,1) .31s both;}
/* ── Hero ── */
.hero-badge{animation:fadeIn .38s ease .18s both;}
.hero h1{animation:fadeUp .52s cubic-bezier(.22,1,.36,1) .24s both;}
.hero p{animation:fadeUp .5s cubic-bezier(.22,1,.36,1) .32s both;}
/* ── Stats ── */
.stat-box:nth-child(1){animation:scaleIn .45s cubic-bezier(.22,1,.36,1) .30s both;}
.stat-box:nth-child(2){animation:scaleIn .45s cubic-bezier(.22,1,.36,1) .38s both;}
/* ── Workspace panels ── */
.workspace .panel:nth-child(1){animation:fadeUp .5s cubic-bezier(.22,1,.36,1) .34s both;}
.workspace .panel:nth-child(2){animation:fadeUp .5s cubic-bezier(.22,1,.36,1) .42s both;}
.workspace .panel:nth-child(3){animation:fadeUp .5s cubic-bezier(.22,1,.36,1) .50s both;}
/* ── Bottom nav ── */
/* ── Community cards ── */
.community-card:nth-child(1){animation:fadeUp .45s cubic-bezier(.22,1,.36,1) .12s both;}
.community-card:nth-child(2){animation:fadeUp .45s cubic-bezier(.22,1,.36,1) .20s both;}
.community-card:nth-child(3){animation:fadeUp .45s cubic-bezier(.22,1,.36,1) .28s both;}
.community-card:nth-child(4){animation:fadeUp .45s cubic-bezier(.22,1,.36,1) .36s both;}
/* ── Docs cards ── */
.docs-endpoint-card{animation:fadeUp .48s cubic-bezier(.22,1,.36,1) .22s both;}
.docs-apikey-card{animation:fadeUp .45s cubic-bezier(.22,1,.36,1) .14s both;}
/* ── Hover micro-interactions ── */
.panel,.stat-box,.info-card,.community-card,.docs-apikey-card,.docs-endpoint-card{
  transition:transform .2s cubic-bezier(.22,1,.36,1),
             box-shadow .2s cubic-bezier(.22,1,.36,1),
             background .35s, color .35s;
}
.panel:hover,.stat-box:hover{
  transform:translateY(-2px);
  box-shadow:var(--neu-lg);
}
/* ── Button press feedback ── */
.btn,.btn-reset,.tab-btn{
  transition:transform .15s, box-shadow .15s, background .25s, color .25s;
}
.btn:active,.btn-reset:active{transform:scale(.97);}

/* ══════════════════════════════════════════════════════════════
   PATCH 7 — Nav restructure: theme toggle inline, bottom-nav centered
   ══════════════════════════════════════════════════════════════ */

/* ── REMOVE old fixed theme-toggle-card position ─────────────── */
.theme-toggle-card{display:none!important;}

/* ── INLINE THEME TOGGLE (inside nav-actions) ─────────────────── */
.theme-toggle-inline{
  display:flex;align-items:center;gap:4px;
  background:var(--bg);
  box-shadow:var(--neu-sm);
  border:none;border-radius:100px;
  padding:5px 7px;cursor:pointer;
  flex-shrink:0;
  transition:box-shadow .15s,background .35s;
}
.theme-toggle-inline:active{box-shadow:var(--neu-inset);}
.theme-toggle-inline .theme-icon{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-sub);
  transition:all .25s cubic-bezier(.22,1,.36,1);
  flex-shrink:0;
  background:transparent;
  box-shadow:none;
}
.theme-toggle-inline .theme-icon.active{
  background:var(--accent);
  color:#fff;
  box-shadow:0 3px 10px rgba(91,124,250,0.4);
}
.theme-toggle-inline .theme-icon svg{width:14px;height:14px;}

/* ── REMOVE donasi button (now inline in nav is toggle only) ──── */
.nav-donasi{display:none!important;}

/* ── NAV-ACTIONS gap tighten ──────────────────────────────────── */
.nav-actions{gap:8px;}




/* ══════════════════════════════════════════════════════════════
   BOTTOM NAV — Liquid bubble + Neumorphism bar
   ══════════════════════════════════════════════════════════════ */
.bn{position:fixed;bottom:0;left:0;right:0;z-index:200;padding:34px 16px calc(16px + env(safe-area-inset-bottom,0));pointer-events:none}
.bn div{--i:0;--r:38px;pointer-events:auto;max-width:768px;margin:0 auto;display:flex;position:relative;padding:8px var(--sx,8px);height:68px}

/* Bar: neumorphism — sama seperti card/panel di amfree */
.bn .bar{
  position:absolute;inset:0;border-radius:22px;
  background:var(--surface);
  box-shadow:var(--neu-lg);
  transition:background .35s,box-shadow .35s
}

/* SVG shadow & stroke — masih dipakai untuk lekukan liquid */
.bn .bsh,.bn .bst{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* Shadow SVG: warna shadow lekukan ikut tema */
.bn .bsh{--shc:var(--neu-dark)}
.bn .bst{--s1:rgba(255,255,255,.15);--s2:rgba(255,255,255,.03);z-index:1}
[data-theme=light] .bn .bsh{--shc:rgba(163,177,198,.8)}
[data-theme=light] .bn .bst{--s1:rgba(255,255,255,.9);--s2:rgba(255,255,255,.5)}
.bn .bsh feFlood{flood-color:var(--shc)}
.bn .bst stop:first-child{stop-color:var(--s1)}
.bn .bst stop:last-child{stop-color:var(--s2)}

/* Bubble */
.bn .ind{position:absolute;top:0;left:0;width:0;height:0;will-change:transform;pointer-events:none;z-index:1}
.bn .ind::before{content:'';position:absolute;left:0;top:-27px;width:54px;height:54px;margin-left:-27px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2,#4a67e8));box-shadow:0 8px 20px rgba(91,124,250,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.bn .ind.mv::before{animation:liq .62s cubic-bezier(.34,1.3,.55,1)}
@keyframes liq{0%{transform:scale(1)}28%{transform:scale(1.22,.82)}62%{transform:scale(.9,1.12)}100%{transform:scale(1)}}

/* Buttons */
.bn button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:52px;padding:0;border:none;background:none;cursor:pointer;border-radius:14px;color:var(--text-muted);font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;position:relative;z-index:2;-webkit-tap-highlight-color:transparent;transition:color .3s}
.bn button svg{transition:transform .6s cubic-bezier(.34,1.45,.55,1)}
.bn button span{position:absolute;left:0;right:0;bottom:3px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .5s cubic-bezier(.16,1,.3,1)}
.bn button.on{color:#fff}
.bn button.on svg{transform:translateY(-34px) scale(1.08)}
.bn button.on span{opacity:1;transform:none;color:var(--accent);transition-delay:.12s}
@media(prefers-reduced-motion:reduce){.bn button svg{transition:none}.bn .ind.mv::before{animation:none}}

.gpu{will-change:transform;transform:translateZ(0)}