/* ===== Theme Tokens ===== */
:root{
  --bg:#ffffff; --text:#000000; --muted:#6b7280;
  --card:#ffffff; --card-text:#1f2937;
  --accent:#3b82f6; --accent-hover:#2563eb;
  --surface:#f9fafb; --surface-hover:#e5e7eb;
  --shadow:0 4px 10px rgba(0,0,0,0.10); --border:#e2e8f0;
}
[data-theme="dark"]{
  --bg:#121212; --text:#e5e7eb; --muted:#9aa4b2;
  --card:#1f1f1f; --card-text:#f3f4f6;
  --accent:#60a5fa; --accent-hover:#3b82f6;
  --surface:#1e293b; --surface-hover:#2a3a55;
  --shadow:0 4px 10px rgba(255,255,255,0.06); --border:#334155;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
body{
  margin:0; padding:0;
  font-family:'Segoe UI', Tahoma, sans-serif;
  background:var(--bg); color:var(--text);
  transition:background .3s, color .3s; width:100%;
}

/* ===== Header / Navbar ===== */
header{
  display:flex; flex-direction:column; align-items:center; background:var(--card);
  box-shadow:var(--shadow); padding:10px 20px; position:sticky; top:0; z-index:1000;
  gap:8px; left:0; right:0;
}
.header-top{ display:flex; justify-content:space-between; align-items:center; width:100%; }
.header-top,.icon-row{ width:min(1100px,92%); margin:0 auto; }
.nav-right{ display:flex; align-items:center; gap:10px; font-weight:bold; color:var(--accent); }
.icon-row{ display:flex; justify-content:center; gap:30px; font-size:1.5rem; margin-top:8px; }
.icon-row a{ text-decoration:none; color:var(--text); transition:color .2s; }
.icon-row a:hover{ color:var(--accent); }
.notif-badge{
  position:absolute; top:-5px; right:-10px; background:#ef4444; color:#fff;
  font-size:.7rem; padding:2px 5px; border-radius:999px;
}

/* ===== Theme Toggle ===== */
.theme-toggle{
  position:relative; width:56px; height:28px;
  background:linear-gradient(45deg,#fbbf24,#f59e0b);
  border-radius:14px; cursor:pointer; border:none;
}
[data-theme="dark"] .theme-toggle{ background:linear-gradient(45deg,#1f2937,#374151); }
.theme-toggle::before{
  content:'☀️'; position:absolute; top:2px; left:2px; width:24px; height:24px;
  background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  transition:transform .25s ease;
}
[data-theme="dark"] .theme-toggle::before{
  content:'🌙'; transform:translateX(28px); background:#475569; color:#fff;
}

/* ===== Flash Messages ===== */
.flashes{ margin:12px 20px; }
.flash{
  text-align:center; background:rgba(220,53,69,.10); border-left:4px solid #dc3545;
  padding:10px; margin:6px 0; border-radius:6px; color:#c0392b;
}
.flash-success{ background:rgba(25,135,84,.10); border-left-color:#198754; color:#0f5132; }
.flash-info{ background:rgba(13,110,253,.10); border-left-color:#0d6efd; color:#084298; }
.flash-warning{ background:rgba(255,193,7,.12); border-left-color:#ffc107; color:#664d03; }
.flash-error,.flash-danger{ background:rgba(220,53,69,.10); border-left-color:#dc3545; color:#842029; }

/* ===== Buttons (mobile-first, tappable) ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:5px; padding:8px 14px; border-radius:10px;
  font-weight:700; font-size:.95rem; line-height:1; text-decoration:none;
  border:1px solid transparent; cursor:pointer; user-select:none;
  background:var(--surface); color:var(--text);
  transition:transform .15s, background .2s, border-color .2s, color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* sizes */
.btn.sm{ padding:7px 12px; border-radius:10px; font-size:.9rem; }
.btn.xs{ padding:6px 10px; border-radius:10px; font-size:.85rem; }
.btn.block{ display:flex; width:100%; }

/* variants */
.btn.primary{ background:var(--accent); color:#fff; }
.btn.primary:hover{ background:var(--accent-hover); color:#fff; }
.btn.success{ background:#22c55e; color:#fff; border-color:#16a34a; }
.btn.success:hover{ background:#16a34a; color:#fff; }
.btn.neutral{ background:var(--card); border-color:var(--border); color:var(--text); }
.btn.neutral:hover{ background:var(--surface-hover); }
.btn.outline{ background:transparent; border-color:var(--border); color:var(--text); }
.btn.outline:hover{ background:var(--surface-hover); }

/* icon-only */
.btn.icon{ padding:8px; width:38px; height:38px; }

/* ===== Inputs & selects ===== */
input[type="text"], input[type="search"], select{
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--card); color:var(--text); font-size:1rem;
  transition:border-color .2s, box-shadow .2s;
}
input:focus, select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(59,130,246,.25);
}

/* ===== Cards & text helpers ===== */
.card{
  background:var(--card); color:var(--card-text);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  padding:12px;
}
.muted{ color:var(--muted); }

/* ===== Logo w/ sparkle ===== */
.logo-link{ display:inline-flex; text-decoration:none; color:inherit; }
.logo-mark{ display:grid; line-height:1; }
.logo-top{ display:flex; align-items:center; gap:6px; }
.cap-icon{ font-size:1.1rem; color:var(--accent); }
.logo-pro{ font-size:16px; font-weight:900; letter-spacing:.3px; }
.logo-text{ font-size:16px; }
.sparkles{ font-size:.9rem; opacity:.6; animation:spark 2.8s infinite ease-in-out; }
.sparkles.s2{ animation-delay:1.2s; }
.logo-bottom .logo-text{ font-weight:800; letter-spacing:.4px; }
@keyframes spark{
  0%,100%{ transform:translateY(0) scale(1); opacity:.55; }
  40%{ transform:translateY(-2px) scale(1.1); opacity:.9; }
}

/* ===== Badges & User pill ===== */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:2px 8px;
  border-radius:999px; border:1px solid var(--border);
  font-size:.75rem; font-weight:600; line-height:1; vertical-align:middle;
}
.badge.pro{ border-color:#f59e0b; color:#b45309; background:rgba(245,158,11,.10); }
.badge.ad{ border-color:#22c55e; color:#166534; background:rgba(34,197,94,.10); }
.user-pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:999px; background:var(--surface); border:1px solid var(--border);
  font-weight:600;
}

/* ===== Ads (shared wrapper) ===== */
.ad{
  width:100%; border:1px solid var(--border); padding:15px; margin:20px 0;
  border-radius:8px; text-align:center;
}
.ad img,.ad video{ max-width:100%; border-radius:6px; display:block; margin:auto; }

/* ===== Modern Footer ===== */
.site-footer{
  background:var(--card);
  border-top:1px solid var(--border);
  margin-top:40px;
  color:var(--muted);
  font-size:.9rem;
  align-items: center;
}
.footer-container{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:20px;
  max-width:1100px;
  margin:auto;
  padding:24px 16px;
  align-items: center;
}
.footer-left{ display:center; flex-direction:column; gap:8px; }
.footer-left .logo-pro{ font-size:1.2rem; font-weight:900; }
.footer-tagline{ font-size:.85rem; color:var(--muted); }

.footer-links{
  display:center; flex-wrap:wrap; gap:10px 16px; align-items:flex-start;
}
.footer-links a{
  text-decoration:none; color:var(--muted); transition:color .2s; font-weight:600;
}
.footer-links a:hover{ color:var(--accent); }

.footer-social{ text-align:right; }
.footer-social p{ margin:0 0 6px; font-weight:700; color:var(--text); }
.social-row{ display:flex; gap:12px; justify-content:flex-end; }
.social-row a{
  font-size:1.2rem; color:var(--muted); transition:color .2s, transform .2s;
}
.social-row a:hover{ color:var(--accent); transform:translateY(-2px); }

.footer-bottom{
  border-top:1px solid var(--border);
  text-align:center; padding:12px; font-size:.8rem; color:var(--muted);
}

/* ===== Responsive ===== */
@media(max-width:768px){
  header{ flex-direction:row; justify-content:space-between; flex-wrap:wrap; padding:10px; gap:8px; }
  .footer-container{
    grid-template-columns:1fr;
    text-align:center;
  }
  .footer-social{ text-align:center; }
  .social-row{ justify-content:center; }
}

/* mobile spacing */
@media (max-width:640px){
  .btn{ padding:9px 14px; border-radius:12px; }
}

/* ===== ProQuizzers global print fixes ===== */
@media print {
  /* Hide site chrome from base.html */
  header, .header-top, .icon-row, .site-footer, footer,
  .theme-toggle, .notif-link, .flashes { display: none !important; }

  /* Un-stick everything (avoid overlays) */
  * { position: static !important; }

  /* Flatten layout containers */
  html, body, main, .page-container {
    display: block !important;
    background: #fff !important;
    color: #000 !important;
    overflow: visible !important;
  }

  /* Page margins */
  @page { margin: 16mm; } /* tweak if you want tighter margins */

  /* Calculator-specific: keep content tidy */
  .steps-toolbar,
  .addRow,
  #resetBtn,
  #copyAllLatex,
  #copyAllText,
  #printPdf { display: none !important; }

  .card, .steps, .calc-table, .step-table {
    box-shadow: none !important;
    background: #fff !important;
    border: 1px solid #999 !important;
  }

  .calc-table th, .calc-table td,
  .step-table th, .step-table td {
    color: #000 !important;
    border-color: #aaa !important;
  }

  /* Keep headings with their content */
  .steps h3 { break-after: avoid-page; page-break-after: avoid; }

  /* Keep each step together; don't split formulas */
  .step-list, .step-item, .formula { break-inside: avoid; page-break-inside: avoid; }

  /* Final answer should not jump to a new page alone */
  .final-answer { break-before: avoid-page; page-break-before: avoid; margin-top: 12px; font-weight: 700; font-size: 1.15rem; }

  /* Make math/text fully black for readability */
  .formula, .mjx-container { color: #000 !important; }
}