/* 通用 settings / profile / admin 页面 */

.page {
  /* 横向 padding 让 .container 决定（base.css §container），只控上下间距 */
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-16);
}
.page__title {
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-6);
}
.page__section {
  margin-bottom: var(--sp-6);
}
.page__section-title {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-3);
}

.s-card {
  padding: var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.s-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.s-card__head-icon {
  font-size: var(--t-2xl);
}
.s-card__head-title {
  font-size: var(--t-lg);
  font-weight: 600;
}
.s-card__body {
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
}
.s-card__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* profile stats */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.profile-head__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--bg-2);
}
.profile-head__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-head__name {
  font-size: var(--t-2xl);
  font-weight: 700;
}
.profile-head__sub {
  font-size: var(--t-sm);
  color: var(--text-3);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.stat {
  padding: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
}
.stat__label {
  font-size: var(--t-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat__value {
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--text);
  margin-top: var(--sp-1);
}
.stat__sub {
  font-size: var(--t-xs);
  color: var(--text-2);
  margin-top: var(--sp-1);
}

/* admin invites table */
.inv-table {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: var(--t-sm);
}
.inv-table-head {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-2);
  font-weight: 600;
  font-size: var(--t-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.inv-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border-soft);
}
.inv-row__code {
  font-family: var(--font-mono);
  color: var(--text);
  font-size: var(--t-xs);
  overflow-wrap: anywhere;
}
.inv-row__url {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-chip {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
}
.inv-chip--ok    { background: var(--success-soft); color: var(--success); }
.inv-chip--used  { background: var(--bg-2);         color: var(--text-3); }
.inv-chip--exp   { background: var(--warning-soft); color: var(--warning); }

/* admin settings */
.set-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  align-items: center;
  margin-bottom: var(--sp-3);
}
@media (max-width: 600px) {
  .set-row { grid-template-columns: 1fr auto; }
  .set-row__desc { grid-column: 1 / -1; }
}
.set-row__label {
  font-weight: 600;
  color: var(--text);
}
.set-row__desc {
  font-size: var(--t-xs);
  color: var(--text-3);
  margin-top: var(--sp-1);
}
.set-row__value {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--text-2);
}
.set-row__value--unset { color: var(--text-3); font-style: italic; }
.set-row__editing {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
}

/* Onboarding modal */
.onboard {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.onboard.is-shown { display: flex; }

.onboard__card {
  width: min(540px, 100%);
  max-height: 90vh;
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  overflow-y: auto;
}
.onboard__icon {
  display: flex;
  justify-content: center;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.onboard__title {
  font-size: var(--t-xl);
  font-weight: 700;
  text-align: center;
}
.onboard__body {
  font-size: var(--t-base);
  line-height: var(--lh-loose);
  color: var(--text-2);
  text-align: center;
}
.onboard__progress {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
}
.onboard__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-active);
}
.onboard__dot.is-active { background: var(--accent); }

.onboard__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-3);
}
.onboard__skip {
  font-size: var(--t-sm);
  color: var(--text-3);
}


/* 观看记录列表（profile 页） */
.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.history-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--tr), background var(--tr);
}
.history-row:hover { border-color: var(--border); background: var(--bg-hover); }
.history-row__thumb {
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  border-radius: var(--r);
  overflow: hidden;
}
.history-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.history-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.history-row__title {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text);
  line-height: var(--lh-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.history-row__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-xs);
  color: var(--text-3);
}
.history-row__done { margin-left: auto; color: var(--success); font-weight: 600; }
.history-row__bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.history-row__fill { height: 100%; background: var(--accent); }
.history-row__pct { font-size: var(--t-xs); color: var(--text-3); }
@media (max-width: 480px) {
  .history-row { grid-template-columns: 84px 1fr; gap: var(--sp-2); padding: var(--sp-2); }
}


.onboard__cta {
  margin-top: var(--sp-4);
  font-size: var(--t-sm);
}