body {
    background-color: #111;
    color: #eee;
    font-family: monospace;
    padding: 20px;
}

.site-title {
  text-align: center;        /* وسط چین */
  font-size: 2rem;           /* اندازه بزرگ */
  font-weight: bold;         /* ضخیم */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0 0;            /* فاصله بالا و پایین */
  color: #1a73e8;            /* رنگ دلخواه */
}

h1,
h2 {
    color: #0ff;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th,
td {
    padding: 10px;
    border: 1px solid #444;
    text-align: center;
}

.up {
    color: #0f0;
    font-weight: bold;
}

.down {
    color: #f00;
    font-weight: bold;
}

.log {
    background: #222;
    padding: 10px;
    height: 200px;
    overflow-y: auto;
    border: 1px solid #444;
}

.checking { color: #0ff; font-weight: bold; font-style: italic; }

/* Wrapper دسکتاپ و موبایل */
#dashboard {
    display: flex;
    flex-direction: column; /* موبایل: بالا-پایین */
    gap: 20px;
}

/* برای دسکتاپ بزرگ */
@media(min-width: 768px) {
    #dashboard {
        flex-direction: row; /* کنار هم */
    }
    #chart-container, #log-container {
        flex: 1;             /* هر کدوم نصف فضا */
        height: 400px;       /* ارتفاع یکسان */
    }
    #log-container {
        overflow-y: auto;
    }
}

/* لاگ */
.log {
    background: #222;
    padding: 10px;
    height: 200px; /* موبایل */
    overflow-y: auto;
    border: 1px solid #444;
}

/* نمودار */
#chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}