/* ============================================================
   Discrete Mathematics Calculator — "Pulse" theme
   A computation-forward SaaS look: an indigo/mint duotone, a
   dot-grid backdrop (graph paper for the computation itself), and
   a soft accent glow standing in for an LED/terminal pulse when
   something is active or hovered. One deliberate animated moment
   lives in the hero (drifting gradient orbs); everywhere else,
   motion only answers what the person just did.
   ============================================================ */

:root{
  color-scheme: light;

  --bg:         #F5F6FC;
  --surface:    #FFFFFF;
  --surface-2:  #FAFAFF;
  --ink:        #14152B;
  --ink-soft:   #5B5D78;
  --line:       #E4E5F3;
  --accent:     #5146E5;
  --accent-2:   #6C63F6;
  --accent-soft:#EDECFD;
  --mint:       #0EA890;
  --mint-soft:  #DEF5F0;
  --success:    #1AAE86;
  --danger:     #E5484D;
  --danger-soft:#FCE4E4;
  --glow:       rgba(81,70,229,0.28);
  --shadow-sm:  0 1px 2px rgba(20,21,43,0.05);
  --shadow:     0 1px 2px rgba(20,21,43,0.04), 0 14px 32px -8px rgba(20,21,43,0.14);
  --shadow-lg:  0 24px 60px -16px rgba(20,21,43,0.28);
  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  22px;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Bootstrap variable bridge — keeps every Bootstrap utility class
     (.text-body-secondary, .border, .bg-body, etc.) in sync with this
     theme's own light/dark system instead of Bootstrap's frozen
     defaults, across both color modes. */
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-secondary-color: var(--ink-soft);
  --bs-tertiary-color: var(--ink-soft);
  --bs-secondary-bg: var(--surface);
  --bs-tertiary-bg: var(--surface);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-2);
  --bs-heading-color: var(--ink);

  /* Backward-compatible aliases — several module templates (Venn
     diagrams, graph/relation SVGs, etc.) reference these old "Proof
     Ledger" theme variable names directly inline. Mapping them onto
     the new Pulse palette means those templates don't need editing. */
  --paper: var(--bg);
  --paper-raised: var(--surface);
  --rule: var(--line);
  --teal: var(--mint);
  --teal-soft: var(--mint-soft);
}

[data-theme="dark"]{
  color-scheme: dark;

  --bg:         #0A0B16;
  --surface:    #12131F;
  --surface-2:  #171829;
  --ink:        #EDEEFB;
  --ink-soft:   #9698BC;
  --line:       #262841;
  --accent:     #8B85FF;
  --accent-2:   #7C79FF;
  --accent-soft:#1E1C3D;
  --mint:       #2FE0BE;
  --mint-soft:  #133831;
  --success:    #2FE0BE;
  --danger:     #FF7A7A;
  --danger-soft:#3A1A1E;
  --glow:       rgba(139,133,255,0.4);
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.35);
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 16px 40px -10px rgba(0,0,0,0.55);
  --shadow-lg:  0 30px 70px -18px rgba(0,0,0,0.65);

  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-secondary-color: var(--ink-soft);
  --bs-tertiary-color: var(--ink-soft);
  --bs-secondary-bg: var(--surface);
  --bs-tertiary-bg: var(--surface);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-2);
  --bs-heading-color: var(--ink);

  --paper: var(--bg);
  --paper-raised: var(--surface);
  --rule: var(--line);
  --teal: var(--mint);
  --teal-soft: var(--mint-soft);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  position: relative;
}

/* A faint dot-grid across the whole app — graph paper for the
   computation happening on top of it. Fixed so it doesn't scroll
   with content, extremely low-contrast so it reads as texture, not
   decoration competing with the UI. */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] body::before{ opacity: 0.35; }

h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mono, code, .expr{ font-family: var(--font-mono); }

a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-2); }

::selection{ background: var(--accent-soft); color: var(--ink); }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover{ background: var(--ink-soft); }

/* ---------- Layout shell ---------- */
.app-shell{ display:flex; min-height:100vh; position:relative; z-index:1; }

.sidebar{
  width: 272px;
  flex-shrink:0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 1.5rem 0.9rem;
  position: sticky;
  top:0;
  height: 100vh;
  overflow-y:auto;
  transition: transform 0.25s ease;
}

.sidebar-brand{
  display:flex; align-items:center; gap:0.65rem;
  padding: 0 0.4rem 1.1rem 0.4rem;
  margin-bottom: 0.6rem;
}
.sidebar-brand .brand-mark{
  width: 38px; height:38px; flex-shrink:0;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--mint));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.15rem;
  box-shadow: 0 6px 16px -4px var(--glow);
}
.sidebar-brand h1{
  font-size: 1.05rem;
  margin: 0;
  line-height:1.2;
}
.sidebar-brand .tagline{
  display:block;
  font-size: 0.7rem;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 0.1rem;
}

.nav-section-label{
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 1.1rem 0.6rem 0.4rem 0.6rem;
  opacity: 0.75;
}

.side-link{
  display:flex; align-items:center; gap:0.65rem;
  padding: 0.55rem 0.65rem;
  margin: 0.05rem 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}
.side-link .num{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--accent);
  background: var(--accent-soft);
  width: 1.6rem; height:1.6rem;
  border-radius: 7px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.side-link:hover{ background: var(--surface-2); color: var(--ink); text-decoration:none; }
.side-link.active{
  color: var(--ink);
  background: var(--accent-soft);
  font-weight: 600;
}
.side-link.active::before{
  content:"";
  position:absolute; left:-0.9rem; top:20%; bottom:20%;
  width:3px; border-radius:3px;
  background: linear-gradient(var(--accent), var(--mint));
}
.side-link.active .num{ background: var(--accent); color:#fff; }

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 0.9rem 1.75rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  position: sticky; top:0; z-index: 20;
}

.topbar .search-box{
  max-width: 340px; width:100%; position:relative;
}
.topbar input[type="search"]{
  width:100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 2.1rem;
  font-size: 0.85rem;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.topbar input[type="search"]:focus{
  outline:none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.topbar .search-box i{
  position:absolute; left:0.85rem; top:50%; transform:translateY(-50%);
  color: var(--ink-soft); font-size:0.85rem;
}

.theme-toggle{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  width: 38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
  cursor:pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.3s ease;
}
.theme-toggle:hover{ border-color: var(--accent); color: var(--accent); }
.theme-toggle i{ transition: transform 0.4s cubic-bezier(.4,1.6,.4,1); }
.theme-toggle.spin i{ transform: rotate(180deg); }

.content{ padding: 1.9rem; flex:1; }

/* ---------- Cards ---------- */
.card-ledger{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.module-card{
  display:block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.35rem;
  height:100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position:relative;
  overflow:hidden;
}
.module-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, var(--accent), transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition: opacity 0.2s ease;
  pointer-events:none;
}
.module-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  text-decoration:none;
}
.module-card:hover::after{ opacity:1; }
.module-card .stamp{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  display:inline-block;
}
.module-card .icon-badge{
  width: 42px; height:42px;
  border-radius: 12px;
  background: var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  margin: 0.85rem 0 0.7rem 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.module-card:hover .icon-badge{
  background: linear-gradient(135deg, var(--accent), var(--mint));
  transform: scale(1.06) rotate(-4deg);
}
.module-card .icon-badge .bi{ color: var(--accent); font-size: 1.25rem; transition: color 0.2s ease; }
.module-card:hover .icon-badge .bi{ color:#fff; }
.module-card h3{
  font-size: 1.05rem;
  margin: 0 0 0.3rem 0;
  color: var(--ink);
}
.module-card p{ color: var(--ink-soft); font-size: 0.85rem; margin:0; line-height:1.5; }

/* Scroll-reveal for the module grid — the one orchestrated stagger
   moment on this page. JS toggles .in-view per card as it enters the
   viewport; everything else in the app is static until interacted with. */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in-view{ opacity:1; transform:none; }

.stat-tile{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.1rem;
  text-align:center;
  position:relative;
}
.stat-tile .value{
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height:1;
}
.stat-tile .label{
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top:0.45rem;
}

/* ---------- Hero ---------- */
.hero-panel{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.6rem;
  position:relative;
  overflow:hidden;
}
.hero-panel .orb{
  position:absolute;
  border-radius:50%;
  filter: blur(60px);
  opacity: 0.55;
  z-index:0;
  animation: drift 16s ease-in-out infinite;
}
.hero-panel .orb-a{
  width:280px; height:280px; top:-90px; right:-60px;
  background: var(--accent);
}
.hero-panel .orb-b{
  width:220px; height:220px; bottom:-80px; right:180px;
  background: var(--mint);
  animation-duration: 20s;
  animation-delay: -6s;
}
@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-24px, 20px) scale(1.08); }
}
.hero-panel > *{ position:relative; z-index:1; }
.hero-panel .eyebrow{
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  display:flex; align-items:center; gap:0.4rem;
}
.hero-panel .eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px var(--mint-soft);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ box-shadow: 0 0 0 4px var(--mint-soft); }
  50%{ box-shadow: 0 0 0 7px transparent; }
}
.hero-panel h1{ font-size: 2.5rem; margin: 0.5rem 0 0.9rem 0; max-width: 620px; }
.hero-panel p.lead{ color: var(--ink-soft); max-width: 580px; font-size:1.02rem; }

/* ---------- Feature list (used in place of numbered markers when
   content isn't actually sequential) ---------- */
.feature-row{ display:flex; gap:0.9rem; align-items:flex-start; }
.feature-row .feature-icon{
  width:38px; height:38px; flex-shrink:0;
  border-radius:10px;
  background: var(--mint-soft);
  color: var(--mint);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
}

/* ---------- Forms & buttons ---------- */
.form-label{ font-size: 0.82rem; font-weight:600; color: var(--ink); }
.form-control, .form-select{
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: var(--surface);
  color: var(--ink);
}
.form-control::placeholder{ color: var(--ink-soft); opacity:0.7; }

.form-select option{
  background: var(--surface);
  color: var(--ink);
}

/* ---------- Tabs ---------- */
.nav-tabs{
  border-bottom: 1px solid var(--line);
  gap: 0.2rem;
}
.nav-tabs .nav-link{
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.5rem 0.95rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus{
  color: var(--ink);
  background: var(--surface-2);
  border-color: transparent;
  text-decoration: none;
}
.nav-tabs .nav-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  background: var(--surface);
  color: var(--accent);
  border-color: var(--line) var(--line) var(--surface);
  font-weight: 600;
}

.btn{ border-radius: var(--radius-sm); font-weight:600; transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
.btn:active{ transform: scale(0.97); }

.btn-accent{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 1px solid transparent;
  color: #fff;
}
.btn-accent:hover{ color:#fff; box-shadow: 0 8px 20px -6px var(--glow); }
.btn-accent:disabled, .btn-accent.disabled{ opacity: 0.5; }

.btn-outline-ledger{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-outline-ledger:hover{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn-teal{
  background: var(--mint);
  border: 1px solid var(--mint);
  color:#fff;
}
.btn-teal:hover{ box-shadow: 0 8px 20px -6px rgba(14,168,144,0.4); color:#fff; }

/* ---------- Result panels ---------- */
.result-panel{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-top: 1rem;
}
.result-panel .result-title{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom:0.5rem;
}

.badge-true{ background: var(--success); color:#fff; }
.badge-false{ background: var(--danger); color:#fff; }
.badge-soft{ background: var(--mint-soft); color: var(--mint); }

table.table-ledger{
  width:100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
table.table-ledger th{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--line);
  padding: 0.55rem 0.6rem;
  text-align:left;
}
table.table-ledger td{
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.6rem;
  font-family: var(--font-mono);
}
table.table-ledger tr:hover td{ background: var(--accent-soft); }

.result-toolbar{ display:flex; gap:0.5rem; margin-top:0.75rem; flex-wrap:wrap; }
.result-toolbar button{ font-size: 0.78rem; }

.step-line{
  border-left: 2px solid var(--accent);
  padding-left: 0.75rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

footer.site-footer{
  border-top: 1px solid var(--line);
  padding: 1.4rem 1.75rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align:center;
}

/* ---------- Standalone auth pages (login/register) ---------- */
.auth-shell{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.auth-shell .orb{
  position:absolute; border-radius:50%; filter: blur(70px); opacity:0.5; z-index:0;
  animation: drift 18s ease-in-out infinite;
}
.auth-shell .orb-a{ width:320px; height:320px; top:-100px; left:-80px; background: var(--accent); }
.auth-shell .orb-b{ width:260px; height:260px; bottom:-90px; right:-60px; background: var(--mint); animation-duration:22s; animation-delay:-8s; }
.auth-card{
  position: relative; z-index:1;
  width:100%; max-width:400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.2rem 2rem;
}
.auth-card .brand-mark{
  width:52px; height:52px; margin: 0 auto 0.9rem auto;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--mint));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.5rem;
  box-shadow: 0 10px 24px -6px var(--glow);
}

/* mobile */
.sidebar-toggle{ display:none; }
@media (max-width: 900px){
  .sidebar{ position:fixed; left:0; z-index:40; transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open{ transform: translateX(0); }
  .sidebar-toggle{ display:flex; }
  .topbar .search-box{ max-width: 160px; }
  .hero-panel h1{ font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}