@layer views {
  /* Dashboard */
  .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
  .stat-grid .card { padding: var(--space-5); }
  .hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-hero-bg);
    color: var(--color-on-hero);
  }
  .hero > * { position: relative; }
  .hero::after { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -90px; border-radius: 50%; border: 36px solid var(--color-hero-ring); }
  .hero h2 { font-size: var(--fs-xl); color: var(--color-on-hero); }
  .hero .button { align-self: flex-start; border-color: var(--color-on-hero); background: var(--color-on-hero); color: var(--color-primary); }

  /* Teams */
  .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
  .team-card { display: flex; flex-direction: column; gap: var(--space-3); }
  .team-card__top { display: flex; align-items: center; justify-content: space-between; }
  .emblem { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
  .team-card__numbers { display: flex; gap: var(--space-6); }
  .team-card__numbers strong { display: block; font-size: var(--fs-xl); }
  .team-card__numbers span { font-size: var(--fs-sm); color: var(--color-text-muted); }
  .team-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

  /* Tournaments */
  .tournament-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
  .tournament-card { display: flex; flex-direction: column; gap: var(--space-3); }
  .tournament-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); color: var(--color-text-muted); }
  .tournament-card__meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
  .tournament-card__next { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--fs-sm); }
  .tournament-card .button { margin-top: auto; }

  .next-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-soft); border-left: 6px solid var(--color-primary); }
  .next-step p { max-width: 60ch; }
  .champion { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-warning-soft); }
  .champion .icon { width: 40px; height: 40px; color: var(--color-warning); }
  .champion strong { display: block; font-size: var(--fs-xl); }

  .definition-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); margin: 0; font-size: var(--fs-sm); }
  .definition-list dt { color: var(--color-text-muted); }
  .definition-list dd { margin: 0; font-weight: var(--fw-semibold); }

  .participant { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
  .participant:last-child { border-bottom: 0; }
  .participant__name { flex: 1; font-weight: var(--fw-semibold); }

  /* Bracket */
  .bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--space-6); overflow-x: auto; padding-bottom: var(--space-2); }
  .bracket__round { display: flex; flex-direction: column; justify-content: space-around; gap: var(--space-4); }
  .bracket__round-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }

  .match-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-align: left;
  }
  button.match-card:hover { border-color: var(--color-primary-hover); box-shadow: var(--shadow-1); }
  .match-card--bye { background: var(--color-surface-2); border-style: dashed; }
  .match-card__team { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-md); }
  .match-card__team--winner { font-weight: var(--fw-bold); }
  .match-card__team--tbd { color: var(--color-text-muted); font-style: italic; }
  .match-card__score { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
  .match-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); }

  /* Match detail and sheet */
  .scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-2); text-align: center; }
  .scoreboard__team { font-weight: var(--fw-semibold); }
  .scoreboard__score { font-size: var(--fs-3xl); letter-spacing: 0.04em; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
  .scoreboard__detail { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--color-text-muted); }

  .timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .timeline li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
  .timeline__minute { min-width: 3.5rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

  .sheet-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .sheet-team { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .sheet-team__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .sheet-team__header h3 { font-size: var(--fs-lg); }
  .goal-row { display: grid; grid-template-columns: minmax(0, 1fr) 6rem auto; gap: var(--space-2); align-items: end; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
  .goal-row .field--period, .goal-row .check { grid-column: 1 / -1; }
  .goal-row .check { min-height: auto; }

  .shootout { display: flex; flex-direction: column; gap: var(--space-3); }
  .shootout__kicks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2); }
  .shootout__status { font-weight: var(--fw-semibold); }

  /* Player file */
  .profile { display: flex; align-items: center; gap: var(--space-5); }
  .profile h2 { font-size: var(--fs-2xl); }
  .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
  .facts div { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
  .facts span { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-transform: uppercase; }
  .facts strong { font-size: var(--fs-lg); }

  .photo-upload { display: flex; gap: var(--space-4); align-items: center; }
  .photo-upload img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--color-surface-2); }

  /* Reports */
  .report-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
  .report-filters .field { min-width: 180px; }
  .report-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); }
  .print-only { display: none; }

  @media (max-width: 1100px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .stat-grid, .facts, .sheet-columns { grid-template-columns: minmax(0, 1fr); }
    .profile { flex-direction: column; text-align: center; }
    .report-filters .field { min-width: 0; flex: 1 1 100%; }
  }
}