:root {
  --black: #0b0b0c;
  --black-soft: #111113;
  --surface: #17171a;
  --surface-2: #202024;
  --red: #c51028;
  --red-bright: #ef1837;
  --wine: #7b1023;
  --wine-deep: #4a0b18;
  --cream: #f6f0ec;
  --white: #ffffff;
  --muted: #aaa5a7;
  --line: rgba(255,255,255,.12);
  --gold: #d2b46f;
  --green: #38a169;
  --shadow: 0 24px 70px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--white);
  background: var(--black);
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #0d0d0e; }
::-webkit-scrollbar-thumb { background: #3b383a; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

.splash {
  position: fixed;
  inset: 0;
  z-index: 500;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 49% 57%, rgba(197,16,40,.18), transparent 26%),
    linear-gradient(145deg, #09090a 0%, #141213 58%, #230b10 100%);
  transition: opacity .75s ease, visibility .75s ease;
}

.splash.out { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-aura { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(197,16,40,.18); filter: blur(90px); animation: aura 3s ease-in-out infinite alternate; }
.splash-line { position: absolute; width: 720px; height: 720px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; animation: orbit 16s linear infinite; }
.splash-line::before { content: ""; position: absolute; top: 48%; left: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); box-shadow: 0 0 30px var(--red); }
.splash-line-one { transform: translate(33vw, 28vh); }
.splash-line-two { width: 490px; height: 490px; transform: translate(-38vw, -30vh); animation-direction: reverse; animation-duration: 20s; }
.splash-logo { width: min(380px, 62vw); height: auto; position: relative; z-index: 2; opacity: 0; filter: drop-shadow(0 18px 38px rgba(197,16,40,.15)); animation: brandIntro 2.3s .2s cubic-bezier(.21,.8,.34,1) forwards; }
.splash-tagline { position: absolute; top: calc(50% + 150px); margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .58em; color: rgba(255,255,255,.58); opacity: 0; animation: fadeUp .8s 1.65s ease forwards; }
.splash-progress { position: absolute; bottom: 76px; width: min(210px, 50vw); height: 2px; overflow: hidden; background: rgba(255,255,255,.11); }
.splash-progress span { display: block; height: 100%; width: 0; background: var(--red-bright); box-shadow: 0 0 12px var(--red); animation: introProgress 3.8s linear forwards; }
.skip-button { position: absolute; bottom: 31px; right: 34px; border: 0; background: none; color: rgba(255,255,255,.48); font-size: 11px; letter-spacing: .08em; cursor: pointer; }
.skip-button:hover { color: white; }
.start-experience { display: none; position: absolute; z-index: 6; top: calc(50% + 112px); min-width: 230px; height: 58px; padding: 0 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: rgba(13,13,15,.72); backdrop-filter: blur(14px); align-items: center; gap: 13px; text-align: left; cursor: pointer; box-shadow: 0 18px 45px rgba(0,0,0,.45); }
.start-experience > span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; padding-left: 2px; background: var(--red); font-size: 11px; box-shadow: 0 0 20px rgba(239,24,55,.28); }
.start-experience div { display: flex; flex-direction: column; gap: 3px; }.start-experience strong { font-size: 11px; }.start-experience small { color: #8e898b; font-size: 8px; letter-spacing: .04em; }
.start-experience:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.48); background: rgba(26,25,28,.88); }
.splash.waiting .start-experience { display: flex; }
.splash.waiting .splash-logo { width: min(270px, 58vw); opacity: .82; animation: waitingBrand 2.8s ease-in-out infinite alternate; }
.splash.waiting .splash-tagline { top: calc(50% + 76px); opacity: 1; animation: none; }
.splash.waiting .splash-progress, .splash.waiting .skip-button { opacity: 0; pointer-events: none; }
@keyframes waitingBrand { from { transform: scale(.98); filter: drop-shadow(0 0 12px rgba(197,16,40,.12)); } to { transform: scale(1.02); filter: drop-shadow(0 0 38px rgba(197,16,40,.32)); } }

@keyframes brandIntro {
  0% { opacity: 0; transform: scale(.45); filter: blur(18px) drop-shadow(0 0 0 transparent); }
  45% { opacity: 1; transform: scale(1.08); filter: blur(0) drop-shadow(0 0 60px rgba(197,16,40,.35)); }
  72% { transform: scale(.98); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes introProgress { to { width: 100%; } }
@keyframes aura { to { transform: scale(1.3); opacity: .68; } }
@keyframes orbit { to { rotate: 360deg; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.profile-gate {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  place-items: center;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 38%, rgba(116,15,34,.42), transparent 32%),
    linear-gradient(140deg, #0b0b0c 0%, #151315 58%, #250b11 100%);
}
.profile-gate.show { display: grid; animation: screenIn .65s ease; }
.gate-glow { position: absolute; inset: auto auto -240px -180px; width: 620px; height: 620px; border-radius: 50%; background: rgba(197,16,40,.12); filter: blur(70px); }
.gate-logo { position: absolute; top: 24px; left: 38px; width: 156px; }
.profile-content { position: relative; z-index: 2; text-align: center; width: min(700px, 92vw); }
.eyebrow, .section-eyebrow { display: block; color: var(--red-bright); font-size: 10px; font-weight: 800; letter-spacing: .22em; margin: 0 0 13px; }
.profile-content h1 { font-size: clamp(30px, 4.3vw, 54px); letter-spacing: -.04em; margin: 0 0 12px; font-weight: 620; }
.profile-content > p:not(.eyebrow) { color: var(--muted); margin: 0; font-size: 15px; }
.profile-list { display: flex; justify-content: center; gap: 26px; margin: 46px 0 38px; }
.profile-card { border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 140px; color: #a9a5a7; }
.profile-card:hover { color: white; }
.profile-avatar { width: 124px; height: 124px; border-radius: 10px; display: grid; place-items: center; font-size: 34px; font-weight: 650; border: 3px solid transparent; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.profile-card:hover .profile-avatar { border-color: white; transform: translateY(-5px) scale(1.02); box-shadow: 0 18px 35px rgba(0,0,0,.42); }
.avatar-main { background: linear-gradient(145deg, var(--red), #6b0c1c); }
.avatar-guest { background: linear-gradient(145deg, #464549, #232326); }
.profile-card strong { font-size: 15px; }
.profile-card small { color: #747174; font-size: 11px; }
.outline-button, .light-button { border: 1px solid rgba(255,255,255,.3); background: transparent; border-radius: 5px; padding: 12px 19px; cursor: pointer; font-weight: 650; transition: .22s ease; }
.outline-button:hover { background: white; color: #121214; border-color: white; }
.gate-repeat { padding: 10px 15px; color: #a7a3a5; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.prototype-chip { position: absolute; right: 28px; bottom: 25px; color: rgba(255,255,255,.42); font-size: 9px; letter-spacing: .15em; }

.platform { display: none; min-height: 100vh; background: var(--black); }
.platform.show { display: block; animation: screenIn .7s ease; }
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }

.topbar {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  padding: 0 4.2vw;
  display: flex;
  align-items: center;
  gap: 28px;
  background: linear-gradient(to bottom, rgba(8,8,9,.98), rgba(8,8,9,.72), transparent);
  transition: background .3s ease, height .3s ease;
}
.topbar.scrolled { height: 64px; background: rgba(10,10,11,.96); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.brand-button { width: 132px; height: 57px; padding: 0; border: 0; background: transparent; cursor: pointer; flex: 0 0 auto; }
.brand-button img { width: 100%; height: 100%; object-fit: contain; }
.desktop-nav { display: flex; align-items: center; gap: 22px; }
.nav-link { padding: 10px 0; border: 0; background: transparent; color: #b7b3b5; font-size: 13px; cursor: pointer; position: relative; }
.nav-link:hover, .nav-link.active { color: white; }
.nav-link.active::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: 2px; background: var(--red-bright); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.demo-badge { color: #b9b4b6; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; font-size: 8px; font-weight: 750; letter-spacing: .12em; padding: 7px 10px; }
.icon-button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 0; font-size: 24px; cursor: pointer; position: relative; }
.icon-button:hover { background: rgba(255,255,255,.08); }
.notification-button i { position: absolute; right: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--red-bright); border: 1px solid #111; }
.account-button { height: 42px; padding: 3px 9px 3px 3px; border-radius: 24px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); display: grid; grid-template-columns: 34px auto; grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: center; text-align: left; cursor: pointer; }
.account-button > span { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg,var(--red),var(--wine)); font-size: 10px; font-weight: 800; }
.account-button b { align-self: end; font-size: 10px; line-height: 1.1; }
.account-button small { align-self: start; color: var(--red-bright); font-size: 7px; letter-spacing: .12em; }

.main-content { min-height: 100vh; background: var(--black); }
.hero { min-height: 84vh; position: relative; overflow: hidden; display: flex; align-items: center; padding: 100px 4.8vw 80px; background:
  linear-gradient(90deg, #080809 0%, #0b0b0c 41%, rgba(10,10,11,.58) 68%, rgba(10,10,11,.3) 100%),
  radial-gradient(circle at 81% 45%, rgba(198,16,40,.36), transparent 30%),
  linear-gradient(135deg, #141012, #230d13 65%, #0d0d0e);
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 57%, rgba(255,255,255,.025) 57.2%, transparent 57.4%); }
.hero-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg,transparent 35%,black 100%); }
.hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.orbit-one { width: 550px; height: 550px; right: -60px; top: 70px; }
.orbit-two { width: 360px; height: 360px; right: 35px; top: 164px; border-color: rgba(197,16,40,.3); }
.hero-content { position: relative; z-index: 3; max-width: 640px; animation: heroIn .8s ease both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } }
.hero-kicker { font-size: 10px; font-weight: 800; letter-spacing: .18em; display: flex; align-items: center; gap: 9px; color: #d8d4d5; }
.hero-kicker span { color: var(--red-bright); }
.hero-kicker i { width: 4px; height: 4px; border-radius: 50%; background: var(--red-bright); }
.hero h1 { font-size: clamp(42px, 5.4vw, 77px); line-height: .98; letter-spacing: -.055em; margin: 18px 0 22px; max-width: 680px; }
.hero h1 em { font-style: normal; font-weight: 300; color: #dbd3d5; }
.hero-content > p { color: #c7c2c4; max-width: 570px; font-size: 16px; line-height: 1.65; margin: 0 0 17px; }
.hero-meta { display: flex; gap: 13px; align-items: center; color: #aaa5a7; font-size: 11px; margin: 0 0 28px; }
.hero-meta .rating { padding: 3px 5px; border: 1px solid #777; color: white; font-size: 8px; }
.hero-actions { display: flex; gap: 10px; }
.primary-button, .secondary-button, .light-button { min-height: 46px; border-radius: 5px; border: 0; padding: 0 21px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; font-weight: 750; font-size: 13px; cursor: pointer; transition: .2s ease; }
.primary-button { color: #171719; background: white; }
.primary-button:hover { background: #d9d7d8; transform: translateY(-1px); }
.secondary-button { background: rgba(92,88,90,.76); color: white; backdrop-filter: blur(8px); }
.secondary-button:hover { background: rgba(112,108,110,.86); }
.hero-art { position: absolute; right: 3vw; top: 12%; width: 47vw; height: 70%; display: grid; place-items: center; z-index: 2; }
.clinical-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); }
.ring-a { width: min(40vw, 520px); height: min(40vw, 520px); box-shadow: 0 0 120px rgba(197,16,40,.14), inset 0 0 100px rgba(197,16,40,.08); }
.ring-b { width: min(27vw, 360px); height: min(27vw, 360px); border: 18px solid rgba(255,255,255,.025); outline: 1px solid rgba(197,16,40,.24); }
.clinical-core { width: min(25vw, 330px); height: min(25vw, 330px); border-radius: 50%; background: radial-gradient(circle at 38% 34%, #451522, #170e12 63%, #080809 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 38px 90px rgba(0,0,0,.52); border: 1px solid rgba(255,255,255,.12); }
.clinical-core span { font-size: clamp(14px, 2vw, 29px); letter-spacing: .34em; margin-right: -.34em; color: #b8b2b4; }
.clinical-core strong { font-size: clamp(18px, 2.8vw, 42px); letter-spacing: -.035em; }
.clinical-core small { font-size: 7px; letter-spacing: .26em; color: var(--red-bright); margin-top: 15px; }
.data-tag { position: absolute; padding: 10px 14px; min-width: 112px; background: rgba(10,10,11,.82); border: 1px solid rgba(255,255,255,.13); border-radius: 7px; backdrop-filter: blur(8px); display: flex; align-items: center; gap: 9px; box-shadow: 0 12px 30px rgba(0,0,0,.26); }
.data-tag b { color: var(--red-bright); font-size: 18px; }
.data-tag span { font-size: 7px; letter-spacing: .12em; color: #aaa; }
.tag-a { top: 24%; right: 8%; }.tag-b { bottom: 19%; left: 4%; }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; background: linear-gradient(transparent, var(--black)); z-index: 4; pointer-events: none; }

.content-area { position: relative; z-index: 10; margin-top: -105px; padding: 0 4.2vw 90px; }
.continue-panel { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 27px; }
.continue-panel h2, .catalog-header h2 { margin: 0; font-size: clamp(19px,2.1vw,28px); letter-spacing: -.03em; }
.quick-stats { display: flex; align-items: center; padding: 9px 0; }
.quick-stats div { padding: 0 17px; border-left: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; }
.quick-stats strong { font-size: 16px; }.quick-stats span { font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.catalog-section { margin: 0 0 41px; }
.catalog-header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 13px; }
.catalog-header h2 { font-size: 19px; }
.catalog-header button { border: 0; background: none; color: #9c9799; font-size: 11px; cursor: pointer; }
.catalog-header button:hover { color: white; }
.card-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(228px, 22.2vw); gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 5px 0 22px; scrollbar-width: none; scroll-snap-type: x proximity; }
.card-row::-webkit-scrollbar { display: none; }
.course-card { height: 156px; border: 0; border-radius: 6px; overflow: hidden; position: relative; cursor: pointer; scroll-snap-align: start; background: #222; box-shadow: 0 7px 18px rgba(0,0,0,.3); transition: transform .24s ease, box-shadow .24s ease; text-align: left; padding: 0; }
.card-open { position: absolute; inset: 0; z-index: 4; border: 0; background: transparent; cursor: pointer; }
.course-card:hover { transform: scale(1.045) translateY(-3px); z-index: 3; box-shadow: 0 18px 35px rgba(0,0,0,.55); }
.card-art { position: absolute; inset: 0; overflow: hidden; background: var(--card-bg); }
.card-art.has-image { background-image: linear-gradient(transparent 15%,rgba(5,5,6,.92) 100%),var(--card-image); background-size: cover; background-position: center; }
.card-art::before { content: ""; position: absolute; width: 185px; height: 185px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; right: -48px; top: -38px; box-shadow: inset 0 0 48px rgba(255,255,255,.03); }
.card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 18%, rgba(0,0,0,.06) 45%, rgba(4,4,5,.92) 100%); }
.card-signal { position: absolute; z-index: 1; right: 20px; top: 22px; width: 62px; height: 62px; border-radius: 50%; border: 11px solid rgba(255,255,255,.08); outline: 1px solid rgba(255,255,255,.16); }
.card-copy { position: absolute; z-index: 2; inset: auto 14px 13px; }
.card-copy > span { display: block; font-size: 7px; letter-spacing: .14em; color: #f1a2af; font-weight: 800; margin-bottom: 5px; }
.card-copy strong { display: block; font-size: 15px; line-height: 1.1; max-width: 90%; text-shadow: 0 1px 8px #000; }
.card-copy small { display: block; color: #c4bec0; font-size: 9px; margin-top: 5px; }
.card-chip { position: absolute; z-index: 2; left: 12px; top: 11px; padding: 5px 7px; border-radius: 3px; background: rgba(10,10,11,.74); border: 1px solid rgba(255,255,255,.14); font-size: 6.5px; font-weight: 800; letter-spacing: .1em; }
.card-add { position: absolute; z-index: 5; right: 10px; bottom: 9px; width: 27px; height: 27px; border-radius: 50%; border: 1px solid rgba(255,255,255,.34); display: grid; place-items: center; background: rgba(0,0,0,.44); opacity: 0; transform: translateY(4px); transition: .2s ease; font-size: 15px; }
.course-card:hover .card-add { opacity: 1; transform: translateY(0); }
.card-progress { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.17); }
.card-progress i { display: block; height: 100%; background: var(--red-bright); }
.course-card.wide { height: 190px; }
.course-card.wide .card-copy strong { font-size: 18px; }
.tone-wine { --card-bg: radial-gradient(circle at 78% 23%, #a32a3e, transparent 22%), linear-gradient(135deg,#5c0b19,#210b11 72%); }
.tone-red { --card-bg: radial-gradient(circle at 76% 25%, #e1364f, transparent 21%), linear-gradient(135deg,#9a0e24,#351017); }
.tone-slate { --card-bg: radial-gradient(circle at 76% 25%, #8a868a, transparent 21%), linear-gradient(135deg,#39363a,#171719); }
.tone-gold { --card-bg: radial-gradient(circle at 76% 25%, #d5bc81, transparent 21%), linear-gradient(135deg,#665124,#211b11); }
.tone-blue { --card-bg: radial-gradient(circle at 76% 25%, #4b819d, transparent 21%), linear-gradient(135deg,#173b4a,#0f171b); }
.tone-green { --card-bg: radial-gradient(circle at 76% 25%, #61a180, transparent 21%), linear-gradient(135deg,#194c37,#0e1d16); }
.tone-violet { --card-bg: radial-gradient(circle at 76% 25%, #875d9e, transparent 21%), linear-gradient(135deg,#432552,#17101d); }
.tone-skin { --card-bg: radial-gradient(circle at 76% 25%, #d29c8c, transparent 21%), linear-gradient(135deg,#70423a,#251714); }

.prime-banner { min-height: 190px; position: relative; overflow: hidden; border-radius: 10px; margin: 42px 0 54px; padding: 34px 38px; display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 25px; background: linear-gradient(112deg,#6e0b1d,#a10e26 55%,#350811); box-shadow: 0 22px 45px rgba(0,0,0,.35); }
.prime-banner::after { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; right: -90px; top: -180px; }
.prime-banner-mark { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.18); font-size: 45px; font-weight: 750; border: 1px solid rgba(255,255,255,.14); }
.prime-banner-mark span { color: var(--gold); font-size: 19px; margin: -37px 0 0 45px; }
.prime-banner > div:not(.prime-banner-mark) { position: relative; z-index: 2; }
.prime-banner h2 { margin: 0 0 8px; font-size: clamp(22px,2.7vw,37px); letter-spacing: -.04em; }
.prime-banner p { color: #e8dadd; margin: 0; font-size: 12px; }
.light-button { background: white; color: #211115; position: relative; z-index: 2; white-space: nowrap; }
.light-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.journey-section { display: grid; grid-template-columns: 1fr 1.25fr; gap: 70px; align-items: center; padding: 15px 0 20px; }
.journey-copy h2 { font-size: clamp(30px,4vw,55px); letter-spacing: -.045em; margin: 0 0 15px; }
.journey-copy p { color: var(--muted); max-width: 530px; font-size: 14px; line-height: 1.7; }
.journey-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.journey-steps article { min-height: 130px; padding: 19px; border-radius: 7px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); display: flex; flex-direction: column; }
.journey-steps b { font-size: 9px; color: var(--red-bright); }.journey-steps strong { margin-top: auto; font-size: 17px; }.journey-steps span { color: var(--muted); font-size: 9px; margin-top: 5px; }

.search-overlay { display: none; position: fixed; z-index: 220; inset: 0; background: rgba(10,10,11,.98); overflow-y: auto; }
.search-overlay.show { display: block; animation: screenIn .25s ease; }
.search-header { height: 92px; padding: 0 4.2vw; display: flex; align-items: center; gap: 25px; border-bottom: 1px solid var(--line); }
.search-header img { width: 135px; }
.search-header label { flex: 1; height: 47px; border-radius: 5px; display: flex; align-items: center; gap: 12px; background: #242428; padding: 0 15px; }
.search-header label span { font-size: 25px; color: #aaa; }
.search-header input { flex: 1; border: 0; outline: 0; background: transparent; color: white; font-size: 16px; }
.search-header input::placeholder { color: #7e7a7c; }
.search-header > button { border: 0; background: transparent; cursor: pointer; color: #c0bcbe; }
.search-body { padding: 48px 4.2vw 80px; }.search-body > p { color: #716e70; }
.search-results { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 22px; }

.account-drawer { position: fixed; z-index: 260; top: 0; right: 0; bottom: 0; width: min(420px, 93vw); padding: 35px 30px 28px; background: #151517; box-shadow: -22px 0 60px rgba(0,0,0,.55); transform: translateX(105%); transition: transform .34s cubic-bezier(.2,.8,.3,1); overflow-y: auto; }
.account-drawer.show { transform: translateX(0); }
.drawer-close { position: absolute; right: 18px; top: 14px; border: 0; background: none; font-size: 29px; cursor: pointer; color: #aaa; }
.drawer-profile { display: flex; align-items: center; gap: 13px; margin: 15px 0 25px; }
.drawer-profile > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,var(--red),var(--wine)); font-weight: 800; }
.drawer-profile div { display: flex; flex-direction: column; gap: 4px; }.drawer-profile strong { font-size: 15px; }.drawer-profile small { color: var(--red-bright); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.plan-card { padding: 18px; border-radius: 8px; background: linear-gradient(125deg,#861025,#4e0b17); display: flex; flex-direction: column; gap: 5px; }
.plan-card span { font-size: 7px; letter-spacing: .13em; color: #f3a8b4; }.plan-card strong { font-size: 19px; }.plan-card small { color: #d9c8cb; font-size: 9px; }
.drawer-progress { margin: 22px 0 23px; }.drawer-progress > div { display: flex; justify-content: space-between; color: #aaa; font-size: 9px; margin-bottom: 7px; }.drawer-progress b { color: white; }.drawer-progress i { height: 4px; display: block; border-radius: 3px; background: #333; overflow: hidden; }.drawer-progress i span { display: block; width: 68%; height: 100%; background: var(--red-bright); }
.drawer-menu { border-top: 1px solid var(--line); }
.drawer-menu button { width: 100%; padding: 15px 3px; border: 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; background: transparent; text-align: left; cursor: pointer; }
.drawer-menu button:hover { background: rgba(255,255,255,.035); }.drawer-menu button > span { width: 28px; color: var(--red-bright); font-size: 18px; }.drawer-menu button div { display: flex; flex-direction: column; gap: 3px; }.drawer-menu b { font-size: 12px; }.drawer-menu small { color: #777; font-size: 8px; }
.repeat-opening { width: 100%; margin-top: 24px; border: 1px solid var(--line); border-radius: 5px; padding: 12px; background: transparent; cursor: pointer; color: #aaa; font-size: 10px; }
.repeat-opening:hover { border-color: #aaa; color: white; }.drawer-note { color: #5f5d5e; font-size: 8px; line-height: 1.5; text-align: center; margin-top: 18px; }
.admin-access { margin-top: 18px; min-height: 64px; border: 1px solid rgba(239,24,55,.22); border-radius: 7px; padding: 10px 12px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; text-decoration: none; background: linear-gradient(90deg,rgba(197,16,40,.12),rgba(197,16,40,.025)); }
.admin-access:hover { border-color: rgba(239,24,55,.48); background: rgba(197,16,40,.13); }.admin-access>span { color: var(--red-bright); }.admin-access div { display: flex; flex-direction: column; gap: 3px; }.admin-access b { font-size: 11px; }.admin-access small { color: #777; font-size: 8px; }.admin-access>strong { color: var(--red-bright); font-size: 7px; letter-spacing: .1em; }
.backdrop { position: fixed; z-index: 250; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(3px); display: none; }.backdrop.show { display: block; }

.modal { position: fixed; z-index: 310; top: 50%; left: 50%; width: min(850px, 94vw); max-height: 90vh; overflow-y: auto; border-radius: 9px; background: #18181b; box-shadow: var(--shadow); transform: translate(-50%,-46%) scale(.96); opacity: 0; visibility: hidden; transition: .25s ease; }
.modal.show { transform: translate(-50%,-50%) scale(1); opacity: 1; visibility: visible; }
.modal-close { position: absolute; z-index: 3; right: 14px; top: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(5,5,6,.7); cursor: pointer; font-size: 23px; }
.modal-visual { height: 295px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--modal-bg, linear-gradient(135deg,#6b0c1c,#1a0c10)); }
.modal-visual::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 100px rgba(255,255,255,.05), inset 0 0 80px rgba(0,0,0,.2); }
.modal-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, #18181b 100%); }
.modal-badge { position: absolute; z-index: 2; left: 28px; top: 25px; font-size: 8px; letter-spacing: .17em; color: #f6b1bc; }
.modal-visual-word { position: relative; z-index: 2; font-size: clamp(50px,10vw,110px); font-weight: 800; letter-spacing: -.08em; color: rgba(255,255,255,.14); }
.modal-content { padding: 6px 30px 32px; }.modal-head { display: flex; justify-content: space-between; align-items: center; }.modal-head h2 { margin: 0; font-size: 32px; letter-spacing: -.04em; }.round-add { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; cursor: pointer; font-size: 22px; }.round-add:hover { background: white; color: black; }
.modal-meta { display: flex; gap: 10px; margin: 10px 0 13px; color: #aaa; font-size: 10px; }.modal-meta span:first-child { color: #51b478; font-weight: 800; }
.modal-content > p { max-width: 650px; color: #c3bec0; line-height: 1.65; font-size: 13px; }
.modal-actions { display: flex; gap: 9px; margin: 22px 0 26px; }.modal-info-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 25px; padding-top: 20px; border-top: 1px solid var(--line); }.modal-info-grid span { color: #777; font-size: 9px; }.modal-info-grid p { margin: 7px 0 0; font-size: 10px; line-height: 1.6; color: #c5c0c2; }

.player-modal { position: fixed; z-index: 390; inset: 0; background: black; display: none; }.player-modal.show { display: flex; flex-direction: column; animation: screenIn .3s ease; }
.player-topbar { height: 72px; display: flex; align-items: center; gap: 15px; padding: 0 24px; background: linear-gradient(#111,transparent); }.player-topbar > button { border: 0; background: none; font-size: 27px; cursor: pointer; }.player-topbar div { display: flex; flex-direction: column; }.player-topbar strong { font-size: 13px; }.player-topbar small { color: #777; font-size: 8px; }.player-topbar > span { margin-left: auto; font-size: 8px; letter-spacing: .18em; color: var(--red-bright); }
.player-stage { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at center, #39131b, #100b0d 45%, #030304 80%); }
.player-stage::before, .player-stage::after { content: ""; position: absolute; width: 53vw; height: 53vw; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }.player-stage::after { width: 33vw; height: 33vw; border-color: rgba(197,16,40,.28); }
.player-glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(197,16,40,.3); filter: blur(80px); }.player-brand { position: relative; z-index: 2; display: flex; flex-direction: column; text-align: center; }.player-brand span { color: var(--red-bright); font-size: 9px; letter-spacing: .22em; }.player-brand strong { font-size: clamp(50px,9vw,125px); line-height: .8; letter-spacing: -.08em; margin-top: 16px; }.player-toggle { position: absolute; z-index: 3; width: 68px; height: 68px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.34); backdrop-filter: blur(5px); display: grid; place-items: center; font-size: 25px; cursor: pointer; opacity: 0; transition: .2s; }.player-stage:hover .player-toggle { opacity: 1; }
.player-controls { height: 62px; padding: 0 22px; display: flex; align-items: center; gap: 12px; background: linear-gradient(transparent,#101011); }.player-controls button { border: 0; background: none; cursor: pointer; }.player-controls span { color: #aaa; font-size: 9px; }.player-track { flex: 1; height: 4px; background: #3a3839; border-radius: 4px; overflow: hidden; }.player-track i { display: block; width: 0; height: 100%; background: var(--red-bright); transition: width .5s linear; }
.toast { position: fixed; z-index: 450; right: 25px; bottom: 25px; min-width: 270px; padding: 13px 17px; border-radius: 7px; display: flex; align-items: center; gap: 11px; background: white; color: #1c1a1b; box-shadow: var(--shadow); transform: translateY(30px); opacity: 0; visibility: hidden; transition: .25s ease; }.toast.show { transform: translateY(0); opacity: 1; visibility: visible; }.toast > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e6f4eb; color: #24834c; }.toast div { display: flex; flex-direction: column; }.toast strong { font-size: 11px; }.toast small { color: #777; font-size: 8px; margin-top: 3px; }
.mobile-nav { display: none; }

.content-area.explore-mode { margin-top: 0; padding-top: 110px; }
.explore-shell { min-height: 720px; }
.explore-intro { min-height: 265px; border-radius: 11px; overflow: hidden; position: relative; padding: 40px 42px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 79% 48%,rgba(239,24,55,.26),transparent 24%),linear-gradient(120deg,#161215,#310c15 72%,#0d0d0e); border: 1px solid rgba(255,255,255,.09); }
.explore-intro:after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); right: -40px; top: -65px; box-shadow: inset 0 0 80px rgba(197,16,40,.12); }
.explore-intro>* { position: relative; z-index: 2; }.explore-intro>span { color: var(--red-bright); font-size: 8px; font-weight: 800; letter-spacing: .2em; }.explore-intro h1 { font-size: clamp(34px,4.4vw,62px); letter-spacing: -.055em; margin: 9px 0 7px; }.explore-intro p { color:#aaa5a7; max-width: 610px; font-size: 12px; line-height: 1.6; margin: 0; }
.genre-strip { display: flex; gap: 7px; overflow-x: auto; padding: 24px 0 20px; scrollbar-width: none; }.genre-strip::-webkit-scrollbar{display:none}.genre-strip button { flex: 0 0 auto; height: 36px; padding: 0 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: #151517; color: #aaa6a8; font-size: 9px; cursor: pointer; }.genre-strip button:hover,.genre-strip button.active { color:white; border-color:var(--red-bright); background:rgba(197,16,40,.16); }
.explore-count { display:flex;align-items:center;justify-content:space-between;margin:7px 0 15px; }.explore-count h2 { margin:0;font-size:20px; }.explore-count span { color:#777;font-size:9px; }.catalog-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }.catalog-grid .course-card { height:180px; }
.player-media { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:2;display:none; }.player-media.show { display:block; }.player-stage.with-media .player-brand,.player-stage.with-media .player-glow { display:none; }.player-stage.with-media .player-toggle { z-index:4; }

.player-media { border: 0; }

@media (max-width: 1000px) {
  .desktop-nav { gap: 13px; }.nav-link { font-size: 11px; }.demo-badge { display: none; }
  .hero { min-height: 76vh; }.hero-content { max-width: 54vw; }.hero-art { right: -6vw; width: 55vw; }
  .card-row { grid-auto-columns: minmax(220px, 31vw); }
  .search-results { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  body { padding-bottom: 66px; }
  .topbar { height: 61px; padding: 0 15px; }.brand-button { width: 104px; height: 46px; }.desktop-nav, .notification-button, .account-button b, .account-button small { display: none; }.top-actions { gap: 3px; }.account-button { display: flex; width: 38px; padding: 2px; border-radius: 50%; }.account-button > span { width: 32px; height: 32px; }
  .hero { min-height: 71vh; padding: 95px 19px 95px; background: radial-gradient(circle at 76% 38%,rgba(197,16,40,.28),transparent 30%), linear-gradient(150deg,#09090a,#1d0c11 80%); align-items: flex-end; }.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 24%,rgba(8,8,9,.22) 48%,#080809 94%); }.hero-content { max-width: 100%; z-index: 5; }.hero h1 { font-size: 42px; }.hero-content > p { font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }.hero-art { right: -36%; top: 2%; width: 115%; height: 56%; opacity: .65; }.clinical-core { width: 210px; height: 210px; }.ring-a { width: 360px; height: 360px; }.ring-b { width: 270px; height: 270px; }.data-tag { display: none; }.hero-fade { height: 90px; }.hero-actions { gap: 7px; }.primary-button,.secondary-button { padding: 0 14px; min-height: 43px; font-size: 11px; }
  .content-area { margin-top: -47px; padding: 0 16px 50px; }.continue-panel { align-items: flex-start; }.continue-panel h2 { font-size: 19px; }.quick-stats { display: none; }.catalog-section { margin-bottom: 26px; }.catalog-header h2 { font-size: 17px; }.card-row { grid-auto-columns: 71vw; margin-right: -16px; }.course-card { height: 150px; }.course-card:hover { transform: none; }.card-add { opacity: 1; }.prime-banner { grid-template-columns: 1fr; padding: 27px 24px; gap: 16px; }.prime-banner-mark { display: none; }.prime-banner .light-button { justify-self: start; }.journey-section { grid-template-columns: 1fr; gap: 25px; }.journey-steps article { min-height: 110px; }
  .mobile-nav { position: fixed; z-index: 120; bottom: 0; left: 0; right: 0; height: 66px; display: grid; grid-template-columns: repeat(5,1fr); background: rgba(12,12,13,.98); border-top: 1px solid var(--line); }.mobile-nav button { border: 0; background: none; color: #777; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 7px; }.mobile-nav button span { font-size: 18px; }.mobile-nav button.active { color: white; }.mobile-nav button.active span { color: var(--red-bright); }
  .search-header { padding: 0 14px; gap: 10px; height: 70px; }.search-header img { display: none; }.search-header label { height: 42px; }.search-header > button { font-size: 10px; }.search-body { padding: 30px 15px 80px; }.search-results { grid-template-columns: 1fr 1fr; }.search-results .course-card { height: 135px; }
  .modal { width: 100%; max-height: 94vh; top: auto; left: 0; bottom: 0; border-radius: 12px 12px 0 0; transform: translateY(105%); }.modal.show { transform: translateY(0); }.modal-visual { height: 210px; }.modal-content { padding: 4px 20px 27px; }.modal-head h2 { font-size: 25px; }.modal-info-grid { grid-template-columns: 1fr; }.modal-actions { flex-wrap: wrap; }
  .gate-logo { left: 20px; width: 120px; }.profile-list { gap: 8px; }.profile-card { min-width: 120px; }.profile-avatar { width: 105px; height: 105px; }.splash-tagline { top: calc(50% + 120px); letter-spacing: .32em; }
  .splash.waiting .splash-tagline { top: calc(50% + 70px); }.start-experience { top: calc(50% + 103px); }
  .content-area.explore-mode { padding-top: 84px; }.explore-intro { min-height: 310px; padding: 30px 23px; }.explore-intro:after { right:-210px; }.catalog-grid { grid-template-columns: 1fr 1fr; gap: 7px; }.catalog-grid .course-card { height: 150px; }
  .player-topbar { padding: 0 14px; }.player-stage::before { width: 80vw; height: 80vw; }.player-stage::after { width: 58vw; height: 58vw; }.player-brand strong { font-size: 54px; }.player-controls { padding: 0 10px; gap: 7px; }
}

@media (max-width: 430px) {
  .profile-content h1 { font-size: 29px; }.profile-content > p:not(.eyebrow) { font-size: 12px; }.profile-avatar { width: 92px; height: 92px; }.profile-card { min-width: 103px; }
  .hero h1 { font-size: 37px; }.hero-meta span:last-child { display: none; }.card-row { grid-auto-columns: 80vw; }.journey-steps { grid-template-columns: 1fr 1fr; }.journey-steps article { padding: 14px; }.journey-steps strong { font-size: 14px; }.search-results { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }.catalog-grid .course-card { height: 190px; }
}

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

/* Shop PRIME client experience v2 */
.profile-content { width: min(860px,94vw); }
.avatar-prime { background: radial-gradient(circle at 32% 26%,#f2d898,#9c751d 38%,#341c08 78%); color:#17100a; box-shadow:0 0 55px rgba(210,180,111,.2); }
.hero-art { opacity:.18; pointer-events:none; }
.hero-grid { opacity:.06; }
.feature-deck { display:grid; grid-template-columns:1.55fr 1fr 1fr; gap:10px; margin:0 0 38px; }
.feature-card { min-height:220px; border:0; border-radius:10px; padding:0; overflow:hidden; position:relative; cursor:pointer; text-align:left; background:#171719; box-shadow:0 18px 40px rgba(0,0,0,.25); }
.feature-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.feature-card:hover img { transform:scale(1.045); }
.feature-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,4,5,.95),rgba(4,4,5,.06) 72%); }
.feature-main .feature-shade { background:linear-gradient(90deg,rgba(4,4,5,.94),rgba(4,4,5,.13) 75%),linear-gradient(0deg,rgba(4,4,5,.75),transparent 60%); }
.feature-copy { position:absolute; z-index:2; left:20px; right:18px; bottom:18px; display:flex; flex-direction:column; gap:4px; }
.feature-copy small { color:#ff5a70; font-size:8px; letter-spacing:.18em; font-weight:800; }
.feature-copy strong { font-size:clamp(18px,2vw,29px); letter-spacing:-.035em; }
.feature-copy em { color:#c8c2c4; font-size:10px; font-style:normal; }

.catalog-header > div { display:flex; align-items:baseline; gap:10px; }
.catalog-header > div span { color:#625f61; font-size:8px; }
.course-card { height:205px; border-radius:8px; border:1px solid rgba(255,255,255,.08); }
.course-card.is-locked .card-art { filter:saturate(.55) brightness(.68); }
.course-card.is-locked:hover .card-art { filter:saturate(.8) brightness(.78); }
.access-badge { position:absolute; z-index:8; top:10px; left:10px; padding:6px 8px; border-radius:4px; font-size:7px; font-weight:850; letter-spacing:.12em; box-shadow:0 8px 20px rgba(0,0,0,.25); }
.access-badge.free { background:#f4f0ed; color:#54101c; }
.access-badge.owned { background:#d2b46f; color:#211506; }
.access-badge.locked { background:rgba(8,8,9,.82); color:#eee; border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(8px); }
.course-card .card-chip { top:42px; left:10px; background:rgba(10,10,11,.64); color:#d4ced0; }
.course-card .card-copy { left:15px; right:42px; bottom:14px; }
.course-card .card-copy > span { display:none; }
.course-card .card-copy strong { font-size:15px; line-height:1.12; }
.course-card .card-copy small { font-size:9px; margin-top:4px; }
.course-card .card-copy em { color:#746f71; font-size:7px; margin-top:7px; font-style:normal; }

.modal { width:min(980px,95vw); max-height:94vh; border-radius:11px; }
.modal-visual { height:340px; background-repeat:no-repeat; }
.modal-content { padding:8px 34px 38px; }
.course-syllabus-section,.course-material-section { padding-top:27px; margin-top:25px; border-top:1px solid var(--line); }
.course-section-title { display:flex; justify-content:space-between; align-items:end; margin-bottom:14px; }
.course-section-title span { color:var(--red-bright); font-size:7px; letter-spacing:.18em; font-weight:800; }
.course-section-title h3 { margin:5px 0 0; font-size:21px; }
.course-section-title > b { color:#777; font-size:8px; font-weight:500; }
.course-syllabus { border:1px solid rgba(255,255,255,.08); border-radius:8px; overflow:hidden; }
.lesson-row { width:100%; min-height:74px; padding:9px 13px; display:grid; grid-template-columns:94px 1fr 28px; gap:14px; align-items:center; text-align:left; border:0; border-bottom:1px solid rgba(255,255,255,.08); background:#141416; cursor:pointer; }
.lesson-row:last-child { border-bottom:0; }
.lesson-row:hover { background:#202023; }
.lesson-row.locked { color:#777; background:#111113; }
.lesson-thumb { height:54px; border-radius:5px; overflow:hidden; background:linear-gradient(135deg,#52101c,#160d10); display:grid; grid-template-columns:1fr auto; align-items:end; padding:8px; }
.lesson-thumb i { align-self:center; justify-self:center; grid-row:1; grid-column:1/3; width:27px; height:27px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.45); font-style:normal; font-size:9px; }
.lesson-thumb b { grid-column:2; font-size:8px; color:rgba(255,255,255,.55); }
.lesson-copy { display:flex; flex-direction:column; gap:6px; }
.lesson-copy strong { font-size:11px; }
.lesson-copy small { color:#777; font-size:8px; }
.lesson-row > em { color:var(--red-bright); font-style:normal; font-size:17px; }
.material-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.material-card { min-height:92px; padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:7px; background:linear-gradient(145deg,#202023,#131315); display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; }
.material-card > span { width:34px; height:42px; border-radius:4px; display:grid; place-items:center; background:#f1e9e5; color:#5d0c19; font-size:7px; font-weight:900; }
.material-card div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.material-card strong { font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.material-card small { color:#6f6b6d; font-size:7px; }
.material-card button,.certificate-panel button,.certificate-item button,.library-material button,.webinar-list button { border:1px solid rgba(255,255,255,.18); border-radius:5px; background:transparent; padding:8px 10px; color:#ddd; font-size:8px; cursor:pointer; }
.material-card button:hover,.certificate-panel button:hover,.certificate-item button:hover,.library-material button:hover,.webinar-list button:hover { background:#fff; color:#111; }
.material-card.locked { opacity:.58; }
.certificate-panel { margin-top:25px; min-height:120px; padding:20px; display:grid; grid-template-columns:58px 1fr auto; gap:16px; align-items:center; border-radius:9px; background:linear-gradient(115deg,#40101a,#1b1417 58%,#2d2314); border:1px solid rgba(210,180,111,.22); }
.certificate-icon { width:55px; height:55px; border-radius:50%; display:grid; place-items:center; border:1px solid #d2b46f; color:#d2b46f; font-size:25px; }
.certificate-icon.muted { color:#777; border-color:#555; }
.certificate-panel span { color:#d2b46f; font-size:7px; letter-spacing:.18em; font-weight:800; }
.certificate-panel h3 { margin:5px 0; font-size:16px; }
.certificate-panel p { margin:0; color:#8d8789; font-size:8px; }
.certificate-panel button:disabled,.certificate-item button:disabled { opacity:.35; cursor:not-allowed; }

.purchase-modal { position:fixed; z-index:340; top:50%; left:50%; width:min(900px,94vw); max-height:92vh; overflow-y:auto; padding:34px; border-radius:12px; background:linear-gradient(145deg,#19191c,#100e10); box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.12); transform:translate(-50%,-46%) scale(.96); opacity:0; visibility:hidden; transition:.25s ease; }
.purchase-modal.show { transform:translate(-50%,-50%) scale(1); opacity:1; visibility:visible; }
.purchase-head { text-align:center; max-width:630px; margin:4px auto 26px; }
.purchase-head > span { color:var(--red-bright); font-size:7px; letter-spacing:.2em; font-weight:800; }
.purchase-head h2 { margin:7px 0; font-size:34px; letter-spacing:-.045em; }
.purchase-head p { margin:0; color:#8d888a; font-size:11px; }
.purchase-options { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.purchase-option { position:relative; min-height:280px; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:24px; background:#171719; text-align:left; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; }
.purchase-option.active { border-color:var(--red-bright); box-shadow:0 0 0 1px var(--red-bright),0 18px 45px rgba(0,0,0,.24); }
.purchase-option.prime-option { background:radial-gradient(circle at 90% 10%,rgba(210,180,111,.14),transparent 29%),linear-gradient(145deg,#42101a,#1b1215); }
.purchase-option > i { position:absolute; right:14px; top:13px; color:#251605; background:#d2b46f; border-radius:20px; padding:5px 8px; font-size:6px; font-style:normal; font-weight:900; }
.purchase-option > small { color:var(--red-bright); letter-spacing:.15em; font-size:7px; font-weight:850; }
.purchase-option > strong { margin:9px 0 18px; font-size:19px; }
.purchase-option > span { display:flex; flex-direction:column; gap:3px; margin-top:auto; }
.purchase-option > span b { font-size:31px; letter-spacing:-.04em; }
.purchase-option > span em { color:#777; font-style:normal; font-size:8px; }
.purchase-option ul { margin:18px 0 0; padding:0; list-style:none; color:#a6a1a3; font-size:9px; line-height:1.9; }
.purchase-option li::before { content:"✓"; color:#d2b46f; margin-right:7px; }
.payment-demo { margin:18px 0; padding:14px 16px; display:flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.08); border-radius:7px; }
.payment-demo > span { color:#777; font-size:7px; letter-spacing:.14em; }
.payment-demo div { display:flex; gap:6px; }
.payment-demo b { padding:6px 9px; border-radius:4px; background:#28272a; font-size:8px; }
.payment-demo small { margin-left:auto; color:#696567; font-size:7px; }
.purchase-cta { width:100%; background:var(--red-bright); color:white; }

.library-page { min-height:720px; }
.library-hero { min-height:275px; border-radius:12px; padding:38px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(90deg,rgba(8,8,9,.96),rgba(8,8,9,.35)),url('hero-skin-longevity-v2.webp') center/cover; border:1px solid rgba(255,255,255,.09); }
.library-hero > span { color:var(--red-bright); font-size:8px; letter-spacing:.2em; font-weight:850; }
.library-hero h1 { font-size:clamp(38px,5vw,66px); margin:8px 0; letter-spacing:-.055em; }
.library-hero p { max-width:570px; margin:0; color:#aaa4a6; font-size:11px; }
.library-hero > div { display:flex; gap:12px; align-items:baseline; margin-top:18px; }
.library-hero > div b { font-size:24px; color:#d2b46f; }
.library-hero > div small { color:#8c8789; font-size:8px; margin-right:15px; }
.materials-hero { background-image:linear-gradient(90deg,rgba(8,8,9,.96),rgba(8,8,9,.28)),url('hero-laser-thulium.webp'); }
.agenda-hero { background-image:linear-gradient(90deg,rgba(8,8,9,.95),rgba(8,8,9,.25)),url('hero-webinars.webp'); }
.certificate-list,.materials-library,.webinar-list { margin-top:20px; display:grid; gap:8px; }
.certificate-item { min-height:100px; padding:16px 18px; display:grid; grid-template-columns:62px 1fr auto; gap:15px; align-items:center; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:#151517; }
.certificate-item.locked { opacity:.57; }
.certificate-seal { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; border:1px solid #d2b46f; color:#d2b46f; font-size:12px; font-weight:800; }
.certificate-item small,.library-material small,.webinar-list small { color:var(--red-bright); font-size:7px; letter-spacing:.13em; }
.certificate-item h3,.library-material h3,.webinar-list h3 { margin:5px 0; font-size:15px; }
.certificate-item span { color:#777; font-size:8px; }
.materials-library { grid-template-columns:1fr 1fr; }
.library-material { min-height:104px; padding:16px; display:grid; grid-template-columns:48px 1fr auto; gap:13px; align-items:center; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:linear-gradient(140deg,#1b1b1e,#121214); }
.library-material.locked { opacity:.55; }
.library-material > span { width:45px; height:56px; display:grid; place-items:center; border-radius:5px; background:#f1ebe8; color:#5d0d1a; font-size:8px; font-weight:900; }
.library-material em { color:#777; font-size:7px; font-style:normal; }
.webinar-list article { min-height:125px; padding:12px; display:grid; grid-template-columns:62px 170px 1fr auto; gap:15px; align-items:center; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:#151517; }
.webinar-list img { width:170px; height:98px; object-fit:cover; border-radius:6px; }
.webinar-date { width:58px; height:68px; display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid rgba(255,255,255,.13); border-radius:7px; }
.webinar-date b { font-size:22px; }.webinar-date span { color:var(--red-bright); font-size:8px; }
.webinar-list p { color:#777; margin:0; font-size:8px; }

@media (max-width:1100px) {
  .desktop-nav { gap:12px; }.nav-link { font-size:10px; }
  .material-grid { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .profile-list { gap:2px; margin-top:34px; }.profile-card { min-width:30vw; }.profile-avatar { width:86px; height:86px; }.profile-card small { max-width:90px; font-size:8px; }
  .feature-deck { grid-template-columns:82vw 72vw 72vw; overflow-x:auto; margin-right:-16px; padding-right:16px; scrollbar-width:none; }.feature-card { min-height:205px; }
  .course-card { height:185px; }
  .modal-visual { height:230px; }.modal-content { padding:5px 18px 28px; }.modal-content > p { font-size:11px; }
  .lesson-row { grid-template-columns:78px 1fr 18px; gap:9px; padding:8px; }.lesson-thumb { height:48px; }.lesson-copy strong { font-size:9px; }
  .material-grid { grid-template-columns:1fr; }.certificate-panel { grid-template-columns:46px 1fr; }.certificate-icon { width:44px;height:44px; }.certificate-panel button { grid-column:1/3; }
  .purchase-modal { top:auto; bottom:0; left:0; width:100%; max-height:94vh; padding:28px 17px 22px; border-radius:14px 14px 0 0; transform:translateY(105%); }.purchase-modal.show { transform:translateY(0); }.purchase-head h2 { font-size:27px; }.purchase-options { grid-template-columns:1fr; }.purchase-option { min-height:230px; }.payment-demo { flex-wrap:wrap; }.payment-demo small { width:100%; margin-left:0; }
  .library-hero { min-height:310px; padding:25px 22px; }.materials-library { grid-template-columns:1fr; }.certificate-item { grid-template-columns:50px 1fr; }.certificate-item button { grid-column:1/3; }.library-material { grid-template-columns:42px 1fr; }.library-material button { grid-column:1/3; }.webinar-list article { grid-template-columns:52px 1fr; }.webinar-list img { width:100%; height:130px; grid-column:1/3; }.webinar-list button { grid-column:1/3; }
}