/* ==========================================================================
   nevla - Sistema de Diseño CSS (Modo Oscuro Elegante)
   ========================================================================== */

:root {
  /* Paleta de Colores Principal — Lilac/Violet/Beige/White/Gray */
  --bg-dark: #0f0e14;
  --bg-sidebar: #16141c;
  --bg-card: #1d1a26;
  --bg-surface: #242130;
  --bg-hover: rgba(168, 143, 217, 0.08);
  --bg-chat-user: linear-gradient(135deg, #a88fe9, #c0b0f0);
  --bg-chat-agent: #1d1a26;

  --border-color: rgba(196, 178, 235, 0.12);
  --border-active: rgba(168, 143, 217, 0.5);

  --primary: #a88fd9;
  --primary-hover: #9578d0;
  --accent-violet: #c0a8e8;
  --accent-lilac: #d4c4f0;
  --accent-lilac-light: #ebe6f7;
  --accent-pearl: #f5f0eb;
  --accent-beige: #e8e0d8;
  --accent-rose: #d4b8c8;
  --niv-pearl: #faf6f1;
  --niv-light: #e6d9f4;
  --niv-lilac: #c1a7e2;
  --niv-violet: #8d70b8;
  --niv-ink: #342b47;

  --text-primary: #faf9fc;
  --text-secondary: #d8d2e8;
  --text-muted: #a8a0c0;

  --success: #8fd9a8;
  --warning: #f0d48f;
  --danger: #e89595;

  /* Aliases de compatibilidad (mapean al nuevo esquema lilac/violet) */
  --accent-cyan: var(--accent-violet);
  --accent-purple: var(--primary);
  --accent-blue: var(--accent-lilac);
  --accent-blue-light: var(--accent-lilac-light);
  --accent-pink: var(--accent-rose);
  --accent-orange: var(--accent-beige);
  --accent-green: var(--success);
  --shadow-glow-blue: var(--shadow-glow-lilac);

  /* Tipografías */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Sombras y Efectos Glassmorphism */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 24px rgba(168, 143, 217, 0.3);
  --shadow-glow-purple: 0 0 26px rgba(168, 143, 217, 0.35);
  --shadow-glow-lilac: 0 0 20px rgba(196, 178, 235, 0.2);
  --shadow-glow-rose: 0 0 20px rgba(212, 184, 200, 0.18);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* ── v2 Design Tokens ── */
  --sp-2xs: 0.25rem;
  --sp-xs: 0.375rem;
  --sp-sm: 0.5rem;
  --sp-md: 0.75rem;
  --sp-lg: 1rem;
  --sp-xl: 1.5rem;
  --sp-2xl: 2rem;
  --sp-3xl: 3rem;
  --surface-hover: rgba(168, 143, 217, 0.06);
  --surface-active: rgba(168, 143, 217, 0.12);
  --border-subtle: rgba(196, 178, 235, 0.08);
  --border-strong: rgba(168, 143, 217, 0.3);
  --r-xs: 6px;
  --r-full: 9999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 120ms var(--ease-out);
  --transition-normal: 200ms var(--ease-out);
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.35rem;
  --text-3xl: 1.75rem;
  --bottom-nav-height: 64px;
}

/* Scrollbar casi invisible - oscuro y fino */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.06) transparent;
}
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.15);
}
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.05) transparent;
}
.sidebar::-webkit-scrollbar {
  width: 3px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
}
.sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
}
.chat-history {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.chat-history::-webkit-scrollbar {
  width: 4px;
}
.chat-history::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}
.chat-history:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
}

/* Reset Global */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(ellipse 65% 45% at 15% 10%, rgba(168, 143, 217, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 85% 90%, rgba(196, 178, 235, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(153, 131, 198, 0.04) 0%, transparent 70%);
  color: var(--text-primary);
  line-height: 1.6;
  height: 100vh;
  overflow: hidden;
}

/* Layout Principal Grid */
.app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* ==========================================================================
   Barra Lateral (Sidebar)
   ========================================================================== */

.sidebar {
  width: 300px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  flex-shrink: 0;
  z-index: 10;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 1.25rem;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 0;
  padding-right: 2px;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.brand-logo {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.brand-text h2 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.badge-version {
  font-size: 0.75rem;
  background-color: rgba(168, 143, 217, 0.15);
  color: var(--accent-lilac);
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid rgba(196, 178, 235, 0.3);
  font-weight: 600;
}

.btn-new-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border: 1px solid rgba(196, 178, 235, 0.25);
  border-radius: var(--radius-md);
  color: white;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(168, 143, 217, 0.35);
  transition: all 0.2s ease;
  margin-bottom: 0.5rem;
}

.btn-new-chat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(168, 143, 217, 0.5), 0 0 20px rgba(196, 178, 235, 0.25);
}

.chats-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 2px;
}

.chat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.88rem;
}

.chat-item:hover {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.chat-item.active {
  background-color: rgba(168, 143, 217, 0.12);
  border-color: var(--border-active);
  color: var(--text-primary);
}

.chat-item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
  font-weight: 500;
}

.btn-delete-chat {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.15s ease, background 0.15s ease;
}

.chat-item:hover .btn-delete-chat {
  opacity: 1;
}

.btn-delete-chat:hover {
  color: var(--danger);
}


.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.group-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
}

.group-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.badge-active-materials {
  font-size: 0.7rem;
  background-color: rgba(168, 143, 217, 0.15);
  color: var(--accent-violet);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid rgba(192, 168, 232, 0.3);
}

.btn-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(135deg, rgba(168, 143, 217, 0.2), rgba(192, 168, 232, 0.2));
  border: 1px solid var(--border-active);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
}

.btn-upload:hover {
  background: linear-gradient(135deg, var(--primary), var(--accent-violet));
  color: white;
  box-shadow: var(--shadow-glow);
}

.loaded-files-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.file-item-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(30, 41, 59, 0.7);
  border: 1px solid var(--border-color);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.file-item-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow: hidden;
}

.file-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  font-weight: 500;
}

.btn-remove-file {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px;
  transition: color 0.2s ease;
}

.btn-remove-file:hover {
  color: var(--danger);
}


.mode-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mode-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.mode-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}

.mode-btn:hover {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.mode-btn.active {
  background-color: rgba(168, 143, 217, 0.12);
  border-color: var(--border-active);
  color: var(--text-primary);
  box-shadow: 0 0 12px rgba(168, 143, 217, 0.1);
}

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

.mode-info {
  display: flex;
  flex-direction: column;
}

.mode-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
}

.mode-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mode-btn.active .mode-desc {
  color: var(--text-secondary);
}

/* Tarjeta de Materiales */
.materials-card {
  background-color: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.materials-icon {
  font-size: 1.8rem;
  opacity: 0.8;
}

.materials-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Memoria Académica v1 - Progreso */
.progress-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth-status {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: monospace;
  background: rgba(255,255,255,0.04);
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  word-break: break-all;
  line-height: 1.3;
}

.recent-attempts {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 110px;
  overflow-y: auto;
}

.attempt-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid var(--border-color);
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  gap: 0.4rem;
}

.progress-section .btn-upload {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
}

/* Footer Sidebar */
.sidebar-footer {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  margin-top: auto;
}

.sidebar-delf-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.donate-btn-sidebar {
  background: linear-gradient(135deg, rgba(255,193,7,0.15), rgba(255,152,0,0.15));
  border: 1px solid rgba(255,193,7,0.3);
  color: #ffb300;
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

.donate-btn-sidebar:hover {
  background: linear-gradient(135deg, rgba(255,193,7,0.25), rgba(255,152,0,0.25));
  border-color: rgba(255,193,7,0.5);
}

.sidebar-credits {
  text-align: center;
  margin-top: 0.3rem;
}
.sidebar-credits-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.62rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: color 0.15s;
  font-family: inherit;
}
.sidebar-credits-btn:hover {
  color: var(--accent-purple);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--success);
  box-shadow: 0 0 8px var(--success);
}

/* ==========================================================================
   Contenido Principal (Main Content & Chat)
   ========================================================================== */

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background-color: var(--bg-dark);
  position: relative;
  overflow: hidden;
}

.main-header {
  height: 48px;
  padding: 0 1.2rem;
  padding-top: env(safe-area-inset-top, 0);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(9, 13, 22, 0.8);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}

.header-title h1 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
}

.header-title p {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.btn-secondary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

/* Top Menu Bar */
.top-menu {
  display: flex;
  gap: 0.15rem;
  padding: 0.25rem 0.8rem;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.top-menu::-webkit-scrollbar { height: 0; }
.top-menu-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.55rem;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.top-menu-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
  width: 13px;
  height: 13px;
}
.top-menu-btn:hover svg,
.top-menu-btn.active svg {
  opacity: 1;
}
.top-menu-btn:hover {
  background: rgba(168, 143, 217, 0.1);
  color: var(--text-primary);
}
.top-menu-btn.active {
  background: rgba(168, 143, 217, 0.12);
  color: var(--text-primary);
  border-color: rgba(168, 143, 217, 0.3);
}

/* View Panels */
.view-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-dark);
}

/* Knowledge Hub / Tech Tree necesita el padre como flex para que el canvas tenga altura en celu */
#tech-tree-view.view-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#tech-tree-content {
  display: flex;
  flex-direction: column;
}

/* Materia cards */
.materia-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: left;
}
.materia-card:hover {
  border-color: var(--border-active);
  background: rgba(168, 143, 217, 0.08);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.materia-card h4 {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}
.materia-card p {
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* Altillo section inside materia detail */
.altillo-section {
  margin-bottom: 1rem;
}
.altillo-section h4 {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--primary);
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.3rem;
}
.altillo-link {
  display: block;
  padding: 0.35rem 0;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.83rem;
  transition: color 0.2s;
}
.altillo-link:hover {
  color: var(--primary);
}

/* Mobile responsive for top menu */
@media (max-width: 768px) {
  .top-menu {
    padding: 0.2rem 0.5rem;
    gap: 0.15rem;
    position: relative;
    z-index: 10;
  }
  .top-menu-btn {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  .view-panel {
    padding: 1rem 1rem !important;
  }
  #tech-tree-view.view-panel {
    padding: 0 !important;
  }
}

/* Área de Chat e Historial */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2rem 1rem 2rem;
  min-height: 0;
}

.chat-history {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 260px);
  max-height: calc(100dvh - 260px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-right: 0.5rem;
  scroll-behavior: smooth;
}

/* Banner de Bienvenida y Sugerencias */
.welcome-banner {
  text-align: center;
  margin: auto 0;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(135deg, rgba(36, 33, 48, 0.55), rgba(30, 27, 41, 0.55));
  border: 1px solid rgba(168, 143, 217, 0.25);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35), 0 0 30px rgba(168, 143, 217, 0.14);
}

.welcome-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}

.welcome-banner h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.welcome-banner p {
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.suggestion-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.suggestion-card:hover {
  transform: translateY(-2px);
  border-color: rgba(168, 143, 217, 0.5);
  background-color: rgba(168, 143, 217, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 20px rgba(168, 143, 217, 0.2);
}

.sugg-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary-hover);
  background: rgba(168, 143, 217, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(168, 143, 217, 0.25);
  display: inline-block;
  margin-bottom: 0.45rem;
}

.suggestion-card p {
  font-size: 0.88rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

/* Recursos Accordion */
.recursos-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.recurso-group {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.recurso-group:hover {
  border-color: rgba(139, 92, 246, 0.2);
}

.recurso-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary);
  transition: background 0.15s;
}
.recurso-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.recurso-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.recurso-header-left svg {
  color: var(--primary);
  flex-shrink: 0;
}

.recurso-chevron {
  color: var(--text-muted);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.recurso-group.open .recurso-chevron {
  transform: rotate(180deg);
}

.recurso-body {
  display: none;
  padding: 0 0.9rem 0.6rem 0.9rem;
  flex-direction: column;
  gap: 0.3rem;
}
.recurso-group.open .recurso-body {
  display: flex;
}

.recurso-link {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}
.recurso-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

.recurso-link-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
}
.recurso-link-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Burbujas de Chat */
.chat-bubble {
  display: flex;
  gap: 1rem;
  max-width: 85%;
  animation: fadeIn 0.3s ease;
}

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

.chat-bubble.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-bubble.agent {
  align-self: flex-start;
}

.bubble-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  background: transparent !important;
}

.user .bubble-avatar {
  background: var(--bg-chat-user) !important;
  color: white;
}

.agent .bubble-avatar {
  background: transparent !important;
  overflow: visible;
}

.chat-image-wrapper {
  margin-bottom: 0.6rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  max-height: 300px;
}

.chat-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 300px;
}

.bubble-content {
  background-color: var(--bg-chat-agent);
  border: 1px solid rgba(196, 178, 235, 0.12);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.user .bubble-content {
  background: var(--bg-chat-user);
  border: 1px solid rgba(196, 178, 235, 0.2);
  border-top-right-radius: 4px;
  box-shadow: 0 4px 16px rgba(168, 143, 217, 0.35);
}

.agent .bubble-content {
  border-top-left-radius: 4px;
}

/* Formato de texto dentro de respuestas de la IA */
.bubble-content p {
  margin-bottom: 0.75rem;
}
.bubble-content p:last-child {
  margin-bottom: 0;
}

.bubble-content code {
  background-color: rgba(168, 143, 217, 0.12);
  border: 1px solid rgba(196, 178, 235, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.88rem;
  color: var(--accent-lilac);
}

.bubble-content pre {
  background-color: #050811;
  padding: 1rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 0.75rem 0;
  border: 1px solid var(--border-color);
}

.bubble-content pre code {
  background: none;
  padding: 0;
  color: #e2e8f0;
}

/* Indicador de escritura (Typing Dots) */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  width: fit-content;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.typing-dot {
  width: 6px;
  height: 6px;
  background-color: var(--primary);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   Formulario de Entrada de Texto (Input Wrapper)
   ========================================================================== */

.chat-input-wrapper {
  flex-shrink: 0;
  margin-top: 1rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg-dark);
}

#chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.8rem 0.6rem 1.2rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#chat-form:focus-within {
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

#user-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: none;
  max-height: 150px;
  line-height: 1.5;
}

#user-input::placeholder {
  color: var(--text-muted);
}

.send-btn {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(168, 143, 217, 0.4);
}

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

/* ==========================================================================
   Modal de Configuración de Servidor & Conexión
   ========================================================================== */

.btn-server-config {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.btn-server-config:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--primary);
}

.auth-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 17, 0.88);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 1rem;
  overflow-y: auto;
}
.auth-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Landing Page */
.landing-page {
  display: none;
  width: 100%;
  max-width: 520px;
  text-align: center;
}
.landing-page.active {
  display: block;
  animation: landingFadeIn 0.6s ease-out;
}
@keyframes landingFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.landing-logo-wrap {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.3rem;
}
.landing-logo {
  width: 80px;
  height: 80px;
  border-radius: 16px;
}

.landing-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #a78bfa, #818cf8, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.landing-subtitle {
  font-size: 1.05rem;
  color: #cbd5e1;
  max-width: 360px;
  line-height: 1.4;
}

.landing-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  width: 100%;
  margin: 0.8rem 0;
}

.landing-feature {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: background 0.2s, border-color 0.2s;
}
.landing-feature:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(139,92,246,0.2);
}

.landing-feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #a78bfa;
}

.landing-feature span {
  font-size: 0.8rem;
  font-weight: 500;
  color: #e2e8f0;
  line-height: 1.2;
}

.landing-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2.2rem;
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 0.3rem;
}
.landing-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(99,102,241,0.5);
}

.landing-note {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 0.2rem;
}

/* Login Page */
.auth-card {
  position: relative;
  max-width: 400px;
  width: 100%;
}

.landing-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.3rem 0;
  margin-bottom: 0.8rem;
  font-family: inherit;
}
.landing-back:hover {
  color: var(--text-primary);
}

/* Hide FABs when not logged in */
.auth-backdrop.open ~ #calc-fab,
.auth-backdrop.open ~ .calc-panel,
.auth-backdrop.open ~ .calc-overlay,
.auth-backdrop.open ~ #admin-bot-fab,
.auth-backdrop.open ~ .admin-bot-panel,
.auth-backdrop.open ~ .admin-bot-overlay,
.auth-backdrop.open ~ #pomodoro-fab,
.auth-backdrop.open ~ .pom-panel,
.auth-backdrop.open ~ .pom-overlay,
.auth-backdrop.open ~ #formulas-fab {
  display: none !important;
}
.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), var(--shadow-glow);
  width: 100%;
  max-width: 380px;
  padding: 1.5rem;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(5, 8, 17, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-dialog {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), var(--shadow-glow);
  width: 92%;
  max-width: 520px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 1.25rem;
  transform: translateY(20px);
  transition: transform 0.25s ease;
}

.modal-backdrop.open .modal-dialog {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

.modal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-close-modal {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  transition: color 0.2s;
}

.btn-close-modal:hover {
  color: var(--text-primary);
}

.modal-body {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.form-group {
  margin-bottom: 1.25rem;
}

/* Polish v2 - detalles bonitos sin romper nada */
.suggestion-card { transition: all 0.2s cubic-bezier(0.4,0,0.2,1); }
.suggestion-card:hover { transform: translateY(-3px) scale(1.01); }
.chat-bubble { transition: transform 0.2s ease; }
.mode-btn.active { box-shadow: 0 0 16px rgba(168, 143, 217, 0.18); }
.progress-card, .materials-card { box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.welcome-banner { box-shadow: 0 8px 30px rgba(0,0,0,0.15); }

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-control {
  width: 100%;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  color: var(--text-primary);
  font-family: monospace;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(168, 143, 217, 0.2);
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.btn-modal-save {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-modal-save:hover {
  background: var(--primary-hover);
}

.btn-modal-reset {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-modal-reset:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

/* Botón hamburguesa - solo visible en móvil */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* Overlay oscuro cuando el drawer está abierto */
.sidebar-overlay {
  display: none;
}

/* ==========================================================================
   Responsive Design para Celulares y Tablets
   ========================================================================== */

@media (max-width: 768px) {
  .menu-toggle { display: flex; }

  .app-layout {
    flex-direction: column;
    height: calc(100vh - var(--bottom-nav-height));
    height: calc(100dvh - var(--bottom-nav-height));
  }

  .sidebar {
    position: fixed;
    top: env(safe-area-inset-top, 0); left: 0;
    width: 300px; max-width: 82vw;
    height: calc(100vh - env(safe-area-inset-top, 0));
    max-height: none;
    border-right: 1px solid var(--border-color);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    overflow-y: auto;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(5, 8, 17, 0.6);
    backdrop-filter: blur(2px);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .sidebar-overlay.open { opacity: 1; pointer-events: auto; }

  .sidebar-nav { display: flex; flex-direction: column; gap: 0.5rem; }
  .mode-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }

  /* Main content fills screen */
  .main-content {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Header: compact */
  .main-header {
    padding: 0.2rem 0.5rem;
    padding-top: calc(0.2rem + env(safe-area-inset-top, 0));
    gap: 0.3rem;
    height: auto;
    min-height: 36px;
    flex-shrink: 0;
  }
  .header-title h1 { font-size: 0.78rem; }
  .header-title p { display: none; }
  .main-header .btn-secondary {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    gap: 0.3rem;
  }

  /* Hide extra header buttons on mobile */
  .main-header .btn-secondary[title="Compartir chat"],
  .main-header .btn-secondary[title="Exportar a PDF"] { display: none; }

  /* Top menu: horizontal scroll */
  .top-menu {
    padding: 0.25rem 0.5rem;
    gap: 0.15rem;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
  }
  .top-menu::-webkit-scrollbar { display: none; }

  .top-menu-btn {
    font-size: 0.68rem;
    padding: 0.25rem 0.45rem;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: max-content;
  }

  /* Chat area: flex-grow, scroll */
  .chat-container {
    flex: 1;
    padding: 0.8rem 0.75rem;
    padding-bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chat-bubble { max-width: 92%; }

  /* Chat input: fixed at bottom */
  .chat-input-wrapper {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg-dark);
  }
  #chat-form {
    padding: 0.4rem 0.6rem 0.4rem 0.8rem;
    gap: 0.5rem;
  }
  #user-input { font-size: 16px !important; }

  /* View panels: full scroll area */
  .view-panel {
    flex: 1;
    padding: 0.6rem 0.75rem !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Welcome banner */
  .welcome-banner { padding: 1rem 0.75rem; }
  .welcome-banner h2 { font-size: 1.3rem; }
  .suggestions-grid { grid-template-columns: 1fr; }

  /* Materias grid: 2 cols, cards with proper spacing */
  #materias-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .materia-card {
    padding: 2rem 0.7rem 0.7rem !important;
    min-height: 70px;
  }
  .materia-card h4 { font-size: 0.78rem; line-height: 1.2; }
  .materia-card p { font-size: 0.68rem; }

  #materia-detail {
    margin-top: 0.5rem !important;
    padding: 0.75rem !important;
  }

  /* Formulas modal full screen on mobile */
  .formulas-panel {
    width: 100%; height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .formulas-grid { padding: 0.6rem; }

  /* Suggestion cards */
  .suggestion-card { padding: 0.5rem 0.75rem; min-height: 40px; }

  /* Exam generator modal: full screen on mobile */
  .examgen-panel {
    width: 100%; max-width: 100%; max-height: 100vh;
    border-radius: 0;
  }

  /* Landing page mobile */
  .landing-title { font-size: 1.6rem; }
  .landing-subtitle { font-size: 0.9rem; }
  .landing-features { gap: 0.45rem; }
  .landing-feature { padding: 0.5rem 0.65rem; }
  .landing-feature span { font-size: 0.72rem; }
  .landing-feature-icon { width: 32px; height: 32px; }
  .landing-feature-icon svg { width: 18px; height: 18px; }
  .landing-cta { padding: 0.75rem 1.8rem; font-size: 0.9rem; }
}

@media (max-width: 480px) {
  .main-header { padding: calc(0.2rem + env(safe-area-inset-top, 0px)) 0.4rem 0.2rem; gap: 0.3rem; min-height: 34px; }
  .header-title h1 { font-size: 0.75rem; }

  .top-menu-btn { font-size: 0.62rem; padding: 0.25rem 0.4rem; }

  #materias-grid {
    grid-template-columns: 1fr !important;
    gap: 0.4rem !important;
  }
  .materia-card { padding: 1.5rem 0.6rem 0.6rem !important; }
  .materia-card h4 { font-size: 0.82rem; }

  .chat-container { padding: 0.5rem 0.6rem; }
  .chat-bubble { max-width: 95%; }

  .chat-input-wrapper { padding: 0.3rem 0.5rem; padding-bottom: calc(0.3rem + env(safe-area-inset-bottom, 0px)); }
  #chat-form { padding: 0.35rem 0.5rem; }

  /* FABs: keep original side positions, smaller size */
  .calc-fab { bottom: 200px; left: 12px; width: 40px; height: 40px; }
  .pom-fab { bottom: 250px; left: 12px; width: 40px; height: 40px; }
  .formulas-fab { bottom: 300px; left: 12px; width: 40px; height: 40px; }
  .admin-bot-fab { bottom: 200px; right: 12px; width: 40px; height: 40px; }

  /* Hide FABs when chat is active (no view panel open) - mobile only */
  .app-layout:not(.view-open) .calc-fab,
  .app-layout:not(.view-open) .pom-fab,
  .app-layout:not(.view-open) .formulas-fab,
  .app-layout:not(.view-open) .admin-bot-fab,
  .app-layout:not(.view-open) .examgen-fab {
    display: none;
  }

  /* Calc panel bottom sheet */
  .calc-panel {
    left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 80vh;
    border-radius: 16px 16px 0 0; border-bottom: none;
  }
  .calc-row { gap: 0.15rem; }
  .calc-row button { padding: 0.4rem 0.1rem; font-size: 0.65rem; }
  .calc-fn { font-size: 0.58rem !important; }
  .calc-shift { font-size: 0.55rem !important; }

  /* Admin bot bottom sheet */
  .admin-bot-panel {
    left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 80vh;
    border-radius: 16px 16px 0 0; border-bottom: none;
  }
  .admin-bot-header { padding: 0.5rem 0.75rem; }
  .admin-bot-messages { padding: 0.5rem; }
  .admin-bot-input-wrap { padding: 0.4rem 0.5rem; padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px)); }

  .welcome-banner { padding: 0.75rem 0.6rem; }
  .welcome-banner h2 { font-size: 1.15rem; }

  /* Landing page small mobile */
  .landing-logo-wrap { width: 72px; height: 72px; border-radius: 18px; }
  .landing-logo { width: 72px; height: 72px; border-radius: 14px; }
  .landing-title { font-size: 1.35rem; }
  .landing-features { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Scientific Calculator
   ========================================================================== */

.calc-fab {
  position: fixed;
  bottom: 100px;
  left: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-purple), var(--primary));
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
  z-index: 10000;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pom-fab, .formulas-fab {
  position: fixed;
  left: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pom-fab {
  bottom: 160px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  box-shadow: 0 4px 16px rgba(168,143,217,0.4);
}

.formulas-fab {
  bottom: 220px;
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-lilac));
  box-shadow: 0 4px 16px rgba(212, 196, 240, 0.4);
}

.pom-fab:hover, .formulas-fab:hover {
  transform: scale(1.1);
}

.pom-fab.active {
  background: linear-gradient(135deg, var(--danger), #dc2626);
}

.calc-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(139, 92, 246, 0.5);
}

.calc-fab.active {
  background: linear-gradient(135deg, var(--danger), #dc2626);
}

.calc-panel {
  position: fixed;
  bottom: 160px;
  left: 20px;
  width: 320px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  overflow: hidden;
  animation: calcSlideUp 0.25s ease-out;
}

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

@keyframes adminBotSlideUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

.calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1rem;
  background: rgba(139, 92, 246, 0.1);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-purple);
}

.calc-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.calc-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.calc-display {
  padding: 0.6rem 1rem;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border-color);
  text-align: right;
}

.calc-expression {
  font-size: 0.72rem;
  color: var(--text-muted);
  min-height: 1.1rem;
  word-break: break-all;
}

.calc-result {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
}

.calc-keys {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.calc-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.25rem;
}

.calc-row button {
  padding: 0.5rem 0.2rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.calc-row button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.calc-num {
  color: var(--text-primary) !important;
  font-weight: 600;
}

.calc-op {
  color: var(--accent-cyan) !important;
  font-weight: 600;
}

.calc-fn {
  color: var(--accent-purple) !important;
  font-size: 0.68rem !important;
}

.calc-shift {
  background: rgba(139, 92, 246, 0.15) !important;
  color: var(--accent-purple) !important;
  font-weight: 700;
  font-size: 0.65rem !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  transition: all 0.15s;
}
.calc-shift.active {
  background: var(--accent-purple) !important;
  color: white !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.calc-equals {
  background: var(--primary) !important;
  color: white !important;
  font-weight: 700;
}

.calc-equals:hover {
  background: var(--primary-hover) !important;
}

.calc-clear {
  color: var(--danger) !important;
  font-weight: 600;
}

/* ==========================================================================
   Admin Bot Panel
   ========================================================================== */

.admin-bot-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.calc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.admin-bot-fab {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
  z-index: 10000;
  transition: transform 0.2s, box-shadow 0.2s;
}

.admin-bot-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(139, 92, 246, 0.5);
}

.admin-bot-fab.active {
  background: linear-gradient(135deg, var(--danger), #dc2626);
}

.admin-bot-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  border: 2px solid var(--bg-sidebar);
}

.admin-bot-panel {
  position: fixed;
  bottom: 160px;
  right: 20px;
  width: 340px;
  height: 420px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: calcSlideUp 0.25s ease-out;
}

.admin-bot-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: rgba(6, 182, 212, 0.1);
  border-bottom: 1px solid var(--border-color);
}

.admin-bot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.admin-bot-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-bot-subtitle {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.admin-bot-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.admin-bot-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.admin-bot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-bot-msg.user {
  align-self: flex-end;
  max-width: 85%;
}

.admin-bot-msg.bot {
  align-self: flex-start;
  max-width: 85%;
}

.admin-bot-bubble {
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
}

.admin-bot-msg.user .admin-bot-bubble {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  border-radius: 12px 12px 4px 12px;
}

.admin-bot-msg.bot .admin-bot-bubble {
  border-radius: 12px 12px 12px 4px;
}

.admin-bot-input-wrap {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem;
  border-top: 1px solid var(--border-color);
}

.admin-bot-input-wrap input {
  flex: 1;
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: var(--text-primary);
  outline: none;
}

.admin-bot-input-wrap input:focus {
  border-color: var(--accent-cyan);
}

.admin-bot-input-wrap button {
  background: var(--accent-cyan);
  color: white;
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.admin-bot-input-wrap button:hover {
  background: var(--primary-hover);
  transform: scale(1.05);
}
.admin-bot-input-wrap button:active {
  transform: scale(0.95);
}

.admin-bot-bubble.typing {
  display: flex;
  gap: 4px;
  padding: 0.6rem 0.8rem;
}

.admin-bot-bubble.typing span {
  width: 6px;
  height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: botTyping 1.2s infinite;
}

.admin-bot-bubble.typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.admin-bot-bubble.typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes botTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ==========================================================================
   Light Theme
   ========================================================================== */
[data-theme="light"] {
  --bg-dark: #f8fafc;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-chat-user: linear-gradient(135deg, var(--primary), var(--primary-hover));
  --bg-chat-agent: #ffffff;
  --bg-surface: #f1f5f9;
  --border-color: rgba(0, 0, 0, 0.08);
  --border-active: rgba(168, 143, 217, 0.5);
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 20px rgba(168, 143, 217, 0.1);
}

[data-theme="light"] body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
}

[data-theme="light"] .sidebar {
  background-color: var(--bg-sidebar);
  border-right-color: var(--border-color);
}

[data-theme="light"] .main-header {
  background: rgba(255, 255, 255, 0.8);
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .bubble-content {
  background-color: var(--bg-chat-agent);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .bubble-content code {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--primary);
}

[data-theme="light"] .bubble-content pre {
  background-color: #f1f5f9;
  border-color: var(--border-color);
}

[data-theme="light"] .bubble-content pre code {
  color: #1e293b;
}

[data-theme="light"] #chat-form {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="light"] .chat-history {
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}

[data-theme="light"] .typing-indicator {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="light"] .calc-panel,
[data-theme="light"] .admin-bot-panel {
  background: var(--bg-sidebar);
  border-color: var(--border-color);
}

[data-theme="light"] .calc-display {
  background: var(--bg-dark);
  border-color: var(--border-color);
}

[data-theme="light"] .admin-bot-bubble {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .modal-dialog,
[data-theme="light"] .auth-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="light"] .form-control {
  background: var(--bg-dark);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .chat-image-wrapper {
  border-color: var(--border-color);
}

[data-theme="light"] .suggestion-card {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="light"] .suggestion-card p {
  color: var(--text-primary);
}

[data-theme="light"] .recurso-link:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .recurso-header:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .recurso-link-title {
  color: var(--primary-hover);
}

.recursos-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.recursos-disclaimer svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  opacity: 0.6;
}
[data-theme="light"] .recursos-disclaimer {
  background: rgba(0, 0, 0, 0.02);
}

/* === GAMIFICATION === */
.gam-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.gam-level-card {
  background: linear-gradient(135deg, rgba(168,143,217,0.08), rgba(139,92,246,0.08));
  border-color: rgba(59,130,246,0.2);
  padding: 1.2rem;
}

[data-theme="light"] .gam-level-card {
  background: linear-gradient(135deg, rgba(168,143,217,0.05), rgba(139,92,246,0.05));
  border-color: rgba(168,143,217,0.15);
}

.gam-level-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.gam-level-icon {
  font-size: 2.5rem;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 14px;
  flex-shrink: 0;
}

.gam-level-info {
  flex: 1;
}

.gam-level-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.gam-level-num {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.gam-xp-total {
  font-size: 1.3rem;
  font-weight: 800;
  color: #8b5cf6;
  text-align: right;
  white-space: nowrap;
}

.gam-xp-bar-container {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.3rem;
}

[data-theme="light"] .gam-xp-bar-container {
  background: rgba(0,0,0,0.06);
}

.gam-xp-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent-violet));
  border-radius: 99px;
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
}

.gam-xp-bar-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
}

.gam-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  .gam-stats-row { grid-template-columns: repeat(2, 1fr); }
}

.gam-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.8rem 0.5rem;
  text-align: center;
  transition: transform 0.15s ease;
}

.gam-stat-card:hover {
  transform: translateY(-2px);
}

.gam-stat-icon {
  font-size: 1.3rem;
  margin-bottom: 0.2rem;
}

.gam-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
}

.gam-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.gam-daily-card {
  padding: 0.8rem 1rem;
}

.gam-daily-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.gam-daily-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.gam-daily-xp {
  font-size: 0.78rem;
  font-weight: 700;
  color: #8b5cf6;
}

.gam-daily-bar-container {
  width: 100%;
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.gam-daily-bar {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}

.gam-daily-bar.complete {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.gam-daily-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.gam-achievements-card {
  padding: 1.2rem;
}

.gam-achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}

@media (max-width: 600px) {
  .gam-achievements-grid { grid-template-columns: repeat(2, 1fr); }
}

.gam-achievement {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.7rem;
  text-align: center;
  opacity: 0.45;
  filter: grayscale(0.6);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.gam-achievement.unlocked {
  opacity: 1;
  filter: none;
  border-color: rgba(139,92,246,0.3);
}

.gam-achievement.unlocked:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139,92,246,0.15);
}

.gam-achievement-icon {
  font-size: 1.6rem;
  margin-bottom: 0.2rem;
}

.gam-achievement-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.1rem;
}

.gam-achievement-desc {
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.gam-achievement-xp {
  font-size: 0.65rem;
  font-weight: 700;
  color: #8b5cf6;
  margin-top: 0.2rem;
}

.gam-achievement.locked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* Level up toast */
.gam-toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-120px);
  background: linear-gradient(135deg, var(--primary), var(--accent-violet));
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  z-index: 99999;
  box-shadow: 0 8px 30px rgba(99,102,241,0.4);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;
  pointer-events: none;
}

.gam-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.gam-toast-icon {
  font-size: 1.4rem;
}

/* XP fly-up animation */
.gam-xp-fly {
  position: fixed;
  pointer-events: none;
  font-size: 0.85rem;
  font-weight: 800;
  color: #8b5cf6;
  z-index: 99998;
  animation: xpFlyUp 1.2s ease-out forwards;
}

@keyframes xpFlyUp {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1.2); }
}

/* Achievement unlock toast */
.gam-achievement-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--bg-card);
  border: 2px solid rgba(139,92,246,0.4);
  border-radius: 14px;
  padding: 0.8rem 1.2rem;
  z-index: 99999;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  opacity: 0;
  transform: translateX(120px);
  transition: all 0.5s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
  max-width: 300px;
}

.gam-achievement-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.gam-achievement-toast-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.gam-achievement-toast-info {
  flex: 1;
}

.gam-achievement-toast-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.gam-achievement-toast-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.gam-achievement-toast-xp {
  font-size: 0.72rem;
  font-weight: 700;
  color: #8b5cf6;
}

/* === POMODORO === */
.pom-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 360px;
  max-height: 90vh;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
  z-index: 10001;
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  overflow-y: auto;
  padding: 1.2rem;
}

.pom-panel.open { transform: translateY(0); }

.pom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.pom-overlay.open { opacity: 1; pointer-events: auto; }

.pom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.pom-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.pom-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  display: flex;
  transition: background 0.15s;
}

.pom-close:hover { background: var(--bg-surface); }

.pom-timer-area {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pom-circle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pom-circle-bg {
  fill: none;
  stroke: var(--bg-surface);
  stroke-width: 6;
}

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

.pom-time {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}

.pom-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  z-index: 1;
}

.pom-sessions {
  display: flex;
  gap: 6px;
  margin-top: 0.5rem;
  z-index: 1;
}

.pom-session-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-color);
  transition: all 0.3s;
}

.pom-session-dot.completed {
  background: var(--primary);
  border-color: var(--primary);
}

.pom-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.pom-btn {
  padding: 0.5rem 1.2rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}

.pom-btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
}

.pom-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(168,143,217,0.3); }

.pom-btn-secondary {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.pom-section {
  margin-bottom: 0.8rem;
}

.pom-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.pom-presets, .pom-ambient-btns {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.pom-preset, .pom-ambient {
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: all 0.15s;
}

.pom-preset.active, .pom-ambient.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.pom-stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-color);
}

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

.pom-stat-num {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
}

.pom-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .pom-panel {
    width: 100%;
    border-radius: 16px 16px 0 0;
  }
}

/* === FORMULAS === */
.formulas-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.formulas-modal.open { opacity: 1; pointer-events: auto; }

.formulas-panel {
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.formulas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border-color);
}

.formulas-header h3 { font-size: 1.05rem; color: var(--text-primary); }

.formulas-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
}

.formulas-close:hover { background: var(--bg-surface); }

.formulas-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
}

.formulas-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.88rem;
}

.formulas-grid {
  overflow-y: auto;
  padding: 1rem;
  flex: 1;
}

.formula-subject {
  margin-bottom: 1rem;
}

.formula-subject-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.formula-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.formula-card:hover {
  border-color: rgba(168,143,217,0.3);
  transform: translateY(-1px);
}

.formula-card.copied {
  border-color: #22c55e;
  background: rgba(34,197,94,0.05);
}

.formula-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.formula-expr {
  font-size: 0.9rem;
  font-weight: 700;
color: var(--primary-hover);
  font-family: 'Courier New', monospace;
  margin: 0.15rem 0;
}

.formula-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.formula-copy-hint {
  font-size: 0.65rem;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.15s;
}

.formula-card:hover .formula-copy-hint { opacity: 1; }

/* === CHANGELOG === */
.cl-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.cl-modal.open { opacity: 1; pointer-events: auto; }

.cl-panel {
  width: 90%;
  max-width: 550px;
  max-height: 75vh;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.cl-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border-color);
}

.cl-header-bar h3 { font-size: 1.05rem; color: var(--text-primary); }

.cl-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
}

.cl-close:hover { background: var(--bg-surface); }

.cl-entries {
  overflow-y: auto;
  padding: 1rem;
  flex: 1;
}

.cl-entry {
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.cl-entry:last-child { border-bottom: none; }

.cl-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.cl-version {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
}

.cl-tag {
  font-size: 0.65rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary), var(--accent-violet));
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
}

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

.cl-change {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.cl-type {
  flex-shrink: 0;
  font-size: 0.85rem;
}

/* === ONBOARDING === */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.onboarding-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 2rem;
  width: 90%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: slideUp 0.4s ease;
}

.onboarding-icon { font-size: 3rem; margin-bottom: 0.5rem; }

.onboarding-card h2 {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.onboarding-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}

.onboarding-steps {
  text-align: left;
  margin-bottom: 1.2rem;
}

.onb-step {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

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

.onb-step strong {
  font-size: 0.85rem;
  color: var(--text-primary);
}

.onb-step span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.onb-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.onb-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(168,143,217,0.3); }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* === SUGGESTION CHIPS === */
.suggestion-chips {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
  animation: fadeIn 0.3s ease;
}

.suggestion-chip {
  background: rgba(168, 143, 217, 0.1);
  border: 1px solid rgba(168, 143, 217, 0.2);
  color: var(--primary);
  padding: 0.35rem 0.7rem;
  border-radius: 99px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.suggestion-chip:hover {
  background: rgba(168, 143, 217, 0.15);
  border-color: var(--primary);
  transform: translateY(-1px);
}

[data-theme="light"] .suggestion-chip {
  background: rgba(168, 143, 217, 0.06);
  border-color: rgba(168, 143, 217, 0.15);
}

/* === CRAM MODE === */
.cram-modal {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.cram-modal.open { opacity: 1; pointer-events: auto; }

.cram-panel {
  width: 90%; max-width: 480px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.cram-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.2rem; border-bottom: 1px solid var(--border-color);
}

.cram-header h3 { font-size: 1.05rem; color: var(--text-primary); }

.cram-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 0.3rem; border-radius: 6px;
}
.cram-close:hover { background: var(--bg-surface); }

.cram-body { padding: 1.5rem; text-align: center; }

.cram-emoji { font-size: 2.5rem; margin-bottom: 0.5rem; }

.cram-input {
  width: 100%; padding: 0.7rem 1rem; border-radius: 10px;
  border: 1px solid var(--border-color); background: var(--bg-surface);
  color: var(--text-primary); font-size: 0.9rem; margin-bottom: 0.8rem;
  outline: none; box-sizing: border-box;
}
.cram-input:focus { border-color: var(--primary); }

.cram-btn {
  width: 100%; padding: 0.7rem; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 0.4rem; transition: all 0.15s;
}
.cram-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(239,68,68,0.3); }

.cram-tips { margin-top: 1rem; }
.cram-tip {
  font-size: 0.75rem; color: var(--text-muted);
  background: var(--bg-surface); padding: 0.5rem 0.8rem;
  border-radius: 8px; text-align: left;
}

/* === MNEMONICS === */
.mn-modal {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.mn-modal.open { opacity: 1; pointer-events: auto; }

.mn-panel {
  width: 90%; max-width: 500px; max-height: 80vh;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.mn-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.2rem; border-bottom: 1px solid var(--border-color);
}

.mn-header h3 { font-size: 1.05rem; color: var(--text-primary); }

.mn-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 0.3rem; border-radius: 6px;
}
.mn-close:hover { background: var(--bg-surface); }

.mn-body { padding: 1.2rem; text-align: center; overflow-y: auto; flex: 1; }

.mn-emoji { font-size: 2.5rem; margin-bottom: 0.5rem; }

.mn-input {
  width: 100%; padding: 0.7rem 1rem; border-radius: 10px;
  border: 1px solid var(--border-color); background: var(--bg-surface);
  color: var(--text-primary); font-size: 0.9rem; margin-bottom: 0.8rem;
  outline: none; box-sizing: border-box;
}
.mn-input:focus { border-color: var(--primary); }

.mn-btn {
  width: 100%; padding: 0.7rem; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.mn-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(139,92,246,0.3); }

.mn-result {
  margin-top: 1rem; text-align: left;
  font-size: 0.88rem; color: var(--text-secondary);
  line-height: 1.6;
}

.mn-content { padding: 0.5rem 0; }

.mn-loading {
  display: flex; align-items: center; gap: 0.5rem;
  justify-content: center; color: var(--text-muted);
  padding: 1rem;
}

.mn-error {
  color: var(--danger); text-align: center; padding: 1rem;
}

/* Typing dots animation */
.typing-dots {
  display: flex; gap: 4px; align-items: center;
}
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* === EXAM GENERATOR === */
.examgen-modal {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.examgen-modal.open { opacity: 1; pointer-events: auto; }

.examgen-fab {
  position: fixed;
  bottom: 230px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
  z-index: 10000;
  transition: transform 0.2s, box-shadow 0.2s;
}
.examgen-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.5);
}

/* ── Chat Overlay Panel ── */
.chat-overlay-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: 10000;
}
.chat-overlay-backdrop.open { display: block; }
.chat-overlay {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg-dark);
  border-left: 1px solid var(--border-color);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  transition: right 0.3s var(--ease-out);
  box-shadow: -8px 0 30px rgba(0,0,0,0.3);
}
.chat-overlay.open { right: 0; }
.chat-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-sidebar);
}
.chat-overlay-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.chat-overlay-input {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-sidebar);
}
@media (max-width: 768px) {
  .chat-overlay { width: 100vw; }
}

.examgen-panel {
  width: 90%; max-width: 550px; max-height: 85vh;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.examgen-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.2rem; border-bottom: 1px solid var(--border-color);
}

.examgen-header h3 { font-size: 1.05rem; color: var(--text-primary); }

.examgen-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 0.3rem; border-radius: 6px;
}
.examgen-close:hover { background: var(--bg-surface); }

.examgen-body { padding: 1.2rem; text-align: center; overflow-y: auto; flex: 1; }

.examgen-emoji { font-size: 2.5rem; margin-bottom: 0.5rem; }

.examgen-input {
  width: 100%; padding: 0.7rem 1rem; border-radius: 10px;
  border: 1px solid var(--border-color); background: var(--bg-surface);
  color: var(--text-primary); font-size: 0.9rem; margin-bottom: 0.6rem;
  outline: none; box-sizing: border-box;
}
.examgen-input:focus { border-color: var(--primary); }

.examgen-row { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }

.examgen-select {
  flex: 1; padding: 0.5rem; border-radius: 8px;
  border: 1px solid var(--border-color); background: var(--bg-surface);
  color: var(--text-primary); font-size: 0.85rem; cursor: pointer;
}

.examgen-btn {
  width: 100%; padding: 0.7rem; border-radius: 10px; border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: white; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.examgen-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(6,182,212,0.3); }

.examgen-result { margin-top: 1rem; text-align: left; }

.examgen-loading {
  display: flex; align-items: center; gap: 0.5rem;
  justify-content: center; color: var(--text-muted); padding: 1.5rem;
}

.examgen-error { color: var(--danger); text-align: center; padding: 1rem; }

.examgen-exam h4 { font-size: 1rem; }

.examgen-q {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 0.8rem; margin-bottom: 0.6rem;
}

.examgen-q-num {
  display: inline-block; width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: white; font-size: 0.75rem;
  font-weight: 700; text-align: center; line-height: 24px;
  margin-bottom: 0.3rem;
}

.examgen-q-text { font-size: 0.88rem; color: var(--text-primary); margin-bottom: 0.5rem; }

.examgen-options { display: flex; flex-direction: column; gap: 0.3rem; }

.examgen-opt {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.82rem;
  cursor: pointer; border: 1px solid var(--border-color);
  transition: all 0.15s; color: var(--text-secondary);
}

.examgen-opt:hover { border-color: var(--primary); background: rgba(168,143,217,0.05); }
.examgen-opt.selected { border-color: var(--primary); background: rgba(168,143,217,0.1); }

.examgen-opt-letter {
  font-weight: 700; color: var(--primary); min-width: 18px;
}

.examgen-open textarea {
  width: 100%; padding: 0.5rem; border-radius: 6px;
  border: 1px solid var(--border-color); background: var(--bg-card);
  color: var(--text-primary); font-size: 0.82rem; resize: vertical;
  font-family: inherit;
}

.examgen-show-btn {
  margin-top: 0.4rem; padding: 0.3rem 0.6rem; border-radius: 6px;
  border: 1px solid var(--border-color); background: var(--bg-card);
  color: var(--text-muted); font-size: 0.75rem; cursor: pointer;
}
.examgen-show-btn:hover { color: var(--primary); border-color: var(--primary); }

.examgen-answer {
  margin-top: 0.4rem; padding: 0.5rem; border-radius: 6px;
  background: rgba(34,197,94,0.05); font-size: 0.82rem;
  color: var(--text-secondary);
}

/* === STEP CALCULATOR === */
.stepcalc-modal {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.stepcalc-modal.open { opacity: 1; pointer-events: auto; }

.stepcalc-panel {
  width: 90%; max-width: 500px; max-height: 80vh;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.stepcalc-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.2rem; border-bottom: 1px solid var(--border-color);
}

.stepcalc-header h3 { font-size: 1.05rem; color: var(--text-primary); }

.stepcalc-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 0.3rem; border-radius: 6px;
}
.stepcalc-close:hover { background: var(--bg-surface); }

.stepcalc-body { padding: 1.2rem; text-align: center; overflow-y: auto; flex: 1; }

.stepcalc-examples {
  display: flex; gap: 0.3rem; justify-content: center;
  flex-wrap: wrap; margin-bottom: 0.8rem;
}

.stepcalc-ex {
  padding: 0.3rem 0.6rem; border-radius: 6px; font-size: 0.72rem;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  cursor: pointer; color: var(--text-muted); transition: all 0.15s;
}
.stepcalc-ex:hover { border-color: var(--primary); color: var(--primary); }

.stepcalc-input {
  width: 100%; padding: 0.7rem 1rem; border-radius: 10px;
  border: 1px solid var(--border-color); background: var(--bg-surface);
  color: var(--text-primary); font-size: 0.9rem; margin-bottom: 0.8rem;
  outline: none; box-sizing: border-box;
}
.stepcalc-input:focus { border-color: var(--primary); }

.stepcalc-btn {
  width: 100%; padding: 0.7rem; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.stepcalc-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16,185,129,0.3); }

.stepcalc-result { margin-top: 1rem; text-align: left; }

.stepcalc-loading {
  display: flex; align-items: center; gap: 0.5rem;
  justify-content: center; color: var(--text-muted); padding: 1rem;
}

.stepcalc-error { color: var(--danger); text-align: center; padding: 1rem; }

.stepcalc-steps { display: flex; flex-direction: column; gap: 0.4rem; }

.stepcalc-start {
  font-size: 0.88rem; color: var(--text-primary); font-weight: 600;
  padding: 0.4rem 0.6rem; background: var(--bg-surface);
  border-radius: 6px;
}

.stepcalc-step {
  font-size: 0.85rem; color: var(--text-secondary);
  padding: 0.4rem 0.6rem; padding-left: 1.2rem;
  border-left: 2px solid var(--border-color);
}

.stepcalc-result-step {
  font-size: 0.95rem; font-weight: 700; color: #10b981;
  padding: 0.5rem 0.6rem; background: rgba(16,185,129,0.08);
  border-radius: 6px; margin-top: 0.3rem;
}

.stepcalc-ai-result {
  font-size: 0.88rem; color: var(--text-secondary);
  line-height: 1.6;
}

/* Install Banner (PWA) */
.install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  border-top: 1px solid rgba(139, 92, 246, 0.3);
  padding: 0.7rem 1rem;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}
.install-banner.visible {
  transform: translateY(0);
}
.install-banner.hidden {
  display: none;
}

.install-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.install-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #a78bfa;
}

.install-banner-text {
  flex: 1;
  min-width: 0;
}

.install-banner-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e2e8f0;
}

.install-banner-desc {
  display: block;
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 0.1rem;
}

.install-banner-close {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
.install-banner-close:hover {
  color: #e2e8f0;
}

.install-banner-arrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.install-banner-arrow svg {
  color: #a78bfa;
  animation: arrowBounce 1.5s ease-in-out infinite;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

#install-banner-hint {
  font-size: 0.7rem;
  color: #94a3b8;
  line-height: 1.3;
}

@media (min-width: 769px) {
  .install-banner { display: none !important; }
}

/* Splash Screen */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0f0a1e;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-content {
  text-align: center;
}
.splash-logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  margin-bottom: 1rem;
  animation: splashPulse 1.5s ease-in-out infinite;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 0 40px rgba(168,143,217,0.3), 0 0 80px rgba(139,92,246,0.15);
}
@keyframes splashPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}
.splash-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(135deg, #a88fd9, #c0a8e8, #d4c4f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 0.3rem 0;
}
.splash-subtitle {
  font-size: 0.82rem;
  color: #94a3b8;
  margin: 0 0 1.2rem 0;
}
.splash-loader {
  width: 120px;
  height: 3px;
  background: rgba(139, 92, 246, 0.15);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto;
}
.splash-bar {
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, #a88fd9, #c0a8e8);
  border-radius: 3px;
  animation: splashLoad 1s ease-in-out infinite;
}
@keyframes splashLoad {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Copyright footer */
.app-copyright {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  text-align: center;
  padding: 0.3rem 0.5rem;
  font-size: 0.58rem;
  color: var(--text-muted);
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  opacity: 0.5;
  transition: opacity 0.3s;
  pointer-events: none;
}
.app-copyright:hover {
  opacity: 0.8;
}
@media (max-width: 768px) {
  .app-copyright {
    display: none;
  }
}

/* Beta Banner */
.beta-banner {
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(249,115,22,0.08));
  border-bottom: 1px solid rgba(245,158,11,0.2);
  padding: 0.45rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  animation: betaFadeIn 0.4s ease;
}
.beta-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.beta-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.beta-contact {
  color: var(--accent-cyan);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}
.beta-contact:hover { opacity: 0.8; text-decoration: underline; }
.beta-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.beta-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

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

@media (max-width: 768px) {
  .beta-banner { padding: 0.4rem 0.75rem; font-size: 0.72rem; }
  .beta-banner-inner { gap: 0.35rem; }
}

/* ===== CALENDAR PREMIUM ===== */
#calendar-modal.cal-modal-open { opacity: 1 !important; }
#calendar-modal.cal-modal-open .cal-modal-content { transform: translateY(0) scale(1) !important; }

.cal-label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cal-input { width: 100%; background: var(--bg-secondary); border: 1.5px solid var(--border-color); border-radius: 10px; padding: 0.55rem 0.75rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.cal-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.cal-input::placeholder { color: var(--text-muted); opacity: 0.6; }
.cal-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2rem; }
.cal-textarea { resize: vertical; min-height: 48px; }

.cal-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(135deg, var(--primary), #6366f1); color: white; border: none; border-radius: 10px; padding: 0.6rem 1.2rem; font-size: 0.82rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; box-shadow: 0 4px 14px rgba(99,102,241,0.3); }
.cal-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.4); }
.cal-btn-primary:active { transform: translateY(0); }
.cal-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.cal-shake { animation: cal-shake-anim 0.4s ease; }
@keyframes cal-shake-anim { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }

/* Empty state */
.cal-empty-state { text-align: center; padding: 2rem 1.5rem; background: var(--bg-card); border: 1.5px dashed var(--border-color); border-radius: 14px; }
.cal-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1)); color: var(--primary); margin-bottom: 0.8rem; }
.cal-empty-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.3rem; }
.cal-empty-desc { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 1rem; max-width: 300px; margin-left: auto; margin-right: auto; }

/* Section headers */
.cal-section-header { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0.5rem; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.cal-section-header:first-child { margin-top: 0; }
.cal-section-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.cal-section-count { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.1rem 0.5rem; font-size: 0.65rem; margin-left: auto; }
.cal-section-past { opacity: 0.5; }

/* Event cards */
.cal-events-list { display: flex; flex-direction: column; gap: 0.45rem; }
.cal-past-list { opacity: 0.45; }

.cal-event-card { display: flex; align-items: stretch; gap: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; animation: cal-card-in 0.3s ease backwards; }
.cal-event-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.cal-event-today { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,0.12); }

@keyframes cal-card-in { from { opacity: 0; transform: translateY(8px); } }

.cal-event-left { flex-shrink: 0; display: flex; align-items: center; padding: 0.6rem 0 0.6rem 0.7rem; }
.cal-event-day-badge { width: 48px; height: 48px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; line-height: 1; }
.cal-event-day-num { font-size: 1.15rem; font-weight: 800; }
.cal-event-day-month { font-size: 0.55rem; font-weight: 700; opacity: 0.85; margin-top: 1px; letter-spacing: 0.05em; }
.cal-day-past { background: var(--bg-secondary) !important; color: var(--text-muted) !important; }

.cal-event-center { flex: 1; min-width: 0; padding: 0.65rem 0.5rem; display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; }
.cal-event-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-title-past { text-decoration: line-through; opacity: 0.6; }
.cal-event-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cal-event-type-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 6px; white-space: nowrap; }
.cal-type-past { opacity: 0.5; }
.cal-event-subject { font-size: 0.7rem; color: var(--text-muted); }
.cal-event-notes { font-size: 0.7rem; color: var(--text-muted); opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cal-event-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.6rem 0.7rem 0.6rem 0; }

.cal-countdown { font-size: 0.7rem; font-weight: 800; padding: 0.2rem 0.55rem; border-radius: 8px; text-align: center; white-space: nowrap; min-width: 36px; }
.cal-badge-distant { background: var(--bg-secondary); color: var(--text-muted); }
.cal-badge-soon { background: rgba(245,158,11,0.12); color: #f59e0b; }
.cal-badge-urgent { background: rgba(239,68,68,0.12); color: #ef4444; animation: cal-pulse 1.5s ease infinite; }
.cal-badge-tomorrow { background: rgba(249,115,22,0.12); color: #f97316; font-size: 0.65rem; }
.cal-badge-today { background: linear-gradient(135deg,#ef4444,#dc2626); color: white; animation: cal-pulse 1s ease infinite; }

@keyframes cal-pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

.cal-delete-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: transparent; color: var(--text-muted); border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; opacity: 0.4; }
.cal-event-card:hover .cal-delete-btn { opacity: 1; }
.cal-delete-btn:hover { background: rgba(239,68,68,0.12); color: #ef4444; }

@media (max-width: 480px) {
  .cal-event-day-badge { width: 42px; height: 42px; border-radius: 10px; }
  .cal-event-day-num { font-size: 1rem; }
  .cal-event-card { border-radius: 10px; }
}

/* ===== GPA CALCULATOR ===== */
.gpa-header { margin-bottom: 1.5rem; }
.gpa-hero { text-align: center; background: linear-gradient(135deg, var(--primary), #6366f1); border-radius: 16px; padding: 2rem 1rem; color: white; margin-bottom: 1rem; }
.gpa-hero-number { font-size: 3rem; font-weight: 800; line-height: 1; }
.gpa-hero-label { font-size: 0.85rem; opacity: 0.8; margin-top: 0.3rem; }
.gpa-hero-sub { font-size: 0.75rem; opacity: 0.6; margin-top: 0.2rem; }
.gpa-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.gpa-mini-stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.7rem; text-align: center; }
.gpa-mini-val { display: block; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.gpa-mini-lbl { font-size: 0.68rem; color: var(--text-muted); }
.gpa-add-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; }
.gpa-card-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.7rem; }
.gpa-form-row { display: flex; gap: 0.5rem; align-items: center; }
.gpa-input { background: var(--bg-secondary); border: 1.5px solid var(--border-color); border-radius: 8px; padding: 0.5rem 0.7rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; outline: none; width: 100%; box-sizing: border-box; }
.gpa-input:focus { border-color: var(--primary); }
.gpa-btn-add { background: var(--primary); color: white; border: none; border-radius: 8px; padding: 0.5rem 0.7rem; cursor: pointer; display: flex; flex-shrink: 0; }
.gpa-shake { animation: cal-shake-anim 0.4s ease; }
.gpa-table-wrapper { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.gpa-table { width: 100%; border-collapse: collapse; }
.gpa-table th { text-align: left; padding: 0.6rem 0.8rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-color); }
.gpa-table td { padding: 0.6rem 0.8rem; font-size: 0.82rem; border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
.gpa-table tr:last-child td { border-bottom: none; }
.gpa-td-name { font-weight: 600; }
.gpa-td-credits { color: var(--text-muted); }
.gpa-note-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 6px; font-weight: 700; font-size: 0.82rem; }
.gpa-delete-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.2rem; border-radius: 4px; opacity: 0.4; }
.gpa-delete-btn:hover { opacity: 1; background: rgba(239,68,68,0.1); color: #ef4444; }
.gpa-bar-section { padding: 0.8rem; }
.gpa-bar-label { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.gpa-bar-track { height: 8px; background: var(--bg-secondary); border-radius: 4px; position: relative; overflow: visible; }
.gpa-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.gpa-bar-marker { position: absolute; top: -6px; transform: translateX(-50%); font-size: 0.6rem; font-weight: 700; color: var(--primary); background: var(--bg-card); border: 1px solid var(--primary); border-radius: 4px; padding: 0 0.3rem; }
.gpa-btn-clear { background: none; border: 1px solid var(--border-color); border-radius: 8px; padding: 0.4rem 1rem; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.gpa-empty { text-align: center; padding: 2rem; color: var(--text-muted); }
.gpa-empty svg { opacity: 0.3; margin-bottom: 0.5rem; }

/* ===== PERIODIC TABLE ===== */
.pt-header { margin-bottom: 1rem; }
.pt-title { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.7rem; }
.pt-filters { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pt-filter-btn { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.68rem; font-family: inherit; cursor: pointer; color: var(--text-muted); transition: all 0.15s; }
.pt-filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.pt-filter-btn:hover { border-color: var(--primary); }
.pt-grid-wrapper { overflow-x: auto; padding: 0.5rem 0; }
.pt-grid { display: grid; grid-template-columns: repeat(18, minmax(48px, 1fr)); gap: 2px; min-width: 800px; }
.pt-cell { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.25rem; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; min-height: 48px; position: relative; }
.pt-cell:hover { transform: scale(1.1); z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.pt-cell-label { background: var(--bg-secondary); cursor: default; font-size: 0.55rem; color: var(--text-muted); justify-content: center; font-weight: 600; text-align: center; }
.pt-cell-label:hover { transform: none; box-shadow: none; }
.pt-dimmed { opacity: 0.2; }
.pt-z { font-size: 0.5rem; color: var(--text-muted); align-self: flex-start; }
.pt-sym { font-size: 0.85rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.pt-mass { font-size: 0.45rem; color: var(--text-muted); }
.pt-detail { margin-top: 1rem; }
.pt-detail-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; max-width: 400px; }
.pt-detail-header { padding: 1.2rem; display: flex; align-items: center; gap: 0.8rem; }
.pt-detail-num { font-size: 0.8rem; opacity: 0.7; }
.pt-detail-sym { font-size: 2.5rem; font-weight: 900; }
.pt-detail-name { font-size: 1rem; font-weight: 700; }
.pt-detail-body { padding: 1rem 1.2rem; }
.pt-detail-row { display: flex; justify-content: space-between; padding: 0.35rem 0; font-size: 0.8rem; border-bottom: 1px solid var(--border-color); }
.pt-detail-row span:first-child { color: var(--text-muted); }
.pt-detail-row span:last-child { font-weight: 600; }
.pt-detail-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.6rem; line-height: 1.4; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.pt-legend-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: var(--text-muted); }
.pt-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ===== CORRELATIVAS ===== */
.corr-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.corr-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.corr-select { background: var(--bg-secondary); border: 1.5px solid var(--border-color); border-radius: 8px; padding: 0.4rem 0.7rem; color: var(--text-primary); font-size: 0.82rem; font-family: inherit; outline: none; cursor: pointer; }
.corr-progress-bar { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1.5rem; }
.corr-progress-text { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.corr-progress-track { height: 6px; background: var(--bg-secondary); border-radius: 3px; overflow: hidden; }
.corr-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-hover)); border-radius: 3px; transition: width 0.5s ease; }
.corr-year { margin-bottom: 1.2rem; }
.corr-year-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; padding-left: 0.3rem; }
.corr-subjects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
.corr-subject { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.7rem; cursor: pointer; transition: all 0.15s; }
.corr-subject:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.corr-approved { border-color: #22c55e; background: rgba(34,197,94,0.05); }
.corr-available { border-color: var(--primary); }
.corr-locked { opacity: 0.45; cursor: not-allowed; }
.corr-subject-status { margin-bottom: 0.3rem; }
.corr-approved .corr-subject-status { color: #22c55e; }
.corr-available .corr-subject-status { color: var(--primary); }
.corr-locked .corr-subject-status { color: var(--text-muted); }
.corr-subject-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.corr-prereqs { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.2rem; }
.corr-btn-clear { background: none; border: 1px solid var(--border-color); border-radius: 8px; padding: 0.4rem 1rem; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.corr-year-header { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 800; color: var(--text-primary); margin: 1.2rem 0 0.5rem; padding: 0.5rem 0.7rem; background: var(--bg-secondary); border-radius: 8px; }
.corr-year-header:first-of-type { margin-top: 0; }
.corr-elective { border-style: dashed; opacity: 0.7; }
.corr-elective:hover { opacity: 1; }

/* ===== STUDY SCHEDULE ===== */
.sch-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.sch-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.sch-total { font-size: 0.85rem; font-weight: 700; color: var(--primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.3rem 0.8rem; }
.sch-add-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.sch-input { flex: 1; background: var(--bg-secondary); border: 1.5px solid var(--border-color); border-radius: 8px; padding: 0.5rem 0.7rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; outline: none; }
.sch-input:focus { border-color: var(--primary); }
.sch-btn-add { background: var(--primary); color: white; border: none; border-radius: 8px; padding: 0.5rem 1rem; cursor: pointer; font-size: 0.82rem; font-weight: 600; font-family: inherit; display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.sch-subjects-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.sch-empty-text { font-size: 0.78rem; color: var(--text-muted); }
.sch-subject-chip { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; border: 1px solid; border-radius: 8px; font-size: 0.75rem; font-weight: 600; }
.sch-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sch-chip-hours { font-size: 0.65rem; opacity: 0.6; }
.sch-chip-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.7rem; padding: 0 0.15rem; }
.sch-grid-wrapper { overflow-x: auto; }
.sch-grid { display: grid; grid-template-columns: 50px repeat(7, 1fr); gap: 2px; min-width: 600px; }
.sch-corner { background: transparent; }
.sch-day-header { background: var(--primary); color: white; text-align: center; font-size: 0.68rem; font-weight: 700; padding: 0.4rem 0.2rem; border-radius: 4px 4px 0 0; }
.sch-hour-label { font-size: 0.65rem; color: var(--text-muted); display: flex; align-items: center; justify-content: flex-end; padding-right: 0.3rem; }
.sch-block { min-height: 28px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.1s; }
.sch-block:hover { filter: brightness(0.9); }
.sch-block-text { font-size: 0.55rem; font-weight: 700; }
.sch-btn-clear { background: none; border: 1px solid var(--border-color); border-radius: 8px; padding: 0.4rem 1rem; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; font-family: inherit; margin-top: 1rem; }

/* ===== REFERENCE TABLES ===== */
.ref-header { margin-bottom: 0.8rem; }
.ref-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.ref-tabs { display: flex; gap: 0.3rem; margin-bottom: 1rem; }
.ref-tab { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.45rem 1rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--text-muted); font-family: inherit; transition: all 0.15s; }
.ref-tab.active { background: var(--primary); color: white; border-color: var(--primary); }
.ref-search-wrap { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-secondary); border: 1.5px solid var(--border-color); border-radius: 8px; padding: 0.45rem 0.7rem; margin-bottom: 1rem; }
.ref-search-wrap:focus-within { border-color: var(--primary); }
.ref-search { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.5rem; }
.ref-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.8rem; cursor: pointer; transition: all 0.15s; }
.ref-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.ref-card-rule { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.2rem; }
.ref-card-formula { font-size: 0.85rem; color: var(--primary); font-weight: 600; font-family: 'Cambria Math', 'Latin Modern Math', serif; }
.ref-card-copy { font-size: 0.65rem; color: var(--text-muted); opacity: 0; transition: opacity 0.15s; margin-top: 0.2rem; }
.ref-card:hover .ref-card-copy { opacity: 1; }
.ref-empty { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.85rem; }

/* ===== LOCAL INTELLIGENCE ===== */
.intel-header { margin-bottom: 1.5rem; }
.intel-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.intel-subtitle { font-size: 0.8rem; color: var(--text-muted); margin: 0.2rem 0 0; }
.intel-section { margin-bottom: 1.5rem; }
.intel-section-title { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.6rem; }
.intel-topics-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.intel-topic-chip { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; }
.intel-topic-count { background: var(--primary); color: white; font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 10px; }
.intel-keywords-cloud { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.intel-keyword { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.72rem; color: var(--text-muted); }
.intel-chats-list { display: flex; flex-direction: column; gap: 0.4rem; }
.intel-chat-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.7rem; }
.intel-chat-title { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.intel-chat-meta { font-size: 0.7rem; color: var(--text-muted); }
.intel-chat-topics { display: flex; gap: 0.3rem; margin-top: 0.3rem; flex-wrap: wrap; }
.intel-chat-topic { background: var(--primary); color: white; font-size: 0.6rem; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 600; }
.intel-chat-keywords { display: flex; gap: 0.2rem; margin-top: 0.2rem; flex-wrap: wrap; }
.intel-kw-small { font-size: 0.62rem; color: var(--text-muted); background: var(--bg-secondary); padding: 0.1rem 0.3rem; border-radius: 3px; }
.intel-empty { text-align: center; padding: 2rem; color: var(--text-muted); }
.intel-empty svg { opacity: 0.3; margin-bottom: 0.5rem; }
.intel-empty-text { font-size: 0.78rem; color: var(--text-muted); }

/* ===== STUDY CHALLENGE ===== */
.ch-home { text-align: center; }
.ch-home-header { margin-bottom: 1.5rem; }
.ch-home-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(239,68,68,0.15)); color: #f59e0b; margin-bottom: 0.7rem; }
.ch-home-title { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.ch-home-sub { font-size: 0.82rem; color: var(--text-muted); margin: 0.3rem 0 0; }
.ch-subjects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; margin-bottom: 1.5rem; }
.ch-subject-btn { background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 12px; padding: 1rem; cursor: pointer; transition: all 0.15s; text-align: left; font-family: inherit; }
.ch-subject-btn:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.ch-subject-name { display: block; font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.ch-subject-count { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
.ch-view-stats { background: none; border: 1px solid var(--border-color); border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.ch-header { margin-bottom: 1rem; }
.ch-progress-bar { height: 4px; background: var(--bg-secondary); border-radius: 2px; overflow: hidden; margin-bottom: 0.6rem; }
.ch-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #6366f1); border-radius: 2px; transition: width 0.3s; }
.ch-stats-row { display: flex; justify-content: space-between; font-size: 0.78rem; }
.ch-stat { color: var(--text-muted); }
.ch-score { color: var(--primary); font-weight: 700; }
.ch-timer { color: #f59e0b; font-weight: 600; }
.ch-question-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 1.2rem; margin-bottom: 1rem; }
.ch-topic-badge, .ch-diff-badge { display: inline-block; font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 6px; margin-bottom: 0.5rem; }
.ch-topic-badge { background: var(--primary); color: white; margin-right: 0.3rem; }
.ch-diff-badge { background: var(--bg-secondary); color: var(--text-muted); }
.ch-diff-avanzado { background: rgba(239,68,68,0.1); color: #ef4444; }
.ch-statement { font-size: 0.95rem; color: var(--text-primary); line-height: 1.5; margin: 0; }
.ch-options { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.ch-option { background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 10px; padding: 0.65rem 0.9rem; text-align: left; cursor: pointer; font-size: 0.85rem; color: var(--text-primary); font-family: inherit; transition: all 0.15s; }
.ch-option:hover { border-color: var(--primary); background: rgba(99,102,241,0.05); }
.ch-open-answer { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.ch-input { flex: 1; background: var(--bg-secondary); border: 1.5px solid var(--border-color); border-radius: 8px; padding: 0.5rem 0.7rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; outline: none; }
.ch-input:focus { border-color: var(--primary); }
.ch-btn-answer { background: var(--primary); color: white; border: none; border-radius: 8px; padding: 0.5rem 1rem; cursor: pointer; font-weight: 600; font-family: inherit; white-space: nowrap; }
.ch-skip { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.78rem; font-family: inherit; }
.ch-result { text-align: center; padding: 2rem 0; }
.ch-result-emoji { font-size: 3rem; margin-bottom: 0.5rem; }
.ch-result-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.5rem; }
.ch-result-score { font-size: 2.5rem; font-weight: 900; color: var(--primary); }
.ch-result-pct { font-size: 0.85rem; color: var(--text-muted); margin: 0.3rem 0 0.8rem; }
.ch-result-details { display: flex; justify-content: center; gap: 1.5rem; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.ch-result-actions { display: flex; gap: 0.5rem; justify-content: center; }
.ch-btn-retry, .ch-btn-stats { padding: 0.55rem 1.2rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; border: none; }
.ch-btn-retry { background: var(--primary); color: white; }
.ch-btn-stats { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); }
.ch-stats-page { max-width: 500px; margin: 0 auto; }
.ch-stats-title { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); margin: 0 0 1rem; text-align: center; }
.ch-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1.5rem; }
.ch-stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.8rem; text-align: center; }
.ch-stat-val { font-size: 1.3rem; font-weight: 800; color: var(--primary); }
.ch-stat-lbl { font-size: 0.68rem; color: var(--text-muted); }
.ch-best-scores, .ch-history { margin-bottom: 1.5rem; }
.ch-best-scores h4, .ch-history h4 { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin: 0 0 0.5rem; }
.ch-best-item { display: flex; justify-content: space-between; padding: 0.35rem 0; font-size: 0.8rem; border-bottom: 1px solid var(--border-color); }
.ch-best-score { font-weight: 700; color: var(--primary); }
.ch-history-item { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; padding: 0.35rem 0; font-size: 0.78rem; border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
.ch-btn-back { background: none; border: 1px solid var(--border-color); border-radius: 8px; padding: 0.4rem 1rem; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; font-family: inherit; display: block; margin: 0 auto; }

/* ===== TOOLS HUB ===== */
.tool-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 10px; padding: 0.8rem 0.6rem; cursor: pointer; transition: all 0.2s; font-family: inherit; position: relative; overflow: hidden; }
.tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--tool-color); opacity: 0; transition: opacity 0.2s; }
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); border-color: var(--tool-color); }
.tool-card:hover::before { opacity: 1; }
.tool-card-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.4rem; transition: transform 0.2s; }
.tool-card:hover .tool-card-icon { transform: scale(1.05); }
.tool-card-name { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.1rem; }
.tool-card-desc { font-size: 0.65rem; color: var(--text-muted); line-height: 1.2; }
.tool-card-featured { border-color: rgba(245,158,11,0.3); background: linear-gradient(135deg, rgba(245,158,11,0.03), rgba(239,68,68,0.03)); }
.tool-card-featured:hover { border-color: #f59e0b; box-shadow: 0 4px 16px rgba(245,158,11,0.1); }

/* ===== FIUBLE ===== */
.fiuble-header { text-align: center; margin-bottom: 1rem; }
.fiuble-logo { margin-bottom: 1rem; }
.fiuble-logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(99,102,241,0.12)); color: #8b5cf6; margin-bottom: 0.6rem; border: 1.5px solid rgba(139,92,246,0.2); }
.fiuble-title { font-size: 2.2rem; font-weight: 900; color: var(--text-primary); margin: 0; letter-spacing: 0.1em; background: linear-gradient(135deg, #8b5cf6, #6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; }
.fiuble-subtitle { font-size: 0.75rem; color: var(--text-muted); display: block; margin-top: 0.25rem; }
.fiuble-stats-row { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; }
.fiuble-stat-pill { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.3rem 0.65rem; font-size: 0.75rem; font-weight: 700; color: var(--text-primary); }
.fiuble-equation-card { background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 14px; padding: 1.2rem; margin-bottom: 1.2rem; text-align: center; }
.fiuble-topic-badge { display: inline-block; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.7rem; border-radius: 6px; margin-bottom: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fiuble-equation { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); font-family: 'Cambria Math', 'Latin Modern Math', monospace; margin-bottom: 0.4rem; }
.fiuble-hint { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--text-muted); }
.fiuble-grid { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.fiuble-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.9rem; border: 2px solid var(--border-color); border-radius: 10px; transition: all 0.3s; background: var(--bg-card); }
.fiuble-row-done { animation: fiuble-pop 0.3s ease; }
.fiuble-row-active { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,0.12); }
.fiuble-row-empty { opacity: 0.25; justify-content: center; border-style: dashed; }
.fiuble-placeholder { font-size: 0.8rem; color: var(--text-muted); font-weight: 700; }
@keyframes fiuble-pop { 0%{transform:scale(0.96)} 50%{transform:scale(1.01)} 100%{transform:scale(1)} }
.fiuble-guess { font-size: 1.15rem; font-weight: 800; flex: 1; font-family: 'Cambria Math', monospace; }
.fiuble-check { font-size: 1rem; font-weight: 800; }
.fiuble-input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 1.15rem; font-weight: 700; font-family: 'Cambria Math', monospace; padding: 0; }
.fiuble-input::placeholder { color: var(--text-muted); opacity: 0.4; font-weight: 400; font-size: 0.9rem; }
.fiuble-submit-btn { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; border: none; border-radius: 8px; width: 38px; height: 38px; font-size: 1.1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.1s, box-shadow 0.1s; box-shadow: 0 2px 8px rgba(139,92,246,0.3); }
.fiuble-submit-btn:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(139,92,246,0.4); }
.fiuble-submit-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; box-shadow: none; }
.fiuble-result { text-align: center; padding: 1.5rem 0; }
.fiuble-result-emoji { font-size: 3.5rem; margin-bottom: 0.3rem; }
.fiuble-result-title { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.3rem; }
.fiuble-result-answer { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 0.2rem; }
.fiuble-result-stat { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 1.2rem; }
.fiuble-result-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.fiuble-btn-share, .fiuble-btn-stats { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem; border-radius: 10px; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; border: none; transition: all 0.15s; }
.fiuble-btn-share { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; box-shadow: 0 2px 8px rgba(139,92,246,0.3); }
.fiuble-btn-share:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,92,246,0.4); }
.fiuble-btn-stats { background: var(--bg-card); border: 1.5px solid var(--border-color); color: var(--text-primary); }
.fiuble-btn-stats:hover { border-color: #8b5cf6; }
.fiuble-footer { text-align: center; font-size: 0.7rem; color: var(--text-muted); opacity: 0.5; margin-top: 0.5rem; }
.fiuble-footer p { margin: 0; }
.fiuble-topic-row { display: flex; align-items: center; gap: 0.5rem; justify-content: center; margin-bottom: 0.5rem; }
.fiuble-diff-badge { font-size: 0.65rem; font-weight: 700; color: white; padding: 0.15rem 0.5rem; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.03em; }
.fiuble-timer-pill { animation: fiuble-pulse 2s ease-in-out infinite; }
@keyframes fiuble-pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
.fiuble-flip { animation: fiuble-flip-in 0.4s ease; }
@keyframes fiuble-flip-in { 0%{transform:perspective(400px) rotateX(90deg);opacity:0} 100%{transform:perspective(400px) rotateX(0);opacity:1} }

/* Tutorial overlay */
.fiuble-tutorial-overlay { position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fiuble-fadein 0.3s ease; }
.fiuble-tutorial { background:var(--bg-card);border-radius:16px;padding:1.5rem;max-width:400px;width:100%;text-align:center;border:1.5px solid var(--border-color);animation:fiuble-pop 0.4s ease; }
.fiuble-tutorial-icon { font-size:2.5rem;margin-bottom:0.5rem; }
.fiuble-tutorial h3 { font-size:1.1rem;font-weight:800;color:var(--text-primary);margin:0 0 0.5rem; }
.fiuble-tutorial p { font-size:0.85rem;color:var(--text-muted);margin:0 0 1rem; }
.fiuble-tutorial-colors { text-align:left;margin-bottom:1rem;font-size:0.8rem;color:var(--text-primary); }
.fiuble-tutorial-colors div { display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem; }
.fiuble-tile-preview { display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:5px;color:white;font-weight:800;font-size:0.85rem;flex-shrink:0; }
.fiuble-tutorial-example { background:var(--bg-secondary);border-radius:10px;padding:0.8rem;margin-bottom:1rem;font-size:0.8rem; }
.fiuble-tutorial-eq { font-weight:700;color:var(--text-primary);margin-bottom:0.3rem; }
.fiuble-tutorial-answer { color:var(--text-muted);margin-bottom:0.3rem; }
.fiuble-tutorial-guess { color:var(--text-muted);margin-bottom:0.4rem; }
.fiuble-tutorial-tiles { display:flex;gap:0.3rem;justify-content:center; }
.fiuble-tutorial-btn { background:linear-gradient(135deg,#8b5cf6,#6366f1);color:white;border:none;border-radius:10px;padding:0.6rem 2rem;font-size:0.9rem;font-weight:700;cursor:pointer;font-family:inherit;transition:transform 0.1s; }
.fiuble-tutorial-btn:hover { transform:scale(1.03); }
.fiuble-tutorial-hide { animation:fiuble-fadeout 0.3s ease forwards; }
@keyframes fiuble-fadein { from{opacity:0} to{opacity:1} }
@keyframes fiuble-fadeout { from{opacity:1} to{opacity:0} }

/* Histogram */
.fiuble-histogram { margin:1rem 0;text-align:left; }
.fiuble-histogram h4 { font-size:0.75rem;font-weight:700;color:var(--text-muted);margin:0 0 0.4rem;text-align:center; }
.fiuble-histogram-lg { margin:1.5rem 0; }
.fiuble-hist-row { display:flex;align-items:center;gap:0.4rem;margin-bottom:0.2rem; }
.fiuble-hist-num { font-size:0.75rem;font-weight:700;color:var(--text-muted);width:12px;text-align:right; }
.fiuble-hist-bar { background:linear-gradient(135deg,#8b5cf6,#6366f1);color:white;font-size:0.7rem;font-weight:700;padding:0.15rem 0.5rem;border-radius:4px;min-width:20px;text-align:right;transition:width 0.6s ease; }
.fiuble-hist-current { background:var(--bg-secondary);border-radius:6px;padding:0.1rem 0.3rem;border:1px solid #8b5cf6; }
.fiuble-hist-current .fiuble-hist-bar { background:linear-gradient(135deg,#22c55e,#16a34a); }
.fiuble-stats-page { max-width: 450px; margin: 0 auto; }
.fiuble-stats-title { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); margin: 0 0 1rem; text-align: center; }
.fiuble-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1.5rem; }
.fiuble-stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.7rem; text-align: center; }
.fiuble-stat-val { font-size: 1.3rem; font-weight: 800; color: var(--primary); }
.fiuble-stat-lbl { font-size: 0.65rem; color: var(--text-muted); }
.fiuble-topic-stats, .fiuble-history { margin-bottom: 1.5rem; }
.fiuble-topic-stats h4, .fiuble-history h4 { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin: 0 0 0.5rem; }
.fiuble-topic-row { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 0.8rem; border-bottom: 1px solid var(--border-color); }
.fiuble-history-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 0.5rem; align-items: center; padding: 0.35rem 0; font-size: 0.8rem; border-bottom: 1px solid var(--border-color); }
.fiuble-btn-back { background: none; border: 1px solid var(--border-color); border-radius: 8px; padding: 0.4rem 1rem; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; font-family: inherit; display: block; margin: 0 auto; }

@media (max-width: 768px) {
  .gpa-form-row { flex-wrap: wrap; }
  .gpa-mini-stats { grid-template-columns: 1fr; }
  .corr-subjects-grid { grid-template-columns: 1fr; }
  .ch-subjects-grid { grid-template-columns: 1fr 1fr; }
  .pt-grid { grid-template-columns: repeat(18, minmax(40px, 1fr)); }
}

/* Code Playground v2 */
.pg-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.pg-header-left { text-align: left; }
.pg-title { font-family: var(--font-heading); font-size: 1.4rem; color: var(--text-primary); margin: 0; }
.pg-subtitle { font-size: 0.78rem; color: var(--text-muted); }
.pg-run-all { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 8px; border: none; background: linear-gradient(135deg, #22c55e, #16a34a); color: white; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.12s; box-shadow: 0 2px 8px rgba(34,197,94,0.3); }
.pg-run-all:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(34,197,94,0.4); }
.pg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.pg-lang-tabs { display: flex; gap: 0.3rem; }
.pg-lang-tab { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.8rem; border-radius: 6px; border: 1.5px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.12s; }
.pg-lang-tab:hover { border-color: var(--lang-color, #06b6d4); }
.pg-lang-active { background: var(--lang-color, #06b6d4); color: white; border-color: var(--lang-color, #06b6d4); }
.pg-lang-badge { font-size: 0.6rem; font-weight: 800; padding: 0.1rem 0.3rem; border-radius: 3px; background: rgba(255,255,255,0.2); }
.pg-lang-active .pg-lang-badge { background: rgba(255,255,255,0.25); }
.pg-toolbar-right { display: flex; gap: 0.3rem; }
.pg-action-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.7rem; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.12s; }
.pg-action-btn:hover { border-color: #06b6d4; color: var(--text-primary); }
.pg-cells { display: flex; flex-direction: column; gap: 0.5rem; }
.pg-cell { border: 1.5px solid var(--border-color); border-radius: 10px; overflow: hidden; background: var(--bg-card); transition: border-color 0.15s; }
.pg-cell:hover { border-color: #06b6d440; }
.pg-cell-running { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.1); }
.pg-cell-done { border-color: #22c55e40; }
.pg-cell-error { border-color: #ef444440; }
.pg-cell-header { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.5rem; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.pg-cell-left { display: flex; align-items: center; gap: 0.4rem; }
.pg-cell-num { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); font-family: 'Cascadia Code', 'Fira Code', monospace; }
.pg-cell-status { font-size: 0.75rem; }
.pg-cell-right { display: flex; gap: 0.2rem; }
.pg-cell-btn { width: 26px; height: 26px; border-radius: 5px; border: none; background: none; color: var(--text-muted); font-size: 0.8rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.1s; }
.pg-cell-run { color: #22c55e; }
.pg-cell-run:hover { background: #22c55e15; }
.pg-cell-add { color: var(--text-muted); }
.pg-cell-add:hover { background: var(--bg-card); color: var(--text-primary); }
.pg-cell-del { color: var(--text-muted); }
.pg-cell-del:hover { background: #ef444415; color: #ef4444; }
.pg-cell-editor { width: 100%; min-height: 60px; max-height: 400px; background: #0d1117; color: #e6edf3; border: none; padding: 0.7rem 0.8rem; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 0.85rem; line-height: 1.55; resize: vertical; tab-size: 2; outline: none; display: block; }
.pg-cell-editor::placeholder { color: #484f58; }
.pg-cell-output { border-top: 1px solid var(--border-color); padding: 0.6rem 0.8rem; background: #0d1117; }
.pg-cell-output pre { margin: 0; font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 0.82rem; line-height: 1.5; color: #e6edf3; white-space: pre-wrap; word-break: break-word; }
.pg-cell-output-error { background: #1a0a0a; }
.pg-cell-output-error pre { color: #f87171; }
.pg-footer { text-align: center; font-size: 0.7rem; color: var(--text-muted); opacity: 0.5; margin-top: 0.8rem; }

@media (max-width: 768px) {
  .pg-main { grid-template-columns: 1fr; }
  .pg-editor { min-height: 200px; }
  .pg-output { min-height: 150px; }
}

/* Professor Ratings */
.pr-header { text-align: center; margin-bottom: 1rem; }
.pr-title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--text-primary); margin: 0 0 0.2rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.pr-subtitle { font-size: 0.8rem; color: var(--text-muted); }
.pr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.pr-stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.7rem; text-align: center; }
.pr-stat-val { font-size: 1.4rem; font-weight: 800; color: var(--primary); line-height: 1; }
.pr-stat-lbl { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.15rem; }
.pr-add-section { margin-bottom: 0.5rem; }
.pr-add-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 8px; border: 1.5px dashed var(--border-color); background: none; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.pr-add-btn:hover, .pr-add-btn-active { border-color: #f59e0b; color: #f59e0b; border-style: solid; }
.pr-add-form { background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 14px; padding: 0; max-height: 0; overflow: hidden; transition: all 0.3s ease; margin-bottom: 0.5rem; }
.pr-form-open { padding: 1rem; max-height: 500px; border-color: #f59e0b40; }
.pr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.7rem; }
.pr-form-full { grid-column: 1/-1; }
.pr-form-field { display: flex; flex-direction: column; gap: 0.2rem; }
.pr-form-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pr-input, .pr-textarea { width: 100%; padding: 0.5rem 0.7rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; outline: none; transition: border-color 0.15s; }
.pr-input:focus, .pr-textarea:focus { border-color: #f59e0b; }
.pr-textarea { resize: vertical; min-height: 50px; }
.pr-char-count { font-size: 0.65rem; color: var(--text-muted); text-align: right; }
.pr-rating-picker { display: flex; align-items: center; gap: 0.5rem; }
.pr-stars { display: inline-flex; gap: 0.05rem; }
.pr-star { font-size: 1.3rem; color: var(--border-color); cursor: default; transition: color 0.1s, transform 0.1s; user-select: none; }
.pr-star-filled { color: #f59e0b; }
.pr-stars-interactive .pr-star { cursor: pointer; }
.pr-stars-interactive .pr-star:hover { color: #f59e0b; transform: scale(1.15); }
.pr-rating-text { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.pr-submit-btn { width: 100%; padding: 0.55rem; border-radius: 8px; border: none; background: linear-gradient(135deg, #f59e0b, #d97706); color: white; font-size: 0.85rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.12s; box-shadow: 0 2px 8px rgba(245,158,11,0.25); }
.pr-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.35); }
.pr-search-bar { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 10px; padding: 0.5rem 0.8rem; margin-bottom: 0.7rem; transition: border-color 0.15s; }
.pr-search-bar:focus-within { border-color: #f59e0b; }
.pr-search-bar svg { color: var(--text-muted); flex-shrink: 0; }
.pr-search-input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; }
.pr-search-input::placeholder { color: var(--text-muted); opacity: 0.6; }
.pr-filter-bar { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pr-pill { padding: 0.25rem 0.65rem; border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); font-size: 0.7rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.12s; white-space: nowrap; }
.pr-pill:hover { border-color: #f59e0b; color: var(--text-primary); }
.pr-pill-active { background: #f59e0b; color: white; border-color: #f59e0b; }
.pr-list { display: flex; flex-direction: column; gap: 0.8rem; }
.pr-prof-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; transition: border-color 0.15s; }
.pr-prof-card:hover { border-color: #f59e0b40; }
.pr-prof-top { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.pr-prof-avatar { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; flex-shrink: 0; }
.pr-prof-info { flex: 1; min-width: 0; }
.pr-prof-name { font-weight: 700; color: var(--text-primary); font-size: 0.9rem; }
.pr-prof-subject { font-size: 0.72rem; color: var(--text-muted); }
.pr-prof-score { text-align: right; flex-shrink: 0; }
.pr-prof-avg { font-weight: 800; font-size: 1.2rem; display: block; line-height: 1; }
.pr-prof-stars { font-size: 0.75rem; letter-spacing: 0.05em; }
.pr-prof-count { font-size: 0.65rem; color: var(--text-muted); display: block; }
.pr-prof-reviews { padding: 0.5rem; }
.pr-mini-review { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-color); }
.pr-mini-review:last-child { border-bottom: none; }
.pr-mini-review-top { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
.pr-mini-badge { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 4px; }
.pr-mini-date { font-size: 0.65rem; color: var(--text-muted); }
.pr-mini-text { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; font-style: italic; margin-bottom: 0.2rem; }
.pr-mini-footer { display: flex; align-items: center; justify-content: space-between; }
.pr-mini-author { font-size: 0.65rem; color: var(--text-muted); }
.pr-mini-votes { display: flex; gap: 0.25rem; }
.pr-mini-votes button, .pr-mini-del { padding: 0.15rem 0.4rem; border-radius: 4px; border: 1px solid var(--border-color); background: none; color: var(--text-muted); font-size: 0.68rem; cursor: pointer; font-family: inherit; transition: all 0.1s; }
.pr-mini-votes button:hover { border-color: #f59e0b; color: var(--text-primary); }
.pr-mini-del:hover { border-color: #ef4444; color: #ef4444; }
.pr-empty { text-align: center; padding: 2.5rem; color: var(--text-muted); border: 1px dashed var(--border-color); border-radius: 12px; }
.pr-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.pr-empty-text { font-size: 0.85rem; }

/* Study Rooms */
.sr-header { text-align: center; margin-bottom: 1rem; }
.sr-title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--text-primary); margin: 0 0 0.2rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.sr-subtitle { font-size: 0.8rem; color: var(--text-muted); }
.sr-create-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.2rem; border-radius: 10px; border: none; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; font-size: 0.85rem; font-weight: 700; cursor: pointer; font-family: inherit; margin-bottom: 1rem; transition: all 0.12s; box-shadow: 0 2px 8px rgba(139,92,246,0.3); }
.sr-create-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,92,246,0.4); }
.sr-create-form { background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 14px; padding: 1rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sr-input { width: 100%; padding: 0.5rem 0.7rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; outline: none; transition: border-color 0.15s; }
.sr-input:focus { border-color: #8b5cf6; }
.sr-checkbox-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; }
.sr-submit-btn { padding: 0.5rem; border-radius: 8px; border: none; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; font-size: 0.85rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.12s; }
.sr-submit-btn:hover { transform: translateY(-1px); }
.sr-section { margin-bottom: 1rem; }
.sr-section-title { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.5rem; padding-left: 0.2rem; }
.sr-list-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.sr-card { background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 12px; padding: 0.8rem 1rem; transition: all 0.15s; }
.sr-card:hover { border-color: #8b5cf640; }
.sr-card-member { border-color: #8b5cf6; background: #8b5cf608; }
.sr-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.4rem; }
.sr-card-name { font-weight: 700; color: var(--text-primary); font-size: 0.9rem; }
.sr-card-subject { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.1rem; }
.sr-card-meta { display: flex; align-items: center; gap: 0.4rem; }
.sr-badge { font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 5px; }
.sr-badge-public { background: rgba(34,197,94,0.12); color: #22c55e; }
.sr-badge-private { background: rgba(245,158,11,0.12); color: #f59e0b; }
.sr-members-count { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.sr-card-footer { display: flex; align-items: center; justify-content: space-between; }
.sr-card-date { font-size: 0.7rem; color: var(--text-muted); }
.sr-card-actions { display: flex; gap: 0.3rem; }
.sr-btn { padding: 0.3rem 0.7rem; border-radius: 6px; border: none; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.12s; }
.sr-btn-chat { background: #8b5cf6; color: white; }
.sr-btn-chat:hover { background: #7c3aed; }
.sr-btn-join { background: #22c55e; color: white; }
.sr-btn-join:hover { background: #16a34a; }
.sr-btn-leave { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-muted); }
.sr-btn-delete { background: none; border: 1px solid var(--border-color); color: var(--text-muted); }
.sr-btn-delete:hover { border-color: #ef4444; color: #ef4444; }
.sr-empty { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.85rem; border: 1px dashed var(--border-color); border-radius: 12px; }
.sr-chat-area { display: flex; flex-direction: column; height: 60vh; max-height: 500px; background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 14px; overflow: hidden; }
.sr-chat-header { padding: 0.7rem 1rem; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.sr-back-btn { background: none; border: none; color: #8b5cf6; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; padding: 0; margin-bottom: 0.2rem; }
.sr-room-title { font-weight: 700; color: var(--text-primary); font-size: 0.9rem; }
.sr-room-subject { font-size: 0.72rem; color: var(--text-muted); }
.sr-chat-messages { flex: 1; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }
.sr-msg { max-width: 75%; padding: 0.5rem 0.7rem; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); }
.sr-msg-mine { align-self: flex-end; background: #8b5cf615; border-color: #8b5cf630; }
.sr-msg-author { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; margin-bottom: 0.15rem; }
.sr-msg-text { font-size: 0.85rem; color: var(--text-primary); line-height: 1.4; }
.sr-chat-input { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid var(--border-color); }
.sr-msg-input { flex: 1; padding: 0.5rem 0.7rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; outline: none; transition: border-color 0.15s; }
.sr-msg-input:focus { border-color: #8b5cf6; }
.sr-send-btn { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; border: none; border-radius: 8px; width: 38px; height: 38px; font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.sr-send-btn:hover { transform: scale(1.05); }

/* ==========================================================================
   v2 Utility Classes (additive — no existing styles modified)
   ========================================================================== */

/* Section navigation items */
.nav-section {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  position: relative;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
}
.nav-section:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.nav-section.active {
  background: rgba(168,143,217,0.12);
  color: var(--primary);
  font-weight: 600;
}
.nav-section .nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.nav-section .nav-label { flex: 1; min-width: 0; }

/* Section page container */
.section-page {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg);
}
.section-header { margin-bottom: var(--sp-xl); }
.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-2xs);
}
.section-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Card system */
.card-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  transition: all var(--transition-fast);
}
.card-v2:hover { border-color: rgba(196, 181, 253, 0.2); }
.card-v2-interactive { cursor: pointer; }
.card-v2-interactive:hover {
  border-color: rgba(139, 92, 246, 0.45);
  background: rgba(139, 92, 246, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(139, 92, 246, 0.15);
  transform: translateY(-2px);
}
.card-v2-sm { padding: var(--sp-md); border-radius: var(--radius-md); }

/* Button system */
.btn-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.btn-v2-primary {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border: 1px solid rgba(196, 181, 253, 0.25);
  color: white;
}
.btn-v2-primary:hover {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.4), 0 0 20px rgba(196, 181, 253, 0.2);
  transform: translateY(-1px);
}
.btn-v2-secondary {
  background: var(--bg-card);
  color: var(--text-secondary);
  border-color: var(--border-color);
}
.btn-v2-secondary:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
  color: var(--text-primary);
}
.btn-v2-ghost { background: transparent; color: var(--text-secondary); }
.btn-v2-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.btn-v2-sm { padding: 0.35rem 0.65rem; font-size: var(--text-xs); }

/* Bottom navigation (mobile) */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: rgba(14, 17, 34, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  z-index: 100;
  padding: 0 var(--sp-sm);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
.bottom-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body);
}
.bottom-nav-item .bnav-icon { line-height: 1; display: flex; align-items: center; justify-content: center; }
.bottom-nav-item.active {
  color: var(--accent-lilac);
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}
.bottom-nav-item.active .bnav-icon svg {
  stroke: var(--accent-lilac);
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.6));
}
.bottom-nav-item:hover { color: var(--text-secondary); }

/* Responsive */
@media (max-width: 768px) {
  .bottom-nav { display: block; }
  .section-page { padding: var(--sp-lg) var(--sp-md); }
}

/* Divider */
.divider-v2 { height: 1px; background: var(--border-color); margin: var(--sp-md) 0; }

/* ==========================================================================
   Niv — Mascot de nevla
   ========================================================================== */

.niv-host { display: inline-flex; align-items: center; justify-content: center; }
.niv-container { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.niv-svg { display: block; }
.niv-sculpted { overflow: visible; flex-shrink: 0; }
.niv-expression-thinking .niv-face { transform: rotate(-6deg); }
.niv-expression-explaining .niv-face { animation: niv-face-talk 4s ease-in-out infinite; }
@keyframes niv-face-talk { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
.niv-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: niv-blink 4.6s ease-in-out infinite;
}
@keyframes niv-blink {
  0%, 36%, 40%, 76%, 80%, 84%, 88%, 100% { scale: 1 1; }
  38%, 78%, 86% { scale: 1 0.08; }
}
@media (prefers-reduced-motion: reduce) {
  .niv-container, .niv-container *, .niv-inline *, .niv-avatar-wrap * {
    animation: none !important;
  }
}

/* ── Thinking dots ── */
.niv-think-dots {
  position: absolute;
  top: -10px;
  right: -14px;
  display: flex;
  gap: 3px;
}
.niv-think-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-purple, #8b5cf6);
  opacity: 0.5;
  animation: niv-dot-pulse 1.4s ease-in-out infinite;
}
.niv-think-dots span:nth-child(2) { animation-delay: 0.2s; }
.niv-think-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes niv-dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 0.9; transform: scale(1.1); }
}

/* ── Search magnifying glass ── */
.niv-search-icon {
  position: absolute;
  top: -2px;
  right: -10px;
  opacity: 0.7;
  animation: niv-search-bob 2s ease-in-out infinite;
}

@keyframes niv-search-bob {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(3px, -2px) rotate(-8deg); }
}

/* ── Success sparkle ── */
.niv-sparkle {
  position: absolute;
  top: -4px;
  right: -4px;
  animation: niv-sparkle-pop 0.6s ease-out 2;
  opacity: 0;
}

@keyframes niv-sparkle-pop {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.3) rotate(20deg); }
  100% { opacity: 0; transform: scale(0.8) rotate(45deg); }
}

/* ── Organizing floating cards ── */
.niv-cards {
  position: absolute;
  inset: -8px;
  pointer-events: none;
}
.niv-card {
  position: absolute;
  width: 10px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent-purple, #8b5cf6);
  opacity: 0.35;
}
.niv-card.c1 { top: 0; left: 2px; animation: niv-card-float 2.5s ease-in-out infinite; }
.niv-card.c2 { top: 4px; right: -2px; animation: niv-card-float 2.5s ease-in-out 0.4s infinite; }
.niv-card.c3 { bottom: 2px; left: 6px; animation: niv-card-float 2.5s ease-in-out 0.8s infinite; }

@keyframes niv-card-float {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 0.6; transform: translateY(-4px); }
}

/* ── Core animations ── */

@keyframes niv-float {
  0%, 100% { transform: translateY(0); }
  25% { transform: translate(1px, -2px) rotate(1.5deg); }
  50% { transform: translate(0, -4px) rotate(0deg); }
  75% { transform: translate(-1px, -2px) rotate(-1.5deg); }
}

@keyframes niv-think {
  0%, 100% { transform: scale(1) translateY(0); }
  30% { transform: scale(0.99, 1.015) translateY(-1px); }
  60% { transform: scale(1.01, 0.99) translateY(0.5px); }
}

@keyframes niv-look-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

@keyframes niv-explain {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-1px) rotate(-1deg); }
  75% { transform: translateX(1px) rotate(1deg); }
}

@keyframes niv-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-4px) scale(1.03); }
  60% { transform: translateY(-1px) scale(1.01); }
}

@keyframes niv-breathe {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.04); opacity: 0.9; }
}

/* ── Inline usage (next to text) ── */
.niv-inline { margin: 0 0.3rem; }

/* ── Chat bubble avatar ── */
.bubble-avatar .niv-avatar-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bubble-avatar .niv-avatar-wrap .niv-svg {
  display: block;
}

/* ── Welcome banner Niv ── */
.niv-welcome {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

/* ── Chat input Niv ── */
.niv-input-presence {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.3rem;
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.12);
  border-radius: 10px;
}
.niv-input-presence .niv-label {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
  font-style: italic;
}

/* ── Niv contextual tip card ── */
.niv-tip-card {
  margin-bottom: 1rem;
}
.niv-tip-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(139,92,246,0.02));
  border: 1px solid rgba(139,92,246,0.12);
  border-radius: 12px;
}
.niv-tip-avatar {
  flex-shrink: 0;
  animation: niv-float 3s ease-in-out infinite;
}
.niv-tip-text {
  flex: 1;
  min-width: 0;
}
.niv-tip-msg {
  font-size: 0.82rem;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.4;
}
.niv-tip-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 8px;
  color: var(--primary, #8b5cf6);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.niv-tip-chat-btn:hover {
  background: rgba(139,92,246,0.18);
  border-color: var(--primary, #8b5cf6);
  transform: translateY(-1px);
}
.niv-tip-chat-btn svg {
  flex-shrink: 0;
}
/* Safe areas apply last so compact/mobile rules cannot hide controls under the notch. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
.modal-backdrop, .auth-backdrop, .formulas-modal, .cl-modal,
.onboarding-overlay, .cram-modal, .mn-modal, .examgen-modal, .stepcalc-modal {
  padding: calc(var(--safe-top) + 8px) calc(var(--safe-right) + 8px)
    calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 8px);
}
.modal-dialog, .auth-card, .landing-page, .formulas-panel, .cl-panel, .onboarding-card,
.cram-panel, .mn-panel, .examgen-panel, .stepcalc-panel {
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
  overflow-y: auto;
}
.chat-overlay {
  top: var(--safe-top);
  height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
@media (max-width: 768px) {
  .app-layout { height: calc(100dvh - var(--bottom-nav-height) - var(--safe-bottom)); }
  .main-content { height: 100%; min-height: 0; }
  .main-header {
    padding-top: calc(var(--safe-top) + 8px);
    padding-left: max(0.5rem, var(--safe-left));
    padding-right: max(0.5rem, var(--safe-right));
  }
  .sidebar {
    top: var(--safe-top);
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
    padding-left: max(1.5rem, var(--safe-left));
  }
  .bottom-nav { height: calc(var(--bottom-nav-height) + var(--safe-bottom)); }
  .menu-toggle, .close-modal, .modal-header button, .chat-overlay-header button,
  .formulas-header button, .cl-header-bar button, .cram-header button,
  .mn-header button, .examgen-header button, .stepcalc-header button {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }
}

/* Block Blast */
#blockblast-content { padding: 0.4rem !important; max-width: 480px !important; }
.bb-game { width: 100%; margin: auto; --bb-accent: #a78bfa; }
.blockblast-active .calc-fab, .blockblast-active .pom-fab,
.blockblast-active .formulas-fab, .blockblast-active .admin-bot-fab,
.blockblast-active .examgen-fab { display:none !important; }
.bb-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.bb-eyebrow { font-size:0.6rem; font-weight:700; letter-spacing:0.14em; color:var(--text-muted); }
.bb-heading h2 { font-size:1.5rem; line-height:1.4; letter-spacing:-0.04em; }
.bb-heading h2 span { font-size:0.68rem; letter-spacing:0; margin-left:10px; color:var(--text-muted); font-weight:500; }
.bb-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.bb-stats > div { background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:8px 12px; }
.bb-stats span { display:block; font-size:0.65rem; color:var(--text-muted); }
.bb-stats strong { display:block; font-size:1.3rem; font-variant-numeric:tabular-nums; line-height:1.4; }
.bb-stats > div:nth-child(2) strong { color:var(--primary); }
.bb-board-wrap { position:relative; }
#bb-board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; padding:8px; background:#171b2a; border:1px solid #343950; border-radius:15px; aspect-ratio:1; touch-action:none; }
.bb-cell { display:block; min-width:0; width:100%; aspect-ratio:1; padding:0; border:1px solid #30374b; border-radius:5px; background:#242b3e; cursor:pointer; touch-action:none; }
.bb-cell.bb-filled { background:var(--block-color); border-color:#ffffff30; box-shadow:inset 0 2px 0 #ffffff35, inset 0 -2px 0 #00000025; }
.bb-cell.bb-preview { background:var(--block-color); opacity:0.62; border:2px solid #fff; }
.bb-cell.bb-invalid { outline:2px solid #f87171; outline-offset:-2px; }
.bb-cell.bb-will-clear { outline:2px solid #fef3c7; outline-offset:-2px; filter:brightness(1.25); }
.bb-cell:focus-visible, .bb-piece:focus-visible { outline:3px solid #fff; outline-offset:-3px; }
.bb-cell.bb-clearing { animation:bb-clear 240ms ease-out; }
@keyframes bb-clear { 0% { background:#fff; transform:scale(1); } 50% { background:#ddd6fe; transform:scale(1.08); } 100% { transform:scale(0.3); opacity:0.2; } }
.bb-status { min-height:42px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:0.72rem; color:var(--text-secondary); margin:5px 0; line-height:1.4; }
.bb-tray { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.bb-piece { display:grid; place-items:center; min-height:94px; min-width:0; border:2px solid var(--border-color); border-radius:12px; background:var(--bg-card); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; --piece-cell:17px; }
.bb-piece.bb-selected { border-color:var(--primary); background:rgba(139,92,246,0.12); }
.bb-piece.bb-no-fit { opacity:0.45; }
.bb-piece.bb-used { opacity:0.3; border-style:dashed; font-size:1.2rem; }
.bb-shape { display:grid; grid-template-columns:repeat(var(--piece-cols),var(--piece-cell,17px)); gap:3px; pointer-events:none; }
.bb-block { display:block; width:var(--piece-cell,17px); height:var(--piece-cell,17px); border-radius:4px; background:var(--block-color); box-shadow:inset 0 2px 0 #ffffff40, inset 0 -2px 0 #00000025; }
.bb-block.bb-empty { visibility:hidden; }
.bb-ghost { position:fixed; pointer-events:none; z-index:100000; transform:translate(-50%,-50%); opacity:0.85; }
.bb-ghost .bb-shape { gap:4px; }
.bb-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.bb-footer p { font-size:0.68rem; color:var(--text-muted); line-height:1.5; }
.bb-footer b { font-weight:500; }
.bb-secondary, .bb-primary { min-height:44px; padding:8px 16px; border-radius:10px; cursor:pointer; font:inherit; font-size:0.78rem; font-weight:600; }
.bb-secondary { border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-primary); }
.bb-primary { border:0; color:#fff; background:#7c3aed; }
.bb-rules { margin-top:14px; color:var(--text-muted); font-size:0.72rem; }
.bb-rules summary { padding:8px 0; cursor:pointer; }
.bb-rules p { margin:8px 0; }
.bb-end { position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:16px; background:#0d102bd9; border-radius:15px; }
.bb-end[hidden] { display:none; }
.bb-end-card { width:100%; max-width:280px; border:1px solid var(--border-color); border-radius:16px; background:var(--bg-card); text-align:center; padding:24px 18px; }
.bb-end-card h3 { font-size:1.4rem; margin:8px 0; }
.bb-end-card > strong { font-size:2.8rem; font-variant-numeric:tabular-nums; line-height:1.2; }
.bb-end-card p { color:var(--text-muted); font-size:0.78rem; margin:12px 0; }
.bb-end-card button { display:block; width:100%; margin-top:8px; }
@media (max-width:380px) { .bb-piece { --piece-cell:15px; min-height:86px; } .bb-heading { margin-bottom:8px; } .bb-stats { margin-bottom:8px; } }
@media (prefers-reduced-motion:reduce) { .bb-cell.bb-clearing { animation:none; } }
@media (max-width:768px) {
  .calc-panel, .admin-bot-panel, .pom-panel { bottom:var(--safe-bottom); max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px); overflow-y:auto; }
  .calc-header button, .admin-bot-header button, .pom-header button { min-width:44px; min-height:44px; }
}

/* Guided AI setup */
.ai-guide-backdrop { position:fixed; inset:0; z-index:100100; background:rgba(8,10,22,0.78); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 12px); }
.ai-guide { width:100%; max-width:550px; max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--border-color); border-radius:22px; background:var(--bg-card); color:var(--text-primary); padding:20px 28px; }
.ai-guide-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ai-guide-top > span { font-size:0.6rem; font-weight:700; letter-spacing:0.13em; color:var(--text-muted); }
.ai-guide-top button, .ai-guide-key-row button { min-width:44px; min-height:44px; border:0; border-radius:8px; background:var(--bg-dark); color:var(--text-primary); cursor:pointer; }
.ai-guide-progress { display:flex; gap:6px; margin:10px 0 24px; }
.ai-guide-progress span { height:4px; flex:1; background:var(--border-color); border-radius:4px; }
.ai-guide-progress .active { background:var(--primary); }
.ai-guide-tag { color:var(--primary); font-size:0.66rem; letter-spacing:0.08em; font-weight:700; }
.ai-guide h2 { font-size:1.65rem; line-height:1.15; letter-spacing:-0.04em; margin:10px 0 12px; }
.ai-guide h2:focus { outline:none; }
.ai-guide p { font-size:0.83rem; line-height:1.6; color:var(--text-secondary); margin:10px 0; }
.ai-guide .ai-guide-intro { font-size:0.94rem; }
.ai-guide a { color:var(--primary); text-underline-offset:3px; }
.ai-guide-flow { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:20px 0; }
.ai-guide-flow > span { flex:1; text-align:center; background:var(--bg-dark); border:1px solid var(--border-color); border-radius:12px; padding:14px 8px; }
.ai-guide-flow b, .ai-guide-flow small { display:block; }
.ai-guide-flow b { font-size:0.84rem; }
.ai-guide-flow small { font-size:0.65rem; color:var(--text-muted); }
.ai-guide-flow i { font-style:normal; color:var(--text-muted); }
.ai-guide-note { background:var(--bg-dark); border-left:3px solid var(--primary); border-radius:0 10px 10px 0; padding:14px 16px; margin:16px 0; }
.ai-guide-note b { font-size:0.83rem; }
.ai-guide-note p { margin:5px 0 0; }
.ai-guide-columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:20px 0; }
.ai-guide-columns b { font-size:0.84rem; }
.ai-guide-columns p { margin:4px 0; }
.ai-token-demo { display:flex; flex-wrap:wrap; gap:6px; padding:16px; margin:18px 0; border:1px solid var(--border-color); border-radius:12px; }
.ai-token-demo > span { padding:5px 8px; background:rgba(139,92,246,0.14); border:1px solid rgba(139,92,246,0.3); border-radius:6px; font:0.84rem monospace; }
.ai-token-demo small { flex-basis:100%; color:var(--text-muted); font-size:0.64rem; margin-top:5px; }
.ai-guide-steps { list-style:none; counter-reset:guide-step; padding:0; margin:20px 0; }
.ai-guide-steps li { counter-increment:guide-step; padding:0 0 18px 40px; position:relative; font-size:0.84rem; }
.ai-guide-steps li::before { content:counter(guide-step); position:absolute; left:0; top:0; width:28px; height:28px; display:grid; place-items:center; color:var(--primary); background:var(--bg-dark); border-radius:8px; font-weight:700; }
.ai-guide-steps span { display:block; color:var(--text-secondary); font-size:0.8rem; margin-top:4px; }
.ai-guide-external { display:block; border:1px solid var(--primary); border-radius:10px; padding:12px; text-align:center; font-size:0.83rem; text-decoration:none; font-weight:600; }
.ai-guide-label { display:block; margin-top:22px; margin-bottom:8px; font-size:0.83rem; font-weight:600; }
.ai-guide-key-row { display:flex; gap:8px; }
.ai-guide-key-row input { min-width:0; flex:1; font-size:16px; padding:12px; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-dark); color:var(--text-primary); }
.ai-guide-key-row button { font-size:0.73rem; padding:8px; }
.ai-guide .ai-guide-result { min-height:24px; font-size:0.8rem; }
.ai-guide-result.success { color:#16a34a; }
.ai-guide-footer { display:flex; justify-content:space-between; gap:10px; padding-top:18px; margin-top:14px; border-top:1px solid var(--border-color); }
.ai-guide-primary, .ai-guide-secondary { min-height:44px; border-radius:10px; padding:10px 16px; font:inherit; font-size:0.8rem; font-weight:600; cursor:pointer; }
.ai-guide-primary { background:#7c3aed; border:1px solid #7c3aed; color:white; }
.ai-guide-primary:disabled { opacity:0.6; cursor:wait; }
.ai-guide-secondary { border:1px solid var(--border-color); color:var(--text-primary); background:transparent; }
.ai-guide .ai-guide-small, .ai-guide .ai-guide-source { font-size:0.7rem; color:var(--text-muted); }
.ai-guide .ai-guide-source { margin-top:16px; font-size:0.61rem; text-align:center; }
.ai-guide-done { padding:24px 0 12px; text-align:center; }
.ai-guide-done-icon { display:grid; place-items:center; width:60px; height:60px; margin:0 auto 18px; border-radius:50%; background:#dcfce7; color:#15803d; font-size:1.8rem; }
.ai-guide-help { display:block; width:100%; padding:12px; margin-bottom:16px; border:1px solid var(--border-color); border-radius:10px; color:var(--primary); background:var(--bg-dark); cursor:pointer; text-align:left; font-size:0.8rem; min-height:44px; }
@media (max-width:480px) { .ai-guide { padding:16px 18px; border-radius:16px; } .ai-guide h2 { font-size:1.45rem; } .ai-guide-progress { margin-bottom:20px; } .ai-guide-flow { gap:6px; } .ai-guide-flow > span { padding:12px 4px; } }
#quick-capture-modal { padding:calc(var(--safe-top) + 8px) 8px calc(var(--safe-bottom) + 8px); }
#qc-dialog { max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px); overflow-y:auto; }
.ai-guide { display:flex; flex-direction:column; overflow:hidden; }
.ai-guide-top, .ai-guide-progress, .ai-guide-footer, .ai-guide-source { flex-shrink:0; }
.ai-guide-content { overflow-y:auto; min-height:0; padding-right:4px; scrollbar-width:thin; overscroll-behavior:contain; }
.ai-guide-done { overflow-y:auto; }

/* A larger companion stays inside the welcome area and never covers controls. */
.niv-companion { cursor:pointer; border-radius:50%; min-height:120px; touch-action:manipulation; }
.niv-companion .niv-svg { width:clamp(104px, 20vw, 132px); height:clamp(104px, 20vw, 132px); }
.niv-companion:focus-visible { outline:2px solid var(--niv-lilac); outline-offset:5px; }
.niv-companion .niv-face { translate:var(--niv-gaze-x, 0px) var(--niv-gaze-y, 0px); transition:translate .25s ease-out; }
.niv-expression-idle { transform-origin:50% 65%; animation:niv-soft-body 5.5s ease-in-out infinite; }
@keyframes niv-soft-body { 0%,100% { scale:1 1; } 50% { scale:1.025 .975; } }
@media (prefers-reduced-motion:reduce) {
  .niv-svg, .niv-svg * { animation:none!important; transition:none!important; }
  .niv-companion .niv-face { translate:0 0; }
}

/* Peripheral companion: only the mascot and its controls capture input. */
.niv-roamer { position:fixed; z-index:90; width:88px; height:106px; pointer-events:none; }
.niv-roamer[hidden], .niv-roamer [hidden] { display:none!important; }
.niv-roamer-moving { transition:top 3.2s cubic-bezier(.45,0,.2,1); }
.niv-roamer button { pointer-events:auto; cursor:pointer; font:inherit; }
.niv-roamer-actor { width:88px; height:80px; display:grid; place-items:center; padding:0; border:0; background:transparent; border-radius:50%; }
.niv-roamer-actor:focus-visible,.niv-roamer-settings:focus-visible { outline:2px solid var(--niv-lilac); outline-offset:2px; }
.niv-roamer .niv-face { translate:var(--niv-gaze-x,0px) var(--niv-gaze-y,0px); transition:translate .25s ease-out; }
.niv-roamer-settings { display:block; margin:0 auto; border:1px solid var(--border-color,#bca9d755); border-radius:12px; width:44px; height:26px; padding:0; background:var(--bg-card,#252131); color:var(--text-primary,#fff); line-height:16px; }
.niv-roamer-menu,.niv-roamer-bubble { position:absolute; right:0; bottom:110px; width:190px; padding:10px; border:1px solid var(--border-color,#bca9d755); border-radius:16px; background:var(--bg-card,#252131); color:var(--text-primary,#fff); box-shadow:0 8px 28px #16102422; font-size:13px; line-height:1.5; }
.niv-roamer-menu { bottom:30px; z-index:2; pointer-events:auto; }
.niv-roamer-menu button { display:block; width:100%; text-align:left; border:0; border-radius:8px; padding:10px; color:inherit; background:transparent; }
.niv-roamer-menu button:hover { background:#bfa2e52b; }
.niv-roamer[data-side="left"] .niv-roamer-menu,.niv-roamer[data-side="left"] .niv-roamer-bubble { right:auto; left:0; }
.niv-roamer[data-mode="mini"] { width:48px; height:48px; }
.niv-roamer[data-mode="mini"] .niv-roamer-actor { width:48px; height:48px; background:var(--bg-card,#252131); border:1px solid #bca9d755; }
.niv-roamer[data-mode="mini"] .niv-svg { width:36px; height:36px; }
.niv-roamer[data-mode="mini"] .niv-roamer-settings { display:none; }
.niv-roamer[data-mode="still"] *, .niv-roamer[data-mode="mini"] * { animation:none!important; }
@media (max-width:600px) { .niv-roamer { width:68px; height:90px; } .niv-roamer-actor { width:68px; height:64px; } .niv-roamer .niv-svg { width:60px; height:60px; } }
@media (prefers-reduced-motion:reduce) { .niv-roamer,.niv-roamer * { transition:none!important; animation:none!important; } .niv-roamer .niv-face { translate:0 0; } }

#voice-status { flex-basis:100%; font-size:.8rem; color:var(--text-secondary); padding:4px 0; }
#voice-status:empty { display:none; }
.chat-message-actions { display:flex; justify-content:flex-end; margin-top:8px; }
.chat-message-actions button,.chat-message-undo button { min-height:36px; padding:6px 10px; border:1px solid var(--border-color); border-radius:8px; background:transparent; color:var(--text-secondary); cursor:pointer; font:inherit; font-size:.75rem; }
.chat-message-undo { font-size:.8rem; padding:8px; color:var(--text-secondary); }

.niv-companion-visible #admin-bot-fab { display:none; }

/* HOY uses the existing theme and navigation. */
.today-page { width:100%; max-width:1100px; margin:0 auto; padding:clamp(16px,3vw,36px); }
.today-header { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.today-header h1 { margin:4px 0 12px; font-size:2rem; }
.today-header p { color:var(--text-secondary); margin:6px 0; }
.today-eyebrow { font-size:.7rem; letter-spacing:.12em; }
.today-greeting { font-size:1.25rem; }
.today-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.today-card { padding:20px; border:1px solid var(--border-color); border-radius:16px; background:var(--bg-card); min-width:0; }
.today-card h2 { font-size:1rem; margin:0 0 16px; color:var(--text-primary); }
.today-list { list-style:none; margin:0 0 12px; padding:0; }
.today-list li { display:flex; flex-direction:column; gap:5px; padding:12px 0; border-bottom:1px solid var(--border-color); overflow-wrap:anywhere; }
.today-list span,.today-empty { color:var(--text-secondary); font-size:.85rem; line-height:1.6; }
.today-action { background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border-color); border-radius:10px; padding:10px 14px; min-height:44px; cursor:pointer; font:inherit; font-size:.85rem; max-width:100%; overflow-wrap:anywhere; }
.today-action:hover,.today-action:focus-visible { border-color:var(--primary); }
.today-card > .today-action { margin:4px 6px 0 0; }
.today-quick { margin-top:16px; }
.today-quick > div,.today-resume { display:flex; flex-wrap:wrap; gap:8px; }
.sidebar-destinations { display:grid; gap:3px; margin-bottom:12px; }
.sidebar-destination { text-align:left; background:transparent; color:var(--text-secondary); border:0; border-radius:8px; padding:10px 12px; min-height:44px; cursor:pointer; }
.sidebar-destination.active { background:var(--bg-secondary); color:var(--primary); font-weight:700; }
@media(max-width:600px) { .today-grid { grid-template-columns:1fr; } .today-card { padding:16px; } .today-header { gap:8px; } }

.academic-header-title { display:none; flex:1; color:var(--text-secondary); font-size:.85rem; }
.academic-view .academic-header-title { display:block; }
.academic-view .main-header .header-title, .academic-view .main-header > .btn-secondary { display:none; }

/* Quick actions on HOY replace floating shortcuts that cover its cards. */
.today-active .calc-fab, .today-active .pom-fab, .today-active .formulas-fab { display:none; }
/* Calm navigation: one primary menu, with optional sections. */
#top-menu { display:none; }
.academic-view .sidebar-chat-tools { display:none; }
.sidebar-destinations { gap:4px; margin-bottom:0; }
.sidebar-destination { display:flex; align-items:center; gap:12px; font:inherit; font-size:.85rem; padding:10px 12px; }
.sidebar-destination svg { flex-shrink:0; opacity:.8; }
.sidebar-destination.active { background:rgba(168,143,217,.12); color:var(--text-primary); }
.sidebar-destination.active svg { color:var(--primary); opacity:1; }
.sidebar-destination:hover { background:rgba(168,143,217,.07); }
.sidebar-section { border-top:1px solid var(--border-color); padding-top:12px; }
.sidebar-section summary { cursor:pointer; color:var(--text-secondary); font-size:.8rem; min-height:44px; padding:10px 12px; }
.sidebar-section .sidebar-destinations { padding-left:12px; }
.sidebar-chat-tools { display:flex; flex-direction:column; gap:16px; }
.sidebar-chat-tools .chats-list { max-height:200px; overflow-y:auto; }
.today-card h2 { font-family:var(--font-heading); font-weight:600; letter-spacing:-.015em; }
.today-grid > .today-card:first-child { border-top:2px solid var(--primary); }
.today-header h1 { font-family:var(--font-heading); font-size:1.75rem; letter-spacing:-.04em; font-weight:600; }
.today-eyebrow { color:var(--text-muted); font-size:.65rem; letter-spacing:.1em; }
.today-greeting { font-weight:400; }
.today-action { border-radius:8px; }
.instagram-banner { display:flex; align-items:center; gap:18px; text-align:left; text-decoration:none; padding:24px; margin:0 0 24px; border:1px solid rgba(168,143,217,.3); border-radius:16px; background:linear-gradient(120deg,rgba(168,143,217,.14),rgba(168,143,217,.03)); color:var(--text-primary); flex-wrap:wrap; }
.instagram-mark { color:var(--primary); display:flex; }
.instagram-copy { display:flex; flex-direction:column; gap:6px; flex:1; min-width:180px; }
.instagram-copy strong { font-family:var(--font-heading); font-size:1.15rem; overflow-wrap:anywhere; }
.instagram-copy > span:last-child { font-size:.8rem; color:var(--text-secondary); line-height:1.6; }
.instagram-cta { color:var(--text-primary); font-size:.8rem; padding:10px 14px; border:1px solid var(--border-color); border-radius:8px; }
.instagram-banner:hover { border-color:var(--primary); }
.instagram-banner:focus-visible,.sidebar-section summary:focus-visible,.sidebar-destination:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
@media(max-width:600px) { .instagram-banner { padding:18px; gap:14px; } .instagram-cta { width:100%; text-align:center; } }
/* Direct manipulation stays available with reduced motion. */
.niv-roamer .niv-roamer-actor { cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.niv-roamer-dragging { transition:none!important; }
.niv-roamer-dragging .niv-roamer-actor { cursor:grabbing; }
.niv-roamer-dragging .niv-svg { transform:rotate(-8deg) scale(1.06); }
@media(prefers-reduced-motion:reduce) { .niv-roamer-dragging .niv-svg { transform:none; } }