.dashboard { padding: 20px 16px; max-width: 640px; margin: 0 auto; } .dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--bg-border); } .dash-logo { font-size: 18px; font-weight: bold; color: var(--neon-cyan); letter-spacing: 0.12em; } .dash-status { font-size: 13px; color: var(--neon-green); display: flex; align-items: center; gap: 6px; } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot--green { background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; } .stat-card { background: var(--bg-card); border: 1px solid var(--bg-border); border-radius: 4px; padding: 18px 16px; } .stat-label { font-size: 12px; color: var(--text-muted); letter-spacing: 0.1em; margin-bottom: 10px; } .stat-value { font-size: 28px; font-weight: bold; color: var(--text-primary); } .neon-green { color: var(--neon-green); } .neon-cyan { color: var(--neon-cyan); } .blink { animation: blink 1.5s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .geo-section { background: var(--bg-card); border: 1px solid var(--bg-border); border-radius: 4px; padding: 18px 16px; } .section-title { font-size: 12px; color: var(--text-muted); letter-spacing: 0.1em; margin-bottom: 16px; display: flex; justify-content: space-between; } .geo-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .geo-item { display: grid; grid-template-columns: 140px 1fr 52px 52px; align-items: center; gap: 10px; font-size: 13px; } .geo-country { color: var(--text-primary); letter-spacing: 0.05em; } .geo-bar-wrap { background: var(--bg-border); height: 4px; border-radius: 2px; overflow: hidden; } .geo-bar { height: 100%; background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); border-radius: 2px; transition: width 0.5s ease; } .geo-pct { color: var(--neon-cyan); text-align: right; } .geo-pct--dim { color: var(--text-muted); text-align: right; } font-size: 12px; } .empty-msg { color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px 0; }