@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg-black: #f8fafc;
  --bg-deep: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-surface: #f1f5f9;
  --border-subtle: #e2e8f0;
  --border-active: #cbd5e1;
  --border-glow: rgba(26, 115, 232, 0.35);

  --text-white: #202124;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-muted: #64748b;

  --accent-blue: #1a73e8;
  --accent-blue-light: #4285f4;
  --accent-blue-glow: rgba(26, 115, 232, 0.16);

  --accent-emerald: #1e8e3e;
  --accent-emerald-glow: rgba(30, 142, 62, 0.16);

  --accent-gold: #f9ab00;
  --accent-gold-glow: rgba(249, 171, 0, 0.18);

  --accent-purple: #9334e6;
  --accent-purple-glow: rgba(147, 52, 230, 0.16);

  --accent-red: #ea4335;

  --font-heading: 'Plus Jakarta Sans', 'Space Grotesk', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --sidebar-width: 260px;
  --topbar-height: 64px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-black);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
}

/* Background Modern Tech Glow Effect (Khron X style) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 15% 0%, rgba(37, 99, 235, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(79, 70, 229, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ===================================================================== */
/* 1. APP ENTERPRISE SHELL: FIXED SIDEBAR + TOPBAR HUD                   */
/* ===================================================================== */
.platform-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Left Fixed Sidebar */
.platform-sidebar {
  width: var(--sidebar-width);
  background: rgba(8, 8, 12, 0.95);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-brand {
  height: var(--topbar-height);
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-white);
  letter-spacing: 0.05em;
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: #60a5fa;
  letter-spacing: 0.08em;
}

/* Sidebar Nav */
.sidebar-nav {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
}

.nav-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  padding: 14px 12px 6px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-white);
}

.nav-item.active {
  background: rgba(0, 102, 255, 0.12);
  border-color: var(--border-glow);
  color: var(--text-white);
}

.nav-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}

.nav-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.nav-badge.live-pulse {
  background: rgba(0, 102, 255, 0.2);
  color: #60a5fa;
  box-shadow: 0 0 8px rgba(0, 102, 255, 0.4);
}

.nav-badge.hot-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.nav-badge.gold-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.nav-badge.red-badge {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Sidebar User Footer */
.sidebar-user-footer {
  padding: 12px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.4);
}

.user-mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-mini-card:hover {
  border-color: var(--border-active);
  background: var(--bg-card-hover);
}

.user-avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--accent-blue);
  flex-shrink: 0;
}

.user-info-mini {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.user-name-mini {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-rank-mini {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #2563eb;
}

.user-switch-pill {
  font-size: 13px;
  color: var(--text-muted);
}

/* ===================================================================== */
/* 2. MAIN APPLICATION WRAPPER & TOPBAR HUD                              */
/* ===================================================================== */
.platform-main-wrapper {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar-hud {
  height: var(--topbar-height);
  background: rgba(5, 5, 8, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mobile-toggle-btn {
  display: none;
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-white);
  font-size: 18px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.topbar-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 13px;
}

.bread-root {
  color: var(--text-muted);
}

.bread-sep {
  color: rgba(255, 255, 255, 0.2);
}

.bread-current {
  color: var(--text-white);
  font-weight: 700;
}

/* Topbar Right HUD */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hud-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 5px 12px;
  border-radius: 20px;
}

.rank-pill {
  color: #60a5fa;
  background: rgba(0, 102, 255, 0.12);
  border-color: rgba(0, 102, 255, 0.35);
  font-family: var(--font-heading);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.xp-hud-container {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 130px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 5px 12px;
}

.xp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.xp-current-num {
  color: #93c5fd;
  font-weight: 700;
}

.xp-bar-wrapper {
  height: 5px;
  background: #191924;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0066ff, #60a5fa);
  box-shadow: 0 0 10px rgba(0, 102, 255, 0.7);
  border-radius: 10px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.streak-pill {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.08);
  border-color: rgba(251, 146, 60, 0.25);
}

.coins-pill {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}

.daily-missions-btn {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #c4b5fd;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.daily-missions-btn:hover {
  background: rgba(139, 92, 246, 0.22);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-menu-btn:hover {
  border-color: var(--border-active);
  background: var(--bg-card-hover);
}

.user-avatar-img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--accent-blue);
}

.user-menu-name {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-white);
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Platform Content Container */
.platform-content {
  padding: 28px 32px 80px;
  flex: 1;
  position: relative;
}

.view-section {
  display: none;
}
.view-section.active {
  display: block;
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Universal Button Styles */
.btn-primary {
  background: var(--accent-blue);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-primary:hover {
  background: #1a73e8;
  box-shadow: 0 0 18px var(--accent-blue-glow);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--accent-emerald);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-success:hover {
  background: #059669;
  box-shadow: 0 0 18px var(--accent-emerald-glow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-deep);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-secondary:hover {
  color: var(--text-white);
  border-color: var(--border-active);
  background: rgba(255, 255, 255, 0.04);
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  color: #1d4ed8;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* ===================================================================== */
/* VIEW 01: DASHBOARD DO ALUNO                                           */
/* ===================================================================== */
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-hero {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(14, 14, 20, 0.9) 0%, rgba(6, 6, 9, 0.98) 100%);
  padding: 36px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.dashboard-hero-text {
  max-width: 780px;
}

.dashboard-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-white);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.dashboard-subtitle {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Continue Watching Card */
.continue-watching-card {
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background-image: linear-gradient(90deg, rgba(0, 102, 255, 0.05) 0%, transparent 100%);
}

.continue-left {
  flex: 1;
}

.continue-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #60a5fa;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.continue-lesson-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 4px;
}

.continue-course-title {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.continue-progress-row {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 500px;
}

.continue-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #60a5fa;
}

/* 6 Metrics Grid */
.study-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.metric-card:hover {
  border-color: var(--border-active);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}

.metric-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.metric-icon {
  font-size: 18px;
}

.metric-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: 4px;
}

.metric-footer {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Dual Analytics Row */
.dashboard-analytics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.analytics-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.card-section-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Weekly Chart Bars */
.weekly-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 170px;
  padding: 16px 10px 0;
  gap: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.chart-bar-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar-pillar {
  width: 100%;
  max-width: 38px;
  background: rgba(0, 102, 255, 0.15);
  border: 1px solid rgba(0, 102, 255, 0.4);
  border-radius: 6px 6px 0 0;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.chart-bar-pillar:hover {
  background: rgba(0, 102, 255, 0.35);
  border-color: #60a5fa;
}

.chart-bar-val {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #93c5fd;
  white-space: nowrap;
  font-weight: 700;
}

.chart-bar-day {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* Technical Proficiency */
.proficiency-group {
  margin-bottom: 16px;
}

.proficiency-group:last-child {
  margin-bottom: 0;
}

.prof-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-family: var(--font-heading);
}

.prof-label-row strong {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

.dashboard-missions-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* ===================================================================== */
/* VIEW 02: CATÁLOGO & MARKETPLACE (HOTMART STYLE)                       */
/* ===================================================================== */
.catalog-header-wrap {
  margin-bottom: 32px;
}

.catalog-headline {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 800;
  color: var(--text-white);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.catalog-headline span {
  background: linear-gradient(90deg, #60a5fa, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.catalog-subhead {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 820px;
  margin-bottom: 24px;
}

.catalog-controls-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.catalog-search-wrap {
  position: relative;
  max-width: 600px;
}

.catalog-search-wrap .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--text-muted);
}

.catalog-search-wrap input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px 12px 44px;
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: 13.5px;
  outline: none;
  transition: all 0.2s;
}

.catalog-search-wrap input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 14px var(--accent-blue-glow);
}

.catalog-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 7px 14px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  color: var(--text-white);
  border-color: var(--border-active);
}

.filter-btn.active {
  background: rgba(0, 102, 255, 0.15);
  border-color: var(--accent-blue);
  color: var(--text-white);
}

/* Course Grid & Cards */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.course-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
}

.course-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-active);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}

.course-thumb-wrap {
  position: relative;
  width: 100%;
  height: 185px;
  overflow: hidden;
  background: #000;
}

.course-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.course-card:hover .course-thumb-img {
  transform: scale(1.04);
}

.course-badge-top {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fbbf24;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
}

.course-enrolled-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(16, 185, 129, 0.9);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.course-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.course-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.course-rating {
  color: #fbbf24;
  font-weight: 600;
}

.course-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.3;
  margin-bottom: 6px;
}

.course-card-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-instructor-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.instructor-avatar-mini {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-active);
}

.instructor-name-mini {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.course-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.course-price-wrap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.course-installments {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-white);
}

.course-cash-price {
  font-size: 11.5px;
  color: var(--text-muted);
}

.course-card-actions {
  display: flex;
  gap: 8px;
}

/* ===================================================================== */
/* VIEW 03: SALA DE AULA IMERSIVA (HOTMART CLUB PRO + X.AI)              */
/* ===================================================================== */
.classroom-container {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  min-height: calc(100vh - 160px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.classroom-container.cinema-mode {
  grid-template-columns: 0 1fr;
  gap: 0;
}

.classroom-container.cinema-mode .classroom-sidebar {
  display: none;
}

.classroom-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: fit-content;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  position: sticky;
  top: 85px;
}

.sidebar-course-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
}

.back-to-catalog {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  transition: color 0.2s;
}

.back-to-catalog:hover {
  color: var(--text-white);
}

.sidebar-course-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.3;
  margin-bottom: 10px;
}

.sidebar-progress-box {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}

.sidebar-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.modules-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-group {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-deep);
}

.module-header {
  padding: 10px 12px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  user-select: none;
}

.module-lessons-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
}

.lesson-item {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.15s ease;
}

.lesson-item:last-child {
  border-bottom: none;
}

.lesson-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-white);
}

.lesson-item.active {
  background: rgba(0, 102, 255, 0.15);
  color: #fff;
  border-left: 3px solid var(--accent-blue);
  font-weight: 600;
}

.lesson-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.lesson-status-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.lesson-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lesson-xp-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #93c5fd;
  background: rgba(0, 102, 255, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Classroom Main Area */
.classroom-main {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lesson-top-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  flex-wrap: wrap;
  gap: 16px;
}

.lesson-title-headline {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: 4px;
}

.lesson-subtitle-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.lesson-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lesson-prev-next-btns {
  display: flex;
  gap: 6px;
}

/* Star Rating & Theater Mode Bar */
.lesson-rating-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12.5px;
}

.rating-prompt {
  color: var(--text-secondary);
}

.star-rating-widget {
  display: inline-flex;
  gap: 4px;
  cursor: pointer;
}

.star-item {
  color: #3f3f50;
  font-size: 17px;
  transition: color 0.15s;
}

.star-item.active,
.star-item:hover,
.star-item.hovered {
  color: #fbbf24;
}

.rating-avg-text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

.theater-mode-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.theater-mode-btn:hover {
  color: var(--text-white);
  border-color: var(--border-active);
  background: rgba(255, 255, 255, 0.04);
}

/* Classroom Tabs Bar */
.classroom-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-deep);
  padding: 0 20px;
  overflow-x: auto;
}

.tab-btn {
  padding: 12px 18px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text-white);
}

.tab-btn.active {
  color: var(--text-white);
  border-bottom-color: var(--accent-blue);
  background: rgba(255, 255, 255, 0.02);
}

.tab-content {
  padding: 24px;
  flex: 1;
}

.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

/* Video Player Wrapper */
.video-wrapper {
  position: relative;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  border: 1px solid var(--border-subtle);
}

.custom-video-element {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
}

#videoCanvasFallback {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: none;
  background: #050508;
}

.video-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(8, 8, 12, 0.95);
  border-top: 1px solid var(--border-subtle);
}

.video-controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vid-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
}

.vid-btn:hover {
  color: var(--accent-blue-light);
  background: rgba(255, 255, 255, 0.05);
}

.time-display {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-secondary);
}

.video-chapters-box {
  margin-top: 18px;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

.chapters-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.chapter-pills-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chapter-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.chapter-pill:hover {
  color: var(--text-white);
  border-color: var(--accent-blue);
  background: rgba(0, 102, 255, 0.1);
}

/* Reading Tab */
.reading-container {
  max-width: 900px;
  margin: 0 auto;
}

.reading-meta-card {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.reading-meta-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reading-summary-text {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.markdown-body-custom {
  font-size: 14.5px;
  line-height: 1.7;
  color: #d4d4d8;
}

.markdown-body-custom h1 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-white);
  margin: 24px 0 12px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}

.markdown-body-custom h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-white);
  margin: 22px 0 10px;
}

.markdown-body-custom h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: #e4e4e7;
  margin: 16px 0 8px;
}

.markdown-body-custom p {
  margin-bottom: 14px;
}

.markdown-body-custom ul, .markdown-body-custom ol {
  margin-bottom: 14px;
  padding-left: 20px;
}

.markdown-body-custom li {
  margin-bottom: 6px;
}

.code-block-wrapper {
  position: relative;
  margin-bottom: 18px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.code-block-header {
  background: #101018;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.copy-code-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.copy-code-btn:hover {
  color: #fff;
  border-color: var(--accent-blue);
}

.markdown-body-custom pre {
  background: #060609;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #a5f3fc;
  margin: 0;
}

.markdown-body-custom code {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  color: #93c5fd;
}

/* Quiz Tab */
.quiz-container {
  max-width: 860px;
  margin: 0 auto;
}

.quiz-header-card {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}

.quiz-badge-award {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
  text-align: right;
}

.quiz-question-card {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 18px;
  transition: border-color 0.2s;
}

.quiz-q-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.quiz-q-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #60a5fa;
  background: rgba(0, 102, 255, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
}

.quiz-q-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.4;
}

.quiz-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-option-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 13px;
  color: var(--text-primary);
}

.quiz-option-label:hover {
  border-color: var(--border-active);
  background: var(--bg-card-hover);
}

.quiz-option-label.selected {
  border-color: var(--accent-blue);
  background: rgba(0, 102, 255, 0.1);
}

.quiz-option-label.correct {
  border-color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.quiz-option-label.incorrect {
  border-color: var(--accent-red);
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.quiz-actions-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.quiz-feedback-box {
  background: var(--bg-deep);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 20px;
}

/* Forum Tab */
.forum-container {
  max-width: 900px;
  margin: 0 auto;
}

.forum-new-comment-card {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 24px;
}

.forum-textarea {
  width: 100%;
  height: 90px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}

.forum-textarea:focus {
  border-color: var(--accent-blue);
}

.forum-threads-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.forum-comment-card {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.forum-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forum-comment-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.forum-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.forum-comment-name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-white);
}

.instructor-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(0, 102, 255, 0.3), rgba(245, 158, 11, 0.3));
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fbbf24;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.student-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.forum-comment-body {
  font-size: 13.5px;
  color: #d1d5db;
  line-height: 1.5;
}

.forum-comment-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.comment-like-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.comment-like-btn:hover {
  border-color: var(--accent-blue);
  color: #60a5fa;
}

/* Materials & Notes Layout */
.materials-and-notes-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.materials-section, .notes-section {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px;
}

.materials-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.material-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s;
}

.material-card:hover {
  border-color: var(--border-active);
}

.material-top-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.file-type-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(0, 102, 255, 0.15);
  border: 1px solid rgba(0, 102, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: #60a5fa;
  flex-shrink: 0;
  text-transform: uppercase;
}

.file-type-icon.py { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.file-type-icon.json { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.file-type-icon.md { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.file-type-icon.csv { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.file-type-icon.sh { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.material-details h4 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 2px;
}

.material-details p {
  font-size: 12px;
  color: var(--text-secondary);
}

.material-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.file-size-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.notes-textarea {
  width: 100%;
  height: 250px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}

.notes-textarea:focus {
  border-color: var(--accent-blue);
}

/* ===================================================================== */
/* VIEW 04: ASSINATURAS, PLANOS & CHECKOUT STRIPE                        */
/* ===================================================================== */
.checkout-view-container {
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: 60px;
}

.checkout-header-hero {
  text-align: center;
  margin-bottom: 28px;
}

.checkout-hero-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  margin-top: 10px;
  letter-spacing: -0.03em;
}

.checkout-hero-sub {
  color: #475569;
  font-size: 15px;
  max-width: 680px;
  margin: 8px auto 0;
  line-height: 1.6;
}

/* 2. Interactive Goal Guide */
.checkout-goal-guide-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 26px 28px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  margin-bottom: 28px;
}

.goal-guide-header {
  margin-bottom: 18px;
}

.goal-guide-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.goal-guide-sub {
  font-size: 13.5px;
  color: #64748b;
  margin-top: 4px;
}

.goal-selector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.goal-choice-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  transition: all 0.22s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goal-choice-card:hover {
  transform: translateY(-3px);
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}

.goal-choice-card.selected {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 2px #2563eb, 0 8px 24px rgba(37, 99, 235, 0.12);
}

.goal-choice-card.featured {
  border-color: #93c5fd;
  background: #f0f7ff;
}

.goal-choice-card.featured.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px #2563eb;
}

.goal-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
  margin-bottom: 10px;
  width: fit-content;
}

.goal-choice-card h4 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  line-height: 1.35;
}

.goal-choice-card p {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 14px;
  flex-grow: 1;
}

.goal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  font-size: 11.5px;
  color: #475569;
}

.goal-price-pill {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  background: #e2e8f0;
  color: #0f172a;
  padding: 2px 8px;
  border-radius: 6px;
}

/* 3. Navigation Modes Bar */
.checkout-modes-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.checkout-modes-tabs {
  display: inline-flex;
  background: #f1f5f9;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  gap: 6px;
  flex-wrap: wrap;
}

.checkout-mode-btn {
  background: transparent;
  border: none;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.checkout-mode-btn:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.7);
}

.checkout-mode-btn.active {
  background: #2563eb;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

/* 4. Subscriptions Grid */
.subscription-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 36px;
}

.sub-plan-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.sub-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.sub-plan-card.featured {
  border: 2px solid #2563eb;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.12);
}

.sub-plan-card.selected {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3), 0 12px 36px rgba(37, 99, 235, 0.15);
}

.sub-plan-ribbon {
  position: absolute;
  top: -13px;
  right: 28px;
  background: #2563eb;
  color: #ffffff !important;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

.sub-plan-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.sub-plan-badge.featured {
  color: #2563eb;
}

.sub-plan-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.sub-plan-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 20px;
}

.sub-plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.sub-plan-price-row .price-val {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 800;
  color: #0f172a;
}

.sub-plan-price-row .price-period {
  font-size: 15px;
  color: #64748b;
}

.sub-plan-installments {
  font-size: 13px;
  color: #166534;
  font-weight: 600;
  margin-bottom: 24px;
  background: #dcfce7;
  padding: 4px 10px;
  border-radius: 6px;
  width: fit-content;
}

.sub-plan-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.sub-plan-benefits li {
  font-size: 13.5px;
  color: #334155;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.sub-plan-benefits li i {
  color: #16a34a;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.btn-select-plan {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f1f5f9;
  color: #0f172a;
  border: 1.5px solid #cbd5e1;
}

.btn-select-plan:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.btn-select-plan.primary {
  background: #2563eb;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.btn-select-plan.primary:hover {
  background: #1d4ed8;
}

/* 5. Courses Showcase Grid */
.checkout-courses-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 36px;
}

.showcase-course-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.showcase-course-card:hover {
  transform: translateY(-4px);
  border-color: #3b82f6;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
}

.showcase-course-card.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px #2563eb, 0 8px 24px rgba(37, 99, 235, 0.15);
}

.showcase-card-img-wrap {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: #0f172a;
}

.showcase-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.showcase-course-card:hover .showcase-card-img {
  transform: scale(1.03);
}

.showcase-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff !important;
  padding: 4px 9px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
}

.showcase-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.showcase-card-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.35;
}

.showcase-card-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}

.showcase-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #475569;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 14px;
}

.showcase-card-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.showcase-price-main {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}

.showcase-price-installments {
  font-size: 11.5px;
  color: #166534;
  font-weight: 600;
}

.btn-select-course-card {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #eff6ff;
  color: #2563eb;
  border: 1.5px solid #bfdbfe;
}

.btn-select-course-card:hover {
  background: #2563eb;
  color: #ffffff !important;
  border-color: #2563eb;
}

.showcase-course-card.selected .btn-select-course-card {
  background: #2563eb;
  color: #ffffff !important;
  border-color: #2563eb;
}

/* 5.1 Persona Filter Chips */
.courses-persona-filter-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.filter-persona-chip {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.filter-persona-chip:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
}

.filter-persona-chip.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}

/* 5.2 Track Bundles Showcase Grid */
.checkout-tracks-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

.track-bundle-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  position: relative;
}

.track-bundle-card:hover {
  transform: translateY(-4px);
  border-color: #3b82f6;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.12);
}

.track-bundle-card.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px #2563eb, 0 12px 30px rgba(37, 99, 235, 0.16);
}

.track-bundle-card.featured {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

.track-bundle-header {
  padding: 24px 22px 18px;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}

.track-bundle-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.track-bundle-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.track-bundle-discount-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.track-bundle-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 8px;
}

.track-bundle-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.track-bundle-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.track-included-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.track-included-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-grow: 1;
}

.track-included-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.4;
}

.track-included-item i {
  color: #2563eb;
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 2px;
}

.track-bundle-price-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.track-bundle-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}

.track-bundle-original-price {
  font-size: 12.5px;
  color: #94a3b8;
  text-decoration: line-through;
}

.track-bundle-price-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
}

.track-bundle-installments {
  font-size: 12px;
  color: #166534;
  font-weight: 700;
}

.btn-select-track-card {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #2563eb;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.btn-select-track-card:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.track-bundle-card.selected .btn-select-track-card {
  background: #1e40af;
  box-shadow: 0 0 0 2px #bfdbfe;
}

/* 6. Comparison Table */
.checkout-comparison-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  margin-bottom: 32px;
}

.comparison-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comparison-table-wrapper {
  overflow-x: auto;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
}

.comparison-table th {
  padding: 14px 18px;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
  border-bottom: 2px solid #e2e8f0;
  font-family: var(--font-heading);
}

.comparison-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

.comparison-table tr:hover td {
  background: #fbfcfe;
}

.comparison-table .col-highlight {
  background: #f8faff;
  font-weight: 600;
  color: #1e40af;
  border-left: 1px solid #e0f2fe;
  border-right: 1px solid #e0f2fe;
}

.icon-check {
  color: #16a34a;
  font-size: 18px;
  vertical-align: middle;
  margin-right: 4px;
}

.icon-cross {
  color: #94a3b8;
  font-size: 18px;
  vertical-align: middle;
  margin-right: 4px;
}

/* 7. Payment Form & Summary Section */
.checkout-dual-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
}

.checkout-form-card, .checkout-summary-card, .invoices-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

/* Selected Product Preview Banner */
.selected-product-banner {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
  border: 1.5px solid #93c5fd;
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06);
  gap: 16px;
}

.sel-prod-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: #1d4ed8;
  background: #dbeafe;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-bottom: 6px;
}

.sel-prod-left h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.sel-prod-left p {
  font-size: 13px;
  color: #475569;
  margin: 0;
  line-height: 1.45;
}

.sel-prod-price {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: #2563eb;
  text-align: right;
}

.sel-prod-hint {
  font-size: 11.5px;
  color: #15803d;
  font-weight: 600;
  display: block;
  text-align: right;
  white-space: nowrap;
}

.checkout-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.input-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-field-group label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.input-field-group input, .input-field-group select {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 11px 14px;
  color: #0f172a;
  font-family: var(--font-body);
  font-size: 13.5px;
  outline: none;
  transition: all 0.2s ease;
}

.input-field-group input:focus, .input-field-group select:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.checkout-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.pay-option {
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  transition: all 0.2s ease;
}

.pay-option:hover {
  border-color: #94a3b8;
  background: #ffffff;
}

.pay-option.selected {
  border-color: #2563eb;
  background: #eff6ff;
}

.pay-option-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-bump-box {
  background: #fffbeb;
  border: 1.5px dashed #f59e0b;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 20px 0;
}

.order-bump-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.order-bump-input {
  margin-top: 3px;
  accent-color: #d97706;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.order-bump-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: #b45309;
  letter-spacing: 0.05em;
  display: block;
}

.coupon-box-wrapper {
  margin-top: 18px;
}

.coupon-input-row {
  display: flex;
  gap: 8px;
}

.coupon-input-row input {
  flex: 1;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 14px;
  color: #0f172a;
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  text-transform: uppercase;
}

.coupon-input-row input:focus {
  border-color: #2563eb;
  background: #ffffff;
}

.coupon-hint-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: #64748b;
  margin-top: 6px;
}

.btn-text-quick-coupon {
  background: none;
  border: none;
  color: #2563eb;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.btn-text-quick-coupon:hover {
  color: #1d4ed8;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #475569;
  margin-bottom: 12px;
}

.summary-line strong {
  font-family: var(--font-mono);
  color: #0f172a;
  font-size: 15px;
}

.summary-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 16px 0;
}

.total-line {
  margin-bottom: 4px;
}

.installments-hint {
  font-size: 12px;
  color: #166534;
  font-weight: 600;
  text-align: right;
}

.security-badges-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #64748b;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.security-badges-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.invoices-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invoice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
}

/* ===================================================================== */
/* VIEW 05: LOJA $KHRON                                                  */
/* ===================================================================== */
.store-container {
  max-width: 1200px;
  margin: 0 auto;
}

.store-header-banner {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 32px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 24px;
}

.store-balance-card {
  background: var(--bg-deep);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  text-align: right;
  min-width: 220px;
}

.store-balance-num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 800;
  color: #fbbf24;
  margin: 4px 0;
}

.store-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.store-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s;
}

.store-item-card:hover {
  border-color: var(--border-active);
  transform: translateY(-2px);
}

.store-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.store-item-icon {
  font-size: 32px;
}

.store-item-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.store-item-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 6px;
}

.store-item-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 18px;
}

.store-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.store-item-cost {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: #fbbf24;
}

.redemptions-history-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.redemptions-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.voucher-card {
  background: var(--bg-deep);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.voucher-code {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: #60a5fa;
  letter-spacing: 0.1em;
}

/* ===================================================================== */
/* VIEW 06: CONQUISTAS & PATENTES                                        */
/* ===================================================================== */
.gamification-hub-grid {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr;
  gap: 24px;
  max-width: 1300px;
  margin: 0 auto;
}

.gamification-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.achievement-card {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
}

.achievement-card.locked {
  opacity: 0.4;
  filter: grayscale(80%);
}

.achievement-card.unlocked {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(10, 10, 14, 1) 100%);
}

.achievement-icon {
  font-size: 26px;
  flex-shrink: 0;
}

.achievement-info h5 {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 2px;
}

.achievement-info p {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.achievement-reward {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #fbbf24;
  margin-top: 3px;
  font-weight: 600;
}

/* Military Ranks Tree */
.military-ranks-tree {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rank-node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.2s;
}

.rank-node.unlocked {
  border-color: rgba(0, 102, 255, 0.35);
}

.rank-node.current {
  border-color: #60a5fa;
  background: rgba(0, 102, 255, 0.12);
  box-shadow: 0 0 16px rgba(0, 102, 255, 0.2);
}

.rank-node-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.rank-node.current .rank-node-badge {
  background: var(--accent-blue);
  color: #fff;
}

.rank-node-info {
  display: flex;
  flex-direction: column;
}

.rank-node-info strong {
  font-family: var(--font-heading);
  font-size: 13.5px;
  color: var(--text-white);
}

.rank-node-info span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Daily Missions List */
.daily-missions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mission-row {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mission-row.done {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.04);
}

.mission-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.mission-rewards {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #a78bfa;
}

/* ===================================================================== */
/* VIEW 07: LEADERBOARD / RANKING GLOBAL                                 */
/* ===================================================================== */
.podium-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  margin: 30px 0 40px;
}

.podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 200px;
}

.podium-avatar-wrap {
  position: relative;
  margin-bottom: 10px;
}

.podium-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #71717a;
}

.podium-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  font-family: var(--font-heading);
}

.podium-slot.first .podium-avatar { border-color: #fbbf24; box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); width: 84px; height: 84px; }
.podium-slot.first .podium-badge { background: #fbbf24; color: #000; }

.podium-slot.second .podium-avatar { border-color: #94a3b8; }
.podium-slot.second .podium-badge { background: #94a3b8; color: #000; }

.podium-slot.third .podium-avatar { border-color: #b45309; }
.podium-slot.third .podium-badge { background: #b45309; color: #fff; }

.podium-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 2px;
}

.podium-rank-title {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.podium-xp {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #60a5fa;
  background: rgba(0, 102, 255, 0.1);
  padding: 2px 10px;
  border-radius: 20px;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.leaderboard-table th {
  text-align: left;
  padding: 12px 14px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
}

.leaderboard-table td {
  padding: 12px 14px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.leaderboard-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.leaderboard-table tr.current-user-row td {
  background: rgba(0, 102, 255, 0.12);
  border-color: rgba(0, 102, 255, 0.3);
  font-weight: 600;
}

/* ===================================================================== */
/* VIEW 08: PAINEL DO PRODUTOR / ADMIN                                   */
/* ===================================================================== */
.producer-studio-container {
  max-width: 1300px;
  margin: 0 auto;
}

.producer-header {
  margin-bottom: 28px;
}

.producer-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.producer-dual-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}

.producer-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.producer-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.admin-orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

/* ===================================================================== */
/* MODALS & OVERLAYS                                                     */
/* ===================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.25s ease;
}

.checkout-modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-xl);
  max-width: 580px;
  width: 100%;
  padding: 28px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.checkout-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.checkout-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.checkout-guarantee-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.checkout-course-summary {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}

.checkout-course-thumb {
  width: 80px;
  height: 55px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

/* Sales Page Modal (Course Details) */
.sales-page-modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-xl);
  max-width: 840px;
  width: 100%;
  padding: 32px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.sales-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 18px;
}

.sales-highlights-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

.sales-highlight-item {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sales-highlight-item span {
  font-size: 20px;
}

.sales-highlight-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 13.5px;
  color: var(--text-white);
}

.sales-highlight-item small {
  font-size: 11px;
  color: var(--text-muted);
}

.sales-instructor-card {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.sales-instructor-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-blue);
  flex-shrink: 0;
}

.sales-curriculum-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.sales-module-item {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sales-module-header {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-white);
  display: flex;
  justify-content: space-between;
}

.sales-lesson-row {
  padding: 9px 16px;
  font-size: 12.5px;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  justify-content: space-between;
}

.sales-purchase-bar {
  position: sticky;
  bottom: -32px;
  left: -32px;
  right: -32px;
  margin: 0 -32px -32px;
  background: #ffffff;
  border-top: 1px solid var(--border-subtle);
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05);
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 280px;
}

.toast-xp {
  border-color: rgba(0, 102, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 102, 255, 0.25);
}

.toast-icon {
  font-size: 20px;
}

.toast-body {
  display: flex;
  flex-direction: column;
}

.toast-title {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-white);
}

.toast-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Level Up Celebration Modal */
.levelup-modal-content {
  text-align: center;
  padding: 30px 10px;
}

.levelup-trophy-icon {
  font-size: 58px;
  margin-bottom: 12px;
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

/* Certificate Official Khron X Design */
.certificate-frame {
  max-width: 860px;
  margin: 0 auto;
  background: linear-gradient(135deg, #07070b 0%, #101018 100%);
  border: 2px solid #27273a;
  border-radius: var(--radius-xl);
  padding: 44px;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.certificate-frame::before {
  content: "";
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.cert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.cert-body {
  text-align: center;
  margin-bottom: 36px;
}

.cert-title-big {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 800;
  color: var(--text-white);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cert-student-name {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  color: #60a5fa;
  margin: 18px 0;
  border-bottom: 2px solid rgba(0, 102, 255, 0.3);
  display: inline-block;
  padding-bottom: 4px;
}

.cert-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--border-subtle);
  padding-top: 20px;
}

.cert-verification-box {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-align: left;
}

/* ===================================================================== */
/* RESPONSIVE LAYOUT (TABLET / MOBILE)                                   */
/* ===================================================================== */
@media (max-width: 1024px) {
  .platform-sidebar {
    transform: translateX(-100%);
  }
  .platform-sidebar.open {
    transform: translateX(0);
  }
  .platform-main-wrapper {
    margin-left: 0;
  }
  .mobile-toggle-btn {
    display: inline-flex;
  }
  .dashboard-analytics-row {
    grid-template-columns: 1fr;
  }
  .checkout-tracks-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .checkout-courses-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .goal-selector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .checkout-dual-grid {
    grid-template-columns: 1fr;
  }
  .gamification-hub-grid {
    grid-template-columns: 1fr;
  }
  .producer-dual-row {
    grid-template-columns: 1fr;
  }
  .materials-and-notes-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .checkout-tracks-showcase-grid {
    grid-template-columns: 1fr;
  }
  .checkout-courses-showcase-grid {
    grid-template-columns: 1fr;
  }
  .subscription-plans-grid {
    grid-template-columns: 1fr;
  }
  .goal-selector-grid {
    grid-template-columns: 1fr;
  }
  .classroom-container {
    grid-template-columns: 1fr;
  }
  .classroom-sidebar {
    position: static;
    max-height: none;
  }
  .topbar-right .xp-hud-container {
    display: none;
  }
  .platform-content {
    padding: 20px 16px 60px;
  }
  .sales-highlights-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===================================================================== */
/* CIRCLE.SO ENTERPRISE SUITE STYLES (x.ai / KHRON X DARK IDENTITY)      */
/* ===================================================================== */

/* General Circle Header & Badges */
.circle-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ai-moderation-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.ai-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #6d28d9;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  padding: 4px 10px;
  border-radius: 999px;
}

.live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 3px 10px;
  border-radius: 999px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseGlow 1.8s infinite;
}

.pulse-dot-purple {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 8px #a855f7;
  animation: pulseGlow 1.8s infinite;
}

.pulse-red {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: pulseGlow 1.2s infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Subnav Navigation Pill Bar across Community views */
.view-subnav-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.view-subnav-btn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.view-subnav-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.view-subnav-btn.active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
  font-weight: 700;
}

/* 1. CIRCLE SPACES & DISCUSSIONS */
.discussions-container {
  max-width: 1240px;
  margin: 0 auto;
}

.community-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 32px 36px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.community-hero-text {
  flex: 1;
}

.community-headline {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

.community-headline span {
  color: #2563eb;
  background: none;
  -webkit-text-fill-color: initial;
}

.community-subhead {
  color: #475569;
  font-size: 14.5px;
  max-width: 680px;
  margin-top: 8px;
  line-height: 1.6;
}

.community-hero-cta {
  flex-shrink: 0;
}

.spaces-bar-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.spaces-pills-list {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.space-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.space-pill-btn:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

.space-pill-btn.active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

.space-post-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #64748b;
  background: #e2e8f0;
  padding: 2px 7px;
  border-radius: 999px;
}

.space-pill-btn.active .space-post-count {
  background: #dbeafe;
  color: #1d4ed8;
}

.community-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 16px;
  min-width: 280px;
}

.community-search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: #0f172a;
  font-size: 13px;
  width: 100%;
}

.community-search-box input::placeholder {
  color: #94a3b8;
}

.community-search-box .search-icon {
  color: #64748b;
  font-size: 15px;
}

.posts-feed-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
}

.posts-feed-stream {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.post-card.pinned {
  border-color: #bfdbfe;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06);
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.post-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.post-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #e2e8f0;
}

.post-author-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 14.5px;
}

.post-meta-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}

.post-badge-space {
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.post-pinned-badge {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.post-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 14px 0 8px;
  line-height: 1.4;
}

.post-body {
  color: #334155;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  margin-bottom: 16px;
}

.post-code-block {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 16px;
  margin: 12px 0 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #93c5fd;
  overflow-x: auto;
}

.post-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.post-actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.post-action-btn:hover {
  background: #eff6ff;
  color: #0f172a;
  border-color: #cbd5e1;
}

.post-action-btn.liked {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.post-ai-summary-btn {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #7c3aed;
  font-weight: 600;
}

.post-ai-summary-btn:hover {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #c4b5fd;
}

.post-comments-container {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e2e8f0;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.comment-bubble {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
}

.comment-author-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.comment-author-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-author-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}

.comment-time {
  font-size: 11px;
  color: #94a3b8;
}

.comment-content {
  font-size: 13px;
  color: #334155;
  line-height: 1.5;
}

.comment-input-row {
  display: flex;
  gap: 8px;
}

.comment-input-row input {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 10px 16px;
  color: #0f172a;
  font-size: 13px;
  outline: none;
}

.comment-input-row input:focus {
  border-color: #2563eb;
  background: #ffffff;
}

.community-sidebar-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.community-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.community-card .card-section-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.community-guidelines-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin-top: 10px;
}

.community-guidelines-list strong {
  color: #0f172a;
}

.top-contributors-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.contributor-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: background 0.15s ease;
}

.contributor-item:hover {
  background: #f1f5f9;
}

.contributor-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contributor-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.contributor-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.contributor-rank {
  font-size: 11px;
  color: #2563eb;
  font-weight: 600;
}

.contributor-points {
  font-size: 12px;
  font-weight: 700;
  color: #d97706;
  font-family: var(--font-mono);
}

/* 2. CIRCLE LIVE STREAM STUDIO */
.events-container {
  max-width: 1240px;
  margin: 0 auto;
}

.events-hero-header {
  margin-bottom: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px 36px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.events-headline {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
}

.events-headline span {
  background: linear-gradient(135deg, #ef4444, #f87171);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.events-subhead {
  color: var(--text-secondary);
  font-size: 14.5px;
  max-width: 720px;
  margin-top: 6px;
  line-height: 1.6;
}

.live-studio-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  margin-bottom: 32px;
}

.live-stream-player-container {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.live-video-screen {
  position: relative;
  background: #000;
  aspect-ratio: 16/9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#liveStreamCanvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.live-screen-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}

.live-stream-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-pill-red {
  background: #ef4444;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.live-viewers-count {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.live-res-badge {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  color: #60a5fa;
  font-size: 10.5px;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
}

.live-cohosts-dock {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cohost-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 10, 16, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: 999px;
}

.cohost-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.cohost-meta {
  display: flex;
  flex-direction: column;
}

.cohost-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.cohost-role {
  font-size: 9.5px;
  color: #60a5fa;
}

.cohost-mic-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulseGlow 1.2s infinite;
}

.live-stream-details-bar {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.live-stream-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.live-stream-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.live-stream-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-chat-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  height: 620px;
}

.live-chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 14px;
}

.live-attendees-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  padding: 3px 8px;
  border-radius: 999px;
}

.live-chat-messages-box {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.live-chat-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.live-chat-sender-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.live-chat-sender {
  font-weight: 700;
  color: #60a5fa;
}

.live-chat-sender.admin {
  color: #fbbf24;
}

.live-chat-time {
  color: var(--text-muted);
}

.live-chat-body {
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

.live-chat-input-form {
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-deep);
}

.live-chat-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.live-chat-input-row input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
}

.live-quick-emojis {
  display: flex;
  gap: 6px;
}

.quick-emoji-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.quick-emoji-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.events-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.event-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.event-card:hover {
  border-color: var(--border-active);
  transform: translateY(-2px);
}

.event-date-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #60a5fa;
  background: rgba(0, 102, 255, 0.1);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.event-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.35;
}

.event-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 18px;
}

.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.event-host-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-host-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.event-host-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 3. CIRCLE MESSAGES & DMS */
.messages-container {
  max-width: 1240px;
  margin: 0 auto;
}

.messages-split-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 720px;
  overflow: hidden;
}

.messages-sidebar {
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
}

.messages-sidebar-header {
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
}

.messages-sidebar-header h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--text-primary);
}

.e2ee-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.messages-filter-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.messages-filter-search input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
}

.conversations-category-label {
  padding: 12px 18px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.conversations-list {
  display: flex;
  flex-direction: column;
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.conversation-item:hover {
  background: #f1f5f9;
}

.conversation-item.active {
  background: #eff6ff;
  border-left-color: #2563eb;
}

.conv-avatar-wrap {
  position: relative;
}

.conv-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.conv-room-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}

.conv-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid var(--bg-deep);
}

.conv-meta {
  flex: 1;
  overflow: hidden;
}

.conv-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.conv-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-last-msg {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-workspace {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
}

.chat-main-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-recipient-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-status-text {
  font-size: 11.5px;
  color: #10b981;
}

.network-latency-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 4px;
}

.chat-messages-stream {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-bubble-row {
  display: flex;
  gap: 10px;
  max-width: 75%;
}

.chat-bubble-row.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-bubble-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-bubble-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 16px;
}

.chat-bubble-row.mine .chat-bubble-content {
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.25), rgba(0, 102, 255, 0.15));
  border-color: rgba(0, 102, 255, 0.4);
}

.chat-sender-name {
  font-size: 11px;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 4px;
}

.chat-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

.chat-time-tag {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: right;
  font-family: var(--font-mono);
}

.chat-input-bar {
  padding: 16px 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-deep);
  display: flex;
  gap: 12px;
}

.chat-input-bar input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.chat-input-bar input:focus {
  border-color: var(--accent-blue);
}

/* 4. CIRCLE MEMBERS DIRECTORY */
.members-container {
  max-width: 1240px;
  margin: 0 auto;
}

.members-header-wrap {
  margin-bottom: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px 36px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.members-headline {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
}

.members-headline span {
  background: linear-gradient(135deg, #10b981, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.members-subhead {
  color: var(--text-secondary);
  font-size: 14.5px;
  max-width: 720px;
  margin-top: 6px;
  line-height: 1.6;
}

.members-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.members-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  min-width: 320px;
}

.members-search-wrap input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  width: 100%;
}

.members-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.member-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.2s ease;
}

.member-card:hover {
  border-color: var(--border-active);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.member-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0, 102, 255, 0.4);
  margin-bottom: 12px;
}

.member-card-name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.member-badge-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #60a5fa;
  background: rgba(0, 102, 255, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.member-card-bio {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
  min-height: 38px;
}

.member-location-pill {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}

.member-skills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}

.skill-pill {
  font-size: 10.5px;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 2px 6px;
  border-radius: 4px;
}

.member-card-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.member-xp-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
}

/* 5. CIRCLE AI & WORKFLOWS */
.circle-ai-container {
  max-width: 1240px;
  margin: 0 auto;
}

.circle-ai-header-hero {
  margin-bottom: 24px;
}

.circle-ai-headline {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
}

.circle-ai-headline span {
  background: linear-gradient(135deg, #a855f7, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.circle-ai-subhead {
  color: var(--text-secondary);
  font-size: 14.5px;
  max-width: 720px;
  margin-top: 6px;
  line-height: 1.6;
}

.circle-ai-nav-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
  padding-bottom: 10px;
}

.copilot-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 680px;
}

.copilot-skills-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}

.skill-chip {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #c084fc;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.skill-chip:hover {
  background: rgba(139, 92, 246, 0.22);
  color: #fff;
  border-color: #a855f7;
}

.copilot-chat-history {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 8px;
}

.copilot-msg-row {
  display: flex;
  gap: 12px;
  max-width: 85%;
}

.copilot-msg-row.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.copilot-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.copilot-msg-avatar.ai {
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.copilot-msg-avatar.user {
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.4);
}

.copilot-msg-bubble {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-primary);
}

.copilot-msg-row.user .copilot-msg-bubble {
  background: rgba(0, 102, 255, 0.15);
  border-color: rgba(0, 102, 255, 0.35);
}

.copilot-input-form {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.copilot-input-form input {
  flex: 1;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.copilot-input-form input:focus {
  border-color: #8b5cf6;
}

/* Visual Workflows */
.workflows-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.workflows-diagram-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.workflow-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all 0.2s ease;
}

.workflow-card:hover {
  border-color: var(--border-active);
}

.workflow-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.workflow-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.workflow-visual-nodes-row {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  padding: 14px 0;
}

.wf-node {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  min-width: 220px;
}

.wf-node-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.wf-node-label.trigger { color: #60a5fa; }
.wf-node-label.condition { color: #fbbf24; }
.wf-node-label.action { color: #10b981; }

.wf-node-text {
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.4;
}

.wf-arrow-connector {
  font-size: 20px;
  color: var(--text-muted);
}

.workflow-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  margin-top: 12px;
}

/* MCP & Headless API */
.mcp-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.mcp-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.code-copy-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #050508;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.code-copy-box code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #60a5fa;
}

.mcp-tools-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.mcp-tools-list code {
  color: #a855f7;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.integrations-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.integration-pill {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 4px 10px;
  border-radius: 4px;
}

/* Lesson AI Summary Banner inside classroom */
.lesson-ai-summary-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(10, 10, 16, 0.95));
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 20px;
}

.lesson-ai-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.lesson-ai-summary-content {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* 6. CIRCLE AFFILIATES SUITE */
.affiliates-container {
  max-width: 1240px;
  margin: 0 auto;
}

.affiliates-headline {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
}

.affiliates-headline span {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.affiliates-subhead {
  color: var(--text-secondary);
  font-size: 14.5px;
  max-width: 720px;
  margin-top: 6px;
  line-height: 1.6;
}

.affiliate-link-card {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  background: var(--bg-card);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 24px 0;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.04), var(--bg-card));
}

.affiliate-badge-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.5px;
}

.affiliate-url-row {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.affiliate-url-row input {
  flex: 1;
  background: #050508;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: #60a5fa;
  font-family: var(--font-mono);
  font-size: 13px;
}

.affiliate-payout-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.payout-balance-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}

.payout-balance-amount {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: #10b981;
  margin: 4px 0 12px;
}

.affiliate-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.affiliate-history-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* 7. CIRCLE EMAIL MARKETING & AUDIENCE CRM */
.email-crm-container {
  max-width: 1240px;
  margin: 0 auto;
}

.email-crm-headline {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
}

.email-crm-headline span {
  background: linear-gradient(135deg, #10b981, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.email-crm-subhead {
  color: var(--text-secondary);
  font-size: 14.5px;
  max-width: 720px;
  margin-top: 6px;
  line-height: 1.6;
}

.broadcasts-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.campaigns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.campaign-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.campaign-subject {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.campaign-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 14px;
  text-align: center;
}

.campaign-stat-item strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  color: #60a5fa;
}

.campaign-stat-item span {
  font-size: 10.5px;
  color: var(--text-muted);
}

.audience-controls-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.audience-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.migration-container-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.migration-platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.platform-import-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.platform-import-card:hover {
  border-color: var(--accent-blue);
  transform: translateY(-2px);
}

.platform-icon {
  font-size: 36px;
  margin-bottom: 10px;
  display: block;
}

.platform-import-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.platform-import-card p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* 8. CIRCLE PLUS WEBSITE BUILDER & BRANDED IPHONE MOCKUP */
.builder-mobile-container {
  max-width: 1240px;
  margin: 0 auto;
}

.builder-headline {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
}

.builder-headline span {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.builder-subhead {
  color: var(--text-secondary);
  font-size: 14.5px;
  max-width: 720px;
  margin-top: 6px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.builder-dual-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}

.builder-editor-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.domain-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #050508;
  border: 1px solid var(--border-subtle);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-top: 6px;
}

.dns-ok-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.builder-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-block-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

.block-drag-handle {
  color: var(--text-muted);
  cursor: grab;
}

.block-info {
  flex: 1;
}

.block-info strong {
  display: block;
  font-size: 13.5px;
  color: var(--text-primary);
}

.block-info small {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.block-status-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #10b981;
}

.mobile-app-showcase-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.push-tester-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.push-tester-box input {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
}

/* REALISTIC IPHONE 15 PRO CONTAINER */
.iphone-frame {
  width: 320px;
  height: 640px;
  background: #000;
  border: 8px solid #27272a;
  border-radius: 48px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.iphone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}

.dynamic-island {
  width: 90px;
  height: 24px;
  background: #000;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.island-camera {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #18181b;
  border: 1px solid #3f3f46;
}

/* Push notification banner sliding down from Dynamic Island */
.iphone-push-banner {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  background: rgba(24, 24, 27, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  z-index: 100;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  transform: translateY(-120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: none;
}

.iphone-push-banner.active {
  transform: translateY(0);
  opacity: 1;
}

.push-app-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
}

.push-text-content {
  flex: 1;
}

.push-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: var(--text-muted);
}

.push-header-meta strong {
  color: #fff;
  font-size: 11px;
}

.push-body {
  font-size: 11.5px;
  color: var(--text-primary);
  line-height: 1.35;
  margin-top: 2px;
}

.iphone-screen {
  flex: 1;
  background: #09090b;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.iphone-status-bar {
  padding: 10px 20px 4px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.status-bar-icons {
  font-size: 10px;
}

.iphone-app-header {
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-logo-text {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.app-avatar-pill {
  font-size: 10px;
  color: #60a5fa;
  background: rgba(0, 102, 255, 0.15);
  padding: 2px 6px;
  border-radius: 999px;
}

.iphone-app-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mini-live-card {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(20, 20, 30, 0.8));
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 10px;
  padding: 10px;
}

.mini-live-badge {
  font-size: 9px;
  font-weight: 800;
  color: #ef4444;
  display: inline-block;
  margin-bottom: 2px;
}

.mini-live-card h5 {
  font-size: 11.5px;
  color: #fff;
  margin-bottom: 2px;
}

.mini-live-card p {
  font-size: 10px;
  color: var(--text-secondary);
}

.mini-section-label {
  font-size: 9.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 4px;
}

.mini-course-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 6px 10px;
}

.mini-course-icon {
  font-size: 16px;
}

.mini-course-meta {
  flex: 1;
}

.mini-course-meta h6 {
  font-size: 11px;
  color: #fff;
  margin-bottom: 3px;
}

.mini-progress-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.mini-progress-bar div {
  height: 100%;
  background: #0066ff;
}

.mini-post-bubble {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px;
  font-size: 10px;
  color: var(--text-secondary);
}

.mini-post-bubble strong {
  color: #60a5fa;
  display: block;
  margin-bottom: 2px;
}

.iphone-tab-bar {
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-around;
  padding: 8px 6px 14px;
}

.iphone-tab-bar .tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 9px;
  color: var(--text-muted);
  cursor: pointer;
}

.iphone-tab-bar .tab-item span {
  font-size: 14px;
  margin-bottom: 1px;
}

.iphone-tab-bar .tab-item.active {
  color: #60a5fa;
}

/* Responsive tweaks for Circle components */
@media (max-width: 1024px) {
  .posts-feed-layout {
    grid-template-columns: 1fr;
  }
  .live-studio-grid {
    grid-template-columns: 1fr;
  }
  .messages-split-card {
    grid-template-columns: 1fr;
  }
  .builder-dual-layout {
    grid-template-columns: 1fr;
  }
  .affiliate-link-card {
    grid-template-columns: 1fr;
  }
  .mcp-config-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================== */
/* CLEAN NAVIGATION & SUBNAV ARCHITECTURE (HOTMART / CIRCLE PRO UX)       */
/* ===================================================================== */
.sidebar-admin-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.2);
}

.view-subnav-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
  overflow-x: auto;
}

.view-subnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.view-subnav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.2);
}

.view-subnav-btn.active {
  background: rgba(0, 102, 255, 0.16);
  border-color: var(--accent-blue);
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 102, 255, 0.3);
}

.view-subnav-btn i {
  font-size: 16px;
}

/* Clean 1-Line View Header */
.view-header-clean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.view-header-clean .header-text h1 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 4px 0;
}

.view-header-clean .header-text p {
  color: var(--text-secondary);
  font-size: 13.5px;
  margin: 0;
}

/* Simplified Direct Dashboard Styles */
.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 16px;
}

.dash-section-header h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.dash-section-header .btn-text-link {
  background: none;
  border: none;
  color: #60a5fa;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dash-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.dash-course-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  position: relative;
}

.dash-course-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.dash-course-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #60a5fa;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.dash-course-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 10px;
}

.dash-course-instructor {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.dash-course-action {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-course-action .btn-action {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: rgba(0, 102, 255, 0.15);
  border: 1px solid var(--border-glow);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-course-action .btn-action:hover {
  background: var(--accent-blue);
  box-shadow: 0 0 12px rgba(0, 102, 255, 0.4);
}

.dash-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 900px) {
  .dash-summary-row {
    grid-template-columns: 1fr;
  }
}

.dash-stats-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.dash-stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.dash-stat-item .stat-lbl {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-stat-item .stat-lbl i {
  font-size: 16px;
  color: #60a5fa;
}

.dash-stat-item .stat-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ========================================================================= */
/* GOOGLE SKILLS BRIGHT, COLORFUL & OPEN THEME OVERRIDES + LANDING/TRACKS    */
/* ========================================================================= */

.public-gate-wrapper {
  min-height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 45%, #f1f5f9 100%);
  color: #202124;
}

.public-navbar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 32px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.public-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.public-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.public-nav-links a {
  color: #5f6368;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

.public-nav-links a:hover {
  color: #1a73e8;
}

.public-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* LANDING HERO (GOOGLE SKILLS STYLE) */
.landing-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 32px 48px;
}

.landing-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 980px) {
  .landing-hero-grid {
    grid-template-columns: 1fr;
  }
}

.dopamine-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: #1a73e8;
  background: #e8f0fe;
  border: 1px solid #d2e3fc;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.landing-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #202124;
  margin-bottom: 18px;
}

.landing-hero-title span {
  background: linear-gradient(90deg, #2563eb 0%, #4f46e5 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-hero-desc {
  font-size: 16.5px;
  color: #5f6368;
  line-height: 1.65;
  max-width: 620px;
  margin-bottom: 26px;
}

.landing-hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.btn-dopamine-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1a73e8;
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14.5px;
  padding: 14px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(26, 115, 232, 0.28);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.btn-dopamine-cta:hover {
  background: #1557b0;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(26, 115, 232, 0.35);
}

.btn-dopamine-chest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fef7e0;
  border: 1.5px solid #fde293;
  color: #b06000;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13.5px;
  padding: 12px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.btn-dopamine-chest:hover {
  background: #fbbc04;
  color: #202124;
  border-color: #f9ab00;
  box-shadow: 0 6px 18px rgba(251, 188, 4, 0.35);
  transform: translateY(-1px);
}

.landing-trust-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 500;
  color: #5f6368;
}

.landing-trust-row i {
  color: #1e8e3e;
  margin-right: 4px;
}

/* GOOGLE SKILLS PREVIEW CARD */
.dopamine-preview-card {
  background: #ffffff;
  border: 1.5px solid #d2e3fc;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 16px 40px rgba(26, 115, 232, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
}

.dopamine-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.preview-kicker {
  font-family: var(--font-heading);
  font-size: 11px;
  color: #1a73e8;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dopamine-preview-header h4 {
  font-family: var(--font-heading);
  font-size: 18px;
  color: #202124;
  margin-top: 4px;
}

.preview-streak-badge {
  background: #fef7e0;
  border: 1px solid #fde293;
  color: #d97706;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}

.preview-rank-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.preview-rank-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1a73e8, #34a853);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffffff;
  flex-shrink: 0;
}

.preview-rank-details {
  flex: 1;
}

.preview-rank-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: #202124;
  margin-bottom: 8px;
}

.preview-xp-highlight {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #1a73e8;
}

.dopamine-xp-bar {
  width: 100%;
  height: 10px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}

.dopamine-xp-bar.large {
  height: 12px;
}

.dopamine-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb 0%, #4f46e5 50%, #06b6d4 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.preview-rank-details small {
  font-size: 11.5px;
  color: #5f6368;
}

.preview-rewards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.preview-reward-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-reward-item i {
  font-size: 20px;
}

.preview-reward-item strong {
  display: block;
  font-size: 12.5px;
  color: #202124;
}

.preview-reward-item span {
  font-size: 10.5px;
  color: #5f6368;
}

/* LANDING SECTIONS & GOAL SELECTOR */
.landing-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 32px;
  border-top: 1px solid #e2e8f0;
}

.landing-section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 32px;
}

.landing-section-header h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: #202124;
  margin: 10px 0 8px;
}

.landing-section-header h2 span {
  color: #1a73e8;
}

.landing-section-header p {
  color: #5f6368;
  font-size: 15px;
  line-height: 1.6;
}

.goal-selector-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.goal-selector-bar.compact {
  margin-top: 0;
}

.goal-pill {
  background: #ffffff;
  border: 1.5px solid #dadce0;
  color: #5f6368;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.goal-pill:hover,
.goal-pill.active {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #1a73e8;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.14);
}

/* TRILHAS DE CONHECIMENTO (GOOGLE SKILLS PATHS) */
.tracks-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
}

.track-roadmap-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.track-roadmap-card:hover {
  border-color: #1a73e8;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(26, 115, 232, 0.1);
}

.track-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.track-goal-pill {
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #d2e3fc;
  background: #e8f0fe;
  color: #1a73e8;
}

.track-xp-reward-pill {
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  color: #b06000;
  background: #fef7e0;
  border: 1px solid #fde293;
  padding: 4px 12px;
  border-radius: 999px;
}

.track-card-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: #202124;
  line-height: 1.3;
  margin-bottom: 6px;
}

.track-card-subtitle {
  font-size: 13.5px;
  color: #5f6368;
  line-height: 1.55;
  margin-bottom: 14px;
}

.track-progress-strip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 10px 12px;
  border-radius: 10px;
}

.track-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #5f6368;
  margin-bottom: 6px;
}

.track-progress-labels strong {
  color: #1e8e3e;
  font-family: var(--font-mono);
}

.track-steps-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.track-step-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.track-step-item.enrolled {
  border-color: #a8dab5;
  background: #e6f4ea;
}

.track-step-number {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: #1a73e8;
  background: #e8f0fe;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.track-step-info {
  flex: 1;
  min-width: 0;
}

.track-step-title {
  font-size: 13px;
  font-weight: 700;
  color: #202124;
  line-height: 1.3;
}

.track-step-meta {
  font-size: 11px;
  color: #5f6368;
  margin-top: 3px;
}

.track-step-btn {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.track-step-btn.enrolled {
  background: #1e8e3e;
  color: #ffffff;
}

.track-step-btn.locked {
  background: #ffffff;
  color: #1a73e8;
  border: 1px solid #d2e3fc;
}

.track-step-connector {
  text-align: center;
  color: #1a73e8;
  font-size: 14px;
  line-height: 1;
}

.track-card-footer {
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.track-price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.track-bundle-label {
  color: #5f6368;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
}

.track-price-box strong {
  color: #202124;
  font-size: 14px;
}

.track-price-box small {
  color: #5f6368;
  font-weight: 400;
}

/* LANDING LEVELS STRIP */
.landing-ranks-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.landing-rank-step {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.landing-rank-step strong {
  color: #202124;
  font-size: 15px;
}

.landing-rank-step small {
  color: #5f6368;
}

.landing-rank-step.highlight {
  border-color: #fbbc04;
  background: #fef7e0;
}

.rank-lvl-pill {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  color: #1a73e8;
}

/* DEDICATED LOGIN & PASSWORD SCREEN */
.login-screen-view {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-split-container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  width: 100%;
  align-items: center;
}

@media (max-width: 860px) {
  .login-split-container {
    grid-template-columns: 1fr;
  }
}

.login-split-left h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: #202124;
  margin: 12px 0;
}

.login-split-left p {
  color: #5f6368;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.demo-credentials-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.demo-cred-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a73e8;
  margin-bottom: 12px;
}

.demo-cred-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-cred-btn {
  background: #e8f0fe;
  border: 1.5px solid #d2e3fc;
  border-radius: 12px;
  padding: 12px 14px;
  color: #202124;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.demo-cred-btn.admin {
  background: #e6f4ea;
  border-color: #ceead6;
}

.demo-cred-btn:hover {
  transform: translateX(4px);
  border-color: #1a73e8;
}

.demo-cred-btn i {
  font-size: 22px;
  color: #1a73e8;
}

.demo-cred-btn.admin i {
  color: #1e8e3e;
}

.demo-cred-btn strong {
  display: block;
  font-size: 13.5px;
  color: #202124;
}

.demo-cred-btn span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #5f6368;
}

.login-form-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

/* HUD TOPBAR GOOGLE SKILLS UPGRADES */
.hud-chest-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef7e0;
  border: 1.5px solid #fde293;
  color: #b06000;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hud-chest-btn:hover {
  background: #fbbc04;
  color: #202124;
  box-shadow: 0 4px 12px rgba(251, 188, 4, 0.35);
}

.hud-xp-progress-widget {
  background: #f8fafc;
  border: 1.5px solid #d2e3fc;
  border-radius: 10px;
  padding: 6px 12px;
  min-width: 215px;
  cursor: pointer;
}

.hud-xp-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  margin-bottom: 4px;
}

.hud-rank-label {
  font-weight: 700;
  color: #1a73e8;
}

.hud-xp-numbers {
  font-family: var(--font-mono);
  color: #202124;
  font-weight: 600;
}

.hud-xp-numbers small {
  color: #5f6368;
}

.hud-xp-bar-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.hud-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #4f46e5, #06b6d4);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* DASHBOARD WELCOME BANNER (KHRON X MODERN AMBIANCE) */
.dopamine-dash-banner {
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 55%, #ecfeff 100%);
  border: 1.5px solid #bfdbfe;
  border-radius: 20px;
  padding: 26px 30px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.dopamine-dash-left {
  flex: 1;
  min-width: 280px;
}

.dopamine-greeting-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 800;
  color: #1a73e8;
  background: #ffffff;
  border: 1px solid #d2e3fc;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.dopamine-dash-left h1 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: #202124;
  margin-bottom: 6px;
}

.dopamine-dash-left p {
  font-size: 14px;
  color: #3c4043;
  margin-bottom: 12px;
}

.dopamine-banner-xp-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
}

.dopamine-xp-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #1a73e8;
  white-space: nowrap;
}

.dopamine-dash-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
}

.course-xp-floating-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid #d2e3fc;
  color: #1a73e8;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

/* ========================================================================= */
/* COMPREHENSIVE GOOGLE SKILLS LIGHT THEME OVERRIDES FOR APP SHELL & CARDS   */
/* ========================================================================= */

.sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 2px 0 12px rgba(15, 23, 42, 0.03);
}

.sidebar-header,
.sidebar-footer {
  border-color: #e2e8f0 !important;
}

.nav-item {
  color: #5f6368 !important;
  border-radius: 999px !important;
  margin: 2px 10px !important;
  font-weight: 600 !important;
}

.nav-item:hover {
  background: #f1f5f9 !important;
  color: #202124 !important;
}

.nav-item.active {
  background: #e8f0fe !important;
  color: #1a73e8 !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}

.nav-item.active .nav-icon {
  color: #1a73e8 !important;
}

.topbar-hud {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.hud-breadcrumb .hud-current {
  color: #202124 !important;
  font-weight: 700 !important;
}

.hud-stat-pill {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #202124 !important;
}

.dashboard-card,
.stat-card,
.course-card,
.store-item-card,
.achievement-card,
.leaderboard-table-wrap,
.podium-card,
.modal-card,
.classroom-main,
.classroom-sidebar,
.continue-banner-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #202124 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.continue-banner-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%) !important;
  border-color: #d2e3fc !important;
}

.course-card:hover,
.store-item-card:hover,
.achievement-card.unlocked:hover {
  border-color: #1a73e8 !important;
  box-shadow: 0 12px 28px rgba(26, 115, 232, 0.12) !important;
}

.view-title,
.card-section-title,
.course-title,
.continue-title,
.stat-value,
.modal-header h3,
.lesson-main-title,
.rank-info h5,
.achievement-info h5,
.podium-name {
  color: #202124 !important;
}

.view-subtitle,
.course-subtitle,
.continue-desc,
.stat-label,
.rank-info span,
.achievement-info p {
  color: #5f6368 !important;
}

.btn-primary {
  background: #1a73e8 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.25) !important;
}

.btn-primary:hover {
  background: #1557b0 !important;
}

.btn-outline {
  background: #ffffff !important;
  color: #1a73e8 !important;
  border: 1.5px solid #dadce0 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

.btn-outline:hover {
  background: #e8f0fe !important;
  border-color: #1a73e8 !important;
}

.filter-btn,
.tab-btn,
.classroom-tab {
  background: #f8fafc !important;
  color: #5f6368 !important;
  border: 1px solid #e2e8f0 !important;
}

.filter-btn.active,
.tab-btn.active,
.classroom-tab.active {
  background: #e8f0fe !important;
  color: #1a73e8 !important;
  border-color: #1a73e8 !important;
  font-weight: 700 !important;
}

.search-box input,
.form-group input,
.form-group select,
.form-group textarea,
.notes-textarea {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #202124 !important;
}

.search-box input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: #ffffff !important;
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15) !important;
}

.rank-node,
.mission-row,
.dash-stat-item,
.lesson-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #202124 !important;
}

.rank-node.current,
.lesson-item.active {
  background: #e8f0fe !important;
  border-color: #1a73e8 !important;
}

.rank-node.unlocked {
  border-color: #a8dab5 !important;
}

.modal-overlay {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(6px) !important;
}

.reading-article,
.reading-article h1,
.reading-article h2,
.reading-article h3,
.reading-article p,
.reading-article li {
  color: #202124 !important;
}

.leaderboard-table th {
  background: #f8fafc !important;
  color: #5f6368 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.leaderboard-table td {
  color: #202124 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* ========================================================================= */
/* EXACT GOOGLE SKILLS REPLICA (https://www.skills.google + Internal Area)   */
/* ========================================================================= */

/* --- 1. TOP TOOLBAR (PUBLIC & INTERNAL) --- */
.gs-top-toolbar,
.gs-internal-topbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #ffffff;
  border-bottom: 1px solid #e0e4eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1200;
  gap: 16px;
}

.gs-toolbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.gs-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #444746;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.gs-icon-btn:hover {
  background: #f1f3f4;
  color: #1f1f1f;
}

.gs-logo-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

/* Khron X Academy Brand Identity */
.kx-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.kx-brand-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transition: transform 0.2s ease;
}

.kx-brand-logo:hover .kx-brand-badge {
  transform: scale(1.05);
}

.kx-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.kx-brand-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.kx-brand-highlight {
  color: #2563eb;
}

.kx-brand-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.12em;
  margin-top: 2px;
}

.gs-multicolor-word {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex;
  color: #0f172a;
}

.gs-c-blue   { color: #2563eb; }
.gs-c-red    { color: #0f172a; }
.gs-c-yellow { color: #3b82f6; }
.gs-c-green  { color: #06b6d4; }

.gs-skills-word {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: -0.01em;
}

.gs-toolbar-center {
  flex: 1;
  max-width: 560px;
  margin: 0 auto;
}

.gs-header-search {
  width: 100%;
  height: 44px;
  background: #ffffff;
  border: 1px solid #c4c7c5;
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gs-header-search:focus-within {
  border-color: #0b57d0;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.18);
}

.gs-header-search i {
  font-size: 18px;
  color: #444746;
}

.gs-header-search input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  color: #1f1f1f !important;
  font-size: 14.5px;
  outline: none !important;
  box-shadow: none !important;
}

.gs-header-search input::placeholder {
  color: #5f6368;
}

.gs-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.gs-btn-text-login {
  background: transparent;
  border: none;
  color: #0b57d0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.gs-btn-text-login:hover {
  background: #f0f4f9;
}

.gs-btn-pill-primary {
  background: #0b57d0;
  color: #ffffff;
  border: none;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.gs-btn-pill-primary:hover {
  background: #0842a0;
  box-shadow: 0 2px 8px rgba(11, 87, 208, 0.3);
}

/* Internal Topbar Right Stats (★ 2920 |  4 | ? |  | Avatar) */
.gs-internal-right {
  gap: 14px;
}

.gs-hud-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: #1f1f1f;
  transition: background 0.18s ease;
}

.gs-hud-stat-item:hover {
  background: #f0f4f9;
}

.gs-star-icon {
  color: #fbbc04;
  font-size: 20px;
}

.gs-flame-icon {
  color: #ff6d00;
  font-size: 20px;
}

.gs-user-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0b57d0;
  color: #ffffff;
  border: 2px solid #d3e3fd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}

.gs-user-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 2. BODY LAYOUT & LEFT NAVIGATION RAIL (84px Slim Rail) --- */
.gs-public-body-container {
  display: flex;
  min-height: calc(100vh - 64px);
  background: #ffffff;
}

.gs-internal-body {
  display: flex;
  min-height: calc(100vh - 64px);
  background: #eef2f6;
}

.gs-left-rail,
.gs-internal-rail {
  width: 88px;
  background: #ffffff;
  border-right: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 6px 24px;
  gap: 6px;
  flex-shrink: 0;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  z-index: 100;
}

.gs-internal-rail {
  border-right: 1px solid #e5e9f0;
}

.gs-rail-fab {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #d3e3fd;
  color: #041e49;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  margin-bottom: 12px;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.15s ease;
}

.gs-rail-fab:hover {
  background: #a8c7fa;
  transform: translateY(-1px);
}

.gs-rail-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 4px;
}

.gs-rail-item {
  width: 100%;
  background: transparent;
  border: none;
  padding: 6px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #444746;
  text-decoration: none;
  cursor: pointer;
  border-radius: 12px;
  transition: color 0.18s ease;
}

.gs-rail-icon-pill {
  width: 52px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #444746;
  transition: background 0.18s ease, color 0.18s ease;
}

.gs-rail-item:hover .gs-rail-icon-pill {
  background: #f0f4f9;
  color: #1f1f1f;
}

.gs-rail-item.active .gs-rail-icon-pill {
  background: #d3e3fd;
  color: #0b57d0;
}

.gs-rail-label {
  font-size: 11px;
  font-weight: 500;
  color: #444746;
  text-align: center;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.gs-rail-item.active .gs-rail-label {
  color: #0b57d0;
  font-weight: 700;
}

.gs-rail-label i {
  font-size: 12px;
}

.gs-rail-bottom-actions {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f0f4f9;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- 3. PUBLIC MAIN SCROLL AREA & SUB-BANNER --- */
.gs-public-main {
  flex: 1;
  min-width: 0;
  background: #ffffff;
  overflow-x: hidden;
}

.gs-sub-banner {
  background: #eff3f8;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.gs-sub-banner-text {
  font-size: 14px;
  font-weight: 500;
  color: #1f1f1f;
}

.gs-sub-banner-btn {
  background: #ffffff;
  color: #0b57d0;
  border: 1px solid #c4c7c5;
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
}

.gs-sub-banner-btn:hover {
  background: #e8f0fe;
}

/* --- 4. PUBLIC HERO SECTION (WITH GEOMETRIC SVG SHAPES) --- */
.gs-hero-block {
  position: relative;
  padding: 72px 24px 56px;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

.gs-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.gs-shape-top-center {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 55px;
}

.gs-shape-top-right {
  top: 22px;
  right: 40px;
  width: 135px;
  height: 115px;
}

.gs-shape-mid-left {
  top: 155px;
  left: 36px;
  width: 125px;
  height: 115px;
}

.gs-hero-center {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}

.gs-hero-headline {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  color: #1f1f1f;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}

.gs-hero-subtext {
  font-size: 16.5px;
  color: #444746;
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto 28px;
}

.gs-hero-search-form {
  max-width: 560px;
  height: 54px;
  margin: 0 auto 18px;
  background: #ffffff;
  border: 1px solid #c4c7c5;
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.gs-hero-search-form:focus-within {
  border-color: #0b57d0;
  box-shadow: 0 4px 16px rgba(11, 87, 208, 0.15);
}

.gs-hero-search-form input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  font-size: 16px;
  color: #1f1f1f !important;
  outline: none !important;
  box-shadow: none !important;
}

.gs-hero-search-btn {
  background: transparent;
  border: none;
  color: #444746;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.gs-hero-suggestions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.gs-suggestion-chip {
  background: #f0f4f9;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #1f1f1f;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.gs-suggestion-chip i {
  color: #0b57d0;
  font-size: 15px;
}

.gs-suggestion-chip:hover {
  background: #d3e3fd;
}

.gs-hero-cta-wrap {
  margin-top: 6px;
}

.gs-btn-blue-pill {
  background: #0b57d0;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 13px 28px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.gs-btn-blue-pill:hover {
  background: #0842a0;
  box-shadow: 0 4px 14px rgba(11, 87, 208, 0.3);
}

/* --- 5. FLOATING PILL BAR --- */
.gs-floating-pill-nav-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 32px;
  padding: 0 20px;
}

.gs-floating-pill-nav {
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
}

.gs-pill-nav-link {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: #444746;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.gs-pill-nav-link:hover,
.gs-pill-nav-link.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 700;
}

/* Landing Dynamic Tabs Container */
.landing-tabs-container {
  width: 100%;
}

.landing-tab-pane {
  display: none;
  animation: fadeInLandingTab 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-tab-pane.active {
  display: block;
}

@keyframes fadeInLandingTab {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 6. DARK ROUNDED SHOWCASE BLOCK (#learn-ai) --- */
.gs-dark-showcase-block {
  max-width: 1220px;
  margin: 0 auto 56px;
  background: #000000;
  border-radius: 28px;
  padding: 56px 40px;
  color: #ffffff;
}

.gs-dark-showcase-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.gs-dark-showcase-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  margin-bottom: 28px;
  letter-spacing: -0.02em;
}

.gs-ai-gradient-word {
  background: linear-gradient(90deg, #8ab4f8 0%, #c58af9 50%, #f28b82 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.gs-dark-filter-chips {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.gs-dark-chip {
  background: transparent;
  border: 1px solid #5f6368;
  color: #e3e3e3;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.gs-dark-chip:hover {
  border-color: #8ab4f8;
  color: #ffffff;
}

.gs-dark-chip.active {
  background: #d3e3fd;
  border-color: #d3e3fd;
  color: #041e49;
  font-weight: 600;
}

.gs-showcase-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.gs-dark-showcase-footer {
  text-align: center;
}

.gs-btn-light-blue-pill {
  background: #8ab4f8;
  color: #041e49;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
}

.gs-btn-light-blue-pill:hover {
  background: #aecbfa;
  transform: translateY(-1px);
}

/* --- 7. GOOGLE SKILLS ACTIVITY CARDS (USED IN PUBLIC & INTERNAL) --- */
.gs-activity-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.gs-activity-card {
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 255px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.gs-activity-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11, 87, 208, 0.08);
  border-color: #a8c7fa;
}

.gs-activity-card.dark-surface {
  background: #1e1f20;
  border-color: #3c4043;
  color: #ffffff;
}

.gs-activity-card.dark-surface:hover {
  border-color: #8ab4f8;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.gs-card-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.gs-pill-featured {
  background: #f3e8fd;
  color: #681da8;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gs-activity-card.dark-surface .gs-pill-featured {
  background: #3b2854;
  color: #e9d2fd;
}

.gs-pill-type {
  background: #f0f4f9;
  color: #444746;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gs-activity-card.dark-surface .gs-pill-type {
  background: #303134;
  color: #e3e3e3;
}

.gs-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  color: #1f1f1f;
  line-height: 1.35;
  margin-bottom: 10px;
}

.gs-activity-card.dark-surface .gs-card-title {
  color: #ffffff;
}

.gs-card-desc {
  font-size: 13.5px;
  color: #5f6368;
  line-height: 1.5;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gs-activity-card.dark-surface .gs-card-desc {
  color: #c4c7c5;
}

.gs-card-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.gs-card-duration {
  font-size: 12.5px;
  color: #5f6368;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gs-activity-card.dark-surface .gs-card-duration {
  color: #c4c7c5;
}

.gs-card-arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d3e3fd;
  color: #0b57d0;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}

.gs-activity-card:hover .gs-card-arrow-btn {
  background: #0b57d0;
  color: #ffffff;
  transform: translateX(2px);
}

/* --- 8. PUBLIC COURSES SECTION, MEDIA MSG, STATS & CREDENTIALS --- */
.gs-courses-showcase-section {
  max-width: 1220px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

.gs-section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.gs-section-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 500;
  color: #1f1f1f;
  margin-bottom: 6px;
}

.gs-section-subtitle {
  font-size: 15px;
  color: #5f6368;
}

.gs-btn-outline-pill {
  background: #ffffff;
  color: #0b57d0;
  border: 1px solid #747775;
  border-radius: 999px;
  padding: 10px 22px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.gs-btn-outline-pill:hover {
  background: #f0f4f9;
  border-color: #0b57d0;
}

/* Media Msg Block (#join-community) */
.gs-media-msg-block {
  max-width: 1220px;
  margin: 0 auto 64px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
}

.gs-media-msg-left h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500;
  color: #1f1f1f;
  line-height: 1.2;
  margin-bottom: 16px;
}

.gs-media-msg-left p {
  font-size: 16px;
  color: #444746;
  line-height: 1.6;
  margin-bottom: 24px;
}

.gs-gear-artwork {
  background: #07090e;
  border-radius: 28px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.gs-gear-neon-title {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: transparent;
  -webkit-text-stroke: 2px #4285F4;
  text-shadow: 0 0 24px rgba(66, 133, 244, 0.55);
  margin-bottom: 8px;
}

.gs-gear-neon-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #8ab4f8;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gs-gear-waves {
  width: 100%;
  height: 90px;
  margin-top: 20px;
}

/* Statistics Block (#train-your-team) */
.gs-statistics-block {
  max-width: 1220px;
  margin: 0 auto 64px;
  background: #f0f4f9;
  border-radius: 28px;
  padding: 64px 40px;
  text-align: center;
}

.gs-stat-Category-chip {
  display: inline-block;
  background: #e1e6ec;
  color: #1f1f1f;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.gs-stat-main-heading {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  color: #1f1f1f;
  margin-bottom: 40px;
}

.gs-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1020px;
  margin: 0 auto 36px;
}

.gs-metric-box {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 24px;
  text-align: left;
  border: 1px solid #e0e4eb;
}

.gs-metric-big-num {
  font-family: var(--font-heading);
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 500;
  color: #188038;
  line-height: 1.05;
  margin-bottom: 14px;
}

.gs-metric-box p {
  font-size: 14.5px;
  color: #444746;
  line-height: 1.5;
}

.gs-stat-cta-row {
  margin-top: 12px;
}

/* Credentials Block (#get-credentialed) */
.gs-credentials-block {
  max-width: 1220px;
  margin: 0 auto 72px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.gs-cred-illus-card {
  background: #f8fafd;
  border: 1px solid #e0e4eb;
  border-radius: 28px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-cred-svg {
  width: 100%;
  max-width: 420px;
  height: auto;
}

.gs-credentials-accordion {
  display: flex;
  flex-direction: column;
  border-left: 3px solid #e0e4eb;
  padding-left: 24px;
  gap: 22px;
}

.gs-cred-acc-item {
  cursor: pointer;
  padding: 8px 0;
  transition: all 0.2s ease;
}

.gs-cred-acc-item h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
  color: #5f6368;
  margin-bottom: 8px;
  transition: color 0.18s ease;
}

.gs-cred-acc-item.active h3 {
  color: #1f1f1f;
  font-weight: 600;
}

.gs-cred-acc-body {
  display: none;
}

.gs-cred-acc-item.active .gs-cred-acc-body {
  display: block;
}

.gs-cred-acc-body p {
  font-size: 15px;
  color: #444746;
  line-height: 1.6;
  margin-bottom: 12px;
}

.gs-cred-link {
  background: none;
  border: none;
  padding: 0;
  color: #0b57d0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Bottom CTA & Public Footer */
.gs-bottom-cta-block {
  text-align: center;
  padding: 56px 24px 72px;
  border-top: 1px solid #f0f4f9;
}

.gs-bottom-emblem {
  margin-bottom: 18px;
}

.gs-bottom-cta-block h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 500;
  color: #1f1f1f;
  margin-bottom: 24px;
}

.gs-public-footer {
  border-top: 1px solid #e0e4eb;
  padding: 28px 40px;
  background: #ffffff;
}

.gs-footer-row {
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.gs-footer-brand {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: #5f6368;
}

.gs-footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #5f6368;
}

.gs-footer-links a {
  color: #5f6368;
  text-decoration: none;
}

.gs-footer-links a:hover {
  color: #0b57d0;
}

/* ========================================================================= */
/* --- 9. INTERNAL LOGGED-IN SHELL & DASHBOARD (EXACT SCREENSHOT MATCH) ---  */
/* ========================================================================= */
.gs-internal-main {
  flex: 1;
  min-width: 0;
  background: #eef2f6 !important;
  padding: 28px 36px 60px !important;
}

.gs-dashboard-wrapper {
  max-width: 1360px;
  margin: 0 auto;
}

.gs-dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

/* Left Column: Hero Continue Card + Tabs + 3-Col Activity Cards */
.gs-dash-left-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.gs-hero-continue-card {
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 24px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.gs-hero-illus-box {
  width: 220px;
  height: 155px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-continue-svg {
  width: 100%;
  height: 100%;
}

.gs-hero-continue-body {
  flex: 1;
  min-width: 0;
}

.gs-hero-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 10px;
}

.gs-crumb-link {
  color: #0b57d0;
  font-weight: 500;
  cursor: pointer;
}

.gs-crumb-link:hover {
  text-decoration: underline;
}

.gs-crumb-sep {
  color: #5f6368;
}

.gs-hero-continue-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  color: #1f1f1f;
  line-height: 1.28;
  margin-bottom: 12px;
}

.gs-hero-continue-meta {
  font-size: 13.5px;
  color: #5f6368;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.gs-hero-continue-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gs-btn-start-pill {
  background: #0b57d0;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 11px 24px;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.gs-btn-start-pill:hover {
  background: #0842a0;
  box-shadow: 0 4px 12px rgba(11, 87, 208, 0.25);
}

/* Underline Tabs Bar ("Atividades" | "Trilhas") */
.gs-dash-tabs-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid #d8dee8;
  padding: 0 4px;
}

.gs-dash-tab {
  background: transparent;
  border: none;
  padding: 10px 4px 12px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  color: #5f6368;
  cursor: pointer;
  position: relative;
  transition: color 0.18s ease;
}

.gs-dash-tab:hover {
  color: #1f1f1f;
}

.gs-dash-tab.active {
  color: #0b57d0;
  font-weight: 600;
}

.gs-dash-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: #0b57d0;
  border-radius: 3px 3px 0 0;
}

/* Right Column Widgets (Certificações + Badges, Streak Card, Conquistas Diamond) */
.gs-dash-right-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gs-right-top-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.gs-mini-stat-card {
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 132px;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.gs-mini-stat-card:hover {
  border-color: #a8c7fa;
  transform: translateY(-2px);
}

.gs-mini-stat-head {
  font-size: 14px;
  font-weight: 500;
  color: #1f1f1f;
}

.gs-mini-stat-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 16px;
}

.gs-mini-stat-num {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  color: #1f1f1f;
  line-height: 1;
}

.gs-circle-outline-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #c4c7c5;
  color: #0b57d0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.gs-mini-stat-card:hover .gs-circle-outline-btn,
.gs-circle-outline-btn:hover {
  background: #f0f4f9;
  border-color: #0b57d0;
}

/* Streak Widget Card */
.gs-streak-card {
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 24px;
  padding: 24px;
}

.gs-streak-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.gs-streak-big-num {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  color: #1f1f1f;
  line-height: 1;
}

.gs-streak-flame-svg {
  width: 34px;
  height: 34px;
}

.gs-streak-subtitle {
  font-size: 13.5px;
  color: #5f6368;
  margin-bottom: 18px;
}

.gs-streak-divider {
  height: 1px;
  background: #e0e4eb;
  margin-bottom: 18px;
}

.gs-week-days-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.gs-day-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gs-day-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f0f4f9;
  color: #5f6368;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.gs-day-circle.done {
  background: #fff3e0;
  color: #ff6d00;
  border: 1.5px solid #ffcc80;
}

.gs-day-circle.today {
  border: 2px solid #0b57d0;
  color: #0b57d0;
  background: #e8f0fe;
  font-weight: 700;
}

.gs-day-name {
  font-size: 11.5px;
  color: #5f6368;
}

/* Achievements Widget Card (Rotated Yellow Diamond) */
.gs-achievements-widget-card {
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 24px;
  padding: 24px;
}

.gs-ach-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.gs-ach-widget-header h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: #1f1f1f;
}

.gs-diamond-badge-showcase {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0 16px;
}

.gs-diamond-outer {
  width: 136px;
  height: 136px;
  background: linear-gradient(135deg, #ffd54f 0%, #fbbc04 55%, #f57c00 100%);
  border-radius: 26px;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(245, 124, 0, 0.25);
  border: 4px solid #fff8e1;
}

.gs-diamond-inner {
  transform: rotate(-45deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.gs-diamond-inner i {
  font-size: 40px;
  color: #e65100;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.gs-diamond-pill {
  background: #ffffff;
  color: #1f1f1f;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Responsive Adjustments */
@media (max-width: 1100px) {
  .gs-dashboard-main-grid {
    grid-template-columns: 1fr;
  }
  .gs-media-msg-block,
  .gs-credentials-block {
    grid-template-columns: 1fr;
  }
  .gs-metrics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .gs-left-rail,
  .gs-internal-rail {
    display: none;
  }
  .gs-hero-continue-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .gs-internal-main {
    padding: 20px 16px 48px !important;
  }
}

/* --- 10. EXACT HTML CLASS BINDINGS FOR INDEX.HTML --- */
.c-blue   { color: #4285F4; }
.c-red    { color: #EA4335; }
.c-yellow { color: #FBBC05; }
.c-green  { color: #34A853; }

.gs-signin-link-btn {
  background: transparent;
  border: none;
  color: #0b57d0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.gs-signin-link-btn:hover {
  background: #f0f4f9;
}

.gs-join-pill-btn {
  background: #0b57d0;
  color: #ffffff;
  border: none;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.gs-join-pill-btn:hover {
  background: #0842a0;
  box-shadow: 0 2px 8px rgba(11, 87, 208, 0.3);
}

.gs-search-submit-btn {
  background: transparent;
  border: none;
  color: #444746;
  font-size: 19px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.gs-rail-btn,
.gs-rail-item {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 2px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #444746 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border-radius: 12px !important;
}

.gs-rail-btn.gs-auth-hidden,
.gs-rail-item.gs-auth-hidden,
.gs-auth-hidden {
  display: none !important;
}

.gs-rail-icon {
  width: 52px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #444746;
  transition: background 0.18s ease, color 0.18s ease;
}

.gs-rail-btn:hover .gs-rail-icon,
.gs-rail-item:hover .gs-rail-icon {
  background: #f0f4f9;
  color: #1f1f1f;
}

.gs-rail-btn.active .gs-rail-icon,
.gs-rail-item.active .gs-rail-icon {
  background: #d3e3fd !important;
  color: #0b57d0 !important;
}

.gs-rail-btn.active .gs-rail-label,
.gs-rail-item.active .gs-rail-label {
  color: #0b57d0 !important;
  font-weight: 700 !important;
}

.gs-caret {
  font-size: 10px;
  margin-left: 2px;
  opacity: 0.75;
}

.gs-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}

.gs-shape-title-left {
  top: 6px;
  left: -95px;
  width: 125px;
  height: 110px;
}

.gs-hero-subhead {
  font-size: 16.5px;
  color: #444746;
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto 28px;
}

.gs-hero-search-wrap {
  max-width: 580px;
  margin: 0 auto 24px;
}

.gs-floating-pill-container {
  display: flex;
  justify-content: center;
  margin: 8px 0 36px;
  padding: 0 20px;
}

.gs-floating-pill-nav a {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: #444746;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.gs-floating-pill-nav a:hover,
.gs-floating-pill-nav a.active {
  background: #e8f0fe;
  color: #0b57d0;
  font-weight: 600;
}

.gs-dark-showcase-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 28px;
}

.gs-dark-showcase-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.8vw, 42px);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 14px;
}

.gs-dark-showcase-header p {
  font-size: 15.5px;
  color: #c4c7c5;
  line-height: 1.55;
}

.gs-ai-word-gradient {
  background: linear-gradient(90deg, #8ab4f8 0%, #c58af9 55%, #f28b82 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.gs-dark-chips-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.gs-btn-lightblue-pill {
  background: #8ab4f8;
  color: #041e49;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
}

.gs-btn-lightblue-pill:hover {
  background: #aecbfa;
}

.gs-section-center-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}

.gs-section-center-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500;
  color: #1f1f1f;
  line-height: 1.2;
  margin-bottom: 12px;
}

.gs-section-center-head p {
  font-size: 15.5px;
  color: #444746;
  line-height: 1.55;
}

.gs-media-msg-text h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500;
  color: #1f1f1f;
  line-height: 1.2;
  margin-bottom: 16px;
}

.gs-media-msg-text p {
  font-size: 15.5px;
  color: #444746;
  line-height: 1.6;
  margin-bottom: 24px;
}

.gs-btn-outlined-pill {
  background: #ffffff;
  color: #0b57d0;
  border: 1px solid #747775;
  border-radius: 999px;
  padding: 11px 24px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.gs-btn-outlined-pill:hover {
  background: #f0f4f9;
  border-color: #0b57d0;
}

.gs-gear-title {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: transparent;
  -webkit-text-stroke: 2px #4285F4;
  text-shadow: 0 0 24px rgba(66, 133, 244, 0.5);
  text-align: center;
}

.gs-gear-pill {
  align-self: center;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e3e3e3;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 999px;
}

.gs-team-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #d3e3fd;
  color: #1f1f1f;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.gs-statistics-block h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 500;
  color: #1f1f1f;
  line-height: 1.2;
  margin-bottom: 40px;
}

.gs-metric-item {
  text-align: center;
  padding: 12px 16px;
}

.gs-metric-kicker {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #188038;
  margin-bottom: 4px;
}

.gs-metric-item h3 {
  font-family: var(--font-heading);
  font-size: clamp(48px, 5.5vw, 68px);
  font-weight: 500;
  color: #188038;
  line-height: 1.05;
  margin-bottom: 12px;
}

.gs-metric-item p {
  font-size: 14.5px;
  color: #444746;
  line-height: 1.55;
}

.gs-metric-item p a {
  color: #444746;
  text-decoration: underline;
}

.gs-credentials-block {
  display: block !important;
  max-width: 1220px;
  margin: 0 auto 72px;
  padding: 0 24px;
}

.gs-credentials-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.gs-credentials-illus {
  background: #f8fafd;
  border: 1px solid #e0e4eb;
  border-radius: 28px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-credentials-illus svg {
  width: 100%;
  max-width: 440px;
  height: auto;
}

.gs-acc-item {
  cursor: pointer;
  padding: 10px 0 10px 20px;
  border-left: 3px solid transparent;
  margin-left: -27px;
  transition: all 0.2s ease;
}

.gs-acc-item.active {
  border-left-color: #0b57d0;
}

.gs-acc-item h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: #5f6368;
  margin-bottom: 8px;
}

.gs-acc-item.active h3 {
  color: #1f1f1f;
  font-weight: 600;
}

.gs-acc-body {
  display: none;
}

.gs-acc-item.active .gs-acc-body {
  display: block;
}

.gs-acc-body p {
  font-size: 14.5px;
  color: #444746;
  line-height: 1.6;
  margin-bottom: 10px;
}

.gs-acc-body a {
  color: #0b57d0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.gs-acc-body a:hover {
  text-decoration: underline;
}

.gs-super-emblem {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.gs-bottom-cta-block p {
  max-width: 620px;
  margin: 0 auto 24px;
  font-size: 15.5px;
  color: #444746;
  line-height: 1.55;
}

.gs-footer-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 18px;
}

.gs-footer-links-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 10px 0;
}

.gs-footer-links-row.secondary {
  border-top: 1px solid #f0f4f9;
  margin-top: 8px;
  padding-top: 16px;
}

.gs-footer-links-row a {
  font-size: 13.5px;
  color: #5f6368;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gs-footer-links-row a:hover {
  color: #0b57d0;
}

/* Internal Shell Layout Overrides */
#memberPlatformShell.gs-internal-shell {
  display: flex;
  flex-direction: column !important;
  min-height: 100vh;
  background: #eef2f6 !important;
}

.gs-internal-body {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 64px);
  background: #eef2f6 !important;
}

.gs-internal-rail {
  position: sticky !important;
  top: 64px !important;
  left: 0 !important;
  height: calc(100vh - 64px) !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  background: #ffffff !important;
  border-right: 1px solid #e5e9f0 !important;
  padding: 16px 6px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.gs-internal-main-wrapper {
  flex: 1 !important;
  margin-left: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  background: #eef2f6 !important;
  display: flex;
  flex-direction: column;
}

.gs-internal-content {
  flex: 1;
  padding: 20px 32px 56px !important;
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
}

#dashQuickCoursesGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1180px) {
  #dashQuickCoursesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #dashQuickCoursesGrid {
    grid-template-columns: 1fr;
  }
}

.gs-dash-top-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-bottom: 18px;
}

.gs-dash-top-text {
  font-size: 13.5px;
  color: #444746;
  font-weight: 500;
}

.gs-hero-breadcrumbs a {
  color: #0b57d0;
  text-decoration: none;
  font-weight: 500;
}

.gs-hero-breadcrumbs a:hover {
  text-decoration: underline;
}

.gs-bread-gt {
  color: #5f6368;
  margin: 0 4px;
}

.gs-hero-activity-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 400;
  color: #1f1f1f !important;
  line-height: 1.28;
  margin-bottom: 18px;
}

.gs-hero-continue-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.gs-duration-meta {
  font-size: 13.5px;
  color: #5f6368;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gs-mini-stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #1f1f1f;
}

.gs-big-stat-num {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  color: #1f1f1f;
  line-height: 1;
}

.gs-streak-flame-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-3d-flame {
  font-size: 34px;
  color: #ff6d00;
  filter: drop-shadow(0 3px 6px rgba(255, 109, 0, 0.28));
}

.gs-streak-flame-info span {
  font-size: 13px;
  color: #444746;
  line-height: 1.25;
  font-weight: 500;
}

.gs-day-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gs-day-circle.dashed {
  background: transparent;
  border: 1.5px dashed #c4c7c5;
}

.gs-day-circle.active {
  background: #fff3e0;
  border: 1.5px solid #ffb74d;
  color: #ef6c00;
  font-weight: 700;
}

.gs-ach-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.gs-ach-widget-head h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: #1f1f1f !important;
}

.gs-diamond-badge-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0 14px;
  cursor: pointer;
}

.gs-diamond-pill {
  margin-top: -16px;
  z-index: 2;
  background: #ffffff;
  border: 1px solid #e0e4eb;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #1f1f1f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.gs-compact-missions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eef2f6;
}


/* ===================================================================== */
/* GOOGLE SKILLS MODEL REPLICATION: CATALOG, PATHS, COLLECTIONS, CREDENTIALS */
/* ===================================================================== */

/* --- Top Sub-Banner Strip (Shared across all Google Skills pages) --- */
.gs-page-sub-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid #e0e4eb;
  background: #ffffff;
  font-size: 13.5px;
  gap: 16px;
  flex-wrap: wrap;
}

.gs-page-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5f6368;
}

.gs-page-breadcrumbs a {
  color: #1f1f1f;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  transition: color 0.15s;
}

.gs-page-breadcrumbs a:hover {
  color: #0b57d0;
}

.gs-bread-gt {
  color: #9aa0a6;
  font-size: 11px;
}

.gs-sub-banner-right {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #444746;
  font-size: 13.5px;
}

.gs-sub-banner-btn {
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 999px;
  padding: 6px 18px;
  font-weight: 500;
  font-size: 13.5px;
  color: #1f1f1f;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.gs-sub-banner-btn:hover {
  background: #f8fafd;
  border-color: #1f1f1f;
}

/* --- 1. CATALOG PAGE (https://www.skills.google/catalog) --- */
.gs-catalog-hero {
  text-align: center;
  max-width: 1180px;
  margin: 48px auto 32px;
  padding: 0 20px;
}

.gs-catalog-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.3vw, 46px);
  font-weight: 500;
  color: #1f1f1f !important;
  line-height: 1.15;
  margin-bottom: 20px;
  white-space: nowrap;
}

.gs-catalog-hero p {
  font-size: 15.5px;
  color: #444746;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 32px;
}

.gs-catalog-search-pill {
  display: flex;
  align-items: center;
  background: #ffffff !important;
  border-radius: 999px;
  padding: 6px 8px 6px 24px;
  max-width: 640px;
  margin: 0 auto 24px;
  border: 1px solid #c4c7c5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.gs-catalog-search-pill:focus-within {
  border-color: #0b57d0;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(11, 87, 208, 0.15);
}

.gs-catalog-search-pill input {
  flex: 1;
  border: none !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 15px;
  color: #1f1f1f !important;
  font-family: inherit;
}

.gs-catalog-search-pill input::placeholder {
  color: #5f6368;
}

.gs-search-submit-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #444746;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.gs-search-submit-btn:hover {
  background: #e2e7ef;
  color: #1f1f1f;
}

.gs-catalog-dropdowns-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.gs-dropdown-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid #747775;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: #1f1f1f;
  background: #ffffff;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}

.gs-dropdown-pill:hover,
.gs-dropdown-pill:focus {
  border-color: #1f1f1f;
  background: #f8fafd;
}

.gs-dropdown-pill small {
  margin-left: 6px;
  color: #747775;
}

.gs-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  z-index: 100;
  overflow: hidden;
  padding: 6px 0;
}

.gs-dropdown-pill:focus-within .gs-dropdown-menu,
.gs-dropdown-pill.open .gs-dropdown-menu {
  display: block;
}

.gs-dropdown-menu button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 13.5px;
  color: #1f1f1f;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.gs-dropdown-menu button:hover {
  background: #f0f4f9;
}

.gs-catalog-counter-row {
  text-align: center;
  max-width: 1220px;
  margin: 0 auto 14px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 500;
  color: #3c4043;
}

.gs-catalog-view-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 16px auto 28px;
  flex-wrap: wrap;
}

.gs-catalog-view-tabs .gs-dark-chip {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.gs-catalog-view-tabs .gs-dark-chip i {
  color: #475569 !important;
  font-size: 15px;
}

.gs-catalog-view-tabs .gs-dark-chip:hover {
  background: #f1f5f9 !important;
  border-color: #1a73e8 !important;
  color: #1a73e8 !important;
}

.gs-catalog-view-tabs .gs-dark-chip:hover i {
  color: #1a73e8 !important;
}

.gs-catalog-view-tabs .gs-dark-chip.active {
  background: #1a73e8 !important;
  border-color: #1a73e8 !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.25);
}

.gs-catalog-view-tabs .gs-dark-chip.active i {
  color: #ffffff !important;
}

.gs-catalog-cards-container {
  max-width: 1220px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

/* Card Specific Badges for Google Skills */
.gs-badge-black {
  background: #1f1f1f !important;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gs-badge-outline {
  background: #ffffff !important;
  color: #1f1f1f !important;
  border: 1px solid #dadce0;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gs-badge-lab {
  background: #f0f4f9 !important;
  color: #1f1f1f !important;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- 2. PATHS PAGE (https://www.skills.google/paths) --- */
.gs-paths-hero {
  text-align: center;
  max-width: 900px;
  margin: 48px auto 36px;
  padding: 0 20px;
}

.gs-paths-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  color: #1f1f1f !important;
  line-height: 1.15;
  margin-bottom: 20px;
}

.gs-ai-word-gradient {
  background: linear-gradient(90deg, #1a73e8 0%, #a142f4 50%, #ea4335 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gs-paths-hero p {
  font-size: 15px;
  color: #444746;
  line-height: 1.6;
  max-width: 740px;
  margin: 0 auto 36px;
}

.gs-paths-cat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.gs-path-cat-btn {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #444746;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  padding: 4px 8px;
  transition: color 0.2s;
}

.gs-path-cat-btn:hover,
.gs-path-cat-btn.active {
  color: #0b57d0;
  font-weight: 600;
}

.gs-cat-icon-box {
  font-size: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4f9;
  color: #1f1f1f;
  transition: all 0.2s;
}

.gs-path-cat-btn.active .gs-cat-icon-box {
  background: #d3e3fd;
  color: #0b57d0;
}

.gs-paths-cards-container {
  max-width: 1220px;
  margin: 0 auto 32px;
  padding: 0 24px;
}

.gs-paths-bottom-feature {
  max-width: 1220px;
  margin: 40px auto 80px;
  padding: 48px;
  border-radius: 28px;
  background: #f8fafd;
  border: 1px solid #e0e4eb;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.gs-paths-feat-left h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  color: #1f1f1f !important;
  line-height: 1.2;
  margin-bottom: 12px;
}

.gs-paths-feat-left h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1f1f1f !important;
  margin-bottom: 16px;
}

.gs-paths-feat-left p {
  font-size: 14.5px;
  color: #444746;
  line-height: 1.6;
  margin-bottom: 24px;
}

.gs-paths-neon-box {
  background: #000000;
  border-radius: 24px;
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease;
}

.gs-paths-neon-box:hover {
  transform: scale(1.02);
}

.gs-paths-neon-text {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #d3e3fd 0%, #e879f9 50%, #fde047 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
}

.gs-paths-neon-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 600;
  margin-top: 4px;
}

.gs-paths-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  color: #000000;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-top: 16px;
  cursor: pointer;
  transition: transform 0.2s;
}

.gs-paths-neon-box:hover .gs-paths-play-btn {
  transform: scale(1.1);
}

/* --- 3. COLLECTIONS PAGE (https://www.skills.google/collections/ai-boost-bites) --- */
.gs-collections-hero {
  position: relative;
  max-width: 1220px;
  margin: 40px auto;
  padding: 0 24px;
  text-align: center;
}

.gs-shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.gs-shape-col-left {
  left: -40px;
  top: 0;
  width: 220px;
}

.gs-shape-col-right {
  right: -40px;
  top: -20px;
  width: 240px;
}

.gs-collections-hero h1 {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 500;
  color: #1f1f1f !important;
  line-height: 1.15;
  margin-bottom: 40px;
}

.gs-collections-hero-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 36px;
  align-items: center;
  text-align: left;
  background: #ffffff;
  border-radius: 28px;
  padding: 40px;
  border: 1px solid #e0e4eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.gs-col-hero-left h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 500;
  color: #1f1f1f !important;
  line-height: 1.25;
  margin-bottom: 16px;
}

.gs-col-hero-left p {
  font-size: 15px;
  color: #444746;
  line-height: 1.6;
  margin-bottom: 24px;
}

.gs-col-hero-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 24px;
}

.gs-collections-section-head {
  text-align: center;
  max-width: 820px;
  margin: 64px auto 36px;
  padding: 0 20px;
}

.gs-collections-section-head h2 {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 500;
  color: #1f1f1f !important;
  margin-bottom: 12px;
}

.gs-collections-section-head p {
  font-size: 15px;
  color: #444746;
  line-height: 1.6;
}

.gs-collections-cards-container {
  max-width: 1220px;
  margin: 0 auto 80px;
  padding: 0 24px;
}

/* --- 4. CREDENTIALS PAGE (https://www.skills.google/credentials/certificate) --- */
.gs-cred-hero {
  position: relative;
  text-align: center;
  max-width: 860px;
  margin: 48px auto 40px;
  padding: 0 20px;
}

.gs-cred-bg-shape {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  height: 260px;
  background: #e8f0fe;
  border-radius: 50% 50% 40% 40%;
  filter: blur(24px);
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;
}

.gs-cred-badge-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f4f9;
  border: 1px solid #dadce0;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #1f1f1f;
  margin-bottom: 20px;
}

.gs-cred-hero h1 {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 500;
  color: #1f1f1f !important;
  line-height: 1.15;
  margin-bottom: 20px;
}

.gs-c-blue {
  color: #0b57d0 !important;
}

.gs-cred-hero p {
  position: relative;
  z-index: 1;
  font-size: 15px;
  color: #444746;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 28px;
}

.gs-cred-subnav-wrap {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}

.gs-floating-pill-nav {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 999px;
  padding: 4px 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.gs-floating-pill-nav button {
  background: transparent;
  border: none;
  padding: 8px 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: #5f6368;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.gs-floating-pill-nav button.active {
  background: #e8f0fe;
  color: #0b57d0;
  font-weight: 600;
}

.gs-cred-pillars-row {
  max-width: 1140px;
  margin: 48px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.gs-cred-pillar h2 {
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 600;
  color: #0b57d0 !important;
  margin-bottom: 12px;
}

.gs-cred-pillar p {
  font-size: 15px;
  color: #444746;
  line-height: 1.5;
}

.gs-cred-split-row {
  max-width: 1220px;
  margin: 48px auto 64px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.gs-cred-split-left h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  color: #1f1f1f !important;
  margin-bottom: 16px;
}

.gs-cred-split-left p {
  font-size: 15px;
  color: #444746;
  line-height: 1.6;
  margin-bottom: 20px;
}

.gs-cred-cat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0b57d0;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 28px;
  transition: gap 0.2s;
}

.gs-cred-cat-link:hover {
  gap: 12px;
}

.gs-cred-stat-box {
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.gs-cred-stat-box h3 {
  font-size: 52px;
  font-weight: 700;
  color: #1f1f1f !important;
  margin-bottom: 8px;
  line-height: 1;
}

.gs-cred-stat-box p {
  font-size: 14px;
  color: #444746;
  line-height: 1.5;
  margin: 0;
}

.gs-cred-ribbon-card {
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 28px;
  padding: 48px;
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.gs-cred-ribbon-text {
  font-size: clamp(32px, 3.8vw, 44px);
  font-weight: 700;
  color: #1f1f1f !important;
  line-height: 1.15;
  position: relative;
  z-index: 2;
}

.gs-cred-ribbon-text span {
  font-weight: 500;
  color: #444746;
}

.gs-cred-ribbons-svg {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}

.gs-cred-student-card {
  max-width: 1220px;
  margin: 0 auto 80px;
  padding: 32px;
  background: #f0f4f9;
  border-radius: 24px;
  border: 1px solid #d3e3fd;
}

.gs-cred-student-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1f1f1f !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.gs-cred-student-card p {
  font-size: 14.5px;
  color: #444746;
  line-height: 1.5;
}

.gs-btn-outline-pill {
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 600;
  color: #1f1f1f;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
}

.gs-btn-outline-pill:hover {
  background: #f8fafd;
  border-color: #1f1f1f;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .gs-paths-bottom-feature,
  .gs-collections-hero-card,
  .gs-cred-split-row {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px;
  }

  .gs-cred-pillars-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .gs-paths-cat-row {
    gap: 16px;
  }
}

/* ===================================================================== */
/* KHRON X INTERACTIVE VIDEO SHOWCASE FOOTER                             */
/* ===================================================================== */
.gs-public-footer.kx-interactive-footer {
  position: relative;
  overflow: hidden;
  background: #040814 !important;
  color: #f8fafc !important;
  padding: 72px 40px 36px !important;
  margin-top: 48px !important;
  border-top: 1px solid rgba(59, 130, 246, 0.28) !important;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -20px 60px rgba(2, 6, 23, 0.35);
}

.kx-footer-video-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.kx-footer-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.36;
  filter: saturate(1.25) contrast(1.1);
  transform: scale(1.03);
}

.kx-footer-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.85;
}

.kx-footer-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 18% 22%, rgba(37, 99, 235, 0.24) 0%, transparent 50%),
    radial-gradient(circle at 82% 30%, rgba(6, 182, 212, 0.18) 0%, transparent 52%),
    linear-gradient(180deg, rgba(4, 8, 20, 0.72) 0%, rgba(5, 10, 25, 0.86) 55%, rgba(3, 7, 18, 0.96) 100%);
}

.kx-footer-inner {
  position: relative;
  z-index: 3;
  max-width: 1280px;
  margin: 0 auto;
}

.kx-footer-showcase-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: stretch;
}

.kx-footer-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.4);
  color: #93c5fd;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.kx-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: kxPulseDot 1.8s infinite ease-in-out;
}

@keyframes kxPulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

.kx-footer-headline {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #ffffff !important;
  margin: 0 0 10px;
}

.kx-footer-subtext {
  font-size: 14.5px;
  line-height: 1.55;
  color: #cbd5e1 !important;
  margin: 0 0 20px;
  max-width: 580px;
}

.kx-footer-preview-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.kx-preview-tab {
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.22s ease;
  backdrop-filter: blur(10px);
}

.kx-preview-tab:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(96, 165, 250, 0.55);
  transform: translateX(4px);
}

.kx-preview-tab.active {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.34) 0%, rgba(15, 23, 42, 0.88) 100%);
  border-color: #3b82f6;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.22);
}

.kx-tab-num {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(37, 99, 235, 0.25);
  border: 1px solid rgba(96, 165, 250, 0.4);
  color: #93c5fd;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx-preview-tab.active .kx-tab-num {
  background: #2563eb;
  color: #ffffff;
  border-color: #60a5fa;
}

.kx-tab-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}

.kx-tab-info span {
  display: block;
  font-size: 12px;
  color: #94a3b8;
}

.kx-tab-icon {
  font-size: 22px;
  color: #60a5fa;
  justify-self: end;
}

.kx-footer-stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kx-stat-pill {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  color: #cbd5e1;
}

.kx-stat-pill strong {
  color: #60a5fa;
  font-family: var(--font-mono);
  margin-right: 4px;
}

/* Right Monitor Card */
.kx-footer-monitor-card {
  background: rgba(9, 14, 28, 0.86);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(16px);
}

.kx-monitor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.92);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.kx-monitor-dots {
  display: flex;
  gap: 6px;
}

.kx-monitor-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.kx-monitor-dots span:nth-child(1) { background: #ef4444; }
.kx-monitor-dots span:nth-child(2) { background: #f59e0b; }
.kx-monitor-dots span:nth-child(3) { background: #10b981; }

.kx-monitor-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: 0.05em;
}

.kx-monitor-video-toggle {
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: #e2e8f0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.kx-monitor-video-toggle:hover {
  background: #2563eb;
  color: #ffffff;
}

.kx-monitor-screen {
  position: relative;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  overflow: hidden;
}

.kx-monitor-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  z-index: 0;
}

.kx-monitor-hud-overlay {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(6, 11, 25, 0.45) 0%, rgba(6, 11, 25, 0.92) 100%);
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 14px;
  padding: 16px;
  backdrop-filter: blur(8px);
}

.kx-monitor-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.kx-hud-tag {
  background: rgba(37, 99, 235, 0.28);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.4);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.kx-hud-xp {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.35);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.kx-monitor-lesson-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: #ffffff !important;
  margin: 0 0 10px;
  line-height: 1.3;
}

.kx-monitor-code-box {
  background: rgba(2, 6, 23, 0.88);
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: #93c5fd;
  overflow-x: auto;
}

.kx-monitor-progress-bar {
  height: 6px;
  background: rgba(30, 41, 59, 0.9);
  cursor: pointer;
  position: relative;
}

.kx-monitor-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%);
  transition: width 0.3s ease;
}

.kx-monitor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(15, 23, 42, 0.94);
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  flex-wrap: wrap;
}

.kx-monitor-meta strong {
  display: block;
  font-size: 13px;
  color: #ffffff;
}

.kx-monitor-meta span {
  font-size: 11.5px;
  color: #94a3b8;
}

.kx-monitor-actions {
  display: flex;
  gap: 8px;
}

.kx-btn-monitor-secondary {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #e2e8f0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.kx-btn-monitor-secondary:hover {
  border-color: #93c5fd;
  color: #ffffff;
}

.kx-btn-monitor-primary {
  background: #2563eb;
  border: 1px solid #3b82f6;
  color: #ffffff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.kx-btn-monitor-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.kx-footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.25) 20%, rgba(59, 130, 246, 0.45) 50%, rgba(148, 163, 184, 0.25) 80%, transparent 100%);
  margin: 44px 0 36px;
}

/* Mega Navigation 5-Column Grid */
.kx-footer-mega-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 36px;
}

.kx-footer-brand-desc {
  font-size: 13px;
  line-height: 1.55;
  color: #94a3b8 !important;
  margin: 0 0 12px;
}

.kx-footer-sys-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.kx-sys-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.kx-footer-newsletter label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 6px;
}

.kx-newsletter-row {
  display: flex;
  gap: 6px;
}

.kx-newsletter-row input {
  flex: 1;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: #ffffff;
  outline: none;
}

.kx-newsletter-row input:focus {
  border-color: #3b82f6;
}

.kx-newsletter-row button {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.kx-newsletter-row button:hover {
  background: #1d4ed8;
}

.kx-footer-nav-col h4 {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
}

.kx-footer-nav-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.kx-footer-nav-col ul li a {
  font-size: 13px;
  color: #cbd5e1 !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.kx-footer-nav-col ul li a:hover {
  color: #60a5fa !important;
  transform: translateX(3px);
}

.kx-footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  font-size: 12.5px;
  color: #94a3b8;
}

.kx-footer-copyright {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-footer-badges {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #64748b;
}

.kx-footer-badges span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #93c5fd;
}

.kx-footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.kx-footer-bottom-links a {
  color: #cbd5e1 !important;
  text-decoration: none;
  font-size: 12.5px;
  transition: color 0.2s;
}

.kx-footer-bottom-links a:hover {
  color: #60a5fa !important;
}

.kx-back-to-top-btn {
  background: rgba(37, 99, 235, 0.22);
  border: 1px solid rgba(96, 165, 250, 0.4);
  color: #ffffff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.kx-back-to-top-btn:hover {
  background: #2563eb;
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .kx-footer-showcase-grid {
    grid-template-columns: 1fr;
  }
  .kx-footer-mega-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .gs-public-footer.kx-interactive-footer {
    padding: 44px 20px 28px !important;
  }
  .kx-footer-mega-grid {
    grid-template-columns: 1fr;
  }
}