:root {
  color-scheme: light;
  --teal: #11b7a5;
  --teal-strong: #0f9f91;
  --teal-soft: #e5f8f5;
  --ink: #0b1f2a;
  --ink-soft: #5f6b75;
  --line: #dce4e7;
  --surface: #ffffff;
  --canvas: #f4f7f7;
  --orange: #f47a33;
  --green: #168a62;
  --yellow: #a76900;
  --red: #c64242;
  --shadow: 0 12px 32px rgba(11, 31, 42, 0.08);
  --radius: 16px;
  font-family: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { background: var(--canvas); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font-size: 16px;
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
button, a, select, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid rgba(17, 183, 165, 0.32);
  outline-offset: 2px;
}

.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.8125rem; }
.eyebrow {
  margin: 0 0 8px;
  color: var(--teal-strong);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 42px;
  flex: 0 0 auto;
  color: #fff;
  background: var(--teal);
  border-radius: 8px 8px 13px 13px;
  font-size: 0.85rem;
  letter-spacing: -0.18em;
  box-shadow: 0 8px 18px rgba(17, 183, 165, 0.24);
}

.brand-copy { display: grid; line-height: 1.05; }
.brand-copy small { color: var(--ink-soft); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(420px, 0.95fr);
  background: var(--surface);
}

.login-showcase {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: 100vh;
  padding: clamp(36px, 6vw, 84px);
  color: #fff;
  background:
    radial-gradient(circle at 80% 18%, rgba(244,122,51,.9) 0 8%, transparent 8.5%),
    radial-gradient(circle at 72% 30%, rgba(255,255,255,.14) 0 16%, transparent 16.5%),
    linear-gradient(145deg, #0b2b35 0%, #0e5260 58%, #0f9f91 100%);
}

.login-showcase::before,
.login-showcase::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 50%;
}
.login-showcase::before { width: 520px; height: 520px; top: -180px; right: -160px; }
.login-showcase::after { width: 320px; height: 320px; top: -70px; right: -40px; }

.showcase-content { position: relative; z-index: 1; max-width: 640px; }
.showcase-kicker { color: #9ff0e6; font-weight: 750; }
.login-showcase h1 { margin: 12px 0 20px; max-width: 640px; font-size: clamp(2.4rem, 5vw, 5.25rem); line-height: .98; letter-spacing: -0.055em; }
.login-showcase p { max-width: 550px; margin: 0; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.5vw, 1.25rem); }

.showcase-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 38px; }
.showcase-stats strong { display: block; font-size: 1.5rem; }
.showcase-stats span { color: rgba(255,255,255,.72); font-size: .875rem; }

.login-panel { display: grid; place-items: center; min-height: 100vh; padding: 40px; }
.login-card { width: min(100%, 480px); }
.login-card h2 { margin: 40px 0 8px; font-size: 2rem; letter-spacing: -0.035em; }
.login-card > p { margin: 0 0 32px; color: var(--ink-soft); }

.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-weight: 720; font-size: .9rem; }
.field input, .field select, .field textarea, .select-control {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); }

.checkbox-row { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .9rem; }
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--teal); }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }

.btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 760;
  text-decoration: none;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover { border-color: #a9b8bd; transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--teal-strong); border-color: var(--teal-strong); }
.btn-primary:hover { background: #0b8b7f; border-color: #0b8b7f; }
.btn-dark { color: #fff; background: var(--ink); border-color: var(--ink); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-danger { color: var(--red); background: #fff6f6; border-color: #ffd7d7; }
.btn-block { width: 100%; }
.btn:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.link-button { padding: 0; color: var(--teal-strong); background: none; border: 0; font-weight: 750; }
.login-note { margin-top: 22px; padding: 14px 16px; color: var(--ink-soft); background: var(--canvas); border-radius: 12px; font-size: .85rem; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.sidebar .brand { padding: 0 10px 24px; }
.sidebar-nav { display: grid; gap: 6px; }
.nav-section { padding: 18px 12px 8px; color: #8a969d; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-button {
  width: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 11px;
  text-align: left;
  font-weight: 680;
}
.nav-button:hover { color: var(--ink); background: #f2f6f6; }
.nav-button.active { color: #087d73; background: var(--teal-soft); }
.nav-icon { width: 22px; text-align: center; font-size: 1.08rem; }
.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.profile-mini { display: flex; align-items: center; gap: 10px; padding: 10px; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; color: #fff; background: linear-gradient(145deg, var(--teal), #075d6a); border-radius: 50%; font-weight: 800; }

.app-column { min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px clamp(18px, 3vw, 42px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.breadcrumbs { color: var(--ink-soft); font-size: .9rem; }
.breadcrumbs strong { color: var(--ink); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.role-preview { min-width: 170px; min-height: 40px; padding: 8px 34px 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.icon-button { width: 42px; height: 42px; display: inline-grid; place-items: center; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.notification-dot { position: relative; }
.notification-dot::after { content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; background: var(--orange); border: 2px solid #fff; border-radius: 50%; }
.menu-toggle { display: none; }

.main { padding: clamp(24px, 4vw, 48px); }
.page { display: grid; gap: 28px; animation: page-in .25s ease; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-heading h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.045em; line-height: 1.1; }
.page-heading p { max-width: 680px; margin: 8px 0 0; color: var(--ink-soft); }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.hero-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  min-height: 255px;
  color: #fff;
  background: linear-gradient(125deg, #0c303a, #0d6166 58%, #10a996);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.hero-panel::after { content: ""; position: absolute; width: 330px; height: 330px; top: -150px; right: -65px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.hero-copy { position: relative; z-index: 1; padding: clamp(28px, 4vw, 48px); }
.hero-copy h1 { max-width: 720px; margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1; letter-spacing: -.055em; }
.hero-copy p { max-width: 650px; margin: 0; color: rgba(255,255,255,.78); }
.hero-copy .btn { margin-top: 26px; }
.hero-art { position: relative; min-height: 220px; }
.hero-orbit { position: absolute; inset: 30px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.hero-orbit::before { content: ""; position: absolute; width: 92px; height: 92px; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--orange); border-radius: 26px; box-shadow: 0 24px 55px rgba(0,0,0,.2); }
.hero-orbit::after { content: "✓"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-52%); color: #fff; font-size: 2.5rem; font-weight: 900; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.stat-card, .panel, .course-card, .journey-card, .credential-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 3px 10px rgba(11,31,42,.035);
}
.stat-card { padding: 20px; }
.stat-label { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: .85rem; font-weight: 650; }
.stat-value { margin: 12px 0 6px; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1; letter-spacing: -.04em; font-weight: 820; }
.trend { color: var(--green); font-size: .8rem; font-weight: 740; }
.trend.warn { color: var(--yellow); }

.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-heading h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.025em; }
.section-heading p { margin: 4px 0 0; color: var(--ink-soft); }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.card-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.course-card { overflow: hidden; }
.course-visual { height: 118px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0d4a54, #11b7a5); }
.course-visual.orange { background: linear-gradient(135deg, #743918, var(--orange)); }
.course-visual.navy { background: linear-gradient(135deg, #071e2a, #235b6b); }
.course-visual span { width: 54px; height: 54px; display: grid; place-items: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); border-radius: 18px; font-size: 1.5rem; }
.course-body { padding: 20px; }
.course-body h3 { margin: 0 0 4px; font-size: 1.05rem; }
.course-meta { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0; color: var(--ink-soft); font-size: .8rem; }
.progress-track { width: 100%; height: 8px; overflow: hidden; background: #e5eaec; border-radius: 999px; }
.progress-fill { height: 100%; background: var(--teal); border-radius: inherit; transition: width .3s ease; }
.course-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }

.split-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr); gap: 20px; }
.panel { padding: 22px; }
.panel.flush { padding: 0; overflow: hidden; }
.panel h2, .panel h3 { margin-top: 0; }

.chart-bars { min-height: 240px; display: flex; align-items: end; gap: clamp(12px, 3vw, 34px); padding: 30px 10px 0; border-bottom: 1px solid var(--line); }
.chart-col { flex: 1; display: grid; gap: 8px; justify-items: center; color: var(--ink-soft); font-size: .75rem; }
.chart-bar { width: min(48px, 80%); min-height: 20px; background: linear-gradient(180deg, var(--teal), #7be0d4); border-radius: 8px 8px 2px 2px; }

.activity-list { display: grid; }
.activity-item { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--teal-strong); background: var(--teal-soft); border-radius: 10px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.search { min-width: min(100%, 280px); min-height: 42px; padding: 8px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.filters select { min-height: 42px; padding: 8px 32px 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.data-table th, .data-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.data-table th { color: var(--ink-soft); background: #f8faf9; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfdfd; }

.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; color: #08795c; background: #e8f7f0; font-size: .75rem; font-weight: 760; }
.badge.warn { color: #8d5a00; background: #fff4d7; }
.badge.neutral { color: #4d5d64; background: #edf1f2; }
.badge.info { color: #176580; background: #e7f5fa; }

.journey-list { display: grid; gap: 14px; }
.journey-card { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 20px; }
.journey-card h3 { margin: 0 0 6px; }
.journey-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; color: var(--ink-soft); font-size: .82rem; }
.journey-actions { display: flex; align-items: center; gap: 8px; }

.course-layout { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 20px; align-items: start; }
.lesson-panel { position: sticky; top: 92px; max-height: calc(100vh - 120px); overflow: auto; }
.lesson-group + .lesson-group { margin-top: 18px; }
.lesson-group h3 { margin: 0 0 10px; font-size: .85rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.lesson-button { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 12px; color: var(--ink); background: transparent; border: 0; border-radius: 10px; text-align: left; }
.lesson-button:hover, .lesson-button.active { background: var(--teal-soft); }
.lesson-index { width: 28px; height: 28px; display: grid; place-items: center; background: #edf1f2; border-radius: 9px; font-size: .75rem; font-weight: 800; }
.lesson-button.done .lesson-index { color: #fff; background: var(--teal); }
.lesson-title { font-size: .86rem; font-weight: 680; }
.lesson-time { color: var(--ink-soft); font-size: .72rem; }
.video-frame { aspect-ratio: 16/9; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 70% 25%, #26545e, #061820 65%); border-radius: 18px; }
.play-button { width: 72px; height: 72px; display: grid; place-items: center; color: var(--ink); background: #fff; border: 0; border-radius: 50%; font-size: 1.35rem; box-shadow: 0 14px 35px rgba(0,0,0,.25); }
.lesson-content { display: grid; gap: 18px; }
.lesson-copy { display: grid; gap: 14px; }
.resource-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }

.credential-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.credential-card { overflow: hidden; }
.certificate-preview { position: relative; min-height: 250px; display: grid; place-items: center; padding: 28px; color: var(--ink); background: linear-gradient(145deg, #fff 0 70%, var(--teal-soft) 70%); border-bottom: 1px solid var(--line); text-align: center; }
.certificate-preview::before { content: ""; position: absolute; inset: 14px; border: 2px solid var(--teal); border-radius: 4px; }
.certificate-preview h3 { margin: 8px 0; font-family: Georgia, serif; font-size: 1.7rem; }
.credential-body { padding: 18px; }
.credential-body h3 { margin: 0 0 5px; }

.template-editor { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(480px,1.25fr); gap: 20px; }
.certificate-canvas { min-height: 440px; display: grid; place-items: center; padding: 50px; color: var(--ink); background: linear-gradient(145deg, #fff 0 74%, var(--teal-soft) 74%); border: 12px solid var(--template-accent, var(--teal)); box-shadow: var(--shadow); text-align: center; }
.certificate-canvas h2 { margin: 10px 0; font-family: Georgia, serif; font-size: 2.3rem; }
.certificate-canvas .recipient { margin: 22px 0 8px; font-size: 1.8rem; font-weight: 780; }
.signature-line { width: 220px; margin: 40px auto 6px; padding-top: 5px; border-top: 1px solid var(--ink); }

.empty-state { display: grid; place-items: center; min-height: 240px; padding: 40px; color: var(--ink-soft); text-align: center; }
.empty-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 14px; color: var(--teal-strong); background: var(--teal-soft); border-radius: 18px; font-size: 1.4rem; }

.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(3,17,24,.58); backdrop-filter: blur(4px); }
.dialog { width: min(100%, 580px); max-height: calc(100vh - 40px); overflow: auto; padding: 24px; background: var(--surface); border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.22); }
.dialog.wide { width: min(100%, 850px); }
.dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.dialog-header h2 { margin: 0; letter-spacing: -.03em; }
.dialog-header p { margin: 5px 0 0; color: var(--ink-soft); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.close-button { width: 38px; height: 38px; display: grid; place-items: center; background: var(--canvas); border: 0; border-radius: 10px; }

.quiz-options { display: grid; gap: 10px; margin: 20px 0; }
.quiz-option { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.quiz-option:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.quiz-option input { width: 18px; height: 18px; accent-color: var(--teal); }

.notification-panel { position: fixed; top: 64px; right: 28px; z-index: 80; width: min(380px, calc(100vw - 32px)); padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.notification-panel h3 { margin: 0 0 12px; }
.notification-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.notification-item:last-child { border-bottom: 0; }
.notification-item strong { display: block; }

.toast-region { position: fixed; right: 22px; bottom: 22px; z-index: 120; display: grid; gap: 10px; }
.toast { min-width: 280px; max-width: 420px; padding: 14px 16px; color: #fff; background: var(--ink); border-radius: 12px; box-shadow: var(--shadow); animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1180px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .card-grid, .card-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split-grid { grid-template-columns: 1fr; }
  .template-editor { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }
  .login-showcase { min-height: 360px; align-content: center; }
  .login-panel { min-height: auto; padding: 44px 24px 60px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: min(290px, 88vw); transition: transform .2s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle { display: inline-grid; }
  .course-layout { grid-template-columns: 1fr; }
  .lesson-panel { position: static; max-height: none; }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-art { min-height: 170px; }
}

@media (max-width: 640px) {
  .topbar { padding: 10px 14px; }
  .breadcrumbs { display: none; }
  .role-preview { min-width: 0; width: 142px; }
  .main { padding: 20px 14px 36px; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .page-actions .btn { flex: 1; }
  .stats-grid, .card-grid, .card-grid.four, .credential-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 28px 22px; }
  .hero-copy h1 { font-size: 2.15rem; }
  .hero-art { display: none; }
  .journey-card { grid-template-columns: 1fr; }
  .journey-actions { justify-content: flex-start; flex-wrap: wrap; }
  .form-row { align-items: flex-start; flex-direction: column; }
  .login-showcase { padding: 34px 24px; }
  .login-showcase h1 { font-size: 2.55rem; }
  .showcase-stats { gap: 18px; }
  .certificate-canvas { min-height: 360px; padding: 28px 18px; border-width: 8px; }
  .certificate-canvas h2 { font-size: 1.75rem; }
  .notification-panel { top: 64px; right: 16px; }
}

/* CMS, identity and credential studio */
.brand-logo-dark { display: none; }
.login-card .brand { padding: 0; background: transparent; border-radius: 0; }
.login-card .brand-logo-light { display: none; }
.login-card .brand-logo-dark { display: block; width: 238px; }
.company-dialog-head img { width: 230px; padding: 0; background: transparent; border-radius: 0; }
.nav-icon { display: inline-grid; place-items: center; width: 22px; font-size: 1rem; }
.btn i { margin-right: 7px; }
.icon-action i, .segmented-control i { margin: 0; }

.profile-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  color: #0a4b4a;
  background: rgba(218, 248, 243, .78);
  border: 1px solid rgba(17, 183, 165, .2);
  border-radius: 20px;
}
.profile-summary > i { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--teal), var(--teal-strong)); border-radius: 14px; box-shadow: 0 9px 24px rgba(17,183,165,.22); }
.profile-summary div { display: grid; }
.profile-summary span { color: var(--ink-soft); font-size: .86rem; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.profile-card { display: grid; gap: 18px; padding: 24px; background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.92); border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(22px); }
.profile-card-head { display: grid; grid-template-columns: 48px 1fr; gap: 14px; }
.profile-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--teal-strong); background: var(--teal-soft); border-radius: 15px; font-size: 1.05rem; }
.profile-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.profile-title-row h3 { margin: 0; }
.profile-card p { margin: 7px 0 0; color: var(--ink-soft); font-size: .88rem; }
.profile-metrics { display: flex; flex-wrap: wrap; gap: 16px; color: var(--ink-soft); font-size: .78rem; }
.profile-metrics strong { color: var(--ink); font-size: .95rem; }
.profile-metrics i { margin-right: 4px; }
.permission-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.permission-chips span { padding: 5px 9px; color: #31525a; background: rgba(228,240,240,.8); border-radius: 999px; font-size: .7rem; font-weight: 700; }
.profile-actions { display: flex; align-items: center; gap: 9px; padding-top: 5px; border-top: 1px solid rgba(20,45,55,.08); }
.profile-actions .btn { margin-right: auto; }

.icon-action { width: 38px; height: 38px; display: inline-grid; place-items: center; color: #52636c; background: rgba(255,255,255,.72); border: 1px solid rgba(20,45,55,.11); border-radius: 12px; transition: .16s ease; }
.icon-action:hover { color: var(--teal-strong); background: var(--teal-soft); transform: translateY(-1px); }
.icon-action.danger:hover { color: #b63232; background: #fff0f0; border-color: #f0cccc; }
.users-table th:last-child, .users-table td:last-child { text-align: right; }
.user-cell { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.user-cell .avatar { width: 38px; height: 38px; font-size: .72rem; }
.user-cell > span:last-child { display: grid; }
.user-cell small { color: var(--ink-soft); font-size: .72rem; }
.progress-cell { display: flex; align-items: center; gap: 10px; min-width: 128px; }
.progress-cell .progress-track { width: 78px; }
.user-actions { display: flex; justify-content: flex-end; gap: 6px; min-width: 126px; }
.search-with-icon { position: relative; flex: 1; min-width: 250px; }
.search-with-icon > i { position: absolute; left: 16px; top: 50%; z-index: 1; color: #738087; transform: translateY(-50%); }
.search-with-icon .search { width: 100%; padding-left: 44px; }
.table-empty { display: grid; place-items: center; gap: 5px; padding: 34px; color: var(--ink-soft); }
.table-empty i { margin-bottom: 8px; color: var(--teal); font-size: 1.5rem; }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.permission-fieldset { margin: 22px 0 0; padding: 0; border: 0; }
.permission-fieldset legend { margin-bottom: 10px; font-weight: 800; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.permission-option { display: flex; align-items: center; gap: 9px; padding: 11px; color: var(--ink-soft); background: rgba(244,248,248,.9); border: 1px solid rgba(20,45,55,.08); border-radius: 13px; font-size: .84rem; cursor: pointer; }
.permission-option input { position: absolute; opacity: 0; pointer-events: none; }
.permission-option span { width: 22px; height: 22px; display: grid; place-items: center; color: transparent; background: #fff; border: 1px solid rgba(20,45,55,.18); border-radius: 7px; font-size: .65rem; }
.permission-option:has(input:checked) { color: var(--ink); background: var(--teal-soft); border-color: rgba(17,183,165,.25); }
.permission-option input:checked + span { color: #fff; background: var(--teal); border-color: var(--teal); }
.confirm-icon { width: 66px; height: 66px; display: grid; place-items: center; margin: 10px auto 24px; color: #b46900; background: #fff3dd; border-radius: 20px; font-size: 1.55rem; }
.btn-danger { color: #fff; background: linear-gradient(#d65757, #b83d3d); border-color: #aa3636; }

.template-editor { grid-template-columns: minmax(360px,.72fr) minmax(560px,1.28fr); align-items: start; }
.template-controls { display: grid; gap: 22px; max-height: calc(100vh - 180px); overflow: auto; }
.template-section { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid rgba(20,45,55,.08); }
.section-label { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 800; }
.section-label i { width: 30px; height: 30px; display: grid; place-items: center; color: var(--teal-strong); background: var(--teal-soft); border-radius: 9px; }
.segmented-control { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 5px; background: rgba(224,234,235,.68); border-radius: 14px; }
.segmented-control button { min-height: 38px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 10px; }
.segmented-control button.active { color: var(--teal-strong); background: #fff; box-shadow: 0 4px 13px rgba(12,35,45,.09); }
.upload-zone { display: flex; align-items: center; gap: 13px; padding: 16px; color: var(--ink-soft); background: rgba(247,250,250,.92); border: 1.5px dashed rgba(17,183,165,.36); border-radius: 15px; cursor: pointer; }
.upload-zone:hover { background: var(--teal-soft); }
.upload-zone > i { color: var(--teal-strong); font-size: 1.25rem; }
.upload-zone span { display: grid; min-width: 0; }
.upload-zone strong { overflow: hidden; color: var(--ink); font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.upload-zone small { font-size: .7rem; }
.upload-zone.compact { padding: 13px 15px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.btn-small { min-height: 38px; padding: 7px 12px; font-size: .78rem; }
.template-preview-panel { position: sticky; top: 104px; display: grid; gap: 12px; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.preview-toolbar i { margin-right: 6px; }

.certificate-canvas { position: relative; isolation: isolate; overflow: hidden; min-height: 520px; display: grid; place-items: center; padding: clamp(36px,5vw,68px); color: var(--template-text, var(--ink)); background-color: #fff; background-image: linear-gradient(145deg, #fff 0 73%, rgba(218,247,242,.94) 73%); background-position: center; background-repeat: no-repeat; background-size: var(--template-fit, cover); border: 10px solid var(--template-accent, var(--teal)); border-radius: 3px; box-shadow: 0 28px 68px rgba(12,35,45,.16); font-family: var(--template-body-font, "Manrope"), sans-serif; text-align: var(--template-align, center); }
.certificate-canvas.has-background::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.13); }
.certificate-content { width: min(100%, 720px); display: grid; justify-items: center; position: relative; z-index: 1; }
.certificate-canvas.align-left .certificate-content { justify-items: start; }
.certificate-canvas.align-right .certificate-content { justify-items: end; }
.certificate-canvas h2 { margin: 8px 0 18px; color: inherit; font-family: var(--template-font, "Playfair Display"), serif; font-size: clamp(2rem,4vw,3.25rem); line-height: 1.04; }
.certificate-canvas p { margin: 6px 0; }
.certificate-canvas .recipient { margin: 18px 0 8px; font-size: clamp(1.55rem,3vw,2.25rem); }
.certificate-logo { width: 148px; height: auto; margin-bottom: 20px; }
.certificate-canvas.align-left .certificate-logo, .certificate-canvas.align-right .certificate-logo { width: 132px; }
.certificate-meta { margin-top: 16px !important; color: color-mix(in srgb, var(--template-text, var(--ink)) 65%, transparent); }
.signature-block { display: grid; justify-items: inherit; margin-top: 26px; }
.signature-image { width: 150px; max-height: 62px; object-fit: contain; margin-bottom: -2px; }
.signature-line { min-width: 210px; padding-top: 8px; border-top: 1px solid currentColor; font-size: .82rem; }

@media (max-width: 1050px) {
  .profile-grid { grid-template-columns: 1fr; }
  .template-editor { grid-template-columns: 1fr; }
  .template-controls { max-height: none; }
  .template-preview-panel { position: static; }
}

@media (max-width: 640px) {
  .field-row, .permission-grid { grid-template-columns: 1fr; }
  .profile-card { padding: 19px; }
  .profile-card-head { grid-template-columns: 42px 1fr; }
  .profile-icon { width: 42px; height: 42px; }
  .certificate-logo { width: 112px; }
  .certificate-canvas { min-height: 410px; padding: 28px 20px; }
}

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

/* Apple-inspired glass refinement */
:root {
  --ink: #0c1820;
  --ink-soft: #61707a;
  --line: rgba(20, 45, 55, .11);
  --surface: rgba(255, 255, 255, .78);
  --canvas: #eef5f4;
  --shadow: 0 18px 55px rgba(12, 35, 45, .10), 0 2px 8px rgba(12, 35, 45, .04);
  --radius: 24px;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
}

html { background: #eaf3f2; }
body {
  background:
    radial-gradient(circle at 8% 2%, rgba(17, 183, 165, .13), transparent 28%),
    radial-gradient(circle at 92% 16%, rgba(244, 122, 51, .09), transparent 23%),
    linear-gradient(145deg, #f7fbfb 0%, #edf4f3 48%, #f5f8f8 100%);
  letter-spacing: -.012em;
}

.brand { width: 100%; min-height: 58px; }
.brand-logo { display: block; width: 198px; max-width: 100%; height: auto; object-fit: contain; }
.brand-mark, .brand-copy { display: none; }

.app-shell { grid-template-columns: 278px minmax(0, 1fr); }
.sidebar {
  padding: 26px 18px 20px;
  color: #fff;
  background:
    radial-gradient(circle at 20% 2%, rgba(17, 183, 165, .27), transparent 29%),
    linear-gradient(180deg, rgba(8, 34, 43, .98), rgba(5, 24, 32, .97));
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 16px 0 46px rgba(5, 24, 32, .08);
}
.sidebar .brand { padding: 4px 10px 28px; }
.sidebar .brand-logo { width: 210px; }
.sidebar .nav-section { color: rgba(255,255,255,.43); }
.sidebar .nav-button { color: rgba(255,255,255,.64); border: 1px solid transparent; }
.sidebar .nav-button:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar .nav-button.active { color: #fff; background: rgba(17,183,165,.19); border-color: rgba(100,235,220,.16); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.sidebar-footer { border-color: rgba(255,255,255,.11); }
.sidebar-footer .muted { color: rgba(255,255,255,.48); }
.sidebar .avatar { color: #073a39; background: linear-gradient(145deg, #9cf1e7, #19b9a8); }

.topbar {
  min-height: 82px;
  padding-inline: clamp(22px, 3vw, 48px);
  background: rgba(250, 253, 253, .70);
  border-color: rgba(20,45,55,.08);
  backdrop-filter: saturate(150%) blur(24px);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
}
.main { width: min(100%, 1680px); margin-inline: auto; padding: clamp(30px, 4vw, 58px); }
.page { gap: 32px; }
.page-heading h1 { font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 760; letter-spacing: -.052em; }

.panel, .stat-card, .course-card, .journey-card, .credential-card, .table-wrap, .glass-panel {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.68);
  backdrop-filter: saturate(145%) blur(22px);
  -webkit-backdrop-filter: saturate(145%) blur(22px);
}
.panel, .stat-card { border-radius: 24px; }
.stat-card { min-height: 148px; padding: 24px; }
.stat-value { margin-top: 18px; }
.course-card { border-radius: 26px; transition: transform .24s ease, box-shadow .24s ease; }
.course-card:hover { transform: translateY(-4px); box-shadow: 0 28px 68px rgba(12,35,45,.14); }
.course-visual { height: 150px; }
.course-body { padding: 24px; }
.journey-card { border-radius: 24px; padding: 26px; }

.btn, .icon-button, .role-preview, .search, .filters select, .field input, .field select, .field textarea {
  border-color: rgba(20,45,55,.11);
  border-radius: 14px;
  box-shadow: inset 0 1px rgba(255,255,255,.72);
}
.btn { min-height: 46px; padding-inline: 19px; }
.btn-primary { background: linear-gradient(180deg, #17b9a8, #0b9689); border-color: rgba(7,126,116,.4); box-shadow: 0 10px 22px rgba(15,159,145,.20), inset 0 1px rgba(255,255,255,.24); }
.btn-primary:hover { background: linear-gradient(180deg, #14aa9b, #087f75); }
.icon-button { border-radius: 14px; background: rgba(255,255,255,.67); backdrop-filter: blur(18px); }
.progress-track { background: rgba(13,39,49,.09); }
.progress-fill { background: linear-gradient(90deg, #0d9d90, #35cbbb); }

.company-pill {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  color: var(--ink);
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(20,45,55,.10);
  border-radius: 15px;
  box-shadow: inset 0 1px rgba(255,255,255,.8);
  text-align: left;
}
.company-pill > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; color: var(--teal-strong); background: var(--teal-soft); border-radius: 10px; }
.company-pill > span:last-child { display: grid; font-size: .78rem; font-weight: 720; line-height: 1.18; }
.company-pill small { color: var(--ink-soft); font-size: .66rem; font-weight: 600; }

.login-page {
  grid-template-columns: minmax(480px, 1.12fr) minmax(420px, .88fr);
  background: linear-gradient(145deg, #e9f5f3, #f8fbfb 48%, #eaf1f1);
}
.login-showcase {
  margin: 18px;
  min-height: calc(100vh - 36px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 82% 20%, rgba(244,122,51,.96) 0 8%, transparent 8.4%),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,.12) 0 18%, transparent 18.4%),
    linear-gradient(145deg, #082934, #0b5c62 60%, #0c9d8f);
  box-shadow: 0 28px 80px rgba(5,31,41,.23);
}
.login-panel { position: relative; padding: 54px; background: transparent; }
.login-card {
  width: min(100%, 510px);
  padding: 38px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(12,35,45,.12), inset 0 1px rgba(255,255,255,.85);
  backdrop-filter: saturate(145%) blur(30px);
  -webkit-backdrop-filter: saturate(145%) blur(30px);
}
.login-card .brand { width: fit-content; min-height: auto; padding: 12px 16px; background: linear-gradient(145deg, #092e38, #0c555b); border-radius: 18px; }
.login-card .brand-logo { width: 205px; }
.login-card h2 { margin-top: 34px; font-size: 2.35rem; }

.dialog-backdrop { background: rgba(7,21,28,.42); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
.dialog { padding: 30px; background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.96); border-radius: 28px; box-shadow: 0 36px 100px rgba(5,24,32,.25); }
.company-dialog-head { text-align: center; }
.company-dialog-head img { width: 188px; padding: 11px 14px; margin: 0 auto 24px; background: linear-gradient(145deg, #092e38, #0c555b); border-radius: 16px; }
.company-dialog-head h2 { margin: 3px 0 6px; font-size: 2rem; letter-spacing: -.04em; }
.company-dialog-head > p:last-child { margin: 0 0 24px; color: var(--ink-soft); }
.company-options { display: grid; gap: 12px; margin-bottom: 18px; }
.company-option { display: grid; grid-template-columns: 48px 1fr 26px; align-items: center; gap: 15px; padding: 16px; color: var(--ink); background: rgba(255,255,255,.7); border: 1px solid rgba(20,45,55,.11); border-radius: 18px; text-align: left; transition: .18s ease; }
.company-option:hover { transform: translateY(-1px); border-color: rgba(17,183,165,.4); }
.company-option.selected { background: rgba(229,248,245,.92); border-color: var(--teal); box-shadow: 0 8px 25px rgba(17,183,165,.12); }
.company-icon { width: 46px; height: 46px; display: grid; place-items: center; color: var(--teal-strong); background: var(--teal-soft); border-radius: 14px; font-size: 1.15rem; }
.company-option > span:nth-child(2) { display: grid; }
.company-option strong { font-size: .98rem; }
.company-option small { color: var(--ink-soft); font-size: .78rem; }
.company-check { color: var(--teal-strong); font-weight: 800; }
.company-support { margin: 18px 0 0; color: var(--ink-soft); text-align: center; font-size: .86rem; }

.course-overview-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(330px, .55fr); gap: 24px; align-items: start; }
.course-syllabus { padding: 28px; }
.syllabus-meta { display: flex; gap: 16px; color: var(--ink-soft); font-size: .84rem; }
.module-stack { display: grid; gap: 14px; margin-top: 24px; }
.module-card { overflow: hidden; background: rgba(255,255,255,.56); border: 1px solid rgba(20,45,55,.09); border-radius: 19px; }
.module-title { display: flex; align-items: center; gap: 14px; padding: 17px 19px; border-bottom: 1px solid rgba(20,45,55,.08); }
.module-title > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--teal-strong); background: var(--teal-soft); border-radius: 11px; font-size: .78rem; font-weight: 800; }
.module-title > div { display: grid; }
.module-title small { color: var(--ink-soft); }
.module-lessons { display: grid; }
.course-lesson-row { width: 100%; display: grid; grid-template-columns: 44px 1fr 28px; align-items: center; gap: 14px; padding: 15px 18px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(20,45,55,.07); text-align: left; }
.course-lesson-row:last-child { border-bottom: 0; }
.course-lesson-row:hover { background: rgba(229,248,245,.62); }
.course-lesson-row > span:nth-child(2) { display: grid; }
.course-lesson-row small { color: var(--ink-soft); }
.lesson-thumb { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #103d49, #12ac9d); border-radius: 13px; font-size: .76rem; }
.lesson-thumb.large { width: 58px; height: 58px; border-radius: 17px; }
.course-lesson-row.done .lesson-thumb { background: linear-gradient(145deg, #0d9d90, #55d3c5); }
.lesson-state { color: var(--teal-strong); font-weight: 800; }
.course-overview-side { position: sticky; top: 106px; display: grid; gap: 18px; }
.progress-card { display: grid; gap: 20px; padding: 28px; text-align: center; }
.progress-card h2 { margin-bottom: 4px; }
.progress-ring { width: 142px; height: 142px; display: grid; place-items: center; margin: auto; background: conic-gradient(var(--teal) var(--progress), rgba(13,39,49,.08) 0); border-radius: 50%; }
.progress-ring::before { content: ""; position: absolute; width: 112px; height: 112px; background: rgba(255,255,255,.92); border-radius: 50%; }
.progress-ring { position: relative; }
.progress-ring span { position: relative; z-index: 1; display: grid; }
.progress-ring strong { font-size: 1.8rem; }
.progress-ring small { color: var(--ink-soft); }
.resume-card { display: flex; align-items: center; gap: 16px; padding: 20px; }
.resume-card h3 { margin: 0 0 5px; }

.player-navigation { display: flex; justify-content: space-between; gap: 16px; }
.player-navigation > div { display: flex; gap: 10px; }
.course-player-grid { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(340px, .52fr); gap: 24px; align-items: start; }
.player-main { display: grid; gap: 22px; min-width: 0; }
.glass-panel { overflow: hidden; border-radius: 25px; }
.video-card { transition: filter .25s ease, transform .25s ease; }
.video-frame { position: relative; min-height: 510px; overflow: hidden; border-radius: 0; background: radial-gradient(circle at 70% 20%, #26717a, #071d25 63%); }
.video-frame::before { content: ""; position: absolute; width: 360px; height: 360px; right: 7%; top: 8%; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.video-context { position: absolute; left: 38px; top: 34px; max-width: 56%; }
.video-context span { color: #8ce7db; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.video-context h1 { margin: 8px 0; font-size: clamp(1.8rem, 3.2vw, 3.35rem); line-height: 1; letter-spacing: -.05em; }
.video-context p { color: rgba(255,255,255,.64); }
.video-controls { position: absolute; left: 24px; right: 24px; bottom: 20px; display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 14px; color: rgba(255,255,255,.9); font-size: .82rem; }
.video-progress { height: 5px; overflow: hidden; background: rgba(255,255,255,.26); border-radius: 99px; }
.video-progress i { display: block; width: 38%; height: 100%; background: var(--teal); }
.video-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; }
.watch-status { min-width: 250px; display: flex; align-items: center; gap: 12px; margin-left: auto; color: var(--ink); }
.watch-status > i { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; color: var(--teal-strong); background: var(--teal-soft); border-radius: 12px; }
.watch-status > span { min-width: 0; display: grid; gap: 2px; }
.watch-status strong { font-size: .86rem; }
.watch-status small { color: var(--ink-soft); font-size: .72rem; line-height: 1.35; }
.watch-status.done > i { color: #fff; background: var(--teal-strong); }
.watch-progress { width: 100%; height: 4px; overflow: hidden; margin-top: 4px; background: rgba(13,39,49,.1); border-radius: 999px; }
.watch-progress i { display: block; height: 100%; background: var(--teal); border-radius: inherit; transition: width .35s ease; }
.lesson-rating { display: flex; margin-left: auto; }
.lesson-rating button { padding: 2px; color: #f2b84b; background: transparent; border: 0; font-size: 1.55rem; }
.course-outline { position: sticky; top: 104px; max-height: calc(100vh - 132px); overflow: auto; padding: 22px; }
.outline-progress { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid rgba(20,45,55,.08); }
.outline-progress > div:first-child { display: flex; align-items: end; justify-content: space-between; }
.outline-progress h2 { margin: 0; font-size: 1.6rem; }
.course-outline > h2 { margin: 22px 0 14px; }
.course-outline details { margin-bottom: 10px; background: rgba(255,255,255,.52); border: 1px solid rgba(20,45,55,.08); border-radius: 16px; }
.course-outline summary { display: flex; justify-content: space-between; padding: 15px 16px; cursor: pointer; font-weight: 750; list-style: none; }
.outline-lesson { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; padding: 12px 14px; color: var(--ink); background: transparent; border: 0; border-top: 1px solid rgba(20,45,55,.07); text-align: left; }
.outline-lesson.active { background: rgba(229,248,245,.8); }
.outline-lesson > span:nth-child(2) { display: grid; }
.outline-lesson small { color: var(--ink-soft); }
.lesson-tabs { min-height: 290px; }
.tab-list { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid rgba(20,45,55,.08); }
.tab-button { min-height: 62px; color: var(--ink-soft); background: transparent; border: 0; border-bottom: 2px solid transparent; font-weight: 720; }
.tab-button.active { color: var(--teal-strong); border-bottom-color: var(--teal); background: rgba(229,248,245,.38); }
.tab-content { padding: 28px; }
.tab-content h2 { margin-top: 0; }
.comment { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 15px 0; border-bottom: 1px solid rgba(20,45,55,.08); }
.comment p { margin: 4px 0 0; color: var(--ink-soft); }
.review-summary { display: grid; gap: 6px; margin-top: 22px; padding: 20px; background: rgba(255,255,255,.55); border-radius: 18px; }
.review-summary strong { font-size: 2.3rem; }
.review-summary span { color: #f2b84b; letter-spacing: .12em; }
.focus-video .sidebar, .focus-video .topbar, .focus-video .lesson-tabs, .focus-video .course-outline { filter: brightness(.35) blur(2px); }
.focus-video .video-card { position: relative; z-index: 40; transform: scale(1.01); box-shadow: 0 40px 120px rgba(0,0,0,.35); }

@media (max-width: 1100px) {
  .company-pill { display: none; }
  .course-overview-grid, .course-player-grid { grid-template-columns: 1fr; }
  .course-overview-side, .course-outline { position: static; max-height: none; }
  .course-overview-side { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .login-page { grid-template-columns: 1fr; }
  .login-showcase { min-height: 390px; margin: 12px; }
  .login-panel { padding: 28px 20px 54px; }
  .sidebar { width: min(306px, 90vw); }
  .video-frame { min-height: 420px; }
}

@media (max-width: 640px) {
  .main { padding: 22px 14px 42px; }
  .topbar { min-height: 70px; }
  .role-preview { width: 170px; }
  .login-card { padding: 28px 22px; border-radius: 25px; }
  .login-showcase { border-radius: 26px; }
  .company-option { grid-template-columns: 44px 1fr 20px; padding: 13px; }
  .course-syllabus { padding: 18px; }
  .course-overview-side { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; }
  .syllabus-meta { display: none; }
  .player-navigation { align-items: stretch; flex-direction: column; }
  .player-navigation > div { display: grid; grid-template-columns: 1fr 1fr; }
  .video-frame { min-height: 350px; }
  .video-context { left: 24px; top: 25px; width: calc(100% - 48px); max-width: none; }
  .video-context h1 { width: calc(100% - 70px); max-width: 100%; font-size: 2rem; line-height: 1.04; white-space: normal; overflow-wrap: anywhere; }
  .video-actions { align-items: stretch; flex-direction: column; }
  .watch-status { width: 100%; min-width: 0; margin-left: 0; }
  .lesson-rating { margin: 0 auto; }
  .tab-list { grid-template-columns: repeat(2, 1fr); }
  .tab-button { min-height: 54px; }
}

/* Final brand variants: white logo on dark surfaces, dark logo on white surfaces. */
.brand .brand-logo-dark { display: none; }
.sidebar .brand-logo-light { display: block; }
.sidebar .brand-logo-dark { display: none; }
.login-card .brand { width: fit-content; min-height: auto; padding: 0; background: transparent; border-radius: 0; }
.login-card .brand-logo-light { display: none; }
.login-card .brand-logo-dark { display: block; width: 238px; }
.company-dialog-head img { width: 230px; padding: 0; margin: 0 auto 24px; background: transparent; border-radius: 0; }

/* Comfortable default typography */
body, button, input, select, textarea { letter-spacing: normal; }
h1, h2, h3, h4, h5, h6,
.page-heading h1,
.login-showcase h1,
.company-dialog-head h2,
.video-context h1,
.certificate-canvas h2 { letter-spacing: normal; }

/* Collapsible desktop navigation */
.sidebar-brand-row { display: flex; align-items: center; gap: 8px; min-height: 66px; }
.sidebar-brand-row .brand { min-width: 0; }
.sidebar-collapse {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
}
.sidebar-collapse:hover { color: #fff; background: rgba(255,255,255,.12); }

@media (min-width: 901px) {
  .app-shell.sidebar-collapsed { grid-template-columns: 92px minmax(0, 1fr); }
  .sidebar { transition: width .22s ease, padding .22s ease; }
  .sidebar.collapsed { padding-inline: 14px; }
  .sidebar.collapsed .sidebar-brand-row { justify-content: center; flex-direction: column; gap: 7px; }
  .sidebar.collapsed .brand { width: 54px; min-height: 52px; overflow: hidden; padding: 0; }
  .sidebar.collapsed .brand-logo { width: 210px; max-width: none; height: auto; }
  .sidebar.collapsed .sidebar-collapse { width: 36px; height: 30px; }
  .sidebar.collapsed .nav-section { display: none; }
  .sidebar.collapsed .sidebar-nav { margin-top: 22px; }
  .sidebar.collapsed .nav-button { justify-content: center; gap: 0; padding-inline: 8px; }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .profile-mini > div { display: none; }
  .sidebar.collapsed .nav-icon { width: 22px; font-size: 1.05rem; }
  .sidebar.collapsed .profile-mini { justify-content: center; padding-inline: 0; }
}

@media (max-width: 900px) {
  .sidebar-collapse { display: none; }
}

/* Embedded YouTube lessons */
.youtube-frame { min-height: 0; aspect-ratio: 16 / 9; background: #071d25; }
.youtube-frame::before { display: none; }
.youtube-frame iframe, .youtube-frame #youtube-player { width: 100%; height: 100%; display: block; border: 0; }

/* Credential sharing */
.linkedin-button { color: #fff; background: #0a66c2; border-color: #0a66c2; }
.linkedin-button:hover { color: #fff; background: #084f96; border-color: #084f96; }
.credential-actions { justify-content: flex-end; flex-wrap: wrap; }
.credential-actions .badge { margin-right: auto; }

/* Login artwork supplied by Miaki */
.login-showcase {
  padding: 0;
  align-content: stretch;
  background: #d9e3e3;
}
.login-showcase::before,
.login-showcase::after { display: none; }
.login-cover-image {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 36px);
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

@media (max-width: 900px) {
  .login-cover-image { min-height: 390px; max-height: 54vh; }
}