*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100vh;width:100%;font-family:Nunito,sans-serif;color:#fff;background:#0d1117;overflow-x:hidden}
body{background:linear-gradient(135deg,#0d1117,#161b22 40%,#1a1040)}
@keyframes fadeIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes slam{0%{opacity:0;transform:translateY(-28px) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes flipIn{0%{opacity:0;transform:perspective(600px) rotateX(45deg)}100%{opacity:1;transform:none}}
.pg{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px;overflow-y:auto}
.pg-c{justify-content:center}
.cd{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border-radius:18px;border:1px solid rgba(255,255,255,.08);padding:24px;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.bt{border:none;border-radius:12px;color:#fff;padding:12px 24px;font:800 16px Nunito,sans-serif;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.bt:hover{transform:scale(1.03);filter:brightness(1.06)}
.bt:active{transform:scale(.97)}
.bt:disabled{opacity:.4;cursor:default;transform:none!important;filter:none!important}
.bt-lg{padding:16px 36px;font-size:19px;border-radius:14px}
.bt-t{background:linear-gradient(135deg,#4ecdc4,#3bb8b0)}
.bt-r{background:linear-gradient(135deg,#e63946,#d32f3f)}
.bt-o{background:linear-gradient(135deg,#ff8c42,#f07530)}
.bt-g{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.inp{background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 16px;color:#fff;font:600 16px Nunito,sans-serif;outline:none;width:100%}
.inp:focus{border-color:#4ecdc4}
.inp::placeholder{color:rgba(255,255,255,.35)}
.lb{font:700 11px Nunito,sans-serif;color:rgba(255,255,255,.5);margin-bottom:5px;text-transform:uppercase;letter-spacing:1.2px}
.code{font:900 38px "Space Mono",monospace;letter-spacing:8px;color:#4ecdc4;text-shadow:0 0 20px rgba(78,205,196,.3)}
.tag{font-size:9px;background:#4ecdc4;padding:1px 6px;border-radius:5px;font-weight:800;color:#07121a}
.conn{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:100;padding:6px 16px;border-radius:10px;font:700 12px Nunito,sans-serif;pointer-events:none;transition:all .3s}
.conn-ok{background:rgba(78,205,196,.15);color:#4ecdc4;opacity:0}
.conn-err{background:rgba(230,57,70,.2);color:#e63946;opacity:1}
.conn-slow{background:rgba(255,230,109,.15);color:#ffe66d;opacity:1}
.ql{display:flex;flex-direction:column;width:100%;max-width:1000px;gap:14px;flex:1}
.qt{text-align:center;font:800 28px/1.35 Nunito,sans-serif;padding:8px 0}
.qv{width:100%;aspect-ratio:16/9;max-height:520px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.03);border:2px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 35px rgba(0,0,0,.3)}
.qv img{width:100%;height:100%;object-fit:cover}
.qv-ph{font-size:100px;opacity:.08}
.qo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qob{border-radius:20px;padding:24px 20px;border:3px solid transparent;display:flex;align-items:center;gap:14px;min-height:86px;cursor:pointer;transition:all .2s;font:800 20px Nunito,sans-serif;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.qob:hover:not(.qd){transform:scale(1.02)}
.qob:active:not(.qd){transform:scale(.98)}
.qd{cursor:default;opacity:.5}
.qs{opacity:1!important;border-color:rgba(255,255,255,.55)!important}
.qsh{font-size:26px;opacity:.4;flex-shrink:0}
.tm{display:flex;align-items:center;gap:10px}
.tmb{flex:1;height:10px;background:rgba(255,255,255,.07);border-radius:5px;overflow:hidden}
.tmf{height:100%;border-radius:5px;transition:width .5s linear,background .5s}
.sb{width:100%;max-width:900px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 30px rgba(0,0,0,.3);animation:slam .45s ease both}
.sbt{padding:10px;background:linear-gradient(135deg,#e63946,#ff8c42);font:900 15px Nunito,sans-serif;text-align:center;letter-spacing:1px;text-transform:uppercase}
.sbh{display:grid;grid-template-columns:2.2fr .8fr .8fr .8fr 1.1fr;padding:6px 12px;background:linear-gradient(135deg,#1a237e,#283593);font:800 10px Nunito,sans-serif;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.68);align-items:center}
.sbr{display:grid;grid-template-columns:2.2fr .8fr .8fr .8fr 1.1fr;padding:7px 12px;align-items:center;border-bottom:1px solid rgba(255,255,255,.03);animation:flipIn .35s ease both}
.sbr:nth-child(odd){background:rgba(255,255,255,.025)}
.sbr:nth-child(even){background:rgba(255,255,255,.012)}
.sbr-me{background:rgba(78,205,196,.08)!important;border-left:3px solid #4ecdc4}
.sbr-1{background:rgba(255,230,109,.05)!important}
.sbc{text-align:center;font:800 15px "Space Mono",monospace}
.gb{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;padding:6px;background:rgba(0,0,0,.3);border-radius:12px}
.gbtn{width:38px;height:38px;border-radius:10px;border:none;background:rgba(255,255,255,.05);cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.gbtn:hover{background:rgba(255,255,255,.12);transform:scale(1.12)}
@media(max-width:600px){.qo{grid-template-columns:1fr}.qt{font-size:22px}.qob{padding:18px 16px;min-height:70px;font-size:18px}.qv{max-height:260px}.cd{padding:18px}.code{font-size:26px;letter-spacing:5px}}