:root{color-scheme:dark;
  --bg:#05070e; --chrome:#0b1424; --line:rgba(150,185,255,.16);
  --ink:#eef3ff; --dim:rgba(216,231,255,.55); --accent:#8fb8ff}
*{box-sizing:border-box}
/* #boot and #shell set display:flex, which beats the UA stylesheet's
   [hidden]{display:none}. Without this the boot overlay stays painted
   over a fully working page, reading as "stuck on opening transport". */
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:14px/1.5 "Leelawadee UI","Segoe UI",system-ui,sans-serif;overflow:hidden}
#chrome{display:flex;flex-direction:column;background:var(--chrome);border-bottom:1px solid var(--line)}
#tabstrip{display:flex;align-items:flex-end;gap:2px;padding:.4rem .5rem 0;overflow-x:auto;scrollbar-width:thin}
.tab{display:flex;align-items:center;gap:.45rem;min-width:120px;max-width:220px;padding:.5rem .7rem;
  border-radius:10px 10px 0 0;background:rgba(255,255,255,.04);color:var(--dim);cursor:pointer;
  font-size:.78rem;white-space:nowrap;overflow:hidden;flex:0 0 auto;transition:background .15s,color .15s}
.tab:hover{background:rgba(255,255,255,.08)}
.tab.on{background:var(--bg);color:#fff}
.tab img{width:14px;height:14px;flex:0 0 auto;border-radius:3px}
.tab .t{overflow:hidden;text-overflow:ellipsis}
.tab .x{margin-left:auto;opacity:.5;padding:0 .2rem;border-radius:4px}
.tab .x:hover{opacity:1;background:rgba(255,255,255,.12)}
#newtab{flex:0 0 auto;margin-left:.3rem;align-self:center;background:none;border:0;color:var(--dim);
  font-size:1.15rem;cursor:pointer;padding:0 .55rem;border-radius:8px}
#newtab:hover{background:rgba(255,255,255,.08);color:#fff}
#toolbar{display:flex;align-items:center;gap:.4rem;padding:.5rem .6rem}
.nav{background:none;border:0;color:var(--dim);font-size:1rem;cursor:pointer;padding:.3rem .5rem;border-radius:8px}
.nav:hover:not(:disabled){background:rgba(255,255,255,.08);color:#fff}
.nav:disabled{opacity:.28;cursor:default}
#omni{flex:1 1 auto;display:flex;align-items:center;gap:.5rem;padding:.42rem .9rem;border-radius:999px;
  background:rgba(0,0,0,.35);border:1px solid var(--line)}
#omni:focus-within{border-color:rgba(170,205,255,.55)}
#url{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:inherit;font-size:.84rem}
#url::placeholder{color:rgba(216,231,255,.3)}
#star{font-size:.95rem}
#star.on{color:#ffd76a}
#engine{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:999px;color:var(--dim);
  font:inherit;font-size:.7rem;padding:.35rem .6rem;cursor:pointer;text-transform:uppercase;letter-spacing:.08em}
#engine option{background:#0b1626}
#bookmarks{display:flex;align-items:center;gap:.3rem;padding:0 .6rem .5rem;overflow-x:auto;scrollbar-width:none}
#bookmarks::-webkit-scrollbar{display:none}
.bm{display:flex;align-items:center;gap:.4rem;padding:.28rem .6rem;border-radius:8px;background:rgba(255,255,255,.04);
  color:var(--dim);font-size:.72rem;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.bm:hover{background:rgba(255,255,255,.1);color:#fff}
.bm img{width:13px;height:13px;border-radius:3px}
.bm .rm{opacity:0;margin-left:.15rem}
.bm:hover .rm{opacity:.6}
#bm-empty{color:rgba(216,231,255,.28);font-size:.7rem;padding:.28rem .2rem}
#views{position:relative;flex:1 1 auto;background:var(--bg)}
#views iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
#shell{display:flex;flex-direction:column;height:100%}
#boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:1rem;background:var(--bg);z-index:50}
#boot h1{font-size:2.6rem;font-weight:700;letter-spacing:.05em;margin:0}
#boot p{margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);max-width:min(560px,86vw);text-align:center;line-height:1.6}
#bootreset{border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);border-radius:999px;
  padding:.6rem 1.6rem;font:inherit;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
#bootreset:hover{background:rgba(255,255,255,.12)}
#newtabpage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem}
#newtabpage h2{font-size:2.4rem;font-weight:700;letter-spacing:.05em;margin:0}
#ntform{display:flex;gap:.5rem;align-items:center;padding:.5rem .5rem .5rem 1.1rem;border-radius:999px;
  background:rgba(12,22,40,.7);border:1px solid var(--line);width:min(520px,80vw)}
#ntinput{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:inherit;padding:.5rem 0}
#ntgo{border:0;border-radius:999px;padding:.55rem 1.2rem;font:inherit;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:#08101f;background:linear-gradient(180deg,#eaf1ff,#b9cdf0);cursor:pointer}

/* Exit-region picker. Direct means this machine; every other option routes
   through somebody else's wisp server, which is the honest framing - none of
   these are VPN endpoints we control or can locate. */
#regionwrap{position:relative;display:inline-block}
#region{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
#regiondot{width:7px;height:7px;border-radius:50%;background:#46d17f;flex:0 0 7px}
#regiondot.relay{background:#7aa2ff}
#regionmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:238px;padding:.5rem;border-radius:16px;border:1px solid rgba(150,185,255,.18);background:rgba(10,16,30,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 44px rgba(0,0,0,.6)}
#regionmenu[hidden]{display:none !important}
.rm-head{margin:.25rem .55rem .5rem;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,243,255,.42)}
.rm-foot{margin:.5rem .55rem .2rem;font-size:.57rem;line-height:1.4;color:rgba(238,243,255,.34)}
.rm-item{display:flex;align-items:center;gap:.7rem;width:100%;padding:.55rem .6rem;border:0;border-radius:11px;background:none;color:#eef3ff;font:inherit;font-size:.78rem;text-align:left;cursor:pointer}
.rm-item:hover{background:rgba(120,160,255,.13)}
.rm-item.on{background:rgba(120,160,255,.17)}
.rm-ico{flex:0 0 22px;font-size:1rem;line-height:1;text-align:center}
.rm-txt{flex:1 1 auto;min-width:0}
.rm-name{display:block;line-height:1.25}
.rm-sub{display:block;font-size:.62rem;color:rgba(238,243,255,.45);line-height:1.3}
.rm-on{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#46d17f;opacity:0}
.rm-item.on .rm-on{opacity:1}