/* =====================================================================
   CBI student area — dark, calm, video-first
   ===================================================================== */
:root {
  --l-bg: #0b0a09;
  --l-side: #0f0e0c;
  --l-card: #151412;
  --l-card-2: #1c1a17;
  --l-line: rgba(255, 255, 255, 0.07);
  --l-line-2: rgba(255, 255, 255, 0.12);
  --l-text: #f2eee6;
  --l-dim: rgba(242, 238, 230, 0.66);
  --l-faint: rgba(242, 238, 230, 0.42);
  --l-gold: #c9a45c;
  --l-gold-2: #e3c887;
  --l-gold-soft: rgba(201, 164, 92, 0.14);
  --l-green: #45b884;
  --l-red: #e06a6f;
  --l-radius: 16px;
  --l-font: "Cairo", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  --l-display: "El Messiri", "Cairo", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.learn {
  background: var(--l-bg);
  color: var(--l-text);
  font-family: var(--l-font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 700; }
p { margin: 0; }
.center { text-align: center; }

/* ---------- Layout ---------- */
.l-side {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: 256px;
  background: var(--l-side); border-inline-end: 1px solid var(--l-line);
  display: flex; flex-direction: column; padding: 22px 16px; z-index: 20;
}
.l-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: 0.02em; font-size: 0.98rem; }
.l-brand img { border-radius: 9px; }
.l-nav { display: grid; gap: 4px; margin-top: 34px; }
.l-nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px;
  text-decoration: none; color: var(--l-dim); font-weight: 600; transition: background .2s, color .2s;
}
.l-nav a svg { width: 21px; height: 21px; flex: none; }
.l-nav a:hover { background: rgba(255,255,255,.04); color: var(--l-text); }
.l-nav a.is-active { background: var(--l-gold-soft); color: var(--l-gold-2); }
.l-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--l-line); }
.l-me-text { min-width: 0; flex: 1; display: grid; }
.l-me-text b { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-me-text small { color: var(--l-faint); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: end; }
.l-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--l-gold-2), var(--l-gold)); color: #1a140a; font-weight: 800; text-decoration: none;
}
.l-logout { background: none; border: 1px solid var(--l-line-2); color: var(--l-dim); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 0.78rem; cursor: pointer; }
.l-logout:hover { color: var(--l-text); border-color: var(--l-faint); }

.l-main { margin-inline-start: 256px; min-height: 100vh; }
.l-top { display: none; }
.l-content { max-width: 1120px; margin: 0 auto; padding: 36px 36px 80px; }
.l-tabs { display: none; }

/* ---------- Type & helpers ---------- */
.l-eyebrow { color: var(--l-gold); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 6px; }
.l-dim { color: var(--l-dim); }
.l-faint { color: var(--l-faint); }
.l-sm { font-size: 0.85rem; }
.l-link { color: var(--l-gold-2); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.l-link:hover { text-decoration: underline; }
.l-back { display: inline-block; color: var(--l-dim); text-decoration: none; font-size: 0.9rem; margin-bottom: 14px; }
.l-back:hover { color: var(--l-text); }

.l-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.l-hero h1 { font-family: var(--l-display); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 600; }
.l-hero-sub { color: var(--l-dim); margin-top: 6px; }
.l-hero-sm h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

.l-card { background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--l-radius); padding: 22px; }
.l-card h2 { font-size: 1.2rem; }
.l-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.l-grid-2 { grid-template-columns: repeat(2, 1fr); }
.l-section { margin-top: 38px; }
.l-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.l-section-head h2 { font-size: 1.25rem; }
.l-empty { text-align: center; padding: 44px 22px; }
.l-empty h2 { margin-bottom: 6px; }

/* ---------- Buttons ---------- */
.l-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 11px; border: 1px solid var(--l-line-2);
  background: rgba(255,255,255,.03); color: var(--l-text); font: inherit; font-weight: 700; font-size: 0.93rem;
  text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; white-space: nowrap;
}
.l-btn:hover { background: rgba(255,255,255,.07); border-color: var(--l-faint); }
.l-btn:active { transform: translateY(1px); }
.l-btn-gold { background: linear-gradient(180deg, var(--l-gold-2), var(--l-gold)); color: #17120a; border-color: transparent; }
.l-btn-gold:hover { background: linear-gradient(180deg, #ecd49b, #d1ad65); border-color: transparent; }
.l-btn-done { background: rgba(69, 184, 132, .12); border-color: rgba(69,184,132,.4); color: #7fd6ad; }
.l-btn-danger { background: rgba(224,106,111,.12); border-color: rgba(224,106,111,.45); color: #f09da0; }
.l-btn-wa { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.l-btn-wa:hover { background: #178347; border-color: #178347; }
.l-btn-disabled { opacity: .55; cursor: default; font-weight: 600; white-space: normal; text-align: center; }
.l-btn-disabled:hover { background: rgba(255,255,255,.03); border-color: var(--l-line-2); }
.l-btn-sm { padding: 8px 14px; font-size: 0.84rem; }
.l-btn-glow { box-shadow: 0 0 0 3px rgba(201,164,92,.35); animation: l-pulse 1.6s ease-in-out 3; }
@keyframes l-pulse { 50% { box-shadow: 0 0 0 8px rgba(201,164,92,.08); } }
.l-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.l-notice, .l-error { border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; font-size: 0.93rem; }
.l-notice { background: var(--l-gold-soft); border: 1px solid rgba(201,164,92,.3); color: var(--l-gold-2); }
.l-error { background: rgba(224,106,111,.1); border: 1px solid rgba(224,106,111,.35); color: #f3a7aa; }

/* ---------- Dashboard ---------- */
.l-pinned { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, rgba(201,164,92,.16), rgba(201,164,92,.04)); border: 1px solid rgba(201,164,92,.3); border-radius: var(--l-radius); padding: 16px 20px; margin-bottom: 18px; }
.l-pinned h3 { font-size: 1rem; margin-bottom: 2px; }
.l-pinned p { color: var(--l-dim); font-size: 0.93rem; }
.l-pin { flex: none; background: var(--l-gold); color: #17120a; font-size: 0.72rem; font-weight: 800; border-radius: 6px; padding: 3px 8px; margin-top: 2px; }

.l-continue { grid-column: span 2; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.l-continue-media { position: relative; display: block; background: #000; min-height: 220px; }
.l-continue-media > img { width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: opacity .3s, transform .6s; }
.l-continue-media:hover > img { opacity: 1; transform: scale(1.02); }
.l-poster-empty { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #221e17, #0c0b09); }
.l-poster-empty img { opacity: .5; border-radius: 12px; }
.l-play-badge { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(12,11,10,.55); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); color: #fff; }
.l-media-progress { position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.2); }
.l-media-progress span { display: block; height: 100%; background: var(--l-gold); }
.l-continue-body { padding: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.l-continue-body h2 { font-size: 1.4rem; }
.l-continue-body .l-btn { margin-top: auto; }
.l-meta { color: var(--l-faint); font-size: 0.86rem; display: flex; gap: 12px; margin-bottom: 12px; }
.l-done-all { grid-column: span 2; }

.l-progress-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.l-progress-card .l-eyebrow { align-self: flex-start; }
.l-ring { position: relative; width: 132px; height: 132px; }
.l-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.l-ring circle { fill: none; stroke-width: 8; }
.l-ring-bg { stroke: rgba(255,255,255,.07); }
.l-ring-fg { stroke: var(--l-gold); stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.l-ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.7rem; font-weight: 800; }

.l-next-meeting h2 { font-size: 1.15rem; margin-bottom: 4px; }
.l-dim-title { color: var(--l-dim); font-size: 1.05rem !important; }
.l-when { color: var(--l-gold-2); font-weight: 600; font-size: 0.95rem; }
.l-countdown { color: var(--l-dim); font-size: 0.9rem; margin-top: 6px; }
.l-live-dot { display: inline-flex; align-items: center; gap: 7px; color: #ff8a8e; font-weight: 800; font-size: 0.82rem; margin-bottom: 6px; }
.l-live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff5a60; box-shadow: 0 0 0 0 rgba(255,90,96,.6); animation: l-live 1.5s infinite; }
@keyframes l-live { 70% { box-shadow: 0 0 0 9px rgba(255,90,96,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,96,0); } }
.l-next-meeting { grid-column: span 2; }
.l-announcements { grid-column: span 1; display: flex; flex-direction: column; gap: 4px; }
.l-announce { padding: 12px 0; border-bottom: 1px solid var(--l-line); }
.l-announce:last-child { border-bottom: 0; }
.l-announce h3 { font-size: 0.98rem; }
.l-announce p { color: var(--l-dim); font-size: 0.9rem; margin: 3px 0; }
.l-announce a, .l-desc a, .l-pinned a { color: var(--l-gold-2); }
.l-announce time { font-size: 0.76rem; }

.l-modules-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.l-module-mini { display: flex; gap: 12px; align-items: center; text-decoration: none; background: var(--l-card); border: 1px solid var(--l-line); border-radius: 14px; padding: 14px 16px; transition: border-color .2s; }
.l-module-mini:hover { border-color: rgba(201,164,92,.4); }
.l-module-mini > div { flex: 1; display: grid; gap: 4px; }
.l-module-mini small { font-size: 0.78rem; }
.l-module-idx { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--l-gold-soft); color: var(--l-gold-2); font-weight: 800; font-size: 0.9rem; }
.l-bar { display: block; height: 5px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; }
.l-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--l-gold), var(--l-gold-2)); border-radius: 5px; }
.l-bar-lg { width: 220px; height: 7px; flex: none; }

/* ---------- Lessons list ---------- */
.l-module { background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--l-radius); margin-bottom: 18px; overflow: hidden; }
.l-module-head { display: flex; gap: 14px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--l-line); }
.l-module-head > div { flex: 1; }
.l-module-head h2 { font-size: 1.1rem; }
.l-module-head p { font-size: 0.88rem; margin-top: 2px; }
.l-module-count { font-weight: 700; font-size: 0.85rem; }
.l-lessons { list-style: none; margin: 0; padding: 6px; }
.l-lesson { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 11px; text-decoration: none; transition: background .15s; }
.l-lesson:hover { background: rgba(255,255,255,.035); }
.l-lesson-title { flex: 1; font-weight: 600; }
.l-lesson-meta { color: var(--l-faint); font-size: 0.84rem; }
.l-lesson.is-done .l-lesson-title { color: var(--l-dim); }
.l-check { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--l-line-2); color: var(--l-faint); font-size: 0.8rem; font-weight: 700; }
.l-check svg { width: 16px; height: 16px; }
.is-done .l-check { background: rgba(69,184,132,.14); border-color: rgba(69,184,132,.5); color: #7fd6ad; }
.l-check.sm { width: 24px; height: 24px; font-size: 0.72rem; }
.l-check.sm svg { width: 13px; height: 13px; }
.l-tag { background: rgba(255,255,255,.06); border-radius: 6px; padding: 2px 8px; font-size: 0.74rem; }

/* ---------- Lesson page ---------- */
.l-lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.l-lesson-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 22px 0 16px; }
.l-lesson-head h1 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.l-desc { color: var(--l-dim); line-height: 1.9; margin-bottom: 16px; }
.l-files h2 { font-size: 1.05rem; margin-bottom: 10px; }
.l-files ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.l-files a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; background: rgba(255,255,255,.03); text-decoration: none; }
.l-files a:hover { background: rgba(255,255,255,.06); }
.l-files a span { flex: 1; font-weight: 600; font-size: 0.93rem; }
.l-files svg { color: var(--l-gold); flex: none; }
.l-prevnext { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.l-lesson-side { position: sticky; top: 24px; }
.l-side-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.l-side-list a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; text-decoration: none; font-size: 0.9rem; color: var(--l-dim); }
.l-side-list a:hover { background: rgba(255,255,255,.04); color: var(--l-text); }
.l-side-list a.is-current { background: var(--l-gold-soft); color: var(--l-gold-2); font-weight: 700; }
.l-video-wait { aspect-ratio: 16 / 9; display: grid; place-items: center; background: #000; border-radius: var(--l-radius); color: var(--l-dim); border: 1px solid var(--l-line); text-align: center; padding: 20px; }

/* ---------- Schedule ---------- */
.l-meetings { display: grid; gap: 14px; }
.l-meeting { display: flex; gap: 20px; align-items: flex-start; }
.l-meeting.is-next { border-color: rgba(201,164,92,.35); background: linear-gradient(135deg, rgba(201,164,92,.08), var(--l-card) 55%); }
.l-meeting.is-live { border-color: rgba(255,90,96,.45); }
.l-date-tile { width: 76px; flex: none; border-radius: 14px; overflow: hidden; text-align: center; background: var(--l-card-2); border: 1px solid var(--l-line-2); display: grid; }
.l-date-tile .d-month { background: var(--l-gold); color: #17120a; font-weight: 800; font-size: 0.78rem; padding: 3px 0; }
.l-date-tile .d-day { font-size: 1.9rem; font-weight: 800; line-height: 1.2; padding-top: 4px; }
.l-date-tile .d-week { font-size: 0.75rem; color: var(--l-dim); padding-bottom: 6px; }
.l-meeting-body { flex: 1; min-width: 0; }
.l-meeting-body h2 { font-size: 1.15rem; margin-bottom: 4px; }
.l-meeting-body .l-dim { margin-top: 8px; font-size: 0.93rem; }
.l-pass { margin-top: 8px; font-size: 0.92rem; }
.l-past { display: grid; gap: 8px; }
.l-past-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--l-card); border: 1px solid var(--l-line); border-radius: 12px; padding: 13px 16px; }
.l-past-row > div { display: grid; }
.l-past-row small { font-size: 0.8rem; }

/* ---------- Account ---------- */
.l-sub-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--l-line); }
.l-sub-row > div { display: grid; }
.l-sub-row small { font-size: 0.82rem; }
.l-status { font-size: 0.78rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.l-status.on { background: rgba(69,184,132,.14); color: #7fd6ad; }
.l-status.off { background: rgba(255,255,255,.06); color: var(--l-faint); }
.l-sub-detail { margin-top: 14px; display: grid; gap: 12px; color: var(--l-dim); }
.l-sub-detail b { color: var(--l-text); }
.l-cancel summary { cursor: pointer; color: var(--l-faint); font-size: 0.88rem; text-decoration: underline; text-underline-offset: 4px; width: fit-content; }
.l-cancel form { margin-top: 12px; display: grid; gap: 12px; }
.l-devices { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.l-devices li { display: flex; justify-content: space-between; gap: 10px; background: rgba(255,255,255,.03); border-radius: 10px; padding: 10px 12px; font-size: 0.9rem; }

/* ---------- Auth pages ---------- */
.l-guest { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; background: radial-gradient(ellipse at 50% 0%, rgba(201,164,92,.12), transparent 60%), var(--l-bg); }
.l-brand-center { flex-direction: column; gap: 12px; margin-bottom: 26px; font-size: 1.05rem; }
.l-brand-center img { border-radius: 12px; }
.auth-card { width: 100%; max-width: 420px; background: var(--l-card); border: 1px solid var(--l-line); border-radius: 20px; padding: 32px 28px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.auth-card h1 { font-family: var(--l-display); font-weight: 600; font-size: 1.8rem; }
.auth-sub { color: var(--l-dim); margin: 8px 0 22px; font-size: 0.95rem; }
.auth-form { display: grid; gap: 8px; }
.auth-form label { font-size: 0.86rem; color: var(--l-dim); font-weight: 600; margin-top: 6px; }
.auth-form input {
  width: 100%; padding: 13px 14px; border-radius: 11px; border: 1px solid var(--l-line-2); background: #0e0d0b;
  color: var(--l-text); font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.auth-form input:focus { outline: none; border-color: var(--l-gold); box-shadow: 0 0 0 3px rgba(201,164,92,.2); }
.auth-form input:disabled { opacity: .6; }
.auth-form .l-btn { margin-top: 14px; width: 100%; padding: 14px; }
.field-note { font-size: 0.8rem; color: var(--l-faint); }
.auth-help { margin-top: 18px; border-top: 1px solid var(--l-line); padding-top: 16px; }
.auth-help summary { cursor: pointer; color: var(--l-dim); font-size: 0.9rem; }
.auth-help p { color: var(--l-dim); font-size: 0.9rem; margin: 10px 0 14px; }
.auth-foot { text-align: center; color: var(--l-faint); font-size: 0.88rem; margin-top: 20px; }
.auth-foot a { color: var(--l-gold-2); }

.l-ended { max-width: 520px; margin: 40px auto; text-align: center; display: grid; gap: 14px; justify-items: center; padding: 40px 28px; }
.l-ended img { border-radius: 14px; }
.l-ended h1 { font-family: var(--l-display); font-weight: 600; font-size: 1.7rem; }
.l-price { font-size: 2.4rem; font-weight: 800; color: var(--l-gold-2); }
.l-price small { font-size: 1rem; color: var(--l-faint); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .l-grid { grid-template-columns: 1fr 1fr; }
  .l-continue, .l-next-meeting { grid-column: span 2; }
  .l-lesson-layout { grid-template-columns: 1fr; }
  .l-lesson-side { position: static; }
}

/* ---------- Phone ---------- */
@media (max-width: 820px) {
  .l-side { display: none; }
  .l-main { margin: 0; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .l-top {
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 30;
    padding: 12px 16px; background: rgba(11,10,9,.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--l-line);
  }
  .l-brand-sm { font-size: 0.9rem; }
  .l-avatar { width: 34px; height: 34px; }
  .l-content { padding: 20px 16px 40px; }
  .l-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(15,14,12,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--l-line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .l-tabs a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; text-decoration: none; color: var(--l-faint); font-size: 0.7rem; font-weight: 700; }
  .l-tabs a svg { width: 23px; height: 23px; }
  .l-tabs a.is-active { color: var(--l-gold-2); }
  .l-hero { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 18px; }
  .l-bar-lg { width: 100%; }
  .l-grid, .l-grid-2 { grid-template-columns: 1fr; gap: 14px; }
  .l-continue, .l-next-meeting, .l-announcements, .l-done-all { grid-column: auto; }
  .l-continue { grid-template-columns: 1fr; }
  .l-continue-media { min-height: 0; aspect-ratio: 16 / 9; }
  .l-continue-body { padding: 20px; }
  .l-continue-body .l-btn { width: 100%; margin-top: 8px; }
  .l-card { padding: 18px; }
  .l-actions .l-btn { flex: 1 1 100%; }
  .l-lesson-head { flex-direction: column; margin: 16px 0 12px; }
  .l-lesson-head form, .l-lesson-head .l-btn { width: 100%; }
  .l-content .cbi-player { margin-inline: -16px; border-radius: 0; }
  .l-content .p-back, .l-content .p-mute { display: none; }
  .p-time { font-size: 11.5px; }
  .l-meeting { gap: 14px; }
  .l-date-tile { width: 60px; }
  .l-date-tile .d-day { font-size: 1.5rem; }
  .l-module-head { padding: 16px; }
  .l-lesson { padding: 12px 10px; gap: 12px; }
  .l-past-row { flex-direction: column; align-items: stretch; }
  .auth-card { padding: 26px 20px; }
}

/* =====================================================================
   CBI Club (members' area)
   ===================================================================== */
.club-zone { --c-champ: #ece3d2; --c-champ-dim: rgba(236,227,210,.62); --c-line: rgba(212,176,106,.22); --c-gold: #d4b06a; --c-serif: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif; }
.l-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 20px; background: linear-gradient(90deg, rgba(212,176,106,.22), rgba(212,176,106,.08)); border-bottom: 1px solid rgba(212,176,106,.35); color: var(--l-gold-2); font-size: .88rem; font-weight: 600; }
.l-preview-bar form { margin: 0; }
.l-preview-bar button { background: var(--l-gold); color: #17120a; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 800; cursor: pointer; }
.l-tabs.has-5 { grid-template-columns: repeat(5, 1fr); }

/* Crest (shared with the public club page) */
.crest { display: block; width: 100%; height: auto; overflow: visible; direction: ltr; unicode-bidi: isolate; }
.crest .crest-line { fill: none; stroke: #b8944f; stroke-width: 1.2; }
.crest .crest-line.thin { stroke-width: .6; opacity: .7; }
.crest .crest-ring-text { fill: #d4b06a; font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif; font-size: 8.6px; letter-spacing: 2.4px; direction: ltr; }
.crest .crest-mono { fill: #ece3d2; font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif; font-size: 34px; letter-spacing: 5px; }
.crest .crest-sub { fill: #d4b06a; font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif; font-size: 10px; letter-spacing: 7px; }

.c-eyebrow { font-family: var(--c-serif, Georgia, serif); color: var(--l-gold); font-size: .74rem; letter-spacing: .22em; margin-bottom: 8px; }
.c-hero { padding: 6px 0 18px; }
.c-hero h1, .c-head h1 { font-family: var(--l-display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--c-champ, #ece3d2); }
.c-sub { color: var(--l-dim); margin-top: 6px; }
.c-head { margin: 8px 0 20px; }
.c-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.c-subnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 22px; padding-bottom: 2px; border-bottom: 1px solid var(--l-line); }
.c-subnav::-webkit-scrollbar { display: none; }
.c-subnav a { white-space: nowrap; text-decoration: none; color: var(--l-dim); font-weight: 700; font-size: .92rem; padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.c-subnav a:hover { color: var(--l-text); }
.c-subnav a.is-active { color: var(--l-gold-2); border-bottom-color: var(--l-gold); }
.c-panel { background: linear-gradient(180deg, #16140f, #121110); border: 1px solid var(--c-line, rgba(212,176,106,.22)); border-radius: var(--l-radius); padding: 22px; }
.c-hint { color: var(--l-faint); font-size: .84rem; text-align: center; margin-top: 12px; }

/* Membership card */
.c-home-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 22px; }
.mcard-wrap { perspective: 1400px; max-width: 460px; margin: 0 auto; width: 100%; }
.mcard { --rx: 0deg; --ry: 0deg; position: relative; aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.7,.2,1); transform: rotateX(var(--rx)) rotateY(var(--ry)); cursor: pointer; }
.mcard.is-flipped { transform: rotateX(var(--rx)) rotateY(calc(180deg + var(--ry))); }
.mcard-face {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(ellipse at 18% 0%, rgba(212,176,106,.2), transparent 55%), linear-gradient(135deg, #1f1b15 0%, #0b0a08 55%, #18140e 100%);
  border: 1px solid rgba(212,176,106,.4); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; color: #ece3d2;
}
.mcard-face::after { content: ""; position: absolute; inset: -50%; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(236,227,210,.1) 50%, transparent 60%); animation: mc-sheen 7s ease-in-out infinite; }
@keyframes mc-sheen { 0%, 25% { transform: translateX(-40%); } 65%, 100% { transform: translateX(40%); } }
.mcard-back { transform: rotateY(180deg); padding: 0; }
.mcard-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.mcard-brand { font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif; font-size: 1.05rem; letter-spacing: .34em; background: linear-gradient(180deg, #f2dca4 0%, #b8944f 55%, #e6c783 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mcard-chip { width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #e6c783, #9c7a3c 60%, #d8b56e); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); position: relative; }
.mcard-chip::before, .mcard-chip::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(0,0,0,.25); }
.mcard-chip::before { top: 10px; } .mcard-chip::after { top: 20px; }
.mcard-crest { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 38%; max-width: 150px; opacity: .22; }
.mcard-no { position: relative; z-index: 1; font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif; font-size: clamp(1.4rem, 5vw, 1.9rem); letter-spacing: .12em; background: linear-gradient(180deg, #f6e4b4, #b8944f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mcard-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; position: relative; z-index: 1; }
.mcard-bottom > div { display: grid; gap: 2px; min-width: 0; }
.mcard-label { font-family: "Didot", "Bodoni 72", Georgia, serif; font-size: .58rem; letter-spacing: .26em; color: rgba(236,227,210,.55); }
.mcard-name { font-weight: 700; font-size: clamp(.95rem, 3.4vw, 1.12rem); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard-meta { text-align: right; font-family: "Didot", "Bodoni 72", Georgia, serif; letter-spacing: .12em; font-size: .9rem; }
.mcard-stripe { height: 22%; margin-top: 8%; background: linear-gradient(180deg, #050505, #1a1a1a); }
.mcard-back-body { display: flex; gap: 18px; align-items: center; padding: 6% 7%; flex: 1; }
.mcard-qr { width: 34%; aspect-ratio: 1; background: #0d0b08; border: 1px solid rgba(212,176,106,.35); border-radius: 10px; padding: 8px; flex: none; }
.mcard-qr svg { width: 100%; height: 100%; display: block; }
.mcard-back-text { display: grid; gap: 4px; min-width: 0; }
.mcard-small { font-size: .62rem; color: rgba(236,227,210,.5); letter-spacing: .06em; }
.mcard-flip { display: flex; align-items: center; gap: 8px; margin: 14px auto 0; background: none; border: 1px solid var(--l-line-2); color: var(--l-dim); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.mcard-flip:hover { color: var(--l-text); border-color: var(--l-faint); }

/* Next gathering (home) */
.c-next { background: linear-gradient(160deg, rgba(212,176,106,.12), #121110 60%); border: 1px solid rgba(212,176,106,.3); border-radius: var(--l-radius); padding: 26px; }
.c-next h2 { font-family: var(--l-display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.2rem); color: #ece3d2; }
.c-country { color: var(--l-gold-2); font-size: .7em; }
.c-secret { letter-spacing: .02em; }
.c-dates { color: var(--l-gold-2); font-weight: 600; margin-top: 4px; }
.c-countdown { color: var(--l-dim); font-size: .9rem; margin-top: 6px; }
.c-next-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 16px; color: var(--l-dim); font-size: .9rem; }
.c-next-meta b { color: var(--l-text); }
.c-rsvp-pill { font-size: .78rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.c-rsvp-pill.is-going { background: rgba(69,184,132,.15); color: #7fd6ad; }
.c-rsvp-pill.is-maybe { background: rgba(212,176,106,.16); color: var(--l-gold-2); }
.c-rsvp-pill.is-no, .c-rsvp-pill.is-none { background: rgba(255,255,255,.06); color: var(--l-faint); }

.c-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.c-tile { display: grid; gap: 2px; text-decoration: none; background: var(--l-card); border: 1px solid var(--l-line); border-radius: 14px; padding: 16px; transition: border-color .2s, transform .2s; }
.c-tile:hover { border-color: rgba(212,176,106,.45); transform: translateY(-2px); }
.c-tile-num { font-family: "Didot", "Bodoni 72", Georgia, serif; color: var(--l-gold-2); font-size: 1.5rem; }
.c-tile small { color: var(--l-faint); font-size: .8rem; }

/* Club code / locked */
.c-code { max-width: 640px; margin: 20px auto; text-align: center; display: grid; justify-items: center; gap: 12px; }
.c-code h1 { font-family: var(--l-display); font-weight: 600; font-size: 2.1rem; color: #ece3d2; }
.c-code-crest { width: 110px; margin-bottom: 6px; }
.c-code-crest .crest-ring-text { animation: none; }
.c-rules { list-style: none; counter-reset: r; padding: 0; margin: 14px 0; display: grid; gap: 10px; text-align: start; width: 100%; }
.c-rules li { counter-increment: r; display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; background: var(--l-card); border: 1px solid var(--l-line); border-radius: 12px; padding: 14px 16px; }
.c-rules li::before { content: counter(r, upper-roman); grid-row: span 2; font-family: "Didot", "Bodoni 72", Georgia, serif; color: var(--l-gold); font-size: 1.1rem; align-self: center; text-align: center; }
.c-rules b { color: #ece3d2; }
.c-rules span { color: var(--l-dim); font-size: .92rem; }
.c-accept { padding: 14px 26px; }

/* Gathering page */
.g-hero { position: relative; border-radius: 20px; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; background: radial-gradient(ellipse at 70% 20%, rgba(212,176,106,.22), transparent 60%), linear-gradient(135deg, #1c1813, #0b0a08); border: 1px solid rgba(212,176,106,.3); margin-bottom: 14px; }
.g-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,9,.3) 0%, rgba(11,10,9,.55) 45%, rgba(11,10,9,.93) 100%); }
.g-hero-body { position: relative; padding: 28px; }
.g-hero h1 { font-family: var(--l-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.4rem); color: #fff; line-height: 1.15; }
.g-hero.is-locked h1 { letter-spacing: .04em; }
.g-where { color: #ece3d2; font-size: 1.05rem; margin-top: 4px; }
.g-dates { color: var(--l-gold-2); font-weight: 700; margin-top: 8px; }
.g-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; }
.g-tabs::-webkit-scrollbar { display: none; }
.g-tabs a { white-space: nowrap; text-decoration: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--l-line-2); color: var(--l-dim); font-weight: 700; font-size: .9rem; }
.g-tabs a.is-active { background: var(--l-gold); border-color: var(--l-gold); color: #17120a; }
.g-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.g-side { display: grid; gap: 14px; }
.g-text { color: var(--l-dim); line-height: 1.9; }
.g-h3 { font-size: 1rem; margin: 20px 0 10px; color: #ece3d2; }
.g-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.g-list li { position: relative; padding-inline-start: 22px; color: var(--l-dim); }
.g-list li::before { content: "◆"; position: absolute; inset-inline-start: 0; color: var(--l-gold); font-size: .7rem; top: 4px; }
.g-avatars { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.g-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--l-gold-soft); color: var(--l-gold-2); font-weight: 800; border: 1px solid rgba(212,176,106,.35); }
.g-av img { width: 100%; height: 100%; object-fit: cover; }
.g-full { width: 100%; margin-top: 12px; }
.g-small { font-size: .8rem; margin-top: 8px; }
.g-hotel-mini { display: grid; gap: 4px; text-decoration: none; }
.g-stars { color: var(--l-gold-2); letter-spacing: 2px; }
.g-locked { text-align: center; padding: 44px 22px; }
.g-lock-icon { color: var(--l-gold); font-size: 1.6rem; margin-bottom: 8px; }
.g-hotel { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--l-card); border: 1px solid var(--c-line, rgba(212,176,106,.22)); border-radius: var(--l-radius); overflow: hidden; }
.g-hotel-img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.g-hotel-body { padding: 26px; display: grid; gap: 8px; align-content: start; }
.g-hotel-body h2 { font-family: var(--l-display); font-weight: 600; font-size: 1.8rem; color: #ece3d2; }
.g-address { color: var(--l-dim); }
.g-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.g-facts div { display: grid; background: rgba(255,255,255,.04); border: 1px solid var(--l-line); border-radius: 10px; padding: 8px 12px; min-width: 110px; }
.g-facts span { font-size: .75rem; color: var(--l-faint); }
.g-note { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--l-gold-soft); border: 1px solid rgba(212,176,106,.3); color: #ece3d2; font-size: .93rem; }
.g-days { display: grid; gap: 16px; }
.g-day { background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--l-radius); padding: 20px 22px; }
.g-day header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.g-day-n { font-family: var(--l-display); color: var(--l-gold-2); font-size: 1.25rem; font-weight: 600; }
.g-day header time { color: var(--l-dim); font-size: .9rem; }
.g-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.g-timeline li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--l-line); }
.g-time { font-variant-numeric: tabular-nums; color: var(--l-gold-2); font-weight: 700; }
.g-timeline b { color: #ece3d2; }
.g-loc { display: block; color: var(--l-faint); font-size: .84rem; }
.g-timeline p { color: var(--l-dim); font-size: .9rem; margin-top: 4px; }
.g-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.g-checklist label { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.03); border: 1px solid var(--l-line); border-radius: 11px; padding: 12px 14px; cursor: pointer; }
.g-checklist input { width: 20px; height: 20px; accent-color: var(--l-gold); margin-top: 3px; flex: none; }
.g-checklist input:checked + span { color: var(--l-faint); text-decoration: line-through; }
.g-dress { font-family: var(--l-display); font-size: 1.3rem; color: #ece3d2; }
.g-rsvp { max-width: 760px; }
.g-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.g-opt { position: relative; display: block; }
.g-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.g-opt span { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border-radius: 12px; border: 1px solid var(--l-line-2); cursor: pointer; font-weight: 700; color: var(--l-dim); transition: all .2s; }
.g-opt i { font-style: normal; font-size: 1.2rem; }
.g-opt input:checked + span { border-color: var(--l-gold); background: var(--l-gold-soft); color: var(--l-gold-2); }
.g-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.g-form-grid > div { display: grid; gap: 8px; }
.auth-form select, .auth-form textarea { width: 100%; padding: 13px 14px; border-radius: 11px; border: 1px solid var(--l-line-2); background: #0e0d0b; color: var(--l-text); font: inherit; font-size: 1rem; }
.auth-form textarea { resize: vertical; }
.auth-form select:focus, .auth-form textarea:focus { outline: none; border-color: var(--l-gold); box-shadow: 0 0 0 3px rgba(201,164,92,.2); }
.g-gallery { columns: 3 220px; column-gap: 10px; }
.g-gallery a { display: block; margin-bottom: 10px; border-radius: 12px; overflow: hidden; break-inside: avoid; }
.g-gallery img { width: 100%; transition: transform .5s; }
.g-gallery a:hover img { transform: scale(1.03); }
.c-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.94); display: none; align-items: center; justify-content: center; }
.c-lightbox.is-open { display: flex; }
.c-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 8px; }
.c-lightbox button { position: absolute; background: rgba(255,255,255,.08); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; }
.c-lb-close { top: 16px; left: 16px; }
.c-lb-prev { right: 16px; top: 50%; }
.c-lb-next { left: 16px; top: 50%; }

/* Archive */
.c-archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.c-archive-card { text-decoration: none; background: var(--l-card); border: 1px solid var(--l-line); border-radius: 16px; overflow: hidden; transition: border-color .2s; }
.c-archive-card:hover { border-color: rgba(212,176,106,.45); }
.c-archive-img { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #1c1813, #0b0a08); display: grid; place-items: center; color: var(--l-gold); }
.c-archive-img img { width: 100%; height: 100%; object-fit: cover; }
.c-archive-body { padding: 14px 16px; display: grid; gap: 2px; }

/* Members */
.c-search { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--l-line-2); background: var(--l-card); color: var(--l-text); font: inherit; margin-bottom: 16px; }
.c-search:focus { outline: none; border-color: var(--l-gold); }
.c-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.c-member { display: flex; gap: 14px; background: var(--l-card); border: 1px solid var(--l-line); border-radius: 16px; padding: 16px; }
.c-member[hidden] { display: none; }
.c-member.is-me { border-color: rgba(212,176,106,.45); }
.c-member-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--l-gold-soft); border: 1px solid rgba(212,176,106,.4); color: var(--l-gold-2); font-size: 1.5rem; font-weight: 800; }
.c-member-photo img { width: 100%; height: 100%; object-fit: cover; }
.c-member-body { display: grid; gap: 2px; min-width: 0; align-content: start; }
.c-member-no { font-family: "Didot", "Bodoni 72", Georgia, serif; color: var(--l-gold); letter-spacing: .1em; font-size: .72rem; }
.c-member-bio { color: var(--l-dim); font-size: .86rem; margin-top: 4px; }
.c-photo-panel { display: grid; justify-items: center; gap: 12px; text-align: center; }
.c-photo-panel .c-eyebrow { justify-self: start; }
.c-photo-lg { width: 140px; height: 140px; font-size: 2.6rem; }
.c-photo-btn { cursor: pointer; }
.c-toggle { display: flex !important; align-items: center; gap: 10px; color: var(--l-text) !important; cursor: pointer; margin: 10px 0 !important; }
.c-toggle input { width: 18px !important; height: 18px; accent-color: var(--l-gold); padding: 0 !important; }

/* Concierge */
.c-requests { display: grid; gap: 10px; }
.c-request { background: var(--l-card); border: 1px solid var(--l-line); border-radius: 14px; padding: 16px; display: grid; gap: 6px; }
.c-request-top { display: flex; justify-content: space-between; align-items: center; }
.c-status { font-size: .76rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(212,176,106,.16); color: var(--l-gold-2); }
.c-status.done { background: rgba(69,184,132,.15); color: #7fd6ad; }
.c-reply { background: rgba(255,255,255,.04); border-radius: 10px; padding: 10px 12px; font-size: .92rem; }

/* Door verification */
.v-card { width: 100%; max-width: 380px; text-align: center; background: var(--l-card); border: 1px solid rgba(212,176,106,.35); border-radius: 24px; padding: 30px 24px; display: grid; justify-items: center; gap: 8px; }
.v-crest { width: 84px; }
.v-photo { position: relative; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--l-gold-soft); color: var(--l-gold-2); font-size: 2.6rem; font-weight: 800; border: 2px solid rgba(212,176,106,.5); margin: 6px 0; }
.v-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-card h1 { font-size: 1.5rem; }
.v-no { font-family: "Didot", "Bodoni 72", Georgia, serif; color: var(--l-gold-2); letter-spacing: .12em; font-size: .85rem; }
.v-status { margin-top: 10px; width: 100%; padding: 14px; border-radius: 14px; font-weight: 800; font-size: 1.15rem; }
.is-valid .v-status { background: rgba(69,184,132,.16); color: #7fd6ad; border: 1px solid rgba(69,184,132,.45); }
.is-invalid .v-status { background: rgba(224,106,111,.12); color: #f09da0; border: 1px solid rgba(224,106,111,.45); }
.v-time { font-size: .8rem; }

@media (max-width: 1100px) {
  .c-tiles { grid-template-columns: repeat(2, 1fr); }
  .g-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .c-home-grid { grid-template-columns: 1fr; }
  .g-hotel { grid-template-columns: 1fr; }
  .g-hotel-img { min-height: 200px; max-height: 260px; }
  .g-hero { min-height: 250px; border-radius: 16px; }
  .g-hero-body { padding: 20px; }
  .g-form-grid { grid-template-columns: 1fr; }
  .c-next { padding: 20px; }
  .c-head-row { flex-direction: column; align-items: flex-start; }
  .l-tabs.has-5 a { font-size: .64rem; }
  .mcard-face { padding: 16px 18px; border-radius: 14px; }
}

/* ---------- Live sessions on the site ---------- */
.l-tag { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; color: var(--l-gold); background: var(--l-gold-soft); border-radius: 999px; padding: 2px 9px; margin-inline-start: 6px; vertical-align: middle; }
.l-meeting-body > .l-tag { margin: 0 0 6px; }
.l-btn-live { gap: 8px; }
.l-rec { width: 8px; height: 8px; border-radius: 50%; background: #c8363d; box-shadow: 0 0 0 3px rgba(200,54,61,.25); flex: none; }
.l-parts { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.l-parts a { color: var(--l-dim); text-decoration: none; border: 1px solid var(--l-line); border-radius: 999px; padding: 6px 14px; font-size: .86rem; }
.l-parts a small { color: var(--l-faint); margin-inline-start: 4px; }
.l-parts a.is-active { color: #17120a; background: var(--l-gold); border-color: transparent; }
.l-parts a.is-active small { color: rgba(23,18,10,.7); }
.l-test-bar { background: rgba(201,164,92,.1); color: var(--l-gold); border: 1px solid rgba(201,164,92,.25); border-radius: 12px; padding: 8px 14px; font-size: .84rem; margin: 0 0 16px; }
.l-tag-private { color: #0b0a09; background: var(--l-gold); }
.l-meeting-body > .l-tag + .l-tag { margin-inline-start: 6px; }

/* ---------- ID check (after paying) ---------- */
.l-id h1 { margin: 0; }
.l-id-badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
  color: var(--l-gold-2); background: rgba(201, 164, 92, .12); border: 1px solid rgba(201, 164, 92, .35);
}
.l-id-badge.is-pending { color: #f0c36b; background: rgba(240, 195, 107, .1); border-color: rgba(240, 195, 107, .35); }
.l-id-badge.is-rejected { color: #f09da0; background: rgba(224, 106, 111, .12); border-color: rgba(224, 106, 111, .45); }
.l-id-note {
  margin: 0; padding: 12px 16px; border-radius: 10px; width: 100%; box-sizing: border-box;
  background: rgba(224, 106, 111, .08); border: 1px solid rgba(224, 106, 111, .3); color: #f3c3c5;
}
.l-id-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: start; width: 100%; max-width: 360px; }
.l-id-tips li { position: relative; padding-inline-start: 26px; color: var(--l-dim); font-size: 0.92rem; }
.l-id-tips li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--l-green); font-weight: 700; }
.l-id-pick { cursor: pointer; width: 100%; max-width: 360px; justify-content: center; box-sizing: border-box; }
.l-id-change { cursor: pointer; }
.l-id-private { font-size: 0.82rem; max-width: 380px; margin: 0; }

/* ---------- "Add to home screen" guide (one-time pop-up + account page) ---------- */
body.hs-open { overflow: hidden; }
.hs-modal {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.hs-modal[hidden] { display: none; }
.hs-dialog {
  position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--l-card); border: 1px solid var(--l-line-2); border-radius: 22px; padding: 26px 22px 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55); animation: hs-up .32s ease-out;
}
@keyframes hs-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) { .hs-modal { align-items: center; } }
.hs-dialog h2 { font-family: var(--l-display); font-size: 1.45rem; margin: 0 0 4px; }
.hs-lead { color: var(--l-dim); margin: 0 0 16px; }
.hs-x {
  position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--l-line-2); background: transparent; color: var(--l-dim); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.hs-done { width: 100%; justify-content: center; margin-top: 16px; }
.hs-later { color: var(--l-faint); font-size: .82rem; text-align: center; margin: 10px 0 0; }

.hs-guide { display: grid; gap: 14px; }
.hs-app { display: flex; align-items: center; gap: 12px; }
.hs-app img { border-radius: 13px; border: 1px solid var(--l-line-2); flex: none; }
.hs-app b { display: block; }
.hs-app small { color: var(--l-dim); font-size: .85rem; }
.hs-install { width: 100%; justify-content: center; }
.hs-install[hidden], .hs-inapp[hidden], .hs-steps[hidden] { display: none; }
.hs-inapp {
  background: rgba(224, 106, 111, .1); border: 1px solid rgba(224, 106, 111, .35); color: #f3b5b7;
  border-radius: 12px; padding: 11px 13px; font-size: .9rem; display: grid; gap: 3px;
}
.hs-tabs { display: flex; gap: 6px; background: rgba(255, 255, 255, .04); border: 1px solid var(--l-line); border-radius: 12px; padding: 4px; }
.hs-tabs button {
  flex: 1; border: 0; border-radius: 9px; padding: 8px; background: transparent; color: var(--l-dim);
  font: inherit; font-weight: 700; cursor: pointer;
}
.hs-tabs button[aria-selected="true"] { background: var(--l-gold-soft); color: var(--l-gold-2); }
.hs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: hs; }
.hs-steps li {
  display: flex; gap: 12px; align-items: flex-start; background: var(--l-card-2); border: 1px solid var(--l-line);
  border-radius: 14px; padding: 12px; counter-increment: hs;
}
.hs-ic {
  position: relative; flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); color: var(--l-gold-2);
}
.hs-ic::after {
  content: counter(hs); position: absolute; top: -6px; right: -6px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--l-gold); color: #17120a; font-size: .7rem; font-weight: 800; display: grid; place-items: center;
}
.hs-ic svg { width: 22px; height: 22px; }
.hs-ic-ok { color: var(--l-green); }
.hs-steps b { display: block; font-size: .98rem; }
.hs-steps small { display: block; color: var(--l-dim); font-size: .84rem; line-height: 1.5; }
.hs-note { color: var(--l-faint); font-size: .84rem; margin: 0; }

/* ---------- Homework ---------- */
.l-hw { margin-top: 18px; }
.l-hw-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.l-hw h2 { font-size: 1.15rem; margin-bottom: 8px; }
.l-hw-body { color: var(--l-dim); margin-bottom: 12px; }
.l-hw-body a, .l-hw-mine a { color: var(--l-gold-2); }
.l-hw-badge { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; background: var(--l-gold-soft); color: var(--l-gold-2); }
.l-hw-badge.is-wait { background: rgba(255,255,255,.07); color: var(--l-dim); }
.l-hw-badge.is-ok { background: rgba(69,184,132,.14); color: #7fd6ad; }
.l-hw-badge.is-bad { background: rgba(224,106,111,.14); color: #f3a7aa; }
.l-hw.is-todo, .l-hw.is-bad { border-color: rgba(201,164,92,.35); }
.l-hw-msg { font-size: .9rem; color: var(--l-dim); margin: 6px 0 12px; }
.l-hw-msg.is-ok { color: #7fd6ad; }
.l-hw-msg.is-bad { color: #f3a7aa; }
.l-hw-form { display: grid; gap: 12px; }
.l-hw-form textarea { width: 100%; min-height: 130px; resize: vertical; background: var(--l-card-2); color: var(--l-text); border: 1px solid var(--l-line-2); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: .95rem; line-height: 1.6; }
.l-hw-form textarea:focus { outline: none; border-color: var(--l-gold); }
.l-hw-form .l-btn { justify-self: start; }
.l-hw-mine summary { cursor: pointer; color: var(--l-faint); font-size: .85rem; }
.l-hw-mine p { margin-top: 8px; color: var(--l-dim); }
.l-hw-list { display: grid; gap: 16px; }
.l-hw-list .l-hw { margin-top: 0; }
.l-hw-row { display: flex; justify-content: space-between; gap: 10px; margin: 2px 0 6px; margin-inline-start: 60px; padding: 8px 14px; border-radius: 10px; font-size: .84rem; text-decoration: none; background: rgba(255,255,255,.03); color: var(--l-dim); }
.l-hw-row b { font-weight: 700; white-space: nowrap; }
.l-hw-row.is-todo b, .l-hw-row.is-bad b { color: var(--l-gold-2); }
.l-hw-row.is-ok b { color: #7fd6ad; }
.l-lesson.is-locked, .l-side-list a.is-locked { opacity: .55; }
.l-tag-lock { background: rgba(255,255,255,.06); color: var(--l-faint); }
.l-locked { text-align: center; display: grid; justify-items: center; gap: 10px; padding: 40px 24px; }
.l-locked h1 { font-size: 1.4rem; }
.l-locked .l-hw-msg { margin: 0; }
.l-locked-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--l-gold-soft); color: var(--l-gold-2); }
.l-locked-ic svg { width: 28px; height: 28px; }
.l-hw-alert { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 18px; border-radius: var(--l-radius); text-decoration: none; background: linear-gradient(135deg, rgba(201,164,92,.18), rgba(201,164,92,.05)); border: 1px solid rgba(201,164,92,.35); }
.l-hw-alert.is-wait { background: var(--l-card); border-color: var(--l-line-2); }
.l-hw-alert div { flex: 1; display: grid; gap: 2px; }
.l-hw-alert small { color: var(--l-dim); font-size: .86rem; }
.l-hw-alert-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--l-gold-soft); color: var(--l-gold-2); }
.l-hw-alert-ic svg { width: 22px; height: 22px; }
.l-hw-alert-go { color: var(--l-gold-2); font-weight: 700; font-size: .88rem; white-space: nowrap; }
.l-btn-lock { font-size: .86rem; }
.l-nav a, .l-tabs a { position: relative; }
.l-nav-count { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--l-red); color: #fff; font-size: .7rem; font-weight: 800; display: inline-grid; place-items: center; line-height: 1; margin-inline-start: auto; }
.l-tabs .l-nav-count { position: absolute; top: 2px; inset-inline-end: calc(50% - 22px); margin: 0; }
.l-tabs.has-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 600px) {
  .l-tabs.has-6 a { font-size: .58rem; }
  .l-hw-row { margin-inline-start: 0; }
  .l-hw-alert { flex-wrap: wrap; }
}

/* ---------- Investment ---------- */
.l-inv-body, .l-inv-risk, .l-inv-status, .l-inv-apply, .l-inv-hold { margin-bottom: 16px; }
.l-inv-body { line-height: 1.8; color: var(--l-text); }
.l-inv-body a { color: var(--l-gold-2); }
.l-inv-risk { background: rgba(224,106,111,.06); border-color: rgba(224,106,111,.25); }
.l-inv-risk b { display: block; color: #f3a7aa; margin-bottom: 4px; }
.l-inv-risk p { color: var(--l-dim); font-size: .92rem; }
.l-inv-status { display: grid; gap: 8px; justify-items: start; }
.l-inv-status p { color: var(--l-dim); }
.l-inv-apply h2 { margin-bottom: 14px; }
.l-inv-form { display: grid; gap: 8px; max-width: 520px; }
.l-inv-form > label { font-size: .88rem; color: var(--l-dim); font-weight: 700; margin-top: 8px; }
.l-inv-form input[type=number], .l-inv-form input[type=tel] { background: var(--l-card-2); color: var(--l-text); border: 1px solid var(--l-line-2); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 1rem; }
.l-inv-form input:focus { outline: none; border-color: var(--l-gold); }
.l-inv-form small { font-size: .8rem; }
.l-inv-pick { justify-self: start; cursor: pointer; }
.l-inv-pick.is-done { border-color: rgba(69,184,132,.5); color: #7fd6ad; }
.l-inv-form .l-inv-ack { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--l-text); margin-top: 14px; }
.l-inv-ack input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--l-gold); flex: none; }
.l-inv-form .l-btn-gold { justify-self: start; margin-top: 8px; }
.l-inv-form .l-btn-gold:disabled { opacity: .45; cursor: not-allowed; }
.l-inv-stats { display: flex; gap: 28px; margin: 6px 0 12px; }
.l-inv-stats div { display: grid; }
.l-inv-stats b { font-size: 1.6rem; color: var(--l-gold-2); font-family: var(--l-display); }
.l-inv-stats span { color: var(--l-faint); font-size: .82rem; }
.l-inv-list { list-style: none; margin: 0; padding: 0; }
.l-inv-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--l-line); font-size: .9rem; color: var(--l-dim); }
.l-inv-list b { color: var(--l-text); }
.l-inv-banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 18px; border-radius: var(--l-radius); text-decoration: none; background: linear-gradient(135deg, rgba(69,184,132,.14), rgba(201,164,92,.08)); border: 1px solid rgba(69,184,132,.3); }
.l-inv-banner div { flex: 1; display: grid; gap: 2px; }
.l-inv-banner small { color: var(--l-dim); font-size: .86rem; }
.l-inv-banner .l-btn { white-space: nowrap; }
@media (max-width: 600px) { .l-inv-banner { flex-wrap: wrap; } }
@media (max-width: 600px) {
  .l-hw-alert, .l-inv-banner { flex-wrap: wrap; padding: 14px 16px; }
  .l-hw-alert div, .l-inv-banner div { flex: 1 1 0; min-width: 0; }
  .l-hw-alert-go, .l-inv-banner .l-btn { flex-basis: 100%; text-align: center; justify-content: center; }
}

/* ---------- Phone notifications ---------- */
.l-push { display: flex; gap: 14px; align-items: flex-start; }
.l-push[hidden] { display: none; }
.l-push.is-banner { padding: 16px 20px; margin-bottom: 18px; border-radius: var(--l-radius); background: var(--l-card); border: 1px solid var(--l-line-2); }
.l-push-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--l-gold-soft); color: var(--l-gold-2); }
.l-push-ic svg { width: 22px; height: 22px; }
.l-push-body { flex: 1; min-width: 0; }
.l-push-body > div { display: grid; gap: 4px; }
.l-push-body > div[hidden] { display: none; }
.l-push-body small { color: var(--l-dim); font-size: .88rem; line-height: 1.6; }
.l-push-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.l-push-actions .l-link { background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; color: var(--l-faint); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Private messages ---------- */
.l-msg-list { display: grid; gap: 14px; }
.l-msg.is-new { border-color: rgba(201,164,92,.45); }
.l-msg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: .84rem; }
.l-msg p { line-height: 1.8; }
.l-msg p a { color: var(--l-gold-2); }
.l-msg-reply { margin-top: 18px; }
.l-msg-alert { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 18px; border-radius: var(--l-radius); text-decoration: none; background: linear-gradient(135deg, rgba(91,141,239,.16), rgba(91,141,239,.04)); border: 1px solid rgba(91,141,239,.35); }
.l-msg-alert div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.l-msg-alert small { color: var(--l-dim); font-size: .88rem; }
@media (max-width: 600px) {
  .l-msg-alert { flex-wrap: wrap; padding: 14px 16px; }
  .l-msg-alert .l-hw-alert-go { flex-basis: 100%; text-align: center; }
}

/* ---------- New-student questions (after the ID check) ---------- */
.l-q { max-width: 640px; margin: 0 auto; display: grid; gap: 10px; }
.l-q h1 { font-size: 1.6rem; }
.l-q .l-id-badge { justify-self: start; }
.l-q-form { display: grid; gap: 14px; margin-top: 12px; }
.l-q-item { background: var(--l-card-2); border: 1px solid var(--l-line); border-radius: 14px; padding: 14px 16px; }
.l-q-title { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; margin-bottom: 12px; line-height: 1.6; }
.l-q-title span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; background: var(--l-gold-soft); color: var(--l-gold-2); margin-top: 2px; }
.l-q-options { display: flex; flex-wrap: wrap; gap: 10px; }
.l-q-options label { cursor: pointer; }
.l-q-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.l-q-options span { display: inline-block; min-width: 96px; text-align: center; padding: 10px 20px; border-radius: 12px; border: 1px solid var(--l-line-2); color: var(--l-dim); font-weight: 700; transition: background .15s, border-color .15s, color .15s; }
.l-q-options input:checked + span { background: var(--l-gold); border-color: var(--l-gold); color: #17120a; }
.l-q-options input:focus-visible + span { outline: 2px solid var(--l-gold-2); outline-offset: 2px; }
.l-q-item input[type=text] { width: 100%; background: var(--l-bg); color: var(--l-text); border: 1px solid var(--l-line-2); border-radius: 10px; padding: 11px 13px; font: inherit; }
.l-q-item input[type=text]:focus { outline: none; border-color: var(--l-gold); }
.l-q-form .l-btn-gold { justify-self: start; margin-top: 4px; }
.l-q-private { font-size: .82rem; }

/* Sign-in: remember me, forgot password */
.auth-form .auth-remember { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; font-size: .92rem; color: var(--l-dim); cursor: pointer; }
.auth-remember input { width: 18px; height: 18px; accent-color: var(--l-gold); flex: none; }
.auth-forgot { margin: 14px 0 0; text-align: center; }
.auth-forgot a { color: var(--l-gold-2); font-size: .92rem; }
.auth-remember input { padding: 0; margin: 0; box-shadow: none; }
.l-tabs.has-7 { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 820px) { .l-tabs.has-7 a { font-size: .54rem; } .l-tabs.has-7 a svg { width: 21px; height: 21px; } }

/* Session review (after a live session) */
.l-q-item textarea { width: 100%; background: var(--l-bg); color: var(--l-text); border: 1px solid var(--l-line-2); border-radius: 10px; padding: 11px 13px; font: inherit; resize: vertical; min-height: 96px; }
.l-q-item textarea:focus { outline: none; border-color: var(--l-gold); }
.l-q-item .l-q-extra { margin-top: 10px; }
.l-stars span { display: grid; gap: 2px; min-width: 92px; padding: 8px 12px; }
.l-stars span b { color: var(--l-gold-2); letter-spacing: .05em; font-size: .9rem; }
.l-stars input:checked + span b { color: #17120a; }

/* Cancelling: a request the admin reviews */
.l-cancel-link { display: inline-block; margin-top: 10px; color: var(--l-faint); font-size: .86rem; font-weight: 600; }
.l-cancel-pending { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(224,106,111,.08); border: 1px solid rgba(224,106,111,.3); display: grid; gap: 10px; }
.l-cancel-pending form { margin: 0; }
.l-q-col { flex-direction: column; }
.l-q-col span { text-align: start; min-width: 0; width: 100%; }

/* «اربح 20%»: the student's referral link */
.l-earn-link { display: grid; gap: 12px; margin-bottom: 16px; }
.l-earn-copy { display: flex; gap: 10px; flex-wrap: wrap; }
.l-earn-copy input { flex: 1 1 240px; min-width: 0; background: var(--l-bg); border: 1px solid var(--l-line-2); color: var(--l-text); border-radius: 10px; padding: 12px 14px; font-size: .95rem; font-family: var(--l-font); }
.l-earn-wa { justify-self: start; }
.l-earn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.l-earn-stats div { background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--l-radius); padding: 16px; display: grid; gap: 2px; }
.l-earn-stats b { font-family: var(--l-display); font-size: 1.5rem; color: var(--l-gold-2); }
.l-earn-stats span { color: var(--l-faint); font-size: .82rem; }
.l-earn-h { font-size: 1.15rem; margin: 0 0 10px; }
.l-earn-list { list-style: none; margin: 0; padding: 0; }
.l-earn-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--l-line); }
.l-earn-list li span { display: grid; }
.l-earn-list small { color: var(--l-faint); font-size: .78rem; }
.l-earn-st { font-style: normal; font-size: .82rem; padding: 4px 10px; border-radius: 999px; background: var(--l-card-2); color: var(--l-dim); white-space: nowrap; }
.l-earn-st.is-due { background: var(--l-gold-soft); color: var(--l-gold-2); }
.l-earn-st.is-done { background: rgba(69,184,132,.14); color: #7fd6ad; }
.l-earn-how { margin-top: 16px; }
.l-earn-how ol { margin: 0; padding-inline-start: 20px; color: var(--l-dim); line-height: 1.9; }
@media (max-width: 640px) { .l-earn-stats { grid-template-columns: repeat(2, 1fr); } }

.l-earn-banner { background: linear-gradient(135deg, rgba(201,164,92,.16), rgba(201,164,92,.05)); border-color: rgba(201,164,92,.35); }

.c-renew { display: block; text-decoration: none; }

/* «ادفع الشهر القادم الآن» */
.l-prepay { margin-top: 12px; }
.l-prepay summary { list-style: none; cursor: pointer; display: inline-flex; }
.l-prepay summary::-webkit-details-marker { display: none; }
.l-prepay form, .l-prepay-body { margin-top: 12px; display: grid; gap: 10px; justify-items: start; }
.l-prepay p { margin: 0; color: var(--l-dim); line-height: 1.8; }

.l-paynow { display: grid; gap: 12px; justify-items: start; }
.l-paynow p { margin: 0; line-height: 1.8; }

/* CBI Club: signing the confidentiality agreement (first visit) */
.c-nda-step { margin-top: 30px; }
.c-nda-box { max-height: 380px; overflow-y: auto; text-align: start; background: rgba(0,0,0,.35); border: 1px solid rgba(201,164,92,.25); border-radius: 14px; padding: 18px 20px; margin: 12px 0 18px; }
.nda { color: var(--l-dim); font-size: .92rem; line-height: 1.85; }
.nda-title { font-family: var(--l-display); color: var(--l-text); font-size: 1.25rem; margin: 0 0 10px; }
.nda h3 { color: var(--l-text); font-size: 1rem; margin: 16px 0 4px; }
.nda p, .nda ol { margin: 0 0 8px; }
.nda ol { padding-inline-start: 22px; }
.nda-parties { border-inline-start: 3px solid var(--l-gold); padding-inline-start: 12px; }
.nda-version { color: var(--l-faint); font-size: .78rem; }
.c-sign { display: grid; gap: 8px; text-align: start; }
.c-sign label { color: var(--l-text); font-size: .92rem; font-weight: 600; margin-top: 8px; }
.c-sign input[type=text], .c-sign input:not([type]), .c-sign input[name=id_number] { width: 100%; background: var(--l-bg); border: 1px solid var(--l-line-2); color: var(--l-text); border-radius: 10px; padding: 12px 14px; font-family: var(--l-font); font-size: 1rem; }
.c-pad { position: relative; }
.c-pad canvas { display: block; width: 100%; height: auto; aspect-ratio: 640 / 220; background: #0d0c0a; border: 1px dashed rgba(201,164,92,.55); border-radius: 12px; touch-action: none; cursor: crosshair; }
.c-pad-clear { margin-top: 6px; padding: 4px 0; font-size: .85rem; font-family: inherit; background: none; border: 0; cursor: pointer; }
.c-sign label.c-agree { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--l-dim); cursor: pointer; }
.c-agree input { margin-top: 5px; accent-color: var(--l-gold); flex: none; }
.c-code .c-nda-box, .c-code .c-sign { width: 100%; }