/* ==============================
   학점플래너 CreditPlanner v3 - CSS
   학생 UI 집중 리뉴얼
   ============================== */

:root {
  --primary: #6C5CE7;
  --primary-light: #A29BFE;
  --primary-dark: #5A4BD1;
  --accent: #FF6B6B;
  --accent-warm: #FDCB6E;
  --success: #00B894;
  --warning: #F39C12;
  --danger: #E74C3C;
  --bg-dark: #0D1117;
  --bg-card: #161B22;
  --bg-card-hover: #1C2333;
  --bg-input: #21262D;
  --bg-elevated: #1A1F2E;
  --text-primary: #F0F6FC;
  --text-secondary: #8B949E;
  --text-muted: #484F58;
  --border: #30363D;
  --border-light: #3D444D;
  --xp-gold: #FFD700;
  --streak-fire: #FF6347;
  --question-a: #74B9FF;
  --question-b: #A29BFE;
  --question-c: #FF6B6B;
  --teach-green: #00B894;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 50%;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 20px rgba(108,92,231,0.2);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Noto Sans KR', -apple-system, sans-serif;
  background: #080C14;
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
}

#prototype-wrapper { width: 100%; max-width: 1400px; }

/* ==================== MODE SELECTOR ==================== */
#mode-selector { display:flex; gap:8px; margin-bottom:16px; justify-content:center; flex-wrap:wrap; }
.mode-btn {
  padding:10px 20px; border:2px solid var(--border); background:var(--bg-card);
  color:var(--text-secondary); border-radius:var(--radius-lg); cursor:pointer;
  font-size:14px; font-weight:600; transition:all 0.3s; font-family:inherit;
}
.mode-btn:hover { border-color:var(--primary-light); color:var(--text-primary); }
.mode-btn.active { border-color:var(--primary); background:var(--primary); color:white; box-shadow:0 4px 16px rgba(108,92,231,0.4); }

/* ==================== PHONE FRAME ==================== */
#phone-container { display:flex; justify-content:center; }
#phone-frame {
  width:390px; height:844px; background:var(--bg-dark); border-radius:44px;
  border:3px solid #2D333B; overflow:hidden; position:relative;
  box-shadow: var(--shadow-lg), 0 0 80px rgba(108,92,231,0.08);
}
#status-bar {
  display:flex; justify-content:space-between; padding:14px 28px 8px;
  font-size:13px; font-weight:600; background:var(--bg-dark);
  position:sticky; top:0; z-index:100;
}
#app-content {
  height:calc(100% - 42px); overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  scroll-behavior:smooth;
}
#app-content::-webkit-scrollbar { display:none; }

/* ==================== DESKTOP FRAME ==================== */
#desktop-container { width:100%; max-width:1200px; margin:0 auto; }
#desktop-content {
  background:var(--bg-dark); border-radius:var(--radius-xl);
  border:2px solid var(--border); min-height:700px; overflow:hidden;
  box-shadow:var(--shadow-lg);
}

/* ==================== COMMON UI ==================== */
.tab-content { padding-bottom:100px; }
.full-screen { min-height:100%; }
.form-body { padding:0 20px 40px; }

/* Screen Header */
.screen-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 12px; background:var(--bg-dark); position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.screen-header h1 { font-size:20px; font-weight:800; }
.back-btn {
  background:none; border:none; color:var(--text-primary); font-size:18px; cursor:pointer;
  padding:6px 10px; border-radius:var(--radius-sm); transition:all var(--transition-fast);
}
.back-btn:hover { background:var(--bg-input); }
.back-btn:active { transform:scale(0.9); }
.header-badge { background:var(--primary); color:white; font-size:11px; padding:4px 10px; border-radius:20px; font-weight:600; }

/* Card */
.card {
  background:var(--bg-card); border-radius:var(--radius-lg); padding:16px;
  margin:0 16px 12px; border:1px solid var(--border); transition:all var(--transition-normal);
}
.card:hover { border-color:var(--border-light); }
.card-gradient-purple {
  background:linear-gradient(135deg, rgba(108,92,231,0.12), rgba(162,155,254,0.05));
  border-color:rgba(108,92,231,0.25);
}
.card-gradient-green {
  background:linear-gradient(135deg, rgba(0,184,148,0.08), rgba(0,206,201,0.04));
  border-color:rgba(0,184,148,0.25);
}
.card-header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.card-title { font-size:13px; font-weight:700; color:var(--text-secondary); display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.card-header-row .card-title { margin-bottom:0; }
.card-subtitle { font-size:12px; color:var(--text-muted); }
.card-link {
  background:none; border:none; color:var(--primary-light); font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all var(--transition-fast);
}
.card-link:hover { color:var(--primary); }

/* Buttons */
.btn-primary {
  width:100%; padding:14px; background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:white; border:none; border-radius:var(--radius-md); font-size:16px;
  font-weight:700; cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
  position:relative; overflow:hidden;
}
.btn-primary::after {
  content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity:0; transition:opacity var(--transition-fast);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(108,92,231,0.4); }
.btn-primary:hover::after { opacity:1; }
.btn-primary:active { transform:scale(0.98); }
.btn-glow { box-shadow:0 0 20px rgba(108,92,231,0.3); animation:pulseGlow 2s ease-in-out infinite; }

.btn-secondary {
  padding:10px 16px; background:var(--bg-input); color:var(--text-primary);
  border:1px solid var(--border); border-radius:var(--radius-md); font-size:14px;
  font-weight:600; cursor:pointer; font-family:inherit; transition:all var(--transition-fast);
}
.btn-secondary:hover { border-color:var(--primary); background:rgba(108,92,231,0.1); }
.btn-secondary:active { transform:scale(0.97); }
.btn-ghost {
  padding:10px 16px; background:none; border:none; color:var(--text-secondary); font-size:14px;
  cursor:pointer; font-family:inherit; transition:all var(--transition-fast);
}
.btn-ghost:hover { color:var(--text-primary); }

/* Input */
.input-field {
  width:100%; padding:12px 16px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius-md); color:var(--text-primary); font-size:14px;
  font-family:inherit; outline:none; transition:all var(--transition-normal);
}
.input-field:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,92,231,0.15); }
.input-field::placeholder { color:var(--text-muted); }
textarea.input-field { resize:none; min-height:60px; line-height:1.6; }

.input-with-icon { position:relative; }
.input-with-icon i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:14px; }

.field-group { margin-bottom:20px; }
.field-label { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; display:block; }
.field-hint { color:var(--primary-light); font-weight:500; font-size:11px; }

/* Chips */
.chip {
  display:inline-flex; align-items:center; padding:7px 14px; border-radius:20px;
  font-size:13px; font-weight:600; cursor:pointer; transition:all var(--transition-fast);
  border:1.5px solid var(--border); background:var(--bg-card); color:var(--text-secondary);
  font-family:inherit;
}
.chip:hover { border-color:var(--primary-light); }
.chip.active { border-color:var(--primary); background:rgba(108,92,231,0.15); color:var(--primary-light); }
.chip:active { transform:scale(0.95); }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; }

/* Progress Bar */
.progress-bar { height:8px; background:var(--bg-input); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; border-radius:4px; transition:width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.level-fill { background:linear-gradient(90deg, var(--xp-gold), #FFA502); }

/* XP Badge */
.xp-badge-sm {
  font-size:11px; color:var(--xp-gold); font-weight:700; padding:3px 8px;
  background:rgba(255,215,0,0.1); border-radius:12px;
  animation:subtleShine 3s ease-in-out infinite;
}

/* ==================== BOTTOM NAV ==================== */
.bottom-nav {
  position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-around;
  padding:8px 0 28px; background:var(--bg-dark); border-top:1px solid var(--border); z-index:100;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.nav-item {
  display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
  color:var(--text-muted); font-size:10px; font-weight:600; transition:all var(--transition-fast);
  padding:4px 10px; border:none; background:none; font-family:inherit;
  position:relative; flex:1;
}
.nav-item.active { color:var(--primary-light); }
.nav-item.active::before {
  content:''; position:absolute; top:-8px; width:20px; height:3px;
  background:var(--primary); border-radius:0 0 3px 3px;
}
.nav-item i { font-size:20px; transition:all var(--transition-fast); }
.nav-item:active i { transform:scale(0.85); }

/* FAB */
.fab {
  position:absolute; bottom:84px; right:20px; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--accent)); color:white; border:none;
  font-size:22px; cursor:pointer; box-shadow:0 4px 20px rgba(108,92,231,0.5);
  z-index:90; display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-normal);
}
.fab:hover { transform:scale(1.1) rotate(90deg); }
.fab:active { transform:scale(0.95); }

/* ==================== XP BAR ==================== */
.xp-bar-container {
  display:flex; align-items:center; gap:8px; padding:8px 16px;
  background:var(--bg-card); border-bottom:1px solid var(--border);
}
.xp-level { font-size:11px; font-weight:800; color:var(--xp-gold); white-space:nowrap; }
.xp-bar { flex:1; height:5px; background:var(--bg-input); border-radius:3px; overflow:hidden; }
.xp-bar-fill { height:100%; background:linear-gradient(90deg, var(--xp-gold), #FFA502); border-radius:3px; transition:width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.xp-text { font-size:10px; color:var(--text-muted); white-space:nowrap; }
.streak-badge {
  display:inline-flex; align-items:center; padding:2px 8px; background:rgba(255,99,71,0.15);
  border-radius:12px; font-size:11px; font-weight:700; color:var(--streak-fire);
}

/* ==================== XP POPUP ==================== */
.xp-popup-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:999; cursor:pointer;
  animation:overlayIn 0.2s ease;
}
.xp-popup {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  background:var(--bg-card); border:2px solid var(--xp-gold); border-radius:var(--radius-2xl);
  padding:32px 40px; text-align:center; z-index:1000;
  box-shadow:0 0 60px rgba(255,215,0,0.3); animation:xpPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes xpPopIn { 0%{transform:translate(-50%,-50%) scale(0);opacity:0} 100%{transform:translate(-50%,-50%) scale(1);opacity:1} }
@keyframes overlayIn { from{opacity:0} to{opacity:1} }
.xp-popup-icon { font-size:40px; margin-bottom:4px; animation:popBounce 0.5s ease 0.3s both; }
.xp-popup-amount {
  font-size:36px; font-weight:900; color:var(--xp-gold);
  text-shadow:0 0 20px rgba(255,215,0,0.5);
  animation:countUp 0.4s ease 0.2s both;
}
.xp-popup-label { font-size:14px; color:var(--text-secondary); margin-top:4px; }

/* ==================== ONBOARDING ==================== */
.onboarding-screen { display:flex; flex-direction:column; min-height:100%; padding:20px 24px 30px; }
.onboarding-progress { height:4px; background:var(--bg-input); border-radius:2px; margin-bottom:20px; overflow:hidden; }
.onboarding-progress-fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius:2px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.onboarding-step { font-size:12px; color:var(--primary-light); font-weight:600; margin-bottom:8px; }
.onboarding-title { font-size:24px; font-weight:800; margin-bottom:8px; line-height:1.3; }
.onboarding-desc { font-size:14px; color:var(--text-secondary); margin-bottom:28px; line-height:1.6; }

.onboarding-logo { text-align:center; margin-bottom:32px; }
.logo-circle {
  width:80px; height:80px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:36px; color:white;
  box-shadow:0 8px 32px rgba(108,92,231,0.4);
  animation:logoFloat 3s ease-in-out infinite;
}
.onboarding-logo h2 {
  font-size:28px; font-weight:900;
  background:linear-gradient(135deg, var(--primary-light), var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.onboarding-logo p { color:var(--text-secondary); font-size:13px; margin-top:4px; }

/* Career Grid */
.career-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.career-btn {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px;
  background:var(--bg-input); border:1.5px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
}
.career-btn:hover, .career-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.15); transform:translateY(-2px); }
.career-btn.active .career-name { color:var(--primary-light); }
.career-btn:active { transform:scale(0.95); }
.career-icon { font-size:24px; }
.career-name { font-size:12px; font-weight:600; color:var(--text-secondary); }

.grid-select-btn {
  padding:12px 8px; background:var(--bg-input); border:1.5px solid var(--border);
  border-radius:var(--radius-md); color:var(--text-secondary); font-size:13px; font-weight:600;
  cursor:pointer; text-align:center; transition:all var(--transition-fast); font-family:inherit;
}
.grid-select-btn:hover, .grid-select-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.15); color:var(--primary-light); }

/* Timetable Editor */
.tt-editor { display:grid; grid-template-columns:32px repeat(5, 1fr); gap:3px; font-size:10px; }
.tt-editor-header { font-weight:700; text-align:center; padding:6px 2px; color:var(--text-muted); font-size:11px; }
.tt-editor-period { font-weight:700; text-align:center; padding:6px 2px; color:var(--text-muted); display:flex; align-items:center; justify-content:center; }
.tt-editor-cell {
  padding:7px 2px; text-align:center; background:var(--bg-input); border-radius:6px;
  cursor:pointer; transition:all var(--transition-fast); font-weight:600; color:var(--text-secondary); border:1px solid transparent;
}
.tt-editor-cell:hover { border-color:var(--primary); transform:scale(1.05); }
.tt-editor-cell.filled { font-weight:700; }

/* Guide Cards */
.guide-card {
  display:flex; align-items:center; gap:14px; padding:14px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  margin-bottom:10px; transition:all var(--transition-normal);
}
.guide-card:hover { border-color:var(--primary-light); transform:translateX(4px); }
.guide-icon-circle { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.guide-content h3 { font-size:14px; font-weight:700; margin-bottom:2px; }
.guide-content p { font-size:12px; color:var(--text-secondary); }
.guide-bottom-hint {
  text-align:center; font-size:13px; color:var(--xp-gold); font-weight:600;
  margin-bottom:12px; display:flex; align-items:center; justify-content:center; gap:6px;
}

/* ==================== HOME TAB ==================== */
.home-greeting { display:flex; justify-content:space-between; align-items:center; padding:20px 20px 8px; }
.home-greeting h2 { font-size:21px; font-weight:800; }
.home-greeting p { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.home-date { display:flex; flex-direction:column; align-items:center; }
.date-day { font-size:24px; font-weight:800; color:var(--primary-light); }
.date-month { font-size:10px; color:var(--text-muted); }

/* Routine */
.routine-checklist { display:flex; gap:16px; margin-bottom:12px; }
.routine-item { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary); transition:all var(--transition-fast); }
.routine-item.done { color:var(--success); }
.routine-item i { font-size:16px; }

/* Mood */
.mood-selector { display:flex; gap:8px; justify-content:center; }
.mood-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 10px; background:none; border:2px solid transparent; border-radius:12px;
  cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
}
.mood-btn:hover { border-color:rgba(108,92,231,0.3); background:rgba(108,92,231,0.05); }
.mood-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.1); transform:scale(1.1); }
.mood-btn:active { transform:scale(0.9); }
.mood-emoji { font-size:26px; transition:transform var(--transition-normal); }
.mood-btn:hover .mood-emoji { transform:scale(1.15); }
.mood-label { font-size:10px; color:var(--text-muted); font-weight:600; }

/* Timetable List */
.timetable-progress { height:4px; background:var(--bg-input); border-radius:2px; margin-bottom:12px; overflow:hidden; }
.timetable-progress-fill { height:100%; background:linear-gradient(90deg, var(--success), var(--teach-green)); border-radius:2px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

.timetable-list { display:flex; flex-direction:column; gap:4px; }
.tt-row {
  display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:var(--radius-sm);
  transition:all var(--transition-normal); cursor:pointer;
}
.tt-row:hover { background:rgba(108,92,231,0.05); }
.tt-row.current { background:rgba(108,92,231,0.08); border-left:3px solid var(--primary); }
.tt-row.done { opacity:0.85; }
.tt-period-badge {
  width:28px; height:28px; border-radius:8px; background:var(--bg-input);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
  color:var(--text-muted); flex-shrink:0; transition:all var(--transition-fast);
}
.tt-period-badge.done { background:rgba(0,184,148,0.15); color:var(--success); }
.tt-period-badge.current { background:rgba(108,92,231,0.15); color:var(--primary-light); animation:pulseSmall 2s ease-in-out infinite; }
.tt-info { flex:1; min-width:0; }
.tt-subject-name { font-size:14px; font-weight:600; }
.tt-summary { font-size:11px; color:var(--text-muted); display:block; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt-action { flex-shrink:0; }
.tt-done-badge { font-size:12px; color:var(--success); font-weight:600; }
.tt-q-badge { color:var(--question-b); font-size:10px; }
.tt-record-btn {
  padding:5px 12px; background:rgba(108,92,231,0.15); border:1px solid rgba(108,92,231,0.3);
  border-radius:8px; color:var(--primary-light); font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:all var(--transition-fast);
  animation:pulseBtn 2s ease-in-out infinite;
}
.tt-record-btn:hover { background:rgba(108,92,231,0.25); transform:scale(1.05); }
.tt-record-btn:active { transform:scale(0.95); }
.tt-locked { font-size:12px; color:var(--text-muted); }

/* Mission */
.mission-row {
  display:flex; align-items:center; gap:10px; padding:10px 0;
  transition:all var(--transition-fast);
}
.mission-row:active { transform:scale(0.98); }
.mission-icon { font-size:20px; flex-shrink:0; }
.mission-info { flex:1; }
.mission-text { font-size:13px; font-weight:500; display:block; margin-bottom:4px; }
.mission-bar { height:4px; background:var(--bg-input); border-radius:2px; overflow:hidden; }
.mission-bar-fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius:2px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.mission-count { font-size:12px; color:var(--text-muted); font-weight:600; flex-shrink:0; }
.mission-row.done .mission-text { color:var(--success); text-decoration:line-through; opacity:0.7; }

/* Weekly Mini Stats */
.weekly-mini-stats { display:flex; align-items:center; justify-content:space-around; margin-bottom:16px; }
.mini-stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.mini-stat-value { font-size:20px; font-weight:800; }
.mini-stat-label { font-size:10px; color:var(--text-muted); font-weight:600; }
.mini-stat-divider { width:1px; height:30px; background:var(--border); }

/* Weekly Bar Chart */
.weekly-bar-chart { display:flex; justify-content:space-around; align-items:flex-end; height:80px; margin-bottom:8px; }
.weekly-bar-col { display:flex; flex-direction:column; align-items:center; gap:4px; }
.weekly-bar-stack { display:flex; flex-direction:column-reverse; gap:2px; }
.weekly-bar-r { width:20px; background:linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius:3px 3px 0 0; min-height:4px; transition:height 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.weekly-bar-q { width:20px; background:linear-gradient(180deg, var(--accent), #e55555); border-radius:3px 3px 0 0; min-height:2px; transition:height 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.weekly-bar-label { font-size:10px; color:var(--text-muted); font-weight:600; }

.chart-legend { display:flex; gap:16px; justify-content:center; font-size:11px; color:var(--text-muted); }
.legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; vertical-align:middle; }
.legend-line { width:16px; height:3px; border-radius:2px; display:inline-block; margin-right:4px; vertical-align:middle; }
.legend-line.dashed { background:repeating-linear-gradient(90deg, var(--text-muted) 0, var(--text-muted) 3px, transparent 3px, transparent 6px) !important; }

/* Quick Actions */
.quick-action-btn {
  flex:1; padding:10px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); color:var(--text-secondary); font-size:13px; font-weight:600;
  cursor:pointer; transition:all var(--transition-fast); font-family:inherit; text-align:center;
}
.quick-action-btn:hover { border-color:var(--primary); color:var(--primary-light); transform:translateY(-2px); }
.quick-action-btn:active { transform:scale(0.97); }
.quick-action-btn i { margin-right:6px; }

/* ==================== RECORD TAB ==================== */
.record-type-grid { display:flex; flex-direction:column; gap:8px; padding:0 16px; margin-bottom:12px; }
.record-type-card {
  display:flex; align-items:center; gap:12px; padding:16px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  cursor:pointer; transition:all var(--transition-normal); position:relative; overflow:hidden;
}
.record-type-card::before {
  content:''; position:absolute; inset:0; opacity:0;
  background:linear-gradient(135deg, rgba(108,92,231,0.05), transparent);
  transition:opacity var(--transition-fast);
}
.record-type-card:hover { border-color:var(--primary); transform:translateX(4px); }
.record-type-card:hover::before { opacity:1; }
.record-type-card:active { transform:scale(0.98); }
.record-type-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.record-type-info { flex:1; position:relative; z-index:1; }
.record-type-info h3 { font-size:15px; font-weight:700; }
.record-type-info p { font-size:12px; color:var(--text-secondary); margin-top:2px; }

/* Timeline */
.timeline { display:flex; flex-direction:column; gap:0; }
.timeline-item { display:flex; gap:12px; padding:12px 0; position:relative; }
.timeline-item:not(:last-child)::after {
  content:''; position:absolute; left:7px; top:32px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-dot {
  width:16px; height:16px; border-radius:50%; flex-shrink:0; margin-top:2px;
  box-shadow:0 0 0 3px var(--bg-card);
}
.timeline-content { flex:1; }
.timeline-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap; }
.timeline-time { font-size:11px; color:var(--text-muted); }
.timeline-subject { font-size:12px; font-weight:600; color:var(--text-secondary); }
.timeline-text { font-size:13px; color:var(--text-secondary); line-height:1.5; }

/* ==================== CLASS END POPUP ==================== */
.popup-overlay { display:flex; align-items:center; justify-content:center; min-height:100%; padding:20px; }
.popup-card {
  background:var(--bg-card); border-radius:var(--radius-2xl); padding:24px; width:100%;
  border:1px solid var(--border); box-shadow:var(--shadow-lg);
}
.popup-header { text-align:center; margin-bottom:16px; }
.popup-bell {
  width:56px; height:56px; border-radius:50%; margin:0 auto 12px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:24px; color:white;
  animation:bellRing 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bellRing {
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(15deg)}
  30%{transform:rotate(-12deg)}
  45%{transform:rotate(8deg)}
  60%{transform:rotate(-5deg)}
  75%{transform:rotate(2deg)}
}
.popup-header h2 { font-size:18px; font-weight:800; }
.popup-header p { font-size:13px; color:var(--text-secondary); }
.popup-timer {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 16px; background:rgba(0,184,148,0.1); border-radius:20px;
  margin-bottom:16px; font-size:13px; color:var(--success); font-weight:600;
}
.popup-question-ask {
  background:var(--bg-input); padding:14px; border-radius:var(--radius-md); margin-bottom:16px;
  font-size:14px; font-weight:600;
}
.popup-skip {
  display:block; width:100%; text-align:center; padding:10px; background:none; border:none;
  color:var(--text-muted); font-size:13px; cursor:pointer; font-family:inherit; margin-top:4px;
  transition:all var(--transition-fast);
}
.popup-skip:hover { color:var(--text-secondary); }

/* Input Modes */
.input-modes { display:flex; gap:10px; justify-content:center; margin:12px 0 16px; }
.input-mode-btn {
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 20px;
  background:var(--bg-input); border:2px solid var(--border); border-radius:var(--radius-lg);
  color:var(--text-secondary); cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
}
.input-mode-btn:hover { border-color:var(--primary-light); }
.input-mode-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.1); color:var(--primary-light); }
.input-mode-btn:active { transform:scale(0.95); }
.input-mode-btn i { font-size:22px; }
.input-mode-btn span { font-size:11px; font-weight:600; }

/* Voice Recording Mode Visual */
.voice-recording-visual {
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px;
  background:rgba(108,92,231,0.08); border:1px dashed rgba(108,92,231,0.3);
  border-radius:var(--radius-lg); margin-bottom:16px; text-align:center;
}
.voice-wave {
  display:flex; align-items:center; gap:3px; height:40px;
}
.voice-wave-bar {
  width:4px; background:var(--primary); border-radius:2px;
  animation:waveAnim 1s ease-in-out infinite;
}
.voice-wave-bar:nth-child(1) { height:12px; animation-delay:0s; }
.voice-wave-bar:nth-child(2) { height:24px; animation-delay:0.1s; }
.voice-wave-bar:nth-child(3) { height:36px; animation-delay:0.2s; }
.voice-wave-bar:nth-child(4) { height:20px; animation-delay:0.3s; }
.voice-wave-bar:nth-child(5) { height:32px; animation-delay:0.4s; }
.voice-wave-bar:nth-child(6) { height:16px; animation-delay:0.5s; }
.voice-wave-bar:nth-child(7) { height:28px; animation-delay:0.6s; }

/* Photo Mode Visual */
.photo-capture-visual {
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px;
  background:rgba(108,92,231,0.05); border:2px dashed rgba(108,92,231,0.2);
  border-radius:var(--radius-lg); margin-bottom:16px; cursor:pointer;
  transition:all var(--transition-fast);
}
.photo-capture-visual:hover { border-color:var(--primary); background:rgba(108,92,231,0.1); }
.photo-capture-visual i { font-size:36px; color:var(--primary-light); }
.photo-capture-visual span { font-size:13px; color:var(--text-secondary); }

/* Record Details */
.subject-indicator {
  display:flex; align-items:center; gap:8px; justify-content:center;
  padding:10px 0 16px; font-size:14px; color:var(--text-secondary);
}
.subject-dot { width:10px; height:10px; border-radius:50%; }
.period-badge { font-size:11px; padding:3px 8px; background:var(--bg-input); border-radius:8px; color:var(--text-muted); }
.question-prompt { padding:16px; background:var(--bg-input); border-radius:var(--radius-md); margin-bottom:20px; }
.question-prompt p { font-size:14px; font-weight:600; margin-bottom:12px; }
.input-timer { text-align:center; font-size:12px; color:var(--text-muted); margin-top:8px; }

/* ==================== AI CLASSIFICATION ==================== */
.ai-classification {
  background:linear-gradient(135deg, rgba(108,92,231,0.1), rgba(0,184,148,0.05));
  border:1px solid rgba(108,92,231,0.25); border-radius:var(--radius-lg); padding:16px; margin-bottom:20px;
}
.ai-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ai-icon { font-size:16px; }
.ai-title { font-size:14px; font-weight:700; }
.ai-analyzing { font-size:11px; color:var(--success); margin-left:auto; }
.ai-result { font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
.ai-comment { font-size:13px; color:var(--text-primary); font-weight:500; line-height:1.5; margin-bottom:14px; }

/* Question Levels */
.q-level { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.q-level-a { background:rgba(116,185,255,0.15); color:var(--question-a); }
.q-level-b { background:rgba(162,155,254,0.15); color:var(--question-b); }
.q-level-c { background:rgba(255,107,107,0.15); color:var(--question-c); }

.q-level-selector { display:flex; flex-direction:column; gap:4px; }
.q-group-label { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--text-muted); margin:6px 0 2px; }
.q-group-dot { width:6px; height:6px; border-radius:50%; }
.q-level-row {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-fast); border:1.5px solid transparent;
}
.q-level-row:hover { background:var(--bg-input); }
.q-level-row.selected { border-color:var(--primary); background:rgba(108,92,231,0.1); }
.q-level-row:active { transform:scale(0.98); }
.q-cat { font-size:10px; font-weight:700; width:28px; color:var(--text-muted); }
.q-name { flex:1; font-size:13px; font-weight:600; }
.q-xp { font-size:12px; color:var(--xp-gold); font-weight:700; }
.ai-recommend { font-size:10px; color:var(--success); font-weight:600; }

/* Question Distribution */
.q-dist-row { display:flex; align-items:center; gap:8px; padding:4px 0; }
.q-dist-label { font-size:11px; width:72px; font-weight:600; color:var(--text-secondary); }
.q-dist-bar { flex:1; height:12px; background:var(--bg-input); border-radius:6px; overflow:hidden; }
.q-dist-fill { height:100%; border-radius:6px; transition:width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.q-dist-pct { font-size:11px; width:36px; text-align:right; color:var(--text-muted); }
.success-badge { margin-top:12px; padding:8px 12px; background:rgba(0,184,148,0.1); border-radius:8px; font-size:13px; color:var(--success); font-weight:600; text-align:center; }

/* ==================== TEACH LOG ==================== */
.teach-hero { text-align:center; margin-bottom:20px; }
.teach-hero-emoji { font-size:48px; }
.teach-hero h2 { font-size:18px; font-weight:700; margin-top:8px; }

.teach-student-list { max-height:180px; overflow-y:auto; margin-top:8px; }
.teach-student-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-fast);
}
.teach-student-item:hover { background:var(--bg-input); }
.teach-student-item.selected { background:rgba(0,184,148,0.1); border:1px solid rgba(0,184,148,0.3); }
.teach-avatar {
  width:32px; height:32px; border-radius:50%; background:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:white;
}
.teach-confirm-box {
  background:rgba(0,184,148,0.08); border:1px solid rgba(0,184,148,0.25);
  border-radius:var(--radius-md); padding:14px; margin-bottom:16px; font-size:13px; color:var(--teach-green);
}

/* ==================== ACTIVITY RECORD ==================== */
.activity-type-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.activity-type-btn {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px;
  background:var(--bg-input); border:1.5px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-normal); font-family:inherit; font-size:11px; font-weight:600; color:var(--text-secondary);
}
.activity-type-btn span:first-child { font-size:24px; }
.activity-type-btn:hover, .activity-type-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.15); color:var(--primary-light); transform:translateY(-2px); }
.activity-type-btn:active { transform:scale(0.95); }

/* ==================== EVENING ROUTINE ==================== */
.evening-summary-card {
  text-align:center; padding:24px 16px; margin-bottom:20px;
  background:linear-gradient(135deg, rgba(108,92,231,0.12), rgba(253,203,110,0.08));
  border:1px solid rgba(108,92,231,0.2); border-radius:var(--radius-xl);
}
.evening-summary-card h2 { font-size:20px; font-weight:800; margin-bottom:16px; }
.evening-stats { display:flex; justify-content:space-around; }
.evening-stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.evening-stat-num { font-size:24px; font-weight:800; }
.evening-stat-label { font-size:11px; color:var(--text-muted); }

.missing-record-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px solid rgba(48,54,61,0.5); font-size:13px;
}
.missing-record-row:last-child { border-bottom:none; }

.evening-xp-preview {
  text-align:center; padding:16px; margin:16px 0;
  background:rgba(255,215,0,0.08); border:1px solid rgba(255,215,0,0.2); border-radius:var(--radius-lg);
}
.evening-xp-preview > div:first-child { font-size:12px; color:var(--text-muted); }
.evening-xp-total { font-size:28px; font-weight:900; color:var(--xp-gold); }
.evening-xp-breakdown { font-size:11px; color:var(--text-muted); margin-top:4px; }

/* ==================== WEEKLY REPORT ==================== */
.report-hero { text-align:center; margin-bottom:20px; }
.report-hero-avatar { font-size:48px; margin-bottom:8px; }
.report-hero h2 { font-size:18px; font-weight:800; }
.report-hero p { font-size:13px; color:var(--text-muted); }

.report-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.report-stat-item {
  text-align:center; padding:14px 8px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-md);
  transition:all var(--transition-fast);
}
.report-stat-item:hover { border-color:var(--primary-light); }
.report-stat-num { font-size:24px; font-weight:800; display:block; }
.report-stat-label { font-size:12px; color:var(--text-secondary); font-weight:600; display:block; margin-top:2px; }
.report-stat-sub { font-size:10px; color:var(--text-muted); display:block; margin-top:2px; }

.highlight-item { padding:10px 0; border-bottom:1px solid rgba(48,54,61,0.5); }
.highlight-item:last-child { border-bottom:none; }
.highlight-badge { font-size:11px; font-weight:600; padding:3px 8px; border-radius:8px; display:inline-block; margin-bottom:4px; }
.highlight-item p { font-size:13px; color:var(--text-secondary); line-height:1.5; }

.next-goal-item { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px; }
.next-goal-icon { font-size:18px; }

/* ==================== RECORD HISTORY ==================== */
.history-date-header { font-size:12px; font-weight:700; color:var(--text-muted); padding:12px 0 6px; }
.history-card {
  display:flex; gap:10px; padding:12px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:8px;
  transition:all var(--transition-fast);
}
.history-card:hover { border-color:var(--border-light); }
.history-type-badge {
  writing-mode:vertical-lr; text-orientation:mixed; font-size:10px; font-weight:700;
  color:white; padding:4px 6px; border-radius:6px; text-align:center; flex-shrink:0;
}
.history-content { flex:1; }
.history-meta { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.history-content p { font-size:13px; line-height:1.4; }
.history-tags { display:flex; gap:6px; align-items:center; margin-top:6px; }
.history-xp { font-size:11px; color:var(--xp-gold); font-weight:600; }

/* ==================== GROWTH TAB ==================== */
.chart-container { position:relative; height:200px; margin:8px 0; }

.combo-card {
  background:linear-gradient(135deg, rgba(108,92,231,0.08), rgba(255,107,107,0.05));
  border:1px solid rgba(108,92,231,0.2); border-radius:var(--radius-md); padding:12px;
  transition:all var(--transition-fast);
}
.combo-card:hover { border-color:rgba(108,92,231,0.4); }
.combo-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13px; font-weight:700; }
.combo-complete { color:var(--success); font-size:12px; animation:subtleShine 3s ease-in-out infinite; }
.combo-progress { color:var(--accent-warm); font-size:12px; }
.combo-flow { display:flex; align-items:center; gap:6px; font-size:12px; flex-wrap:wrap; }
.combo-arrow { color:var(--xp-gold); font-size:10px; }
.combo-bonus { font-size:12px; color:var(--xp-gold); font-weight:700; margin-left:4px; }
.combo-next { font-size:12px; color:var(--text-muted); }

.teach-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.teach-stat-item { text-align:center; padding:14px; background:var(--bg-input); border-radius:var(--radius-md); }
.teach-stat-num { font-size:28px; font-weight:800; display:block; }
.teach-stat-item span:last-child { font-size:11px; color:var(--text-muted); }

.subject-record-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid rgba(48,54,61,0.3); font-size:12px; }
.subject-record-row:last-child { border-bottom:none; }
.subject-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.subject-name { font-size:13px; font-weight:600; width:40px; }
.subject-stat { color:var(--text-muted); flex:1; }
.subject-bc { color:var(--question-b); font-weight:600; }

/* ==================== MY TAB ==================== */
.profile-card { text-align:center; }
.profile-avatar {
  width:76px; height:76px; border-radius:50%; margin:0 auto 12px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:36px;
  border:3px solid var(--xp-gold); position:relative;
  animation:avatarGlow 3s ease-in-out infinite;
}
.profile-name { font-size:20px; font-weight:800; }
.profile-title { font-size:13px; color:var(--primary-light); font-weight:600; margin-top:4px; }
.profile-school { font-size:12px; color:var(--text-muted); margin-top:4px; }
.profile-stats { display:flex; justify-content:center; gap:24px; margin-top:16px; }
.profile-stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.profile-stat-value { font-size:20px; font-weight:800; }
.profile-stat-label { font-size:10px; color:var(--text-muted); }

.level-progress-header { display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; }
.level-tier-row { display:flex; justify-content:space-between; margin-top:10px; }
.level-tier { font-size:10px; color:var(--text-muted); transition:all var(--transition-fast); }
.level-tier.active { color:var(--primary-light); font-weight:700; }

.badge-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.badge-item {
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 6px;
  background:var(--bg-input); border-radius:var(--radius-md); text-align:center;
  border:1px solid transparent; transition:all var(--transition-fast); cursor:pointer;
}
.badge-item:hover { transform:translateY(-2px); }
.badge-item.earned { background:rgba(108,92,231,0.12); border-color:rgba(108,92,231,0.3); }
.badge-item.earned:hover { box-shadow:0 4px 12px rgba(108,92,231,0.2); }
.badge-item.locked { opacity:0.35; }
.badge-icon { font-size:26px; transition:transform var(--transition-fast); }
.badge-item:hover .badge-icon { transform:scale(1.2); }
.badge-name { font-size:10px; font-weight:600; color:var(--text-secondary); }

.streak-display { text-align:center; margin:12px 0; }
.streak-number { font-size:42px; font-weight:900; color:var(--streak-fire); }
.streak-display p { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.streak-milestones { display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.streak-milestone {
  padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600;
  background:var(--bg-input); color:var(--text-muted); transition:all var(--transition-fast);
}
.streak-milestone.reached { background:rgba(255,99,71,0.15); color:var(--streak-fire); border:1px solid rgba(255,99,71,0.3); }
.pause-card-info {
  margin-top:16px; padding:10px; background:rgba(108,92,231,0.08); border-radius:8px;
  text-align:center; font-size:12px; color:var(--primary-light);
}

/* Growth Card */
.growth-card-preview { display:flex; flex-direction:column; gap:10px; }
.gc-stat { display:flex; align-items:center; gap:10px; }
.gc-label { font-size:12px; font-weight:600; color:var(--text-secondary); width:48px; }
.gc-bar { flex:1; height:10px; background:var(--bg-input); border-radius:5px; overflow:hidden; }
.gc-fill { height:100%; border-radius:5px; transition:width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

/* ==================== SETTINGS / NOTIFICATIONS ==================== */
.notification-item {
  display:flex; align-items:center; gap:12px; padding:12px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  margin-bottom:8px; transition:all var(--transition-fast);
}
.notification-item:hover { border-color:var(--border-light); }
.notification-item.unread { border-left:3px solid var(--primary); }
.notif-icon {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.notif-content { flex:1; }
.notif-title { font-size:13px; font-weight:600; }
.notif-desc { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.notif-time { font-size:10px; color:var(--text-muted); flex-shrink:0; }

/* ==================== MENTOR DASHBOARD ==================== */
.desk-header { display:flex; justify-content:space-between; align-items:center; padding:20px 28px; border-bottom:1px solid var(--border); background:var(--bg-card); }
.desk-header h1 { font-size:22px; font-weight:800; }
.desk-header-right { display:flex; align-items:center; gap:16px; }
.desk-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); padding:0 28px; background:var(--bg-card); overflow-x:auto; }
.desk-tab {
  padding:14px 18px; font-size:13px; font-weight:600; color:var(--text-muted);
  border:none; background:none; cursor:pointer; border-bottom:2px solid transparent;
  transition:all var(--transition-fast); font-family:inherit; white-space:nowrap;
}
.desk-tab:hover { color:var(--text-secondary); }
.desk-tab.active { color:var(--primary-light); border-bottom-color:var(--primary); }
.desk-body { padding:24px 28px; }

.stats-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:24px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; transition:all var(--transition-fast); }
.stat-card:hover { border-color:var(--border-light); }
.stat-label { font-size:12px; color:var(--text-muted); margin-bottom:6px; }
.stat-value { font-size:26px; font-weight:800; }
.stat-change { font-size:12px; margin-top:4px; }
.stat-up { color:var(--success); }
.stat-down { color:var(--danger); }

.student-table { width:100%; border-collapse:collapse; font-size:13px; }
.student-table th { text-align:left; padding:12px 14px; font-weight:600; color:var(--text-muted); border-bottom:1px solid var(--border); font-size:12px; }
.student-table td { padding:12px 14px; border-bottom:1px solid rgba(48,54,61,0.5); }
.student-table tr:hover td { background:var(--bg-card-hover); }
.student-table tr { cursor:pointer; transition:all var(--transition-fast); }

.status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.status-green { background:var(--success); }
.status-yellow { background:var(--warning); }
.status-red { background:var(--danger); }

.alert-banner { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--radius-md); margin-bottom:8px; font-size:13px; }
.alert-red { background:rgba(231,76,60,0.08); border:1px solid rgba(231,76,60,0.25); color:#FF8A80; }
.alert-yellow { background:rgba(243,156,18,0.08); border:1px solid rgba(243,156,18,0.25); color:var(--accent-warm); }
.alert-green { background:rgba(0,184,148,0.08); border:1px solid rgba(0,184,148,0.25); color:var(--success); }

.report-preview { background:var(--bg-input); border-radius:var(--radius-lg); padding:24px; border:1px solid var(--border); font-size:14px; line-height:1.8; }
.report-section { margin-bottom:16px; }
.report-section-title { font-weight:700; font-size:13px; color:var(--primary-light); margin-bottom:6px; }
.report-section p { color:var(--text-secondary); }

.coaching-note { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-bottom:16px; }
.coaching-note-date { font-size:12px; color:var(--text-muted); margin-bottom:8px; }
.coaching-note-content { font-size:14px; line-height:1.7; color:var(--text-secondary); }
.coaching-note .action-list { margin-top:12px; }
.coaching-note .action-item { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px; }

.mentor-rate { font-size:14px; font-weight:700; padding:4px 12px; border-radius:20px; }

/* ==================== DIRECTOR DASHBOARD ==================== */
.dir-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dir-full { grid-column:1/-1; }
.network-placeholder {
  height:280px; background:var(--bg-input); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; border:1px dashed var(--border);
}
.network-placeholder i { font-size:48px; color:var(--text-muted); }
.network-placeholder p { color:var(--text-muted); font-size:14px; }

.insight-box {
  background:linear-gradient(135deg, rgba(108,92,231,0.04), rgba(0,184,148,0.04));
  border:1px solid rgba(108,92,231,0.15); border-radius:var(--radius-lg); padding:20px;
}
.insight-item { display:flex; gap:8px; padding:5px 0; font-size:13px; color:var(--text-secondary); line-height:1.5; }

/* ==================== PLANNER TAB ==================== */
.planner-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px 8px;
}
.planner-header h1 { font-size:20px; font-weight:800; }
.planner-view-toggle {
  display:flex; gap:0; background:var(--bg-input); border-radius:var(--radius-md);
  padding:3px; border:1px solid var(--border);
}
.pvt-btn {
  padding:6px 14px; font-size:12px; font-weight:600; border:none; border-radius:var(--radius-sm);
  background:none; color:var(--text-muted); cursor:pointer; transition:all var(--transition-fast);
  font-family:inherit;
}
.pvt-btn.active { background:var(--primary); color:white; box-shadow:0 2px 8px rgba(108,92,231,0.3); }
.pvt-btn:hover:not(.active) { color:var(--text-primary); }

/* Date Navigator */
.planner-date-nav {
  display:flex; align-items:center; gap:4px; padding:8px 16px 12px; justify-content:center;
}
.pdn-arrow {
  background:none; border:none; color:var(--text-muted); font-size:14px;
  cursor:pointer; padding:8px; transition:all var(--transition-fast);
}
.pdn-arrow:hover { color:var(--text-primary); }
.pdn-dates { display:flex; gap:6px; flex:1; justify-content:center; }
.pdn-date {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 12px; border-radius:var(--radius-md); border:none;
  background:none; cursor:pointer; transition:all var(--transition-fast);
  font-family:inherit; position:relative;
}
.pdn-date:hover { background:var(--bg-input); }
.pdn-date.active {
  background:var(--primary); color:white; box-shadow:0 2px 12px rgba(108,92,231,0.4);
}
.pdn-dayname { font-size:10px; font-weight:600; color:var(--text-muted); }
.pdn-date.active .pdn-dayname { color:rgba(255,255,255,0.8); }
.pdn-day { font-size:18px; font-weight:800; color:var(--text-primary); }
.pdn-date.active .pdn-day { color:white; }
.pdn-dot {
  width:4px; height:4px; border-radius:50%; background:var(--primary-light);
  position:absolute; bottom:4px;
}
.pdn-date.active .pdn-dot { background:white; }

/* Daily Summary */
.planner-daily-summary {
  display:flex; align-items:center; justify-content:space-around;
  padding:10px 16px; margin:0 16px 12px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-md);
}
.pds-item { display:flex; flex-direction:column; align-items:center; gap:1px; }
.pds-num { font-size:18px; font-weight:800; }
.pds-label { font-size:10px; color:var(--text-muted); font-weight:600; }
.pds-divider { width:1px; height:24px; background:var(--border); }

/* Timeline */
.planner-timeline { padding:0 16px; }
.pt-hour-row { display:flex; gap:10px; min-height:28px; }
.pt-time {
  width:32px; font-size:10px; font-weight:600; color:var(--text-muted);
  text-align:right; padding-top:2px; flex-shrink:0;
}
.pt-content {
  flex:1; border-left:1px solid var(--border); padding-left:12px;
  padding-bottom:4px; min-height:28px;
}
.pt-empty-slot {
  height:20px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; cursor:pointer; transition:all var(--transition-fast);
}
.pt-empty-slot:hover { background:var(--bg-input); }

.pt-item {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  margin-bottom:4px; cursor:pointer; transition:all var(--transition-normal);
}
.pt-item:hover { border-color:var(--border-light); transform:translateX(3px); }
.pt-item:active { transform:scale(0.98); }
.pt-item.done { opacity:0.55; }
.pt-item.done .pt-item-title { text-decoration:line-through; }
.pt-item.cat-assignment { border-left:3px solid #FF9F43; }
.pt-item.cat-class { border-left:3px solid var(--primary); }
.pt-item.cat-explore { border-left:3px solid var(--accent); }
.pt-item.cat-study { border-left:3px solid #6C5CE7; }
.pt-item.cat-routine { border-left:3px solid #A29BFE; }
.pt-item.cat-activity { border-left:3px solid #00CEC9; }
.pt-item.cat-teach { border-left:3px solid var(--teach-green); }
.pt-item.cat-personal { border-left:3px solid #636e72; }

.pt-item-left { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.pt-item-check { font-size:16px; color:var(--text-muted); }
.pt-item-color { width:3px; height:24px; border-radius:2px; display:none; }
.pt-item-body { flex:1; min-width:0; }
.pt-item-title-row { display:flex; align-items:center; gap:4px; }
.pt-item-icon { font-size:12px; }
.pt-item-title { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-item-meta { font-size:10px; color:var(--text-muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-item-detail { color:var(--text-secondary); }
.pt-item-right { flex-shrink:0; }
.pt-ai-badge {
  font-size:9px; font-weight:700; color:var(--primary-light);
  background:rgba(108,92,231,0.15); padding:2px 5px; border-radius:4px;
}

/* Weekly Planner */
.planner-week-header {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:8px 16px 12px;
}
.pw-month { font-size:14px; font-weight:700; color:var(--text-primary); }

.planner-week-grid {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:3px;
  padding:0 8px; margin-bottom:8px;
}
.pw-day {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:6px 4px; min-height:120px; cursor:pointer; transition:all var(--transition-fast);
  overflow:hidden;
}
.pw-day:hover { border-color:var(--primary-light); }
.pw-day.today { border-color:var(--primary); background:rgba(108,92,231,0.05); }
.pw-day-header { text-align:center; margin-bottom:4px; }
.pw-dayname { font-size:9px; font-weight:600; color:var(--text-muted); display:block; }
.pw-daynum { font-size:14px; font-weight:700; color:var(--text-primary); }
.pw-daynum.today { color:var(--primary-light); }

.pw-items { display:flex; flex-direction:column; gap:2px; }
.pw-item {
  font-size:8px; padding:2px 3px; border-radius:3px;
  background:var(--bg-input); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--text-secondary); line-height:1.3;
}
.pw-item.pw-deadline {
  background:rgba(255,107,107,0.15); color:var(--accent); font-weight:700;
  border-left:none;
}
.pw-item-time { color:var(--text-muted); margin-right:2px; }
.pw-item-title { }
.pw-more { font-size:8px; color:var(--text-muted); text-align:center; padding:2px 0; }
.pw-empty { font-size:10px; color:var(--text-muted); text-align:center; padding:8px 0; opacity:0.3; }
.pw-assignment-row {
  display:flex; align-items:center; gap:4px; padding:8px 0;
  border-bottom:1px solid rgba(48,54,61,0.3); font-size:13px; cursor:pointer;
  transition:all var(--transition-fast);
}
.pw-assignment-row:last-child { border-bottom:none; }
.pw-assignment-row:hover { transform:translateX(2px); }

/* Monthly Planner */
.planner-month-header {
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:8px 16px 12px;
}
.pm-title { font-size:16px; font-weight:800; }

.planner-month-grid {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:2px;
  padding:0 12px; margin-bottom:8px;
}
.pm-day-header {
  font-size:10px; font-weight:700; color:var(--text-muted);
  text-align:center; padding:6px 0;
}
.pm-day-header.sun { color:var(--accent); }
.pm-day-header.sat { color:var(--primary-light); }

.pm-cell {
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; border-radius:var(--radius-sm); cursor:pointer;
  transition:all var(--transition-fast); position:relative; background:var(--bg-card);
  border:1px solid transparent;
}
.pm-cell:hover { background:var(--bg-input); }
.pm-cell.today { border-color:var(--primary); background:rgba(108,92,231,0.1); }
.pm-cell.deadline .pm-day-num { color:var(--accent); font-weight:800; }
.pm-cell.empty { background:none; cursor:default; }
.pm-day-num { font-size:13px; font-weight:600; color:var(--text-primary); }
.pm-dots { display:flex; gap:2px; }
.pm-dot { width:4px; height:4px; border-radius:50%; }
.pm-count { font-size:8px; color:var(--text-muted); position:absolute; bottom:2px; }

.pm-legend {
  display:flex; gap:16px; justify-content:center; padding:4px 0 8px;
  font-size:10px; color:var(--text-muted);
}
.pm-dot-lg { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:3px; vertical-align:middle; }

/* Planner Add Item */
.planner-cat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.planner-cat-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px;
  background:var(--bg-input); border:1.5px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
  font-size:11px; font-weight:600; color:var(--text-secondary);
}
.planner-cat-btn span:first-child { font-size:20px; }
.planner-cat-btn:hover, .planner-cat-btn.active {
  border-color:var(--primary); background:rgba(108,92,231,0.12);
  color:var(--primary-light); transform:translateY(-2px);
}
.planner-cat-btn:active { transform:scale(0.95); }

/* AI Floating Assistant */
.planner-ai-fab {
  position:absolute; bottom:84px; right:20px; width:54px; height:54px;
  border-radius:50%; background:linear-gradient(135deg, #6C5CE7, #00B894);
  border:none; cursor:pointer; z-index:90;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(108,92,231,0.5); transition:all var(--transition-normal);
}
.planner-ai-fab:hover { transform:scale(1.1); }
.pai-fab-icon { font-size:24px; z-index:2; }
.pai-fab-pulse {
  position:absolute; inset:-4px; border-radius:50%;
  background:linear-gradient(135deg, rgba(108,92,231,0.3), rgba(0,184,148,0.3));
  animation:pulseGlow 2s ease-in-out infinite; z-index:1;
}

.planner-ai-panel {
  position:absolute; bottom:72px; left:12px; right:12px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  z-index:95; overflow:hidden; max-height:420px;
  display:flex; flex-direction:column;
}
.pai-header {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, rgba(108,92,231,0.1), rgba(0,184,148,0.05));
}
.pai-avatar { font-size:28px; }
.pai-title { font-size:14px; font-weight:700; display:block; }
.pai-status { font-size:10px; color:var(--success); display:block; }
.pai-close {
  margin-left:auto; background:none; border:none; color:var(--text-muted);
  font-size:16px; cursor:pointer; padding:4px 8px;
}

.pai-messages {
  flex:1; overflow-y:auto; padding:12px 14px;
  max-height:200px; display:flex; flex-direction:column; gap:8px;
}
.pai-msg { display:flex; gap:8px; align-items:flex-start; }
.pai-msg.user { justify-content:flex-end; }
.pai-msg-avatar { font-size:18px; flex-shrink:0; margin-top:4px; }
.pai-msg-bubble {
  max-width:85%; padding:10px 14px; border-radius:var(--radius-md);
  font-size:13px; line-height:1.6; white-space:pre-line;
}
.pai-msg.ai .pai-msg-bubble {
  background:var(--bg-input); color:var(--text-primary);
  border-bottom-left-radius:4px;
}
.pai-msg.user .pai-msg-bubble {
  background:var(--primary); color:white;
  border-bottom-right-radius:4px;
}

.pai-suggestions {
  display:flex; gap:6px; padding:8px 14px; overflow-x:auto;
  border-top:1px solid var(--border); scrollbar-width:none;
}
.pai-suggestions::-webkit-scrollbar { display:none; }
.pai-suggestion {
  white-space:nowrap; padding:6px 12px; font-size:11px; font-weight:600;
  background:var(--bg-input); border:1px solid var(--border); border-radius:20px;
  color:var(--text-secondary); cursor:pointer; transition:all var(--transition-fast);
  font-family:inherit; flex-shrink:0;
}
.pai-suggestion:hover { border-color:var(--primary); color:var(--primary-light); }

.pai-input-row {
  display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--border);
}
.pai-input {
  flex:1; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:20px; color:var(--text-primary); font-size:13px;
  font-family:inherit; outline:none;
}
.pai-input:focus { border-color:var(--primary); }
.pai-input::placeholder { color:var(--text-muted); }
.pai-send {
  width:38px; height:38px; border-radius:50%;
  background:var(--primary); border:none; color:white;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-fast);
}
.pai-send:hover { background:var(--primary-dark); transform:scale(1.05); }

/* ==================== ASSIGNMENT RECORD ==================== */
.assignment-intro-card {
  display:flex; align-items:center; gap:14px; padding:16px;
  background:linear-gradient(135deg, rgba(255,159,67,0.1), rgba(253,203,110,0.05));
  border:1px solid rgba(255,159,67,0.25); border-radius:var(--radius-lg);
  margin-bottom:20px;
}
.assignment-intro-icon { font-size:32px; flex-shrink:0; }
.assignment-intro-card h3 { font-size:14px; font-weight:700; }
.assignment-intro-card p { font-size:12px; color:var(--text-secondary); margin-top:2px; }

.assignment-type-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.assignment-type-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px;
  background:var(--bg-input); border:1.5px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
  font-size:10px; font-weight:600; color:var(--text-secondary);
}
.assignment-type-btn span:first-child { font-size:20px; }
.assignment-type-btn:hover, .assignment-type-btn.active {
  border-color:rgba(255,159,67,0.6); background:rgba(255,159,67,0.12);
  color:#FF9F43; transform:translateY(-2px);
}
.assignment-type-btn:active { transform:scale(0.95); }

.assignment-plan-cta {
  display:flex; align-items:center; gap:14px; padding:16px;
  background:linear-gradient(135deg, rgba(108,92,231,0.1), rgba(162,155,254,0.05));
  border:1.5px solid rgba(108,92,231,0.3); border-radius:var(--radius-lg);
  margin-bottom:20px; cursor:pointer; transition:all var(--transition-normal);
}
.assignment-plan-cta:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 4px 16px rgba(108,92,231,0.15); }
.assignment-plan-cta:active { transform:scale(0.98); }
.plan-cta-icon { font-size:28px; flex-shrink:0; }
.plan-cta-content { flex:1; }
.plan-cta-content h3 { font-size:14px; font-weight:700; color:var(--primary-light); }
.plan-cta-content p { font-size:12px; color:var(--text-secondary); margin-top:2px; }

/* ==================== ASSIGNMENT PLAN ==================== */
.assignment-summary-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:16px;
}
.asm-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.asm-subject { font-size:13px; font-weight:700; }
.asm-type { font-size:11px; color:var(--text-muted); background:var(--bg-input); padding:2px 8px; border-radius:8px; }
.asm-title { font-size:17px; font-weight:800; margin-bottom:6px; }
.asm-desc { font-size:13px; color:var(--text-secondary); line-height:1.5; margin-bottom:10px; }
.asm-meta { display:flex; gap:16px; font-size:11px; color:var(--text-muted); margin-bottom:10px; }
.asm-meta i { margin-right:4px; }
.asm-progress-row { display:flex; align-items:center; gap:8px; }
.asm-progress-bar { flex:1; height:6px; background:var(--bg-input); border-radius:3px; overflow:hidden; }
.asm-progress-fill { height:100%; border-radius:3px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.asm-progress-text { font-size:12px; font-weight:700; color:var(--text-secondary); }

.plan-section { margin-bottom:16px; }
.plan-progress-mini { margin-bottom:12px; }
.plan-progress-bar { height:4px; background:var(--bg-input); border-radius:2px; overflow:hidden; }
.plan-progress-fill { height:100%; border-radius:2px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

.plan-steps { display:flex; flex-direction:column; gap:0; }
.plan-step {
  display:flex; align-items:flex-start; gap:0; position:relative;
  padding:2px 0; cursor:pointer; transition:all var(--transition-fast);
}
.plan-step:hover { transform:translateX(2px); }
.plan-step-check {
  width:36px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; z-index:2; cursor:pointer; padding-top:8px;
}
.plan-step-line {
  position:absolute; left:17px; top:30px; bottom:-2px; width:2px;
  background:var(--border); z-index:1;
}
.plan-step-line.last { display:none; }
.plan-step-line.done { background:var(--success); }
.plan-step-content {
  flex:1; padding:8px 12px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); margin-left:4px; margin-bottom:6px;
  transition:all var(--transition-fast);
}
.plan-step-content.highlight {
  border-color:rgba(108,92,231,0.4); background:rgba(108,92,231,0.08);
  box-shadow:0 2px 8px rgba(108,92,231,0.1);
}
.plan-step.done .plan-step-content { opacity:0.6; }
.plan-step.done .plan-step-title { text-decoration:line-through; }
.plan-step-header { display:flex; justify-content:space-between; margin-bottom:2px; }
.plan-step-num { font-size:10px; font-weight:700; color:var(--primary-light); }
.plan-step-date { font-size:10px; color:var(--text-muted); }
.plan-step-title { font-size:13px; font-weight:600; }

.ai-plan-card {
  background:linear-gradient(135deg, rgba(108,92,231,0.08), rgba(0,184,148,0.04));
  border:1px solid rgba(108,92,231,0.2); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:16px;
}

.assignment-completed-badge {
  text-align:center; padding:12px; margin-top:8px;
  background:rgba(0,184,148,0.1); border:1px solid rgba(0,184,148,0.25);
  border-radius:var(--radius-md); color:var(--success); font-size:14px; font-weight:600;
}

/* ==================== ASSIGNMENT LIST ==================== */
.header-add-btn {
  background:rgba(108,92,231,0.15); border:1px solid rgba(108,92,231,0.3);
  border-radius:var(--radius-sm); color:var(--primary-light); width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:14px; transition:all var(--transition-fast);
}
.header-add-btn:hover { background:rgba(108,92,231,0.25); }

.assignment-stats-row { display:flex; gap:8px; margin-bottom:16px; }
.assignment-stat-card {
  flex:1; text-align:center; padding:12px 8px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-md);
}
.assignment-stat-num { font-size:22px; font-weight:800; display:block; }
.assignment-stat-label { font-size:10px; color:var(--text-muted); font-weight:600; }

.assignment-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:14px; margin-bottom:10px; cursor:pointer; transition:all var(--transition-normal);
  position:relative; overflow:hidden;
}
.assignment-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
}
.assignment-card.urgent::before { background:var(--accent); }
.assignment-card.warning::before { background:var(--warning); }
.assignment-card.normal::before { background:var(--primary); }
.assignment-card.completed::before { background:var(--success); }
.assignment-card.completed { opacity:0.7; }
.assignment-card:hover { border-color:var(--border-light); transform:translateY(-2px); box-shadow:var(--shadow); }
.assignment-card:active { transform:scale(0.98); }

.ac-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ac-subject-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; }
.ac-type { font-size:10px; color:var(--text-muted); background:var(--bg-input); padding:2px 6px; border-radius:4px; }
.ac-title { font-size:15px; font-weight:700; margin-bottom:4px; }
.ac-desc { font-size:12px; color:var(--text-secondary); line-height:1.4; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-bottom {}
.ac-meta { display:flex; gap:12px; font-size:11px; color:var(--text-muted); margin-bottom:8px; }
.ac-meta i { margin-right:3px; }
.ac-progress-row { display:flex; align-items:center; gap:8px; }
.ac-progress-bar { flex:1; height:4px; background:var(--bg-input); border-radius:2px; overflow:hidden; }
.ac-progress-fill { height:100%; border-radius:2px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.ac-progress-text { font-size:11px; font-weight:700; color:var(--text-secondary); }
.ac-plan-count { font-size:10px; color:var(--text-muted); }

.add-assignment-btn {
  width:100%; padding:14px; background:none; border:2px dashed var(--border);
  border-radius:var(--radius-lg); color:var(--text-muted); font-size:14px; font-weight:600;
  cursor:pointer; transition:all var(--transition-fast); font-family:inherit; margin-top:4px;
}
.add-assignment-btn:hover { border-color:var(--primary); color:var(--primary-light); background:rgba(108,92,231,0.05); }
.add-assignment-btn i { margin-right:6px; }

/* D-Day Badges */
.assignment-dday {
  font-size:11px; font-weight:700; padding:3px 8px; border-radius:8px;
  white-space:nowrap;
}
.assignment-dday.urgent { background:rgba(255,107,107,0.15); color:var(--accent); animation:pulseSmall 1.5s ease-in-out infinite; }
.assignment-dday.warning { background:rgba(243,156,18,0.15); color:var(--warning); }
.assignment-dday.normal { background:rgba(108,92,231,0.15); color:var(--primary-light); }
.assignment-dday.completed { background:rgba(0,184,148,0.15); color:var(--success); }

/* Upcoming Assignment Cards (Home Tab) */
.upcoming-assignments { display:flex; flex-direction:column; gap:8px; }
.upcoming-assignment-card {
  display:flex; align-items:center; gap:10px; padding:12px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-normal);
}
.upcoming-assignment-card:hover { border-color:var(--primary); transform:translateX(4px); }
.upcoming-assignment-card:active { transform:scale(0.98); }
.upcoming-assignment-card.urgent { border-left:3px solid var(--accent); }
.upcoming-assignment-card.warning { border-left:3px solid var(--warning); }
.upcoming-assignment-card.normal { border-left:3px solid var(--primary); }

.ua-left { flex-shrink:0; }
.ua-dday-badge {
  font-size:12px; font-weight:800; padding:6px 10px; border-radius:10px;
  text-align:center; min-width:48px;
}
.ua-dday-badge.urgent { background:rgba(255,107,107,0.15); color:var(--accent); }
.ua-dday-badge.warning { background:rgba(243,156,18,0.15); color:var(--warning); }
.ua-dday-badge.normal { background:rgba(108,92,231,0.15); color:var(--primary-light); }

.ua-center { flex:1; min-width:0; }
.ua-subject-row { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.ua-subject-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.ua-subject { font-size:12px; font-weight:600; color:var(--text-secondary); }
.ua-type { font-size:10px; color:var(--text-muted); background:var(--bg-card); padding:1px 5px; border-radius:4px; }
.ua-title { font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:4px; }
.ua-progress-row { display:flex; align-items:center; gap:6px; }
.ua-progress-bar { flex:1; height:3px; background:var(--bg-card); border-radius:2px; overflow:hidden; }
.ua-progress-fill { height:100%; border-radius:2px; }
.ua-progress-text { font-size:10px; color:var(--text-muted); font-weight:600; }
.ua-right { flex-shrink:0; color:var(--text-muted); font-size:12px; }

/* Assignment Mini Row (Record Tab) */
.assignment-mini-row {
  display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid rgba(48,54,61,0.3); cursor:pointer; transition:all var(--transition-fast);
}
.assignment-mini-row:last-child { border-bottom:none; }
.assignment-mini-row:hover { transform:translateX(2px); }
.assignment-mini-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.assignment-mini-info { flex:1; min-width:0; }
.assignment-mini-subject { font-size:11px; color:var(--text-muted); font-weight:600; display:block; }
.assignment-mini-title { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.assignment-mini-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.assignment-mini-bar { width:50px; height:3px; background:var(--bg-input); border-radius:2px; overflow:hidden; }
.assignment-mini-bar-fill { height:100%; border-radius:2px; }

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes popBounce { 0%{transform:scale(0)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
@keyframes countUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 20px rgba(108,92,231,0.3)} 50%{box-shadow:0 0 30px rgba(108,92,231,0.5)} }
@keyframes pulseSmall { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
@keyframes pulseBtn { 0%,100%{box-shadow:0 0 0 0 rgba(108,92,231,0.3)} 50%{box-shadow:0 0 0 6px rgba(108,92,231,0)} }
@keyframes subtleShine { 0%,100%{opacity:1} 50%{opacity:0.7} }
@keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes avatarGlow { 0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,0.3)} 50%{box-shadow:0 0 20px 4px rgba(255,215,0,0.15)} }
@keyframes waveAnim { 0%,100%{transform:scaleY(0.5)} 50%{transform:scaleY(1)} }

/* Stagger animation for list items */
.stagger-1 { animation-delay:0.05s; }
.stagger-2 { animation-delay:0.1s; }
.stagger-3 { animation-delay:0.15s; }
.stagger-4 { animation-delay:0.2s; }
.stagger-5 { animation-delay:0.25s; }
.stagger-6 { animation-delay:0.3s; }

.animate-in { animation:fadeIn 0.3s ease both; }
.animate-slide { animation:slideUp 0.35s ease both; }
.animate-slide-left { animation:slideLeft 0.3s ease both; }

/* ==================== ACADEMY GRID TIMETABLE ==================== */

/* Academy grid layout: 7 days (월~일) + period column */
.ac-grid {
  display:grid;
  grid-template-columns:16px repeat(7, 1fr);
  gap:2px;
  font-size:10px;
  margin-top:8px;
}
.ac-grid-header {
  font-size:11px; font-weight:700; text-align:center;
  padding:6px 2px; color:var(--text-secondary);
}
.ac-grid-header.weekend { color:#E056A0; }
.ac-grid-period {
  font-size:9px; font-weight:700; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  padding:2px 0;
}

/* Academy grid cells */
.ac-grid-cell {
  min-height:56px; border-radius:6px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:all var(--transition-fast); overflow:hidden;
  border:1px solid var(--border);
}
.ac-grid-cell.empty {
  background:var(--bg-input);
}
.ac-grid-cell.empty.editable { cursor:pointer; }
.ac-grid-cell.empty.editable:hover {
  background:rgba(224,86,160,0.08); border-color:rgba(224,86,160,0.3);
  transform:scale(1.03);
}
.ac-grid-cell.filled {
  cursor:pointer; padding:4px 2px 0;
}
.ac-grid-cell.filled:hover {
  transform:scale(1.03); box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.ac-grid-cell.selected {
  border:2px solid var(--primary-light) !important;
  box-shadow:0 0 10px rgba(108,92,231,0.4);
}

/* Cell inner content */
.ac-cell-name {
  font-size:9px; font-weight:700; text-align:center;
  line-height:1.2; padding:2px 2px 0; word-break:keep-all;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  flex:1; display:flex; align-items:center; justify-content:center;
}

/* Time ribbon */
.ac-cell-time-ribbon {
  width:100%; padding:2px 0; font-size:8px; font-weight:700;
  color:#fff; text-align:center; border-radius:0 0 5px 5px;
  margin-top:auto; letter-spacing:-0.3px;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

/* ==================== ACADEMY DETAIL PANEL ==================== */

.ac-detail-panel {
  background:var(--bg-card); border-radius:var(--radius-md);
  padding:16px; margin-bottom:16px; border:1px solid var(--border);
}
.ac-detail-header { margin-bottom:12px; }
.ac-detail-title-row {
  display:flex; align-items:center; justify-content:space-between;
}
.ac-detail-title {
  font-size:16px; font-weight:700;
}
.ac-detail-subtitle {
  font-size:13px; color:var(--text-secondary); margin-top:2px;
}
.ac-detail-close {
  background:none; border:none; color:var(--text-muted); font-size:16px;
  cursor:pointer; padding:4px 8px; border-radius:var(--radius-sm);
  transition:all var(--transition-fast);
}
.ac-detail-close:hover { color:var(--text-primary); background:var(--bg-input); }

.ac-detail-body { display:flex; flex-direction:column; gap:8px; }
.ac-detail-row {
  display:flex; align-items:center; gap:10px; font-size:13px;
  padding:6px 0; border-bottom:1px solid var(--border);
}
.ac-detail-row:last-child { border-bottom:none; }
.ac-detail-icon { font-size:16px; flex-shrink:0; width:24px; text-align:center; }
.ac-detail-label {
  font-weight:600; color:var(--text-secondary); min-width:60px;
}
.ac-detail-value { color:var(--text-primary); flex:1; }

.ac-detail-actions {
  display:flex; gap:8px; margin-top:12px;
}

/* ==================== TIMETABLE MANAGEMENT ==================== */

/* Header action button */
.header-action-btn {
  background:rgba(108,92,231,0.2); border:1px solid rgba(108,92,231,0.3);
  color:var(--primary-light); padding:6px 14px; border-radius:var(--radius-md);
  font-size:12px; font-weight:600; cursor:pointer; display:flex;
  align-items:center; gap:6px; transition:all var(--transition-fast);
  font-family:inherit;
}
.header-action-btn:hover { background:rgba(108,92,231,0.3); }

/* TT editor enhancements */
.tt-editor-cell.selected {
  border:2px solid var(--primary-light) !important;
  box-shadow:0 0 12px rgba(108,92,231,0.4);
  transform:scale(1.05);
}
.tt-editor-cell.editable { cursor:pointer; }
.tt-editor-cell.editable:hover { transform:scale(1.05); border-color:var(--primary-light) !important; }

/* TT edit panel */
.tt-edit-panel {
  background:var(--bg-input); border-radius:var(--radius-md);
  padding:12px; border:1px solid var(--border);
}
.tt-subject-selector {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.tt-subj-btn {
  padding:6px 12px; border-radius:var(--radius-md); font-size:12px;
  font-weight:600; border:1px solid var(--border); background:var(--bg-card);
  cursor:pointer; transition:all var(--transition-fast); font-family:inherit;
}
.tt-subj-btn:hover { background:var(--bg-card-hover); }
.tt-subj-btn.active {
  background:var(--primary)22; border-color:var(--primary-light);
  box-shadow:0 0 8px rgba(108,92,231,0.3);
}

/* Academy section */
.academy-list { display:flex; flex-direction:column; gap:8px; }
.academy-card {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px; background:var(--bg-input); border-radius:var(--radius-md);
  border:1px solid var(--border); transition:all var(--transition-fast);
}
.academy-card:hover { background:var(--bg-card-hover); }
.academy-card-left {
  display:flex; align-items:center; gap:12px; flex:1;
  padding-left:12px;
}
.academy-day-badge {
  width:32px; height:32px; border-radius:var(--radius-full);
  background:rgba(108,92,231,0.15); display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700;
  color:var(--primary-light); flex-shrink:0;
}
.academy-info { flex:1; min-width:0; }
.academy-name { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
.academy-detail {
  display:flex; gap:8px; font-size:11px; color:var(--text-secondary);
  flex-wrap:wrap;
}
.academy-memo { font-size:11px; color:var(--text-muted); margin-top:2px; }

.academy-card-actions { display:flex; gap:4px; }
.academy-edit-btn, .academy-del-btn {
  width:32px; height:32px; border-radius:var(--radius-sm);
  border:none; cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:12px; transition:all var(--transition-fast);
}
.academy-edit-btn {
  background:rgba(108,92,231,0.15); color:var(--primary-light);
}
.academy-edit-btn:hover { background:rgba(108,92,231,0.3); }
.academy-del-btn {
  background:rgba(255,107,107,0.15); color:var(--accent);
}
.academy-del-btn:hover { background:rgba(255,107,107,0.3); }

/* Academy add intro */
.academy-add-intro {
  display:flex; align-items:center; gap:16px; padding:16px;
  background:var(--bg-input); border-radius:var(--radius-md);
  border:1px solid var(--border); margin-bottom:16px;
}
.academy-add-intro h3 { font-size:14px; font-weight:600; color:var(--text-primary); }
.academy-add-intro p { font-size:12px; color:var(--text-secondary); margin-top:2px; }

/* Color picker */
.color-picker-row {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;
}
.color-pick-btn {
  width:32px; height:32px; border-radius:var(--radius-full);
  border:3px solid transparent; cursor:pointer;
  transition:all var(--transition-fast); position:relative;
}
.color-pick-btn:hover { transform:scale(1.1); }
.color-pick-btn.active {
  border-color:var(--text-primary);
  box-shadow:0 0 12px rgba(255,255,255,0.3);
  transform:scale(1.15);
}
.color-pick-btn.active::after {
  content:'✓'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); color:#fff; font-size:14px;
  font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.5);
}

/* My menu */
.my-menu-list { display:flex; flex-direction:column; gap:4px; }
.my-menu-item {
  display:flex; align-items:center; gap:12px; padding:12px;
  border-radius:var(--radius-md); cursor:pointer;
  transition:all var(--transition-fast);
}
.my-menu-item:hover { background:var(--bg-input); }
.my-menu-icon {
  width:40px; height:40px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.my-menu-text { flex:1; min-width:0; }
.my-menu-title { font-size:14px; font-weight:600; color:var(--text-primary); display:block; }
.my-menu-desc { font-size:12px; color:var(--text-secondary); display:block; margin-top:2px; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  body { padding:8px; }
  #phone-frame { width:100%; height:calc(100vh - 100px); border-radius:20px; }
  .stats-row { grid-template-columns:repeat(2, 1fr); }
  .dir-grid { grid-template-columns:1fr; }
  #desktop-content { border-radius:var(--radius-md); }
  .desk-tabs { padding:0 16px; }
  .desk-body { padding:16px; }
}

/* ===== 2축 9단계 질문 코칭 시스템 CSS ===== */

/* Coaching Banner */
.coaching-banner {
  display:flex; align-items:center; gap:12px; padding:14px;
  background:linear-gradient(135deg, rgba(108,92,231,0.12), rgba(224,86,160,0.08));
  border:1px solid rgba(108,92,231,0.2); border-radius:var(--radius-md);
  margin-bottom:16px;
}
.coaching-banner-icon { font-size:28px; }
.coaching-banner-text strong { color:var(--primary-light); font-size:14px; display:block; }
.coaching-banner-text p { font-size:11px; color:var(--text-secondary); margin-top:2px; line-height:1.4; }

/* Axis Selector */
.axis-selector { display:flex; gap:8px; }
.axis-btn {
  flex:1; padding:12px 8px; border-radius:var(--radius-md); border:1.5px solid var(--border);
  background:var(--bg-card); cursor:pointer; text-align:center; transition:all var(--transition-fast);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.axis-btn span { font-size:12px; font-weight:600; color:var(--text-primary); }
.axis-btn small { font-size:10px; color:var(--text-muted); }
.axis-btn .axis-icon { font-size:24px; }
.axis-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.08); }
.axis-btn.active span { color:var(--primary-light); }

/* Input Hint */
.input-hint {
  font-size:11px; color:var(--text-secondary); margin-top:6px; padding:6px 10px;
  background:rgba(253,203,110,0.1); border-radius:6px; border:1px solid rgba(253,203,110,0.2);
  line-height:1.4;
}
.input-hint strong { color:var(--accent-warm); }

/* AI Diagnosis Card */
.ai-diagnosis-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px; margin-bottom:16px;
}
.diag-question-echo {
  padding:10px 12px; background:var(--bg-input); border-radius:8px; margin:10px 0 12px;
  font-size:12px; line-height:1.5;
}
.diag-q-label { color:var(--text-muted); font-weight:600; display:block; margin-bottom:4px; font-size:11px; }
.diag-q-text { color:var(--text-primary); }

/* Diagnosis Checklist */
.diag-checklist { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.diag-check-item {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--bg-input); border-radius:8px; font-size:12px;
}
.diag-check-item.pass { border-left:3px solid var(--success); }
.diag-check-item.fail { border-left:3px solid var(--accent); opacity:0.8; }
.diag-check-icon { font-size:14px; flex-shrink:0; }
.diag-check-label { font-weight:700; color:var(--text-primary); white-space:nowrap; }
.diag-check-detail { color:var(--text-secondary); flex:1; }

/* Diagnosis Result */
.diag-result {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  background:linear-gradient(135deg, rgba(108,92,231,0.1), rgba(0,184,148,0.1));
  border-radius:8px; margin-bottom:12px; font-size:13px; font-weight:600;
}
.diag-arrow { font-size:16px; color:var(--primary-light); }
.diag-result-name { color:var(--text-primary); flex:1; }
.diag-xp { color:var(--xp-gold); font-weight:700; font-size:14px; }

/* Diagnosis Hint */
.diag-hint {
  display:flex; gap:8px; padding:10px 12px; background:rgba(253,203,110,0.08);
  border:1px solid rgba(253,203,110,0.2); border-radius:8px; margin-bottom:12px;
}
.diag-hint-icon { font-size:16px; flex-shrink:0; }
.diag-hint-text { font-size:11px; color:var(--text-secondary); line-height:1.5; }
.diag-hint-text strong { color:var(--text-primary); }

/* Diagnosis Actions */
.diag-actions { display:flex; gap:8px; }
.btn-challenge {
  flex:1; padding:12px; border-radius:var(--radius-md); border:none;
  background:linear-gradient(135deg, #FF6B6B, #E056A0); color:#fff;
  font-weight:700; font-size:13px; cursor:pointer; transition:all var(--transition-fast);
}
.btn-challenge:hover { transform:scale(1.02); box-shadow:0 4px 12px rgba(255,107,107,0.4); }

/* Challenge Mode */
.challenge-mode {
  background:var(--bg-card); border:1px solid rgba(255,107,107,0.3); border-radius:var(--radius-md);
  padding:16px; margin-bottom:16px;
}
.challenge-header { text-align:center; margin-bottom:12px; }
.challenge-header span { font-size:28px; }
.challenge-header h3 { color:var(--accent); margin:4px 0; font-size:15px; }
.challenge-header p { font-size:12px; color:var(--text-secondary); }
.challenge-result {
  display:flex; align-items:center; gap:8px; padding:10px; background:rgba(0,184,148,0.1);
  border-radius:8px; font-size:12px; font-weight:600;
}
.challenge-result .diag-xp { color:var(--success); }

/* Socrates Mode */
.socrates-entry { margin-bottom:8px; }
.btn-socrates {
  width:100%; display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:var(--bg-card); border:1.5px solid rgba(108,92,231,0.3); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-fast);
}
.btn-socrates:hover { border-color:var(--primary-light); background:rgba(108,92,231,0.05); }
.socrates-icon { font-size:28px; }
.socrates-text { flex:1; text-align:left; }
.socrates-text strong { color:var(--primary-light); font-size:13px; display:block; }
.socrates-text small { color:var(--text-muted); font-size:11px; }

.socrates-mode {
  background:var(--bg-card); border:1px solid rgba(108,92,231,0.3); border-radius:var(--radius-md);
  padding:16px; margin-bottom:16px;
}
.socrates-header { text-align:center; margin-bottom:12px; }
.socrates-header span { font-size:28px; }
.socrates-header h3 { color:var(--primary-light); margin:4px 0; }
.socrates-header p { font-size:12px; color:var(--text-secondary); }

.socrates-chat { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.socrates-msg { display:flex; gap:8px; }
.socrates-msg.student { justify-content:flex-end; }
.socrates-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; background:rgba(108,92,231,0.1); flex-shrink:0; }
.socrates-bubble {
  max-width:80%; padding:10px 12px; border-radius:12px; font-size:12px; line-height:1.5;
  background:var(--bg-input); color:var(--text-primary);
}
.socrates-bubble.student-bubble { background:rgba(108,92,231,0.1); border-radius:12px 12px 4px 12px; }
.socrates-stage-tag {
  display:inline-block; margin-top:6px; padding:3px 8px; border-radius:4px;
  font-size:10px; font-weight:600; color:var(--primary-light); background:rgba(108,92,231,0.1);
}

.socrates-input-row { display:flex; gap:8px; }
.socrates-complete {
  text-align:center; padding:12px; background:rgba(0,184,148,0.08);
  border-radius:8px; border:1px solid rgba(0,184,148,0.2);
}
.socrates-complete-icon { font-size:32px; margin-bottom:4px; }
.socrates-complete p { font-size:13px; margin:4px 0; }
.socrates-xp { color:var(--xp-gold); font-weight:700; font-size:14px; }

/* Classification Table (Accordion) */
.classification-details { margin-bottom:12px; }
.classification-summary {
  cursor:pointer; padding:10px 14px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); font-size:13px; font-weight:600; color:var(--text-primary);
  display:flex; align-items:center; gap:8px; list-style:none;
}
.classification-summary::-webkit-details-marker { display:none; }
.classification-table {
  margin-top:6px; padding:12px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.ct-section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.ct-section-title span { font-size:13px; font-weight:700; color:var(--text-primary); }
.ct-section-title small { font-size:10px; color:var(--text-muted); }
.ct-group-header {
  padding:4px 8px; border-radius:4px; font-size:11px; font-weight:700; margin:6px 0 4px;
}
.ct-group-a { background:rgba(255,107,107,0.1); color:var(--question-a); }
.ct-group-b { background:rgba(108,92,231,0.1); color:var(--question-b); }
.ct-group-c { background:rgba(0,184,148,0.1); color:var(--question-c); }
.ct-row {
  display:flex; align-items:center; gap:6px; padding:5px 8px; font-size:11px;
  border-bottom:1px solid var(--border);
}
.ct-row:last-child { border-bottom:none; }
.ct-id { font-weight:700; color:var(--text-primary); min-width:28px; }
.ct-label { color:var(--text-secondary); min-width:80px; }
.ct-name { flex:1; color:var(--text-muted); }
.ct-xp { font-weight:700; color:var(--xp-gold); }
.ct-note {
  margin-top:10px; padding:8px 10px; background:rgba(253,203,110,0.08);
  border-radius:6px; font-size:10px; color:var(--text-secondary); line-height:1.5;
}
.ct-note strong { color:var(--accent-warm); }

/* Growth 2-Axis Stats */
.growth-stats-2axis { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.growth-stat-box {
  padding:14px; background:var(--bg-input); border-radius:var(--radius-md);
  text-align:center; border:1px solid var(--border);
}
.growth-stat-header { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:6px; }
.growth-stat-header span { font-size:13px; font-weight:700; color:var(--text-primary); }
.growth-stat-header .growth-stat-icon { font-size:20px; }
.growth-stat-stars { font-size:18px; color:var(--xp-gold); letter-spacing:2px; margin-bottom:4px; }
.growth-stat-detail { font-size:13px; font-weight:700; color:var(--primary-light); }
.growth-stat-sub { font-size:10px; color:var(--text-muted); margin-top:2px; }

/* KPI Grid */
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kpi-item {
  padding:12px; background:var(--bg-input); border-radius:var(--radius-md);
  text-align:center; border:1px solid var(--border);
}
.kpi-value { font-size:22px; font-weight:800; display:block; }
.kpi-label { font-size:11px; color:var(--text-secondary); display:block; margin-top:2px; }
.kpi-target { font-size:10px; color:var(--text-muted); display:block; margin-top:2px; }

/* Question Input Wrap & Image Attach */
.question-input-wrap { position:relative; }
.q-attach-bar {
  display:flex; align-items:center; gap:8px; padding:8px 0 0;
}
.q-attach-btn {
  display:flex; align-items:center; gap:5px; padding:7px 12px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:20px;
  color:var(--text-secondary); font-size:12px; font-weight:600; cursor:pointer;
  transition:all var(--transition-fast);
}
.q-attach-btn i { font-size:14px; color:var(--primary-light); }
.q-attach-btn:hover { border-color:var(--primary); background:rgba(108,92,231,0.08); color:var(--primary-light); }
.q-attach-btn:active { transform:scale(0.96); }
.q-attach-hint { font-size:10px; color:var(--text-muted); margin-left:auto; }

/* Image Preview */
.q-image-preview-row {
  display:flex; gap:8px; padding:8px 0; flex-wrap:wrap;
}
.q-image-preview-item {
  position:relative; width:72px; height:72px; border-radius:10px; overflow:hidden;
  border:2px solid var(--border); flex-shrink:0;
}
.q-image-preview-item img {
  width:100%; height:100%; object-fit:cover;
}
.q-image-remove {
  position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,0.65); color:#fff; border:none; font-size:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-fast);
}
.q-image-remove:hover { background:var(--accent); transform:scale(1.1); }

/* Field Label Row (label + button 나란히) */
.field-label-row {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}

/* 정율질문방 버튼 */
.btn-jyqr {
  position:relative; display:inline-flex; align-items:center; gap:5px;
  padding:6px 14px; border-radius:20px; border:1.5px solid rgba(255,159,67,0.5);
  background:linear-gradient(135deg, rgba(255,159,67,0.12), rgba(255,107,107,0.08));
  color:#FF9F43; font-size:11px; font-weight:700; cursor:pointer;
  transition:all var(--transition-fast); overflow:hidden;
}
.btn-jyqr i { font-size:10px; }
.btn-jyqr:hover {
  border-color:#FF9F43; background:linear-gradient(135deg, rgba(255,159,67,0.2), rgba(255,107,107,0.15));
  transform:scale(1.03); box-shadow:0 2px 12px rgba(255,159,67,0.3);
}
.btn-jyqr:active { transform:scale(0.97); }

/* 펄스 애니메이션 — 살아있는 느낌 */
.jyqr-pulse {
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:#FF9F43;
  animation:jyqr-blink 2s ease-in-out infinite;
}
@keyframes jyqr-blink {
  0%, 100% { opacity:1; box-shadow:0 0 0 0 rgba(255,159,67,0.6); }
  50% { opacity:0.6; box-shadow:0 0 0 4px rgba(255,159,67,0); }
}

/* ==================== AI Loading Spinner ==================== */
.diag-loading-spinner {
  width:32px; height:32px; margin:0 auto;
  border:3px solid var(--bg-input);
  border-top:3px solid var(--primary);
  border-radius:50%;
  animation:diag-spin 0.8s linear infinite;
}
@keyframes diag-spin {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
.loading-spinner-wrap { display:flex; justify-content:center; align-items:center; }

/* ==================== Typing Dots (Socrates) ==================== */
.typing-dots { display:flex; gap:4px; padding:4px 0; align-items:center; }
.typing-dots span {
  width:6px; height:6px; border-radius:50%;
  background:var(--text-muted); opacity:0.4;
  animation:typing-bounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay:0.2s; }
.typing-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform:translateY(0); opacity:0.4; }
  30% { transform:translateY(-6px); opacity:1; }
}

/* ==================== Diagnosis Check Fail State ==================== */
.diag-check-item.fail { opacity:0.9; }
.diag-check-item.fail .diag-check-icon { color:#E74C3C; }
.diag-check-item.fail .diag-check-detail { color:var(--text-muted); }

/* ==================== Socrates Chat Scroll ==================== */
.socrates-chat { max-height:320px; overflow-y:auto; scroll-behavior:smooth; }

/* ==================== 정율질문방 인앱 오버레이 패널 ==================== */
.qa-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0);
  display:flex; align-items:flex-end; justify-content:center;
  transition:background 0.3s ease;
  pointer-events:none;
}
.qa-overlay.qa-overlay-visible {
  background:rgba(0,0,0,0.5);
  pointer-events:auto;
}
.qa-panel {
  width:100%; max-width:480px; height:92vh;
  background:var(--bg-card, #fff);
  border-radius:20px 20px 0 0;
  display:flex; flex-direction:column;
  box-shadow:0 -4px 30px rgba(0,0,0,0.25);
  transform:translateY(100%);
  transition:transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  overflow:hidden;
}
.qa-overlay-visible .qa-panel {
  transform:translateY(0);
}
.qa-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--border, #eee);
  flex-shrink:0;
  background:var(--bg-card, #fff);
}
.qa-panel-title {
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; color:var(--text-primary, #333);
}
.qa-panel-icon { font-size:18px; }
.qa-panel-actions { display:flex; gap:6px; }
.qa-panel-btn {
  width:32px; height:32px; border-radius:10px;
  border:none; background:var(--bg-input, #f0f0f0);
  color:var(--text-secondary, #666);
  font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s ease;
}
.qa-panel-btn:hover { background:var(--bg-hover, #e0e0e0); }
.qa-panel-close:hover { background:#FFE0E0; color:#E74C3C; }
.qa-panel-body {
  flex:1; position:relative; overflow:hidden;
}
.qa-panel-body iframe {
  width:100%; height:100%; border:none;
  background:#fff;
}
.qa-loading-bar {
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--bg-input, #f0f0f0);
  z-index:2;
  transition:opacity 0.3s ease;
}
.qa-loading-progress {
  height:100%; width:30%;
  background:linear-gradient(90deg, var(--primary, #E056A0), var(--primary-light, #FF8CC8));
  border-radius:0 3px 3px 0;
  animation:qa-load-anim 1.5s ease-in-out infinite;
}
@keyframes qa-load-anim {
  0% { width:0%; margin-left:0; }
  50% { width:60%; margin-left:20%; }
  100% { width:0%; margin-left:100%; }
}

/* 모바일 대응 */
@media (max-width:520px) {
  .qa-panel { max-width:100%; height:95vh; border-radius:16px 16px 0 0; }
}