/* ═══════════════════════════════════════════════════════
   PLATTS MODERNIZATION PLATFORM — UNIFIED DESIGN SYSTEM
   ═══════════════════════════════════════════════════════ */

/* ═══ JAMEEL NOORI NASTALEEQ FONT ═══ */
@font-face {
  font-family: 'Jameel Noori Nastaleeq';
  src: local('Jameel Noori Nastaleeq'), 
       local('JameelNooriNastaleeq');
}

/* ═══ SOMA URDU FONT ═══ */
@font-face {
    font-family: 'SomaUrduFont';
    src: local('Mehr Nastaliq Web'), local('Jameel Noori Nastaleeq'), local('Noto Nastaliq Urdu'), local('Alvi Lahori Nastaleeq'), local('Alvi Nastaleeq'), local('Nafees Nastaleeq'), local('Nafees Nastaleeq v1.01'), local('Pak Nastaleeq'), local('Urdu Emad Nastaleeq'), local('PDMS_Jauhar'), local('Urdu Typesetting'), local('Nafees'), local('IranNastaliq'), local('Amiri');
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ═══ THEME 1: OXFORD SCHOLAR (DEFAULT) ═══ */
:root {
  --header-height: 68px;
  /* Boxed Alignment Constraints */
  --site-max-width: 1380px;
  --site-pad-x: 2rem;

  /* Surfaces */
  --surface: #fcf9f4;
  --surface-dim: #dcdad5;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f6f3ee;
  --surface-container: #f0ede8;
  --surface-container-high: #ebe8e3;
  --on-surface: #1c1c19;
  --on-surface-variant: #48453e;

  /* Primary (Oxford Navy) */
  --primary: #1b2a4a;
  --primary-container: #2d4470;
  --on-primary: #ffffff;
  --on-primary-container: #b8c8e8;

  /* Secondary (Muted Gold) */
  --secondary: #8b6914;
  --secondary-container: #f5e6c0;
  --on-secondary-container: #6b4f0a;

  /* Outline */
  --outline: #7a7770;
  --outline-variant: #cac5bc;

  /* Mappings */
  --bg-base: var(--surface-container);
  --bg-page: var(--surface);
  --bg-surface: #fcf9f4;
  --bg-card: #ffffff;
  --bg-card2: var(--surface-container-low);
  --bg-hover: var(--surface-container-high);
  --bg-input: #ffffff;
  --bg-badge: var(--surface-container-high);
  --bdr: #cbd5e1;
  --bdr-card: #cbd5e1;
  --bdr-inner: #e2e8f0;
  --bdr-focus: var(--primary);
  --bdr-accent: var(--secondary);
  
  --txt: var(--on-surface);
  --txt-2: var(--on-surface-variant);
  --txt-3: #64748b;
  --txt-lbl: #66635d;
  
  --acc: #4a916d;
  --acc-dim: #e6f3ec;
  --acc-txt: #26553e;
  --acc-glow: rgba(74, 145, 109, 0.2);
  --brand: var(--primary);
  
  --red: #ba1a1a;
  --red-dim: #ffdad6;

  /* Typography */
  --f-brand: 'Cinzel Decorative', 'Cinzel', serif;
  --f-nav: 'Cinzel', serif;
  --f-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-heading: 'Noto Serif', Georgia, serif;
  --f-urdu: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', 'Urdu Typesetting', serif;
  --f-deva: 'Noto Serif Devanagari', 'Noto Sans Devanagari', sans-serif;
  --f-mono: 'Fira Code', monospace;
  --f-serif: 'Noto Serif', Georgia, serif;

  /* Radii */
  --r-sm: 0.25rem;
  --r: 0.375rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;
  --r-max: 9999px;

  /* Shadows */
  --sh-card: 0 4px 12px rgba(15, 23, 42, 0.06);
  --sh-hover: 0 12px 32px rgba(15, 23, 42, 0.12);
  --ease: 0.18s ease;

  /* Card Color Tokens (Emerald Green Theme) */
  --card-urdu-bg: #065f46;
  --card-urdu-text: #ffffff;
  --card-urdu-orig-text: #ffffff;
  
  --card-hindi-bg: #e6f4ea;
  --card-hindi-text: #14532d;
  
  --card-ascii-bg: #f4faee;
  --card-platts-bg: #f8eef5;
  --card-alalc-bg: #eef4fa;
  
  --card-tag-red: #991b1b;
}

/* ═══ BASE RESETS & SCROLLBARS ═══ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 15px;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--f-ui);
  background: var(--bg-base);
  color: var(--txt);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ═══ BOXED GLOBAL HEADER ═══ */
.fused-sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--bdr);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  width: 100%;
}

.header-inner {
  max-width: var(--site-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0.85rem var(--site-pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  box-sizing: border-box;
}

.brand-block {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.brand-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.brand-title {
  font-family: var(--f-nav);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.05em;
  line-height: 1;
}

.brand-sub {
  font-family: var(--f-brand);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.brand-tagline {
  font-family: var(--f-serif);
  font-size: 0.8rem;
  color: var(--txt-2);
  font-style: italic;
  margin-top: 0.2rem;
}

.nav-links-container {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  font-family: var(--f-nav);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-links-container a.nav-link {
  color: var(--txt-2);
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-sm);
  transition: all var(--ease);
}

.nav-links-container a.nav-link:hover,
.nav-links-container a.nav-link.active {
  color: var(--primary);
  background: var(--surface-container-high);
}

/* User Menu Dropdown */
.user-menu-wrapper {
  position: relative;
}

.user-menu-btn {
  background: var(--surface-container);
  border: 1px solid var(--bdr);
  color: var(--txt);
  font-family: var(--f-ui);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all var(--ease);
}

.user-menu-btn:hover {
  border-color: var(--bdr-focus);
  background: var(--surface-container-high);
}

.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  box-shadow: var(--sh-hover);
  min-width: 180px;
  overflow: hidden;
  text-align: left;
  z-index: 200;
}

.user-menu-dropdown a {
  display: block;
  padding: 0.65rem 1rem;
  color: var(--txt);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  border-bottom: 1px solid var(--bdr-inner);
  transition: background var(--ease);
}

.user-menu-dropdown a:hover {
  background: var(--bg-hover);
}

.user-menu-dropdown a:last-child {
  border-bottom: none;
}

.mobile-menu-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--txt);
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav-links-container {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--bdr);
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    align-items: flex-start;
  }
  .nav-links-container.open {
    display: flex;
  }
  .mobile-menu-btn {
    display: block;
  }
}

/* ═══ CONTROL BAR & SEARCH TOOLBAR ═══ */
.ctrl-bar {
  max-width: var(--site-max-width);
  width: 100%;
  margin: 1.25rem auto 1.25rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  /*border-radius: var(--r-lg);*/
  box-shadow: var(--sh-card);
  box-sizing: border-box;
  position: sticky;
  top: var(--header-height, 68px);
  z-index: 90;
  backdrop-filter: blur(10px);
}

.ctrl-grp {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ctrl-grp label {
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-lbl);
}

.ctrl-grp select,
.ctrl-grp input {
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
  font-family: var(--f-ui);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--txt);
  outline: none;
  transition: border-color var(--ease);
}

.ctrl-grp select:focus,
.ctrl-grp input:focus {
  border-color: var(--bdr-focus);
}

.ctrl-search {
  flex: 1;
  min-width: 260px;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-wrap input[type="text"] {
  width: 100%;
  padding-right: 5rem;
}

.script-badge {
  position: absolute;
  right: 0.5rem;
  font-size: 0.65rem;
  font-weight: 750;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-container-high);
  color: var(--txt-lbl);
  pointer-events: none;
}

.search-history-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-card);
  z-index: 150;
  max-height: 200px;
  overflow-y: auto;
}

.ctrl-right {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}

/* ═══ BUTTONS ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--f-ui);
  font-size: 0.85rem;
  font-weight: 650;
  padding: 0.45rem 1rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--ease);
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: #ffffff;
}

.btn-primary:hover {
  background: #111c33;
}

.btn-ghost {
  background: var(--bg-card);
  color: var(--txt);
  border-color: var(--bdr);
}

.btn-ghost:hover {
  background: var(--bg-hover);
  border-color: var(--bdr-focus);
}

/* ═══ BOXED LAYOUT CONTAINER ═══ */
.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--site-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem var(--site-pad-x) 4rem;
  flex: 1;
  box-sizing: border-box;
}

.info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: var(--txt-3);
  font-style: italic;
}

/* ═══ ENTRY CARD DESIGN (40% HEADWORDS / 60% DEFINITION) ═══ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  margin-bottom: 1.75rem;
  transition: box-shadow var(--ease), border-color var(--ease);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--sh-hover);
  border: 1px solid var(--acc);
}

.card-layout {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: stretch;
}

@media (max-width: 992px) {
  .card-layout {
    grid-template-columns: 1fr;
  }
}

.card-left {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bdr-card);
  background: var(--card-hindi-bg);
}

@media (max-width: 992px) {
  .card-left {
    border-right: none;
    border-bottom: 1px solid var(--bdr-card);
  }
}

/* ── Headword Row 1: Top 3 Columns (ASCII, Platts, ALA-LC) ── */
.hw-grid-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--bdr-card);
}

.hw-cell-top {
  padding: 0.75rem 0.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hw-cell-top:not(:last-child) {
  border-right: 1px solid var(--bdr-card);
}

.hw-cell-ascii {
  background: var(--card-ascii-bg);
}

.hw-cell-platts {
  background: var(--card-platts-bg);
}

.hw-cell-alalc {
  background: var(--card-alalc-bg);
}

.hw-lbl-top {
  font-family: var(--f-ui);
  font-size: 0.62rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt-lbl);
  margin-bottom: 0.25rem;
}

.hw-val-top {
  font-family: var(--f-ui);
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--txt);
}

/* ── Headword Row 2: Urdu (Composite = 2 Cols, Compact = 1 Merged Col) ── */
.hw-grid-urdu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--card-urdu-bg);
  color: var(--card-urdu-text);
  flex: 0 0 auto;
  min-height: 125px;
}

.hw-grid-urdu-merged {
  display: flex;
  flex-direction: column;
  background: var(--card-urdu-bg);
  color: var(--card-urdu-text);
  flex: 0 0 auto;
  min-height: 125px;
}

.hw-cell-urdu {
  padding: 1.1rem 0.85rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hw-cell-urdu:first-child:not(:only-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.hw-lbl-urdu {
  font-family: var(--f-ui);
  font-size: 0.65rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.25rem;
}

.hw-val-urdu {
  font-family: var(--f-urdu);
  font-size: 2.1rem;
  line-height: 1.4;
  direction: rtl;
  color: #ffffff;
}

/* ── Headword Row 3: Red Section Badges (Between Urdu & Hindi) ── */
.hw-tag-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  gap: 1px;
  background: transparent;
  border: none;
  position: relative;
  z-index: 10;
  overflow: visible;
}

.hw-tag {
  background: var(--card-tag-red);
  color: #ffffff;
  font-family: var(--f-ui);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.15rem 0;
  width: 90px;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ── Headword Row 4: Hindi (Soft Muted Celadon Green) ── */
.hw-grid-hindi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--card-hindi-bg);
  color: var(--card-hindi-text);
  flex: 1 0 auto;
  min-height: 70px;
}

.hw-cell-hindi {
  padding: 0.75rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hw-cell-hindi:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.hw-lbl-hindi {
  font-family: var(--f-ui);
  font-size: 0.63rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--card-hindi-text);
  opacity: 0.75;
  margin-bottom: 0.2rem;
}

.hw-val-hindi {
  font-family: var(--f-deva);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--card-hindi-text);
}

/* ── Card Right Side (Definition & Controls) ── */
.card-right {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
}

.def-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface); 
  padding: 0;
}

.def-section > * {background: transparent; background-color: transparent;}

.def-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--bdr-inner);
}

.def-hdr-lbl {
  font-family: var(--f-ui);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt);
}

.panel-lights {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-left: auto;
}

.ind {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  font-size: 0.55rem;
  font-weight: 800;
  text-align: center;
  line-height: 13px;
  color: #fff;
}

.ind-g { background: #16a34a; }
.ind-dim { background: #94a3b8; }
.ind-y { background: #ca8a04; }
.ind-r { background: #dc2626; }

.def-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 0.85rem 1.25rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--txt-2);
}

@media (max-width: 600px) {
  .def-body {
    grid-template-columns: 1fr;
  }
}

.def-col-title {
  font-size: 0.65rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-lbl);
  margin-bottom: 0.4rem;
}

.def-rendered {
  max-height: 160px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Card Action Footer Bar */
.hw-card-footer,
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--surface-container-low);
  border-top: 1px solid var(--bdr-inner);
  flex-wrap: wrap;
  gap: 0.6rem;
}

.badge-rowid {
  background: var(--primary);
  color: #ffffff;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-sm);
  text-decoration: none;
}

/* ═══ PAGINATION ═══ */
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.pager-ctrl {
  display: flex;
  gap: 0.35rem;
}

.page-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 650;
  border: 1px solid var(--bdr);
  background: var(--bg-card);
  color: var(--txt);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--ease);
}

.page-btn:hover,
.page-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/* ═══ BOXED COLOPHON FOOTER ═══ */
.site-footer {
  max-width: var(--site-max-width);
  width: 100%;
  margin: 3rem auto 1.5rem;
  padding: 1.5rem var(--site-pad-x) 0;
  border-top: 1px solid var(--bdr);
  text-align: center;
  font-size: 0.82rem;
  color: var(--txt-lbl);
  line-height: 1.7;
  box-sizing: border-box;
  background: var(--surface);
}

.site-footer a {
  color: var(--acc);
  text-decoration: none;
  font-weight: 600;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-copy {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--txt-3);
}

/* ═══ WORKFLOW PAGE ═══ */
.wf-wrap {
  max-width: var(--site-max-width);
  margin: 1.5rem auto 3rem;
  padding: 0 1.5rem;
}
.wf-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bdr-inner);
}
.wf-title {
  font-family: var(--f-serif);
  font-size: 1.6rem;
  color: var(--primary);
  font-weight: 700;
}
.wf-subtitle {
  font-size: 0.85rem;
  color: var(--txt-2);
  margin-top: 0.2rem;
}
.wf-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.wf-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  box-shadow: var(--sh-card);
}
.wf-stat-lbl {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt-3);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.wf-stat-val {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--txt);
  line-height: 1;
}
.wf-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--bdr-inner);
  margin-bottom: 1.5rem;
}
.wf-tab {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--txt-2);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--ease);
}
.wf-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.wf-tab:hover:not(.active) {
  color: var(--txt);
  background: var(--surface-container-low);
}
.wf-ctrls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.wf-filter-group {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.wf-pill {
  font-size: 0.78rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-max);
  border: 1px solid var(--bdr);
  background: var(--bg-card);
  color: var(--txt-2);
  cursor: pointer;
  font-weight: 500;
  transition: all var(--ease);
}
.wf-pill.active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.wf-batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.25rem;
}
.wf-batch-card {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow var(--ease);
}
.wf-batch-card:hover { box-shadow: var(--sh-hover); }
.wf-batch-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.wf-batch-id-title {
  font-family: var(--f-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.3;
}
.wf-status-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.wf-status-badge.status-assigned { background: #e0e7ff; color: #3730a3; }
.wf-status-badge.status-in_progress { background: #fef3c7; color: #92400e; }
.wf-status-badge.status-submitted { background: #fed7aa; color: #9a3412; }
.wf-status-badge.status-approved { background: #dcfce7; color: #166534; }
.wf-status-badge.status-rejected { background: #fee2e2; color: #991b1b; }

.wf-batch-desc {
  font-size: 0.83rem;
  color: var(--txt-2);
  margin-bottom: 0.85rem;
  line-height: 1.4;
}
.wf-batch-meta {
  font-size: 0.78rem;
  color: var(--txt-3);
  background: var(--surface-container-low);
  padding: 0.6rem 0.8rem;
  border-radius: var(--r);
  margin-bottom: 0.85rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}
.wf-batch-meta div strong { color: var(--txt); }
.wf-progress-wrap { margin-bottom: 1rem; }
.wf-progress-bar-bg {
  background: var(--bdr-inner);
  border-radius: var(--r-max);
  height: 8px;
  overflow: hidden;
  margin-bottom: 0.35rem;
}
.wf-progress-bar-fill {
  background: var(--acc);
  height: 100%;
  transition: width 0.3s ease;
}
.wf-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--txt-3);
  font-weight: 600;
}
.wf-batch-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--bdr-inner);
  padding-top: 0.85rem;
}
.wf-table-card {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  overflow-x: auto;
}
.wf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.wf-table th, .wf-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--bdr-inner);
}
.wf-table th {
  background: var(--surface-container-low);
  color: var(--txt-2);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wf-table tr:hover td { background: var(--surface-container-lowest); }
.diff-orig {
  color: #991b1b;
  background: #fee2e2;
  padding: 0.1rem 0.3rem;
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.8rem;
  text-decoration: line-through;
}
.diff-prop {
  color: #166534;
  background: #dcfce7;
  padding: 0.1rem 0.3rem;
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 600;
}
.btn-wf {
  border: 1px solid var(--bdr);
  background: var(--bg-card);
  color: var(--txt);
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
}
.btn-wf:hover { background: var(--surface-container-high); }
.btn-wf-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-wf-primary:hover { background: var(--primary-container); }
.btn-wf-success { background: #16a34a; color: white; border-color: #16a34a; }
.btn-wf-success:hover { background: #15803d; }
.btn-wf-danger { background: #dc2626; color: white; border-color: #dc2626; }
.btn-wf-danger:hover { background: #b91c1c; }
.btn-wf-warning { background: #f59e0b; color: white; border-color: #f59e0b; }
.btn-wf-warning:hover { background: #d97706; }
.wf-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.wf-modal {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r-lg);
  width: 90%;
  max-width: 520px;
  padding: 1.5rem;
  box-shadow: var(--sh-hover);
}
.wf-modal-title {
  font-family: var(--f-serif);
  font-size: 1.25rem;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bdr-inner);
}
.wf-form-group { margin-bottom: 1rem; }
.wf-form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--txt-2);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wf-form-group input,
.wf-form-group select,
.wf-form-group textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  background: var(--bg-input);
  color: var(--txt);
  font-family: inherit;
}
.wf-form-group textarea { resize: vertical; min-height: 60px; }
.wf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.wf-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bdr-inner);
}

/* ═══ WORK PAGE: BATCH SELECTOR & BANNER ═══ */
.batch-selector-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.batch-selector-bar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.batch-selector-label {
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-lbl);
}
.batch-select {
  padding: 0.4rem 2rem 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--txt);
  border: 1px solid var(--bdr);
  min-width: 280px;
}
.batch-banner {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--sh-card);
}
.batch-banner-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.batch-banner-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.batch-banner-icon { font-size: 1.6rem; }
.batch-banner-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.batch-banner-title { font-size: 1.15rem; font-weight: 750; color: var(--txt); margin: 0; }
.batch-banner-desc { font-size: 0.83rem; color: var(--txt-2); margin: 0.2rem 0 0 0; }
.batch-banner-meta { font-size: 0.75rem; color: var(--txt-lbl); margin-top: 0.2rem; }
.batch-banner-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.batch-progress-block { text-align: right; min-width: 140px; }
.batch-progress-lbl {
  font-size: 0.7rem;
  font-weight: 750;
  color: var(--txt-lbl);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.batch-progress-val { font-size: 0.95rem; font-weight: 800; color: var(--primary); }
.batch-action-btns { display: flex; gap: 0.5rem; }
.lead-batch-actions { display: none; gap: 0.5rem; }

/* ═══ GLOBAL UTILITY & COMPONENT CLASSES ═══ */
.hidden { display: none !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.flex-row { display: flex; align-items: center; gap: 1rem; }
.logout-link { color: #dc2626 !important; font-weight: 600; }

/* Public Splash Screen */
.public-splash {
  display: none;
  text-align: center;
  padding: 6rem 2rem;
  background: var(--bg-surface);
  margin: 2rem auto;
  max-width: 800px;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
  border: 1px solid var(--bdr-card);
}
.public-splash-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.public-splash-title {
  font-size: 2rem;
  color: var(--txt);
  margin-bottom: 1rem;
  font-family: var(--f-serif);
}
.public-splash-desc {
  color: var(--txt-2);
  max-width: 600px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
}
.public-splash-note {
  color: var(--txt-lbl);
  font-size: 0.9rem;
}
.public-splash-sim {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 10;
}
.role-sim-label {
  color: var(--txt-2);
  font-size: 0.85rem;
  font-family: var(--f-ui);
}
.role-sim-select {
  background: var(--bg-card);
  color: var(--txt);
  border: 1px solid var(--bdr);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
  min-width: 150px;
}

/* Workflow Specific Status Color Modifiers */
.val-in-progress { color: #92400e !important; }
.val-submitted { color: #9a3412 !important; }
.val-approved { color: #166534 !important; }
.val-pending { color: var(--primary) !important; }

.wf-empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: 3rem;
  color: var(--txt-3);
}
.wf-table-empty {
  text-align: center;
  padding: 2.5rem;
  color: var(--txt-3);
}
.wf-proposal-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.wf-comment-cell {
  font-size: 0.8rem;
  color: var(--txt-2);
}
.wf-pending-label {
  font-size: 0.75rem;
  color: var(--txt-3);
  font-style: italic;
}
.btn-delete-batch {
  margin-left: auto;
}

/* Unicode Breakdown Modal Classes */
.decomp-col-grid {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.canvas-header-wrap {
  text-align: center;
  margin-bottom: 1rem;
  border: 1px solid var(--bdr-inner);
  border-radius: 0;
  overflow: hidden;
}
.canvas-header-lbl {
  font-size: 0.65rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0.4rem;
  background: #065f46;
  border-bottom: 1px solid var(--bdr-inner);
}
.canvas-header-canvas {
  display: block;
  width: 100%;
  height: 100px;
  background: #047857;
}
.decomp-inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.decomp-col-hdr {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--txt-lbl);
  margin-bottom: 1rem;
  text-transform: uppercase;
  border-bottom: 2px solid var(--bdr);
  padding-bottom: 0.25rem;
}
.decomp-col-header-rev {

  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: #15803d;
  margin-bottom: 1rem;
  text-transform: uppercase;
  border-bottom: 2px solid #86efac;
  padding-bottom: 0.25rem;
}
.modal-def-pane {
  border-left: 1px solid var(--bdr);
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
}
.modal-def-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--bdr);
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
}
.modal-def-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--txt-lbl);
  text-transform: uppercase;
}
.modal-def-edit-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.modal-def-content {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--txt);
  max-height: 400px;
  overflow-y: auto;
}
.modal-def-editor {
  display: none;
  margin-top: 1rem;
  flex-direction: column;
  flex: 1;
}
.modal-def-editable-area {
  border: 1px solid var(--bdr-focus);
  padding: 0.8rem;
  border-radius: var(--r-sm);
  min-height: 150px;
  background: #fff;
  color: var(--txt);
  outline: none;
  overflow-y: auto;
  line-height: 1.6;
  font-size: 0.95rem;
}
.modal-def-btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.modal-def-btn {
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
}
.or-hint-lbl {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--txt-3);
  font-size: 0.6rem;
}

/* ═══ SCOPE BREAKDOWN PAGE ═══ */
.metric-total { font-size: 2.5rem; font-weight: 800; color: var(--acc); font-variant-numeric: tabular-nums; }
.metric-label { font-size: 0.8rem; font-weight: 700; color: var(--txt-lbl); text-transform: uppercase; letter-spacing: 0.05em; }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--txt-2); text-decoration: none; font-size: 0.9rem; font-weight: 500; margin-bottom: 1.5rem; transition: color var(--ease); }
.back-link:hover { color: var(--txt); }
/* ═══ SCOPE PAGE ENHANCEMENTS ═══ */
.scope-card {
  padding: 0;
  overflow: hidden;
}

.scope-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.75rem 2rem 1.25rem;
  border-bottom: 1px solid var(--bdr-inner);
  flex-wrap: wrap;
  gap: 1rem;
}

.scope-title {
  font-family: var(--f-ui);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--txt);
  margin: 0 0 0.35rem;
}

.scope-subtitle {
  font-size: 0.88rem;
  color: var(--txt-3);
  margin: 0;
}

.scope-total-block {
  text-align: right;
  flex-shrink: 0;
}

.scope-loader {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--txt-3);
  font-size: 0.9rem;
}

.rule-list {
  list-style: none;
  padding: 1.25rem 2rem 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.rule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  background: var(--surface-container-low);
  border: 1px solid var(--bdr-inner);
  border-radius: var(--r);
  padding: 0.85rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: all var(--ease);
}

.rule-item:hover {
  border-color: var(--acc);
  background: var(--acc-dim);
  transform: translateX(3px);
}

.rule-main {
  flex: 1;
  min-width: 0;
}

.rule-name {
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rule-stat-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.rule-pct {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--txt-3);
  letter-spacing: 0.02em;
}

.rule-count {
  background: var(--surface-container-high);
  border: 1px solid var(--bdr-inner);
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-sm);
  font-weight: 750;
  font-size: 0.82rem;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  font-family: var(--f-mono);
  transition: all var(--ease);
}

.rule-arrow {
  color: var(--txt-3);
  font-size: 0.88rem;
  transition: transform var(--ease), color var(--ease);
}

.rule-item:hover .rule-count {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.rule-item:hover .rule-arrow {
  color: var(--primary);
  transform: translateX(3px);
}


/* ═══ MODAL DIALOG CLASSES ═══ */
body.modal-open {
  overflow: hidden !important;
}

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  overscroll-behavior: contain;
}
.modal-content {
  background: var(--bg-card);
  border: none;
  border-top: 1px solid var(--bdr-card);
  padding: 2.2rem 2.5rem;
  border-radius: var(--r-xl);
  max-width: 900px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.modal {
  overscroll-behavior: contain;
}
.exec-modal-overlay {
  overscroll-behavior: contain;
}
.exec-modal-box, .errata-modal-box {
  overscroll-behavior: contain;
}
.modal-close-btn {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  font-size: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--txt-3);
}
.modal-main-title {
  font-family: var(--f-serif);
  color: var(--primary);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.2rem;
}
.modal-sub-title {
  text-align: center;
  color: var(--txt-2);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}
.modal-columns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.btn-assign-batch {
  font-size: 0.82rem;
  padding: 0.45rem 0.9rem;
}
.btn-clear-batch {
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
}
.def-empty-hint {
  color: var(--txt-3);
  font-style: italic;
}
.ex-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ex-field-lbl {
  font-size: 0.7rem;
  color: var(--txt-3);
  margin-bottom: 4px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.ex-field-lbl-mod {
  font-size: 0.7rem;
  color: var(--primary);
  margin-bottom: 4px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.ex-val-orig {
  opacity: 0.7;
}

/* ═══ WELCOME SCREEN CLASSES ═══ */
.welcome-card {
  padding: 2.5rem;
  max-width: 800px;
  margin: 2rem auto;
  text-align: center;
  border-radius: var(--r-xl);
}
.welcome-icon {
  font-size: 3rem;
}
.welcome-title {
  font-size: 1.6rem;
  font-weight: 850;
  margin: 1rem 0 .5rem;
  letter-spacing: -.02em;
  color: var(--txt);
}
.welcome-subtitle {
  color: var(--txt-3);
  font-style: italic;
  font-size: .88rem;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.welcome-guidelines {
  text-align: left;
  background: var(--bg-card2);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: 1.5rem;
}
.welcome-guidelines-title {
  font-size: .8rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .8rem;
  color: var(--txt-2);
}
.welcome-guidelines-list {
  font-size: .82rem;
  color: var(--txt-2);
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  line-height: 1.5;
}

/* ═══ OVERVIEW / INDEX PAGE CLASSES ═══ */
.val-scope { color: var(--primary); cursor: pointer; }
.val-pending-approval { color: #b45309; }
.no-decor { text-decoration: none !important; }

.legend-box.legend-0 { background: #cbd5e1; }
.legend-box.legend-1 { background: #c6e48b; }
.legend-box.legend-2 { background: #7bc96f; }
.legend-box.legend-3 { background: #239a3b; }
.legend-box.legend-4 { background: #196127; }

.launchpad-card {
  text-align: center;
  padding: 2rem 1.5rem;
}
.launchpad-title {
  justify-content: center;
  margin-bottom: .8rem;
}
.launchpad-desc {
  font-size: .83rem;
  color: var(--txt-2);
  margin-bottom: 1.5rem;
}
.launchpad-btn-grp {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.launchpad-btn {
  text-decoration: none;
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
}
.launchpad-btn-ghost {
  text-decoration: none;
  border: 1px solid var(--bdr);
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
}
.activity-empty {
  font-size: .85rem;
  color: var(--txt-3);
  text-align: center;
  padding: 2rem 0;
}
.timeline-batch-link {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 700;
}
.timeline-entry-link {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 600;
}

/* ═══ CONFIG PAGE CLASSES ═══ */
.config-section-desc {
  font-size: 0.9rem;
  color: var(--txt-3);
  margin-bottom: 1.5rem;
}
.config-action-row {
  text-align: right;
  margin-top: 1rem;
}
.config-action-row-bordered {
  text-align: right;
  margin-top: 1.5rem;
  border-top: 1px solid var(--bdr-inner);
  padding-top: 1.5rem;
}
.script-group {
  margin-bottom: 1rem;
}
.script-group-inner {
  padding: 1rem;
}
.scope-lbl-rule {
  flex: 1;
}
.scope-lbl-auto {
  color: var(--txt-3);
  font-size: 0.9rem;
}
.admin-card-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.admin-box {
  padding: 1.5rem;
  border: 1px solid var(--bdr-inner);
  border-radius: var(--r-sm);
  background: var(--bg-card2);
}
.admin-box-title {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--txt);
  margin-bottom: 0.5rem;
}
.admin-box-desc {
  font-size: 0.9rem;
  color: var(--txt-2);
  margin-bottom: 1rem;
}
.admin-danger-box {
  padding: 1.5rem;
  border: 1px solid var(--red-dim);
  border-radius: var(--r-sm);
  background: #fef2f2;
}
.admin-danger-title {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--red);
  margin-bottom: 0.5rem;
}
.admin-danger-desc {
  font-size: 0.9rem;
  color: #7f1d1d;
  margin-bottom: 1rem;
}
.btn-danger-reboot {
  background: var(--red) !important;
  color: #fff !important;
}
.toast-popup {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #334155;
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 6px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.exec-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15,23,42,0.8);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.exec-modal-box {
  background: var(--bg-card);
  padding: 2rem;
  border-radius: var(--r-lg);
  width: 400px;
  max-width: 90%;
  box-shadow: var(--sh-hover);
  border: 1px solid var(--bdr-card);
}
.exec-modal-title {
  margin: 0 0 1.5rem 0;
  color: var(--txt);
  border-bottom: 2px solid var(--bdr-inner);
  padding-bottom: 0.5rem;
}
.exec-modal-msg {
  font-size: 0.9rem;
  color: var(--txt-2);
  min-height: 100px;
}
.exec-modal-close-btn {
  display: none;
  margin-top: 1.5rem;
  width: 100%;
  padding: 0.8rem;
  background: var(--acc);
  color: white;
  border: none;
  border-radius: var(--r-sm);
  font-weight: 600;
  cursor: pointer;
}
.exec-step {
  margin-bottom: 1rem;
}
.exec-complete-msg {
  color: #10b981;
  font-weight: 600;
  margin-top: 1.5rem;
}
.exec-error-msg {
  color: #ef4444;
  font-weight: 600;
  margin-top: 1.5rem;
}

/* ═══ ABOUT PAGE CLASSES ═══ */
.about-card {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r-lg);
  padding: 2.5rem;
  margin: 2rem auto;
  box-shadow: var(--sh-card);
  max-width: 900px;
}
.about-card h1 {
  font-size: 2.2rem;
  color: var(--txt);
  margin-bottom: 1.5rem;
}
.about-card h2 {
  font-size: 1.4rem;
  color: var(--txt);
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}
.about-card h3 {
  font-size: 1.1rem;
  color: var(--txt);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.about-card p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--txt-2);
  margin-bottom: 1.2rem;
}
.about-card ul, .about-card ol {
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--txt-2);
  line-height: 1.7;
}
.about-card li {
  margin-bottom: 0.4rem;
}

/* ═══ DOCUMENTATION READER & MERMAID CLASSES ═══ */
.doc-reader-container {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--txt-3);
  margin-bottom: 1.2rem;
}
.breadcrumbs a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.doc-reader-header {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r-lg);
  padding: 2.2rem 2.5rem;
  box-shadow: var(--sh-card);
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.doc-reader-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}
.doc-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.doc-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-sm);
  background: var(--surface-container-high);
  color: var(--txt-2);
}
.doc-reader-title {
  font-family: var(--f-heading);
  font-size: 2.2rem;
  color: var(--txt);
  line-height: 1.25;
  margin-bottom: 0.6rem;
}
.doc-reader-subtitle {
  font-size: 1.05rem;
  color: var(--txt-2);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.doc-reader-meta {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--txt-3);
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.doc-article-card {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r-lg);
  padding: 3rem 3.5rem;
  box-shadow: var(--sh-card);
  margin-bottom: 3rem;
}
.doc-article {
  color: var(--txt);
  font-size: 1.02rem;
  line-height: 1.75;
}
.doc-article h1,
.doc-article h2,
.doc-article h3,
.doc-article h4 {
  font-family: var(--f-heading);
  color: var(--txt);
  margin-top: 2.2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.doc-article h1 { font-size: 2rem; border-bottom: 1px solid var(--bdr-inner); padding-bottom: 0.6rem; }
.doc-article h2 { font-size: 1.55rem; border-bottom: 1px solid var(--bdr-inner); padding-bottom: 0.5rem; }
.doc-article h3 { font-size: 1.25rem; }
.doc-article h4 { font-size: 1.1rem; }
.doc-article p {
  margin-bottom: 1.3rem;
  color: var(--txt-2);
}
.doc-article strong {
  color: var(--txt);
  font-weight: 600;
}
.doc-article em {
  font-style: italic;
}
.doc-article ul,
.doc-article ol {
  margin-left: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--txt-2);
  line-height: 1.7;
}
.doc-article li {
  margin-bottom: 0.4rem;
}
.doc-article hr {
  border: none;
  border-top: 1px solid var(--bdr-inner);
  margin: 2.5rem 0;
}
.doc-article blockquote {
  border-left: 4px solid var(--primary);
  background: var(--surface-container-low);
  padding: 1rem 1.4rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--txt-2);
  font-style: italic;
}
.doc-article code {
  font-family: var(--f-mono);
  font-size: 0.88em;
  background: var(--surface-container-high);
  padding: 0.2em 0.4em;
  border-radius: var(--r-sm);
  color: var(--txt);
  border: 1px solid var(--bdr-inner);
}
.doc-article pre {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: var(--r);
  padding: 1.2rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}
.doc-article pre code {
  background: transparent;
  border: none;
  color: #e2e8f0;
  padding: 0;
}
.doc-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.88rem;
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  overflow: hidden;
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  background: var(--surface);
}
.table-responsive table {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100%;
  border-collapse: collapse;
}
.doc-article th {
  background: var(--surface-container-low);
  color: var(--txt);
  font-weight: 600;
  padding: 0.65rem 0.85rem;
  border-bottom: 2px solid var(--bdr);
  border-right: 1px solid var(--bdr-inner, rgba(0,0,0,0.08));
  text-align: left;
  font-size: 0.82rem;
  white-space: nowrap;
}
.doc-article td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--bdr-inner, rgba(0,0,0,0.06));
  border-right: 1px solid var(--bdr-inner, rgba(0,0,0,0.06));
  color: var(--txt-2);
  vertical-align: middle;
  font-size: 0.85rem;
  line-height: 1.35;
}
.doc-article th:last-child,
.doc-article td:last-child {
  border-right: none;
}
.doc-article .cp-pill {
  display: inline-block;
  font-family: var(--f-mono, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface-container-high, rgba(0,0,0,0.05));
  color: var(--txt, #334155);
  border: 1px solid var(--bdr, #cbd5e1);
  padding: 1px 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  line-height: 1.3;
}
.doc-article .pct {
  display: block;
  font-size: 0.74rem;
  color: var(--txt-3, #94a3b8);
  font-weight: 500;
}
.doc-article tr:last-child td {
  border-bottom: none;
}
.doc-article tr:hover td {
  background: var(--bg-hover);
}
.doc-article span.urdu,
.doc-article [lang="ur"] {
  font-family: var(--f-urdu);
  font-size: 1.3em;
  direction: rtl;
  display: inline-block;
}
.doc-article span.dev,
.doc-article [lang="hi"] {
  font-family: var(--f-deva);
}
.doc-article div.mermaid {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  background: var(--bg-card2);
  padding: 1.5rem;
  border: 1px solid var(--bdr-inner);
  border-radius: var(--r);
  overflow-x: auto;
}
@media (max-width: 768px) {
  .doc-article-card {
    padding: 1.25rem 0.85rem;
  }
  .doc-article th,
  .doc-article td {
    padding: 0.45rem 0.55rem;
    font-size: 0.8rem;
  }
  .doc-article .cp-pill {
    font-size: 0.68rem;
    padding: 0px 4px;
  }
  .doc-article .pct {
    font-size: 0.7rem;
  }
}











/* ═══ Consolidated from config.html ═══ */
.config-container { max-width: 900px; margin: 3rem auto; padding: 0 1rem; }
  .config-card { background: var(--bg-card); padding: 2rem; border-radius: var(--r-lg); box-shadow: var(--sh-card); border: 1px solid var(--bdr-card); margin-bottom: 2rem; }
  .config-card h2 { margin-top: 0; color: var(--txt); border-bottom: 1px solid var(--bdr-inner); padding-bottom: 0.5rem; margin-bottom: 1.5rem; font-family: var(--f-serif); }
  .form-group { margin-bottom: 1.5rem; }
  .form-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--txt-2); font-size: 0.9rem; }
  .form-group input[type="text"] { width: 100%; padding: 0.6rem; border: 1px solid var(--bdr); border-radius: var(--r-sm); font-size: 0.95rem; background: var(--bg-input); color: var(--txt); }
  .btn { background: var(--acc); color: #fff; padding: 0.6rem 1.2rem; border: none; border-radius: var(--r-sm); cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; transition: all var(--ease); }
  .btn:hover { opacity: 0.9; }
  .btn-secondary { background: var(--surface-container-high); color: var(--txt); }
  .btn-secondary:hover { background: var(--bdr); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  
  .scope-list { margin-bottom: 1rem; }
  .scope-item { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card2); padding: 0.5rem 1rem; border: 1px solid var(--bdr-inner); border-radius: var(--r-sm); margin-bottom: 0.5rem; }
  .scope-item label { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-weight: 500; cursor: pointer; color: var(--txt); }
  .scope-replacement { font-size: 0.85rem; color: var(--txt-3); background: var(--surface-container-high); padding: 0.2rem 0.5rem; border-radius: var(--r-sm); }
  
  .add-new-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--bdr); }
  .add-new-row input { padding: 0.5rem; border: 1px solid var(--bdr); border-radius: var(--r-sm); flex: 1; }
  
  .config-layout { display: flex; gap: 2rem; }
  .config-sidebar { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.5rem; }
  .config-content { flex: 1; }
  .nav-item { text-align: left; background: transparent; border: none; padding: 0.8rem 1rem; cursor: pointer; border-radius: var(--r-sm); font-size: 1rem; font-weight: 500; color: var(--txt-2); transition: all 0.2s; }
  .nav-item:hover { background: var(--bg-hover); color: var(--txt); }
  .nav-item.active { background: var(--primary); color: #fff; font-weight: 600; }
  .tab-pane { display: none; }
  .tab-pane.active { display: block; }
  
  @media (max-width: 768px) {
    .config-layout { flex-direction: column; }
    .config-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
  }

  details.script-group summary {
    font-size: 1rem; color: var(--txt); background: var(--bg-card); border: 1px solid var(--bdr-inner); border-radius: var(--r-sm); cursor: pointer;
  }
  details.script-group summary span {
    font-weight: 600; display: block; padding: 0.8rem 1rem;
  }

/* ═══ Consolidated from explorer.html ═══ */
/* ── Explore Page Specific Styles ── */

/* ═══════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════ */
.wrap {
  position: relative; z-index: 1;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

/* ═══════════════════════════════════════════════════════
   CONTROLS BAR
═══════════════════════════════════════════════════════ */


.ctrl-grp { display: flex; flex-direction: column; gap: 4px; }
.ctrl-grp > label {
  font-size: .63rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #94a3b8; font-style: italic;
}

.radio-grp { display: flex; align-items: center; gap: .75rem; background: var(--bg-input); border: 1px solid var(--bdr); padding: 0 .85rem; border-radius: var(--r-sm); height: 35.5px; }
.radio-grp label { display: flex; align-items: center; gap: 4px; cursor: pointer; color: var(--txt); font-weight: 500; font-size: .85rem; text-transform: none; letter-spacing: normal; }
.radio-grp input[type="radio"] { margin: 0; cursor: pointer; width: auto; box-shadow: none; }

.ctrl-search { flex: 1; min-width: 200px; }

/* Script indicator badge in search box */
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap input[type=text] { padding-right: 5.5rem; }
.script-badge {
  position: absolute; right: .5rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--acc-dim); color: var(--acc-txt); border: 1px solid var(--bdr-accent);
  padding: 2px 7px; border-radius: var(--r-max);
  pointer-events: none; transition: background var(--ease), color var(--ease);
}

input[type=text], select {
  background: var(--bg-input);
  border: 1px solid var(--bdr);
  color: var(--txt);
  font-family: var(--f-ui); font-size: .875rem;
  padding: .52rem .85rem;
  border-radius: var(--r-sm);
  outline: none; width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
}

input[type=text]:focus, select:focus {
  border-color: var(--bdr-focus);
  box-shadow: 0 0 0 3px var(--acc-dim);
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 7L1 3h8z' fill='%235a6480'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2rem;
}

.ctrl-right { display: flex; gap: .5rem; margin-left: auto; align-items: flex-end; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .52rem 1.1rem;
  border: none; border-radius: var(--r-sm);
  font-family: var(--f-ui); font-size: .85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all var(--ease);
}

.btn-primary { background: var(--acc); color: #fff; box-shadow: 0 3px 14px var(--acc-glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 20px var(--acc-glow); }

.btn-ghost { background: var(--bg-card2); color: var(--txt-2); border: 1px solid var(--bdr); }
.btn-ghost:hover { background: var(--bdr); color: var(--txt); }

/* ═══════════════════════════════════════════════════════
   INFO BAR
═══════════════════════════════════════════════════════ */
.info-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  padding: .35rem 0; margin-bottom: .9rem;
  font-size: .83rem; color: var(--txt-2);
}

/* ═══════════════════════════════════════════════════════
   RECORD CARDS
═══════════════════════════════════════════════════════ */
.records { display: flex; flex-direction: column; gap: 1.5rem; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
}

/* ─── Badges (top-right corner of card) ─── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--r-max);
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
}

.bdg-rowid { background: var(--surface-container-high); color: var(--txt-3); border: 1px solid var(--bdr-card); font-family: var(--f-mono); }
.bdg-page { background: #ccfbf1; color: #0f766e; border: 1px solid #99f6e4; }

/* ─── Card Footer ─── */
.card-footer {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .45rem .85rem .45rem 1rem;
  background: var(--bg-card2);
  border-top: 1px solid var(--bdr-card);
}
.card-footer-space { flex: 1; }

.btn-del {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: transparent; border: 1px solid rgba(239,68,68,.25);
  color: var(--red); border-radius: var(--r-sm);
  font-size: .72rem; font-weight: 600; font-family: var(--f-ui);
  cursor: pointer; transition: all var(--ease);
}
.btn-del:hover { background: var(--red-dim); border-color: var(--red); }

/* ─── Layout: Left/Right Columns ─── */
.card-layout { display: flex; flex-direction: row; align-items: stretch; background: var(--bg-card); }
.card-left { flex: 0 0 45%; border-right: 1px solid var(--bdr-inner); display: flex; flex-direction: column; background: var(--card-hindi-bg); }
.card-right { flex: 0 0 55%; display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 900px) {
  .card-layout { flex-direction: column; }
  .card-left { border-right: none; border-bottom: 1px solid var(--bdr-inner); flex: auto; }
  .card-right { flex: auto; }
}

/* ─── Headwords Block ─── */
/* Row 1 (top): classic ASCII, ALA-LC, Devanagari */
.hw-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bdr-inner);
}

/* Hero Row (middle): big Urdu side-by-side */
.hw-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.15); /* Soft, semi-transparent white divider */
  position: relative;
  overflow: visible; /* Let overlapping labels show */
}

/* For compact mode where there is only one hero cell */
.compact-card .hw-hero-row {
  grid-template-columns: 1fr;
}
.compact-card .hw-hero-cell.classic-hero .hw-lbl {
  text-align: left; /* Center the label in compact mode? Actually original was text-align: right. We can make it left or center */
}

.hw-hero-cell {
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #065f46, #047857);
  display: flex; flex-direction: column; align-items: stretch;
  position: relative;
  overflow: visible; /* Let overlapping labels show */
  min-height: 9rem;
}
.hw-hero-cell::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.1), transparent 50%);
  pointer-events: none;
}
/* Label: hugs top edge and the central dividing axis */
.hw-hero-cell .hw-lbl {
  font-size: 0.6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  position: relative; z-index: 1;
  flex-shrink: 0;
}
/* Headword: fills remaining height and centers itself */
.hw-hero-cell .hw-val {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 3rem; color: #fff; line-height: 1.3;
  text-shadow: 0 4px 15px rgba(0,0,0,0.25);
  position: relative; z-index: 1;
  word-break: break-word;
}
/* Classic (left): Naskh-like face, with smaller font size to visually match Nastaliq vertical height */
.hw-hero-cell.classic-hero .hw-lbl { text-align: right; color: rgba(255,255,255,0.42); }
.hw-hero-cell.classic-hero .hw-val { 
  /*font-family: 'Amiri', 'Times New Roman', serif; */
  font-weight: 400; font-size: 2.2rem; color: rgba(255,255,255,0.78); }
/* Modern (right): Nastaliq font, regular font weight */
.hw-hero-cell.modern-hero .hw-lbl  { text-align: left; }
/*.hw-hero-cell.modern-hero .hw-val  { font-family: 'SomaUrduFont', 'Noto Nastaliq Urdu', serif; font-weight: 400; }*/

.modern-hero .hw-val {align-items: baseline;}

.hw-hero-cell .inline-inp.urdu {
  font-family: 'SomaUrduFont', var(--f-urdu);
  font-size: 2.5rem; text-align: right; direction: rtl;
  background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4);
  position: relative; z-index: 1;
}

/* ─── Script Grid (3-col rows) ─── */
.script-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bdr-inner);
  flex: 1;
}

.script-grid .hw-cell {
  padding: 1.1rem 1.2rem;
  text-align: left;
  display: flex; flex-direction: column; justify-content: flex-start;
  position: relative;
}

/* Row coloring */
.col-ascii { background: #f7fee7; border-top: 3px solid #84cc16; }
.col-alalc { background: #ecfdf5; border-top: 3px solid #10b981; }
.col-deva  { background: #fffbeb; border-top: 3px solid #f59e0b; }
/* Modern row — slightly tinted */
.col-ascii-mod { background: #f0fdf4; border-bottom: 3px solid #84cc16; border-top: none; }
.col-alalc-mod { background: #ecfdf5; border-bottom: 3px solid #10b981; border-top: none; }
.col-deva-mod  { background: #fefce8; border-bottom: 3px solid #f59e0b; border-top: none; }

.script-grid .hw-cell .hw-lbl {
  color: var(--txt-lbl); font-weight: 700; margin-bottom: 0.45rem;
  font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.script-grid .hw-cell .hw-val {
  color: var(--txt); font-weight: 600; font-size: 1.1rem; word-break: break-word;
}
.script-grid .deva { font-family: var(--f-deva); font-size: 1.3rem; color: #b45309 !important; }

.script-grid .hw-cell.editing .hw-val { display: none; }
.hw-hero-cell.editing .hw-val { display: none; }
.inline-inp {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--bdr-focus);
  color: var(--txt);
  font-family: inherit; font-size: inherit;
  padding: 5px 7px;
  border-radius: var(--r-sm);
  outline: none; resize: none;
  display: block; box-shadow: 0 0 0 3px var(--acc-dim);
}

/* ─── Definition section ─── */
.def-section { flex: 1; display: flex; flex-direction: column; background: var(--bg-surface); padding: 0 0;}
.def-hdr {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .75rem 1.25rem;
  background: transparent;
  border-bottom: 1px solid var(--bdr-inner);
}
.def-hdr-lbl {
  font-size: .8rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--txt); flex: 1;
}

/* Badges top-right in definition header */
.def-hdr-badges { display: flex; gap: .35rem; align-items: center; }

.btn-raw {
  font-size: .7rem; font-weight: 700;
  color: var(--acc-txt);
  background: var(--acc-dim);
  border: 1px solid var(--bdr-accent);
  padding: 4px 12px; border-radius: var(--r-sm);
  cursor: pointer; transition: all var(--ease);
}
.btn-raw:hover, .btn-raw.active { background: var(--acc); color: #fff; border-color: var(--acc); }

.def-body { padding: .85rem 1.25rem; position: relative; flex: 1; background: transparent; }
.def-rendered { max-height: 160px; overflow-y: auto; padding-right: 6px; font-size: 1rem; line-height: 1.8; color: var(--txt-2); cursor: default; }
.def-rendered hw { color: var(--txt); font-weight: 600; font-size: 1.1em; }
.def-rendered d  { font-family: var(--f-deva); color: #0f766e; }
.def-rendered i  { font-style: italic; }
.def-rendered b  { color: var(--txt); }

.def-textarea {
  width: 100%; min-height: 200px;
  background: var(--bg-input);
  border: 1px solid var(--bdr-focus);
  color: var(--txt);
  font-family: var(--f-mono); font-size: .85rem; line-height: 1.55;
  padding: 1rem;
  border-radius: var(--r-sm); resize: vertical; outline: none;
  display: none;
}
.def-hint { font-size: .7rem; color: #94a3b8; font-style: italic; margin-top: .5rem; font-style: italic; }

.def-body.raw-mode .def-rendered { display: none; }
.def-body.raw-mode .def-textarea { display: block; }
.def-body.raw-mode .def-hint     { display: none; }

/* ─── Additional Fields (in right column, collapsible) ─── */
.extra { border-top: 1px solid var(--bdr-card); }
.extra details { background: var(--bg-card2); }
.extra summary {
  display: flex; align-items: center; gap: 5px;
  padding: .6rem 1rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: #94a3b8; font-style: italic; cursor: pointer; user-select: none;
  list-style: none;
}
.extra summary:hover { color: var(--txt-2); }
.extra summary::before { content: '▶'; font-size: .6rem; transition: transform var(--ease); }
.extra details[open] summary::before { transform: rotate(90deg); }

.extra-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  padding: 0 1rem 1.5rem;
}
.ex-cell {
  background: transparent;
  border: none;
  border-left: 3px solid var(--bdr-inner);
  padding: .2rem 0 .2rem 1rem;
  position: relative;
}
.ex-lbl { font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-lbl); margin-bottom: .25rem; }
.ex-val { font-size: .85rem; color: var(--txt-2); line-height: 1.5; word-break: break-word; font-style: italic; }
.ex-cell.editing .ex-val { display: none; }

@keyframes shimmer { 0% { opacity: .3; } 50% { opacity: 1; } 100% { opacity: .3; } }
.saving-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; background: var(--acc); border-radius: 50%; animation: shimmer 1s ease-in-out infinite; }

/* ─── Mobile Control Bar Grid ─── */
@media (max-width: 768px) {
  .ctrl-bar {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0.8rem 0.5rem !important;
    padding: 1rem !important;
  }
  
  #refreshBtn {
    grid-column: 1 / 2;
    grid-row: 1;
    width: 35.5px;
    height: 35.5px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .ctrl-search {
    grid-column: 2 / 6;
    grid-row: 1;
  }
  
  .ctrl-right {
    grid-column: 6 / 7;
    grid-row: 1;
    margin: 0 !important;
    width: 100%;
  }
  
  .ctrl-right .btn {
    width: 100%;
    height: 35.5px;
    justify-content: center;
    padding: 0 !important;
  }
  
  .ctrl-bar > .ctrl-grp:nth-child(3) {
    grid-column: 1 / 4;
    grid-row: 2;
  }
  
  .ctrl-bar > .ctrl-grp:nth-child(4) {
    grid-column: 4 / 7;
    grid-row: 2;
  }
  
  .ctrl-bar > .ctrl-grp:nth-child(5) {
    grid-column: 1 / 4;
    grid-row: 3;
  }
  
  .ctrl-bar > .ctrl-grp:nth-child(6) {
    grid-column: 4 / 5;
    grid-row: 3;
  }
  
  .ctrl-bar > .ctrl-grp:nth-child(7) {
    grid-column: 5 / 7;
    grid-row: 3;
  }
}

/* ═══════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════ */
.pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.pager-info { font-size: .82rem; color: var(--txt-2); }
.pager-ctrl { display: flex; align-items: center; gap: .28rem; flex-wrap: wrap; }
.pg-btn {
  min-width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bdr); background: var(--bg-surface); color: var(--txt-2);
  border-radius: var(--r-sm); font-size: .82rem; font-weight: 500; cursor: pointer;
}
.pg-btn:hover:not(:disabled) { background: var(--bdr); color: var(--txt); }
.pg-btn.cur { background: var(--acc); color: #fff; border-color: var(--acc); }
.pg-btn:disabled { opacity: .3; cursor: default; }
.pg-ellipsis { color: #94a3b8; font-style: italic; padding: 0 3px; }

/* ═══════════════════════════════════════════════════════
   EMPTY STATE & LOADER & TOAST
═══════════════════════════════════════════════════════ */
.empty { text-align: center; padding: 5rem 2rem; color: #94a3b8; font-style: italic; }
.empty-icon { font-size: 3rem; margin-bottom: .9rem; opacity: .5; }
.empty-title { font-size: 1.1rem; font-weight: 600; color: var(--txt-2); margin-bottom: .4rem; }

.loader { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.65); backdrop-filter: blur(5px); z-index: 1000; align-items: center; justify-content: center; }
.loader.on { display: flex; }
.spinner { width: 44px; height: 44px; border: 3px solid var(--bdr); border-top-color: var(--acc); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toasts { position: fixed; bottom: 2rem; right: 2rem; z-index: 2000; display: flex; flex-direction: column; gap: .45rem; pointer-events: none; }
.toast { background: var(--bg-card); border: 1px solid var(--bdr-card); border-radius: var(--r); padding: .65rem .95rem; font-size: .83rem; color: var(--txt); box-shadow: var(--sh-hover); display: flex; align-items: center; gap: .55rem; animation: toastIn .2s ease; max-width: 310px; pointer-events: auto; }
@keyframes toastIn { from { transform: translateX(110%); opacity: 0; } }
@keyframes toastOut { to { transform: translateX(110%); opacity: 0; } }
.toast-ico { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; }
.toast.ok { border-color: #10b981; } .toast.ok .toast-ico { background: #d1fae5; color: #059669; }
.toast.err { border-color: #dc2626; } .toast.err .toast-ico { background: #fee2e2; color: #dc2626; }
.toast.info { border-color: var(--acc); } .toast.info .toast-ico { background: var(--acc-dim); color: var(--acc); }

/* ═══════════════════════════════════════════════════════
   LEGEND FOOTER
═══════════════════════════════════════════════════════ */
.legend-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  padding: 1rem;
  border-top: 1px solid var(--bdr);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--txt-2);
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}
.legend-item { display: flex; align-items: center; gap: 0.4rem; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.15); }

main.container { padding-bottom: 5rem; /* space for footer */ }

/* ═══════════════════════════════════════════════════════
   MODAL (kept hidden but functional)
═══════════════════════════════════════════════════════ */
.modal-bg { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.72); backdrop-filter: blur(7px); z-index: 1500; align-items: center; justify-content: center; padding: 1rem; }
.modal-bg.on { display: flex; }
.modal { background: var(--bg-card); border: 1px solid var(--bdr); border-radius: var(--r-xl); padding: 2rem; width: 100%; max-width: 680px; max-height: 90vh; overflow-y: auto; box-shadow: var(--sh-hover); overscroll-behavior: contain; }
.modal-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.modal-title { font-size: 1.15rem; font-weight: 700; }
.modal-close { background: transparent; border: none; color: var(--txt-2); font-size: 1.1rem; cursor: pointer; padding: 4px; border-radius: 4px; }
.modal-close:hover { color: var(--txt); }
.modal-form { display: grid; grid-template-columns: repeat(2,1fr); gap: .85rem; }
.f-grp { display: flex; flex-direction: column; gap: 4px; }
.f-grp.span2 { grid-column: 1/-1; }
.f-grp label { font-size: .63rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #94a3b8; font-style: italic; }
.f-grp input, .f-grp textarea { background: var(--bg-input); border: 1px solid var(--bdr); color: var(--txt); font-family: var(--f-ui); padding: .55rem .85rem; border-radius: var(--r-sm); outline: none; }
.f-grp input:focus, .f-grp textarea:focus { border-color: var(--bdr-focus); box-shadow: 0 0 0 3px var(--acc-dim); }
.f-grp textarea { resize: vertical; min-height: 80px; }
.modal-ftr { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--bdr); }

/* Navbar */
.navbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem 2rem;
  box-shadow: var(--sh-card);
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--acc);
  letter-spacing: -.02em;
}
.navbar-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.navbar-links a {
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: #94a3b8; font-style: italic;
  transition: color var(--ease);
}
.navbar-links a:hover, .navbar-links a.active {
  color: var(--acc);
}


/* ═══ Dashboard Card Internals ═══ */
.card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-ui);
  font-size: 0.92rem;
  font-weight: 750;
  color: var(--txt);
  padding: 1.1rem 1.4rem 0.75rem;
  border-bottom: 1px solid var(--bdr-inner);
  letter-spacing: 0.01em;
}

.card-title svg {
  color: var(--primary);
  flex-shrink: 0;
}

.heatmap-container,
.timeline-content {
  padding: 1rem 1.4rem;
}

/* Dashboard spacing */
.db-grid {
  gap: 2rem;
}

.db-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.db-left > .card,
.db-right > .card {
  margin-bottom: 0;
}

/* Page-level breathing room below sticky header */
.wrap {
  padding-top: 2.5rem;
}

/* ═══ Consolidated from index.html ═══ */
/* Layout for Executive Dashboard */
.db-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}
.db-left, .db-right {
  min-width: 0;
}
@media (max-width: 960px) {
  .db-grid {
    grid-template-columns: 1fr;
  }
}

.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--sh-card);
  transition: transform var(--ease), box-shadow var(--ease);
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-hover);
}
.metric-lbl {
  font-size: .68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt-lbl);
}
.metric-val {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--txt);
}

/* Heatmap Calendar */
.heatmap-container {
  overflow-x: auto;
  padding: .5rem 0;
}
.heatmap-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 13px);
  grid-auto-columns: 13px;
  gap: 3px;
  width: max-content;
}
.heatmap-cell {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background: #cbd5e1;
  cursor: pointer;
  transition: transform var(--ease);
}
.heatmap-cell:hover {
  transform: scale(1.35);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  z-index: 10;
}
.heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  margin-top: .8rem;
  font-size: .72rem;
  color: var(--txt-3);
}
.legend-box {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* Timeline */
.timeline-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--bdr);
  margin-bottom: 1rem;
}
.tab-btn {
  background: transparent;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--txt-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: visible;
}
.timeline-item {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-sm);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  box-shadow: var(--sh-card);
}
.timeline-time {
  font-family: var(--f-mono);
  font-size: .7rem;
  color: var(--txt-lbl);
  margin-bottom: 4px;
}
.timeline-desc {
  font-weight: 500;
  color: var(--txt);
  line-height: 1.4;
}
.timeline-user {
  font-weight: 750;
  color: var(--primary);
}
.status-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--r-max);
}
.status-pill.approved { background: #dcfce7; color: #15803d; }
.status-pill.submitted { background: #fef3c7; color: #b45309; }
.status-pill.assigned { background: #e0f2fe; color: #0369a1; }

.loader { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.65); backdrop-filter: blur(5px); z-index: 1000; align-items: center; justify-content: center; }
.loader.on { display: flex; }
.spinner { width: 44px; height: 44px; border: 3px solid var(--bdr); border-top-color: var(--acc); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ Consolidated from profile.html ═══ */
.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--bdr-card);
    border-radius: var(--r-lg);
    padding: 2.5rem;
    max-width: 650px;
    margin: 3rem auto;
    box-shadow: var(--sh-card);
  }
  .profile-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--bdr-inner);
    padding-bottom: 1.5rem;
  }
  .avatar {
    width: 64px;
    height: 64px;
    background: var(--primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
  }
  .profile-info h2 {
    margin: 0 0 0.25rem 0;
    color: var(--txt);
    font-size: 1.4rem;
  }
  .profile-info p {
    margin: 0;
    color: var(--txt-2);
    font-size: 0.9rem;
  }
  .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px dashed var(--bdr-inner);
  }
  .detail-row:last-child {
    border-bottom: none;
  }
  .detail-label {
    font-weight: 700;
    color: var(--txt-lbl);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .detail-value {
    color: var(--txt);
    font-weight: 600;
    font-size: 0.95rem;
  }
  .badge-ok {
    background: #dcfce7;
    color: #166534;
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-max);
    font-size: 0.78rem;
    font-weight: 750;
  }
  .badge-err {
    background: #fef3c7;
    color: #92400e;
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-max);
    font-size: 0.78rem;
    font-weight: 750;
  }

/* ═══ Consolidated from work.html ═══ */
/* ── Work Page Specific Styles ── */

/* ── Layout & Controls managed by /static/theme.css ── */

.ctrl-grp { display: flex; flex-direction: column; gap: 4px; }
.ctrl-grp > label {
  font-size: .63rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #94a3b8; font-style: italic;
}

.radio-grp { display: flex; align-items: center; gap: .75rem; background: var(--bg-input); border: 1px solid var(--bdr); padding: 0 .85rem; border-radius: var(--r-sm); height: 35.5px; }
.radio-grp label { display: flex; align-items: center; gap: 4px; cursor: pointer; color: var(--txt); font-weight: 500; font-size: .85rem; text-transform: none; letter-spacing: normal; }
.radio-grp input[type="radio"] { margin: 0; cursor: pointer; width: auto; box-shadow: none; }

.ctrl-search { flex: 1; min-width: 200px; }

/* Script indicator badge in search box */
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap input[type=text] { padding-right: 5.5rem; }
.script-badge {
  position: absolute; right: .5rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--acc-dim); color: var(--acc-txt); border: 1px solid var(--bdr-accent);
  padding: 2px 7px; border-radius: var(--r-max);
  pointer-events: none; transition: background var(--ease), color var(--ease);
}

input[type=text], select {
  background: var(--bg-input);
  border: 1px solid var(--bdr);
  color: var(--txt);
  font-family: var(--f-ui); font-size: .875rem;
  padding: .52rem .85rem;
  border-radius: var(--r-sm);
  outline: none; width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
}

input[type=text]:focus, select:focus {
  border-color: var(--bdr-focus);
  box-shadow: 0 0 0 3px var(--acc-dim);
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 7L1 3h8z' fill='%235a6480'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2rem;
}

.ctrl-right { display: flex; gap: .5rem; margin-left: auto; align-items: flex-end; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .52rem 1.1rem;
  border: none; border-radius: var(--r-sm);
  font-family: var(--f-ui); font-size: .85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all var(--ease);
}

.btn-primary { background: var(--acc); color: #fff; box-shadow: 0 3px 14px var(--acc-glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 20px var(--acc-glow); }

.btn-ghost { background: var(--bg-card2); color: var(--txt-2); border: 1px solid var(--bdr); }
.btn-ghost:hover { background: var(--bdr); color: var(--txt); }

/* ═══════════════════════════════════════════════════════
   INFO BAR
═══════════════════════════════════════════════════════ */
.info-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  padding: .35rem 0; margin-bottom: .9rem;
  font-size: .83rem; color: var(--txt-2);
}

/* ═══════════════════════════════════════════════════════
   RECORD CARDS
═══════════════════════════════════════════════════════ */
.records { display: flex; flex-direction: column; gap: 1.5rem; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
}

/* ─── Badges (top-right corner of card) ─── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--r-max);
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
}

.bdg-rowid { background: var(--surface-container-high); color: var(--txt-3); border: 1px solid var(--bdr-card); font-family: var(--f-mono); }
.bdg-page { background: #ccfbf1; color: #0f766e; border: 1px solid #99f6e4; }

/* ─── Card Footer ─── */
.card-footer {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .45rem .85rem .45rem 1rem;
  background: var(--bg-card2);
  border-top: 1px solid var(--bdr-card);
}
.card-footer-space { flex: 1; }

.btn-del {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: transparent; border: 1px solid rgba(239,68,68,.25);
  color: var(--red); border-radius: var(--r-sm);
  font-size: .72rem; font-weight: 600; font-family: var(--f-ui);
  cursor: pointer; transition: all var(--ease);
}
.btn-del:hover { background: var(--red-dim); border-color: var(--red); }

/* ─── Legacy styles removed: Managed by /static/theme.css ─── */
.inline-inp {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--bdr-focus);
  color: var(--txt);
  font-family: inherit; font-size: inherit;
  padding: 5px 7px;
  border-radius: var(--r-sm);
  outline: none; resize: none;
  display: block; box-shadow: 0 0 0 3px var(--acc-dim);
}

/* ─── Definition section ─── */
.def-section { flex: 1; display: flex; flex-direction: column; background: var(--bg-surface); background: var(--bg-surface); padding: 0 0; }
.def-hdr {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--bdr-inner);
}
.def-hdr-lbl {
  font-size: .8rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--txt); flex: 1;
}

/* Badges top-right in definition header */
.def-hdr-badges { display: flex; gap: .35rem; align-items: center; }

.btn-raw {
  font-size: .7rem; font-weight: 700;
  color: var(--acc-txt);
  background: var(--acc-dim);
  border: 1px solid var(--bdr-accent);
  padding: 4px 12px; border-radius: var(--r-sm);
  cursor: pointer; transition: all var(--ease);
}
.btn-raw:hover, .btn-raw.active { background: var(--acc); color: #fff; border-color: var(--acc); }

.def-body { padding: .85rem 1.25rem; position: relative; flex: 1; background: transparent; }
.def-rendered { max-height: 160px; overflow-y: auto; padding-right: 6px; font-size: 1rem; line-height: 1.8; color: var(--txt-2); cursor: default; }
.def-rendered hw { color: var(--txt); font-weight: 600; font-size: 1.1em; }
.def-rendered d  { font-family: var(--f-deva); color: #0f766e; }
.def-rendered i  { font-style: italic; }
.def-rendered b  { color: var(--txt); }

.def-textarea {
  width: 100%; min-height: 200px;
  background: var(--bg-input);
  border: 1px solid var(--bdr-focus);
  color: var(--txt);
  font-family: var(--f-mono); font-size: .85rem; line-height: 1.55;
  padding: 1rem;
  border-radius: var(--r-sm); resize: vertical; outline: none;
  display: none;
}
.def-hint { font-size: .7rem; color: #94a3b8; font-style: italic; margin-top: .5rem; font-style: italic; }

.def-body.raw-mode .def-rendered { display: none; }
.def-body.raw-mode .def-textarea { display: block; }
.def-body.raw-mode .def-hint     { display: none; }

/* ─── Additional Fields (in right column, collapsible) ─── */
.extra { border-top: 1px solid var(--bdr-card); }
.extra details { background: var(--bg-card2); }
.extra summary {
  display: flex; align-items: center; gap: 5px;
  padding: .6rem 1rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: #94a3b8; font-style: italic; cursor: pointer; user-select: none;
  list-style: none;
}
.extra summary:hover { color: var(--txt-2); }
.extra summary::before { content: '▶'; font-size: .6rem; transition: transform var(--ease); }
.extra details[open] summary::before { transform: rotate(90deg); }

.extra-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  padding: 0 1rem 1.5rem;
}
.ex-cell {
  background: transparent;
  border: none;
  border-left: 3px solid var(--bdr-inner);
  padding: .2rem 0 .2rem 1rem;
  position: relative;
}
.ex-lbl { font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-lbl); margin-bottom: .25rem; }
.ex-val { font-size: .85rem; color: var(--txt-2); line-height: 1.5; word-break: break-word; font-style: italic; }
.ex-cell.editing .ex-val { display: none; }

@keyframes shimmer { 0% { opacity: .3; } 50% { opacity: 1; } 100% { opacity: .3; } }
.saving-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; background: var(--acc); border-radius: 50%; animation: shimmer 1s ease-in-out infinite; }

/* ─── Mobile Control Bar Grid ─── */
@media (max-width: 768px) {
  .ctrl-bar {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0.8rem 0.5rem !important;
    padding: 1rem !important;
  }
  
  #refreshBtn {
    grid-column: 1 / 2;
    grid-row: 1;
    width: 35.5px;
    height: 35.5px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .ctrl-search {
    grid-column: 2 / 6;
    grid-row: 1;
  }
  
  .ctrl-right {
    grid-column: 6 / 7;
    grid-row: 1;
    margin: 0 !important;
    width: 100%;
  }
  
  .ctrl-right .btn {
    width: 100%;
    height: 35.5px;
    justify-content: center;
    padding: 0 !important;
  }
  
  .ctrl-bar > .ctrl-grp:nth-child(3) {
    grid-column: 1 / 4;
    grid-row: 2;
  }
  
  .ctrl-bar > .ctrl-grp:nth-child(4) {
    grid-column: 4 / 7;
    grid-row: 2;
  }
  
  .ctrl-bar > .ctrl-grp:nth-child(5) {
    grid-column: 1 / 4;
    grid-row: 3;
  }
  
  .ctrl-bar > .ctrl-grp:nth-child(6) {
    grid-column: 4 / 5;
    grid-row: 3;
  }
  
  .ctrl-bar > .ctrl-grp:nth-child(7) {
    grid-column: 5 / 7;
    grid-row: 3;
  }
}

/* ═══════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════ */
.pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.pager-info { font-size: .82rem; color: var(--txt-2); }
.pager-ctrl { display: flex; align-items: center; gap: .28rem; flex-wrap: wrap; }
.pg-btn {
  min-width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bdr); background: var(--bg-surface); color: var(--txt-2);
  border-radius: var(--r-sm); font-size: .82rem; font-weight: 500; cursor: pointer;
}
.pg-btn:hover:not(:disabled) { background: var(--bdr); color: var(--txt); }
.pg-btn.cur { background: var(--acc); color: #fff; border-color: var(--acc); }
.pg-btn:disabled { opacity: .3; cursor: default; }
.pg-ellipsis { color: #94a3b8; font-style: italic; padding: 0 3px; }

/* ═══════════════════════════════════════════════════════
   EMPTY STATE & LOADER & TOAST
═══════════════════════════════════════════════════════ */
.empty { text-align: center; padding: 5rem 2rem; color: #94a3b8; font-style: italic; }
.empty-icon { font-size: 3rem; margin-bottom: .9rem; opacity: .5; }
.empty-title { font-size: 1.1rem; font-weight: 600; color: var(--txt-2); margin-bottom: .4rem; }

.loader { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.65); backdrop-filter: blur(5px); z-index: 1000; align-items: center; justify-content: center; }
.loader.on { display: flex; }
.spinner { width: 44px; height: 44px; border: 3px solid var(--bdr); border-top-color: var(--acc); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toasts { position: fixed; bottom: 2rem; right: 2rem; z-index: 2000; display: flex; flex-direction: column; gap: .45rem; pointer-events: none; }
.toast { background: var(--bg-card); border: none; border-top: 1px solid var(--bdr-card); border-bottom: 1px solid var(--bdr-card); border-radius: var(--r); padding: .65rem .95rem; font-size: .83rem; color: var(--txt); box-shadow: var(--sh-hover); display: flex; align-items: center; gap: .55rem; animation: toastIn .2s ease; max-width: 310px; pointer-events: auto; }
@keyframes toastIn { from { transform: translateX(110%); opacity: 0; } }
@keyframes toastOut { to { transform: translateX(110%); opacity: 0; } }
.toast-ico { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; }
.toast.ok { border-color: #10b981; } .toast.ok .toast-ico { background: #d1fae5; color: #059669; }
.toast.err { border-color: #dc2626; } .toast.err .toast-ico { background: #fee2e2; color: #dc2626; }
.toast.info { border-color: var(--acc); } .toast.info .toast-ico { background: var(--acc-dim); color: var(--acc); }

/* ═══════════════════════════════════════════════════════
   LEGEND FOOTER
═══════════════════════════════════════════════════════ */
.legend-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  padding: 1rem;
  border-top: 1px solid var(--bdr);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--txt-2);
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}
.legend-item { display: flex; align-items: center; gap: 0.4rem; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.15); }

main.container { padding-bottom: 5rem; /* space for footer */ }

/* ═══════════════════════════════════════════════════════
   MODAL (kept hidden but functional)
═══════════════════════════════════════════════════════ */
.modal-bg { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.72); backdrop-filter: blur(7px); z-index: 1500; align-items: center; justify-content: center; padding: 1rem; }
.modal-bg.on { display: flex; }
.modal { background: var(--bg-card); border: 1px solid var(--bdr); border-radius: var(--r-xl); padding: 2rem; width: 100%; max-width: 680px; max-height: 90vh; overflow-y: auto; box-shadow: var(--sh-hover); overscroll-behavior: contain; }
.modal-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.modal-title { font-size: 1.15rem; font-weight: 700; }
.modal-close { background: transparent; border: none; color: var(--txt-2); font-size: 1.1rem; cursor: pointer; padding: 4px; border-radius: 4px; }
.modal-close:hover { color: var(--txt); }
.modal-form { display: grid; grid-template-columns: repeat(2,1fr); gap: .85rem; }
.f-grp { display: flex; flex-direction: column; gap: 4px; }
.f-grp.span2 { grid-column: 1/-1; }
.f-grp label { font-size: .63rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #94a3b8; font-style: italic; }
.f-grp input, .f-grp textarea { background: var(--bg-input); border: 1px solid var(--bdr); color: var(--txt); font-family: var(--f-ui); padding: .55rem .85rem; border-radius: var(--r-sm); outline: none; }
.f-grp input:focus, .f-grp textarea:focus { border-color: var(--bdr-focus); box-shadow: 0 0 0 3px var(--acc-dim); }
.f-grp textarea { resize: vertical; min-height: 80px; }
.modal-ftr { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--bdr); }

/* Navbar */
.navbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem 2rem;
  box-shadow: var(--sh-card);
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--acc);
  letter-spacing: -.02em;
}
.navbar-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.navbar-links a {
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: #94a3b8; font-style: italic;
  transition: color var(--ease);
}
.navbar-links a:hover, .navbar-links a.active {
  color: var(--acc);
}

/* Site Footer managed by theme.css */

/* Max-height and scrolling to prevent definition boxes breaking grid */
.def-rendered {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 6px;
}
.compact-card .def-rendered {
  max-height: 112px;
}
.ex-val {
  max-height: 120px;
  overflow-y: auto;
  padding-right: 6px;
}





/* Unicode modal items */
.uni-item {
  display: grid;
  grid-template-columns: 50px 100px 1fr;
  align-items: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--bdr-inner);
  font-size: 0.82rem;
}
.uni-item:last-child {
  border-bottom: none;
}
.uni-glyph {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
}
.uni-code {
  font-family: var(--f-mono);
  color: var(--txt-lbl);
  font-size: 0.75rem;
}
.uni-name {
  font-weight: 600;
  color: var(--txt-2);
  text-transform: uppercase;
}
.uni-trigger-btn {
  font-size: .62rem;
  padding: 1px 5px;
  border: 1px solid var(--bdr);
  border-radius: 3px;
  background: var(--bg-card2);
  color: var(--txt-lbl);
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: all var(--ease);
  margin-left: 0.4rem;
}
.uni-trigger-btn:hover {
  background: var(--acc-dim);
  color: var(--acc-txt);
  border-color: var(--bdr-accent);
}


/* Calligraphy Grid & Unicode Card Layout */
.calligraphy-grid {
  font-size: 3.5rem;
  text-align: center;
  padding: 1.8rem 1rem;
  background-color: var(--bg-card2);
  background-image: 
    linear-gradient(rgba(22, 163, 74, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 163, 74, 0.12) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px dashed var(--bdr-card);
  border-radius: var(--r);
  margin-bottom: 1.5rem;
  font-family: var(--f-urdu), var(--f-deva), serif;
  position: relative;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
}
.calligraphy-grid::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 62%;
  height: 1px;
  border-top: 1px dashed #ef4444; /* red baseline indicator */
  opacity: 0.6;
}
.uni-grid-container {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  padding: 1.2rem;
  background: var(--bg-card2);
  border: 1px solid var(--bdr-inner);
  border-radius: var(--r);
}
.uni-char-card {
  flex: 0 0 115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  padding: 0.8rem;
  box-shadow: var(--sh-card);
  transition: transform var(--ease), border-color var(--ease);
}
.uni-char-card:hover {
  transform: translateY(-2px);
  border-color: var(--acc);
}
.uni-char-index {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--txt-lbl);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.uni-char-glyph {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0.3rem 0;
  line-height: 1.1;
}
.uni-char-code {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--acc-txt);
  background: var(--acc-dim);
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 0.4rem;
}
.uni-char-name {
  font-size: 0.58rem;
  color: #94a3b8; font-style: italic;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 24px;
}



body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wrap {
  flex: 1;
}
/* Search History Dropdown Autocomplete */
.search-wrap {
  position: relative;
}
.search-history-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-hover);
  z-index: 1025;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 3px;
  display: none;
  text-align: left;
}
.search-history-item {
  padding: 8px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--txt-main);
  transition: background var(--ease);
}
.search-history-item:hover {
  background: var(--bg-card2);
  color: var(--acc);
}

/* ── Group Section Headers ── */
.group-header {
  background: linear-gradient(90deg, #f7fee7 33%, #ecfdf5 33% 66%, #fffbeb 66%);
  color: #dc2626;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 18px;
  user-select: none;
  overflow: visible;
  border: none;
}
/* Horizontal line — terminates exactly at the tick positions
   For original-header: spans from middle of ASCII (16.67%) to middle of Hindi (83.33%)
   For modernized-header: spans from middle of ASCII (16.67%) to middle of Hindi (83.33%)
*/
.group-header.original-header::before {
  content: '';
  position: absolute;
  left: 16.67%;
  right: 16.67%;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.group-header.modernized-header::before {
  content: '';
  position: absolute;
  left: 16.67%;
  right: 16.67%;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

/* ── Hero category labels pushed onto Urdu headwords ── */
.hero-header-label {
  position: absolute;
  z-index: 10;
  padding: 2px 0.5rem;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  background-color: #dc2626;
  color: #fff;
  border-radius: 2px;
  line-height: 1.2;
}
.classic-hero .original-label {
  top: 0;
  right: 0;
  /*transform: translateY(-50%);*/
}
.classic-hero .original-label::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 9px;
  background-color: #dc2626;
  opacity: 0.55;
}

.modern-hero .modernized-label {
  bottom: 0;
  left: 0;
  /*transform: translateY(50%);*/
}
.modern-hero .modernized-label::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 9px;
  background-color: #dc2626;
  opacity: 0.55;
}

/* ── Unicode Popover Dropdown ── */
.uni-popover {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-hover);
  z-index: 1025;
  min-width: 220px;
  margin-top: 5px;
  text-align: left;
}
.uni-popover.open {
  display: block;
}
.uni-popover-item {
  padding: 8px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--txt-main);
  transition: background var(--ease);
}
.uni-popover-item:hover {
  background: var(--bg-card2);
  color: var(--acc);
}

/* ── Bracket ticks ── */
.group-header-tick {
  position: absolute;
  width: 1px;
  background: currentColor;
  opacity: 0.55;
}
.group-header .tick-up {
  top: 0;
  height: 50%;
}
.group-header .tick-down {
  top: 50%;
  height: 50%;
}

/* ORIGINAL header: background matches the adjacent top script-grid cells */
.group-header.original-header {
  /*background: linear-gradient(90deg, #f7fee7 33%, #ecfdf5 33% 66%, #fffbeb 66%);
  color: #dc2626;*/
  margin-bottom: 0;
}
.group-header.modernized-header {
  margin-top: 0;
}
/* ── Collapsible Print Page Snippet Drawer ── */
.page-snippet-drawer {
  display: none;
  flex-direction: column;
  background: #1e293b;
  border-top: 1px solid var(--bdr-card);
  color: #f8fafc;
  overflow: hidden;
}
.snippet-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #0f172a;
  border-bottom: 1px solid #334155;
  font-family: var(--f-ui);
}
.snippet-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #cbd5e1;
}
.snippet-btn-link {
  background: #0d9488;
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  display: inline-flex;
  align-items: center;
}
.snippet-btn-link:hover {
  background: #0f766e;
}
.snippet-pad {
  padding: 14px 0;
  background: #faf8f5;  /* same as viewport background — seamless breathing space */
}
.snippet-viewport {
  position: relative;
  width: 100%;
  height: 200px; /* initial fallback; alignSnippet sets the real height */
  overflow: hidden;
  background: #faf8f5;
}
.snippet-scroller {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.snippet-img-container {
  position: relative;
  width: 100%;
}
.snippet-img {
  display: block;
  width: 200%;
  height: auto;
  margin-left: 0;
}

@media (max-width: 600px) {
  .btn-text-mobile-hide { display: none; }
}

/* ═══ Consolidated from docs\errata.html ═══ */
.errata-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
  }
  
  .errata-header {
    background: var(--bg-card);
    border: 1px solid var(--bdr-card);
    border-radius: var(--r-lg);
    padding: 2.5rem;
    box-shadow: var(--sh-card);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
  }
  .errata-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #dc2626 0%, #d97706 50%, var(--primary) 100%);
  }

  .breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--txt-3);
    margin-bottom: 1rem;
  }
  .breadcrumbs a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
  }
  .breadcrumbs a:hover {
    text-decoration: underline;
  }

  .errata-title {
    font-family: var(--f-heading);
    font-size: 2.2rem;
    color: var(--txt);
    margin-bottom: 0.5rem;
  }
  .errata-subtitle {
    font-size: 1.05rem;
    color: var(--txt-2);
    line-height: 1.6;
    max-width: 850px;
  }

  .script-callout-banner {
    margin-top: 1.5rem;
    padding: 1.2rem 1.5rem;
    background: var(--surface-container-low);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .script-callout-text {
    font-size: 0.95rem;
    color: var(--txt-2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .script-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--r);
    background: var(--primary);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ease), transform var(--ease);
  }
  .script-btn:hover {
    background: var(--primary-container);
    transform: translateY(-1px);
    color: #ffffff;
  }

  /* Section Styling */
  .errata-section {
    background: var(--bg-card);
    border: 1px solid var(--bdr-card);
    border-radius: var(--r-lg);
    padding: 2rem;
    box-shadow: var(--sh-card);
    margin-bottom: 2rem;
  }
  .errata-section-title {
    font-family: var(--f-heading);
    font-size: 1.5rem;
    color: var(--txt);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .errata-section-desc {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--txt-2);
    margin-bottom: 1.5rem;
  }

  /* Case Study Box */
  .case-study-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
    margin-top: 1rem;
  }
  .case-card {
    border: 1px solid var(--bdr-inner);
    border-radius: var(--r);
    padding: 1.5rem;
    background: var(--surface-container-lowest);
  }
  .case-card.err {
    border-left: 4px solid #dc2626;
    background: #fef2f2;
  }
  .case-card.correct {
    border-left: 4px solid #16a34a;
    background: #f0fdf4;
  }
  .case-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: var(--r-sm);
    display: inline-block;
    margin-bottom: 0.8rem;
  }
  .case-card.err .case-badge {
    background: #fee2e2;
    color: #991b1b;
  }
  .case-card.correct .case-badge {
    background: #dcfce7;
    color: #166534;
  }
  .case-urdu {
    font-family: var(--f-urdu);
    font-size: 2.4rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    direction: rtl;
  }
  .case-card.err .case-urdu {
    color: #991b1b;
  }
  .case-card.correct .case-urdu {
    color: #166534;
  }
  .case-details {
    font-size: 0.9rem;
    color: var(--txt-2);
    line-height: 1.6;
  }

  /* Methodology Steps */
  .method-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
    margin-top: 1.2rem;
  }
  .method-step-card {
    background: var(--surface-container-low);
    border: 1px solid var(--bdr-inner);
    border-radius: var(--r);
    padding: 1.2rem;
  }
  .method-step-num {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary);
    margin-bottom: 0.4rem;
  }
  .method-step-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--txt);
    margin-bottom: 0.5rem;
  }
  .method-step-desc {
    font-size: 0.9rem;
    color: var(--txt-2);
    line-height: 1.5;
  }

  /* Category Filter & Table */
  .filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.2rem;
  }
  .tab-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .tab-btn {
    padding: 0.45rem 0.9rem;
    border-radius: var(--r);
    border: 1px solid var(--bdr);
    background: var(--bg-card);
    color: var(--txt-2);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ease);
  }
  .tab-btn:hover {
    background: var(--surface-container-high);
    color: var(--txt);
  }
  .tab-btn.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
  }
  .table-search-input {
    padding: 0.45rem 0.8rem;
    border-radius: var(--r);
    border: 1px solid var(--bdr);
    font-size: 0.9rem;
    background: var(--bg-input);
    color: var(--txt);
    min-width: 240px;
  }

  .data-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--bdr);
    border-radius: var(--r);
  }
  .errata-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    text-align: left;
  }
  .errata-table th {
    background: var(--surface-container-low);
    padding: 0.8rem 1rem;
    font-weight: 600;
    color: var(--txt);
    border-bottom: 1px solid var(--bdr);
    white-space: nowrap;
  }
  .errata-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--bdr-inner);
    color: var(--txt-2);
    vertical-align: middle;
  }
  .errata-table tr:hover td {
    background: var(--bg-hover);
  }
  .hw-urdu {
    font-family: var(--f-urdu);
    font-size: 1.4rem;
    direction: rtl;
    display: inline-block;
  }
  .hw-dev {
    font-family: var(--f-deva);
    font-size: 1.05rem;
    color: #166534;
  }
  .rowid-link {
    font-family: var(--f-mono);
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
  }
  .rowid-link:hover {
    text-decoration: underline;
  }
  .cat-pill {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: var(--r-sm);
    font-size: 0.75rem;
    font-weight: 600;
  }
  .cat-pill.initial { background: #fee2e2; color: #991b1b; }
  .cat-pill.medial { background: #fef3c7; color: #92400e; }
  .cat-pill.morpheme { background: #e0e7ff; color: #3730a3; }
  .cat-pill.roman { background: #f3e8ff; color: #6b21a8; }

/* ═══ Consolidated from docs\index.html ═══ */
.docs-container {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
  }
  .docs-header {
    background: var(--bg-card);
    border: 1px solid var(--bdr-card);
    border-radius: var(--r-lg);
    padding: 2rem 2.2rem;
    box-shadow: var(--sh-card);
    margin-bottom: 2.2rem;
    position: relative;
    overflow: hidden;
  }
  .docs-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  }
  .docs-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.8rem;
    flex-wrap: wrap;
  }
  .docs-header-text {
    flex: 1;
    min-width: 280px;
  }
  .docs-title {
    font-family: var(--f-heading);
    font-size: 2.2rem;
    color: var(--txt);
    margin-bottom: 0.5rem;
  }
  .docs-subtitle {
    font-size: 1.02rem;
    color: var(--txt-2);
    line-height: 1.6;
    max-width: 820px;
  }
  .docs-header-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
  }
  .docs-abbrev-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--bg);
    border: 1.5px solid var(--bdr);
    color: var(--txt);
    padding: 0.75rem 1.25rem;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    box-shadow: var(--sh-card);
    transition: all var(--ease);
  }
  .docs-abbrev-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--sh-hover);
  }
  .docs-abbrev-btn svg {
    color: var(--primary);
  }

  .section-heading {
    font-family: var(--f-heading);
    font-size: 1.5rem;
    color: var(--txt);
    margin-top: 1rem;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .docs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
  }

  @media (max-width: 1100px) {
    .docs-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.25rem;
    }
  }

  @media (max-width: 600px) {
    .docs-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .docs-header {
      padding: 1.4rem;
    }
  }

  .doc-card {
    background: var(--bg-card);
    border: 1px solid var(--bdr-card);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    box-shadow: var(--sh-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    text-decoration: none;
    color: inherit;
    position: relative;
  }
  .doc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-hover);
    border-color: var(--primary);
  }
  .doc-card.featured {
    border-left: 4px solid var(--secondary);
  }
  .doc-card.alert-card {
    border-left: 4px solid #dc2626;
  }
  .doc-card.comparative {
    border-left: 4px solid #7c3aed;
  }
  
  .doc-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.55rem;
    border-radius: var(--r-sm);
    width: fit-content;
    margin-bottom: 0.75rem;
  }
  .doc-card-badge.errata {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
  }
  .doc-card-badge.methodology {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
  }
  .doc-card-badge.comparative {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
  }
  .doc-card-badge.guide {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
  }
  .doc-card-badge.orthography {
    background: #fefce8;
    color: #854d0e;
    border: 1px solid #fef08a;
  }
  .doc-card-badge.ref {
    background: #faf5ff;
    color: #6b21a8;
    border: 1px solid #e9d5ff;
  }

  .doc-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    line-height: 1.3;
  }
  .doc-card-desc {
    font-size: 0.88rem;
    color: var(--txt-2);
    line-height: 1.55;
    margin-bottom: 1.25rem;
    flex-grow: 1;
  }
  .doc-card-footer {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary);
  }

  .scripts-table-card {
    background: var(--bg-card);
    border: 1px solid var(--bdr-card);
    border-radius: var(--r-lg);
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--sh-card);
    margin-bottom: 2rem;
  }
  .scripts-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
    min-width: 100%;
  }
  .scripts-table th {
    background: var(--surface-container-low);
    padding: 0.9rem 1.2rem;
    font-weight: 600;
    color: var(--txt);
    border-bottom: 1px solid var(--bdr-card);
    white-space: nowrap;
  }
  .scripts-table td {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--bdr-inner);
    color: var(--txt-2);
    vertical-align: middle;
  }
  .scripts-table tr:last-child td {
    border-bottom: none;
  }
  .scripts-table tr:hover td {
    background: var(--bg-hover);
  }
  .script-name-link {
    font-family: var(--f-mono);
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    word-break: break-word;
  }
  .script-name-link:hover {
    text-decoration: underline;
    color: var(--secondary);
  }
  .view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--r);
    background: var(--surface-container-high);
    border: 1px solid var(--bdr-card);
    color: var(--txt);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--ease);
    white-space: nowrap;
  }
  .view-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
  }

  @media (max-width: 680px) {
    .scripts-table-card {
      border-radius: var(--r-md);
    }
    .scripts-table thead {
      display: none;
    }
    .scripts-table,
    .scripts-table tbody,
    .scripts-table tr,
    .scripts-table td {
      display: block;
      width: 100%;
    }
    .scripts-table tr {
      padding: 1.1rem;
      border-bottom: 1px solid var(--bdr-inner);
    }
    .scripts-table tr:last-child {
      border-bottom: none;
    }
    .scripts-table td {
      padding: 0.3rem 0;
      border: none;
    }
    .scripts-table td:first-child {
      padding-bottom: 0.4rem;
    }
    .scripts-table td:last-child {
      margin-top: 0.75rem;
      text-align: left !important;
    }
  }

/* ═══ Consolidated from docs\script_viewer.html ═══ */
.viewer-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
  }

  .breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--txt-3);
    margin-bottom: 1rem;
  }
  .breadcrumbs a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
  }
  .breadcrumbs a:hover {
    text-decoration: underline;
  }

  .viewer-header {
    background: var(--bg-card);
    border: 1px solid var(--bdr-card);
    border-radius: var(--r-lg);
    padding: 1.8rem 2rem;
    box-shadow: var(--sh-card);
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
  }
  .viewer-title-group h1 {
    font-family: var(--f-mono);
    font-size: 1.6rem;
    color: var(--txt);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .viewer-desc {
    font-size: 0.95rem;
    color: var(--txt-2);
    margin-bottom: 0.8rem;
  }
  .viewer-meta-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: var(--r-sm);
    background: var(--surface-container-high);
    color: var(--txt-2);
    border: 1px solid var(--bdr-inner);
  }
  .meta-pill.secure {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
  }

  .viewer-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
  }
  .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: var(--r);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--bdr);
    background: var(--bg-card);
    color: var(--txt);
    transition: all var(--ease);
  }
  .action-btn:hover {
    background: var(--surface-container-high);
  }
  .action-btn.primary {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
  }
  .action-btn.primary:hover {
    background: var(--primary-container);
  }

  /* Code Container */
  .code-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-card);
  }
  .code-card-header {
    background: #1e293b;
    padding: 0.6rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 0.82rem;
    color: #94a3b8;
    border-bottom: 1px solid #334155;
  }
  .code-window-dots {
    display: flex;
    gap: 6px;
  }
  .code-window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .code-window-dot.r { background: #ef4444; }
  .code-window-dot.y { background: #f59e0b; }
  .code-window-dot.g { background: #10b981; }

  .code-viewport {
    display: flex;
    overflow-x: auto;
    font-family: var(--f-mono);
    font-size: 0.88rem;
    line-height: 1.6;
    padding: 1rem 0;
  }
  .line-numbers {
    user-select: none;
    text-align: right;
    padding: 0 1rem 0 1.2rem;
    color: #475569;
    border-right: 1px solid #334155;
  }
  .code-content {
    flex-grow: 1;
    padding: 0 1.5rem;
    color: #e2e8f0;
    white-space: pre;
  }


/* ═══ CARD FOOTER: BUTTON & BADGE SYSTEM ═══ */

/* "Additional Fields" button — solid background, same rect shape as Platts reader */
.card-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: .7rem;
  font-weight: 700;
  font-family: var(--f-ui);
  padding: 3px 12px;
  height: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--bdr-card);
  background: var(--surface-container-high);
  color: var(--txt-2);
  cursor: pointer;
  transition: all var(--ease);
}
.card-toggle-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.card-footer-badges {
  display: flex;
  gap: .35rem;
  align-items: center;
}

/* "Platts p. N" link — teal-tinted action button, distinct from badges and ghost buttons */
.btn-platts-reader {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  font-family: var(--f-ui);
  font-size: 0.7rem;
  font-weight: 700;
  color: #0f766e;
  background: #ccfbf1;
  border: 1px solid #99f6e4;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ease);
  letter-spacing: 0.01em;
}
.btn-platts-reader:hover {
  background: #0d9488;
  color: #ffffff;
  border-color: #0d9488;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.25);
}
.btn-platts-reader svg {
  opacity: 0.7;
}
.btn-platts-reader:hover svg {
  opacity: 1;
}

/* Additional Fields drawer: white background to distinguish from card body */
.extra-grid-panel {
  display: none;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.2rem 1.5rem;
  background: var(--bg-card);
  border-top: 2px solid var(--bdr-inner);
}

.panel-lights-group {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.panel-light-divider {
  width: 1px;
  height: 16px;
  background: rgba(0, 0, 0, 0.18);
  display: inline-block;
  margin: 0 1px;
}



/* ═══ METHODOLOGY SCOPE & HOURGLASS ANIMATION ═══ */
.mandatory-scope-section {
  background: var(--surface-container-low);
  border: 1px solid var(--bdr-inner);
  border-radius: var(--r);
  padding: 1.2rem;
  margin-bottom: 1.5rem;
}

.mandatory-scope-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.mandatory-scope-badge {
  font-family: var(--f-ui);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--primary);
  text-transform: uppercase;
}

.mandatory-scope-subtitle {
  font-size: 0.8rem;
  color: var(--txt-3);
}

.scope-item-locked {
  background: var(--bg-card) !important;
  opacity: 0.92;
  border-left: 3px solid var(--primary) !important;
}

.rule-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rule-title-text {
  font-weight: 650;
  color: var(--txt);
  font-size: 0.88rem;
}

.rule-subtext {
  font-size: 0.76rem;
  color: var(--txt-3);
}

.scope-phase-hdr {
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary);
  margin: 1rem 0 0.5rem;
  padding-left: 0.2rem;
}

@keyframes hourglassFlip {
  0% { transform: rotate(0deg); }
  45% { transform: rotate(180deg); }
  50% { transform: rotate(180deg); }
  95% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

.hourglass-anim {
  display: inline-block;
  font-size: 2.5rem;
  line-height: 1;
  animation: hourglassFlip 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  margin-bottom: 0.85rem;
}

.exec-busy-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0;
}

.exec-busy-status {
  font-weight: 750;
  font-size: 1rem;
  color: var(--txt);
  margin-bottom: 0.3rem;
}

.exec-busy-subtext {
  font-size: 0.82rem;
  color: var(--txt-3);
  margin-bottom: 1.4rem;
}

.exec-step-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  width: 100%;
}

.exec-step-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.82rem;
  color: var(--txt-3);
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-sm);
  background: var(--surface-container-low);
  border: 1px solid var(--bdr-inner);
  transition: all 0.25s ease;
}

.exec-step-item.active {
  border-color: var(--primary);
  background: var(--surface-container-high);
  font-weight: 700;
  color: var(--primary);
}

.exec-step-item.done {
  border-color: var(--acc);
  background: var(--acc-dim);
  color: var(--acc-txt);
  font-weight: 600;
}

.exec-success-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--acc-dim);
  border: 1px solid var(--acc);
  border-radius: var(--r);
  margin-bottom: 1.25rem;
}

.exec-success-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acc);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.exec-success-title {
  font-weight: 750;
  color: var(--acc-txt);
  font-size: 0.92rem;
}

.exec-metrics-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.exec-metric-box {
  background: var(--surface-container-low);
  border: 1px solid var(--bdr-inner);
  border-radius: var(--r-sm);
  padding: 0.85rem;
  text-align: center;
}

.exec-m-val {
  font-family: var(--f-mono);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
}

.exec-m-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--txt-lbl);
  margin-top: 0.2rem;
}

.exec-audit-note {
  font-size: 0.78rem;
  color: var(--txt-3);
  line-height: 1.4;
  text-align: center;
  padding: 0 0.5rem;
}


/* ═══ METHODOLOGY STAGES BREAKDOWN ═══ */
.scope-stages-container {
  padding: 1.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.scope-stage-section {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.scope-stage-hdr-block {
  border-bottom: 1px solid var(--bdr-inner);
  padding-bottom: 0.6rem;
}

.scope-stage-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.25rem;
}

.scope-stage-tag {
  font-family: var(--f-ui);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--surface-container-high);
  color: var(--primary);
  padding: 2px 7px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bdr-inner);
}

.scope-stage-title {
  font-family: var(--f-ui);
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--txt);
  margin: 0;
}

.scope-stage-desc {
  font-size: 0.82rem;
  color: var(--txt-3);
  margin: 0;
}

.rule-item-mandatory {
  border-left: 3px solid var(--primary);
}


/* ═══ REFINED WORKBENCH HUB RULES STYLING ═══ */
.work-hub-card {
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh);
}

.work-hub-card .work-hub-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.75rem 2rem 1.25rem;
  border-bottom: 1px solid var(--bdr-inner);
  margin-bottom: 0;
  background: var(--surface-container-low);
}

.work-rule-list {
  padding: 1.5rem 2rem 2rem;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.work-rule-item-box {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--bdr-card);
  border-radius: var(--r);
  padding: 1.1rem 1.4rem;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}

.work-rule-item-box:hover {
  border-color: var(--acc);
  background: var(--surface-container-lowest);
  box-shadow: var(--sh);
}

/* Square Card Header for Rule # and Count */
.rule-square-badge {
  width: 88px;
  height: 88px;
  min-width: 88px;
  background: var(--surface-container-low);
  border: 1px solid var(--bdr-inner);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.4rem 0.25rem;
  box-sizing: border-box;
  flex-shrink: 0;
}

.rule-badge-tag {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--txt-3);
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.rule-badge-count {
  font-family: var(--f-mono);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}

.rule-badge-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--txt-lbl);
  margin-top: 0.1rem;
}

.rule-main {
  flex: 1;
  min-width: 0;
}

.rule-name-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.rule-name-bold {
  font-family: var(--f-ui);
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--txt);
}

.rule-desc-text {
  font-size: 0.84rem;
  color: var(--txt-3);
  margin: 0 0 0.65rem;
  line-height: 1.4;
}

.work-rule-meta-row {
  display: flex;
  gap: 0.75rem;
  font-size: 0.76rem;
  color: var(--txt-3);
}

.work-rule-meta-tag {
  background: var(--surface-container-low);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bdr-inner);
}

.work-rule-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Identical Action Buttons */
.btn-rule-action {
  height: 36px;
  min-width: 86px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--f-ui);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  transition: all var(--ease);
}

.btn-rule-action.btn-secondary {
  background: var(--surface-container-high);
  color: var(--txt);
  border: 1px solid var(--bdr-inner);
}

.btn-rule-action.btn-secondary:hover {
  background: var(--surface-container-highest);
  border-color: var(--bdr-card);
}

.btn-rule-action.btn-primary {
  background: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary);
}

.btn-rule-action.btn-primary:hover {
  background: var(--acc-txt);
  border-color: var(--acc-txt);
  color: #ffffff;
}


/* ═══ DUAL CHECKBOX STACK (Auto-Edit & Auto-Review) ═══ */
.scope-ctrl-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  flex-shrink: 0;
  min-width: 110px;
}

.scope-ctrl-lbl {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 650;
  font-family: var(--f-ui);
  color: var(--txt);
  cursor: pointer;
  user-select: none;
}

.scope-ctrl-lbl input[type="checkbox"] {
  cursor: pointer;
}


/* ═══ ERRATA INSPECTION MODAL ═══ */
.errata-modal-box {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  max-width: 680px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-hover);
  border: 1px solid var(--bdr-card);
}

.errata-subtitle {
  font-size: 0.84rem;
  color: var(--txt-3);
  margin: 0 0 1rem;
}

.errata-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--bdr-inner);
  border-radius: var(--r-sm);
  padding: 0.75rem;
  background: var(--surface-container-low);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.errata-item-row {
  background: var(--bg-card);
  border: 1px solid var(--bdr-inner);
  border-radius: var(--r-sm);
  padding: 0.75rem 0.9rem;
}

.errata-item-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.errata-row-id {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  font-weight: 750;
  color: var(--primary);
}

.errata-hw-change {
  font-family: var(--f-urdu);
  font-size: 1.1rem;
  color: var(--txt);
  direction: rtl;
}

.errata-def-preview {
  font-size: 0.78rem;
  color: var(--txt-3);
  line-height: 1.35;
  font-family: var(--f-ui);
}

.exec-errata-action-row {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}


/* ═══ DB REPORT TABLE & EXEC MODAL ENHANCEMENTS ═══ */
.db-report-table-wrap {
  flex: 1;
  overflow-y: auto;
  max-height: 480px;
  border: 1px solid var(--bdr-inner);
  border-radius: var(--r-sm);
  background: var(--bg-card);
}

.db-report-summary-bar {
  padding: 0.65rem 0.9rem;
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--bdr-inner);
  font-size: 0.82rem;
  color: var(--txt);
}

.db-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  font-family: var(--f-ui);
}

.db-report-table th {
  position: sticky;
  top: 0;
  background: var(--surface-container-high);
  color: var(--txt-3);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.55rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--bdr-inner);
  z-index: 2;
}

.db-report-table td {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--bdr-inner);
  color: var(--txt);
}

.dbr-char {
  font-family: var(--f-urdu);
  font-size: 1.25rem;
  direction: rtl;
  width: 50px;
}

.dbr-code {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  width: 80px;
}

.dbr-name {
  color: var(--txt-2);
  font-size: 0.76rem;
}

.dbr-count {
  font-family: var(--f-mono);
  font-weight: 700;
  text-align: right;
  width: 90px;
}

.scope-mode-pill {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 650;
  background: var(--surface-container-high);
  color: var(--txt-3);
  margin-right: 0.35rem;
}

.scope-mode-pill.pill-auto {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.scope-mode-pill.pill-rev {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

/* Inline spinner for button loading states */
.spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

/* First scope-phase-hdr in container needs no extra top margin */
#scopingRulesContainer > .scope-phase-hdr:first-child {
  margin-top: 0.25rem;
}

/* Database upload UI */
.db-upload-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.db-file-name {
  font-size: 0.85rem;
  color: var(--txt-2, #64748b);
  font-family: var(--font-mono, monospace);
  background: var(--bg-hover, #f1f5f9);
  padding: 0.35rem 0.65rem;
  border-radius: var(--r-sm, 4px);
  border: 1px solid var(--bdr, #e2e8f0);
}

.db-upload-status {
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-sm, 4px);
  font-size: 0.85rem;
  font-weight: 500;
}

.db-upload-status.info {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.db-upload-status.success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.db-upload-status.error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* ── Stage 1 Errata & False Positive Curation Modal ────────────────────── */
.errata-modal-wide {
  max-width: 900px !important;
  width: 92% !important;
  max-height: 85vh !important;
  display: flex;
  flex-direction: column;
}

.errata-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--bdr, #e2e8f0);
}

.errata-search-box input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--bdr, #cbd5e1);
  border-radius: var(--r-md, 6px);
  font-size: 0.9rem;
  background: var(--bg-card, #ffffff);
  color: var(--txt, #1e293b);
  outline: none;
}

.errata-search-box input:focus {
  border-color: var(--clr-pri, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.errata-filter-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.errata-pill {
  background: var(--bg-hover, #f1f5f9);
  border: 1px solid var(--bdr, #e2e8f0);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--txt-2, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
}

.errata-pill:hover {
  background: var(--bdr, #e2e8f0);
  color: var(--txt, #0f172a);
}

.errata-pill.active {
  background: var(--clr-pri, #1e293b);
  color: #ffffff;
  border-color: var(--clr-pri, #1e293b);
}

.errata-pill.pill-excluded.active {
  background: #dc2626;
  border-color: #dc2626;
}

.errata-list-container {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-right: 0.35rem;
  min-height: 250px;
  max-height: calc(85vh - 240px);
}

.errata-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--bdr, #e2e8f0);
  border-radius: var(--r-md, 8px);
  padding: 0.9rem 1.1rem;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.errata-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.errata-card.is-excluded {
  background: #fffbeb;
  border-color: #fde68a;
  opacity: 0.92;
}

.errata-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f1f5f9;
}

.errata-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.errata-row-num {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--txt, #0f172a);
}

.errata-page-tag, .errata-rom-tag {
  font-size: 0.8rem;
  color: var(--txt-2, #64748b);
  background: #f8fafc;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

.errata-cat-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-ocr {
  background: #ede9fe;
  color: #6d28d9;
}

.badge-html {
  background: #e0f2fe;
  color: #0369a1;
}

.errata-status-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.status-active {
  background: #ecfdf5;
  color: #059669;
}

.status-excluded {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.errata-card-body {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.errata-desc-text {
  font-size: 0.85rem;
  color: var(--txt-2, #475569);
  line-height: 1.4;
}

.errata-diff-hw-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #f8fafc;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  font-size: 0.95rem;
  width: fit-content;
}

.diff-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--txt-2, #64748b);
}

.diff-orig {
  color: #b91c1c;
  background: #fee2e2;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 1.15rem;
  font-family: var(--font-urdu, 'Jameel Noori Nastaleeq', serif);
}

.diff-mod {
  color: #047857;
  background: #d1fae5;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 1.15rem;
  font-family: var(--font-urdu, 'Jameel Noori Nastaleeq', serif);
}

.diff-arrow {
  color: #94a3b8;
  font-size: 0.85rem;
}

.errata-def-preview-box {
  background: #fdfdfd;
  border: 1px solid #f1f5f9;
  border-radius: 4px;
  padding: 0.4rem 0.65rem;
  font-size: 0.8rem;
  color: #334155;
  line-height: 1.45;
  max-height: 80px;
  overflow-y: auto;
}

.def-preview-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.2rem;
}

.def-preview-content {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.btn-outline-danger {
  background: transparent;
  color: #dc2626;
  border: 1px solid #f87171;
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-outline-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

.errata-ftr-summary {
  font-size: 0.85rem;
  color: var(--txt-2, #64748b);
}




/* ── Scope Rule Card Count Badges ──────────────────────── */
.scope-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--txt-2);
  background: var(--surface-container-high);
  border: 1px solid var(--bdr-inner);
  padding: 0.22rem 0.65rem;
  border-radius: var(--r-full);
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.scope-item {
  gap: 1rem;
}

/* ── Footer Status Indicator Legends ───────────────────── */
.footer-legend-card {
  background: var(--surface-container-low);
  border: 1px solid var(--bdr-inner);
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  text-align: left;
}
.footer-legend-title {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--txt);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.65rem;
}
.footer-legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 768px) {
  .footer-legend-grid {
    grid-template-columns: 1fr;
  }
}
.legend-sec-label {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--txt-2);
  margin-bottom: 0.35rem;
}
.legend-items-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--txt-2);
}
.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
.legend-sq {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.status-dot {
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  min-height: 9px !important;
  border-radius: 9999px !important;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.status-dot:hover {
  transform: scale(1.35);
  opacity: 0.9;
}

.status-square {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  border-radius: 3px !important;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.status-square:hover {
  transform: scale(1.3);
  opacity: 0.9;
}

.status-sep {
  display: inline-block !important;
  width: 1px !important;
  height: 13px !important;
  background-color: #cbd5e1 !important;
  margin: 0 4px !important;
  vertical-align: middle;
}

/* Semantic Status Color Palette */
.status-bg-slate { background-color: #94a3b8 !important; }
.status-bg-sky { background-color: #0284c7 !important; }
.status-bg-emerald { background-color: #10b981 !important; }
.status-bg-purple { background-color: #a855f7 !important; }
.status-bg-amber { background-color: #f59e0b !important; }
.status-bg-rose { background-color: #f43f5e !important; }

.footer-attribution-block {
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .footer-attribution-block {
    max-width: 60%;
  }
}