:root {
    --bg: #0f1420;
    --card-bg: #171e2e;
    --card-border: #232b3d;
    --accent: #3b82f6;
    --accent-2: #f59e0b;
    --ok: #22c55e;
    --danger: #ef4444;
    --text: #e6ebf5;
    --text-muted: #8b95a8;
}

* { box-sizing: border-box; }

body {
    background: radial-gradient(circle at top, #131a2a 0%, var(--bg) 60%);
    color: var(--text);
    font-family: "Kanit", "Segoe UI", sans-serif;
    min-height: 100vh;
}

.app-navbar {
    background: linear-gradient(90deg, #101827, #182238);
    border-bottom: 1px solid var(--card-border);
    padding: .9rem 0;
}
.app-navbar .navbar-brand {
    font-weight: 600;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.brand-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 8px var(--ok);
    display: inline-block;
}

.app-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    color: var(--text);
}

.status-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.status-dot-ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.status-dot-stale { background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2); }

.value-card .card-body { padding: 1rem .5rem; }
.value-label {
    font-size: .8rem;
    color: var(--text-muted);
    letter-spacing: .05em;
    margin-bottom: .25rem;
}
.value-number {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.section-title {
    font-weight: 600;
    font-size: .95rem;
    color: var(--text-muted);
    margin-bottom: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.led-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
@media (min-width: 576px) {
    .led-grid { grid-template-columns: repeat(8, 1fr); }
}

.led-box {
    background: #1c2436;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    text-align: center;
    padding: .7rem 0;
    font-weight: 600;
    font-size: .85rem;
    color: var(--text-muted);
    transition: all .15s ease;
}
.led-box.led-on {
    background: rgba(34, 197, 94, .18);
    border-color: var(--ok);
    color: #baffcf;
    box-shadow: 0 0 12px rgba(34, 197, 94, .35);
}
.led-box-m.led-on-m {
    background: rgba(59, 130, 246, .18);
    border-color: var(--accent);
    color: #bcd9ff;
    box-shadow: 0 0 12px rgba(59, 130, 246, .35);
}

.app-table { color: var(--text); }
.app-table thead th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: .8rem;
    border-bottom-color: var(--card-border);
}
.app-table td {
    border-bottom-color: var(--card-border);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.badge-status {
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.badge-status-pending { background: rgba(245, 158, 11, .18); color: #ffd48a; }
.badge-status-done { background: rgba(34, 197, 94, .18); color: #baffcf; }
.badge-status-failed { background: rgba(239, 68, 68, .18); color: #ffb3b3; }

/* ปุ่มกด X0/X1 ให้ใหญ่ กดง่ายบนมือถือ */
.btn-pulse {
    border: none;
    border-radius: 18px;
    padding: 1rem .5rem;
    color: #fff;
    text-align: center;
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn-pulse-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.btn-pulse-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.btn-pulse:active, .btn-pulse-active {
    transform: scale(.96);
}
.btn-pulse-icon { font-size: 1.4rem; }
.btn-pulse-label { font-weight: 700; font-size: 1.05rem; margin-top: .1rem; }
.btn-pulse-sub { font-size: .72rem; opacity: .85; }

.app-toast {
    padding: .6rem 1rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 500;
    animation: fadein .15s ease;
}
.app-toast-ok { background: rgba(34, 197, 94, .15); color: #baffcf; border: 1px solid rgba(34,197,94,.4); }
.app-toast-error { background: rgba(239, 68, 68, .15); color: #ffb3b3; border: 1px solid rgba(239,68,68,.4); }

@keyframes fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}