/* CSS Document */

 :root { --color-text:#2C2C2C; --color-white:#FFFFFF; --color-page:#1e1515; --color-border:#D9D9D9; --color-border-soft:#EAEAEA; --color-placeholder-background:#EAEAEA; --placeholder-icon-opacity:.28; --color-brand:#009BD0; --color-link:#0077A3; --color-highlight:#E6F6FB; --color-warning:#FBBF24; --font-ui:"Open Sans", Arial, sans-serif; --font-display:"Playfair Display", Georgia, serif; --radius:4px; --font-size-eyebrow:12px; --font-size-small:14px; --font-size-body:16px; --font-size-heading-functional-small:20px; --font-size-heading-functional:28px; --font-size-heading-editorial:32px; --font-size-title:42px; --font-size-page-title:56px; --line-height-tight:1.12; --line-height-heading:1.25; --line-height-default:1.6; --line-height-caption:1.4; }
    html{overflow-y:scroll;scrollbar-gutter:stable} *{box-sizing:border-box} 
    body{margin:0;color:var(--color-text);background:var(--color-page);font-family:var(--font-ui);font-size:var(--font-size-body);line-height:var(--line-height-default)} a{color:var(--color-link);text-decoration:underline;text-underline-offset:3px}
    .nav{max-width:1180px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{color:var(--color-text);font-weight:700;text-decoration:none}.nav-links{display:flex;align-items:center;flex-wrap:wrap;gap:14px;font-size:var(--font-size-small)}.nav-links a,.nav-links span{color:var(--color-text);text-decoration:none}.disabled-link{color:var(--color-text)}.tag{display:inline-block;margin-left:4px;padding:2px 6px;border:1px solid var(--color-border);border-radius:var(--radius);font-size:var(--font-size-eyebrow);color:var(--color-text)}main{max-width:1180px;margin:0 auto;padding:32px 24px 64px}section{margin:0 0 48px}h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;line-height:var(--line-height-tight)}h1{font-size:clamp(var(--font-size-title),5vw,var(--font-size-page-title));max-width:840px}h2{margin-bottom:16px;font-size:clamp(var(--font-size-heading-editorial),3.5vw,var(--font-size-title));line-height:var(--line-height-heading)}h3{font-size:var(--font-size-heading-functional);line-height:var(--line-height-heading)}p{margin:0 0 16px}.breadcrumbs{margin-bottom:32px;font-size:var(--font-size-small);color:var(--color-text)}.breadcrumbs a{color:var(--color-link);text-decoration:underline;text-underline-offset:3px}.eyebrow{margin-bottom:12px;color:var(--color-link);font-size:var(--font-size-eyebrow);font-weight:700;letter-spacing:.04em;text-transform:uppercase}.intro{max-width:760px;font-size:var(--font-size-body)}.layout{display:grid;grid-template-columns:2fr 1fr;gap:24px}.panel,.card{padding:20px;border:1px solid var(--color-border-soft);border-radius:var(--radius);background:var(--color-white);box-shadow:0 6px 18px rgba(44,44,44,.06)}.meta-list{margin:0;padding:0;list-style:none}.meta-list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--color-border-soft)}.meta-list li:last-child{border-bottom:0}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #009BD0;border-radius:var(--radius);background:#009BD0;color:var(--color-white);font-weight:700;text-decoration:none;cursor:pointer;transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease}.button:hover{background:#20B5E6;border-color:#20B5E6;color:var(--color-white);text-decoration:none}.button:active{background:#006B8F;border-color:#006B8F;color:var(--color-white)}.button:focus-visible{outline:2px solid #0077A3;outline-offset:2px}.button.secondary{background:var(--color-white);border-color:#009BD0;color:#0077A3}.button.secondary:hover{background:#E6F6FB;border-color:#0077A3;color:#006B8F}.button.secondary:active{background:#006B8F;border-color:#006B8F;color:var(--color-white)}.button.secondary{background:var(--color-white);color:var(--color-link)}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.footer{border-top:0;background:var(--color-text);color:var(--color-white)}.footer-inner{max-width:1180px;min-height:96px;margin:0 auto;padding:32px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;font-size:var(--font-size-small)}.footer-brand{display:flex;align-items:center;gap:16px;color:var(--color-white);font-weight:var(--font-weight-regular)}.footer-logo{display:block;width:180px;height:auto;border:0}.footer-links{display:flex;flex-wrap:wrap;gap:16px}.footer-cookie-trigger{color:inherit;font-size:var(--font-size-eyebrow)}.footer a{color:var(--color-white);font-size:var(--font-size-eyebrow);text-decoration:none}.footer a:hover{text-decoration:underline;text-underline-offset:3px}@media(max-width:860px){.layout{grid-template-columns:1fr}.nav{align-items:flex-start;flex-direction:column}}

    .nav { display: grid; grid-template-columns: minmax(280px, 1fr) auto minmax(220px, 1fr); align-items: center; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--color-text); font-weight: 700; text-decoration: none; }
    .brand-logo { display: block; width: 220px; height: auto; border: 0; }
    .nav-center { display: flex; align-items: center; justify-content: center; gap: 18px; min-width: 0; }
    .nav-center a { color: var(--color-text); font-size: var(--font-size-small); font-weight: 700; text-decoration: none; white-space: nowrap; }
    .nav-actions a, .language-menu summary { color: var(--color-text); font-size: var(--font-size-small); font-weight: 400; text-decoration: none; white-space: nowrap; }
    .nav-center a:hover { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
    .nav-actions a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
    .language-menu summary:hover { color: var(--color-text); text-decoration: none; }
    .nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
    .language-menu { position: relative; }
    .language-menu summary { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); list-style: none; cursor: pointer; }
    .language-menu summary::-webkit-details-marker { display: none; }
    .language-menu summary::after { content: ""; width: 0; height: 0; margin-left: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--color-text); }
    .language-options { position: absolute; top: calc(100% + 6px); right: 0; min-width: 72px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); box-shadow: 0 8px 24px rgba(44, 44, 44, .12); z-index: 60; }
    .language-options span { display: block; padding: 6px 8px; color: var(--color-text); font-size: var(--font-size-small); }
    @media (max-width: 980px) { .nav { grid-template-columns: 1fr; align-items: start; } .nav-center { justify-content: flex-start; flex-wrap: wrap; } .nav-actions { justify-content: flex-start; flex-wrap: wrap; } }

    .view-bar { position: sticky; top: 0; z-index: 70; width: 100%; border-bottom: 1px solid #D5D9DD; background: #F1F2F3; color: #2F3438; }
    .view-bar-inner { max-width: 1180px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; font-size: var(--font-size-small); }
    .view-pill { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 28px; padding: 4px 8px; border: 1px solid #CBD1D6; border-radius: var(--radius); background: #F7F7F7; color: #2F3438; font-weight: 400; text-decoration: none; }
    .view-pill.active { border-color: #8E969E; background: #FFFFFF; color: #2C2C2C; font-weight: 700; }
    .view-pill, .view-pill:hover, .view-pill:focus, .view-pill:active { text-decoration: none; }
    .view-pill:hover, .view-pill:focus-visible { border-color: #8E969E; background: #FFFFFF; color: #2C2C2C; text-decoration: none; }
    main { max-width: 1180px; margin: 0 auto; padding: 0 24px 64px; }
    section { margin: 0 0 48px; }
    h1 { max-width: 820px; font-size: clamp(var(--font-size-heading-editorial), 4vw, var(--font-size-title)); }
    .eyebrow { margin-bottom: 4px; color: var(--color-link); font-size: var(--font-size-eyebrow); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .page-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 24px; padding: 48px 24px 24px; border-bottom: 1px solid var(--color-border-soft); background: var(--color-white); }
    .page-hero-inner { max-width: 1132px; margin: 0 auto; }
    .page-hero .breadcrumbs { margin-bottom: 24px; }
    .page-hero-banner { position: relative; width: 100%; min-height: 260px; margin-bottom: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-placeholder-background); display: flex; align-items: center; justify-content: center; }
    .page-hero-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(35deg, rgba(44,44,44,.62) 0%, rgba(44,44,44,.28) 48%, rgba(44,44,44,0) 100%); }
    .banner-content { position: absolute; left: 32px; right: 32px; bottom: 32px; z-index: 1; color: var(--color-white); }
    .banner-content .eyebrow { color: var(--color-white); }
    .banner-content h1 { color: var(--color-white); }
    .page-hero .intro { max-width: 760px; margin: 8px 0 0; font-size: var(--font-size-body); line-height: var(--line-height-default); text-wrap: pretty; }
    .placeholder-icon { display: block; width: 48px; height: 48px; object-fit: contain; filter: grayscale(1); opacity: var(--placeholder-icon-opacity, .28); }
    .layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
    .panel h2 { margin-bottom: 8px; font-family: var(--font-ui); font-size: var(--font-size-heading-functional-small); font-weight: 600; line-height: var(--line-height-heading); }
    .side-rail { display: grid; gap: 22px; }
    .side-rail .button { width: 100%; }
    .access-request-card { display: grid; gap: 18px; padding: 20px; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: #FAFAFA; box-shadow: none; transition: border-color 140ms ease; }
   .access-locked-button { gap: 8px; border-color: var(--color-border); background: var(--color-border-soft); color: var(--color-muted); box-shadow: none; cursor: pointer; }
   .access-locked-button:hover, .access-locked-button:active { border-color: var(--color-border); background: var(--color-border-soft); color: var(--color-muted); box-shadow: none; cursor: pointer; }
    .access-locked-button .lock-icon, .access-locked-button span:last-child { opacity: .62; }
    .lock-icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; flex: 0 0 14px; }
    .lock-icon svg { display: block; width: 100%; height: 100%; }
    .access-state-note h2 { margin: 0 0 8px; font-family: var(--font-ui); font-size: var(--font-size-body); font-weight: 600; line-height: var(--line-height-heading); }
    .access-state-note p { margin: 0; color: #6F6F6F; font-size: var(--font-size-small); line-height: var(--line-height-default); }
    .side-rail-section { display: grid; gap: 10px; margin: 0; }
    .side-rail-heading { margin: 0; font-family: var(--font-ui); font-size: var(--font-size-heading-functional-small); font-weight: 600; line-height: var(--line-height-heading); }
    .side-rail .meta-list { font-size: var(--font-size-small); line-height: var(--line-height-caption); }
    .side-rail .meta-list li { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); align-items: start; }
    .side-rail .meta-list strong { font-weight: 600; text-align: right; }
    .level-value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .level-dots { display: inline-flex; gap: 4px; align-items: center; }
    .level-dot { width: var(--level-dot-size, 6px); height: var(--level-dot-size, 6px); border: 1px solid var(--color-muted, #6F6F6F); border-radius: 999px; }
    .level-dot.filled { background: var(--color-muted, #6F6F6F); }
    .video-placeholder { aspect-ratio: 16 / 9; width: 100%; margin-bottom: 24px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-placeholder-background); display: flex; align-items: center; justify-content: center; }
    .video-placeholder-icon { display: block; width: 96px; height: 96px; color: var(--color-muted, #6F6F6F); opacity: var(--placeholder-icon-opacity, .28); }
    .activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
    .activity-card { display: flex; align-items: center; min-height: 78px; padding: 16px; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 100%); }
    .activity-card-inner { display: flex; align-items: center; gap: 12px; }
    .activity-icon { width: 32px; height: 32px; color: var(--color-brand); flex: 0 0 auto; }
    .activity-icon svg { display: block; width: 100%; height: 100%; }
    .activity-label { margin: 0 0 2px; color: var(--color-text); font-family: var(--font-ui); font-size: var(--font-size-body); font-weight: 600; line-height: var(--line-height-caption); }
    .activity-meta { margin: 0; color: var(--color-text); font-size: var(--font-size-small); line-height: var(--line-height-caption); }
    .button-icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; font-size: 18px; line-height: 1; }
    .module-faculty-card { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-white); box-shadow: 0 6px 18px rgba(44,44,44,.06); color: var(--color-text); text-decoration: none; }
    .module-faculty-card:hover { border-color: var(--color-brand); text-decoration: none; }
    .module-faculty-card:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
    .module-faculty-header { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 18px; }
    .module-faculty-photo { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-placeholder-background); }
   .module-faculty-photo .placeholder-icon { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; opacity: 1; }
    .module-faculty-title-block { display: grid; justify-items: start; gap: 6px; text-align: left; }
    .module-faculty-title-block h2 { margin: 0; font-family: var(--font-ui); font-size: var(--font-size-heading-functional-small); font-weight: 600; line-height: var(--line-height-heading); }
    .module-faculty-role { margin: 0; color: var(--color-muted); font-size: var(--font-size-small); font-weight: 600; line-height: var(--line-height-caption); }
    .module-faculty-cta { display: inline-flex; align-items: center; justify-self: start; gap: 8px; color: var(--color-muted, #6F6F6F); font-size: var(--font-size-small); font-weight: 600; text-decoration: none; white-space: nowrap; }
    .module-faculty-card:hover .module-faculty-cta, .module-faculty-card:focus-visible .module-faculty-cta { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
    .module-faculty-cta .arrow-placeholder { position: relative; display: inline-block; width: 16px; height: 10px; margin-left: 0; }
    .module-faculty-cta .arrow-placeholder::before { content: ""; position: absolute; top: 5px; left: 0; width: 14px; border-top: 1px solid currentColor; }
    .module-faculty-cta .arrow-placeholder::after { content: ""; position: absolute; top: 2px; right: 0; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
    @media(max-width:860px){.page-hero-banner{min-height:200px}.layout,.activity-grid{grid-template-columns:1fr}.side-rail{width:100%}.nav{align-items:flex-start;flex-direction:column}}
    @media(max-width:520px){.module-faculty-header{grid-template-columns:1fr}}

    html:has(.cookie-popover:target), body:has(.cookie-popover:target) { overflow: hidden; }
    .cookie-popover { display: none; position: fixed; inset: 0; z-index: 120; padding: 24px; background: rgba(44, 44, 44, .42); align-items: center; justify-content: center; }
    .cookie-popover:target { display: flex; }
    .cookie-backdrop { position: absolute; inset: 0; cursor: default; }
    .cookie-dialog { position: relative; z-index: 1; --color-functional-surface:#EAEAEA; --color-functional-surface-hover:#D9D9D9; --color-functional-surface-active:#CFCFCF; width: min(680px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); box-shadow: 0 24px 60px rgba(44, 44, 44, .18); }
    .cookie-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 22px; border-bottom: 1px solid var(--color-border-soft); }
    .cookie-header h2 { margin: 0; font-family: var(--font-ui); font-size: var(--font-size-heading-functional); font-weight: 600; line-height: var(--line-height-heading); color: var(--color-text); }
    .cookie-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-functional-surface); color: var(--color-text); font-size: var(--font-size-heading-functional, 28px); line-height: 1; text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease; }
    .cookie-close:hover { background: var(--color-functional-surface-hover); border-color: var(--color-border); color: var(--color-text); text-decoration: none; }
    .cookie-close:active { background: var(--color-functional-surface-active); border-color: var(--color-border); color: var(--color-text); }
    .cookie-close:focus-visible { outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .cookie-body { padding: 18px 22px 96px; }
    .cookie-body h3 { margin: 0 0 12px; font-family: var(--font-ui); font-size: var(--font-size-small); font-weight: 700; line-height: var(--line-height-heading); }
    .cookie-body p { margin: 0 0 28px; color: var(--color-muted, #6F6F6F); font-size: var(--font-size-small); line-height: var(--line-height-default); }
    .cookie-options { display: grid; gap: 8px; }
    .cookie-accordion { overflow: hidden; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-page, #F7F7F7); transition: background-color 140ms ease, border-color 140ms ease; }
    .cookie-accordion:hover { background: var(--color-functional-surface); border-color: var(--color-border); }
    .cookie-accordion[open] { background: var(--color-white); border-color: var(--color-border); }
    .cookie-accordion[open]:hover { background: var(--color-white); }
    .cookie-option { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; color: var(--color-text); list-style: none; cursor: pointer; transition: background-color 140ms ease; }
    .cookie-option:hover { background: var(--color-functional-surface); }
    .cookie-option:active { background: var(--color-functional-surface-active); }
    .cookie-option::-webkit-details-marker { display: none; }
    .cookie-chevron { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 0; background: transparent; color: var(--color-text); transition: background-color 140ms ease, transform 140ms ease; }
    .cookie-chevron::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
    .cookie-accordion[open] .cookie-chevron { transform: rotate(180deg); }
    .cookie-option:hover .cookie-chevron { color: var(--color-text); }
    .cookie-option-title { font-size: var(--font-size-small); font-weight: 700; line-height: var(--line-height-caption); }
    .cookie-option-controls { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .cookie-status { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 16px; border-radius: 999px; background: #F7F7F7; color: var(--color-muted, #6F6F6F); font-size: 12px; font-weight: 700; white-space: nowrap; }
    .cookie-toggle { position: relative; width: 52px; height: 28px; flex: 0 0 auto; border-radius: 999px; background: var(--color-brand, #009BD0); }
    .cookie-toggle::after { content: "✓"; position: absolute; top: 3px; right: 3px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-white); color: var(--color-text); font-size: 13px; font-weight: 700; }
    .cookie-toggle.disabled { background: var(--color-functional-surface-hover); }
    .cookie-toggle.disabled::after { color: var(--color-muted, #6F6F6F); }
    .cookie-toggle.muted { background: var(--color-muted, #6F6F6F); }
    .cookie-toggle.muted::after { content: "×"; right: auto; left: 3px; color: var(--color-text); }
    .cookie-panel { margin: 0; padding: 16px 16px 16px 56px; border-top: 1px solid var(--color-border); color: var(--color-muted, #6F6F6F); font-size: var(--font-size-small); line-height: var(--line-height-default); }
    .cookie-panel-text { display: block; max-width: 520px; }
    .cookie-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--color-border-soft); }
    .cookie-actions-left, .cookie-actions-right { display: flex; flex-wrap: wrap; gap: 8px; }
    .cookie-action { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--color-brand, #009BD0); border-radius: var(--radius); background: var(--color-white); color: var(--color-link, #0077A3); font-size: var(--font-size-small); font-weight: 700; text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
    .cookie-action:hover { background: var(--color-highlight, #E6F6FB); border-color: var(--color-link, #0077A3); color: #006B8F; text-decoration: none; }
    .cookie-action:active { background: #006B8F; border-color: #006B8F; color: var(--color-white); }
    .cookie-action:focus-visible { outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .cookie-action.secondary { border-color: var(--color-border); background: var(--color-white); color: var(--color-text); }
    .cookie-action.secondary:hover { background: var(--color-page, #F7F7F7); border-color: var(--color-text); color: var(--color-text); }
    .cookie-action.secondary:active { background: var(--color-text); border-color: var(--color-text); color: var(--color-white); }
    @media (max-width: 640px) { .cookie-option { grid-template-columns: 28px minmax(0, 1fr); } .cookie-option-controls { grid-column: 2; justify-self: start; } .cookie-panel { margin: 0; padding: 16px 16px 16px 56px; border-top: 1px solid var(--color-border); } .cookie-footer { align-items: stretch; flex-direction: column; } }


    html:has(.login-modal:target), body:has(.login-modal:target) { overflow: hidden; }
    .login-modal { display: none; position: fixed; inset: 0; z-index: 140; padding: 24px; background: rgba(44, 44, 44, .42); align-items: center; justify-content: center; }
    .login-modal:target { display: flex; }
    .login-backdrop { position: absolute; inset: 0; cursor: default; }
    .login-dialog { position: relative; z-index: 1; width: min(480px, 100%); border: 1px solid var(--color-border, #D9D9D9); border-radius: var(--radius, 4px); background: var(--color-white, #FFFFFF); box-shadow: 0 24px 60px rgba(44, 44, 44, .18); }
    .login-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 24px; border-bottom: 1px solid var(--color-border-soft, #EAEAEA); }
    .login-header h2 { margin: 0; font-family: var(--font-ui, "Open Sans", Arial, sans-serif); font-size: var(--font-size-heading-functional, 28px); font-weight: var(--font-weight-semibold, 600); line-height: var(--line-height-heading, 1.25); color: var(--color-text, #2C2C2C); }
    .login-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border, #D9D9D9); border-radius: var(--radius, 4px); background: transparent; color: var(--color-text, #2C2C2C); font-size: var(--font-size-heading-functional, 28px); line-height: 1; text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease; }
    .login-close:hover { background: var(--color-page, #F7F7F7); border-color: var(--color-border, #D9D9D9); color: var(--color-text, #2C2C2C); text-decoration: none; }
    .login-close:active { background: var(--color-border-soft, #EAEAEA); border-color: var(--color-border, #D9D9D9); color: var(--color-text, #2C2C2C); }
    .login-close:focus-visible { outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .login-body { padding: 24px; }
    .login-body p { margin: 0; color: var(--color-muted, #6F6F6F); font-size: var(--font-size-small, 14px); line-height: var(--line-height-default, 1.6); }
    .login-body .login-subheading { margin: 0 0 8px; color: var(--color-text, #2C2C2C); font-size: var(--font-size-card-title, 20px); font-weight: var(--font-weight-semibold, 600); line-height: var(--line-height-heading, 1.25); }
    .login-body .login-description { margin: 0 0 24px; }
    .login-body form { margin: 0 0 16px; }
    .login-field { display: block; margin-bottom: 16px; }
    .login-field span { display: block; margin-bottom: 8px; color: var(--color-text, #2C2C2C); font-size: var(--font-size-small, 14px); font-weight: var(--font-weight-semibold, 600); }
    .login-input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-border, #D9D9D9); border-radius: var(--radius, 4px); background: var(--color-white, #FFFFFF); color: var(--color-text, #2C2C2C); font-family: var(--font-ui, "Open Sans", Arial, sans-serif); font-size: var(--font-size-small, 14px); line-height: var(--line-height-caption, 1.4); }
    .login-input::placeholder { color: var(--color-muted, #6F6F6F); opacity: .72; }
    .login-input:focus-visible { border-color: var(--color-brand, #009BD0); outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .login-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 32px; }
    .login-remember { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--color-text, #2C2C2C); font-size: var(--font-size-small, 14px); line-height: var(--line-height-caption, 1.4); cursor: pointer; }
    .login-remember input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--color-brand, #009BD0); cursor: pointer; }
    .login-forgot { color: var(--color-muted, #6F6F6F); font-size: var(--font-size-small, 14px); font-weight: var(--font-weight-regular, 400); line-height: var(--line-height-caption, 1.4); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
    .login-forgot:hover { color: var(--color-link, #0077A3); }
    .login-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 0; padding: 12px 16px; border: 1px solid var(--color-brand, #009BD0); border-radius: var(--radius, 4px); background: var(--color-brand, #009BD0); color: var(--color-white, #FFFFFF); font-family: var(--font-ui, "Open Sans", Arial, sans-serif); font-size: var(--font-size-body, 16px); font-weight: var(--font-weight-bold, 700); text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease; }
    .login-button:hover { background: #20B5E6; border-color: #20B5E6; color: var(--color-white, #FFFFFF); text-decoration: none; }
    .login-button:active { background: #006B8F; border-color: #006B8F; color: var(--color-white, #FFFFFF); }
    .login-button:focus-visible { outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .login-note { margin: 0; color: var(--color-muted, #6F6F6F); font-size: var(--font-size-small, 14px); line-height: var(--line-height-caption, 1.4); }
    .login-note a { color: var(--color-muted, #6F6F6F); font-weight: var(--font-weight-regular, 400); text-decoration: underline; text-underline-offset: 3px; }
    .login-note a:hover { color: var(--color-link, #0077A3); }
    .view-selector-dialog { width: min(560px, 100%); }
    .view-selector-grid { display: grid; gap: 10px; }
    .view-selector-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--color-border, #D9D9D9); border-radius: var(--radius, 4px); background: var(--color-white, #FFFFFF); color: var(--color-text, #2C2C2C); font-size: var(--font-size-small, 14px); font-weight: var(--font-weight-semibold, 600); line-height: var(--line-height-caption, 1.4); text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
    .view-selector-option:hover { background: var(--color-highlight, #E6F6FB); border-color: var(--color-link, #0077A3); color: var(--color-link, #0077A3); text-decoration: none; }
    .view-selector-option:active { background: #006B8F; border-color: #006B8F; color: var(--color-white, #FFFFFF); }
    .view-selector-option:focus-visible { outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .view-selector-option span:last-child { color: var(--color-muted, #6F6F6F); font-size: var(--font-size-caption, 12px); font-weight: var(--font-weight-regular, 400); }
    .view-selector-option:hover span:last-child, .view-selector-option:active span:last-child { color: inherit; }


   .arrow-placeholder {
      position: relative;
      display: inline-block;
      width: 16px;
      height: 10px;
      margin-left: 8px;
   }

   .arrow-placeholder::before {
      content: "";
      position: absolute;
      top: 5px;
      left: 0;
      width: 14px;
      border-top: 1px solid currentColor;
   }

   .arrow-placeholder::after {
      content: "";
      position: absolute;
      top: 2px;
      right: 0;
      width: 6px;
      height: 6px;
      border-top: 1px solid currentColor;
      border-right: 1px solid currentColor;
      transform: rotate(45deg);
   }

    body { background: #F7F7F7; }