*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:#05090f;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;display:flex;align-items:center;justify-content:center;padding:16px;overscroll-behavior:none}
#frame{width:340px;height:700px;max-height:96vh;background:#0a1420;border-radius:36px;border:1px solid #1b3047;overflow:hidden;position:relative;display:flex;flex-direction:column;color:#dbe6f2;box-shadow:0 20px 60px rgba(0,0,0,.6)}
@media(max-width:430px){body{padding:0}#frame{width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0;border:none}}
@media(display-mode:standalone){body{padding:0}#frame{width:100vw;height:100dvh;max-height:none;border-radius:0;border:none}}
#status{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:11px;color:#5f7793;flex-shrink:0;font-variant-numeric:tabular-nums;padding-top:env(safe-area-inset-top)}
#screens{flex:1;overflow:hidden;position:relative}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
#nav{height:60px;background:#0c1826;border-top:.5px solid #1b3047;display:none;align-items:center;justify-content:space-around;flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}
#nav.on{display:flex}
.tab{background:none;border:none;color:#4a6b8e;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;cursor:pointer;padding:0;font-family:inherit;position:relative}
.tab.act{color:#5fcdf7}
.tab.mid span{width:40px;height:40px;margin-top:-16px;border-radius:50%;background:linear-gradient(180deg,#1c4a7a,#153a63);border:1px solid #3bb9f0;display:flex;align-items:center;justify-content:center;color:#eaf6ff;box-shadow:0 0 12px rgba(60,180,240,.35)}
.dot{position:absolute;top:-2px;right:2px;width:7px;height:7px;border-radius:50%;background:#5fcdf7;box-shadow:0 0 6px #5fcdf7}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.scan{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(90,180,240,.03) 0 1px,transparent 1px 4px);pointer-events:none;z-index:4}
button{font-family:inherit}
input,textarea{font-family:inherit;font-size:16px}
#notif{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;background:rgba(14,32,54,.97);border:1px solid #3bb9f0;border-radius:14px;padding:11px 13px;z-index:60;transform:translateY(-160%);transition:transform .45s cubic-bezier(.2,.9,.3,1);box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:pointer}
#notif.on{transform:translateY(0)}
#dev{position:absolute;bottom:70px;left:10px;right:10px;background:rgba(8,18,30,.97);border:1px solid #22384f;border-radius:12px;padding:10px;z-index:50;display:none;flex-wrap:wrap;gap:6px}
#dev.on{display:flex}
.devb{background:rgba(28,58,90,.4);border:1px solid #2b4a68;color:#8fb8dc;font-size:10px;letter-spacing:.5px;padding:6px 9px;border-radius:7px;cursor:pointer}
#devtog{position:absolute;bottom:72px;right:10px;z-index:51;width:30px;height:30px;border-radius:50%;background:rgba(28,58,90,.65);border:1px solid #2b4a68;color:#7fb4e6;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
a{color:inherit}