/* Li Ador Noirrit is loaded from CDNFonts via a <link> in covermaker.html
   (fonts.cdnfonts.com/css/li-ador-noirrit), which supplies its @font-face. */

/* Default Bangla font for the cover. Only applies in Bangla mode. If the
   Typography picker sets --paper-font inline on #paper, that choice wins. */
#paper.is-bangla,
[id^="paperIndex"].is-bangla {
  --paper-font: "Li Ador Noirrit", "Noto Serif Bengali", "Hind Siliguri", serif;
}

:root {
  color-scheme: dark;
  --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);
}

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

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  touch-action: none;
  overscroll-behavior: none;
}

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;
}

/* app-init.js's setupLanguageToggle() already toggles this class on
   #sidebar when state.language is 'bn'. The font-family below only reaches
   plain text (labels, descriptions, hints) via inheritance — inputs,
   selects, textareas, buttons, the custom-dropdown trigger, group titles,
   the auto-match-palette label, and the footer links all hardcode their own
   font-family further down this file (Inter or JetBrains Mono), which wins
   over inheritance. The block of overrides right after this rule forces
   those back onto the same Bangla stack so every bit of Bangla text in the
   sidebar — not just plain labels — actually uses it. */
#sidebar.is-bangla {
  font-family: 'Li Ador Noirrit', 'Noto Serif Bengali', 'Inter', system-ui, sans-serif;
}

#sidebar.is-bangla input,
#sidebar.is-bangla select,
#sidebar.is-bangla textarea,
#sidebar.is-bangla .csel-trigger,
#sidebar.is-bangla .btn,
#sidebar.is-bangla .group-title {
  font-family: 'Li Ador Noirrit', 'Noto Serif Bengali', 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

#sidebar.is-bangla .auto-match-toggle,
#sidebar.is-bangla .footer-link {
  font-family: 'Li Ador Noirrit', 'Noto Serif Bengali', 'Inter', system-ui, sans-serif;
}

#sidebar.is-bangla .hint {
  /* .hint hardcodes JetBrains Mono below, which has no Bengali glyphs — force
     it back onto the Bangla stack, same as the other overrides above. */
  font-family: 'Li Ador Noirrit', 'Noto Serif Bengali', 'Inter', system-ui, sans-serif;
}

/* Bangla sidebar, all elements. Most sidebar labels/titles/buttons hardcode
   Inter / Space Grotesk / JetBrains Mono, which have no Bengali glyphs; on a
   phone that silently becomes the system Bengali font. Force the Bangla stack
   everywhere except icons and the English brand block, and drop letter-spacing
   (tracking splits Bengali conjuncts). */
#sidebar.is-bangla *:not(i):not([class*="fa-"]):not(h1):not(.brand-mark):not(.brand-sub) {
  font-family: 'Li Ador Noirrit', 'Noto Serif Bengali', 'Hind Siliguri', system-ui, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

::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: #5e5a5486;
}

@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;
  }
}

.checkbox-label {
  display: flex;
  align-items: center;
}

.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
  accent-color: var(--brass);
}

#guestUniversityWrap,
#dateExpWrap,
#indexOptionsWrap,
#idxTplGroup,
#indexDetailsWrap,
#labEntriesWrap,
#downloadSelectGroup {
  animation: fadeSlideUp .32s var(--ease) both;
}

#dateExpWrap {
  position: relative;
  z-index: 1;
}

#guestUniversityWrap {
  position: relative;
  z-index: 2;
}

.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) {
  .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: 4;
    gap: 7px;
    margin-left: auto;
  }

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

  .stage-toolbar .zoom-ctl input[type=range] {
    width: 64px;
  }

  /* Mobile toolbar, two tidy rows:
       1) "A4 210 × 297 mm · Template"  (left)   |   zoom control  (right)
       2) "Say thanks" + "Contribute" pills, centered
     .dims is dissolved (display: contents) so its two groups can be placed
     as separate flex items of the toolbar. */
  .stage-toolbar .dims {
    display: contents;
    font-size: 10px;
  }

  .stage-toolbar .dims-info {
    order: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
  }

  .stage-toolbar .dims-pills {
    order: 5;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .stage-toolbar .dims .pill {
    padding: 3px 11px;
    font-size: 9.5px;
  }

  .stage-toolbar .dims .pill-thanks {
    font-size: 9.5px;
    padding: 4px 11px;
  }

  .stage-scroll {
    padding: 150px 6px 64px;
    margin-bottom: 60px !important;
  }

  .pages-viewport-sizer {
    margin-top: 0;
  }
}

.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;
  touch-action: pan-y;
  overscroll-behavior: contain;
  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-logo {
  width: 26px;
}

.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;
}

.auto-match-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  max-width: 92px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  cursor: pointer;
  transition: color .2s var(--ease);
}

.auto-match-toggle:hover {
  color: var(--text-dim);
}

.auto-match-toggle input {
  accent-color: var(--brass);
  width: 13px;
  height: 13px;
  flex: none;
  cursor: pointer;
}

.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: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%), var(--panel-2);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

.group:last-of-type {
  margin-bottom: 0;
}

.group:hover {
  border-color: var(--line-2);
}

.group.open {
  border-color: rgba(214, 164, 74, 0.32);
  background: linear-gradient(180deg, rgba(214, 164, 74, 0.05) 0%, rgba(214, 164, 74, 0) 60%), var(--panel-2);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(214, 164, 74, 0.06);
}

.group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.2px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brass-2);
  margin: 0;
  padding: 15px 16px 15px 21px;
  border-radius: 13px 13px 0 0;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: background .2s var(--ease);
}

.group-title:hover {
  background: rgba(255, 255, 255, 0.025);
}

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

.group.open>.group-title::before {
  opacity: 1;
}

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

.group-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  color: var(--text-faint);
  font-size: 10px;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.group-title:hover .group-icon {
  border-color: rgba(214, 164, 74, 0.3);
  color: var(--brass-2);
}

.group.open>.group-title .group-icon {
  background: rgba(214, 164, 74, 0.14);
  border-color: rgba(214, 164, 74, 0.32);
  color: var(--brass-2);
}

.group-chevron-wrap {
  flex: none;
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.group-title:hover .group-chevron-wrap {
  border-color: rgba(214, 164, 74, 0.45);
}

.group.open>.group-title .group-chevron-wrap {
  background: linear-gradient(140deg, var(--brass-2), var(--brass) 65%, #8a6a2c);
  border-color: transparent;
  box-shadow: 0 3px 9px -2px rgba(214, 164, 74, 0.55);
}

.group-chevron {
  font-size: 9px;
  color: var(--text-faint);
  transition: transform .35s var(--ease), color .2s var(--ease);
}

.group-title:hover .group-chevron {
  color: var(--brass-2);
}

.group.open>.group-title .group-chevron {
  transform: rotate(180deg);
  color: var(--brass-ink);
}

.group-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 18px;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
}

.group.open>.group-body {
  opacity: 1;
  padding: 6px 18px 18px;
}

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

.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="email"],
input[type="date"],
input[type="number"],
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);
}

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;
  margin-bottom: 6px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}

.csel-option:nth-child(1) {
  margin-bottom: 6px;
}

.csel-option:last-child {
  margin-bottom: 0px;
}

.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;
}

.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;
}

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: 20000 !important;
  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;
  }

  .tpl-brief .bf-uni {
    font-size: 19px;
  }

  .tpl-brief .bf-dept {
    font-size: 11px;
  }

  .tpl-brief .bf-topic {
    font-size: 20px;
  }

  .tpl-emblem .university {
    font-size: 23px;
  }

  .tpl-emblem .department {
    font-size: 20px;
  }

  .tpl-emblem .assignment-info {
    font-size: 16px;
  }

  .tpl-emblem .fields {
    margin-top: 18px;
  }

  .tpl-emblem .date {
    font-size: 16px;
  }

  .tpl-cards .course-info {
    font-size: 16px;
  }
}

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

/* Whole group rises above the groups after it while its calendar is open */
#sidebar .group.cdate-open {
  position: relative;
  z-index: 60;
}

/* Opens upward when there is no room below (set by placePanel() in ui-controls.js) */
.cdate.drop-up .cdate-panel {
  top: auto;
  bottom: calc(100% + 7px);
  transform-origin: bottom left;
  transform: translate(var(--cdate-tx), 6px) scale(0.97);
}

.cdate.drop-up.open .cdate-panel {
  transform: translate(var(--cdate-tx), 0) scale(1);
}

@media (max-width:760px) {
  .cdate.drop-up .cdate-panel {
    transform-origin: bottom center;
  }
}

.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-day:disabled {
  opacity: 0.35;
  cursor: default;
}

.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:empty {
  min-height: 0;
  margin-top: 0;
}

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

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

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

.tpl-card {
  position: relative;
  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-check {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--panel-2);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .15s var(--ease), transform .15s var(--ease);
  pointer-events: none;
  z-index: 2;
}

.tpl-check svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: #332b14;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: absolute;
  right: 3px;
  top: 2px;
}

.tpl-card.active .tpl-check {
  opacity: 1;
  transform: scale(1);
}

.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;
}

.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-bulk-add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lab-bulk-add input[type="number"] {
  flex: 1;
  min-width: 0;
  padding: 6px;
}

.lab-bulk-add .btn {
  flex: none;
}

.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;
}

#addGroupMemberBtn {
  width: 100%;
  margin-top: 10px;
  justify-content: center;
}

.lab-entry-row.gm-row {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.gm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gm-idx {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .02em;
  color: var(--text-faint);
}

.gm-idx i {
  font-size: 10.5px;
  color: var(--brass);
}

.gm-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.gm-leader-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #7a5a12;
  background: rgba(213, 155, 0, 0.18);
  border: 1px solid rgba(213, 155, 0, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  flex: none;
  white-space: nowrap;
}

.gm-leader-badge i {
  font-size: 9.5px;
}

.gm-row .le-remove {
  margin-top: 0;
}

.lab-entry-row .gm-roll {
  width: 72px;
  flex: none;
}

.lab-entry-row .gm-id {
  flex: 1;
  min-width: 0;
}

.lab-entry-row .le-fields-inline>.field-suggest {
  flex: 1;
  min-width: 0;
}

#needIndexWrap {
  margin-bottom: 10px;
}

.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);
  line-height: 1.5;
}

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

.palette-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-left: 0 5px;
}

.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;
}

.pal-check {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--panel-2);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .15s var(--ease), transform .15s var(--ease);
  pointer-events: none;
  z-index: 2;
}

.pal-check svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: #332b14;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: absolute;
  right: 3px;
  top: 2px;

}

.palette-swatch.active .pal-check {
  opacity: 1;
  transform: scale(1);
}

.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-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-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 {
  position: absolute;
  top: 0;
  left: 0;
  right: 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;
}

/* Zoom slider: the global input:focus ring (border, background, glow) made a
   box appear around the whole control on touch. Sliders get no field chrome. */
input[type=range],
input[type=range]:hover,
input[type=range]:focus,
input[type=range]:focus-visible,
input[type=range]:active {
  outline: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.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;
}

/* Desktop: these wrappers are transparent, layout is unchanged. */
.dims-info,
.dims-pills {
  display: contents;
}

.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 {
  position: relative;
  overflow: hidden;
  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;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: auto;
  overscroll-behavior: contain;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  align-items: safe center;
  justify-content: safe center;
  padding: 66px 20px 20px;
}

.stage-scroll::-webkit-scrollbar {
  display: none;
}

.pages-viewport-sizer {
  position: relative;
  flex: none;
}

.pages-viewport {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  transform-origin: top left;
  transition: transform .18s var(--ease);
}

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

.pages-viewport.layout-row {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-items: start;
}

.pages-viewport.layout-row .paper-wrap.pv-last-centered {
  grid-column: 1 / -1;
  justify-self: center;
}

.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,
[id^="paperIndex"] {
  width: 210mm;
  height: 297mm;
  background: #fff;
  color: #111;
  position: relative;
  overflow: hidden;
  transform-origin: top center;
  border-radius: 3px;
  z-index: 1;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.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-ctl {
  display: none;
  align-items: center;
  gap: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 3px;
}

.lang-ctl {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 10px;
}

.lang-ctl button {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .02em;
  padding: 8.5px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}

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

.lang-ctl button.active {
  background: var(--brass);
  color: var(--brass-ink);
  padding: 10px;
}

.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);
}

@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;
    margin: 0 !important;
  }

  .pages-viewport-sizer {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

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

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

  #paper,
  [id^="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 *,
  [id^="paperIndex"],
  [id^="paperIndex"] * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.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);
}

.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);
}

@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="email"],
  input[type="date"],
  input[type="number"],
  select,
  textarea,
  .csel-trigger,
  .cdate-trigger {
    font-size: 16px;
  }
}

.sidebar-close {
  display: none;
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -6px -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;
  }
}

/* Generic fallback for the small "Leader" tag next to a group member's name;
   templates with their own palette variables override the color locally. */
.grp-leader-tag {
  font-size: 10px;
  font-weight: 700;
  color: #555;
  border: 1px solid currentColor;
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  white-space: nowrap;
}

.tpl-cards {
  font-family: var(--paper-font, "Times New Roman", Times, serif);
}

.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: auto;
  min-width: 110px;
  width: 100px;
  max-width: 260px;
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
}

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

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

.tpl-cards .dept-title {
  font-size: 19px;
  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: 18px;
  font-weight: 700;
  color: #555;
  margin-bottom: 8px;
}

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

.tpl-cards .course-info {
  font-size: 18px;
  margin-bottom: 10px;
  display: table;
  width: 100%;
}

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

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

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

.tpl-cards .cards-container {
  position: absolute;
  top: 720px;
  left: 40px;
  right: 40px;
  height: 220px;
}

.tpl-cards .card {
  position: absolute;
  top: 0;
  left: 0;
  width: 335px;
  height: 205px;
  background: var(--tc-tint-rgba, rgba(84, 93, 100, 0.664));
  border-radius: 25px;
  padding: 22px;
  box-sizing: border-box;
  z-index: 2;
}

/* Single-student mode: card height comes from the content (no fixed height).
   Flex row keeps both cards equal (tallest wins); the date flows below. */
.tpl-cards .cards-container:not(.group-mode) {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  height: auto;
}

.tpl-cards .cards-container:not(.group-mode) .card {
  position: relative;
  flex: 0 0 335px;
  height: auto;
  min-height: 0;
}

.tpl-cards .cards-container:not(.group-mode) .footer-date {
  position: static;
  flex: 0 0 100%;
  margin-top: 45px;
}

.tpl-cards .card-title {
  font-size: 18.5px;
  font-weight: 800;
  color: var(--tc-bar, #1e5993);
  margin-bottom: 10px;
}

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

.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;
}

/* Bangla mode: the 80px label column fits English words ("Semester", "ID")
   but wraps Bangla ones ("সেমিস্টার") onto a second line — and since .card
   has a fixed height with no clipping, that second line spills out past the
   rounded card border instead of just being cut off. Let the column grow to
   fit its content on one line instead, and give the card itself a little
   extra height as a safety margin (the footer below still has 40px of
   clearance at the original 220px, so this doesn't collide with anything). */
#paper.is-bangla .tpl-cards .student-table .lbl {
  width: auto;
  min-width: 44px;
  white-space: nowrap;
  padding-right: 4px;
}

/* Bangla mode keeps the original taller layout (English got tighter cards) */
#paper.is-bangla .tpl-cards .student-table {
  margin-top: 20px;
}

#paper.is-bangla .tpl-cards .teacher-info {
  margin-top: 51px;
}

.tpl-cards .student-table tr:nth-child(even) td {
  background: var(--tc-tintrow, #a4c4df);
  padding: 3px 10px;
  border-radius: 2px;
}

.tpl-cards .student-table tr:nth-child(odd) td {
  padding: 3px 10px;
  border-radius: 2px;
}

.tpl-cards .submitted-to-card {
  left: auto;
  right: 0;
  text-align: right;
}

.tpl-cards .teacher-info {
  font-size: 16px;
  color: #222;
  margin-top: 38px;
}

@media (max-width: 600px) {
  .tpl-cards .teacher-info,
  .tpl-cards .student-table {
    font-size: 14.8px !important;
  }
  .tpl-cards .uni-title {
  font-size: 26px !important;
  }
  .tpl-cards .assignment-title {
  font-size: 24px !important;
  }
}

.tpl-cards .teacher-info>* {
  margin-top: 6px;
}

.tpl-cards .teacher-info>*:first-child {
  margin-top: 0;
}

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

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

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

.teacher-title {
  padding-right: 10px !important;
}

.tpl-cards .footer-date {
  position: absolute;
  /* .cards-container is itself absolutely positioned at top:720px, so this is
     relative to it: 290px here = 1010px on the page. (1010px put the date at
     ~1730px, i.e. off the bottom of the page.) */
  top: 290px;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 18px;
}

.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;
}

/* Group-assignment variant: the two side-by-side cards give way to one
   full-width roster card, with the "Submitted To" block and date flowing
   underneath instead of sitting in a matched card + fixed-height footer. */
.tpl-cards .cards-container.group-mode {
  position: absolute;
  top: 620px;
  left: 40px;
  right: 40px;
  height: auto;
  display: block;
}

.tpl-cards .group-card {
  position: static;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 20px 26px;
  margin-bottom: 22px;
}

.tpl-cards .group-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tpl-cards .group-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--tc-bar, #1e5993);
  opacity: .75;
  white-space: nowrap;
}

.tpl-cards .group-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tpl-cards .group-table th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--tc-accent, #6b1d52);
  padding: 5px 8px;
  border-bottom: 1.5px solid rgba(0, 0, 0, .18);
}

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

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

.tpl-cards .group-table tbody tr.grp-leader-row td {
  background: var(--tc-bar, #adc6df);
  color: white;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--tc-bar, #1e5993);
}

.tpl-cards .group-table th:last-child,
.tpl-cards .group-table td.grp-td-roll {
  width: 60px;
}

.tpl-cards .group-table .grp-empty-row td {
  font-style: italic;
  opacity: .6;
  padding: 10px 8px;
}

.tpl-cards .grp-leader-tag {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 10px;
  padding: 1px 6px;
  white-space: nowrap;
  margin-left: 4px;
}

.tpl-cards .group-submitted-to {
  margin-top: 24px;
  text-align: right;
}

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

.tpl-cards .group-to-name {
  font-size: 15.5px;
  font-weight: 600;
  color: #222;
}

.tpl-cards .group-to-desig,
.tpl-cards .group-to-dept {
  font-size: 15px;
  color: #222;
  font-weight: 300;
  margin-top: 2px;
}

.tpl-cards .group-date-row {
  margin-top: 22px;
  font-size: 16px;
  text-align: center;
}

.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: 138px;
  top: -15px;
  width: 658px;
  height: 701px;
  overflow: hidden;
  z-index: 0;
}

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

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

.tpl-emblem .header-block {
  position: absolute;
  left: 380px;
  top: 60px;
  width: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

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

.tpl-emblem .logo-slot img {
  max-height: 130px;
  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.18;
  white-space: normal;
  overflow-wrap: break-word;
  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: 470px;
  color: #111;
  font-size: 17px;
  line-height: 1.72;
  white-space: nowrap;
}

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

.tpl-emblem .assignment-info .row-split {
  display: grid;
  /* Must mirror .row above, including its 10px gap (inherited from the generic
     .row rule), so the Course Code colon and value line up with the rows above.
     Then: value, Date of Exp label, its colon, and the date. */
  grid-template-columns: 200px 23px 85px 88px 23px 1fr;
  column-gap: 10px;
}

.emb-cValue {
  margin-left: 0;
}

.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: 198px;
  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: 19px;
  line-height: 1;
  white-space: nowrap;
  font-weight: 500;
}

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

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

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

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

.tpl-emblem .submitted-to .fields div+div {
  margin-top: 4px;
}

.tpl-emblem .submitted-to .fields .name {
  font-weight: 700;
  margin-bottom: 8px;
}

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

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

/* Group-assignment variant: a compact roster table stands in for the
   vertical name/ID/roll field list. It gets a wider column — borrowed from
   "Submitted To", which doesn't need the full width for a name + a couple
   of lines — so the table can run a larger, more legible font. */
.tpl-emblem.is-group .submitted-by {
  width: 420px;
}

.tpl-emblem.is-group .submitted-divider {
  left: 483px;
}

.tpl-emblem.is-group .submitted-to {
  left: 497px;
  width: 234px;
}

.tpl-emblem .submitted-by.is-group .section-title {
  white-space: nowrap;
}

.grp-count-badge {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--paper-font, "Times New Roman", Times, serif);
  font-size: 12.5px;
  font-weight: 400;
  font-style: italic;
  color: #6b6b6b;
  letter-spacing: .2px;
  vertical-align: middle;
}

.tpl-emblem .emb-group-table {
  margin-top: 14px;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13.5px;
  color: #111;
}

.tpl-emblem .emb-group-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--te-primary, #273797);
  padding: 4px 6px;
  border-bottom: 1.2px solid var(--te-primary, #273797);
}

.tpl-emblem .emb-group-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpl-emblem .emb-group-table th:nth-child(1),
.tpl-emblem .emb-group-table td.grp-td-no {
  width: 10%;
}

.tpl-emblem .emb-group-table th:nth-child(2),
.tpl-emblem .emb-group-table td.grp-td-name {
  width: 46%;
  white-space: normal;
}

.tpl-emblem .emb-group-table th:nth-child(3),
.tpl-emblem .emb-group-table td.grp-td-id {
  width: 34%;
}

.tpl-emblem .emb-group-table th:nth-child(4),
.tpl-emblem .emb-group-table td.grp-td-roll {
  width: 10%;
}

.tpl-emblem .emb-group-table .grp-empty-row td {
  font-style: italic;
  opacity: .6;
  padding: 8px 6px;
  white-space: normal;
}

.tpl-emblem .emb-group-table tbody tr.grp-leader-row td {
  background: var(--te-primary, #273797);
  color: #fff;
  font-weight: 600;
  box-shadow: inset .5px 0 0 #ffffff25;
}

.tpl-emblem .emb-group-table tbody tr.grp-leader-row td:first-child {
  border-radius: 0;
}

.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(130, 133, 148, 0.16) 66.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.15;
  white-space: normal;
  overflow-wrap: break-word;
  letter-spacing: -.02em
}

.tpl-spring .dept {
  color: #6a7074;
  font-size: 15px;
  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: 250px;
  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: 460px;
  left: 62px;
  right: 62px;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px
}

/* Group mode: keep "Submitted By" and "Submitted To" side by side rather than
   stacked. Stacking made the info-grid's height the SUM of both cards, which
   is what was pushing the meta-strip/date/footer (and eventually the footer
   itself) past the bottom of the page once a roster grew past a couple of
   members. Side by side, the grid's height is just the taller of the two. */
.tpl-spring.is-assignment .info-grid {
  top: 448px;
}

.tpl-spring.is-group .info-grid {
  grid-template-columns: 1fr;
  row-gap: 22px;
}

.tpl-spring.is-group .info-card.to {
  min-height: 0;
}

/* Group covers: the Academic Profile strip sits inside the grid, between
   "Submitted By" and "Submitted To", so it flows with the grid's row gap
   instead of using its own absolute offset / top margin. */
.tpl-spring.is-group .info-grid .meta-strip {
  position: static;
  top: auto;
}

.tpl-spring.is-group .info-grid .meta-box {
  margin-top: 0;
}

.tpl-spring .info-card {
  /* .info-card is also the class of the info modal (max-width: 650px,
     max-height, overflow hidden). Reset those here, otherwise the cover card
     stops 20px short of the meta-strip / footer cards below it. */
  width: auto;
  max-width: none;
  max-height: none;
  min-height: 154px;
  border: 1px solid #dfe3ef;
  border-top: 3px solid var(--au-navy, #153c50);
  border-radius: 14px;
  padding: 16px 18px 16px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 12px 24px -18px rgba(39, 55, 151, .42);
  position: relative;
  opacity: 1;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

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

.tpl-spring.is-group .info-card.to {
  text-align: left;
}

.tpl-spring .card-title {
  color: var(--au-navy, #153c50);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
  margin-top: 8px;
  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: 15px;
  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 .grp-name-tag {
  position: absolute;
  top: 14px;
  right: 18px;
  max-width: 45%;
  padding: 4px 12px;
  border: 1px solid var(--au-navy, #153c50);
  border-radius: 999px;
  background: var(--au-navy, #153c50);
  color: #ffffff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpl-spring .grp-stack-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #444;
}

.tpl-spring .grp-stack-sub {
  font-size: 12px;
  color: #7a8084;
  margin-top: 1px;
}

/* Leader chip (Aurum only). The generic .grp-leader-tag is an outlined pill
   whose border + padding stick out of the name's line box, so on this
   template it touched the ID / Roll line right underneath. Here it is a solid
   accent-colour chip with no border, drawn small enough to sit fully inside
   the name's own line, and nudged with `position: relative` (which never
   changes layout) so it can't push or overlap the next line at any font. */
.tpl-spring .grp-stack-name .grp-leader-tag {
  display: inline;
  margin-left: 8px;
  padding: 1px 7px;
  border: 0;
  border-radius: 3px;
  background: var(--au-gold, #153c50);
  color: #ffffff;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  top: -1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tpl-spring .grp-wrap-item {
  margin-top: 8px;
}

.tpl-spring .grp-wrap-item:first-child {
  margin-top: 0;
}

/* A real 2-column CSS grid instead of `column-count`. column-count "balances"
   items into columns by height, not by a fixed left/right assignment, so an
   uneven member count (e.g. 7) could end up with 4 members stacked in one
   column and the leftover member visually landing under the wrong neighbour
   ("4 below 3") instead of beside its actual row partner. Grid places items
   left-to-right, top-to-bottom in a fixed 2-column layout, so the order is
   always deterministic: 1&2 share row 1, 3&4 share row 2, and so on. */
.tpl-spring .grp-stack-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 10px;
}

/* Grid supplies its own row spacing, so the block-flow margin every item
   carries (for the single-column, <=3 member case) would just double it up
   here — turn it off inside the grid. */
.tpl-spring .grp-stack-wrap .grp-wrap-item {
  margin-top: 0;
}

/* Dense roster (6+ members): tighten type and spacing so the card stays
   inside the height budget instead of relying on --au-group-shift, which is
   now capped and can no longer absorb unlimited growth. */
.tpl-spring.grp-many .grp-wrap-item {
  margin-top: 5px;
}

.tpl-spring.grp-many .grp-stack-wrap {
  row-gap: 5px;
}

.tpl-spring.grp-many .info-card.submitted-by {
  padding: 16px;
}

.tpl-spring.grp-many .card-title {
  margin-top: 8px;
  margin-bottom: 6px;
}

.tpl-spring.is-group.grp-many .info-grid {
  row-gap: 12px;
}

/* 7-8 members: the shift that pushes the meta-strip/date/footer down is
   capped (see adjustSpringGroupLayout), so at this size the roster has to
   shrink further on its own or the footer runs off the bottom of the page. */
.tpl-spring.grp-verymany .grp-stack-wrap {
  row-gap: 3px;
}

.tpl-spring.grp-verymany .info-card.submitted-by {
  padding: 14px;
  margin-bottom: 10px;
}

.tpl-spring.grp-verymany .card-title {
  margin-top: 2px;
  margin-bottom: 4px;
}

.tpl-spring.grp-verymany .info-card.to {
  padding: 10px 16px 10px;
}

.tpl-spring.grp-verymany .to-person {
  margin-top: 6px;
  gap: 3px;
}

/* Group mode now stacks Submitted By / Submitted To top-to-bottom instead of
   side by side, so each card gets the full page width instead of half of it.
   Bump the type up a bit to use that extra room. */
.tpl-spring.is-group .card-title {
  font-size: 16px;
}

.tpl-spring.is-group .grp-stack-name {
  font-size: 13.5px;
}

.tpl-spring.is-group .grp-stack-sub {
  font-size: 12px;
}

/* Roster type is a fixed size for every member count (no per-count
   shrinking); only spacing tightens for big rosters (grp-many / grp-verymany). */
.tpl-spring.is-group .info-card.to .person-name {
  font-size: 17px;
}

.tpl-spring.is-group .info-card.to .person-meta {
  font-size: 16px;
}

.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: 15px;
  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: calc(660px + var(--au-group-shift, 0px));
  left: 62px;
  right: 62px;
  z-index: 4
}

.tpl-spring .meta-box {
  padding: 15px 18px 15px;
  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;
  margin-top: 30px;
}

.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: 15px;
  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: calc(750px + var(--au-group-shift, 0px));
  left: 62px;
  right: 62px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 15px;
  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.is-group .to-person {
  align-items: flex-start;
  text-align: left;
}

.tpl-spring .person-name {
  color: #111111;
  font-size: 15px;
  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: 15px;
  font-weight: 700
}

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

.tpl-spring .person-meta {
  color: #111111;
  font-size: 15px;
  font-weight: 600;
  line-height: 1 !important
}

.tpl-spring .submitted-by .detail,
.tpl-spring .info-card.to .person-meta {
  color: #6f767d;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55
}

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

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

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

.tpl-spring .spring-footer {
  position: absolute;
  left: 62px;
  right: 62px;
  top: calc(826px + var(--au-group-shift, 0px));
  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: 15px;
  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: 13.5px;
  font-weight: 600;
  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: 13.5px;
  text-align: center;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase
}

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

.tpl-dusk {
  position: relative;
  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
}

.tpl-dusk .dk-artwork {
  position: absolute;
  inset: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.tpl-dusk .dk-panel {
  position: relative;
  flex: none;
  width: 268px;
  height: calc(100% + 2px);
  margin-right: -2px;
  margin-bottom: -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: 15px;
  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;
}

.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;
  margin-top: 10px;
}

.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: 100px;
  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: 15px;
  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: 15px;
  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;
  margin-bottom: 20px;
}

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

.tpl-dusk .dk-to-name,
.tpl-dusk .dk-by-name {
  color: #241a17;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.tpl-dusk .dk-by-line+.dk-by-name {
  margin-top: 10px;
}

.tpl-dusk .dk-to-desig,
.tpl-dusk .dk-to-dept,
.tpl-dusk .dk-by-line {
  margin-top: 4px;
  color: #8a7d74;
  font-weight: 400;
  font-size: 15px;
  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;
}

.tpl-circles {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: #181818;
  font-family: var(--paper-font, "Times New Roman", Times, serif);
}

.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: 80px;
  left: 86px;
  z-index: 2;
  max-width: 240px;
}

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

.tpl-circles .ci-box {
  position: absolute;
  top: 224px;
  left: 86px;
  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: 16.5px;
  color: #333;
  margin-bottom: 30px;
}

.tpl-circles.is-group .ci-student-name {
  font-size: 17px;
  margin-bottom: 1px;
}

.tpl-circles.is-group .ci-student-meta {
  font-size: 14px;
  margin-bottom: 10px;
}

.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 {
  margin-bottom: 26px;
}

.tpl-circles .ci-teacher-name {
  font-size: 16.5px;
  font-weight: 700;
  color: #333;
}

.tpl-circles .ci-teacher-line {
  font-size: 16.5px;
  color: #333;
  margin-top: 4px;
}

.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;
  font-weight: 400;
}

.tpl-circles .ci-due-label {
  font-weight: 700;
}

.tpl-brief {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fdfcfa;
  color: #23262f;
  font-family: var(--paper-font, "Times New Roman", Times, serif);
}

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

.tpl-brief .bf-corner {
  position: absolute;
  width: 150px;
  height: 150px;
  z-index: 2;
  pointer-events: none;
}

.tpl-brief .bf-corner-tl {
  top: -1px;
  left: -1px;
}

.tpl-brief .bf-corner-br {
  bottom: -1px;
  right: -1px;
  transform: rotate(180deg);
}

.tpl-brief .bf-corner span {
  position: absolute;
  top: -1px;
  left: -1px !important;
  width: 0;
  height: 0;
  border-style: solid;
}

.tpl-brief .bf-corner-a {
  border-width: 150px 150px 0 0;
  border-color: var(--bf-primary, #333846) transparent transparent transparent;
}

.tpl-brief .bf-corner-b {
  border-width: 130px 130px 0 0;
  border-color: var(--bf-accent, #c99a57) transparent transparent transparent;
}

.tpl-brief .bf-frame {
  position: absolute;
  inset: 30px;
  border: 1.5px solid var(--bf-primary, #2b2f3a);
  z-index: 1;
  pointer-events: none;
}

.tpl-brief .bf-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 92px 68px 68px;
  position: relative;
  z-index: 2;
}

.tpl-brief .bf-header {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 20px;
}

.tpl-brief .bf-logo {
  width: 90px;
  height: auto;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 16px;
}

.tpl-brief .bf-logo.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tpl-brief .bf-logo-placeholder {
  border: 2px dashed #c7cad3;
  background: #f7f7f5;
  color: #b7bac4;
  flex-direction: column;
  gap: 2px;
}

.tpl-brief .bf-logo-placeholder i {
  font-size: 20px;
}

.tpl-brief .bf-logo-placeholder span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}

.tpl-brief .bf-header-text {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 40px;
}

.tpl-brief .bf-uni {
  font-size: 24px;
  font-weight: 800;
  color: #23262f;
  line-height: 1.2;
}

.tpl-brief .bf-dept {
  font-size: 15px;
  font-weight: 600;
  color: #777c88;
  margin-top: 3px;
}

.tpl-brief .bf-rule {
  display: flex;
  margin-top: 18px !important;
  height: 4px;
  width: 220px;
}

.tpl-brief .bf-rule-a {
  width: 60%;
  background: var(--bf-accent, #c99a57);
}

.tpl-brief .bf-rule-b {
  width: 40%;
  background: var(--bf-primary, #2b2f3a);
}

.tpl-brief .bf-art {
  flex: none;
  width: 220px;
  height: 220px;
  overflow: visible;
  position: relative;
}

.tpl-brief .bf-art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.tpl-brief .bf-art-fallback {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg,
      var(--bf-primary, #273797) 0%,
      var(--bf-primary, #273797) 45%,
      var(--bf-accent, #c99a57) 100%);
}

.tpl-brief .bf-art-grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: .15;
}

.tpl-brief .bf-art-grid svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tpl-brief .bf-art-arc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: .20;
}

.tpl-brief .bf-art-arc svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tpl-brief .bf-art-mono {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 52px;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 3px 16px rgba(0, 0, 0, .30);
  letter-spacing: .04em;
  line-height: 1;
}

.tpl-brief .bf-art-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, .28);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .80);
  text-align: center;
  z-index: 2;
}

.tpl-brief .bf-art-dept {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1.18) translate(0%, 2%);
  transform-origin: 55% 45%;
  filter: contrast(1.03);
}

.tpl-brief .bf-art-dept svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tpl-brief .bf-statement {
  flex: none;
  padding: 16px 0 12px;
}

.tpl-brief .bf-doctype-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bf-primary, #273797);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 13px 5px 13px;
  border-radius: 3px;
  margin-bottom: 12px;
  margin-top: 200px;
}

.tpl-brief .bf-doctype-eyebrow i {
  font-size: 11px;
  opacity: .85;
}

.tpl-brief .bf-doctype {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #23262f;
  line-height: 1.08;
}

.tpl-brief .bf-topic {
  margin-top: 0px;
  margin-bottom: 30px;
  font-size: 26px;
  font-weight: 800;
  color: var(--bf-accent, #c99a57);
  line-height: 1.4;
}

.tpl-brief .bf-rows {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 11px;
}

.tpl-brief .bf-row {
  display: grid;
  grid-template-columns: 24px 128px 14px 1fr;
  align-items: baseline;
  column-gap: 6px;
  border-bottom: 1px solid #e4e3dd;
  padding-bottom: 8px;
}

.tpl-brief .bf-row-pair {
  display: grid;
  grid-template-columns: 24px 128px 14px 1fr 1px 24px 128px 14px 1fr;
  align-items: baseline;
  column-gap: 6px;
  border-bottom: 1px solid #e4e3dd;
  padding-bottom: 8px;
}

.tpl-brief .bf-row-pair .bf-cell-divider {
  grid-column: 5;
  align-self: stretch;
  background: #e4e3dd;
  width: 1px;
  margin: 0 10px;
}

.tpl-brief .bf-row-pair .bf-cell {
  display: contents;
}

.tpl-brief .bf-row-pair .bf-cell:first-child .bf-row-icon {
  grid-column: 1;
}

.tpl-brief .bf-row-pair .bf-cell:first-child .bf-row-label {
  grid-column: 2;
}

.tpl-brief .bf-row-pair .bf-cell:first-child .bf-row-colon {
  grid-column: 3;
}

.tpl-brief .bf-row-pair .bf-cell:first-child .bf-row-value {
  grid-column: 4;
}

.tpl-brief .bf-row-pair .bf-cell:last-child .bf-row-icon {
  grid-column: 6;
}

.tpl-brief .bf-row-pair .bf-cell:last-child .bf-row-label {
  grid-column: 7;
}

.tpl-brief .bf-row-pair .bf-cell:last-child .bf-row-colon {
  grid-column: 8;
}

.tpl-brief .bf-row-pair .bf-cell:last-child .bf-row-value {
  grid-column: 9;
}

.tpl-brief .bf-row-icon {
  width: 26px;
  align-self: center;
  text-align: center;
  color: var(--bf-accent, #c99a57);
  font-size: 14px;
}

.tpl-brief .bf-row-label {
  width: 128px;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: #4b4f5a;
}

.tpl-brief .bf-row-colon {
  text-align: center;
  color: #9a9ea8;
  font-weight: 700;
}

.tpl-brief .bf-row-value {
  min-width: 0;
  font-size: 14.5px;
  color: #23262f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpl-brief .bf-row-wrap {
  align-items: start;
}

.tpl-brief .bf-row-wrap .bf-row-icon {
  align-self: start;
  margin-top: 1px;
}

.tpl-brief .bf-row-wrap .bf-row-value {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
}

.tpl-brief .bf-roster {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  margin-bottom: 4px;
  padding: 8px 12px;
  border: 1px solid #e4e3dd;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.015);
}

.tpl-brief .bf-roster-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  padding: 3px 0;
}

.tpl-brief .bf-roster-row+.bf-roster-row {
  border-top: 1px dashed #e4e3dd;
  padding-top: 6px;
}

.tpl-brief .bf-roster-num {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--bf-primary, #1e5993);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.tpl-brief .bf-roster-row.is-leader .bf-roster-num {
  background: var(--bf-accent, #c99a57);
}

.tpl-brief .bf-roster-name {
  font-size: 14px;
  font-weight: 700;
  color: #23262f;
}

.tpl-brief .bf-roster-tag {
  margin-left: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bf-accent, #c99a57);
}

.tpl-brief .bf-roster-meta {
  margin-left: auto;
  flex: none;
  font-size: 11.5px;
  color: #7a7e88;
  white-space: nowrap;
}

.tpl-brief .bf-roster-empty {
  font-size: 12.5px;
  font-style: italic;
  color: #9a9ea8;
  padding: 4px 0;
}

.tpl-brief .bf-signoff {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 16px;
  color: var(--bf-accent, #c99a57);
}

.tpl-brief .bf-signoff-line {
  width: 80px;
  height: 1px;
  background: #d8d7cf;
}

.tpl-brief .bf-signoff i {
  font-size: 20px;
}

.tpl-ledger {
  width: 100%;
  height: 100%;
  background: #fff;
  font-family: var(--paper-font, 'Times New Roman', Times, serif);
  color: #111;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  border: none;
  padding: 45px;
}

.tpl-ledger::before {
  content: '';
  position: absolute;
  inset: 40px;
  border: 2px double var(--lg-border, #95a4b6);
  pointer-events: none;
}

.lg-topbar,
.lg-bottombar {
  display: none;
}

.lg-header {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 28px 24px;
}

.lg-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  flex: none;
  margin-top: 10px;
}

.lg-logo-img {
  max-height: 62px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin-top: 10px;
}

.lg-logo-fallback {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--lg-primary, #1e5993);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.lg-uni-block {
  text-align: left;
}

.lg-uni-name {
  font-size: 28px;
  font-weight: 700;
  color: var(--lg-primary, #1e5993);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-top: 20px;
}

.lg-letterhead {
  flex: none;
}

.lg-dept-banner {
  flex: none;
  background: #fff;
  border: 2px solid var(--lg-primary, #1e5993);
  margin: 12px 168px 0;
  padding: 7px 18px;
  text-align: center;
  border-radius: 3px;
  margin-bottom: 0;
  margin-top: 8px;
}

.lg-dept-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--lg-primary, #1e5993);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lg-topinfo {
  flex: none;
}

.lg-badge-wrap {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 0 28px 0;
  margin-bottom: 28px;
  margin-top: 0;
}

.lg-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lg-badge-rule {
  display: none;
}

.lg-badge-label {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: #fff;
  text-transform: uppercase;
  background: var(--lg-primary, #1e5993);
  padding: 8px 30px;
  border-radius: 20px;
  display: inline-block;
  margin: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.lg-fields {
  flex: none;
  margin: 14px 28px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lg-field {
  display: grid;
  grid-template-columns: 180px 24px 1fr;
  align-items: baseline;
  padding: 4px 0;
}

.lg-field-label {
  font-size: 15.5px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.lg-field-sep {
  font-size: 15.5px;
  color: #333;
  text-align: center;
}

.lg-field-value {
  font-size: 15.5px;
  color: #111;
  padding-left: 10px;
  line-height: 1.35;
}

.lg-cards {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 28px 0;
}

.lg-card {
  border: 1.5px solid var(--lg-border, #95a4b6);
  border-radius: 8px;
  padding: 10px 14px 12px;
  min-height: 90px;
}

.lg-card-head {
  font-size: 17px;
  font-weight: 700;
  color: var(--lg-primary, #1e5993);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 6px;
  margin-bottom: 14px;
}

.lg-card-row {
  display: flex;
  gap: 4px;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}

.lg-card-label {
  flex: none;
  min-width: 70px;
  color: #111;
  font-weight: 400;
}

.lg-card-val {
  color: #444;
}

/* Submitted-by card: distinct minimal treatment — tinted wash, left accent
   spine, and a quiet eyebrow header instead of the plain underlined title. */
.lg-card-group {
  border: 1.5px solid var(--lg-border, #95a4b6);
  border-radius: 8px;
  background: #fff;
  padding: 10px 14px 12px;
}

.lg-card-group .lg-card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.lg-card-group .lg-card-head>span:first-child {
  display: inline-block;
  text-decoration: none;
  border-bottom: 1.5px solid var(--lg-primary, #1e5993);
  padding-bottom: 2px;
  line-height: 1.2;
}

.lg-card-group .grp-count-badge {
  margin-left: 0;
  text-decoration: none;
  font-style: normal;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--lg-primary, #1e5993);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 9px;
  border-radius: 10px;
}

.lg-card-group .lg-card-row {
  font-size: 13px;
  margin-bottom: 2px;
}

.lg-card-group .lg-card-label {
  min-width: 46px;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lg-accent, #6b1d52);
}

.lg-card-group .lg-card-val {
  font-weight: 600;
  color: #6b6161;
}

.lg-member-list {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.lg-member-row {
  position: relative;
  padding: 4.5px 0 4.5px 14px;
  font-size: 13px;
  color: #333;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.lg-member-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--lg-accent, #6b1d52);
}

.lg-member-row.is-leader {
  background: var(--lg-leader-bg, rgba(30, 89, 147, 0.08));
  border-radius: 4px;
  margin: 0 -6px;
  padding-left: 20px;
  padding-right: 6px;
  border-bottom-color: transparent;
  font-weight: 600;
}

.lg-member-row.is-leader::before {
  left: 6px;
  background: var(--lg-primary, #1e5993);
}

.lg-card-to-name {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  margin-top: 4px;
  line-height: 1.3;
}

.lg-card-to-desig {
  font-size: 15px;
  color: #444;
  margin-top: 3px;
  line-height: 1.4;
}

.lg-card-to-uni {
  font-size: 15px;
  color: #444;
  margin-top: 5px;
  line-height: 1.35;
}

.lg-footer {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 28px 18px;
  padding-top: 12px;
  border-top: 1px dashed #b3bac1;
}

.lg-footer-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lg-footer-label {
  font-size: 15.5px;
  color: #555;
  font-weight: 600;
}

.lg-footer-val {
  font-size: 15.5px;
  color: #111;
  font-weight: 700;
}

.lg-footer-sig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lg-sig-line {
  display: none;
}

.lg-sig-label {
  font-size: 15px;
  color: #333;
  font-weight: 600;
  white-space: nowrap;
}

.tpl-sigil {
  width: 100%;
  height: 100%;
  background: #fff;
  font-family: var(--paper-font, 'Times New Roman', Times, serif);
  color: #111;
  position: relative;
  overflow: hidden;
  border: none;
  padding: 44px 20px;
}

.tpl-sigil::before {
  content: '';
  position: absolute;
  inset: 26px;
  border: 1.5px solid var(--sg-border, #95a4b6);
  border-radius: 12px;
  pointer-events: none;
}

.sg-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}

.sg-watermark img {
  width: 62%;
  max-width: 520px;
  height: auto;
  opacity: 0.07;
  filter: grayscale(0);
}

.sg-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 34px 10px;
}

.sg-header {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: 4px;
}

.sg-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-logo-img {
  max-height: 94px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.sg-uni-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--sg-primary, #1e5993);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 68px;
}

.sg-doctype {
  flex: none;
  text-align: center;
  margin: 14px 0 22px;
}

.sg-doctype span {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sg-primary, #1e5993);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.sg-fields {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 42px;
}

.sg-field {
  font-size: 17px;
  line-height: 1.4;
}

.sg-field-label {
  font-weight: 700;
  color: #111;
  margin-right: 6px;
}

.sg-field-value {
  color: #222;
  font-weight: 400;
}

.sg-section {
  flex: none;
  margin: 0 0 42px;
}

.sg-section-title {
  text-align: center;
  margin-bottom: 12px;
}

.sg-section-title span {
  display: inline-block;
  font-size: 17.5px;
  font-weight: 700;
  color: var(--sg-primary, #1e5993);
  padding: 4px 22px 2px;
  border: 1px solid var(--sg-border, #95a4b6);
  border-radius: 16px;
}

.sg-section-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sg-info-row {
  font-size: 17px;
  line-height: 1.4;
}

.sg-info-label {
  font-weight: 700;
  color: #111;
  margin-right: 6px;
}

.sg-info-val {
  color: #222;
  font-weight: 400;
}

.sg-date-wrap {
  flex: none;
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 10px;
}

.sg-date-badge {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  border: 1px solid var(--sg-border, #95a4b6);
  border-radius: 20px;
  padding: 8px 22px 6px;
}

/* ---------------------------------------------------------------------
   Group Assignment only (Sigil / "Crest"). Scoped to its own sg-grp-*
   classes so the Assignment / Lab Report layout above is never affected.

   The group variant also gets its own .tpl-sigil-group modifier. The
   header + doc-type title keep their normal, tight spacing right under
   the logo/university name — that part was never the problem. Below
   that, .sg-grp-fill wraps the fields, the submitted-by/to panels and
   the date badge and stretches to fill whatever page height is left,
   with justify-content:space-between: fields sit flush at the top of
   that space (no gap from the heading gets introduced), the date badge
   sits flush at the bottom (so the page still reads as "full", same as
   before), and the two gaps in between — fields-to-panels and
   panels-to-date — split the leftover space equally instead of one of
   them swallowing almost all of it.
   --------------------------------------------------------------------- */
.tpl-sigil-group .sg-grp-fill {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tpl-sigil-group .sg-fields,
.tpl-sigil-group .sg-grp-panels {
  margin: 0;
}

.tpl-sigil-group .sg-date-wrap {
  margin-top: 0;
  padding-top: 0;
}

.sg-grp-panels {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 0 30px;
  border-top: 1px solid var(--sg-border, #95a4b6);
  border-bottom: 1px solid var(--sg-border, #95a4b6);
}

.sg-grp-panel {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 20px;
}

.sg-grp-panel:first-child {
  flex: 1.6 1 0;
}

.sg-grp-panel+.sg-grp-panel {
  border-left: 1px dashed var(--sg-border, #95a4b6);
}

.sg-grp-panel-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-primary, #1e5993);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--sg-primary, #1e5993);
}

.sg-grp-row {
  font-size: 15px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
}

.sg-grp-row-label {
  font-weight: 700;
  color: #666;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sg-grp-row-val {
  color: #171717;
  font-weight: 600;
  font-size: 15px;
}

.sg-grp-roster {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--sg-border, #95a4b6);
}

.sg-grp-roster-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  padding: 3px 5px;
  border-radius: 5px;
}

.sg-grp-roster-row.is-leader {
  background: var(--sg-tint, rgba(30, 89, 147, 0.07));
  padding-top: 4px;
  padding-bottom: 4px;
  margin: 0 -5px;
}

.sg-grp-roster-no {
  font-weight: 700;
  color: var(--sg-primary, #1e5993);
  font-size: 11px;
  padding-top: 1px;
}

.sg-grp-roster-name {
  font-weight: 600;
  color: #171717;
}

.sg-grp-roster-meta {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  text-align: right;
  padding-top: 1px;
}

.sg-grp-roster-empty {
  font-size: 12.5px;
  font-style: italic;
  color: #888;
}

.tpl-sigil .sg-grp-panel-head .grp-count-badge {
  font-size: 10.5px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  color: #777;
  text-transform: none;
}

.tpl-voltalic {
  width: 100%;
  height: 100%;
  background: #f8f7f5;
  font-family: var(--paper-font, 'Poppins', 'Inter', sans-serif);
  color: #111;
  position: relative;
  overflow: hidden;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.ct-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  top:10px;
}

.ct-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 64px 64px 48px;
}

.ct-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 46px;
}

.ct-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.ct-uni-name {
  font-size: 24px;
  font-weight: 700;
  color: #111;
  line-height: 1.1;
}

.ct-dept-line {
  font-size: 17.2px;
  font-weight: 400;
  color: #444;
  line-height: 1.5;
  margin-top: 4px;
  max-width: 90%;
}

.ct-logo {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 6px;
}

.ct-logo-img {
  max-height: 80px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.ct-logo-meta {
  font-size: 13.2px;
  font-weight: 500;
  color: #555;
  text-align: right;
  white-space: nowrap;
}

.ct-dept-meta {
  font-size: 13.2px;
  font-weight: 500;
  color: #555;
  margin-top: 4px;
}

.ct-title {
  flex: none;
  margin-bottom: 8px;
}

.ct-title-accent {
  color: var(--ct-accent, #da9122);
  font-size: 28px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.15;
  margin-bottom: 25px !important;
  text-wrap: balance;
}

.ct-title-doctype {
  color: #111;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 4px;
}

.ct-title-code {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: #111;
  margin-bottom: 8px;
}

.ct-code-tag {
  font-weight: 800;
  letter-spacing: 0;
  margin-right: 2px;
}

.ct-tag-a {
  color: var(--ct-accent, #da9122);
}

.ct-tag-b {
  color: var(--ct-secondary, #2a7de1);
}

.ct-experiment-row {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 18px;
  padding: 10px 16px;
  background: rgba(218, 145, 34, 0.10);
  border-left: 4px solid var(--ct-accent, #da9122);
  border-radius: 0 4px 4px 0;
  max-width: 60%;
}

.ct-experiment-label {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #111;
}

.ct-experiment-value {
  font-size: 18px;
  font-weight: 500;
  color: #222;
}

.ct-fields {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 42px;
  width: 90%;
}

.ct-field-row {
  position: relative;
  font-size: 18px;
  line-height: 1.4;
  padding-left: 14px;
}

.ct-field-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: var(--ct-accent, #da9122);
}

.ct-field-label {
  font-weight: 700;
  color: #111;
  margin-right: 6px;
}

.ct-field-value {
  color: #333;
  font-weight: 400;
}

.ct-block {
  flex: none;
  margin: 0 0 26px;
  max-width: 62%;
}

.ct-block-group {
  max-width: 80%;
}

.ct-block-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--ct-secondary, #113c4f);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin-bottom: 8px;
}

.ct-block-value {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  min-height: 1.3em;
}

.ct-block-sub {
  font-size: 17.2px;
  font-weight: 400;
  color: #4b4b4b;
  line-height: 1.45;
  margin-top: 4px;
}

.ct-grp-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-top: 8px;
}

.ct-grp-name:first-child {
  margin-top: 0;
}

.ct-grp-sub {
  font-size: 14.7px;
  font-weight: 400;
  color: #777;
  margin-top: 1px;
}

/* Two-column ("side by side") group member roster for the Voltaic template. */
.ct-grp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 6px;
}

.ct-grp-grid .grp-wrap-item {
  min-width: 0;
}

.ct-grp-grid .ct-grp-name {
  margin-top: 0;
}

/* Leader is called out by color (matching the course-title accent) instead of
   a text badge, so it never needs its own row height. */
.ct-grp-name-leader {
  color: var(--ct-accent, #da9122);
}

.ct-date-block {
  margin-top: 30px;
  margin-bottom: 0;
}

/* Group docs can list up to 6 members (see TEMPLATES.voltalic.maxMembers) — this
   tightens vertical spacing so the roster + "Submitted To" + date block never
   grow tall enough to reach the diagonal artwork band at the bottom of the page. */
.tpl-voltalic.ct-compact .ct-header {
  margin-bottom: 34px;
}

.tpl-voltalic.ct-compact .ct-fields {
  margin-bottom: 22px;
}

.tpl-voltalic.ct-compact .ct-block {
  margin-bottom: 16px;
}

.tpl-voltalic.ct-compact .ct-grp-name {
  margin-top: 5px;
  font-size: 15px;
}

.tpl-voltalic.ct-compact .ct-grp-sub {
  font-size: 13.7px;
}

.tpl-voltalic.ct-compact .ct-grp-grid {
  row-gap: 4px;
}

.tpl-voltalic.ct-compact .ct-grp-grid .ct-grp-name {
  margin-top: 0;
}

.tpl-voltalic.ct-compact .ct-date-block {
  margin-top: 18px;
}

.tpl-obliqua {
  width: 100%;
  height: 100%;
  background: #fbfaf7;
  font-family: var(--paper-font, 'Times New Roman', Times, serif);
  color: #111;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 45px 0 35px;
}

.ob-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  bottom: 50px;
}

.ob-pad {
  position: relative;
  z-index: 1;
  padding-left: 52px;
  padding-right: 52px;
  box-sizing: border-box;
}

.ob-topzone {
  flex: none;
  min-height: 20%;
}

.ob-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  max-width: 84%;
}

.ob-logo {
  flex: none;
  display: flex;
  align-items: center;
}

.ob-logo-img {
  max-height: 58px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.ob-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.ob-uni {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #1a1a1a;
}

.ob-dept {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  margin-top: 3px;
  color: #5a5f55;
}

.ob-dept-meta {
  font-size: 13px;
  font-weight: 500;
  color: #6b7063;
  margin-top: 4px;
}

.ob-head-rule {
  flex: none;
  height: 2px;
  background: var(--ob-primary, #4b452b);
  opacity: 0;
  margin-bottom: 30px;
}

.ob-title {
  flex: none;
  max-width: 62%;
}

.ob-subject,
.ob-doctype {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ob-subject {
  color: var(--ob-primary, #4b452b);
}

.ob-doctype {
  color: #1a1a1a;
}

.ob-code {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7063;
  margin-top: 7px;
}

.ob-sash-gap {
  flex: 0 1 auto;
  height: 45%;
  min-height: 0;
}

.ob-body {
  flex: none;
  position: relative;
  z-index: 1;
  background: #fbfaf700;
  padding-top: -22px;
}

.ob-topic-no {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 7px;
}

.ob-topic {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ob-primary, #4b452b);
  max-width: 82%;
  min-height: 1.3em;
  margin-bottom: 8px;
}

.ob-topic-cap {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b9080;
  margin-bottom: 20px;
}

.ob-block {
  margin-bottom: 18px;
  margin-top: 20px;
  max-width: 78%;
}

.ob-block-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ob-primary, #4b452b);
  margin-bottom: 8px;
  position: relative;
  padding-left: 13px;
}

.ob-block-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--ob-accent, #c5d2a6);
}

.ob-block-name {
  font-size: 16.5px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
  min-height: 1.3em;
}

.ob-block-sub {
  font-size: 16px;
  font-weight: 400;
  color: #55594e;
  line-height: 1.55;
  margin-top: 2px;
}

.ob-grp-list {
  margin-top: 2px;
}

.ob-grp-name {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 6px;
}

.ob-grp-name:first-child {
  margin-top: 0;
}

.ob-grp-sub {
  font-size: 15.5px;
  font-weight: 400;
  color: #77796d;
  margin-top: 1px;
}

/* Two-column ("side by side") member roster, matching the Voltaic template's
   layout — lets up to 6 members (TEMPLATES.obliqua.maxMembers) sit in 3
   compact rows instead of one long single-file list. */
.ob-grp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 6px;
}

.ob-grp-grid .grp-wrap-item {
  min-width: 0;
}

.ob-grp-grid .ob-grp-name {
  margin-top: 0;
}

/* Leader is called out by color instead of a text badge so it never needs
   its own row height. */
.ob-grp-name-leader {
  color: var(--ob-accent, #a7b28d);
}

.ob-block-by.ob-block {
  max-width: 90%;
}

/* Group docs can list up to 6 members (see TEMPLATES.obliqua.maxMembers) —
   this tightens vertical spacing so the roster + "Submitted To" + date block
   never grow tall enough to collapse the sash-gap and crowd the artwork. */
.tpl-obliqua.ob-compact .ob-topic-cap {
  margin-bottom: 12px;
}

.tpl-obliqua.ob-compact .ob-block {
  margin-bottom: 12px;
}

.tpl-obliqua.ob-compact .ob-grp-name {
  font-size: 16.5px;
  margin-top: 5px;
}

.tpl-obliqua.ob-compact .ob-grp-sub {
  font-size: 14.5px;
}

.tpl-obliqua.ob-compact .ob-grp-grid {
  row-gap: 4px;
}

.tpl-obliqua.ob-compact .ob-grp-grid .ob-grp-name {
  margin-top: 0;
}

.ob-date {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  background: #fbfaf7;
  padding-top: 18px;
  color: #1a1a1a;
}

.ob-date-label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 8px;
  font-size: 13px;
}

.ob-date-value {
  font-weight: 400;
  color: #3c4037;
  font-size: 15px;
}

.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;
}

.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;
}

.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: 15px;
  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;
}

.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;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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;
}

.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: 22px;
  height: 22px;
  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;
}

.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;
}

.tpl-index-watermark {
  width: 90%;
  height: 93%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  position: relative;
  box-sizing: border-box;
  background: #fff;
  color: #1b1b1b;
  font-family: var(--paper-font, "Times New Roman", Times, serif);
  padding: 42px 40px 34px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  border: 3px solid var(--ixp, #1e5993);
  border-radius: 12px;
}

.tpl-index-watermark * {
  box-sizing: border-box;
}

.tpl-index-watermark .ix-vs-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  pointer-events: none;
}

.tpl-index-watermark .ix-vs-watermark img {
  width: 58%;
  max-width: 320px;
  opacity: .14;
  filter: grayscale(1);
}

.tpl-index-watermark .ix-vs-head {
  text-align: center;
  margin-bottom: 20px;
}

.tpl-index-watermark .ix-vs-logo-slot {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.tpl-index-watermark .ix-vs-logo {
  display: block;
  max-height: 100%;
  max-width: 80%;
}

.tpl-index-watermark .ix-uni {
  font-size: 20px;
  font-weight: 900;
  color: var(--ixp, #1e5993);
  margin-bottom: 12px;
}

.tpl-index-watermark .ix-vs-title {
  display: inline-block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #1b1b1b;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--ixp, #1e5993);
  margin-top: 18px;
}

.tpl-index-watermark table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  border: 1px solid var(--ixp, #1e5993);
}

.tpl-index-watermark thead th {
  border: 1px solid var(--ixp, #1e5993);
  padding: 9px 10px;
  font-weight: 700;
  text-align: center;
  color: var(--ixp, #1e5993);
  white-space: nowrap;
}

.tpl-index-watermark tbody td {
  border: 1px solid var(--ixp, #1e5993);
  padding: 10px;
  height: 30px;
  text-align: center;
  color: #222;
  vertical-align: middle;
}

.tpl-index-watermark td.name {
  text-align: left;
}

.tpl-index-watermark td.no {
  width: 60px;
  font-weight: 700;
  color: var(--ixs, #6b1d52);
}

.tpl-index-watermark td.date {
  width: 110px;
  white-space: nowrap;
}

.tpl-index-watermark td.page {
  width: 90px;
}

.tpl-index-watermark td.remarks {
  width: 110px;
}

.tpl-index-watermark .ix-vs-signrow {
  margin-top: auto;
  align-self: flex-end;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-top: 26px;
}

.tpl-index-watermark .ix-vs-sign-line {
  display: inline-block;
  width: 150px;
  border-bottom: 1px solid #1b1b1b;
  height: 1px;
}

/* Teacher's name under a bottom signature line (Ruled + Watermark indexes) */
.tpl-index-ruled .ix-signee-name,
.tpl-index-ruled .ix-signee-desig,
.tpl-index-watermark .ix-signee-name,
.tpl-index-watermark .ix-signee-desig {
  display: block;
}

.tpl-index-ruled .ix-signee-name {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 700;
  color: #222;
}

.tpl-index-ruled .ix-signee-desig {
  font-size: 11px;
  color: #666;
}

.tpl-index-watermark .ix-vs-signline {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.tpl-index-watermark .ix-vs-signrow.has-signee {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.tpl-index-watermark .ix-vs-signee {
  align-self: flex-end;
  text-align: right;
  line-height: 1.3;
}

.tpl-index-watermark .ix-signee-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #1b1b1b;
}

.tpl-index-watermark .ix-signee-desig {
  font-size: 11px;
  color: #555;
}

.tpl-index-watermark .ix-vs-sign-label {
  font-size: 12px;
  color: #555;
  font-weight: 600;
  white-space: nowrap;
}

.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 {
  width: 220px;
  min-width: 210px;
  min-height: 132px;
  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 i {
  display: inline-block;
  /* <i> is inline by default; transforms don't animate inline boxes */
  will-change: transform;
}

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

.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
}

.app-loader[data-loader-mode="boot"] .app-loader-icon i {
  animation: loaderGenie 1.4s ease-in-out infinite;
  display: inline-block;
}

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

.app-loader[data-loader-mode="boot"] .loaderginie {
  animation: loaderGenie 1.4s ease-in-out infinite;
  display: inline-block;
}

.loaderginie {
  display: inline-block;
  width: 60px;
}

.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;
  min-height: 1.3em;
}

.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;
  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;
  }
}

@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;
}

.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);
}

.sidebar-footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}

.footer-link i {
  font-size: 11px;
  transition: color .18s var(--ease);
}

.footer-link[data-info="about"] i {
  color: var(--brass);
}

.footer-link[data-info="about"]:hover,
.footer-link[data-info="about"]:focus-visible {
  color: var(--brass-2);
  background: rgba(214, 162, 74, 0.10);
  border-color: rgba(214, 162, 74, 0.28);
}

.footer-link[data-info="about"]:hover i,
.footer-link[data-info="about"]:focus-visible i {
  color: var(--brass-2);
}

.footer-link[data-info="privacy"] i {
  color: var(--brass);
}

.footer-link[data-info="privacy"]:hover,
.footer-link[data-info="privacy"]:focus-visible {
  color: var(--brass-2);
  background: rgba(214, 162, 74, 0.16);
  border-color: rgba(214, 162, 74, 0.45);
}

.footer-link[data-info="privacy"]:hover i,
.footer-link[data-info="privacy"]:focus-visible i {
  color: var(--brass-2);
}

.footer-link[data-info="contact"] i {
  color: var(--brass);
}

.footer-link[data-info="contact"]:hover,
.footer-link[data-info="contact"]:focus-visible {
  color: var(--brass-2);
  background: rgba(214, 162, 74, 0.16);
  border-color: rgba(214, 162, 74, 0.45);
}

.footer-link[data-info="contact"]:hover i,
.footer-link[data-info="contact"]:focus-visible i {
  color: var(--brass-2);
}

.footer-dot {
  color: var(--text-faint);
  font-size: 10px;
  user-select: none;
}

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

.info-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);
}

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

.info-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 50% 0%, rgba(95, 192, 180, 0.06), transparent 60%), rgba(9, 11, 16, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.info-card {
  position: relative;
  width: 100%;
  max-width: 650px;
  max-height: min(640px, 86vh);
  display: flex;
  flex-direction: column;
  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(95, 192, 180, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transform: translateY(16px) scale(.96);
  opacity: 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.info-modal.show .info-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.info-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 28px;
  height: 28px;
  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: 12px;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}

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

.info-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 56px 18px 22px;
  border-bottom: 1px solid var(--line);
}

.info-head-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--brass-ink);
  background: linear-gradient(140deg, var(--brass-2), var(--brass) 65%, #8a6a2c);
  box-shadow: 0 6px 16px -6px rgba(214, 162, 74, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.info-head-text {
  min-width: 0;
}

.info-head-title {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.info-head-sub {
  margin: 3px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--teal);
}

.info-tabs {
  flex: none;
  display: flex;
  gap: 4px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.info-tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}

.info-tab i {
  font-size: 11px;
}

.info-tab:hover {
  color: var(--text);
}

.info-tab.active {
  background: rgba(214, 162, 74, 0.12);
  border-color: rgba(214, 162, 74, 0.35);
  color: var(--brass-2);
}

.info-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 26px 28px;
}

.info-panel {
  display: none;
  animation: fadeIn .25s var(--ease) both;
}

.info-panel.active {
  display: block;
}

.info-hero {
  text-align: center;
  padding: 22px 18px;
  margin-bottom: 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(214, 162, 74, 0.35);
  background: rgba(214, 162, 74, 0.12);
  color: var(--brass-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.info-hero-title {
  margin: 14px 0 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.info-hero-desc {
  margin: 0 auto;
  max-width: 420px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-dim);
}

.info-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.info-feature {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.info-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 14px;
  margin-bottom: 10px;
}

.info-feature-icon.teal {
  background: rgba(95, 192, 180, 0.14);
  color: var(--teal);
}

.info-feature-icon.brass {
  background: rgba(214, 162, 74, 0.14);
  color: var(--brass-2);
}

.info-feature h4 {
  margin: 0 0 5px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.info-feature p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.info-footnote {
  margin: 0 !important;
  font-size: 12.5px !important;
}

.info-tech-stack {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.info-tech-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brass-2) !important;
}

.info-tech-label i {
  font-size: 10px;
}

.info-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.info-tech-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  background: transparent;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: .01em;
}

.info-subhead {
  margin: 20px 0 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--teal);
}

.info-subhead:first-of-type {
  margin-top: 4px;
}

.info-panel p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-dim);
}

.info-updated {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint) !important;
}

.info-tablink {
  color: var(--brass-2);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.info-note {
  margin-top: 12px !important;
  font-size: 12px !important;
  color: var(--text-faint) !important;
}

.priv-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid rgba(95, 192, 180, 0.3);
  background: rgba(95, 192, 180, 0.07);
}

.priv-alert-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--teal);
  background: rgba(95, 192, 180, 0.14);
}

.priv-alert-title {
  margin: 0 0 5px !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--teal) !important;
  line-height: 1.3;
}

.priv-alert-desc {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.6;
  color: var(--text-dim) !important;
}

.priv-section {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.priv-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.priv-heading {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.priv-num {
  color: var(--text);
}

.priv-section p {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-dim);
}

.info-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 18px;
  align-items: start;
}

.info-contact-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.info-cc-card {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.info-cc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  margin-bottom: 10px;
  font-size: 14px;
  background: rgba(214, 162, 74, 0.14);
  color: var(--brass-2);
}

.info-cc-card h4 {
  margin: 0 0 5px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.info-cc-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.info-cc-link {
  display: inline-block;
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--teal);
  text-decoration: none;
  word-break: break-all;
}

.info-cc-link:hover {
  text-decoration: underline;
}

.info-contact-form {
  padding: 4px 0 0;
}

.info-contact-form label {
  margin: 10px 0 5px;
}

.info-contact-form label.first {
  margin-top: 0;
}

.info-contact-form textarea {
  min-height: 76px;
}

.info-contact-form .btn {
  margin-top: 14px;
}

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

@media (max-width: 480px) {
  .info-modal {
    padding: 12px;
  }

  .info-card {
    max-height: 92vh;
    border-radius: 14px;
  }

  .info-head {
    gap: 11px;
    padding: 18px 46px 14px 16px;
  }

  .info-head-icon {
    width: 38px;
    height: 38px;
    font-size: 15px;
    border-radius: 10px;
  }

  .info-head-title {
    font-size: 16px;
  }

  .info-head-sub {
    font-size: 10px;
  }

  .info-tabs {
    padding: 10px 14px;
    gap: 2px;
  }

  .info-tab {
    padding: 8px 11px;
    font-size: 0;
    gap: 0;
  }

  .info-tab i {
    font-size: 14px;
  }

  .info-tab span {
    display: none;
  }

  .info-body {
    padding: 16px 16px 20px;
  }

  .info-hero {
    padding: 18px 14px;
    margin-bottom: 16px;
  }

  .info-hero-title {
    font-size: 17px;
  }

  .info-feature-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 760px) {
  .sidebar-footer {
    margin-top: 18px;
  }
}

.download-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid rgba(214, 164, 74, 0.32);
  background: rgba(214, 164, 74, 0.08);
}

.download-notice-icon {
  flex: none;
  margin-top: 1px;
  font-size: 11px;
  color: var(--brass-2);
}

/* Group member cap: button stays clickable so a click at max shows a message
   instead of doing nothing (see showGroupCapMessage in sidebar.js). */
#addGroupMemberBtn.is-capped {
  opacity: .55;
  cursor: not-allowed;
}

@keyframes hintShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-4px);
  }

  40%,
  80% {
    transform: translateX(4px);
  }
}

.hint-shake {
  animation: hintShake .3s ease;
}

/* Evening Dusk, group assignment: the two-column Submitted By / Submitted To
   grid is too narrow for a roster, so in group mode the roster gets the full
   content width (two columns from 3 members) and Submitted To sits below it. */
.tpl-dusk .dk-info.is-group {
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 56px;
  padding-top: 26px;
}

.tpl-dusk .dk-info.is-group .dk-info-heading {
  margin-bottom: 14px;
}

.tpl-dusk .dk-info.is-group .dk-info-to {
  text-align: left;
}

.tpl-dusk .dk-info.is-group .dk-info-to .dk-info-heading {
  text-align: left;
  margin-bottom: 12px;
}

/* Roster: one row per member, aligned in three columns. */
.tpl-dusk .dk-grp-roster {
  display: flex;
  flex-direction: column;
}

.tpl-dusk .dk-mem {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  column-gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.tpl-dusk .dk-mem:first-child {
  padding-top: 0;
}

.tpl-dusk .dk-mem:last-child {
  border-bottom: 0;
}

.tpl-dusk .dk-mem-no {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 18px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: #1b1b1b;
}

.tpl-dusk .dk-mem-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 18px;
  text-transform: uppercase;
  color: #1b1b1b;
}

.tpl-dusk .dk-mem-sub {
  font-size: 11.5px;
  line-height: 18px;
  white-space: nowrap;
  color: #8a7f7a;
}

.tpl-dusk .dk-grp-roster .dk-by-name {
  font-size: 13px;
}

/* The group leader's number sits inside a small star in the accent colour. */
.tpl-dusk .grp-leader-star {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  color: var(--dk-secondary, #c9498b);
}

.tpl-dusk .grp-leader-star svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tpl-dusk .grp-leader-star b {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* Eclipse (circles) group layout: group name + roster, divider, course +
   teacher, and the due date last. The block is centred under the title box
   (same left/right edges as the box) and anchored to it by
   fitCirclesGroupLayout(), which also sets --ci-s (<= 1) to shrink everything
   proportionally when a long roster / teacher block would run off the page. */
.tpl-circles.is-group {
  --ci-s: 1;
}

.tpl-circles .ci-box-subtitle+.ci-box-docno {
  margin-top: 2px;
}

.tpl-circles.is-group .ci-content {
  top: 656px;
  /* fallback; fitCirclesGroupLayout() re-anchors it under the box */
  left: 86px;
  right: 100px;
}

.tpl-circles.is-group .ci-grp-info {
  margin-top: 0;
}

.tpl-circles.is-group .ci-teacher {
  margin-bottom: 0;
}

.tpl-circles.is-group .ci-teacher-line {
  font-size: calc(15.5px * var(--ci-s));
  margin-top: calc(3px * var(--ci-s));
}

.tpl-circles.is-group .ci-teacher-name {
  font-size: calc(15.5px * var(--ci-s));
}

.tpl-circles.is-group .ci-separator {
  width: calc(62% * var(--ci-s));
  margin: calc(14px * var(--ci-s)) auto;
}

.tpl-circles.is-group .ci-course {
  font-size: calc(18px * var(--ci-s));
  margin-bottom: calc(6px * var(--ci-s));
}

.tpl-circles.is-group .ci-due-date {
  font-size: calc(16.5px * var(--ci-s));
  margin-top: calc(16px * var(--ci-s));
}

.tpl-circles.is-group .ci-due-date+.ci-due-date {
  margin-top: calc(4px * var(--ci-s));
}

.tpl-circles .ci-grp-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: calc(20px * var(--ci-s));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ci-accent, #9c2431);
  margin-bottom: calc(8px * var(--ci-s));
}

.tpl-circles .ci-grp-roster {
  display: flex;
  flex-direction: column;
  gap: calc(5px * var(--ci-s));
  margin: 0;
  text-align: left;
}

/* One roster row: [no.] [name] [leader tag] ............ [ID | Roll].
   Number + name are the left column, the ID / Roll meta is right-aligned. */
.tpl-circles .ci-grp-member {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ci-s));
  padding: calc(5px * var(--ci-s)) calc(14px * var(--ci-s));
  border-radius: 10px;
  background: rgba(0, 0, 0, .035);
  border: 1px solid rgba(0, 0, 0, .07);
  line-height: 1.3;
}

.tpl-circles .ci-grp-member.is-leader {
  background: var(--ci-accent, #9c2431);
  border-color: var(--ci-accent, #9c2431);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.tpl-circles .ci-grp-mno {
  flex: 0 0 auto;
  width: calc(21px * var(--ci-s));
  height: calc(21px * var(--ci-s));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(11px * var(--ci-s));
  font-weight: 700;
  color: var(--ci-accent, #9c2431);
  background: rgba(0, 0, 0, .06);
}

.tpl-circles .ci-grp-member.is-leader .ci-grp-mno {
  color: var(--ci-accent, #9c2431);
  background: #fff;
}

.tpl-circles .ci-grp-mname {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: calc(15px * var(--ci-s));
  color: #181818;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpl-circles .ci-grp-member.is-leader .ci-grp-mname {
  color: #fff;
}

.tpl-circles .ci-grp-mmeta {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: calc(12px * var(--ci-s));
  text-align: right;
  white-space: nowrap;
  font-size: calc(12px * var(--ci-s));
  color: #555;
}

.tpl-circles .ci-grp-member.is-leader .ci-grp-mmeta {
  color: rgba(255, 255, 255, .85);
}

/* Leader tag sits right after the name so the ID / Roll column stays flush right. */
.tpl-circles .grp-leader-tag.ci-grp-leader-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ci-accent, #9c2431);
  border-color: #fff;
  background: #fff;
  font-size: calc(10.5px * var(--ci-s));
  padding: 2px 8px;
}

.tpl-circles .grp-leader-tag.ci-grp-leader-tag i {
  font-size: calc(9px * var(--ci-s));
}

/* ---- Folio (brief): group assignment spacing + leader highlight ---- */
/* Keep the original ledger look; just stop the fixed 200px gap from pushing
   the roster into the footer. Spare height now sits above the badge, and the
   content block can never run over the sign-off. */
.tpl-brief.is-group .bf-statement {
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 8px;
}

.tpl-brief.is-group .bf-doctype-eyebrow {
  margin-top: 0;
}

.tpl-brief.is-group .bf-topic {
  margin-bottom: 14px;
}

.tpl-brief.is-group .bf-rows {
  flex: none;
  gap: 9px;
}

.tpl-brief.is-group .bf-row,
.tpl-brief.is-group .bf-row-pair {
  padding-bottom: 6px;
}

.tpl-brief.is-group .bf-rows {
  padding-bottom: 22px;
}

.tpl-brief.is-group .bf-signoff {
  margin-top: auto;
  padding-top: 0;
}

/* spare height splits evenly above the badge and above the footer */
.tpl-brief .bf-roster-row.is-leader {
  background: rgba(var(--bf-primary-rgb), .12);
  border-radius: 6px;
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
}

.tpl-brief .bf-roster-row.is-leader+.bf-roster-row,
.tpl-brief .bf-roster-row.is-leader {
  border-top-color: transparent;
}

.tpl-brief .bf-roster.dense {
  padding-top: 5px;
  padding-bottom: 5px;
  gap: 2px;
}

.tpl-brief .bf-roster.dense .bf-roster-row {
  padding: 2px 0;
}

.tpl-brief .bf-roster.dense .bf-roster-row+.bf-roster-row {
  padding-top: 3px;
}

/* Group row + roster share one block: the divider line sits under the member card, not under the "Group" label. */
.tpl-brief .bf-group-block {
  border-bottom: 1px solid #e4e3dd;
  padding-bottom: 8px;
}

.tpl-brief .bf-group-block>.bf-row {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ===== Cover fonts =====
   English: the "Cover font" picker (--paper-font, set inline by applyPaperFont)
   drives every text element on the cover. Icons and the Latin monogram art
   keep their own fonts. */
html:not([lang="bn"]) #paper *:not(i):not([class*="fa-"]):not(.bf-art-mono),
html:not([lang="bn"]) [id^="paperIndex"] *:not(i):not([class*="fa-"]) {
  font-family: var(--paper-font, "Times New Roman", Times, serif) !important;
}

/* Bangla: literal font names (no var() chain). Default = Li Ador Noirrit. */
html[lang="bn"] #paper,
html[lang="bn"] [id^="paperIndex"],
html[lang="bn"] #paper *:not(i):not([class*="fa-"]):not(.bf-art-mono),
html[lang="bn"] [id^="paperIndex"] *:not(i):not([class*="fa-"]) {
  font-family: 'Li Ador Noirrit', 'Noto Serif Bengali', 'Hind Siliguri', sans-serif !important;
}

/* Bangla picker option: Noto Serif Bengali (data-bn-font set in applyPaperFont) */
html[lang="bn"] #paper[data-bn-font="notoserifbengali"],
html[lang="bn"] [id^="paperIndex"][data-bn-font="notoserifbengali"],
html[lang="bn"] #paper[data-bn-font="notoserifbengali"] *:not(i):not([class*="fa-"]):not(.bf-art-mono),
html[lang="bn"] [id^="paperIndex"][data-bn-font="notoserifbengali"] *:not(i):not([class*="fa-"]) {
  font-family: 'Noto Serif Bengali', 'Hind Siliguri', serif !important;
}

/* Language toggle: fonts never change with the selected language */
#sidebar #langCtl button[data-lang="en"],
#sidebar.is-bangla #langCtl button[data-lang="en"] {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: .02em !important;
}

#sidebar #langCtl button[data-lang="bn"],
#sidebar.is-bangla #langCtl button[data-lang="bn"] {
  font-family: 'Li Ador Noirrit', 'Noto Serif Bengali', 'Hind Siliguri', sans-serif !important;
  letter-spacing: normal !important;
  font-size: 13.2px;
}

/* Noto Serif Bengali has tall built-in ascent/descent metrics, so lines look
   too loose. Setting an explicit line-height overrides them.
   Tweak --bn-noto-lh to taste (1.1 = tight, 1.3 = comfortable). */
html[lang="bn"] #paper[data-bn-font="notoserifbengali"],
html[lang="bn"] [id^="paperIndex"][data-bn-font="notoserifbengali"] {
  --bn-noto-lh: 1.4;
}

html[lang="bn"] #paper[data-bn-font="notoserifbengali"] *:not(i):not([class*="fa-"]):not(.bf-art-mono),
html[lang="bn"] [id^="paperIndex"][data-bn-font="notoserifbengali"] *:not(i):not([class*="fa-"]) {
  line-height: var(--bn-noto-lh) !important;
}

/* ==========================================================================
   Noir ("cards") + Li Ador Noirrit (Bangla)
   Li Ador Noirrit renders visibly smaller than the other fonts, so:
   1) the mobile (max-width:760px) rule that shrinks `.tpl-cards .course-info`
      is cancelled for this font, and
   2) every Noir text size gets +1px.
   Scoped to #paper.is-bangla[data-bn-font="adornoirrit"], so English mode and
   the Noto Serif Bengali option are untouched. Specificity beats the mobile
   media query, so this works on all screen sizes.
   ========================================================================== */
#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .uni-title {
  font-size: 28px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .dept-title {
  font-size: 19px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .assignment-no {
  font-size: 22px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .assignment-title {
  font-size: 24px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .course-info {
  font-size: 18px;
}

/* 17 + 1, no mobile 16px */
#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .card-title {
  font-size: 19px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .student-table {
  font-size: 16px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .teacher-info,
#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .teacher-name,
#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .teacher-title {
  font-size: 16px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .footer-date {
  font-size: 18px;
}

/* group mode */
#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-count {
  font-size: 13px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-table {
  font-size: 15px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-table th {
  font-size: 12.5px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .grp-leader-tag {
  font-size: 11px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-to-title,
#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-to-name {
  font-size: 16.5px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-to-desig,
#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-to-dept {
  font-size: 16px;
}

#paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-date-row {
  font-size: 17px;
}

/* ==========================================================================
   Sidebar in Bangla mode (Li Ador Noirrit) — +1px on every text size.
   The Bangla sidebar always uses Li Ador Noirrit, which renders small.
   `#sidebar.is-bangla input/select/textarea/.csel-trigger/.btn/.group-title`
   was fixed at 12.5px (smaller than English's 13.5px on inputs, and it also
   beat the max-width:350px rule that sets inputs to 16px). It is now 13.5px,
   and inputs return to 16px on very small phones like English mode.
   English mode is untouched.
   ========================================================================== */
#sidebar.is-bangla input,
#sidebar.is-bangla select,
#sidebar.is-bangla textarea,
#sidebar.is-bangla .csel-trigger,
#sidebar.is-bangla .btn,
#sidebar.is-bangla .group-title,
#sidebar.is-bangla .lab-entry-row input {
  font-size: 12.5px;
}

#sidebar.is-bangla .cdate-trigger {
  font-size: 13.5px;
}

#sidebar.is-bangla .lab-entry-row .cdate-trigger {
  font-size: 12.5px;
}

#sidebar.is-bangla label {
  font-size: 11.5px;
  font-weight: 300;
}

#sidebar.is-bangla .group-desc {
  font-size: 11.5px;
}

#sidebar.is-bangla .hint {
  font-size: 10.5px;
}

#sidebar.is-bangla .auto-match-toggle {
  font-size: 10px;
  max-width: 112px;
  line-height: 1.3;
}

#sidebar.is-bangla .subgroup-title {
  font-size: 10px;
}

#sidebar.is-bangla .csel-option {
  font-size: 13px;
}

#sidebar.is-bangla .sugg-option-main {
  font-size: 13px;
}

#sidebar.is-bangla .sugg-option-sub {
  font-size: 10.5px;
}

#sidebar.is-bangla .sugg-empty {
  font-size: 11px;
}

#sidebar.is-bangla .cdate-my {
  font-size: 14px;
}

#sidebar.is-bangla .cdate-weekdays span {
  font-size: 9px;
}

#sidebar.is-bangla .cdate-day {
  font-size: 12px;
}

#sidebar.is-bangla .cdate-today-btn {
  font-size: 10px;
}

#sidebar.is-bangla .le-empty {
  font-size: 11.5px;
}

#sidebar.is-bangla .gm-idx {
  font-size: 11px;
}

#sidebar.is-bangla .gm-leader-badge {
  font-size: 10.5px;
}

#sidebar.is-bangla .grp-count-badge {
  font-size: 12.5px;
}

#sidebar.is-bangla .doc-check {
  font-size: 12.5px;
}

#sidebar.is-bangla .doc-check span small {
  font-size: 10.5px;
}

#sidebar.is-bangla .download-summary {
  font-size: 11.5px;
}

#sidebar.is-bangla .palette-swatch span {
  font-size: 9.5px;
}

#sidebar.is-bangla .color-field .cf-name {
  font-size: 11.5px;
}

#sidebar.is-bangla .color-field .cf-hex {
  font-size: 10.5px;
}

#sidebar.is-bangla .logo-drop {
  font-size: 11.5px;
}

#sidebar.is-bangla .logo-actions .btn {
  font-size: 12.5px;
}

#sidebar.is-bangla .footer-link {
  font-size: 12px;
}

#sidebar.is-bangla .btn {
  font-weight: 400;
}

#sidebar.is-bangla .footer-link {
  font-weight: 300;
}

@media (max-width:350px) {

  #sidebar.is-bangla input,
  #sidebar.is-bangla select,
  #sidebar.is-bangla textarea,
  #sidebar.is-bangla .csel-trigger,
  #sidebar.is-bangla .cdate-trigger {
    font-size: 12px;
  }
}

/* ==========================================================================
   Mobile (max-width:760px): Li Ador Noirrit gets one more +1px.
   Sidebar sizes are the desktop Bangla values +1; Noir paper sizes likewise.
   (Paper text on other templates is bumped in data.js bumpBanglaFontSizes.)
   ========================================================================== */
@media (max-width:760px) {

  #sidebar.is-bangla input,
  #sidebar.is-bangla select,
  #sidebar.is-bangla textarea,
  #sidebar.is-bangla .csel-trigger,
  #sidebar.is-bangla .btn,
  #sidebar.is-bangla .group-title,
  #sidebar.is-bangla .lab-entry-row input {
    font-size: 13.5px;
  }

  #sidebar.is-bangla .lab-entry-row input {
    font-size: 13.5px;
  }

  #sidebar.is-bangla .cdate-trigger {
    font-size: 14.5px;
  }

  #sidebar.is-bangla .lab-entry-row .cdate-trigger {
    font-size: 13.5px;
  }

  #sidebar.is-bangla label {
    font-size: 12.5px;
    font-weight: 300;
  }

  #sidebar.is-bangla .group-desc {
    font-size: 12.5px;
  }

  #sidebar.is-bangla .hint {
    font-size: 11.5px;
  }

  #sidebar.is-bangla .auto-match-toggle {
    font-size: 12.5px;
    max-width: 112px;
    line-height: 1.05;
  }

  /* "কাস্টমাইজ" heading at the top of the mobile sidebar: 14.5px -> 15.5px */
  #sidebar.is-bangla .sidebar-close b {
    font-size: 15.5px;
  }

  /* Hint under it ("পরিবর্তন দেখতে নিচের প্রিভিউ ট্যাপ করুন"): 10px -> 11px */
  #sidebar.is-bangla .sidebar-close span {
    font-size: 11.8px;
  }

  #sidebar.is-bangla .subgroup-title {
    font-size: 11px;
  }

  #sidebar.is-bangla .csel-option {
    font-size: 14px;
  }

  #sidebar.is-bangla .sugg-option-main {
    font-size: 14px;
  }

  #sidebar.is-bangla .sugg-option-sub {
    font-size: 11.5px;
  }

  #sidebar.is-bangla .sugg-empty {
    font-size: 12px;
  }

  #sidebar.is-bangla .cdate-my {
    font-size: 15px;
  }

  #sidebar.is-bangla .cdate-weekdays span {
    font-size: 10px;
  }

  #sidebar.is-bangla .cdate-day {
    font-size: 13px;
  }

  #sidebar.is-bangla .cdate-today-btn {
    font-size: 11px;
  }

  #sidebar.is-bangla .le-empty {
    font-size: 12.5px;
  }

  #sidebar.is-bangla .gm-idx {
    font-size: 12px;
  }

  #sidebar.is-bangla .gm-leader-badge {
    font-size: 11.5px;
  }

  #sidebar.is-bangla .grp-count-badge {
    font-size: 13.5px;
  }

  #sidebar.is-bangla .doc-check {
    font-size: 13.5px;
  }

  #sidebar.is-bangla .doc-check span small {
    font-size: 11.5px;
  }

  #sidebar.is-bangla .download-summary {
    font-size: 12.5px;
  }

  #sidebar.is-bangla .palette-swatch span {
    font-size: 10.5px;
  }

  #sidebar.is-bangla .color-field .cf-name {
    font-size: 12.5px;
  }

  #sidebar.is-bangla .color-field .cf-hex {
    font-size: 11.5px;
  }

  #sidebar.is-bangla .logo-drop {
    font-size: 12.5px;
  }

  #sidebar.is-bangla .logo-actions .btn {
    font-size: 13.5px;
  }

  #sidebar.is-bangla .footer-link {
    font-size: 13px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .uni-title {
    font-size: 29px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .dept-title {
    font-size: 20px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .assignment-no {
    font-size: 23px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .assignment-title {
    font-size: 25px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .course-info {
    font-size: 19px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .card-title {
    font-size: 20px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .student-table {
    font-size: 17px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .teacher-info,
  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .teacher-name,
  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .teacher-title {
    font-size: 17px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .footer-date {
    font-size: 19px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-count {
    font-size: 14px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-table {
    font-size: 16px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-table th {
    font-size: 13.5px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-to-title,
  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-to-name {
    font-size: 17.5px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-to-desig,
  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-to-dept {
    font-size: 17px;
  }

  #paper.is-bangla[data-bn-font="adornoirrit"] .tpl-cards .group-date-row {
    font-size: 18px;
  }
}

@media (max-width:350px) {

  #sidebar.is-bangla input,
  #sidebar.is-bangla select,
  #sidebar.is-bangla textarea,
  #sidebar.is-bangla .csel-trigger,
  #sidebar.is-bangla .cdate-trigger {
    font-size: 13px;
  }
}

/* ===== Banner template (framed page, rounded title/footer bars, offset cards) ===== */
.tpl-banner {
  width: 100%;
  height: 100%;
  background: #fff;
  font-family: var(--paper-font, Arial, Helvetica, sans-serif);
  color: #111;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

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

.bnr-frame {
  position: absolute;
  inset: 26px;
  border: 7px solid var(--bnr-primary);
  pointer-events: none;
  z-index: 0;
}

.bnr-inner {
  position: absolute;
  inset: 33px;
  z-index: 1;
  padding: 46px 42px 38px;
  display: flex;
  flex-direction: column;
}

.bnr-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
}

.bnr-logo {
  flex: none;
  display: flex;
  align-items: center;
}

.bnr-logo-img {
  max-height: 96px;
  max-width: 132px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.bnr-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.bnr-uni {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--bnr-primary);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.bnr-uni-md {
  font-size: 25px;
}

.bnr-uni-sm {
  font-size: 19px;
}

.bnr-tag {
  margin-top: 6px;
  border-top: 1.5px solid #2a2a2a;
  padding-top: 3px;
  text-align: right;
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  color: #1a1a1a;
}

.bnr-title {
  flex: none;
  margin-top: 34px;
  padding: 20px 30px;
  background: var(--bnr-primary);
  color: #fff;
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  border-radius: 0px 26px 0 26px;
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
  overflow-wrap: anywhere;
}

.bnr-title-md {
  font-size: 24px;
}

.bnr-title-sm {
  font-size: 19px;
}

.bnr-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 22px 0;
}

.bnr-topic {
  text-align: center;
  color: var(--bnr-head);
}

.bnr-topic-no {
  font-size: 17px;
  font-weight: 700;
}

.bnr-topic-title {
  font-size: 22px;
  font-weight: 700;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.bnr-topic-code {
  font-size: 17px;
  font-weight: 600;
  margin-top: 3px;
  color: #333;
}

.bnr-card {
  width: 62%;
  border: 1.5px solid var(--bnr-primary);
  border-radius: 38px 0 38px 0;
  padding: 16px 26px 16px;
}

.bnr-by {
  align-self: flex-start;
}

.bnr-to {
  align-self: flex-end;
}

.bnr-card-h {
  text-align: center;
  font-size: 21px;
  font-weight: 600;
  color: var(--bnr-head);
  margin-bottom: 15px;
}

.bnr-row {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  margin: 9px 0;
  overflow-wrap: anywhere;
}

.bnr-row-meta {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.bnr-grp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 24px;
  margin-top: 10px;
}

.bnr-grp-grid .grp-wrap-item {
  min-width: 0;
}

.bnr-grp-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.bnr-grp-sub {
  font-size: 12.3px;
  font-weight: 500;
  color: #444;
  margin-top: 1px;
  overflow-wrap: anywhere;
}

.bnr-group .bnr-by {
  width: 100%;
}

.bnr-group .bnr-card-h {
  margin-bottom: 6px;
}

.bnr-group .bnr-row {
  margin: 6px 0;
  font-size: 16px;
}

.bnr-foot {
  flex: none;
  padding: 14px 24px;
  background: var(--bnr-primary);
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 200;
  border-radius: 0px 24px 0px 24px;
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
}

.bnr-foot-sep {
  opacity: 0.7;
  padding: 0 6px;
}

/* Bangla: no tracking / forced caps, which break conjunct shaping */
.bnr-bn .bnr-uni {
  text-transform: none;
  letter-spacing: 0;
}

.bnr-bn .bnr-title {
  letter-spacing: 0;
}

.bnr-bn .bnr-row,
.bnr-bn .bnr-grp-name {
  font-weight: 600;
}

.bnr-bn .bnr-row {
  font-size: 18.5px;
}

.bnr-bn .bnr-row-meta {
  font-size: 16px;
}

.bnr-bn .bnr-grp-name {
  font-size: 17.5px;
}

.bnr-bn .bnr-grp-sub {
  font-size: 14px;
}

.bnr-bn .bnr-card-h {
  font-size: 20px;
}

.bnr-bn .bnr-title {
  font-size: 28px;
}

.bnr-bn .bnr-tag {
  font-size: 20.5px;
}

.bnr-bn .bnr-uni {
  font-size: 32px;
}

/* Card labels bold, values thin */
.tpl-banner .bnr-k {
  font-weight: 700;
}

.tpl-banner .bnr-v {
  font-weight: 300;
}

/* Group card: member names/IDs are values, so they go thin too */
.tpl-banner .bnr-grp-name,
.tpl-banner.bnr-bn .bnr-grp-name {
  font-weight: 300;
}

.tpl-banner .bnr-grp-sub {
  font-weight: 300;
}

/* Meta line (Semester | Batch | Dept) in the group card */
.tpl-banner .bnr-row-meta {
  font-weight: 300;
}

/* Group assignment: Submitted To spans the full width, like Submitted By */
.bnr-group .bnr-to {
  width: 100%;
  align-self: stretch;
}


/* =========================================================
   Chancery ("formal") — centered classic cover
   Plain block / table layout on purpose: it flows the same in the
   live preview, html2canvas and print.
   ========================================================= */
.tpl-formal {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
  color: #111;
  padding: 60px 62px 0;
  text-align: center;
  font-family: var(--paper-font, 'Times New Roman', Times, serif);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

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

.fm-logo {
  margin-bottom: 16px;
}

.fm-logo-img {
  display: block;
  margin: 0 auto;
  max-height: 97px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.fm-uni {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #000;
  overflow-wrap: anywhere;
}

.fm-uni-md {
  font-size: 23px;
}

.fm-uni-sm {
  font-size: 20px;
}

.fm-sub {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #555;
}

.fm-doc {
  margin-top: 74px;
}

.fm-eyebrow {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #666;
}

.fm-slash {
  margin: 0 4px;
}

.fm-title {
  margin-top: 18px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #000;
  overflow-wrap: anywhere;
}

.fm-title-md {
  font-size: 20px;
}

.fm-title-sm {
  font-size: 18px;
}

.fm-ph {
  color: #9aa0a8;
}

.fm-lbl {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #666;
}

.fm-val {
  font-weight: 700;
  color: #000;
}

.fm-course {
  margin-top: 54px;
}

.fm-course-val {
  margin-top: 7px;
  font-size: 20px;
  line-height: 1.3;
}

.fm-course-sep {
  margin: 0 9px;
}

.fm-meta {
  margin-top: 26px;
  font-size: 0;
}

.fm-meta-item {
  display: inline-block;
  vertical-align: top;
  margin: 0 22px;
}

.fm-meta-item .fm-val {
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.3;
}

.fm-parties-wrap {
  margin-top: 82px;
  padding: 0 25px;
  text-align: left;
}

.fm-parties {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.fm-col {
  display: table-cell;
  vertical-align: top;
}

.fm-col-by {
  width: 55%;
  padding-right: 20px;
}

.fm-col-to {
  width: 45%;
}

.fm-party-h {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fm-accent, #1e5993);
}

.fm-name {
  margin-top: 13px;
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #000;
  overflow-wrap: anywhere;
}

.fm-kvs {
  display: table;
  margin-top: 9px;
}

.fm-kv {
  display: table-row;
}

.fm-k,
.fm-v {
  display: table-cell;
  vertical-align: top;
  padding: 5px 0;
  font-size: 17.5px;
  line-height: 1.1;
}

.fm-k {
  width: 92px;
  padding-right: 8px;
  font-weight: 700;
  color: #666;
}

.fm-v {
  color: #333;
}

.fm-lines {
  margin-top: 9px;
}

.fm-line {
  padding: 5px 0;
  font-size: 17.5px;
  line-height: 1.1;
  color: #333;
  overflow-wrap: anywhere;
}

.fm-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 52px;
  text-align: center;
}

.fm-foot .fm-date {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.3;
  min-height: 22px;
}

/* Group Assignment */
.fm-group .fm-parties-wrap {
  margin-top: 38px;
}

.fm-group .fm-col-by {
  width: 64%;
}

.fm-group .fm-col-to {
  width: 36%;
  padding-left: 4px;
}

.fm-group .fm-name {
  font-size: 18.5px;
}

.fm-count {
  margin-left: 8px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #666;
}

.fm-roster {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.fm-mem {
  display: block;
}

.fm-mem+.fm-mem {
  margin-top: 8px;
}

/* Name on its own line, ID / Roll on the line beneath it (font sizes unchanged). */
.fm-mem-name,
.fm-mem-sub {
  display: block;
  padding: 0;
}

.fm-mem-name {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #111;
}

.fm-mem-sub {
  margin-top: 1px;
  font-size: 14.8px;
  line-height: 1.4;
  color: #555;
  white-space: nowrap;
}

.fm-star {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 6px;
  color: var(--fm-accent, #1e5993);
  vertical-align: -1px;
}

/* 5+ members: the stacked roster is taller, so trim the vertical gaps above it
   (spacing only, no font-size changes) to keep it clear of the submission date. */
.fm-many .fm-doc {
  margin-top: 60px;
}

.fm-many .fm-course {
  margin-top: 44px;
}

.fm-many .fm-parties-wrap {
  margin-top: 30px;
}

/* Bangla lines are taller, so a full 6-member roster needs a slightly tighter gap. */
.fm-bn.fm-many .fm-mem+.fm-mem {
  margin-top: 4px;
}

/* Bangla: no tracking / forced caps (both break conjuncts), roomier leading */
.tpl-formal.fm-bn * {
  letter-spacing: 0;
  text-transform: none;
}

.fm-bn .fm-title,
.fm-bn .fm-uni {
  line-height: 1.4;
}

.fm-bn .fm-name,
.fm-bn .fm-mem-name,
.fm-bn .fm-v,
.fm-bn .fm-k,
.fm-bn .fm-line {
  line-height: 1.5;
}

.fm-bn .fm-lbl,
.fm-bn .fm-party-h,
.fm-bn .fm-eyebrow {
  line-height: 1.5;
}

.fm-bn .fm-k {
  width: 104px;
}


/* ---- Style: page background texture ---- */
.bg-grid {
  grid-template-columns: repeat(3, 1fr);
}

.bg-card:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.bg-swatch {
  height: 46px;
}

/* Texture is the page's own background: it is painted on the template root, so every
   text block, bar, card and shape sits above it. The root's own colour stays underneath.
   --pgbg-img / --pgbg-size are set by js/page-bg.js (one canvas tile per pattern). */
html[data-page-bg]:not([data-page-bg="plain"]) #paper,
html[data-page-bg]:not([data-page-bg="plain"]) [id^="paperIndex"],
html[data-page-bg]:not([data-page-bg="plain"]) #paper>*,
html[data-page-bg]:not([data-page-bg="plain"]) [id^="paperIndex"]>* {
  background-image: var(--pgbg-img);
  background-size: var(--pgbg-size);
  background-repeat: repeat;
  background-position: 0 0;
}

/* Spring paints its page tint with gradients, so keep those under the texture. */
html[data-page-bg]:not([data-page-bg="plain"]) #paper>.tpl-spring {
  background-image: var(--pgbg-img),
    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%);
  background-size: var(--pgbg-size), auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

/* ===== Halo template: corner arcs + info card ===== */
.tpl-halo {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 40px 56px 46px;
  background: #fff;
  color: #111827;
  font-family: var(--paper-font, 'Inter', Arial, sans-serif);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

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

.ha-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.ha-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.ha-diamonds {
  top: 40px;
  right: 46px;
  width: 72px;
  height: 70px;
}

.ha-dots {
  left: 47px;
  bottom: 44px;
  width: 80px;
  height: 80px;
}

.ha-head,
.ha-mid,
.ha-foot {
  position: relative;
  z-index: 1;
}

.ha-head {
  flex: none;
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.ha-logo-img {
  display: block;
  margin: 0 auto 12px;
  max-height: 81px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ha-uni {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #1f2937;
  overflow-wrap: anywhere;
}

.ha-uni-md {
  font-size: 13px;
}

.ha-uni-sm {
  font-size: 11.5px;
}

.ha-sub {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}

/* The doc block + card sit centred in the space between the header rule and the date. */
.ha-mid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 0;
}

.ha-doc {
  text-align: center;
  margin-bottom: 24px;
}

.ha-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .42em;
  padding-left: .42em;
  text-transform: uppercase;
  color: #8b93a1;
}

.ha-no {
  margin-top: 6px;
  font-size: 47px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #111827;
}

.ha-title {
  margin: 10px auto 0;
  max-width: 78%;
  font-size: 17px;
  line-height: 1.35;
  color: #4b5563;
  overflow-wrap: anywhere;
}

.ha-title-md {
  font-size: 15.5px;
}

.ha-title-sm {
  font-size: 14px;
}

/* No number: the title becomes the headline. */
.ha-title-solo {
  margin-top: 14px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: #111827;
}

.ha-title-solo.ha-title-md {
  font-size: 22px;
}

.ha-title-solo.ha-title-sm {
  font-size: 18px;
}

.ha-ph {
  color: #9aa0a8;
  font-weight: 400;
}

.ha-card {
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  overflow: hidden;
}

.ha-row {
  padding: 18px 25px 15px;
}

.ha-row+.ha-row {
  border-top: 1px solid #e8eaee;
}

.ha-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 26px;
}

.ha-cell {
  min-width: 0;
}

.ha-lbl {
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9aa3b2;
}

.ha-lbl-c {
  margin-bottom: 7px;
  letter-spacing: .3em;
  padding-left: .3em;
}

.ha-count {
  margin-left: 8px;
  letter-spacing: .04em;
  text-transform: none;
}

.ha-strong {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #111827;
  overflow-wrap: anywhere;
}

.ha-line {
  font-size: 13.5px;
  line-height: 1.6;
  color: #4b5563;
  overflow-wrap: anywhere;
}

.ha-dot {
  margin: 0 3px;
}

/* Group roster: two columns, leader first, never split a name from its ID line. */
.ha-roster {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
  row-gap: 9px;
}

.ha-mem {
  min-width: 0;
  break-inside: avoid;
}

.ha-mem-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #111827;
  overflow-wrap: anywhere;
}

.ha-mem-sub {
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}

.ha-star {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  vertical-align: -1px;
  color: var(--ha-accent, #ee8b2b);
}

.tpl-halo.ha-many .ha-roster {
  row-gap: 6px;
}

.tpl-halo.ha-many .ha-row {
  padding-top: 16px;
  padding-bottom: 14px;
}

.ha-foot {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 56px;
  text-align: center;
}

.ha-date {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #1f2937;
}

/* Bangla: no tracking / forced caps (both break conjuncts), roomier leading */
.tpl-halo.ha-bn * {
  letter-spacing: 0;
  text-transform: none;
}

.ha-bn .ha-eyebrow {
  padding-left: 0;
}

.ha-bn .ha-lbl-c {
  padding-left: 0;
}

.ha-bn .ha-title,
.ha-bn .ha-uni {
  line-height: 1.45;
}

.ha-bn .ha-strong,
.ha-bn .ha-line,
.ha-bn .ha-mem-name,
.ha-bn .ha-mem-sub,
.ha-bn .ha-lbl,
.ha-bn .ha-sub,
.ha-bn .ha-date {
  line-height: 1.55;
}

.ha-bn.ha-many .ha-roster {
  row-gap: 3px;
}

/* ===== Missing required fields warning modal ===== */
@keyframes mfIconIn {
  0% { transform: scale(.3) rotate(-25deg); opacity: 0; }
  55% { transform: scale(1.15) rotate(8deg); opacity: 1; }
  75% { transform: scale(.95) rotate(-5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes mfWiggle {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-9deg); }
  30% { transform: rotate(8deg); }
  45% { transform: rotate(-6deg); }
  60% { transform: rotate(4deg); }
  75% { transform: rotate(0); }
}
@keyframes mfRing {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes mfChipIn {
  0% { opacity: 0; transform: translateY(8px) scale(.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mfCardShake {
  0%, 100% { translate: 0 0; }
  20% { translate: -7px 0; }
  40% { translate: 6px 0; }
  60% { translate: -4px 0; }
  80% { translate: 2px 0; }
}

.mf-card {
  max-width: 400px;
}

.mf-modal.show .mf-card {
  animation: thanksPop .5s var(--ease) forwards, mfCardShake .45s ease .5s 1;
}

.mf-card::before {
  background: radial-gradient(circle, rgba(226, 104, 90, 0.22), transparent 70%);
}

.mf-icon {
  background: linear-gradient(140deg, #f0a08f, var(--danger) 60%, #9c3a2e);
  box-shadow: 0 8px 22px -6px rgba(226, 104, 90, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
  animation: mfIconIn .6s var(--ease) .05s both;
}

.mf-icon i {
  display: inline-block;
  transform-origin: 50% 80%;
}

.mf-modal.show .mf-icon i {
  animation: mfWiggle .8s ease .7s 1;
}

.mf-icon-wrap::after {
  border: 2px solid var(--danger);
  animation: mfRing 1.4s ease-out .35s 3;
}

.mf-list-label {
  margin: 14px 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mf-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-bottom: 20px;
}

.mf-chip {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #f3b4aa;
  background: rgba(226, 104, 90, 0.12);
  border: 1px solid rgba(226, 104, 90, 0.35);
  border-radius: 999px;
  padding: 4px 11px;
  opacity: 0;
}

.mf-modal.show .mf-chip {
  animation: mfChipIn .35s var(--ease) both;
  animation-delay: calc(.45s + var(--i, 0) * 70ms);
}

.mf-chip-more {
  color: var(--text-dim);
  background: transparent;
  border-color: var(--line-2);
}

.mf-card .thanks-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bangla: no tracking / forced caps, roomier leading, Bengali-capable font */
.mf-card.mf-bn,
.mf-card.mf-bn .btn,
.mf-card.mf-bn .thanks-title {
  font-family: 'Li Ador Noirrit', 'Hind Siliguri', 'Noto Serif Bengali', 'Inter', sans-serif;
}

.mf-card.mf-bn .thanks-sub,
.mf-card.mf-bn .thanks-title {
  line-height: 1.6;
}

.mf-card.mf-bn .mf-list-label {
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .mf-modal.show .mf-card,
  .mf-icon,
  .mf-icon i,
  .mf-icon-wrap::after,
  .mf-modal.show .mf-chip {
    animation: none !important;
  }
  .mf-modal.show .mf-card,
  .mf-chip {
    opacity: 1;
    transform: none;
  }
}

/* ===== Spectrum template: bar-chart skyline, left-aligned minimal ===== */
.tpl-spectrum {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 56px 56px 0;
  background: #fff;
  color: #111827;
  font-family: var(--paper-font, 'Inter', Arial, sans-serif);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

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

.sp-art {
  position: absolute;
  top: 94px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 24px);
  display: block;
  z-index: 0;
  pointer-events: none;
}

.sp-head,
.sp-doc,
.sp-sec {
  position: relative;
  z-index: 1;
}

.sp-head {
  flex: none;
  display: flex;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid #eceef1;
}

.sp-logo-img {
  display: block;
  flex: none;
  height: 66px;
  width: auto;
  max-width: 120px;
  margin-right: 17px;
  object-fit: contain;
}

.sp-head-text {
  min-width: 0;
}

.sp-uni {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #1a2233;
  overflow-wrap: anywhere;
}

.sp-uni-md {
  font-size: 13px;
}

.sp-uni-sm {
  font-size: 11.5px;
}

.sp-sub {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6b7280;
}

.sp-doc {
  flex: none;
  padding: 28px 0 26px;
  border-bottom: 1px solid #eceef1;
}

.sp-eyebrow {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #9ca3af;
}

.sp-no {
  margin-top: 10px;
  font-size: 66px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #111827;
  overflow-wrap: anywhere;
}

.sp-title {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  color: #1f2937;
  overflow-wrap: anywhere;
}

.sp-title-md {
  font-size: 18px;
}

.sp-title-sm {
  font-size: 15.5px;
}

/* no number -> the title takes the headline slot */
.sp-title-solo {
  margin-top: 14px;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: #111827;
}

.sp-title-solo.sp-title-md {
  font-size: 34px;
}

.sp-title-solo.sp-title-sm {
  font-size: 26px;
}

.sp-ph {
  color: #b4bac3;
}

.sp-sec {
  flex: none;
  padding: 20px 0;
  border-bottom: 1px solid #eceef1;
}

.sp-sec:last-child {
  border-bottom: 0;
}

.sp-grid {
  display: flex;
  align-items: flex-start;
}

.sp-cell {
  flex: 1 1 0;
  min-width: 0;
}

.sp-cell + .sp-cell {
  padding-left: 28px;
}

.sp-lbl {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #9ca3af;
}

.sp-strong {
  margin-top: 9px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #111827;
  overflow-wrap: anywhere;
}

.sp-line {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.4;
  color: #6b7280;
  overflow-wrap: anywhere;
}

.sp-dot {
  margin: 0 3px;
}

.sp-gap {
  height: 18px;
}

.sp-dates {
  display: flex;
  align-items: flex-start;
}

.sp-date-item + .sp-date-item {
  margin-left: 56px;
}

.sp-date {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #1f2937;
  min-height: 21px;
}

/* Group Assignment */
.sp-count {
  margin-left: 8px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

.sp-roster {
  display: table;
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
}

.sp-mem {
  display: table-row;
}

.sp-mem-name,
.sp-mem-sub {
  display: table-cell;
  vertical-align: baseline;
  padding: 5px 0;
}

.sp-mem-name {
  width: 50%;
  padding-right: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #111827;
}

.sp-mem-sub {
  font-size: 13.5px;
  line-height: 1.4;
  color: #6b7280;
  white-space: nowrap;
}

.sp-star {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 6px;
  vertical-align: -1px;
  color: var(--sp-accent, #ee8b2b);
}

.sp-legend {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}

.sp-legend .sp-star {
  margin: 0 6px 0 0;
  width: 12px;
  height: 12px;
}

.sp-group .sp-doc {
  padding-bottom: 30px;
}

.sp-group .sp-sec {
  padding: 18px 0;
}

/* Bangla: no tracking / forced caps (both break conjuncts), roomier leading */
.tpl-spectrum.sp-bn * {
  letter-spacing: 0;
  text-transform: none;
}

.sp-bn .sp-no {
  font-size: 68px;
  line-height: 1.25;
}

.sp-bn .sp-title-solo {
  line-height: 1.3;
}

.sp-bn .sp-uni,
.sp-bn .sp-title,
.sp-bn .sp-strong,
.sp-bn .sp-line,
.sp-bn .sp-date,
.sp-bn .sp-mem-name,
.sp-bn .sp-mem-sub {
  line-height: 1.55;
}

.sp-bn .sp-lbl,
.sp-bn .sp-eyebrow {
  line-height: 1.6;
}

.sp-bn .sp-eyebrow {
  font-size: 15px;
}

.sp-bn .sp-lbl {
  font-size: 12px;
}



/* ===== Brutalist template: giant number, ruled foot, side watermark ===== */
.tpl-brutalist {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 56px 100px 40px 56px;
  background: #fff;
  color: #111827;
  font-family: var(--paper-font, 'Inter', Arial, sans-serif);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

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

/* decorative layer (behind everything) */
.bt-wash {
  position: absolute;
  top: 0;
  right: 0;
  width: 56%;
  height: 27%;
  background: var(--bt-wash, rgba(238, 139, 43, .06));
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 3% 74%);
  z-index: 0;
  pointer-events: none;
}

.bt-vline {
  position: absolute;
  right: 70px;
  top: 10%;
  height: 29%;
  width: 2px;
  background: var(--bt-line-c, rgba(238, 139, 43, .24));
  z-index: 0;
  pointer-events: none;
}

/* rotated, edge-cropped institution watermark (reads bottom -> top) */
.bt-wm {
  position: absolute;
  left: calc(100% + 6px);
  bottom: 150px;
  transform-origin: 0 150%;
  transform: rotate(-90deg);
  white-space: nowrap;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bt-wm, rgba(238, 139, 43, .10));
  z-index: 0;
  pointer-events: none;
}

.bt-top,
.bt-info,
.bt-foot {
  position: relative;
  z-index: 1;
}

.bt-top {
  flex: none;
}

.bt-eyebrow {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #9ca3af;
}

.bt-bar {
  height: 8px;
  margin-top: 30px;
  background: var(--bt-bar, rgba(238, 139, 43, .38));
}

.bt-no-row {
  display: flex;
  align-items: center;
  margin-top: 42px;
}

.bt-sq {
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 14px;
  background: var(--bt-sq, rgba(238, 139, 43, .42));
}

.bt-no-lbl {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #9ca3af;
}

.bt-no {
  margin: 8px 0 0 -8px;
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.045em;
  color: #050a14;
  overflow-wrap: anywhere;
}

.bt-title {
  margin-top: 26px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #1f2937;
  overflow-wrap: anywhere;
}

.bt-title-md {
  font-size: 20px;
}

.bt-title-sm {
  font-size: 16px;
}

/* no number -> the title takes the headline slot */
.bt-title-solo {
  margin-top: 40px;
  font-size: 50px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #050a14;
}

.bt-title-solo.bt-title-md {
  font-size: 48px;
}

.bt-title-solo.bt-title-sm {
  font-size: 28px;
}

.bt-ph {
  color: #b4bac3;
}

/* lower block: pushed to the foot of the page */
.bt-info {
  flex: none;
  margin-top: auto;
  padding-top: 20px;
  border-top: 2px solid #e5e7eb;
}

.bt-grid {
  display: flex;
  align-items: flex-start;
}

.bt-cell {
  flex: 1 1 0;
  min-width: 0;
}

.bt-cell + .bt-cell {
  padding-left: 28px;
}

.bt-lbl {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #9ca3af;
}

.bt-strong {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #0b1220;
  overflow-wrap: anywhere;
}

.bt-line {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.4;
  color: #6b7280;
  overflow-wrap: anywhere;
}

.bt-line b {
  font-weight: 700;
  color: #374151;
}

.bt-dot {
  margin: 0 3px;
}

.bt-foot {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px solid #e5e7eb;
}

.bt-dates {
  display: flex;
  align-items: flex-start;
}

.bt-date-item + .bt-date-item {
  margin-left: 40px;
}

.bt-date {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #1f2937;
  min-height: 21px;
}

.bt-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.bt-logo-img {
  display: block;
  flex: none;
  height: 48px;
  width: auto;
  max-width: 90px;
  margin-right: 12px;
  object-fit: contain;
}

.bt-brand-text {
  min-width: 0;
  max-width: 170px;
}

.bt-uni {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #374151;
  overflow-wrap: anywhere;
}

.bt-uni-md {
  font-size: 12.5px;
}

.bt-uni-sm {
  font-size: 11px;
}

.bt-sub {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.35;
  color: #6b7280;
}

/* Group Assignment */
.bt-count {
  margin-left: 8px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

/* group: right column (group name + roster) gets 70%, course 30% */
.bt-group .bt-cell:first-child {
  flex: 0 0 30%;
}

.bt-group .bt-cell-by {
  flex: 1 1 0;
}

.bt-roster {
  display: table;
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
}

.bt-mem {
  display: table-row;
}

.bt-mem-name,
.bt-mem-sub {
  display: table-cell;
  vertical-align: baseline;
  padding: 4px 0;
}

.bt-mem-name {
  width: 55%;
  padding-right: 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #0b1220;
}

.bt-mem-sub {
  font-size: 13.5px;
  line-height: 1.4;
  color: #6b7280;
  white-space: nowrap;
}

.bt-star {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 6px;
  vertical-align: -1px;
  color: var(--bt-accent, #ee8b2b);
}

.bt-legend {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}

.bt-legend .bt-star {
  margin: 0 6px 0 0;
  width: 12px;
  height: 12px;
}

.bt-group .bt-title {
  margin-top: 16px;
}

.bt-many .bt-mem-name,
.bt-many .bt-mem-sub {
  padding: 2px 0;
}

/* Bangla: no tracking / forced caps (both break conjuncts), roomier leading */
.tpl-brutalist.bt-bn * {
  letter-spacing: 0;
  text-transform: none;
}

.bt-bn .bt-no {
  line-height: 1.2;
}

.bt-bn .bt-title-solo {
  line-height: 1.3;
}

.bt-bn .bt-strong,
.bt-bn .bt-line,
.bt-bn .bt-date,
.bt-bn .bt-title,
.bt-bn .bt-uni,
.bt-bn .bt-mem-name,
.bt-bn .bt-mem-sub {
  line-height: 1.55;
}

.bt-bn .bt-lbl,
.bt-bn .bt-eyebrow,
.bt-bn .bt-no-lbl {
  line-height: 1.6;
}

.bt-bn .bt-eyebrow {
  font-size: 15px;
}

.bt-bn .bt-lbl {
  font-size: 12px;
}

/* ===== Cover Layout: flat sub-accordions (no boxes, no rules - spacing only) ===== */
#tplGrid {
  display: block;
}

.tpl-sub-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 11px 2px;
  background: none;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
  transition: color .2s var(--ease);
}

.tpl-sub-head:hover,
.tpl-sub.open>.tpl-sub-head {
  color: var(--brass-2);
}

.tpl-sub-head:focus-visible {
  outline: 2px solid rgba(214, 164, 74, 0.55);
  outline-offset: 1px;
}

.tpl-sub-count {
  font-size: 10.5px;
  color: var(--text-faint);
}

.tpl-sub-chev {
  margin-left: auto;
  font-size: 9px;
  color: var(--text-faint);
  transition: transform .3s var(--ease), color .2s var(--ease);
}

.tpl-sub-head:hover .tpl-sub-chev {
  color: var(--brass-2);
}

.tpl-sub.open>.tpl-sub-head .tpl-sub-chev {
  transform: rotate(180deg);
  color: var(--brass-2);
}

.tpl-sub-body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .3s var(--ease), visibility 0s linear .3s;
}

.tpl-sub.open>.tpl-sub-body {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.tpl-sub-inner {
  min-height: 0;
  overflow: hidden;
}

/* The corner check badge sticks out ~9px past its card, so the clip box (.tpl-sub-inner)
   is made 12px wider than the column on each side and the cards get a roomy gap so one
   card's badge never lands on its neighbour. */
/* Only horizontal room lives on the clip box; vertical room lives on the grid, so a
   collapsed category keeps zero height (padding on the box itself would not collapse). */
.tpl-sub-inner {
  margin: 0 -12px;
  padding: 0 12px;
}

.tpl-sub-inner>.tpl-grid {
  gap: 16px;
  padding: 10px 0 12px;
}

@media (prefers-reduced-motion: reduce) {

  .tpl-sub-body,
  .tpl-sub-chev {
    transition: none;
  }
}

/* Very narrow phones: when the A4 line and the zoom control no longer fit side by
   side, center each on its own row instead of leaving zoom stranded on the right. */
@media (max-width:350px) {
  .stage-toolbar .dims-info {
    width: 100%;
    justify-content: center;
  }

  .stage-toolbar .zoom-ctl {
    margin: 0 auto;
  }
}

/* Contact / Contribute forms: fallback actions shown after the mail app hand-off
   ("Open in Gmail", "Copy message"). See setupMailHandoff() in sidebar.js. */
.mail-fallback {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.mail-fallback[hidden] {
  display: none;
}

.mail-fallback .btn {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 12px;
  justify-content: center;
  white-space: nowrap;
}