@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/plus-jakarta-sans-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/jetbrains-mono-latin.woff2') format('woff2')}
:root{--bg:#fbfcfe;--tint:#f2f6fb;--card:#fff;--line:#e8edf4;--ink:#0e1726;--ink2:#475467;--ink3:#667085;
--blue:#2e90fa;--blue-ink:#175cd3;--blue-soft:#e8f1fd;--green:#12b76a;--green-ink:#027a48;--green-soft:#e6f7ef;
--amber:#f79009;--amber-ink:#b54708;--amber-soft:#fef6e7;--red:#f04438;--red-ink:#b42318;--red-soft:#fef1f0;
--sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
--panel:480px;--rb:36px;--top:calc(96px + var(--rb));font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:13px}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:9px;padding:8px 13px;color:var(--ink);white-space:nowrap;font-weight:600;transition:background .15s,border-color .15s,box-shadow .15s}
button:hover{background:var(--tint);border-color:#d5deea}button:active{background:#e8eef6}button:disabled{cursor:default;opacity:.42}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--card);padding:10px 11px;color:var(--ink);outline:none}input:focus{border-color:var(--blue)}
[hidden]{display:none!important}svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.primary{background:var(--blue-ink);color:#fff;border-color:var(--blue-ink)}.primary:hover{background:#1450b3;border-color:#1450b3}
.icon{border:1px solid transparent;background:transparent;color:var(--ink2);padding:0;width:34px;height:34px;display:grid;place-items:center;font-size:20px;line-height:1;border-radius:9px}.icon:hover{background:var(--tint);border-color:transparent}
.icon.selected{color:var(--blue-ink);background:var(--blue-soft)}
header{height:var(--top);border-bottom:1px solid var(--line);background:var(--card)}
.tabstrip{height:44px;display:flex;align-items:flex-end;gap:5px;background:var(--tint);padding:0 12px}
.brand{display:flex;align-items:center;justify-content:center;width:38px;height:36px}.brand img{display:block}
#tabs{display:flex;min-width:0;overflow:auto;gap:4px;scrollbar-width:none;align-items:flex-end;height:36px}
.tab{display:flex;align-items:center;max-width:230px;min-width:130px;height:34px;border-radius:10px 10px 0 0;color:var(--ink2);cursor:pointer;padding:0 8px 0 12px;gap:8px;font-weight:500}
.tab:hover{background:#e9eff7}.tab.active{background:var(--card);color:var(--ink);font-weight:600}
.tab-dot{width:7px;height:7px;border-radius:50%;flex:none;background:#c5ceda}.tab-dot.hostfile{background:var(--blue)}.tab-dot.live{background:var(--green)}
.tab-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tab-close{border:0;padding:0;width:20px;height:20px;background:none;font-size:16px;color:var(--ink3);border-radius:6px;font-weight:400}.tab-close:hover{background:#dde5f0}
#new-tab{align-self:center;width:30px;height:30px;color:var(--ink3)}#new-tab svg{width:16px;height:16px}
#update-notice{margin-left:auto;align-self:center;padding:4px 11px;font-size:11.5px;color:var(--blue-ink);background:var(--blue-soft);border-color:#b7d4f7;border-radius:999px}#update-notice:hover{background:#d8e8fc}
.toolbar{height:52px;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--card)}
#navigation{display:flex;align-items:center;flex:1;min-width:120px;border:1px solid var(--line);border-radius:10px;background:var(--tint);height:36px;margin:0 2px;padding:0 4px 0 12px;gap:8px}
#navigation:focus-within{border-color:var(--blue);background:var(--card)}
#protocol{color:var(--ink3);display:flex}#protocol svg{width:15px;height:15px}
#address{border:0;background:transparent;padding:6px 0;font-size:13.5px}#address:focus{border:0}
.go,.star{border:0;background:none;padding:0;width:28px;height:28px;display:grid;place-items:center;color:var(--ink3);border-radius:7px}.go svg,.star svg{width:15px;height:15px}.star svg{width:16px;height:16px}
.star.on{color:var(--amber)}.star.on svg{fill:currentColor}
.seg{display:flex;padding:3px;gap:2px;border:1px solid var(--line);border-radius:11px;background:var(--tint)}
.seg button{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--ink2);font-size:12.5px}
.seg button:hover:not(:disabled){background:#e8eef6}
.seg button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px #0e172614,0 0 0 1px var(--line)}
.sep{width:1px;height:24px;background:var(--line);margin:0 2px;flex:none}
.chip{display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:10px;font-size:12.5px}.chip.selected{background:var(--blue-soft);border-color:#b7d4f7;color:var(--blue-ink)}
.count{font-family:var(--mono);font-size:10.5px;background:var(--blue-soft);color:var(--blue-ink);border-radius:6px;padding:1px 6px;font-weight:600}
#claude img{display:block;width:22px;height:22px;object-fit:contain}
.mono,.lbl{font-family:var(--mono)}.lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:500}
/* route bar: one strip in single view, one per pane in compare */
.route-bar{height:var(--rb);display:flex;align-items:center;gap:14px;padding:0 14px 0 17px;background:var(--card);font-size:12.5px;position:relative;white-space:nowrap;overflow:hidden;border-bottom:1px solid var(--line)}
.route-bar:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#c5ceda}
.route-bar.hostfile:before{background:var(--blue)}.route-bar.live:before{background:var(--green)}
.route-bar.idle{background:var(--tint);color:var(--ink3)}
.badge{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;padding:3px 8px;border-radius:6px;flex:none;border:0}
.hostfile>.badge{background:var(--blue-soft);color:var(--blue-ink)}.live>.badge{background:var(--green-soft);color:var(--green-ink)}
button.badge{cursor:pointer}button.badge:hover{filter:brightness(.96)}
.route-domain{font-weight:700;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.kv{display:flex;gap:6px;align-items:center;color:var(--ink2);flex:none}.kv .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}.kv .v{font-family:var(--mono);font-size:12px;color:var(--ink)}
.ok,.warn,.bad{display:inline-flex;align-items:center;gap:5px;font-weight:600;flex:none}.ok{color:var(--green-ink)}.warn{color:var(--amber-ink)}.bad{color:var(--red-ink)}.ok svg,.warn svg,.bad svg{width:14px;height:14px;stroke-width:2.2}
.route-right{margin-left:auto;display:flex;gap:14px;align-items:center;flex:none;min-width:0}
#pending-badge{color:var(--amber-ink);background:var(--amber-soft);font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px}
#pane-bars .route-bar{position:absolute;z-index:3;border:1px solid var(--line);border-left:0;border-top:0}
#pane-bars .route-bar.active{box-shadow:inset 0 -2px 0 var(--route-c)}
#pane-bars .route-bar.hostfile{--route-c:var(--blue)}#pane-bars .route-bar.live{--route-c:var(--green)}
#pane-bars .route-bar{overflow:hidden;white-space:nowrap}#pane-bars .kv.rule{display:none}#pane-bars .route-bar.compact{gap:9px;padding:0 9px 0 13px}.compact .kv .k,.compact .cert-text,.compact .kv.rule{display:none}
#canvas{position:absolute;top:var(--top);bottom:30px;left:0;right:0;background:var(--bg);overflow:auto}
body.panel-open #canvas{right:min(var(--panel),48vw)}
.welcome{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;background:radial-gradient(ellipse at 50% 20%,#fff 10%,var(--tint) 100%)}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink3);margin:0 0 14px}
.welcome h1{font-size:clamp(30px,3.5vw,46px);letter-spacing:-.03em;line-height:1.12;font-weight:800;margin:0 0 20px}
.welcome>p:not(.eyebrow){color:var(--ink2);line-height:1.8;margin:0 0 25px}.welcome .primary{padding:12px 20px}.welcome .primary span{margin-left:25px}
.welcome-brand{display:flex;align-items:center;gap:16px;margin-bottom:32px;text-align:left}.welcome-brand strong{display:block;font-size:30px;letter-spacing:-1px}.welcome-brand span{display:block;margin-top:4px;color:var(--ink3);font-size:12px}.welcome-brand b{color:var(--blue)}
.welcome-notes{display:flex;gap:23px;font-family:var(--mono);font-size:10px;color:var(--ink3);margin-top:52px;letter-spacing:.06em;text-transform:uppercase}
.page-error{padding:70px 45px;max-width:700px}.page-error h1{font-size:26px}.page-error p{color:var(--ink3);line-height:1.8;overflow-wrap:anywhere}.page-error code{display:block;background:var(--red-soft);color:var(--red-ink);padding:14px;border-radius:9px;overflow-wrap:anywhere;font-family:var(--mono)}
.error-symbol{display:inline-block;padding:10px 20px;font-size:25px;border-radius:14px;background:var(--red-soft);color:var(--red-ink)}
aside{position:absolute;top:var(--top);bottom:30px;right:0;width:min(var(--panel),48vw);background:var(--card);border-left:1px solid var(--line);display:flex;flex-direction:column}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding:26px 25px 20px}.panel-head h2{font-size:22px;letter-spacing:-.03em;margin:0 0 6px}.panel-head p{color:var(--ink3);margin:0;font-size:12px}
.panel-scroll{padding:0 25px 25px;overflow:auto;scrollbar-width:thin}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:block;font-size:11px;font-weight:600;color:var(--ink2)}label input{margin-top:8px;font-weight:400}
.form-actions{display:flex;align-items:center;gap:8px;margin-top:11px}.form-actions span{color:var(--ink3);font-size:10px;margin-right:auto}
.list-heading{display:flex;justify-content:space-between;font-family:var(--mono);color:var(--ink3);font-size:9.5px;letter-spacing:.14em;margin:29px 0 13px}.list-heading span+span{letter-spacing:0}
.rule{display:flex;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}.rule-text{min-width:0;flex:1}.rule-domain{font-size:12.5px;font-weight:700;overflow-wrap:anywhere}.rule-ip{font-family:var(--mono);color:var(--ink3);font-size:11px;margin-top:5px;overflow-wrap:anywhere}
.rule .small{border:0;padding:5px;background:none;color:var(--ink3);font-size:16px}
.toggle{width:30px;height:18px;border-radius:20px;border:0;padding:0;background:#ccd3dd;position:relative;flex-shrink:0}.toggle:hover{background:#bcc5d2}.toggle:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:white;left:3px;top:3px;transition:left .15s}.toggle.on{background:var(--blue)}.toggle.on:hover{background:var(--blue-ink)}.toggle.on:after{left:15px}
.empty{padding:22px 16px;background:var(--tint);border:1px dashed #d5deea;border-radius:10px;color:var(--ink3);font-size:12px;line-height:1.8;text-align:center}
.hint{color:var(--ink3);font-size:10.5px;line-height:1.7;margin:12px 0}.hint strong{font-weight:600;color:var(--ink2)}
.apply-area{border-top:1px solid var(--line);margin-top:20px;padding-top:17px}.apply-area p{font-size:11px;color:var(--ink3);line-height:1.6;margin:0 0 13px}.apply-area.pending p{color:var(--amber-ink)}.apply-area button{width:100%}
.updates{border-top:1px solid var(--line);margin-top:28px;padding-top:21px}.updates h3{font-size:14px;margin:0 0 8px}.updates>p{font-size:11px;color:var(--ink3)}
.check{display:flex;align-items:center;gap:8px;font-weight:500;margin-top:17px}.check input{width:auto;margin:0;accent-color:var(--blue-ink)}
.update-actions{display:flex;gap:6px;flex-wrap:wrap}.update-actions button{font-size:11.5px}
details{margin-top:15px;color:var(--ink3);font-size:10.5px}summary{cursor:pointer}details form{margin-top:12px}details form button{margin-top:8px;font-size:10.5px}
.versions{margin-top:18px;font-family:var(--mono);font-size:9.5px;color:var(--ink3);line-height:1.9}
#update-section{border-top:0;margin-top:0;padding-top:0}#update-progress{width:100%;height:12px;accent-color:var(--blue-ink);margin:14px 0}
#release-notes,#claude-diagnostics{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:11px;line-height:1.6;background:var(--tint);padding:14px;border-radius:10px}
#release-notes{max-height:220px;overflow:auto}
#settings-section h3{margin:22px 0 8px;font-size:14px}#settings-section>button,#claude-controls button{margin:4px 6px 4px 0;font-size:12px}
footer{position:absolute;height:30px;bottom:0;left:0;right:0;border-top:1px solid var(--line);background:var(--tint);display:flex;align-items:center;padding:0 14px;gap:15px}
footer button{border:0;padding:0;background:none;font-size:11.5px;color:var(--ink3);display:flex;align-items:center;gap:6px;font-weight:500}footer button:hover{color:var(--ink)}footer button svg{width:14px;height:14px}
#devtools[aria-pressed=true]{color:var(--blue-ink);font-weight:700}
#footer-note{margin-left:auto;font-size:11px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
footer button#memory-usage,footer button#footer-version{flex-shrink:0;padding:3px 0 3px 12px;border-left:1px solid var(--line);border-radius:0;color:var(--ink3);font-family:var(--mono);font-size:10.5px;font-variant-numeric:tabular-nums}
footer button#memory-usage:hover,footer button#footer-version:hover{color:var(--ink);background:none}
footer button#footer-version.new{color:var(--blue-ink);font-weight:600}footer button#footer-version.ready{color:var(--green-ink);font-weight:600}
footer button#footer-version.new:before,footer button#footer-version.ready:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
#footer-note{margin-right:-3px}
#memory-usage:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
#toast{position:absolute;top:calc(var(--top) + 8px);left:50%;transform:translateX(-50%);max-height:60px;overflow:auto;max-width:min(640px,calc(100% - 50px));padding:8px 14px;border:1px solid #f9c0bb;border-radius:10px;background:var(--red-soft);color:var(--red-ink);z-index:20;box-shadow:0 8px 30px #0e172622;font-weight:500}
dialog{border:1px solid var(--line);border-radius:14px;width:400px;padding:25px;box-shadow:0 20px 60px #0e172630;font-family:var(--sans);color:var(--ink)}dialog::backdrop{background:#0e172655}dialog h2{font-size:20px;letter-spacing:-.02em}dialog label{margin-top:15px}dialog p{overflow-wrap:anywhere;color:var(--ink3)}.auth-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.maker-card{display:flex;align-items:center;gap:12px;margin:3px 0 16px}.maker-card strong{font-size:19px}.maker-card p{font-size:11px;color:var(--ink3);margin:5px 0}.maker-links{display:flex;gap:8px}.maker-links button{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px;font-size:12px}.maker-links span{overflow:hidden;text-overflow:ellipsis}.maker-links img{flex:none}.maker-links svg{width:15px;height:15px}.maker-links .mark{fill:currentColor;stroke:none}#maker-coffee{background:#fd0;border-color:#fd0;color:#0d0c22}#maker-coffee:hover{background:#ffe433;border-color:#e6c700}#maker-coffee:active{background:#f0d000}.maker-links .cup{width:16px;height:16px;stroke:#0d0c22;stroke-width:1.6}.maker-links .cup .fill{fill:#fff}.maker-links .cup .band{fill:#0d0c22;stroke:none}
/* developer tools docking */
#tools-bar{position:absolute;display:flex;align-items:center;justify-content:space-between;background:var(--tint);border-bottom:1px solid var(--line);z-index:5;padding:0 5px;overflow:hidden}
#tools-bar button{border:0;background:none;padding:4px 7px;font-size:15px;border-radius:5px}#tools-grip{display:flex;align-items:center;gap:6px;flex:1;min-width:20px;cursor:grab;touch-action:none;text-align:left}#tools-grip span{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-buttons{display:flex}#tools-bar button[aria-pressed=true]{background:var(--blue-soft);color:var(--blue-ink)}
#tools-splitter{position:absolute;background:var(--line);z-index:6;touch-action:none}#tools-splitter:hover,#tools-splitter:focus-visible{background:var(--blue)}#tools-splitter[aria-orientation=horizontal]{cursor:row-resize}#tools-splitter[aria-orientation=vertical]{cursor:col-resize}
#tools-drag-shield{position:absolute;top:var(--top);left:0;bottom:30px;right:0;z-index:4;background:#f2f6fbea;display:flex;align-items:stretch;justify-content:space-between;gap:12px;padding:18px;user-select:none;pointer-events:none}
body.panel-open #tools-drag-shield{right:min(var(--panel),48vw)}
#tools-drag-shield>div{border:2px dashed #9dbde3;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:1;color:var(--ink2);font-size:12px}
#tools-drag-shield>div[data-drop=bottom]{align-self:flex-end;height:30%;flex:2}#tools-drag-shield>div.selected{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-ink)}
#tools-drag-shield p{position:absolute;left:0;right:0;top:38%;text-align:center;color:var(--ink2);font-size:12px}body.tools-resizing #tools-drag-shield>div{visibility:hidden}
body.claude-open #panel .panel-head,body.claude-open #panel .panel-scroll{display:none}
.comparison-error{position:absolute;padding:30px;background:var(--red-soft);overflow:auto}.comparison-error p,.comparison-error code{overflow-wrap:anywhere}.comparison-error button{display:block;margin-top:20px}
#find-bar{position:absolute;top:var(--top);left:0;right:0;height:38px;display:flex;align-items:center;gap:9px;padding:4px 15px;background:var(--tint);z-index:4;border-bottom:1px solid var(--line)}body.panel-open #find-bar{right:min(var(--panel),48vw)}
#find-input{width:220px;padding:5px 9px}#find-bar button{padding:3px 10px}#find-count{font-size:11px;color:var(--ink3);min-width:42px}
.library-tabs{display:flex;gap:4px;margin-bottom:15px}.library-tabs button{font-size:11.5px;padding:8px}.library-tabs .selected{background:var(--blue-soft);border-color:#b7d4f7;color:var(--blue-ink)}#library-section>button{font-size:11.5px;margin-bottom:8px}
.library-entry{padding:15px 0;border-bottom:1px solid var(--line)}.library-entry p{overflow-wrap:anywhere;font-size:11px;color:var(--ink3);margin:5px 0 10px}.library-entry button{font-size:11px;padding:6px 9px;margin-right:5px}.library-entry .library-link{padding:0;border:0;background:none;text-align:left;white-space:normal;font-size:13px;font-weight:700}.library-entry progress{width:100%;display:block;margin:8px 0}.library-entry small{color:var(--ink3)}
/* differences view */
.diff{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:100%;background:var(--bg)}
.diff-main{padding:20px 22px;min-width:0}.diff-side{border-left:1px solid var(--line);background:var(--card);padding:18px}
.dhead{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.dhead h2{margin:0;font-size:18px;letter-spacing:-.02em;overflow-wrap:anywhere}
.dvs{display:flex;align-items:center;gap:8px;color:var(--ink3);font-size:12.5px;flex-wrap:wrap}.dvs .badge{padding:2px 8px}
.dhead .btn{margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;font-size:12.5px}.btn img{width:18px;height:18px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;position:relative;overflow:hidden}
.kpi .n{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:5px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpi .s{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi.alert{border-color:#f9c0bb;background:linear-gradient(90deg,var(--red-soft),#fff 70%)}.kpi.alert:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}.kpi.alert .n{color:var(--red-ink)}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dch{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}.dch b{font-size:13.5px}.dch .lbl{font-size:9.5px}
.subtabs{margin-left:auto;display:flex;gap:4px}.subtabs button{border:0;background:transparent;font-size:12px;padding:4px 10px;border-radius:7px;color:var(--ink3)}.subtabs button[aria-pressed=true]{background:var(--tint);color:var(--ink)}
.dscroll{overflow:auto;max-height:calc(100vh - 470px);min-height:120px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);text-align:left;font-weight:500;padding:8px 14px;border-bottom:1px solid var(--line)}
td{padding:9px 14px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}tr:last-child td{border-bottom:0}td.m{font-family:var(--mono);font-size:12px}
tr.flag td{background:var(--red-soft)}.y{color:var(--green-ink);font-weight:800}.n0{color:#b3bdca}
.pill{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap}.pill.red{background:#fee4e2;color:var(--red-ink)}.pill.gray{background:var(--tint);color:var(--ink3)}
.code{font-family:var(--mono);font-size:11.5px;line-height:1.75;padding:8px 0}.code div{padding:0 14px;white-space:pre-wrap;overflow-wrap:anywhere}
.code .hostfile{background:var(--blue-soft);color:var(--blue-ink)}.code .live{background:var(--red-soft);color:var(--red-ink)}.code .both{color:var(--ink3)}
.dempty{padding:26px 14px;color:var(--ink3);text-align:center}.dstate{padding:70px 30px;text-align:center;color:var(--ink2);grid-column:1/-1}.dstate h2{margin:0 0 8px;font-size:18px}.dstate code{display:block;margin:14px auto;max-width:640px;background:var(--red-soft);color:var(--red-ink);padding:12px;border-radius:9px;font-family:var(--mono);overflow-wrap:anywhere}
.spinner{display:inline-block;width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:14px}@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}
.diff-side h3{margin:6px 0 12px;font-size:15px;letter-spacing:-.01em}
.finding{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;font-size:12.5px;line-height:1.5;color:var(--ink2)}.finding b{color:var(--ink)}.finding.high{border-color:#f9c0bb;background:var(--red-soft)}
.finding .t{display:flex;gap:8px;align-items:center;margin-bottom:4px;color:var(--red-ink)}.finding:not(.high) .t{color:var(--ink)}.finding p{margin:0;overflow-wrap:anywhere}
.ask{margin-top:6px;height:36px;padding:0 14px;display:inline-flex;align-items:center;gap:8px}.ask img{width:18px;height:18px}.ask-hint{color:var(--ink3);font-size:12px;line-height:1.6;margin:10px 0 0}
@media(max-width:1100px){.welcome-notes{flex-direction:column;gap:10px;margin-top:30px}.panel-head{padding:22px 20px}.panel-scroll{padding:0 20px 20px}.diff{grid-template-columns:1fr}.diff-side{border-left:0;border-top:1px solid var(--line)}.kpis{grid-template-columns:repeat(2,1fr)}.seg button{padding:0 8px}}
@media(max-width:900px){.seg button{font-size:0;gap:0}.chip>span:first-of-type{display:none}}

.diff-side .finding,.diff-side .finding b{overflow-wrap:anywhere}.diff-side{min-width:0;overflow-x:hidden}

.kv.conn{flex:0 1 auto;min-width:0;overflow:hidden}
.ptr{font-family:var(--mono);font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;min-width:0}
.ptr:before{content:"·";margin-right:6px;color:#b6c0ce}
button.cert-btn{border:0;background:none;font-size:inherit;color:var(--green-ink);padding:3px 7px;margin:0 -7px;border-radius:6px}
button.cert-btn:hover{background:var(--green-soft)}
.cert-btn .chev{width:11px;height:11px}
button.site-btn{border:0;background:none;font-size:inherit;display:flex;gap:6px;align-items:center;flex:none;padding:3px 7px;margin:0 -7px;border-radius:6px;font-weight:400}
button.site-btn:hover{background:var(--tint)}
.site-btn .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}
.site-v{font-weight:600;color:var(--ink)}
.site-v small{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--ink2)}
.site-v small.differs{background:var(--amber-soft);color:var(--amber-ink);padding:1px 5px;border-radius:5px}
body.card-pop{overflow:hidden;background:var(--card);font-family:var(--sans);font-size:12.5px;color:var(--ink);padding:14px 16px 13px;border:1px solid #d5deea;border-radius:10px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-weight:700;font-size:13px;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px}
.card-head.ok-head{color:var(--green-ink);justify-content:flex-start}
.card-head.ok-head:before{content:"✓"}
.card-head .mono{font-family:var(--mono);font-size:13px}
.card-sub{font-family:var(--mono);font-weight:400;font-size:10.5px;color:var(--ink3)}
.card-pop dl{margin:0;display:grid;grid-template-columns:86px 1fr;gap:8px 10px}
.card-pop dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding-top:2px}
.card-pop dd{margin:0;min-width:0;overflow-wrap:anywhere}
.card-pop dd small{display:block;color:var(--ink3);font-size:11.5px}
.card-pop dd .mono{font-family:var(--mono);font-size:12px}
.card-tags{display:flex;gap:5px;flex-wrap:wrap}
.card-tags span{background:var(--tint);border-radius:6px;padding:2px 7px;font-size:11.5px}
.card-left{font-family:var(--mono);font-size:10.5px;font-weight:600;background:var(--green-soft);color:var(--green-ink);padding:1px 6px;border-radius:5px;margin-left:6px;white-space:nowrap}
.card-left.soon{background:var(--amber-soft);color:var(--amber-ink)}
.mem-list{display:grid;gap:7px}
.mem-sep{border-top:1px solid var(--line);margin-top:9px;padding-top:9px}
.mem-row{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center;color:inherit;text-decoration:none;border-radius:6px}
a.mem-row:hover .mem-title{color:var(--blue-ink)}
a.mem-row:focus-visible,.mem-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mem-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem-title small{color:var(--ink3);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;margin-right:6px}
.mem-size{font-family:var(--mono);font-size:12px}
.mem-meter{grid-column:1/-1;height:4px;border-radius:9px;background:var(--tint);overflow:hidden}
.mem-meter b{display:block;height:100%;background:var(--blue);border-radius:9px}
.sys .mem-meter b{background:#c5ceda}
.hot .mem-meter b{background:var(--amber)}.hot .mem-size{color:var(--amber-ink);font-weight:600}
.mem-foot{display:flex;justify-content:space-between;align-items:center;margin-top:11px;gap:8px;color:var(--ink3);font-size:11px}
.mem-btn{flex:none;white-space:nowrap;border:1px solid var(--line);border-radius:9px;padding:6px 11px;font-weight:600;font-size:11.5px;color:var(--ink);text-decoration:none}
.mem-btn:hover{background:var(--tint)}
.update-card{border:1px solid var(--line);border-radius:10px;padding:13px 14px;display:grid;gap:9px;margin-bottom:14px}
.update-card.blue{background:var(--blue-soft);border-color:#b7d4f7}
.update-card.green{background:var(--green-soft);border-color:#b5e6cd}
.update-card.red{background:var(--red-soft);border-color:#f9c0bb}
.update-card .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.update-big{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill-s{font-family:var(--mono);font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:6px}
.pill-s.g{background:var(--green-soft);color:var(--green-ink)}.pill-s.b{background:var(--card);color:var(--blue-ink)}
.updates .update-card>p.update-meta{margin:0;font-size:12px;color:var(--ink2)}
.update-card #update-progress{margin:0}
.update-card #release-notes{margin:0;max-height:140px;overflow:auto;white-space:pre-wrap;font-family:var(--sans);font-size:12px;color:var(--ink2)}
.how{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.how h3{font-size:13px;margin:0 0 9px}
.how ol{margin:0 0 4px;padding:0;list-style:none;display:grid;gap:8px;counter-reset:step}
.how li{counter-increment:step;display:grid;grid-template-columns:20px 1fr;gap:8px;color:var(--ink2);font-size:12px;line-height:1.45}
.how li:before{content:counter(step);font-family:var(--mono);font-size:10.5px;font-weight:600;width:20px;height:20px;border-radius:6px;background:var(--tint);color:var(--ink2);display:grid;place-items:center}
.compact .site-btn .k{display:none}
/* DNS button in the route bar and the DNS card */
button.dns-btn{display:inline-flex;align-items:center;gap:4px;flex:none;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--ink2);border-radius:6px;padding:2px 5px 2px 8px}
button.dns-btn:hover{color:var(--ink)}
.dns-btn .chev{width:11px;height:11px}
html.tall{overflow-y:auto;scrollbar-width:thin}
.card-head.dns-head{justify-content:flex-start;gap:10px;margin-bottom:11px}.dns-head .card-sub:last-child,.dns-head .push{margin-left:auto}
.pill.amber{background:#fde7bf;color:var(--amber-ink)}.pill.green{background:var(--green-soft);color:var(--green-ink)}
.dns-busy{display:flex;align-items:center;gap:10px;color:var(--ink2);padding:6px 0 4px}.dns-busy .spinner{width:16px;height:16px;margin:0;flex:none}
.notice{background:var(--tint);border-radius:9px;padding:10px 12px;color:var(--ink2);line-height:1.5;margin-bottom:11px;overflow-wrap:anywhere}
.notice b{font-family:var(--mono);font-weight:600;color:var(--ink)}.notice.red{background:var(--red-soft);color:var(--red-ink)}.notice.red b{color:inherit}
.dns-none{margin:0;color:var(--ink2)}
.dns-name{font-family:var(--mono);font-size:12px;font-weight:600;margin:0 0 9px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;overflow-wrap:anywhere}
.dns-name small{font-family:var(--sans);font-weight:400;font-size:11.5px;color:var(--ink3)}
.dns-group{border-top:1px solid var(--line);margin-top:11px;padding-top:11px}
.card-pop dl.recs{grid-template-columns:50px 1fr;gap:9px 10px}
.recs dt{padding-top:3px}
.recs dd{font-family:var(--mono);font-size:12px;display:grid;gap:4px;line-break:anywhere}
.card-pop .recs dd small{font-family:var(--sans);line-break:auto}.recs dd small b{font-family:var(--mono);font-weight:600;color:var(--blue-ink)}
.prio{color:var(--ink3);margin-right:8px;font-style:normal}mark .prio{color:inherit;opacity:.7}
.ttl{font-style:normal;font-size:10.5px;color:var(--ink3);background:var(--tint);border-radius:5px;padding:1px 6px;margin-left:6px;white-space:nowrap}
.dns-foot{border-top:1px solid var(--line);padding-top:11px;margin-top:12px}
/* Hostfile and Live side by side, one row per record type */
.cmp{table-layout:fixed;font-size:12px}
.cmp col.ct{width:58px}.cmp col.cs{width:88px}
.cmp th{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;padding:7px 12px 9px;vertical-align:bottom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp th .badge{display:inline-block;padding:2px 8px;margin-right:8px}
.cmp th small{font-size:11.5px;color:var(--ink3)}.cmp th small b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.cmp th.hostfile{background:linear-gradient(var(--blue-soft),var(--blue-soft)) bottom/100% 2px no-repeat}
.cmp th.live{background:linear-gradient(var(--green-soft),var(--green-soft)) bottom/100% 2px no-repeat}
.cmp td{padding:9px 12px;font-family:var(--mono);line-break:anywhere;vertical-align:top;line-height:1.5}
.cmp td.t{font-size:9.5px;letter-spacing:.14em;color:var(--ink3);padding:12px 0 0 2px;white-space:nowrap}
.cmp .live{border-left:1px solid var(--line)}
.cmp td.p{text-align:right;padding-right:0;font-family:var(--sans);white-space:nowrap}
.cmp .v+.v{margin-top:4px}
.cmp mark{background:var(--amber-soft);color:var(--amber-ink);border-radius:5px;padding:1px 5px;margin:0 -5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.none{font-family:var(--sans);color:var(--ink3)}
.cmp td small{display:block;font-family:var(--sans);font-size:11.5px;color:var(--ink3);line-break:auto}
.cmp tr.g td{padding:12px 0 0;border-bottom:0}.cmp tr.g .dns-name{margin:0}
/* Compare with another URL: the domain in a pane bar keeps its width, the connected IP gives way first */
#pane-bars .route-domain,#pane-bars .with{flex:0 0 auto;max-width:48%}
#pane-bars .kv.conn{flex:0 100 auto}#pane-bars .kv.conn .v{overflow:hidden;text-overflow:ellipsis}
button.with{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:inherit;font-weight:700;color:var(--ink);background:none;border:1px solid transparent;border-radius:7px;padding:3px 7px;margin:0 -4px;cursor:pointer;transition:background .15s,border-color .15s}
button.with span{overflow:hidden;text-overflow:ellipsis}
button.with svg{width:12px;height:12px;flex:none;color:var(--ink3)}
button.with:hover{background:var(--tint);border-color:var(--line)}
button.with.other{background:var(--green-soft);color:var(--green-ink)}button.with.other svg{color:var(--green-ink)}
#pane-bars .route-bar.editing{gap:8px}
.editing label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);flex:none}
.editing input{flex:1 1 0;width:0;min-width:60px;height:26px;font:500 12px var(--mono);color:var(--ink);background:var(--card);border:1px solid var(--blue);border-radius:7px;padding:0 9px;box-shadow:0 0 0 3px var(--blue-soft);outline:0}
.editing input[aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.editing input::placeholder{color:#98a2b3}
.editing button{flex:none;height:26px;border-radius:7px;padding:0 11px;font-size:11.5px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.editing button:hover{background:var(--tint)}
.editing button.with-go{background:var(--ink);border-color:var(--ink);color:#fff}.editing button.with-go:hover{background:#1d2939}
.with-error{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--red-ink);background:var(--red-soft);border-radius:6px;padding:3px 8px}
.comparison-error,.pane-empty{z-index:2}
.pane-empty{position:absolute;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;color:var(--ink2);padding:24px;background:var(--bg)}
.pane-empty b{font-size:15px;color:var(--ink)}
.pane-empty code{font-family:var(--mono);font-size:11.5px;background:var(--tint);border-radius:5px;padding:1px 6px}
/* Compare: the bar between the two panes. Only this strip and the pane bars are HTML, the websites are native views on top of the page. */
#compare-splitter{position:absolute;z-index:3;background:var(--line);cursor:col-resize;touch-action:none;transition:background .15s}
#compare-splitter:hover,#compare-splitter:focus-visible,#compare-splitter.dragging{background:var(--blue);outline:0}
#compare-splitter .grip,#compare-share{position:absolute;top:7px;left:50%;transform:translateX(-50%);height:22px;border-radius:6px}
#compare-splitter .grip{width:14px;background:var(--card);border:1px solid #cfd7e3;box-shadow:0 1px 2px #0e172614;display:grid;place-content:center;transition:border-color .15s}
#compare-splitter .grip:before{content:"";width:4px;height:10px;border-left:1.5px solid var(--ink3);border-right:1.5px solid var(--ink3)}
#compare-splitter:hover .grip,#compare-splitter:focus-visible .grip,#compare-splitter:hover .grip:before,#compare-splitter:focus-visible .grip:before{border-color:var(--blue)}
#compare-reset{position:absolute;z-index:3;transform:translateX(-50%);width:24px;height:22px;border-radius:6px;padding:0;border:1px solid #b9d6f7;background:var(--blue-soft);color:var(--blue-ink);display:grid;place-content:center;box-shadow:0 1px 2px #0e172614}
#compare-reset svg{width:13px;height:13px}#compare-reset:hover{background:var(--blue);border-color:var(--blue);color:#fff}
#compare-share{padding:0 9px;background:var(--ink);color:#fff;font:600 10.5px var(--mono);letter-spacing:.06em;display:none;align-items:center;white-space:nowrap;box-shadow:0 4px 12px #0e172633}
#compare-splitter.dragging #compare-share{display:flex}#compare-splitter.dragging .grip,#compare-splitter.dragging+#compare-reset{display:none}
#pane-bars .route-bar.pane-left{padding-right:18px}#pane-bars .route-bar.pane-right{padding-left:22px}
.www-row{display:flex;align-items:center;gap:11px;margin-top:12px;padding:10px 11px;background:var(--tint);border:1px solid var(--line);border-radius:9px;cursor:pointer}.www-row:hover{border-color:#d5deea}
.www-text{min-width:0;flex:1}.www-text strong{display:block;font-size:12px;font-weight:600}.www-text span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-top:4px;overflow-wrap:anywhere}
.www-chip{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;color:var(--blue-ink);background:var(--blue-soft);padding:2px 6px;border-radius:5px;margin-left:8px;vertical-align:1px;white-space:nowrap}
.combo{position:relative;margin-top:8px}.combo input{margin-top:0}
.options{position:absolute;z-index:5;top:calc(100% + 5px);right:0;width:max(100%,310px);background:var(--card);border:1px solid #d5deea;border-radius:10px;box-shadow:0 12px 32px #0e172624;padding:5px}
.option{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 9px;border-radius:7px;cursor:pointer}.option .n{font-size:12px;font-weight:600;min-width:0;overflow-wrap:anywhere}.option .i{font-family:var(--mono);font-size:10.5px;color:var(--ink3);flex:none}
.option mark{background:none;color:var(--blue-ink)}.option.active,.option:hover{background:var(--blue-soft)}
.options .more{margin-top:4px;padding:8px 9px 5px;border-top:1px solid var(--line);color:var(--ink3);font-size:10.5px}
.srv{font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--ink2);background:var(--tint);border:1px solid var(--line);border-radius:5px;padding:1px 6px;margin-left:8px;white-space:nowrap}
.server-actions{display:flex;align-items:center;gap:8px;margin:12px 0 4px}.server-actions button{font-size:12px}.server-actions span{color:var(--ink3);font-size:10.5px;margin-left:auto;text-align:right;min-width:0;overflow-wrap:anywhere}
.servers{margin-top:8px;border-top:1px solid var(--line)}.servers.paged{min-height:calc(var(--rows)*40px + 1px)}
.server{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;padding:8px 0;border-bottom:1px solid var(--line)}.server .n{font-size:12.5px;font-weight:700;min-width:0;overflow-wrap:anywhere}.server .i{font-family:var(--mono);font-size:11px;color:var(--ink3);flex:none}
.pager{display:flex;align-items:center;gap:8px;margin-top:10px}.pager span{color:var(--ink3);font-size:10.5px}#server-range{margin-right:auto}.pager button{width:30px;height:30px;padding:0;display:grid;place-items:center}.pager svg{width:14px;height:14px;stroke-width:2.2}
.hint code{font-family:var(--mono);font-size:10px;color:var(--ink2);background:var(--tint);border-radius:4px;padding:1px 5px}