/* ══════════════════════════════════════════════════════════════
   classic.css — country grid, then the proxies inside a country
   Uses .content / .left / .rail from app.css so the column split
   matches the homepage exactly.
   ══════════════════════════════════════════════════════════════ */

/* ── page header ─────────────────────────────────────────── */
.page-head p{margin:0;font-size:14px;color:var(--text-2);max-width:74ch;line-height:1.6}

/* ── auth tabs ───────────────────────────────────────────── */
.tabs{display:flex;gap:0;padding:5px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:10px 14px;border-radius:var(--r);
  font-size:13.5px;font-weight:600;color:var(--text-2);white-space:nowrap;
  transition:background .15s,color .15s
}
.tab:hover{color:var(--text)}
.tab.on{background:var(--panel-3);color:var(--text)}
.tab svg{width:15px;height:15px;flex:0 0 15px}
.tab .n{
  font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:99px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted)
}
.tab.on .n{color:var(--accent);border-color:var(--accent)}

/* ── search + summary ────────────────────────────────────── */
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.search{
  display:flex;align-items:center;gap:9px;flex:1;min-width:200px;
  padding:9px 13px;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--line);color:var(--muted)
}
.search:focus-within{border-color:var(--accent)}
.search svg{width:15px;height:15px;flex:0 0 15px}
.search input{border:0;background:none;outline:none;color:var(--text);font:inherit;font-size:13.5px;width:100%}
.search input::placeholder{color:var(--muted)}
.summary{font-size:12.8px;color:var(--muted);white-space:nowrap}
.summary b{font-family:var(--mono);color:var(--text)}

/* ── country grid ────────────────────────────────────────── */
.countries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.country{
  display:flex;align-items:center;gap:12px;padding:14px;
  transition:border-color .15s,transform .15s
}
.country:hover{border-color:var(--accent);transform:translateY(-1px)}
/* display:block matters — as an inline span the width and height were
   ignored anywhere it wasn't a direct flex child, and the image blew
   up to its natural size. */
.flag{
  display:block;width:42px;height:30px;flex:0 0 42px;
  border-radius:4px;overflow:hidden;
  background:var(--panel-3);box-shadow:0 0 0 1px var(--line)
}
.flag img{width:100%;height:100%;object-fit:cover;display:block}
.country-t{flex:1;min-width:0}
.country-t b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.country-t span{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.country .go{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-3);border:1px solid var(--line);color:var(--accent);transition:transform .15s
}
.country:hover .go{transform:translateX(3px);border-color:var(--accent)}
.country .go svg{width:12px;height:12px;display:block}

/* ── country detail ──────────────────────────────────────── */
.back{
  display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--panel);font-size:13.5px;font-weight:600;
  color:var(--text-2);white-space:nowrap;flex:0 0 auto
}
.back:hover{background:var(--panel-2);color:var(--text)}
.back svg{width:13px;height:13px}

.crumb{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.crumb .flag{width:34px;height:24px;flex:0 0 34px}
.crumb b{font-family:var(--display);font-size:19px;font-weight:700}
.crumb .n{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* one dropdown instead of a wall of chips — some countries have
   dozens of cities and the chips pushed the table off screen */
.city-pick{margin-left:auto;display:flex;align-items:center;gap:9px}
.city-pick label{font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.city-pick select{
  min-width:210px;padding:8px 30px 8px 11px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  font-size:13px;outline:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat
}
.city-pick select:focus{border-color:var(--accent)}

/* proxy rows */
.rows{display:flex;flex-direction:column}
.prow{
  display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,2fr) minmax(0,1fr) 124px;
  gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line-2)
}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--panel-2)}
.rows-head{
  display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,2fr) minmax(0,1fr) 124px;
  gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)
}
.place{display:flex;align-items:baseline;gap:7px;min-width:0}
.place b{font-size:13px;font-weight:600;white-space:nowrap;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.place span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.place b::after{content:' -';color:var(--muted);font-weight:400}
.isp{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* plain text, styled like the ISP column. As a coloured badge it read
   as a quality rating and people assumed it explained why a proxy
   did or didn't work. */
.ptype{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act{display:flex;justify-content:flex-end}
.btn.unlock{padding:6px 11px;font-size:12.5px;gap:6px;white-space:nowrap}
.btn.unlock svg{width:13px;height:13px}
/* an unlocked row stays clickable — same round chevron as the
   proxy-type cards on the homepage */
.btn.view{
  padding:6px 7px 6px 13px;font-size:12.5px;gap:8px;white-space:nowrap;
  color:var(--accent);background:var(--panel-2);border-color:var(--line)
}
.btn.view:hover{background:var(--panel-3);border-color:var(--accent)}
.btn.view .chev{
  width:20px;height:20px;flex:0 0 20px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-3);border:1px solid var(--line);transition:transform .15s,border-color .15s
}
.btn.view:hover .chev{transform:translateX(2px);border-color:var(--accent)}
.btn.view .chev svg{width:11px;height:11px;display:block}

.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty svg{width:34px;height:34px;margin-bottom:10px;opacity:.55}
.empty p{margin:0;font-size:13px}

/* ── pagination ──────────────────────────────────────────── */
.pager{display:flex;align-items:center;gap:8px;padding:11px 14px;border-top:1px solid var(--line)}
.pager .info{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-right:auto}
.pager button{
  min-width:32px;height:32px;padding:0 9px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel-2);
  font-family:var(--mono);font-size:12px;color:var(--text-2)
}
.pager button:hover:not(:disabled){background:var(--panel-3);color:var(--text)}
.pager button:disabled{opacity:.4;cursor:default}
.pager button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ── how it works ────────────────────────────────────────── */
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.step:last-child{border-bottom:0}
.step-n{
  width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-3);border:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--accent)
}
.step-t h5{margin:0;font-size:12.6px;font-weight:600}
.step-t p{margin:1px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45}

/* ── request a proxy ─────────────────────────────────────── */
.request .panel-body{display:flex;flex-direction:column;gap:9px;padding:14px}
.request p{margin:0 0 3px;font-size:12.4px;color:var(--text-2);line-height:1.5}
.request input,.request textarea{
  width:100%;padding:8px 11px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  font:inherit;font-size:13px;outline:none;resize:vertical
}
.request textarea{min-height:58px}
.request input:focus,.request textarea:focus{border-color:var(--accent)}
.request input::placeholder,.request textarea::placeholder{color:var(--muted)}

/* ── unlock dialog ───────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;z-index:90;
  background:rgba(8,11,15,.55);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
          backdrop-filter:blur(7px) saturate(.9);
  display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .18s
}
.overlay.open{opacity:1;pointer-events:auto}
.modal{
  width:min(440px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);transform:translateY(8px);transition:transform .18s
}
.overlay.open .modal{transform:none}
.modal-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:14.5px;font-weight:600}
.modal-head .x{margin-left:auto;width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:var(--muted)}
.modal-head .x:hover{background:var(--panel-2);color:var(--text)}
.modal-head .x svg{width:14px;height:14px}
.modal-body{padding:16px}

.target{display:flex;align-items:center;gap:11px;padding:11px;border-radius:var(--r);background:var(--panel-2);border:1px solid var(--line);margin-bottom:14px}
.target .flag{width:34px;height:24px;flex:0 0 34px}

.choices{display:flex;flex-direction:column;gap:10px}
.choice{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2)
}
.choice:hover{border-color:var(--accent);background:var(--panel-3)}
.choice-ico{width:34px;height:34px;flex:0 0 34px;border-radius:var(--r);display:grid;place-items:center;background:var(--panel-3);border:1px solid var(--line);color:var(--accent)}
.choice-ico svg{width:17px;height:17px}
.choice-t{flex:1;min-width:0}
.choice-t b{display:block;font-size:13.5px;font-weight:600}
.choice-t span{display:block;font-size:11.8px;color:var(--muted)}
.choice-arr{color:var(--muted)}
.choice-arr svg{width:14px;height:14px;display:block}

.note{
  display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:10px 12px;border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line);font-size:12px;color:var(--text-2);line-height:1.45
}
.note svg{width:14px;height:14px;flex:0 0 14px;margin-top:2px;color:var(--muted)}

.waitbox{text-align:center}
.waitbox .frame{
  height:190px;border-radius:var(--r);border:1px dashed var(--line);background:var(--panel-2);
  display:grid;place-items:center;color:var(--muted);font-size:12.5px;margin-bottom:14px
}
.count{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-1px}
.count small{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:2px}

.reveal{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.reveal-row{display:flex;align-items:center;gap:10px;background:var(--panel-2);padding:9px 12px}
.reveal-row span{font-family:var(--mono);font-size:9px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);flex:0 0 74px}
.reveal-row b{font-family:var(--mono);font-size:13px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;flex:0 0 auto;
  border-radius:var(--r);border:1px solid var(--line);background:var(--panel-3);
  color:var(--text-2);font-size:11.5px;font-weight:600
}
.mini:hover{color:var(--text);border-color:var(--text-2)}
.mini.copied{color:var(--accent);border-color:var(--accent);background:var(--panel-2)}
.mini svg{width:12px;height:12px;flex:0 0 12px}
.btn.copied{background:var(--panel-3);border-color:var(--accent);color:var(--accent)}

/* small back link at the top of the credentials dialog */
.back-mini{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;
  padding:5px 10px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--panel-2);font-size:12px;font-weight:600;color:var(--text-2)
}
.back-mini:hover{background:var(--panel-3);color:var(--text)}
.back-mini svg{width:12px;height:12px}

/* ── my unlocked proxies, inside the dialog ──────────────────────── */
.my-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-height:340px;overflow-y:auto}
.my-row{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--panel-2);width:100%;text-align:left}
.my-row:hover{background:var(--panel-3)}
.my-row .flag{width:30px;height:21px;flex:0 0 30px}
.my-t{flex:1;min-width:0}
.my-t b{display:block;font-size:12.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my-t span{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my-row .arr{color:var(--muted);flex:0 0 auto}
.my-row .arr svg{width:13px;height:13px;display:block}
.ok-line{display:flex;align-items:center;gap:8px;margin-bottom:13px;font-size:13px;color:var(--accent)}
.ok-line svg{width:16px;height:16px}

/* ── responsive: classic page only ───────────────────────── */
@media (max-width:1400px){
  .countries{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1300px){
  /* the rail moves below and goes two-up, so the grid gets the full width */
  .countries{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1100px){
  .countries{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
  .rows-head{display:none}
  .prow{
    grid-template-columns:1fr auto;gap:8px 12px;
    padding:13px 14px;border-bottom:1px solid var(--line)
  }
  /* location, then ISP, then the type under it — button on the right */
  .prow .place{grid-column:1;grid-row:1}
  .prow .isp{grid-column:1;grid-row:2}
  .prow .ptype{grid-column:1;grid-row:3}
  .prow .act{grid-column:2;grid-row:1 / 4;align-self:center}
}
@media (max-width:860px){
  .countries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .city-pick{margin-left:0;width:100%}
  .city-pick select{flex:1;min-width:0}
  .back{width:100%;justify-content:center}
  /* two tabs stacked read better than two squashed ones */
  .tabs{flex-direction:column;gap:4px}
  .tab{justify-content:flex-start}
  .tab .n{margin-left:auto}
  .bar{gap:9px}
  .summary{width:100%;order:2}
}
@media (max-width:620px){
  .countries{grid-template-columns:1fr}
  .flag{width:38px;height:27px;flex:0 0 38px}
  .crumb .here b{font-size:16px}
    .prow{padding:12px}
  .pager{flex-wrap:wrap;gap:6px}
  .pager .info{width:100%;margin-right:0;order:2}
  .modal-body{padding:14px}
  .reveal-row span{flex:0 0 62px;font-size:8.5px}
  .reveal-row b{font-size:12px}
}


/* Coins are the only way to pay, so the dialog is a single button
   rather than a list of one. */
.choices{grid-template-columns:1fr}
.choices .choice{padding:16px 18px}


/* The answer to a request, where the person is already looking. */
.req-msg{margin:8px 0 0;font-size:12.5px;line-height:1.5;min-height:1px}
.req-msg.good{color:var(--ok,#5ec07f)}
.req-msg.bad{color:var(--bad,#e07b7b)}


/* ══════════════════════════════════════════════════════════════
   IP CHECKER
   ══════════════════════════════════════════════════════════════ */
.page-head h1{font-size:23px;font-weight:650;margin:0 0 6px;letter-spacing:-.4px}
.page-head p{margin:0;color:var(--text-2);font-size:13.5px;line-height:1.6;max-width:62ch}

.ip-panel{padding:20px}
.ip-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ip-head .flag{width:52px;height:37px;flex:0 0 52px}
.ip-main{min-width:0;flex:1 1 240px}
.ip-main .label{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px}
.ip-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ip-row .addr{font-family:var(--mono);font-size:30px;font-weight:600;
  letter-spacing:-1px;line-height:1.15;word-break:break-all}
.ip-place{color:var(--text-2);font-size:14px;margin-top:4px}

dl.facts{margin:0;padding:0}
dl.facts > div{display:grid;grid-template-columns:170px 1fr;gap:16px;
  padding:11px 16px;border-top:1px solid var(--line);font-size:13.5px}
dl.facts > div:first-child{border-top:0}
dl.facts dt{color:var(--text-2)}
dl.facts dd{margin:0;word-break:break-word}
dl.facts dd.unknown{color:var(--muted);font-style:italic}
dl.facts dd.ok{color:var(--ok,#5ec07f)}
dl.facts dd.bad{color:var(--bad,#e07b7b)}
@media (max-width:620px){
  dl.facts > div{grid-template-columns:1fr;gap:2px;padding:10px 14px}
  dl.facts dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
  .ip-row .addr{font-size:23px}
}

.mini{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--text-2)}
.mini:last-child{margin-bottom:0}
.mini b{color:var(--text)}

/* the meter, same as the homepage */
.disguise{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg,12px);padding:18px}
.dg-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dg-top .txt{flex:1 1 240px}
.dg-top .txt b{font-size:14.5px}
.dg-top .txt p{margin:3px 0 0;font-size:13px;color:var(--text-2);line-height:1.55}
.dg-top .shield{width:34px;height:34px;flex:0 0 34px;color:var(--accent)}
.dg-top .shield svg{width:100%;height:100%}
.dg-meter{position:relative;height:7px;margin-top:14px;background:var(--line);
  border-radius:99px;overflow:hidden}
.dg-fill{display:block;height:100%;width:0;border-radius:99px;
  background:var(--ok,#3fb950);transition:width .9s cubic-bezier(.2,.8,.2,1),background-color .4s}
.dg-fill.mid{background:#d9a441}
.dg-fill.low{background:#e0605f}
.dg-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.dg-list li{display:flex;gap:10px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:13px;line-height:1.55}
.dg-list .mark{flex:0 0 16px}
.dg-list .pass .mark{color:var(--ok,#3fb950)}
.dg-list .warn .mark{color:#d9a441}
.dg-list .fail .mark{color:#e0605f}
.dg-list .unknown .mark{color:var(--muted)}
.dg-list b{font-weight:600;display:block}
.dg-list span.why{color:var(--text-2)}
@media (max-width:560px){ .dg-top .btn{width:100%} }


/* ── the globe, beside the address ──────────────────────────
   Same rules as the homepage. Duplicated here rather than pulled
   from home.css so this page loads one stylesheet, not two. */
.globe-box{position:relative;width:100%;aspect-ratio:1/1;max-height:330px;display:grid;place-items:center}
.globe-box{max-width:320px}
.globe-box canvas{
  width:100%;height:100%;display:block;cursor:grab;
  /* pan-y, not none: a vertical swipe scrolls the page as normal and
     only a sideways drag is taken as a rotation. */
  touch-action:pan-y;
}
.globe-hint{
  position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:6px;pointer-events:none;white-space:nowrap
}

.ip-panel{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ip-globe{flex:0 0 240px;max-width:240px}
.ip-globe .globe-box{width:100%;aspect-ratio:1/1}
.ip-panel .ip-head{flex:1 1 280px;min-width:0}

@media (max-width:760px){
  .ip-panel{flex-direction:column;align-items:stretch;gap:14px}
  .ip-globe{flex:0 0 auto;max-width:200px;margin:0 auto}
}



/* ══════════════════════════════════════════════════════════════
   THE RIGHT-HAND CARDS

   These were rendering on top of each other, with the text in two
   narrow overlapping columns. The markup is valid, the stylesheets
   parse, and nothing in either file sets `columns`, `float` or
   `position` on a paragraph — so I could not find the rule causing
   it by reading.

   Rather than guess again, this says outright what these cards
   need. Every property that could produce that rendering is named
   and set back to normal block flow. It is more CSS than a card
   holding two paragraphs should need, but a card that reads
   correctly beats an elegant one that does not.
   ══════════════════════════════════════════════════════════════ */
.rail{
  display:flex; flex-direction:column; gap:14px;
  align-items:stretch; min-width:0;
}
/* no shrinking: each card takes exactly the height its text needs */
.rail > *{ flex:0 0 auto; width:100%; min-width:0 }

.rail .panel{
  display:block; height:auto; min-height:0;
  overflow:visible; position:relative;
}
.rail .panel-head{ display:flex; align-items:center; gap:9px; padding:12px 16px }
.rail .panel-head h3{ margin:0; font-size:13.5px; font-weight:600 }

.rail .panel-body{
  display:block; padding:14px 16px;
  columns:auto; column-count:auto; column-width:auto;
}

.rail .panel-body p{
  display:block; position:static; float:none; clear:none;
  columns:auto; column-count:auto;
  width:auto; max-width:none; height:auto;
  margin:0 0 10px; padding:0;
  font-size:13px; line-height:1.62; color:var(--text-2);
}
.rail .panel-body p:last-child{ margin-bottom:0 }
.rail .panel-body b{ display:inline; font-weight:600; color:var(--text) }

.rail .panel-body .btn{ margin-top:12px }
.rail .panel-body .btn.block{ display:flex; width:100%; margin-top:8px }
.rail .panel-body .btn.block:first-of-type{ margin-top:12px }


/* ══════════════════════════════════════════════════════════════
   CYBER LAYER — the checker's "trace" look
   Scoped to body.cy (checker.html only). No box behind the globe
   and address: they sit on the page and follow light/dark mode.
   The globe block matches the homepage's; the rest is the type.
   All motion stops under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════ */
.cy{--cy:#2ad68d;--cy-2:#38d9f5;--cy-dim:rgba(42,214,141,.12)}
html[data-theme="light"] .cy{--cy:#0f9e62;--cy-2:#0a7f9e;--cy-dim:rgba(15,158,98,.10)}

/* ── header ─────────────────────────────────────────────── */
.cy-kicker{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--cy)
}
.cy-live{width:7px;height:7px;border-radius:50%;background:var(--cy);animation:cyPulse 1.8s infinite}
@keyframes cyPulse{0%{box-shadow:0 0 0 0 rgba(42,214,141,.55)}70%{box-shadow:0 0 0 8px rgba(42,214,141,0)}100%{box-shadow:0 0 0 0 rgba(42,214,141,0)}}
@keyframes cyBlink{50%{opacity:.15}}

/* ── globe + address: the homepage's layout, rule for rule ─ */
.geo{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:26px;align-items:center;padding:4px 2px}
.geo .globe-box{position:relative;width:100%;aspect-ratio:1/1;max-width:none;max-height:330px;display:grid;place-items:center}
.geo .globe-box canvas:active{cursor:grabbing}
.globe-hint svg{width:12px;height:12px}
.geo-main{min-width:0}
.geo-ip{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:4px}
.geo .flag{width:38px;height:27px;flex:0 0 38px;background:var(--panel-2)}
.geo-ip .label{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.geo-ip .addr{font-family:var(--mono);font-size:27px;font-weight:600;letter-spacing:-1px;line-height:1.1}
.geo-ip .addr.unknown{color:var(--muted);font-style:italic}
.geo .copy{width:26px;height:26px;border-radius:var(--r);display:grid;place-items:center;border:1px solid var(--line);background:var(--panel-2);color:var(--muted)}
.geo .copy:hover{color:var(--text)}
.geo .copy svg{width:13px;height:13px}
.geo-place{font-size:16px;font-weight:600;color:var(--text-2);margin-bottom:14px}
.geo-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;margin:0}
.geo-row{display:flex;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.geo-row dt{font-size:12.5px;color:var(--muted);flex:0 0 96px}
.geo-row dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-row dd.ok{color:var(--accent)}
.geo-row dd.bad{color:var(--coral)}
.geo-row dd.unknown{color:var(--muted);font-style:italic}
/* ── data cards: the normal panel, two columns inside ───── */
.cy-grid{display:flex;flex-direction:column;gap:18px}
.cy dl.facts > div{grid-template-columns:150px 1fr;padding:10px 16px}
.cy dl.facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--muted);align-self:center}
.cy dl.facts dd{font-family:var(--mono);font-size:13px}
.cy dl.facts.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cy dl.facts.two > div:nth-child(2){border-top:0}
/* an odd one out spans the row, so there is no half-empty cell */
.cy dl.facts.two > div:last-child:nth-child(odd){grid-column:1 / -1}

/* ── the disguise scan: a segmented meter ───────────────── */
.cy .disguise .txt b{font-size:15px}
.cy .disguise .pct{font-family:var(--mono);color:var(--cy)}
.cy .dg-meter{height:12px;border-radius:3px;background:var(--line);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 3px),transparent calc(5% - 3px) 5%);
          mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 3px),transparent calc(5% - 3px) 5%)}
.cy .dg-list li .mark{font-family:var(--mono);font-weight:700}

.cy .rail .panel-body .btn.block + .btn.block{margin-top:8px}

/* ── small screens ──────────────────────────────────────── */
@media (max-width:860px){
  .geo{grid-template-columns:1fr;gap:14px}
  .geo .globe-box{max-width:260px;margin:0 auto}
}
@media (max-width:620px){
  .geo-ip .addr{font-size:23px}
  .geo-rows{grid-template-columns:1fr}
  .cy dl.facts > div{grid-template-columns:1fr;gap:2px}
  .cy dl.facts.two{grid-template-columns:1fr}
  .cy dl.facts.two > div:nth-child(2){border-top:1px solid var(--line)}
}

@media (prefers-reduced-motion:reduce){
  .cy-live{animation:none}
}

/* ── disguise severity: green only at 100% ─────────────────
   Below that the bar blends from green into the warning colour,
   so the fill itself shows it is not complete, and the shield and
   the number take the same colour. */
body .disguise.sev-ok   .shield, body .disguise.sev-ok   .txt .pct{color:var(--accent)}
body .disguise.sev-warn .shield, body .disguise.sev-warn .txt .pct{color:#d9a441}
body .disguise.sev-bad  .shield, body .disguise.sev-bad  .txt .pct{color:#e0605f}
body .disguise.sev-ok   .dg-fill{background:var(--accent)}
body .disguise.sev-warn .dg-fill{background:linear-gradient(90deg, #3fb950 0%, #9fbf45 45%, #d9a441 100%)}
body .disguise.sev-bad  .dg-fill{background:linear-gradient(90deg, #d9a441 0%, #e0605f 100%)}

/* one straight rule under the page heading, as on the wallet and
   account pages; and no rule under the last check in the list */
.cy .page-head{padding-bottom:22px;border-bottom:1px solid var(--line)}
.dg-list li:last-child{border-bottom:0;padding-bottom:0}