/* =========================================================================
   WiFi Money Club — App Stylesheet
   Premium dark UI, blue accent. Style reference: ProTrader (myprotrader.app),
   recolored to WiFi-Money blue (#9250ec).
   ========================================================================= */

/* ---------- Design Tokens ---------------------------------------------- */
:root {
  /* Surfaces */
  --canvas:        #0A0A0C;   /* app background           */
  --sidebar-bg:    #0D0D10;   /* sidebar background       */
  --card:          #1A1A20;   /* cards / panels (lifted off the dark canvas) */
  --card-hover:    #202027;   /* card / row hover         */
  --elevated:      #17171d;   /* dropdowns, popovers      */

  /* Borders */
  --border:        rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.10);

  /* Brand / accent */
  --accent:        #9250ec;
  --accent-hover:  #a66bf0;
  --accent-glow:   rgba(146, 80, 236, 0.15);
  --accent-soft:   rgba(146, 80, 236, 0.12);
  --accent-line:   rgba(146, 80, 236, 0.35);

  /* Text */
  --text:          #FFFFFF;
  --text-muted:    rgba(255, 255, 255, 0.55);
  --text-faint:    rgba(255, 255, 255, 0.35);

  /* Status (use sparingly) */
  --green:         #22C55E;
  --green-soft:    rgba(34, 197, 94, 0.12);
  --red:           #FF3B30;
  --red-soft:      rgba(255, 59, 48, 0.12);

  /* Radii */
  --r-card:        16px;
  --r-item:        10px;
  --r-pill:        999px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* Layout */
  --sidebar-w:     264px;
  --sidebar-w-collapsed: 76px;
  --header-h:      68px;

  /* Shadows */
  --shadow-soft:   0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-card:   0 1px 0 rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.25);
  --shadow-pop:    0 12px 40px rgba(0, 0, 0, 0.55);
}

/* ---------- Reset / base ----------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* body wächst mit dem Inhalt (min-height statt fixem height:100%) — wichtig,
   damit das Dokument sauber am Viewport scrollt und position:sticky greift. */
html { height: 100%; }
body { min-height: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  background: var(--canvas);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); background-clip: padding-box; }

/* =========================================================================
   APP SHELL
   ========================================================================= */
.app {
  display: flex;
  min-height: 100vh;
}

.main {
  flex: 1;
  min-width: 0;            /* allow children to shrink */
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  transition: margin-left .22s ease;
}

.app.collapsed .main { margin-left: var(--sidebar-w-collapsed); }

/* =========================================================================
   SIDEBAR
   ========================================================================= */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transition: width .22s ease, transform .22s ease;
}

.app.collapsed .sidebar { width: var(--sidebar-w-collapsed); }

/* Brand / logo block */
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  height: var(--header-h);
  flex-shrink: 0;
}

.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), #4a1fb0);
  box-shadow: 0 6px 18px var(--accent-glow);
  color: #fff;
}

.brand__mark svg { width: 18px; height: 18px; }

.brand__text {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
  overflow: hidden;
}

.brand__name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .2px;
}

.pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  line-height: 1.4;
}

.pill--beta {
  color: var(--accent);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
}

.pill--soon {
  color: var(--text-faint);
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
}

/* Navigation scroll area */
.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-2) var(--s-3) var(--s-4);
}

.nav-group { margin-top: var(--s-5); }
.nav-group:first-child { margin-top: var(--s-2); }

.nav-group__caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 var(--s-3);
  margin-bottom: var(--s-2);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.nav-group__caption .lock { width: 12px; height: 12px; opacity: .7; }

/* Nav item */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3);
  border-radius: var(--r-item);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
  margin-bottom: 2px;
}

.nav-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.nav-item__icon svg { width: 18px; height: 18px; stroke-width: 1.7; }

.nav-item__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item:hover {
  background: var(--card-hover);
  color: var(--text);
}

/* active state — left bar + soft blue bg + blue text/icon */
.nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.nav-item.is-active .nav-item__icon { color: var(--accent); }

/* coming-soon / locked items */
.nav-item.is-soon { color: var(--text-faint); }
.nav-item.is-soon:hover { color: var(--text-muted); }
.nav-item.is-locked { color: var(--text-faint); opacity: .85; }
.nav-item.is-locked .nav-item__icon { opacity: .7; }

.nav-item__soon {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

/* Sidebar footer / collapse button */
.sidebar__footer {
  flex-shrink: 0;
  padding: var(--s-3);
  border-top: 1px solid var(--border);
}

.collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3);
  border-radius: var(--r-item);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.collapse-btn:hover { background: var(--card-hover); color: var(--text); }
.collapse-btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .22s ease; }
.app.collapsed .collapse-btn svg { transform: rotate(180deg); }

/* Collapsed mode: hide text labels, center icons */
.app.collapsed .brand__text,
.app.collapsed .nav-group__caption,
.app.collapsed .nav-item__label,
.app.collapsed .nav-item__soon,
.app.collapsed .collapse-btn span {
  display: none;
}
.app.collapsed .sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; }
.app.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.app.collapsed .collapse-btn { justify-content: center; }
.app.collapsed .nav-group__caption {
  /* keep a slim divider feel where captions were */
  height: 1px; padding: 0; margin: var(--s-4) var(--s-3) var(--s-3);
  background: var(--border);
}

/* =========================================================================
   HEADER
   ========================================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-6);
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.header__hamburger {
  display: none;            /* shown on mobile */
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-item);
  color: var(--text);
  width: 38px;
  height: 38px;
  place-items: center;
}
.header__hamburger svg { width: 20px; height: 20px; }

.header__spacer { flex: 1; }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* badges in header */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  white-space: nowrap;
}
.badge svg { width: 14px; height: 14px; }

.badge--streak { color: #ffb020; }
.badge--streak svg { color: #ffb020; }

.badge--active {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.badge--active .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* icon button (theme toggle) */
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-item);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--card-hover); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }

/* account / avatar dropdown */
.account { position: relative; }
.account__btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  border: none;
  padding: 3px;
  border-radius: var(--r-pill);
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #4a1fb0);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.account__chev { width: 16px; height: 16px; color: var(--text-muted); transition: transform .18s ease; }
.account.is-open .account__chev { transform: rotate(180deg); }

.account__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: var(--elevated);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  padding: var(--s-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.account.is-open .account__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.account__head {
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-2);
}
.account__name { font-weight: 600; font-size: 13px; }
.account__mail { font-size: 12px; color: var(--text-muted); }
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3);
  border-radius: var(--r-item);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.menu-item:hover { background: var(--card-hover); color: var(--text); }
.menu-item svg { width: 16px; height: 16px; }
.menu-item--danger:hover { color: var(--red); }

/* =========================================================================
   CONTENT
   ========================================================================= */
.content {
  flex: 1;
  padding: var(--s-8);
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* page header */
/* Compact page head: eyebrow removed globally, less vertical space. */
.page-head { margin-bottom: var(--s-6); }
/* Kategorie-/Eyebrow-Zeile auf allen Seiten ausgeblendet. */
.page-head__eyebrow { display: none; }
.page-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.4px;
  margin: 0 0 var(--s-2);
}
/* Seitentitel durchgehend weiß — überschreibt evtl. inline gesetzte Akzentwörter. */
.page-title span { color: #FFFFFF !important; }
.page-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
  max-width: 70ch;
}

/* generic section heading */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin: var(--s-8) 0 var(--s-4);
}
.section-title { font-size: 17px; font-weight: 650; margin: 0; }
.section-link { font-size: 13px; color: var(--accent); font-weight: 500; }
.section-link:hover { color: var(--accent-hover); }

/* =========================================================================
   CARDS / GRID
   ========================================================================= */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  /* Flat, even dark blue-black tone (ProTrader feel, blue not violet). No gradient. */
  background: #0e0f19;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-card);
  padding: var(--s-6);
  /* inner highlight + soft drop for depth */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 8px 24px rgba(0,0,0,0.25);
  /* Border WIDTH stays constant 1px — only colour animates, so no layout shift. */
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s ease;
}
.card--hover:hover {
  /* 1px border kept; only the colour shifts to blue (no 2px / no ring). */
  border-color: rgba(146,80,236,0.4);
  transform: translateY(-2px);
  /* dezent flat aufhellen + blauer Außen-Glow (kein Gradient) */
  background: #141826;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 8px 28px rgba(146,80,236,0.12);
}

/* .card--glow kept as an alias of .card — flat, no blue shimmer corner. */
.card--glow {
  position: relative;
  overflow: hidden;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.card__title { font-size: 14px; font-weight: 600; margin: 0; }
.card__icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.card__icon svg { width: 20px; height: 20px; }

/* stat card */
.stat__label { font-size: 13px; color: var(--text-muted); margin-bottom: 0px; }
.stat__value { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.stat__delta { font-size: 12.5px; font-weight: 600; margin-top: var(--s-2); display: inline-flex; align-items: center; gap: 4px; }
.stat__delta.is-up { color: var(--green); }
.stat__delta.is-down { color: var(--red); }

/* =========================================================================
   COURSE CARD (Academy overview) — built on the shared .card class.
   Image-topped card: thumbnail · pill · meta · title · desc · progress · CTA.
   ========================================================================= */
.course-card {
  /* Uniform inner padding so a card border is visible all around the image. */
  padding: var(--s-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Active cards are real links — whole card clickable. */
a.course-card { cursor: pointer; color: inherit; text-decoration: none; }

/* 16:9 media area — floats INSIDE the card as a rounded block. */
.course-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}
.course-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.course-card.card--hover:hover .course-card__img { transform: scale(1.04); }
/* soft fade from image into the card body */
.course-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(21,21,26,0.85) 100%);
  pointer-events: none;
}

/* pill on top of the image */
.course-card__pill {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  color: #fff;
  background: rgba(10, 10, 12, 0.6);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.course-card__pill--soon {
  color: var(--accent);
  background: rgba(146, 80, 236, 0.18);
  border-color: var(--accent-line);
}

/* body */
.course-card__body {
  padding: var(--s-4) var(--s-2) var(--s-2);  /* gap under the floating image */
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* meta row: lessons · duration */
.course-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.course-card__meta-item { display: inline-flex; align-items: center; gap: 5px; }
.course-card__meta-item svg { width: 14px; height: 14px; stroke-width: 1.8; }
.course-card__meta-sep { color: var(--text-faint); }

.course-card__title {
  font-size: 17px;
  font-weight: 650;
  margin: 0 0 var(--s-2);
  letter-spacing: -.2px;
}
.course-card__desc {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 var(--s-5);
  line-height: 1.55;
}

/* progress */
.course-card__progress { margin-top: auto; }            /* push to bottom area */
.progress {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width .4s ease;
}
.course-card__progress-label {
  font-size: 12px;
  color: var(--text-muted);
  margin: var(--s-2) 0 0;
}

/* Coming-soon state — clearly locked, same visual family */
.course-card.is-soon { opacity: .9; }
.course-card.is-soon .course-card__img { filter: grayscale(.4) brightness(.45); }
.course-card.is-soon .course-card__media::after {
  background: linear-gradient(180deg, rgba(10,10,12,0.35) 0%, rgba(21,21,26,0.9) 100%);
}
.course-card.is-soon .course-card__title,
.course-card.is-soon .course-card__desc { color: var(--text-muted); }

/* disabled CTA */
.btn--disabled {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text-faint);
  cursor: not-allowed;
  box-shadow: none;
}
.btn--disabled:active { transform: none; }
.btn--disabled svg { width: 16px; height: 16px; }

/* =========================================================================
   COURSE DETAIL (Ebene 2) — hero + modules + lesson rows.
   Template for every course page; built on the shared .card class.
   ========================================================================= */

/* dezenter Zurück-Link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--s-5);
  transition: color .15s ease, gap .15s ease;
}
.back-link:hover { color: var(--accent); gap: 9px; }
.back-link svg { width: 16px; height: 16px; }

/* ---- Hero card ---- */
.course-hero { padding: var(--s-8); }
.course-hero__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.4px;
  margin: 0 0 var(--s-3);
}
.course-hero__desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 var(--s-5);
  max-width: 68ch;
}

/* meta row (icon + value, dot-separated) */
.course-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: var(--s-5);
}
.meta-item { display: inline-flex; align-items: center; gap: 7px; }
.meta-item svg { width: 16px; height: 16px; stroke-width: 1.8; color: var(--accent); }
.meta-item strong { color: var(--text); font-weight: 600; }

/* progress (reuses .progress / .progress__bar from course cards) */
.course-hero__progress { max-width: 520px; margin-bottom: var(--s-6); }

/* ---- Modules ---- */
.module { margin-top: var(--s-8); }
.module:first-of-type { margin-top: var(--s-6); }

.module__caption {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-4);
  padding-left: var(--s-1);
}
.module__caption .module__sep { color: var(--text-faint); font-weight: 600; }
.module__caption .module__name { color: var(--text); letter-spacing: .3px; }

/* lesson list */
.lesson-list { display: flex; flex-direction: column; gap: var(--s-3); }

/* lesson row — clickable card */
.lesson {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
}
.lesson__index {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lesson:hover .lesson__index {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.lesson__body { flex: 1; min-width: 0; }
.lesson__title { font-size: 14.5px; font-weight: 600; margin: 0 0 2px; }
.lesson__desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.lesson__meta svg { width: 14px; height: 14px; stroke-width: 1.8; }

/* status icon (empty circle = nicht abgeschlossen) */
.lesson__status {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-faint);
  display: grid;
  place-items: center;
}
.lesson__status svg { width: 20px; height: 20px; }

/* Mobile: let duration drop below the title, keep rows tidy */
@media (max-width: 640px) {
  .lesson { flex-wrap: wrap; }
  .lesson__body { flex-basis: calc(100% - 34px - var(--s-4)); }
  .lesson__desc { white-space: normal; }
  .lesson__meta { margin-left: calc(34px + var(--s-4)); }   /* align under title */
  .lesson__status { margin-left: auto; }
}

/* =========================================================================
   LESSON PAGE (Ebene 3) — video + prose + quiz, with a sticky outline.
   Template for every lesson; built on the shared .card class.
   ========================================================================= */

/* two-column: content + outline; collapses to one column on narrow screens */
.lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s-6);
  align-items: start;
}

/* ---- main column ---- */
.lesson-main { min-width: 0; }

.lesson-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.lesson-eyebrow .module__sep { color: var(--text-faint); }
.lesson-eyebrow .lesson-eyebrow__name { color: var(--text-muted); }

.lesson-headline {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.4px;
  margin: 0 0 var(--s-3);
}
.lesson-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--s-6);
}
.lesson-submeta .meta-item svg { color: var(--accent); }

/* ---- video player (placeholder) ---- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(146,80,236,0.10), transparent 60%),
    #0c0e16;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin-bottom: var(--s-6);
}
.video::after {                      /* subtle bottom vignette */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.video__play {
  position: relative;
  z-index: 1;
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 10px 30px var(--accent-glow), 0 0 0 10px rgba(146,80,236,0.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.video:hover .video__play { transform: scale(1.06); box-shadow: 0 10px 36px var(--accent-glow), 0 0 0 14px rgba(146,80,236,0.14); }
.video__play svg { width: 28px; height: 28px; margin-left: 3px; }
.video__label {
  position: absolute;
  z-index: 1;
  bottom: var(--s-4);
  left: var(--s-5);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ---- prose / text blocks ---- */
.prose { color: rgba(255,255,255,0.78); font-size: 15px; line-height: 1.7; }
.prose h2 {
  color: var(--text);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.2px;
  margin: var(--s-8) 0 var(--s-3);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--s-4); }
.prose ul { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose strong { color: var(--text); font-weight: 600; }

/* callout / note box */
.callout {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
}
.callout__icon { flex-shrink: 0; color: var(--accent); }
.callout__icon svg { width: 20px; height: 20px; }
.callout strong { color: var(--text); }

/* ---- quiz ---- */
.quiz { margin-top: var(--s-8); }
.quiz__head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.quiz__badge {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.quiz__question { font-size: 16px; font-weight: 600; margin: 0 0 var(--s-5); }

.quiz__options { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.quiz__option {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  text-align: left;
  padding: var(--s-4);
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-size: 14px; font-weight: 500;
  transition: border-color .15s ease, background .15s ease;
}
.quiz__option:hover { border-color: var(--accent-line); background: var(--card-hover); }
.quiz__marker {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.quiz__option.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.quiz__option.is-selected .quiz__marker { border-color: var(--accent); color: var(--accent); }

/* revealed answer states (set by app.js after "prüfen") */
.quiz.is-checked .quiz__option { cursor: default; pointer-events: none; }
.quiz__option.is-correct { border-color: var(--green); background: var(--green-soft); }
.quiz__option.is-correct .quiz__marker { border-color: var(--green); color: var(--green); }
.quiz__option.is-wrong { border-color: var(--red); background: var(--red-soft); }
.quiz__option.is-wrong .quiz__marker { border-color: var(--red); color: var(--red); }

.quiz__feedback {
  font-size: 13.5px; font-weight: 500;
  margin: 0 0 var(--s-4);
  display: none;
}
.quiz.is-checked.is-right .quiz__feedback--right { display: block; color: var(--green); }
.quiz.is-checked.is-wrong .quiz__feedback--wrong { display: block; color: var(--red); }

/* ---- prev / next ---- */
.lesson-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
.lesson-nav .btn--ghost { max-width: 48%; }
.lesson-nav__spacer { flex: 1; }

/* ---- outline (right, sticky) — Card selbst scrollt NICHT (Border/Eck-Glanz
   bleiben ganz); nur der innere .outline__scroll scrollt bei Überlänge. ---- */
.outline {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));   /* beginnt unter dem (Glas-)Header */
  align-self: start;                         /* NICHT auf Zeilenhöhe strecken → sonst kein sticky */
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  /* Höhe auf den sichtbaren Bereich unter dem Header begrenzen */
  max-height: calc(100vh - var(--header-h) - (var(--s-5) * 2));
}
.outline__title { flex-shrink: 0; }          /* Kopf bleibt fix, scrollt nicht mit */
.outline__progress { flex-shrink: 0; }
/* innerer scrollbarer Bereich: nimmt Restplatz, scrollt vertikal */
.outline__scroll {
  flex: 1 1 auto;
  min-height: 0;                             /* wichtig, damit overflow in Flex greift */
  overflow-y: auto;
  overflow-x: visible;
  margin-right: calc(var(--s-3) * -1);       /* Scrollbar nach außen, Text bündig */
  padding-right: var(--s-3);
  /* dezente, dünne Scrollbar (passend zum dunklen Glas) */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.outline__scroll::-webkit-scrollbar { width: 8px; }
.outline__scroll::-webkit-scrollbar-track { background: transparent; }
.outline__scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.outline__scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); background-clip: padding-box; }

.outline__title {
  font-size: 14px; font-weight: 650; margin: 0 0 var(--s-2);
}
.outline__progress { margin-bottom: var(--s-5); }
.outline__progress-label { font-size: 12px; color: var(--text-muted); margin: var(--s-2) 0 0; }

.outline__module {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-faint);
  margin: var(--s-5) 0 var(--s-2);
  padding-left: var(--s-1);
}
.outline__module:first-of-type { margin-top: 0; }

.outline__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px var(--s-2);
  border-radius: var(--r-item);
  color: var(--text-muted);
  font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.outline__item:hover { background: var(--card-hover); color: var(--text); }
.outline__ico {
  flex-shrink: 0; width: 18px; height: 18px;
  display: grid; place-items: center; color: var(--text-faint);
}
.outline__ico svg { width: 18px; height: 18px; }
.outline__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline__dur { font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }

.outline__item.is-done { color: var(--text); }
.outline__item.is-done .outline__ico { color: var(--green); }
.outline__item.is-current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.outline__item.is-current .outline__ico { color: var(--accent); }

/* responsive: outline drops below the content */
@media (max-width: 1000px) {
  .lesson-layout { grid-template-columns: 1fr; }
  /* gestapelt (mobil/Tablet): kein sticky, normal im Fluss, keine eigene Höhe/Scroll */
  /* gestapelt (mobil/Tablet): kein sticky, keine Höhenbegrenzung, kein Innen-Scroll */
  .outline { position: static; max-height: none; }
  .outline__scroll { overflow-y: visible; max-height: none; margin-right: 0; padding-right: 0; }
}

/* =========================================================================
   TRADING IDEAS — single centered "join" card
   ========================================================================= */
.join-wrap { max-width: 560px; margin: 0 auto; }
.join-card { text-align: center; padding: var(--s-10) var(--s-8); }
.join-card__icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--s-5);
  border-radius: 18px;
  display: grid; place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  box-shadow: 0 0 50px var(--accent-glow);
}
.join-card__icon svg { width: 32px; height: 32px; }
.join-card__title { font-size: 22px; font-weight: 700; margin: 0 0 var(--s-3); }
.join-card__desc {
  font-size: 14.5px; color: var(--text-muted); line-height: 1.65;
  margin: 0 auto var(--s-6); max-width: 44ch;
}
.join-card__hint {
  font-size: 12.5px; color: var(--text-faint);
  margin: var(--s-4) 0 0;
}

/* =========================================================================
   ANNOUNCEMENTS — two columns: feed (toggle: cards/calendar) + "Heute" banner
   ========================================================================= */
.ann-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-6);
  align-items: start;
}
.ann-main { min-width: 0; }

/* view toggle (segmented control) */
.view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-item);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  margin-bottom: var(--s-5);
}
.view-toggle__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  border: none; background: transparent;
  color: var(--text-muted);
  font-size: 13px; font-weight: 600;
  border-radius: 7px;
  transition: background .15s ease, color .15s ease;
}
.view-toggle__btn svg { width: 15px; height: 15px; }
.view-toggle__btn:hover { color: var(--text); }
.view-toggle__btn.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px var(--accent-glow);
}

.ann-view[hidden] { display: none; }

/* ---- card view ---- */
.ann-cards { display: flex; flex-direction: column; gap: var(--s-6); }
.ann-card {
  position: relative;
  /* dezenter blauer Glow für Tiefe (wie ProTrader, nur blau) */
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 8px 40px rgba(146,80,236,0.10);
}
.ann-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 10px 50px rgba(146,80,236,0.16); }
.ann-card__title { font-size: 16px; font-weight: 650; margin: 0 0 var(--s-2); }
.ann-card__body { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin: 0 0 var(--s-4); }
.ann-card__date {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-faint);
}
.ann-card__date svg { width: 13px; height: 13px; }

/* ---- calendar view ---- */
.calendar { padding: var(--s-5); }
.calendar__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-4);
}
.calendar__month { font-size: 15px; font-weight: 650; }
.calendar__nav { display: flex; gap: var(--s-2); }
.cal-nav-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  transition: background .15s ease, color .15s ease;
}
.cal-nav-btn:hover { background: var(--card-hover); color: var(--text); }
.cal-nav-btn svg { width: 16px; height: 16px; }

.calendar__weekdays,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendar__weekdays {
  margin-bottom: 6px;
}
.calendar__weekdays span {
  text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .4px;
  color: var(--text-faint);
  text-transform: uppercase;
}
.cal-day {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
}
.cal-day.is-other { color: var(--text-faint); background: transparent; }
.cal-day.has-event { cursor: pointer; }
.cal-day.has-event:hover { background: var(--card-hover); border-color: var(--accent-line); }
.cal-day.has-event::after {              /* event dot */
  content: "";
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
.cal-day.is-today { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.cal-day.is-selected { background: var(--accent-soft); border-color: var(--accent); }

/* day detail panel under the calendar */
.cal-detail { margin-top: var(--s-5); }
.cal-detail__title { font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 0 0 var(--s-3); }
.cal-detail__empty { font-size: 13px; color: var(--text-faint); }
.cal-event {
  display: flex; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  margin-bottom: var(--s-3);
}
.cal-event__time {
  flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--accent);
  min-width: 46px;
}
.cal-event__title { font-size: 13.5px; font-weight: 500; }

/* ---- "Heute" banner (right) ---- */
.ann-today {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
  padding: var(--s-6);
  /* Fokus-Element: etwas stärkerer blauer Glow */
  border-color: var(--accent-line);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 12px 50px rgba(146,80,236,0.16);
}
.ann-today__label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-1);
}
.ann-today__label svg { width: 15px; height: 15px; }
.ann-today__date { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--s-5); }

.session {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--border);
}
.session:first-of-type { border-top: none; padding-top: 0; }
.session__time {
  flex-shrink: 0;
  font-size: 13px; font-weight: 700; color: var(--accent);
  min-width: 48px;
}
.session__title { font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.ann-today__empty {
  font-size: 13px; color: var(--text-faint);
  padding: var(--s-3) 0;
}

/* responsive: stack columns */
@media (max-width: 1000px) {
  .ann-layout { grid-template-columns: 1fr; }
  .ann-today { position: static; }
}

/* =========================================================================
   LIVE SESSIONS — Google-Calendar-style week grid + month + promo banner
   IMPORTANT: the hour-row height below (52px) MUST match HOUR_PX in the
   page script, otherwise event blocks won't line up with the hour lines.
   ========================================================================= */

/* toolbar above the calendar (navigation + range label) */
.ls-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap;
}
.ls-toolbar__nav { display: flex; align-items: center; gap: var(--s-2); }
.ls-range { font-size: 14px; font-weight: 600; color: var(--text); }
.btn--today { padding: 7px 14px; font-size: 13px; }

/* ---- WEEK GRID ---- */
.wk { padding: 0; overflow: hidden; }

/* header row (weekday + date) — same column template as the body grid */
.wk__header { display: grid; grid-template-columns: 52px repeat(7, 1fr); }
.wk__corner { border-bottom: 1px solid var(--border); }
.wk__dh {
  text-align: center; padding: 9px 2px;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.wk__dh .dow {
  display: block; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint);
}
.wk__dh .dom {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; margin-top: 3px;
  font-size: 14px; font-weight: 600; border-radius: 50%;
}
.wk__dh.is-today .dom { background: var(--accent); color: #fff; }

/* body: time axis + 7 day columns */
.wk__grid { display: grid; grid-template-columns: 52px repeat(7, 1fr); }
.wk__times { position: relative; }
.wk__time {
  height: 52px;                      /* == HOUR_PX */
  box-sizing: border-box;
  padding: 3px 7px 0 0;
  text-align: right;
  font-size: 10.5px; color: var(--text-faint);
}
.wk__col {
  position: relative;
  border-left: 1px solid var(--border);
  /* horizontal hour lines, one every 52px starting at the top */
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 100% 52px;        /* == HOUR_PX */
}
.wk__col.is-today::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(146,80,236,0.05); pointer-events: none;
}

/* event block, absolutely positioned by the script (top/height/left/width) */
.wk-event {
  position: absolute;
  border-radius: 7px; overflow: hidden;
  background: rgba(146,80,236,0.18);
  border-left: 3px solid var(--accent);
  padding: 4px 7px;
  box-shadow: 0 4px 12px rgba(146,80,236,0.12);
}
.wk-event__time { font-size: 10px; font-weight: 700; color: #cfe0ff; }
.wk-event__title {
  font-size: 11.5px; font-weight: 600; color: #fff; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}

/* ---- compact "upcoming sessions" cards (ProTrader-style upsell) ---- */
.upcoming { margin-top: var(--s-8); }
.scard { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-3); }
.scard__thumb {
  width: 132px; aspect-ratio: 16 / 9; flex-shrink: 0;
  border-radius: 10px; object-fit: cover; display: block;
}
.scard__body { flex: 1; min-width: 0; }
.scard__title { font-size: 14px; font-weight: 600; margin: 0 0 3px; }
.scard__meta { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.scard__rsvp { flex-shrink: 0; }
@media (max-width: 560px) {
  .scard { flex-wrap: wrap; }
  .scard__thumb { width: 100%; }
  .scard__rsvp { width: 100%; }
}

/* =========================================================================
   "HEUTE" PROMO BANNER (right column) — richer than a normal card.
   Overrides the earlier .ann-today / .session rules (later = wins).
   ========================================================================= */
.ann-today {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
  padding: var(--s-6) var(--s-5);
  overflow: hidden;
  border: 1px solid var(--accent-line);
  background:
    radial-gradient(130% 70% at 50% 0%, rgba(146,80,236,0.16), transparent 62%),
    var(--card);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 70px rgba(146,80,236,0.20);
}
.ann-today__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 2px;
}
.ann-today__label svg { width: 16px; height: 16px; }
.ann-today__date { font-size: 13.5px; color: var(--text-muted); margin: 0 0 var(--s-5); }

.session {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border);
}
.session:first-of-type { border-top: none; padding-top: var(--s-1); }
.session__time {
  flex-shrink: 0; min-width: 56px;
  font-size: 17px; font-weight: 800; color: #fff;
  letter-spacing: -.3px;
}
.session__main { flex: 1; min-width: 0; }
.session__title { font-size: 13.5px; font-weight: 600; line-height: 1.4; margin: 0 0 7px; }
/* Banner-"Erinnern": gleicher Outline-Stil wie .btn-outline (Konsistenz) */
.session__rsvp {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border-radius: var(--r-pill);
  color: var(--accent);
  border: 1px solid rgba(146, 80, 236, 0.5);
  background: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.session__rsvp:hover { background: rgba(146, 80, 236, 0.12); border-color: var(--accent); color: var(--accent); }
.session__rsvp svg { width: 13px; height: 13px; }

.ann-today__cta {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.ann-today__empty { font-size: 13px; color: var(--text-faint); padding: var(--s-3) 0; }

/* ---- page head row: title block + page-view switcher (Kalender/Cards) ---- */
.ls-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.ls-head .page-head { margin-bottom: 0; }

/* compact variant of the segmented toggle (used for Woche/Monat) */
.view-toggle--sm { margin-bottom: 0; }
.view-toggle--sm .view-toggle__btn { padding: 6px 13px; font-size: 12.5px; }

/* ---- calendar card with in-header toolbar ---- */
.cal-card { padding: 0; overflow: hidden; }
.cal-toolbar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.cal-toolbar__nav { display: flex; align-items: center; gap: var(--s-2); }
.cal-toolbar__label {
  flex: 1 1 auto; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--text);
  min-width: 120px;
}

/* month panel needs padding (the week grid is intentionally full-bleed) */
[data-cal-panel="month"] { padding: var(--s-5); }

/* ---- session card (Cards view) — reuses .course-card visuals ---- */
.course-card__when {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  margin: 0 0 var(--s-2);
}
.course-card__when svg { width: 14px; height: 14px; }
.course-card__cta { margin-top: auto; padding-top: var(--s-4); }

/* ---- Cards view: sessions grouped by day (ProTrader-style list cards) ---- */
.day-group { margin-top: var(--s-8); }
.day-group:first-child { margin-top: 0; }
.day-group__title {
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  color: var(--accent);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.day-list { display: flex; flex-direction: column; gap: var(--s-4); }

/* wide horizontal list card */
.lsession {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3);
  /* dezenter blauer Glow, passend zum Rest der App */
  box-shadow: 0 8px 28px rgba(146,80,236,0.12);
}
.lsession__thumb {
  width: 160px; aspect-ratio: 16 / 9; flex-shrink: 0;
  border-radius: 10px; object-fit: cover; display: block;
}
.lsession__body { flex: 1; min-width: 0; }
.lsession__when {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--accent); margin: 0 0 4px;
}
.lsession__when svg { width: 13px; height: 13px; }
.lsession__title { font-size: 15.5px; font-weight: 650; margin: 0 0 3px; }
.lsession__host { font-size: 12.5px; color: var(--text-muted); margin: 0; }

.lsession__action { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.lsession__rsvp { padding: 9px 18px; font-size: 13px; }
.lsession__arrow { color: var(--text-faint); display: grid; place-items: center; transition: color .15s ease, transform .15s ease; }
.lsession__arrow svg { width: 20px; height: 20px; }
.lsession:hover .lsession__arrow { color: var(--accent); transform: translateX(2px); }
/* Hover: Glow etwas verstärken (Rand kommt weiterhin von .card--hover) */
.lsession:hover { box-shadow: 0 8px 28px rgba(146,80,236,0.18); }

/* Mobile: thumbnail on top, action below the text */
@media (max-width: 640px) {
  .lsession { flex-wrap: wrap; }
  .lsession__thumb { width: 100%; }
  .lsession__action { width: 100%; }
  .lsession__rsvp { flex: 1; }
}

/* =========================================================================
   ANNOUNCEMENTS — simple single-column feed (ProTrader-style)
   ========================================================================= */
.feed {
  max-width: 720px;             /* keep cards from getting too wide */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.post__title {
  font-size: 17px;
  font-weight: 650;
  margin: 0 0 var(--s-3);
  letter-spacing: -.2px;
}
.post__body { color: var(--text-muted); font-size: 14px; line-height: 1.7; }
.post__body p { margin: 0 0 var(--s-3); }
.post__body p:last-child { margin-bottom: 0; }

.post__time {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-faint);
  margin-top: var(--s-4);
}
.post__time svg { width: 13px; height: 13px; }

/* reactions bar */
.reactions {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.reaction {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.02);
  color: var(--text-muted);
  font-size: 13px; line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.reaction:hover { background: var(--card-hover); border-color: var(--accent-line); }
.reaction__emoji { font-size: 15px; }
.reaction__count { font-size: 12.5px; font-weight: 600; min-width: 8px; text-align: left; }

/* active (clicked) state */
.reaction.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* =========================================================================
   TRADING JOURNAL — day strip, shared trades, metric cards (Chart.js), KPIs
   ========================================================================= */

/* page head row: title + edit button (left) · period switcher (right) */
.jr-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.jr-head .page-head { margin-bottom: 0; }
.jr-head__left { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.jr-head__controls { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.btn--sm { padding: 8px 14px; font-size: 13px; }

.jr-block { margin-top: var(--s-8); }

/* ---- Block 1: day / week strip ---- */
.jr-strip-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4);
}
.jr-month { font-size: 16px; font-weight: 650; }
.jr-nav { display: flex; align-items: center; gap: var(--s-2); }

.jr-days { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); }
/* nested inside the container card → dezent abgesetzte Fläche (nicht "Box in gleicher Box") */
.jr-day {
  flex: 0 0 138px; padding: var(--s-4);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* generic nested surface for elements that sit INSIDE a container card */
.inner-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--s-5);
}
.inner-card--hover { transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.inner-card--hover:hover {
  border-color: var(--accent-line);
  background: rgba(255,255,255,0.045);
  transform: translateY(-2px);
}
.jr-day__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-3);
}
.jr-day__date { font-size: 13px; font-weight: 600; }
.jr-day__dow { color: var(--text-muted); font-weight: 500; margin-left: 4px; }
.jr-day__icon { color: var(--text-faint); display: grid; place-items: center; }
.jr-day__icon svg { width: 15px; height: 15px; }
.jr-day__pnl { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.jr-day__trades { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.jr-day.is-empty { opacity: .45; }

/* shared colour helpers */
.is-up   { color: var(--green); }
.is-down { color: var(--red); }
.is-flat { color: var(--text-faint); }

/* ---- Block 2: shared trade cards (sparklines) ---- */
.trade-card__head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--text-muted);
}
.trade-card__symbol { font-size: 22px; font-weight: 700; letter-spacing: -.4px; margin: var(--s-2) 0 var(--s-4); }
.trade-card__spark { height: 72px; position: relative; }

/* ---- Block 3: metric cards ---- */
.metric-card__title { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--s-2); }
.metric-card__value { font-size: 25px; font-weight: 700; letter-spacing: -.5px; margin-bottom: var(--s-4); }
.metric-card__value small { font-size: 14px; font-weight: 600; color: var(--text-muted); }

.gauge-wrap  { position: relative; height: 128px; }
.donut-wrap  { position: relative; height: 150px; }
.donut-legend { display: flex; justify-content: center; gap: var(--s-4); margin-top: var(--s-3); font-size: 12px; color: var(--text-muted); }
.donut-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* avg winning vs losing — proportional split bar */
.split-bar { display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; margin: var(--s-5) 0 var(--s-3); }
.split-bar__win  { background: var(--green); }
.split-bar__loss { background: var(--red); }
.split-vals { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; }

/* hourly breakdown list */
.hourly { display: flex; flex-direction: column; gap: var(--s-3); max-height: 196px; overflow-y: auto; padding-right: 4px; }
.hour-row { display: flex; align-items: center; gap: var(--s-3); font-size: 12.5px; }
.hour-row__time { width: 44px; color: var(--text-muted); flex-shrink: 0; }
.hour-row__track { flex: 1; height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,0.05); position: relative; }
.hour-row__track::before { /* center line */
  content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border-strong);
}
.hour-row__fill { position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill); }
.hour-row__fill.is-up   { background: var(--green); left: 50%; }
.hour-row__fill.is-down { background: var(--red);   right: 50%; }
.hour-row__val { width: 92px; text-align: right; flex-shrink: 0; font-weight: 600; }
.hour-row__val span { color: var(--text-faint); font-weight: 500; margin-left: 4px; }

/* ---- Block 4: KPI cards ---- */
.kpi-card__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.kpi-card__icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.kpi-card__icon svg { width: 19px; height: 19px; }
.kpi-card__title { font-size: 13px; color: var(--text-muted); }
.kpi-card__value { font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.kpi-card__sub { font-size: 12.5px; color: var(--text-faint); margin-top: 4px; }

/* =========================================================================
   STATUS & RANKS (rewards) — rank cards, metallic hex badges, info blocks
   ========================================================================= */

/* head row: title (left) · "Dein Status" pill (right) */
.rw-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.rw-head .page-head { margin-bottom: 0; }
.rw-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-muted);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  padding: 8px 14px; border-radius: var(--r-pill);
}
.rw-status b { color: var(--accent); font-weight: 700; }

/* ---- rank cards ---- */
.rank-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5); }

.rank-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
}
.rank-card__name { font-size: 16px; font-weight: 700; margin: var(--s-2) 0 0; }
.rank-card__thresh { font-size: 13px; color: var(--text-muted); }

.rank-card__status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--green);
  margin-top: auto;
}
.rank-card__status svg { width: 14px; height: 14px; }

/* "Du bist hier" badge on the current rank */
.rank-card__here {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: #fff; background: var(--accent);
  padding: 5px 12px; border-radius: var(--r-pill);
  box-shadow: 0 6px 18px var(--accent-glow);
}

/* current rank card highlight */
.rank-card.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 14px 40px rgba(146,80,236,0.22);
}

/* ---- metallic hex badge ---- */
.badge-hex {
  width: 84px; height: 92px; display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5));
}

/* ---- Block 2: "Was dein Status freischaltet" ---- */
.feature-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-8);
}
.feature { display: flex; align-items: center; gap: var(--s-3); font-size: 14px; }
.feature__check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--green); background: var(--green-soft);
  border: 1px solid rgba(34,197,94,0.35);
}
.feature__check svg { width: 13px; height: 13px; }

/* ---- Block 3: "Wie der Status funktioniert" ---- */
.howto { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.howto li { display: flex; gap: var(--s-3); align-items: flex-start; }
.howto__num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.howto__text { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.howto__text strong { color: var(--text); font-weight: 600; }

/* ---- responsive ---- */
@media (max-width: 1100px) { .rank-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .rank-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  {
  .rank-grid { grid-template-columns: 1fr; }
  .feature-cols { grid-template-columns: 1fr; }
}

/* =========================================================================
   ACCOUNT — profile header + personal data (display / edit toggle)
   ========================================================================= */

/* ---- Block 1: profile header ---- */
.profile {
  display: flex; align-items: center; gap: var(--s-5);
}
.profile__avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.profile__avatar {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), #4a1fb0);
  box-shadow: 0 8px 22px var(--accent-glow);
}
.profile__change {
  font-size: 12px; font-weight: 600; color: var(--accent);
  background: transparent; border: none; padding: 0;
}
.profile__change:hover { color: var(--accent-hover); }

.profile__info { min-width: 0; }
.profile__name { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.3px; }
.profile__mail { font-size: 14px; color: var(--text-muted); margin: 0 0 var(--s-3); overflow: hidden; text-overflow: ellipsis; }
.profile__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: var(--accent); border: 1px solid var(--accent-line);
  background: var(--accent-soft); padding: 5px 12px; border-radius: var(--r-pill);
}
.profile__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ---- Block 2: personal data ---- */
.data-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-5);
}

.field-list { display: flex; flex-direction: column; }
.field-row {
  display: grid; grid-template-columns: 200px 1fr; align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border);
}
.field-row:first-child { border-top: none; padding-top: 0; }
.field-row__label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.field-row__value { font-size: 14px; color: var(--text); font-weight: 500; }

/* edit input (hidden until edit mode) */
.field-row__input {
  width: 100%; max-width: 380px; height: 42px;
  padding: 0 var(--s-4);
  background: #0c0c0f;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-item);
  color: var(--text); font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-row__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* mode visibility: default = display mode */
.field-row__input { display: none; }
.account-form.is-editing .field-row__value { display: none; }
.account-form.is-editing .field-row__input { display: block; }

/* action buttons row (only in edit mode) */
.data-actions { display: none; gap: var(--s-3); margin-top: var(--s-6); }
.account-form.is-editing .data-actions { display: flex; }
.account-form.is-editing .data-card__head .btn { display: none; }   /* hide "Bearbeiten" while editing */

@media (max-width: 560px) {
  .profile { flex-direction: column; text-align: center; align-items: center; }
  .field-row { grid-template-columns: 1fr; gap: 6px; }
}

/* =========================================================================
   DASHBOARD (index) — dense, multi-layer cards (ProTrader-grade)
   Feine Trennlinie = border-top 1px solid rgba(255,255,255,0.06)
   ========================================================================= */

.dash-block { margin-top: var(--s-5); }

/* ---- shared building blocks ---- */
/* section inside a card, separated by a fine divider */
.c-sec { padding-top: var(--s-4); margin-top: var(--s-4); border-top: 1px solid rgba(255,255,255,0.06); }
.c-sec--first, .c-sec:first-child { padding-top: 0; margin-top: 0; border-top: none; }

/* mini section head: emoji/icon + title (+ right action) */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sec-head__title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.sec-head__title .emo { font-size: 14px; }
.sec-head__action { font-size: 12px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
.sec-head__action:hover { color: var(--accent-hover); }
.sec-head__action svg { width: 13px; height: 13px; }

/* label/value pair */
.kv__label { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; margin: 0 0 3px; }
.kv__value { font-size: 14px; font-weight: 600; color: var(--text); }
.kv__value small { color: var(--text-faint); font-weight: 500; }

/* ---- 1) greeting ---- */
.greeting-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--text-faint); text-transform: uppercase; margin: 0 0 6px; }
.greeting { font-size: 26px; font-weight: 700; letter-spacing: -.4px; margin: 0 0 var(--s-5); }

/* upper row: status | sessions (wider) | announcements */
/* obere Reihe: Status/Milestones (60%) links, Announcements (40%) rechts,
   beide gleich hoch (stretch), aber insgesamt FLACH. Marktuhr → Journal. */
.dash-top { display: grid; grid-template-columns: 6fr 4fr; gap: var(--s-5); align-items: stretch; }
.dash-top > .card { display: flex; flex-direction: column; }

/* Status-Card intern: Status (links) + Milestones (rechts) NEBENEINANDER */
.status-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); flex: 1; }
.status-split__left { display: flex; flex-direction: column; }
.status-split__right {
  display: flex; flex-direction: column; justify-content: flex-start;  /* oben bündig mit links */
  border-left: 1px solid rgba(255,255,255,0.06);   /* dezente vertikale Trennlinie */
  padding-left: var(--s-6);
}

/* kompakte Milestone-Kategorien in der rechten Spalte */
.ms-mini { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); }
.ms-mini__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: 6px; }
.ms-mini__name { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); }
.ms-mini__val { font-size: 13px; font-weight: 600; color: var(--text); }
.ms-mini .status-bar { height: 5px; }
.ms-mini__next { font-size: 11.5px; color: var(--text-muted); margin: 6px 0 0; }
.ms-mini__next strong { color: var(--text); font-weight: 600; }

/* Announcements kompakter, damit die Reihe insgesamt niedriger bleibt */
.dash-top .mini-item { padding: 7px 0; }
.dash-top .mini-list { display: flex; flex-direction: column; justify-content: center; flex: 1; }

@media (max-width: 900px) {
  /* gestapelt: Karten & Spalten untereinander, kein Gleich-Höhe-Stretch */
  .dash-top { grid-template-columns: 1fr; align-items: start; }
  .status-split { grid-template-columns: 1fr; gap: 0; }
  .status-split__right {
    justify-content: flex-start;
    border-left: none; padding-left: 0;
    margin-top: var(--s-4); padding-top: var(--s-4);
    border-top: 1px solid rgba(255,255,255,0.06);   /* im Stapel: horizontale Trennlinie */
  }
  .dash-top .mini-list { justify-content: flex-start; }
}

/* emphasised cards get a soft blue glow */
.card--soft-glow { box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 34px rgba(146,80,236,0.10); }

/* ---- 2a) status card ---- */
.status-rank { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); }
.status-rank__val { font-size: 32px; font-weight: 800; color: var(--accent); letter-spacing: -.6px; line-height: 1; }
.status-rank__xp { text-align: right; }
.status-bar { height: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,0.07); overflow: hidden; margin-top: var(--s-3); }
.status-bar > i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); box-shadow: 0 0 10px var(--accent-glow); }
.status-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 6px 0 0; }
.status-note .lead { color: var(--green); font-weight: 600; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-4); }

/* ---- 2b) MARKET CLOCK (statisch) ---- */
.clock { --clk-info: 116px; --clk-status: 86px; }
.clock__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.clock__head .sec-head__title { flex: 1; }
.clock__time { font-size: 22px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.clock__tz { font-size: 11.5px; color: var(--text-faint); }

/* hour axis */
.clock__axis { display: grid; grid-template-columns: var(--clk-info) 1fr var(--clk-status); margin-top: var(--s-4); }
.clock__ticks { grid-column: 2; position: relative; height: 16px; }
.clock__tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; color: var(--text-faint); }

/* rows area (relative → holds the single "now" line) */
.clock__rows { position: relative; display: flex; flex-direction: column; }
.clock__now {
  position: absolute; top: 0; bottom: 0; width: 2px;
  /* sits inside the timeline column: info-offset + 81.8% of track width */
  left: calc(var(--clk-info) + (100% - var(--clk-info) - var(--clk-status)) * 0.818);
  background: linear-gradient(180deg, rgba(146,80,236,0.1), var(--accent), rgba(146,80,236,0.1));
  z-index: 2;
}
.clock__now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

.clock-row { display: grid; grid-template-columns: var(--clk-info) 1fr var(--clk-status); align-items: center; height: 40px; }
.clock-row__info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.clock-row__flag { font-size: 15px; }
.clock-row__city { font-size: 12.5px; font-weight: 600; }
.clock-row__local { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.clock-row__track { position: relative; height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,0.04); }
.clock-bar { position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill); }
.clock-bar.is-open-blue  { background: linear-gradient(90deg, rgba(146,80,236,0.6), var(--accent)); box-shadow: 0 0 10px rgba(146,80,236,0.3); }
.clock-bar.is-open-green { background: linear-gradient(90deg, rgba(34,197,94,0.5), var(--green)); box-shadow: 0 0 10px rgba(34,197,94,0.25); }
.clock-bar.is-closed     { background: rgba(255,255,255,0.12); }
.clock-row__status { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-align: right; }
.clock-row__status.is-open   { color: var(--green); }
.clock-row__status.is-closed { color: var(--text-faint); }
.clock__foot { display: flex; align-items: center; gap: var(--s-2); font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.clock__foot b { color: var(--text); font-weight: 600; }
.clock__foot .sep { color: var(--text-faint); }

/* ---- 2c) announcements list ---- */
.mini-list { display: flex; flex-direction: column; }
.mini-item { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid rgba(255,255,255,0.06); transition: opacity .15s ease; }
.mini-item:first-child { border-top: none; padding-top: 0; }
.mini-item:hover { opacity: .85; }
.mini-item__ico { flex-shrink: 0; font-size: 15px; line-height: 1.4; }
.mini-item__body { flex: 1; min-width: 0; }
.mini-item__title { font-size: 13px; font-weight: 600; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-item__desc { font-size: 12px; color: var(--text-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-item__time { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-faint); }

/* ---- 3) action cards ---- */
.action-card { display: flex; align-items: center; gap: var(--s-4); }
.action-card__ico {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.action-card__ico svg { width: 22px; height: 22px; }
.action-card__body { flex: 1; min-width: 0; }
.action-card__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); margin: 0 0 3px; }
.action-card__title { font-size: 15px; font-weight: 650; margin: 0 0 2px; }
.action-card__desc { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.action-card__arrow { flex-shrink: 0; color: var(--text-faint); transition: color .15s ease, transform .15s ease; }
.action-card__arrow svg { width: 20px; height: 20px; }
.action-card:hover .action-card__arrow { color: var(--accent); transform: translateX(3px); }

/* ---- 4) quick-access tiles ---- */
.quick-tile { display: flex; flex-direction: column; gap: var(--s-3); }
.quick-tile__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.quick-tile__icon svg { width: 22px; height: 22px; }
.quick-tile__title { font-size: 15px; font-weight: 650; margin: var(--s-2) 0 0; }
.quick-tile__sub { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.quick-tile__sub.is-live { color: var(--green); font-weight: 600; }

/* market clock: on small screens hide the per-city local time to keep rows tidy */
@media (max-width: 520px) {
  .clock { --clk-info: 92px; --clk-status: 72px; }
  .clock-row__local { display: none; }
}

/* =========================================================================
   PLACEHOLDER / SKELETON ELEMENTS (build = scaffold only)
   ========================================================================= */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  border-radius: 8px;
  animation: shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sk-line { height: 12px; margin-bottom: 10px; }
.sk-line.w-40 { width: 40%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-80 { width: 80%; }
.sk-line:last-child { margin-bottom: 0; }
.sk-block { height: 120px; border-radius: 12px; }
.sk-thumb { aspect-ratio: 16 / 9; border-radius: 12px; }
.sk-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }

/* dashed empty placeholder panel */
.placeholder {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.015);
  padding: var(--s-8);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-muted);
  min-height: 160px;
}
.placeholder__icon {
  width: 44px; height: 44px; margin-bottom: var(--s-3);
  color: var(--text-faint);
}
.placeholder__icon svg { width: 44px; height: 44px; }
.placeholder__title { font-weight: 600; color: var(--text); margin: 0 0 4px; font-size: 14px; }
.placeholder__text { font-size: 13px; max-width: 46ch; }

/* list row scaffold */
.row-list { display: flex; flex-direction: column; gap: var(--s-3); }
.row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.012);
  transition: background .15s ease, border-color .15s ease;
}
.row:hover { background: var(--card-hover); border-color: var(--border-strong); }
.row__body { flex: 1; min-width: 0; }

/* =========================================================================
   COMING SOON full-page state
   ========================================================================= */
.coming-soon {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-10) var(--s-6);
  min-height: 52vh;
}
.coming-soon__inner { max-width: 460px; }
.coming-soon__icon {
  width: 84px; height: 84px;
  margin: 0 auto var(--s-6);
  border-radius: 22px;
  display: grid; place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  box-shadow: 0 0 60px var(--accent-glow);
}
.coming-soon__icon svg { width: 40px; height: 40px; }
.coming-soon__pill {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-4);
}
.coming-soon__title { font-size: 26px; font-weight: 700; margin: 0 0 var(--s-3); }
.coming-soon__text { color: var(--text-muted); font-size: 15px; margin: 0; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 11px var(--s-5);
  border-radius: var(--r-item);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px var(--accent-glow);
}
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover { background: var(--card-hover); border-color: var(--border-strong); }
/* Outline-Variante für Sekundär-Aktionen (RSVP/Erinnern): transparent + blauer Rand */
.btn-outline {
  background: transparent;
  border: 1px solid rgba(146, 80, 236, 0.5);
  color: var(--accent);
  box-shadow: none;
}
.btn-outline:hover {
  background: rgba(146, 80, 236, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.btn--block { width: 100%; }

/* =========================================================================
   LOGIN PAGE
   ========================================================================= */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-6);
  position: relative;
  overflow: hidden;
}
.login__bg {
  position: absolute;
  inset: 0;
  background: url("../wifimoney-background.webp") center/cover no-repeat;
  opacity: .5;
  z-index: 0;
}
.login__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 500px at 70% 20%, var(--accent-glow), transparent 60%),
    linear-gradient(180deg, rgba(10,10,12,0.55), rgba(10,10,12,0.92));
}
.login__card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  box-shadow: var(--shadow-pop), 0 0 0 1px rgba(146,80,236,0.05), 0 0 80px var(--accent-glow);
  padding: var(--s-8);
}
.login__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.login__brand .brand__name { font-size: 16px; }
.login__title { font-size: 23px; font-weight: 700; margin: 0 0 var(--s-2); }
.login__subtitle { font-size: 14px; color: var(--text-muted); margin: 0 0 var(--s-6); }

/* form */
.field { margin-bottom: var(--s-4); }
.field__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.input-wrap { position: relative; }
.input {
  width: 100%;
  height: 46px;
  padding: 0 var(--s-4);
  background: #0c0c0f;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-item);
  color: var(--text);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.input--with-icon { padding-right: 46px; }
.input-icon-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: 8px;
}
.input-icon-btn:hover { color: var(--text); background: var(--card-hover); }
.input-icon-btn svg { width: 18px; height: 18px; }

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--s-2) 0 var(--s-6);
}
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--text-muted);
  user-select: none;
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  width: 17px; height: 17px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: #0c0c0f;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.checkbox input:checked { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked::after {
  content: "";
  width: 9px; height: 5px;
  border: 2px solid #fff;
  border-top: none; border-right: none;
  transform: rotate(-45deg) translateY(-1px);
}
.link { color: var(--accent); font-size: 13px; font-weight: 500; }
.link:hover { color: var(--accent-hover); }

.login__foot {
  text-align: center;
  margin-top: var(--s-5);
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================================
   MOBILE OVERLAY for sidebar
   ========================================================================= */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.scrim.is-visible { opacity: 1; visibility: visible; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Sidebar becomes an off-canvas drawer */
  .main { margin-left: 0 !important; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-pop); }
  /* Force full width even if "collapsed" state was saved */
  .app.collapsed .sidebar { width: var(--sidebar-w); }
  .app.collapsed .brand__text,
  .app.collapsed .nav-group__caption,
  .app.collapsed .nav-item__label,
  .app.collapsed .nav-item__soon,
  .app.collapsed .collapse-btn span { display: revert; }
  .app.collapsed .nav-item { justify-content: flex-start; padding-left: var(--s-3); padding-right: var(--s-3); }

  .header__hamburger { display: grid; }
  .content { padding: var(--s-5); }
  .page-title { font-size: 25px; }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .badge--streak { display: none; }      /* keep header tidy on small screens */
  .content { padding: var(--s-4); }
}

/* =========================================================================
   THEME: "LIQUID GLASS" — purple→orange accent + glass surfaces.
   SCOPED to body.theme-glass (currently only the Dashboard / index.html),
   so the shared sidebar & header restyle ONLY on that page and the other
   pages keep the existing blue theme untouched. Roll out globally later
   by adding class="theme-glass" to the other pages' <body>.
   ========================================================================= */
/* Registrierte Custom Properties → machen die Verlaufs-Stopps des Eck-Glanzes
   ANIMIERBAR (transition greift nur bei @property-typisierten Werten).
   Sie definieren die transparente Mittelzone des 135°-Rand-Glanzes:
   je näher --glow-a/--glow-b an 50% rücken, desto weiter breitet sich das
   Licht von den Ecken an den Kanten entlang aus. */
@property --glow-a { syntax: "<percentage>"; inherits: false; initial-value: 28%; }
@property --glow-b { syntax: "<percentage>"; inherits: false; initial-value: 72%; }
/* Eck-Glanz-FARBEN registriert → beim Hover animierbar heller werden */
@property --corner-tl { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.55); }
@property --corner-br { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.38); }

.theme-glass {
  /* purple→orange accent gradient + single-tone fallback that replaces the blue */
  --accent-gradient: linear-gradient(135deg, #7f44f4, #ef4f3c);
  --accent:        #9250ec;              /* single-tone fallback (links, icons) */
  --accent-hover:  #a66bf0;
  --accent-glow:   rgba(146, 80, 236, 0.20);
  --accent-soft:   rgba(146, 80, 236, 0.14);
  --accent-line:   rgba(146, 80, 236, 0.40);

  /* ---- JUSTIERBARE GLAS-REGLER ------------------------------------------
     Diese Werte zum Feintunen anfassen: */
  --glass-overlay:  rgba(0, 0, 0, 0.75);    /* Hintergrund-Abdunklung               */
  --glass-vignette: rgba(0, 0, 0, 0.45);   /* Rand-Vignette (dunkler zu den Rändern) */
  --glass-bg:       rgba(0, 0, 0, 0.45); /* Glas-Grundfarbe (Substanz)        */
  --glass-blur:     45px;                  /* Blur-Stärke (Fokus-Flächen)           */
  --glass-saturate: 160%;                  /* Farbsättigung durchs Glas             */
  --glass-bright:   1.05;                  /* leichte Aufhellung                    */
  --glass-border:   rgba(255, 255, 255, 0.10); /* dezenter Grundrand (ganze Card)     */
  --hover-glow:     rgba(255, 255, 255, 0.15); /* HOVER: dezenter weißer Außen-Glow   */
  --nav-active-bg:  rgba(255, 255, 255, 0.08); /* aktive Sidebar-Zeile = exakt Scrollbar-Thumb */

  /* ---- Primär-Button (dunkler Glas-Button, leuchtende weiße Unterkante) ---- */
  --btn-fill:         #0a0a0f;                  /* FILL_COLOR: fast schwarze Füllung   */
  --btn-glow:         0.95;                     /* GLOW_BRIGHTNESS: Helligkeit (0..1)  */
  --btn-glow-w-rest:  35%;                      /* GLOW_WIDTH_REST: Breite im Ruhezustand */
  --btn-glow-w-hover: 90%;                      /* GLOW_WIDTH_HOVER: Breite beim Hover */
  --btn-edge:         2px;                       /* VISIBLE_EDGE_HEIGHT: wie viel Glow unten hervorschaut */
  --corner-tl:      rgba(255, 255, 255, 0.50); /* Eck-Glanz OBEN-LINKS (am hellsten, -5%) */
  --corner-br:      rgba(255, 255, 255, 0.38); /* Eck-Glanz UNTEN-RECHTS (schwächer)  */
  --glass-shimmer:  rgba(255, 255, 255, 0.15); /* innerer Lichtsaum oben (Materialität)*/
  --glass-depth:    rgba(0, 0, 0, 0.6); /* Tiefenschatten unter dem Glas */
}

/* ---- statisches Hintergrundbild (vollflächig, cover, fixiert) ---- */
body.theme-glass {
  background: url("../wifi-money-background-purple-orange.webp") center center / cover no-repeat fixed, #08080D;
}

/* dunkler Overlay + Vignette ÜBER dem Canvas, UNTER dem Content */
body.theme-glass::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 130% at 50% 38%, rgba(0,0,0,0) 52%, var(--glass-vignette) 100%),
    var(--glass-overlay);
}
body.theme-glass .app { position: relative; z-index: 2; }   /* Content über Canvas + Overlay */

/* =========================================================================
   WEBGL-MESH-GRADIENT CANVAS (eigener Shader, siehe index.html).
   Ebenen: Canvas (z 0) → Overlay (z 1) → UI (z 2).
   Farben als CSS-Variablen → im JS ausgelesen (leicht änderbar).
   Enthält zugleich einen statischen CSS-Verlauf als WebGL-Fallback.
   ========================================================================= */
.gradient-canvas {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  /* Fallback-Look, falls kein WebGL (wird vom Canvas überdeckt, sobald es läuft) */
  background:
    linear-gradient(135deg, transparent 40%, rgba(239,79,60,0.10) 50%, transparent 60%),
    linear-gradient(135deg, #0a0a0f 0%, #1a0f2e 45%, #7f44f4 70%, #1a0f2e 100%);
  /* Shader-Farben (JS liest diese aus) */
  --gradient-color-1: #0a0a0f;   /* dunkler Grund     */
  --gradient-color-2: #7f3ffb;   /* Lila (dominant)   */
  --gradient-color-3: #f94e33;   /* Orange (Adern)    */
  --gradient-color-4: #1a0f2e;   /* dunkles Violett   */
}

/* =========================================================================
   GLASS SURFACES
   - Fokus-Flächen (Sidebar, Header, Haupt-Cards): starker Blur + Substanz.
   - Alle Cards inkl. kleiner Tiles: dezenter Grundrand + diagonaler Eck-Glanz.
   Kanten-Rezept: gleichmäßige border (Grundrand) + ein maskierter Verlaufs-Ring
   (::before) der NUR die Ecken oben-links / unten-rechts aufleuchten lässt.
   Der Ring respektiert border-radius (mask-composite statt border-image).
   ========================================================================= */

/* Glas-Rezept auf ALLE Flächen: Sidebar, Header und alle Cards/Kacheln. */
.theme-glass .sidebar,
.theme-glass .header,
.theme-glass .card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  border: 1px solid var(--glass-border);   /* dezenter, gleichmäßiger Grundrand */
  box-shadow:
    inset 0 1px 1px var(--glass-shimmer),  /* feiner Lichtsaum oben (Materialität) */
    var(--glass-depth);                     /* Außen-Tiefenschatten */
}
/* KEINE separate CSS-Border: der Ring (::before) IST die Border → dadurch liegt
   der Grundrand + Eck-Glanz auf EINER Linie, exakt auf der Card-Kante (kein 1px-
   Versatz mehr, da inset:0 ohne Border direkt auf der Border-Box sitzt). */
.theme-glass .card { position: relative; border: 0; }
.theme-glass .dash-top > .card,
.theme-glass .action-card { border-radius: 18px; }

/* Border + diagonaler Eck-Glanz als EIN 1px-Ring, exakt auf der Card-Kontur:
   135°-Verlauf: TL hell → dezenter Grundrand in der Mitte → BR hell.
   Über padding + mask-exclude → folgt exakt dem border-radius. */
.theme-glass .card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;                             /* Ring-/Border-Dicke */
  --glow-a: 28%;                            /* Ruhezustand: Grundrand-Zone 28%–72% */
  --glow-b: 72%;
  background: linear-gradient(135deg,
      var(--corner-tl) 0%,
      var(--glass-border) var(--glow-a),    /* Mitte = dezenter Grundrand (durchgehend) */
      var(--glass-border) var(--glow-b),
      var(--corner-br) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  /* fließende Ausbreitung + Aufhellung des Glanzes beim Hover */
  transition: --glow-a .4s ease, --glow-b .4s ease, --corner-tl .4s ease, --corner-br .4s ease;
}

/* nested Flächen dezent, kein eigener Rand/Glanz (sitzen INNEN im Glas) */
.theme-glass .inner-card,
.theme-glass .jr-day { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); box-shadow: none; }
.theme-glass .inner-card::before,
.theme-glass .jr-day::before { display: none; }

/* Card-Hover: Glas + Border bleiben STABIL. Es passiert NUR eines — derselbe
   Eck-Glanz breitet sich von oben-links/unten-rechts an den Kanten entlang aus,
   indem die transparente Mittelzone schrumpft (28–72% → 40–60%). Kein Vollweiß,
   keine zweite Border, keine Breiten-/Layout-Änderung. */
.theme-glass .card--hover:hover::before {
  --glow-a: 33%;                            /* mittlere Ausbreitung (zwischen dezent u. stark) */
  --glow-b: 67%;
  --corner-tl: rgba(255, 255, 255, 0.75);   /* weißes Leuchten oben-links (gedämpft)    */
  --corner-br: rgba(255, 255, 255, 0.60);   /* weißes Leuchten unten-rechts (gedämpft)  */
}
/* zusätzlicher dezenter weißer Außen-Glow, damit der Rand sichtbar "leuchtet" */
.theme-glass .card--hover:hover {
  box-shadow: inset 0 1px 1px var(--glass-shimmer), var(--glass-depth), 0 0 22px var(--hover-glow);
}

/* =========================================================================
   ACCENT: Verlauf dort, wo vorher flächiges Blau war
   ========================================================================= */
/* ---- Primär-Button: dunkler Glas-Button mit leuchtender UNTERKANTE ----
   Saubere Schichtung über Background-Layer (kein z-index-/Overflow-Trick):
     • GLOW-Linie (hinten): horizontaler Verlauf transparent→weiß(mittig)→transparent,
       an der Unterkante.
     • DUNKLE FILL-BOX (davor): deckt den Button bis auf die unterste VISIBLE_EDGE_HEIGHT
       ab → der weiche innere Glow wird abgeschnitten, sichtbar bleibt nur eine dünne,
       saubere Leuchtlinie.
     • TEXT (vorne): liegt als Element-Inhalt automatisch über dem Hintergrund.
   Kein Blur, kein Außen-Glow/-Schatten. Ruhe: schmal mittig · Hover: ~90%, nur horizontal.
   Justierbar über die --btn-* Variablen (siehe .theme-glass Block). */
.theme-glass .btn--primary {
  position: relative;
  border: 1px solid rgba(255,255,255,0.12);      /* Glas-Grundrand */
  border-radius: 8px;
  color: #fff;
  background-color: var(--btn-fill);             /* Grundfarbe (dunkel) */
  background-image:
    linear-gradient(var(--btn-fill), var(--btn-fill)),                                  /* FILL-Box (deckt oben ab) */
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,var(--btn-glow)) 50%, transparent 100%); /* GLOW-Linie */
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  /* WICHTIG: Positionierung an der BORDER-Box (nicht padding-box) → die Leuchtlinie
     liegt exakt auf der unteren Border-Kante, kein 1px-Versatz. Border = Schein. */
  background-origin: border-box;
  background-clip: border-box;
  background-size:
    100% calc(100% - var(--btn-edge)),           /* FILL lässt unten VISIBLE_EDGE_HEIGHT frei */
    var(--btn-glow-w-rest) 100%;                 /* GLOW-Breite (mittig) — Ruhezustand */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background-size .3s ease, border-color .3s ease;
}
/* Hover: leuchtende Unterkante breitet sich horizontal auf ~90% aus (weich) */
.theme-glass .btn--primary:hover {
  border-color: rgba(255,255,255,0.20);
  background-size:
    100% calc(100% - var(--btn-edge)),
    var(--btn-glow-w-hover) 100%;
}
.theme-glass .brand__mark { background: var(--accent-gradient); }

/* Profil-Avatar (oben rechts) → gleicher Glas-Look wie die Cards:
   Glas-Grund + Blur + dezenter Rand + diagonaler Eck-Glanz. "AV" bleibt weiß. */
.theme-glass .avatar {
  position: relative;
  color: #ffffff;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 1px var(--glass-shimmer), var(--glass-depth);
}
.theme-glass .avatar::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
      var(--corner-tl) 0%, transparent 28%, transparent 72%, var(--corner-br) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Fortschrittsbalken + aktive Sidebar-Leiste → Verlauf */
.theme-glass .status-bar > i,
.theme-glass .progress__bar { background: var(--accent-gradient); }
/* Aktiver Sidebar-Punkt: Balken bleibt Gradient (oben), Zeile aber NEUTRAL
   & etwas heller als der Sidebar-Grund → wirkt ausgewählt; Icon+Text weiß. */
.theme-glass .nav-item.is-active::before { background: var(--accent-gradient); }
.theme-glass .nav-item.is-active {
  background: var(--nav-active-bg);        /* neutral, dezent heller (justierbar) */
  color: #ffffff;
}
.theme-glass .nav-item.is-active .nav-item__icon { color: #ffffff; }

/* Marktuhr: blaue Elemente → Verlauf/Lila (grün + rot bleiben) */
.theme-glass .clock__now { background: linear-gradient(180deg, rgba(146,80,236,0.1), #9250ec, rgba(239,79,60,0.5)); }
.theme-glass .clock-bar.is-open-blue { background: var(--accent-gradient); box-shadow: 0 0 10px rgba(146,80,236,0.3); }

/* farbig hinterlegte Icon-KACHELN/-Boxen → dezente Lila→Orange-Verlauf-Tönung
   + heller Glyph. Zentral für alle Icon-in-Box-Elemente (identische Optik):
     .quick-tile__icon · .action-card__ico   → Dashboard
     .card__icon                             → Card-Header-Icons (Dashboard u.a.)
     .kpi-card__icon                         → Journal-KPI-Karten
     .join-card__icon                        → Trading Ideas (Telegram)
     .coming-soon__icon                      → Affiliate-Seiten (Coming Soon)
   NICHT: freistehende Icons ohne Box, Sidebar-/Header-Icons. */
.theme-glass .quick-tile__icon,
.theme-glass .action-card__ico,
.theme-glass .card__icon,
.theme-glass .kpi-card__icon,
.theme-glass .join-card__icon,
.theme-glass .coming-soon__icon {
  background: linear-gradient(135deg, rgba(127,68,244,0.24), rgba(239,79,60,0.18));
  border-color: rgba(146, 80, 236, 0.40);
  color: #d9c9ff;
}

/* Begrüßungs-Akzentwort: Verlauf-Text (Haupttitel bleibt weiß) */
.theme-glass .greeting span {
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* kleine Chips/Backgrounds, die var(--card) opak nutzen → leicht durchscheinend */
.theme-glass .icon-btn,
.theme-glass .badge,
.theme-glass .account__menu { background: rgba(255, 255, 255, 0.06); }
.theme-glass .badge--active { background: var(--accent-soft); }

/* =========================================================================
   LOGIN im Glas-Theme — neues Hintergrundbild + Glas-Card (scoped).
   ========================================================================= */
.theme-glass .login__bg {
  background: url("../wifi-money-background-purple-orange.webp") center/cover no-repeat;
  opacity: 1;                              /* Bild kommt vom Login-Layer selbst */
}
.theme-glass .login__overlay {
  background:
    radial-gradient(900px 500px at 70% 20%, var(--accent-glow), transparent 60%),
    linear-gradient(180deg, rgba(6,6,10,0.62), rgba(6,6,10,0.86));
}
/* Login-Card = Liquid Glass wie die App-Cards */
.theme-glass .login__card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  border: 0;                                /* Ring (::before) IST die Border → kein Versatz */
  box-shadow: inset 0 1px 1px var(--glass-shimmer), var(--glass-depth);
}
/* Border + diagonaler Eck-Glanz als EIN Ring, exakt auf der Kontur (wie bei .card) */
.theme-glass .login__card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--corner-tl) 0%, var(--glass-border) 28%, var(--glass-border) 72%, var(--corner-br) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}


/* =========================================================================
   FIX Sticky-Kursinhalt (lesson-basic-forex-1.html):
   Die rechte Spalte ist "card outline". Die zentrale Regel
   ".theme-glass .card { position: relative }" (0-2-0) überschrieb sonst
   ".outline { position: sticky }" (0-1-0). Mit höherer Spezifität (.card.outline)
   greift sticky verlässlich. (.card hat KEIN störendes overflow; Vorfahren auch nicht.)
   ========================================================================= */
.theme-glass .card.outline {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));   /* unter dem Glas-Header */
  align-self: start;                         /* nicht auf Zeilenhöhe strecken */
  /* Höhe/Flex/Innen-Scroll kommen aus der .outline-Regel (display:flex, max-height,
     .outline__scroll overflow-y:auto) — Card selbst scrollt nicht, Eck-Glanz bleibt. */
}
@media (max-width: 1000px) {
  /* gestapelt: kein sticky, normal im Fluss */
  .theme-glass .card.outline { position: static; }
}

/* =========================================================================
   ADMIN — dezentes "Admin-Panel"-Label im Header (Rest nutzt die App-Styles).
   ========================================================================= */
.admin-tag {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: var(--s-2);
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
}
.admin-tag svg { width: 15px; height: 15px; color: var(--accent); }
@media (max-width: 640px) { .admin-tag { display: none; } }   /* auf sehr schmalen Screens ausblenden */

/* =========================================================================
   ADMIN — kompakte Stats-/Kennzahlen-Cards (nur .stat-grid im Admin-Dashboard).
   Justierbar über --stat-pad-y (Höhe/vertikales Padding) und --stat-gap (Abstand).
   ========================================================================= */
.stat-grid {
  --stat-pad-y: 8px;    /* vertikales Padding der Karten (kleiner = flacher) */
  --stat-gap:   12px;   /* Abstand zwischen den Karten */
  gap: var(--stat-gap);
}
.stat-grid > .card {
  padding-top: var(--stat-pad-y);
  padding-bottom: var(--stat-pad-y);
  display: flex;
  flex-direction: column;
  justify-content: center;   /* Inhalt vertikal zentriert, wenig Leerraum */
}
/* Innenabstände straffen, damit die flacheren Karten sauber sitzen */
.stat-grid .card__head { margin-bottom: 0px; }
/* .stat__value ist ein <p> → hatte die große Browser-Standard-Marge (oben+unten,
   ~1em). Explizit stark reduziert (~ -64%) für kompakteren Sitz der Kennzahl. */
.stat-grid .stat__value { line-height: 1.1; margin: 10px 0; }
.stat-grid .stat__delta { margin-top: var(--s-1); }

/* =========================================================================
   ADMIN — CRUD-Ansicht (Liste + Formular-Panel + Badge + Toggle).
   Gemeinsame Klassen für alle Verwaltungs-Seiten (Announcements, Live Sessions,
   Pop-ups, Giveaways) → einmal pflegen, überall identisch.
   ========================================================================= */

/* Toolbar: Titel links + "Neu erstellen" rechts */
.crud-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6);
}

/* ---- Liste ---- */
.crud-list { display: flex; flex-direction: column; gap: var(--s-3); }
.crud-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); }
.crud-row__ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  display: grid; place-items: center; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.crud-row__ico svg { width: 19px; height: 19px; }
.crud-row__body { flex: 1; min-width: 0; }
.crud-row__title { font-size: 14.5px; font-weight: 600; margin: 0 0 2px; }
.crud-row__sub { font-size: 12.5px; color: var(--text-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crud-row__status { flex-shrink: 0; }
.crud-row__actions { display: flex; gap: var(--s-2); flex-shrink: 0; }
@media (max-width: 720px) {
  .crud-row { flex-wrap: wrap; }
  .crud-row__body { flex-basis: 100%; order: -1; }
}

/* ---- Status-Badge (Aktiv / Inaktiv) ---- */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-badge.is-active   { color: var(--green); background: var(--green-soft); border-color: rgba(34,197,94,0.35); }
.status-badge.is-active .dot   { background: var(--green); }
.status-badge.is-inactive { color: var(--text-faint); background: rgba(255,255,255,0.03); border-color: var(--border); }
.status-badge.is-inactive .dot { background: var(--text-faint); }

/* ---- Icon-Aktionen (Bearbeiten / Löschen) ---- */
.icon-action {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.04); color: var(--text-muted);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-action:hover { background: var(--card-hover); color: var(--text); border-color: var(--border-strong); }
.icon-action--danger:hover { color: var(--red); border-color: rgba(255,59,48,0.4); }
.icon-action svg { width: 16px; height: 16px; }

/* ---- Toggle-Switch (Aktiv/Inaktiv) ---- */
.switch { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; user-select: none; }
.switch input {
  appearance: none; -webkit-appearance: none;
  width: 40px; height: 22px; border-radius: var(--r-pill); flex-shrink: 0;
  background: rgba(255,255,255,0.10); border: 1px solid var(--border-strong);
  position: relative; cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.switch input::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .18s ease;
}
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { transform: translateX(18px); }
.switch__label { font-size: 13px; color: var(--text-muted); }

/* ---- Formular-Panel (Erstellen/Bearbeiten) ---- */
.form-panel { margin-bottom: var(--s-6); }
.form-panel[hidden] { display: none; }
.form-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-5); padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.form-panel__title { font-size: 16px; font-weight: 650; margin: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
.form-field { display: flex; flex-direction: column; }
.form-field--full { grid-column: 1 / -1; }
.form-label { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }

.form-input, .form-select, .form-textarea {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--text);
  background: #0c0c0f; border: 1px solid var(--border-strong); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input, .form-select { height: 44px; padding: 0 14px; }
.form-textarea { padding: 12px 14px; min-height: 92px; resize: vertical; line-height: 1.5; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-faint); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
/* native Date/Time-Picker im Dark-Look */
.form-input[type="date"], .form-input[type="time"] { color-scheme: dark; }
.form-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px;
}

/* Datei-Upload (Platzhalter, ohne echte Funktion) */
.form-file {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 10px;
  background: rgba(255,255,255,0.02); color: var(--text-muted); font-size: 13px; cursor: pointer;
}
.form-file:hover { border-color: var(--accent-line); color: var(--text); }
.form-file svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* Toggle-Feld im Formular (Label + Switch nebeneinander) */
.form-toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-4); }

.form-actions { display: flex; gap: var(--s-3); margin-top: var(--s-6); }

@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   ADMIN — Tabellen / Matrix (dunkler Glas-Stil, dezente Trennlinien).
   Wiederverwendbar für Academy-Stats, Support, Rollen-Matrix.
   ========================================================================= */
.table-wrap { width: 100%; overflow-x: auto; }         /* horizontal scrollbar auf Mobile */
.dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dtable th, .dtable td {
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
}
.dtable thead th {
  font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-faint); border-bottom: 1px solid var(--border);
}
.dtable tbody tr { transition: background .15s ease; }
.dtable tbody tr:hover { background: rgba(255,255,255,0.03); }
.dtable tbody tr:last-child td { border-bottom: none; }
.dtable td.num, .dtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable td.center, .dtable th.center { text-align: center; }
.dtable .t-title { font-weight: 600; color: var(--text); white-space: normal; }
.dtable .t-actions { display: flex; gap: var(--s-2); justify-content: flex-end; }

/* Mini-Fortschrittsbalken in Zellen (z.B. Abschlussquote / Ø-Sehdauer) */
.cell-bar { display: flex; align-items: center; gap: var(--s-3); min-width: 140px; }
.cell-bar__track { flex: 1; height: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,0.07); overflow: hidden; }
.cell-bar__fill { height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.cell-bar__val { font-size: 12.5px; color: var(--text-muted); min-width: 34px; text-align: right; }

/* Matrix: Häkchen/Kreuz-Zellen (Rolle × Berechtigung) */
.mx-yes { color: var(--green); }
.mx-no  { color: var(--text-faint); }
.mx-yes svg, .mx-no svg { width: 16px; height: 16px; }

/* Filter-/Kategorie-Chips */
.chip-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.chip {
  font-size: 12.5px; font-weight: 500; padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-muted);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { background: var(--card-hover); color: var(--text); }
.chip.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* Rollen-Badge (mehrere Farben zur Unterscheidung) */
.role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent);
  white-space: nowrap;
}
.role-badge.is-support { border-color: rgba(34,197,94,0.35); background: var(--green-soft); color: var(--green); }
.role-badge.is-content { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.12); color: #f5a623; }

/* Aktivitäts-/Änderungsprotokoll (Liste) */
.log-list { display: flex; flex-direction: column; }
.log-item {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) 0; border-top: 1px solid rgba(255,255,255,0.06);
}
.log-item:first-child { border-top: none; }
.log-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-glow); }
.log-item__body { flex: 1; min-width: 0; font-size: 13px; }
.log-item__body strong { color: var(--text); font-weight: 600; }
.log-item__time { font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }

/* Ticket-Status-Varianten (Support) — nutzen die .status-badge-Basis */
.status-badge.is-open     { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.status-badge.is-open .dot     { background: var(--accent); }
.status-badge.is-progress { color: #f5a623; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); }
.status-badge.is-progress .dot { background: #f5a623; }
.status-badge.is-solved   { color: var(--green); background: var(--green-soft); border-color: rgba(34,197,94,0.35); }
.status-badge.is-solved .dot   { background: var(--green); }

/* =========================================================================
   PROFIL-POPUP (Account-Dropdown) — gleicher Glas-Hintergrund/Blur wie die
   Cards (blickdicht/substanziell), ABER OHNE diagonalen Eck-Glanz.
   Grundrand bleibt zur sauberen Abgrenzung.
   ========================================================================= */
.theme-glass .account__menu {
  /* justierbar: --popup-bg (Deckkraft/blickdicht) · --popup-blur (Blur-Stärke) */
  --popup-bg:   rgba(18, 18, 26, 0.92);   /* kräftig & blickdicht (höher = undurchsichtiger) */
  --popup-blur: 60px;                     /* deutlich stärkerer Blur als die Cards */
  background: var(--popup-bg);
  -webkit-backdrop-filter: blur(var(--popup-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  backdrop-filter: blur(var(--popup-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 1px var(--glass-shimmer), var(--glass-depth);
}

/* =========================================================================
   REWARDS — Schwellen-Hinweis + MILESTONES (Badges nach Kategorien).
   Badges als CSS-Hexagone (konsistent mit den Status-Wappen), Glas-Design.
   ========================================================================= */
.rank-hint { font-size: 13px; color: var(--text-muted); text-align: center; margin: var(--s-4) 0 0; }
.rank-hint strong { color: var(--text); font-weight: 600; }

.ms-head { margin-top: var(--s-10); margin-bottom: var(--s-5); }
.ms-sub { font-size: 14px; color: var(--text-muted); margin: 0; }

/* Gesamt-Fortschritt */
.ms-overall { margin-bottom: var(--s-5); }
.ms-overall__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-3); }
.ms-overall__label { font-size: 14px; color: var(--text-muted); }
.ms-overall__label strong { color: var(--text); font-weight: 700; }
.ms-overall__pct { font-size: 15px; font-weight: 700; color: var(--accent); }

/* Kategorie-Block */
.ms-cat { margin-bottom: var(--s-5); }
.ms-cat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.ms-cat__name { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
.ms-cat__value { font-size: 14px; color: var(--text-muted); margin: 0; }
.ms-cat__value strong { color: var(--text); font-weight: 700; }
.ms-cat__count { font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.ms-cat__next { font-size: 12.5px; color: var(--text-muted); margin: var(--s-3) 0 0; }
.ms-cat__next strong { color: var(--text); font-weight: 600; }
.ms-xp {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
  color: var(--accent); border: 1px solid var(--accent-line); background: var(--accent-soft);
  padding: 1px 8px; border-radius: var(--r-pill);
}

/* Badge-Reihe */
.ms-badges { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.ms-badge {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-2);
  border: 1px solid var(--border); border-radius: 14px;
  background: rgba(255,255,255,0.025);
}
.ms-badge__hex {
  position: relative; width: 52px; height: 58px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--accent-gradient, linear-gradient(135deg, #7f3ffb, #f94e33));
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}
.ms-badge__hex > svg:first-child { width: 24px; height: 24px; }
.ms-badge__check {
  position: absolute; top: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: var(--green); border: 2px solid #12121a;
}
.ms-badge__check svg { width: 11px; height: 11px; }
.ms-badge__name { font-size: 13px; font-weight: 600; margin: 4px 0 0; }
.ms-badge__thresh { font-size: 12px; color: var(--text-muted); margin: 0; }

/* nicht erreicht → gedimmt + entfärbtes Badge */
.ms-badge.is-locked { opacity: .5; }
.ms-badge.is-locked .ms-badge__hex {
  background: linear-gradient(160deg, #2b2b34, #17171d);
  color: var(--text-faint);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
}
.ms-badge.is-unlocked { border-color: var(--accent-line); background: var(--accent-soft); }

@media (max-width: 760px) { .ms-badges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .ms-badges { grid-template-columns: repeat(2, 1fr); } }