/* Shared interaction surfaces, with a complete palette for each world.
   Keep page composition in classic.css / appearance.css / maple.css. */
:root[data-appearance="classic"] {
  --ui-panel:#1c241f; --ui-raised:#29332c; --ui-inset:#141c17;
  --ui-ink:#eeeede; --ui-muted:#bec7b8; --ui-line:#59644f;
  --ui-accent:#d5c18b; --ui-on-accent:#19231c; --ui-soft:#364034;
  --ui-danger:#ffc0b1; --ui-danger-bg:#482c29;
  --ui-control-line:#879679;
  --ui-success:#c2e3b8; --ui-success-bg:#304936; --ui-radius:9px;
}
:root[data-appearance="cloud"] {
  --ui-panel:#fffdf8; --ui-raised:#f0f4eb; --ui-inset:#e8efe3;
  --ui-ink:#354b40; --ui-muted:#4f6255; --ui-line:#b9cbb5;
  --ui-accent:#326752; --ui-on-accent:#fffdf8; --ui-soft:#e1eddc;
  --ui-danger:#914331; --ui-danger-bg:#fae8e0;
  --ui-control-line:#718370;
  --ui-success:#2c634c; --ui-success-bg:#e0efdd; --ui-radius:17px;
}
:root[data-appearance="maple"] {
  --ui-panel:#192b42; --ui-raised:#233950; --ui-inset:#122136;
  --ui-ink:#edf1f5; --ui-muted:#b7c8d8; --ui-line:#526b85;
  --ui-accent:#d8c18f; --ui-on-accent:#192637; --ui-soft:#2b425a;
  --ui-danger:#ffc1b6; --ui-danger-bg:#422c38;
  --ui-control-line:#8298ae;
  --ui-success:#adddc9; --ui-success-bg:#203f42; --ui-radius:11px;
}

/* Maple cards now inherit the same dark semantic palette as every dialog.
   Avoid a card-local palette: text, controls and statuses share one context. */

:root[data-appearance] {
  scrollbar-color:var(--ui-line) var(--ui-inset);
  & ::-webkit-scrollbar-thumb {background:var(--ui-line)!important}
  & .login-modal section {scrollbar-color:var(--ui-line) var(--ui-inset)}
  & .login-modal [role="dialog"] section {width:100%!important;max-width:none!important;margin-inline:0}
  & :is(.login-modal,.avatar-sheet)>section {
    background:var(--ui-panel)!important; color:var(--ui-ink)!important;
    border-color:var(--ui-line)!important;
  }
  & .login-modal :is(h2,h3,h4,label,legend,.candidate-name-line strong) {color:var(--ui-ink)!important}
  & .login-modal :is(p,.field-help,.form-state,.login-state,.eyebrow) {color:var(--ui-muted)!important}
  & .login-modal .eyebrow {font-size:11px;letter-spacing:.16em}
  & .login-modal :is(.field-help,.form-state,.login-state) {font-size:12px;line-height:1.7}
  & .login-modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),select,textarea) {
    background:var(--ui-inset)!important; color:var(--ui-ink)!important;
    border:1px solid var(--ui-control-line)!important; border-radius:var(--ui-radius)!important;
  }
  & .login-modal :is(input,textarea)::placeholder {color:var(--ui-muted)!important;opacity:1}
  & .login-modal input[readonly] {background:var(--ui-raised)!important;color:var(--ui-muted)!important}
  & .login-modal :is(input,select,textarea):focus-visible {outline:2px solid var(--ui-accent);outline-offset:2px}
  & :is(.login-modal,.avatar-sheet) :is(.primary,.ghost,.text-button,.loot-detail-receipt-action) {
    min-height:44px; border-radius:var(--ui-radius)!important; text-shadow:none!important;
    font:700 13px/1.5 'Noto Sans TC',sans-serif; letter-spacing:.025em;
  }
  & :is(.login-modal,.avatar-sheet) :is(.ghost,.text-button,.loot-detail-receipt-action) {
    background:var(--ui-raised)!important;color:var(--ui-ink)!important;
    border:1px solid var(--ui-line)!important;box-shadow:none!important;
  }
  & :is(.login-modal,.avatar-sheet) button.primary[class] {
    background:var(--ui-accent)!important;color:var(--ui-on-accent)!important;
    border:1px solid var(--ui-accent)!important;box-shadow:0 3px 0 var(--ui-inset)!important;
  }
  & :is(.primary,.ghost,.party-action,.text-button,.loot-detail-receipt-action):before {pointer-events:none}
  & :is(.primary,.ghost,.party-action).danger {
    background:var(--ui-danger-bg)!important;color:var(--ui-danger)!important;
    border:1px solid var(--ui-danger)!important;box-shadow:none!important;
  }
  & .login-modal button:is(.primary,.ghost).danger {background:var(--ui-danger-bg)!important;color:var(--ui-danger)!important;border-color:var(--ui-danger)!important;box-shadow:none!important}
  & :is(.login-modal,.avatar-sheet) button:disabled,
  & .party-action:disabled {
    opacity:1!important;background:var(--ui-raised)!important;color:var(--ui-muted)!important;
    border:1px solid var(--ui-line)!important;box-shadow:none!important;cursor:not-allowed;
  }
  & :is(button,a,summary):focus-visible {outline:3px solid var(--ui-accent)!important;outline-offset:3px}
  & .modal-close {width:44px!important;height:44px!important;min-height:44px;background:var(--ui-raised)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)!important;box-shadow:none!important}
  & .form-section {border-color:var(--ui-line)!important;background:transparent!important}
  & .party-create-actions {display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px!important}
  & .party-create-actions .login-state {min-height:0;margin:0;text-align:left;color:var(--ui-ink)!important}
  & .party-create-actions .login-state:empty {display:none}
  & .form-section legend b {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)}
  & .form-section .required {color:var(--ui-danger)!important}
  & .login-modal .dialog-actions {background:var(--ui-panel)!important;border-color:var(--ui-line)!important;box-shadow:none!important}
  & .login-modal label:has(>input[required],>select[required],>textarea[required]):before {justify-self:start;width:auto;background:var(--ui-soft)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)!important;font-size:11px;line-height:1.4;padding:3px 7px;border-radius:5px}
  & .login-modal label:has(>input[readonly]):before {content:'自動帶入'!important}
  & .party-manage-menu {background:transparent!important;border-color:var(--ui-line)!important}
  & .party-manage-menu>summary {min-height:58px;background:var(--ui-raised)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;padding:12px 16px!important;box-shadow:none!important}
  & .party-manage-menu>summary small {color:var(--ui-muted)!important;font-size:12px;line-height:1.6;white-space:normal}
  & .party-manage-menu>summary:after {color:var(--ui-muted)!important;opacity:1!important}
  & .party-manage-menu>div {background:var(--ui-panel)!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:none!important}
  & .party-manage-help {color:var(--ui-muted)!important;border-color:var(--ui-line)!important;font-size:12px;line-height:1.8}
  & .party-manage-menu .party-action,
  & .party-action.cancel {min-height:44px;background:var(--ui-raised)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:none!important}
  & .party-manage-menu .party-action.danger {background:var(--ui-danger-bg)!important;color:var(--ui-danger)!important;border-color:var(--ui-danger)!important}

  /* Selection is a checklist with a fixed action footer, not a second dark modal. */
  & #candidateModal .candidate-dialog {padding:0!important;overflow:hidden!important;box-shadow:0 20px 70px #0005!important}
  & .candidate-dialog-head {background:var(--ui-panel)!important;border-bottom:1px solid var(--ui-line)!important;padding:25px 64px 18px 24px}
  & .candidate-dialog-head h2 {font-size:26px;line-height:1.4;margin:8px 0}
  & .candidate-dialog-head p {font-size:13px;line-height:1.7;margin:0}
  & .candidate-guide {gap:8px;margin-top:16px}
  & .candidate-guide span {background:var(--ui-raised)!important;color:var(--ui-muted)!important;border:1px solid transparent!important;box-shadow:none!important;border-radius:var(--ui-radius)!important;font-size:12px;line-height:1.5;padding:8px 10px}
  & .candidate-guide span.active {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important}
  & .candidate-guide span b {background:var(--ui-panel)!important;color:var(--ui-muted)!important;font:700 11px/24px 'Noto Sans TC',sans-serif;border:1px solid var(--ui-line)!important;min-width:24px;height:24px}
  & .candidate-guide span.active b {background:var(--ui-accent)!important;color:var(--ui-on-accent)!important;border-color:var(--ui-accent)!important}
  & #candidateModal .candidate-list {display:block;background:var(--ui-inset)!important;padding:0 20px 20px;overscroll-behavior:contain;scrollbar-color:var(--ui-line) transparent}
  & .candidate-group {display:block;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;max-height:none!important;overflow:visible!important}
  & .candidate-confirmed {margin:15px 0 0;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-success-bg)}
  & .candidate-confirmed>summary {display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:54px;padding:12px;cursor:pointer;color:var(--ui-success);font-size:12px}
  & .candidate-confirmed>summary span {font-size:11px;color:var(--ui-muted)}
  & .candidate-confirmed>summary:after {content:'＋';font-size:17px}
  & .candidate-confirmed[open]>summary:after {content:'−'}
  & .candidate-confirmed .candidate-group {padding:0 9px!important}
  & .candidate-group-title {top:0!important;background:var(--ui-inset)!important;border:0!important;color:var(--ui-ink)!important;padding:17px 0 12px;font-size:13px;gap:12px}
  & .candidate-group-title strong {color:var(--ui-ink)!important}
  & .candidate-group-title span {background:var(--ui-raised)!important;color:var(--ui-muted)!important;border:1px solid var(--ui-line)!important;font-size:11px}
  & .candidate-row {background:var(--ui-panel)!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:none!important;gap:12px;min-height:98px;margin:0 0 10px;padding:14px}
  & .candidate-row.can-manage {grid-template-columns:44px 52px minmax(0,1fr) auto}
  & .candidate-row.member-view {grid-template-columns:52px minmax(0,1fr) auto}
  & .candidate-row:has(input:checked) {background:var(--ui-success-bg)!important;border-color:var(--ui-success)!important}
  & .candidate-row:has(input:focus-visible) {outline:2px solid var(--ui-accent);outline-offset:2px}
  & #candidateModal input.candidate-check {
    appearance:none!important;display:grid!important;place-content:center;
    width:44px!important;min-width:44px!important;max-width:44px!important;
    height:44px!important;min-height:44px!important;max-height:44px!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:8px!important;
    background:transparent!important;box-shadow:none!important;opacity:1!important;cursor:pointer;
  }
  & #candidateModal input.candidate-check:before {
    content:''!important;display:grid;place-content:center;box-sizing:border-box;
    width:24px;height:24px;border:2px solid var(--ui-control-line);border-radius:7px;
    background:var(--ui-inset);transform:none!important;
  }
  & #candidateModal input.candidate-check:checked:before {content:'✓'!important;background:var(--ui-accent);color:var(--ui-on-accent)!important;border-color:var(--ui-accent);font:800 16px/1 sans-serif}
  & #candidateModal input.candidate-check:disabled {cursor:default}
  & .candidate-avatar {width:52px;height:52px;border:1px solid var(--ui-line)!important;background:var(--ui-soft)!important;color:var(--ui-ink)!important;border-radius:13px!important;box-shadow:none!important}
  & .candidate-avatar span {color:var(--ui-ink)!important;font-size:25px}
  & .candidate-avatar b {background:var(--ui-accent)!important;color:var(--ui-on-accent)!important;border:2px solid var(--ui-panel)!important}
  & .candidate-name-line {gap:8px;flex-wrap:wrap}
  & .candidate-name-line strong {font:700 16px/1.5 'Noto Sans TC',sans-serif;white-space:normal;overflow-wrap:anywhere}
  & .candidate-name-line>span {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important;font-size:11px;white-space:nowrap}
  & .candidate-role-line {color:var(--ui-muted)!important;font-size:12px;line-height:1.6;margin-top:3px}
  & #candidateModal .candidate-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px}
  & #candidateModal .candidate-stats span {display:grid;gap:3px;background:var(--ui-raised)!important;color:var(--ui-ink)!important;line-height:1.6;border-radius:6px;padding:7px 8px;min-width:0}
  & #candidateModal .candidate-stats small {font-size:11px;color:var(--ui-muted)!important;white-space:nowrap}
  & #candidateModal .candidate-stats b {font:700 13px/1.5 'Noto Sans TC',sans-serif;color:var(--ui-ink)!important;overflow-wrap:anywhere}
  & :is(.candidate-availability b,.match-badge) {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)!important;box-shadow:none!important;font-size:11px}
  & .candidate-row[data-candidate-status="selected"] .match-badge {background:var(--ui-success-bg)!important;color:var(--ui-success)!important;border-color:var(--ui-success)!important}
  & .candidate-row[data-candidate-status="not_selected"] .match-badge {background:var(--ui-raised)!important;color:var(--ui-muted)!important}
  & .candidate-history {background:transparent!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important}
  & .candidate-history>summary {color:var(--ui-ink)!important;min-height:44px;padding:12px}
  & .candidate-history>summary span {color:var(--ui-muted)!important;font-size:11px}
  & .candidate-history .candidate-group {padding:0 10px!important}
  & .candidate-waiting {background:var(--ui-raised)!important;border:1px dashed var(--ui-line)!important;color:var(--ui-ink)!important}
  & .candidate-waiting span {color:var(--ui-muted)!important;font-size:12px}
  & .refill-mode .candidate-group-selected .candidate-row {grid-template-columns:44px 44px minmax(0,1fr) auto;min-height:110px}
  & .refill-mode .candidate-group-selected .candidate-avatar {width:44px;height:44px}
  & .refill-mode .candidate-group-selected .candidate-stats {display:flex}
  & .candidate-action-bar {background:var(--ui-panel)!important;border-top:1px solid var(--ui-line)!important;box-shadow:0 -6px 20px #0000000d!important;padding:16px 24px max(16px,env(safe-area-inset-bottom))!important;gap:14px}
  & .candidate-selection-summary {gap:15px;min-width:0}
  & .selection-count b {color:var(--ui-accent)!important;font-size:32px;font-variant-numeric:tabular-nums}
  & .selection-count i {color:var(--ui-muted)!important;font-size:13px}
  & .selection-copy {min-width:0;white-space:normal!important}
  & .selection-copy strong {color:var(--ui-ink)!important;font-size:13px}
  & .selection-copy small {color:var(--ui-muted)!important;font-size:11px;line-height:1.6;white-space:normal!important}
  & .candidate-selection-summary.over :is(b,small) {color:var(--ui-danger)!important}
  & .candidate-selection-summary.complete :is(b,small) {color:var(--ui-success)!important}
  & #releaseSlotPanel {background:var(--ui-raised)!important;border-top:1px solid var(--ui-line)!important;padding:16px 24px}
  & #releaseSlotPanel label {font-size:12px;line-height:1.8}
  & #candidateState:empty {display:none}
  & .login-modal button[class]:disabled {background:var(--ui-raised)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important;filter:none!important;transform:none!important;box-shadow:none!important}

  /* Notifications, account administration and ledger details use the same
     semantic surfaces; success and destructive actions remain distinguishable. */
  & :is(.notification-item,.push-status-card,.push-device-summary,.notification-master,.notification-sound-setting,.membership-review-card,.role-history-item,.management-summary article,.management-section,.onboarding-setup-card,.loot-auto-status,.loot-member-check,.loot-calculation,.loot-stage-note,.loot-detail-money,.loot-detail-section,.loot-detail-members>div,.loot-detail-image-state) {
    background:var(--ui-raised)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important;box-shadow:none!important;border-radius:var(--ui-radius)!important;
  }
  & :is(.notification-item,.push-status-card,.push-device-summary,.notification-master,.notification-sound-setting,.membership-review-card,.role-history-item,.management-summary,.management-section,.onboarding-setup-card,.loot-auto-status,.loot-member-check,.loot-calculation,.loot-stage-note,.loot-detail-money,.loot-detail-section,.loot-detail-members) :is(strong,b,h3) {color:var(--ui-ink)!important}
  & :is(.notification-item,.push-status-card,.push-device-summary,.notification-master,.notification-sound-setting,.membership-review-card,.role-history-item,.management-summary,.management-section,.onboarding-setup-card,.loot-auto-status,.loot-member-check,.loot-calculation,.loot-stage-note,.loot-detail-money,.loot-detail-section,.loot-detail-members) :is(p,small,span:not(.eyebrow)) {color:var(--ui-muted)!important}
  & .notification-item.unread {border-color:var(--ui-accent)!important;background:var(--ui-soft)!important}
  & .notification-item header strong {font-size:14px}
  & .notification-item p {font-size:13px;line-height:1.8}
  & .notification-item small {font-size:11px;line-height:1.6}
  & :is(.notification-item em,.notification-group-title span,.management-section header>b,.onboarding-setup-card>b) {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important}
  & .notification-dot {background:var(--ui-accent)!important;box-shadow:none!important}
  & .notification-item.read .notification-dot {background:var(--ui-line)!important}
  & .notification-item.read {opacity:1!important}
  & .notification-group {background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;max-height:none!important;overflow:visible!important}
  & .notification-group-title {color:var(--ui-ink)!important;border-color:var(--ui-line)!important}
  & .notification-group-title strong {color:var(--ui-ink)!important}
  & #notificationPreferencesForm fieldset {border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)}
  & #notificationPreferencesForm label {min-height:44px;font-size:13px}
  & .login-modal input[type="checkbox"]:not(.candidate-check) {appearance:auto!important;accent-color:var(--ui-accent);width:20px!important;min-width:20px!important;height:20px!important;min-height:20px!important;padding:0!important;border-radius:4px!important;box-shadow:none!important}
  & :is(.management-item,.management-activity li,.loot-activity-list li) {border-color:var(--ui-line)!important}
  & .loot-activity-tools {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0}
  & .loot-activity-tools>span {font-size:12px;line-height:1.7;color:var(--ui-muted)!important}
  & .loot-activity-tools .ghost {min-height:44px!important;padding:9px 13px!important;font-size:12px}
  & .loot-activity-list {margin:12px 0 0}
  & .loot-activity-list li {padding:0 0 20px;gap:10px}
  & .loot-activity-list li>i {border-color:var(--ui-accent)!important;background:var(--ui-raised)!important;margin-top:5px}
  & .loot-activity-list li:not(:last-child):before {background:var(--ui-line)!important}
  & .loot-activity-list li>div {grid-template-columns:minmax(0,1fr);gap:5px}
  & .loot-activity-list strong {font-size:14px;line-height:1.6;overflow-wrap:anywhere}
  & .loot-activity-list span {font-size:13px;line-height:1.7;overflow-wrap:anywhere}
  & .loot-activity-list small {font-size:11px;line-height:1.8;color:var(--ui-muted)!important;overflow-wrap:anywhere}
  & .loot-activity-list time {color:inherit}
  & .loot-activity-list li:focus-visible {outline:2px solid var(--ui-accent);outline-offset:4px;border-radius:4px}
  & .loot-activity-error {background:var(--ui-soft);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:12px;font-size:12px;line-height:1.8}
  & .loot-activity-footer {display:flex;flex-wrap:wrap;gap:10px;padding-top:8px;border-top:1px solid var(--ui-line)}
  & .loot-activity-footer .ghost {min-height:44px!important;flex:1 1 160px;padding:12px!important;font-size:12px}
  & .loot-receipt-section {scroll-margin-top:75px}
  & .loot-detail-image-slot:empty {display:none}
  & .login-modal :is(.management-section,.loot-detail-section) {padding:18px!important;max-height:none;overflow:visible}
  & :is(.management-empty,.management-more,.loot-progress-copy) {color:var(--ui-muted)!important;font-size:12px;line-height:1.8}
  & .role-history-item p span {background:var(--ui-inset)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important}
  & .membership-review-tabs button {background:var(--ui-raised)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)!important;min-height:44px}
  & .membership-review-tabs button.active {background:var(--ui-accent)!important;color:var(--ui-on-accent)!important}
  & .loot-detail-money .result strong {color:var(--ui-accent)!important}
  & .loot-detail-head p b {color:var(--ui-ink)!important}
  & .loot-status {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)!important;font-size:11px}
  & .loot-status:is(.distributed,.closed) {background:var(--ui-success-bg)!important;color:var(--ui-success)!important;border-color:var(--ui-success)!important}
  & .loot-status.pending_approval {background:var(--ui-danger-bg)!important;color:var(--ui-danger)!important;border-color:var(--ui-danger)!important}
  & .loot-card :is(.loot-card-copy>p,.loot-drop-inline>span,.loot-value-row span,.loot-card-progress>div>span,.loot-card-footer>span) {color:var(--ui-muted)!important}
  & :is(.party-layout-switch,.loot-layout-switch) button:not(.active) {color:var(--ui-muted)!important}
  & .loot-card-receipt.received i {background:var(--ui-success-bg)!important;color:var(--ui-success)!important;border-color:var(--ui-success)!important}
  & .loot-member-state {background:var(--ui-soft)!important;color:var(--ui-ink)!important;font-size:11px}
  & .loot-approval-box {background:var(--ui-soft)!important;border-color:var(--ui-line)!important;border-radius:var(--ui-radius)}
  & .loot-approval-box strong {color:var(--ui-ink)!important}
  & :is(.loot-lock-box,.loot-locked-notice,.loot-party-availability,.party-integrity-warning) {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important;border-radius:var(--ui-radius)}
  & :is(.loot-lock-box,.loot-locked-notice,.loot-party-availability,.party-integrity-warning) :is(strong,b) {color:var(--ui-ink)!important}
  & :is(.loot-lock-box,.loot-locked-notice,.loot-party-availability,.party-integrity-warning) :is(p,span,small) {color:var(--ui-muted)!important}
  & .loot-detail-money .result {border-color:var(--ui-line)!important}
  & .loot-detail-members>div.received {background:var(--ui-success-bg)!important;border-color:var(--ui-success)!important}
  & .loot-detail-members>div.received .loot-member-state {color:var(--ui-success)!important}
  & .loot-member-avatar {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important}
  & .loot-detail-receipt-action.received {background:var(--ui-success-bg)!important;color:var(--ui-success)!important;border-color:var(--ui-success)!important}
  & .loot-progress {background:var(--ui-inset)!important}
  & .loot-progress>i {background:var(--ui-accent)!important}
  & .loot-receipt-group h3 b {background:var(--ui-soft)!important;color:var(--ui-ink)!important}
  & :is(.onboarding-steps article,.onboarding-note,.desktop-web-guide) {background:var(--ui-raised)!important;border-color:var(--ui-line)!important;border-radius:var(--ui-radius)}
  & :is(.onboarding-steps article,.onboarding-note,.desktop-web-guide) strong {color:var(--ui-ink)!important}
  & :is(.onboarding-steps article,.onboarding-note,.desktop-web-guide) :is(p,small) {color:var(--ui-muted)!important;line-height:1.8}
  & :is(.onboarding-steps article,.desktop-web-guide li)>b {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important}
  & .onboarding-section-heading {border-color:var(--ui-line)!important;color:var(--ui-ink)!important}
  & .onboarding-section-heading small {color:var(--ui-muted)!important}
  & .character-card p {background:var(--ui-inset)!important;color:var(--ui-muted)!important;border:1px solid var(--ui-line);border-radius:7px;padding:8px 10px;font-size:12px}
  & .selected-label {background:var(--ui-accent)!important;color:var(--ui-on-accent)!important;box-shadow:none!important;border:0!important}
  & .toast {background:var(--ui-panel)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)!important}
}

/* Match maple.css's card-level specificity for both background and ink. */
:root[data-appearance="maple"] #partyList {
  &[data-layout="list"]>.party-panel .eyebrow {color:var(--ui-muted)!important}
  & .party-manage-menu>summary,
  & .party-actions>.party-action.cancel {background:var(--ui-raised)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important}
  & .party-manage-menu>div {background:var(--ui-inset)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important}
  & .party-manage-menu[open]>summary {background:var(--ui-soft)!important;border-color:var(--ui-accent)!important}
  & .party-actions>.party-action[data-party-action].cancel {background:var(--ui-danger-bg)!important;color:var(--ui-danger)!important;border-color:var(--ui-danger)!important}
  & .party-manage-menu .party-action.danger {background:var(--ui-danger-bg)!important;color:var(--ui-danger)!important;border-color:var(--ui-danger)!important}
  & .party-manage-menu>summary small {font-weight:500}
  & .party-manage-menu .party-action:disabled {background:var(--ui-raised)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important}
}
:root[data-appearance="cloud"] .character-avatar {width:64px;height:68px!important;border:3px solid #fff!important;background:#e1eddc!important;color:#326752!important;border-radius:23px 23px 28px 28px!important;box-shadow:0 3px 0 #bfd0b7!important}
:root[data-appearance="cloud"] .character-avatar:before,
:root[data-appearance="cloud"] .character-avatar:after {display:none!important}
:root[data-appearance="cloud"] .character-card small:before {display:none!important}

/* Readable secondary information across pages, not just inside dialogs.
   Carousel neighbours retain full text contrast; position and borders convey
   the selected card without fading all its descendants. */
:root[data-appearance] {
  & :is(#partyList>.party-panel,#lootList>.loot-card) {opacity:1!important;filter:none!important}
  & .drawer-account :is(small,.drawer-account-chevron) {color:var(--ui-muted)!important}
  & .drawer-account-copy small {font-size:11px!important;letter-spacing:.06em}
  & #drawerProfileFallback {color:var(--ui-ink)!important}
  & .loot-flow-guide small {color:var(--ui-muted)!important;font-size:11px}
  & #mainContent .member-summary strong {color:var(--ui-accent)!important}
  & #mainContent .member-summary span {color:var(--ui-muted)!important}
  & #mainContent .member-system-role {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line);font-size:11px}
  & #mainContent .panel:not(.party-panel) .meta span {color:var(--ui-muted)!important}
  & #mainContent .guide-card-actions .panel-status {background:var(--ui-success-bg)!important;color:var(--ui-success)!important;border-color:var(--ui-line)!important}
  & #mainContent .search>span {color:var(--ui-muted)!important}
  & #mainContent .add-card>b {color:var(--ui-accent)!important}
  & #mainContent .character-card p {color:var(--ui-muted)!important}
  & #mainContent .party-manage-menu>summary b {color:var(--ui-ink)!important}
  & #mainContent .loot-card-copy>p {color:var(--ui-muted)!important}
  & #partyList>.party-panel>.meta span {color:var(--ui-muted)!important}
  & #lootList[data-layout="list"]>.loot-card {background:var(--ui-panel)!important;border-color:var(--ui-line)!important}
  & #lootList[data-layout="list"]>.loot-card.has-own-unreceived {border-color:var(--ui-accent)!important}
  & #lootList[data-layout="list"]>.loot-card.has-own-unreceived .loot-card-footer>span {color:var(--ui-accent)!important}
  & #onboardingModal :is(.onboarding-section-heading>span,.desktop-web-guide>div>span) {color:var(--ui-ink)!important}
  & #onboardingModal .desktop-web-guide li {background:var(--ui-inset)!important;border:1px solid var(--ui-line)}
  & #onboardingModal .desktop-web-guide p small {color:var(--ui-muted)!important}
  & #onboardingModal .onboarding-note {color:var(--ui-muted)!important}
}
:root[data-appearance="cloud"] {
  & .cloud-welcome p {color:var(--ui-muted)!important}
  & .cloud-welcome h1>span {color:#90602e!important}
  & .stat-grid :is(span,small) {color:var(--ui-muted)!important}
  & :is(.guide-row i,.member-avatar) {background:var(--ui-soft)!important;color:var(--ui-accent)!important}
}

@media(max-width:620px) {
  :root[data-appearance] {
    & .candidate-dialog-head {padding:22px 60px 15px 18px}
    & .candidate-dialog-head h2 {font-size:25px}
    & .candidate-guide {gap:5px;margin-top:12px}
    & .candidate-guide span {font-size:11px;padding:5px 8px}
    & #candidateModal .candidate-list {padding:0 12px 12px}
    & .candidate-row {gap:9px;padding:11px;min-height:110px}
    & .candidate-row.can-manage,
    & .refill-mode .candidate-group-selected .candidate-row {grid-template-columns:44px 44px minmax(0,1fr)}
    & .candidate-row.member-view {grid-template-columns:44px minmax(0,1fr)}
    & .candidate-avatar {width:44px;height:44px}
    & .candidate-name-line {gap:5px}
    & .candidate-name-line strong {font-size:15px}
    & .candidate-stats {gap:3px}
    & .candidate-stats span {font-size:11px;padding:2px 4px}
    & .candidate-row .match-badge {grid-column:3;grid-row:2;justify-self:start;padding:4px 9px}
    & .candidate-row.member-view .match-badge {grid-column:2}
    & .candidate-action-bar {grid-template-columns:1fr;padding:13px 18px max(15px,env(safe-area-inset-bottom))!important;gap:10px}
    & .candidate-action-bar .primary {min-height:48px}
    & #releaseSlotPanel {padding:12px 18px}
    & .selection-count b {font-size:30px}
    & .loot-detail-members>div {gap:10px}
    & .management-item {gap:10px;flex-wrap:wrap}
  }
}
@media(max-height:500px) {
  :root[data-appearance] .candidate-guide {display:none!important}
  :root[data-appearance] .candidate-dialog-head {padding-top:12px;padding-bottom:10px}
  :root[data-appearance] .candidate-dialog-head h2 {font-size:21px;margin:3px 0}
}

/* Shared roster entry: applications stay distinct from the selected team. */
:root[data-appearance] {
  & .party-roster-block {min-width:0;position:relative;z-index:1}
  & .party-roster-preview {display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:11px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-inset);color:var(--ui-ink);text-align:left;cursor:pointer;box-shadow:none}
  & .party-roster-preview:hover {background:var(--ui-soft);border-color:var(--ui-control-line)}
  & .roster-avatars {display:flex;align-items:center;flex:0 1 auto;min-width:0;padding-left:7px}
  & .roster-avatar {display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;margin-left:-7px;border:2px solid var(--ui-inset);border-radius:50%;background:var(--ui-soft);color:var(--ui-ink);font:700 13px/1 sans-serif;overflow:hidden}
  & .roster-avatar img {display:block;width:100%;height:100%;object-fit:cover}
  & .roster-avatar .image-letter-fallback {color:var(--ui-ink)!important;font:inherit}
  & .roster-more {margin-left:5px;color:var(--ui-muted);font:700 11px/1 sans-serif}
  & .roster-empty {border:1px dashed var(--ui-control-line);color:var(--ui-muted)}
  & .roster-preview-copy {display:grid;gap:2px;min-width:0;flex:1}
  & .roster-preview-copy strong {color:var(--ui-ink)!important;font:700 12px/1.6 'Noto Sans TC',sans-serif}
  & .roster-preview-copy small {color:var(--ui-muted)!important;font:500 11px/1.6 'Noto Sans TC',sans-serif}
  & .roster-arrow {color:var(--ui-accent);font:700 18px/1 sans-serif}
  & :is(.raid-card,.party-panel) .party-roster-note {color:var(--ui-muted)!important;font:400 11px/1.8 'Noto Sans TC',sans-serif;margin:8px 1px 0!important}
  & #partyList[data-layout="cards"]>.party-panel>.party-roster-block {margin:12px 22px 0;align-self:start}
  & .raid-card .party-roster-block {margin-top:12px}
  & .raid-card .raid-info {min-width:0}
  & #partyList[data-layout="list"]>.party-panel {grid-template-areas:"art title status" "art roster actions" "art requirements actions" "art meta actions" "art warning warning";grid-template-rows:minmax(74px,auto) auto auto auto auto}
  & #partyList[data-layout="list"]>.party-panel>.party-roster-block {grid-area:roster;margin:0}
}
:root[data-appearance="cloud"] #partyList[data-layout="cards"]>.party-panel>.party-roster-block {margin:0}
@media(max-width:849px) {
  :root[data-appearance] #partyList[data-layout="list"]>.party-panel {grid-template-areas:"art title" "art status" "capacity capacity" "roster roster" "requirements requirements" "meta meta" "warning warning" "actions actions";grid-template-rows:auto}
}
@media(max-width:620px) {
  :root[data-appearance] {
    & #partyList[data-layout="cards"]>.party-panel>.party-roster-block {margin-inline:17px}
    & .party-roster-preview {gap:9px}
    & .raid-card .roster-avatar {flex-basis:28px;width:28px;height:28px}
    & .raid-card .party-roster-preview {flex-wrap:wrap}
    & #candidateModal .candidate-row {--candidate-detail-col:3}
    & #candidateModal .candidate-row.member-view {--candidate-detail-col:2}
    & #candidateModal .candidate-info {display:contents}
    & #candidateModal .candidate-name-line {grid-column:var(--candidate-detail-col);grid-row:1}
    & #candidateModal .candidate-role-line {grid-column:var(--candidate-detail-col);grid-row:2}
    & #candidateModal .candidate-stats {grid-column:1/-1;grid-row:4;margin:0}
    & #candidateModal .candidate-avatar {grid-column:calc(var(--candidate-detail-col) - 1);grid-row:1/4}
    & #candidateModal .candidate-check {grid-column:1;grid-row:1/4}
    & #candidateModal .candidate-row .match-badge {grid-column:var(--candidate-detail-col);grid-row:3}
    & #candidateModal .candidate-availability {display:none}
  }
  :root[data-appearance="cloud"] #partyList[data-layout="cards"]>.party-panel>.party-roster-block {margin:0}
}

/* v87: all dialog controls live inside the visual viewport and safe area. */
:root {
  --dialog-safe-top:env(safe-area-inset-top,0px);
  --dialog-safe-right:env(safe-area-inset-right,0px);
  --dialog-safe-bottom:env(safe-area-inset-bottom,0px);
  --dialog-safe-left:env(safe-area-inset-left,0px);
  --dialog-edge:12px;
}
:root:has(body.dialog-open),body.dialog-open {overflow:hidden;overscroll-behavior:none}
:root[data-appearance] {
  & :is(.login-modal,.avatar-sheet) {
    box-sizing:border-box;inset:auto!important;
    top:var(--dialog-viewport-top,0px)!important;left:var(--dialog-viewport-left,0px)!important;
    width:var(--dialog-viewport-width,100%)!important;
    height:100vh;height:var(--dialog-viewport-height,100dvh)!important;
    padding:max(var(--dialog-edge),var(--dialog-safe-top)) max(var(--dialog-edge),var(--dialog-safe-right)) max(var(--dialog-edge),var(--dialog-safe-bottom)) max(var(--dialog-edge),var(--dialog-safe-left))!important;
    align-items:center!important;justify-content:center;isolation:isolate;
    --dialog-available-height:calc(var(--dialog-viewport-height,100dvh) - max(var(--dialog-edge),var(--dialog-safe-top)) - max(var(--dialog-edge),var(--dialog-safe-bottom)));
  }
  & :is(.login-modal,.avatar-sheet)>section:is([role="dialog"],[role="alertdialog"]) {
    --dialog-gutter:24px;min-width:0;
    max-height:var(--dialog-available-height)!important;
    padding:0 var(--dialog-gutter) 24px!important;
    scroll-padding-top:76px;scroll-padding-bottom:24px;
    overscroll-behavior:contain;isolation:isolate;
  }
  & :is(.login-modal,.avatar-sheet)>section:is([role="dialog"],[role="alertdialog"]):before,
  & :is(.login-modal,.avatar-sheet)>section:is([role="dialog"],[role="alertdialog"]):after {pointer-events:none}
  & .dialog-close-bar {
    position:sticky;top:0;z-index:40;flex:0 0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:64px;margin:0 calc(-1 * var(--dialog-gutter)) 18px;
    padding:8px 12px;background:var(--ui-panel);border-bottom:1px solid var(--ui-line);
  }
  & .dialog-chrome-brand {font:700 13px/1.5 'Noto Serif TC',serif;letter-spacing:.18em;color:var(--ui-muted)}
  & .dialog-close-bar .modal-close {
    position:static!important;inset:auto!important;float:none!important;
    display:inline-flex!important;align-items:center;justify-content:center;gap:6px;
    width:auto!important;min-width:88px!important;height:48px!important;min-height:48px!important;
    flex:0 0 auto;margin:0!important;padding:8px 12px!important;
    font:700 13px/1.4 'Noto Sans TC',sans-serif;
    color:var(--ui-ink)!important;background:var(--ui-raised)!important;
    border:1px solid var(--ui-control-line)!important;border-radius:var(--ui-radius)!important;
    touch-action:manipulation;pointer-events:auto;cursor:pointer;
  }
  & .dialog-close-bar .modal-close:before,& .dialog-close-bar .modal-close:after {display:none!important}
  & .dialog-close-icon {font:400 25px/1 sans-serif;color:inherit!important;pointer-events:none}
  & #candidateModal .candidate-dialog {
    --dialog-gutter:0px;padding:0!important;height:min(860px,var(--dialog-available-height))!important;
    max-height:var(--dialog-available-height)!important;
  }
  & #candidateModal .dialog-close-bar {margin:0;flex-shrink:0}
  & #candidateModal .candidate-dialog-head {padding:16px 22px;flex-shrink:0}
  & #candidateModal .candidate-action-bar {padding-bottom:16px!important;flex-shrink:0}
  & #candidateModal #releaseSlotPanel {flex-shrink:0}
  & .avatar-sheet .sheet-handle {display:none}
}
@media(max-width:849px) {
  :root {--dialog-edge:8px}
  :root[data-appearance] {
    & :is(.login-modal,.avatar-sheet)>section:is([role="dialog"],[role="alertdialog"]) {--dialog-gutter:18px}
    & #candidateModal .candidate-dialog {--dialog-gutter:0px}
    & .login-modal :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {font-size:16px!important}
  }
}
:root[data-appearance] body.dialog-compact {
  & #partyModal .party-create-actions {position:sticky!important;z-index:6;bottom:calc(-1 * var(--dialog-gutter))!important;margin:18px calc(-1 * var(--dialog-gutter)) calc(-1 * var(--dialog-gutter))!important;padding:10px var(--dialog-gutter)!important;border-top:1px solid var(--ui-line)}
  & #candidateModal .candidate-guide {display:none!important}
  & #candidateModal {grid-template-columns:minmax(0,1fr);justify-items:center}
  & #candidateModal .candidate-dialog {container-type:size;container-name:candidate-dialog}
  & #candidateModal .candidate-dialog-head {padding:8px 18px}
  & #candidateModal .candidate-dialog-head h2 {font-size:21px!important;margin:3px 0!important}
  & .dialog-close-bar {min-height:56px;padding-block:4px}
}

/* v88: the team size describes the expedition, never a registration limit. */
:root[data-appearance] {
  & #partyList>.party-panel .party-capacity-summary.recruitment-format {
    display:flex;align-items:center;gap:16px;grid-area:capacity;
    min-width:0;padding:18px 0!important;border:0!important;border-bottom:1px solid var(--ui-line)!important;
    border-radius:0!important;background:transparent!important;color:var(--ui-ink)!important;
  }
  & #partyList>.party-panel .recruitment-format .party-format-medal {
    display:flex;align-items:baseline;gap:5px;flex:0 0 auto;min-width:74px;
    padding:9px 13px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);
    background:var(--ui-soft);
  }
  & #partyList>.party-panel .recruitment-format .party-format-medal strong {font:800 36px/1 'Noto Sans TC',sans-serif;color:var(--ui-accent)!important;letter-spacing:-.06em}
  & #partyList>.party-panel .recruitment-format .party-format-medal span {font:700 12px/1.5 'Noto Sans TC',sans-serif;color:var(--ui-ink)!important;white-space:nowrap}
  & #partyList>.party-panel .recruitment-format .party-format-copy {display:grid;gap:4px;min-width:0}
  & #partyList>.party-panel .recruitment-format .party-format-copy b {font:700 14px/1.6 'Noto Sans TC',sans-serif;color:var(--ui-ink)!important}
  & #partyList>.party-panel .recruitment-format .party-format-copy span {font:400 11px/1.7 'Noto Sans TC',sans-serif;color:var(--ui-muted)!important}
  & #partyList[data-layout="list"]>.party-panel {grid-template-areas:"art title status" "art roster capacity" "art requirements actions" "art meta actions" "art warning warning";grid-template-rows:auto}
  & .raid-format-line {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:13px 0 4px;font:500 11px/1.6 'Noto Sans TC',sans-serif;color:var(--ui-muted)}
  & .raid-format-line strong {display:inline-flex;padding:3px 9px;border:1px solid var(--ui-line);border-radius:6px;background:var(--ui-soft);color:var(--ui-ink)!important;font-size:12px}
  & .raid-format-line span {color:var(--ui-muted)!important}
  & #candidateModal .candidate-guide {display:none!important}
  & #candidateModal .candidate-dialog-head {padding:15px 22px 16px;background:var(--ui-panel)!important}
  & #candidateModal .candidate-dialog-head .eyebrow {color:var(--ui-accent)!important;letter-spacing:.2em}
  & #candidateModal .candidate-dialog-head h2 {font:700 27px/1.4 'Noto Serif TC',serif;margin:5px 0 7px!important}
  & #candidateModal .candidate-overview {display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:13px;font:500 12px/1.5 'Noto Sans TC',sans-serif;color:var(--ui-muted)}
  & #candidateModal .candidate-overview b {color:var(--ui-ink);font-weight:800}
  & #candidateModal .candidate-format {display:inline-flex;align-items:baseline;gap:5px;padding:5px 10px;border:1px solid var(--ui-line);border-radius:7px;background:var(--ui-soft);color:var(--ui-ink);white-space:nowrap}
  & #candidateModal .candidate-format b {font:800 21px/1.2 'Noto Sans TC',sans-serif;color:var(--ui-accent)}
  & #candidateModal .candidate-public-label {margin-left:auto;font-size:11px;color:var(--ui-muted)}
  & #candidateModal .candidate-tools {display:grid;grid-template-columns:minmax(0,1fr) minmax(145px,.55fr);gap:6px 10px;flex:0 0 auto;padding:12px 22px 9px;background:var(--ui-raised);border-bottom:1px solid var(--ui-line)}
  & #candidateModal .candidate-tools label {display:grid;gap:5px;margin:0;min-width:0;font:700 11px/1.5 'Noto Sans TC',sans-serif}
  & #candidateModal .candidate-tools :is(input,select) {width:100%;min-width:0;min-height:44px;margin:0;padding:9px 10px;font-size:13px}
  & #candidateModal .candidate-tools output {grid-column:1/-1;min-height:18px;font:500 11px/1.6 'Noto Sans TC',sans-serif;color:var(--ui-muted)}
  & #candidateModal .candidate-list {padding:0 20px 18px!important;scroll-padding-top:50px}
  & #candidateModal .candidate-group-title {font:700 12px/1.6 'Noto Sans TC',sans-serif;padding:14px 0 10px}
  & #candidateModal .candidate-row {position:relative;min-height:114px;padding:16px;gap:12px;border-color:var(--ui-line)!important;transition:border-color .15s,background .15s}
  & #candidateModal .candidate-row.can-manage:not(:has(input.candidate-check:disabled)):hover {border-color:var(--ui-accent)!important}
  & #candidateModal .candidate-row.member-view {cursor:default}
  & #candidateModal .candidate-row .candidate-name-line strong {font-size:17px;letter-spacing:.025em}
  & #candidateModal .candidate-stats {gap:8px;margin-top:12px}
  & #candidateModal .candidate-stats span {padding:7px 9px;background:var(--ui-inset)!important;border:1px solid var(--ui-line);border-radius:7px}
  & #candidateModal .candidate-stats small {font-size:11px}
  & #candidateModal .candidate-stats b {font-size:15px;letter-spacing:.015em;font-variant-numeric:tabular-nums}
  & #candidateModal .candidate-row:has(input:checked) .match-badge {background:var(--ui-success-bg)!important;color:var(--ui-success)!important;border-color:var(--ui-success)!important}
  & #candidateModal :is(.candidate-overview,.candidate-tools,.candidate-row,.candidate-group,.candidate-history,.candidate-confirmed,#candidateNoMatches)[hidden] {display:none!important}
  & #candidateNoMatches {margin-top:18px}
}
@media(min-width:850px) {
  :root[data-appearance] #partyList[data-layout="list"]>.party-panel {
    & .party-capacity-summary.recruitment-format {padding:0!important;align-self:start;gap:9px;border:0!important}
    & .recruitment-format .party-format-medal {padding:7px 9px;min-width:0}
    & .recruitment-format .party-format-medal strong {font-size:27px}
    & .recruitment-format .party-format-copy b {display:none}
    & .recruitment-format .party-format-copy span {font-size:11px}
  }
}
@media(max-width:849px) {
  :root[data-appearance] #partyList[data-layout="list"]>.party-panel {grid-template-areas:"art title" "art status" "capacity capacity" "roster roster" "requirements requirements" "meta meta" "warning warning" "actions actions"}
}
@media(max-width:620px) {
  :root[data-appearance] {
    & #partyList>.party-panel .party-capacity-summary.recruitment-format {gap:12px}
    & #partyList>.party-panel .recruitment-format .party-format-medal {padding:9px 10px}
    & #partyList>.party-panel .recruitment-format .party-format-copy span {font-size:11px}
    & #candidateModal .candidate-dialog-head {padding:13px 16px}
    & #candidateModal .candidate-dialog-head h2 {font-size:25px}
    & #candidateModal .candidate-tools {padding:10px 14px 8px;grid-template-columns:minmax(0,1fr) minmax(132px,.7fr);gap:6px 8px}
    & #candidateModal .candidate-tools :is(input,select) {font-size:16px!important;padding-inline:8px}
    & #candidateModal .candidate-list {padding:0 12px 14px!important}
    & #candidateModal .candidate-row {padding:12px;gap:6px 9px}
    & #candidateModal .candidate-name-line strong {font-size:16px}
    & #candidateModal .candidate-stats {gap:5px;margin-top:7px}
    & #candidateModal .candidate-stats span {padding:7px 6px}
    & #candidateModal .candidate-stats b {font-size:14px}
    & #candidateModal .candidate-public-label {font-size:11px;margin-left:0}
  }
}
:root[data-appearance] body.dialog-compact {
  & #candidateModal .candidate-dialog-head {padding:8px 16px}
  & #candidateModal .candidate-dialog-head .eyebrow {display:none}
  & #candidateModal .candidate-dialog-head p {font-size:12px}
  & #candidateModal .candidate-overview {margin-top:7px;gap:7px 12px}
  & #candidateModal .candidate-tools {padding-block:8px;gap:4px 8px}
  & #candidateModal .candidate-tools label>span {display:none}
  & #candidateModal .candidate-tools output {display:none}
}
@media(prefers-reduced-motion:reduce) {
  :root[data-appearance] #candidateModal .candidate-row {transition:none}
}
@container candidate-dialog (max-height:460px) {
  :root[data-appearance] #candidateModal {
    & .candidate-dialog-head {padding:5px 14px!important}
    & .candidate-dialog-head :is(.eyebrow,p,.candidate-overview) {display:none!important}
    & .candidate-dialog-head h2 {font-size:19px!important;margin:2px 0!important}
    & .candidate-tools {padding:5px 12px!important}
    & .candidate-tools label>span,& .candidate-tools output {display:none!important}
    & .candidate-group-title {position:static!important}
    & .candidate-action-bar {display:flex;align-items:center;gap:10px;padding:8px 12px!important}
    & .candidate-action-bar[hidden] {display:none!important}
    & .candidate-selection-summary {flex:1;min-width:0;gap:6px}
    & .selection-count b {font-size:22px!important}
    & .selection-count i {font-size:11px}
    & .selection-copy {display:none}
    & .candidate-action-bar .primary {width:auto;min-width:142px;min-height:44px;font-size:12px}
    & .candidate-action-bar .login-state:empty {display:none}
  }
}
@container candidate-dialog (max-height:330px) {
  :root[data-appearance] #candidateModal .candidate-dialog-head {display:none!important}
  :root[data-appearance] #candidateModal:has(#candidateSearch:focus) .candidate-action-bar {display:none!important}
}

/* Ledger totals use the same semantic colors in all three themes. */
:root[data-appearance] {
  & .loot-allocation-note {display:grid;gap:5px;margin:9px 2px 0;padding:10px 13px;border-inline-start:3px solid var(--ui-accent);background:var(--ui-inset);border-radius:0 var(--ui-radius) var(--ui-radius) 0;color:var(--ui-muted);font-size:12px;line-height:1.65;overflow-wrap:anywhere}
  & #lootDetailModal>.loot-detail-dialog {width:min(760px,calc(var(--dialog-viewport-width,100vw) - var(--dialog-safe-left,0px) - var(--dialog-safe-right,0px) - 24px))!important}
  & .loot-allocation-note strong {color:var(--ui-accent)!important;font-size:14px;font-variant-numeric:tabular-nums}
  & #lootDetailModal .loot-allocation-note :is(span,small) {color:var(--ui-muted)!important}
  & .loot-allocation-note small {font-size:11px}
  & .loot-allocation-note.compact {display:block;margin:8px 20px 0;padding:4px 0;border:0;border-radius:0;background:none;font-size:11px}
  & :is(.loot-detail-money,.loot-value-row,.loot-calculation) strong {min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
  & #lootAmountHelp {display:block;margin-top:7px;line-height:1.7}
  & #lootModal .full-field>span:not(.field-help) {color:var(--ui-ink)!important}
  & #lootModal .loot-member-check i {color:var(--ui-muted)!important}
  & #lootGrossAmount[readonly] {color:var(--ui-muted)!important;background:var(--ui-inset)!important}
  & .loot-calculation.is-invalid {border-color:var(--ui-danger)!important;background:var(--ui-danger-bg)!important}
  & .loot-calculation.is-invalid :is(strong,span,small) {color:var(--ui-danger)!important}
  & .loot-card.has-large-amount .loot-value-row {grid-template-columns:minmax(0,1fr);gap:12px}
  & .party-membership-state {display:flex;grid-column:1/-1;align-items:center;min-height:48px;padding:10px 14px;color:var(--ui-success);background:var(--ui-success-bg);border:1px solid var(--ui-line);border-radius:var(--ui-radius);font-size:12px;line-height:1.6}
  & .loot-card.has-large-amount .loot-value-row>i {display:none}
  & .loot-detail-money.has-large-amount {grid-template-columns:minmax(0,1fr)}
  & .loot-detail-money.has-large-amount>div {grid-column:1/-1}
  & .loot-detail-money.has-large-amount>b {display:none}
  & .loot-detail-money.has-large-amount>div:nth-of-type(2) {margin-top:12px;padding-top:10px;border-inline-start:0;border-top:1px solid var(--ui-line)}
}
@media(max-width:620px) {
  :root[data-appearance] .loot-allocation-note.compact {margin-inline:14px}
}

#lootFields {min-width:0;margin:0;padding:0;border:0}
:root[data-appearance] .loot-member-identity {display:block;color:var(--ui-muted);font-size:11px;margin-top:3px}
:root[data-appearance] .loot-image-preserved {display:grid;gap:12px;padding:14px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);color:var(--ui-muted);background:var(--ui-inset)}
/* Keep recovery actions separate from the explanation in every theme. */
:is(#scheduleState, #leaderState) {
  display: grid;
  gap: 10px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
:is(#scheduleState, #leaderState) > button {
  justify-self: start;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
}
/* Roster/accounting boundary uses the same semantic surface in all themes. */
.candidate-ledger-notice {
  display: grid;
  gap: 9px;
  padding: 14px 16px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-inset);
  color: var(--ui-ink);
  line-height: 1.6;
  text-align: left;
}
.candidate-ledger-notice > span { color: var(--ui-muted); font-size: 13px; }
.candidate-ledger-notice > button { justify-self: start; min-height: 44px; }
.candidate-operation-notice {
  display: grid;
  gap: 10px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--ui-accent);
  border-radius: var(--ui-radius);
  background: var(--ui-raised);
  color: var(--ui-ink);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.candidate-operation-notice :is(p,small) { margin: 0; color: var(--ui-muted); font-size: 13px; }
.candidate-operation-notice details { min-width: 0; }
.candidate-operation-notice summary { min-height: 44px; display: flex; align-items: center; color: var(--ui-ink); cursor: pointer; }
.candidate-operation-notice button { justify-self: start; min-height: 44px; max-width: 100%; white-space: normal; }

/* Readable accounting exports, independent of old section/card skins. */
:root[data-appearance] .loot-report-tools {display:grid;gap:12px;margin:20px 0;padding:18px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-inset);color:var(--ui-ink);min-width:0}
:root[data-appearance] .loot-report-tools strong {font-size:16px;color:var(--ui-ink)}
:root[data-appearance] .loot-report-tools p {margin:5px 0 0;font-size:13px;line-height:1.65;color:var(--ui-muted)}
:root[data-appearance] .loot-report-actions {display:flex;flex-wrap:wrap;gap:10px}
:root[data-appearance] .loot-report-tools button {min-height:48px!important;max-width:100%;white-space:normal;color:var(--ui-ink);background:var(--ui-raised);border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:11px 15px}
:root[data-appearance] .loot-report-status:empty {display:none}
:root[data-appearance] .loot-report-preview {display:grid;gap:9px;min-width:0}
:root[data-appearance] .loot-report-preview[hidden] {display:none}
:root[data-appearance] .loot-report-preview label {color:var(--ui-ink);font-size:13px}
:root[data-appearance] .loot-report-preview textarea {display:block;box-sizing:border-box;width:100%;min-width:0;min-height:180px;max-height:360px;padding:12px;line-height:1.75;font-size:14px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);color:var(--ui-ink);background:var(--ui-panel);resize:vertical}
:root[data-appearance] .loot-report-preview button {justify-self:start}
:root[data-appearance] #lootDetailModal .loot-member-identity-tag {display:inline-block;margin:3px 0;padding:2px 7px;border:1px solid var(--ui-line);border-radius:8px;color:var(--ui-accent);background:var(--ui-inset);font-size:11px}
@media(max-width:380px) {:root[data-appearance] .loot-report-actions {display:grid;grid-template-columns:minmax(0,1fr)}}

:root[data-appearance] .loot-csv-download {display:inline-flex;align-items:center;justify-self:start;min-height:48px;padding:10px 15px;box-sizing:border-box;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-raised);color:var(--ui-ink);text-decoration:underline;text-underline-offset:3px;max-width:100%;overflow-wrap:anywhere}
:root[data-appearance] #lootDetailModal .loot-report-preview textarea {font-size:16px!important}

:root[data-appearance] .feedback-empty-actions {display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:14px}
:root[data-appearance] .feedback-empty-actions button {min-height:48px!important;white-space:normal;max-width:100%}
/* Named field headings inherit each theme's label typography, not generic card spans. */
form label > .field-label-text{color:inherit!important;font:inherit!important;letter-spacing:inherit!important}

/* Browse controls use the same semantic surfaces in all three appearances. */
:root[data-appearance] .guild-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin:22px 0 10px;padding:16px 18px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-panel);color:var(--ui-muted);font-size:14px;line-height:1.6}
:root[data-appearance] .guild-pagination[hidden]{display:none}
:root[data-appearance] .guild-pagination>div{display:flex;flex-wrap:wrap;gap:10px}
:root[data-appearance] :is(.guild-pagination button,#lootPartyMore){min-height:48px;padding:10px 17px;color:var(--ui-ink);background:var(--ui-raised);border:1px solid var(--ui-line);border-radius:var(--ui-radius);white-space:normal}
:root[data-appearance] .guild-pagination button:focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px}
:root[data-appearance] .guild-pagination[aria-busy="true"]{cursor:progress}
@media(max-width:540px){:root[data-appearance] .guild-pagination{align-items:stretch;flex-direction:column}:root[data-appearance] .guild-pagination>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}:root[data-appearance] .guild-pagination>div>button:only-child{grid-column:1/-1}}

/* One ordered screenshot collection, shared by all three appearances. */
:root[data-appearance] :is(#lootImagePreview,.loot-gallery-grid){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
:root[data-appearance] :is(.loot-upload-tile,.loot-gallery .loot-detail-image){margin:0;min-width:0;overflow:hidden;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-inset);color:var(--ui-ink)}
:root[data-appearance] :is(.loot-upload-tile,.loot-gallery .loot-detail-image) img{display:block;width:100%;height:150px;max-height:none;object-fit:contain;border:0;border-radius:0;background:var(--ui-inset)!important}
:root[data-appearance] .loot-upload-tile figcaption{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:6px 8px;font-size:12px;color:var(--ui-muted)}
:root[data-appearance] #lootModal .loot-upload-tile button{width:auto;min-width:48px;min-height:44px;padding:7px 9px}
:root[data-appearance] .loot-upload-placeholder{display:flex;min-height:150px;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-align:center;padding:16px;font-size:13px;color:var(--ui-muted);background:var(--ui-inset)}
:root[data-appearance] .loot-upload-placeholder small{font-size:11px;line-height:1.6;color:var(--ui-muted)}
:root[data-appearance] .loot-gallery{margin-top:22px}
:root[data-appearance] .loot-gallery>header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px;color:var(--ui-ink);font-size:14px}
:root[data-appearance] .loot-gallery>header span{color:var(--ui-muted);font-size:12px}
:root[data-appearance] .loot-gallery .loot-detail-image figcaption{margin:0;padding:9px;text-align:center;font-size:12px;color:var(--ui-muted)}
:root[data-appearance] .loot-gallery a{display:block;outline-offset:-3px}
:root[data-appearance] .loot-gallery a:focus-visible{outline:3px solid var(--ui-accent)}
@media(max-width:540px){:root[data-appearance] :is(#lootImagePreview,.loot-gallery-grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* v121: one readable task surface in every theme, desktop and phone. */
:root[data-appearance] .loot-own-task,:root[data-appearance] .loot-roster-review{background:var(--ui-raised);color:var(--ui-ink);border:1px solid var(--ui-control-line);border-radius:var(--ui-radius);padding:20px;margin:20px 0;min-width:0}
:root[data-appearance] .loot-own-task-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--ui-line);padding-bottom:12px}
:root[data-appearance] .loot-own-task-heading>span{font-size:17px;font-weight:800;color:var(--ui-accent)}
:root[data-appearance] .loot-own-task-heading small,:root[data-appearance] .loot-own-task p,:root[data-appearance] .loot-roster-review p,:root[data-appearance] .loot-roster-review small,:root[data-appearance] .loot-captain-history{color:var(--ui-muted);font-size:13px;line-height:1.65}
:root[data-appearance] .loot-own-task-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding-top:16px}
:root[data-appearance] .loot-own-task-row>div>b{font-size:17px;overflow-wrap:anywhere;color:var(--ui-ink)}
:root[data-appearance] .loot-own-task-row p{margin:5px 0 0}
:root[data-appearance] .loot-own-task-row>strong{font-size:clamp(20px,3.4vw,30px);font-variant-numeric:tabular-nums;color:var(--ui-ink);text-align:right;overflow-wrap:anywhere;min-width:0}
:root[data-appearance] .loot-own-task-row>strong small{display:block;color:var(--ui-muted);font-size:12px;font-weight:500}
:root[data-appearance] .loot-own-task-row>button{grid-column:1/-1;min-height:46px;margin:0;background:var(--ui-accent);color:var(--ui-on-accent);border:1px solid var(--ui-accent);font-size:15px;font-weight:800}
:root[data-appearance] .loot-roster-review>strong{font-size:17px;color:var(--ui-ink)}
:root[data-appearance] .loot-roster-review ul{list-style:none;padding:0;margin:14px 0;border-block:1px solid var(--ui-line)}
:root[data-appearance] .loot-roster-review li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;color:var(--ui-ink);font-size:14px;overflow-wrap:anywhere}
:root[data-appearance] .loot-roster-review li+li{border-top:1px solid var(--ui-line)}
:root[data-appearance] .loot-roster-review li span{color:var(--ui-muted);flex-shrink:0}
:root[data-appearance] .loot-roster-review>label{display:flex;align-items:center;gap:12px;min-height:52px;margin-top:14px;padding:10px 12px;border:1px solid var(--ui-control-line);border-radius:var(--ui-radius);background:var(--ui-inset);color:var(--ui-ink);font-size:14px;line-height:1.5;cursor:pointer}
:root[data-appearance] .loot-roster-review input[type=checkbox]{width:22px;height:22px;min-height:22px;flex:0 0 22px;margin:0;appearance:auto;accent-color:var(--ui-accent)}
:root[data-appearance] .cal-party-actions [data-party-loot]{min-height:44px;margin:0;background:var(--ui-soft);color:var(--ui-ink);border:1px solid var(--ui-control-line)}
@media(max-width:620px){:root[data-appearance] .loot-own-task,:root[data-appearance] .loot-roster-review{padding:16px;margin:16px 0}:root[data-appearance] .loot-own-task-heading{align-items:flex-start;flex-direction:column;gap:3px}:root[data-appearance] .loot-own-task-row{grid-template-columns:minmax(0,1fr)}:root[data-appearance] .loot-own-task-row>strong{text-align:left;font-size:26px}}

/* Discord is a second identity; the character remains the member card heading. */
:root[data-appearance] #memberList>.member-row{display:grid;grid-template-columns:48px minmax(0,1fr);align-content:start;align-items:center;gap:12px;min-width:0}
:root[data-appearance] #memberList .member-avatar{width:48px;height:48px;flex:none;align-self:start}
:root[data-appearance] #memberList .member-identity{min-width:0}
:root[data-appearance] #memberList .member-identity>strong{font-size:18px;line-height:1.5;color:var(--ui-ink);overflow-wrap:anywhere}
:root[data-appearance] #memberList .member-identity>small{font-size:12px;line-height:1.65;color:var(--ui-muted)!important;overflow-wrap:anywhere}
:root[data-appearance] #memberList .member-discord-identity{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:7px 12px;min-width:0;padding:11px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-inset)}
:root[data-appearance] #memberList .member-discord-state{display:inline-flex;align-items:center;gap:6px;max-width:100%;color:var(--ui-muted);font-size:12px;line-height:1.6;overflow-wrap:anywhere}
:root[data-appearance] #memberList [data-discord-state="linked"] .member-discord-state{color:var(--ui-success);font-weight:700}
:root[data-appearance] #memberList .member-discord-state svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:root[data-appearance] #memberList .member-discord-dot{width:7px;height:7px;flex:none;border:1px solid currentColor;border-radius:50%}
:root[data-appearance] #memberList .member-discord-names{display:grid;gap:2px;min-width:0;max-width:100%;flex:1 1 140px;overflow-wrap:anywhere;font-size:14px;line-height:1.55;font-weight:700;color:var(--ui-ink)}
:root[data-appearance] #memberList .member-discord-names>small{margin:0;font-size:12px;line-height:1.6;font-weight:400;color:var(--ui-muted)!important;overflow-wrap:anywhere}
:root[data-appearance] #memberList .member-system-role{grid-column:1/-1;justify-self:end;max-width:100%;white-space:normal}
:root[data-appearance] #memberList .member-role-control{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;width:100%;margin:0}
:root[data-appearance] #memberList .member-role-control>span{font-size:12px;color:var(--ui-muted)}
:root[data-appearance] #memberList .member-role-control>select{width:auto;max-width:100%;min-height:44px;padding:8px 12px;font-size:13px;border:1px solid var(--ui-control-line);border-radius:var(--ui-radius);color:var(--ui-ink);background:var(--ui-raised)}
:root[data-appearance] #memberList .member-role-control>select:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
:root[data-appearance] #avatarSheet section>p,:root[data-appearance] #avatarSheet section>small{font-size:13px;line-height:1.75;color:var(--ui-muted)!important;overflow-wrap:anywhere}
:root[data-appearance] #avatarSheet section>small{display:block}
:root[data-appearance] #avatarSheet .sheet-actions{flex-wrap:wrap}
:root[data-appearance] #avatarSheet .sheet-actions>[hidden]{display:none!important}
:root[data-appearance] #avatarSheet .avatar-discord-settings{max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* v133: keep shared controls usable inside clipped and narrow surfaces. */
:root[data-appearance] #lootFlowGuide>summary:focus-visible {
  outline:2px solid var(--ui-accent)!important;
  outline-offset:-4px!important;
}
@media(max-width:620px) {
  :root[data-appearance] :is(#partyList,#mainContent) .party-roster-preview {
    display:grid;grid-template-columns:minmax(0,1fr) 22px;
    gap:8px 10px;align-items:center;padding:12px;
  }
  :root[data-appearance] :is(#partyList,#mainContent) .party-roster-preview .roster-avatars {grid-column:1;grid-row:1;max-width:100%}
  :root[data-appearance] :is(#partyList,#mainContent) .party-roster-preview .roster-preview-copy {grid-column:1;grid-row:2;min-width:0}
  :root[data-appearance] :is(#partyList,#mainContent) .party-roster-preview .roster-arrow {grid-column:2;grid-row:1/3;justify-self:center}
  :root[data-appearance] #partyList[data-layout="cards"]>.party-panel>.party-roster-block {align-self:stretch}
}

/* v133 followup: shared reading, focus and non-interactive states.
   Keep per-theme selected-row materials and all visibility rules intact. */
:root[data-appearance] #drawerAccount>summary:focus-visible {
  outline:2px solid var(--ui-accent)!important;
  outline-offset:-4px!important;
}
:root[data-appearance] #mainContent .guide-toc button {
  min-height:44px;white-space:normal;overflow-wrap:anywhere;
}
:root[data-appearance] #mainContent .guide-toc button>span {
  flex:0 0 24px;min-width:24px;min-height:24px;font-size:11px;
  background:var(--ui-soft)!important;color:var(--ui-muted)!important;
}
:root:is([data-appearance="classic"],[data-appearance="cloud"],[data-appearance="maple"]) #mainContent .guide-content-image {
  background:var(--ui-inset)!important;border-color:var(--ui-line)!important;
}
:root[data-appearance] #notificationCenterModal .notification-item {
  grid-template-columns:8px minmax(0,1fr);
}
:root[data-appearance] #notificationCenterModal .notification-item :is(strong,p,small) {
  min-width:0;overflow-wrap:anywhere;
}
:root[data-appearance] #candidateModal .candidate-stats>span small {
  min-width:0;white-space:normal;overflow-wrap:anywhere;
}
:root[data-appearance] #candidateModal .candidate-row:has(input.candidate-check:disabled) {
  cursor:default!important;transform:none!important;translate:none!important;
  transition:none!important;
}
@media(max-width:380px) {
  :root[data-appearance] #lootDetailModal .loot-gallery-grid {grid-template-columns:minmax(0,1fr)}
  :root[data-appearance] #lootDetailModal .loot-gallery figcaption {padding:12px!important;text-align:left!important}
}

/* v133: empty notices and reading focus keep the active palette in dialogs.
   Epic already themes its badge and ears, including a candidate-loading ring;
   leave those dedicated shapes and busy-state decorations untouched. */
:root:is([data-appearance="classic"],[data-appearance="cloud"],[data-appearance="maple"]) .login-modal .empty-state>b {
  background:var(--ui-soft)!important;color:var(--ui-accent)!important;
  border-color:var(--ui-line)!important;box-shadow:none!important;
}
:root:is([data-appearance="classic"],[data-appearance="cloud"],[data-appearance="maple"]) .empty-state.compact>b:before,
:root:is([data-appearance="classic"],[data-appearance="cloud"],[data-appearance="maple"]) .empty-state.compact>b:after {
  background:var(--ui-soft);border-color:var(--ui-line);
}
:root:is([data-appearance="classic"],[data-appearance="cloud"],[data-appearance="maple"]) .empty-state.compact:after {
  border-color:var(--ui-line);box-shadow:none;opacity:.35;
}
:root[data-appearance] #notificationCenterModal .notification-load-state.is-error p {
  color:var(--ui-danger)!important;
}
:root[data-appearance] #mainContent .guide-article :is(h3,h4,h5)[tabindex="-1"]:focus-visible {
  outline:3px solid var(--ui-accent)!important;outline-offset:3px;
}
:root[data-appearance] #mainContent .guide-article>.panel-top h3 {
  scroll-margin-top:calc(92px + env(safe-area-inset-top, 0px));
}
@media(forced-colors:active) {
  :root[data-appearance] #mainContent .guide-article :is(h3,h4,h5)[tabindex="-1"]:focus-visible {outline-color:Highlight!important}
}

/* A single mobile card has no next card to peek at; use the reading width. */
@media(max-width:849px) {
  :root[data-appearance] :is(#partyList,#lootList)[data-layout="cards"]:has(>:is(.party-panel,.loot-card):only-child) {
    padding-inline:2px;
  }
  :root[data-appearance] #partyList[data-layout="cards"]>.party-panel:only-child,
  :root[data-appearance] #lootList[data-layout="cards"]>.loot-card:only-child {
    flex-basis:100%;width:100%;
  }
}

:root[data-appearance] #lootModal #lootItemEditor .ops-item-error {
  grid-column:1/-1;margin:0;padding:10px 12px;
  border-left:3px solid var(--ui-danger);border-radius:4px;
  background:var(--ui-danger-bg);color:var(--ui-danger)!important;
  font-size:12px;line-height:1.75;overflow-wrap:anywhere;
}

:root[data-appearance] #mainContent #memberLoadState:not([hidden]) {
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;
  padding:14px 16px;margin:0 0 16px;border:1px solid var(--ui-line);
  border-radius:var(--ui-radius);background:var(--ui-soft);color:var(--ui-muted);
}
:root[data-appearance] #memberLoadState p {
  flex:1 1 220px;min-width:0;margin:0;font-size:13px;line-height:1.75;overflow-wrap:anywhere;
}
:root[data-appearance] #memberLoadState button {min-height:44px}
:root[data-appearance] #mainContent #memberLoadState[data-state="error"] {
  border-color:var(--ui-danger);background:var(--ui-danger-bg);
}
:root[data-appearance] #memberLoadState[data-state="error"] p {color:var(--ui-danger)!important}

/* Candidate rows are labels, so button-only motion guards do not cover them.
   Keep selection colors and focus cues while removing the legacy hover lift. */
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce) {
  :root[data-appearance] #candidateModal .candidate-row.can-manage:not(:has(input.candidate-check:disabled)):hover {
    transform:none!important;
  }
}

/* Epic receipt cards already show a busy sweep; keep one loading indicator. */
:root[data-appearance="epic"] #lootList .loot-card-receipt.is-loading[aria-busy="true"]::before {
  display:none;
}