/*
 * VerMeuIP — identidade visual e design system (ver docs/design-system.md)
 *
 * Marca: azul-marinho predominante; o gradiente fica so em botao e pequenos detalhes.
 * Tema: segue o sistema; o botao do topo grava a escolha em data-theme="light"|"dark" no <html>.
 * Cada cor existe UMA vez por tema (--l-* claro, --d-* escuro). Ponto de quebra (media query nao aceita var()): 520px.
 */
:root{
  /* marca */
  --primary:#0B1F44;--yellow:#FFB800;--orange:#FF7A00;--red:#FF3B2E;--pink:#E8006D;
  --brand-gradient:linear-gradient(90deg,#FFB800 0%,#FF7A00 35%,#FF3B2E 70%,#E8006D 100%);
  --on-brand:#081429; /* texto sobre o gradiente */

  /* paleta clara */
  --l-bg:#FFFFFF;--l-surface:#F5F7FA;--l-tx:#0B1F44;--l-mut:#6B7280;--l-line:#E3E7EE;
  --l-ac:#0B1F44;--l-btntx:#FFFFFF;--l-ok:#166534;--l-okbg:#DCFCE7;--l-bad:#B42318;--l-badbg:#FEE4E2;
  /* paleta escura */
  --d-bg:#081429;--d-surface:#102344;--d-tx:#FFFFFF;--d-mut:#A8B3C5;--d-line:#1E3560;
  --d-ac:#FFB800;--d-btntx:#081429;--d-ok:#4ADE80;--d-okbg:#12301F;--d-bad:#FDA29B;--d-badbg:#3B1A17;

  /* alias usados pelos componentes; padrao = claro (navegadores sem light-dark()) */
  --background:var(--l-bg);--surface:var(--l-surface);--text:var(--l-tx);--muted:var(--l-mut);--line:var(--l-line);
  --ac:var(--l-ac);--btntx:var(--l-btntx);--ok:var(--l-ok);--okbg:var(--l-okbg);--bad:var(--l-bad);--badbg:var(--l-badbg);

  /* espacamento */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:40px;--sp-8:48px;--sp-9:64px;
  /* tipografia */
  --fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:20px;--fs-display:36px;
  /* raio, sombra, movimento */
  --r-md:8px;--r-lg:12px;--r-pill:99px;
  --sh-toast:0 6px 24px rgb(0 0 0 / .25);
  --sh-cta:0 8px 24px rgb(232 0 109 / .22);
  --t-fast:.15s;
}
@supports (color: light-dark(#000,#fff)){
  :root{
    color-scheme:light dark;
    --background:light-dark(var(--l-bg),var(--d-bg));--surface:light-dark(var(--l-surface),var(--d-surface));
    --text:light-dark(var(--l-tx),var(--d-tx));--muted:light-dark(var(--l-mut),var(--d-mut));
    --line:light-dark(var(--l-line),var(--d-line));--ac:light-dark(var(--l-ac),var(--d-ac));
    --btntx:light-dark(var(--l-btntx),var(--d-btntx));--ok:light-dark(var(--l-ok),var(--d-ok));
    --okbg:light-dark(var(--l-okbg),var(--d-okbg));--bad:light-dark(var(--l-bad),var(--d-bad));
    --badbg:light-dark(var(--l-badbg),var(--d-badbg));
  }
  :root[data-theme="light"]{color-scheme:light}
  :root[data-theme="dark"]{color-scheme:dark}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--background);color:var(--text);line-height:1.5}
a{color:var(--ac)}

/* topo: faixa da marca (detalhe em gradiente) + seletor de tema */
.topo{display:flex;justify-content:flex-end;padding:var(--sp-4) var(--sp-5);border-top:4px solid transparent;border-image:var(--brand-gradient) 1}
.tema{display:inline-flex;align-items:center;gap:var(--sp-2);background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast)}
.tema:hover{border-color:var(--text);color:var(--text)}

/* logo: a versao escura aparece no tema escuro */
.marca{display:inline-block;line-height:0}
.logo{display:block;width:168px;height:auto;margin:0 auto}
.logo-escuro{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-claro{display:none}
  :root:not([data-theme="light"]) .logo-escuro{display:block}
}
:root[data-theme="dark"] .logo-claro{display:none}
:root[data-theme="dark"] .logo-escuro{display:block}
:root[data-theme="light"] .logo-escuro{display:none}

/* topo da pagina: IP e velocidade */
.hero{max-width:720px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-8);text-align:center}
.rotulo{margin:var(--sp-6) 0 0;font-size:var(--fs-lg);font-weight:500;color:var(--muted)}
.rotulo span{display:block;font-size:var(--fs-md);font-weight:400}
.ip-address{font-size:clamp(36px,7vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:var(--sp-2) 0 var(--sp-3);color:var(--text)}
.muted{color:var(--muted);margin:var(--sp-1) 0}.small{font-size:var(--fs-sm)}
.btn-copiar{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-md);font-weight:600;cursor:pointer;margin-bottom:var(--sp-3);transition:border-color var(--t-fast)}
.btn-copiar:hover{border-color:var(--text)}

/* botao principal: teste de velocidade (gradiente oficial) */
.velocidade{margin-top:var(--sp-6)}
.btn-speed{background:var(--brand-gradient);color:var(--on-brand);border:0;border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-6);font-size:var(--fs-xl);font-weight:700;cursor:pointer;box-shadow:var(--sh-cta);transition:filter var(--t-fast),transform var(--t-fast)}
.btn-speed:hover{filter:brightness(1.05)}
.btn-speed:active{transform:translateY(1px)}
.btn-speed:disabled{opacity:.7;cursor:progress}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-top:var(--sp-6);text-align:center}
.metrics .big{font-size:var(--fs-display);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.metrics small{font-size:var(--fs-md);font-weight:600;color:var(--muted)}

/* botao secundario dos formularios, chip */
.btn{background:var(--ac);color:var(--btntx);border:0;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);font-size:var(--fs-lg);font-weight:600;cursor:pointer;transition:opacity var(--t-fast)}
.btn:disabled{opacity:.6;cursor:progress}
.chip{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);cursor:pointer;margin-right:var(--sp-1)}
.tema:focus-visible,.btn:focus-visible,.btn-copiar:focus-visible,.btn-speed:focus-visible,.chip:focus-visible,.outras-nav button:focus-visible,.copiavel:focus-visible,#ptr:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* outras ferramentas: recolhidas ate o clique */
.outras{max-width:720px;margin:0 auto;padding:var(--sp-6) var(--sp-4) 0;border-top:1px solid var(--line);text-align:center}
.outras-titulo{margin:0 0 var(--sp-3);font-size:var(--fs-sm);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.outras-nav{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center}
.outras-nav button{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-md);font-weight:500;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.outras-nav button:hover{border-color:var(--text)}
.outras-nav button[aria-selected="true"]{background:var(--text);color:var(--background);border-color:var(--text)}
.content{text-align:left;padding:var(--sp-5) 0 0}
.panel h2{margin:0 0 var(--sp-1);font-size:var(--fs-xl)}
.row{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0}
input,select{padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);font-size:var(--fs-lg);background:var(--background);color:var(--text);min-width:0}
input{flex:1 1 220px}input.porta{flex:0 0 110px}

/* tabela, etiqueta, erro */
table{border-collapse:collapse;width:100%;margin-top:var(--sp-3);font-size:var(--fs-md)}
td,th{text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);overflow-wrap:anywhere}
th{color:var(--muted);font-weight:500;font-size:var(--fs-xs);text-transform:uppercase}
.tag{padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-xs);background:var(--okbg);color:var(--ok)}
.tag.bad{background:var(--badbg);color:var(--bad)}
.erro{margin-top:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--badbg);color:var(--bad);font-size:var(--fs-md);text-align:left}

/* rodape enxuto */
.rodape{margin-top:var(--sp-9);padding:var(--sp-5) var(--sp-4) var(--sp-6);border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:var(--fs-sm)}
.rodape p{margin:0 auto var(--sp-2);max-width:720px;line-height:1.6}
.rodape a{color:var(--muted)}.rodape a:hover{color:var(--text)}

/* clique para copiar e aviso */
.copiavel,[title="Clique para copiar"]{cursor:pointer}
.ip-address.copiavel:hover,.big.copiavel:hover{color:var(--ac)}
td.copiavel:hover{background:var(--surface)}
.aviso{position:fixed;left:50%;bottom:var(--sp-5);transform:translateX(-50%);background:var(--text);color:var(--background);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);font-size:var(--fs-md);box-shadow:var(--sh-toast);max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:50}
[hidden]{display:none!important}

@media (max-width:520px){
  .topo{padding:var(--sp-3) var(--sp-4)}
  .hero{padding-bottom:var(--sp-7)}
  .btn-speed{width:100%}
  .metrics{grid-template-columns:1fr 1fr}
}

/* paginas de ferramenta: texto de apoio, links entre ferramentas */
.topo-pagina{justify-content:space-between;align-items:center}
.topo-pagina .logo{width:72px;margin:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pagina{max-width:720px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-8)}
.pagina h1{margin:0 0 var(--sp-3);font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.lead{margin:0 0 var(--sp-5);font-size:var(--fs-xl);color:var(--muted);line-height:1.45}
.pagina .velocidade{margin:var(--sp-5) 0 var(--sp-7);text-align:center}
.pagina .panel{margin:var(--sp-4) 0 var(--sp-7)}
.texto h2,.relacionadas h2{margin:var(--sp-7) 0 var(--sp-3);font-size:var(--fs-xl)}
.texto p,.texto li,.texto dd{line-height:1.65}
.texto dt{margin-top:var(--sp-4);font-weight:700}
.texto dd{margin:var(--sp-1) 0 0}
.texto ul{padding-left:var(--sp-5)}
.relacionadas{border-top:1px solid var(--line);margin-top:var(--sp-8)}
.relacionadas ul{list-style:none;padding:0;margin:0}
.relacionadas li{padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.relacionadas li a{font-weight:600;margin-right:var(--sp-2)}
.rodape-nav{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);justify-content:center;margin:0 auto var(--sp-4)}

/* quem pede menos movimento nao recebe transicoes nem rolagem suave */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}