:root {
  --bg: #111215;
  --bar: #1a1c21;
  --surface: #22252b;
  --surface2: #2b2f37;
  --line: #2f333b;
  --text: #e8eaee;
  --dim: #9aa1ad;
  --accent: #ff6b3d;
  --accent2: #ff9a4d;
  --good: #4cc38a;
  --bad: #ef6a6a;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; position: fixed; inset: 0; width: 100%; }
body { font: 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; -webkit-text-size-adjust: 100%; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.fill { fill: currentColor; stroke: none; }

#app { position: absolute; inset: 0; display: flex; flex-direction: column; padding-left: var(--sal); padding-right: var(--sar); }

#offline { background: #4a2d12; color: #ffd9b0; font-size: 13px; padding: calc(var(--sat) + 6px) 12px 6px; text-align: center; }

#top { background: var(--bar); padding-top: var(--sat); border-bottom: 1px solid var(--line); position: relative; flex: none; }
#offline:not([hidden]) + #top { padding-top: 0; }

#tabbar { display: flex; align-items: flex-end; height: 38px; padding: 6px 6px 0; gap: 4px; }
#tabs { display: flex; flex: 1; min-width: 0; overflow-x: auto; gap: 3px; scrollbar-width: none; -webkit-overflow-scrolling: touch; height: 32px; }
#tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; width: 176px; max-width: 34vw; min-width: 96px; height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 6px 0 10px; border-radius: 9px 9px 0 0; color: var(--dim); position: relative; }
.tab.active { background: var(--bg); color: var(--text); }
.tab:not(.active):active { background: var(--surface); }
.tab .fav { width: 16px; height: 16px; border-radius: 4px; flex: none; background: var(--surface2); object-fit: cover; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--dim); overflow: hidden; }
.tab .fav img { width: 100%; height: 100%; object-fit: cover; }
.tab .title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.tab .x { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--dim); flex: none; }
.tab .x:active { background: var(--surface2); }
.tab .x .ic { width: 13px; height: 13px; }
.tab.priv .fav { color: var(--accent); }
.tab .spin { position: absolute; left: 10px; bottom: 0; right: 10px; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: left; animation: tabload 1.2s ease-in-out infinite; opacity: .9; }
@keyframes tabload { 0% { transform: scaleX(.05); } 60% { transform: scaleX(.8); } 100% { transform: scaleX(1); opacity: 0; } }

.ib { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--text); flex: none; position: relative; }
.ib:active { background: var(--surface2); }
.ib[disabled] { opacity: .35; pointer-events: none; }
.ib.small { width: 30px; height: 30px; border-radius: 8px; color: var(--dim); }
.ib.wide { width: auto; min-width: 46px; padding: 0 8px; display: flex; gap: 4px; align-items: center; }
.ib.wide span { font-size: 12px; font-weight: 600; color: var(--accent); min-width: 8px; }
.ib.wide.off span { color: var(--dim); }
.ib.wide .ic { color: var(--accent); }
.ib.wide.off .ic { color: var(--dim); }
.ib.on .ic { color: var(--accent2); fill: var(--accent2); }
#newtab { width: 30px; height: 30px; margin-bottom: 1px; color: var(--dim); }

#toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 8px 6px; height: 48px; background: var(--bg); }
#omniform { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; background: var(--surface); border-radius: 18px; padding: 0 4px; margin: 0 6px; border: 1px solid transparent; }
#omniform:focus-within { border-color: var(--accent); background: var(--surface); }
#omni { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font-size: 16px; padding: 0 6px; text-overflow: ellipsis; -webkit-user-select: text; user-select: text; }
#omni::placeholder { color: var(--dim); }
#siteinfo.secure { color: var(--good); }
#siteinfo.warn { color: var(--bad); }
#siteinfo.neutral { color: var(--dim); }

#progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; opacity: 0; transition: opacity .25s; }
#progress.on { opacity: 1; }
#progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .3s ease; }

#findbar { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--bar); border-bottom: 1px solid var(--line); flex: none; }
#findq { flex: 1; height: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; font-size: 16px; outline: 0; -webkit-user-select: text; user-select: text; }
#findbar .ib .ic { width: 18px; height: 18px; }

#content { position: relative; flex: 1; min-height: 0; background: var(--bg); }
#views, #ntp, #failure { position: absolute; inset: 0; }
.view { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #1b1d22; display: none; }
.view.active { display: block; }
.view.dark-bg { background: #fff; }

#ntp { overflow-y: auto; -webkit-overflow-scrolling: touch; background: radial-gradient(1200px 500px at 50% -10%, #22232b 0%, var(--bg) 70%); }
.ntp-inner { max-width: 640px; margin: 0 auto; padding: 8vh 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { border-radius: 15px; box-shadow: 0 6px 22px rgba(0, 0, 0, .45); }
.brand h1 { margin: 0; font-size: 34px; font-weight: 650; letter-spacing: -.02em; }
#ntpform { width: 100%; height: 50px; display: flex; align-items: center; background: var(--surface); border-radius: 26px; padding: 0 8px; border: 1px solid var(--line); }
#ntpform:focus-within { border-color: var(--accent); }
#ntpq { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font-size: 17px; padding: 0 8px; -webkit-user-select: text; user-select: text; }
.engbtn { width: 38px; height: 38px; border-radius: 19px; display: grid; place-items: center; flex: none; }
.engbtn:active { background: var(--surface2); }
.engbtn svg { width: 20px; height: 20px; }
#speed { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 12px; width: 100%; }
.dial { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 8px; border-radius: 14px; color: var(--text); font-size: 12px; }
.dial:active { background: var(--surface); }
.dial .tile { width: 52px; height: 52px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; overflow: hidden; font-size: 20px; font-weight: 600; color: var(--dim); }
.dial .tile img { width: 28px; height: 28px; object-fit: contain; }
.dial span { max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.stats { color: var(--dim); font-size: 13px; text-align: center; }
.stats b { color: var(--accent); font-weight: 650; font-size: 15px; }
.note { color: var(--dim); font-size: 13px; margin: 0; text-align: center; }

#failure { display: grid; place-items: center; background: var(--bg); padding: 24px; text-align: center; z-index: 3; }
#failure .box { max-width: 420px; }
#failure h2 { margin: 0 0 8px; font-size: 20px; }
#failure p { color: var(--dim); margin: 0 0 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 10px; background: var(--surface2); color: var(--text); font-weight: 550; }
.btn:active { filter: brightness(1.2); }
.btn.primary { background: var(--accent); color: #1a0d07; }
.btn.small { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

#suggest { position: absolute; left: calc(var(--sal) + 100px); right: calc(var(--sar) + 120px); top: calc(var(--sat) + 86px); max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; z-index: 30; box-shadow: 0 14px 40px rgba(0, 0, 0, .55); max-height: 62vh; overflow-y: auto; }
.sg { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 15px; }
.sg:active, .sg.sel { background: var(--surface2); }
.sg .ic { width: 17px; height: 17px; color: var(--dim); }
.sg .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg .s { color: var(--dim); font-size: 12px; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pop { position: absolute; z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); padding: 8px; min-width: 250px; max-height: calc(100% - 100px); overflow-y: auto; right: calc(var(--sar) + 8px); top: calc(var(--sat) + 90px); }
#enginepop { right: auto; left: calc(50% - 130px); top: 28vh; }
#shieldpop { width: 330px; }
#menu { width: 280px; padding: 6px; }
.mi { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border-radius: 9px; text-align: left; font-size: 15px; }
.mi:active { background: var(--surface2); }
.mi .ic { width: 19px; height: 19px; color: var(--dim); }
.mi.strong { font-weight: 600; }
.mi.strong .ic { color: var(--accent); }
.mi .r { margin-left: auto; color: var(--dim); font-size: 13px; }
.msep { height: 1px; background: var(--line); margin: 5px 4px; }
.zoomrow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.zoomrow .lab { flex: 1; font-size: 15px; }
.zoomrow .val { width: 48px; text-align: center; color: var(--dim); font-size: 13px; }
.zoomrow .ib { background: var(--surface2); width: 34px; height: 34px; }

.sp-head { padding: 8px 8px 4px; }
.sp-host { font-weight: 650; font-size: 16px; }
.sp-sub { color: var(--dim); font-size: 12px; margin-top: 2px; }
.sp-big { display: flex; align-items: baseline; gap: 8px; padding: 8px; }
.sp-big b { font-size: 34px; color: var(--accent); font-weight: 700; line-height: 1; }
.sp-big span { color: var(--dim); font-size: 13px; }
.sw { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 9px; }
.sw .lab { flex: 1; }
.sw .lab small { display: block; color: var(--dim); font-size: 12px; margin-top: 1px; }
.tg { width: 44px; height: 26px; border-radius: 13px; background: #3a3f49; position: relative; flex: none; transition: background .15s; }
.tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px; background: #e8eaee; transition: transform .15s; }
.tg.on { background: var(--accent); }
.tg.on::after { transform: translateX(18px); }
.hosts { padding: 4px 8px 8px; color: var(--dim); font-size: 12px; font-family: var(--mono); line-height: 1.6; max-height: 120px; overflow-y: auto; }

#scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); z-index: 35; }
#sheet { position: absolute; z-index: 60; top: 0; bottom: 0; right: 0; width: min(560px, 100%); background: var(--bar); border-left: 1px solid var(--line); display: flex; flex-direction: column; padding-top: var(--sat); padding-bottom: var(--sab); padding-right: var(--sar); box-shadow: -20px 0 50px rgba(0, 0, 0, .5); animation: slide .2s ease-out; }
#sheet.wide { width: 100%; border-left: 0; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sh-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
.sh-head h2 { margin: 0; font-size: 17px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; overscroll-behavior: contain; min-height: 0; }
.seg { display: flex; background: var(--surface); border-radius: 10px; padding: 3px; gap: 2px; margin: 10px 12px 0; flex: none; }
.seg button { flex: 1; height: 32px; border-radius: 8px; color: var(--dim); font-size: 14px; font-weight: 550; }
.seg button.on { background: var(--surface2); color: var(--text); }
.card { background: var(--surface); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.card h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; }
.row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; font-size: 13px; }
.kv div:nth-child(odd) { color: var(--dim); }
.kv div:nth-child(even) { font-family: var(--mono); word-break: break-all; -webkit-user-select: text; user-select: text; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--surface2); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.chip.good { background: #173626; color: #7fe0ae; }
.chip.warn { background: #3a2a14; color: #ffc98c; }
.verdict { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; margin-bottom: 12px; background: var(--surface); }
.verdict .badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface2); }
.verdict.yes .badge { background: #3a2012; color: var(--accent2); }
.verdict b { font-size: 16px; display: block; }
.verdict span { color: var(--dim); font-size: 13px; }
.pre { font: 12px/1.5 var(--mono); background: #0d0e11; border-radius: 9px; padding: 10px; overflow-x: auto; white-space: pre; margin: 6px 0; -webkit-user-select: text; user-select: text; position: relative; }
.engines { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.eng { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--surface2); border: 1px solid transparent; font-size: 14px; }
.eng.on { border-color: var(--accent); }
.eng svg { width: 20px; height: 20px; flex: none; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
select, .inp { height: 38px; border-radius: 9px; background: var(--surface2); border: 1px solid var(--line); color: var(--text); padding: 0 10px; font-size: 15px; outline: 0; -webkit-user-select: text; user-select: text; }
.bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; margin: 10px 0; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .2s; }
.log { font: 12px/1.5 var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { color: var(--dim); text-align: center; padding: 30px 10px; }
.hint { color: var(--dim); font-size: 13px; margin: 6px 0 0; }

/* source viewer */
.src-tools { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.src-tools input { flex: 1; min-width: 120px; height: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; font-size: 16px; outline: 0; -webkit-user-select: text; user-select: text; }
.src-meta { color: var(--dim); font-size: 12px; padding: 6px 12px; border-bottom: 1px solid var(--line); flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs { position: relative; flex: 1; overflow: auto; min-height: 0; background: #0d0e11; -webkit-overflow-scrolling: touch; -webkit-user-select: text; user-select: text; }
.vs .sizer { position: relative; }
.vs .ln { position: absolute; left: 0; height: 19px; line-height: 19px; font: 12.5px/19px var(--mono); white-space: pre; padding-left: 58px; color: #cdd2db; }
.vs .ln::before { content: attr(data-n); position: absolute; left: 0; width: 46px; text-align: right; color: #565c68; padding-right: 8px; }
.vs .ln.hit { background: #3a3114; }
.vs .ln.cur { background: #5a4616; }
.vs i { font-style: normal; }
.vs .t { color: #7fb8ff; } .vs .a { color: #e9b872; } .vs .s { color: #9ed48a; } .vs .c { color: #6c7482; } .vs .p { color: #c7a2f0; }

#toast { position: absolute; left: 50%; bottom: calc(var(--sab) + 24px); transform: translateX(-50%); background: #2f343d; border: 1px solid var(--line); padding: 10px 16px; border-radius: 12px; z-index: 90; max-width: 86%; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 14px; display: flex; gap: 12px; align-items: center; }
#toast button { color: var(--accent2); font-weight: 600; }

@media (max-width: 760px) {
  #suggest { left: 8px; right: 8px; top: calc(var(--sat) + 90px); }
  .tab { width: 130px; }
  .ib.wide span { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.addr { display: flex; gap: 8px; padding: 10px 12px 0; flex: none; }
.addr .inp { flex: 1; min-width: 0; }
.hint.warn { color: var(--accent); }
.sumline { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.sumline span { background: var(--surface2); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: var(--dim); }
.sumline b { color: var(--text); font-weight: 600; }