/* CSS Document */

 :root { --color-text:#2C2C2C; --color-white:#FFFFFF; --color-page:#F7F7F7; --color-border:#D9D9D9; --color-border-soft:#EAEAEA; --color-placeholder-background:#EAEAEA; --placeholder-icon-opacity:.28; --color-brand:#009BD0; --color-brand-hover-light:#20B5E6; --color-brand-pressed:#005E7D; --color-link:#0077A3; --color-highlight:#E6F6FB; --color-required:#B42318; --color-muted:#6F6F6F; --font-ui:"Open Sans", Arial, sans-serif; --font-display:"Playfair Display", Georgia, serif; --radius:4px; --font-weight-regular:400; --font-weight-semibold:600; --font-weight-bold:700; --font-size-eyebrow:12px; --font-size-small:14px; --font-size-body:16px; --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; --shadow-subtle:0 6px 18px rgba(44, 44, 44, .06); --shadow-dropdown:0 8px 24px rgba(44, 44, 44, .12); --container-width:1180px; --hero-inner-width:1132px; --logo-width-header:220px; --logo-width-footer:180px; --nav-column-min:280px; --dropdown-min-width:72px; --hero-media-size:160px; --placeholder-icon-size:48px; }
    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; }
    p { margin: 0; } 
    h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
    h1 { max-width: 820px; font-size: clamp(var(--font-size-title), 5vw, var(--font-size-page-title)); }
    h2 { margin-bottom: 24px; font-family: var(--font-ui); font-size: var(--font-size-heading-functional); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }
    .topbar { position: sticky; top: 49px; z-index: 50; background: var(--color-white); border-bottom: 1px solid var(--color-border-soft); box-shadow: 0 2px 12px rgba(44, 44, 44, .08); }
    .nav { max-width: var(--container-width); margin: 0 auto; padding: 16px 24px; display: grid; grid-template-columns: minmax(var(--nav-column-min), 1fr) auto minmax(var(--logo-width-header), 1fr); align-items: center; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--color-text); font-weight: var(--font-weight-bold); text-decoration: none; }
    .brand-logo { display: block; width: var(--logo-width-header); height: auto; border: 0; }
    .nav-center { display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; }
    .nav-center a { color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); text-decoration: none; white-space: nowrap; }
    .nav-actions a, .language-menu summary { color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-regular); 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: 16px; }
    .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: var(--dropdown-min-width); padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); box-shadow: var(--shadow-dropdown); z-index: 60; }
    .language-options span { display: block; padding: 6px 8px; color: var(--color-text); font-size: var(--font-size-small); }
    .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: var(--container-width); 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: var(--container-width); margin: 0 auto; padding: 0 24px 64px; }
    .breadcrumbs { color: var(--color-text); font-size: var(--font-size-small); }
    .breadcrumbs a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
    .eyebrow { margin-bottom: 4px; color: var(--color-link); font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-bold); letter-spacing: .04em; text-transform: uppercase; }
    .page-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 48px; padding: 48px 24px; border-bottom: 1px solid var(--color-border-soft); background: var(--color-white); }
    .page-hero-inner { max-width: var(--hero-inner-width); margin: 0 auto; }
    .page-hero .breadcrumbs { margin-bottom: 48px; }
    .page-hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--hero-media-size); gap: 48px; align-items: end; }
   .page-hero-media { width: var(--hero-media-size); height: var(--hero-media-size); border: 1px solid var(--color-border); border-radius: var(--radius); background-color: var(--color-placeholder-background); background-image: url('/img/Factoria_Perguntas_frequentes.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; }
    .placeholder-icon { display: block; width: var(--placeholder-icon-size); height: var(--placeholder-icon-size); object-fit: contain; filter: grayscale(1); opacity: var(--placeholder-icon-opacity, .28); }
    .intro { max-width: 760px; margin-top: 16px; color: var(--color-text); font-size: var(--font-size-body); line-height: var(--line-height-default); text-wrap: pretty; }
    .faq-section { max-width: 900px; margin: 0 auto; }
    .faq-list { display: grid; gap: 12px; }
    .faq-item { border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-white); box-shadow: var(--shadow-subtle); }
    .faq-item summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 56px 20px 24px; color: var(--color-text); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); list-style: none; cursor: pointer; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: ""; position: absolute; top: 50%; right: 24px; width: 9px; height: 9px; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: translateY(-65%) rotate(45deg); transition: transform 140ms ease; }
    .faq-item[open] summary::after { transform: translateY(-35%) rotate(225deg); }
    .faq-item p { margin: 0; padding: 0 24px 20px; color: var(--color-muted); font-size: var(--font-size-body); line-height: var(--line-height-default); }
    .faq-item summary:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
    .faq-form-section { max-width: 900px; margin: 48px auto 0; }
    .contact-form { width: 100%; padding: 32px; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-white); box-shadow: 0 24px 60px rgba(44, 44, 44, .12); }
    .contact-form h2 { margin-bottom: 24px; font-family: var(--font-ui); font-size: var(--font-size-heading-functional); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 8px; }
    .field { margin-bottom: 8px; }
    .field.full { grid-column: 1 / -1; }
    .field label { display: block; margin-bottom: 8px; color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
    .required-mark { color: var(--color-required); }
    .input, .form-shell input, .form-shell select, .contact-form input, .contact-form select { width: 100%; min-height: 44px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); color: var(--color-text); font: inherit; cursor: pointer; }
    .form-shell input[type="text"], .form-shell input[type="email"], .contact-form input[type="text"], .contact-form input[type="email"] { cursor: text; }
    .form-shell input:focus-visible, .form-shell select:focus-visible, .contact-form input:focus-visible, .contact-form select:focus-visible { border-color: var(--color-brand); outline: 2px solid var(--color-brand); outline-offset: 2px; }
    .form-shell input::placeholder, .contact-form input::placeholder { color: var(--color-muted); opacity: .72; }
    .form-shell select, .contact-form select { appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 22px) 24px, calc(100% - 17px) 24px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
    .form-shell select:invalid, .contact-form select:invalid { color: var(--color-muted); opacity: .72; }
    .form-shell select option, .contact-form select option { color: var(--color-text); opacity: 1; }
    .textarea { min-height: 128px; }
    .check { display: flex; gap: 12px; align-items: center; margin: 12px 0; color: var(--color-text); font-size: var(--font-size-small); cursor: pointer; }
    .check input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--color-brand); cursor: pointer; }
    .box { width: 18px; height: 18px; border: 1px solid var(--color-border); border-radius: var(--radius); flex: 0 0 auto; margin-top: 3px; }
    .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--color-brand); border-radius: var(--radius); background: var(--color-brand); color: var(--color-white); font-weight: var(--font-weight-bold); text-decoration: none; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
    .button:hover { background: var(--color-brand-hover-light); border-color: var(--color-brand-hover-light); color: var(--color-white); text-decoration: none; }
    .button:active { background: var(--color-brand-pressed); border-color: var(--color-brand-pressed); color: var(--color-white); }
    .button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
    .form-shell .button, .contact-form .button { margin-top: 12px; font-family: var(--font-ui); font-size: var(--font-size-body); }
    .footer { border-top: 0; background: var(--color-text); color: var(--color-white); }
    .footer-inner { max-width: var(--container-width); 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: var(--logo-width-footer); 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: 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; } .page-hero-layout { grid-template-columns: 1fr; } .page-hero-media { width: var(--hero-media-size); max-width: var(--hero-media-size); } }
    @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .field.full { grid-column: auto; } .contact-form { padding: 24px; } }

    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; }