:root{--bg:#0f1115;--bar:#16191f;--line:#262a33;--fg:#e6e8ec;--mute:#8a909c;--acc:#5b9cff;--ok:#3ecf8e;--busy:#f5b84a;--err:#ff6b6b;--r:8px;
  font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:dark}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--bg);color:var(--fg)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button,input{font:inherit;color:inherit}
svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.logo{font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--acc)}
.logo span{color:var(--fg)}
.logo.small{font-size:17px;padding:0 4px 0 2px;line-height:1}

/* login */
.login-view{min-height:100%;display:grid;place-items:center;padding:24px}
.login-card{width:min(320px,100%);display:grid;gap:12px;text-align:center}
.login-card .logo{margin-bottom:8px}
.login-card input{height:42px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bar);outline:none}
.login-card input:focus{border-color:var(--acc)}
.primary-button{height:42px;border:0;border-radius:var(--r);background:var(--acc);color:#fff;font-weight:600;cursor:pointer}
.primary-button:disabled{opacity:.6}
.form-error{color:var(--err);font-size:13px}

/* workspace */
.workspace{height:100dvh;display:flex;flex-direction:column;position:relative}
.bar{flex:none;display:flex;align-items:center;gap:4px;height:38px;padding:0 6px;padding-top:env(safe-area-inset-top);box-sizing:content-box;background:var(--bar);border-bottom:1px solid var(--line)}
.nav{display:flex}
.ib{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:6px;background:none;color:var(--mute);cursor:pointer;flex:none}
.ib:hover:not(:disabled){background:#ffffff12;color:var(--fg)}
.ib:disabled{opacity:.35;cursor:default}
.address{flex:1;min-width:0;display:flex;align-items:center;height:28px;padding:0 4px 0 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.address:focus-within{border-color:var(--acc)}
.address input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;padding:0 8px;font-size:13px}
.go{width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:4px;background:none;color:var(--mute);cursor:pointer}
.go:hover:not(:disabled){color:var(--acc)}
.go svg{width:14px;height:14px}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.status-dot.busy{background:var(--busy);animation:pulse 1s infinite alternate}
.status-dot.error{background:var(--err)}
@keyframes pulse{to{opacity:.3}}
.status-text{flex:none;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--mute);padding:0 6px}

/* floating panels – they never push the page down */
.pop{position:absolute;z-index:10;top:calc(46px + env(safe-area-inset-top));right:8px;max-width:min(420px,calc(100% - 16px));padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:#1c2027f2;box-shadow:0 8px 24px #0008;font-size:12.5px;color:var(--mute)}
.pop b{color:var(--fg)}
.help p+p{margin-top:6px}
.toast{left:50%;right:auto;transform:translateX(-50%);display:flex;gap:8px;align-items:center;color:var(--fg);border-color:#ff6b6b66}
.toast .ib{width:22px;height:22px}

.viewport{flex:1;min-height:0;position:relative;background:#fff}
.viewport iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.welcome{height:100%;display:grid;place-content:center;justify-items:center;gap:22px;padding:0 16px 12vh;background:var(--bg)}
.welcome .logo{font-size:44px}
.big{display:flex;gap:8px;width:min(640px,calc(100vw - 32px))}
.big input{flex:1;min-width:0;height:52px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:var(--bar);outline:none;font-size:17px}
.big input:focus{border-color:var(--acc)}
.big .primary-button{width:52px;flex:none;border-radius:12px;display:grid;place-items:center}
.big svg{width:20px;height:20px}
/* start screen: the big field is the address bar; the small one appears with the first page */
.workspace:has(#welcome:not([hidden])) .address,.workspace:has(#welcome:not([hidden])) .nav{visibility:hidden}

@media (max-width:600px){
  .hide-sm{display:none}
  .status-text{font-size:10px;max-width:15ch;padding:0 2px}
  #help-button{display:none}
  .bar{gap:2px;padding:0 4px;padding-top:env(safe-area-inset-top)}
  .logo.small{display:none}
  .address input{font-size:16px} /* iOS: no zoom on focus */
}