:root {
  --radar-navy: #0d2137;
  --radar-blue: #2368b4;
  --radar-cyan: #2aa8a0;
  --radar-green: #24b47e;
  --radar-ink: #1d2b3e;
  --radar-muted: #6f7b8c;
  --radar-line: #dfe6ee;
  --radar-soft: #f3f7f9;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--radar-ink); font-family: 'Varela Round','PingFang SC','Microsoft YaHei',sans-serif; }
h1, h2, h3, strong, button { font-family: 'Montserrat','PingFang SC','Microsoft YaHei',sans-serif; }
button, input, select { font: inherit; }
.radar-container { width: min(1160px,calc(100% - 40px)); margin: 0 auto; }

.radar-hero { position: relative; overflow: hidden; padding: 82px 0 78px; background: radial-gradient(circle at 78% 28%,rgba(48,167,162,.22),transparent 28%), linear-gradient(128deg,#0a1c30,#173958 63%,#174e62); color: #fff; }
.radar-hero:after { content: ''; position: absolute; right: -120px; bottom: -220px; width: 540px; height: 540px; border: 90px solid rgba(255,255,255,.03); border-radius: 50%; }
.radar-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .65fr; gap: 80px; align-items: center; }
.radar-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #6fe1d8; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.radar-hero h1 { margin: 20px 0 18px; color: #fff; font-size: clamp(42px,5vw,68px); line-height: 1.1; letter-spacing: -.055em; }
.radar-hero h1 em { color: #73ded5; font-style: normal; }
.radar-hero-copy > p { max-width: 720px; margin: 0; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.8; }
.radar-search { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; max-width: 790px; min-height: 60px; margin-top: 30px; padding: 6px; border: 1px solid rgba(255,255,255,.19); border-radius: 14px; background: #fff; box-shadow: 0 22px 52px rgba(2,14,28,.3); }
.radar-search > i { color: #7890a6; text-align: center; }
.radar-search input { min-width: 0; height: 46px; border: 0; outline: 0; color: var(--radar-ink); font-size: 14px; }
.radar-search button { height: 46px; padding: 0 20px; border: 0; border-radius: 9px; background: var(--radar-blue); color: #fff; cursor: pointer; font-weight: 800; }
.radar-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.radar-platforms button { padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.68); cursor: pointer; font-size: 11px; }
.radar-platforms button.active, .radar-platforms button:hover { border-color: #73ded5; background: rgba(115,222,213,.13); color: #fff; }
.radar-platforms b { margin-left: 4px; color: #73ded5; }

.radar-visual { position: relative; width: 330px; height: 330px; justify-self: end; border-radius: 50%; background: radial-gradient(circle,rgba(43,170,161,.16),transparent 62%); }
.radar-orbit { position: absolute; inset: 50%; border: 1px solid rgba(114,222,213,.24); border-radius: 50%; transform: translate(-50%,-50%); }
.orbit-one { width: 110px; height: 110px; }.orbit-two { width: 210px; height: 210px; }.orbit-three { width: 310px; height: 310px; }
.radar-orbit:before, .radar-orbit:after { content: ''; position: absolute; background: rgba(114,222,213,.12); }
.radar-orbit:before { top: 50%; right: 0; left: 0; height: 1px; }.radar-orbit:after { top: 0; bottom: 0; left: 50%; width: 1px; }
.radar-sweep { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; transform-origin: 0 0; background: linear-gradient(20deg,rgba(76,222,207,.3),transparent 60%); clip-path: polygon(0 0,100% 0,0 100%); animation: radar-sweep 6s linear infinite; }
@keyframes radar-sweep { to { transform: rotate(360deg); } }
.radar-center { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 104px; height: 104px; border: 1px solid rgba(115,222,213,.42); border-radius: 50%; background: #102d45; transform: translate(-50%,-50%); box-shadow: 0 0 40px rgba(42,168,160,.25); }
.radar-center i { color: #73ded5; font-size: 20px; }.radar-center strong { color: #fff; font-size: 13px; }.radar-center span { color: rgba(255,255,255,.55); font-size: 9px; }
.radar-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #76e6dc; box-shadow: 0 0 16px #76e6dc; }.dot-one { top: 54px; left: 146px; }.dot-two { top: 206px; left: 50px; }.dot-three { top: 239px; right: 51px; }

.radar-overview-section { position: relative; z-index: 2; margin-top: -26px; }
.radar-overview { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--radar-line); border-radius: 17px; background: #fff; box-shadow: 0 18px 52px rgba(20,50,73,.1); }
.radar-overview article { min-height: 92px; padding: 20px 25px; border-right: 1px solid var(--radar-line); }.radar-overview article:last-child { border-right: 0; }
.radar-overview span { display: block; color: var(--radar-muted); font-size: 11px; }.radar-overview strong { display: inline-block; margin-top: 6px; color: var(--radar-navy); font-size: 27px; }.radar-overview small { margin-left: 4px; color: var(--radar-muted); }

.radar-content-section { padding: 82px 0 92px; }
.radar-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.radar-section-heading > div:first-child > span { color: var(--radar-cyan); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.radar-section-heading h2 { margin: 9px 0 7px; font-size: 34px; letter-spacing: -.04em; }.radar-section-heading p { margin: 0; color: var(--radar-muted); font-size: 13px; }
.radar-filters { display: flex; gap: 9px; }.radar-filters select, .radar-filters button { height: 40px; padding: 0 12px; border: 1px solid var(--radar-line); border-radius: 8px; background: #fff; color: #4d5b6c; font-size: 12px; }.radar-filters button { cursor: pointer; }
.radar-alert { margin-bottom: 18px; padding: 14px 16px; border-radius: 10px; background: #fff3f2; color: #a14242; font-size: 13px; }
.radar-rule-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.rule-card { display: flex; min-height: 300px; padding: 24px; border: 1px solid var(--radar-line); border-radius: 17px; background: #fff; cursor: pointer; flex-direction: column; transition: transform .18s,box-shadow .18s,border-color .18s; }
.rule-card:hover { transform: translateY(-3px); border-color: #b7d6dd; box-shadow: 0 18px 44px rgba(23,68,91,.1); }
.rule-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.rule-platform { padding: 6px 9px; border-radius: 7px; background: #eaf5f5; color: #187f79; font-size: 11px; font-weight: 800; }.rule-risk { font-size: 10px; font-weight: 800; }.rule-risk.info { color: #52718e; }.rule-risk.low { color: #26976d; }.rule-risk.medium { color: #b87518; }.rule-risk.high { color: #c23e4d; }
.rule-card h3 { margin: 20px 0 11px; font-size: 19px; line-height: 1.45; }.rule-card > p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--radar-muted); font-size: 13px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.rule-card-change { margin-top: 17px; padding: 12px; border-radius: 9px; background: var(--radar-soft); color: #4b6371; font-size: 11px; line-height: 1.55; }.rule-card-change i { margin-right: 5px; color: var(--radar-cyan); }
.rule-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 19px; color: #8692a1; font-size: 10px; }.rule-card-footer b { color: var(--radar-blue); font-size: 11px; }
.radar-empty { grid-column: 1 / -1; padding: 70px 24px; border: 1px dashed #cbd7df; border-radius: 16px; background: #fafcfd; text-align: center; }.radar-empty i { color: #80a5b0; font-size: 32px; }.radar-empty h3 { margin: 14px 0 6px; }.radar-empty p { margin: 0; color: var(--radar-muted); font-size: 13px; }
.radar-pagination { text-align: center; }.radar-pagination button { margin-top: 28px; padding: 12px 24px; border: 1px solid #b8cbd7; border-radius: 9px; background: #fff; color: var(--radar-blue); cursor: pointer; font-weight: 800; }
.radar-source-note { display: flex; gap: 15px; align-items: flex-start; margin-top: 45px; padding: 20px 22px; border-radius: 14px; background: var(--radar-soft); }.radar-source-note > i { color: var(--radar-cyan); font-size: 22px; }.radar-source-note strong, .radar-source-note p { display: block; }.radar-source-note p { margin: 5px 0 0; color: var(--radar-muted); font-size: 12px; line-height: 1.65; }

.rule-detail-dialog { width: min(960px,calc(100% - 28px)); max-height: calc(100vh - 30px); padding: 0; overflow: hidden; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 35px 110px rgba(7,28,47,.38); }.rule-detail-dialog::backdrop { background: rgba(6,21,36,.65); backdrop-filter: blur(3px); }.rule-detail-shell { max-height: calc(100vh - 30px); overflow-y: auto; }
.rule-detail-header { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; gap: 20px; padding: 25px 30px 20px; border-bottom: 1px solid var(--radar-line); background: rgba(255,255,255,.97); }.detail-platform { color: var(--radar-cyan); font-size: 11px; font-weight: 800; }.rule-detail-header h2 { margin: 6px 0; font-size: 25px; line-height: 1.35; }.rule-detail-header p { margin: 0; color: var(--radar-muted); font-size: 11px; }.rule-detail-header button { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--radar-line); border-radius: 50%; background: #fff; color: #657383; cursor: pointer; font-size: 23px; }
.detail-loading { padding: 70px 30px; color: var(--radar-muted); text-align: center; }.detail-anchor-nav { display: flex; gap: 8px; padding: 16px 30px; border-bottom: 1px solid var(--radar-line); background: #f8fafb; }.detail-anchor-nav a { padding: 7px 10px; border-radius: 7px; color: #526272; font-size: 11px; text-decoration: none; }.detail-anchor-nav a:hover { background: #eaf1f4; color: var(--radar-blue); }
.detail-section, .detail-insight-grid, .detail-actions-section, .detail-original-section { margin: 25px 30px; }.detail-section > span, .detail-insight-grid section > span, .detail-actions-section > span, .detail-original-heading span { color: var(--radar-navy); font-size: 13px; font-weight: 800; }.detail-summary-section { padding: 20px; border-left: 4px solid var(--radar-cyan); border-radius: 0 12px 12px 0; background: #eef7f7; }.detail-summary-section p, .detail-insight-grid p, .detail-actions-section div { margin: 9px 0 0; color: #536170; font-size: 13px; line-height: 1.85; white-space: pre-wrap; }
.detail-insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.detail-insight-grid section { padding: 20px; border: 1px solid var(--radar-line); border-radius: 13px; }.detail-insight-grid section > i { display: block; margin-bottom: 13px; color: var(--radar-cyan); font-size: 20px; }.detail-insight-grid section:nth-child(2) > i { color: #c17a25; }.detail-actions-section { padding: 20px; border-radius: 13px; background: #f5f8fa; }
.detail-original-section { padding-top: 24px; border-top: 1px solid var(--radar-line); }.detail-original-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.detail-original-heading small { display: block; margin-top: 4px; color: var(--radar-muted); font-size: 10px; }.detail-original-heading a { color: var(--radar-blue); font-size: 11px; font-weight: 800; text-decoration: none; }
.detail-findbar { display: grid; grid-template-columns: 34px minmax(0,1fr) auto 34px 34px; align-items: center; margin-top: 17px; padding: 5px; border: 1px solid var(--radar-line); border-radius: 10px; background: #fff; }.detail-findbar > i { color: #7e8b99; text-align: center; }.detail-findbar input { min-width: 0; height: 38px; border: 0; outline: 0; font-size: 12px; }.detail-findbar span { padding: 0 9px; color: var(--radar-muted); font-size: 10px; white-space: nowrap; }.detail-findbar button { width: 31px; height: 31px; border: 0; border-radius: 6px; background: #edf2f5; color: #536677; cursor: pointer; }
.detail-original-text { max-height: 480px; margin-top: 14px; padding: 22px; overflow-y: auto; border: 1px solid var(--radar-line); border-radius: 12px; background: #fafcfd; color: #4b5968; font-family: 'PingFang SC','Microsoft YaHei',sans-serif; font-size: 12px; line-height: 1.9; white-space: pre-wrap; word-break: break-word; }.detail-original-text mark { border-radius: 2px; background: #ffe38b; color: inherit; }.detail-original-text mark.active { background: #ff9f43; color: #18202a; box-shadow: 0 0 0 2px rgba(255,159,67,.23); }

@media (max-width: 940px) { .radar-hero-grid { grid-template-columns: 1fr; }.radar-visual { display: none; }.radar-overview { grid-template-columns: 1fr 1fr; }.radar-overview article:nth-child(2) { border-right: 0; }.radar-overview article:nth-child(-n+2) { border-bottom: 1px solid var(--radar-line); }.radar-rule-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .radar-container { width: min(100% - 28px,1160px); }.radar-hero { padding: 58px 0 63px; }.radar-hero h1 { font-size: 39px; }.radar-hero-copy > p { font-size: 15px; }.radar-search { grid-template-columns: 37px minmax(0,1fr); }.radar-search button { grid-column: 1 / -1; width: 100%; }.radar-overview article { min-height: 84px; padding: 17px; }.radar-content-section { padding: 65px 0; }.radar-section-heading { align-items: stretch; flex-direction: column; }.radar-filters { display: grid; grid-template-columns: 1fr 1fr; }.radar-filters button { grid-column: 1 / -1; }.radar-rule-grid { grid-template-columns: 1fr; }.rule-card { min-height: 0; }.rule-detail-header { padding: 20px 18px 16px; }.rule-detail-header h2 { font-size: 20px; }.detail-anchor-nav { padding: 12px 18px; overflow-x: auto; }.detail-section, .detail-insight-grid, .detail-actions-section, .detail-original-section { margin: 20px 18px; }.detail-insight-grid { grid-template-columns: 1fr; }.detail-original-heading { align-items: flex-start; flex-direction: column; }.detail-findbar { grid-template-columns: 32px minmax(0,1fr) 32px 32px; }.detail-findbar span { grid-column: 1 / -1; grid-row: 2; padding: 7px 10px 4px; }.detail-original-text { padding: 16px; } }