:root {
  --bg: #091a17;
  --ink: #f5f1e7;
  --muted: #9bada1;
  --line: #304a3e;
  --green: #9ed4b2;
}
body {
  background:
    radial-gradient(ellipse at 82% 0, #6d472d26, transparent 55%),
    radial-gradient(ellipse at 0 95%, #265b4630, transparent 50%), #091a17;
}
.sidebar {
  background: #0c1f1a;
  border-color: #2d4638;
  scrollbar-color: #446a53 #0c1f1a;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  background: #0d211def;
  border-color: #355242;
  backdrop-filter: blur(18px);
}
.topbar-right {
  gap: 12px;
}
.breadcrumb {
  color: #809e8b;
}
.topbar strong {
  color: #e4eee2;
}
.nav-label {
  color: #869a7f;
}
.nav-item {
  color: #a0b5a4;
}
.nav-item:hover {
  background: #1b382b;
}
.nav-item.active {
  background: linear-gradient(95deg, #305942, #1c3b2d);
  color: #e2eacb;
  border: 1px solid #57724b44;
}
.nav-item b {
  background: #3f6247;
  color: #e3ecd2;
}
.workspace {
  background: #142b22;
  border-color: #385040;
}
.workspace-icon {
  background: #2a4932;
  color: #d9dba8;
}
.sidebar .help-card {
  background: linear-gradient(130deg, #243d2d, #142920);
  border-color: #43553d;
}
.help-card strong {
  color: #d9e1c3;
}
.help-card p {
  color: #91ab91;
}
.help-card button {
  color: #d4c48e;
}
.help-icon {
  border-color: #6c805a;
  color: #dfd0a0;
}
.profile {
  border-color: #35513e;
}
.avatar {
  background: #3d5036;
  color: #e8e3b7;
}
.logo-mark {
  background: #d6c287;
  color: #263b28;
  box-shadow: 0 4px 18px #cdb5701a;
}
.site-logo,
.sidebar-logo {
  color: #f2efdb;
}
.sidebar-logo small,
.domain {
  color: #b8c1a1;
}
.page-heading h1 {
  color: #f0f1e1;
}
.eyebrow {
  color: #c5bf8c;
}
.panel,
.stat-card {
  background: #12271f;
  border-color: #2e4939;
}
.panel-heading h2 {
  color: #e0e8d7;
}
.step {
  background: #213e2a;
  border-color: #4f6743;
  color: #d6d4a2;
}
.button.primary {
  background: linear-gradient(115deg, #dbca97, #bd9a5b);
  border-color: #d7bc7e;
  color: #243025;
  box-shadow: 0 5px 20px #cfb06e12;
  font-weight: 650;
}
.button.primary:hover {
  background: linear-gradient(115deg, #f0dfaf, #d3b271);
  border-color: #ebd194;
}
.button.white {
  background: #1b3527;
  border-color: #425e43;
  color: #cfdbc2;
}
.button.white:hover {
  background: #294832;
}
.text-button {
  color: #d7c78e;
}
.status.neutral {
  background: #273b2b;
  color: #aabc9f;
}
.live-select,
form input {
  background: #0e231b;
  border-color: #3f5942;
  color: #d9e9d4;
}
.live-select:focus-visible,
form input:focus-visible,
textarea:focus-visible {
  outline-color: #d7c28d;
}
input::placeholder {
  color: #75917b;
}
.snow-toggle {
  background: #243a29;
  border-color: #526246;
  color: #d7d7b0;
}
.snow-toggle > span:first-child {
  color: #f1e8c8;
}
.demo-badge {
  color: #c5d5b5;
}
.logout-button {
  border-color: #466144;
  color: #bfcfb7;
}
.quick-card {
  background: #152d21;
  border-color: #385641;
}
.quick-card:hover {
  background: #1e3d2b;
  border-color: #758462;
}
.quick-icon.green {
  background: #315136;
  color: #d5e3b9;
}
.quick-link {
  color: #d3c58f;
}
.home-note {
  background: #192f23;
  border-color: #43563c;
}
.home-note strong {
  color: #d4dfbf;
}
.home-note p {
  color: #96ad90;
}
.welcome-hero {
  min-height: 370px;
  background:
    radial-gradient(ellipse at 85% 35%, #5c6b3b3d, transparent 66%),
    linear-gradient(115deg, #1c3a2a, #0e261f);
  border: 1px solid #64754a80;
  box-shadow: 0 18px 55px #00150b22;
}
.hero-copy {
  padding: 38px 35px;
}
.hero-copy h2 {
  color: #f3f0d8;
  font-size: 37px;
  line-height: 1.3;
  letter-spacing: -1.3px;
}
.hero-copy h2 em {
  color: #e0c990;
  font-style: normal;
}
.hero-copy p {
  color: #a3bda4;
}
.hero-badge {
  background: #43503a55;
  border-color: #9a8c5270;
  color: #e1cc94;
  font-size: 8px;
  letter-spacing: 1.5px;
}
.hero-meta {
  color: #91aa8b;
}
.hero-meta i {
  background: #798354;
}
.hero-secondary {
  color: #d4dbc1;
}
.christmas-art {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
  padding: 0 15px 0 0;
}
.christmas-art img {
  display: block;
  width: 100%;
  max-width: 435px;
  height: auto;
  filter: drop-shadow(0 12px 25px #001d1230);
}
.christmas-art-label {
  position: absolute;
  right: 26px;
  top: 23px;
  color: #cbbb80;
  font-size: 7px;
  letter-spacing: 2.5px;
  writing-mode: vertical-rl;
}
.welcome-hero:after {
  opacity: 0.16;
}
.winter-ground {
  opacity: 0.13;
  filter: sepia(0.18);
}
.auth-story {
  background:
    radial-gradient(ellipse at 28% 65%, #345b3b7a, transparent 67%), #10291f;
  border-color: #3b553a;
}
.auth-story h1 em {
  color: #e2cc93;
}
.auth-story-content > p {
  color: #acbf9f;
}
.auth-form-side {
  background: #0c1d18;
}
.auth-tabs {
  background: #172e21;
  border-color: #36523a;
}
.auth-tabs button.selected {
  background: #37563b;
  color: #e0e1b5;
}
.auth-art.christmas-auth-art {
  height: 240px;
  margin: 4px 0 0;
  max-width: 390px;
}
.christmas-auth-art img {
  height: 280px;
  width: 100%;
  object-fit: contain;
  object-position: left center;
  position: relative;
  top: -18px;
}
.auth-perks {
  color: #b4c5a0;
  margin-bottom: 30px;
}
.auth-kicker {
  color: #d4bf81;
}
.auth-form-card > p {
  color: #90ab94;
}
.auth-story-footer {
  color: #859d7b;
}
.auth-disclaimer {
  border-color: #344932;
}
.auth-disclaimer strong {
  color: #b4c8a2;
}
.auth-disclaimer p {
  color: #839e88;
}
.winter-kicker {
  color: #dfc789;
}
.help-winter-hero {
  background:
    radial-gradient(ellipse at 90% 70%, #50604550, transparent 70%),
    linear-gradient(120deg, #234330, #11291e);
  border-color: #576a43;
}
.help-winter-hero h2,
.contact-hero h2 {
  color: #edead2;
}
.help-winter-hero p {
  color: #a4b99d;
}
.guide-art-card {
  background: linear-gradient(120deg, #3c634a, #1c412e);
  border-color: #89926466;
}
.guide-art-card strong {
  color: #eee7bf;
}
.art-snowflake {
  color: #dbe7cc;
}
.guide-tabs {
  background: #142b20;
  border-color: #3d5840;
}
.guide-tabs button {
  color: #b0c1a3;
}
.guide-tabs button.selected {
  background: #35553c;
  color: #e5dfb6;
}
.tutorial-number {
  color: #c5b981;
}
.tutorial-step p,
.zalo-tutorial-steps p {
  color: #9fb59d;
}
.zalo-guide-note {
  background: #183426;
  border-color: #425d43;
}
.zalo-guide-note p {
  color: #a5bea5;
}
.guide-tip {
  background: #1c3525;
  border-color: #4b6042;
  color: #b6c6a4;
}
.help-support-cta {
  background: linear-gradient(120deg, #344b32, #162e21);
  border-color: #617048;
}
.help-support-cta h2 {
  color: #e5e4c8;
}
.help-support-cta p {
  color: #a5b89a;
}
.faq {
  background: #182e23;
}
.faq details {
  border-color: #3b523b;
}
.faq summary {
  color: #d4dec5;
}
.faq details p {
  color: #9cb096;
}
.contact-icon {
  background: #345137;
  border-color: #6c7d51;
  color: #e2d499;
}
.support-admin-config,
.guide-admin-editor,
.notification-settings {
  background: #142d21;
  border-color: #3b5c40;
}
.content > footer {
  color: #81977a;
}
.topup-qr-unavailable {
  filter: none;
}
.festive-lights {
  position: fixed;
  left: 0;
  right: 0;
  top: -3px;
  height: 19px;
  z-index: 30;
  pointer-events: none;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  border-top: 1px solid #57724755;
}
.festive-lights i {
  position: relative;
  width: 5px;
  height: 8px;
  margin-top: 5px;
  border-radius: 3px 3px 6px 6px;
  background: #efd590;
  box-shadow: 0 2px 9px #efd590aa;
  animation: christmas-glow 4s ease-in-out infinite alternate;
}
.festive-lights i:before {
  content: "";
  position: absolute;
  left: 1px;
  top: -6px;
  width: 2px;
  height: 6px;
  background: #3e634b;
}
.festive-lights i:nth-child(3n) {
  background: #c76763;
  box-shadow: 0 2px 9px #bc4c5baa;
  animation-delay: -1.5s;
}
.festive-lights i:nth-child(3n + 1) {
  background: #a9d1a1;
  box-shadow: 0 2px 9px #84bf85aa;
  animation-delay: -2.5s;
}
.festive-lights i:nth-child(even) {
  margin-top: 9px;
}
.header-wallet-button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: linear-gradient(115deg, #30482c, #1b3628);
  border: 1px solid #9e93575e;
  border-radius: 9px;
  padding: 9px 12px;
  color: #e4e9ce;
  min-width: 160px;
  cursor: pointer;
  box-shadow: 0 3px 16px #06190c25;
}
.header-wallet-button > span:first-child {
  font-size: 19px;
  color: #decb8c;
}
.header-wallet-button > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.header-wallet-button small {
  font-size: 8px;
  color: #afbea1;
  font-weight: 400;
}
.header-wallet-button strong {
  font-size: 15px;
  color: #f5e1a7;
  font-weight: 650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1px;
}
.header-wallet-plus {
  margin-left: auto;
  display: grid;
  place-items: center;
  background: #d7c48b;
  color: #233c2b;
  border-radius: 50%;
  height: 21px;
  width: 21px;
  font-size: 15px;
}
.header-wallet-button:hover {
  border-color: #d7c48b;
  background: #304c31;
}
.header-wallet-button.wallet-stale {
  border-color: #af7c42;
}
.auto-pay-settings {
  padding: 25px;
  margin-top: 24px;
}
.auto-pay-settings a {
  color: #d4c187;
}
.auto-pay-checkbox {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
}
.auto-pay-checkbox input {
  width: 16px !important;
  min-height: 16px !important;
  height: 16px;
  accent-color: #b3ce96;
}
.auto-pay-table {
  margin-top: 24px;
}
.auto-pay-table td {
  white-space: normal;
  min-width: 120px;
}
.auto-pay-table small {
  display: block;
  font-size: 9px;
  line-height: 1.8;
  color: #9dad96;
  margin-top: 8px;
}
#auto-pay-accounts {
  margin-top: 10px;
}
#auto-pay-last-sync {
  font-size: 10px;
  color: #9db290;
}
.christmas-season-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: #afc1a0;
  font-size: 10px;
}
.christmas-season-note > span {
  font-size: 21px;
  color: #dcc88d;
}
@keyframes christmas-glow {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 1200px) {
  .hero-copy h2 {
    font-size: 31px;
  }
  .hero-copy {
    padding: 30px 27px;
  }
  .christmas-art img {
    max-width: 360px;
  }
  .welcome-hero {
    min-height: 340px;
  }
  .header-wallet-button {
    min-width: 145px;
    padding: 8px 10px;
    gap: 9px;
  }
  .header-wallet-button strong {
    font-size: 14px;
  }
  .topbar-right > .demo-badge {
    display: none;
  }
}
@media (max-width: 850px) {
  .topbar .breadcrumb,
  .topbar .slash {
    display: none;
  }
  .hero-copy h2 {
    font-size: 29px;
  }
  .christmas-art {
    padding-right: 0;
  }
  .christmas-art-label {
    display: none;
  }
  .header-wallet-button {
    min-width: 140px;
  }
  .auth-art.christmas-auth-art {
    transform: none;
    height: 235px;
  }
  .christmas-auth-art img {
    height: 250px;
  }
}
@media (max-width: 650px) {
  .topbar {
    height: 72px;
    padding: 0 16px;
  }
  .topbar-right {
    gap: 8px;
  }
  .topbar > div:first-child {
    font-size: 9px;
    max-width: 90px;
  }
  .header-wallet-button {
    min-width: 138px;
    padding: 7px 9px;
    gap: 8px;
  }
  .header-wallet-button strong {
    font-size: 13px;
  }
  .header-wallet-button small {
    font-size: 7px;
  }
  .header-wallet-plus {
    height: 18px;
    width: 18px;
    font-size: 13px;
  }
  .header-wallet-button > span:first-child {
    display: none;
  }
  .welcome-hero {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-copy {
    padding: 27px 24px 0;
  }
  .hero-copy h2 {
    font-size: 31px;
  }
  .christmas-art {
    height: 260px;
    overflow: hidden;
    margin-top: 5px;
  }
  .christmas-art img {
    width: 310px;
    height: auto;
    position: relative;
    top: -6px;
  }
  .christmas-season-note {
    font-size: 9px;
  }
  .hero-meta {
    font-size: 7px;
  }
  .festive-lights i:nth-child(even) {
    display: none;
  }
  .auto-pay-settings {
    padding: 19px;
  }
  .auth-art.christmas-auth-art {
    display: none;
  }
  .snow-toggle {
    width: 28px;
    height: 28px;
  }
  .hero-actions {
    margin-top: 19px;
  }
  .hero-copy > p {
    font-size: 10px;
  }
  .sidebar {
    border-bottom-color: #3b523d;
  }
}
@media (max-width: 430px) {
  .topbar > div:first-child {
    display: none;
  }
  .topbar-right {
    width: 100%;
    justify-content: flex-end;
  }
  .header-wallet-button {
    margin-right: auto;
    min-width: 155px;
  }
  .header-wallet-button > span:first-child {
    display: block;
  }
  .header-wallet-button strong {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .festive-lights i {
    animation: none;
  }
}