:root{ --bg:#111; --panel:#181818; --panel2:#181818ee; --button:#292929; --button-hover:#3a3a3a; --border:#333; --radius:12px; --toolbar-height:56px; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px) } *{margin:0;padding:0;box-sizing:border-box} html,body{ width:100%; height:100%; overflow:hidden; background:var(--bg); color:#fff; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif } #browserBar{ position:absolute; top:0; left:0; right:0; height:calc(var(--toolbar-height) + var(--safe-top)); padding:calc(8px + var(--safe-top)) 12px 8px; display:flex; align-items:center; gap:8px; background:var(--panel); border-bottom:1px solid var(--border); z-index:100 } .browser-btn{ width:40px; height:40px; border:0; border-radius:10px; background:var(--button); color:#fff; cursor:pointer; font-size:18px; flex-shrink:0 } .browser-btn:hover{background:var(--button-hover)} #urlBox{ flex:1; min-width:0; height:40px; display:flex; align-items:center; background:#222; border:1px solid #444; border-radius:var(--radius); padding:0 8px } #goBtn{ width:32px; height:32px; border:0; background:none; color:#fff; cursor:pointer; font-size:17px } #urlInput{ flex:1; min-width:0; height:100%; background:none; border:0; outline:0; color:#fff; padding:0 8px; font-size:16px } #main{ position:absolute; top:calc(var(--toolbar-height) + var(--safe-top)); left:0; right:0; bottom:0; overflow:hidden; background:var(--bg) } .home{ position:absolute; inset:0; width:100%; height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:48px 28px 80px } .home section{ max-width:900px; margin:0 auto 42px } .home h1{ font-size:42px; font-weight:700; margin-bottom:20px } .home h2{ font-size:22px; font-weight:600; color:#eee; margin-bottom:14px } .home p{ color:#c8c8c8; font-size:16px; line-height:1.9; margin-bottom:14px } .home code{ display:inline-block; padding:5px 9px; background:#222; border-radius:8px; color:#fff; font-family:monospace } .home footer{ max-width:900px; margin:60px auto 0; text-align:center; color:#777; font-size:14px } #frameContainer{ position:absolute; inset:0; display:none; overflow:hidden; background:#111; z-index:10 } .browser-frame{ width:100%; height:100%; display:block; border:0; background:#fff } #settingsPanel{ position:fixed; top:calc(var(--toolbar-height) + var(--safe-top) + 12px); left:12px; width:360px; padding:22px; display:none; z-index:1000; background:var(--panel2); border:1px solid #444; border-radius:16px; backdrop-filter:blur(15px) } .settings-row{ display:grid; grid-template-columns:1fr 1fr 42px; gap:10px; align-items:end; margin-bottom:18px } .settings-item{min-width:0} #settingsPanel label{ display:block; margin-bottom:8px; color:#aaa; font-size:14px } #settingsPanel select, #settingsPanel input{ width:100%; height:42px; padding:0 12px; background:#111; color:#fff; border:1px solid #444; border-radius:8px; outline:0; font-size:16px } #refreshServerBtn{ width:42px; height:42px; border:1px solid #444; border-radius:8px; background:#222; color:#fff; cursor:pointer; font-size:22px } .search-box{margin-top:4px} .settings-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px } .settings-actions button{ height:42px; border:0; border-radius:10px; background:var(--button); color:#fff; cursor:pointer; font-size:16px; font-weight:600 } @media(max-width:768px){ :root{--toolbar-height:52px} #browserBar{ padding-left:8px; padding-right:8px; gap:6px } .browser-btn{ width:38px; height:38px } .home{ padding:32px 18px 60px } .home h1{font-size:34px} .home h2{font-size:20px} .home p{font-size:15px} #settingsPanel{ top:auto; left:0; right:0; bottom:0; width:100%; border-radius:18px 18px 0 0; padding:22px 18px calc(22px + var(--safe-bottom)) } } @media(max-width:380px){ .browser-btn{ width:34px; height:34px } #browserBar{ gap:4px; padding-left:6px; padding-right:6px } }