/* Preserve the standalone observatory palette and spacing within this region. */
.vpn-page .vpn-observatory { font-family: Inter, "Microsoft YaHei", sans-serif; font-size: 14px; color: #dae6ef; background: #0a111a; border: 1px solid #263141; border-radius: 12px; margin-top: 16px; overflow: hidden; min-width: 0; color-scheme: dark; }
.vpn-observatory, .vpn-observatory * { box-sizing: border-box; }
.vpn-observatory .observatory-header { padding: 26px 34px; border-bottom: 1px solid #263141; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: transparent; }
.vpn-observatory .observatory-eyebrow { color: #44d4ba; letter-spacing: 3px; font-size: 11px; }
.vpn-observatory .observatory-header h2 { font-size: 26px; margin: 4px 0 10px; letter-spacing: 1px; color: #dae6ef; }
.vpn-observatory .observatory-body { max-width: 1600px; margin: auto; padding: 24px 34px; }
.vpn-observatory small { color: #8b9db0; }
.vpn-observatory p { color: #aebfd0; line-height: 1.8; }
.vpn-observatory button, .vpn-observatory select, .vpn-observatory input { border: 1px solid #354558; border-radius: 7px; background: #162334; color: #dce7f0; padding: 10px 13px; font: inherit; min-height: 40px; max-width: 100%; box-shadow: none; }
.vpn-observatory button { cursor: pointer; }
.vpn-observatory button:hover { background: #1c2c3b; }
.vpn-observatory button[aria-pressed="true"] { border-color: #44d4ba; color: #44d4ba; background: #17352f; }
.vpn-observatory button:focus-visible, .vpn-observatory select:focus-visible, .vpn-observatory input:focus-visible { outline: 2px solid #44d4ba; outline-offset: 3px; }
.vpn-observatory .observatory-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid #263141; }
.vpn-observatory .observatory-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.vpn-observatory .observatory-heading h3 { margin: 0 0 8px; font-size: 20px; color: #dae6ef; }
.vpn-observatory .observatory-heading h4 { margin: 0 0 10px; font-size: 15px; color: #dae6ef; }
.vpn-observatory .observatory-heading label { display: flex; flex-direction: row; align-items: center; gap: 10px; color: #90a4b9; font-size: 12px; }
.vpn-observatory .observatory-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin: 22px 0; }
.vpn-observatory .observatory-card, .vpn-observatory .observatory-chart { border: 1px solid #263141; border-radius: 12px; background: #101b28; padding: 20px; }
.vpn-observatory .observatory-number { font-size: 30px; font-weight: 600; margin: 12px 0 3px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.vpn-observatory .observatory-rate { font-size: 22px; line-height: 1.6; }
.vpn-observatory .observatory-number span { font-size: 13px; color: #8b9db0; }
.vpn-observatory .vpn-form { margin: 25px 0 12px; }
.vpn-observatory .vpn-form label { flex: 0 1 300px; margin-left: auto; color: #90a4b9; }
.vpn-observatory .vpn-table { overflow: auto; border: 1px solid #263141; border-radius: 10px; margin-top: 16px; }
.vpn-observatory .vpn-table table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 13px; background: transparent; color: #dae6ef; }
.vpn-observatory .vpn-table th { text-align: left; background: #142132; color: #8fa3b8; font-weight: 500; padding: 15px 12px; border: 0; }
.vpn-observatory .vpn-table td { padding: 17px 12px; border: 0; border-top: 1px solid #263141; background: transparent; color: #dae6ef; line-height: 1.7; overflow-wrap: normal; }
.vpn-observatory .vpn-table tbody tr { background: transparent; }
.vpn-observatory .vpn-table tbody tr:hover { background: #152335; }
.vpn-observatory .vpn-table td small { display: block; margin-top: 6px; font-size: 11px; }
.vpn-observatory .observatory-chart { margin-top: 20px; }
.vpn-observatory .observatory-device-toggle { white-space: nowrap; color: #44d4ba; border-color: #354558; font-size: 12px; }
.vpn-observatory .observatory-chart svg { display: block; margin-top: 20px; }
.vpn-observatory .observatory-chart svg path:first-child { stroke: #263141; }
.vpn-observatory .observatory-chart svg path:nth-child(2) { stroke: #44d4ba; }
.vpn-observatory .observatory-chart svg path:nth-child(3) { stroke: #65aaf8; }
.vpn-observatory [role="alert"] { padding: 13px 16px; border: 1px solid #a77a39; border-radius: 8px; color: #f4c77e; }
.vpn-observatory footer { padding: 28px 0 0; font-size: 12px; color: #71869c; }
@media (max-width: 1100px) { .vpn-observatory .observatory-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vpn-observatory .observatory-header { padding: 20px; flex-wrap: wrap; } .vpn-observatory .observatory-body { padding: 15px; } .vpn-observatory .observatory-heading { align-items: flex-start; flex-direction: column; } .vpn-observatory .observatory-heading select { width: 100%; } .vpn-observatory .observatory-heading label { flex-wrap: wrap; } .vpn-observatory .observatory-card { padding: 14px; } .vpn-observatory .observatory-number { font-size: 24px; } .vpn-observatory .observatory-rate { font-size: 18px; } .vpn-observatory .vpn-form label { margin-left: 0; } }