/* ===========================
   Material You-ish (M3) theme
   - Bright green + white (light mode)
   - Soft, rounded, tonal surfaces
   =========================== */

:root{
  color-scheme: light;

  /* Seed / Primary */
  --md-sys-color-primary: #00C853;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D9FFE8;
  --md-sys-color-on-primary-container: #0B2E1A;

  /* Secondary */
  --md-sys-color-secondary: #006C45;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #C6FFE5;
  --md-sys-color-on-secondary-container: #003827;

  --md-sys-color-tertiary: #00BFA5;
  --md-sys-color-on-tertiary: #00382F;
  --md-sys-color-tertiary-container: #A7FFEB;
  --md-sys-color-on-tertiary-container: #003730;

  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;

  /* Background / Surfaces: keep them white and airy */
  --md-sys-color-background: #FFFFFF;
  --md-sys-color-on-background: #0F2418;

  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-on-surface: #0F2418;
  --md-sys-color-surface-variant: #E7F1EA;
  --md-sys-color-on-surface-variant: #33403A;

  --md-sys-color-outline: #8AA094;
  --md-sys-color-outline-variant: #D2DED7;

  --md-sys-color-surface-container-low: #FFFFFF;
  --md-sys-color-surface-container: #FFFFFF;
  --md-sys-color-surface-container-high: #F4FFF8;

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* Softer shadow than pure black */
  --elevation-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  --elevation-2: 0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.08);
  --elevation-3: 0 10px 24px rgba(0,0,0,.12);

  --transition: 160ms cubic-bezier(.2,0,0,1);
  --container-max: 1040px;
}

@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;

    --md-sys-color-primary: #5CFF91;
    --md-sys-color-on-primary: #003914;
    --md-sys-color-primary-container: #005225;
    --md-sys-color-on-primary-container: #B7F7C9;

    --md-sys-color-secondary: #70DBAD;
    --md-sys-color-on-secondary: #003827;
    --md-sys-color-secondary-container: #00513A;
    --md-sys-color-on-secondary-container: #8CF7C7;

    --md-sys-color-background: #0E1510;
    --md-sys-color-on-background: #E0E3DE;

    --md-sys-color-surface: #0E1510;
    --md-sys-color-on-surface: #E0E3DE;

    --md-sys-color-surface-variant: #414941;
    --md-sys-color-on-surface-variant: #C0C9BF;

    --md-sys-color-outline: #8A9389;
    --md-sys-color-outline-variant: #414941;

    --md-sys-color-surface-container-low: #141C16;
    --md-sys-color-surface-container: #18211A;
    --md-sys-color-surface-container-high: #1D271F;

    --elevation-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.40);
    --elevation-2: 0 2px 6px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.42);
    --elevation-3: 0 10px 24px rgba(0,0,0,.35);
  }
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  background: radial-gradient(1200px 700px at 15% -20%, rgba(0, 200, 83, 0.22), transparent 60%),
              radial-gradient(900px 600px at 110% 0%, rgba(0, 191, 165, 0.18), transparent 55%),
              var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
}

.app{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.container{
  width: min(var(--container-max), 100%);
  margin: 0 auto;
  padding: 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Top bar */
.top-bar{
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--md-sys-color-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
}

.top-bar__title{
  min-width: 0;
}

.headline{
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0.2px;
}

.subtitle{
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70vw;
}

.top-bar__actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Card */
.card{
  background: var(--md-sys-color-surface-container);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 65%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-1);
  padding: 18px;
}

.card + .card{ margin-top: 14px; }

.card__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.card__title{
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.2px;
}

.card__support{
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 76%, transparent);
}

.card__footer{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.step-chip{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 80%, transparent);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 650;
  font-size: 12px;
}

/* Layout grid for import */
.grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px){
  .grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Fields */
.field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field--inline{
  flex-direction: column;
}

.field label{
  font-size: 13px;
  font-weight: 650;
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 86%, transparent);
}

.field__hint{
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 75%, transparent);
}

textarea, input[type="text"], input[type="search"]{
  width: 100%;
  font-size: 14px;
  color: var(--md-sys-color-on-surface);
  background: color-mix(in srgb, var(--md-sys-color-surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 78%, transparent);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  outline: none;
  transition: border var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

textarea{ resize: vertical; min-height: 200px; }

input[type="search"]{ padding-left: 14px; }

textarea:focus, input:focus{
  border-color: color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-outline-variant));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);
  background: color-mix(in srgb, var(--md-sys-color-surface) 96%, transparent);
}

/* Buttons */
.btn{
  appearance: none;
  border: none;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border var(--transition), color var(--transition), opacity var(--transition);
}

.btn:active{ transform: translateY(1px); }
.btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-filled{
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--elevation-1);
}
.btn-filled:hover{ box-shadow: var(--elevation-2); }

.btn-tonal{
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 78%, transparent);
  color: var(--md-sys-color-on-primary-container);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 20%, var(--md-sys-color-outline-variant));
}
.btn-tonal:hover{
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 92%, transparent);
}

.btn-outlined{
  background: transparent;
  color: var(--md-sys-color-on-surface);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 70%, transparent);
}
.btn-outlined:hover{
  background: color-mix(in srgb, var(--md-sys-color-surface-variant) 45%, transparent);
}

.btn-text{
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 8px 10px;
}
.btn-text:hover{
  background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
}

.file-btn{ cursor: pointer; }

.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  background: color-mix(in srgb, var(--md-sys-color-surface) 86%, transparent);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--elevation-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border var(--transition);
}

.icon-btn--accent{
  border-color: color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-outline-variant));
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 88%, transparent);
  color: var(--md-sys-color-on-primary-container);
}

.icon-btn--accent:hover{
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 96%, transparent);
}

.icon-btn:hover{
  box-shadow: var(--elevation-2);
  background: color-mix(in srgb, var(--md-sys-color-surface) 96%, transparent);
}

.icon-btn:active{ transform: translateY(1px); }

.spacer{ flex: 1 1 auto; }
.hidden{ display: none !important; }

/* Controls (step2) */
.controls{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 420px){
  .stat-row{ grid-template-columns: 1fr; }
}

.stat{
  background: color-mix(in srgb, var(--md-sys-color-surface) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.stat__label{
  font-size: 12px;
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 68%, transparent);
}

.stat__value{
  font-size: 22px;
  font-weight: 800;
  margin-top: 4px;
}

.stat__value--pos{ color: var(--md-sys-color-primary); }
.stat__value--neg{ color: color-mix(in srgb, var(--md-sys-color-error) 85%, transparent); }

.toolbar{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.field--search{ flex: 1 1 240px; }

.add-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.add-row input{
  flex: 1 1 220px;
}

.autosave-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.autosave-row__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Chips */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--md-sys-color-primary) 14%, var(--md-sys-color-surface-container-high));
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 65%, transparent);
  font-weight: 650;
  font-size: 12px;
}

/* Player list */
.list{
  margin-top: 14px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  background: color-mix(in srgb, var(--md-sys-color-surface) 80%, transparent);
}

.player-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 65%, transparent);
}

.player-item:last-child{ border-bottom: none; }

.player-item:hover{
  background: color-mix(in srgb, var(--md-sys-color-primary) 7%, transparent);
}

.player-left{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.player-index{
  width: 42px;
  flex: 0 0 auto;
  font-size: 12px;
  opacity: 0.7;
}

.player-name{
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-tags{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.player-meta{
  min-width: 0;
}

.chip-small{
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 70%, transparent);
}

.chip-good{
  background: color-mix(in srgb, var(--md-sys-color-primary) 18%, var(--md-sys-color-surface-container-high));
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 90%, transparent);
}

.chip-warn{
  background: color-mix(in srgb, #FFB300 22%, var(--md-sys-color-surface-container-high));
  color: var(--md-sys-color-on-surface);
}

.chip-new{
  background: color-mix(in srgb, #9C27B0 18%, var(--md-sys-color-surface-container-high));
  color: var(--md-sys-color-on-surface);
}

.player-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.action-btn{
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  font-weight: 750;
  font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  background: color-mix(in srgb, var(--md-sys-color-surface) 86%, transparent);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition), border var(--transition);
}

.action-btn:hover{
  background: color-mix(in srgb, var(--md-sys-color-surface) 96%, transparent);
  box-shadow: var(--elevation-1);
}

.action-btn:active{ transform: translateY(1px); }

.action-btn--primary{
  background: var(--md-sys-color-primary);
  border-color: color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent);
  color: var(--md-sys-color-on-primary);
}

.action-btn--danger{
  background: color-mix(in srgb, var(--md-sys-color-error-container) 75%, transparent);
  border-color: color-mix(in srgb, var(--md-sys-color-error) 30%, var(--md-sys-color-outline-variant));
  color: var(--md-sys-color-on-error-container);
}

/* Mobile layout tuning for player items */
@media (max-width: 640px){
  .player-item{
    align-items: flex-start;
    flex-direction: column;
  }
  .player-left{
    width: 100%;
  }
  .player-actions{
    width: 100%;
    justify-content: flex-end;
  }
  .player-name{ white-space: normal; }
}

/* Dialog */
.dialog-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 50;
}

.dialog{
  width: min(520px, 100%);
  background: var(--md-sys-color-surface-container);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-3);
  overflow: hidden;
}

.dialog--large{
  width: min(980px, 100%);
}

.dialog__header{
  padding: 16px 18px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent);
}

.dialog__title{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.dialog__body{
  padding: 16px 18px;
  line-height: 1.6;
  font-size: 14px;
  white-space: pre-line;
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 88%, transparent);
  max-height: min(70vh, 760px);
  overflow: auto;
}

.dialog__footer{
  padding: 14px 18px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent);
}

.dialog__footer--wrap{
  flex-wrap: wrap;
}

/* Export preview */
.export-container{
  background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 65%, transparent);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.export-title{
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 8px;
}

.export-stats{
  text-align: center;
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 12px;
}

.export-table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

.export-table th,
.export-table td{
  padding: 10px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 65%, transparent);
  font-size: 13px;
}

.export-table th{
  text-align: left;
  font-weight: 800;
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 70%, transparent);
}

.export-table tr:last-child td{ border-bottom: none; }

/* Snackbar */
.snackbar{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 28px));
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 92%, transparent);
  color: var(--md-sys-color-surface);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: var(--elevation-3);
  display: none;
  z-index: 60;
}

.snackbar.show{ display: block; }

/* Screen reader only */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}