/* Component layer: one semantic contract shared by PC, tablet and mobile. */
html{scrollbar-width:thin;scrollbar-color:#b7c6d8 transparent}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:8px;height:8px}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background:#c5d2e2;border:2px solid #f5f7fb;border-radius:8px}
.hero{position:relative}
.lang-switch{display:flex;justify-content:flex-end;gap:2px;position:absolute;top:12px;right:0;z-index:4;margin:0;padding:3px;border:1px solid #d5e2f2;border-radius:999px;background:#fff;box-shadow:0 6px 16px #18354f12}
.lang-switch button{min-height:28px;padding:3px 11px;border:0;border-radius:999px;background:transparent;color:var(--text);font-size:12px;font-weight:750;line-height:1.2;box-shadow:none}
.lang-switch button[aria-pressed="true"]{background:#1d4f91;color:#fff}
html { scroll-behavior: smooth; }
body { min-width: 320px; overflow-x: hidden; }
.page { min-height: 100vh; overflow-x: clip; }
.container { width: min(var(--ui-content-max), calc(100% - (var(--ui-gutter) * 2))); }
.hero h1, .section-head h2, .section-head p { text-wrap: balance; }
.hero h1 { max-inline-size: 100%; }
.hero h1 > span, .version { vertical-align: middle; }
.card { border-radius: var(--ui-radius-card); box-shadow: var(--ui-shadow-card); }
.service, .ip-card, .metric, .project, .stats > div, .check-label, .policy label, .dropdown-trigger, .drop { border-radius: var(--ui-radius-control); }
.service, .ip-card, .metric, .project, .stats > div { min-inline-size: 0; }
.metric strong, .ip-values b, .project, .stats strong { overflow-wrap: anywhere; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { box-shadow: var(--ui-focus); }
.table-wrap { overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.table-wrap:focus-within { box-shadow: var(--ui-focus); }
.dropdown-menu { overscroll-behavior: contain; }
.link-result input { text-overflow: ellipsis; }
#analyze,#publish{font:inherit;font-size:14px;font-weight:700;line-height:1.2;letter-spacing:.01em;text-align:center;white-space:nowrap}
#publish{display:inline-flex;align-items:center;justify-content:center}
#analyze[aria-busy=true]{display:inline-flex;align-items:center;justify-content:center;gap:9px;opacity:1;cursor:wait}
#analyze[aria-busy=true]::before{content:'';box-sizing:border-box;display:block;flex:0 0 15px;width:15px;height:15px;margin:0;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:analyze-spin .72s linear infinite;animation-play-state:running;transform-origin:center;will-change:transform}
@keyframes analyze-spin{to{transform:rotate(360deg)}}

.results-selection{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(720px,100%);margin:0 auto;overflow-anchor:none}
.results-selection-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.results-selection #selection-note{width:100%;min-height:3.2em;margin:0;text-align:center;line-height:1.55}
#selection-note.hidden{display:block!important;visibility:hidden}
.table-wrap,#results-note{overflow-anchor:none}
.use-filtered-label{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:168px;padding:8px 16px 10px;line-height:1.35;text-align:center}
.use-filtered-label input{flex:none}
.analysis-toolbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px;max-width:100%}
.analysis-toolbar .notice{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:32px;margin:0;padding:5px 12px;border-radius:999px;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.analysis-toolbar .notice.hidden{display:none}
.analysis-toolbar .plugin{flex:0 0 auto;margin:0;min-height:32px;white-space:nowrap}
.analysis-toolbar a.plugin-download{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 17px;border:1px solid var(--border);border-radius:10px;background:#fff;color:inherit;font-weight:650;line-height:1.2;text-decoration:none}
.analysis-toolbar a.plugin-download:hover{text-decoration:none;border-color:#9ebcde;background:#f8fbff}
.analysis-toolbar a.plugin-download[hidden]{display:none}
@media (max-width:1024px),
       (min-width:1025px) and (max-width:1400px) and (any-pointer:coarse){
  .analysis-toolbar a.plugin-download{display:none!important}
}

/* V4 Stage 1 family status is a dedicated presentation component. */
.family-status-row{display:flex;justify-content:center;gap:10px;margin:10px auto 0;max-width:900px}
.family-status{display:inline-flex!important;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:6px 12px;border:1px solid #d7e1ef;border-radius:999px;background:#f7f9fc;color:#536172;font-size:12px;line-height:1;cursor:pointer}
.family-status span{font-weight:700}.family-status strong{font-size:12px;font-weight:700}.family-status[aria-pressed="true"]{box-shadow:0 0 0 2px rgba(40,100,180,.12)}
.family-status.normal{background:#eef8f1;border-color:#cde8d5;color:#26733b}.family-status.low{background:#f3f8ed;border-color:#dae8c7;color:#587423}.family-status.medium{background:#fff7e6;border-color:#f0d49a;color:#946200}.family-status.high{background:#fff0f0;border-color:#edc4c4;color:#a83a3a}.family-status.detecting{background:#eef5ff;border-color:#cfe0f6;color:#3d6fa5}.family-status.failed{background:#fff0f0;border-color:#edc4c4;color:#a83a3a}.family-status.unknown{background:#f7f9fc;color:#697586}
.family-status[hidden]{display:inline-flex!important}

/* IPv4 and IPv6 are the first two node controls and share the project visual language. */
.node-family-project.active{border-color:#c5daf6;background:#f4f9ff;color:var(--primary)}
.subscription-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(680px,100%);margin:0 auto 10px;padding:0;background:transparent;border:0;border-radius:0}
.subscription-filters .subscription-field{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0}
.subscription-filters label,.filter-field>label{color:var(--muted);font-size:12px;font-weight:650;text-align:center}
.subscription-filters select,.subscription-filters .select-mirror{width:100%;min-width:0}
.filters .dropdown-trigger,.subscription-filters .dropdown-trigger{position:relative;justify-content:center;text-align:center;padding-inline:28px}
.filters .dropdown-trigger .selected-label,.subscription-filters .dropdown-trigger .selected-label{flex:1 1 auto;width:100%;text-align:center}
.filters .dropdown-trigger>span[aria-hidden="true"],.subscription-filters .dropdown-trigger>span[aria-hidden="true"]{position:absolute;right:10px}
.subscription-filters select{min-height:36px;padding:5px 28px 5px 10px;font-size:13px;font-weight:650;background:#fff;border-radius:12px}
@media (max-width:1024px),
       (min-width:1025px) and (max-width:1400px) and (any-pointer:coarse){
  .subscription-field:has(#analysis-proxy) .dropdown-trigger,
  .subscription-field:has(#analysis-fraud) .dropdown-trigger{pointer-events:none;opacity:.55;cursor:not-allowed}
}
.publish-status{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 28px;margin:12px 0 0}
.publish-status>span{min-width:0;overflow-wrap:anywhere;text-align:center}

@media (max-width: 1119px) and (min-width: 700px) {
  .container { width: calc(100% - (var(--ui-gutter-tablet) * 2)); }
  .publish-status{gap:7px 22px}
}
@media (min-width: 700px) {
  .hero h1 { padding-inline: 96px; }
}
@media (max-width: 699px) {
  .container { width: calc(100% - (var(--ui-gutter-mobile) * 2)); }
  .lang-switch{top:8px;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:3px}
  .lang-switch button{min-height:30px;min-width:34px;padding:4px 7px;font-size:11px}
  .hero h1 { max-inline-size: 20ch; margin-inline: auto; }
  .version { display: table; margin: var(--ui-space-2) auto 0; }
  .section-head h2 { max-inline-size: 18ch; margin-inline: auto; }
  .section-head p { max-inline-size: 42ch; }
  .metric strong { max-inline-size: 100%; }
  .table-wrap { border-radius: var(--ui-radius-control); }
  .link-result input { min-width: 0; }
  .family-status-row{gap:8px;margin-top:8px}.family-status{flex:1;max-width:150px;min-height:40px;padding:8px 10px}
  .subscription-filters{grid-template-columns:1fr;width:min(100%,430px);margin-bottom:12px;padding:0}
  .use-filtered-label{width:min(100%,280px);min-height:64px}
  .analysis-toolbar .notice{white-space:normal;max-width:100%}
  .publish-status{gap:6px 16px}
  .analysis-toolbar{gap:7px;margin-top:10px}.analysis-toolbar .notice{padding:5px 8px;font-size:11px}.analysis-toolbar .plugin{padding-inline:9px;font-size:11px}
  #analyze,#publish{font-size:14px;font-weight:720;line-height:1.15;letter-spacing:0}
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #analyze[aria-busy=true]::before{animation:analyze-spin 1s linear infinite!important;animation-play-state:running!important;} }
.project.stage-locked,.project.stage-locked:hover{cursor:not-allowed;background:#f5f7fa;border-color:#e1e6ed;color:#8b97a7;box-shadow:none;transform:none;opacity:.82}
.project span,.project small{white-space:nowrap}.project.stage-locked small{color:#98a4b3}
.policy label{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.policy.disabled label,.policy.disabled input{pointer-events:none}
.dropdown-trigger.stage-locked,.dropdown-trigger.stage-locked:hover,.policy label.stage-locked{cursor:not-allowed;background:#f5f7fa;border-color:#e1e6ed;color:#8b97a7;box-shadow:none;opacity:.82}
.dropdown-option.stage-locked,.dropdown-option.stage-locked:hover,.dropdown-option.stage-locked:focus{cursor:not-allowed;background:#f7f8fa;color:#98a4b3;font-weight:500}