:root{color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",sans-serif;--ink:#eef3fa;--muted:#9cabbc;--line:#303d4c;--base:#101722;--panel:#17212e;--panel2:#1c2837;--focus:#a6c4ff;--accent:#bad1fd;--page:#f4f7fb}
*{box-sizing:border-box}
html,body{height:100%;width:100%;margin:0}
body{overflow:hidden;background:var(--base);color:var(--ink)}
button,input,select{font:inherit}
button{border:0;cursor:pointer;color:var(--ink);transition:background .15s,opacity .15s}
input,select{border:1px solid #465365;border-radius:10px;background:#131d29;color:var(--ink);outline:none}
input::placeholder{color:#7d8fa4}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button:disabled{opacity:.35;cursor:not-allowed}
[hidden]{display:none!important}
.login-screen{display:grid;place-items:center;min-height:100dvh;padding:24px;background:#0e1520}
.login-card{width:min(435px,100%);padding:38px 38px 29px;background:#192432;border:1px solid #344354;border-radius:20px;box-shadow:0 14px 50px #050b1660}
.login-brand{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:720;color:#c9d6e8;letter-spacing:.02em}
.logo{display:grid;place-items:center;background:#bcd2ff;border-radius:10px;width:38px;height:38px}
.logo span{width:15px;height:15px;border:4px solid #273f64;border-radius:50%}
.logo-small{width:27px;height:27px;border-radius:7px}
.logo-small span{width:11px;height:11px;border-width:3px}
.login-card h1{font-size:32px;line-height:1.25;letter-spacing:-.047em;margin:31px 0 10px;font-weight:750}
.login-card p{color:#adbaca;font-size:13px;line-height:1.7;margin:0 0 30px}
.login-card form{display:grid;gap:10px}
.login-card form label{font-size:12px;font-weight:660;color:#d2deeb}
.login-card input{height:49px;padding:0 15px;font-size:14px}
.login-card button{margin-top:5px;display:flex;align-items:center;justify-content:space-between;border-radius:10px;padding:13px 15px;background:#bbd2ff;color:#10243d;font-weight:750}
.login-card button:hover{background:#d7e6ff}
.login-card small{display:block;margin-top:23px;color:#8294a9;font-size:11px}
.error{min-height:16px;color:#ffc0b8;font-size:12px}
.app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.tab-bar{height:52px;min-height:52px;background:#111a25;border-bottom:1px solid #2b3746;display:flex;align-items:center;gap:9px;padding:6px 12px}
.brand{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:12px;font-weight:720;color:#dce6f4;margin-right:7px}
.tabs{min-width:0;display:flex;align-items:center;gap:5px;flex:1;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#455467 transparent}
.tab{display:flex;align-items:center;gap:5px;flex:0 0 auto;max-width:180px;width:160px;height:35px;padding:2px 5px 2px 11px;border:1px solid transparent;border-radius:9px;background:#192432}
.tab.active{background:#283a50;border-color:#485a72}
.tab-label{min-width:0;flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:12px;padding:7px 2px;border:0;background:transparent;color:#b9cadb}
.tab.active .tab-label{color:#fff}
.tab-label:hover{background:transparent}
.tab-close{background:transparent;color:#91a5ba;font-size:18px;width:25px;height:27px;line-height:1;border-radius:7px}
.tab-close:hover{background:#415168;color:#fff}
.icon-button{flex:0 0 auto;width:35px;height:35px;background:transparent;border-radius:9px;font-size:22px;display:grid;place-items:center;padding:0}
.icon-button:hover{background:#314055}
.logout{padding:8px 10px;font-size:12px;background:transparent;border-radius:8px;color:#aabbd0}
.logout:hover{background:#2b394d;color:#fff}
.nav-bar{min-height:55px;height:55px;display:flex;align-items:center;gap:9px;padding:7px 12px;background:#17212e;border-bottom:1px solid #354355}
.nav-actions{display:flex;align-items:center;gap:2px}
.nav-actions .icon-button{font-size:22px}
.address-form{min-width:0;flex:1;display:flex;align-items:center;background:#111a26;border:1px solid #455569;border-radius:11px;height:40px}
.address-form:focus-within{border-color:#8aaeed;box-shadow:0 0 0 2px #779eff24}
.address-icon{font-size:18px;color:#8099b7;padding-left:14px}
.address-form input{border:0;background:transparent;min-width:0;flex:1;height:100%;padding:0 12px;font-size:13px}
.address-form input:focus{outline:none}
.go-button{background:#345072;border-radius:8px;font-size:12px;margin-right:4px;height:31px;padding:0 13px}
.go-button:hover{background:#47658c}
.star-button{font-size:25px;color:#b6c7db}
.body{flex:1;min-height:0;position:relative;display:flex}
.viewer{min-width:0;min-height:0;flex:1;position:relative;background:#f5f7fa;overflow:hidden}
.proxy-frame{position:absolute;inset:0;width:100%;height:100%;border:none;background:#fff}
.home{height:100%;width:100%;display:grid;place-items:center;overflow-y:auto;background:#f6f8fc;color:#202e43;padding:26px}
.home-inner{max-width:540px;width:100%;text-align:center;padding:24px 0}
.home-mark{font-size:29px;color:#507bb2;display:block;margin-bottom:24px}
.home h2{font-size:30px;letter-spacing:-.048em;margin:0 0 11px;font-weight:760}
.home p{font-size:13px;color:#667790;line-height:1.6;margin:0 0 29px}
.home-form{display:flex;gap:8px;background:white;padding:7px;border:1px solid #cad3df;border-radius:14px;box-shadow:0 10px 36px #17294010}
.home-form:focus-within{border-color:#6991c4;box-shadow:0 0 0 3px #7497cf20}
.home-form input{background:transparent;color:#26384d;border:0;padding:10px;flex:1;min-width:0;outline:none;font-size:14px}
.home-form button{background:#284d7c;border-radius:9px;padding:11px 17px;font-size:13px;font-weight:690;white-space:nowrap}
.home-form button:hover{background:#1b385e}
.home-quick{margin:22px auto;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;color:#8e9bab;font-size:12px}
.home-quick button{border-radius:8px;border:1px solid #d5dfe9;background:#fff;color:#446184;padding:8px 11px;font-size:12px}
.home-quick button:hover{background:#eaf0f7}
.recent{margin-top:36px;text-align:left;border-top:1px solid #dce4ed;padding-top:20px}
.recent h3{font-size:13px;margin:0 0 10px;color:#52657b}
.recent button{display:block;width:100%;text-align:left;background:transparent;color:#2b5382;padding:9px;border-radius:8px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent button:hover{background:#e5edf7}
.loading{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:10px;padding:9px 15px;border:1px solid #bdcbd9;border-radius:999px;background:#fff;color:#425d7a;box-shadow:0 6px 21px #152b441a;font-size:12px;white-space:nowrap}
.loading-spinner{height:14px;width:14px;border-radius:50%;border:2px solid #d1dce9;border-top-color:#5178a9;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.library{flex:0 0 375px;max-width:100%;background:#182434;border-left:1px solid #344354;display:flex;flex-direction:column;box-shadow:-12px 0 40px #03081020;min-height:0;z-index:10}
.library-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 19px 13px}
.library-heading h2{margin:0;font-size:20px;letter-spacing:-.04em}
.library-tabs{margin:3px 16px 15px;display:flex;padding:4px;gap:4px;background:#0f1927;border-radius:10px}
.library-tabs button{background:transparent;flex:1;padding:10px 8px;border-radius:8px;font-size:12px}
.library-tabs button.selected{background:#34485f;font-weight:650}
.library-tools{padding:0 16px 14px;display:flex;gap:8px}
.library-tools input{flex:1;min-width:0;padding:10px;font-size:12px}
.library-tools select{max-width:98px;font-size:12px;padding:10px 6px}
.library-entries{flex:1;min-height:0;overflow:auto;padding:0 17px}
.entry{padding:12px 2px;display:flex;gap:8px;align-items:center;border-bottom:1px solid #2b3948}
.entry-text{min-width:0;flex:1;cursor:pointer;text-align:left;background:transparent;border:0;padding:3px;color:#e1ecf8}
.entry-text:hover{color:#bdd6ff}
.entry-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:640}
.entry-url{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#91a5ba;margin-top:5px;font-size:11px}
.entry-remove{color:#b6c9df;background:transparent;border:1px solid #455367;border-radius:7px;padding:6px 7px;font-size:11px}
.entry-remove:hover{background:#3d4f64}
.empty{text-align:center;color:#95a9bd;font-size:13px;line-height:1.7;padding:45px 15px}
.library-footer{padding:13px 17px;border-top:1px solid #344254;display:flex;align-items:center;justify-content:space-between;gap:10px}
.library-footer a{color:#b7cffa;font-size:12px;text-decoration:none}
.library-footer a:hover{text-decoration:underline}
.danger{background:transparent;border:1px solid #6b424a;border-radius:8px;color:#ffb1ba;padding:7px 11px;font-size:12px}
.danger:hover{background:#522a33}
.statusbar{height:27px;min-height:27px;padding:5px 13px;background:#101824;border-top:1px solid #273344;display:flex;align-items:center;gap:9px;color:#9eafc2;font-size:11px}
.indicator{height:7px;width:7px;border-radius:50%;background:#a4b1c1;flex:0 0 auto}
.indicator.good{background:#62c4a3}
.indicator.warn{background:#d5a673}
#status{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.status-caption{margin-left:auto;color:#778da7;white-space:nowrap}
.toast{position:absolute;right:22px;bottom:42px;background:#192635;color:#dce8f7;border:1px solid #435870;border-radius:10px;box-shadow:0 10px 35px #050d1880;padding:12px 16px;font-size:12px;max-width:min(400px,90vw);z-index:30}
@media(max-width:900px){.brand-title{display:none}.brand{margin-right:0}.tab{width:125px}.library{position:absolute;right:0;top:0;bottom:0;width:375px}.body:has(.library:not([hidden])):before{content:"";position:absolute;inset:0;background:#06101a59;z-index:9}}
@media(max-width:540px){.tab-bar{height:47px;min-height:47px;padding:4px 6px;gap:4px}.logo-small{width:25px;height:25px}.tab{width:108px;height:33px;padding-left:8px}.tab-label{font-size:11px}.tab-bar .icon-button{width:31px;height:33px;font-size:19px}.logout{padding:6px;font-size:11px}.nav-bar{min-height:51px;height:51px;gap:3px;padding:5px 5px}.nav-actions{gap:0}.nav-actions .icon-button{width:31px;height:34px;font-size:20px}.address-form{height:36px}.address-form input{padding:0 9px;font-size:12px}.address-icon{display:none}.go-button{display:none}.star-button{width:32px;font-size:23px}.home h2{font-size:25px}.home-form{padding:5px}.home-form button{padding:10px}.library{width:100%;max-width:none}.status-caption{display:none}.statusbar{padding:5px 9px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Workspace: page + optional side panel, with a keyboard that never covers content. */
.body{display:flex;flex-direction:column}
.workspace{display:flex;flex:1;min-height:0;position:relative;overflow:hidden}
.workspace>.viewer{flex:1}
.keyboard-toggle svg,.extensions-toggle svg{pointer-events:none}
.keyboard-toggle.active,.extensions-toggle.active{background:#34485f;color:#d9e9ff}
.keyboard-panel{flex:0 0 auto;min-height:0;background:#172434;color:#e9f2ff;border-top:1px solid #3b4c60;padding:8px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));box-shadow:0 -7px 24px #07111f29}
.keyboard-heading{height:32px;display:flex;align-items:center;gap:14px;max-width:950px;margin:0 auto 4px}
.keyboard-left{display:flex;align-items:center;gap:11px;white-space:nowrap}
.keyboard-caption{font-size:12px;font-weight:730}
.keyboard-mode{color:#9fb5cb;font-size:11px}
.keyboard-hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#acbbcb;font-size:11px;text-align:right}
.keyboard-close{width:29px;height:29px;background:transparent;border-radius:7px;color:#c5d3e5;font-size:24px;line-height:1}
.keyboard-close:hover{background:#324458}
.keyboard-rows{display:flex;flex-direction:column;gap:4px;max-width:950px;margin:0 auto}
.keyboard-row{display:flex;justify-content:center;gap:4px;min-width:0}
.keyboard-row>.key{flex:1 1 0;min-width:0;max-width:77px;height:37px;border:1px solid #4c5a6b;border-bottom-color:#5a6c80;border-radius:6px;background:#28384c;color:#f4f8ff;font-size:13px;font-weight:570;line-height:1;box-shadow:0 1px 0 #0b1420}
.keyboard-row>.key:hover{background:#405775}
.keyboard-row>.key:active{background:#6a83a4;transform:translateY(1px)}
.keyboard-row>.key.function-key{flex-grow:1.23;background:#38516d;font-size:11px}
.keyboard-row>.key.wide{flex-grow:4;max-width:270px;font-size:11px}
.keyboard-row>.key.key-selected{background:#bfd4f8!important;border-color:#d1e4ff;color:#1b3452}
.keyboard-row>.key[data-key="Lang"]{min-width:45px}
.keyboard-row>.key[data-key="Close"]{font-size:12px}
.extensions-panel{flex:0 0 389px;max-width:100%;background:#182434;border-left:1px solid #344354;display:flex;flex-direction:column;min-height:0;z-index:10;box-shadow:-12px 0 34px #07111e36}
.extensions-heading{display:flex;align-items:center;justify-content:space-between;padding:22px 20px 8px}
.extensions-eyebrow{display:block;color:#8fa8c4;font-size:10px;font-weight:680;margin:0 0 5px}
.extensions-heading h2{margin:0;font-size:22px;letter-spacing:-.045em}
.extensions-intro{margin:6px 20px 17px;color:#afbdd0;line-height:1.6;font-size:12px}
.extensions-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 20px;border-top:1px solid #304051;border-bottom:1px solid #304051;font-size:11px;color:#afc1d7}
.installed-filter{display:flex;align-items:center;gap:6px;cursor:pointer}
.installed-filter input{accent-color:#a8c4ef}
.extensions-list{display:flex;flex-direction:column;gap:10px;padding:15px 14px;overflow-y:auto;min-height:0}
.extension-card{padding:13px 13px 12px;border:1px solid #39495c;border-radius:11px;background:#1c2b3c}
.extension-card-header{display:flex;gap:12px;align-items:flex-start}
.extension-symbol{height:38px;width:38px;display:grid;place-items:center;background:#354b64;border-radius:9px;font-size:23px;flex:0 0 38px;color:#d3e5ff}
.extension-card-text{flex:1;min-width:0}
.extension-card-name{font-size:13px;font-weight:720;color:#e6effb;margin:0 0 5px}
.extension-card-text p{font-size:11px;color:#afc2d5;line-height:1.5;margin:0}
.extension-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}
.extension-tag{margin-right:auto;font-size:10px;color:#a9bfd7}
.extension-install,.extension-remove{padding:7px 13px;border-radius:7px;font-size:11px;font-weight:680}
.extension-install{background:#c1d7fb;color:#213953}
.extension-install:hover{background:#e0edff}
.extension-install.installed{background:#31445c;color:#deeafd;border:1px solid #4c607a}
.extension-install.installed:hover{background:#405978}
.extension-remove{background:transparent;border:1px solid #516276;color:#b4c5d8}
.extension-remove:hover{background:#34465b}
.extensions-notice{font-size:11px;color:#a5b6ca;line-height:1.5;margin:0;padding:14px 20px 20px;border-top:1px solid #334357}
.workspace:has(.library:not([hidden])):before,.workspace:has(.extensions-panel:not([hidden])):before{content:none}
@media(max-width:900px){
 .workspace:has(.library:not([hidden])):before,.workspace:has(.extensions-panel:not([hidden])):before{content:"";background:#05101c80;position:absolute;inset:0;z-index:9}
 .extensions-panel{position:absolute;right:0;top:0;bottom:0;width:min(389px,100%);max-width:none}
 .body:has(.library:not([hidden])):before{content:none!important}
}
@media(max-width:540px){
 .nav-bar{gap:2px;padding-left:4px;padding-right:4px}
 .nav-actions .icon-button{width:29px}
 .nav-actions{gap:0}
 .address-form{min-width:115px}
 .keyboard-toggle,.extensions-toggle,.star-button{width:30px!important;height:34px}
 .keyboard-panel{padding:7px 4px calc(8px + env(safe-area-inset-bottom))}
 .keyboard-heading{height:27px;gap:8px;padding:0 7px}
 .keyboard-caption{font-size:11px}
 .keyboard-mode{font-size:10px}
 .keyboard-hint{font-size:10px}
 .keyboard-rows{gap:3px}
 .keyboard-row{gap:3px}
 .keyboard-row>.key{height:36px;min-width:0;max-width:none;font-size:12px;border-radius:5px}
 .keyboard-row>.key.function-key{font-size:10px;flex-grow:1.35}
 .keyboard-row>.key.wide{flex-grow:3.5;max-width:none}
 .keyboard-row>.key[data-key="Lang"]{min-width:42px}
 .extensions-heading{padding:18px 19px 7px}
}
@media(max-width:370px){
 .nav-actions .icon-button{width:26px}
 .nav-bar{gap:1px}
 .tab-bar{padding:4px}
 .keyboard-row>.key{height:33px}
 .keyboard-row{gap:2px}
 .keyboard-hint{display:none}
 .keyboard-row>.key[data-key="Lang"]{min-width:38px}
}

/* Private, history-free tab: visually distinct without overclaiming cookie isolation. */
.private-tab-button{color:#c4b7f2;flex:0 0 auto}
.private-tab-button:hover{background:#453950;color:#eadfff}
.tab.private{background:#28243a;border-color:#493f62}
.tab.private.active{background:#413456;border-color:#8874b1}
.tab.private .tab-label{color:#e6dafa}
.private-status{margin-left:auto;color:#d4c1fb;font-weight:650;font-size:11px;white-space:nowrap}
.private-status:not([hidden]) + .status-caption{margin-left:0}
.private-mode .home{background:#171724;color:#f0e9ff}
.private-mode .home-mark{color:#bfa8ed}
.private-mode .home p{color:#beb6d1}
.private-mode .home-form{background:#252237;border-color:#5c507b}
.private-mode .home-form input{color:#f3eeff}
.private-mode .home-form input::placeholder{color:#b2a7c7}
.private-mode .home-form button{background:#68538b;color:#fff}
.private-mode .home-form button:hover{background:#826bad}
.private-mode .home-quick{color:#b8acd0}
.private-mode .home-quick button{background:#312b43;color:#e8dcfa;border-color:#605275}
.private-mode .home-quick button:hover{background:#483c63}
.private-notice{display:block!important;text-align:left;border:1px solid #605479!important;border-radius:11px;background:#2a253b;padding:13px 15px;margin:0 0 19px!important;line-height:1.65!important;font-size:12px!important;color:#d9cdec!important}
.private-notice strong{color:#f3e9ff}
.private-mode .recent{display:none}
@media(max-width:540px){
 .private-tab-button{width:30px;height:33px}
 .tab.private{max-width:108px}
 .private-status{font-size:10px}
 .private-notice{font-size:11px!important;padding:11px}
}

/* Transport fallback and recoverable navigation errors. */
.transport-settings{padding:13px 18px 16px;border-block:1px solid #354456;background:#142131}
.transport-settings label{display:block;margin:0 0 7px;font-size:12px;font-weight:700;color:#dce9f8}
.transport-settings select{width:100%;height:39px;padding:0 12px;border:1px solid #50647c;background:#23334a;color:#ecf4ff;border-radius:9px;font-size:13px}
.transport-settings select:disabled{opacity:.55}
.transport-settings p{color:#9caec4;font-size:11px;line-height:1.55;margin:9px 0 0}
.page-error{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:#f6f8fb;padding:22px;overflow:auto}
.page-error-inner{width:min(440px,100%);padding:27px 28px;border-radius:18px;border:1px solid #d6dee9;background:#fff;box-shadow:0 12px 34px #253a591a;color:#293b53;text-align:center}
.page-error-icon{display:grid;place-items:center;border-radius:50%;width:40px;height:40px;margin:auto;background:#e8effa;color:#416492;font-size:22px;font-weight:750}
.page-error-inner h3{font-size:19px;letter-spacing:-.04em;margin:15px 0 8px}
.page-error-inner p{font-size:12px;color:#61728b;line-height:1.7;margin:0 0 20px}
.page-error-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.page-error-actions button{padding:10px 13px;border-radius:9px;background:#ebf0f7;color:#344d6c;font-size:12px;font-weight:650}
.page-error-actions .page-error-primary{background:#284f7f;color:#fff}
.page-error-actions button:hover{background:#d6e2f0}
.page-error-actions .page-error-primary:hover{background:#3c6291}
.page-error-dismiss{margin-top:14px;font-size:12px;color:#7b8ba0;background:transparent;text-decoration:underline;padding:8px}
.private-mode .page-error{background:#1a1929}
.private-mode .page-error-inner{background:#292537;border-color:#544b68;color:#f2ebff}
.private-mode .page-error-inner p{color:#c8bbd9}
.private-mode .page-error-icon{background:#493a5f;color:#e6d6ff}
@media(max-width:540px){
 .page-error{padding:14px}
 .page-error-inner{padding:23px 17px}
 .page-error-actions button{flex:1 1 44%}
 .transport-settings{padding-inline:14px}
}