/* CSS Document */

 :root { --color-text:#2C2C2C; --color-white:#FFFFFF; --color-page:#F7F7F7; --color-border:#D9D9D9; --color-border-soft:#EAEAEA; --color-brand:#009BD0; --color-brand-hover-light:#20B5E6; --color-brand-pressed:#005E7D; --color-link:#0077A3; --color-highlight:#E6F6FB; --color-warning:#FBBF24; --color-muted:#6F6F6F; --color-placeholder-background:#EAEAEA; --placeholder-icon-opacity:.28; --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-card-title:20px; --font-size-card-title-large:24px; --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, 0.06); --shadow-control:0 6px 18px rgba(44, 44, 44, 0.14); --shadow-dropdown:0 8px 24px rgba(44, 44, 44, 0.12); --container-width:1180px; --hero-inner-width:1132px; --text-measure:720px; --title-measure:820px; --hero-media-size:160px; --logo-width-header:220px; --logo-width-footer:180px; --nav-column-min:280px; --dropdown-min-width:72px; --control-height-lg:60px; --control-height-md:44px; --pill-height:30px; --pagination-control-size:36px; --icon-size-sm:16px; --placeholder-icon-size:48px; --level-dot-size:6px; --card-media-min-height:180px; --card-media-column:25%; --card-media-column-tablet:32%; --card-level-top:32px; --card-content-reserved-space:72px; --card-meta-reserved-space:96px; --card-title-reserved-space:220px; }
    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 0 16px; }
    h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
    .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; }
    section { margin: 0 0 64px; }
    h1 { max-width: var(--title-measure); font-size: clamp(var(--font-size-title), 5vw, var(--font-size-page-title)); }
    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-family: var(--font-ui); font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }
    .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: 32px; 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; }
    .catalogue-hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--hero-media-size); gap: 48px; align-items: end; }
    .intro { max-width: var(--text-measure); margin: 8px 0 0; font-size: var(--font-size-body); line-height: var(--line-height-default); text-wrap: pretty; }
   .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_Pesquisar_modulos.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; }
    .filter-section { margin-top: 40px; margin-bottom: 64px; }
    .filter-panel { padding: 0; border: 0; background: transparent; }
    .search-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin-bottom: 16px; }
    .input, .select { width: 100%; min-height: var(--control-height-md); padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); color: var(--color-text); font-family: var(--font-ui); font-size: var(--font-size-small); }
    .input:focus-visible, .select:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
    .search-control .input { min-height: var(--control-height-lg); border-top-right-radius: 0; border-bottom-right-radius: 0; font-size: var(--font-size-body); box-shadow: var(--shadow-subtle); }
    .search-icon { width: 18px; height: 18px; flex: 0 0 auto; }
    .search-icon path { fill: currentColor; }
    .refinement-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
    .refine-label { margin: 0 2px 0 0; color: var(--color-muted); font-family: var(--font-ui); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); line-height: var(--line-height-caption); }
    .filter-grid { display: flex; flex-wrap: wrap; gap: 6px; }
   .filter-grid .sort-select { padding-right: 28px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236F6F6F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 12px center; background-size: 10px 6px; background-repeat: no-repeat; cursor: pointer; }
    .filter-pill { display: inline-flex; min-height: var(--pill-height); align-items: center; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-white); color: var(--color-muted); font-family: var(--font-ui); font-size: var(--font-size-small); line-height: var(--line-height-caption); }
    .filter-pill strong { font-weight: var(--font-weight-semibold); }
    .filter-pill-chevron { position: relative; top: -3px; margin-left: 6px; color: var(--color-muted); font-size: 12px; line-height: 1; }
    .field label { display: block; margin-bottom: 8px; color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
    .button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: var(--control-height-lg); padding: 12px 16px; border: 1px solid var(--color-brand); border-radius: var(--radius); background: var(--color-brand); box-shadow: var(--shadow-subtle); color: var(--color-white); font-family: var(--font-ui); font-size: var(--font-size-body); font-stretch: normal; font-weight: var(--font-weight-semibold); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
    .search-control .button { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: var(--shadow-control); }
    .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; }
    .results-header { margin-bottom: 24px; }
    .results-title { font-family: var(--font-ui); font-size: var(--font-size-heading-functional); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
    .result-count { display: block; margin-top: -8px; color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); white-space: nowrap; }
    .results-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px 32px; margin-bottom: 32px; }
    .selected-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
    .selected-filters-label { flex: 0 0 auto; margin: 0 8px 0 0; color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
    .filter-chip { display: inline-flex; flex: 0 1 auto; align-items: center; max-width: 100%; min-height: 32px; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-white); color: var(--color-text); font-size: var(--font-size-small); line-height: var(--line-height-caption); white-space: normal; }
    .filter-chip strong { margin-right: 4px; font-weight: var(--font-weight-semibold); }
    .filter-chip span { margin-left: 8px; color: var(--color-muted); }
    .sort-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; color: var(--color-muted); font-size: var(--font-size-small); }
    .sort-row strong { color: var(--color-muted); font-weight: var(--font-weight-semibold); }
    .sort-control { position: relative; display: inline-flex; align-items: center; }
    .sort-control::after { content: ""; position: absolute; right: 12px; width: 6px; height: 6px; border-right: 1px solid var(--color-muted); border-bottom: 1px solid var(--color-muted); transform: rotate(45deg) translateY(-2px); pointer-events: none; }
    .sort-select { min-height: 32px; padding: 6px 28px 6px 12px; border: 1px solid var(--color-border); border-radius: 999px; appearance: none; -webkit-appearance: none; background: var(--color-white); color: var(--color-text); font-family: var(--font-ui); font-size: var(--font-size-small); line-height: var(--line-height-caption); }
    .results-divider { margin: 32px 0 32px; border: 0; border-top: 1px solid var(--color-border); }
    .learning-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
    .learning-card { display: grid; grid-template-columns: var(--card-media-column) minmax(0, 1fr); overflow: hidden; 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; }
    .learning-card:hover { border-color: var(--color-brand); }
   .learning-card-media { align-self: stretch; min-height: 0; overflow: hidden; border-right: 1px solid var(--color-border-soft); background: var(--color-placeholder-background); display: flex; align-items: center; justify-content: center; }
   .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); }
   .learning-card-media .placeholder-icon { width: 100%; max-width: 100%; height: 100%; object-fit: cover; filter: none; opacity: 1; }
    .learning-card-body { position: relative; display: flex; min-height: var(--card-media-min-height); flex-direction: column; padding: 24px var(--card-content-reserved-space) 24px 24px; }
    .learning-card h3 { max-width: min(var(--text-measure), calc(100% - var(--card-title-reserved-space))); margin-bottom: 24px; font-family: var(--font-ui); font-size: var(--font-size-card-title-large); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }
    .metadata-stack { display: grid; gap: 8px; margin-top: auto; padding-right: var(--card-meta-reserved-space); }
    .metadata-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; color: var(--color-muted); font-size: var(--font-size-small); line-height: var(--line-height-caption); }
   .metadata-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .metadata-chip { display: inline-flex; align-items: center; min-height: var(--pill-height); padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-white); color: var(--color-muted); font-size: var(--font-size-small); line-height: var(--line-height-caption); }
   .metadata-language { display: inline-flex; align-items: center; min-height: var(--pill-height); color: var(--color-muted); }
    .metadata-author { margin: 0; color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); line-height: var(--line-height-caption); }
    .card-meta-badge { position: absolute; top: var(--card-level-top); right: 24px; display: inline-flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-regular); line-height: var(--line-height-caption); }
    .level-dots { display: inline-flex; gap: 4px; align-items: center; }
    .level-dot { width: var(--level-dot-size); height: var(--level-dot-size); border: 1px solid var(--color-muted); border-radius: 999px; }
    .level-dot.filled { background: var(--color-muted); }
    .card-cta { position: absolute; right: 24px; bottom: 24px; color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); line-height: var(--line-height-caption); text-decoration: none; }
    .learning-card:hover .card-cta { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
    .pagination { margin-top: 32px; }
    .pagination-divider { margin: 0 0 32px; border: 0; border-top: 1px solid var(--color-border); }
    .pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
    .pagination-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-regular); }
    .page-size-control { position: relative; display: inline-flex; align-items: center; }
    .page-size-control::after { content: ""; position: absolute; right: 12px; width: 6px; height: 6px; border-right: 1px solid var(--color-text); border-bottom: 1px solid var(--color-text); transform: rotate(45deg) translateY(-2px); pointer-events: none; }
    .page-size-select { width: 64px; min-height: 32px; padding: 6px 28px 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); appearance: none; -webkit-appearance: none; background: var(--color-white); color: var(--color-text); font-family: var(--font-ui); font-size: var(--font-size-small); line-height: var(--line-height-caption); }
    .pagination-list { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; }
    .page-control { display: inline-flex; min-width: 32px; min-height: 32px; align-items: center; justify-content: center; padding: 6px 10px; border: 1px solid var(--color-border); border-left: 0; border-radius: 0; background: var(--color-white); color: var(--color-link); font-size: var(--font-size-small); font-weight: var(--font-weight-regular); line-height: var(--line-height-caption); text-decoration: none; }
    .page-control:first-child { border-left: 1px solid var(--color-border); border-radius: var(--radius) 0 0 var(--radius); }
    .page-control:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
    .page-control:hover { background: var(--color-highlight); color: var(--color-link); text-decoration: none; }
    .page-control.current { border-color: var(--color-muted); background: var(--color-muted); color: var(--color-white); }
    .page-control.disabled { background: var(--color-border-soft); color: var(--color-muted); pointer-events: none; }
    .page-control.ellipsis { color: var(--color-link); cursor: default; }
    .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; } .catalogue-hero-layout { grid-template-columns: 1fr; } .page-hero-media { width: var(--hero-media-size); max-width: var(--hero-media-size); } }
    @media (max-width: 900px) { .learning-card { grid-template-columns: var(--card-media-column-tablet) minmax(0, 1fr); } }
   @media (max-width: 620px) { .filter-grid, .search-control, .results-tools, .learning-card { grid-template-columns: 1fr; } .learning-card-media { width: 100%; height: var(--card-media-min-height); min-height: var(--card-media-min-height); border-right: 0; border-bottom: 1px solid var(--color-border-soft); } .learning-card-body { padding: 24px; } .learning-card h3 { max-width: 100%; } .metadata-stack { padding-right: 0; } .card-meta-badge, .card-cta { position: static; display: inline-block; margin-top: 8px; margin-right: 12px; } .search-control { gap: 8px; } .search-control .input, .search-control .button { margin-left: 0; border-radius: var(--radius); } .sort-row { margin-top: 12px; } }

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