.portal-body { min-height: 100vh; background: #f7f9fc; color: #15243c; }
.portal-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; padding: .7rem clamp(1rem, 3vw, 3rem); border-bottom: 1px solid #e0e7f1; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.portal-logo { display: inline-flex; align-items: center; gap: .2rem; color: #182c4a; font-size: 1.22rem; font-weight: 800; letter-spacing: -.08em; line-height: .9; }
.portal-logo img { width: 48px; height: 48px; object-fit: cover; }
.portal-logo strong { color: #3159df; }
.portal-logo small { display: block; margin-top: 5px; font-size: .42rem; letter-spacing: .16em; }
.portal-topbar-actions { display: flex; align-items: center; gap: 1.2rem; font-size: .82rem; font-weight: 700; }
.portal-topbar-actions a { color: #2547bd; }
.portal-topbar-actions button { min-height: 44px; padding: .5rem .8rem; border: 1px solid #cdd8e8; border-radius: 8px; background: #fff; color: #213a62; font-weight: 800; }
.portal-account-name { color: #526279; }
.portal-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 2.5rem; max-width: 1440px; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 3rem) 5rem; }
.portal-sidebar { display: flex; flex-direction: column; gap: .25rem; align-self: start; position: sticky; top: 105px; }
.portal-nav-label { margin: .5rem 1rem .7rem; color: #61728a; font-size: .65rem; font-weight: 800; letter-spacing: .15em; }
.portal-sidebar a { display: block; min-height: 44px; padding: .72rem 1rem; border-radius: 9px; color: #40516c; font-size: .86rem; font-weight: 700; }
.portal-sidebar a:hover, .portal-sidebar a.active { background: #e8efff; color: #2547bd; }
.portal-main { min-width: 0; }
.portal-main > .portal-notice, .portal-main > .portal-alert { margin-bottom: 1.4rem; }
.portal-notice { padding: 1rem 1.2rem; border: 1px solid #b6dec9; border-radius: 10px; background: #edf9f2; color: #1b6942; font-size: .88rem; }
.portal-alert ul { margin: .45rem 0 0; padding-left: 1.1rem; list-style: disc; }
.portal-heading { margin: .2rem 0 2rem; }
.portal-heading h1 { max-width: 840px; margin: .5rem 0 .6rem; font-size: clamp(2rem, 3.5vw, 3rem); }
.portal-heading > p:not(.eyebrow) { max-width: 700px; margin-bottom: 0; }
.portal-heading .text-link { margin-top: 1.2rem; }
.portal-back { display: inline-flex; min-height: 44px; align-items: center; margin-bottom: .8rem; color: #2547bd; font-size: .85rem; font-weight: 800; }
.portal-card { border: 1px solid #dfe7f2; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(29,54,114,.04); }
.portal-dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.portal-dashboard-card { display: flex; flex-direction: column; min-height: 240px; padding: 1.5rem; transition: transform .2s, border-color .2s; }
.portal-dashboard-card:hover { transform: translateY(-3px); border-color: #8ea9ed; }
.portal-dashboard-card > span { color: #3159df; font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
.portal-dashboard-card strong { margin: 2rem 0 .5rem; color: #15243c; font-size: 1.25rem; }
.portal-dashboard-card p { margin: 0 0 1.5rem; font-size: .82rem; line-height: 1.6; }
.portal-dashboard-card b { margin-top: auto; color: #2547bd; font-size: .8rem; }
.portal-empty { padding: 2rem; }
.portal-empty h2 { font-size: 1.35rem; }
.portal-page-list { display: grid; gap: .7rem; }
.portal-page-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 84px; padding: 1.1rem 1.4rem; }
.portal-page-row:hover { border-color: #8ea9ed; }
.portal-page-row > div { display: flex; flex-direction: column; gap: .25rem; }
.portal-page-row strong { font-size: .95rem; }
.portal-page-row span { color: #61728a; font-size: .74rem; }
.portal-page-row b { flex: none; color: #2547bd; font-size: .8rem; }
.portal-edit-form { max-width: 850px; padding: 2rem; }
.portal-edit-form fieldset { margin: 0 0 2rem; padding: 0 0 1.5rem; border: 0; border-bottom: 1px solid #e4ebf4; }
.portal-edit-form fieldset:last-of-type { border-bottom: 0; margin-bottom: 0; }
.portal-edit-form legend, .portal-permissions legend { margin-bottom: .4rem; color: #182c4a; font-size: 1.08rem; font-weight: 800; }
.portal-edit-form fieldset > p { font-size: .85rem; }
.portal-field { display: flex; flex-direction: column; gap: .4rem; margin: 1.1rem 0; }
.portal-field label { color: #263d5f; font-size: .82rem; font-weight: 800; }
.portal-field input, .portal-field textarea, .portal-field select { width: 100%; min-height: 46px; padding: .72rem .8rem; border: 1px solid #bdcbe0; border-radius: 9px; background: #fff; color: #15243c; font: inherit; font-size: .9rem; }
.portal-field textarea { resize: vertical; }
.portal-field input:focus, .portal-field textarea:focus { border-color: #3159df; box-shadow: 0 0 0 3px rgba(49,89,223,.12); outline: none; }
.portal-field small { color: #5d6c82; font-size: .72rem; }
.portal-form-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.portal-review { margin-bottom: 1rem; padding: 1.4rem; }
.portal-review-top { display: flex; justify-content: space-between; gap: 1rem; }
.portal-review-top > div { display: flex; flex-direction: column; gap: .2rem; }
.portal-review-top strong { font-size: .95rem; }
.portal-review-top span:not(.portal-status) { color: #5d6c82; font-size: .8rem; }
.portal-review blockquote { margin: 1rem 0; overflow-wrap: anywhere; line-height: 1.7; }
.portal-review small { color: #5d6c82; }
.portal-review-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.portal-review-actions .button { min-height: 44px; }
.portal-status { align-self: start; padding: .3rem .6rem; border-radius: 30px; background: #fff2dc; color: #805000; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.portal-status.is-approved { background: #e7f7ed; color: #17643a; }
.portal-status.is-rejected { background: #fce9e9; color: #922a2a; }
.portal-users-layout { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); align-items: start; gap: 1.2rem; }
.portal-create-user { padding: 1.5rem; }
.portal-create-user h2, .portal-subheading { font-size: 1.3rem; }
.portal-subheading { margin: 0 0 1rem; }
.portal-permissions { display: grid; gap: .65rem; margin: 1.5rem 0; padding: 0; border: 0; }
.portal-permissions legend { font-size: .88rem; }
.portal-permissions label, .portal-checkbox { display: flex; align-items: center; gap: .65rem; min-height: 36px; color: #33455e; font-size: .83rem; }
.portal-permissions input, .portal-checkbox input { accent-color: #3159df; width: 17px; height: 17px; }
.portal-create-user .button { margin-top: 1.2rem; }
.portal-user-card { margin-bottom: .7rem; padding: 1.1rem 1.2rem; }
.portal-user-card summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.portal-user-card summary::-webkit-details-marker { display: none; }
.portal-user-card summary > span:first-child { display: flex; flex-direction: column; gap: .2rem; }
.portal-user-card summary small { color: #607189; font-size: .72rem; }
.portal-user-card form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e4ebf4; }
.portal-self-note { padding: .7rem; border-radius: 8px; background: #edf3ff; color: #334d80; font-size: .8rem; }
.portal-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; color: #526279; font-size: .84rem; }
.portal-pagination a { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem .8rem; border: 1px solid #cdd8e8; border-radius: 8px; background: #fff; color: #2547bd; font-weight: 800; }
.portal-auth-main { display: grid; min-height: calc(100vh - 76px); align-items: center; padding: 2rem 1rem 4rem; }
.login-shell { display: grid; grid-template-columns: 1fr 460px; align-items: center; gap: clamp(2rem, 8vw, 9rem); width: min(1100px, 100%); margin: 0 auto; }
.login-intro h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.login-intro > p:not(.eyebrow) { max-width: 480px; font-size: 1.02rem; }
.login-graphic { display: flex; gap: .65rem; margin-top: 3rem; }
.login-graphic span { padding: .75rem 1rem; border: 1px solid #d6e1f3; border-radius: 8px; background: #edf3ff; color: #3256a2; font-size: .68rem; font-weight: 800; letter-spacing: .1em; }
.login-card { padding: clamp(1.5rem, 3vw, 2.7rem); }
.login-card h1 { margin-bottom: .45rem; font-size: 1.9rem; }
.login-card > p:not(.eyebrow) { font-size: .85rem; }
.login-card .button { width: 100%; margin-top: .7rem; }
.login-help { margin: 1.3rem 0 0; font-size: .75rem; line-height: 1.6; }
.login-help a { color: #2547bd; font-weight: 800; text-decoration: underline; }
@media (max-width: 1000px) { .portal-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-users-layout { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .portal-shell { grid-template-columns: 1fr; gap: 1.4rem; } .portal-sidebar { position: static; flex-direction: row; flex-wrap: wrap; } .portal-nav-label { flex-basis: 100%; } .login-shell { grid-template-columns: 1fr; max-width: 500px; } .login-intro { display: none; } }
@media (max-width: 600px) { .portal-topbar { min-height: 68px; } .portal-account-name, .portal-topbar-actions > a { display: none; } .portal-shell { padding: 1rem 16px 3rem; } .portal-sidebar { gap: .25rem; } .portal-sidebar a { padding: .7rem; font-size: .75rem; } .portal-dashboard-grid { grid-template-columns: 1fr; } .portal-page-row { align-items: flex-start; flex-direction: column; } .portal-edit-form { padding: 1.3rem; } .portal-review-top { align-items: flex-start; flex-direction: column; } .portal-auth-main { padding: 1rem 16px 3rem; } .login-card { padding: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .portal-dashboard-card { transition: none; } }