/* ================================================================
   Rankora.gg - Circlow-inspired Light Dashboard Theme
   Clean, modern, light UI with orange accent
================================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Light Backgrounds */
  --bg-body:      #f5f6fa;
  --bg-sidebar:   #ffffff;
  --bg-card:      #ffffff;
  --bg-card-hover:#fafbfd;
  --bg-input:     #f5f6fa;

  /* Orange Accent */
  --orange:        #ff6b2b;
  --orange-light:  #ff8f5e;
  --orange-bg:     rgba(255,107,43,0.08);
  --orange-border: rgba(255,107,43,0.25);

  /* Green */
  --green:         #22c55e;
  --green-bg:      rgba(34,197,94,0.08);

  /* Red */
  --red:           #ef4444;
  --red-bg:        rgba(239,68,68,0.08);

  /* Borders */
  --border:        #e8eaef;
  --border-light:  #f0f1f5;

  /* Text */
  --text-primary:   #1a1d26;
  --text-secondary: #6b7280;
  --text-dim:       #9ca3af;
  --text-white:     #ffffff;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.08);
  --shadow-card:0 2px 8px rgba(0,0,0,0.04);

  /* Radius */
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  /* Legacy aliases for JS compat */
  --accent:        #ff6b2b;
  --accent-purple: #ff6b2b;
  --accent-cyan:   #ff6b2b;
  --accent-pink:   #ef4444;
  --gold:          #ff6b2b;
  --gold-light:    #ff8f5e;
  --ally:          #22c55e;
  --enemy:         #ef4444;
  --phys-color:    #ff6b2b;
  --magic-color:   #3b82f6;
  --primary-gradient: linear-gradient(135deg, #ff6b2b, #ff8f5e);
  --bg-deep:       #f5f6fa;
  --bg-card2:      #f5f6fa;
}

/*  RESET  */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  min-height: 100vh;
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

/* Remove old dark backgrounds */
body::before { display: none !important; }
.bg-grid, .bg-glow { display: none !important; }
html::after { display: none !important; }

/*  SCROLLBAR  */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* 
   LAYOUT: Sidebar + Main
 */

.app-wrapper {
  display: flex;
  min-height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

/*  FLOATING LOGO  */
.floating-logo { display: none !important; }

/*  SIDEBAR  */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
  z-index: 100;
  box-shadow: 2px 0 8px rgba(0,0,0,0.02);
  transition: transform 0.3s ease;
}

.sidebar-logo {
  padding: 24px 24px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-light);
}
.sidebar-logo img {
  width: 210px;
  height: 210px;
  object-fit: contain;
  filter: none;
}

.sidebar-nav {
  flex: 1;
  padding: 24px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
  box-shadow: none;
}
.sidebar-item svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-dim);
  flex-shrink: 0;
  transition: stroke 0.15s;
}
.sidebar-item span {
  flex: 1;
}
.sidebar-item:hover {
  background: var(--bg-body);
  color: var(--text-primary);
  transform: none;
  box-shadow: none;
}
.sidebar-item:hover svg {
  stroke: var(--text-primary);
}
.sidebar-item.active {
  background: var(--orange-bg);
  color: var(--orange);
  font-weight: 600;
  transform: none;
  box-shadow: none;
  border-left: 3px solid var(--orange);
  padding-left: 11px;
}
.sidebar-item.active svg {
  stroke: var(--orange);
}

/* Styles pour le menu d�roulant Tools */
.sidebar-dropdown {
  position: relative;
}
.sidebar-dropdown .dropdown-arrow {
  width: 16px;
  height: 16px;
  stroke: var(--text-dim);
  transition: transform 0.2s ease, stroke 0.15s;
  margin-left: auto;
}
.sidebar-dropdown:hover .dropdown-arrow {
  stroke: var(--text-primary);
}
.sidebar-dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
  stroke: var(--orange);
}
.sidebar-submenu {
  display: none;
  flex-direction: column;
  background: var(--bg-body);
  border-radius: 8px;
  margin: 4px 0;
  padding: 4px;
  border: 1px solid var(--border-light);
}
.sidebar-dropdown.active .sidebar-submenu {
  display: flex;
}
.sidebar-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
}
.sidebar-subitem:hover {
  background: var(--orange-bg);
  color: var(--orange);
}
.sidebar-subitem:hover svg {
  stroke: var(--orange);
}
.sidebar-subitem svg {
  stroke: var(--text-dim);
  flex-shrink: 0;
  transition: stroke 0.15s;
}
.sidebar-subitem.active {
  background: var(--orange-bg);
  color: var(--orange);
  font-weight: 600;
}
.sidebar-subitem.active svg {
  stroke: var(--orange);
}

.sidebar-bottom {
  padding: 16px;
  border-top: 1px solid var(--border-light);
}
.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-plan-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--orange-bg);
  color: var(--orange);
  border: 1px solid var(--orange-border);
}
.sidebar-username {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.sidebar-rank-display {
  font-size: 12px;
  color: var(--text-secondary);
}
.sidebar-logout-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  margin-top: 8px;
}
.sidebar-logout-btn:hover {
  background: var(--red-bg);
  border-color: rgba(239,68,68,0.3);
  color: var(--red);
}
.sidebar-logout-btn svg { stroke: currentColor; }

/*  USER BAR (guests)  */
.user-bar {
  position: fixed;
  top: 16px;
  right: 148px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  z-index: 100000;
  box-shadow: var(--shadow-sm);
  -webkit-app-region: no-drag;
}
.user-name {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
}
.user-btn {
  border: 1px solid var(--orange-border);
  background: var(--orange);
  color: white;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s ease;
  box-shadow: none;
  -webkit-app-region: no-drag;
}
.user-btn:hover {
  background: var(--orange-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,107,43,0.25);
}
.user-btn.active {
  box-shadow: 0 2px 8px rgba(255,107,43,0.3);
}
.user-btn-sub {
  background: transparent !important;
  color: var(--orange) !important;
  border: 1px solid var(--orange-border) !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
}
.user-btn-sub:hover {
  background: var(--orange-bg) !important;
}
.user-btn-tracking {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}

.user-btn-outline {
  background: transparent;
  color: var(--orange);
  border-color: var(--orange-border);
}
.user-btn-outline:hover {
  background: var(--orange-bg);
}

.window-drag-region {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 99999;
  -webkit-app-region: drag;
}

.window-controls {
  position: absolute;
  top: 8px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-app-region: no-drag;
}

.window-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
  -webkit-app-region: no-drag;
}

.window-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.window-btn:hover {
  border-color: var(--orange-border);
  background: var(--orange-bg);
  color: var(--orange);
}

.window-btn-close:hover {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.window-controls.is-maximized .icon-maximize { display: none; }
.window-controls.is-maximized .icon-restore { display: block; }
.window-controls .icon-restore { display: none; }

.plan-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--orange-border);
  color: var(--orange);
  background: var(--orange-bg);
}
.plan-badge:hover { transform: scale(1.05); }

/*  PAGE  */
.page {
  display: none;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

/* When sidebar is visible, push content right */
body.has-sidebar .page,
body.has-sidebar .app-wrapper {
  padding-left: 260px;
}

/*  MAIN HEADER  */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.app-header-home {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 16px 32px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: opacity 0.25s ease;
  -webkit-app-region: drag;
}
.app-header-home.logo-hidden {
  opacity: 0;
  pointer-events: none;
}
.logo-block-home {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-icon-home {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: none;
}
.logo-text-home {
  display: none !important;
}

/* 
   HOME PAGE (guests) – Onboarding Wizard
 */
#homePage {
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg-body);
  min-height: 100vh;
  overflow: hidden;
}

/* ── Wizard Wrapper ── */
.wizard-wrapper {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 30px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  justify-content: center;
}

/* ── Skip / Sign-in link ── */
.wizard-skip-btn {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: color 0.25s ease;
  z-index: 10;
  white-space: nowrap;
}
.wizard-skip-btn span {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wizard-skip-btn:hover { color: var(--text-primary); }

/* ── Progress bar ── */
.wizard-progress {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  margin-bottom: 16px;
  overflow: hidden;
}
.wizard-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), #ff8f5a);
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Step dots ── */
.wizard-steps-indicator {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}
.wizard-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.4s ease;
}
.wizard-dot.active {
  background: var(--orange);
  box-shadow: 0 0 12px rgba(255,107,43,0.5);
  transform: scale(1.2);
}
.wizard-dot.completed {
  background: var(--orange);
  opacity: 0.6;
}

/* ── Step container ── */
.wizard-step {
  display: none;
  width: 100%;
  animation: wizardSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wizard-step.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wizard-step.slide-out-left {
  animation: wizardSlideOutLeft 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
.wizard-step.slide-out-right {
  animation: wizardSlideOutRight 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes wizardSlideIn {
  from { opacity: 0; transform: translateX(60px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes wizardSlideInFromLeft {
  from { opacity: 0; transform: translateX(-60px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes wizardSlideOutLeft {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(-60px) scale(0.96); }
}
@keyframes wizardSlideOutRight {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(60px) scale(0.96); }
}

/* ── Card ── */
.wizard-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 36px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Logo icon ── */
.wizard-logo-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  animation: wizardPulse 2.5s ease-in-out infinite;
}
.wizard-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(255,107,43,0.3));
}
@keyframes wizardPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 16px rgba(255,107,43,0.3)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 6px 24px rgba(255,107,43,0.5)); }
}

/* ── Titles ── */
.wizard-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}
.wizard-brand {
  background: linear-gradient(135deg, var(--orange), #ff8f5a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wizard-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 28px;
  line-height: 1.5;
}

/* ── Fields ── */
.wizard-field {
  width: 100%;
  margin-bottom: 18px;
  text-align: left;
}
.wizard-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.wizard-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s ease;
  outline: none;
  box-sizing: border-box;
}
.wizard-input::placeholder { color: var(--text-dim); }
.wizard-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,107,43,0.15);
  background: var(--bg-card);
}
.wizard-input-lp { max-width: 140px; }

.wizard-select {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s ease;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  box-sizing: border-box;
}
.wizard-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}
.wizard-select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,107,43,0.15);
}

/* ── Rank fields grid ── */
.wizard-rank-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
}
.wizard-rank-fields > .wizard-field:last-child {
  grid-column: 1 / -1;
}

/* ── Role buttons ── */
.wizard-roles {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: nowrap;
}
.wizard-role-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: 'Inter', sans-serif;
  min-width: 60px;
}
.wizard-role-btn span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.25s ease;
}
.wizard-role-icon {
  width: 32px;
  height: 32px;
  opacity: 0.6;
  transition: all 0.25s ease;
  filter: grayscale(0.5);
}
.wizard-role-btn:hover {
  border-color: rgba(255,107,43,0.3);
  background: rgba(255,107,43,0.06);
  transform: translateY(-2px);
}
.wizard-role-btn:hover .wizard-role-icon { opacity: 0.8; filter: grayscale(0); }
.wizard-role-btn.active {
  border-color: var(--orange);
  background: rgba(255,107,43,0.1);
  box-shadow: 0 0 20px rgba(255,107,43,0.15);
}
.wizard-role-btn.active span { color: var(--orange); }
.wizard-role-btn.active .wizard-role-icon { opacity: 1; filter: grayscale(0) drop-shadow(0 2px 8px rgba(255,107,43,0.4)); }

/* ── Navigation buttons ── */
.wizard-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--orange), #e85c29);
  border: none;
  border-radius: 14px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
  box-shadow: 0 4px 20px rgba(255,107,43,0.3);
}
.wizard-next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255,107,43,0.4);
}
.wizard-next-btn:active {
  transform: translateY(0);
}

.wizard-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.25s ease;
}
.wizard-back-btn:hover {
  border-color: var(--orange-border);
  color: var(--text-primary);
}

.wizard-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
}

/* ── Step 3: Final ── */
.wizard-card-final {
  padding: 48px 36px;
}
.wizard-rocket {
  font-size: 56px;
  margin-bottom: 16px;
  animation: wizardRocketBounce 1.5s ease-in-out infinite;
}
@keyframes wizardRocketBounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}
.wizard-summary-text {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 24px;
  line-height: 1.6;
}
.wizard-summary-text strong {
  color: var(--orange);
  font-weight: 700;
}

/* ── Account creation section ── */
.wizard-account-section {
  width: 100%;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  margin-bottom: 8px;
}
.wizard-account-hint {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 16px;
  text-align: center;
}

.wizard-error {
  width: 100%;
  padding: 10px 14px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 10px;
  color: #ef4444;
  font-size: 13px;
  text-align: center;
  margin-bottom: 12px;
}

/* ── Start button ── */
.wizard-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 48px;
  background: linear-gradient(135deg, var(--orange), #e85c29);
  border: none;
  border-radius: 16px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 30px rgba(255,107,43,0.35);
  margin-bottom: 16px;
}
.wizard-start-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 40px rgba(255,107,43,0.5);
}
.wizard-start-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ── Ambient particles (via JS) ── */
.wizard-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  background: var(--orange);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: wizardParticleFloat 6s ease-in-out infinite;
}
@keyframes wizardParticleFloat {
  0% { opacity: 0; transform: translateY(100vh) scale(0); }
  20% { opacity: 0.6; }
  80% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-20vh) scale(1.5); }
}

/* Shake animation for validation */
.wizard-input-shake {
  animation: wizardShake 0.4s ease;
}
@keyframes wizardShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* 
   DASHBOARD HOME (logged-in)
 */
#dashboardHomePage {
  padding-left: 260px;
}
.dash-home-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 40px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ═══════ WELCOME HEADER ═══════ */
.dash-hero-welcome {
  text-align: center;
  padding: 8px 0 0;
}
.dash-hero-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}
.dash-hero-title span {
  background: linear-gradient(135deg, #ff6b2b, #ff8f5e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dash-hero-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* ═══════ ELO PROGRESS HERO ═══════ */
.elo-hero {
  background: #ffffff;
  border: 1px solid #e8eaef;
  border-radius: 16px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,107,43,0.06);
}
.elo-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff6b2b, #ff8f5e, #ffcc80);
  border-radius: 16px 16px 0 0;
}
.elo-hero-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(255,107,43,0.08);
  color: var(--orange);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.hero-badge-logo {
  height: 14px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ─── Top: Rank visual section ─── */
.elo-hero-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.elo-hero-rank-visual {
  display: flex;
  align-items: center;
  gap: 14px;
}
.elo-hero-rank-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elo-hero-rank-icon img {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 12px rgba(255,107,43,0.15));
  transition: transform 0.3s ease;
}
.elo-hero-rank-icon img:hover {
  transform: scale(1.1);
}
.elo-hero-rank-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.elo-hero-rank-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}
.elo-hero-lp {
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
}
.elo-hero-target .elo-hero-rank-name {
  color: var(--text-dim);
}
.elo-hero-rank-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,107,43,0.6);
}
.elo-hero-arrow {
  display: flex;
  align-items: center;
  animation: elo-arrow-pulse 2s ease-in-out infinite;
}
@keyframes elo-arrow-pulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}

/* ─── Progress bar ─── */
.elo-hero-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.elo-hero-progress-bar {
  position: relative;
  height: 10px;
  background: #f0f1f5;
  border-radius: 6px;
  overflow: visible;
}
.elo-hero-progress-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ff6b2b, #ff8f5e);
  transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(255,107,43,0.25);
  position: relative;
}
.elo-hero-progress-marker {
  position: absolute;
  top: -4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ff6b2b;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(255,107,43,0.35);
  transform: translateX(-50%);
  transition: left 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}
.elo-hero-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-dim);
}
.elo-hero-progress-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--orange);
}

/* ─── Stats row ─── */
.elo-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.elo-hero-stat {
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.elo-hero-stat:hover {
  background: rgba(255,107,43,0.04);
  border-color: var(--orange-border);
  box-shadow: 0 2px 8px rgba(255,107,43,0.06);
}
.elo-hero-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.elo-hero-stat-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ─── LP Chart ─── */
.elo-hero-chart-wrap {
  border-radius: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  padding: 12px 8px;
  overflow: hidden;
}
.elo-hero-chart-wrap canvas {
  width: 100%;
  display: block;
}

/* ─── Coach message ─── */
.elo-hero-message {
  min-height: 40px;
}
.elo-msg {
  border-radius: 10px;
  padding: 16px 20px;
  border-left: 4px solid;
}
.elo-msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 15px;
}
.elo-msg-icon {
  font-size: 18px;
}
.elo-msg-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
.elo-msg-success {
  background: rgba(34,197,94,0.06);
  border-color: #22c55e;
}
.elo-msg-success .elo-msg-header { color: #16a34a; }
.elo-msg-info {
  background: rgba(59,130,246,0.06);
  border-color: #3b82f6;
}
.elo-msg-info .elo-msg-header { color: #2563eb; }
.elo-msg-warning {
  background: rgba(245,158,11,0.06);
  border-color: #f59e0b;
}
.elo-msg-warning .elo-msg-header { color: #d97706; }
.elo-msg-danger {
  background: rgba(239,68,68,0.06);
  border-color: #ef4444;
}
.elo-msg-danger .elo-msg-header { color: #dc2626; }

/* ─── Update button ─── */
.elo-hero-update-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: rgba(255,107,43,0.06);
  border: 1px solid var(--orange-border);
  border-radius: 8px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.elo-hero-update-btn:hover {
  background: rgba(255,107,43,0.12);
  border-color: var(--orange);
  box-shadow: 0 4px 16px rgba(255,107,43,0.1);
  transform: translateY(-1px);
}
.elo-hero-update-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.elo-hero-update-btn .spin-icon {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ═══════ SESSION CHECK-IN HERO ═══════ */
.checkin-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.checkin-hero-header {
  text-align: center;
}
.checkin-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 20px;
  background: rgba(255,107,43,0.08);
  color: var(--orange);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.checkin-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.checkin-hero-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}
.checkin-hero-subtitle strong {
  color: var(--orange);
  font-weight: 700;
}
.checkin-hero-card {
  background: #ffffff;
  border: 1px solid #e8eaef;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,107,43,0.04);
  position: relative;
  overflow: hidden;
}
.checkin-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff8f5e, #ff6b2b, #ff8f5e);
}
.checkin-divider {
  height: 1px;
  background: var(--border-light);
  margin: 6px 0;
}
.checkin-field {
  padding: 10px 0;
}
.checkin-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.checkin-optional {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 12px;
}
.checkin-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin: -4px 0 10px;
}
.checkin-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.checkin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.checkin-pill:hover {
  border-color: var(--orange-border);
  background: rgba(255,107,43,0.04);
}
.checkin-pill.selected {
  border-color: var(--orange);
  background: rgba(255,107,43,0.08);
  color: var(--orange);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255,107,43,0.1);
}
.checkin-pill-emoji {
  font-size: 16px;
  line-height: 1;
}
.checkin-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.checkin-tag {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.checkin-tag:hover {
  border-color: var(--orange-border);
  background: rgba(255,107,43,0.03);
}
.checkin-tag.selected {
  border-color: var(--orange);
  background: rgba(255,107,43,0.08);
  color: var(--orange);
  font-weight: 600;
}

/* Check-in objectives */
.checkin-obj-row {
  display: flex;
  gap: 8px;
}
.checkin-obj-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-input);
  font-size: 13px;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.checkin-obj-input:focus {
  border-color: var(--orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,107,43,0.08);
}
.checkin-obj-input::placeholder {
  color: var(--text-dim);
}
.checkin-obj-add {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--orange-border);
  background: rgba(255,107,43,0.06);
  color: var(--orange);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.checkin-obj-add:hover {
  background: rgba(255,107,43,0.12);
  border-color: var(--orange);
}
.checkin-obj-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.checkin-obj-list {
  margin-top: 8px;
}
.checkin-obj-empty {
  color: var(--text-dim);
  font-size: 13px;
  padding: 4px 0;
}

/* Check-in textarea */
.checkin-textarea {
  width: 100%;
  min-height: 70px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-input);
  font-size: 13px;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.checkin-textarea:focus {
  border-color: var(--orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,107,43,0.08);
}
.checkin-textarea::placeholder {
  color: var(--text-dim);
}

/* Check-in submit */
.checkin-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  margin-top: 10px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff6b2b, #ff8f5e);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(255,107,43,0.2);
}
.checkin-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,107,43,0.3);
}
.checkin-submit:active {
  transform: translateY(0);
}

/* ═══════ PROMO FEATURES ═══════ */
.dash-promo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 8px 0 16px;
}
.dash-promo-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  transition: all 0.25s ease;
}
.dash-promo-card:hover {
  border-color: var(--orange-border);
  box-shadow: 0 4px 16px rgba(255,107,43,0.06);
  transform: translateY(-2px);
}
.dash-promo-icon {
  font-size: 28px;
  margin-bottom: 10px;
}
.dash-promo-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.dash-promo-card p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.dash-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-welcome-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}
.dash-welcome-title span { color: var(--orange); }
.dash-welcome-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.dash-rank-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-rank-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}
.dash-rank-lp {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
}
.dash-rank-lp-edit {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,107,43,0.4);
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.dash-rank-lp-edit:hover {
  color: var(--orange);
}
.dash-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.dash-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.dash-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--orange-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-stat-icon svg { stroke: var(--orange) !important; }
.dash-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.dash-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.dash-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 8px;
}

.dash-rank-evolution-section {
  margin: 28px 0;
}
.dash-rank-graph-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  min-height: 280px;
}
#rankEvolutionChart {
  width: 100%;
  height: 280px;
}
.dash-rank-graph-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--text-dim);
}
.dash-rank-graph-placeholder svg {
  margin-bottom: 12px;
}
.dash-rank-graph-placeholder p {
  font-size: 13px;
  color: var(--text-secondary);
}

.dash-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.dash-action-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-card);
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.dash-action-card:hover {
  border-color: var(--orange-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.dash-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-action-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.dash-action-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.dash-action-arrow {
  margin-left: auto;
  color: var(--text-dim);
}
.dash-tip-card {
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-tip-icon svg { stroke: var(--orange) !important; }
.dash-tip-text {
  font-size: 13px;
  color: var(--text-secondary);
}

/* 
   PROFILE PAGE
 */
#profilePage {
  position: fixed !important;
  top: 0 !important;
  left: 260px !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto;
  z-index: 10;
  background: var(--bg-body);
}
.prf-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 40px 32px 40px;
}
.prf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.prf-identity { display: flex; align-items: center; gap: 14px; }
.prf-avatar-ring {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--orange-border);
}
.prf-avatar { width: 100%; height: 100%; object-fit: cover; }
.prf-gamename { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.prf-region-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-body);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-prf-refresh {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--orange-border);
  background: var(--orange);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}
.btn-prf-refresh:hover {
  background: var(--orange-light);
  box-shadow: 0 4px 12px rgba(255,107,43,0.25);
}
.btn-prf-refresh svg { stroke: white !important; }

.prf-main-grid {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  gap: 20px;
}
.prf-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.prf-panel::before { display: none; }
.prf-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prf-panel-title svg { stroke: var(--orange); }
.prf-rank-block { text-align: center; padding: 10px 0; }
.prf-rank-tier { font-size: 24px; font-weight: 700; color: var(--orange); }
.prf-rank-lp { font-size: 14px; color: var(--text-primary); margin: 4px 0; }
.prf-rank-wl { font-size: 12px; color: var(--text-secondary); }
.prf-rank-season {
  font-size: 11px;
  color: var(--text-dim);
  padding: 4px 10px;
  background: var(--bg-body);
  border-radius: 6px;
  display: inline-block;
  margin-top: 4px;
}
.prf-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}
.prf-kpi-grid {
  display: grid;
  gap: 8px;
}
.prf-champs-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.prf-roles-list { display: flex; flex-direction: column; gap: 6px; }
.prf-matches-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 500px;
  overflow-y: auto;
}
.prf-elo-bars { display: flex; flex-direction: column; gap: 6px; }
.prf-form-row { display: flex; flex-direction: column; gap: 12px; }
.prf-form-field { display: flex; flex-direction: column; gap: 4px; }
.prf-form-field label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }

/* 
   STATS PAGE (compat)
 */
#statsPage {
  position: fixed !important;
  top: 0 !important;
  left: 260px !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto;
  z-index: 10;
  background: var(--bg-body);
}
#statsPage::before { display: none; }
.stats-page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 40px 32px 40px;
}
.stats-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.stats-summoner-info { display: flex; align-items: center; gap: 12px; }
.summoner-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--orange-border);
}
.summoner-icon { width: 100%; height: 100%; object-fit: cover; }
.summoner-name { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.summoner-region { font-size: 12px; color: var(--text-secondary); }
.stats-hexie-logo { width: 80px; filter: none; }
.stats-main-grid {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  gap: 16px;
}
.stats-left-col, .stats-right-col { display: flex; flex-direction: column; gap: 14px; }
.stats-rank-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.rank-emblem-large { width: 80px; height: 80px; margin: 0 auto 10px; }
.rank-tier-text { font-size: 22px; font-weight: 700; color: var(--orange); }
.rank-sub-info { font-size: 12px; color: var(--text-secondary); }
.rank-lp-info { font-size: 14px; color: var(--text-primary); margin: 6px 0; }
.rank-season { font-size: 11px; color: var(--text-dim); background: var(--bg-body); padding: 4px 10px; border-radius: 6px; display: inline-block; margin-bottom: 10px; }
.btn-update-profile {
  width: 100%;
  padding: 10px;
  background: var(--orange);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-update-profile:hover { background: var(--orange-light); box-shadow: 0 4px 12px rgba(255,107,43,0.25); }
.stats-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-card);
}
.section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-align: center;
}
.top-champs-grid { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.top-champ-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; }
.top-champ-icon {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--orange-border);
}
.top-champ-icon img { width: 100%; height: 100%; object-fit: cover; }
.top-champ-name { font-size: 11px; font-weight: 600; color: var(--text-primary); text-align: center; }
.top-champ-stats { font-size: 10px; color: var(--text-secondary); text-align: center; }
.stats-center-col { display: flex; flex-direction: column; gap: 8px; }
.recent-matches-list { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow-y: auto; max-height: 480px; }
.match-row {
  display: grid;
  grid-template-columns: 44px 80px 1fr 80px 60px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.15s;
}
.match-row:hover { box-shadow: var(--shadow-sm); }
.match-row.win { border-left: 3px solid var(--green); }
.match-row.loss { border-left: 3px solid var(--red); }
.match-champ-icon { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.match-champ-icon img { width: 100%; height: 100%; object-fit: cover; }
.match-result-text { font-weight: 700; font-size: 13px; }
.match-result-text.win { color: var(--green); }
.match-result-text.loss { color: var(--red); }
.match-queue { font-size: 11px; color: var(--text-secondary); }
.match-kda-main { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.match-kda-sub { font-size: 11px; color: var(--text-secondary); }
.match-cs { font-size: 12px; color: var(--text-secondary); }
.match-duration { font-size: 12px; color: var(--text-dim); text-align: right; }
.btn-full-history {
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-full-history:hover { background: var(--orange-bg); border-color: var(--orange-border); }
.stats-mascot { width: 100%; max-width: 200px; margin: 0 auto; filter: none; }
.stats-overview-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-card);
}
.overview-items { display: flex; flex-direction: column; gap: 10px; }
.overview-row { display: flex; align-items: flex-start; gap: 10px; }
.overview-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-bg); flex-shrink: 0;
}
.overview-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.overview-value { font-size: 11px; color: var(--text-secondary); }
.stats-footer { text-align: center; font-size: 11px; color: var(--text-dim); padding: 12px 0; border-top: 1px solid var(--border); margin-top: 16px; }

/* Roles list */
.roles-list { display: flex; flex-direction: column; gap: 8px; }
.role-row {
  display: grid;
  grid-template-columns: 32px 60px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  background: var(--bg-body);
  border-radius: 8px;
}
.role-icon-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--orange-border);
  background: var(--orange-bg);
}
.role-name { font-weight: 600; font-size: 12px; color: var(--text-primary); }
.role-percent { font-size: 12px; color: var(--orange); }
.role-winrate { font-size: 12px; color: var(--text-secondary); }

/* 
   SETTINGS PAGE
 */
#settingsPage {
  padding-left: 260px;
}

/* 
   DRAFT ANALYSIS PAGE
 */
#draftAnalysisPage {
  position: fixed !important;
  top: 0 !important;
  left: 260px !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto;
  z-index: 10;
  background: var(--bg-body);
}
#draftAnalysisPage::before { display: none; }
.draft-analysis-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 40px 32px 40px;
}

/* Back button */
.draft-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s;
  width: fit-content;
  margin-bottom: 16px;
}
.draft-back-btn:hover { background: var(--bg-body); color: var(--text-primary); border-color: var(--orange-border); }
.draft-back-btn svg { stroke: currentColor; }

/* Header */
.draft-analysis-header, .gr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.draft-header-icon, .gr-header-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-bg);
  border-radius: 12px;
  border: 1px solid var(--orange-border);
}
.draft-analysis-title, .gr-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: var(--text-primary);
}
.draft-analysis-subtitle, .gr-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
}
.draft-header-right { display: flex; align-items: center; gap: 10px; }
.draft-status-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.draft-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.draft-status-badge.active .draft-status-dot { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.draft-status-badge.active { border-color: rgba(34,197,94,0.3); color: var(--green); }
.draft-refresh-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.draft-refresh-btn:hover { background: var(--orange-bg); color: var(--orange); transform: rotate(90deg); }

/* Overlay in-game toggle */
.overlay-toggle-wrapper {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--bg-body); border: 1px solid var(--border);
}
.overlay-toggle-label {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; user-select: none;
}
.overlay-toggle-switch {
  position: relative; display: inline-block;
  width: 38px; height: 20px; flex-shrink: 0;
}
.overlay-toggle-switch input {
  opacity: 0; width: 0; height: 0;
}
.overlay-toggle-slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border); border-radius: 20px;
  transition: background 0.25s;
}
.overlay-toggle-slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 2px; bottom: 2px;
  background: #fff; border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.overlay-toggle-switch input:checked + .overlay-toggle-slider {
  background: var(--orange);
}
.overlay-toggle-switch input:checked + .overlay-toggle-slider::before {
  transform: translateX(18px);
}

/* Teams banner */
.draft-teams-banner {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.draft-team-side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.draft-team-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.draft-team-ally .draft-team-label { color: var(--green); }
.draft-team-enemy .draft-team-label { color: var(--red); }
.draft-team-picks { display: flex; gap: 6px; }
.draft-pick-slot {
  width: 48px; height: 48px; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--border); background: var(--bg-body);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.draft-pick-slot.empty span { font-size: 16px; color: var(--text-dim); }
.draft-pick-slot img { width: 100%; height: 100%; object-fit: cover; }
.draft-team-ally .draft-pick-slot.filled { border-color: rgba(34,197,94,0.4); }
.draft-team-enemy .draft-pick-slot.filled { border-color: rgba(239,68,68,0.4); }
.draft-pick-slot .draft-pick-role { position: absolute; bottom: -2px; right: -2px; font-size: 8px; background: var(--bg-card); padding: 1px 3px; border-radius: 3px; color: var(--text-secondary); font-weight: 600; }
.draft-vs-badge { font-size: 18px; font-weight: 700; color: var(--text-dim); padding: 0 16px; letter-spacing: 3px; }

/* Module cards */
.draft-modules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.draft-module-card, .gr-module-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all 0.2s;
}
.draft-module-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
}
.draft-module-safe::before { background: linear-gradient(90deg, #22c55e, #06b6d4); }
.draft-module-synergy::before { background: linear-gradient(90deg, #ff6b2b, #a78bfa); }
.draft-module-counter::before { background: linear-gradient(90deg, #f97316, #ef4444); }
.draft-module-comfort::before { background: linear-gradient(90deg, #eab308, #f59e0b); }
.draft-module-card:hover, .gr-module-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.draft-module-header, .gr-module-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-light);
}
.draft-module-icon, .gr-module-icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}
.safe-icon { background: rgba(34,197,94,0.08); color: #22c55e; border: 1px solid rgba(34,197,94,0.2); }
.synergy-icon { background: var(--orange-bg); color: #a78bfa; border: 1px solid var(--orange-border); }
.counter-icon { background: rgba(249,115,22,0.08); color: #f97316; border: 1px solid rgba(249,115,22,0.2); }
.comfort-icon { background: rgba(234,179,8,0.08); color: #eab308; border: 1px solid rgba(234,179,8,0.2); }
.script-icon { background: var(--orange-bg); border: 1px solid var(--orange-border); color: var(--orange); }
.mistakes-icon { background: var(--red-bg); border: 1px solid rgba(239,68,68,0.2); color: var(--red); }
.focus-icon { background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.2); color: #eab308; }
.safety-sc-icon { background: var(--green-bg); border: 1px solid rgba(34,197,94,0.2); color: var(--green); }

.draft-module-title { font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.draft-module-tagline { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.draft-module-badge, .gr-module-badge {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.safe-badge { background: rgba(34,197,94,0.08); color: #22c55e; border: 1px solid rgba(34,197,94,0.2); }
.synergy-badge { background: var(--orange-bg); color: #a78bfa; border: 1px solid rgba(167,139,250,0.2); }
.counter-badge { background: rgba(249,115,22,0.08); color: #f97316; border: 1px solid rgba(249,115,22,0.2); }
.comfort-badge { background: rgba(234,179,8,0.08); color: #eab308; border: 1px solid rgba(234,179,8,0.2); }
.mistakes-badge { background: var(--red-bg); color: var(--red); border: 1px solid rgba(239,68,68,0.2); }
.safety-sc-badge { background: var(--green-bg); color: var(--green); border: 1px solid rgba(34,197,94,0.2); }

.draft-module-body, .gr-module-body { padding: 14px 16px 18px; min-height: 120px; }
.draft-module-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 12px; opacity: 0.6;
}
.draft-placeholder-icon { font-size: 28px; }
.draft-module-placeholder p { font-size: 12px; color: var(--text-dim); line-height: 1.5; max-width: 240px; }

/* Result rows */
.draft-result-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-body);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  margin-bottom: 6px;
  transition: all 0.15s;
}
.draft-result-row:hover { background: var(--bg-card); border-color: var(--border); }
.draft-result-icon { width: 36px; height: 36px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.draft-result-icon img { width: 100%; height: 100%; object-fit: cover; }
.draft-result-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.draft-result-detail { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
.draft-result-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.tag-recommended { background: var(--green-bg); color: var(--green); border: 1px solid rgba(34,197,94,0.2); }
.tag-avoid { background: var(--red-bg); color: var(--red); border: 1px solid rgba(239,68,68,0.2); }
.tag-warning { background: rgba(249,115,22,0.08); color: #f97316; border: 1px solid rgba(249,115,22,0.2); }
.tag-comfort { background: rgba(234,179,8,0.08); color: #eab308; border: 1px solid rgba(234,179,8,0.2); }

/* Comfort grid */
.draft-comfort-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.draft-comfort-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px;
  background: var(--bg-body);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  transition: all 0.15s;
}
.draft-comfort-item:hover { background: var(--bg-card); border-color: var(--orange-border); }
.draft-comfort-icon { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; border: 1px solid var(--orange-border); }
.draft-comfort-icon img { width: 100%; height: 100%; object-fit: cover; }
.draft-comfort-name { font-size: 11px; font-weight: 600; color: var(--text-primary); text-align: center; }
.draft-comfort-wr { font-size: 11px; font-weight: 600; color: var(--green); }
.draft-section-label { font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; margin-top: 4px; }

/* Footer tip */
.draft-analysis-footer { text-align: center; padding: 10px 0; }
.draft-footer-tip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.draft-tip-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }

/* 
   GAME REVIEW PAGE (styles kept for modules reused in Post-Match)
 */
.game-review-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 40px 32px 40px;
}
.gr-match-selector { display: flex; align-items: center; gap: 8px; }
.gr-match-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.gr-match-select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}
.gr-match-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.gr-match-champ img { width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--border); }
.gr-match-result { font-size: 16px; font-weight: 700; }
.gr-match-details { font-size: 12px; color: var(--text-secondary); }
.gr-modules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 
   SUBSCRIPTION PAGE
 */
#subscriptionPage { padding-left: 260px; }
.subscription-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 40px 32px 40px;
}
.sub-header-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}
.sub-header-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-bg);
  border-radius: 12px;
  border: 1px solid var(--orange-border);
}
.sub-page-title { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.sub-page-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.subscription-container {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

/* Plan cards */
.sub-plan-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sub-plan-card:hover {
  border-color: var(--orange-border);
  box-shadow: 0 8px 30px rgba(255,107,43,0.08);
}
.sub-plan-card-popular {
  border-color: var(--orange);
  box-shadow: 0 0 20px rgba(255,107,43,0.15);
}
.sub-plan-popular-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff6b2b, #ff8f5e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 99px;
  white-space: nowrap;
}

.sub-plan-header { text-align: center; margin-bottom: 20px; }
.sub-plan-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.sub-plan-badge-free { background: var(--bg-body); color: var(--text-secondary); border: 1px solid var(--border); }
.sub-plan-badge-pro { background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange-border); }
.sub-plan-badge-premium { background: linear-gradient(135deg, #a78bfa22, #8b5cf622); color: #8b5cf6; border: 1px solid #a78bfa44; }

.sub-plan-name { font-size: 20px; font-weight: 800; color: var(--text-primary); margin: 4px 0; }
.sub-plan-price { font-size: 14px; color: var(--text-secondary); margin: 4px 0; }
.sub-plan-amount { font-size: 32px; font-weight: 800; color: var(--text-primary); }
.sub-plan-desc { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }

/* Features list */
.sub-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
}
.sub-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.sub-feature:last-child { border-bottom: none; }
.sub-feature.included { color: var(--text-primary); }
.sub-feature.excluded { color: var(--text-dim); }
.sub-feature svg { flex-shrink: 0; }

/* Plan buttons */
.sub-plan-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
  border: none;
}
.sub-plan-btn-free {
  background: var(--bg-body);
  color: var(--text-dim);
  border: 1px solid var(--border);
  cursor: default;
}
.sub-plan-btn-pro {
  background: linear-gradient(135deg, #ff6b2b, #ff8f5e);
  color: #fff;
}
.sub-plan-btn-pro:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,107,43,0.3); }
.sub-plan-btn-premium {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  color: #fff;
}
.sub-plan-btn-premium:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(139,92,246,0.3); }

@media (max-width: 900px) {
  .subscription-container {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 
   AUTH OVERLAY
 */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.auth-card {
  width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}
.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.auth-logo img { width: 80px; height: 80px; object-fit: contain; filter: none; }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 20px;
}
.auth-tab {
  background: var(--bg-body);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}
.auth-tab.active {
  color: var(--orange);
  border-color: var(--orange-border);
  background: var(--orange-bg);
}
.auth-content { display: flex; flex-direction: column; gap: 10px; }
.auth-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.auth-input {
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  padding: 10px 14px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s;
}
.auth-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,107,43,0.1); }
.auth-error {
  background: var(--red-bg);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px;
  color: var(--red);
  font-size: 13px;
  padding: 8px 12px;
}
.auth-submit {
  margin-top: 8px;
  background: var(--orange);
  border: none;
  color: white;
  font-weight: 600;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}
.auth-submit:hover { background: var(--orange-light); box-shadow: 0 4px 12px rgba(255,107,43,0.3); }
.auth-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.auth-hint-inline { font-size: 10px; color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; }
.auth-gdpr { margin: 10px 0 4px; }
.auth-gdpr-label { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--text-secondary); line-height: 1.4; cursor: pointer; }
.auth-gdpr-label input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; accent-color: var(--orange); width: 14px; height: 14px; cursor: pointer; }
.auth-gdpr-label a { color: var(--orange); text-decoration: underline; }
.auth-footer { margin-top: 12px; display: flex; justify-content: flex-end; }
.auth-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
}

/* 
   SAFETY OVERLAY
 */
.safety-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  z-index: 50;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  animation: safetySlideIn 0.3s ease;
}
@keyframes safetySlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.safety-panel { padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.safety-close-btn {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.safety-close-btn:hover { background: var(--red-bg); border-color: rgba(239,68,68,0.3); color: var(--red); }
.safety-panel-header { display: flex; align-items: center; gap: 10px; padding-right: 32px; }
.safety-logo-icon { font-size: 24px; }
.safety-panel-title {
  font-size: 18px; font-weight: 700; letter-spacing: 1px;
  color: var(--text-primary);
  background: none; -webkit-text-fill-color: var(--text-primary);
}
.safety-panel-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.safety-live-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  width: fit-content;
}
.safety-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); animation: safetyPulse 1.5s ease infinite; }
.safety-live-badge.in-game { border-color: rgba(34,197,94,0.3); background: var(--green-bg); color: var(--green); }
.safety-live-badge.in-game .safety-live-dot { background: var(--green); }
.safety-live-badge.no-game .safety-live-dot { animation: none; }
@keyframes safetyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.safety-next-action {
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.safety-next-action::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--primary-gradient);
  border-radius: 12px 12px 0 0;
}
.safety-next-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--orange); margin-bottom: 4px; }
.safety-next-main { font-size: 26px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.safety-next-why { font-size: 12px; color: var(--text-secondary); }
.safety-next-action.action-danger { border-color: rgba(239,68,68,0.3); }
.safety-next-action.action-danger::before { background: linear-gradient(90deg, #ef4444, #f97316); }
.safety-next-action.action-danger .safety-next-label { color: var(--red); }
.safety-next-action.action-objective { border-color: rgba(234,179,8,0.3); }
.safety-next-action.action-objective::before { background: linear-gradient(90deg, #eab308, #f97316); }
.safety-next-action.action-objective .safety-next-label { color: #eab308; }
.safety-next-action.action-farm { border-color: rgba(34,197,94,0.3); }
.safety-next-action.action-farm::before { background: linear-gradient(90deg, #22c55e, #10b981); }
.safety-next-action.action-farm .safety-next-label { color: var(--green); }

.safety-pillars { display: flex; flex-direction: column; gap: 4px; }
.safety-pillar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--bg-body);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  transition: all 0.15s;
}
.safety-pillar:hover { border-color: var(--border); }
.safety-pillar.pillar-active { border-color: var(--orange-border); background: var(--orange-bg); }
.safety-pillar.pillar-warning { border-color: rgba(239,68,68,0.2); background: var(--red-bg); }
.safety-pillar-icon { font-size: 16px; width: 24px; text-align: center; }
.safety-pillar-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.safety-pillar-status { font-size: 10px; color: var(--text-dim); }
.safety-pillar-indicator {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0;
}
.safety-pillar-indicator.indicator-ok { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.safety-pillar-indicator.indicator-warn { background: #eab308; box-shadow: 0 0 6px rgba(234,179,8,0.4); }
.safety-pillar-indicator.indicator-danger { background: var(--red); box-shadow: 0 0 6px rgba(239,68,68,0.4); }
.safety-priority-box {
  padding: 10px 12px;
  background: var(--bg-body);
  border: 1px solid var(--border-light);
  border-radius: 10px;
}
.safety-priority-title { font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.5px; margin-bottom: 6px; }
.safety-priority-list { display: flex; flex-wrap: wrap; gap: 4px; }
.safety-prio-item { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.prio-1 { background: var(--red-bg); color: var(--red); border: 1px solid rgba(239,68,68,0.2); }
.prio-2 { background: rgba(234,179,8,0.08); color: #eab308; border: 1px solid rgba(234,179,8,0.2); }
.prio-3 { background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange-border); }
.prio-4 { background: var(--green-bg); color: var(--green); border: 1px solid rgba(34,197,94,0.2); }
.safety-game-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.safety-stat { text-align: center; padding: 6px; background: var(--bg-body); border: 1px solid var(--border-light); border-radius: 8px; }
.safety-stat-value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.safety-stat-label { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }

/* 
   TRACKING PAGES
 */
#trackingOnboardingPage,
#trackingDashboardPage,
#trackingProgressionPage {
  background: var(--bg-body);
}
.tracking-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 40px 32px 40px;
}
.tracking-onboarding { display: flex; flex-direction: column; gap: 20px; }
.onb-steps {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.onb-step {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-dim); font-weight: 500;
}
.onb-step span {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-body); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.onb-step.active { color: var(--orange); }
.onb-step.active span { background: var(--orange); color: white; border-color: var(--orange); }
.onb-step.completed span { background: var(--green); color: white; border-color: var(--green); }
.onb-step-line { flex: 1; height: 1px; background: var(--border); }
.onb-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.onb-icon { margin-bottom: 12px; }
.onb-icon svg { stroke: var(--orange) !important; }
.onb-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.onb-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; }
.onb-rank-grid, .onb-timeframe-grid {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.onb-role-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.onb-role-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  min-width: 80px;
}
.onb-role-btn:hover, .onb-role-btn.active { border-color: var(--orange); background: var(--orange-bg); }
.onb-role-icon { width: 32px; height: 32px; }
.btn-tracking-start, .btn-tracking-primary {
  padding: 12px 24px;
  background: var(--orange);
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}
.btn-tracking-start:hover, .btn-tracking-primary:hover { background: var(--orange-light); }
.onb-trial-notice { font-size: 12px; color: var(--text-dim); margin-top: 10px; }

/* Tracking dashboard */
.tracking-dash-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.tracking-dash-title { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.tracking-dash-title svg { stroke: var(--orange); }
.tracking-dash-meta { display: flex; gap: 12px; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.tracking-dash-right { display: flex; gap: 8px; }
.btn-tracking-secondary {
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}
.btn-tracking-secondary:hover { background: var(--bg-body); border-color: var(--orange-border); }
.tracking-encouragement {
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.tracking-rank-bar { margin-bottom: 16px; }
.tracking-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.tracking-section-title svg { stroke: var(--orange); }
.tracking-weekly {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.tracking-weekly-grid { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.tracking-goals-grid { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.tracking-trial-banner {
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* Game log */
.game-log-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.game-log-controls { display: flex; align-items: center; gap: 8px; }
.game-log-date-input {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  font-size: 12px;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
}
.game-log-sep { color: var(--text-dim); font-size: 12px; }
.btn-add-game {
  padding: 6px 14px;
  background: var(--orange);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s;
}
.btn-add-game:hover { background: var(--orange-light); }
.add-game-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}
.add-game-form-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.add-game-field { display: flex; flex-direction: column; gap: 4px; }
.add-game-field label { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.add-game-field input, .add-game-field select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
}
.add-game-field input:focus { outline: none; border-color: var(--orange); }
.add-game-field-notes { flex: 1; min-width: 200px; }
.result-toggle { display: flex; gap: 4px; }
.result-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}
.win-btn { color: var(--green); }
.win-btn.active { background: var(--green-bg); border-color: rgba(34,197,94,0.3); }
.loss-btn { color: var(--red); }
.loss-btn.active { background: var(--red-bg); border-color: rgba(239,68,68,0.3); }
.add-game-actions { display: flex; gap: 8px; margin-top: 10px; }
.btn-game-cancel {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.game-log-list { display: flex; flex-direction: column; gap: 6px; }
.game-log-empty { text-align: center; padding: 20px; color: var(--text-dim); font-size: 13px; }

/* Progression page */
.tracking-progression-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.tracking-progression-title svg { stroke: var(--orange); }
.prog-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 20px; }
.prog-goals-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 20px; }
.prog-history { margin-top: 16px; }
.prog-history-table-wrap { overflow-x: auto; }
.prog-history-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  font-size: 13px;
}
.prog-history-table th {
  background: var(--bg-body);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  text-align: left;
}
.prog-history-table td {
  padding: 10px 12px;
  color: var(--text-primary);
  border-top: 1px solid var(--border-light);
}

/* 
   POST-GAME MODAL
 */
.pgm-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
}
.pgm-card {
  width: 520px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.pgm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pgm-header-left { display: flex; align-items: center; gap: 10px; }
.pgm-champ-icon { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); }
.pgm-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.pgm-subtitle { font-size: 12px; color: var(--text-secondary); }
.pgm-close {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pgm-close:hover { background: var(--red-bg); color: var(--red); }
.pgm-summary-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pgm-badge, .pgm-result-badge, .pgm-kda-badge, .pgm-dur-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-body);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.pgm-champ-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.pgm-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pgm-field { display: flex; flex-direction: column; gap: 3px; }
.pgm-field label { font-size: 10px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; }
.pgm-input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
.pgm-input:focus { outline: none; border-color: var(--orange); }
.pgm-field-wide { flex: 1; min-width: 200px; }
.pgm-actions { display: flex; gap: 8px; }
.pgm-save-btn {
  flex: 1;
  padding: 10px;
  background: var(--orange);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.pgm-save-btn:hover { background: var(--orange-light); }
.pgm-skip-btn {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

/* 
   OLD-COMPAT: panels, analyze, etc.
 */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  box-shadow: var(--shadow-card);
}
.panel::before { display: none; }
.panel-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.panel-title .accent { font-size: 11px; color: var(--orange); margin-right: 6px; }

.logo-block { display: flex; align-items: center; gap: 10px; }
.logo-block.home-logo { cursor: pointer; padding: 6px 10px; border-radius: 8px; margin: -6px -10px; transition: background 0.15s; }
.logo-block.home-logo:hover { background: var(--bg-body); }
.logo-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.logo-title-img { height: 40px; width: auto; object-fit: contain; filter: none; }
.logo-sub { font-size: 11px; color: var(--text-secondary); letter-spacing: 0.5px; }

.header-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  padding: 4px 10px;
  border: 1px solid var(--orange-border);
  border-radius: 4px;
  color: var(--orange);
  background: var(--orange-bg);
}
.header-badge.loading { border-color: rgba(59,130,246,0.3); color: #3b82f6; background: rgba(59,130,246,0.08); animation: pulse-badge 1s infinite; }
.header-badge.done { border-color: rgba(34,197,94,0.3); color: var(--green); background: var(--green-bg); }
.header-badge.error { border-color: rgba(239,68,68,0.3); color: var(--red); background: var(--red-bg); }
@keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:0.5} }

.analyze-btn {
  width: 100%;
  padding: 12px 20px;
  background: var(--orange);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(255,107,43,0.25);
  animation: none;
  font-family: 'Inter', sans-serif;
}
.analyze-btn:hover { background: var(--orange-light); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,107,43,0.35); }
.analyze-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.analyze-btn::before { display: none; }
.btn-loader {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}
.analyze-btn.loading .btn-loader { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.nav-btn {
  width: 40px; height: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  box-shadow: none;
}
.nav-btn::before { display: none; }
.nav-btn:hover { background: var(--bg-body); border-color: var(--orange-border); color: var(--orange); transform: none; box-shadow: none; }

.main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.draft-grid { display: flex; flex-direction: column; gap: 8px; }
.role-row { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 10px; align-items: center; }
.role-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); display: block; letter-spacing: 1px; }
.champ-slot {
  display: grid;
  grid-template-columns: 32px minmax(50px,1fr) minmax(50px,1fr);
  gap: 6px; align-items: center;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  transition: border-color 0.15s;
}
.champ-slot:hover { border-color: var(--orange-border); }
.role-row .champ-slot[data-team="ally"] { border-left: 3px solid rgba(34,197,94,0.3); }
.role-row .champ-slot[data-team="enemy"] { border-right: 3px solid rgba(239,68,68,0.3); }
.champ-icon {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-dim); overflow: hidden; cursor: pointer;
}
.champ-icon.filled { border-color: var(--orange-border); box-shadow: 0 0 6px rgba(255,107,43,0.15); }
.champ-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.champ-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.champ-input::placeholder { color: var(--text-dim); }
.champ-role-text { font-size: 11px; color: var(--text-secondary); }

.results-empty, .results-error {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 200px;
  text-align: center; gap: 10px;
}
.empty-icon, .error-icon { font-size: 36px; opacity: 0.3; }
.results-empty p, .results-error p { color: var(--text-secondary); max-width: 220px; }
.section-block { margin-bottom: 20px; }
.champ-recommendations { display: flex; flex-direction: column; gap: 6px; }
.champ-rec-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-body);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.champ-rec-card:hover { border-color: var(--orange-border); background: var(--bg-card); }
.rec-rank { font-size: 16px; font-weight: 700; color: var(--orange); min-width: 20px; }
.rec-icon { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.rec-icon img { width: 100%; height: 100%; object-fit: cover; }
.rec-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.rec-desc { font-size: 11px; color: var(--text-secondary); }
.rec-score { font-size: 18px; font-weight: 700; color: var(--orange); }

.dmg-bar-block { margin-bottom: 14px; }
.dmg-bar-labels { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.phys-label { color: var(--orange); font-weight: 600; }
.magic-label { color: #3b82f6; font-weight: 600; }
.dmg-bar-track { height: 8px; background: var(--bg-body); border-radius: 99px; overflow: hidden; display: flex; border: 1px solid var(--border); }
.dmg-bar-phys { height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-light)); border-radius: 99px 0 0 99px; transition: width 0.5s; }
.dmg-bar-magic { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 0 99px 99px 0; transition: width 0.5s; }
.metrics-grid { display: flex; flex-direction: column; gap: 6px; }
.metric-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border-light); }
.metric-row:last-child { border-bottom: none; }
.metric-dot { width: 8px; height: 8px; border-radius: 50%; }
.metric-dot.green { background: var(--green); }
.metric-dot.yellow { background: #eab308; }
.metric-dot.red { background: var(--red); }
.metric-dot.blue { background: #3b82f6; }
.metric-dot.gold { background: var(--orange); }
.metric-name { flex: 1; font-size: 12px; color: var(--text-secondary); }
.metric-val { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.strategy-text {
  background: var(--bg-body);
  border-left: 3px solid var(--orange);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  color: var(--text-secondary);
  font-size: 13px; line-height: 1.6;
}

/* Instructions */
.draft-instructions {
  margin: 16px 0 24px;
  padding: 16px 20px;
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  border-radius: 12px;
}
.draft-instructions::before { display: none; }
.instructions-content h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; }
.instructions-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.step { display: flex; gap: 10px; align-items: flex-start; }
.step-num {
  min-width: 32px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange); border: none; border-radius: 8px;
  font-weight: 700; color: white; font-size: 14px;
}
.step-text strong { color: var(--text-primary); font-size: 13px; }
.step-text span { color: var(--text-secondary); font-size: 12px; }
.instructions-note {
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(255,107,43,0.04);
  border-left: 2px solid var(--orange);
  padding: 8px 12px;
  border-radius: 4px;
}

/* Autocomplete */
.autocomplete-list {
  position: absolute; z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-height: 150px;
  overflow-y: auto;
}
.autocomplete-item { padding: 8px 12px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.autocomplete-item:hover, .autocomplete-item.selected { background: var(--orange-bg); color: var(--orange); }

/* Plan lock overlay */
.plan-lock-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(245,246,250,0.2) 0%, rgba(245,246,250,0.7) 50%, rgba(245,246,250,0.95) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 32px; gap: 8px;
  border-radius: inherit; z-index: 5; cursor: pointer;
}
.plan-lock-overlay .lock-icon { font-size: 20px; }
.plan-lock-overlay .lock-label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--orange); text-transform: uppercase; }
.plan-lock-overlay .lock-upgrade-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--orange-border);
  background: var(--orange-bg);
  color: var(--orange);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.plan-lock-overlay .lock-upgrade-btn:hover { background: var(--orange); color: white; }

/* Objectives/Champions (legacy pages) */
.objectives-container { padding: 48px 40px 32px 40px; max-width: 1100px; margin: 0 auto; }
#objectivesPage, #champSelectPage, #champGuidePage { padding-left: 260px; }
.champ-select-container { padding: 48px 40px 32px 40px; max-width: 1200px; margin: 0 auto; }
.champ-select-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.champ-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.champ-preview { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.champ-preview img { width: 80px; height: 80px; border-radius: 12px; border: 2px solid var(--orange-border); }
.btn-primary {
  padding: 10px 20px;
  background: var(--orange);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--orange-light); }
.guide-container { padding: 48px 40px 32px 40px; max-width: 900px; margin: 0 auto; }
.guide-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px; }
.spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--orange); border-radius: 50%; animation: spin 0.7s linear infinite; }
.guide-content { line-height: 1.7; color: var(--text-primary); }
.guide-content h2, .guide-content h3 { color: var(--text-primary); margin: 16px 0 8px; }
.guide-content p { margin-bottom: 10px; color: var(--text-secondary); }

/* 
   ANIMATIONS
 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 
   RESPONSIVE
 */
@media (max-width: 1100px) {
  .draft-assistant-grid { grid-template-columns: 1fr; }
  .prf-main-grid, .stats-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app-sidebar { width: 200px; }
  .instructions-steps { grid-template-columns: 1fr; }
  .draft-modules-grid, .gr-modules-grid { grid-template-columns: 1fr; }
  .main-grid { grid-template-columns: 1fr; }
  .dash-quick-stats { grid-template-columns: repeat(2, 1fr); }
  .matchup-content { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .app-sidebar { display: none; }
  #dashboardHomePage,
  #draftAnalysisPage,
  #profilePage,
  #statsPage,
  #settingsPage,
  #subscriptionPage,
  #trackingOnboardingPage,
  #trackingDashboardPage,
  #trackingProgressionPage,
  #objectivesPage,
  #champSelectPage,
  #champGuidePage,
  #runesBuildPage { padding-left: 0 !important; left: 0 !important; }
  .safety-overlay { width: 100%; }
}

/* ----------------------------------------------------
   SIDEBAR-ACTIVE LAYOUT (logged-in users)
---------------------------------------------------- */
/* Sidebar is hidden by default, shown when logged in */
.app-sidebar {
  display: none;
}
body.sidebar-active .app-sidebar {
  display: flex;
}
body.sidebar-active .user-bar {
  display: none !important;
}
body.sidebar-active .floating-logo {
  display: none !important;
}
body.sidebar-active .app-header-home {
  display: none !important;
}
body.sidebar-active .window-drag-region {
  left: 260px;
}
body.sidebar-active .app-wrapper {
  padding-left: 260px;
}

/* Global vertical breathing space for sidebar pages */
body.sidebar-active {
  --sidebar-content-top-offset: 24px;
}

/* Shift fixed-position pages when sidebar active */
body.sidebar-active #draftAnalysisPage,
body.sidebar-active #statsPage,
body.sidebar-active #profilePage,
body.sidebar-active #runesBuildPage {
  left: 260px !important;
  top: var(--sidebar-content-top-offset) !important;
}

/* Tracking pages need full fixed viewport layout in sidebar mode */
body.sidebar-active #trackingOnboardingPage,
body.sidebar-active #trackingDashboardPage,
body.sidebar-active #trackingProgressionPage {
  position: fixed !important;
  top: var(--sidebar-content-top-offset) !important;
  left: 260px !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto;
  z-index: 10;
  margin: 0 !important;
  padding: 0 !important;
}

/* Pages that are NOT normally fixed - make them fixed + shifted when sidebar active */
body.sidebar-active #subscriptionPage,
body.sidebar-active #objectivesPage,
body.sidebar-active #champSelectPage,
body.sidebar-active #champGuidePage,
body.sidebar-active #coachingPage,
body.sidebar-active #championPoolPage,
body.sidebar-active #tierListPage,
body.sidebar-active #champStatsPage,
body.sidebar-active #challengesPage,
body.sidebar-active #masteryPage,
body.sidebar-active #postMatchPage,
body.sidebar-active #weeklyReportPage {
  position: fixed !important;
  top: var(--sidebar-content-top-offset) !important;
  left: 260px !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto;
  z-index: 10;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide ::before pseudo-elements */
body.sidebar-active #draftAnalysisPage::before,
body.sidebar-active #statsPage::before {
  display: none;
}

/* Hide back buttons and in-page headers when sidebar is there */
body.sidebar-active .draft-back-btn {
  display: none !important;
}
/* Exception: keep back button visible on progression page */
body.sidebar-active #backFromProgression {
  display: inline-flex !important;
}
body.sidebar-active .app-header {
  display: none !important;
}

/* Dashboard Home fixed position */
#dashboardHomePage {
  position: fixed !important;
  top: var(--sidebar-content-top-offset) !important;
  left: 260px !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto;
  z-index: 10;
}

/* Settings page fixed */
body.sidebar-active #settingsPage {
  position: fixed !important;
  top: var(--sidebar-content-top-offset) !important;
  left: 260px !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto;
  z-index: 10;
  margin: 0 !important;
  padding: 0 !important;
}

/* btn-hero-secondary compat */
.btn-hero-secondary {
  border: 1px solid var(--orange-border);
  background: var(--orange-bg);
  color: var(--orange);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}
.btn-hero-secondary:hover { background: var(--orange); color: white; }

/* Old compat classes */
.profile-heading { font-size: 20px; font-weight: 700; color: var(--text-primary); text-align: center; }
.profile-note { font-size: 12px; color: var(--text-secondary); text-align: center; }

/* Stats dashboard compat */
.stats-dashboard { width: 100%; }
.stats-header { display: none; }

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow-card);
}
.stat-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.stat-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.stat-row { display: flex; justify-content: space-between; }

.profile-page-content {
  padding: 32px 24px;
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
}
.profile-card-main {
  width: min(520px, 92vw);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 12px;
}

/* ================================================================
   GAME REVIEW PAGE (gr-*)
   ================================================================ */
.game-review-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 200px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}
body.sidebar-active .game-review-wrapper { padding-top: 28px; }

.gr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}
.gr-header-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-bg);
  border-radius: 14px;
  border: 1px solid var(--orange-border);
}
.gr-title {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.gr-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Match selector */
.gr-match-selector { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.gr-match-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.gr-match-select {
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  min-width: 220px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.gr-match-select:focus { border-color: var(--orange); }
.gr-match-select option { background: var(--bg-card); color: var(--text-primary); }

/* Match Summary Banner */
.gr-match-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
.gr-match-champ {
  width: 56px; height: 56px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--orange-border);
  flex-shrink: 0;
}
.gr-match-champ img { width: 100%; height: 100%; object-fit: cover; }
.gr-match-info { flex: 1; }
.gr-match-result { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; }
.gr-match-result.win { color: #22c55e; }
.gr-match-result.loss { color: #ef4444; }
.gr-match-details { font-size: 12px; color: var(--text-secondary); }
.gr-match-kda { text-align: center; }
.gr-match-kda .kda-main { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-primary); }
.gr-match-kda .kda-ratio { font-size: 12px; color: var(--text-secondary); }
.gr-match-meta { display: flex; gap: 16px; align-items: center; }
.gr-meta-item { text-align: center; }
.gr-meta-item .meta-value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.gr-meta-item .meta-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }

/* 4 Review Modules Grid */
.gr-modules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gr-module-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all 0.35s ease;
  position: relative;
}
.gr-module-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
  opacity: 0.7;
}
.gr-module-script::before { background: linear-gradient(90deg, #a78bfa, #ff6b2b); }
.gr-module-mistakes::before { background: linear-gradient(90deg, #f97316, #ef4444); }
.gr-module-focus::before { background: linear-gradient(90deg, #fbbf24, #22d3ee); }
.gr-module-safety::before { background: linear-gradient(90deg, #4ade80, #10b981); }
.gr-module-card:hover {
  border-color: rgba(255,107,43,0.25);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}

/* Module Header */
.gr-module-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.gr-module-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}
.script-icon { background: rgba(167,139,250,0.1); color: #a78bfa; border: 1px solid rgba(167,139,250,0.2); }
.mistakes-icon { background: rgba(249,115,22,0.1); color: #f97316; border: 1px solid rgba(249,115,22,0.2); }
.focus-icon { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
.safety-sc-icon { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
.gr-module-badge {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.mistakes-badge { background: rgba(249,115,22,0.1); color: #f97316; border: 1px solid rgba(249,115,22,0.2); }
.safety-sc-badge { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }

/* Module Body */
.gr-module-body { padding: 16px 20px 20px; min-height: 150px; }

/* Timeline entries */
.gr-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 20px; }
.gr-timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(167,139,250,0.3), rgba(255,107,43,0.1));
  border-radius: 2px;
}
.gr-timeline-entry { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; position: relative; }
.gr-timeline-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
  left: -20px;
  margin-right: -12px;
}
.gr-timeline-dot.good { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.3); }
.gr-timeline-dot.bad { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.3); }
.gr-timeline-dot.neutral { background: #f97316; box-shadow: 0 0 8px rgba(249,115,22,0.2); }
.gr-timeline-dot.info { background: #ff6b2b; box-shadow: 0 0 8px rgba(255,107,43,0.2); }
.gr-timeline-time { font-size: 12px; font-weight: 700; color: var(--text-secondary); min-width: 50px; flex-shrink: 0; }
.gr-timeline-text { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.gr-timeline-text strong { color: var(--text-primary); }

/* Mistake pattern rows */
.gr-mistake-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
}
.gr-mistake-row:hover { background: rgba(255,107,43,0.04); border-color: rgba(249,115,22,0.15); }
.gr-mistake-icon { font-size: 20px; flex-shrink: 0; }
.gr-mistake-info { flex: 1; }
.gr-mistake-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.gr-mistake-detail { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
.gr-mistake-count {
  padding: 3px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  background: rgba(249,115,22,0.1); color: #f97316;
  border: 1px solid rgba(249,115,22,0.2); flex-shrink: 0;
}

/* Focus card */
.gr-focus-card {
  text-align: center;
  padding: 24px 20px;
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.15);
  border-radius: 16px;
}
.gr-focus-emoji { font-size: 40px; margin-bottom: 12px; }
.gr-focus-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.gr-focus-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; max-width: 320px; margin: 0 auto; }

/* Safety Score gauge */
.gr-safety-gauge { text-align: center; padding: 16px 0; }
.gr-gauge-circle { width: 120px; height: 120px; margin: 0 auto 16px; position: relative; }
.gr-gauge-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gr-gauge-bg { fill: none; stroke: var(--border); stroke-width: 8; }
.gr-gauge-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.gr-gauge-text {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px; font-weight: 700; color: var(--text-primary);
}
.gr-gauge-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.gr-safety-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.gr-safety-item {
  padding: 8px 10px;
  background: var(--bg-body);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.gr-safety-item-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.gr-safety-item-value { font-size: 16px; font-weight: 700; }

/* ================================================================
   DEATH TIMELINE MODULE
   ================================================================ */
.gr-module-deaths { grid-column: 1 / -1; }
.gr-module-deaths::before { background: linear-gradient(90deg, #ef4444, #ff6b2b); }
.deaths-icon { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.deaths-badge { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }

/* Death list */
.gr-death-list { display: flex; flex-direction: column; gap: 6px; }
.gr-death-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.gr-death-row:hover { border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.04); }
.gr-death-number {
  font-size: 13px; font-weight: 800; color: #ef4444;
  width: 30px; flex-shrink: 0; text-align: center;
}
.gr-death-time {
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  min-width: 50px; flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
}
.gr-death-phase {
  padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  flex-shrink: 0;
}
.phase-early { background: rgba(34,211,238,0.1); color: #22d3ee; border: 1px solid rgba(34,211,238,0.2); }
.phase-mid { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
.phase-late { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.gr-death-info { flex: 1; font-size: 13px; color: var(--text-secondary); }
.gr-death-killer { }
.gr-death-killer strong { color: var(--text-primary); }
.gr-death-analyze-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,107,43,0.3);
  background: rgba(255,107,43,0.08);
  color: #ff6b2b;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.gr-death-analyze-btn:hover {
  background: rgba(255,107,43,0.18);
  border-color: rgba(255,107,43,0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,107,43,0.15);
}

/* Death replay panel */
.gr-death-replay-panel {
  animation: fadeInUp 0.3s ease;
}
.gr-replay-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.gr-replay-back-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  background: var(--bg-body); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
}
.gr-replay-back-btn:hover { border-color: var(--orange); color: var(--orange); }
.gr-replay-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }

/* Map + analysis layout */
.gr-replay-content { display: grid; grid-template-columns: 520px 1fr; gap: 20px; }
@media (max-width: 1100px) { .gr-replay-content { grid-template-columns: 1fr; } }

.gr-replay-map-container {
  background: #0a0a1a;
  border-radius: 14px;
  border: 1px solid rgba(255,107,43,0.15);
  overflow: hidden;
  position: relative;
}
#grReplayCanvas {
  display: block;
  width: 100%; height: auto;
  border-radius: 14px;
}

/* Controls */
.gr-replay-controls {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.gr-replay-play-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,107,43,0.15); border: 1px solid rgba(255,107,43,0.3);
  color: #ff6b2b; font-size: 14px;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.gr-replay-play-btn:hover { background: rgba(255,107,43,0.3); }
.gr-replay-progress-wrap {
  display: flex; align-items: center; gap: 8px; flex: 1;
}
.gr-replay-progress-bar {
  flex: 1; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.gr-replay-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff6b2b, #ef4444);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.gr-replay-time {
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  min-width: 40px; text-align: right;
}

/* Legend */
.gr-replay-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 14px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.04);
}
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.legend-dot.ally { background: #4299e1; }
.legend-dot.enemy { background: #ef4444; }
.legend-dot.me { background: #ff6b2b; border: 2px solid #fff; box-sizing: border-box; }
.legend-dot.death { background: none; font-size: 12px; width: auto; height: auto; }

/* AI analysis panel */
.gr-replay-analysis { }
.gr-death-analysis-card {
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.gr-analysis-verdict {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  font-size: 18px; font-weight: 800;
}
.gr-verdict-icon { font-size: 24px; }
.gr-verdict-text { }
.verdict-bad { background: rgba(239,68,68,0.08); color: #ef4444; border-bottom: 1px solid rgba(239,68,68,0.15); }
.verdict-neutral { background: rgba(251,191,36,0.08); color: #fbbf24; border-bottom: 1px solid rgba(251,191,36,0.15); }
.verdict-ok { background: rgba(34,197,94,0.08); color: #22c55e; border-bottom: 1px solid rgba(34,197,94,0.15); }
.gr-analysis-details { padding: 16px 20px; }
.gr-analysis-summary { font-size: 14px; color: var(--text-primary); line-height: 1.6; margin: 0 0 14px; }
.gr-analysis-factor {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 0;
  font-size: 13px; color: var(--text-secondary);
}
.gr-factor-icon { flex-shrink: 0; font-size: 15px; }
.gr-factor-text { line-height: 1.4; }
.gr-analysis-tip {
  padding: 14px 20px;
  background: rgba(255,107,43,0.05);
  border-top: 1px solid rgba(255,107,43,0.1);
}
.gr-tip-label { font-size: 12px; font-weight: 700; color: #ff6b2b; }
.gr-analysis-tip p {
  font-size: 13px; color: var(--text-secondary); line-height: 1.6;
  margin: 6px 0 0;
}

/* Responsive game review */
@media (max-width: 900px) {
  .gr-modules-grid { grid-template-columns: 1fr; }
  .gr-header { flex-direction: column; gap: 12px; }
  .gr-match-banner { flex-direction: column; text-align: center; }
}

/* ================================================================
   PREMIUM / OBJECTIVES BADGE
   ================================================================ */
.badge-premium {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(255,107,43,0.1);
  border: 1px solid rgba(255,107,43,0.3);
  color: var(--orange);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ================================================================
   PROFILE PAGE (prf-*)
   ================================================================ */
.prf-wrapper {
  min-height: 100vh;
  padding: 80px 28px 40px;
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
}
body.sidebar-active .prf-wrapper { padding-top: 28px; }

/* Top bar */
.prf-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.prf-identity { display: flex; align-items: center; gap: 16px; }
.prf-avatar-ring {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 3px solid var(--orange);
  padding: 3px;
  flex-shrink: 0;
  background: var(--orange-bg);
}
.prf-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.prf-id-stack { display: flex; flex-direction: column; gap: 6px; }
.prf-gamename { font-size: 30px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.prf-meta { display: flex; align-items: center; gap: 8px; }
.prf-region-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--orange);
  background: var(--orange-bg); padding: 3px 9px; border-radius: 5px;
  border: 1px solid var(--orange-border);
}
.prf-topbar-right { display: flex; align-items: center; gap: 8px; }
.btn-prf-refresh {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: 10px;
  background: var(--orange); color: #fff;
  font-weight: 700; font-size: 14px;
  border: none; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.btn-prf-refresh:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-prf-edit {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.btn-prf-edit:hover, .btn-prf-edit.active {
  background: var(--orange-bg); border-color: var(--orange-border); color: var(--orange);
}

/* Account form */
.prf-account-form {
  background: var(--bg-card); border: 1px solid var(--orange-border);
  border-radius: 14px; padding: 18px; margin-bottom: 14px;
  animation: onbFadeIn 0.2s ease;
}
.prf-form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.prf-form-field { display: flex; flex-direction: column; gap: 6px; min-width: 170px; flex: 1; }
.prf-form-actions { flex: none; min-width: auto; }
.prf-form-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }

/* Main grid */
.prf-main-grid { display: grid; grid-template-columns: 300px 1fr 380px; gap: 16px; align-items: start; }
@media (max-width: 1200px) {
  .prf-main-grid { grid-template-columns: 280px 1fr; }
  .prf-main-grid .prf-panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) { .prf-main-grid { grid-template-columns: 1fr; } }

/* Panel */
.prf-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.prf-panel-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--orange); margin-bottom: -2px;
}
.prf-divider { height: 1px; background: var(--border); margin: 2px 0; }

/* Rank block */
.prf-rank-block { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; text-align: center; }
.prf-rank-tier { font-size: 22px; font-weight: 800; letter-spacing: 0.05em; color: var(--text-primary); }
.prf-rank-lp { font-size: 13px; color: var(--orange); font-weight: 700; }
.prf-rank-wl { font-size: 12px; color: var(--text-secondary); }
.prf-rank-season { font-size: 11px; color: var(--text-secondary); letter-spacing: 0.04em; }

/* Elo comparison bars */
.prf-elo-bars { display: flex; flex-direction: column; gap: 11px; }
.prf-elo-bar-row { display: flex; flex-direction: column; gap: 5px; }
.prf-elo-bar-hd { display: flex; justify-content: space-between; align-items: center; }
.prf-elo-bar-label { font-size: 11px; color: var(--text-secondary); }
.prf-elo-bar-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.prf-elo-bar-tag.above { background: rgba(34,197,94,0.1); color: #22c55e; }
.prf-elo-bar-tag.below { background: rgba(239,68,68,0.1); color: #ef4444; }
.prf-elo-bar-tag.equal { background: rgba(107,114,128,0.1); color: var(--text-secondary); }
.prf-elo-bar-vals { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); }
.prf-elo-bar-vals span:first-child { color: var(--orange); font-weight: 700; }
.prf-elo-track { height: 6px; border-radius: 5px; background: var(--border); position: relative; overflow: hidden; }
.prf-elo-fill-avg { position: absolute; top: 0; left: 0; height: 100%; background: rgba(107,114,128,0.2); border-radius: 5px; }
.prf-elo-fill-you { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #ff6b2b, #ff8f5e); border-radius: 5px; transition: width 0.5s ease; }

/* KPI grid */
.prf-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prf-kpi-tile {
  background: var(--bg-body); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 6px; text-align: center;
}
.prf-kpi-val { font-size: 22px; font-weight: 800; color: var(--orange); line-height: 1.1; }
.prf-kpi-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* Top champs list */
.prf-champs-list { display: flex; flex-direction: column; gap: 8px; }
.prf-champ-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; padding: 4px 0; }
.prf-champ-icon { width: 38px; height: 38px; border-radius: 8px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); }
.prf-champ-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prf-champ-info { min-width: 0; }
.prf-champ-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prf-champ-sub { font-size: 11px; color: var(--text-secondary); display: flex; gap: 6px; }
.prf-champ-wr { font-size: 15px; font-weight: 800; white-space: nowrap; }
.prf-champ-wr.good { color: #22c55e; }
.prf-champ-wr.ok   { color: #fbbf24; }
.prf-champ-wr.bad  { color: #ef4444; }

/* Roles */
.prf-roles-list { display: flex; flex-direction: column; gap: 8px; }
.prf-role-row { display: flex; align-items: center; gap: 10px; }
.prf-role-icon-img { width: 30px; height: 30px; opacity: 0.6; flex-shrink: 0; }
.prf-role-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.prf-role-games { font-size: 11px; color: var(--text-secondary); }
.prf-role-wr { font-size: 15px; font-weight: 700; color: var(--orange); }

/* Recent matches */
.prf-matches-list { display: flex; flex-direction: column; gap: 5px; max-height: 720px; overflow-y: auto; }
.prf-match-row {
  display: grid;
  grid-template-columns: 38px 44px 1fr 56px 44px;
  align-items: center;
  gap: 7px;
  padding: 8px 6px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: background 0.15s;
}
.prf-match-row:hover { background: rgba(107,114,128,0.06); }
.prf-match-row.win  { border-left-color: #22c55e; background: rgba(34,197,94,0.04); }
.prf-match-row.loss { border-left-color: #ef4444; background: rgba(239,68,68,0.03); }
.prf-match-champ-icon { width: 38px; height: 38px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.prf-match-champ-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prf-match-result { text-align: center; }
.prf-match-win-txt { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.prf-match-row.win  .prf-match-win-txt { color: #22c55e; }
.prf-match-row.loss .prf-match-win-txt { color: #ef4444; }
.prf-match-queue-lbl { font-size: 10px; color: var(--text-secondary); }
.prf-match-info { min-width: 0; }
.prf-match-kda-main { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.prf-match-kda-sub { font-size: 11px; color: var(--text-secondary); }
.prf-match-cs-val { font-size: 12px; color: var(--text-secondary); text-align: right; }
.prf-match-dur    { font-size: 11px; color: var(--text-secondary); text-align: right; }

/* ================================================================
   MY CHAMPIONS PAGE (mychamps-*)
   ================================================================ */
.mychamps-wrapper {
  min-height: 100vh;
  padding: 80px 28px 40px;
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
}
body.sidebar-active .mychamps-wrapper { padding-top: 40px; }

/* Header */
.mychamps-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.mychamps-header-left { display: flex; flex-direction: column; gap: 4px; }
.mychamps-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1;
}
.mychamps-title svg { stroke: var(--orange); }
.mychamps-subtitle { font-size: 13px; color: var(--text-secondary); }
.mychamps-header-right { display: flex; align-items: center; gap: 12px; }
.mychamps-rank-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 10px;
  background: var(--orange-bg); border: 1px solid var(--orange-border);
}
.mychamps-rank-tier {
  font-size: 14px; font-weight: 800; color: var(--orange);
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* Filters */
.mychamps-filters {
  display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap;
}
.mychamps-filter-btn {
  padding: 6px 16px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.mychamps-filter-btn:hover { border-color: var(--orange-border); color: var(--orange); }
.mychamps-filter-btn.active {
  background: var(--orange); color: #fff; border-color: var(--orange);
}

/* Grid of champion cards */
.mychamps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
@media (max-width: 720px) { .mychamps-grid { grid-template-columns: 1fr; } }

/* Placeholder */
.mychamps-placeholder {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 20px;
  color: var(--text-secondary); text-align: center;
}
.mychamps-placeholder p { margin: 0; line-height: 1.5; }

/* Loading */
.mychamps-loading {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 20px;
  color: var(--text-secondary); text-align: center;
}
.mychamps-spinner {
  width: 32px; height: 32px; border: 3px solid var(--border);
  border-top-color: var(--orange); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Champion Card ── */
.mychamps-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
  overflow: hidden;
}
.mychamps-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  border-color: var(--orange-border);
}
/* Left accent by mastery level */
.mychamps-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 14px 0 0 14px;
}
.mychamps-card.mastery-7::before { background: linear-gradient(180deg, #ffd54f, #c9a108); }
.mychamps-card.mastery-6::before { background: linear-gradient(180deg, #e57373, #af3d3d); }
.mychamps-card.mastery-5::before { background: linear-gradient(180deg, #82b1ff, #3d73e3); }
.mychamps-card.mastery-4::before { background: linear-gradient(180deg, #81c784, #388e3c); }
.mychamps-card.mastery-3::before { background: linear-gradient(180deg, #6fd1c9, #2aa79e); }
.mychamps-card.mastery-2::before { background: linear-gradient(180deg, #b0bec5, #78909c); }
.mychamps-card.mastery-1::before { background: linear-gradient(180deg, #9e9e9e, #616161); }
.mychamps-card.mastery-0::before { background: var(--border); }

/* Card top: icon + name + meta */
.mychamps-card-top {
  display: flex; align-items: center; gap: 12px;
}
.mychamps-champ-icon {
  position: relative; width: 56px; height: 56px; flex-shrink: 0;
}
.mychamps-champ-icon img {
  width: 56px; height: 56px; border-radius: 12px;
  object-fit: cover; display: block;
  border: 2px solid var(--border);
}
.mychamps-mastery-badge {
  position: absolute; bottom: -4px; right: -4px;
  font-size: 9px; font-weight: 800;
  padding: 2px 5px; border-radius: 5px;
  color: #fff; letter-spacing: 0.04em;
  border: 1.5px solid var(--bg-card);
}
.mychamps-mastery-badge.mastery-lvl-7 { background: linear-gradient(135deg, #ffd54f, #c9a108); color: #5d4200; }
.mychamps-mastery-badge.mastery-lvl-6 { background: linear-gradient(135deg, #e57373, #af3d3d); }
.mychamps-mastery-badge.mastery-lvl-5 { background: linear-gradient(135deg, #82b1ff, #3d73e3); }
.mychamps-mastery-badge.mastery-lvl-4 { background: linear-gradient(135deg, #81c784, #388e3c); }
.mychamps-mastery-badge.mastery-lvl-3 { background: linear-gradient(135deg, #6fd1c9, #2aa79e); }
.mychamps-mastery-badge.mastery-lvl-2 { background: linear-gradient(135deg, #b0bec5, #78909c); }
.mychamps-mastery-badge.mastery-lvl-1 { background: linear-gradient(135deg, #9e9e9e, #616161); }
.mychamps-mastery-badge.mastery-lvl-0 { background: var(--border); color: var(--text-secondary); }

.mychamps-champ-info { flex: 1; min-width: 0; }
.mychamps-champ-name { font-size: 16px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mychamps-champ-points { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.mychamps-champ-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.mychamps-role-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px;
  border: 1px solid;
  letter-spacing: 0.04em;
}
.mychamps-tier-badge {
  font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 5px;
  border: 1px solid;
  letter-spacing: 0.04em;
}
.mychamps-tier-info { font-size: 10px; color: var(--text-dim); }

/* Card stats row */
.mychamps-card-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.mychamps-stat { text-align: center; }
.mychamps-stat-val { font-size: 16px; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.mychamps-stat-val.good { color: #22c55e; }
.mychamps-stat-val.ok { color: #fbbf24; }
.mychamps-stat-val.bad { color: #ef4444; }
.mychamps-stat-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }

.mychamps-wr-diff {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px; margin-left: 4px;
  vertical-align: middle;
}
.mychamps-wr-diff.positive { background: rgba(34,197,94,0.12); color: #22c55e; }
.mychamps-wr-diff.negative { background: rgba(239,68,68,0.10); color: #ef4444; }

/* No game state */
.mychamps-no-games {
  display: flex !important; align-items: center; justify-content: center;
  padding: 16px 0 !important; grid-template-columns: 1fr !important;
}
.mychamps-no-games-text { font-size: 12px; color: var(--text-dim); font-style: italic; }

/* ── Rank estimate section ── */
.mychamps-rank-section {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--bg-body); border-radius: 8px;
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.mychamps-rank-position {
  font-size: 18px; font-weight: 900; letter-spacing: 0.02em;
}
.mychamps-rank-hash { font-size: 14px; opacity: 0.6; margin-right: 1px; }
.mychamps-rank-total { font-size: 11px; color: var(--text-secondary); }
.mychamps-rank-pct {
  font-size: 11px; font-weight: 800;
  padding: 2px 8px; border-radius: 5px;
  margin-left: auto;
}
.mychamps-rank-insufficient { font-size: 11px; color: var(--text-dim); font-style: italic; }

/* Rank classes */
.rank-elite { color: #ffd54f; }
.mychamps-rank-pct.rank-elite { background: rgba(255,213,79,0.15); color: #ffd54f; }
.rank-great { color: #82b1ff; }
.mychamps-rank-pct.rank-great { background: rgba(130,177,255,0.15); color: #82b1ff; }
.rank-good { color: #22c55e; }
.mychamps-rank-pct.rank-good { background: rgba(34,197,94,0.12); color: #22c55e; }
.rank-average { color: var(--orange); }
.mychamps-rank-pct.rank-average { background: var(--orange-bg); color: var(--orange); }
.rank-below { color: #ef4444; }
.mychamps-rank-pct.rank-below { background: rgba(239,68,68,0.10); color: #ef4444; }

/* ================================================================
   ONBOARDING (onb-*)
   ================================================================ */
.tracking-wrapper { max-width: 1100px; margin: 0 auto; padding: 20px 32px 40px; width: 100%; }
.tracking-onboarding { max-width: 1000px; margin: 0 auto; }

.onb-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 32px; }
.onb-step {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 99px;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.3s;
  cursor: pointer;
  user-select: none;
}
.onb-step:hover { background: rgba(255, 255, 255, 0.05); }
.onb-step span {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--border); display: flex;
  align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
}
.onb-step.active { color: var(--text-primary); background: var(--orange-bg); }
.onb-step.active span { background: var(--orange); color: #fff; }
.onb-step.done { color: #22c55e; }
.onb-step.done:hover { background: rgba(34, 197, 94, 0.1); }
.onb-step.done span { background: rgba(34,197,94,0.15); color: #22c55e; }
.onb-step-line { width: 24px; height: 2px; background: var(--border); flex-shrink: 0; }

.onb-card { text-align: center; animation: onbFadeIn 0.4s ease; }
@keyframes onbFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.onb-icon { font-size: 48px; margin-bottom: 12px; }
.onb-title { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.onb-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }

.onb-rank-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px; }
.onb-rank-btn {
  padding: 14px 10px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-primary); cursor: pointer;
  font-size: 13px; font-weight: 600;
  transition: all 0.2s; text-align: center;
}
.onb-rank-btn:hover { border-color: var(--orange-border); background: var(--orange-bg); }
.onb-rank-btn.selected { border-color: var(--orange); background: rgba(255,107,43,0.08); box-shadow: 0 0 20px rgba(255,107,43,0.1); }
.onb-rank-btn .rank-emoji { display: block; margin-bottom: 4px; }
.onb-rank-btn .rank-emoji img { width: 54px; height: 54px; object-fit: contain; }

.onb-role-grid { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.onb-role-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 22px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-primary); cursor: pointer;
  font-size: 14px; font-weight: 600;
  transition: all 0.2s; min-width: 90px;
}
.onb-role-btn:hover { border-color: var(--orange-border); background: var(--orange-bg); transform: translateY(-2px); }
.onb-role-btn.selected { border-color: var(--orange); background: rgba(255,107,43,0.08); }
.onb-role-emoji { font-size: 28px; }
.onb-role-icon { width: 46px; height: 46px; object-fit: contain; opacity: 0.6; transition: opacity 0.2s; }
.onb-role-btn:hover .onb-role-icon, .onb-role-btn.selected .onb-role-icon { opacity: 1; }

.onb-timeframe-grid { display: flex; flex-direction: column; gap: 8px; max-width: 400px; margin: 0 auto; }
.onb-timeframe-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-primary); cursor: pointer;
  font-size: 14px; font-weight: 600;
  transition: all 0.2s; text-align: left;
}
.onb-timeframe-btn:hover { border-color: var(--orange-border); background: var(--orange-bg); }
.onb-timeframe-btn.selected { border-color: var(--orange); background: rgba(255,107,43,0.08); }
.onb-timeframe-emoji { font-size: 24px; }

.onb-summary {
  background: var(--bg-card); border: 1px solid var(--orange-border);
  border-radius: 14px; padding: 20px;
  margin: 16px 0 20px; text-align: left;
}
.onb-summary-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.onb-summary-rank { font-size: 14px; font-weight: 700; color: var(--orange); display: flex; align-items: center; gap: 6px; }
.onb-summary-rank img { width: 32px; height: 32px; object-fit: contain; }
.onb-summary-arrow { font-size: 20px; color: var(--text-secondary); }
.onb-summary-time { font-size: 12px; color: var(--text-secondary); }
.onb-goals-list { display: flex; flex-direction: column; gap: 8px; }
.onb-goal-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--bg-body); }
.onb-goal-icon { font-size: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.onb-goal-icon img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; }
.onb-goal-info { flex: 1; }
.onb-goal-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.onb-goal-desc { font-size: 11px; color: var(--text-secondary); }
.onb-goal-target { font-size: 15px; font-weight: 700; color: #22c55e; white-space: nowrap; }
.onb-goal-priority-high { border-left: 3px solid #22c55e; }
.onb-goal-priority-medium { border-left: 3px solid #fbbf24; }

.btn-tracking-start {
  width: 100%; padding: 16px; border-radius: 14px; border: none;
  background: var(--orange); color: #fff;
  font-size: 18px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 8px 32px rgba(255,107,43,0.2);
}
.btn-tracking-start:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,107,43,0.3); }
.onb-trial-notice { margin-top: 12px; font-size: 12px; color: var(--text-secondary); text-align: center; }

/* ================================================================
   TRACKING DASHBOARD
   ================================================================ */
.tracking-trial-banner {
  padding: 10px 16px; border-radius: 10px; margin-bottom: 16px;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.trial-banner-free { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); color: #22c55e; }
.trial-banner-expiring { background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2); color: #fbbf24; }
.trial-banner-expired { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; }
.trial-banner-pro { background: var(--orange-bg); border: 1px solid var(--orange-border); color: var(--orange); }
.trial-upgrade-btn {
  padding: 4px 14px; border-radius: 8px;
  border: 1px solid currentColor; background: rgba(255,255,255,0.5);
  color: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
}
.trial-upgrade-btn:hover { background: rgba(255,255,255,0.8); }

.tracking-dash-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.tracking-dash-title { font-size: 32px; font-weight: 700; color: var(--text-primary); }
.tracking-dash-meta { display: flex; gap: 12px; margin-top: 4px; }
.tracking-streak, .tracking-games-total { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.tracking-streak { color: #f97316; }
.tracking-dash-right { display: flex; gap: 8px; }
.btn-tracking-secondary {
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.btn-tracking-secondary:hover { border-color: var(--orange-border); background: var(--orange-bg); color: var(--text-primary); }
.btn-tracking-primary {
  padding: 12px 20px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #ff6b2b, #a78bfa);
  color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; width: 100%; transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(255,107,43,0.2);
}
.btn-tracking-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,107,43,0.3); }

.tracking-encouragement {
  padding: 14px 18px; border-radius: 12px;
  background: var(--orange-bg); border: 1px solid var(--orange-border);
  margin-bottom: 16px; font-size: 14px; font-weight: 600;
  color: var(--text-primary); text-align: center;
}
/* ── Queue type toggle (Solo/Duo vs Flex) ── */
.tracking-queue-toggle {
  display: flex; gap: 0; margin-bottom: 18px;
  background: var(--bg-body); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 4px; overflow: hidden;
}
.queue-toggle-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: none; border-radius: 11px;
  background: transparent; color: var(--text-secondary);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: all 0.25s ease; position: relative;
}
.queue-toggle-btn:hover { color: var(--text-primary); background: rgba(0,0,0,0.03); }
.queue-toggle-btn.active {
  background: var(--bg-card); color: var(--orange);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,107,43,0.15);
  font-weight: 700;
}
.queue-toggle-btn.active[data-queue="flex"] {
  color: #7c3aed;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(124,58,237,0.15);
}
.queue-toggle-icon { font-size: 18px; }
.queue-toggle-label { letter-spacing: 0.2px; }
.queue-toggle-btn.active::after {
  content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--orange);
}
.queue-toggle-btn.active[data-queue="flex"]::after { background: #7c3aed; }

/* Tracking rank bar */
.tracking-rank-bar {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px; padding-top: 18px; padding-bottom: 18px; margin-bottom: 16px;
  overflow: visible;
}
.rank-bar-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.rank-bar-start-block { display: flex; flex-direction: column; gap: 2px; }
.rank-bar-start { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.rank-bar-start img { width: 40px; height: 40px; object-fit: contain; }
.rank-bar-target-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rank-bar-current, .rank-bar-target { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rank-bar-current img, .rank-bar-target img { width: 40px; height: 40px; object-fit: contain; }
.rank-bar-current { color: var(--orange); }
.rank-bar-target { color: #22c55e; }
.rank-bar-track { height: 12px; border-radius: 99px; background: var(--border); overflow: visible; position: relative; margin-top: 6px; }
.rank-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff6b2b, #ff8f5e); transition: width 0.5s ease; }
.rank-bar-current-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.rank-bar-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: #ff6b2b; border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(255,107,43,0.4);
}

/* Current rank row — shown below the bar */
.rank-bar-current-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px;
}
.rank-bar-current-name {
  font-size: 17px; font-weight: 800; color: var(--orange);
  display: flex; align-items: center; gap: 6px;
}
.rank-bar-current-name img { width: 32px; height: 32px; }
.rank-bar-current-lp-val {
  font-size: 14px; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-body); border: 1px solid var(--border); border-radius: 99px;
  padding: 2px 10px;
}

/* Footer row */
.rank-bar-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light);
  gap: 10px; flex-wrap: wrap;
}
.rank-bar-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary);
}
.rank-bar-meta-day { font-weight: 700; color: var(--text-primary); }
.rank-bar-meta-sep { color: var(--text-dim); }
.rank-bar-meta-dot { color: var(--text-dim); }
.rank-bar-meta-info { font-weight: 500; }
.rank-bar-meta-role {
  font-weight: 700; color: var(--orange);
  background: rgba(255,107,43,0.08); border: 1px solid rgba(255,107,43,0.2);
  border-radius: 99px; padding: 1px 8px; font-size: 12px;
}
.rank-bar-label {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px; font-size: 13px; color: var(--text-secondary);
}
.rank-update-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 8px;
  border: none; background: var(--orange); color: #fff;
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(255,107,43,0.25);
}
.rank-update-btn:hover { background: #e55a1a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,107,43,0.35); }
.rank-update-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.rank-update-btn .spin-icon { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Goal achieved banner */
.rank-bar-goal-achieved {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(74,222,128,0.1), rgba(34,197,94,0.06));
  border: 1.5px solid rgba(34,197,94,0.35);
}
.rank-bar-goal-achieved-icon { font-size: 28px; }
.rank-bar-goal-achieved-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rank-bar-goal-achieved-text strong { font-size: 15px; color: #16a34a; }
.rank-bar-goal-achieved-text span { font-size: 12px; color: var(--text-secondary); }
.rank-bar-new-goal-btn {
  padding: 8px 18px; border-radius: 10px; border: none;
  background: #22c55e; color: #fff; font-weight: 700; font-size: 13px;
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(34,197,94,0.25);
}
.rank-bar-new-goal-btn:hover { background: #16a34a; transform: translateY(-1px); }

/* Weekly day circles */
.tracking-weekly {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 16px;
}
.tracking-week-nav {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px;
}
.week-nav-btn {
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary); transition: all 0.2s;
}
.week-nav-btn:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); background: rgba(255,107,43,0.08); }
.week-nav-btn:disabled { cursor: not-allowed; }
.tracking-section-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; }
.tracking-weekly-grid { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.weekly-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.weekly-day-label { font-size: 9px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; }
.weekly-day-circle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  transition: all 0.3s; line-height: 1;
}
.weekly-day-circle.logged { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.08); }
.weekly-day-circle.today { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 12px rgba(255,107,43,0.15); }
.weekly-day-circle.today.logged { border-color: #22c55e; color: #22c55e; box-shadow: 0 0 12px rgba(34,197,94,0.15); }
.weekly-day-circle.day-future { border-color: var(--border); color: var(--text-dim); background: transparent; opacity: 0.5; }

/* Day status: green = goal met, orange = partial, red = missed */
.weekly-day-circle.day-goal-met { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.08); }
.weekly-day-circle.day-partial { border-color: var(--orange); color: var(--orange); background: rgba(255,107,43,0.08); }
.weekly-day-circle.day-missed { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.06); }
.weekly-day-circle.today.day-goal-met { box-shadow: 0 0 12px rgba(34,197,94,0.15); }
.weekly-day-circle.today.day-partial { box-shadow: 0 0 12px rgba(255,107,43,0.15); }
.weekly-day-circle.today.day-missed { box-shadow: 0 0 12px rgba(239,68,68,0.1); }
.weekly-day { cursor: pointer; }
.weekly-day:hover .weekly-day-circle { transform: scale(1.12); border-color: var(--orange); }
.weekly-day-circle.selected { border-color: var(--orange) !important; color: #fff !important; background: var(--orange) !important; box-shadow: 0 0 16px rgba(255,107,43,0.3); transform: scale(1.12); }
.weekly-day-circle.selected.day-goal-met { background: #22c55e !important; border-color: #22c55e !important; box-shadow: 0 0 16px rgba(34,197,94,0.3); }
.weekly-day-circle.selected.day-partial { background: var(--orange) !important; border-color: var(--orange) !important; }
.weekly-day-circle.selected.day-missed { background: #ef4444 !important; border-color: #ef4444 !important; box-shadow: 0 0 16px rgba(239,68,68,0.3); }
.weekly-day-filter-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 99px;
  background: var(--orange-bg); border: 1px solid var(--orange-border);
  color: var(--orange); font-size: 12px; font-weight: 700;
  margin-top: 10px; cursor: pointer; transition: all 0.2s;
}
.weekly-day-filter-badge:hover { background: var(--orange); color: #fff; }
.weekly-day-filter-badge svg { flex-shrink: 0; }
.tracking-weekly-stats { display: flex; gap: 16px; justify-content: center; }
.weekly-stat { text-align: center; }
.weekly-stat-value { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.weekly-stat-label { font-size: 11px; color: var(--text-secondary); }

/* Goal cards */
.tracking-goals-section { margin-bottom: 20px; }
.tracking-goals-grid { display: flex; flex-direction: column; gap: 18px; }
.goals-section-label { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.goals-section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tracking-goal-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; transition: border-color 0.3s;
}
.tracking-goal-card.on-track { border-left: 3px solid #22c55e; }
.tracking-goal-card.behind { border-left: 3px solid #fbbf24; }
.tracking-goal-card.off-track { border-left: 3px solid #ef4444; }
.goal-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.goal-card-icon { font-size: 20px; display: flex; align-items: center; justify-content: center; }
.goal-card-icon img { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; }
.goal-card-name { font-size: 15px; font-weight: 700; color: var(--text-primary); flex: 1; }
.goal-card-trend { font-size: 14px; }
.goal-card-bar { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; margin-bottom: 6px; }
.goal-card-bar-fill { height: 100%; border-radius: 99px; transition: width 0.5s ease; }
.goal-card-bar-fill.fill-green { background: linear-gradient(90deg, #22c55e, #16a34a); }
.goal-card-bar-fill.fill-yellow { background: linear-gradient(90deg, #fbbf24, #f97316); }
.goal-card-bar-fill.fill-red { background: linear-gradient(90deg, #ef4444, #dc2626); }
.goal-card-bar-fill.fill-purple { background: linear-gradient(90deg, #ff6b2b, #ff8f5e); }
.goal-card-stats { display: flex; justify-content: space-between; font-size: 12px; }
.goal-card-current { color: var(--text-secondary); }
.goal-card-target { color: var(--text-secondary); }

/* Daily form */
.tracking-daily-form {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px;
}
.tracking-form-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 14px; }
.tracking-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tracking-form-field { display: flex; flex-direction: column; gap: 4px; }
.tracking-form-field.full-width { grid-column: 1 / -1; }
.tracking-form-field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.tracking-form-field input, .tracking-form-field textarea {
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-body);
  color: var(--text-primary); font-size: 14px; font-family: 'Inter', sans-serif;
  outline: none; transition: border-color 0.2s;
}
.tracking-form-field input:focus, .tracking-form-field textarea:focus { border-color: var(--orange); }
.tracking-form-field textarea { resize: vertical; min-height: 44px; }
.tracking-form-saved { text-align: center; margin-top: 10px; font-size: 14px; font-weight: 600; color: #22c55e; animation: onbFadeIn 0.3s ease; }

/* ================================================================
   GAME LOG
   ================================================================ */
.tracking-game-log {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px;
}
.game-log-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.game-log-header .tracking-section-title { margin-bottom: 0; }
.game-log-chevron { transition: transform 0.25s ease; }
.game-log-collapsible { animation: fadeInDown 0.2s ease; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.game-log-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.game-log-period { display: flex; align-items: center; gap: 6px; }
.game-log-sep { font-size: 13px; color: var(--text-secondary); }
.game-log-date-input {
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-body);
  color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif;
  outline: none; cursor: pointer; transition: border-color 0.2s;
}
.game-log-date-input:focus { border-color: var(--orange); }
.btn-add-game {
  display: flex; align-items: center;
  padding: 7px 14px; border-radius: 8px;
  background: var(--orange); color: #fff;
  font-weight: 700; font-size: 13px;
  border: none; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}
.btn-add-game:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-import-riot {
  display: flex; align-items: center;
  padding: 7px 14px; border-radius: 8px;
  background: linear-gradient(135deg, #0a6640, #0ea5e9);
  color: #fff; font-weight: 700; font-size: 13px;
  border: none; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}
.btn-import-riot:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-import-riot:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.import-queue-select {
  padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
  cursor: pointer; outline: none; transition: border-color 0.15s;
}
.import-queue-select:focus { border-color: var(--orange); }

/* Add-game inline form */
.add-game-form {
  background: var(--bg-card); border: 1px solid var(--orange-border);
  border-radius: 12px; padding: 16px; margin-bottom: 14px;
  animation: onbFadeIn 0.2s ease;
}
.add-game-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.add-game-field { display: flex; flex-direction: column; gap: 4px; }
.add-game-field-notes { grid-column: 1 / -1; }
.add-game-field label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.add-game-field input {
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-body);
  color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif;
  outline: none; transition: border-color 0.2s;
}
.add-game-field input:focus { border-color: var(--orange); }
.result-toggle { display: flex; gap: 4px; margin-top: 2px; }
.result-btn {
  flex: 1; padding: 7px 6px; border-radius: 6px;
  font-weight: 700; font-size: 13px;
  border: 1px solid var(--border); background: var(--bg-body);
  color: var(--text-secondary); cursor: pointer; transition: all 0.15s;
}
.result-btn.win-btn.active { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #22c55e; }
.result-btn.loss-btn.active { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }
.add-game-actions { display: flex; gap: 8px; align-items: center; }
.btn-game-cancel {
  padding: 8px 16px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 13px;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.btn-game-cancel:hover { border-color: var(--text-secondary); color: var(--text-primary); }

/* Game log rows */
.game-log-list { display: flex; flex-direction: column; gap: 5px; }
.game-log-header-row {
  display: grid;
  grid-template-columns: 40px 90px 50px 32px 110px 80px 65px 65px 65px 90px 34px;
  align-items: center; gap: 8px; padding: 6px 12px;
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.game-log-row {
  display: grid;
  grid-template-columns: 40px 90px 50px 32px 110px 80px 65px 65px 65px 90px 34px;
  align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 8px; background: var(--bg-body);
  border: 1px solid var(--border); font-size: 14px;
  transition: background 0.15s;
}
.game-log-row:hover { background: rgba(255,107,43,0.03); }
.game-row-result {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 22px; border-radius: 5px;
  font-weight: 700; font-size: 12px;
}
.game-row-result.result-win { background: rgba(34,197,94,0.1); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
.game-row-result.result-loss { background: rgba(239,68,68,0.08); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.game-row-date { color: var(--text-secondary); font-size: 12px; }
.game-row-queue { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-align: center; white-space: nowrap; }
.game-row-queue.queue-solo { background: rgba(99,102,241,0.12); color: #6366f1; }
.game-row-queue.queue-flex { background: rgba(34,197,94,0.1); color: #22c55e; }
.game-row-champ-icon { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.game-row-champ-icon img { width: 100%; height: 100%; object-fit: cover; }
.game-row-champ { color: var(--orange); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-row-champ.dim { color: var(--text-secondary); opacity: 0.5; }
.game-row-stat { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.game-row-review {
  height: 26px; border-radius: 5px; padding: 0 10px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); font-size: 11px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: all 0.15s; white-space: nowrap; line-height: 1;
}
.game-row-review:hover { background: var(--orange-bg); border-color: var(--orange); color: var(--orange); }
.game-row-delete {
  width: 26px; height: 26px; border-radius: 5px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); font-size: 11px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; padding: 0; line-height: 1;
}
.game-row-delete:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); color: #ef4444; }
.game-log-empty { text-align: center; color: var(--text-secondary); font-size: 13px; padding: 28px 16px; }
.game-log-empty strong { color: var(--orange); }

/* ================================================================
   PROGRESSION PAGE (prog-*)
   ================================================================ */
.tracking-progression-title { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; }
.prog-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.prog-stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; text-align: center;
}
.prog-stat-value { font-size: 28px; font-weight: 700; color: var(--text-primary); }
.prog-stat-label { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.prog-stat-card.stat-purple .prog-stat-value { color: var(--orange); }
.prog-stat-card.stat-green .prog-stat-value  { color: #22c55e; }
.prog-stat-card.stat-cyan .prog-stat-value   { color: #0ea5e9; }
.prog-stat-card.stat-orange .prog-stat-value  { color: #f97316; }

.prog-goals-detail { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.prog-goal-detail {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
}
.prog-goal-left { flex: 1; }
.prog-goal-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }\n.prog-goal-title img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; }
.prog-goal-meta { display: flex; gap: 12px; font-size: 11px; }
.prog-goal-current { color: var(--orange); font-weight: 600; }
.prog-goal-target { color: var(--text-secondary); }
.prog-goal-trend-tag { padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; }
.trend-up { background: rgba(34,197,94,0.1); color: #22c55e; }
.trend-stable { background: rgba(107,114,128,0.1); color: var(--text-secondary); }
.trend-down { background: rgba(239,68,68,0.1); color: #ef4444; }
.prog-goal-sparkline { flex-shrink: 0; }

/* History table */
.prog-history { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; }
.prog-history-table-wrap { overflow-x: auto; }
.prog-history-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.prog-history-table th {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.prog-history-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.prog-history-table tr:hover td { background: rgba(255,107,43,0.02); }

/* ================================================================
   BADGES (badge-*)
   ================================================================ */
.badge-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.badge-easy { background: rgba(34,197,94,0.1); color: #22c55e; }
.badge-easy .badge-dot { background: #22c55e; }
.badge-safe { background: rgba(251,191,36,0.1); color: #fbbf24; }
.badge-safe .badge-dot { background: #fbbf24; }
.badge-avoid { background: rgba(239,68,68,0.1); color: #ef4444; }
.badge-avoid .badge-dot { background: #ef4444; }

.badge-soon {
  position: absolute; top: 8px; right: 8px;
  background: var(--orange-bg); border: 1px solid var(--orange);
  color: var(--orange); font-size: 10px; font-weight: 700;
  padding: 4px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 1px;
}

/* ================================================================
   CHAMPION SELECT / GUIDE
   ================================================================ */
.champ-select-container {
  flex: 1; display: flex; flex-direction: column;
  padding: 40px; gap: 30px; align-items: center; overflow-y: auto;
}
.champ-select-title { font-size: 32px; font-weight: 700; color: var(--text-primary); letter-spacing: 1px; }
.champ-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px; width: 100%; max-width: 900px; padding: 20px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px;
}
.champ-item {
  position: relative; cursor: pointer; border-radius: 8px;
  overflow: hidden; border: 2px solid transparent;
  transition: all 0.2s; aspect-ratio: 1;
}
.champ-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.2s; }
.champ-item-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff; font-size: 11px; padding: 8px 4px;
  text-align: center; font-weight: 600;
}
.champ-item:hover { border-color: var(--orange); transform: scale(1.05); }
.champ-item:hover img { opacity: 1; }
.champ-item.selected { border-color: var(--orange); box-shadow: 0 0 16px rgba(255,107,43,0.2); }
.champ-item.selected img { opacity: 1; }
.champ-icon.locked { opacity: 0.35; filter: grayscale(0.8); pointer-events: none; }

.guide-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; overflow-y: auto; }
.guide-content {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 40px; max-width: 900px; width: 100%;
}
.guide-content:empty { background: none; border: none; padding: 0; }
.guide-section { margin-bottom: 28px; }
.guide-section h3 {
  font-size: 18px; font-weight: 700; color: var(--orange);
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;
  border-left: 3px solid var(--orange); padding-left: 12px;
}
.guide-section p { color: var(--text-primary); line-height: 1.6; margin-bottom: 8px; }
.guide-list { list-style: none; padding-left: 0; }
.guide-list li { color: var(--text-primary); padding-left: 24px; position: relative; margin-bottom: 8px; line-height: 1.6; }
.guide-list li::before { content: '?'; position: absolute; left: 0; color: var(--orange); font-weight: bold; }
.guide-matchups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.matchup-box { padding: 12px; background: var(--bg-body); border: 1px solid var(--border); border-radius: 6px; }
.matchup-box.favorable { border-left: 3px solid #0ea5e9; }
.matchup-box.unfavorable { border-left: 3px solid #ef4444; }
.matchup-box-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; color: var(--text-secondary); }
.matchup-box-list { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.guide-section-visual {
  background: var(--orange-bg); border: 1px solid var(--orange-border);
  border-radius: 12px; padding: 20px; margin-bottom: 20px;
  transition: all 0.3s ease;
}
.guide-section-visual:hover { background: rgba(255,107,43,0.08); border-color: rgba(255,107,43,0.3); }
.guide-list-simple { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 12px; }
.guide-list-simple li { color: var(--text-primary); padding-left: 20px; position: relative; line-height: 1.7; font-size: 15px; transition: all 0.2s ease; }
.guide-list-simple li:before { content: '?'; position: absolute; left: 0; color: var(--orange); font-weight: bold; font-size: 16px; }
.guide-list-simple li:hover { padding-left: 24px; color: var(--orange); }
.guide-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; flex: 1; }
.spinner { width: 40px; height: 40px; border: 2px solid var(--border); border-top-color: var(--orange); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================
   MATCH RESULT / KDA (stats compat)
   ================================================================ */
.match-result { display: flex; flex-direction: column; }
.match-result-text { font-weight: 700; font-size: 14px; }
.match-result-text.win { color: #22c55e; }
.match-result-text.loss { color: #ef4444; }
.match-queue { font-size: 11px; color: var(--text-secondary); }
.match-kda { display: flex; flex-direction: column; }
.match-kda-main { font-size: 15px; font-weight: 700; }
.match-kda-sub { font-size: 11px; color: var(--text-secondary); }
.match-cs { font-size: 13px; color: var(--text-secondary); }

/* ================================================================
   POST-GAME MODAL (pgm-*)
   ================================================================ */
.pgm-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  animation: pgm-fade-in 0.25s ease;
}
@keyframes pgm-fade-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.pgm-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.15);
  width: 600px; max-width: calc(100vw - 32px);
  padding: 28px 32px 24px;
}
.pgm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pgm-header-left { display: flex; align-items: center; gap: 14px; }
.pgm-champ-icon {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--orange-border);
  object-fit: cover; background: var(--orange-bg);
}
.pgm-title { font-size: 20px; font-weight: 700; color: var(--orange); letter-spacing: 0.5px; }
.pgm-subtitle { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.pgm-close {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-body); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.pgm-close:hover { background: var(--orange-bg); color: var(--orange); }

.pgm-summary-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-body); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 18px;
}
.pgm-badge { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 6px; letter-spacing: 0.5px; text-transform: uppercase; }
.pgm-result-badge.win  { background: rgba(34,197,94,0.1); color: #22c55e; border: 1px solid rgba(34,197,94,0.2); }
.pgm-result-badge.loss { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.pgm-result-badge.unknown { background: rgba(107,114,128,0.08); color: var(--text-secondary); border: 1px solid var(--border); }
.pgm-champ-name { font-size: 14px; font-weight: 600; color: var(--text-primary); flex: 1; }
.pgm-kda-badge  { font-size: 12px; color: var(--text-secondary); }
.pgm-dur-badge  { font-size: 12px; color: var(--text-secondary); }

.pgm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 12px; margin-bottom: 20px; }
.pgm-field { display: flex; flex-direction: column; gap: 5px; }
.pgm-field-wide { grid-column: 1 / -1; }
.pgm-field label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-secondary);
}
.pgm-input {
  background: var(--bg-body); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; color: var(--text-primary);
  font-size: 13px; font-family: inherit;
  transition: border-color 0.15s; width: 100%; box-sizing: border-box;
}
.pgm-input:focus { outline: none; border-color: var(--orange); background: var(--orange-bg); }

.pgm-actions { display: flex; align-items: center; gap: 10px; }
.pgm-save-btn {
  flex: 1; padding: 12px 20px;
  background: var(--orange); border: none; border-radius: 10px;
  color: #fff; font-size: 15px; font-weight: 700;
  letter-spacing: 0.5px; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.pgm-save-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.pgm-skip-btn {
  padding: 12px 18px;
  background: var(--bg-body); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text-secondary);
  font-size: 13px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.pgm-skip-btn:hover { background: var(--bg-card); color: var(--text-primary); }

/* ── Post-Game Check-out ── */
.pgm-checkout {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  animation: coSlideIn 0.35s ease;
}
@keyframes coSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pgm-checkout-header {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; margin-bottom: 16px; text-align: center;
}
.pgm-checkout-icon { font-size: 28px; }
.pgm-checkout-title {
  font-size: 16px; font-weight: 800; color: var(--text-primary);
  letter-spacing: 0.3px;
}
.pgm-checkout-subtitle {
  font-size: 12px; color: var(--text-secondary); opacity: 0.8;
}
.co-field {
  margin-bottom: 14px;
}
.co-label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-secondary); margin-bottom: 6px;
}
.co-tilt-options, .co-mood-options, .co-continue-options {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.co-tilt-btn, .co-mood-btn, .co-continue-btn {
  flex: 1; min-width: 60px; padding: 8px 6px;
  background: var(--bg-body); border: 1.5px solid var(--border);
  border-radius: 8px; color: var(--text-secondary);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.15s; text-align: center; white-space: nowrap;
}
.co-tilt-btn:hover, .co-mood-btn:hover, .co-continue-btn:hover {
  border-color: var(--orange); color: var(--text-primary);
  background: var(--orange-bg);
}
.co-tilt-btn.active, .co-mood-btn.active, .co-continue-btn.active {
  border-color: var(--orange); background: var(--orange-bg);
  color: var(--orange); font-weight: 700;
}
.co-tags-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.co-tag-btn {
  padding: 6px 10px; background: var(--bg-body);
  border: 1.5px solid var(--border); border-radius: 8px;
  color: var(--text-secondary); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.co-tag-btn:hover {
  border-color: var(--orange); color: var(--text-primary);
}
.co-tag-btn.active {
  border-color: var(--orange); background: var(--orange-bg);
  color: var(--orange); font-weight: 700;
}
.co-textarea {
  width: 100%; box-sizing: border-box; min-height: 50px;
  padding: 8px 10px; background: var(--bg-body);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-primary); font-size: 12px; font-family: inherit;
  resize: vertical; transition: border-color 0.15s;
}
.co-textarea:focus { outline: none; border-color: var(--orange); background: var(--orange-bg); }
.co-submit-btn { margin-top: 8px; width: 100%; }
.co-skip-btn { margin-top: 6px; width: 100%; text-align: center; }
@keyframes coShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.co-shake { animation: coShake 0.3s ease 2; }

/* ================================================================
   DASHBOARD HOME EXTRA CLASSES
   ================================================================ */
.dash-action-text { flex: 1; min-width: 0; }
.dash-welcome-rank {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px;
}
.dash-welcome-rank img {
  width: 48px; /* Reduced from default size */
  height: 48px;
  border-radius: 8px;
}

/* (Old hero/features/CTA/footer CSS removed – replaced by wizard above) */

/* ================================================================
   MISC UTILITY CLASSES
   ================================================================ */
.hidden { display: none !important; }
.draft-instructions.hidden { display: none !important; }

/* Team labels */
.team-label.ally { color: #22c55e; }
.team-label.enemy { color: #ef4444; }

/* Draft locked pick slot */
.draft-pick-slot.locked { opacity: 0.4; pointer-events: none; }

/* Recommendation info */
.rec-info { flex: 1; }

/* Stat line details */
.stat-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; color: var(--text-secondary); }
.stat-line strong { color: var(--text-primary); font-size: 16px; }
.stat-details { display: flex; gap: 24px; }
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-label { font-size: 12px; color: var(--text-secondary); }
.stat-value { font-size: 13px; color: var(--text-secondary); font-weight: 600; }

/* Champ preview (champion select) */
.champ-preview {
  position: fixed; bottom: 40px; right: 40px;
  background: var(--bg-card); border: 2px solid var(--orange);
  border-radius: 12px; padding: 20px; width: 280px;
  box-shadow: 0 0 32px rgba(255,107,43,0.15);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.champ-preview img { width: 100%; height: 240px; object-fit: cover; border-radius: 8px; border: 1px solid var(--orange); }
.champ-preview-info { width: 100%; text-align: center; }
.champ-preview-info h3 { font-size: 18px; font-weight: 700; color: var(--orange); margin-bottom: 12px; }

/* ================================================================
   MATCHUP PAGE
   ================================================================ */
.matchup-section { padding: 80px 64px; margin-bottom: 28px; }
.matchup-content { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; }
.matchup-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 36px; }
.matchup-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 24px; }
.champion-name { color: var(--orange); }
.matchup-phases { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.phase-item { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-secondary); }
.phase-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.phase-safe .phase-dot { background: #fbbf24; }
.phase-danger .phase-dot { background: #ef4444; }
.phase-power .phase-dot { background: #22c55e; }
.matchup-tip { background: var(--orange-bg); border: 1px solid var(--orange-border); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-primary); }
.tip-icon { font-size: 20px; }

/* Profile card compat */
.profile-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px 28px; }
.profile-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; }
.profile-content { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.profile-icon { width: 48px; height: 48px; font-size: 28px; background: var(--orange-bg); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.profile-info { flex: 1; }
.profile-name { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.profile-rank { font-size: 14px; color: var(--text-secondary); }
.profile-stats { border-top: 1px solid var(--border); padding-top: 20px; }

/* User tracking button */
.user-btn-tracking {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.user-btn-tracking:hover { border-color: var(--orange-border); color: var(--orange); background: var(--orange-bg); }

/* ============================================================
   ENHANCED ACTIVE GOALS HIGHLIGHTING
   ============================================================ */
.tracking-goal-card.on-track {
  border-left: 4px solid #22c55e;
  background: linear-gradient(135deg, rgba(34,197,94,0.06) 0%, var(--bg-card) 100%);
  box-shadow: 0 2px 12px rgba(34,197,94,0.10);
}
.tracking-goal-card.on-track .goal-card-name { color: #16a34a; }
.tracking-goal-card.on-track .goal-card-status-badge {
  background: rgba(34,197,94,0.12); color: #16a34a; border: 1px solid rgba(34,197,94,0.25);
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.5px;
}

.tracking-goal-card.behind {
  border-left: 4px solid #fbbf24;
  background: linear-gradient(135deg, rgba(251,191,36,0.05) 0%, var(--bg-card) 100%);
  box-shadow: 0 2px 12px rgba(251,191,36,0.08);
}
.tracking-goal-card.behind .goal-card-status-badge {
  background: rgba(251,191,36,0.12); color: #d97706; border: 1px solid rgba(251,191,36,0.3);
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.5px;
}

.tracking-goal-card.off-track {
  border-left: 4px solid #ef4444;
  background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, var(--bg-card) 100%);
  box-shadow: 0 2px 12px rgba(239,68,68,0.10);
}
.tracking-goal-card.off-track .goal-card-name { color: #dc2626; }
.tracking-goal-card.off-track .goal-card-status-badge {
  background: rgba(239,68,68,0.12); color: #dc2626; border: 1px solid rgba(239,68,68,0.25);
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* Self-assigned objectives (from Home) */
.tracking-goal-card.self-assigned-card {
  border-left: 4px solid #ff6b2b;
  background: linear-gradient(135deg, rgba(255,107,43,0.06) 0%, var(--bg-card) 100%);
  box-shadow: 0 2px 12px rgba(255,107,43,0.08);
}
.self-assigned-badge {
  background: rgba(255,107,43,0.12) !important;
  color: #ff6b2b !important;
  border: 1px solid rgba(255,107,43,0.25) !important;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.5px;
}
.self-assigned-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 4px 0 6px;
  padding: 6px 8px;
  background: rgba(255,107,43,0.04);
  border-radius: 6px;
  border-left: 2px solid rgba(255,107,43,0.3);
}
.self-assigned-date {
  font-size: 11px;
  color: var(--text-dim);
}
.self-assigned-remove-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.self-assigned-remove-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239,68,68,0.06);
}

/* ============================================================
   LP-BASED RANK PROGRESS BAR
   ============================================================ */
.rank-bar-track { position: relative; height: 10px; border-radius: 99px; background: var(--border); overflow: visible; margin: 8px 0; }
.rank-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff6b2b, #ff8f5e); transition: width 0.6s ease; position: relative; z-index: 1; }
.rank-bar-current-badge {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  background: #fff; border: 2px solid var(--orange); border-radius: 10px;
  padding: 3px 10px; font-size: 11px; font-weight: 700; color: var(--orange);
  white-space: nowrap; z-index: 5; box-shadow: 0 2px 8px rgba(255,107,43,0.25);
  display: flex; align-items: center; gap: 4px;
}
.rank-bar-current-badge img { width: 18px; height: 18px; }
.rank-bar-pct-label { font-size: 10px; font-weight: 700; color: var(--text-dim); margin-top: 2px; }

/* ============================================================
   KPI TOOLTIP HOVER
   ============================================================ */
.goal-card-tooltip-trigger { position: relative; cursor: help; }
.goal-card-tooltip {
  display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: #1a1d26; color: #f5f6fa; border-radius: 10px; padding: 14px 16px;
  width: 300px; font-size: 12px; line-height: 1.6; z-index: 1000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25); pointer-events: none;
  border: 1px solid rgba(255,107,43,0.2);
}
.goal-card-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1a1d26;
}
.goal-card-tooltip-title { font-weight: 700; font-size: 13px; color: #ff8f5e; margin-bottom: 6px; }
.goal-card-tooltip-body { color: #d1d5db; }
.goal-card-tooltip-trigger:hover .goal-card-tooltip { display: block; pointer-events: auto; }

/* ── Rich Goal Hover Tooltip ── */
.goal-card-hoverable { position: relative; cursor: default; }
.goal-card-hover-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #1f2937;
  border-radius: 14px;
  padding: 16px 18px;
  width: 420px;
  max-height: 440px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.5;
  z-index: 2000;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid rgba(255,107,43,0.25);
  pointer-events: none;
}
.goal-card-hover-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #ffffff;
}
.goal-card-hoverable:hover .goal-card-hover-tooltip {
  display: block;
  pointer-events: auto;
}
.goal-tt-title {
  font-weight: 800;
  font-size: 14px;
  color: #ff6b2b;
  margin-bottom: 6px;
}
.goal-tt-desc {
  color: #6b7280;
  font-size: 12px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.goal-tt-tip {
  background: rgba(255,107,43,0.07);
  border-left: 3px solid #ff6b2b;
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: #374151;
  margin-bottom: 10px;
  line-height: 1.4;
}
.goal-tt-status {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}
.goal-tt-games-header {
  font-weight: 700;
  font-size: 12px;
  color: #1f2937;
  margin-bottom: 6px;
}
.goal-tt-games-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.goal-tt-game-row td {
  padding: 4px 4px;
  border-bottom: 1px solid #f3f4f6;
  white-space: nowrap;
  vertical-align: middle;
}
.goal-tt-game-row:last-child td {
  border-bottom: none;
}
.goal-tt-game-row td img {
  margin-right: 4px;
}
.goal-tt-wl { font-weight: 700; width: 18px; }
.goal-tt-date { color: #9ca3af; width: 38px; }
.goal-tt-champ { color: #374151; }
.goal-tt-kda { color: #6b7280; text-align: center; white-space: nowrap; }
.goal-tt-val { text-align: right; font-weight: 700; }
.goal-tt-table-head th {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 4px 4px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.goal-tt-cta {
  margin-top: 8px;
  font-size: 11px;
  color: #ff6b2b;
  font-style: italic;
  text-align: center;
}
.goal-card-hover-tooltip::-webkit-scrollbar { width: 4px; }
.goal-card-hover-tooltip::-webkit-scrollbar-track { background: transparent; }
.goal-card-hover-tooltip::-webkit-scrollbar-thumb { background: rgba(255,107,43,0.25); border-radius: 4px; }

/* ── Goal Detail Modal (click to open) ── */
.goal-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.goal-detail-modal {
  background: #ffffff;
  border-radius: 18px;
  width: 90%;
  max-width: 900px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 32px 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,107,43,0.15);
  position: relative;
}
.goal-detail-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 22px;
  color: #9ca3af;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.goal-detail-close:hover {
  background: #f3f4f6;
  color: #374151;
}
.goal-detail-header {
  margin-bottom: 24px;
}
.goal-detail-title {
  font-size: 22px;
  font-weight: 800;
  color: #ff6b2b;
  margin-bottom: 4px;
}
.goal-detail-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}
.goal-detail-stats-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.goal-detail-stat {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 16px;
  text-align: center;
  min-width: 100px;
}
.goal-detail-stat-val {
  font-size: 20px;
  font-weight: 800;
}
.goal-detail-stat-label {
  font-size: 11px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.goal-detail-chart-wrap {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 24px;
}
.goal-detail-chart-wrap canvas {
  width: 100% !important;
  display: block;
}
.goal-detail-table-wrap {
  max-height: 300px;
  overflow-y: auto;
}
.goal-detail-table-wrap::-webkit-scrollbar { width: 5px; }
.goal-detail-table-wrap::-webkit-scrollbar-track { background: transparent; }
.goal-detail-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,107,43,0.2); border-radius: 4px; }
.goal-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.goal-detail-table thead th {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  border-bottom: 2px solid #e5e7eb;
  text-align: left;
  position: sticky;
  top: 0;
  background: #ffffff;
}
.goal-detail-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
  white-space: nowrap;
}
.goal-detail-table tbody tr:hover {
  background: #fef3ee;
}
.goal-detail-table tbody td img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  vertical-align: middle;
  margin-right: 6px;
}

/* ============================================================
   COACHING PAGE
   ============================================================ */
.coaching-wrapper { max-width: 900px; margin: 0 auto; padding: 28px 32px; }
.coaching-header { margin-bottom: 24px; }
.coaching-header h1 { font-size: 22px; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 10px; }
.coaching-header p { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.coaching-section { margin-bottom: 28px; }
.coaching-section-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.coaching-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 12px; transition: all 0.2s;
}
.coaching-card:hover { border-color: var(--orange-border); box-shadow: 0 4px 16px rgba(255,107,43,0.08); }
.coaching-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.coaching-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.coaching-card-icon img { width: 36px; height: 36px; border-radius: 8px; }
.coaching-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.coaching-card-subtitle { font-size: 12px; color: var(--text-secondary); }
.coaching-card-body { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.coaching-card-body ul { padding-left: 18px; margin: 6px 0; }
.coaching-card-body li { margin-bottom: 4px; }
.coaching-card-body strong { color: var(--text-primary); }
.coaching-tip-highlight {
  background: var(--orange-bg); border: 1px solid var(--orange-border); border-radius: 8px;
  padding: 10px 14px; margin-top: 8px; font-size: 12px; color: var(--orange); font-weight: 600;
}
.coaching-empty {
  text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 14px;
}
.coaching-empty svg { margin-bottom: 12px; opacity: 0.5; }
.coaching-generate-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #ff6b2b, #ff8f5e); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.coaching-generate-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,107,43,0.3); }
.coaching-loading { text-align: center; padding: 40px; color: var(--text-secondary); }
.coaching-loading .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--orange); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 12px; }
@keyframes coaching-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.coaching-card { animation: coaching-fadeIn 0.3s ease forwards; }

/* Coaching tip rows (local coaching) */
.coaching-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.coaching-tip:hover { border-color: var(--orange-border); }
.coaching-tip-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.coaching-tip-content { flex: 1; }
.coaching-tip-content strong { font-size: 14px; color: var(--text-primary); display: block; margin-bottom: 4px; }
.coaching-tip-content p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.coaching-content-text { font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.coaching-content-text strong { color: var(--text-primary); }

/* Champion pool champion buttons (quiz step 3) */
.champpool-champ-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg-body);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
}
.champpool-champ-btn img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: border-color 0.2s;
}
.champpool-champ-btn:hover { border-color: var(--orange-border); color: var(--text-primary); }
.champpool-champ-btn.selected { border-color: var(--orange); background: var(--orange-bg); color: var(--orange); }
.champpool-champ-btn.selected img { border-color: var(--orange); }
.champpool-champ-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}

/* Champion pool result cards (generated results) */
.champpool-result-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.champpool-result-info { flex: 1; }
.champpool-result-info strong { font-size: 16px; color: var(--text-primary); display: block; margin-bottom: 4px; }
.champpool-result-info p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 4px 0 0; }

/* Runes & Build champion grid items */
.rb-champ-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
}
.rb-champ-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: border-color 0.15s;
}
.rb-champ-item:hover { background: var(--bg-body); }
.rb-champ-item:hover img { border-color: var(--orange-border); }
.rb-champ-item.selected { border-color: var(--orange); background: var(--orange-bg); }
.rb-champ-item.selected img { border-color: var(--orange); }
#rbChampGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}

/* Runes & Build coming soon notice */
.rb-coming-soon {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-top: 10px;
  line-height: 1.6;
}

/* Runes & Build option cards */
.rb-option-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.rb-option-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.rb-option-desc { font-size: 13px; color: var(--text-secondary); margin: 0; }

/* ============================================================
   RUNES & BUILD PAGE
   ============================================================ */
#runesBuildPage {
  position: fixed !important;
  top: 0 !important;
  left: 260px !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto;
  z-index: 10;
  background: var(--bg-body);
}
#runesBuildPage::before { display: none; }
.runes-build-wrapper {
  max-width: 1800px;
  margin: 0 auto;
  padding: 48px 40px 32px 40px;
}

/* Compact header */
.rb-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.rb-page-header .draft-back-btn {
  padding: 6px 10px;
  margin: 0;
}
.rb-page-header-text { display: flex; flex-direction: column; }
.rb-page-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.rb-page-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}
.rb-header-spacer { flex: 1; }

/* Selection bar */
.rb-selection-bar {
  display: flex;
  gap: 14px;
  margin-top: 0;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
}
@media (max-width: 900px) {
  .rb-selection-bar { flex-direction: column; }
}

/* Left panel: role + elo stacked */
.rb-filters-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
}

.rb-selector-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* Elo selector (below roles) */
.rb-elo-selector { }
.rb-elo-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.rb-elo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  min-width: 54px;
}
.rb-elo-btn:hover {
  border-color: rgba(255,107,43,0.3);
  background: rgba(255,107,43,0.04);
  color: var(--text-primary);
}
.rb-elo-btn.active {
  border-color: var(--orange);
  background: rgba(255,107,43,0.08);
  color: var(--orange);
  box-shadow: 0 0 10px rgba(255,107,43,0.1);
}
.rb-elo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.rb-elo-badge-all {
  border-radius: 8px;
  background: var(--bg-body);
  border: 1px solid var(--border);
}
.rb-elo-badge img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.14));
}

/* Ranked emblems include large transparent padding in source PNGs.
   Crop then upscale so visible emblem matches role icon size. */
.rb-elo-btn:not([data-elo="all"]) .rb-elo-badge img {
  clip-path: inset(28% 28% 28% 28%);
  transform: scale(2.65);
  transform-origin: center;
}

/* Keep Riot "fill / n'importe" icon at normal size */
.rb-elo-btn[data-elo="all"] .rb-elo-badge img {
  transform: none;
}
.rb-role-icon-svg {
  width: 24px;
  height: 24px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.rb-role-btn.active .rb-role-icon-svg { opacity: 1; stroke: var(--orange); }

/* Role buttons */
.rb-role-selector { flex-shrink: 0; }
.rb-role-buttons {
  display: flex;
  gap: 6px;
}
.rb-role-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}
.rb-role-btn:hover {
  border-color: rgba(255,107,43,0.3);
  background: rgba(255,107,43,0.04);
  color: var(--text-primary);
}
.rb-role-btn.active {
  border-color: var(--orange);
  background: rgba(255,107,43,0.08);
  color: var(--orange);
  box-shadow: 0 0 12px rgba(255,107,43,0.1);
}
.rb-role-icon {
  width: 24px;
  height: 24px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.rb-role-btn.active .rb-role-icon { opacity: 1; }

/* Champion selector */
.rb-champ-selector { flex: 1 1 420px; min-width: 420px; }
.rb-search-wrap {
  position: relative;
  margin-bottom: 12px;
}
.rb-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  opacity: 0.5;
}
.rb-champ-input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.rb-champ-input:focus { border-color: var(--orange); }
.rb-champ-input::placeholder { color: var(--text-secondary); opacity: 0.5; }

/* Champion grid */
.rb-champ-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(64px, 1fr));
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.rb-champ-grid::-webkit-scrollbar { width: 4px; }
.rb-champ-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.rb-champ-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rb-champ-btn:hover {
  border-color: rgba(255,107,43,0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.rb-champ-btn.active {
  border-color: var(--orange);
  background: rgba(255,107,43,0.08);
  box-shadow: 0 0 12px rgba(255,107,43,0.12);
}
.rb-champ-btn-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: border-color 0.2s;
}
.rb-champ-btn.active .rb-champ-btn-img { border-color: var(--orange); }
.rb-champ-btn-name {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68px;
  text-align: center;
}
.rb-champ-btn.active .rb-champ-btn-name { color: var(--orange); }
.rb-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Champion banner */
.rb-champ-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  margin-top: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  animation: fadeInUp 0.3s ease;
}
.rb-champ-banner-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--orange);
}
.rb-champ-banner-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
}
.rb-champ-banner-role {
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Results area */
.rb-results { margin-top: 16px; }
.rb-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1200px) { .rb-options-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .rb-options-grid { grid-template-columns: 1fr; } }

/* Option card */
.rb-option-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
}
.rb-option-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border);
  border-radius: 16px 16px 0 0;
}
.rb-option-best::before {
  background: linear-gradient(90deg, #ff6b2b, #a78bfa);
}
.rb-option-card:hover {
  border-color: rgba(255,107,43,0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.rb-option-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.rb-option-rank {
  font-size: 16px;
  font-weight: 800;
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}
.rb-option-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.rb-option-stats {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.rb-stat-pill {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.rb-wr-good { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
.rb-wr-low { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.rb-stat-games { background: rgba(255,255,255,0.04); color: var(--text-secondary); border: 1px solid var(--border); }

/* Option body */
.rb-option-body { padding: 14px 16px; }
.rb-subsection-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  margin-top: 10px;
}
.rb-subsection-label:first-child { margin-top: 0; }

/* Runes row */
.rb-runes-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.rb-rune-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: rgba(0,0,0,0.2);
  object-fit: contain;
}
.rb-rune-keystone {
  width: 36px;
  height: 36px;
  border-color: var(--orange);
}
.rb-rune-tree { opacity: 0.7; }
.rb-rune-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 3px;
}
.rb-shard-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
  object-fit: contain;
}

/* Spells row */
.rb-spells-row {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.rb-spell-img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Build items row */
.rb-build-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.rb-item-img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}
.rb-build-arrow {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.4;
}

/* Apply button */
.rb-apply-btn {
  width: 100%;
  padding: 8px 0;
  margin-top: 10px;
  background: rgba(255,107,43,0.1);
  color: var(--orange);
  border: 1px solid rgba(255,107,43,0.3);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}
.rb-apply-btn:hover {
  background: rgba(255,107,43,0.2);
  border-color: var(--orange);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,107,43,0.15);
}
.rb-apply-btn.rb-applied {
  background: rgba(74,222,128,0.12);
  color: #4ade80;
  border-color: rgba(74,222,128,0.3);
  cursor: default;
}

/* Skill order section */
.rb-skills-section {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.rb-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.rb-section-title svg { color: var(--orange); stroke: var(--orange); }
.rb-skills-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rb-skill-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.rb-skill-key {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: 10px;
  background: rgba(255,107,43,0.06);
}
.rb-skill-priority {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
}
.rb-skill-arrow {
  font-size: 16px;
  color: var(--text-secondary);
  opacity: 0.4;
  margin-top: -12px;
}

/* Empty & no data */
.rb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  margin-top: 16px;
}
.rb-empty-icon { font-size: 48px; opacity: 0.4; margin-bottom: 12px; }
.rb-empty-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.rb-empty-sub { font-size: 13px; color: var(--text-secondary); max-width: 300px; }
.rb-no-data {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  grid-column: 1 / -1;
}
.rb-no-data-icon { font-size: 36px; opacity: 0.4; margin-bottom: 8px; display: block; }
.rb-no-data p { font-size: 14px; }

/* ============================================================
   CHAMPION POOL PAGE
   ============================================================ */
.champpool-wrapper { max-width: 1120px; margin: 0 auto; padding: 28px 32px; }
.champpool-header { margin-bottom: 24px; }
.champpool-header h1 { font-size: 22px; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 10px; }
.champpool-header p { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }

/* Questionnaire */
.champpool-quiz { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px 28px; }
.champpool-quiz-step { display: none; }
.champpool-quiz-step.active { display: block; }
.champpool-quiz-question { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.champpool-quiz-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; }
.champpool-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.champpool-role-options { display: flex; gap: 10px; align-items: stretch; }
.champpool-role-options .champpool-option { flex: 1 1 0; min-width: 0; }
.champpool-option {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--bg-body); cursor: pointer; transition: all 0.2s;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); text-align: center;
}
.champpool-option:hover { border-color: var(--orange-border); color: var(--text-primary); }
.champpool-option.selected { border-color: var(--orange); background: var(--orange-bg); color: var(--orange); }
.champpool-option img { width: 40px; height: 40px; border-radius: 8px; }
.champpool-option .champpool-role-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.champpool-option .champpool-role-icon img { width: 28px; height: 28px; border-radius: 0; object-fit: contain; }
.champpool-nav { display: flex; justify-content: space-between; margin-top: 20px; }
.champpool-btn {
  padding: 10px 20px; border-radius: 10px; border: none; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.champpool-btn-primary { background: linear-gradient(135deg, #ff6b2b, #ff8f5e); color: #fff; }
.champpool-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,107,43,0.3); }
.champpool-btn-secondary { background: var(--bg-body); color: var(--text-secondary); border: 1px solid var(--border); }
.champpool-btn-secondary:hover { border-color: var(--orange-border); color: var(--text-primary); }
.champpool-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Champion tags for multi-select */
.champpool-champ-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; max-height: 280px; overflow-y: auto; }
.champpool-champ-option {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 6px; border-radius: 8px; border: 2px solid transparent;
  cursor: pointer; transition: all 0.15s; font-size: 11px; color: var(--text-secondary);
}
.champpool-champ-option:hover { background: var(--bg-body); }
.champpool-champ-option.selected { border-color: var(--orange); background: var(--orange-bg); color: var(--orange); font-weight: 600; }
.champpool-champ-option img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); }
.champpool-champ-option.selected img { border-color: var(--orange); }
.champpool-search-input {
  width: 100%; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-body); color: var(--text-primary); font-size: 13px; margin-bottom: 12px;
  font-family: 'Inter', sans-serif;
}
.champpool-search-input:focus { outline: none; border-color: var(--orange-border); }

/* Results */
.champpool-results { margin-top: 24px; }
.champpool-result-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; margin-bottom: 14px; position: relative; overflow: hidden;
}
.champpool-result-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #ff6b2b, #ff8f5e);
}
.champpool-result-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.champpool-result-icon { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--orange-border); overflow: hidden; }
.champpool-result-icon img { width: 100%; height: 100%; object-fit: cover; }
.champpool-result-name { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.champpool-result-role { font-size: 12px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.champpool-result-reason { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 8px; }
.champpool-result-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.champpool-result-tag {
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 99px;
  background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange-border);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.champpool-restart-btn {
  display: block; margin: 20px auto 0; padding: 10px 24px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.champpool-restart-btn:hover { border-color: var(--orange-border); color: var(--orange); }

/* Playstyle buttons */
.champpool-style-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.champpool-style-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 12px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--bg-body); cursor: pointer; transition: all 0.2s;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); text-align: center;
}
.champpool-style-btn:hover { border-color: var(--orange-border); color: var(--text-primary); }
.champpool-style-btn.selected { border-color: var(--orange); background: var(--orange-bg); color: var(--orange); }
.champpool-style-emoji { font-size: 28px; margin-bottom: 4px; }

/* ================================================================
   JOURNEY HUB — Dashboard coaching section
   ================================================================ */
.journey-hub {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 20px;
}

/* Next Action Card */
.journey-next-action {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, box-shadow 0.2s;
  animation: journey-slideIn 0.35s ease-out;
}
.journey-next-action:hover { border-color: var(--orange-border); box-shadow: 0 4px 20px rgba(255,107,43,0.08); }
.journey-onboarding { border-left: 4px solid var(--orange); }

.journey-action-icon {
  width: 46px; height: 46px; min-width: 46px;
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
}

.journey-action-content { flex: 1; min-width: 0; }
.journey-action-title {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 3px; line-height: 1.3;
}
.journey-action-message {
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}

.journey-action-buttons { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.journey-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 10px; border: none;
  color: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: filter 0.15s, transform 0.1s;
  font-family: 'Inter', sans-serif;
}
.journey-action-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.journey-action-btn:active { transform: translateY(0); }
.journey-action-btn svg { flex-shrink: 0; }

.journey-action-btn-secondary {
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}
.journey-action-btn-secondary:hover { border-color: var(--orange-border); color: var(--orange); }

/* Session Progress */
.journey-session {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px;
  box-shadow: var(--shadow-card);
  animation: journey-slideIn 0.4s ease-out;
}
.journey-session-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.journey-session-label {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.journey-session-count {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
}

.journey-session-bar {
  width: 100%; height: 6px; border-radius: 99px;
  background: var(--bg-body); overflow: hidden;
  margin-bottom: 10px;
}
.journey-session-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width 0.6s ease-out;
}

.journey-session-details {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.journey-game-dot {
  width: 26px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  border: 1px solid var(--border);
  transition: transform 0.15s;
}
.journey-game-dot:hover { transform: scale(1.12); }
.journey-game-dot.win {
  background: rgba(34,197,94,0.12); color: #22c55e; border-color: rgba(34,197,94,0.25);
}
.journey-game-dot.loss {
  background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.25);
}
.journey-game-dot.empty {
  background: var(--bg-body); color: var(--text-secondary); border-color: transparent;
  font-size: 16px;
}

/* Focus Spotlight */
.journey-focus {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px;
  box-shadow: var(--shadow-card);
  animation: journey-slideIn 0.45s ease-out;
}
.journey-focus-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.journey-focus-icon { font-size: 18px; }
.journey-focus-label {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.journey-focus-tip {
  font-size: 13px; color: var(--text-primary); line-height: 1.6;
  margin-bottom: 8px;
}
.journey-focus-practice {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--orange-bg); border: 1px solid var(--orange-border);
  border-radius: 8px; padding: 10px 14px;
  font-size: 12px; color: var(--orange); line-height: 1.5; font-weight: 500;
}
.journey-focus-practice-icon { font-size: 14px; margin-top: 1px; flex-shrink: 0; }

@keyframes journey-slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   POST-GAME COACHING MODAL
   ================================================================ */
.pgc-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2100;
  animation: pgc-fadeIn 0.2s ease-out;
}
.pgc-card {
  width: 520px; max-width: 94vw; max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  position: relative;
  animation: pgc-scaleIn 0.3s ease-out;
}
.pgc-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all 0.15s;
}
.pgc-close:hover { background: rgba(239,68,68,0.1); color: #ef4444; border-color: rgba(239,68,68,0.3); }

/* Verdict */
.pgc-verdict {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; margin-bottom: 22px; padding-top: 8px;
}
.pgc-verdict-emoji { font-size: 48px; line-height: 1; }
.pgc-verdict-text { font-size: 20px; font-weight: 800; }
.pgc-verdict-result {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; padding: 4px 14px; border-radius: 99px;
  margin-top: 4px;
}
.pgc-result-win { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
.pgc-result-loss { background: rgba(239,68,68,0.12); color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }

/* Stats Row */
.pgc-stats-row {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 18px;
}
.pgc-stat-badge {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 14px; border-radius: 10px;
  min-width: 80px; text-align: center;
}
.pgc-stat-hit {
  background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2);
}
.pgc-stat-miss {
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
}
.pgc-stat-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-secondary);
}
.pgc-stat-value {
  font-size: 18px; font-weight: 800; color: var(--text-primary);
}
.pgc-stat-hit .pgc-stat-value { color: #22c55e; }
.pgc-stat-miss .pgc-stat-value { color: #ef4444; }
.pgc-stat-target {
  font-size: 10px; color: var(--text-secondary);
}

/* Improvements */
.pgc-improvements { margin-bottom: 18px; }
.pgc-improvements-title {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 10px;
}
.pgc-improvement-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0; font-size: 13px; color: var(--text-secondary);
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.pgc-improvement-item:last-child { border-bottom: none; }
.pgc-improvement-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* Next Action */
.pgc-next-action { margin-top: 4px; }
.pgc-next-title {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.pgc-next-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-body); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.pgc-next-icon { font-size: 22px; flex-shrink: 0; }
.pgc-next-content { flex: 1; min-width: 0; }
.pgc-next-heading { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.pgc-next-message { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

@keyframes pgc-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pgc-scaleIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ================================================================
   PRE-GAME OBJECTIVE SECTION (Dashboard Home)
   ================================================================ */
.pregame-objective-section {
  margin-bottom: 20px;
}

.pregame-objective-card {
  background: var(--bg-card);
  border: 1.5px solid rgba(255, 107, 43, 0.2);
  border-radius: 16px;
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}

.pregame-objective-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff6b2b, #ff8f5a, #ff6b2b);
  opacity: 0.6;
}

.pregame-obj-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.pregame-obj-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 107, 43, 0.1), rgba(255, 143, 90, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.pregame-obj-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.pregame-obj-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 2px 0 0;
}

.pregame-obj-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.pregame-obj-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-body);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
  outline: none;
}

.pregame-obj-input:focus {
  border-color: rgba(255, 107, 43, 0.5);
}

.pregame-obj-input::placeholder {
  color: var(--text-dim);
  font-size: 12px;
}

.pregame-obj-save-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: #ff6b2b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.pregame-obj-save-btn:hover {
  background: #ff8f5a;
  transform: translateY(-1px);
}

.pregame-obj-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pregame-obj-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}

.pregame-obj-chip:hover {
  border-color: rgba(255, 107, 43, 0.4);
  color: #ff6b2b;
  background: rgba(255, 107, 43, 0.05);
}

.pregame-obj-active {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 107, 43, 0.06);
  border: 1px solid rgba(255, 107, 43, 0.2);
  border-radius: 10px;
  animation: pgObjSlideIn 0.3s ease;
}

@keyframes pgObjSlideIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.pregame-obj-active-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #ff6b2b;
  white-space: nowrap;
}

.pregame-obj-active-text {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.pregame-obj-clear-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.pregame-obj-clear-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

/* Multiple objectives list */
.pregame-obj-active-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Post-game objective card (for 1-2 objectives) */
.pgr-obj-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pgr-obj-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 107, 43, 0.03);
}

/* ================================================================
   POST-GAME REVIEW MODAL
   ================================================================ */
.pgr-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: pgr-fadeIn 0.3s ease;
}

.pgr-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 28px 32px;
  max-width: 560px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  animation: pgr-scaleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.pgr-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
}

.pgr-close:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

/* Header */
.pgr-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.pgr-champ-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid var(--border);
}

.pgr-header-info {
  flex: 1;
}

.pgr-result-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.pgr-result-badge.win {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.pgr-result-badge.loss {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.pgr-result-badge.unknown {
  background: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
  border: 1px solid rgba(156, 163, 175, 0.3);
}

.pgr-champ-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.pgr-duration {
  font-size: 11px;
  color: var(--text-dim);
}

.pgr-kda {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Objective section */
.pgr-objective-section {
  background: rgba(255, 107, 43, 0.04);
  border: 1.5px solid rgba(255, 107, 43, 0.2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

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

.pgr-obj-icon {
  font-size: 16px;
}

.pgr-obj-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #ff6b2b;
}

.pgr-obj-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.4;
}

.pgr-obj-result-btns {
  display: flex;
  gap: 8px;
}

.pgr-obj-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-body);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.pgr-obj-btn:hover {
  transform: translateY(-1px);
}

.pgr-obj-btn.pgr-obj-success:hover,
.pgr-obj-btn.pgr-obj-success.active {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
}

.pgr-obj-btn.pgr-obj-partial:hover,
.pgr-obj-btn.pgr-obj-partial.active {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}

.pgr-obj-btn.pgr-obj-fail:hover,
.pgr-obj-btn.pgr-obj-fail.active {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.pgr-obj-feedback {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.pgr-obj-feedback.success {
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.pgr-obj-feedback.partial {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.pgr-obj-feedback.fail {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Stats grid */
.pgr-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.pgr-stat-card {
  background: var(--bg-body);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.pgr-stat-card.hit {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.12);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.15), inset 0 0 20px rgba(34, 197, 94, 0.06);
}

.pgr-stat-card.hit .pgr-stat-value {
  color: #22c55e;
}

.pgr-stat-card.close {
  border-color: rgba(245, 158, 11, 0.6);
  background: rgba(245, 158, 11, 0.10);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.12), inset 0 0 20px rgba(245, 158, 11, 0.05);
}

.pgr-stat-card.close .pgr-stat-value {
  color: #f59e0b;
}

.pgr-stat-card.miss {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.10);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.12), inset 0 0 20px rgba(239, 68, 68, 0.05);
}

.pgr-stat-card.miss .pgr-stat-value {
  color: #ef4444;
}

.pgr-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.pgr-stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.pgr-stat-target {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Goals comparison */
.pgr-goals-section {
  margin-bottom: 18px;
}

.pgr-goals-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.pgr-goals-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pgr-goal-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  font-size: 12px;
  font-weight: 600;
}

.pgr-goal-badge.hit {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.10);
  color: #22c55e;
}

.pgr-goal-badge.close {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.10);
  color: #f59e0b;
}

.pgr-goal-badge.miss {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
}

.pgr-goal-badge .pgr-goal-icon {
  font-size: 14px;
}

/* Actions */
.pgr-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Auto-evaluated objectives */
.pgr-obj-evaluating {
  border-color: var(--border);
  opacity: 0.85;
}

.pgr-obj-auto-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  flex-wrap: wrap;
}

.pgr-obj-auto-success {
  background: rgba(34, 197, 94, 0.10);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.pgr-obj-auto-partial {
  background: rgba(245, 158, 11, 0.10);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.pgr-obj-auto-fail {
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.pgr-obj-auto-icon {
  font-size: 16px;
}

.pgr-obj-auto-label {
  font-weight: 700;
}

.pgr-obj-auto-reason {
  width: 100%;
  font-size: 11px;
  opacity: 0.8;
  font-weight: 500;
  margin-top: 2px;
}

.pgr-obj-spinner {
  animation: pgr-spin 1.2s linear infinite;
  display: inline-block;
}

@keyframes pgr-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.pgr-obj-card.pgr-obj-result-success {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.06);
}

.pgr-obj-card.pgr-obj-result-partial {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.06);
}

.pgr-obj-card.pgr-obj-result-fail {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.06);
}

/* Enriching spinner */
.pgr-enriching {
  animation: pgr-spin 1.2s linear infinite;
  display: inline-block;
  font-size: 16px;
}

/* Objective keep/change actions */
.pgr-obj-next-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.pgr-obj-next-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pgr-obj-keep-btn,
.pgr-obj-change-btn,
.pgr-obj-cancel-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-body);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.pgr-obj-keep-btn:hover {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
}

.pgr-obj-change-btn:hover {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
}

.pgr-obj-cancel-btn:hover {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.pgr-obj-next-confirmed {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}

.pgr-obj-next-kept {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.pgr-obj-next-changed {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.pgr-obj-next-cancelled {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.pgr-obj-next-changed strong {
  color: var(--text-primary);
}

.pgr-obj-change-form {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.pgr-obj-new-input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.pgr-obj-new-input:focus {
  border-color: #6366f1;
}

.pgr-obj-confirm-new,
.pgr-obj-cancel-new {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--bg-body);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.pgr-obj-confirm-new:hover {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
}

.pgr-obj-cancel-new:hover {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.pgr-save-btn {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  background: #ff6b2b;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(255, 107, 43, 0.25);
}

.pgr-save-btn:hover {
  background: #ff8f5a;
  transform: translateY(-1px);
}

.pgr-skip-btn {
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.pgr-skip-btn:hover {
  border-color: var(--text-secondary);
}

@keyframes pgr-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pgr-scaleIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════
   DATA PAGES — Tier Lists & Champion Stats
   ═══════════════════════════════════════════ */

.data-page-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 28px 60px;
  animation: pgr-scaleIn 0.3s ease;
}

.data-page-header {
  margin-bottom: 22px;
}

.data-page-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.data-page-header p {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

/* ── Filters ── */
.data-filters {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.data-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.data-filter-group > label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
}

.data-role-tabs {
  display: flex;
  gap: 4px;
}

.data-role-tab {
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-body);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.data-role-tab:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.data-role-tab.active {
  border-color: #ff6b2b;
  background: rgba(255, 107, 43, 0.10);
  color: #ff6b2b;
}

.role-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity 0.2s, filter 0.2s;
  filter: grayscale(30%);
}

.data-role-tab:hover .role-icon {
  opacity: 0.85;
}

.data-role-tab.active .role-icon {
  opacity: 1;
  filter: sepia(1) saturate(4) hue-rotate(340deg);
}

.data-select {
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  min-width: 130px;
}

.data-select:focus {
  border-color: #ff6b2b;
}

/* Enhanced rank dropdown */
.tl-rank-select {
  min-width: 170px;
  padding: 8px 36px 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.tl-rank-select:focus {
  border-color: #ff6b2b;
  box-shadow: 0 0 0 3px rgba(255,107,43,0.12);
}
.tl-rank-select:hover {
  border-color: var(--text-secondary);
}

.data-search {
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  min-width: 170px;
}

.data-search::placeholder {
  color: var(--text-dim);
}

.data-search:focus {
  border-color: #ff6b2b;
}

.data-patch-info {
  margin-left: auto;
}

.data-patch-info span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--bg-body);
  padding: 7px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  display: inline-block;
}

/* ── Loading ── */
.data-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
}

.data-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top: 3px solid #ff6b2b;
  border-radius: 50%;
  animation: pgr-spin 0.9s linear infinite;
}

/* ── Table ── */
.data-table-wrap {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead {
  background: var(--bg-body);
}

.data-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
}

.data-table thead th:hover {
  color: var(--text-secondary);
}

.data-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.15s;
  cursor: default;
}

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

.data-table tbody td {
  padding: 10px 14px;
  font-weight: 600;
  color: var(--text-secondary);
  vertical-align: middle;
}

.th-rank { width: 50px; text-align: center !important; }
.data-table tbody td:first-child { text-align: center; color: var(--text-dim); font-weight: 700; }

.th-tier { width: 70px; }
.th-wr, .th-pr, .th-br { width: 100px; }
.th-games { width: 90px; }

/* Champion cell */
.dt-champ-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dt-champ-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  object-fit: cover;
  flex-shrink: 0;
}

.dt-champ-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
}

/* Tier badge */
.dt-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
}

.dt-tier-op, .dt-tier-splus {
  background: rgba(255, 0, 68, 0.15);
  color: #ff2a5e;
  border: 1px solid rgba(255, 0, 68, 0.3);
}

.dt-tier-1, .dt-tier-s {
  background: rgba(255, 107, 43, 0.15);
  color: #ff6b2b;
  border: 1px solid rgba(255, 107, 43, 0.3);
}

.dt-tier-2, .dt-tier-a {
  background: rgba(34, 197, 94, 0.10);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.dt-tier-3, .dt-tier-b {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.dt-tier-4, .dt-tier-c {
  background: rgba(148, 163, 184, 0.10);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.dt-tier-5, .dt-tier-d {
  background: rgba(100, 116, 139, 0.10);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

/* Win rate coloring */
.dt-wr-high   { color: #22c55e !important; }
.dt-wr-ok     { color: #f59e0b !important; }
.dt-wr-low    { color: #ef4444 !important; }
.dt-wr-mid    { color: var(--text-secondary) !important; }

/* ── Champion Stats Detail Panel ── */
.cs-detail-panel {
  margin-top: 20px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  animation: pgr-scaleIn 0.2s ease;
}

.cs-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.cs-detail-header img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 2px solid var(--border);
}

.cs-detail-header .cs-detail-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.cs-detail-header .cs-detail-role {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-detail-header .cs-detail-stats {
  display: flex;
  gap: 14px;
  margin-left: auto;
}

.cs-detail-header .cs-mini-stat {
  text-align: center;
}

.cs-detail-header .cs-mini-stat-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

.cs-detail-header .cs-mini-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cs-detail-col h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.cs-matchup-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-matchup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  transition: all 0.15s;
}

.cs-matchup-row:hover {
  border-color: var(--text-dim);
}

.cs-matchup-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  object-fit: cover;
}

.cs-matchup-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.cs-matchup-wr {
  font-size: 12px;
  font-weight: 800;
}

.cs-matchup-games {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
}

.cs-detail-close {
  margin-top: 16px;
  padding: 8px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-body);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.cs-detail-close:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}

/* Champion Stats clickable rows */
#csTable tbody tr {
  cursor: pointer;
}

#csTable tbody tr:hover {
  background: rgba(255, 107, 43, 0.04);
}

#csTable tbody tr.cs-row-active {
  background: rgba(255, 107, 43, 0.08);
  border-left: 3px solid #ff6b2b;
}

/* Detail loading */
.cs-detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
}

/* ================================================================
   GROWTH SYSTEM — Post-Match, Challenges, Journal, Weekly, Mastery
================================================================ */

/* ── SHARED GROWTH PAGES ── */

.growth-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

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

.growth-header-icon {
  font-size: 32px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-bg);
  border-radius: var(--radius);
  border: 1px solid var(--orange-border);
}

.growth-header-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: var(--radius);
}

.growth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.growth-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 2px 0 0;
}

/* ── POST-MATCH PAGE ── */

/* Game selector */
.pm-game-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.pm-game-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pm-game-selector-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pm-game-fetch-status {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 5px;
}
.pm-game-fetch-status .pm-fetch-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: pm-spin 0.8s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }

.pm-game-list-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.pm-game-list-scroll::-webkit-scrollbar {
  height: 5px;
}
.pm-game-list-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.pm-game-list {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.pm-game-empty {
  padding: 16px 24px;
  color: var(--text-dim);
  font-size: 13px;
  white-space: nowrap;
}

/* Individual game card */
.pm-game-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  min-width: 180px;
}
.pm-game-card:hover {
  border-color: var(--orange-border);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pm-game-card.pm-game-active {
  border-color: var(--orange);
  background: var(--orange-bg);
  box-shadow: 0 0 0 2px rgba(255,107,43,0.15);
}
.pm-game-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.pm-game-card.pm-card-win .pm-game-card-icon { border-color: #22c55e; }
.pm-game-card.pm-card-loss .pm-game-card-icon { border-color: #ef4444; }
.pm-game-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pm-game-card-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pm-game-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.pm-game-card-result {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.pm-card-win .pm-game-card-result {
  background: rgba(34,197,94,0.1);
  color: #22c55e;
}
.pm-card-loss .pm-game-card-result {
  background: rgba(239,68,68,0.1);
  color: #ef4444;
}
.pm-game-card-bottom {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  gap: 6px;
}
.pm-game-card-kda {
  font-weight: 600;
  color: var(--text-secondary);
}
.pm-game-card-badge {
  font-size: 9px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--orange-bg);
  color: var(--orange);
  font-weight: 700;
  margin-left: 2px;
}
.pm-game-select {
  display: none; /* hide old select fallback */
  flex: 1;
  max-width: 600px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s;
}
.pm-game-select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-bg);
}

.pm-headline-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.pm-headline-banner[data-tone="excellent"] { border-left: 4px solid var(--green); background: var(--green-bg); }
.pm-headline-banner[data-tone="positive"] { border-left: 4px solid #3b82f6; background: rgba(59,130,246,0.06); }
.pm-headline-banner[data-tone="warning"] { border-left: 4px solid #f59e0b; background: rgba(245,158,11,0.06); }
.pm-headline-banner[data-tone="tilt"] { border-left: 4px solid var(--red); background: var(--red-bg); }
.pm-headline-banner[data-tone="neutral"] { border-left: 4px solid var(--orange); }

.pm-headline-emoji { font-size: 36px; }
.pm-headline-text h2 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; }
.pm-headline-text p { font-size: 13px; color: var(--text-secondary); margin: 3px 0 0; }
.pm-headline-percent {
  font-size: 28px;
  font-weight: 800;
  color: var(--orange);
}

.pm-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
}

/* Gauges */
.pm-body-scan {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

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

.pm-gauge-card {
  padding: 14px;
  background: var(--bg-input);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}

.pm-gauge-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.pm-gauge-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.pm-gauge-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* Gauge fill colors now driven by parent card's color class */
.pm-gauge-fill { background: var(--text-dim); }
.gauge-good .pm-gauge-fill { background: #22c55e; }
.gauge-warning .pm-gauge-fill { background: #f59e0b; }
.gauge-bad .pm-gauge-fill { background: #ef4444; }

.pm-gauge-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.pm-gauge-note {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}

/* Color-coded gauge cards */
.pm-gauge-card.gauge-good {
  border-left: 3px solid #22c55e;
  background: rgba(34,197,94,0.06);
}
.pm-gauge-card.gauge-good .pm-gauge-value { color: #22c55e; }

.pm-gauge-card.gauge-warning {
  border-left: 3px solid #f59e0b;
  background: rgba(245,158,11,0.06);
}
.pm-gauge-card.gauge-warning .pm-gauge-value { color: #f59e0b; }

.pm-gauge-card.gauge-bad {
  border-left: 3px solid #ef4444;
  background: rgba(239,68,68,0.06);
}
.pm-gauge-card.gauge-bad .pm-gauge-value { color: #ef4444; }

/* Objectives */
.pm-objectives {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.pm-objectives-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-obj-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-input);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}

.pm-obj-row.pm-obj-success { border-left: 3px solid var(--green); background: var(--green-bg); }
.pm-obj-row.pm-obj-fail { border-left: 3px solid var(--red); background: var(--red-bg); }

.pm-obj-icon { font-size: 18px; }
.pm-obj-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.pm-obj-value { font-size: 13px; font-weight: 700; }
.pm-obj-target { font-size: 11px; color: var(--text-dim); }
.pm-obj-placeholder { font-size: 13px; color: var(--text-dim); padding: 16px; text-align: center; }

/* Game Objectives AI Panel */
.pm-obj-ai-panel {
  margin-top: 16px;
  background: var(--bg-input);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border-light);
}
.pm-obj-ai-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 0;
}
.pm-obj-ai-result {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
}
.pm-obj-ai-result .obj-verdict {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 10px;
  border: 1px solid var(--border-light);
}
.pm-obj-ai-result .obj-verdict.obj-pass {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
}
.pm-obj-ai-result .obj-verdict.obj-fail {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
}
.pm-obj-ai-result .obj-verdict.obj-partial {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.25);
}
.pm-obj-ai-result .obj-verdict-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.pm-obj-ai-result .obj-verdict-body {
  flex: 1;
}
.pm-obj-ai-result .obj-verdict-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}
.pm-obj-ai-result .obj-verdict-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.pm-obj-ai-result .obj-verdict-tip {
  font-size: 11px;
  color: var(--orange);
  margin-top: 6px;
  font-style: italic;
}
.pm-obj-ai-summary {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(255, 107, 43, 0.06);
  border: 1px solid rgba(255, 107, 43, 0.2);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}
.pm-obj-ai-summary strong {
  color: var(--orange);
}

/* Check-in sublabel */
.jn-sublabel {
  font-size: 11px;
  color: var(--text-dim);
  margin: -2px 0 8px 0;
  line-height: 1.4;
}
.jn-obj-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

/* Tilt Analysis */
.pm-tilt-analysis {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.pm-tilt-chart { margin-bottom: 12px; }
.pm-tilt-chart canvas { width: 100%; height: auto; border-radius: var(--radius); background: var(--bg-input); }

.pm-tilt-episodes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Death detail panel for lucidity curve */
.pm-death-detail-panel {
  margin-top: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid #ef4444;
  border-radius: 10px;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}
.pm-death-detail-panel .death-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pm-death-detail-panel .death-detail-header h4 {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 700;
}
.pm-death-detail-panel .death-detail-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.pm-death-detail-panel .death-detail-close:hover {
  background: rgba(239,68,68,0.1);
  color: #ef4444;
}
.pm-death-detail-panel .death-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.pm-death-detail-panel .death-stat-card {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.pm-death-detail-panel .death-stat-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pm-death-detail-panel .death-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.pm-death-detail-panel .death-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.pm-death-detail-panel .death-replay-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}
.pm-death-detail-panel .death-replay-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pm-tilt-episode {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--red-bg);
  border-radius: 8px;
  border-left: 3px solid var(--red);
  font-size: 12px;
  color: var(--text-primary);
}

/* Recommendations */
.pm-recommendations {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.pm-recs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pm-rec-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--bg-input);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}

.pm-rec-icon { font-size: 24px; flex-shrink: 0; }
.pm-rec-content { flex: 1; }
.pm-rec-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.pm-rec-message { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.pm-rec-action {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
  padding: 6px 12px;
  background: var(--orange-bg);
  border-radius: 6px;
  display: inline-block;
}

/* Baseline */
.pm-baseline {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.pm-baseline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.pm-baseline-item {
  padding: 12px;
  background: var(--bg-input);
  border-radius: var(--radius);
  text-align: center;
}

.pm-baseline-label { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.pm-baseline-current { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.pm-baseline-avg { font-size: 11px; color: var(--text-secondary); }
.pm-baseline-diff { font-size: 12px; font-weight: 600; margin-top: 2px; }
.pm-baseline-diff.trend-up { color: var(--green); }
.pm-baseline-diff.trend-down { color: var(--red); }
.pm-baseline-diff.trend-stable { color: var(--text-dim); }

/* ── CHALLENGES PAGE ── */

.ch-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.ch-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ch-date, .ch-deadline {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--bg-input);
  padding: 2px 8px;
  border-radius: 4px;
}

.ch-challenges-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ch-challenge-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-input);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  transition: all 0.2s;
}

.ch-challenge-card:hover { border-color: var(--orange-border); }
.ch-challenge-card.ch-completed { border-left: 3px solid var(--green); background: var(--green-bg); }
.ch-challenge-card.ch-active { border-left: 3px solid var(--orange); }

.ch-icon { font-size: 24px; flex-shrink: 0; }
.ch-info { flex: 1; }
.ch-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ch-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.ch-category-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  display: inline-block;
}
.ch-cat-nutrition { background: rgba(76,175,80,0.1); color: #4CAF50; }
.ch-cat-cardio { background: rgba(33,150,243,0.1); color: #2196F3; }
.ch-cat-mental { background: rgba(156,39,176,0.1); color: #9C27B0; }
.ch-cat-combat { background: rgba(255,87,34,0.1); color: #FF5722; }

.ch-progress-box {
  text-align: center;
  min-width: 60px;
}
.ch-progress-value { font-size: 18px; font-weight: 800; color: var(--orange); }
.ch-progress-label { font-size: 10px; color: var(--text-dim); }

.ch-xp-badge {
  font-size: 11px;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  padding: 3px 8px;
  border-radius: 6px;
}

.ch-empty { font-size: 13px; color: var(--text-dim); text-align: center; padding: 20px; }

/* Streaks */
.ch-streaks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.ch-streak-card {
  text-align: center;
  padding: 16px 12px;
  background: var(--bg-input);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}

.ch-streak-icon { font-size: 24px; margin-bottom: 6px; }
.ch-streak-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
}
.ch-streak-label { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* Challenge history */
.ch-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ch-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-input);
  border-radius: 8px;
  font-size: 13px;
}

.ch-history-date { font-weight: 600; color: var(--text-primary); min-width: 85px; }
.ch-history-score { font-weight: 700; color: var(--orange); }

/* ── JOURNAL PAGE ── */

.jn-checkin-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.jn-checkin-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 18px;
}

.jn-field {
  margin-bottom: 18px;
}

.jn-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: block;
}

.jn-mood-options, .jn-energy-options, .jn-focus-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jn-mood-btn, .jn-energy-btn, .jn-focus-btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.jn-mood-btn:hover, .jn-energy-btn:hover, .jn-focus-btn:hover {
  border-color: var(--orange-border);
  background: var(--orange-bg);
}

.jn-mood-btn.selected, .jn-energy-btn.selected, .jn-focus-btn.selected {
  border-color: var(--orange);
  background: var(--orange-bg);
  color: var(--orange);
  font-weight: 700;
}

.jn-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jn-tag-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.jn-tag-btn:hover { border-color: var(--orange-border); }
.jn-tag-btn.selected {
  border-color: var(--orange);
  background: var(--orange-bg);
  color: var(--orange);
  font-weight: 600;
}

.jn-stars {
  display: flex;
  gap: 6px;
}

.jn-star-btn {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.15s;
}

.jn-star-btn.active { opacity: 1; }
.jn-star-btn:hover { opacity: 0.8; }

.jn-textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  font-size: 13px;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  resize: vertical;
  box-sizing: border-box;
}

.jn-textarea:focus {
  border-color: var(--orange);
  outline: none;
  box-shadow: 0 0 0 3px var(--orange-bg);
}

.jn-submit-btn {
  margin-top: 8px;
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
}

/* Insights */
.jn-insights-section, .jn-history-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.jn-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 14px;
}

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

.jn-insight-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--bg-input);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}

.jn-insight-card.severity-high { border-left: 3px solid var(--red); }
.jn-insight-card.severity-medium { border-left: 3px solid #f59e0b; }
.jn-insight-card.severity-positive { border-left: 3px solid var(--green); }

.jn-insight-icon { font-size: 24px; flex-shrink: 0; }
.jn-insight-body { flex: 1; min-width: 0; }
.jn-insight-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.jn-insight-message, .jn-insight-msg { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
.jn-insight-rec {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
  background: var(--orange-bg);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}

.jn-insight-placeholder, .jn-history-placeholder {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  padding: 20px;
}

/* Journal history entries */
.jn-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.jn-history-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-input);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}

.jn-hist-date { font-size: 12px; font-weight: 600; color: var(--text-primary); min-width: 85px; }
.jn-hist-mood { font-size: 20px; }
.jn-hist-stats { font-size: 12px; color: var(--text-secondary); flex: 1; }
.jn-hist-discipline { font-size: 14px; font-weight: 700; color: var(--orange); }
.jn-hist-lesson { font-size: 11px; color: var(--text-dim); font-style: italic; }

/* ── WEEKLY WRAPPED — STORY SYSTEM ── */

/* Week picker screen */
.wrapped-picker {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  max-width: 520px;
  margin: 0 auto;
}
.wrapped-picker-header {
  display: flex; align-items: center; gap: 16px;
}
.wrapped-week-nav {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 14px; background: var(--bg-card); border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.wrapped-week-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-input); border: 1px solid var(--border);
  font-size: 20px; font-weight: 700; color: var(--text-primary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.wrapped-week-arrow:hover { background: var(--orange-bg); color: var(--orange); border-color: var(--orange-border); }
.wrapped-week-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.wrapped-week-label {
  font-size: 15px; font-weight: 700; color: var(--text-primary); min-width: 200px; text-align: center;
}
.wrapped-launch-btn { align-self: center; padding: 14px 48px; font-size: 16px; font-weight: 800; border-radius: 50px; }
.wrapped-past-list {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
}
.wrapped-past-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--bg-card); border-radius: var(--radius);
  border: 1px solid var(--border); cursor: pointer; transition: all 0.2s;
}
.wrapped-past-item:hover { border-color: var(--orange-border); background: var(--orange-bg); }

/* Fullscreen story container */
.wrapped-story-container {
  position: fixed; inset: 0; z-index: 10000;
  background: #0a0a0f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; user-select: none;
}

/* Progress segments at top */
.wrapped-progress-bar {
  position: absolute; top: 12px; left: 16px; right: 16px;
  display: flex; gap: 4px; z-index: 10002; height: 3px;
}
.wrapped-progress-seg {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.2); overflow: hidden; position: relative;
}
.wrapped-progress-seg.done { background: rgba(255,255,255,0.85); }
.wrapped-progress-seg.active .wrapped-progress-fill {
  height: 100%; background: #fff; border-radius: 2px;
  animation: wrProgressFill var(--slide-duration, 6s) linear forwards;
}
@keyframes wrProgressFill { from { width: 0; } to { width: 100%; } }

/* Close / share buttons */
.wrapped-close-btn {
  position: absolute; top: 24px; right: 20px; z-index: 10003;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: none;
  color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.wrapped-close-btn:hover { background: rgba(255,255,255,0.25); }
.wrapped-share-btn {
  position: absolute; bottom: 30px; right: 24px; z-index: 10003;
  padding: 10px 22px; border-radius: 50px;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(10px); transition: all 0.2s;
}
.wrapped-share-btn:hover { background: rgba(255,255,255,0.25); }

/* Tap zones */
.wrapped-tap-left, .wrapped-tap-right {
  position: absolute; top: 0; bottom: 0; z-index: 10001; cursor: pointer;
}
.wrapped-tap-left { left: 0; width: 30%; }
.wrapped-tap-right { right: 0; width: 70%; }

/* Slide counter */
.wrapped-slide-counter {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 10003;
  font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 600;
}

/* Slides wrapper */
.wrapped-slides {
  position: relative; width: 100%; height: 100%;
}

/* Individual slide */
.wrapped-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 40px 80px;
  opacity: 0; transform: scale(0.92);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.wrapped-slide.active {
  opacity: 1; transform: scale(1); pointer-events: auto;
}
.wrapped-slide.exit-left {
  opacity: 0; transform: translateX(-60px) scale(0.95);
}
.wrapped-slide.exit-right {
  opacity: 0; transform: translateX(60px) scale(0.95);
}

/* Slide backgrounds — gradient themes */
.wrapped-slide[data-theme="intro"]    { background: linear-gradient(160deg, #0f0c29, #302b63, #24243e); }
.wrapped-slide[data-theme="stats"]    { background: linear-gradient(160deg, #0a0a2e, #1a1a4e, #2d1b69); }
.wrapped-slide[data-theme="winrate"]  { background: linear-gradient(160deg, #0d2818, #1a4731, #0f5132); }
.wrapped-slide[data-theme="winrate-bad"] { background: linear-gradient(160deg, #2d0f0f, #4a1a1a, #3d1515); }
.wrapped-slide[data-theme="cs"]       { background: linear-gradient(160deg, #1a1006, #3d2a0a, #5c3d0c); }
.wrapped-slide[data-theme="champs"]   { background: linear-gradient(160deg, #1a0a2e, #2d1569, #1a1a4e); }
.wrapped-slide[data-theme="trends"]   { background: linear-gradient(160deg, #0a1628, #152d50, #0c3d5c); }
.wrapped-slide[data-theme="goals"]    { background: linear-gradient(160deg, #1a0626, #3d0a4a, #2d1569); }
.wrapped-slide[data-theme="mental"]   { background: linear-gradient(160deg, #0a2828, #0d4a4a, #064040); }
.wrapped-slide[data-theme="chall"]    { background: linear-gradient(160deg, #2a1a06, #5c3d0c, #8b5e14); }
.wrapped-slide[data-theme="summary"]  { background: linear-gradient(160deg, #0f0c29, #302b63, #ff6b2b30); }

/* Content elements inside slides */
.ws-emoji { font-size: 64px; margin-bottom: 20px; animation: wsBounceIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.ws-title {
  font-size: 32px; font-weight: 800; color: #fff; text-align: center;
  line-height: 1.2; margin-bottom: 12px;
  animation: wsFadeUp 0.6s 0.2s cubic-bezier(0.4,0,0.2,1) both;
}
.ws-subtitle {
  font-size: 16px; color: rgba(255,255,255,0.7); text-align: center;
  line-height: 1.5; max-width: 380px;
  animation: wsFadeUp 0.6s 0.35s cubic-bezier(0.4,0,0.2,1) both;
}
.ws-big-number {
  font-size: 80px; font-weight: 900; color: #fff; text-align: center;
  line-height: 1; margin: 16px 0;
  animation: wsCountPop 0.8s 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
.ws-big-number .ws-unit { font-size: 32px; font-weight: 600; opacity: 0.7; }
.ws-label {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px;
  animation: wsFadeUp 0.5s 0.1s both;
}
.ws-divider {
  width: 60px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.2);
  margin: 16px 0;
  animation: wsGrow 0.5s 0.4s both;
}

/* Stat row inside slides */
.ws-stat-row {
  display: flex; align-items: center; gap: 16px; width: 100%; max-width: 340px;
  padding: 14px 18px; border-radius: 14px; margin: 5px 0;
  background: rgba(255,255,255,0.06); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  animation: wsSlideIn 0.5s cubic-bezier(0.4,0,0.2,1) both;
}
.ws-stat-row:nth-child(2) { animation-delay: 0.1s; }
.ws-stat-row:nth-child(3) { animation-delay: 0.2s; }
.ws-stat-row:nth-child(4) { animation-delay: 0.3s; }
.ws-stat-row:nth-child(5) { animation-delay: 0.4s; }
.ws-stat-row:nth-child(6) { animation-delay: 0.5s; }
.ws-stat-row .ws-stat-icon { font-size: 24px; }
.ws-stat-row .ws-stat-info { flex: 1; }
.ws-stat-row .ws-stat-name { font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.ws-stat-row .ws-stat-val { font-size: 22px; font-weight: 800; color: #fff; }

/* Champion list in slide */
.ws-champ-item {
  display: flex; align-items: center; gap: 14px; width: 100%; max-width: 340px;
  padding: 12px 16px; border-radius: 14px; margin: 4px 0;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  animation: wsSlideIn 0.5s cubic-bezier(0.4,0,0.2,1) both;
}
.ws-champ-item:nth-child(2) { animation-delay: 0.15s; }
.ws-champ-item:nth-child(3) { animation-delay: 0.3s; }
.ws-champ-item:nth-child(4) { animation-delay: 0.45s; }
.ws-champ-img {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
  border: 2px solid rgba(255,255,255,0.15);
}
.ws-champ-name { font-size: 15px; font-weight: 700; color: #fff; }
.ws-champ-detail { font-size: 12px; color: rgba(255,255,255,0.5); }
.ws-champ-wr { font-size: 16px; font-weight: 800; margin-left: auto; }

/* Goal mini-bar */
.ws-goal-item {
  width: 100%; max-width: 340px; padding: 12px 16px; border-radius: 14px; margin: 4px 0;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  animation: wsSlideIn 0.5s cubic-bezier(0.4,0,0.2,1) both;
}
.ws-goal-item:nth-child(2) { animation-delay: 0.1s; }
.ws-goal-item:nth-child(3) { animation-delay: 0.2s; }
.ws-goal-item:nth-child(4) { animation-delay: 0.25s; }
.ws-goal-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.ws-goal-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }
.ws-goal-pct { font-size: 13px; font-weight: 800; color: #fff; }
.ws-goal-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
.ws-goal-fill {
  height: 100%; border-radius: 3px; transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}

/* Trend arrow animated */
.ws-trend-arrow {
  display: inline-block; font-size: 28px; margin-right: 8px;
  animation: wsTrendBounce 0.6s 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.ws-trend-val { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 4px; }

/* Share modal overlay */
.wrapped-share-modal {
  position: fixed; inset: 0; z-index: 10010;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.wrapped-share-card {
  background: #1a1a2e; border-radius: 20px; padding: 28px; width: 380px;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.wrapped-share-card h3 { color: #fff; font-size: 18px; font-weight: 700; }
.wrapped-share-preview {
  width: 100%; border-radius: 12px; overflow: hidden;
  background: #0a0a1e; aspect-ratio: 9/16; max-height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.wrapped-share-preview canvas { width: 100%; height: 100%; object-fit: contain; }
.wrapped-share-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wrapped-share-actions button {
  padding: 10px 20px; border-radius: 50px; font-size: 13px; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.ws-btn-twitter { background: #1da1f2; color: #fff; }
.ws-btn-reddit { background: #ff4500; color: #fff; }
.ws-btn-copy { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2) !important; }
.ws-btn-download { background: var(--orange); color: #fff; }
.ws-btn-close-share { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.wrapped-share-actions button:hover { filter: brightness(1.15); transform: scale(1.04); }

/* Branding watermark */
.ws-watermark {
  position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: rgba(255,255,255,0.2); font-weight: 600; letter-spacing: 1px;
}

/* ── KEYFRAMES ── */
@keyframes wsBounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  60% { opacity: 1; transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes wsFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wsCountPop {
  0% { opacity: 0; transform: scale(0.5); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes wsSlideIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes wsGrow {
  from { width: 0; }
  to { width: 60px; }
}
@keyframes wsTrendBounce {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes wsShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── MASTERY PAGE ── */

.ms-level-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: linear-gradient(135deg, var(--orange-bg), rgba(245,158,11,0.08));
  border-radius: var(--radius-lg);
  border: 1px solid var(--orange-border);
  box-shadow: var(--shadow-md);
}

.ms-level-badge {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-white);
  background: linear-gradient(135deg, var(--orange), #f59e0b);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(255,107,43,0.3);
}

.ms-level-info { flex: 1; }
.ms-level-title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin: 0; }
.ms-level-desc { font-size: 13px; color: var(--text-secondary); margin: 2px 0 12px; }

.ms-level-xp-bar {
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
}

.ms-level-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), #f59e0b);
  border-radius: 5px;
  transition: width 0.6s ease;
}

.ms-level-xp-text {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.ms-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.ms-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 14px;
}

/* Skill tree */
.ms-skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ms-skill-card {
  text-align: center;
  padding: 20px 14px;
  background: var(--bg-input);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  transition: all 0.2s;
}

.ms-skill-card:hover { border-color: var(--orange-border); box-shadow: var(--shadow-sm); }

.ms-skill-icon { font-size: 32px; margin-bottom: 8px; }
.ms-skill-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ms-skill-level { font-size: 13px; font-weight: 600; color: var(--orange); margin-top: 4px; }

.ms-skill-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
}

.ms-skill-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Badges */
.ms-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.ms-badge-card {
  text-align: center;
  padding: 14px;
  background: var(--bg-input);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}

.ms-badge-card.ms-badge-earned {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.06);
}

.ms-badge-card.ms-badge-locked {
  opacity: 0.4;
}

.ms-badge-icon { font-size: 28px; margin-bottom: 6px; }
.ms-badge-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.ms-badge-condition { font-size: 10px; color: var(--text-dim); margin-top: 3px; }

.ms-badge-placeholder {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  padding: 20px;
  grid-column: 1 / -1;
}

/* XP History */
.ms-xp-history {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ms-xp-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-input);
  border-radius: 6px;
  font-size: 12px;
}

.ms-xp-date { color: var(--text-dim); min-width: 80px; }
.ms-xp-challenge { color: var(--text-primary); font-weight: 600; flex: 1; }
.ms-xp-amount { color: #f59e0b; font-weight: 700; }
.ms-xp-empty { font-size: 13px; color: var(--text-dim); text-align: center; padding: 20px; }

/* ── SIDEBAR GROWTH DROPDOWN ── */
#sidebarGrowth .sidebar-submenu { display: none; }
#sidebarGrowth.open .sidebar-submenu { display: flex; flex-direction: column; }
#sidebarGrowth.open .dropdown-arrow { transform: rotate(180deg); }

/* ── SIDEBAR PROFILE DROPDOWN ── */
#sidebarProfileDropdown .sidebar-submenu { display: none; }
#sidebarProfileDropdown.active .sidebar-submenu { display: flex; flex-direction: column; }
#sidebarProfileDropdown.active .dropdown-arrow { transform: rotate(180deg); }

/* ══════ DASHBOARD JOURNAL SECTION ══════ */
.dash-journal-section {
  margin-top: 20px;
}
.dash-journal-section .jn-checkin-card {
  padding: 20px;
}
.dash-journal-section .jn-insights-section {
  margin-top: 12px;
}

/* ══════ DAY OBJECTIVE SECTION ══════ */
.dash-day-objective-section {
  margin-top: 20px;
}
.day-obj-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 20px 24px;
}
.day-obj-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.day-obj-icon {
  font-size: 1.5rem;
}
.day-obj-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #1e293b);
  margin: 0;
}
.day-obj-subtitle {
  font-size: 0.82rem;
  color: var(--text-dim, #94a3b8);
  margin: 2px 0 0;
}
.day-obj-body {}
.day-obj-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.day-obj-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  font-size: 0.92rem;
  background: var(--input-bg, #f8fafc);
  color: var(--text, #1e293b);
  outline: none;
  transition: border-color 0.2s;
}
.day-obj-input:focus {
  border-color: var(--orange, #ff6b2b);
}
.day-obj-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.day-obj-save-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: var(--orange, #ff6b2b);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.day-obj-save-btn:hover { opacity: 0.85; }
.day-obj-active {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(255, 107, 43, 0.08);
  border: 1px solid rgba(255, 107, 43, 0.2);
  border-radius: 10px;
}
.day-obj-active-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange, #ff6b2b);
  flex-shrink: 0;
}
.day-obj-active-text {
  flex: 1;
  font-size: 0.92rem;
  color: var(--text, #1e293b);
}
.day-obj-clear-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.day-obj-clear-btn:hover { background: rgba(239, 68, 68, 0.2); }
.day-obj-history {
  margin-top: 14px;
}
.day-obj-history-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim, #94a3b8);
  margin-bottom: 8px;
}
.day-obj-history-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.day-obj-history-item:last-child { border-bottom: none; }
.day-obj-history-date {
  font-size: 0.78rem;
  color: var(--text-dim, #94a3b8);
  flex-shrink: 0;
  min-width: 90px;
}
.day-obj-history-text {
  font-size: 0.88rem;
  color: var(--text, #1e293b);
}

/* ================================================================
   GAME LOG TABLE — Enhanced with queue filter
================================================================ */
.game-log-table table {
  width: 100%;
  border-collapse: collapse;
}
.game-log-table th {
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  padding: 8px 6px;
  border-bottom: 2px solid var(--border);
  text-align: left;
}
.game-log-table td {
  padding: 8px 6px;
}
.game-log-table tr:hover {
  background: var(--bg-card-hover);
}
.game-log-queue-filter-btn {
  transition: all 0.2s;
}
.game-log-queue-filter-btn:hover {
  border-color: var(--orange-border) !important;
  color: var(--orange) !important;
}

/* ================================================================
   CHALLENGE CARDS
================================================================ */
.ch-card {
  transition: transform 0.15s, box-shadow 0.15s;
}
.ch-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.ch-challenges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ================================================================
   OVERLAY SETTINGS TOGGLE (for settings page)
================================================================ */
#overlaySettingsList .overlay-toggle-switch input:checked + .overlay-toggle-slider {
  background: var(--orange) !important;
}
#overlaySettingsList .overlay-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}
#overlaySettingsList input:checked + .overlay-toggle-slider::before {
  transform: translateX(20px);
}

/* ================================================================
   ANIMATIONS — Challenges & Mastery gamification
   ================================================================ */

/* ── Card entrance stagger ── */
@keyframes ch-card-in {
  0% { opacity: 0; transform: translateY(18px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.ch-card-animated {
  animation: ch-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Completion glow pulse ── */
@keyframes ch-complete-glow {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50%  { box-shadow: 0 0 20px 6px rgba(34,197,94,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.ch-card-completed {
  border-color: #22c55e !important;
  animation: ch-complete-glow 1.5s ease-out;
}
.ch-card-completed .ch-completion-badge {
  animation: ch-badge-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 0.3s;
}

/* ── Badge/Icon pop ── */
@keyframes ch-badge-pop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── Progress bar fill with shine ── */
@keyframes ch-progress-shine {
  0%   { left: -40%; }
  100% { left: 120%; }
}
.ch-progress-bar-fill {
  position: relative;
  overflow: hidden;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ch-progress-bar-fill.ch-progressing::after {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: ch-progress-shine 1.2s ease-in-out 0.4s;
}

/* ── Floating XP number ── */
@keyframes xp-float-up {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(-30px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-55px) scale(0.9); }
}
.xp-float {
  position: absolute;
  font-size: 16px;
  font-weight: 800;
  color: #22c55e;
  pointer-events: none;
  z-index: 100;
  text-shadow: 0 1px 6px rgba(34,197,94,0.4);
  animation: xp-float-up 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Streak fire pulse ── */
@keyframes streak-fire {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.2); filter: brightness(1.3); }
}
.ch-streak-value.streak-active {
  color: #ff6b2b;
  animation: streak-fire 1.5s ease-in-out infinite;
}
.ch-streak-icon.streak-active {
  animation: streak-fire 2s ease-in-out infinite 0.3s;
}

/* ── Streak counter bump ── */
@keyframes streak-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.ch-streak-value.streak-bumped {
  animation: streak-bump 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ── Level-up flash ── */
@keyframes ms-levelup-flash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}
.ms-levelup-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,165,0,0.25) 0%, transparent 70%);
  border-radius: inherit;
  pointer-events: none;
  animation: ms-levelup-flash 1.8s ease-out forwards;
}

/* ── Level badge glow ── */
@keyframes ms-badge-glow {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,43,0.6); transform: scale(1); }
  50%  { box-shadow: 0 0 25px 8px rgba(255,107,43,0.3); transform: scale(1.12); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,43,0); transform: scale(1); }
}
.ms-level-badge.ms-leveled-up {
  animation: ms-badge-glow 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── XP bar pulse ── */
@keyframes ms-xp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,43,0.5); }
  50%  { box-shadow: 0 0 12px 3px rgba(255,107,43,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,43,0); }
}
.ms-level-xp-bar.xp-pulsing {
  animation: ms-xp-pulse 1s ease-out;
}

/* ── Skill card level up ── */
@keyframes ms-skill-levelup {
  0%   { border-color: var(--border); }
  30%  { border-color: #ff6b2b; box-shadow: 0 0 15px rgba(255,107,43,0.3); }
  100% { border-color: var(--border); box-shadow: none; }
}
.ms-skill-card.ms-skill-leveled {
  animation: ms-skill-levelup 1.2s ease-out;
}

/* ── Badge unlock ── */
@keyframes ms-badge-unlock {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  50%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
  80%  { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.ms-badge-just-unlocked {
  animation: ms-badge-unlock 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  border-color: #ff6b2b !important;
  box-shadow: 0 0 16px rgba(255,107,43,0.3);
}

/* ── Toast notifications ── */
@keyframes toast-in {
  0%   { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  0%   { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}
.rankora-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.rankora-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  min-width: 280px;
  max-width: 380px;
  animation: toast-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  backdrop-filter: blur(12px);
}
.rankora-toast.toast-exit {
  animation: toast-out 0.3s ease-in forwards;
}
.rankora-toast-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.rankora-toast-body {
  flex: 1;
}
.rankora-toast-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}
.rankora-toast-desc {
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  margin-top: 2px;
}
.rankora-toast.toast-challenge {
  border-left: 3px solid #22c55e;
}
.rankora-toast.toast-xp {
  border-left: 3px solid #ff6b2b;
}
.rankora-toast.toast-levelup {
  border-left: 3px solid #fbbf24;
  background: linear-gradient(135deg, var(--bg-card, #1e1e2e), rgba(251,191,36,0.08));
}
.rankora-toast.toast-badge {
  border-left: 3px solid #a855f7;
}
.rankora-toast.toast-streak {
  border-left: 3px solid #f97316;
}

/* ── Confetti canvas ── */
.confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
}

/* ================================================================
   RANK-UP ANIMATION OVERLAY
================================================================ */
.rank-up-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.rank-up-overlay.rank-up-visible {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  opacity: 1;
  pointer-events: auto;
}
.rank-up-overlay.rank-up-objective.rank-up-visible {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
}
.rank-up-overlay.rank-up-fade-out {
  opacity: 0;
  backdrop-filter: blur(0px);
  pointer-events: none;
}

.rank-up-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 64px;
  border-radius: 24px;
  background: linear-gradient(145deg, #ffffff, #fff7f2);
  border: 2px solid rgba(255, 107, 53, 0.35);
  box-shadow:
    0 0 60px rgba(255, 107, 53, 0.12),
    0 0 120px rgba(255, 107, 53, 0.04),
    0 25px 50px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
  transform: scale(0.5) translateY(40px);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.rank-up-visible .rank-up-content {
  transform: scale(1) translateY(0);
}
.rank-up-content-objective {
  border-color: rgba(255, 107, 53, 0.6) !important;
  background: linear-gradient(145deg, #ffffff, #fff4ec) !important;
  box-shadow:
    0 0 80px rgba(255, 107, 53, 0.18),
    0 0 160px rgba(255, 140, 66, 0.08),
    0 0 40px rgba(255, 107, 53, 0.12),
    0 25px 50px rgba(0, 0, 0, 0.12) !important;
}

/* Glow effect behind icon */
.rank-up-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.15) 0%, transparent 70%);
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: rank-up-pulse 2s ease-in-out infinite;
}
.rank-up-glow-objective {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.25) 0%, rgba(255, 140, 66, 0.1) 40%, transparent 70%);
  animation: rank-up-pulse-festive 1.5s ease-in-out infinite;
}

.rank-up-icon {
  position: relative;
  z-index: 2;
  animation: rank-up-bounce 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.rank-up-icon img {
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.35));
}
.rank-up-icon-objective img {
  width: 130px;
  height: 130px;
  filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.45)) drop-shadow(0 0 60px rgba(255, 140, 66, 0.2));
  animation: rank-up-icon-spin 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.rank-up-title {
  font-family: 'Rajdhani', 'Exo 2', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ff6b35;
  text-shadow: 0 0 20px rgba(255, 107, 53, 0.2);
  animation: rank-up-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
  position: relative;
  z-index: 2;
}
.rank-up-title-objective {
  font-size: 34px;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #ff6b35, #ff8c42, #ff6b35);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rank-up-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both,
             rank-up-gradient 3s linear infinite;
  text-shadow: none;
}

.rank-up-subtitle {
  font-size: 16px;
  color: #555;
  text-align: center;
  line-height: 1.5;
  animation: rank-up-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
  position: relative;
  z-index: 2;
}
.rank-up-subtitle strong {
  color: #1a1a2e;
  font-weight: 700;
}

.rank-up-sparkles {
  display: flex;
  gap: 16px;
  font-size: 24px;
  animation: rank-up-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}
.rank-up-sparkles span {
  animation: rank-up-twinkle 1.5s ease-in-out infinite;
}
.rank-up-sparkles span:nth-child(2) { animation-delay: 0.3s; }
.rank-up-sparkles span:nth-child(3) { animation-delay: 0.6s; }

.rank-up-fireworks {
  display: flex;
  gap: 12px;
  font-size: 30px;
  animation: rank-up-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}
.rank-up-fireworks span {
  animation: rank-up-firework-pop 2s ease-in-out infinite;
}
.rank-up-fireworks span:nth-child(1) { animation-delay: 0s; }
.rank-up-fireworks span:nth-child(2) { animation-delay: 0.4s; }
.rank-up-fireworks span:nth-child(3) { animation-delay: 0.8s; }
.rank-up-fireworks span:nth-child(4) { animation-delay: 1.2s; }
.rank-up-fireworks span:nth-child(5) { animation-delay: 1.6s; }

.rank-up-btn {
  margin-top: 8px;
  padding: 10px 32px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #ff6b35, #ff8c42);
  color: #fff;
  letter-spacing: 1px;
  transition: all 0.3s;
  animation: rank-up-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
  position: relative;
  z-index: 2;
}
.rank-up-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}
.rank-up-btn-objective {
  padding: 12px 40px;
  font-size: 17px;
  background: linear-gradient(135deg, #ff6b35, #ff4500);
  box-shadow: 0 0 30px rgba(255, 107, 53, 0.25);
}
.rank-up-btn-objective:hover {
  box-shadow: 0 8px 30px rgba(255, 107, 53, 0.5) !important;
}

/* "Set New Objective" secondary button */
.rank-up-btn-new-objective {
  margin-top: 8px;
  padding: 10px 32px;
  border: 2px solid #ff6b35;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #ff6b35;
  letter-spacing: 0.5px;
  transition: all 0.3s;
  animation: rank-up-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
  position: relative;
  z-index: 2;
}
.rank-up-btn-new-objective:hover {
  background: rgba(255, 107, 53, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.2);
}

/* Confetti pieces (objective reached) */
.rank-up-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.confetti-piece {
  position: absolute;
  top: -10px;
  opacity: 0;
  animation: confetti-fall linear forwards;
}

/* ── Keyframes ── */
@keyframes rank-up-pulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
}
@keyframes rank-up-pulse-festive {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.25); }
}
@keyframes rank-up-bounce {
  0% { opacity: 0; transform: scale(0.3) translateY(30px); }
  60% { transform: scale(1.15) translateY(-10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes rank-up-slide-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes rank-up-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
@keyframes rank-up-firework-pop {
  0%, 100% { opacity: 1; transform: scale(1) translateY(0); }
  25% { transform: scale(1.4) translateY(-10px); }
  50% { opacity: 0.6; transform: scale(0.9) translateY(0); }
  75% { transform: scale(1.2) translateY(-5px); }
}
@keyframes rank-up-icon-spin {
  0% { transform: rotateY(0deg) scale(0.5); opacity: 0; }
  50% { transform: rotateY(180deg) scale(1.2); }
  100% { transform: rotateY(360deg) scale(1); opacity: 1; }
}
@keyframes rank-up-gradient {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes confetti-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(500px) rotate(720deg); }
}

/* ================================================================
   2D REPLAY VIEWER — Full-page layout
   ================================================================ */

/* ── The replay page itself needs special full-viewport treatment ── */
#replayViewerPage {
  padding-left: 0 !important;
  position: fixed !important;
  inset: 0;
  z-index: 100;
  background: var(--bg-body);
}

/* ── Full-page layout ── */
.rv-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  width: 100%;
  background: var(--bg-body);
  overflow: hidden;
}

/* ── HEADER ── */
.rv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  gap: 16px;
  z-index: 10;
}
.rv-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rv-back-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.rv-back-btn:hover {
  background: var(--bg-body);
  color: var(--text-primary);
}
.rv-game-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rv-game-icon img {
  display: block;
}
.rv-game-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.rv-game-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}
.rv-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rv-vision-filters {
  display: flex;
  gap: 4px;
  background: var(--bg-body);
  border-radius: 10px;
  padding: 3px;
}
.rv-filter-btn {
  padding: 5px 12px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.rv-filter-btn:hover {
  background: rgba(0,0,0,0.04);
}
.rv-filter-active {
  background: #fff !important;
  color: var(--orange);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ── BODY: MAP + SIDEBAR ── */
.rv-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

/* ── MAP AREA ── */
.rv-map-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 12px;
  overflow: hidden;
  background: var(--bg-body);
}
.rv-map-wrapper {
  position: relative;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  overflow: hidden;
}
.rv-map-wrapper canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.rv-map-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 600;
  z-index: 2;
  transition: opacity 0.4s ease;
}
.rv-map-placeholder-icon {
  font-size: 36px;
}

/* ── SCOREBOARD ── */
.rv-scoreboard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 660px;
}
.rv-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rv-team-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rv-team-blue .rv-team-label { color: #3b82f6; }
.rv-team-red .rv-team-label { color: #ef4444; text-align: right; }
.rv-team-champs {
  display: flex;
  gap: 4px;
}
.rv-team-red .rv-team-champs {
  justify-content: flex-end;
}
.rv-champ-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
  transition: transform 0.15s;
}
.rv-champ-icon:hover {
  transform: scale(1.15);
  z-index: 1;
}
.rv-champ-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rv-vs {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dim);
  padding: 0 6px;
}

/* ── SIDEBAR ── */
.rv-sidebar {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--border);
  overflow: hidden;
}
.rv-sidebar-section {
  padding: 14px;
}
.rv-sidebar-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px 0;
}

/* Gold Diff */
.rv-gold-section {
  border-bottom: 1px solid var(--border);
}
.rv-gold-chart-wrapper {
  background: var(--bg-body);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;
}
.rv-gold-chart-wrapper canvas {
  width: 100%;
  height: 140px;
  display: block;
  cursor: crosshair;
}
.rv-gold-tooltip {
  position: absolute;
  top: -4px;
  left: 0;
  background: rgba(30,30,30,0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transform: translateX(-50%) translateY(-100%);
  line-height: 1.5;
}
.rv-gold-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.rv-gold-val {
  font-size: 13px;
  font-weight: 700;
}
.rv-gold-blue { color: #3b82f6; }
.rv-gold-red { color: #ef4444; }
.rv-gold-diff {
  font-size: 14px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--bg-body);
}

/* Event Log */
.rv-events-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.rv-event-filters {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rv-evt-filter {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.rv-evt-filter:hover {
  background: var(--bg-body);
}
.rv-evt-active {
  background: var(--orange) !important;
  color: #fff !important;
  border-color: var(--orange) !important;
}
.rv-event-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}
.rv-event-list::-webkit-scrollbar {
  width: 5px;
}
.rv-event-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.rv-event-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  padding: 20px 10px;
}
.rv-event-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}
.rv-event-item:hover {
  background: var(--bg-body);
}
.rv-event-blue {
  border-left-color: #3b82f6;
}
.rv-event-red {
  border-left-color: #ef4444;
}
.rv-event-future {
  opacity: 0.35;
}
.rv-event-highlight {
  background: rgba(255, 107, 43, 0.06);
  border-left-color: var(--orange);
}
.rv-event-time {
  font-weight: 700;
  font-size: 11px;
  color: var(--text-dim);
  min-width: 38px;
  font-variant-numeric: tabular-nums;
}
.rv-event-icon {
  font-size: 13px;
}
.rv-event-text {
  flex: 1;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── TIMELINE BAR (bottom) ── */
.rv-timeline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #fff;
  border-top: 1px solid var(--border);
  z-index: 10;
}

/* Play / Pause */
.rv-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(255, 107, 43, 0.25);
}
.rv-play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(255, 107, 43, 0.35);
}
.rv-play-btn:active {
  transform: scale(0.96);
}

/* Speed selector */
.rv-speed-selector {
  display: flex;
  gap: 2px;
  background: var(--bg-body);
  border-radius: 8px;
  padding: 2px;
  flex-shrink: 0;
}
.rv-speed-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.rv-speed-btn:hover {
  background: rgba(0,0,0,0.04);
}
.rv-speed-active {
  background: var(--orange) !important;
  color: #fff !important;
}

/* Timer */
.rv-timer {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  min-width: 46px;
  text-align: center;
  flex-shrink: 0;
}
.rv-timer-end {
  color: var(--text-dim);
}

/* Slider */
.rv-slider-wrapper {
  flex: 1;
  position: relative;
  height: 38px;
  display: flex;
  align-items: center;
}
.rv-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-body);
  outline: none;
  position: relative;
  z-index: 2;
  cursor: pointer;
}
.rv-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(255, 107, 43, 0.35);
  transition: transform 0.1s;
}
.rv-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.rv-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 6px rgba(255, 107, 43, 0.35);
}

/* Slider event markers */
.rv-slider-events {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.rv-slider-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 28px;
  border-radius: 4px;
  background: var(--mc, #9ca3af);
  opacity: 0.85;
  pointer-events: all;
  cursor: pointer;
  transition: all 0.15s;
  border: 1.5px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.rv-slider-marker:hover,
.rv-marker-near {
  opacity: 1 !important;
  height: 34px !important;
  width: 10px !important;
  box-shadow: 0 0 10px var(--mc, #9ca3af);
  z-index: 4;
}
/* Kill markers — diamond shape */
.rv-marker-kill {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.rv-marker-kill:hover,
.rv-marker-near.rv-marker-kill {
  height: 15px !important;
  width: 15px !important;
  box-shadow: 0 0 12px var(--mc, #ef4444);
}
/* Dragon markers — circle */
.rv-marker-dragon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
/* Baron markers — bigger circle */
.rv-marker-baron {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(168,85,247,0.6);
}
/* Tower markers */
.rv-marker-tower {
  width: 8px;
  height: 22px;
  border-radius: 2px;
}

/* ── TIMELINE MARKER HOVER TOOLTIP ── */
.rv-marker-tooltip {
  position: fixed;
  transform: translate(-50%, -100%);
  background: #1e1e2e;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 8px 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 600;
  min-width: 140px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.rv-marker-tooltip-visible {
  opacity: 1;
}
.rv-tt-time {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.rv-tt-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #fff;
  margin: 2px 0;
}
.rv-tt-label {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  min-width: 46px;
}
.rv-tt-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  object-fit: cover;
  vertical-align: middle;
}
.rv-tt-name {
  font-weight: 600;
}

/* Event log kill row tip button */
.rv-event-tip-btn {
  margin-left: auto;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.rv-event-kill:hover .rv-event-tip-btn {
  opacity: 1;
  transform: scale(1.2);
}

/* ── COACHING BUBBLE ── */
.rv-coaching-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.22);
  z-index: 500;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: rv-bubble-in 0.3s ease;
}
.rv-coaching-bubble.rv-coaching-visible {
  display: flex;
}
@keyframes rv-bubble-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rv-coaching-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: all 0.15s;
}
.rv-coaching-close:hover {
  background: var(--bg-body);
  color: var(--text-primary);
}
#rvCoachingContent {
  padding: 18px 20px;
  overflow-y: auto;
}
.rv-coaching-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.rv-coaching-icon {
  font-size: 24px;
}
.rv-coaching-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.rv-coaching-death {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 12px;
  background: var(--bg-body);
  border-radius: 8px;
  margin-bottom: 10px;
}
.rv-coaching-context {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 8px 12px;
  background: rgba(59,130,246,0.04);
  border-left: 3px solid #3b82f6;
  border-radius: 0 6px 6px 0;
  margin-bottom: 12px;
}
.rv-coaching-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rv-coaching-tip {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  padding: 8px 12px;
  border-left: 3px solid var(--orange);
  background: rgba(255,107,43,0.04);
  border-radius: 0 6px 6px 0;
}
.rv-coaching-ai {
  border-left-color: #8b5cf6;
  background: rgba(139,92,246,0.04);
}

/* ═══════════════════════════════════════════════════════════════════
   WIZARD — New 7-step onboarding flow (wiz-*)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Pitch (landing) card ── */
.wiz-pitch-card { padding: 40px 32px; }
.wiz-pitch-tagline {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 28px;
  line-height: 1.5;
}
.wiz-cta-btn { width: 100%; justify-content: center; }

/* Feature list */
.wiz-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  text-align: left;
  margin-bottom: 28px;
}
.wiz-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.2s;
}
.wiz-feature-item:hover { border-color: var(--orange-border); }
.wiz-feature-icon { font-size: 24px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.wiz-feature-item strong { display: block; font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.wiz-feature-item p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5; }

/* Inline hint under field */
.wiz-field-hint {
  display: block;
  font-size: 12px;
  color: #ef4444;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(239,68,68,0.08);
  border-radius: 8px;
}

/* ── Rank grid (wiz-rank-tier-row) ── */
.wiz-rank-grid { width: 100%; margin-bottom: 8px; }

.wiz-rank-tier-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
}
.wiz-rank-tier-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}
/* Icon container — fixed size, clips the transparent padding in Riot PNGs */
.wiz-rank-icon {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.wiz-rank-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Riot emblem PNGs have transparent padding on each side.
     Crop + upscale so the emblem nearly fills the entire cell. */
  clip-path: inset(12% 12% 12% 12%);
  transform: scale(2.0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.wiz-rank-tier-btn:hover .wiz-rank-icon img {
  transform: scale(2.1);
}
.wiz-rank-tier-btn.selected .wiz-rank-icon img {
  transform: scale(2.1);
  filter: drop-shadow(0 0 6px rgba(255,107,43,0.5));
}
.wiz-rank-name  { font-size: 11px; font-weight: 600; color: var(--text-secondary); transition: color 0.2s; white-space: nowrap; }
.wiz-rank-tier-btn:hover { border-color: var(--orange-border); background: var(--orange-bg); }
.wiz-rank-tier-btn.selected {
  border-color: var(--orange);
  background: rgba(255,107,43,0.08);
  box-shadow: 0 0 12px rgba(255,107,43,0.2);
}
.wiz-rank-tier-btn.selected .wiz-rank-name { color: var(--orange); }

/* No target option */
.wiz-no-target-wrapper {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 4px;
}
.wiz-no-target-btn {
  background: none;
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
.wiz-no-target-btn:hover {
  border-color: var(--orange-border);
  background: var(--orange-bg);
  color: var(--text-primary);
}
.wiz-no-target-btn.selected {
  border-color: var(--orange);
  background: rgba(255,107,43,0.08);
  color: var(--orange);
  font-weight: 600;
  box-shadow: 0 0 12px rgba(255,107,43,0.2);
}

/* Division row */
.wiz-rank-div-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-body);
  border-radius: 12px;
  border: 1px solid var(--border);
  flex-wrap: wrap;
  animation: onbFadeIn 0.3s ease;
}
.wiz-div-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}
.wiz-rank-div-btn {
  padding: 8px 18px;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}
.wiz-rank-div-btn:hover { border-color: var(--orange-border); color: var(--orange); }
.wiz-rank-div-btn.selected { border-color: var(--orange); background: rgba(255,107,43,0.08); color: var(--orange); }

/* ── Recommendation badge ── */
.wiz-rec-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,107,43,0.07);
  border: 1px solid rgba(255,107,43,0.22);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  width: 100%;
  text-align: left;
}
.wiz-rec-badge strong { color: var(--orange); }

/* ── Timeframe grid ── */
.wiz-timeframe-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
}
.wiz-timeframe-btn {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  width: 100%;
  text-align: left;
  position: relative;
}
.wiz-tf-emoji { font-size: 22px; text-align: center; }
.wiz-tf-info { display: flex; flex-direction: column; gap: 2px; }
.wiz-tf-label { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.wiz-tf-desc  { font-size: 12px; color: var(--text-secondary); }
.wiz-tf-rec-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-bg);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.wiz-timeframe-btn:hover   { border-color: var(--orange-border); background: var(--orange-bg); }
.wiz-timeframe-btn.recommended { border-color: rgba(255,107,43,0.3); }
.wiz-timeframe-btn.selected    { border-color: var(--orange); background: rgba(255,107,43,0.08); }

/* ── Summary step ── */
.wiz-summary-header {
  width: 100%;
  padding: 16px;
  background: var(--bg-body);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.wiz-summary-rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
/* Riot rank icon inside the summary badge */
.wiz-summary-rank-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  clip-path: inset(20% 20% 20% 20%);
  transform: scale(1.65);
  transform-origin: center;
  flex-shrink: 0;
}
.wiz-summary-arrow { color: var(--orange); font-size: 18px; }
.wiz-summary-meta {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.wiz-summary-goals { width: 100%; text-align: left; }
.wiz-goals-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 10px;
}
.wiz-goal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}
.wiz-goal-icon   { font-size: 18px; flex-shrink: 0; }
.wiz-goal-label  { flex: 1; font-size: 14px; color: var(--text-primary); }
.wiz-goal-target { font-size: 13px; font-weight: 700; color: var(--orange); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGE – Premium redesign (white / orange theme)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Animations ── */
@keyframes lpFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lpFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
@keyframes lpOrbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.05); }
  66%  { transform: translate(-20px, 15px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes lpShine {
  0%   { left: -75%; }
  100% { left: 125%; }
}
@keyframes lpBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,43,0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(255,107,43,0); }
}
@keyframes lpGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Scroll-triggered fade-in ── */
.lp-fade-in {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.lp-fade-in.lp-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Page container ── */
#landingPage {
  min-height: 100vh;
  background: #ffffff;
  overflow-x: hidden;
}

/* ── Navbar ── */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 48px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease;
}
.lp-nav.lp-nav-scrolled {
  box-shadow: 0 4px 30px rgba(0,0,0,0.06);
}
.lp-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.lp-nav-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(255,107,43,0.3));
  transition: transform 0.3s ease;
}
.lp-nav-logo:hover img {
  transform: rotate(-8deg) scale(1.08);
}
.lp-nav-brand {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lp-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}
.lp-nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--orange);
  border-radius: 1px;
  transition: width 0.3s ease;
}
.lp-nav-link:hover { color: var(--text-primary); }
.lp-nav-link:hover::after { width: 100%; }
.lp-nav-signin {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.25s ease;
}
.lp-nav-signin:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-bg);
}
.lp-nav-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 22px;
  background: linear-gradient(135deg, var(--orange), #e85c29);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 4px 16px rgba(255,107,43,0.3);
}
.lp-nav-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,107,43,0.45);
}

/* ── Hero ── */
.lp-hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 40px 88px;
  text-align: center;
  background: linear-gradient(175deg, #ffffff 0%, #fff8f5 40%, #fff1eb 70%, #ffeee6 100%);
  overflow: hidden;
}
.lp-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lp-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  will-change: transform;
}
.lp-orb-1 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255,107,43,0.35) 0%, transparent 70%);
  top: -80px;
  right: -60px;
  animation: lpOrbDrift 12s ease-in-out infinite;
}
.lp-orb-2 {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(255,143,90,0.30) 0%, transparent 70%);
  bottom: -60px;
  left: -40px;
  animation: lpOrbDrift 15s ease-in-out infinite reverse;
}
.lp-orb-3 {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,107,43,0.18) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  margin: -110px 0 0 -110px;
  animation: lpOrbDrift 10s ease-in-out infinite 2s;
}
.lp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 740px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.lp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--orange-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  animation: lpBadgePulse 3s ease-in-out infinite;
}
.lp-hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  display: inline-block;
  flex-shrink: 0;
}
.lp-hero-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 8px 32px rgba(255,107,43,0.35));
  animation: lpFloat 4s ease-in-out infinite;
}
.lp-hero-title {
  font-size: 58px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -2px;
  line-height: 1.12;
  margin: 0;
}
.lp-hero-accent {
  background: linear-gradient(135deg, var(--orange) 0%, #ff8f5a 50%, var(--orange) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: lpGradientShift 4s ease infinite;
}
.lp-hero-sub {
  font-size: 19px;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 560px;
  margin: 0;
}
.lp-hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.lp-btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 38px;
  background: linear-gradient(135deg, var(--orange), #e85c29);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 6px 28px rgba(255,107,43,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  overflow: hidden;
}
.lp-btn-shine {
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}
.lp-btn-cta:hover .lp-btn-shine {
  animation: lpShine 0.6s ease forwards;
}
.lp-btn-cta:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 40px rgba(255,107,43,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.lp-btn-cta:active {
  transform: translateY(0) scale(0.98);
}
.lp-btn-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 34px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.lp-btn-secondary-cta:hover {
  border-color: var(--orange-border);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  background: #ffffff;
}
.lp-hero-note {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
  letter-spacing: 0.2px;
}

/* ── Stats bar ── */
.lp-stats {
  padding: 0 40px;
  background: #ffffff;
  position: relative;
  z-index: 2;
}
.lp-stats-inner {
  max-width: 720px;
  margin: -36px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 28px 40px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}
.lp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lp-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.lp-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
}
.lp-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Features Section ── */
.lp-features {
  padding: 100px 40px 96px;
  background: #ffffff;
}
.lp-features-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.lp-section-title {
  font-size: 42px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1px;
  margin: 0 0 16px;
  text-align: center;
  line-height: 1.15;
}
.lp-section-accent {
  background: linear-gradient(135deg, var(--orange), #ff8f5a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lp-section-sub {
  font-size: 18px;
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 64px;
  line-height: 1.7;
}
.lp-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.lp-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 30px;
  background: linear-gradient(135deg, #fafbfd 0%, #ffffff 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  position: relative;
}
.lp-feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 0%, rgba(255,107,43,0.2) 100%);
  /* Gradient-border trick: webkit uses xor, standard uses exclude */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.lp-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(255,107,43,0.10), 0 2px 8px rgba(0,0,0,0.04);
  border-color: transparent;
}
.lp-feature-card:hover::before {
  opacity: 1;
}
.lp-feature-icon-wrap {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,107,43,0.08) 0%, rgba(255,107,43,0.14) 100%);
  border-radius: 16px;
  border: 1px solid var(--orange-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-feature-card:hover .lp-feature-icon-wrap {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 4px 16px rgba(255,107,43,0.15);
}
.lp-feature-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
  line-height: 1.3;
}
.lp-feature-body p {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
}

/* ── Download Section ── */
.lp-download {
  position: relative;
  padding: 110px 40px;
  text-align: center;
  background: linear-gradient(175deg, #ffffff 0%, #fff8f5 30%, #fff1eb 70%, #ffe8de 100%);
  overflow: hidden;
}
.lp-download-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lp-orb-4 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(255,107,43,0.25) 0%, transparent 70%);
  top: -60px;
  left: -80px;
  animation: lpOrbDrift 14s ease-in-out infinite;
}
.lp-orb-5 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255,143,90,0.2) 0%, transparent 70%);
  bottom: -40px;
  right: -60px;
  animation: lpOrbDrift 11s ease-in-out infinite reverse;
}
.lp-download-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.lp-download-icon {
  font-size: 56px;
  margin-bottom: 4px;
  animation: lpFloat 5s ease-in-out infinite;
}
.lp-download-title {
  font-size: 38px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.8px;
  margin: 0;
  line-height: 1.2;
}
.lp-download-sub {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
}
.lp-dl-btn {
  padding: 19px 48px;
  font-size: 17px;
  margin-top: 8px;
}
.lp-download-hint {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
  letter-spacing: 0.2px;
}

/* ── Footer ── */
.lp-footer {
  padding: 36px 48px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #ffffff;
}
.lp-footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lp-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.lp-footer-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.lp-footer-links {
  display: flex;
  gap: 20px;
}
.lp-footer-link {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: color 0.25s ease;
  padding: 0;
}
.lp-footer-link:hover { color: var(--orange); }
.lp-footer-copy {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

/* ── Wizard pitch card improvements (bigger logo + airy text) ── */
.wizard-logo-icon {
  width: 88px;
  height: 88px;
  margin-bottom: 24px;
}
.wiz-pitch-tagline {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0 0 32px;
  line-height: 1.7;
}
.wiz-features { gap: 14px; margin-bottom: 32px; }
.wiz-feature-item { padding: 16px 18px; gap: 16px; }
.wiz-feature-item strong { font-size: 15px; margin-bottom: 5px; }
.wiz-feature-item p { font-size: 14px; line-height: 1.65; }

/* ── Landing page mobile responsive ── */
@media (max-width: 768px) {
  .lp-nav { padding: 12px 20px; }
  .lp-nav-link { display: none; }
  .lp-hero { padding: 64px 24px 56px; }
  .lp-hero-title { font-size: 36px; letter-spacing: -0.8px; }
  .lp-hero-logo { width: 90px; height: 90px; }
  .lp-hero-sub { font-size: 16px; }
  .lp-stats-inner { flex-direction: column; gap: 18px; padding: 24px 28px; margin-top: -24px; }
  .lp-stat-divider { width: 48px; height: 1px; }
  .lp-features { padding: 72px 24px; }
  .lp-features-grid { grid-template-columns: 1fr; }
  .lp-section-title { font-size: 28px; }
  .lp-section-sub { font-size: 15px; margin-bottom: 40px; }
  .lp-feature-card { padding: 22px 20px; }
  .lp-download { padding: 72px 24px; }
  .lp-download-title { font-size: 28px; }
  .lp-footer { padding: 24px 20px; }
  .lp-footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lp-hero-btns { flex-direction: column; align-items: center; }
  .lp-btn-cta, .lp-btn-secondary-cta { width: 100%; justify-content: center; }
}