/* ==========================================================================
   VPNFL — iplookup.css
   IP 检测页专属样式:结果卡布局 / 解读卡网格 / 隐私卡 / 复制反馈
   颜色、圆角、阴影一律引用 base.css 的 :root 令牌
   ========================================================================== */

/* 首屏:上浅下深的纸面过渡(只声明纵向内距,横向留白交给 .wrap) */
.geo-hero{
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 100%);
  padding-top:56px;
}

.geo-layout{
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:48px;
  align-items:start;
}
.geo-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.geo-side{display:flex;flex-direction:column;gap:14px;min-width:0}

/* --------------------------------------------------------------------------
   结果卡
   -------------------------------------------------------------------------- */

.geo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.geo-state.is-loading i{background:var(--warn);animation:halo 1.8s ease-in-out infinite}
.geo-state.is-error i{background:var(--error)}
.geo-state.is-error{color:var(--error)}

.geo-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.geo-copy-state{
  font-size:12.5px;
  font-weight:600;
  color:var(--accent-dark);
  min-height:1.3em;
  overflow-wrap:anywhere;
}

/* 复制回落方案用的隐藏输入域 */
.geo-clip{
  position:absolute;
  left:-9999px;
  top:0;
  opacity:0;
  pointer-events:none;
}

.geo-side .ip-note{min-height:1.3em}
.ip-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ip-note a:hover{color:var(--accent-dark)}

/* --------------------------------------------------------------------------
   结果解读卡
   -------------------------------------------------------------------------- */

.geo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:18px;
}
.geo-card{display:flex;flex-direction:column;gap:10px}
.geo-card .geo-tag{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--accent-dark);
}
.geo-card h3{font-size:16.5px}
.geo-card p{font-size:14px;color:var(--muted)}

/* --------------------------------------------------------------------------
   隐私提示卡
   -------------------------------------------------------------------------- */

.geo-privacy{
  display:flex;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}
.geo-privacy-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  min-width:0;
}
.geo-privacy h2{font-size:21px}
.geo-privacy p{font-size:14.5px;color:var(--muted);max-width:72ch}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  .geo-layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .geo-hero{padding-top:36px}
}

@media (max-width:640px){
  .geo-privacy{gap:14px}
  .geo-privacy h2{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  .geo-state.is-loading i{animation:none}
}