:root { color-scheme:dark; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; padding:20px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; background:linear-gradient(135deg,#0a2e0a,#1a5d1a,#0a2e0a,#1a5d1a); background-size:400% 400%; animation:gradientBG 20s ease infinite; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; color:white; text-align:center; position:relative; }
@keyframes gradientBG { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.shell { display:flex; flex-direction:column; width:100%; min-height:calc(100vh - 40px); align-items:center; justify-content:center; }
main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:0; }
.home { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:75px 0 45px; }
.logo-container { max-width:500px; width:100%; margin-bottom:20px; display:flex; justify-content:center; align-items:center; }
.brand-logo { display:block; max-width:100%; width:auto; height:auto; max-height:220px; object-fit:contain; filter:drop-shadow(0 0 15px rgba(144,228,193,.6)) drop-shadow(0 0 30px rgba(0,255,157,.3)); }
.logo-fallback { font-size:clamp(36px,6vw,62px); font-weight:600; color:#90e4c1; text-shadow:0 0 12px #46a963; }
h1 { font-size:clamp(25px,4.2vw,43px); line-height:1.3; font-weight:500; text-shadow:0 0 5px rgba(255,255,255,.5); margin:14px 0 26px; }
button,select { font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; }
button { background:rgba(255,255,255,.15); border-radius:16px; border:1px solid rgba(255,255,255,.4); color:#e0f7e0; cursor:pointer; font-size:18px; font-weight:500; margin:10px 0; padding:14px 40px; text-shadow:0 1px 2px rgba(0,0,0,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 32px rgba(0,255,45,.15); backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px); transition:transform .3s ease,background .3s ease; min-width:180px; user-select:none; }
button:hover { background:rgba(255,255,255,.1); transform:scale(1.05); }
button:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.top-button-container { position:absolute; top:15px; left:15px; z-index:15; display:flex; gap:10px; }
.utility-controls-container { position:absolute; top:15px; right:15px; z-index:15; display:flex; align-items:center; gap:10px; }
.top-button-container button,.utility-controls-container button,.viewport-controls button,.viewport-navbar>button,.browser-form button,.settings-head button { font-size:14px; padding:8px 20px; margin:0; min-width:auto; border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 15px rgba(0,255,45,.1); }
#status { font-size:12px; color:#d5ffe2; text-shadow:0 0 5px #000; }
.search-container { width:100%; max-width:700px; margin-bottom:15px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.search-bar { width:100%; padding:14px 22px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); border-radius:16px; color:white; font-size:1.1rem; box-sizing:border-box; backdrop-filter:saturate(180%) blur(10px); font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; transition:all .3s ease; }
.search-bar::placeholder { color:rgba(255,255,255,.7); }
.search-bar:focus { outline:none; border-color:rgba(0,255,45,.6); background:rgba(255,255,255,.15); box-shadow:0 0 15px rgba(0,255,102,.3); }
.setup-error { max-width:700px; font-size:13px; color:#ffe6ce; padding:12px; background:#4d210d88; border:1px solid #ffbd76; border-radius:8px; overflow-wrap:anywhere; }
.browser { width:100%; height:calc(100vh - 100px); display:flex; flex-direction:column; padding-top:40px; }
.viewport-navbar { background:#111; padding:12px 14px; display:flex; gap:10px; justify-content:space-between; align-items:center; border-bottom:1px solid #222; }
.viewport-controls { display:flex; gap:6px; }
.browser-form { display:flex; align-items:center; flex:1; gap:10px; min-width:0; }
.browser-form input { width:100%; min-width:0; border:1px solid rgba(255,255,255,.3); border-radius:12px; color:#fff; padding:10px 13px; background:#ffffff1a; font-size:14px; }
.iframe-sandbox-container { flex:1; min-height:0; background:#fff; }
.iframe-sandbox-container iframe { width:100%; height:100%; border:0; display:block; }
.settings-panel { position:fixed; z-index:20; right:15px; top:65px; max-height:calc(100vh - 85px); overflow:auto; text-align:left; width:min(385px,calc(100vw - 30px)); background:#15291af5; border:1px solid #9ad1a5; border-radius:16px; padding:20px; box-shadow:0 8px 30px #0008; backdrop-filter:blur(10px); }
.settings-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.settings-head h2 { margin:0; font-size:20px; font-weight:500; }
.field { display:flex; flex-direction:column; gap:8px; margin:14px 0; font-size:14px; }
.field select { padding:10px; background:#193f22; color:white; border:1px solid #90c19f; border-radius:9px; }
.toggle { display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid #ffffff24; padding:16px 0; font-size:14px; }
.toggle small { display:block; color:#c1dac7; font-size:11px; margin-top:5px; }
.toggle input { accent-color:#90e4c1; width:18px; height:18px; }
.settings-note { font-size:12px; line-height:1.5; color:#b7d1bb; }
.loader { position:fixed; z-index:19; inset:0; display:flex; justify-content:center; align-items:center; flex-direction:column; background:#091d0bf5; padding:25px; }
.loading-bird { font-size:65px; color:#90e4c1; animation:bob 1.4s ease-in-out infinite alternate; }
@keyframes bob { to { transform:translateY(-15px); } }
.loader p { font-size:clamp(17px,3vw,24px); font-weight:400; }
.loader small { color:#b4d6bf; }
.loader button { margin-top:24px; }
footer { color:rgba(255,255,255,.8); padding:16px; font-size:13px; text-shadow:0 0 5px rgba(255,255,255,.4); }
.hidden { display:none!important; }
@media(max-width:690px){ .browser { height:calc(100vh - 80px); } .viewport-navbar { flex-wrap:wrap; } .browser-form { order:2; flex-basis:100%; } .home { padding:80px 0 25px; } #status { display:none; } .brand-logo { max-height:160px; } }
@media(prefers-reduced-motion:reduce){body,.loading-bird{animation:none}button{transition:none}}
.tabs-header {display:flex;align-items:center;gap:6px;background:#102415;padding:7px 10px 0;min-height:43px;}
.tab-strip {display:flex;gap:5px;min-width:0;overflow-x:auto;flex:1;scrollbar-width:thin;}
.tab {display:flex;align-items:center;flex:0 1 180px;min-width:80px;max-width:180px;background:#193e21;border:1px solid #4e7559;border-bottom:0;border-radius:10px 10px 0 0;}
.tab.active {background:#295a32;border-color:#90e4c1;}
.tab .tab-pick {min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;padding:8px 10px;background:none;border:0;box-shadow:none;font-size:12px;margin:0;border-radius:0;}
.tab .tab-close {min-width:0;padding:4px 8px;margin:0;font-size:17px;background:none;border:0;box-shadow:none;}
.tabs-header #newTab {min-width:0;margin:0;padding:5px 12px;font-size:19px;border-radius:9px;}
.bookmark-bar {display:flex;align-items:center;gap:12px;min-height:39px;padding:4px 12px;background:#152e1a;border-bottom:1px solid #2e5e3c;text-align:left;}
.bookmark-heading {font-size:11px;color:#b5d7bd;flex-shrink:0;}
.bookmark-items {display:flex;gap:6px;overflow-x:auto;min-width:0;scrollbar-width:thin;}
.bookmark-items .bookmark-link {min-width:0;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;padding:5px 9px;margin:0;border-radius:7px;background:#ffffff16;box-shadow:none;flex-shrink:0;}
.viewport-navbar #bookmarkToggle {min-width:0;padding:8px 12px;font-size:21px;}
.browser:fullscreen {width:100vw;height:100vh;padding:0;background:#102415;}
.loading-bird {width:96px;height:96px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 10px #90e4c155);}
.loading-bird img {display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto;}
@media(max-width:690px){.tab{flex-basis:125px}.bookmark-heading{display:none}.browser{padding-top:42px}.tabs-header{min-height:38px}.viewport-navbar{padding:7px}}

.tab-strip{overflow-x:auto;scrollbar-width:thin;gap:2px}
.tab{flex:1 1 170px;min-width:42px;max-width:190px}
.tab .tab-pick{padding:8px 5px}
.tab .tab-close{padding:4px 5px}

.iframe-sandbox-container {position:relative;}
.empty-tab {position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a2e0a,#1a5d1a,#0a2e0a);padding:32px 24px;}
.empty-tab-content {width:min(650px,100%);margin:auto;}
.empty-tab-content h2 {font-size:clamp(27px,4vw,43px);font-weight:500;text-shadow:0 0 12px #0a2e0a;}
.empty-tab-form {display:flex;align-items:center;gap:12px;width:100%;}
.empty-tab-form input {min-width:0;flex:1;padding:14px 18px;border-radius:14px;border:1px solid #90e4c1;background:#ffffff1a;color:white;font:inherit;}
.empty-tab-form input::placeholder {color:#d0e8d3;}
.empty-tab-form button {min-width:0;margin:0;padding:13px 24px;font-size:16px;}
@media(max-width:600px){.empty-tab-form{flex-direction:column}.empty-tab-form input,.empty-tab-form button{width:100%}}

.browser {overflow:hidden;border:1px solid #366f43;border-radius:12px;padding-top:0;background:#102415;contain:layout style;}
.browser:fullscreen {border:0;border-radius:0;}
.tabs-header {padding:6px 7px 0;overflow:hidden;flex-shrink:0;border-radius:11px 11px 0 0;}
.tab-strip {overflow-x:auto;overflow-y:hidden;min-height:34px;align-items:stretch;}
.tab {position:relative;overflow:hidden;min-width:48px;flex:1 1 168px;max-width:190px;border-radius:8px 8px 0 0;transition:background-color .14s ease,border-color .14s ease;}
.tab .tab-pick,.tab .tab-close {transform:none!important;transition:background-color .14s ease;box-shadow:none!important;text-shadow:none;}
.tab .tab-pick:hover,.tab .tab-close:hover {background:#ffffff16;}
.tab .tab-close {flex-shrink:0;}
.tabs-header #newTab {flex-shrink:0;transform:none;transition:background-color .14s ease;}
.viewport-navbar {min-width:0;flex-shrink:0;}
.iframe-sandbox-container {isolation:isolate;}
.iframe-sandbox-container iframe {background:white;}
#openTabs {font-size:14px;padding:10px 22px;min-width:140px;}
@media(max-width:800px){body{animation:none;background-size:cover;padding:8px}.shell{min-height:calc(100vh - 16px)}.browser{height:calc(100dvh - 75px)}button,.search-bar,.settings-panel{backdrop-filter:none;-webkit-backdrop-filter:none}button:hover{transform:none}.brand-logo{filter:none}.tab{min-width:48px}.viewport-navbar{gap:5px;padding:7px}.viewport-controls{gap:3px}.viewport-navbar>button,.viewport-controls button,.browser-form button{padding:7px 9px}.browser-form{gap:5px}}
@media(prefers-reduced-motion:reduce){.tab,.tab .tab-pick,.tab .tab-close{transition:none}}

.diagnostics-panel{position:fixed;right:12px;top:70px;z-index:1000;width:min(520px,calc(100vw - 24px));max-height:75vh;overflow:auto;padding:16px;border:1px solid #477f55;border-radius:12px;background:#123b26;color:#f2fff4;box-shadow:0 8px 25px #0006}.diagnostics-panel.hidden{display:none}.diagnostics-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 monospace;max-height:45vh;overflow:auto;background:#082716;padding:12px;border-radius:6px}.diagnostics-panel button{margin:5px}

.tab-site-icon{display:inline-flex;flex:0 0 15px;width:15px;height:15px;align-items:center;justify-content:center;color:#d5f9d9;font-size:14px}.tab-site-icon img{width:15px;height:15px;object-fit:contain}.tab .tab-pick{display:flex;gap:6px;align-items:center}.tab-caption{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

:root{--color-a:#0a2e0a;--color-b:#1a5d1a;--accent:#90e4c1;--rounding:12px;--home-image:none;--tab-image:none;--wallpaper-dim:.3;--app-font:"Segoe UI",Tahoma,sans-serif}
body{font-family:var(--app-font);background-image:linear-gradient(135deg,var(--color-a),var(--color-b),var(--color-a),var(--color-b));}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(0,0,0,var(--wallpaper-dim)),rgba(0,0,0,var(--wallpaper-dim))),var(--home-image);background-position:center;background-size:cover;background-repeat:no-repeat}
button,select,input{font-family:var(--app-font)}
button,.search-bar,.browser,.settings-panel,.empty-tab-form input,.viewport-navbar input{border-radius:var(--rounding)}
.logo-fallback,.loading-bird{color:var(--accent)}
.tab.active{border-color:var(--accent)}
.empty-tab{background-image:linear-gradient(rgba(0,0,0,var(--wallpaper-dim)),rgba(0,0,0,var(--wallpaper-dim))),var(--tab-image),linear-gradient(135deg,var(--color-a),var(--color-b),var(--color-a));background-size:cover;background-position:center}
.empty-tab-form input{border-color:var(--accent)}
.toggle input{accent-color:var(--accent)}
.appearance-options{border-top:1px solid #ffffff33;padding-top:16px;margin-top:12px}
.appearance-options summary{cursor:pointer;font-size:15px;font-weight:600;margin-bottom:12px}
.appearance-options input[type="url"]{background:#0b1d12;color:#fff;border:1px solid #9ad1a5;border-radius:8px;padding:10px;max-width:100%;font-size:12px}
.appearance-options input[type="range"]{accent-color:var(--accent);width:100%}
.color-options{display:flex;justify-content:space-between;gap:12px;margin:12px 0}
.color-options label{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px}
.color-options input{width:58px;height:36px;padding:0;border:0;background:transparent;cursor:pointer}
.reset-appearance{min-width:0;padding:9px 15px;font-size:13px;margin:12px 0}
#embeddedNotice a{color:#fff;text-decoration:underline}
.no-motion body,.no-motion .loading-bird{animation:none!important}
.no-motion button,.no-motion .tab{transition:none!important}

.recovery-help{position:fixed;z-index:9999;right:16px;bottom:70px;width:min(490px,calc(100vw - 32px));max-height:75vh;overflow:auto;background:#13291deF;color:#f1fff4;border:1px solid #8ccf9b;border-radius:12px;box-shadow:0 8px 30px #0008;padding:15px;font:14px/1.5 "Segoe UI",sans-serif}.recovery-help.hidden{display:none}.recovery-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.recovery-head button{font-size:22px;background:transparent;color:inherit;border:0;cursor:pointer}.recovery-help p{margin:10px 0}.recovery-help summary{cursor:pointer;font-weight:600}.recovery-help ol{padding-left:22px}.recovery-actions{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}.recovery-actions button{padding:9px 15px;background:#36824d;color:white;border:1px solid #8ed9a4;border-radius:7px;cursor:pointer}.recovery-actions a{color:#c1ffcf}

.storage-reset{margin-top:15px;padding-top:13px;border-top:1px solid #71997988;display:grid;gap:8px}.storage-reset button{width:100%;background:#633326;color:#fff;border:1px solid #e0a68b}.storage-reset small{font-size:12px;color:#cee2ce;line-height:1.5}.storage-reset p{font-size:12px;margin:0;color:#f2c6b1;overflow-wrap:anywhere}