/* Liberation Vision 2.0 — Phase 1: gemeinsame Grundlage
   Benannte Token-Aliase, Card-System, Button-System, Scroll-Eye-Hero, Header-Feinschliff.
   Alle Werte sind Aliase auf die bereits blueprint-verifizierten Tokens aus style.css:1-18 —
   keine neuen Farben, nur benannte Zugriffspunkte für Konsistenz. */

:root {
  --lp-primary-gold: var(--gold);
  --lp-bright-gold: #ffe58f;
  --lp-soft-gold: rgba(243, 199, 91, 0.16);
  --lp-dark-gold: var(--gold-2);
  --lp-bg-black: var(--dark);
  --lp-surface-black: var(--panel);
  --lp-border-gold: var(--line);
  --lp-text-cream: var(--text);
  --lp-text-muted: var(--muted);

  --lp-card-radius: var(--radius-lg);
  --lp-card-radius-lg: var(--radius-xl);
  --lp-card-border: 1px solid var(--lp-border-gold);
  --lp-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.26);
  --lp-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 207, 82, 0.055));
}

/* ===== Card-System: eine gemeinsame Basis für jede Karte auf der Plattform =====
   LP-Karte, Feed-Karte, Trend-Karte, Creator-Karte, Produkt-Karte, Notification-Karte,
   Wallet-/Analytics-/Upload-Karte (Phase 2) — alle erben von .lc-card. */
.lc-card {
  border: var(--lp-card-border);
  border-radius: var(--lp-card-radius);
  background: var(--lp-card-bg);
  box-shadow: var(--lp-card-shadow);
}

.lc-card-lg {
  border-radius: var(--lp-card-radius-lg);
  box-shadow: var(--shadow);
}

/* Bestehende Karten-Familien auf die gemeinsame Basis mappen, ohne ihre Layout-Eigenschaften
   (Grid, Padding, Innenaufbau) anzufassen. */
.dash-stat,
.dash-action-card,
.dash-widget,
.dash-feed-panel,
.creator-dir-card,
.market-card,
.what-card, .compare-card, .reward-card, .community-card, .short-card, .mini-creator-card, .feature-card,
.db-post-card,
.today-card, .trending-short {
  border: var(--lp-card-border);
  border-radius: var(--lp-card-radius);
  background: var(--lp-card-bg);
}

/* ===== Button-System (Dokumentation über Klassen hinweg) =====
   btn-gold      = primäre Aktion, Gold-Verlauf, dunkler Text
   btn-glass     = sekundäre Aktion, transparente Glasfläche, heller Text
   btn-glow      = Hervorhebung/Einladung (z. B. "Ask Liberation"), Gold-Rand mit Leuchten
   Alle drei Varianten existieren bereits in style.css und werden unverändert weiterverwendet;
   dieser Block ergänzt nur den fokus-sichtbaren Zustand, der bisher fehlte. */
.btn:focus-visible,
.btn-gold:focus-visible,
.btn-glass:focus-visible,
.btn-glow:focus-visible {
  outline: 2px solid var(--lp-bright-gold);
  outline-offset: 2px;
}

/* ===== Header-Feinschliff: ca. 80px hoch, kompakt, ruhig — Blueprint 01 ===== */
.nav-shell {
  min-height: 78px;
}

.brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

.brand-copy strong {
  font-size: 1.12rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand-copy span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.main-nav a {
  padding: 10px 12px;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== Sidebar-System: ein gemeinsamer Widget-Rahmen für alle Sidebar-Karten ===== */
.dash-widget,
.dash-sidebar .lc-card {
  padding: 20px;
}

.dash-widget h4,
.lp-widget-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--lp-text-cream);
  font-size: 1.02rem;
}

/* ===== Icon-System: einheitliche Größe/Farbe für die neuen Inline-SVG-Icons ===== */
.lc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--lp-bright-gold);
}

.lc-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* Bestehende Icon-Slots (Statistik/Aktion/Composer) behalten ihre Slot-Größe;
   das SVG darin bleibt ein festes, kleines Glyph — nie den Slot füllen lassen,
   sonst bläht sich das SVG auf seine Intrinsic-Größe auf. */
.dash-stat-icon.lc-icon {
  width: 36px;
  height: 36px;
}

.dash-action-icon.lc-icon {
  width: 38px;
  height: 38px;
}

.composer-type-icon.lc-icon {
  width: 30px;
  height: 30px;
}

.dash-stat-icon.lc-icon svg,
.dash-action-icon.lc-icon svg,
.composer-type-icon.lc-icon svg {
  width: 18px;
  height: 18px;
}

.market-search-icon.lc-icon {
  width: 18px;
  height: 18px;
}

.dash-panel-head h3 .lc-icon,
.dash-widget h4 .lc-icon {
  width: 18px;
  height: 18px;
}

.lc-icon.lc-icon-fill svg {
  fill: currentColor;
  stroke: none;
}

/* ===== Scroll Eye System =====
   Der Hero bleibt beim Scrollen stehen (sticky), die restliche Seite fährt darüber.
   --eye-progress (0..1) kommt aus liberation-scroll-eye-v52.js.
   Deckkraft endet bewusst nie bei 0 (Phase 4: Auge wird Atmosphäre, verschwindet nicht),
   der hero-overlay mit den Lichtstrahlen bleibt unangetastet. */
.hero-section.liberation-home-v48 {
  --eye-progress: 0;
  position: sticky;
  top: 0;
  z-index: 0;
}

.liberation-home-v48 .hero-bg {
  opacity: calc(0.97 - var(--eye-progress) * 0.55);
  filter: brightness(1) contrast(1.04) saturate(1.05) blur(calc(var(--eye-progress) * 12px));
  will-change: opacity, filter;
}

.liberation-home-v48 .hero-content {
  opacity: calc(1 - var(--eye-progress) * 1.35);
}

/* Inhalte fahren über den Hero */
body.route-mode main > section.is-route-visible:not(.hero-section) {
  position: relative;
  z-index: 1;
}

/* Dashboard-Fläche leicht durchlässig, damit das verbleibende, verschwommene
   Augen-Leuchten beim Eintritt in die Plattform durchschimmert */
.home-digest-section {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 210, 92, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(10, 7, 4, 0.9), rgba(15, 11, 7, 0.97));
}

@media (prefers-reduced-motion: reduce) {
  .hero-section.liberation-home-v48 {
    position: relative;
  }
}

/* ===== Inline-Kommentare unter Beiträgen (Feed + Dashboard) =====
   Zeigt die ersten 3 Kommentare direkt, der Rest liegt hinter "+N weitere anzeigen". */
.db-post-comments {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 212, 99, 0.12);
}

.db-comment-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.db-comment-list-extra {
  margin-top: 10px;
}

.db-comment-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.real-avatar.tiny {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 12px;
  font-size: 0.72rem;
  background-size: cover;
  background-position: center;
}

.db-comment-item > div {
  min-width: 0;
  flex: 1;
}

.db-comment-item strong {
  margin-right: 6px;
  color: var(--lp-text-cream);
  font-size: 0.86rem;
}

.db-comment-item span {
  color: rgba(255, 246, 223, 0.78);
  font-size: 0.86rem;
  line-height: 1.4;
}

.db-comment-item small {
  display: block;
  margin-top: 2px;
  color: var(--lp-text-muted);
  font-size: 0.72rem;
}

.db-comments-more {
  display: inline-block;
  margin-top: 10px;
  border: none;
  background: none;
  color: var(--lp-primary-gold);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
}

.db-comments-more:hover {
  color: var(--lp-bright-gold);
}

/* Im Dashboard-Feed (flex + order-System aus liberation-dashboard-v53.css) ans Ende stellen */
.dash-feed-list .db-post-comments {
  order: 5;
}