/* Evergreen, burgundy and warm gold. Decoration never receives pointer input. */
:root {
  --bg: #081d17;
  --ink: #f5f3e9;
  --muted: #b5c6b7;
  --line: #496151;
  --green: #e6c794;
  --card-green: #173d2d;
  --card-red: #4b1422;
}
body {
  background:
    radial-gradient(ellipse at 95% 14%, #751d354d, transparent 47%),
    radial-gradient(ellipse at 25% 18%, #22543a66, transparent 58%),
    linear-gradient(145deg, #0d251c, #071b18 65%, #21141a);
  color: var(--ink);
}
.holiday-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.holiday-corner {
  position: absolute;
  right: 0;
  top: 85px;
  width: 265px;
  height: 290px;
  background: url("holiday-corner.svg") right top/contain no-repeat;
  opacity: 0.85;
}
.holiday-pine-left {
  position: absolute;
  left: 245px;
  bottom: 0;
  width: 180px;
  height: 260px;
  background: url("holiday-corner.svg") right top/contain no-repeat;
  transform: rotate(180deg);
  opacity: 0.55;
}
.holiday-decor::after {
  content: "";
  position: absolute;
  inset: 100px 0 0 250px;
  opacity: 0.46;
  background-image:
    radial-gradient(
      circle at 21px 38px,
      #fff5c5b3 0 1px,
      #f3d5851c 2px,
      transparent 5px
    ),
    radial-gradient(
      circle at 183px 257px,
      #ffeab780 0 1px,
      #f3d58510 3px,
      transparent 7px
    ),
    radial-gradient(
      circle at 399px 153px,
      #fffbd6b3 0 1px,
      #f3d5850e 4px,
      transparent 8px
    ),
    radial-gradient(circle at 275px 395px, #fff1c280 0 1px, transparent 3px);
  background-size: 480px 430px;
}
.sidebar {
  background: linear-gradient(170deg, #234c34, #173a2a 62%, #183a2f);
  border-right: 1px solid #bd9b655c;
  scrollbar-color: #547256 #193c2b;
  padding-top: 42px;
}
.brand-name {
  color: #fff6e2;
  font-weight: 700;
  font-size: 16px;
}
.sidebar-logo small,
.brand-wordmark .domain {
  color: #c0d2b8;
}
.logo-mark {
  background: linear-gradient(135deg, #f1ddae, #d3b47a);
  border-color: #f5d997;
  color: #274731;
}
.logo-mark::before {
  width: 32px;
  height: 20px;
  top: -15px;
  left: -2px;
  right: auto;
  border-radius: 80% 40% 10% 20%;
  background: linear-gradient(130deg, #e17b60, #a91e35);
  transform: rotate(-17deg);
  box-shadow: 0 4px 0 #fff7e3;
  clip-path: polygon(0 100%, 12% 36%, 60% 5%, 100% 80%, 74% 72%, 86% 100%);
}
.logo-mark::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: #fff5e0;
  border-radius: 50%;
  box-shadow: 0 2px 2px #06231940;
}
.workspace {
  background: #32544080;
  border: 1px solid #b8c28880;
  border-radius: 10px;
  color: #f2eacb;
}
.workspace-icon {
  background: #3e6146;
  color: #f4e2b5;
}
.nav-label {
  color: #bacba9;
  letter-spacing: 1.2px;
}
.nav-item {
  color: #e0e7d1;
}
.nav-item > span {
  font-size: 20px;
  filter: drop-shadow(0 2px 2px #06231655);
}
.nav-item:hover {
  background: #40614488;
}
.nav-item.active {
  background: linear-gradient(110deg, #761e30, #501222);
  border: 1px solid #e4c78a;
  color: #fff0c6;
  box-shadow:
    0 3px 15px #061a1644,
    inset 2px 0 #f1d791;
  border-radius: 10px;
}
.nav-item b {
  background: #496c47;
  color: #e8e8b8;
}
.sidebar .help-card {
  position: relative;
  background: linear-gradient(135deg, #602235, #431422);
  border-color: #c4a07390;
  border-radius: 12px;
  padding-top: 28px;
}
.sidebar .help-card::after {
  content: "";
  position: absolute;
  right: 1px;
  top: -46px;
  width: 82px;
  height: 105px;
  background: url("holiday-santa.svg") center/contain no-repeat;
  pointer-events: none;
}
.help-card strong,
.home-note strong {
  color: #f2e5c6;
}
.help-card p,
.home-note p {
  color: #c3cdb5;
}
.help-card button,
.text-button {
  color: #efcd8b;
}
.profile {
  border-color: #6b825b66;
}
.avatar {
  background: #456040;
  color: #f6dda8;
}
.topbar {
  background: linear-gradient(95deg, #641729f5, #4c1426f5 60%, #361e26f5);
  border-bottom: 1px solid #d0b17680;
  height: 88px;
  backdrop-filter: blur(16px);
}
.breadcrumb,
.topbar strong {
  color: #f5e4c3;
}
.topbar-right > .demo-badge {
  color: #e5caa6;
}
.header-wallet-button {
  background: linear-gradient(115deg, #4e4030, #343b2b);
  border-color: #dbc18980;
  border-radius: 11px;
  box-shadow: 0 3px 15px #210a1650;
}
.header-wallet-button small {
  color: #e0d8bf;
}
.header-wallet-button strong {
  color: #f9dc94;
}
.header-wallet-button:hover {
  background: #53482e;
}
.header-wallet-plus {
  background: #e5c587;
  color: #364c2d;
}
.notice-bell,
.snow-toggle,
.logout-button {
  background: #42152166;
  border-color: #b6987570;
  color: #f0e2c5;
}
.festive-lights {
  height: 31px;
  background-size: 340px 38px;
  opacity: 0.95;
}
.content {
  position: relative;
  padding-top: 47px;
}
.content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 37px;
  background: url("christmas-garland.svg") center top/400px 44px repeat-x;
  opacity: 0.86;
  pointer-events: none;
}
.eyebrow {
  color: #e5bd80;
}
.page-heading h1 {
  color: #fff4dd;
  font-weight: 700;
}
.page-heading p,
.earn-intro p {
  color: #c2d2c1;
}
.earn-intro {
  margin-top: 4px;
  margin-bottom: 23px;
}
.earn-intro h2 {
  color: #fff1d6;
  font-size: 27px;
}
.earn-heading-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.button.primary {
  background: linear-gradient(110deg, #bc3d35, #8d202c);
  border: 1px solid #e5b976;
  color: #fff2cf;
  box-shadow:
    0 3px 15px #df762323,
    inset 0 1px #f5c18555;
}
.button.primary:hover {
  background: linear-gradient(110deg, #d0513c, #ab2b31);
  border-color: #f6d89d;
}
.button.white {
  background: #254633bd;
  border-color: #95a26c80;
  color: #ecedd4;
}
.button.white:hover {
  background: #365941;
  border-color: #d7c18b;
}
.hero-secondary,
.quick-link {
  color: #eed69e;
}
.panel,
.stat-card,
.quick-card,
.home-note,
.community-row,
.community-review {
  background: linear-gradient(140deg, #244a34ee, #123324f5);
  border-color: #8eaa7b70;
  color: #ececd9;
}
.panel-heading h2,
.quick-card h3,
.community-card h3 {
  color: #f4eacf;
}
.community-prose,
.community-row p,
.community-review p,
.community-hint,
.admin-hint,
.quick-card p {
  color: #c7d5c0;
}
.community-empty {
  background: #18382bc9;
  border-color: #8d9a6b88;
  color: #cbd6bd;
}
.earn-task-grid > .community-empty {
  grid-column: 1/-1;
}
.earn-cooldown {
  background: linear-gradient(105deg, #294b33e8, #133327e8);
  border: 1px solid #c0a87680;
  box-shadow: 0 5px 22px #06191322;
  padding: 18px 22px;
}
.earn-cooldown strong {
  color: #f2dca5;
}
.earn-cooldown p {
  color: #bacbb6;
}
#earn-countdown {
  color: #f2d296;
  font-size: 29px;
  text-shadow: 0 2px 14px #cf9d4025;
}
.earn-tabs {
  position: relative;
  background: #421421;
  border: 1px solid #d6b174;
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 0 12px #e4a74924;
}
.earn-tabs button {
  color: #e7d8bd;
  border: 1px solid transparent;
}
.earn-tabs .selected {
  background: linear-gradient(135deg, #a43831, #78202d);
  border-color: #eed39a;
  box-shadow:
    0 0 10px #f5c46b44,
    inset 0 1px #ffdf9b44;
  color: #fff0bf;
}
.earn-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0;
}
.earn-overview article {
  position: relative;
  padding: 23px 22px 20px;
  border: 1px solid #bbcfafbd;
  border-radius: 15px;
  background: linear-gradient(125deg, #224b32, #17382b);
  box-shadow: 0 10px 20px #03160d30;
}
.earn-overview article:first-child {
  background: linear-gradient(125deg, #651c30, #451322);
}
.earn-overview article::before,
.welcome-hero::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -11px;
  height: 27px;
  background: url("holiday-snow.svg") center/100% 100% no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 2px 1px #45674c55);
}
.earn-overview span,
.earn-overview small {
  display: block;
  color: #d0dac6;
  font-size: 12px;
  line-height: 1.5;
}
.earn-overview strong {
  display: block;
  margin: 9px 0 5px;
  color: #f4d295;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
.earn-overview small {
  font-size: 11px;
  color: #b6c7ac;
}
.earn-overview article:first-child span,
.earn-overview article:first-child small {
  color: #e4c8bc;
}
.earn-payment-grid > .panel {
  position: relative;
  border: 4px solid transparent;
  background:
    linear-gradient(#173c2d, #173c2d) padding-box,
    repeating-linear-gradient(
        130deg,
        #b13136 0 7px,
        #f0e4c5 7px 13px,
        #35533a 13px 19px,
        #e6dbc0 19px 24px
      )
      border-box;
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 12px 30px #001b1640;
}
.earn-payment-grid > #earn-payment-editor {
  background:
    linear-gradient(120deg, #561629, #3c1120) padding-box,
    repeating-linear-gradient(
        130deg,
        #b13136 0 7px,
        #f0e4c5 7px 13px,
        #35533a 13px 19px,
        #e6dbc0 19px 24px
      )
      border-box;
}
.earn-payment-grid > .panel::after,
.earn-task::after {
  content: "";
  position: absolute;
  top: -17px;
  right: -16px;
  width: 65px;
  height: 65px;
  background: url("holiday-ribbon.svg") center/contain no-repeat;
  pointer-events: none;
}
#earn-payment-editor .community-prose,
#earn-payment-editor .community-hint {
  color: #ddc4bf;
}
.earn-task {
  position: relative;
  border-radius: 15px;
  padding-top: 30px;
}
.earn-task-grid > .panel + .panel,
.earn-payment-grid > .panel + .panel {
  margin-top: 0;
}
.earn-task::after {
  width: 48px;
  height: 48px;
  top: -11px;
  right: -10px;
}
.earn-task-top strong {
  color: #f1cc8b;
}
.earn-task-icon {
  background: #466843;
  color: #fff0bd;
}
.community-section-heading > span {
  color: #b6c7ac;
}
.community-status {
  background: #385541;
  color: #e0e8cb;
}
.community-status[data-status="pending"] {
  background: #65422c;
  color: #ffde9c;
}
.community-status[data-status="paid"] {
  background: #365e3b;
  color: #d5f0c2;
}
.community-status[data-status="rejected"] {
  background: #6d2a35;
  color: #ffdcce;
}
.community-card input,
.community-card textarea,
.community-card select,
.live-select,
form input,
textarea,
.community-dialog input,
.community-dialog textarea,
.community-dialog select {
  background: #0e291ef0;
  border-color: #6e886568;
  color: #f1f3df;
  font-family: Arial, sans-serif;
}
#earn-payment-editor input,
#earn-payment-editor textarea,
#earn-payment-editor select {
  background: #310f1c;
  border-color: #8c535766;
  color: #fff0df;
}
input::placeholder,
textarea::placeholder {
  color: #a5b69d;
}
.community-card label,
.community-dialog label,
form label {
  color: #e1dfc6;
}
.payout-recipient {
  background: #354c30;
  color: #f5deb0;
}
.evidence-item img {
  background: #0e2a20;
  border-color: #77916680;
}
.community-message {
  background: #34472a;
  border-color: #a5a06480;
  color: #fff0ce;
}
.community-dialog {
  background: linear-gradient(135deg, #173929, #102a22);
  border: 1px solid #c7aa75;
  color: #f6ecd9;
  box-shadow: 0 25px 100px #06160eb3;
}
.community-dialog::backdrop {
  background: #061810b3;
}
.dialog-close {
  background: #6d2330;
  border-color: #cba47288;
  color: #fff1cd;
}
.community-dialog-heading {
  color: #e2d2ad;
}
.task-editor-dialog {
  width: min(720px, calc(100% - 28px));
  max-height: 88vh;
  border-top: 3px solid #d5b47f;
}
.task-editor-dialog .community-form-grid {
  margin-bottom: 10px;
}
.task-editor-dialog input[aria-invalid="true"],
.task-editor-dialog textarea[aria-invalid="true"] {
  border-color: #ee8f81;
  outline: 1px solid #ee8f81;
}
#earn-task-message {
  position: sticky;
  top: -26px;
  z-index: 2;
  background: #6b2734;
  border-color: #e5b27e;
  color: #fff0dc;
}
.notice-card {
  background: #183f2e;
  border-color: #8b9c65;
  border-top-color: #e8c989;
}
.notice-card[data-tone="warning"] {
  background: #542432;
  border-color: #cf9874;
}
.notice-card[data-tone="success"] {
  background: #235038;
  border-color: #a9ba77;
}
.auth-story {
  background:
    radial-gradient(ellipse at 20% 50%, #325b3d44, transparent 70%),
    linear-gradient(150deg, #214831, #112e24);
  border-color: #7d8f6166;
}
.auth-form-side {
  background: linear-gradient(130deg, #1b2e21, #27161e);
}
.auth-story h1 em {
  color: #ecc88e;
}
.auth-tabs {
  background: #18372b;
  border-color: #818e6266;
}
.auth-tabs button.selected {
  background: #722635;
  color: #ffe1ad;
}
.auth-disclaimer {
  border-color: #69816480;
}
.auth-disclaimer p {
  color: #b9c9ae;
}
.welcome-hero {
  background: #143127;
  border-color: #8b9e7270;
}
.christmas-art::after {
  background: linear-gradient(
    90deg,
    #102c22,
    #102c22ee 30%,
    #102c2280 47%,
    transparent 67%
  );
}
.hero-copy h2 {
  color: #fcf2dd;
}
.hero-copy h2 em {
  color: #efc789;
  font-style: normal;
}
.hero-copy p {
  color: #c5d6bd;
}
.hero-greeting {
  color: #dddcc0;
}
.hero-meta {
  color: #afc5a6;
}
.quick-card::before {
  background-image: url("holiday-snow.svg");
  height: 19px;
  top: -7px;
  opacity: 1;
}
.home-note {
  background: #1c3a2b;
}
.support-floating {
  background: linear-gradient(135deg, #a52d36, #701f30);
  border-color: #ecc28a;
  color: #fff0d3;
  box-shadow: 0 6px 24px #19071366;
}
.support-floating::before {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 39px;
  width: 63px;
  height: 89px;
  background: url("holiday-snowman.svg") center/contain no-repeat;
  pointer-events: none;
}
.support-floating > span {
  display: none;
}
#winter-snow {
  opacity: 0.48;
}
.winter-ground {
  opacity: 0;
}
.content > footer {
  color: #a4b591;
}
@media (max-width: 1150px) {
  .holiday-pine-left {
    left: 210px;
    width: 130px;
    opacity: 0.35;
  }
  .holiday-corner {
    width: 200px;
    height: 230px;
    opacity: 0.6;
  }
  .earn-heading-actions {
    gap: 8px;
  }
  .earn-intro {
    align-items: flex-start;
  }
  .earn-overview {
    gap: 14px;
  }
  .earn-overview article {
    padding: 22px 16px 16px;
  }
}
@media (max-width: 900px) {
  .holiday-pine-left {
    left: 76px;
  }
  .holiday-decor::after {
    left: 76px;
  }
  .brand-name {
    font-size: 15px;
  }
  .earn-heading-actions {
    flex-shrink: 1;
  }
  .earn-overview {
    gap: 12px;
  }
  .earn-overview span {
    font-size: 11px;
  }
  .earn-overview strong {
    font-size: 24px;
  }
}
@media (max-width: 650px) {
  .sidebar {
    padding-top: 34px;
  }
  .sidebar-logo .brand-name {
    font-size: 18px;
  }
  .holiday-pine-left {
    display: none;
  }
  .holiday-corner {
    top: 150px;
    width: 145px;
    height: 180px;
    opacity: 0.35;
  }
  .holiday-decor::after {
    left: 0;
    opacity: 0.28;
  }
  .topbar {
    height: 74px;
    padding-top: 0;
  }
  .content {
    padding-top: 39px;
  }
  .festive-lights {
    height: 25px;
    background-size: 270px 31px;
  }
  .content::before {
    height: 27px;
    background-size: 300px 34px;
  }
  .earn-heading-actions {
    width: 100%;
  }
  .earn-heading-actions .button {
    flex: 1;
    justify-content: center;
  }
  .earn-overview {
    gap: 10px;
    margin: 27px 0;
  }
  .earn-overview article {
    padding: 18px 10px 12px;
    border-radius: 11px;
  }
  .earn-overview small {
    display: none;
  }
  .earn-overview strong {
    font-size: 23px;
    margin-top: 8px;
  }
  .earn-overview span {
    font-size: 10px;
  }
  .earn-overview article::before {
    height: 21px;
    top: -8px;
  }
  .earn-payment-grid > .panel {
    padding: 20px;
    border-width: 3px;
  }
  .earn-payment-grid > .panel::after {
    width: 49px;
    height: 49px;
    right: -9px;
    top: -14px;
  }
  .earn-cooldown {
    padding: 16px;
    gap: 9px;
  }
  #earn-countdown {
    font-size: 27px;
  }
  .support-floating::before {
    display: none;
  }
  .sidebar .help-card::after {
    display: none;
  }
  .christmas-art::after {
    background: linear-gradient(
      180deg,
      #102c22 0%,
      #102c22 44%,
      #102c22d9 49%,
      transparent 69%
    );
  }
  .task-editor-dialog {
    padding: 20px;
  }
  .task-editor-dialog .community-form-grid {
    grid-template-columns: 1fr;
  }
}