/* Shared calm interface layer. Load after page styles and before motion.css.
   Only colour, material and interaction appearance change here; page geometry,
   typography, visibility rules and authentic brand/crypto artwork stay intact. */
:root {
  --bg: #111315;
  --surface: #181b1e;
  --surface-raised: #1d2024;
  --surface-inset: #141719;
  --text: #e6e8e5;
  --muted: #b4b9c1;
  --subtle: #969da6;
  --line: rgb(255 255 255 / .08);
  --line-strong: rgb(255 255 255 / .12);
  --line-selected: rgb(255 255 255 / .22);
  --focus: #d7dcd8;
  --action: #e6e8e5;
  --action-hover: #eceeeb;
  --action-text: #171b18;
  --yellow: #d6be77;
  --credit: #bacbbf;
  --pending: #c9c0a6;
  --danger: #d2aaa6;
}

html, body, body.auth-page { background: var(--bg); color: var(--text); }

/* Solid, closely related surfaces replace the competing blue-black materials.
   The common scope intentionally matches the specificity of page panel rules. */
.glass,
.sidebar,
.app-shell .main-content :is(
  .panel, .summary-card, .operations-section, .balance-panel,
  .site-topup-panel, .site-topup-summary, .commerce-summary,
  .order-overview, .order-progress, .order-receipt, .order-missing
),
.auth-page .auth-panel {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.profile-menu,
.settings-dialog,
.auth-legal-dialog {
  color: var(--text);
  background: var(--surface-raised);
  border-color: var(--line-strong);
  box-shadow: 0 16px 48px rgb(0 0 0 / .22);
}
.settings-dialog::backdrop, .auth-legal-dialog::backdrop {
  background: rgb(0 0 0 / .6);
}
.settings-page .settings-password-panel {
  background: var(--surface-inset);
  border-color: var(--line);
}
.avatar, .settings-avatar, .referral-invitation-avatar {
  color: var(--text);
  background: var(--surface-raised);
  border-color: var(--line-strong);
}

/* White navigation remains selected, with one quiet edge and no halo. */
.sidebar .nav-link {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}
.sidebar .nav-link:hover {
  color: var(--text);
  background: rgb(255 255 255 / .035);
  border-color: var(--line-strong);
}
.sidebar .nav-link.active {
  color: var(--text);
  background: rgb(255 255 255 / .055);
  border-color: var(--line-selected);
  box-shadow: none;
}
.sidebar .nav-link.active .icon { filter: none; }
.brand, .card-brand, .order-preview-brand { color: var(--text); }
.brand span, .card-brand span, .order-preview-brand > span {
  color: var(--yellow);
  text-shadow: none;
}
.utility-nav { border-top-color: var(--line); }
.quick-balance, .quick-balance:hover { border-color: var(--line-strong); }
.quick-balance strong { color: var(--text); }
.quick-balance-plus {
  color: var(--action-text);
  background: var(--action);
}
.quick-balance:hover .quick-balance-plus { transform: none; }
.profile-trigger .icon { color: var(--muted); }
.profile-menu a:hover { background: rgb(255 255 255 / .045); }

/* Primary actions are off-white; gold is reserved for the small CHIK marks. */
body .button-primary, body .skip-link {
  color: var(--action-text);
  background: var(--action);
  border-color: transparent;
  box-shadow: none;
}
body .button-primary:hover {
  color: var(--action-text);
  background: var(--action-hover);
  border-color: transparent;
  filter: none;
}
body .button-secondary, .auth-page .auth-telegram {
  color: var(--text);
  background: rgb(255 255 255 / .02);
  border-color: var(--line-strong);
  box-shadow: none;
}
body .button-secondary:hover, .auth-page .auth-telegram:hover {
  color: var(--text);
  background: rgb(255 255 255 / .045);
  border-color: var(--line-selected);
  box-shadow: none;
}
body :is(.button, .quick-action, .brand-card, .order-row, .commerce-order-row):is(:hover, :active),
body .quick-action:hover .quick-action-next {
  transform: none;
}
.app-shell .main-content .quick-action {
  color: var(--text);
  background: rgb(255 255 255 / .015);
  border-color: var(--line-strong);
  box-shadow: none;
}
.app-shell .main-content .quick-action:hover {
  background: rgb(255 255 255 / .04);
  border-color: var(--line-selected);
  box-shadow: none;
}
.quick-action-icon, .quick-action-next, .quick-action:hover .quick-action-next {
  color: var(--muted);
  background: rgb(255 255 255 / .025);
  border-color: var(--line-strong);
}
.dashboard-caption::before { background: var(--credit); }

/* Neutral text hierarchy retains every existing font size and weight. */
.app-shell .main-content :is(h1, h2, h3),
.auth-page :is(h1, h2, h3),
.settings-dialog h2,
.auth-legal-dialog h2,
.docs-intro h2 > span,
.referral-link-card h2 > span { color: var(--text); }
.app-shell .main-content :is(
  .operation-name, .operation-method strong, .operation-amount,
  .order-product-name, .order-number, .order-date, .order-amount,
  .order-detail-product h2, .order-step-copy > strong,
  .order-receipt-lines dd, .order-receipt-total > span, .order-receipt-total > strong,
  .referral-field-label, .referral-how-steps strong, .referral-metric dt,
  .referral-metric-value, .referral-invitation-title, .referral-history-date,
  .referral-history-amount, .referral-history-status,
  .summary-list dd, .summary-product, .summary-total > span, .summary-total strong,
  .commerce-summary-list dd, .commerce-order-amount,
  .site-topup-summary-list dd, .site-inline-terms dd,
  .site-topup-total > span, .site-topup-total > strong,
  .site-requisites-amount strong, .site-route-token, .site-route-token strong,
  .site-currency-copy strong, .site-network-copy strong,
  .checkout-review-copy strong, .checkout-review-copy p,
  .checkout-card-load label, .checkout-card-load .amount-input > span,
  .checkout-ready-balance > strong, .checkout-checklist li,
  .settings-nickname, .settings-email, .settings-field > label,
  .settings-notification-copy > strong,
  .activity-item-title, .activity-money, .money-account strong
) { color: var(--text); }
.app-shell .main-content :is(
  .muted, .page-intro p, .balance-label, .card-funds h3,
  .card-number-group, .card-requisites dt, .card-back-footer > span,
  .quick-action-copy small, .operation-method small, .operation-amount small,
  .operation-date, .activity-intro p, .activity-content .field > span,
  .activity-filter-hint, .activity-history-heading .muted,
  .activity-item-source, .activity-item-id, .activity-date, .activity-time,
  .activity-direction, .activity-table th, .activity-table-note,
  .activity-empty p, .activity-eyebrow,
  .field > label, .field > legend, .field small,
  .summary-list dt, .commerce-summary-list dt,
  .summary-small-note, .commerce-footnote, .commerce-order-meta,
  .service-category, .service-option-kind, .service-option-description,
  .service-option-action, .service-summary-eyebrow, .service-selection-price > span,
  .service-source, .service-page-footer > span,
  .brand-card-category, .brand-card-variants, .brand-card-footer,
  .brand-catalog-count, .shop-catalog-footer,
  .product-conditions dt, .product-conditions dd, .service-product-kind,
  .art-label, .art-footer, .service-art small,
  .money-hint, .money-inline-terms dt, .money-input-wrap > span,
  .money-summary-list dt, .money-summary-total small,
  .money-summary-balance, .money-account small, .money-card-terms > div,
  .money-balance-change > span, .money-balance-change div > span:first-child,
  .money-balance-link, .money-route-arrow, .money-text-button,
  .site-currency-copy small, .site-network-copy small, .site-usd-input > span,
  .site-inline-terms dt, .site-topup-summary-list dt,
  .site-requisites-amount > span, .site-demo-qr small, .site-topup-noscript,
  .checkout-stepper strong, .checkout-stepper small, .checkout-card-demo,
  .checkout-card-number, .checkout-ready-balance > span,
  .checkout-orders-link, .checkout-save-status,
  .checkout-success .success-order-id, .checkout-notice p,
  .order-product-subtitle, .order-detail-product p, .order-outcome-copy > p,
  .order-step-copy > small, .order-receipt-lines dt,
  .order-receipt-meta dt, .order-receipt-meta dd, .order-open,
  .order-money-state > span, .order-preview-number,
  .referral-lead, .referral-metric-caption, .referral-invitation-meta,
  .referral-terms-state, .referral-terms-copy p, .referral-empty p,
  .referral-noscript,
  .docs-intro > p, .docs-topic, .docs-topic .icon,
  .docs-section-heading > p, .docs-answer, .docs-balance-compare dd,
  .docs-result-topic, .docs-empty p, .docs-noscript,
  .settings-section-copy, .settings-description, .settings-field-caption,
  .settings-connection-status, .settings-field-hint,
  .settings-notification-copy > span, .settings-text-button, .settings-noscript
) { color: var(--muted); }
.auth-page :is(
  .auth-subtitle, .auth-divider, .auth-label-row a,
  .auth-password-toggle, .auth-field-hint, .auth-switch,
  .auth-info, .auth-progress, .auth-checkbox, .auth-verify-actions,
  .auth-text-button, .auth-feedback, .auth-back,
  .auth-missing p, .auth-success p, .auth-noscript
),
.settings-dialog > p,
.auth-legal-dialog > p { color: var(--muted); }
.app-shell .main-content :is(
  .docs-answer strong, .docs-answer a:not(.button), .docs-definition-list dt,
  .docs-topic:hover, .docs-topic[aria-pressed="true"],
  .docs-topic[aria-pressed="true"] .icon, .docs-question > summary,
  .referral-terms > summary, .settings-text-button:hover,
  .money-summary-total strong, .commerce-text-button, .commerce-text-link,
  .activity-text-button:hover, .money-notice a,
  .commerce-back:hover, .commerce-text-link:hover,
  .docs-answer a:not(.button):hover
) { color: var(--text); }

/* Match the hardcoded page input surfaces without restyling native checkboxes. */
.app-shell .main-content :is(
  .field input, .field select, .field textarea,
  .money-field input, .money-field select,
  .activity-content input, .activity-content select,
  .brand-search input, .catalog-search input, .orders-search input,
  .site-topup-field input, .referral-link-controls input,
  .settings-password-input, .docs-search-wrap
),
.auth-page .auth-field input {
  color: var(--text);
  background: var(--surface-inset);
  border-color: var(--line-strong);
  box-shadow: none;
}
.app-shell .main-content :is(.settings-password-input input, .docs-search-wrap input) {
  color: var(--text);
  background: transparent;
}
.app-shell .main-content :is(input, textarea)::placeholder,
.auth-page .auth-field input::placeholder { color: var(--subtle); }
body select option { color: var(--text); background: var(--surface-raised); }
.auth-page .auth-field input:hover { border-color: var(--line-selected); }
.checkout-page .checkout-card-load .amount-input input {
  color: var(--text);
  background: transparent;
  border-bottom-color: var(--line-selected);
}
.checkout-page .checkout-card-load input:disabled {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}

/* Quiet borders and tonal feedback for selectable cards and small controls. */
.app-shell .main-content :is(
  .brand-card, .service-product-option, .service-summary,
  .catalog-filter, .catalog-product, .currency-option,
  .site-currency-option, .site-network-option, .cards-add,
  .amount-presets button, .money-quick-amounts button,
  .checkout-edit, .auth-info, .settings-feedback,
  .notice, .money-notice, .order-money-state,
  .docs-balance-compare > div
) {
  border-color: var(--line-strong);
  background: rgb(255 255 255 / .015);
  box-shadow: none;
}
.app-shell .main-content :is(
  .brand-card, .service-product-option, .catalog-filter,
  .site-currency-option, .site-network-option, .cards-add,
  .amount-presets button, .money-quick-amounts button, .checkout-edit
):hover,
.app-shell .main-content .services-catalog .catalog-product:is(:hover, :focus-within) {
  border-color: var(--line-selected);
  background: rgb(255 255 255 / .035);
  box-shadow: none;
}
.app-shell .main-content :is(
  .service-product-option, .catalog-filter, .amount-presets button,
  .money-quick-amounts button
)[aria-pressed="true"],
.app-shell .main-content :is(.currency-option, .site-currency-option, .site-network-option):has(input:checked),
.app-shell .main-content .docs-topic[aria-pressed="true"],
.app-shell .main-content .commerce-tabs button:is([aria-selected="true"], [aria-pressed="true"]) {
  color: var(--text);
  border-color: var(--line-selected);
  background: rgb(255 255 255 / .065);
  box-shadow: none;
}
.app-shell .main-content :is(.brand-card-arrow, .service-option-check, .site-radio-mark, .money-radio) {
  border-color: var(--line-selected);
}
.app-shell .main-content .brand-card:hover .brand-card-arrow {
  color: var(--text);
  background: rgb(255 255 255 / .07);
  border-color: var(--line-selected);
}
.service-product-option[aria-pressed="true"] .service-option-check,
.checkout-no-load input:checked + .checkout-checkbox-mark {
  color: var(--action-text);
  background: var(--action);
  border-color: var(--action);
}
.site-currency-option input:checked ~ .site-radio-mark,
.site-network-option input:checked ~ .site-radio-mark { border-color: var(--text); }
.site-currency-option input:checked ~ .site-radio-mark::after,
.site-network-option input:checked ~ .site-radio-mark::after { background: var(--text); }
.currency-option input:checked ~ .money-radio { border-color: var(--text); background: var(--surface-inset); }
.settings-switch { background: #343a3e; border-color: var(--line-selected); }
.settings-switch::before { background: var(--text); }
.settings-switch:checked { background: var(--action); border-color: var(--action); }
.settings-switch:checked::before { background: var(--action-text); }
.auth-checkbox input { accent-color: var(--action); }
.checkout-checkbox-mark { border-color: var(--line-selected); }
.checkout-no-load:hover .checkout-checkbox-mark { border-color: var(--focus); }

/* Preserve the established white tab underline on both history pages. */
.orders-toolbar, .referral-history-toolbar { border-bottom-color: var(--line-strong); }
.orders-filters > button, .referral-history-toolbar > button { color: var(--muted); }
.orders-filters > button:is(:hover, [aria-pressed="true"]),
.referral-history-toolbar > button:is(:hover, [aria-pressed="true"]) { color: var(--text); }
.orders-filters > button[aria-pressed="true"],
.referral-history-toolbar > button[aria-pressed="true"] { border-bottom-color: var(--text); }
.app-shell .main-content :is(.operation, .order-row, .commerce-order-row) { background: transparent; }
.app-shell .main-content :is(.operation, .order-row, .commerce-order-row):hover,
.activity-table tbody tr:hover { background: rgb(255 255 255 / .025); }
.app-shell .main-content :is(.order-row, .commerce-order-row):hover { border-color: var(--line-strong); }

/* Card artwork keeps its chip and CHIK mark, with a calm material underneath. */
.card-face, .checkout-card, .catalog-card-art, .order-preview-card, .order-card-mark {
  color: var(--text);
  background: var(--surface-inset);
  border-color: var(--line-strong);
  box-shadow: none;
}
.catalog-art-link, .product-hero-art { background: var(--surface-inset); }
.card-face-front::before, .card-face-front::after,
.checkout-card::after, .catalog-card-art::after, .order-preview-card::after {
  border-color: rgb(255 255 255 / .025);
  box-shadow: none;
}
.cards-add::before { opacity: .35; }
.site-demo-qr, .demo-qr { border-color: var(--line-strong); }
.site-demo-qr > span, .demo-qr > span { color: var(--muted); background: var(--surface); }

/* Progress stays legible; active states no longer glow or add gold blocks. */
.app-shell .main-content :is(.stepper, .money-stepper, .site-topup-stepper, .checkout-stepper) li {
  color: var(--muted);
  border-bottom-color: var(--line);
}
.app-shell .main-content :is(.stepper, .money-stepper) li::before,
.app-shell .main-content :is(.money-stepper, .site-topup-stepper, .checkout-stepper) li > span {
  color: var(--muted);
  border-color: var(--line-selected);
  background: transparent;
  box-shadow: none;
}
.app-shell .main-content :is(.stepper, .money-stepper, .site-topup-stepper, .checkout-stepper) li:is([aria-current], .active, .is-complete, [data-completed]) {
  color: var(--text);
}
.app-shell .main-content :is(.site-topup-stepper, .checkout-stepper) li[aria-current="step"] { border-bottom-color: var(--text); }
.app-shell .main-content :is(.site-topup-stepper, .checkout-stepper) li:is(.is-complete, [data-completed]) { border-bottom-color: var(--line-selected); }
.app-shell .main-content :is(.stepper, .money-stepper) li:is([aria-current], .active)::before,
.app-shell .main-content :is(.money-stepper, .site-topup-stepper, .checkout-stepper) li[aria-current] > span,
.auth-progress .is-current b {
  color: var(--action-text);
  background: var(--action);
  border-color: var(--action);
  box-shadow: none;
}
.app-shell .main-content :is(.site-topup-stepper, .checkout-stepper) li:is([aria-current], .is-complete, [data-completed]) strong { color: var(--text); }
.money-spinner { border-color: var(--line-strong); border-top-color: var(--text); }

/* Semantic colours are desaturated and retain symbols, labels and contrast. */
.app-shell .main-content :is(.positive, .activity-money.positive),
.app-shell .main-content .referral-metric--credited .referral-metric-value,
.app-shell .main-content .referral-history-amount.is-credited,
.app-shell .main-content .referral-history-status[data-status="completed"] .referral-status-symbol,
.app-shell .main-content .orders-panel .order-status[data-tone="completed"] .order-status-dot,
.app-shell .main-content .order-money-state:is([data-tone="refunded"], [data-tone="released"]) > strong,
.app-shell .main-content .order-copy[data-copied="true"] { color: var(--credit); }
.incoming:not(.operation-avatar),
.activity-operation-mark.incoming:not(.operation-avatar),
.commerce-success-mark, .status-badge.is-completed {
  color: var(--credit);
  background: rgb(186 203 191 / .035);
  border-color: rgb(186 203 191 / .12);
}
.outgoing:not(.operation-avatar) { color: var(--muted); background: rgb(255 255 255 / .025); }
.app-shell .main-content .order-status[data-tone="completed"] { color: var(--credit); border-color: rgb(186 203 191 / .12); background: rgb(186 203 191 / .035); }
.app-shell .main-content .orders-panel .order-status { color: var(--text); background: transparent; }
.app-shell .main-content :is(.order-status[data-tone="processing"], .order-status[data-tone="checking"], .order-status[data-tone="partial"]),
.activity-status.pending, .status-badge.is-processing, .money-status {
  color: var(--pending);
  background: rgb(201 192 166 / .035);
  border-color: rgb(201 192 166 / .12);
}
.app-shell .main-content .orders-panel :is(.order-status[data-tone="processing"], .order-status[data-tone="checking"], .order-status[data-tone="partial"]) .order-status-dot,
.app-shell .main-content .referral-history-status[data-status="pending"] .referral-status-symbol,
.order-timeline :is([data-state="waiting"], [data-state="checking"]) > .order-step-mark { color: var(--pending); border-color: rgb(201 192 166 / .22); }
.app-shell .main-content .orders-panel .order-status[data-tone="failed"] .order-status-dot,
.order-timeline [data-state="failed"] > .order-step-mark { color: var(--danger); border-color: rgb(210 170 166 / .22); }
.activity-status.failed, .app-shell .main-content .order-status[data-tone="failed"] {
  color: var(--danger);
  background: rgb(210 170 166 / .035);
  border-color: rgb(210 170 166 / .12);
}
.app-shell .main-content .orders-panel .order-status[data-tone="refunded"] .order-status-dot,
.app-shell .main-content :is(.order-status[data-tone="refunded"], .referral-status-symbol),
.money-status.is-cancelled { color: var(--muted); background-color: transparent; border-color: var(--line-strong); }
.app-shell .main-content .orders-panel .order-status { background: transparent; color: var(--text); }
.auth-success-mark { border-color: var(--credit); }
.auth-success-mark::before { border-color: var(--credit); }
.app-shell .main-content :is(.field-error, .error-text, .activity-error, .money-error, .commerce-error, .settings-error, .site-topup-error, .balance-after dd.is-negative),
.auth-page .auth-error { color: var(--danger); }
.notice, .money-notice, .auth-info, .settings-feedback { color: var(--muted); }
.docs-callout { color: var(--text); border-left-color: var(--line-selected); background: rgb(255 255 255 / .025); }
.app-shell .main-content :is(.money-demo-label, .money-mini-badge, .referral-preparation, .referral-decoration, .service-product-icon, .service-art .icon) {
  color: var(--muted);
  background: rgb(255 255 255 / .02);
  border-color: var(--line-strong);
}

/* Consistent dividers and monochrome utility controls; no asset recolouring. */
.app-shell .main-content :is(
  .summary-total, .site-inline-terms, .site-topup-total,
  .service-selection-price, .service-source, .order-receipt-total,
  .order-receipt-meta, .settings-method, .settings-notification-actions,
  .settings-notification-row + .settings-notification-row,
  .docs-section-heading, .docs-question + .docs-question,
  .order-timeline > li:not(:last-child)::after,
  .orders-list > li + li, .referral-history-row + .referral-history-row
) { border-color: var(--line); }
.order-timeline > li:not(:last-child)::after { background: var(--line-strong); }
.auth-divider::before, .auth-divider::after { background: var(--line); }
.auth-switch, .auth-info { border-color: var(--line-strong); }
.app-shell .main-content :is(.site-copy-button, .order-copy, .search-clear, .brand-search button, .orders-search > button, .docs-clear) {
  color: var(--muted);
  border-color: var(--line-strong);
}
.site-copy-button { background: var(--surface-inset); }
.app-shell .main-content :is(.site-copy-button, .order-copy, .search-clear, .brand-search button, .orders-search > button, .docs-clear):hover {
  color: var(--text);
  background: rgb(255 255 255 / .04);
  border-color: var(--line-selected);
}
.referral-copy-icon::after { background: var(--action); }
.referral-copy-button:hover .referral-copy-icon::after { background: var(--action-hover); }
.referral-copy-button[data-copied="true"] .referral-copy-icon::after { background: transparent; }
.site-copy-glyph::after { background: var(--surface-inset); }
.order-copy > span::before { background: var(--surface); }
.operation-avatar-wallet::before { background: var(--surface-raised); }

/* Keyboard focus remains clear, with one ring on compound input wrappers. */
.app-shell :is(a, button, summary, input, select, textarea):focus-visible,
.auth-page :is(a, button, summary, input, select, textarea):focus-visible,
.settings-dialog :is(a, button):focus-visible,
.app-shell .operations-scroll:focus-visible {
  outline: 2px solid var(--focus);
}
.app-shell .main-content :is(.settings-password-input, .docs-search-wrap):focus-within,
.app-shell .main-content :is(.currency-option, .site-currency-option, .site-network-option):has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-color: var(--line-selected);
}
.app-shell .main-content :is(.settings-password-input input, .docs-search-wrap input):focus-visible { outline: none; }
.checkout-no-load input:focus-visible + .checkout-checkbox-mark { outline-color: var(--focus); }
.app-shell .main-content :is(input, select, textarea)[aria-invalid="true"],
.auth-page .auth-field input[aria-invalid="true"],
.app-shell .main-content .settings-password-input:has(input[aria-invalid="true"]) { border-color: var(--danger); }
.app-shell .main-content :is(input, select, textarea)[aria-invalid="true"]:focus-visible,
.auth-page .auth-field input[aria-invalid="true"]:focus-visible,
.app-shell .main-content .settings-password-input:has(input[aria-invalid="true"]):focus-within { outline-color: var(--danger); }
.app-shell .main-content :is(button, .button):disabled,
.auth-page :is(button, .button):disabled {
  box-shadow: none;
  filter: none;
  transform: none;
}
.app-shell .main-content :is(.button-primary, .button-primary:hover):disabled,
.auth-page :is(.button-primary, .button-primary:hover):disabled {
  background: var(--action);
  color: var(--action-text);
  border-color: transparent;
}