* { box-sizing: border-box; }
html { font-size: 15px; scrollbar-gutter: stable; }
body { margin: 0; color: var(--text); background: var(--page-bg); font: 1rem/1.6 "Segoe UI", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
a { color: var(--link); text-underline-offset: .2em; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); font-weight: 650; line-height: 1.25; letter-spacing: -.03em; overflow-wrap: anywhere; }
h2 { font-size: 1.15rem; font-weight: 650; line-height: 1.4; }
h3 { font-size: 1.05rem; font-weight: 650; line-height: 1.4; }
.bi { display: inline-block; flex-shrink: 0; line-height: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -10rem; padding: .75rem 1rem; z-index: 100; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); }
.skip-link:focus { top: 1rem; }
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; min-width: 0; padding: var(--space-5) var(--space-4); background: var(--nav-bg); border-right: 1px solid var(--border); overflow: auto; }
.sidebar-brand { display: flex; align-items: center; gap: var(--space-2); padding: 0 .5rem; min-height: 40px; }
.brand { display: flex; align-items: center; gap: .8rem; color: var(--text); text-decoration: none; font-size: 1rem; font-weight: 650; line-height: 1.35; min-width: 0; }
.brand-name { min-width: 0; overflow-wrap: anywhere; }
.brand-mark, .brand-logo { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; }
.brand-mark { display: grid; place-items: center; color: var(--brand-ink); background: var(--brand-highlight); border: 1px solid var(--border); font-size: 1.25rem; }
.brand-logo { object-fit: contain; }
.nav-label, .eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.nav-label { margin: 2.4rem .85rem .9rem; }
.sidebar nav { display: grid; gap: .3rem; }
.nav-link { display: flex; align-items: center; gap: .85rem; padding: .8rem .85rem; min-height: 44px; border-radius: var(--radius-small); border: 1px solid transparent; color: var(--nav-text); text-decoration: none; font-size: .88rem; line-height: 1.4; }
.nav-link > .bi { font-size: 1.1rem; }
.nav-link:hover { background: var(--hover-bg); color: var(--text); }
.nav-link.active { color: var(--brand-ink); background: var(--brand-highlight); border-color: var(--border); box-shadow: inset 3px 0 var(--brand-accent); font-weight: 650; }
.nav-text { min-width: 0; overflow-wrap: anywhere; }
.planned-dot { width: 5px; height: 5px; margin-left: auto; background: var(--border-strong); border-radius: 50%; flex-shrink: 0; }
.sidebar-bottom { margin-top: auto; padding-top: 2rem; }
.sidebar-note { margin: 1rem .85rem 0; font-size: .75rem; color: var(--text-muted); }
.workspace { display: flex; flex-direction: column; min-width: 0; }
.topbar { min-height: var(--header-height); display: flex; align-items: center; gap: var(--space-4); padding: .7rem var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border); }
.header-context { font-size: .88rem; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.workspace-selector { display: flex; align-items: center; gap: .3rem; min-width: 0; max-width: 24rem; margin-left: auto; color: var(--text-muted); }
.workspace-selector select { width: min(22vw, 16rem); min-width: 9rem; min-height: 44px; padding: .4rem .5rem; font-size: .85rem; background: var(--surface); }
.workspace-selector .icon-button { width: 44px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.appearance-control { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); }
.appearance-control select { width: auto; min-height: 44px; padding: .4rem 1.8rem .4rem .5rem; border-color: transparent; background-color: var(--surface); font-size: .85rem; cursor: pointer; }
.account-link { display: flex; align-items: center; gap: .65rem; padding: .5rem; min-height: 44px; border-radius: var(--radius-small); color: var(--text-muted); text-decoration: none; font-size: .85rem; min-width: 0; }
.account-link:hover { background: var(--hover-bg); }
.account-link > .bi:first-child { font-size: 1.25rem; }
.user-name { max-width: 16ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account-menu { position: relative; }
.account-menu > summary { cursor: pointer; list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu[open] > summary { background: var(--hover-bg); }
.account-menu nav { position: absolute; z-index: 60; top: calc(100% + .4rem); right: 0; display: grid; width: min(19rem, calc(100vw - 1rem)); padding: .4rem; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-raised); box-shadow: var(--shadow); }
.account-menu nav a { display: block; min-height: 44px; padding: .6rem .75rem; border-radius: var(--radius-small); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.account-menu nav a:hover, .account-menu nav a:focus-visible { background: var(--hover-bg); }
.icon-button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid transparent; border-radius: var(--radius-small); background: transparent; color: var(--text-muted); text-decoration: none; cursor: pointer; font-size: 1.15rem; }
.icon-button:hover { background: var(--hover-bg); color: var(--text); }
.nav-toggle, .mobile-close { display: none; }
[data-ui-ready] .nav-toggle { display: inline-flex; }
main { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 2.5rem var(--space-6) var(--space-8); min-width: 0; }
.page-heading { margin-bottom: var(--space-6); max-width: 900px; }
.eyebrow { margin-bottom: .65rem; }
.title-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.title-row h1 { margin: 0; }
.help-link { border-radius: 50%; }
.lead { color: var(--text-muted); font-size: 1rem; max-width: 75ch; }
.notice { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 2.25rem; border: 1px solid var(--info-border); border-radius: var(--radius); background: var(--info-bg); color: var(--info-text); }
.notice > .bi { font-size: 1.2rem; margin-top: .2rem; }
.notice h2 { font-size: .95rem; }
.notice p { margin-top: .35rem; font-size: .88rem; max-width: 95ch; }
.notice.warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.notice.error { background: var(--error-bg); color: var(--error-text); border-color: var(--error-border); }
.notice.success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.muted { color: var(--text-muted); font-size: .8rem; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.module-card { display: flex; flex-direction: column; min-width: 0; min-height: 210px; padding: 1.4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.module-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.3rem; color: var(--brand-ink); }
.card-top > .bi { font-size: 1.4rem; }
.status-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); background: var(--surface-subtle); font-size: .7rem; font-weight: 600; white-space: nowrap; }
.module-card p { margin: .6rem 0 1.4rem; color: var(--text-muted); font-size: .85rem; }
.card-link { margin-top: auto; display: flex; align-items: center; justify-content: space-between; color: var(--link); font-size: .8rem; font-weight: 600; }
.panel, .empty-state { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3.5rem 1.5rem; }
.state-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1rem; background: var(--surface-subtle); color: var(--text-muted); border: 1px solid var(--border); border-radius: 50%; font-size: 1.6rem; }
.empty-state h2 { margin: 1rem 0 .5rem; }
.empty-state p { color: var(--text-muted); max-width: 58ch; }
.empty-state > .button { margin-top: 1.5rem; }
.button, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 44px; padding: .65rem 1rem; border: 1px solid transparent; border-radius: var(--radius-small); cursor: pointer; text-decoration: none; font-weight: 600; font-size: .9rem; }
.primary-button { background: var(--action-bg); color: var(--action-text); }
.primary-button:hover { background: var(--action-hover); }
.secondary-button { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.secondary-button:hover { background: var(--hover-bg); }
button:disabled, input:disabled, select:disabled { color: var(--disabled-text); background: var(--disabled-bg); cursor: not-allowed; }
.form-field { display: grid; gap: .4rem; margin-bottom: 1.25rem; min-width: 0; }
.form-field label { font-weight: 600; font-size: .85rem; }
input, select, textarea { width: 100%; min-width: 0; min-height: 44px; padding: .65rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--radius-small); color: var(--control-text); background: var(--control-bg); }
input:autofill { color: var(--control-text); }
input.input-validation-error { border-color: var(--error-text); }
.validation-message { color: var(--error-text); font-size: .85rem; }
.validation-message ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.validation-summary-valid { display: none; }
.public-shell { display: flex; flex-direction: column; min-height: 100dvh; }
.public-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 2rem; }
.public-header .brand { max-width: 280px; }
.public-main { display: grid; place-items: center; flex: 1; padding: 2rem 1.25rem 3rem; }
.auth-panel { width: 100%; max-width: 440px; padding: 2.25rem; box-shadow: var(--shadow); }
.auth-symbol { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1.5rem; background: var(--brand-highlight); color: var(--brand-ink); border-radius: 12px; font-size: 1.4rem; }
.auth-panel h1 { font-size: 1.75rem; margin: 0 0 .6rem; }
.auth-panel form { margin-top: 1.75rem; }
.auth-panel .primary-button { width: 100%; margin-top: .35rem; }
.auth-note { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .75rem; }
.auth-note .bi { margin-top: .3rem; }
footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; padding: 1rem 2rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .72rem; }
.help-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.help-topics { display: grid; padding: .6rem; gap: .2rem; }
.help-topics a { color: var(--text-muted); border-radius: var(--radius-small); padding: .65rem .75rem; text-decoration: none; font-size: .88rem; }
.help-topics a:hover, .help-topics a[aria-current="page"] { background: var(--hover-bg); color: var(--text); }
.help-content h2:not(:first-child) { margin-top: 1.75rem; }
.help-content p { margin-top: .65rem; max-width: 80ch; color: var(--text-muted); }
.help-content .button { margin-top: 1.75rem; }
.admin-stack { display: grid; gap: var(--space-4); min-width: 0; }
.admin-stack > *, .admin-record { min-width: 0; overflow-wrap: anywhere; }
.admin-stack h2, .admin-stack h3 { margin-bottom: .8rem; }
.admin-stack p { margin-bottom: 1rem; }
.admin-form { max-width: 40rem; margin-top: 1rem; }
.destination-panel { border-left: 3px solid var(--brand-accent); margin-bottom: var(--space-4); }
.destination-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: end; max-width: 52rem; margin: 1rem 0; }
.destination-form label { grid-column: 1 / -1; font-weight: 600; }
.destination-current { padding: .75rem 1rem; border-radius: var(--radius-small); background: var(--surface-subtle); overflow-wrap: anywhere; }
.role-summaries { margin: .75rem 0; font-size: .85rem; color: var(--text-muted); }
.role-summaries p { margin-bottom: .4rem; }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .75rem; align-items: end; }
.search-form label { grid-column: 1 / -1; }
.profile-layout { max-width: 52rem; }
.profile-details { display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: .6rem 1rem; margin: 1rem 0; overflow-wrap: anywhere; }
.profile-details dt { font-weight: 600; }
.profile-details dd { margin: 0; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1rem 0 1.5rem; }
.admin-links { padding-left: 1.2rem; }
.admin-links li { padding: .4rem 0; }
.admin-record { border-top: 1px solid var(--border); padding: 1.25rem 0; }
.admin-record summary { cursor: pointer; min-height: 44px; padding: .6rem 0; color: var(--link); }
.branding-preview { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); color: var(--text); }
.branding-preview-logo { width: 48px; height: 48px; object-fit: contain; }
.branding-preview strong { margin-right: auto; overflow-wrap: anywhere; }
.branding-swatch { width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: 50%; }
.branding-swatch[data-branding-primary] { background: var(--brand-primary); }
.branding-swatch[data-branding-accent] { background: var(--brand-accent); }
.identifier { overflow-wrap: anywhere; font-size: .8rem; }
.table-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-small); }
table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .88rem; }
caption { text-align: left; padding: .75rem 1rem; font-weight: 600; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
th { background: var(--surface-subtle); font-weight: 600; }
tbody tr:hover { background: var(--hover-bg); }
dialog { max-width: min(520px, calc(100% - 2rem)); padding: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: var(--overlay); }
.loading-state { padding: 1rem; color: var(--text-muted); }
.loading-state .bi { margin-right: .5rem; }
.confirmation-panel { max-width: 620px; }
.confirmation-panel p { color: var(--text-muted); }
.confirmation-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.portal-tooltip { position: fixed; z-index: 200; max-width: min(260px, calc(100vw - 16px)); padding: .5rem .7rem; border-radius: 6px; background: var(--tooltip-bg); color: var(--tooltip-text); box-shadow: var(--shadow); font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.text-link { display: inline-block; margin-top: 1.5rem; }
code { overflow-wrap: anywhere; }
.nav-overlay { position: fixed; inset: 0; z-index: 40; border: 0; background: var(--overlay); }
@media (min-width: 901px) {
    .sidebar-reduced .app-shell { grid-template-columns: var(--sidebar-reduced-width) minmax(0, 1fr); }
    .sidebar-reduced .sidebar { padding: 1.5rem .75rem; }
    .sidebar-reduced .sidebar-brand { padding: 0; justify-content: center; }
    .sidebar-reduced .brand-name, .sidebar-reduced .nav-text, .sidebar-reduced .nav-label, .sidebar-reduced .sidebar-note, .sidebar-reduced .planned-dot { display: none; }
    .sidebar-reduced .sidebar nav { margin-top: 2rem; }
    .sidebar-reduced .nav-link { justify-content: center; padding: .85rem .5rem; }
}
@media (max-width: 1200px) {
    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .header-actions { gap: .75rem; }
    .help-layout { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .app-shell { display: block; }
    .sidebar { position: static; height: auto; }
    [data-ui-ready] .sidebar { position: fixed; width: min(290px, calc(100vw - 40px)); height: 100dvh; top: 0; left: 0; z-index: 50; visibility: hidden; }
    [data-ui-ready] .nav-open .sidebar { visibility: visible; }
    [data-ui-ready] .mobile-close { display: inline-flex; margin-left: auto; }
    .nav-open { overflow: hidden; }
    .sidebar-note { display: none; }
    .sidebar-bottom { padding-top: 1rem; }
    .sidebar-brand { padding: 0; }
    .topbar { padding: .65rem 1.25rem; }
    main { padding: 2rem 1.25rem 3rem; }
    .help-layout { grid-template-columns: 1fr; }
    .help-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .destination-form, .search-form, .profile-details { grid-template-columns: 1fr; }
    .header-context, .user-name { display: none; }
    .header-actions { gap: .5rem; }
    .topbar { padding: .5rem 1rem; min-height: 60px; }
    .module-grid { grid-template-columns: 1fr; }
    .module-card { min-height: 190px; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: .35rem; }
    .notice { padding: 1.1rem; }
    .public-header { padding: 1rem; gap: .5rem; }
    .public-header .brand { font-size: .85rem; }
    .public-header .brand-mark { flex-basis: 32px; width: 32px; height: 32px; }
    .appearance-control { gap: .2rem; }
    .appearance-control select { padding-right: 1.4rem; }
    .auth-panel { padding: 1.5rem; }
    footer { padding: 1rem 1.25rem; flex-wrap: wrap; }
    .help-topics { grid-template-columns: 1fr; }
    .help-content { padding: 1.25rem; }
    .icon-button { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media print {
    :root, :root[data-theme="dark"] { color-scheme: light; --page-bg: var(--print-bg); --surface: var(--print-bg); --surface-raised: var(--print-bg); --surface-subtle: var(--print-bg); --text: var(--print-text); --text-muted: var(--print-muted); --border: var(--print-border); --link: var(--print-text); --brand-ink: var(--print-text); }
    .sidebar, .topbar, .public-header, .nav-overlay, .help-link, .portal-tooltip, .skip-link, footer { display: none !important; }
    .app-shell { display: block; }
    main { max-width: none; padding: 0; }
    .notice { background: var(--print-bg); color: var(--print-text); border-color: var(--print-border); }
    .panel, .module-card, .empty-state { box-shadow: none; break-inside: avoid; }
}

/* Language choice shares the header without truncating translated labels. */
.language-control { display: flex; align-items: center; gap: .25rem; margin: 0; min-width: 0; color: var(--text-muted); }
.language-control select { width: auto; min-width: 0; min-height: 44px; padding: .4rem 1.6rem .4rem .4rem; font-size: .85rem; background: var(--surface); border-color: transparent; }
.language-control .icon-button { flex-shrink: 0; }
.nav-text, .module-card h3, .help-topics a, .button { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .header-context { display: none; } .header-actions { gap: .5rem; } }
@media (max-width: 640px) {
    .public-header { flex-wrap: wrap; }
    .public-header .header-actions { flex-wrap: wrap; gap: .25rem; }
    .language-control { gap: 0; }
    .language-control > .bi { display: none; }
    .language-control select { padding-left: .25rem; }
    .header-actions { gap: .15rem; }
    .topbar { gap: .25rem; padding: .5rem; flex-wrap: wrap; }
    .workspace-selector { order: 3; width: 100%; max-width: none; margin-left: 0; }
    .workspace-selector select { width: 100%; }
    .appearance-control > .bi { display: none; }
}

.import-file-list { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .5rem; }
.import-file-list li { padding: .7rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-subtle); overflow-wrap: anywhere; }
.import-file-list .button { margin-left: .5rem; }
.import-checkbox label { display: flex; align-items: center; gap: .6rem; }
.import-checkbox input[type="checkbox"] { width: 1.1rem; min-width: 1.1rem; height: 1.1rem; min-height: 1.1rem; margin: 0; }
.import-advanced-options { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 1rem; background: var(--surface-subtle); }
.import-advanced-options > summary { cursor: pointer; padding: .7rem 0; font-weight: 600; }
.import-advanced-options > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.import-advanced-fields { display: grid; gap: .9rem; padding: .2rem 0 1rem; }
.import-duplicate-option .muted { margin: .35rem 0 .65rem; }
.import-duplicate-reason { display: none; }
.import-duplicate-option:has(#RetainDuplicate:checked) .import-duplicate-reason { display: block; }
.import-destination-summary { min-width: 0; overflow-wrap: anywhere; }
.table-responsive { max-width: 100%; overflow-x: auto; }
.import-history-table { min-width: 102rem; table-layout: auto; }
.import-history-table th { white-space: nowrap; }
.import-history-table td { min-width: 7rem; max-width: 18rem; overflow-wrap: anywhere; vertical-align: top; }
@media (max-width: 640px) { .import-file-list .button { display: block; margin: .5rem 0 0; } }