:root {
    --sb-bg: #f8faf9;
    --sb-surface: #ffffff;
    --sb-panel: #f9fafb;
    --sb-panel-2: #f3f4f6;
    --sb-text: #111827;
    --sb-muted: #6b7280;
    --sb-line: #d9e1dd;
    --sb-line-soft: #edf1ef;
    --sb-green: #24b47e;
    --sb-green-dark: #15803d;
    --sb-green-soft: #e9f8f0;
    --sb-red: #dc2626;
    --sb-control-h: 26px;
    --sb-control-px: 10px;
    --sb-page-max: 1400px;
}

html,
body {
    background: var(--sb-bg) !important;
}

body {
    min-height: 100vh !important;
    color: var(--sb-text) !important;
    font-size: 14px !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

body::before,
.hero::after {
    display: none !important;
}

a {
    color: var(--sb-green) !important;
}

.page {
    box-sizing: border-box !important;
    width: min(100% - 32px, var(--sb-page-max)) !important;
    max-width: var(--sb-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px 16px 40px !important;
}

.hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    padding: 0 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sb-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.hero-copy,
.hero > * {
    position: static !important;
    z-index: auto !important;
}

.hero-copy {
    gap: 6px !important;
}

.eyebrow {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--sb-green) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

h1 {
    color: var(--sb-text) !important;
    font-size: clamp(24px, 4vw, 34px) !important;
    font-weight: 650 !important;
    letter-spacing: -0.035em !important;
}

h2,
h3 {
    color: var(--sb-text) !important;
}

h1,
h2,
h3 {
    font-family: inherit !important;
}

.subtitle {
    max-width: 640px !important;
    color: var(--sb-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.card,
.stat,
.modal-panel {
    border: 1px solid var(--sb-line) !important;
    border-radius: 6px !important;
    background: var(--sb-surface) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.public-form-card {
    border: 0 !important;
    box-shadow: none !important;
}

.public-form-card .sb-panel__footer {
    display: block !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    padding: 12px 12px 14px !important;
    border-top: 1px solid var(--sb-line-soft) !important;
    background: transparent !important;
}

.public-form-card .sb-panel__footer .btn {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

form {
    gap: 12px !important;
    padding: 0 !important;
}

fieldset {
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 0 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sb-line-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

fieldset:last-of-type {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

legend {
    width: 100% !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    color: var(--sb-text) !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.grid > .full,
.grid > label.full {
    grid-column: 1 / -1 !important;
}

label:not(.radio-card) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

input,
select {
    box-sizing: border-box !important;
    height: var(--sb-control-h) !important;
    min-height: var(--sb-control-h) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 4px !important;
    background: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    font-size: 12px !important;
    padding: 0 var(--sb-control-px) !important;
    line-height: calc(var(--sb-control-h) - 2px) !important;
    box-shadow: none !important;
}

textarea {
    box-sizing: border-box !important;
    min-height: 52px !important;
    height: auto !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 4px !important;
    background: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    font-size: 12px !important;
    padding: 6px var(--sb-control-px) !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--sb-green-dark) !important;
    background: var(--sb-surface) !important;
    box-shadow: 0 0 0 1px var(--sb-green-dark) !important;
    outline: none !important;
}

.radio-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.radio-grid--2 {
    display: flex !important;
    width: min(240px, 100%) !important;
    max-width: 100% !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    gap: 0 !important;
}

.radio-grid--2 .radio-card {
    flex: 1 1 50% !important;
    justify-content: center !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--sb-line) !important;
    min-height: var(--sb-control-h) !important;
}

.radio-grid--2 .radio-card:last-child {
    border-right: 0 !important;
}

.radio-card {
    min-height: var(--sb-control-h) !important;
    gap: 6px !important;
    padding: 0 var(--sb-control-px) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 4px !important;
    background: var(--sb-surface) !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.radio-card:has(input:checked) {
    border-color: var(--sb-green-dark) !important;
    background: var(--sb-green-soft) !important;
    color: var(--sb-text) !important;
}

.radio-card input {
    accent-color: var(--sb-green) !important;
}

label.radio-card {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

.field-hint {
    margin: 0 0 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--sb-muted) !important;
    line-height: 1.45 !important;
}

.sb-panel__body fieldset > .full {
    margin-bottom: 14px !important;
}

.sb-panel__body fieldset > .full:last-child {
    margin-bottom: 0 !important;
}

.yn-toggle {
    display: inline-flex !important;
    vertical-align: middle !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: var(--sb-surface) !important;
}

.yn-toggle--readonly {
    pointer-events: none !important;
    user-select: none !important;
}

.yn-toggle__opt {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 52px !important;
    height: var(--sb-control-h) !important;
    padding: 0 var(--sb-control-px) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--sb-muted) !important;
    background: var(--sb-surface) !important;
    border-right: 1px solid var(--sb-line) !important;
}

.yn-toggle__opt:last-child {
    border-right: 0 !important;
}

.yn-toggle__opt.is-on {
    background: var(--sb-green-soft) !important;
    color: var(--sb-green-dark) !important;
}

.yn-toggle--cell .yn-toggle__opt {
    min-width: 44px !important;
    font-size: 11px !important;
}

.sb-ro-stack {
    display: grid !important;
    gap: 12px !important;
}

.sb-ro-field {
    display: grid !important;
    gap: 5px !important;
}

.sb-ro-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--sb-muted) !important;
}

input.sb-ro-input[readonly] {
    cursor: default !important;
    width: 100% !important;
    background: var(--sb-panel) !important;
    color: var(--sb-text) !important;
}

.sb-ro-field--yn .yn-toggle {
    width: fit-content !important;
    max-width: 100% !important;
}

.card-narrow {
    max-width: min(560px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.table-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.detail-stack {
    display: grid !important;
    gap: 12px !important;
}

.detail-row {
    display: grid !important;
    gap: 4px !important;
}

.detail-row .detail-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--sb-muted) !important;
}

.detail-row .detail-value {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--sb-text) !important;
    line-height: 1.4 !important;
}

.beneficiary-title {
    margin: 4px 0 -2px !important;
    color: var(--sb-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.top-actions,
.form-actions,
.modal-actions {
    gap: 8px !important;
}

.btn {
    box-sizing: border-box !important;
    min-height: var(--sb-control-h) !important;
    height: var(--sb-control-h) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--sb-text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 var(--sb-control-px) !important;
    line-height: calc(var(--sb-control-h) - 2px) !important;
    box-shadow: none !important;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease !important;
}

.btn:hover {
    transform: none !important;
    border-color: #b8c4be !important;
    background: var(--sb-panel) !important;
    box-shadow: none !important;
}

.btn-primary {
    border-color: var(--sb-green-dark) !important;
    background: transparent !important;
    color: var(--sb-green) !important;
}

.btn-primary:hover {
    background: var(--sb-green-soft) !important;
}

.btn:disabled,
.btn.is-loading {
    cursor: wait !important;
    opacity: 0.72 !important;
}

.btn-secondary {
    border-color: var(--sb-line) !important;
    background: transparent !important;
    color: var(--sb-text) !important;
}

.btn-danger {
    border-color: #fecaca !important;
    background: #ffffff !important;
    color: #dc2626 !important;
}

.btn-danger:hover {
    border-color: #f87171 !important;
    background: #fef2f2 !important;
}

.alert,
.alert-error,
.empty {
    border-radius: 4px !important;
    box-shadow: none !important;
}

.alert {
    margin-bottom: 12px !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.alert-success {
    border: 1px solid var(--sb-green-dark) !important;
    background: var(--sb-green-soft) !important;
    color: var(--sb-green) !important;
}

.alert-error {
    border: 1px solid rgba(255, 107, 107, 0.35) !important;
    background: #fef2f2 !important;
    color: var(--sb-red) !important;
}

.stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
}

.stat {
    padding: 14px 16px !important;
}

.stat strong {
    color: var(--sb-text) !important;
    font-size: 20px !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
}

.stat span,
th {
    color: var(--sb-muted) !important;
}

.stat span {
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

.table-wrap {
    overflow-x: auto !important;
}

table {
    min-width: 720px !important;
    background: transparent !important;
}

th,
td {
    padding: 10px 14px !important;
    min-height: 38px !important;
    border-bottom: 1px solid var(--sb-line-soft) !important;
    vertical-align: middle !important;
    line-height: 1.35 !important;
}

th {
    background: var(--sb-panel) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

td {
    color: #374151 !important;
    font-size: 12px !important;
}

tfoot td {
    background: var(--sb-panel-2) !important;
    border-top: 1px solid var(--sb-line) !important;
    border-bottom: 0 !important;
    color: var(--sb-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

tbody tr:hover {
    background: #fbfdfc !important;
}

.pill {
    padding: 2px 7px !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--sb-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

.modal {
    padding: 16px !important;
    background: rgba(17, 24, 39, 0.36) !important;
    backdrop-filter: none !important;
}

.modal-panel {
    width: min(920px, 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 92vh !important;
    overflow: hidden !important;
}

.modal-head {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--sb-line) !important;
    background: var(--sb-surface) !important;
    backdrop-filter: none !important;
}

.modal-head h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
}

.modal-foot {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    border-top: 1px solid var(--sb-line) !important;
    background: var(--sb-panel) !important;
}

.print-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px !important;
    color: var(--sb-text) !important;
}

.print-title {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--sb-line) !important;
}

.print-title h2 {
    font-size: 20px !important;
    font-weight: 650 !important;
}

.print-title p {
    color: var(--sb-muted) !important;
    font-size: 12px !important;
}

.section {
    margin-top: 10px !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 4px !important;
    background: transparent !important;
}

.section h3 {
    padding: 7px 9px !important;
    border-bottom: 1px solid var(--sb-line-soft);
    background: var(--sb-panel) !important;
    color: var(--sb-text) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.detail {
    min-height: 50px !important;
    padding: 8px 9px !important;
    border-color: var(--sb-line-soft) !important;
}

.detail span {
    color: var(--sb-muted) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.detail strong {
    margin-top: 4px !important;
    color: var(--sb-text) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

.welcome-text {
    align-items: center;
    color: var(--sb-muted);
    display: inline-flex;
    font-size: 12px;
    min-height: 32px;
}

.auth-page {
    background: #fbfcfb !important;
    color: var(--sb-text) !important;
    display: block;
    min-height: 100vh;
    padding-top: 58px !important;
}

.auth-page *,
.auth-page *::before,
.auth-page *::after {
    box-sizing: border-box;
}

.auth-topbar {
    align-items: center;
    inset: 0 0 auto 0;
    display: flex;
    justify-content: center;
    padding: 14px 16px;
    position: fixed;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
}

.auth-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    max-width: var(--sb-page-max);
    box-sizing: border-box;
}

.auth-topbar-inner:has(nav) {
    justify-content: space-between;
}

.auth-brand {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.auth-mark {
    background: var(--sb-green);
    clip-path: polygon(38% 0, 100% 0, 60% 45%, 88% 45%, 28% 100%, 40% 56%, 0 56%);
    display: inline-block;
    height: 18px;
    width: 18px;
}

.auth-topbar strong {
    color: var(--sb-text);
    font-size: 15px;
    font-weight: 700;
}

.auth-docs {
    border: 1px solid var(--sb-line);
    border-radius: 4px;
    color: #374151 !important;
    font-size: 12px;
    padding: 6px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.login-shell {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(280px, 40%) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(28px, 5vw, 56px) !important;
    row-gap: 28px !important;
    min-height: calc(100vh - 58px) !important;
    width: min(100% - 32px, var(--sb-page-max)) !important;
    max-width: var(--sb-page-max) !important;
    margin: 0 auto !important;
    padding: 32px 16px 48px !important;
}

.login-card {
    align-self: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    justify-self: start !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: min(420px, 100%) !important;
}

.login-card h1 {
    color: var(--sb-text) !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.1 !important;
    margin: 0 0 8px !important;
}

.login-card > p {
    color: var(--sb-muted);
    font-size: 13px;
    margin: 0 0 8px;
}

.login-card .login-role-hint {
    color: var(--sb-muted);
    font-size: 12px;
    line-height: 1.55;
    margin: 0 0 24px;
}

.login-card .login-role-hint strong {
    color: var(--sb-text);
    font-weight: 700;
}

.login-card form.login-form-stacked {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 !important;
    width: 100% !important;
}

.login-stacked-field {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
}

.login-stacked-field .login-field-label {
    display: block !important;
}

.login-field-label {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    line-height: 1.35 !important;
}

.login-card form .login-form-footer {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 0 !important;
    margin: 0 !important;
    margin-top: 2px !important;
    border-top: 0 !important;
    background: transparent !important;
}

.login-card form .login-form-footer .btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.auth-page input {
    background: #ffffff !important;
    border-color: var(--sb-line) !important;
    color: var(--sb-text) !important;
    height: var(--sb-control-h) !important;
    min-height: var(--sb-control-h) !important;
    padding: 0 var(--sb-control-px) !important;
    width: 100% !important;
}

.auth-page input:focus {
    border-color: var(--sb-green) !important;
    box-shadow: 0 0 0 1px var(--sb-green) !important;
}

.auth-page .btn-secondary {
    border-color: var(--sb-line) !important;
    color: var(--sb-text) !important;
}

.auth-page .btn-secondary:hover {
    background: var(--sb-panel) !important;
    border-color: #b8c4be !important;
}

.auth-page .btn-primary {
    background: var(--sb-green) !important;
    border-color: var(--sb-green) !important;
    color: #ffffff !important;
    height: var(--sb-control-h) !important;
    min-height: var(--sb-control-h) !important;
    margin-top: 0 !important;
    padding: 0 var(--sb-control-px) !important;
}

.login-card form.login-form-stacked input {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.auth-page .btn-primary:hover {
    background: var(--sb-green-dark) !important;
}

.login-quote {
    align-self: center !important;
    align-items: flex-start !important;
    border-top: 0 !important;
    border-left: 1px solid var(--sb-line-soft) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 16px 0 16px clamp(20px, 4vw, 48px) !important;
    margin: 0 !important;
    max-width: none !important;
    text-align: left !important;
    min-width: 0 !important;
}

.login-quote span {
    color: #e5e7eb;
    font-family: Georgia, serif;
    font-size: clamp(40px, 6vw, 72px);
    height: auto;
    line-height: 0.75;
    margin: 0 0 8px !important;
}

.login-quote p {
    color: #111827;
    font-size: clamp(15px, 1.6vw, 20px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.45;
    margin: 0;
    max-width: 38ch;
    text-align: left !important;
}

.login-quote small {
    color: #374151;
    display: block;
    font-size: 13px;
    margin-top: 14px;
    width: 100%;
    max-width: 38ch;
    text-align: left !important;
}

.notify-modal {
    align-items: center;
    background: rgba(17, 24, 39, 0.28);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 16px;
    position: fixed;
    z-index: 60;
}

.notify-modal.is-open {
    display: flex;
}

.notify-modal.is-success .notify-card {
    border-color: #b7dfcc;
}

.confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.side-overlay {
    background: rgba(17, 24, 39, 0.22);
    display: none;
    inset: 0;
    justify-content: flex-end;
    position: fixed;
    z-index: 50;
}

.side-scrim {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
}

.side-overlay.is-open {
    display: flex;
}

.side-panel {
    background: rgba(255, 255, 255, 0.92);
    border-left: 1px solid var(--sb-line);
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 620px;
    overflow: hidden;
    padding: 0;
    width: min(100%, 620px);
    backdrop-filter: blur(14px);
}

.side-head {
    align-items: center;
    border-bottom: 1px solid var(--sb-line);
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    justify-content: space-between;
    margin: 0;
    padding: 16px 18px 14px;
}

.side-head h2 {
    font-size: 18px !important;
    font-weight: 650 !important;
    margin: 0 !important;
}

.side-head p {
    color: var(--sb-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 4px 0 0;
    max-width: 390px;
}

.side-form {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
}

.side-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px 18px;
}

.side-form .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
    gap: 12px !important;
}

.edit-section {
    border: 1px solid var(--sb-line);
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
}

.edit-section h3 {
    background: var(--sb-panel);
    border-bottom: 1px solid var(--sb-line);
    color: var(--sb-text) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    margin: 0 !important;
    padding: 9px 12px;
}

.edit-section .grid {
    padding: 12px;
}

.side-form label {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    min-width: 0;
}

.side-form input,
.side-form textarea {
    width: 100% !important;
}

.side-footer {
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--sb-line);
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 18px;
}

.inline-status-form {
    align-items: center;
    display: flex;
    gap: 6px;
    padding: 0 !important;
}

.inline-status-form select {
    min-height: var(--sb-control-h) !important;
    height: var(--sb-control-h) !important;
    min-width: 172px;
    padding: 0 var(--sb-control-px) !important;
    line-height: calc(var(--sb-control-h) - 2px) !important;
}

.status-select {
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-width: 190px !important;
}

.status-creada {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #3730a3 !important;
}

.status-solicitud-enviada-al-rap {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #047857 !important;
}

.inline-status-form .btn {
    min-height: var(--sb-control-h) !important;
    height: var(--sb-control-h) !important;
    padding: 0 var(--sb-control-px) !important;
}

.modal-panel .print-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #f3f4f6 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.paper-form {
    box-sizing: border-box !important;
    width: 584px;
    max-width: 100%;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    border: 2px solid #000000;
    background: #ffffff;
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.05;
}

.paper-title {
    margin: 0;
    padding: 2px 8px;
    border-bottom: 2px solid #000000;
    background: #c9c9c9;
    color: #000000 !important;
    font-family: "Times New Roman", Times, serif;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.paper-section {
    border-bottom: 2px solid #000000;
    overflow: visible !important;
}

.paper-section:last-child {
    border-bottom: 0;
}

.paper-section h3 {
    margin: 0;
    padding: 2px 8px !important;
    border-top: 0 !important;
    border-bottom: 2px solid #000000 !important;
    background: #c9c9c9 !important;
    color: #000000 !important;
    font-family: "Times New Roman", Times, serif;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center;
    text-transform: uppercase !important;
}

.paper-section-open {
    padding: 17px 0 17px;
}

.paper-row {
    display: grid;
    grid-template-columns: 155px 1fr;
    align-items: end;
    min-height: 18px;
}

.paper-row-tall {
    min-height: 55px;
    align-items: center;
}

.paper-row-pad-bottom {
    padding-bottom: 8px;
}

.paper-label {
    padding: 0 8px 0 4px;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

.paper-line {
    min-height: 18px;
    padding: 0 4px 1px;
    border-bottom: 2px solid #000000;
    color: #000000;
    font-size: 13px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.paper-options {
    display: flex;
    gap: 26px;
    align-items: end;
    border-bottom: 0;
    font-size: 14px;
    font-weight: 400;
}

.paper-spacer {
    height: 29px;
}

@media (max-width: 760px) {
    .page {
        width: min(100% - 20px, var(--sb-page-max)) !important;
        padding-top: 14px !important;
    }

    .hero {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .grid,
    .radio-grid,
    .stats,
    .detail-grid {
        grid-template-columns: 1fr !important;
    }

    .btn,
    .top-actions,
    .form-actions,
    .modal-actions {
        width: 100% !important;
    }

    form {
        padding: 12px !important;
    }

    .auth-page form.login-form-stacked {
        padding: 0 !important;
    }

    table {
        min-width: 640px !important;
    }

    .login-shell {
        grid-template-columns: 1fr !important;
        row-gap: 32px !important;
        align-items: start !important;
        min-height: calc(100vh - 52px) !important;
        padding: 72px 12px 28px !important;
    }

    .login-card {
        justify-self: center !important;
        width: min(100% - 24px, 440px) !important;
        max-width: min(440px, 100%) !important;
    }

    .login-quote {
        border-left: 0 !important;
        border-top: 1px solid var(--sb-line-soft) !important;
        padding: 28px 8px 0 !important;
        align-items: center !important;
        text-align: center !important;
    }

    .login-quote p,
    .login-quote small {
        text-align: center !important;
        max-width: none !important;
    }


    .auth-topbar-inner {
        flex-wrap: wrap;
    }

    .login-quote span {
        display: none;
    }

    .login-quote p {
        font-size: clamp(16px, 3.5vw, 20px) !important;
    }

    .side-form .grid {
        grid-template-columns: 1fr !important;
    }

    .side-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }
}

/* --- Paneles tipo Supabase: header / body / footer --- */
.sb-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.sb-panel__header {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--sb-line) !important;
    background: var(--sb-panel) !important;
}

.sb-panel__header .eyebrow {
    margin-bottom: 4px !important;
}

.sb-panel__header h1 {
    margin: 0 0 4px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.sb-panel__header .subtitle,
.sb-panel__header p {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--sb-muted) !important;
    line-height: 1.45 !important;
}

.sb-panel__header--cc-premium {
    position: relative !important;
    overflow: hidden !important;
    padding: 14px 14px 16px !important;
    border-bottom: 1px solid rgba(21, 128, 61, 0.22) !important;
    background: linear-gradient(
            124deg,
            #c5e8d8 0%,
            #dfe6ee 18%,
            #b8dccf 36%,
            #eef2f7 54%,
            #a8d4c2 72%,
            #e2eaf0 88%,
            #9ccfb8 100%
        ) !important;
    background-size: 240% 240% !important;
    animation: cc-premium-bg 9s ease-in-out infinite !important;
}

.sb-panel__header--cc-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 80% at 92% 20%, rgba(36, 180, 126, 0.22), transparent 55%),
        radial-gradient(ellipse 100% 90% at 12% -8%, rgba(255, 255, 255, 0.72), transparent 50%),
        radial-gradient(ellipse 70% 60% at 50% 120%, rgba(59, 130, 246, 0.08), transparent 45%);
    pointer-events: none;
}

.sb-panel__header--cc-premium::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -40%;
    width: 45%;
    height: 160%;
    background: linear-gradient(98deg, transparent 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    transform: skewX(-16deg);
    animation: cc-premium-shine 5s ease-in-out infinite;
    pointer-events: none;
}

.sb-panel__header--cc-premium > * {
    position: relative !important;
    z-index: 1 !important;
}

.sb-panel__header--cc-premium .eyebrow {
    color: #047857 !important;
    font-weight: 700 !important;
}

.sb-panel__header--cc-premium h1 {
    color: #0c4a6e !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

.sb-panel__header--cc-premium .subtitle {
    color: #1e3a5f !important;
}

.candidate-filter-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-shrink: 0 !important;
    align-items: flex-end !important;
    gap: 12px 18px !important;
    padding: 10px 14px 12px !important;
    border-bottom: 1px solid var(--sb-line-soft) !important;
    background: linear-gradient(180deg, #f8fafb 0%, #f1f5f9 100%) !important;
}

.candidate-filter-toolbar__title {
    flex: 1 1 100% !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    color: var(--sb-muted) !important;
    letter-spacing: 0.02em !important;
    margin: 0 0 2px !important;
}

.candidate-filter-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: min(160px, 100%) !important;
}

.candidate-filter-item > span {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--sb-muted) !important;
}

.candidate-filter-item select {
    min-width: 140px !important;
}

@keyframes cc-premium-bg {
    0%,
    100% {
        background-position: 0% 40%;
    }
    50% {
        background-position: 100% 60%;
    }
}

@keyframes cc-premium-shine {
    0%,
    100% {
        transform: skewX(-16deg) translateX(-35%);
        opacity: 0.35;
    }
    45% {
        opacity: 0.95;
    }
    50% {
        transform: skewX(-16deg) translateX(320%);
        opacity: 0.85;
    }
    55% {
        opacity: 0.95;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sb-panel__header--cc-premium {
        animation: none !important;
        background-size: 100% 100% !important;
        background-position: 50% 50% !important;
    }

    .sb-panel__header--cc-premium::after {
        animation: none !important;
        opacity: 0 !important;
    }
}

.sb-panel__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 12px !important;
}

.sb-panel__body > form {
    padding: 0 !important;
    gap: 0 !important;
}

.sb-panel__footer {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    border-top: 1px solid var(--sb-line) !important;
    background: var(--sb-surface) !important;
}

.sb-table-shell {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 4px !important;
    background: var(--sb-surface) !important;
}

.sb-table-shell__header {
    flex: 0 0 auto !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--sb-line) !important;
    background: var(--sb-panel) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--sb-text) !important;
}

.sb-table-shell__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    padding: 8px 10px 12px !important;
}

.sb-table-shell__body table {
    min-width: 100% !important;
}

.sb-table-shell--wide table {
    min-width: 880px !important;
}

.sb-table-shell__footer {
    flex: 0 0 auto !important;
    padding: 9px 14px !important;
    border-top: 1px solid var(--sb-line) !important;
    background: var(--sb-panel-2) !important;
    font-size: 11px !important;
    color: var(--sb-muted) !important;
}

.notify-card {
    display: flex !important;
    flex-direction: column !important;
    max-width: 400px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--sb-surface) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 6px !important;
}

.notify-card__header {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--sb-line-soft) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sb-text) !important;
}

.notify-card__body {
    padding: 12px !important;
    font-size: 13px !important;
    color: var(--sb-muted) !important;
    line-height: 1.45 !important;
}

.notify-card__footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    padding: 8px 12px !important;
    border-top: 1px solid var(--sb-line) !important;
    background: var(--sb-panel) !important;
}

.notify-card__footer .btn {
    margin: 0 !important;
}

.notify-card strong {
    margin: 0 !important;
}

.notify-card p {
    margin: 0 !important;
}

.login-card.sb-panel {
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media print {
    @page {
        size: letter portrait;
        margin: 8mm;
    }

    html,
    body {
        background: #ffffff !important;
        color: #111827 !important;
    }

    #printArea,
    #printArea * {
        color: #111827 !important;
        box-shadow: none !important;
    }

    #printArea {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .paper-form {
        width: 584px !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .print-title {
        border-bottom: 1px solid #111827 !important;
    }

    .section {
        border: 1px solid #d1d5db !important;
        background: #ffffff !important;
    }

    .section h3 {
        border-bottom: 1px solid #d1d5db !important;
        background: #f9fafb !important;
        color: #111827 !important;
    }

    .detail {
        border-color: #d1d5db !important;
    }

    .detail span {
        color: #6b7280 !important;
    }
}