/* ================================================================
   COVER GENIE — STYLESHEET MAP
   Sections are marked with banners like the one around this block.
   Ctrl+F the ALL-CAPS title (e.g. "SIDEBAR — SHARED CHROME") to jump
   straight there — line numbers below are just for orientation and
   will drift as the file grows.

     1.  Theme tokens (:root) & global reset ................ ~L42
     2.  Motion (keyframes + reduced-motion) ................ ~L106
     3.  App shell (grid + mobile breakpoint) ............... ~L164
     4.  Sidebar — shared chrome (fields/buttons/hints) ..... ~L297
     5.  Custom select ....................................... ~L490
     6.  Suggestion dropdown (autocomplete panel) ............ ~L634
     7.  Custom date picker .................................. ~L721
     8.  Template picker (.tpl-card / .tpl-swatch) ........... ~L1080
     9.  Index page controls (sidebar UI) .................... ~L1156
     10. Color palette picker ................................ ~L1349
     11. Custom palette builder ............................... ~L1462
     12. Logo upload .......................................... ~L1548
     13. Stage toolbar ........................................ ~L1610
     14. Stage / light table .................................. ~L1723
     15. Page layout toggle ................................... ~L1806
     16. Print styles .......................................... ~L1858
     17. Mobile drawer (FAB Customize/Preview toggle) .......... ~L1936
     18. COVER TEMPLATE 1 — "DIU Cards" ......................... ~L2194
     19. COVER TEMPLATE 2 — "DIU Emblem" ........................ ~L2445
     20. COVER TEMPLATE 3 — "DIU - Spring" ..................... ~L2653
     21. COVER TEMPLATE 4 — "Evening Dusk" ..................... ~L3335
     22. COVER TEMPLATE 5 — "DIU - Circle" ...................... ~L3697
     23. INDEX PAGE TEMPLATES (tabular/ruled/bordered) .......... ~L3846
     24. App loader (splash) .................................... ~L4228
     25. Thanks popup (post-download modal) ..................... ~L4329
     26. Download-choice popup .................................. ~L4682
     
   ================================================================ */

:root {
  --ink: #090B10;
  --panel: #12151D;
  --panel-2: #181C26;
  --panel-3: #1E2330;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.15);
  --text: #EEF1F6;
  --text-dim: #9BA3B5;
  --text-faint: #656D80;
  --brass: #D6A24A;
  --brass-2: #F0C378;
  --brass-ink: #1C1204;
  --teal: #5FC0B4;
  --danger: #E2685A;
  --ok: #69C486;
  --radius: 10px;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 14px 32px -12px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(.22, .9, .32, 1);
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100vw;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(214, 162, 74, 0.07), transparent 55%),
    radial-gradient(900px 600px at 110% 10%, rgba(95, 192, 180, 0.06), transparent 50%),
    var(--ink);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

/* ================================================================
   MOTION
   Shared @keyframes + prefers-reduced-motion override
   ================================================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pillPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(95, 192, 180, 0.35);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(95, 192, 180, 0);
  }
}

@keyframes heartBeat {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ================================================================
   APP SHELL
   Two-column grid (sidebar + stage) & the <=760px mobile breakpoint
   that collapses it into a full-screen drawer + FAB toggle
   ================================================================ */
.app-shell {
  display: grid;
  grid-template-columns: 392px 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.sidebar,
.stage {
  min-height: 0;
  min-width: 0;
}

.sidebar {
  animation: fadeIn .45s var(--ease) both;
}

.stage {
  animation: fadeSlideUp .55s var(--ease) .05s both;
}

@media (min-width:821px) {
  .sidebar {
    animation: fadeSlideUp .5s var(--ease) both;
  }
}

@media (max-width:760px) {

  /* Below the drawer breakpoint the sidebar becomes position:fixed, which
         takes it out of grid flow — with the 392px column still reserved by
         grid-template-columns above, .stage (the only remaining in-flow grid
         item) would get auto-placed into that leftover 392px track instead of
         stretching full width, leaving a big blank gap beside it. Collapsing
         to a single column here is what makes .stage — and the sidebar drawer
         itself — actually span the full viewport. */
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    inset: 0;
    z-index: 50;
    width: 100%;
    max-width: 100%;
    transform: translateX(-100%);
    transition: transform .22s ease;
    padding: 22px 20px 90px 28px !important;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .stage {
    height: 100vh;
    height: 100dvh;
  }

  .fab {
    display: flex !important;
  }

  .stage-toolbar {
    background: rgba(18, 21, 29, 0.92);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7);
    padding: 13px 16px;
    row-gap: 8px;
  }

  .toolbar-brand {
    display: flex;
    order: 1;
  }

  .page-layout-ctl {
    order: 2;
    width: 100%;
    justify-content: center;
  }

  .page-layout-ctl button span {
    display: none;
  }

  .zoom-ctl {
    order: 3;
    gap: 7px;
  }

  .zoom-ctl span {
    font-size: 10px;
  }

  input[type=range] {
    width: 64px;
  }

  .dims {
    order: 4;
    width: 100%;
    justify-content: center;
    font-size: 10px;
    gap: 9px;
  }

  .dims .pill {
    padding: 2px 8px;
    font-size: 9px;
  }

  .dims .pill-thanks {
    font-size: 9px;
    padding: 3px 9px;
  }

  .stage-scroll {
    padding: 8px 14px 64px;
  }

  .pages-viewport {
    margin-top: 4px;
  }
}

/* ================================================================
   SIDEBAR — SHARED CHROME
   Brand mark, field groups, labels, inputs, buttons, hints
   (this is the shared control chrome, NOT the cover templates below)
   ================================================================ */
.sidebar {
  background: linear-gradient(180deg, var(--panel) 0%, #101319 100%);
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 28px -18px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: 22px 20px 22px 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 2px;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--brass-2), var(--brass) 55%, #8a6a2c);
  box-shadow: 0 4px 14px -4px rgba(214, 162, 74, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--brass-ink);
}

.brand h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.015em;
  background: linear-gradient(90deg, var(--text), var(--text-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  margin: 7px 0 24px;
  letter-spacing: 0.05em;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.group {
  margin-bottom: 20px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--line);
}

.group:last-of-type {
  border-bottom: none;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brass-2);
  margin: 0 0 12px;
  padding-left: 10px;
  position: relative;
}

.group-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brass-2), var(--brass));
}

.group-title .n {
  color: var(--text-faint);
}

.group-desc {
  font-size: 11.5px;
  color: var(--text-faint);
  margin: -8px 0 12px;
  line-height: 1.55;
}

.row {
  display: flex;
  gap: 10px;
}

.row label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row>* {
  flex: 1;
  min-width: 0;
}

label {
  display: block;
  font-size: 11.5px;
  color: var(--text-dim);
  margin: 10px 0 5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

label.first {
  margin-top: 0;
}

label .opt {
  color: var(--text-faint);
  font-weight: 400;
}

label .req {
  color: var(--danger);
  font-weight: 700;
  margin-left: 1px;
}

.field-missing {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(226, 104, 90, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

input[type="text"],
input[type="date"],
select,
textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: 8px;
  padding: 9.5px 11px;
  font-size: 13.5px;
  font-family: 'Inter', sans-serif;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}

textarea {
  resize: vertical;
  min-height: 52px;
  line-height: 1.45;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: var(--panel-3);
  box-shadow: 0 0 0 3px rgba(214, 162, 74, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* ================================================================
   CUSTOM SELECT
   Replaces native <select> chrome (dropdown used by cover-type /
   font selectors etc.)
   ================================================================ */
select.csel-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.csel {
  position: relative;
}

.csel-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: 8px;
  padding: 9.5px 12px 9.5px 11px;
  font-size: 13.5px;
  font-family: 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}

.csel-trigger:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

.csel.open .csel-trigger,
.csel-trigger:focus-visible {
  outline: none;
  border-color: var(--brass);
  background: var(--panel-3);
  box-shadow: 0 0 0 3px rgba(214, 162, 74, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.csel-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csel-value.is-placeholder {
  color: var(--text-faint);
}

.csel-chevron {
  flex: none;
  font-size: 10.5px;
  color: var(--text-faint);
  transition: transform .2s var(--ease), color .15s var(--ease);
}

.csel.open .csel-chevron {
  transform: rotate(180deg);
  color: var(--brass-2);
}

.csel-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  z-index: 40;
  background: linear-gradient(180deg, var(--panel-3) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(0, 0, 0, 0.2);
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}

.csel.open .csel-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.csel-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8.5px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}

.csel-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.csel-option.active {
  color: var(--brass-2);
  background: rgba(214, 162, 74, 0.1);
  font-weight: 600;
}

.csel-option .csel-check {
  font-size: 11px;
  color: var(--brass-2);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .12s var(--ease), transform .12s var(--ease);
}

.csel-option.active .csel-check {
  opacity: 1;
  transform: scale(1);
}

.csel.is-disabled .csel-trigger {
  cursor: not-allowed;
  opacity: 0.45;
}

/* ================================================================
   SUGGESTION DROPDOWN
   Custom-styled autocomplete for the Student Lookup box + the
   manual ID / Roll / Name fields (group 01/02), replacing native
   <datalist> — same visual language as CUSTOM SELECT above
   (.csel-panel/.csel-option), just anchored to a text input instead
   of a trigger button. See attachStudentSuggest() in script.js.
   ================================================================ */
.field-suggest {
  position: relative;
}

.sugg-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  z-index: 45;
  background: linear-gradient(180deg, var(--panel-3) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(0, 0, 0, 0.2);
  padding: 6px;
  max-height: 246px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}

.sugg-panel.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.sugg-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}

.sugg-option:hover,
.sugg-option.active {
  background: rgba(214, 162, 74, 0.1);
}

.sugg-option-main {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sugg-option-main mark {
  background: none;
  color: var(--brass-2);
  font-weight: 700;
}

.sugg-option-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sugg-empty {
  padding: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
}

/* ================================================================
   CUSTOM DATE PICKER
   Replaces native calendar UI for the "date of submission" field
   ================================================================ */
input[type="date"].cdate-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cdate {
  position: relative;
}

.cdate-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: 8px;
  padding: 9.5px 11px 9.5px 12px;
  font-size: 13.5px;
  font-family: 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}

.cdate-trigger:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

.cdate.open .cdate-trigger,
.cdate-trigger:focus-visible {
  outline: none;
  border-color: var(--brass);
  background: var(--panel-3);
  box-shadow: 0 0 0 3px rgba(214, 162, 74, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.cdate-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cdate-value.is-placeholder {
  color: var(--text-faint);
}

.cdate-cal-icon {
  flex: none;
  font-size: 13px;
  color: var(--brass-2);
}

.cdate-panel {
  --cdate-tx: 0px;
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  z-index: 40;
  width: 272px;
  max-width: calc(100vw - 40px);
  background: linear-gradient(180deg, var(--panel-3) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line-2);
  border-radius: 13px;
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(0, 0, 0, 0.2);
  padding: 14px 14px 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(var(--cdate-tx), -6px) scale(0.97);
  transform-origin: top left;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  box-sizing: border-box;
}

@media (max-width:760px) {
  .cdate-panel {
    left: 50%;
    --cdate-tx: -50%;
    transform-origin: top center;
  }
}

.cdate.open .cdate-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(var(--cdate-tx), 0) scale(1);
}

.cdate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.cdate-my {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--brass-2);
  letter-spacing: 0.01em;
}

.cdate-nav {
  display: flex;
  gap: 5px;
}

.cdate-nav button {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 10.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}

.cdate-nav button:hover {
  color: var(--brass-2);
  border-color: rgba(214, 162, 74, 0.4);
  background: var(--panel-3);
}

.cdate-nav button:active {
  transform: scale(0.92);
}

.cdate-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.cdate-weekdays span {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  font-weight: 600;
  padding: 4px 0;
}

.cdate-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cdate-day {
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: 'Inter', sans-serif;
  transition: background .12s var(--ease), color .12s var(--ease);
}

.cdate-day:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.cdate-day.is-muted {
  color: var(--text-faint);
  opacity: 0.5;
}

.cdate-day.is-today::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
}

.cdate-day.is-today.is-selected::after {
  background: var(--brass-ink);
}

.cdate-day.is-selected {
  background: linear-gradient(140deg, var(--brass-2), var(--brass) 65%);
  color: var(--brass-ink);
  font-weight: 700;
  box-shadow: 0 4px 12px -4px rgba(214, 162, 74, 0.6);
}

.cdate-foot {
  display: flex;
  justify-content: center;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.cdate-today-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--teal);
  background: rgba(95, 192, 180, 0.1);
  border: 1px solid rgba(95, 192, 180, 0.3);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}

.cdate-today-btn:hover {
  background: rgba(95, 192, 180, 0.22);
  border-color: rgba(95, 192, 180, 0.6);
  transform: translateY(-1px);
}

.lookup-row {
  display: flex;
  gap: 8px;
}

.lookup-row input {
  flex: 1;
}

.btn {
  appearance: none;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .12s var(--ease), border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--brass);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

.btn:active {
  transform: scale(0.97) translateY(0);
}

.btn-primary {
  background: linear-gradient(135deg, var(--brass-2), var(--brass));
  border-color: var(--brass);
  color: var(--brass-ink);
  box-shadow: 0 8px 20px -8px rgba(214, 162, 74, 0.55);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #f6ce8c, #e3b463);
  box-shadow: 0 10px 24px -8px rgba(214, 162, 74, 0.65);
}

.btn-block {
  width: 100%;
}

.btn-ghost {
  background: transparent;
  box-shadow: none;
}

.btn-sm {
  padding: 7px 10px;
  font-size: 12px;
}

.btn i {
  width: 1.05em;
  text-align: center;
  flex: none;
}

.btn:not(.btn-block) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.btn:disabled {
  opacity: .55;
  cursor: default;
  transform: none !important;
}

.hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 7px;
  min-height: 14px;
  line-height: 1.5;
  margin-bottom: 0;
  text-align: justify;
}

.hint.ok {
  color: var(--ok);
  margin-bottom: 0;
  text-align: justify;
}

.hint.warn {
  color: var(--danger);
  margin-bottom: 0;
  text-align: justify;
}

/* ================================================================
   TEMPLATE PICKER
   Cover-template grid (.tpl-grid/.tpl-card) + the mini swatch icons
   (.tpl-swatch). Swatch artwork itself is hand-drawn inline HTML,
   injected by paintSwatches() in script.js — edit the shapes there,
   sizing/containment here.
   ================================================================ */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.tpl-card {
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  padding: 8px 7px 9px;
  cursor: pointer;
  text-align: center;
  background: var(--panel-2);
  box-shadow: var(--shadow-soft);
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}

.tpl-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.tpl-card.active {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(214, 162, 74, 0.16);
}

.tpl-swatch {
  height: 62px;
  border-radius: 6px;
  margin: 0 0 7px;
  position: relative;
  overflow: visible;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  clip-path: inset(0 round 6px);
}

.tpl-preview-spring {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
}

.tpl-preview-spring .tpl-spring {
  position: absolute;
  top: 0;
  left: 50%;
  width: 210mm;
  height: 297mm;
  margin-left: -105mm;
  transform: scale(.055);
  transform-origin: top center;
}

.tpl-card span {
  font-size: 10.5px;
  color: var(--text-dim);
  font-weight: 700;
  display: block;
}

.tpl-card small {
  font-size: 9px;
  color: var(--text-faint);
  font-weight: 400;
}

/* ================================================================
   INDEX PAGE CONTROLS
   Sidebar UI for the lab-report index: add/remove entry rows,
   index title/subtitle fields, index-template picker
   ================================================================ */
.subgroup {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px dashed var(--line-2);
  min-width: 0;
}

.subgroup-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin: 0 0 2px;
}

.lab-entries-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
}

.lab-entry-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 8px;
  position: relative;
  min-width: 0;
}

.lab-entry-row .le-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.lab-entry-row .le-fields-inline {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.lab-entry-row input {
  padding: 7px 8px;
  font-size: 12.5px;
  min-width: 0;
}

.lab-entry-row .le-no {
  width: 52px;
  flex: none;
}

.lab-entry-row .le-name {
  flex: 1;
  min-width: 0;
}

.lab-entry-row .le-date {
  flex: 1;
  min-width: 0;
}

.lab-entry-row .le-page {
  width: 64px;
  flex: none;
}

.lab-entry-row .cdate {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lab-entry-row .cdate-trigger {
  padding: 7px 8px;
  font-size: 12.5px;
  border-radius: 7px;
  width: 100%;
}

.le-remove {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
  margin-top: 1px;
}

.le-remove:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(226, 104, 90, 0.1);
}

.le-empty {
  font-size: 11.5px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
  padding: 10px 2px;
}

#addLabEntryBtn {
  width: 100%;
  margin-top: 9px;
  justify-content: center;
}

.doc-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
}

.doc-check {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}

.doc-check:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

.doc-check input {
  width: auto;
  flex: none;
  margin: 0;
  accent-color: var(--brass);
}

.doc-check span {
  min-width: 0;
}

.doc-check span small {
  display: block;
  color: var(--text-faint);
  font-weight: 400;
  font-size: 10.5px;
  margin-top: 1px;
}

.doc-check.active {
  border-color: var(--brass);
  background: var(--panel-3);
  color: var(--text);
}

.download-summary {
  font-size: 11.5px;
  color: var(--text-dim);
  margin: 0 0 10px;
  line-height: 1.5;
}

.download-summary b {
  color: var(--text);
}

/* ================================================================
   COLOR PALETTE PICKER
   Swatch grid for built-in + saved custom palettes
   ================================================================ */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-left: 10px;
}

.palette-swatch {
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  padding: 7px;
  cursor: pointer;
  text-align: center;
  background: var(--panel-2);
  box-shadow: var(--shadow-soft);
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}

.palette-swatch:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.palette-swatch.active {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(214, 162, 74, 0.16);
}

.palette-dot {
  height: 24px;
  border-radius: 6px;
  margin: 0 0 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.palette-swatch span {
  font-size: 9.5px;
  color: var(--text-dim);
  font-weight: 700;
  display: block;
  line-height: 1.3;
}

.palette-swatch {
  position: relative;
}

.palette-swatch .pal-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .15s var(--ease), transform .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}

.palette-swatch:hover .pal-del {
  opacity: 1;
  transform: scale(1);
}

.palette-swatch .pal-del:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.palette-swatch.pal-add {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.palette-swatch.pal-add .pal-add-icon {
  height: 24px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 13px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  transition: color .15s var(--ease);
}

.palette-swatch.pal-add:hover .pal-add-icon {
  color: var(--brass-2);
}

.palette-swatch.pal-add:hover {
  border-color: var(--brass-2);
}

/* ================================================================
   CUSTOM PALETTE BUILDER
   Form for defining/saving a user's own palette
   ================================================================ */
.custom-pal-form {
  margin-top: 10px;
  padding: 13px 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
  box-shadow: var(--shadow-soft);
  animation: fadeSlideUp .28s var(--ease) both;
}

.custom-pal-form label {
  margin: 9px 0 5px;
}

.custom-pal-form label.first {
  margin-top: 0;
}

.color-field {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 5px 10px 5px 6px;
}

.color-field input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 0;
  background: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.color-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.color-field input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.color-field .cf-name {
  font-size: 11.5px;
  color: var(--text-dim);
  font-weight: 600;
  flex: 1;
}

.color-field .cf-hex {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
}

.color-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.custom-pal-actions {
  display: flex;
  gap: 8px;
  margin-top: 13px;
}

.custom-pal-actions .btn {
  flex: 1;
}

/* ================================================================
   LOGO UPLOAD
   ================================================================ */
.logo-drop {
  border: 1.5px dashed var(--line-2);
  border-radius: 9px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  background: var(--panel-2);
  transition: border-color .15s var(--ease), background .15s var(--ease);
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

.logo-drop:hover {
  border-color: var(--brass);
  background: var(--panel-3);
}

.logo-drop.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

.logo-drop img {
  max-height: 40px;
  max-width: 100%;
  margin-bottom: 6px;
}

.logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.logo-actions .btn {
  flex: 1;
  font-size: 12px;
  padding: 7px;
}

.logo-actions .btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

select:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.export-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ================================================================
   STAGE TOOLBAR
   Top bar above the paper canvas: brand, dims pill, layout toggle, zoom
   ================================================================ */
.stage-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(var(--ink) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.zoom-ctl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
}

input[type=range] {
  accent-color: var(--brass);
  width: 110px;
}

.dims {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  display: flex;
  gap: 14px;
  align-items: center;
}

.dims b {
  color: var(--text-dim);
  font-weight: 700;
}

.pill {
  background: rgba(95, 192, 180, 0.12);
  color: var(--teal);
  border: 1px solid rgba(95, 192, 180, 0.3);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 600;
}

.pill-thanks {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex: none;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), color .15s var(--ease);
  animation: pillPulse 2.6s ease-in-out infinite;
}

.pill-thanks .heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: heartBeat 1.8s ease-in-out infinite;
}

.pill-thanks:hover {
  background: rgba(95, 192, 180, 0.22);
  border-color: rgba(95, 192, 180, 0.6);
  color: #8fe0d3;
  transform: translateY(-1px);
}

.pill-thanks:active {
  transform: translateY(0) scale(0.97);
}

.toolbar-brand {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.toolbar-brand .mark {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  flex: none;
  background: linear-gradient(140deg, var(--brass-2), var(--brass) 60%, #8a6a2c);
  box-shadow: 0 4px 10px -2px rgba(214, 162, 74, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--brass-ink);
}

/* ================================================================
   STAGE / LIGHT TABLE
   Scrollable canvas area that holds the paper page(s) + drop shadow
   ================================================================ */
.stage {
  overflow: auto;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0) 0 0/22px 22px, var(--ink);
  display: flex;
  flex-direction: column;
}

.stage-scroll {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 40px 80px;
}

.pages-viewport {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
  transform-origin: top center;
  transition: transform .18s var(--ease);
  margin-top: 10px;
}

.pages-viewport.layout-col {
  flex-direction: column;
  align-items: center;
}

.pages-viewport.layout-row {
  flex-direction: row;
}

.paper-wrap {
  position: relative;
  flex: none;
  isolation: isolate;
}

.paper-shadow {
  position: absolute;
  inset: 0;
  z-index: 0;
  box-shadow: 0 40px 70px -18px rgba(0, 0, 0, 0.65), 0 12px 24px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  pointer-events: none;
}

#paper,
#paperIndex {
  width: 210mm;
  height: 297mm;
  background: #fff;
  color: #111;
  position: relative;
  overflow: hidden;
  transform-origin: top center;
  border-radius: 3px;
  z-index: 1;
}

.page-tag {
  position: absolute;
  top: -13px;
  left: 16px;
  z-index: 10;
  background: linear-gradient(140deg, var(--brass-2), var(--brass) 60%, #8a6a2c);
  color: var(--brass-ink);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.5);
}

/* ================================================================
   PAGE LAYOUT TOGGLE
   Side-by-side vs. top-to-bottom; only shown once an index page exists
   ================================================================ */
.page-layout-ctl {
  display: none;
  align-items: center;
  gap: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 3px;
}

.page-layout-ctl button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}

.page-layout-ctl button:hover {
  color: var(--text);
}

.page-layout-ctl button.active {
  background: var(--brass);
  color: var(--brass-ink);
}

.page-layout-ctl button svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.page-layout-ctl button.layout-btn-forced-off {
  outline: 1px dashed var(--text-faint);
  outline-offset: -1px;
  color: var(--text-faint);
}

/* ================================================================
   PRINT STYLES
   ================================================================ */
@media print {
  @page {
    size: 210mm 297mm;
    margin: 0;
  }

  html,
  body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    overflow: hidden !important;
  }

  .sidebar,
  .stage-toolbar,
  .fab,
  .paper-shadow,
  .page-tag {
    display: none !important;
  }

  .app-shell {
    display: block !important;
    height: auto !important;
  }

  .stage {
    display: block !important;
    overflow: visible !important;
    background: none !important;
    height: auto !important;
  }

  .stage-scroll {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .pages-viewport {
    display: block !important;
    transform: none !important;
    margin: 0 !important;
  }

  .paper-wrap {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    flex: none !important;
  }

  #paper,
  #paperIndex {
    position: static !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #paper,
  #paper *,
  #paperIndex,
  #paperIndex * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ================================================================
   MOBILE DRAWER
   Animated Customize / Preview toggle (the floating FAB) shown
   only below the <=760px breakpoint
   ================================================================ */
.fab {
  display: none;
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 3vw, 18px);
  z-index: 70;
  transform: translateX(-50%);
  align-items: center;
  width: clamp(272px, calc(100vw - 28px), 400px);
  background: rgba(18, 21, 29, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 18px 38px -12px rgba(0, 0, 0, 0.62), 0 5px 14px -4px rgba(0, 0, 0, 0.42);
  isolation: isolate;
}

.fab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brass-2), var(--brass));
  box-shadow: 0 5px 14px -4px rgba(214, 162, 74, 0.58);
  transition:
    transform .52s cubic-bezier(.16, 1.25, .35, 1),
    background .34s var(--ease),
    box-shadow .34s var(--ease);
  z-index: 0;
}

.fab.is-preview .fab-indicator {
  transform: translateX(100%);
  background: linear-gradient(135deg, #78d6c9, var(--teal));
  box-shadow: 0 5px 14px -4px rgba(95, 192, 180, 0.58);
}

.fab-seg {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 2vw, 8px);
  border: none;
  background: transparent;
  cursor: pointer;
  height: clamp(44px, 11vw, 46px);
  padding: 0 clamp(8px, 3vw, 12px);
  font-weight: 700;
  font-size: clamp(12.5px, 3vw, 13px);
  line-height: 1;
  font-family: 'Inter', sans-serif;
  color: var(--text-dim);
  white-space: nowrap;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  transition: color .22s var(--ease), transform .16s var(--ease);
}

.fab-seg>span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(60px, 17vw, 70px);
  text-align: center;
}

.fab-seg .fab-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  font-size: 16px;
  transform-origin: 50% 55%;
  transition: transform .46s cubic-bezier(.16, 1.25, .35, 1), opacity .2s ease;
}

.fab:not(.is-preview) .fab-seg[data-mode="customize"] {
  color: var(--brass-ink);
}

.fab.is-preview .fab-seg[data-mode="preview"] {
  color: #062622;
}

.fab:not(.is-preview) .fab-seg[data-mode="customize"] .fab-icon {
  animation: paletteReveal .62s cubic-bezier(.16, 1.25, .35, 1);
}

.fab.is-preview .fab-seg[data-mode="preview"] .eye-icon {
  animation: eyeReveal .52s cubic-bezier(.16, 1.25, .35, 1);
}

.fab.is-preview .fab-seg[data-mode="customize"] .fab-icon {
  transform: rotate(-10deg) scale(.94);
}

.fab:not(.is-preview) .fab-seg[data-mode="preview"] .eye-icon {
  transform: scale(.94);
}

/* Exact Font Awesome-style inline SVG icons (no visual redesign) */
.fab-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
  overflow: visible;
}

.fab-icon.eye-icon svg {
  width: 17px;
  height: 16px;
}

.fab-seg:active {
  transform: scale(.96);
}

@keyframes paletteReveal {
  0% {
    transform: rotate(-28deg) scale(.62);
    opacity: .25;
  }

  45% {
    transform: rotate(18deg) scale(1.16);
    opacity: 1;
  }

  72% {
    transform: rotate(-7deg) scale(.96);
  }

  100% {
    transform: rotate(0) scale(1);
  }
}

@keyframes eyeReveal {
  0% {
    transform: scaleX(.2) scaleY(.72);
    opacity: .25;
  }

  38% {
    transform: scaleX(1.12) scaleY(.88);
    opacity: 1;
  }

  64% {
    transform: scaleX(.96) scaleY(1.06);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes fabPop {
  0% {
    transform: translateX(-50%) scale(.97);
  }

  100% {
    transform: translateX(-50%) scale(1);
  }
}

.fab.mode-changing {
  animation: fabPop .42s cubic-bezier(.16, 1.25, .35, 1);
}

/* Small phones — the two-up field pairs (Student ID / Roll No.,
       Department / Section, etc.) get too cramped to use once each half
       drops under ~150px, so stack them instead of squeezing side by side.
       Inputs also get bumped to 16px here since anything smaller makes iOS
       Safari zoom in on focus regardless of the viewport meta tag. */
/* Keep inputs side-by-side on medium screens (481-760px) */
@media (min-width:481px) and (max-width:760px) {
  .row {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }

  .row>* {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width:350px) {
  .row {
    flex-direction: column;
    gap: 0;
  }

  .sidebar {
    padding: 12px 12px 90px;
    scrollbar-gutter: stable;
  }

  input[type="text"],
  input[type="date"],
  select,
  textarea,
  .csel-trigger,
  .cdate-trigger {
    font-size: 16px;
  }
}

.sidebar-close {
  display: none;
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -22px -20px 16px;
  padding: 15px 20px;
  background: linear-gradient(180deg, var(--panel) 70%, transparent);
  align-items: center;
  justify-content: space-between;
}

.sidebar-close b {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
}

.sidebar-close span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}

@media (max-width:760px) {
  .sidebar-close {
    display: flex;
  }
}

/* ================================================================
   COVER TEMPLATE 1 — "DIU Cards"
   Corner color bars + a two-card info layout (student details /
   submitted-to) beneath a centered university header. The default,
   original source-design template.
   ================================================================ */
/* Full-width decorative abstract band — uses the active palette color. */
.tpl-cards .abstract-band {
  position: absolute;
  top: 640px;
  left: 0;
  width: 100%;
  height: 415px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  opacity: .10;
  color: var(--tc-bar, #1e5993);
}

.tpl-cards .abstract-band svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tpl-cards .abstract-band svg * {
  fill: currentColor !important;
}

.tpl-cards .top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 440px;
  height: 38px;
  background: var(--tc-bar, #1e5993);
  border-bottom-right-radius: 35px;
}

.tpl-cards .bottom-bar {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 460px;
  height: 38px;
  background: var(--tc-bar, #1e5993);
  border-top-left-radius: 35px;
}

.tpl-cards .header-section {
  position: absolute;
  top: 125px;
  right: 60px;
  text-align: right;
}

.tpl-cards .logo-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  width: auto;
  max-width: 260px;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.tpl-cards .logo-box img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.tpl-cards .uni-title {
  font-size: 27px;
  font-weight: 900;
  color: var(--tc-bar, #1e5993);
  letter-spacing: .2px;
}

.tpl-cards .dept-title {
  font-size: 18px;
  font-weight: 600;
  color: #555;
  margin-top: 4px;
}

.tpl-cards .main-content {
  position: absolute;
  top: 440px;
  left: 60px;
  right: 60px;
}

.tpl-cards .assignment-no {
  font-size: 22px;
  font-weight: 700;
  color: #555;
  margin-bottom: 8px;
}

.tpl-cards .assignment-title {
  font-size: 25px;
  font-weight: 800;
  color: var(--tc-accent, #6b1d52);
  margin-bottom: 30px;
}

.tpl-cards .course-info {
  font-size: 20px;
  margin-bottom: 12px;
  display: flex;
}

.tpl-cards .info-label {
  width: 150px;
  font-weight: 800;
  color: var(--tc-accent, #6b1d52);
}

.tpl-cards .info-colon {
  width: 35px;
  font-weight: 800;
  color: var(--tc-accent, #6b1d52);
}

.tpl-cards .info-value {
  font-weight: 300;
  color: #444;
}

.tpl-cards .cards-container {
  position: absolute;
  top: 720px;
  left: 60px;
  right: 60px;
  display: flex;
  justify-content: space-between;
}

.tpl-cards .card {
  width: 325px;
  height: 220px;
  background: var(--tc-tint-rgba, rgba(235, 243, 249, 0.68));
  border-radius: 25px;
  padding: 22px;
  position: relative;
  z-index: 2;
}

.tpl-cards .card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--tc-accent, #6b1d52);
  margin-bottom: 12px;
}

.tpl-cards .student-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: 15px;
  margin-top: 30px;
}

.tpl-cards .student-table td {
  padding: 3px 6px;
  color: #222;
}

.tpl-cards .student-table .lbl {
  font-weight: 700;
  width: 80px;
}

.tpl-cards .student-table .cln {
  width: 15px;
  font-weight: 700;
}

.tpl-cards .student-table tr:nth-child(even) td {
  background: var(--tc-tintrow, #a4c4df);
}

.tpl-cards .submitted-to-card {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tpl-cards .teacher-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 15px;
  color: #222;
}

.tpl-cards .highlight-bar {
  background: var(--tc-tintrow, #a4c4df);
  width: 100%;
  padding: 5px 10px;
  border-radius: 2px;
}

.tpl-cards .teacher-name {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  padding-right: 10px;
}

.tpl-cards .teacher-title,
.tpl-cards.teacher-department {
  font-size: 15px;
  font-weight: 300;
  color: #222;
  padding-right: 10px;
}

.tpl-cards .footer-date {
  position: absolute;
  top: 980px;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 17px;
}

.tpl-cards .date-label {
  font-weight: 800;
  color: var(--tc-accent, #6b1d52);
}

.tpl-cards .date-colon {
  font-weight: 800;
  color: var(--tc-accent, #6b1d52);
  margin: 0 10px;
}

.tpl-cards .date-value {
  font-weight: 300;
  color: #333;
}

/* ================================================================
   COVER TEMPLATE 2 — "DIU Emblem"
   Matches the diu_assignment_cover reference design. Fixed brand
   colors from the source design — not user-tunable.
   ================================================================ */
.tpl-emblem {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--paper-font, "Times New Roman", Times, serif);
  color: #111;
}

.tpl-emblem * {
  box-sizing: border-box;
}

.tpl-emblem .art {
  position: absolute;
  left: 128px;
  top: 0;
  width: 666px;
  height: 711px;
  overflow: hidden;
  z-index: 0;
}

.tpl-emblem .art svg {
  display: block;
  width: 666px;
  height: auto;
}

.tpl-emblem .content {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Logo + university + department now live together in one flow
   container instead of three independently absolute-positioned
   elements. This is what makes overlap structurally impossible:
   the logo box has a FIXED height (so it's identical for every
   logo file regardless of aspect ratio), its width is left to
   "auto" so it scales naturally to match that height, and the
   university name is pushed down by a FIXED margin — never by a
   guessed pixel offset that assumed how big the logo would look. */
.tpl-emblem .header-block {
  position: absolute;
  left: 375px;
  top: 60px;
  width: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tpl-emblem .logo-slot {
  margin-top: 30px;
  min-height: 140px;
  width: auto;
  max-width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tpl-emblem .logo-slot img {
  max-height: 180px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.tpl-emblem .logo-placeholder {
  height: 100%;
  width: 180px;
}

.tpl-emblem .university {
  color: var(--te-primary, #273797);
  font-family: var(--paper-font, Georgia, "Times New Roman", serif);
  font-size: 27px;
  line-height: 1.05;
  white-space: nowrap;
  font-weight: bold;
}

.tpl-emblem .department {
  margin-top: 8px;
  color: var(--te-secondary, #479dce);
  font-family: var(--paper-font, Georgia, "Times New Roman", serif);
  font-size: 23px;
  line-height: 1;
  white-space: nowrap;
}

.tpl-emblem .assignment-info {
  position: absolute;
  left: 62px;
  top: 658px;
  width: 355px;
  color: #111;
  font-size: 19px;
  line-height: 1.72;
  white-space: nowrap;
}

.tpl-emblem .assignment-info .row {
  display: grid;
  grid-template-columns: 163px 23px 1fr;
}

.tpl-emblem .colon {
  text-align: center;
}

.tpl-emblem .lbl {
  font-weight: 700;
}

.tpl-emblem .rule {
  position: absolute;
  left: 59px;
  top: 816px;
  width: 673px;
  height: 2.5px;
  background: var(--te-primary, #273797);
  border-radius: 2px;
}

.tpl-emblem .submitted-divider {
  position: absolute;
  left: 395px;
  top: 836px;
  width: 2.5px;
  height: 173px;
  background: var(--te-primary, #273797);
  border-radius: 2px;
}

.tpl-emblem .submitted-by {
  position: absolute;
  left: 61px;
  top: 835px;
  width: 332px;
}

.tpl-emblem .submitted-to {
  position: absolute;
  left: 408px;
  top: 835px;
  width: 323px;
  text-align: center;
}

.tpl-emblem .section-title {
  color: var(--te-primary, #273797);
  font-family: var(--paper-font, Georgia, "Times New Roman", serif);
  font-size: 21px;
  line-height: 1;
  white-space: nowrap;
}

.tpl-emblem .submitted-by .section-title {
  text-align: center;
}

.tpl-emblem .fields {
  margin-top: 20px;
  color: #111;
  font-size: 19px;
  line-height: 1.72;
  white-space: nowrap;
}

.tpl-emblem .fields .row {
  display: grid;
  grid-template-columns: 83px 23px 1fr;
}

.tpl-emblem .submitted-to .fields {
  text-align: center;
}

.tpl-emblem .submitted-to .fields .name {
  font-weight: 700;
}

.tpl-emblem .date {
  position: absolute;
  left: 260px;
  top: 1067px;
  width: 315px;
  color: #111;
  font-size: 19px;
  white-space: nowrap;
}

.tpl-emblem .date .lbl {
  font-weight: 700;
}

/* ================================================================
   COVER TEMPLATE 3 — "DIU - Spring"
   Editorial geometric redesign — ribbon header, badge-style doc
   number and a two-card (course / submitted-to) info grid.
   ================================================================ */
.tpl-spring {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 13%, var(--au-glow, rgba(244, 196, 48, .18)), transparent 24%),
    linear-gradient(145deg, #fffdf5 0%, #fafaff 47%, #eef0fb 100%);
  color: #172027;
  font-family: var(--paper-font, "Times New Roman", Times, serif);
}

.tpl-spring * {
  box-sizing: border-box
}

.tpl-spring::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 150px;
  background:
    linear-gradient(135deg, transparent 49.3%, rgba(39, 55, 151, .16) 49.8%, transparent 50.3%),
    linear-gradient(135deg, transparent 66.3%, rgba(244, 196, 48, .28) 66.8%, transparent 67.3%);
  z-index: 0
}

.tpl-spring::after {
  content: "";
  position: absolute;
  top: 28px;
  right: 34px;
  width: 8px;
  height: 8px;
  background: var(--au-gold, #d59b00);
  transform: rotate(45deg);
  z-index: 1
}

.tpl-spring .spring-art {
  position: absolute;
  left: -32px;
  bottom: -30px;
  width: 610px;
  height: 610px;
  z-index: 0;
  opacity: .135;
  pointer-events: none;
  transform: rotate(-1deg)
}

.tpl-spring .spring-art svg {
  width: 100%;
  height: 100%;
  display: block
}

.tpl-spring .spring-art .cube-lines {
  fill: none;
  stroke: var(--au-navy, #153c50);
  stroke-width: .48;
  vector-effect: non-scaling-stroke
}

.tpl-spring .spring-art .cube-faint {
  opacity: .55
}

.tpl-spring .ribbon-top,
.tpl-spring .ribbon-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 48px;
  isolation: isolate;
  pointer-events: none;
  z-index: 3
}

.tpl-spring .ribbon-top {
  top: 0;
}

.tpl-spring .ribbon-bottom {
  bottom: 0;
  transform: rotate(180deg);
}

.tpl-spring .ribbon-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--au-navy, #153c50);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 12px -10px rgba(0, 0, 0, .5);
  z-index: 10
}

.tpl-spring .ribbon-tail {
  display: none
}

.tpl-spring .ribbon-tail::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  border-top: 30px solid var(--au-gold, #d59b00);
  border-right: 24px solid transparent
}

.tpl-spring .ribbon-fold {
  position: absolute;
  top: 0;
  left: 112px;
  width: 96px;
  height: 30px;
  background: var(--au-gold, #d59b00);
  border-left: 8px solid rgba(255, 255, 255, .2);
  border-right: 8px solid rgba(0, 0, 0, .08);
  box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .5);
  z-index: 5
}

.tpl-spring .ribbon-underfold {
  display: none
}

.tpl-spring .ribbon-front {
  display: none
}

.tpl-spring .ribbon-tip {
  display: none
}

.tpl-spring .header {
  position: absolute;
  top: 104px;
  left: 62px;
  right: 62px;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  min-height: 0;
  padding: 12px 18px 16px;
  border: 1px solid #dfe3ef;
  border-radius: 18px;
  background: rgba(255, 253, 248, .62);
  box-shadow: 0 12px 24px -18px rgba(39, 55, 151, .42)
}

.tpl-spring .brand-side {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0
}

.tpl-spring .logo {
  width: 74px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  overflow: hidden
}

.tpl-spring .logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block
}

.tpl-spring .brand-copy {
  min-width: 0;
  padding-top: 2px
}

.tpl-spring .uni {
  color: var(--au-navy, #153c50);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.02;
  white-space: nowrap;
  letter-spacing: -.02em
}

.tpl-spring .dept {
  color: #6a7074;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 8px;
  white-space: nowrap;
}

.tpl-spring .doc-badge {
  flex: none;
  text-align: right;
  padding-top: 5px;
  position: relative;
  z-index: 6
}

.tpl-spring .doc-badge::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 2px;
  background: var(--au-gold, #d59b00)
}

.tpl-spring .doc-word {
  color: #7b8387;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding-top: 10px
}

.tpl-spring .doc-no {
  color: var(--au-gold, #d59b00);
  font-size: 19px;
  font-weight: 800;
  margin-top: 5px
}

.tpl-spring .title-area {
  position: absolute;
  top: 230px;
  left: 62px;
  right: 62px;
  z-index: 4
}

.tpl-spring .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--au-eyebrow, #d59b00);
  font-size: 12px;
  font-weight: 800;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px
}

.tpl-spring .eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--au-eyebrow, #d59b00);
  display: inline-block
}

.tpl-spring .title {
  color: #172027;
  font-size: 35px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.025em;
  max-width: 650px;
  margin: 0
}

.tpl-spring .course-line {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 17px;
  color: #646b70
}

.tpl-spring .course-line span {
  position: relative
}

.tpl-spring .course-line span+span::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 3px;
  width: 1px;
  height: 14px;
  background: #cfd3d5
}

.tpl-spring .course-line b {
  color: var(--au-navy, #153c50);
  font-weight: 800;
  margin-right: 5px
}

.tpl-spring .info-grid {
  position: absolute;
  top: 430px;
  left: 62px;
  right: 62px;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px
}

.tpl-spring .info-card {
  min-height: 154px;
  border: 1px solid #dfe3ef;
  border-top: 3px solid var(--au-navy, #153c50);
  border-radius: 14px;
  padding: 16px 18px 12px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 12px 24px -18px rgba(39, 55, 151, .42);
  position: relative;
}

.tpl-spring .info-card.to {
  border-top-color: var(--au-gold, #d59b00);
  text-align: right;
}

.tpl-spring .card-title {
  color: var(--au-navy, #153c50);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: .17em;
  text-transform: uppercase
}

.tpl-spring .to .card-title {
  color: var(--au-gold, #153c50)
}

.tpl-spring .detail {
  display: grid;
  grid-template-columns: 78px 12px 1fr;
  font-size: 14px;
  line-height: 1.72;
  color: #6f767d;
  font-weight: 400
}

.tpl-spring .detail .lbl {
  font-weight: 400;
  color: #7a8084;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em
}

.tpl-spring .detail .colon {
  font-weight: 400;
  color: #a5abb0;
  text-align: center
}

.tpl-spring .detail .val {
  font-weight: 400;
  overflow-wrap: anywhere;
  color: #6f767d
}

.tpl-spring .detail .val strong {
  color: inherit;
  font-weight: inherit
}

.tpl-spring .submitted-by .detail:first-of-type .val,
.tpl-spring .info-card.to .person-name {
  color: #111111;
  font-size: 16px;
  font-weight: 700
}

.tpl-spring .submitted-by .detail .lbl,
.tpl-spring .submitted-by .detail .colon,
.tpl-spring .submitted-by .detail .val {
  color: #111111;
  font-weight: 700
}

.tpl-spring .submitted-by .detail .val,
.tpl-spring .info-card.to .person-name,
.tpl-spring .info-card.to .person-meta {
  color: #646b70;
  font-size: 17px;
  font-weight: 400
}

.tpl-spring .submitted-by .detail {
  grid-template-columns: 104px 16px minmax(0, 1fr);
}

.tpl-spring .submitted-by .detail .val {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tpl-spring .to .detail {
  grid-template-columns: 78px 12px 1fr
}

.tpl-spring .meta-strip {
  position: absolute;
  top: 640px;
  left: 62px;
  right: 62px;
  z-index: 4
}

.tpl-spring .meta-box {
  padding: 15px 18px 14px;
  min-height: 52px;
  border: 1px solid #dfe3ef;
  border-radius: 12px;
  background: rgba(247, 248, 252, .55);
  box-shadow: 0 10px 20px -18px rgba(39, 55, 151, .42);
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 24px
}

.tpl-spring .meta-box>* {
  align-self: center;
}

.tpl-spring .meta-title {
  color: var(--au-eyebrow, #d59b00);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin: 0;
  position: relative;
  padding-left: 13px;
  white-space: nowrap;
}

.tpl-spring .meta-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 3px;
  height: 18px;
  background: var(--au-eyebrow, #d59b00);
}

.tpl-spring .meta-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 30px;
  font-size: 14px;
  line-height: 1.45;
  color: #424a4e;
  align-items: center;
  min-height: 22px
}

.tpl-spring .meta-values span b {
  color: #7a8084;
  font-weight: 700
}

.tpl-spring .date {
  position: absolute;
  top: 730px;
  left: 62px;
  right: 62px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 14px;
  color: #646b70;
  text-align: right
}

.tpl-spring .date::before {
  content: "";
  width: 30px;
  height: 1px;
  background: rgba(39, 55, 151, .28);
  margin-right: 4px
}

.tpl-spring .date-label {
  color: #7a8084;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase
}

.tpl-spring .date-value {
  color: var(--au-navy, #153c50);
  font-weight: 700
}

.tpl-spring .to-person {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 18px;
  align-items: flex-end;
  text-align: right
}

.tpl-spring .person-name {
  color: #111111;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25
}

.tpl-spring .submitted-by .detail:first-of-type .val,
.tpl-spring .info-card.to .person-name {
  color: #111111;
  font-size: 17px;
  font-weight: 700
}

.tpl-spring .info-card.to .person-name {
  color: #111111;
  font-size: 16px;
  font-weight: 700
}

.tpl-spring .person-meta {
  color: #111111;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25
}

/* Keep card typography explicit so later shared rules cannot distort it. */
.tpl-spring .submitted-by .detail,
.tpl-spring .info-card.to .person-meta {
  color: #6f767d;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55
}

.tpl-spring .submitted-by .detail .lbl,
.tpl-spring .submitted-by .detail .colon {
  color: #111111;
  font-size: 11px;
  font-weight: 600
}

.tpl-spring .submitted-by .detail .val {
  color: #6f767d;
  font-size: 13.5px;
  font-weight: 400
}

.tpl-spring .submitted-by .detail:first-of-type .val,
.tpl-spring .info-card.to .person-name {
  color: #111111;
  font-size: 15px;
  font-weight: 700
}

.tpl-spring .spring-footer {
  position: absolute;
  left: 62px;
  right: 62px;
  top: 806px;
  z-index: 4;
  padding-top: 16px;
  border-top: 1px solid rgba(39, 55, 151, .18)
}

.tpl-spring .footer-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--au-eyebrow, #d59b00);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase
}

.tpl-spring .footer-heading i {
  display: block;
  width: 34px;
  height: 2px;
  background: var(--au-eyebrow, #d59b00);
  border-radius: 3px
}

.tpl-spring .footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  margin-top: 18px
}

.tpl-spring .assessment-area,
.tpl-spring .signature-area {
  min-height: 126px;
  padding: 15px 18px;
  border: 1px solid #dfe3ef;
  border-radius: 13px;
  background: rgba(255, 255, 255, .53);
  box-shadow: 0 10px 20px -18px rgba(39, 55, 151, .38)
}

.tpl-spring .footer-label {
  color: #111111;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase
}

.tpl-spring .assessment-lines {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 19px
}

.tpl-spring .assessment-lines i {
  display: block;
  height: 1px;
  background: rgba(39, 55, 151, .16)
}

.tpl-spring .signature-area {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px
}

.tpl-spring .signature-line {
  flex: 1;
  color: #111111;
  font-size: 10px;
  text-align: center;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase
}

.tpl-spring .signature-line i {
  display: block;
  height: 1px;
  margin-bottom: 8px;
  background: rgba(23, 32, 39, .42)
}

/* ================================================================
   COVER TEMPLATE 4 — "EVENING DUSK"
   A two-column layout: a fixed-width "dusk sky" side panel (sun,
   stars, layered hill silhouettes — blended from the active
   palette's two colors) beside a warm cream content column. All
   positioning is flex-based rather than fixed-px, since the
   panel/content split does the layout work the other templates
   get from absolute offsets.
   ================================================================ */
.tpl-dusk {
  position: relative;
  /* Deliberately 2px larger than the parent on the bottom/right edges.
         #paper's own overflow:hidden trims the excess — this guards against
         a sub-pixel/compositing-layer rounding gap that can otherwise expose
         a hairline of whatever sits behind this element. Pure geometric
         overlap can't produce a mismatched seam, since nothing new is drawn
         that could clash in color with its surroundings. */
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: hidden;
  display: flex;
  background: #fbf4ec;
  color: #2c2320;
  font-family: var(--paper-font, "Times New Roman", Times, serif);
}

.tpl-dusk * {
  box-sizing: border-box
}

/* ---- background artwork (sky/hills/sun/stars) ----
       A single pre-rendered SVG, painted as a plain <img> (see renderDusk()
       in script.js), rather than CSS gradients/box-shadow/pseudo-elements.
       It sits behind both the panel and the content column and is sized to
       the whole page — the artwork's own canvas already reserves blank
       (near-white) space on the right, so it lines up with .dk-content
       without any extra positioning math. This replaces the previous
       CSS-drawn sky, which relied on a `filter: blur()` pseudo-element that
       html2canvas (used for PNG/PDF export) doesn't reliably rasterize —
       that mismatch was what broke downloads of this template. */
.tpl-dusk .dk-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ---- left sky panel ---- */
.tpl-dusk .dk-panel {
  position: relative;
  flex: none;
  width: 268px;
  /* Same overlap-and-clip approach as .tpl-dusk above: 2px taller than
         the flex row it sits in, trimmed by .tpl-dusk's own overflow:hidden,
         so no sub-pixel gap can expose the artwork underneath. The panel is
         also pulled 2px to the right of its own column via a negative
         margin, and raised onto its own stacking layer with z-index — this
         masks the OTHER seam, the internal one between this flex item and
         .dk-content. The panel itself is transparent: the sky artwork
         (.dk-artwork, a full-bleed <img> behind everything) shows through,
         so there's no separate color here that could seam-mismatch. */
  height: calc(100% + 2px);
  margin-right: -2px;
  z-index: 2;
  overflow: hidden;
}

.tpl-dusk .dk-panel-top {
  position: relative;
  z-index: 3;
  padding: 40px 26px 0;
  text-align: center;
}

.tpl-dusk .dk-panel-word {
  margin-top: 0;
  color: #fff5e3;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .92;
}

.tpl-dusk .dk-panel-rule {
  width: 34px;
  height: 2px;
  margin: 12px auto 0;
  background: rgba(255, 245, 227, .55);
  border-radius: 2px;
}

.tpl-dusk .dk-panel-bottom {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 30px;
  z-index: 3;
  text-align: center;
}

.tpl-dusk .dk-panel-name {
  color: #fff9ee;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.28;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.tpl-dusk .dk-panel-meta {
  margin-top: 6px;
  color: rgba(255, 249, 238, .78);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

/* ---- right content column ---- */
.tpl-dusk .dk-content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 56px 54px 44px;
  background:
    radial-gradient(circle at 100% 0%, var(--dk-glow-soft, rgba(220, 140, 80, .12)), transparent 32%),
    #fbf4ec;
}

.tpl-dusk .dk-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Logo now lives beside the university name — the sky panel is a
       decorative illustration, not a badge slot, so a small crest reads
       oddly floating in it. Here it sits next to the text it identifies.
       An uploaded logo is shown at its own natural shape (no circle mask,
       no clipping) since most institution logos are wordmarks or
       non-square crests, not tidy little circular badges — cropping them
       into a circle just cuts pieces off. The default fallback (a single
       icon glyph when no logo is uploaded) is the one thing that *does*
       suit a circular badge, so it keeps that treatment via :not(.has-image). */
.tpl-dusk .dk-header-logo {
  flex: none;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
}

.tpl-dusk .dk-header-logo:not(.has-image) {
  margin-right: 5px;
  width: 58px;
  border-radius: 50%;
  justify-content: center;
  background: linear-gradient(160deg, var(--dk-primary, #6a3093), var(--dk-secondary, #c9498b));
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4);
}

.tpl-dusk .dk-header-logo img {
  max-width: 150px;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.tpl-dusk .dk-header-logo-mark {
  color: #fff5e3;
  font-size: 20px;
}

.tpl-dusk .dk-header-text {
  min-width: 0;
}

.tpl-dusk .dk-uni {
  color: var(--dk-primary, #6a3093);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-top: 20px;
}

.tpl-dusk .dk-dept {
  margin-top: 6px;
  color: #8a7d74;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tpl-dusk .dk-title-block {
  flex: none;
  margin-top: 98px;
}

.tpl-dusk .dk-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dk-secondary, #c9498b);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.tpl-dusk .dk-eyebrow i {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--dk-secondary, #c9498b);
  border-radius: 2px;
}

.tpl-dusk .dk-title {
  margin: 12px 0 0;
  color: #241a17;
  font-size: 26px;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.02em;
  max-width: 95%;
}

.tpl-dusk .dk-course {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  font-size: 15px;
  color: #6b6058;
}

.tpl-dusk .dk-course b {
  color: var(--dk-primary, #6a3093);
  font-weight: 800;
  margin-right: 6px;
}

.tpl-dusk .dk-info {
  flex: none;
  margin-top: 164px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(44, 35, 32, .14);
}

.tpl-dusk .dk-info-heading {
  color: var(--dk-primary, #6a3093);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.tpl-dusk .dk-info-to .dk-info-heading {
  color: var(--dk-secondary, #c9498b);
  text-align: right;
}

.tpl-dusk .dk-info-to {
  text-align: right;
}

/* Both columns now share one shape, unlabeled: a bold identifying
       name up top, then plain supporting detail lines underneath — the
       same convention "Submitted To" already used, just carried over to
       "Submitted By". */
.tpl-dusk .dk-to-name,
.tpl-dusk .dk-by-name {
  color: #241a17;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.tpl-dusk .dk-to-desig,
.tpl-dusk .dk-to-dept,
.tpl-dusk .dk-by-line {
  margin-top: 8px;
  color: #8a7d74;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.tpl-dusk .dk-footer {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(44, 35, 32, .14);
  font-size: 13.5px;
  color: #6b6058;
}

.tpl-dusk .dk-footer-mark {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  color: rgba(44, 35, 32, .28);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.tpl-dusk .dk-date-block {
  text-align: left;
}

.tpl-dusk .dk-date-label,
.tpl-dusk .dk-footer-label {
  display: block;
  color: #8a7d74;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tpl-dusk .dk-date-value {
  display: block;
  margin-top: 6px;
  color: var(--dk-primary, #6a3093);
  font-size: 15px;
  font-weight: 700;
}

/* ================================================================
   COVER TEMPLATE 5 — "DIU - Circle"
   Bordered, right-aligned title box + a full-bleed rings/swoosh
   artwork layered above everything (including the box border) so
   its opaque white/red shapes mask the box's top-right corner —
   exactly the effect in the supplied reference design. The rings
   artwork and the ornamental divider both recolor with the active
   palette (bar/accent); the box border stays a fixed ink color,
   same as the source design.
   ================================================================ */
.tpl-circles {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: #181818;
  font-family: var(--paper-font, "Times New Roman", Times, serif);
}


/* Full-bleed rings + corner swoosh — topmost layer of the page.
   Its viewBox already matches the A4 aspect ratio 1:1, so a plain
   100%/100% stretch lines it up edge-to-edge with #paper. */
.tpl-circles .ci-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  display: block;
}

.tpl-circles .ci-logo {
  position: absolute;
  top: 100px;
  left: 56px;
  z-index: 2;
  max-width: 230px;
}

.tpl-circles .ci-logo img {
  height: 78px;
  width: auto;
  max-width: 230px;
  object-fit: contain;
  display: block;
}

.tpl-circles .ci-box {
  position: absolute;
  top: 224px;
  left: 91px;
  right: 100px;
  border: 3px solid #181818;
  border-radius: 38px;
  z-index: 1;
}

.tpl-circles .ci-box-inner {
  padding: 220px 42px 36px;
  text-align: right;
}

.tpl-circles .ci-uni-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--ci-accent, #9c2431);
  letter-spacing: .2px;
  margin-bottom: 8px;
}

.tpl-circles .ci-box-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #181818;
  line-height: 1.28;
  margin-bottom: 8px;
}

.tpl-circles .ci-box-subtitle {
  font-size: 18px;
  font-weight: 400;
  color: #2a2a2a;
}

.tpl-circles .ci-content {
  position: absolute;
  left: 70px;
  right: 70px;
  top: 690px;
  text-align: center;
  z-index: 1;
}

.tpl-circles .ci-student-name {
  font-size: 19px;
  font-weight: 600;
  color: #181818;
  margin-bottom: 4px;
}

.tpl-circles .ci-student-meta {
  font-size: 15.5px;
  color: #333;
  margin-bottom: 30px;
}

.tpl-circles .ci-course {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2px;
  color: #181818;
  margin-bottom: 8px;
}

.tpl-circles .ci-teacher {
  font-size: 15.5px;
  color: #333;
  margin-bottom: 26px;
}

.tpl-circles .ci-separator {
  display: block;
  width: 62%;
  height: auto;
  margin: 0 auto 30px;
}

.tpl-circles .ci-assignment-no {
  font-size: 16.5px;
  color: #181818;
  margin-bottom: 6px;
}

.tpl-circles .ci-due-date {
  font-size: 16.5px;
  color: #181818;
}




/* ============================================================
   INDEX PAGE TEMPLATES — three layouts for the lab-report index.
   Each one recolors itself off --ixp/--ixs/--ixtint/--ixtintrow,
   which the JS sets per-page to match whichever cover layout
   (cards or emblem) + palette is currently selected, so the
   index always reads as part of the same set as the cover.
   ============================================================ */
.tpl-index-tabular,
.tpl-index-ruled,
.tpl-index-bordered {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  background: #fff;
  color: #1b1b1b;
  font-family: var(--paper-font, "Times New Roman", Times, serif);
  padding: 66px 58px 48px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  /* pins a stacking context here so children with
    z-index:-1 (the decorative wave band) paint above THIS element's
    own white background instead of escaping to an ancestor's stacking
    context and disappearing behind the whole page. */
}

.tpl-index-tabular *,
.tpl-index-ruled *,
.tpl-index-bordered * {
  box-sizing: border-box;
}

.tpl-index-tabular .ix-head,
.tpl-index-bordered .ix-head {
  text-align: center;
  margin-bottom: 24px;
}

.tpl-index-tabular .ix-uni,
.tpl-index-bordered .ix-uni {
  font-size: 22px;
  font-weight: 900;
  color: var(--ixp, #1e5993);
  letter-spacing: .2px;
}

.tpl-index-tabular .ix-dept,
.tpl-index-bordered .ix-dept {
  font-size: 13.5px;
  color: #555;
  font-weight: 600;
  margin-top: 3px;
}

.tpl-index-tabular .ix-title,
.tpl-index-bordered .ix-title {
  font-size: 27px;
  font-weight: 800;
  color: var(--ixs, #6b1d52);
  margin-top: 20px;
}

.tpl-index-tabular .ix-subtitle,
.tpl-index-bordered .ix-subtitle {
  font-size: 13.5px;
  color: #666;
  margin-top: 6px;
}

/* ---- INDEX TEMPLATE 1. Tabular Index — ruled table, matches the "Cards" cover's colour bars ---- */
.tpl-index-tabular .ix-topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: var(--ixp, #1e5993);
}

.tpl-index-tabular .ix-botbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: var(--ixp, #1e5993);
}

.tpl-index-tabular table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 14px;
}

.tpl-index-tabular thead th {
  background: var(--ixp, #1e5993);
  color: #fff;
  padding: 11px 10px;
  font-weight: 700;
  text-align: left;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tpl-index-tabular thead th:first-child {
  border-top-left-radius: 6px;
}

.tpl-index-tabular thead th:last-child {
  border-top-right-radius: 6px;
}

.tpl-index-tabular tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid #e2e6ec;
  color: #222;
  vertical-align: top;
}

.tpl-index-tabular tbody tr.alt td {
  background: var(--ixtintrowa, rgba(164, 196, 223, 0.35));
}

.tpl-index-tabular tbody tr.empty td {
  color: #c7cad1;
}

.tpl-index-tabular td.no {
  width: 44px;
  text-align: center;
  font-weight: 800;
  color: var(--ixs, #6b1d52);
}

.tpl-index-tabular td.date {
  width: 148px;
  white-space: nowrap;
}

.tpl-index-tabular td.page {
  width: 56px;
  text-align: center;
  white-space: nowrap;
}

.tpl-index-tabular td.sign {
  width: 110px;
}

.tpl-index-tabular .ix-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: #666;
  padding-top: 16px;
  border-top: 1px dashed #cfd3da;
}

/* ---- INDEX TEMPLATE 2. Ruled List — dot-leader lines, matches the "Emblem" cover's quiet elegance ---- */
.tpl-index-ruled {
  text-align: center;
}

.tpl-index-ruled .ix-uni {
  font-size: 23px;
  font-weight: 700;
  color: var(--ixp, #273797);
}

.tpl-index-ruled .ix-dept {
  font-size: 14.5px;
  color: #666;
  margin-top: 5px;
}

.tpl-index-ruled .ix-rule {
  width: 110px;
  height: 2px;
  background: var(--ixp, #273797);
  margin: 22px auto;
  border-radius: 2px;
}

.tpl-index-ruled .ix-eyebrow {
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ixs, #479dce);
  font-weight: 700;
}

.tpl-index-ruled .ix-title {
  font-size: 25px;
  font-weight: 700;
  margin-top: 10px;
  color: #1a1a1a;
}

.tpl-index-ruled .ix-subtitle {
  font-size: 13px;
  color: #777;
  margin-top: 8px;
}

.tpl-index-ruled .ix-list {
  margin-top: 42px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tpl-index-ruled .ix-row {
  display: flex;
  align-items: baseline;
  font-size: 15.5px;
  color: #222;
}

.tpl-index-ruled .ix-no {
  width: 32px;
  flex: none;
  font-weight: 700;
  color: var(--ixp, #273797);
}

.tpl-index-ruled .ix-name {
  flex: none;
  max-width: 58%;
  font-weight: 600;
}

.tpl-index-ruled .ix-dots {
  flex: 1;
  border-bottom: 1.5px dotted #a8adb6;
  margin: 0 10px 4px;
}

.tpl-index-ruled .ix-date {
  flex: none;
  font-size: 13px;
  color: #666;
}

.tpl-index-ruled .ix-empty {
  margin-top: 48px;
  text-align: center;
  color: #999;
  font-size: 14px;
  font-style: italic;
}

.tpl-index-ruled .ix-signrow {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  padding-top: 34px;
}

.tpl-index-ruled .sign-block {
  width: 190px;
  text-align: center;
  font-size: 11.5px;
  color: #666;
  border-top: 1px solid #aaa;
  padding-top: 6px;
}

/* ---- INDEX TEMPLATE 3. Bordered Grid — a boxed card per entry, echoes the "Cards" cover's rounded card style ---- */
.tpl-index-bordered .ix-topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 14px;
  background: var(--ixp, #1e5993);
}

.tpl-index-bordered .ix-head {
  margin-top: 8px;
}

.tpl-index-bordered .ix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  margin-top: 14px;
  align-content: start;
}

.tpl-index-bordered .ix-box {
  border: 2px solid var(--ixp, #1e5993);
  border-radius: 14px;
  padding: 18px 18px 14px;
  background: var(--ixtint, #ebf3f9);
  position: relative;
}

.tpl-index-bordered .ix-box-no {
  position: absolute;
  top: -13px;
  left: 14px;
  background: var(--ixp, #1e5993);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 11px;
  border-radius: 20px;
  letter-spacing: .03em;
}

.tpl-index-bordered .ix-box-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 8px;
  line-height: 1.35;
  min-height: 38px;
}

.tpl-index-bordered .ix-box-date {
  margin-top: 10px;
  font-size: 12px;
  color: #555;
}

.tpl-index-bordered .ix-box-sign {
  margin-top: 12px;
  font-size: 10.5px;
  color: #8a8f99;
  border-top: 1px dashed #c3c8d1;
  padding-top: 7px;
}

.tpl-index-bordered .ix-empty {
  grid-column: 1/-1;
  margin-top: 36px;
  text-align: center;
  color: #999;
  font-size: 14px;
  font-style: italic;
}

/* ---- Decorative wave band — same abstract artwork as the "Cards"
   cover, reused on index templates 1 (Tabular) and 3 (Bordered) so
   the index page visually pairs with that cover. Sits low-opacity
   behind the middle of the page; negative z-index keeps it under
   the (non-positioned) header/table/grid content regardless of
   DOM order. ---- */
.tpl-index-tabular .ix-abstract-band,
.tpl-index-bordered .ix-abstract-band {
  position: absolute;
  top: 400px;
  left: 0;
  width: 100%;
  height: 340px;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
  opacity: .08;
  color: var(--ixp, #1e5993);
}

.tpl-index-tabular .ix-abstract-band svg,
.tpl-index-bordered .ix-abstract-band svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tpl-index-tabular .ix-abstract-band svg *,
.tpl-index-bordered .ix-abstract-band svg * {
  fill: currentColor !important;
}

/* ================================================================
   APP LOADER
   Full-screen "Updating cover…" splash shown while a render is in flight
   ================================================================ */
.app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 11, 16, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease
}

.app-loader.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}

.app-loader-card {
  min-width: 190px;
  padding: 22px 28px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(24, 28, 38, .97), rgba(18, 21, 29, .97));
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .8);
}

.app-loader-icon {
  font-size: 32px;
  color: var(--brass);
  filter: drop-shadow(0 5px 16px rgba(196, 187, 105, 0.38));
  line-height: 1;
}

/* Default (render/template-switch): pen-ruler rocks side to side */
.app-loader[data-loader-mode="render"] .app-loader-icon i,
.app-loader[data-loader-mode="default"] .app-loader-icon i {
  animation: loaderPen .85s ease-in-out infinite
}

/* Boot: genie wizard hat floats gently up and down */
.app-loader[data-loader-mode="boot"] .app-loader-icon i {
  animation: loaderGenie 1.4s ease-in-out infinite;
  display: inline-block;
}

/* Fetch: magnifying glass pulses scale */
.app-loader[data-loader-mode="fetch"] .app-loader-icon i {
  animation: loaderSearch .7s ease-in-out infinite alternate;
  display: inline-block;
}

.app-loader-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text);
  text-align: center;
}

.app-loader-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  min-height: 1.2em;   /* stops card jumping when text cycles */
  transition: opacity .3s ease;
}

@keyframes loaderPen {
  0%, 100% { transform: translateY(0) rotate(0)    }
  35%       { transform: translateY(-3px) rotate(-7deg) }
  65%       { transform: translateY(1px)  rotate(7deg)  }
}

@keyframes loaderGenie {
  0%, 100% { transform: translateY(0)    scale(1)    rotate(0deg)   }
  30%       { transform: translateY(-6px) scale(1.06) rotate(-4deg)  }
  60%       { transform: translateY(-3px) scale(1.03) rotate(3deg)   }
}

@keyframes loaderSearch {
  0%   { transform: scale(1)    rotate(-8deg); opacity: .85; }
  100% { transform: scale(1.18) rotate(8deg);  opacity: 1;   }
}

/* ================================================================
   THANKS POPUP
   Modal shown after a successful PDF/PNG download
   ================================================================ */
@keyframes thanksPop {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(.93);
  }

  60% {
    opacity: 1;
    transform: translateY(-3px) scale(1.015);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes thanksIconIn {
  0% {
    transform: scale(0.4) rotate(-20deg);
    opacity: 0;
  }

  55% {
    transform: scale(1.12) rotate(6deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes thanksRing {
  0% {
    box-shadow: 0 0 0 0 rgba(214, 162, 74, 0.45);
  }

  100% {
    box-shadow: 0 0 0 16px rgba(214, 162, 74, 0);
  }
}

@keyframes thanksSparkle {

  0%,
  100% {
    opacity: .35;
    transform: scale(.85) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.15) rotate(18deg);
  }
}

@keyframes thanksDrift {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  100% {
    transform: translateY(-46px) rotate(240deg);
    opacity: 0;
  }
}

.thanks-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s var(--ease), visibility .22s var(--ease);
}

.thanks-modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.thanks-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 50% 0%, rgba(214, 162, 74, 0.08), transparent 60%), rgba(9, 11, 16, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.thanks-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 30px 26px 24px;
  text-align: center;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: linear-gradient(165deg, var(--panel-3) 0%, var(--panel) 65%, #0d1017 100%);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(214, 162, 74, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transform: translateY(16px) scale(.93);
  opacity: 0;
}

.thanks-modal.show .thanks-card {
  animation: thanksPop .5s var(--ease) forwards;
}

.thanks-card::before {
  content: "";
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 180px;
  background: radial-gradient(closest-side, rgba(214, 162, 74, 0.22), transparent 72%);
  pointer-events: none;
}

.thanks-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.thanks-confetti span {
  position: absolute;
  top: 62%;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--brass-2);
  opacity: 0;
}

.thanks-modal.show .thanks-confetti span {
  animation: thanksDrift 1.1s var(--ease) forwards;
}

.thanks-confetti span:nth-child(1) {
  left: 18%;
  background: var(--brass-2);
  animation-delay: .05s;
}

.thanks-confetti span:nth-child(2) {
  left: 32%;
  background: var(--teal);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation-delay: .15s;
}

.thanks-confetti span:nth-child(3) {
  left: 50%;
  background: var(--brass);
  animation-delay: .02s;
}

.thanks-confetti span:nth-child(4) {
  left: 66%;
  background: var(--teal);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation-delay: .2s;
}

.thanks-confetti span:nth-child(5) {
  left: 80%;
  background: var(--brass-2);
  animation-delay: .1s;
}

.thanks-confetti span:nth-child(6) {
  left: 42%;
  background: var(--ok);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation-delay: .28s;
}

.thanks-confetti span:nth-child(7) {
  left: 58%;
  background: var(--brass);
  animation-delay: .22s;
}

.thanks-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}

.thanks-close:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.24);
  background: var(--panel-3);
  transform: rotate(90deg);
}

.thanks-icon-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
}

.thanks-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brass-2), var(--brass) 60%, #8a6a2c);
  box-shadow: 0 8px 22px -6px rgba(214, 162, 74, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--brass-ink);
  animation: thanksIconIn .55s var(--ease) .05s both;
}

.thanks-icon-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: thanksRing 1.3s var(--ease) .3s 2;
}

.thanks-sparkle {
  position: absolute;
  color: var(--brass-2);
  font-size: 11px;
  animation: thanksSparkle 1.8s ease-in-out infinite;
}

.thanks-sparkle.s1 {
  top: -4px;
  left: -8px;
  animation-delay: .1s;
}

.thanks-sparkle.s2 {
  bottom: 2px;
  right: -10px;
  font-size: 9px;
  animation-delay: .6s;
  color: var(--teal);
}

.thanks-sparkle.s3 {
  top: 6px;
  right: -14px;
  font-size: 8px;
  animation-delay: 1s;
}

.thanks-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.thanks-sub {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 6px;
}

.thanks-file {
  display: inline-block;
  margin-top: 2px;
  margin-bottom: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--brass-2);
  background: rgba(214, 162, 74, 0.1);
  border: 1px solid rgba(214, 162, 74, 0.25);
  border-radius: 7px;
  padding: 4px 10px;
  word-break: break-all;
}

.thanks-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
}

.thanks-actions .btn {
  width: 100%;
}

.thanks-thanks-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.thanks-thanks-btn .heart {
  animation: heartBeat 1.8s ease-in-out infinite;
}

.thanks-foot {
  margin: 14px 0 0;
  font-size: 10px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .02em;
}

/* ================================================================
   DOWNLOAD-CHOICE POPUP
   "Together" vs "one-by-one" prompt when both a cover + index exist
   ================================================================ */
.dl-choice-card {
  text-align: left;
  padding-top: 34px;
}

.dl-choice-card .thanks-title,
.dl-choice-card .thanks-sub {
  text-align: center;
}

.dl-choice-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 6px;
}

.dl-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--panel-2);
  color: var(--text);
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}

.dl-choice-btn:hover {
  border-color: var(--brass);
  background: var(--panel-3);
  transform: translateY(-1px);
}

.dl-choice-btn i {
  color: var(--brass-2);
  margin-bottom: 4px;
  font-size: 15px;
}

.dl-choice-title {
  font-weight: 700;
  font-size: 13.5px;
}

.dl-choice-note {
  font-size: 11px;
  color: var(--text-faint);
}