/* Account, member and admin screens. */
.app-main { min-height: 100svh; padding: calc(var(--bar-h) + 2.2rem) var(--sc-gutter) 4rem; max-width: 76rem; margin-inline: auto; }
.app-nav { font-size: .88rem; }
.app-nav a.is-on { color: var(--sc-ink); }
.app-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.2rem; padding: 1.4rem var(--sc-gutter) calc(1.4rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sc-hairline); font-size: .8rem; color: var(--sc-ink-soft); }
@media (max-width: 1040px) { .app-nav a:not(.btn) { display: inline; } .app-nav .app-nav__site { display: none; } }

.auth { max-width: 30rem; margin: 3vh auto 0; }
.auth--wide { max-width: 40rem; }
.auth h1 { font: 400 clamp(2.4rem, 1.6rem + 3vw, 3.6rem)/1 var(--sc-font-display); margin: .5rem 0 .8rem; }
.auth .lede { color: var(--sc-ink-soft); margin: 0 0 1.8rem; }
.auth .switch { margin-top: 1.4rem; font-size: .9rem; color: var(--sc-ink-soft); text-align: center; }
.steps { display: flex; gap: .5rem; margin-bottom: 1.4rem; font-size: .78rem; color: var(--sc-ink-soft); }
.steps span { flex: 1; border-top: 2px solid var(--sc-hairline); padding-top: .5rem; }
.steps span.on { border-color: var(--sc-accent); color: var(--sc-ink); }
.pw-rules { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .76rem; color: var(--sc-ink-soft); margin: .2rem 0 0; padding: 0; list-style: none; }
.pw-rules li.ok { color: var(--ok); }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok::before { content: "● "; }
.copyline { display: flex; gap: .5rem; align-items: center; background: rgba(244,238,234,.06); border: 1px solid var(--sc-hairline); border-radius: 10px; padding: .55rem .6rem .55rem .9rem; font-weight: 600; word-break: break-all; }
.copyline span { flex: 1; }
.wait { display: flex; gap: .7rem; align-items: center; color: var(--sc-ink-soft); font-size: .92rem; }
.spinner { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid rgba(244,238,234,.2); border-top-color: var(--sc-accent); animation: spin 900ms linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* dashboard */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.dash-head h1 { font: 400 clamp(2.4rem, 1.6rem + 3vw, 4rem)/1 var(--sc-font-display); margin: .4rem 0 0; }
.progress { height: 6px; background: rgba(244,238,234,.1); border-radius: 99px; overflow: hidden; margin: .7rem 0 .4rem; }
.progress i { display: block; height: 100%; background: var(--sc-accent); width: var(--w, 0%); border-radius: 99px; transition: width 400ms var(--sc-ease-out); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.dash-side { display: grid; gap: 1rem; }
.modlist { display: grid; gap: .8rem; }
.modcard { background: var(--sc-surface); border-radius: 14px; box-shadow: var(--sc-edge); overflow: hidden; }
.modcard > header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 1.3rem .6rem; }
.modcard h2 { font: 400 1.5rem/1.1 var(--sc-font-display); margin: 0; }
.modcard h2 b { color: var(--sc-accent); font-weight: 400; margin-right: .5rem; }
.modcard ol { list-style: none; margin: 0; padding: 0 .6rem .6rem; }
.modcard li a { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .6rem .7rem; border-radius: 10px; text-decoration: none; font-size: .95rem; }
.modcard li a:hover { background: rgba(244,238,234,.05); }
.modcard li small { color: var(--sc-ink-soft); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tick { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1.5px solid rgba(244,238,234,.3); display: grid; place-items: center; }
.tick.done { background: var(--sc-accent); border-color: var(--sc-accent); }
.tick.done::after { content: ""; width: .45rem; height: .25rem; border-left: 2px solid var(--sc-accent-ink); border-bottom: 2px solid var(--sc-accent-ink); rotate: -45deg; margin-top: -.1rem; }
.side-card h2 { font: 400 1.4rem/1.1 var(--sc-font-display); margin: 0 0 .5rem; }
.side-card p { color: var(--sc-ink-soft); font-size: .9rem; margin: 0 0 1rem; }
.files { list-style: none; margin: 0; padding: 0; }
.files li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--sc-hairline); font-size: .88rem; }
.files button { background: transparent; border: 0; color: var(--sc-accent); font: 600 .85rem var(--sc-font-text); cursor: pointer; white-space: nowrap; padding: .2rem 0; }

/* lesson */
.lesson { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.6rem; align-items: start; }
.crumbs { font-size: .82rem; color: var(--sc-ink-soft); margin-bottom: .8rem; }
.crumbs a { color: inherit; }
.lesson h1 { font: 400 clamp(2rem, 1.4rem + 2.4vw, 3.2rem)/1.02 var(--sc-font-display); margin: 0 0 1.2rem; }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: var(--sc-e3); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lesson-body { margin-top: 1.6rem; max-width: 64ch; }
.lesson-body p, .lesson-body li { color: var(--sc-ink-soft); }
.lesson-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--sc-hairline); }
.lesson-side { position: sticky; top: calc(var(--bar-h) + 1rem); }

/* admin */
.admin-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.4rem 0; }
.admin-tabs button { background: transparent; border: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); border-radius: 999px; padding: .5rem .95rem; font: 500 .85rem var(--sc-font-text); cursor: pointer; }
.admin-tabs button[aria-selected="true"] { background: var(--bone); color: var(--ink-dark); border-color: var(--bone); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.kpi { background: var(--sc-surface); border-radius: 12px; padding: 1rem 1.1rem; }
.kpi b { display: block; font: 400 2.2rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums; }
.kpi span { font-size: .78rem; color: var(--sc-ink-soft); }
.tablewrap { overflow-x: auto; background: var(--sc-surface); border-radius: 12px; }
table.t { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.t th, table.t td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--sc-hairline); vertical-align: top; }
table.t th { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
table.t td.num { font-variant-numeric: tabular-nums; }
.pill { display: inline-block; border-radius: 99px; padding: .15rem .55rem; font-size: .74rem; font-weight: 600; }
.pill--active { background: rgba(159,214,184,.15); color: var(--ok); }
.pill--revoked { background: rgba(242,160,140,.15); color: var(--danger); }
.pill--none { background: rgba(244,238,234,.08); color: var(--sc-ink-soft); }
.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.row-actions button { background: transparent; border: 1px solid var(--sc-hairline); color: var(--sc-ink); border-radius: 8px; padding: .3rem .55rem; font: 500 .78rem var(--sc-font-text); cursor: pointer; }
.row-actions button:hover { border-color: var(--sc-accent); }
.inline-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.inline-form .field { min-width: 14rem; flex: 1; }
.qr { background: #fff; padding: .8rem; border-radius: 10px; width: 11rem; }
.qr img { width: 100%; height: auto; }
.mono-secret { font: 500 .85rem ui-monospace, "SF Mono", monospace; letter-spacing: .08em; word-break: break-all; }

@media (max-width: 900px) {
  .dash-grid, .lesson { grid-template-columns: 1fr; }
  .lesson-side { position: static; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}