/* css/tabs.css — Tutor, Test, Progress tabs */

/* ════════════════════════════════════════════════
   SHARED
   ════════════════════════════════════════════════ */
.tutor-tab,
.test-tab,
.prog-tab {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tutor-scroll,
.test-scroll,
.prog-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px 96px;
}

/* ════════════════════════════════════════════════
   TUTOR TAB
   ════════════════════════════════════════════════ */
.tutor-greeting {
  font-family: 'Sora', sans-serif;
  font-size: 22px; font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.tutor-subhead {
  font-size: 15px; color: var(--muted);
  margin-bottom: 22px;
}

.tutor-card {
  border-radius: 22px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tutor-card:hover { transform: translateY(-2px); }
.tutor-card:active { transform: translateY(0); }

/* White card */
.tc-white {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  backdrop-filter: blur(10px);
}

.tc-white:hover { background: rgba(255,255,255,0.12); }

.tc-icon-box {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.tc-text { flex: 1; }

.tc-title {
  font-family: 'Sora', sans-serif;
  font-size: 16px; font-weight: 700;
  margin-bottom: 4px;
}

.tc-desc {
  font-size: 12px; color: var(--muted); line-height: 1.5;
}

.tc-arrow {
  width: 34px; height: 34px;
  background: rgba(74,128,240,0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Gradient card */
.tc-gradient {
  background: linear-gradient(135deg, #6C63FF, #9B59B6, #B06AB3);
  padding: 18px;
  box-shadow: 0 10px 32px rgba(108,99,255,0.4);
}

.tc-grad-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}

.tc-icon-glass {
  background: rgba(255,255,255,0.2) !important;
}

.tc-grad-title {
  font-family: 'Sora', sans-serif;
  font-size: 18px; font-weight: 700;
  color: #fff; flex: 1;
}

.tc-arrow-glass {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; line-height: 1;
  flex-shrink: 0;
}

.tc-live-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}

.tc-live-badge {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px; font-weight: 700; color: #fff;
}

.tc-live-now  { background: #FF4757; }
.tc-live-quiet { background: rgba(255,255,255,0.2); }

.tc-live-count {
  font-size: 13px; color: rgba(255,255,255,0.9); font-weight: 500;
}

.tc-grad-desc {
  font-size: 13px; color: rgba(255,255,255,0.85);
  line-height: 1.5; margin: 0;
}

/* Friend card */
.tc-friend {
  padding: 0 !important;
  overflow: hidden;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.tc-friend-illustration {
  width: 120px;
  background: rgba(74,128,240,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
  flex-shrink: 0;
}

.tc-friend-content {
  flex: 1;
  padding: 18px 16px;
}

.tc-friend-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px;
  padding: 8px 14px;
  border: 1.5px solid #4A80F0;
  border-radius: 100px;
  background: none;
  color: #4A80F0;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 0.18s;
  font-family: 'DM Sans', sans-serif;
}

.tc-friend-btn:hover { background: rgba(74,128,240,0.1); }

/* ════════════════════════════════════════════════
   TEST TAB
   ════════════════════════════════════════════════ */
.test-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(135deg, #4F6EF7, #9B6FEF, #F4A261);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 12px 32px rgba(79,110,247,0.35);
}

.test-hero-sparkles { position: absolute; inset: 0; pointer-events: none; }
.test-hero-content  { position: relative; z-index: 1; }

.test-hero-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}

.test-hero-icon-row {
  display: flex; align-items: center; gap: 10px;
}

.test-hero-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

.test-hero-title {
  font-family: 'Sora', sans-serif;
  font-size: 17px; font-weight: 800; color: #fff;
}

.test-streak-badge {
  background: rgba(255,255,255,0.2);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 700; color: #fff;
  white-space: nowrap;
}

.test-hero-sub {
  font-size: 13px; color: rgba(255,255,255,0.75);
  margin: 0 0 16px;
}

.test-xp-row {
  display: flex; align-items: center; gap: 10px;
}

.test-level-pill {
  background: rgba(255,255,255,0.2);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 12px; font-weight: 700; color: #fff;
  white-space: nowrap;
}

.test-xp-bar-wrap {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  overflow: hidden;
}

.test-xp-bar-fill {
  height: 100%;
  background: #6EE7B7;
  border-radius: 4px;
  transition: width 0.4s;
}

.test-xp-label {
  font-size: 11px; font-weight: 700; color: #fff;
  white-space: nowrap;
}

/* Premium card */
.test-premium-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
}

.test-premium-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }

.test-pc-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}

.test-pc-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.test-pc-info { flex: 1; min-width: 0; }
.test-pc-title { font-family:'Sora',sans-serif; font-size:15px; font-weight:800; margin-bottom:2px; }
.test-pc-sub   { font-size:12px; color:var(--muted); }
.test-pc-extra { font-size:12px; color:var(--muted); }
.test-pc-arrow { font-size:24px; line-height:1; flex-shrink:0; }

.test-pc-stats {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 12px;
}

.test-pc-stats-left { flex: 1; min-width: 0; }

.test-bar-wrap {
  height: 6px;
  background: var(--track, rgba(255,255,255,0.1));
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
}

.test-bar-fill {
  height: 100%; border-radius: 3px; transition: width 0.4s;
}

.test-circle { flex-shrink: 0; }

/* AI card */
.test-ai-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.test-ai-card:hover { background: rgba(255,255,255,0.1); }

.test-pro-badge {
  background: linear-gradient(135deg, #4F6EF7, #9B6FEF);
  color: #fff;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.test-typing-bar {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 10px;
}

.test-typing-dots {
  display: flex; gap: 4px; align-items: center;
}

.test-typing-dots span {
  width: 7px; height: 7px;
  background: #4F6EF7;
  border-radius: 50%;
  animation: typing-bounce 0.9s ease infinite alternate;
}

.test-typing-dots span:nth-child(2) { animation-delay: 0.3s; }
.test-typing-dots span:nth-child(3) { animation-delay: 0.6s; }

@keyframes typing-bounce {
  from { opacity: 0.3; transform: scaleY(0.8); }
  to   { opacity: 1;   transform: scaleY(1.2); }
}

.test-typing-label {
  font-size: 13px; color: var(--muted); font-weight: 500;
  flex: 1;
}

.test-typing-lines { display: flex; gap: 4px; align-items: center; }

.test-tl {
  height: 7px; border-radius: 4px;
  background: rgba(255,255,255,0.12);
}

.test-tl-sm { width: 7px; }
.test-tl-lg { width: 20px; background: #4F6EF7; }

/* Language test list */
.test-lang-list { margin-top: 8px; }

.test-lang-header { margin-bottom: 14px; }

.test-lang-back {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none;
  color: #60a5fa;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  padding: 6px 0;
}

.test-lang-cards { display: flex; flex-direction: column; gap: 12px; }

.test-lang-card {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  cursor: pointer;
  transition: all 0.2s;
}

.test-lang-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }

.test-lang-flag {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}

.test-lang-info { flex: 1; }
.test-lang-name { font-family:'Sora',sans-serif; font-size:17px; font-weight:800; margin-bottom:5px; }
.test-lang-sub  { font-size:12px; color:var(--muted); line-height:1.5; }
.test-lang-arr  { font-size:26px; line-height:1; flex-shrink:0; }

/* ════════════════════════════════════════════════
   PROGRESS TAB
   ════════════════════════════════════════════════ */
.prog-page-title {
  font-family: 'Sora', sans-serif;
  font-size: 20px; font-weight: 800;
  text-align: center;
  color: #fff;
  margin-bottom: 18px;
}

/* Stats card */
.prog-stats-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg, #6A5AE0, #9B5FD1, #BB6BB5);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 8px 28px rgba(106,90,224,0.35);
}

.prog-sparkles { position: absolute; inset: 0; pointer-events: none; }
.prog-stats-inner { position: relative; z-index: 1; }

.prog-stats-row1 {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}

.prog-stats-label { font-size:14px; color:rgba(255,255,255,0.7); font-weight:500; }

.prog-streak-badge {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 600; color: #fff;
}

.prog-level-num {
  font-family: 'Sora', sans-serif;
  font-size: 36px; font-weight: 800; color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

.prog-xp-labels {
  display: flex; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}

.prog-xp-bar {
  height: 10px;
  background: rgba(255,255,255,0.25);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 18px;
}

.prog-xp-fill {
  height: 100%;
  background: #fff;
  border-radius: 5px;
  transition: width 0.5s;
}

.prog-stat-boxes {
  display: flex; gap: 10px;
  margin-bottom: 14px;
}

.prog-stat-box {
  flex: 1;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}

.prog-stat-box span  { font-size: 20px; }
.prog-stat-box strong { font-size:20px; font-weight:800; color:#fff; }
.prog-stat-box small  { font-size:10px; color:rgba(255,255,255,0.7); }

.prog-total-xp-row {
  text-align: right;
  font-size: 13px; color: rgba(255,255,255,0.7);
}

.prog-gold { color: #FFC107; font-weight: 800; font-size: 15px; }

/* Section */
.prog-section { margin-bottom: 20px; }

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

.prog-section-title {
  font-family: 'Sora', sans-serif;
  font-size: 17px; font-weight: 800;
}

.prog-refresh-btn {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted);
  transition: background 0.18s;
}

.prog-refresh-btn:hover { background: rgba(255,255,255,0.12); }

/* Challenges */
.prog-challenges { display: flex; flex-direction: column; gap: 10px; }

.prog-challenge {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(228,232,248,0.1);
  border-radius: 16px;
  padding: 14px;
  transition: border-color 0.2s;
}

.prog-challenge-done { border-color: rgba(34,197,94,0.35); }

.prog-ch-icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, #4B7BFF, #7B5CFF);
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.prog-ch-info { flex: 1; min-width: 0; }
.prog-ch-title { font-weight:700; font-size:14px; margin-bottom:2px; }
.prog-ch-desc  { font-size:11px; color:var(--muted); margin-bottom:8px; }

.prog-ch-bar-row { display: flex; align-items: center; gap: 8px; }

.prog-ch-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(228,232,248,0.12);
  border-radius: 3px;
  overflow: hidden;
}

.prog-ch-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }

.prog-ch-count { font-size:11px; color:var(--muted); font-weight:600; white-space:nowrap; }

.prog-ch-xp {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex-shrink: 0;
  font-size: 11px;
}

.prog-ch-xp strong { color: #FFC107; font-weight: 700; font-size: 11px; }

/* Voice Coach */
.prog-voice-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #7B5CFF, #3A8EF6);
  border-radius: 20px;
  padding: 18px 20px;
  margin-bottom: 20px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(123,92,255,0.3);
  transition: transform 0.2s;
}

.prog-voice-card:hover { transform: translateY(-2px); }

.prog-voice-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.2);
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.prog-voice-text { flex: 1; }
.prog-voice-title { font-family:'Sora',sans-serif; font-size:17px; font-weight:800; color:#fff; }
.prog-voice-sub   { font-size:13px; color:rgba(255,255,255,0.7); }

.prog-voice-arrow {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  flex-shrink: 0;
}

/* Leaderboard */
.prog-leaderboard {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}

.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}

.lb-row:last-child { border-bottom: none; }
.lb-row:hover      { background: rgba(255,255,255,0.04); }
.lb-row-me         { background: rgba(75,123,255,0.1) !important; }

.lb-medal { font-size: 20px; width: 32px; text-align: center; }
.lb-rank  { font-size: 14px; font-weight: 700; color: var(--muted); width: 32px; text-align: center; }

.lb-avatar {
  width: 36px; height: 36px;
  background: rgba(222,232,255,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.lb-info { flex: 1; }
.lb-name  { font-size:14px; font-weight:600; }
.lb-level { font-size:11px; color:var(--muted); }

.lb-xp { font-size:14px; font-weight:800; color:#4B7BFF; white-space:nowrap; }

/* ── Responsive ── */
@media (max-width: 400px) {
  .prog-stat-boxes { gap: 6px; }
  .tc-friend-illustration { width: 90px; font-size: 38px; }
}