:root {
  --smart-primary: #005daa;
  --smart-primary-dark: #004a87;
  --smart-bg: #f4f7fb;
  --smart-text: #243247;
  --smart-muted: #6b778c;
  --smart-border: #dce4ef;
}

html { font-size: 15px; height: 100%; }
body { color: var(--smart-text); height: 100%; overflow: hidden; }
.portal-background { background: linear-gradient(145deg, #eef5ff 0%, var(--smart-bg) 46%, #f8fafc 100%); }
.portal-shell { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.portal-container { max-width: 880px; }
.portal-header { background: var(--smart-primary); box-shadow: 0 2px 12px rgba(28, 58, 98, .18); flex: 0 0 auto; min-height: 4rem; position: relative; z-index: 2; }
.portal-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.portal-card { background: #fff; border: 1px solid rgba(220, 228, 239, .9); border-radius: 1rem; box-shadow: 0 14px 40px rgba(35, 65, 105, .10); overflow: hidden; }
.portal-card-header { border-bottom: 1px solid var(--smart-border); padding: 1.5rem 1.5rem 1.1rem; }
.portal-card-body { padding: 1.5rem; }
.portal-eyebrow { color: var(--smart-primary); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-title { font-size: clamp(1.35rem, 4vw, 1.85rem); font-weight: 650; margin: .25rem 0 .5rem; }
.portal-copy { color: var(--smart-muted); line-height: 1.6; white-space: pre-line; }
.portal-summary { background: #f8faff; border: 1px solid var(--smart-border); border-radius: .75rem; padding: 1rem; }
.portal-field { border-bottom: 1px solid #edf1f6; padding: 1.2rem 0; }
.portal-field:first-child { padding-top: 0; }
.portal-field:last-child { border-bottom: 0; padding-bottom: 0; }
.required-mark { color: #c62828; }
.required-help { color: var(--smart-muted); font-size: .9rem; margin-bottom: .25rem; }
.form-label { font-weight: 600; }
.form-control, .form-select { border-color: #cfd9e6; min-height: 44px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15); }
.btn { min-height: 44px; }
.btn-primary { background-color: var(--smart-primary); }
.portal-actions { background: #fafcff; border-top: 1px solid var(--smart-border); margin: 1.5rem -1.5rem -1.5rem; padding: 1rem 1.5rem; }
.portal-footer { background: #fff; border-top: 1px solid var(--smart-border); color: var(--smart-muted); flex: 0 0 auto; font-size: .8rem; position: relative; z-index: 2; }
.portal-footer-logo { display: block; height: 2.15rem; margin: 0 auto; object-fit: contain; width: auto; }
.portal-footer-copy { margin-top: .35rem; }
.status-icon { align-items: center; background: #e8f7ee; border-radius: 50%; color: #198754; display: inline-flex; font-size: 2rem; height: 4rem; justify-content: center; width: 4rem; }
.file-current { color: var(--smart-muted); font-size: .86rem; }
.portal-file-picker { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; }
.portal-file-input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.portal-file-input:focus + .portal-file-button { box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15); }
.portal-file-input:disabled + .portal-file-button { opacity: .65; pointer-events: none; }
.portal-file-name { color: var(--smart-muted); font-size: .9rem; overflow-wrap: anywhere; }
.portal-multiselect { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.portal-multiselect-option { align-items: center; border: 1px solid #cfd9e6; border-radius: .65rem; cursor: pointer; display: flex; gap: .7rem; margin: 0; min-height: 48px; padding: .7rem .8rem; transition: border-color .15s ease, background-color .15s ease; }
.portal-multiselect-option:hover { background: #f5f9ff; border-color: #86b7fe; }
.portal-multiselect-option:has(.form-check-input:checked) { background: #eef5ff; border-color: var(--smart-primary); }
.portal-multiselect-option:has(.form-check-input:disabled) { cursor: default; opacity: .75; }
.portal-multiselect-option .form-check-input { flex: 0 0 auto; height: 1.2rem; margin: 0; width: 1.2rem; }
.read-only-note { background: #fff8e5; border: 1px solid #ffe3a3; border-radius: .75rem; color: #775b13; padding: .85rem 1rem; }

@media (max-width: 575.98px) {
  .portal-card-header, .portal-card-body { padding-left: 1rem; padding-right: 1rem; }
  .portal-actions { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
  .portal-header { min-height: 3.75rem; }
  .portal-footer-logo { height: 1.9rem; }
}
