/* Flight School Coach Pro — design system
   Gold on dark. Athletic, scoreboard-inflected. One signature: the board. */

:root {
  --bg:        #070b13;
  --bg-2:      #0b111d;
  --surface:   #0f1725;
  --surface-2: #131d2f;
  --line:      #23304a;
  --line-soft: rgba(255, 255, 255, 0.07);

  --text:      #eaf0fb;
  --muted:     #8493ab;
  --faint:     #5d6b82;

  --gold:       #f5c451;
  --gold-bright:#ffd873;
  --gold-soft: rgba(245, 196, 81, 0.12);
  --gold-line: rgba(245, 196, 81, 0.30);

  --board-red:   #d33f38;
  --board-green: #3a9d54;
  --danger:      #e2574f;

  --radius:   18px;
  --radius-s: 11px;

  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);

  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--body);
  background:
    radial-gradient(1100px 650px at 85% -8%, rgba(245, 196, 81, 0.08), transparent 60%),
    radial-gradient(820px 520px at -6% 104%, rgba(103, 232, 208, 0.05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Brand mark ---------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.brand__mark { width: 40px; height: 40px; flex: none; display: block; }

.brand__wordmark { line-height: 0.9; }

.brand__eyebrow {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted);
  display: block;
}

.brand__name {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--text);
  display: block;
}

.brand__name b { color: var(--gold); font-weight: 700; }

/* ---- Login --------------------------------------------------------------- */

.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, #15181f 0%, var(--bg) 60%);
}

/* Faint dartboard geometry behind everything — the signature, kept quiet. */
.login__board {
  position: absolute;
  width: min(120vh, 900px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 78%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 78%);
}

.login__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 38px 34px 34px;
}

.login__brand { margin-bottom: 30px; }

.login__title {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 22px;
}

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
}

.field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  padding: 12px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input::placeholder { color: var(--faint); }

.field input:focus {
  outline: none;
  border-color: var(--gold-line);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn {
  width: 100%;
  border: 0;
  border-radius: var(--radius-s);
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 17px;
  padding: 13px 16px;
  cursor: pointer;
  background: var(--gold);
  color: #1a1204;
  transition: filter 0.15s ease, transform 0.02s ease;
}

.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; filter: none; }

.btn:focus-visible,
.field input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.login__msg {
  min-height: 20px;
  margin: 4px 0 14px;
  font-size: 13.5px;
  color: var(--danger);
  font-weight: 500;
}

.login__foot {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  color: var(--faint);
  letter-spacing: 0.02em;
}

/* ---- App shell ----------------------------------------------------------- */

.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
  position: sticky;
  top: 0;
  z-index: 5;
}

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

.topbar__name {
  font-size: 14px;
  color: var(--muted);
}
.topbar__name b { color: var(--text); font-weight: 600; }

.linkbtn {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.linkbtn:hover { color: var(--text); border-color: var(--gold-line); }

.main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.hero__greeting {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(30px, 6vw, 46px);
  margin: 0;
  line-height: 1;
}
.hero__greeting b { color: var(--gold); font-weight: 700; }

.hero__sub {
  color: var(--muted);
  margin: 12px 0 0;
  font-size: 15px;
}

.grid {
  margin-top: 34px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 20px 20px 22px;
}

.card__label {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--faint);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card__label::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.card__empty {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.card__empty span { color: var(--faint); display: block; margin-top: 4px; font-size: 13px; }

.roadmap {
  margin-top: 40px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(245,179,36,0.03), transparent);
}
.roadmap h2 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: var(--gold);
  margin: 0 0 10px;
}
.roadmap p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- Nav (top bar) ------------------------------------------------------- */

.topbar__left { display: flex; align-items: center; gap: 28px; }

.nav { display: flex; gap: 2px; }
.nav__link {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link.is-active { color: var(--gold); }

/* ---- Panels & forms ------------------------------------------------------ */

.panel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px;
}
.panel__title {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 15px;
  color: var(--text);
  margin: 0 0 18px;
}

.form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}
.form-grid .field { margin: 0; }
.field--full { grid-column: 1 / -1; }

select,
textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  padding: 11px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold-line);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
textarea { resize: vertical; min-height: 68px; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.btn--inline { width: auto; padding: 12px 26px; }
.form-msg { font-size: 13.5px; font-weight: 500; }
.form-msg.err { color: var(--danger); }
.form-msg.ok { color: var(--board-green); }

/* ---- Player list --------------------------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 36px 0 14px;
}
.section-head h2 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 16px;
  margin: 0;
}
.section-head .count { color: var(--faint); font-size: 14px; }

.players { display: flex; flex-direction: column; gap: 10px; }

.player {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  padding: 13px 16px;
}
.player__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 16px;
  flex: none;
}
.player__body { min-width: 0; }
.player__name { font-weight: 600; font-size: 15px; }
.player__meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.player__spacer { flex: 1; }

.pill {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.pill--junior { background: rgba(58, 157, 84, 0.16); color: #5bc07a; }
.pill--adult  { background: var(--gold-soft); color: var(--gold); }

.empty {
  color: var(--muted); font-size: 14px; line-height: 1.5;
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 22px; text-align: center;
}

/* Dashboard card as link */
a.card { text-decoration: none; color: inherit; display: block; transition: border-color 0.15s ease; }
a.card:hover { border-color: var(--gold-line); }
.card__big {
  font-family: var(--display); font-weight: 700;
  font-size: 34px; color: var(--text); line-height: 1;
}
.card__big span { font-size: 15px; color: var(--muted); font-family: var(--body); font-weight: 500; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .nav__link { padding: 8px 9px; }
}

/* ---- Lessons ------------------------------------------------------------- */

.opt { color: var(--faint); font-weight: 500; text-transform: none; letter-spacing: 0; }

.picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 12px;
}
.picker__empty { color: var(--muted); font-size: 14px; margin: 4px; }
.pick {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pick:hover { background: var(--surface-2); }
.pick input { width: 17px; height: 17px; accent-color: var(--gold); flex: none; cursor: pointer; }
.pick:has(input:checked) { border-color: var(--gold-line); background: var(--gold-soft); }

.lessons { display: flex; flex-direction: column; gap: 10px; }

.lesson {
  display: flex;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  padding: 14px 16px;
}
.lesson__when {
  flex: none;
  width: 92px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--line-soft);
  padding-right: 14px;
}
.lesson__day {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.lesson__time {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: var(--gold);
  line-height: 1.1;
}
.lesson__body { min-width: 0; flex: 1; }
.lesson__title { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.lesson__players { display: flex; flex-wrap: wrap; gap: 6px; }
.lesson__notes { color: var(--muted); font-size: 13px; margin-top: 8px; line-height: 1.45; }
.lesson__noplayers { color: var(--faint); font-size: 13px; font-style: italic; }

.chip {
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
}

/* Dashboard mini lessons */
.mini-lesson {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mini-lesson:last-child { border-bottom: 0; }
.mini-lesson__time {
  font-family: var(--display);
  font-weight: 600;
  color: var(--gold);
  font-size: 16px;
  flex: none;
  width: 52px;
}
.mini-lesson__who { font-size: 14px; color: var(--text); }

/* ---- Lesson review page -------------------------------------------------- */

.backlink {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}
.backlink:hover { color: var(--gold); }

.lesson-head {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(26px, 5vw, 38px);
  margin: 0;
  line-height: 1;
}
.lesson-sub { color: var(--muted); margin: 8px 0 0; font-size: 14px; }

.lesson__open {
  align-self: center;
  flex: none;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  transition: background 0.15s ease;
}
.lesson__open:hover { background: var(--gold-soft); }

.review {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 20px;
}
.review__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.review__name { font-weight: 600; font-size: 17px; }
.review__cat { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.ratings {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.starrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
}
.starrow__label {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--text);
}
.stars { display: flex; gap: 4px; }
.star {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--line);
  padding: 2px;
  transition: color 0.1s ease, transform 0.05s ease;
}
.star:hover { transform: scale(1.12); }
.star.on { color: var(--gold); }
.star:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.review__note { margin-bottom: 14px; }
.review__actions { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.review__report textarea { min-height: 110px; }

@media (max-width: 560px) {
  .starrow { flex-direction: row; }
  .star { font-size: 26px; }
}

/* ---- Lesson welcome banner ----------------------------------------------- */

.welcome {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 22px;
  margin-bottom: 6px;
}
.welcome__eyebrow {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--gold);
  margin: 0 0 10px;
}
.welcome__name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1;
  margin: 0;
  color: var(--text);
}
.welcome__sub {
  color: var(--muted);
  font-size: 14px;
  margin: 12px 0 0;
}

/* ---- Player profile ------------------------------------------------------ */

.profile-head { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.profile-avatar { width: 60px; height: 60px; font-size: 22px; }
.profile-meta { color: var(--muted); margin: 6px 0 0; font-size: 14px; }
.profile-notes {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
}

.reviews-list { display: flex; flex-direction: column; gap: 14px; }

.reviewcard {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.reviewcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.reviewcard__date {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--gold);
}
.reviewcard__title { color: var(--muted); font-size: 13px; }
.reviewcard__edit {
  margin-left: auto;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 7px;
}
.reviewcard__edit:hover { color: var(--gold); border-color: var(--gold-line); }

.reviewcard__ratings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 18px;
  padding: 12px 0;
  margin-bottom: 12px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.ratingline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ratingline__label { font-size: 12px; color: var(--muted); }
.mini-star { font-size: 12px; color: var(--line); }
.mini-star.on { color: var(--gold); }

.reviewcard__report { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }

/* clickable player rows */
.player--link { text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
.player--link:hover { border-color: var(--gold-line); }

/* dashboard latest reports */
.mini-report {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
}
.mini-report:last-child { border-bottom: 0; }
.mini-report__who { font-size: 14px; color: var(--text); }
.mini-report:hover .mini-report__who { color: var(--gold); }
.mini-report__date { font-size: 12px; color: var(--faint); flex: none; }

/* ---- Profile review composer --------------------------------------------- */
.composer { margin: 4px 0 18px; }
.composer__top { margin-bottom: 14px; }
.composer__date { max-width: 220px; margin: 0; }
#addReview { width: auto; }

/* ---- Player access panel (coach view) ------------------------------------ */
.access {
  margin: 18px 0 8px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.access__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.access__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 3px; }
.access__value { font-size: 15px; font-weight: 600; color: var(--text); }
.access__creds { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.access__note { color: var(--muted); font-size: 13px; margin: 0 0 10px; line-height: 1.5; }
.access__note.err { color: var(--danger); }
.access__cred { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.access__cred span { width: 84px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.access__cred code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15px; color: var(--gold);
  background: var(--bg); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line);
}

/* ---- Settings status ------------------------------------------------------ */
.status-line {
  font-size: 14px; color: var(--muted);
  padding: 12px 14px; background: var(--bg);
  border: 1px solid var(--line-soft); border-radius: var(--radius-s);
}
.status-line .ok { color: #4bbf6b; font-weight: 600; }

/* ---- Lesson: assign players ---------------------------------------------- */
.players-bar { margin: 8px 0 4px; }
.players-bar__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.players-bar__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.players-bar__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pchip { background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.pchip--none { background: var(--bg); color: var(--muted); border-color: var(--line); font-weight: 400; }
.players-bar__edit { margin-top: 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; }
.pedit-hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.pcheck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.pcheck { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-s); cursor: pointer; }

/* ---- Half-star support ---------------------------------------------------- */
.star { color: var(--line); }              /* empty */
.star.full { color: var(--gold); }
.star.half {
  background: linear-gradient(90deg, var(--gold) 50%, var(--line) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mini-star.half {
  background: linear-gradient(90deg, var(--gold) 50%, var(--line) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Throw analysis ------------------------------------------------------- */
.analysis { margin-bottom: 20px; }
.upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.videos-list { display: flex; flex-direction: column; gap: 16px; }
.vcard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px; }
.vplayer { width: 100%; max-height: 72vh; border-radius: var(--radius-s); background: #000; display: block; }
.vphases { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.vphases__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; color: var(--faint); margin-right: 4px; }
.vphase { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-s); padding: 8px 14px; min-width: 92px; }
.vphase__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.vphase__val { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--gold); line-height: 1.1; }
.vstatus { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; padding: 8px 4px; }
.vstatus--err { color: var(--danger); }
.spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; display: inline-block; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Video delete --------------------------------------------------------- */
.vcard__top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.vdelete {
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer;
}
.vdelete:hover { color: var(--danger); border-color: var(--danger); }

/* ---- View picker + badge -------------------------------------------------- */
.view-pick { display: flex; gap: 6px; }
.vp { display: flex; align-items: center; gap: 5px; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--muted); }
.vp input { accent-color: var(--gold); }
.vcard__top { display: flex; justify-content: space-between; align-items: center; }
.vbadge { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; }

/* ---- Height + coach's read ------------------------------------------------ */
.height-row { margin: 8px 0 0; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.height-label { text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; color: var(--faint); }
.height-val { color: var(--text); font-weight: 600; }
.coachread { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.coachread__label { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; color: var(--gold); margin-bottom: 6px; }
.coachread p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--text); }

/* ---- 501 scoring ---------------------------------------------------------- */
.scoring { margin-bottom: 24px; }
.scoring-stats { margin-bottom: 6px; }
.stat-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; flex-wrap: wrap; }
.stat-line__label { color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
.stat-line__form { color: var(--faint); font-size: 12px; }
.delta.up { color: #4bbf6b; font-weight: 600; }
.delta.down { color: var(--danger); font-weight: 600; }
.delta.flat { color: var(--faint); }
.pb-line { margin: 10px 0 4px; font-size: 13px; color: var(--muted); }
.ba-title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; color: var(--gold); margin: 14px 0 8px; }
.ba { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-s); padding: 10px 14px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ba__date { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ba__row { color: var(--muted); }
.match-form { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.mf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mf-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.mf-grid input, .mf-grid select { padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); color: var(--text); font-size: 14px; }
.match-list { display: flex; flex-direction: column; gap: 8px; }
.match { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-s); padding: 10px 14px; }
.match__top { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.match__date { font-weight: 600; color: var(--text); }
.match__fmt { text-transform: uppercase; font-size: 11px; color: var(--faint); }
.match-del { margin-left: auto; }
.mpos { font-size: 11px; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.mpos.open { background: var(--gold-soft); color: var(--gold); }
.mpos.close { background: rgba(75,191,107,0.15); color: #4bbf6b; }
.match__stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.match__stats b { color: var(--text); }

.section-head.sub { margin-top: 22px; }
.section-head.sub h3 { font-size: 15px; margin: 0; }

/* ---- Flight Path ---------------------------------------------------------- */
.flightpath { margin-bottom: 24px; }
.fp-ladder { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fp-tier { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.fp-tier.current { background: var(--gold); color: #1a1400; border-color: var(--gold); font-weight: 700; }
.fp-tier.done { color: #4bbf6b; border-color: rgba(75,191,107,0.4); }
.fp-arrow { color: var(--faint); }
.fp-current { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.fp-level { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--text); }
.fp-star { color: var(--line); font-size: 18px; }
.fp-star.on { color: var(--gold); }
.fp-prog { color: var(--muted); font-size: 14px; }
.cr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cr { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-s); padding: 10px 14px; flex-wrap: wrap; }
.cr__cat { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.cr__name { color: var(--text); font-size: 14px; }
.cr__right { display: flex; align-items: center; gap: 8px; }
.cr-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.cr-badge.ok { background: rgba(75,191,107,0.15); color: #4bbf6b; }
.cr-badge.detected { background: var(--gold-soft); color: var(--gold); }
.cr-badge.manual { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.cr-badge.pending { background: var(--bg); color: var(--faint); border: 1px solid var(--line-soft); }
.fp-check { padding: 10px 14px; border-radius: var(--radius-s); font-size: 14px; font-weight: 600; }
.fp-check.ready { background: rgba(75,191,107,0.15); color: #4bbf6b; }
.fp-check.locked { background: var(--bg); color: var(--muted); border: 1px solid var(--line-soft); }

.fp-ahead-title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; color: var(--gold); margin: 18px 0 4px; }
.fp-ahead-note { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

/* clickable ladder tiers */
.fp-tier { cursor: pointer; font-family: inherit; }
button.fp-tier { background: var(--bg); }
.fp-tier.viewing { box-shadow: 0 0 0 2px var(--gold); }
.fp-viewnote { font-size: 12px; color: var(--muted); }

/* ---- Pressure tasks ------------------------------------------------------- */
.fp-sub { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; color: var(--gold); margin: 18px 0 8px; }
.pt { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 8px; }
.pt__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.pt__name { font-weight: 600; color: var(--text); font-size: 14px; }
.pt__desc { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.pt__bands { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-band { font-size: 12px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 6px; padding: 3px 8px; color: var(--muted); }
.pt-band b { color: var(--gold); }

.pt__action { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-select { padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); color: var(--text); font-size: 13px; }

/* ---- Review games entry --------------------------------------------------- */
.games-entry { margin-top: 4px; }
.ge-block { margin-top: 10px; }
.ge-title { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 6px; }
.ge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.ge { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.ge input { padding: 7px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); color: var(--text); font-size: 14px; }


/* ---- Pro reference library ------------------------------------------------ */
.panel__hint { color: var(--muted); font-size: 14px; margin: -4px 0 14px; }
.pro-list { display: flex; flex-direction: column; gap: 12px; }
.pro-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; }
.pro-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pro-name { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--text); }
.pro-hand { margin-left: 10px; font-size: 13px; color: var(--muted); }
.pro-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.pro-badge.ok { background: rgba(75,191,107,0.15); color: #4bbf6b; border-color: transparent; }
.pro-badge.amber { background: var(--gold-soft); color: var(--gold); border-color: transparent; }
.pro-badge.err { background: rgba(211,63,56,0.15); color: #e0645d; border-color: transparent; }
.pro-notes { font-size: 13px; color: var(--muted); margin-top: 6px; }
.pro-result { margin-top: 12px; }
.pro-sig { display: block; font-size: 14px; color: var(--text); margin-bottom: 10px; }
.pro-sig b { color: var(--gold); }
.pro-video { width: 100%; max-width: 420px; border-radius: var(--radius-s); display: block; background: #000; }
.pro-muted, .pro-empty { color: var(--muted); font-size: 14px; margin-top: 10px; }
.pro-err-msg { color: #e0645d; font-size: 13px; margin-top: 10px; }
.pro-actions { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pro-upload { cursor: pointer; }
.pro-msg { font-size: 13px; color: var(--muted); }

/* ---- Flight Path Licence (Jaymie template) -------------------------------- */
.licence-wrap { margin-bottom: 22px; }
.licence-card { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1584 / 1000;
  background-size: cover; background-position: center; border-radius: 12px; overflow: hidden;
  container-type: inline-size; font-family: 'Barlow Condensed', sans-serif; box-shadow: 0 12px 34px rgba(0,0,0,0.45); }
.lc-photo { position: absolute; left: 3.6%; top: 7%; width: 27.8%; height: 73%; object-fit: cover; border-radius: 3px; }
.lc-photo--empty { display: flex; align-items: center; justify-content: center; font-size: 12cqw; color: rgba(255,255,255,0.35); background: #12141b; }
.lc-name { position: absolute; left: 36%; top: 35.5%; transform: translateY(-50%); color: #fff; font-weight: 700; font-size: 4.2cqw; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.lc-val { position: absolute; left: 58.5%; transform: translateY(-50%); color: #fff; font-weight: 700; font-size: 2.3cqw; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.lc-v1 { top: 44%; } .lc-v2 { top: 51%; } .lc-v3 { top: 57.6%; } .lc-v4 { top: 64.3%; } .lc-v5 { top: 71.1%; } .lc-v6 { top: 78%; }
.lc-pid { position: absolute; left: 25.9%; top: 90%; transform: translateY(-50%); color: #fff; font-weight: 700; font-size: 2.4cqw; white-space: nowrap; }
.lc-tools { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.lc-msg { font-size: 13px; color: var(--muted); }
.lc-editor { margin-top: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-s); max-width: 640px; }
.lc-editor .ge-grid { margin-bottom: 12px; }

.pro-badge.ref { background: var(--bg); color: var(--muted); border: 1px solid var(--line); margin-left: 8px; }
.pro-badge.side { background: rgba(75,191,107,0.12); color: #4bbf6b; border-color: transparent; margin-left: 8px; }

.fp-promote { margin-top: 10px; display: inline-block; }

.cr-count { font-weight: 700; color: var(--gold); font-size: 13px; margin-right: 4px; }

.pt-pass { color: #4bbf6b; }

.pt-history { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.pt-hist-row { font-size: 13px; color: var(--muted); padding: 3px 0; }
.pt-hist-date { color: var(--muted); font-size: 12px; margin-left: 6px; }
.pt-retake { margin-top: 8px; display: inline-block; }

/* ============================================================
   HUD ELEVATION PASS — premium depth, kept token-compatible
   ============================================================ */

/* Cards & panels: soft gradient, real depth, hairline top-light */
.card, .panel, .login__card, .pro-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.8);
  position: relative;
}
.card::before, .panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent);
  pointer-events: none;
}

/* Primary buttons: gold gradient + glow lift */
.btn {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: 0 8px 22px -10px rgba(245,196,81,.5);
}
.btn:hover { filter: brightness(1.04); box-shadow: 0 12px 26px -10px rgba(245,196,81,.65); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Topbar: glass + gold hairline */
.topbar {
  background: linear-gradient(180deg, rgba(12,18,30,.92), rgba(9,13,22,.86));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 rgba(245,196,81,.14);
}

/* Eyebrow labels a touch brighter/warmer */
.card__label, .panel__title { color: var(--muted); }
.brand__eyebrow { color: var(--gold); }

/* Data readouts in the flight-instrument mono */
.lc-pid, .fp-prog, .metric .v, .pt-hist-date, .vbadge { font-family: var(--mono); }

/* Inputs & selects: match the darker surfaces */
.field input, .field select, select, input[type="text"], input[type="number"], textarea {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-s);
}
.field input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Pills / secondary chips: subtle gold-on-hover */
.pill:hover, .pro-badge.side { border-color: var(--gold-line); }

/* Throws most like [Pro] — surfaced on side analysis */
.vpro { margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--gold-line); border-radius: 12px;
  background: linear-gradient(90deg, rgba(245,196,81,.09), transparent); font-size: 14px; color: var(--text); }
.vpro b { color: var(--gold-bright); font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.vpro__m { margin-left: auto; font-family: var(--mono); font-size: 13px; color: #67e8d0; }

/* ---- Movement log ---- */
.movement-log { margin-bottom: 28px; }
.ml-empty { color: var(--muted); font-size: 14px; padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius-s); }
.ml-card { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px; }
.ml-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 6px; }
.ml-legend .ml-count { margin-left: auto; font-family: var(--mono); color: var(--dim); }
.ml-chart { width: 100%; height: auto; }
.ml-chart .ml-axis { fill: var(--dim); font-size: 10px; font-family: var(--mono); }
.ml-list { margin-top: 12px; border-top: 1px solid var(--line-soft); }
.ml-row { border-bottom: 1px solid var(--line-soft); }
.ml-rowhead { width: 100%; display: flex; align-items: center; gap: 16px; background: none; border: 0; color: var(--text); padding: 11px 4px; cursor: pointer; font-family: var(--body); font-size: 14px; text-align: left; }
.ml-rowhead:hover { color: #fff; }
.ml-date { font-family: var(--mono); font-size: 12px; color: var(--muted); min-width: 74px; }
.ml-ang { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.ml-ang b { color: var(--text); font-family: var(--mono); }
.ml-pro { font-size: 12px; color: var(--gold); }
.ml-caret { margin-left: auto; color: var(--dim); transition: transform .2s; }
.ml-rowhead.open .ml-caret { transform: rotate(90deg); }
.ml-detail { padding: 6px 4px 14px; }
.ml-spark { width: 100%; height: 90px; display: block; }
.ml-sparklab { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 2px; }
.ml-nospark { color: var(--muted); font-size: 13px; padding: 8px 0; }

.ml-read { font-size: 14.5px; color: #dfe7f4; background: rgba(245,196,81,.06); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; padding: 12px 14px; margin: 4px 0 14px; }
.ml-read b { color: var(--gold-bright); font-weight: 600; }

.booking-row { margin: 4px 0 10px; font-size: 13.5px; color: var(--muted); }
.booking-lbl { color: var(--dim); }
.booking-val { color: var(--text); }
.booking-val em { color: var(--dim); font-style: italic; }

/* ============ Paid online reviews ============ */
body.public { background-attachment: fixed; }
.order-wrap { max-width: 620px; margin: 0 auto; padding: clamp(20px,5vw,48px) 18px 60px; }
.order-brand { text-align: center; margin-bottom: 24px; }
.order-eyebrow { font-family: var(--display); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-size: 13px; }
.order-brand h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(30px,6vw,48px); line-height: 1; margin: 8px 0; }
.order-lede { color: var(--muted); font-size: 15px; margin: 0; }
.order-foot { text-align: center; color: var(--dim); font-size: 12px; margin-top: 30px; }

.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .tier-grid { grid-template-columns: 1fr; } }
.tier { text-align: left; background: linear-gradient(180deg,var(--surface),var(--bg-2)); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 20px; cursor: pointer; transition: .2s; color: var(--text); }
.tier:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(245,196,81,.4); }
.tier__price { font-family: var(--display); font-weight: 700; font-size: 34px; color: var(--gold-bright); line-height: 1; }
.tier__name { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 20px; margin: 6px 0 2px; }
.tier__sub { color: var(--muted); font-size: 13px; }
.tier__feats { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--text); }
.tier__feats li { padding: 3px 0 3px 18px; position: relative; }
.tier__feats li::before { content: "\2713"; color: var(--gold); position: absolute; left: 0; }
.tier__go { display: inline-block; margin-top: 12px; color: var(--gold); font-weight: 600; font-size: 14px; }

.ocard { background: linear-gradient(180deg,var(--surface),var(--bg-2)); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; }
.ostep { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.ochosen, .opay { font-size: 15px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.opay__amt { float: right; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--gold-bright); }
.ofield { display: block; margin: 12px 0; }
.ofield span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.ofield em { color: var(--dim); }
.ofield input, .ofield select { width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-s); padding: 11px 12px; font-size: 15px; }
.ocheck { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); margin: 12px 0; }
.ocheck input { margin-top: 3px; }
.minor-box { border: 1px solid var(--gold-line); border-radius: var(--radius-s); padding: 4px 14px 12px; background: rgba(245,196,81,.05); }
.obtn { width: 100%; margin-top: 16px; }
.omsg { color: var(--gold-bright); font-size: 13px; min-height: 18px; margin-top: 8px; }
.ohint { color: var(--muted); font-size: 13.5px; }
.ug { border: 1px solid var(--line-soft); border-radius: var(--radius-s); padding: 14px; margin: 12px 0; }
.ug__head { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 16px; }
.ug__count { float: right; font-family: var(--mono); color: var(--gold); font-size: 13px; }
.ug__slots { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.slot { font-size: 13px; padding: 6px 10px; border-radius: 8px; }
.slot.ok { background: rgba(75,191,107,.14); color: #7ce29a; }
.slot.empty { color: var(--dim); }
.ug__add { display: inline-block; cursor: pointer; color: var(--gold); font-weight: 600; font-size: 14px; }
.res-ref { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-bottom: 12px; }
.res-wait { font-size: 16px; line-height: 1.5; }
.res-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; color: var(--gold); margin: 20px 0 10px; }
.res-metrics { display: flex; flex-wrap: wrap; gap: 10px; }
.res-m { flex: 1; min-width: 90px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; }
.res-m__v { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--gold-bright); }
.res-m__l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin-top: 4px; }
.res-reads { padding-left: 18px; color: var(--text); font-size: 14.5px; line-height: 1.6; }
.res-coach { white-space: pre-wrap; font-size: 15px; line-height: 1.6; color: var(--text); }
.res-spin { width: 26px; height: 26px; border: 3px solid var(--line2); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; margin: 16px auto 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.orders-list { display: flex; flex-direction: column; gap: 10px; }
.ord { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(180deg,var(--surface),var(--bg-2)); border: 1px solid var(--line-soft); border-radius: var(--radius-s); padding: 14px 16px; }
.ord--todo { border-color: var(--gold-line); }
.ord__main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ord__ref { color: var(--dim); font-size: 12px; }
.ord__who { font-weight: 600; }
.ord__minor { background: rgba(245,196,81,.16); color: var(--gold); font-size: 10px; padding: 1px 6px; border-radius: 6px; letter-spacing: .06em; }
.ord__tier { color: var(--muted); font-size: 13px; }
.ord__side { display: flex; align-items: center; gap: 12px; }
.ord__status { font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.ord__status.s-paid { color: var(--gold); border-color: var(--gold-line); }
.ord__status.s-ready, .ord__status.s-delivered { color: #7ce29a; }
.ord__date { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.ord-reviewbox { background: var(--panel2); border: 1px solid var(--gold-line); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; }
.ord-rb-head { font-weight: 600; margin-bottom: 10px; }
.ord-nums { font-family: var(--mono); font-size: 13px; color: var(--text); display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ord-note { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.ord-textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-s); padding: 12px; font: inherit; font-size: 15px; resize: vertical; }
.ord-rb-actions { margin-top: 10px; display: flex; align-items: center; gap: 12px; }

.vplain { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.vplain__row { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; }
.vplain__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.vplain__h span { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--text); }
.vplain__h b { font-family: var(--display, inherit); font-weight: 700; font-size: 20px; color: var(--gold, #f5c451); }
.vplain__p { font-size: 13.5px; line-height: 1.5; color: var(--muted, #9fb0c8); }

.vcard__actions { display: inline-flex; gap: 10px; align-items: center; }

.vcmp { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.vcmp__vids { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .vcmp__vids { grid-template-columns: 1fr; } }
.vcmp__lbl { font-family: var(--display, inherit); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: var(--gold, #f5c451); margin-bottom: 5px; }
.vcmp__t { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.vcmp__t th, .vcmp__t td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
.vcmp__t th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #9fb0c8); }
.vcmp__d { font-weight: 700; color: var(--gold, #f5c451); }
.vcmp__note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted, #9fb0c8); }

/* Lesson plan (coach-only) */
.lesson-plan { margin-bottom: 8px; }
.lp-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lp-editor { margin: 6px 0 14px; }
.lp-focus { font-weight: 600; color: var(--gold, #f5c451); margin-bottom: 8px; font-size: 14px; }
.lp-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.lp-saved { display: flex; flex-direction: column; gap: 10px; }
.lp-card { border: 1px solid var(--line-soft, #26324a); border-radius: 12px; padding: 12px 14px; }
.lp-card__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.lp-card__date { font-weight: 700; }
.lp-card__focus { color: var(--muted, #9fb0c8); font-size: 13px; }
.lp-card__actions { margin-left: auto; display: inline-flex; gap: 10px; }
.lp-card__body { white-space: pre-wrap; font-family: inherit; font-size: 14px; line-height: 1.55; color: var(--text, #e7edf6); margin: 0; }