:root { --appearance-paper: #fff; --appearance-ink: #202a34; --appearance-line: #dce2e8; --appearance-soft: #f2f5f7; }
[data-appearance-host] { display: inline-flex; flex: 0 0 auto; }
.appearance-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 44px; min-height: 44px; padding: 9px; border: 1px solid var(--appearance-line); border-radius: 9px; background: var(--appearance-paper); color: var(--appearance-ink); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.appearance-button svg { width: 20px; height: 20px; flex: 0 0 auto; }
[data-appearance-label] .appearance-button { width: auto; border-color: transparent; background: transparent; }
.auth-footer [data-appearance-host] { display: flex; justify-content: center; margin: -8px 0 8px; }
.appearance-dialog { width: min(360px,calc(100vw - 32px)); max-width: none; padding: 0; margin: auto; border: 1px solid var(--appearance-line); border-radius: 16px; background: var(--appearance-paper); color: var(--appearance-ink); box-shadow: 0 20px 70px #0004; }
.appearance-dialog::backdrop { background: #07101880; }
.appearance-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--appearance-line); }
.appearance-dialog h2 { margin: 0; font: 600 18px/1.3 Inter,system-ui,sans-serif; }
.appearance-dialog header button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 26px; cursor: pointer; }
.appearance-dialog fieldset { display: grid; gap: 6px; margin: 0; padding: 14px; border: 0; }
.appearance-dialog label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; font: 400 15px/1.4 Inter,system-ui,sans-serif; cursor: pointer; }
.appearance-dialog label:has(input:checked) { border-color: var(--appearance-line); background: var(--appearance-soft); }
.appearance-dialog input { width: 18px; height: 18px; margin: 0; accent-color: #b92b23; }
.appearance-dialog footer { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--appearance-line); }
.appearance-dialog footer button { min-height: 44px; padding: 10px 22px; border: 0; border-radius: 9px; background: #b92b23; color: #fff; font: 600 14px Inter,system-ui,sans-serif; cursor: pointer; }
.appearance-button:focus-visible,.appearance-dialog button:focus-visible,.appearance-dialog input:focus-visible { outline: 2px solid #cf5148; outline-offset: 3px; }
.appearance-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media screen {
 html[data-theme="dark"] { color-scheme: dark; --appearance-paper: #1c2025; --appearance-ink: #eef0f3; --appearance-line: #353c44; --appearance-soft: #272d34; background: #121416; }
 html[data-theme="dark"] body { --ink: #eef0f3; --muted: #b2bbc5; --line: #353c44; --surface: #1c2025; --panel: #1c2025; --paper: #1c2025; --canvas: #121416; --soft: #272d34; --red: #e27067; --red-dark: #f18b82; --red-bg: #442b2d; --amber: #eac27a; --amber-bg: #3b3325; --green: #87d6ac; --green-bg: #203b30; --blue: #9fc1ee; --blue-bg: #25354b; --forest: #8bcfb0; --forest-2: #a2ddc1; --shadow: 0 5px 24px #0002; color: var(--ink); background: var(--canvas); }
 html[data-theme="dark"] body :is(.auth-shell,.auth-form-panel,.app-header,.money-overview,.portfolio-overview,.green-card,.red-card,.sidebar,.kpi-card,.mini-kpi-grid article,.quick-actions button,.filter-bar,.deposit-totals,.context-box,.single-home-fields,.initial-charge,.deposit-modal-summary,.period-banner,.period-close-summary>div,.file-drop,.import-summary>div,.bulk-entry-shell,.bulk-entry-toolbar,.bulk-entry-card,.ledger-toolbar,.ledger-summary>div,.notice-library,.notice-template-card,.document-guidance,.payment-settings-card,.maintenance-job-grid>div,.mobile-card-table tbody tr,.owner-overview article,.owner-export>div,.owner-property-cards details dl,.tenant-payment-card>header,.tenant-payment-card>footer,.tenant-payment-choice-panel,.tenant-app-selector,.payment-readiness,.payment-office-block,.payment-hours,.payment-payee,.payment-handle,.payment-posting-warning,.tenant-payment-admin-note,.tenant-pending-payments,.tenant-pending-payments>header,.tenant-safety-questions label,.tenant-maintenance-meta>div,.tenant-maintenance-completion,.tech-job-more dl,.tech-message-recipient,.lease-summary,.signer-progress,.income-upload,.income-document-card,.portal-topbar,.portal-footer,.portal-panel,.portal-panel-head,.portal-metrics article,.rental-card,.tenant-rent-hero,.tenant-rent-primary,.tenant-rent-detail,.tenant-balance-breakdown,.tenant-maintenance-group>header,.tenant-maintenance-card,.tenant-maintenance-card header,.tenant-file-card,.current-lease-row,.tenant-contact-body,.tenant-payment-card,.tenant-payment-body,.tenant-payment-method,.tenant-payment-method>button,.tenant-payment-method-panel,.tenant-payment-app-selector,.tenant-office-details,.tenant-paper-instructions,.tenant-request-dialog,.tenant-request-card,.tenant-request-card>header,.tenant-request-card>footer,.tenant-safety-questions,.tenant-priority-result,.tenant-document-dialog-card,.tenant-document-dialog-head,.tenant-document-dialog-card>footer,.owner-expense-card,.owner-expense-card>header,.owner-expense-card>footer,.owner-bulk-expense-row,.owner-bulk-expense-row>header,.owner-bulk-expense-body,.owner-properties-table,.owner-property-cards>article,.owner-property-tools,.owner-accounting-details,.statement-access-panel,.statement-access-body,.activity-row,.activity-filters,.tech-header,.tech-metrics article,.tech-earnings-link,.tech-job-card,.tech-empty,.tech-sheet-card,.tech-sheet-card>header,.tech-sheet-card>footer,.tech-job-actions,.tech-bottom-nav,.tech-detail-address,.tech-status-options>div,.tech-photo-panel,.tech-job-more,.tech-information-block,.tech-contact-section,.tech-pay-metrics article,.tech-account-row,.tech-desktop-empty,.panel,.panel-header,.summary-card,.metric-card,.stat-card,.modal-card,.modal-card>header,.modal-card>footer,.drawer,.detail-drawer,.action-menu-popover,.global-search-card,.search-results,.payment-method-card,.payment-setting-card,.property-card,.owner-card,.tenant-card,.maintenance-card,.maintenance-card header,.workflow-applicant-row,.workflow-review-head,.workflow-inline-form,.workflow-recipient-list article,.five-day-head,.five-day-controls,.five-day-footer,.form-card,.form-card>header,.document-header,.document-loading,.document-error,.document-complete,.identity-upload,.sms-consent,.experience-tour>article,.experience-tour footer,.notification-consent>article,.notification-consent footer,.app-install-guide>article,.app-install-guide header,.app-install-guide footer,.security-splash) { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
 html[data-theme="dark"] body :is(.main-area,.portal-main,.tenant-document-preview,.tech-sheet-scroll,.document-shell,.owner-bulk-expense-list,.modal-body,.workflow-modal-body) { background-color: var(--canvas); }
 html[data-theme="dark"] body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) { background: #161a1f; color: #eef0f3; border-color: #444e5a; color-scheme: dark; }
 html[data-theme="dark"] body :is(input,textarea)::placeholder { color: #95a3b2; opacity: 1; }
 html[data-theme="dark"] body :is(.secondary,.secondary-btn,.nav-item,.sidebar-link,.history-toggle,.statement-action-btn,.document-light-btn,.secondary-action,.tenant-file-actions button,.tenant-file-actions a,.tenant-app-selector button,.tenant-home-documents .tenant-file-actions button,#tenant-document-download,#tech-header-account,#tech-desktop-empty,.tech-photo-grid figcaption button,.application-steps button,.portal-button.secondary,.header-search-btn,.dialog-close,.auth-password-toggle,.tech-contact-actions a,.tech-contact-more button,.tech-status-options summary,.tech-photo-action,.tech-sheet-card>header>button,.tenant-section-nav a,.tenant-quick-links a,.tech-job-filter,.owner-activity-filters button,.owner-list-pagination button,.tech-pagination button,.tenant-payment-month-picker,.payment-note,.tenant-payment-note,.tenant-payment-account,.tenant-payment-app-detail,.tenant-actual-memo,.tenant-office-hours,.owner-more-fields,.document-history-tools,.sms-preview-heading,.search-result,.tech-job-card aside span,.auth-link-check) { background: var(--soft); color: var(--ink); border-color: var(--line); }
 html[data-theme="dark"] body :is(.auth-primary,.primary-btn,.portal-button:not(.secondary),.tech-job-actions>button:not(.secondary),.tech-contact-actions .personal-text) { background: #b92b23; border-color: #b92b23; color: #fff; }
 html[data-theme="dark"] body :is(.tenant-rent-amount,.tenant-rent-hero h2,.tenant-rent-hero strong,.tenant-payment-overview>strong,.tenant-rent-answer,.rental-card h3,.rental-meta strong,.unit-primary,.money,.tech-job-card h2,.tech-job-card strong,.tech-metrics strong,.tech-information-block p,.tech-account-row strong,.owner-property-cards strong,.owner-activity-copy strong,.auth-view h1,.auth-form label,.auth-form label>span,.form-card h2) { color: #eef0f3; }
 html[data-theme="dark"] body :is(.auth-intro,.auth-form-row a,.auth-back,.auth-footer,.auth-footer a,.auth-footer>strong,.portal-account>a,.portal-field span,.rental-meta span,.tenant-rent-month,.tenant-rent-detail span,.tenant-rent-due,.tenant-rent-amount-label,.tenant-section-nav a,.tenant-payment-rental,.tenant-payment-deadline,.tenant-request-field>span,.tenant-request-field>small,.tenant-request-extras summary,.tech-job-card p,.tech-job-card .address,.tech-job-card small,.tech-heading p,.tech-pay-metrics span,.tech-photo-empty,.owner-property-cards span,.activity-row small,.unit-secondary,.property-address-list,.nav-group-label,.sidebar-link,.document-intro p) { color: #b2bbc5; }
 html[data-theme="dark"] body :is(table,th,td) { border-color: #353c44; }
 html[data-theme="dark"] body th { background: #222c37; color: #b6c3cf; }
 html[data-theme="dark"] body tbody tr { background: transparent; }
 html[data-theme="dark"] body tbody tr:hover { background: #272d34; }
 html[data-theme="dark"] body :is(.tenant-rent-status,.statement-status,.workflow-badge,.tech-priority) { background: #303c49; color: #d2deeb; border-color: #444e5a; }
 html[data-theme="dark"] body :is(.nav-item.active,.tenant-app-selector button[aria-pressed="true"],.application-steps button[aria-current="step"]) { background: #3b3033; color: #ffb1a7; border-color: #8b5a55; }
 html[data-theme="dark"] body :is(.received,.status-paid,.money.received,.statement-payout) { color: #87d6ac; }
 html[data-theme="dark"] body :is(.balance-due,.status-unpaid,.emergency,.tenant-rent-status.past-due) { color: #f2a39a; }
 html[data-theme="dark"] body :is(.auth-message,.workflow-success) { background: #203b30; color: #a4e3bf; border-color: #456757; }
 html[data-theme="dark"] body :is(.auth-message[data-tone="error"],.auth-link-check[data-state="error"],.portal-alert,.tech-alert,.tenant-emergency-warning,.maintenance-emergency-banner) { background: #442b2d; color: #ffc4bd; border-color: #865049; }
 html[data-theme="dark"] body :is(.tenant-payment-posting-note,.tenant-office-hours,.tech-information-block.important) { background: #3b3325; color: #eed3a0; border-color: #746045; }
 html[data-theme="dark"] body :is(.portal-brand,.sidebar-brand,.auth-brand-mark) { background: #fff; border-radius: 8px; padding: 6px; }
 html[data-theme="dark"] body :is(.tech-header>img,.security-splash img,.document-header img) { background: #fff; border-radius: 8px; padding: 5px; }
 html[data-theme="dark"] body :is(.document-paper,.ledger-paper,.receipt-paper,.receipt-sheet,.statement-paper,.report-page,.tenant-notice-preview,.lease-reader-sheet,.check-example,.document-preview,.receipt-print-area) { --ink: #172029; --muted: #68717c; --line: #dfe3e8; --paper: #fff; --surface: #fff; --canvas: #fff; --red: #b92b23; --red-dark: #a2221c; --green: #237547; color-scheme: light; background: #fff; color: #172029; }
 html[data-theme="dark"] body :is(.document-paper,.ledger-paper,.receipt-sheet,.statement-paper,.report-page,.tenant-notice-preview,.check-example,.document-preview) :is(th,td,tr,.money,strong,input,select,textarea) { color: inherit; border-color: #dfe3e8; }
 html[data-theme="dark"] body :is(.document-paper,.ledger-paper,.statement-paper,.report-page,.document-preview) th { background: #f1f4f6; color: #4a5662; }
 html[data-theme="dark"] body :is(.document-paper,.ledger-paper,.statement-paper,.report-page,.document-preview) tr:hover { background: transparent; }
}

/* Finish the role-specific styles, including controls inherited from light mode. */
@media screen {
 html[data-theme="dark"] body :is(.portal-brand,.sidebar-brand,.auth-brand-mark) { background: transparent; padding: 0; border-radius: 0; }
 html[data-theme="dark"] body :is(.portal-brand img,.sidebar-brand img,.auth-brand img,.tech-header>img,.security-splash img,.document-header img) { filter: invert(1) hue-rotate(180deg); background: transparent; padding: 0; border-radius: 0; }
 html[data-theme="dark"] body .portal-brand { flex: 0 1 auto; min-width: 0; }
 html[data-theme="dark"] body[data-portal-role] .portal-brand img { width: 170px; max-width: 38vw; }
 html[data-theme="dark"] body[data-portal-role] .portal-account>a { background: transparent; color: #d8e0e8; border-color: var(--line); }
 html[data-theme="dark"] body[data-portal-role] :is(.tenant-text-action,.tenant-home-details summary,.tenant-home-documents>summary,.tenant-help-row a,.tenant-home-documents .tenant-file-actions a) { color: #c8d2dc; background: transparent; }
 html[data-theme="dark"] body[data-portal-role] :is(.tenant-text-action,.tenant-help-row a):hover { color: #fff; }
 html[data-theme="dark"] body[data-portal-role] .tenant-section-nav :is(a,button) { background: transparent; color: #c8d2dc; border: 0; }
 html[data-theme="dark"] body[data-portal-role] .tenant-section-nav :is(a,button):hover { background: #272d34; color: #fff; }
 html[data-theme="dark"] body[data-portal-role] .tenant-rent-hero[data-status="partial"] .tenant-rent-status,
 html[data-theme="dark"] body[data-portal-role] .tenant-rent-hero[data-status="due"] .tenant-rent-status { background: #3d3323; color: #f1d49c; }
 html[data-theme="dark"] body[data-portal-role] .tenant-rent-hero[data-status="past_due"] .tenant-rent-status { background: #442b2d; color: #ffc4bd; }
 html[data-theme="dark"] body[data-portal-role] .tenant-payment-month-picker { background: transparent; border-color: var(--line); }
 html[data-theme="dark"] body[data-portal-role] :is(.tenant-payment-method,.tenant-payment-method.recommended) { border-color: #3c444e; background: #20252b; }
 html[data-theme="dark"] body[data-portal-role] .tenant-payment-method>button { background: transparent; border-color: transparent; }
 html[data-theme="dark"] body[data-portal-role] .tenant-payment-method>button b { color: #b8c3ce; }
 html[data-theme="dark"] body[data-portal-role] .tenant-payment-method>button small { background: #3d2c2c; color: #f1aaa0; }
 html[data-theme="dark"] body[data-portal-role] .tenant-method-icon { color: #ef857b; }
 html[data-theme="dark"] body[data-portal-role] .activity-icon { background: #233b30; color: #99d8b6; }
 html[data-theme="dark"] body[data-portal-role] .activity-icon.expense { background: #442b2d; color: #ffc4bd; }
 html[data-theme="dark"] body[data-maintenance-screen] { background: var(--canvas); }
 html[data-theme="dark"] body[data-portal-role] .tenant-request-dialog[data-mobile-screen],
 html[data-theme="dark"] body[data-portal-role] .tenant-request-dialog[data-mobile-screen] .tenant-request-card,
 html[data-theme="dark"] body[data-portal-role] .tenant-request-dialog[data-mobile-screen] .tenant-request-card>header,
 html[data-theme="dark"] body[data-portal-role] .tenant-request-dialog[data-mobile-screen] .tenant-request-card>footer { background: var(--surface); color: var(--ink); border-color: var(--line); }
 html[data-theme="dark"] body[data-portal-role] .tenant-safety-questions legend { color: #dce4eb; }
 html[data-theme="dark"] body[data-portal-role] .tenant-request-extras { border-color: var(--line); }
 html[data-theme="dark"] body[data-portal-role] .tenant-request-extras>summary { color: #c8d2dc; }
 html[data-theme="dark"] body :is(.auth-footer,.auth-footer::before) { border-color: var(--line); }
 html[data-theme="dark"] body.auth-body .auth-password-toggle { background: transparent; color: #c8d2dc; }
 html[data-theme="dark"] body.auth-body .auth-password-toggle:hover { background: #272d34; }
}
@media screen and (max-width:600px) {
 html[data-theme="dark"] body.auth-body :is(.auth-shell,.auth-form-panel) { background: transparent; }
 html[data-theme="dark"] body[data-portal-role] .portal-brand img { width: 148px; }
}

@media (max-width: 600px) {
 html[data-theme="dark"] .portal-account { gap: 8px; }
 html[data-theme="dark"] body .portal-brand { padding: 4px; }
 html[data-theme="dark"] .tech-header>div { gap: 8px; }
}
@media (max-width: 380px) {
 body[data-portal-role] .portal-topbar .portal-brand img { width: 130px; }
 .portal-topbar .portal-account { gap: 6px; }
}
/* Admin workspaces and field portals share the same dark surface hierarchy. */
@media screen {
 html[data-theme="dark"] body :is(.modal-head,.modal-footer,.maintenance-status-strip,.maintenance-status-strip>span,.rent-status-strip>div,.maintenance-card-actions,.payment-settings-section,.payment-method-toggles>label,.dashboard-planning-totals>span,.panel-head,.section-panel,.properties-command-bar,.owner-directory,.owner-directory[open]>summary,.maintenance-status-summary,.maintenance-status-summary[open]>summary,.dashboard-command-head,.dashboard-financials button,.dashboard-accounting-strip,.dashboard-accounting-strip button,.dashboard-more,.dashboard-more-actions>summary,.dashboard-more-actions>div,.rent-status-strip,.section-jump-nav,.record-workspace-tabs,.record-overview-grid article,.record-workspace-list>article,.global-search-help,.mobile-navigation-sheet,.mobile-sheet-head,.floating-action-menu,.leasing-record-bar,.workflow-details,.tenant-roster-editor,.tenant-roster-card,.payment-settings-footer,.payment-directions,.payment-directions>summary,.workflow-identity-documents) { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
 html[data-theme="dark"] body :is(.modal-head h2,.modal-head h3,.empty-state strong,.command-row strong,.maintenance-status-strip strong,.dashboard-planning-totals strong,.maintenance-request-details strong,.payment-method-toggles strong,.bulk-entry-note strong,.bulk-entry-head>div:first-child>strong,.sms-preview-heading strong,.app-header h1,.view-toolbar h2,.panel-head h3,.dashboard-command-head h2,.dashboard-quick-actions strong,.dashboard-financials strong,.dashboard-accounting-strip strong,.mini-kpi-grid strong,.rent-status-strip strong,.owner-directory>summary strong,.record-overview-grid strong,.record-workspace-list strong,.record-workspace-empty strong,.payment-directions>summary strong,.workflow-identity-documents h4,.tenant-summary-metrics strong) { color: var(--ink); }
 html[data-theme="dark"] body :is(.field>label,.command-row span,.maintenance-status-strip>span,.dashboard-financials span,.dashboard-accounting-strip span,.dashboard-quick-actions small,.rent-status-strip span,.field>span,.compact-field>span,.owner-directory>summary small,.owner-accounting-details>summary,.owner-accounting-details dt,.owner-property-cards dt,.owner-property-tools label>span,.owner-property-cards details>summary,.tech-account-row>span,.tech-pay-metrics span,.global-search-head label span) { color: #b2bbc5; }
 html[data-theme="dark"] body :is(.dashboard-more>summary,.dashboard-more-actions>div button,.section-jump-nav button,.record-workspace-tabs button,.mobile-navigation-sheet>nav>button,.mobile-navigation-sheet>nav>a,.property-open-button,.rental-open-button) { background: transparent; color: #c8d2dc; border-color: var(--line); }
 html[data-theme="dark"] body :is(.dashboard-quick-actions .quick-icon,.record-workspace-tabs button[aria-selected="true"],.section-jump-nav button.active) { background: var(--soft); color: var(--ink); }
 html[data-theme="dark"] body :is(.dashboard-financials button,.dashboard-accounting-strip button,.dashboard-quick-actions button,.property-open-button):hover { background: #272d34; border-color: #56616e; }
 html[data-theme="dark"] body .dashboard-financials button:nth-child(2) strong,
 html[data-theme="dark"] body .dashboard-financials button:nth-child(4) strong { color: #87d6ac; }
 html[data-theme="dark"] body .dashboard-financials button:nth-child(3) strong { color: #f2a39a; }
 html[data-theme="dark"] body :is(.property-type,.owner-directory-toggle,.text-btn,.eyebrow) { color: #f2a39a; }
 html[data-theme="dark"] body .portal-user-status[data-status="registered"] { color: #87d6ac; }
 html[data-theme="dark"] body .portal-user-status[data-status="registered"]>span { background: #87d6ac; box-shadow: 0 0 0 3px #203b30; }
 html[data-theme="dark"] body .tech-tabs { background: #161a1f; border-color: var(--line); }
 html[data-theme="dark"] body .tech-tabs button { background: transparent; color: #b2bbc5; }
 html[data-theme="dark"] body .tech-tabs button.active { background: #353e49; color: #fff; }
 html[data-theme="dark"] body .tech-bottom-nav button { background: transparent; color: #b2bbc5; }
 html[data-theme="dark"] body .tech-bottom-nav button.active { background: #3b3033; color: #ffb1a7; }
 html[data-theme="dark"] body .security-spinner { border-color: #444e5a; border-top-color: #f2a39a; }
}
@media screen and (max-width:760px) {
 /* Keep the title and all three actions readable at phone widths. */
 html[data-theme="dark"] body .app-header { flex-direction: column; align-items: stretch; gap: 10px; }
 html[data-theme="dark"] body .app-header .header-actions { display: flex; width: 100%; flex-wrap: nowrap; }
 html[data-theme="dark"] body .app-header .header-actions>.primary-btn { flex: 1; min-width: 0; justify-content: center; }
 html[data-theme="dark"] body .dashboard-primary-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
 html[data-theme="dark"] body .dashboard-primary-metrics strong { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
 html[data-theme="dark"] body .sidebar .nav-item { background: transparent; color: #b2bbc5; }
 html[data-theme="dark"] body .sidebar .nav-item.active { background: #3b3033; color: #ffb1a7; }
}

@media print {
 :root { color-scheme: light; }
 [data-appearance-host],.appearance-dialog { display: none !important; }
}