/* SocraticAI v15.0 — Static Styles (extracted from html.ts) */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter','Noto Sans KR',sans-serif; background:#F3F4F6; }
.scrollbar-thin::-webkit-scrollbar { width:6px; }
.scrollbar-thin::-webkit-scrollbar-track { background:transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background:#D1D5DB; border-radius:3px; }
.card { background:white; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,0.06); padding:20px; }
.quote-border { border-left:3px solid #5B4CDB; padding-left:16px; }
.phase-dot { width:14px; height:14px; border-radius:50%; transition:all 0.3s; }
.phase-dot.completed { background:#312E81; }
.phase-dot.active { background:white; border:3px solid #312E81; width:18px; height:18px; }
.phase-dot.upcoming { background:#D1D5DB; }
.typing-indicator span { animation:blink 1.4s infinite both; }
.typing-indicator span:nth-child(2) { animation-delay:0.2s; }
.typing-indicator span:nth-child(3) { animation-delay:0.4s; }
@keyframes blink { 0%,80%,100%{opacity:0} 40%{opacity:1} }
.fade-in { animation:fadeIn 0.4s ease-out; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.pulse-live { animation:pulseLive 2s infinite; }
@keyframes pulseLive { 0%,100%{opacity:1} 50%{opacity:0.5} }
.weakness-card { border:2px solid #FCD34D; background:#FFFBEB; }
textarea { resize:none; }
textarea:focus { outline:none; box-shadow:0 0 0 2px rgba(91,76,219,0.3); }
.btn-primary { background:#5B4CDB; color:white; border:none; border-radius:24px; padding:12px 28px; font-weight:600; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:8px; }
.btn-primary:hover { background:#4C3FC0; transform:translateY(-1px); }
.btn-primary:disabled { background:#A78BFA; cursor:not-allowed; transform:none; }
.btn-secondary { background:#F3F4F6; color:#374151; border:1px solid #D1D5DB; border-radius:24px; padding:10px 24px; font-weight:600; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:8px; }
.btn-secondary:hover { background:#E5E7EB; }
.btn-danger { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; border-radius:24px; padding:6px 14px; font-weight:600; cursor:pointer; transition:all 0.2s; font-size:12px; display:inline-flex; align-items:center; gap:4px; }
.btn-danger:hover { background:#FECACA; }
.stat-card { background:#F9FAFB; border:1px solid #E5E7EB; border-radius:12px; padding:16px; text-align:center; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:50; backdrop-filter:blur(4px); }
.modal-content { background:white; border-radius:20px; padding:32px; max-width:600px; width:90%; max-height:85vh; overflow-y:auto; }
.report-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:60; backdrop-filter:blur(4px); }
.report-content { background:white; border-radius:20px; padding:32px; max-width:650px; width:95%; max-height:85vh; overflow-y:auto; }
.nav-tab { padding:8px 4px; border-bottom:2px solid transparent; cursor:pointer; transition:all 0.2s; }
.nav-tab.active { color:#5B4CDB; font-weight:600; border-bottom-color:#5B4CDB; }
.nav-tab:not(.active) { color:#9CA3AF; }
.nav-tab:hover:not(.active) { color:#6B7280; }
.book-card { border:2px solid #E5E7EB; border-radius:16px; padding:20px; cursor:pointer; transition:all 0.2s; }
.book-card:hover { border-color:#5B4CDB; box-shadow:0 4px 16px rgba(91,76,219,0.1); transform:translateY(-2px); }
.book-card.selected { border-color:#5B4CDB; background:#EDE9FE; }
.history-card { border:1px solid #E5E7EB; border-radius:12px; padding:16px; cursor:pointer; transition:all 0.2s; }
.history-card:hover { border-color:#5B4CDB; background:#F9FAFB; }
.upload-zone { border:2px dashed #D1D5DB; border-radius:16px; padding:32px; text-align:center; cursor:pointer; transition:all 0.2s; }
.upload-zone:hover, .upload-zone.dragover { border-color:#5B4CDB; background:#EDE9FE; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:100; padding:12px 24px; border-radius:12px; font-weight:500; font-size:14px; animation:toastIn 0.3s ease-out, toastOut 0.3s ease-in 3.7s forwards; box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.toast-error { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
.toast-success { background:#D1FAE5; color:#065F46; border:1px solid #A7F3D0; }
.toast-info { background:#DBEAFE; color:#1E40AF; border:1px solid #BFDBFE; }
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes toastOut { from{opacity:1} to{opacity:0} }
@media (max-width:768px) {
  .desktop-only { display:none !important; }
  .mobile-toggle { display:flex !important; }
  #dashboard-sidebar { position:fixed; top:0; right:-100%; width:100%; height:100vh; z-index:40; transition:right 0.3s ease-in-out; }
  #dashboard-sidebar.mobile-open { right:0; }
}
@media (min-width:769px) { .mobile-toggle { display:none !important; } }