:root {
  color-scheme: dark;
  --bg: #050505;
  --bg-2: #0b0b0c;
  --panel: #111214;
  --panel-2: #18191c;
  --panel-3: #0d0d0e;
  --text: #fff8f1;
  --muted: #b7aca3;
  --muted-2: #817970;
  --line: rgba(255, 122, 18, 0.16);
  --line-strong: rgba(255, 122, 18, 0.34);
  --blue: #ff7514;
  --blue-soft: #ff9a3d;
  --gold: #ff7514;
  --gold-soft: #ffb063;
  --orange: #ff7514;
  --orange-light: #ffb063;
  --green: #42d89b;
  --danger: #ff6b6b;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  --page: 1320px;
  --admin-page: 1520px;
  --sidebar: 232px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 22px;
  --space-5: 30px;
  --space-6: 38px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    linear-gradient(115deg, rgba(255, 117, 20, 0.14), transparent 34%),
    linear-gradient(180deg, #101010 0%, var(--bg) 42%, var(--bg) 100%);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
  opacity: 0.7;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(255, 154, 61, 0.9);
  outline-offset: 3px;
}

.hidden {
  display: none !important;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2.1rem, 3vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.3rem, 1.8vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
  line-height: 1.18;
  letter-spacing: 0;
}

p {
  color: var(--muted);
  line-height: 1.55;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand-lockup,
.sidebar-profile,
.topbar-actions,
.section-heading,
.progress-meta,
.course-actions,
.news-meta,
.profile-actions {
  display: flex;
  align-items: center;
}

.brand-lockup {
  gap: 0;
  min-width: 0;
  width: fit-content;
  padding: 8px 10px;
  border: 1px solid rgba(255, 117, 20, 0.16);
  border-radius: 14px;
  background: rgba(255, 250, 245, 0.96);
}

.brand-logo {
  display: block;
  width: 174px;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand-lockup.large .brand-logo {
  width: min(520px, 76vw);
}

.brand-lockup strong,
.brand-lockup span,
.sidebar-profile strong,
.sidebar-profile span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-lockup strong,
.sidebar-profile strong {
  color: var(--text);
  font-weight: 820;
}

.brand-lockup span,
.sidebar-profile span {
  color: var(--muted);
  font-size: 0.84rem;
}

.primary-action,
.ghost-action,
.text-link {
  border: 0;
  font-weight: 820;
}

.primary-action,
.ghost-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius-sm);
  padding: 0 18px;
  white-space: nowrap;
}

.primary-action {
  color: #06080b;
  border: 1px solid rgba(239, 216, 143, 0.58);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
}

.ghost-action {
  color: var(--text);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.text-link {
  padding: 0;
  color: var(--gold-soft);
  background: transparent;
}

.auth-screen #forgotPasswordButton {
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
}

.auth-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 500px);
  min-height: 100vh;
  background: var(--bg);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(56px, 8vh, 110px);
  min-height: 100vh;
  padding: clamp(28px, 4vw, 54px);
  background:
    linear-gradient(120deg, rgba(255, 117, 20, 0.18), transparent 38%),
    linear-gradient(180deg, #15100d, #050505);
}

.brand-lockup.large {
  gap: 15px;
}

.auth-copy {
  max-width: 760px;
}

.auth-copy h1 {
  max-width: 760px;
  font-size: clamp(2.7rem, 5vw, 5.4rem);
}

.auth-copy p {
  max-width: 610px;
  margin: 22px 0 0;
  font-size: 1.08rem;
}

.auth-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
}

.auth-proof div,
.auth-panel,
.auth-form,
.surface-panel,
.metric-card,
.quick-actions button,
.course-card,
.news-card,
.coach-card,
.featured-card,
.lesson-sidebar,
.lesson-detail,
.empty-state,
.profile-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--panel);
  box-shadow: var(--shadow);
}

.auth-proof div {
  min-height: 94px;
  padding: 16px;
}

.auth-proof strong {
  display: block;
  font-size: 1.7rem;
}

.auth-proof span {
  color: var(--muted);
  font-size: 0.86rem;
}

.auth-panel {
  align-self: center;
  width: min(100% - 32px, 460px);
  margin: 0 auto;
  padding: 16px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-3);
}

.auth-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-weight: 820;
}

.auth-tabs button.active {
  color: #06080b;
  background: var(--gold);
}

.auth-form {
  display: none;
  margin-top: 14px;
  padding: 22px;
  box-shadow: none;
}

.auth-form.active {
  display: grid;
  gap: 16px;
}

.auth-form label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 780;
}

.auth-form input,
.search-box input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(4, 8, 13, 0.62);
}

.auth-form input {
  min-height: 44px;
  border-radius: var(--radius-sm);
  padding: 0 13px;
}

.auth-form .consent-check {
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 10px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45;
}

.auth-form .consent-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  height: 20px;
  padding: 0;
  margin: 1px 0 0;
  border: 1px solid rgba(255, 166, 94, 0.62);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
  cursor: pointer;
}

.auth-form .consent-check input:checked {
  border-color: var(--orange);
  background-color: var(--orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m5 10 3 3 7-7'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
}

.auth-form .consent-check input:focus-visible {
  outline: 3px solid rgba(255, 117, 20, 0.28);
  outline-offset: 2px;
}

.auth-form .consent-check a {
  color: var(--orange-light);
}

.auth-form .referral-field > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.auth-form .referral-field small {
  color: var(--muted-2);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
}

.auth-form .referral-field.locked input {
  border-color: rgba(66, 216, 155, 0.38);
  color: #c9f8e5;
  background: rgba(66, 216, 155, 0.07);
  cursor: not-allowed;
}

.auth-form input::placeholder,
.search-box input::placeholder {
  color: var(--muted-2);
}

.register-step .auth-screen {
  grid-template-columns: 1fr;
  place-items: center;
  padding: clamp(18px, 4vw, 44px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 117, 20, 0.18), transparent 34rem),
    linear-gradient(180deg, #11100f 0%, #030303 100%);
}

.register-step .auth-brand {
  display: none;
}

.register-step .auth-panel {
  width: min(100%, 640px);
  max-height: calc(100dvh - 42px);
  overflow: auto;
  padding: 16px;
}

.register-step .auth-tabs {
  grid-template-columns: 1fr;
}

.register-step #loginTab {
  display: none;
}

.register-step .auth-form.active {
  gap: 18px;
  padding: clamp(20px, 4vw, 32px);
}

.register-step .legal-links {
  padding-top: 10px;
}

.register-back {
  justify-self: center;
}

.two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-note {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.form-note.error {
  color: var(--danger);
}

.form-note.success {
  color: var(--green);
}

.client-app {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.client-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 100vh;
  min-height: 640px;
  padding: 28px 18px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 7, 11, 0.95);
}

.client-nav {
  display: grid;
  gap: 7px;
}

.client-nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: var(--muted);
  background: transparent;
  font-weight: 820;
  text-align: left;
}

.client-nav button.active,
.client-nav button:hover {
  color: var(--text);
  border-color: rgba(255, 117, 20, 0.34);
  background: rgba(255, 117, 20, 0.08);
}

.nav-glyph {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.nav-glyph img {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
  opacity: 0.62;
  filter: invert(1);
}

.client-nav button.active .nav-glyph img {
  opacity: 1;
}

.sidebar-profile {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.avatar,
.coach-portrait {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid rgba(255, 117, 20, 0.42);
  border-radius: 50%;
  color: var(--gold-soft);
  background: linear-gradient(180deg, #0d1420, #03060a);
  font-size: 0.76rem;
  font-weight: 860;
  line-height: 1;
}

.coach-portrait.photo {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  border-color: rgba(255, 154, 61, 0.28);
  background: var(--panel-3);
}

.coach-portrait.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coach-portrait.photo span {
  display: none;
}

#sidebarAvatar,
.sidebar-profile .avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
}

.avatar > span,
.coach-portrait > span {
  display: block;
  max-width: 82%;
  overflow: hidden;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.client-main {
  min-width: 0;
  padding: 34px clamp(24px, 3vw, 48px) 56px;
  background:
    linear-gradient(110deg, rgba(255, 117, 20, 0.08), transparent 25rem),
    linear-gradient(180deg, rgba(15, 20, 29, 0.76), rgba(5, 7, 11, 0.1) 28rem),
    var(--bg);
}

.client-topbar,
.view {
  width: min(100%, var(--page));
  margin-inline: auto;
}

#adminView,
.client-topbar:has(+ .view #adminGrid) {
  width: min(100%, var(--admin-page));
}

.client-topbar {
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 34px;
}

.client-topbar h1 {
  max-width: 13ch;
}

.topbar-actions {
  display: grid;
  grid-template-columns: minmax(260px, 430px) repeat(3, auto);
  gap: 12px;
}

.search-box {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 13px;
  background: rgba(6, 10, 16, 0.74);
}

.search-box span {
  width: 14px;
  height: 14px;
  border: 2px solid var(--blue-soft);
  border-radius: 50%;
}

.search-box span::after {
  display: block;
  width: 7px;
  height: 2px;
  margin: 9px 0 0 9px;
  background: var(--blue-soft);
  content: "";
  transform: rotate(45deg);
}

.search-box input {
  min-height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.welcome-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(120deg, rgba(255, 117, 20, 0.18), transparent 46%),
    linear-gradient(180deg, #121b29, #0b1018);
}

.welcome-panel h2,
.welcome-panel p {
  color: var(--text);
}

.quick-actions,
.metric-grid,
.dashboard-grid,
.course-grid,
.coach-grid,
.news-grid,
.profile-stats {
  display: grid;
  gap: 18px;
}

.quick-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}

.quick-actions button {
  min-height: 84px;
  padding: 18px;
  text-align: left;
}

.quick-actions strong,
.quick-actions span {
  display: block;
}

.quick-actions span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.88rem;
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.metric-grid.is-highlighted .metric-card {
  border-color: var(--gold);
}

.metric-card {
  min-height: 118px;
  padding: 18px;
}

.metric-card strong {
  display: block;
  margin: 8px 0 3px;
  font-size: clamp(1.55rem, 2.1vw, 2.15rem);
  line-height: 1;
}

.metric-card span {
  color: var(--muted);
}

.metric-kicker,
.badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(255, 117, 20, 0.12);
  font-size: 0.72rem;
  font-weight: 820;
  white-space: nowrap;
}

.badge.blue {
  color: var(--blue-soft);
  background: rgba(255, 117, 20, 0.13);
}

.badge.green {
  color: var(--green);
  background: rgba(66, 216, 155, 0.12);
}

.badge.amber {
  color: var(--gold-soft);
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.surface-panel {
  padding: 22px;
}

.section-heading {
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}

.academy-hero,
.academy-section,
.coach-section,
.view-toolbar {
  margin-bottom: 34px;
}

.featured-card {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
  width: min(100%, 980px);
  padding: 18px;
}

.featured-card h3 {
  margin: 12px 0 9px;
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
}

.featured-card p {
  margin-bottom: 14px;
}

.course-cover,
.news-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 117, 20, 0.15), rgba(255, 117, 20, 0.18)),
    var(--cover, var(--panel-2));
}

.course-cover::after,
.news-thumb::after {
  position: absolute;
  inset: auto 18px 18px auto;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(244, 247, 251, 0.3);
  border-radius: 50%;
  content: "";
}

.course-cover span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.featured-card .course-cover {
  min-height: 230px;
}

.course-grid,
.compact-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-card {
  display: grid;
  grid-template-rows: 226px minmax(270px, auto);
  min-height: 0;
  overflow: hidden;
}

.course-card .course-cover {
  height: 226px;
  border-radius: 0;
}

.course-body {
  display: grid;
  grid-template-rows: minmax(126px, auto) auto auto;
  gap: 16px;
  padding: 22px;
}

.course-body h3 {
  margin-top: 12px;
}

.course-body p {
  margin-bottom: 0;
}

.progress-row {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.progress-meta {
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 780;
}

.progress-meta span {
  min-width: 0;
}

.progress-meta span:last-child {
  text-align: right;
  white-space: nowrap;
}

.progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), #f1dd9a);
}

.course-actions {
  justify-content: space-between;
  gap: 12px;
  align-self: end;
}

.course-actions .badge {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(92px, auto);
  gap: 4px;
  max-width: 100%;
  min-height: 48px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(5, 8, 13, 0.82);
}

.segmented button {
  min-height: 38px;
  min-width: 0;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 15px;
  color: var(--muted);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

.segmented button.active {
  color: #06080b;
  background: var(--gold);
}

.coach-grid {
  grid-template-columns: minmax(0, 560px);
}

.coach-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas:
    "avatar name"
    "avatar role"
    "avatar meta";
  align-items: center;
  gap: 4px 18px;
  width: min(100%, 560px);
  min-height: 156px;
  padding: 24px;
  text-align: left;
}

.coach-card.active,
.coach-card:hover {
  border-color: var(--line-strong);
}

.coach-card .coach-portrait {
  grid-area: avatar;
}

.coach-card .coach-portrait > span {
  place-self: center;
}

.coach-card strong {
  grid-area: name;
  min-width: 0;
  font-size: clamp(1.22rem, 1.6vw, 1.55rem);
}

.coach-card > span:not(.coach-portrait) {
  grid-area: role;
  color: var(--muted);
}

.coach-card small {
  grid-area: meta;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 780;
}

.mini-news,
.news-stack {
  display: grid;
  gap: 12px;
}

.mini-news {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.mini-news:last-child {
  border-bottom: 0;
}

.mini-news h3 {
  margin: 8px 0 4px;
}

.mini-news p {
  margin-bottom: 0;
  font-size: 0.88rem;
}

.news-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.news-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  min-height: 168px;
  padding: 18px;
}

.news-card.featured-news {
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1fr);
  grid-column: 1 / -1;
  min-height: 260px;
}

.news-thumb {
  min-height: 128px;
}

.news-card h3 {
  margin-top: 12px;
}

.news-meta {
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.86rem;
}

.empty-state {
  grid-column: 1 / -1;
  min-height: 180px;
  padding: 26px;
}

.course-page {
  display: grid;
  gap: 18px;
}

.back-link {
  justify-self: start;
}

.course-player-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
}

.video-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(56vw, 520px);
  padding: 30px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5)),
    var(--cover, var(--panel-2));
}

.video-embed-panel {
  display: block;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: #020409;
}

.video-embed-panel iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed-panel video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #f4eee5;
}

.video-empty-panel {
  position: relative;
}

.video-panel h2 {
  max-width: 780px;
  margin: 16px 0 8px;
  font-size: clamp(2rem, 3.6vw, 4.2rem);
  line-height: 0.98;
}

.video-panel p {
  margin-bottom: 0;
}

.lesson-sidebar,
.lesson-detail {
  padding: 20px;
}

.lesson-list {
  display: grid;
  gap: 8px;
  max-height: 420px;
  margin: 16px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.lesson-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}

.lesson-list li.current {
  border-color: rgba(255, 154, 61, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 124, 24, 0.14), rgba(255, 255, 255, 0.035));
}

.lesson-list li.done {
  border-color: rgba(255, 124, 24, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 124, 24, 0.12), rgba(255, 255, 255, 0.035));
}

.lesson-list span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.58rem;
  font-weight: 860;
  line-height: 1;
  white-space: nowrap;
}

.lesson-list li.done span {
  color: #130903;
  background: linear-gradient(180deg, #ffbd72 0%, #ff7c18 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 10px 22px rgba(255, 111, 18, 0.22);
}

.lesson-list li.current span {
  color: #130903;
  background: rgba(255, 154, 61, 0.9);
}

.lesson-list button {
  min-width: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.lesson-list strong,
.lesson-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-list small {
  margin-top: 4px;
  color: var(--muted);
}

.lesson-list li.done small {
  color: var(--gold-soft);
}

.lesson-detail {
  max-width: 920px;
}

.content-dialog {
  width: min(680px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  color: var(--text);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.content-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
}

.dialog-shell {
  position: relative;
  padding: 24px;
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.profile-panel {
  padding: 26px;
  box-shadow: none;
}

.profile-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 20px 0;
}

.profile-stats div {
  min-height: 86px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}

.profile-stats strong,
.profile-stats span {
  display: block;
}

.profile-stats strong {
  font-size: 1.45rem;
}

.profile-stats span {
  color: var(--muted);
}

.profile-actions {
  gap: 10px;
  flex-wrap: wrap;
}

.profile-actions button {
  flex: 1 1 170px;
}

.reader-body {
  margin: 20px 0;
}

.app-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  max-width: min(360px, calc(100vw - 48px));
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  color: var(--text);
  background: rgba(13, 18, 27, 0.96);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.app-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  :root {
    --sidebar: 88px;
  }

  .client-sidebar {
    min-height: 560px;
    padding-inline: 14px;
  }

  .client-nav button {
    font-size: 0;
  }

  .brand-logo {
    width: 54px;
    height: auto;
    object-fit: contain;
  }

  .client-nav button {
    justify-content: center;
    padding: 0;
  }

  .sidebar-profile {
    grid-template-columns: 38px;
    justify-content: center;
  }

  .sidebar-profile > div {
    display: none;
  }

  .topbar-actions {
    grid-template-columns: minmax(220px, 1fr) auto auto;
  }

  .dashboard-grid,
  .course-player-grid {
    grid-template-columns: 1fr;
  }

  .course-grid,
  .compact-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-card {
    grid-template-rows: 220px auto;
  }
}

/* Modern UX pass */
:root {
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.36);
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 117, 20, 0.16), transparent 32rem),
    radial-gradient(circle at 92% 12%, rgba(255, 176, 99, 0.08), transparent 26rem),
    linear-gradient(180deg, #0b0b0c 0%, #050505 46%, #030303 100%);
}

.auth-screen {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 117, 20, 0.18), transparent 24rem),
    linear-gradient(135deg, #080808, #050505);
}

.auth-brand {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(255, 117, 20, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22rem);
}

.auth-brand::after {
  position: absolute;
  inset: 12% -18% auto auto;
  width: 42rem;
  height: 42rem;
  border: 1px solid rgba(255, 117, 20, 0.13);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.auth-panel,
.surface-panel,
.metric-card,
.quick-actions button,
.course-card,
.news-card,
.coach-card,
.featured-card,
.lesson-sidebar,
.lesson-detail,
.empty-state,
.profile-panel {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(17, 18, 20, 0.88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.auth-panel {
  padding: 18px;
  border-color: rgba(255, 117, 20, 0.22);
}

.auth-form {
  gap: 18px;
  padding: 24px;
}

.auth-form input,
.admin-form input,
.admin-form textarea,
.admin-form select,
.search-box {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.auth-form input:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus,
.search-box:focus-within {
  border-color: rgba(255, 154, 61, 0.58);
  box-shadow: 0 0 0 4px rgba(255, 117, 20, 0.12);
}

.client-sidebar {
  border-right-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 117, 20, 0.06), transparent 16rem),
    rgba(5, 5, 5, 0.94);
  backdrop-filter: blur(18px);
}

.client-nav button {
  border-radius: 16px;
}

.client-nav button.active,
.client-nav button:hover {
  background:
    linear-gradient(90deg, rgba(255, 117, 20, 0.16), rgba(255, 117, 20, 0.05));
  box-shadow: inset 3px 0 0 rgba(255, 154, 61, 0.9);
}

.client-main {
  background:
    radial-gradient(circle at 4% 0%, rgba(255, 117, 20, 0.11), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 22rem),
    var(--bg);
}

.client-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 18px 0 22px;
  backdrop-filter: blur(18px);
}

.search-box,
.ghost-action {
  background: rgba(17, 18, 20, 0.74);
}

.primary-action,
.ghost-action,
.auth-tabs button,
.segmented button {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.primary-action:hover,
.ghost-action:hover,
.auth-tabs button:hover,
.segmented button:hover {
  transform: translateY(-1px);
}

.primary-action {
  box-shadow: 0 12px 34px rgba(255, 117, 20, 0.18);
}

.welcome-panel {
  min-height: 150px;
  border-color: rgba(255, 117, 20, 0.28);
  background:
    radial-gradient(circle at 88% 50%, rgba(255, 117, 20, 0.22), transparent 16rem),
    linear-gradient(135deg, rgba(29, 21, 15, 0.96), rgba(13, 14, 16, 0.94));
}

.quick-actions button,
.metric-card,
.course-card,
.news-card {
  position: relative;
  overflow: hidden;
}

.quick-actions button::before,
.metric-card::before,
.course-card::before,
.news-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 117, 20, 0.12), transparent 42%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.quick-actions button:hover::before,
.metric-card:hover::before,
.course-card:hover::before,
.news-card:hover::before {
  opacity: 1;
}

.metric-card,
.quick-actions button {
  min-height: 126px;
}

.course-card {
  border-radius: 24px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.course-card:hover,
.news-card:hover,
.quick-actions button:hover,
.metric-card:hover {
  border-color: rgba(255, 154, 61, 0.34);
  transform: translateY(-3px);
}

.course-cover,
.news-thumb {
  border-radius: 18px;
}

.course-card .course-cover {
  border-radius: 0;
}

.progress-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.progress-track span {
  background: linear-gradient(90deg, #ff7514, #ffb063);
  box-shadow: 0 0 18px rgba(255, 117, 20, 0.35);
}

.badge,
.metric-kicker {
  min-height: 26px;
  border: 1px solid rgba(255, 117, 20, 0.18);
  background: rgba(255, 117, 20, 0.11);
}

.admin-editor-grid {
  align-items: start;
}

.admin-form {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(7, 7, 8, 0.28);
}

.admin-users-panel {
  grid-column: 1 / -1;
}

.admin-users-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
  gap: 16px;
}

.admin-user-list {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 680px;
  overflow: auto;
  padding-right: 4px;
}

.admin-user-list button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
  text-align: left;
}

.admin-user-list button.active,
.admin-user-list button:hover {
  border-color: rgba(255, 154, 61, 0.34);
  background: rgba(255, 117, 20, 0.09);
}

.admin-user-list strong,
.admin-user-list small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-list small,
.admin-user-meta,
.admin-progress-list span {
  color: var(--muted);
  font-size: 0.84rem;
}

.admin-user-detail {
  display: grid;
  gap: 14px;
}

.admin-user-meta,
.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-user-progress {
  display: grid;
  gap: 14px;
}

.admin-progress-list {
  display: grid;
  gap: 10px;
}

.admin-progress-list article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.022);
}

.surface-panel,
.metric-card,
.quick-actions button,
.course-card,
.news-card,
.featured-card,
.admin-form {
  contain: layout paint;
}

.course-card,
.news-card,
.metric-card,
.quick-actions button {
  content-visibility: auto;
  contain-intrinsic-size: 1px 320px;
}

@media (max-width: 900px) {
  .client-topbar {
    position: static;
    backdrop-filter: none;
  }

  .auth-panel,
  .surface-panel,
  .metric-card,
  .quick-actions button,
  .course-card,
  .news-card,
  .coach-card,
  .featured-card,
  .lesson-sidebar,
  .lesson-detail,
  .empty-state,
  .profile-panel,
  .client-sidebar {
    backdrop-filter: none;
  }

  .admin-users-layout {
    grid-template-columns: 1fr;
  }
}

/* Base -> VIP conversion journey */
.vip-upgrade-entry {
  display: flex;
  width: calc(100% - 28px);
  min-height: 58px;
  margin: auto 14px 14px;
  padding: 10px 12px;
  align-items: center;
  gap: 11px;
  color: #090909;
  border: 1px solid rgba(255, 190, 106, 0.82);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffd088, #ff7514 68%);
  box-shadow: 0 12px 28px rgba(255, 117, 20, 0.22);
  text-align: left;
}

.vip-upgrade-entry:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(255, 117, 20, 0.3); }
.vip-upgrade-entry.has-request { color: #fff; background: linear-gradient(135deg, #2b2118, #171719); }
.vip-upgrade-entry .vip-upgrade-icon { display: grid; width: 32px; height: 32px; place-items: center; flex: 0 0 32px; border-radius: 10px; color: #fff; background: #090909; }
.vip-upgrade-entry .nav-label { display: grid; gap: 2px; }
.vip-upgrade-entry strong { font-size: 0.88rem; }
.vip-upgrade-entry small { font-size: 0.7rem; opacity: 0.72; }

.sidebar-collapsed .vip-upgrade-entry { width: 50px; min-height: 50px; margin-inline: auto; padding: 9px; justify-content: center; }
.sidebar-collapsed .vip-upgrade-entry .nav-label { display: none; }

.vip-upgrade-dialog { width: min(680px, 100%); }
.vip-upgrade-dialog > p { max-width: 58ch; }
.vip-upgrade-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.vip-upgrade-options > button { display: grid; min-height: 225px; padding: 22px; align-content: start; gap: 12px; color: var(--text); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, #1b1b1e, #101011); text-align: left; }
.vip-upgrade-options > button:hover { border-color: rgba(255, 117, 20, 0.72); transform: translateY(-2px); }
.vip-upgrade-options span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #080808; background: var(--orange); font-weight: 900; }
.vip-upgrade-options strong { font-size: 1.12rem; line-height: 1.2; }
.vip-upgrade-options small { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.vip-upgrade-options i { margin-top: auto; color: var(--orange); font-style: normal; font-weight: 850; }
.vip-status-pill { display: inline-flex; min-height: 30px; padding: 6px 11px; align-items: center; border-radius: 999px; color: #080808; background: var(--orange); font-size: 0.76rem; font-weight: 900; text-transform: uppercase; }
.vip-status-pill.scheduled, .vip-status-pill.contacted, .vip-status-pill.approved { background: #62d99b; }
.vip-status-pill.rejected, .vip-status-pill.cancelled { background: #ff7470; }
.vip-appointment-card { display: grid; gap: 7px; margin: 18px 0; padding: 20px; border: 1px solid rgba(98, 217, 155, 0.4); border-radius: 18px; background: rgba(98, 217, 155, 0.08); }
.vip-appointment-card span, .vip-appointment-card small { color: var(--muted); }
.vip-appointment-card strong { font-size: 1.25rem; }
.vip-appointment-card .primary-action { width: fit-content; margin-top: 8px; }
.vip-admin-note { padding: 14px; border-left: 3px solid var(--orange); background: rgba(255, 117, 20, 0.07); }

.admin-vip-request { margin-top: 18px; padding: 20px; border: 1px solid rgba(255, 117, 20, 0.34); border-radius: 20px; background: linear-gradient(145deg, rgba(255,117,20,0.08), rgba(255,255,255,0.02)); }
.admin-vip-request-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.admin-vip-request-summary span { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.035); color: var(--muted); font-size: 0.82rem; }
.admin-vip-request-summary b { color: var(--text); font-size: 0.72rem; text-transform: uppercase; }

@media (max-width: 760px) {
  .vip-upgrade-entry { position: fixed; z-index: 20; right: 12px; bottom: 82px; width: auto; min-height: 48px; margin: 0; border-radius: 999px; }
  .vip-upgrade-entry .nav-label small { display: none; }
  .vip-upgrade-options, .admin-vip-request-summary { grid-template-columns: 1fr; }
  .vip-upgrade-options > button { min-height: 176px; }
}

/* Public event registration pages */
.public-event-screen {
  min-height: 100dvh;
  padding: clamp(18px, 4vw, 56px);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 117, 20, 0.2), transparent 28rem),
    linear-gradient(145deg, #130d09, #050505 48%);
}

.public-event-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.public-event-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.18fr);
  overflow: hidden;
  border: 1px solid rgba(255, 117, 20, 0.24);
  border-radius: 28px;
  background: #111;
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.44);
}

.public-event-poster {
  min-height: 720px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 117, 20, 0.08), transparent 65%),
    #050505;
}

.public-event-poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.public-event-poster-placeholder {
  height: 100%;
  min-height: 720px;
  display: grid;
  align-content: end;
  gap: 12px;
  padding: 42px;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 117, 20, 0.5), transparent 35%),
    linear-gradient(145deg, #2a160b, #080808 68%);
}

.public-event-poster-placeholder span { color: var(--gold-soft); text-transform: uppercase; font-weight: 850; }
.public-event-poster-placeholder strong { font-size: clamp(2rem, 4vw, 4rem); line-height: 0.98; }

.public-event-body {
  padding: clamp(28px, 5vw, 64px);
}

.public-event-body .brand-lockup { margin-bottom: 36px; }
.public-event-body h1 { margin: 8px 0 14px; font-size: clamp(2.2rem, 4vw, 4.4rem); }
.public-event-date { margin: 0 0 18px; color: var(--gold-soft); font-weight: 780; }
.public-event-summary { margin-bottom: 14px; color: #d2cbc4; font-size: 1.05rem; }
.public-event-capacity { margin-bottom: 28px; color: var(--muted); font-size: 0.84rem; }

.public-event-form {
  display: grid;
  gap: 15px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.public-event-form label { display: grid; gap: 7px; color: #e8e1da; font-size: .82rem; font-weight: 750; }
.public-event-form input:not([type="checkbox"]) {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  color: #fff;
  background: #090909;
}
.public-event-form .consent-check { grid-template-columns: 20px 1fr; min-height: 44px; align-items: center; gap: 10px; color: var(--muted); font-weight: 500; line-height: 1.4; }
.public-event-form .consent-check input { width: 20px; height: 20px; accent-color: var(--orange); }
.public-event-form .consent-check a { color: var(--gold-soft); }
.public-event-form .primary-action { min-height: 52px; width: 100%; }

.public-event-success,
.public-event-unavailable {
  padding: 28px;
  border: 1px solid rgba(66,216,155,.3);
  border-radius: 18px;
  background: rgba(66,216,155,.06);
}
.public-event-success .primary-action { margin: 12px 0 18px; text-decoration: none; }
.public-event-success small { display: block; color: var(--muted); line-height: 1.5; }
.public-event-unavailable { width: min(620px, 100%); margin: 12vh auto; border-color: rgba(255,117,20,.25); }

.admin-public-event-settings { display: grid; gap: 14px; padding: 18px; border: 1px solid rgba(255,117,20,.2); border-radius: 16px; background: rgba(255,117,20,.035); }
.admin-public-event-link { display: flex; gap: 10px; }
.admin-public-event-link input { flex: 1; min-width: 0; }
.admin-public-event-leads { display: grid; gap: 0; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.1); }
.admin-public-event-leads .section-heading { margin: 18px 0 8px; }
.admin-public-event-leads article { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-public-event-leads article div { display: grid; gap: 4px; min-width: 0; }
.admin-public-event-leads span, .admin-public-event-leads time { color: var(--muted); font-size: .78rem; }

@media (min-width: 761px) {
  .public-event-screen {
    display: grid;
    height: 100dvh;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    padding: clamp(12px, 2vh, 24px) clamp(18px, 3vw, 48px);
  }

  .public-event-shell {
    height: min(860px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
  }

  .public-event-card {
    height: 100%;
  }

  .public-event-poster,
  .public-event-poster-placeholder {
    min-height: 0;
  }

  .public-event-body {
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
    padding: clamp(18px, 3vh, 38px) clamp(26px, 4vw, 56px);
  }

  .public-event-body .brand-lockup {
    margin-bottom: clamp(10px, 1.8vh, 22px);
    padding: 6px 8px;
  }

  .public-event-body .brand-logo {
    width: clamp(118px, 10vw, 158px);
  }

  .public-event-body h1 {
    margin: 5px 0 clamp(7px, 1.2vh, 12px);
    font-size: clamp(2rem, min(3.6vw, 5vh), 3.65rem);
    line-height: 0.98;
  }

  .public-event-date { margin-bottom: clamp(8px, 1.3vh, 14px); }
  .public-event-summary { margin: 0 0 clamp(7px, 1vh, 12px); font-size: clamp(.86rem, 1.5vh, 1rem); line-height: 1.45; }
  .public-event-capacity { margin-bottom: clamp(10px, 1.6vh, 20px); }

  .public-event-form {
    gap: clamp(8px, 1.25vh, 13px);
    padding-top: clamp(12px, 1.8vh, 18px);
  }

  .public-event-form label { gap: 5px; }
  .public-event-form input:not([type="checkbox"]) { min-height: clamp(40px, 5.2vh, 48px); }
  .public-event-form .consent-check { min-height: 34px; font-size: .76rem; }
  .public-event-form .primary-action { min-height: clamp(42px, 5.4vh, 48px); }
  .public-event-form .form-note { margin: 0; font-size: .76rem; }
}

@media (max-width: 760px) {
  .public-event-screen { padding: 12px; }
  .public-event-card { grid-template-columns: 1fr; border-radius: 20px; }
  .public-event-poster, .public-event-poster-placeholder { min-height: 390px; }
  .public-event-body { padding: 24px 20px 30px; }
  .public-event-body .brand-lockup { margin-bottom: 26px; }
  .public-event-form .two-fields { grid-template-columns: 1fr; }
  .admin-public-event-link, .admin-public-event-leads article { flex-direction: column; }
  .admin-public-event-link .ghost-action { width: 100%; }
}

@media (max-width: 760px) {
  .auth-screen {
    display: block;
  }

  .auth-brand {
    min-height: auto;
    gap: 48px;
  }

  .auth-proof,
  .two-fields,
  .quick-actions,
  .metric-grid,
  .dashboard-grid,
  .news-grid,
  .profile-stats {
    grid-template-columns: 1fr;
  }

  .auth-panel {
    width: 100%;
    border-radius: 0;
  }

  .client-app {
    display: block;
  }

  .client-sidebar {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: auto;
    min-height: 0;
    padding: 14px 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .brand-logo {
    width: 154px;
    height: auto;
    object-fit: contain;
  }

  .client-nav {
    grid-template-columns: repeat(3, 38px);
    justify-content: center;
    gap: 8px;
  }

  .sidebar-profile {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .client-main {
    padding: 24px 16px 42px;
  }

  .client-topbar {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
  }

  .client-topbar h1 {
    max-width: none;
    font-size: 2rem;
  }

  .topbar-actions {
    grid-template-columns: 1fr 1fr;
  }

  .search-box {
    grid-column: 1 / -1;
  }

  .welcome-panel {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .featured-card,
  .news-card.featured-news,
  .news-card {
    grid-template-columns: 1fr;
  }

  .featured-card .course-cover,
  .course-card .course-cover,
  .news-thumb {
    min-height: 180px;
    height: 180px;
  }

  .course-card {
    grid-template-rows: 180px auto;
  }

  .course-body {
    grid-template-rows: auto auto auto;
    padding: 18px;
  }

  .segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .segmented button {
    padding-inline: 8px;
  }

  .coach-card {
    grid-template-columns: 50px minmax(0, 1fr);
    padding: 18px;
  }

  .course-actions,
  .progress-meta,
  .news-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .progress-meta span:last-child,
  .news-meta {
    text-align: left;
  }

  .video-panel {
    min-height: 340px;
    padding: 22px;
  }

  .lesson-list {
    max-height: 520px;
  }
}

/* Backoffice refinement: denser academy cards, stronger course page, calmer dashboard. */
.dashboard-grid {
  align-items: start;
}

.surface-panel {
  display: grid;
  gap: 18px;
}

.surface-panel .section-heading {
  margin-bottom: 0;
}

.featured-card {
  min-height: 0;
}

.featured-card > div:last-child {
  display: grid;
  align-content: center;
  gap: 12px;
}

.card-title-row,
.video-meta,
.course-back-row,
.lesson-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-title-row small,
.video-meta span:last-child {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 780;
  white-space: nowrap;
}

.featured-card h3,
.course-body h3 {
  margin: 0;
}

.course-body {
  grid-template-rows: auto auto auto;
}

.course-card {
  grid-template-rows: 190px minmax(238px, auto);
}

.course-card .course-cover {
  height: 190px;
}

.course-cover::after,
.news-thumb::after {
  width: 40px;
  height: 40px;
}

.course-page {
  gap: 22px;
}

.course-back-row {
  min-width: 0;
}

.course-back-row .ghost-action {
  min-width: 0;
}

.video-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.video-panel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.16), transparent 16rem),
    linear-gradient(180deg, rgba(5, 7, 11, 0.04), rgba(5, 7, 11, 0.72));
  content: "";
}

.video-meta {
  align-self: stretch;
}

.video-provider {
  display: inline-grid;
  width: fit-content;
  gap: 4px;
  margin-top: 18px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(5, 7, 11, 0.48);
}

.video-provider span {
  color: var(--blue-soft);
  font-size: 0.68rem;
  font-weight: 860;
  line-height: 1;
  text-transform: uppercase;
}

.video-provider strong {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.15;
}

.play-control {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(5, 7, 11, 0.42);
  transform: translate(-50%, -50%);
}

.play-control span {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid var(--gold-soft);
}

.lesson-sidebar {
  align-self: start;
}

.lesson-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  max-width: none;
}

.lesson-detail h2 {
  margin-bottom: 10px;
}

.lesson-focus {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid rgba(255, 117, 20, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 117, 20, 0.055);
}

.lesson-focus span {
  color: var(--gold-soft);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.lesson-focus strong {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.35;
}

.lesson-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (min-width: 1181px) {
  .dashboard-grid .featured-card {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .dashboard-grid .featured-card .course-cover {
    min-height: 180px;
  }
}

@media (max-width: 760px) {
  .course-card {
    grid-template-rows: 160px auto;
  }

  .course-card .course-cover,
  .featured-card .course-cover {
    height: 160px;
    min-height: 160px;
  }

  .featured-card {
    gap: 16px;
  }

  .card-title-row,
  .course-back-row,
  .lesson-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .card-title-row {
    align-items: flex-start;
  }

  .card-title-row small {
    white-space: normal;
  }

  .course-back-row .ghost-action,
  .lesson-actions button {
    width: 100%;
  }

  .video-panel {
    min-height: 360px;
  }

  .play-control {
    width: 62px;
    height: 62px;
  }

  .lesson-detail {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

/* Spacing pass: one rhythm for sections, cards, headings and compact screens. */
:root {
  --layout-gap: 20px;
  --section-gap: 34px;
  --card-pad: 22px;
  --card-gap: 18px;
}

.client-main,
.view,
.surface-panel,
.welcome-panel,
.quick-actions button,
.metric-card,
.course-card,
.news-card,
.coach-card,
.lesson-sidebar,
.lesson-detail {
  min-width: 0;
}

.view.active {
  display: grid;
  gap: var(--section-gap);
}

.welcome-panel,
.quick-actions,
.metric-grid,
.dashboard-grid,
.academy-hero,
.academy-section,
.coach-section,
.view-toolbar,
.news-grid {
  margin-bottom: 0;
}

.surface-panel,
.welcome-panel,
.metric-card,
.quick-actions button,
.lesson-sidebar,
.lesson-detail,
.empty-state {
  padding: var(--card-pad);
}

.quick-actions,
.metric-grid,
.dashboard-grid,
.course-grid,
.compact-rail,
.coach-grid,
.news-grid {
  gap: var(--card-gap);
}

.section-heading,
.view-toolbar {
  min-width: 0;
}

.section-heading > div,
.view-toolbar > div,
.welcome-panel > div,
.mini-news > div,
.course-body > div,
.topbar-actions,
.client-topbar > div {
  min-width: 0;
}

.section-heading h2,
.view-toolbar h2,
.welcome-panel h2,
.client-topbar h1,
.course-body h3,
.featured-card h3,
.news-card h3,
.mini-news h3,
.coach-card strong {
  overflow-wrap: anywhere;
}

.welcome-panel p,
.featured-card p,
.course-body p,
.news-card p,
.mini-news p,
.lesson-detail p {
  margin-bottom: 0;
}

.quick-actions button,
.metric-card,
.surface-panel,
.news-card,
.course-card,
.coach-card {
  align-self: stretch;
}

.quick-actions button {
  display: grid;
  align-content: center;
  gap: 6px;
}

.quick-actions span,
.metric-card span,
.course-body p,
.news-card p,
.mini-news p,
.lesson-list small {
  overflow-wrap: anywhere;
}

.section-heading .ghost-action,
.view-toolbar .ghost-action {
  flex: 0 0 auto;
}

.featured-card > div:last-child,
.course-body {
  min-width: 0;
}

.featured-card .primary-action,
.welcome-panel .primary-action {
  justify-self: start;
}

.course-actions .text-link,
.news-meta .text-link,
.mini-news .text-link {
  flex: 0 0 auto;
}

.mini-news {
  min-width: 0;
}

.mini-news .text-link {
  justify-self: end;
}

@media (max-width: 760px) {
  :root {
    --section-gap: 24px;
    --card-pad: 18px;
    --card-gap: 16px;
  }

  .client-main {
    padding: 22px 16px 40px;
  }

  .client-topbar {
    gap: 14px;
    margin-bottom: 0;
  }

  .view.active {
    padding-top: 24px;
  }

  .topbar-actions {
    gap: 10px;
  }

  .welcome-panel {
    gap: 18px;
  }

  .welcome-panel .primary-action,
  .featured-card .primary-action {
    width: 100%;
  }

  .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
  }

  .section-heading .ghost-action {
    min-width: 0;
    padding-inline: 14px;
  }

  .featured-card {
    gap: 18px;
    padding: 18px;
  }

  .metric-card,
  .quick-actions button {
    min-height: 96px;
  }

  .mini-news {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px 0;
  }

  .course-actions .badge {
    width: fit-content;
    max-width: 100%;
  }

  .coach-card {
    gap: 4px 14px;
  }
}

@media (max-width: 430px) {
  .client-sidebar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .client-nav {
    display: none;
  }

  .brand-logo {
    width: min(148px, 46vw);
  }

  .topbar-actions {
    grid-template-columns: 1fr;
  }

  .search-box {
    grid-column: auto;
  }

  .ghost-action,
  .primary-action {
    width: 100%;
  }

  .section-heading {
    grid-template-columns: 1fr;
  }

  .section-heading .ghost-action {
    justify-self: start;
    width: auto;
  }

  .segmented {
    grid-template-columns: 1fr;
  }

  .coach-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }
}

/* Human Legacy 2026 — content-first experience */
:root {
  --hl-bg: #070707;
  --hl-panel: #111;
  --hl-panel-soft: #171717;
  --hl-line: rgba(255, 255, 255, 0.11);
  --hl-text: #f7f5f2;
  --hl-muted: #a6a29c;
  --hl-accent: #f07818;
}

body {
  background: var(--hl-bg);
  color: var(--hl-text);
}

.client-app {
  display: block;
  min-height: 100vh;
  padding-top: 76px;
  background:
    radial-gradient(circle at 50% -20%, rgba(240, 120, 24, 0.09), transparent 35%),
    var(--hl-bg);
}

.client-sidebar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  width: 100%;
  height: 76px;
  min-height: 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: center;
  gap: 30px;
  border: 0;
  border-bottom: 1px solid var(--hl-line);
  background: rgba(7, 7, 7, 0.94);
  backdrop-filter: blur(22px);
}

.client-sidebar .brand-lockup {
  justify-content: flex-start;
  padding: 0;
}

.client-sidebar .brand-logo {
  width: 156px;
  max-height: 44px;
  object-fit: contain;
  object-position: left center;
}

.client-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.client-nav button {
  min-height: 42px;
  width: auto;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: #9d9994;
  font-size: 0.87rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.client-nav button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.client-nav button.active {
  color: #fff;
  background: #222;
  box-shadow: none;
}

.client-nav .nav-glyph,
.sidebar-profile {
  display: none;
}

.client-main {
  margin: 0;
  width: 100%;
  min-height: calc(100vh - 76px);
}

.client-topbar {
  position: relative;
  inset: auto;
  min-height: 82px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 18px 42px;
  border: 0;
  background: transparent;
}

.client-topbar > div:first-child {
  display: none;
}

.topbar-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.search-box {
  width: min(480px, 48vw);
  min-height: 46px;
  margin-right: auto;
  border: 1px solid var(--hl-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.search-box:focus-within {
  border-color: rgba(240, 120, 24, 0.65);
  background: #141414;
  box-shadow: 0 0 0 3px rgba(240, 120, 24, 0.09);
}

.search-box input {
  color: #fff;
}

.icon-action {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hl-line);
  border-radius: 50%;
  background: #111;
  color: #d6d2cd;
  cursor: pointer;
}

.icon-action > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  color: transparent;
  background: #777;
}

.icon-action.has-unread > span {
  background: var(--hl-accent);
  box-shadow: 0 0 0 5px rgba(240, 120, 24, 0.14);
}

.account-action {
  min-height: 46px;
  padding: 4px 12px 4px 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hl-line);
  border-radius: 999px;
  background: #111;
  color: #fff;
  cursor: pointer;
}

.avatar.compact {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #f07818, #9e3f08);
  color: white;
  font-size: 0.72rem;
  font-weight: 850;
}

.account-copy {
  display: grid;
  text-align: left;
  line-height: 1.15;
}

.account-copy strong {
  font-size: 0.8rem;
}

.account-copy small {
  color: var(--hl-muted);
  font-size: 0.67rem;
}

.view {
  max-width: 1480px;
  margin: 0 auto;
  padding: 20px 42px 80px;
}

.welcome-panel {
  min-height: 265px;
  padding: clamp(32px, 6vw, 78px);
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid var(--hl-line);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.56) 60%, rgba(0, 0, 0, 0.15)),
    radial-gradient(circle at 85% 30%, #8d3b0d, transparent 36%),
    linear-gradient(135deg, #18120e, #090909 65%);
}

.welcome-panel::after {
  content: "HUMAN LEGACY";
  position: absolute;
  right: 0;
  left: 0;
  bottom: -0.04em;
  width: 100%;
  color: rgba(255, 255, 255, 0.045);
  font-size: clamp(3.5rem, 7.7vw, 7.8rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
}

.welcome-panel h2 {
  max-width: 800px;
  margin: 5px 0 12px;
  font-size: clamp(2.3rem, 5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.welcome-panel p:not(.eyebrow) {
  max-width: 480px;
  color: #c8c3bd;
}

.welcome-panel .primary-action {
  position: relative;
  z-index: 1;
  min-width: 170px;
  background: #fff;
  color: #080808;
}

.metric-grid {
  margin: 24px 0 42px;
  display: flex;
  gap: 0;
  border-top: 1px solid var(--hl-line);
  border-bottom: 1px solid var(--hl-line);
}

.metric-card {
  flex: 1;
  min-height: 90px;
  padding: 18px 22px;
  border: 0;
  border-right: 1px solid var(--hl-line);
  border-radius: 0;
  background: transparent;
}

.metric-card:last-child {
  border-right: 0;
}

.metric-card strong {
  font-size: 1.6rem;
}

.metric-card > span:last-child {
  display: none;
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.7fr);
  gap: 48px;
}

.surface-panel,
.academy-hero,
.academy-section,
.coach-section {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.section-heading {
  margin-bottom: 18px;
}

.section-heading h2,
.academy-hero h2 {
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  letter-spacing: -0.035em;
}

.featured-card {
  min-height: 350px;
  grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1fr);
  border: 1px solid var(--hl-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--hl-panel);
}

.featured-card .course-cover {
  min-height: 350px;
  border-radius: 0;
}

.featured-card > div:last-child {
  padding: 34px;
}

.featured-card h3 {
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.news-stack {
  border-top: 1px solid var(--hl-line);
}

.mini-news {
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--hl-line);
  background: transparent;
}

.mini-news h3 {
  margin-top: 10px;
  font-size: 1rem;
}

.academy-hero {
  margin-bottom: 55px;
}

.course-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 18px;
}

.course-grid.compact-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
}

.course-card {
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

.course-card:hover {
  transform: translateY(-4px);
}

.course-card .course-cover {
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 6px;
}

.course-body {
  padding: 16px 2px 0;
}

.course-body > div:first-child > p,
.course-body .course-outcome,
.course-body .course-actions .badge {
  display: none;
}

.course-body h3 {
  margin: 10px 0 6px;
  font-size: 1.12rem;
}

.course-actions {
  justify-content: flex-end;
  padding-top: 4px;
}

.coach-section {
  margin: 55px 0;
  padding: 30px;
  border: 1px solid var(--hl-line);
  border-radius: 8px;
  background: #0e0e0e;
}

.news-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 18px;
}

.news-card,
.news-card.featured-news {
  grid-column: auto;
  grid-template-columns: 1fr;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
}

.news-thumb {
  min-height: 190px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(240, 120, 24, 0.7), transparent 65%),
    #1d1a18;
}

.news-card > div:last-child {
  padding: 16px 2px;
}

.course-player-grid {
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 340px;
}

.video-panel {
  border-radius: 8px;
  background: #000;
}

.lesson-list {
  border: 1px solid var(--hl-line);
  border-radius: 8px;
  background: #0e0e0e;
}

.content-dialog {
  width: min(620px, calc(100vw - 30px));
  border: 1px solid var(--hl-line);
  border-radius: 12px;
  background: #0c0c0c;
}

.dialog-shell {
  padding: 34px;
}

.account-panel {
  display: grid;
  gap: 24px;
}

.account-header {
  display: flex;
  align-items: center;
  gap: 18px;
}

.account-header h2 {
  margin: 3px 0 5px;
  font-size: 1.8rem;
}

.account-header p:last-child {
  color: var(--hl-muted);
}

.account-avatar {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #f07818, #8a3509);
  color: white;
  font-size: 1.15rem;
  font-weight: 900;
}

.profile-stats {
  padding: 18px 0;
  border-top: 1px solid var(--hl-line);
  border-bottom: 1px solid var(--hl-line);
}

.account-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.account-details > div {
  padding: 16px;
  display: grid;
  gap: 4px;
  border-radius: 8px;
  background: var(--hl-panel-soft);
}

.account-details span,
.account-menu small {
  color: var(--hl-muted);
  font-size: 0.75rem;
}

.account-menu {
  display: grid;
  border-top: 1px solid var(--hl-line);
}

.account-menu button {
  min-height: 64px;
  padding: 12px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid var(--hl-line);
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.account-menu button > span:first-child {
  display: grid;
  gap: 4px;
}

.account-menu button > span:last-child {
  color: var(--hl-muted);
  font-size: 1.6rem;
}

.account-footer {
  justify-content: space-between;
}

.notification-panel > p {
  color: var(--hl-muted);
}

.notification-list article {
  border-radius: 6px;
  background: #151515;
}

@media (max-width: 900px) {
  .client-app {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .client-sidebar {
    height: 64px;
    padding: 0 18px;
    grid-template-columns: 150px 1fr;
  }

  .client-sidebar .brand-logo {
    width: 135px;
  }

  .client-nav {
    position: fixed;
    z-index: 60;
    inset: auto 0 0;
    height: 64px;
    justify-content: space-around;
    border-top: 1px solid var(--hl-line);
    background: rgba(7, 7, 7, 0.97);
  }

  .client-nav button {
    flex: 1;
    justify-content: center;
    padding: 0 6px;
    border-radius: 0;
    font-size: 0.74rem;
  }

  .client-nav button.active {
    color: var(--hl-accent);
    background: transparent;
  }

  .client-topbar {
    min-height: 70px;
    padding: 12px 18px;
  }

  .search-box {
    width: auto;
    flex: 1;
  }

  .account-copy {
    display: none;
  }

  .account-action {
    padding: 4px;
    border: 0;
    background: transparent;
  }

  .view {
    padding: 10px 18px 60px;
  }

  .welcome-panel {
    min-height: 330px;
    padding: 30px 24px;
    align-items: flex-end;
  }

  .welcome-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .welcome-panel .primary-action {
    width: 100%;
    margin-top: 20px;
  }

  .metric-grid {
    overflow-x: auto;
  }

  .metric-card {
    min-width: 145px;
  }

  .dashboard-grid,
  .course-player-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .featured-card {
    grid-template-columns: 1fr;
  }

  .featured-card .course-cover {
    min-height: 210px;
  }

  .featured-card > div:last-child {
    padding: 24px;
  }

  .course-grid,
  .course-grid.compact-rail,
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .client-sidebar {
    grid-template-columns: 1fr;
  }

  .client-sidebar .brand-lockup {
    justify-content: center;
  }

  .search-box {
    min-width: 0;
  }

  .search-box input {
    font-size: 0.78rem;
  }

  .icon-action {
    width: 42px;
    height: 42px;
  }

  .course-grid,
  .course-grid.compact-rail,
  .news-grid {
    grid-template-columns: 1fr;
  }

  .welcome-panel h2 {
    font-size: 2.35rem;
  }

  .account-details {
    grid-template-columns: 1fr;
  }

  .account-footer {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Complete profile */
.account-membership {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.account-membership > div {
  min-height: 86px;
  padding: 15px;
  display: grid;
  align-content: space-between;
  gap: 9px;
  border: 1px solid var(--hl-line);
  border-radius: 8px;
  background: #121212;
}

.account-membership span {
  color: var(--hl-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.account-membership strong {
  font-size: 0.85rem;
  line-height: 1.25;
}

.profile-editor {
  border-top: 1px solid var(--hl-line);
  border-bottom: 1px solid var(--hl-line);
}

.profile-editor summary {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.profile-editor summary::-webkit-details-marker {
  display: none;
}

.profile-editor summary span {
  color: var(--hl-accent);
  font-size: 0.78rem;
}

.profile-editor form {
  padding: 2px 0 22px;
  display: grid;
  gap: 14px;
}

.profile-editor label {
  display: grid;
  gap: 7px;
  color: #d7d2cc;
  font-size: 0.76rem;
  font-weight: 650;
}

.profile-editor input {
  width: 100%;
  min-height: 45px;
  padding: 0 13px;
  border: 1px solid var(--hl-line);
  border-radius: 7px;
  background: #171717;
  color: #fff;
}

.profile-editor input:focus {
  outline: none;
  border-color: var(--hl-accent);
}

.profile-editor input:disabled {
  opacity: 0.55;
}

.profile-editor label small {
  color: var(--hl-muted);
  font-weight: 400;
}

.profile-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Calm admin workspace */
#adminView {
  max-width: 1580px;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.admin-section-tabs {
  position: sticky;
  z-index: 12;
  top: 76px;
  width: fit-content;
  max-width: 100%;
  margin: -12px 0 14px;
  padding: 5px;
  display: flex;
  gap: 3px;
  overflow-x: auto;
  border: 1px solid var(--hl-line);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.94);
  backdrop-filter: blur(18px);
}

.admin-section-tabs button {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8e8a85;
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}

.admin-section-tabs button.active {
  background: #f1eee9;
  color: #090909;
}

.admin-grid .surface-panel {
  padding: 28px;
  border: 1px solid var(--hl-line);
  border-radius: 10px;
  background: #0d0d0d;
}

.admin-overview .profile-stats {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hl-line);
  border-radius: 9px;
  overflow: hidden;
}

.admin-overview .profile-stats > div {
  min-height: 112px;
  padding: 22px;
  align-content: center;
  border-right: 1px solid var(--hl-line);
  background: #131313;
}

.admin-overview .profile-stats > div:last-child {
  border-right: 0;
}

.admin-overview .profile-stats strong {
  font-size: 2rem;
}

.admin-table {
  padding: 0 !important;
  overflow: hidden;
}

.admin-table .section-heading {
  padding: 25px 28px 18px;
  margin: 0;
}

.admin-table > article {
  min-height: 68px;
  padding: 15px 28px;
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.6fr);
  align-items: center;
  border-top: 1px solid var(--hl-line);
  background: transparent;
}

.admin-table > article:hover {
  background: rgba(255, 255, 255, 0.025);
}

.admin-table > article span {
  color: var(--hl-muted);
}

.admin-content-nav {
  margin-bottom: 26px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--hl-line);
}

.admin-content-nav button {
  min-height: 44px;
  padding: 0 4px;
  margin-right: 22px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--hl-muted);
  font-weight: 750;
  cursor: pointer;
}

.admin-content-nav button.active {
  border-bottom-color: var(--hl-accent);
  color: #fff;
}

.admin-editor {
  padding: 30px !important;
}

.admin-editor-grid {
  gap: 18px;
}

.admin-form,
.admin-course-picker {
  padding: 24px;
  border: 1px solid var(--hl-line);
  border-radius: 9px;
  background: #121212;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  background: #191919;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  border-color: rgba(240, 120, 24, 0.8);
  box-shadow: 0 0 0 3px rgba(240, 120, 24, 0.08);
}

.admin-course-picker {
  max-height: 700px;
  overflow: auto;
}

.admin-picker-list button,
.admin-user-list button,
.admin-lesson-list button {
  border-radius: 7px;
  background: transparent;
}

.admin-picker-list button.active,
.admin-user-list button.active,
.admin-lesson-list button.active {
  border-color: rgba(240, 120, 24, 0.35);
  background: rgba(240, 120, 24, 0.08);
}

.admin-users-panel {
  padding: 30px !important;
}

.admin-users-layout {
  grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.55fr);
  gap: 22px;
}

.admin-user-list {
  padding: 8px;
  border: 1px solid var(--hl-line);
  border-radius: 9px;
  background: #111;
}

.admin-user-detail .admin-form {
  margin: 0;
}

.admin-user-meta {
  padding: 16px;
  border-radius: 7px;
  background: #191919;
}

.admin-flow-steps {
  display: none;
}

@media (max-width: 900px) {
  .account-membership {
    grid-template-columns: 1fr;
  }

  .profile-form-row {
    grid-template-columns: 1fr;
  }

  .admin-section-tabs {
    top: 64px;
    width: 100%;
    border-radius: 8px;
  }

  .admin-section-tabs button {
    flex: 1 0 auto;
  }

  .admin-overview .profile-stats {
    grid-template-columns: 1fr 1fr;
  }

  .admin-overview .profile-stats > div:nth-child(2) {
    border-right: 0;
  }

  .admin-table > article {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .admin-users-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .admin-grid .surface-panel,
  .admin-editor,
  .admin-users-panel {
    padding: 20px !important;
  }

  .admin-overview .profile-stats {
    grid-template-columns: 1fr;
  }

  .admin-overview .profile-stats > div {
    min-height: 86px;
    border-right: 0;
    border-bottom: 1px solid var(--hl-line);
  }

  .admin-content-nav {
    overflow-x: auto;
  }
}

/* Notifications */
.notification-button {
  position: relative;
}

.notification-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-button.has-unread::after {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  color: #130903;
  background: linear-gradient(180deg, #ffbd72 0%, #ff7c18 100%);
  content: attr(data-count);
  font-size: 0.68rem;
  font-weight: 900;
}

/* Academy library — clear, cinematic course-first navigation. */
.academy-library-head {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: clamp(34px, 5vw, 68px);
  border: 1px solid var(--hl-line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 20%, rgba(255, 112, 20, 0.26), transparent 28rem),
    linear-gradient(120deg, #17100c 0%, #080808 72%);
}

.academy-library-head::after {
  content: none;
}

.academy-library-head > div {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.academy-library-head h2 {
  max-width: 680px;
  margin: 8px 0 14px;
  font-size: clamp(2.15rem, 4.2vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.academy-library-head p:last-child {
  max-width: 570px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.academy-continue-section,
.academy-catalog-section {
  margin-top: 34px;
}

.academy-continue-rail {
  display: grid;
  gap: 18px;
}

.academy-continue-rail .featured-card {
  grid-template-columns: minmax(280px, 0.75fr) minmax(320px, 1fr);
}

.academy-catalog-section > .section-heading {
  align-items: end;
}

.masterclass-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.masterclass-course-grid .course-card {
  min-width: 0;
}

.course-masterclass-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid var(--hl-line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 85% 10%, rgba(255, 112, 20, 0.18), transparent 24rem),
    var(--panel);
}

.course-masterclass-head h1 {
  max-width: 820px;
  margin: 5px 0 12px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.course-masterclass-head p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}

.course-masterclass-head > div:last-child {
  display: grid;
  gap: 7px;
  min-width: 190px;
  padding: 15px 18px;
  border-left: 2px solid var(--gold);
}

.course-masterclass-head span {
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 1120px) {
  .masterclass-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .academy-library-head {
    min-height: 220px;
    padding: 28px 22px;
    border-radius: 22px;
  }

  .academy-catalog-section > .section-heading,
  .course-masterclass-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .academy-catalog-section .segmented {
    width: 100%;
    overflow-x: auto;
  }

  .academy-continue-rail .featured-card,
  .masterclass-course-grid {
    grid-template-columns: 1fr;
  }

  .course-masterclass-head > div:last-child {
    width: 100%;
  }
}

.notification-panel {
  display: grid;
  gap: 16px;
}

.notification-panel > p {
  color: var(--muted);
}

.notification-status {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

.notification-status span {
  color: var(--muted);
  font-weight: 760;
}

.notification-list {
  display: grid;
  gap: 10px;
}

.notification-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.024);
}

.notification-list article.unread {
  border-color: rgba(255, 154, 61, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 117, 20, 0.12), rgba(255, 255, 255, 0.02)),
    rgba(255, 117, 20, 0.04);
}

.notification-list strong,
.notification-list p,
.notification-list small {
  display: block;
  min-width: 0;
}

.notification-list p {
  margin: 4px 0;
  color: var(--muted);
}

.notification-list small {
  color: var(--muted-2);
  font-weight: 740;
}

@media (max-width: 760px) {
  .topbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .search-box {
    grid-column: 1 / -1;
  }

  .topbar-actions .ghost-action {
    padding-inline: 10px;
    font-size: 0.86rem;
  }

  .notification-list article {
    grid-template-columns: 1fr;
  }
}

/* Tight layout fixes requested in chat: explicit spacing between titles, controls and cards. */
.client-topbar {
  row-gap: 34px;
}

.client-topbar > div:first-child {
  display: grid;
  gap: 8px;
}

.topbar-actions {
  margin-top: 28px;
}

.academy-hero,
.academy-section,
.coach-section {
  display: grid;
  gap: 18px;
}

.academy-hero > div:first-child,
.academy-section .section-heading,
.coach-section .section-heading,
.view-toolbar > div {
  margin-bottom: 0;
}

.academy-hero .featured-card,
.academy-section .course-grid,
.academy-section .compact-rail,
.coach-section .coach-grid,
#newsGrid {
  margin-top: 0;
}

@media (max-width: 760px) {
  .client-topbar {
    gap: 34px;
  }

  .topbar-actions {
    margin-top: 0;
  }

  .academy-hero,
  .academy-section,
  .coach-section,
  .view-toolbar {
    gap: 18px;
  }

  .academy-hero > div:first-child {
    display: grid;
    gap: 8px;
  }

  .academy-hero h2,
  .section-heading h2,
  .view-toolbar h2 {
    margin: 0;
  }
}

/* Final alignment pass: equal section widths and stronger desktop breathing room. */
.client-topbar {
  align-items: flex-start;
}

.topbar-actions {
  margin-top: 44px;
}

.academy-hero,
.academy-section,
.coach-section,
.view-toolbar,
#academySpotlight,
#newCourseRail,
#courseGrid {
  width: 100%;
}

.academy-hero .featured-card {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(240px, 0.28fr) minmax(0, 1fr);
}

.academy-hero .featured-card .course-cover {
  min-height: 240px;
}

.academy-section .course-grid,
.academy-section .compact-rail {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-grid .featured-card {
  width: 100%;
  max-width: none;
}

@media (max-width: 1180px) {
  .academy-hero .featured-card,
  .academy-section .course-grid,
  .academy-section .compact-rail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topbar-actions {
    margin-top: 0;
  }

  .academy-hero .featured-card .course-cover {
    min-height: 170px;
  }
}

/* Component hygiene pass: consistent typography, badges, card internals and controls. */
:root {
  --inner-gap-xs: 8px;
  --inner-gap-sm: 12px;
  --inner-gap-md: 18px;
  --inner-gap-lg: 24px;
}

h1,
h2,
h3,
strong,
button {
  text-wrap: balance;
}

p,
span,
small,
input,
button {
  letter-spacing: 0;
}

.badge,
.metric-kicker {
  min-height: 28px;
  padding: 0 12px;
  font-size: 0.72rem;
  line-height: 1;
}

.course-body,
.featured-card > div:last-child,
.news-card > div:last-child,
.profile-panel,
.lesson-detail > div:first-child {
  min-width: 0;
}

.course-body {
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: var(--inner-gap-lg);
  padding: 28px 32px 30px;
}

.course-body > div:first-child {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
}

.course-body .badge,
.featured-card .badge,
.news-card .badge {
  align-self: start;
  margin: 0;
}

.course-body h3,
.featured-card h3,
.news-card h3,
.mini-news h3 {
  margin: 0;
  line-height: 1.16;
}

.course-body p,
.featured-card p,
.news-card p {
  color: var(--muted);
  line-height: 1.48;
}

.course-card {
  grid-template-rows: 210px minmax(330px, auto);
}

.course-card .course-cover {
  height: 210px;
}

.progress-row {
  gap: var(--inner-gap-sm);
  margin: 0;
}

.progress-meta {
  align-items: center;
  line-height: 1.25;
}

.course-actions {
  align-items: center;
  min-width: 0;
  padding-top: 2px;
}

.course-actions .badge {
  max-width: min(100%, 230px);
}

.text-link {
  line-height: 1.2;
}

.primary-action,
.ghost-action {
  min-height: 48px;
  padding-inline: 22px;
  line-height: 1;
}

.quick-actions button,
.metric-card,
.surface-panel,
.coach-card,
.news-card {
  padding: 28px 32px;
}

.quick-actions strong,
.metric-card strong {
  line-height: 1.08;
}

.metric-card {
  display: grid;
  align-content: center;
  gap: 8px;
}

.metric-card strong {
  margin: 4px 0 0;
}

.section-heading {
  gap: var(--inner-gap-md);
}

.section-heading > div {
  display: grid;
  gap: 6px;
}

.section-heading .eyebrow,
.view-toolbar .eyebrow,
.academy-hero .eyebrow {
  margin-bottom: 0;
}

.academy-hero > div:first-child,
.view-toolbar > div {
  display: grid;
  gap: 8px;
}

.mini-news {
  gap: var(--inner-gap-md);
  padding-block: 18px;
}

.news-card {
  gap: var(--inner-gap-lg);
}

.news-card > div:last-child {
  display: grid;
  align-content: start;
  gap: var(--inner-gap-sm);
}

.news-meta {
  margin-top: var(--inner-gap-sm);
}

@media (max-width: 1180px) {
  .course-body {
    padding: 26px 28px 28px;
  }
}

@media (max-width: 760px) {
  .course-card {
    grid-template-rows: 170px auto;
  }

  .course-card .course-cover,
  .featured-card .course-cover {
    height: 170px;
    min-height: 170px;
  }

  .course-body,
  .quick-actions button,
  .metric-card,
  .surface-panel,
  .coach-card,
  .news-card {
    padding: 22px;
  }

  .course-body {
    gap: var(--inner-gap-md);
  }

  .badge,
  .metric-kicker {
    min-height: 26px;
  }
}

/* Product pass: refined academy, dashboard, reader, sidebar and micro interactions. */
.client-nav button {
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.client-nav button:hover {
  transform: translateX(2px);
}

.client-nav button.active {
  background: rgba(255, 117, 20, 0.08);
  border-color: rgba(255, 154, 61, 0.3);
}

.sidebar-profile span {
  color: var(--muted-2);
}

.course-outcome {
  display: block;
  color: var(--blue-soft);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.4;
}

.course-body .course-outcome {
  margin-top: -2px;
}

.featured-card .course-outcome {
  color: var(--muted);
}

.course-card,
.featured-card,
.news-card,
.metric-card,
.quick-actions button,
.surface-panel,
.coach-card {
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.course-card:hover,
.news-card:hover,
.quick-actions button:hover,
.coach-card:hover {
  border-color: rgba(255, 154, 61, 0.26);
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
}

.course-cover {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.course-cover span {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(5, 7, 11, 0.38);
}

.lesson-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.lesson-summary-grid span {
  min-height: 46px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.84rem;
  font-weight: 780;
}

.news-reader h2 {
  margin-bottom: 12px;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.reader-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.app-toast {
  border-color: rgba(255, 154, 61, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 117, 20, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(10, 14, 22, 0.96);
}

.empty-state {
  display: grid;
  align-content: center;
  gap: 8px;
}

.empty-state h3,
.empty-state p {
  margin: 0;
}

@media (min-width: 1181px) {
  .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .quick-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-card {
    min-height: 540px;
  }
}

@media (max-width: 760px) {
  .lesson-summary-grid {
    grid-template-columns: 1fr;
  }

  .course-card:hover,
  .news-card:hover,
  .quick-actions button:hover,
  .coach-card:hover {
    transform: none;
  }
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.admin-overview {
  align-self: start;
}

.admin-grid .surface-panel {
  padding: 24px;
  border-radius: 24px;
}

.admin-grid .section-heading {
  margin-bottom: 18px;
}

.admin-grid .profile-stats {
  gap: 12px;
}

.admin-grid .profile-stats div {
  min-height: 112px;
  padding: 18px;
  border-radius: 18px;
}

.admin-table {
  gap: 14px;
}

.admin-table article {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.admin-table article:last-child {
  border-bottom: 0;
}

.admin-table article strong,
.admin-table article span {
  min-width: 0;
}

.admin-table article span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 760;
  text-align: left;
  overflow-wrap: anywhere;
}

.admin-editor {
  grid-column: 1 / -1;
}

.admin-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
}

.admin-form {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}

.admin-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 820;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  color: var(--text);
  background: rgba(5, 7, 11, 0.42);
  font: inherit;
  font-size: 0.92rem;
}

.admin-form textarea {
  min-height: 92px;
  resize: vertical;
}

.admin-form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-check {
  display: flex;
  align-items: center;
  grid-template-columns: none;
  gap: 10px;
}

.admin-check input {
  width: 18px;
  height: 18px;
}

@media (max-width: 1180px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-table article {
    grid-template-columns: 1fr;
  }

  .admin-table article span {
    text-align: left;
  }

  .admin-editor-grid,
  .admin-form-row {
    grid-template-columns: 1fr;
  }
}

/* Apple-style coherence layer */
:root {
  --bg: #060606;
  --panel: rgba(24, 24, 26, 0.84);
  --panel-2: rgba(31, 31, 34, 0.9);
  --panel-3: rgba(14, 14, 15, 0.92);
  --text: #fffaf5;
  --muted: #b9b2ab;
  --muted-2: #827a72;
  --line: rgba(255, 255, 255, 0.105);
  --line-strong: rgba(255, 145, 64, 0.34);
  --radius: 26px;
  --radius-sm: 18px;
  --radius-xs: 12px;
  --ease-apple: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 160ms;
  --motion: 260ms;
  --motion-slow: 520ms;
  --shadow: 0 22px 58px rgba(0, 0, 0, 0.32);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.22);
  --glass: rgba(24, 24, 26, 0.72);
  --glass-strong: rgba(31, 31, 34, 0.86);
}

@keyframes view-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.992);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes soft-pop {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes progress-sheen {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(160%);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 14% -8%, rgba(255, 117, 20, 0.18), transparent 30rem),
    radial-gradient(circle at 102% 4%, rgba(255, 176, 99, 0.075), transparent 28rem),
    linear-gradient(180deg, #101011 0%, #070707 42%, #030303 100%);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  letter-spacing: 0;
}

.auth-screen,
.client-app {
  animation: soft-pop var(--motion-slow) var(--ease-soft) both;
}

.view.active,
.content-dialog[open] .dialog-shell {
  animation: view-enter var(--motion) var(--ease-soft) both;
}

.brand-lockup {
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.auth-panel,
.auth-proof div,
.surface-panel,
.metric-card,
.quick-actions button,
.course-card,
.news-card,
.coach-card,
.featured-card,
.lesson-sidebar,
.lesson-detail,
.empty-state,
.profile-panel,
.admin-form,
.content-dialog {
  border-color: var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.026)),
    var(--glass);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px) saturate(1.18);
}

.auth-panel,
.surface-panel,
.course-card,
.featured-card,
.lesson-detail,
.admin-users-panel {
  box-shadow: var(--shadow);
}

.primary-action,
.ghost-action,
.text-link,
.auth-tabs button,
.segmented button,
.client-nav button,
.admin-user-list button,
.lesson-list li,
.mini-news,
.news-card,
.course-card,
.metric-card,
.quick-actions button,
.coach-card {
  transition:
    transform var(--motion) var(--ease-apple),
    opacity var(--motion-fast) ease,
    border-color var(--motion) ease,
    background var(--motion) ease,
    box-shadow var(--motion) ease,
    color var(--motion-fast) ease;
}

.primary-action,
.ghost-action,
.auth-tabs button,
.segmented button {
  border-radius: 999px;
}

.primary-action {
  border-color: rgba(255, 176, 99, 0.42);
  background: linear-gradient(180deg, #ffd28b, #ff7b18);
  box-shadow:
    0 14px 30px rgba(255, 117, 20, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.ghost-action {
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.035);
}

.primary-action:hover,
.ghost-action:hover,
.auth-tabs button:hover,
.segmented button:hover,
.client-nav button:hover,
.admin-user-list button:hover,
.quick-actions button:hover,
.metric-card:hover,
.course-card:hover,
.news-card:hover,
.coach-card:hover {
  transform: translateY(-2px);
}

.primary-action:active,
.ghost-action:active,
.auth-tabs button:active,
.segmented button:active,
.client-nav button:active,
.admin-user-list button:active,
.quick-actions button:active,
.metric-card:active,
.course-card:active,
.news-card:active,
.coach-card:active {
  transform: scale(0.985);
}

.auth-tabs,
.segmented {
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.auth-tabs button,
.segmented button {
  border-radius: 999px;
}

.auth-tabs button.active,
.segmented button.active,
.client-nav button.active {
  box-shadow:
    0 10px 24px rgba(255, 117, 20, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.client-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 117, 20, 0.045), transparent 18rem),
    rgba(6, 6, 7, 0.82);
  backdrop-filter: blur(26px) saturate(1.12);
}

.client-nav {
  gap: 9px;
}

.client-nav button {
  min-height: 46px;
  border-radius: 18px;
}

.client-nav button.active,
.client-nav button:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(90deg, rgba(255, 117, 20, 0.18), rgba(255, 255, 255, 0.045));
  box-shadow:
    inset 3px 0 0 rgba(255, 154, 61, 0.86),
    0 10px 26px rgba(0, 0, 0, 0.18);
}

.client-topbar {
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(6, 6, 7, 0.82), rgba(6, 6, 7, 0));
}

.search-box,
.auth-form input,
.admin-form input,
.admin-form select,
.admin-form textarea {
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.105);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)),
    rgba(5, 5, 6, 0.54);
}

.auth-form input,
.admin-form input,
.admin-form select {
  min-height: 48px;
}

.search-box:focus-within,
.auth-form input:focus,
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  border-color: rgba(255, 176, 99, 0.58);
  box-shadow:
    0 0 0 4px rgba(255, 117, 20, 0.11),
    0 14px 34px rgba(0, 0, 0, 0.2);
}

.welcome-panel {
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 42%, rgba(255, 117, 20, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(36, 26, 18, 0.92), rgba(16, 16, 17, 0.9));
}

.metric-card,
.quick-actions button {
  border-radius: 24px;
}

.course-card,
.news-card,
.featured-card {
  border-radius: 28px;
}

.course-cover,
.news-thumb,
.video-panel {
  border-radius: 22px;
}

.course-card .course-cover {
  border-radius: 28px 28px 0 0;
}

.course-cover::after,
.news-thumb::after {
  opacity: 0.42;
  transition:
    transform var(--motion-slow) var(--ease-soft),
    opacity var(--motion) ease;
}

.course-card:hover .course-cover::after,
.news-card:hover .news-thumb::after {
  opacity: 0.7;
  transform: scale(1.08);
}

.quick-actions button::before,
.metric-card::before,
.course-card::before,
.news-card::before {
  background: radial-gradient(circle at 18% 0%, rgba(255, 176, 99, 0.16), transparent 46%);
}

.progress-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.085);
}

.progress-track span {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #ff7b18, #ffbd6a);
}

.progress-track span::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  content: "";
  animation: progress-sheen 2.4s var(--ease-soft) infinite;
}

.badge,
.metric-kicker {
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 176, 99, 0.14), rgba(255, 117, 20, 0.08));
}

.admin-users-layout,
.admin-editor-grid,
.dashboard-grid,
.course-player-grid {
  gap: 20px;
}

.admin-user-list button,
.admin-progress-list article,
.lesson-list li,
.profile-stats div {
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)),
    rgba(255, 255, 255, 0.02);
}

.content-dialog {
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.022)),
    rgba(20, 20, 22, 0.96);
}

.content-dialog::backdrop {
  background: rgba(0, 0, 0, 0.54);
  backdrop-filter: blur(8px);
}

.app-toast {
  border-radius: 20px;
  transition:
    opacity var(--motion) ease,
    transform var(--motion) var(--ease-soft);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 900px) {
  .auth-panel,
  .surface-panel,
  .metric-card,
  .quick-actions button,
  .course-card,
  .news-card,
  .coach-card,
  .featured-card,
  .lesson-sidebar,
  .lesson-detail,
  .empty-state,
  .profile-panel,
  .admin-form,
  .client-sidebar,
  .content-dialog {
    backdrop-filter: none;
  }

  .client-topbar {
    background: transparent;
  }
}

/* Precision layout pass from visual review */
.client-app {
  grid-template-columns: 248px minmax(0, 1fr);
}

.client-sidebar {
  gap: 26px;
  padding: 26px 20px 22px;
}

.client-sidebar .brand-lockup {
  width: 100%;
  justify-content: center;
  padding: 12px;
  border-radius: 22px;
}

.client-sidebar .brand-logo {
  width: min(100%, 220px);
  max-height: 74px;
  object-fit: contain;
}

.client-main {
  padding: 38px clamp(28px, 3.2vw, 56px) 64px;
}

.client-topbar {
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) minmax(520px, 1fr);
  align-items: end;
  gap: 32px;
  margin-bottom: 28px;
  padding: 0 0 24px;
  background: transparent;
  backdrop-filter: none;
}

.client-topbar > div:first-child {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.client-topbar h1 {
  max-width: none;
  font-size: clamp(2.35rem, 3.15vw, 4rem);
  line-height: 0.98;
}

.client-topbar .eyebrow {
  margin: 0;
}

.topbar-actions {
  grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(108px, 0.22fr));
  gap: 14px;
  align-items: center;
}

.search-box,
.topbar-actions .ghost-action {
  min-height: 48px;
  border-radius: 24px;
}

.welcome-panel {
  min-height: 136px;
  margin-bottom: 22px;
  padding: 30px 34px;
  border-radius: 28px;
}

.welcome-panel h2 {
  font-size: clamp(1.45rem, 2.05vw, 2.35rem);
}

.welcome-panel p {
  margin: 6px 0 0;
  font-size: 1.02rem;
}

.welcome-panel .primary-action {
  min-width: 180px;
  min-height: 54px;
}

.quick-actions {
  gap: 20px;
  margin-bottom: 22px;
}

.quick-actions button {
  min-height: 112px;
  padding: 24px 28px;
  border-radius: 26px;
}

.metric-grid {
  gap: 20px;
}

.metric-card {
  min-height: 164px;
  padding: 26px 30px;
  border-radius: 26px;
}

.metric-card strong {
  margin-top: 18px;
  font-size: clamp(2rem, 2.6vw, 2.75rem);
}

.metric-kicker,
.badge {
  min-height: 30px;
  padding-inline: 14px;
}

.surface-panel {
  padding: 28px;
  border-radius: 28px;
}

.dashboard-grid,
.course-grid,
.news-grid,
.admin-grid {
  gap: 22px;
}

@media (max-width: 1180px) {
  .client-app {
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
  }

  .client-sidebar .brand-lockup {
    padding: 8px;
  }

  .client-sidebar .brand-logo {
    width: 54px;
    max-height: none;
  }

  .client-topbar {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }
}

@media (max-width: 760px) {
  .client-main {
    padding: 22px 16px 40px;
  }

  .topbar-actions {
    grid-template-columns: 1fr;
  }

  .welcome-panel {
    grid-template-columns: 1fr;
    padding: 24px;
  }
}

/* Screenshot precision: compact desktop dashboard rhythm */
@media (min-width: 1181px) {
  .client-app {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .client-sidebar {
    padding: 28px 24px 24px;
  }

  .client-sidebar .brand-lockup {
    padding: 10px 12px;
    border-radius: 20px;
  }

  .client-sidebar .brand-logo {
    width: 210px;
    max-height: 68px;
  }

  .client-main {
    padding-top: 34px;
  }

  .client-topbar {
    grid-template-columns: minmax(280px, 0.42fr) minmax(520px, 1fr);
    align-items: center;
    gap: 28px;
    min-height: 116px;
    margin-bottom: 26px;
    padding-bottom: 10px;
  }

  .client-topbar h1 {
    font-size: clamp(2.45rem, 3vw, 3.65rem);
  }

  .topbar-actions {
    grid-template-columns: minmax(300px, 1fr) 132px 124px 112px;
  }

  .search-box,
  .topbar-actions .ghost-action {
    min-height: 52px;
  }

  .welcome-panel {
    min-height: 146px;
    padding: 30px 34px;
  }

  .quick-actions button {
    min-height: 104px;
  }

  .metric-card {
    min-height: 150px;
  }
}

/* Scroll safety: prevent header/search/actions from overlaying content */
.client-topbar {
  position: relative !important;
  top: auto !important;
  z-index: 1;
  isolation: isolate;
  background: transparent !important;
  backdrop-filter: none !important;
}

.view,
.welcome-panel,
.quick-actions,
.metric-grid,
.dashboard-grid,
.surface-panel {
  position: relative;
  z-index: 0;
}

.client-main {
  overflow: visible;
}

/* Admin academy builder */
.admin-academy-simple { display: grid; gap: 24px; grid-column: 1 / -1; }
.admin-academy-simple > .section-heading,
.admin-course-open-head { padding: 26px; border: 1px solid var(--hl-line); border-radius: 22px; background: var(--panel); }
.admin-academy-simple > .section-heading { align-items: end; }
.admin-course-open-head { display: grid; gap: 20px; }
.admin-course-open-head p { margin-bottom: 0; }
.admin-course-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.admin-course-library-card { display: grid; min-width: 0; padding: 0 0 20px; overflow: hidden; text-align: left; border: 1px solid var(--hl-line); border-radius: 20px; color: var(--text); background: var(--panel); transition: transform 160ms ease, border-color 160ms ease; }
.admin-course-library-card:hover { border-color: rgba(255, 117, 20, 0.48); transform: translateY(-3px); }
.admin-course-card-cover { height: 150px; margin-bottom: 18px; background: var(--cover, linear-gradient(135deg, #17100b, #ff7514)); background-position: center; background-size: cover; }
.admin-course-library-card > :not(.admin-course-card-cover) { margin-right: 20px; margin-left: 20px; }
.admin-course-library-card strong { margin-top: 12px; font-size: 1.12rem; }
.admin-course-library-card small { margin-top: 6px; color: var(--muted); }
.admin-course-library-card i { margin-top: 18px; color: var(--gold-soft); font-style: normal; font-weight: 800; }
.admin-course-create-simple { width: min(780px, 100%); }
.admin-course-settings { border: 1px solid var(--hl-line); border-radius: 18px; background: var(--panel); }
.admin-course-settings > summary { padding: 20px 22px; cursor: pointer; font-weight: 820; }
.admin-course-settings > .admin-form { border: 0; border-top: 1px solid var(--hl-line); border-radius: 0 0 18px 18px; }
.admin-lessons-simple-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.admin-lessons-simple-layout { display: grid; grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr); align-items: start; gap: 18px; }
.admin-news-simple { display: grid; gap: 24px; grid-column: 1 / -1; }
.admin-news-simple > .section-heading { align-items: end; padding: 26px; border: 1px solid var(--hl-line); border-radius: 22px; background: var(--panel); }
.admin-news-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.admin-news-library-card { display: grid; min-width: 0; min-height: 220px; align-content: start; gap: 10px; padding: 22px; text-align: left; border: 1px solid var(--hl-line); border-radius: 20px; color: var(--text); background: var(--panel); transition: transform 160ms ease, border-color 160ms ease; }
.admin-news-library-card:hover { border-color: rgba(255, 117, 20, 0.48); transform: translateY(-3px); }
.admin-news-library-card .badge { width: fit-content; }
.admin-news-library-card > small { color: var(--muted); }
.admin-news-library-card > strong { margin-top: 7px; font-size: 1.16rem; line-height: 1.2; }
.admin-news-library-card > p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.admin-news-library-card > i { align-self: end; margin-top: auto; padding-top: 12px; color: var(--gold-soft); font-style: normal; font-weight: 800; }
.admin-news-editor-simple { width: min(900px, 100%); }
.admin-events-simple { display: grid; gap: 24px; grid-column: 1 / -1; }
.admin-events-simple > .section-heading { align-items: end; padding: 26px; border: 1px solid var(--hl-line); border-radius: 22px; background: var(--panel); }
.admin-event-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.admin-event-library-card { display: grid; min-width: 0; padding: 0 0 20px; overflow: hidden; text-align: left; border: 1px solid var(--hl-line); border-radius: 20px; color: var(--text); background: var(--panel); transition: transform 160ms ease, border-color 160ms ease; }
.admin-event-library-card:hover { border-color: rgba(255, 117, 20, 0.48); transform: translateY(-3px); }
.admin-event-card-poster { display: grid; height: 170px; margin-bottom: 18px; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 20%, rgba(255, 117, 20, 0.3), transparent 60%), #130c08; }
.admin-event-card-poster img { width: 100%; height: 100%; object-fit: contain; background: #080808; }
.admin-event-card-poster b { display: grid; text-align: center; color: var(--text); font-size: 3rem; line-height: 0.8; }
.admin-event-card-poster small { margin-top: 10px; color: var(--gold-soft); font-size: 0.78rem; text-transform: uppercase; }
.admin-event-library-card > :not(.admin-event-card-poster) { margin-right: 20px; margin-left: 20px; }
.admin-event-library-card > .badge { width: fit-content; }
.admin-event-library-card > strong { margin-top: 12px; font-size: 1.15rem; }
.admin-event-library-card > small { margin-top: 7px; color: var(--muted); }
.admin-event-library-card > i { margin-top: 18px; color: var(--gold-soft); font-style: normal; font-weight: 800; }
.admin-event-editor-simple { width: min(900px, 100%); }
.admin-community-simple { display: grid; gap: 24px; grid-column: 1 / -1; }
.admin-community-simple > .section-heading { align-items: end; padding: 26px; border: 1px solid var(--hl-line); border-radius: 22px; background: var(--panel); }
.admin-community-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.admin-community-library-card { display: grid; min-width: 0; min-height: 250px; align-content: start; gap: 10px; padding: 22px; overflow: hidden; text-align: left; border: 1px solid var(--hl-line); border-radius: 20px; color: var(--text); background: var(--panel); transition: transform 160ms ease, border-color 160ms ease; }
.admin-community-library-card:hover { border-color: rgba(255, 117, 20, 0.48); transform: translateY(-3px); }
.admin-community-card-media { height: 140px; margin: -22px -22px 10px; overflow: hidden; background: #130c08; }
.admin-community-card-media img { width: 100%; height: 100%; object-fit: cover; }
.admin-community-card-media b { display: grid; height: 100%; place-items: center; color: var(--gold-soft); letter-spacing: 0.16em; }
.admin-community-library-card > .badge { width: fit-content; }
.admin-community-library-card > strong { margin-top: 5px; font-size: 1.14rem; }
.admin-community-library-card > p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.admin-community-library-card > small { color: var(--muted); }
.admin-community-library-card > i { align-self: end; margin-top: auto; padding-top: 10px; color: var(--gold-soft); font-style: normal; font-weight: 800; }
.admin-community-editor-simple { width: min(900px, 100%); }
.admin-users-simple { display: grid; gap: 24px; }
.admin-users-simple > .section-heading { align-items: end; }
.admin-users-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; border: 1px solid var(--hl-line); border-radius: 16px; background: #0d0d0d; }
.admin-users-control { display: flex; align-items: center; gap: 11px; }
.admin-users-control > span { color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.admin-compact-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--hl-line); border-radius: 11px; background: #080808; }
.admin-compact-switch button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font: inherit; font-size: 0.76rem; font-weight: 820; cursor: pointer; }
.admin-compact-switch button.active { color: #0b0b0b; background: #f2eee8; }
.admin-compact-switch button b { display: inline-grid; min-width: 19px; height: 19px; place-items: center; margin-left: 5px; border-radius: 999px; color: inherit; background: rgba(255, 117, 20, 0.18); font-size: 0.65rem; }
.admin-people-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.admin-people-cards > button,
.admin-people-list > button { min-width: 0; text-align: left; border: 1px solid var(--hl-line); color: var(--text); background: var(--panel); transition: transform 160ms ease, border-color 160ms ease; }
.admin-people-cards > button { display: grid; min-height: 215px; align-content: start; justify-items: start; gap: 16px; padding: 22px; border-radius: 20px; }
.admin-people-cards > button:hover,
.admin-people-list > button:hover { border-color: rgba(255, 117, 20, 0.48); transform: translateY(-2px); }
.admin-people-cards > button > span:nth-child(2) { display: grid; gap: 5px; min-width: 0; }
.admin-people-cards strong,
.admin-people-list strong { font-size: 1rem; }
.admin-people-cards small,
.admin-people-list small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.admin-people-cards em,
.admin-people-list em { width: fit-content; margin-top: 7px; color: var(--gold-soft); font-size: 0.74rem; font-style: normal; font-weight: 820; text-transform: uppercase; }
.admin-people-cards i { margin-top: auto; color: var(--gold-soft); font-style: normal; font-weight: 800; }
.admin-people-list { display: grid; gap: 9px; }
.admin-people-list > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 15px; }
.admin-people-list > button > span:nth-child(2) { display: grid; grid-template-columns: minmax(130px, 0.7fr) minmax(180px, 1fr) auto; align-items: center; gap: 14px; min-width: 0; }
.admin-people-list > button > i { color: var(--gold-soft); font-style: normal; font-weight: 800; }
.admin-user-open-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 24px; border: 1px solid var(--hl-line); border-radius: 20px; background: var(--panel); }
.admin-user-open-head h2 { margin: 3px 0; }
.admin-user-open-head p { margin: 0; color: var(--muted); }

/* Admin uses the same left-rail shell as the client area. */
.admin-session .client-sidebar {
  border-right-color: rgba(255, 117, 20, 0.18);
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 117, 20, 0.12), transparent 18rem),
    #080808;
}

.admin-session .sidebar-menu-title span:first-child {
  color: var(--gold-soft);
}

.admin-session .client-main {
  background:
    linear-gradient(110deg, rgba(255, 117, 20, 0.055), transparent 25rem),
    var(--bg);
}

.admin-session #adminView,
.admin-session .client-topbar {
  width: min(100%, 1480px);
}

.admin-session .admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.admin-session .admin-grid > * {
  grid-column: 1 !important;
}

.admin-session .admin-section-tabs {
  display: none !important;
}

.admin-session .admin-editor,
.admin-session .admin-users-simple,
.admin-session .admin-overview,
.admin-session .admin-table {
  border-radius: 22px;
}

.admin-session .client-nav button {
  min-height: 54px;
}

.admin-session .client-nav button.active {
  box-shadow: inset 3px 0 #ff7514;
}

.admin-overview-hero {
  display: grid;
  min-height: 170px;
  align-content: end;
  padding: clamp(26px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid rgba(255, 117, 20, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 117, 20, 0.25), transparent 22rem),
    linear-gradient(120deg, #1a100b, #0d0d0d 58%);
}

.admin-overview-hero h2 { margin: 5px 0 8px; font-size: clamp(2rem, 3.4vw, 3.35rem); }
.admin-overview-hero p:last-child { max-width: 58ch; margin: 0; color: var(--muted); }

.admin-overview-section { display: grid; gap: 16px; }
.admin-overview-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 2px 2px 0; }
.admin-overview-section-head h2 { margin: 3px 0 0; font-size: clamp(1.45rem, 2vw, 2rem); }
.admin-overview-section-head > p { max-width: 38ch; margin: 0; color: var(--muted); text-align: right; }

.admin-quick-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.admin-quick-links button {
  display: grid;
  min-width: 0;
  min-height: 142px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-content: start;
  align-items: start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--hl-line);
  border-radius: 20px;
  color: var(--text);
  background: #121212;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.admin-quick-links button:hover { border-color: rgba(255, 117, 20, 0.55); background: #17130f; transform: translateY(-2px); }
.admin-quick-links .nav-glyph { width: 42px; height: 42px; border-color: rgba(255, 117, 20, 0.3); background: rgba(255, 117, 20, 0.1); }
.admin-quick-links button > span:nth-child(2) { display: grid; gap: 7px; min-width: 0; }
.admin-quick-links strong { font-size: 0.98rem; line-height: 1.2; }
.admin-quick-links small { color: var(--muted); line-height: 1.45; }
.admin-quick-links i { color: var(--gold-soft); font-size: 1.1rem; font-style: normal; }

.admin-overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.admin-overview-metrics button {
  display: grid;
  min-width: 0;
  min-height: 158px;
  align-content: space-between;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--hl-line);
  border-radius: 20px;
  color: var(--text);
  background: linear-gradient(145deg, #1d1d1f, #111);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

.admin-overview-metrics button:hover { border-color: rgba(255, 117, 20, 0.52); transform: translateY(-2px); }
.admin-overview-metrics span { color: var(--gold-soft); font-size: 0.74rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-overview-metrics strong { font-size: clamp(2rem, 3vw, 3.1rem); line-height: 1; }
.admin-overview-metrics small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

.admin-overview-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.admin-activity-card { min-width: 0; overflow: hidden; border: 1px solid var(--hl-line); border-radius: 20px; background: #111; }
.admin-activity-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 19px; border-bottom: 1px solid var(--hl-line); }
.admin-activity-card > header .nav-glyph { width: 40px; height: 40px; border-color: rgba(255, 117, 20, 0.28); background: rgba(255, 117, 20, 0.09); }
.admin-activity-card > header h3 { margin: 2px 0 0; font-size: 1rem; }
.admin-activity-card > header button { padding: 6px 0; border: 0; color: var(--gold-soft); background: transparent; font-size: 0.72rem; font-weight: 850; cursor: pointer; }
.admin-activity-list { display: grid; }
.admin-activity-list article { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 72px; padding: 13px 18px; border-bottom: 1px solid var(--hl-line); }
.admin-activity-list article:last-child { border-bottom: 0; }
.admin-activity-list article > div { display: grid; gap: 4px; min-width: 0; }
.admin-activity-list strong, .admin-activity-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-activity-list strong { font-size: 0.84rem; }
.admin-activity-list small { color: var(--muted); font-size: 0.7rem; }
.admin-activity-list b { max-width: 72px; overflow: hidden; color: var(--gold-soft); font-size: 0.68rem; font-weight: 820; text-overflow: ellipsis; white-space: nowrap; }
.admin-activity-marker { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 0 5px rgba(255, 117, 20, 0.1); }
.admin-activity-list .avatar.compact { width: 34px; height: 34px; min-width: 34px; font-size: 0.68rem; }
.admin-activity-empty { min-height: 110px; display: grid; place-items: center; padding: 20px; color: var(--muted); font-size: 0.8rem; text-align: center; }

@media (max-width: 1050px) {
  .admin-course-card-grid, .admin-news-card-grid, .admin-event-card-grid, .admin-community-card-grid, .admin-people-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-overview-columns { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .admin-course-card-grid, .admin-news-card-grid, .admin-event-card-grid, .admin-community-card-grid, .admin-people-cards, .admin-lessons-simple-layout { grid-template-columns: 1fr; }
  .admin-overview-hero { min-height: 0; }
  .admin-overview-section-head { align-items: start; flex-direction: column; gap: 5px; }
  .admin-overview-section-head > p { text-align: left; }
  .admin-quick-links, .admin-overview-metrics, .admin-overview-columns { grid-template-columns: 1fr; }
  .admin-people-list > button > span:nth-child(2) { grid-template-columns: 1fr; gap: 3px; }
  .admin-user-open-head { grid-template-columns: auto 1fr; }
  .admin-user-open-head > .badge { grid-column: 1 / -1; }
  .admin-users-toolbar { align-items: stretch; flex-direction: column; }
  .admin-users-control { justify-content: space-between; }
  .admin-lessons-simple-head { align-items: stretch; flex-direction: column; }
}

.admin-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.academy-admin-grid {
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
}

.academy-admin-grid .admin-course-picker,
.academy-admin-grid [data-admin-course-form] {
  min-height: 0;
}

.academy-admin-grid .admin-lesson-builder,
.academy-admin-grid [data-admin-create-course-form] {
  grid-column: 1 / -1;
}

.admin-course-picker,
.admin-lesson-builder {
  min-width: 0;
}

.admin-picker-list,
.admin-lesson-list {
  display: grid;
  gap: 10px;
}

.admin-picker-list button,
.admin-lesson-list button {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 13px 14px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)),
    rgba(255, 255, 255, 0.02);
  text-align: left;
}

.admin-picker-list button.active,
.admin-picker-list button:hover,
.admin-lesson-list button.active,
.admin-lesson-list button:hover {
  border-color: rgba(255, 154, 61, 0.44);
  background:
    linear-gradient(180deg, rgba(255, 117, 20, 0.16), rgba(255, 255, 255, 0.02)),
    rgba(255, 117, 20, 0.055);
}

.admin-picker-list strong,
.admin-picker-list span,
.admin-lesson-list strong,
.admin-lesson-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-picker-list span,
.admin-lesson-list small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.admin-form-row.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-lesson-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.45fr);
  align-items: end;
  gap: 14px;
}

.admin-lesson-head h3 {
  margin: 3px 0 0;
  font-size: 1.2rem;
}

.admin-lesson-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
}

.admin-lesson-list {
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.admin-lesson-list button {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
}

.admin-lesson-list button span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #130903;
  background: linear-gradient(180deg, #ffbd72 0%, #ff7c18 100%);
  font-size: 0.76rem;
  font-weight: 860;
}

.admin-lesson-list button small {
  grid-column: 2;
}

.admin-lesson-form {
  display: grid;
  gap: 12px;
}

.admin-lesson-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 820;
}

.admin-hint {
  display: block;
  color: var(--muted-2);
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.35;
}

.admin-hidden-field {
  opacity: 0.62;
}

.admin-hidden-field input {
  pointer-events: none;
}

.admin-advanced {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.admin-advanced summary {
  cursor: pointer;
  color: var(--gold-soft);
  font-size: 0.8rem;
  font-weight: 840;
}

.admin-advanced label {
  margin-top: 12px;
}

@media (max-width: 1280px) {
  .admin-editor-grid {
    grid-template-columns: minmax(220px, 0.44fr) minmax(0, 1fr);
  }

  .admin-lesson-builder {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .admin-editor-grid,
  .admin-lesson-layout,
  .admin-lesson-head,
  .admin-form-row.two {
    grid-template-columns: 1fr;
  }
}

/* Dedicated /admin login */
.admin-login-mode .auth-tabs {
  grid-template-columns: 1fr;
}

.admin-login-mode .auth-panel {
  border-color: rgba(255, 117, 20, 0.3);
}

.admin-login-mode .auth-brand {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 117, 20, 0.16), transparent 26rem),
    linear-gradient(140deg, rgba(255, 117, 20, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22rem);
}

.admin-section-tabs {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.025);
  scrollbar-width: none;
}

.admin-section-tabs::-webkit-scrollbar {
  display: none;
}

.admin-section-tabs button {
  flex: 0 0 auto;
  min-width: 116px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--muted);
  background: transparent;
  font-size: 0.88rem;
  font-weight: 840;
}

.admin-section-tabs button.active,
.admin-section-tabs button:hover {
  color: #130903;
  border-color: rgba(255, 176, 99, 0.42);
  background: linear-gradient(180deg, #ffbd72 0%, #ff7c18 100%);
}

.admin-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.danger-action {
  color: #ffd5c2;
  border-color: rgba(255, 96, 64, 0.32);
}

.danger-action:hover {
  color: #fff6f2;
  border-color: rgba(255, 96, 64, 0.58);
  background: rgba(255, 96, 64, 0.12);
}

.admin-code-list {
  display: grid;
  gap: 10px;
}

.admin-code-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.024);
}

.admin-code-list strong,
.admin-code-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-code-list span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 760;
}

.admin-code-list .danger-action {
  min-width: 112px;
  min-height: 42px;
  border-radius: 14px;
}

.admin-notification-list article {
  align-items: start;
}

.admin-notification-list strong,
.admin-notification-list p,
.admin-notification-list small {
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-copy {
  max-width: 760px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.admin-flow-steps {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-flow-steps article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.026);
}

.admin-flow-steps article.active {
  border-color: rgba(255, 117, 20, 0.44);
  background: linear-gradient(180deg, rgba(255, 117, 20, 0.14), rgba(255, 255, 255, 0.026));
}

.admin-flow-steps span {
  display: inline-grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #160a03;
  background: linear-gradient(180deg, #ffbd72, #ff7c18);
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-flow-steps strong,
.admin-flow-steps small {
  min-width: 0;
}

.admin-flow-steps small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.admin-vimeo-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 117, 20, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.024);
}

.admin-vimeo-preview iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  background: #050505;
}

.admin-vimeo-preview.empty {
  min-height: 104px;
  align-content: center;
  border-style: dashed;
}

.admin-vimeo-preview span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 780;
}

.legal-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 0 8px 6px;
}

.legal-links a {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 780;
  text-decoration: none;
}

.legal-links a:hover {
  color: var(--accent);
}

.legal-page {
  min-height: 100dvh;
  padding: 36px 18px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 117, 20, 0.16), transparent 28rem),
    linear-gradient(180deg, #080808 0%, #020202 100%);
}

.legal-document {
  display: grid;
  gap: 18px;
  width: min(860px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(8, 8, 8, 0.84);
  box-shadow: var(--shadow);
}

.legal-document img {
  width: min(260px, 70vw);
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 245, 235, 0.96);
}

.legal-document h1 {
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 4.8rem);
  line-height: 0.96;
}

.legal-document h2 {
  margin: 16px 0 0;
  font-size: 1.2rem;
}

.legal-document p {
  max-width: 78ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 820px) {
  .admin-flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-section-tabs {
    gap: 8px;
  }

  .admin-code-list article {
    grid-template-columns: 1fr;
  }
}

/* Mobile app polish */
@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  .auth-screen {
    display: grid;
    min-height: 100dvh;
  }

  .register-step .auth-screen {
    padding: 14px;
  }

  .register-step .auth-panel {
    width: 100%;
    max-height: calc(100dvh - 28px);
    margin: 0;
  }

  .auth-brand {
    justify-content: start;
    gap: 26px;
    min-height: auto;
    padding: 24px 18px 10px;
  }

  .brand-lockup.large {
    justify-self: start;
    max-width: 100%;
  }

  .brand-lockup.large .brand-logo {
    width: min(320px, 82vw);
  }

  .auth-copy h1 {
    font-size: clamp(2rem, 12vw, 3.8rem);
    line-height: 0.98;
  }

  .auth-copy p {
    margin-top: 14px;
    font-size: 0.98rem;
  }

  .auth-panel {
    width: calc(100% - 28px);
    margin: 8px auto 24px;
    border-radius: 28px;
    padding: 12px;
  }

  .auth-form {
    padding: 20px;
  }

  .client-app {
    display: block;
    min-height: 100dvh;
    padding-top: 0;
  }

  .client-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 5, 5, 0.94);
  }

  .client-sidebar .brand-lockup {
    width: auto;
    padding: 6px;
    border-radius: 14px;
  }

  .client-sidebar .brand-logo {
    width: 52px;
    height: 34px;
    object-fit: contain;
  }

  .client-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    align-self: center;
  }

  .client-nav button {
    justify-content: center;
    min-height: 38px;
    padding: 0 6px;
    border-radius: 14px;
    font-size: 0.72rem;
    line-height: 1;
  }

  .nav-glyph {
    display: none;
  }

  .sidebar-profile {
    display: none;
  }

  .client-main {
    padding: 18px 14px 42px;
  }

  .client-topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
    margin-bottom: 18px;
    padding-bottom: 0;
  }

  .client-topbar h1 {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .search-box {
    grid-column: 1 / -1;
  }

  .search-box,
  .topbar-actions .ghost-action,
  .primary-action,
  .ghost-action {
    min-height: 46px;
  }

  .welcome-panel {
    gap: 18px;
    min-height: 0;
    padding: 22px;
    border-radius: 24px;
  }

  .welcome-panel .primary-action {
    width: 100%;
    min-width: 0;
  }

  .quick-actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .quick-actions button {
    min-height: 84px;
    padding: 18px 20px;
    border-radius: 22px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .metric-card {
    min-height: 126px;
    padding: 20px;
    border-radius: 22px;
  }

  .metric-card strong {
    margin-top: 12px;
    font-size: 2rem;
  }

  .surface-panel,
  .course-card,
  .news-card,
  .featured-card,
  .lesson-sidebar,
  .lesson-detail,
  .admin-form {
    border-radius: 24px;
  }

  .surface-panel {
    padding: 20px;
  }

  .section-heading,
  .view-toolbar {
    align-items: start;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .section-heading .ghost-action,
  .view-toolbar .ghost-action {
    width: 100%;
  }

  .dashboard-grid,
  .course-grid,
  .news-grid,
  .coach-grid,
  .admin-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .featured-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .featured-card .course-cover,
  .course-card .course-cover,
  .news-thumb {
    height: 164px;
    min-height: 164px;
  }

  .course-body {
    min-height: 0;
    padding: 20px;
  }

  .course-actions {
    align-items: start;
    gap: 12px;
  }

  .course-actions .text-link {
    justify-self: start;
  }

  .academy-hero,
  .academy-section,
  .coach-section {
    gap: 16px;
  }

  .segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
  }

  .segmented button {
    min-height: 40px;
    padding: 0 8px;
    font-size: 0.82rem;
  }

  .course-page {
    gap: 18px;
  }

  .course-back-row,
  .lesson-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .course-player-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .video-panel {
    min-height: 360px;
    padding: 20px;
    border-radius: 26px;
  }

  .video-panel h2 {
    font-size: clamp(2.1rem, 13vw, 3.6rem);
  }

  .lesson-sidebar {
    padding: 18px;
  }

  .lesson-list {
    max-height: none;
    overflow: visible;
  }

  .lesson-detail {
    padding: 20px;
  }

  .lesson-summary-grid {
    grid-template-columns: 1fr;
  }

  .admin-section-tabs {
    gap: 8px;
    padding: 6px;
    border-radius: 20px;
  }

  .admin-section-tabs button {
    min-height: 42px;
    border-radius: 15px;
    font-size: 0.84rem;
  }

  .admin-users-layout,
  .admin-editor-grid,
  .admin-lesson-layout,
  .admin-lesson-head,
  .admin-form-row,
  .admin-form-row.two {
    grid-template-columns: 1fr;
  }

  .admin-form {
    padding: 18px;
  }

  .admin-user-list,
  .admin-lesson-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .admin-user-actions,
  .admin-action-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-code-list article {
    grid-template-columns: 1fr;
  }

  .content-dialog {
    width: calc(100% - 24px);
    max-height: calc(100dvh - 32px);
    border-radius: 24px;
  }

  .dialog-shell {
    padding: 20px;
  }
}

@media (max-width: 430px) {
  .client-nav button {
    font-size: 0.66rem;
    letter-spacing: 0;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .brand-lockup.large .brand-logo {
    width: min(280px, 84vw);
  }

  .auth-copy h1 {
    font-size: clamp(1.9rem, 13vw, 3.2rem);
  }
}

/* Clean left navigation: text-first, collapsible and calm */
@media (min-width: 761px) {
  .client-app {
    grid-template-columns: 264px minmax(0, 1fr);
    transition: grid-template-columns 220ms ease;
  }

  .client-app.sidebar-collapsed {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .sidebar-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 8px;
    align-items: center;
  }

  .sidebar-toggle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    color: #d8d3cc;
    background: rgba(255, 255, 255, 0.035);
    font-size: 1.35rem;
  }

  .sidebar-toggle:hover {
    border-color: rgba(255, 117, 20, 0.42);
    color: #fff;
  }

  .sidebar-collapsed .client-sidebar {
    padding-inline: 14px;
  }

  .sidebar-collapsed .sidebar-head {
    display: block;
  }

  .sidebar-collapsed .brand-lockup,
  .sidebar-collapsed .nav-label,
  .sidebar-collapsed .sidebar-profile > div {
    display: none;
  }

  .sidebar-collapsed .sidebar-toggle {
    margin: 0 auto;
    transform: rotate(180deg);
  }

  .sidebar-collapsed .client-nav button {
    justify-content: center;
    padding-inline: 0;
  }

  .sidebar-collapsed .nav-glyph {
    width: 9px;
    height: 9px;
  }

  .sidebar-collapsed .sidebar-profile {
    display: flex;
    justify-content: center;
    padding-top: 16px;
  }

  .sidebar-collapsed .sidebar-profile .avatar {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .admin-grid {
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: start;
    gap: 18px 24px;
  }

  .admin-grid > .admin-section-tabs {
    position: sticky;
    top: 24px;
    grid-column: 1;
    grid-row: 1 / span 30;
    display: grid;
    width: 100%;
    margin: 0;
    padding: 6px;
    overflow: visible;
    border-radius: 12px;
  }

  .admin-grid > .admin-section-tabs button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    text-align: left;
  }

  .admin-grid > :not(.admin-section-tabs) {
    grid-column: 2;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .auth-screen {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 32px 24px;
    overflow: auto;
  }

  .auth-screen .auth-brand {
    min-height: 0;
    padding: 0;
    background: transparent;
  }

  .auth-screen .brand-lockup.large {
    display: flex;
    width: min(390px, 72vw);
    min-height: 124px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 16px 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 117, 20, 0.2);
    border-radius: 22px;
    background: #f6efe7;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3);
  }

  .auth-screen .brand-lockup.large .brand-logo {
    width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
  }

  .auth-screen .auth-copy { display: none; }
  .auth-screen .auth-panel { width: min(100%, 560px); margin: 0 auto; }
}

@media (max-width: 760px) {
  .sidebar-head {
    display: contents;
  }

  .sidebar-toggle {
    display: none;
  }
}

/* Client navigation v2 — structured left rail */
@media (min-width: 641px) {
  .client-app {
    display: grid !important;
    grid-template-columns: 258px minmax(0, 1fr) !important;
    min-height: 100vh;
    padding: 0;
    transition: grid-template-columns 220ms ease;
  }

  .client-app.sidebar-collapsed {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  .client-sidebar {
    position: sticky !important;
    top: 0;
    z-index: 30;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 18px !important;
    width: auto;
    height: 100vh;
    min-height: 620px;
    padding: 22px 16px 18px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-bottom: 0 !important;
    background:
      radial-gradient(circle at 0 0, rgba(255, 117, 20, 0.11), transparent 18rem),
      #090909 !important;
  }

  .sidebar-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    gap: 10px !important;
    align-items: center;
  }

  .client-sidebar .brand-lockup {
    display: flex;
    width: 100% !important;
    min-width: 0;
    min-height: 72px;
    justify-content: center;
    padding: 8px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 117, 20, 0.16);
    border-radius: 16px !important;
    background: #f5efe7;
  }

  .client-sidebar .brand-logo {
    width: 178px !important;
    max-width: 100%;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: contain;
  }

  .sidebar-toggle {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .sidebar-menu-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 0;
    color: #837b73;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .sidebar-menu-line {
    height: 1px;
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
  }

  .client-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-content: start;
  }

  .client-nav button {
    position: relative;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px !important;
    justify-content: start !important;
    min-height: 48px !important;
    padding: 5px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    color: #9e968f !important;
    background: transparent !important;
    font-size: 0.9rem !important;
    font-weight: 780;
    line-height: 1;
  }

  .client-nav button:hover {
    color: #fff5ec !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    transform: none;
  }

  .client-nav button.active {
    color: #fff !important;
    border-color: rgba(255, 117, 20, 0.28) !important;
    background: linear-gradient(90deg, rgba(255, 117, 20, 0.2), rgba(255, 117, 20, 0.045)) !important;
    box-shadow: inset 3px 0 0 #ff7514 !important;
  }

  .nav-glyph {
    display: grid !important;
    place-items: center;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px !important;
    color: currentColor;
    background: rgba(255, 255, 255, 0.025);
    font-size: 1rem;
    opacity: 1 !important;
  }

  .client-nav button.active .nav-glyph {
    border-color: rgba(255, 117, 20, 0.42);
    color: #fff;
    background: #e9630a;
  }

  .nav-label {
    align-self: center;
    min-width: 0;
    white-space: nowrap;
  }

  .sidebar-profile {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 10px;
    margin-top: auto;
    padding: 14px 8px 0;
  }

  .sidebar-logout {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 3px 10px;
    border: 0;
    border-radius: 12px;
    color: #8f8780;
    background: transparent;
    text-align: left;
    font-weight: 780;
  }

  .sidebar-logout:hover {
    color: #ff8b38;
    background: rgba(255, 117, 20, 0.07);
  }

  .sidebar-collapsed .client-sidebar {
    padding-inline: 12px !important;
  }

  .sidebar-collapsed .sidebar-head {
    display: flex !important;
    justify-content: center;
  }

  .sidebar-collapsed .brand-lockup,
  .sidebar-collapsed .sidebar-menu-title,
  .sidebar-collapsed .nav-label,
  .sidebar-collapsed .sidebar-profile > div {
    display: none !important;
  }

  .sidebar-collapsed .client-nav button,
  .sidebar-collapsed .sidebar-logout {
    display: flex !important;
    justify-content: center !important;
    padding-inline: 0 !important;
  }

  .sidebar-collapsed .sidebar-profile {
    display: flex !important;
    justify-content: center;
    padding-inline: 0;
  }
}

/* Accesso mobile essenziale: logo, scelta accesso e modulo */
.auth-screen.hidden,
.client-app.hidden,
.client-app.sidebar-collapsed.hidden {
  display: none !important;
}

@media (max-width: 760px) {
  body:not(.session-restoring):has(.auth-screen:not(.hidden)) {
    background: #050505;
  }

  .auth-screen {
    display: flex !important;
    width: 100%;
    min-height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding:
      max(18px, env(safe-area-inset-top))
      14px
      max(22px, env(safe-area-inset-bottom));
    overflow: visible;
    background:
      radial-gradient(circle at 50% -6rem, rgba(255, 117, 20, 0.16), transparent 22rem),
      #050505;
  }

  .auth-screen .auth-brand {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  .auth-screen .auth-brand::after,
  .auth-screen .auth-copy {
    display: none;
  }

  .auth-screen .brand-lockup.large {
    display: flex;
    width: min(270px, 78vw);
    min-height: 96px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    padding: 12px 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 117, 20, 0.2);
    border-radius: 20px;
    background: #f6efe7;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3);
  }

  .auth-screen .brand-lockup.large .brand-logo {
    display: block;
    width: 100%;
    max-height: 70px;
    object-fit: contain;
  }

  .auth-screen .auth-panel,
  .register-step .auth-screen .auth-panel {
    width: 100%;
    max-width: 480px;
    max-height: none;
    margin: 0 auto;
    padding: 8px;
    overflow: visible;
    border-radius: 24px;
  }

  .auth-screen .auth-tabs,
  .register-step .auth-screen .auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 5px;
  }

  .register-step .auth-screen #loginTab {
    display: block;
  }

  .auth-screen .auth-tabs button {
    min-height: 46px;
    font-size: 0.95rem;
  }

  .auth-screen .auth-form,
  .register-step .auth-screen .auth-form.active {
    margin-top: 8px;
    padding: 14px 10px 10px;
    gap: 13px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
  }

  .auth-screen .auth-form > div:first-child {
    display: none;
  }

  .auth-screen .auth-form label {
    gap: 6px;
    font-size: 0.82rem;
  }

  .auth-screen .auth-form input {
    min-height: 50px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 16px;
  }

  .auth-screen .auth-form .primary-action {
    width: 100%;
    min-height: 50px;
    margin-top: 2px;
  }

  .auth-screen .two-fields {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .auth-screen .form-note {
    min-height: 0;
    font-size: 0.78rem;
  }

  .auth-screen .form-note:not(.error):not(.success),
  .auth-screen .legal-links,
  .auth-screen .register-back {
    display: none;
  }

  .auth-screen #forgotPasswordButton {
    justify-self: center;
    min-height: 44px;
  }
}

/* Installazione PWA e rifinitura mobile finale */
.app-install-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 117, 20, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 0, rgba(255, 117, 20, 0.14), transparent 15rem),
    var(--panel);
}

.app-install-card:empty {
  display: none;
}

.app-install-icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  background: #f6efe7;
}

.app-install-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.app-install-card h3,
.app-install-card p {
  margin: 0;
}

.app-install-card h3 {
  margin: 3px 0 5px;
}

.app-install-card > div:nth-child(2) > p:last-child {
  color: var(--muted);
}

.install-guide ol {
  display: grid;
  gap: 14px;
  margin: 24px 0;
  padding-left: 24px;
  color: var(--muted);
}

.install-tutorial {
  width: min(760px, 100%);
}

.install-tutorial-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding-right: 38px;
}

.install-tutorial-head h2,
.install-tutorial-head p,
.install-platform-title h3,
.install-platform-title p {
  margin: 0;
}

.install-tutorial-head h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1;
}

.install-tutorial-head > div:last-child > p:last-child,
.install-platform-title p {
  color: var(--muted);
}

.install-platform-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 24px 0 18px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.2);
}

.install-platform-tabs button {
  min-height: 48px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.install-platform-tabs button.active {
  background: linear-gradient(135deg, #ffb760, var(--accent));
  color: #111;
}

.install-platform-guide {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.025);
}

.install-platform-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.install-platform-title > span {
  display: grid;
  min-width: 74px;
  height: 42px;
  place-items: center;
  padding: 0 14px;
  border-radius: 13px;
  background: rgba(255, 117, 20, 0.14);
  color: var(--accent-soft);
  font-weight: 900;
}

.install-steps {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: install-step;
}

.install-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  counter-increment: install-step;
}

.install-steps li::before {
  content: counter(install-step);
  display: grid;
  width: 34px;
  height: 34px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #111;
  font-weight: 900;
}

.install-steps strong,
.install-steps span {
  display: block;
}

.install-steps span {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.install-now-action {
  width: 100%;
  margin-top: 18px;
}

.install-confirmation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 117, 20, 0.09);
}

.install-confirmation label {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  cursor: pointer;
}

.install-confirmation input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.install-confirmation button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  :root {
    scroll-padding-bottom: 92px;
  }

  .client-app,
  .client-app.sidebar-collapsed {
    animation: none !important;
    transform: none !important;
  }

  body {
    -webkit-tap-highlight-color: transparent;
  }

  button,
  a,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  .client-app,
  .client-app.sidebar-collapsed {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .client-sidebar,
  .sidebar-collapsed .client-sidebar {
    position: fixed !important;
    z-index: 1000 !important;
    inset:
      auto
      10px
      max(8px, env(safe-area-inset-bottom))
      10px !important;
    display: block !important;
    width: auto !important;
    height: 68px !important;
    min-height: 0 !important;
    padding: 6px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 132, 35, 0.28) !important;
    border-radius: 23px !important;
    background:
      linear-gradient(180deg, rgba(34, 28, 24, 0.96), rgba(10, 10, 11, 0.97)) !important;
    box-shadow:
      0 18px 46px rgba(0, 0, 0, 0.52),
      0 0 28px rgba(255, 117, 20, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(26px) saturate(1.25);
    transform: translateZ(0);
  }

  .sidebar-head,
  .sidebar-menu-title,
  .sidebar-profile,
  .sidebar-logout {
    display: none !important;
  }

  .client-nav {
    display: grid !important;
    width: 100% !important;
    height: 56px;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .client-nav button,
  .sidebar-collapsed .client-nav button {
    display: flex !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 4px 2px 3px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 3px !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    font-size: 0.61rem !important;
    font-weight: 800 !important;
    color: rgba(255, 248, 241, 0.62) !important;
  }

  .client-nav button.active {
    color: #fff8f1 !important;
    border-color: rgba(255, 132, 35, 0.26) !important;
    background:
      linear-gradient(180deg, rgba(255, 117, 20, 0.22), rgba(255, 117, 20, 0.08)) !important;
    box-shadow:
      0 8px 20px rgba(255, 117, 20, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  .nav-glyph,
  .sidebar-collapsed .nav-glyph {
    display: grid !important;
    width: 29px !important;
    height: 29px !important;
    flex: 0 0 29px !important;
    place-items: center;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
  }

  .nav-glyph img {
    width: 18px;
    height: 18px;
  }

  .client-nav button.active .nav-glyph {
    background: linear-gradient(180deg, #ff9a3d, #e9630a) !important;
    box-shadow:
      0 7px 16px rgba(255, 117, 20, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  .nav-label {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .client-main,
  .sidebar-collapsed .client-main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding:
      14px
      12px
      calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .client-main .view,
  .client-main .view.active {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .client-main .view > :last-child,
  .client-main .view.active > :last-child,
  #communityPage > :last-child,
  #calendarPage > :last-child,
  #profilePage > :last-child {
    margin-bottom: 0 !important;
  }

  .client-topbar {
    gap: 10px;
    margin-bottom: 14px;
  }

  .client-topbar > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .client-topbar h1 {
    font-size: clamp(1.75rem, 9vw, 2.4rem);
  }

  .client-topbar .eyebrow {
    display: none;
  }

  .topbar-actions {
    grid-template-columns: minmax(0, 1fr) 46px 46px !important;
    gap: 8px;
  }

  .search-box {
    grid-column: auto;
    min-width: 0;
  }

  .search-box input {
    min-width: 0;
    font-size: 16px;
  }

  .icon-action,
  .account-action {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }

  .account-action .account-copy {
    display: none;
  }

  .account-action .avatar {
    width: 38px;
    height: 38px;
  }

  .view {
    gap: 18px;
  }

  .welcome-panel,
  .calendar-hero,
  #communityPage .community-hero,
  .profile-page-hero,
  #courseView .course-masterclass-head {
    padding: 20px;
    border-radius: 22px;
  }

  .welcome-panel::after {
    font-size: clamp(3rem, 19vw, 5rem);
  }

  .calendar-hero h2,
  #communityPage .community-hero h2 {
    font-size: clamp(1.85rem, 9vw, 2.7rem);
  }

  .app-install-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;
    padding: 16px;
    border-radius: 20px;
  }

  .app-install-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .app-install-icon img {
    width: 46px;
    height: 46px;
  }

  .app-install-card .primary-action {
    width: 100%;
    grid-column: 1 / -1;
  }

  .install-tutorial-head {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;
    padding-right: 24px;
  }

  .install-tutorial-head h2 {
    font-size: clamp(1.55rem, 7.5vw, 2rem);
  }

  .install-platform-tabs {
    margin: 20px 0 14px;
  }

  .install-platform-guide {
    padding: 16px;
    border-radius: 18px;
  }

  .install-platform-title {
    align-items: flex-start;
  }

  .install-confirmation {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .install-confirmation .ghost-action {
    width: 100%;
  }

  .surface-panel {
    padding: 17px;
    border-radius: 22px;
  }

  .section-heading h2 {
    font-size: clamp(1.55rem, 8vw, 2.15rem);
  }

  #dashboardView #featuredCourse .featured-card,
  #academyView .academy-continue-rail .featured-card {
    grid-template-columns: 1fr !important;
    aspect-ratio: auto !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  #dashboardView #featuredCourse .featured-card .course-cover,
  #academyView .academy-continue-rail .featured-card .course-cover {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    border-radius: 0 !important;
  }

  #dashboardView #featuredCourse .featured-card > div:last-child,
  #academyView .academy-continue-rail .featured-card > div:last-child {
    padding: 20px !important;
  }

  #academyView .masterclass-course-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  #academyView .masterclass-course-grid .course-cover {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }

  .course-player-grid {
    grid-template-columns: 1fr !important;
  }

  .video-panel,
  .course-video-shell {
    width: 100%;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    padding: 0;
    border-radius: 18px;
  }

  .course-player-grid .lesson-list {
    max-height: 52vh;
    overflow-y: auto;
  }

  .community-layout-single .community-post {
    padding: 18px;
    border-radius: 20px;
  }

  .community-layout-single .community-post > footer {
    gap: 5px;
  }

  .community-layout-single .community-post > footer button {
    min-width: 0;
    min-height: 46px;
    padding: 5px;
    font-size: 0.67rem !important;
  }

  .calendar-toolbar {
    gap: 9px;
    padding: 7px;
  }

  .calendar-view-tabs,
  .calendar-filters {
    width: 100%;
  }

  .calendar-toolbar button {
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    font-size: 0.76rem;
  }

  .month-calendar {
    border-radius: 16px;
  }

  .month-weekday {
    padding: 9px 2px;
    font-size: 0.6rem;
  }

  .month-day > span {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
  }

  .event-grid {
    grid-template-columns: 1fr;
  }

  .event-poster {
    aspect-ratio: 4 / 5;
  }

  .profile-page-layout,
  .profile-details-card > header {
    grid-template-columns: 1fr;
  }

  .profile-details-card {
    padding: 18px;
  }

  .content-dialog {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .dialog-shell {
    min-height: 100%;
    padding: 56px 18px calc(24px + env(safe-area-inset-bottom));
  }

  .dialog-close {
    position: fixed;
    z-index: 2;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
  }

  .event-reader {
    grid-template-columns: 1fr;
  }

  .event-reader > img {
    max-height: 54vh;
  }

  .admin-section-tabs,
  .admin-content-nav {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .admin-section-tabs button,
  .admin-content-nav button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* Social Community, adapted from the 3BX backoffice pattern */
#communityPage {
  display: grid;
  gap: 16px;
}

.community-hero,
.community-stories,
.community-feed-tabs,
.community-composer,
.community-post,
.community-trends {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    #0d0d0e;
}

.community-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  padding: 24px 28px;
  border-radius: 22px;
}

.community-hero h2 {
  margin: 5px 0 0;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.community-hero > div > p:last-child {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
}

.community-live {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid rgba(66, 216, 155, 0.28);
  border-radius: 999px;
  color: #8ceabd;
  background: rgba(66, 216, 155, 0.08);
  font-size: 0.75rem;
  font-weight: 900;
}

.community-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42d89b;
  box-shadow: 0 0 0 5px rgba(66, 216, 155, 0.1);
}

.community-stories {
  display: flex;
  gap: 12px;
  padding: 14px;
  overflow-x: auto;
  border-radius: 18px;
  scrollbar-width: none;
}

.community-stories::-webkit-scrollbar {
  display: none;
}

.community-story {
  display: grid;
  flex: 0 0 142px;
  justify-items: center;
  gap: 5px;
  min-height: 136px;
  padding: 16px 12px;
  border: 1px solid rgba(255, 117, 20, 0.2);
  border-radius: 17px;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 117, 20, 0.19), transparent 55%),
    rgba(255, 255, 255, 0.025);
  text-align: center;
}

.community-story > span,
.community-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid #ff7514;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #ff9a3d, #bb4700);
  font-size: 0.76rem;
  font-weight: 900;
}

.community-story strong {
  font-size: 0.82rem;
}

.community-story small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-story-empty {
  padding: 18px;
  color: var(--muted);
}

.community-feed-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 7px;
  border-radius: 16px;
}

.community-feed-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
}

.community-feed-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #ff8b38, #d65400);
}

.community-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.3fr);
  gap: 16px;
  align-items: start;
}

.community-feed {
  display: grid;
  gap: 14px;
}

.community-composer,
.community-post,
.community-trends {
  padding: 20px;
  border-radius: 19px;
}

.community-composer-head,
.community-post > header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.community-composer-head div,
.community-post > header div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.community-composer-head small,
.community-post > header small {
  color: var(--muted);
}

.community-composer textarea,
.community-composer input,
.community-composer select,
.community-comments-panel textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}

.community-composer textarea {
  min-height: 104px;
  margin-top: 16px;
  padding: 14px 16px;
  resize: vertical;
}

.community-composer-fields {
  display: grid;
  grid-template-columns: 0.7fr 0.8fr minmax(180px, 1.25fr) auto;
  gap: 8px;
  margin-top: 9px;
}

.community-composer input,
.community-composer select {
  min-height: 44px;
  padding: 0 12px;
}

.community-post > header .community-type {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid rgba(255, 117, 20, 0.22);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(255, 117, 20, 0.07);
  font-size: 0.68rem;
  font-weight: 850;
}

.community-topic {
  margin: 17px 0 0;
  color: #ff8b38;
  font-size: 0.75rem;
  font-weight: 900;
}

.community-content {
  margin: 10px 0 0;
  color: #e9e2db;
  line-height: 1.62;
}

.community-media {
  width: 100%;
  max-height: 520px;
  margin-top: 16px;
  border-radius: 15px;
  object-fit: cover;
  background: #050505;
}

.community-post > footer {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.community-post > footer button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-weight: 800;
}

.community-post > footer button.active {
  color: #ff9a4c;
  border-color: rgba(255, 117, 20, 0.28);
  background: rgba(255, 117, 20, 0.08);
}

.community-trends {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 9px;
}

.community-trends h3 {
  margin: 0 0 8px;
}

.community-trends button {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
  font-weight: 780;
}

.community-empty {
  padding: 34px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
}

.community-comments-panel,
.community-story-reader {
  display: grid;
  gap: 16px;
}

.community-comment-list {
  display: grid;
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
}

.community-comment-list article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.community-comment-list article > span,
.community-story-reader > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: #d65400;
  font-size: 0.7rem;
  font-weight: 900;
}

.community-comment-list p {
  margin: 4px 0;
}

.community-comment-list small {
  color: var(--muted);
}

.community-comments-panel form {
  display: grid;
  gap: 10px;
}

.community-comments-panel textarea {
  min-height: 88px;
  padding: 12px;
  resize: vertical;
}

@media (max-width: 1050px) {
  .community-layout {
    grid-template-columns: 1fr;
  }

  .community-trends {
    position: static;
  }

  .community-composer-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .community-hero {
    align-items: start;
    padding: 20px;
  }

  .community-live {
    display: none;
  }

  .community-composer-fields {
    grid-template-columns: 1fr;
  }

  .community-post > footer {
    flex-wrap: wrap;
  }
}

.profile-page {
  width: min(100%, 980px);
  margin: 0 auto;
}

.profile-page .account-panel {
  width: 100%;
  max-width: none;
  margin: 0;
}

.profile-page .account-footer {
  justify-content: flex-start;
}

.profile-page {
  display: grid;
  gap: 22px;
  width: min(100%, 1240px);
}

.profile-page-hero,
.profile-identity-card,
.profile-side-card,
.profile-details-card {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    #0d0d0e;
}

.profile-page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px;
  border-radius: 22px;
}

.profile-page-hero h2,
.profile-details-card h2,
.profile-identity-card h2 {
  margin: 4px 0 0;
}

.profile-page-hero > div > p:last-child,
.profile-details-card > header > p {
  margin: 8px 0 0;
  color: var(--muted);
}

.profile-status {
  flex: 0 0 auto;
  padding: 10px 15px;
  border: 1px solid rgba(66, 216, 155, 0.28);
  border-radius: 999px;
  color: #8ceabd;
  background: rgba(66, 216, 155, 0.08);
  font-size: 0.78rem;
  font-weight: 850;
}

.profile-page-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.profile-identity-column {
  display: grid;
  gap: 14px;
}

.profile-identity-card {
  display: grid;
  justify-items: center;
  padding: 28px 22px;
  border-radius: 22px;
  text-align: center;
}

.profile-identity-card .account-avatar {
  width: 112px;
  height: 112px;
  margin-bottom: 18px;
  font-size: 2rem;
}

.profile-identity-card p {
  margin: 7px 0 0;
  color: var(--gold-soft);
  font-weight: 800;
}

.profile-identity-card small {
  margin-top: 8px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.profile-side-card {
  display: grid;
  gap: 7px;
  padding: 18px 20px;
  border-radius: 18px;
}

.profile-side-card > span {
  color: var(--muted-2);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.profile-side-card small {
  color: var(--muted);
  line-height: 1.4;
}

.profile-mini-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.profile-mini-stats div {
  display: grid;
  gap: 4px;
}

.profile-mini-stats div span {
  color: var(--muted);
  font-size: 0.72rem;
}

.profile-details-card {
  padding: 28px;
  border-radius: 22px;
}

.profile-details-card > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.5fr);
  gap: 24px;
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-details-form {
  display: grid;
  gap: 18px;
  padding: 24px 0;
}

.profile-details-form label {
  display: grid;
  align-content: start;
  gap: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-details-form input {
  height: 50px;
  min-width: 0;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  letter-spacing: 0;
  text-transform: none;
}

.profile-details-form input:focus {
  outline: 0;
  border-color: rgba(255, 117, 20, 0.56);
  box-shadow: 0 0 0 4px rgba(255, 117, 20, 0.1);
}

.profile-details-form input:disabled {
  color: var(--muted);
  opacity: 0.72;
}

.profile-details-form small {
  color: var(--muted-2);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.profile-form-actions {
  display: flex;
  justify-content: flex-end;
}

.profile-page-menu {
  margin-top: 4px;
  border-top: 0;
}

.profile-details-form .profile-form-row {
  align-items: start;
}

.profile-page-menu button:last-child {
  border-bottom: 0;
}

@media (max-width: 980px) {
  .profile-page-layout,
  .profile-details-card > header {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .profile-page-hero {
    align-items: flex-start;
    padding: 22px;
  }

  .profile-status {
    display: none;
  }

  .profile-details-card {
    padding: 20px;
  }

  .profile-form-row {
    grid-template-columns: 1fr;
  }
}

.session-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  opacity: 0;
  place-items: center;
  align-content: center;
  gap: 12px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 117, 20, 0.1), transparent 24rem),
    #050505;
}

.session-loader img {
  width: min(190px, 48vw);
  max-height: 76px;
  padding: 9px 13px;
  object-fit: contain;
  border: 1px solid rgba(255, 117, 20, 0.22);
  border-radius: 14px;
  background: #f7f2eb;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
}

.session-loader span {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: #ff7514;
  border-radius: 50%;
  animation: session-loader-spin 700ms linear infinite;
}

.session-restoring .session-loader {
  display: none;
}

.session-restoring .auth-screen,
.session-restoring .client-app {
  visibility: hidden !important;
}

@keyframes session-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes session-loader-reveal {
  to {
    opacity: 1;
  }
}

/* Academy artwork is always framed as a true video cover. */
#academyView .course-cover {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
}

/* Calendario Human Legacy */
#calendarPage {
  display: grid;
  gap: 28px;
}

.calendar-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(30px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 117, 20, 0.2), transparent 31%),
    linear-gradient(135deg, #171717, #21140d);
  overflow: hidden;
}

.calendar-hero h2 {
  max-width: 850px;
  margin: 10px 0 12px;
  font-size: clamp(2rem, 3.8vw, 3.7rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.calendar-hero > div > p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
}

.calendar-view-tabs,
.calendar-filters {
  display: flex;
  align-items: center;
  gap: 6px;
}

.calendar-toolbar button {
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.calendar-toolbar button.active {
  color: #090909;
  background: linear-gradient(135deg, #ffb45d, #ff7514);
}

.calendar-content {
  min-width: 0;
}

.calendar-content.month-view {
  gap: 24px;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.event-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #1b1b1d;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease;
}

.event-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 117, 20, 0.55);
}

.event-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

.event-card-actions .primary-action,
.event-card-actions .ghost-action {
  min-height: 44px;
  text-decoration: none;
}

@media (max-width: 560px) {
  .event-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .event-card-actions .primary-action,
  .event-card-actions .ghost-action {
    width: 100%;
  }
}

.event-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #100e0d;
}

.event-poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #080808;
}

.event-poster-placeholder {
  display: flex;
  height: 100%;
  padding: 28px;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 117, 20, 0.35), transparent 28%),
    linear-gradient(155deg, #0a0a0a, #43200d);
}

.event-poster-placeholder span {
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.event-poster-placeholder strong {
  margin-top: 12px;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 0.98;
}

.event-type {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(8, 8, 8, 0.76);
  font-size: 0.72rem;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.event-card-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
}

.event-date-badge {
  display: flex;
  width: 54px;
  height: 62px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(255, 117, 20, 0.35);
  border-radius: 15px;
  background: rgba(255, 117, 20, 0.08);
}

.event-date-badge strong {
  font-size: 1.35rem;
}

.event-date-badge span {
  color: var(--orange);
  font-size: 0.68rem;
  font-weight: 900;
}

.event-card-copy {
  min-width: 0;
}

.event-card-copy h3 {
  margin: 5px 0 8px;
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}

.event-card-copy p {
  margin: 0 0 6px;
  color: var(--muted);
}

.event-card-copy .eyebrow {
  color: var(--orange);
  font-size: 0.67rem;
}

.event-card-copy .primary-action {
  min-height: 42px;
  margin-top: 14px;
  padding: 0 20px;
}

.calendar-months {
  display: grid;
  gap: 28px;
}

.calendar-month h3 {
  margin: 0 0 14px;
  text-transform: capitalize;
}

.calendar-month > button {
  display: grid;
  width: 100%;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.calendar-month > button > span:first-child {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 900;
}

.calendar-month > button > span:first-child strong {
  color: var(--text);
  font-size: 1.45rem;
}

.calendar-month > button > span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.calendar-month small {
  color: var(--muted);
}

.calendar-month b {
  color: var(--orange);
}

.month-calendar-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.month-calendar-head h2 {
  margin: 4px 0 0;
  text-transform: capitalize;
}

.month-calendar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.month-calendar-actions button {
  min-width: 46px;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: #181819;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.month-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--line);
  gap: 1px;
}

.month-weekday {
  padding: 12px 10px;
  color: var(--muted);
  background: #181819;
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

.month-day {
  min-width: 0;
  min-height: 128px;
  padding: 10px;
  background: #1d1d1f;
}

.month-day.outside {
  background: #161617;
}

.month-day > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
}

.month-day.outside > span {
  color: #69696d;
}

.month-day.today > span {
  color: #090909;
  background: var(--orange);
}

.month-day > div {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}

.month-day button {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  background: rgba(255, 117, 20, 0.12);
  text-align: left;
  cursor: pointer;
}

.month-day button i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
}

.month-day button b {
  min-width: 0;
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.month-day small {
  color: var(--muted);
  font-size: 0.68rem;
}

.event-reader {
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 50px);
  align-items: center;
}

.event-reader > img {
  width: 100%;
  max-height: 68vh;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  object-fit: contain;
  background: #080808;
}

.event-reader h2 {
  margin: 8px 0 14px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
}

.event-reader-date {
  color: var(--orange);
  font-weight: 850;
}

.event-member-access {
  padding: 12px 14px;
  border: 1px solid rgba(255, 117, 20, 0.24);
  border-radius: 12px;
  color: #d8d1ca;
  background: rgba(255, 117, 20, 0.06);
}

.event-reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.event-reader-actions a {
  text-decoration: none;
}

.admin-event-poster-preview {
  width: min(260px, 100%);
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  object-fit: contain;
  background: #080808;
}

@media (max-width: 1100px) {
  .event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .calendar-hero,
  .calendar-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-toolbar button {
    flex: 1;
    padding-inline: 12px;
  }

  .event-grid,
  .event-reader {
    grid-template-columns: 1fr;
  }

  .month-calendar-head {
    align-items: stretch;
    flex-direction: column;
  }

  .month-day {
    min-height: 72px;
    padding: 6px;
  }

  .month-day button b {
    display: none;
  }

  .month-day button {
    width: 16px;
    height: 8px;
    padding: 0;
    background: transparent;
  }
}

#academyView .academy-continue-section {
  margin-top: 0;
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  width: 100%;
}

.dashboard-community-panel {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.dashboard-community-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-community-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  cursor: pointer;
}

.dashboard-community-thumb {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.dashboard-community-card > div:last-child {
  display: grid;
  height: 100%;
  align-content: start;
  gap: 10px;
  padding: 20px 22px 22px;
}

.dashboard-community-card h3,
.dashboard-community-card p {
  margin: 0;
}

.dashboard-community-card p {
  color: var(--muted);
  font-size: 0.86rem;
}

.dashboard-community-card .dashboard-community-excerpt {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.5;
}

.dashboard-community-card .text-link {
  justify-self: start;
  margin-top: auto;
  padding-top: 8px;
}

#dashboardView #featuredCourse {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  contain: inline-size;
}

#dashboardView #featuredCourse .featured-card {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 32 / 9;
}

#dashboardView #featuredCourse .featured-card .course-cover {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch;
  border-radius: 0;
  aspect-ratio: 16 / 9;
}

#dashboardView #featuredCourse .featured-card > div:last-child {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: clamp(24px, 3vw, 44px);
}

#dashboardView #featuredCourse .academy-card-content {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

#dashboardView #featuredCourse .academy-card-content h3,
#dashboardView #featuredCourse .academy-card-content p {
  width: 100%;
  max-width: 100%;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

#dashboardView #featuredCourse .academy-card-content h3 {
  font-size: clamp(1.65rem, 2.65vw, 2.8rem);
  line-height: 1.02;
  word-break: normal;
}

#dashboardView #featuredCourse .course-duration {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 850;
}

#dashboardView #featuredCourse .academy-card-progress {
  display: grid;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  gap: 8px;
  margin-top: 6px;
}

#dashboardView #featuredCourse .academy-card-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

#dashboardView #featuredCourse .primary-action {
  min-width: 112px;
  margin-top: 12px;
}

@media (max-width: 980px) {
  .dashboard-community-grid {
    grid-template-columns: 1fr;
  }

  #dashboardView #featuredCourse .featured-card {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    gap: 22px;
    padding: 18px;
  }

  #dashboardView #featuredCourse .featured-card .course-cover {
    height: auto !important;
    border-radius: 18px;
  }
}

.course-logo-cover {
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 52px);
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.96), rgba(242, 235, 225, 0.94)),
    #f4eee5;
}

.course-logo-cover::after {
  display: none;
}

.course-logo-cover img {
  display: block;
  width: min(76%, 360px);
  max-height: 72%;
  object-fit: contain;
}

/* Academy cards share one layout system and never leave dead space below covers. */
#academyView .academy-continue-rail .featured-card {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 32 / 9;
}

#academyView .academy-continue-rail .featured-card .course-cover {
  height: 100% !important;
  align-self: stretch;
  border-radius: 0;
}

#academyView .academy-continue-rail .featured-card > div:last-child {
  min-width: 0;
  padding: clamp(24px, 3vw, 44px);
}

#academyView .masterclass-course-grid {
  align-items: start;
}

#academyView .masterclass-course-grid .course-card {
  height: auto;
  min-height: 0;
  grid-template-rows: auto auto;
  cursor: pointer;
}

#academyView .masterclass-course-grid .course-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 22px;
}

#academyView .masterclass-course-grid .course-body h3 {
  margin: 0;
}

#academyView .masterclass-course-grid .course-speakers {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

#academyView .course-duration {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 850;
}

#academyView .academy-card-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

#academyView .academy-card-content h3,
#academyView .academy-card-content p {
  margin: 0;
}

#academyView .course-card .primary-action,
#academyView .featured-card .primary-action {
  min-width: 112px;
  margin-top: 12px;
}

#academyView .academy-card-progress {
  display: grid;
  width: 100%;
  gap: 8px;
  margin-top: 6px;
}

#academyView .academy-card-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

#academyView .academy-card-progress .progress-track {
  width: 100%;
  height: 7px;
}

#academyView .course-card .primary-action {
  width: 100%;
  margin-top: 12px;
}

#academyView .course-card:focus-visible,
#academyView .featured-card:focus-visible {
  outline: 3px solid rgba(255, 139, 43, 0.72);
  outline-offset: 4px;
}

@media (max-width: 1100px) {
  #academyView .academy-continue-rail .featured-card {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    gap: 22px;
    padding: 18px;
  }

  #academyView .academy-continue-rail .featured-card .course-cover {
    height: auto !important;
    border-radius: 18px;
  }
}

.course-player-grid {
  align-items: start;
}

#courseView .course-masterclass-head {
  gap: 22px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 22px;
}

#courseView .course-masterclass-head h1 {
  max-width: 720px;
  margin: 4px 0 8px;
  font-size: clamp(1.9rem, 2.8vw, 3rem);
  line-height: 1.02;
}

#courseView .course-masterclass-head > div:last-child {
  padding-block: 8px;
}

#courseView .lesson-video-description {
  max-width: 820px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.course-player-grid .lesson-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.course-player-grid .lesson-list {
  max-height: none;
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 980px) {
  .course-player-grid .lesson-sidebar {
    height: auto !important;
    max-height: none;
    overflow: visible;
  }

  .course-player-grid .lesson-list {
    max-height: 420px;
  }
}

@media (max-width: 760px) {
  #academyView .masterclass-course-grid .course-body {
    min-height: 0;
  }
}

/* Community aligned to the established 3BX social-feed structure. */
#communityPage {
  display: grid;
  gap: 20px;
}

#communityPage .community-hero {
  min-height: 168px;
  padding: clamp(25px, 3vw, 36px);
  border-radius: 24px;
}

#communityPage .community-hero h2 {
  margin: 5px 0 10px;
  font-size: clamp(2rem, 3vw, 3rem);
}

#communityPage .community-live {
  min-width: 96px;
  justify-content: center;
  padding: 13px 18px;
  border-color: rgba(76, 216, 131, 0.3);
  color: #88e5ad;
  background: rgba(76, 216, 131, 0.1);
  text-transform: uppercase;
}

#communityPage .community-stories {
  min-height: 104px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 117, 20, 0.2);
  border-radius: 22px;
  background: var(--panel);
}

#communityPage .community-story-empty {
  align-self: center;
  color: var(--muted);
  font-weight: 720;
}

#communityPage .community-feed-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--hl-line);
  border-radius: 20px;
  background: var(--panel);
}

#communityPage .community-feed-tabs button {
  min-height: 54px;
  border-radius: 15px;
  text-transform: uppercase;
}

#communityPage .community-feed-tabs button.active {
  color: #140a03;
  background: linear-gradient(110deg, #ff7414, #ffad62);
  box-shadow: 0 12px 28px rgba(255, 117, 20, 0.2);
}

.community-permission-note {
  padding: 22px 26px;
  border: 1px solid var(--hl-line);
  border-radius: 20px;
  color: var(--muted);
  background: var(--panel);
  font-weight: 690;
  line-height: 1.5;
}

.community-layout.community-layout-single {
  display: block;
}

.community-layout-single .community-feed {
  width: 100%;
  max-width: none;
}

.community-layout-single .community-post {
  padding: clamp(22px, 3vw, 32px);
  border-radius: 24px;
}

.community-layout-single .community-post > footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 22px;
  padding-top: 13px;
  border-top: 1px solid var(--hl-line);
}

.community-layout-single .community-post > footer button {
  justify-content: center;
  min-height: 42px;
  text-transform: uppercase;
}

.community-shared-link,
.community-event-link {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 14px 17px;
  border: 1px solid rgba(255, 117, 20, 0.3);
  border-radius: 14px;
  color: var(--gold-soft);
  background: rgba(255, 117, 20, 0.07);
  font-weight: 820;
  text-decoration: none;
}

.community-poll {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.community-poll button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 15px;
  border: 1px solid var(--hl-line);
  border-radius: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
  text-align: left;
}

.community-poll button.active {
  border-color: rgba(255, 117, 20, 0.55);
  background: rgba(255, 117, 20, 0.1);
}

.community-poll button strong {
  color: var(--gold-soft);
}

@media (max-width: 640px) {
  #communityPage .community-hero {
    min-height: 0;
  }

  #communityPage .community-feed-tabs button,
  .community-layout-single .community-post > footer button {
    font-size: 0.72rem;
  }

  .community-permission-note {
    padding: 18px;
  }
}

/* Fixed rail layout: the main area always owns the remaining viewport width */
@media (min-width: 641px) {
  .client-app,
  .client-app.sidebar-collapsed {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .client-main {
    width: calc(100% - 258px) !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100dvh;
    margin: 0 0 0 258px !important;
    transition:
      width 220ms ease,
      margin-left 220ms ease;
  }

  .sidebar-collapsed .client-main {
    width: calc(100% - 82px) !important;
    margin-left: 82px !important;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .client-topbar {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .topbar-actions {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .account-action .account-copy {
    display: none;
  }

  .welcome-panel {
    grid-template-columns: 1fr !important;
  }

  .welcome-panel .primary-action {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .sidebar-menu-title,
  .sidebar-logout {
    display: none;
  }
}

/* Mobile/tablet dock: compatto, leggibile e coerente con il linguaggio Human Legacy */
@media (max-width: 900px) {
  .client-sidebar,
  .sidebar-collapsed .client-sidebar {
    inset:
      auto
      12px
      max(10px, env(safe-area-inset-bottom))
      12px !important;
    height: 72px !important;
    padding: 7px !important;
    overflow: hidden !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    border-radius: 28px !important;
    background: rgba(38, 29, 24, 0.82) !important;
    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.62),
      0 0 34px rgba(255, 117, 20, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(255, 117, 20, 0.1) !important;
    backdrop-filter: blur(30px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.5) !important;
  }

  .client-nav {
    position: relative;
    display: flex !important;
    height: 58px !important;
    gap: 0 !important;
    isolation: isolate;
    overflow: hidden;
    border: 0 !important;
    border-radius: 22px;
    background: transparent !important;
    box-shadow: none !important;
  }

  .client-nav::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(20% - 4px);
    border: 1px solid rgba(255, 197, 139, 0.34);
    border-radius: 21px;
    background:
      radial-gradient(circle at 30% 12%, rgba(255, 255, 255, 0.36), transparent 38%),
      linear-gradient(145deg, rgba(255, 181, 99, 0.66), rgba(255, 100, 6, 0.62)),
      rgba(255, 117, 20, 0.3);
    box-shadow:
      0 10px 25px rgba(255, 94, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.44),
      inset 0 -8px 20px rgba(197, 62, 0, 0.14);
    backdrop-filter: blur(22px) saturate(1.55);
    -webkit-backdrop-filter: blur(22px) saturate(1.55);
    transform: translateZ(0);
    transition:
      left 520ms cubic-bezier(0.16, 1, 0.3, 1),
      width 320ms cubic-bezier(0.22, 1, 0.36, 1),
      border-radius 320ms ease,
      background 320ms ease;
    will-change: left, width;
  }

  .client-nav:has(button:nth-child(2).active)::before {
    left: calc(20% + 2px);
  }

  .client-nav:has(button:nth-child(3).active)::before {
    left: calc(40% + 2px);
  }

  .client-nav:has(button:nth-child(4).active)::before {
    left: calc(60% + 2px);
  }

  .client-nav:has(button:nth-child(5).active)::before {
    left: calc(80% + 2px);
  }

  .client-nav:has(button:active)::before {
    border-radius: 25px 18px 25px 18px;
    filter: saturate(1.18) brightness(1.06);
  }

  .client-nav button,
  .sidebar-collapsed .client-nav button {
    position: relative;
    z-index: 1;
    flex: 0 0 20% !important;
    width: 20% !important;
    max-width: 20% !important;
    min-height: 58px !important;
    padding: 5px 1px 4px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 2px !important;
    border: 0 !important;
    border-radius: 22px !important;
    color: rgba(255, 248, 241, 0.58) !important;
    transition:
      color 260ms ease,
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .client-nav button.active {
    flex: 0 0 20% !important;
    width: 20% !important;
    max-width: 20% !important;
    gap: 2px !important;
    color: #fffaf5 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none;
  }

  .nav-glyph,
  .sidebar-collapsed .nav-glyph {
    width: 31px !important;
    height: 31px !important;
    flex: 0 0 31px !important;
    border-radius: 10px !important;
    transition:
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
      background 260ms ease !important;
  }

  .client-nav button.active .nav-glyph {
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    transform: scale(1.1);
  }

  .nav-glyph img {
    width: 20px !important;
    height: 20px !important;
  }

  .client-nav .nav-label {
    display: block !important;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.78;
    transition:
      opacity 260ms ease,
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .client-nav button.active .nav-label {
    display: block !important;
    opacity: 1;
    font-weight: 900;
    transform: none;
  }

  .client-main,
  .sidebar-collapsed .client-main {
    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .client-nav::before,
  .client-nav button,
  .client-nav .nav-glyph,
  .client-nav .nav-label {
    transition-duration: 1ms !important;
  }
}

/* Sidebar UX fixes: full-height shell and reliable compact state */
@media (min-width: 901px) {
  .client-nav {
    width: 100% !important;
    align-self: stretch !important;
  }

  .client-nav button {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  .client-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    width: 258px;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 117, 20, 0.35) transparent;
    transition:
      width 220ms ease,
      padding 220ms ease;
  }

  .client-sidebar::-webkit-scrollbar {
    width: 4px;
  }

  .client-sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 117, 20, 0.35);
  }

  .sidebar-collapsed .client-sidebar {
    width: 82px;
  }

  .sidebar-profile {
    width: 100%;
    min-width: 0;
    align-items: center;
  }

  .sidebar-profile > div {
    min-width: 0;
  }

  .sidebar-profile strong {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .sidebar-profile span:not(.avatar) {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-logout {
    flex: 0 0 auto;
    width: 100%;
  }

  .sidebar-logout > span:first-child {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .sidebar-collapsed .client-sidebar {
    gap: 14px !important;
  }

  .sidebar-collapsed .sidebar-toggle {
    flex: 0 0 auto;
    margin: 0 !important;
  }

  .sidebar-collapsed .client-nav {
    width: 100%;
  }

  .sidebar-collapsed .client-nav button {
    width: 100%;
    min-height: 48px !important;
    border-radius: 13px !important;
  }

  .sidebar-collapsed .client-nav button.active {
    box-shadow: none !important;
  }

  .sidebar-collapsed .nav-glyph {
    flex: 0 0 38px;
  }

  .sidebar-collapsed .sidebar-profile {
    width: 100%;
    margin-top: auto;
    padding-top: 14px;
  }

  .sidebar-collapsed .sidebar-profile .avatar {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .sidebar-collapsed .sidebar-logout {
    display: flex !important;
    width: 100%;
    justify-content: center !important;
  }
}

/* Admin visual system: una gerarchia unica per tutte le sezioni. */
body.admin-session {
  --admin-card: #121212;
  --admin-card-soft: #171717;
  --admin-stroke: rgba(255, 255, 255, 0.105);
}

body.admin-session .admin-editor {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.admin-session .admin-section-header {
  min-height: 132px;
  align-items: end;
  margin-bottom: 2px;
  padding: 26px 30px;
  border: 1px solid rgba(255, 117, 20, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 117, 20, 0.16), transparent 21rem),
    linear-gradient(135deg, #17110d, #0e0e0e 62%);
}

body.admin-session .admin-section-header h2 { margin: 4px 0 7px; font-size: clamp(1.8rem, 2.7vw, 2.7rem); }
body.admin-session .admin-section-header p:last-child { max-width: 56ch; margin: 0; color: var(--muted); }
body.admin-session .admin-editor-grid { gap: 16px; }

body.admin-session :is(.admin-academy-simple, .admin-events-simple, .admin-community-simple, .admin-news-simple) {
  display: grid;
  gap: 20px;
  min-width: 0;
}

body.admin-session :is(.admin-academy-simple, .admin-events-simple, .admin-community-simple, .admin-users-simple) > .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 132px;
  margin: 0;
  padding: 24px 26px;
  border: 1px solid var(--admin-stroke);
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 10%, rgba(255, 117, 20, 0.12), transparent 16rem),
    linear-gradient(145deg, #17130f, #101010 68%);
}

body.admin-session :is(.admin-academy-simple, .admin-events-simple, .admin-community-simple, .admin-users-simple) > .section-heading > .primary-action {
  width: auto;
  min-width: 172px;
  min-height: 48px;
  margin: 0;
  padding-inline: 24px;
  white-space: nowrap;
}

body.admin-session :is(.admin-academy-simple, .admin-events-simple, .admin-community-simple, .admin-users-simple) > .section-heading h2 {
  margin: 4px 0 7px;
  font-size: clamp(1.55rem, 2vw, 2.15rem);
}

body.admin-session :is(.admin-academy-simple, .admin-events-simple, .admin-community-simple, .admin-users-simple) > .section-heading p:last-child {
  margin: 0;
  color: var(--muted);
}

body.admin-session :is(.admin-course-card-grid, .admin-event-card-grid, .admin-community-card-grid) {
  gap: 14px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

body.admin-session :is(.admin-course-library-card, .admin-event-library-card, .admin-community-library-card) {
  height: 100%;
  overflow: hidden;
  border-color: var(--admin-stroke);
  border-radius: 20px;
  background: linear-gradient(155deg, #191919, #111 65%);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
}

body.admin-session .admin-course-library-card { min-height: 310px; }
body.admin-session .admin-event-library-card { min-height: 340px; }
body.admin-session .admin-community-library-card { min-height: 290px; }

body.admin-session :is(.admin-course-library-card, .admin-event-library-card, .admin-community-library-card):hover {
  border-color: rgba(255, 117, 20, 0.5);
  background: linear-gradient(155deg, #211710, #121212 65%);
  transform: translateY(-3px);
}

body.admin-session :is(.admin-course-library-card, .admin-event-library-card, .admin-community-library-card) > i {
  color: var(--gold-soft);
  font-size: 0.78rem;
}

body.admin-session .admin-form {
  gap: 16px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--admin-stroke);
  border-radius: 20px;
  background: linear-gradient(145deg, #1a1a1c, #111);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.18);
}

body.admin-session .admin-form > .eyebrow:first-child { margin-bottom: -4px; }
body.admin-session .admin-form h2 { margin: 0 0 4px; font-size: clamp(1.45rem, 2vw, 2rem); }
body.admin-session .admin-form label { gap: 8px; color: #bcb7b1; font-size: 0.73rem; font-weight: 780; }

body.admin-session .admin-form :is(input:not([type="checkbox"]), select, textarea) {
  border-color: rgba(255, 255, 255, 0.115);
  border-radius: 12px;
  background: #0c0c0d;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

body.admin-session .admin-form :is(input:not([type="checkbox"]), select, textarea):focus {
  border-color: rgba(255, 117, 20, 0.72);
  outline: 3px solid rgba(255, 117, 20, 0.09);
}

body.admin-session .admin-form textarea { min-height: 118px; resize: vertical; }
body.admin-session .admin-form .primary-action { min-height: 46px; border-radius: 12px; }
body.admin-session .admin-form .ghost-action { min-height: 42px; border-radius: 11px; }
body.admin-session .admin-form-row { gap: 12px; }

/* Select coerenti con gli altri campi su Safari, Chrome e mobile. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 44px 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background-color: rgba(5, 7, 11, 0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ff7514' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  font: inherit;
  color-scheme: dark;
  cursor: pointer;
}

select:not([multiple]):disabled {
  cursor: default;
}

select option {
  color: var(--text);
  background: #151516;
}

body.admin-session .admin-form select:not([multiple]) {
  min-height: 48px;
  border-color: rgba(255, 255, 255, 0.115);
  border-radius: 12px;
  background-color: #0c0c0d;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.custom-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.custom-select > select {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.custom-select-trigger {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  padding: 0 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgba(5, 7, 11, 0.92);
  font: inherit;
  font-size: .92rem;
  text-align: left;
}

.custom-select-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-trigger i {
  display: grid;
  height: 60%;
  place-items: center;
  border-left: 1px solid rgba(255, 117, 20, 0.24);
}

.custom-select-trigger i::before {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  content: "";
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

.custom-select.open .custom-select-trigger {
  border-color: rgba(255, 117, 20, 0.72);
  outline: 3px solid rgba(255, 117, 20, 0.09);
}

.custom-select.open .custom-select-trigger i::before {
  transform: translateY(3px) rotate(225deg);
}

.custom-select-list {
  position: absolute;
  z-index: 120;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  display: none;
  max-height: 260px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid rgba(255, 117, 20, 0.28);
  border-radius: 13px;
  background: #111113;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.48);
}

.custom-select.open .custom-select-list {
  display: grid;
  gap: 3px;
}

.custom-select-option {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: .92rem;
  text-align: left;
}

.custom-select-option:hover,
.custom-select-option:focus-visible {
  outline: 0;
  background: rgba(255, 117, 20, 0.12);
}

.custom-select-option.selected {
  color: #080808;
  background: linear-gradient(135deg, #ffb063, #ff7514);
  font-weight: 820;
}

body.admin-session .admin-form .custom-select-trigger {
  border-color: rgba(255, 255, 255, 0.115);
  border-radius: 12px;
  background: #0c0c0d;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

body.admin-session .admin-course-settings {
  overflow: hidden;
  border: 1px solid var(--admin-stroke);
  border-radius: 18px;
  background: var(--admin-card);
}

body.admin-session .admin-course-settings summary { padding: 18px 20px; color: var(--text); font-weight: 820; }
body.admin-session .admin-course-settings .admin-form { border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
body.admin-session .admin-lessons-simple-head { padding: 20px 22px; border: 1px solid var(--admin-stroke); border-radius: 18px; background: var(--admin-card); }
body.admin-session .admin-lesson-list { padding: 8px; border: 1px solid var(--admin-stroke); border-radius: 18px; background: #0e0e0e; }
body.admin-session .admin-lesson-list button { border-radius: 12px; }
body.admin-session .admin-lesson-list button.active { border-color: rgba(255, 117, 20, 0.45); background: rgba(255, 117, 20, 0.12); }

body.admin-session .admin-editor-grid:not(.academy-admin-grid) > :is(.admin-form, section.admin-form) {
  min-width: 0;
}

body.admin-session .admin-editor-grid:not(.academy-admin-grid) > section.admin-form .notification-list article,
body.admin-session .admin-community-list article {
  border-color: var(--admin-stroke);
  background: #0e0e0f;
}

body.admin-session .admin-overview,
body.admin-session .admin-table,
body.admin-session .admin-users-simple {
  border-color: var(--admin-stroke);
  background: linear-gradient(145deg, #151515, #0f0f0f);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.15);
}

body.admin-session .admin-table article { min-height: 72px; padding-block: 16px; }
body.admin-session .empty-state { min-height: 170px; border: 1px dashed rgba(255, 117, 20, 0.25); border-radius: 18px; background: rgba(255, 117, 20, 0.025); }
body.admin-session .text-link { width: fit-content; min-height: 38px; padding: 0 4px; color: var(--gold-soft); font-weight: 800; }
body.admin-session .badge { border-radius: 999px; }

body.admin-session .confirm-dialog,
body.admin-session .admin-live-preview { display: grid; gap: 18px; }
body.admin-session .confirm-dialog h2,
body.admin-session .admin-live-preview h2 { margin: 0; }
body.admin-session .confirm-dialog > p:not(.eyebrow),
body.admin-session .admin-live-preview > p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.65; }
body.admin-session .admin-live-preview img { width: 100%; max-height: 340px; border-radius: 16px; object-fit: cover; }
body.admin-session .admin-live-preview .badge { width: fit-content; }

body.admin-session .admin-analytics-chart { display: grid; gap: 20px; }
body.admin-session .admin-chart-bars { display: grid; gap: 12px; }
body.admin-session .admin-chart-bars article { display: grid; grid-template-columns: minmax(160px, 0.48fr) minmax(160px, 1fr) 46px; align-items: center; gap: 16px; padding: 12px 0; }
body.admin-session .admin-chart-bars article > div { display: grid; gap: 4px; min-width: 0; }
body.admin-session .admin-chart-bars strong,
body.admin-session .admin-chart-bars small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.admin-session .admin-chart-bars small { color: var(--muted); }
body.admin-session .admin-chart-bars article > span { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.07); }
body.admin-session .admin-chart-bars article > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff7514, #ffad66); }
body.admin-session .admin-chart-bars b { color: var(--gold-soft); text-align: right; }

body.admin-session .admin-search-results { display: grid; gap: 22px; }
body.admin-session .admin-search-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.admin-session .admin-search-groups > section { overflow: hidden; border: 1px solid var(--admin-stroke); border-radius: 18px; background: var(--admin-card); }
body.admin-session .admin-search-groups header { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; border-bottom: 1px solid var(--admin-stroke); }
body.admin-session .admin-search-groups header span { display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 999px; color: var(--gold-soft); background: rgba(255,117,20,.12); font-size: .7rem; font-weight: 850; }
body.admin-session .admin-search-groups button { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 18px; border: 0; border-bottom: 1px solid var(--admin-stroke); color: var(--text); background: transparent; text-align: left; cursor: pointer; }
body.admin-session .admin-search-groups button:last-child { border-bottom: 0; }
body.admin-session .admin-search-groups button:hover { background: rgba(255,117,20,.07); }
body.admin-session .admin-search-groups button i { color: var(--gold-soft); font-style: normal; white-space: nowrap; }

@media (max-width: 900px) {
  body.admin-session .admin-section-header { min-height: 0; padding: 22px; }
  body.admin-session .admin-editor-grid { grid-template-columns: 1fr; }
  body.admin-session .admin-form-row,
  body.admin-session .admin-form-row.two { grid-template-columns: 1fr; }
  body.admin-session .admin-chart-bars article { grid-template-columns: 1fr auto; }
  body.admin-session .admin-chart-bars article > span { grid-column: 1 / -1; grid-row: 2; }
  body.admin-session .admin-search-groups { grid-template-columns: 1fr; }
}

/* Il backoffice riusa integralmente la shell dell'area cliente. */
body.admin-session .client-app,
body.admin-session .client-app.sidebar-collapsed {
  display: grid !important;
}

body.admin-session .client-sidebar {
  display: flex !important;
}

body.admin-session .client-main,
body.admin-session .sidebar-collapsed .client-main {
  min-height: 100dvh;
}

body.admin-session .client-topbar .notification-button {
  display: none !important;
}

body.admin-session #logoutButton {
  display: none !important;
}

@media (max-width: 900px) {
  body.admin-session .client-main {
    padding-bottom: 24px !important;
  }

  body.admin-session .client-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
  }
}

/* Backoffice: controlli operativi compatti, coerenti e touch-friendly. */
.admin-form input[type="file"] {
  min-height: 48px;
  padding: 8px;
  border-style: dashed;
  color: var(--muted);
  cursor: pointer;
}

.admin-form input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 10px;
  padding: 0 14px;
  border: 1px solid rgba(255, 117, 20, 0.38);
  border-radius: 999px;
  background: rgba(255, 117, 20, 0.13);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.admin-community-list {
  display: grid;
  gap: 12px;
}

.admin-community-list article {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
}

.admin-community-list article > div {
  min-width: 0;
}

.admin-community-list p,
.admin-community-list small {
  margin: 5px 0 0;
  color: var(--muted);
}

.admin-community-list p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-form button:disabled,
.admin-editor button:disabled {
  opacity: 0.55;
  cursor: wait;
}

@media (max-width: 900px) {
  .admin-community-list article {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-community-list .danger-action {
    width: 100%;
  }
}

/* Il controllo consenso non deve ereditare le dimensioni dei campi testuali. */
.auth-screen .auth-form .consent-check input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 166, 94, 0.62) !important;
  border-radius: 6px !important;
  background-color: rgba(255, 255, 255, 0.055) !important;
  box-shadow: none !important;
}

.auth-screen .auth-form .consent-check input[type="checkbox"]:checked {
  border-color: var(--orange) !important;
  background-color: var(--orange) !important;
}

@media (min-width: 761px) {
  .auth-screen {
    background:
      linear-gradient(120deg, rgba(255, 117, 20, 0.18), transparent 38%),
      linear-gradient(180deg, #15100d, #050505);
  }

  .auth-screen .auth-brand {
    background: transparent;
  }
}

/* Shell derived from the proven 3BX backoffice grid pattern */
@media (min-width: 901px) {
  .client-app,
  .client-app.sidebar-collapsed {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh;
    align-items: stretch;
    overflow: visible;
  }

  .client-app {
    grid-template-columns: 258px minmax(0, 1fr) !important;
  }

  .client-app.sidebar-collapsed {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  .client-sidebar,
  .sidebar-collapsed .client-sidebar {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    align-self: start;
  }

  .client-main,
  .sidebar-collapsed .client-main {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 720px) {
  body.admin-session :is(.admin-academy-simple, .admin-events-simple, .admin-community-simple, .admin-users-simple) > .section-heading {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    padding: 22px;
  }

  body.admin-session :is(.admin-academy-simple, .admin-events-simple, .admin-community-simple, .admin-users-simple) > .section-heading > .primary-action {
    width: 100%;
  }
}
.profile-status.vip,
.badge.vip {
  color: #241500;
  background: linear-gradient(135deg, #ffd978, #ff9f43);
  border-color: rgba(255, 183, 77, 0.65);
  box-shadow: 0 8px 24px rgba(255, 145, 38, 0.18);
}

.referral-card input {
  width: 100%;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: inherit;
  background: rgba(255, 255, 255, 0.05);
}

.admin-referral-list {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.admin-referral-list article {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-referral-list article span {
  color: var(--muted, #9c9c9c);
  text-align: right;
}

.vip-dashboard-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 24px;
  margin: 0 0 24px;
  padding: 28px;
  border: 1px solid rgba(255, 185, 74, 0.28);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 153, 44, 0.14), rgba(15, 15, 15, 0.98) 58%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.vip-dashboard-card h2 { margin: 12px 0 8px; }
.vip-dashboard-card p { color: var(--muted, #a7a7a7); }

.vip-referral-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vip-referral-metrics article {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.vip-referral-metrics strong,
.vip-referral-metrics span { display: block; }
.vip-referral-metrics strong { font-size: 1.55rem; }
.vip-referral-metrics span { color: var(--muted, #a7a7a7); }

.vip-referral-action {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
}

.vip-referral-action input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: inherit;
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 760px) {
  .vip-dashboard-card { grid-template-columns: 1fr; padding: 20px; }
  .vip-referral-action { flex-direction: column; }
  .admin-referral-list article { flex-direction: column; }
  .admin-referral-list article span { text-align: left; }
}

/* Responsive audit fixes: accessible authentication actions and complete admin dock. */
@media (max-width: 760px) {
  .auth-screen .auth-form > .text-link {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    justify-self: stretch;
  }

  .auth-screen .consent-check {
    min-height: 44px;
    align-content: center;
  }

  .auth-screen #forgotPasswordButton {
    min-height: 44px;
  }

  .auth-screen .legal-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 2px 10px 8px;
  }

  .auth-screen .legal-links a {
    display: inline-flex;
    min-width: 88px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }
}

@media (max-width: 900px) {
  body.admin-session .client-app,
  body.admin-session .client-app.sidebar-collapsed {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
  }

  body.admin-session .client-main,
  body.admin-session .sidebar-collapsed .client-main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.admin-session .client-nav {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  body.admin-session .client-nav::-webkit-scrollbar {
    display: none;
  }

  body.admin-session .client-nav::before {
    display: none;
  }

  body.admin-session .client-nav button,
  body.admin-session .sidebar-collapsed .client-nav button,
  body.admin-session .client-nav button.active {
    flex: 0 0 76px !important;
    width: 76px !important;
    max-width: 76px !important;
    scroll-snap-align: center;
  }

  body.admin-session .client-nav button.active {
    background: linear-gradient(145deg, rgba(255, 181, 99, 0.68), rgba(255, 100, 6, 0.58)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  }

  body.admin-session .client-nav button.active .nav-glyph {
    background: rgba(255, 255, 255, 0.12) !important;
  }

body.admin-session .client-nav .nav-label {
    font-size: 0.6rem;
  }
}

/* Preserve a real 44px touch target after fractional responsive scaling. */
.auth-screen #forgotPasswordButton {
  min-height: 46px;
}

@media (max-width: 760px) {
  .auth-screen .auth-form > .text-link,
  .auth-screen #forgotPasswordButton,
  .auth-screen .legal-links a {
    min-height: 46px;
  }
}

@media (max-width: 900px) {
  body:not(.admin-session) .client-sidebar:has(.vip-upgrade-entry:not(.hidden)) {
    overflow: visible !important;
  }

  body:not(.admin-session) .vip-upgrade-entry:not(.hidden) {
    position: fixed !important;
    z-index: 30 !important;
    right: 14px !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    width: auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 8px 14px 8px 9px !important;
    border-radius: 999px !important;
  }
}