/* =========================================================
   הטרקלין — זהות חזותית נפרדת בתוך האזור האישי.
   "כניסה אחת, שתי חוויות": אותו שלד אפליקציה (סרגל/שורת עליונה),
   אבל מרגע שנכנסים ל-#/my-lounge התוכן עובר לפלטה חמה ועמוקה
   משל עצמו — זהב על רקע כהה — ולא עוד כרטיס טורקיז כמו כל מסך
   אחר. כל המשתנים מגודרים תחת .lounge-shell כדי שלא ידלפו
   לשאר המערכת; רכיבים משותפים (.card/.btn/.tag) ממשיכים לעבוד
   כרגיל, רק שמקבלים כאן לקיחת-צבע אחרת.
   ========================================================= */

.lounge-shell {
  --lg-bg: #132621;
  --lg-bg-2: #1b352d;
  --lg-ink: #f4ecdd;
  --lg-ink-dim: #a9bcb3;
  --lg-gold: #caa15e;
  --lg-gold-strong: #e3bf7f;
  --lg-gold-soft: rgba(202, 161, 94, .16);
  --lg-gold-ink: #352a12;
  --lg-gold-ink-soft: #8a6a2c;
  --lg-line: rgba(244, 236, 221, .14);
}

/* ===== הגיבוי — פאנל כהה גולש לקצוות .content ===== */
.lounge-hero {
  position: relative;
  overflow: hidden;
  margin: calc(-1 * var(--gutter)) calc(-1 * var(--page-margin)) 22px;
  padding: 34px var(--page-margin) 30px;
  background: radial-gradient(ellipse 620px 260px at 85% -20%, var(--lg-bg-2), transparent),
              linear-gradient(160deg, var(--lg-bg), #0c1815 120%);
  color: var(--lg-ink);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.lounge-hero::after {
  /* קו זהב דק בתחתית — גבול בין "עולם הטרקלין" לשאר התוכן, עדין ולא מסגרת */
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lg-gold), transparent);
  opacity: .5;
}
.lounge-hero-badge {
  flex: none; width: 52px; height: 52px; border-radius: var(--r-full);
  display: grid; place-items: center; font-size: 22px;
  background: var(--lg-gold-soft); color: var(--lg-gold-strong);
  box-shadow: inset 0 0 0 1px rgba(227, 191, 127, .35);
}
.lounge-hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--lg-gold-strong); margin-bottom: 5px;
}
.lounge-hero-title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.lounge-hero-sub { font-size: 13px; color: var(--lg-ink-dim); margin-top: 4px; max-width: 480px; line-height: 1.55; }
.lounge-hero-actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.btn-lounge-ghost {
  border: 1px solid rgba(227, 191, 127, .4); background: transparent; color: var(--lg-gold-strong);
}
.btn-lounge-ghost:hover { background: var(--lg-gold-soft); }

/* ===== כותרות מקטע — אותו .section-title, רק עם חוט זהב ===== */
.lounge-shell .section-title {
  color: var(--ink-3);
  display: flex; align-items: center; gap: 7px;
}
.lounge-shell .section-title::before {
  content: ''; width: 10px; height: 1.5px; background: var(--lg-gold); flex: none;
}

.tag-lounge { background: var(--lg-gold-soft); color: var(--lg-gold-ink-soft); }

/* =========================================================
   מסלול ההתקדמות כיזם — ציר מחובר ומונפש, לא רשימה סטטית
   ========================================================= */
.lounge-path { position: relative; padding-inline-start: 32px; }
.lounge-path::before {
  content: ''; position: absolute; inset-inline-start: 31px; top: 32px; bottom: 32px; width: 1.5px;
  background: var(--border);
  transform: scaleY(0); transform-origin: top;
  animation: lounge-line-draw .8s ease-out .1s both;
}
.lounge-node {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 0;
  opacity: 0; transform: translateY(8px);
  animation: lounge-node-in .5s ease-out both;
  animation-delay: calc(var(--i, 0) * 90ms + .15s);
}
.lounge-node-ring { position: relative; width: 64px; height: 64px; flex: none; z-index: 1; }
.lounge-node-ring svg { transform: rotate(-90deg); }
.lounge-node-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink); }
.lounge-node-body { flex: 1; }

/* "כאן את/ה עומד/ת" — הנקודה הפעילה היחידה בציר מודגשת בזהב */
.lounge-node--current .lounge-node-ring {
  border-radius: var(--r-full);
  animation: lounge-pulse 2.6s ease-in-out infinite;
}
.lounge-node--current .lounge-node-pct { color: var(--t-800); }
.lounge-node--current .lounge-node-body .lounge-here {
  display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--lg-gold-ink-soft); background: var(--lg-gold-soft); border-radius: var(--r-sm); padding: 1px 7px;
}

@keyframes lounge-line-draw { to { transform: scaleY(1); } }
@keyframes lounge-node-in { to { opacity: 1; transform: none; } }
@keyframes lounge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(202, 161, 94, .35); }
  50% { box-shadow: 0 0 0 7px rgba(202, 161, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lounge-path::before, .lounge-node, .lounge-node--current .lounge-node-ring {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

@media (max-width: 860px) {
  .lounge-hero { align-items: flex-start; }
  .lounge-hero-actions { margin-inline-start: 0; width: 100%; }
}