:root {
  --pm-navy: #0b2a5b;
  --pm-navy-dark: #071c3d;
  --pm-gold: #f2b705;
  --pm-red: #c8102e;
}

body {
  font-family: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f4f6fa;
  color: #1c2434;
}

h1, h2, h3, h4, h5, h6, .fw-semibold { font-weight: 600; }

/* ---------------------------------------------------------- public site -- */
.site-header { background: linear-gradient(120deg, var(--pm-navy-dark), var(--pm-navy)); color: #fff; }
.site-header .brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--pm-gold); color: var(--pm-navy-dark); font-size: 1.4rem;
}
.brand-text strong { display: block; line-height: 1.1; font-size: 1.15rem; letter-spacing: .3px; }
.brand-text small { color: var(--pm-gold); letter-spacing: 2px; text-transform: uppercase; font-size: .7rem; }
.org-line { max-width: 46ch; line-height: 1.35; }
.site-nav { background: rgba(0, 0, 0, .22); padding: 0; }
.site-nav .nav-link { color: rgba(255, 255, 255, .8); padding: .75rem 1rem; }
.site-nav .nav-link:hover { color: #fff; }
.site-nav .nav-link.active { color: var(--pm-gold); box-shadow: inset 0 -3px 0 var(--pm-gold); }
.site-footer { background: var(--pm-navy-dark); color: #fff; }

.hero {
  background: linear-gradient(120deg, rgba(11, 42, 91, .93), rgba(11, 42, 91, .78)),
              radial-gradient(circle at 80% 20%, rgba(242, 183, 5, .35), transparent 55%);
  color: #fff; border-radius: 1rem; padding: 2.5rem;
}
.hero h1 { font-size: clamp(1.5rem, 3vw, 2.4rem); }

.card { border: 0; border-radius: .9rem; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.card-header { background: #fff; border-bottom: 1px solid #eef1f6; font-weight: 600; border-radius: .9rem .9rem 0 0 !important; }
.stat-card .display-6 { font-weight: 700; color: var(--pm-navy); }

.table > :not(caption) > * > * { padding: .6rem .65rem; }
.table thead th { background: #eef2f8; color: var(--pm-navy); font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------ scoreboard -- */
.score-card { border-left: 5px solid var(--pm-navy); }
.score-card.is-live { border-left-color: var(--pm-red); }
.score-big { font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--pm-navy); }
.set-pill {
  display: inline-block; min-width: 3.4rem; text-align: center; padding: .15rem .4rem;
  border-radius: .4rem; background: #eef2f8; font-variant-numeric: tabular-nums; font-size: .85rem;
}
.live-dot {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--pm-red); margin-right: .35rem; animation: pulse 1.2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.scorer-panel .btn-point { font-size: 1.6rem; font-weight: 700; padding: 1rem; }
.scorer-panel .score-display { font-size: 4rem; font-weight: 700; line-height: 1; }

/* ---------------------------------------------------------------- panel -- */
.panel-body { background: #f4f6fa; }
.panel-topbar { background: var(--pm-navy); }
.panel-shell { display: flex; min-height: calc(100vh - 56px); }
.panel-sidebar { width: 260px; flex: 0 0 260px; background: #fff; border-right: 1px solid #e6e9f0; }
.panel-sidebar .nav-link { color: #43506b; border-radius: 0; padding: .6rem 1rem; font-size: .93rem; }
.panel-sidebar .nav-link i { width: 1.4rem; }
.panel-sidebar .nav-link:hover { background: #f1f4fa; }
.panel-sidebar .nav-link.active { background: #eaf0fb; color: var(--pm-navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--pm-navy); }
.panel-content { flex: 1 1 auto; padding: 1.25rem; min-width: 0; }

@media (max-width: 991.98px) {
  .panel-shell { display: block; }
  .panel-sidebar { width: 280px; }
}

.check-ok { color: #198754; }
.check-fail { color: #dc3545; }
.doc-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: .4rem; border: 1px solid #dee2e6; }
.required::after { content: " *"; color: #dc3545; }

@media print {
  .site-header, .site-footer, .panel-topbar, .panel-sidebar, .no-print { display: none !important; }
  .panel-content, body { background: #fff; }
}