:root{--bg:#071018;--card:#0d1b26;--line:#1d3546;--muted:#91a6b5;--accent:#27d7c7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top right,#12344a 0,transparent 35%),var(--bg);color:#f4fbff;font-family:Inter,system-ui,sans-serif;min-height:100vh;padding-bottom:90px}.bot-header{display:flex;align-items:center;justify-content:space-between;padding:18px 5%;border-bottom:1px solid var(--line);background:#08131de8;position:sticky;top:0;z-index:5;backdrop-filter:blur(14px)}.bot-header h1{margin:2px 0;font-size:21px}.bot-header small,.bot-intro span{color:var(--accent);font-weight:800;letter-spacing:.12em;font-size:10px}.back,.bot-header button,.bot-intro a{color:#fff;text-decoration:none;border:1px solid var(--line);background:#102331;border-radius:12px;padding:10px 13px;font-weight:700}.bot-header button{cursor:pointer}.bot-shell{max-width:850px;margin:auto;padding:22px 16px}.bot-intro{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(135deg,#102b3c,#0b202d);border:1px solid #22516a;padding:22px;border-radius:22px;margin-bottom:18px}.bot-intro h2{margin:6px 0;font-size:24px}.bot-intro p{margin:0;color:#afc2ce;line-height:1.6}.bot-intro a{white-space:nowrap;background:var(--accent);color:#03201e;border:0}.bot-message{padding:13px;border:1px solid var(--line);border-radius:14px;color:var(--muted);margin-bottom:14px}.bot-message:empty{display:none}.bot-list{display:grid;gap:16px}.bot-card{background:rgba(13,27,38,.95);border:1px solid var(--line);border-radius:22px;padding:19px;box-shadow:0 16px 45px #0004}.bot-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.bot-card h3{margin:4px 0;font-size:20px}.bot-card small{color:var(--muted)}.status{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#182f3f;color:#b7cad6;font-weight:800;font-size:11px;text-transform:uppercase}.status i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px currentColor22}.status.connected{background:#0d3d37;color:#6ff5df}.status.waiting_pairing{background:#443812;color:#ffe589}.status.creating,.status.connecting,.status.reconnecting{color:#7cecff}.status.creating i,.status.connecting i,.status.reconnecting i{animation:statusPulse 1.15s infinite}.status.expired,.status.failed,.status.logged_out{background:#461f29;color:#ff9cae}.bot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}.bot-grid div{background:#09151e;border:1px solid #183141;border-radius:14px;padding:12px}.bot-grid span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.bot-grid strong{font-size:13px;word-break:break-all}.pairing{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a2d2b,#103440);border:1px solid #247b72;border-radius:17px;padding:15px;margin-top:12px}.pairing:after{content:"";position:absolute;inset:-100% auto -100% -55%;width:35%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,#ffffff18,transparent);animation:pairShine 4s infinite}.pairing-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.pairing span{display:block;color:#9bbdbb;font-size:12px}.pairing b{font-size:9px;color:#6ff5df;letter-spacing:.08em}.pairing strong{display:block;font-size:27px;letter-spacing:.16em;margin:8px 0;color:#73f4e2}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}.actions button{border:1px solid #285269;background:#122d3c;color:#fff;padding:10px 13px;border-radius:11px;font-weight:800;cursor:pointer}.actions button:disabled{opacity:.55;cursor:wait}.actions button.primary{background:var(--accent);color:#052421;border:0}.empty{text-align:center;padding:45px 20px;border:1px dashed #29485b;border-radius:20px;color:var(--muted)}.plugin-link{display:block;text-align:center;text-decoration:none;background:linear-gradient(90deg,#2dd4bf,#38bdf8);color:#04202b;font-weight:900;padding:14px;border-radius:14px}.live-process{display:flex;align-items:center;gap:13px;padding:13px;margin-top:14px;border:1px solid #1c5267;border-radius:15px;background:linear-gradient(90deg,#0b2632,#0b1d28)}.live-process strong,.live-process span{display:block}.live-process strong{font-size:13px;color:#dffaff}.live-process span{font-size:11px;color:#91aebd;margin-top:3px}.live-process-icon{display:flex;align-items:flex-end;gap:3px;height:20px}.live-process-icon i{display:block;width:4px;border-radius:999px;background:#4be5d5;animation:equalizer .9s infinite ease-in-out}.live-process-icon i:nth-child(1){height:8px}.live-process-icon i:nth-child(2){height:18px;animation-delay:.15s}.live-process-icon i:nth-child(3){height:12px;animation-delay:.3s}.order-error{border-color:#6b2938;color:#ffb0bd;background:#2a1118}
.pairing-progress[hidden]{display:none}.pairing-progress{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:#02080dd9;backdrop-filter:blur(12px)}.pairing-progress-card{width:min(470px,100%);position:relative;overflow:hidden;background:linear-gradient(160deg,#102a38,#09151e 72%);border:1px solid #285267;border-radius:26px;padding:25px;box-shadow:0 30px 90px #000b}.pairing-progress-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,#30d8c629,transparent 36%);pointer-events:none}.pairing-loader{position:relative;width:72px;height:72px;margin:2px auto 19px}.pairing-loader:before,.pairing-loader:after{content:"";position:absolute;border-radius:50%;inset:0;border:2px solid #2fe0ce}.pairing-loader:before{animation:ring 1.7s infinite}.pairing-loader:after{inset:11px;border-color:#40bff4;animation:ring 1.7s .45s infinite reverse}.pairing-loader-core{position:absolute;inset:25px;border-radius:50%;background:#5cf3df;box-shadow:0 0 26px #38e8d3;animation:corePulse 1.2s infinite}.pairing-progress-card h3{text-align:center;margin:0;font-size:21px}.pairing-progress-card>p{text-align:center;color:#9cb4c2;font-size:13px;line-height:1.55;margin:9px auto 21px;max-width:360px}.pairing-steps{display:grid;gap:10px}.pairing-step{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid #193647;border-radius:13px;background:#08131c;color:#8299a8;transition:.3s}.pairing-step .step-icon{display:grid;place-items:center;width:24px;height:24px;border:1px solid #2c4a5b;border-radius:50%;font-size:11px;font-weight:900}.pairing-step strong{font-size:12px}.pairing-step small{font-size:10px;color:#688392}.pairing-step.active{border-color:#2c8490;background:#0b252d;color:#dffefa}.pairing-step.active .step-icon{border-color:#43e5d2;color:#43e5d2;animation:statusPulse 1s infinite}.pairing-step.active small:after{content:"Memproses"}.pairing-step.done{border-color:#226057;color:#bafbf0}.pairing-step.done .step-icon{background:#1aa998;border-color:#1aa998;color:#05221f}.pairing-step.done .step-icon:before{content:"✓"}.pairing-step.done .step-number{display:none}.pairing-step.done small:after{content:"Selesai";color:#58dbc8}.pairing-step.failed{border-color:#8d3449;color:#ffc0cb}.pairing-step.failed .step-icon{border-color:#df5f77;color:#ff8ba0}.pairing-step.failed small:after{content:"Perlu dicoba ulang";color:#ff8ba0}.pairing-progress-close{width:100%;margin-top:18px;padding:13px;border:0;border-radius:13px;background:linear-gradient(90deg,#2dd4bf,#38bdf8);font-weight:900;color:#04202b}.pairing-progress-close[hidden]{display:none}.pairing-open{overflow:hidden}
@keyframes ring{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.25);opacity:0}}@keyframes corePulse{50%{transform:scale(.76);opacity:.7}}@keyframes statusPulse{50%{opacity:.35;transform:scale(.8)}}@keyframes equalizer{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}@keyframes pairShine{0%,55%{left:-55%}85%,100%{left:125%}}@media(max-width:650px){.bot-intro{align-items:flex-start;flex-direction:column}.bot-grid{grid-template-columns:1fr}.bot-header{padding:14px 12px}.bot-header div{display:none}.pairing-progress-card{padding:22px 17px;border-radius:22px}.pairing-step{grid-template-columns:28px 1fr}.pairing-step small{display:none}}