:root {
    --kt-primary: #4f6bff;
    --kt-bg: #f4f6fb;
}

body {
    background: var(--kt-bg);
    font-family: "Sarabun", "Leelawadee UI", "Segoe UI", Tahoma, sans-serif;
}

.kt-nav {
    background: linear-gradient(90deg, #3949ab, #5c6bc0);
}

.card {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(30, 40, 90, .07);
}

.kid-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    flex: 0 0 auto;
}

.status-pill {
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .85rem;
    font-weight: 600;
}

.status-ok { background: #e3f8ea; color: #18794e; }
.status-lock { background: #fde8e8; color: #b42318; }
.status-free { background: #eef0f4; color: #555; }

.time-big {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.progress { height: 10px; border-radius: 6px; }

.dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block; margin-right: 4px;
}
.dot-on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.dot-off { background: #adb5bd; }

.pair-code {
    font-family: Consolas, monospace;
    font-size: 1.4rem;
    letter-spacing: .3rem;
    background: #fff7d6;
    padding: .1rem .6rem;
    border-radius: 6px;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 140px;
    border-bottom: 1px solid #dee2e6;
}
.bar-chart .bar-wrap {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}
.bar-chart .bar {
    background: var(--kt-primary);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
}
.bar-chart .bar.over { background: #ef4444; }
.bar-chart .limit {
    position: absolute;
    left: 0; right: 0;
    border-top: 2px dashed #f59e0b;
}
.bar-labels { display: flex; gap: 4px; font-size: .7rem; color: #6c757d; }
.bar-labels span { flex: 1; text-align: center; }

.schedule-table td, .schedule-table th { vertical-align: middle; }
.schedule-table input[type=time] { min-width: 110px; }

.login-box { max-width: 380px; margin: 8vh auto; }