/**
 * [Senior Standard] Server Ping Style v3.8
 * Features: Data Visualization, Responsive Tables
 */

.ping-app-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.ping-card {
    background: #fff;
    padding: 30px;
    border-top: 5px solid #3b82f6;
}

.ping-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 20px;
}
.ping-header h2 { margin: 0 0 10px 0; color: #1e293b; font-size: 1.8rem; }
.ping-header p { margin: 0; color: #64748b; }

/* Config Section */
.ping-config {
    background: #f8fafc;
    padding: 20px;
}
.input-group label { display: block; font-weight: 600; color: #475569; margin-bottom: 8px; }
.input-with-btn { display: flex; gap: 10px; }
.input-pastel {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
}
.input-tip { font-size: 0.85rem; color: #94a3b8; margin-top: 8px; }

.ping-controls {
    display: flex;
    justify-content: center;
}

/* Stats Dashboard */
.ping-stats {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 20px;
    text-align: center;
}
.stat-item { display: flex; flex-direction: column; gap: 5px; }
.stat-item .label { font-size: 0.9rem; color: #64748b; }
.stat-item .value { font-size: 1.5rem; font-weight: 800; color: #3b82f6; font-variant-numeric: tabular-nums; }

/* Data Table */
.table-container {
    overflow-x: auto;
    padding: 0;
}
.ping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: center;
}
.ping-table th {
    background: #f1f5f9;
    color: #475569;
    padding: 12px;
    font-weight: 600;
}
.ping-table td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
.ping-table tr:last-child td { border-bottom: none; }
.empty-row td { padding: 30px; color: #94a3b8; }

/* Mobile Responsive */
@media (max-width: 600px) {
    .input-with-btn { flex-direction: column; }
    .ping-stats { flex-direction: column; gap: 15px; }
}