@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --red-950: #48080F;
  --red-900: #620B15;
  --red-850: #76101A;
  --red-800: #8B1420;
  --red-700: #A91D2B;
  --red-600: #C73240;

  --paper: #FFFDFC;
  --canvas: #F5F0ED;
  --soft: #EFE0E2;
  --soft-2: #F8F2F1;

  --ink: #1C1719;
  --muted: #786B6E;
  --line: rgba(98, 11, 21, .13);

  --shadow:
    0 28px 80px
    rgba(72, 8, 15, .11);
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-height: 100vh;

  background:
    linear-gradient(
      150deg,
      #FAF7F4 0%,
      #F3EDE9 100%
    );

  color:
    var(--ink);

  font-family:
    'DM Sans',
    sans-serif;

  overflow-x: hidden;
}


button,
input,
select,
textarea {
  font: inherit;
}


button {
  cursor: pointer;
}


.hidden {
  display: none !important;
}


.eyebrow {
  display: inline-flex;

  align-items: center;

  min-height: 22px;

  color:
    rgba(255,255,255,.62);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .16em;
}


.eyebrow.dark {
  color:
    var(--red-800);
}


/* =====================================================
   LOADER
===================================================== */

.loader {
  position: fixed;

  inset: 0;

  z-index: 100000;

  background:
    var(--red-950);

  color:
    white;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 13px;

  transition:
    opacity .65s ease,
    visibility .65s ease;
}


.loader.hide {
  opacity: 0;
  visibility: hidden;
}


.loader-canvas {
  position: relative;

  width: 210px;
  height: 170px;

  margin-bottom: 12px;
}


.loader-brand {
  position: absolute;

  left: 73px;
  top: 42px;

  z-index: 5;

  width: 64px;
  height: 72px;

  padding: 10px;

  background:
    white;

  border-radius:
    19px 19px 5px 19px;

  display: grid;

  place-items: center;

  color:
    var(--red-900);

  font-family:
    Manrope;

  font-weight: 800;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.2);

  animation:
    brandFloat
    2.3s ease-in-out
    infinite;
}


.loader-brand img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.loader-page {
  position: absolute;

  width: 61px;
  height: 80px;

  border:
    1px solid
    rgba(255,255,255,.18);

  background:
    rgba(255,255,255,.07);

  backdrop-filter:
    blur(6px);
}


.page-a {
  left: 23px;
  top: 60px;

  transform:
    rotate(-9deg);

  border-radius:
    15px 15px 4px 15px;

  animation:
    pageMoveA
    2.4s ease-in-out
    infinite;
}


.page-b {
  right: 20px;
  top: 47px;

  transform:
    rotate(10deg);

  border-radius:
    15px 4px 15px 15px;

  animation:
    pageMoveB
    2.5s ease-in-out
    infinite;
}


.loader-line {
  position: absolute;

  height: 1px;

  background:
    rgba(255,255,255,.16);

  transform-origin:
    left center;
}


.line-a {
  width: 145px;

  left: 4px;
  top: 28px;

  transform:
    rotate(18deg);
}


.line-b {
  width: 160px;

  left: 35px;
  bottom: 26px;

  transform:
    rotate(-13deg);
}


.line-c {
  width: 72px;

  right: 2px;
  top: 17px;

  transform:
    rotate(-55deg);
}


.loader > strong {
  font-family:
    Manrope;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: .18em;
}


.loader > p {
  margin: 0;

  color:
    rgba(255,255,255,.48);

  font-size: 12px;
}


.loader-progress {
  width: 170px;
  height: 2px;

  margin-top: 11px;

  background:
    rgba(255,255,255,.1);

  overflow: hidden;
}


.loader-progress i {
  display: block;

  width: 48%;
  height: 100%;

  background:
    white;

  animation:
    loaderTrack
    1.2s cubic-bezier(.7,0,.3,1)
    infinite;
}


@keyframes brandFloat {

  50% {
    transform:
      translateY(-8px)
      rotate(-2deg);
  }

}


@keyframes pageMoveA {

  50% {
    transform:
      translate(-7px, 7px)
      rotate(-13deg);
  }

}


@keyframes pageMoveB {

  50% {
    transform:
      translate(8px, -5px)
      rotate(14deg);
  }

}


@keyframes loaderTrack {

  from {
    transform:
      translateX(-130%);
  }

  to {
    transform:
      translateX(340%);
  }

}


/* =====================================================
   FATAL
===================================================== */

.fatal-error {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 24px;

  background:
    var(--canvas);
}


.fatal-error.show {
  display: flex;
}


.fatal-sheet {
  width:
    min(480px, 100%);

  padding:
    38px;

  background:
    white;

  border:
    1px solid
    var(--line);

  border-radius:
    30px 30px 8px 30px;

  box-shadow:
    var(--shadow);

  text-align: center;
}


.fatal-sheet > span {
  width: 56px;
  height: 62px;

  margin:
    0 auto 22px;

  border-radius:
    16px 16px 4px 16px;

  background:
    var(--red-900);

  color:
    white;

  display: grid;

  place-items: center;

  font-family:
    Manrope;

  font-weight: 800;
}


.fatal-sheet h2 {
  margin: 0;

  font-family:
    Manrope;

  font-size: 27px;
}


.fatal-sheet p {
  color:
    var(--muted);

  line-height: 1.7;
}


.fatal-sheet button {
  min-height: 42px;

  border: 0;

  border-radius:
    13px 13px 4px 13px;

  padding:
    0 17px;

  background:
    var(--red-900);

  color:
    white;

  font-weight: 700;
}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar {
  position: fixed;

  left: 18px;
  top: 18px;
  bottom: 18px;

  z-index: 80;

  width: 246px;

  padding:
    22px 17px 17px;

  background:
    var(--red-950);

  color:
    white;

  border-radius:
    31px 10px 31px 31px;

  box-shadow:
    0 28px 80px
    rgba(72,8,15,.22);

  display: flex;

  flex-direction: column;

  overflow: hidden;
}


.sidebar::after {
  content: '';

  position: absolute;

  left: 53px;
  right: -70px;
  top: 45%;

  height: 1px;

  background:
    rgba(255,255,255,.07);

  transform:
    rotate(-24deg);

  box-shadow:
    0 35px 0
    rgba(255,255,255,.04),
    0 -35px 0
    rgba(255,255,255,.04);
}


.brand-area {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  gap: 12px;
}


.brand-logo {
  width: 52px;
  height: 58px;

  flex:
    0 0 52px;

  padding: 8px;

  border: 0;

  border-radius:
    16px 16px 5px 16px;

  background:
    white;

  display: grid;

  place-items: center;

  transition:
    .2s ease;
}


.brand-logo:hover {
  transform:
    rotate(-4deg)
    translateY(-2px);
}


.brand-logo img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.brand-logo span {
  color:
    var(--red-900);

  font-family:
    Manrope;

  font-size: 13px;

  font-weight: 800;
}


.brand-area strong {
  display: block;

  font-family:
    Manrope;

  font-size: 13px;

  line-height: 1.03;
}


.brand-area small {
  display: block;

  margin-top: 5px;

  color:
    rgba(255,255,255,.42);

  font-size: 12px;
}


.nav-scroll {
  position: relative;

  z-index: 3;

  margin-top: 28px;

  padding-right: 3px;

  overflow-y: auto;

  scrollbar-width: none;
}


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


.nav-group {
  margin-bottom: 20px;
}


.nav-group-title {
  display: block;

  padding:
    0 9px 6px;

  color:
    rgba(255,255,255,.3);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .14em;

  text-transform: uppercase;
}


.nav-item {
  width: 100%;

  min-height: 42px;

  margin-bottom: 3px;

  border: 0;

  border-radius:
    13px 13px 4px 13px;

  padding:
    0 10px;

  background:
    transparent;

  color:
    rgba(255,255,255,.58);

  display: flex;

  align-items: center;

  gap: 11px;

  text-align: left;

  transition:
    .18s ease;
}


.nav-item b {
  font-size: 12px;

  font-weight: 500;
}


.nav-item:hover {
  color:
    white;

  background:
    rgba(255,255,255,.055);

  transform:
    translateX(3px);
}


.nav-item.active {
  background:
    white;

  color:
    var(--red-950);
}


.icon {
  position: relative;

  width: 22px;
  height: 22px;

  flex:
    0 0 22px;

  display: block;
}


/* custom icons */

.icon::before,
.icon::after {
  content: '';

  position: absolute;

  border-color:
    currentColor;
}


.icon-dashboard::before {
  inset:
    4px 4px 4px 4px;

  border:
    1.5px solid
    currentColor;

  border-radius:
    3px;
}


.icon-dashboard::after {
  width: 6px;
  height: 6px;

  left: 8px;
  top: 8px;

  background:
    currentColor;

  border-radius: 1px;
}


.icon-note::before {
  width: 13px;
  height: 16px;

  left: 4px;
  top: 3px;

  border:
    1.5px solid
    currentColor;

  border-radius:
    2px 5px 2px 2px;
}


.icon-note::after {
  width: 7px;
  height: 1.5px;

  left: 8px;
  top: 9px;

  background:
    currentColor;

  box-shadow:
    0 4px 0
    currentColor;
}


.icon-inbox::before {
  width: 15px;
  height: 12px;

  left: 3px;
  top: 6px;

  border:
    1.5px solid
    currentColor;

  border-radius: 3px;
}


.icon-inbox::after {
  width: 7px;
  height: 4px;

  left: 7px;
  top: 6px;

  border-bottom:
    1.5px solid
    currentColor;

  transform:
    rotate(45deg);
}


.icon-check::before {
  width: 15px;
  height: 15px;

  left: 3px;
  top: 3px;

  border:
    1.5px solid
    currentColor;

  border-radius: 4px;
}


.icon-check::after {
  width: 8px;
  height: 4px;

  left: 7px;
  top: 8px;

  border-left:
    1.8px solid
    currentColor;

  border-bottom:
    1.8px solid
    currentColor;

  transform:
    rotate(-45deg);
}


.icon-progress::before {
  width: 15px;
  height: 8px;

  left: 3px;
  top: 7px;

  border:
    1.5px solid
    currentColor;

  border-radius: 6px;
}


.icon-progress::after {
  width: 7px;
  height: 4px;

  left: 6px;
  top: 9px;

  background:
    currentColor;

  border-radius: 4px;
}


.icon-program::before {
  width: 15px;
  height: 15px;

  left: 3px;
  top: 3px;

  border-left:
    1.5px solid
    currentColor;

  border-bottom:
    1.5px solid
    currentColor;
}


.icon-program::after {
  width: 11px;
  height: 7px;

  left: 6px;
  top: 5px;

  border-top:
    1.5px solid
    currentColor;

  border-right:
    1.5px solid
    currentColor;

  transform:
    skew(-15deg);
}


.icon-budget::before {
  width: 15px;
  height: 16px;

  left: 3px;
  top: 3px;

  border:
    1.5px solid
    currentColor;

  border-radius: 3px;
}


.icon-budget::after {
  width: 9px;
  height: 1.5px;

  left: 6px;
  top: 8px;

  background:
    currentColor;

  box-shadow:
    0 4px 0
    currentColor;
}


.icon-wallet::before {
  width: 16px;
  height: 12px;

  left: 3px;
  top: 6px;

  border:
    1.5px solid
    currentColor;

  border-radius: 4px;
}


.icon-wallet::after {
  width: 6px;
  height: 5px;

  right: 1px;
  top: 9px;

  border:
    1.5px solid
    currentColor;

  border-radius:
    4px 1px 1px 4px;
}


.icon-box::before {
  width: 14px;
  height: 12px;

  left: 4px;
  top: 7px;

  border:
    1.5px solid
    currentColor;
}


.icon-box::after {
  width: 10px;
  height: 7px;

  left: 6px;
  top: 3px;

  border-left:
    1.5px solid
    currentColor;

  border-top:
    1.5px solid
    currentColor;

  transform:
    rotate(30deg)
    skewX(-20deg);
}


.icon-user::before {
  width: 7px;
  height: 7px;

  left: 7px;
  top: 3px;

  border:
    1.5px solid
    currentColor;

  border-radius: 50%;
}


.icon-user::after {
  width: 14px;
  height: 8px;

  left: 4px;
  bottom: 2px;

  border:
    1.5px solid
    currentColor;

  border-bottom: 0;

  border-radius:
    10px 10px 0 0;
}


.icon-people::before {
  width: 6px;
  height: 6px;

  left: 4px;
  top: 4px;

  border:
    1.5px solid
    currentColor;

  border-radius: 50%;

  box-shadow:
    9px 0 0 -1px
    var(--red-950);
}


.nav-item.active
.icon-people::before {
  box-shadow:
    9px 0 0 -1px
    white;
}


.icon-people::after {
  width: 17px;
  height: 8px;

  left: 2px;
  bottom: 2px;

  border:
    1.5px solid
    currentColor;

  border-top: 0;

  border-radius:
    0 0 10px 10px;
}


.icon-file::before {
  width: 13px;
  height: 16px;

  left: 4px;
  top: 3px;

  border:
    1.5px solid
    currentColor;

  border-radius:
    2px 5px 2px 2px;
}


.icon-file::after {
  width: 7px;
  height: 1.5px;

  left: 7px;
  top: 9px;

  background:
    currentColor;
}


.icon-calendar::before {
  width: 15px;
  height: 14px;

  left: 3px;
  top: 5px;

  border:
    1.5px solid
    currentColor;

  border-radius: 3px;
}


.icon-calendar::after {
  width: 11px;
  height: 1.5px;

  left: 5px;
  top: 9px;

  background:
    currentColor;
}


.icon-archive::before {
  width: 15px;
  height: 11px;

  left: 3px;
  top: 7px;

  border:
    1.5px solid
    currentColor;

  border-radius: 2px;
}


.icon-archive::after {
  width: 9px;
  height: 3px;

  left: 6px;
  top: 4px;

  border:
    1.5px solid
    currentColor;
}


.icon-history::before {
  width: 15px;
  height: 15px;

  left: 3px;
  top: 3px;

  border:
    1.5px solid
    currentColor;

  border-radius: 50%;
}


.icon-history::after {
  width: 6px;
  height: 5px;

  left: 10px;
  top: 7px;

  border-left:
    1.5px solid
    currentColor;

  border-bottom:
    1.5px solid
    currentColor;
}


.sidebar-footer {
  position: relative;

  z-index: 3;

  margin-top: auto;

  padding:
    13px 9px 4px;

  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.sidebar-footer span {
  display: inline-block;

  padding:
    4px 7px;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius:
    8px 8px 3px 8px;

  font-size: 12px;
}


.sidebar-footer p {
  margin:
    6px 0 0;

  color:
    rgba(255,255,255,.3);

  font-size: 12px;
}


/* =====================================================
   WORKSPACE / TOPBAR
===================================================== */

.workspace {
  min-height: 100vh;

  margin-left:
    282px;
}


.topbar {
  position: sticky;

  top: 0;

  z-index: 60;

  height: 88px;

  padding:
    0 38px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  background:
    rgba(247,242,239,.86);

  backdrop-filter:
    blur(20px);

  border-bottom:
    1px solid
    rgba(98,11,21,.07);
}


.topbar-left {
  display: flex;

  align-items: center;

  gap: 13px;
}


.topbar h1 {
  margin: 0;

  font-family:
    Manrope;

  font-size: 21px;

  font-weight: 800;

  letter-spacing:
    -.045em;
}


#pageMeta {
  display: block;

  margin-top: 2px;

  color:
    #9B8B8E;

  font-size: 12px;

  letter-spacing: .1em;
}


.mobile-menu {
  display: none;
}


.top-actions {
  display: flex;

  align-items: center;

  gap: 8px;
}


.top-actions select {
  min-height: 42px;

  padding:
    0 33px 0 12px;

  border:
    1px solid
    var(--line);

  border-radius:
    13px 5px 13px 13px;

  background:
    white;

  color:
    var(--ink);

  outline: none;
}


.top-tool,
.primary-action,
.secondary-action {
  min-height: 42px;

  border: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  transition:
    .18s ease;
}


.top-tool {
  padding:
    0 13px;

  border:
    1px solid
    var(--line);

  border-radius:
    16px 16px 5px 16px;

  background:
    white;

  color:
    var(--red-900);
}


.top-tool:hover {
  background:
    var(--soft);
}


.top-tool span {
  font-size: 12px;

  font-weight: 700;
}


.primary-action {
  padding:
    0 15px;

  border-radius:
    14px 14px 5px 14px;

  background:
    var(--red-900);

  color:
    white;
}


.primary-action:hover {
  transform:
    translateY(-2px)
    rotate(-1deg);

  background:
    var(--red-700);
}


.primary-action span {
  font-size: 12px;

  font-weight: 700;
}


.secondary-action {
  padding:
    0 14px;

  border:
    1px solid
    var(--line);

  border-radius:
    13px 13px 4px 13px;

  background:
    white;

  color:
    var(--red-900);

  font-size: 12px;

  font-weight: 700;
}


.plus-icon {
  position: relative;

  width: 12px;
  height: 12px;
}


.plus-icon::before,
.plus-icon::after {
  content: '';

  position: absolute;

  background:
    currentColor;
}


.plus-icon::before {
  width: 12px;
  height: 1.5px;

  left: 0;
  top: 5px;
}


.plus-icon::after {
  width: 1.5px;
  height: 12px;

  left: 5px;
  top: 0;
}


.pdf-icon {
  position: relative;

  width: 15px;
  height: 17px;

  border:
    1.4px solid
    currentColor;

  border-radius:
    2px 4px 2px 2px;
}


.pdf-icon::after {
  content: '';

  position: absolute;

  width: 7px;
  height: 1.3px;

  left: 3px;
  bottom: 4px;

  background:
    currentColor;

  box-shadow:
    0 -4px 0
    currentColor;
}


/* =====================================================
   PAGE
===================================================== */

.page {
  display: none;

  width:
    min(1480px, 100%);

  margin:
    0 auto;

  padding:
    36px 38px 90px;
}


.page.active {
  display: block;

  animation:
    pageEnter
    .42s ease;
}


@keyframes pageEnter {

  from {
    opacity: 0;

    transform:
      translateY(7px);
  }

}


.page-intro {
  margin-bottom: 29px;
}


.page-intro h2 {
  margin: 0;

  font-family:
    Manrope;

  font-size:
    clamp(29px, 4vw, 47px);

  letter-spacing:
    -.065em;
}


.page-intro p {
  max-width: 570px;

  margin:
    10px 0 0;

  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.7;
}


.split-intro {
  display: flex;

  align-items: flex-end;

  justify-content:
    space-between;

  gap: 20px;
}


/* =====================================================
   DASHBOARD HERO
===================================================== */

.dashboard-hero {
  min-height: 470px;

  display: grid;

  grid-template-columns:
    1.55fr .55fr;

  gap: 12px;
}


.hero-copy {
  position: relative;

  padding:
    48px;

  border-radius:
    38px 38px 11px 38px;

  background:
    linear-gradient(
      135deg,
      var(--red-950),
      var(--red-850)
    );

  color:
    white;

  overflow: hidden;

  box-shadow:
    var(--shadow);
}


.hero-copy::before {
  content: '';

  position: absolute;

  width: 300px;
  height: 1px;

  right: -50px;
  top: 110px;

  background:
    rgba(255,255,255,.15);

  transform:
    rotate(-29deg);

  box-shadow:
    0 35px 0
    rgba(255,255,255,.07),
    0 70px 0
    rgba(255,255,255,.04);
}


.hero-copy h2 {
  position: relative;

  z-index: 2;

  margin:
    18px 0 0;

  font-family:
    Manrope;

  font-size:
    clamp(50px, 6vw, 86px);

  line-height:
    .9;

  letter-spacing:
    -.085em;

  font-weight: 800;
}


.hero-copy h2 em {
  color:
    #F0CED2;

  font-style: normal;
}


.hero-copy p {
  position: absolute;

  left: 48px;
  bottom: 45px;

  z-index: 2;

  width:
    min(390px, 58%);

  margin: 0;

  color:
    rgba(255,255,255,.6);

  font-size: 12px;

  line-height: 1.7;
}


.hero-number {
  padding:
    30px;

  border:
    1px solid
    var(--line);

  border-radius:
    31px 31px 9px 31px;

  background:
    white;

  display: flex;

  flex-direction: column;
}


.hero-number > span {
  color:
    var(--muted);

  font-size: 12px;
}


.hero-number > strong {
  margin-top: 19px;

  font-family:
    Manrope;

  font-size:
    clamp(48px, 6vw, 76px);

  line-height: 1;

  letter-spacing:
    -.075em;

  color:
    var(--red-900);
}


.hero-rule {
  height: 1px;

  margin:
    auto 0 21px;

  background:
    var(--line);
}


.hero-mini {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;
}


.hero-mini div {
  min-height: 92px;

  padding:
    14px;

  background:
    var(--soft-2);

  border-radius:
    16px 16px 5px 16px;
}


.hero-mini small {
  display: block;

  color:
    var(--muted);

  font-size: 12px;
}


.hero-mini b {
  display: block;

  margin-top: 11px;

  font-family:
    Manrope;

  font-size: 25px;

  color:
    var(--red-900);
}


/* =====================================================
   ATTENTION
===================================================== */

.attention-layout {
  margin-top: 12px;

  display: grid;

  grid-template-columns:
    1.25fr .75fr;

  gap: 12px;
}


.attention-board {
  padding:
    28px;

  border:
    1px solid
    var(--line);

  border-radius:
    28px 28px 8px 28px;

  background:
    white;
}


.attention-board > header {
  display: flex;

  align-items: flex-start;

  justify-content:
    space-between;

  gap: 20px;

  padding-bottom: 20px;

  border-bottom:
    1px solid
    var(--line);
}


.attention-board h3 {
  margin:
    3px 0 0;

  font-family:
    Manrope;

  font-size: 22px;

  letter-spacing:
    -.045em;
}


.count-box {
  min-width: 45px;
  height: 45px;

  padding:
    0 10px;

  border-radius:
    14px 14px 4px 14px;

  background:
    var(--red-900);

  color:
    white;

  display: grid;

  place-items: center;

  font-family:
    Manrope;

  font-size: 18px;

  font-weight: 800;
}


.attention-list {
  padding-top: 8px;
}


.attention-row {
  display: grid;

  grid-template-columns:
    8px 1fr auto;

  gap: 12px;

  align-items: center;

  min-height: 55px;

  border-bottom:
    1px solid
    rgba(98,11,21,.08);
}


.attention-row:last-child {
  border-bottom: 0;
}


.attention-marker {
  width: 8px;
  height: 28px;

  border-radius:
    6px 2px 6px 6px;

  background:
    #C99AA1;
}


.attention-row.danger
.attention-marker {
  background:
    var(--red-700);
}


.attention-row.info
.attention-marker {
  background:
    #8D7A7D;
}


.attention-row span {
  font-size: 12px;
}


.attention-row b {
  color:
    var(--red-900);

  font-family:
    Manrope;

  font-size: 15px;
}


.next-meeting {
  min-height: 250px;

  padding:
    28px;

  border-radius:
    28px 28px 8px 28px;

  background:
    var(--red-800);

  color:
    white;

  display: flex;

  flex-direction: column;
}


.next-meeting-card {
  margin-top: auto;
}


.next-meeting-card strong {
  display: block;

  font-family:
    Manrope;

  font-size:
    clamp(25px, 3vw, 35px);

  line-height: 1;

  letter-spacing:
    -.06em;
}


.next-meeting-card span {
  display: block;

  margin-top: 11px;

  color:
    rgba(255,255,255,.62);

  font-size: 12px;
}


/* =====================================================
   STATS / BUDGET / FUNDS
===================================================== */

.dashboard-stats {
  margin-top: 12px;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 12px;
}


.dashboard-stats article {
  min-height: 145px;

  padding:
    21px;

  border:
    1px solid
    var(--line);

  border-radius:
    23px 23px 7px 23px;

  background:
    white;

  display: flex;

  flex-direction: column;
}


.dashboard-stats small {
  color:
    var(--muted);

  font-size: 12px;
}


.dashboard-stats strong {
  margin-top: 18px;

  font-family:
    Manrope;

  font-size: 28px;

  letter-spacing:
    -.05em;
}


.stat-line {
  width: 36px;
  height: 5px;

  margin-top: auto;

  border-radius:
    6px 2px 6px 6px;

  background:
    var(--red-800);
}


.dashboard-stats article:nth-child(even)
.stat-line {
  width: 22px;

  background:
    #C98F99;
}


.budget-story {
  margin-top: 12px;

  padding:
    32px;

  border-radius:
    30px 30px 9px 30px;

  background:
    #ECD7DA;

  display: grid;

  grid-template-columns:
    .9fr 1.3fr;

  gap: 30px;
}


.budget-head h3 {
  margin:
    7px 0 0;

  font-family:
    Manrope;

  font-size:
    clamp(28px, 4vw, 45px);

  line-height: .98;

  letter-spacing:
    -.065em;

  color:
    var(--red-950);
}


.budget-values {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;
}


.budget-values div {
  padding:
    18px;

  border-left:
    1px solid
    rgba(98,11,21,.18);
}


.budget-values small {
  color:
    #856D72;

  font-size: 12px;
}


.budget-values strong {
  display: block;

  margin-top: 11px;

  font-family:
    Manrope;

  font-size:
    clamp(18px, 2vw, 27px);

  letter-spacing:
    -.05em;
}


.budget-track {
  grid-column:
    1 / -1;

  height: 5px;

  background:
    rgba(98,11,21,.1);

  overflow: hidden;

  border-radius:
    8px;
}


.budget-track i {
  display: block;

  width: 0;
  height: 100%;

  background:
    var(--red-900);

  transition:
    width .5s ease;
}


.funds-flow {
  margin-top: 12px;

  display: grid;

  grid-template-columns:
    1.1fr .95fr .95fr;

  gap: 12px;
}


.fund-block {
  min-height: 215px;

  padding:
    25px;

  border-radius:
    27px 27px 8px 27px;

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;
}


.fund-block > span {
  font-size: 12px;

  font-weight: 600;
}


.fund-block strong {
  font-family:
    Manrope;

  font-size:
    clamp(24px, 3vw, 37px);

  letter-spacing:
    -.07em;
}


.fund-block small {
  font-size: 12px;

  line-height: 1.6;
}


.fund-dark {
  background:
    var(--red-950);

  color:
    white;
}


.fund-dark small {
  color:
    rgba(255,255,255,.55);
}


.fund-soft {
  background:
    var(--soft);

  color:
    var(--red-950);
}


.fund-soft small {
  color:
    #7D666A;
}


.fund-line {
  background:
    white;

  border:
    1px solid
    var(--red-700);

  color:
    var(--red-900);
}


.fund-line small {
  color:
    var(--muted);
}


/* =====================================================
   LATEST / GENERIC RECORDS
===================================================== */

.latest-section {
  margin-top: 12px;

  padding:
    28px;

  border:
    1px solid
    var(--line);

  border-radius:
    28px 28px 8px 28px;

  background:
    white;
}


.latest-section > header {
  display: flex;

  align-items: flex-end;

  justify-content:
    space-between;

  gap: 20px;

  margin-bottom: 8px;
}


.latest-section h3 {
  margin:
    3px 0 0;

  font-family:
    Manrope;

  font-size: 20px;
}


.latest-section header button {
  border: 0;

  background:
    transparent;

  color:
    var(--red-900);

  display: flex;

  align-items: center;

  gap: 9px;

  font-size: 12px;

  font-weight: 700;
}


.arrow-icon {
  position: relative;

  width: 16px;
  height: 8px;
}


.arrow-icon::before {
  content: '';

  position: absolute;

  left: 0;
  top: 4px;

  width: 14px;
  height: 1px;

  background:
    currentColor;
}


.arrow-icon::after {
  content: '';

  position: absolute;

  right: 0;
  top: 1px;

  width: 6px;
  height: 6px;

  border-top:
    1px solid
    currentColor;

  border-right:
    1px solid
    currentColor;

  transform:
    rotate(45deg);
}


.search-row {
  margin-bottom: 27px;
}


.search-row input {
  width:
    min(550px, 100%);

  min-height: 48px;

  padding:
    0 3px;

  border: 0;

  border-bottom:
    1px solid
    rgba(98,11,21,.2);

  background:
    transparent;

  color:
    var(--ink);

  outline: none;

  font-size: 15px;
}


.search-row input:focus {
  border-bottom-color:
    var(--red-800);
}


.record-list {
  border-top:
    1px solid
    var(--line);
}


.record-row {
  position: relative;

  min-height: 88px;

  padding:
    18px 5px;

  border-bottom:
    1px solid
    rgba(98,11,21,.09);

  display: grid;

  grid-template-columns:
    minmax(0,1fr) auto;

  gap: 20px;

  align-items: center;

  transition:
    .18s ease;
}


.record-row::before {
  content: '';

  position: absolute;

  left: -5px;
  top: 19px;
  bottom: 19px;

  width: 2px;

  background:
    var(--red-800);

  transform:
    scaleY(0);

  transition:
    transform .18s ease;
}


.record-row:hover {
  padding-left: 14px;
}


.record-row:hover::before {
  transform:
    scaleY(1);
}


.record-main strong {
  display: block;

  font-size: 13px;

  font-weight: 600;
}


.record-main span {
  display: block;

  margin-top: 6px;

  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.55;
}


.record-actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 6px;

  flex-wrap: wrap;
}


.badge {
  min-height: 27px;

  padding:
    0 9px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px 14px 4px 14px;

  background:
    white;

  color:
    var(--muted);

  display: inline-flex;

  align-items: center;

  font-size: 12px;
}


.badge.approved,
.badge.done {
  background:
    #F0E6E7;

  color:
    var(--red-900);

  border-color:
    #D7B6BB;
}


.badge.danger {
  background:
    var(--red-900);

  color:
    white;

  border-color:
    var(--red-900);
}


.mini-button {
  min-height: 31px;

  padding:
    0 10px;

  border:
    1px solid
    var(--line);

  border-radius:
    10px 10px 3px 10px;

  background:
    white;

  color:
    var(--red-900);

  font-size: 12px;

  font-weight: 700;

  transition:
    .18s;
}


.mini-button:hover {
  background:
    var(--red-900);

  border-color:
    var(--red-900);

  color:
    white;
}


/* =====================================================
   PROPOSALS / DECISIONS
===================================================== */

.editorial-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;
}


.proposal-card {
  min-height: 285px;

  padding:
    24px;

  border:
    1px solid
    var(--line);

  border-radius:
    27px 27px 8px 27px;

  background:
    white;

  display: flex;

  flex-direction: column;

  transition:
    .2s ease;
}


.proposal-card:nth-child(3n+2) {
  background:
    var(--soft);
}


.proposal-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow);
}


.proposal-card h3 {
  margin:
    16px 0 0;

  font-family:
    Manrope;

  font-size: 19px;

  line-height: 1.05;

  letter-spacing:
    -.04em;
}


.proposal-card p {
  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.6;
}


.proposal-meta {
  margin-top: auto;

  padding-top: 18px;

  border-top:
    1px solid
    rgba(98,11,21,.1);
}


.proposal-meta span {
  display: block;

  margin-top: 4px;

  color:
    var(--muted);

  font-size: 12px;
}


.proposal-actions {
  margin-top: 13px;

  display: flex;

  gap: 6px;

  flex-wrap: wrap;
}


.decision-list {
  counter-reset:
    decision;
}


.decision-card {
  counter-increment:
    decision;

  position: relative;

  padding:
    25px 6px 25px 78px;

  border-bottom:
    1px solid
    var(--line);
}


.decision-card::before {
  content:
    counter(decision, decimal-leading-zero);

  position: absolute;

  left: 4px;
  top: 24px;

  font-family:
    Manrope;

  font-size: 22px;

  font-weight: 800;

  color:
    #C7AEB2;
}


.decision-card h3 {
  margin: 0;

  font-size: 14px;

  line-height: 1.55;
}


.decision-card p {
  margin:
    8px 0 0;

  color:
    var(--muted);

  font-size: 12px;
}


.decision-card footer {
  margin-top: 14px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 12px;

  flex-wrap: wrap;
}


/* =====================================================
   TASKS
===================================================== */

.task-list {
  display: grid;

  gap: 9px;
}


.task-card {
  padding:
    21px;

  border:
    1px solid
    var(--line);

  border-radius:
    20px 20px 6px 20px;

  background:
    white;

  display: grid;

  grid-template-columns:
    minmax(0,1fr) 170px auto;

  gap: 20px;

  align-items: center;
}


.task-card.overdue {
  border-color:
    var(--red-700);

  box-shadow:
    inset 3px 0 0
    var(--red-800);
}


.task-main strong {
  display: block;

  font-size: 12px;

  line-height: 1.5;
}


.task-main span {
  display: block;

  margin-top: 5px;

  color:
    var(--muted);

  font-size: 12px;
}


.progress-wrap {
  min-width: 0;
}


.progress-head {
  display: flex;

  justify-content:
    space-between;

  gap: 8px;

  color:
    var(--muted);

  font-size: 12px;
}


.progress-bar {
  height: 5px;

  margin-top: 8px;

  background:
    #EDE3E4;

  overflow: hidden;

  border-radius: 8px;
}


.progress-bar i {
  display: block;

  height: 100%;

  background:
    var(--red-800);
}


/* =====================================================
   PROGRAM / RAPBJ / FINANCE
===================================================== */

.program-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 12px;
}


.program-card {
  min-height: 270px;

  padding:
    25px;

  border-radius:
    27px 27px 8px 27px;

  border:
    1px solid
    var(--line);

  background:
    white;

  display: flex;

  flex-direction: column;
}


.program-card:nth-child(4n+2),
.program-card:nth-child(4n+3) {
  background:
    var(--soft-2);
}


.program-card h3 {
  margin:
    12px 0 0;

  font-family:
    Manrope;

  font-size: 21px;

  line-height: 1.05;

  letter-spacing:
    -.045em;
}


.program-card p {
  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.6;
}


.program-budget {
  margin-top: auto;

  padding-top: 20px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  border-top:
    1px solid
    var(--line);
}


.program-budget small {
  color:
    var(--muted);

  font-size: 12px;
}


.program-budget strong {
  display: block;

  margin-top: 5px;

  font-family:
    Manrope;

  font-size: 15px;
}


.program-card footer {
  margin-top: 15px;

  display: flex;

  justify-content:
    space-between;

  gap: 8px;

  align-items: center;
}


.rapbj-summary {
  margin-bottom: 27px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;
}


.rapbj-summary div {
  min-height: 150px;

  padding:
    23px;

  border-radius:
    24px 24px 7px 24px;

  background:
    white;

  border:
    1px solid
    var(--line);

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;
}


.rapbj-summary div:nth-child(2) {
  background:
    var(--soft);
}


.rapbj-summary div:nth-child(3) {
  background:
    var(--red-900);

  color:
    white;
}


.rapbj-summary small {
  color:
    var(--muted);

  font-size: 12px;
}


.rapbj-summary div:nth-child(3)
small {
  color:
    rgba(255,255,255,.55);
}


.rapbj-summary strong {
  font-family:
    Manrope;

  font-size:
    clamp(22px, 3vw, 33px);

  letter-spacing:
    -.06em;
}


.finance-stage {
  margin-bottom: 26px;

  display: grid;

  grid-template-columns:
    1fr 1fr 1.2fr;

  gap: 10px;
}


.finance-stage article {
  min-height: 170px;

  padding:
    24px;

  border:
    1px solid
    var(--line);

  border-radius:
    25px 25px 7px 25px;

  background:
    white;

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;
}


.finance-stage article:nth-child(1) {
  background:
    var(--soft);
}


.finance-stage .finance-main {
  background:
    var(--red-950);

  color:
    white;
}


.finance-stage small {
  color:
    var(--muted);

  font-size: 12px;
}


.finance-stage .finance-main
small {
  color:
    rgba(255,255,255,.55);
}


.finance-stage strong {
  font-family:
    Manrope;

  font-size:
    clamp(22px, 3vw, 34px);

  letter-spacing:
    -.06em;
}


/* =====================================================
   INVENTORY
===================================================== */

.inventory-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 11px;
}


.inventory-card {
  min-height: 235px;

  padding:
    23px;

  border:
    1px solid
    var(--line);

  border-radius:
    25px 25px 7px 25px;

  background:
    white;

  display: flex;

  flex-direction: column;

  transition:
    .18s ease;
}


.inventory-card:nth-child(3n+2) {
  background:
    var(--soft-2);
}


.inventory-card:hover {
  transform:
    translateY(-3px);
}


.inventory-card h3 {
  margin: 0;

  font-family:
    Manrope;

  font-size: 17px;

  letter-spacing:
    -.035em;
}


.inventory-card p {
  margin:
    6px 0 0;

  color:
    var(--muted);

  font-size: 12px;
}


.inventory-card > strong {
  margin-top: 26px;

  font-family:
    Manrope;

  font-size: 30px;

  letter-spacing:
    -.055em;
}


.inventory-card footer {
  margin-top: auto;

  padding-top: 17px;

  border-top:
    1px solid
    var(--line);

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 8px;
}


/* =====================================================
   PEOPLE
===================================================== */

.portrait-grid,
.member-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 11px;
}


.person-card {
  min-height: 330px;

  border:
    1px solid
    var(--line);

  border-radius:
    28px 28px 8px 28px;

  background:
    white;

  overflow: hidden;

  transition:
    .2s ease;
}


.member-grid
.person-card {
  min-height: 300px;
}


.person-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow);
}


.person-photo {
  height: 175px;

  overflow: hidden;

  background:
    var(--soft);
}


.member-grid
.person-photo {
  height: 145px;
}


.person-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .45s ease;
}


.person-card:hover
.person-photo img {
  transform:
    scale(1.035);
}


.photo-fallback {
  width: 100%;
  height: 100%;

  display: grid;

  place-items: center;

  background:
    linear-gradient(
      135deg,
      #F1DFE1,
      #DDB9BE
    );

  color:
    var(--red-900);

  font-family:
    Manrope;

  font-size: 31px;

  font-weight: 800;
}


.person-card:nth-child(3n+2)
.photo-fallback {
  background:
    var(--red-900);

  color:
    white;
}


.person-info {
  padding:
    21px;
}


.person-info h3 {
  margin: 0;

  font-size: 13px;
}


.person-info p {
  margin:
    5px 0 0;

  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.5;
}


.person-info footer {
  margin-top: 17px;

  display: flex;

  justify-content:
    flex-end;
}


/* =====================================================
   DOCUMENTS
===================================================== */

.document-list {
  display: grid;

  gap: 9px;
}


.document-card {
  padding:
    20px;

  border:
    1px solid
    var(--line);

  border-radius:
    19px 19px 6px 19px;

  background:
    white;

  display: grid;

  grid-template-columns:
    56px minmax(0,1fr) auto;

  gap: 16px;

  align-items: center;
}


.document-mark {
  width: 50px;
  height: 56px;

  border-radius:
    14px 14px 4px 14px;

  background:
    var(--soft);

  display: grid;

  place-items: center;

  color:
    var(--red-900);

  font-family:
    Manrope;

  font-size: 12px;

  font-weight: 800;
}


.document-card h3 {
  margin: 0;

  font-size: 12px;
}


.document-card p {
  margin:
    5px 0 0;

  color:
    var(--muted);

  font-size: 12px;
}


/* =====================================================
   CALENDAR
===================================================== */

.calendar-toolbar {
  margin-bottom: 20px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 20px;
}


.calendar-toolbar h2 {
  margin: 0;

  font-family:
    Manrope;

  font-size: 26px;

  letter-spacing:
    -.05em;
}


.calendar-toolbar button {
  width: 42px;
  height: 42px;

  border:
    1px solid
    var(--line);

  border-radius:
    13px 13px 4px 13px;

  background:
    white;

  color:
    var(--red-900);
}


.calendar-grid {
  display: grid;

  grid-template-columns:
    repeat(7, 1fr);

  border-top:
    1px solid
    var(--line);

  border-left:
    1px solid
    var(--line);

  background:
    white;
}


.calendar-day-name {
  min-height: 42px;

  padding:
    12px;

  border-right:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  background:
    var(--red-900);

  color:
    white;

  font-size: 12px;

  font-weight: 700;
}


.calendar-cell {
  min-height: 130px;

  padding:
    10px;

  border-right:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.calendar-cell.muted {
  background:
    #F7F3F1;
}


.calendar-date {
  display: block;

  margin-bottom: 8px;

  color:
    var(--muted);

  font-size: 12px;
}


.calendar-event {
  margin-top: 5px;

  padding:
    6px 7px;

  border-left:
    2px solid
    var(--red-800);

  background:
    #F8F0F1;

  color:
    #544649;

  font-size: 12px;

  line-height: 1.4;
}


.calendar-event.program {
  border-left-color:
    #A9878D;
}


.calendar-event.deadline {
  border-left-color:
    var(--red-600);

  background:
    #F7E6E8;
}


.calendar-mobile {
  display: none;
}


/* =====================================================
   ARCHIVE / AUDIT
===================================================== */

.archive-hero {
  min-height:
    calc(100vh - 190px);

  padding:
    46px;

  border-radius:
    37px 37px 10px 37px;

  background:
    var(--red-950);

  color:
    white;

  display: flex;

  flex-direction: column;

  justify-content: center;

  overflow: hidden;

  position: relative;
}


.archive-hero::after {
  content: '';

  position: absolute;

  width: 340px;
  height: 1px;

  right: -80px;
  top: 180px;

  background:
    rgba(255,255,255,.12);

  transform:
    rotate(-25deg);

  box-shadow:
    0 35px 0
    rgba(255,255,255,.05),
    0 70px 0
    rgba(255,255,255,.03);
}


.archive-hero h2 {
  position: relative;

  z-index: 2;

  margin:
    16px 0 0;

  font-family:
    Manrope;

  font-size:
    clamp(48px, 7vw, 88px);

  line-height: .89;

  letter-spacing:
    -.085em;
}


.archive-hero p {
  position: relative;

  z-index: 2;

  max-width: 470px;

  margin:
    25px 0 0;

  color:
    rgba(255,255,255,.58);

  font-size: 12px;

  line-height: 1.7;
}


.archive-actions {
  position: relative;

  z-index: 2;

  margin-top: 31px;

  display: flex;

  gap: 8px;

  flex-wrap: wrap;
}


.archive-button,
.archive-secondary {
  min-height: 43px;

  padding:
    0 16px;

  border-radius:
    14px 14px 5px 14px;

  font-size: 12px;

  font-weight: 700;
}


.archive-button {
  border: 0;

  background:
    white;

  color:
    var(--red-950);
}


.archive-secondary {
  border:
    1px solid
    rgba(255,255,255,.2);

  background:
    transparent;

  color:
    white;
}


.archive-result {
  position: relative;

  z-index: 2;

  margin-top: 20px;

  font-size: 12px;
}


.archive-result a {
  color:
    white;
}


.audit-list {
  border-top:
    1px solid
    var(--line);
}


.audit-row {
  display: grid;

  grid-template-columns:
    140px 110px 1fr;

  gap: 16px;

  padding:
    15px 4px;

  border-bottom:
    1px solid
    rgba(98,11,21,.08);

  font-size: 12px;
}


.audit-row time,
.audit-row b {
  color:
    var(--muted);
}


/* =====================================================
   MODAL / FORM
===================================================== */

.modal {
  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 22px;

  opacity: 0;

  visibility: hidden;

  transition:
    .22s ease;
}


.modal.show {
  opacity: 1;

  visibility: visible;
}


.modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(72,8,15,.68);

  backdrop-filter:
    blur(10px);
}


.modal-panel {
  position: relative;

  width:
    min(800px, 96vw);

  max-height:
    91vh;

  overflow-y: auto;

  padding:
    31px;

  border-radius:
    31px 31px 9px 31px;

  background:
    var(--paper);

  box-shadow:
    0 40px 120px
    rgba(35,0,6,.3);

  transform:
    translateY(16px);

  transition:
    .25s ease;
}


.modal.show
.modal-panel {
  transform: none;
}


.detail-panel {
  width:
    min(1080px, 96vw);
}


.compact-panel {
  width:
    min(560px, 96vw);
}


.modal-panel > header {
  display: flex;

  align-items: flex-start;

  justify-content:
    space-between;

  gap: 20px;

  margin-bottom: 25px;
}


.modal-panel > header h2 {
  margin:
    4px 0 0;

  font-family:
    Manrope;

  font-size: 22px;

  letter-spacing:
    -.045em;
}


.close-button {
  position: relative;

  width: 39px;
  height: 39px;

  border:
    1px solid
    var(--line);

  border-radius:
    50% 50% 15% 50%;

  background:
    white;
}


.close-button i {
  position: absolute;

  left: 10px;
  top: 18px;

  width: 17px;
  height: 1.5px;

  background:
    var(--red-900);
}


.close-button i:first-child {
  transform:
    rotate(45deg);
}


.close-button i:last-child {
  transform:
    rotate(-45deg);
}


.form-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 13px;
}


.field {
  display: flex;

  flex-direction: column;

  gap: 6px;
}


.field.full {
  grid-column:
    1 / -1;
}


.field label {
  color:
    var(--muted);

  font-size: 12px;

  font-weight: 600;
}


.field input,
.field select,
.field textarea {
  width: 100%;

  min-height: 44px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px 12px 4px 12px;

  padding:
    11px 12px;

  background:
    white;

  color:
    var(--ink);

  outline: none;
}


.field textarea {
  min-height: 115px;

  resize: vertical;
}


.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color:
    var(--red-700);

  box-shadow:
    0 0 0 3px
    rgba(169,29,43,.07);
}


.photo-field {
  display: grid;

  grid-template-columns:
    78px 1fr;

  gap: 13px;

  padding:
    13px;

  border:
    1px dashed
    #D8BEC2;

  border-radius:
    17px 17px 5px 17px;
}


.photo-preview {
  width: 78px;
  height: 78px;

  border-radius:
    20px 20px 6px 20px;

  overflow: hidden;

  background:
    var(--soft);

  display: grid;

  place-items: center;

  color:
    var(--red-900);

  font-family:
    Manrope;

  font-weight: 800;
}


.photo-preview img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.file-field {
  padding:
    12px;

  border:
    1px dashed
    #D8BEC2;

  border-radius:
    16px 16px 5px 16px;

  background:
    #FCF9F8;
}


.file-field small {
  display: block;

  margin-top: 5px;

  color:
    var(--muted);

  font-size: 12px;
}


.form-actions {
  margin-top: 24px;

  padding-top: 18px;

  border-top:
    1px solid
    var(--line);

  display: flex;

  justify-content:
    flex-end;

  gap: 7px;
}


.form-save,
.delete-button {
  min-height: 39px;

  padding:
    0 14px;

  border-radius:
    12px 12px 4px 12px;

  font-size: 12px;

  font-weight: 700;
}


.form-save {
  border: 0;

  background:
    var(--red-900);

  color:
    white;
}


.delete-button {
  margin-right: auto;

  border:
    1px solid
    #E1BEC3;

  background:
    #FFF5F6;

  color:
    var(--red-800);
}


/* =====================================================
   DETAIL
===================================================== */

.meeting-cover {
  min-height: 250px;

  padding:
    30px;

  border-radius:
    28px 28px 8px 28px;

  background:
    var(--red-950);

  color:
    white;

  display: flex;

  flex-direction: column;
}


.meeting-cover h3 {
  margin: 0;

  max-width: 760px;

  font-family:
    Manrope;

  font-size:
    clamp(28px, 5vw, 48px);

  line-height: .97;

  letter-spacing:
    -.06em;
}


.meeting-cover p {
  margin:
    14px 0 0;

  color:
    rgba(255,255,255,.55);

  font-size: 12px;
}


.meeting-cover-actions {
  margin-top: auto;

  display: flex;

  gap: 7px;

  flex-wrap: wrap;
}


.meeting-cover-actions button {
  min-height: 34px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius:
    11px 11px 4px 11px;

  background:
    rgba(255,255,255,.06);

  color:
    white;

  font-size: 12px;
}


.detail-metrics {
  margin-top: 10px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;
}


.detail-metrics article {
  min-height: 105px;

  padding:
    18px;

  border:
    1px solid
    var(--line);

  border-radius:
    18px 18px 5px 18px;

  background:
    white;
}


.detail-metrics small {
  color:
    var(--muted);

  font-size: 12px;
}


.detail-metrics strong {
  display: block;

  margin-top: 9px;

  font-family:
    Manrope;

  font-size: 18px;
}


.detail-section {
  margin-top: 28px;
}


.detail-section > header {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 12px;

  margin-bottom: 10px;
}


.detail-section h4 {
  margin: 0;

  font-family:
    Manrope;

  font-size: 17px;
}


.agenda-detail {
  padding:
    18px 2px;

  border-bottom:
    1px solid
    var(--line);
}


.agenda-detail:last-child {
  border-bottom: 0;
}


.agenda-detail > span {
  color:
    var(--red-800);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .08em;
}


.agenda-detail h5 {
  margin:
    5px 0 0;

  font-size: 12px;
}


.agenda-detail p {
  margin:
    7px 0 0;

  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.6;
}


.agenda-detail footer {
  margin-top: 12px;

  display: flex;

  justify-content:
    space-between;

  gap: 8px;

  align-items: center;

  flex-wrap: wrap;
}


.attendance-table {
  border-top:
    1px solid
    var(--line);
}


.attendance-row {
  display: grid;

  grid-template-columns:
    1fr 150px;

  gap: 14px;

  align-items: center;

  min-height: 52px;

  border-bottom:
    1px solid
    rgba(98,11,21,.08);
}


.attendance-row strong {
  display: block;

  font-size: 12px;
}


.attendance-row small {
  display: block;

  margin-top: 3px;

  color:
    var(--muted);

  font-size: 12px;
}


.attendance-row select {
  min-height: 34px;

  border:
    1px solid
    var(--line);

  border-radius:
    10px 10px 3px 10px;

  background:
    white;

  color:
    var(--ink);

  padding:
    0 8px;
}


.attachment-row {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 12px;

  align-items: center;

  min-height: 48px;

  border-bottom:
    1px solid
    rgba(98,11,21,.08);
}


.attachment-row a {
  color:
    var(--red-900);

  font-size: 12px;

  text-decoration: none;
}


/* =====================================================
   EMPTY / TOAST
===================================================== */

.empty-state {
  padding:
    58px 20px;

  color:
    #9B8B8E;

  text-align: center;

  font-size: 12px;
}


.toast {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 5000;

  min-width: 260px;

  padding:
    13px 16px;

  border-radius:
    14px 14px 4px 14px;

  background:
    var(--red-950);

  color:
    white;

  box-shadow:
    0 20px 60px
    rgba(72,8,15,.25);

  font-size: 12px;

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(10px);

  transition:
    .2s ease;
}


.toast.show {
  opacity: 1;

  visibility: visible;

  transform: none;
}


/* =====================================================
   MOBILE
===================================================== */

.mobile-shade {
  display: none;
}


@media(max-width: 1180px) {

  .dashboard-hero {
    grid-template-columns:
      1.25fr .65fr;
  }


  .dashboard-stats {
    grid-template-columns:
      1fr 1fr;
  }


  .budget-story {
    grid-template-columns:
      1fr;
  }


  .funds-flow {
    grid-template-columns:
      1fr;
  }


  .editorial-grid,
  .inventory-grid,
  .portrait-grid,
  .member-grid {
    grid-template-columns:
      1fr 1fr;
  }

}


@media(max-width: 820px) {

  body.nav-open {
    overflow: hidden;
  }


  .sidebar {
    left: 12px;
    top: 12px;
    bottom: 12px;

    width:
      min(330px, calc(100vw - 40px));

    transform:
      translateX(
        calc(-100% - 25px)
      );

    transition:
      transform .28s
      cubic-bezier(.2,.7,.2,1);

    border-radius:
      28px 10px 28px 28px;
  }


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


  .mobile-shade {
    position: fixed;

    inset: 0;

    z-index: 70;

    background:
      rgba(72,8,15,.45);

    backdrop-filter:
      blur(4px);
  }


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


  .workspace {
    margin-left: 0;
  }


  .topbar {
    height: 75px;

    padding:
      0 15px;

    padding-top:
      env(safe-area-inset-top);
  }


  .mobile-menu {
    width: 39px;
    height: 39px;

    padding: 0;

    border:
      1px solid
      var(--line);

    border-radius:
      12px 12px 4px 12px;

    background:
      white;

    display: grid;

    place-content: center;

    gap: 5px;
  }


  .mobile-menu i {
    display: block;

    width: 15px;
    height: 1.5px;

    background:
      var(--red-900);
  }


  .mobile-menu i:last-child {
    width: 10px;
  }


  .topbar h1 {
    font-size: 16px;
  }


  #pageMeta {
    display: none;
  }


  .top-actions {
    gap: 5px;
  }


  .top-actions select {
    width: 76px;

    min-height: 38px;

    padding:
      0 24px 0 8px;

    font-size: 12px;
  }


  .top-tool,
  .primary-action {
    width: 38px;
    min-height: 38px;

    padding: 0;
  }


  .top-tool span,
  .primary-action span {
    display: none;
  }


  .page {
    padding:
      22px 15px 75px;
  }


  .dashboard-hero {
    min-height: auto;

    grid-template-columns:
      1fr;

    gap: 8px;
  }


  .hero-copy {
    min-height: 520px;

    padding:
      30px 25px;

    border-radius:
      29px 29px 8px 29px;
  }


  .hero-copy h2 {
    font-size: 54px;
  }


  .hero-copy p {
    left: 25px;
    right: 25px;
    bottom: 26px;

    width: auto;
  }


  .hero-number {
    min-height: 230px;

    padding: 22px;
  }


  .attention-layout {
    grid-template-columns:
      1fr;

    gap: 8px;

    margin-top: 8px;
  }


  .dashboard-stats {
    grid-template-columns:
      1fr 1fr;

    gap: 8px;

    margin-top: 8px;
  }


  .dashboard-stats article {
    min-height: 125px;

    padding: 17px;
  }


  .budget-story {
    gap: 18px;

    margin-top: 8px;

    padding: 24px;

    border-radius:
      25px 25px 7px 25px;
  }


  .budget-values {
    grid-template-columns:
      1fr;

    gap: 0;
  }


  .budget-values div {
    padding:
      12px 0;

    border-left: 0;

    border-bottom:
      1px solid
      rgba(98,11,21,.12);
  }


  .funds-flow {
    gap: 8px;

    margin-top: 8px;
  }


  .fund-block {
    min-height: 190px;
  }


  .latest-section {
    margin-top: 8px;

    padding: 20px;
  }


  .split-intro {
    align-items: flex-start;

    flex-direction: column;
  }


  .record-row {
    grid-template-columns:
      1fr;

    gap: 11px;

    padding:
      17px 2px;
  }


  .record-row:hover {
    padding-left: 7px;
  }


  .record-actions {
    justify-content:
      flex-start;
  }


  .editorial-grid,
  .program-grid,
  .inventory-grid,
  .portrait-grid,
  .member-grid {
    grid-template-columns:
      1fr;

    gap: 8px;
  }


  .task-card {
    grid-template-columns:
      1fr;

    gap: 14px;
  }


  .rapbj-summary,
  .finance-stage {
    grid-template-columns:
      1fr;

    gap: 8px;
  }


  .document-card {
    grid-template-columns:
      48px 1fr;

    gap: 12px;
  }


  .document-card
  .record-actions {
    grid-column:
      1 / -1;
  }


  .calendar-grid {
    display: none;
  }


  .calendar-mobile {
    display: grid;

    gap: 8px;
  }


  .calendar-mobile-day {
    padding:
      16px;

    border:
      1px solid
      var(--line);

    border-radius:
      17px 17px 5px 17px;

    background:
      white;
  }


  .calendar-mobile-day > strong {
    display: block;

    margin-bottom: 8px;

    color:
      var(--red-900);

    font-family:
      Manrope;

    font-size: 12px;
  }


  .archive-hero {
    min-height:
      calc(100vh - 130px);

    padding:
      29px 24px;

    border-radius:
      28px 28px 8px 28px;
  }


  .archive-hero h2 {
    font-size: 55px;
  }


  .audit-row {
    grid-template-columns:
      1fr;

    gap: 4px;

    padding:
      14px 2px;
  }


  .modal {
    padding: 0;

    align-items: flex-end;
  }


  .modal-panel {
    width: 100%;

    max-height: 94vh;

    padding:
      23px 17px;

    border-radius:
      27px 27px 0 0;
  }


  .form-grid {
    grid-template-columns:
      1fr;
  }


  .field.full {
    grid-column:
      auto;
  }


  .detail-metrics {
    grid-template-columns:
      1fr;
  }


  .attendance-row {
    grid-template-columns:
      1fr;
  }


  .toast {
    left: 15px;
    right: 15px;
    bottom: 15px;

    min-width: auto;
  }

}


@media(
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {
    animation:
      none !important;

    transition:
      none !important;
  }

}


/* =====================================================
   NON-BLOCKING BOOT STATUS
===================================================== */

.boot-notice {
  position: fixed;

  left: 300px;
  right: 18px;
  top: 96px;

  z-index: 69;

  min-height: 52px;

  padding:
    10px 14px;

  border:
    1px solid
    rgba(98,11,21,.12);

  border-radius:
    16px 16px 5px 16px;

  background:
    rgba(255,253,252,.96);

  box-shadow:
    0 14px 35px
    rgba(72,8,15,.08);

  backdrop-filter:
    blur(16px);

  display: flex;

  align-items: center;

  gap: 11px;

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
}


.boot-notice.ready {
  opacity: 0;
  visibility: hidden;

  transform:
    translateY(-8px);
}


.boot-notice.error {
  border-color:
    rgba(169,29,43,.28);

  background:
    #FFF4F5;
}


.boot-notice-dot {
  width: 8px;
  height: 28px;

  flex:
    0 0 8px;

  border-radius:
    6px 2px 6px 6px;

  background:
    var(--red-700);

  animation:
    bootPulse
    1s ease-in-out
    infinite;
}


.boot-notice.error
.boot-notice-dot {
  animation: none;

  background:
    var(--red-900);
}


.boot-notice > div:nth-child(2) {
  min-width: 0;

  flex: 1;
}


.boot-notice strong {
  display: block;

  font-size: 12px;

  color:
    var(--red-950);
}


.boot-notice span {
  display: block;

  margin-top: 2px;

  color:
    var(--muted);

  font-size: 12px;

  white-space: normal;
}


.boot-notice button {
  min-height: 31px;

  padding:
    0 10px;

  border:
    1px solid
    var(--line);

  border-radius:
    10px 10px 3px 10px;

  background:
    white;

  color:
    var(--red-900);

  font-size: 12px;

  font-weight: 700;
}


@keyframes bootPulse {

  50% {
    opacity: .35;
  }

}


@media(max-width: 820px) {

  .boot-notice {
    left: 15px;
    right: 15px;
    top: 83px;

    min-height: 50px;
  }

}


/* =====================================================
   IMMERSIVE FOOTER V7
===================================================== */

.site-footer {
  position: relative;

  width:
    min(1480px, calc(100% - 76px));

  margin:
    16px auto 34px;

  padding:
    34px 36px 22px;

  border-radius:
    34px 34px 10px 34px;

  background:
    var(--red-950);

  color:
    white;

  overflow: hidden;

  box-shadow:
    0 30px 90px
    rgba(72,8,15,.16);
}


.site-footer::before {
  content: '';

  position: absolute;

  width: 480px;
  height: 1px;

  right: -100px;
  top: 95px;

  background:
    rgba(255,255,255,.11);

  transform:
    rotate(-22deg);

  box-shadow:
    0 42px 0
    rgba(255,255,255,.045),
    0 84px 0
    rgba(255,255,255,.025);
}


.footer-signal {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  gap: 5px;

  margin-bottom: 31px;
}


.footer-signal i {
  display: block;

  height: 5px;

  border-radius:
    5px 2px 5px 5px;

  background:
    #EFCFD3;
}


.footer-signal i:nth-child(1) {
  width: 34px;
}


.footer-signal i:nth-child(2) {
  width: 12px;

  opacity: .55;
}


.footer-signal i:nth-child(3) {
  width: 5px;

  opacity: .28;
}


.footer-main {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    1.2fr 1fr;

  gap: 45px;

  align-items: end;
}


.footer-kicker {
  color:
    #E9BFC5;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .18em;
}


.footer-brand h2 {
  max-width: 620px;

  margin:
    10px 0 0;

  font-family:
    Manrope;

  font-size:
    clamp(31px, 4vw, 55px);

  line-height: .96;

  letter-spacing:
    -.07em;

  font-weight: 800;
}


.footer-meta {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-top:
    1px solid
    rgba(255,255,255,.13);
}


.footer-meta > div {
  min-height: 95px;

  padding:
    18px 14px 10px;

  border-right:
    1px solid
    rgba(255,255,255,.09);
}


.footer-meta > div:last-child {
  border-right: 0;
}


.footer-meta small {
  display: block;

  color:
    rgba(255,255,255,.38);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .11em;
}


.footer-meta strong {
  display: block;

  margin-top: 12px;

  color:
    rgba(255,255,255,.9);

  font-family:
    Manrope;

  font-size: 12px;

  font-weight: 700;
}


.footer-bottom {
  position: relative;

  z-index: 2;

  margin-top: 31px;

  padding-top: 16px;

  border-top:
    1px solid
    rgba(255,255,255,.1);

  display: grid;

  grid-template-columns:
    1fr 1fr auto;

  gap: 18px;

  align-items: center;
}


.footer-bottom p {
  margin: 0;

  color:
    rgba(255,255,255,.4);

  font-size: 12px;
}


.footer-bottom p:nth-child(2) {
  text-align: center;
}


.footer-bottom button {
  min-height: 34px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius:
    11px 11px 4px 11px;

  background:
    rgba(255,255,255,.05);

  color:
    white;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  font-size: 12px;

  font-weight: 700;

  transition:
    transform .18s ease,
    background .18s ease;
}


.footer-bottom button:hover {
  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,.1);
}


.footer-arrow {
  font-size: 13px;

  line-height: 1;
}


@media(max-width: 820px) {

  .site-footer {
    width:
      calc(100% - 30px);

    margin:
      10px 15px 25px;

    padding:
      27px 22px 20px;

    border-radius:
      27px 27px 8px 27px;
  }


  .footer-main {
    grid-template-columns:
      1fr;

    gap: 26px;
  }


  .footer-brand h2 {
    font-size: 38px;
  }


  .footer-meta {
    grid-template-columns:
      1fr;

    border-top:
      1px solid
      rgba(255,255,255,.12);
  }


  .footer-meta > div {
    min-height: auto;

    padding:
      14px 0;

    border-right: 0;

    border-bottom:
      1px solid
      rgba(255,255,255,.08);
  }


  .footer-meta > div:last-child {
    border-bottom: 0;
  }


  .footer-meta strong {
    margin-top: 5px;
  }


  .footer-bottom {
    grid-template-columns:
      1fr;

    gap: 10px;
  }


  .footer-bottom p:nth-child(2) {
    text-align: left;
  }


  .footer-bottom button {
    width: fit-content;

    margin-top: 4px;
  }

}