/* Ember Tokens + Private Hours — candlelit velvet, thorn and rose.
   Rides the living-glass system; this sheet only dresses the new doors. */

.token-page { max-width: 980px; }
.token-hero {
  padding: 28px 26px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(88, 18, 32, .55), rgba(24, 8, 14, .72));
  border: 1px solid rgba(216, 178, 90, .35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 160, .18);
  margin-bottom: 26px;
}
.token-kicker { color: var(--gold, #d8b25a); letter-spacing: .22em; text-transform: uppercase; font-size: .78rem; text-align: center; }
.token-hero h1 { text-align: center; margin: 10px 0 12px; }
.token-lede { line-height: 1.75; max-width: 720px; margin: 0 auto; text-align: center; }
.token-balance-card { text-align: center; margin: 20px auto 6px; }
.token-balance-label { display: block; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.token-balance { font-size: 3rem; font-weight: 800; color: var(--gold, #d8b25a); line-height: 1.1; }
.token-balance-ghost { display: block; font-size: 2rem; color: #b9c6ff; text-shadow: 0 0 18px rgba(150, 170, 255, .45); }
.token-balance-sub { font-size: 1rem; opacity: .8; }
.token-checkout-note { text-align: center; font-size: .9rem; opacity: .85; }

.token-section {
  margin: 0 0 26px; padding: 22px;
  border-radius: 16px;
  background: rgba(20, 10, 14, .55);
  border: 1px solid rgba(216, 178, 90, .22);
}
.token-section h2 { margin-top: 0; }
.token-h3 { margin: 18px 0 8px; font-size: 1rem; color: var(--gold, #d8b25a); }

.token-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 14px 0; }
.token-pack { padding: 18px; border-radius: 14px; text-align: center; border: 1px solid rgba(216, 178, 90, .3); background: rgba(60, 14, 26, .35); }
.token-pack-name { font-style: italic; opacity: .9; }
.token-pack-count { font-size: 2rem; font-weight: 800; margin: 6px 0 0; }
.token-pack-count span { font-size: .95rem; font-weight: 500; opacity: .8; }
.token-pack-price { font-size: 1.1rem; color: var(--gold, #d8b25a); margin: 2px 0 12px; }

.token-form { display: grid; gap: 12px; max-width: 520px; }
.token-form label { display: grid; gap: 6px; font-size: .92rem; }
.token-form input, .token-form select {
  padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(216, 178, 90, .35);
  background: rgba(0, 0, 0, .35); color: inherit; font: inherit;
}
.token-toggle { display: flex !important; align-items: center; gap: 10px; }
.token-toggle input { width: 18px; height: 18px; }

.token-earnings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.token-earn { padding: 14px; border-radius: 12px; border: 1px solid rgba(216, 178, 90, .25); background: rgba(0, 0, 0, .25); display: grid; gap: 4px; }
.token-earn span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.token-earn strong { font-size: 1.4rem; color: var(--gold, #d8b25a); }

.token-history { display: grid; gap: 6px; }
.token-row {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06); font-size: .92rem;
}
.token-gained { color: #9fe6a0; font-weight: 700; }
.token-spent { color: #f0b48a; font-weight: 700; }
.token-request-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.token-blocks { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.token-knock { max-width: 520px; }
.token-profile-card { margin-top: 14px; }

/* The in-room Private Hours meter */
.rm-private {
  margin: 10px 0; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(216, 178, 90, .4);
  background: linear-gradient(150deg, rgba(88, 18, 32, .5), rgba(10, 4, 8, .6));
  display: grid; gap: 6px; font-size: .93rem;
}
.rm-private strong { color: var(--gold, #d8b25a); }
.rm-private .rm-private-count { font-size: 1.5rem; font-weight: 800; letter-spacing: .04em; }
.rm-private .rm-private-warn { color: #f0b48a; font-weight: 700; }

/* Tokens by your own measure (build 2026.11.09.1): the custom till's
   quantity field, dressed as the pack counts it stands beside. */
.token-pack input.token-custom-qty {
  width: 120px; text-align: center; font-size: 1.7rem; font-weight: 800;
  background: rgba(10, 4, 8, .55); color: inherit;
  border: 1px solid rgba(216, 178, 90, .4); border-radius: 10px; padding: 4px 6px;
}
.rm-private-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

@media (max-width: 560px) {
  .token-hero { padding: 22px 16px; }
  .token-section { padding: 16px; }
  .token-balance { font-size: 2.4rem; }
}