/*
 * IntelliSkool App Shell — the dedicated platform panel.
 * Loaded only on header-app.php pages (dashboard, lesson player, course
 * page when enrolled, certificate view). Its own design system: a clean
 * light theme, distinct from the plain default WordPress look, sharing
 * the same brand accents (violet/magenta/gold/mint) as the marketing site.
 */

:root {
  --isk-canvas: #F5F3FA;
  --isk-surface: #FFFFFF;
  --isk-surface-2: #F0EDF7;
  --isk-line: #E3DFF0;
  --isk-violet: #6D3AF0;
  --isk-violet-2: #5227C9;
  --isk-magenta: #FF4D8D;
  --isk-magenta-deep: #C81F6B;
  --isk-gold: #C8880A;
  --isk-mint: #0FAE73;
  --isk-mint-deep: #0B7A50;
  --isk-red-deep: #C23652;
  --isk-text: #16142B;
  --isk-text-soft: #514E68;
  --isk-text-faint: #8B87A8;
  --isk-radius: 16px;
  --isk-radius-lg: 20px;
}

body.is-app-shell {
  margin: 0;
  background: var(--isk-canvas);
  color: var(--isk-text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.is-app-shell .isk-mono { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.is-app-shell h1, .is-app-shell h2, .is-app-shell h3, .is-app-shell h4 {
  font-family: 'Unbounded', 'Plus Jakarta Sans', sans-serif;
  text-wrap: balance;
  margin: 0;
  color: var(--isk-text);
}
.is-app-shell a { text-decoration: none; }
.is-app-shell a:focus-visible,
.is-app-shell button:focus-visible {
  outline: 2.5px solid var(--isk-gold);
  outline-offset: 2px;
}
.is-app-main { display: block; }

/* ---------- shell layout ---------- */
.isk-dash { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
@media (max-width: 880px) { .isk-dash { grid-template-columns: 1fr; } }

.isk-nav {
  background: var(--isk-surface);
  border-right: 1px solid var(--isk-line);
  padding: 24px 16px 20px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
@media (max-width: 880px) { .isk-nav { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--isk-line); } }

.isk-nav-wm { display: flex; align-items: center; gap: 9px; padding: 4px 10px 24px; }
.isk-nav-wm img { height: 30px; width: auto; }
.isk-nav-wm .t { font-family: 'Unbounded'; font-weight: 700; font-size: 1.02rem; color: var(--isk-text); }
.isk-nav-wm .t em { font-style: normal; background: linear-gradient(100deg, var(--isk-violet), var(--isk-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.isk-navlist { list-style: none; margin: 0; padding: 0; }
.isk-navitem {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 11px;
  font-size: .89rem; font-weight: 500; color: var(--isk-text-soft);
  margin-bottom: 2px; transition: background .15s ease, color .15s ease;
}
.isk-navitem svg { flex-shrink: 0; opacity: .85; }
.isk-navitem:hover { background: rgba(0,0,0,.04); color: var(--isk-text); }
.isk-navitem.is-active {
  background: linear-gradient(100deg, rgba(109,58,240,.14), rgba(255,77,141,.08));
  color: var(--isk-violet-2); font-weight: 700; box-shadow: inset 3px 0 0 var(--isk-violet);
}
.isk-nav .isk-spacer { flex: 1; }
.isk-nav .isk-signout { color: var(--isk-text-faint); }
.isk-nav .isk-back-site {
  margin-top: 4px; font-size: .78rem; color: var(--isk-text-faint);
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
}
.isk-nav .isk-back-site:hover { color: var(--isk-text-soft); }

/* ---------- main ---------- */
.isk-main { padding: 30px 36px 56px; min-width: 0; }
@media (max-width: 620px) { .isk-main { padding: 24px 18px 44px; } }

.isk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.isk-hey { font-family: 'IBM Plex Mono'; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--isk-magenta-deep); }
.isk-top h1 { font-size: 1.6rem; margin-top: 8px; }
.isk-top p { color: var(--isk-text-soft); margin: 6px 0 0; font-size: .92rem; }
.isk-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--isk-violet), var(--isk-magenta));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Unbounded'; font-weight: 700; color: #fff; font-size: .95rem;
  overflow: hidden;
}
.isk-avatar img { width: 100%; height: 100%; object-fit: cover; }

.isk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
@media (max-width: 560px) { .isk-stats { grid-template-columns: 1fr; } }
.isk-stat { background: var(--isk-surface); border: 1px solid var(--isk-line); border-radius: var(--isk-radius); padding: 17px 19px; box-shadow: 0 2px 10px rgba(22,20,43,.04); }
.isk-stat .n { font-family: 'IBM Plex Mono'; font-size: 1.8rem; font-weight: 600; color: var(--isk-text); }
.isk-stat.p .n { color: var(--isk-gold); }
.isk-stat.c .n { color: var(--isk-mint-deep); }
.isk-stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--isk-text-faint); margin-top: 4px; }

.isk-stats-earn { gap: 16px; }
.isk-stats-earn .isk-stat {
  border: 1px solid rgba(111,58,240,.55); color: #fff; padding: 20px 20px 18px;
  background: linear-gradient(135deg, #6136df, #b126b5 58%, #f35a36);
  box-shadow: 0 8px 20px rgba(105,52,216,.22);
}
.isk-stats-earn .isk-stat .n, .isk-stats-earn .isk-stat.c .n, .isk-stats-earn .isk-stat.p .n {
  color: #fff; font-size: 1.85rem; text-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.isk-stats-earn .isk-stat .l { color: rgba(255,255,255,.92); font-weight: 700; }
.isk-stats-earn .isk-stat:nth-child(even) { background: linear-gradient(135deg, #7a36e9, #d52a87 60%, #fb6334); }

.isk-resume {
  margin-top: 20px; border-radius: var(--isk-radius-lg); padding: 22px 24px;
  background: linear-gradient(115deg, rgba(109,58,240,.14), rgba(255,77,141,.08)), var(--isk-surface);
  border: 1px solid rgba(109,58,240,.25);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.isk-resume .tag { font-family: 'IBM Plex Mono'; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--isk-violet-2); }
.isk-resume h3 { font-size: 1.12rem; margin-top: 7px; }
.isk-resume-bar-wrap { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.isk-bar { width: 200px; max-width: 45vw; height: 7px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.isk-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--isk-violet), var(--isk-magenta)); }
.isk-resume .pct { font-family: 'IBM Plex Mono'; font-size: .78rem; color: var(--isk-text-soft); }
.isk-btn-resume {
  border: none; border-radius: 9999px; padding: 13px 22px; font-weight: 700; font-size: .87rem;
  background: linear-gradient(100deg, #3B4CE0 0%, #B02E97 50%, #E8452B 100%); color: #fff;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans'; box-shadow: 0 8px 22px rgba(176, 46, 151, 0.32);
  transition: transform .15s ease, box-shadow .15s ease;
}
.isk-btn-resume:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(176, 46, 151, 0.45); }

.isk-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 32px 0 15px; gap: 12px; flex-wrap: wrap; }
.isk-sec-head h2 { font-size: 1.02rem; }
.isk-sec-head a { font-size: .83rem; color: var(--isk-magenta-deep); font-weight: 600; }

.isk-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; }
.isk-ccard { background: var(--isk-surface); border: 1px solid var(--isk-line); border-radius: var(--isk-radius); overflow: hidden; display: block; color: inherit; box-shadow: 0 2px 10px rgba(22,20,43,.04); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.isk-ccard:hover { border-color: rgba(109,58,240,.4); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22,20,43,.1); }
.isk-ccard .thumb {
  /* Deliberately kept as a rich dark "poster" treatment regardless of the
     surrounding light theme — course covers, not page chrome. */
  height: 104px; position: relative; background-size: cover; background-position: center;
  background-color: #1B1436;
  background-image: linear-gradient(135deg, rgba(42,31,99,.85), rgba(27,20,54,.85) 55%, rgba(58,18,48,.85)), var(--isk-thumb, none);
}
.isk-ring-wrap { position: absolute; right: 12px; top: 12px; width: 42px; height: 42px; }
.isk-ring { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--isk-gold) calc(var(--p, 0) * 1%), rgba(255,255,255,.16) 0); display: flex; align-items: center; justify-content: center; }
.isk-ring.done { background: conic-gradient(var(--isk-mint) 100%, transparent 0); }
.isk-ring span { width: 32px; height: 32px; border-radius: 50%; background: #1B1436; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono'; font-size: 10px; }
.isk-ccard .body { padding: 14px 15px 17px; }
.isk-ccard .body h4 { font-size: .95rem; font-weight: 600; font-family: 'Plus Jakarta Sans'; }
.isk-ccard .meta { display: flex; gap: 7px; margin-top: 7px; font-size: 11px; color: var(--isk-text-faint); }
.isk-pill { font-size: 10px; padding: 3px 8px; border-radius: 99px; font-family: 'IBM Plex Mono'; display: inline-block; margin-top: 10px; }
.isk-pill.progress { background: rgba(200,136,10,.12); color: var(--isk-gold); }
.isk-pill.done { background: rgba(15,174,115,.12); color: var(--isk-mint-deep); }
.isk-pill.new { background: rgba(0,0,0,.05); color: var(--isk-text-soft); }
.isk-pill.bad { background: rgba(194,54,82,.1); color: var(--isk-red-deep); }
.isk-pill.locked { background: rgba(109,58,240,.12); color: var(--isk-violet-2); font-weight: 700; }
.isk-ccard-locked .thumb { filter: grayscale(.4); opacity: .85; }
.isk-lock-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(22,20,43,.35); color: #fff;
}
.isk-ccard-locked:hover .thumb { filter: grayscale(0); opacity: 1; }
.isk-ccard .cta { margin-top: 12px; font-size: .82rem; font-weight: 700; color: var(--isk-magenta-deep); display: flex; align-items: center; gap: 6px; }

/* ---------- empty state ---------- */
.isk-empty { text-align: center; padding: 64px 24px; background: var(--isk-surface); border: 1px dashed var(--isk-line); border-radius: var(--isk-radius-lg); }
.isk-empty .ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(109,58,240,.1); color: var(--isk-violet-2); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.isk-empty h3 { font-size: 1.1rem; }
.isk-empty p { color: var(--isk-text-soft); font-size: .9rem; margin: 8px 0 20px; max-width: 40ch; margin-left: auto; margin-right: auto; }

/* ---------- generic card + buttons ---------- */
.isk-card { background: var(--isk-surface); border: 1px solid var(--isk-line); border-radius: var(--isk-radius-lg); padding: 24px 26px; box-shadow: 0 2px 10px rgba(22,20,43,.04); }
.isk-card + .isk-card { margin-top: 16px; }
.isk-card h2 { font-size: 1.08rem; margin-bottom: 4px; }
.isk-card-sub { color: var(--isk-text-soft); font-size: .87rem; margin: 0 0 18px; }

.isk-btn {
  display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 9999px;
  padding: 11px 20px; font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: .86rem; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.isk-btn-primary {
  background: linear-gradient(100deg, #3B4CE0 0%, #B02E97 50%, #E8452B 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(176, 46, 151, 0.32);
}
.isk-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(176, 46, 151, 0.45); }
.isk-btn-outline {
  background: var(--isk-surface);
  border: 1.5px solid var(--isk-line); color: var(--isk-violet-2);
  box-shadow: none;
}
.isk-btn-outline:hover { transform: translateY(-2px); border-color: var(--isk-violet); background: rgba(109,58,240,.06); }
.isk-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- forms (Profile & Security) ---------- */
.isk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .isk-form-row { grid-template-columns: 1fr; } }
.isk-form-field { margin-bottom: 16px; }
.isk-form-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--isk-text-soft); margin-bottom: 7px; }
.isk-form-field input {
  width: 100%; background: var(--isk-canvas); border: 1.5px solid var(--isk-line); border-radius: 10px;
  padding: 11px 13px; color: var(--isk-text); font-family: 'Plus Jakarta Sans'; font-size: .92rem;
}
.isk-form-field input:focus { outline: none; border-color: var(--isk-violet); box-shadow: 0 0 0 3px rgba(109,58,240,.12); }
.isk-form-alert { padding: 11px 14px; border-radius: 10px; font-size: .85rem; margin-bottom: 16px; }
.isk-form-alert.is-good { background: rgba(15,174,115,.1); color: var(--isk-mint-deep); border: 1px solid rgba(15,174,115,.25); }
.isk-form-alert.is-bad { background: rgba(194,54,82,.08); color: var(--isk-red-deep); border: 1px solid rgba(194,54,82,.25); }

/* ---------- embedded WooCommerce panels (Orders, Profile) ----------
   WooCommerce's own markup is a light-theme system already, so it now
   blends naturally — kept as a distinct card purely for visual grouping. */
.isk-wc-island {
  background: var(--isk-surface-2); color: var(--isk-text); border-radius: var(--isk-radius-lg);
  padding: 28px 30px; border: 1px solid var(--isk-line);
}
.isk-wc-island a { color: var(--isk-violet); }
.isk-wc-island table { width: 100%; border-collapse: collapse; }
.isk-wc-island .woocommerce-MyAccount-navigation { display: none; } /* we already have our own nav */

/* ---------- affiliate / certificates / wishlist reuse the card + grid system above ---------- */
.isk-aff-codebar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(100deg, #3B4CE0 0%, #B02E97 50%, #E8452B 100%);
  border-radius: 14px; padding: 16px 20px; margin-bottom: 14px;
  box-shadow: 0 8px 22px rgba(176, 46, 151, 0.28);
}
.isk-aff-codebar-label { color: rgba(255,255,255,.85); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.isk-aff-codebar-value { color: #fff; font-family: 'IBM Plex Mono'; font-size: 1.3rem; font-weight: 700; letter-spacing: .03em; }
.isk-aff-codebar-copy {
  margin-left: auto; border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12);
  color: #fff; border-radius: 9px; padding: 8px 14px; font-weight: 700; font-size: .82rem;
  cursor: pointer; transition: background .15s ease;
}
.isk-aff-codebar-copy:hover { background: rgba(255,255,255,.22); }
@media (max-width: 480px) {
  .isk-aff-codebar-copy { margin-left: 0; width: 100%; }
}
.isk-aff-linkbox { background: var(--isk-surface-2); border: 1px solid var(--isk-line); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.isk-aff-linkbox label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--isk-text-faint); }
.isk-aff-link-row { display: flex; gap: 10px; margin-top: 8px; }
.isk-aff-link-row input { flex: 1; background: var(--isk-canvas); border: 1px solid var(--isk-line); border-radius: 9px; padding: 10px 12px; color: var(--isk-text); font-family: 'IBM Plex Mono'; font-size: .82rem; }

.isk-aff-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.isk-aff-table thead th {
  text-align: left; color: var(--isk-text-faint); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  padding: 0 4px 12px; border-bottom: 1px solid var(--isk-line);
}
.isk-aff-table tbody td { padding: 13px 4px; border-bottom: 1px solid var(--isk-line); color: var(--isk-text); }
.isk-aff-table tbody tr:last-child td { border-bottom: none; }
.isk-aff-table tbody tr:hover { background: var(--isk-surface-2); }
.isk-aff-table .isk-mono { color: var(--isk-text); font-weight: 600; }
.isk-aff-empty-row td { padding: 28px 4px; color: var(--isk-text-soft); text-align: center; }
.isk-aff-payout-note {
  margin-top: 18px; display: flex; align-items: center; gap: 10px;
  background: var(--isk-surface-2); border: 1px solid var(--isk-line);
  border-radius: 12px; padding: 13px 16px; font-size: .84rem; color: var(--isk-text-soft);
}

/* =========================================================================
 * LESSON PLAYER — reskin of the existing cinema-mode markup to the new
 * token system. Structure/layout stays as-is (main.css); this overrides
 * color, type, and a handful of visual treatments to match the app shell.
 * The base main.css rules assume a dark player (#0A0A18 canvas, white
 * text throughout) so every text color needs an explicit override here —
 * not just the backgrounds.
 * ====================================================================== */
.is-app-shell .is-cinema-player { background: var(--isk-canvas); color: var(--isk-text); }
.is-app-shell .is-player-header {
  background: var(--isk-surface); border-bottom: 1px solid var(--isk-line);
}
.is-app-shell .is-player-back-btn { color: var(--isk-text-soft); }
.is-app-shell .is-player-back-btn:hover { color: var(--isk-text); }
.is-app-shell .is-current-lesson-indicator { font-family: 'Plus Jakarta Sans'; color: var(--isk-text); font-weight: 600; }
.is-app-shell .is-progress-ring-mini span,
.is-app-shell .is-progress-text { font-family: 'IBM Plex Mono'; }
.is-app-shell .is-progress-ring-mini {
  background: conic-gradient(var(--isk-gold) var(--ring-pct, 0%), rgba(0,0,0,.1) 0);
}
/* .is-btn-sidebar-toggle intentionally left with no override — inherits
   the unified gradient like every other button (self-contained, works on
   any background). */

.is-app-shell .is-badge.is-badge-purple {
  background: rgba(109,58,240,.12); color: var(--isk-violet-2);
  font-family: 'IBM Plex Mono'; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
}
.is-app-shell .is-lesson-title { font-family: 'Unbounded'; color: var(--isk-text); font-size: 1.35rem; }
.is-app-shell .is-lesson-notes-card,
.is-app-shell .is-lesson-resources-card {
  background: var(--isk-surface); border: 1px solid var(--isk-line); border-radius: var(--isk-radius-lg);
}
.is-app-shell .is-lesson-notes-card h3,
.is-app-shell .is-lesson-resources-card h3 { font-family: 'Unbounded'; font-size: .95rem; color: var(--isk-text); }
.is-app-shell .is-lesson-notes-card .entry-content { color: var(--isk-text-soft); }
.is-app-shell .is-resource-pill { background: var(--isk-surface-2); border: 1px solid var(--isk-line); color: var(--isk-text); }
.is-app-shell .is-resource-pill:hover { border-color: var(--isk-violet); }
.is-app-shell .is-resource-icon { color: var(--isk-violet-2); }
.is-app-shell .is-resource-meta span { color: var(--isk-text-faint); }

.is-app-shell .is-lesson-complete.is-btn-primary,
.is-app-shell .is-player-control-bar .is-btn-primary {
  background: linear-gradient(100deg, #3B4CE0 0%, #B02E97 50%, #E8452B 100%);
  border-color: transparent;
}
.is-app-shell .is-lesson-complete.is-done { background: var(--isk-mint); border-color: transparent; }
.is-app-shell .is-btn-gold { background: linear-gradient(100deg, #3B4CE0 0%, #B02E97 50%, #E8452B 100%); color: #fff; border-color: transparent; }
/* .is-btn-outline.is-btn-control (Previous Lesson) intentionally left with
   no override — inherits the unified gradient like every other button. */

.is-app-shell .is-player-drawer { background: var(--isk-surface); border-left: 1px solid var(--isk-line); }
.is-app-shell .is-drawer-header { border-bottom-color: var(--isk-line); }
.is-app-shell .is-drawer-header h3 { font-family: 'Unbounded'; font-size: .92rem; color: var(--isk-text); }
.is-app-shell .is-drawer-progress span { font-family: 'IBM Plex Mono'; color: var(--isk-text-faint); }
.is-app-shell .is-dash-bar-modern { background: rgba(0,0,0,.08); }
.is-app-shell .is-dash-bar-modern i { background: linear-gradient(90deg, var(--isk-violet), var(--isk-magenta)) !important; }
.is-app-shell .is-drawer-section-title { color: var(--isk-text-faint); }
.is-app-shell .is-drawer-item { color: var(--isk-text-soft); }
.is-app-shell .is-drawer-item:hover { background: rgba(0,0,0,.04); color: var(--isk-text); }
.is-app-shell .is-drawer-item.is-active {
  background: linear-gradient(100deg, rgba(109,58,240,.14), rgba(255,77,141,.08));
  color: var(--isk-violet-2); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--isk-violet);
}
.is-app-shell .is-drawer-item.is-completed .is-drawer-item-icon { color: var(--isk-mint-deep); }
.is-app-shell .is-drawer-item-icon { color: var(--isk-text-faint); }
.is-app-shell .is-drawer-item.is-locked,
.is-app-shell .is-drawer-item.is-locked:hover { color: var(--isk-text-faint); background: none; }

/* the "complete this lesson to continue" placeholder + note */
.is-app-shell .is-btn.is-btn-disabled { font-family: 'Plus Jakarta Sans'; }

.isk-locked-note {
  margin-bottom: 18px; display: flex; align-items: center; gap: 12px;
  background: var(--isk-surface-2); border: 1px solid var(--isk-line); border-radius: 14px; padding: 15px 17px;
}
.isk-locked-note .ic {
  width: 32px; height: 32px; border-radius: 9px; background: rgba(200,136,10,.14); color: var(--isk-gold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.isk-locked-note b { font-size: .87rem; display: block; color: var(--isk-text); font-family: 'Plus Jakarta Sans'; }
.isk-locked-note span { font-size: .8rem; color: var(--isk-text-soft); }

/* Traceability watermark on lesson video — deters re-sharing by identifying
   who a leaked recording came from. Doesn't (can't) block screen capture.
   Kept white-on-shadow regardless of page theme: it overlays the video
   itself, whose content/brightness is unpredictable, not the page chrome. */
.is-video-watermark {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(10px, 1.3vw, 13px);
  color: rgba(255, 255, 255, 0.38);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  animation: isk-wm-drift 45s linear infinite;
}
.is-video-watermark span { padding: 4px 9px; }
/* Stays in the top ~28% of the frame only — native Vimeo/YouTube controls
   live at the bottom and must never be covered or the player becomes
   unusable (confirmed broken on mobile before this fix). */
@keyframes isk-wm-drift {
  0%   { top: 6%;  left: 6%; }
  33%  { top: 6%;  left: 62%; }
  66%  { top: 24%; left: 62%; }
  100% { top: 24%; left: 6%; }
}
@media (prefers-reduced-motion: reduce) {
  .is-video-watermark { animation: none; top: 8%; left: 8%; }
}

/* =========================================================================
 * COURSE PAGE — enrolled viewers only (guests keep the light sales page,
 * which was already light — this section makes the enrolled view match).
 * ====================================================================== */
.is-app-shell .is-course-hero-modern { background: linear-gradient(180deg, var(--isk-canvas) 0%, var(--isk-surface) 100%); }
.is-app-shell .is-course-hero-modern .is-breadcrumbs a { color: var(--isk-text-soft); }
.is-app-shell .is-course-hero-modern .is-breadcrumbs span { color: var(--isk-text); }
.is-app-shell .is-course-title-modern,
.is-app-shell .is-lesson-title { font-family: 'Unbounded'; color: var(--isk-text); }
.is-app-shell .is-course-lead-modern { color: var(--isk-text-soft); }
.is-app-shell .is-course-badge.is-badge-purple { background: rgba(109,58,240,.12); color: var(--isk-violet-2); }
.is-app-shell .is-course-stats-strip { border-top-color: var(--isk-line); }
.is-app-shell .is-stat-icon { background: rgba(109,58,240,.1); border-color: rgba(109,58,240,.2); color: var(--isk-violet-2); }
.is-app-shell .is-course-stat-item strong { color: var(--isk-text); }
.is-app-shell .is-course-stat-item span { color: var(--isk-text-soft); }

.is-app-shell .is-course-sidebar-card { background: var(--isk-surface); border-color: var(--isk-line); box-shadow: 0 2px 10px rgba(22,20,43,.05); }
.is-app-shell .is-enrolled-status-box { background: var(--isk-surface-2); border-color: var(--isk-line); }
.is-app-shell .is-enrolled-status-box span { color: var(--isk-text-soft); }
.is-app-shell .is-enrolled-status-box strong { color: var(--isk-gold); font-family: 'IBM Plex Mono'; }
.is-app-shell .is-course-includes-list h4 { color: var(--isk-text); font-family: 'Unbounded'; font-size: .85rem; }
.is-app-shell .is-course-includes-list li { color: var(--isk-text-soft); }
.is-app-shell .is-btn.is-btn-primary.is-glow { background: linear-gradient(100deg, #3B4CE0 0%, #B02E97 50%, #E8452B 100%); border-color: transparent; }

.is-app-shell .is-course-section-card { background: var(--isk-surface); border-color: var(--isk-line); box-shadow: 0 2px 10px rgba(22,20,43,.04); }
.is-app-shell .is-section-title-modern { color: var(--isk-text); font-family: 'Unbounded'; }
.is-app-shell .is-article-body,
.is-app-shell .is-outcome-item,
.is-app-shell .is-muted { color: var(--isk-text-soft); }
.is-app-shell .is-outcome-check { color: var(--isk-mint-deep); }

.is-app-shell .is-cur-sec-modern { background: var(--isk-surface-2); }
.is-app-shell .is-cur-sec-modern h3 { color: var(--isk-text); }
.is-app-shell .is-cur-lsn-modern { background: var(--isk-surface); border-top-color: var(--isk-line); }
.is-app-shell .is-cur-lsn-link { color: var(--isk-text); }
.is-app-shell .is-cur-lsn-link:hover { color: var(--isk-magenta-deep); }
.is-app-shell .is-cur-lsn-locked-title { color: var(--isk-text-faint); }
.is-app-shell .is-cur-lsn-modern.is-done .is-cur-lsn-status-icon { color: var(--isk-mint-deep); }
.is-app-shell .is-cur-lsn-modern.is-accessible .is-cur-lsn-status-icon { color: var(--isk-violet); }
.is-app-shell .is-lsn-type-tag { color: var(--isk-text-faint); }

.is-app-shell .is-instructor-card { background: var(--isk-surface); border-color: var(--isk-line); }
.is-app-shell .is-instructor-info h3 { color: var(--isk-text); font-family: 'Unbounded'; font-size: 1.05rem; }
.is-app-shell .is-instructor-info p { color: var(--isk-text-soft); }

/* =========================================================================
 * RESPONSIVE SAFETY NET
 * The learning app shares older cinema-player markup with the newer app
 * shell.  Its desktop `width: 100%` stage used content-box sizing, adding
 * the horizontal padding *outside* the viewport on phones.  Keep sizing
 * inside the viewport and let long course/resource labels wrap instead of
 * pushing the page sideways.
 * ====================================================================== */
.is-app-shell,
.is-app-shell .is-cinema-player { max-width: 100%; overflow-x: clip; }
.is-app-shell *,
.is-app-shell *::before,
.is-app-shell *::after { box-sizing: border-box; }
.is-app-shell img,
.is-app-shell iframe,
.is-app-shell video { max-width: 100%; }
.is-app-shell .is-player-stage { box-sizing: border-box; min-width: 0; }
.is-app-shell .is-lesson-info-panel,
.is-app-shell .is-lesson-notes-card,
.is-app-shell .is-lesson-resources-card,
.is-app-shell .is-resource-pill { min-width: 0; }
.is-app-shell .is-lesson-notes-card .entry-content,
.is-app-shell .is-resource-meta,
.is-app-shell .is-resource-meta strong { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .is-app-shell .is-player-stage { padding: 16px; }
  .is-app-shell .is-video-cinema-box { border-radius: 14px; margin-bottom: 18px; }
  .is-app-shell .is-lesson-info-panel { padding: 18px; margin-bottom: 20px; border-radius: 16px; }
  .is-app-shell .is-lesson-header-row { gap: 14px; margin-bottom: 18px; padding-bottom: 16px; }
  .is-app-shell .is-lesson-complete { width: 100%; justify-content: center; }
  .is-app-shell .is-lesson-notes-card,
  .is-app-shell .is-lesson-resources-card { padding: 16px; }
  .is-app-shell .is-resource-pills { grid-template-columns: minmax(0, 1fr); }
  .is-app-shell .is-resource-pill { padding: 13px; }
  .is-app-shell .is-player-control-bar { align-items: stretch; flex-direction: column; gap: 10px; }
  .is-app-shell .is-player-control-bar .is-btn-control,
  .is-app-shell .is-player-control-bar .is-btn-placeholder { width: 100%; justify-content: center; }
  .is-app-shell .is-btn-control { min-height: 48px; padding: 12px 16px; text-align: center; white-space: normal; }
}

@media (max-width: 380px) {
  .is-app-shell .is-player-header { padding-inline: 10px; }
  .is-app-shell .is-player-progress-badge { display: none; }
  .is-app-shell .is-lesson-title { font-size: 1.08rem; }
}
/* Bilingual lesson selector */
.is-lesson-language-switch{display:inline-flex;gap:4px;margin:0 0 10px;padding:4px;border:1px solid rgba(132,92,246,.32);border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(24,22,70,.08)}
.is-lesson-language-switch a{padding:7px 13px;border-radius:8px;color:#554f70;font-weight:750;font-size:13px;line-height:1;text-decoration:none}
.is-lesson-language-switch a.is-active{color:#fff;background:linear-gradient(110deg,#5138e8,#b12ab8 55%,#f05231)}
@media(max-width:600px){.is-lesson-language-switch{margin:0 0 8px}.is-lesson-language-switch a{padding:7px 11px}}