:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #1d1d1f;
  background: #f5f5f7;
  color-scheme: light;
}

html { background: #f5f5f7; }
body { min-height: 100vh; background: #f5f5f7; color: #1d1d1f; }

header {
  position: sticky;
  z-index: 100;
  top: 0;
  height: 52px;
  padding: 0 max(22px, 5vw);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  background: rgba(250, 250, 252, .86);
  color: #1d1d1f;
  box-shadow: none;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
header > div { display: flex; align-items: baseline; }
header b { color: #1d1d1f; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
header > div span { color: #6e6e73; font-size: 12px; opacity: 1; }
header nav { display: flex; align-items: center; color: #1d1d1f; font-size: 13px; }
header a { color: #1d1d1f; }
header .identity { color: #6e6e73; opacity: 1; }

.top-nav-actions { gap: 3px; margin-right: 18px; }
.top-nav-button {
  min-height: 34px;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent !important;
  color: #1d1d1f !important;
  font-size: 13px;
  font-weight: 500;
}
.top-nav-button:hover,
.top-nav-menu[open] > .top-nav-button { background: rgba(0, 0, 0, .055) !important; transform: none; }
.top-nav-button.active { background: #e8e8ed !important; color: #000 !important; box-shadow: none; }
.nav-logout { color: #424245; text-decoration: none; }
.nav-logout:hover { color: #0071e3; }
.nav-safety-badge { top: -8px; right: -8px; border-color: #fbfbfd; background: #e30000; box-shadow: 0 2px 7px rgba(227, 0, 0, .24); }

.admin-menu summary { color: #1d1d1f; text-decoration: none; }
.admin-menu-panel {
  top: calc(100% + 8px);
  min-width: 170px;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .14);
  backdrop-filter: blur(22px);
}
.admin-menu-panel a { padding: 10px 12px; border-radius: 9px; color: #1d1d1f !important; font-weight: 500; }
.admin-menu-panel a:hover { background: #f2f2f7; color: #0071e3 !important; }

main { max-width: 1480px; margin: 34px auto 64px; padding: 0 24px; }
h1, h2, h3 { color: #1d1d1f; letter-spacing: -.02em; }
h1 { font-size: clamp(32px, 3vw, 48px); font-weight: 720; }
h2 { font-weight: 680; }
p, .hint, .empty { color: #6e6e73; }
a { color: #0066cc; }

.card {
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 22px rgba(0, 0, 0, .06);
}

input, select, textarea, button, .button {
  min-height: 42px;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  background: #fff;
  color: #1d1d1f;
  transition: border-color .16s, box-shadow .16s, background .16s, transform .16s;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: #0071e3;
  box-shadow: 0 0 0 3px rgba(0, 125, 250, .16);
}
button, .button { font-weight: 600; }
button:hover, .button:hover, .primary {
  border-color: #0071e3;
  background: #0071e3;
  color: #fff;
  box-shadow: none;
  transform: none;
}
.primary:hover { background: #0077ed; }
.secondary { border-color: #0071e3; background: transparent; color: #0066cc; }
.secondary:hover { background: #0071e3; color: #fff; }
.danger-button { border-color: #ffb4ae; background: #fff; color: #b42318; }
.danger-button:hover { border-color: #d92d20; background: #d92d20; color: #fff; }

table { color: #1d1d1f; }
th, td { border-bottom-color: #e8e8ed; }
th { background: #f5f5f7; color: #424245; font-size: 13px; font-weight: 650; }
tbody tr:hover { background: #fafafa; }

.flash { border-radius: 14px; border: 1px solid transparent; }
.success { border-color: #b8e5ca; background: #effaf3; color: #176b3a; }
.error { border-color: #ffc6c3; background: #fff2f1; color: #b42318; }
.unsaved { background: #fff7d6; color: #805b10; }

.display-hero, .settings-hero,
.offender-hero, .fine-hero, .safety-hero,
.regularized-heading, .hidden-heading {
  padding: 34px 38px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, #18181a 0%, #323236 100%);
  color: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
}
.display-hero h1, .settings-hero h1,
.offender-hero h1, .fine-hero h1, .safety-hero h1,
.regularized-heading h1, .hidden-heading h1 { color: #fff; }
.display-hero p, .settings-hero p,
.offender-hero p, .fine-hero p, .safety-hero p,
.regularized-heading p, .regularized-heading span, .hidden-heading p { color: #d2d2d7; }
.display-hero p, .settings-hero p,
.offender-hero p, .fine-hero p, .safety-hero p { color: #d2d2d7; }
.eyebrow, .safety-hero small { color: #a1a1a6; letter-spacing: .11em; }
.display-hero h1, .settings-hero h1,
.offender-hero h1, .fine-hero h1, .safety-hero h1 { color: #fff; }
.safety-hero .secondary, .history-button {
  border: 1px solid #0071e3;
  background: #0071e3;
  color: #fff;
}
.safety-hero .secondary:hover, .history-button:hover { border-color: #2997ff; background: #2997ff; color: #fff; }

.offender-kpis article, .hidden-stats span, .regularized-heading > b {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .09);
  color: #fff;
}
.offender-kpis span { color: #d2d2d7; }
.safety-kpis article, .fine-settings > div, .fine-kpis span,
.summary-chips span, .rate-pills span, .audit-grid > div {
  border: 1px solid #dedee3;
  background: #eeeef2;
  color: #424245;
}
.safety-kpis strong, .fine-settings b, .summary-chips b { color: #1d1d1f; }
.safety-kpis .ok { border-color: #a6dab9; background: #e1f5e8; }
.safety-kpis .danger, .fine-settings .money, .fine-kpis .red-total { border-color: #ffb4ae; background: #ffe2e0; }
.safety-kpis .stopped, .fine-kpis .fine-total { border-color: #e7c55f; background: #fff0bd; }
.safety-kpis .danger strong { color: #d92d20; }

.display-summary {
  border: 1px solid #d5e4f5;
  background: linear-gradient(120deg, #fff 35%, #edf5ff 100%);
  box-shadow: 0 7px 24px rgba(0, 74, 173, .09);
}
.display-summary h2 { color: #1d1d1f; }
.display-summary .summary-chips span { border-color: #d2d2d7; background: rgba(255, 255, 255, .78); }

.fine-filter { border-color: #e8e8ed; background: #f5f5f7; color: #1d1d1f; }
.fine-filter label { color: #1d1d1f; }
.fine-module > header, .offender-module > header, .safety-hall > header, .safety-records > header {
  border-bottom-color: #e8e8ed;
  background: #fff;
}
.fine-module thead th, .fine-module tfoot th, .change-table th { background: #f5f5f7; color: #424245; }
.offender-image-link { background: #f5f5f7; }
.offender-image-link img, .report img { border-color: #d2d2d7; border-radius: 12px; }

.settings-jump {
  border: 1px solid rgba(0, 0, 0, .08);
  background: rgba(255, 255, 255, .92);
  color: #1d1d1f;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .10);
  backdrop-filter: blur(20px);
}
.settings-jump-heading { border-bottom-color: #e8e8ed; }
.settings-jump-heading small { color: #6e6e73; }
.settings-jump a { color: #424245; }
.settings-jump a::before { background: #f2f2f7; color: #6e6e73; }
.settings-jump a:hover, .settings-jump a:focus { border-color: transparent; background: #f5f5f7; color: #1d1d1f; }
.settings-jump a.active { border-color: transparent; background: #e8f2ff; color: #0066cc; box-shadow: none; }
.settings-jump a.active::before { background: #0071e3; color: #fff; }
.settings-section > header { border-radius: 20px 20px 0 0; background: #fafafa; color: #1d1d1f; }
.settings-section > header .step { background: #0071e3; }
.setting-box, .list-columns article, .charm-tier-row { border-color: #e8e8ed; border-radius: 14px; background: #fafafa; }
.setting-box h3, .list-columns h3, .newcomer-group-title h2, .newcomer-group td strong { color: #1d1d1f; }

.newcomer-heading { background: linear-gradient(135deg, #18181a 0%, #323236 100%); }
.newcomer-group-title { background: #f5f5f7; }
.newcomer-group-title span { background: #e8f2ff; color: #0066cc; }
.manual-change-summary > summary, .status-admin summary { color: #1d1d1f; }
.change-date-filter, .mobile-quick-actions { border-color: #e8e8ed; background: rgba(255, 255, 255, .92); }
.mobile-quick-actions a { background: #f5f5f7; color: #1d1d1f; }
.viewer-toolbar { background: #1d1d1f; }
.viewer-stage { background: #e8e8ed; }

@media (max-width: 900px) {
  header { position: sticky; height: auto; padding: 10px 12px; }
  header nav { color: #1d1d1f; }
  header nav > a, header nav > .admin-menu > summary { background: #f2f2f7; color: #1d1d1f; }
  header nav .top-nav-actions { gap: 6px; }
  header nav .top-nav-button { border: 0; background: #f2f2f7 !important; color: #1d1d1f !important; }
  header nav .top-nav-button.active { background: #e3e3e8 !important; }
  header .identity { color: #6e6e73; }
  main { margin-top: 18px; padding: 0 12px; }
  .card { border-radius: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
  .display-hero, .settings-hero,
  .offender-hero, .fine-hero, .safety-hero,
  .regularized-heading, .hidden-heading { padding: 24px 20px; border-radius: 18px; }
  .admin-menu-panel { background: rgba(255, 255, 255, .98); }
}