:root {
    --sgc-navy: #0b1f3a;
    --sgc-royal: #1a4fd6;
    --sgc-cyan: #17c3e6;
    --sgc-gold: #d4af37;
    --sgc-white: #ffffff;
    --sgc-bg: #f4f7fb;
    --sgc-text: #1c2735;
    --sgc-danger: #e5484d;
    --sgc-warning: #f5a623;
    --sgc-success: #2ecc71;
    --sgc-radius: 14px;
    --sgc-shadow: 0 8px 24px rgba(11, 31, 58, 0.08);
}

* { box-sizing: border-box; }

body.sgc-body {
    font-family: 'Prompt', 'Noto Sans Thai', sans-serif;
    background: var(--sgc-bg);
    color: var(--sgc-text);
}

h1, h2, h3, h4, h5, .sgc-heading {
    font-weight: 700;
}

.sgc-navbar {
    background: linear-gradient(135deg, var(--sgc-navy), var(--sgc-royal));
    color: var(--sgc-white);
}

.sgc-card {
    background: var(--sgc-white);
    border-radius: var(--sgc-radius);
    box-shadow: var(--sgc-shadow);
    border: none;
    padding: 1.5rem;
}

.sgc-stat-card {
    border-left: 5px solid var(--sgc-cyan);
}

.sgc-btn-primary {
    background: var(--sgc-royal);
    color: #fff;
    border: none;
}
.sgc-btn-primary:hover { background: var(--sgc-navy); color: #fff; }

.sgc-btn-gold {
    background: var(--sgc-gold);
    color: var(--sgc-navy);
    border: none;
    font-weight: 600;
}

.sgc-login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, var(--sgc-royal), var(--sgc-navy));
}

.sgc-login-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--sgc-radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    padding: 2.5rem 2rem;
}

.sgc-exam-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.25rem;
}
.sgc-exam-timer.warning { color: var(--sgc-warning); }
.sgc-exam-timer.danger  { color: var(--sgc-danger); animation: pulse 1s infinite; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}