*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#E8A020;--gold2:#F5C96A;--bg:#0A1628}
html,body{height:100%}
body{background:radial-gradient(circle at 50% 0%, #14203a 0%, #070c16 60%, #04070e 100%);
  font-family:'Inter',sans-serif;color:#fff;min-height:100vh;display:flex;justify-content:center}
.hidden{display:none !important}
.noscroll::-webkit-scrollbar{display:none}
.noscroll{-ms-overflow-style:none;scrollbar-width:none}

/* keyframes (dari mockup) */
@keyframes ssScaleIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes ssFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ssBar{from{width:0%}to{width:100%}}
@keyframes ssRec{0%{box-shadow:0 0 0 0 rgba(220,38,38,.55)}70%{box-shadow:0 0 0 26px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
@keyframes ssBlink{0%,100%{opacity:1}50%{opacity:.18}}
@keyframes ssSpin{to{transform:rotate(360deg)}}
@keyframes ssWave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes ssFadeOut{to{opacity:0;visibility:hidden}}

.app{width:100%;max-width:420px;min-height:100vh;height:100vh;background:var(--bg);
  display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 0 80px rgba(0,0,0,.5)}

/* overlays */
.overlay{position:absolute;inset:0;display:flex;z-index:70}

/* splash */
.splash{position:absolute;inset:0;z-index:60;cursor:pointer;
  background:radial-gradient(circle at 50% 38%, #16243f 0%, #080d18 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.splash.hide{animation:ssFadeOut .45s ease forwards}
.splash-inner{display:flex;flex-direction:column;align-items:center;animation:ssScaleIn .6s ease-out both}
.hexlogo{width:120px;height:120px;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(160deg,#F5C96A,#E8A020 55%,#B56A00);box-shadow:0 0 40px rgba(232,160,32,.35)}
.hexlogo .wave{display:flex;align-items:center;gap:5px;height:46px}
.hexlogo .wave span{width:5px;height:100%;background:#0A1628;border-radius:3px;transform:scaleY(.35);animation:ssWave 1s ease-in-out infinite}
.hexlogo .wave span:nth-child(2){animation-delay:.15s}
.hexlogo .wave span:nth-child(3){animation-delay:.3s}
.hexlogo .wave span:nth-child(4){animation-delay:.15s}
.splash-brand{margin-top:26px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:30px;letter-spacing:1px;color:#fff}
.splash-brand span{color:var(--gold)}
.splash-tag{margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:1px;color:#6F7E92}
.splash-bar{position:absolute;bottom:84px;width:180px;height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.splash-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));animation:ssBar 2.4s linear forwards}

/* status bar + header */
.statusbar{height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:#070c16;font-family:'JetBrains Mono',monospace;font-size:12px;color:#fff;z-index:5}
.sb-icons{display:flex;align-items:center;gap:6px}
.batt{width:20px;height:11px;border:1.5px solid #96A4B4;border-radius:3px;position:relative}
.batt div{position:absolute;inset:1.5px;width:11px;background:#96A4B4;border-radius:1px}
.appheader{height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#070c16;border-bottom:1px solid rgba(255,255,255,.06);z-index:5}
.hexmini{width:26px;height:26px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:#E8A020;display:flex;align-items:center;justify-content:center}
.hexmini .bars{display:flex;align-items:flex-end;gap:1.5px;height:11px}
.hexmini .bars div{width:2px;background:#0A1628}
.hexmini .bars div:nth-child(1){height:5px}
.hexmini .bars div:nth-child(2){height:11px}
.hexmini .bars div:nth-child(3){height:7px}
.health-dot{font-size:11px;color:#6F7E92}
.health-dot.ok{color:#5fd0a3}
.health-dot.bad{color:#F87171}

.content{flex:1;overflow-y:auto;background:#0A1628}
.tab{animation:ssFadeUp .25s ease-out both}

/* language cards */
.langcard{flex:1;background:#132338;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:13px}
.langcard-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;color:#6F7E92}
.langcard-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:#fff}
.langcard-sub{font-size:11px;color:#96A4B4}
.swapbtn{align-self:center;width:38px;height:38px;flex-shrink:0;border-radius:50%;background:#0A1628;border:1px solid rgba(232,160,32,.4);display:flex;align-items:center;justify-content:center;color:#E8A020;cursor:pointer;transition:transform .25s}
.swapbtn:active{transform:rotate(180deg)}

/* mode + emergency */
.modebar{flex:1;background:#132338;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.modedot{width:9px;height:9px;border-radius:50%;background:#E8A020;box-shadow:0 0 8px #E8A020}
.emg-trigger{width:46px;flex-shrink:0;background:rgba(220,38,38,.14);border:1px solid rgba(220,38,38,.5);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#F87171;cursor:pointer}
.modemenu{position:absolute;top:52px;left:0;right:54px;background:#15233c;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.5);z-index:12;overflow:hidden}
.modemenu .item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer}
.modemenu .item:last-child{border-bottom:none}
.modemenu .item:hover{background:rgba(255,255,255,.04)}
.modemenu .pill{display:flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.5px;color:#E8A020;border:1px solid rgba(232,160,32,.4);border-radius:99px;padding:2px 7px}

/* record button */
.recwrap{position:relative;width:158px;height:178px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}
.hex-idle,.hex-rec{width:150px;height:170px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;flex-direction:column;align-items:center;justify-content:center}
.hex-idle{gap:9px;background:linear-gradient(160deg,#F5C96A,#E8A020 58%,#B56A00);box-shadow:0 12px 40px rgba(232,160,32,.28)}
.hex-rec{gap:8px;background:linear-gradient(160deg,#EF4444,#DC2626 60%,#991B1B);animation:ssRec 1.4s ease-out infinite}
.recwave{display:flex;align-items:center;gap:4px;height:32px}
.recwave div{width:5px;background:#fff;border-radius:3px;animation:ssWave .6s ease-in-out infinite}
.recwave div:nth-child(1){height:40%}
.recwave div:nth-child(2){height:90%;animation-delay:.1s}
.recwave div:nth-child(3){height:60%;animation-delay:.2s}
.recwave div:nth-child(4){height:100%;animation-delay:.3s}
.recwave div:nth-child(5){height:50%;animation-delay:.4s}

.spinner{width:18px;height:18px;border:2px solid rgba(232,160,32,.25);border-top-color:#E8A020;border-radius:50%;animation:ssSpin .7s linear infinite}

/* history */
.hist{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.hist .t{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6F7E92;width:38px;flex-shrink:0}
.hist .d{font-size:13px;flex-shrink:0}
.hist .x{font-family:'Inter',sans-serif;font-size:13px;color:#BCC7D4;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist .dot{width:7px;height:7px;border-radius:50%;background:#DC2626;flex-shrink:0}

/* bottom nav */
.bottomnav{height:62px;flex-shrink:0;background:#070c16;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:stretch;z-index:5}
.nav{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:#536071}
.nav span{font-family:'Inter',sans-serif;font-weight:600;font-size:10px;letter-spacing:.3px}
.nav.active{color:#E8A020}

/* onboarding bits */
.ob-num{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;color:#E8A020;margin-top:18px}
.ob-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:24px;color:#fff;margin-top:14px;line-height:1.2}
.ob-desc{font-family:'Inter',sans-serif;font-size:14px;color:#96A4B4;margin-top:12px;line-height:1.6}
.ob-slide{animation:ssFadeUp .35s ease-out both}
.ob-bar{height:3px;width:36px;border-radius:3px;background:rgba(255,255,255,.12)}
.ob-bar.active{background:#E8A020}
.ob-bar.done{background:rgba(232,160,32,.4)}

/* kamus */
.kamus-cat{background:#132338;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:15px;cursor:pointer;transition:all .1s ease}
.kamus-cat.active{border-color:#E8A020;background:rgba(232,160,32,.08)}
.kamus-cat .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.kamus-cat .nm{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:#fff;margin-top:11px}
.kamus-cat .ct{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6F7E92;margin-top:3px}
.phrase{background:#132338;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px 14px;margin-bottom:9px;display:flex;align-items:center;gap:8px;cursor:pointer}
.phrase:active{background:#1a2a42}
.phrase .id{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:#fff}
.phrase .zh{font-family:'JetBrains Mono',monospace;font-size:13px;color:#96A4B4;margin-top:3px}
.phrase .play{width:34px;height:34px;border-radius:50%;background:rgba(232,160,32,.14);display:flex;align-items:center;justify-content:center;color:#E8A020;flex-shrink:0;cursor:pointer}
.phrase .use{width:34px;height:34px;border-radius:50%;background:rgba(58,178,212,.14);display:flex;align-items:center;justify-content:center;color:#3AB2D4;flex-shrink:0;cursor:pointer}

/* settings */
.setrow{display:flex;align-items:center;gap:13px;padding:14px 15px;border-bottom:1px solid rgba(255,255,255,.05)}
.setrow:last-child{border-bottom:none}
.setrow .nm{font-family:'Inter',sans-serif;font-weight:500;font-size:14px;color:#fff}
.setrow .vl{font-family:'Inter',sans-serif;font-size:12px;color:#6F7E92;margin-top:1px}

/* Login screen */
.login-role { transition: all .15s ease; user-select: none; }
.login-role.active { border-color: #E8A020 !important; background: rgba(232,160,32,.1); }