.collection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.collection-status { min-height: 20px; margin: 0 0 16px; color: var(--portal-muted); font-size: 0.78rem; }
.collection-status[data-state="error"] { color: var(--portal-amber); }
.collection-list { display: grid; gap: 16px; }
.collection-empty, .collection-loading { padding: 30px 22px; border: 1px dashed var(--portal-border-strong); border-radius: 14px; color: var(--portal-muted); background: rgba(11, 23, 27, 0.65); }
.contract-detail-card { overflow: hidden; border: 1px solid var(--portal-border); border-radius: 15px; background: rgba(11, 23, 27, 0.82); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.09); }
.contract-detail-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 22px; border-bottom: 1px solid var(--portal-border); }
.contract-detail-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: var(--portal-cyan); background: rgba(34, 211, 238, 0.11); }
.contract-detail-mark svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.contract-detail-title { margin: 0 0 3px; font-size: 1.06rem; }
.contract-detail-subtitle { margin: 0; color: var(--portal-muted); font-size: 0.78rem; }
.contract-detail-body { display: grid; gap: 20px; padding: 20px 22px 22px; }
.contract-detail-description { margin: 0; color: var(--portal-muted); font-size: 0.83rem; }
.contract-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.contract-meta { min-width: 0; padding: 12px; border: 1px solid var(--portal-border); border-radius: 10px; background: var(--portal-surface); }
.contract-meta dt { color: var(--portal-subtle); font-size: 0.68rem; }
.contract-meta dd { margin: 3px 0 0; color: var(--portal-text); font-size: 0.78rem; font-weight: 700; overflow-wrap: anywhere; }
.contract-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2px; }
.contract-request-note { margin: 0; color: var(--portal-subtle); font-size: 0.72rem; }
.contract-detail-card.is-ended { opacity: 0.78; }
.contract-detail-card.is-ended .contract-detail-mark { color: var(--portal-subtle); background: rgba(147, 174, 180, 0.09); }
.invoice-list { overflow: hidden; border: 1px solid var(--portal-border); border-radius: 15px; background: rgba(11, 23, 27, 0.82); }
.invoice-list-header, .invoice-list-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 0.8fr) minmax(110px, 0.7fr) minmax(120px, 0.8fr) auto; align-items: center; gap: 16px; padding: 14px 22px; }
.invoice-list-header { color: var(--portal-subtle); border-bottom: 1px solid var(--portal-border); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.invoice-list-row { min-height: 70px; border-bottom: 1px solid var(--portal-border); color: var(--portal-muted); font-size: 0.78rem; }
.invoice-list-row:last-child { border-bottom: 0; }
.invoice-list-row strong, .invoice-list-row span { display: block; }
.invoice-list-row strong { color: var(--portal-text); font-size: 0.82rem; }
.invoice-list-row small { display: block; margin-top: 2px; color: var(--portal-subtle); font-size: 0.7rem; }
.invoice-list-row .invoice-amount { color: var(--portal-text); font-weight: 750; }
.invoice-list-row .invoice-action { justify-self: end; }
.load-more-wrap { display: flex; justify-content: center; margin-top: 18px; }
.load-more-wrap[hidden] { display: none; }
.request-modal .modal-callout { margin-top: 14px; }
.request-modal textarea { width: 100%; resize: vertical; min-height: 82px; padding: 10px 11px; border: 1px solid var(--portal-border); border-radius: 8px; outline: 0; color: var(--portal-text); background: var(--portal-surface); }
.request-modal textarea:focus { border-color: var(--portal-cyan); }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(310px, 0.7fr); align-items: start; gap: 20px; }
.settings-side { display: grid; gap: 20px; }
.settings-panel > form { display: grid; gap: 18px; margin: 0 22px 22px; }
.settings-section-note { margin: 0 22px 16px; color: var(--portal-muted); font-size: 0.76rem; }
.settings-security-content { display: grid; gap: 16px; padding: 0 22px 22px; }
.security-block { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--portal-border); border-radius: 12px; background: rgba(7, 16, 19, 0.46); }
.security-block-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.security-block-kicker { margin: 0 0 3px; color: var(--portal-cyan); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.security-block-heading h3 { margin: 0; color: var(--portal-text); font-size: 0.92rem; letter-spacing: -0.02em; }
.account-summary { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--portal-border); border-radius: 10px; background: var(--portal-surface); }
.account-summary > div { display: grid; gap: 1px; min-width: 0; }
.account-summary strong { font-size: 0.78rem; }
.account-summary span:not(.avatar) { overflow-wrap: anywhere; color: var(--portal-muted); font-size: 0.7rem; }
.avatar-small { width: 30px; height: 30px; font-size: 0.64rem; }
.settings-security-form { display: grid; gap: 8px; }
.settings-security-form label, .mfa-enrollment label { color: var(--portal-muted); font-size: 0.76rem; font-weight: 700; }
.settings-security-form input, .mfa-enrollment input { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid var(--portal-border); border-radius: 8px; outline: 0; color: var(--portal-text); background: var(--portal-surface); font: inherit; font-size: 0.82rem; }
.settings-security-form input:focus, .mfa-enrollment input:focus { border-color: var(--portal-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12); }
.field-hint { margin: -3px 0 3px; color: var(--portal-subtle); font-size: 0.68rem; }
.settings-security-form .button { justify-self: start; margin-top: 5px; }
.settings-divider { height: 1px; background: var(--portal-border); }
.settings-factor { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.settings-factor strong { font-size: 0.8rem; }
.settings-factor p { margin: 3px 0 0; color: var(--portal-muted); font-size: 0.72rem; }
.settings-factor .button { flex: 0 0 auto; min-height: 36px; padding: 0 11px; font-size: 0.72rem; }
.security-block .settings-security-form { margin: 0; }
.security-block .settings-section-note { margin: 0; }
.mfa-enrollment { display: grid; gap: 9px; padding: 14px; border: 1px solid var(--portal-border); border-radius: 10px; background: var(--portal-surface); }
.mfa-enrollment[hidden], .mfa-active[hidden] { display: none; }
.mfa-enrollment .settings-section-note { margin: 0 0 3px; }
.mfa-qr { width: min(190px, 100%); height: auto; padding: 8px; border-radius: 8px; background: #fff; }
.mfa-qr[hidden] { display: none; }
.mfa-secret-label { margin: 3px 0 -4px; color: var(--portal-subtle); font-size: 0.68rem; }
.mfa-secret { display: block; overflow-wrap: anywhere; padding: 8px 9px; border: 1px solid var(--portal-border); border-radius: 7px; color: var(--portal-cyan-soft); background: rgba(7, 16, 19, 0.7); font-size: 0.7rem; letter-spacing: 0.05em; }
.settings-form-actions { display: flex; justify-content: flex-end; gap: 9px; }
.mfa-active { padding-top: 2px; }
.mfa-active .settings-section-note { margin: 0 0 12px; }
.mfa-active .button { min-height: 36px; padding: 0 11px; font-size: 0.72rem; }

@media (max-width: 850px) {
    .settings-grid { grid-template-columns: 1fr; }
    .contract-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invoice-list-header { display: none; }
    .invoice-list-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 16px; }
    .invoice-list-row > :nth-child(2), .invoice-list-row > :nth-child(3), .invoice-list-row > :nth-child(4) { grid-column: 1; }
    .invoice-list-row .invoice-action { grid-column: 2; grid-row: 1 / span 4; }
}

@media (max-width: 560px) {
    .settings-panel > form { margin-right: 16px; margin-left: 16px; }
    .settings-section-note { margin-right: 16px; margin-left: 16px; }
    .settings-security-content { padding: 0 16px 16px; }
    .security-block { padding: 14px; }
    .settings-factor { display: grid; }
    .settings-factor .button { justify-self: start; }
    .settings-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .settings-form-actions .button { width: 100%; padding-right: 9px; padding-left: 9px; }
    .collection-toolbar { align-items: flex-start; flex-direction: column; }
    .collection-toolbar .button { width: 100%; }
    .contract-detail-header { grid-template-columns: 38px minmax(0, 1fr); padding: 18px 16px; }
    .contract-detail-header > .status-chip { grid-column: 2; justify-self: start; }
    .contract-detail-body { padding: 17px 16px 18px; }
    .contract-meta-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .contract-detail-actions { display: grid; }
    .contract-detail-actions .button { width: 100%; }
}