:root {
      --ink: #15120d;
      --muted: #4f493f;
      --line: #ddd5c5;
      --paper: #fffdf7;
      --canvas: #fbf7ed;
      --gold: #f1b82d;
      --gold-dark: #b68412;
      --green: #1d5c4f;
      --green-soft: #e7f3ed;
      --red: #9e2f21;
      --red-soft: #fbeaea;
      --blue-soft: #eaf1f8;
      --shadow: 0 24px 70px rgba(25, 18, 8, 0.18);
      --radius: 8px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background: var(--canvas);
      color: var(--ink);
      font-family: "IBM Plex Sans", sans-serif;
      font-size: 16px;
      line-height: 1.45;
    }

    button,
    input,
    select,
    textarea { font: inherit; }

    button,
    a,
    input,
    select,
    textarea { outline-offset: 3px; }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible { outline: 3px solid var(--gold-dark); }

    button { cursor: pointer; }

    .prototype-banner {
      padding: 10px 24px;
      background: var(--ink);
      color: white;
      text-align: center;
      font-weight: 700;
    }

    .prototype-banner span { color: var(--gold); }

    .site-header {
      display: flex;
      gap: 20px;
      align-items: center;
      justify-content: space-between;
      padding: 20px clamp(20px, 4vw, 56px);
      background: var(--paper);
      border-bottom: 1px solid var(--line);
    }

    .brand {
      display: flex;
      gap: 14px;
      align-items: center;
    }

    button.brand {
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
    }

    .brand-mark {
      display: grid;
      width: 48px;
      height: 48px;
      place-items: center;
      border-radius: 50%;
      background: var(--gold);
      color: var(--ink);
      font-family: "Besley", serif;
      font-weight: 700;
    }

    .brand strong,
    .brand span { display: block; }

    .brand strong {
      font-family: "Besley", serif;
      font-size: 1.2rem;
    }

    .brand span { color: var(--muted); }

    .header-actions,
    .heading-actions,
    .row-actions,
    .save-actions,
    .preview-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .button {
      min-height: 48px;
      padding: 11px 18px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--paper);
      color: var(--ink);
      font-weight: 700;
      text-decoration: none;
    }

    .button:hover { border-color: var(--gold-dark); }

    .button.primary {
      border-color: var(--ink);
      background: var(--ink);
      color: white;
    }

    .button.primary:hover {
      border-color: var(--gold-dark);
      background: var(--gold-dark);
    }

    .button.danger {
      border-color: #e8bcbc;
      color: var(--red);
    }

    .page-tabs-wrap {
      padding: 16px clamp(20px, 4vw, 56px);
      background: var(--paper);
      border-bottom: 1px solid var(--line);
    }

    .page-tabs-label {
      display: block;
      margin-bottom: 10px;
      color: var(--muted);
      font-weight: 700;
    }

    .page-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .page-tab {
      min-height: 50px;
      padding: 12px 18px;
      border: 2px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: var(--ink);
      font-weight: 750;
    }

    .page-tab:hover { background: #f5f1e7; }

    .page-tab.active {
      border-color: var(--gold-dark);
      background: #fff6d8;
      color: #533900;
    }

    .page-shell {
      width: min(1540px, 100%);
      margin: 0 auto;
      padding: 30px clamp(20px, 4vw, 56px) 56px;
    }

    .breadcrumb {
      margin-bottom: 12px;
      color: var(--muted);
    }

    .page-heading {
      display: flex;
      gap: 24px;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 28px;
    }

    .page-heading-copy { max-width: 760px; }

    h1,
    h2,
    h3 {
      margin: 0;
      font-family: "Besley", serif;
      line-height: 1.15;
    }

    h1 { font-size: clamp(2rem, 4vw, 3.3rem); }
    h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
    h3 { font-size: 1.25rem; }

    .page-heading p,
    .section-heading p,
    .card p,
    .row-copy p { margin: 6px 0 0; color: var(--muted); }

    .workspace {
      display: grid;
      grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }

    .section-nav {
      display: grid;
      gap: 8px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .section-nav-label {
      margin-bottom: 4px;
      color: var(--muted);
      font-weight: 800;
    }

    .section-link {
      min-height: 58px;
      padding: 12px 14px;
      border: 2px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: var(--ink);
      font-weight: 750;
      text-align: left;
    }

    .section-link:hover { background: var(--canvas); }

    .section-link.active {
      border-color: var(--gold-dark);
      background: #fff6d8;
      color: #533900;
    }

    .main-content {
      display: grid;
      gap: 22px;
      min-width: 0;
    }

    .section-heading {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: flex-end;
      justify-content: space-between;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }

    .card {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .stat-grid,
    .quick-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .stat-card span,
    .stat-card strong { display: block; }

    .stat-card span { color: var(--muted); font-weight: 700; }

    .stat-card strong {
      margin: 4px 0;
      font-family: "Besley", serif;
      font-size: 2rem;
    }

    .quick-card {
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .admin-home-panel {
      display: grid;
      gap: 18px;
      min-width: 0;
    }

    .admin-home-panel-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }

    .admin-home-panel-head > div { max-width: 760px; }
    .admin-home-panel-head h2 { font-size: clamp(1.65rem, 2.2vw, 2.2rem); }
    .admin-home-panel-head p { max-width: 690px; margin: 7px 0 0; color: var(--muted); }

    .admin-home-kicker {
      display: block;
      margin-bottom: 6px;
      color: #795700;
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .admin-home-count {
      display: flex;
      align-items: baseline;
      gap: 7px;
      color: #795700;
      white-space: nowrap;
    }

    .admin-home-count strong { font: 800 2rem/1 "Besley", serif; }
    .admin-home-count small { color: var(--muted); font-weight: 800; }

    .admin-task-list,
    .admin-history-list {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }

    .admin-task-list article {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      min-height: 116px;
      padding: 20px 22px;
    }

    .admin-task-list article + article,
    .admin-history-list article + article { border-top: 1px solid var(--line); }

    .admin-task-number,
    .admin-history-mark,
    .admin-job-icon {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 42px;
      height: 42px;
      border: 1px solid #d8b85c;
      border-radius: 10px;
      background: #fff8e5;
      color: #684b00;
      font-weight: 900;
    }

    .admin-task-list h3 {
      margin-top: 8px;
      font-size: 1.13rem;
    }

    .admin-task-list p { margin: 5px 0 0; color: var(--muted); }

    .admin-task-list button,
    .admin-history-list button {
      min-height: 46px;
      padding: 11px 16px;
      border: 1.5px solid var(--ink);
      border-radius: 9px;
      background: #fff;
      color: var(--ink);
      font-weight: 850;
      white-space: nowrap;
    }

    .admin-task-list button:hover,
    .admin-history-list button:hover,
    .admin-job-grid > button:hover { background: #fff8e5; }

    .admin-job-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .admin-job-grid > button {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      min-height: 92px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
      color: var(--ink);
      text-align: left;
    }

    .admin-job-grid > button span:nth-child(2) { display: grid; gap: 4px; }
    .admin-job-grid strong { font-size: 1rem; }
    .admin-job-grid small { color: var(--muted); font-size: .88rem; line-height: 1.35; }
    .admin-job-grid b { font-size: 1.2rem; }

    .admin-history-list article {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto auto;
      gap: 16px;
      align-items: center;
      min-height: 88px;
      padding: 16px 20px;
    }

    .admin-history-list p { margin: 5px 0 0; color: var(--muted); }

    .workspace.admin-home-workspace { grid-template-columns: minmax(0, 1fr); }

    .admin-menu-index {
      display: grid;
      gap: 18px;
    }

    .admin-menu-index-head {
      padding-bottom: 15px;
      border-bottom: 1px solid var(--line);
    }

    .admin-menu-index-head h2 { font-size: clamp(1.5rem, 2vw, 2rem); }
    .admin-menu-index-head p { margin: 6px 0 0; color: var(--muted); }

    .admin-menu-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      align-items: start;
    }

    .admin-menu-card {
      --menu-soft: #f5efe2;
      --menu-accent: #8a6500;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }

    .admin-menu-home,
    .admin-menu-news,
    .admin-menu-about { --menu-soft: #fbf0cf; --menu-accent: #8a6200; }

    .admin-menu-pay,
    .admin-menu-contact { --menu-soft: #e5f0e8; --menu-accent: #246143; }

    .admin-menu-tickets,
    .admin-menu-site { --menu-soft: #e6edf3; --menu-accent: #315a73; }

    .admin-menu-directory,
    .admin-menu-feed { --menu-soft: #eee9f2; --menu-accent: #624c70; }

    .admin-menu-card > header {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      min-height: 92px;
      padding: 15px;
      border-bottom: 1px solid var(--line);
      background: var(--menu-soft);
    }

    .admin-menu-card > header > span {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: 1px solid var(--menu-accent);
      border-radius: 9px;
      background: rgba(255,255,255,.62);
      color: var(--menu-accent);
      font-weight: 900;
    }

    .admin-menu-card h3 { font-size: 1.08rem; }
    .admin-menu-card header p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }

    .admin-menu-card > div { display: grid; }

    .admin-menu-card > div > button {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 44px;
      padding: 10px 14px;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      font-weight: 800;
      text-align: left;
    }

    .admin-menu-card > div > button:last-child { border-bottom: 0; }
    .admin-menu-card > div > button:hover { background: var(--menu-soft); }
    .admin-menu-card > div > button b { color: var(--menu-accent); font-size: 1.05rem; }

    .icon-box {
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      border-radius: 12px;
      background: #fff6d8;
      color: #533900;
      font-weight: 900;
    }

    .record-list {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .record-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      min-height: 88px;
      padding: 16px 18px;
      border-top: 1px solid var(--line);
    }

    .record-row:first-child { border-top: 0; }

    .record-row.selected {
      background: #fffaf0;
      box-shadow: inset 5px 0 0 var(--gold);
    }

    .record-row.media {
      grid-template-columns: 118px minmax(0, 1fr) auto;
    }

    .record-row.game {
      grid-template-columns: 148px minmax(0, 1fr) auto;
    }

    .media-thumb {
      width: 118px;
      height: 78px;
      object-fit: cover;
      border-radius: 10px;
      background: var(--canvas);
    }

    .matchup-thumb {
      display: grid;
      grid-template-columns: 52px auto 52px;
      gap: 8px;
      align-items: center;
      justify-content: start;
    }

    .team-logo-box {
      display: grid;
      width: 52px;
      height: 52px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: white;
    }

    .team-logo-box img {
      width: 42px;
      height: 42px;
      object-fit: contain;
    }

    .matchup-vs {
      color: var(--muted);
      font-weight: 800;
    }

    .featured-matchup {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      margin-top: 20px;
      padding: 20px;
      border-radius: 14px;
      background: linear-gradient(135deg, #171717, #3a321f);
      color: white;
    }

    .featured-matchup p {
      margin: 6px 0 0;
      color: #e7e1d2;
    }

    .featured-matchup-logos {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .featured-matchup-logos .team-logo-box {
      width: 72px;
      height: 72px;
    }

    .featured-matchup-logos img {
      width: 58px;
      height: 58px;
    }

    .article-cover-card {
      overflow: hidden;
      padding: 0;
    }

    .article-cover-card img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    .article-cover-card > div {
      display: grid;
      gap: 10px;
      padding: 20px;
    }

    .row-symbol,
    .date-block {
      display: grid;
      min-width: 56px;
      min-height: 56px;
      place-items: center;
      border-radius: 12px;
      background: var(--canvas);
      color: var(--ink);
      font-weight: 900;
      text-align: center;
    }

    .date-block span,
    .date-block strong { display: block; line-height: 1.1; }
    .date-block span { color: var(--muted); font-size: 0.78rem; }
    .date-block strong { font-size: 1.4rem; }

    .row-copy { min-width: 0; }
    .row-copy strong { font-size: 1.05rem; }

    .badge {
      display: inline-flex;
      margin-top: 8px;
      padding: 5px 10px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      font-size: 0.82rem;
      font-weight: 800;
    }

    .badge.warning { background: #fff1e7; color: #7d3b0c; }
    .badge.neutral { background: var(--blue-soft); color: #28527a; }

    .split {
      display: grid;
      grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
      gap: 18px;
      align-items: start;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 20px;
    }

    .field {
      display: grid;
      gap: 7px;
      color: var(--ink);
      font-weight: 750;
    }

    .field.wide { grid-column: 1 / -1; }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      min-height: 52px;
      padding: 12px 14px;
      border: 2px solid #b8b8b2;
      border-radius: 10px;
      background: white;
      color: var(--ink);
    }

    .field textarea { min-height: 130px; resize: vertical; }

    .help-text {
      margin: 0;
      color: var(--muted);
    }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .table-row {
      display: grid;
      grid-template-columns: minmax(180px, 1.1fr) minmax(130px, 0.8fr) minmax(130px, 0.8fr) auto;
      gap: 16px;
      align-items: center;
      min-width: 760px;
      padding: 16px 18px;
      border-top: 1px solid var(--line);
    }

    .table-row:first-child { border-top: 0; }
    .table-head { background: var(--canvas); color: var(--muted); font-weight: 800; }

    .save-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px;
      border: 2px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .save-message strong,
    .save-message span { display: block; }
    .save-message span { color: var(--muted); }

    .toast {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 20;
      max-width: 420px;
      padding: 16px 20px;
      border-radius: 12px;
      background: var(--ink);
      color: white;
      box-shadow: 0 18px 48px rgba(0,0,0,0.22);
      font-weight: 700;
      opacity: 0;
      transform: translateY(16px);
      pointer-events: none;
      transition: opacity 160ms ease, transform 160ms ease;
    }

    .toast.show { opacity: 1; transform: translateY(0); }

    .toast.undo {
      display: flex;
      gap: 18px;
      align-items: center;
      justify-content: space-between;
      pointer-events: auto;
    }

    .toast.undo button {
      min-width: 72px;
      min-height: 44px;
      border: 1px solid rgba(255,255,255,0.58);
      border-radius: 9px;
      background: transparent;
      color: white;
      font: inherit;
      font-weight: 800;
    }

    .toast.undo button:disabled { opacity: 0.7; }

    .create-dialog.admin-confirm-dialog { width: min(640px, calc(100% - 32px)); }

    .admin-confirm-dialog .create-dialog-body { display: grid; gap: 20px; }

    .admin-confirm-consequence {
      padding: 18px;
      border-left: 4px solid var(--gold);
      border-radius: 8px;
      background: #fbf5e5;
    }

    .admin-confirm-consequence p { margin: 6px 0 0; color: var(--muted); }

    .admin-confirm-reason { display: grid; gap: 8px; }

    .admin-confirm-reason small { color: var(--muted); font-size: 14px; }

    .admin-confirm-reason .field-error { color: var(--red); }

    .admin-operation-status {
      position: fixed;
      left: 24px;
      bottom: 24px;
      z-index: 40;
      width: min(390px, calc(100vw - 48px));
      overflow: hidden;
      border: 1px solid #b9b6ad;
      border-radius: 10px;
      background: #fffef9;
      color: #20251f;
    }

    .admin-operation-status[hidden] { display: none; }

    .admin-operation-status-copy {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 11px;
      padding: 13px 15px 12px;
      align-items: center;
    }

    .admin-operation-status-copy > span:last-child,
    .admin-operation-status strong,
    .admin-operation-status small { display: block; min-width: 0; }

    .admin-operation-status strong { font-size: 13px; line-height: 1.25; }
    .admin-operation-status small { margin-top: 3px; color: #6d736c; font-size: 10px; line-height: 1.4; }

    .admin-operation-status-mark {
      position: relative;
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border-radius: 50%;
      background: #fff1bf;
      color: #725400;
    }

    .admin-operation-status[data-state="working"] .admin-operation-status-mark::after {
      width: 14px;
      height: 14px;
      border: 2px solid #b38400;
      border-right-color: transparent;
      border-radius: 50%;
      content: "";
      animation: admin-operation-spin .75s linear infinite;
    }

    .admin-operation-status[data-state="success"] { border-color: #8fc6ad; }
    .admin-operation-status[data-state="success"] .admin-operation-status-mark { background: #dff4e9; color: #176348; }
    .admin-operation-status[data-state="success"] .admin-operation-status-mark::after { content: "✓"; font-size: 18px; font-weight: 900; }
    .admin-operation-status[data-state="error"] { border-color: #dda8a8; }
    .admin-operation-status[data-state="error"] .admin-operation-status-mark { background: #fbe4e4; color: #9c2f2f; }
    .admin-operation-status[data-state="error"] .admin-operation-status-mark::after { content: "!"; font-size: 18px; font-weight: 900; }

    .admin-operation-progress { height: 4px; overflow: hidden; background: #ece8dc; }
    .admin-operation-progress span { display: block; width: 38%; height: 100%; background: #d6a718; transform: translateX(-110%); animation: admin-operation-progress 1.15s ease-in-out infinite; }
    .admin-operation-status[data-state="success"] .admin-operation-progress span { width: 100%; background: #2c8967; transform: none; animation: none; }
    .admin-operation-status[data-state="error"] .admin-operation-progress span { width: 100%; background: #b84b4b; transform: none; animation: none; }

    .admin-operation-visible .toast { bottom: 132px; }
    .button.is-busy { cursor: wait; }

    @keyframes admin-operation-spin { to { transform: rotate(360deg); } }
    @keyframes admin-operation-progress {
      0% { transform: translateX(-110%); }
      55% { transform: translateX(120%); }
      100% { transform: translateX(260%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .admin-operation-status[data-state="working"] .admin-operation-status-mark::after { animation: none; border-right-color: #b38400; }
      .admin-operation-progress span { width: 100%; transform: none; animation: none; opacity: .68; }
    }

    .create-dialog {
      width: min(980px, calc(100% - 32px));
      max-height: 92vh;
      padding: 0;
      overflow: hidden;
      border: 0;
      border-radius: 18px;
      background: var(--paper);
      color: var(--ink);
      box-shadow: 0 30px 90px rgba(0,0,0,0.28);
    }

    .create-dialog::backdrop {
      background: rgba(17,17,17,0.64);
      backdrop-filter: blur(3px);
    }

    .create-dialog-shell {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      max-height: 92vh;
    }

    .create-dialog-shell > form {
      display: grid;
      min-height: 0;
      overflow: hidden;
      grid-template-rows: minmax(0, 1fr) auto;
    }

    .create-dialog-header,
    .create-dialog-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      background: var(--paper);
    }

    .create-dialog-header { border-bottom: 1px solid var(--line); }
    .create-dialog-footer { border-top: 1px solid var(--line); }

    .create-dialog-header-copy {
      display: grid;
      gap: 4px;
      max-width: 720px;
    }

    .create-dialog-header-copy p,
    .create-dialog-footer p {
      margin: 0;
      color: var(--muted);
    }

    .create-dialog-close {
      width: 48px;
      height: 48px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--paper);
      color: var(--ink);
      font-size: 1.5rem;
      font-weight: 700;
    }

    .create-dialog-body {
      overflow-y: auto;
      padding: 24px;
    }

    .create-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
      gap: 24px;
      align-items: start;
    }

    .create-form {
      display: grid;
      gap: 20px;
    }

    .create-form-section {
      display: grid;
      gap: 14px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--line);
    }

    .create-form-section:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .create-form-section-heading {
      display: grid;
      gap: 4px;
    }

    .create-form-section-heading p {
      margin: 0;
      color: var(--muted);
    }

    .create-check {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      min-height: 48px;
      padding: 12px 0;
      font-weight: 700;
    }

    .create-check input {
      width: 24px;
      height: 24px;
      margin: 0;
      accent-color: var(--gold-dark);
    }

    .create-check span small {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
      text-transform: none;
    }

    .create-check.is-disabled {
      cursor: not-allowed;
      opacity: .6;
    }

    .create-preview {
      position: sticky;
      top: 0;
      display: grid;
      gap: 14px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--canvas);
    }

    .create-preview-label {
      color: var(--muted);
      font-weight: 800;
    }

    .create-preview-image {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 12px;
      background: white;
    }

    .create-preview-copy {
      display: grid;
      gap: 6px;
    }

    .create-preview-copy p {
      margin: 0;
      color: var(--muted);
    }

    .create-preview-card {
      display: grid;
      gap: 12px;
      min-height: 220px;
      align-content: center;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: white;
    }

    .create-preview-card strong,
    .create-preview-card span { display: block; }

    .create-preview-price {
      font-family: "Besley", serif;
      font-size: 2.4rem;
      font-weight: 700;
    }

    .create-matchup-preview {
      display: grid;
      gap: 16px;
      place-items: center;
      min-height: 220px;
      padding: 22px;
      border-radius: 14px;
      background: linear-gradient(135deg, #171717, #3a321f);
      color: white;
      text-align: center;
    }

    .create-matchup-preview .featured-matchup-logos {
      justify-content: center;
    }

    .create-matchup-preview p {
      margin: 0;
      color: #e7e1d2;
    }

    .create-file-preview {
      display: grid;
      gap: 8px;
    }

    .create-file-preview input[type="file"] {
      min-height: 52px;
      padding: 10px;
      border: 2px dashed #aaa79d;
      border-radius: 10px;
      background: var(--canvas);
    }

    .dialog-footer-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .preview-shell {
      min-height: 100vh;
      background: var(--paper);
    }

    .preview-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      justify-content: space-between;
      padding: 18px clamp(20px, 4vw, 56px);
      border-bottom: 1px solid var(--line);
      background: var(--ink);
      color: white;
    }

    .preview-toolbar p { margin: 3px 0 0; color: #d9d9d9; }

    .public-nav,
    .public-content {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }

    .public-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      border-bottom: 1px solid var(--line);
    }

    .public-links { display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); }

    .public-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
      gap: 34px;
      align-items: center;
      padding: 70px 0;
      border-bottom: 1px solid var(--line);
    }

    .public-hero p { color: var(--muted); font-size: 1.15rem; }

    .hero-art {
      min-height: 290px;
      overflow: hidden;
      border-radius: 22px;
      background: var(--canvas);
    }

    .hero-art img {
      width: 100%;
      height: 100%;
      min-height: 290px;
      object-fit: cover;
    }

    .public-section { padding: 46px 0; border-bottom: 1px solid var(--line); }

    .public-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 22px;
    }

    .public-card {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .public-card p { color: var(--muted); }

    /* Match the typography and sizing used by the main website views. */
    .site-header {
      min-height: 78px;
      padding: 14px clamp(18px, 4vw, 54px);
      background: rgba(251, 247, 237, 0.92);
      backdrop-filter: blur(18px);
    }

    .brand-mark {
      width: 34px;
      height: 58px;
      border-radius: 0;
      background: transparent;
    }

    .brand-mark img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .brand strong {
      font-family: "Besley", serif;
      font-size: 18px;
      line-height: 1.05;
    }

    .brand span:not(.brand-mark) {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    h1 {
      font-size: clamp(40px, 4vw, 56px);
      font-weight: 800;
      line-height: 1;
    }

    h2 {
      font-size: clamp(26px, 3vw, 40px);
      font-weight: 800;
      line-height: 1.04;
    }

    h3 {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.08;
    }

    .page-heading p {
      font-size: clamp(16px, 1.4vw, 18px);
      line-height: 1.45;
    }

    .section-heading p,
    .card p,
    .row-copy p,
    .help-text,
    .create-dialog-header-copy p,
    .create-form-section-heading p {
      font-size: 14px;
      line-height: 1.42;
    }

    .button {
      min-height: 46px;
      padding: 0 18px;
      border: 1px solid var(--ink);
      border-radius: var(--radius);
      font-size: 14px;
      font-weight: 800;
    }

    .button.primary {
      color: var(--ink);
      background: var(--gold);
      box-shadow: none;
    }

    .button.primary:hover {
      color: var(--ink);
      background: #ffd56a;
      border-color: var(--ink);
    }

    .page-tabs-wrap {
      padding: 14px clamp(18px, 4vw, 54px);
      background: rgba(251, 247, 237, 0.96);
    }

    .page-tabs-label {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .page-tab {
      min-height: 44px;
      padding: 10px 8px;
      border: 0;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      font-size: 14px;
      font-weight: 700;
    }

    .page-tab:hover { background: transparent; }

    .page-tab.active {
      color: var(--ink);
      background: transparent;
      border-color: var(--gold);
    }

    .page-shell {
      padding: clamp(36px, 5vw, 64px) clamp(18px, 4vw, 54px);
    }

    .section-nav,
    .card,
    .record-list,
    .table-wrap,
    .save-bar,
    .create-dialog,
    .create-preview,
    .create-preview-card,
    .public-card {
      border-radius: var(--radius);
    }

    .card,
    .record-list,
    .table-wrap,
    .section-nav,
    .save-bar,
    .create-dialog,
    .public-card {
      background: var(--paper);
    }

    .card,
    .record-list,
    .table-wrap,
    .public-card {
      box-shadow: 0 12px 28px rgba(21,18,13,0.08);
    }

    .section-link {
      min-height: 46px;
      padding: 10px 12px;
      border-radius: 7px;
      font-size: 14px;
      font-weight: 700;
    }

    .section-link.active {
      color: var(--ink);
      background: rgba(241,184,45,0.22);
      border-color: var(--gold-dark);
    }

    .row-copy strong { font-size: 16px; }

    .row-copy p,
    .table-row,
    .save-message span { font-size: 13px; }

    .badge {
      font-size: 11px;
      font-weight: 800;
    }

    .field {
      gap: 6px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .field input,
    .field select,
    .field textarea {
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid rgba(21,18,13,0.2);
      border-radius: var(--radius);
      color: var(--ink);
      background: var(--paper);
      text-transform: none;
    }

    .field textarea { min-height: 110px; }

    .create-check {
      min-height: 44px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .create-dialog-close {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      font-size: 20px;
    }

    button,
    .button,
    .button.primary,
    .button.light,
    .button.danger,
    .page-tab,
    .section-link,
    .icon-button {
      box-shadow: none !important;
    }

    .site-header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
    }

    .main-nav {
      justify-self: center;
      display: flex;
      gap: 8px;
      align-items: center;
      max-width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .main-nav::-webkit-scrollbar { display: none; }

    .main-nav button {
      position: relative;
      flex: 0 0 auto;
      min-height: 44px;
      padding: 10px 8px;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .main-nav button::after {
      content: "";
      position: absolute;
      right: 8px;
      bottom: 5px;
      left: 8px;
      height: 2px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
    }

    .main-nav button:hover,
    .main-nav button.active { color: var(--ink); }

    .main-nav button:hover::after,
    .main-nav button.active::after { transform: scaleX(1); }

    .icon-button {
      position: relative;
      display: inline-grid;
      width: 44px;
      height: 44px;
      padding: 0;
      place-items: center;
      border: 1px solid rgba(21,18,13,0.22);
      border-radius: 50%;
      background: var(--paper);
      color: var(--ink);
    }

    .icon-button svg {
      width: 24px;
      height: 24px;
    }

    .account-dot {
      position: absolute;
      right: 2px;
      bottom: 2px;
      width: 10px;
      height: 10px;
      border: 2px solid var(--paper);
      border-radius: 50%;
      background: var(--green);
    }

    .create-dialog.is-previewing .create-layout { grid-template-columns: 1fr; }
    .create-dialog.is-previewing .create-form { display: none; }
    .create-dialog.is-previewing .create-preview {
      position: static;
      width: min(720px, 100%);
      margin: 0 auto;
    }

    .action-view {
      display: grid;
      gap: 22px;
    }

    .action-summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }

    .action-summary p { margin: 6px 0 0; color: var(--muted); }

    .action-list {
      display: grid;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }

    .action-list-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 15px 16px;
      border-top: 1px solid var(--line);
    }

    .action-list-row:first-child { border-top: 0; }

    .action-list-row strong,
    .action-list-row span { display: block; }
    .action-list-row span { margin-top: 3px; color: var(--muted); font-size: 13px; }

    .action-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .action-detail {
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--canvas);
    }

    .action-detail span,
    .action-detail strong { display: block; }
    .action-detail span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
    .action-detail strong { margin-top: 4px; }

    /* Local route switcher: this is prototype chrome, not part of the real website. */
    .prototype-view-bar {
      display: flex;
      gap: 18px;
      align-items: center;
      justify-content: space-between;
      padding: 12px clamp(18px, 4vw, 54px);
      border-bottom: 1px solid #d7cfbf;
      background: #f2ecdf;
    }

    .prototype-view-label strong,
    .prototype-view-label span { display: block; }
    .prototype-view-label strong { font-size: 13px; }
    .prototype-view-label span { margin-top: 2px; color: var(--muted); font-size: 12px; }

    .prototype-view-links {
      display: flex;
      gap: 6px;
      align-items: center;
      overflow-x: auto;
      max-width: min(920px, 72vw);
      padding: 2px;
      scrollbar-width: thin;
    }

    .prototype-view-link {
      flex: 0 0 auto;
      min-height: 40px;
      padding: 8px 11px;
      border: 1px solid transparent;
      border-radius: 7px;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
      font-weight: 750;
    }

    .prototype-view-link:hover,
    .prototype-view-link.active {
      border-color: #bda949;
      background: #fff8dd;
    }

    .production-main {
      width: min(1240px, calc(100% - 40px));
      margin: 0 auto;
      padding-bottom: 72px;
    }

    .route-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
      gap: clamp(30px, 6vw, 82px);
      align-items: center;
      padding: clamp(58px, 8vw, 106px) 0;
      border-bottom: 1px solid var(--line);
    }

    .route-hero.no-art { grid-template-columns: minmax(0, 820px); }
    .route-hero-copy { max-width: 760px; }
    .route-eyebrow {
      display: block;
      margin-bottom: 16px;
      color: #72520c;
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .route-hero h1 { max-width: 820px; }
    .route-hero p {
      max-width: 720px;
      margin: 20px 0 0;
      color: var(--muted);
      font-size: clamp(17px, 1.7vw, 21px);
      line-height: 1.55;
    }

    .route-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 28px;
    }

    .route-hero-art {
      min-height: 390px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #eee6d6;
    }

    .route-hero-art img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 390px;
      object-fit: cover;
    }

    .route-section {
      padding: clamp(48px, 7vw, 82px) 0;
      border-bottom: 1px solid var(--line);
    }

    .route-section:last-child { border-bottom: 0; }
    .route-section-heading {
      display: flex;
      gap: 24px;
      align-items: end;
      justify-content: space-between;
      margin-bottom: 26px;
    }
    .route-section-heading > div { max-width: 720px; }
    .route-section-heading p { margin: 10px 0 0; color: var(--muted); font-size: 16px; }

    .route-card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .route-card {
      display: flex;
      min-height: 240px;
      flex-direction: column;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }

    .route-card p { margin: 10px 0 22px; color: var(--muted); }
    .route-card .button { align-self: flex-start; margin-top: auto; }
    .route-card-number {
      display: grid;
      width: 42px;
      height: 42px;
      margin-bottom: 30px;
      place-items: center;
      border-radius: 50%;
      background: var(--gold);
      font-weight: 850;
    }

    .history-layout,
    .contact-layout,
    .giving-layout,
    .account-layout,
    .event-feature-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
      gap: 24px;
      align-items: start;
    }

    .history-image,
    .event-feature-image {
      min-height: 420px;
      overflow: hidden;
      border-radius: var(--radius);
      background: #e7dece;
    }

    .history-image img,
    .event-feature-image img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }

    .history-copy,
    .contact-panel,
    .giving-panel,
    .account-panel,
    .event-feature-copy {
      padding: clamp(24px, 4vw, 38px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }

    .history-copy p,
    .contact-panel p,
    .giving-panel p,
    .account-panel p,
    .event-feature-copy p { color: var(--muted); }

    .ledger {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }

    .ledger-row {
      display: grid;
      grid-template-columns: 96px minmax(220px, 1.4fr) minmax(170px, 0.9fr) minmax(150px, 0.8fr) 120px;
      gap: 18px;
      align-items: center;
      min-height: 106px;
      padding: 16px 18px;
      border-top: 1px solid var(--line);
    }

    .ledger-row:first-child { border-top: 0; }
    .ledger-row.ledger-head {
      min-height: 48px;
      background: #f1ebdf;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .ledger-main {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
    }

    .ledger-main.no-image { grid-template-columns: 1fr; }
    .ledger-cover {
      width: 86px;
      height: 64px;
      object-fit: cover;
      border-radius: 6px;
      background: #e5ddce;
    }

    .ledger-main strong,
    .ledger-main span { display: block; }
    .ledger-main span,
    .ledger-cell small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

    .date-tile {
      display: grid;
      width: 68px;
      height: 68px;
      place-items: center;
      align-content: center;
      border: 1px solid #cabd9d;
      border-radius: 6px;
      background: #fff8e5;
      line-height: 1;
    }
    .date-tile small { margin-bottom: 5px; font-size: 11px; font-weight: 850; text-transform: uppercase; }
    .date-tile strong { font-family: "Besley", serif; font-size: 24px; }

    .season-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--line);
    }
    .season-tab {
      min-height: 46px;
      padding: 10px 5px;
      border: 0;
      border-bottom: 3px solid transparent;
      background: transparent;
      color: var(--muted);
      font-weight: 800;
    }
    .season-tab.active { border-color: var(--gold); color: var(--ink); }

    .game-matchup {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) 58px;
      gap: 12px;
      align-items: center;
    }
    .team-logo {
      display: grid;
      width: 58px;
      height: 58px;
      padding: 6px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: white;
    }
    .team-logo img { width: 100%; height: 100%; object-fit: contain; }
    .game-matchup-copy { text-align: center; }
    .game-matchup-copy strong,
    .game-matchup-copy span { display: block; }
    .game-matchup-copy span { margin-top: 4px; color: var(--muted); font-size: 12px; }

    .leadership-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .leader-card {
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 18px;
      align-items: center;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }
    .leader-photo {
      display: grid;
      width: 82px;
      height: 96px;
      place-items: center;
      overflow: hidden;
      border-radius: 6px;
      background: #e7dcc4;
      color: #4e3b12;
      font-family: "Besley", serif;
      font-size: 23px;
      font-weight: 800;
    }
    .leader-card p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }

    .photo-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
    }
    .photo-tile {
      position: relative;
      grid-column: span 4;
      min-height: 260px;
      overflow: hidden;
      border-radius: var(--radius);
      background: #e9e0d1;
    }
    .photo-tile.wide { grid-column: span 8; }
    .photo-tile img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
    .photo-tile-overlay {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 36px 18px 16px;
      color: white;
      background: linear-gradient(transparent, rgba(10,8,5,0.86));
    }
    .photo-tile-overlay strong,
    .photo-tile-overlay span { display: block; }
    .photo-tile-overlay span { margin-top: 3px; font-size: 12px; }

    .contact-paths,
    .account-nav { display: grid; gap: 10px; }
    .contact-path,
    .account-nav button {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      min-height: 68px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--paper);
      color: var(--ink);
      text-align: left;
    }
    .contact-path span,
    .account-nav button span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
    .contact-path b { font-size: 20px; }

    .account-layout { grid-template-columns: 260px minmax(0, 1fr); }
    .account-nav button { min-height: 56px; }
    .account-nav button.active { border-color: var(--gold-dark); background: #fff7dc; }
    .account-summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 22px 0;
    }
    .account-stat { padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--canvas); }
    .account-stat span,
    .account-stat strong { display: block; }
    .account-stat span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
    .account-stat strong { margin-top: 5px; font-size: 17px; }

    .amount-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0; }
    .amount-option {
      min-height: 54px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: white;
      color: var(--ink);
      font-weight: 850;
    }
    .amount-option.active { border-color: var(--ink); background: var(--gold); }
    .secure-note { margin-top: 16px; color: var(--muted); font-size: 12px; }

    .site-footer {
      display: flex;
      gap: 24px;
      align-items: center;
      justify-content: space-between;
      padding: 34px clamp(18px, 4vw, 54px);
      border-top: 1px solid var(--line);
      background: #f2ecdf;
    }
    .site-footer strong,
    .site-footer span { display: block; }
    .site-footer strong { font-family: "Besley", serif; }
    .site-footer span { margin-top: 3px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
    .site-footer nav { display: flex; gap: 8px; align-items: center; }
    .site-footer button { min-height: 44px; padding: 8px 12px; border: 0; background: transparent; font-weight: 750; }
    .site-footer .footer-social-links { display: flex; gap: 8px; margin-left: 8px; padding-left: 16px; align-items: center; border-left: 1px solid var(--line); }
    .site-footer .footer-social-link {
      display: inline-flex;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
      border-radius: 50%;
      background: color-mix(in srgb, white 58%, transparent);
      color: var(--ink);
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
    }
    .site-footer .footer-social-link svg { width: 18px; height: 18px; fill: currentColor; }
    .site-footer .footer-social-link:hover { transform: translateY(-1px); border-color: currentColor; background: white; }
    .site-footer .footer-social-link.facebook:hover { color: #1877f2; }
    .site-footer .footer-social-link.linkedin:hover { color: #0a66c2; }
    .site-footer .footer-social-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

    @media (max-width: 980px) {
      .workspace,
      .split,
      .public-hero,
      .create-layout,
      .route-hero,
      .history-layout,
      .contact-layout,
      .giving-layout,
      .event-feature-layout { grid-template-columns: 1fr; }

      .route-card-grid,
      .leadership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

      .admin-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

      .prototype-view-bar { align-items: flex-start; flex-direction: column; }
      .prototype-view-links { max-width: 100%; width: 100%; }

      .ledger { overflow-x: auto; }
      .ledger-row { min-width: 920px; }

      .section-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .admin-home-shell .section-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }

      .section-nav-label { grid-column: 1 / -1; }

      .site-header {
        grid-template-columns: 1fr auto;
      }

      .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
        width: 100%;
      }
    }

    @media (max-width: 720px) {
      body { font-size: 16px; }

      .site-header,
      .page-heading,
      .save-bar { align-items: stretch; }

      .header-actions,
      .heading-actions,
      .save-actions,
      .header-actions .button,
      .heading-actions .button,
      .save-actions .button { width: 100%; }

      .stat-grid,
      .quick-grid,
      .form-grid,
      .public-grid,
      .section-nav { grid-template-columns: 1fr; }

      .admin-job-grid { grid-template-columns: 1fr; }

      .admin-menu-grid { grid-template-columns: 1fr; }

      .admin-home-shell .section-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        padding: 12px;
      }

      .admin-home-shell .section-nav-label { grid-column: 1 / -1; }
      .admin-home-shell .section-link {
        min-height: 58px;
        padding: 8px 6px;
        font-size: .82rem;
        line-height: 1.2;
        text-align: center;
      }

      .admin-task-list article,
      .admin-history-list article {
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: start;
      }

      .admin-task-list article > button,
      .admin-history-list article > button {
        grid-column: 1 / -1;
        width: 100%;
      }

      .admin-history-list article > .badge { justify-self: start; }

      .field.wide,
      .section-nav-label { grid-column: auto; }

      .record-row { grid-template-columns: 1fr; }

      .record-row.media,
      .record-row.game,
      .featured-matchup { grid-template-columns: 1fr; }

      .row-symbol,
      .date-block,
      .media-thumb,
      .matchup-thumb { justify-self: start; }

      .media-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
      }

      .row-actions,
      .row-actions .button { width: 100%; }

      .toast { right: 16px; bottom: 16px; left: 16px; }
      .admin-operation-status { right: 16px; bottom: 16px; left: 16px; width: auto; }
      .admin-operation-visible .toast { bottom: 126px; }

      .create-dialog {
        width: calc(100% - 16px);
        max-height: 96vh;
      }

      .create-dialog-shell { max-height: 96vh; }

      .create-dialog-header,
      .create-dialog-body,
      .create-dialog-footer { padding: 18px; }

      .create-dialog-footer { padding-bottom: max(18px, env(safe-area-inset-bottom)); }

      .create-preview { position: static; }

      .dialog-footer-actions,
      .dialog-footer-actions .button { width: 100%; }

      .action-summary,
      .action-detail-grid,
      .route-card-grid,
      .leadership-grid,
      .account-layout,
      .account-summary-grid { grid-template-columns: 1fr; }

      .production-main { width: min(100% - 32px, 1240px); }
      .route-hero-art,
      .route-hero-art img { min-height: 280px; }
      .route-section-heading,
      .site-footer { align-items: flex-start; flex-direction: column; }
      .site-footer nav { width: 100%; flex-wrap: wrap; }
      .site-footer .footer-social-links { margin-left: auto; }
      .photo-tile,
      .photo-tile.wide { grid-column: 1 / -1; }
      .amount-options { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: 0.01ms !important; }
    }
/* Ticket and event controls group operational settings without turning the editor into a spreadsheet. */
.admin-control-group { display:grid; gap:16px; margin-top:20px; padding:20px; border:1px solid var(--line,#d8d2c5); border-radius:10px; background:#fbf8f0; }
.admin-control-group h3 { margin:3px 0 0; font-family:Georgia,serif; font-size:24px; }
.admin-control-group > div:first-child p { margin:5px 0 0; color:#6f6b62; }
.admin-inline-actions { display:flex; justify-content:flex-end; margin:12px 0; }

/* Usage & retention is an operations ledger: dense enough for routine monitoring,
   but with deliberate separation between observation and destructive controls. */
.usage-console {
  display: grid;
  gap: 18px;
  color: #17211d;
}

.usage-console-head {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 22px 24px;
  border: 1px solid #cfd7d0;
  border-top: 4px solid #25372f;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(244, 195, 63, .12) 1px, transparent 1px) 0 0 / 32px 100%,
    #fdfcf7;
}

.usage-console-head h2,
.usage-retention h2,
.usage-footprint h2 {
  margin: 3px 0 5px;
  font-family: "Besley", serif;
  line-height: 1.12;
}

.usage-console-head h2 { font-size: clamp(1.45rem, 2.2vw, 2rem); }
.usage-console-head p,
.usage-retention header p,
.usage-footprint header p { max-width: 720px; margin: 0; color: #5c665f; }
.usage-console-head-actions { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }

.usage-health {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #bed2c4;
  border-radius: 999px;
  background: #edf7f0;
  color: #185d3e;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.usage-health i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(24, 93, 62, .12);
}

.usage-health.watch { border-color: #e1cc86; background: #fff8dd; color: #7d5a06; }
.usage-health.risk { border-color: #e0aaa1; background: #fff0ed; color: #a13627; }

.usage-ledger {
  overflow: hidden;
  border: 1px solid #cfd7d0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 37, 29, .05);
}

.usage-ledger-columns,
.usage-ledger-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.45fr) minmax(145px, .72fr) minmax(190px, 1fr) minmax(190px, .92fr);
  gap: 18px;
  align-items: center;
}

.usage-ledger-columns {
  padding: 10px 18px;
  background: #25372f;
  color: #dce9e1;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.usage-ledger-row {
  position: relative;
  min-height: 104px;
  padding: 16px 18px 16px 22px;
  border-bottom: 1px solid #e4e8e3;
}

.usage-ledger-row:last-child { border-bottom: 0; }
.usage-ledger-row::before {
  position: absolute;
  inset: 14px auto 14px 0;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: #3f8a64;
  content: "";
}
.usage-ledger-row.watch::before { background: #d19a13; }
.usage-ledger-row.risk::before { background: #b24131; }
.usage-ledger-row.unavailable::before { background: #9ca29e; }

.usage-ledger-name,
.usage-ledger-reading,
.usage-ledger-window { min-width: 0; }
.usage-ledger-name { display: grid; gap: 4px; align-content: center; }
.usage-ledger-name strong { font-size: .98rem; }
.usage-ledger-name small,
.usage-ledger-window small { color: #6b746e; font-size: .76rem; line-height: 1.35; }

.usage-source {
  width: max-content;
  color: #40725a;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.usage-source.connection-required { color: #806f5a; }
.usage-source.site-accounted { color: #7a681f; }

.usage-ledger-reading { display: flex; flex-direction: column; }
.usage-ledger-reading strong {
  overflow: hidden;
  font-family: "Besley", serif;
  font-size: 1.12rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-ledger-row.unavailable .usage-ledger-reading strong { font-family: "IBM Plex Sans", sans-serif; font-size: .9rem; color: #6f756f; }
.usage-ledger-reading span { margin-top: 3px; color: #68716b; font-size: .75rem; }

.usage-ledger-scale { display: grid; grid-template-columns: minmax(90px, 1fr) 46px; gap: 9px; align-items: center; }
.usage-ledger-scale > div {
  position: relative;
  overflow: hidden;
  height: 12px;
  border: 1px solid #d9dfda;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(38, 55, 47, .12) calc(10% - 1px) 10%),
    #edf0ed;
}
.usage-ledger-scale > div > i {
  position: absolute;
  inset: 0 auto 0 0;
  background: #4b936e;
}
.usage-ledger-row.watch .usage-ledger-scale > div > i { background: #d4a01c; }
.usage-ledger-row.risk .usage-ledger-scale > div > i { background: #bc4b3b; }
.usage-ledger-scale > div > b { position: absolute; z-index: 1; inset: -2px auto -2px 60%; width: 1px; background: #7f867f; }
.usage-ledger-scale > div > b + b { left: 80%; background: #9b4a3d; }
.usage-ledger-scale > span { font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; }

.usage-ledger-window { display: grid; gap: 4px; }
.usage-ledger-window > strong { font-size: .79rem; }
.usage-projection {
  width: max-content;
  padding: 2px 7px;
  border-radius: 3px;
  background: #eef5f0;
  color: #316e50;
  font-size: .68rem;
  font-weight: 800;
}
.usage-projection.watch { background: #fff3c8; color: #765308; }
.usage-projection.risk { background: #fde8e4; color: #9d3426; }

.usage-lower-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .72fr); gap: 18px; align-items: stretch; }
.usage-retention,
.usage-footprint,
.usage-analytics-connection {
  border: 1px solid #cfd7d0;
  border-radius: 8px;
  background: #fff;
}

.usage-retention > header,
.usage-footprint > header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid #e1e6e2;
}
.usage-retention > header > span {
  padding: 5px 8px;
  border: 1px solid #dcc35f;
  border-radius: 3px;
  background: #fff8d8;
  color: #765508;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.usage-retention-action {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 17px 22px;
  border-bottom: 1px solid #e7eae7;
}
.usage-retention-action:last-child { border-bottom: 0; }
.usage-retention-action.empty { background: #fbfcfa; }
.usage-retention-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #c8d2ca;
  border-radius: 5px;
  background: #eef4ef;
  color: #294f3d;
  font-family: "Besley", serif;
  font-weight: 800;
}
.usage-retention-action h3 { margin: 2px 0 3px; font-family: "Besley", serif; font-size: 1rem; }
.usage-retention-action p { margin: 0 0 5px; color: #5e6861; font-size: .82rem; }
.usage-retention-action small { display: block; color: #707871; font-size: .73rem; }
.usage-retention-action .button { min-height: 40px; padding: 8px 12px; font-size: .76rem; }

.usage-footprint { display: flex; flex-direction: column; background: #25372f; color: #f4f1e8; border-color: #25372f; }
.usage-footprint > header { display: block; border-color: rgba(255,255,255,.13); }
.usage-footprint .admin-data-label { color: #f4c33f; }
.usage-footprint header p { color: #bdc9c2; font-size: .82rem; }
.usage-footprint > div { flex: 1; padding: 7px 20px; }
.usage-footprint > div > span {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.usage-footprint > div > span:last-child { border-bottom: 0; }
.usage-footprint > div i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: rgba(244,195,63,.14); color: #f4c33f; font-style: normal; font-weight: 800; }
.usage-footprint > div b { font-size: .8rem; }
.usage-footprint > div strong { font-family: "Besley", serif; font-size: 1rem; font-variant-numeric: tabular-nums; }
.usage-footprint > div small { grid-column: 2 / -1; margin-top: -7px; color: #aebcb4; font-size: .7rem; }
.usage-footprint > footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.13); color: #d5ded8; font-size: .75rem; }

.usage-analytics-connection { overflow: hidden; }
.usage-analytics-connection.setup-needed {
  border-color: #c79a20;
  box-shadow: 0 8px 24px rgba(84, 60, 5, .08);
}
.usage-analytics-connection.setup-needed > summary {
  background:
    linear-gradient(90deg, rgba(244, 195, 63, .18) 1px, transparent 1px) 0 0 / 32px 100%,
    #fffdf5;
}
.usage-analytics-connection > summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  gap: 13px;
  align-items: center;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}
.usage-analytics-connection > summary::-webkit-details-marker { display: none; }
.usage-analytics-connection > summary > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #e7f3eb;
  color: #216242;
  font-weight: 900;
}
.usage-analytics-connection > summary strong,
.usage-analytics-connection > summary small { display: block; }
.usage-analytics-connection > summary small { margin-top: 2px; color: #69716c; }
.usage-analytics-connection > summary > i { transition: transform .18s ease; }
.usage-analytics-connection[open] > summary > i { transform: rotate(180deg); }
.usage-analytics-body { display: grid; gap: 16px; padding: 18px 20px 20px; border-top: 1px solid #e0e5e1; background: #f9faf7; }
.usage-analytics-permission { display: flex; gap: 12px; align-items: center; padding: 12px; border-left: 3px solid #3d795a; background: #edf5ef; }
.usage-analytics-permission > span { padding: 4px 6px; border-radius: 2px; background: #2d684a; color: #fff; font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.usage-analytics-permission p,
.usage-analytics-permission strong,
.usage-analytics-permission small { display: block; margin: 0; }
.usage-analytics-permission small { color: #5c6a61; }
.usage-analytics-errors { margin: 0; padding: 12px 12px 12px 30px; border: 1px solid #e5b3ac; background: #fff0ee; color: #8c3024; font-size: .8rem; }
.usage-analytics-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.usage-analytics-fields label { display: grid; gap: 6px; color: #303c35; font-size: .78rem; font-weight: 800; }
.usage-analytics-fields input { min-width: 0; height: 43px; padding: 9px 11px; border: 1px solid #cbd2cc; border-radius: 5px; background: #fff; }
.usage-analytics-body > footer { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.usage-analytics-body > footer .button { min-height: 42px; padding: 8px 13px; }
.usage-analytics-body > footer small { margin-left: auto; color: #68736c; }
.usage-limit-note { margin: 0; color: #69716c; font-size: .74rem; }

@media (max-width: 1120px) {
  .usage-ledger-columns { display: none; }
  .usage-ledger-row { grid-template-columns: minmax(210px, 1.2fr) minmax(130px, .7fr) minmax(180px, 1fr); }
  .usage-ledger-window { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; align-items: center; padding-top: 8px; border-top: 1px dashed #d9dfda; }
  .usage-lower-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .usage-console-head,
  .usage-retention > header { align-items: stretch; flex-direction: column; }
  .usage-console-head-actions,
  .usage-console-head-actions .button { width: 100%; }
  .usage-console-head-actions { align-items: stretch; flex-direction: column; }
  .usage-health { justify-content: center; }
  .usage-ledger-row { grid-template-columns: 1fr; gap: 10px; }
  .usage-ledger-reading { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: end; }
  .usage-ledger-reading span { padding-bottom: 2px; }
  .usage-ledger-window { grid-column: auto; grid-template-columns: 1fr; }
  .usage-retention-action { grid-template-columns: 36px minmax(0, 1fr); }
  .usage-retention-action .button { grid-column: 1 / -1; width: 100%; }
  .usage-analytics-fields { grid-template-columns: 1fr; }
  .usage-analytics-body > footer small { width: 100%; margin-left: 0; }
}