/* Yellow Desk — student app */
body.learn { background: var(--cream); }
.l-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 18px; background: linear-gradient(180deg, var(--y) 0 34%, var(--cream) 34%); }
.l-brand { display: flex; gap: 10px; align-items: center; } .l-brand .logo-dot { background: var(--ink); width: 34px; height: 34px; border-radius: 10px; }
.l-brand b { display: block; font: 800 19px/1.1 var(--head); } .l-brand span { font-size: 13px; }
.l-card { display: block; background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(23,21,15,.06); margin-bottom: 12px; color: inherit; text-decoration: none; }
.l-login .l-card { width: 100%; max-width: 400px; padding: 22px; }
.l-login h1 { margin: 0; font: 800 26px/1.15 var(--head); }
.btn.big { padding: 13px 18px; font-size: 16px; }
.l-shell { min-height: 100vh; padding-bottom: 76px; }
.l-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--y); }
.l-top b { font: 800 16px var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l-top .logo-dot { background: var(--ink); }
.l-who { margin-left: auto; background: var(--ink); color: var(--y); border-radius: 99px; padding: 3px 10px; font-size: 13px; font-weight: 600; }
.l-main { max-width: 720px; margin: 0 auto; padding: 16px; }
.l-nav { position: fixed; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--ink); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); z-index: 6; }
.l-nav a { color: #b6ae9b; text-decoration: none; display: flex; flex-direction: column; align-items: center; font-size: 11.5px; gap: 1px; padding: 4px; border-radius: 10px; }
.l-nav a span { font-size: 19px; line-height: 1.2; } .l-nav a.on { color: var(--y); background: rgba(255,196,0,.1); }
.l-hi { font: 800 24px/1.2 var(--head); margin: 4px 0 14px; }
.l-empty { padding: 50px 0; text-align: center; color: var(--muted); }
.l-alert { background: var(--orange-soft); }
.l-today { display: flex; gap: 12px; align-items: center; border: 2px dashed #e6dcc2; }
.l-today .big { font: 800 28px/1 var(--head); width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--y-soft); flex: none; }
.l-today.ok { border: 2px solid var(--green-soft); } .l-today.ok .big { background: var(--green); color: #fff; }
.l-next { background: var(--ink); color: #fff; } .l-next h2 { color: #fff; margin: 6px 0 10px; font: 700 20px/1.25 var(--head); }
.l-next .small { color: #d8cfb8; letter-spacing: .04em; } .l-next .btn { margin-top: 10px; background: var(--y); color: var(--ink); border: 0; }
.l-next .bar { background: rgba(255,255,255,.15); margin-top: 6px; }
.l-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .l-grid > .l-card { margin-bottom: 0; } .l-grid { margin-bottom: 12px; }
.l-grid.three { grid-template-columns: repeat(3, 1fr); } .l-card.c { text-align: center; } .l-card.c span { display: block; }
.huge { display: block; font: 800 26px/1.15 var(--head); margin: 4px 0 2px; } .huge.red { color: var(--red); }
.ring-row { display: flex; gap: 10px; align-items: center; margin: 8px 0 4px; } .ring-row .bar { flex: 1; }
.l-mentor { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.l-card ul { margin: 6px 0; padding-left: 18px; }
.l-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 8px; } .l-tabs a { white-space: nowrap; padding: 6px 12px; border-radius: 99px; background: #efe8d6; color: var(--ink); text-decoration: none; font-size: 13px; } .l-tabs a.on { background: var(--ink); color: var(--y); }
.l-steps { display: flex; flex-direction: column; gap: 8px; }
.l-step { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 12px 14px; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.04); margin-bottom: 8px; }
.l-step .n { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font-weight: 700; background: var(--y-soft); }
.l-step.done .n { background: var(--green); color: #fff; } .l-step.locked { opacity: .55; } .l-step.locked .n { background: #efe8d6; font-size: 14px; }
.l-step.open:not(.done) { border: 2px solid var(--y); } .l-step .t { font-weight: 600; } .chev { font-size: 22px; color: var(--muted); }
.l-back { display: inline-block; margin-bottom: 8px; color: var(--muted); text-decoration: none; font-size: 14px; }
.l-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; margin-bottom: 10px; }
.l-video iframe, .l-video #yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.l-video { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.l-shield { position: absolute; inset: 0; z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.l-video.tapthru .l-shield { pointer-events: none; }
.l-cover { position: absolute; inset: 0; background: #000; display: none; }
.l-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.l-video.st-idle .l-cover, .l-video.st-end .l-cover { display: block; }
.l-video.st-pause .l-shield { background: linear-gradient(#000 0, #000 50px, rgba(0,0,0,.4) 50px); }
.l-video.st-pause .l-ctrl, .l-video.st-end .l-ctrl { background: #000; }
.l-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--y); color: #111; display: grid; place-items: center; font-size: 26px; box-shadow: 0 4px 18px rgba(0,0,0,.35); padding-left: 3px; }
.l-video.st-play .l-big, .l-video.tapthru .l-big { display: none; }
.l-ctrl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; transition: opacity .25s; }
.l-video.st-idle .l-ctrl, .l-video.tapthru .l-ctrl { opacity: 0; pointer-events: none; }
.l-video.st-play:not(.show-ctrl) .l-ctrl { opacity: 0; }
.l-ctrl button { background: none; border: 0; color: #fff; font: 600 14px var(--body, inherit); min-width: 34px; height: 32px; padding: 0 4px; cursor: pointer; }
.l-ctrl input[type=range] { flex: 1; min-width: 40px; accent-color: var(--y); height: 4px; margin: 0; }
.l-t { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.l-video:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.l-video:-webkit-full-screen { border-radius: 0; width: 100%; height: 100%; }
.l-video.fake-fs { position: fixed; inset: 0; z-index: 999; border-radius: 0; aspect-ratio: auto; margin: 0; }
body.no-scroll { overflow: hidden; }
.l-watch { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .l-watch .bar { flex: 1; } .l-watch span { font-size: 13px; font-weight: 600; white-space: nowrap; }
.l-details { margin-top: 12px; font-size: 15px; line-height: 1.55; }
.l-card.ok { background: var(--green-soft); color: var(--green); }
.l-pn { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.l-done { text-align: center; padding: 50px 10px; } .l-done .tick { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; background: var(--green); color: #fff; font: 800 52px/96px var(--head); }
.l-done.bad .tick { background: var(--red); } .l-done h1 { font: 800 28px var(--head); margin: 0 0 6px; }
.l-headrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.cal-h { font-size: 11px; color: var(--muted); font-weight: 700; }
.cal-d { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; font-size: 13px; font-weight: 600; background: #f5f0e3; }
.cal-d.present { background: var(--green); color: #fff; } .cal-d.absent { background: var(--red); color: #fff; } .cal-d.leave { background: var(--orange); color: #fff; }
.cal-d.off { background: transparent; color: #c9bfa6; } .cal-d.fut { background: transparent; color: #c9bfa6; } .cal-d.today { outline: 2px solid var(--ink); }
.cal-key { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .cal-key span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; background: #ccc; }
.cal-key .present::before { background: var(--green); } .cal-key .absent::before { background: var(--red); } .cal-key .leave::before { background: var(--orange); } .cal-key .off::before { background: #e8e0cc; }
@media (max-width: 380px) { .l-grid { grid-template-columns: 1fr; } }
.l-cert-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; } .l-cert-row:first-of-type { border-top: 0; } .l-cert-row > span:first-child { font-size: 24px; }
.l-ask { display: flex; gap: 12px; align-items: center; } .l-ask > span:first-child { font-size: 24px; }
.l-fb { background: var(--y-soft); } .l-fb .stars { display: flex; gap: 6px; margin: 8px 0; }
.l-fb .stars button { font-size: 32px; line-height: 1; background: none; border: 0; color: #d9cfb6; cursor: pointer; padding: 0 2px; } .l-fb .stars button.on { color: #e0a100; }
.l-fb textarea { width: 100%; margin-bottom: 8px; }
.l-answer { background: var(--green-soft); border-radius: 10px; padding: 8px 10px; margin-top: 6px; font-size: 14px; }
.pf-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin-bottom: 8px; }
@media (max-width: 480px) { .pf-row { grid-template-columns: 1fr auto; } .pf-row input[data-k=url] { grid-column: 1; } .pf-row button { grid-row: 1; grid-column: 2; } }

.l-ev { padding: 0; overflow: hidden; } .l-ev img { width: 100%; aspect-ratio: 16/8; object-fit: cover; display: block; } .l-ev-b { padding: 12px 14px 14px; } .l-ev-b b { display: block; font: 700 17px/1.3 var(--head); margin: 3px 0 6px; }
.l-ev-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.l-ev-hero { width: 100%; border-radius: 16px; display: block; margin-bottom: 10px; aspect-ratio: 16/9; object-fit: cover; }
.l-ev-row { padding: 4px 0; font-size: 15px; }
.l-guest { display: grid; gap: 6px; background: #faf6ec; border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.l-evteaser { display: flex; gap: 12px; align-items: center; } .l-evteaser img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; flex: none; }
.l-nav a { font-size: 11px; }

/* birthday */
.l-bday { text-align: center; background: linear-gradient(135deg, #FFC400, #ffdf6b); color: #1d1d1b; padding: 20px 16px; }
.l-bday .cake { font-size: 52px; line-height: 1; animation: bday-bob 1.6s ease-in-out infinite; }
.l-bday h2 { font: 800 24px var(--head); margin: 8px 0 4px; } .l-bday p { margin: 0 0 8px; font-size: 15px; }
@keyframes bday-bob { 50% { transform: translateY(-6px) rotate(-4deg); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti i { position: absolute; top: -20px; border-radius: 2px; animation: conf-fall linear forwards; }
@keyframes conf-fall { to { top: 105%; transform: translateX(40px) rotate(720deg); } }

/* resume builder */
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rs-chips span { background: var(--y-soft, #FFF4CC); border-radius: 99px; padding: 4px 6px 4px 12px; font-size: 14px; display: inline-flex; align-items: center; gap: 2px; }
.rs-chips button { background: none; border: 0; color: var(--muted); font-size: 12px; padding: 2px 6px; cursor: pointer; }
.rs-add { display: flex; gap: 6px; } .rs-add .in { flex: 1; min-width: 0; }
.rs-sug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rs-sug button { background: #fff; border: 1px dashed #d9cfb5; border-radius: 99px; padding: 4px 10px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.rs-row { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: #faf7ef; }
.rs-row .btn { justify-self: start; }
.rs-bar { position: sticky; bottom: 72px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 10px; background: rgba(250,247,239,.95); border-radius: 14px; box-shadow: 0 -2px 12px rgba(0,0,0,.06); margin: 6px 0 10px; z-index: 5; }

/* ---------- laptop / desktop layout ---------- */
.l-side, .l-steplist { display: none; }
@media (min-width: 960px) {
  .l-shell { padding: 0 0 0 248px; }
  .l-top, .l-nav { display: none; }
  .l-side { display: flex; flex-direction: column; gap: 2px; position: fixed; top: 0; bottom: 0; left: 0; width: 248px; background: var(--ink); padding: 18px 12px; z-index: 6; overflow-y: auto; }
  .l-side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: #fff; }
  .l-side-brand .logo-dot { background: var(--y); width: 30px; height: 30px; border-radius: 9px; flex: none; }
  .l-side-brand b { font: 800 15px/1.2 var(--head); }
  .l-side a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #c9c1ad; text-decoration: none; font-size: 14.5px; font-weight: 500; }
  .l-side a span { width: 20px; text-align: center; font-size: 16px; }
  .l-side a:hover { background: rgba(255,255,255,.06); color: #fff; }
  .l-side a.on { background: var(--y); color: var(--ink); font-weight: 700; }
  .l-side-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid rgba(255,255,255,.1); color: #fff; }
  .l-side-me b { font-size: 13.5px; display: block; } .l-side-me .small { color: #9d957f; }
  .avatar-s { width: 34px; height: 34px; border-radius: 50%; background: var(--y); color: var(--ink); display: grid; place-items: center; font-weight: 800; flex: none; }
  .l-side-out { background: none; border: 0; color: #9d957f; font-size: 18px; cursor: pointer; padding: 6px; border-radius: 8px; } .l-side-out:hover { color: #fff; background: rgba(255,255,255,.08); }
  .l-main { max-width: 1180px; padding: 28px 40px 48px; }
  .l-hi { font-size: 30px; }
  .l-home { columns: 2; column-gap: 18px; }
  .l-home > * { break-inside: avoid; }
  .l-main > .l-next { margin-bottom: 18px; }
  .l-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .l-steps .l-step { margin-bottom: 0; }
  .l-stepwrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
  .l-steplist { display: block; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(23,21,15,.06); }
  .l-sl { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
  .l-sl a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 13.5px; }
  .l-sl a:hover { background: var(--cream); } .l-sl a.cur { background: var(--y-soft, #FFF4CC); font-weight: 700; } .l-sl a.locked { opacity: .5; }
  .l-sl .n { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #efe8d6; }
  .l-sl a.done .n { background: var(--green); color: #fff; }
  .l-sl .t { flex: 1; min-width: 0; } .l-sl .v { color: var(--muted); font-size: 11px; }
  .l-keys { margin: -4px 0 10px; }
  .rs-bar { bottom: 16px; }
  .l-video { border-radius: 18px; }
  .l-ctrl button { min-width: 38px; height: 36px; font-size: 15px; } .l-t { font-size: 13px; }
}
@media (min-width: 960px) and (max-width: 1180px) { .l-stepwrap { grid-template-columns: minmax(0, 1fr) 280px; } }

/* offer + registration */
.l-offer { background: linear-gradient(135deg, #1d1d1b, #3a3424); color: #fff; }
.l-offer .small { color: #e9e2cf; } .l-offer-p { font-size: 18px; margin: 6px 0; } .l-offer-p b { color: var(--y); } .l-offer-p span { opacity: .7; font-size: 14px; }
.l-offer-t { background: rgba(255,196,0,.15); border-radius: 10px; padding: 6px 10px; margin: 8px 0 6px; font-size: 14px; display: inline-block; }
.l-terms { background: var(--cream); border-radius: 12px; padding: 10px 12px; font-size: 13px; } .l-terms summary { cursor: pointer; font-weight: 600; } .l-terms ul { padding-left: 18px; margin: 8px 0 0; } .l-terms li { margin-bottom: 5px; }
.l-doc { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f0ead9; } .l-doc:first-of-type { border-top: 0; }
.l-offer-plan { border-top: 1px solid rgba(255,255,255,.14); padding-top: 10px; margin-top: 10px; } .l-offer-plan:first-of-type { border-top: 0; margin-top: 4px; }
.l-offer-n { font-weight: 700; font-size: 16px; color: var(--y); } .l-offer s { opacity: .8; }
.l-offer-p i { font-style: normal; font-size: 12px; background: #2e7d32; color: #fff; border-radius: 99px; padding: 2px 8px; margin-left: 4px; white-space: nowrap; }
.l-offer-perks { margin: 6px 0; padding-left: 0; list-style: none; font-size: 13.5px; color: #f4efe1; } .l-offer-perks li { padding: 2px 0 2px 22px; position: relative; } .l-offer-perks li::before { content: '✓'; position: absolute; left: 4px; color: var(--y); font-weight: 700; }
.l-emi { background: #fff4d6; border: 2px solid var(--y); } .l-emi .small { font-weight: 700; letter-spacing: .02em; } .l-emi-a { font-size: 28px; font-weight: 800; margin: 2px 0; }
.l-emi.late { background: #ffe9e7; border-color: #e5484d; } .l-emi.late .small:first-child, .l-emi.late .l-emi-a { color: #c62828; }

/* course path: one numbered column on every screen */
.l-path { display: flex; flex-direction: column; gap: 10px; max-width: 820px; position: relative; }
.l-pstep { position: relative; display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 14px; padding: 12px 16px 12px 12px; color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); border: 2px solid transparent; }
.l-pstep:not(:last-child)::after { content: ''; position: absolute; left: 30px; top: calc(50% + 20px); height: calc(100% - 30px); width: 2px; background: #e4d9bd; z-index: 0; }
.l-path-plain .l-pstep::after { display: none; }
.l-pstep.done:not(:last-child)::after { background: var(--green); }
.l-pnum { position: relative; z-index: 1; width: 38px; height: 38px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; line-height: 1; font-weight: 800; font-size: 15px; background: var(--y); color: #1d1d1b; }
.l-pstep .grow { flex: 1; min-width: 0; }
.l-pstep.done .l-pnum { background: var(--green); color: #fff; }
.l-pstep.locked .l-pnum { background: #ece5d3; color: #6b6556; }
.l-pstep.locked { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .l-pstep.locked .t { color: #3d3a33; } .l-pstep.locked .l-pmeta { color: #a39a82; }
.l-pstep.cur { border-color: var(--y); box-shadow: 0 4px 14px rgba(255,196,0,.25); }
.l-pstep .t { font-weight: 600; line-height: 1.35; }
.l-pmeta { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: #8a7f63; margin-bottom: 2px; }
.l-ptag { flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: #efe8d6; color: #6b6556; white-space: nowrap; }
.l-ptag.ok { background: var(--green-soft, #e3f4e5); color: var(--green); }
.l-continue { display: flex; align-items: center; gap: 12px; border: 2px solid var(--y); background: #fffaf0; max-width: 820px; text-decoration: none; color: inherit; }
.l-continue .small { font-weight: 700; color: #8a7f63; letter-spacing: .03em; }
@media (max-width: 560px) { .l-pstep { padding: 10px 12px 10px 10px; gap: 10px; } .l-pstep:not(:last-child)::after { left: 28px; } .l-pnum { width: 36px; height: 36px; } .l-ptag { font-size: 11px; padding: 3px 8px; } }
.l-continue .grow { flex: 1; min-width: 0; }
@media (min-width: 960px) { .l-sl a.locked { opacity: 1; color: #6b6556; } .l-sl .n { border-radius: 50%; } .l-sl a.cur .n { background: var(--y); } .l-sl .v.ok { color: var(--green); font-weight: 700; } }
.l-certready { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, #0b2545, #133a6b); color: #fff; } .l-certready .small { color: #dfe7f3; } .l-certready a { color: #FFC400; }
.l-cr-ic { font-size: 34px; line-height: 1; }
.l-story textarea { margin-top: 6px; }
.l-todo { border: 2px solid #f0c75e; background: #fffaf0; padding-bottom: 6px; } .l-todo > .small { color: #8a6d1f; margin-bottom: 4px; letter-spacing: .02em; }
.l-todo-i { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #f1e6c8; color: inherit; text-decoration: none; } .l-todo-i:first-of-type { border-top: 0; }
.l-todo-i > span:first-child { font-size: 20px; width: 26px; text-align: center; flex: none; } .l-todo-i .grow { flex: 1; min-width: 0; }
.l-wa { border: 2px solid #c8f0d6; } .l-wa-ic { display: flex; flex: none; }

/* academy logo + photos */
.l-logo-card { background: #fff; border-radius: 14px; padding: 8px 12px; display: inline-flex; box-shadow: 0 2px 10px rgba(0,0,0,.08); } .l-logo-card img { height: 44px; width: auto; display: block; }
.l-brand { flex-direction: column; } .l-app-tag { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.l-side-brand .l-logo-card { padding: 6px 10px; } .l-side-brand .l-logo-card img { height: 36px; }
.l-mark { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.splash-logo { width: 84px; height: 84px; border-radius: 22px; animation: pulse 1.2s ease-in-out infinite; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.avatar-s.ph, .l-ph { overflow: hidden; background: #eee; } .avatar-s.ph img, .l-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l-who.ph { padding: 0; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; } .l-who.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l-photo { display: flex; gap: 16px; align-items: center; } .l-photo .l-ph { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font: 800 28px var(--head); background: var(--y); flex: none; }
.l-mentor .l-ph { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.l-laptop-head { display: flex; justify-content: space-between; align-items: center; }
.l-laptop { position: relative; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.l-laptop iframe { display: block; width: 100%; height: calc(100vh - 230px); min-height: 560px; border: 0; }
.l-laptop #lp-load { position: absolute; inset: 0; display: grid; place-items: center; }
.avatar-s.ph { display: block; padding: 0; }
/* course thumbnails */
.l-cthumb { display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; margin: 0 0 14px; border: 1px solid var(--line, #e8e2d3); background: #FAF5EA; }
.l-cthumb.sm { border-radius: 10px; margin: -2px 0 10px; }
.l-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.l-ccard { background: #fff; border: 1px solid var(--line, #e8e2d3); border-radius: 14px; overflow: hidden; }
.l-ccard img, .l-cph { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(.25); }
.l-cph { display: grid; place-items: center; padding: 12px; text-align: center; background: #FAF5EA; font: 800 18px "Bricolage Grotesque", sans-serif; }
.l-ccb { padding: 10px 12px 12px; } .l-ccb .t { font-weight: 700; margin-bottom: 2px; }
/* guide */
.l-guide h2 { margin: 18px 0 8px; font-size: 18px; } .l-guide ol, .l-guide ul { margin: 0; padding-left: 20px; } .l-guide li { margin: 6px 0; line-height: 1.5; }
.l-guide .rule { border-left: 4px solid #FFC400; background: #FFF8E1; padding: 10px 12px; border-radius: 8px; margin: 10px 0; }

/* lifetime membership card */
.l-member { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #17150F 0%, #2b2617 100%); color: #fff; text-decoration: none; border: 1px solid #3a3320; overflow: hidden; }
.l-member b { display: block; font-size: 16px; margin: 2px 0 4px; } .l-member .small { color: #d8d0bb; }
.l-member-mini { width: 74px; height: auto; aspect-ratio: 853 / 1280; border-radius: 8px; flex: none; transform: rotate(-6deg); box-shadow: 0 8px 18px rgba(0,0,0,.45); background: #222; }
.l-member-tag { display: inline-block; font: 800 10px/1 var(--head, sans-serif); letter-spacing: .12em; color: #17150F; background: #FFC400; padding: 4px 7px; border-radius: 4px; }
.l-idc-stage { perspective: 1600px; display: flex; justify-content: center; margin: 6px 0 4px; }
.l-idc { position: relative; width: min(340px, 82vw); aspect-ratio: 853 / 1280; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); cursor: pointer; }
.l-idc.flipped { transform: rotateY(180deg); }
.l-idc-face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06); background: #17150F; }
.l-idc-face.back { transform: rotateY(180deg); }
.l-idc-hint { text-align: center; margin: 8px 0 12px; }
.l-idc-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }