/* ============================================================
   BYPRABA — Civil Engineering Encyclopedia
   main.css — Global Design System | Navy Blue Theme
   Author: bypraba.com
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design Tokens — Navy Blue Theme ── */
:root {
  /* ── Background & Surface ── */
  --col-bg:         #0A0F1E;   /* deepest navy — site background */
  --col-surface:    #0F1729;   /* card / panel surface */
  --col-surface-2:  #162040;   /* elevated surface / hover panel */
  --col-surface-3:  #1C2B52;   /* deep accent surface */
  --col-border:     #1E2D55;   /* subtle border */
  --col-border-2:   #2A3F70;   /* stronger border */

  /* ── Navy Brand Palette ── */
  --col-navy:       #0D1B3E;   /* core navy */
  --col-navy-mid:   #1A2F5E;   /* mid navy */
  --col-navy-lt:    #2E4A8A;   /* lighter navy — interactive */

  /* ── Gold Accent (replaces amber) ── */
  --col-gold:       #C9A84C;   /* engineering gold */
  --col-gold-lt:    #E8C56A;   /* light gold hover */
  --col-gold-dk:    #9B7A2F;   /* dark gold */

  /* ── Steel Blue ── */
  --col-steel:      #4A90D9;   /* bright steel blue — links, highlights */
  --col-steel-lt:   #6BAEE8;   /* lighter steel */
  --col-steel-dk:   #2E6CB5;   /* darker steel */

  /* ── Text ── */
  --col-white:      #E8EDF8;   /* off-white — primary text */
  --col-concrete:   #8A9BC0;   /* slate blue-grey — secondary text */
  --col-muted:      #4A5980;   /* muted text */

  /* ── Status ── */
  --col-green:      #2ECC71;   /* pass / valid */
  --col-red:        #E74C3C;   /* fail / warning */
  --col-purple:     #7C6FCC;   /* formula accent */
  --col-teal:       #1ABC9C;   /* info accent */

  /* ── Typography ── */
  --font-display:   'Rajdhani', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* ── Type Scale ── */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout ── */
  --max-width:    1280px;
  --max-width-md: 960px;
  --max-width-sm: 720px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.5);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.7);
  --shadow-navy: 0 0 24px rgba(74,144,217,0.12);
  --shadow-gold: 0 0 24px rgba(201,168,76,0.18);

  /* ── Transitions ── */
  --transition:      0.2s ease;
  --transition-slow: 0.4s ease;

  /* ── Nav ── */
  --nav-height: 64px;

  /* ── Aliases (backward-compat) ── */
  --col-amber:    #C9A84C;   /* alias for --col-gold */
  --shadow-steel: 0 0 24px rgba(74,144,217,0.20); /* alias for steel glow */
}

/* ═══════════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--col-bg);
  color: var(--col-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--col-white);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p { color: var(--col-concrete); line-height: 1.7; }

.text-gold    { color: var(--col-gold); }
.text-steel   { color: var(--col-steel-lt); }
.text-muted   { color: var(--col-muted); }
.text-white   { color: var(--col-white); }
.text-green   { color: var(--col-green); }
.text-red     { color: var(--col-red); }
.text-purple  { color: var(--col-purple); }
.text-teal    { color: var(--col-teal); }
.text-mono    { font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════
   LAYOUT HELPERS
═══════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container-md {
  width: 100%;
  max-width: var(--max-width-md);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section    { padding-block: var(--space-20); }
.section-sm { padding-block: var(--space-12); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-2   { gap: var(--space-2); }
.flex-gap-4   { gap: var(--space-4); }
.flex-gap-6   { gap: var(--space-6); }

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: rgba(10, 15, 30, 0.96);
  border-bottom: 1px solid var(--col-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.navbar.scrolled {
  border-bottom-color: var(--col-navy-lt);
  box-shadow: 0 2px 24px rgba(0,0,0,0.7);
}

.navbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
  gap: var(--space-4);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-mark {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--col-navy-lt) 0%, var(--col-steel-dk) 100%);
  border: 1px solid var(--col-steel);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: white;
  letter-spacing: 0;
  position: relative;
  overflow: hidden;
}

.nav-logo-mark::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--col-gold);
}

.nav-logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
}

.nav-logo-text span.by    { color: var(--col-gold); }
.nav-logo-text span.praba { color: var(--col-steel-lt); }

.nav-logo-sub {
  font-size: var(--text-xs);
  color: var(--col-muted);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  line-height: 1;
  margin-top: 2px;
}

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  justify-content: center;
}

.nav-link {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--col-concrete);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
  transition: color var(--transition), background var(--transition);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-link:hover  { color: var(--col-white);  background: var(--col-surface-2); }
.nav-link.active { color: var(--col-gold);   background: rgba(201,168,76,0.08); }

/* Nav Search */
.nav-search {
  display: flex;
  align-items: center;
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
  transition: border-color var(--transition), box-shadow var(--transition);
  min-width: 180px;
  flex-shrink: 0;
}

.nav-search:focus-within {
  border-color: var(--col-steel);
  box-shadow: 0 0 0 3px rgba(74,144,217,0.12);
}

.nav-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--col-white);
  font-size: var(--text-sm);
  width: 100%;
}

.nav-search input::placeholder { color: var(--col-muted); }
.nav-search svg { color: var(--col-muted); flex-shrink: 0; }

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--col-concrete);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Mobile Menu */
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  background: var(--col-surface);
  border-bottom: 1px solid var(--col-border);
  padding: var(--space-4) var(--space-6);
  z-index: 999;
}

.nav-mobile.open { display: block; }

.nav-mobile .nav-link {
  display: block;
  padding: var(--space-3);
  font-size: var(--text-base);
  border-bottom: 1px solid var(--col-border);
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════════ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--col-muted);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.breadcrumb a            { color: var(--col-steel-lt); }
.breadcrumb a:hover      { color: var(--col-gold); }
.breadcrumb-sep          { color: var(--col-border-2); }

/* ═══════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════ */
.card {
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  border-color: var(--col-navy-lt);
  box-shadow: var(--shadow-navy);
  transform: translateY(-2px);
}

.card-sm    { padding: var(--space-4); border-radius: var(--radius-md); }

.card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
}

.card-icon.steel  { background: rgba(74,144,217,0.12);  color: var(--col-steel-lt); }
.card-icon.gold   { background: rgba(201,168,76,0.12);  color: var(--col-gold); }
.card-icon.purple { background: rgba(124,111,204,0.12); color: var(--col-purple); }
.card-icon.green  { background: rgba(46,204,113,0.12);  color: var(--col-green); }
.card-icon.teal   { background: rgba(26,188,156,0.12);  color: var(--col-teal); }

.card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--col-white);
}

.card-desc {
  font-size: var(--text-sm);
  color: var(--col-concrete);
  line-height: 1.6;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--col-steel-lt);
  transition: color var(--transition), gap var(--transition);
}

.card-link:hover { color: var(--col-gold); gap: var(--space-3); }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: all var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  line-height: 1;
}

/* Navy Primary */
.btn-primary {
  background: var(--col-navy-lt);
  color: white;
  border-color: var(--col-navy-lt);
}
.btn-primary:hover {
  background: var(--col-steel-dk);
  border-color: var(--col-steel-dk);
  box-shadow: 0 4px 20px rgba(74,144,217,0.35);
  transform: translateY(-1px);
}

/* Gold accent */
.btn-gold {
  background: var(--col-gold);
  color: var(--col-navy);
  border-color: var(--col-gold);
  font-weight: 700;
}
.btn-gold:hover {
  background: var(--col-gold-lt);
  border-color: var(--col-gold-lt);
  box-shadow: 0 4px 20px rgba(201,168,76,0.4);
  transform: translateY(-1px);
}

/* Steel blue */
.btn-steel {
  background: var(--col-steel);
  color: white;
  border-color: var(--col-steel);
}
.btn-steel:hover {
  background: var(--col-steel-lt);
  border-color: var(--col-steel-lt);
  box-shadow: 0 4px 20px rgba(74,144,217,0.4);
  transform: translateY(-1px);
}

/* Outline */
.btn-outline {
  background: transparent;
  color: var(--col-steel-lt);
  border-color: var(--col-navy-lt);
}
.btn-outline:hover {
  background: var(--col-navy-lt);
  color: white;
  border-color: var(--col-navy-lt);
}

/* Ghost */
.btn-ghost {
  background: var(--col-surface);
  color: var(--col-white);
  border-color: var(--col-border);
}
.btn-ghost:hover {
  border-color: var(--col-steel);
  color: var(--col-steel-lt);
}

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }

/* ═══════════════════════════════════════════════════════════
   SECTION HEADERS
═══════════════════════════════════════════════════════════ */
.section-header { margin-bottom: var(--space-12); }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--col-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.section-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--col-gold);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--col-white);
  margin-bottom: var(--space-4);
}

.section-title span { color: var(--col-steel-lt); }
.section-title em   { color: var(--col-gold); font-style: normal; }

.section-desc {
  font-size: var(--text-lg);
  color: var(--col-concrete);
  max-width: 600px;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   BADGES / TAGS
═══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.badge-navy   { background: rgba(46,74,138,0.3);   color: var(--col-steel-lt);  border: 1px solid rgba(74,144,217,0.25); }
.badge-steel  { background: rgba(74,144,217,0.12); color: var(--col-steel-lt);  border: 1px solid rgba(74,144,217,0.3);  }
.badge-gold   { background: rgba(201,168,76,0.12); color: var(--col-gold);      border: 1px solid rgba(201,168,76,0.3);  }
.badge-green  { background: rgba(46,204,113,0.12); color: var(--col-green);     border: 1px solid rgba(46,204,113,0.3);  }
.badge-purple { background: rgba(124,111,204,0.12);color: var(--col-purple);    border: 1px solid rgba(124,111,204,0.3); }
.badge-red    { background: rgba(231,76,60,0.12);  color: var(--col-red);       border: 1px solid rgba(231,76,60,0.3);   }
.badge-teal   { background: rgba(26,188,156,0.12); color: var(--col-teal);      border: 1px solid rgba(26,188,156,0.3);  }

/* ═══════════════════════════════════════════════════════════
   DIVIDERS
═══════════════════════════════════════════════════════════ */
.divider      { height: 1px; background: var(--col-border); margin-block: var(--space-8); }

.divider-gold {
  height: 2px;
  background: linear-gradient(90deg, var(--col-gold), transparent);
  margin-block: var(--space-4);
}

.divider-navy {
  height: 2px;
  background: linear-gradient(90deg, var(--col-navy-lt), transparent);
  margin-block: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   FORMULA BOX
═══════════════════════════════════════════════════════════ */
.formula-box {
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-left: 4px solid var(--col-purple);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-block: var(--space-4);
}

.formula-label {
  font-size: var(--text-xs);
  color: var(--col-purple);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.formula-eq {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--col-white);
  font-weight: 500;
}

.formula-desc {
  font-size: var(--text-sm);
  color: var(--col-concrete);
  margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════
   IS CODE REFERENCE BOX
═══════════════════════════════════════════════════════════ */
.code-ref {
  background: var(--col-bg);
  border: 1px solid var(--col-border);
  border-left: 4px solid var(--col-navy-lt);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--col-steel-lt);
}

/* ═══════════════════════════════════════════════════════════
   CALCULATOR STYLES
═══════════════════════════════════════════════════════════ */
.calc-container {
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.calc-header {
  background: linear-gradient(135deg, var(--col-navy) 0%, var(--col-surface-3) 100%);
  border-bottom: 1px solid var(--col-border);
  padding: var(--space-6) var(--space-8);
  position: relative;
  overflow: hidden;
}

.calc-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--col-gold), var(--col-steel), transparent);
}

.calc-header h2 { font-size: var(--text-2xl); margin-bottom: var(--space-1); }
.calc-header p  { font-size: var(--text-sm); color: var(--col-concrete); }

.calc-body  { padding: var(--space-8); }

.calc-group { margin-bottom: var(--space-6); }

.calc-group-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--col-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--col-border);
}

.input-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.input-group label {
  font-size: var(--text-sm);
  color: var(--col-concrete);
  font-weight: 500;
}

.input-group label span {
  color: var(--col-muted);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

.input-control {
  background: var(--col-bg);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--col-white);
  font-size: var(--text-base);
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

.input-control:focus {
  outline: none;
  border-color: var(--col-steel);
  box-shadow: 0 0 0 3px rgba(74,144,217,0.12);
}

.input-control::placeholder { color: var(--col-muted); }

select.input-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5980' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.input-with-unit { position: relative; }
.input-with-unit .input-control { padding-right: 64px; }

.input-unit {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  padding-inline: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--col-gold);
  border-left: 1px solid var(--col-border);
  pointer-events: none;
  white-space: nowrap;
}

/* Results */
.calc-results {
  background: linear-gradient(135deg, var(--col-navy) 0%, var(--col-bg) 100%);
  border: 1px solid var(--col-border);
  border-top: 2px solid var(--col-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

.calc-results-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--col-gold);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--col-border);
}

.result-row:last-child { border-bottom: none; }

.result-label { font-size: var(--text-sm); color: var(--col-concrete); }

.result-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--col-steel-lt);
}

.result-value.highlight {
  font-size: var(--text-xl);
  color: var(--col-gold);
  font-weight: 700;
}

.result-pass { color: var(--col-green); font-weight: 700; }
.result-fail { color: var(--col-red);   font-weight: 700; }

/* Calc action bar */
.calc-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   TABLE STYLES
═══════════════════════════════════════════════════════════ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th {
  background: var(--col-surface-3);
  color: var(--col-gold);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 2px solid var(--col-border);
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--col-concrete);
  border-bottom: 1px solid var(--col-border);
  vertical-align: top;
}

.data-table td:first-child { color: var(--col-white); font-weight: 500; }
.data-table tr:hover td    { background: var(--col-surface-2); }

.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--col-border);
}

/* ═══════════════════════════════════════════════════════════
   SEARCH BAR
═══════════════════════════════════════════════════════════ */
.search-bar {
  display: flex;
  align-items: center;
  background: var(--col-surface);
  border: 2px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.search-bar:focus-within {
  border-color: var(--col-steel);
  box-shadow: 0 0 0 4px rgba(74,144,217,0.10);
}

.search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: var(--text-lg);
  color: var(--col-white);
}

.search-bar input::placeholder { color: var(--col-muted); }
.search-bar svg { color: var(--col-concrete); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
  background: var(--col-surface);
  border-top: 1px solid var(--col-border);
  padding-block: var(--space-16) var(--space-8);
  margin-top: var(--space-20);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.footer-brand p { margin-top: var(--space-4); font-size: var(--text-sm); line-height: 1.7; }

.footer-col h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--col-gold);
  margin-bottom: var(--space-4);
}

.footer-col ul li         { margin-bottom: var(--space-2); }
.footer-col ul li a       { font-size: var(--text-sm); color: var(--col-concrete); transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--col-steel-lt); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6);
  border-top: 1px solid var(--col-border);
  font-size: var(--text-sm);
  color: var(--col-muted);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom a       { color: var(--col-steel-lt); }
.footer-bottom a:hover { color: var(--col-gold); }

/* Footer accent line */
.footer::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--col-navy-lt), var(--col-gold), var(--col-steel), transparent);
  margin-bottom: var(--space-16);
}

/* ═══════════════════════════════════════════════════════════
   BLUEPRINT GRID (signature background element)
═══════════════════════════════════════════════════════════ */
.blueprint-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(74,144,217,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,144,217,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.blueprint-grid-dense {
  background-image:
    linear-gradient(rgba(74,144,217,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,144,217,0.035) 1px, transparent 1px),
    linear-gradient(rgba(74,144,217,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,144,217,0.07) 1px, transparent 1px);
  background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}

/* ═══════════════════════════════════════════════════════════
   ALERTS / NOTES
═══════════════════════════════════════════════════════════ */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  border: 1px solid;
}

.alert-info    { background: rgba(74,144,217,0.08);  border-color: rgba(74,144,217,0.25);  color: var(--col-steel-lt); }
.alert-warning { background: rgba(201,168,76,0.08);  border-color: rgba(201,168,76,0.25);  color: var(--col-gold); }
.alert-success { background: rgba(46,204,113,0.08);  border-color: rgba(46,204,113,0.25);  color: var(--col-green); }
.alert-error   { background: rgba(231,76,60,0.08);   border-color: rgba(231,76,60,0.25);   color: var(--col-red); }

/* ═══════════════════════════════════════════════════════════
   STAT BOXES
═══════════════════════════════════════════════════════════ */
.stat-box {
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition);
}

.stat-box:hover { border-color: var(--col-navy-lt); }

.stat-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--col-gold), var(--col-steel));
  opacity: 0;
  transition: opacity var(--transition);
}

.stat-box:hover::before { opacity: 1; }

.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--col-gold);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--col-concrete);
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════
   STEP / PROCESS
═══════════════════════════════════════════════════════════ */
.steps { display: flex; flex-direction: column; gap: var(--space-4); }

.step { display: flex; gap: var(--space-4); align-items: flex-start; }

.step-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--col-navy);
  border: 2px solid var(--col-navy-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--col-steel-lt);
  margin-top: 2px;
}

.step-content h5 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.step-content p  { font-size: var(--text-sm); }

/* ═══════════════════════════════════════════════════════════
   PAGE HERO
═══════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: var(--space-16);
  overflow: hidden;
}

.page-hero-content { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar              { width: 8px; height: 8px; }
::-webkit-scrollbar-track        { background: var(--col-bg); }
::-webkit-scrollbar-thumb        { background: var(--col-border-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--col-navy-lt); }

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════════════ */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.uppercase    { text-transform: uppercase; }
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }
.hidden       { display: none; }
.sr-only      { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .grid-4      { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

@media (max-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }

  .nav-links, .nav-search { display: none; }
  .nav-hamburger          { display: flex; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4          { grid-template-columns: 1fr; }

  .section    { padding-block: var(--space-12); }

  .container,
  .container-md { padding-inline: var(--space-4); }

  .footer-grid   { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-bottom { flex-direction: column; text-align: center; }

  .calc-actions         { flex-direction: column; }
  .calc-actions .btn    { width: 100%; }
}

@media (max-width: 480px) {
  h1              { font-size: var(--text-3xl); }
  .section-title  { font-size: var(--text-3xl); }
  .stat-number    { font-size: var(--text-3xl); }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════════ */
@media print {
  .navbar, .footer, .nav-mobile { display: none; }
  body  { background: white; color: #111; }
  .card { border: 1px solid #ccc; box-shadow: none; }
  a     { color: #1A2F5E; }
}
/* ══════════════════════════════════════════════════════════
   LIGHT MODE TOKENS
══════════════════════════════════════════════════════════ */
[data-theme="light"], body.light-mode {
  color-scheme: light;
  --col-bg:        #F4F7FB;
  --col-surface:   #FFFFFF;
  --col-surface-2: #EDF2F8;
  --col-surface-3: #E2EAF4;
  --col-border:    #CBD5E8;
  --col-border-2:  #9AAAC8;
  --col-navy:      #1E3A6E;
  --col-navy-mid:  #2450A0;
  --col-navy-lt:   #3B6FD4;
  --col-gold:      #B8860B;
  --col-gold-lt:   #D4A017;
  --col-gold-dk:   #8B6508;
  --col-amber:     #B8860B;
  --col-steel:     #2563EB;
  --col-steel-lt:  #3B82F6;
  --col-steel-dk:  #1D4ED8;
  --col-white:     #1E2D4E;
  --col-concrete:  #3D5280;
  --col-muted:     #6B7FA8;
  --col-green:     #16A34A;
  --col-red:       #DC2626;
  --col-purple:    #6D28D9;
  --col-teal:      #0D9488;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --shadow-md:     0 4px 12px rgba(0,0,0,.1);
  --shadow-lg:     0 8px 30px rgba(0,0,0,.12);
  --shadow-navy:   0 0 20px rgba(37,99,235,.12);
  --shadow-gold:   0 0 20px rgba(184,134,11,.15);
  --shadow-steel:  0 0 20px rgba(37,99,235,.15);
  --hero-gradient: linear-gradient(135deg,#E8F0FC 0%,#F4F7FB 40%,#EDF2F8 100%);
  --card-gradient: linear-gradient(135deg,#FFFFFF,#EDF2F8);
}

/* Light mode body override */
body.light-mode {
  background: var(--col-bg);
  color: var(--col-white);
}
body.light-mode h1, body.light-mode h2, body.light-mode h3,
body.light-mode h4, body.light-mode h5, body.light-mode h6 {
  color: var(--col-white);
}
body.light-mode p { color: var(--col-concrete); }
body.light-mode .navbar { background: #FFFFFF; border-bottom-color: #CBD5E8; }
body.light-mode .nav-link { color: #3D5280; }
body.light-mode .nav-link:hover { color: #1E2D4E; background: #EDF2F8; }
body.light-mode .nav-search { background: #EDF2F8; border-color: #CBD5E8; }
body.light-mode .nav-search input { color: #1E2D4E; }
body.light-mode .hub-card, body.light-mode .card, body.light-mode .calc-panel,
body.light-mode .thumb-card, body.light-mode .ency-sidebar, body.light-mode .footer,
body.light-mode .stat-card { background: var(--card-gradient); border-color: var(--col-border); }
body.light-mode .hub-card-title, body.light-mode .card-title { color: #1E2D4E; }
body.light-mode .hub-card-desc, body.light-mode .card-desc { color: #3D5280; }
body.light-mode .form-control { background: #EDF2F8; border-color: #CBD5E8; color: #1E2D4E; }
body.light-mode td, body.light-mode th { color: #3D5280; }
body.light-mode tbody tr:hover { background: #EDF2F8; }
body.light-mode #theme-toggle { background: #EDF2F8; border-color: #CBD5E8; }
body.light-mode ::-webkit-scrollbar-track { background: #F4F7FB; }
body.light-mode ::-webkit-scrollbar-thumb { background: #CBD5E8; }

/* ═══════════════════════════════════════════════════════════
   ANDROID APP BANNER
═══════════════════════════════════════════════════════════ */
.android-banner {
  background: linear-gradient(135deg, #0F1729 0%, #162040 50%, #1C2B52 100%);
  border-bottom: 2px solid var(--col-gold);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 1100;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.android-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.android-banner-text h4 {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  color: #E8EDF8;
  margin-bottom: 2px;
}
.android-banner-badge {
  background: var(--col-gold);
  color: #0A0F1E;
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 100px;
  letter-spacing: .08em;
  vertical-align: middle;
  margin-left: 6px;
}
.android-banner-text p { font-size: .75rem; color: #8A9BC0; }
.android-banner-actions { display: flex; align-items: center; gap: var(--space-3); }
.banner-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--col-gold);
  color: #0A0F1E;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  text-decoration: none;
  pointer-events: none;
  opacity: .75;
  letter-spacing: .03em;
}
.banner-dismiss {
  background: none;
  border: none;
  color: var(--col-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  transition: color var(--transition);
  line-height: 1;
}
.banner-dismiss:hover { color: var(--col-concrete); }

/* ═══════════════════════════════════════════════════════════
   STATS ROW (HOMEPAGE + THUMB RULES HERO)
═══════════════════════════════════════════════════════════ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.stat-card {
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--col-gold);
  line-height: 1;
}
.stat-label {
  font-size: var(--text-sm);
  color: var(--col-muted);
  margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP
═══════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 100;
  width: 44px;
  height: 44px;
  background: var(--col-steel);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(16px);
  transition: all var(--transition);
  pointer-events: none;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.back-to-top:hover { background: var(--col-steel-lt); transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════
   THUMB RULES PAGE
═══════════════════════════════════════════════════════════ */
.thumb-section { margin-bottom: var(--space-12); }
.thumb-section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--col-white);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--col-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}
.thumb-card {
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  transition: all var(--transition);
  border-left: 3px solid var(--col-steel);
}
.thumb-card:hover {
  border-color: var(--col-border-2);
  border-left-color: var(--col-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.thumb-rule-text {
  font-size: var(--text-sm);
  color: var(--col-concrete);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}
.thumb-formula {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--col-gold);
  margin-top: var(--space-3);
  overflow-x: auto;
}
.thumb-source {
  font-size: var(--text-xs);
  color: var(--col-muted);
  margin-top: var(--space-2);
}
.thumb-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: 100px;
  padding: var(--space-3) var(--space-5);
  max-width: 480px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.thumb-search-bar:focus-within {
  border-color: var(--col-steel);
  box-shadow: var(--shadow-navy);
}
.thumb-search-bar svg { color: var(--col-muted); flex-shrink: 0; }
.thumb-search-bar input {
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-size: var(--text-sm);
  color: var(--col-white);
  font-family: var(--font-body);
}
.thumb-search-bar input::placeholder { color: var(--col-muted); }
.thumb-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.thumb-filter {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-radius: 100px;
  border: 1px solid var(--col-border);
  color: var(--col-muted);
  background: var(--col-surface-2);
  cursor: pointer;
  transition: all var(--transition);
}
.thumb-filter:hover,
.thumb-filter.active {
  border-color: var(--col-steel);
  color: var(--col-steel);
  background: rgba(74,144,217,.08);
}
.thumb-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--col-muted);
  margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   CALLOUT BOXES
═══════════════════════════════════════════════════════════ */
.callout {
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-left: 4px solid var(--col-steel);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  color: var(--col-concrete);
  margin-bottom: var(--space-4);
}
.callout.gold  { border-left-color: var(--col-gold); }
.callout.green { border-left-color: var(--col-green); }
.callout.red   { border-left-color: var(--col-red); }

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES FOR NEW COMPONENTS
═══════════════════════════════════════════════════════════ */
body.light-mode .android-banner {
  background: linear-gradient(135deg, #1E3A6E 0%, #2450A0 50%, #1E3A6E 100%);
}
body.light-mode .android-banner-text p { color: #CBD5E8; }
body.light-mode .thumb-card { background: #fff; border-color: #CBD5E8; }
body.light-mode .thumb-rule-text { color: #3D5280; }
body.light-mode .thumb-formula { background: #EDF2F8; border-color: #CBD5E8; color: #B8860B; }
body.light-mode .thumb-filter { background: #EDF2F8; border-color: #CBD5E8; color: #6B7FA8; }
body.light-mode .thumb-filter.active { background: rgba(37,99,235,.08); color: #2563EB; border-color: #2563EB; }
body.light-mode .stat-card { background: #fff; border-color: #CBD5E8; }
body.light-mode .stat-number { color: #B8860B; }
body.light-mode .callout { background: #EDF2F8; border-color: #CBD5E8; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE ADDITIONS
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .thumb-grid { grid-template-columns: 1fr; }
  .android-banner-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .thumb-search-bar { max-width: 100%; }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat-number { font-size: var(--text-3xl); }
}
/* ============================================================
   bypraba — Calculator Styles
   calculator.css — Shared & Hub Calculator Design System (v2.0)
   Fixes: Light Mode support, Click-through fixes, Mobile grid
   ============================================================ */

/* ── Calculator Hub Page Hero ── */
.calc-page-hero {
  background: linear-gradient(180deg, var(--col-bg) 0%, var(--col-surface) 100%);
  position: relative;
  padding-top: calc(var(--nav-height) + var(--space-12));
  padding-bottom: var(--space-12);
  overflow: hidden;
}

.calc-page-hero .hero-content {
  max-width: var(--max-width-md);
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* ── Category Filter Tabs ── */
.category-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-block: var(--space-6);
  flex-wrap: wrap;
}

.cat-tab {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--col-border);
  border-radius: 100px;
  background: var(--col-surface);
  color: var(--col-text-mid, var(--col-concrete)); /* Fallback added */
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cat-tab:hover {
  border-color: var(--col-primary, var(--col-steel));
  color: var(--col-text-main, var(--col-white));
}

.cat-tab.active {
  background: var(--col-primary, var(--col-steel));
  border-color: var(--col-primary, var(--col-steel));
  color: white;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.3);
}

/* ── Calculator Category Sections ── */
.calc-category {
  margin-bottom: var(--space-16);
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

.category-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap; /* Prevent overflow on mobile */
}

.category-icon {
  width: 44px;
  height: 44px;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.category-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--col-text-main, var(--col-white));
  margin: 0;
}

.category-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--col-muted, var(--col-text-muted));
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-radius: 100px;
  padding: 2px var(--space-3);
  margin-left: auto; /* Pushes count to right */
}

/* ── Calculator Card Grid ── */
.calc-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Reduced min from 300 */
  gap: var(--space-5);
}

/* ── Individual Calculator Card ── */
.calc-item-card {
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all var(--transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Fix: Ensure pointer events work correctly on children */
  z-index: 1; 
}

.calc-item-card:hover {
  border-color: var(--col-primary, var(--col-steel));
  transform: translateY(-4px);
  box-shadow: var(--shadow-md, var(--shadow-steel));
}

/* Top accent bar */
.calc-item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--col-primary, var(--col-steel));
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 2;
}

.calc-item-card:hover::before {
  opacity: 1;
}

/* Glow on hover - Moved to container to avoid click block */
.calc-item-card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: var(--col-primary, var(--col-steel));
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none; /* CRITICAL: Allows clicks through the glow */
  z-index: 0;
}

.calc-item-card:hover::after {
  opacity: 0.12;
}

/* Card inner layout */
.calc-item-body {
  /* Added body wrapper for better spacing control */
  position: relative;
  z-index: 2;
}

.calc-item-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.calc-icon-large {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.calc-item-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--col-text-main, var(--col-white));
  margin: 0;
  line-height: 1.3;
}

.calc-item-is {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--col-accent, var(--col-amber));
  margin-bottom: var(--space-3);
  display: inline-block;
  background: rgba(240,165,0,0.1);
  border: 1px solid rgba(240,165,0,0.2);
  padding: 2px 10px;
  border-radius: 4px;
}

.calc-item-desc {
  font-size: var(--text-sm);
  color: var(--col-text-mid, var(--col-concrete));
  line-height: 1.65;
  flex-grow: 1;
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer meta */
.calc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--col-muted, var(--col-text-muted));
  border-top: 1px solid var(--col-border);
  padding-top: var(--space-3);
  position: relative;
  z-index: 2;
}

.calc-link-text {
  color: var(--col-primary-lt, var(--col-steel-lt));
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: color 0.2s;
}

.calc-link-text svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition);
  fill: currentColor;
}

.calc-item-card:hover .calc-link-text svg {
  transform: translateX(4px);
}

/* ── Status indicators on cards ── */
.calc-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: var(--space-1);
}

.calc-status-dot.live   { background: var(--col-success); box-shadow: 0 0 6px rgba(39,174,96,0.5); }
.calc-status-dot.coming { background: var(--col-warning); box-shadow: 0 0 6px rgba(202, 138, 4, 0.4); }

/* ── Quick Stats Row ── */
.calc-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.calc-stat-pill {
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  transition: border-color var(--transition);
}

.calc-stat-pill:hover {
  border-color: var(--col-primary, var(--col-steel));
}

.calc-stat-pill-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--col-accent, var(--col-amber));
  line-height: 1;
  margin-bottom: var(--space-1);
}

.calc-stat-pill-label {
  font-size: var(--text-xs);
  color: var(--col-text-mid, var(--col-concrete));
  letter-spacing: 0.04em;
}

/* ── Search within this page ── */
.calc-page-search {
  max-width: 560px;
  margin: 0 auto var(--space-10);
}

.calc-page-search .search-bar {
  font-size: var(--text-base);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .calc-quick-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .calc-list-grid {
    grid-template-columns: 1fr;
  }

  .category-title {
    font-size: var(--text-xl);
  }

  .calc-quick-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .calc-stat-pill-num {
    font-size: var(--text-2xl);
  }

  .calc-item-card {
    padding: var(--space-5);
  }
  
  .category-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .category-count {
    margin-left: 0;
    margin-top: var(--space-1);
  }
}

@media (max-width: 480px) {
  .calc-quick-stats {
    grid-template-columns: 1fr;
  }

  .category-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
  
  .calc-item-title {
    font-size: var(--text-lg);
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .calc-item-card,
  .calc-item-card::before,
  .calc-item-card::after,
  .cat-tab,
  .calc-stat-pill {
    transition-duration: 0.01ms !important;
  }

  .calc-item-card:hover {
    transform: none;
  }
}

/* ── Print ── */
@media print {
  .calc-page-hero { background: none; }
  .calc-item-card {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
    color: black;
  }
  .calc-item-card:hover { transform: none; }
  .calc-quick-stats { display: none; }
  .category-tabs { display: none; }
  .calc-item-desc { -webkit-line-clamp: unset; }
}

/* ── LIGHT THEME OVERRIDES (Critical for Dual Mode) ── */
[data-theme="light"] .calc-page-hero,
body.light-mode .calc-page-hero {
  background: linear-gradient(180deg, var(--col-bg) 0%, var(--col-surface) 100%);
}

[data-theme="light"] .calc-item-card {
  background: var(--col-surface);
  border-color: var(--col-border);
}

[data-theme="light"] .calc-item-card:hover {
  border-color: var(--col-primary);
}

[data-theme="light"] .cat-tab {
  background: var(--col-bg);
  color: var(--col-text-mid);
}

[data-theme="light"] .cat-tab.active {
  background: var(--col-primary);
  color: white;
}

[data-theme="light"] .calc-item-title,
[data-theme="light"] .calc-item-desc {
  color: var(--col-text-mid);
}

[data-theme="light"] .calc-item-card:hover .calc-item-title {
  color: var(--col-text-main);
}

[data-theme="light"] .calc-meta {
  color: var(--col-text-muted);
}

[data-theme="light"] .calc-link-text {
  color: var(--col-primary);
}

[data-theme="light"] .category-icon {
  background: var(--col-surface-2);
}

[data-theme="light"] .category-title {
  color: var(--col-text-main);
}/* ============================================================
   bypraba — Encyclopedia & Content Styles
   encyclopedia.css — Long-form Technical Reading System (v2.0)
   Fixes: Fixed missing vars, Added Light Mode support, Improved Layout
   ============================================================ */

/* ── Base Content Layout ── */
.enc-content-wrapper {
  max-width: var(--max-width-lg); /* Wider for reading */
  margin-inline: auto;
  padding-block: var(--space-8);
}

.enc-article {
  background: transparent;
  /* Fallback for missing var, uses main theme color */
  color: var(--col-text-mid, var(--col-concrete)); 
  font-size: var(--text-lg);
  line-height: 1.75;
  font-family: var(--font-body);
}

/* ── Typography Adjustments ── */
.enc-article h1, 
.enc-article h2, 
.enc-article h3, 
.enc-article h4 {
  font-family: var(--font-display);
  color: var(--col-text-main, var(--col-white));
  margin-top: 2em;
  margin-bottom: 0.8em;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.enc-article h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  border-bottom: 2px solid var(--col-border);
  padding-bottom: var(--space-4);
  margin-top: 0;
  color: var(--col-accent, var(--col-amber));
}

.enc-article h2 {
  font-size: 1.75rem;
  position: relative;
  padding-left: var(--space-4);
}

.enc-article h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: var(--col-primary, var(--col-steel));
  border-radius: 2px;
}

.enc-article h3 {
  font-size: 1.4rem;
  color: var(--col-primary-lt, var(--col-steel-lt));
}

.enc-article p {
  margin-bottom: var(--space-4);
  text-align: justify;
  hyphens: auto;
  /* Fix: Ensure text doesn't overflow container */
  overflow-wrap: break-word;
}

.enc-article ul, 
.enc-article ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.enc-article li {
  margin-bottom: 0.5em;
  position: relative;
}

/* Custom bullets */
.enc-article ul > li::marker {
  color: var(--col-accent, var(--col-amber));
  content: '▸ ';
}

/* ── Technical Elements ── */

/* Code Blocks (IS Code references, formulas) */
.enc-code-block {
  /* Fix: Used safe fallbacks */
  background: var(--col-bg, #161B22); 
  border: 1px solid var(--col-border);
  border-left: 4px solid var(--col-accent, var(--col-amber));
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-5) 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  /* Fix: Used text-main/mid fallback */
  color: var(--col-success, #4ade80); 
  overflow-x: auto;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);
}

/* Inline Code */
.enc-code-inline {
  background: rgba(240,165,0,0.1);
  color: var(--col-accent, var(--col-amber));
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  border: 1px solid rgba(240,165,0,0.2);
}

/* Definition Lists (Glossary Style) */
.enc-definition-list {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.enc-def-item {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--col-border);
  padding-bottom: var(--space-4);
}

.enc-def-term {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--col-text-main, var(--col-white));
  margin-bottom: var(--space-1);
}

.enc-def-term span.code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--col-muted, var(--col-text-muted));
  margin-left: var(--space-2);
  font-weight: normal;
}

.enc-def-desc {
  font-size: var(--text-base);
  color: var(--col-text-mid, var(--col-concrete));
  padding-left: var(--space-4);
  border-left: 3px solid var(--col-primary, var(--col-steel));
  padding-top: var(--space-1);
}

/* ── Tables (Data Heavy) ── */
.enc-table-wrapper {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
}

table.enc-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 600px;
}

table.enc-data-table th,
table.enc-data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--col-border);
}

table.enc-data-table th {
  background: var(--col-surface-2, #1F2937);
  color: var(--col-accent, var(--col-amber));
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 10; /* Ensure sticky header stays above content */
}

table.enc-data-table tr:last-child td {
  border-bottom: none;
}

table.enc-data-table tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

table.enc-data-table tr:hover {
  background: rgba(46,134,193,0.05);
}

/* ── Callout Boxes / Notes ── */
.enc-callout {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  border: 1px solid;
  background: var(--col-surface, #161B22);
}

.enc-callout-info {
  border-color: var(--col-primary, var(--col-steel));
  background: linear-gradient(135deg, rgba(46,134,193,0.1) 0%, rgba(46,134,193,0.05) 100%);
}

.enc-callout-warning {
  border-color: var(--col-accent, var(--col-amber));
  background: linear-gradient(135deg, rgba(240,165,0,0.1) 0%, rgba(240,165,0,0.05) 100%);
}

.enc-callout-danger {
  border-color: var(--col-danger, var(--col-red));
  background: linear-gradient(135deg, rgba(231,76,60,0.1) 0%, rgba(231,76,60,0.05) 100%);
}

.enc-callout-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  align-self: flex-start;
}

.enc-callout-text strong {
  color: var(--col-text-main, var(--col-white));
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
}

/* ── Formula Display ── */
.enc-formula-block {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--col-bg, #0D1117);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-4) 0;
  border-radius: var(--radius-md);
  border: 1px dashed var(--col-border);
  font-family: 'Times New Roman', serif;
  font-size: 1.2rem;
  color: var(--col-text-main, var(--col-white));
  font-style: italic;
}

.enc-formula-desc {
  display: block;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--col-muted, var(--col-text-muted));
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-style: normal;
}

/* ── Image & Figure Styling ── */
.enc-figure {
  margin: var(--space-6) 0;
  text-align: center;
}

.enc-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.enc-caption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--col-muted, var(--col-text-muted));
  font-style: italic;
}

/* ── Sidebars / Asides (Replaced Float with Grid for Safety) ── */
.enc-sidebar-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: var(--space-6) 0;
}

@media (min-width: 768px) {
  .enc-sidebar-container {
    grid-template-columns: 2fr 1fr; /* Main content vs Sidebar */
  }
}

.enc-sidebar {
  /* Removed float: right to prevent layout breaking */
  order: -1; /* On mobile, keep sidebar first? Or remove order to put it last */
  padding: var(--space-4);
  background: var(--col-surface-2, #1F2937);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

/* Ensure sidebar is visually distinct but part of flow */
@media (min-width: 768px) {
  .enc-sidebar {
    order: 2; /* Put sidebar after main content on desktop */
  }
}

/* ── Navigation within Article (Table of Contents) ── */
.enc-toc {
  background: var(--col-surface, #161B22);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-8);
}

.enc-toc-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--col-text-main, var(--col-white));
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.enc-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.enc-toc-link {
  display: block;
  color: var(--col-text-mid, var(--col-concrete));
  text-decoration: none;
  padding: var(--space-1) 0;
  border-left: 2px solid transparent;
  padding-left: var(--space-3);
  transition: all 0.2s ease;
}

.enc-toc-link:hover,
.enc-toc-link.active {
  color: var(--col-primary-lt, var(--col-steel-lt));
  border-left-color: var(--col-primary, var(--col-steel));
  padding-left: var(--space-2);
  background: linear-gradient(90deg, rgba(46,134,193,0.1) 0%, transparent 100%);
}

/* ── Related Links Section ── */
.enc-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--col-border);
}

.enc-related-card {
  display: block;
  padding: var(--space-3);
  background: var(--col-surface-2, #1F2937);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.2s;
}

.enc-related-card:hover {
  border-color: var(--col-accent, var(--col-amber));
  background: rgba(240,165,0,0.05);
}

.enc-related-title {
  font-weight: 600;
  color: var(--col-text-main, var(--col-white));
  font-family: var(--font-display);
  margin-bottom: var(--space-1);
}

.enc-related-desc {
  font-size: var(--text-xs);
  color: var(--col-muted, var(--col-text-muted));
}

/* ── Print Styles ── */
@media print {
  .enc-sidebar-container { display: block; }
  .enc-sidebar { float: none; width: 100%; margin-bottom: var(--space-4); }
  .enc-callout { break-inside: avoid; }
  .enc-code-block { break-inside: avoid; background: #f0f0f0; color: #000; border: 1px solid #ccc; }
  .nav-mobile, .footer, .calc-page-hero, .navbar { display: none !important; }
  body { background: white; color: black; }
  .enc-article { color: black; }
  .enc-article a { color: #0000EE; text-decoration: underline; }
  .enc-formula-block { border: 1px solid #ccc; background: white; color: black; }
}

/* ── Accessibility Focus ── */
.enc-article a {
  color: var(--col-primary-lt, var(--col-steel-lt));
  text-decoration: underline;
  text-underline-offset: 4px;
}

.enc-article a:hover {
  color: var(--col-accent, var(--col-amber));
}

/* ── LIGHT THEME OVERRIDES (Critical for Dual Mode) ── */
[data-theme="light"] .enc-article,
body.light-mode .enc-article {
  color: var(--col-text-mid); /* Dark grey text */
}

[data-theme="light"] .enc-article h1,
[data-theme="light"] .enc-article h2,
[data-theme="light"] .enc-article h3,
[data-theme="light"] .enc-article h4,
[data-theme="light"] .enc-callout-text strong,
[data-theme="light"] .enc-def-term,
[data-theme="light"] .enc-related-title {
  color: var(--col-text-main); /* Darker text */
}

[data-theme="light"] .enc-code-block,
[data-theme="light"] .enc-formula-block {
  background: var(--col-surface-2); /* Light grey bg instead of dark */
  border-left-color: var(--col-accent);
  color: var(--col-text-main); /* Dark text inside code blocks */
  box-shadow: none;
  border: 1px solid var(--col-border);
}

[data-theme="light"] .enc-code-inline {
  background: rgba(217, 119, 6, 0.1);
  color: var(--col-accent);
  border-color: rgba(217, 119, 6, 0.2);
}

[data-theme="light"] .enc-sidebar {
  background: var(--col-surface); /* White bg */
  border-color: var(--col-border);
}

[data-theme="light"] .enc-callout-info {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.03) 100%);
  border-color: var(--col-primary-lt);
}

[data-theme="light"] .enc-callout-warning {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(217, 119, 6, 0.03) 100%);
}

[data-theme="light"] .enc-callout-danger {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.03) 100%);
}

[data-theme="light"] table.enc-data-table th {
  background: var(--col-surface-2);
  color: var(--col-accent);
}

[data-theme="light"] table.enc-data-table tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.03);
}
/* Flash prevention — applied via inline script before CSS loads */
html[data-theme="light"] body,
html.light-mode-early body {
  background-color: #F4F7FB;
  color: #1E2D4E;
}