/* ========== IP968 组件：头部导航、卡片、按钮、表格、信息块 ========== */

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--c-border);
  height: var(--header-h);
}
[data-theme="dark"] .site-header { background: rgba(13,17,23,.8); }
.header-inner {
  max-width: var(--maxw); margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
}
.brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.12rem; color: var(--c-text); }
.brand:hover { text-decoration:none; }
.brand-logo { display:flex; }
.main-nav { flex: 1; }
.nav-list {
  list-style: none; margin:0; padding:0; display:flex; gap:2px; align-items:center;
  flex-wrap: wrap;
}
.nav-list > li { position: relative; }
.nav-list a {
  display:block; padding: 8px 11px; border-radius: var(--radius-sm);
  color: var(--c-text-soft); font-size: .92rem; font-weight:500;
}
.nav-list a:hover { background: var(--c-bg-mute); color: var(--c-text); text-decoration:none; }
.nav-list a.is-active { color: var(--c-brand); background: var(--c-brand-soft); }
.has-dropdown > a::after { font-size:.7em; opacity:.7; }
.dropdown {
  position:absolute; top: 100%; left:0; min-width: 168px;
  list-style:none; margin:6px 0 0; padding:6px; background: var(--c-bg);
  border:1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-2);
  opacity:0; visibility:hidden; transform: translateY(-6px); transition: all .15s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity:1; visibility:visible; transform: translateY(0); }
.dropdown li a { padding:7px 10px; border-radius: var(--radius-sm); white-space:nowrap; }
.header-actions { display:flex; align-items:center; gap:6px; }
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius: var(--radius-sm); border:1px solid var(--c-border);
  background: var(--c-bg); color: var(--c-text-soft); cursor:pointer; font-size:.85rem; font-weight:600;
  transition: all .15s;
}
.icon-btn:hover { background: var(--c-bg-mute); color: var(--c-text); }
.nav-toggle { display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span { width:20px; height:2px; background: var(--c-text); border-radius:2px; transition:.2s; }

/* ---------- Hero ---------- */
.hero { text-align:center; padding: 48px 0 32px; }
.hero h1 { margin-top:0; font-size: 2.4rem; letter-spacing:-.5px; }
.hero p { color: var(--c-text-soft); font-size:1.06rem; max-width: 720px; margin: 12px auto 0; }

/* ---------- Feature grid ---------- */
.feature-grid {
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin: 24px 0;
}
.feature-card {
  display:block; border:1px solid var(--c-border); border-radius: var(--radius);
  padding:20px; background: var(--c-bg); box-shadow: var(--shadow-1);
  transition: all .18s; color: var(--c-text);
}
.feature-card:hover { text-decoration:none; border-color: var(--c-brand); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.feature-card .fc-icon { font-size:1.7rem; margin-bottom:8px; }
.feature-card h3 { margin:.2em 0 .3em; font-size:1.02rem; border:none; padding:0; }
.feature-card p { margin:0; font-size:.85rem; color: var(--c-text-soft); }
.feature-card.disabled { opacity:.62; }
.feature-card.disabled .fc-tag { display:inline-block; font-size:.68rem; padding:1px 6px; border-radius:4px; background:var(--c-bg-mute); color:var(--c-text-mute); margin-left:6px; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:9px 18px; border-radius: var(--radius-sm); border:1px solid var(--c-border);
  background: var(--c-bg-soft); color: var(--c-text); font-size:.92rem; font-weight:550;
  transition: all .15s;
}
.btn:hover { border-color: var(--c-brand); color: var(--c-brand); text-decoration:none; }
.btn-primary { background: var(--c-brand); border-color: var(--c-brand); color:#fff; }
.btn-primary:hover { filter: brightness(1.08); color:#fff; }
.btn-sm { padding:5px 12px; font-size:.82rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- Panels / result blocks ---------- */
.panel {
  border:1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-bg); padding: 22px; margin: 16px 0; box-shadow: var(--shadow-1);
}
.panel-title { font-weight:650; font-size:1.05rem; margin:0 0 14px; display:flex; align-items:center; gap:8px; }

.kv-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--c-border); border:1px solid var(--c-border); border-radius: var(--radius-sm); overflow:hidden; }
.kv-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.kv { background: var(--c-bg); padding:12px 14px; }
.kv .k { font-size:.78rem; color: var(--c-text-mute); margin-bottom:3px; text-transform: uppercase; letter-spacing:.03em;}
.kv .v { font-size:.96rem; font-weight:550; word-break: break-all; }
.kv .v.mono { font-family: var(--mono); }

/* risk badge */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius: 20px; font-size:.8rem; font-weight:600; }
.badge .dot { width:8px; height:8px; border-radius:50%; background: currentColor; }
.badge.low { color: var(--c-green); background: rgba(63,185,80,.12); }
.badge.mid { color: var(--c-yellow); background: rgba(210,153,34,.12); }
.badge.high { color: var(--c-orange); background: rgba(219,109,40,.14); }
.badge.crit { color: var(--c-red); background: rgba(248,81,73,.14); }
.badge.neutral { color: var(--c-text-soft); background: var(--c-bg-mute); }

/* score bar */
.score-bar { height: 8px; border-radius: 4px; background: var(--c-bg-mute); overflow:hidden; margin-top:6px; }
.score-bar > i { display:block; height:100%; border-radius:4px; }

/* info / callout */
.callout {
  border-left: 3px solid var(--c-brand); background: var(--c-brand-soft);
  padding: 12px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 14px 0; font-size:.92rem;
}
.callout.warn { border-color: var(--c-yellow); background: rgba(210,153,34,.1); }
.callout.danger { border-color: var(--c-red); background: rgba(248,81,73,.1); }
.callout.tip { border-color: var(--c-green); background: rgba(63,185,80,.1); }

/* tag chip */
.chip { display:inline-block; padding:2px 9px; border-radius:20px; font-size:.78rem; background: var(--c-bg-mute); color: var(--c-text-soft); border:1px solid var(--c-border); }
.chip.on { background: rgba(63,185,80,.12); color: var(--c-green); border-color: transparent; }

/* spinner */
.spinner { width:16px; height:16px; border:2px solid var(--c-border); border-top-color: var(--c-brand); border-radius:50%; animation: spin .7s linear infinite; display:inline-block; vertical-align:-2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { color: var(--c-text-mute); }

/* form */
.field { margin-bottom: 14px; }
.field label { display:block; font-size:.85rem; color: var(--c-text-soft); margin-bottom:5px; }
.input {
  width:100%; padding:9px 12px; border:1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-bg); color: var(--c-text); font-size:.95rem; font-family: var(--font);
}
.input:focus { outline:none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }
textarea.input { min-height: 90px; resize: vertical; }

/* section heading anchor */
.section { margin: 28px 0; }
.section h2 { margin-top:0; }

/* transparency section */
.transparency { background: var(--c-bg-soft); border:1px solid var(--c-border); border-radius: var(--radius); padding: 26px; margin: 30px 0; text-align:center; }

/* footer */
.site-footer { border-top: 1px solid var(--c-border); background: var(--c-bg-soft); }
.footer-inner { max-width: var(--maxw); margin:0 auto; padding: 22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color: var(--c-text-mute); font-size:.85rem; }

/* page toc */
.toc { border-left: 2px solid var(--c-border); padding-left:16px; margin: 10px 0; font-size:.9rem; }
.toc a { color: var(--c-text-soft); }
.toc a:hover { color: var(--c-brand); }

/* responsive */
@media (max-width: 960px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .kv-grid.cols-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .nav-toggle { display:flex; }
  .nav-list {
    position: fixed; top: var(--header-h); left:0; right:0; flex-direction:column;
    background: var(--c-bg); border-bottom:1px solid var(--c-border);
    padding: 10px 14px; gap:2px; align-items:stretch; max-height:0; overflow:hidden;
    transition: max-height .25s; box-shadow: var(--shadow-2);
  }
  .nav-list.open { max-height: 80vh; overflow-y:auto; }
  .nav-list > li { width:100%; }
  .dropdown { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding-left:14px; margin:0; }
  .hero h1 { font-size: 1.8rem; }
}
@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
  .kv-grid, .kv-grid.cols-3 { grid-template-columns: 1fr; }
}