/* ══════════════════════════════════════════════════
   DSA CODE SHEET — STYLE.CSS
   Font: DM Mono + Clash Display + Satoshi
   Theme: Dark-first, geometric, editorial
══════════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
  --bg:       #09090f;
  --bg2:      #0e0e1a;
  --bg3:      #131320;
  --surface:  rgba(255,255,255,0.04);
  --surface2: rgba(255,255,255,0.07);
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.13);
  --text:     #e2e2f0;
  --text2:    #8888aa;
  --text3:    #55556a;
  --accent:   #6c47ff;
  --accent2:  #a78bfa;
  --accent3:  #c4b5fd;
  --green:    #22d3a0;
  --green-bg: rgba(34,211,160,0.1);
  --amber:    #f59e0b;
  --amber-bg: rgba(245,158,11,0.1);
  --red:      #ff5555;
  --red-bg:   rgba(255,85,85,0.1);
  --radius:   12px;
  --radius-lg:18px;
  --radius-sm:8px;
  --font:     'Satoshi', sans-serif;
  --display:  'Clash Display', sans-serif;
  --mono:     'DM Mono', monospace;
  --sidebar-w:240px;
  --shadow:   0 8px 32px rgba(0,0,0,0.5);
  --glow:     0 0 40px rgba(108,71,255,0.18);
}

/* ── LIGHT THEME ── */
body.light-theme {
  --bg:       #f8f9fa;
  --bg2:      #ffffff;
  --bg3:      #f1f3f5;
  --surface:  rgba(0,0,0,0.03);
  --surface2: rgba(0,0,0,0.06);
  --border:   rgba(0,0,0,0.08);
  --border2:  rgba(0,0,0,0.12);
  --text:     #1a1b26;
  --text2:    #4a5568;
  --text3:    #718096;
  --glow:     0 0 40px rgba(108,71,255,0.1);
  --shadow:   0 8px 32px rgba(0,0,0,0.1);
}

body.light-theme .auth-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);
}
body.light-theme .search-input,
body.light-theme .filter-select {
  border: 1.5px solid rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.04);
}
body.light-theme .filter-select option {
  background: #ffffff;
  color: #1a1b26;
}
body.light-theme .prob-card.prob-locked {
  border-color: rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}
body.light-theme .prob-card.prob-locked:hover {
  border-color: rgba(245,158,11,0.25);
  box-shadow: 0 0 20px rgba(245,158,11,0.1);
}

/* ── SEO POPUP ── */
.seo-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.seo-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.seo-popup-overlay.closing {
  opacity: 0;
  visibility: hidden;
}

.seo-popup-card {
  position: relative;
  width: min(92vw, 780px);
  max-width: 100%;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  transform: translateY(24px) scale(0.94);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}

.seo-popup-overlay.active .seo-popup-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.seo-popup-overlay.closing .seo-popup-card {
  transform: translateY(20px) scale(0.96);
  opacity: 0;
}

.seo-popup-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 760px);
  object-fit: contain;
  border-radius: 14px;
}

.seo-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.seo-popup-close:hover {
  transform: scale(1.06);
  background: rgba(0, 0, 0, 0.85);
}

.seo-popup-close:active {
  transform: scale(0.94);
}

@media (max-width: 768px) {
  .seo-popup-overlay {
    padding: 10px;
  }

  .seo-popup-card {
    width: 100%;
    padding: 8px;
    border-radius: 16px;
  }

  .seo-popup-card img {
    max-height: 82vh;
  }

  .seo-popup-close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
button { cursor:pointer; font-family: var(--font); border:none; outline:none; }
input  { font-family: var(--font); outline:none; }
a      { color: inherit; }

/* ── SCREENS ── */
.screen { display: none !important; }
.screen.active { display: flex !important; }

/* ══════════════════════════════════════════════════
   AUTH SCREEN (Modern Showcase & Glassmorphic Auth)
══════════════════════════════════════════════════ */
#authScreen {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.auth-bg { position:fixed; inset:0; z-index:0; pointer-events:none; }
.auth-orb {
  position:absolute; border-radius:50%;
  filter: blur(120px); opacity:0.35;
}
@keyframes orbFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 50px) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes orbFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -40px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes orbFloat3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, -30px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
.orb-1 {
  width:650px; height:650px; top:-200px; right:-150px;
  background:rgba(108,71,255,0.35);
  animation: orbFloat1 16s ease-in-out infinite;
}
.orb-2 {
  width:550px; height:550px; bottom:-150px; left:-120px;
  background:rgba(34,211,160,0.22);
  animation: orbFloat2 18s ease-in-out infinite;
}
.orb-3 {
  width:450px; height:450px; top:35%; left:30%;
  background:rgba(167,139,250,0.15);
  animation: orbFloat3 22s ease-in-out infinite;
}
.auth-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size: 48px 48px;
}

/* Auth Wrapper & Layout */
.auth-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1020px;
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 3.5rem;
  align-items: center;
  margin: auto;
}

/* Left Showcase Panel */
.auth-hero-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(34, 211, 160, 0.1);
  border: 1px solid rgba(34, 211, 160, 0.25);
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--mono);
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 15px rgba(34, 211, 160, 0.1);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(34, 211, 160, 0.7);
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 211, 160, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(34, 211, 160, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 211, 160, 0); }
}

.hero-title {
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 40%, var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.02rem;
  color: var(--text2);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 2rem;
}

.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
  margin-bottom: 2rem;
}

.hero-stat-card {
  padding: 1.1rem 1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, background 0.3s;
}

.hero-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent2);
  background: rgba(255, 255, 255, 0.06);
}

.stat-number {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent2);
  margin-bottom: 0.2rem;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text2);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hero-chip {
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  background: rgba(108, 71, 255, 0.1);
  border: 1px solid rgba(108, 71, 255, 0.22);
  color: var(--text2);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--mono);
  transition: all 0.25s ease;
}

.hero-chip:hover {
  background: rgba(108, 71, 255, 0.2);
  color: #fff;
  border-color: var(--accent2);
  transform: translateY(-2px);
}

/* Right Auth Container & Card */
.auth-container {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.auth-mobile-brand {
  display: none;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-icon { color:var(--accent2); font-family:var(--mono); font-size:1.4rem; }
.brand-accent { color:var(--accent2); }

.auth-card {
  width: 100%;
  background: rgba(14, 14, 28, 0.85);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.75), 0 0 50px rgba(108, 71, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.auth-card:hover {
  border-color: rgba(167, 139, 250, 0.38);
  box-shadow: 0 30px 75px rgba(0, 0, 0, 0.8), 0 0 45px rgba(108, 71, 255, 0.25);
}

/* Premium Segmented Auth Tabs */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  margin: 1.25rem 1.25rem 0.5rem 1.25rem;
  padding: 5px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.auth-tab-glider {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  height: auto;
  border-radius: 12px;
  background: linear-gradient(135deg, #6c47ff 0%, #8b5cf6 55%, #a78bfa 100%);
  box-shadow: 0 4px 20px rgba(108, 71, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  z-index: 1;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: transparent;
  color: #cbd5e1;
  font-family: 'Outfit', 'Plus Jakarta Sans', var(--display), sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 12px;
  transition: color 0.25s ease, opacity 0.25s ease;
  z-index: 2;
  cursor: pointer;
  opacity: 0.82;
}

.auth-tab .tab-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
  opacity: 0.85;
}

.auth-tab.active {
  color: #ffffff;
  opacity: 1;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

.auth-tab.active .tab-icon {
  opacity: 1;
  transform: scale(1.1);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

.auth-tab:hover {
  color: #ffffff;
  opacity: 1;
}

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

.auth-form {
  display: none;
  padding: 1.5rem 1.75rem 1.75rem 1.75rem;
  flex-direction: column;
  gap: 1.2rem;
}

.auth-form.active {
  display: flex;
  animation: slideFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.form-header {
  margin-bottom: 0.25rem;
}

.form-title {
  font-family: 'Outfit', 'Clash Display', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.form-sub {
  font-family: 'Plus Jakarta Sans', var(--font), sans-serif;
  font-size: 0.92rem;
  color: #94a3b8;
  margin-top: 0.3rem;
  font-weight: 400;
  line-height: 1.45;
}

.field-group { display: flex; flex-direction: column; gap: 0.45rem; }

/* Floating Labels with Icons & Password Toggle */
.float-group {
  position: relative;
  width: 100%;
}

.float-group .field-input {
  width: 100%;
  height: 56px;
  padding: 1.25rem 2.8rem 0.35rem 2.8rem;
  background: rgba(10, 10, 22, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: #ffffff;
  font-size: 0.98rem;
  font-family: 'Plus Jakarta Sans', var(--font), sans-serif;
  font-weight: 500;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}

.float-group .field-input:focus {
  border-color: #a78bfa;
  background: rgba(15, 15, 30, 0.95);
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.22), 0 8px 24px rgba(108, 71, 255, 0.25);
}

.float-group .field-label {
  position: absolute;
  left: 2.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Plus Jakarta Sans', var(--font), sans-serif;
  font-size: 0.94rem;
  font-weight: 500;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: #94a3b8;
}

.float-group .field-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s, filter 0.25s;
  pointer-events: none;
}

.float-group .field-icon svg {
  width: 100%;
  height: 100%;
}

.float-group .field-input:focus ~ .field-label,
.float-group .field-input:not(:placeholder-shown) ~ .field-label {
  top: 24%;
  left: 1.05rem;
  transform: scale(0.78) translateY(-50%);
  transform-origin: left top;
  color: #c4b5fd;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.float-group .field-input:focus ~ .field-icon {
  color: #a78bfa;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.5));
}

/* Password Visibility Toggle Button */
.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0.4rem;
  color: #64748b;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background-color 0.2s;
  z-index: 5;
}

.password-toggle:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.eye-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.form-error {
  font-size: 0.86rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  color: #ff6b6b;
  min-height: 1.1rem;
  background: rgba(255, 85, 85, 0.12);
  border: 1px solid rgba(255, 85, 85, 0.3);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  display: none;
  line-height: 1.45;
  word-break: break-word;
  animation: slideFadeIn 0.25s ease;
}

.form-error:not(:empty) { display: block; }

.auth-footer {
  font-size: 0.8rem;
  color: #64748b;
  font-family: var(--mono);
  text-align: center;
  line-height: 1.5;
}

/* Primary Button with Shimmer & Glow */
.btn-primary {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #6c47ff 0%, #8b5cf6 50%, #a78bfa 100%);
  border: none;
  border-radius: 14px;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 700;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, opacity 0.2s;
  box-shadow: 0 8px 28px rgba(108, 71, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  margin-top: 0.2rem;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(108, 71, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
  opacity: 0.9;
}

.btn-arrow {
  font-family: var(--mono);
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.btn-primary:hover .btn-arrow {
  transform: translateX(4px);
}

/* Google Login Button Styles */
.btn-google {
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: #f1f5f9;
  font-size: 0.96rem;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, border-color 0.25s, color 0.25s;
}

.btn-google:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}

.btn-google:active {
  transform: translateY(0);
  opacity: 0.9;
}

.google-icon {
  width: 19px;
  height: 19px;
}

/* Guest Button Styles */
.btn-guest {
  width: 100%;
  height: 50px;
  background: rgba(167, 139, 250, 0.04);
  border: 1.5px dashed rgba(167, 139, 250, 0.3);
  border-radius: 14px;
  color: #c4b5fd;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 0.3rem;
}

.btn-guest:hover {
  background: rgba(167, 139, 250, 0.14);
  border-color: #a78bfa;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 71, 255, 0.25);
}

.btn-guest:active {
  transform: translateY(0);
  opacity: 0.9;
}

/* Auth Divider */
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #64748b;
  font-size: 0.82rem;
  font-family: 'Plus Jakarta Sans', var(--mono), sans-serif;
  font-weight: 500;
  margin: 0.2rem 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-divider:not(:empty)::before { margin-right: 0.75rem; }
.auth-divider:not(:empty)::after { margin-left: 0.75rem; }

/* Light Theme Enhancements for Auth Screen */
body.light-theme .auth-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
body.light-theme .auth-tabs {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
body.light-theme .auth-tab {
  color: #475569;
  opacity: 0.9;
}
body.light-theme .auth-tab.active {
  color: #ffffff;
  opacity: 1;
}
body.light-theme .auth-tab:hover {
  color: #0f172a;
  opacity: 1;
}
body.light-theme .auth-tab.active:hover {
  color: #ffffff;
}
body.light-theme .form-title { color: #0f172a; text-shadow: none; }
body.light-theme .form-sub { color: #64748b; }
body.light-theme .float-group .field-input {
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}
body.light-theme .float-group .field-input:focus {
  background: #ffffff;
  border-color: #6c47ff;
  box-shadow: 0 0 0 4px rgba(108, 71, 255, 0.15), 0 4px 16px rgba(108, 71, 255, 0.1);
}
body.light-theme .float-group .field-label {
  color: #64748b;
}
body.light-theme .float-group .field-input:focus ~ .field-label,
body.light-theme .float-group .field-input:not(:placeholder-shown) ~ .field-label {
  color: #6c47ff;
}
body.light-theme .btn-google {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.14);
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.light-theme .btn-google:hover {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.25);
  color: #0f172a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
body.light-theme .btn-guest {
  background: rgba(108, 71, 255, 0.05);
  border-color: rgba(108, 71, 255, 0.3);
  color: #6c47ff;
}
body.light-theme .btn-guest:hover {
  background: rgba(108, 71, 255, 0.12);
  border-color: #6c47ff;
  color: #5b21b6;
}
body.light-theme .auth-divider { color: #94a3b8; }
body.light-theme .auth-divider::before,
body.light-theme .auth-divider::after {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.light-theme .hero-title {
  background: linear-gradient(135deg, #1a1b26 40%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.light-theme .hero-stat-card {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Responsive Media Queries */
@media (max-width: 960px) {
  .auth-wrapper {
    grid-template-columns: 1fr;
    max-width: 450px;
    gap: 1.5rem;
  }
  .auth-hero-panel {
    display: none;
  }
  .auth-mobile-brand {
    display: flex;
  }
}


/* ══════════════════════════════════════════════════
   APP SCREEN
══════════════════════════════════════════════════ */
#appScreen {
  min-height: 100vh;
  flex-direction: row;
  align-items: stretch;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0;
  height:100vh;
  flex-shrink:0;
  z-index:50;
  transition:transform 0.3s;
}

.sidebar-brand {
  padding:1.5rem 1.25rem 1rem;
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--display);
  font-size:1.25rem; font-weight:700;
  border-bottom:1px solid var(--border);
}

.sidebar-nav {
  flex:1;
  padding:1rem 0.75rem;
  display:flex; flex-direction:column; gap:0.35rem;
  overflow-y:auto; overflow-x:hidden;
}

/* ── ENHANCED SIDEBAR NAV BUTTONS & ANIMATIONS ── */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: transparent;
  color: var(--text2);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  width: 100%;
  border: 1px solid transparent;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease;
}

/* Hover Shimmer Sweep Overlay */
.nav-item::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: rotate(25deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.nav-item:hover::after {
  left: 130%;
}

.nav-item:hover {
  background: rgba(108, 71, 255, 0.08);
  color: var(--text);
  border-color: rgba(167, 139, 250, 0.2);
  transform: translateX(4px);
}

.nav-item:active {
  transform: translateX(2px) scale(0.98);
}

/* Active Nav State */
.nav-item.active {
  background: linear-gradient(135deg, rgba(108, 71, 255, 0.18), rgba(167, 139, 250, 0.06));
  color: var(--accent2);
  font-weight: 600;
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 4px 20px rgba(108, 71, 255, 0.15);
}

/* Active Left Glow Indicator Bar */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3.5px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px var(--accent);
}

.nav-icon {
  font-family: var(--mono);
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
}

.nav-item:hover .nav-icon {
  transform: scale(1.18);
}

.nav-item.active .nav-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(108, 71, 255, 0.6));
}

.unread-dot {
  position: absolute;
  top: -3px;
  right: -8px;
  width: 9px;
  height: 9px;
  background-color: #22d3a0;
  border-radius: 50%;
  box-shadow: 0 0 10px #22d3a0;
  animation: greenPulseDot 1.8s infinite;
}

@keyframes greenPulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 211, 160, 0.8); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 7px rgba(34, 211, 160, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 211, 160, 0); }
}

.sidebar-bottom {
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Specific Sidebar Button Animations & Styles */
#themeToggleSidebar:hover .nav-icon {
  transform: rotate(180deg) scale(1.25);
}

#supportBtn {
  border: 1px solid rgba(34, 211, 160, 0.2);
  background: rgba(34, 211, 160, 0.05);
}

#supportBtn:hover {
  background: rgba(34, 211, 160, 0.12);
  border-color: rgba(34, 211, 160, 0.4);
  color: var(--green);
  box-shadow: 0 4px 15px rgba(34, 211, 160, 0.15);
}

.logout-btn {
  color: var(--text3) !important;
  border: 1px solid rgba(255, 85, 85, 0.15) !important;
  background: rgba(255, 85, 85, 0.04) !important;
}

.logout-btn:hover {
  color: #ff5555 !important;
  background: rgba(255, 85, 85, 0.14) !important;
  border-color: rgba(255, 85, 85, 0.35) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(255, 85, 85, 0.18);
}

.logout-btn:hover .nav-icon {
  transform: translateX(3px) scale(1.2);
}

/* Light Theme Sidebar Button Adjustments */
body.light-theme .nav-item {
  color: var(--text2);
}

body.light-theme .nav-item:hover {
  background: rgba(108, 71, 255, 0.06);
  color: #1a1b26;
  border-color: rgba(108, 71, 255, 0.2);
}

body.light-theme .nav-item.active {
  background: rgba(108, 71, 255, 0.1);
  color: var(--accent);
  border-color: rgba(108, 71, 255, 0.3);
  box-shadow: 0 4px 15px rgba(108, 71, 255, 0.1);
}

body.light-theme #supportBtn {
  background: rgba(34, 211, 160, 0.08);
  border-color: rgba(34, 211, 160, 0.3);
  color: #0d9488;
}

body.light-theme .logout-btn {
  color: #dc2626 !important;
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

/* ── MOBILE HEADER ── */
.mobile-header {
  display:none;
  position:fixed; top:0; left:0; right:0;
  height:56px; z-index:60;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:0 1rem;
  align-items:center;
  justify-content:space-between;
}
.hamburger {
  background:none; border:none;
  color:var(--text); font-size:1.25rem;
  padding:0.35rem 0.6rem;
}
.mobile-brand { font-family:var(--display); font-weight:700; font-size:1.15rem; }
.logout-btn-mobile {
  background:none; border:none;
  color:var(--text2); font-size:1.1rem; padding:0.35rem;
}

.sidebar-overlay {
  display:none;
  position:fixed; inset:0; z-index:49;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
}
.sidebar-overlay.active { display:block; }

/* ── MAIN CONTENT ── */
.main-content {
  flex:1; min-width:0;
  padding:2rem 2.5rem;
  overflow-y:auto;
}

/* ── VIEW ── */
.view { display:none; animation:fadeUp 0.4s ease; }
.view.active { display:block; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}

.view-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:1.75rem; gap:1rem; flex-wrap:wrap;
}
.view-title {
  font-family:var(--display);
  font-size:clamp(1.75rem,3vw,2.4rem);
  font-weight:700;
  letter-spacing:-0.03em;
  background:linear-gradient(135deg,var(--text) 0%,var(--accent2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.view-sub { font-size:0.9rem; color:var(--text2); margin-top:0.25rem; }

/* ── UNLOCK BUTTON ── */
.unlock-btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.65rem 1.25rem;
  background:linear-gradient(135deg,var(--amber),#f97316);
  border:none; border-radius:var(--radius-sm);
  color:#fff;
  font-size:0.85rem; font-weight:600;
  white-space:nowrap;
  transition:transform 0.2s, box-shadow 0.2s;
  flex-shrink:0;
}
.unlock-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(245,158,11,0.4); }
.unlock-icon { color:var(--amber); filter:brightness(1.4); }

/* ── STATS STRIP ── */
.stats-strip {
  display:flex; gap:1rem;
  margin-bottom:2rem; flex-wrap:wrap;
}
.stat-chip {
  flex:1; min-width:100px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.1rem 1.25rem;
  display:flex; flex-direction:column; align-items:center;
}
.stat-val {
  font-family:var(--mono);
  font-size:1.75rem; font-weight:600;
  color:var(--accent2);
  display:block;
}
.stat-lbl { font-size:0.75rem; color:var(--text2); margin-top:0.2rem; }

/* ── CATEGORY SECTIONS ── */
.cat-section {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  margin-bottom:1.5rem;
  animation:fadeUp 0.4s ease backwards;
}

.cat-section-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap;
}
.cat-section-left {
  display:flex; align-items:center; gap:1rem;
}
.cat-section-icon {
  width:48px; height:48px;
  background:linear-gradient(135deg,rgba(108,71,255,0.2),rgba(167,139,250,0.1));
  border:1px solid rgba(108,71,255,0.25);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-family:var(--mono);
  color:var(--accent2); flex-shrink:0;
}
.cat-section-title {
  font-family:var(--display);
  font-size:1.1rem; font-weight:600;
  letter-spacing:-0.01em;
}
.cat-section-desc { font-size:0.82rem; color:var(--text2); margin-top:0.2rem; }

.cat-section-meta { display:flex; flex-direction:column; align-items:flex-end; gap:0.5rem; }
.cat-count { font-family:var(--mono); font-size:0.85rem; color:var(--text2); }
.cat-progress-bar {
  width:130px; height:5px;
  background:var(--surface2); border-radius:3px; overflow:hidden;
}
.cat-progress-fill {
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:3px;
  transition:width 0.8s cubic-bezier(.4,0,.2,1);
}

/* ── PROBLEMS GRID ── */
.problems-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:0.85rem;
}

/* ── PROBLEM CARD ── */
.prob-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}
.prob-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04),
    transparent
  );
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  pointer-events: none;
}
.prob-card:hover {
  transform: translateY(-4px);
  border-color: var(--border2);
  box-shadow: var(--glow), 0 12px 24px rgba(0, 0, 0, 0.2);
}
.prob-card:hover::before {
  left: 150%;
}
.prob-card.prob-solved {
  border-color: rgba(34, 211, 160, 0.25);
  background: linear-gradient(135deg, rgba(34, 211, 160, 0.04), rgba(34, 211, 160, 0.01));
}
.prob-card.prob-locked {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.02);
}
.prob-card.prob-locked:hover {
  border-color: rgba(245, 158, 11, 0.25);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.12);
}

.prob-card-inner { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; position: relative; z-index: 2; }

.prob-card-top {
  display: flex; justify-content: space-between; align-items: center;
}

/* Custom Checkbox */
.prob-check-wrap { display: flex; align-items: center; cursor: pointer; }
.prob-checkbox { display: none; }
.prob-checkmark {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--bg3);
  flex-shrink: 0;
}
.prob-check-wrap:hover .prob-checkmark {
  border-color: var(--green);
  box-shadow: 0 0 8px rgba(34, 211, 160, 0.3);
}
.prob-checkbox:checked + .prob-checkmark {
  background: var(--green);
  border-color: var(--green);
  transform: scale(1.05);
}
.prob-checkbox:checked + .prob-checkmark::after {
  content: '';
  width: 5px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
  animation: checkAnim 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes checkAnim {
  from { transform: rotate(45deg) scale(0); opacity: 0; }
  to { transform: rotate(45deg) scale(1); opacity: 1; }
}
[data-locked] .prob-checkmark { border-color: var(--border); opacity: 0.4; cursor: not-allowed; }

.prob-badges { display: flex; gap: 0.35rem; }
.badge {
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.diff-easy {
  background: rgba(34, 211, 160, 0.06);
  color: var(--green);
  border-color: rgba(34, 211, 160, 0.15);
}
.diff-medium {
  background: rgba(245, 158, 11, 0.06);
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.15);
}
.diff-hard {
  background: rgba(255, 85, 85, 0.06);
  color: var(--red);
  border-color: rgba(255, 85, 85, 0.15);
}
.src-gfg {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border-color: var(--border);
}
.src-leetcode {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border-color: var(--border);
}

.prob-title-row {
  display:flex; align-items:flex-start; gap:0.5rem;
  flex: 1;
}
.lock-icon { font-size:0.9rem; flex-shrink:0; }
.prob-title { font-size:0.9rem; font-weight:500; line-height:1.4; }
.prob-solved .prob-title { text-decoration:line-through; color:var(--text2); }
.blurred { filter:blur(4px); user-select:none; opacity:0.5; color:var(--text3); }

.prob-actions {
  display:flex; gap:0.4rem; margin-left:auto; flex-shrink:0;
}
.prob-icon-btn {
  background:none; border:none; font-size:1.1rem; cursor:pointer; opacity:0.4; transition:all 0.2s;
  filter: grayscale(100%);
}
.prob-icon-btn:hover { opacity:1; transform:scale(1.1); filter: grayscale(0%); }
.bookmark-btn.active { opacity:1; filter: grayscale(0%); text-shadow: 0 0 8px rgba(245,158,11,0.5); }

textarea.field-input { resize:vertical; font-family:var(--font); }

.prob-open-btn {
  display:inline-flex; align-items:center;
  padding:0.5rem 0.9rem;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:var(--radius-sm);
  color:#fff;
  font-size:0.8rem; font-weight:500;
  text-decoration:none;
  transition:transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  width:fit-content;
}
.prob-open-btn:hover { transform:scale(1.04); box-shadow:0 4px 14px rgba(108,71,255,0.4); }

.prob-unlock-btn {
  display:inline-flex; align-items:center;
  padding:0.5rem 0.9rem;
  background:rgba(245,158,11,0.12);
  border:1px solid rgba(245,158,11,0.25);
  border-radius:var(--radius-sm);
  color:var(--amber);
  font-size:0.8rem; font-weight:500;
  width:fit-content;
  transition:all 0.2s;
}
.prob-unlock-btn:hover { background:rgba(245,158,11,0.2); }

/* ══════════════════════════════════════════════════
   PROFILE VIEW
══════════════════════════════════════════════════ */
.profile-card {
  background: linear-gradient(135deg, rgba(15, 15, 30, 0.88) 0%, rgba(22, 22, 45, 0.82) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.profile-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(108, 71, 255, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.profile-card:hover {
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(108, 71, 255, 0.2);
}

.avatar-wrapper {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}

.profile-avatar, .profile-avatar-img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 25px rgba(108, 71, 255, 0.4), inset 0 0 15px rgba(108, 71, 255, 0.3);
  transition: all 0.3s ease;
}

.profile-avatar {
  background: linear-gradient(135deg, #6c47ff 0%, #a78bfa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', var(--display), sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(15, 15, 28, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.25s ease;
  border: 2px solid #a78bfa;
}

.avatar-wrapper:hover .avatar-overlay {
  opacity: 1;
}

.avatar-wrapper:hover .profile-avatar,
.avatar-wrapper:hover .profile-avatar-img {
  border-color: #a78bfa;
  transform: scale(1.03);
}

.profile-name {
  font-family: 'Outfit', 'Clash Display', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.profile-email {
  font-size: 0.92rem;
  color: #94a3b8;
  margin-top: 0.3rem;
  font-family: 'Plus Jakarta Sans', var(--mono), sans-serif;
  font-weight: 500;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.9rem;
  background: linear-gradient(135deg, rgba(108, 71, 255, 0.25), rgba(167, 139, 250, 0.15));
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 999px;
  color: #c4b5fd;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 15px rgba(108, 71, 255, 0.2);
}

.profile-badges { margin-top: 0.6rem; }

.premium-badge-glow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(251, 191, 36, 0.12));
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  border-radius: 999px;
  color: #fbbf24;
  font-size: 0.84rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: goldPulse 3s ease-in-out infinite;
}

@keyframes goldPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); }
  50% { box-shadow: 0 6px 28px rgba(245, 158, 11, 0.6); }
}

/* Stat Grid (Solved, Total, Completion) */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.pstat {
  background: rgba(15, 15, 28, 0.75);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.pstat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6c47ff, #a78bfa);
  opacity: 0.8;
}

.pstat:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 12px 32px rgba(108, 71, 255, 0.25);
}

/* ── DIFFICULTY BREAKDOWN CARD ── */
.profile-difficulty-card {
  background: rgba(15, 15, 28, 0.75);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1.6rem;
  margin-bottom: 2rem;
  transition: all 0.3s ease;
}

.profile-difficulty-card:hover {
  border-color: rgba(167, 139, 250, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.diff-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .diff-breakdown-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
}

.diff-box {
  background: rgba(10, 10, 22, 0.65);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: all 0.25s ease;
}

.diff-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.diff-box-easy:hover { border-color: rgba(34, 211, 160, 0.4); }
.diff-box-medium:hover { border-color: rgba(245, 158, 11, 0.4); }
.diff-box-hard:hover { border-color: rgba(255, 85, 85, 0.4); }

.diff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.diff-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.diff-pill-easy {
  background: rgba(34, 211, 160, 0.14);
  border: 1px solid rgba(34, 211, 160, 0.35);
  color: #22d3a0;
}

.diff-pill-medium {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.diff-pill-hard {
  background: rgba(255, 85, 85, 0.14);
  border: 1px solid rgba(255, 85, 85, 0.35);
  color: #ff6b6b;
}

.diff-count {
  font-family: 'DM Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.diff-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.diff-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.diff-fill-easy {
  background: linear-gradient(90deg, #10b981, #22d3a0);
  box-shadow: 0 0 12px rgba(34, 211, 160, 0.6);
}

.diff-fill-medium {
  background: linear-gradient(90deg, #d97706, #fbbf24);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}

.diff-fill-hard {
  background: linear-gradient(90deg, #dc2626, #ff5555);
  box-shadow: 0 0 12px rgba(255, 85, 85, 0.6);
}

.pstat-val {
  display: block;
  font-family: 'Outfit', 'DM Mono', monospace;
  font-size: 2.25rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(108, 71, 255, 0.4));
  line-height: 1.1;
}

.pstat-lbl {
  font-size: 0.8rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-top: 0.45rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.section-title {
  font-family: 'Outfit', 'Clash Display', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 1.1rem;
  color: #94a3b8;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-progress-section {
  background: rgba(15, 15, 28, 0.75);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1.6rem;
  margin-bottom: 2rem;
}

.cprog-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10, 10, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 1.1rem 1.35rem;
  margin-bottom: 0.75rem;
  gap: 1.25rem;
  transition: all 0.25s ease;
}

.cprog-row:hover {
  background: rgba(18, 18, 36, 0.85);
  border-color: rgba(167, 139, 250, 0.35);
  transform: translateX(3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.cprog-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.96rem;
  font-weight: 600;
  color: #f1f5f9;
}

.cprog-icon {
  font-family: var(--mono);
  font-size: 1.15rem;
  color: #a78bfa;
}

.cprog-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.cprog-count {
  font-family: 'DM Mono', monospace;
  font-size: 0.88rem;
  font-weight: 600;
  color: #a78bfa;
  white-space: nowrap;
  background: rgba(108, 71, 255, 0.15);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(108, 71, 255, 0.3);
}

.cprog-track {
  width: 130px;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.cprog-fill {
  height: 100%;
  background: linear-gradient(90deg, #6c47ff 0%, #8b5cf6 50%, #22d3a0 100%);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(108, 71, 255, 0.6);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-links-card {
  background: rgba(15, 15, 28, 0.75);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1.6rem;
  margin-bottom: 2rem;
}

.profile-links-display { margin-top: 1.1rem; }

.icon-brand-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #f1f5f9;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  margin-right: 0.6rem;
  margin-bottom: 0.6rem;
}

.icon-brand-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(167, 139, 250, 0.4);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dev-icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.profile-unlock-cta {
  background: linear-gradient(135deg, rgba(108, 71, 255, 0.18) 0%, rgba(245, 158, 11, 0.14) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: 22px;
  padding: 1.6rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.profile-unlock-cta p {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.unlock-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  border-radius: 14px;
  padding: 0.8rem 1.4rem;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.45);
}

.unlock-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.6);
}

/* ══════════════════════════════════════════════════
   LEADERBOARD & CHAT
══════════════════════════════════════════════════ */
/* ── LEADERBOARD ── */
.leaderboard-list { display:flex; flex-direction:column; gap:0.85rem; padding-bottom: 2rem; }
.lb-row {
  display:flex; align-items:center; gap:1.25rem;
  padding:1.2rem 1.25rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation:fadeUp 0.5s ease backwards;
  position: relative;
  overflow: hidden;
}
.lb-row:hover { transform:translateY(-3px); box-shadow:var(--glow); border-color:var(--border2); }
.lb-gold { background: linear-gradient(90deg, rgba(255,215,0,0.08), transparent); border-left: 4px solid #ffd700; }
.lb-silver { background: linear-gradient(90deg, rgba(192,192,192,0.08), transparent); border-left: 4px solid #c0c0c0; }
.lb-bronze { background: linear-gradient(90deg, rgba(205,127,50,0.08), transparent); border-left: 4px solid #cd7f32; }
.lb-current-user { border: 2px solid var(--accent); background: rgba(108,71,255,0.05); }

.lb-rank { font-family:var(--mono); font-size:1.4rem; font-weight:700; color:var(--text3); width:45px; text-align:center; flex-shrink:0; }
.lb-gold .lb-rank { font-size: 1.8rem; filter: drop-shadow(0 2px 4px rgba(255,215,0,0.5)); }
.lb-silver .lb-rank { font-size: 1.6rem; }
.lb-bronze .lb-rank { font-size: 1.6rem; }

.lb-avatar-wrap {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: var(--bg3); border: 2px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.lb-avatar { width: 100%; height: 100%; object-fit: cover; }
.lb-gold .lb-avatar-wrap { border-color: #ffd700; box-shadow: 0 0 15px rgba(255,215,0,0.3); }
.lb-silver .lb-avatar-wrap { border-color: #c0c0c0; }
.lb-bronze .lb-avatar-wrap { border-color: #cd7f32; }

.lb-info { flex:1; display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap:1rem; }
.lb-name-group { display:flex; align-items:center; gap:0.75rem; flex-wrap: wrap; }
.lb-name { font-weight:600; font-size:1.1rem; font-family:var(--display); letter-spacing:-0.01em; }

.lb-premium-badge { font-size: 0.75rem; color: var(--amber); background: rgba(245,158,11,0.1); padding: 0.2rem 0.6rem; border-radius: 6px; font-weight: 600; font-family:var(--mono); border: 1px solid rgba(245,158,11,0.2); }
.lb-you-badge { font-size: 0.75rem; color: #fff; background: var(--accent); padding: 0.2rem 0.6rem; border-radius: 6px; font-weight: 600; font-family:var(--mono); box-shadow: 0 0 10px rgba(108,71,255,0.4); }

.lb-score-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; min-width:130px; }
.lb-score { font-family:var(--mono); color:var(--accent2); font-weight:700; font-size:1rem; }
.lb-bar-bg { width: 100%; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.lb-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent3)); border-radius: 3px; }
.lb-gold .lb-bar-fill { background: linear-gradient(90deg, #f59e0b, #ffd700); }
.lb-silver .lb-bar-fill { background: linear-gradient(90deg, #9ca3af, #d1d5db); }
.lb-bronze .lb-bar-fill { background: linear-gradient(90deg, #cd7f32, #fcd34d); }

/* ── CHAT ── */
.chat-container {
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  height:60vh; max-height:600px; overflow:hidden;
}
.chat-messages {
  flex:1; padding:1.5rem; overflow-y:auto;
  display:flex; flex-direction:column; gap:1rem;
}
.chat-msg { display:flex; flex-direction:column; max-width:80%; }
.msg-me { align-self:flex-end; align-items:flex-end; }
.msg-other { align-self:flex-start; align-items:flex-start; }
.msg-sender { font-size:0.75rem; color:var(--text3); margin-bottom:0.2rem; }
.msg-bubble {
  padding:0.75rem 1rem; border-radius:12px; font-size:0.9rem; line-height:1.4;
}
.msg-me .msg-bubble { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-bottom-right-radius:0; }
.msg-other .msg-bubble { background:var(--bg3); border:1px solid var(--border); border-bottom-left-radius:0; }
.chat-input-area {
  display:flex; gap:0.5rem; padding:1rem; border-top:1px solid var(--border);
  background:var(--bg2);
}
.chat-input-area input {
  flex:1; padding:0.75rem 1rem; border-radius:var(--radius-sm);
  border:1px solid var(--border2); background:transparent; color:var(--text);
}
.light-theme .chat-input-area input {
  background:var(--surface); border-color:var(--border2);
}

/* ══════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════ */
.modal-overlay {
  display:none;
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(8px);
  align-items:center; justify-content:center;
  padding:1rem;
  animation:fadeIn 0.2s ease;
}
.modal-overlay.active { display:flex; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal-card {
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:var(--radius-lg);
  padding:2rem 2.25rem;
  width:100%; max-width:420px;
  position:relative;
  box-shadow:var(--shadow);
  animation:slideUp 0.3s ease;
}
@keyframes slideUp { from{transform:translateY(24px);opacity:0} to{transform:none;opacity:1} }

.modal-close {
  position:absolute; top:1rem; right:1rem;
  width:32px; height:32px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:50%; color:var(--text);
  font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.modal-close:hover { background:var(--red-bg); color:var(--red); }

.modal-icon { font-size:2.5rem; margin-bottom:0.75rem; display:block; }
.modal-title {
  font-family:var(--display);
  font-size:1.5rem; font-weight:700;
  letter-spacing:-0.02em; margin-bottom:0.75rem;
}
.modal-desc { font-size:0.9rem; color:var(--text2); line-height:1.65; margin-bottom:1.25rem; }

.modal-features {
  list-style:none;
  margin-bottom:1.5rem;
  display:flex; flex-direction:column; gap:0.5rem;
}
.modal-features li {
  font-size:0.88rem; color:var(--text2);
  padding:0.45rem 0.75rem;
  background:var(--green-bg);
  border-radius:var(--radius-sm);
  color:var(--green);
}

.modal-price {
  font-family:var(--mono);
  font-size:2.25rem; font-weight:600;
  color:var(--accent2); margin-bottom:1.25rem;
}
.modal-price-sub { font-size:0.85rem; color:var(--text2); }

.modal-secure {
  text-align:center;
  font-size:0.78rem; color:var(--text3);
  margin-top:0.85rem; font-family:var(--mono);
}

.lock-modal .modal-desc strong { color:var(--amber); }
.modal-cancel {
  display:block; width:100%; margin-top:0.75rem;
  padding:0.7rem;
  background:transparent; border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text2); font-size:0.85rem;
  transition:all 0.2s;
}
.modal-cancel:hover { background:var(--surface2); color:var(--text); }

/* ══════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════ */
.toast-zone {
  position:fixed;
  bottom:1.5rem; right:1.5rem;
  display:flex; flex-direction:column; gap:0.5rem;
  z-index:9999; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:0.65rem;
  padding:0.8rem 1.1rem;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  font-size:0.88rem;
  white-space:nowrap;
  opacity:0; transform:translateX(20px);
  transition:opacity 0.3s, transform 0.3s;
}
.toast.show { opacity:1; transform:none; }
.toast-success { border-left:3px solid var(--green); }
.toast-error   { border-left:3px solid var(--red); }
.toast-info    { border-left:3px solid var(--accent2); }
.toast-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}
.toast-error .toast-dot   { background:var(--red); }
.toast-info  .toast-dot   { background:var(--accent2); }

/* ══════════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════════ */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sidebar {
    position:fixed; top:0; left:0; bottom:0;
    transform:translateX(-100%);
    z-index:100;
  }
  .sidebar.open { transform:none; }
  .mobile-header { display:flex; }
  .main-content { padding:5rem 1.25rem 2rem; }
  .profile-stats-grid { grid-template-columns:repeat(3,1fr); }
  .problems-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 560px) {
  .problems-grid { grid-template-columns:1fr; }
  .profile-stats-grid { grid-template-columns:repeat(3,1fr); }
  .cat-section-header { flex-direction:column; align-items:flex-start; }
  .cat-section-meta { align-items:flex-start; }
  .cat-progress-bar { width:160px; }
  .profile-card { flex-direction:column; align-items:flex-start; }
  .profile-unlock-cta { flex-direction:column; }
  .cprog-track { width:70px; }
  .stats-strip { gap:0.75rem; }
  .stat-chip { padding:0.85rem 1rem; }
  .stat-val { font-size:1.4rem; }
  .modal-card { padding: 1.5rem; }
  .lb-info { flex-direction:column; align-items:flex-start; gap:0.75rem; }
  .lb-score-wrap { align-items: flex-start; width: 100%; min-width: auto; }
  .chat-container { height: 75vh; }
  .chat-msg { max-width: 95%; }
  .lc-stats-card > div:nth-child(2) { flex-direction: column; gap: 0.5rem; }
}

/* ── WIDGETS & DIFFICULTY GROUPS OVERLAY ── */
.dashboard-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .dashboard-widgets {
    grid-template-columns: 1fr;
  }
}

.widget-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.widget-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow);
}
.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.widget-badge {
  font-size: 0.75rem;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent2);
  font-weight: 700;
}
.streak-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ff6b6b;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.daily-title {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.daily-meta {
  display: flex;
  gap: 0.5rem;
}

/* Pomodoro Specific Styles */
.pomodoro-status {
  font-size: 0.75rem;
  color: var(--text2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pomo-display {
  font-size: 2.2rem;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text);
  text-align: center;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text), var(--text2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0.25rem 0;
}
.pomo-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.pomo-btn {
  padding: 0.45rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  outline: none;
}
.pomo-btn.start {
  background: var(--accent);
  color: #fff;
}
.pomo-btn.start:hover {
  background: var(--accent2);
  box-shadow: 0 4px 12px rgba(108, 71, 255, 0.3);
}
.pomo-btn.pause {
  background: var(--amber);
  color: #000;
}
.pomo-btn.pause:hover {
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.pomo-btn.reset {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text2);
}
.pomo-btn.reset:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}
.pomo-quote {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text3);
  text-align: center;
  min-height: 1.1rem;
}

/* Difficulty Sub-Groups inside Categories */
.diff-group-container {
  margin-top: 1.25rem;
  border-top: 1px dashed var(--border);
  padding-top: 1rem;
}
.diff-group-container:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0.5rem;
}
.diff-group-header {
  margin-bottom: 0.75rem;
}
.diff-group-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Enhanced Chat Layout */
.chat-msg-row {
  display: flex;
  gap: 0.75rem;
  max-width: 80%;
  margin-bottom: 1rem;
}
.msg-me {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.msg-other {
  align-self: flex-start;
}
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(108,71,255,0.4);
  object-fit: cover;
  flex-shrink: 0;
}
.chat-msg-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.msg-me .chat-msg-content {
  align-items: flex-end;
}
.chat-sender-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
}
.chat-sender-name {
  font-weight: 600;
  color: var(--text2);
}
.chat-badge {
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--mono);
}
.chat-badge.dev {
  background: rgba(167, 139, 250, 0.15);
  color: var(--accent2);
  border: 1px solid rgba(167,139,250,0.3);
}
.chat-badge.pro {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber);
  border: 1px solid rgba(245,158,11,0.3);
}
.chat-timestamp {
  color: var(--text3);
  font-size: 0.68rem;
  font-family: var(--mono);
}

/* Chat Code Blocks */
.chat-code-block {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin: 0.35rem 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #a78bfa;
  overflow-x: auto;
  max-width: 100%;
}
.chat-inline-code {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent2);
}

/* Reactions Styling */
.reactions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
  align-items: center;
}
.reaction-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s;
  cursor: pointer;
  outline: none;
}
.reaction-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.05);
}
.reaction-btn.user-reacted {
  background: rgba(108, 71, 255, 0.12);
  border-color: var(--accent2);
  color: var(--text);
}
.reaction-add-container {
  position: relative;
  display: inline-block;
}
.reaction-add-btn {
  background: none;
  border: none;
  font-size: 0.8rem;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s;
  outline: none;
}
.reaction-add-btn:hover {
  opacity: 1;
}
.emoji-picker-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 0.35rem;
  display: none;
  gap: 0.4rem;
  box-shadow: var(--shadow);
  z-index: 10;
  margin-bottom: 4px;
}
.emoji-picker-menu.active {
  display: flex;
}
.picker-emoji-option {
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s;
  background: none;
  border: none;
  outline: none;
}
.picker-emoji-option:hover {
  transform: scale(1.25);
}

/* ══════════════════════════════════════════════════
   DSA ROADMAP VIEW
══════════════════════════════════════════════════ */
.roadmap-overall-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  min-width: 200px;
}

.progress-percent {
  font-size: 0.85rem;
  font-family: var(--mono);
  color: var(--accent2);
  font-weight: 600;
}

.progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--green));
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(34, 211, 160, 0.5);
}

.roadmap-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  padding: 1.5rem 0.5rem 3rem 1.5rem;
}

.roadmap-timeline-line {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 35px;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--green), var(--amber));
  border-radius: 3px;
  z-index: 0;
  opacity: 0.4;
}

.roadmap-phase-card {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  animation: slideFadeIn 0.4s ease forwards;
}

.phase-connector {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.phase-node-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg2);
  border: 2px solid var(--accent2);
  color: var(--accent2);
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(108, 71, 255, 0.4);
  transition: transform 0.3s, background 0.3s, color 0.3s;
}

.roadmap-phase-card:hover .phase-node-dot {
  transform: scale(1.15);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 25px rgba(108, 71, 255, 0.7);
}

.phase-content {
  flex: 1;
  background: var(--bg3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border2);
  border-radius: 18px;
  padding: 1.5rem;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.phase-content:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 20px rgba(108, 71, 255, 0.1);
}

.phase-header {
  margin-bottom: 1.1rem;
}

.phase-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}

.phase-tag.easy { background: rgba(34, 211, 160, 0.12); color: var(--green); border: 1px solid rgba(34, 211, 160, 0.3); }
.phase-tag.medium { background: rgba(245, 158, 11, 0.12); color: var(--amber); border: 1px solid rgba(245, 158, 11, 0.3); }
.phase-tag.hard { background: rgba(255, 85, 85, 0.12); color: var(--red); border: 1px solid rgba(255, 85, 85, 0.3); }
.phase-tag.pro { background: rgba(108, 71, 255, 0.15); color: var(--accent2); border: 1px solid rgba(167, 139, 250, 0.3); }

.phase-title {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.phase-desc {
  font-size: 0.9rem;
  color: var(--text2);
  line-height: 1.5;
}

.phase-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

.topic-chip-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.topic-chip-card:hover {
  background: rgba(108, 71, 255, 0.12);
  border-color: var(--accent2);
  transform: translateX(4px);
}

.topic-icon {
  font-size: 1.3rem;
}

.topic-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topic-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.topic-meta {
  font-size: 0.76rem;
  color: var(--text3);
  margin-top: 0.25rem;
  line-height: 1.4;
}

.phase-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.phase-practice-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(108, 71, 255, 0.12);
  color: var(--accent2);
  border: 1px solid rgba(167, 139, 250, 0.25);
}

.phase-goal-box {
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  background: rgba(108, 71, 255, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  font-size: 0.85rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.phase-goal-box strong {
  color: var(--accent2);
}


/* ══════════════════════════════════════════════════
   PUBLIC USER PROFILE MODAL
══════════════════════════════════════════════════ */
.user-profile-modal {
  width: 480px;
  max-width: 92vw;
  padding: 2rem;
  border-radius: 20px;
  background: rgba(19, 19, 32, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border2);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

.user-profile-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.user-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--accent2);
  object-fit: cover;
  background: rgba(108, 71, 255, 0.15);
}

.user-profile-identity {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.user-rank-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent2);
  background: rgba(108, 71, 255, 0.15);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  width: fit-content;
}

.user-profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.profile-stat-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem;
  text-align: center;
}

.profile-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.2rem 0 0.6rem 0;
}

.profile-links-wrap {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.profile-solved-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.solved-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.solved-title {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
}

.solved-diff {
  font-size: 0.72rem;
  font-family: var(--mono);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.solved-diff.diff-easy { color: var(--green); background: rgba(34, 211, 160, 0.15); }
.solved-diff.diff-medium { color: var(--amber); background: rgba(245, 158, 11, 0.15); }
.solved-diff.diff-hard { color: var(--red); background: rgba(255, 85, 85, 0.15); }

/* ══════════════════════════════════════════════════
   SUPPORT MODAL CARD
══════════════════════════════════════════════════ */
.support-card-modal {
  width: 460px;
  max-width: 92vw;
  padding: 2.2rem;
  border-radius: 20px;
  background: rgba(19, 19, 32, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border2);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.support-contact-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
  text-align: left;
}

.support-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border2);
  border-radius: 14px;
  transition: border-color 0.25s, background 0.25s;
}

.support-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent2);
}

.support-icon-wrap {
  font-size: 1.4rem;
}

.support-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.support-label {
  font-size: 0.75rem;
  color: var(--text3);
  font-family: var(--mono);
  text-transform: uppercase;
}

.support-value {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
  word-break: break-all;
}

.support-action-btn {
  padding: 0.45rem 0.85rem;
  background: rgba(108, 71, 255, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 8px;
  color: var(--accent2);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.support-action-btn:hover {
  background: var(--accent);
  color: #ffffff;
}

.support-action-btn.visit {
  background: rgba(34, 211, 160, 0.15);
  border-color: rgba(34, 211, 160, 0.3);
  color: var(--green);
}

.support-action-btn.visit:hover {
  background: var(--green);
  color: #000000;
}

.support-action-btn.visit-linkedin {
  background: rgba(10, 102, 194, 0.18);
  border-color: rgba(10, 102, 194, 0.4);
  color: #0a66c2;
}

.support-action-btn.visit-linkedin:hover {
  background: #0a66c2;
  color: #ffffff;
}

.support-modal-footer {
  margin-top: 1rem;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .roadmap-container {
    padding-left: 0.5rem;
  }
  .roadmap-timeline-line {
    display: none;
  }
  .roadmap-phase-card {
    flex-direction: column;
    gap: 0.8rem;
  }
  .phase-node-dot {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
  .phase-topics-grid {
    grid-template-columns: 1fr;
  }
}

/* ── LIGHT THEME SPECIFIC OVERRIDES ── */
body.light-theme .phase-content {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.light-theme .phase-content:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 30px rgba(108, 71, 255, 0.12);
}

body.light-theme .phase-node-dot {
  background: #ffffff;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(108, 71, 255, 0.2);
}

body.light-theme .roadmap-phase-card:hover .phase-node-dot {
  background: var(--accent);
  color: #ffffff;
}

body.light-theme .topic-chip-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .topic-chip-card:hover {
  background: rgba(108, 71, 255, 0.08);
  border-color: var(--accent);
}

body.light-theme .progress-track {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}

body.light-theme .user-profile-modal,
body.light-theme .support-card-modal {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

body.light-theme .support-item,
body.light-theme .profile-stat-box,
body.light-theme .profile-solved-list {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .solved-item-row {
  background: rgba(0, 0, 0, 0.02);
}

body.light-theme .profile-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}
body.light-theme .profile-name { color: #0f172a; text-shadow: none; }
body.light-theme .profile-email { color: #64748b; }
body.light-theme .pstat {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
body.light-theme .pstat-val {
  background: linear-gradient(135deg, #0f172a 0%, #6c47ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
}
body.light-theme .pstat-lbl { color: #475569; }
body.light-theme .profile-progress-section,
body.light-theme .profile-links-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light-theme .cprog-row {
  background: rgba(241, 245, 249, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light-theme .cprog-label { color: #0f172a; }
body.light-theme .icon-brand-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.light-theme .icon-brand-btn:hover {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.25);
  color: #0f172a;
}

/* ── GUEST MODE VIEW-ONLY BANNER ── */
.guest-mode-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  background: rgba(108, 71, 255, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 14px;
  margin-bottom: 1.25rem;
  color: var(--text);
  font-size: 0.9rem;
  flex-wrap: wrap;
  animation: slideFadeIn 0.3s ease-out;
}

.guest-banner-btn {
  margin-left: auto;
  padding: 0.45rem 0.9rem;
  background: var(--accent);
  color: #ffffff;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.2s, background-color 0.2s;
}

.guest-banner-btn:hover {
  transform: translateY(-2px);
  background: #5b36f2;
}

body.light-theme .guest-mode-banner {
  background: rgba(108, 71, 255, 0.08);
  border-color: rgba(108, 71, 255, 0.25);
  color: #1a1b26;
}

/* ── TOPIC PILLS FILTER BAR ── */
.topic-pills-bar {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.5rem 0.2rem 1.25rem;
  margin-bottom: 1.25rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.topic-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.topic-pill:hover {
  background: rgba(108, 71, 255, 0.1);
  color: var(--text);
  border-color: rgba(167, 139, 250, 0.3);
}

.topic-pill.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(108, 71, 255, 0.35);
  font-weight: 600;
}

/* ── COLLAPSIBLE TOPIC SECTIONS & LEVEL TABS ── */
.cat-section-header {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}

.cat-section-header:hover {
  opacity: 0.92;
}

.cat-toggle-icon {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--text3);
  transition: transform 0.3s ease;
  margin-left: 0.5rem;
}

.cat-section.collapsed .cat-toggle-icon {
  transform: rotate(-90deg);
}

.cat-section.collapsed .cat-body-wrapper {
  display: none;
}

.cat-level-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.cat-level-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cat-level-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.cat-level-btn.active {
  background: rgba(108, 71, 255, 0.18);
  border-color: var(--accent2);
  color: var(--accent2);
  font-weight: 600;
}

.cat-level-btn.easy.active {
  background: rgba(34, 211, 160, 0.18);
  border-color: var(--green);
  color: var(--green);
}

.cat-level-btn.medium.active {
  background: rgba(245, 158, 11, 0.18);
  border-color: var(--amber);
  color: var(--amber);
}

.cat-level-btn.hard.active {
  background: rgba(255, 85, 85, 0.18);
  border-color: var(--red);
  color: var(--red);
}

body.light-theme .topic-pill {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  color: #4a5568;
}

body.light-theme .topic-pill:hover {
  background: rgba(108, 71, 255, 0.08);
  color: #1a1b26;
}

body.light-theme .cat-level-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: #4a5568;
}

/* ══════════════════════════════════════════════════
   VOICE CONNECT & CALLING UI
══════════════════════════════════════════════════ */
.voice-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(108, 71, 255, 0.15) 0%, rgba(34, 211, 160, 0.1) 100%);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(12px);
}

.voice-status-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border2);
}

.online-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.user-call-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: all 0.25s ease;
  position: relative;
}

.user-call-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.user-avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent2);
  background: rgba(108, 71, 255, 0.1);
}

.status-dot-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg3);
}

.status-dot-badge.online {
  background: #22d3a0;
  box-shadow: 0 0 8px #22d3a0;
}

.status-dot-badge.busy {
  background: #ff5555;
  box-shadow: 0 0 8px #ff5555;
}

.status-dot-badge.bot {
  background: #6c47ff;
  box-shadow: 0 0 8px #6c47ff;
}

.user-call-info {
  flex: 1;
  overflow: hidden;
}

.user-call-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-call-meta {
  font-size: 0.78rem;
  color: var(--text2);
  font-family: var(--mono);
}

.btn-call-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #22d3a0 0%, #059669 100%);
  color: #000;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(34, 211, 160, 0.25);
}

.btn-call-action:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(34, 211, 160, 0.4);
}

.btn-call-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-call-action.in-call {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
}

/* Modal Popup Overlays */
.call-overlay-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(9, 9, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease;
}

.call-overlay-modal.active {
  opacity: 1;
  visibility: visible;
}

.call-card-body {
  width: 420px;
  max-width: 95vw;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}

.call-avatar-stage {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 20px;
}

.call-avatar-stage img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent2);
  position: relative;
  z-index: 2;
}

.pulse-ring-wave {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--accent2);
  opacity: 0.7;
  animation: ringPulse 2s infinite ease-out;
  z-index: 1;
}

.pulse-ring-wave.ring-2 {
  animation-delay: 0.6s;
}

@keyframes ringPulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

.call-status-label {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.call-peer-name {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.call-timer-text {
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 16px;
}

.call-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.call-ctl-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: var(--surface2);
  color: var(--text);
}

.call-ctl-btn:hover {
  transform: scale(1.1);
}

.call-ctl-btn.muted {
  background: rgba(255, 85, 85, 0.2);
  color: #ff5555;
  border: 1px solid rgba(255, 85, 85, 0.4);
}

.call-ctl-btn.accept {
  background: #22d3a0;
  color: #000;
  box-shadow: 0 0 20px rgba(34, 211, 160, 0.5);
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
}

.call-ctl-btn.hangup {
  background: #ff5555;
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 85, 85, 0.4);
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
}

.call-visualizer-wrap {
  width: 100%;
  height: 60px;
  margin-top: 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.call-visualizer-canvas {
  width: 100%;
  height: 100%;
}

/* Incoming Banner Popup in App Header */
.incoming-floating-banner {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(19, 19, 32, 0.95);
  border: 1px solid var(--accent2);
  border-radius: 18px;
  padding: 14px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(108, 71, 255, 0.3);
  backdrop-filter: blur(16px);
  animation: slideInDown 0.35s ease forwards;
}

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

body.light-theme .voice-banner {
  background: linear-gradient(135deg, rgba(108, 71, 255, 0.08) 0%, rgba(34, 211, 160, 0.05) 100%);
  border-color: rgba(108, 71, 255, 0.15);
}

body.light-theme .call-card-body {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* ══════════════════════════════════════════════════
   BUTTON LOADING ANIMATION
══════════════════════════════════════════════════ */
.auth-btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: authSpin 0.7s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes authSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.btn-primary.btn-loading,
.btn-google.btn-loading,
.btn-guest.btn-loading {
  opacity: 0.85;
  cursor: wait;
  pointer-events: none;
  box-shadow: none;
}

/* ══════════════════════════════════════════════════
   SEO POPUP MODAL STYLES
══════════════════════════════════════════════════ */
.seo-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 20, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
  padding: 20px;
}

.seo-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.seo-popup-overlay.closing {
  opacity: 0;
  visibility: hidden;
}

.seo-popup-card {
  position: relative;
  max-width: 650px;
  width: 100%;
  background: rgba(18, 18, 30, 0.95);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(108, 71, 255, 0.25);
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.seo-popup-overlay.active .seo-popup-card {
  transform: scale(1) translateY(0);
}

.seo-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.seo-popup-close:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: #ef4444;
  transform: rotate(90deg) scale(1.1);
}

.seo-popup-card img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}

/* ══════════════════════════════════════════════════
   PLACEMENT & CS CORE RESOURCE HUB STYLES
   ══════════════════════════════════════════════════ */
.roadmap-next-banner {
  margin-top: 36px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(108, 71, 255, 0.15) 0%, rgba(34, 211, 160, 0.1) 100%);
  border: 1px solid rgba(108, 71, 255, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.roadmap-next-banner .banner-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(108, 71, 255, 0.2);
  color: var(--accent2);
  font-size: 0.78rem;
  font-weight: 600;
}

.placement-tabs-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.placement-tab-btn {
  padding: 9px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  color: var(--text2);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.placement-tab-btn:hover,
.placement-tab-btn.active {
  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(108, 71, 255, 0.35);
  transform: translateY(-1px);
}

.placement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 24px;
  align-items: stretch;
}

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

.placement-card-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(12px);
}

.placement-card-box:hover {
  border-color: rgba(108, 71, 255, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 20px rgba(108, 71, 255, 0.15);
  transform: translateY(-3px);
}

.pcard-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.pcard-icon {
  font-size: 2.2rem;
  padding: 12px;
  background: rgba(108, 71, 255, 0.1);
  border: 1px solid rgba(108, 71, 255, 0.2);
  border-radius: var(--radius);
  flex-shrink: 0;
}

.pcard-badge-count {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(34, 211, 160, 0.12);
  color: var(--green);
  border: 1px solid rgba(34, 211, 160, 0.3);
  margin-bottom: 4px;
}

.pcard-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}

.pcard-desc {
  font-size: 0.85rem;
  color: var(--text2);
  line-height: 1.45;
}

.pcard-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.plink-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.plink-item:hover {
  background: rgba(108, 71, 255, 0.08);
  border-color: var(--accent2);
  transform: translateX(4px);
}

.plink-badge {
  min-width: 105px;
  max-width: 105px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* Color Coded Badges */
.badge-soft { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-store { background: rgba(34, 211, 160, 0.15); color: #22d3a0; border: 1px solid rgba(34, 211, 160, 0.3); }
.badge-template { background: rgba(96, 165, 250, 0.15); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.3); }
.badge-tool { background: rgba(167, 139, 250, 0.15); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.3); }
.badge-mock { background: rgba(236, 72, 153, 0.15); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.3); }
.badge-gfg { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }
.badge-sheet { background: rgba(108, 71, 255, 0.15); color: #8b5cf6; border: 1px solid rgba(108, 71, 255, 0.3); }
.badge-quant { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-logic { background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }
.badge-practice { background: rgba(20, 184, 166, 0.15); color: #14b8a6; border: 1px solid rgba(20, 184, 166, 0.3); }
.badge-dbms { background: rgba(249, 115, 22, 0.15); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.3); }
.badge-os { background: rgba(6, 182, 212, 0.15); color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.3); }
.badge-cn { background: rgba(99, 102, 241, 0.15); color: #6366f1; border: 1px solid rgba(99, 102, 241, 0.3); }
.badge-hld { background: rgba(234, 179, 8, 0.15); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.3); }
.badge-sql { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; border: 1px solid rgba(14, 165, 233, 0.3); }
.badge-oops { background: rgba(219, 39, 119, 0.15); color: #db2777; border: 1px solid rgba(219, 39, 119, 0.3); }
.badge-yt { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.badge-java { background: rgba(249, 115, 22, 0.15); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.3); }
.badge-hr { background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }

.plink-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.plink-info strong {
  font-size: 0.92rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plink-info span {
  font-size: 0.78rem;
  color: var(--text2);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plink-arrow {
  font-size: 1.1rem;
  color: var(--text3);
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.plink-item:hover .plink-arrow {
  color: var(--accent2);
  transform: translate(2px, -2px);
}

/* ══════════════════════════════════════════════════
   PREMIUM BADGE (SIDEBAR ABOVE LOGOUT & PROFILE)
══════════════════════════════════════════════════ */
.premium-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 14px 14px 14px;
  padding: 10px 18px;
  border-radius: 20px;
  font-family: var(--display), 'Satoshi', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid #fbbf24;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45);
  cursor: default;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.premium-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.65);
}

.premium-star {
  font-size: 1.15rem;
  display: inline-block;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.premium-text-sparkle {
  color: #ffffff !important;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -webkit-text-fill-color: initial !important;
  background: none !important;
}

/* ── INSPECT / DEVTOOLS LOCK TOGGLE ── */
.inspect-lock-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid rgba(108, 71, 255, 0.3);
  margin-top: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: 0.3s ease;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: 0.3s ease;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.toggle-switch input:checked + .toggle-slider {
  background-color: #6c47ff;
  border-color: #a78bfa;
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* ==========================================================================
   DEVELOPER PROFILES & EDIT LINKS MODAL UI/UX ENHANCEMENTS
   ========================================================================== */

/* Enhanced Modal Card for Developer Links */
.dev-modal-card {
  max-width: 500px;
  width: 92%;
  padding: 28px 30px;
  background: var(--card-bg, rgba(20, 22, 34, 0.96));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(108, 71, 255, 0.15);
  position: relative;
}

.modal-header-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.modal-icon-glow {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(108, 71, 255, 0.25), rgba(34, 211, 160, 0.25));
  border: 1px solid rgba(108, 71, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent2, #a78bfa);
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(108, 71, 255, 0.2);
}

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

.field-label-custom {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-logo-svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.input-with-icon {
  display: flex;
  align-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.input-with-icon:focus-within {
  border-color: var(--accent, #6c47ff);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(108, 71, 255, 0.2);
}

.input-icon-prefix {
  padding-left: 14px;
  font-size: 0.82rem;
  color: var(--text3, #888);
  font-family: var(--font-mono, monospace);
  user-select: none;
  white-space: nowrap;
}

.field-input-custom {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
}

.field-input-custom::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.88rem;
}

.field-hint {
  font-size: 0.78rem;
  color: var(--text3, #888);
  margin-top: 2px;
}

.field-hint code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent2, #a78bfa);
}

.modal-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-secondary {
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text2, #ccc);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

/* Branded Developer Profile Cards Display */
.dev-profile-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.dev-profile-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.dev-profile-card-item:hover {
  transform: translateY(-2px);
}

.dev-profile-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dev-brand-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dev-profile-meta {
  display: flex;
  flex-direction: column;
}

.dev-platform-title {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
}

.dev-profile-handle {
  font-size: 0.78rem;
  opacity: 0.8;
}

.dev-profile-arrow {
  font-size: 0.9rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.dev-profile-card-item:hover .dev-profile-arrow {
  transform: translateX(3px) translateY(-3px);
}

/* Brand Specific Colors */
.card-leetcode {
  background: rgba(255, 161, 22, 0.08);
  border: 1px solid rgba(255, 161, 22, 0.25);
  color: #ffa116;
}
.card-leetcode:hover {
  background: rgba(255, 161, 22, 0.15);
  border-color: rgba(255, 161, 22, 0.45);
  box-shadow: 0 4px 15px rgba(255, 161, 22, 0.15);
}
.card-leetcode .dev-brand-badge {
  background: rgba(255, 161, 22, 0.15);
}

.card-gfg {
  background: rgba(47, 141, 70, 0.1);
  border: 1px solid rgba(47, 141, 70, 0.3);
  color: #2F8D46;
}
.card-gfg:hover {
  background: rgba(47, 141, 70, 0.18);
  border-color: rgba(47, 141, 70, 0.5);
  box-shadow: 0 4px 15px rgba(47, 141, 70, 0.18);
}
.card-gfg .dev-brand-badge {
  background: rgba(47, 141, 70, 0.15);
}

.card-github {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
}
.card-github:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}
.card-github .dev-brand-badge {
  background: rgba(255, 255, 255, 0.1);
}

/* Light Mode Overrides */
body.light-theme .dev-modal-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
body.light-theme .input-with-icon {
  background: #f4f5f8;
  border-color: #e1e4ea;
}
body.light-theme .input-with-icon:focus-within {
  border-color: #6c47ff;
  background: #ffffff;
}
body.light-theme .field-input-custom {
  color: #1a1d24;
}
body.light-theme .field-input-custom::placeholder {
  color: #8c93a4;
}
body.light-theme .btn-secondary {
  background: #eef0f5;
  border-color: #d8dce6;
  color: #4b5563;
}
body.light-theme .btn-secondary:hover {
  background: #e2e6f0;
  color: #111827;
}
/* ==========================================================================
   PREMIUM BADGE LUXURY STYLING
   ========================================================================== */
.premium-badge-glow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 30px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #fbbf24 100%);
  background-size: 200% 200%;
  animation: goldShimmer 3s ease infinite;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  vertical-align: middle;
}

.premium-badge-glow .crown-icon {
  font-size: 0.95rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

@keyframes goldShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ==========================================================================
   ICON-ONLY BRAND BUTTONS BELOW LEETCODE STAT CARD
   ========================================================================== */
.dev-icons-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.icon-brand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.icon-brand-btn:hover {
  transform: translateY(-3px) scale(1.03);
}

/* LeetCode Button */
.icon-btn-leetcode {
  background: rgba(255, 161, 22, 0.12);
  border: 1px solid rgba(255, 161, 22, 0.35);
  color: #ffa116;
}
.icon-btn-leetcode:hover {
  background: rgba(255, 161, 22, 0.22);
  border-color: #ffa116;
  box-shadow: 0 4px 18px rgba(255, 161, 22, 0.35);
}

/* GeeksforGeeks Button */
.icon-btn-gfg {
  background: rgba(47, 141, 70, 0.12);
  border: 1px solid rgba(47, 141, 70, 0.35);
  color: #2F8D46;
}
.icon-btn-gfg:hover {
  background: rgba(47, 141, 70, 0.22);
  border-color: #2F8D46;
  box-shadow: 0 4px 18px rgba(47, 141, 70, 0.35);
}

/* GitHub Button */
.icon-btn-github {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.icon-btn-github:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.2);
}

body.light-theme .icon-btn-github {
  background: #f0f2f5;
  border-color: #d1d5db;
  color: #111827;
}
body.light-theme .icon-btn-github:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

/* ==========================================================================
   EXECUTIVE DASHBOARD UI/UX REDESIGN
   ========================================================================== */

/* Hero Executive Header */
.dash-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 1rem;
}

.dash-greeting-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(108, 71, 255, 0.1);
  border: 1px solid rgba(108, 71, 255, 0.25);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent2, #a78bfa);
  margin-bottom: 8px;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22d3a0;
  box-shadow: 0 0 10px #22d3a0;
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 211, 160, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(34, 211, 160, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 211, 160, 0); }
}

.dash-hero-title {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
}

.dash-hero-sub {
  font-size: 0.92rem;
  color: var(--text2, #a0aec0);
  margin-top: 6px;
}

/* Executive Metrics Grid */
.executive-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.metric-card {
  background: var(--card-bg, rgba(20, 22, 34, 0.6));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.metric-card:hover {
  transform: translateY(-4px);
  border-color: rgba(108, 71, 255, 0.3);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25), 0 0 20px rgba(108, 71, 255, 0.1);
}

.metric-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(108, 71, 255, 0.12);
  border: 1px solid rgba(108, 71, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent2, #a78bfa);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.card-solved .metric-icon-box {
  background: rgba(34, 211, 160, 0.12);
  border-color: rgba(34, 211, 160, 0.25);
  color: #22d3a0;
}

.card-streak .metric-icon-box {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}

.metric-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3, #888);
}

.metric-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.metric-val {
  font-family: var(--font-mono, monospace);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.metric-sub {
  font-size: 0.8rem;
  font-weight: 700;
  color: #22d3a0;
  background: rgba(34, 211, 160, 0.12);
  padding: 2px 8px;
  border-radius: 10px;
}

.metric-pill {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent2, #a78bfa);
  background: rgba(108, 71, 255, 0.12);
  padding: 2px 8px;
  border-radius: 10px;
}

.streak-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  padding: 3px 10px;
  border-radius: 12px;
  width: fit-content;
}

.metric-progress-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}

.metric-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22d3a0, #059669);
  border-radius: 4px;
  transition: width 0.8s ease;
}

.completion-fill {
  background: linear-gradient(90deg, #6c47ff, #a78bfa);
}

/* Dashboard Workspace Grid (Widgets) */
.dash-workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.dash-card {
  background: var(--card-bg, rgba(20, 22, 34, 0.6));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
  position: relative;
}

.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.card-header-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 6px;
}

.challenge-badge {
  background: rgba(108, 71, 255, 0.15);
  color: var(--accent2, #a78bfa);
  border: 1px solid rgba(108, 71, 255, 0.3);
}

.pomo-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.daily-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin: 4px 0 0 0;
}

.daily-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.meta-estimate {
  font-size: 0.8rem;
  color: var(--text3, #888);
}

.challenge-btn {
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

/* Pomodoro Workspace Styling */
.pomo-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
}

.pomo-display-circle {
  padding: 12px 24px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.pomo-display {
  font-family: var(--font-mono, monospace);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text);
}

.pomo-controls {
  display: flex;
  gap: 8px;
}

.pomo-btn {
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  border: none;
}

.pomo-btn.start {
  background: #6c47ff;
  color: #fff;
  box-shadow: 0 4px 14px rgba(108, 71, 255, 0.3);
}

.pomo-btn.start:hover {
  background: #7c5cff;
  transform: translateY(-2px);
}

.pomo-btn.reset {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text2);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.pomo-btn.reset:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text);
}

.pomo-quote {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text3, #888);
  margin-top: 8px;
}

/* Search & Filter Toolbar */
.search-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--card-bg, rgba(20, 22, 34, 0.6));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 10px 16px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.search-input-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 240px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 8px 14px;
  transition: all 0.25s ease;
}

.search-input-box:focus-within {
  border-color: var(--accent, #6c47ff);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(108, 71, 255, 0.2);
}

.search-icon-svg {
  color: var(--text3, #888);
  flex-shrink: 0;
}

.search-input-field {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
}

.search-input-field::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search-shortcut-hint {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text3, #888);
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-dropdowns-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.custom-select-wrapper {
  position: relative;
}

.filter-select-custom {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 32px 8px 14px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  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='%23a78bfa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.filter-select-custom:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(108, 71, 255, 0.4);
}

.filter-select-custom option {
  background: #141622;
  color: #fff;
}

/* Light Mode Overrides */
body.light-theme .metric-card,
body.light-theme .dash-card,
body.light-theme .search-filter-toolbar {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

body.light-theme .dash-hero-title {
  color: #111827;
}

body.light-theme .metric-val {
  color: #111827;
}

body.light-theme .search-input-box,
body.light-theme .filter-select-custom,
body.light-theme .pomo-display-circle {
  background: #f4f5f8;
  border-color: #e1e4ea;
  color: #111827;
}

body.light-theme .filter-select-custom option {
  background: #ffffff;
  color: #111827;
}

/* Branded Platform Icon Badges for Problems */
.badge-icon-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.badge-lc-icon {
  background: rgba(255, 161, 22, 0.12);
  border: 1px solid rgba(255, 161, 22, 0.3);
  color: #ffa116;
}

.badge-gfg-icon {
  background: rgba(47, 141, 70, 0.12);
  border: 1px solid rgba(47, 141, 70, 0.3);
  color: #2F8D46;
}

.brand-img-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}

.badge-icon-brand:hover {
  transform: scale(1.1);
}