.detection-status { display: flex; align-items: center; gap: .65rem; margin: .7rem 0 1rem; padding: .85rem; color: #b9c2da; background: #171b2f; border: 1px solid #303650; border-radius: 10px; font-size: .82rem; }
.detection-status.detection-error { color: #ffd4a0; border-color: #6f5433; }
.detect-spinner { width: 18px; height: 18px; border: 2px solid #3c4665; border-top-color: var(--meter-color); border-radius: 50%; animation: detect-spin .8s linear infinite; }
@keyframes detect-spin { to { transform: rotate(360deg); } }
.detected-network { margin: .7rem 0 1rem; }
.detected-provider-row { display: flex; align-items: center; gap: .8rem; padding: .9rem; background: linear-gradient(135deg, rgba(69,228,225,.12), rgba(189,97,255,.08)); border: 1px solid rgba(69,228,225,.23); border-radius: 12px; }
.network-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; color: #101224; background: var(--meter-color); border-radius: 50%; font-size: 1.05rem; font-weight: 900; }
.detected-provider-row small, .detected-provider-row strong, .detected-provider-row span { display: block; }
.detected-provider-row small { color: #8993af; font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.detected-provider-row strong { color: #fff; font-size: 1.15rem; }
.detected-provider-row div > span { color: #9da7c2; font-size: .75rem; }
.network-facts { display: grid; grid-template-columns: 1.35fr 1fr .7fr; gap: .45rem; margin: .55rem 0 0; }
.network-facts div { min-width: 0; padding: .6rem; background: #171b2f; border: 1px solid #2c324c; border-radius: 9px; }
.network-facts dt { color: #7f89a6; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.network-facts dd { overflow: hidden; margin: .15rem 0 0; color: #e3e6f0; font-size: .76rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.connection-select { display: grid; gap: .35rem; margin-top: .75rem; color: #aeb6d0; font-size: .75rem; font-weight: 800; }
.connection-select select { min-height: 40px; padding: .42rem .6rem; color: #eef0f8; background: #191e34; border: 1px solid #343b59; border-radius: 9px; }
.provider-correction { margin-top: .75rem; }
.provider-correction summary { color: #9fa9c5; font-size: .75rem; font-weight: 750; cursor: pointer; }
.provider-correction[open] summary { color: #fff; }
.provider-correction .provider-grid { margin-bottom: 0; }
.comparison-panel { overflow: hidden; }
.comparison-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1rem; }
.comparison-summary article { padding: 1rem; background: linear-gradient(145deg, #f7f9fd, #eef7fa); border: 1px solid #dfe7ef; border-radius: 12px; }
.comparison-summary span, .comparison-summary strong { display: block; }
.comparison-summary span { color: var(--muted); font-size: .72rem; font-weight: 750; }
.comparison-summary strong { margin-top: .2rem; color: #1b526d; font-size: clamp(1.2rem, 3vw, 1.75rem); }
.chart-card { margin-top: .8rem; padding: .85rem; border: 1px solid #e0e6ee; border-radius: 13px; }
.chart-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .4rem; }
.chart-heading > span { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .72rem; }
.chart-heading i { width: 9px; height: 9px; border-radius: 50%; }
.legend-download { background: #18b8d8; }.legend-upload { margin-left: .35rem; background: #9b5de5; }
#history-chart { display: block; width: 100%; height: 260px; }
.comparison-bars { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
.comparison-bars > div { padding: .85rem; background: #f8fafc; border: 1px solid #e1e7ee; border-radius: 11px; }
.comparison-bars span, .comparison-bars strong { display: block; }.comparison-bars span { color: var(--muted); font-size: .7rem; }.comparison-bars strong { margin-top: .15rem; font-size: .92rem; }
.compare-track { position: relative; height: 8px; margin-top: .6rem; background: #e6edf2; border-radius: 8px; }
.compare-track i { display: block; width: 0; height: 100%; background: #18b8d8; border-radius: inherit; transition: width .5s ease; }
.compare-track em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #172033; transform: translateX(-1px); transition: left .5s ease; }
.upload-track i { background: #9b5de5; }
.chart-note { margin: .75rem 0 0; color: var(--muted); font-size: .72rem; text-align: center; }
@media (max-width: 700px) { .network-facts { grid-template-columns: 1fr 1fr; }.network-facts div:first-child { grid-column: 1 / -1; }.comparison-summary { grid-template-columns: 1fr; }.comparison-summary article { display: flex; align-items: center; justify-content: space-between; }.comparison-bars { grid-template-columns: 1fr; }.chart-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 430px) { .detected-provider-row { padding: .75rem; }.network-facts dd { font-size: .72rem; } #history-chart { height: 220px; } }
@media (prefers-reduced-motion: reduce) { .detect-spinner { animation: none; } }