/* Web approximation inspired by Apple's Liquid Glass; not a native Apple API. */
@media screen {
  :root {
    --bg: #edf2f3;
    --text: #202d35;
    --muted: #536570;
    --line: #d9e2e5;
    --shadow: 0 4px 18px rgb(33 54 59 / 5%);
    --glass: rgb(255 255 255 / 82%);
  }
  body { background: #edf2f3; min-width: 760px; }
  .app-shell { grid-template-columns: 238px minmax(0, 1fr); }
  .sidebar {
    z-index: 20;
    background: var(--glass);
    border-right: 1px solid rgb(255 255 255 / 90%);
    box-shadow: 5px 0 26px rgb(39 59 66 / 5%), inset -1px 0 0 rgb(95 118 126 / 12%);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    padding: 24px 16px 16px;
    overflow-y: auto;
  }
  .brand { gap: 12px; margin-bottom: 22px; }
  .brand strong { font-size: 18px; color: #263b44; }
  .brand small { color: #667981; }
  .nav-list { gap: 5px; align-content: start; grid-auto-rows: min-content; }
  .nav-list button {
    min-height: 42px; padding: 10px 12px; box-shadow: none;
    border: 1px solid transparent; border-radius: 8px;
    font-size: 14px; color: #455a65;
    transition: background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }
  .nav-list button:hover {
    background: rgb(255 255 255 / 80%);
    border-color: rgb(255 255 255 / 95%);
    box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgb(31 53 61 / 6%);
  }
  .nav-list button.active {
    color: #26452e; background: rgb(225 237 211 / 85%);
    border-color: #c7d8b6;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 3px 12px rgb(57 83 43 / 8%);
  }
  .topbar {
    padding: 16px 18px; margin: 16px 0;
    border: 1px solid rgb(255 255 255 / 95%); border-radius: 8px;
    background: var(--glass); box-shadow: inset 0 1px 0 #fff, var(--shadow);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
  }
  .topbar h1 { font-size: 26px; line-height: 1.3; }
  .top-actions { gap: 10px; }
  .top-actions label { color: #455a65; font-size: 12px; }
  button, .file-button {
    background: rgb(255 255 255 / 92%); border-color: #cfdbdf; border-radius: 8px;
    box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgb(29 49 56 / 4%);
    transition: background 160ms ease, border-color 160ms ease;
  }
  button:hover, .file-button:hover { background: #fff; border-color: #91b39a; }
  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #2979b8; outline-offset: 3px;
  }
  button:disabled { opacity: .5; cursor: not-allowed; }
  .primary-button { background: #285c52; border-color: #285c52; color: #fff; box-shadow: none; }
  .primary-button:hover { background: #204c44; color: #fff; border-color: #204c44; }
  input, select, textarea { background: #fff; color: #263944; border-color: #ccd9df; border-radius: 7px; }
  .panel, .metric-card, .person-card, .coach-card, .rank-card, .graph-card,
  .forecast-card, .health-item, .brief-line {
    background: #fff; border-color: #dce5e7; box-shadow: var(--shadow);
  }
  .section.view-section { background: transparent; border: 0; box-shadow: none; }
  .metric-card { box-shadow: 0 3px 14px rgb(33 54 59 / 5%); }
  .chart-kpi-strip span { background: #f2f6f7; color: #536570; }
  thead th { background: #f2f6f7; color: #455d67; }
  tbody tr:hover { background: #f5f9f8; }
  .report-paper { background: #fff; }
  .admin-login-panel { border-top: 1px solid #d7e1e3; padding-top: 14px; }
  @media (max-width: 1100px) {
    .app-shell { grid-template-columns: 204px minmax(0, 1fr); }
    .sidebar { padding: 18px 10px; }
    .topbar { align-items: flex-start; flex-direction: column; }
    .top-actions { justify-content: flex-start; width: 100%; }
  }
  @supports not (backdrop-filter: blur(1px)) {
    .sidebar, .topbar { background: #f9fbfb; }
  }
  @media (prefers-reduced-transparency: reduce) {
    .sidebar, .topbar { background: #f9fbfb; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .nav-list button.active { background: #e1edd3; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  }
}