@font-face {
  font-family: Prompt;
  src: url('fonts/Prompt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Prompt;
  src: url('fonts/Prompt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

body { font-family: Prompt, "Leelawadee UI", "Segoe UI", Tahoma, sans-serif; }
h1, h2, h3, strong, b, .eyebrow, button, .button { font-weight: 600; }
.topbar { padding-inline: max(24px, calc((100vw - 1450px) / 2)); }
.topbar nav a, .sidebar > a, .sidebar button { min-height: 44px; display: inline-flex; align-items: center; }
.sidebar > a { display: flex; }
.sidebar a[aria-current="page"] { background: var(--mint); color: var(--green); font-weight: 600; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(125deg, #12343d, #005964);
  color: #f7fbfc;
  border: 0;
  border-radius: 24px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 42%;
  z-index: -1;
  background: repeating-linear-gradient(135deg, transparent 0 24px, #eaf8fa13 25px 26px, transparent 27px 48px);
  mask-image: linear-gradient(to right, transparent, black);
  pointer-events: none;
}
.hero .eyebrow { color: #f8da91; }
.hero .muted, .hero-aside { color: #d1e6e9; }
.hero-aside { border-inline-start: 1px solid #b8d6d877; }
.hero-aside strong { color: #fff; }
.hero .button { color: #14343b; background: #f5d68f; border-color: #f5d68f; }
.hero .button.secondary { color: #fff; background: #ffffff12; border-color: #ffffff70; }
.hero .button:hover { background: #ffe8b2; color: #14343b; }
.hero a:focus-visible { outline-color: #ffdf93; }
.stats .stat { border-block-start: 3px solid #b5d5d9; }
.stats .stat:first-child { border-block-start-color: var(--green); }
.table-wrap { max-width: 100%; }
.table-wrap:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.table-hint { margin: 0 0 6px; color: var(--muted); font-size: .86rem; }
button, .button, input:not([type=checkbox]), select { min-height: 44px; }

@media (max-width: 1050px) {
  .shell { display: block; }
  .sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
    min-height: 0;
    padding: 8px max(18px, 4%);
    border-inline-end: 0;
    border-block-end: 1px solid var(--border);
    overflow: visible;
  }
  .sidebar .profile { display: none; }
  .sidebar > a, .sidebar form { margin: 0; padding: 0 10px; white-space: normal; }
  .hero-aside { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .topbar { padding: 12px 16px; }
  .topbar nav { gap: 2px; }
  .topbar nav a { padding-inline: 9px; }
  .content { padding: 20px 15px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .hero { border-radius: 16px; padding: 23px; }
  .hero h1 { font-size: clamp(24px, 6vw, 32px); }
  .stats { gap: 10px; }
  input, select, textarea { font-size: 16px; }
}
@media print {
  body { font-family: Prompt, Tahoma, sans-serif; }
  .table-hint { display: none; }
}