:root {
  --bg: #f4f6fb;
  --panel: #ffffff;
  --text: #171a21;
  --muted: #7d8597;
  --line: #e7eaf0;
  --blue: #1769ff;
  --blue-weak: #edf3ff;
  --green: #23b978;
  --green-weak: #e8f8f1;
  --orange: #ff7317;
  --orange-weak: #fff1e7;
  --red: #df3b45;
  --red-weak: #fdecee;
  --shadow: 0 14px 36px rgba(25, 36, 64, .08);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 15% 0%, #eef4ff 0, transparent 28%), var(--bg);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.app-shell { max-width: 1500px; margin: 0 auto; padding: 28px 24px 22px; }
.topbar { display:flex; align-items:center; gap:20px; margin-bottom:20px; }
.brand-row { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.brand-mark { display:block; width:42px; height:42px; border-radius:11px; object-fit:contain; flex:0 0 auto; }
h1 { margin:0; font-size:28px; letter-spacing:-.5px; }
.topbar p { flex:1 1 auto; min-width:0; margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.privacy-pill { flex:0 0 auto; margin-left:auto; padding:9px 13px; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:12px; color:#667085; box-shadow:0 4px 14px rgba(25,36,64,.04); white-space:nowrap; }
.layout { display:grid; grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr); gap:20px; align-items:start; }
.right-column { display:grid; gap:20px; }
.panel { background:var(--panel); border:1px solid rgba(225,229,238,.9); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; }
.layout, .right-column, .panel, .panel-title > div { min-width:0; }
.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:22px; }
.panel-title.compact { margin-bottom:16px; align-items:center; }
.eyebrow { display:block; text-transform:uppercase; letter-spacing:.1em; color:#9aa2b2; font-size:11px; font-weight:800; margin-bottom:4px; }
h2 { margin:0; font-size:22px; letter-spacing:-.3px; }
.ghost-btn, .tiny-copy, .copy-btn, .icon-btn { border:1px solid var(--line); background:#fff; color:#4c5568; border-radius:10px; }
.ghost-btn { padding:8px 12px; }
.form-grid { display:grid; gap:18px; }
.two-col { grid-template-columns:repeat(2, minmax(0,1fr)); }
.field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.field > span, .field > label { font-size:13px; font-weight:700; color:#333a49; }
.field > span em, .field > label em { font-style:normal; color:#a1a7b3; font-weight:600; margin-left:5px; }
input, select {
  width:100%; min-width:0; height:50px; border:1px solid #dfe3eb; background:#fff; border-radius:11px; padding:0 14px; color:#20242d; outline:none; transition:.18s ease;
}
input:focus, select:focus { border-color:#4d87ff; box-shadow:0 0 0 4px rgba(23,105,255,.11); }
input::placeholder { color:#aab0bc; }
.location-control { position:relative; min-width:0; }
.location-control input { padding-right:48px; }
.location-toggle { position:absolute; top:7px; right:7px; width:36px; height:36px; border:0; border-radius:8px; color:#65728a; background:#f5f7fa; font-size:18px; }
.location-toggle:hover, .location-toggle[aria-expanded="true"] { color:var(--blue); background:var(--blue-weak); }
.location-toggle:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.location-menu { position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:30; max-height:260px; overflow-y:auto; overscroll-behavior:contain; border:1px solid #dfe5ef; border-radius:11px; padding:5px; background:#fff; box-shadow:0 10px 28px rgba(25,36,64,.14); }
.location-option { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:38px; padding:9px 10px; border:0; border-radius:7px; background:#fff; color:#333a49; text-align:left; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.location-option small { flex:0 0 auto; color:#8b96a9; font-size:11px; }
.location-option:hover, .location-option.is-active { color:#1958c4; background:#edf3ff; }
.location-option[aria-selected="true"] { font-weight:700; color:#1958c4; }
.location-message { padding:10px; font-size:12px; line-height:1.5; color:#8993a3; }
.location-hint { min-height:17px; margin:0; color:#929bab; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.location-hint.is-fallback { color:#9a7540; }
.stepper { display:grid; grid-template-columns:50px minmax(0,1fr) 50px; gap:8px; }
.stepper button { height:50px; border:1px solid #dfe3eb; background:#fff; border-radius:11px; font-size:24px; color:#4a5260; }
.stepper input { text-align:center; font-size:18px; padding:0; }
.tip-box { margin-top:18px; padding:13px 15px; background:#f8f9fc; border:1px solid #edf0f5; border-radius:12px; color:#737b8b; line-height:1.65; font-size:13px; }
.divider { height:1px; background:var(--line); margin:22px 0; }
.password-wrap, .sid-wrap { position:relative; }
.password-wrap input, .sid-wrap input { padding-right:50px; }
.icon-btn { position:absolute; right:7px; top:7px; height:36px; min-width:36px; padding:0 9px; border:0; background:#f5f7fa; }
.muted-field { opacity:.48; }
.main-actions { display:flex; gap:12px; margin-top:22px; }
.primary-btn { border:0; border-radius:11px; font-weight:800; transition:.18s ease; padding:13px 18px; background:#111827; color:#fff; }
.primary-btn:hover { transform:translateY(-1px); }
.result-actions { display:flex; align-items:center; flex:0 0 auto; gap:8px; }
.result-heading { flex-wrap:wrap; }
.result-heading .result-actions { margin-left:auto; max-width:100%; }
.result-action-btn { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:34px; min-width:68px; padding:0 12px; border:0; border-radius:9px; font-size:14px; font-weight:700; line-height:1; white-space:nowrap; transition:background .18s ease; }
.switch-btn { background:#edf3ff; color:#2864c5; }
.switch-btn:hover:not(:disabled) { background:#dfeaff; }
.success-btn { background:var(--green-weak); color:#128356; }
.success-btn:hover:not(:disabled) { background:#d9f3e6; }
.status-dot { display:inline-flex; align-items:center; gap:6px; color:#8a93a3; background:#f5f6f8; border-radius:999px; padding:7px 10px; font-size:12px; font-weight:700; }
.status-dot::before { content:""; width:7px; height:7px; border-radius:50%; background:#adb4c0; }
.status-dot.good { color:#16875c; background:#e9f8f1; }.status-dot.good::before{background:#20b477;}
.status-dot.bad { color:#b8323a; background:#fdecee; }.status-dot.bad::before{background:#dc3f48;}
.proxy-preview { display:grid; gap:18px; min-width:0; margin-top:18px; }
.proxy-preview-item { min-width:0; }
.proxy-preview-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.small-label { color:var(--muted); font-size:12px; font-weight:700; }
.proxy-preview code { display:block; font-size:12px; line-height:1.7; }
.copy-btn { flex:0 0 auto; padding:6px 10px; font-size:12px; background:#f8f9fb; }
.copy-btn:hover { background:#eef1f5; }
.proxy-preview code, .detail-grid b, .result-row strong, .last-test, .error-state p { min-width:0; white-space:normal; overflow-wrap:anywhere; word-break:break-all; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:0; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.detail-grid > div { background:#fff; padding:12px 13px; min-width:0; }
.detail-grid .wide { grid-column:span 2; }
.detail-grid span, .meta-grid span { display:block; color:#9aa2b1; font-size:11px; margin-bottom:4px; }
.detail-grid b { display:block; font-size:12px; overflow-wrap:anywhere; }
.tiny-copy { padding:6px 9px; font-size:11px; }
.empty-state, .loading-state, .error-state { min-height:330px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px dashed #dce1e9; border-radius:14px; background:#fbfcfe; padding:30px; }
.empty-state .radar { width:72px; height:72px; display:grid; place-items:center; background:#edf3ff; color:#3d78f5; border-radius:50%; font-size:40px; }
.empty-state h3 { margin:14px 0 5px; }.empty-state p { margin:0; color:#8c94a3; max-width:380px; line-height:1.6; font-size:13px; }
.loading-state p { color:#737d8e; }
.spinner { width:38px; height:38px; border:4px solid #e6ebf4; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-state { color:#a52d35; background:#fffafb; border-color:#f2cdd0; }
.error-state p { color:#95545a; max-width:450px; line-height:1.6; }
.hidden { display:none !important; }
.ip-result { padding:6px 2px 0; }
.result-row { display:grid; grid-template-columns:32px 118px minmax(0,1fr); align-items:center; gap:4px; padding:10px 2px; }
.hero-row strong { font-family:Georgia, "Times New Roman", serif; font-size:20px; font-weight:600; }
.result-label { color:#3d424d; font-size:16px; }
.result-icon { font-size:20px; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace !important; }
.risk-badge { display:inline-flex; align-items:center; min-height:36px; padding:6px 11px; border-radius:9px; color:#fff; font-family:Inter, sans-serif; font-size:16px; font-weight:800; }
.risk-badge.low { background:var(--green); }.risk-badge.medium { background:var(--orange); }.risk-badge.high { background:var(--red); }.risk-badge.unknown { background:#8c95a5; }
.risk-details { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-width:0; }
.risk-link { color:var(--blue); font-size:13px; text-decoration:none; white-space:nowrap; }
.risk-link:hover, .risk-link:focus-visible { text-decoration:underline; }
.tag-row { align-items:start; }.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag { display:inline-flex; padding:6px 10px; border-radius:9px; background:#eef1f5; color:#626b7a; font-size:12px; font-weight:800; }
.tag.good { background:#42c993; color:#fff; }.tag.warn { background:#ffecde; color:#bd5c1e; }
.meta-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:13px; }
.meta-grid > div { background:#f8f9fb; border-radius:10px; padding:10px; min-width:0; }
.meta-grid b { font-size:12px; overflow-wrap:anywhere; }
.last-test { color:#9aa2b0; font-size:11px; margin-top:13px; text-align:right; }
footer { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:18px; color:#9ba2b0; font-size:12px; }
@media (max-width: 1050px) { .layout { grid-template-columns:minmax(0,1fr); } .right-column { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 820px) { .right-column { grid-template-columns:minmax(0,1fr); } .topbar { flex-wrap:wrap; gap:12px; } .topbar p { order:3; flex-basis:100%; } }
@media (max-width: 620px) { .app-shell { padding:14px 10px 18px; } .panel { padding:17px; border-radius:15px; } .two-col { grid-template-columns:1fr; } .detail-grid .wide { grid-column:auto; } .detail-grid { grid-template-columns:1fr; } .main-actions { flex-direction:column; } .meta-grid { grid-template-columns:repeat(2,1fr); } .result-row { grid-template-columns:28px 105px minmax(0,1fr); } .hero-row strong { font-size:16px; } .result-label { font-size:14px; } .privacy-pill { padding:7px 9px; font-size:11px; } }

@media (max-width: 400px) { .result-heading { gap:8px; } .result-heading h2 { font-size:18px; } .result-heading .eyebrow { font-size:10px; letter-spacing:.06em; } }