/* ═══════════════════════════════════════════════════════════
   CBK INNOVATIVE MINDS — SINGLE STYLE SOURCE
   Inter · Light Editorial · #F9FAFB · #111827
   ONE file. No ciminds-theme.css needed after this.
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Variables (single source of truth) ── */
:root {
  --bg:        #F9FAFB;
  --surface:   #FFFFFF;
  --s2:        #F9FAFB;
  --s3:        #F3F4F6;
  --border:    #E5E7EB;
  --ink:       #111827;
  --muted:     #6B7280;
  --dim:       #9CA3AF;
  --green:     #15803D;
  --amber:     #B45309;
  --red:       #B91C1C;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; font-family: 'Inter', sans-serif !important; }
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* ── Utilities used by app.js ── */
.hide { display: none !important; }
.tab-content, .profile-tab-content { display: none; }
.tab-content.active, .profile-tab-content.active { display: block; }
.toast-exit { transform: translateX(110%); opacity: 0; transition: all .3s ease-in; }

/* ── Tailwind bg-gray-* overrides → light surfaces ── */
.bg-gray-900, .bg-primary  { background: var(--ink) !important; color: #fff !important; }
.bg-gray-800               { background: #1F2937 !important; color: #fff !important; }
.bg-gray-100               { background: var(--s3) !important; }
.bg-gray-50                { background: var(--s2) !important; }
.bg-white                  { background: var(--surface) !important; }
.bg-background             { background: var(--bg) !important; }
/* Progress bar fill stays dark */
#nav-progress-bar,
.bg-gray-900.h-full,
.bg-gray-900.h-2,
.bg-gray-900.h-1\.5 { background: var(--ink) !important; color: inherit !important; }

/* ── CBK utility classes (used throughout app.js) ── */
.bg-cbk-surface { background: var(--surface) !important; }
.bg-cbk-s2      { background: var(--s2)      !important; }
.bg-cbk-s3      { background: var(--s3)      !important; }
.bg-cbk-bg      { background: var(--bg)      !important; }
.border-cbk     { border-color: var(--border) !important; }
.border-cbk-md  { border-color: var(--border) !important; }
.divide-cbk > * + * { border-color: var(--border) !important; }
.text-cbk       { color: var(--ink)   !important; }
.text-cbk-80    { color: #1F2937     !important; }
.text-cbk-70    { color: #374151     !important; }
.text-cbk-60    { color: #4B5563     !important; }
.text-cbk-50    { color: var(--muted) !important; }
.text-cbk-40    { color: var(--dim)   !important; }
.bg-violet-dark { background: var(--ink) !important; }
.bg-violet      { background: #1F2937  !important; }
.text-violet    { color: var(--ink)    !important; }
.border-violet  { border-color: var(--ink) !important; }
.shadow-violet  { box-shadow: 0 4px 20px rgba(17,24,39,0.15) !important; }
/* Gradient for profile banner */
.from-violet-950 { --tw-gradient-from: #0B0F19; }
.via-violet-900  { --tw-gradient-via:  #1F2937; }
.to-violet-950   { --tw-gradient-to:   #0B0F19; }

/* ── Bento cards ── */
.bento-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.bento-cell.bento-hoverable:hover {
  box-shadow: 0 4px 16px rgba(17,24,39,0.08);
  border-color: #D1D5DB;
}
@media (max-width: 767px) { .bento-cell { padding: 16px; } }

/* ── Lesson exam radio ── */
.option-radio:checked + div {
  border-color: var(--ink) !important;
  background: var(--s3) !important;
  font-weight: 600;
}
.option-radio:checked + div .radio-inner { background: var(--ink) !important; }
input[type="radio"] { accent-color: var(--ink); }

/* ── Tab and profile tab active states ── */
.border-b-2.border-gray-900 { border-color: var(--ink) !important; }

/* ── Text colours from Tailwind ── */
.text-gray-900, .text-gray-800 { color: var(--ink)   !important; }
.text-gray-700                  { color: #374151      !important; }
.text-gray-600, .text-gray-500  { color: var(--muted) !important; }
.text-gray-400                  { color: var(--dim)   !important; }
.text-green-600, .text-green-700 { color: var(--green) !important; }
.text-amber-700, .text-amber-800 { color: var(--amber) !important; }
.text-red-600, .text-red-700    { color: var(--red)   !important; }

/* ── Status backgrounds ── */
.bg-green-50  { background: #F0FDF4 !important; }
.bg-green-100 { background: #DCFCE7 !important; }
.bg-red-50    { background: #FEF2F2 !important; }
.bg-red-100   { background: #FEE2E2 !important; }
.bg-amber-50  { background: #FFFBEB !important; }
.bg-blue-50   { background: #EFF6FF !important; }
.border-green-200 { border-color: #BBF7D0 !important; }
.border-red-200   { border-color: #FECACA !important; }
.border-amber-200 { border-color: #FDE68A !important; }
.border-blue-200  { border-color: #BFDBFE !important; }
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--border) !important; }
.divide-gray-100 > * + * { border-color: var(--border) !important; }

/* ── Sidebar nav active item ── */
#sidebar-nav .nav-btn.active,
#mob-drawer-nav .nav-btn.active,
#sidebar-nav .nav-btn.bg-gray-100,
#mob-drawer-nav .nav-btn.bg-gray-100 {
  background: var(--s3) !important;
  color: var(--ink) !important;
  font-weight: 600;
  border-left: 2px solid var(--ink);
  padding-left: 10px;
}

/* ── Content prose ── */
#app-container h1, #app-container h2, #app-container h3 { color: var(--ink) !important; font-weight: 700 !important; }
#app-container p, #app-container li { color: #374151 !important; }
#app-container strong { color: var(--ink) !important; }
#app-container code { background: var(--s3) !important; color: #374151 !important; border-radius: 4px; padding: 1px 5px; }
#app-container pre  { background: var(--s2) !important; border: 1px solid var(--border) !important; }

/* ── Protected content (lesson security) ── */
.protected-content { -webkit-user-select: none; user-select: none; position: relative; }
.protected-content input, .protected-content textarea, .protected-content select { -webkit-user-select: text; user-select: text; }
body.tab-hidden .protected-content { filter: blur(8px); transition: filter .15s ease; }
.protected-content { transition: filter .15s ease; }
#lesson-watermark {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 5; opacity: 0.03; overflow: hidden;
  display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around;
  font-size: 13px; font-weight: 700; color: var(--muted);
  transform: rotate(-25deg) scale(1.4); user-select: none;
}
#lesson-watermark span { padding: 40px 30px; white-space: nowrap; }

/* ── Watermark ── */
#ci-watermark {
  position: fixed; bottom: 8px; right: 10px;
  font-size: 10px; color: rgba(17,24,39,0.12);
  font-weight: 700; pointer-events: none; z-index: 40;
  white-space: nowrap; user-select: none;
}

/* ── Mobile bottom nav ── */
@media (max-width: 767px) {
  #bottom-nav { display: block !important; }
  #app-container { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
}
.bnav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 6px 4px 8px; gap: 3px;
  border: none; background: none; cursor: pointer;
  color: var(--dim); font-size: 10px; font-weight: 600;
  letter-spacing: .02em; min-height: 52px; transition: color .15s;
}
.bnav-btn svg { width: 20px; height: 20px; stroke-width: 1.6; }
.bnav-btn.active { color: var(--ink); }
.bnav-btn.active svg { stroke-width: 2.2; }
.bnav-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(0); transition: all .15s; }
.bnav-btn.active .bnav-dot { opacity: 1; transform: scale(1); }

/* ── Mobile responsive ── */
@media (max-width: 767px) {
  .overview-2col, .lesson-2col { flex-direction: column !important; }
  .overview-sidebar-card { position: static !important; width: 100% !important; }
  .lesson-module-nav { width: 100% !important; }
  .dash-h1 { font-size: 1.35rem !important; }
  .module-cards-grid { grid-template-columns: 1fr !important; }
  .profile-tabs-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cert-action-row { flex-direction: column !important; }
  .resume-card-inner { flex-direction: column !important; align-items: flex-start !important; }
  .resume-card-btn { width: 100% !important; }
}
@media (max-width: 767px) {
  .profile-tabs-row::-webkit-scrollbar { display: none; }
  .profile-tabs-row { scrollbar-width: none; }
  #profile-menu {
    position: fixed !important; top: 56px !important; right: 10px !important;
    left: auto !important; max-width: calc(100vw - 20px); min-width: 180px; z-index: 9999 !important;
  }
}

/* ── Float animation (overview cards) ── */
@keyframes boxFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.float-box { animation: boxFloat 1.5s ease-in-out infinite; animation-play-state: paused; will-change: transform; }
.float-box:hover { animation-play-state: running; box-shadow: 0 10px 20px rgba(17,24,39,0.08); }

/* ── Tutorial ── */
#tutorial-overlay {
  position: fixed; inset: 0; z-index: 99998;
 background: rgba(17,24,39,0.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#tutorial-overlay.active { opacity: 1; pointer-events: auto; }
#tutorial-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(17,24,39,0.15);
  padding: 28px 24px 20px; max-width: 390px; width: 100%;
  transform: scale(.97) translateY(8px); opacity: 0;
  transition: transform .25s cubic-bezier(.22,.68,0,1.05), opacity .2s ease;
}
#tutorial-overlay.active #tutorial-card { transform: scale(1) translateY(0); opacity: 1; }
#tutorial-card .tut-icon { width:40px;height:40px;border-radius:9px;background:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:14px; }
#tutorial-card .tut-icon svg { width:20px;height:20px;stroke:#fff; }
#tutorial-card h3 { font-size:16px;font-weight:800;color:var(--ink);margin:0 0 7px;letter-spacing:-0.01em; }
#tutorial-card p  { font-size:14px;color:var(--muted);line-height:1.65;margin:0 0 20px; }
#tutorial-card .tut-actions { display:flex;align-items:center;justify-content:space-between;gap:10px; }
#tutorial-card .tut-dots { display:flex;gap:5px; }
#tutorial-card .tut-dot { width:5px;height:5px;border-radius:50%;background:var(--border);transition:background .2s,width .2s; }
#tutorial-card .tut-dot.active { background:var(--ink);width:14px;border-radius:3px; }
#tutorial-card .tut-btn-group { display:flex;align-items:center;gap:6px; }
#tutorial-card button.tut-next { background:var(--ink);color:#fff;font-weight:700;font-size:13px;padding:8px 18px;border-radius:8px;border:none;cursor:pointer;transition:background .15s; }
#tutorial-card button.tut-next:hover { background:#1F2937; }
#tutorial-card button.tut-skip { background:none;color:var(--dim);font-weight:600;font-size:13px;border:none;cursor:pointer;padding:8px 4px;transition:color .15s; }
#tutorial-card button.tut-skip:hover { color:var(--muted); }
#tutorial-card .tut-close { position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--dim);transition:background .15s; }
#tutorial-card .tut-close:hover { background:var(--s3);color:var(--muted); }
#tutorial-card .tut-close svg { width:14px;height:14px; }
.tut-pulse { outline:2px solid var(--ink);outline-offset:3px;border-radius:8px;animation:tut-pulse-anim 1.4s ease-out 2; }
@keyframes tut-pulse-anim { 0%{box-shadow:0 0 0 0 rgba(17,24,39,0.25)}70%{box-shadow:0 0 0 8px rgba(17,24,39,0)}100%{box-shadow:0 0 0 0 rgba(17,24,39,0)} }
#tutorial-arrow path { animation:tut-arrow-dash 1.2s linear infinite; }
@keyframes tut-arrow-dash { to { stroke-dashoffset: -24; } }

/* ── Splash ── */
.splash-bar {
  width: 0;
  animation: splash-load 1.4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes splash-load { 0%{width:0} 60%{width:80%} 100%{width:100%} }

/* ── Forms ── */
input, select, textarea {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
}
input::placeholder, textarea::placeholder { color: var(--dim) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 3px rgba(17,24,39,0.08) !important;
  outline: none !important;
}