/* Boostly Mini App. Matte oxblood, hairlines, one crimson accent. No blur, glow or animated backdrops. */
@font-face { font-family: "Onest"; src: url("/fonts/onest.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/fonts/unbounded.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #110a08;
  --surface: #1b1310;
  --raised: #251a16;
  --sunken: #0c0705;
  --line: rgba(255, 226, 210, .08);
  --line-strong: rgba(255, 226, 210, .16);
  --text: #fbf1eb;
  --muted: #b39c92;
  --faint: #826c63;
  --red: #f04a2a;
  --red-press: #d23c1f;
  --red-deep: #a12813;
  --red-wine: #4e1a0e;
  --red-soft: rgba(240, 74, 42, .14);
  --red-text: #ff8c6a;
  --ok: #78ca93;
  --warn: #f2b45c;
  --radius: 18px;
  --control: 13px;
  --display: "Unbounded", "Onest", system-ui, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --dock: 62px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: var(--app-height, 100dvh); background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body.modal-open { overflow: hidden; }
body.still *, body.still *::before, body.still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
h1, h2, p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 30; padding: 10px 14px; border-radius: var(--control); background: var(--red); color: #fff; }
.skip-link:focus { top: 12px; }

main { max-width: 560px; margin: 0 auto; padding: 0 16px calc(var(--dock) + var(--safe-bottom) + 28px); }

/* Top bar */
header { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--red); color: #fff; font: 600 17px/1 var(--display); padding-bottom: 2px; }
.brand-name { font: 500 17px/1 var(--display); letter-spacing: -.01em; }
.header-actions { display: flex; gap: 2px; margin-right: -8px; }
.icon-button { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--muted); transition: background .15s, color .15s; }
.icon-button svg { width: 21px; height: 21px; }
.icon-button:active { background: var(--raised); color: var(--text); }
@media (hover: hover) { .icon-button:hover { background: var(--surface); color: var(--text); } }
.spinning svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(-360deg); } }
.notification-count { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font: 600 10.5px/17px var(--body); text-align: center; box-shadow: 0 0 0 2px var(--bg); }

.sync-line { display: flex; align-items: center; gap: 8px; min-height: 20px; margin-bottom: 14px; font-size: 12px; color: var(--faint); }
#connection-state { display: inline-flex; align-items: center; gap: 7px; }
#connection-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
#connection-state[data-state="ready"]::before { background: var(--ok); }
#connection-state[data-state="loading"]::before { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
#connection-state[data-state="offline"]::before, #connection-state[data-state="error"]::before { background: var(--red); }
@keyframes pulse { 50% { opacity: .3; } }
#sync-time:not(:empty)::before { content: "·"; margin-right: 8px; }

/* Messages */
#notice { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--control); border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px; }
#notice[data-kind="success"] { border-color: rgba(108, 199, 147, .35); color: #d3efdf; }
#notice[data-kind="warning"] { border-color: rgba(229, 173, 88, .4); color: #f4dfbd; }
#notice[data-kind="error"] { border-color: rgba(240, 74, 42, .5); background: var(--red-soft); color: #ffd9cc; }
.auth-note { margin-bottom: 16px; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.auth-note strong { display: block; font: 500 16px/1.3 var(--display); margin-bottom: 6px; }
.auth-note p { color: var(--muted); font-size: 14px; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Page title */
.title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 4px 0 18px; }
.title-row h1 { display: flex; align-items: center; gap: 10px; font: 600 23px/1.2 var(--display); letter-spacing: -.02em; }
.title-row p { margin-top: 6px; color: var(--muted); font-size: 14px; max-width: 38ch; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 12px; }
.section-heading h2 { font: 500 15px/1.3 var(--display); letter-spacing: -.01em; }
.section-heading small { color: var(--faint); font-size: 12.5px; }

/* Premium emoji and line icons share one slot */
.pe { display: inline-block; flex: none; width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: -.25em; }
.pe-tint { background: currentColor; -webkit-mask: var(--pe) center / contain no-repeat; mask: var(--pe) center / contain no-repeat; }
svg.pe { stroke: var(--red-text); }
.pe-live { overflow: hidden; }
.pe-live > svg, .pe-live > video { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }
.ui-icon { width: 18px; height: 18px; flex: none; }

/* Buttons */
.primary, .secondary, .text-button, .filter-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 14.5px; line-height: 1.2; text-align: center; transition: background .15s, border-color .15s, transform .08s; }
.primary, .secondary { min-height: 46px; padding: 0 18px; border-radius: var(--control); }
.primary { background: var(--red); color: #fff; }
.primary:active { background: var(--red-press); transform: scale(.985); }
.secondary { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.secondary:active { background: #2c201b; transform: scale(.985); }
.primary.danger { background: none; color: var(--red-text); box-shadow: inset 0 0 0 1px rgba(240, 74, 42, .6); }
.text-button { min-height: 36px; padding: 0 4px; color: var(--red-text); font-size: 13.5px; }
.button-row, .record-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.record-actions { margin-top: 16px; }
.record-actions .primary, .record-actions .secondary { min-height: 42px; padding: 0 15px; font-size: 14px; }

/* Cards */
.card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card h2 { font: 500 16px/1.3 var(--display); letter-spacing: -.01em; }
.card > p { margin-top: 8px; color: var(--muted); font-size: 14px; }
.card > .secondary, .card > .primary { margin-top: 14px; margin-right: 8px; }
.label { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.metric-value { margin: 6px 0 2px; font: 500 19px/1.2 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card small { color: var(--faint); font-size: 12.5px; }

/* Balance card: the one place with a crimson field, built like a bank card */
.balance-hero, .balance-card { position: relative; overflow: hidden; padding: 20px; border: 0; border-radius: 20px; color: #fff; background: linear-gradient(140deg, #f66a35 0%, #e0402a 42%, #a52617 78%, #6e170e 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
.balance-hero::before, .balance-card::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 106% -12%, transparent 0 13px, rgba(255, 255, 255, .055) 13px 14px); pointer-events: none; }
.balance-hero > *, .balance-card > * { position: relative; }
.hero-top { display: flex; justify-content: space-between; align-items: center; }
.wallet-label, .balance-card .label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }
.hero-brand { font: 500 13px/1 var(--display); color: rgba(255, 255, 255, .8); }
.hero-amount, .balance-large { margin: 14px 0 22px; font: 600 clamp(27px, 8.6vw, 36px)/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wallet-reserves { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: 13px; color: rgba(255, 255, 255, .84); }
.wallet-reserves b { font-weight: 600; color: #fff; }
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.balance-card .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.balance-card .button-row > :nth-child(3) { grid-column: 1 / -1; min-height: 34px; background: none; box-shadow: none; color: rgba(255, 255, 255, .8); font-size: 13.5px; justify-content: flex-start; padding: 0; }
.balance-card .primary { background: #fff; color: var(--red-deep); }
.balance-card .primary:active { background: #f6e2d8; }
.balance-card .secondary { background: rgba(0, 0, 0, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* Overview */
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.quick-action { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 12px 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: left; transition: background .15s; }
.quick-action:active { background: var(--raised); }
.quick-top { display: flex; align-items: center; gap: 6px; width: 100%; font-size: 12px; font-weight: 600; color: var(--muted); }
.quick-top .pe { font-size: 14px; }
.quick-value { margin-top: 10px; font: 500 22px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.quick-caption { margin-top: 5px; font-size: 11.5px; line-height: 1.3; color: var(--faint); }
.insight-grid { display: grid; gap: 12px; margin-top: 12px; }
.resource-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.period-label { flex: none; font-size: 12px; color: var(--faint); padding-top: 3px; }
.chart-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 6px; }
.chart-legend span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.chart-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--red); }
.chart-legend .income span::before { background: #f6cdb6; }
.chart-legend strong { display: block; margin-top: 4px; font: 500 17px/1.2 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.activity-chart { display: block; width: 100%; height: auto; margin-top: 8px; }
.chart-grid-line { stroke: var(--line); stroke-width: 1; }
.bar-spend { fill: var(--red); }
.bar-income { fill: #f6cdb6; }
.chart-day { fill: var(--faint); font: 9px var(--body); }
.chart-details { margin-top: 10px; font-size: 13px; color: var(--muted); }
.chart-details summary { cursor: pointer; padding: 6px 0; color: var(--red-text); font-weight: 600; font-size: 13px; }
.chart-zero { margin-top: 16px; padding: 22px 16px; border: 1px dashed var(--line-strong); border-radius: 14px; text-align: center; }
.chart-zero p { font-weight: 600; }
.chart-zero small { display: block; margin-top: 4px; }
.zero-grid { display: none; }
.eyebrow { margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--red-text); }
.next-card .secondary { margin-top: 16px; }
.event-list { padding: 4px 18px; }
.event-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.event-row:last-child { border-bottom: 0; }
.event-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.event-dot.read { background: var(--line-strong); }
.event-copy { flex: 1; min-width: 0; }
.event-copy strong { display: block; font-size: 14.5px; font-weight: 600; }
.event-copy small { display: block; margin-top: 1px; }
.event-row .text-button { color: var(--muted); font-weight: 500; }
.quiet-empty, .empty-line { padding: 14px 0; color: var(--faint); font-size: 14px; }

/* Lists of campaigns and platforms */
.resource-tools { display: grid; gap: 12px; margin-bottom: 14px; }
.resource-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--control); background: var(--surface); color: var(--faint); }
.resource-search:focus-within { border-color: var(--line-strong); }
.resource-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font-size: 15px; }
.resource-search input::placeholder { color: var(--faint); }
.filter-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { flex: none; min-height: 34px; padding: 0 13px; border-radius: 17px; font-size: 13px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.filter-chip[aria-pressed="true"] { color: #fff; background: var(--red); box-shadow: none; }
.resource-list, .source-list { display: grid; gap: 12px; }
.resource-card h2 { overflow-wrap: anywhere; }
.resource-link { display: inline-block; margin-top: 4px; color: var(--muted); font-size: 13.5px; text-decoration: none; overflow-wrap: anywhere; }
.resource-facts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.resource-facts .card { padding: 14px 0; border: 0; border-radius: 0; background: none; }
.resource-facts .card + .card { padding-left: 16px; border-left: 1px solid var(--line); }
.campaign-progress { display: grid; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
progress { display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; overflow: hidden; background: var(--raised); appearance: none; -webkit-appearance: none; }
progress::-webkit-progress-bar { background: var(--raised); }
progress::-webkit-progress-value { background: var(--red); border-radius: 2px; }
progress::-moz-progress-bar { background: var(--red); border-radius: 2px; }
.next-step, .reason-note, .info-box, .review-note { margin-top: 14px; padding: 12px 14px; border-radius: var(--control); background: var(--raised); color: var(--muted); font-size: 13.5px; }
.reason-note { background: var(--red-soft); color: #ffd6c8; }
.info-box { margin: 0 0 4px; border: 1px solid var(--line); background: var(--surface); }
.resource-meta { margin-top: 14px; color: var(--faint); font-size: 13px; }
.resource-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.client-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--red-wine); color: #ffcbb5; font: 500 15px/1 var(--display); }
.connection-stages { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.connection-stages li { position: relative; padding-left: 28px; color: var(--muted); }
.connection-stages li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.connection-stages li.done { color: var(--text); }
.connection-stages li.done::before { background: var(--red); box-shadow: none; }
.connection-stages li.done::after { content: ""; position: absolute; left: 5px; top: 7px; width: 7px; height: 4px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(-45deg); }
.resource-highlight { box-shadow: 0 0 0 1.5px var(--red); }
.filtered-empty { margin-top: 12px; }
.source-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Status pills: neutral text, a small coloured dot carries the state */
.badge { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 600; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.badge.active::before, .badge.approved::before, .badge.confirmed::before { background: var(--ok); }
.badge.active, .badge.approved, .badge.confirmed { color: var(--text); }
.badge.pending::before, .badge.request_pending::before, .badge.paused::before { background: var(--warn); }
.badge.rejected { color: var(--red-text); box-shadow: inset 0 0 0 1px rgba(240, 74, 42, .4); }
.badge.rejected::before { background: var(--red); }

/* Balance page */
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.record { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.record:first-child { padding-top: 0; }
.record:last-child { padding-bottom: 0; border-bottom: 0; }
.record strong { display: block; font-size: 14.5px; font-weight: 600; }
.record small { display: block; margin-top: 2px; }
.scroll-table { padding: 4px 18px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { padding: 12px 8px 10px 0; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
td { padding: 12px 8px 12px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--muted); }
td:nth-child(2) { color: var(--text); }
td:last-child, th:last-child { padding-right: 0; text-align: right; white-space: nowrap; color: var(--text); }
td small { display: block; }
.amount-positive { color: var(--ok) !important; }

/* Empty and loading states */
.empty { display: grid; justify-items: center; gap: 6px; padding: 18px 8px; text-align: center; }
.empty-symbol { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; background: var(--raised); font-size: 24px; color: var(--red-text); }
.empty strong { font: 500 15px/1.3 var(--display); }
.empty p { max-width: 34ch; color: var(--muted); font-size: 14px; }
.empty .secondary, .empty .primary { margin-top: 10px; }
.loading-state { display: grid; justify-items: center; gap: 8px; padding: 34px 18px; text-align: center; }
.loading-state p { color: var(--muted); }
.loading-orbit { width: 26px; height: 26px; margin-bottom: 6px; border-radius: 50%; border: 2.5px solid var(--raised); border-top-color: var(--red); animation: spin .8s linear infinite reverse; }

/* Notifications and moderation */
.inbox-toolbar { margin-bottom: 14px; }
.inbox-item.unread { border-color: var(--line-strong); }
.inbox-item h2 { display: flex; align-items: center; gap: 8px; }
.unread-dot { flex: none; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--red); color: #fff; font-size: 11px; font-weight: 600; line-height: 22px; }
.inbox-body { white-space: pre-line; }
.inbox-date { display: block; margin-top: 10px; }
.admin-record + .admin-record { margin-top: 12px; }
.admin-record .button-row { margin-top: 14px; }
.admin-record p { overflow-wrap: anywhere; }

/* Bottom navigation: a plain bar, not a floating pill */
.dock { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; padding-bottom: var(--safe-bottom); background: #130c0a; border-top: 1px solid var(--line); transition: transform .2s; }
body.keyboard-open .dock { transform: translateY(110%); }
#nav { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 560px; height: var(--dock); margin: 0 auto; }
#nav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--faint); font-size: 10.5px; font-weight: 600; transition: color .15s; }
#nav svg { width: 22px; height: 22px; }
#nav button.selected { color: var(--red-text); }
#nav button.selected::before { content: ""; position: absolute; top: -1px; left: 50%; width: 22px; height: 2px; margin-left: -11px; border-radius: 0 0 2px 2px; background: var(--red); }

/* Sheets */
dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: 560px; max-height: calc(var(--app-height, 100dvh) - 24px); margin: 0 auto; padding: 0; overflow: hidden; border: 0; border-top: 1px solid var(--line-strong); border-radius: 22px 22px 0 0; background: var(--surface); color: var(--text); }
dialog::backdrop { background: rgba(5, 2, 3, .72); }
body.keyboard-open dialog { bottom: var(--keyboard-offset, 0px); }
#editor { display: flex; flex-direction: column; max-height: calc(var(--app-height, 100dvh) - 24px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex: none; padding: 20px 18px 14px; }
.dialog-head h2 { font: 600 18px/1.3 var(--display); letter-spacing: -.02em; }
.dialog-step { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red-text); }
.dialog-step:empty { display: none; }
#close-modal { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--raised); color: var(--muted); font-size: 22px; line-height: 1; }
.dialog-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 16px; -webkit-overflow-scrolling: touch; }
#dialog-help { color: var(--muted); font-size: 14px; }
#fields { display: grid; gap: 14px; margin-top: 16px; }
#fields label { display: grid; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
#fields input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--control); outline: 0; background: var(--sunken); color: var(--text); font-size: 16px; font-weight: 400; }
#fields input::placeholder { color: var(--faint); }
#fields input:focus { border-color: var(--red); }
input[aria-invalid="true"] { border-color: var(--red) !important; background: var(--red-soft) !important; }
.field-note { font-weight: 400; color: var(--faint); }
.advanced-fields { display: grid; gap: 14px; }
.advanced-fields summary { cursor: pointer; color: var(--red-text); font-size: 13.5px; font-weight: 600; }
.feature-title { display: flex; align-items: center; gap: 10px; }
.payout-details { background: var(--raised); color: var(--text); }
.guide-links { margin-top: 4px; }
.guide-steps li { overflow-wrap: anywhere; }
.method-list { display: grid; gap: 10px; }
.method-list .secondary { justify-content: flex-start; min-height: 52px; }
.hold-note { margin-top: 12px; }
.record .primary { flex: none; min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.review-list { display: grid; grid-template-columns: auto 1fr; margin: 16px 0 0; }
.review-list dt, .review-list dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.review-list dt { padding-right: 16px; color: var(--muted); }
.review-list dd { text-align: right; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#form-error { margin-top: 12px; color: var(--red-text); font-size: 13.5px; font-weight: 600; outline: 0; }
#form-error:empty { display: none; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; padding: 12px 18px max(14px, var(--safe-bottom)); border-top: 1px solid var(--line); }
.dialog-actions .primary { flex: 1; min-width: 150px; min-height: 48px; }
.dialog-actions .text-button { flex-basis: 100%; color: var(--muted); }
.guide-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.guide-steps li::marker { color: var(--red-text); font-weight: 600; }
.secret-value { margin: 0; padding: 14px; border-radius: var(--control); background: var(--sunken); border: 1px solid var(--line-strong); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; user-select: all; }

footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }
footer .brand-name { font-size: 13px; color: var(--muted); }

@media (min-width: 480px) {
  .insight-grid { grid-template-columns: 1fr; }
  .hero-amount, .balance-large { font-size: 38px; }
}
@media (max-width: 350px) {
  .quick-grid { grid-template-columns: 1fr; }
  .hero-actions { grid-template-columns: 1fr; }
}

/* ---- Motion. Everything below is switched off by body.still (reduced motion). ---- */
body { background: radial-gradient(110% 46% at 50% -8%, rgba(240, 74, 42, .16), transparent 72%) no-repeat, var(--bg); }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes slide-forward { from { opacity: 0; transform: translateX(26px); } }
@keyframes slide-back { from { opacity: 0; transform: translateX(-26px); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes breathe { 50% { opacity: .35; transform: scale(.7); } }
#content > * { animation: rise-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
#content.enter-forward > * { animation-name: slide-forward; }
#content.enter-back > * { animation-name: slide-back; }
#notice.pop { animation: pop-in .35s cubic-bezier(.2, .9, .3, 1.2); }
dialog[open] { animation: sheet-up .42s cubic-bezier(.16, 1, .3, 1); }
dialog[open]::backdrop { animation: fade-in .3s ease; }
#review:not([hidden]), #fields:not([hidden]) { animation: fade-in .3s ease; }
.card, .quick-action { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.quick-action:active, .resource-card:active { transform: scale(.985); }
@media (hover: hover) { .quick-action:hover { border-color: var(--line-strong); transform: translateY(-2px); } }
.badge.pending::before, .badge.request_pending::before, .badge.invoice_pending::before { animation: breathe 1.8s ease-in-out infinite; }
progress::-webkit-progress-value { transform-origin: left; animation: grow .9s .15s cubic-bezier(.2, .8, .2, 1) both; }
progress::-moz-progress-bar { transform-origin: left; animation: grow .9s .15s cubic-bezier(.2, .8, .2, 1) both; }
.balance-hero::after, .balance-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .13) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 160% 0; animation: card-shine 1.6s .35s ease both; pointer-events: none; }
@keyframes card-shine { to { background-position: -60% 0; } }

/* Sliding marker under the active tab */
#nav { position: relative; }
.nav-indicator { position: absolute; top: -1px; left: 0; width: 20%; height: 2px; pointer-events: none; transform: translateX(calc(var(--tab, 0) * 100%)); transition: transform .45s cubic-bezier(.2, .9, .2, 1), opacity .2s; }
.nav-indicator::before { content: ""; display: block; width: 28px; height: 2px; margin: 0 auto; border-radius: 0 0 2px 2px; background: var(--red); box-shadow: 0 0 12px rgba(240, 74, 42, .7); }
#nav.off-tab .nav-indicator { opacity: 0; }
#nav button.selected::before { display: none; }
#nav button svg { transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
#nav button.selected svg { transform: translateY(-2px) scale(1.08); }

/* Loading skeleton */
.skeleton { display: grid; gap: 12px; }
.sk { border-radius: 16px; background: linear-gradient(90deg, var(--surface) 25%, var(--raised) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.sk-title { width: 55%; height: 30px; border-radius: 10px; }
.sk-card { height: 156px; border-radius: 20px; }
.sk-row { height: 46px; }
.sk-block { height: 104px; }

/* Third-party sources sheet */
.sheet-sources { display: grid; gap: 10px; }
.source-row { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); }
.source-row .button-row .primary, .source-row .button-row .secondary { min-height: 40px; font-size: 14px; }

/* Integration guide */
.guide { display: grid; gap: 12px; }
.guide-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-check { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 15px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.guide-check-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.guide-check.ok { color: var(--text); }
.guide-check.ok .guide-check-dot { background: var(--ok); }
.guide-step, .guide-sample { position: relative; display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.guide-step-head { display: flex; align-items: center; gap: 12px; }
.guide-step h3, .guide-sample h3 { margin: 0; font: 600 15px/1.3 var(--display); letter-spacing: -.01em; }
.guide-step p { margin: 0; color: var(--muted); font-size: 14px; }
.guide-number { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font: 600 13px/1 var(--display); }
.guide-step.done .guide-number { background: var(--ok); color: var(--bg); }
.guide-step .secondary { justify-self: start; min-height: 40px; font-size: 14px; }
.code-box { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); }
.code-box .code { margin: 0; padding: 12px 14px 44px; overflow-x: auto; color: #ffd9c7; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.code-copy { position: absolute; right: 8px; bottom: 8px; min-height: 30px; padding: 0 12px; border-radius: 10px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text); font-size: 12.5px; font-weight: 600; }

#fields label.check-field { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--control); background: var(--sunken); color: var(--text); font-size: 14px; }
#fields label.check-field input { width: 22px; height: 22px; margin: 0; padding: 0; accent-color: var(--red); }
#fields label.check-field .field-note { grid-column: 2; }
/* Long code lines scroll inside their box instead of widening the sheet. */
#fields, .guide, .guide > *, .guide-step > *, .guide-sample > * { min-width: 0; }
.code-box { max-width: 100%; overflow: hidden; }
.code-box .code { max-width: 100%; }


/* Visual polish — preserve the current application's layout and state rules above. */
:root {
  --bg: #170e12;
  --surface: #291b22;
  --raised: #332029;
  --sunken: #170c14;
  --line: rgba(249, 200, 184, .09);
  --line-strong: rgba(255, 212, 187, .2);
  --text: #fff1e5;
  --muted: #c3a79f;
  --faint: #a0837b;
  --red: #ed735b;
  --red-press: #d35b48;
  --red-deep: #8d382e;
  --red-wine: #582a2e;
  --red-soft: rgba(233, 113, 83, .14);
  --red-text: #ffba99;
  --radius: 23px;
  --control: 14px;
  --dock: 64px;
}
body { background: radial-gradient(110% 50% at 75% -5%, #71352b45, transparent 70%) no-repeat, radial-gradient(100% 40% at -15% 58%, #6e253022, transparent 72%) no-repeat, var(--bg); }
main { padding-bottom: calc(var(--dock) + var(--safe-bottom) + 58px); }
header { height: 76px; }
.brand { gap: 10px; }
.brand-mark { width: 36px; height: 36px; border: 1px solid #ffc7a961; border-radius: 12px; background: linear-gradient(145deg, #ffae88, #ee755e 48%, #b84443); box-shadow: inset 0 1px 0 #ffe8cc8c, inset 0 -1px 0 #a23b3b4d, 0 6px 18px #d65b3924; color: #fff4e4; }
.brand-mark > svg { width: 27px; height: 27px; }
.brand-name { font-size: 18px; letter-spacing: -.045em; }
.header-actions { gap: 4px; margin-right: -4px; }
.icon-button { border-radius: 50%; color: #d9ad9b; background: linear-gradient(140deg, #ffe2bf0a, #ffd0aa02); box-shadow: inset 0 0 0 1px #f3c4a81a; }
.icon-button:active { background: #e9ad8124; }
.notification-count { box-shadow: 0 0 0 2px #201018; background: #d66650; }
.sync-line { color: #a98a80; margin-bottom: 20px; font-size: 11px; }
.title-row { margin-bottom: 22px; gap: 15px; }
.title-row h1 { font-size: 25px; line-height: 1.25; letter-spacing: -.035em; }
.title-row p { color: #bfa296; line-height: 1.6; }
.section-heading { margin-top: 31px; margin-bottom: 14px; }
.section-heading h2 { font-size: 15px; }
.section-heading .text-button { color: #d6a28c; font-size: 12px; }
.primary { color: #3c211f; border: 1px solid #ffcfab66; background: linear-gradient(135deg, #ffbb99, #fb9379 53%, #ee7d68); box-shadow: inset 0 1px 0 #ffeed8aa, inset 0 -1px 0 #a1433333, 0 6px 16px #ba52371a; }
.primary:active { background: linear-gradient(135deg, #f7aa88, #e77b63); }
.secondary { background: linear-gradient(140deg, #ffe2c510, #ffd7b004), var(--raised); box-shadow: inset 0 0 0 1px #f6c7a72a, inset 0 1px 0 #ffe4c70a; color: #efd0bc; }
.secondary:active { background: #57332d; }
.card { background: linear-gradient(140deg, #ffe1c508, transparent 75%), var(--surface); border-color: #f9c8b51c; box-shadow: inset 0 1px 0 #ffe8d00a, 0 8px 25px #08010712; }
.card h2 { line-height: 1.4; }
.card > p { line-height: 1.7; }
.label { color: #bea091; }
.metric-value { font-family: var(--body); font-weight: 600; font-size: 24px; letter-spacing: -.04em; }

/* A rich red balance card, with the large cream mark kept behind account data. */
.balance-hero, .balance-card { isolation: isolate; padding: 24px; border: 1px solid #ffc5a85c; border-radius: 26px; background: radial-gradient(ellipse at 92% 8%, #ffb27850, transparent 55%), radial-gradient(ellipse at 100% 100%, #85213b2e, transparent 65%), linear-gradient(120deg, #b43b35, #bb4038 54%, #d9684f); box-shadow: inset 0 1px 1px #ffe5bd59, inset 0 -1px 0 #7c28333b, 0 12px 32px #ba49331c; }
.balance-hero::before, .balance-card::before { z-index: 0; inset: 0; background: radial-gradient(ellipse at 110% 0, transparent 42%, #ffddba10 42.3%, transparent 42.6%, transparent 57%, #ffddba0d 57.3%, transparent 57.6%); }
.balance-hero > *, .balance-card > * { z-index: 1; }
.hero-top { position: relative; }
.wallet-label, .balance-card .label { color: #fff1dd; letter-spacing: .09em; font-size: 10.5px; }
.hero-brand { font-size: 11px; color: #ffe1c8; }
.hero-amount, .balance-large { font-family: var(--body); font-weight: 650; font-size: clamp(34px, 9.5vw, 47px); line-height: 1.15; letter-spacing: -.045em; color: #fff1dd; margin-top: 20px; margin-bottom: 24px; overflow-wrap: anywhere; }
.wallet-reserves { position: relative; justify-content: flex-start; gap: 10px 24px; padding-top: 16px; border-top: 1px solid #ffe0c32e; color: #ffe4cd; font-size: 11px; line-height: 1.7; }
.wallet-reserves b { display: block; color: #fff1dd; font-family: var(--body); font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -.025em; }
.balance-hero > .wallet-art { position: absolute; z-index: 0; right: -33px; top: -2px; display: grid; place-items: center; width: 188px; height: 220px; pointer-events: none; opacity: .32; }
.wallet-art .hero-brand-art { width: 100%; height: auto; max-height: 215px; overflow: visible; filter: drop-shadow(0 11px 10px #7c223033); }
.hero-actions { gap: 10px; margin-top: 12px; }
.hero-actions .primary { background: linear-gradient(135deg, #fff7e9, #ffe6c9); color: #7c332b; border-color: #fff3dc80; box-shadow: inset 0 1px 0 #fffcf3, 0 5px 15px #5e1a2224; }
.hero-actions .secondary { color: #f4d6c0; background: linear-gradient(140deg, #e59b6a14, #edbd9110), #352028; box-shadow: inset 0 0 0 1px #f2c19e2e, inset 0 1px 0 #ffe1bb15; }
.balance-card .primary { background: linear-gradient(135deg, #fff8e9, #ffe6c9); color: #7c332b; }
.balance-card .secondary { background: #7f2d3238; color: #fff1dd; box-shadow: inset 0 0 0 1px #ffddba47; }
.balance-card .button-row > :nth-child(3) { color: #ffe3cb; }
.quick-grid { gap: 10px; margin-top: 14px; }
.quick-action { padding: 17px 13px 16px; border-radius: 21px; background: linear-gradient(140deg, #f7c5a70c, transparent 75%), var(--surface); border-color: #f5c7b325; box-shadow: inset 0 1px 0 #ffe8cf0c, 0 6px 16px #0a02070d; }
.quick-top { gap: 7px; font-size: 11px; line-height: 1.3; }
.quick-top .pe { width: 21px; height: 21px; font-size: 17px; }
.quick-value { font-family: var(--body); margin-top: 16px; font-size: 30px; font-weight: 650; line-height: 1; letter-spacing: -.055em; color: #fff0de; }
.quick-caption { margin-top: 7px; color: #b29488; font-size: 11px; line-height: 1.45; }
.insight-grid { gap: 15px; margin-top: 18px; }
.activity-card { padding: 23px; }
.activity-card .resource-head { align-items: center; }
.activity-card h2 { font-size: 15px; }
.period-label { color: #b79a8b; font-size: 10.5px; padding-top: 0; }
.chart-legend { margin-top: 23px; margin-bottom: 9px; gap: 20px; }
.chart-legend span { color: #c4a697; font-size: 11px; }
.chart-legend span::before { width: 6px; height: 6px; background: #f39a78; }
.chart-legend .income span::before { background: #dac7a6; }
.chart-legend strong { font-family: var(--body); font-weight: 600; font-size: 24px; letter-spacing: -.045em; overflow-wrap: anywhere; }
.bar-spend { fill: #f39a78; }
.bar-income { fill: #dac7a6; }
.chart-day { fill: #b59787; }
.chart-details { font-size: 12px; }
.chart-details summary { font-size: 12px; color: #d4a58b; }
.chart-zero { background: #c8914d07; border-color: #ddb28a24; border-radius: 17px; padding-top: 27px; padding-bottom: 27px; }
.chart-zero p { color: #ecd1bc; }
.next-card { position: relative; isolation: isolate; overflow: hidden; padding: 25px; --text: #50332c; --muted: #896554; --faint: #9d735f; --line: #bc8c6b33; background: radial-gradient(ellipse at 95% -5%, #fffdf3c2, transparent 65%), linear-gradient(135deg, #fff0dd, #f3d6bc); border-color: #ffefd5aa; box-shadow: inset 0 1px 0 #fffaf1c9, 0 8px 24px #0d020b1c; color: var(--text); }
.next-card::before { content: ''; position: absolute; z-index: 0; top: -22px; right: -10px; width: 100px; height: 100px; border: 1px solid #dfad8547; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff9e8bd, #dfb48a52 54%, #bb775a4a); box-shadow: inset 0 1px 3px #fffbf27a; }
.next-card > * { position: relative; z-index: 1; }
.next-card .eyebrow { color: #9d6953; font-size: 9px; letter-spacing: .12em; margin-bottom: 24px; }
.next-card h2 { color: #50332c; font-size: 18px; line-height: 1.4; letter-spacing: -.025em; }
.next-card > p { color: #896554; font-size: 13px; line-height: 1.7; margin-top: 12px; }
.next-card .secondary { min-height: 44px; margin-top: 20px; color: #fff0da; background: linear-gradient(135deg, #a55740, #7e3e34); box-shadow: inset 0 0 0 1px #a9674c66, inset 0 1px 0 #e3a67933, 0 4px 10px #83432a12; font-size: 13px; }
.next-card .secondary:active { background: #783a31; }
.event-list { padding: 4px 21px; }
.event-row { padding-top: 17px; padding-bottom: 17px; }
.event-copy strong { font-size: 13px; color: #e9cdbb; }
.event-copy small { font-size: 11px; color: #ac8c7f; margin-top: 4px; }
.event-row .text-button { font-size: 11px; color: #d0a18a; }
.event-dot { background: #f2b38a; }

/* Keep all current filters, guide, payout and form rules; only surface styling changes. */
.resource-card { padding: 21px; }
.resource-card .resource-facts { margin-top: 18px; border-color: #edc3a61c; }
.resource-facts .card { background: transparent; box-shadow: none; }
.resource-link { color: #e2aa8d; }
.resource-search { height: 48px; border-radius: 15px; background: #21141b; border-color: #f0c6aa24; }
.resource-search:focus-within { border-color: #e8b38a66; box-shadow: 0 0 0 3px #e58f600a; }
.filter-chip { min-height: 38px; padding-left: 14px; padding-right: 14px; box-shadow: inset 0 0 0 1px #f3c3a621; }
.filter-chip[aria-pressed="true"] { color: #ffe6cb; background: linear-gradient(135deg, #b76a4738, #cf6a4e24); box-shadow: inset 0 0 0 1px #f2bd9145, inset 0 1px 0 #ffddb51a; }
.client-avatar { border: 1px solid #f3be922e; border-radius: 13px; background: linear-gradient(140deg, #f8b27e24, #c7654b1c), var(--red-wine); box-shadow: inset 0 1px 0 #ffdfbb17; }
.badge { box-shadow: inset 0 0 0 1px #ebc1a921; }
.badge.pending, .badge.request_pending, .badge.invoice_pending { background: #b78a4b0b; }
.info-box { background: linear-gradient(140deg, #efbc8610, transparent), var(--surface); border-color: #f3c4a920; line-height: 1.7; }
.empty-symbol { background: linear-gradient(140deg, #efb37e20, #ab51401a); box-shadow: inset 0 0 0 1px #f0c4a525, inset 0 1px 0 #ffe4c017; }
.auth-note { background: linear-gradient(135deg, #d9925e17, transparent), var(--surface); border-color: #e7b99530; box-shadow: inset 0 1px 0 #ffe5c70a; }
#notice { border-radius: 15px; box-shadow: inset 0 1px 0 #ffe2c50a; }
.inbox-item.unread { background: linear-gradient(130deg, #b3783b17, transparent 75%), var(--surface); border-color: #dc9c6c40; }
.source-row, .guide-step, .guide-sample { background: linear-gradient(145deg, #f9ceaa08, transparent), var(--raised); border-color: #f5c6a71a; }
.guide-check { box-shadow: inset 0 0 0 1px #f2c5a326; }
.code-box { border-color: #eac09e24; }

/* The existing nav-indicator remains the sole source of selected-tab position. */
.dock { left: 0; right: 0; bottom: calc(13px + var(--safe-bottom)); width: calc(100% - 28px); max-width: 550px; margin: 0 auto; padding: 6px; border: 1px solid #ffd5b03d; border-radius: 27px; background: linear-gradient(150deg, #ffe5c51c, #ffd1aa05 55%, #f3be9e0c), #2b1b25f5; box-shadow: inset 0 1px 1px #fff0d34d, inset 0 -1px 0 #ffc69d12, 0 14px 34px #08010880; }
.dock::before { content: ''; position: absolute; top: -1px; height: 1px; left: 14%; right: 14%; background: linear-gradient(90deg, transparent, #ffdfb891, transparent); pointer-events: none; }
#nav { height: var(--dock); isolation: isolate; }
#nav button { gap: 6px; color: #ac8c7f; font-size: 10px; border-radius: 21px; }
#nav button.selected { color: #ffe2bf; }
#nav button svg { width: 21px; height: 21px; }
.nav-indicator { z-index: -1; top: 0; height: 100%; }
.nav-indicator::before { width: calc(100% - 4px); height: calc(100% - 2px); margin: 1px 2px; border-radius: 21px; background: linear-gradient(140deg, #ffd0a72e, #e8946d18 60%, #f7bb8b0d); box-shadow: inset 0 0 0 1px #ffd3a747, inset 0 1px 1px #ffe8c966, 0 3px 9px #13040b21; }
#nav button.selected svg { transform: translateY(-1px) scale(1.03); }
body.keyboard-open .dock { transform: translateY(150%); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .dock { background-color: #2b1b25c9; backdrop-filter: blur(26px) saturate(145%); -webkit-backdrop-filter: blur(26px) saturate(145%); }
}
dialog { background: linear-gradient(145deg, #3b2529, #25171f); border-top-color: #f4c59c4d; border-radius: 27px 27px 0 0; box-shadow: inset 0 1px 0 #ffecd316, 0 -8px 50px #0a030722; }
dialog::backdrop { background: #10070bba; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dialog-head { padding-top: 23px; padding-bottom: 18px; }
.dialog-actions { background: #21131ce6; border-top-color: #edc19f24; }
#fields input:not([type="checkbox"]), #fields select { background: #150a1257; border-color: #f1c09d2e; box-shadow: inset 0 2px 5px #0b030711; }
#fields input:focus, #fields select:focus { border-color: #f2b68a8c; }
.secret-value { background: #150a13a6; border-color: #f0be9a33; }
footer { margin-top: 37px; padding-top: 23px; border-color: #eab79417; color: #9c7b70; font-size: 11px; }
footer .brand-name { color: #c09781; }
@media (hover: hover) {
  .quick-action:hover { background-color: #36212b; border-color: #e9b58b45; }
  .icon-button:hover { background: #efb58115; }
  .primary:hover { box-shadow: inset 0 1px 0 #fff2d9bb, 0 8px 20px #e184592b; }
}
@media (min-width: 480px) {
  main { padding-left: 22px; padding-right: 22px; }
  .balance-hero, .balance-card { padding: 27px; }
  .hero-amount, .balance-large { font-size: 47px; }
  .balance-hero > .wallet-art { width: 230px; right: -10px; top: -13px; height: 245px; opacity: .38; }
  .wallet-art .hero-brand-art { max-height: 245px; }
  .card { padding: 22px; }
  .resource-facts .card { padding: 14px 0; }
  .resource-facts .card + .card { padding-left: 16px; }
  .event-list { padding: 4px 22px; }
  .next-card { padding: 26px; }
}
@media (max-width: 350px) {
  main { padding-left: 14px; padding-right: 14px; }
  .filter-chips { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .title-row h1 { font-size: 23px; }
  .title-row p { font-size: 13px; }
  .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .quick-action { padding: 15px 10px; }
  .quick-top { flex-direction: column; align-items: flex-start; gap: 7px; font-size: 10px; }
  .quick-value { font-size: 27px; margin-top: 14px; }
  .quick-caption { font-size: 10px; line-height: 1.4; }
  .balance-hero, .balance-card { padding: 21px; }
  .hero-amount, .balance-large { font-size: 34px; }
  .balance-hero > .wallet-art { right: -55px; opacity: .27; }
  .wallet-reserves { gap: 10px 19px; }
  .hero-actions { grid-template-columns: 1fr; }
  .activity-card { padding: 19px; }
  .activity-card h2 { font-size: 14px; }
  .period-label { font-size: 10px; }
  .chart-legend strong { font-size: 22px; }
  .next-card { padding: 22px; }
  .next-card h2 { font-size: 17px; }
  #nav button { font-size: 9px; }
}
@media (prefers-reduced-transparency: reduce) {
  .dock { background: #33202a; backdrop-filter: none; -webkit-backdrop-filter: none; }
  dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---- Statistics ---- */
.period-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 14px; padding: 4px; border-radius: 15px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
.period-switch button { min-height: 38px; border-radius: 11px; color: var(--muted); font-size: 14px; font-weight: 600; transition: background .25s, color .25s; }
.period-switch button.on { background: var(--raised); color: var(--text); box-shadow: 0 2px 10px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--line-strong); }
.period-switch + .filter-chips { margin-top: 12px; }
.stats-body { display: grid; gap: 12px; margin-top: 6px; transition: opacity .25s; }
.stats-body.is-loading { opacity: .45; pointer-events: none; }
.stats-body > .section-heading { margin-top: 10px; }
.stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-tile { position: relative; display: grid; align-content: start; gap: 2px; min-height: 104px; padding: 16px 16px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; animation: tile-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.stat-tile:nth-child(2) { animation-delay: .05s; } .stat-tile:nth-child(3) { animation-delay: .1s; } .stat-tile:nth-child(4) { animation-delay: .15s; }
.stat-tile::before { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--tile-glow), transparent 70%); }
.sell .stat-tile { --tile: #ff8c6a; --tile-glow: rgba(255, 122, 82, .22); }
.buy .stat-tile { --tile: #f2b45c; --tile-glow: rgba(242, 180, 92, .2); }
.stat-value { position: relative; color: var(--tile); font: 500 21px/1.15 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-label { position: relative; color: var(--muted); font-size: 13px; }
.spark { position: absolute; right: 10px; bottom: 10px; width: 84px; height: 26px; opacity: .9; }
.spark ~ .stat-label { padding-right: 70px; }
.spark-line { fill: none; stroke: var(--tile); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s .2s ease-out forwards; }
.spark-fill { fill: var(--tile); opacity: .12; }
@keyframes tile-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

.chart-card { padding-bottom: 12px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-toggle { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--sunken); }
.mini-toggle button { min-height: 28px; padding: 0 10px; border-radius: 8px; color: var(--faint); font-size: 12.5px; font-weight: 600; }
.mini-toggle button.on { background: var(--raised); color: var(--text); }
.chart-key { display: flex; gap: 16px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.chart-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; vertical-align: -1px; }
.key-sell::before { background: linear-gradient(180deg, #ff8c6a, #f04a2a); }
.key-buy::before { background: #f2b45c; }
.chart-wrap { position: relative; margin: 8px -6px 0; }
.big-chart { display: block; width: 100%; height: auto; touch-action: pan-y; overflow: visible; }
.grid-line { stroke: var(--line); stroke-width: 1; }
.axis-label { fill: var(--faint); font: 500 9.5px var(--body); }
.chart-empty { fill: var(--faint); font: 500 12px var(--body); }
.bar-buy { fill: #f2b45c; opacity: .85; transform-box: fill-box; transform-origin: bottom; animation: grow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes grow { from { transform: scaleY(0); } }
.line-sell { fill: none; stroke: #ff7a52; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 4px 8px rgba(240, 74, 42, .45)); animation: draw 1.2s ease-out forwards; }
.area-sell { opacity: 0; animation: fade-in .8s .5s ease-out forwards; }
.dot-sell { fill: var(--bg); stroke: #ff8c6a; stroke-width: 2; opacity: 0; animation: fade-in .3s 1s forwards; }
@keyframes fade-in { to { opacity: 1; } }
.chart-guide { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-tip { position: absolute; top: 4px; left: var(--x, 50%); transform: translateX(8px); display: grid; gap: 2px; min-width: 150px; padding: 9px 11px; border-radius: 12px; background: rgba(37, 26, 22, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--line-strong); font-size: 12.5px; pointer-events: none; }
.chart-tip.flip { transform: translateX(calc(-100% - 8px)); }
.chart-tip b { font-size: 13px; }
.tip-sell { color: #ff8c6a; } .tip-buy { color: #f2b45c; }

.breakdown-card { display: grid; gap: 12px; }
.break-row { display: grid; gap: 6px; }
.break-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.break-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.break-value { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.meter { height: 8px; border-radius: 8px; background: var(--sunken); overflow: hidden; }
.meter-fill { display: block; height: 100%; width: var(--w); border-radius: inherit; animation: fill-in .9s cubic-bezier(.2, .8, .2, 1) both; }
.meter-fill.sell { background: linear-gradient(90deg, #f04a2a, #ff8c6a); }
.meter-fill.buy { background: linear-gradient(90deg, #d98c2b, #f2b45c); }
@keyframes fill-in { from { width: 0; } }
.table-scroll { margin: 10px -18px 0; padding: 0 18px; overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-table th { padding: 8px 10px 8px 0; color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.stats-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
.stats-table tr.quiet td { color: var(--faint); }
.stats-table td:first-child { font-weight: 600; }


/* Premium glyphs share stable slots, so loading an animation never moves text. */
.pe.action-emoji { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.primary > span:not(.pe), .secondary > span:not(.pe) { min-width: 0; }
.title-row h1 .pe { width: 34px; height: 34px; padding: 0; }
.title-row h1 svg.pe { padding: 4px; border-radius: 11px; background: linear-gradient(140deg, #ffb37b22, #e9755b0a); box-shadow: inset 0 0 0 1px #ffbf9536, inset 0 1px 0 #ffe7c825; }
.quick-top .pe { width: 30px; height: 30px; padding: 0; border-radius: 10px; }
.quick-top svg.pe { padding: 4px; background: linear-gradient(145deg, #ffb6832e, #dd70541c); box-shadow: inset 0 0 0 1px #fbbb8b35, inset 0 1px 0 #ffe7c72b; }
.quick-value { margin-top: 12px; }
.empty-symbol .pe { width: 34px; height: 34px; }
.icon-button .pe { width: 24px; height: 24px; transition: transform 200ms cubic-bezier(.2, .8, .2, 1), opacity 180ms; }
.icon-button .pe-live { overflow: visible; }
.spinning > .pe { animation: spin 850ms linear infinite; }
.spinning > .pe svg { animation: none; }
#nav button { transition: color 180ms, background-color 180ms, transform 180ms cubic-bezier(.2, .8, .2, 1); }
#nav button > .pe { width: 25px; height: 25px; flex: none; transition: transform 260ms cubic-bezier(.2, .8, .2, 1), opacity 180ms; opacity: .72; }
#nav button.selected > .pe { opacity: 1; transform: translateY(-1px) scale(1.06); }
#nav button > .pe svg, #nav button.selected > .pe svg { transform: none; }
#nav button.selected > svg.pe { transform: translateY(-1px) scale(1.06); }
.nav-indicator { transition: transform 360ms cubic-bezier(.2, .85, .25, 1), opacity 180ms; }
.primary, .secondary, .icon-button, .filter-chip, .quick-action, .text-button, .motion-toggle { transition: transform 180ms cubic-bezier(.2, .8, .2, 1), background-color 180ms, border-color 180ms, box-shadow 180ms, color 180ms; }
.primary:active:not(:disabled), .secondary:active:not(:disabled), .filter-chip:active:not(:disabled), .quick-action:active:not(:disabled) { transform: scale(.975); }
.icon-button:active:not(:disabled) { transform: scale(.92); }
.text-button:active:not(:disabled) { transform: translateY(1px); }
.button-press:not(:disabled) { animation: boostly-press 280ms cubic-bezier(.2, .8, .2, 1); }
.emoji-replay > .pe, .emoji-replay .action-emoji { animation: boostly-emoji-pop 360ms cubic-bezier(.2, .8, .2, 1); }

/* Only the decorative mark moves; account amounts and surfaces remain steady. */
.wallet-art .hero-brand-art { transform-origin: 62% 57%; animation: boostly-float 7200ms ease-in-out infinite; }
.balance-hero::after, .balance-card::after { z-index: 2; inset: auto; top: -30%; left: -55%; width: 36%; height: 160%; background: linear-gradient(90deg, transparent, #fff1d51a 40%, #fff1d538 55%, transparent); background-size: 100% 100%; background-position: 0 0; opacity: 0; transform: translate3d(0, 0, 0) skewX(-20deg); animation: boostly-sheen 9200ms 600ms ease-in-out infinite; }
#content > * { animation-duration: 340ms; animation-delay: calc(min(var(--i, 0), 4) * 35ms); }
dialog[open] { animation-duration: 360ms; }
#notice.pop { animation-duration: 300ms; }
.badge.pending::before, .badge.request_pending::before, .badge.invoice_pending::before { animation: none; }
progress::-webkit-progress-value, progress::-moz-progress-bar { animation-duration: 380ms; animation-delay: 0ms; }

.appearance-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 16px; border: 1px solid #f5c6a721; border-radius: 18px; background: linear-gradient(135deg, #efb5860d, transparent 75%), var(--surface); }
.appearance-row > :first-child:not(button) { flex: 1; min-width: 145px; }
.appearance-row strong { display: block; font-size: 14px; font-weight: 600; }
.appearance-row p, .appearance-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 8px; min-height: 40px; min-width: 100px; padding: 0 13px; border: 1px solid #f5c4a62e; border-radius: 22px; background: #1b1119; color: #c4a89b; font-size: 12px; font-weight: 650; }
.motion-toggle::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; opacity: .6; }
.motion-toggle[aria-pressed="true"] { color: #563029; border-color: #ffd3af88; background: linear-gradient(135deg, #ffd1ab, #f39477); box-shadow: inset 0 1px 0 #fff0dca6, 0 4px 12px #b85b3520; }
.motion-toggle[aria-pressed="true"]::before { opacity: 1; }
.motion-toggle .pe { width: 19px; height: 19px; }

@keyframes boostly-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(0, -6px, 0) rotate(2deg); }
}
@keyframes boostly-sheen {
  0%, 72% { opacity: 0; transform: translate3d(0, 0, 0) skewX(-20deg); }
  76% { opacity: .8; }
  87% { opacity: .8; }
  92%, 100% { opacity: 0; transform: translate3d(560%, 0, 0) skewX(-20deg); }
}
@keyframes boostly-press {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(.965); }
  75% { transform: scale(1.012); }
}
@keyframes boostly-emoji-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-2px) scale(1.12) rotate(-5deg); }
  72% { transform: translateY(0) scale(.98) rotate(2deg); }
}
@media (min-width: 351px) and (max-width: 479px) {
  .quick-top { gap: 5px; font-size: 10px; }
  .quick-top .pe { width: 26px; height: 26px; border-radius: 9px; }
}
@media (max-width: 350px) {
  .quick-value { margin-top: 10px; }
  #nav button > .pe { width: 23px; height: 23px; }
  .hero-actions .action-emoji { width: 18px; height: 18px; }
}
@media (hover: hover) {
  .icon-button:hover > .pe { transform: translateY(-1px) scale(1.08); }
  .motion-toggle:hover { border-color: #ffd3ac70; }
}
/* Statistics tiles keep their grid tracks within a narrow Telegram viewport. */
.stats-body { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.stats-body > *, .stat-tiles, .stat-tile, .chart-card, .breakdown-card { min-width: 0; }
.stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-body .section-heading { flex-wrap: wrap; gap: 6px 12px; }
.stats-body .section-heading h2 { min-width: 0; overflow-wrap: anywhere; }
.stats-body .section-heading small { font-size: 11px; }
.stat-tile { gap: 5px; background: linear-gradient(145deg, #fbc69f0d, transparent 80%), var(--surface); box-shadow: inset 0 0 0 1px #efc2a825, inset 0 1px 0 #ffe5c712, 0 5px 15px #12060c17; animation-duration: 320ms; }
.stat-value { font-family: var(--body); font-size: 26px; font-weight: 650; letter-spacing: -.045em; }
.stat-label { font-size: 12px; overflow-wrap: anywhere; }
.chart-head { flex-wrap: wrap; }
.chart-head h2 { min-width: 0; }
.chart-key { flex-wrap: wrap; gap: 6px 16px; font-size: 12px; }
.chart-tip { max-width: 100%; min-width: 140px; border: 1px solid #f0c5a733; background: #34212bf5; box-shadow: inset 0 1px 0 #ffdfbf1a, 0 8px 24px #0b030947; }
.period-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; background: #170d15; box-shadow: inset 0 0 0 1px #edc3a91f; }
.period-switch button { transition: background-color 180ms, color 180ms, box-shadow 180ms, transform 180ms; font-size: 13px; }
.period-switch button.on { background: linear-gradient(140deg, #edb18d26, #e4967814), #362029; color: #ffe0c4; box-shadow: inset 0 0 0 1px #f6c5a040, inset 0 1px 0 #ffe6ca20, 0 2px 8px #10060c33; }
.table-scroll { min-width: 0; max-width: 100%; width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.line-sell, .spark-line, .meter-fill { animation-duration: 380ms; animation-delay: 0ms; }
.bar-buy { animation-duration: 320ms; animation-delay: calc(min(var(--i, 0), 3) * 18ms); }
.area-sell { animation-duration: 300ms; animation-delay: 0ms; }
.dot-sell { animation-duration: 220ms; animation-delay: 120ms; }
@media (max-width: 350px) {
  .stat-tile { padding-left: 13px; padding-right: 13px; }
  .stat-value { font-size: 23px; }
  .hero-actions .primary, .hero-actions .secondary { gap: 7px; }
}
@media (min-width: 351px) and (max-width: 479px) {
  .hero-actions .primary, .hero-actions .secondary { padding-left: 10px; padding-right: 10px; gap: 6px; font-size: 13px; }
}

/* Visibility and reduced-motion settings also apply to pseudo-elements. */
body.app-paused *, body.app-paused *::before, body.app-paused *::after { animation-play-state: paused !important; transition: none !important; }
body.still *, body.still *::before, body.still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.still .line-sell, body.still .spark-line { stroke-dashoffset: 0; }
body.still .area-sell, body.still .dot-sell { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .line-sell, .spark-line { stroke-dashoffset: 0; }
  .area-sell, .dot-sell { opacity: 1; }
}

/* ---- Connection self-test ---- */
.selftest { display: grid; gap: 14px; }
.st-head { display: flex; align-items: center; gap: 16px; }
.st-ring { --p: 0; display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(closest-side, var(--surface) 78%, transparent 80% 100%), conic-gradient(var(--red-text) calc(var(--p) * 1%), var(--sunken) 0); }
.st-ring strong { font: 500 18px/1 var(--display); }
.st-head b { display: block; font-size: 17px; }
.st-head small { color: var(--muted); }
.st-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.st-list li { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--sunken); }
.st-list b { display: block; font-size: 14.5px; }
.st-list small { display: block; color: var(--muted); font-size: 13px; }
.st-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--faint); }
.st-ok .st-dot { background: var(--ok); } .st-warn .st-dot { background: var(--warn); } .st-fail .st-dot { background: var(--red); }
.st-fix { margin: 6px 0 0; color: var(--text); font-size: 13px; }
.st-fix::before { content: "→ "; color: var(--red-text); }


/* Saturated Boostly red: preserve layout, branded glyphs and optional motion. */
:root {
  --bg: #110b0f;
  --surface: #201418;
  --raised: #2c1820;
  --sunken: #10090d;
  --line: rgba(255, 171, 150, .12);
  --line-strong: rgba(255, 169, 147, .25);
  --text: #fff4e8;
  --muted: #c5aca7;
  --faint: #9c8380;
  --red: #ef3b27;
  --red-press: #b61925;
  --red-deep: #a61924;
  --red-wine: #651320;
  --red-soft: rgba(239, 59, 39, .13);
  --red-text: #ff8873;
  --ok: #83d5a3;
  --warn: #f2bd63;
}
body { background: radial-gradient(105% 48% at 82% -7%, #b31d252b, transparent 71%) no-repeat, radial-gradient(95% 36% at -20% 58%, #86132214, transparent 74%) no-repeat, var(--bg); }
::selection { background: #b52128; color: #fff4e8; }
.brand-mark { border-color: #ff776257; background: linear-gradient(145deg, #f3432d, #df2425 52%, #a71428); box-shadow: inset 0 1px 0 #ffb28c6b, inset 0 -1px 0 #71102755, 0 6px 18px #da211e24; color: #fff4e8; }
.icon-button { color: #d2b2aa; background: linear-gradient(140deg, #f06b4209, transparent), #1b1116; box-shadow: inset 0 0 0 1px #ffb39919; }
.icon-button:active { background: #5b17232f; }
.notification-count { background: #d52b25; box-shadow: 0 0 0 2px var(--bg); }
.sync-line { color: #a58c87; }
.title-row p { color: #bfa6a1; }
.section-heading .text-button { color: #ff8873; }
.primary, .hero-actions .primary, .balance-card .primary {
  color: #fff4e8;
  border-color: #ff79625c;
  background: linear-gradient(135deg, #d32b25, #c52128 57%, #b61925);
  box-shadow: inset 0 1px 0 #ffb4944d, inset 0 -1px 0 #7f122b5c, 0 6px 18px #cf251e21;
}
.primary:active, .hero-actions .primary:active, .balance-card .primary:active { background: linear-gradient(135deg, #bb2024, #9f1525); }
.primary.danger { color: #ff9a89; background: #64192324; border-color: #e84b4570; box-shadow: inset 0 0 0 1px #e84b452b; }
.secondary, .hero-actions .secondary { color: #f5ded4; background: linear-gradient(140deg, #ff6c4410, transparent), var(--raised); box-shadow: inset 0 0 0 1px #ed796037, inset 0 1px 0 #ffb39112; }
.secondary:active, .hero-actions .secondary:active { background: #461a25; }
.card { border-color: #eb72541e; background: linear-gradient(140deg, #ed4e3609, transparent 75%), var(--surface); box-shadow: inset 0 1px 0 #ffc4a70a, 0 8px 25px #0501041f; }
.label { color: #bda09a; }

.balance-hero, .balance-card { border-color: #ff6c4b7a; background: radial-gradient(ellipse at 93% 4%, #ff4e2c4a, transparent 57%), radial-gradient(ellipse at 100% 100%, #76102238, transparent 65%), linear-gradient(118deg, #c82124, #d52b25 54%, #ed3b27 78%, #b91a29); box-shadow: inset 0 1px 1px #ffb58b6b, inset 0 -1px 0 #6c0d2747, 0 12px 32px #d52b251f; }
.balance-hero::before, .balance-card::before { background: radial-gradient(ellipse at 110% 0, transparent 42%, #fff0d511 42.3%, transparent 42.6%, transparent 57%, #fff0d50e 57.3%, transparent 57.6%); }
.wallet-label, .balance-card .label, .hero-amount, .balance-large, .wallet-reserves b { color: #fff4e8; }
.hero-brand { color: #fff4e8; background: #74102066; border-radius: 7px; padding: 4px 6px; margin: -4px -6px; }
.wallet-reserves { color: #fff0e0; border-top-color: #ffe1c936; }
.wallet-art .hero-brand-art { filter: drop-shadow(0 11px 10px #7c0c2438); }
.balance-card .secondary { color: #fff4e8; background: #7310244d; box-shadow: inset 0 0 0 1px #ffb39652; }
.balance-card .button-row > :nth-child(3) { color: #fff0de; }
.quick-action { border-color: #ed765b25; background: linear-gradient(140deg, #e64f3510, transparent 75%), var(--surface); box-shadow: inset 0 1px 0 #ffbd9b0f, 0 6px 16px #05010417; }
.quick-top { color: #d0b0a9; }
.quick-top svg.pe, .title-row h1 svg.pe { color: #ff8873; background: linear-gradient(145deg, #f04b2e30, #be20261c); box-shadow: inset 0 0 0 1px #ff75533b, inset 0 1px 0 #ffb48b24; }
.quick-value { color: #fff4e8; }
.quick-caption { color: #b4978f; }
.period-label, .chart-legend span, .chart-day { color: #b99b93; }
.chart-day { fill: #b99b93; }
.chart-details summary { color: #ff8873; }
.chart-zero { background: #bd201c07; border-color: #e95d402b; }
.chart-zero p { color: #f0d9ce; }

/* The next step uses the brand's deep red, rather than a large beige panel. */
.next-card { --text: #fff4e8; --muted: #e8c6bf; --faint: #daa9a0; --line: #f49b8033; color: #fff4e8; border-color: #ee58444f; background: radial-gradient(ellipse at 98% -8%, #ef3b273b, transparent 64%), linear-gradient(135deg, #901a25, #681420); box-shadow: inset 0 1px 0 #ff9a713d, inset 0 -1px 0 #3c0b1c33, 0 8px 24px #07010629; }
.next-card::before { border-color: #ff8a6342; background: radial-gradient(circle at 35% 25%, #ef4b3047, #b71c292b 54%, #5b11232e); box-shadow: inset 0 1px 3px #ffbb8a35; }
.next-card .eyebrow { color: #ffc2b0; }
.next-card h2 { color: #fff4e8; }
.next-card > p { color: #edcdc5; }
.next-card .secondary { color: #fff4e8; background: linear-gradient(135deg, #461120c2, #2d0d19cc); box-shadow: inset 0 0 0 1px #ff9a764f, inset 0 1px 0 #ffd2a919, 0 4px 10px #32051233; }
.next-card .secondary:active { background: #3e0c1b; }
.event-copy strong { color: #f2d8cc; }
.event-copy small { color: #ad8f87; }
.event-row .text-button { color: #ff8873; }
.event-dot { background: #f45a3e; }
.resource-link { color: #ff8b77; }
.resource-search { background: #170f13; border-color: #ea765c2b; }
.resource-search:focus-within { border-color: #ef543a80; box-shadow: 0 0 0 3px #ef3b270c; }
.filter-chip { color: #c7aaa3; box-shadow: inset 0 0 0 1px #d876602d; }
.filter-chip[aria-pressed="true"] { color: #fff0e3; background: linear-gradient(135deg, #a91d2a57, #cf302b35); box-shadow: inset 0 0 0 1px #fa6f4d70, inset 0 1px 0 #ffac821c; }
.client-avatar { color: #ffe5d5; background: linear-gradient(140deg, #eb45212b, #b5152c27), #571320; border-color: #ef79512e; box-shadow: inset 0 1px 0 #ffbb8c1c; }
.badge { box-shadow: inset 0 0 0 1px #e1a18d25; }
.badge.pending, .badge.request_pending, .badge.invoice_pending { background: #a673170e; color: #e8c79a; }
.badge.rejected { color: #ff9a89; box-shadow: inset 0 0 0 1px #ef51404f; }
.info-box, .auth-note { background: linear-gradient(140deg, #cd292b10, transparent 80%), var(--surface); border-color: #ed795b2b; }
.empty-symbol { background: linear-gradient(140deg, #e8332326, #a515291a); box-shadow: inset 0 0 0 1px #f067453b, inset 0 1px 0 #ffb68c1c; }
.reason-note, #notice[data-kind="error"] { color: #ffd4c9; background: #b51b2924; border-color: #f4674e6b; }
.inbox-item.unread { background: linear-gradient(130deg, #c4262920, transparent 75%), var(--surface); border-color: #f0643e4f; }
.source-row, .guide-step, .guide-sample { border-color: #ea7d5f20; background: linear-gradient(145deg, #f06c4508, transparent), var(--raised); }
.code-box { border-color: #e8815b2b; }
.appearance-row { border-color: #ea765727; background: linear-gradient(135deg, #d72b1e12, transparent 75%), var(--surface); }
.motion-toggle { color: #c6aaa1; background: #180e13; border-color: #d5775c38; }
.motion-toggle[aria-pressed="true"] { color: #fff4e8; border-color: #ff79585c; background: linear-gradient(135deg, #d32b25, #ac1728); box-shadow: inset 0 1px 0 #ffad8059, 0 4px 12px #b3162524; }

/* Neutral graphite glass keeps the dock distinct from the red action fields. */
.dock { border-color: #c16a583d; background: linear-gradient(150deg, #e3765310, transparent 55%, #e3654506), #1c1419f5; box-shadow: inset 0 1px 1px #f8c2a333, inset 0 -1px 0 #b85b4514, 0 14px 34px #03010399; }
.dock::before { background: linear-gradient(90deg, transparent, #ed795e75, transparent); }
#nav button { color: #a88d85; }
#nav button.selected { color: #fff4e8; }
.nav-indicator::before { background: linear-gradient(140deg, #e039294a, #b31d2c2e 60%, #df382418); box-shadow: inset 0 0 0 1px #f46d486b, inset 0 1px 1px #ffad7952, 0 3px 9px #0a02071f; }
dialog { border-top-color: #e766434f; background: linear-gradient(145deg, #30171e, #1c1218); box-shadow: inset 0 1px 0 #ffb88d1a, 0 -8px 50px #05010438; }
dialog::backdrop { background: #080307c9; }
.dialog-actions { background: #180e14f0; border-top-color: #d96b4d29; }
#fields input:not([type="checkbox"]), #fields select { background: #100a0e91; border-color: #d56f543d; box-shadow: inset 0 2px 5px #03010226; }
#fields input:focus, #fields select:focus { border-color: #ee664880; }
.secret-value { background: #10090db3; border-color: #df714d3d; }
.stat-tile { background: linear-gradient(145deg, #e74a2c0f, transparent 80%), var(--surface); box-shadow: inset 0 0 0 1px #dd705629, inset 0 1px 0 #ffb89012, 0 5px 15px #08020624; }
.chart-tip { background: #28171ef5; border-color: #e7785040; box-shadow: inset 0 1px 0 #ffb9901a, 0 8px 24px #03010466; }
.period-switch { background: #100a0e; box-shadow: inset 0 0 0 1px #d5796029; }
.period-switch button.on { color: #fff4e8; background: linear-gradient(140deg, #ad202a80, #9e1b296b), #32101b; box-shadow: inset 0 0 0 1px #eb6d4861, inset 0 1px 0 #ffaf8526, 0 2px 8px #07010542; }
footer { color: #9c8380; border-color: #c776601a; }
footer .brand-name { color: #c5aaa0; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .dock { background-color: #1c1419db; }
}
@media (hover: hover) {
  .primary:hover { box-shadow: inset 0 1px 0 #ffb4945c, 0 8px 20px #df2d222b; }
  .quick-action:hover { background-color: #2a171e; border-color: #ee5b3c59; }
  .icon-button:hover { background: #d92b251c; }
  .motion-toggle:hover { border-color: #ff805a7a; }
}
@media (prefers-reduced-transparency: reduce) {
  .dock { background: #1c1419; }
}