.site-header {
  min-height: 76px;
  height: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  color: #f7f4ff;
  background: rgba(10, 9, 15, .96);
  border-bottom: 1px solid #302242;
}

.brand-mark {
  background: linear-gradient(135deg, #7047e8, #b668ff);
}

.brand-logo {
  display: block;
  width: 190px;
  max-width: 28vw;
  height: 52px;
  object-fit: contain;
  object-position: left center;
}

.desktop-nav {
  justify-self: center;
  gap: 10px;
}

.desktop-nav a,
.header-actions .nav-account {
  padding: 9px 15px;
  border-radius: 8px;
  background: #17151d;
  color: #f8f6ff;
}

.desktop-nav a:hover,
.header-actions .nav-account:hover {
  color: #fff;
  background: #6d42dd;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 14px;
  font-size: 14px;
  font-weight: 750;
}

.header-actions .cart-link {
  color: #f8f6ff;
}

.header-actions .cart-link span {
  background: #7448e6;
}

.dashboard-menu {
  position: relative;
}

.dashboard-menu summary {
  padding: 9px 15px;
  list-style: none;
  cursor: pointer;
  border: 1px solid #8a62df;
  border-radius: 8px;
  background: #17151d;
}

.dashboard-menu summary::-webkit-details-marker {
  display: none;
}

.dashboard-menu summary::after {
  content: " ▾";
  color: #b89ae9;
}

.dashboard-menu nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  padding: 8px;
  border: 1px solid #31283c;
  border-radius: 10px;
  background: #15131a;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .42);
}

.dashboard-menu nav a,
.dashboard-menu nav button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  color: #f8f6ff;
  text-align: left;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font-weight: 750;
}

.dashboard-menu nav a:hover,
.dashboard-menu nav button:hover {
  background: #6d42dd;
}

.dashboard-menu nav input {
  display: none;
}

.moneylogs-home {
  position: relative;
  min-height: 100vh;
  overflow: clip;
  color: #f7f4ff;
  background:
    radial-gradient(circle at 50% -15%, rgba(112, 67, 220, .24), transparent 42%),
    linear-gradient(180deg, #0a090f 0%, #0d0b13 100%);
}

.moneylogs-home > :not(.money-fall-field) {
  position: relative;
  z-index: 2;
}

.money-fall-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: .66;
  background-image: url('/static/moneylogs-falling-bills.png'), url('/static/moneylogs-falling-bills.png');
  background-position: center -180px, center 780px;
  background-repeat: repeat-y, repeat-y;
  /* The artwork spans the viewport, rather than leaving empty gutters on wide monitors. */
  background-size: 100vw auto, 100vw auto;
  mix-blend-mode: screen;
  animation: money-bills-fall 26s linear infinite;
}

@keyframes money-bills-fall {
  from { background-position: center -900px, center 80px; }
  to { background-position: center 900px, center 1880px; }
}

.moneylogs-home .hero {
  display: block;
  max-width: 980px;
  padding: 74px 24px 48px;
  text-align: center;
}

.moneylogs-home .hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 6vw, 68px);
  letter-spacing: -.045em;
}

.moneylogs-home .hero h1 em {
  color: #a767ff;
  text-shadow: 0 0 30px rgba(151, 82, 255, .34);
}

.wallet-card { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; margin: 18px 0; padding: 15px; border: 1px solid #ded9f2; border-radius: 14px; background: linear-gradient(135deg, #faf9ff, #f2efff); }
.wallet-card span { grid-column: 1 / -1; color: #695d87; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.wallet-card code { min-width: 0; overflow-wrap: anywhere; color: #211d31; font: 700 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.copy-wallet { align-self: center; border: 0; border-radius: 9px; padding: 9px 12px; color: #fff; background: linear-gradient(135deg, #6b43dc, #a257f0); font-weight: 750; cursor: pointer; }
.copy-wallet:hover { filter: brightness(1.07); }
.send-exactly { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.send-exactly > button { grid-column: 2; grid-row: 1 / span 2; border: 1px solid #d8cffd; border-radius: 8px; padding: 6px 9px; color: #6640d7; background: #f4f1ff; font-size: 12px; font-weight: 750; cursor: pointer; }
.payment-qr { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.payment-qr img { width: 172px; height: 172px; padding: 8px; background: #fff; border-radius: 10px; }
.payment-qr span { color: var(--muted); font-size: 13px; }
.payment-confirmed { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin-top: 18px; padding: 18px; border: 1px solid #9ce8c9; border-radius: 14px; color: #087455; background: #eafff6; }
.payment-confirmed > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #12a778; font-weight: 900; }
.payment-confirmed strong { display: block; color: #075b44; font-size: 17px; }
.payment-confirmed p { margin: 3px 0 0; font-size: 13px; }
.payment-confirmed .button { grid-column: 1 / -1; width: 100%; margin-top: 2px; }

.hero-tagline {
  margin: 5px 0 28px;
  color: #b9b2c5 !important;
  font-size: 18px !important;
}

.hero-search {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(170px, 1fr) auto;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #332840;
  border-radius: 14px;
  background: rgba(16, 14, 21, .9);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .25);
}

.hero-search input,
.hero-search select {
  height: 48px;
  color: #f8f5ff;
  border-color: #322b3b;
  background: #111016;
}

.hero-search input::placeholder {
  color: #8f8998;
}

.hero-search .button {
  min-height: 48px;
  background: linear-gradient(135deg, #6b43dc, #a257f0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.moneylogs-home .category-cloud {
  justify-content: center;
  padding: 22px 4px 0;
}

.moneylogs-home .category-cloud a {
  color: #d8c7ee;
  background: rgba(24, 20, 31, .8);
}

.featured-products {
  padding-top: 35px;
}

.featured-products .section-heading h2,
.featured-products .text-link {
  color: #fff;
}

.featured-products .product-card {
  color: #f7f4ff;
  border-color: #2c2437;
  background: #131119;
}

.featured-products .variant {
  color: #aaa2b5;
}

.featured-products .empty-state {
  color: #b8b0c1;
  border-color: #40364d;
  background: #131119;
}

.welcome-modal[hidden] {
  display: none;
}

.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
}

.welcome-backdrop {
  display: none;
}

.welcome-card {
  position: relative;
  pointer-events: auto;
  width: min(460px, 100%);
  padding: 38px 30px 28px;
  overflow: hidden;
  color: #f8f6ff;
  border: 1px solid #493368;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% -15%, rgba(122, 72, 235, .55), transparent 48%),
    linear-gradient(180deg, #17122a 0%, #0d0b13 54%);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .58), 0 0 45px rgba(123, 69, 231, .18);
}

.welcome-card h2 {
  margin: 9px 0 10px;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.welcome-card p {
  margin: 0 0 24px;
  color: #bdb5c9;
}

.welcome-card .button {
  width: 100%;
}

.promo-copy {
  width: 100%;
  margin: 0 0 14px;
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  border: 1px dashed #7553d8;
  border-radius: 12px;
  background: rgba(100, 66, 191, .14);
  cursor: pointer;
}

.promo-copy span { font-weight: 900; letter-spacing: .16em; }
.promo-copy small { color: #bdb5c9; }

.promo-form { margin: 18px 0; }
.promo-form label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; }
.promo-form > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.promo-form .button { min-height: 44px; padding: 0 14px; }
.promo-applied { display: flex; justify-content: space-between; align-items: center; margin: 16px 0; font-size: 13px; }
.order-summary .discount-line { color: #188866; }

.admin-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 54px 24px 90px;
}

.admin-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.admin-heading h1 { margin: 4px 0; font-size: clamp(36px, 5vw, 58px); }
.admin-heading p { color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
.metric-grid article, .admin-panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.metric-grid article { padding: 18px; }
.metric-grid span, .metric-grid small { display: block; color: var(--muted); font-size: 12px; }
.metric-grid strong { display: block; margin: 7px 0; font-size: 27px; }
.admin-panel { padding: 24px; margin-bottom: 20px; }
.admin-section-title { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 18px; }
.admin-section-title h2, .admin-panel h2 { margin: 4px 0; }
.admin-search { display: flex; gap: 8px; width: min(520px, 100%); }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.admin-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.admin-table a { color: var(--blue); font-weight: 750; }
.inline-form { display: flex; gap: 6px; }
.inline-form select { min-width: 120px; padding: 8px; }
.inline-form button { border: 0; border-radius: 8px; padding: 0 12px; color: #fff; background: var(--blue); }
.admin-form-grid { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 10px; align-items: end; }
.admin-form-grid label, .stack-form label { color: var(--muted); font-size: 12px; font-weight: 750; }
.check-label { display: flex; align-items: center; gap: 7px; min-height: 46px; }
.check-label input { width: auto; }
.coupon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.coupon-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.coupon-grid span, .coupon-grid small { display: block; margin-top: 4px; color: var(--muted); }
.admin-notice { padding: 12px 15px; margin-bottom: 16px; border-radius: 10px; }
.admin-notice.success { color: #08785b; background: #e9fff7; border: 1px solid #bcebdc; }
.admin-notice.error { color: #9c2b2b; background: #fff0f0; border: 1px solid #ffd0d0; }
.admin-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.admin-columns.two { grid-template-columns: 1fr 1fr; }
.stack-form { display: grid; gap: 12px; }
.stack-form label { display: grid; gap: 5px; }
.stack-form textarea { width: 100%; min-height: 90px; padding: 12px; resize: vertical; border: 1px solid #d9dce7; border-radius: 10px; font: inherit; }
.button.danger { color: #fff; background: #b83232; }
.audit-list p { padding: 10px 0; margin: 0; border-bottom: 1px solid var(--line); }
.audit-list small { display: block; color: var(--muted); }
.truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.single-card { grid-template-columns: minmax(280px, 520px); justify-content: center; }
.verify-banner { display: flex; gap: 12px; align-items: center; margin-top: 15px; padding: 10px 12px; border: 1px solid #eadb9a; border-radius: 10px; background: #fff9df; }
.verify-banner input { display: none; }
.checkout-shell .auth-card { max-width: 520px; }
.checkout-items { max-height: 180px; overflow: auto; margin-bottom: 16px; }
.summary-lines { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 12px 0 18px; padding: 8px 0; }
.summary-lines p { display: flex; justify-content: space-between; gap: 18px; margin: 9px 0; }
.order-row-rich { align-items: flex-start; gap: 16px; }
.order-row-rich small { display: block; color: var(--muted); margin-top: 4px; }
.admin-table td small { color: var(--muted); white-space: normal; }
.admin-table td:nth-child(3) { min-width: 260px; white-space: normal; }

@media (max-width: 1000px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-form-grid { grid-template-columns: repeat(2, 1fr); }
  .coupon-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-columns { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .admin-shell { padding: 34px 16px 70px; }
  .metric-grid, .admin-form-grid, .coupon-grid, .admin-columns.two { grid-template-columns: 1fr; }
  .admin-section-title, .admin-heading.customer-heading { align-items: stretch; flex-direction: column; }
  .admin-search { flex-direction: column; }
}

.welcome-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 34px;
  height: 34px;
  color: #d6cde1;
  border: 1px solid #4a3b5d;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}

.welcome-later {
  display: block;
  margin: 16px auto 0;
  color: #928a9d;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media (max-width: 900px) {
  .site-header {
    display: flex;
  }

  .header-actions {
    display: none;
  }

  .menu-button {
    color: #fff;
  }
}

@media (max-width: 650px) {
  .brand-logo {
    width: 150px;
    max-width: 58vw;
    height: 44px;
  }
  .moneylogs-home .hero {
    padding-top: 52px;
  }

  .wallet-card { grid-template-columns: 1fr; }
  .copy-wallet { width: 100%; }
  .payment-qr { align-items: flex-start; flex-direction: column; }
  .payment-qr img { width: 200px; height: 200px; }

  .hero-search {
    grid-template-columns: 1fr;
  }

  .hero-search .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .money-fall-field {
    animation: none;
  }
}