:root {
  --onc-navy: #060927;
  --onc-navy-soft: #111632;
  --onc-card: #141a3b;
  --onc-card-2: #1a2150;
  --onc-orange: #ff7900;
  --onc-orange-2: #ff9a48;
  --onc-purple: #7568ee;
  --onc-white: #ffffff;
  --onc-muted: #b8bdd2;
  --onc-light: #f5f6fb;
  --onc-line: rgba(255,255,255,.12);
  --onc-shadow: 0 24px 70px rgba(3, 6, 30, .28);
}

.onc-template-main,
.onc-course-landing,
.onc-shell,
.onc-player,
.onc-auth-card,
.onc-unlock-card {
  box-sizing: border-box;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.onc-template-main { background: var(--onc-navy); min-height: 70vh; }
.onc-course-landing { background: var(--onc-navy); color: var(--onc-white); overflow: hidden; }
.onc-course-landing *,
.onc-shell *,
.onc-player *,
.onc-auth-card *,
.onc-unlock-card * { box-sizing: border-box; }

.onc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--onc-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.onc-kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; }

.onc-course-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  align-items: center;
  gap: 58px;
  max-width: 1320px;
  min-height: 720px;
  padding: 92px 40px 80px;
  margin: 0 auto;
}
.onc-course-hero::before {
  content: "";
  position: absolute;
  width: 760px;
  height: 760px;
  left: -360px;
  top: -180px;
  border-radius: 50%;
  border: 120px solid rgba(255,255,255,.035);
  box-shadow: 0 0 0 140px rgba(255,255,255,.02);
}
.onc-hero-copy { position: relative; z-index: 2; }
.onc-hero-copy h1 {
  margin: 20px 0 22px;
  color: #fff;
  font-size: clamp(46px, 5vw, 82px);
  line-height: 1.02;
  letter-spacing: -.04em;
  max-width: 780px;
}
.onc-hero-lead {
  max-width: 720px;
  color: #d1d5e7;
  font-size: 18px;
  line-height: 1.8;
  margin: 0 0 26px;
}
.onc-hero-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.onc-hero-facts span {
  border: 1px solid var(--onc-line);
  background: rgba(255,255,255,.04);
  color: #edf0fb;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.onc-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.onc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 7px;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.onc-btn:hover { transform: translateY(-2px); }
.onc-btn-primary { background: linear-gradient(135deg, var(--onc-orange), #ff8f2f); color: #fff !important; box-shadow: 0 14px 28px rgba(255,121,0,.24); }
.onc-btn-primary:hover { background: linear-gradient(135deg, #ff8c22, var(--onc-orange)); }
.onc-btn-disabled { background: rgba(255,255,255,.08); color: #c9ccdb; cursor: not-allowed; }
.onc-big-price { color: #fff; font-size: 26px; font-weight: 900; }

.onc-hero-visual { position: relative; min-height: 550px; display: grid; place-items: center; }
.onc-cover-ring {
  position: relative;
  z-index: 2;
  width: min(470px, 90vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 24px;
  background: conic-gradient(from 20deg, var(--onc-orange), #ffb36e 25%, var(--onc-purple) 67%, var(--onc-orange));
  box-shadow: var(--onc-shadow);
}
.onc-cover-ring::before { content: ""; position: absolute; inset: 11px; border-radius: inherit; border: 1px solid rgba(255,255,255,.35); pointer-events: none; }
.onc-cover-ring img,
.onc-cover-fallback { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #202755; color: #fff; font-size: 70px; font-weight: 900; }
.onc-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(117,104,238,.45); }
.onc-orbit-one { width: 540px; height: 540px; }
.onc-orbit-two { width: 650px; height: 650px; border-style: dashed; opacity: .45; }
.onc-floating-badge {
  position: absolute;
  z-index: 3;
  left: 2%;
  bottom: 10%;
  padding: 16px 20px;
  color: #fff;
  background: var(--onc-card);
  border: 1px solid var(--onc-line);
  border-radius: 12px;
  box-shadow: var(--onc-shadow);
  font-weight: 800;
}
.onc-floating-badge::before { content: "✦"; color: var(--onc-orange); margin-right: 8px; }

.onc-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: -30px auto 90px;
  padding: 0 34px;
  position: relative;
  z-index: 4;
}
.onc-benefits > div {
  background: var(--onc-card);
  border: 1px solid rgba(117,104,238,.25);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  position: relative;
  overflow: hidden;
}
.onc-benefits > div::after { content: ""; position: absolute; right: -36px; bottom: -36px; width: 100px; height: 100px; background: var(--onc-card-2); transform: rotate(45deg); }
.onc-benefits b { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--onc-orange); color: #fff; font-size: 23px; margin-bottom: 20px; }
.onc-benefits h3 { color: #fff; font-size: 19px; margin: 0 0 10px; }
.onc-benefits p { color: var(--onc-muted); line-height: 1.7; margin: 0; }

.onc-curriculum-preview {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 32px 110px;
}
.onc-section-heading { text-align: center; max-width: 760px; margin: 0 auto 38px; }
.onc-section-heading-left { text-align: left; margin-left: 0; }
.onc-section-heading h2 { color: inherit; margin: 12px 0 12px; font-size: clamp(34px, 4vw, 50px); letter-spacing: -.035em; }
.onc-section-heading p { color: #6c7388; font-size: 17px; line-height: 1.7; }
.onc-course-landing .onc-section-heading p { color: var(--onc-muted); }
.onc-preview-list { display: grid; gap: 8px; }
.onc-preview-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 15px;
  min-height: 64px;
  padding: 10px 18px;
  background: #fff;
  color: #111632;
  border-radius: 8px;
}
.onc-preview-item span { color: var(--onc-orange); font-weight: 900; }
.onc-preview-item i { color: var(--onc-purple); font-style: normal; }

.onc-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 90px 32px;
  color: #111632;
}
.onc-catalog-section { max-width: 1400px; }
.onc-course-grid { display: grid; grid-template-columns: repeat(var(--onc-columns), minmax(0, 1fr)); gap: 26px; }
.onc-course-card {
  background: #fff;
  border: 1px solid #e8eaf2;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 42px rgba(17,22,50,.09);
  transition: transform .25s ease, box-shadow .25s ease;
}
.onc-course-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(17,22,50,.15); }
.onc-card-media { display: block; position: relative; aspect-ratio: 16/10; background: #dce2f5; overflow: hidden; }
.onc-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.onc-course-card:hover .onc-card-media img { transform: scale(1.04); }
.onc-card-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--onc-navy-soft), var(--onc-purple)); color: #fff; font-size: 44px; font-weight: 900; }
.onc-card-price { position: absolute; right: 15px; bottom: 15px; background: var(--onc-orange); color: #fff; padding: 8px 12px; border-radius: 7px; font-weight: 900; font-size: 14px; }
.onc-card-body { padding: 23px; }
.onc-card-meta { display: flex; gap: 14px; color: #747b90; font-size: 12px; font-weight: 700; }
.onc-card-body h3 { margin: 12px 0 10px; font-size: 23px; line-height: 1.25; }
.onc-card-body h3 a { color: #111632; text-decoration: none; }
.onc-card-body p { min-height: 48px; margin: 0 0 18px; color: #686f82; line-height: 1.65; }
.onc-arrow-link { color: var(--onc-orange); text-decoration: none !important; font-weight: 900; }
.onc-arrow-link span { margin-left: 5px; }
.onc-mini-progress { height: 8px; background: #eceefa; border-radius: 999px; overflow: hidden; margin: 16px 0 6px; }
.onc-mini-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--onc-orange), var(--onc-purple)); }
.onc-mini-progress-label { color: #7c8398; font-size: 12px; margin-bottom: 15px; }

.onc-empty,
.onc-auth-card,
.onc-unlock-card {
  max-width: 760px;
  margin: 70px auto;
  padding: 40px;
  border: 1px solid #e4e7f0;
  background: #fff;
  color: #111632;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 18px 60px rgba(17,22,50,.12);
}
.onc-auth-card p,
.onc-unlock-card p { color: #6e7487; }
.onc-unlock-card form { display: flex; gap: 10px; max-width: 500px; margin: 24px auto 0; }
.onc-unlock-card input { flex: 1; min-height: 52px; padding: 0 16px; border: 1px solid #dfe3ee; border-radius: 8px; }
.onc-lock-icon { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 15px; display: grid; place-items: center; background: #fff2e5; color: var(--onc-orange); font-size: 34px; }
.onc-form-error { background: #fff1f0; color: #b42318; padding: 10px 12px; border-radius: 8px; margin-top: 12px; }

.onc-player {
  max-width: 1160px;
  margin: 50px auto 90px;
  padding: 0 28px;
  color: #111632;
}
.onc-player-header { display: flex; justify-content: space-between; gap: 30px; align-items: end; padding: 38px; background: linear-gradient(135deg, var(--onc-navy), #171d46); color: #fff; border-radius: 22px 22px 0 0; }
.onc-player-header h1 { color: #fff; font-size: clamp(34px, 5vw, 54px); margin: 13px 0 0; letter-spacing: -.035em; }
.onc-player-back { color: #fff; text-decoration: none; border: 1px solid var(--onc-line); padding: 10px 14px; border-radius: 8px; white-space: nowrap; }
.onc-progress-card { padding: 24px 38px 30px; background: #111632; color: #fff; border-radius: 0 0 22px 22px; }
.onc-progress-top { display: flex; justify-content: space-between; margin-bottom: 10px; }
.onc-progress-value { color: var(--onc-orange); font-weight: 900; }
.onc-progress-track { height: 12px; background: rgba(255,255,255,.11); border-radius: 999px; overflow: hidden; }
.onc-progress-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--onc-orange), var(--onc-purple)); border-radius: inherit; transition: width .35s ease; }
.onc-intro-panel { margin: 28px 0; padding: 30px; border: 1px solid #e4e7f0; border-radius: 16px; background: #fff; }
.onc-intro-panel h2 { margin-top: 0; }
.onc-rich-text { color: #4f566b; line-height: 1.8; }
.onc-rich-text h1,
.onc-rich-text h2,
.onc-rich-text h3 { color: #111632; }
.onc-rich-text img { max-width: 100%; height: auto; border-radius: 10px; }
.onc-module-list { display: grid; gap: 13px; }
.onc-module-panel { background: #fff; border: 1px solid #e4e7f0; border-radius: 14px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.onc-module-panel.is-complete { border-color: rgba(117,104,238,.45); box-shadow: 0 10px 30px rgba(117,104,238,.08); }
.onc-module-toggle { width: 100%; display: grid; grid-template-columns: 56px 1fr auto 26px; align-items: center; gap: 15px; text-align: left; border: 0; background: #fff; min-height: 74px; padding: 10px 20px; cursor: pointer; color: #111632; }
.onc-module-toggle:hover { background: #fafaff; }
.onc-module-number { font-weight: 900; color: var(--onc-orange); }
.onc-module-name { font-size: 17px; font-weight: 800; }
.onc-module-state { color: #8a90a4; font-size: 12px; font-weight: 700; }
.is-complete .onc-module-state { color: var(--onc-purple); }
.onc-chevron { transition: transform .2s ease; }
.onc-module-toggle[aria-expanded="true"] .onc-chevron { transform: rotate(180deg); }
.onc-module-content { padding: 4px 28px 28px 92px; border-top: 1px solid #eff1f6; }
.onc-module-content[hidden] { display: none; }
.onc-video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; margin: 24px 0; overflow: hidden; border-radius: 14px; background: #050716; }
.onc-video-wrap iframe,
.onc-video-wrap video { width: 100%; height: 100%; border: 0; object-fit: contain; }
.onc-complete-btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #daddeb; background: #fff; color: #111632; border-radius: 8px; padding: 11px 15px; font-weight: 800; cursor: pointer; margin-top: 12px; }
.onc-complete-btn.is-complete { background: #f2f0ff; color: #5749d5; border-color: #cfc9ff; }
.onc-complete-btn.is-loading { opacity: .6; }
.onc-check { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #eef0f6; }
.onc-complete-btn.is-complete .onc-check { background: var(--onc-purple); color: #fff; }
.onc-text-link { color: var(--onc-orange); }

@media (max-width: 1020px) {
  .onc-course-hero { grid-template-columns: 1fr; padding-top: 70px; text-align: center; }
  .onc-hero-copy { max-width: 820px; margin: 0 auto; }
  .onc-hero-lead { margin-left: auto; margin-right: auto; }
  .onc-hero-facts,
  .onc-hero-actions { justify-content: center; }
  .onc-hero-visual { min-height: 500px; }
  .onc-benefits { grid-template-columns: 1fr; margin-top: 0; }
  .onc-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .onc-course-hero { padding: 54px 20px 40px; min-height: auto; }
  .onc-hero-copy h1 { font-size: 43px; }
  .onc-hero-lead { font-size: 16px; }
  .onc-hero-visual { min-height: 390px; }
  .onc-cover-ring { width: min(340px, 86vw); padding: 17px; }
  .onc-orbit-one { width: 390px; height: 390px; }
  .onc-orbit-two { width: 460px; height: 460px; }
  .onc-floating-badge { left: 6%; bottom: 3%; font-size: 12px; }
  .onc-benefits { padding: 0 20px; margin-bottom: 65px; }
  .onc-curriculum-preview,
  .onc-shell { padding-left: 20px; padding-right: 20px; }
  .onc-course-grid { grid-template-columns: 1fr; }
  .onc-preview-item { grid-template-columns: 42px 1fr auto; }
  .onc-player { padding: 0 14px; margin-top: 25px; }
  .onc-player-header { align-items: flex-start; flex-direction: column; padding: 26px; }
  .onc-progress-card { padding: 22px 26px; }
  .onc-module-toggle { grid-template-columns: 40px 1fr 24px; padding: 10px 14px; }
  .onc-module-state { grid-column: 2; }
  .onc-chevron { grid-column: 3; grid-row: 1 / span 2; }
  .onc-module-content { padding: 20px; }
  .onc-unlock-card form { flex-direction: column; }
}

/* Version 1.1 additions */
body.onc-fullwidth-active #secondary,
body.onc-fullwidth-active .sidebar,
body.onc-fullwidth-active .widget-area,
body.onc-fullwidth-active aside#secondary { display: none !important; }
body.onc-fullwidth-active .site-content,
body.onc-fullwidth-active .content-area,
body.onc-fullwidth-active #primary { width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; }
.onc-plugin-page-main { background: var(--onc-light); min-height: 70vh; width: 100%; }
.onc-template-main .entry-header { display: none; }
.onc-section-heading h1 { margin: 12px 0; font-size: clamp(38px, 5vw, 58px); line-height: 1.08; letter-spacing: -.04em; color: #111632; }
.onc-course-landing .onc-section-heading h1,
.onc-course-landing .onc-section-heading h2 { color: #fff; }

.onc-hero-kicker-row { display: flex; align-items: center; gap: 13px; }
.onc-hero-kicker-row img { object-fit: contain; border-radius: 8px; }
.onc-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 22px; color: #d5d9e9; font-size: 13px; }
.onc-share-row > span { font-weight: 800; }
.onc-share-row a,
.onc-share-row button { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); padding: 7px 10px; border-radius: 7px; font: inherit; cursor: pointer; }
.onc-share-row a:hover,
.onc-share-row button:hover { border-color: var(--onc-orange); color: #fff; }
.onc-promo-section { max-width: 980px; margin: 0 auto 95px; padding: 0 32px; }
.onc-promo-section .onc-video-wrap { box-shadow: var(--onc-shadow); border: 1px solid rgba(255,255,255,.12); }
.onc-card-title-row { display: flex; align-items: center; gap: 11px; margin: 10px 0; }
.onc-card-title-row h3 { margin: 0; }
.onc-course-icon { flex: 0 0 auto; object-fit: contain; border-radius: 8px; }

.onc-support-card { display: flex; align-items: center; gap: 18px; background: #fff; color: #111632; border: 1px solid #e3e6ef; border-radius: 16px; padding: 22px 24px; margin-top: 28px; box-shadow: 0 12px 35px rgba(17,22,50,.08); }
.onc-support-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: var(--onc-orange); color: #fff; font-size: 25px; font-weight: 900; }
.onc-support-card small { color: #7c8398; font-weight: 700; }
.onc-support-card h3 { margin: 3px 0 4px; }
.onc-support-card p { margin: 0; }
.onc-support-card a { color: var(--onc-purple); text-decoration: none; font-weight: 700; }

.onc-btn-outline { background: #fff; color: #111632 !important; border: 1px solid #daddE8; box-shadow: none; }
.onc-btn-danger { background: #fff1f0; color: #b42318 !important; border: 1px solid #f4c7c3; }
.onc-course-control-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 24px 0; padding: 20px 24px; background: #fff; border: 1px solid #e4e7f0; border-radius: 15px; box-shadow: 0 12px 35px rgba(17,22,50,.07); position: sticky; top: 12px; z-index: 8; }
.onc-timer { display: grid; gap: 3px; }
.onc-timer small { color: #7c8398; font-weight: 700; }
.onc-timer strong { font-size: 27px; letter-spacing: .05em; color: #111632; font-variant-numeric: tabular-nums; }
.onc-course-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.onc-course-controls .onc-btn { min-height: 44px; padding: 0 16px; }
.onc-completed-pill { display: inline-flex; align-items: center; padding: 11px 15px; border-radius: 999px; background: #ecfdf3; color: #067647; font-weight: 800; }
.onc-start-note { margin: 24px 0 0; padding: 13px 15px; border-radius: 9px; background: #fff7ed; color: #9a4b00; font-weight: 700; }
.onc-module-panel.is-locked { opacity: .65; background: #f3f4f8; }
.onc-module-panel.is-locked .onc-module-toggle { background: #f3f4f8; cursor: not-allowed; }
.onc-module-panel.is-unlocked:not(.is-complete) { border-color: rgba(255,121,0,.35); }
.onc-module-toggle:disabled { cursor: not-allowed; }
.onc-complete-btn:disabled { cursor: default; opacity: .75; }
.onc-completion-card { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin: 28px 0; padding: 25px; background: linear-gradient(135deg, #ecfdf3, #f7fffb); border: 1px solid #abefc6; border-radius: 16px; }
.onc-completion-card h3 { margin: 0 0 5px; color: #05603a; }
.onc-completion-card p { margin: 0; color: #36745a; }
.onc-completion-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #079455; font-size: 25px; font-weight: 900; }
.onc-progress-popup { position: fixed; right: 28px; bottom: 28px; z-index: 99999; width: min(380px, calc(100vw - 40px)); padding: 24px; border-radius: 18px; background: #111632; color: #fff; box-shadow: 0 28px 80px rgba(4,8,35,.4); transform: translateY(25px); opacity: 0; transition: .25s ease; }
.onc-progress-popup.is-visible { transform: translateY(0); opacity: 1; }
.onc-progress-popup > button { position: absolute; right: 11px; top: 9px; border: 0; background: none; color: #fff; font-size: 24px; cursor: pointer; }
.onc-progress-popup small { color: #ffad62; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.onc-progress-popup strong { display: block; margin: 8px 0; font-size: 44px; color: #fff; }
.onc-progress-popup p { margin: 0; color: #d5d9e9; }

.onc-purchase-page,
.onc-instructions-page,
.onc-certificate-page { max-width: 1200px; }
.onc-wide-error { max-width: 820px; margin: 0 auto 25px; text-align: center; }
.onc-purchase-form { display: grid; gap: 22px; }
.onc-form-card { background: #fff; border: 1px solid #e3e6ef; border-radius: 18px; padding: 28px; box-shadow: 0 14px 42px rgba(17,22,50,.08); }
.onc-form-card > h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 24px; }
.onc-form-card > h2 > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--onc-orange); color: #fff; font-size: 15px; }
.onc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.onc-form-grid label { display: grid; gap: 7px; color: #30364a; font-weight: 700; }
.onc-form-grid input { width: 100%; min-height: 52px; border: 1px solid #dce0ea; border-radius: 9px; padding: 0 14px; font: inherit; }
.onc-form-grid input:focus { outline: none; border-color: var(--onc-purple); box-shadow: 0 0 0 3px rgba(102,88,232,.12); }
.onc-form-full { grid-column: 1 / -1; }
.onc-honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; }
.onc-purchase-course-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; }
.onc-select-card { position: relative; display: flex; align-items: center; gap: 13px; border: 2px solid #e5e8f0; border-radius: 14px; background: #fff; cursor: pointer; overflow: hidden; transition: .2s ease; }
.onc-select-card:hover { border-color: #b8b2f8; transform: translateY(-2px); }
.onc-select-card input { position: absolute; opacity: 0; pointer-events: none; }
.onc-select-card:has(input:checked) { border-color: var(--onc-purple); box-shadow: 0 0 0 4px rgba(102,88,232,.1); }
.onc-select-card > i { position: absolute; right: 10px; top: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #eceafc; color: #8177d7; font-style: normal; opacity: 0; }
.onc-select-card:has(input:checked) > i { opacity: 1; background: var(--onc-purple); color: #fff; }
.onc-course-select-card { align-items: stretch; flex-direction: column; gap: 0; }
.onc-select-visual { display: grid; place-items: center; aspect-ratio: 16/9; width: 100%; background: linear-gradient(135deg, #111632, #6658e8); color: #fff; font-size: 30px; }
.onc-select-visual img { width: 100%; height: 100%; object-fit: cover; }
.onc-select-copy { display: grid; gap: 5px; padding: 15px 17px 18px; }
.onc-select-copy strong { color: #111632; padding-right: 25px; }
.onc-select-copy small { color: var(--onc-orange); font-size: 16px; font-weight: 900; }
.onc-selected-price { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-top: 19px; padding: 16px 18px; border-radius: 12px; background: #111632; color: #fff; }
.onc-selected-price span { color: #b8bdd2; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.onc-selected-price b { color: var(--onc-orange); font-size: 22px; }
.onc-payment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.onc-payment-select-card { min-height: 90px; padding: 15px; }
.onc-payment-logo { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: #f2f0ff; color: var(--onc-purple); font-size: 24px; font-weight: 900; overflow: hidden; }
.onc-payment-logo img { width: 100%; height: 100%; object-fit: contain; }
.onc-reserve-btn { justify-self: end; min-width: 240px; }

.onc-instruction-hero { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.onc-instruction-hero h1 { font-size: clamp(38px,5vw,58px); margin: 12px 0; }
.onc-instruction-hero p { color: #687086; font-size: 17px; }
.onc-instruction-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 25px; align-items: start; }
.onc-instruction-main { display: grid; gap: 20px; }
.onc-payment-title { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.onc-payment-title img { width: 80px; height: 60px; object-fit: contain; border-radius: 10px; border: 1px solid #e7e9f0; }
.onc-payment-title small { color: #7c8398; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }
.onc-payment-title h2 { margin: 3px 0 0; }
.onc-qr-card { text-align: center; }
.onc-qr-card img { width: min(320px,100%); height: auto; border-radius: 12px; }
.onc-order-summary { background: #111632; color: #fff; border-radius: 18px; padding: 25px; position: sticky; top: 20px; }
.onc-order-summary h3 { margin-top: 0; color: #fff; }
.onc-order-summary dl { margin: 0 0 22px; }
.onc-order-summary dt { color: #9fa6bd; font-size: 12px; font-weight: 800; margin-top: 15px; text-transform: uppercase; }
.onc-order-summary dd { margin: 4px 0 0; font-weight: 700; }
.onc-public-status { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 12px; }
.onc-public-status-approved { background: #067647; }
.onc-public-status-rejected { background: #b42318; }

.onc-certificate-action-card { display: grid; grid-template-columns: 360px 1fr; gap: 38px; align-items: center; background: #fff; border: 1px solid #e3e6ef; border-radius: 20px; padding: 35px; box-shadow: 0 18px 60px rgba(17,22,50,.1); }
.onc-certificate-mini { aspect-ratio: 1.414/1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; border: 8px solid #111632; outline: 3px solid var(--onc-orange); outline-offset: -15px; background: #f9faff; text-align: center; }
.onc-certificate-mini span { color: var(--onc-purple); font-weight: 900; letter-spacing: .13em; }
.onc-certificate-mini strong { font-size: 30px; color: #111632; }
.onc-certificate-mini small { color: #6d7488; }
.onc-certificate-actions-copy h2 { margin-top: 0; }
.onc-cert-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.onc-certificate-share { color: #60677b; }
.onc-certificate-share a { color: #111632; border-color: #dce0ea; background: #fff; }
.onc-certificate-preview { max-width: 980px; margin: 0 auto; min-height: 610px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #fafbff; border: 14px solid #111632; outline: 4px solid var(--onc-orange); outline-offset: -28px; padding: 60px; box-shadow: 0 20px 65px rgba(17,22,50,.16); }
.onc-certificate-preview .onc-cert-top { color: var(--onc-purple); font-weight: 900; letter-spacing: .16em; margin-bottom: 24px; }
.onc-certificate-preview > small { color: #7c8398; text-transform: uppercase; letter-spacing: .1em; }
.onc-certificate-preview h1 { font-size: clamp(31px,5vw,52px); margin: 14px 0 30px; }
.onc-certificate-preview h2 { font-size: clamp(34px,6vw,64px); margin: 10px 0; color: #111632; border-bottom: 3px solid var(--onc-orange); padding: 0 40px 10px; }
.onc-certificate-preview h3 { font-size: clamp(25px,4vw,40px); color: var(--onc-purple); margin: 10px 0 30px; }
.onc-cert-meta { display: flex; gap: 30px; color: #5e6578; font-weight: 700; }
.onc-certificate-preview footer { margin-top: 45px; color: #7c8398; }

@media (max-width: 900px) {
  .onc-purchase-course-grid,
  .onc-payment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .onc-instruction-layout { grid-template-columns: 1fr; }
  .onc-order-summary { position: static; }
  .onc-certificate-action-card { grid-template-columns: 1fr; }
  .onc-certificate-mini { max-width: 480px; width: 100%; margin: 0 auto; }
}

@media (max-width: 700px) {
  .onc-hero-kicker-row { justify-content: center; }
  .onc-share-row { justify-content: center; }
  .onc-promo-section { padding: 0 20px; }
  .onc-course-control-bar { position: static; align-items: stretch; flex-direction: column; }
  .onc-course-controls { justify-content: flex-start; }
  .onc-course-controls .onc-btn { flex: 1; }
  .onc-completion-card { grid-template-columns: auto 1fr; }
  .onc-completion-card .onc-btn { grid-column: 1 / -1; }
  .onc-form-grid,
  .onc-purchase-course-grid,
  .onc-payment-grid { grid-template-columns: 1fr; }
  .onc-form-full { grid-column: auto; }
  .onc-selected-price { grid-template-columns: 1fr; gap: 5px; }
  .onc-reserve-btn { width: 100%; justify-self: stretch; }
  .onc-certificate-action-card { padding: 20px; }
  .onc-certificate-preview { min-height: 520px; padding: 45px 28px; border-width: 9px; outline-offset: -20px; }
  .onc-cert-meta { flex-direction: column; gap: 8px; }
}