/* =========================================================================
   ACCOUNTS, ADMIN DESK, LEGAL PAGES, MANUAL LEADERBOARD

   Borrows the tokens the V28 sheet already sets: --or, --dark, --border,
   --r, --shadow. Nothing here restyles anything that existed before.
   ========================================================================= */

/* ------------------------------------------------------ the nav account */
.nav-account { display: flex; align-items: center; gap: .5rem; flex-shrink: 0 }

.nav-acct-in,
.nav-acct-out {
  background: none;
  border: 1.5px solid var(--border);
  color: #444;
  font-weight: 700;
  font-size: .78rem;
  padding: .48rem .9rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.nav-acct-in:hover,
.nav-acct-out:hover { border-color: var(--or); color: var(--or) }

.nav-acct {
  display: flex; align-items: center; gap: .45rem;
  background: var(--or3);
  border: 1.5px solid rgba(241, 100, 30, .35);
  border-radius: 6px;
  padding: .34rem .75rem .34rem .36rem;
  cursor: pointer;
  font-weight: 800; font-size: .78rem; color: var(--dark2);
  white-space: nowrap;
}
.nav-acct:hover { border-color: var(--or) }
.nav-acct-i {
  width: 24px; height: 24px; border-radius: 5px;
  background: var(--or); color: #fff;
  display: grid; place-items: center;
  font-size: .74rem; font-weight: 800;
}
@media (max-width: 960px) { .nav-acct-n, .nav-acct-out { display: none } }

/* --------------------------------------------------- sign in, admin gate */
.acc-card {
  max-width: 470px;
  margin: 0 auto 2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem 1.9rem;
  box-shadow: var(--shadow);
}
.acc-field { display: block; margin-bottom: 1.05rem }
.acc-field > span {
  display: block;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .38rem;
}
.acc-field input,
.acc-field textarea {
  width: 100%;
  font: inherit;
  font-size: .93rem;
  padding: .72rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fcfcfb;
  color: var(--text);
}
.acc-field input:focus,
.acc-field textarea:focus {
  outline: none;
  border-color: var(--or);
  background: #fff;
}
.acc-error {
  background: #fff0ee;
  border: 1px solid #f6bdb4;
  color: #a02a13;
  border-radius: 8px;
  padding: .6rem .8rem;
  font-size: .84rem;
  font-weight: 600;
  margin-bottom: .9rem;
}
.acc-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--or), var(--or2));
  color: #fff; border: none;
  font-weight: 800; font-size: .92rem; letter-spacing: .3px;
  padding: .85rem 1rem;
  border-radius: 8px;
  cursor: pointer;
}
.acc-submit:hover { box-shadow: 0 6px 20px rgba(241, 100, 30, .4) }
.acc-note {
  font-size: .8rem; line-height: 1.55; color: var(--muted);
  margin-top: 1rem;
}
.acc-wa {
  width: 100%;
  margin-top: .85rem;
  background: none;
  border: 1.5px solid var(--border);
  color: #444;
  font-weight: 700; font-size: .84rem;
  padding: .7rem 1rem;
  border-radius: 8px;
  cursor: pointer;
}
.acc-wa:hover { border-color: var(--or); color: var(--or) }

/* ---------------------------------------------------------- legal pages */
.legal-card h4 {
  font-size: 1.02rem;
  margin: 1.8rem 0 .55rem;
  color: var(--dark2);
}
.legal-card h4:first-child { margin-top: 0 }
.legal-card p {
  font-size: .93rem;
  line-height: 1.72;
  color: #444;
  margin-bottom: .8rem;
  max-width: 68ch;
}

/* ------------------------------------------------------------ admin desk */
.adm-bar {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  margin-bottom: 1.6rem;
}
.adm-tabs { display: flex; gap: .5rem; flex-wrap: wrap }
.adm-tab {
  background: #fff;
  border: 1.5px solid var(--border);
  color: #555;
  font-weight: 800; font-size: .82rem;
  padding: .55rem 1.1rem;
  border-radius: 7px;
  cursor: pointer;
}
.adm-tab.is-on { background: var(--dark2); border-color: var(--dark2); color: #fff }
.adm-lock {
  background: none; border: 1.5px solid var(--border);
  color: #777; font-weight: 700; font-size: .8rem;
  padding: .55rem 1rem; border-radius: 7px; cursor: pointer;
}
.adm-lock:hover { border-color: #d33; color: #d33 }

.adm-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 760px) { .adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

.adm-panel { display: none }
.adm-panel.is-on { display: block }

.adm-panel-head {
  display: flex; gap: 1rem; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  margin-bottom: 1.1rem;
}
.adm-search {
  flex: 1 1 240px;
  font: inherit; font-size: .9rem;
  padding: .65rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.adm-search:focus { outline: none; border-color: var(--or) }
.adm-board-note { font-size: .85rem; color: var(--muted); flex: 1 1 260px; margin: 0 }

.adm-action {
  background: var(--dark2); color: #fff; border: none;
  font-weight: 800; font-size: .82rem;
  padding: .65rem 1.1rem; border-radius: 7px; cursor: pointer;
  white-space: nowrap;
}
.adm-action:hover { background: var(--or) }
.adm-action.ghost { background: none; border: 1.5px solid var(--border); color: #555 }
.adm-action.ghost:hover { border-color: var(--or); color: var(--or); background: none }

.adm-mini {
  background: #fff; border: 1.5px solid var(--border);
  color: #555; font-weight: 700; font-size: .74rem;
  padding: .35rem .7rem; border-radius: 6px; cursor: pointer;
}
.adm-mini:hover { border-color: var(--or); color: var(--or) }
.adm-mini.danger:hover { border-color: #d33; color: #d33 }
.adm-mini[disabled] { opacity: .35; cursor: default }
.adm-mini[disabled]:hover { border-color: var(--border); color: #555 }

.adm-empty {
  background: #fafaf8; border: 1px dashed var(--border);
  border-radius: var(--r);
  padding: 2rem 1.4rem; text-align: center;
  color: var(--muted); font-size: .9rem;
}

/* people table */
.adm-table {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
}
.adm-tr {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr .7fr 1.4fr;
  gap: 1rem; align-items: center;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.adm-tr:last-child { border-bottom: none }
.adm-th {
  background: #fafaf8;
  font-size: .7rem; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted);
}
.adm-person { display: flex; align-items: center; gap: .7rem; min-width: 0 }
.adm-person b { display: block; font-size: .88rem; color: var(--dark2) }
.adm-person i {
  display: block; font-style: normal;
  font-size: .76rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis;
}
.adm-initial {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 7px; background: var(--or3); color: var(--or);
  display: grid; place-items: center;
  font-weight: 800; font-size: .84rem;
}
.adm-dim { font-size: .8rem; color: var(--muted) }
.adm-pill {
  display: inline-block;
  font-size: .7rem; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: 20px;
  background: #f2f2f0; color: #888;
}
.adm-pill.on { background: #e6f7ec; color: #17794a }
.adm-row-actions { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap }

@media (max-width: 820px) {
  .adm-tr { grid-template-columns: 1fr; gap: .5rem }
  .adm-th { display: none }
  .adm-tr { border-bottom: 8px solid #fafaf8 }
  .adm-dim::before {
    content: attr(data-label) ': ';
    font-weight: 800; color: #bbb;
  }
  .adm-row-actions { justify-content: flex-start }
}

/* videos */
.adm-video {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 1.1rem; align-items: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1rem;
  margin-bottom: .9rem;
}
.adm-video.has-video { border-color: rgba(241, 100, 30, .38) }
.adm-video-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: var(--dark2);
  overflow: hidden;
  display: grid; place-items: center;
  color: #555; font-weight: 800; font-size: 1.4rem;
}
.adm-video-thumb img { width: 100%; height: 100%; object-fit: cover }
.adm-video-fields { min-width: 0 }
.adm-field-row { display: flex; gap: .7rem; flex-wrap: wrap }
.adm-field { display: block; flex: 1 1 180px; margin-bottom: .7rem }
.adm-field.short { flex: 0 1 110px }
.adm-field > span {
  display: block;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: .3rem;
}
.adm-field input,
.adm-field textarea {
  width: 100%; font: inherit; font-size: .86rem;
  padding: .55rem .7rem;
  border: 1.5px solid var(--border);
  border-radius: 7px; background: #fcfcfb;
}
.adm-field input:focus,
.adm-field textarea:focus { outline: none; border-color: var(--or); background: #fff }
@media (max-width: 700px) {
  .adm-video { grid-template-columns: 1fr }
  .adm-video-thumb { max-width: 200px }
}

.adm-add {
  background: #fafaf8;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.3rem;
  margin-top: 1.4rem;
}
.adm-add h4 { margin-bottom: .9rem; font-size: 1rem }
.adm-add-grid { display: flex; gap: .7rem; flex-wrap: wrap }
.adm-add .acc-submit { width: auto; padding: .7rem 1.6rem }

/* the board, on the desk */
.adm-board {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
}
.adm-board-row {
  display: grid;
  grid-template-columns: 42px 1.4fr 130px 1.6fr auto;
  gap: .6rem; align-items: center;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--border);
}
.adm-board-row:last-child { border-bottom: none }
.adm-board-rank {
  font-weight: 800; font-size: .9rem;
  color: var(--or); text-align: center;
}
.adm-board-row input {
  font: inherit; font-size: .86rem;
  padding: .48rem .6rem;
  border: 1.5px solid var(--border);
  border-radius: 6px; background: #fcfcfb;
  min-width: 0;
}
.adm-board-row input:focus { outline: none; border-color: var(--or); background: #fff }
.adm-board-moves { display: flex; gap: .3rem }
.adm-board-add {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-top: 1rem;
}
.adm-board-add input {
  font: inherit; font-size: .88rem;
  padding: .6rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: 7px; background: #fff;
  flex: 1 1 180px;
}
.adm-board-add input:focus { outline: none; border-color: var(--or) }
@media (max-width: 760px) {
  .adm-board-row { grid-template-columns: 34px 1fr auto }
  .adm-board-note, .adm-board-rev { grid-column: 2 / -1 }
}

/* ------------------------------------------------- the manual leaderboard */
.lb-admin-tools { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center }
.btn-edit-mode.ghost {
  background: none;
  border: 1.5px solid var(--border);
  color: #555;
}
.btn-edit-mode.ghost:hover { border-color: var(--or); color: var(--or) }

.lb-rank-input {
  width: 52px;
  font: inherit; font-size: .84rem; font-weight: 800;
  text-align: center;
  padding: .35rem .3rem;
  border: 1.5px solid var(--border);
  border-radius: 6px; background: #fff;
  color: var(--dark2);
}
.lb-rank-input:focus { outline: none; border-color: var(--or) }
.lb-note {
  font-style: normal;
  font-size: .74rem;
  color: var(--muted);
  margin-left: .45rem;
}
.lb-icon-btn[disabled] { opacity: .28; cursor: default }
.lb-icon-btn.danger:hover { color: #d33 }
.lb-actions-cell { display: flex; gap: .3rem; justify-content: flex-end }

/* the dashboard video, once a real link is behind it */
.mod-video.is-live { padding: 0; aspect-ratio: 16 / 9 }
.mod-video.is-live iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
  border-radius: inherit;
}