/* ============================================
   MADHAV GULLAK — Student Portal Styles
   Extends the main design system (style.css)
   ============================================ */

/* ── Portal Layout ── */
.gullak-layout {
  display: flex;
  min-height: 100vh;
  padding-top: 70px;
}

/* ── Sidebar Navigation ── */
.gullak-sidebar {
  width: 260px;
  min-height: calc(100vh - 70px);
  background: var(--clay-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 70px;
  left: 0;
  z-index: 100;
  padding: var(--space-lg) 0;
  transition: transform var(--transition-normal);
  overflow-y: auto;
}

.sidebar-profile {
  text-align: center;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: var(--space-md);
}

.sidebar-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto var(--space-sm);
  box-shadow: 0 4px 15px var(--primary-glow);
  border: 3px solid rgba(255, 255, 255, 0.1);
}

.sidebar-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.sidebar-level {
  font-size: 0.78rem;
  color: var(--primary-light);
  font-weight: 600;
  margin-top: 2px;
}

.sidebar-points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 111, 0, 0.12);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 700;
  margin-top: var(--space-xs);
}

.sidebar-nav {
  padding: 0 var(--space-sm);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem var(--space-lg);
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 12px;
  transition: all var(--transition-fast);
  margin-bottom: 2px;
  text-decoration: none;
}

.sidebar-link:hover {
  color: var(--primary-light);
  background: rgba(255, 111, 0, 0.08);
}

.sidebar-link.active {
  color: var(--primary-light);
  background: rgba(255, 111, 0, 0.12);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}

.sidebar-link .link-icon {
  font-size: 1.15rem;
  width: 28px;
  text-align: center;
}

.sidebar-link .link-badge {
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}

.sidebar-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: var(--space-md) var(--space-lg) var(--space-xs);
}

/* Sidebar toggle for mobile */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 80px;
  left: 12px;
  z-index: 150;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--clay-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--clay-shadow-outer);
  color: var(--text-primary);
  font-size: 1.3rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ── Main Content Area ── */
.gullak-main {
  flex: 1;
  margin-left: 260px;
  padding: var(--space-xl) var(--space-2xl);
  max-width: 100%;
  min-height: calc(100vh - 70px);
}

/* ── Dashboard ── */
.welcome-banner {
  background: linear-gradient(135deg, rgba(255, 111, 0, 0.15) 0%, rgba(255, 213, 79, 0.08) 100%);
  border: 1px solid rgba(255, 111, 0, 0.2);
  border-radius: var(--clay-radius-lg);
  padding: var(--space-2xl) var(--space-2xl);
  margin-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.welcome-banner::before {
  content: '🎵';
  position: absolute;
  top: -10px;
  right: 20px;
  font-size: 6rem;
  opacity: 0.08;
}

.welcome-banner h1 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: var(--space-xs);
}

.welcome-banner h1 .highlight {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-banner p {
  font-size: 0.95rem;
}

.welcome-date {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Today's Thought */
.thought-panel {
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
  text-align: center;
  position: relative;
}

.thought-panel .thought-icon {
  font-size: 1.8rem;
  margin-bottom: var(--space-xs);
}

.thought-panel blockquote {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.thought-panel .thought-author {
  font-size: 0.82rem;
  color: var(--primary-light);
  margin-top: var(--space-xs);
  font-weight: 600;
}

/* Quick Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.stat-card {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.stat-card .stat-icon {
  font-size: 1.8rem;
  margin-bottom: var(--space-xs);
  display: block;
}

.stat-card .stat-value {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-card .stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.stat-card:nth-child(1) .stat-value { color: var(--accent); }
.stat-card:nth-child(2) .stat-value { color: var(--primary-light); }
.stat-card:nth-child(3) .stat-value { color: #4fc3f7; }
.stat-card:nth-child(4) .stat-value { color: #81c784; }

/* Quick Links Grid */
.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.quick-link-card {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.quick-link-card:hover {
  transform: translateY(-5px);
}

.quick-link-card .ql-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
  display: block;
}

.quick-link-card .ql-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary);
}

/* MadhavTV Section */
.madhavtv-section {
  margin-bottom: var(--space-xl);
}

.madhavtv-section h3 {
  margin-bottom: var(--space-md);
}

.video-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  max-width: 720px;
  background: var(--bg-card);
  border-radius: var(--clay-radius);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 3rem;
  color: var(--text-muted);
  overflow: hidden;
}

.video-placeholder iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--clay-radius);
}

/* Recent Results */
.recent-results h3 {
  margin-bottom: var(--space-md);
}

.result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

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

.result-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.result-date {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.result-score {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}

.result-score.positive { color: #81c784; }
.result-score.negative { color: #ef5350; }

/* Login Card */
.login-container {
  max-width: 460px;
  margin: 120px auto;
  padding: 0 var(--space-lg);
}

.login-card {
  padding: var(--space-2xl);
}

.login-card h2 {
  text-align: center;
  margin-bottom: var(--space-xs);
}

.login-card .login-subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

.login-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: var(--space-xl);
}

.login-tab {
  flex: 1;
  padding: 0.6rem;
  text-align: center;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--transition-fast);
  border: none;
  background: transparent;
  font-family: var(--font-heading);
}

.login-tab.active {
  background: var(--primary);
  color: #fff;
}


/* ══════════════════════════════════
   QUIZ PAGE
   ══════════════════════════════════ */

.quiz-container {
  max-width: 720px;
  margin: 0 auto;
}

.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.quiz-progress-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-secondary);
}

.quiz-progress-text .current-q {
  color: var(--primary-light);
  font-size: 1.3rem;
}

.quiz-score-display {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
}

/* Circular Timer */
.timer-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.timer-circle {
  position: relative;
  width: 100px;
  height: 100px;
}

.timer-circle svg {
  transform: rotate(-90deg);
  width: 100px;
  height: 100px;
}

.timer-circle .timer-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 6;
}

.timer-circle .timer-progress {
  fill: none;
  stroke: var(--primary);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 282.74;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}

.timer-circle .timer-progress.warning {
  stroke: #ff9800;
}

.timer-circle .timer-progress.danger {
  stroke: #ef5350;
}

.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* Question */
.question-card {
  padding: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.question-category {
  display: inline-block;
  background: rgba(255, 111, 0, 0.12);
  color: var(--primary-light);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.question-text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}

/* Options */
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.option-btn {
  padding: var(--space-lg) var(--space-xl);
  text-align: left;
  cursor: pointer;
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  position: relative;
}

.option-btn:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.option-btn .option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 111, 0, 0.12);
  color: var(--primary-light);
  font-weight: 700;
  font-size: 0.85rem;
  margin-right: var(--space-sm);
  flex-shrink: 0;
}

.option-btn.correct {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.12) !important;
  pointer-events: none;
}

.option-btn.correct .option-letter {
  background: #4caf50;
  color: #fff;
}

.option-btn.wrong {
  border-color: #ef5350;
  background: rgba(239, 83, 80, 0.12) !important;
  pointer-events: none;
}

.option-btn.wrong .option-letter {
  background: #ef5350;
  color: #fff;
}

.option-btn.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Anti-cheat Warning */
.anticheat-warning {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #ef5350, #c62828);
  color: #fff;
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 2000;
  box-shadow: 0 4px 20px rgba(239, 83, 80, 0.4);
  animation: slideDown 0.3s ease;
}

.anticheat-warning.show {
  display: block;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Quiz Review */
.review-section {
  display: none;
}

.review-section.active {
  display: block;
}

.review-summary {
  text-align: center;
  padding: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.review-score-big {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.review-score-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.review-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.review-stat {
  text-align: center;
}

.review-stat .rs-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
}

.review-stat .rs-value.green { color: #81c784; }
.review-stat .rs-value.red { color: #ef5350; }
.review-stat .rs-value.yellow { color: #ffd54f; }

.review-stat .rs-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Review Question Items */
.review-question {
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  border-left: 4px solid var(--glass-border);
}

.review-question.correct-q {
  border-left-color: #4caf50;
}

.review-question.wrong-q {
  border-left-color: #ef5350;
}

.review-question.timeout-q {
  border-left-color: #ffd54f;
}

.review-question .rq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.review-question .rq-number {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.review-question .rq-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}

.review-question .rq-badge.correct-badge {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
}

.review-question .rq-badge.wrong-badge {
  background: rgba(239, 83, 80, 0.15);
  color: #ef5350;
}

.review-question .rq-badge.timeout-badge {
  background: rgba(255, 213, 79, 0.15);
  color: #ffd54f;
}

.review-question .rq-text {
  font-weight: 600;
  margin-bottom: var(--space-sm);
  font-size: 0.95rem;
}

.review-question .rq-answer {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.review-question .rq-answer strong {
  color: #81c784;
}


/* ══════════════════════════════════
   LEADERBOARD
   ══════════════════════════════════ */

.leaderboard-container {
  max-width: 900px;
  margin: 0 auto;
}

/* Top 3 Podium */
.podium-section {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  padding: var(--space-xl) 0;
}

.podium-card {
  text-align: center;
  padding: var(--space-lg);
  border-radius: var(--clay-radius);
  width: 180px;
  position: relative;
}

.podium-card.gold {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%);
  border: 1px solid rgba(255, 215, 0, 0.25);
  order: 2;
  transform: translateY(-20px);
}

.podium-card.silver {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.12) 0%, rgba(158, 158, 158, 0.05) 100%);
  border: 1px solid rgba(192, 192, 192, 0.2);
  order: 1;
}

.podium-card.bronze {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.12) 0%, rgba(205, 127, 50, 0.05) 100%);
  border: 1px solid rgba(205, 127, 50, 0.2);
  order: 3;
}

.podium-rank {
  font-size: 2.5rem;
  margin-bottom: var(--space-xs);
}

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

.podium-points {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.podium-card.gold .podium-points { color: #FFD700; }
.podium-card.silver .podium-points { color: #C0C0C0; }
.podium-card.bronze .podium-points { color: #CD7F32; }

.podium-badge {
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 600;
}

/* Leaderboard Table */
.leaderboard-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-xl);
}

.leaderboard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}

.leaderboard-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
}

.leaderboard-table td {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  color: var(--text-secondary);
  vertical-align: middle;
}

.leaderboard-table tr.lb-row {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  transition: all var(--transition-fast);
}

.leaderboard-table tr.lb-row:hover {
  background: rgba(255, 111, 0, 0.05);
}

.leaderboard-table tr.lb-row td:first-child {
  border-radius: 12px 0 0 12px;
}

.leaderboard-table tr.lb-row td:last-child {
  border-radius: 0 12px 12px 0;
}

/* Rank highlights */
.leaderboard-table tr.rank-gold {
  background: rgba(255, 215, 0, 0.06);
}
.leaderboard-table tr.rank-gold td { color: #FFD700; }

.leaderboard-table tr.rank-silver {
  background: rgba(192, 192, 192, 0.06);
}
.leaderboard-table tr.rank-silver td { color: #C0C0C0; }

.leaderboard-table tr.rank-bronze {
  background: rgba(205, 127, 50, 0.06);
}
.leaderboard-table tr.rank-bronze td { color: #CD7F32; }

.leaderboard-table tr.current-user {
  background: rgba(255, 111, 0, 0.1);
  border: 1px solid rgba(255, 111, 0, 0.3);
}
.leaderboard-table tr.current-user td {
  color: var(--primary-light);
  font-weight: 600;
}

.lb-rank {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
}

.lb-name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.lb-points {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent) !important;
}

.lb-accuracy {
  font-weight: 600;
}

.lb-badge {
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-block;
}

.lb-badge.maestro { background: rgba(255, 215, 0, 0.15); color: #FFD700; }
.lb-badge.virtuoso { background: rgba(192, 192, 192, 0.15); color: #b0bec5; }
.lb-badge.performer { background: rgba(255, 111, 0, 0.15); color: var(--primary-light); }
.lb-badge.student { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); }

/* Referral Section */
.referral-section {
  padding: var(--space-xl);
  text-align: center;
}

.referral-section h3 {
  margin-bottom: var(--space-md);
}

.referral-code {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255, 111, 0, 0.1);
  border: 2px dashed rgba(255, 111, 0, 0.3);
  padding: var(--space-md) var(--space-xl);
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary-light);
  letter-spacing: 3px;
  margin-bottom: var(--space-lg);
}

.referral-code .copy-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0;
  transition: all var(--transition-fast);
}

.referral-code .copy-btn:hover {
  background: var(--primary-light);
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: #fff;
}

.share-btn.whatsapp { background: #25d366; }
.share-btn.telegram { background: #0088cc; }
.share-btn.copy-link { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--glass-border); }
.share-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }


/* ══════════════════════════════════
   RIYAZ TOOLS
   ══════════════════════════════════ */

.riyaz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
}

.riyaz-tool-card {
  padding: var(--space-2xl);
}

.riyaz-tool-card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  font-size: 1.2rem;
}

.riyaz-tool-card h3 .tool-emoji {
  font-size: 1.5rem;
}

.tool-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tool-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.tool-row label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 80px;
}

.tool-select {
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  outline: none;
}

.tool-select:focus {
  border-color: var(--primary);
}

.tool-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 160px;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  outline: none;
}

.tool-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 0 2px 8px var(--primary-glow);
}

.tool-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px var(--primary-glow);
}

.tool-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--clay-radius-sm);
  border: none;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 140px;
}

.tool-play-btn.play {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 4px 15px var(--primary-glow);
}

.tool-play-btn.play:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px var(--primary-glow);
}

.tool-play-btn.stop {
  background: linear-gradient(135deg, #ef5350, #c62828);
  color: #fff;
  box-shadow: 0 4px 15px rgba(239, 83, 80, 0.3);
}

.tool-play-btn.stop:hover {
  transform: translateY(-2px);
}

.tool-value-display {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 40px;
}

/* BPM Input */
.bpm-input {
  width: 80px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  outline: none;
}

.bpm-input:focus {
  border-color: var(--primary);
}

/* Beat Indicator */
.beat-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid var(--glass-border);
  font-size: 1.4rem;
  transition: all 0.08s ease;
}

.beat-indicator.active {
  background: rgba(255, 111, 0, 0.3);
  border-color: var(--primary);
  transform: scale(1.15);
  box-shadow: 0 0 25px var(--primary-glow);
}

/* Taal Beat Grid */
.taal-beats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-md);
}

.taal-beat {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.1s ease;
}

.taal-beat.sam {
  border-color: rgba(255, 111, 0, 0.4);
  color: var(--primary-light);
}

.taal-beat.khali {
  border-color: rgba(255, 213, 79, 0.3);
  color: var(--accent);
}

.taal-beat.active {
  background: rgba(255, 111, 0, 0.3);
  border-color: var(--primary);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 15px rgba(255, 111, 0, 0.25);
}

.taal-info {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: var(--space-sm);
}


/* ══════════════════════════════════
   LIBRARY
   ══════════════════════════════════ */

.library-container {
  max-width: 960px;
  margin: 0 auto;
}

.library-search {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.library-search .search-input {
  flex: 1;
  min-width: 200px;
  padding: 0.8rem var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--clay-radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
}

.library-search .search-input:focus {
  border-color: var(--primary);
}

.library-filters {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.filter-select {
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;
}

.filter-select:focus {
  border-color: var(--primary);
}

.library-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.library-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  gap: var(--space-md);
  flex-wrap: wrap;
}

.library-item:hover {
  transform: translateY(-2px);
}

.lib-item-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  min-width: 200px;
}

.lib-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 111, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.lib-item-details h4 {
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.lib-item-details p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.lib-item-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lib-tag {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

.lib-tag.raag { background: rgba(156, 39, 176, 0.15); color: #ce93d8; }
.lib-tag.taal { background: rgba(33, 150, 243, 0.15); color: #64b5f6; }
.lib-tag.level-foundation { background: rgba(76, 175, 80, 0.15); color: #81c784; }
.lib-tag.level-intermediate { background: rgba(255, 152, 0, 0.15); color: #ffb74d; }
.lib-tag.level-advanced { background: rgba(244, 67, 54, 0.15); color: #ef5350; }
.lib-tag.type { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); }

.lib-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.lib-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--primary-glow);
}

/* Madhav Diary */
.diary-section {
  padding: var(--space-2xl);
}

.diary-section h3 {
  margin-bottom: var(--space-md);
}

.diary-textarea {
  width: 100%;
  min-height: 180px;
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--clay-radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  resize: vertical;
  outline: none;
}

.diary-textarea:focus {
  border-color: var(--primary);
}

.diary-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-md);
}

.diary-saved {
  font-size: 0.82rem;
  color: #81c784;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.diary-saved.show {
  opacity: 1;
}


/* ══════════════════════════════════
   PAGE TITLE BAR
   ══════════════════════════════════ */

.page-title-bar {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--glass-border);
}

.page-title-bar h1 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: var(--space-xs);
}

.page-title-bar h1 .highlight {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-title-bar p {
  font-size: 0.9rem;
}


/* ══════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════ */

@media (max-width: 1024px) {
  .gullak-main {
    padding: var(--space-lg);
  }
}

@media (max-width: 768px) {
  .gullak-sidebar {
    transform: translateX(-100%);
    width: 280px;
    z-index: 500;
  }

  .gullak-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: flex;
  }

  .gullak-main {
    margin-left: 0;
    padding: var(--space-md);
    padding-top: var(--space-xl);
  }

  .options-grid {
    grid-template-columns: 1fr;
  }

  .podium-section {
    flex-direction: column;
    align-items: center;
  }

  .podium-card {
    width: 100%;
    max-width: 250px;
  }

  .podium-card.gold {
    transform: none;
    order: 1;
  }

  .podium-card.silver {
    order: 2;
  }

  .podium-card.bronze {
    order: 3;
  }

  .riyaz-grid {
    grid-template-columns: 1fr;
  }

  .quick-links-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .welcome-banner {
    padding: var(--space-lg);
  }

  .referral-code {
    font-size: 1rem;
    letter-spacing: 2px;
    padding: var(--space-sm) var(--space-md);
  }
}

@media (max-width: 480px) {
  .quick-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .timer-circle {
    width: 80px;
    height: 80px;
  }

  .timer-circle svg {
    width: 80px;
    height: 80px;
  }

  .timer-text {
    font-size: 1.4rem;
  }

  .question-text {
    font-size: 1.05rem;
  }

  .leaderboard-table {
    font-size: 0.82rem;
  }

  .taal-beat {
    width: 34px;
    height: 34px;
    font-size: 0.72rem;
  }
}

/* ── Sidebar Overlay (mobile) ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 400;
}

.sidebar-overlay.show {
  display: block;
}