/* Appearance is independent of layout. Palette roles also serve legacy screens. */
:root {
  --appearance-canvas: #10151e;
  --appearance-surface: #19212d;
  --appearance-soft: #232e3d;
  --appearance-raised: #2c394b;
  --appearance-ink: #edf2f8;
  --appearance-muted: #a9b5c5;
  --appearance-subtle: #8e9db1;
  --appearance-line: #334155;
  --appearance-control: #60718a;
  --appearance-brand: #84b5ff;
  --appearance-primary: #0056f5;
  --appearance-blue-soft: #1b304d;
  --appearance-green: #83d5b1;
  --appearance-green-soft: #19372e;
  --appearance-red: #ffadb5;
  --appearance-red-soft: #422831;
  --appearance-amber: #edc784;
  --appearance-amber-soft: #3b3224;
  --appearance-purple: #c6b2f5;
  --appearance-purple-soft: #302b45;
}

/* Set the shared aliases last, after every historical foundation declaration. */
html[data-color-scheme="dark"] .phone {
  color-scheme: dark;
  --ink: var(--appearance-ink);
  --muted: var(--appearance-muted);
  --line: var(--appearance-line);
  --soft: var(--appearance-soft);
  --paper: var(--appearance-surface);
  --canvas: var(--appearance-canvas);
  --biz-canvas: var(--appearance-canvas);
  --biz-surface: var(--appearance-surface);
  --biz-surface-soft: var(--appearance-soft);
  --biz-ink: var(--appearance-ink);
  --biz-muted: var(--appearance-muted);
  --biz-icon: #c0ccda;
  --biz-line: var(--appearance-line);
  --biz-control-line: var(--appearance-control);
  --biz-card-line: var(--appearance-line);
  --biz-brand: var(--appearance-primary);
  --biz-brand-bright: #0e84ff;
  --biz-focus: var(--appearance-brand);
  --biz-selected: var(--appearance-blue-soft);
  --biz-success: var(--appearance-green);
  --biz-success-soft: var(--appearance-green-soft);
  --biz-warning: var(--appearance-amber);
  --biz-warning-soft: var(--appearance-amber-soft);
  --biz-danger: var(--appearance-red);
  --biz-danger-soft: var(--appearance-red-soft);
  --biz-info: var(--appearance-brand);
  --biz-info-soft: var(--appearance-blue-soft);
  --biz-shadow-card: 0 4px 16px #00000020;
  --biz-shadow-account: 0 8px 24px #00000028;
  --biz-shadow-raised: 0 16px 40px #00000055;
  --biz-shadow-nav: 0 8px 28px #00000050;
  --modern-primary: var(--appearance-primary);
  --modern-primary-bright: #0e84ff;
  --modern-secondary: var(--appearance-brand);
  --modern-muted: var(--appearance-muted);
  --modern-canvas: var(--appearance-canvas);
  --modern-surface: var(--appearance-surface);
  --modern-surface-soft: var(--appearance-soft);
  --modern-border: var(--appearance-line);
  --modern-border-strong: var(--appearance-control);
  --modern-shadow: var(--biz-shadow-card);
  --modern-shadow-raised: var(--biz-shadow-raised);
  --field-border-color: var(--appearance-control);
  --field-focus-color: var(--appearance-brand);
  --field-focus-halo: rgb(132 181 255 / 16%);
  --business-hero-surface: var(--appearance-green-soft);
  --business-hero-ink: #d5eee2;
  --business-hero-accent: var(--appearance-green);
  --business-hero-line: #365449;
  --business-summary-line: var(--appearance-line);
  color: var(--appearance-ink);
  background: var(--appearance-canvas);
}
html[data-color-scheme="dark"] .phone :is(.home-variant-next, .home-layout-next, .next-top-level-screen) {
  --next-app-background: var(--appearance-canvas);
  --next-accent: var(--appearance-brand);
  --next-brand: var(--appearance-primary);
  --next-brand-bright: #0e84ff;
  --next-accent-soft: var(--appearance-blue-soft);
  --next-surface: var(--appearance-surface);
  --next-line: var(--appearance-line);
}
html[data-color-scheme="dark"] .phone .returning-login-step {
  --login-ink: var(--appearance-ink);
  --login-muted: var(--appearance-muted);
  --login-primary: var(--appearance-primary);
  --login-primary-strong: var(--appearance-primary);
  --login-line: var(--appearance-control);
  --login-soft: var(--appearance-soft);
}
html[data-color-scheme="dark"] .phone :is(.app-header, .profile-screen .focused-header) {
  background: rgb(16 21 30 / 94%);
}
html[data-color-scheme="dark"] .phone :is(.bottom-nav, .bottom-nav-next) {
  background: linear-gradient(130deg, rgb(48 62 81 / 68%), rgb(23 31 43 / 58%));
  border-color: var(--appearance-line);
  box-shadow: var(--biz-shadow-nav);
}
html[data-color-scheme="dark"] .phone .bottom-nav-next .bottom-nav-selection {
  background: rgb(255 255 255 / 12%);
  box-shadow: none;
}
html[data-color-scheme="dark"] #i-nav-transactions path[stroke="#fff"] { stroke: var(--appearance-surface); }
html[data-color-scheme="dark"] #i-nav-more circle[fill="#fff"] { fill: var(--appearance-surface); }
/* Match the resolved appearance, including explicit overrides of the OS mode. */
.phone .next-home-promo-art > .promo-art-dark { display: none; }
html[data-color-scheme="dark"] .phone .next-home-promo-art > .promo-art-light { display: none; }
html[data-color-scheme="dark"] .phone .next-home-promo-art > .promo-art-dark { display: block; }
html[data-color-scheme="dark"] .phone .next-home-promo-copy > .next-home-promo-action { color: var(--appearance-brand); }
html[data-color-scheme="dark"] .phone :is(.profile-switch, .scenario-switch) i::after {
  background: #fff;
}
/* Selected financial filters keep their semantic fill with dark inverse text. */
html[data-color-scheme="dark"] .phone .scf-screen .scf-case-filters button.active,
html[data-color-scheme="dark"] .phone .scf-screen .scf-case-filters button.active > span {
  color: var(--appearance-canvas);
}
html[data-color-scheme="dark"] .phone :is(input, select, textarea) { caret-color: var(--appearance-brand); }
html[data-color-scheme="dark"] .phone ::selection { color: #fff; background: #315a91; }
html[data-color-scheme="dark"] .phone :is(.field, .invoice-field) input:-webkit-autofill {
  -webkit-text-fill-color: var(--appearance-ink);
  box-shadow: 0 0 0 100px var(--appearance-surface) inset;
}

/* Profile preferences: real radios, fixed miniature previews, immediate selection. */
.phone .profile-appearance {
  min-width: 0;
  margin: 0 0 12px;
  padding: 18px 14px 14px;
  border: 1px solid var(--biz-line, var(--modern-border, #dce1e7));
  border-radius: 22px;
  background: var(--biz-surface, var(--modern-surface, #fff));
  box-shadow: var(--biz-shadow-card, var(--modern-shadow, none));
}
.phone .profile-appearance legend {
  float: inline-start;
  width: 100%;
  padding: 0;
  margin-bottom: 2px;
  color: var(--ink);
  font: 16px/24px "Vazirmatn SemiBold", Tahoma, sans-serif;
}
.phone .profile-appearance-description {
  clear: both;
  margin: 0 0 16px;
  color: var(--muted);
  font: 12px/20px "Vazirmatn Regular", Tahoma, sans-serif;
}
.phone .appearance-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.phone .appearance-option { position: relative; min-width: 0; cursor: pointer; }
.phone .appearance-option input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.phone .appearance-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 176px;
  padding: 8px 7px 11px;
  border: 1px solid var(--biz-line, var(--modern-border, #dce1e7));
  border-radius: 16px;
  background: var(--biz-canvas, var(--modern-canvas, #f5f6f8));
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.phone .appearance-option input:checked + .appearance-choice {
  border-color: var(--field-focus-color, #0056f5);
  background: var(--biz-selected, #edf3ff);
  box-shadow: 0 0 0 1px var(--field-focus-color, #0056f5);
}
.phone .appearance-option input:focus-visible + .appearance-choice { outline: 3px solid var(--field-focus-color, #0056f5); outline-offset: 4px; }
.phone .appearance-choice-title { display: flex; gap: 5px; align-items: center; margin-top: 10px; color: var(--ink); }
.phone .appearance-choice-title svg { width: 16px; height: 16px; }
.phone .appearance-choice-title strong { font: 13px/22px "Vazirmatn SemiBold", Tahoma, sans-serif !important; }
.phone .appearance-choice > small { color: var(--muted); font: 10px/18px "Vazirmatn Regular", Tahoma, sans-serif !important; }
.phone .appearance-choice-check { width: 18px; height: 18px; margin-top: 9px; display: grid; place-items: center; border: 1px solid var(--biz-control-line, #8995a6); border-radius: 50%; }
.phone .appearance-choice-check svg { width: 12px; height: 12px; stroke-width: 2.4; opacity: 0; }
.phone .appearance-option input:checked + .appearance-choice .appearance-choice-check { border-color: #0056f5; background: #0056f5; color: #fff; }
.phone .appearance-option input:checked + .appearance-choice .appearance-choice-check svg { opacity: 1; }
.phone .profile-appearance-note { margin: 14px 0 0; text-align: center; color: var(--muted); font: 11px/20px "Vazirmatn Regular", Tahoma, sans-serif; }

/* These previews intentionally show their named appearance in both app modes. */
.phone .appearance-preview { position: relative; display: flex; flex-direction: column; gap: 5px; width: 100%; height: 76px; padding: 7px; overflow: hidden; border: 1px solid #d9e1eb; border-radius: 9px; background: #f0f3f8; }
.phone .appearance-preview-top { display: flex; align-items: center; justify-content: space-between; height: 7px; }
.phone .appearance-preview-top i:first-child { width: 7px; height: 7px; border-radius: 50%; background: #94a4bb; }
.phone .appearance-preview-top i:last-child { width: 17px; height: 3px; border-radius: 3px; background: #becadb; }
.phone .appearance-preview-card { padding: 5px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 23px; border: 1px solid #e0e6ee; border-radius: 5px; background: #fff; }
.phone .appearance-preview-card i { width: 43%; height: 3px; border-radius: 2px; background: #b4c0d0; }
.phone .appearance-preview-card b { width: 70%; height: 4px; border-radius: 2px; background: #5277a7; }
.phone .appearance-preview-lines { display: flex; flex-direction: column; gap: 3px; }
.phone .appearance-preview-lines i { width: 78%; height: 3px; border-radius: 2px; background: #cbd4e1; }
.phone .appearance-preview-lines i:last-child { width: 50%; }
.phone .appearance-preview-nav { display: flex; justify-content: space-around; padding-top: 2px; }
.phone .appearance-preview-nav i { width: 4px; height: 4px; border-radius: 50%; background: #98a8bd; }
.phone .appearance-preview-nav i:first-child { background: #0056f5; }
.phone .appearance-preview-dark { background: #10151e; border-color: #39475a; }
.phone .appearance-preview-dark .appearance-preview-card { background: #232e3d; border-color: #39475a; }
.phone .appearance-preview-dark .appearance-preview-card b { background: #91bbfa; }
.phone .appearance-preview-dark .appearance-preview-lines i { background: #4b5b71; }
.phone .appearance-preview-system { background: linear-gradient(90deg, #10151e 50%, #f0f3f8 50%); border-color: #7b8da4; }
.phone .appearance-preview-system .appearance-preview-card { background: linear-gradient(90deg, #232e3d 50%, #fff 50%); border-color: #7b8da4; }
.phone .appearance-preview-system .appearance-preview-lines i { background: linear-gradient(90deg, #4b5b71, #cbd4e1); }
@media (max-width: 360px) {
  .phone .profile-appearance { padding-inline: 10px; }
  .phone .appearance-options { gap: 6px; }
  .phone .appearance-choice { padding-inline: 5px; }
  .phone .appearance-preview { padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) { .phone .appearance-choice { transition: none; } }
@media (forced-colors: active) {
  .phone .appearance-option input:checked + .appearance-choice { outline: 2px solid Highlight; }
  .phone .appearance-choice-check { forced-color-adjust: none; }
}

/* Border removal only: Dark and Soft & Precise. This historical list includes
 * structural wrappers, so NEVER use it to add borders in Subtle Depth Light.
 * Actual card components own their Light borders; headings and text stay unframed.
 * Explicit surface selectors keep field boundaries, row separators, status
 * badges and keyboard focus independent of decorative card outlines.
 * This final rule also covers dynamically mounted documents and service cards.
 */
:is(html[data-color-scheme="dark"] .phone, .phone[data-app-theme="soft-precise"]) {
  --biz-card-line: transparent;
}
:is(html[data-color-scheme="dark"] .phone, .phone[data-app-theme="soft-precise"]) :is(
  /* Home, account, payment, business and service surfaces. */
  .next-home-account, .next-home-task-list, .next-home-feature-card,
  .next-home-feature-list > button, .next-home-scf-card,
  .next-home-cashflow-summary, .next-home-tool-grid > button,
  .next-home-activity, .next-home-promo, .next-payment-primary,
  .next-payment-upcoming, .next-payment-service-grid > button,
  .next-business-summary, .next-business-destination-grid > button,
  .next-business-scf-entry, .next-connected-links, .next-more-group > div,
  .balance-hero, .total-summary, .account-detail-hero, .statement-summary,
  .card-summary-row, .physical-card, .pending-card, .cards-empty-state,
  .cards-pending-requests, .metric-card, .snapshot-card, .priority-banner,
  .row-list, .management-list, .cards-list, .detail-list, .attention-list,
  .business-row-list, .account-activity-list, .identifiers-list,
  .connector-card, .connected-list, .service-summary-hero,
  .business-primary-action,
  /* Transfers, recipients and their supporting information. */
  .wide-account-switch, .selected-recipient, .smart-route,
  .transfer-amount-card, .transfer-details-switch, .security-banner,
  .first-transfer-guide, .recipient-list, .grouped-recipient-list,
  .all-contacts-list, .contacts-summary, .destination-sheet-person,
  .destination-sheet-details, .transfer-help-list, .smart-source-note,
  .default-account-entry, .sheet-account-list, .route-options,
  /* Invoices, receipts, collections, financing and forecasts. */
  .invoice-state-hero, .invoice-definition-note, .invoice-party-card,
  .invoice-document, .invoice-total-card, .invoice-link-card,
  .invoice-payment-receipt, .invoice-collection-card, .invoice-plain-note,
  .document-review-panel, .expense-status-grid > article,
  .receive-identity-card, .receive-choice-note, .receive-iban-card,
  .receive-use-case, .pos-review-summary, .cashflow-hero,
  .cashflow-detail-summary, .cashflow-calculation,
  .next-home-cashflow-equation, .next-home-cashflow-low,
  .cashflow-calculation-note, .scf-status-card, .scf-quote-card,
  .scf-eligibility-hero, .scf-funded-details, .scf-summary-card,
  .scf-case-row, .scf-home-card, .scf-payout-card, .scf-example-card,
  .scf-invoice, .scf-role-map > article, .scf-role-steps, .scf-role-finance,
  .scf-role-note, .scf-card-note, .scf-legal-note,
  .snapshot-info-position, .snapshot-info-disclaimer, .snapshot-info-points > article,
  /* Energy and health. */
  .health-hero, .health-service-grid > button, .health-recommendation,
  .health-my-care, .health-care-row, .health-note,
  .energy-hero, .energy-meter, .energy-auto-pay,
  /* Profile, appearance and authentication sheets. */
  .profile-hero, .profile-menu-card, .profile-biometric-card,
  .profile-appearance, .appearance-choice, .profile-device-list,
  .bottom-sheet, .sheet-intro, .card-auth-source, .biometric-offer-hero,
  /* Returning login and all account-opening stages. */
  .customer-login-form, .new-account-entry, .returning-unlock-card,
  .returning-method-panel, .returning-method-option, .known-identity-card,
  .recovery-card-summary, .recovery-method-option,
  .recovery-security-note, .scope-card, .scope-note, .ready-note,
  .new-journey-map, .new-welcome-hero, .otp-delivery-status,
  .national-card-back-guide, .card-serial-sheet-copy, .card-serial-help-button, .face-scan,
  .review-ticket, .review-channels, .review-pending-hero,
  .review-list, .completion-list, .completion-list > span, .customer-found, .verified-person,
  .registry-disclosure, .biometric-card, .deposit-option,
  .comparison-note, .contract-summary, .operation-ticket,
  .operation-progress-card, .operation-safe-note, .correction-task-card,
  .correction-preserved-note, .profile-correction-banner,
  .opened-account-card, .next-card-prompt, .card-design-picker, .card-design-option,
  .delivery-option, .card-address-panel, .card-address-option,
  .delivery-address-summary, .card-tracking-status-card,
  .delivery-issue-note, .postal-code-card, .device-pin-panel,
  .device-security-list, .identity-fetch-note, .automatic-api-note, .risk-note,
  .pos-type-options > button, .detail-surface, .invoice-explainer,
  .invoice-comparison > article, .invoice-status-timeline,
  .scf-timeline, .pos-review-timeline, .biz-card, .biz-card-inset
):not(.customer-login-form) {
  border: 0 !important;
}
/* A selected appearance has a filled surface and check; no decorative ring. */
:is(html[data-color-scheme="dark"] .phone, .phone[data-app-theme="soft-precise"])
  .appearance-option input:checked + .appearance-choice {
  box-shadow: none;
}
/* Choice cards use a selected fill instead of shadow-based border imitations. */
:is(html[data-color-scheme="dark"] .phone, .phone[data-app-theme="soft-precise"]) :is(
  .biometric-card.selected, .deposit-option.selected, .delivery-option.selected,
  .card-address-option.selected, .recovery-method-option.selected,
  .recovery-method-option.is-selected, .card-design-option.selected,
  .returning-method-option.selected, .pos-type-options > button.selected
):not(:focus-visible) {
  background: var(--biz-selected, var(--modern-surface-soft));
  box-shadow: var(--biz-shadow-card, var(--modern-shadow, none));
}
/* The bank-card mockup previously drew a second outline with an inset shadow. */
:is(html[data-color-scheme="dark"] .phone, .phone[data-app-theme="soft-precise"])
  #screen-card-detail .physical-card {
  box-shadow: var(--biz-shadow-raised, var(--modern-shadow-raised, none));
}