* { box-sizing: border-box; }
[hidden] { display:none !important; }
:root { --blue:#075eea; --blue-dark:#061d49; --teal:#0f766e; --ink:#071736; --muted:#64748b; --bg:#f5f8ff; --card:#fff; --line:#dbe7ff; --soft:#eef5ff; }
body { margin:0; font-family:Inter, Arial, Helvetica, sans-serif; background:radial-gradient(circle at top right,#d7e8ff 0,#f7fbff 28%,#eef5ff 100%); color:var(--ink); }
button, input, textarea, select { font:inherit; }
.topbar {
  position:sticky;
  top:0;
  z-index:20;
  max-width:1220px;
  margin:12px auto 0;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(219,231,255,.78);
  border-radius:18px;
  background:rgba(255,255,255,.76);
  box-shadow:0 18px 54px rgba(6,29,73,.10);
  backdrop-filter:blur(18px);
}
.brand { display:flex; align-items:center; gap:11px; color:var(--blue); min-width:0; }
.brand strong { display:block; font-size:25px; line-height:1; letter-spacing:-.045em; }
.brand span { display:block; color:var(--muted); font-size:13px; }
.logo-mark { width:46px; height:46px; flex:0 0 auto; border-radius:14px; display:block; box-shadow:0 14px 30px rgba(7,94,234,.18); }
.ai-gem {
  width:28px;
  height:28px;
  display:inline-block;
  flex:0 0 auto;
  clip-path:polygon(50% 0, 61% 32%, 100% 50%, 61% 68%, 50% 100%, 39% 68%, 0 50%, 39% 32%);
  background:linear-gradient(135deg, #ffffff 0%, #8bd1ff 34%, #2adca6 100%);
  box-shadow:0 0 22px rgba(42,220,166,.38), 0 0 36px rgba(139,209,255,.28);
}
.brand-gem {
  width:18px;
  height:18px;
  background:linear-gradient(135deg, var(--blue) 0%, #2adca6 100%);
  box-shadow:0 0 18px rgba(42,220,166,.28);
}
.nav { display:flex; gap:4px; padding:4px; background:rgba(248,251,255,.86); border:1px solid var(--line); border-radius:16px; }
.nav-btn { border:0; background:transparent; border-radius:12px; padding:10px 14px; cursor:pointer; color:var(--muted); font-weight:800; }
.nav-btn.active { background:var(--blue); color:white; box-shadow:0 10px 24px rgba(7,94,234,.22); }
.auth-box { display:flex; align-items:center; gap:10px; }
.auth-box span { color:var(--muted); font-size:13px; font-weight:800; max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.login-btn,.primary,.secondary,.link-button { border:0; border-radius:999px; padding:12px 16px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.login-btn,.primary { background:var(--blue); color:white; box-shadow:0 12px 26px rgba(7,94,234,.20); }
.secondary { background:white; color:var(--blue-dark); border:1px solid var(--line); }
main { max-width:1220px; margin:0 auto; padding:10px 24px 34px; }
.view { display:none; } .view.active { display:block; }
.hero {
  min-height:680px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:24px;
  align-items:end;
  padding:54px;
  border:1px solid rgba(141,166,205,.22);
  border-radius:14px;
  background:
    radial-gradient(circle at 16% 20%, rgba(45,140,255,.34), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(15,118,110,.26), transparent 34%),
    linear-gradient(90deg, rgba(6,17,31,.98) 0%, rgba(7,23,54,.9) 42%, rgba(7,23,54,.32) 70%, rgba(7,23,54,.1) 100%),
    url("./assets/mentor-ia-hero.png") center / cover no-repeat;
  box-shadow:0 30px 90px rgba(6,17,31,.24);
}
.hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:28%;
  background:linear-gradient(180deg, rgba(6,17,31,0), rgba(6,17,31,.56));
  pointer-events:none;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 22%, rgba(255,255,255,.03));
  pointer-events:none;
}
.hero-copy,
.hero-card {
  position:relative;
  z-index:1;
}
.hero-copy { max-width:640px; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--blue); font-weight:900; margin:0 0 12px; }
.eyebrow.stacked { margin-top:12px; }
.hero-kicker { display:flex; align-items:center; gap:10px; }
.hero h1, .admin-shell h1 { font-size:56px; line-height:1; letter-spacing:-.06em; margin:0 0 18px; max-width:650px; }
.lead { font-size:20px; line-height:1.5; color:var(--muted); max-width:680px; margin:0; } .lead.small { font-size:16px; }
.hero .eyebrow,
.hero h1,
.hero .lead { color:white; }
.hero .lead { opacity:.78; }
.actions { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.audience-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:24px; max-width:540px; }
.audience-card { background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.075)); border:1px solid rgba(219,231,255,.24); border-radius:12px; padding:18px; box-shadow:0 18px 54px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.16); backdrop-filter:blur(14px); }
.audience-card span { display:inline-flex; margin-bottom:8px; color:#7cc7ff; font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.audience-card strong { display:block; color:white; font-size:18px; line-height:1.18; letter-spacing:-.02em; }
.audience-card p { margin:7px 0 0; color:white; opacity:.7; line-height:1.4; font-size:14px; }
.hero-card { position:absolute; right:24px; bottom:24px; width:min(430px, 38vw); justify-self:end; margin:0; background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:0 24px 70px rgba(6,29,73,.18); display:grid; gap:12px; backdrop-filter:blur(14px); }
.product-preview { min-height:250px; display:grid; grid-template-columns:60px 1fr; overflow:hidden; border:1px solid #cfddf3; border-radius:10px; background:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.86); }
.preview-sidebar { display:grid; align-content:start; gap:10px; padding:18px 14px; background:#0f2138; }
.preview-sidebar span { height:26px; border-radius:8px; background:rgba(255,255,255,.16); }
.preview-sidebar span:first-child { height:36px; background:#ffffff; }
.preview-sidebar span.active { background:#2d8cff; }
.preview-main { display:flex; flex-direction:column; gap:10px; padding:14px; background:linear-gradient(180deg,#f8fbff,#ffffff); }
.preview-topline { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.preview-topline strong { display:flex; align-items:center; gap:8px; font-size:14px; letter-spacing:-.01em; }
.mini-gem { width:14px; height:14px; background:linear-gradient(135deg, var(--blue) 0%, #2adca6 100%); box-shadow:0 0 14px rgba(42,220,166,.3); }
.preview-topline em { display:inline-flex; border:1px solid #bdebdc; background:#ecfdf5; color:#047857; border-radius:999px; padding:7px 9px; font-size:11px; font-style:normal; font-weight:900; white-space:nowrap; }
.preview-route { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:8px; background:white; }
.preview-route small { display:block; margin-bottom:5px; color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.preview-route b { display:block; font-size:20px; line-height:1.05; letter-spacing:-.04em; }
.preview-route i { display:grid; place-items:center; width:56px; height:56px; flex:0 0 auto; border-radius:999px; background:conic-gradient(var(--teal) 62%, #dbe7ff 0); color:var(--ink); font-style:normal; font-weight:900; box-shadow:inset 0 0 0 8px white; }
.preview-chat { margin-top:auto; border:1px solid var(--line); border-radius:8px; background:#fff; padding:12px; }
.preview-chat p { margin:0 0 8px; color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.preview-chat span { display:block; background:#eef5ff; border:1px solid var(--line); border-radius:8px; padding:10px; color:var(--ink); line-height:1.35; font-weight:700; font-size:13px; }
.preview-badge {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid #bdebdc;
  border-radius:8px;
  background:linear-gradient(135deg,#f0fdf4,#eff6ff);
  padding:10px;
}
.badge-medal {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 44%, #ffffff 0 22%, transparent 23%),
    conic-gradient(from 40deg, #2adca6, #8bd1ff, #075eea, #2adca6);
  box-shadow:0 10px 24px rgba(15,118,110,.18), inset 0 0 0 5px #ffffff;
}
.badge-medal::after {
  content:"";
  width:14px;
  height:14px;
  clip-path:polygon(50% 0, 61% 32%, 100% 50%, 61% 68%, 50% 100%, 39% 68%, 0 50%, 39% 32%);
  background:#075eea;
}
.preview-badge small { display:block; color:#047857; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px; }
.preview-badge strong { display:block; color:var(--ink); font-size:15px; line-height:1.1; letter-spacing:-.02em; }
.preview-actions { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.preview-actions span { min-height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:white; color:var(--muted); font-size:12px; font-weight:900; }
.metric-row { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.metric { background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:14px; }
.metric b { display:block; font-size:30px; color:var(--blue); line-height:1; } .metric span { color:var(--muted); font-weight:800; font-size:12px; line-height:1.2; }
.landing-section { margin-top:34px; }
.landing-section h2 { margin:0; font-size:48px; line-height:1.02; letter-spacing:-.055em; max-width:780px; }
.landing-section p { color:var(--muted); line-height:1.55; }
.dark-section {
  position:relative;
  overflow:hidden;
  min-height:520px;
  padding:64px;
  border:1px solid rgba(141,166,205,.22);
  border-radius:14px;
  background:
    radial-gradient(circle at 18% 16%, rgba(45,140,255,.34), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(15,118,110,.28), transparent 36%),
    linear-gradient(135deg,#071736 0%, #0b2445 48%, #06111f 100%);
  box-shadow:0 30px 90px rgba(6,17,31,.24);
}
.dark-section::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 22%, rgba(255,255,255,.04));
  pointer-events:none;
}
.dark-section > * { position:relative; z-index:1; }
.dark-section .eyebrow,
.dark-section h2,
.dark-section p { color:white; }
.dark-section p { opacity:.72; }
.split-section { display:grid; grid-template-columns:minmax(280px, .78fr) minmax(0, 1.22fr); gap:34px; align-items:center; }
.contrast-grid { display:grid; grid-template-columns:1fr; gap:18px; }
.contrast-card, .method-step, .buyer-card {
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.075));
  border:1px solid rgba(219,231,255,.24);
  border-radius:12px;
  padding:26px;
  box-shadow:0 24px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
}
.contrast-card span, .method-step span, .buyer-card small { display:block; color:#7cc7ff; font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; }
.contrast-card strong, .method-step strong { display:block; color:white; font-size:26px; line-height:1.08; letter-spacing:-.035em; }
.contrast-card p, .method-step p, .buyer-card p { margin:10px 0 0; color:white; opacity:.7; font-size:15px; }
.muted-card { opacity:.78; }
.active-card { border-color:rgba(95,255,203,.42); box-shadow:0 24px 70px rgba(15,118,110,.22), 0 0 44px rgba(95,255,203,.12), inset 0 1px 0 rgba(255,255,255,.2); }
.active-card span { color:#5fffcB; }
.doing-section {
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(320px, .88fr);
  gap:0;
  align-items:stretch;
  overflow:hidden;
  min-height:560px;
  border:1px solid rgba(141,166,205,.22);
  border-radius:14px;
  background:#06111f;
  box-shadow:0 30px 90px rgba(6,17,31,.22);
}
.doing-photo {
  position:relative;
  min-height:520px;
  margin:0;
  background:#071736;
}
.doing-photo::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(6,17,31,0) 48%, rgba(6,17,31,.78) 100%),
    linear-gradient(180deg, rgba(6,17,31,.04), rgba(6,17,31,.42));
  pointer-events:none;
}
.doing-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.doing-copy {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:56px;
  color:white;
  background:
    radial-gradient(circle at 70% 22%, rgba(42,220,166,.2), transparent 32%),
    linear-gradient(135deg, rgba(6,17,31,.96), #071736);
}
.doing-copy .eyebrow,
.doing-copy h2,
.doing-copy p { color:white; }
.doing-copy h2 {
  margin:0;
  font-size:42px;
  line-height:1.02;
  letter-spacing:0;
}
.doing-copy p {
  max-width:520px;
  margin:18px 0 0;
  line-height:1.55;
  opacity:.76;
}
.doing-points {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
.doing-points span {
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.09);
  color:white;
  font-size:12px;
  font-weight:900;
  padding:10px 12px;
}
.section-heading { display:grid; grid-template-columns:minmax(220px, .42fr) minmax(0, 1fr); align-items:end; gap:34px; margin-bottom:34px; }
.method-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.method-step { min-height:230px; }
.method-step span { width:42px; height:42px; display:grid; place-items:center; border-radius:999px; background:rgba(124,199,255,.12); border:1px solid rgba(124,199,255,.24); margin-bottom:22px; }
.buyer-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.buyer-card { min-height:260px; }
.buyer-card h3 { margin:0; color:white; font-size:28px; line-height:1.05; letter-spacing:-.04em; }
.cta-band { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:40px; border:1px solid rgba(219,231,255,.18); border-radius:14px; background:linear-gradient(135deg,#061d49,#075eea); color:white; box-shadow:0 24px 70px rgba(6,29,73,.16); }
.cta-band .eyebrow, .cta-band h2, .cta-band p { color:white; }
.cta-band p { max-width:680px; margin:10px 0 0; opacity:.86; }
.cta-band .primary { background:white; color:var(--blue-dark); box-shadow:none; flex:0 0 auto; }
.course-layout { display:grid; grid-template-columns:310px 1fr; gap:18px; align-items:start; }
.course-sidebar, .learning-screen, .admin-card { background:white; border:1px solid var(--line); border-radius:26px; box-shadow:0 18px 60px rgba(6,29,73,.08); }
.course-sidebar { padding:20px; position:sticky; top:16px; }
.course-sidebar select { width:100%; padding:12px; border:1px solid var(--line); border-radius:14px; margin-bottom:16px; }
.course-sidebar select:disabled { color:var(--ink); background:#f8fbff; opacity:1; }
.course-sidebar h2 { margin:0 0 8px; letter-spacing:-.03em; } .course-sidebar p { color:var(--muted); line-height:1.45; }
.context-card { background:#f8fbff; border:1px solid var(--line); border-radius:16px; padding:12px; margin:0 0 14px; }
.context-card small { display:block; color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }
.context-card strong { display:block; line-height:1.2; }
.context-card span { display:block; color:var(--muted); font-size:12px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; }
.invite-gate { background:white; border:1px solid var(--line); border-radius:28px; box-shadow:0 18px 60px rgba(6,29,73,.08); padding:34px; max-width:760px; margin:38px auto; }
.invite-gate h1 { font-size:44px; line-height:1.05; letter-spacing:-.05em; margin:0 0 12px; }
.tenant-access-form { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px; margin-top:22px; }
.tenant-access-form select { width:100%; border:1px solid var(--line); border-radius:999px; padding:14px 16px; background:#fbfdff; color:var(--ink); outline:none; }
.tenant-access-form select:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(7,94,234,.10); }
.tenant-access-status { min-height:22px; margin:10px 0 0; font-weight:700; }
.invite-example { margin-top:18px; background:#f8fbff; border:1px solid var(--line); border-radius:18px; padding:14px; }
.invite-example small { display:block; color:var(--blue); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.invite-example code { display:block; white-space:normal; overflow-wrap:anywhere; color:var(--ink); }
.training-landing { display:grid; gap:22px; }
.training-hero {
  min-height:620px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, .48fr);
  gap:28px;
  align-items:end;
  padding:56px;
  border:1px solid rgba(141,166,205,.22);
  border-radius:14px;
  background:
    radial-gradient(circle at 16% 18%, rgba(45,140,255,.34), transparent 34%),
    radial-gradient(circle at 82% 24%, rgba(15,118,110,.28), transparent 36%),
    linear-gradient(135deg,#071736 0%, #0b2445 48%, #06111f 100%);
  box-shadow:0 30px 90px rgba(6,17,31,.24);
}
.training-copy h1 { margin:0 0 16px; color:white; font-size:58px; line-height:1; letter-spacing:-.06em; max-width:780px; }
.training-copy .eyebrow,
.training-copy .lead { color:white; }
.training-copy .lead { max-width:720px; opacity:.76; }
.training-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.training-summary,
.training-method-grid article {
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.075));
  border:1px solid rgba(219,231,255,.24);
  border-radius:12px;
  padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
}
.training-summary small,
.training-method-grid span { display:block; color:#7cc7ff; font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; }
.training-summary strong,
.training-method-grid strong { display:block; color:white; font-size:26px; line-height:1.08; letter-spacing:-.035em; }
.training-summary p,
.training-method-grid p { color:white; opacity:.72; line-height:1.5; }
.training-proof-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.training-proof-grid div {
  min-height:108px;
  border:1px solid rgba(219,231,255,.20);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  padding:12px;
}
.training-proof-grid .training-badge-icon {
  width:38px;
  height:38px;
  margin-bottom:10px;
}
.training-proof-grid small {
  margin:0 0 6px;
}
.training-proof-grid strong {
  font-size:18px;
  line-height:1.12;
}
.training-stats { display:grid; gap:10px; margin-top:18px; }
.training-stats span { display:flex; justify-content:space-between; gap:16px; color:white; border-top:1px solid rgba(219,231,255,.18); padding-top:10px; font-weight:800; }
.training-stats b { color:#7cc7ff; }
.german-product-section {
  display:grid;
  grid-template-columns:minmax(260px, .72fr) minmax(0, 1.28fr);
  gap:24px;
  align-items:start;
  border:1px solid rgba(141,166,205,.22);
  border-radius:14px;
  background:white;
  padding:34px;
  box-shadow:0 18px 60px rgba(6,29,73,.08);
}
.german-product-section h2 {
  margin:0;
  font-size:36px;
  line-height:1.04;
  letter-spacing:-.045em;
}
.german-product-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.german-product-card {
  display:flex;
  flex-direction:column;
  min-height:260px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8fbff;
  padding:20px;
}
.german-product-card.active {
  background:
    radial-gradient(circle at 88% 12%, rgba(42,220,166,.22), transparent 30%),
    linear-gradient(135deg,#071736,#0f766e);
  border-color:rgba(15,118,110,.22);
  color:white;
  box-shadow:0 18px 44px rgba(15,118,110,.18);
}
.german-product-card small {
  display:block;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.german-product-card.active small,
.german-product-card.active p,
.german-product-card.active strong { color:white; }
.german-product-card.active p { opacity:.74; }
.german-product-card strong {
  display:block;
  color:var(--ink);
  font-size:25px;
  line-height:1.06;
  letter-spacing:-.035em;
}
.german-product-card p {
  margin:12px 0 18px;
  color:var(--muted);
  line-height:1.45;
}
.german-product-card button,
.german-product-card span {
  margin-top:auto;
}
.german-product-card span {
  display:inline-flex;
  width:max-content;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.training-method-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.progress-card { background:var(--soft); border:1px solid var(--line); border-radius:18px; padding:16px; margin:18px 0; }
.progress-card span { color:var(--muted); font-weight:700; } .progress-card strong { float:right; }
.bar { height:10px; background:white; border-radius:999px; overflow:hidden; margin-top:12px; } .bar i { display:block; height:100%; width:0%; background:var(--blue); border-radius:999px; transition:.25s; }
.content-list { display:grid; gap:8px; }
.content-item { text-align:left; border:1px solid var(--line); background:white; border-radius:14px; padding:12px; cursor:pointer; font-weight:800; color:var(--ink); }
.content-item small { display:block; color:var(--muted); margin-top:3px; font-weight:600; }
.content-item.active { border-color:var(--blue); background:#eff6ff; }
.learning-screen { padding:18px; display:block; }
.content-panel { display:grid; gap:18px; }
.video-card, .mentor-panel, .challenge-panel { background:#fbfdff; border:1px solid var(--line); border-radius:22px; padding:18px; }
.video-label, .panel-title { color:var(--blue); font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.video-slot { aspect-ratio:16/9; background:linear-gradient(135deg,#061d49,#075eea); border-radius:20px; overflow:hidden; display:grid; place-items:center; color:white; font-weight:900; position:relative; }
.video-slot iframe { width:100%; height:100%; border:0; }
.youtube-fallback { position:absolute; right:12px; bottom:12px; background:rgba(7,23,54,.86); color:white; text-decoration:none; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:8px 10px; font-size:12px; font-weight:900; }
.drive-link { color:white; text-decoration:none; text-align:center; padding:18px; display:grid; gap:8px; }
.drive-link span { color:#8fd7ff; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.video-card h2 { font-size:30px; letter-spacing:-.04em; margin:18px 0 8px; }
.video-card p, .challenge-panel p { color:var(--muted); line-height:1.5; }
.pager { display:flex; gap:10px; margin-top:14px; }
.chat-box { height:340px; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:6px; }
.msg { max-width:86%; padding:12px 14px; border-radius:18px; line-height:1.45; white-space:pre-wrap; }
.msg.mentor { background:#eef5ff; border:1px solid var(--line); align-self:flex-start; }
.msg.user { background:var(--blue); color:white; align-self:flex-end; }
.chat-form { display:flex; gap:10px; margin-top:12px; }
.chat-form input { flex:1; border:1px solid var(--line); border-radius:999px; padding:13px 15px; }
.chat-form button { border:0; border-radius:999px; padding:12px 16px; background:var(--blue); color:white; font-weight:900; cursor:pointer; }
.challenge-panel textarea { width:100%; min-height:120px; resize:vertical; border:1px solid var(--line); border-radius:16px; padding:12px; margin:10px 0; }
.badge-box { display:flex; gap:12px; align-items:flex-start; background:white; border:1px solid var(--line); border-radius:18px; padding:14px; margin-top:16px; }
.badge-box span { font-size:26px; } .badge-box small { display:block; color:var(--muted); margin-top:4px; line-height:1.35; }
.admin-shell { display:grid; gap:22px; }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.admin-card { padding:20px; }
.admin-card.wide { grid-column:1 / -1; }
.admin-card textarea, .admin-card input { width:100%; border:1px solid var(--line); border-radius:16px; padding:14px; margin:8px 0 12px; }
.admin-card textarea { min-height:160px; } #adminJson { min-height:420px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; }
.muted { color:var(--muted); }
.study-shell { display:grid; gap:18px; }
.study-panel, .study-player-card, .study-path { background:white; border:1px solid var(--line); border-radius:24px; box-shadow:0 18px 60px rgba(6,29,73,.08); padding:20px; }
.study-panel h1 { font-size:42px; line-height:1.05; letter-spacing:-.05em; margin:0 0 12px; max-width:820px; }
.study-form { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; margin-top:20px; }
.study-form input { min-width:0; border:1px solid var(--line); border-radius:999px; padding:14px 16px; }
.study-form input:first-child { grid-column:span 2; }
.toggle-row { display:flex; align-items:center; gap:10px; margin-top:12px; color:var(--muted); font-weight:700; }
.toggle-row input { width:18px; height:18px; accent-color:var(--blue); }
.study-results { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr); gap:18px; align-items:start; }
.study-player-card { display:grid; gap:14px; }
.study-player-card .video-slot { border-radius:18px; }
.empty-state { min-height:260px; padding:18px; text-align:center; background:linear-gradient(135deg,#061d49,#075eea); }
.study-current small, .study-activity small { display:block; color:var(--blue); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }
.study-current h2 { font-size:30px; line-height:1.1; letter-spacing:-.04em; margin:0 0 8px; }
.study-current p, .study-activity p { color:var(--muted); line-height:1.5; margin:0; }
.study-activity { background:#f8fbff; border:1px solid var(--line); border-radius:18px; padding:14px; }
.study-path { display:grid; gap:14px; }
.compact-header { margin:0; }
.business-goal-card, .learning-objectives { background:#f8fbff; border:1px solid var(--line); border-radius:16px; padding:13px; }
.business-goal-card small, .learning-objectives small { display:block; color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.business-goal-card p { margin:0; color:var(--ink); line-height:1.4; font-weight:700; }
.learning-objectives ul { margin:0; padding-left:18px; color:var(--muted); line-height:1.45; }
.learning-objectives li + li { margin-top:5px; }
.segment-list { display:grid; gap:9px; }
.segment-item { width:100%; display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; text-align:left; background:#fbfdff; border:1px solid var(--line); border-radius:16px; padding:12px; color:var(--ink); cursor:pointer; }
.segment-item span { display:grid; place-items:center; width:30px; height:30px; border-radius:999px; background:var(--soft); color:var(--blue); font-weight:900; }
.segment-item strong { display:block; line-height:1.2; }
.segment-item small { display:block; color:var(--muted); margin-top:4px; line-height:1.25; }
.segment-item.active { border-color:var(--blue); background:#eff6ff; }
.empty-route { border:1px dashed var(--line); border-radius:16px; padding:18px; color:var(--muted); line-height:1.45; background:#fbfdff; }
@media (max-width:900px){ .topbar{align-items:flex-start; flex-wrap:wrap}.nav{order:3;width:100%;justify-content:center}.hero,.course-layout,.learning-screen,.admin-grid,.split-section,.contrast-grid,.method-grid,.buyer-grid,.section-heading,.doing-section{grid-template-columns:1fr}.hero{min-height:auto; gap:18px; padding:26px 18px; background-position:62% center}.hero h1,.admin-shell h1{font-size:40px}.landing-section h2{font-size:32px}.dark-section{min-height:0; padding:28px 18px}.cta-band{align-items:flex-start; flex-direction:column; padding:28px 18px}.audience-grid{grid-template-columns:1fr}.hero-card{width:100%; justify-self:stretch; margin-top:0}.product-preview{min-height:260px; grid-template-columns:58px 1fr}.preview-main{padding:14px}.preview-route{padding:14px}.preview-route b{font-size:20px}.preview-actions span{min-height:46px}.course-sidebar{position:static}.learning-screen{padding:12px}.chat-form{flex-direction:column}.chat-form button{width:100%}.doing-section{min-height:0}.doing-photo{min-height:320px}.doing-photo::after{background:linear-gradient(180deg, rgba(6,17,31,0), rgba(6,17,31,.66))}.doing-copy{padding:32px 18px}.doing-copy h2{font-size:32px} }

@media (max-width:1150px){
  .hero-card { display:none; }
}

@media (max-width:900px){
  .training-hero,
  .training-method-grid,
  .german-product-section,
  .german-product-grid {
    grid-template-columns:1fr;
  }

  .training-hero {
    min-height:0;
    padding:32px 18px;
  }

  .training-copy h1 {
    font-size:38px;
  }

  .training-proof-grid {
    grid-template-columns:1fr;
  }

  .german-product-section {
    padding:24px 18px;
  }

  .german-product-section h2 {
    font-size:30px;
  }
}

.mentor-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:14px; }
.mentor-header strong { display:block; font-size:20px; letter-spacing:-.03em; }
.status-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pill { display:inline-flex; align-items:center; border-radius:999px; padding:8px 10px; font-size:12px; font-weight:900; border:1px solid var(--line); background:white; color:var(--muted); }
.pill.done { background:#ecfdf5; border-color:#bbf7d0; color:#047857; }
.pill.pending { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.pill.locked { background:#f8fafc; color:#64748b; }
.challenge-strip { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; background:#f8fbff; border:1px solid var(--line); border-radius:18px; padding:14px; margin-bottom:12px; }
.challenge-strip small { display:block; color:var(--blue); font-weight:900; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.challenge-strip strong { display:block; font-size:18px; margin-bottom:4px; }
.challenge-strip p { margin:0; color:var(--muted); line-height:1.4; }
.badge-box.compact { margin:0 0 12px; }
@media (max-width:900px){ .mentor-header,.challenge-strip{flex-direction:column}.status-pills{justify-content:flex-start}.challenge-strip button{width:100%} }

/* Course demo impact layout */
.course-layout { grid-template-columns:minmax(300px, 360px) minmax(0, 1fr); }
.content-panel { align-items:start; }
.mentor-panel { display:flex; flex-direction:column; gap:12px; }
.mentor-header { margin-bottom:0; }
.chat-box { min-height:220px; height:clamp(220px, 34vh, 360px); background:white; border:1px solid var(--line); border-radius:18px; }
.chat-form { margin-top:0; }
.challenge-strip { margin-bottom:0; }
.badge-box.compact { margin:0; }

@media (min-width:901px){
  .content-panel { grid-template-columns:minmax(0, 1.05fr) minmax(320px, .95fr); }
  .mentor-panel { min-height:calc(100vh - 180px); }
  .video-card { position:sticky; top:16px; }
}

@media (max-width:900px){
  main { padding-top:4px; }
  .topbar { padding:14px 18px 10px; gap:10px; }
  .brand strong { font-size:21px; }
  .logo-mark { width:42px; height:42px; border-radius:13px; }
  .login-btn { padding:10px 14px; }
  .nav { padding:5px; gap:4px; }
  .nav-btn { flex:1; min-height:40px; padding:8px 10px; }
  .course-layout { gap:10px; }
  .course-sidebar { padding:14px; border-radius:20px; }
  .course-sidebar > .eyebrow { display:none; }
  .course-sidebar select { min-height:42px; margin-bottom:10px; padding:9px 12px; }
  .course-sidebar h2 { font-size:23px; line-height:1.08; margin-bottom:4px; }
  .course-sidebar > p { display:none; }
  .progress-card { margin:10px 0; padding:12px; border-radius:15px; }
  .bar { height:8px; margin-top:8px; }
  .content-list { grid-auto-columns:minmax(210px, 72%); grid-auto-flow:column; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
  .content-list::-webkit-scrollbar { display:none; }
  .content-item { min-height:68px; padding:11px 12px; }
  .learning-screen { padding:0; background:transparent; border:0; box-shadow:none; }
  .content-panel { gap:10px; }
  .mentor-panel, .video-card { border-radius:20px; padding:14px; }
  .mentor-header { gap:10px; padding-bottom:10px; }
  .mentor-header strong { font-size:18px; }
  .status-pills { gap:6px; }
  .pill { padding:7px 9px; }
  .chat-box { min-height:185px; height:185px; border-radius:16px; }
  .msg { max-width:94%; padding:10px 12px; }
  .chat-form { display:grid; grid-template-columns:1fr auto; gap:8px; }
  .chat-form input { min-width:0; padding:12px 14px; }
  .chat-form button { width:auto; padding:12px 14px; }
  .challenge-strip { padding:12px; border-radius:16px; }
  .challenge-strip p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .challenge-strip button { min-height:40px; }
  .badge-box.compact { display:none; }
  .video-slot { border-radius:16px; }
  .video-card h2 { font-size:24px; line-height:1.08; margin:14px 0 6px; }
  .pager { display:grid; grid-template-columns:1fr 1fr; }
}

@media (max-width:520px){
  .topbar { padding-inline:14px; }
  .brand { width:100%; }
  .login-btn { display:none; }
  .nav { width:100%; }
  .tenant-access-form { grid-template-columns:1fr; }
  .tenant-access-form button { min-height:46px; }
  main { padding-inline:14px; }
  .content-list { grid-auto-columns:minmax(190px, 82%); }
  .chat-box { height:170px; }
}

@media (max-width:900px){
  .mentor-panel { box-shadow:0 18px 48px rgba(6,29,73,.10); }
  .chat-form input::placeholder { color:#7c8aa0; }
  .chat-form button { min-width:86px; }
  .study-panel, .study-player-card, .study-path { border-radius:18px; padding:12px; }
  .study-panel h1 { font-size:30px; }
  .study-form { grid-template-columns:1fr; }
  .study-form input:first-child { grid-column:auto; }
  .study-form .primary { width:100%; }
  .study-results { grid-template-columns:1fr; gap:10px; }
  .empty-state { min-height:190px; }
  .study-current h2 { font-size:22px; }
  .toggle-row { align-items:flex-start; font-size:13px; }
}

/* Guided class-first flow */
.learning-guide { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.guide-step { border:1px solid var(--line); border-radius:16px; background:white; padding:10px; }
.guide-step span { display:grid; width:26px; height:26px; place-items:center; border-radius:999px; background:var(--soft); color:var(--blue); font-size:12px; font-weight:900; margin-bottom:7px; }
.guide-step strong { display:block; font-size:13px; line-height:1.15; }
.guide-step small { display:block; color:var(--muted); font-size:11px; line-height:1.25; margin-top:3px; }
.guide-step.is-active { border-color:var(--blue); background:#f8fbff; }

@media (min-width:901px){
  .content-panel { grid-template-columns:1fr; }
  .video-card { position:static; }
  .video-slot { max-height:52vh; }
}

@media (max-width:900px){
  .video-card { box-shadow:0 18px 48px rgba(6,29,73,.10); }
  .video-slot { max-height:210px; }
  .video-card p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .learning-guide { grid-template-columns:1fr 1fr 1fr; }
  .guide-step { padding:9px; }
  .guide-step small { display:none; }
}

@media (max-width:520px){
  .video-slot { max-height:190px; }
  .learning-guide { gap:6px; }
  .guide-step { border-radius:14px; padding:8px; }
  .guide-step span { width:24px; height:24px; margin-bottom:6px; }
  .guide-step strong { font-size:12px; }
}

@media (max-width:900px){
  .video-card { padding:12px; }
  .video-label { font-size:11px; line-height:1.2; margin-bottom:8px; }
  .video-slot { max-height:155px; }
  .video-card h2 { font-size:21px; margin:10px 0 4px; }
  .video-card p { font-size:14px; line-height:1.35; -webkit-line-clamp:1; margin:0; }
  .pager { margin-top:10px; }
  .pager .primary, .pager .secondary { min-height:42px; padding:10px 14px; }
  .mentor-panel { padding:12px; }
  .mentor-header { align-items:center; flex-direction:row; }
  .mentor-header .panel-title { margin-bottom:4px; }
  .mentor-header strong { font-size:17px; }
}

/* Mobile-first class + chat experience */
@media (max-width:900px){
  body { background:#f4f8ff; }
  .topbar { padding:12px 14px 10px; gap:10px; }
  .brand strong { font-size:20px; }
  .brand span { font-size:12px; }
  .logo-mark { width:42px; height:42px; border-radius:13px; }
  .login-btn { display:none; }
  .nav { width:100%; order:3; padding:4px; gap:4px; }
  .nav-btn { flex:1; min-height:38px; padding:8px 10px; }
  main { padding:6px 10px 22px; }
  .course-layout { display:grid; grid-template-columns:1fr; gap:8px; }
  .course-sidebar { padding:10px; border-radius:18px; box-shadow:0 10px 28px rgba(6,29,73,.07); }
  .course-sidebar > .eyebrow,
  .course-sidebar select,
  .course-sidebar h2,
  .course-sidebar > p { display:none; }
  .progress-card { margin:0 0 8px; padding:10px 12px; border-radius:14px; }
  .progress-card span, .progress-card strong { font-size:13px; }
  .bar { height:6px; margin-top:8px; }
  .content-list { display:grid; grid-auto-columns:minmax(168px, 54vw); grid-auto-flow:column; gap:8px; overflow-x:auto; padding-bottom:1px; scrollbar-width:none; }
  .content-list::-webkit-scrollbar { display:none; }
  .content-item { min-height:58px; padding:9px 10px; border-radius:13px; font-size:13px; line-height:1.12; }
  .content-item small { font-size:11px; line-height:1.15; }
  .learning-screen { padding:0; border:0; background:transparent; box-shadow:none; }
  .content-panel { display:grid; grid-template-columns:1fr; gap:8px; }
  .video-card,
  .mentor-panel { border-radius:18px; padding:10px; box-shadow:0 14px 34px rgba(6,29,73,.09); }
  .video-label { margin-bottom:7px; font-size:11px; line-height:1.2; }
  .video-slot { max-height:none; aspect-ratio:16 / 9; border-radius:15px; }
  .video-card h2 { margin:9px 0 4px; font-size:20px; line-height:1.08; }
  .video-card p { margin:0; font-size:13px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
  .pager { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
  .pager .primary,
  .pager .secondary { min-height:40px; padding:9px 12px; }
  .mentor-panel { gap:9px; }
  .mentor-header { margin:0; padding-bottom:9px; align-items:center; }
  .mentor-header .panel-title { margin-bottom:3px; font-size:11px; }
  .mentor-header strong { font-size:18px; }
  .status-pills { display:none; }
  .learning-guide,
  .challenge-strip,
  .badge-box.compact { display:none; }
  .chat-box { width:100%; height:clamp(320px, 48vh, 460px); min-height:320px; padding:8px; border:1px solid var(--line); border-radius:16px; background:white; }
  .msg { max-width:96%; padding:10px 12px; border-radius:15px; font-size:14px; line-height:1.42; }
  .chat-form { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:0; }
  .chat-form input { min-width:0; padding:12px 14px; border-radius:999px; }
  .chat-form button { min-width:82px; padding:12px 14px; border-radius:999px; }
}

@media (max-width:420px){
  .content-list { grid-auto-columns:minmax(156px, 70vw); }
  .video-card h2 { font-size:19px; }
  .chat-box { height:46vh; min-height:300px; }
}

/* Private training workspace, inspired by the Codex-style mockup */
body.has-invite {
  background:#eef3f8;
}

body.has-invite .topbar {
  max-width:none;
  height:58px;
  margin:0;
  padding:10px 14px;
  background:#ffffff;
  border-bottom:1px solid var(--line);
}

body.has-invite .brand strong {
  font-size:15px;
  letter-spacing:0;
}

body.has-invite .brand span,
body.has-invite .auth-box span {
  font-size:12px;
}

body.has-invite .logo-mark {
  width:34px;
  height:34px;
  border-radius:9px;
  box-shadow:0 8px 18px rgba(7,94,234,.14);
}

body.has-invite .nav {
  border-radius:8px;
  padding:4px;
  background:#f8fafc;
}

body.has-invite .nav-btn {
  border-radius:7px;
  padding:8px 11px;
  font-size:12px;
}

body.has-invite .login-btn {
  border-radius:8px;
  padding:9px 12px;
  box-shadow:none;
}

body.has-invite main {
  max-width:none;
  margin:0;
  padding:0;
}

body.has-invite #courseView {
  height:calc(100vh - 58px);
  overflow:hidden;
}

body.has-invite .course-layout {
  height:100%;
  display:grid;
  grid-template-columns:270px minmax(360px, .96fr) minmax(360px, 1.04fr);
  gap:1px;
  align-items:stretch;
  background:var(--line);
}

body.has-invite .course-sidebar,
body.has-invite .learning-screen,
body.has-invite .video-card,
body.has-invite .mentor-panel {
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#ffffff;
}

body.has-invite .course-sidebar {
  position:static;
  overflow:auto;
  padding:0;
  background:#f8fbff;
}

body.has-invite .course-sidebar > .eyebrow,
body.has-invite .course-sidebar > select {
  display:none;
}

body.has-invite .course-sidebar > .eyebrow,
body.has-invite .course-sidebar > select,
body.has-invite .course-sidebar > .context-card,
body.has-invite .course-sidebar > h2,
body.has-invite .course-sidebar > p,
body.has-invite .course-sidebar > .progress-card,
body.has-invite .workspace-tag {
  margin-left:10px;
  margin-right:10px;
}

body.has-invite .course-sidebar > .eyebrow:first-child {
  margin-top:12px;
}

body.has-invite .course-sidebar select {
  border-radius:8px;
  margin-bottom:8px;
  padding:10px 11px;
}

body.has-invite .course-sidebar h2 {
  font-size:15px;
  line-height:1.2;
  margin-top:14px;
}

body.has-invite .course-sidebar > p {
  font-size:12px;
  line-height:1.38;
}

body.has-invite .context-card,
body.has-invite .workspace-tag,
body.has-invite .progress-card {
  border-radius:8px;
  box-shadow:0 8px 22px rgba(13,27,47,.05);
}

body.has-invite .context-card {
  margin-top:12px;
  background:linear-gradient(135deg,#071736,#0d766f);
  border-color:rgba(255,255,255,.14);
  color:white;
}

body.has-invite .context-card small,
body.has-invite .context-card span {
  color:rgba(255,255,255,.72);
}

body.has-invite .workspace-tag {
  border:1px solid var(--line);
  background:white;
  padding:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

body.has-invite .content-list {
  display:grid;
  gap:2px;
  padding:10px;
}

body.has-invite .content-list::before {
  content:"Módulos y contenidos";
  display:block;
  margin:4px 0 7px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.has-invite .content-item {
  border:0;
  border-radius:8px;
  background:transparent;
  display:grid;
  grid-template-columns:22px 1fr;
  gap:8px;
  padding:9px 8px;
  font-size:13px;
  line-height:1.18;
}

body.has-invite .content-item::before {
  content:attr(data-step);
  width:22px;
  height:22px;
  border-radius:999px;
  background:#eaf1fb;
  color:var(--blue);
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:900;
}

body.has-invite .content-item.active {
  border:0;
  background:#eaf2ff;
}

body.has-invite .content-item small {
  font-size:11px;
  line-height:1.2;
}

body.has-invite .learning-screen,
body.has-invite .content-panel {
  display:contents;
}

body.has-invite .mentor-panel {
  grid-column:2;
  grid-row:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:0;
}

body.has-invite .video-card {
  grid-column:3;
  grid-row:1;
  min-height:0;
  overflow:auto;
  padding:0;
  display:flex;
  flex-direction:column;
}

body.has-invite .video-card::before {
  content:"Mesa de trabajo de la clase";
  display:block;
  min-height:44px;
  padding:14px 16px 8px;
  border-bottom:1px solid var(--line);
  background:#f8fafc;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

body.has-invite .resource-tabs {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;
  background:var(--line);
  border-bottom:1px solid var(--line);
}

body.has-invite .resource-tabs button {
  border:0;
  background:#f3f7fc;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  min-height:42px;
  padding:8px;
  cursor:pointer;
}

body.has-invite .resource-tabs button.active {
  background:white;
  color:var(--ink);
}

body.has-invite .mentor-header {
  min-height:58px;
  padding:12px 16px;
  margin:0;
  border-bottom:1px solid var(--line);
  align-items:center;
}

body.has-invite .mentor-header strong {
  font-size:14px;
  letter-spacing:0;
}

body.has-invite .panel-title {
  font-size:11px;
  margin-bottom:2px;
}

body.has-invite .status-pills {
  justify-content:flex-end;
}

body.has-invite .learning-guide {
  display:none;
}

body.has-invite .route-header-card {
  border:1px solid rgba(139,209,255,.22);
  border-radius:14px;
  background:
    radial-gradient(circle at 84% 10%, rgba(42,220,166,.22), transparent 32%),
    linear-gradient(135deg,#071736 0%,#0a2457 55%,#0b3b4b 100%);
  margin:18px 18px 6px;
  padding:18px;
  box-shadow:0 26px 70px rgba(7,23,54,.18);
  color:white;
}

body.has-invite .route-header-card small,
body.has-invite .objective-grid span {
  color:#8bd1ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.has-invite .route-header-card h1 {
  margin:6px 0 8px;
  font-size:27px;
  line-height:1.08;
  letter-spacing:-.03em;
  color:white;
}

body.has-invite .route-header-card p {
  margin:0;
  color:rgba(255,255,255,.76);
  line-height:1.45;
}

body.has-invite .resource-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  margin-top:14px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:9px;
  background:rgba(255,255,255,.12);
  color:white;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  padding:10px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}

body.has-invite .objective-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:12px;
}

body.has-invite .objective-grid div {
  min-height:86px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  padding:10px;
}

body.has-invite .objective-grid p {
  font-size:12px;
  line-height:1.35;
}

body.has-invite .chat-box {
  flex:1;
  min-height:0;
  height:auto;
  overflow:auto;
  padding:18px;
  border:0;
  border-radius:0;
  background:linear-gradient(180deg,#fbfdff,#ffffff);
}

body.has-invite .msg {
  max-width:92%;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(13,27,47,.04);
}

body.has-invite .msg.mentor {
  background:white;
}

body.has-invite .msg.user {
  background:var(--blue);
}

body.has-invite .chat-form {
  padding:12px;
  margin:0;
  border-top:1px solid var(--line);
  background:white;
}

body.has-invite .chat-form input {
  border-radius:8px;
}

body.has-invite .chat-form button {
  border-radius:7px;
}

body.has-invite .challenge-strip,
body.has-invite .badge-box.compact {
  margin:0 12px 12px;
  border-radius:8px;
}

body.has-invite .video-label {
  margin:16px 16px 10px;
  color:var(--muted);
}

body.has-invite .video-slot {
  margin:0 16px;
  border-radius:12px;
  background:
    radial-gradient(circle at 80% 20%, rgba(42,220,166,.28), transparent 34%),
    linear-gradient(135deg,#071736,#075eea);
  box-shadow:0 18px 60px rgba(13,27,47,.10);
}

body.has-invite .video-card h2 {
  font-size:25px;
  line-height:1.12;
  margin:16px 16px 8px;
}

body.has-invite .video-card p {
  margin:0 16px 14px;
  color:var(--muted);
}

body.has-invite .pager {
  margin:0 16px 16px;
}

body.has-invite .pager .primary,
body.has-invite .pager .secondary {
  border-radius:8px;
}

body.has-invite .youtube-fallback,
body.has-invite .drive-link {
  border-radius:8px;
}

body.has-invite .drive-link {
  min-height:100%;
  align-content:center;
  font-size:18px;
}

@media (max-width:1120px) {
  body.has-invite .objective-grid {
    grid-template-columns:1fr;
  }

  body.has-invite .objective-grid div {
    min-height:auto;
  }

  body.has-invite .route-header-card h1 {
    font-size:24px;
  }
}

@media (max-width:1000px) {
  body.has-invite #courseView {
    height:auto;
    overflow:visible;
  }

  body.has-invite .course-layout {
    min-height:calc(100vh - 58px);
    grid-template-columns:260px minmax(360px, 1fr);
  }

  body.has-invite .learning-screen,
  body.has-invite .content-panel {
    display:grid;
    grid-template-columns:1fr;
    min-height:0;
    gap:1px;
    background:var(--line);
  }

  body.has-invite .mentor-panel,
  body.has-invite .video-card {
    display:flex;
    grid-column:auto;
    grid-row:auto;
  }

  body.has-invite .mentor-panel {
    order:1;
  }

  body.has-invite .video-card {
    order:2;
    max-height:none;
    overflow:visible;
  }
}

@media (max-width:640px) {
  body.has-invite .topbar {
    height:auto;
    flex-wrap:wrap;
  }

  body.has-invite #courseView {
    height:auto;
  }

  body.has-invite .course-layout {
    display:grid;
    grid-template-columns:1fr;
    min-height:0;
  }

  body.has-invite .learning-screen,
  body.has-invite .content-panel {
    display:block;
  }

  body.has-invite .mentor-panel,
  body.has-invite .video-card {
    display:flex;
    grid-column:auto;
    grid-row:auto;
  }

  body.has-invite .video-card {
    order:2;
  }

  body.has-invite .objective-grid {
    grid-template-columns:1fr;
  }
}