.visitors-section {
    background: linear-gradient(135deg, var(--paper) 0%, var(--bg-2) 100%);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: inset 0 0 0 1px var(--edge-0);
    overflow: hidden
}

.visitors-stats {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));
    gap: 16px;
    margin-top: 8px
}

.visitor-stat {
    text-align: center;
    padding: 12px 8px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--edge-0);
    transition: border-color .15s ease;
}

.visitor-stat:hover {
    border-color: var(--edge-1);
}
.visitor-number{font-size:20px;font-weight:800;color:var(--accent);line-height:1}
.visitor-label{font-size:11px;color:var(--muted);margin-top:4px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px}
.visitor-uptime{font-size:14px;font-weight:700;color:var(--ink-2)}

.visitor-stat[data-tooltip]{
    cursor:help;
    position:relative;
}

.visitor-stat[data-tooltip]::before{
    content:attr(data-tooltip);
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    background:var(--paper);
    color:var(--ink);
    padding:8px 12px;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    font-family:var(--mono);
    white-space:nowrap;
    box-shadow: inset 0 0 0 1px var(--edge-1);
    opacity:0;
    pointer-events:none;
    transition: opacity .15s ease;
    z-index:100;
}

.visitor-stat[data-tooltip]:hover::before{
    opacity:1;
}

.visitor-stat[data-tooltip]::after{
    content:'';
    position:absolute;
    bottom:calc(100% + 2px);
    left:50%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:var(--paper);
    opacity:0;
    pointer-events:none;
    transition: opacity .15s ease;
    z-index:100;
}

.visitor-stat[data-tooltip]:hover::after{
    opacity:1;
}