:root {
  --fag-red: #b4232a;
  --fag-red-dark: #7d151c;
  --fag-ink: #211f1f;
  --fag-paper: #fbf7ef;
  --fag-soft: #f4efe6;
  --fag-gold: #bd8b2f;
  --fag-green: #2f765f;
  --fag-blue: #285f87;
  --fag-violet: #6b4d8d;

  --bs-primary: var(--fag-red);
  --bs-primary-rgb: 180, 35, 42;
  --bs-body-color: var(--fag-ink);
  --bs-body-bg: var(--fag-paper);
}

html {
  scroll-padding-top: 5rem;
}

body {
  color: var(--fag-ink);
  background: var(--fag-paper);
}

.login-page {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(33, 31, 31, .78), rgba(180, 35, 42, .68)),
    var(--fag-paper);
}

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-panel {
  width: min(100%, 28rem);
  padding: 2rem;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1.5rem 4rem rgba(33, 31, 31, .22);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  letter-spacing: 0;
}

.brand-logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 .2rem .65rem rgba(33, 31, 31, .18);
}

.brand-subtitle {
  margin-left: .65rem;
  padding-left: .65rem;
  border-left: 1px solid rgba(33, 31, 31, .18);
  color: #6d6460;
  font-size: .875rem;
  font-weight: 500;
}

.hero-section {
  margin-top: 4rem;
  min-height: calc(100vh - 4rem);
  background:
    linear-gradient(90deg, rgba(33, 31, 31, .78), rgba(125, 21, 28, .7)),
    url("data:image/svg+xml,%3Csvg width='1600' height='900' viewBox='0 0 1600 900' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1600' height='900' fill='%23c29b61'/%3E%3Cpath d='M0 620 C260 530 380 720 640 610 C870 512 1010 320 1260 392 C1420 438 1515 545 1600 505 L1600 900 L0 900 Z' fill='%232f765f' opacity='.88'/%3E%3Cpath d='M0 0 L1600 0 L1600 276 C1325 208 1114 178 896 235 C655 298 485 446 278 380 C155 342 70 288 0 306 Z' fill='%23285f87' opacity='.75'/%3E%3Cpath d='M760 0 L1240 900' stroke='%23fbf7ef' stroke-width='34' opacity='.16'/%3E%3Cpath d='M826 0 L1306 900' stroke='%237d151c' stroke-width='8' opacity='.55'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

.hero-subline {
  font-size: clamp(1.5rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
}

.hero-logo {
  width: clamp(5.5rem, 13vw, 9rem);
  height: clamp(5.5rem, 13vw, 9rem);
  display: block;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 1rem 2.75rem rgba(0, 0, 0, .34);
}

.hero-section .btn-primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--fag-red-dark);
}

.hero-section .btn-primary:hover,
.hero-section .btn-primary:focus {
  background: var(--fag-paper);
  border-color: var(--fag-paper);
}

.hero-index {
  border-left: 4px solid rgba(255, 255, 255, .55);
  padding-left: 1.25rem;
}

.hero-index-item {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: .75rem;
  margin-bottom: 1.1rem;
}

.hero-index-item span {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .14);
  font-weight: 700;
}

.hero-index-item p {
  margin: .25rem 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: .925rem;
}

.bg-soft {
  background: var(--fag-soft);
}

.section-top-padding {
  padding-top: 6rem;
}

.section-kicker {
  margin-bottom: .5rem;
  color: var(--fag-red);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(33, 31, 31, .12);
  background: #ffffff;
}

.stat-strip div {
  padding: 1rem;
  border-right: 1px solid rgba(33, 31, 31, .1);
}

.stat-strip div:last-child {
  border-right: 0;
}

.stat-strip strong {
  display: block;
  color: var(--fag-red);
  font-size: 1.8rem;
  line-height: 1;
}

.stat-strip span {
  display: block;
  margin-top: .35rem;
  color: #6d6460;
  font-size: .875rem;
}

.category-card,
.quote-card {
  width: 100%;
  height: 100%;
  display: block;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid rgba(33, 31, 31, .12);
  border-radius: 8px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.category-card {
  min-height: 17rem;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}

.category-card:hover,
.quote-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2.5rem rgba(33, 31, 31, .12);
  border-color: rgba(180, 35, 42, .35);
}

.category-letter {
  position: absolute;
  right: 1rem;
  bottom: -.6rem;
  color: rgba(33, 31, 31, .06);
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
}

.category-card i {
  color: var(--fag-red);
  font-size: 2rem;
}

.category-card h3 {
  margin-top: 1.2rem;
  font-size: 1.35rem;
}

.category-card p {
  position: relative;
  margin-bottom: 0;
  color: #5f5752;
}

.category-finance i,
.category-finance h3,
.category-finance.category-dot {
  color: var(--fag-gold);
}

.category-mind i,
.category-mind h3,
.category-mind.category-dot {
  color: var(--fag-blue);
}

.category-health i,
.category-health h3,
.category-health.category-dot {
  color: var(--fag-green);
}

.category-work i,
.category-work h3,
.category-work.category-dot {
  color: var(--fag-violet);
}

.timeline {
  border-left: 2px solid rgba(180, 35, 42, .28);
  padding-left: 1.5rem;
}

.timeline-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.timeline-number,
.category-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(33, 31, 31, .14);
  font-weight: 800;
}

.timeline-number {
  width: 3rem;
  height: 3rem;
  color: var(--fag-red);
}

.timeline-label {
  display: inline-block;
  margin-bottom: .25rem;
  color: var(--fag-red);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.quote-category-block {
  margin-top: 3rem;
}

.chart-panel {
  height: 18rem;
  padding: 1.25rem;
  border: 1px solid rgba(33, 31, 31, .12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 .5rem 1.5rem rgba(33, 31, 31, .06);
}

.quote-filter-panel {
  display: grid;
  grid-template-columns: minmax(16rem, 1.35fr) minmax(11rem, .62fr) minmax(14rem, .95fr) minmax(16rem, 1fr) auto;
  gap: .85rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid rgba(33, 31, 31, .1);
  border-radius: 8px;
  background: #ffffff;
}

.filter-field label {
  display: block;
  margin-bottom: .35rem;
  color: #756c66;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-result-count {
  margin-top: .4rem;
  color: #756c66;
  font-size: .92rem;
  font-weight: 700;
}

.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  margin-left: .15rem;
  padding: .02rem .32rem;
  border-radius: 999px;
  background: rgba(33, 31, 31, .1);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.1;
  vertical-align: super;
  transform: translateY(-.18rem);
}

.btn-primary .filter-count-badge {
  background: rgba(255, 255, 255, .2);
  color: #ffffff;
}

.filter-actions {
  display: grid;
  gap: .45rem;
}

.filter-copy,
.filter-reset {
  white-space: nowrap;
}

.category-heading {
  display: flex;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.category-heading h3 {
  margin-bottom: .25rem;
}

.category-heading p {
  margin-bottom: 0;
  color: #6d6460;
}

.category-dot {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
}

.quote-card {
  padding: 1.25rem;
  border-style: solid;
  cursor: pointer;
}

.quote-card:focus-visible {
  outline: 3px solid rgba(180, 35, 42, .35);
  outline-offset: 3px;
}

.quote-card-top,
.quote-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.quote-card-badges {
  min-height: 1.6rem;
  margin-top: .55rem;
}

.quote-chapter,
.quote-date,
.quote-more {
  color: var(--fag-red);
  font-size: .825rem;
  font-weight: 700;
  text-transform: uppercase;
}

.quote-date {
  color: #756c66;
}

.quote-card blockquote {
  margin: .65rem 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  line-height: 1.35;
}

.quote-card p {
  color: #5f5752;
}

.quote-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-transform: none;
}

.quote-undersetzer-badge {
  background: rgba(189, 139, 47, .18);
  color: #7a5114;
  border: 1px solid rgba(189, 139, 47, .42);
}

.quote-mark-controls {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.quote-mark-toggle {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  min-height: 2rem;
  padding: .2rem .42rem;
  border: 1px solid rgba(33, 31, 31, .16);
  border-radius: 999px;
  background: #ffffff;
  color: #756c66;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
}

.quote-mark-toggle:hover,
.quote-mark-toggle:focus {
  border-color: rgba(189, 139, 47, .72);
  color: #7a5114;
}

.quote-mark-toggle.is-marked {
  border-color: rgba(189, 139, 47, .9);
  background: rgba(189, 139, 47, .16);
  color: #7a5114;
}

.quote-mark-toggle i {
  color: var(--fag-gold);
  font-size: .95rem;
}

.quote-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem;
  border-radius: 8px;
  background: var(--fag-soft);
}

.quote-modal-actions > span {
  color: #756c66;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.todo-card {
  padding: 1.25rem;
  border: 1px solid rgba(33, 31, 31, .12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 .5rem 1.5rem rgba(33, 31, 31, .06);
}

.todo-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(180, 35, 42, .1);
  color: var(--fag-red);
  font-size: 1.25rem;
}

.todo-next {
  padding: .85rem;
  border-left: 4px solid var(--fag-red);
  background: var(--fag-soft);
}

.todo-next span {
  display: block;
  margin-bottom: .25rem;
  color: #756c66;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.todo-next strong {
  display: block;
  font-weight: 650;
}

.code-panel {
  border-radius: 8px;
  background: #211f1f;
  color: #f7efe1;
  padding: 1.25rem;
  overflow-x: auto;
}

.code-panel pre {
  margin: 0;
  white-space: pre-wrap;
}

.footer-dev {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 1.15fr);
  gap: 1.25rem;
  align-items: start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.footer-dev h2 {
  color: #ffffff;
  font-size: 1.15rem;
}

.footer-dev p {
  margin-bottom: 0;
}

.footer-dev code {
  color: #ffffff;
}

.footer-kicker {
  margin-bottom: .4rem;
  color: rgba(255, 255, 255, .72);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.footer-code {
  padding: .85rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .82);
  overflow-x: auto;
}

.footer-code pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: .78rem;
}

.podcast-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(33, 31, 31, .12);
  border-radius: 8px;
  background: #ffffff;
}

.podcast-summary i {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(180, 35, 42, .1);
  color: var(--fag-red);
  font-size: 1.35rem;
}

.podcast-summary strong,
.podcast-summary span {
  display: block;
}

.podcast-summary span {
  color: #6d6460;
  font-size: .9rem;
}

.podcast-list {
  display: grid;
  gap: 1rem;
}

.podcast-episode {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(33, 31, 31, .12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 .5rem 1.5rem rgba(33, 31, 31, .06);
}

.podcast-cover {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .85rem;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(180, 35, 42, .94), rgba(40, 95, 135, .88)),
    var(--fag-red);
  color: #ffffff;
}

.podcast-cover span {
  font-weight: 800;
  line-height: 1;
}

.podcast-cover i {
  align-self: flex-end;
  font-size: 2rem;
}

.podcast-body {
  min-width: 0;
}

.podcast-body h3 {
  margin: .35rem 0 .25rem;
  font-size: 1.35rem;
}

.podcast-body p {
  margin-bottom: .85rem;
  color: #6d6460;
  overflow-wrap: anywhere;
}

.podcast-warning {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  padding: .65rem .75rem;
  border: 1px solid rgba(180, 35, 42, .18);
  border-radius: 8px;
  background: #fff6e8;
  color: #6a4430 !important;
  font-size: .92rem;
}

.podcast-warning i {
  color: var(--fag-red);
  line-height: 1.35;
}

.podcast-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.podcast-meta span {
  padding: .3rem .55rem;
  border-radius: 999px;
  background: var(--fag-soft);
  color: #5f5752;
  font-size: .78rem;
  font-weight: 750;
}

.podcast-player {
  width: 100%;
  display: block;
}

.meta-box {
  height: 100%;
  padding: 1rem;
  border-radius: 8px;
  background: var(--fag-soft);
}

.meta-box span {
  display: block;
  color: #756c66;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.meta-box strong {
  display: block;
  margin-top: .35rem;
  overflow-wrap: anywhere;
}

.meta-box strong small {
  display: block;
  margin-top: .25rem;
  color: #756c66;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
}

.meta-box strong a {
  color: var(--fag-red);
  text-decoration: none;
}

.meta-box strong a:hover,
.meta-box strong a:focus {
  text-decoration: underline;
}

.audio-panel {
  padding: 1rem;
  border: 1px solid rgba(180, 35, 42, .18);
  border-radius: 8px;
  background: #fffaf2;
}

.audio-label {
  display: block;
  color: #756c66;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-audio {
  width: 100%;
  display: block;
}

.card,
.rounded-3,
.rounded-4,
.modal-content {
  border-radius: 8px !important;
}

.btn-primary {
  background-color: var(--fag-red);
  border-color: var(--fag-red);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--fag-red-dark);
  border-color: var(--fag-red-dark);
}

.btn-outline-primary {
  color: var(--fag-red);
  border-color: var(--fag-red);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--fag-red);
  border-color: var(--fag-red);
}

.quote-filter .btn,
.quote-period-filter .btn,
.quote-mark-filter .btn {
  --bs-btn-active-bg: var(--fag-red);
  --bs-btn-active-border-color: var(--fag-red);
  --bs-btn-active-color: #ffffff;
  --bs-btn-focus-shadow-rgb: 180, 35, 42;
}

.quote-filter .btn-primary,
.quote-period-filter .btn-primary,
.quote-mark-filter .btn-primary,
.quote-filter .btn-primary:focus,
.quote-period-filter .btn-primary:focus,
.quote-mark-filter .btn-primary:focus {
  background-color: var(--fag-red);
  border-color: var(--fag-red);
  color: #ffffff;
}

.quote-filter .btn-outline-primary:not(.active):focus,
.quote-period-filter .btn-outline-primary:not(.active):focus,
.quote-mark-filter .btn-outline-primary:not(.active):focus {
  background-color: transparent;
  border-color: var(--fag-red);
  color: var(--fag-red);
}

footer a {
  text-decoration: none;
}

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

@media (max-width: 767.98px) {
  .hero-section {
    min-height: auto;
  }

  .stat-strip {
    grid-template-columns: 1fr;
  }

  .stat-strip div {
    border-right: 0;
    border-bottom: 1px solid rgba(33, 31, 31, .1);
  }

  .stat-strip div:last-child {
    border-bottom: 0;
  }

  .quote-filter {
    width: 100%;
  }

  .quote-filter .btn,
  .quote-date-filter .btn {
    flex: 1 1 auto;
  }

  .quote-filter-panel {
    grid-template-columns: 1fr;
  }

  .quote-period-filter,
  .quote-mark-filter,
  .filter-actions,
  .filter-actions .btn {
    width: 100%;
  }

  .quote-period-filter .btn,
  .quote-mark-filter .btn {
    flex: 1 1 auto;
  }

  .podcast-episode {
    grid-template-columns: 1fr;
  }

  .podcast-cover {
    width: 5.5rem;
  }

  .footer-dev {
    grid-template-columns: 1fr;
  }
}