:root {
  --bg: #050505;
  --bg-2: #0a0a0a;
  --bg-card: #101010;
  --bg-card-2: #141414;
  --bg-hover: #1a1a1a;
  --lime: #20E41E;
  --lime-2: #47FF45;
  --lime-dim: rgba(32, 228, 30, 0.14);
  --lime-glow: rgba(32, 228, 30, 0.32);
  --text: #f4f4f4;
  --muted: #8b8b8b;
  --faint: #5c5c5c;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --danger: #ff5c6c;
  --ok: #20E41E;
  --warn: #ffc14a;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --font: "Prompt", "Noto Sans Thai", system-ui, sans-serif;
  --sidebar: 248px;
  --app-bg: #070707;
  --panel: #0b0b0b;
  --input-bg: #0b0b0b;
  --ghost-hover: rgba(255, 255, 255, 0.04);
  --link-hover: #ffffff;
  --thumb-bg: #000000;
  --table-hover: #121212;
}

html[data-fas-theme="light"]:has(body.fas-backend) {
  background: #e6ece8;
}
body.fas-backend {
  --bg: #070A08;
  --bg-2: #090D0A;
  --bg-card: #121914;
  --bg-card-2: #0D120F;
  --bg-hover: #172019;
  --lime: #41E36A;
  --lime-2: #34C759;
  --lime-dim: rgba(65, 227, 106, 0.12);
  --lime-glow: rgba(65, 227, 106, 0.14);
  --dark-green: #163D23;
  --text: #F4F7F5;
  --muted: #8C9890;
  --faint: #626D66;
  --border: #222B25;
  --border-strong: #2C362F;
  --danger: #FF4655;
  --ok: #41E36A;
  --warn: #F5C451;
  --info: #4DA3FF;
  --chart-1: #FF6B7A;
  --chart-2: #3EC6D4;
  --chart-3: #4DA3FF;
  --chart-4: #41E36A;
  --chart-5: #B08CFF;
  --chart-6: #FF9F6B;
  --chart-line: #A8D4C0;
  --radius: 12px;
  --radius-sm: 10px;
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  --app-bg: #070A08;
  --panel: #090D0A;
  --input-bg: #0D120F;
  --ghost-hover: rgba(244, 247, 245, 0.04);
  --link-hover: #F4F7F5;
  --thumb-bg: #0D120F;
  --table-hover: #172019;
  background: var(--app-bg);
  color: var(--text);
}
html[data-fas-theme="light"] body.fas-backend {
  color-scheme: light;
  --bg: #e6ece8;
  --bg-2: #dce5df;
  --bg-card: #ffffff;
  --bg-card-2: #f3f7f4;
  --bg-hover: #e8f3eb;
  --lime: #1b8a3e;
  --lime-2: #157534;
  --lime-dim: rgba(27, 138, 62, 0.12);
  --lime-glow: rgba(27, 138, 62, 0.1);
  --dark-green: #146332;
  --text: #141916;
  --muted: #4a544d;
  --faint: #758078;
  --border: #c5d0c8;
  --border-strong: #aeb9b1;
  --shadow: 0 10px 28px rgba(20, 28, 22, 0.08);
  --app-bg: #e6ece8;
  --panel: #ffffff;
  --input-bg: #ffffff;
  --ghost-hover: rgba(20, 25, 22, 0.05);
  --link-hover: #141916;
  --thumb-bg: #dce5df;
  --table-hover: #eef5f0;
  --chart-1: #D12B3C;
  --chart-2: #0E8A94;
  --chart-3: #1F6FEB;
  --chart-4: #1B8A3E;
  --chart-5: #6B4FBB;
  --chart-6: #C45A1A;
  --chart-line: #146332;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { min-height: 100%; width: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }

.circuit {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 70% 20%, rgba(32, 228, 30, 0.07), transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(32, 228, 30, 0.04), transparent 50%),
    #050505;
}
.circuit::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(32, 228, 30, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 228, 30, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 80% 30%, black 10%, transparent 70%);
}
.circuit::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 90px, rgba(32, 228, 30, 0.06) 90px 91px),
    repeating-linear-gradient(0deg, transparent 0 110px, rgba(32, 228, 30, 0.05) 110px 111px);
  opacity: 0.55;
  mask-image: linear-gradient(120deg, transparent 20%, black 55%, transparent 90%);
}

html[data-fas-theme="light"] body.fas-backend .circuit {
  background:
    radial-gradient(ellipse 80% 50% at 70% 20%, rgba(27, 138, 62, 0.06), transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(27, 138, 62, 0.04), transparent 50%),
    #e6ece8;
}
html[data-fas-theme="light"] body.fas-backend .circuit::before {
  background-image:
    linear-gradient(rgba(22, 24, 30, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 24, 30, 0.045) 1px, transparent 1px);
}
html[data-fas-theme="light"] body.fas-backend .circuit::after {
  opacity: 0.25;
}
.auth-theme-bar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
}
.login-wrap { position: relative; }
.theme-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-card);
}
.theme-switch-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.theme-switch-btn:hover { color: var(--text); }
.theme-switch-btn.active {
  background: var(--lime);
  color: #111;
}

html[data-fas-theme="light"] body.fas-backend .trust-item {
  color: var(--muted);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  border-radius: 999px;
  padding: 12px 20px;
  transition: 0.18s ease;
  white-space: nowrap;
}
.btn-lime {
  background: var(--lime);
  color: #111;
  box-shadow: 0 0 0 1px rgba(32, 228, 30, 0.2), 0 8px 24px rgba(32, 228, 30, 0.18);
}
.btn-lime:hover { background: var(--lime-2); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--ghost-hover); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* landing */
.landing { position: relative; z-index: 1; min-height: 100vh; overflow-x: hidden; }
.landing-hero-only { min-height: 100vh; min-height: 100dvh; height: auto; overflow: visible; }
.fas-space-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #050505;
}
.fas-space-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050505;
}

.fas-academy-map-section {
  position: relative;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(32, 228, 30, 0.08), transparent 60%),
    #050505;
  color: #f4f4f4;
  padding: 56px 24px 72px;
  font-family: "Prompt", "Noto Sans Thai", system-ui, sans-serif;
}
.fas-academy-map-copy {
  max-width: 920px;
  margin: 0 auto 18px;
  text-align: center;
}
.fas-academy-map-copy h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.fas-academy-map-sub {
  margin-top: 8px;
  color: #47ff45;
  font-size: 17px;
  font-weight: 500;
}
.fas-academy-map-count {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}
.fas-academy-map-layout {
  width: min(1100px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.fas-academy-map-layout.has-provinces {
  grid-template-columns: minmax(0, 1fr) 210px;
}
.fas-academy-map {
  isolation: isolate;
  z-index: 0;
  position: relative;
  width: 100%;
  height: min(68vh, 620px);
  min-height: 360px;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #0c120e;
  border: 1px solid rgba(32, 228, 30, 0.28);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.fas-academy-map .leaflet-container,
.fas-academy-map.leaflet-container {
  width: 100%;
  height: min(68vh, 620px);
  min-height: 360px;
  background: #0c120e;
  font-family: inherit;
}
@media (pointer: coarse) {
  .fas-academy-map.leaflet-container {
    touch-action: pan-y !important;
  }
}
.fas-academy-map .leaflet-tile-pane {
  filter: brightness(0.62) invert(1) contrast(1.05) hue-rotate(168deg) saturate(0.4);
}
.fas-academy-map .leaflet-control-zoom a {
  background: #121812;
  color: #47ff45;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  width: 34px;
  height: 34px;
  line-height: 34px;
}
.fas-academy-map .leaflet-control-zoom a:hover {
  background: #1a261c;
  color: #fff;
}
.fas-academy-map .leaflet-control-attribution {
  background: rgba(5, 5, 5, 0.78);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  max-width: 70%;
}
.fas-academy-map .leaflet-control-attribution a {
  color: #47ff45;
}
.fas-map-pin-wrap {
  background: none;
  border: 0;
}
.fas-map-pin-svg {
  display: block;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
}
.fas-academy-map .leaflet-heatmap-layer {
  pointer-events: none;
}
.fas-academy-map .fas-map-cluster-wrap {
  background: transparent;
  border: 0;
}
.fas-map-cluster {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #071207;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: radial-gradient(circle at 38% 32%, #d8ffb8, #20e41e 46%, rgba(32, 228, 30, 0.55) 74%, rgba(32, 228, 30, 0.12) 100%);
  box-shadow: 0 0 0 6px rgba(32, 228, 30, 0.16), 0 8px 16px rgba(0, 0, 0, 0.35);
}
.fas-map-cluster-sm { font-size: 14px; }
.fas-map-cluster-md {
  font-size: 16px;
  box-shadow: 0 0 0 8px rgba(32, 228, 30, 0.22), 0 0 18px rgba(32, 228, 30, 0.28), 0 10px 20px rgba(0, 0, 0, 0.4);
}
.fas-map-cluster-lg {
  font-size: 18px;
  box-shadow: 0 0 0 12px rgba(32, 228, 30, 0.28), 0 0 28px rgba(32, 228, 30, 0.5), 0 12px 24px rgba(0, 0, 0, 0.45);
}
.fas-academy-map-provinces {
  margin: 0;
  padding: 14px 14px 8px;
  border-radius: 18px;
  border: 1px solid rgba(32, 228, 30, 0.22);
  background: #0c120e;
}
.fas-academy-map-provinces h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #47ff45;
}
.fas-academy-map-provinces ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: fas-prov;
}
.fas-academy-map-provinces li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  counter-increment: fas-prov;
}
.fas-academy-map-provinces li::before {
  content: counter(fas-prov);
  color: rgba(32, 228, 30, 0.7);
  font-weight: 800;
  font-size: 11px;
  width: 1.1em;
  flex: none;
}
.fas-map-province-name {
  flex: 1;
  min-width: 0;
}
.fas-map-province-count {
  color: #20e41e;
  font-weight: 700;
  white-space: nowrap;
}
.fas-academy-map .leaflet-popup-content-wrapper {
  background: #101610;
  color: #f4f4f4;
  border-radius: 14px;
  border: 1px solid rgba(32, 228, 30, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.fas-academy-map .leaflet-popup-tip {
  background: #101610;
}
.fas-academy-map .leaflet-popup-content {
  margin: 12px 14px;
  line-height: 1.45;
}
.fas-academy-map .leaflet-popup-close-button {
  color: rgba(255, 255, 255, 0.8);
}
.fas-map-popup-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.fas-map-popup p span {
  color: rgba(255, 255, 255, 0.62);
}
.fas-map-popup a {
  display: inline-block;
  margin-top: 8px;
  color: #101610;
  background: #20e41e;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 13px;
}
.fas-academy-map-status {
  max-width: 1100px;
  margin: 10px auto 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  min-height: 1.2em;
}
@media (max-width: 640px) {
  .fas-academy-map-section {
    padding: 28px 14px calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .fas-academy-map-copy h2 {
    font-size: 24px;
  }
  .fas-academy-map-sub {
    font-size: 14px;
  }
  .fas-academy-map-layout,
  .fas-academy-map-layout.has-provinces {
    grid-template-columns: 1fr;
  }
  .fas-academy-map,
  .fas-academy-map.leaflet-container {
    height: 62vh;
    min-height: 380px;
    border-radius: 16px;
  }
  .fas-academy-map .leaflet-control-attribution {
    font-size: 10px;
  }
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 36px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(#050505ee, #050505aa 70%, transparent);
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.04em; }
.brand .logo-mark { width: 44px; height: 44px; object-fit: contain; display: block; background: transparent; }
.brand .brand-lockup { height: 56px; width: auto; display: block; object-fit: contain; }
.logo-full {
  display: block;
  height: auto;
  width: min(420px, 92%);
  max-width: 100%;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 8px 28px rgba(32,228,30,0.32));
}
.sidebar .brand-lockup { display: none; }
.sidebar .sidebar-logo {
  display: block;
  width: 88px;
  height: 80px;
  min-width: 88px;
  flex-shrink: 0;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
  filter: none;
}
.sidebar .logo-full-light,
.sidebar .logo-mark-light { display: none; }
html[data-fas-theme="light"] body.fas-backend .sidebar .logo-full-dark { display: none; }
html[data-fas-theme="light"] body.fas-backend .sidebar .logo-full-light {
  display: block;
}
@media (min-width: 801px) {
  html[data-fas-theme="light"] body.fas-backend .app.sidebar-collapsed .sidebar .logo-full-light {
    display: none;
  }
  html[data-fas-theme="light"] body.fas-backend .app.sidebar-collapsed .sidebar .brand .logo-mark-dark {
    display: none;
  }
  html[data-fas-theme="light"] body.fas-backend .app.sidebar-collapsed .sidebar .brand .logo-mark-light {
    display: block;
  }
}
.login-card .logo-mark { width: 72px; height: 72px; margin-bottom: 8px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 28px; color: #cfcfcf; font-size: 14px; font-weight: 500; }
.nav-links a { display: inline-flex; align-items: center; gap: 6px; }
.nav-links a:hover { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-actions .login-link { font-size: 14px; font-weight: 600; color: #ddd; }
.nav-actions .login-link:hover { color: var(--lime); }

.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  padding: 28px 36px 64px;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
}
.kicker { font-size: 72px; font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; }
.kicker-sub { color: var(--lime); font-size: 26px; font-weight: 700; margin-top: 10px; letter-spacing: -0.02em; }
.slogan { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; margin-top: 22px; line-height: 1.25; }
.hero p.lead { color: var(--muted); max-width: 520px; margin-top: 16px; line-height: 1.65; font-size: 15px; }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.trust { display: flex; gap: 28px; margin-top: 42px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 10px; color: #c9c9c9; font-size: 13px; font-weight: 500; }
.trust-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--lime-dim); color: var(--lime); border: 1px solid rgba(32,228,30,0.2);
}

.dash-preview {
  background: linear-gradient(180deg, #161616, #0d0d0d);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 80px rgba(32,228,30,0.06);
  transform: perspective(1400px) rotateY(-8deg) rotateX(4deg);
  min-height: 560px;
}
.dash-preview-inner { display: grid; grid-template-columns: 72px 1fr; min-height: 560px; }

.section { padding: 80px 36px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.section h2 { font-size: 32px; letter-spacing: -0.03em; margin-bottom: 10px; }
.section .sub { color: var(--muted); margin-bottom: 32px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card, .price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.feature-card h3 { margin: 12px 0 8px; font-size: 18px; }
.feature-card p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.icon-pill {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--lime-dim); color: var(--lime);
  display: grid; place-items: center; border: 1px solid rgba(32,228,30,0.18);
}
.price-card.featured { border-color: rgba(32,228,30,0.45); box-shadow: 0 0 0 1px rgba(32,228,30,0.15); }
.price { font-size: 36px; font-weight: 800; margin: 8px 0 16px; }
.price span { font-size: 14px; color: var(--muted); font-weight: 500; }
.price-card ul { list-style: none; display: grid; gap: 8px; color: #cfcfcf; font-size: 14px; margin-bottom: 20px; }
.footer {
  border-top: 1px solid var(--border);
  padding: 28px 36px 40px;
  display: flex; justify-content: space-between; color: var(--muted); font-size: 13px;
  position: relative; z-index: 1;
}

/* login */
.login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.login-visual {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-panel {
  display: grid;
  place-items: safe center;
  align-content: safe center;
  padding: 40px 24px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}
.login-card {
  width: 100%;
  max-width: 420px;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.login-card h1 { font-size: 26px; letter-spacing: -0.03em; margin: 8px 0 6px; }
.login-card .hint { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text); }
.field-req {
  color: #ff5a5a;
  font-weight: 800;
  margin-left: 3px;
}
.field input, .field select, .field textarea, .search, .select {
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  font-size: 14px;
}
.field input, .field select, .field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.field input:focus, .search:focus, .select:focus { border-color: rgba(32,228,30,0.55); box-shadow: 0 0 0 3px var(--lime-dim); }
.password-field { position: relative; width: 100%; min-width: 0; }
.password-field input { width: 100%; padding-right: 46px; box-sizing: border-box; }
.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--lime);
  background: var(--lime-dim);
  outline: none;
}
.error { color: var(--danger); font-size: 13px; margin-bottom: 10px; }
.auth-success {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(32,228,30,.25);
  border-radius: 10px;
  background: var(--lime-dim);
  color: var(--lime);
  font-size: 13px;
  line-height: 1.5;
}
.btn-block + .btn-block { margin-top: 10px; }
.mail-help {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.mail-help strong { color: #e8f0d8; font-weight: 700; }
.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 16px;
}
.remember-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #d5d5d5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.remember-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--lime);
  cursor: pointer;
}
.fas-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.fas-switch.full {
  display: flex;
  width: 100%;
}
.venue-guest-switch {
  display: flex;
  margin: 8px 0 16px;
}
.fas-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.fas-switch-ui {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #9aa39d;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.fas-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease;
}
.fas-switch input:checked + .fas-switch-ui {
  background: #1b8a3e;
  box-shadow: inset 0 0 0 1px rgba(27, 138, 62, 0.18);
}
.fas-switch input:checked + .fas-switch-ui::after {
  transform: translateX(20px);
}
.fas-switch input:focus-visible + .fas-switch-ui {
  box-shadow: 0 0 0 3px rgba(27, 138, 62, 0.22);
}
.fas-switch-label {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}
body.fas-backend .fas-switch-ui {
  background: #3a433d;
}
body.fas-backend .fas-switch input:checked + .fas-switch-ui {
  background: #27c85a;
}
html[data-fas-theme="light"] body.fas-backend .fas-switch-ui {
  background: #c5d0c8;
}
html[data-fas-theme="light"] body.fas-backend .fas-switch input:checked + .fas-switch-ui {
  background: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .fas-switch-label {
  color: #141916;
}
.auth-forgot {
  margin: 0;
  text-align: right;
  font-size: 12px;
}
.auth-forgot a { color: var(--lime); font-weight: 700; }
.demo-box {
  margin-top: 16px;
  background: var(--lime-dim);
  border: 1px solid rgba(32,228,30,0.2);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12px;
  color: #dce8b8;
  line-height: 1.55;
}
.auth-switch, .auth-back {
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.auth-switch a, .auth-back a { color: var(--lime); font-weight: 700; }
.auth-contact {
  color: #c9c9c9;
  text-decoration: none;
}
.auth-contact b {
  color: var(--lime);
  font-weight: 700;
}
.auth-contact:hover,
.auth-contact:focus-visible {
  color: #fff;
}
.auth-contact:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 8px;
}
.auth-contact-desktop {
  white-space: nowrap;
}
.auth-contact-mobile {
  display: none;
}
.auth-entry-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 16px 0 8px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.auth-entry-tabs a,
.auth-entry-tabs span {
  display: block;
  padding: 10px 8px;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
}
.auth-entry-tabs span[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.auth-entry-tabs a[aria-selected="true"] {
  background: #41e36a;
  color: #10210a;
}
html[data-fas-theme="light"] .auth-entry-tabs {
  background: #e7eee8;
}
html[data-fas-theme="light"] .auth-entry-tabs a[aria-selected="true"] {
  background: #1b8a3e;
  color: #ffffff;
}
.register-wrap { grid-template-columns: 1.1fr 0.9fr; }
.register-card { max-width: 420px; }
.register-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.login-card .field input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.login-card .field select,
.login-card .thai-calendar-trigger {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
}
.login-card .field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 96px;
  resize: vertical;
}
.login-card .field input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
}
.register-fields > * { min-width: 0; max-width: 100%; }
.register-fields .full { grid-column: 1 / -1; }
.member-body-metrics[hidden],
.register-org-box[hidden] { display: none; }
.auth-kind-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 16px;
}
.auth-kind-tabs label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.auth-kind-tabs input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.auth-kind-tabs label:has(input:checked) {
  background: #41e36a;
  border-color: #41e36a;
  color: #10210a;
}
html[data-fas-theme="light"] .auth-kind-tabs label:has(input:checked) {
  background: #1b8a3e;
  border-color: #1b8a3e;
  color: #ffffff;
}
.register-org-box {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* จอคอม: การ์ดเข้าสู่ระบบและสมัครสมาชิกกว้างเต็มแผงขวา ช่องกรอกแบ่งสองคอลัมน์เท่ากัน
   มือถือไม่ใช้ก้อนนี้ ยังเต็มความกว้างคอลัมน์เดียวตาม @media (max-width: 800px) */
@media (min-width: 1101px) {
  .auth-kind-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .login-wrap,
  .register-wrap { grid-template-columns: 0.78fr 1.22fr; }
  .login-card,
  .register-card {
    max-width: none;
    width: 100%;
  }
  #login-form.login-card {
    max-width: 440px;
  }
  .register-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
  }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .login-card,
  .register-card { max-width: 860px; }
  .register-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
  }
}
.thai-birth-native { display: none; }
.thai-calendar-picker { position: relative; }
.thai-calendar-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.thai-calendar-trigger svg { color: var(--lime); flex: 0 0 auto; }
.thai-calendar-trigger.placeholder span { color: var(--muted); }
.thai-calendar-trigger:focus,
.thai-calendar-trigger:focus-visible {
  outline: none;
  border-color: rgba(32, 228, 30, 0.55);
  box-shadow: 0 0 0 3px var(--lime-dim);
}
.thai-calendar {
  display: none;
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  width: min(370px, calc(100vw - 44px));
  background: #0e1828;
  color: #f7f9fc;
  border: 1px solid #26354b;
  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.35);
}
.thai-calendar.open { display: block; }
.calendar-head { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; }
.thai-calendar .calendar-head select {
  background: #111d2f;
  border: 1px solid #2b3a51;
  border-radius: 10px;
  color: #fff;
  padding: 10px 12px;
  font: inherit;
  box-shadow: none;
}
.calendar-week,
.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-week {
  margin: 14px 0 7px;
  color: #91a0b6;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}
.calendar-day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #f4f7fb;
  font-weight: 700;
  cursor: pointer;
}
.calendar-day:hover,
.calendar-day:focus { background: #203047; }
.calendar-day.muted { color: #65758d; }
.calendar-day.selected,
.calendar-day.selected.today {
  background: #1a2738;
  box-shadow: inset 0 0 0 2px #20e41e;
  color: #fff;
}
.calendar-day.today { box-shadow: inset 0 0 0 1px #20e41e; }
.calendar-day.disabled,
.calendar-day.disabled:hover,
.calendar-day.disabled:focus {
  background: transparent;
  color: #4d5c72;
  cursor: not-allowed;
  pointer-events: none;
}
.thai-month-picker {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 8px;
}
.calendar-foot {
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed #2d3a4f;
  margin-top: 12px;
  padding-top: 11px;
}
.calendar-foot button {
  border: 0;
  border-radius: 10px;
  padding: 9px 13px;
  font-weight: 700;
  cursor: pointer;
}
.calendar-clear { background: #202c3e; color: #aeb8c8; }
.calendar-today { background: #20e41e; color: #081208; }
.register-guardian-box {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--input-bg);
}
.register-guardian-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.register-guardian-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.register-otp-box {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid rgba(32, 228, 30, 0.25);
  border-radius: 12px;
  background: rgba(32, 228, 30, 0.05);
}
.register-otp-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.otp-boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.otp-digit {
  width: 100%;
  min-height: 52px;
  padding: 8px 0;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text);
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  outline: none;
}
.otp-digit:focus {
  border-color: rgba(32, 228, 30, 0.55);
  box-shadow: 0 0 0 3px var(--lime-dim);
}
.otp-boxes-square {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
}
.otp-boxes-square .otp-digit {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 12px;
  font-size: 22px;
  line-height: 48px;
}
.otp-modal {
  position: fixed;
  inset: 0;
  width: calc(100% - 32px);
  max-width: 420px;
  margin: auto;
  padding: 26px 24px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: var(--panel, #0e1410);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}
.otp-modal::backdrop {
  background: rgba(0, 0, 0, 0.62);
}
.otp-modal h3 {
  margin: 0 36px 8px 0;
  font-size: 22px;
}
.otp-modal-copy {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.otp-modal-feedback {
  min-height: 1.2em;
  margin: 0 0 12px;
  color: #ff8b8b;
  font-size: 13px;
}
.otp-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.otp-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--input-bg);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
}
.role-picker {
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 4px 0 18px;
  padding: 14px;
}
.role-picker legend {
  padding: 0 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.role-picker > p {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 12px;
}
.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.role-option {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.role-view-eye { margin-left: auto; flex: 0 0 auto; }
.role-child-pick { display: grid; gap: 8px; margin-top: 10px; }
.role-child-pick[hidden],
#coach-child-apply[hidden] { display: none !important; }
.child-apply-form { display: grid; gap: 28px; }
.child-apply-block { display: grid; gap: 14px; }
.child-apply-block h3 { margin: 0; font-size: 22px; }
.child-apply-kicker {
  margin: 0;
  color: var(--lime);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.child-apply-row,
.child-apply-measure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.child-apply-name-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(140px, 0.7fr); }
.child-apply-kit-row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 0.9fr); }
.child-apply-field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.child-apply-field[hidden] { display: none !important; }
.child-apply-field > label,
.child-apply-foot-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}
.child-apply-field > input,
.child-apply-field > select,
.child-apply-page .thai-calendar-trigger {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text);
  padding: 13px 15px;
}
.child-apply-photo-field { display: grid; justify-items: center; gap: 8px; margin-bottom: 8px; }
.child-apply-photo-field > label { justify-content: center; text-align: center; }
.child-apply-photo-box,
.child-apply-slip-box {
  position: relative;
  cursor: pointer;
}
.child-apply-photo-box input,
.child-apply-slip-box input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.child-apply-photo-box {
  width: 144px;
  min-height: 144px;
  display: grid;
  place-items: center;
  padding: 7px;
  border-radius: 50%;
  border: 2px dashed var(--border-strong);
  background: var(--bg-card);
  text-align: center;
}
.child-apply-photo-box img {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
}
.child-apply-photo-box .child-apply-upload-copy { padding: 12px; font-size: 12px; color: var(--muted); line-height: 1.35; }
.child-apply-photo-box .child-apply-upload-copy span { display: none; }
.child-apply-photo-box.has-image { border-style: solid; }
.child-apply-photo-box.has-image input { pointer-events: none; }
.child-apply-photo-box.has-image .child-apply-upload-copy,
.child-apply-slip-box.has-image .child-apply-upload-copy { display: none; }
.child-apply-photo-edit {
  position: absolute;
  z-index: 5;
  right: 1px;
  bottom: 9px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 3px solid var(--bg-card);
  border-radius: 50%;
  background: var(--lime);
  color: #111;
  cursor: pointer;
}
.child-apply-remove {
  display: none;
  position: relative;
  z-index: 3;
  border: 0;
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  padding: 7px 10px;
  cursor: pointer;
}
.child-apply-photo-box .child-apply-remove {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
}
.child-apply-photo-box.has-image .child-apply-remove,
.child-apply-slip-box.has-image .child-apply-remove { display: block; }
.child-apply-slip-box {
  min-height: 132px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 2px dashed var(--border-strong);
  border-radius: 16px;
  background: var(--bg-card);
}
.child-apply-slip-box img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
}
.child-apply-slip-box .child-apply-upload-copy { display: grid; gap: 4px; }
.child-apply-slip-box .child-apply-upload-copy span,
.child-apply-hint,
.child-apply-file-name { color: var(--muted); font-size: 12px; }
.child-apply-photo-box.is-drag,
.child-apply-slip-box.is-drag { border-color: var(--lime); }
.child-apply-feet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.child-apply-foot { position: relative; display: block; margin: 0; }
.child-apply-foot--left { --foot-accent: #1389d4; }
.child-apply-foot--right { --foot-accent: #18a44b; }
.child-apply-foot--both { --foot-accent: #d88a00; }
.child-apply-foot input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.child-apply-foot span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
  padding: 14px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text);
  font-weight: 700;
  pointer-events: none;
}
.child-apply-foot span em { font-style: normal; }
.child-apply-foot span i {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid var(--foot-accent);
  border-radius: 50%;
}
.child-apply-foot:has(input:checked) span {
  border-color: var(--foot-accent);
  box-shadow: inset 0 0 0 1px var(--foot-accent);
}
.child-apply-foot:has(input:checked) span i { background: var(--foot-accent); }
.child-apply-unit {
  display: flex;
  min-height: 50px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--input-bg);
  overflow: hidden;
}
.child-apply-unit input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 13px 15px;
}
.child-apply-unit input:focus { outline: none; }
.child-apply-unit > span {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.child-apply-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.child-apply-submit { width: 100%; min-height: 52px; justify-content: center; }
@media (max-width: 720px) {
  .child-apply-row,
  .child-apply-measure,
  .child-apply-name-row,
  .child-apply-kit-row,
  .child-apply-feet { grid-template-columns: 1fr; }
}
.role-option:has(input:checked),
.role-option.is-on {
  border-color: rgba(32,228,30,0.5);
  background: var(--lime-dim);
}
.role-option input { margin-top: 3px; accent-color: var(--lime); }
.role-option span { display: grid; gap: 2px; }
.role-option strong { font-size: 13px; }
.role-option small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.pdpa-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}
.pdpa-consent b {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.pdpa-consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--lime);
  cursor: pointer;
}
.stories-fields label.pdpa-consent {
  display: flex;
  margin: 4px 0 16px;
  color: var(--text);
  font-size: 12px;
}
.stories-fields label.pdpa-consent > input[type="checkbox"] {
  display: inline-block;
  width: 18px;
  margin-top: 2px;
}
.login-card .pdpa-consent {
  margin: 12px 0 16px;
  color: #d5d5d5;
}
.roles-card { max-width: 760px; }
.member-rights-orgs {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.member-rights-block {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}
.member-rights-block h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text);
}
.member-rights-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.member-rights-block li {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.member-rights-academy {
  display: flex;
  align-items: center;
  gap: 10px;
}
.member-rights-academy strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}
.member-rights-academy small {
  display: block;
  color: var(--muted);
}
.member-rights-academy-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  object-fit: cover;
  background: color-mix(in srgb, var(--lime) 16%, var(--bg-card));
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}
.sidebar-academy-logo.sidebar-academy-logo-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--lime) 16%, var(--bg-card));
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}
.roles-intro {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.role-status { cursor: pointer; }
.role-status:hover { border-color: rgba(32,228,30,0.35); }
.role-status.role-locked,
.role-status.role-locked:hover {
  cursor: default;
  border-color: var(--border);
}
.role-status em {
  margin-top: 4px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.role-status.is-on em { color: var(--lime); }
.roles-lead {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.roles-empty {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.btn:disabled { opacity: 0.6; cursor: wait; }
.venue-site-form { display: grid; gap: 16px; }
.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
}
.settings-head h2 { font-size: 22px; margin-bottom: 5px; }
.settings-head p, .settings-lock-note { color: var(--muted); font-size: 13px; }
.publish-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  color: #d8d8d8;
  font-size: 13px;
  font-weight: 700;
}
.publish-toggle .story-field-hint { font-weight: 500; }
.publish-toggle input { width: 18px; height: 18px; accent-color: var(--lime); }
.publish-mode {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  color: #d8d8d8;
  font-size: 13px;
}
.visual-editor.is-login-gate .visual-preview-tabs,
.visual-editor.is-login-gate .js-site-only {
  display: none;
}
.publish-mode-label { font-weight: 800; }
.publish-mode label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.publish-mode input { accent-color: var(--lime); }
.publish-mode .story-field-hint { font-weight: 500; }
#ve-publish-note { margin: 0; flex-basis: 100%; }
.settings-feedback {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
}
.settings-feedback:empty {
  display: none;
}
.settings-feedback.success { color: var(--lime); border-color: rgba(32,228,30,.28); }
.settings-feedback.error { color: var(--danger); border-color: rgba(255,77,77,.35); }
.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.settings-section {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
}
.settings-kicker {
  margin: 0 0 6px;
  color: var(--lime);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.settings-section h3 { margin-bottom: 4px; font-size: 20px; }
.settings-section-note {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
}
.settings-section.settings-wide { grid-column: 1 / -1; }
.settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}
.settings-fields .full { grid-column: 1 / -1; }
.settings-fields textarea { resize: vertical; min-height: 72px; }
.app-stories {
  min-height: 100vh;
  min-height: 100dvh;
}
.app-stories .main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
.app-stories .topbar {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: max(12px, env(safe-area-inset-top, 0px));
}
.app-stories .content {
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 16px 18px max(28px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.stories-page {
  display: grid;
  align-content: start;
  gap: 16px;
  width: 100%;
  max-width: none;
}
#referee-profile-member-line {
  margin: 0;
  color: var(--muted);
}
.stories-page:has(#story-form-panel:not([hidden])),
.stories-page:has(#eval-form-panel:not([hidden])),
.stories-page:has(#academy-group-panel:not([hidden])),
.stories-page:has(#academy-coach-form-card:not([hidden])),
.stories-page:has(#academy-screening-panel:not([hidden])) {
  gap: 22px;
}
.stories-split {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 2px 2px;
}
.stories-split-rule {
  flex: 1;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(32, 228, 30, 0.65), var(--border) 72%, transparent);
}
.stories-split-rule:last-child {
  background: linear-gradient(90deg, transparent, var(--border) 28%, rgba(32, 228, 30, 0.65));
}
.stories-split-tag {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--lime-dim);
  color: var(--lime);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.stories-form-card {
  box-shadow: inset 4px 0 0 var(--lime);
}
.stories-card {
  width: 100%;
  max-width: none;
  overflow: visible;
}
.stories-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 0 0 12px;
}
.stories-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card-2);
  color: var(--muted);
  font-size: 13px;
}
.stories-select-page {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.stories-check input,
.stories-select-page input,
.story-row-check {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--lime);
  cursor: pointer;
}
.stories-search {
  flex: 1 1 240px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.stories-filter,
.stories-per-page {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.stories-filter {
  flex: 0 1 220px;
  min-width: 160px;
}
#activity-filters .stories-filter,
#activity-all-filters .stories-filter {
  flex: 1 1 220px;
  width: 220px;
  min-width: 220px;
  max-width: 280px;
}
#activity-filters .stories-filter > input,
#activity-all-filters .stories-filter > input,
#activity-filters .thai-calendar-trigger,
#activity-all-filters .thai-calendar-trigger {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
}
.stories-filter:has(#eval-overview-period),
.stories-filter:has(#eval-score-period),
.stories-filter:has(.thai-month-picker) {
  flex: 0 1 280px;
  min-width: 220px;
}
.stories-toolbar input,
.stories-toolbar select,
.stories-toolbar .fas-combo {
  width: 100%;
  min-width: 88px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}
.stories-toolbar .fas-combo {
  padding: 0;
  border: 0;
  background: transparent;
}
.stories-toolbar .btn-lime {
  margin-left: auto;
}
.stories-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stories-table {
  width: 100%;
  table-layout: fixed;
}
.stories-table td,
.stories-table th {
  vertical-align: middle;
  white-space: nowrap;
}
.stories-table .stories-check {
  width: 40px;
  text-align: center;
}
.stories-table .stories-num {
  width: 40px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stories-table-wrap.is-coach-sortable .stories-table .stories-num {
  width: 58px;
  white-space: nowrap;
}
.coach-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  margin-right: 4px;
  color: var(--muted);
  cursor: grab;
  vertical-align: middle;
  user-select: none;
  touch-action: none;
}
.coach-drag-handle:active,
.stories-table tr.is-dragging .coach-drag-handle {
  cursor: grabbing;
}
.stories-table-wrap.is-coach-sortable .stories-table img {
  -webkit-user-drag: none;
  user-select: none;
}
.stories-table tr.is-dragging {
  opacity: 0.45;
}
.stories-table tr.is-drop-target td {
  box-shadow: inset 0 2px 0 var(--lime);
}
.stories-table-wrap.is-coach-dragging {
  user-select: none;
  cursor: grabbing;
}
.stories-table .stories-thumb {
  width: 52px;
}
.stories-table .stories-kicker {
  width: 22%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stories-table .stories-headline {
  overflow: hidden;
  text-overflow: ellipsis;
}
.stories-table .stories-updated {
  width: 168px;
}
.member-admitted-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lime);
  white-space: nowrap;
}
.member-admitted-stamp svg {
  flex-shrink: 0;
}
.stories-table .stories-status {
  width: 118px;
}
.stories-table .stories-row-actions {
  width: 148px;
  overflow: visible;
}
.venue-bookings-page .stories-table-wrap {
  overflow-x: auto;
  width: 100%;
}
.venue-bookings-page .stories-table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
}
.venue-bookings-page .stories-table th,
.venue-bookings-page .stories-table td {
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: normal;
  word-break: keep-all;
}
.venue-bookings-page .venue-col-name {
  width: 22%;
}
.venue-bookings-page .venue-col-note,
.venue-bookings-page .venue-col-item,
.venue-bookings-page .venue-col-who {
  width: auto;
}
.venue-bookings-page .venue-col-field {
  width: 18%;
}
.venue-bookings-page .venue-col-open,
.venue-bookings-page .venue-col-status {
  width: 96px;
}
.venue-bookings-page .venue-col-when {
  width: 238px;
}
.venue-bookings-page .venue-col-day {
  width: 88px;
}
.venue-bookings-page .venue-col-time {
  width: 132px;
}
.venue-bookings-page .venue-field-table .stories-row-actions {
  width: 148px;
}
.venue-bookings-page .venue-template-table .stories-row-actions {
  width: 56px;
}
.venue-bookings-page .venue-booking-table .stories-row-actions {
  width: 268px;
}
.venue-bookings-page .stories-row-actions {
  text-align: right;
  overflow: visible;
  text-overflow: unset;
}
.venue-bookings-page .stories-row-actions .btn {
  display: inline-flex;
  margin-left: 0;
  padding: 6px 8px;
}
.venue-bookings-page .stories-row-actions .btn + .btn {
  margin-left: 6px;
}
.venue-calendar-add-actions,
.venue-calendar-toolbar,
.venue-calendar-week-controls,
.venue-calendar-legend {
  display: flex;
  align-items: center;
  gap: 8px;
}
.venue-calendar-add-actions {
  margin-left: auto;
}
.venue-calendar-toolbar {
  justify-content: space-between;
  margin: 14px 0 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card-2);
}
.venue-calendar-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}
.venue-calendar-toolbar select {
  min-width: 180px;
}
.venue-calendar-week-controls strong {
  min-width: 210px;
  text-align: center;
  font-size: 13px;
}
.venue-calendar-day-tabs {
  display: none;
}
.venue-admin-schedule-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
}
.venue-admin-schedule {
  --venue-timeline-height: 768px;
  display: grid;
  grid-template-columns: 68px repeat(7, minmax(132px, 1fr));
  min-width: 1000px;
}
.venue-calendar-time,
.venue-calendar-day {
  min-width: 0;
}
.venue-calendar-day {
  border-left: 1px solid var(--border);
}
.venue-calendar-head {
  height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.venue-calendar-head strong {
  font-size: 13px;
}
.venue-calendar-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.venue-calendar-time-body,
.venue-calendar-day-body {
  position: relative;
  height: var(--venue-timeline-height);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 23px,
    color-mix(in srgb, var(--border) 55%, transparent) 24px,
    transparent 25px,
    transparent 47px,
    var(--border) 48px
  );
}
.venue-calendar-time-body span {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.venue-calendar-day-body {
  cursor: crosshair;
}
.venue-calendar-day-body:hover {
  background-color: var(--ghost-hover);
}
.venue-calendar-block {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  min-height: 40px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: #fff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
}
.venue-calendar-block.is-academy {
  border-color: #ff7180;
  background: linear-gradient(145deg, #ff5c6c, #bd2635);
}
.venue-calendar-block.is-reserved {
  background: linear-gradient(145deg, #26312a, #121713);
}
.venue-calendar-block.is-pending {
  border-color: #f5c451;
  background: linear-gradient(145deg, #f6d36b, #c99018);
  color: #16120a;
}
.venue-calendar-block.is-cancel {
  border-color: #ff9a73;
  background: linear-gradient(145deg, #d66b43, #96381f);
}
.venue-calendar-block-copy {
  min-width: 0;
}
.venue-calendar-block-copy strong,
.venue-calendar-block-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.venue-calendar-block-copy strong {
  font-size: 11px;
  line-height: 1.25;
}
.venue-calendar-block-copy span {
  margin-top: 2px;
  font-size: 9px;
  opacity: 0.84;
}
.venue-calendar-block-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}
.venue-calendar-block-actions .btn {
  min-width: 26px;
  min-height: 24px;
  height: 24px;
  padding: 3px 5px;
  font-size: 9px;
}
.venue-calendar-block-actions .icon-action {
  width: 26px;
  min-width: 26px;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.venue-calendar-block-actions .icon-action-edit,
.venue-calendar-block-actions .icon-action-delete {
  background: #fff;
}
.venue-calendar-block-actions .icon-action-edit {
  color: #8a5600;
}
.venue-calendar-block-actions .icon-action-delete {
  color: #c41128;
}
.venue-calendar-block-actions .icon-action-edit:hover {
  color: #6d4300;
  background: #ffe8a3;
}
.venue-calendar-block-actions .icon-action-delete:hover {
  color: #9d0d20;
  background: #ffd6db;
}
.venue-calendar-block-actions svg {
  width: 13px;
  height: 13px;
}
.venue-calendar-legend {
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}
.venue-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.venue-calendar-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.venue-calendar-legend .is-academy { background: var(--danger); }
.venue-calendar-legend .is-reserved { background: #26312a; }
.venue-calendar-legend .is-pending { background: var(--warn); }
.venue-calendar-legend .is-cancel { background: #d66b43; }
.academy-members-table .member-col-name {
  width: 24%;
  overflow: visible;
}
.academy-members-table .member-col-nick {
  width: 88px;
}
.academy-members-table .member-col-email {
  overflow: hidden;
  text-overflow: ellipsis;
}
.academy-members-table .member-col-phone {
  width: 118px;
}
.academy-members-table .member-col-age {
  width: 58px;
  padding-left: 6px;
  padding-right: 6px;
}
.academy-members-table .member-col-position {
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.academy-members-table .member-col-group {
  width: 22%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.academy-members-table .member-col-slip {
  width: 78px;
  text-align: center;
}
.academy-members-table .member-col-fee {
  width: 148px;
  vertical-align: middle;
}
.member-fee-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
.member-fee-cell-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.member-fee-cell-row .member-fee-picker {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.member-fee-cell-row .member-fee-select {
  width: 100%;
}
.member-fee-slip-btn {
  width: 36px;
  height: 36px;
  color: var(--muted);
  text-decoration: none;
}
.member-fee-slip-btn:hover,
.member-fee-slip-btn:focus-visible {
  color: var(--lime);
  border-color: rgba(32, 228, 30, 0.4);
}
.member-fee-paid-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(32, 228, 30, 0.45);
  border-radius: 10px;
  background-color: var(--lime-dim);
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
}
.member-fee-picker {
  position: relative;
  min-width: 0;
}
.member-fee-select {
  display: inline-flex;
  align-items: center;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 36px;
  padding: 6px 32px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C9890' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.member-fee-select:disabled {
  opacity: 0.7;
  cursor: wait;
}
.member-fee-menu {
  position: fixed;
  z-index: 80;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}
.member-fee-menu[hidden] {
  display: none !important;
}
.member-fee-menu-item {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.member-fee-menu-item:hover,
.member-fee-menu-item:focus-visible {
  background: rgba(32, 228, 30, 0.12);
}
.member-fee-menu-item.is-current {
  box-shadow: inset 3px 0 0 var(--lime);
}
.member-fee-picker.is-open {
  z-index: 20;
}
body.fas-backend .member-fee-picker[data-fee-current="paid"] .member-fee-select {
  background-color: var(--lime-dim);
  border-color: rgba(32, 228, 30, 0.45);
  color: var(--lime);
}
/* CB1: รอชำระ uses the existing amber «waiting» colours; a returned slip keeps the red style below. */
body.fas-backend .member-fee-picker[data-fee-current="submitted"] .member-fee-select,
body.fas-backend .member-fee-picker[data-fee-current="unpaid"] .member-fee-select {
  background-color: rgba(245, 196, 81, 0.16);
  border-color: rgba(196, 138, 0, 0.5);
  color: #f5c451;
}
/* CB1b: «ครบกำหนด» under the fee picker (existing muted / amber / red tones only) */
.member-fee-due {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 4px;
}
.member-fee-due-text {
  color: var(--muted);
  font-size: 11px;
}
.member-fee-due.is-soon .member-fee-due-text { color: #f5c451; font-weight: 600; }
html[data-fas-theme="light"] .member-fee-due.is-soon .member-fee-due-text { color: #8a6200; }
.member-fee-due.is-late .member-fee-due-text { color: var(--danger); font-weight: 600; }
.member-fee-due-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.member-fee-due-edit:hover { color: var(--text); }
.member-fee-due-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.member-fee-due-form[hidden] { display: none; }
.member-fee-due-input {
  min-height: 30px;
  padding: 2px 6px;
  font-size: 12px;
}
.member-fee-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.academy-member-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--input-bg);
}
.academy-member-tab {
  flex: 1 1 140px;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.academy-member-tab[data-member-tab="admitted"] {
  background: var(--lime-dim);
  color: var(--lime);
}
.academy-member-tab[data-member-tab="admitted"].is-active {
  background: var(--lime);
  color: #111;
}
.academy-member-tab[data-member-tab="available"] {
  background: rgba(139, 139, 139, 0.16);
  color: #9aa09c;
}
.academy-member-tab[data-member-tab="available"].is-active {
  background: #8b8b8b;
  color: #111;
}
.academy-member-tab[data-member-tab="alumni"] {
  background: rgba(255, 92, 108, 0.14);
  color: var(--danger);
}
.academy-member-tab[data-member-tab="alumni"].is-active {
  background: var(--danger);
  color: #fff;
}
.academy-member-tab-count {
  display: inline-block;
  min-width: 1.25em;
  font-weight: 800;
}
.academy-member-panel[hidden] {
  display: none;
}
.member-slip-thumb {
  display: inline-flex;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--input-bg);
  cursor: pointer;
}
.member-slip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.member-slip-file {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.member-slip-empty {
  color: var(--muted);
  font-size: 12px;
}
.academy-fee-current {
  display: grid;
  gap: 10px;
}
.academy-fee-current-body {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(160px, 1fr);
  gap: 16px;
  align-items: start;
}
.academy-fee-current-status label {
  display: grid;
  gap: 6px;
}
.academy-fee-slip-preview {
  display: grid;
  width: min(100%, 280px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--input-bg);
  color: var(--muted);
  cursor: zoom-in;
  text-align: left;
}
.academy-fee-slip-preview:hover,
.academy-fee-slip-preview:focus-visible {
  border-color: rgba(32, 228, 30, 0.55);
  outline: none;
}
.academy-fee-slip-preview img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #101410;
}
.academy-fee-slip-preview span {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
}
.academy-fee-slip-pdf {
  justify-self: start;
}
.academy-members-table .stories-row-actions {
  width: 180px;
}
.stories-table td[colspan]::before { display: none; }
.stories-table td[colspan] {
  color: var(--muted);
  text-align: center;
  white-space: normal;
}
.stories-thumb-btn {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 6px;
}
.stories-thumb-btn:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.stories-thumb img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.stories-no-img {
  color: var(--muted);
  font-size: 12px;
}
.stories-row-actions {
  white-space: nowrap;
  text-align: right;
}
.stories-row-actions .btn {
  display: inline-flex;
  padding: 7px 10px;
  font-size: 12px;
}
.stories-row-actions .btn + .btn { margin-left: 6px; }
.icon-action {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
}
.icon-action svg { display: block; }
.icon-action-label { display: none; }
.stories-row-actions .icon-action {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
}
.icon-action-edit {
  color: #f5c451;
  border-color: rgba(245, 196, 81, 0.4);
  background: rgba(245, 196, 81, 0.12);
}
.icon-action-edit:hover {
  color: #ffe08a;
  border-color: rgba(245, 196, 81, 0.7);
  background: rgba(245, 196, 81, 0.2);
}
.icon-action-assign {
  color: var(--lime);
  border-color: color-mix(in srgb, var(--lime) 40%, transparent);
  background: color-mix(in srgb, var(--lime) 12%, transparent);
}
.icon-action-assign:hover {
  border-color: color-mix(in srgb, var(--lime) 70%, transparent);
  background: color-mix(in srgb, var(--lime) 20%, transparent);
}
.icon-action-delete,
.stories-delete-btn {
  color: #ff5c6c;
  border-color: rgba(255, 92, 108, 0.4);
  background: rgba(255, 92, 108, 0.12);
}
.icon-action-delete:hover,
.stories-delete-btn:hover {
  color: #ff8a94;
  border-color: rgba(255, 92, 108, 0.7);
  background: rgba(255, 92, 108, 0.2);
}
.icon-action:disabled,
.stories-delete-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.icon-action-delete:disabled:hover,
.stories-delete-btn:disabled:hover {
  color: #ff5c6c;
  border-color: rgba(255, 92, 108, 0.4);
  background: rgba(255, 92, 108, 0.12);
}
.icon-action-add:not(.btn-lime) {
  color: var(--lime);
  border-color: rgba(65, 227, 106, 0.35);
  background: var(--lime-dim);
}
.icon-action-add:not(.btn-lime):hover {
  color: var(--lime-2);
  border-color: rgba(65, 227, 106, 0.6);
}
.icon-action-wait {
  color: #8b938c;
  border-color: rgba(139, 147, 140, 0.38);
  background: rgba(139, 147, 140, 0.12);
}
.icon-action-wait:hover {
  color: #c4cbc4;
  border-color: rgba(139, 147, 140, 0.62);
  background: rgba(139, 147, 140, 0.2);
}
.stories-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}
.stories-pager-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.stories-page-btn {
  min-width: 40px;
  min-height: 40px;
  padding: 8px 12px;
}
.stories-page-btn.active {
  color: var(--lime);
  border-color: rgba(32, 228, 30, 0.35);
  background: var(--lime-dim);
}
.stories-page-gap {
  color: var(--faint);
  padding: 0 2px;
}
.stories-fields { margin-top: 8px; }
.stories-fields label {
  display: block;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.stories-fields label[hidden] {
  display: none;
}
.story-field-hint {
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}
.story-field-hint.error {
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}
.story-field-hint.success {
  color: var(--lime);
  font-size: 13px;
  font-weight: 700;
}
label > .story-field-hint,
.fas-switch-label > .story-field-hint,
.academy-coach-photo-heading > .story-field-hint,
.member-foot-legend > .story-field-hint,
.visual-surface-label > .story-field-hint,
.visual-nav-row strong > .story-field-hint {
  display: inline;
  margin: 0;
  font-weight: 500;
}
label > .story-field-hint:not(:empty)::before,
.fas-switch-label > .story-field-hint:not(:empty)::before,
.academy-coach-photo-heading > .story-field-hint:not(:empty)::before,
.member-foot-legend > .story-field-hint:not(:empty)::before,
.visual-surface-label > .story-field-hint:not(:empty)::before,
.visual-nav-row strong > .story-field-hint:not(:empty)::before {
  content: " (";
}
label > .story-field-hint:not(:empty)::after,
.fas-switch-label > .story-field-hint:not(:empty)::after,
.academy-coach-photo-heading > .story-field-hint:not(:empty)::after,
.member-foot-legend > .story-field-hint:not(:empty)::after,
.visual-surface-label > .story-field-hint:not(:empty)::after,
.visual-nav-row strong > .story-field-hint:not(:empty)::after {
  content: ")";
}
.stories-fields label > input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not(.thai-birth-native),
.stories-fields label > textarea,
.stories-fields label > select,
.stories-fields label > .fas-combo,
.stories-fields label > .thai-month-picker,
.stories-fields label > .thai-calendar-picker,
.stories-fields label > .password-field,
.stories-fields label > .eval-score-combo {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.stories-section-title {
  margin: 18px 0 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.story-highlight-note {
  margin: -2px 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.story-cover-box {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.2fr);
  gap: 12px;
  margin: 0 0 16px;
}
.story-cover-copy {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}
.story-cover-col {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.story-cover-col label { margin: 0; }
.story-cover-col--image {
  background: var(--bg-card-2);
  box-shadow: inset 4px 0 0 var(--lime);
}
.story-cover-col--hook {
  background: rgba(255, 193, 74, 0.12);
  border-color: rgba(255, 193, 74, 0.35);
  box-shadow: inset 4px 0 0 var(--warn);
}
.story-cover-col--hook .story-highlight-num {
  background: rgba(255, 193, 74, 0.22);
  color: var(--warn);
}
.story-cover-col--intro {
  background: var(--bg-card-2);
  box-shadow: inset 4px 0 0 var(--muted);
}
.story-cover-col--intro .story-highlight-num {
  background: var(--bg-hover);
  color: var(--muted);
}
.story-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.story-highlight-col {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
}
.story-highlight-num {
  width: 28px;
  height: 28px;
  margin: 0 auto 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime-dim);
  color: var(--lime);
  font-size: 13px;
  font-weight: 800;
}
.story-highlight-col label {
  margin: 0;
  text-align: left;
}
.story-highlight-col input {
  text-align: center;
  font-weight: 700;
  color: var(--lime);
  border-color: rgba(32, 228, 30, 0.28);
  background: var(--input-bg);
}
.story-highlight-col textarea {
  min-height: 112px;
  overflow: auto;
  resize: vertical;
  text-align: center;
  color: var(--text);
}
.story-quote-box {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.9fr);
  gap: 12px;
  margin: 0 0 16px;
}
.story-quote-col {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
}
.story-quote-col label { margin: 0; }
.story-quote-col--quote {
  background: #141414;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 4px 0 0 var(--lime);
  color: #d8d8d8;
}
.story-quote-col--quote .story-field-hint { color: #8a8a8a; }
.story-quote-col--quote textarea {
  min-height: 128px;
  overflow: auto;
  resize: vertical;
  color: #f4f4f4;
  background: #0c0c0c;
  border-color: rgba(255, 255, 255, 0.14);
}
.story-quote-col--credit {
  background: var(--lime-dim);
  border-color: rgba(32, 228, 30, 0.28);
}
.story-quote-col--credit input {
  font-weight: 700;
  color: var(--lime);
  border-color: rgba(32, 228, 30, 0.35);
  background: var(--input-bg);
}
.story-full-box {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}
.story-full-col {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
}
.story-full-col label { margin: 0; }
.story-full-col--title {
  background: var(--lime-dim);
  border-color: rgba(32, 228, 30, 0.28);
  box-shadow: inset 4px 0 0 var(--lime);
}
.story-full-col--title input {
  font-weight: 700;
  color: var(--text);
  border-color: rgba(32, 228, 30, 0.28);
  background: var(--input-bg);
}
.story-full-col--body {
  background: var(--bg-card-2);
  box-shadow: inset 4px 0 0 var(--muted);
}
.story-full-col--body .story-highlight-num {
  background: var(--bg-hover);
  color: var(--muted);
}
.story-full-col--body textarea {
  min-height: 220px;
  overflow: auto;
  resize: vertical;
}
.stories-fields label.fas-switch,
.settings-fields label.fas-switch {
  display: flex;
  align-items: center;
  color: var(--text);
}
.stories-fields .fas-switch input[type="checkbox"],
.settings-fields .fas-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  min-width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.stories-fields input:not([type="file"]),
.stories-fields textarea,
.stories-fields select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  line-height: 1.65;
}
.stories-fields .media-file-input,
.settings-fields .media-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.stories-fields select,
.stories-toolbar select,
.settings-fields select,
.field select,
.select,
.coach-assign-add select,
body.fas-backend select:not([multiple]) {
  min-height: 42px;
  padding-right: 36px;
  color-scheme: dark;
  accent-color: var(--lime);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8b8b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.stories-fields select option {
  color: var(--text);
  background: var(--input-bg);
}
.fas-combo {
  position: relative;
  display: block;
  width: 100%;
}
/* 2026-11-02 fix2: never set `color: transparent` on the select. Chrome's dropdown popup takes its base
   text color from the select's `color` (it ignores -webkit-text-fill-color), so a transparent color made
   every option blank on Windows desktop (เมนูรุ่น «วิธีจัดรุ่น»). Hide the in-field text with text-fill only;
   the .fas-combo-face span shows the value. */
.fas-combo select {
  color: var(--text, #141916);
  -webkit-text-fill-color: currentColor;
}
.fas-combo select option {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}
.fas-combo-face {
  position: absolute;
  left: 12px;
  right: 36px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--text);
  font: inherit;
  line-height: 1.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fas-combo.is-placeholder .fas-combo-face {
  color: #9aa8a0;
}
.fas-combo:has(select:disabled) .fas-combo-face {
  opacity: 0.55;
}
.stories-fields textarea {
  overflow: hidden;
  min-height: 88px;
}
.speech-textarea-wrap {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 6px;
}
.speech-textarea-wrap > textarea {
  width: 100%;
  margin-top: 0 !important;
  padding-right: 52px !important;
  padding-bottom: 48px !important;
}
.speech-input-button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: none;
  min-width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card-2);
  color: var(--muted);
  cursor: pointer;
}
.speech-input-button > span {
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.speech-input-button.is-listening {
  border-color: rgba(239, 68, 68, .5);
  background: color-mix(in srgb, #ef4444 13%, var(--bg-card));
  color: #ef4444;
  animation: speech-listening-pulse 1.25s ease-in-out infinite;
}
.speech-textarea-wrap:has(.speech-input-button.is-listening) > textarea {
  padding-right: 124px !important;
}
@keyframes speech-listening-pulse {
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, .1); }
}
@media (max-width: 900px), (pointer: coarse) {
  .speech-input-button { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .speech-input-button.is-listening { animation: none; }
}
.stories-actions {
  position: static;
  margin-top: 8px;
}
.eval-builder-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.eval-form-summary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.eval-forms-table .eval-form-name {
  width: 36%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.eval-forms-table .eval-form-groups {
  width: 22%;
}
.academy-groups-page,
.academy-groups-page .stories-card,
.academy-groups-page .stories-table-wrap {
  min-width: 0;
  max-width: 100%;
}
.academy-groups-table {
  width: 100%;
  min-width: 0;
}
.academy-groups-table .academy-group-forms {
  width: auto;
}
.eval-forms-table .eval-form-groups,
.academy-groups-table .academy-group-forms {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
  color: var(--muted);
}
.link-check-block .stories-section-title { margin-bottom: 4px; }
.link-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 14px;
}
.link-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.link-check input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.link-check.is-locked { cursor: not-allowed; opacity: 0.78; }
.link-check span { display: flex; flex-direction: column; gap: 2px; }
.link-check-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}
.member-form-names {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}
.academy-history-site {
  margin: 0 0 22px;
}
.academy-history-site h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
}
.academy-history-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 12px;
}
.academy-history-filters .field,
.academy-fee-year.field {
  min-width: 160px;
  margin: 0;
}
.academy-history-site h4 small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.academy-history-inbody {
  margin-top: 14px;
}
.academy-history-inbody h5 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.academy-history-inbody .academy-inbody-empty {
  padding: 14px;
}
.academy-history-tabs {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
}
.academy-history-tabs .btn {
  flex: 1 1 0;
  min-width: 0;
}
.academy-history-one-score {
  display: grid;
  gap: 4px;
  width: fit-content;
  min-width: 148px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
}
.academy-history-one-score strong {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
}
.academy-history-one-score span {
  color: var(--muted);
  font-size: 13px;
}
.academy-history-chart {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.academy-history-chart-line.eval-report-line-wrap {
  margin-top: 2px;
}
.academy-history-bars {
  display: none;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.academy-history-bars li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
}
.academy-history-bar-date {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.academy-history-bar-track {
  height: 14px;
  border-radius: 99px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.academy-history-bar-track span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--warn);
}
.academy-history-bars li.is-up .academy-history-bar-track span { background: var(--lime); }
.academy-history-bars li.is-down .academy-history-bar-track span { background: var(--danger); }
.academy-history-bars b {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}
.academy-history-score-list {
  display: grid;
  gap: 10px;
}
.academy-history-score-item {
  display: grid;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
}
.academy-history-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.academy-history-score-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.academy-history-score-date {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}
.academy-history-score-total {
  display: grid;
  justify-items: end;
  gap: 1px;
}
.academy-history-score-total span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.academy-history-score-total strong {
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
}
.academy-history-score-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}
.academy-history-score-tools .icon-action-download {
  color: #41E36A;
  background: rgba(65, 227, 106, 0.16);
  border: 1px solid rgba(65, 227, 106, 0.55);
}
.academy-history-score-tools .icon-action-download:hover {
  color: #8dffab;
  background: rgba(65, 227, 106, 0.28);
  border-color: #41E36A;
}
html[data-fas-theme="light"] body.fas-backend .academy-history-score-tools .icon-action-download {
  color: #146332;
  background: #e5f6ea;
  border-color: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .academy-history-score-tools .icon-action-download:hover {
  color: #0f4d26;
  background: #d3f0dc;
  border-color: #146332;
}
.academy-history-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
}
.academy-history-sheet {
  margin-top: 4px;
}
.academy-history-sheet-foot {
  display: flex;
  justify-content: flex-end;
}
.academy-history-sheet .eval-score-item-top input:disabled {
  opacity: 1;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  cursor: default;
}
.academy-history-score-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.academy-history-score-meta b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 700px) {
  .academy-history-score-head { align-items: flex-start; }
  .academy-history-score-tools { flex-direction: column; align-items: flex-end; gap: 6px; }
}
@media (max-width: 900px) {
  .academy-history-chart-line { display: none; }
  .academy-history-bars { display: grid; }
  .academy-history-chart.eval-report-line-wrap,
  .academy-history-chart-line.eval-report-line-wrap {
    min-height: 0;
    overflow: visible;
  }
}
.academy-history-skeleton {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
}
.history-skeleton-line {
  width: 100%;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bg-hover) 20%, var(--border) 45%, var(--bg-hover) 70%);
  background-size: 220% 100%;
  animation: fasHistorySkeleton 1.15s ease-in-out infinite;
}
.history-skeleton-line.is-title { width: min(280px, 72%); height: 18px; }
.history-skeleton-line.is-short { width: min(420px, 48%); }
.history-empty-state,
.history-load-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
  color: var(--muted);
}
.history-empty-state > div,
.history-load-error > div {
  display: grid;
  flex: 1;
  gap: 3px;
}
.history-empty-state b,
.history-load-error b { color: var(--text); }
.history-empty-state span,
.history-load-error span { font-size: 11px; }
.history-load-error > svg { color: var(--danger); }
@keyframes fasHistorySkeleton {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .history-skeleton-line { animation: none; }
}
.academy-fee-card .academy-fee-upload {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.academy-fee-card .academy-fee-upload label {
  display: grid;
  gap: 6px;
}
.academy-fee-card .academy-fee-upload--compact,
.academy-fee-month-item .academy-fee-upload--compact {
  display: inline-flex;
  margin: 0;
  gap: 0;
}
.academy-fee-pick {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap;
}
.academy-fee-month-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.academy-fees-page .academy-fee-month-list {
  max-width: 560px;
}
.academy-fee-month-item {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card-2);
}
.academy-fee-month-item.is-open {
  border-color: rgba(196, 138, 0, 0.4);
}
.academy-fee-month-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.academy-fee-month-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}
.academy-fee-month-copy strong {
  font-size: 14px;
  font-weight: 800;
}
.academy-fee-month-copy .member-fee-picker,
.academy-fee-month-head .member-fee-picker,
.academy-fee-month-copy .member-fee-select,
.academy-fee-month-head .member-fee-select {
  width: auto;
  min-width: 148px;
}
.academy-fee-month-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.academy-fee-month-actions .member-fee-slip-btn,
.academy-fee-month-actions .icon-action {
  width: 36px;
  height: 36px;
}
.academy-fee-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.academy-fee-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.academy-fee-status.is-paid {
  color: var(--lime);
  background: rgba(32, 228, 30, 0.14);
}
.academy-fee-status.is-wait {
  color: #f5c451;
  background: rgba(245, 196, 81, 0.16);
}
.academy-fee-status.is-back {
  color: var(--danger);
  background: rgba(255, 92, 108, 0.16);
}
.academy-fee-status.is-due {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
}
.academy-fee-month-item .academy-fee-upload {
  margin-top: 0;
}
.academy-fee-month-pager {
  margin-top: 10px;
}
.academy-fee-admin-note-field {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
}
.academy-fee-admin-note-field input {
  width: 100%;
  min-height: 36px;
  font-weight: 500;
}
.academy-fee-month-copy .academy-fee-admin-note {
  flex: 1 0 100%;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
@media (max-width: 640px) {
  .academy-fee-month-item {
    padding: 10px;
  }
  .academy-fee-month-main {
    gap: 8px;
  }
  .academy-fee-pick {
    min-height: 44px;
    padding: 8px 10px;
  }
}
body.fas-backend .member-fee-picker[data-fee-returned="1"] .member-fee-select {
  background-color: rgba(255, 92, 108, 0.14);
  border-color: rgba(255, 92, 108, 0.45);
  color: var(--danger);
}
.academy-fee-history {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.academy-fee-history h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}
.academy-fee-history-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.academy-fee-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card-2);
}
.academy-fee-history-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.academy-fee-history-meta strong {
  font-size: 13px;
}
.academy-fee-history-meta small,
.academy-fee-history-empty {
  color: var(--muted);
  font-size: 12px;
}
.academy-fee-history-meta p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
}
.academy-fee-history-item .member-slip-thumb,
.academy-fee-history-item .member-slip-file {
  flex-shrink: 0;
}
.eval-links-table {
  table-layout: auto;
}
.eval-links-table .eval-link-age {
  width: auto;
  min-width: 88px;
  max-width: none;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  overflow-wrap: normal;
  word-break: keep-all;
}
.eval-links-table .eval-link-group { width: 168px; }
.eval-links-table .eval-link-share { width: 108px; }
.eval-links-page .stories-table-wrap { overflow: visible; }
.eval-links-table .eval-link-form { width: 68%; }
.eval-link-form-control {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  z-index: 1;
}
.eval-link-form-control.is-open { z-index: 30; }
.eval-link-form-control::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 18px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  pointer-events: none;
  z-index: 2;
}
.eval-link-form-trigger {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 28px 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.eval-link-form-trigger:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.eval-link-form-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.eval-link-form-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 31;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.eval-link-form-menu li { min-width: 0; }
.eval-link-form-option {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.eval-link-form-option.is-current {
  color: var(--lime);
}
.eval-link-form-option:hover,
.eval-link-form-option:focus {
  background: rgba(65, 227, 106, 0.1);
}
.eval-link-lock {
  display: block;
  margin-top: 2px;
  color: var(--warn);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.eval-link-group.has-scores {
  font-weight: 600;
}
.eval-desk-page .stories-form-card { margin-bottom: 18px; }
.eval-desk-group-field {
  grid-column: 1 / -1;
  max-width: 420px;
}
.eval-desk-form-line,
.eval-desk-scorer-line,
.eval-desk-admin-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.eval-desk-admin-note { color: var(--text); }
.eval-desk-action-feedback {
  grid-column: 1 / -1;
  margin: 0;
  padding: 11px 13px;
  border-radius: 10px;
}
.academy-coaches-table .member-col-name {
  width: 28%;
  overflow: hidden;
}
.academy-coaches-table .member-col-email {
  width: 26%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.academy-coaches-table .member-col-phone {
  width: 132px;
  min-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.academy-coaches-table td,
.academy-coaches-table th {
  overflow: hidden;
  text-overflow: ellipsis;
}
.academy-coaches-table .stories-row-actions {
  width: 92px;
  overflow: visible;
}
.eval-link-forms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eval-link-forms label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-weight: 600;
}
.eval-link-forms input {
  margin-top: 3px;
}
.coach-assign-add {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
  gap: 12px;
  align-items: end;
  margin: 12px 0 16px;
}
.coach-assign-add.stories-fields {
  margin-top: 12px;
}
.coach-assign-add label {
  display: grid;
  gap: 6px;
  margin: 0;
  font-weight: 700;
}
.coach-assign-table td,
.coach-assign-table th {
  overflow: hidden;
  text-overflow: ellipsis;
}
.coach-assign-table .stories-row-actions {
  width: 48px;
  overflow: visible;
}
.academy-coach-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.academy-coach-name > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.academy-coach-fullname {
  overflow: hidden;
  text-overflow: ellipsis;
}
.academy-members-table .academy-coach-fullname {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.academy-coach-nick-sep {
  display: inline;
  margin: 0 0.45em;
  color: var(--faint);
  font-weight: 700;
}
.academy-coach-nick {
  color: var(--muted);
  font-size: inherit;
  font-weight: 500;
}
.academy-coach-thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--thumb-bg);
}
.academy-coach-thumb-btn {
  display: inline-flex;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 50%;
  line-height: 0;
}
.academy-coach-thumb-btn .academy-coach-thumb {
  display: block;
  box-shadow: 0 0 0 1px var(--border);
}
.academy-member-name .academy-coach-thumb,
.academy-coach-name .academy-coach-thumb {
  object-fit: contain;
  background: #fff;
}
.academy-coach-thumb-btn:hover .academy-coach-thumb,
.academy-coach-thumb-btn:focus-visible .academy-coach-thumb {
  box-shadow: 0 0 0 2px var(--lime);
}
.academy-coach-thumb-btn:focus-visible {
  outline: none;
}
.academy-coach-thumb-empty,
.academy-coach-thumb-fallback {
  display: block;
  border: 0;
  background: #111;
  object-fit: cover;
  object-position: center 18%;
}
.coach-invite-panel {
  display: grid;
  gap: 12px;
}
.coach-invite-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}
.coach-invite-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}
.coach-invite-panel h3 {
  margin: 0;
  font-size: 1.05rem;
}
.coach-invite-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.coach-invite-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.coach-invite-search label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.coach-invite-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}
.coach-invite-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 8px;
  align-items: center;
}
.coach-invite-copy input {
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}
.academy-coach-academy-col[hidden] { display: none !important; }
.academy-coach-photo-field {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
}
.academy-coach-photo-heading {
  justify-self: stretch;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.academy-coach-photo-heading > .story-field-hint {
  color: var(--faint);
  font-size: 11px;
}
.academy-coach-avatar {
  position: relative;
  box-sizing: border-box;
  width: 144px;
  height: 144px;
  display: grid;
  place-items: center;
  margin: 6px auto 28px;
  padding: 7px;
  border: 2px dashed #cfcfcf;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  overflow: visible;
}
.academy-coach-avatar .academy-coach-photo-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  clip: auto;
  clip-path: none;
  overflow: hidden;
}
.stories-fields .academy-coach-avatar .academy-coach-photo-input,
.settings-fields .academy-coach-avatar .academy-coach-photo-input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  clip: auto;
  clip-path: none;
  overflow: hidden;
  opacity: 0;
}
.academy-coach-avatar.is-drag,
.academy-coach-avatar:focus {
  outline: none;
  border-color: var(--lime);
}
.academy-coach-avatar.has-image {
  border-style: solid;
  border-color: #111;
}
.academy-coach-avatar-preview {
  position: relative;
  z-index: 1;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  background: transparent;
  pointer-events: none;
}
#academy-member-avatar-preview {
  object-fit: contain;
}
#academy-coach-avatar-preview {
  object-fit: contain;
  background: #fff;
}
.academy-coach-avatar-preview[hidden] { display: none !important; }
.academy-coach-avatar-copy {
  display: grid;
  gap: 0;
  padding: 8px 10px;
  text-align: center;
  color: #888;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
}
.academy-coach-avatar-copy b {
  color: #888;
  font-size: 12px;
  font-weight: 600;
}
.academy-coach-avatar-copy span { display: block; }
.academy-coach-avatar.has-image .academy-coach-avatar-copy { display: none; }
.academy-coach-avatar-edit {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 3;
  right: 1px;
  bottom: 9px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--lime);
  color: #071109;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
.academy-coach-avatar-edit svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
}
.academy-coach-avatar-edit:hover { transform: scale(1.05); }
.academy-coach-avatar-remove {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 6;
  transform: translateX(-50%);
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.academy-coach-avatar-remove:hover { color: var(--danger); }
body.fas-backend .academy-coach-avatar {
  background: #101510;
  border-color: #3d4a43;
}
body.fas-backend .academy-coach-avatar.has-image {
  border-color: #c5d0c8;
}
body.fas-backend .academy-coach-avatar-copy,
body.fas-backend .academy-coach-avatar-copy b {
  color: #8a948e;
}
body.fas-backend .academy-coach-avatar-edit {
  border-color: #121914;
}
.academy-coach-form.settings-fields,
.fas-form-stack.settings-fields {
  grid-template-columns: 1fr;
  gap: 16px;
}
.academy-coach-box,
.fas-form-box {
  --box-accent: var(--lime);
  --box-accent-dim: var(--lime-dim);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  padding: 16px 16px 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card-2);
  box-shadow: inset 4px 0 0 var(--lime);
}
.academy-coach-box--person {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.member-body-metrics {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.member-foot-legend {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.member-foot-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.member-foot-pill {
  --foot-accent: var(--lime);
  --foot-selected-bg: rgba(65, 227, 106, .16);
  position: relative;
  display: block;
  margin: 0;
}
.member-foot-pill--left {
  --foot-accent: #3ebeff;
  --foot-selected-bg: rgba(62, 190, 255, .16);
}
.member-foot-pill--right {
  --foot-accent: #41e36a;
  --foot-selected-bg: rgba(65, 227, 106, .16);
}
.member-foot-pill--both {
  --foot-accent: #ffbe3e;
  --foot-selected-bg: rgba(255, 190, 62, .16);
}
.member-foot-pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.member-foot-pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--foot-accent) 8%, var(--input-bg)), var(--input-bg));
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.member-foot-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: inherit;
}
.member-foot-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}
.member-foot-pill span em {
  min-width: 0;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}
.member-foot-pill span i {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid color-mix(in srgb, var(--foot-accent) 60%, var(--muted));
  border-radius: 50%;
  background: var(--input-bg);
  box-shadow: inset 0 0 0 3px var(--input-bg);
}
.member-foot-pill:hover span,
.member-foot-pill:focus-within span {
  border-color: color-mix(in srgb, var(--foot-accent) 70%, var(--border));
  transform: translateY(-1px);
}
.member-foot-pill:has(input:checked) span {
  border-color: var(--foot-accent);
  background: var(--foot-selected-bg);
  color: var(--foot-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foot-accent) 35%, transparent), 0 8px 18px color-mix(in srgb, var(--foot-accent) 12%, transparent);
}
.member-foot-pill:has(input:checked) span i {
  border-color: var(--foot-accent);
  background: var(--foot-accent);
}
.academy-coach-box.is-readonly .member-foot-pill span,
.fas-form-box.is-readonly .member-foot-pill span {
  opacity: .72;
  cursor: default;
}
.member-measure-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.member-measure-input {
  display: flex;
  align-items: stretch;
  min-height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--input-bg);
  overflow: hidden;
}
.member-measure-input:focus-within {
  border-color: rgba(32, 228, 30, 0.55);
  box-shadow: 0 0 0 3px var(--lime-dim);
}
.member-measure-input input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.member-measure-input input:focus,
.member-measure-input input:focus-visible {
  outline: none;
}
.member-measure-input > span {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 12px;
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 6%, var(--input-bg));
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.register-body-metrics {
  margin: 4px 0 12px;
}
html[data-fas-theme="light"] body.fas-backend .member-foot-pill:has(input:checked) span {
  color: color-mix(in srgb, var(--foot-accent) 72%, #111);
  border-color: var(--foot-accent);
  background: var(--foot-selected-bg);
}
.academy-coach-box-head,
.fas-form-box-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 10px;
}
.academy-coach-box-kicker,
.fas-form-box-kicker {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--box-accent-dim);
  color: var(--box-accent);
  font-size: 13px;
  font-weight: 800;
}
.academy-coach-box-head h4,
.fas-form-box-head h4 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}
.academy-coach-box-note,
.fas-form-box-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.academy-coach-box .full,
.fas-form-box .full { grid-column: 1 / -1; }
.coach-profile-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0;
}
.coach-profile-list-head > div {
  display: grid;
  gap: 2px;
}
.coach-profile-list-head > div > span {
  color: var(--muted);
  font-size: 11px;
}
.coach-license-zone,
.coach-experience-zone {
  margin: 8px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.coach-license-zone {
  border-color: rgba(255, 193, 74, 0.38);
  background: linear-gradient(135deg, rgba(255, 193, 74, 0.10), rgba(255, 193, 74, 0.025));
  box-shadow: inset 4px 0 0 #ffc14a;
}
.coach-license-zone .coach-profile-list-head strong {
  color: #ffd27a;
}
.coach-license-zone .coach-profile-row {
  border-color: rgba(255, 193, 74, 0.24);
}
.coach-experience-zone {
  border-color: rgba(65, 227, 106, 0.24);
  background: rgba(65, 227, 106, 0.035);
}
.coach-upload-field {
  display: grid;
  align-content: start;
  gap: 0;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  position: relative;
}
.coach-file-picker {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
}
.coach-file-picker .coach-file-choose {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 10px;
}
.coach-file-name {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coach-current-academies {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}
.coach-current-academy-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}
.coach-current-academy {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}
.coach-current-academy:has(input:disabled) {
  opacity: 0.72;
}
.coach-current-academy-ended {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.coach-current-academy-card .thai-calendar-trigger:disabled {
  cursor: default;
}
.coach-profile-list {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}
.coach-profile-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  padding: 12px 12px 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}
.coach-profile-row .full,
.coach-profile-row-foot {
  grid-column: 1 / -1;
}
.coach-license-row > label,
.coach-license-row > .coach-upload-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.coach-profile-row-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 42px;
  padding-bottom: 8px;
}
.coach-profile-file-link {
  margin-right: auto;
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
}
.coach-profile-current {
  align-self: end;
  min-height: 42px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
}
.coach-profile-current input {
  width: 18px;
  height: 18px;
}
.academy-coach-box.is-readonly {
  position: relative;
  border-style: dashed;
  opacity: 0.72;
}
.academy-coach-box.is-readonly::after {
  content: "ดูได้อย่างเดียว";
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.academy-inbody-panel {
  --box-accent: #55a8ff;
  --box-accent-dim: rgba(85, 168, 255, 0.14);
}
.academy-inbody-panel.card {
  padding: 16px;
  border-left: 4px solid #55a8ff;
}
.academy-inbody-panel .academy-coach-box-head {
  align-items: center;
}
.academy-inbody-panel-close {
  margin-left: auto;
}
.academy-inbody-upload {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.4fr) auto;
  align-items: end;
  gap: 12px;
  margin: 4px 0 14px;
}
.academy-inbody-upload > label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 0;
}
.academy-inbody-upload .thai-calendar-trigger,
.academy-inbody-upload .file-drop,
.academy-inbody-upload > .btn,
.coach-license-row .thai-calendar-trigger,
.coach-license-row .file-drop,
.academy-fee-card .academy-fee-upload .file-drop {
  box-sizing: border-box;
  min-height: 46px;
  height: 46px;
}
.academy-inbody-upload .file-drop,
.coach-license-row .file-drop,
.academy-fee-card .academy-fee-upload .file-drop {
  margin-top: 6px;
}
.academy-inbody-upload .file-drop-empty,
.coach-license-row .file-drop-empty,
.academy-fee-card .academy-fee-upload .file-drop-empty {
  height: 46px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.academy-inbody-upload .file-drop-file,
.coach-license-row .file-drop-file,
.academy-fee-card .academy-fee-upload .file-drop-file {
  min-height: 46px;
  height: 46px;
  padding: 4px 6px 4px 4px;
}
.file-drop-doc {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: rgba(255, 77, 77, 0.12);
  color: #ff6b6b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.academy-inbody-upload > .btn {
  align-self: end;
  margin: 0;
  padding: 0 18px;
}
.academy-inbody-history {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}
.academy-inbody-history-list {
  display: grid;
  gap: 8px;
}
.academy-inbody-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
}
.academy-inbody-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.academy-inbody-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: zoom-in;
  white-space: nowrap;
}
.academy-inbody-open:hover,
.academy-inbody-open:focus-visible {
  border-color: rgba(85, 168, 255, 0.72);
  color: #55a8ff;
  outline: none;
}
.academy-inbody-open svg {
  flex-shrink: 0;
}
.academy-inbody-pager {
  margin-top: 4px;
}
.academy-inbody-item-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.academy-inbody-item-meta strong {
  color: var(--text);
}
.academy-inbody-item-meta span,
.academy-inbody-item-meta small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.academy-inbody-empty {
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}
.academy-inbody-member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.academy-inbody-member {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.academy-inbody-member:hover,
.academy-inbody-member:focus-visible {
  border-color: rgba(85, 168, 255, 0.72);
}
.academy-inbody-member-photo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
}
.academy-inbody-member-initials {
  background: rgba(85, 168, 255, 0.14);
  color: #55a8ff;
  font-size: 12px;
  font-weight: 800;
}
.academy-inbody-member > span:not(.academy-inbody-member-photo) {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.academy-inbody-member strong,
.academy-inbody-member small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.academy-inbody-member small {
  color: var(--muted);
  font-size: 11px;
}
.academy-inbody-member > b {
  color: #55a8ff;
  font-size: 12px;
}
@media (max-width: 720px) {
  .academy-inbody-upload {
    grid-template-columns: 1fr;
  }
  .academy-inbody-upload > .btn {
    width: 100%;
    margin-bottom: 4px;
  }
  .academy-inbody-item {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .academy-inbody-item-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .academy-inbody-open {
    flex: 1;
    justify-content: center;
  }
  .academy-fee-current-body {
    grid-template-columns: 1fr;
  }
  .academy-fee-slip-preview,
  .academy-fee-slip-preview img {
    width: 100%;
    max-width: 100%;
  }
}
html[data-fas-theme="light"] body.fas-backend .academy-inbody-open:hover,
html[data-fas-theme="light"] body.fas-backend .academy-inbody-open:focus-visible {
  border-color: rgba(37, 99, 180, 0.55);
  color: #1d4f91;
  background: #f4f8ff;
}
html[data-fas-theme="light"] body.fas-backend .coach-license-zone {
  border-color: rgba(171, 110, 0, 0.38);
  background: linear-gradient(135deg, rgba(255, 193, 74, 0.16), rgba(255, 255, 255, 0.65));
  box-shadow: inset 4px 0 0 #b97700;
}
html[data-fas-theme="light"] body.fas-backend .coach-license-zone .coach-profile-list-head strong {
  color: #805200;
}
@media (max-width: 800px) {
  .coach-profile-list-head {
    align-items: flex-start;
  }
  .coach-profile-list-head .btn {
    flex: 0 0 auto;
  }
  .coach-file-picker {
    align-items: stretch;
    flex-direction: column;
  }
  .coach-file-name {
    padding: 2px 3px;
  }
}
.academy-family-list {
  display: grid;
  gap: 10px;
}
.academy-family-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}
.academy-family-card .academy-family-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.academy-family-card .academy-family-person > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.academy-family-card span {
  color: var(--muted);
  font-size: 12px;
}
.profile-onboarding-card,
.profile-reminder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.profile-onboarding-card {
  border-color: rgba(65, 227, 106, 0.35);
}
.profile-onboarding-card h2 {
  margin: 3px 0 6px;
}
.profile-onboarding-card p {
  color: var(--muted);
}
.profile-reminder {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 93, 93, 0.45);
  border-radius: 10px;
  background: rgba(255, 93, 93, 0.08);
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.side-foot .profile-reminder-title strong {
  font-size: 12px;
  line-height: 1.35;
}
.side-foot .profile-reminder-title span {
  font-size: 11px;
  line-height: 1.35;
}
.side-foot .profile-reminder-close {
  align-self: flex-end;
  padding: 4px 10px;
  font-size: 12px;
}
.app.sidebar-collapsed .profile-reminder {
  display: none;
}
.profile-reminder-title {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #ff5d5d;
  text-decoration: none;
}
.profile-reminder-title strong,
.profile-reminder-title span {
  color: #ff5d5d;
}
.profile-reminder-title:hover strong {
  text-decoration: underline;
}
.profile-reminder-close {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 93, 93, 0.45);
  border-radius: 8px;
  background: transparent;
  color: #ff5d5d;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
}
.academy-family-page--form #academy-member-form-split,
.academy-family-page--form #academy-member-cancel,
.academy-family-page--form #academy-member-close {
  display: none;
}
@media (max-width: 640px) {
  .profile-onboarding-card,
  .profile-reminder,
  .academy-family-card {
    align-items: stretch;
    flex-direction: column;
  }
  .profile-onboarding-card .btn,
  .profile-reminder .btn,
  .academy-family-card .btn {
    width: 100%;
  }
}
.academy-guardian-list {
  display: grid;
  gap: 12px;
  margin: 0 0 8px;
}
.academy-guardian-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  padding: 12px 12px 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}
.academy-guardian-card-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.academy-guardian-card-head h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.academy-guardian-primary-label {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.academy-guardian-card .full { grid-column: 1 / -1; }
.academy-guardian-actions {
  margin: 4px 0 12px;
}
.fas-form-box .eval-score-setup,
.fas-form-box .eval-builder-head,
.fas-form-box .eval-section-list,
.fas-form-box .icon-action-add {
  grid-column: 1 / -1;
}
.fas-form-box .eval-builder-head {
  margin: 0 0 10px;
}
.fas-form-box .eval-section-list {
  margin: 0 0 10px;
}
.fas-form-box #eval-form-add-section {
  margin: 0 0 10px;
}
.academy-coach-box--photo .academy-coach-photo-field {
  margin: 0 0 10px;
  justify-items: center;
}
.academy-coaches-page.is-coach-self #coach-invite-panel,
.academy-coaches-page.is-coach-self #academy-coach-add {
  display: none !important;
}
.academy-coaches-table .stories-status {
  width: 168px;
}
.academy-coaches-table .academy-coach-status {
  width: 100%;
  min-width: 140px;
  padding: 8px 32px 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-weight: 600;
}
.academy-coach-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.academy-coach-status.is-approved,
.academy-coach-status-pill.is-approved {
  color: var(--ok);
  background-color: var(--lime-dim);
  border-color: rgba(32, 228, 30, 0.45);
}
.academy-coach-status.is-pending,
.academy-coach-status-pill.is-pending {
  color: var(--warn);
  background-color: rgba(255, 193, 74, 0.14);
  border-color: rgba(255, 193, 74, 0.45);
}
.academy-coach-status.is-alumni,
.academy-coach-status-pill.is-alumni {
  color: var(--muted);
  background-color: rgba(139, 139, 139, 0.12);
  border-color: var(--border-strong);
}
.academy-coach-status.is-rejected,
.academy-coach-status-pill.is-rejected {
  color: var(--danger);
  background-color: rgba(255, 92, 108, 0.12);
  border-color: rgba(255, 92, 108, 0.4);
}
@media (max-width: 760px) {
  .coach-invite-search,
  .coach-invite-copy {
    grid-template-columns: 1fr;
  }
}
.eval-score-table {
  table-layout: auto;
}
.eval-score-table .member-col-name {
  width: 32%;
  min-width: 230px;
  white-space: normal;
  overflow: visible;
  line-height: 1.45;
}
.academy-player-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 7px;
}
.academy-player-fullname {
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.academy-player-nickname {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.eval-score-table .member-col-age {
  width: 52px;
  padding-left: 4px;
  padding-right: 4px;
}
.eval-score-table .member-col-group {
  width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eval-score-table .eval-score-total {
  width: 78px;
  padding-left: 6px;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
}
.eval-score-table .eval-score-scorer {
  width: 14%;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.45;
}
.eval-evaluator-summary {
  display: inline-block;
  color: var(--text);
  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 75%, transparent);
  cursor: help;
}
.eval-evaluator-summary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 3px;
}
.eval-score-table .stories-updated {
  width: 120px;
}
.eval-score-player-field {
  grid-column: 1 / -1;
  position: relative;
  z-index: 8;
}
.eval-score-combo {
  position: relative;
}
.eval-score-combo input[type="search"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}
.eval-score-combo-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 9;
  max-height: 240px;
  overflow: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.eval-score-combo-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.eval-score-combo-done {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 2px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--lime) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--lime) 13%, transparent);
  color: var(--lime);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}
.eval-score-combo-option.is-selected {
  background: rgba(65, 227, 106, 0.12);
}
.eval-score-combo-done.is-partial {
  border-color: color-mix(in srgb, var(--warn, #d97706) 55%, transparent);
  background: color-mix(in srgb, var(--warn, #d97706) 13%, transparent);
  color: var(--warn, #d97706);
}
.eval-score-combo-option:hover,
.eval-score-combo-option:focus {
  background: rgba(65, 227, 106, 0.1);
}
.eval-score-combo-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}
.eval-score-date-field {
  grid-column: 1 / -1;
  position: relative;
  z-index: 6;
}
.eval-score-member-line {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}
.eval-score-sheet { grid-column: 1 / -1; display: grid; gap: 16px; }
.eval-score-section {
  display: grid;
  gap: 0;
  padding: 14px 0 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card-2);
  box-shadow: inset 4px 0 0 var(--lime);
  overflow: hidden;
}
.eval-score-section h4 {
  margin: 0 16px 4px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}
.stories-fields label.eval-score-item,
.eval-score-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.stories-fields label.eval-score-item:last-child,
.eval-score-item:last-child {
  border-bottom: 0;
  padding-bottom: 10px;
}
.stories-fields label.eval-score-item:nth-of-type(even),
.eval-score-item:nth-of-type(even) {
  background: rgba(65, 227, 106, 0.05);
}
.eval-score-item-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.eval-score-item-top strong {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.stories-fields .eval-score-item-top input[type="number"],
.eval-score-item-top input[type="number"] {
  display: block;
  flex: 0 0 88px;
  width: 88px;
  max-width: 88px;
  margin: 0;
  padding: 8px 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.stories-fields .eval-score-item-top input[type="number"].is-score-invalid,
.eval-score-item-top input[type="number"].is-score-invalid,
.eval-stopwatch input[type="number"].is-score-invalid {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--input-bg));
  color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent);
}
.eval-score-item-hint,
.eval-score-item em {
  display: block;
  margin: 0;
  padding-right: 100px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}
.eval-score-item em.eval-score-item-range-error {
  color: var(--danger);
  font-weight: 700;
  padding-right: 0;
}
.eval-forms-table .eval-form-metric {
  width: 68px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.eval-forms-table .eval-form-metric-sub {
  width: 84px;
}
.eval-forms-table .eval-form-metric-score {
  width: 84px;
}
.academy-groups-table .academy-group-name {
  width: 160px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.academy-groups-table .academy-group-branch {
  width: 220px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.academy-groups-table .stories-updated {
  width: 150px;
}
.academy-groups-table .stories-row-actions {
  width: 96px;
}
.academy-training-goal-table .academy-training-goal-label {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.academy-training-format-table .academy-training-format-name,
.academy-training-format-table .academy-training-format-note {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.academy-training-format-table .academy-training-format-name {
  min-width: 180px;
}
.academy-training-format-table .academy-training-format-note {
  min-width: 220px;
}
.academy-training-format-table .stories-updated {
  width: 150px;
}
.academy-training-format-table .stories-row-actions {
  width: 96px;
}
.academy-groups-table .academy-group-metric {
  width: auto;
  min-width: 0;
  max-width: none;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.academy-group-condition {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.academy-group-condition-mode {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.academy-group-condition-detail {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: anywhere;
}
.eval-section-list {
  display: grid;
  gap: 12px;
}
.eval-section-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card-2);
  box-shadow: inset 3px 0 0 var(--lime);
}
.eval-section-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.eval-item-list {
  display: grid;
  gap: 8px;
}
.eval-overview-page .eval-report-card { margin-top: 0; }
.eval-overview-links {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}
.eval-overview-links a {
  color: var(--lime);
  font-weight: 600;
  text-decoration: none;
}
.eval-overview-links a:hover { text-decoration: underline; }
.eval-report-card { margin-top: 16px; }
.eval-report-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  margin: 8px 0 16px;
}
.eval-report-toolbar .stories-filter {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.eval-report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.eval-report-panel {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card-2);
  box-shadow: inset 3px 0 0 var(--lime);
}
.eval-report-panel--wide { grid-column: 1 / -1; }
.eval-report-panel h4 {
  margin: 0 0 2px;
  font-size: 14px;
}
.eval-report-chart { min-height: 160px; }
.eval-report-pie-wrap {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: center;
}
.eval-report-svg { width: 100%; max-width: 200px; height: auto; }
.eval-report-line-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 300px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  scrollbar-gutter: stable;
}
.eval-report-svg--line {
  display: block;
  width: 100%;
  max-width: none;
  max-height: 340px;
  height: auto;
  min-height: 280px;
  margin: 0 auto;
}
.eval-report-legend {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: 13px;
}
.eval-report-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eval-report-swatch {
  width: 12px;
  height: 12px;
  border-radius: 99px;
  flex: 0 0 12px;
}
.eval-report-panel--wide .eval-report-bars {
  max-width: 640px;
}
.eval-report-bars {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.eval-report-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.eval-report-bar-track {
  height: 12px;
  border-radius: 99px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.eval-report-bar-track span {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.eval-report-svg--line text {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
}
.eval-report-line-val {
  fill: var(--text);
  font-size: 11px;
  font-weight: 600;
}
.eval-report-line-month { font-size: 10px; }
.eval-report-line-year {
  fill: var(--text);
  font-size: 10px;
  font-weight: 600;
}
.eval-report-svg--line line {
  stroke: var(--border);
  stroke-width: 0.8;
}
.eval-report-svg--line .eval-report-line {
  stroke-width: 2;
}
@media (max-width: 900px) {
  .eval-report-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .eval-report-grid,
  .eval-report-pie-wrap { grid-template-columns: 1fr; }
  .eval-report-panel--wide { grid-column: auto; }
  .eval-report-svg { max-width: 180px; margin: 0 auto; }
  .eval-report-line-wrap {
    min-height: 300px;
  }
  #eval-overview-line { min-height: 300px; }
  .eval-report-svg.eval-report-svg--line {
    max-width: none;
    max-height: none;
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
  }
  .eval-report-svg--line text { font-size: 10px; }
  .eval-report-line-val { font-size: 11px; }
  .eval-report-line-month,
  .eval-report-line-year { font-size: 10px; }
}
@media (max-width: 600px) {
  .eval-overview-page .eval-report-card {
    padding-right: 10px;
    padding-left: 10px;
  }
  .eval-report-toolbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .eval-report-panel {
    padding: 12px 10px;
  }
  .eval-report-panel h4 {
    font-size: 13px;
    line-height: 1.35;
  }
  .eval-report-pie-wrap {
    gap: 12px;
  }
  .eval-report-legend,
  .eval-report-bar-label {
    font-size: 12px;
  }
  .eval-overview-links {
    line-height: 1.6;
  }
  .eval-report-line-wrap {
    margin-inline: 0;
    min-height: 295px;
  }
  #eval-overview-line { min-height: 295px; }
}
@media (max-width: 380px) {
  .eval-report-panel {
    padding: 10px 8px;
  }
  .eval-report-grid {
    gap: 12px;
  }
  .eval-report-line-wrap,
  #eval-overview-line {
    min-height: 290px;
  }
}
.eval-score-setup {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(140px, 200px);
  gap: 12px;
  align-items: end;
}
.eval-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(168px, 0.85fr) auto;
  gap: 8px;
  align-items: end;
}
.eval-item-row .eval-item-timed {
  min-height: 46px;
  padding: 0;
  border: 0;
}
.eval-stopwatch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.eval-stopwatch input[type="number"] {
  flex: 0 0 96px;
  width: 96px;
  max-width: 96px;
}
.eval-stopwatch .btn {
  min-height: 44px;
  padding: 8px 12px;
  white-space: nowrap;
}
.eval-stopwatch-unit {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.eval-stopwatch.is-running input[type="number"] {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent);
}
.eval-form-whole-timer {
  margin: 12px 0 0;
}
.eval-score-item--time .eval-score-item-top {
  flex-wrap: nowrap;
}
.eval-score-item-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.eval-score-item-time-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.eval-score-item--time .eval-score-item-hint {
  padding-right: 0;
}
.eval-item-row label,
.eval-section-top label {
  margin: 0;
}
.story-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: rgba(0, 0, 0, 0.78);
  outline: none;
}
.story-image-viewer img {
  width: auto;
  height: auto;
  max-width: min(92vw, 960px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: var(--shadow);
  background: #000;
}
.story-image-viewer-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.story-image-viewer-close:hover {
  background: rgba(0, 0, 0, 0.7);
}
.story-image-field {
  display: grid;
  gap: 10px;
  margin: 8px 0 16px;
}
.story-image-field strong { color: var(--text); font-size: 13px; }
.story-image-field > .story-image-hint { margin: 0; }
.story-image-drop {
  min-height: 168px;
  align-items: stretch;
}
.story-image-drop .file-drop-empty {
  min-height: 168px;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.story-image-drop .file-drop-file {
  min-height: 168px;
  padding: 12px;
  gap: 12px;
}
.story-image-drop .file-drop-thumb,
.story-image-drop .file-drop-thumb img {
  width: 132px;
  height: 132px;
  border-radius: 10px;
}
.story-image-drop .stories-thumb-btn {
  flex: 0 0 auto;
}
.story-image-remove,
.story-image-drop .file-drop-remove {
  flex: 0 0 auto;
  width: auto;
  min-width: 48px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 92, 108, 0.45);
  border-radius: 10px;
  background: rgba(255, 92, 108, 0.16);
  color: var(--danger);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.story-image-remove:hover,
.story-image-drop .file-drop-remove:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.story-image-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.story-image-actions .btn {
  min-height: 44px;
}
.story-image-hint {
  color: var(--muted);
  font-size: 12px;
}
.color-field input { min-height: 44px; padding: 5px; cursor: pointer; }
.settings-actions {
  position: sticky;
  bottom: 12px;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--bg-card);
}
.settings-lock-note { text-align: center; }
/* T20: «กรอกไม่ครบ» warning beside the save button (js/fas-field-error.js footerWarning) */
.fas-save-warning {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 auto 0 0;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-card));
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.fas-save-warning[hidden],
.fas-save-warning-go[hidden] { display: none; }
.fas-save-warning-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.fas-save-warning-text { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.fas-save-warning-go {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}
.fas-save-warning-go:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
html[data-fas-theme="light"] .fas-save-warning { color: #c8102e; background: #fff1f2; border-color: #f5b5bd; }
html[data-fas-theme="light"] .fas-save-warning-icon { background: #c8102e; }
.fas-field-flash > input,
.fas-field-flash > select,
.fas-field-flash > textarea { animation: fas-field-flash 1.4s ease-out 1; }
@keyframes fas-field-flash {
  0%, 45% { outline: 3px solid var(--danger); outline-offset: 3px; }
  100% { outline: 3px solid transparent; outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .fas-field-flash > input,
  .fas-field-flash > select,
  .fas-field-flash > textarea { animation: none; }
}
@media (max-width: 1100px) {
  body.fas-backend .settings-actions:has(> .fas-save-warning:not([hidden])),
  body.fas-backend .stories-actions:has(> .fas-save-warning:not([hidden])) { flex-wrap: wrap; }
  body.fas-backend .settings-actions > .fas-save-warning,
  body.fas-backend .stories-actions > .fas-save-warning { flex: 1 1 100%; margin: 0; padding: 6px 9px; font-size: 12.5px; }
}
/* T20 rollout: save rows that are not .settings-actions */
.academy-fee-upload:has(> .fas-save-warning:not([hidden])) { flex-wrap: wrap; }
.academy-fee-upload > .fas-save-warning { flex: 1 1 100%; margin: 0; }
.fas-save-warning.is-standalone { margin: 0 0 10px; }
.visual-editor-bar > .fas-save-warning { order: 99; flex: 1 1 100%; margin: 0; }
.sx-mfoot .fas-save-warning { flex: 1 1 auto; margin: 0; padding: 6px 10px; font-size: 12.5px; }
.sx-save-why-row { padding: 8px 16px 0; }
.sx-save-why-row .fas-save-warning { margin: 0; }
.coach-invitation-form > .fas-save-warning { grid-column: 1 / -1; margin: 0; }
.child-apply-consent:has(> .field-error),
.pdpa-consent:has(> .field-error) { flex-wrap: wrap; }
.child-apply-consent:has(> .field-error) > span,
.pdpa-consent:has(> .field-error) > span { flex: 1 1 0; min-width: 0; }
.child-apply-consent > .field-error,
.pdpa-consent > .field-error { flex: 1 1 100%; margin: 0; }
.media-field { display: grid; gap: 10px; }
.media-browse {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.media-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.media-browse-btn { min-width: 128px; }
.media-file-name {
  color: var(--muted);
  font-size: 13px;
  word-break: break-all;
}
.media-hint {
  margin: 0;
  color: #8f8f8f;
  font-size: 12px;
}
.media-preview {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0a0a0a;
  max-width: 360px;
}
.media-preview img,
.media-preview video {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

/* app shell */
.app {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100vh;
  background: var(--app-bg);
  transition: grid-template-columns 0.28s ease;
}
.app.sidebar-collapsed {
  grid-template-columns: 76px 1fr;
}
.sidebar {
  border-right: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  width: var(--sidebar);
  min-width: 0;
  overflow: hidden;
  transition: width 0.28s ease, padding 0.28s ease;
  container-type: inline-size;
  container-name: fas-sidebar;
}
.app.sidebar-collapsed .sidebar {
  width: 76px;
  padding: 16px 12px;
}
.side-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding: 22px 28px 10px 8px;
}
.side-head .brand {
  min-width: 0;
  flex: 1;
  padding: 0;
  justify-content: center;
}
.sidebar-academy-brand {
  text-decoration: none;
  color: inherit;
  width: 100%;
}
button.sidebar-academy-brand {
  position: relative;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.sidebar-academy-switch {
  position: relative;
  width: 100%;
  min-width: 0;
}
.sidebar-academy-switch-chevron {
  position: absolute;
  right: 4px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--powered-prefix, #9ca3af);
  transform: rotate(90deg);
}
.app.sidebar-collapsed .sidebar-academy-switch-chevron {
  right: 0;
  bottom: 0;
}
html[data-fas-theme="dark"] body.fas-backend .sidebar,
body.fas-backend .sidebar {
  --sidebar-bg: #090d0a;
  --academy-name: #ffffff;
  --powered-prefix: #9ca3af;
  --fas-green: #18f020;
  --fas-as: #ffffff;
}
html[data-fas-theme="light"] body.fas-backend .sidebar {
  --sidebar-bg: #ffffff;
  --academy-name: #1a2d4a;
  --powered-prefix: #6b7280;
  --fas-green: #18f020;
  --fas-as: #0a0a0a;
}
.sidebar-academy-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.sidebar-academy-logo {
  display: block;
  width: 70px;
  height: 70px;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border-radius: 50%;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}
.sidebar-academy-logo.sidebar-academy-logo-fas {
  width: 48px;
  height: 48px;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
}
.sidebar-academy-logo-fas-light { display: none; }
html[data-fas-theme="light"] body.fas-backend .sidebar-academy-logo-fas-dark { display: none; }
html[data-fas-theme="light"] body.fas-backend .sidebar-academy-logo-fas-light { display: block; }
.sidebar-academy-logo[hidden] { display: none !important; }
.sidebar-academy-name,
.academy-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin: 5px auto 0;
  padding-inline: 8px;
  color: var(--academy-name, #ffffff);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  font-size: clamp(13px, 1.9vw, 15px);
}
@container fas-sidebar (max-width: 180px) {
  .sidebar-academy-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    text-overflow: unset;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
.sidebar-fas-credit,
.powered-by-fas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  color: var(--powered-prefix, #9ca3af);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  margin-top: 2px;
  text-transform: none;
}
.powered-by,
.powered-by-fas__prefix {
  color: var(--powered-prefix, #9ca3af);
  font-weight: 500;
  letter-spacing: 0;
  white-space: pre;
}
.powered-by-fas-word,
.fas-wordmark {
  display: inline;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-left: 0;
}
.fas-f,
.fas-as {
  margin: 0;
  padding: 0;
  letter-spacing: inherit;
  font-weight: 600;
}
.fas-f {
  color: var(--fas-green, #18f020);
}
.fas-as {
  color: var(--fas-as, #ffffff);
}
html[data-fas-theme="light"] body.fas-backend .fas-as {
  color: #0a0a0a;
}
html[data-fas-theme="dark"] body.fas-backend .fas-as {
  color: #ffffff;
}
.sidebar-academy-name.sidebar-login-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  text-overflow: unset;
  overflow-wrap: anywhere;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.3;
}
.sidebar-login-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  margin-top: 2px;
  color: var(--powered-prefix, #9ca3af);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}
.sidebar-login-role,
.sidebar-login-via {
  display: inline;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.sidebar-login-via::before {
  content: "·";
  margin-right: 4px;
}
.sidebar-brand-mark {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.sidebar-child-photo,
.sidebar-child-initials {
  width: 56px;
  height: 56px;
}
.sidebar-child-photo {
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.sidebar-child-initials {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #20E41E, #129A12);
  color: #111;
  font-size: 18px;
  font-weight: 800;
}
.sidebar .brand .logo-mark {
  display: none;
  width: 36px;
  height: 36px;
}
.side-toggle {
  position: static;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.side-toggle-row {
  position: absolute;
  top: 16px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding: 0;
}
.side-toggle:hover {
  color: var(--lime);
  border-color: rgba(32,228,30,0.28);
  background: var(--lime-dim);
}
.app.sidebar-collapsed .side-head {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  min-height: 0;
  padding: 6px 2px 8px;
}
.app.sidebar-collapsed .side-head .brand {
  flex: 0 0 auto;
  justify-content: center;
  padding: 0;
}
body.fas-backend .app.sidebar-collapsed .side-head {
  gap: 0;
  padding-bottom: 10px;
  margin-bottom: 0;
}
body.fas-backend .app.sidebar-collapsed .side-toggle {
  width: 44px;
  min-width: 44px;
  height: 44px;
}
body.fas-backend .app.sidebar-collapsed .side-toggle-row {
  position: static;
  justify-content: center;
  padding-top: 8px;
}
.app.sidebar-collapsed .sidebar-academy-lockup {
  align-items: center;
  max-width: 100%;
  gap: 0;
}
.app.sidebar-collapsed .sidebar-academy-logo {
  width: 40px;
  height: 40px;
  max-width: 40px;
  object-fit: cover;
  object-position: left center;
}
.app.sidebar-collapsed .sidebar-academy-logo.sidebar-academy-logo-fas {
  object-fit: contain;
  object-position: center;
}
.app.sidebar-collapsed .sidebar-academy-name {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(9px, 2.2vw, 11px);
  padding-inline: 4px;
  max-width: 100%;
}
.app.sidebar-collapsed .sidebar-fas-credit {
  display: block;
  margin-top: 0;
  font-size: 8px;
}
.app.sidebar-collapsed .sidebar-login-name,
.app.sidebar-collapsed .sidebar-login-meta {
  display: none;
}
.app.sidebar-collapsed .sidebar-child-initials {
  width: 40px;
  height: 40px;
  font-size: 13px;
}
.app.sidebar-collapsed .powered-by,
.app.sidebar-collapsed .powered-by-fas__prefix {
  display: none;
}
.app.sidebar-collapsed .brand-lockup,
.app.sidebar-collapsed .sidebar-logo { display: none; }
.app.sidebar-collapsed .sidebar .brand .logo-mark { display: block; }
.app.sidebar-collapsed .sidebar .brand .logo-mark-light { display: none; }
.app.sidebar-collapsed .side-link span,
.app.sidebar-collapsed .side-user .meta { display: none; }
.app.sidebar-collapsed .side-link {
  justify-content: center;
  padding: 10px 8px;
  gap: 0;
}
.app.sidebar-collapsed .side-user {
  justify-content: center;
  padding: 12px 0 4px;
}
.guardian-side-pickers {
  display: grid;
  gap: 8px;
  padding: 8px 4px 2px;
}
.guardian-side-field {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.guardian-academy-picker {
  position: relative;
  display: grid;
  gap: 4px;
}
.guardian-academy-kicker {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.guardian-academy-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.guardian-academy-trigger strong,
.guardian-academy-option strong,
.guardian-side-academy-only strong {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guardian-academy-trigger.is-placeholder strong {
  color: var(--muted);
  font-weight: 600;
}
.guardian-child-dropdown {
  position: relative;
}
.guardian-child-trigger,
.guardian-child-only {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.guardian-child-trigger {
  cursor: pointer;
}
.guardian-child-trigger strong,
.guardian-child-only strong,
.guardian-child-option strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guardian-child-chevron {
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  flex: 0 0 auto;
  opacity: 0.7;
}
.guardian-child-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: #121914;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.guardian-child-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.guardian-child-option:hover,
.guardian-child-option:focus-visible,
.guardian-child-option.is-current {
  background: var(--lime-dim);
}
.guardian-child-pick-photo,
.guardian-child-pick-initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.guardian-child-pick-photo {
  object-fit: cover;
}
.guardian-child-pick-initials {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
}
.member-rights-block.is-pickable {
  cursor: pointer;
}
.member-rights-block.is-pickable:hover,
.member-rights-block.is-pickable:focus-visible,
.member-rights-block.is-current {
  border-color: rgba(32, 228, 30, 0.45);
}
.member-rights-block.is-pickable:focus-visible {
  outline: 2px solid rgba(32, 228, 30, 0.45);
  outline-offset: 2px;
}
#guardian-child-menu {
  box-sizing: border-box;
  max-width: none;
  overflow: hidden;
}
.guardian-academy-menu {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 2px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: #121914;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.guardian-academy-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.guardian-academy-option:hover,
.guardian-academy-option:focus-visible,
.guardian-academy-option.is-current {
  background: var(--lime-dim);
}
.guardian-side-academy-logo-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}
.guardian-side-academy-only {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.guardian-side-academy-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.06);
}
.academy-family-card .profile-edit-btn {
  border-color: rgba(245, 184, 74, 0.5);
  background: rgba(245, 184, 74, 0.08);
  color: #f5c76f;
}
.academy-family-card .profile-edit-btn:hover,
.academy-family-card .profile-edit-btn:focus-visible {
  border-color: rgba(245, 184, 74, 0.8);
  background: rgba(245, 184, 74, 0.15);
}
.academy-family-card .guardian-view-btn {
  border-color: rgba(90, 169, 255, 0.5);
  background: rgba(90, 169, 255, 0.08);
  color: #80bdff;
}
.academy-family-card .guardian-view-btn:hover,
.academy-family-card .guardian-view-btn:focus-visible {
  border-color: rgba(90, 169, 255, 0.85);
  background: rgba(90, 169, 255, 0.16);
}
.academy-family-card .guardian-view-btn.is-current {
  border-color: rgba(32, 228, 30, 0.45);
  background: rgba(32, 228, 30, 0.08);
  color: var(--lime);
}
.academy-family-card .guardian-view-btn.is-current:hover,
.academy-family-card .guardian-view-btn.is-current:focus-visible {
  border-color: rgba(32, 228, 30, 0.7);
  background: rgba(32, 228, 30, 0.14);
}
.academy-family-card .guardian-view-btn.is-locked,
.academy-family-card .guardian-view-btn.is-locked:hover,
.academy-family-card .guardian-view-btn.is-locked:focus-visible {
  cursor: default;
  pointer-events: none;
}
.guardian-side-picker-status {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.guardian-side-picker-status.is-error { color: #ff8d8d; }
.guardian-side-picker-status .btn { margin-top: 6px; }
.guardian-player-kicker {
  margin: 8px 8px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
#guardian-player-menus {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}
.app.sidebar-collapsed .guardian-player-kicker,
.app.sidebar-collapsed .guardian-academy-kicker,
.app.sidebar-collapsed .guardian-academy-trigger strong,
.app.sidebar-collapsed .guardian-side-academy-only strong,
.app.sidebar-collapsed .guardian-side-picker-status { display: none; }
.app.sidebar-collapsed .guardian-side-pickers {
  justify-items: center;
  padding: 4px 0 0;
}
.app.sidebar-collapsed .guardian-academy-trigger,
.app.sidebar-collapsed .guardian-side-academy-only {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.side-nav {
  display: grid;
  align-content: start;
  gap: 4px;
  margin-top: 18px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
}
.side-link:hover { background: var(--bg-hover); color: var(--link-hover); }
.side-link.active {
  background: var(--lime-dim);
  color: var(--lime);
  box-shadow: inset 0 0 0 1px rgba(32,228,30,0.18);
}
.side-foot {
  margin-top: auto;
  display: grid;
  gap: 8px;
  flex: 0 0 auto;
}
.side-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 4px;
  border-top: 1px solid var(--border);
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #20E41E, #129A12);
  color: #111; font-weight: 800; display: grid; place-items: center; font-size: 13px;
  overflow: hidden;
  flex: 0 0 auto;
}
.avatar img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 18%;
}
.side-user .avatar {
  position: relative;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  flex: 0 0 40px;
}
.side-user .avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.side-user .meta { font-size: 12px; }
.side-user .meta strong { display: block; font-size: 13px; }
.side-user .meta span { color: var(--muted); }

.main { min-width: 0; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar h1 { font-size: 16px; font-weight: 600; }
.topbar h1 span { color: var(--muted); font-weight: 500; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.fas-top-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 12px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(10, 14, 25, 0.82);
}
.fas-top-menu-link {
  --fas-menu-tone: #38bdf8;
  --fas-menu-soft: rgba(56, 189, 248, 0.13);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--fas-menu-tone) 42%, transparent);
  border-radius: 11px;
  padding: 10px 15px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fas-menu-tone);
  text-decoration: none;
  background: var(--fas-menu-soft);
}
.fas-top-menu-link.is-activity {
  --fas-menu-tone: #fb923c;
  --fas-menu-soft: rgba(251, 146, 60, 0.13);
}
.fas-top-menu-link svg {
  flex: 0 0 auto;
}
.fas-top-menu-link:hover {
  color: var(--fas-menu-tone);
  border-color: var(--fas-menu-tone);
  background: color-mix(in srgb, var(--fas-menu-tone) 22%, transparent);
}
.fas-top-menu-link:focus-visible {
  outline: 2px solid var(--fas-menu-tone);
  outline-offset: 2px;
}
.fas-top-menu-link.is-on {
  background: var(--fas-menu-tone);
  color: #fff;
  border-color: color-mix(in srgb, var(--fas-menu-tone) 84%, #fff);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--fas-menu-tone) 30%, transparent);
}
.fas-control-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 270px;
}
.fas-control-brand-mark {
  display: grid;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid rgba(65, 227, 106, 0.24);
  border-radius: 14px;
  background: rgba(65, 227, 106, 0.07);
}
.fas-control-brand-mark img {
  display: block;
  object-fit: contain;
}
.fas-control-logo-light {
  display: none !important;
}
.fas-control-brand-copy {
  display: grid;
  min-width: 0;
}
.fas-control-brand-copy > span {
  color: #41e36a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.fas-control-brand-copy strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}
.fas-control-brand-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.app-directory .topbar {
  display: grid;
  grid-template-columns: minmax(270px, auto) minmax(330px, 1fr) auto;
  gap: 16px;
  padding-block: 12px;
}
@media (max-width: 760px) {
  .app-directory .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .fas-top-menu {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  .app-directory .top-actions {
    grid-column: 2;
    grid-row: 1;
  }
  .fas-top-menu-link {
    flex: 1 0 auto;
  }
  .fas-control-brand {
    min-width: 0;
  }
  .fas-control-brand-mark {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
  .fas-control-brand-mark img {
    width: 36px;
    height: 36px;
  }
  .fas-control-brand-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.chip {
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); display: grid; place-items: center; cursor: pointer;
  flex-shrink: 0;
}
.icon-btn svg,
.side-link svg,
.icon-action svg {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: inherit;
  stroke: currentColor;
}
.content { padding: 22px 24px 40px; }
.app-visual {
  height: 100vh;
  overflow: hidden;
}
.app-visual .main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100vh;
  overflow: hidden;
}
.app-visual .content {
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.visual-editor {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.visual-editor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}
.visual-split {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.visual-settings {
  overflow: auto;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-2);
}
.visual-color-panel {
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.visual-color-title {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.visual-color-panel > summary.visual-color-title {
  cursor: pointer;
  user-select: none;
  padding: 10px 0;
  margin: 0;
}
.visual-color-panel[open] {
  padding-bottom: 14px;
}
.visual-color-panel[open] > summary.visual-color-title {
  margin-bottom: 10px;
}
.visual-color-panel:not([open]) > summary.visual-color-title {
  margin-bottom: 0;
}
.theme-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.theme-card {
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.theme-card:hover { border-color: rgba(32,228,30,0.28); }
.theme-card.active {
  border-color: rgba(32,228,30,0.45);
  box-shadow: inset 0 0 0 1px rgba(32,228,30,0.18);
  background: var(--lime-dim);
}
.theme-swatches {
  display: flex;
  overflow: hidden;
  height: 12px;
  border: 1px solid #454545;
  border-radius: 4px;
  background: #222;
}
.theme-swatches i + i { border-left: 1px solid rgba(255,255,255,.45); }
.theme-card[data-theme="red-black"] .theme-swatches i:last-child {
  box-shadow: inset 0 0 0 1px #777;
}
.theme-card strong { font-size: 11px; line-height: 1.2; }
.theme-card small {
  overflow: hidden;
  color: #9a9a9a;
  font-size: 8.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visual-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 8px;
}
.visual-color-row:last-child { margin-bottom: 0; }
.visual-surface-drop {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.visual-surface-label {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.file-drop--surface {
  min-height: 88px;
  border-style: dashed;
  border-radius: 14px;
}
.file-drop--surface .file-drop-empty {
  min-height: 80px;
  align-content: center;
  padding: 16px 14px;
  gap: 6px;
}
.file-drop--surface .file-drop-copy {
  color: var(--text);
  font-size: 13px;
}
.file-drop--surface .file-drop-hint {
  font-size: 12px;
}
.visual-settings .visual-extras {
  padding: 0 14px;
}
.visual-split .visual-hero-grid {
  grid-template-columns: 1fr;
}
.visual-split .visual-extras-grid {
  grid-template-columns: 1fr;
}
.visual-split .visual-nav-row {
  grid-template-columns: 1fr;
}
.file-drop {
  position: relative;
  display: grid;
  min-height: 34px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.stories-fields .file-drop > .media-file-input,
.settings-fields .file-drop > .media-file-input,
.file-drop > .media-file-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip: auto;
  clip-path: none;
  overflow: hidden;
  font-size: 16px;
  cursor: pointer;
}
.file-drop:hover,
.file-drop.is-drag,
.file-drop:focus-visible {
  border-color: rgba(32,228,30,.55);
  background: var(--lime-dim);
  color: var(--lime);
  outline: none;
}
.file-drop-empty {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 8px 10px;
  text-align: center;
  line-height: 1.4;
}
.file-drop-copy {
  display: block;
  max-width: 100%;
  color: inherit;
  font-weight: 600;
}
.file-drop-hint {
  display: block;
  max-width: 100%;
  color: var(--faint);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}
.file-drop-empty u {
  color: var(--lime);
  text-underline-offset: 2px;
}
.file-drop-file {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 3px 4px 3px 3px;
}
.file-drop-thumb {
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--thumb-bg);
  flex: 0 0 auto;
}
.file-drop-thumb img,
.file-drop-thumb video {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: cover;
}
.file-drop-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-drop-meta {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 1px;
}
.file-drop-meta .file-drop-name {
  flex: none;
  display: block;
}
.file-drop-status {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-drop-progress {
  display: none;
}
.file-drop-remove {
  position: relative;
  z-index: 3;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9a9a9a;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.file-drop-remove:hover {
  color: var(--danger);
  background: rgba(255,77,77,.12);
}
.visual-split .visual-editor-wrap {
  min-width: 0;
  height: 100%;
}
.visual-editor-copy {
  display: grid;
  gap: 2px;
  margin-right: auto;
}
.visual-editor-copy strong { font-size: 14px; }
.visual-editor-copy span { color: var(--muted); font-size: 12px; }
.visual-color {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.visual-color input {
  width: 36px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.visual-bg-btn {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.visual-nav-file {
  display: grid;
  gap: 6px;
  align-content: end;
  color: var(--muted);
  font-size: 11px;
}
.visual-nav-rows {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
}
.visual-nav-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.visual-nav-row strong { font-size: 13px; }
.visual-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 14px;
}
.visual-hero-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.visual-hero-types {
  display: flex;
  gap: 14px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.visual-hero-media {
  display: grid;
  gap: 8px;
}
.visual-hero-media[hidden] { display: none; }
.visual-player-card-preview {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}
.visual-player-card-stock {
  position: relative;
  display: grid;
  margin: 0 auto;
  width: min(100%, 168px);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.visual-player-card-clear {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.visual-player-card-clear:hover {
  background: var(--danger);
  color: #fff;
}
.visual-player-card-clear[hidden],
.visual-player-card-stock[hidden],
.visual-player-chart-preview[hidden] { display: none; }
.visual-player-card-frame {
  position: relative;
  display: block;
  width: 100%;
}
.visual-player-card-stock img {
  display: block;
  width: 100%;
  aspect-ratio: 819 / 1024;
  object-fit: contain;
  background: #111;
  border-radius: 8px;
}
.visual-player-card-stock.is-empty .visual-player-card-frame,
.visual-player-card-frame[hidden],
.visual-player-card-empty[hidden] { display: none; }
.visual-player-card-stock.is-empty {
  aspect-ratio: 819 / 1024;
  place-items: center;
  align-content: center;
  background: var(--bg-card-2);
}
.visual-player-card-stock.is-empty span {
  display: block;
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}
.visual-player-chart-preview {
  position: relative;
  aspect-ratio: 819 / 1024;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #07110d, #151515 58%, #020403);
}
.visual-player-chart-preview > .visual-player-chart-template {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0.64;
}
.visual-player-chart-design {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 5px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.68), transparent 38%, rgba(0,0,0,0.42));
}
.visual-player-chart-preview.has-template .visual-player-chart-design { display: none; }
.visual-player-chart-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--chart-primary, #ff3131);
  font-size: 7px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.04em;
}
.visual-player-chart-head img {
  display: block;
  width: 35px;
  height: 28px;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
}
.visual-player-chart-person {
  display: flex;
  align-items: center;
  gap: 7px;
}
.visual-player-chart-person > i {
  display: block;
  width: 35px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  background: url("../site/assets/academy-eval-stadium.webp?v=20260909w") center / cover;
}
.visual-player-chart-person span {
  display: grid;
  gap: 2px;
}
.visual-player-chart-person b { font-size: 10px; }
.visual-player-chart-person small { color: #cbd3ce; font-size: 7px; }
.visual-player-chart-design svg {
  align-self: center;
  width: 100%;
  max-height: 105px;
}
.visual-player-chart-grid polygon,
.visual-player-chart-grid line {
  fill: none;
  stroke: rgba(255,255,255,0.28);
  stroke-width: 1;
}
.visual-player-chart-value {
  fill: color-mix(in srgb, var(--chart-primary, #ff3131) 32%, transparent);
  stroke: var(--chart-primary, #ff3131);
  stroke-width: 3;
  stroke-linejoin: round;
}
.visual-player-chart-note {
  color: #cbd3ce;
  font-size: 6px;
  line-height: 1.3;
  text-align: center;
}
.visual-player-card-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.visual-player-card-panel[hidden] { display: none; }
.visual-player-card-caption {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.visual-player-card-caption textarea {
  width: 100%;
  min-height: 10.5em;
  resize: vertical;
}
.visual-hero-hint {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}
.visual-hero-grid .full { grid-column: 1 / -1; }
.visual-hero-grid textarea {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
}
.visual-extras {
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.visual-academy-panel {
  border-left: 3px solid var(--lime, #20E41E);
}
.visual-academy-panel .visual-hero-hint:first-of-type {
  padding-bottom: 8px;
}
.visual-extras summary {
  cursor: pointer;
  padding: 10px 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.visual-extras-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 14px;
}
.visual-extras-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}
.visual-extras-grid input,
.visual-extras-grid textarea,
.visual-extras-grid select {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.visual-extras-grid .ve-color-hex {
  display: flex;
  align-items: center;
  gap: 8px;
}
.visual-extras-grid .ve-color-hex input[type="color"] {
  flex: 0 0 44px;
  width: 44px;
  height: 36px;
  min-height: 36px;
  padding: 2px;
  cursor: pointer;
}
.visual-extras-grid .ve-color-hex input:not([type="color"]) {
  flex: 1 1 auto;
  width: auto;
}
.visual-extras-grid .full { grid-column: 1 / -1; }
.pdpa-settings > .visual-hero-hint { margin: 0 0 14px; }
.pdpa-settings-body { display: grid; gap: 18px; padding-bottom: 12px; }
.pdpa-form-block { display: grid; gap: 6px; min-width: 0; }
.pdpa-form-block label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text); font-size: 13px; font-weight: 700; }
.pdpa-form-block textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 150px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
.pdpa-form-block.is-invalid textarea { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.pdpa-form-block.is-invalid label { color: var(--danger); }
.pdpa-field-error { margin: 0; color: var(--danger); font-size: 12px; font-weight: 650; }
.pdpa-count { margin: 0; color: var(--muted); font-size: 11px; text-align: right; }
.pdpa-count.is-over { color: var(--danger); font-weight: 700; }
.pdpa-badge { padding: 2px 8px; border-radius: 999px; background: var(--lime-dim); color: var(--text); font-size: 11px; font-weight: 700; }
.pdpa-badge.is-default { background: var(--bg-card-2, var(--bg-2)); border: 1px solid var(--border); color: var(--muted); }
.pdpa-locked { padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; background: var(--bg-card-2, var(--bg-2)); }
.pdpa-locked b { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 12px; }
.pdpa-locked p { margin: 6px 0 0; color: var(--text); font-size: 12px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.pdpa-settings-actions { display: flex; flex-direction: column-reverse; gap: 10px; padding-bottom: 14px; }
.pdpa-settings-actions .btn { width: 100%; justify-content: center; }
.pdpa-settings #pdpa-feedback { margin: 0 0 10px; }
.app-visual .settings-feedback {
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.visual-editor-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #111;
}
.visual-preview-tabs {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  display: flex;
  gap: 6px;
}
.visual-preview-tab {
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(17, 17, 17, 0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.visual-preview-tab.active {
  background: var(--lime);
  color: #111;
}
.visual-editor-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.visual-editor-wrap.is-phone-preview {
  background: #0a0a0a;
}
.visual-editor-wrap.is-phone-preview .visual-editor-frame {
  width: 390px;
  max-width: 100%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat .label { color: var(--muted); font-size: 12px; font-weight: 600; }
.stat .value { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; margin: 6px 0 4px; }
.delta { font-size: 12px; color: var(--lime); font-weight: 600; }

.grid-2 { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; margin-top: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 14px; }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.card-title { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.card-title h3 { font-size: 14px; font-weight: 700; }
.card-title span { color: var(--muted); font-size: 12px; }
.card-title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; color: var(--muted); font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.table td { padding: 12px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:hover td { background: var(--table-hover); }
.badge {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 3px 8px; font-size: 11px; font-weight: 700;
}
.badge-lime { background: var(--lime-dim); color: var(--lime); }
.badge-muted { background: #1b1b1b; color: #bbb; }
.badge-warn { background: rgba(255,193,74,0.12); color: var(--warn); }
.badge-danger { background: rgba(255,92,108,0.12); color: var(--danger); }

.match-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 10px; }
.match-row:last-child { border-bottom: 0; }
.team { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.crest {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #111;
}
.vs { color: var(--faint); font-size: 11px; }

.bracket { display: grid; grid-template-columns: 1fr 1fr 0.7fr; gap: 16px; font-size: 12px; }
.bracket-col { display: grid; gap: 14px; align-content: center; }
.b-match {
  background: #161616;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.b-team { display: flex; justify-content: space-between; padding: 8px 10px; }
.b-team.win { background: rgba(32,228,30,0.08); color: var(--lime); font-weight: 700; }
.b-team + .b-team { border-top: 1px solid var(--border); }

.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut {
  width: 128px; height: 128px; border-radius: 50%;
  background: conic-gradient(#20E41E 0 38%, #14B814 38% 62%, #0A6B0A 62% 82%, #2a2a2a 82% 100%);
  display: grid; place-items: center;
  position: relative;
}
.donut::after {
  content: "";
  width: 82px; height: 82px; border-radius: 50%; background: var(--bg-card);
  position: absolute;
}
.donut-center { position: relative; z-index: 1; text-align: center; }
.donut-center strong { display: block; font-size: 22px; }
.donut-center span { font-size: 11px; color: var(--muted); }
.legend { display: grid; gap: 8px; font-size: 13px; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 12px; }
.cal .dow { color: var(--muted); padding: 6px 0; font-weight: 600; }
.cal .day { padding: 8px 0; border-radius: 8px; color: #ccc; }
.cal .day.on { background: var(--lime); color: #111; font-weight: 800; }
.cal .day.busy { background: var(--lime-dim); color: var(--lime); }

.pitch {
  width: 100%;
  aspect-ratio: 1.55;
  background: linear-gradient(#1a3a12, #10240b);
  border-radius: 12px;
  border: 1px solid rgba(32,228,30,0.25);
  position: relative;
  overflow: hidden;
}
.pitch svg { width: 100%; height: 100%; }
.legend-row { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: #bbb; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }

.toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .left, .toolbar .right { display: flex; gap: 8px; align-items: center; }
.search { min-width: 240px; }
.select { min-width: 140px; }

.modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,0.62);
  display: grid; place-items: center; z-index: 50; padding: 20px;
}
.modal {
  width: 100%; max-width: 520px;
  background: var(--bg-card); border: 1px solid var(--border-strong);
  border-radius: 18px; padding: 22px;
}
.modal h2 { margin-bottom: 14px; font-size: 18px; }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  background: var(--bg-card); border: 1px solid rgba(32,228,30,0.3);
  color: var(--lime); padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600;
}
html.has-fas-dialog,
html.has-fas-dialog body {
  overflow: hidden;
}
.notice-back {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px))
           max(16px, env(safe-area-inset-right, 0px))
           max(16px, env(safe-area-inset-bottom, 0px))
           max(16px, env(safe-area-inset-left, 0px));
  background: rgba(0, 0, 0, 0.62);
}
.notice-back[hidden] { display: none !important; }
.notice-back:not([hidden]) { display: grid !important; }
.notice {
  width: min(400px, 100%);
  max-height: min(80dvh, 80vh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
}
.notice p {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.notice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.notice-actions .btn {
  min-width: 104px;
  min-height: 44px;
}
body.fas-backend .notice { border-radius: 12px; }
@media (max-width: 579px) {
  .notice { padding: 18px 16px; }
  .notice p { font-size: 14.5px; }
  .notice-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .notice-actions .btn {
    width: 100%;
    min-width: 0;
  }
}
@media (max-height: 500px) {
  .notice { padding: 16px; }
  .notice p { margin-bottom: 14px; }
}
/* FAS landing hero — Apogee motion, FAS tokens */
.fas-hero-anim { opacity: 0; will-change: transform, opacity; }
.animate-fade-up { animation: fas-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-down { animation: fas-fade-down 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-left { animation: fas-fade-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-right { animation: fas-fade-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-scale { animation: fas-fade-scale 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-bar-grow {
  animation: fas-bar-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes fas-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fas-fade-down {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fas-fade-left {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fas-fade-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fas-fade-scale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fas-bar-grow {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

.fas-hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #080A19;
  color: #fff;
}
.fas-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.fas-hero-video-desktop { display: none; }
.fas-hero-video-mobile { display: block; }
.fas-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 10, 25, 0.5) 0%, rgba(8, 10, 25, 0.12) 28%, rgba(8, 10, 25, 0.08) 58%, rgba(8, 10, 25, 0.42) 100%);
}
.fas-hero-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.fas-hero-nav {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 50;
}
.fas-hero-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fas-hero-logo-mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.fas-hero-wordmark {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.fas-hero-center-pill {
  height: 52px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 30px;
  background: rgba(10, 7, 7, 0.35);
  border-radius: 11px;
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
}
.fas-hero-pill-link {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.fas-hero-pill-link:hover { color: #fff; }
.fas-hero-auth-pill {
  height: 52px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 13px;
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  display: flex;
  align-items: center;
  gap: 5px;
}
.fas-hero-login {
  height: 46px;
  padding: 0 24px;
  border-radius: 11px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.fas-hero-login:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.7);
}
.fas-hero-demo {
  height: 46px;
  padding: 0 24px;
  background: var(--lime);
  border-radius: 11px;
  color: #0A0707;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s ease;
}
.fas-hero-demo:hover { background: #fff; }
.fas-hero-desktop { display: none; }
.fas-hero-mobile { display: block; }
.fas-hero-mobile-auth {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fas-hero-mobile-auth .fas-hero-login {
  height: 44px;
  padding: 0 14px;
  font-size: 13px;
  background: rgba(10, 7, 7, 0.42);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
}
.fas-hero-burger {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 11px;
  background: rgba(10, 7, 7, 0.35);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  color: #fff;
  cursor: pointer;
}
.fas-hero-burger:hover { background: rgba(255, 255, 255, 0.1); }
.fas-hero-burger-icons {
  position: relative;
  width: 20px;
  height: 20px;
}
.fas-hero-menu-icon,
.fas-hero-close-icon {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.fas-hero-menu-icon { opacity: 1; transform: rotate(0) scale(1); }
.fas-hero-close-icon { opacity: 0; transform: rotate(-90deg) scale(0.75); }
.fas-hero-burger.is-open .fas-hero-menu-icon { opacity: 0; transform: rotate(90deg) scale(0.75); }
.fas-hero-burger.is-open .fas-hero-close-icon { opacity: 1; transform: rotate(0) scale(1); }

.fas-hero-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  transition: visibility 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.fas-hero-overlay.is-open { visibility: visible; }
.fas-hero-overlay-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(8, 10, 25, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  transition: opacity 0.5s ease;
  cursor: pointer;
}
.fas-hero-overlay.is-open .fas-hero-overlay-backdrop { opacity: 1; }
.fas-hero-overlay-panel {
  position: absolute;
  top: 76px;
  left: 16px;
  right: 16px;
  background: rgba(17, 16, 15, 0.6);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 24px;
  transform-origin: top;
  opacity: 0;
  transform: translateY(-16px) scale(0.97);
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1), transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.fas-hero-overlay.is-open .fas-hero-overlay-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fas-hero-overlay-links { display: flex; flex-direction: column; gap: 4px; }
.fas-hero-overlay-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-12px);
  transition: background 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.fas-hero-overlay.is-open .fas-hero-overlay-link {
  opacity: 1;
  transform: translateX(0);
}
.fas-hero-overlay-link:hover { background: rgba(255, 255, 255, 0.06); }
.fas-hero-overlay-rule { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 20px 0; }
.fas-hero-overlay-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: 0ms;
}
.fas-hero-overlay.is-open .fas-hero-overlay-cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 350ms;
}
.fas-hero-overlay-demo,
.fas-hero-overlay-login {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fas-hero-overlay-demo { background: var(--lime); color: #0A0707; }
.fas-hero-overlay-demo:hover { background: #fff; }
.fas-hero-overlay-login { border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }
.fas-hero-overlay-login:hover { background: rgba(255, 255, 255, 0.05); }

.fas-hero-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 32px 0;
}
.fas-hero-row {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.fas-hero-copy { max-width: 593px; }
.fas-hero-title {
  color: #fff;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 20px;
  letter-spacing: -0.03em;
}
.fas-hero-kicker {
  color: var(--lime);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  max-width: 370px;
  margin: 0 0 12px;
}
.fas-hero-lead {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  max-width: 520px;
  margin: 0 0 28px;
}
.fas-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.fas-lang-btn {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font: 700 12px/1 var(--font, inherit);
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.fas-lang-btn.is-on {
  background: #41e36a;
  color: #07140c;
}
.auth-lang {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
}
.fas-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.fas-hero-btn-primary,
.fas-hero-btn-ghost {
  height: 46px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 15.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.fas-hero-btn-primary { background: var(--lime); color: #0A0707; }
.fas-hero-btn-primary:hover { opacity: 0.9; }
.fas-hero-btn-ghost { border: 1px solid #fff; color: #fff; }
.fas-hero-btn-ghost:hover { opacity: 0.8; }

.fas-hero-card-wrap {
  width: 100%;
  max-width: 405px;
  margin: 0 auto;
}
.fas-hero-card {
  width: 100%;
  border-radius: 24px;
  background: rgba(17, 16, 15, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 20px 20px 20px;
}
.fas-hero-card-label {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin: 0 0 12px;
}
.fas-hero-card-amount {
  margin: 0 0 8px;
  line-height: 1;
}
.fas-hero-card-amount span {
  color: #fff;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}
.fas-hero-card-amount .fas-hero-card-unit {
  color: rgba(255, 255, 255, 0.2);
}
.fas-hero-delta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
}
.fas-hero-badge {
  padding: 7px 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
}
.fas-hero-delta-cap {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  opacity: 0.7;
}
.fas-hero-chart { position: relative; }
.fas-hero-bars {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 80px;
}
.fas-hero-bar {
  flex: 1;
  border-radius: 0.5px;
  transform-origin: bottom;
}
.fas-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fas-hero-gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.fas-hero-axis-row {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.fas-hero-axis {
  font-size: 9px;
  font-weight: 500;
  line-height: 10px;
  color: rgba(255, 255, 255, 0.8);
}

.landing-block { padding: 80px 36px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.landing-block h2 { font-size: 32px; letter-spacing: -0.03em; margin-bottom: 10px; }
.landing-block .sub { color: var(--muted); margin-bottom: 32px; }
.standings-table { width: 100%; border-collapse: collapse; }
.standings-table th,
.standings-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.standings-table th { color: var(--muted); font-size: 12px; font-weight: 600; }
.player-stat-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }

@media (min-width: 640px) {
  .fas-hero-nav { padding: 30px 32px 0; }
  .fas-hero-row { padding: 0 32px; }
  .fas-hero-logo-mark { width: 32px; height: 32px; }
  .fas-hero-wordmark { font-size: 26px; }
  .fas-hero-title { font-size: 52px; margin-bottom: 32px; }
  .fas-hero-kicker,
  .fas-hero-lead { font-size: 18px; }
  .fas-hero-lead { margin-bottom: 40px; }
  .fas-hero-cta { gap: 16px; }
  .fas-hero-btn-primary,
  .fas-hero-btn-ghost { height: 51px; padding: 0 27px; font-size: 15.5px; }
  .fas-hero-card { border-radius: 33px; padding: 32px 32px 24px; }
  .fas-hero-card-label { font-size: 20px; margin-bottom: 16px; }
  .fas-hero-card-amount { margin-bottom: 12px; }
  .fas-hero-card-amount span { font-size: 46px; }
  .fas-hero-delta { margin-bottom: 32px; }
  .fas-hero-badge,
  .fas-hero-delta-cap { font-size: 14px; }
  .fas-hero-bars { height: 100px; }
  .fas-hero-axis { font-size: 10px; }
  .fas-hero-overlay-panel { top: 86px; left: 24px; right: 24px; padding: 32px; }
}
@media (min-width: 768px) {
  .fas-hero-nav { padding-left: 82px; padding-right: 82px; }
  .fas-hero-row { padding-left: 82px; padding-right: 82px; }
  .fas-hero-title { font-size: 64px; }
  .fas-hero-kicker,
  .fas-hero-lead { font-size: 20px; }
  .fas-hero-video-desktop { display: block; }
  .fas-hero-video-mobile { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .fas-hero-center-pill { gap: 16px; padding: 0 16px; }
  .fas-hero-pill-link { font-size: 13px; }
}
@media (min-width: 1024px) {
  .fas-hero-desktop { display: block; }
  .fas-hero-mobile { display: none; }
  .fas-hero-overlay { display: none; }
  .fas-hero-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }
  .fas-hero-card-wrap { margin: 0; }
  .fas-hero-title { font-size: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up,
  .animate-fade-down,
  .animate-fade-left,
  .animate-fade-right,
  .animate-fade-scale,
  .animate-bar-grow {
    animation-duration: 0.35s;
  }
}

.menu { display: none; }
.mobile-only { display: none; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .dash-preview { transform: none; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .auth-contact-mobile {
    display: inline-flex;
    align-items: baseline;
    justify-self: center;
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
  }
  .stats, .cards-3, .grid-2, .grid-3 { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 800px) {
  .coach-assign-add { grid-template-columns: 1fr; }
  .login-panel { padding: 20px 12px; }
  .login-card {
    padding: 24px 16px;
    border-radius: 16px;
  }
  .login-card,
  .register-card { max-width: 100%; }
  .register-fields, .role-grid { grid-template-columns: 1fr; }
  .register-fields .full,
  .register-guardian-box { grid-column: auto; }
  .member-measure-row { grid-template-columns: 1fr; }
  .member-foot-pills { grid-template-columns: 1fr; }
  .otp-boxes { gap: 6px; }
  .otp-digit { min-height: 46px; font-size: 20px; }
  .thai-calendar { left: 50%; transform: translateX(-50%); }
  .settings-head { align-items: flex-start; flex-direction: column; }
  .settings-grid, .settings-fields, .academy-coach-box, .coach-profile-row, .fas-form-box, .academy-guardian-card, .academy-branch-checkin-row { grid-template-columns: 1fr; }
  .academy-coach-form input:not([type="file"]):not([type="checkbox"]),
  .academy-coach-form textarea,
  .academy-coach-form select,
  .academy-coach-form .thai-calendar-trigger {
    font-size: 16px;
  }
  .coach-license-row .file-drop,
  .coach-license-row .file-drop-empty,
  .coach-experience-row .file-drop,
  .coach-experience-row .file-drop-empty {
    height: auto;
    min-height: 46px;
    white-space: normal;
  }
  .file-drop-remove {
    width: 44px;
    height: 44px;
  }
  .settings-section.settings-wide, .settings-fields .full { grid-column: auto; }
  .story-cover-box,
  .story-highlights,
  .story-quote-box,
  .story-full-box { grid-template-columns: 1fr; }
  .settings-actions { flex-direction: column; }
  .app,
  .app.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .sidebar.open {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    z-index: 40;
    padding: 16px 12px;
  }
  .sidebar.open .side-head {
    flex-direction: row;
    align-items: center;
    min-height: 80px;
  }
  .sidebar.open .side-toggle-row,
  .app.sidebar-collapsed .sidebar.open .side-toggle-row {
    position: static;
    justify-content: flex-end;
    padding: 4px 0 0;
  }
  .sidebar.open .guardian-side-pickers,
  .app.sidebar-collapsed .sidebar.open .guardian-side-pickers,
  .sidebar.open .guardian-player-kicker,
  .app.sidebar-collapsed .sidebar.open .guardian-player-kicker {
    display: grid;
  }
  .sidebar.open .side-head .brand {
    flex: 1 1 auto;
    min-width: 88px;
    justify-content: flex-start;
    padding: 0 2px;
  }
  .sidebar.open .sidebar-academy-lockup,
  .app.sidebar-collapsed .sidebar.open .sidebar-academy-lockup {
    align-items: center;
    max-width: 100%;
    gap: 0;
  }
  .sidebar.open .sidebar-academy-logo,
  .app.sidebar-collapsed .sidebar.open .sidebar-academy-logo {
    width: 44px;
    height: 44px;
    max-width: 44px;
    object-fit: cover;
    object-position: left center;
  }
  .sidebar.open .sidebar-academy-logo.sidebar-academy-logo-fas,
  .app.sidebar-collapsed .sidebar.open .sidebar-academy-logo.sidebar-academy-logo-fas {
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
  }
  .sidebar.open .sidebar-academy-name,
  .app.sidebar-collapsed .sidebar.open .sidebar-academy-name {
    display: block;
    white-space: nowrap;
    font-size: clamp(11px, 2.8vw, 14px);
  }
  .sidebar.open .sidebar-fas-credit,
  .app.sidebar-collapsed .sidebar.open .sidebar-fas-credit {
    display: block;
    font-size: clamp(10px, 2.2vw, 11px);
  }
  .sidebar.open .sidebar-academy-name.sidebar-login-name,
  .app.sidebar-collapsed .sidebar.open .sidebar-academy-name.sidebar-login-name {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }
  .sidebar.open .sidebar-login-meta,
  .app.sidebar-collapsed .sidebar.open .sidebar-login-meta {
    display: flex;
  }
  .sidebar.open .sidebar-login-role,
  .app.sidebar-collapsed .sidebar.open .sidebar-login-role,
  .sidebar.open .sidebar-login-via,
  .app.sidebar-collapsed .sidebar.open .sidebar-login-via {
    display: inline;
  }
  .sidebar.open .guardian-academy-kicker,
  .app.sidebar-collapsed .sidebar.open .guardian-academy-kicker,
  .sidebar.open .guardian-academy-trigger strong,
  .app.sidebar-collapsed .sidebar.open .guardian-academy-trigger strong,
  .sidebar.open .guardian-side-academy-only strong,
  .app.sidebar-collapsed .sidebar.open .guardian-side-academy-only strong {
    display: block;
  }
  .sidebar.open .guardian-academy-trigger,
  .app.sidebar-collapsed .sidebar.open .guardian-academy-trigger,
  .sidebar.open .guardian-side-academy-only,
  .app.sidebar-collapsed .sidebar.open .guardian-side-academy-only {
    width: 100%;
    height: auto;
    min-height: 40px;
    padding: 6px 10px;
    justify-content: flex-start;
    gap: 8px;
  }
  .sidebar.open .sidebar-login-role,
  .app.sidebar-collapsed .sidebar.open .sidebar-login-role {
    font-size: 11px;
  }
  .sidebar.open .powered-by,
  .sidebar.open .powered-by-fas__prefix,
  .app.sidebar-collapsed .sidebar.open .powered-by,
  .app.sidebar-collapsed .sidebar.open .powered-by-fas__prefix {
    display: inline;
  }
  .sidebar.open .brand .logo-full-dark.sidebar-logo {
    display: block;
    width: 88px;
    height: 80px;
    min-width: 88px;
  }
  .sidebar.open .brand .logo-full-light.sidebar-logo {
    display: none;
  }
  .sidebar.open .brand .logo-mark {
    display: none;
  }
  html[data-fas-theme="light"] body.fas-backend .sidebar.open .brand .logo-full-dark {
    display: none;
  }
  html[data-fas-theme="light"] body.fas-backend .sidebar.open .brand .logo-full-light.sidebar-logo {
    display: block;
    width: 88px;
    height: 80px;
    min-width: 88px;
  }
  .app.sidebar-collapsed .sidebar {
    width: var(--sidebar);
    padding: 16px 12px;
  }
  .app.sidebar-collapsed .brand-lockup { display: none; }
  .app.sidebar-collapsed .sidebar-logo { display: block; }
  .app.sidebar-collapsed .sidebar .brand .logo-mark { display: none; }
  .app.sidebar-collapsed .side-head { flex-direction: row; }
  .app.sidebar-collapsed .side-head .brand {
    flex: 1 1 auto;
    min-width: 88px;
    justify-content: flex-start;
  }
  .app.sidebar-collapsed .side-link { justify-content: flex-start; padding: 10px 12px; gap: 10px; }
  .app.sidebar-collapsed .side-link span,
  .app.sidebar-collapsed .side-user .meta { display: initial; }
  .app.sidebar-collapsed .side-user { justify-content: flex-start; padding: 12px 8px 4px; }
  .side-toggle { display: none; }
  .menu { display: grid; }
  .theme-switch-btn { padding: 6px 9px; font-size: 11px; }
  .stats, .cards-3, .grid-2, .grid-3, .bracket { grid-template-columns: 1fr; }
  .kicker { font-size: 56px; }
  .slogan { font-size: 28px; }
  .nav { padding: 14px 16px; }
  .hero, .section { padding-left: 16px; padding-right: 16px; }
  .content { padding: 16px; }
  .app-visual .content { padding: 0; }
  .app-stories .content {
    padding: 10px 10px max(16px, env(safe-area-inset-bottom, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
  .app-stories .topbar h1 span { display: none; }
  .app-stories .topbar h1 span.topbar-focus { display: inline; }
  .stories-card { padding: 14px 12px; }
  .stories-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .stories-toolbar .btn-lime { margin-left: 0; }
  .icon-action-add:has(.icon-action-label) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
  }
  .icon-action-add .icon-action-label {
    display: inline;
    font-size: 14px;
    font-weight: 700;
  }
  .eval-section-top,
  .eval-item-row,
  .eval-score-setup {
    grid-template-columns: 1fr;
  }
  .stories-toolbar .btn,
  .stories-toolbar input,
  .stories-toolbar select {
    min-height: 44px;
  }
  .stories-row-actions .btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  .stories-table-wrap { overflow: visible; }
  .stories-table {
    min-width: 0;
    table-layout: auto;
  }
  .stories-table thead { display: none; }
  .stories-table,
  .stories-table tbody,
  .stories-table tr,
  .stories-table td {
    display: block;
    width: 100%;
  }
  .stories-table .stories-check,
  .stories-table .stories-num,
  .stories-table .stories-thumb,
  .stories-table .stories-kicker,
  .stories-table .stories-headline,
  .stories-table .stories-updated,
  .stories-table .stories-status,
  .stories-table .stories-row-actions,
  .academy-members-table .member-col-name,
  .academy-members-table .member-col-nick,
  .academy-members-table .member-col-email,
  .academy-members-table .member-col-phone,
  .academy-coaches-table .member-col-name,
  .academy-coaches-table .member-col-email,
  .academy-coaches-table .member-col-phone,
  .academy-members-table .member-col-age,
  .academy-members-table .member-col-position,
  .academy-members-table .member-col-group,
  .academy-members-table .member-col-slip,
  .academy-members-table .member-col-fee,
  .eval-forms-table .eval-form-name,
  .eval-forms-table .eval-form-groups,
  .eval-forms-table .eval-form-metric,
  .academy-groups-table .academy-group-name,
  .academy-groups-table .academy-group-branch,
  .academy-groups-table .academy-group-forms,
  .academy-groups-table .academy-group-metric,
  .eval-links-table .eval-link-age,
  .eval-links-table .eval-link-form,
  .eval-links-table .eval-link-group,
  .eval-links-table .eval-link-share,
  .venue-bookings-page .venue-col-name,
  .venue-bookings-page .venue-col-note,
  .venue-bookings-page .venue-col-item,
  .venue-bookings-page .venue-col-who,
  .venue-bookings-page .venue-col-field,
  .venue-bookings-page .venue-col-open,
  .venue-bookings-page .venue-col-status,
  .venue-bookings-page .venue-col-when,
  .venue-bookings-page .venue-col-day,
  .venue-bookings-page .venue-col-time,
  .venue-bookings-page .stories-row-actions {
    width: auto;
    min-width: 0;
    text-align: inherit;
  }
  .academy-groups-table .academy-group-metric {
    max-width: none;
  }
  .eval-links-table td.eval-link-form {
    grid-template-columns: 72px minmax(0, 1fr);
    font-size: 12px;
    min-width: 0;
    overflow: visible;
  }
  .eval-link-form-trigger,
  .eval-link-form-text,
  .eval-link-form-option {
    font-size: 12px;
  }
  .eval-link-form-trigger {
    min-height: 36px;
    padding: 6px 28px 6px 8px;
  }
  .stories-table th,
  .stories-table td {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .eval-links-table td.eval-link-age,
  .eval-links-table td.eval-link-age .academy-group-condition,
  .venue-bookings-page .stories-table td,
  .venue-bookings-page .stories-table th {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .academy-groups-table,
  .academy-groups-table td.academy-group-metric,
  .academy-groups-table td.academy-group-metric .academy-group-condition,
  .academy-groups-table .academy-group-condition-detail {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .stories-table tr {
    margin: 0 0 12px;
    padding: 6px 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card-2);
  }
  .stories-table tr:last-child { margin-bottom: 0; }
  .stories-table tr:hover td { background: transparent; }
  .stories-table td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
  }
  .stories-table td:last-child { border-bottom: 0; }
  .stories-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }
  .stories-table td[colspan] {
    display: block;
    text-align: center;
    padding: 18px 8px;
  }
  .stories-table td[colspan]::before { content: none; }
  .stories-table td.stories-check,
  .stories-table td.stories-num {
    width: auto;
  }
  .stories-table td.stories-row-actions {
    display: flex;
    justify-content: stretch;
    gap: 6px;
  }
  .stories-table td.stories-row-actions .btn { flex: 1; margin-left: 0; }
  .stories-pager {
    flex-direction: column;
    align-items: stretch;
  }
  .stories-pager-nav { justify-content: center; }
  .stories-page-nav { flex: 1 1 auto; }
  .visual-extras-grid { grid-template-columns: 1fr 1fr; }
  .visual-split {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 40vh) 1fr;
  }
  .visual-settings { border-right: 0; border-bottom: 1px solid var(--border); }
  .mobile-only { display: block; }
}

/* FAS backend design system — visual only, existing IDs/menus unchanged */
body.fas-backend {
  letter-spacing: 0.01em;
}
body.fas-backend .circuit {
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, rgba(65, 227, 106, 0.025), transparent 72%),
    linear-gradient(rgba(65, 227, 106, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65, 227, 106, 0.03) 1px, transparent 1px),
    #070A08;
  background-size: auto, 48px 48px, 48px 48px, auto;
}
body.fas-backend .circuit::before,
body.fas-backend .circuit::after { opacity: 0; }
body.fas-backend .logo-full { filter: none; }
body.fas-backend .btn {
  border-radius: 8px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
body.fas-backend .btn-lime {
  background: var(--lime);
  color: #071109;
  box-shadow: none;
}
body.fas-backend .btn-lime:hover {
  background: var(--lime-2);
  transform: none;
}
body.fas-backend .btn-ghost { border-radius: 8px; }
body.fas-backend .app {
  background: #070A08;
}
body.fas-backend .sidebar {
  background:
    linear-gradient(rgba(65, 227, 106, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65, 227, 106, 0.04) 1px, transparent 1px),
    #090D0A;
  background-size: 36px 36px, 36px 36px, auto;
  border-right: 1px solid #222B25;
  box-shadow: inset 3px 0 0 #41E36A;
}
body.fas-backend .side-head {
  padding-top: 8px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #222B25;
}
body.fas-backend .side-nav { gap: 6px; margin-top: 16px; }
body.fas-backend .side-link {
  position: relative;
  border-radius: 8px;
  padding: 11px 12px 11px 14px;
  color: #8C9890;
  font-size: 13px;
}
body.fas-backend .side-link:hover {
  background: #172019;
  color: #F4F7F5;
}
body.fas-backend .side-link.active {
  background: #163D23;
  color: #F4F7F5;
  box-shadow: none;
}
body.fas-backend .side-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #41E36A;
}
body.fas-backend .side-primary-link {
  padding-bottom: 9px;
  margin-bottom: 3px;
  border-bottom: 1px solid #222B25;
}
body.fas-backend .side-group {
  display: grid;
  gap: 3px;
}
body.fas-backend .side-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 39px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8C9890;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .025em;
  text-align: left;
  cursor: pointer;
}
body.fas-backend .side-group-toggle:hover,
body.fas-backend .side-group.is-open > .side-group-toggle {
  background: #121914;
  color: #F4F7F5;
}
body.fas-backend .side-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
body.fas-backend .side-group-title svg,
body.fas-backend .side-group-chevron svg {
  display: block;
  flex: 0 0 auto;
}
body.fas-backend .side-group-chevron {
  color: #657169;
  transition: transform .2s ease;
}
body.fas-backend .side-group.is-open .side-group-chevron {
  color: #41E36A;
  transform: rotate(90deg);
}
body.fas-backend .side-group-items {
  display: grid;
  gap: 2px;
  padding: 2px 0 5px 10px;
  border-left: 1px solid #263229;
  margin-left: 17px;
}
body.fas-backend .side-group-items .side-link {
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 12px;
}
body.fas-backend .app.sidebar-collapsed .side-group-toggle {
  display: none;
}
body.fas-backend .app.sidebar-collapsed .side-group-items {
  display: grid !important;
  padding: 0;
  border-left: 0;
  margin-left: 0;
}
body.fas-backend .app.sidebar-collapsed .side-primary-link {
  padding-bottom: 5px;
}
body.fas-backend .side-user {
  border-top-color: #222B25;
  border-radius: 8px;
}
body.fas-backend .side-user:hover,
body.fas-backend .side-user:focus-visible {
  background: #111A14;
  outline: none;
}
body.fas-backend .avatar {
  background: #163D23;
  color: #41E36A;
  border-radius: 10px;
}
body.fas-backend .topbar {
  background: #090D0A;
  border-bottom: 1px solid #222B25;
  box-shadow: inset 0 -2px 0 #41E36A;
  padding: 14px 24px 16px;
}
body.fas-backend .topbar h1 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
body.fas-backend .icon-btn {
  border-radius: 8px;
  background: #121914;
  border-color: #222B25;
  color: var(--text);
}
body.fas-backend .icon-btn:hover {
  background: #172019;
  border-color: #2C362F;
}
body.fas-backend .content {
  background:
    linear-gradient(rgba(65, 227, 106, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65, 227, 106, 0.03) 1px, transparent 1px),
    #070A08;
  background-size: 56px 56px, 56px 56px, auto;
  padding: 28px 28px 48px;
}
body.fas-backend .card {
  background: #121914;
  border: 1px solid #222B25;
  border-radius: 8px;
  box-shadow: inset 3px 0 0 #41E36A;
  padding: 20px 22px 20px 24px;
}
body.fas-backend .card-title h3 {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.fas-backend .table th {
  color: #626D66;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom-color: #222B25;
}
body.fas-backend .table td { border-bottom-color: #222B25; }
body.fas-backend .table tr:hover td { background: #172019; }
body.fas-backend .badge-lime {
  background: rgba(65, 227, 106, 0.12);
  color: #41E36A;
}
body.fas-backend .theme-switch {
  background: #0D120F;
  border-color: #222B25;
}
body.fas-backend .theme-switch-btn.active {
  background: #163D23;
  color: #F4F7F5;
  box-shadow: inset 3px 0 0 #41E36A;
}
body.fas-backend .field input,
body.fas-backend .field select,
body.fas-backend .field textarea,
body.fas-backend .stories-toolbar input,
body.fas-backend .stories-toolbar select,
body.fas-backend .stories-fields input:not([type="file"]),
body.fas-backend .stories-fields textarea,
body.fas-backend .stories-fields select,
body.fas-backend .settings-fields select,
body.fas-backend .select,
body.fas-backend select:not([multiple]):not(.academy-coach-status):not(.member-fee-select) {
  background-color: #0D120F;
  border-color: #222B25;
  border-radius: 8px;
  color: #F4F7F5;
}
body.fas-backend input[type="time"],
body.fas-backend input[type="date"] {
  color-scheme: dark;
  padding-right: 10px;
}
body.fas-backend input[type="time"]::-webkit-calendar-picker-indicator,
body.fas-backend input[type="date"]::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  cursor: pointer;
  opacity: 1;
  filter: invert(91%) sepia(80%) saturate(950%) hue-rotate(65deg) brightness(118%) contrast(112%)
    drop-shadow(0 0 4px rgba(65, 227, 106, .9));
  transform: scale(1.18);
  transform-origin: center;
}
body.fas-backend select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C9890' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
body.fas-backend .academy-coach-status {
  min-height: 32px;
  border-radius: 999px;
  padding: 8px 32px 8px 10px;
  background-position: right 10px center;
  background-size: 14px;
}
body.fas-backend .thai-calendar select {
  background-color: #111d2f;
  border-color: #2b3a51;
  color: #fff;
  color-scheme: dark;
}
body.fas-backend select option {
  color: #F4F7F5;
  background: #121914;
}
body.fas-backend .fas-combo select option {
  color: #F4F7F5;
  -webkit-text-fill-color: #F4F7F5;
}
body.fas-backend .fas-combo-face {
  color: #F4F7F5;
}
body.fas-backend .fas-combo.is-placeholder .fas-combo-face {
  color: #9aa8a0;
}
body.fas-backend .field input:focus,
body.fas-backend .field select:focus,
body.fas-backend .field textarea:focus,
body.fas-backend .stories-fields input:not([type="file"]):focus,
body.fas-backend .stories-fields textarea:focus,
body.fas-backend .stories-fields select:focus {
  outline: none;
  border-color: #41E36A;
  box-shadow: 0 0 0 3px rgba(65, 227, 106, 0.16);
}
body.fas-backend .login-visual {
  border-right: 0;
  background: transparent;
}
body.fas-backend .login-panel {
  background: transparent;
}
body.fas-backend .login-card {
  background: #121914;
  border: 1px solid #222B25;
  border-radius: 8px;
  box-shadow: inset 4px 0 0 #41E36A;
  padding: 32px 32px 32px 36px;
}
body.fas-backend .story-quote-col--quote {
  background: #0D120F;
}
html[data-fas-theme="light"] body.fas-backend .circuit,
html[data-fas-theme="light"] body.fas-backend .content,
html[data-fas-theme="light"] body.fas-backend .login-visual,
html[data-fas-theme="light"] body.fas-backend .sidebar {
  background-image: none;
}
html[data-fas-theme="light"] body.fas-backend .app,
html[data-fas-theme="light"] body.fas-backend .content,
html[data-fas-theme="light"] body.fas-backend .login-panel {
  background: #e6ece8;
}
html[data-fas-theme="light"] body.fas-backend .sidebar {
  background: #ffffff;
  border-right: 1px solid #c5d0c8;
  box-shadow: inset 3px 0 0 #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .side-head {
  border-bottom-color: #e2eae4;
}
html[data-fas-theme="light"] body.fas-backend .side-user {
  border-top-color: #e2eae4;
}
html[data-fas-theme="light"] body.fas-backend .side-user:hover,
html[data-fas-theme="light"] body.fas-backend .side-user:focus-visible {
  background: #eef5f0;
  color: #141916;
}
html[data-fas-theme="light"] body.fas-backend .side-user:hover .meta span,
html[data-fas-theme="light"] body.fas-backend .side-user:focus-visible .meta span {
  color: #5c675f;
}
html[data-fas-theme="light"] body.fas-backend .side-link {
  color: #4a544d;
}
html[data-fas-theme="light"] body.fas-backend .side-link:hover {
  background: #eef5f0;
  color: #141916;
}
html[data-fas-theme="light"] body.fas-backend .side-link.active {
  background: #e3f6e9;
  color: #146332;
  font-weight: 700;
  box-shadow: none;
}
html[data-fas-theme="light"] body.fas-backend .side-link.active::before {
  background: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .side-primary-link {
  border-bottom-color: #e2eae4;
}
html[data-fas-theme="light"] body.fas-backend .side-group-toggle {
  color: #68736b;
}
html[data-fas-theme="light"] body.fas-backend .side-group-toggle:hover,
html[data-fas-theme="light"] body.fas-backend .side-group.is-open > .side-group-toggle {
  background: #eef5f0;
  color: #141916;
}
html[data-fas-theme="light"] body.fas-backend .side-group-items {
  border-left-color: #d6e2d9;
}
html[data-fas-theme="light"] body.fas-backend .side-group.is-open .side-group-chevron {
  color: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .topbar {
  background: #ffffff;
  border-bottom: 1px solid #e2eae4;
  box-shadow: inset 0 -2px 0 #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .fas-top-menu-link.is-on {
  background: var(--fas-menu-tone);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--fas-menu-tone) 82%, #fff);
}
html[data-fas-theme="light"] body.fas-backend .fas-top-menu {
  border-color: #cbd5e1;
  background: #f4f7fb;
}
html[data-fas-theme="light"] body.fas-backend .fas-top-menu-link {
  color: color-mix(in srgb, var(--fas-menu-tone) 76%, #172033);
  background: color-mix(in srgb, var(--fas-menu-tone) 11%, #fff);
}
html[data-fas-theme="light"] body.fas-backend .fas-top-menu-link:hover {
  color: color-mix(in srgb, var(--fas-menu-tone) 82%, #172033);
  border-color: var(--fas-menu-tone);
  background: color-mix(in srgb, var(--fas-menu-tone) 19%, #fff);
}
html[data-fas-theme="light"] body.fas-backend .fas-top-menu-link.is-on {
  color: #ffffff;
}
html[data-fas-theme="light"] body.fas-backend .fas-control-brand-mark {
  border-color: #cfe0d3;
  background: #f5faf6;
}
html[data-fas-theme="light"] body.fas-backend .fas-control-logo-dark {
  display: none;
}
html[data-fas-theme="light"] body.fas-backend .fas-control-logo-light {
  display: block !important;
}
html[data-fas-theme="light"] body.fas-backend .fas-control-brand-copy > span {
  color: #147b35;
}
html[data-fas-theme="light"] body.fas-backend .icon-btn {
  background: #ffffff;
  border-color: #c5d0c8;
  color: #2a332e;
}
html[data-fas-theme="light"] body.fas-backend .icon-btn:hover {
  background: #e8f3eb;
  border-color: #1b8a3e;
  color: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .theme-switch {
  background: #f0f4f1;
  border-color: #c5d0c8;
}
html[data-fas-theme="light"] body.fas-backend .theme-switch-btn {
  color: #5d675f;
}
html[data-fas-theme="light"] body.fas-backend .theme-switch-btn.active {
  background: #1b8a3e;
  color: #ffffff;
  box-shadow: none;
}
html[data-fas-theme="light"] body.fas-backend .avatar {
  background: #e3f6e9;
  color: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .card,
html[data-fas-theme="light"] body.fas-backend .login-card,
html[data-fas-theme="light"] body.fas-backend .settings-head {
  background: #ffffff;
  border: 1px solid #c5d0c8;
  box-shadow: inset 3px 0 0 #1b8a3e, 0 8px 24px rgba(20, 28, 22, 0.06);
}
html[data-fas-theme="light"] body.fas-backend .table th {
  color: #758078;
  border-bottom-color: #c5d0c8;
}
html[data-fas-theme="light"] body.fas-backend .table td {
  border-bottom-color: #e2eae4;
}
html[data-fas-theme="light"] body.fas-backend .table tr:hover td {
  background: #eef5f0;
}
html[data-fas-theme="light"] body.fas-backend .badge-lime {
  background: rgba(27, 138, 62, 0.12);
  color: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .field input,
html[data-fas-theme="light"] body.fas-backend .field select,
html[data-fas-theme="light"] body.fas-backend .field textarea,
html[data-fas-theme="light"] body.fas-backend .stories-fields input:not([type="file"]),
html[data-fas-theme="light"] body.fas-backend .stories-fields textarea,
html[data-fas-theme="light"] body.fas-backend .stories-fields select,
html[data-fas-theme="light"] body.fas-backend .settings-fields select,
html[data-fas-theme="light"] body.fas-backend .select,
html[data-fas-theme="light"] body.fas-backend select:not([multiple]):not(.academy-coach-status):not(.member-fee-select) {
  background-color: #ffffff;
  border-color: #c5d0c8;
  color: #141916;
}
html[data-fas-theme="light"] body.fas-backend .academy-coach-avatar {
  background: #fff;
  border-color: #cfcfcf;
}
html[data-fas-theme="light"] body.fas-backend .academy-coach-avatar.has-image {
  border-color: #111;
}
html[data-fas-theme="light"] body.fas-backend .academy-coach-avatar-copy,
html[data-fas-theme="light"] body.fas-backend .academy-coach-avatar-copy b {
  color: #888;
}
html[data-fas-theme="light"] body.fas-backend .academy-coach-avatar-edit {
  background: #1b8a3e;
  color: #fff;
  border-color: #fff;
}
html[data-fas-theme="light"] body.fas-backend .academy-coach-box,
html[data-fas-theme="light"] body.fas-backend .fas-form-box,
html[data-fas-theme="light"] body.fas-backend .academy-guardian-card,
html[data-fas-theme="light"] body.fas-backend .eval-score-section {
  background: #f3f7f4;
  border-color: #d5ddd7;
  box-shadow: inset 4px 0 0 #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .eval-score-section h4,
html[data-fas-theme="light"] body.fas-backend .eval-score-item {
  border-bottom-color: #d5ddd7;
}
html[data-fas-theme="light"] body.fas-backend .stories-fields label.eval-score-item:nth-of-type(even),
html[data-fas-theme="light"] body.fas-backend .eval-score-item:nth-of-type(even) {
  background: rgba(27, 138, 62, 0.06);
}
html[data-fas-theme="light"] body.fas-backend select:not([multiple]) {
  color-scheme: light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a544d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html[data-fas-theme="light"] body.fas-backend .fas-combo-face {
  color: #1a211c;
}
html[data-fas-theme="light"] body.fas-backend .fas-combo.is-placeholder .fas-combo-face {
  color: #66756c;
}
html[data-fas-theme="light"] body.fas-backend .thai-calendar select {
  background-color: #111d2f;
  border-color: #2b3a51;
  color: #fff;
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C9890' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html[data-fas-theme="light"] body.fas-backend .field input:focus,
html[data-fas-theme="light"] body.fas-backend .field select:focus,
html[data-fas-theme="light"] body.fas-backend .field textarea:focus {
  border-color: #1b8a3e;
  box-shadow: 0 0 0 3px rgba(27, 138, 62, 0.16);
}
body.fas-backend #academy-member-edit-form .field-error,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form .field-error {
  display: block;
  margin-top: 6px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
body.fas-backend #academy-member-edit-form label.is-invalid > input:not([type="file"]):not([type="hidden"]):not([type="checkbox"]),
body.fas-backend #academy-member-edit-form label.is-invalid > textarea,
body.fas-backend #academy-member-edit-form label.is-invalid > select,
body.fas-backend #academy-member-edit-form label.is-invalid > .fas-combo select,
body.fas-backend #academy-member-edit-form label.is-invalid > .password-field input,
body.fas-backend #academy-member-edit-form label.is-invalid .thai-calendar-trigger,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid > input:not([type="file"]):not([type="hidden"]):not([type="checkbox"]),
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid > textarea,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid > select,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid > .fas-combo select,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid > .password-field input,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid .thai-calendar-trigger {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(255, 70, 85, 0.22);
}
body.fas-backend #academy-member-edit-form label.is-invalid > input:not([type="file"]):not([type="hidden"]):not([type="checkbox"]):focus,
body.fas-backend #academy-member-edit-form label.is-invalid > textarea:focus,
body.fas-backend #academy-member-edit-form label.is-invalid > select:focus,
body.fas-backend #academy-member-edit-form label.is-invalid > .fas-combo select:focus,
body.fas-backend #academy-member-edit-form label.is-invalid > .password-field input:focus,
body.fas-backend #academy-member-edit-form label.is-invalid .thai-calendar-trigger:focus,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid > input:not([type="file"]):not([type="hidden"]):not([type="checkbox"]):focus,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid > textarea:focus,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid > select:focus,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid > .fas-combo select:focus,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid > .password-field input:focus,
html[data-fas-theme="light"] body.fas-backend #academy-member-edit-form label.is-invalid .thai-calendar-trigger:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(255, 70, 85, 0.22);
  outline: none;
}
html[data-fas-theme="light"] body.fas-backend .stories-fields input:not([type="file"]):focus,
html[data-fas-theme="light"] body.fas-backend .stories-fields textarea:focus,
html[data-fas-theme="light"] body.fas-backend .stories-fields select:focus {
  border-color: #1b8a3e;
  box-shadow: 0 0 0 3px rgba(27, 138, 62, 0.16);
}
html[data-fas-theme="light"] body.fas-backend .role-option {
  background: #ffffff;
  border-color: #c5d0c8;
}
html[data-fas-theme="light"] body.fas-backend .role-option:hover {
  border-color: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .role-option:has(input:checked),
html[data-fas-theme="light"] body.fas-backend .role-status.is-on {
  background: #e8f6ec;
  border-color: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .pdpa-consent {
  background: #fff;
  border-color: #cfcfcf;
  color: #141916;
}
html[data-fas-theme="light"] body.fas-backend .role-status.role-locked,
html[data-fas-theme="light"] body.fas-backend .role-status.role-locked:hover {
  border-color: #c5d0c8;
}
html[data-fas-theme="light"] body.fas-backend .publish-toggle {
  color: #141916;
}
html[data-fas-theme="light"] body.fas-backend .story-quote-col--quote {
  background: #f3f7f4;
  border-color: #c5d0c8;
  color: #3f4a43;
}
html[data-fas-theme="light"] body.fas-backend .story-quote-col--quote .story-field-hint {
  color: #758078;
}
html[data-fas-theme="light"] body.fas-backend .story-quote-col--quote textarea {
  background: #ffffff;
  color: #141916;
  border-color: #c5d0c8;
}
html[data-fas-theme="light"] body.fas-backend .login-visual {
  background: #ffffff;
  border-right: 1px solid #c5d0c8;
}
html[data-fas-theme="light"] body.fas-backend .guardian-academy-menu,
html[data-fas-theme="light"] body.fas-backend .guardian-child-menu {
  background: #ffffff;
  color: #141916;
}
html[data-fas-theme="light"] body.fas-backend .btn-ghost {
  background: #ffffff;
  border-color: #c5d0c8;
  color: #141916;
}
html[data-fas-theme="light"] body.fas-backend .btn-ghost:hover {
  background: #e8f3eb;
  border-color: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .academy-family-card .profile-edit-btn {
  border-color: #c88a1b;
  background: #fff8e8;
  color: #815300;
}
html[data-fas-theme="light"] body.fas-backend .academy-family-card .guardian-view-btn {
  border-color: #4b8fd8;
  background: #eef6ff;
  color: #195f9f;
}
html[data-fas-theme="light"] body.fas-backend .academy-family-card .guardian-view-btn.is-current {
  border-color: #1b8a3e;
  background: #eef9f1;
  color: #146d31;
}
html[data-fas-theme="light"] body.fas-backend .btn-lime,
html[data-fas-theme="light"] body.fas-backend .stories-toolbar .btn-lime {
  color: #ffffff;
}
html[data-fas-theme="light"] body.fas-backend .settings-feedback,
html[data-fas-theme="light"] body.fas-backend .stories-bulk,
html[data-fas-theme="light"] body.fas-backend .chip {
  background: #ffffff;
  border-color: #c5d0c8;
  color: #2a332e;
}
html[data-fas-theme="light"] body.fas-backend .settings-feedback.success {
  color: #146332;
  border-color: rgba(27, 138, 62, 0.32);
  background: #f3faf5;
}
html[data-fas-theme="light"] body.fas-backend .settings-feedback.error {
  color: #b4232c;
  border-color: rgba(180, 35, 44, 0.28);
  background: #fff5f5;
}
html[data-fas-theme="light"] body.fas-backend .story-field-hint.error {
  color: #b4232c;
}
html[data-fas-theme="light"] body.fas-backend .story-field-hint.success {
  color: #146332;
}
html[data-fas-theme="light"] body.fas-backend .stories-search,
html[data-fas-theme="light"] body.fas-backend .stories-filter,
html[data-fas-theme="light"] body.fas-backend .stories-per-page {
  color: #2a332e;
}
html[data-fas-theme="light"] body.fas-backend .coach-invite-kicker {
  color: #146332;
}
html[data-fas-theme="light"] body.fas-backend .coach-invite-panel h3,
html[data-fas-theme="light"] body.fas-backend .coach-invite-panel p,
html[data-fas-theme="light"] body.fas-backend .card-title h3 {
  color: #141916;
}
html[data-fas-theme="light"] body.fas-backend .academy-member-tabs {
  background: #ffffff;
  border-color: #c5d0c8;
}
html[data-fas-theme="light"] body.fas-backend .academy-member-tab[data-member-tab="admitted"] {
  background: rgba(27, 138, 62, 0.1);
  color: #157534;
}
html[data-fas-theme="light"] body.fas-backend .academy-member-tab[data-member-tab="admitted"].is-active {
  background: var(--lime);
  color: #fff;
}
html[data-fas-theme="light"] body.fas-backend .academy-member-tab[data-member-tab="available"] {
  background: #e8ebe9;
  color: #5d675f;
}
html[data-fas-theme="light"] body.fas-backend .academy-member-tab[data-member-tab="available"].is-active {
  background: #6b746e;
  color: #fff;
}
html[data-fas-theme="light"] body.fas-backend .academy-member-tab[data-member-tab="alumni"] {
  background: rgba(255, 70, 85, 0.1);
  color: #c12b38;
}
html[data-fas-theme="light"] body.fas-backend .academy-member-tab[data-member-tab="alumni"].is-active {
  background: var(--danger);
  color: #fff;
}
html[data-fas-theme="light"] body.fas-backend .member-fee-select {
  color-scheme: light;
}
html[data-fas-theme="light"] body.fas-backend input[type="time"],
html[data-fas-theme="light"] body.fas-backend input[type="date"] {
  color-scheme: light;
}
html[data-fas-theme="light"] body.fas-backend input[type="time"]::-webkit-calendar-picker-indicator,
html[data-fas-theme="light"] body.fas-backend input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(31%) sepia(95%) saturate(780%) hue-rotate(101deg) brightness(82%) contrast(105%);
  opacity: 1;
}
html[data-fas-theme="light"] body.fas-backend .member-fee-picker[data-fee-current="paid"] .member-fee-select {
  background-color: rgba(27, 138, 62, 0.12);
  border-color: #1b8a3e;
  color: #157534;
}
html[data-fas-theme="light"] body.fas-backend .member-fee-picker[data-fee-current="submitted"] .member-fee-select,
html[data-fas-theme="light"] body.fas-backend .member-fee-picker[data-fee-current="unpaid"] .member-fee-select {
  background-color: rgba(196, 138, 0, 0.12);
  border-color: #c48a00;
  color: #8a6200;
}
html[data-fas-theme="light"] body.fas-backend .member-fee-picker[data-fee-returned="1"] .member-fee-select {
  background-color: rgba(255, 70, 85, 0.12);
  border-color: #ff4655;
  color: #c12b38;
}
html[data-fas-theme="light"] body.fas-backend .academy-fee-status.is-paid {
  color: #157534;
  background: rgba(27, 138, 62, 0.12);
}
html[data-fas-theme="light"] body.fas-backend .academy-fee-status.is-wait {
  color: #8a6200;
  background: rgba(245, 176, 32, 0.18);
}
html[data-fas-theme="light"] body.fas-backend .academy-fee-status.is-back {
  color: #c12b38;
  background: rgba(255, 70, 85, 0.12);
}
html[data-fas-theme="light"] body.fas-backend .academy-fee-status.is-due {
  color: #5b675f;
  background: rgba(20, 25, 22, 0.06);
}
html[data-fas-theme="light"] body.fas-backend .academy-fee-month-copy .academy-fee-admin-note {
  color: #5b675f;
}
html[data-fas-theme="light"] body.fas-backend .member-fee-paid-stamp {
  background-color: rgba(27, 138, 62, 0.12);
  border-color: #1b8a3e;
  color: #157534;
}
html[data-fas-theme="light"] body.fas-backend .coach-invite-copy input {
  background: #ffffff;
  border-color: #c5d0c8;
  color: #141916;
}
html[data-fas-theme="light"] body.fas-backend .theme-card small {
  color: #758078;
}
html[data-fas-theme="light"] body.fas-backend .icon-action-wait {
  color: #6d766f;
  border-color: rgba(109, 118, 111, 0.35);
  background: rgba(109, 118, 111, 0.1);
}
html[data-fas-theme="light"] body.fas-backend .icon-action-wait:hover {
  color: #4a544d;
  border-color: rgba(109, 118, 111, 0.55);
  background: rgba(109, 118, 111, 0.18);
}
html[data-fas-theme="light"] body.fas-backend .icon-action-edit {
  color: #c48a00;
  border-color: rgba(196, 138, 0, 0.35);
  background: rgba(245, 196, 81, 0.16);
}
html[data-fas-theme="light"] body.fas-backend .icon-action-edit:hover {
  color: #9a6c00;
  border-color: rgba(196, 138, 0, 0.55);
  background: rgba(245, 196, 81, 0.28);
}
html[data-fas-theme="light"] body.fas-backend .icon-action-delete,
html[data-fas-theme="light"] body.fas-backend .stories-delete-btn {
  color: #d12b3c;
  border-color: rgba(209, 43, 60, 0.32);
  background: rgba(255, 92, 108, 0.1);
}
html[data-fas-theme="light"] body.fas-backend .venue-calendar-block-actions .icon-action-edit,
html[data-fas-theme="light"] body.fas-backend .venue-calendar-block-actions .icon-action-delete {
  border-color: transparent;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
html[data-fas-theme="light"] body.fas-backend .venue-calendar-block-actions .icon-action-edit {
  color: #8a5600;
}
html[data-fas-theme="light"] body.fas-backend .venue-calendar-block-actions .icon-action-delete {
  color: #c41128;
}
html[data-fas-theme="light"] body.fas-backend .venue-calendar-block-actions .icon-action-edit:hover {
  color: #6d4300;
  background: #ffe8a3;
}
html[data-fas-theme="light"] body.fas-backend .venue-calendar-block-actions .icon-action-delete:hover {
  color: #9d0d20;
  background: #ffd6db;
}
html[data-fas-theme="light"] body.fas-backend .member-admitted-stamp {
  color: #1a8a3a;
}
html[data-fas-theme="light"] body.fas-backend .member-slip-thumb,
html[data-fas-theme="light"] body.fas-backend .member-slip-file,
html[data-fas-theme="light"] body.fas-backend .academy-fee-slip-preview {
  background: #ffffff;
  border-color: #c5d0c8;
}
html[data-fas-theme="light"] body.fas-backend .member-fee-slip-btn {
  background: #ffffff;
  border-color: #c5d0c8;
  color: #5b675f;
}
html[data-fas-theme="light"] body.fas-backend .member-fee-slip-btn:hover,
html[data-fas-theme="light"] body.fas-backend .member-fee-slip-btn:focus-visible {
  color: #157534;
  border-color: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .academy-fee-slip-preview img {
  background: #f3f6f3;
}
html[data-fas-theme="light"] body.fas-backend .stories-toolbar input,
html[data-fas-theme="light"] body.fas-backend .stories-toolbar select,
html[data-fas-theme="light"] body.fas-backend .field select,
html[data-fas-theme="light"] body.fas-backend .stories-fields select,
html[data-fas-theme="light"] body.fas-backend .eval-link-form-trigger,
html[data-fas-theme="light"] body.fas-backend .eval-link-form-menu,
html[data-fas-theme="light"] body.fas-backend .eval-score-combo,
html[data-fas-theme="light"] body.fas-backend .eval-score-combo-menu {
  background-color: #ffffff;
  border-color: #c5d0c8;
  color: #141916;
  color-scheme: light;
}
html[data-fas-theme="light"] body.fas-backend .eval-link-form-text,
html[data-fas-theme="light"] body.fas-backend .eval-link-form-option,
html[data-fas-theme="light"] body.fas-backend .eval-score-combo-option,
html[data-fas-theme="light"] body.fas-backend .eval-score-combo input[type="search"] {
  color: #141916;
}
html[data-fas-theme="light"] body.fas-backend .eval-link-form-option.is-current {
  color: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend .eval-link-form-option:hover,
html[data-fas-theme="light"] body.fas-backend .eval-link-form-option:focus,
html[data-fas-theme="light"] body.fas-backend .eval-score-combo-option:hover,
html[data-fas-theme="light"] body.fas-backend .eval-score-combo-option:focus {
  background: rgba(27, 138, 62, 0.1);
}
html[data-fas-theme="light"] body.fas-backend .eval-link-form-control::after {
  border-top-color: #4a544d;
}
html[data-fas-theme="light"] body.fas-backend select option {
  color: #141916;
  background: #ffffff;
}
html[data-fas-theme="light"] body.fas-backend .eval-section-card {
  background: #f3f7f4;
  border-color: #c5d0c8;
  box-shadow: inset 3px 0 0 #1b8a3e;
}

/* Backend phone + tablet: drawer nav, scrollable forms, file pick, save */
body.fas-backend .sidebar-backdrop {
  display: none;
}
@media (max-width: 1100px) {
  html:has(body.fas-backend),
  body.fas-backend {
    min-height: 100dvh;
  }
  body.fas-backend {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body.fas-backend.fas-nav-open {
    overflow: hidden;
    /* Scroll lock while the drawer is open (Android ignores overflow alone); JS restores the scroll on close. */
    position: fixed;
    top: var(--fas-nav-lock-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
  }
  body.fas-backend button,
  body.fas-backend .btn,
  body.fas-backend .icon-btn,
  body.fas-backend .side-link,
  body.fas-backend .file-drop,
  body.fas-backend .theme-card,
  body.fas-backend .role-option {
    touch-action: manipulation;
  }
  body.fas-backend input,
  body.fas-backend select,
  body.fas-backend textarea {
    font-size: 16px;
    max-width: 100%;
  }
  body.fas-backend .app,
  body.fas-backend .app.sidebar-collapsed {
    grid-template-columns: 1fr;
    min-height: 100dvh;
  }
  body.fas-backend .sidebar {
    display: none;
  }
  body.fas-backend .sidebar.open {
    display: flex;
    position: fixed;
    /* Pin to both viewport edges: 100svh was the small (URL bar shown) height, so after scrolling hid
       the Android URL bar the drawer stopped short of the bottom. */
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;
    max-height: none;
    width: min(var(--sidebar), calc(100vw - 56px));
    z-index: 40;
    padding: max(16px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
  }
  body.fas-backend .sidebar.open .side-foot {
    flex: 0 0 auto;
    margin-top: auto;
    background: var(--sidebar-bg, #090d0a);
  }
  body.fas-backend .sidebar.open .side-user .avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }
  body.fas-backend .sidebar.open .side-head,
  body.fas-backend .app.sidebar-collapsed .sidebar.open .side-head {
    flex-direction: row;
    align-items: center;
    min-height: 80px;
  }
  body.fas-backend .sidebar.open .brand-lockup,
  body.fas-backend .app.sidebar-collapsed .sidebar.open .brand-lockup { display: none; }
  body.fas-backend .sidebar.open .logo-full-dark,
  body.fas-backend .app.sidebar-collapsed .sidebar.open .logo-full-dark { display: block; }
  body.fas-backend .sidebar.open .logo-full-light,
  body.fas-backend .app.sidebar-collapsed .sidebar.open .logo-full-light { display: none; }
  html[data-fas-theme="light"] body.fas-backend .sidebar.open .logo-full-dark,
  html[data-fas-theme="light"] body.fas-backend .app.sidebar-collapsed .sidebar.open .logo-full-dark { display: none; }
  html[data-fas-theme="light"] body.fas-backend .sidebar.open .logo-full-light,
  html[data-fas-theme="light"] body.fas-backend .app.sidebar-collapsed .sidebar.open .logo-full-light { display: block; }
  body.fas-backend .sidebar.open .brand .logo-mark,
  body.fas-backend .app.sidebar-collapsed .sidebar.open .brand .logo-mark { display: none; }
  body.fas-backend .sidebar.open .side-link,
  body.fas-backend .app.sidebar-collapsed .sidebar.open .side-link {
    justify-content: flex-start;
    min-height: 44px;
    padding: 10px 12px;
    gap: 10px;
  }
  body.fas-backend .sidebar.open .side-link span,
  body.fas-backend .sidebar.open .side-user .meta,
  body.fas-backend .app.sidebar-collapsed .sidebar.open .side-link span,
  body.fas-backend .app.sidebar-collapsed .sidebar.open .side-user .meta {
    display: initial;
  }
  body.fas-backend .sidebar.open .profile-reminder,
  body.fas-backend .app.sidebar-collapsed .sidebar.open .profile-reminder {
    display: flex;
  }
  body.fas-backend .sidebar.open .side-group-toggle,
  body.fas-backend .app.sidebar-collapsed .sidebar.open .side-group-toggle {
    display: flex;
  }
  body.fas-backend .sidebar.open .side-group-items[hidden],
  body.fas-backend .app.sidebar-collapsed .sidebar.open .side-group-items[hidden] {
    display: none !important;
  }
  body.fas-backend .sidebar.open .side-group-items,
  body.fas-backend .app.sidebar-collapsed .sidebar.open .side-group-items {
    padding-left: 10px;
    border-left: 1px solid #263229;
    margin-left: 17px;
  }
  body.fas-backend .side-toggle { display: none; }
  body.fas-backend .menu { display: grid; }
  body.fas-backend .icon-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    background: #1a2420;
    border-color: #8C9890;
    color: #F4F7F5;
  }
  body.fas-backend .icon-btn svg,
  body.fas-backend .icon-btn svg * {
    width: 22px;
    height: 22px;
    color: #F4F7F5;
    stroke: #F4F7F5 !important;
    fill: none !important;
    stroke-width: 2.2;
  }
  html[data-fas-theme="light"] body.fas-backend .icon-btn {
    background: #e8f3eb;
    border-color: #2a332e;
    color: #141916;
  }
  html[data-fas-theme="light"] body.fas-backend .icon-btn svg,
  html[data-fas-theme="light"] body.fas-backend .icon-btn svg * {
    color: #141916;
    stroke: #141916 !important;
  }
  body.fas-backend .side-link {
    color: var(--text);
  }
  body.fas-backend .side-link svg,
  body.fas-backend .side-link svg * {
    width: 20px;
    height: 20px;
    min-width: 20px;
    color: inherit;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2;
  }
  body.fas-backend .sidebar-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(7, 10, 8, 0.55);
  }
  body.fas-backend .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }
  body.fas-backend .topbar h1 {
    font-size: 16px;
  }
  body.fas-backend .topbar h1 span { display: none; }
  body.fas-backend .topbar h1 span.topbar-focus { display: inline; }
  body.fas-backend .content {
    padding: 12px 12px max(24px, env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  body.fas-backend .settings-fields,
  body.fas-backend .academy-coach-box,
  body.fas-backend .coach-profile-row,
  body.fas-backend .fas-form-box,
  body.fas-backend .academy-guardian-card,
  body.fas-backend .role-grid,
  body.fas-backend .eval-score-setup,
  body.fas-backend .eval-section-top,
  body.fas-backend .eval-item-row,
  body.fas-backend .eval-report-grid,
  body.fas-backend .eval-report-pie-wrap,
  body.fas-backend .coach-assign-add,
  body.fas-backend .story-cover-box,
  body.fas-backend .story-highlights,
  body.fas-backend .story-quote-box,
  body.fas-backend .story-full-box {
    grid-template-columns: 1fr;
  }
  body.fas-backend .file-drop {
    min-height: 48px;
    font-size: 13px;
  }
  body.fas-backend .file-drop-empty {
    padding: 14px 10px;
  }
  body.fas-backend .stories-actions,
  body.fas-backend .settings-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-self: end;
    justify-content: stretch;
    gap: 8px;
    margin: 8px 0 0;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom, 0px));
    min-height: 0;
    background: var(--bg-card);
  }
  body.fas-backend .stories-actions .btn,
  body.fas-backend .settings-actions .btn {
    flex: 1 1 0;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
  }
  body.fas-backend .app-visual,
  body.fas-backend .app-visual .main,
  body.fas-backend .app-visual .content,
  body.fas-backend .visual-editor {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  body.fas-backend .app-visual .main {
    min-height: 100dvh;
  }
  body.fas-backend .app-visual .content { padding: 0; }
  body.fas-backend .visual-editor {
    display: block;
  }
  body.fas-backend .visual-editor-bar {
    position: sticky;
    top: 0;
    z-index: 8;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px));
  }
  body.fas-backend .visual-editor-copy span { display: none; }
  body.fas-backend .visual-editor-bar .btn,
  body.fas-backend .visual-editor-bar .publish-toggle {
    min-height: 44px;
    justify-content: center;
  }
  body.fas-backend .visual-split {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  body.fas-backend .visual-settings {
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  body.fas-backend .visual-editor-wrap {
    position: relative;
    height: min(62vh, 560px);
    min-height: 280px;
    flex: none;
  }
  body.fas-backend .visual-color-row {
    flex-direction: column;
    align-items: stretch;
  }
  body.fas-backend .login-card {
    margin: max(16px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px));
    padding: 24px 18px;
  }
  body.fas-backend .stories-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }
  body.fas-backend .stories-toolbar .btn-lime { margin-left: 0; }
  body.fas-backend .icon-action-add:has(.icon-action-label) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
  }
  body.fas-backend .icon-action-add .icon-action-label {
    display: inline;
    font-size: 14px;
    font-weight: 700;
  }
  body.fas-backend .stories-toolbar .btn,
  body.fas-backend .stories-toolbar input,
  body.fas-backend .stories-toolbar select,
  body.fas-backend .stories-row-actions .btn,
  body.fas-backend .coach-assign-add select,
  body.fas-backend .coach-assign-add .btn,
  body.fas-backend .eval-score-item-top input[type="number"] {
    min-height: 44px;
    font-size: 16px;
  }
  body.fas-backend .eval-score-item-top input[type="number"] {
    flex: 0 0 96px;
    width: 96px;
    max-width: 96px;
  }
  body.fas-backend .eval-stopwatch {
    width: 100%;
    flex-wrap: wrap;
  }
  body.fas-backend .eval-stopwatch .btn {
    min-height: 44px;
  }
  body.fas-backend .stories-table-wrap { overflow: visible; }
  body.fas-backend .stories-table thead { display: none; }
  body.fas-backend .stories-table,
  body.fas-backend .stories-table tbody,
  body.fas-backend .stories-table tr,
  body.fas-backend .stories-table td {
    display: block;
    width: 100%;
  }
  body.fas-backend .stories-table tr {
    margin: 0 0 12px;
    padding: 6px 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card-2);
  }
  body.fas-backend .stories-table td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    white-space: normal;
  }
  body.fas-backend .eval-links-table td.eval-link-age,
  body.fas-backend .eval-links-table td.eval-link-age .academy-group-condition,
  body.fas-backend .venue-bookings-page .stories-table td,
  body.fas-backend .venue-bookings-page .stories-table th {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  body.fas-backend .academy-groups-table {
    width: 100%;
    min-width: 0;
  }
  body.fas-backend .academy-groups-table td.academy-group-metric,
  body.fas-backend .academy-groups-table td.academy-group-metric .academy-group-condition,
  body.fas-backend .academy-groups-table .academy-group-condition-detail {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  body.fas-backend .eval-forms-table .eval-form-name,
  body.fas-backend .eval-forms-table .eval-form-groups,
  body.fas-backend .eval-forms-table .eval-form-metric,
  body.fas-backend .academy-groups-table .academy-group-name,
  body.fas-backend .academy-groups-table .academy-group-branch,
  body.fas-backend .academy-groups-table .academy-group-forms,
  body.fas-backend .academy-groups-table .academy-group-metric,
  body.fas-backend .eval-links-table .eval-link-age,
  body.fas-backend .eval-links-table .eval-link-form,
  body.fas-backend .eval-links-table .eval-link-group,
  body.fas-backend .eval-links-table .eval-link-share,
  body.fas-backend .venue-bookings-page .venue-col-name,
  body.fas-backend .venue-bookings-page .venue-col-note,
  body.fas-backend .venue-bookings-page .venue-col-item,
  body.fas-backend .venue-bookings-page .venue-col-who,
  body.fas-backend .venue-bookings-page .venue-col-field,
  body.fas-backend .venue-bookings-page .venue-col-open,
  body.fas-backend .venue-bookings-page .venue-col-status,
  body.fas-backend .venue-bookings-page .venue-col-when,
  body.fas-backend .venue-bookings-page .venue-col-day,
  body.fas-backend .venue-bookings-page .venue-col-time,
  body.fas-backend .venue-bookings-page .stories-row-actions {
    width: auto;
    min-width: 0;
    text-align: inherit;
  }
  body.fas-backend .academy-groups-table .academy-group-metric {
    max-width: none;
  }
  body.fas-backend .eval-links-table td.eval-link-form {
    grid-template-columns: 72px minmax(0, 1fr);
    font-size: 12px;
    min-width: 0;
    overflow: visible;
  }
  body.fas-backend .eval-link-form-trigger,
  body.fas-backend .eval-link-form-text,
  body.fas-backend .eval-link-form-option {
    font-size: 12px;
  }
  body.fas-backend .eval-link-form-trigger {
    min-height: 36px;
    padding: 8px 28px 8px 8px;
    background: var(--input-bg);
    color: var(--text);
  }
  body.fas-backend .eval-link-form-text,
  body.fas-backend .eval-link-form-option {
    color: var(--text);
  }
  body.fas-backend .eval-link-form-menu {
    background: var(--input-bg);
    color: var(--text);
  }
  body.fas-backend .stories-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }
  body.fas-backend .stories-table td[colspan] {
    display: block;
    text-align: center;
  }
  body.fas-backend .stories-table td[colspan]::before { content: none; }
  body.fas-backend .stories-table td.stories-row-actions {
    display: flex;
    justify-content: stretch;
    gap: 6px;
  }
  body.fas-backend .stories-table td.stories-row-actions .btn {
    flex: 1;
    margin-left: 0;
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  body.fas-backend .settings-fields,
  body.fas-backend .visual-extras-grid {
    grid-template-columns: 1fr 1fr;
  }
  body.fas-backend .academy-coach-form.settings-fields,
  body.fas-backend .fas-form-stack.settings-fields {
    grid-template-columns: 1fr;
  }
  body.fas-backend .settings-fields .full,
  body.fas-backend .visual-extras-grid .full {
    grid-column: 1 / -1;
  }
  body.fas-backend .sidebar.open {
    width: 280px;
  }
}
@media (min-width: 601px) and (max-width: 1100px) {
  body.fas-backend .stories-toolbar.eval-report-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  body.fas-backend .stories-toolbar.eval-report-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .venue-calendar-card .card-title {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .venue-calendar-add-actions {
    width: 100%;
    margin-left: 0;
  }
  .venue-calendar-add-actions .btn {
    flex: 1 1 0;
    justify-content: center;
  }
  .venue-calendar-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .venue-calendar-toolbar label {
    align-items: stretch;
    flex-direction: column;
  }
  .venue-calendar-toolbar select {
    width: 100%;
    min-width: 0;
  }
  .venue-calendar-week-controls {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }
  .venue-calendar-week-controls strong {
    min-width: 0;
  }
  .venue-calendar-week-controls #venue-calendar-today {
    grid-column: 1 / -1;
  }
  .venue-calendar-day-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 8px;
  }
  .venue-calendar-day-tabs button {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 0;
    padding: 7px 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card-2);
    color: var(--muted);
  }
  .venue-calendar-day-tabs button.active {
    border-color: var(--lime);
    background: var(--lime-dim);
    color: var(--lime);
  }
  .venue-calendar-day-tabs strong,
  .venue-calendar-day-tabs span {
    font-size: 10px;
  }
  .venue-admin-schedule-scroll {
    overflow-x: hidden;
  }
  .venue-admin-schedule {
    grid-template-columns: 54px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }
  .venue-calendar-day {
    display: none;
  }
  .venue-calendar-day.mobile-selected {
    display: block;
  }
  .venue-calendar-head {
    height: 58px;
  }
  .venue-calendar-block-copy strong {
    font-size: 12px;
  }
  .venue-calendar-block-copy span {
    font-size: 10px;
  }
  .venue-booking-form .venue-form-span-3,
  .venue-booking-form .venue-form-span-4,
  .venue-booking-form .venue-form-span-6,
  .venue-booking-form .venue-form-span-12,
  .venue-template-form .venue-form-span-3,
  .venue-template-form .venue-form-span-4,
  .venue-template-form .venue-form-span-6,
  .venue-template-form .venue-form-span-12 {
    grid-column: auto;
  }
}

@media (min-width: 801px) {
  body.fas-backend .venue-booking-form.settings-fields,
  body.fas-backend .venue-template-form.settings-fields {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
  }
  .venue-form-span-3 { grid-column: span 3; }
  .venue-form-span-4 { grid-column: span 4; }
  .venue-form-span-6 { grid-column: span 6; }
  .venue-form-span-12 { grid-column: 1 / -1; }
}

/* Role-aware organization dashboard */
.fas-dashboard {
  --dashboard-accent: var(--lime);
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}
.dashboard-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 170px;
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--lime) 28%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 15%, color-mix(in srgb, #20c997 28%, transparent) 0, transparent 32%),
    radial-gradient(circle at 62% 120%, color-mix(in srgb, #4b92f1 16%, transparent) 0, transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 88%, var(--lime)) 0%, var(--bg-card) 68%);
}
.dashboard-hero::after {
  position: absolute;
  right: -58px;
  bottom: -118px;
  width: 280px;
  height: 280px;
  border: 1px solid color-mix(in srgb, var(--lime) 24%, transparent);
  border-radius: 50%;
  content: "";
}
.dashboard-hero > * {
  position: relative;
  z-index: 1;
}
.dashboard-eyebrow,
.dashboard-card-head span {
  color: var(--lime);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dashboard-hero h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .22em;
  margin: 7px 0 5px;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.15;
}
.dashboard-fas-name {
  color: var(--lime);
  font-weight: 900;
}
.dashboard-academy-name {
  color: var(--text);
}
.dashboard-name-join {
  display: inline-grid;
  width: 1.15em;
  height: 1.15em;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--lime) 45%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--lime) 10%, var(--bg-card));
  color: var(--lime);
  font-size: .58em;
  font-style: normal;
  font-weight: 700;
}
.dashboard-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.dashboard-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.dashboard-data-loader {
  grid-column: 1 / -1;
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text);
}
.dashboard-data-loader > div:last-child {
  display: grid;
  gap: 4px;
}
.dashboard-data-loader > div:last-child b { font-size: 15px; }
.dashboard-data-loader > div:last-child span {
  color: var(--muted);
  font-size: 11px;
}
.dashboard-data-loader-visual {
  position: relative;
  flex: 0 0 75px;
  width: 75px;
  height: 100px;
}
.dashboard-data-loader-bar {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 50%;
  border-radius: 3px 3px 1px 1px;
  background: var(--text);
  transform-origin: center bottom;
  box-shadow: 1px 1px 0 color-mix(in srgb, var(--text) 18%, transparent);
}
.dashboard-data-loader-bar:nth-child(1) {
  left: 0;
  transform: scale(1, .2);
  animation: fasDashboardBar1 4s infinite;
}
.dashboard-data-loader-bar:nth-child(2) {
  left: 15px;
  transform: scale(1, .4);
  animation: fasDashboardBar2 4s infinite;
}
.dashboard-data-loader-bar:nth-child(3) {
  left: 30px;
  transform: scale(1, .6);
}
.dashboard-data-loader-bar:nth-child(4) {
  left: 45px;
  transform: scale(1, .8);
  animation: fasDashboardBar4 4s infinite;
}
.dashboard-data-loader-bar:nth-child(5) {
  left: 60px;
  transform: scale(1, 1);
  animation: fasDashboardBar5 4s infinite;
}
.dashboard-data-loader-ball {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px color-mix(in srgb, var(--lime) 38%, transparent);
  animation: fasDashboardBall 4s infinite;
}
@keyframes fasDashboardBall {
  0%, 100% { transform: translate(0, 0); }
  5% { transform: translate(8px, -14px); }
  10% { transform: translate(15px, -10px); }
  17% { transform: translate(23px, -24px); }
  20% { transform: translate(30px, -20px); }
  27% { transform: translate(38px, -34px); }
  30% { transform: translate(45px, -30px); }
  37% { transform: translate(53px, -44px); }
  40% { transform: translate(60px, -40px); }
  50% { transform: translate(60px, 0); }
  57% { transform: translate(53px, -14px); }
  60% { transform: translate(45px, -10px); }
  67% { transform: translate(37px, -24px); }
  70% { transform: translate(30px, -20px); }
  77% { transform: translate(22px, -34px); }
  80% { transform: translate(15px, -30px); }
  87% { transform: translate(7px, -44px); }
  90% { transform: translate(0, -40px); }
}
@keyframes fasDashboardBar1 {
  0%, 40% { transform: scale(1, .2); }
  50%, 90% { transform: scale(1, 1); }
  100% { transform: scale(1, .2); }
}
@keyframes fasDashboardBar2 {
  0%, 40% { transform: scale(1, .4); }
  50%, 90% { transform: scale(1, .8); }
  100% { transform: scale(1, .4); }
}
@keyframes fasDashboardBar4 {
  0%, 40% { transform: scale(1, .8); }
  50%, 90% { transform: scale(1, .4); }
  100% { transform: scale(1, .8); }
}
@keyframes fasDashboardBar5 {
  0%, 40% { transform: scale(1, 1); }
  50%, 90% { transform: scale(1, .2); }
  100% { transform: scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-data-loader-bar,
  .dashboard-data-loader-ball { animation: none; }
}
.dashboard-stat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dashboard-stat-card::after {
  position: absolute;
  top: -42px;
  right: -42px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--stat-color, var(--lime)) 10%, transparent);
  content: "";
  pointer-events: none;
}
.dashboard-stat-card.is-green { --stat-color: #20a95b; }
.dashboard-stat-card.is-blue { --stat-color: #3b82f6; }
.dashboard-stat-card.is-purple { --stat-color: #a855f7; }
.dashboard-stat-card.is-warn { --stat-color: #f59e0b; }
.dashboard-stat-card {
  border-top-color: color-mix(in srgb, var(--stat-color, var(--lime)) 48%, var(--border));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--stat-color, var(--lime)) 7%, var(--bg-card)) 0%, var(--bg-card) 60%);
}
.dashboard-stat-card:hover {
  border-color: color-mix(in srgb, var(--stat-color, var(--lime)) 58%, var(--border));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--stat-color, var(--lime)) 13%, transparent);
  transform: translateY(-2px);
}
.dashboard-stat-icon {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: var(--lime-dim);
  color: var(--lime);
}
.dashboard-stat-icon.is-blue { background: rgba(47, 128, 237, .13); color: #4b92f1; }
.dashboard-stat-icon.is-purple { background: rgba(147, 51, 234, .13); color: #a855f7; }
.dashboard-stat-icon.is-warn { background: rgba(245, 158, 11, .14); color: #f59e0b; }
.dashboard-stat-copy {
  display: grid;
  min-width: 0;
}
.dashboard-stat-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-stat-copy b {
  margin: 1px 0;
  font-size: 27px;
  line-height: 1.1;
}
.dashboard-stat-copy em {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, .85fr);
  gap: 14px;
}
.dashboard-chart-card,
.dashboard-attention-card,
.dashboard-attendance-card,
.dashboard-venue-card {
  margin: 0;
  padding: 22px;
  border-radius: 18px;
}
.dashboard-chart-card {
  border-top: 2px solid #20a95b;
  background:
    radial-gradient(circle at 95% 0, rgba(32, 169, 91, .1), transparent 34%),
    var(--bg-card);
}
.dashboard-attention-card {
  border-top: 2px solid #f59e0b;
  background:
    radial-gradient(circle at 95% 0, rgba(245, 158, 11, .1), transparent 36%),
    var(--bg-card);
}
.dashboard-attendance-card {
  border-top: 2px solid #a855f7;
  background:
    radial-gradient(circle at 95% 0, rgba(168, 85, 247, .1), transparent 34%),
    var(--bg-card);
}
.dashboard-venue-card {
  border-top: 2px solid #3b82f6;
  background:
    radial-gradient(circle at 95% 0, rgba(59, 130, 246, .1), transparent 32%),
    var(--bg-card);
}
.dashboard-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.dashboard-card-head h3 {
  margin: 3px 0 0;
  font-size: 18px;
}
.dashboard-card-head > a {
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.dashboard-bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(36px, 1fr));
  align-items: end;
  gap: 12px;
  min-height: 225px;
  padding-top: 25px;
}
.dashboard-bar-col {
  display: grid;
  grid-template-rows: 20px 145px 20px;
  gap: 5px;
  min-width: 0;
  text-align: center;
}
.dashboard-bar-col > b { font-size: 12px; }
.dashboard-bar-col > span {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: end;
  border-radius: 8px;
  background: color-mix(in srgb, var(--border) 38%, transparent);
}
.dashboard-bar-col i {
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--lime), color-mix(in srgb, var(--lime) 55%, #0f5132));
}
.dashboard-bar-col small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-attention-list {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
.dashboard-attention-list > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card-2);
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
}
.dashboard-attention-list > a b {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  background: rgba(245, 158, 11, .14);
  color: #f59e0b;
}
.dashboard-all-clear {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 120px;
  color: var(--lime);
}
.dashboard-all-clear div { display: grid; }
.dashboard-all-clear span {
  color: var(--muted);
  font-size: 12px;
}
.dashboard-attendance-today {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.dashboard-attendance-today > a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-card-2);
  color: var(--text);
  text-decoration: none;
}
.dashboard-attendance-today > a > span:last-child { display: grid; }
.dashboard-attendance-today small { color: var(--muted); font-size: 10px; }
.dashboard-attendance-today b { font-size: 22px; }
.dashboard-attendance-icon {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
}
.dashboard-attendance-icon.is-coach { background: var(--lime-dim); color: var(--ok); }
.dashboard-attendance-icon.is-student { background: rgba(168, 85, 247, .13); color: #a855f7; }
.dashboard-attendance-icon.is-session { background: rgba(59, 130, 246, .13); color: #3b82f6; }
.dashboard-attendance-table-wrap { overflow-x: auto; }
.dashboard-attendance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dashboard-attendance-table th,
.dashboard-attendance-table td {
  padding: 12px 10px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.dashboard-attendance-table thead th {
  border-top: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-attendance-table tbody th {
  display: grid;
  min-width: 150px;
  gap: 2px;
  text-align: left;
}
.dashboard-attendance-table tbody th small { color: var(--muted); font-size: 9px; font-weight: 400; }
.dashboard-attendance-table tr.is-today { background: color-mix(in srgb, var(--lime) 5%, transparent); }
.dashboard-attendance-table td.is-present { color: var(--ok); font-weight: 700; }
.dashboard-attendance-table td.is-late { color: var(--warn); font-weight: 700; }
.dashboard-attendance-table td.is-absent { color: var(--danger); font-weight: 700; }
.dashboard-attendance-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; }
.dashboard-venue-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 20px;
}
.dashboard-venue-summary > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-card-2);
}
.dashboard-venue-summary > div:nth-child(1) {
  border-left: 3px solid #3b82f6;
  background: color-mix(in srgb, #3b82f6 7%, var(--bg-card-2));
}
.dashboard-venue-summary > div:nth-child(2) {
  border-left: 3px solid #a855f7;
  background: color-mix(in srgb, #a855f7 7%, var(--bg-card-2));
}
.dashboard-venue-summary > div:nth-child(3) {
  border-left: 3px solid #20a95b;
  background: color-mix(in srgb, #20a95b 7%, var(--bg-card-2));
}
.dashboard-venue-summary span { color: var(--muted); font-size: 11px; }
.dashboard-venue-summary b { font-size: 19px; }
.dashboard-venue-summary b.is-live { color: var(--lime); }
.dashboard-venue-summary b.is-draft { color: #f59e0b; }
.dashboard-upcoming h4 { margin: 0 0 9px; font-size: 14px; }
.dashboard-upcoming > a {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-top: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.dashboard-upcoming > a > span { display: grid; }
.dashboard-upcoming > a small { color: var(--muted); font-size: 11px; }
.dashboard-upcoming > a em {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--lime-dim);
  color: var(--lime);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}
.dashboard-upcoming > a em.is-pending { background: rgba(245, 158, 11, .14); color: #f59e0b; }
.dashboard-empty { margin: 25px 0 10px; color: var(--muted); font-size: 12px; }

@media (max-width: 1100px) {
  .dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fas-dashboard { gap: 12px; }
  .dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    padding: 22px 18px;
  }
  .dashboard-hero-actions { width: 100%; }
  .dashboard-hero-actions .btn { flex: 1; min-width: 130px; }
  .dashboard-stat-grid { gap: 8px; }
  .dashboard-data-loader {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .dashboard-stat-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    padding: 14px;
  }
  .dashboard-stat-copy b { font-size: 24px; }
  .dashboard-chart-card,
  .dashboard-attention-card,
  .dashboard-attendance-card,
  .dashboard-venue-card { padding: 17px; }
  .dashboard-bars { gap: 5px; min-height: 185px; overflow-x: auto; }
  .dashboard-bar-col { grid-template-rows: 18px 110px 18px; }
  .dashboard-venue-summary { grid-template-columns: 1fr; }
  .dashboard-attendance-today { grid-template-columns: 1fr; }
  .dashboard-attendance-table thead { display: none; }
  .dashboard-attendance-table,
  .dashboard-attendance-table tbody,
  .dashboard-attendance-table tr,
  .dashboard-attendance-table th,
  .dashboard-attendance-table td { display: block; width: 100%; }
  .dashboard-attendance-table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .dashboard-attendance-table tbody th {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0 0 7px;
    border: 0;
  }
  .dashboard-attendance-table td {
    padding: 8px;
    border: 0;
    border-radius: 9px;
    background: var(--bg-card-2);
    text-align: left;
  }
  .dashboard-attendance-table td::before {
    display: block;
    color: var(--muted);
    font-size: 8px;
    content: attr(data-label);
  }
  .dashboard-upcoming > a {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .dashboard-upcoming > a em {
    grid-column: 2;
    justify-self: start;
  }
}

/* Coach attendance */
.coach-checkin-page {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
}
.coach-checkin-toolbar {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
}
.coach-checkin-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--lime) 34%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--lime) 15%, transparent), transparent 32%),
    var(--bg-card);
}
.coach-checkin-hero-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--lime), color-mix(in srgb, var(--lime) 58%, #063b1c));
  color: #071008;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--lime) 22%, transparent);
}
.coach-checkin-hero-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.1;
}
.coach-checkin-hero > div:nth-child(2) > span,
.coach-checkin-card-head > div > span,
.coach-checkin-qr-dialog > span {
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}
.coach-checkin-hero h2 {
  margin: 3px 0;
  font-size: clamp(25px, 3vw, 36px);
}
.coach-checkin-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.coach-checkin-month-filter {
  flex: 0 1 300px;
}
.coach-checkin-grid,
.coach-checkin-admin {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}
.coach-checkin-page .card {
  margin: 0;
  border-radius: 18px;
}
.coach-checkin-self-card,
.coach-checkin-month-card,
.coach-checkin-location-card,
.coach-checkin-manual-card,
.coach-checkin-history-card {
  padding: 22px;
}
.coach-checkin-self-backdate {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.coach-checkin-self-card {
  border-top: 2px solid #22c55e;
  background:
    radial-gradient(circle at 92% 8%, rgba(34, 197, 94, .11), transparent 34%),
    var(--bg-card);
}
.coach-checkin-month-card {
  border-top: 2px solid #3b82f6;
  background:
    radial-gradient(circle at 92% 8%, rgba(59, 130, 246, .1), transparent 34%),
    var(--bg-card);
}
.coach-checkin-month-card.is-wide { grid-column: 1 / -1; }
.coach-checkin-location-card,
.coach-checkin-manual-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
.coach-checkin-location-card { border-top: 2px solid #a855f7; }
.coach-checkin-manual-card { border-top: 2px solid #f59e0b; }
.coach-checkin-history-card { border-top: 2px solid #20a95b; }
.coach-checkin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}
.coach-checkin-card-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
}
.coach-checkin-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}
.coach-checkin-live-dot::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .13);
  content: "";
}
#coach-checkin-today {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 75px;
}
.coach-checkin-success-mark,
.coach-checkin-wait-mark {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
}
.coach-checkin-success-mark { background: rgba(34, 197, 94, .13); color: #22c55e; }
.coach-checkin-wait-mark { background: rgba(245, 158, 11, .13); color: #f59e0b; }
.coach-checkin-today-copy { display: grid; gap: 3px; }
.coach-checkin-today-copy b { font-size: 17px; }
.coach-checkin-today-copy span { color: var(--muted); font-size: 11px; }
.coach-checkin-main-btn {
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
}
.coach-checkin-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.coach-checkin-kpis > div {
  display: grid;
  gap: 4px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-card-2);
}
.coach-checkin-kpis span { color: var(--muted); font-size: 10px; }
.coach-checkin-kpis b { font-size: 24px; }
.coach-checkin-qr-steps {
  margin: -4px 0 14px;
}
.coach-checkin-location-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.coach-checkin-location-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
}
.coach-checkin-location-pin {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: rgba(245, 158, 11, .12);
  color: #f59e0b;
}
.coach-checkin-location-pin svg { stroke-width: 2; }
.coach-checkin-location-pin.is-ready { background: rgba(34, 197, 94, .12); color: #22c55e; }
.coach-checkin-location-item > div:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.coach-checkin-location-item > div:nth-child(2) span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coach-checkin-location-item > em {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .12);
  color: #f59e0b;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}
.coach-checkin-location-item > em.is-ready { background: rgba(34, 197, 94, .12); color: #22c55e; }
.coach-checkin-location-actions {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.coach-checkin-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
}
.coach-checkin-action-btn svg { flex: 0 0 auto; }
.coach-checkin-location-form {
  padding-top: 17px;
  border-top: 1px solid var(--border);
}
.coach-checkin-location-switch {
  align-self: end;
  min-height: 44px;
}
.coach-checkin-location-form .fas-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  min-width: 1px;
  height: 1px;
  padding: 0;
}
.coach-checkin-history {
  display: grid;
}
.coach-checkin-history-row {
  display: grid;
  grid-template-columns: auto minmax(150px, 1.2fr) minmax(110px, .7fr) minmax(130px, .8fr) auto;
  align-items: center;
  gap: 13px;
  padding: 12px 4px;
  border-top: 1px solid var(--border);
}
.coach-checkin-history-row:first-child { border-top: 0; }
.coach-checkin-history-avatar {
  display: grid;
  overflow: hidden;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--lime-dim);
  color: var(--lime);
  font-size: 11px;
  font-weight: 800;
}
.coach-checkin-history-avatar img { width: 100%; height: 100%; object-fit: cover; }
.coach-checkin-history-name,
.coach-checkin-history-row > div:nth-child(3),
.coach-checkin-history-row > div:nth-child(4) {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.coach-checkin-history-row span { color: var(--muted); font-size: 10px; }
.coach-checkin-history-row b {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coach-checkin-history-row > em {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .12);
  color: #22c55e;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}
.coach-checkin-history-row > em.is-manual { background: rgba(245, 158, 11, .12); color: #f59e0b; }
.coach-checkin-history-row > em.is-leave { background: rgba(96, 165, 250, .14); color: #60a5fa; }
.coach-checkin-history-row.is-leave { opacity: .92; }
.coach-checkin-history-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
}
.coach-checkin-history-actions .btn { min-height: 40px; padding: 8px 12px; font-size: 12px; }
.coach-checkin-history-actions .btn.is-danger { color: #f87171; border-color: rgba(248, 113, 113, .4); }
.coach-checkin-leave-card { grid-column: 1 / -1; }
.coach-checkin-edit-dialog form { display: grid; gap: 12px; }
.coach-checkin-edit-dialog label { display: grid; gap: 6px; font-size: 13px; text-align: left; }
.coach-checkin-edit-dialog select,
.coach-checkin-edit-dialog textarea { width: 100%; font-size: 16px; }
.coach-checkin-qr-dialog {
  position: relative;
  width: min(420px, calc(100vw - 28px));
  margin: auto;
  padding: 28px 24px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font);
  text-align: center;
  box-shadow: var(--shadow);
}
.coach-checkin-qr-dialog,
.coach-checkin-qr-dialog button,
.coach-checkin-qr-dialog input {
  font-family: var(--font);
}
.coach-checkin-qr-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.coach-checkin-qr-dialog h3 {
  margin: 4px 0 16px;
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}
.coach-checkin-qr-dialog p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.coach-checkin-qr-dialog .coach-checkin-qr-help {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 11px;
  text-align: left;
}
.coach-checkin-qr-dialog .coach-checkin-qr-help.is-warning {
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--warn);
}
.coach-checkin-qr-dialog .coach-checkin-qr-help.is-ready {
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ok);
}
.coach-checkin-qr-url {
  display: block;
  width: 100%;
  margin: 12px 0 16px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coach-checkin-qr-code {
  display: grid;
  width: 244px;
  min-height: 244px;
  margin: 0 auto;
  padding: 12px;
  place-items: center;
  border-radius: 14px;
  background: #fff;
}
.coach-checkin-qr-code img,
.coach-checkin-qr-code canvas { max-width: 100%; height: auto !important; }
.coach-checkin-qr-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-card-2);
  color: var(--text);
  font-family: var(--font);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 850px) {
  .coach-checkin-hero { grid-template-columns: auto minmax(0, 1fr); }
  .coach-checkin-grid,
  .coach-checkin-admin { grid-template-columns: 1fr; }
  .coach-checkin-location-list { grid-template-columns: 1fr; }
  .coach-checkin-location-card { grid-column: auto; }
}
@media (max-width: 600px) {
  .coach-checkin-page { gap: 11px; }
  .coach-checkin-hero { grid-template-columns: 1fr; padding: 19px 16px; }
  .coach-checkin-hero-icon { width: 48px; height: 48px; border-radius: 14px; }
  .coach-checkin-self-card,
  .coach-checkin-month-card,
  .coach-checkin-location-card,
  .coach-checkin-manual-card,
  .coach-checkin-history-card { padding: 16px; }
  .coach-checkin-card-head { flex-direction: column; }
  .coach-checkin-branch-link {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
  .coach-checkin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coach-checkin-kpis > div { padding: 11px 8px; }
  .coach-checkin-kpis b { font-size: 20px; }
  .coach-checkin-location-item { grid-template-columns: auto minmax(0, 1fr); }
  .coach-checkin-location-item > em { grid-column: 2; justify-self: start; }
  .coach-checkin-location-actions { grid-column: 1 / -1; }
  .coach-checkin-history-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .coach-checkin-history-row > div:nth-child(3),
  .coach-checkin-history-row > div:nth-child(4) { grid-column: 2; }
  .coach-checkin-history-row > em { grid-column: 3; grid-row: 1 / 3; }
  .coach-checkin-history-actions { justify-content: stretch; }
  .coach-checkin-history-actions .btn { flex: 1 1 0; min-height: 44px; }
}

/* Student attendance */
.student-attendance-page {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
}
.student-attendance-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--lime) 34%, var(--border));
  border-radius: 20px;
  background: var(--bg-card);
}
.student-attendance-hero-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  background: var(--lime);
  color: #071008;
}
.student-attendance-hero > div:nth-child(2) > span,
.student-attendance-card-head > div > span {
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}
.student-attendance-hero h2 { margin: 3px 0; font-size: clamp(25px, 3vw, 36px); }
.student-attendance-hero p { margin: 0; color: var(--muted); font-size: 12px; }
.student-attendance-toolbar {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
}
.student-attendance-toolbar .stories-filter:has(.thai-calendar-picker) {
  flex: 0 1 300px;
  min-width: 240px;
}
.student-attendance-coach { display: grid; gap: 14px; }
.student-attendance-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 14px;
}
.student-attendance-page .card {
  margin: 0;
  padding: 22px;
  border-radius: 18px;
}
.student-session-card { border-top: 2px solid var(--lime); }
.student-session-card .student-attendance-card-head { align-items: center; }
#student-template-new { margin-left: auto; }
.student-template-add-long { display: none; }
.student-template-list { display: grid; gap: 8px; margin-top: 4px; }
.student-template-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
}
.student-template-row strong { display: block; }
.student-template-row span { color: var(--muted); font-size: 13px; }
.student-template-row-actions { display: flex; gap: 8px; flex: 0 0 auto; }
html[data-fas-theme="light"] body.fas-backend .student-template-row { border-color: rgba(17, 17, 17, 0.1); }
.student-template-actions,
.student-session-manage-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.student-template-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  margin-top: 2px;
  margin-bottom: 18px;
}
.student-template-actions .btn {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  height: 100%;
  margin: 0;
  padding: 8px 6px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}
#student-template-new {
  color: #d7ebff;
  border-color: #3d7ec4;
  background: #1a456f;
}
#student-template-save {
  color: #e9ffef;
  border-color: #2ea85a;
  background: #146c32;
}
#student-template-delete {
  color: #ffe8ea;
  border-color: #e15b68;
  background: #8d2430;
}
html[data-fas-theme="light"] body.fas-backend #student-template-new {
  color: #0d4f8a;
  border-color: #7eb0e0;
  background: #e7f2ff;
}
html[data-fas-theme="light"] body.fas-backend #student-template-save {
  color: #0f6b32;
  border-color: #7dcaa0;
  background: #e7f6ec;
}
html[data-fas-theme="light"] body.fas-backend #student-template-delete {
  color: #9d1828;
  border-color: #e7a3ab;
  background: #fff0f2;
}
.student-session-manage-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  margin: 0 0 14px;
}
.student-session-manage-actions .btn {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  height: 100%;
  margin: 0;
  padding: 8px 6px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}
#student-session-edit {
  color: #d7ebff;
  border-color: #3d7ec4;
  background: #1a456f;
}
#student-session-close {
  color: #fff6df;
  border-color: #e0b03a;
  background: #8a6410;
}
#student-session-close.is-reopen {
  color: #e9ffef;
  border-color: #2ea85a;
  background: #146c32;
}
#student-session-cancel {
  color: #ffe8ea;
  border-color: #e15b68;
  background: #8d2430;
}
html[data-fas-theme="light"] body.fas-backend #student-session-edit {
  color: #0d4f8a;
  border-color: #7eb0e0;
  background: #e7f2ff;
}
html[data-fas-theme="light"] body.fas-backend #student-session-close {
  color: #7a4b00;
  border-color: #e2c27a;
  background: #fff6e0;
}
html[data-fas-theme="light"] body.fas-backend #student-session-close.is-reopen {
  color: #0f6b32;
  border-color: #7dcaa0;
  background: #e7f6ec;
}
html[data-fas-theme="light"] body.fas-backend #student-session-cancel {
  color: #9d1828;
  border-color: #e7a3ab;
  background: #fff0f2;
}
.student-session-manage-actions[hidden],
.student-template-actions[hidden] {
  display: none;
}
.stories-fields label.is-single-branch .fas-combo {
  pointer-events: none;
}
.stories-fields label.is-single-branch select {
  background-image: none;
  padding-right: 12px;
  cursor: default;
}
.student-attendance-settings-card { border-top: 2px solid var(--info); }
.student-session-list-card { border-top: 2px solid #3ec6d4; }
.student-cancelled-hint { margin: 0 0 12px; }
.student-roster-card { border-top: 2px solid #b08cff; }
.student-location-qr-card { border-top: 2px solid #f5c451; }
.student-self-card { border-top: 2px solid var(--lime); }
.student-attendance-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.student-attendance-card-head h3 { margin: 2px 0 0; font-size: 18px; }
.student-attendance-card-head > select { min-width: 280px; }
.student-session-list-card .student-attendance-card-head > div {
  flex: 0 0 170px;
  min-width: 170px;
}
.student-session-list-card .student-attendance-card-head h3 {
  white-space: nowrap;
}
.student-session-list-card .student-attendance-card-head > .fas-combo,
.student-session-list-card .student-attendance-card-head > select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}
.student-session-list-card .student-attendance-card-head > .fas-combo select {
  width: 100%;
}
.student-attendance-access-badge {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--lime-dim);
  color: var(--lime);
  font-size: 10px;
  font-weight: 700;
}
.student-attendance-settings-card form { display: grid; gap: 12px; }
.student-attendance-rule-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 13px;
  border-radius: 12px;
  background: var(--bg-card-2);
  color: var(--lime);
}
.student-attendance-rule-note p { display: grid; gap: 3px; color: var(--text); }
.student-attendance-rule-note span { color: var(--muted); font-size: 10px; }
.student-attendance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.student-attendance-summary > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card-2);
}
.student-attendance-summary span { color: var(--muted); font-size: 10px; }
.student-attendance-summary b { font-size: 22px; }
.student-summary-icon { display: none; }
.student-attendance-summary .is-present b,
.student-attendance-summary .is-present .student-summary-icon { color: var(--ok); }
.student-attendance-summary .is-late b,
.student-attendance-summary .is-late .student-summary-icon { color: var(--warn); }
.student-attendance-summary .is-absent .student-summary-icon { color: var(--danger); }
.student-roster-head-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.student-roster-card .student-attendance-card-head {
  align-items: center;
}
.student-roster-head-actions > .btn {
  flex: 0 0 auto;
}
.student-session-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.student-session-head-actions > .btn {
  flex: 0 0 auto;
}
#student-mark-all {
  color: #06210c;
  border: 1px solid #18a33a;
  background: #3dde62;
  font-weight: 800;
}
#student-mark-all:hover {
  background: #62ea84;
  border-color: #7cf09a;
}
html[data-fas-theme="light"] body.fas-backend #student-mark-all {
  color: #ffffff;
  border-color: #146d31;
  background: #1b8a3e;
}
html[data-fas-theme="light"] body.fas-backend #student-mark-all:hover {
  background: #146d31;
  border-color: #0f5526;
}
.student-roster-search-field {
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  width: auto;
  min-width: 180px;
  max-width: 320px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--input-bg);
  color: var(--muted);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.student-roster-search-field:focus-within {
  border-color: color-mix(in srgb, var(--lime) 65%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 12%, transparent);
  color: var(--lime);
}
.student-roster-search-field input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 0 0 9px;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}
.academy-branch-form .academy-branch-box {
  margin: 0 0 4px;
}
#academy-branch-location-box[hidden] {
  display: none !important;
}
.academy-branch-form-feedback {
  margin: 0;
  padding: 11px 13px;
  border-radius: 10px;
}
.btn.is-action-loading {
  gap: 8px;
  cursor: wait;
}
.fas-button-spinner {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: fasButtonSpin .7s linear infinite;
}
.fas-content-skeleton {
  display: grid;
  gap: 12px;
  padding: 4px 0;
}
.fas-loading-host {
  position: relative;
  min-height: 120px;
}
.fas-load-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  align-content: center;
  padding: 18px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(2px);
}
.fas-skeleton-block,
.fas-skeleton-row td {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 94%, var(--lime) 6%);
}
.fas-skeleton-row td {
  border-width: 0 0 1px;
  border-radius: 0;
}
.fas-skeleton-line {
  display: block;
  width: 56%;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--muted) 12%, transparent) 20%,
    color-mix(in srgb, var(--muted) 25%, transparent) 50%,
    color-mix(in srgb, var(--muted) 12%, transparent) 80%);
  background-size: 220% 100%;
  animation: fasSkeletonShimmer 1.25s ease-in-out infinite;
}
.fas-skeleton-line.is-wide { width: 84%; }
.fas-load-error {
  display: grid;
  justify-items: start;
  gap: 7px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, #ef4444 45%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, #ef4444 8%, var(--panel));
  color: var(--text);
}
.fas-load-error span {
  color: var(--muted);
  font-size: 13px;
}
.fas-load-complete {
  animation: fasLoadReveal .18s ease-out;
}
.academy-branch-table tr.is-action-pending {
  opacity: .55;
  pointer-events: none;
}
@keyframes fasButtonSpin {
  to { transform: rotate(360deg); }
}
@keyframes fasSkeletonShimmer {
  from { background-position: 110% 0; }
  to { background-position: -110% 0; }
}
@keyframes fasLoadReveal {
  from { opacity: .55; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fas-button-spinner { animation-duration: 1.4s; }
  .fas-skeleton-line,
  .fas-load-complete { animation: none; }
}
.academy-branch-form .fas-form-box > label {
  min-width: 0;
}
.academy-branch-checkin-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(140px, 0.72fr) minmax(240px, 1.28fr);
  gap: 12px;
  align-items: end;
  margin: 0 0 10px;
}
.academy-branch-checkin-row > label {
  margin: 0;
  min-width: 0;
}
.academy-branch-checkin-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text);
}
.academy-branch-checkin-switch .fas-switch-ui {
  flex: 0 0 46px;
}
.academy-branch-checkin-switch .fas-switch-label {
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
}
.academy-branch-location-state {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.academy-branch-location-state.is-ready {
  background: var(--lime-dim);
  color: var(--ok);
}
.academy-branch-location-state.is-hidden {
  background: color-mix(in srgb, var(--muted, #94a3b8) 18%, transparent);
  color: var(--muted, #94a3b8);
}
#academy-branch-body tr.is-branch-hidden td {
  opacity: .72;
}
.coach-checkin-branch-link {
  flex: 0 0 auto;
  white-space: nowrap;
}
.student-roster-list { display: grid; }
.student-roster-row {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto minmax(130px, .55fr);
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--border);
}
.student-roster-row:first-child { border-top: 0; }
.student-roster-avatar {
  display: grid;
  overflow: hidden;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--lime-dim);
  color: var(--lime);
  font-size: 11px;
  font-weight: 800;
}
.student-roster-avatar img { width: 100%; height: 100%; object-fit: cover; }
.student-roster-name { display: grid; min-width: 0; gap: 2px; }
.student-roster-name b { overflow: visible; text-overflow: clip; white-space: normal; }
.student-roster-name span { color: var(--muted); font-size: 10px; }
.student-status-buttons {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}
.student-status-buttons button {
  min-width: 52px;
  padding: 8px 10px;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--muted);
  cursor: pointer;
}
.student-status-buttons button:first-child { border-left: 0; }
.student-status-buttons button.active { background: var(--bg-hover); color: var(--text); font-weight: 700; }
.student-status-buttons button.is-present { background: var(--lime-dim); color: var(--ok); }
.student-status-buttons button.is-late { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.student-status-buttons button.is-leave { background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); }
.student-status-buttons button.is-absent { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.student-roster-note-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--faint);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.student-roster-note-field:focus-within {
  border-color: color-mix(in srgb, var(--lime) 58%, var(--border));
  background: var(--bg-card);
  box-shadow: 0 0 0 3px var(--lime-dim);
  color: var(--ok);
}
.student-roster-note-field > svg { flex: 0 0 auto; }
.student-roster-note {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
}
.student-roster-note::placeholder { color: var(--faint); }
.student-roster-save {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
}
.student-location-qr-list { display: grid; gap: 9px; margin-top: 14px; }
.student-location-qr-list > article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card-2);
}
.student-location-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
}
.student-location-icon.is-ready { background: var(--lime-dim); color: var(--ok); }
.student-location-qr-list article > div { display: grid; gap: 2px; }
.student-location-qr-list article > div span { color: var(--muted); font-size: 10px; }
.student-attendance-self { display: grid; }
.student-self-card { max-width: 720px; }
.student-self-card > label { display: grid; gap: 6px; margin-top: 15px; color: var(--muted); font-size: 11px; }
.student-self-method {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.student-self-method > button {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card-2);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.student-self-method > button.active {
  border-color: rgba(65, 227, 106, .55);
  background: color-mix(in srgb, var(--lime) 16%, var(--bg-card));
  box-shadow: inset 3px 0 0 var(--lime);
}
.student-self-success,
.student-self-wait {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-card-2);
}
.student-self-success { color: var(--ok); }
.student-self-wait { color: var(--warn); }
.student-self-success > div,
.student-self-wait > div { display: grid; gap: 2px; color: var(--text); }
.student-self-success span,
.student-self-wait span { color: var(--muted); font-size: 10px; }
.student-self-submit { width: 100%; justify-content: center; margin-top: 12px; min-height: 46px; }

@media (max-width: 1000px) {
  .student-attendance-top-grid { grid-template-columns: 1fr; }
  .student-roster-row { grid-template-columns: auto minmax(0, 1fr); }
  .student-status-buttons,
  .student-roster-note-field { grid-column: 1 / -1; width: 100%; }
  .student-status-buttons button { flex: 1; min-width: 0; }
}
@media (max-width: 700px) {
  .student-attendance-page { gap: 11px; }
  .student-attendance-hero { grid-template-columns: 1fr; padding: 19px 16px; }
  .student-attendance-hero-icon { width: 48px; height: 48px; border-radius: 14px; }
  .student-attendance-page .card { padding: 16px; }
  .student-template-actions { gap: 8px; margin-bottom: 16px; }
  .student-template-actions .btn {
    min-height: 52px;
    padding: 7px 4px;
    font-size: 12px;
  }
  .student-attendance-card-head { flex-direction: column; }
  .student-session-card .student-attendance-card-head { align-items: stretch; }
  #student-template-new { width: 100%; margin-left: 0; min-height: 48px; }
  #student-template-new .student-template-add-short { display: none; }
  #student-template-new .student-template-add-long { display: inline; }
  .student-attendance-card-head > select { width: 100%; min-width: 0; }
  .student-session-list-card .student-attendance-card-head > div {
    flex: none;
    min-width: 0;
  }
  .student-session-list-card .student-attendance-card-head > .fas-combo,
  .student-session-list-card .student-attendance-card-head > select {
    width: 100%;
  }
  .student-attendance-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .student-attendance-summary > div {
    justify-items: center;
    gap: 2px;
    padding: 10px 4px;
    text-align: center;
  }
  .student-attendance-summary .student-summary-label { display: none; }
  .student-summary-icon { display: grid; }
  .student-attendance-summary b { font-size: 18px; }
  .student-roster-head-actions { width: 100%; justify-content: stretch; flex-wrap: wrap; }
  .student-roster-head-actions > * { flex: 1 1 180px; }
  .student-roster-search-field { width: 100%; max-width: none; min-width: 0; }
  .student-session-manage-actions { gap: 8px; }
  .student-session-manage-actions .btn {
    min-height: 52px;
    padding: 7px 4px;
    font-size: 12px;
  }
  .student-status-buttons { grid-column: 1 / -1; width: 100%; }
  .student-status-buttons button { flex: 1; min-width: 0; }
  .student-roster-note-field { grid-column: 1 / -1; }
  .student-location-qr-list > article { grid-template-columns: auto minmax(0, 1fr); }
  .student-location-qr-list article > button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .student-roster-save { align-items: stretch; flex-direction: column; }
  .student-roster-save .btn { width: 100%; justify-content: center; }
}

/* Attendance report */
.attendance-report-page { display: grid; gap: 16px; min-width: 0; max-width: 100%; }
.attendance-report-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
}
.attendance-report-tabs[hidden] {
  display: none;
}
.attendance-report-tabs .btn {
  min-width: 120px;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}
.attendance-report-tabs .btn.active {
  color: #07130b;
  background: var(--lime);
  box-shadow: 0 7px 18px rgba(65, 227, 106, .2);
}
.attendance-report-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
}
.attendance-report-filters label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.attendance-report-filters label[hidden] {
  display: none;
}
.attendance-report-filters label,
.attendance-report-filters select,
.attendance-report-filters .fas-combo,
.attendance-report-filters .thai-calendar-picker,
.attendance-report-filters .thai-calendar-trigger {
  width: 100%;
  min-width: 0;
}
.attendance-report-filters .btn { min-height: 43px; justify-content: center; }
.attendance-report-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.attendance-report-kpi {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 112px;
  padding: 17px;
  overflow: hidden;
}
.attendance-report-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--border);
}
.attendance-report-kpi > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.attendance-report-kpi > strong { color: var(--text); font-size: 25px; line-height: 1.1; }
.attendance-report-kpi > small { color: var(--muted); font-size: 10px; }
.attendance-report-kpi.is-present::before,
.attendance-report-kpi.is-rate::before { background: #41e36a; }
.attendance-report-kpi.is-late::before { background: #f2b84b; }
.attendance-report-kpi.is-leave::before { background: #62a9ff; }
.attendance-report-kpi.is-absent::before { background: #ff6477; }
.attendance-report-kpi.is-unrecorded::before { background: #a5adba; }
.attendance-report-table-card,
.attendance-report-detail-card { min-width: 0; max-width: 100%; padding: 18px; }
.attendance-report-table-card .student-attendance-card-head { flex-wrap: wrap; min-width: 0; }
.attendance-report-table-card .student-attendance-card-head > div { min-width: 0; }
.attendance-report-table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.attendance-report-table-tools[hidden] {
  display: none;
}
.attendance-report-table-tools .stories-per-page {
  min-width: 110px;
}
.attendance-coach-sort {
  flex: 1 1 220px;
  max-width: 280px;
}
.attendance-coach-sort[hidden] { display: none; }
.attendance-coach-sort,
.attendance-coach-sort select {
  white-space: nowrap;
}
.attendance-coach-sort select {
  min-height: 44px;
  width: 100%;
}
.attendance-report-table-tools .student-roster-search-field {
  min-width: 180px;
}
.attendance-report-page .student-roster-search-field input {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}
.attendance-report-page .student-roster-search-field input::placeholder {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  opacity: 1;
}
.attendance-report-table th,
.attendance-report-table td { text-align: center; }
.attendance-report-table td[data-label="นักเรียน"],
.attendance-report-table td[data-label="Coach"] {
  min-width: 210px;
  text-align: left;
}
.attendance-report-table .stories-num {
  width: 64px;
  min-width: 64px;
  color: var(--text);
  font-weight: 800;
}
.attendance-report-table .stories-row-actions { min-width: 105px; }
.attendance-report-layout {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}
.attendance-report-layout[hidden] { display: none; }
.attendance-report-layout .btn {
  min-width: 108px;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}
.attendance-report-layout .btn.active {
  color: #07130b;
  background: var(--lime);
}
.attendance-coach-month-note {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 13px;
}
.attendance-coach-month-note[hidden] { display: none; }
.attendance-report-filters.is-coach-month {
  grid-template-columns: minmax(0, 280px) minmax(0, 240px) auto;
}
.stories-table-wrap.is-coach-month,
body.fas-backend .stories-table-wrap.is-coach-month {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.stories-table-wrap.is-coach-month .attendance-report-table,
body.fas-backend .stories-table-wrap.is-coach-month .attendance-report-table {
  display: table;
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}
.stories-table-wrap.is-coach-month .attendance-report-table thead,
body.fas-backend .stories-table-wrap.is-coach-month .attendance-report-table thead {
  display: table-header-group;
}
.stories-table-wrap.is-coach-month .attendance-report-table tbody,
body.fas-backend .stories-table-wrap.is-coach-month .attendance-report-table tbody {
  display: table-row-group;
}
.stories-table-wrap.is-coach-month .attendance-report-table tr,
body.fas-backend .stories-table-wrap.is-coach-month .attendance-report-table tr {
  display: table-row;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.stories-table-wrap.is-coach-month .attendance-report-table th,
.stories-table-wrap.is-coach-month .attendance-report-table td,
body.fas-backend .stories-table-wrap.is-coach-month .attendance-report-table th,
body.fas-backend .stories-table-wrap.is-coach-month .attendance-report-table td {
  display: table-cell;
  width: auto;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.stories-table-wrap.is-coach-month .attendance-report-table thead th,
body.fas-backend .stories-table-wrap.is-coach-month .attendance-report-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-card-2);
}
.stories-table-wrap.is-coach-month .attendance-report-table .is-coach-name {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 168px;
  max-width: 240px;
  text-align: left;
  background: var(--bg-card);
  box-shadow: 2px 0 0 var(--border);
}
.stories-table-wrap.is-coach-month .attendance-report-table thead .is-coach-name {
  z-index: 4;
  background: var(--bg-card-2);
}
.stories-table-wrap.is-coach-month .attendance-report-table .is-coach-day {
  width: 36px;
  min-width: 36px;
  max-width: 44px;
  padding: 6px 2px;
  vertical-align: middle;
}
.stories-table-wrap.is-coach-month .attendance-report-table th.is-coach-day.is-weekend,
.stories-table-wrap.is-coach-month .attendance-report-table td.is-coach-day.is-weekend,
body.fas-backend .stories-table-wrap.is-coach-month .attendance-report-table th.is-coach-day.is-weekend,
body.fas-backend .stories-table-wrap.is-coach-month .attendance-report-table td.is-coach-day.is-weekend {
  background: color-mix(in srgb, #e8b15a 34%, var(--bg-card));
}
html[data-fas-theme="light"] .stories-table-wrap.is-coach-month .attendance-report-table th.is-coach-day.is-weekend,
html[data-fas-theme="light"] .stories-table-wrap.is-coach-month .attendance-report-table td.is-coach-day.is-weekend,
html[data-fas-theme="light"] body.fas-backend .stories-table-wrap.is-coach-month .attendance-report-table th.is-coach-day.is-weekend,
html[data-fas-theme="light"] body.fas-backend .stories-table-wrap.is-coach-month .attendance-report-table td.is-coach-day.is-weekend {
  background: #fff3d6;
  color: #3d2a08;
}
.stories-table-wrap.is-coach-month .attendance-report-table .is-coach-action {
  min-width: 108px;
}
@media (max-width: 640px) {
  .stories-table-wrap.is-coach-month .attendance-report-table .is-coach-name {
    min-width: 132px;
    max-width: 168px;
  }
  .stories-table-wrap.is-coach-month .attendance-report-table .is-coach-day {
    width: 32px;
    min-width: 32px;
    max-width: 36px;
  }
}
.coach-day-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 2px auto;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.coach-day-mark::before {
  content: "✓";
}
.coach-day-mark.is-qr { color: #07130b; background: var(--lime); }
.coach-day-mark.is-hand { color: #07130b; background: #f5c451; }
.coach-day-mark.is-admin { color: #fff; background: #3d6bff; }
.attendance-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--border) 58%, transparent);
  font-size: 11px;
  font-weight: 800;
}
.attendance-status-pill.is-present { color: #36cf61; background: rgba(65, 227, 106, .12); }
.attendance-status-pill.is-late { color: #e2a832; background: rgba(242, 184, 75, .14); }
.attendance-status-pill.is-leave { color: #5d9ff1; background: rgba(98, 169, 255, .14); }
.attendance-status-pill.is-absent { color: #f35c70; background: rgba(255, 100, 119, .13); }
.attendance-status-pill.is-unrecorded { color: var(--muted); }
.attendance-report-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.attendance-report-detail-summary span {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  font-size: 11px;
}
.attendance-report-detail-summary b { color: var(--text); }
.attendance-report-detail-list { display: grid; gap: 16px; }
.attendance-month h4 { margin: 0 0 8px; color: var(--text); font-size: 16px; }
.attendance-month-week,
.attendance-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.attendance-month-week { margin-bottom: 4px; }
.attendance-month-week span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.attendance-month-day {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 78px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card-2);
}
.attendance-month-day.is-pad { border-color: transparent; background: transparent; }
.attendance-month-day > b { color: var(--text); font-size: 12px; }
.attendance-month-day.has-mark { background: color-mix(in srgb, var(--bg-card) 82%, var(--lime) 8%); }
.attendance-month-mark {
  display: grid;
  gap: 1px;
  padding: 3px 4px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.attendance-month-mark small { font-size: 9px; font-weight: 600; }
.attendance-month-mark.is-present { color: #36cf61; background: rgba(65, 227, 106, .12); }
.attendance-month-mark.is-late { color: #e2a832; background: rgba(242, 184, 75, .14); }
.attendance-month-mark.is-absent { color: #f35c70; background: rgba(255, 100, 119, .13); }
.attendance-month-mark.is-unrecorded { color: var(--muted); background: rgba(165, 173, 186, .16); }
.attendance-report-detail-list article {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}
.attendance-report-detail-list article > div { display: grid; gap: 3px; }
.attendance-report-detail-list article > div:last-child { justify-items: end; text-align: right; }
.attendance-report-detail-list b { color: var(--text); font-size: 13px; }
.attendance-report-detail-list span { color: var(--muted); font-size: 11px; }
@media (max-width: 1100px) {
  .attendance-report-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attendance-report-filters.is-coach-month { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .attendance-report-tabs { display: flex; width: 100%; }
  .attendance-report-tabs[hidden] { display: none; }
  .attendance-report-tabs .btn { flex: 1; min-width: 0; }
  .attendance-report-filters { grid-template-columns: 1fr; }
  .attendance-report-filters.is-coach-month { grid-template-columns: 1fr; }
  .attendance-report-filters .btn { width: 100%; }
  .attendance-report-layout { width: 100%; flex-wrap: wrap; }
  .attendance-report-layout .btn { flex: 1; min-width: 0; }
  .attendance-report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-report-kpi { min-height: 100px; }
  .attendance-report-table-card,
  .attendance-report-detail-card { padding: 14px; }
  .attendance-report-table-tools { width: 100%; }
  .attendance-report-table-tools .stories-per-page,
  .attendance-report-table-tools .student-roster-search-field,
  .attendance-report-table-tools .attendance-coach-sort { flex: 1 1 160px; max-width: none; }
  .attendance-month-day { min-height: 64px; padding: 4px; }
  .attendance-month-mark small { display: none; }
  .attendance-report-detail-list article { grid-template-columns: 1fr; }
  .attendance-report-detail-list article > div:last-child { justify-items: start; text-align: left; }
}

/* Post-match player grading */
.match-review-page { display: grid; gap: 16px; }
.match-review-toolbar { align-items: end; }
.match-review-toolbar .stories-search { flex: 1 1 320px; }
.match-review-list { display: grid; gap: 9px; margin-top: 12px; }
.match-review-list-row {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(240px, 1.5fr) minmax(120px, .65fr) minmax(190px, auto);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
}
.match-review-list-row.is-pending {
  grid-template-columns: minmax(150px, .8fr) minmax(240px, 1.5fr) minmax(300px, auto);
}
.match-review-date-badge,
.match-review-list-main,
.match-review-result { display: grid; gap: 3px; }
.match-review-date-badge b,
.match-review-list-main h4,
.match-review-result strong { margin: 0; color: var(--text); }
.match-review-date-badge span,
.match-review-date-badge small,
.match-review-list-main span,
.match-review-list-main small,
.match-review-result span { color: var(--muted); font-size: 11px; }
.match-review-my-grade {
  color: var(--text);
  font-weight: 700;
}
.match-review-list-main h4 { font-size: 15px; }
.match-review-result { justify-items: center; text-align: center; }
.match-review-result strong { font-size: 20px; }
.match-review-list-actions {
  display: grid;
  justify-items: end;
  gap: 7px;
}
.match-review-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}
.match-review-action-buttons .btn {
  min-height: 40px;
  justify-content: center;
  font-weight: 900;
}
.match-review-icon-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.match-review-icon-actions .btn {
  flex: 0 0 auto;
  width: auto;
}
.match-review-gamepad-btn {
  background: #4f7598;
  border-color: #3d607f;
  color: #ffffff;
}
.match-review-gamepad-btn:hover {
  background: #3d607f;
  border-color: #304d68;
  color: #ffffff;
  transform: translateY(-1px);
}
.match-review-list-row.is-summary {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 12px;
}
.match-review-summary-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.match-review-date-badge { flex: 1 1 auto; min-width: 0; }
.match-review-summary-chips {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
}
.match-review-summary-chips em,
.match-review-list-actions em,
.match-review-video-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.match-review-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  white-space: nowrap;
}
.match-review-summary-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  gap: 10px 16px;
  align-items: end;
}
.match-review-inline-detail {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.match-review-inline-head {
  display: grid;
  gap: 2px;
}
.match-review-inline-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.match-review-inline-head strong {
  color: var(--text);
  font-size: 16px;
}
.match-review-inline-foot {
  display: flex;
  justify-content: flex-end;
}
.match-review-summary-bottom p {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
}
.match-review-summary-bottom span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.match-review-summary-bottom strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}
.match-review-summary-chips em.is-final,
.match-review-list-actions em.is-final {
  color: #37d866;
  background: rgba(65, 227, 106, .12);
}
.match-review-summary-chips em.is-draft,
.match-review-list-actions em.is-draft {
  color: #e2a832;
  background: rgba(242, 184, 75, .14);
}
.match-review-video-badge {
  color: #65aaff;
  background: rgba(98, 169, 255, .13);
}
.match-review-form-card,
.match-review-list-card,
.match-review-detail-card { padding: 18px; }
.match-review-score-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 9px;
  align-items: end;
}
.match-review-score-field > span {
  padding-bottom: 13px;
  color: var(--muted);
  font-weight: 800;
}
.match-review-score-field label { margin: 0; }
.match-review-roster-section {
  margin-top: 6px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg-card) 89%, transparent);
}
.match-review-roster-section .student-attendance-card-head {
  margin-bottom: 10px;
}
.match-review-roster-section #match-review-player-search {
  width: 100%;
}
.match-review-players {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.match-review-player-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.match-review-player-group > h4 {
  grid-column: 1 / -1;
  margin: 0;
  padding: 4px 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.match-review-player {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
}
.match-review-player.is-selected {
  border-color: rgba(65, 227, 106, .42);
  box-shadow: inset 3px 0 0 var(--lime);
}
.match-review-player.is-guest {
  border-style: dashed;
}
.match-review-player.is-removed {
  border-style: dashed;
  opacity: .72;
}
.match-review-player.is-removed .match-review-player-fields {
  display: none;
}
.match-review-player-toggle {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px !important;
  align-items: center;
  margin: 0 !important;
  cursor: pointer;
}
.match-review-player-toggle > input { width: 18px; height: 18px; accent-color: var(--lime); }
.match-review-player-toggle > span { display: grid; gap: 2px; min-width: 0; }
.match-review-player-toggle b {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-review-player-toggle small { color: var(--muted); font-size: 10px; }
.match-review-player-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.match-review-player-fields .full { grid-column: 1 / -1; }
.match-review-player-fields label { min-width: 0; }
.match-review-grade-value {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--bg-card-2);
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}
.match-review-player-fields textarea { min-height: 74px; resize: vertical; }
.match-review-form-actions { justify-content: flex-end; }
.match-review-form-actions .stories-delete-btn { margin-right: auto; }
.match-review-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}
.match-review-detail-meta span,
.match-review-detail-meta strong {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 11px;
}
.match-review-detail-meta strong { color: var(--text); }
.match-review-detail-section {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.match-review-detail-section > h4 { margin: 0; color: var(--text); }
.match-review-video-frame {
  position: relative;
  width: min(900px, 100%);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #000;
}
.match-review-video-frame iframe { width: 100%; height: 100%; border: 0; }
.match-review-detail-section > .btn { width: fit-content; }
.match-review-history-players { display: grid; gap: 10px; }
.match-review-history-player {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card) 91%, transparent);
}
.match-review-history-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
}
.match-review-history-head h4 { margin: 0; color: var(--text); }
.match-review-history-head span { color: var(--muted); font-size: 11px; }
.match-review-history-head strong,
.match-review-grade-badge {
  display: grid;
  place-items: center;
  min-width: 62px;
  min-height: 62px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--muted);
  background: color-mix(in srgb, var(--border) 55%, transparent);
  font-size: 24px;
}
.match-review-grade-badge.is-grade-a,
.match-review-grade-value.is-grade-a {
  color: #3d2e00;
  background: #e8c547;
  border-color: #d4ae33;
}
.match-review-grade-badge.is-grade-b,
.match-review-grade-value.is-grade-b {
  color: #1c2228;
  background: #c5cdd4;
  border-color: #aeb8c0;
}
.match-review-grade-badge.is-grade-c,
.match-review-grade-value.is-grade-c {
  color: #2a1608;
  background: #c67a45;
  border-color: #b36a38;
}
.match-review-grade-badge.is-grade-d,
.match-review-grade-value.is-grade-d {
  color: #1a1f1c;
  background: #f5f7f6;
  border-color: #d7ddd9;
}
.match-review-grade-badge.is-grade-e,
.match-review-grade-value.is-grade-e {
  color: #3d080c;
  background: #e05667;
  border-color: #c94455;
}
.match-review-grade-badge.is-grade-empty,
.match-review-grade-value.is-grade-empty {
  color: var(--muted);
  background: color-mix(in srgb, var(--border) 55%, transparent);
}
html[data-fas-theme="light"] body.fas-backend .match-review-grade-badge.is-grade-a,
html[data-fas-theme="light"] body.fas-backend .match-review-grade-value.is-grade-a {
  color: #5c4300;
  background: #f0c94b;
  border-color: #d4ae33;
}
html[data-fas-theme="light"] body.fas-backend .match-review-grade-badge.is-grade-b,
html[data-fas-theme="light"] body.fas-backend .match-review-grade-value.is-grade-b {
  color: #2a3238;
  background: #cfd6dc;
  border-color: #b4bec6;
}
html[data-fas-theme="light"] body.fas-backend .match-review-grade-badge.is-grade-c,
html[data-fas-theme="light"] body.fas-backend .match-review-grade-value.is-grade-c {
  color: #3d1c0a;
  background: #d08a52;
  border-color: #b87440;
}
html[data-fas-theme="light"] body.fas-backend .match-review-grade-badge.is-grade-d,
html[data-fas-theme="light"] body.fas-backend .match-review-grade-value.is-grade-d {
  color: #3a4248;
  background: #ffffff;
  border-color: #c5d0c8;
}
html[data-fas-theme="light"] body.fas-backend .match-review-grade-badge.is-grade-e,
html[data-fas-theme="light"] body.fas-backend .match-review-grade-value.is-grade-e {
  color: #5c0d14;
  background: #e85a5a;
  border-color: #d04545;
}
.match-review-history-head strong small { font-size: 9px; font-weight: 800; opacity: .88; }
.match-review-history-comments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.match-review-history-comments > div {
  padding: 11px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--border) 36%, transparent);
}
.match-review-history-comments b { color: var(--text); font-size: 11px; }
.match-review-history-comments p,
.match-review-team-comment p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.match-review-team-comment {
  padding: 15px;
  border-left: 3px solid var(--lime);
  border-radius: 0 12px 12px 0;
  background: rgba(65, 227, 106, .07);
}
@media (max-width: 1050px) {
  .match-review-list-row { grid-template-columns: minmax(140px, .7fr) minmax(220px, 1.3fr) minmax(120px, .6fr); }
  .match-review-list-row.is-pending { grid-template-columns: minmax(140px, .7fr) minmax(220px, 1.3fr); }
  .match-review-list-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .match-review-list-actions { justify-items: end; }
  .match-review-player-group { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .match-review-form-card,
  .match-review-list-card,
  .match-review-detail-card { padding: 14px; }
  .match-review-list-row { grid-template-columns: 1fr; }
  .match-review-list-row.is-pending { grid-template-columns: 1fr; }
  .match-review-summary-bottom { grid-template-columns: 1fr 1fr; }
  .match-review-date-badge { flex: 1 1 0; }
  .match-review-summary-chips { flex-wrap: nowrap; justify-content: flex-end; }
  .match-review-result { justify-items: start; text-align: left; }
  .match-review-list-actions { grid-column: auto; justify-items: stretch; }
  .match-review-list-actions > em { justify-self: start; }
  .match-review-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .match-review-action-buttons .btn { width: 100%; min-width: 0; }
  .match-review-icon-actions { justify-content: flex-start; }
  .match-review-score-field { grid-column: 1 / -1; }
  .match-review-roster-section .student-attendance-card-head { align-items: stretch; }
  .match-review-player-fields { grid-template-columns: 1fr; }
  .match-review-player-fields .full { grid-column: auto; }
  .match-review-form-actions { align-items: stretch; flex-direction: column; }
  .match-review-form-actions .btn { width: 100%; justify-content: center; }
  .match-review-form-actions .stories-delete-btn { margin-right: 0; }
  .match-review-history-comments { grid-template-columns: 1fr; }
}

/* Pre-match lineup planner */
.lineup-plan-page { display: grid; gap: 16px; }
.lineup-plan-toolbar { align-items: end; }
.lineup-plan-toolbar .stories-search { flex: 1 1 320px; }
.lineup-plan-list { display: grid; gap: 9px; margin-top: 12px; }
.lineup-plan-list-row {
  display: grid;
  grid-template-columns: minmax(140px, .7fr) minmax(240px, 1.5fr) minmax(120px, auto);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
}
.lineup-plan-form-card,
.lineup-plan-list-card { padding: 18px; }
.lineup-plan-board {
  display: grid;
  grid-template-columns: minmax(420px, 1.28fr) minmax(260px, .86fr);
  gap: 18px;
  margin-top: 6px;
}
.lineup-plan-pitch-wrap,
.lineup-plan-roster-wrap {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg-card) 89%, transparent);
}
.lineup-plan-roster-wrap .student-attendance-card-head { margin-bottom: 10px; }
.lineup-plan-roster-head {
  gap: 12px;
  align-items: center;
}
.lineup-plan-guest-switch {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}
.lineup-plan-guest-switch .fas-switch-label {
  font-size: 11px;
  white-space: nowrap;
}
.lineup-plan-guest-switch:has(input:disabled) {
  opacity: .55;
  cursor: not-allowed;
}
.lineup-plan-roster-tools { display: grid; gap: 8px; }
.lineup-plan-roster-wrap #lineup-plan-player-search { width: 100%; }
.lineup-plan-view-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
}
.lineup-plan-view-toggle .btn {
  min-width: 0;
  padding: 8px 10px;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}
.lineup-plan-view-toggle .btn.active {
  color: #07130b;
  background: var(--lime);
  box-shadow: 0 7px 18px rgba(65, 227, 106, .2);
}
.lineup-tactics-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.lineup-tactics-tool,
.lineup-tactics-style-btn {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.lineup-tactics-tool.is-on,
.lineup-tactics-style-btn.is-on {
  color: #07130b;
  background: var(--lime);
  border-color: transparent;
}
.lineup-tactics-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.lineup-tactics-swatches { display: flex; gap: 6px; }
.lineup-tactics-swatch {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--swatch, #fff);
  cursor: pointer;
}
.lineup-tactics-swatch.is-white {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.lineup-tactics-swatch.is-black {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.lineup-tactics-swatch.is-on {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
}
.lineup-tactics-style { display: flex; gap: 6px; }
.lineup-pitch {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 68 / 105;
  min-height: 420px;
  margin-inline: auto;
  overflow: visible;
  border: 3px solid #d8ffe4;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 100% 9%,
    linear-gradient(#3bb34a, #2f9a3d);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
  touch-action: none;
}
.lineup-pitch-markings,
.lineup-pitch-markings::before,
.lineup-pitch-markings::after {
  position: absolute;
  pointer-events: none;
}
.lineup-pitch-markings {
  inset: 5.5%;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 4px;
}
.lineup-pitch-markings::before {
  content: "";
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 16%;
  width: auto;
  top: auto;
  border: 2px solid rgba(255,255,255,.88);
  border-bottom: 0;
}
.lineup-pitch-markings::after {
  content: "";
  left: 18%;
  right: 18%;
  top: 0;
  height: 16%;
  width: auto;
  bottom: auto;
  border: 2px solid rgba(255,255,255,.88);
  border-top: 0;
}
.lineup-pitch::before {
  content: "";
  position: absolute;
  left: 5.5%;
  right: 5.5%;
  top: 50%;
  width: auto;
  height: 2px;
  background: rgba(255,255,255,.88);
}
.lineup-pitch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.lineup-tactics {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.lineup-pitch.is-drawing .lineup-tactics,
.lineup-pitch.is-selecting .lineup-tactics {
  z-index: 5;
  pointer-events: auto;
}
.lineup-pitch.is-drawing .lineup-slot-wrap {
  pointer-events: none;
}
.lineup-tactic-item { cursor: pointer; }
.lineup-tactic-handle { cursor: grab; }
.lineup-slot-wrap {
  position: absolute;
  z-index: 2;
  width: 52px;
  height: 52px;
  overflow: visible;
  transform: translate(-50%, -50%);
  touch-action: none;
  cursor: grab;
}
.lineup-slot-wrap:active { cursor: grabbing; }
.lineup-slot {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid #fff3a8;
  border-radius: 50%;
  background: #f2d23a;
  color: #163018;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
  pointer-events: none;
}
.lineup-slot-role {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.lineup-slot-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}
.lineup-slot-name {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: 3;
  display: block;
  max-width: 72px;
  padding: 2px 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 16, 10, .82);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
.lineup-slot-wrap.is-filled .lineup-slot { background: #ffe56a; }
.lineup-slot-wrap.is-picked .lineup-slot,
.lineup-bench-slot.is-filled { outline: 2px solid #fff7b0; }
.lineup-bench { margin-top: 12px; display: grid; gap: 8px; }
.lineup-bench-slots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.lineup-bench-slot {
  display: grid;
  gap: 2px;
  min-height: 52px;
  padding: 6px 4px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-card) 80%, transparent);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.lineup-bench-slot small { color: var(--muted); font-size: 10px; }
.lineup-bench-slot b { font-size: 11px; }
.lineup-bench-slot .lineup-slot-photo {
  width: 36px;
  height: 36px;
  margin: 2px auto 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.lineup-plan-players { display: grid; align-content: start; gap: 10px; margin-top: 10px; overflow: auto; }
.lineup-plan-players.is-list { gap: 8px; }
.lineup-plan-pos-group { display: grid; gap: 6px; }
.lineup-plan-pos-group h4 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 6px 2px;
  background: color-mix(in srgb, var(--bg-card) 94%, var(--bg));
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.lineup-plan-player {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
}
.lineup-plan-player.is-placed { border-color: rgba(65, 227, 106, .42); box-shadow: inset 3px 0 0 var(--lime); }
.lineup-plan-player.is-picked { border-color: color-mix(in srgb, var(--lime) 70%, var(--border)); }
.lineup-plan-player.is-guest { border-style: dashed; }
.lineup-guest-badge {
  display: inline-block;
  margin: 3px 0 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lime) 18%, transparent);
  color: var(--text);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
}
.lineup-guest-dot {
  display: block;
  color: var(--lime);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}
.lineup-slot-wrap.is-guest .lineup-slot {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lime) 55%, transparent);
}
.lineup-bench-slot.is-guest { border-style: dashed; }
.lineup-plan-player-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lineup-plan-player-pick b { display: block; }
.lineup-plan-player-pick small { display: block; color: var(--muted); }
.lineup-plan-player-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  color: var(--muted);
  font-size: 12px;
}
.lineup-plan-player-stats span { display: grid; gap: 1px; }
.lineup-plan-player-stats em { font-style: normal; font-weight: 800; color: var(--text); font-size: 15px; }
.lineup-plan-player-stats > small { grid-column: 1 / -1; }
.lineup-plan-player label { margin: 0; }
.lineup-plan-player.is-list {
  grid-template-columns: minmax(0, 1.3fr) minmax(108px, auto) minmax(108px, .9fr);
  align-items: center;
  gap: 8px 10px;
  padding: 8px 10px;
  border-radius: 10px;
}
.lineup-plan-player.is-list .lineup-plan-player-pick { grid-template-columns: minmax(0, 1fr); }
.lineup-plan-player.is-list .lineup-plan-player-stats { min-width: 108px; }
@media (min-width: 1051px) {
  .lineup-plan-roster-wrap {
    display: flex;
    flex-direction: column;
    height: 0;
    min-height: 100%;
    overflow: hidden;
  }
  .lineup-plan-players {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  .lineup-pitch {
    width: 100%;
    max-width: 560px;
    min-height: 560px;
  }
  .lineup-slot-wrap,
  .lineup-slot {
    width: 56px;
    height: 56px;
  }
}
@media (max-width: 1050px) {
  .lineup-plan-list-row { grid-template-columns: minmax(140px, .7fr) minmax(220px, 1.3fr); }
  .lineup-plan-list-row .match-review-list-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .lineup-plan-board { grid-template-columns: 1fr; }
  .lineup-bench-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .lineup-plan-form-card,
  .lineup-plan-list-card { padding: 14px; }
  .lineup-plan-list-row { grid-template-columns: 1fr; }
  .lineup-plan-list-row .match-review-list-actions { justify-content: flex-start; }
  .lineup-plan-list-row .match-review-list-actions .btn { width: auto; }
  .lineup-plan-roster-head { align-items: stretch; }
  .lineup-plan-guest-switch { width: 100%; }
  .lineup-slot-wrap,
  .lineup-slot { width: 44px; height: 44px; }
  .lineup-pitch { min-height: 360px; }
  .lineup-bench-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lineup-plan-form-actions { align-items: stretch; flex-direction: column; }
  .lineup-plan-form-actions .btn { width: 100%; justify-content: center; }
  .lineup-plan-form-actions .stories-delete-btn { margin-right: 0; }
  .lineup-plan-player.is-list {
    grid-template-columns: 1fr 1fr;
  }
  .lineup-plan-player.is-list .lineup-plan-player-pick { grid-column: 1 / -1; }
  .lineup-plan-player.is-list label { grid-column: 1 / -1; }
}

/* Match Stat Gamepad */
.match-stats-page,
.match-stats-session { display: grid; gap: 16px; }
.match-stats-toolbar { align-items: end; }
.match-stats-toolbar .stories-search { flex: 1 1 320px; }
.match-stats-toolbar .stories-filter[hidden] { display: none !important; }
#match-stats-feedback:empty { display: none; }
.match-stats-list-card,
.match-stats-settings-card,
.match-stats-session > .card,
.match-stats-lower-grid > .card { padding: 18px; }
.match-stats-list,
.match-stats-definition-list,
.match-stats-events,
.match-stats-player-summary { display: grid; gap: 9px; margin-top: 12px; }
#match-stats-events {
  max-height: 276px;
  overflow: auto;
  align-content: start;
}
.match-stats-list {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.match-stats-list-row {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "date status"
    "main main"
    "action action";
  grid-template-rows: auto 1fr auto;
  align-content: start;
  align-items: start;
  gap: 14px 10px;
  min-height: 210px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--lime) 10%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, var(--lime) 4%), var(--panel));
  box-shadow: inset 3px 0 color-mix(in srgb, var(--lime) 75%, transparent);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.match-stats-list > .story-field-hint { grid-column: 1 / -1; }
.match-stats-list-row:hover {
  border-color: color-mix(in srgb, var(--lime) 38%, var(--line));
  box-shadow:
    inset 3px 0 var(--lime),
    0 12px 26px color-mix(in srgb, #000 14%, transparent);
  transform: translateY(-2px);
}
.match-stats-list-row > .match-review-date-badge {
  grid-area: date;
  min-width: 0;
}
.match-stats-list-row > .match-review-date-badge b {
  font-size: 14px;
  font-weight: 900;
}
.match-stats-list-row.is-live {
  border-color: color-mix(in srgb, #52d273 64%, var(--line));
  box-shadow:
    inset 3px 0 #52d273,
    0 0 0 1px color-mix(in srgb, #52d273 16%, transparent);
}
.match-stats-list-main {
  grid-area: main;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.match-stats-list-main h4,
.match-stats-list-main span,
.match-stats-list-main small { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-stats-list-main h4 { color: var(--text); font-size: 18px; line-height: 1.25; }
.match-stats-list-main span,
.match-stats-list-main small { color: var(--muted); font-size: 11px; }
.match-stats-status {
  grid-area: status;
  justify-self: end;
  max-width: 100%;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #2a3530;
  color: #d9ff78;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.match-stats-status.is-new { background: #24302b; color: #c7ff3d; border-color: #7ea31f; }
.match-stats-status.is-ready { background: #c7ff3d; color: #13200f; }
.match-stats-status.is-live { background: #2ee36a; color: #06210f; }
.match-stats-status.is-paused { background: #ffb347; color: #2a1800; }
.match-stats-status.is-completed { background: #5eb8ff; color: #062033; }
.match-stats-status.is-graded { background: #d4b3ff; color: #2a1050; }
.match-stats-open-btn {
  grid-area: action;
  align-self: end;
  width: 100%;
  min-height: 40px;
  background: #4f7598;
  border-color: #3d607f;
  color: #ffffff;
  font-weight: 900;
}
.match-stats-open-btn:hover {
  background: #3d607f;
  border-color: #304d68;
  color: #ffffff;
}
.match-stats-definition-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.match-stats-definition-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.match-stats-definition-row.is-disabled { opacity: .58; }
.match-stats-definition-row > div { display: grid; gap: 2px; }
.match-stats-definition-row small { color: var(--muted); font-size: 10px; }
.match-stats-definition-color {
  width: 10px;
  height: 34px;
  border-radius: 999px;
  background: var(--stat-color);
}
.match-stats-definition-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.match-stats-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.match-stats-session-head > div { display: grid; gap: 3px; }
.match-stats-session-head span { color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.match-stats-session-head h3,
.match-stats-session-head p { margin: 0; }
.match-stats-session-head p { color: var(--muted); font-size: 11px; }
.match-stats-clock-card {
  position: sticky;
  top: 8px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-color: color-mix(in srgb, var(--lime) 28%, var(--line));
  backdrop-filter: blur(16px);
}
.match-stats-clock {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 14px;
}
.match-stats-clock > span { color: var(--muted); font-size: 11px; }
.match-stats-clock > span b { color: var(--text); }
#match-stats-live-score { font-variant-numeric: tabular-nums; }
.match-stats-clock > strong {
  grid-row: 1 / 3;
  grid-column: 2;
  min-width: 132px;
  color: var(--text);
  font: 900 40px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.match-stats-clock > em {
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.match-stats-clock > em.is-saved { color: #52d273; }
.match-stats-clock > em.is-pending { color: #ffb347; }
.match-stats-clock > em.is-error { color: #ff627d; }
.match-stats-clock-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.match-stats-complete-btn {
  border: 1px solid #f59e0b;
  background: #f59e0b;
  color: #1f1300;
  font-weight: 850;
}
.match-stats-complete-btn:hover:not(:disabled) {
  border-color: #fbbf24;
  background: #fbbf24;
}
.match-stats-complete-btn:disabled {
  opacity: 1;
  cursor: not-allowed;
  border-color: #46504a;
  background: #303632;
  color: #c7d0ca;
  box-shadow: none;
}
html[data-fas-theme="light"] body.fas-backend .match-stats-complete-btn:disabled {
  border-color: #b8c3bc;
  background: #e5eae7;
  color: #536059;
}
.match-stats-clock-expand { display: none; }
.match-stats-match-setup > summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 850;
}
.match-stats-match-setup[open] > summary { margin-bottom: 16px; }
.match-stats-match-setup .settings-fields { margin-top: 0; }
#match-stats-jersey-editor > h4 { margin: 4px 0 10px; color: var(--text); }
.match-stats-jersey-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.match-stats-jersey-grid label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.match-stats-jersey-grid label span {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-stats-jersey-grid input { min-width: 0; text-align: center; }
body.fas-gamepad-expanded { overflow: hidden; }
body.fas-gamepad-expanded .sidebar,
body.fas-gamepad-expanded .topbar {
  visibility: hidden;
  pointer-events: none;
}
.match-stats-gamepad-card {
  position: relative;
  overflow: visible;
  display: grid;
  gap: 10px;
  color: #eef4ef;
  background:
    radial-gradient(120% 80% at 50% 0%, #2a3a32, #151c19 54%, #101614);
  border-color: #1a2420;
}
html[data-fas-theme="light"] body.fas-backend .match-stats-gamepad-card {
  color: #eef4ef;
  background:
    radial-gradient(120% 80% at 50% 0%, #2a3a32, #151c19 54%, #101614);
  border-color: #1a2420;
  box-shadow: none;
}
html[data-fas-theme="light"] body.fas-backend .match-stats-open-btn {
  background: #4f7598;
  border-color: #3d607f;
  color: #ffffff;
}
html[data-fas-theme="light"] body.fas-backend .match-stats-open-btn:hover {
  background: #3d607f;
  border-color: #304d68;
  color: #ffffff;
}
html[data-fas-theme="light"] body.fas-backend .match-stats-list-row {
  border-color: #cbd6cf;
  background:
    radial-gradient(circle at 100% 0%, rgba(35, 147, 70, 0.1), transparent 42%),
    linear-gradient(145deg, #ffffff, #f4f8f5);
  box-shadow: inset 3px 0 #239346;
}
html[data-fas-theme="light"] body.fas-backend .match-stats-list-row:hover {
  border-color: #76a986;
  box-shadow:
    inset 3px 0 #16863a,
    0 12px 26px rgba(24, 56, 34, 0.12);
}
html[data-fas-theme="light"] body.fas-backend .match-stats-status.is-new {
  background: #e8f6d8;
  color: #3a6b00;
  border-color: #8fbf2a;
}
.match-stats-gamepad-hud {
  display: grid;
  gap: 8px;
}
.match-stats-gamepad-hud-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.match-stats-gamepad-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.match-stats-gamepad-live {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #0c1210;
  font-variant-numeric: tabular-nums;
}
.match-stats-gamepad-live strong {
  color: #c7ff3d;
  font: 900 22px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.match-stats-gamepad-live span { color: #eef4ef; font-weight: 800; }
.match-stats-gamepad-live em {
  color: #ffb347;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.match-stats-gamepad-card.is-paused .match-stats-gamepad-live { background: #2a1c0c; }
.match-stats-gamepad-card.is-paused .match-stats-gamepad-live strong { color: #ffb347; }
.match-stats-pad-btn {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #3d4c44;
  border-radius: 999px;
  background: #24302b;
  color: #eef4ef;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.match-stats-pad-btn:disabled { cursor: not-allowed; opacity: .38; }
.match-stats-pad-btn.is-pause {
  background: #ffb347;
  border-color: #ffd08a;
  color: #2a1800;
  box-shadow: 0 3px 0 #8a4f00;
}
.match-stats-pad-btn.is-start,
.match-stats-pad-btn.is-resume,
.match-stats-pad-btn.is-full {
  background: #c7ff3d;
  border-color: #e8ff8a;
  color: #13200f;
  box-shadow: 0 3px 0 #4d7310;
}
.match-stats-expand-btn {
  min-height: 48px;
  padding: 0 16px;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 3px 0 #4d7310;
}
.match-stats-rotate-hint {
  margin: 0 0 6px;
  color: #ffd08a;
  font-size: 11px;
  font-weight: 700;
}
.match-stats-player-roster {
  display: grid;
  grid-template-columns: repeat(var(--roster-count, 7), minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.match-stats-player-chip {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eef4ef;
  cursor: pointer;
  touch-action: manipulation;
}
.match-stats-player-face {
  position: relative;
  width: min(72px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid #44554c;
  border-radius: 50%;
  background: #1e3a24;
  box-shadow: 0 3px 0 #0d1311;
}
.match-stats-player-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.match-stats-player-face.is-empty {
  display: grid;
  place-items: center;
  color: #d9ff78;
  font-size: 16px;
  font-weight: 900;
}
.match-stats-player-chip strong {
  position: relative;
  margin-top: -16px;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #0c1210;
  color: #c7ff3d;
  font-size: 12px;
  line-height: 1.3;
  box-shadow: 0 0 0 2px #151c19;
}
.match-stats-player-chip > span:last-child {
  max-width: 100%;
  overflow: hidden;
  color: #c5d2c9;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-stats-player-chip.is-selected .match-stats-player-face {
  border-color: #d9ff78;
  box-shadow: 0 0 0 3px color-mix(in srgb, #c7ff3d 45%, transparent), 0 3px 0 #4d7310;
}
.match-stats-player-chip.is-selected strong {
  background: #c7ff3d;
  color: #13200f;
}
.match-stats-player-chip.is-selected > span:last-child { color: #e8ff8a; }
.match-stats-player-chip:active .match-stats-player-face { transform: translateY(2px); }
.match-stats-gamepad-stage {
  position: relative;
  min-height: 220px;
  display: grid;
}
.match-stats-gamepad-stage > * { grid-area: 1 / 1; }
.match-stats-button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  align-content: start;
}
.match-stats-action-group {
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--stat-color) 72%, #1a2420);
  border-radius: 16px;
  background: color-mix(in srgb, var(--stat-color) 28%, #101614);
}
.match-stats-action-group h4 {
  margin: 0 0 8px;
  color: #f4fff6;
  font-size: 12px;
}
.match-stats-action-group > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
}
.match-stats-action-button {
  min-height: 64px;
  padding: 10px 8px;
  border: 2px solid color-mix(in srgb, white 28%, var(--stat-color));
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 24%, color-mix(in srgb, white 26%, var(--stat-color)), var(--stat-color) 58%, color-mix(in srgb, black 10%, var(--stat-color)));
  color: #141008;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  box-shadow:
    0 5px 0 color-mix(in srgb, black 42%, var(--stat-color)),
    0 0 0 1px color-mix(in srgb, black 18%, var(--stat-color)),
    inset 0 2px 0 color-mix(in srgb, white 48%, transparent);
}
.match-stats-action-button:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 color-mix(in srgb, black 32%, var(--stat-color));
}
.match-stats-action-button:disabled { cursor: not-allowed; opacity: .38; }
.match-stats-gamepad-card.is-subbing .match-stats-button-grid {
  opacity: .35;
  pointer-events: none;
}
.match-stats-sub-sheet {
  z-index: 3;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #5a4630;
  border-radius: 18px;
  background: #241c14;
}
.match-stats-sub-sheet[hidden] { display: none !important; }
.match-stats-sub-sheet > p {
  margin: 0;
  color: #ffd08a;
  font-size: 12px;
  font-weight: 700;
}
.match-stats-sub-sheet .match-stats-sub-fields label { color: #eef4ef; }
.match-stats-sub-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}
.match-stats-sub-sheet .match-stats-sub-fields {
  max-width: 720px;
}
.match-stats-live-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #41e36a;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.match-stats-live-mark::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #41e36a;
  animation: match-stats-live-pulse 1.1s ease-in-out infinite;
}
@keyframes match-stats-live-pulse {
  50% { opacity: .25; }
}
.match-stats-last-event {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #102016;
  color: #c7ff3d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.match-stats-last-event[hidden] { display: none; }
.match-stats-action-button { position: relative; }
.match-stats-action-button.is-used {
  outline: 3px solid #c7ff3d;
  outline-offset: 1px;
}
.match-stats-plus {
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 4;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  animation: match-stats-plus-float .7s ease-out forwards;
}
@keyframes match-stats-plus-float {
  from { opacity: 1; transform: translate(-50%, 6px); }
  to { opacity: 0; transform: translate(-50%, -26px); }
}
.match-stats-gamepad-card .settings-feedback { color: #ffd08a; }
.match-stats-sub-sheet select { min-height: 48px; }
.match-stats-gamepad-card.is-expanded,
.match-stats-gamepad-card:fullscreen,
.match-stats-gamepad-card:-webkit-full-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding:
    calc(8px + env(safe-area-inset-top, 0px))
    calc(10px + env(safe-area-inset-right, 0px))
    calc(8px + env(safe-area-inset-bottom, 0px))
    calc(10px + env(safe-area-inset-left, 0px));
}
.match-stats-gamepad-card.is-expanded .match-stats-last-event,
.match-stats-gamepad-card:fullscreen .match-stats-last-event,
.match-stats-gamepad-card:-webkit-full-screen .match-stats-last-event {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 10px;
  background: #102016;
  font-size: 14px;
  line-height: 1.35;
}
.match-stats-gamepad-card.is-expanded .match-stats-gamepad-stage,
.match-stats-gamepad-card:fullscreen .match-stats-gamepad-stage,
.match-stats-gamepad-card:-webkit-full-screen .match-stats-gamepad-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.match-stats-gamepad-card.is-expanded .match-stats-button-grid,
.match-stats-gamepad-card:fullscreen .match-stats-button-grid,
.match-stats-gamepad-card:-webkit-full-screen .match-stats-button-grid {
  height: auto;
  min-height: 100%;
  align-content: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(118px, auto);
  gap: 8px;
}
.match-stats-gamepad-card.is-expanded .match-stats-action-group,
.match-stats-gamepad-card:fullscreen .match-stats-action-group,
.match-stats-gamepad-card:-webkit-full-screen .match-stats-action-group {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.match-stats-gamepad-card.is-expanded .match-stats-action-group h4,
.match-stats-gamepad-card:fullscreen .match-stats-action-group h4,
.match-stats-gamepad-card:-webkit-full-screen .match-stats-action-group h4 {
  margin: 0 0 6px;
  flex: 0 0 auto;
}
.match-stats-gamepad-card.is-expanded .match-stats-action-group > div,
.match-stats-gamepad-card:fullscreen .match-stats-action-group > div,
.match-stats-gamepad-card:-webkit-full-screen .match-stats-action-group > div {
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  grid-auto-rows: minmax(72px, 1fr);
  gap: 8px;
  align-content: stretch;
}
.match-stats-gamepad-card.is-expanded .match-stats-action-button,
.match-stats-gamepad-card:fullscreen .match-stats-action-button,
.match-stats-gamepad-card:-webkit-full-screen .match-stats-action-button {
  min-height: 72px;
  height: 100%;
  font-size: 16px;
}
.match-stats-gamepad-card.is-expanded .match-stats-pad-btn,
.match-stats-gamepad-card:fullscreen .match-stats-pad-btn,
.match-stats-gamepad-card:-webkit-full-screen .match-stats-pad-btn {
  min-height: 48px;
  padding: 0 16px;
  font-size: 15px;
}
.match-stats-sub-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.match-stats-sub-fields label { display: grid; gap: 6px; color: var(--text); font-size: 11px; }
.match-stats-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 16px;
}
.match-stats-played-time,
.match-stats-summary-row,
.match-stats-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.match-stats-summary-row span {
  padding-left: 9px;
  border-left: 3px solid var(--stat-color);
  color: var(--muted);
  font-size: 11px;
}
.match-stats-summary-row b { color: var(--text); font-size: 12px; text-align: right; }
.match-stats-event-row { justify-content: flex-start; }
.match-stats-event-row time {
  width: 50px;
  color: var(--lime);
  font: 800 11px ui-monospace, SFMono-Regular, Consolas, monospace;
}
.match-stats-event-row > div { min-width: 0; display: grid; gap: 2px; flex: 1; }
.match-stats-event-row b,
.match-stats-event-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-stats-event-row b { color: var(--text); font-size: 11px; }
.match-stats-event-row span { color: var(--muted); font-size: 10px; }
.match-stats-event-row em { color: #ffb347; font-size: 9px; font-style: normal; }
.match-stats-event-row.is-pending { border-style: dashed; }
.match-stats-event-delete { flex: 0 0 auto; padding: 4px 8px; font-size: 11px; }
.match-stats-final-players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.match-stats-final-players article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.match-stats-final-players header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.match-stats-final-players header > strong {
  min-width: 54px;
  padding: 9px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--lime) 13%, transparent);
  color: var(--text);
  text-align: center;
}
.match-stats-final-players header > div { display: grid; gap: 2px; }
.match-stats-final-players small { color: var(--muted); }
.match-stats-final-players article > div { display: flex; flex-wrap: wrap; gap: 6px; }
.match-stats-final-players article > div > span {
  padding: 5px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--muted) 9%, transparent);
  color: var(--muted);
  font-size: 10px;
}
.match-stats-final-players article > div b { color: var(--text); }

@media (max-width: 1000px) {
  .match-stats-jersey-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .match-stats-list-card,
  .match-stats-settings-card,
  .match-stats-session > .card,
  .match-stats-lower-grid > .card { padding: 13px; }
  .match-stats-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .match-stats-list-row { min-height: 0; gap: 13px 8px; padding: 14px; }
  .match-stats-list-row .match-stats-status {
    justify-self: end;
    max-width: 100%;
  }
  .match-stats-list-row > .btn {
    width: 100%;
    min-height: 46px;
    margin: 0;
    justify-self: stretch;
  }
  .match-stats-definition-row { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .match-stats-definition-actions { grid-column: 2; justify-self: start; }
  .match-stats-definition-row > .fas-switch { grid-column: 3; grid-row: 1 / 3; }
  .match-stats-session-head { align-items: flex-start; flex-direction: column; }
  .match-stats-session-head > .btn { width: 100%; }
  .match-stats-clock-card { top: 4px; align-items: stretch; flex-direction: column; }
  .match-stats-clock { justify-content: center; }
  .match-stats-clock-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .match-stats-clock-actions .btn { width: 100%; justify-content: center; }
  .match-stats-clock-expand {
    display: inline-flex;
    grid-column: 1 / -1;
    min-height: 52px;
    font-size: 16px;
    font-weight: 900;
  }
  .match-stats-gamepad-hud-top { grid-template-columns: 1fr; }
  .match-stats-expand-btn {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
  }
  .match-stats-jersey-grid { grid-template-columns: 1fr; }
  .match-stats-button-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .match-stats-action-group { padding: 8px; }
  .match-stats-action-button { min-height: 72px; font-size: 16px; }
  .match-stats-pad-btn { min-height: 48px; font-size: 15px; }
  .match-stats-sub-fields,
  .match-stats-lower-grid,
  .match-stats-final-players { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .match-stats-clock > strong { min-width: 116px; font-size: 36px; }
}
@media (orientation: portrait) {
  .match-stats-gamepad-card.is-expanded .match-stats-button-grid,
  .match-stats-gamepad-card:fullscreen .match-stats-button-grid,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-button-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(128px, auto);
  }
  .match-stats-gamepad-card.is-expanded .match-stats-action-button,
  .match-stats-gamepad-card:fullscreen .match-stats-action-button,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-action-button {
    min-height: 76px;
    font-size: 17px;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .match-stats-gamepad-card.is-expanded,
  .match-stats-gamepad-card:fullscreen,
  .match-stats-gamepad-card:-webkit-full-screen {
    gap: 4px;
    padding:
      calc(6px + env(safe-area-inset-top, 0px))
      calc(10px + env(safe-area-inset-right, 0px))
      calc(6px + env(safe-area-inset-bottom, 0px))
      calc(10px + env(safe-area-inset-left, 0px));
  }
  .match-stats-gamepad-card.is-expanded .match-stats-gamepad-hud,
  .match-stats-gamepad-card:fullscreen .match-stats-gamepad-hud,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-gamepad-hud {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-gamepad-hud-top,
  .match-stats-gamepad-card:fullscreen .match-stats-gamepad-hud-top,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-gamepad-hud-top {
    display: contents;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-gamepad-live,
  .match-stats-gamepad-card:fullscreen .match-stats-gamepad-live,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-gamepad-live {
    padding: 8px 12px;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-gamepad-tools,
  .match-stats-gamepad-card:fullscreen .match-stats-gamepad-tools,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-gamepad-tools {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-expand-btn,
  .match-stats-gamepad-card:fullscreen .match-stats-expand-btn,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-expand-btn {
    width: auto;
    min-width: 132px;
    min-height: 48px;
    font-size: 14px;
    justify-self: start;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-gamepad-live strong,
  .match-stats-gamepad-card:fullscreen .match-stats-gamepad-live strong,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-gamepad-live strong {
    font-size: 20px;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-player-roster,
  .match-stats-gamepad-card:fullscreen .match-stats-player-roster,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-player-roster {
    gap: 4px;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-player-chip,
  .match-stats-gamepad-card:fullscreen .match-stats-player-chip,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-player-chip {
    gap: 0;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-player-face,
  .match-stats-gamepad-card:fullscreen .match-stats-player-face,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-player-face {
    width: min(44px, 100%);
  }
  .match-stats-gamepad-card.is-expanded .match-stats-player-chip > span:last-child,
  .match-stats-gamepad-card:fullscreen .match-stats-player-chip > span:last-child,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-player-chip > span:last-child {
    display: none;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-player-chip strong,
  .match-stats-gamepad-card:fullscreen .match-stats-player-chip strong,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-player-chip strong {
    margin-top: -12px;
    font-size: 11px;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-last-event,
  .match-stats-gamepad-card:fullscreen .match-stats-last-event,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-last-event {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #102016;
    font-size: 14px;
    line-height: 1.35;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-button-grid,
  .match-stats-gamepad-card:fullscreen .match-stats-button-grid,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-button-grid {
    grid-auto-rows: minmax(108px, 1fr);
  }
  .match-stats-gamepad-card.is-expanded .match-stats-action-group,
  .match-stats-gamepad-card:fullscreen .match-stats-action-group,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-action-group {
    min-height: 108px;
    padding: 6px;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-action-group h4,
  .match-stats-gamepad-card:fullscreen .match-stats-action-group h4,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-action-group h4 {
    margin: 0 0 4px;
    font-size: 11px;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-action-group > div,
  .match-stats-gamepad-card:fullscreen .match-stats-action-group > div,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-action-group > div {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    grid-auto-rows: minmax(76px, 1fr);
    gap: 6px;
  }
  .match-stats-gamepad-card.is-expanded .match-stats-action-button,
  .match-stats-gamepad-card:fullscreen .match-stats-action-button,
  .match-stats-gamepad-card:-webkit-full-screen .match-stats-action-button {
    min-height: 76px;
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .match-stats-player-chip,
  .match-stats-action-button,
  .match-stats-plus,
  .match-stats-live-mark::before { transition: none; animation: none; }
}
.match-review-live-stats {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--lime) 24%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--lime) 5%, transparent);
}
.match-review-live-stats > strong { color: var(--text); font-size: 11px; }
.match-review-live-stats > div { display: flex; flex-wrap: wrap; gap: 6px; }
.match-review-live-stats span {
  padding: 5px 7px;
  border-left: 3px solid var(--stat-color);
  border-radius: 7px;
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  color: var(--muted);
  font-size: 10px;
}
.match-review-live-stats span b { color: var(--text); }
.match-review-live-stats em { color: var(--muted); font-size: 10px; }

.player-comparison-page { display: grid; gap: 18px; min-width: 0; }
.player-comparison-hero { margin-bottom: 0; }
.player-comparison-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(168px, 220px));
  justify-content: start;
  align-items: end;
  gap: 14px 16px;
  margin: 0 0 4px;
}
.player-comparison-toolbar > .stories-filter {
  flex: none;
  width: auto;
  min-width: 0;
  max-width: none;
}
.player-comparison-custom-range {
  display: contents;
}
.player-comparison-custom-range[hidden] {
  display: none;
}
.player-comparison-custom-range > label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.player-comparison-custom-range .thai-calendar-picker,
.player-comparison-custom-range .thai-calendar-trigger {
  width: 100%;
  max-width: 220px;
}
#player-comparison-months-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
}
#player-comparison-months-wrap[hidden] {
  display: none;
}
#player-comparison-months-wrap > input,
.player-comparison-toolbar input[type="number"] {
  flex: 1 0 100%;
  width: 100%;
  max-width: 220px;
  margin-top: 6px;
}
.player-comparison-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 12px;
}
.player-comparison-picker-head h3,
.player-comparison-picker-head p { margin: 0; }
#player-comparison-feedback { margin: 0 0 16px; }
.player-comparison-players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.player-comparison-player {
  display: grid;
  grid-template-columns: auto 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
  color: var(--text);
  cursor: pointer;
}
.player-comparison-player:hover,
.player-comparison-player:focus-within,
.player-comparison-player.is-selected { border-color: var(--lime); }
.player-comparison-player.is-selected { box-shadow: inset 0 0 0 1px var(--lime); }
.player-comparison-player.is-disabled { cursor: not-allowed; opacity: 0.52; }
.player-comparison-player input { width: 18px; height: 18px; accent-color: var(--lime); }
.player-comparison-avatar,
.player-comparison-avatar img { width: 46px; height: 46px; border-radius: 50%; }
.player-comparison-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(32, 228, 30, 0.12);
  color: var(--lime);
  font-size: 12px;
  font-weight: 800;
}
.player-comparison-avatar img { object-fit: cover; }
.player-comparison-player-name { min-width: 0; display: grid; gap: 3px; }
.player-comparison-player-name strong,
.player-comparison-player-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-comparison-player-name small { color: var(--muted); font-size: 11px; }
.player-comparison-player > b { color: var(--muted); font-size: 11px; }
.player-comparison-player.is-selected > b { color: var(--lime); }
.player-comparison-empty,
.player-comparison-chart-empty {
  margin: 0;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}
.player-comparison-results { display: grid; gap: 18px; min-width: 0; scroll-margin-top: 16px; }
.player-comparison-section { display: grid; gap: 16px; min-width: 0; }
.player-comparison-section .card-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.player-comparison-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.player-comparison-summary-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
}
.player-comparison-summary-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 12px;
}
.player-comparison-summary-head i,
.player-comparison-legend i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--comparison-color);
}
.player-comparison-summary-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-comparison-summary-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}
.player-comparison-summary-card dl div {
  min-width: 0;
  padding: 8px;
  border-radius: 10px;
  background: var(--input-bg);
}
.player-comparison-summary-card dt { color: var(--muted); font-size: 10px; }
.player-comparison-summary-card dd {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}
.player-comparison-summary-card > small {
  display: block;
  overflow: hidden;
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-comparison-summary-card > p { color: var(--muted); }
.chart-color-1 { --comparison-color: var(--chart-1); }
.chart-color-2 { --comparison-color: var(--chart-2); }
.chart-color-3 { --comparison-color: var(--chart-3); }
.player-comparison-summary-card .is-up { color: var(--lime); }
.player-comparison-summary-card .is-down { color: var(--danger); }
.player-comparison-summary-card .is-same,
.player-comparison-summary-card .is-muted,
.player-comparison-bar-row .is-muted { color: var(--muted); }
.player-comparison-chart-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
}
.player-comparison-chart-card > h4 { margin: 0 0 14px; }
.player-comparison-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.player-comparison-chart-head h4,
.player-comparison-chart-head p { margin: 0; }
.player-comparison-chart-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.player-comparison-chart-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
}
.player-comparison-chart-switch button {
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.player-comparison-chart-switch button:hover,
.player-comparison-chart-switch button:focus-visible { color: var(--text); }
.player-comparison-chart-switch button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
}
.player-comparison-chart-switch button.is-active {
  background: var(--lime-dim);
  color: var(--lime);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 42%, transparent);
}
.player-comparison-bars { display: grid; gap: 16px; }
.player-comparison-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.player-comparison-bar-row > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-comparison-bar-line {
  display: grid;
  grid-template-columns: 42px minmax(70px, 1fr) 60px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}
.player-comparison-bar-line i {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--input-bg);
}
.player-comparison-bar-line i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--comparison-color);
}
.player-comparison-bar-line.is-average i b { opacity: 0.48; }
.player-comparison-bar-line em {
  color: var(--text);
  font-style: normal;
  font-weight: 800;
  text-align: right;
}
.player-comparison-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.player-comparison-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.player-comparison-line-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.player-comparison-line-scroll svg {
  display: block;
  width: 100%;
}
.player-comparison-grid line { stroke: var(--border); }
.player-comparison-grid text,
.player-comparison-axis text { fill: var(--muted); font-size: 10px; }
.player-comparison-column text {
  font-size: 10px;
  font-weight: 800;
}
@media (max-width: 900px) {
  .player-comparison-summary { grid-template-columns: 1fr; }
  .player-comparison-bar-row { grid-template-columns: 1fr; gap: 7px; }
}
@media (max-width: 720px) {
  .player-comparison-page { gap: 12px; }
  .player-comparison-page > .card,
  .player-comparison-section { padding: 12px; }
  .player-comparison-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .player-comparison-toolbar > label,
  .player-comparison-toolbar input[type="number"],
  .player-comparison-custom-range .thai-calendar-picker,
  .player-comparison-custom-range .thai-calendar-trigger { width: 100%; max-width: none; }
  .player-comparison-picker-head { align-items: stretch; flex-direction: column; }
  .player-comparison-picker-head .btn { width: 100%; }
  .player-comparison-players { grid-template-columns: 1fr; }
  .player-comparison-player {
    grid-template-columns: auto 42px minmax(0, 1fr) auto;
    padding: 10px;
  }
  .player-comparison-avatar,
  .player-comparison-avatar img { width: 42px; height: 42px; }
  .player-comparison-summary-card dl { grid-template-columns: 1fr 1fr; }
  .player-comparison-chart-card { padding: 10px; }
  .player-comparison-chart-head { align-items: stretch; flex-direction: column; }
  .player-comparison-chart-switch { align-self: stretch; width: 100%; }
  .player-comparison-chart-switch button {
    flex: 1 1 50%;
    min-height: 44px;
    padding: 9px 8px;
    font-size: 12px;
  }
  .player-comparison-legend { gap: 8px 12px; }
  .player-comparison-legend span { font-size: 10px; }
  .player-comparison-line-scroll {
    margin-right: -2px;
    padding-bottom: 8px;
  }
  .player-comparison-line-scroll svg { height: 300px; }
}
@media (max-width: 390px) {
  .player-comparison-page > .card,
  .player-comparison-section { padding: 10px; }
  .player-comparison-summary-card { padding: 11px; }
  .player-comparison-summary-card dl { gap: 7px; }
  .player-comparison-summary-card dl div { padding: 7px; }
  .player-comparison-chart-card { padding: 8px; }
  .player-comparison-line-scroll svg { height: 280px; }
}

.training-program-page { display: grid; gap: 18px; min-width: 0; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
.training-program-desk,
.training-program-family,
.training-program-toolbar,
.training-program-toolbar > label,
.training-program-editor,
.training-program-formats,
.training-program-history,
.training-program-family-list {
  min-width: 0;
  max-width: 100%;
}
.training-program-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-card);
}
.training-program-hero-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--lime-dim);
  color: var(--lime);
}
.training-program-hero span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.training-program-hero h2,
.training-program-hero p { margin: 0; }
.training-program-hero p { color: var(--muted); font-size: 13px; }
.training-program-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}
.training-program-toolbar > label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.training-program-toolbar #training-program-academy-wrap {
  grid-column: 1 / -1;
}
.training-program-toolbar select,
.training-program-toolbar .thai-calendar-trigger {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  min-height: 46px;
}
.training-program-toolbar .thai-calendar-picker {
  width: 100%;
}
.training-program-week-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "prev period next"
    "copy copy copy";
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.training-program-week-nav { display: contents; }
.training-program-period { grid-area: period; }
.training-program-week-bar #training-program-prev-week { grid-area: prev; }
.training-program-week-bar #training-program-next-week { grid-area: next; }
.training-program-week-bar #training-program-copy-week {
  grid-area: copy;
  justify-self: end;
}
.training-program-family .training-program-week-bar {
  grid-template-areas: "prev period next";
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.training-program-period {
  margin: 0;
  color: var(--lime);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}
.training-program-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
  width: 100%;
}
.training-program-day {
  display: grid;
  gap: 2px;
  justify-items: center;
  align-content: center;
  min-width: 0;
  min-height: 64px;
  padding: 8px 2px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.training-program-day strong,
.training-program-day span,
.training-program-day small {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.training-program-day strong { font-size: 12px; }
.training-program-day span { font-size: 18px; font-weight: 800; line-height: 1.1; }
.training-program-day small { color: var(--muted); font-size: 11px; }
.training-program-day.is-today {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 42%, transparent);
}
.training-program-day.is-set {
  background: color-mix(in srgb, var(--lime) 14%, var(--bg-card-2));
  border-color: color-mix(in srgb, var(--lime) 58%, var(--border));
}
.training-program-day.is-set span { color: var(--lime); }
.training-program-day.is-set small { color: var(--lime); font-weight: 700; }
.training-program-day.is-on {
  background: color-mix(in srgb, var(--info) 14%, var(--bg-card-2));
  border-color: color-mix(in srgb, var(--info) 70%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 48%, transparent);
}
.training-program-day.is-on span { color: var(--info); }
.training-program-day.is-on small { color: var(--info); font-weight: 700; }
.training-program-day.is-on.is-set {
  background: color-mix(in srgb, var(--info) 16%, var(--bg-card-2));
  border-color: color-mix(in srgb, var(--info) 78%, var(--border));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--info) 58%, transparent);
}
.training-program-day.is-on.is-set small { color: var(--lime); }
.training-program-day-preview { display: none; }
.training-program-day-block + .training-program-day-block { margin-top: 12px; }
.training-program-day-block strong { display: block; margin-bottom: 4px; }
.training-program-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.training-program-editor-head h3,
.training-program-editor-head p { margin: 0; }
.training-program-format-search { margin: 0 0 12px; }
.training-program-format-search input[type="search"] { width: 100%; min-height: 46px; }
.training-program-formats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.training-program-format {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.training-program-format input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: 0 0 auto;
}
.training-program-format.is-on {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 42%, transparent);
  background: color-mix(in srgb, var(--lime) 8%, var(--bg-card-2));
}
.training-program-format strong,
.training-program-format small { display: block; }
.training-program-format small { color: var(--muted); font-size: 12px; margin-top: 3px; }
.training-program-format em {
  min-width: 22px;
  color: var(--lime);
  font-style: normal;
  font-weight: 800;
  text-align: right;
}
.training-program-item-list {
  margin: 8px 0 0;
  padding-left: 20px;
}
.training-program-item-list span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.training-program-empty { color: var(--muted); margin: 0; }
.training-program-history-wrap h3 { margin: 20px 0 10px; }
.training-program-history,
.training-program-family-list {
  display: grid;
  gap: 12px;
}
.training-program-history-card,
.training-program-family-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
}
.training-program-history-card.is-set {
  border-color: color-mix(in srgb, var(--lime) 48%, var(--border));
  background: color-mix(in srgb, var(--lime) 8%, var(--bg-card-2));
}
.training-program-history-more summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.training-program-history-card header,
.training-program-family-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.training-program-family-card header > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex-wrap: nowrap;
}
.training-program-family-card header > div strong {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.training-program-family-card header span,
.training-program-history-card header span {
  color: var(--muted);
  font-size: 12px;
}
.training-program-family-card header > div span {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
.training-program-family-card details { margin-top: 10px; }
.training-program-family-card summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
@media (max-width: 800px) {
  .training-program-page { gap: 12px; }
  .training-program-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
    border-radius: 16px;
  }
  .training-program-hero-icon { display: none; }
  .training-program-hero h2 { font-size: 18px; }
  .training-program-hero p { font-size: 12px; }
  .training-program-desk,
  .training-program-family {
    padding: 14px 12px max(16px, env(safe-area-inset-bottom, 0px));
  }
  .training-program-toolbar,
  .training-program-formats { grid-template-columns: 1fr; }
  .training-program-toolbar select,
  .training-program-toolbar .thai-calendar-trigger,
  .training-program-week-bar .btn,
  .training-program-note-fields .btn,
  .training-program-format {
    min-height: 44px;
  }
  .training-program-week-bar {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "period period"
      "prev next"
      "copy copy";
  }
  .training-program-family .training-program-week-bar {
    grid-template-areas:
      "period period"
      "prev next";
  }
  .training-program-week-bar .btn { width: 100%; }
  .training-program-week-bar #training-program-copy-week { justify-self: stretch; }
  .training-program-period { font-size: 12px; }
  .training-program-week { gap: 4px; }
  .training-program-day {
    min-height: 58px;
    padding: 6px 1px;
    border-radius: 12px;
  }
  .training-program-day strong { font-size: 11px; }
  .training-program-day span { font-size: 16px; }
  .training-program-editor-head,
  .training-program-history-card header,
  .training-program-family-card header {
    flex-direction: column;
    align-items: stretch;
  }
  .training-program-editor-head h3 { font-size: 15px; overflow-wrap: anywhere; }
  .training-program-format { align-items: center; }
  .training-program-note-fields .settings-actions {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    z-index: 6;
    margin: 0 -4px;
    padding: 10px 4px 4px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  }
  .training-program-desk .thai-calendar.open {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(370px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 80;
  }
}
@media (max-width: 430px) {
  .training-program-day small {
    font-size: 0;
    line-height: 0;
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--border);
    color: transparent;
    overflow: hidden;
  }
  .training-program-day.is-set small { background: var(--lime); }
}
.academy-screening-page,
.academy-screening-page .stories-card,
.academy-screening-page .stories-table-wrap,
.academy-screening-page .fas-form-box {
  min-width: 0;
}
.academy-screening-page,
.screening-report-page {
  --screening-blue: #0b3d91;
  --screening-red: #c8102e;
  --screening-white: #ffffff;
  --screening-blue-soft: #5b8fd9;
  --screening-trend-line: #075fd8;
  min-width: 0;
}
html[data-fas-theme="dark"] .screening-report-page {
  --screening-trend-line: #69a9ff;
}
.academy-screening-page .screening-box {
  --box-accent: var(--screening-blue);
  --box-accent-dim: color-mix(in srgb, var(--box-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--box-accent) 24%, var(--border));
  background: color-mix(in srgb, var(--screening-white) 8%, var(--bg-card-2));
  box-shadow: inset 4px 0 0 var(--box-accent);
}
.academy-screening-page .screening-box .fas-form-box-head h4 {
  color: color-mix(in srgb, var(--box-accent) 38%, var(--text));
}
.academy-screening-page .screening-box--player,
.academy-screening-page .screening-box--vitals,
.academy-screening-page .screening-box--tests,
.academy-screening-page .screening-box--ready,
.academy-screening-page .screening-box--history { --box-accent: var(--screening-blue); }
.academy-screening-page .screening-box--body,
.academy-screening-page .screening-box--medical,
.academy-screening-page .screening-box--note,
.academy-screening-page .screening-box--sign { --box-accent: var(--screening-red); }
.academy-screening-page .screening-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(6.25rem, 8.5rem);
  column-gap: 10px;
  min-width: 0;
  align-items: stretch;
}
.academy-screening-page .screening-pair > label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.academy-screening-page .screening-pair > label > input,
.academy-screening-page .screening-pair > label > select,
.academy-screening-page .screening-pair > label > .fas-combo {
  margin-top: auto;
}
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .fas-form-box.screening-box {
  background: var(--screening-white);
  border-color: color-mix(in srgb, var(--box-accent) 28%, #d5ddd7);
  box-shadow: inset 4px 0 0 var(--box-accent);
}
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .screening-box .fas-form-box-head h4 {
  color: var(--box-accent);
}
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .screening-box--player,
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .screening-box--vitals,
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .screening-box--tests,
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .screening-box--ready,
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .screening-box--history { --box-accent: #0b3d91; }
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .screening-box--body,
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .screening-box--medical,
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .screening-box--note,
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .screening-box--sign { --box-accent: #c8102e; }
.academy-screening-table {
  table-layout: fixed;
}
.academy-screening-table th,
.academy-screening-table td {
  padding-right: 12px;
  overflow: hidden;
  vertical-align: middle;
}
.academy-screening-table .member-col-name {
  width: 38%;
  white-space: normal;
}
.academy-screening-table .member-col-group,
.academy-screening-table td[data-label="วันที่"],
.academy-screening-table td[data-label="ความพร้อม"] {
  white-space: nowrap;
}
.academy-screening-table .member-col-group {
  width: 18%;
}
.academy-screening-table .academy-coach-name {
  width: 100%;
  min-width: 0;
}
.academy-screening-table .academy-coach-fullname,
.academy-screening-table .member-col-group {
  overflow: hidden;
  text-overflow: ellipsis;
}
.academy-screening-table .stories-row-actions {
  width: 132px;
  overflow: visible;
}
.screening-tests {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  min-width: 0;
}
.screening-tests > label {
  min-width: 0;
}
.screening-test-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 12px 8px;
  border: 1px solid color-mix(in srgb, var(--box-accent, var(--lime)) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--box-accent, var(--lime)) 5%, transparent);
}
.screening-test-card h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.screening-trials,
.screening-ybt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}
.screening-best,
.screening-ybt-computed,
.screening-rest-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.screening-score-pill,
.screening-score-empty {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.screening-score-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
}
.screening-score-pill--5 { background: color-mix(in srgb, #16a34a 20%, transparent); color: #15803d; }
.screening-score-pill--4 { background: color-mix(in srgb, #22c55e 18%, transparent); color: #166534; }
.screening-score-pill--3 { background: color-mix(in srgb, #d97706 18%, transparent); color: #9a3412; }
.screening-score-pill--2 { background: color-mix(in srgb, #ea580c 16%, transparent); color: #9a3412; }
.screening-score-pill--1 { background: color-mix(in srgb, #e11d48 16%, transparent); color: #9f1239; }
.screening-sprint-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}
.screening-sprint-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.screening-dual-clocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.screening-run {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--box-accent, var(--lime)) 16%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.screening-run-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}
.screening-sprint[data-timer-mode="manual"] .screening-stopwatch {
  display: none;
}
.screening-ready-result-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.screening-stopwatch {
  display: flex;
  align-items: center;
  gap: 10px 12px;
}
.screening-stopwatch-time {
  min-width: 4.6ch;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.screening-stopwatch-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
.screening-stopwatch-actions .btn {
  flex: 0 0 auto;
  min-width: 58px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
}
.screening-stopwatch-actions .btn.is-running {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border-color: var(--danger);
  color: var(--danger);
}
.screening-sprint .screening-trials {
  width: 100%;
  max-width: 260px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 8px;
}
.screening-sprint .screening-trials label {
  font-size: 12px;
}
.screening-sprint .screening-trials input {
  min-height: 34px;
  padding: 6px 8px;
}
.screening-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screening-readiness {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.screening-readiness.is-locked {
  pointer-events: none;
}
.screening-readiness.is-locked .screening-ready-choice > span {
  cursor: default;
}
.screening-ready-choice {
  position: relative;
  display: block;
  min-width: 0;
}
.screening-ready-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.screening-ready-choice > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 12px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
}
.screening-ready-choice--ready { --choice-accent: #16a34a; }
.screening-ready-choice--modify { --choice-accent: #d97706; }
.screening-ready-choice--rehab { --choice-accent: #2563eb; }
.screening-ready-choice--not_ready { --choice-accent: #e11d48; }
.screening-ready-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--choice-accent, var(--text));
  background: color-mix(in srgb, var(--choice-accent, var(--text)) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--choice-accent, var(--text)) 26%, transparent);
}
.screening-ready-icon svg {
  display: block;
}
.screening-ready-badge .screening-ready-icon {
  width: 18px;
  height: 18px;
  background: none;
  box-shadow: none;
}
.screening-ready-check {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.screening-ready-choice input:checked + span {
  border-color: var(--choice-accent);
  background: color-mix(in srgb, var(--choice-accent) 12%, transparent);
}
.screening-ready-choice input:checked + span .screening-ready-check {
  border-color: var(--choice-accent);
  background: var(--choice-accent);
  box-shadow: inset 0 0 0 3px #fff;
}
.screening-ready-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
}
.screening-ready-result-kicker,
.screening-ready-suggest {
  font-size: 13px;
  color: var(--muted);
}
.screening-ready-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.screening-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.screening-check input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--lime);
}
.screening-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.academy-screening-page .screening-photo-field {
  min-width: 0;
  margin-bottom: 0;
}
.academy-screening-page .screening-photo-field > .file-drop {
  display: grid;
  width: 100%;
  min-height: 88px;
  margin-top: 6px;
}
.academy-screening-page .file-drop-empty {
  min-height: 88px;
  padding: 12px 10px;
  white-space: normal;
}
.academy-screening-page .screening-photo-upload .file-drop {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  height: 46px;
  overflow: hidden;
}
.academy-screening-page .screening-photo-upload .file-drop-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  height: 46px;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 46px;
  gap: 0;
}
.academy-screening-page .file-drop-file {
  min-height: 88px;
  padding: 8px;
}
.academy-screening-page .file-drop-thumb,
.academy-screening-page .file-drop-thumb img {
  width: 64px;
  height: 64px;
}
.screening-yesno-title {
  margin: 10px 0 0;
  font-weight: 700;
}
.screening-yesno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.screening-yesno .screening-yesno-yes span {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border-width: 2px;
}
.screening-yesno .screening-yesno-yes input:checked + span {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-weight: 700;
}
.screening-conditional {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.screening-conditional[hidden] {
  display: none !important;
}
.screening-conditional > .full,
.screening-conditional > label.full {
  grid-column: 1 / -1;
}
.screening-ready-pill {
  position: relative;
  display: inline-flex;
}
.screening-ready-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.screening-ready-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.screening-ready-pill input:checked + span {
  border-color: var(--lime);
  background: color-mix(in srgb, var(--lime) 18%, transparent);
}
.screening-ready-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.screening-ready-badge--ready { background: color-mix(in srgb, #3d9a5f 22%, transparent); }
.screening-ready-badge--modify { background: color-mix(in srgb, #d4a017 22%, transparent); }
.screening-ready-badge--rehab { background: color-mix(in srgb, #4f7598 22%, transparent); }
.screening-ready-badge--not_ready { background: color-mix(in srgb, #d14b4b 22%, transparent); }
.screening-inbody-list {
  margin: 6px 0 0;
  padding-left: 18px;
}
.screening-form-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#academy-screening-evaluator-name,
#academy-screening-evaluator-date {
  background: var(--bg-card-2);
}
@media (max-width: 900px) {
  .academy-screening-page {
    overflow-x: clip;
  }
  .academy-screening-page:has(#academy-screening-panel:not([hidden])) > #academy-screening-list-card,
  .academy-screening-page:has(#academy-screening-panel:not([hidden])) > #academy-screening-split {
    display: none;
  }
  .academy-screening-page #academy-screening-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .academy-screening-page #academy-screening-form {
    width: 100%;
    min-width: 0;
  }
  .academy-screening-page .stories-table td,
  .academy-screening-page .stories-table th {
    white-space: normal;
  }
  .academy-screening-page .academy-screening-table td.stories-num {
    display: none;
  }
  .academy-screening-page .academy-coach-name {
    min-width: 0;
    flex-wrap: wrap;
  }
  .academy-screening-page .match-review-icon-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .academy-screening-page .match-review-icon-actions .btn,
  .academy-screening-page .stories-row-actions .btn {
    flex: 1 1 0;
    min-width: 44px;
    min-height: 44px;
  }
  .academy-screening-page .fas-form-box,
  .academy-screening-page #academy-screening-form {
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .academy-screening-page .fas-form-box > * {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .academy-screening-page .screening-photos,
  .academy-screening-page .screening-conditional,
  .academy-screening-page .screening-tests {
    grid-template-columns: 1fr;
  }
  .academy-screening-page .screening-photo-field > .file-drop,
  .academy-screening-page .file-drop-empty,
  .academy-screening-page .file-drop-file {
    min-height: 96px;
  }
  .academy-screening-page .screening-photo-upload .file-drop,
  .academy-screening-page .screening-photo-upload .file-drop-empty,
  .academy-screening-page .screening-photo-upload .file-drop-file {
    min-height: 46px;
    height: 46px;
    white-space: nowrap;
  }
  .academy-screening-page .screening-readiness {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .academy-screening-page .screening-ybt-grid,
  .academy-screening-page .screening-trials {
    grid-template-columns: 1fr;
  }
  .academy-screening-page .screening-sprint-row {
    grid-template-columns: 1fr;
  }
  .academy-screening-page .screening-dual-clocks {
    grid-template-columns: 1fr;
  }
  .academy-screening-page .screening-stopwatch {
    flex-wrap: wrap;
  }
  .academy-screening-page .screening-stopwatch-time {
    width: 100%;
    font-size: 24px;
  }
  .academy-screening-page .screening-stopwatch-actions {
    width: 100%;
    flex-wrap: nowrap;
  }
  .academy-screening-page .screening-stopwatch-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 13px;
  }
  .academy-screening-page .screening-sprint .screening-trials {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
  }
  .academy-screening-page .screening-sprint .screening-trials input {
    min-height: 36px;
    padding: 6px 8px;
  }
  .academy-screening-page .screening-yesno .screening-yesno-yes,
  .academy-screening-page .screening-yesno .screening-yesno-yes span {
    width: 44px;
    min-width: 44px;
  }
  .academy-screening-page #academy-screening-panel .card-title {
    align-items: stretch;
    flex-direction: column;
  }
  .academy-screening-page #academy-screening-panel .card-title .btn {
    width: 100%;
    min-height: 44px;
  }
  .academy-screening-page .screening-form-head-actions {
    width: 100%;
  }
  .academy-screening-page .screening-form-head-actions .btn {
    flex: 1 1 0;
  }
  body.fas-backend .academy-screening-page .stories-actions .btn {
    min-height: 44px;
    height: 44px;
    max-height: none;
    font-size: 15px;
  }
  .academy-screening-page .stories-fields input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not(.thai-birth-native),
  .academy-screening-page .stories-fields textarea,
  .academy-screening-page .stories-fields select,
  .academy-screening-page .thai-calendar-trigger {
    min-height: 44px;
    font-size: 16px;
  }
  .academy-screening-page .thai-calendar {
    left: 0;
    right: 0;
    width: auto;
    max-width: calc(100vw - 24px);
    transform: none;
  }
}
.academy-screening-page .story-field-hint a,
.screening-report-page a {
  color: var(--screening-blue, #0b3d91);
  font-weight: 600;
}
.academy-screening-page .btn-lime,
.screening-report-page .btn-lime,
body.fas-backend .academy-screening-page .btn-lime,
body.fas-backend .screening-report-page .btn-lime,
html[data-fas-theme="light"] body.fas-backend .academy-screening-page .btn-lime,
html[data-fas-theme="light"] body.fas-backend .screening-report-page .btn-lime {
  background: var(--screening-blue, #0b3d91);
  border-color: var(--screening-blue, #0b3d91);
  color: var(--screening-white, #fff);
}
.academy-screening-page .btn-lime:hover,
.screening-report-page .btn-lime:hover,
body.fas-backend .academy-screening-page .btn-lime:hover,
body.fas-backend .screening-report-page .btn-lime:hover {
  background: #0a347c;
  border-color: #0a347c;
  color: var(--screening-white, #fff);
  filter: none;
}
.screening-report-page .screening-report-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--screening-blue) 28%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--screening-blue) 10%, var(--bg-card));
  box-shadow: inset 4px 0 0 var(--screening-red);
}
.screening-report-hero-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--screening-blue);
  color: var(--screening-white);
}
.screening-report-page .screening-report-hero span {
  display: block;
  color: var(--screening-red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.screening-report-page .screening-report-hero h2 {
  margin: 4px 0 0;
  color: var(--text);
}
.screening-report-page .screening-report-hero p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.screening-report-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 16px;
}
.screening-report-filters .btn {
  min-height: 43px;
  justify-content: center;
}
.screening-report-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}
.screening-report-kpi {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 104px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}
.screening-report-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--screening-blue);
}
.screening-report-kpi > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.screening-report-kpi > strong { color: var(--text); font-size: 24px; line-height: 1.1; }
.screening-report-kpi.is-ready::before { background: var(--screening-blue); }
.screening-report-kpi.is-modify::before { background: var(--screening-blue-soft); }
.screening-report-kpi.is-rehab::before,
.screening-report-kpi.is-not-ready::before { background: var(--screening-red); }
.screening-report-kpi.is-none::before { background: var(--border); }
.screening-report-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.screening-report-chart-card {
  min-width: 0;
  padding: 16px;
}
.screening-report-chart-card h3 {
  margin: 0;
  font-size: 16px;
}
.screening-report-chart-card .student-attendance-card-head {
  margin-bottom: 12px;
}
.screening-report-chart-card .student-attendance-card-head .story-field-hint {
  margin: 4px 0 0;
}
#screening-report-bars,
#screening-report-line {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.screening-report-chart-host {
  width: 100%;
  max-width: 1000px;
  min-width: 0;
  min-height: 0;
  margin-inline: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.screening-vbars-svg,
.screening-line-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  min-width: 0;
  max-height: 340px;
}
.screening-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--text);
}
.screening-chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.screening-chart-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
}
.screening-report-player {
  padding: 16px;
  overflow: visible;
}
.screening-report-player[hidden] {
  display: none;
}
.screening-report-player-tools {
  --screening-trend-control-width: 170px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin: 0 0 12px;
  overflow: visible;
}
.screening-report-player-tools .screening-report-metric-switch {
  flex: 0 0 auto;
  min-height: 43px;
  align-items: center;
}
.screening-report-player-tools .screening-report-metric-switch .btn {
  width: var(--screening-trend-control-width);
  height: 47px;
  justify-content: center;
}
.screening-report-player-tools .stories-filter {
  flex: 0 0 var(--screening-trend-control-width);
  width: var(--screening-trend-control-width);
  min-width: var(--screening-trend-control-width);
  max-width: var(--screening-trend-control-width);
}
.screening-report-player-tools .stories-filter .fas-combo,
.screening-report-player-tools .stories-filter select {
  width: 100%;
  height: 47px;
}
.screening-report-player-tools .stories-filter[hidden] {
  display: none !important;
}
.screening-report-player-tools .screening-report-metric-switch[hidden] {
  display: none !important;
}
.screening-report-year-note,
.screening-report-round-summary {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.screening-report-round-summary {
  text-align: center;
}
.screening-report-metric-switch {
  display: inline-flex;
  gap: 6px;
}
.screening-report-metric-switch .btn[aria-pressed="true"] {
  background: var(--screening-blue);
  border-color: var(--screening-blue);
  color: var(--screening-white);
}
.screening-report-readiness-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
html[data-fas-theme="light"] body.fas-backend .screening-report-page .screening-report-hero {
  background: var(--screening-white);
}
@media (max-width: 1100px) {
  .screening-report-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .screening-report-page {
    overflow-x: clip;
  }
  .screening-report-page .card,
  .screening-report-page .screening-report-hero,
  .screening-report-chart-card,
  .screening-report-player {
    min-width: 0;
  }
  .screening-report-page .screening-report-hero {
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 14px 14px;
  }
  .screening-report-page .screening-report-hero h2 {
    font-size: 22px;
  }
  .screening-report-filters {
    grid-template-columns: 1fr;
  }
  .screening-report-filters .btn {
    width: 100%;
    min-height: 44px;
  }
  .screening-report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .screening-report-kpi {
    min-height: 88px;
    padding: 12px;
  }
  .screening-report-kpi > strong {
    font-size: 22px;
  }
  .screening-report-chart-card .student-attendance-card-head,
  .screening-report-player .student-attendance-card-head {
    flex-direction: column;
    align-items: stretch;
  }
  .screening-report-chart-card .screening-report-metric-switch,
  .screening-report-player-tools .screening-report-metric-switch {
    width: 100%;
    display: flex;
  }
  .screening-report-chart-card .screening-report-metric-switch .btn,
  .screening-report-player-tools .screening-report-metric-switch .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 44px;
  }
  .screening-report-player-tools {
    --screening-trend-control-width: 100%;
    align-items: stretch;
  }
  .screening-report-player-tools .stories-filter {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .screening-report-player-tools .stories-filter .fas-combo,
  .screening-report-player-tools .stories-filter select,
  .screening-report-filters select,
  .screening-report-filters input,
  .screening-report-filters .thai-calendar-trigger {
    min-height: 44px;
    height: 44px;
    font-size: 16px;
  }
  .screening-report-chart-host {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .screening-vbars-svg,
  .screening-line-svg {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
  .screening-report-readiness-pills {
    gap: 6px;
  }
  .screening-report-round-summary {
    text-align: left;
    font-size: 12px;
  }
}
@media (max-width: 900px), (pointer: coarse) {
  .screening-report-page .btn,
  .screening-report-page select,
  .screening-report-page input:not([type="hidden"]),
  .screening-report-page .thai-calendar-trigger {
    min-height: 44px;
    font-size: 16px;
  }
}
@media (max-width: 430px) {
  .screening-report-page .screening-report-hero {
    grid-template-columns: 1fr;
  }
  .screening-report-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .screening-report-kpi > span {
    font-size: 11px;
  }
}
@media (max-width: 800px) {
  #screening-report-body tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  #screening-report-body td {
    grid-column: 1 / -1;
  }
  #screening-report-body td.screening-report-date {
    grid-column: 1;
    grid-row: 4;
    border-bottom: 0;
  }
  #screening-report-body td.stories-row-actions {
    grid-column: 2;
    grid-row: 4;
    align-self: stretch;
    width: auto;
    padding: 6px 4px 6px 8px;
    border-bottom: 0;
  }
  #screening-report-body td.stories-row-actions::before {
    content: none;
  }
  #screening-report-body td.stories-row-actions .match-review-icon-actions {
    display: flex;
    align-items: center;
  }
  #screening-report-body td.stories-row-actions .btn {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
  }
}
.screening-a4-host {
  position: fixed;
  left: 0;
  top: 0;
  width: 210mm;
  height: calc(210mm * 1024 / 724);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}
.screening-a4-sheet {
  position: relative;
  box-sizing: border-box;
  width: 210mm;
  height: calc(210mm * 1024 / 724);
  padding: 0;
  background: #fff;
  color: #122033;
  font-family: Prompt, "Noto Sans Thai", Tahoma, sans-serif;
}
.screening-a4-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}
.screening-a4-plot {
  position: absolute;
  transform: translateY(-92%);
  color: #122033;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screening-a4-plot.is-wrap {
  white-space: normal;
  line-height: 1.25;
  overflow: hidden;
  transform: none;
  height: 2.3%;
  font-size: 8.5px;
}
.screening-a4-plot.is-mark {
  width: 2.1mm;
  height: 2.1mm;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #c1121f;
  box-shadow: 0 0 0 0.35mm #fff;
}
.screening-a4-plot.is-ring {
  width: 14mm;
  height: 14mm;
  transform: translate(-50%, -50%);
  border: 0.55mm solid #c1121f;
  border-radius: 50%;
  background: transparent;
}
.screening-a4-plot-photo {
  position: absolute;
  object-fit: cover;
  object-position: center top;
  border-radius: 1mm;
}
.screening-a4-logo {
  width: 20mm;
  height: 20mm;
  object-fit: contain;
  display: block;
}
.screening-a4-mark {
  width: 20mm;
  height: 20mm;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0b1f4d;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.screening-a4-titles {
  text-align: center;
}
.screening-a4-titles strong {
  display: block;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: #0b1f4d;
}
.screening-a4-titles em {
  display: block;
  margin-top: 1mm;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #c1121f;
}
.screening-a4-badge {
  justify-self: end;
  min-width: 22mm;
  padding: 2mm 2.4mm;
  border-radius: 2mm;
  background: #c1121f;
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.screening-a4-row {
  display: grid;
  gap: 3.2mm;
  min-height: 0;
}
.screening-a4-row--2 {
  grid-template-columns: 1.15fr 0.85fr;
}
.screening-a4-row--body {
  grid-template-columns: 1.05fr 0.95fr;
}
.screening-a4-box {
  min-width: 0;
}
.screening-a4-kicker {
  display: flex;
  align-items: center;
  gap: 2mm;
  margin: 0 0 2mm;
  color: #0b1f4d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.screening-a4-kicker b {
  display: grid;
  place-items: center;
  width: 5.2mm;
  height: 5.2mm;
  border-radius: 1mm;
  background: #c1121f;
  color: #fff;
  font-size: 8px;
}
.screening-a4-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6mm 3mm;
}
.screening-a4-line {
  display: flex;
  align-items: baseline;
  gap: 1.5mm;
  min-height: 5.4mm;
  font-size: 8.4px;
}
.screening-a4-line span {
  flex: 0 0 auto;
  color: #5b6b7c;
  font-weight: 600;
}
.screening-a4-line b {
  flex: 1 1 auto;
  min-height: 4.2mm;
  border-bottom: 0.25mm solid #9aa7b5;
  color: #122033;
  font-weight: 700;
  font-size: 9px;
}
.screening-a4-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2mm;
}
.screening-a4-photo {
  min-height: 32mm;
  border: 0.25mm dashed #9aa7b5;
  border-radius: 1.5mm;
  overflow: hidden;
  background: #f4f7fb;
  display: flex;
  flex-direction: column;
}
.screening-a4-photo img {
  width: 100%;
  height: 28mm;
  object-fit: cover;
  display: block;
}
.screening-a4-photo i,
.screening-a4-photo small {
  display: block;
  text-align: center;
  font-style: normal;
  font-size: 7.5px;
  color: #5b6b7c;
  padding: 1mm;
}
.screening-a4-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8px;
}
.screening-a4-table th,
.screening-a4-table td {
  border: 0.2mm solid #c5ced6;
  padding: 1.1mm 1.3mm;
  text-align: left;
  vertical-align: top;
}
.screening-a4-table th {
  background: #0b1f4d;
  color: #fff;
  font-weight: 700;
}
.screening-a4-table td:nth-child(2),
.screening-a4-table td:nth-child(3) {
  white-space: nowrap;
}
.screening-a4-checks {
  display: grid;
  gap: 1.4mm;
  font-size: 8.4px;
}
.screening-a4-check {
  display: flex;
  gap: 2mm;
  align-items: flex-start;
}
.screening-a4-check em {
  width: 3.2mm;
  height: 3.2mm;
  margin-top: 0.4mm;
  border: 0.3mm solid #0b1f4d;
  border-radius: 50%;
  flex: 0 0 auto;
  font-style: normal;
}
.screening-a4-check em.is-on {
  background: #c1121f;
  border-color: #c1121f;
}
.screening-a4-note {
  min-height: 22mm;
  border: 0.25mm solid #c5ced6;
  border-radius: 1.5mm;
  padding: 2mm;
  font-size: 9px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.screening-a4-ready {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6mm;
}
.screening-a4-ready-item {
  min-height: 22mm;
  border: 0.25mm solid #d5dde5;
  border-radius: 1.8mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1mm;
  color: #5b6b7c;
  font-size: 7.4px;
  font-weight: 700;
  text-align: center;
}
.screening-a4-ready-item.is-on {
  border-color: #0b1f4d;
  box-shadow: inset 0 0 0 0.45mm #0b1f4d;
  color: #0b1f4d;
  background: #eef3fb;
}
.screening-a4-ready-item svg {
  width: 7mm;
  height: 7mm;
}
.screening-a4-signs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3mm;
}
.screening-a4-sign {
  text-align: center;
  font-size: 8px;
}
.screening-a4-sign b {
  display: block;
  min-height: 8mm;
  margin-bottom: 1mm;
  border-bottom: 0.25mm solid #9aa7b5;
  font-size: 9px;
}
.screening-a4-sign span {
  color: #5b6b7c;
}
.screening-a4-foot {
  margin-top: auto;
  padding-top: 2mm;
  border-top: 0.25mm solid #d5dde5;
  color: #5b6b7c;
  font-size: 7.4px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.screening-export-copy {
  margin: -8px 0 18px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
@media print {
  body.training-program-print .sidebar,
  body.training-program-print .topbar,
  body.training-program-print .training-program-toolbar,
  body.training-program-print .training-program-week-bar,
  body.training-program-print .training-program-formats,
  body.training-program-print .settings-actions,
  body.training-program-print #training-program-family,
  body.training-program-print .training-program-editor-head button {
    display: none !important;
  }
  body.training-program-print .training-program-day-preview {
    display: block;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 14px;
  }
  body.training-program-print .training-program-page,
  body.training-program-print .card {
    box-shadow: none;
    border-color: #ccc;
  }
}

/* Academy website palette on the backend. FAS login keeps the green theme. */
body.fas-backend[data-academy-palette] {
  background: var(--academy-dark);
  --app-bg: var(--academy-dark);
  --bg: var(--academy-dark);
  --bg-2: color-mix(in srgb, var(--academy-dark) 86%, white);
  --bg-card: color-mix(in srgb, var(--academy-dark) 78%, white);
  --panel: color-mix(in srgb, var(--academy-dark) 90%, white);
  --border: rgba(255, 255, 255, 0.12);
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] {
  background: #f3f4f6;
  --app-bg: #f3f4f6;
  --bg: #f3f4f6;
  --bg-2: #e7e7ea;
  --bg-card: #ffffff;
  --bg-hover: #f4f4f5;
  --panel: #ffffff;
  --border: #e4e4e7;
  --text: #18181b;
  --muted: #52525b;
}
body.fas-backend[data-academy-palette] .circuit,
body.fas-backend[data-academy-palette] .app,
body.fas-backend[data-academy-palette] .content,
body.fas-backend[data-academy-palette] .login-visual {
  background: var(--academy-dark);
  background-image: none;
}
body.fas-backend[data-academy-palette] .sidebar {
  background: color-mix(in srgb, var(--academy-dark) 88%, white);
  border-right-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 3px 0 0 var(--academy-primary);
}
body.fas-backend[data-academy-palette] .side-head,
body.fas-backend[data-academy-palette] .side-primary-link,
body.fas-backend[data-academy-palette] .side-user {
  border-color: rgba(255, 255, 255, 0.12);
}
body.fas-backend[data-academy-palette] .side-link {
  color: rgba(255, 255, 255, 0.72);
}
body.fas-backend[data-academy-palette] .side-link:hover,
body.fas-backend[data-academy-palette] .side-group-toggle:hover,
body.fas-backend[data-academy-palette] .side-group.is-open > .side-group-toggle,
body.fas-backend[data-academy-palette] .side-user:hover,
body.fas-backend[data-academy-palette] .side-user:focus-visible,
body.fas-backend[data-academy-palette] .icon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
body.fas-backend[data-academy-palette] .side-link.active {
  background: rgba(var(--academy-primary-rgb), 0.28);
  color: #fff;
}
body.fas-backend[data-academy-palette] .side-link.active::before {
  background: var(--academy-primary);
}
body.fas-backend[data-academy-palette] .side-group.is-open .side-group-chevron {
  color: var(--academy-primary);
}
body.fas-backend[data-academy-palette] .side-group-items {
  border-left-color: rgba(255, 255, 255, 0.16);
}
body.fas-backend[data-academy-palette] .topbar {
  background: color-mix(in srgb, var(--academy-dark) 92%, white);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 -2px 0 var(--academy-mark);
}
body.fas-backend[data-academy-palette] .card,
body.fas-backend[data-academy-palette] .login-card {
  background: color-mix(in srgb, var(--academy-dark) 78%, white);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 3px 0 0 var(--academy-mark);
}
body.fas-backend[data-academy-palette] .table td,
body.fas-backend[data-academy-palette] .table th {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
body.fas-backend[data-academy-palette] .table tr:hover td {
  background: rgba(255, 255, 255, 0.05);
}
body.fas-backend[data-academy-palette] .icon-btn,
body.fas-backend[data-academy-palette] .theme-switch,
body.fas-backend[data-academy-palette] .field input,
body.fas-backend[data-academy-palette] .field select,
body.fas-backend[data-academy-palette] .field textarea {
  background: color-mix(in srgb, var(--academy-dark) 70%, black);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f4f4f4;
}
body.fas-backend[data-academy-palette] .theme-switch-btn.active,
body.fas-backend[data-academy-palette] .avatar {
  background: var(--academy-primary);
  color: #fff;
  box-shadow: none;
}
body.fas-backend[data-academy-palette] .btn-lime {
  color: #fff;
}
html[data-fas-theme="light"]:has(body.fas-backend[data-academy-palette]) {
  background: #f3f4f6;
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .circuit,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .app,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .content,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .login-panel,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .login-visual {
  background: #f3f4f6;
  background-image: none;
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .sidebar,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .topbar,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .card,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .login-card,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .settings-head,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .icon-btn,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .field input,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .field select,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .field textarea,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .stories-fields input:not([type="file"]),
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .stories-fields textarea,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .stories-fields select,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .settings-fields select,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .select,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] select:not([multiple]):not(.academy-coach-status):not(.member-fee-select) {
  background: #fff;
  border-color: #e4e4e7;
  color: #18181b;
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .sidebar {
  box-shadow: inset 3px 0 0 var(--academy-primary);
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .topbar {
  box-shadow: inset 0 -2px 0 var(--academy-mark);
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .card,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .login-card,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .settings-head,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .academy-coach-box,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .fas-form-box,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .academy-guardian-card,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .eval-score-section {
  background: #fff;
  border-color: #e4e4e7;
  box-shadow: inset 3px 0 0 var(--academy-mark), 0 8px 24px rgba(17, 17, 17, 0.05);
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-head,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-primary-link,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-user,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-group-items,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .table th,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .table td {
  border-color: #e4e4e7;
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-link,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-group-toggle {
  color: #3f3f46;
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-link:hover,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-group-toggle:hover,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-group.is-open > .side-group-toggle,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-user:hover,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .icon-btn:hover,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .table tr:hover td {
  background: #f4f4f5;
  color: #18181b;
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-link.active {
  background: rgba(var(--academy-primary-rgb), 0.12);
  color: var(--academy-dark);
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-link.active::before {
  background: var(--academy-primary);
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .side-group.is-open .side-group-chevron {
  color: var(--academy-primary);
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .theme-switch {
  background: #f4f4f5;
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .theme-switch-btn.active,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .avatar,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .academy-coach-avatar-edit,
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .btn-lime {
  background: var(--academy-primary);
  color: #fff;
  box-shadow: none;
}
html[data-fas-theme="light"] body.fas-backend[data-academy-palette] .icon-btn:hover {
  border-color: var(--academy-primary);
  color: var(--academy-primary);
}

.app.app-directory {
  grid-template-columns: 1fr;
}
.app.app-directory .sidebar,
.app.app-directory .sidebar.open,
.app.app-directory .sidebar-backdrop,
.app.app-directory #menu-btn {
  display: none !important;
}
.fas-directory-head {
  margin: 0 0 18px;
}
.fas-directory-head::after {
  display: none;
}
.fas-directory-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.fas-directory-brand-mark {
  display: grid;
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.25);
}
.fas-directory-brand-mark img {
  display: block;
  object-fit: contain;
}
.fas-directory-brand-mark .fas-directory-logo-light {
  display: none;
}
.fas-directory-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.fas-directory-brand h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(21px, 2.2vw, 29px);
  line-height: 1.18;
}
.fas-directory-brand p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}
.fas-directory-tabs {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 84%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  scrollbar-width: none;
}
.fas-directory-tabs::-webkit-scrollbar {
  display: none;
}
.fas-directory-mobile-tabs {
  display: none;
}
.fas-directory-mobile-tabs > span:first-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.fas-directory-mobile-select {
  --directory-mobile-color: #17973f;
  --directory-mobile-soft: rgba(23, 151, 63, 0.12);
  position: relative;
  display: grid;
}
.fas-directory-mobile-select[data-directory-mobile-tone="stadium"] {
  --directory-mobile-color: #087fb0;
  --directory-mobile-soft: rgba(8, 127, 176, 0.12);
}
.fas-directory-mobile-select[data-directory-mobile-tone="players"] {
  --directory-mobile-color: #7552d5;
  --directory-mobile-soft: rgba(117, 82, 213, 0.12);
}
.fas-directory-mobile-select[data-directory-mobile-tone="coach"] {
  --directory-mobile-color: #d86510;
  --directory-mobile-soft: rgba(216, 101, 16, 0.12);
}
.fas-directory-mobile-select select {
  width: 100%;
  min-height: 48px;
  appearance: none;
  border: 1px solid var(--directory-mobile-color);
  border-radius: 14px;
  padding: 10px 44px 10px 14px;
  background: var(--directory-mobile-soft);
  color: var(--directory-mobile-color);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.fas-directory-mobile-select select:focus-visible {
  outline: 2px solid var(--directory-mobile-color);
  outline-offset: 2px;
}
.fas-directory-mobile-select option {
  background: var(--bg-card);
  color: var(--text);
}
.fas-directory-mobile-select svg {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 18px;
  height: 18px;
  color: var(--directory-mobile-color);
  pointer-events: none;
  transform: translateY(-50%);
}
.fas-directory-tab {
  --directory-tab-color: #17973f;
  --directory-tab-soft: rgba(23, 151, 63, 0.11);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  flex: 1 0 auto;
  border: 1px solid color-mix(in srgb, var(--directory-tab-color) 34%, transparent);
  background: var(--directory-tab-soft);
  color: var(--directory-tab-color);
  border-radius: 11px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.fas-directory-tab[data-directory-tab="stadium"] {
  --directory-tab-color: #087fb0;
  --directory-tab-soft: rgba(8, 127, 176, 0.11);
}
.fas-directory-tab[data-directory-tab="players"] {
  --directory-tab-color: #7552d5;
  --directory-tab-soft: rgba(117, 82, 213, 0.11);
}
.fas-directory-tab[data-directory-tab="coach"] {
  --directory-tab-color: #d86510;
  --directory-tab-soft: rgba(216, 101, 16, 0.11);
}
.fas-directory-tab b {
  min-width: 25px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--directory-tab-color) 18%, transparent);
  color: inherit;
  font-size: 11px;
  line-height: 1.3;
}
.fas-directory-tab.is-on {
  background: var(--directory-tab-color);
  border-color: var(--directory-tab-color);
  color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--directory-tab-color) 28%, transparent);
}
.fas-directory-tab.is-on b {
  background: rgba(7, 16, 10, 0.14);
}
.fas-directory-tab:hover:not(.is-on) {
  border-color: var(--directory-tab-color);
  background: color-mix(in srgb, var(--directory-tab-color) 18%, transparent);
  color: var(--directory-tab-color);
  transform: translateY(-1px);
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-head {
  background: transparent;
  box-shadow: none;
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-head::after {
  border-color: rgba(23, 151, 63, 0.12);
  box-shadow: 0 0 0 28px rgba(23, 151, 63, 0.025), 0 0 0 58px rgba(23, 151, 63, 0.015);
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-brand-mark {
  border-color: #dce5df;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(26, 54, 36, 0.1);
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-logo-dark {
  display: none;
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-brand-mark .fas-directory-logo-light {
  display: block;
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-brand h2 {
  color: #142019;
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-brand p {
  color: #637068;
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-eyebrow {
  color: #147b35;
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-tabs {
  border-color: #dce5df;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 28px rgba(26, 54, 36, 0.07);
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-tab {
  border-color: color-mix(in srgb, var(--directory-tab-color) 34%, transparent);
  background: var(--directory-tab-soft);
  color: color-mix(in srgb, var(--directory-tab-color) 78%, #142019);
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-tab b {
  background: color-mix(in srgb, var(--directory-tab-color) 17%, #fff);
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-tab.is-on {
  border-color: var(--directory-tab-color);
  background: var(--directory-tab-color);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--directory-tab-color) 24%, transparent);
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-tab.is-on b {
  background: rgba(255, 255, 255, 0.18);
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-tab:hover:not(.is-on) {
  border-color: var(--directory-tab-color);
  background: color-mix(in srgb, var(--directory-tab-color) 16%, #fff);
  color: color-mix(in srgb, var(--directory-tab-color) 78%, #142019);
}
.fas-directory-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 16px;
}
.fas-directory-tools.is-people {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fas-directory-tools .stories-search {
  flex: none;
  min-width: 0;
  width: auto;
}
.fas-directory-tools .eval-score-combo,
.fas-directory-tools .stories-search > input,
.fas-directory-tools .eval-score-combo input[type="search"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.fas-directory-form input,
.fas-directory-form select,
.fas-directory-form textarea {
  width: 100%;
  box-sizing: border-box;
}
.fas-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.fas-directory-add,
.fas-directory-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 168px;
  padding: 16px;
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.fas-directory-add {
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px dashed rgba(232, 194, 122, 0.72);
  color: #f6e7c4;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 214, 140, 0.18), transparent 46%),
    linear-gradient(165deg, #3d2d16 0%, #1a130c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.12);
}
.fas-directory-add:hover {
  border-color: rgba(255, 224, 151, 0.95);
  color: #fff8e7;
  transform: translateY(-2px);
}
.fas-directory-add strong {
  color: inherit;
  font-size: 16px;
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-add {
  border-color: rgba(154, 106, 32, 0.42);
  color: #6b4b16;
  background:
    radial-gradient(circle at 50% 16%, #fffaf0 0%, transparent 48%),
    linear-gradient(165deg, #fff6e4 0%, #f0d7a4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-add:hover {
  border-color: rgba(122, 82, 18, 0.62);
  color: #4e350c;
}
.fas-directory-card {
  position: relative;
  border: 1px solid var(--border);
  padding-right: 52px;
  padding-bottom: 52px;
  overflow: visible;
  cursor: pointer;
}
.fas-directory-person-photo {
  background: #fff;
}
.fas-view-as {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--lime) 55%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--lime) 18%, var(--panel));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--lime) 16%, transparent);
  color: var(--text);
}
.fas-view-as-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.fas-view-as-copy strong {
  font-size: 15px;
}
.fas-view-as-copy span {
  color: var(--muted);
  font-size: 14px;
}
.top-actions .fas-view-as-exit,
.fas-view-as .fas-view-as-exit {
  text-decoration: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 19px 7px 8px;
  border: 1px solid rgba(255, 224, 151, 0.48);
  border-radius: 999px;
  background:
    linear-gradient(135deg, #3b2a11 0%, #171108 58%, #4a3314 100%);
  color: #fff4d6;
  box-shadow:
    0 0 0 1px rgba(214, 164, 65, 0.42),
    0 10px 24px rgba(0, 0, 0, 0.26),
    0 0 24px rgba(214, 164, 65, 0.2);
  font-weight: 800;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.top-actions .fas-view-as-exit::after,
.fas-view-as .fas-view-as-exit::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.16) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 480ms ease;
}
.top-actions .fas-view-as-exit svg,
.fas-view-as .fas-view-as-exit svg {
  box-sizing: content-box;
  padding: 7px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe19a, #c58b2a);
  color: #211506;
  box-shadow: 0 4px 12px rgba(214, 164, 65, 0.38);
}
.top-actions .fas-view-as-exit:hover,
.fas-view-as .fas-view-as-exit:hover {
  border-color: rgba(255, 224, 151, 0.9);
  background: linear-gradient(135deg, #4a3518 0%, #201708 58%, #5b3e17 100%);
  color: #fff8e7;
  box-shadow:
    0 0 0 2px rgba(214, 164, 65, 0.3),
    0 14px 30px rgba(0, 0, 0, 0.32),
    0 0 30px rgba(214, 164, 65, 0.3);
  transform: translateY(-2px);
}
.top-actions .fas-view-as-exit:hover::after,
.fas-view-as .fas-view-as-exit:hover::after {
  transform: translateX(120%);
}
.top-actions .fas-view-as-exit:focus-visible,
.fas-view-as .fas-view-as-exit:focus-visible {
  outline: 3px solid rgba(214, 164, 65, 0.42);
  outline-offset: 3px;
}
.top-actions .fas-view-as-exit:disabled,
.fas-view-as .fas-view-as-exit:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .top-actions .fas-view-as-exit,
  .fas-view-as .fas-view-as-exit,
  .top-actions .fas-view-as-exit::after,
  .fas-view-as .fas-view-as-exit::after {
    transition: none;
  }
}
.fas-profile-guardians p {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.fas-profile-guardian + .fas-profile-guardian {
  margin-top: 12px;
}
.fas-profile-guardian-meta {
  font-size: 14px;
  font-weight: 500;
}
@media (max-width: 720px) {
  .fas-directory-head {
    margin-bottom: 14px;
  }
  .fas-directory-tabs {
    display: none;
  }
  .fas-directory-mobile-tabs {
    display: grid;
    gap: 6px;
  }
  .fas-directory-brand {
    align-items: flex-start;
  }
  .fas-directory-brand-mark {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }
  .fas-directory-brand-mark img {
    width: 44px;
    height: 44px;
  }
  .fas-directory-brand p {
    line-height: 1.45;
  }
  .fas-view-as {
    align-items: stretch;
    flex-direction: column;
  }
  .fas-directory-tools,
  .fas-directory-tools.is-people {
    grid-template-columns: minmax(0, 1fr);
  }
  .fas-directory-grid {
    gap: 10px;
  }
  .fas-directory-add {
    grid-column: 1 / -1;
    flex-direction: row;
    min-height: 52px;
    padding: 10px 16px;
    border-radius: 14px;
  }
  .fas-directory-add svg {
    width: 20px;
    height: 20px;
  }
  .fas-directory-add strong {
    font-size: 15px;
  }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .fas-directory-tools.is-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .fas-directory-add:hover {
    transform: none;
  }
}
.activity-log-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.activity-log-table td:first-child {
  white-space: nowrap;
}
@media (min-width: 761px) and (max-width: 900px) {
  .app-directory .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .app-directory .fas-top-menu {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  .app-directory .top-actions {
    grid-column: 2;
    grid-row: 1;
  }
  .app-directory .fas-top-menu-link {
    flex: 1 0 auto;
  }
}
@media (min-width: 721px) and (max-width: 1100px) {
  #activity-filters,
  #activity-all-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
  #activity-filters .stories-filter,
  #activity-all-filters .stories-filter,
  #activity-filters .stories-per-page,
  #activity-all-filters .stories-per-page {
    width: auto;
    min-width: 0;
    max-width: none;
  }
  #activity-filters .btn-lime,
  #activity-all-filters .btn-lime {
    grid-column: 1 / -1;
    margin-left: 0;
  }
}
@media (max-width: 720px) {
  .activity-log-table td {
    overflow-wrap: anywhere;
  }
  .activity-log-table td:first-child {
    white-space: normal;
  }
  #activity-filters .stories-filter,
  #activity-all-filters .stories-filter {
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .activity-log-table thead {
    display: none;
  }
  .activity-log-table,
  .activity-log-table tbody,
  .activity-log-table tr,
  .activity-log-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .activity-log-table tr {
    margin: 0 0 10px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card-2);
  }
  .activity-log-table tr:hover td {
    background: transparent;
  }
  .activity-log-table td {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 0;
  }
  .activity-log-table td:last-child {
    border-bottom: 0;
  }
  .activity-log-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }
}
.fas-directory-card img,
.fas-directory-logo-empty {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
}
.fas-directory-logo-empty {
  display: grid;
  place-items: center;
  background: var(--border);
  color: var(--text);
  font-weight: 700;
}
.fas-directory-card strong {
  font-size: 16px;
  line-height: 1.3;
}
.fas-directory-card strong .fas-directory-nick {
  margin-left: 4px;
  color: var(--lime);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  vertical-align: 1px;
}
.fas-directory-card:hover,
.fas-directory-card:focus-within {
  position: relative;
  z-index: 3;
}
.fas-directory-card .fas-directory-multi {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, #e2b657 22%, transparent);
  color: #ffe7ad;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.fas-directory-card .fas-directory-multi-list {
  display: none;
  position: absolute;
  z-index: 4;
  left: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  margin: 0;
  padding: 8px 10px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.fas-directory-card .fas-directory-multi:hover .fas-directory-multi-list,
.fas-directory-card .fas-directory-multi:focus-within .fas-directory-multi-list {
  display: grid;
  gap: 4px;
}
.fas-directory-card .fas-directory-multi-list li {
  color: var(--text);
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}
.fas-directory-card .fas-directory-multi span {
  color: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.fas-directory-card .fas-directory-multi svg {
  flex: 0 0 auto;
}
html[data-fas-theme="light"] body.fas-backend .fas-directory-card .fas-directory-multi {
  background: color-mix(in srgb, #c58b2a 18%, #fff);
  color: #6a4a12;
}
.fas-directory-card span,
.fas-directory-card em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}
.fas-directory-card small {
  color: var(--muted);
  font-size: 12px;
}
.fas-directory-card .fas-directory-term {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
}
.fas-directory-card .fas-directory-term em {
  font-weight: 700;
}
.fas-directory-card .fas-directory-term em.is-expired { color: #c62828; }
.fas-directory-card .fas-directory-term em.is-soon,
.fas-directory-card .fas-directory-term em.is-trial-soon { color: #b26a00; }
.fas-directory-card .fas-directory-term em.is-trial,
.fas-directory-card .fas-directory-term em.is-active { color: #1b6b3a; }
.fas-directory-renew {
  margin-top: 6px;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.fas-directory-pack-wrap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
}
.fas-directory-card:has(.fas-directory-pack-menu:not([hidden])) {
  z-index: 5;
}
.fas-directory-pack {
  position: static;
  display: inline-flex;
  border: 0;
  cursor: pointer;
  font: inherit;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: max-content;
  gap: 4px;
  min-height: 27px;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
  box-shadow: inset 0 0 0 1px var(--border), 0 3px 9px rgba(0, 0, 0, 0.06);
}
.fas-directory-card .fas-directory-pack span {
  color: inherit;
  font-size: inherit;
  font-style: normal;
}
.fas-directory-pack svg {
  flex: 0 0 auto;
}
.fas-directory-pack-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 6px;
  min-width: 128px;
  padding: 8px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}
.fas-directory-pack-menu button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}
.fas-directory-pack-menu button span {
  color: inherit;
  font-size: inherit;
}
.fas-directory-pack-menu .is-basic {
  background: color-mix(in srgb, #7d8582 12%, var(--panel));
  color: #59615e;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #7d8582 34%, var(--border));
}
.fas-directory-pack-menu .is-plus {
  background: color-mix(in srgb, var(--lime) 22%, var(--panel));
  color: #2f6510;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 62%, transparent);
}
.fas-directory-pack-menu .is-custom {
  background: linear-gradient(135deg, color-mix(in srgb, #ffe4a3 68%, var(--panel)), color-mix(in srgb, #d59a31 26%, var(--panel)));
  color: #80510a;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #c58b2a 62%, transparent);
}
.fas-directory-pack-menu .is-current {
  box-shadow: inset 0 0 0 2px currentColor;
}
html[data-fas-theme="dark"] body.fas-backend .fas-directory-pack-menu .is-plus {
  color: #d7f5a2;
}
html[data-fas-theme="dark"] body.fas-backend .fas-directory-pack-menu .is-basic {
  color: #d0d5d3;
}
html[data-fas-theme="dark"] body.fas-backend .fas-directory-pack-menu .is-custom {
  color: #f6e7c4;
}
.fas-directory-pack.is-plus {
  background: color-mix(in srgb, var(--lime) 22%, var(--panel));
  color: #2f6510;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 62%, transparent), 0 3px 10px color-mix(in srgb, var(--lime) 16%, transparent);
}
.fas-directory-pack.is-basic {
  background: color-mix(in srgb, #7d8582 12%, var(--panel));
  color: #59615e;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #7d8582 34%, var(--border)), 0 3px 9px rgba(0, 0, 0, 0.05);
}
.fas-directory-pack.is-custom {
  background: linear-gradient(135deg, color-mix(in srgb, #ffe4a3 68%, var(--panel)), color-mix(in srgb, #d59a31 26%, var(--panel)));
  color: #80510a;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #c58b2a 62%, transparent), 0 3px 10px rgba(197, 139, 42, 0.15);
}
html[data-fas-theme="dark"] body.fas-backend .fas-directory-pack.is-plus {
  color: #d7f5a2;
}
html[data-fas-theme="dark"] body.fas-backend .fas-directory-pack.is-basic {
  color: #d0d5d3;
}
html[data-fas-theme="dark"] body.fas-backend .fas-directory-pack.is-custom {
  color: #f6e7c4;
}
.fas-directory-card .fas-directory-view {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--lime) 42%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 88%, #fff);
  color: var(--text);
  box-shadow: 0 6px 16px color-mix(in srgb, #000 10%, transparent);
  cursor: pointer;
}
.fas-directory-card .fas-directory-view:hover,
.fas-directory-card .fas-directory-view:focus-visible {
  border-color: color-mix(in srgb, var(--lime) 70%, var(--border));
  background: color-mix(in srgb, var(--lime) 18%, var(--panel));
  color: var(--text);
}
.fas-directory-card .fas-directory-archive {
  position: absolute;
  right: 52px;
  bottom: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, #dc2626 30%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 88%, #fff);
  color: color-mix(in srgb, #dc2626 78%, var(--text));
  box-shadow: 0 6px 16px color-mix(in srgb, #000 10%, transparent);
  cursor: pointer;
}
.fas-directory-card .fas-directory-archive:hover,
.fas-directory-card .fas-directory-archive:focus-visible {
  border-color: color-mix(in srgb, #dc2626 62%, var(--border));
  background: color-mix(in srgb, #dc2626 12%, var(--panel));
}
.fas-directory-card .fas-directory-archive:disabled {
  opacity: 0.6;
  cursor: progress;
}
.fas-directory-archived-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.fas-directory-archived-bar .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fas-directory-archived-bar b:empty {
  display: none;
}
.fas-directory-archived {
  margin-top: 10px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}
.fas-directory-archived-list {
  display: grid;
  gap: 8px;
}
.fas-directory-archived-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.fas-directory-archived-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.fas-directory-archived-row span {
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.fas-directory-archived-row .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fas-directory-archived-row [data-directory-archived-error] {
  flex-basis: 100%;
  margin: 0;
}
/* T18: เว็บไซต์ในเครือ FAS (ลิงก์ภายนอก ไม่ใช่ Academy ในระบบ) */
.fas-partner-sites {
  --fas-partner-ext: var(--sx-blue, #4DA3FF);
  margin-top: 22px;
}
#fas-directory-grid[hidden] ~ .fas-partner-sites {
  display: none;
}
.fas-partner-sites-head {
  display: grid;
  gap: 2px;
  margin: 0 0 10px;
}
.fas-partner-sites-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}
.fas-partner-sites-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.fas-directory-card.fas-partner-card {
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.fas-directory-card.fas-partner-card:hover,
.fas-directory-card.fas-partner-card:focus-visible {
  border-color: color-mix(in srgb, var(--fas-partner-ext) 60%, var(--border));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--fas-partner-ext) 14%, transparent);
  transform: translateY(-2px);
  outline: none;
}
.fas-directory-card.fas-partner-card img {
  box-shadow: 0 0 0 1px var(--border);
}
.fas-directory-card .fas-partner-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fas-partner-ext) 14%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fas-partner-ext) 45%, transparent);
  color: color-mix(in srgb, var(--fas-partner-ext) 80%, var(--text));
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.fas-directory-card .fas-partner-badge span {
  color: inherit;
  font-size: inherit;
}
.fas-directory-card .fas-partner-domain {
  color: color-mix(in srgb, var(--fas-partner-ext) 80%, var(--text));
  font-weight: 700;
  overflow-wrap: anywhere;
}
.fas-directory-card .fas-partner-open {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--fas-partner-ext) 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 88%, #fff);
  color: var(--text);
  box-shadow: 0 6px 16px color-mix(in srgb, #000 10%, transparent);
}
.fas-directory-card.fas-partner-card:hover .fas-partner-open,
.fas-directory-card.fas-partner-card:focus-visible .fas-partner-open {
  background: color-mix(in srgb, var(--fas-partner-ext) 18%, var(--panel));
}
@media (prefers-reduced-motion: reduce) {
  .fas-directory-card.fas-partner-card:hover,
  .fas-directory-card.fas-partner-card:focus-visible {
    transform: none;
  }
}
#fas-notice-msg {
  white-space: pre-line;
}
.fas-directory-package-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 22px;
  border: 0;
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
}
.fas-directory-package-dialog::backdrop {
  background: rgba(8, 10, 14, 0.62);
}
.fas-directory-package-dialog h3 {
  margin: 0 0 8px;
}
.fas-directory-package-choice {
  display: block;
  margin: 10px 0;
}
.fas-directory-package-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.fas-directory-package-picks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}
.fas-directory-package-picks .is-basic {
  background: color-mix(in srgb, #7d8582 12%, var(--panel));
  color: #59615e;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #7d8582 34%, var(--border));
}
.fas-directory-package-picks .is-plus {
  background: color-mix(in srgb, var(--lime) 22%, var(--panel));
  color: #2f6510;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 62%, transparent);
}
.fas-directory-package-picks .is-custom {
  background: linear-gradient(135deg, color-mix(in srgb, #ffe4a3 68%, var(--panel)), color-mix(in srgb, #d59a31 26%, var(--panel)));
  color: #80510a;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #c58b2a 62%, transparent);
}
html[data-fas-theme="dark"] body.fas-backend .fas-directory-package-picks .is-plus {
  color: #d7f5a2;
}
html[data-fas-theme="dark"] body.fas-backend .fas-directory-package-picks .is-basic {
  color: #d0d5d3;
}
html[data-fas-theme="dark"] body.fas-backend .fas-directory-package-picks .is-custom {
  color: #f6e7c4;
}
.fas-directory-package-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.fas-directory-form h2,
.fas-directory-form h3 {
  margin: 8px 0 12px;
}
.fas-directory-form h3 {
  font-size: 16px;
}
.fas-directory-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}
.fas-directory-fields .full,
.fas-directory-stadium,
.fas-directory-form .pdpa-consent {
  grid-column: 1 / -1;
}
.fas-directory-fields .fas-switch {
  align-items: center;
  min-height: 44px;
  margin: 4px 0 16px;
}
.fas-directory-stadium {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--text);
  font-weight: 600;
}
.fas-directory-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.fas-directory-back {
  margin-bottom: 8px;
}
@media (max-width: 980px) {
  .fas-directory-tools.is-people {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .fas-directory-tools,
  .fas-directory-tools.is-people,
  .fas-directory-fields {
    grid-template-columns: 1fr;
  }
}

/* View-as / role-perspective banner: sticky amber strip, distinct from normal admin UI */
.app.has-perspective {
  --fas-perspective-h: calc(52px + env(safe-area-inset-top, 0px));
}
.fas-perspective-banner {
  position: sticky;
  top: 0;
  z-index: 21;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  height: var(--fas-perspective-h, 52px);
  padding: env(safe-area-inset-top, 0px) 16px 0 20px;
  background: repeating-linear-gradient(-45deg, #f59e0b 0 18px, #fbbf24 18px 36px);
  border-bottom: 3px solid #b45309;
  box-shadow: 0 6px 18px rgba(180, 83, 9, 0.35);
  color: #1c1100;
  font-weight: 700;
}
.app.has-perspective .topbar {
  top: var(--fas-perspective-h, 52px);
}
.fas-perspective-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.fas-perspective-copy svg {
  flex: 0 0 auto;
}
.fas-perspective-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  line-height: 1.3;
}
.fas-perspective-text strong {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.fas-perspective-who {
  font-weight: 600;
}
.fas-perspective-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.25);
  animation: fas-perspective-pulse 1.6s ease-in-out infinite;
}
.fas-perspective-exit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px 0 12px;
  border: 2px solid #1c1100;
  border-radius: 999px;
  background: #1c1100;
  color: #fff7e6;
  box-shadow: 0 3px 0 #7c2d12;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}
.fas-perspective-exit:hover {
  background: #000;
  color: #fff;
  transform: translateY(-1px);
}
.fas-perspective-exit:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.fas-perspective-exit:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}
body.fas-gamepad-expanded .fas-perspective-banner {
  visibility: hidden;
  pointer-events: none;
}
@keyframes fas-perspective-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.25); }
  50% { box-shadow: 0 0 0 7px rgba(185, 28, 28, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .fas-perspective-dot { animation: none; }
  .fas-perspective-exit { transition: none; }
}
@media (max-width: 720px) {
  .app.has-perspective {
    --fas-perspective-h: calc(48px + env(safe-area-inset-top, 0px));
  }
  .fas-perspective-banner {
    gap: 8px;
    padding: env(safe-area-inset-top, 0px) 8px 0 12px;
  }
  .fas-perspective-long,
  .fas-perspective-who,
  .fas-perspective-copy svg {
    display: none;
  }
  .fas-perspective-text {
    font-size: 14px;
  }
  .fas-perspective-exit {
    min-height: 36px;
    padding: 0 12px 0 8px;
    font-size: 13px;
  }
}

/* T06 · ป้ายโรคประจำตัว + ข้อมูลฉุกเฉิน (อ่านอย่างเดียว) */
.fas-medical-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  width: max-content;
  margin: 2px 0;
  padding: 2px 8px 2px 6px;
  border: 0;
  border-radius: 999px;
  background: #d92d3a;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: 0 0 0 2px color-mix(in srgb, #d92d3a 25%, transparent);
}
.fas-medical-badge:hover,
.fas-medical-badge:focus-visible { background: #b81f2b; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, #d92d3a 45%, transparent); }
.fas-medical-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
.student-roster-name .fas-medical-badge span,
.lineup-plan-player .fas-medical-badge span { color: #fff; font-size: 11px; }
.lineup-plan-player .fas-medical-badge { display: flex; }

.fas-medical-sheet {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.fas-medical-sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
.fas-medical-sheet-body { display: grid; gap: 12px; padding: 18px; }
.fas-medical-sheet header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fas-medical-sheet header span { color: #ff6b76; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.fas-medical-sheet header h3 { margin: 2px 0 0; font-size: 18px; }
.fas-medical-sheet header small { display: block; color: var(--muted); font-size: 12px; }
.fas-medical-sheet h4 { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.fas-emergency-condition {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #d92d3a 55%, transparent);
  background: color-mix(in srgb, #d92d3a 14%, transparent);
}
.fas-emergency-condition span { display: inline-flex; align-items: center; gap: 6px; color: #ff6b76; font-size: 12px; font-weight: 700; }
.fas-emergency-condition span svg { width: 14px; height: 14px; }
.fas-emergency-condition p { margin: 0; font-size: 15px; font-weight: 600; white-space: pre-wrap; word-break: break-word; }
.fas-emergency-condition.is-none { border-color: var(--border); background: transparent; }
.fas-emergency-condition.is-none span { color: var(--muted); }
.fas-emergency-condition.is-none p { color: var(--muted); font-weight: 400; font-size: 13px; }

.fas-emergency-contacts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fas-emergency-contacts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-hover);
}
.fas-emergency-contacts li > div { display: grid; min-width: 0; gap: 1px; }
.fas-emergency-contacts b { font-size: 13px; }
.fas-emergency-contacts em { justify-self: start; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--lime) 20%, transparent); font-size: 10px; font-style: normal; }
.fas-emergency-contacts span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.fas-emergency-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}
.fas-emergency-call:hover,
.fas-emergency-call:focus-visible { background: #12843c; outline: none; }
.fas-emergency-call svg { width: 16px; height: 16px; }
.fas-emergency-call span { color: #fff; font-size: 13px; }
.fas-emergency-empty,
.fas-emergency-loading,
.fas-emergency-note { margin: 0; color: var(--muted); font-size: 12px; }
.fas-emergency-error { margin: 0; color: var(--danger); font-size: 13px; }

.fas-emergency-hero .student-attendance-hero-icon { color: #ff6b76; }
.fas-emergency-toolbar { flex-wrap: wrap; align-items: end; }
.fas-emergency-only { display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; min-height: 40px; font-size: 13px; white-space: nowrap; cursor: pointer; }
body.fas-backend .stories-toolbar .fas-emergency-only input,
.stories-toolbar .fas-emergency-only input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: 0 0 auto; accent-color: #d92d3a; }
.fas-emergency-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.fas-emergency-item {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
}
.fas-emergency-item.has-medical { border-color: color-mix(in srgb, #d92d3a 60%, transparent); box-shadow: inset 4px 0 0 #d92d3a; }
.fas-emergency-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fas-emergency-person > div { display: grid; min-width: 0; }
.fas-emergency-person b { font-size: 15px; }
.fas-emergency-person span { color: var(--muted); font-size: 12px; }
@media (max-width: 640px) {
  .fas-emergency-list { grid-template-columns: 1fr; }
  .fas-emergency-toolbar .stories-filter { flex: 1 1 100%; }
  .fas-medical-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; }
}

/* T09 role switcher (มุมมอง) */
.perspective-switch { position: relative; display: inline-flex; }
.perspective-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--lime) 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--lime) 10%, var(--panel));
  color: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.perspective-switch-btn strong { font-weight: 700; }
.perspective-switch-prefix { color: var(--muted); }
.perspective-switch-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 25%, transparent); }
.perspective-switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 6px;
  width: min(340px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.perspective-switch-menu[hidden] { display: none; }
.perspective-menu-head { padding: 2px 6px 4px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.perspective-group { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.perspective-group:first-of-type { border-top: 0; padding-top: 0; }
.perspective-group-title { padding: 2px 6px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perspective-group-title:has(.perspective-group-crest) { display: flex; align-items: center; gap: 6px; }
.perspective-group-crest { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }
.perspective-group-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.perspective-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.perspective-item:hover, .perspective-item:focus-visible { background: color-mix(in srgb, var(--lime) 8%, var(--panel)); border-color: color-mix(in srgb, var(--lime) 30%, var(--border)); outline: none; }
.perspective-item.is-active { background: color-mix(in srgb, var(--lime) 14%, var(--panel)); border-color: color-mix(in srgb, var(--lime) 55%, var(--border)); }
.perspective-item-dot { width: 10px; height: 10px; flex: 0 0 10px; border: 2px solid var(--muted); border-radius: 50%; }
.perspective-item.is-active .perspective-item-dot { border-color: var(--lime); background: var(--lime); }
.perspective-item-main { display: grid; min-width: 0; flex: 1 1 auto; }
.perspective-item-main strong { font-size: 14px; }
.perspective-item-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perspective-item-now { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--lime); color: #04110a; font-size: 11px; font-weight: 700; }
.perspective-empty { margin: 0; padding: 8px; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) {
  .perspective-switch-btn { min-height: 36px; padding: 6px 10px; gap: 6px; }
  .perspective-switch-prefix { display: none; }
  .perspective-switch-menu {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 140px);
  }
}

/* T09 «เพิ่มตัวเองเป็นโค้ช» */
.coach-self-panel { border-color: color-mix(in srgb, var(--lime) 40%, var(--border)); }
.coach-self-groups { margin: 4px 0 10px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; }
.coach-self-groups legend { padding: 0 6px; font-size: 13px; color: var(--muted); }
.coach-self-group-list { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-self-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}
body.fas-backend .coach-self-group input,
.coach-self-group input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--lime); }
.coach-self-group:has(input:checked) { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 12%, transparent); }

/* T09 own-child badge */
.own-child-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 60%, transparent);
  color: #f59e0b;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}
html[data-fas-theme="light"] .own-child-badge { color: #92400e; }

/* ===== T10 Academy staff role (เจ้าหน้าที่) · «จัดการสิทธิ์ผู้ใช้งาน» — ported from the approved mock (sx- prefix) ===== */
body.fas-backend { --sx-blue:#4DA3FF; --sx-purple:#B08CFF; --sx-amber:var(--warn); --sx-red:var(--danger); }
html[data-fas-theme="light"] body.fas-backend { --sx-blue:#1F6FEB; --sx-purple:#6B4FBB; --sx-amber:#A86A00; --sx-red:#C8283A; }
.side-link .sx-new{margin-left:auto;font-size:10px;font-weight:700;color:#08130b;background:var(--lime);border-radius:999px;padding:1px 7px;line-height:1.5}
/* ---------- page card ---------- */
.sx-page{display:grid;gap:16px}
.sx-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:22px 22px 18px;position:relative}
.sx-card.is-accent{border-left:3px solid var(--lime)}
.sx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.sx-kicker{display:block;color:var(--lime);font-size:12px;font-weight:700;letter-spacing:.02em;margin-bottom:4px}
.sx-head h2{font-size:22px;font-weight:700;line-height:1.35;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sx-head p{color:var(--muted);font-size:14px;margin-top:4px;line-height:1.6}
.sx-head .btn{white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.sx-head .btn svg{width:16px;height:16px}
.sx-summary{margin:16px 0 14px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;font-size:13px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;align-items:center;background:var(--bg-card-2)}
.sx-summary b{color:var(--text);font-weight:600}
.sx-summary .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.sx-tools{display:flex;gap:12px;align-items:flex-end;margin-bottom:12px}
.sx-field{display:grid;gap:6px;font-size:12px;color:var(--muted);font-weight:600}
.sx-input{height:42px;border-radius:10px;border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text);display:flex;align-items:center;gap:8px;padding:0 12px;font-size:14px;font-weight:400}
.sx-input svg{width:16px;height:16px;color:var(--faint)}
.sx-input .ph{color:var(--faint)}
.sx-input.sel{justify-content:space-between;min-width:170px}
/* ---------- table ---------- */
.sx-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.sx-table th{color:var(--muted);font-weight:600;font-size:12px;text-align:left;padding:10px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.sx-table td{padding:14px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.sx-table tr.is-owner td{background:color-mix(in srgb,var(--lime) 5%,transparent)}
.sx-table tr.is-suspended td{opacity:.62}
.sx-table tr.is-suspended td.sx-actions-cell{opacity:1}
.sx-person{display:flex;align-items:center;gap:12px;min-width:0}
.sx-ava{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 auto;color:#06110a;background:var(--lime);position:relative}
.sx-ava.t2{background:#4DA3FF;color:#04111f}.sx-ava.t3{background:#B08CFF;color:#160b2b}.sx-ava.t4{background:#F5C451;color:#231800}.sx-ava.t5{background:#3EC6D4;color:#021a1d}.sx-ava.t6{background:#FF9F6B;color:#2a0f00}
.sx-ava.lg{width:52px;height:52px;font-size:18px}
.sx-ava .lock{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--lime)}
.sx-ava .lock svg{width:10px;height:10px}
.sx-person b{display:block;font-weight:600;font-size:14px;line-height:1.4}
.sx-person small{display:block;color:var(--muted);font-size:12px;line-height:1.45}
.sx-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap;line-height:1.5;border:1px solid transparent}
.sx-pill svg{width:13px;height:13px}
.sx-pill.b-fin{color:var(--lime);background:var(--lime-dim);border-color:color-mix(in srgb,var(--lime) 35%,transparent)}
.sx-pill.b-att{color:var(--sx-blue);background:color-mix(in srgb,var(--sx-blue) 12%,transparent);border-color:color-mix(in srgb,var(--sx-blue) 35%,transparent)}
.sx-pill.b-adm{color:var(--sx-purple);background:color-mix(in srgb,var(--sx-purple) 12%,transparent);border-color:color-mix(in srgb,var(--sx-purple) 35%,transparent)}
.sx-pill.b-cus{color:var(--sx-amber);background:color-mix(in srgb,var(--sx-amber) 10%,transparent);border-color:color-mix(in srgb,var(--sx-amber) 35%,transparent)}
.sx-pill.b-own{color:var(--text);background:var(--bg-card-2);border-color:var(--border-strong)}
.sx-pill.b-own svg{color:var(--lime)}
.sx-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.sx-chip{font-size:11.5px;color:var(--muted);border:1px solid var(--border-strong);border-radius:7px;padding:1px 7px;line-height:1.6;white-space:nowrap}
.sx-chip.more{color:var(--text);font-weight:600}
.sx-branch{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.sx-branch svg{width:14px;height:14px;color:var(--muted)}
.sx-branch.all{color:var(--muted)}
.sx-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;white-space:nowrap}
.sx-status i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--lime);box-shadow:0 0 0 3px var(--lime-dim)}
.sx-status.pending{color:var(--sx-amber)}.sx-status.pending i{background:var(--sx-amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--sx-amber) 18%,transparent)}
.sx-status.off{color:var(--sx-red)}.sx-status.off i{background:var(--sx-red);box-shadow:0 0 0 3px color-mix(in srgb,var(--sx-red) 18%,transparent)}
.sx-status.on{color:var(--lime)}
.sx-sub{display:block;color:var(--muted);font-size:11.5px;font-weight:400;margin-top:3px;white-space:nowrap}
.sx-date b{display:block;font-weight:500;font-size:13px;white-space:nowrap}
.sx-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;position:relative}
.sx-actions .btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sx-actions .btn svg{width:14px;height:14px}
.sx-more{width:36px;height:36px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--text);display:grid;place-items:center}
.sx-more svg{width:18px;height:18px}
.sx-more.is-open{border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-dim)}
.sx-locked-note{display:inline-flex;align-items:center;gap:6px;color:var(--faint);font-size:12px;white-space:nowrap}
.sx-locked-note svg{width:14px;height:14px}
.sx-menu{position:absolute;right:0;top:44px;z-index:30;width:260px;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:14px;box-shadow:var(--shadow);padding:6px;text-align:left}
.sx-menu button{display:flex;width:100%;align-items:flex-start;gap:10px;border:0;background:transparent;color:var(--text);padding:10px 10px;border-radius:10px;font-size:13.5px;font-weight:600;text-align:left;line-height:1.4}
.sx-menu button svg{width:16px;height:16px;margin-top:2px;flex:0 0 auto}
.sx-menu button small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.sx-menu button.hover{background:var(--ghost-hover)}
.sx-menu button.danger{color:var(--sx-red)}
.sx-menu hr{border:0;border-top:1px solid var(--border);margin:4px 6px}
.sx-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.sx-foot a{color:var(--lime);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:2px}
.sx-foot a svg{width:14px;height:14px}
.sx-foot span{display:inline-flex;align-items:center;gap:6px}
.sx-foot span svg{width:14px;height:14px}
/* ---------- empty / loading / no access ---------- */
.sx-empty{display:grid;justify-items:center;text-align:center;padding:34px 20px 30px;border:1px dashed var(--border-strong);border-radius:14px;margin-top:6px;background:var(--bg-card-2)}
.sx-empty svg.art{width:180px;height:120px;margin-bottom:10px}
.sx-empty h3{font-size:18px;font-weight:700}
.sx-empty p{color:var(--muted);font-size:13.5px;max-width:460px;margin:6px 0 16px;line-height:1.6}
.sx-empty .btn{display:inline-flex;gap:8px;align-items:center}
.sx-empty .btn svg{width:16px;height:16px}
.sx-skel td{padding:16px 12px}
.sx-skel .ln{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,var(--bg-card-2),color-mix(in srgb,var(--text) 9%,var(--bg-card-2)),var(--bg-card-2));}
.sx-skel .ln + .ln{margin-top:8px}
.sx-skel .circle{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--text) 8%,var(--bg-card-2));flex:0 0 auto}
.sx-loading-msg{display:flex;align-items:center;gap:10px;color:var(--lime);font-size:13px;font-weight:600;margin:16px 0 12px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--lime) 30%,var(--border));border-radius:12px}
.sx-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--lime-dim);border-top-color:var(--lime)}
.sx-noaccess{max-width:560px;margin:60px auto 0;text-align:center;padding:36px 34px 30px}
.sx-noaccess .ico{width:64px;height:64px;border-radius:18px;margin:0 auto 16px;display:grid;place-items:center;background:color-mix(in srgb,var(--sx-amber) 12%,transparent);color:var(--sx-amber);border:1px solid color-mix(in srgb,var(--sx-amber) 30%,transparent)}
.sx-noaccess .ico svg{width:30px;height:30px}
.sx-noaccess h2{font-size:22px;font-weight:700}
.sx-noaccess p{color:var(--muted);font-size:14px;line-height:1.65;margin:8px 0 20px}
.sx-noaccess .btn{display:inline-flex;align-items:center;gap:8px}
.sx-noaccess .btn svg{width:16px;height:16px}
.sx-noaccess .meta{margin-top:16px;font-size:12px;color:var(--faint)}
/* ---------- modal ---------- */
.sx-overlay{position:fixed;overflow-y:auto;inset:0;z-index:200;background:rgba(0,0,0,.66);display:flex;justify-content:center;align-items:flex-start;padding:36px 20px}
html[data-fas-theme="light"] .sx-overlay{background:rgba(20,28,22,.45)}
.sx-modal{width:min(800px,100%);background:var(--bg-card);border:1px solid var(--border-strong);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden}
.sx-mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:22px 24px 16px;border-bottom:1px solid var(--border)}
.sx-mhead h2{font-size:21px;font-weight:700;line-height:1.35}
.sx-mhead p{font-size:13px;color:var(--muted);margin-top:2px}
.sx-mhead .r{display:flex;gap:10px;align-items:center}
.sx-steps{display:flex;gap:6px;padding:12px 24px;border-bottom:1px solid var(--border);background:var(--bg-card-2);flex-wrap:wrap}
.sx-step{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap;padding:4px 10px 4px 4px;border-radius:999px}
.sx-step b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;border:1px solid var(--border-strong);color:var(--muted)}
.sx-step.done b{background:var(--lime);color:#06110a;border-color:var(--lime)}
.sx-step.done b svg{width:13px;height:13px}
.sx-step.now{color:var(--text);background:var(--lime-dim)}
.sx-step.now b{border-color:var(--lime);color:var(--lime)}
.sx-step-sep{color:var(--faint);align-self:center;display:inline-flex}
.sx-step-sep svg{width:14px;height:14px}
.sx-mbody{padding:6px 24px 8px}
.sx-sec{padding:18px 0;border-bottom:1px solid var(--border)}
.sx-sec:last-child{border-bottom:0}
.sx-sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.sx-sec-h .n{font-size:11.5px;font-weight:700;color:var(--lime);letter-spacing:.02em;white-space:nowrap}
.sx-sec-h h3{font-size:16px;font-weight:700}
.sx-sec-h .hint{font-size:12.5px;color:var(--muted);font-weight:400}
.sx-search{display:flex;gap:10px;align-items:flex-end}
.sx-search .sx-field{flex:1}
.sx-search .btn{height:42px;white-space:nowrap}
.sx-found{margin-top:12px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--lime) 40%,var(--border));background:var(--lime-dim)}
.sx-found .who{flex:1;min-width:0}
.sx-found .who b{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sx-found .who small{display:block;color:var(--muted);font-size:12.5px}
.sx-found .roles{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.sx-okline{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:13px;color:var(--text);line-height:1.55}
.sx-okline svg{width:16px;height:16px;color:var(--lime);margin-top:3px;flex:0 0 auto}
.sx-notfound{margin-top:12px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--sx-amber) 40%,var(--border));background:color-mix(in srgb,var(--sx-amber) 7%,transparent)}
.sx-notfound .t{display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px;color:var(--sx-amber)}
.sx-notfound .t svg{width:16px;height:16px}
.sx-notfound p{font-size:13px;color:var(--muted);margin:6px 0 12px;line-height:1.55}
.sx-notfound .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sx-notfound .btn{display:inline-flex;align-items:center;gap:8px}
.sx-notfound .btn svg{width:15px;height:15px}
.sx-notfound .exp{font-size:12.5px;color:var(--muted);display:inline-flex;gap:6px;align-items:flex-start;line-height:1.5}
.sx-notfound .exp svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.sx-bundles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sx-bundle{border:1px solid var(--border-strong);border-radius:14px;padding:12px 14px 12px 44px;position:relative;background:var(--bg-card-2);min-height:66px}
.sx-bundle .radio{position:absolute;left:14px;top:15px;width:18px;height:18px;border-radius:50%;border:2px solid var(--border-strong)}
.sx-bundle b{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:700;line-height:1.45;flex-wrap:wrap}
.sx-bundle small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:2px}
.sx-bundle .def{font-size:10.5px;font-weight:700;color:var(--muted);border:1px solid var(--border-strong);border-radius:999px;padding:0 7px;line-height:1.6}
.sx-bundle.is-on{border-color:var(--lime);background:var(--lime-dim);box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 10%,transparent)}
.sx-bundle.is-on .radio{border-color:var(--lime);background:radial-gradient(circle,var(--lime) 0 4px,transparent 5px)}
.sx-autonote{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin-bottom:12px;line-height:1.55}
.sx-autonote svg{width:15px;height:15px;color:var(--lime);margin-top:2px;flex:0 0 auto}
.sx-autonote.warn svg{color:var(--sx-amber)}
.sx-autonote b{color:var(--text);font-weight:600}
.sx-perms{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sx-perm{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px;border:1px solid var(--border);min-height:58px;background:transparent}
.sx-perm.is-on{border-color:color-mix(in srgb,var(--lime) 30%,var(--border));background:color-mix(in srgb,var(--lime) 5%,transparent)}
.sx-perm.changed{box-shadow:0 0 0 2px color-mix(in srgb,var(--sx-amber) 55%,transparent)}
.sx-box{width:22px;height:22px;border-radius:6px;border:2px solid var(--border-strong);display:grid;place-items:center;flex:0 0 auto;margin-top:1px;color:#06110a}
.sx-box svg{width:14px;height:14px;stroke-width:3}
.is-on > .sx-box,.sx-box.on{background:var(--lime);border-color:var(--lime)}
.sx-perm .tx{min-width:0;flex:1}
.sx-perm .tx b{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600;line-height:1.45;flex-wrap:wrap}
.sx-perm .tx small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.sx-pdpa{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--sx-red);border:1px solid color-mix(in srgb,var(--sx-red) 45%,transparent);background:color-mix(in srgb,var(--sx-red) 9%,transparent);border-radius:999px;padding:0 7px;line-height:1.65;white-space:nowrap}
.sx-pdpa svg{width:11px;height:11px}
.sx-shield{color:var(--sx-red);display:inline-flex}
.sx-shield svg{width:15px;height:15px}
.sx-owneronly{margin-top:12px;border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--text) 4%,var(--bg-card-2));border:1px solid var(--border)}
.sx-owneronly .t{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}
.sx-owneronly .t svg{width:15px;height:15px}
.sx-owneronly .t small{font-weight:400;color:var(--faint)}
.sx-owneronly ul{list-style:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 14px}
.sx-owneronly li{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--faint);line-height:1.45}
.sx-owneronly .sx-box{width:18px;height:18px;border-radius:5px;opacity:.5;margin:0;color:var(--faint);border-width:1.5px}
.sx-owneronly .sx-box svg{width:10px;height:10px;stroke-width:2.2}
.sx-branches{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sx-radio{display:inline-flex;gap:8px;align-items:center;font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:12px;border:1px solid var(--border-strong);min-height:44px}
.sx-radio i{width:16px;height:16px;border-radius:50%;border:2px solid var(--border-strong);display:inline-block}
.sx-radio.is-on{border-color:var(--lime);background:var(--lime-dim)}
.sx-radio.is-on i{border-color:var(--lime);background:radial-gradient(circle,var(--lime) 0 3px,transparent 4px)}
.sx-bchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sx-bchip{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;border-radius:999px;padding:6px 12px;border:1px solid var(--border-strong);color:var(--muted);white-space:nowrap}
.sx-bchip svg{width:13px;height:13px}
.sx-bchip.is-on{color:var(--lime);border-color:var(--lime);background:var(--lime-dim);font-weight:600}
.sx-bchips.dim .sx-bchip{opacity:.45}
.sx-mfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;border-top:1px solid var(--border);background:var(--bg-card-2)}
.sx-mfoot .note{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.sx-mfoot .note svg{width:14px;height:14px}
.sx-mfoot .b{display:flex;gap:10px}
.sx-mfoot .btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sx-mfoot .btn svg{width:16px;height:16px}
.sx-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);background:transparent}
.sx-x svg{width:16px;height:16px}
/* confirm */
.sx-confirm{width:min(440px,100%);margin-top:150px;background:var(--bg-card);border:1px solid color-mix(in srgb,var(--sx-red) 45%,var(--border-strong));border-radius:18px;padding:24px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.sx-confirm .ico{width:54px;height:54px;border-radius:16px;margin:0 auto 12px;display:grid;place-items:center;background:color-mix(in srgb,var(--sx-red) 12%,transparent);color:var(--sx-red)}
.sx-confirm .ico svg{width:26px;height:26px}
.sx-confirm h3{font-size:18px;font-weight:700;line-height:1.45}
.sx-confirm p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:8px 0 6px}
.sx-confirm ul{list-style:none;text-align:left;margin:12px 0 18px;padding:12px 14px;border-radius:12px;background:var(--bg-card-2);border:1px solid var(--border);display:grid;gap:6px}
.sx-confirm li{font-size:12.8px;display:flex;gap:8px;line-height:1.5;color:var(--text)}
.sx-confirm li svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px}
.sx-confirm li.x svg{color:var(--sx-red)} .sx-confirm li.ok svg{color:var(--lime)}
.sx-confirm .btns{display:grid;gap:10px}
.sx-confirm .btn{height:46px;justify-content:center;display:flex;align-items:center;gap:8px;width:100%}
.btn.sx-danger{background:var(--sx-red);color:#fff;border:1px solid var(--sx-red);font-weight:700}
.sx-confirm .alt{font-size:13px;color:var(--muted);margin-top:12px}
.sx-confirm .alt a{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* staff dashboard */
.dashboard-stat-grid.sx-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.sx-staff-hero-tag{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--muted);border:1px solid var(--border-strong);border-radius:999px;padding:3px 10px}
.sx-staff-hero-tag svg{width:13px;height:13px;color:var(--lime)}
/* ---------- mobile cards ---------- */
.sx-mlist{display:grid;gap:10px}
.sx-mcard{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--bg-card-2)}
.sx-mcard.is-owner{border-color:color-mix(in srgb,var(--lime) 30%,var(--border));background:color-mix(in srgb,var(--lime) 5%,var(--bg-card-2))}
.sx-mcard.is-suspended .sx-person,.sx-mcard.is-suspended .sx-mrow{opacity:.62}
.sx-mcard .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.sx-mrow{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:10px;font-size:13px;flex-wrap:wrap}
.sx-mrow .lbl{color:var(--muted);font-size:12px}
.sx-mbtns{display:flex;gap:8px;margin-top:12px}
.sx-mbtns .btn{flex:1;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.sx-mbtns .btn svg{width:15px;height:15px}
.sx-mbtns .sx-more{width:44px;height:44px;flex:0 0 44px}
/* full-screen mobile sheet */
.sx-sheet{position:fixed;inset:0;z-index:220;background:var(--bg-card);display:flex;flex-direction:column}
.sx-sheet .sh{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--panel)}
.sx-sheet .sh h2{font-size:17px;font-weight:700;flex:1;line-height:1.35}
.sx-sheet .sh h2 small{display:block;font-size:12px;color:var(--muted);font-weight:400}
.sx-sheet .sh .sx-x{width:44px;height:44px}
.sx-prog{padding:12px 16px 10px;border-bottom:1px solid var(--border)}
.sx-prog .bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sx-prog .bar i{height:5px;border-radius:3px;background:var(--border-strong)}
.sx-prog .bar i.on{background:var(--lime)}
.sx-prog .lab{display:flex;justify-content:space-between;margin-top:8px;font-size:12.5px;color:var(--muted)}
.sx-prog .lab b{color:var(--text);font-weight:700}
.sx-sheet .sb{padding:4px 16px 120px;flex:1}
.sx-sheet .sb .sx-sec{padding:16px 0}
.sx-sheet .sx-bundles,.sx-sheet .sx-perms{grid-template-columns:1fr}
.sx-sheet .sx-perm{min-height:64px;padding:12px}
.sx-sheet .sx-bundle{min-height:64px}
.sx-sheet .sx-owneronly ul{grid-template-columns:1fr}
.sx-sheet .sx-search{flex-direction:column;align-items:stretch}
.sx-sheet .sx-search .btn,.sx-sheet .sx-input{height:46px}
.sx-sheet .sf{position:fixed;left:0;right:0;bottom:0;padding:12px 16px 18px;background:color-mix(in srgb,var(--bg-card) 94%,transparent);border-top:1px solid var(--border);display:flex;gap:10px;box-shadow:0 -12px 30px rgba(0,0,0,.35);z-index:5}
.sx-sheet .sf .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1}
.sx-sheet .sf .btn.grow{flex:2}
.sx-sheet .sf .btn svg{width:16px;height:16px}
.sx-bsum{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border-strong);margin-bottom:12px;font-size:13px}
.sx-bsum a{color:var(--lime);font-weight:600;text-decoration:none;white-space:nowrap}
.sx-nextlink{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 14px;border-radius:12px;border:1px dashed var(--border-strong);font-size:13.5px;margin-top:4px}
.sx-nextlink span{color:var(--muted);font-size:12px}
.sx-nextlink svg{width:16px;height:16px;color:var(--muted)}
@media (max-width: 760px){
  .sx-card{padding:16px 14px 14px}
  .sx-head{flex-direction:column;gap:12px}
  .sx-head .btn{width:100%;justify-content:center;min-height:46px}
  .sx-head h2{font-size:19px}
  .sx-summary{gap:6px 14px;font-size:12.5px}
  .sx-tools{flex-direction:column;align-items:stretch}
  .sx-tools .sx-input{height:46px}
  .sx-confirm{margin-top:0}
  .sx-overlay{align-items:center;padding:16px;position:fixed}
}
.sx-table{table-layout:fixed}
.sx-table td .sx-sub{white-space:normal}
.sx-coachonly{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--sx-blue);border:1px solid color-mix(in srgb,var(--sx-blue) 40%,transparent);background:color-mix(in srgb,var(--sx-blue) 9%,transparent);border-radius:999px;padding:1px 9px;line-height:1.6;white-space:nowrap}
.sx-coachonly svg{width:12px;height:12px}
.sx-subperm{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-strong);font-size:12.5px;font-weight:600;color:var(--muted)}
.sx-subperm.is-on{color:var(--text)}
.sx-box.sm{width:18px;height:18px;border-radius:5px;margin:0;border-width:1.5px}
.sx-box.sm svg{width:11px;height:11px}
.sx-notincl{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:10px 14px;border-radius:12px;border:1px dashed var(--border-strong);font-size:12.5px;color:var(--muted);line-height:1.55}
.sx-notincl svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px}
.sx-notincl b{color:var(--text);font-weight:600}
.sx-radio.is-locked svg{width:13px;height:13px;color:var(--muted)}
.sx-branch-note{font-size:12.5px;color:var(--muted);line-height:1.5;flex:1;min-width:220px}
.sx-nextlink.is-locked{border-style:solid;background:var(--bg-card-2)}
@media (max-width: 760px){
  .sx-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .sx-tools .sx-field:first-child{grid-column:1/-1}
  .sx-tools .sx-input.sel{min-width:0}
}
/* r3: coach-only locked row, mini sample tag, long branch wrapping */
.sx-coachbox{margin-top:12px;border-radius:14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--sx-blue) 30%,var(--border));background:color-mix(in srgb,var(--sx-blue) 6%,var(--bg-card-2))}
.sx-coachbox .t{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:700;color:var(--sx-blue);margin-bottom:8px;flex-wrap:wrap}
.sx-coachbox .t svg{width:15px;height:15px}
.sx-coachbox .t small{font-weight:400;color:var(--muted)}
.sx-coachbox .row{display:flex;gap:12px;align-items:flex-start;opacity:.75}
.sx-coachbox .sx-box{opacity:.6;color:var(--faint)}
.sx-coachbox .sx-box svg{width:11px;height:11px;stroke-width:2.2}
.sx-coachbox .tx b{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600;line-height:1.45;flex-wrap:wrap;color:var(--muted)}
.sx-coachbox .tx small{display:block;color:var(--faint);font-size:12px;line-height:1.5}
.sx-branch{white-space:normal;align-items:flex-start;line-height:1.45}
.sx-branch svg{margin-top:2px;flex:0 0 auto}
.sx-bchip{white-space:normal;line-height:1.4;text-align:left}
.sx-bchip svg{flex:0 0 auto}
/* T10 overrides for the live app (mock rules above are static) */
.sx-menu button:hover,.sx-menu button:focus-visible{background:var(--ghost-hover);outline:none}
.sx-menu[hidden],.sx-overlay[hidden]{display:none !important}
.sx-table-wrap{overflow-x:auto}
.sx-search{display:flex;gap:10px;align-items:flex-end}
.sx-search .sx-field{flex:1}
.sx-search input.sx-input{width:100%;font:inherit;font-size:14px}
input.sx-input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-dim)}
.sx-tools .sx-field input.sx-input,.sx-tools .sx-field select.sx-input{width:100%;font:inherit;font-size:14px}
.sx-tools .sx-field:first-child{flex:1}
.sx-bundle,.sx-perm,.sx-bchip,.sx-radio,.sx-subperm{cursor:pointer;font:inherit;text-align:left}
.sx-perm.is-disabled,.sx-radio.is-locked,.sx-bchip.is-disabled{cursor:not-allowed}
.sx-bundle:focus-visible,.sx-perm:focus-visible,.sx-bchip:focus-visible,.sx-radio:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.sx-sheet{z-index:260}
.sx-sheet .sb{overflow-y:auto;-webkit-overflow-scrolling:touch}
.sx-sheet .sx-sec[hidden]{display:none}
.sx-invite-link{display:flex;gap:8px;align-items:center;margin-top:10px}
.sx-invite-link input{flex:1;min-width:0;height:40px;border-radius:10px;border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text);padding:0 10px;font-size:12.5px}
.sx-hist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sx-hist li{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-card-2);font-size:13px;text-align:left}
.sx-hist li b{font-weight:700}
.sx-hist li small{color:var(--muted);font-size:12px}
.sx-confirm.is-history{border-color:var(--border-strong);text-align:left}
.sx-feedback{margin:10px 0 0}
.sx-feedback[hidden]{display:none}
.fee-period-actor{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.staff-invite-page{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.staff-invite-card{max-width:520px;width:100%}
.staff-invite-card .sx-chips{justify-content:center;margin:10px 0 4px}
.staff-invite-card .btns{display:grid;gap:10px;margin-top:16px}
/* T10: long Academy names wrap to 2 lines in the sidebar instead of «…» */
.sidebar .sidebar-academy-name.academy-name:not(.sidebar-login-name){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;text-overflow:clip;overflow:hidden;overflow-wrap:anywhere;line-height:1.25}
@media (max-width: 760px){
  .sx-table-wrap{display:none}
  .sx-head .sx-head-actions{width:100%}
}
@media (min-width: 761px){
  .sx-mlist{display:none}
}
@media (max-width: 1100px){
  .dashboard-stat-grid.sx-five{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* T10: staff mode hides buttons the grant does not cover (the server refuses them anyway) */
.academy-members-page.staff-no-admit #academy-member-remove-all,
.academy-members-page.staff-no-admit #academy-member-reject,
.academy-members-page.staff-no-admit #academy-member-admit-all,
.academy-members-page.staff-no-admit .member-admit-btn,
.academy-members-page.staff-no-admit #academy-member-save,
.academy-members-page.staff-no-admit .stories-check,
.academy-members-page.staff-no-view [data-member-tab="available"],
.academy-members-page.staff-no-view [data-member-tab="alumni"],
.academy-members-page.staff-no-fees #academy-member-bulk-unpaid,
.academy-members-page.staff-no-admit #academy-member-bulk-unpaid { display: none !important; }
.study-month-card .study-month-summary { margin: 0 0 10px; font-size: 14px; }
.study-month-card .study-month-status { min-height: 44px; max-width: 100%; }
.study-month-card .stories-filter,
.attendance-report-layout .btn { white-space: nowrap; }
@media (max-width: 390px) {
  .study-month-card .stories-toolbar { display: flex; flex-direction: column; align-items: stretch; }
  .study-month-card .btn { min-height: 44px; }
}
.academy-members-page.staff-no-fees #academy-member-fee-filter-wrap,
.academy-members-page.staff-no-fees .member-col-fee,
.app.is-staff-mode [data-coach-edit],
.app.is-staff-mode [data-coach-assign],
.app.is-staff-mode #coach-self-panel{display:none !important}
body.sx-modal-open{overflow:hidden}
/* T13: Display photos fit their frames on «สิทธิ์เจ้าหน้าที่» (list + add/edit dialog) — scoped to this view */
.staff-access-page .sx-ava{aspect-ratio:1/1;overflow:visible}
.staff-access-page .sx-ava > img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:50%;object-fit:cover;object-position:50% 20%}
.staff-access-page .sx-ava .lock{z-index:1}
.staff-access-page .sx-ava.lg{width:60px;height:60px;font-size:20px}

/* ===== T17 coach invite tabs: «เชิญได้หลายคน» / «เชิญเฉพาะอีเมล» (one card, folder tabs) ===== */
body.fas-backend .card.coach-invite-tabs-card { padding-top: 14px; }
.coach-invite-tabs {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 0 2px; border-bottom: 1px solid var(--border-strong);
}
.coach-invite-tab {
  position: relative; flex: 0 1 300px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 -1px; padding: 8px 14px 8px 10px;
  border: 1px solid var(--border); border-bottom-color: var(--border-strong);
  border-radius: 12px 12px 0 0;
  background: var(--bg-card-2); color: var(--muted);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, padding .15s ease;
}
.coach-invite-tab::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 4px;
  border-radius: 12px 12px 0 0; background: var(--border-strong);
  transition: background-color .15s ease;
}
.coach-invite-tab:hover { color: var(--text); }
.coach-invite-tab:hover::before { background: color-mix(in srgb, var(--lime) 45%, var(--border-strong)); }
.coach-invite-tab.is-active {
  z-index: 1; padding-top: 12px; color: var(--text);
  border-color: var(--border-strong); border-bottom-color: var(--bg-card);
  background: linear-gradient(180deg, var(--lime-dim), var(--bg-card) 72%), var(--bg-card);
  box-shadow: 0 -6px 14px -10px rgba(0, 0, 0, .55);
}
.coach-invite-tab.is-active::before { background: var(--lime); }
.coach-invite-tab:focus { outline: none; }
.coach-invite-tab:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.coach-invite-tab-icon {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px 9px 9px 3px;
  background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted);
}
.coach-invite-tab.is-active .coach-invite-tab-icon { background: var(--lime); color: #07120b; }
.coach-invite-tab-text { display: grid; min-width: 0; gap: 1px; }
.coach-invite-tab-label { font-size: 14px; font-weight: 700; line-height: 1.3; }
.coach-invite-tab-sub {
  font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coach-invite-tabs-card .coach-invite-tabpanel { gap: 10px; padding-top: 14px; }
.coach-invite-tabs-card .coach-invite-tabpanel:focus { outline: none; }
.coach-invite-tabs-card .coach-invite-tabpanel:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 6px; }
.coach-invite-tabs-card .coach-invite-panel p { font-size: 13.5px; line-height: 1.5; }
.coach-invite-tabs-card #coach-open-invite-status { font-size: 13px; }
.coach-invite-tabs-card #coach-open-invite-panel .coach-invite-search { grid-template-columns: minmax(0, 150px) minmax(0, 170px); justify-content: start; }
.coach-invite-tabs-card .coach-invite-search select,
.coach-invite-tabs-card .coach-invite-search input { width: 100%; height: 44px; min-height: 44px; }
.coach-invite-tabs-card #coach-open-invite-panel .coach-invite-search { align-items: start; }
.coach-invite-tabs-card .coach-invite-copy input { min-height: 44px; }
.coach-invite-tabs-card .coach-invite-search .btn,
.coach-invite-tabs-card .coach-invite-copy .btn { min-height: 44px; padding: 9px 16px; }
.academy-coaches-page.is-coach-self #coach-invite-tabs-card { display: none !important; }
html[data-fas-theme="light"] body.fas-backend .coach-invite-tab.is-active { box-shadow: 0 -6px 14px -10px rgba(20, 28, 22, .35); }
html[data-fas-theme="light"] body.fas-backend .coach-invite-tab.is-active .coach-invite-tab-icon { color: #ffffff; }
@media (max-width: 760px) {
  body.fas-backend .card.coach-invite-tabs-card { padding: 12px 14px 14px 16px; }
  .coach-invite-tab { flex: 1 1 0; }
  .coach-invite-tabs-card .coach-invite-search { grid-template-columns: minmax(0, 1fr) auto; }
  .coach-invite-tabs-card #coach-open-invite-panel .coach-invite-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-invite-tabs-card .coach-invite-copy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-invite-tabs-card .coach-invite-copy input,
  .coach-invite-tabs-card #coach-open-invite-create { grid-column: 1 / -1; }
  .coach-invite-tabs-card .coach-invite-copy .btn { padding: 9px 10px; white-space: normal; line-height: 1.25; }
}
@media (max-width: 480px) {
  .coach-invite-tabs { gap: 4px; padding: 0; }
  .coach-invite-tab { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 6px 7px; text-align: center; }
  .coach-invite-tab.is-active { padding-top: 11px; }
  .coach-invite-tab-icon { width: 28px; height: 28px; }
  .coach-invite-tab-label { font-size: 13px; }
  .coach-invite-tab-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* ===== /T17 coach invite tabs ===== */
/* ===== T19 group age by birth year (วิธีนับอายุสำหรับจัดรุ่น) ===== */
.group-age-card { display: grid; gap: 14px; min-width: 0; }
body.fas-backend .card.group-age-card { box-shadow: inset 4px 0 0 var(--lime); }
.group-age-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.group-age-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--lime-dim); color: var(--lime); }
.group-age-icon svg { display: block; width: 20px; height: 20px; }
.group-age-title { flex: 1 1 auto; min-width: 0; }
.group-age-title h3 { margin: 0; font-size: 16px; line-height: 1.35; }
.group-age-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.group-age-current { flex: 0 0 auto; align-self: center; padding: 5px 11px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.group-age-card.is-birth-year .group-age-current { border-color: color-mix(in srgb, var(--lime) 55%, var(--border)); background: var(--lime-dim); color: var(--lime); }
.group-age-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.group-age-option { position: relative; display: block; min-width: 0; }
.group-age-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.group-age-option-face { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--input-bg); pointer-events: none; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.group-age-option-face i { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--input-bg); box-shadow: inset 0 0 0 3px var(--input-bg); }
.group-age-option-text { display: grid; gap: 4px; min-width: 0; }
.group-age-option-text b { color: var(--text); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.group-age-option-text small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.group-age-option:hover .group-age-option-face { border-color: color-mix(in srgb, var(--lime) 60%, var(--border)); }
.group-age-option:has(input:focus-visible) .group-age-option-face { outline: 2px solid var(--lime); outline-offset: 2px; }
.group-age-option:has(input:checked) .group-age-option-face { border-color: var(--lime); background: var(--lime-dim); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 35%, transparent); }
.group-age-option:has(input:checked) .group-age-option-face i { border-color: var(--lime); background: var(--lime); }
.group-age-option:has(input:checked) .group-age-option-text b { color: var(--lime); }
.group-age-card.is-readonly .group-age-option input { cursor: default; }
.group-age-card.is-readonly .group-age-option:hover .group-age-option-face { border-color: var(--border); }
.group-age-card.is-readonly .group-age-option:not(:has(input:checked)) .group-age-option-face { opacity: .6; }
.group-age-example { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--bg-card-2); color: var(--muted); font-size: 13px; line-height: 1.5; }
.group-age-example b { color: var(--text); font-weight: 700; }
.group-age-example-tag { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; background: var(--lime-dim); color: var(--lime); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.group-age-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.group-age-note { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
/* age shown next to a รุ่น under birth-year mode: "10 ปี" + small «ปีเกิด 2559» */
.group-age { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%; line-height: 1.2; }
.group-age-hint { color: var(--muted); font-size: 10.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.academy-group-condition .group-age-cond { color: var(--lime); }
html[data-fas-theme="light"] body.fas-backend .group-age-option:has(input:checked) .group-age-option-text b,
html[data-fas-theme="light"] body.fas-backend .group-age-card.is-birth-year .group-age-current { color: var(--lime-2); }
@media (max-width: 760px) {
  .group-age-options { grid-template-columns: 1fr; }
  .group-age-head { flex-wrap: wrap; }
  .group-age-title { flex-basis: calc(100% - 52px); }
  .group-age-current { margin-left: 52px; }
  .group-age-actions .btn { width: 100%; justify-content: center; }
  .group-age { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
}
/* ===== /T19 group age by birth year ===== */
/* ===== CA image fit (comment 11): logos/slips/posters = contain on a soft mat, people = cover with the face kept (center 20%) ===== */
:root, body.fas-backend { --fas-img-mat: var(--bg-card-2, #141414); }
/* logos: show the whole logo, centered */
.member-rights-academy-logo,
.guardian-side-academy-logo,
.fas-directory-card img:not(.fas-directory-person-photo),
.app.sidebar-collapsed .sidebar-academy-logo {
  object-fit: contain;
  object-position: center;
  background: var(--fas-img-mat);
}
.fas-directory-card img:not(.fas-directory-person-photo) { padding: 3px; box-sizing: border-box; }
@media (max-width: 800px) {
  .sidebar.open .sidebar-academy-logo,
  .app.sidebar-collapsed .sidebar.open .sidebar-academy-logo {
    object-fit: contain;
    object-position: center;
  }
}
/* slips and story covers: whole image on a soft mat (tap opens the full image) */
.member-slip-thumb img,
.child-apply-slip-box img,
.stories-thumb img {
  object-fit: contain;
  object-position: center;
  background: var(--fas-img-mat);
}
/* coach / member photo previews: whole photo, no white bars in Dark */
#academy-member-avatar-preview,
#academy-coach-avatar-preview {
  object-fit: contain;
  background: var(--fas-img-mat);
}
/* avatars: fill the circle, keep the face (upper part) */
.academy-coach-thumb,
.academy-member-name .academy-coach-thumb,
.academy-coach-name .academy-coach-thumb {
  object-fit: cover;
  object-position: center 20%;
  background: var(--thumb-bg);
}
.avatar img,
.sidebar-child-photo,
.guardian-child-pick-photo,
.fas-directory-person-photo,
.academy-inbody-member-photo,
.coach-checkin-history-avatar img,
.student-roster-avatar img,
.player-comparison-avatar img,
.match-stats-player-face img,
.child-apply-photo-box img,
.staff-access-page .sx-ava > img {
  object-fit: cover;
  object-position: center 20%;
}
/* ===== /CA image fit ===== */
/* r2: one form-layout standard for every signup/apply/create form
   row 1: prefix | first | last   (.fas-row-name)
   row 2+: pairs, e.g. nickname | gender, phone | email   (.fas-row-pair) */
.fas-row-name.fas-row-name {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: inherit;
  align-items: start;
  min-width: 0;
}
.fas-row-pair.fas-row-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: inherit;
  align-items: start;
  min-width: 0;
}
.fas-row-name > *,
.fas-row-pair > * { min-width: 0; max-width: 100%; }
/* labels/hints can wrap in the narrow prefix column: keep the inputs on one baseline */
.fas-row-name.fas-row-name,
.fas-row-pair.fas-row-pair { align-items: end; }
.child-apply-row.fas-row-name,
.child-apply-row.fas-row-pair { gap: 14px; }
.child-apply-row.fas-row-name .child-apply-field > select,
.child-apply-row.fas-row-pair .child-apply-field > select { min-height: 50px; }
@media (max-width: 640px) {
  .fas-row-name.fas-row-name { grid-template-columns: minmax(104px, 124px) minmax(0, 1fr); }
  .fas-row-name.fas-row-name > :nth-child(3) { grid-column: 1 / -1; }
  .fas-row-pair.fas-row-pair { grid-template-columns: minmax(0, 1fr); }
}

/* R4: Video Login มือถือ rules + error box (Light / Dark) */
.login-video-rules { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.login-video-rules span {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: #eef6f0; color: #146332; border: 1px solid #cfe5d6;
}
.login-video-error {
  display: grid; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  background: #fff4f2; border: 1px solid #f3c4bc; color: #8a1f11; font-size: 12px; line-height: 1.5;
}
.login-video-error[hidden] { display: none; }
.login-video-error-title { font-size: 13px; }
.login-video-error-fix { color: #5b3a33; }
html[data-fas-theme="dark"] .login-video-rules span { background: #17301f; color: #9fe0b4; border-color: #2b5537; }
html[data-fas-theme="dark"] .login-video-error { background: #3a1814; border-color: #7a2c22; color: #ffb4a8; }
html[data-fas-theme="dark"] .login-video-error-fix { color: #f1d0ca; }
.student-port-qr { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.fas-directory-pack-sub { margin: 6px 8px 2px; font-size: .72rem; opacity: .7; }
.fas-directory-pack-mode { margin-left: 4px; font-size: .68rem; opacity: .8; }
.fas-directory-pack-menu button:disabled { opacity: .45; cursor: not-allowed; }
.fas-directory-card:has(.fas-directory-pack-menu:not([hidden])) { overflow: visible; z-index: 20; }

/* R6f/R6h: guardian fee-due pop-up, urgency levels (theme vars: Light + Dark) */
.fee-due-popup { --fee-soon: var(--warn, #F5C451); --fee-today: #FF8A3D; --fee-late: var(--danger, #FF4655); --fee-lv: var(--fee-soon); }
html[data-fas-theme="light"] .fee-due-popup { --fee-soon: #B76E00; --fee-today: #C2410C; --fee-late: #C81E2E; }
.fee-due-popup.is-today { --fee-lv: var(--fee-today); }
.fee-due-popup.is-overdue { --fee-lv: var(--fee-late); }
.fee-due-popup { border-top: 4px solid var(--fee-lv); }
.fee-due-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--fee-lv); }
.fee-due-head h3 { margin: 0; color: var(--fee-lv); }
.fee-due-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--fee-lv) 16%, transparent); flex: none; }
.fee-due-popup h3 { display: flex; align-items: center; gap: 8px; }
.fee-due-popup-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.fee-due-popup-list li { --fee-item: var(--fee-soon); display: grid; gap: 2px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--fee-item) 45%, var(--border-strong)); border-left: 4px solid var(--fee-item); border-radius: 14px; background: color-mix(in srgb, var(--fee-item) 8%, var(--bg-card, transparent)); }
.fee-due-popup-list li.is-today { --fee-item: var(--fee-today); }
.fee-due-popup-list li.is-overdue { --fee-item: var(--fee-late); }
.fee-due-popup-list span { color: var(--muted); font-size: 13px; }
.fee-due-popup-list em { font-style: normal; color: var(--fee-item); font-weight: 600; font-size: 14px; }
.fee-due-lock { display: flex; align-items: center; gap: 6px; color: var(--fee-late); font-weight: 600; }
.fee-due-popup.is-today .fee-due-pay, .fee-due-popup.is-overdue .fee-due-pay { background: var(--fee-lv); border-color: var(--fee-lv); color: #fff; font-weight: 700; padding-inline: 22px; box-shadow: 0 6px 18px color-mix(in srgb, var(--fee-lv) 35%, transparent); }

/* REL: quiet reconnect pill while a read is retried (vars follow Light / Dark theme). */
.fas-reconnect {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, var(--lime, #20E41E) 40%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--lime, #20E41E) 8%, var(--panel));
  color: var(--text);
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.fas-reconnect[hidden] { display: none; }
.fas-reconnect-spin {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-top-color: var(--lime, #20E41E);
  border-radius: 50%;
  animation: fasReconnectSpin .8s linear infinite;
}
@keyframes fasReconnectSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fas-reconnect-spin { animation: none; } }
/* R7 Port U16: soft flag on pending applicants whose real age is outside 15–17 (coach decides) */
.member-form-names.port-age-outside {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 60%, transparent);
  color: #fbbf24;
  font-weight: 700;
}
html[data-fas-theme="light"] .member-form-names.port-age-outside { color: #92400e; }
/* R8: whose photo is it — top sidebar avatar = child (บุตร), bottom = logged-in guardian (คุณ) */
.avatar-owner-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.avatar-owner-tag {
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 15px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--panel, #0f1712);
  z-index: 1;
}
.avatar-owner-tag--child { background: var(--lime, #20E41E); color: #0b2a0b; }
.avatar-owner-tag--self { background: #475569; color: #f8fafc; }
html[data-fas-theme="light"] .avatar-owner-tag { box-shadow: 0 0 0 2px #ffffff; }
html[data-fas-theme="light"] .avatar-owner-tag--child { background: #16a34a; color: #ffffff; }
html[data-fas-theme="light"] .avatar-owner-tag--self { background: #e2e8f0; color: #1e293b; }
.side-user .avatar-owner-wrap { margin-bottom: 3px; }
.photo-owner-note {
  margin: 8px auto 0;
  max-width: 460px;
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.photo-owner-note[hidden] { display: none; }
.photo-owner-note.is-self { background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.55); color: #fbbf24; }
.photo-owner-note.is-child { background: var(--lime-dim, rgba(32, 228, 30, 0.14)); border: 1px solid rgba(32, 228, 30, 0.45); color: var(--text, #e8f5e9); }
html[data-fas-theme="light"] .photo-owner-note.is-self { background: #fff7e6; border-color: #f5c56b; color: #8a4b00; }
html[data-fas-theme="light"] .photo-owner-note.is-child { background: #ecfdf3; border-color: #9ee2b5; color: #14532d; }

/* ===== R10 guardian header (mock v2 · 8 ต.ค. 2569) =====================================
   1) gold «การ์ด» button · 2) red «ออก» · 3) one Light/Dark toggle · 4) phone: one row, no page title
   5) role combobox «ผู้ปกครอง · ชื่อเล่นบุตร» (single role = plain label) · ID selectors beat the palette/theme .icon-btn rules */
body.fas-backend .top-actions { gap: 8px; }
/* role combobox */
body.fas-backend .perspective-switch { min-width: 0; max-width: 320px; }
body.fas-backend #perspective-switch-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 9px 0 10px;
  border: 1.5px solid color-mix(in srgb, var(--lime) 45%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--lime) 11%, var(--panel));
  color: var(--text);
  font-size: 14.5px;
  white-space: nowrap;
  box-shadow: none;
}
body.fas-backend #perspective-switch-btn .perspective-switch-icon { display: inline-flex; flex: 0 0 auto; color: var(--lime); }
body.fas-backend #perspective-switch-btn .perspective-switch-icon svg { stroke-width: 2.1; }
body.fas-backend #perspective-switch-btn .perspective-switch-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
body.fas-backend #perspective-switch-btn .perspective-switch-role { font-weight: 700; color: var(--text); }
body.fas-backend #perspective-switch-btn .perspective-switch-sub { font-weight: 500; color: var(--muted); }
body.fas-backend #perspective-switch-btn .perspective-switch-chev { display: inline-flex; flex: 0 0 auto; color: var(--text); transition: transform 160ms ease; }
body.fas-backend #perspective-switch-btn .perspective-switch-chev svg { stroke-width: 2.1; }
body.fas-backend #perspective-switch-btn:hover { border-color: var(--lime); }
body.fas-backend .perspective-switch.is-open #perspective-switch-btn {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 25%, transparent);
}
body.fas-backend .perspective-switch.is-open .perspective-switch-chev { transform: rotate(180deg); }
body.fas-backend .perspective-switch.is-single #perspective-switch-btn {
  cursor: default;
  border-style: dashed;
  background: color-mix(in srgb, var(--lime) 5%, var(--panel));
}
body.fas-backend .perspective-switch.is-single #perspective-switch-btn:hover { border-color: color-mix(in srgb, var(--lime) 45%, var(--border)); }
body.fas-backend .perspective-switch.is-single #perspective-switch-btn .perspective-switch-chev { display: none; }
/* role menu */
body.fas-backend .perspective-switch-menu {
  left: 0;
  right: auto;
  width: min(320px, calc(100vw - 24px));
  gap: 2px;
  padding: 6px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.1);
}
body.fas-backend .perspective-menu-head { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
body.fas-backend .perspective-group { gap: 2px; }
body.fas-backend .perspective-switch-menu .perspective-item {
  gap: 10px;
  min-height: 48px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
}
body.fas-backend .perspective-switch-menu .perspective-item:hover,
body.fas-backend .perspective-switch-menu .perspective-item:focus-visible { background: color-mix(in srgb, var(--lime) 7%, var(--bg-card)); }
body.fas-backend .perspective-switch-menu .perspective-item.is-active { background: color-mix(in srgb, var(--lime) 13%, var(--bg-card)); }
body.fas-backend .perspective-item-icon { display: inline-flex; flex: 0 0 auto; color: var(--lime); }
body.fas-backend .perspective-item--admin .perspective-item-icon { color: #c2620a; }
html[data-fas-theme="dark"] body.fas-backend .perspective-item--admin .perspective-item-icon { color: #f59e0b; }
body.fas-backend .perspective-item-main strong { font-size: 14.5px; font-weight: 700; }
body.fas-backend .perspective-item-main small { font-size: 11.5px; font-weight: 500; }
body.fas-backend .perspective-item-check { display: inline-flex; flex: 0 0 auto; margin-left: auto; color: var(--lime); }
body.fas-backend .perspective-item-check svg { stroke-width: 2.4; }
/* one Light/Dark toggle (icon + small label) */
body.fas-backend #theme-toggle-btn,
body.fas-backend .top-actions #logout-btn.fas-logout-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 0 0 auto;
  width: 46px;
  min-width: 46px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
}
body.fas-backend #theme-toggle-btn svg,
body.fas-backend .top-actions #logout-btn.fas-logout-btn svg { width: 19px; height: 19px; stroke-width: 2.1; }
html[data-fas-theme="light"] body.fas-backend #theme-toggle-btn {
  background: #1f2a24;
  border: 1.5px solid #1f2a24;
  color: #ffffff;
}
html[data-fas-theme="light"] body.fas-backend #theme-toggle-btn svg { color: #cbd5ff; }
html[data-fas-theme="light"] body.fas-backend #theme-toggle-btn:hover { background: #2c3a32; }
html[data-fas-theme="dark"] body.fas-backend #theme-toggle-btn,
body.fas-backend #theme-toggle-btn {
  background: #fff7da;
  border: 1.5px solid #f3d36b;
  color: #3a2c00;
}
html[data-fas-theme="dark"] body.fas-backend #theme-toggle-btn svg { color: #e0a100; }
html[data-fas-theme="dark"] body.fas-backend #theme-toggle-btn:hover { background: #fff1c2; }
/* red «ออก» — red in Light and Dark */
body.fas-backend .top-actions #logout-btn.fas-logout-btn,
html[data-fas-theme="light"] body.fas-backend .top-actions #logout-btn.fas-logout-btn {
  background: linear-gradient(180deg, #ef5a5f, #dc3e44);
  border: 1.5px solid #c9353b;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(229, 72, 77, 0.35);
}
body.fas-backend .top-actions #logout-btn.fas-logout-btn:hover,
html[data-fas-theme="light"] body.fas-backend .top-actions #logout-btn.fas-logout-btn:hover {
  background: linear-gradient(180deg, #e94c52, #c9353b);
  border-color: #b32c32;
  color: #ffffff;
}
body.fas-backend #theme-toggle-btn:focus-visible,
body.fas-backend .top-actions #logout-btn.fas-logout-btn:focus-visible,
body.fas-backend #perspective-switch-btn:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
/* phone: one row — ☰ [combobox] [theme] [ออก]; the page title moves out (the sidebar already names the menu) */
@media (max-width: 640px) {
  body.fas-backend .topbar.has-role-chip {
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 10px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }
  body.fas-backend .topbar.has-role-chip .topbar-start { flex: 0 0 auto; gap: 0; }
  body.fas-backend .topbar.has-role-chip .topbar-start h1 { display: none; }
  body.fas-backend .topbar.has-role-chip #menu-btn { width: 42px; min-width: 42px; height: 44px; min-height: 44px; }
  body.fas-backend .topbar.has-role-chip .top-actions { flex: 1 1 auto; min-width: 0; gap: 6px; justify-content: flex-end; }
  body.fas-backend .topbar.has-role-chip .perspective-switch { flex: 1 1 auto; max-width: none; }
  body.fas-backend #perspective-switch-btn { padding: 0 8px 0 9px; gap: 6px; }
  body.fas-backend .perspective-switch-menu { max-height: calc(100vh - 160px); }
}
@media (max-width: 340px) {
  /* very narrow phones: «ออก» becomes icon-only (aria-label keeps «ออกจากระบบ») */
  body.fas-backend .top-actions #logout-btn.fas-logout-btn { width: 44px; min-width: 44px; }
  body.fas-backend .top-actions #logout-btn .fas-logout-label { display: none; }
}
/* gold FIFA-card download button next to the score (same width as «เปิดดู») */
body.fas-backend .academy-history-score-tools .btn.academy-history-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100px;
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  border: 1.5px solid #b8890f;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8d25a 0%, #f5c542 35%, #d4a017 100%);
  color: #2a1d00;
  font-size: 14.5px;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(180, 130, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
body.fas-backend .academy-history-score-tools .btn.academy-history-card-btn svg { stroke-width: 2.5; color: #2a1d00; }
body.fas-backend .academy-history-score-tools .btn.academy-history-card-btn:hover {
  background: linear-gradient(180deg, #fadc74 0%, #f7cc52 35%, #dcab22 100%);
  border-color: #a77c0c;
  color: #2a1d00;
}
html[data-fas-theme="dark"] body.fas-backend .academy-history-score-tools .btn.academy-history-card-btn {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
body.fas-backend .academy-history-score-tools .btn.academy-history-card-btn.is-action-loading > span:not(.fas-button-spinner) { display: none; }
body.fas-backend .academy-history-score-tools .academy-history-open {
  width: 100px;
  min-height: 40px;
  justify-content: center;
}
body.fas-backend .perspective-menu-head + .perspective-group:not(:has(.perspective-group-title)) { border-top: 0; padding-top: 0; }

/* PDPA 2026-10-25: consent text from ตั้งค่า Academy > PDPA แบบฟอร์มสมัคร */
.pdpa-consent-text { display: block; margin-top: 6px; white-space: pre-line; overflow-wrap: anywhere; color: var(--text); font-weight: 400; }
.pdpa-form-block .pdpa-uses { display: block; color: var(--muted); }
.pdpa-form-block .pdpa-reset-one { margin-top: 8px; }
@media (max-width: 600px) { .pdpa-form-block .pdpa-reset-one { width: 100%; } }
@media (max-width: 600px) {
  #academy-coach-form-card .stories-actions { flex-direction: column; align-items: stretch; }
  #academy-coach-form-card .stories-actions .btn { width: 100%; }
}

.member-fee-due-form .thai-calendar-picker { min-width: 200px; }

/* 2026-11-03 (box): ค่าเรียนรายเดือน on the backend components — stories-toolbar / stories-filter selects,
   academy-member-tabs pills, table.stories-table (cards under 900px), .badge tones. Theme tokens only. */
.fee-month-card { margin: 4px 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card-2); color: var(--text); min-width: 0; max-width: 100%; box-sizing: border-box; }
.fee-month-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; min-height: 44px; cursor: pointer; list-style: none; color: var(--text); }
.fee-month-summary::-webkit-details-marker { display: none; }
.fee-month-summary svg { color: var(--lime); flex: 0 0 auto; }
.fee-month-title { font-size: 14px; font-weight: 700; }
.fee-month-summary small { color: var(--muted); font-size: 12px; font-weight: 400; }
.fee-month-body { padding: 0 14px 14px; min-width: 0; }
.fee-month-toolbar { margin-bottom: 6px; }
.fee-month-toolbar .stories-filter { flex: 0 1 180px; }
.fee-month-export { min-height: 40px; }
.fee-month-export-hint { margin: 0 0 10px; }
.fee-month-chips { margin-bottom: 10px; }
.fee-month-chips .academy-member-tab { flex: 1 1 120px; }
.fee-month-table-wrap { margin: 0; }
.fee-month-table td { vertical-align: middle; }
.fee-month-who strong { color: var(--text); overflow-wrap: anywhere; }
.fee-month-nick { color: var(--muted); }
.fee-month-meta { display: block; color: var(--muted); font-size: 12px; }
.fee-month-badge { white-space: nowrap; }
.fee-month-col-edit { min-width: 150px; width: 168px; }
@media (min-width: 1101px) { #academy-fee-month-card .fee-month-table td.fee-month-col-who2 { white-space: normal; max-width: 170px; overflow-wrap: anywhere; font-size: 13px; } }
.fee-month-table-wrap { overflow-x: auto; max-width: 100%; }
.fee-month-past { display: block; margin-top: 4px; color: var(--warn-text, var(--warn)); font-size: 11px; }
.fee-month-noedit { color: var(--muted); font-size: 12px; }
.fee-month-empty { color: var(--muted); text-align: center; }
#academy-fee-month-card select.fee-month-status { width: 100%; min-width: 140px; max-width: 100%; box-sizing: border-box; min-height: 40px; font-weight: 700; }

/* status tones = the .badge component, one mapping (js FEE_MONTH_STATUS): paid=lime, submitted=warn, overdue=danger, unpaid/none=muted */
body.fas-backend .badge-warn { background: rgba(245, 158, 11, 0.14); color: #f5c451; }
body.fas-backend .badge-danger { background: rgba(255, 92, 108, 0.14); color: #ff8a95; }
body.fas-backend .badge-muted { background: rgba(140, 152, 144, 0.16); color: #c3cbc6; }
html[data-fas-theme="light"] body.fas-backend .badge-warn { background: #fdf1d6; color: #7a4f00; }
html[data-fas-theme="light"] body.fas-backend .badge-danger { background: #fde4e4; color: #a61b1b; }
html[data-fas-theme="light"] body.fas-backend .badge-muted { background: #e8ebe9; color: #4a544d; }
html[data-fas-theme="light"] body.fas-backend .fee-month-card .badge-lime { background: #e1f2e6; color: #136b30; }

.fee-month-chips .academy-member-tab[data-fee-tone="all"] { background: rgba(244, 247, 245, 0.08); color: #dfe5e1; }
.fee-month-chips .academy-member-tab[data-fee-tone="all"].is-active { background: #f4f7f5; color: #111; }
.fee-month-chips .academy-member-tab[data-fee-tone="lime"] { background: var(--lime-dim); color: var(--lime); }
.fee-month-chips .academy-member-tab[data-fee-tone="lime"].is-active { background: var(--lime); color: #111; }
.fee-month-chips .academy-member-tab[data-fee-tone="warn"] { background: rgba(245, 158, 11, 0.14); color: #f5c451; }
.fee-month-chips .academy-member-tab[data-fee-tone="warn"].is-active { background: #f5c451; color: #111; }
.fee-month-chips .academy-member-tab[data-fee-tone="danger"] { background: rgba(255, 92, 108, 0.14); color: #ff8a95; }
.fee-month-chips .academy-member-tab[data-fee-tone="danger"].is-active { background: #ff8a95; color: #111; }
.fee-month-chips .academy-member-tab[data-fee-tone="muted"] { background: rgba(140, 152, 144, 0.16); color: #c3cbc6; }
.fee-month-chips .academy-member-tab[data-fee-tone="muted"].is-active { background: #c3cbc6; color: #111; }
html[data-fas-theme="light"] body.fas-backend .fee-month-chips .academy-member-tab[data-fee-tone="all"] { background: #eef1ef; color: #2b332e; }
html[data-fas-theme="light"] body.fas-backend .fee-month-chips .academy-member-tab[data-fee-tone="all"].is-active { background: #141916; color: #fff; }
html[data-fas-theme="light"] body.fas-backend .fee-month-chips .academy-member-tab[data-fee-tone="lime"] { background: #e1f2e6; color: #136b30; }
html[data-fas-theme="light"] body.fas-backend .fee-month-chips .academy-member-tab[data-fee-tone="lime"].is-active { background: #157534; color: #fff; }
html[data-fas-theme="light"] body.fas-backend .fee-month-chips .academy-member-tab[data-fee-tone="warn"] { background: #fdf1d6; color: #7a4f00; }
html[data-fas-theme="light"] body.fas-backend .fee-month-chips .academy-member-tab[data-fee-tone="warn"].is-active { background: #7a4f00; color: #fff; }
html[data-fas-theme="light"] body.fas-backend .fee-month-chips .academy-member-tab[data-fee-tone="danger"] { background: #fde4e4; color: #a61b1b; }
html[data-fas-theme="light"] body.fas-backend .fee-month-chips .academy-member-tab[data-fee-tone="danger"].is-active { background: #a61b1b; color: #fff; }
html[data-fas-theme="light"] body.fas-backend .fee-month-chips .academy-member-tab[data-fee-tone="muted"] { background: #e8ebe9; color: #4a544d; }
html[data-fas-theme="light"] body.fas-backend .fee-month-chips .academy-member-tab[data-fee-tone="muted"].is-active { background: #4a544d; color: #fff; }

#academy-fee-month-card select.fee-month-status[data-fee-tone="lime"] { border-color: var(--lime); color: var(--lime); -webkit-text-fill-color: var(--lime); }
#academy-fee-month-card select.fee-month-status[data-fee-tone="warn"] { border-color: #f5c451; color: #f5c451; -webkit-text-fill-color: #f5c451; }
#academy-fee-month-card select.fee-month-status[data-fee-tone="danger"] { border-color: #ff8a95; color: #ff8a95; -webkit-text-fill-color: #ff8a95; }
#academy-fee-month-card select.fee-month-status[data-fee-tone="muted"] { border-color: #8c9890; color: #c3cbc6; -webkit-text-fill-color: #c3cbc6; }
html[data-fas-theme="light"] #academy-fee-month-card select.fee-month-status[data-fee-tone="lime"] { border-color: #157534; color: #136b30; -webkit-text-fill-color: #136b30; }
html[data-fas-theme="light"] #academy-fee-month-card select.fee-month-status[data-fee-tone="warn"] { border-color: #b7791f; color: #7a4f00; -webkit-text-fill-color: #7a4f00; }
html[data-fas-theme="light"] #academy-fee-month-card select.fee-month-status[data-fee-tone="danger"] { border-color: #a61b1b; color: #a61b1b; -webkit-text-fill-color: #a61b1b; }
html[data-fas-theme="light"] #academy-fee-month-card select.fee-month-status[data-fee-tone="muted"] { border-color: #8c9890; color: #4a544d; -webkit-text-fill-color: #4a544d; }
#academy-fee-month-card select.fee-month-status option { color: var(--text); }

@media (max-width: 600px) {
  .fee-month-toolbar .stories-filter { flex: 1 1 calc(50% - 6px); }
  .fee-month-export { flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .fee-month-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fee-month-chips .academy-member-tab { flex: 0 0 auto; min-height: 40px; }
  .fee-month-col-edit { min-width: 0; }
  #academy-fee-month-card select.fee-month-status { min-height: 44px; font-size: 16px; }
}

/* ==== 2026-11-02 (box): readable text in Dark + Light (WCAG AA) ====
   Theme-aware tokens only; each mode sets its own value. */
body.fas-backend {
  --faint: #8C9890;
  --placeholder: #8C9890;
  --warn-text: #f5c451;
  --warn-bg: rgba(245, 158, 11, 0.12);
  --fas-req-color: #ff6b78;
  --leave: #7db4ff;
  --leave-bg: rgba(77, 163, 255, 0.14);
  --on-accent: #06110a;
  --cal-bg: #0e1828;
  --cal-border: #26354b;
  --cal-text: #f4f7fb;
  --cal-week: #9aa6b8;
  --cal-muted: #8593a8;
  --cal-disabled: #8593a8;
  --cal-hover: #203047;
  --cal-select-bg: #111d2f;
  --cal-select-border: #2b3a51;
  --cal-selected-bg: #1a2738;
  --cal-ring: #20e41e;
  --cal-scheme: dark;
}
html[data-fas-theme="light"] body.fas-backend {
  --lime: #15702f;
  --lime-2: #125f28;
  --faint: #525d56;
  --muted: #434d46;
  --placeholder: #525d56;
  --danger: #b51f2d;
  --fas-req-color: #b51f2d;
  --warn-text: #8a5a00;
  --warn-bg: #fdf1dc;
  --leave: #1d5fc4;
  --leave-bg: #e9f2fe;
  --on-accent: #ffffff;
  --cal-bg: #ffffff;
  --cal-border: #c5d0c8;
  --cal-text: #141916;
  --cal-week: #4a544d;
  --cal-muted: #5f6a63;
  --cal-disabled: #6b756e;
  --cal-hover: #e8f3eb;
  --cal-select-bg: #ffffff;
  --cal-select-border: #aeb9b1;
  --cal-selected-bg: #e4f1e8;
  --cal-ring: #15702f;
  --cal-scheme: light;
}
body.fas-backend input::placeholder,
body.fas-backend textarea::placeholder { color: var(--placeholder); opacity: 1; }
body.fas-backend .field-req { color: var(--fas-req-color); }
body.fas-backend .btn-lime { color: var(--on-accent); }
html[data-fas-theme="light"] body.fas-backend .btn-lime,
html[data-fas-theme="light"] body.fas-backend .fas-help-launcher { background: var(--lime); border-color: var(--lime); color: #ffffff; }
body.fas-backend .academy-coach-avatar-copy b,
body.fas-backend .academy-coach-avatar-copy span { color: var(--muted); }
html[data-fas-theme="light"] body.fas-backend .fas-combo.is-placeholder .fas-combo-face { color: var(--muted); }
body.fas-backend .coach-checkin-history-row > em.is-leave { background: var(--leave-bg); color: var(--leave); }
body.fas-backend .coach-checkin-history-row.is-leave { opacity: 1; }
body.fas-backend .coach-checkin-history-row.is-leave .coach-checkin-history-avatar { color: var(--lime); }
/* «ออก» stays red in both modes, dark enough for white text */
body.fas-backend .top-actions #logout-btn.fas-logout-btn,
html[data-fas-theme="light"] body.fas-backend .top-actions #logout-btn.fas-logout-btn {
  background: linear-gradient(180deg, #c9303a, #b02631);
  border-color: #9e222c;
}
/* Thai calendar popup follows the mode */
body.fas-backend .thai-calendar { background: var(--cal-bg); color: var(--cal-text); border-color: var(--cal-border); }
body.fas-backend .thai-calendar .calendar-head select,
html[data-fas-theme="light"] body.fas-backend .thai-calendar select {
  background-color: var(--cal-select-bg);
  border-color: var(--cal-select-border);
  color: var(--cal-text);
  color-scheme: var(--cal-scheme);
}
body.fas-backend .thai-calendar select option { background: var(--cal-select-bg); color: var(--cal-text); }
body.fas-backend .calendar-week { color: var(--cal-week); }
body.fas-backend .calendar-day { color: var(--cal-text); }
body.fas-backend .calendar-day:hover,
body.fas-backend .calendar-day:focus { background: var(--cal-hover); }
body.fas-backend .calendar-day.muted { color: var(--cal-muted); }
body.fas-backend .calendar-day.selected,
body.fas-backend .calendar-day.selected.today { background: var(--cal-selected-bg); box-shadow: inset 0 0 0 2px var(--cal-ring); color: var(--cal-text); }
body.fas-backend .calendar-day.today { box-shadow: inset 0 0 0 1px var(--cal-ring); }
body.fas-backend .calendar-day.disabled,
body.fas-backend .calendar-day.disabled:hover,
body.fas-backend .calendar-day.disabled:focus { color: var(--cal-disabled); text-decoration: line-through; text-decoration-color: currentColor; opacity: 1; }
/* every native dropdown list uses the mode's colors (no white-on-white / black-on-black options) */
/* 2026-11-02: native dropdown options must set color AND -webkit-text-fill-color AND background per mode.
   .fas-combo hides the select's own text with a transparent text-fill; options inherited the dark-mode
   white text-fill in light mode, so the open list was white-on-white (เมนูรุ่น «วิธีจัดรุ่น»). */
body.fas-backend select option,
body.fas-backend select optgroup,
body.fas-backend .fas-combo select option,
body.fas-backend .fas-combo select optgroup {
  background-color: #121914;
  color: #F4F7F5;
  -webkit-text-fill-color: #F4F7F5;
}
html[data-fas-theme="light"] body.fas-backend select option,
html[data-fas-theme="light"] body.fas-backend select optgroup,
html[data-fas-theme="light"] body.fas-backend .fas-combo select option,
html[data-fas-theme="light"] body.fas-backend .fas-combo select optgroup {
  background-color: #ffffff;
  color: #141916;
  -webkit-text-fill-color: #141916;
}
body.fas-backend select option:disabled { color: #9aa8a0; -webkit-text-fill-color: #9aa8a0; }
html[data-fas-theme="light"] body.fas-backend select option:disabled { color: #5f6b64; -webkit-text-fill-color: #5f6b64; }
body.fas-backend .thai-calendar select option { background-color: var(--cal-select-bg); color: var(--cal-text); -webkit-text-fill-color: var(--cal-text); }
html[data-fas-theme="light"] body.fas-backend .academy-coach-avatar-copy,
html[data-fas-theme="light"] body.fas-backend .academy-coach-avatar-copy b { color: var(--muted); }
html[data-fas-theme="light"] body.fas-backend .avatar { color: var(--lime); }
html[data-fas-theme="light"] body.fas-backend .side-link .sx-new { color: #ffffff; }
/* FAS wordmark «F»: brand green on dark, deep brand green on light backgrounds */
html[data-fas-theme="light"] body.fas-backend .fas-f { color: var(--lime); }
.coach-checkin-edit-dialog select,
.coach-checkin-edit-dialog textarea {
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font-family: var(--font);
}

/* fee month card (item 3) follows the mode */
body.fas-backend .fee-month-card { background: var(--bg-card); border-color: var(--border); color: var(--text); }
body.fas-backend .fee-month-summary small,
body.fas-backend .fee-month-meta { color: var(--muted); }
body.fas-backend .coach-checkin-history-row > em.is-manual { background: var(--warn-bg); color: var(--warn-text); }
/* table headers, combo placeholders, disabled controls: readable, not faded */
body.fas-backend .table th,
html[data-fas-theme="light"] body.fas-backend .table th { color: var(--muted); }
body.fas-backend .fas-combo.is-placeholder .fas-combo-face { color: var(--muted); }
body.fas-backend .fas-combo:has(select:disabled) .fas-combo-face { opacity: 1; color: var(--muted); }
body.fas-backend .btn:disabled { opacity: 1; }
body.fas-backend .btn-lime:disabled { background: var(--bg-card-2); border-color: var(--border-strong); color: var(--muted); }
body.fas-backend .publish-mode { color: var(--text); }
body.fas-backend .theme-card small,
html[data-fas-theme="light"] body.fas-backend .theme-card small { color: var(--muted); }
html[data-fas-theme="light"] body.fas-backend .visual-preview-tab.active { color: #ffffff; }
body.fas-backend .fee-month-summary span,
body.fas-backend .fee-month-who strong { color: var(--text); }

/* fix2: real (non-transparent) select text color per mode so the native popup is readable everywhere */
/* fix3 (2026-11-02): Windows Chrome paints the open dropdown list with the <select>'s own
   -webkit-text-fill-color, ignoring the options' values, so the transparent-text overlay trick left
   every row blank. Drop the trick: the select paints its own text; the .fas-combo-face overlay is hidden. */
.fas-combo select { -webkit-text-fill-color: currentColor; }
.fas-combo > .fas-combo-face { display: none !important; }
.fas-combo.is-placeholder select { color: #9aa8a0; -webkit-text-fill-color: #9aa8a0; }
body.fas-backend .fas-combo select { color: #F4F7F5; -webkit-text-fill-color: #F4F7F5; }
html[data-fas-theme="light"] body.fas-backend .fas-combo select { color: #141916; -webkit-text-fill-color: #141916; }
body.fas-backend .fas-combo.is-placeholder select { color: var(--muted); -webkit-text-fill-color: var(--muted); }
html[data-fas-theme="light"] body.fas-backend .fas-combo.is-placeholder select { color: var(--muted); -webkit-text-fill-color: var(--muted); }
/* every option/optgroup: solid colours in both modes, never inherited */
select option, select optgroup { color: #141916; background-color: #ffffff; -webkit-text-fill-color: #141916; }
body.fas-backend select option, body.fas-backend select optgroup,
body.fas-backend .fas-combo select option, body.fas-backend .fas-combo select optgroup { color: #F4F7F5; background-color: #121914; -webkit-text-fill-color: #F4F7F5; }
html[data-fas-theme="light"] body.fas-backend select option, html[data-fas-theme="light"] body.fas-backend select optgroup,
html[data-fas-theme="light"] body.fas-backend .fas-combo select option, html[data-fas-theme="light"] body.fas-backend .fas-combo select optgroup { color: #141916; background-color: #ffffff; -webkit-text-fill-color: #141916; }
body.fas-backend .fas-combo select option:disabled { color: #9aa8a0; -webkit-text-fill-color: #9aa8a0; }
html[data-fas-theme="light"] body.fas-backend .fas-combo select option:disabled { color: #5f6b64; -webkit-text-fill-color: #5f6b64; }

/* Light-mode contrast: active segmented tabs sit on the dark-green --lime (#15702f), so text must be white (≥4.5:1). */
html[data-fas-theme="light"] body.fas-backend .attendance-report-tabs .btn.active,
html[data-fas-theme="light"] body.fas-backend .attendance-report-layout .btn.active,
html[data-fas-theme="light"] body.fas-backend .lineup-plan-view-toggle .btn.active {
  color: #ffffff;
}
html[data-fas-theme="light"] body.fas-backend #student-mark-all {
  background: #15702f;
  border-color: #125f28;
}
html[data-fas-theme="light"] body.fas-backend #student-mark-all:hover {
  background: #125f28;
  border-color: #0f5526;
}

/* desktop web-drawn select list (js/fas-select-popup.js): solid colours per mode */
.fas-select-pop {
  position: fixed; z-index: 2147483000; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; border-radius: 10px; box-sizing: border-box;
  background: #121914; color: #F4F7F5; border: 1px solid #3a4a40;
  box-shadow: 0 12px 32px rgba(0,0,0,.45); font: 500 14px/1.45 var(--font, inherit);
}
.fas-select-pop[hidden] { display: none; }
.fas-select-opt { padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #F4F7F5; }
.fas-select-opt[aria-selected="true"] { font-weight: 700; }
.fas-select-opt.is-active { background: #2a3a30; color: #ffffff; }
.fas-select-opt[aria-disabled="true"] { color: #9aa8a0; cursor: default; }
.fas-select-group { padding: 8px 10px 4px; font-size: 12px; font-weight: 700; color: #b5c2ba; }
html[data-fas-theme="light"] .fas-select-pop { background: #ffffff; color: #141916; border-color: #c9d3cd; box-shadow: 0 12px 32px rgba(20,25,22,.18); }
html[data-fas-theme="light"] .fas-select-opt { color: #141916; }
html[data-fas-theme="light"] .fas-select-opt.is-active { background: #e3efe7; color: #0f1a13; }
html[data-fas-theme="light"] .fas-select-opt[aria-disabled="true"] { color: #5f6b64; }
html[data-fas-theme="light"] .fas-select-group { color: #4b5750; }

/* Coach check-in desktop layout (ac10): row1 = สถานะวันนี้ | แจ้งลา (equal), row2 = สรุปเดือน full, row3 = รายการ full. <1024 single column. */
@media (max-width: 1023.98px) {
  .coach-checkin-grid,
  .coach-checkin-admin { grid-template-columns: 1fr; }
  .coach-checkin-grid > .card { grid-column: auto; }
}
@media (min-width: 1024px) {
  .coach-checkin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .coach-checkin-grid > .coach-checkin-self-card { grid-column: 1; }
  .coach-checkin-grid > .coach-checkin-leave-card { grid-column: 2; }
  .coach-checkin-grid > .coach-checkin-self-card[hidden] ~ .coach-checkin-leave-card,
  .coach-checkin-grid > .coach-checkin-month-card { grid-column: 1 / -1; }
  .coach-checkin-grid > .coach-checkin-self-card,
  .coach-checkin-grid > .coach-checkin-leave-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .coach-checkin-grid > .card[hidden] { display: none; }
  .coach-checkin-admin > .coach-checkin-manual-card { display: flex; flex-direction: column; }
  .coach-checkin-admin > .coach-checkin-location-card[hidden] + .coach-checkin-manual-card { grid-column: 1 / -1; }
  /* forms fill the card; empty min-content rows collapse (row-gap 0), last 1fr row holds the save button at the bottom */
  .coach-checkin-self-card > .coach-checkin-self-backdate,
  .coach-checkin-leave-card > form,
  .coach-checkin-manual-card > form {
    flex: 1 1 auto;
    grid-template-rows: repeat(20, min-content) 1fr;
  }
  .coach-checkin-self-card > .coach-checkin-self-backdate > .settings-actions,
  .coach-checkin-leave-card > form > .settings-actions,
  .coach-checkin-manual-card > form > .settings-actions { grid-row: 21; align-self: end; }
  .coach-checkin-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 2026-11-03 advance leave tag «ลาล่วงหน้า» (ac11) */
.coach-checkin-history-row > em.is-leave.is-future,
body.fas-backend .coach-checkin-history-row > em.is-leave.is-future { border: 1px dashed currentColor; }
#academy-fee-month-card select.fee-month-status { padding-left: 12px; padding-right: 34px; }
@media (max-width: 1100px) { #academy-fee-month-card .fee-month-table td.stories-status .badge { justify-self: start; align-self: center; width: auto; max-width: max-content; } }
@media (min-width: 1101px) {
  #academy-fee-month-card .fee-month-table td.fee-month-who { white-space: normal; min-width: 180px; max-width: 260px; padding-right: 18px; }
  #academy-fee-month-card .fee-month-table td.fee-month-who strong { overflow-wrap: anywhere; word-break: break-word; }
  #academy-fee-month-card .fee-month-table td.fee-month-col-due { white-space: nowrap; padding-left: 12px; }
}
#academy-fee-month-card .fee-month-nick { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
/* bulk approve (ค่าเรียนรายเดือน) */
.fee-month-bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.fee-month-bulk[hidden], .fee-month-bulk-result[hidden] { display: none; }
.fee-month-check-label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
#academy-fee-month-card input.fee-month-check { width: 22px; height: 22px; margin: 0; accent-color: var(--lime); cursor: pointer; flex: 0 0 auto; }
.fee-month-bulk-btn { min-height: 44px; }
.fee-month-row-check { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -10px 2px -10px -8px; cursor: pointer; vertical-align: middle; }
.fee-month-num { white-space: nowrap; }
.fee-month-bulk-result { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 13px; }
.fee-month-bulk-result p { margin: 0; }
.fee-month-bulk-result.is-error { border-color: rgba(255, 92, 108, 0.5); }
.fee-month-bulk-fails { margin: 6px 0 0; padding-left: 18px; color: #ff8a95; }
html[data-fas-theme="light"] body.fas-backend .fee-month-bulk-fails { color: #a61b1b; }
html[data-fas-theme="light"] body.fas-backend #academy-fee-month-card input.fee-month-check { accent-color: #157534; }
.fee-month-bulk-dialog form { display: grid; gap: 12px; text-align: left; }
.fee-month-bulk-names { margin: 0; padding-left: 20px; max-height: 40vh; overflow: auto; font-size: 14px; line-height: 1.6; }
@media (max-width: 1100px) { .fee-month-row-check { margin: -10px 0; } }
@media (max-width: 480px) { .fee-month-bulk { flex-direction: column; align-items: stretch; } .fee-month-bulk-btn { width: 100%; } }
.fee-month-bulk-note { margin: 6px 0 0 !important; color: var(--muted); }
.fee-month-bulk-moved { margin: 4px 0 0; padding-left: 18px; color: var(--text); }
.fee-month-num-in { display: inline-flex; align-items: center; gap: 2px; }
#academy-fee-month-card td.fee-month-num { min-width: 72px; }
@media (min-width: 1101px) { #academy-fee-month-card .fee-month-row-check { margin: -10px 0; min-width: 36px; } #academy-fee-month-card td.fee-month-num { min-width: 76px; padding-right: 12px; } }
@media (min-width: 1101px) { #academy-fee-month-card .fee-month-table th.stories-num, #academy-fee-month-card .fee-month-table td.fee-month-num { width: 80px; } }

/* 2026-11-03 «ประวัติทุกรุ่น» (eval overview report + player comparison) */
.eval-history-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; align-self: end; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.eval-history-toggle input { width: 18px; height: 18px; accent-color: var(--lime); }
.eval-history-toggle[hidden] { display: none; }
.eval-history-list { overflow-x: auto; }
.eval-history-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--text); }
.eval-history-table th, .eval-history-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.eval-history-table th { color: var(--muted); font-weight: 600; font-size: 13px; }
.eval-history-table td small { color: var(--muted); }
.eval-history-table tr.is-other-group td { background: color-mix(in srgb, var(--lime) 8%, transparent); }
.eval-history-chip { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-size: 12px; line-height: 1.6; white-space: nowrap; }
@media (max-width: 640px) {
  .eval-history-table thead { display: none; }
  .eval-history-table, .eval-history-table tbody, .eval-history-table tr, .eval-history-table td { display: block; width: 100%; }
  .eval-history-table tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .eval-history-table td { display: flex; gap: 10px; justify-content: space-between; padding: 3px 4px; border: 0; }
  .eval-history-table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; flex: 0 0 auto; }
}

/* 2026-11-03 (box) items 8/10: sub-tabs, pending-slip count, multi-month picker. Same pill component + tones. */
.fee-month-tabs { margin-bottom: 10px; }
.fee-month-tabs .academy-member-tab { flex: 1 1 140px; min-height: 40px; font-weight: 700; }
.fee-month-tab-count { font-weight: 700; }
.fee-month-pending { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(245, 158, 11, 0.14); color: #f5c451; }
html[data-fas-theme="light"] body.fas-backend .fee-month-pending { background: #fdf1d6; color: #7a4f00; }
.fee-month-pending[hidden] { display: none; }
.side-link .sx-new.fee-pending-badge { background: #f5c451; color: #111; }
html[data-fas-theme="light"] body.fas-backend .side-link .sx-new.fee-pending-badge { background: #7a4f00; color: #fff; }
.fee-month-multi { margin: 0 0 8px; }
.fee-month-multi-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.fee-month-multi-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fee-month-multi-chip { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.fee-month-multi-chip.is-active { background: #ff8a95; border-color: #ff8a95; color: #111; font-weight: 700; }
html[data-fas-theme="light"] body.fas-backend .fee-month-multi-chip.is-active { background: #a61b1b; border-color: #a61b1b; color: #fff; }
.fee-month-period { margin-top: 2px; }
@media (max-width: 600px) {
  .fee-month-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fee-month-tabs .academy-member-tab { flex: 0 0 auto; min-height: 44px; }
  .fee-month-multi-list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .fee-month-multi-chip { flex: 0 0 auto; min-height: 44px; }
}
#academy-fee-month-card [hidden] { display: none !important; }
.fee-month-tabs .fee-month-tab { background: rgba(244, 247, 245, 0.06); color: #dfe5e1; }
.fee-month-tabs .fee-month-tab.is-active { background: var(--lime); color: #111; }
html[data-fas-theme="light"] body.fas-backend .fee-month-tabs .fee-month-tab { background: #eef1ef; color: #2b332e; }
html[data-fas-theme="light"] body.fas-backend .fee-month-tabs .fee-month-tab.is-active { background: #157534; color: #fff; }
/* past-edit hint wraps inside the แก้สถานะ cell on every width */
#academy-fee-month-card .fee-month-col-edit .fee-month-past { white-space: normal; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; min-width: 0; line-height: 1.35; }
@media (min-width: 601px) { #academy-fee-month-card .fee-month-col-edit .fee-month-past { max-width: 13em; } }
/* keep the members card inside the viewport: grid/flex items must be allowed to shrink so chip rows scroll inside their own box */
.stories-page > .stories-card:has(#academy-fee-month-card), #academy-fee-month-card, #academy-fee-month-card .fee-month-body, #academy-fee-month-card .fee-month-chips, #academy-fee-month-card .fee-month-multi, #academy-fee-month-card .fee-month-multi-list, #academy-fee-month-card .fee-month-tabs, #academy-fee-month-card .stories-table-wrap { min-width: 0; max-width: 100%; }
#academy-fee-month-card .fee-month-col-edit select, #academy-fee-month-card .fee-month-col-edit .story-select { max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 900px) {
  #academy-fee-month-card .fee-month-chips, #academy-fee-month-card .fee-month-multi-list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 4px; }
  #academy-fee-month-card .fee-month-chips .academy-member-tab, #academy-fee-month-card .fee-month-multi-chip { flex: 0 0 auto; }
  #academy-fee-month-card .fee-month-table td { min-width: 0; }
}
@media (max-width: 600px) {
  #academy-fee-month-card .fee-month-tabs { flex-wrap: nowrap; overflow-x: visible; }
  #academy-fee-month-card .fee-month-tabs .academy-member-tab { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.25; padding-left: 6px; padding-right: 6px; text-align: center; }
}