@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   ICSE MasterClass — Design System
   Navy background, amber accents and glassmorphism
   ============================================================ */

:root {
  --site-bg: #090d16;
  --glass-bg: rgba(15, 23, 42, 0.6);
  --border-dark: rgba(31, 41, 55, 0.8);
  --scrollbar-thumb: #1f2937;
  --brand-amber: #f59e0b;
  --sky-blue: #0284c7;
  --emerald-green: #10b981;
  --black: #000000;
}

/* Base Styling */

html {
  scroll-behavior: smooth;
  background-color: var(--site-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--site-bg);
  color: #f3f4f6;
  overflow-x: hidden;
  min-width: 0;
}

/* Prevent narrow-screen children from forcing horizontal overflow */

main,
section,
header,
footer,
article,
div {
  min-width: 0;
}

img,
iframe,
video {
  max-width: 100%;
}

/* Glassmorphism Cards */

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-dark);
}

/* Search Fields */

#globalSearchInput,
#searchInput {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background-color: rgba(17, 24, 39, 0.9);
  color: #f9fafb;
  border: 1px solid #374151;
  border-radius: 1rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

#globalSearchInput::placeholder,
#searchInput::placeholder {
  color: #9ca3af;
  opacity: 1;
}

#globalSearchInput:focus,
#searchInput:focus {
  outline: none;
  border-color: var(--brand-amber);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

#globalSearchInput:focus-visible,
#searchInput:focus-visible {
  outline: 2px solid var(--brand-amber);
  outline-offset: 2px;
}

/* Custom Scrollbars */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--site-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-amber);
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Active Category Tab */

.cat-btn.active-tab {
  background-color: var(--brand-amber) !important;
  color: var(--black) !important;
  border-color: var(--brand-amber) !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

/* Hover Animations */

.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

.group:hover .group-hover\:scale-110 {
  transform: scale(1.10);
}

/* Pulse Glow for Install/Special Buttons */

@keyframes goldPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
}

.pulse-glow {
  animation: goldPulse 2s infinite;
}

/* Responsive Improvements */

@media (max-width: 640px) {
  #globalSearchInput,
  #searchInput {
    font-size: 16px;
  }

  .glass-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  iframe {
    max-width: 100%;
  }
}

/* Respect Reduced Motion Preferences */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* Personal library controls — saved and recently opened materials */
.personal-library-toolbar{display:flex;flex-direction:column;gap:12px;padding:14px;margin:4px 0 12px;border:1px solid rgba(245,158,11,.22);border-radius:16px;background:linear-gradient(120deg,rgba(15,23,42,.95),rgba(10,18,32,.88))}
.personal-library-copy{display:flex;flex-direction:column;gap:4px}
.personal-library-eyebrow{color:#fbbf24;font-size:10px;font-weight:900;letter-spacing:.16em}
.personal-library-caption{color:#94a3b8;font-size:11px;line-height:1.5}
.personal-library-actions{display:flex;flex-wrap:wrap;gap:8px}
.personal-view-btn,.personal-save-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 11px;border:1px solid #334155;border-radius:10px;background:rgba(15,23,42,.9);color:#cbd5e1;font-size:11px;font-weight:800;transition:background .18s,border-color .18s,color .18s}
.personal-view-btn:hover,.personal-save-btn:hover{border-color:rgba(245,158,11,.65);color:#fff}
.personal-view-btn.active{border-color:#f59e0b;background:rgba(245,158,11,.14);color:#fbbf24}
.personal-view-btn span{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:rgba(245,158,11,.15);color:#fbbf24;font-size:10px}
.personal-save-btn{min-height:30px;padding:6px 9px;color:#cbd5e1}
.personal-save-btn.is-saved{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.1);color:#fbbf24}
@media(min-width:640px){.personal-library-toolbar{flex-direction:row;align-items:center;justify-content:space-between}.personal-library-copy{max-width:48%}.personal-library-actions{justify-content:flex-end}}