/* CSS Document */

 :root {
      --color-text: #2C2C2C;
      --color-white: #FFFFFF;
      --color-page: #F7F7F7;
      --color-border: #D9D9D9;
      --color-border-soft: #EAEAEA;
      --color-brand: #009BD0;
      --color-link: #0077A3;
      --color-highlight: #E6F6FB;
      --color-warning: #FBBF24;
      --color-required: #B42318;
      --color-muted: #6F6F6F;
      --color-placeholder-background: #EAEAEA;
      --placeholder-icon-opacity: .38;
      --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-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; }
    .page { min-height: 100vh; }
    .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: 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: 16px; font-size: var(--font-size-small); }
    .nav-links a, .nav-links span { color: var(--color-text); text-decoration: none; }
    .nav-links a:hover { color: var(--color-link); text-decoration: underline; }
    .disabled-link { color: var(--color-text); cursor: default; }
    .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: 0 24px; }
    section { margin: 0 0 64px; }
    h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; 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: 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; }
    .eyebrow { margin-bottom: 4px; color: var(--color-link); font-size: var(--font-size-eyebrow); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .hero { width: 100vw; margin-bottom: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 24px; border-bottom: 1px solid var(--color-border-soft); background: var(--color-white); }
    .hero-inner { max-width: 1132px; min-height: 460px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .618fr); align-items: stretch; gap: 48px; }
    .hero-content { align-self: center; padding: 64px 0; }
    .hero h1 { max-width: 720px; font-size: clamp(var(--font-size-title), 4.5vw, var(--font-size-page-title)); }
    .hero-copy { max-width: 760px; margin-top: 24px; font-size: var(--font-size-body); }
    .hero-media { min-height: 100%; border: 1px solid var(--color-border); border-top: 0; border-bottom: 0; border-radius: 0; background-color: var(--color-placeholder-background); background-image: url('/img/Factoria_home.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--color-text); font-weight: 700; text-align: center; }
    .placeholder-icon { display: block; width: 48px; height: 48px; object-fit: contain; filter: grayscale(1); opacity: var(--placeholder-icon-opacity, .28); }
    .hero-media .placeholder-icon { width: 72px; height: 72px; }
    .about-section { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 0; padding: 64px 24px; background: var(--color-white); }
    .about-inner { max-width: 1132px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, .618fr) minmax(0, 1fr); align-items: stretch; gap: 48px; }
    .about-media { min-height: 360px; height: 100%; border: 1px solid var(--color-border); border-radius: var(--radius); background-color: var(--color-placeholder-background); background-image: url('/img/Factoria_Skill_Explorer_Platform.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; }
    .about-media .placeholder-icon { width: 64px; height: 64px; }
    .about-content { align-self: center; }
    .about-content h2 { max-width: 680px; font-size: var(--font-size-heading-editorial); line-height: var(--line-height-heading); }
    .about-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
    .about-highlight { min-height: 100%; padding: 24px; 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); }
    .about-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; margin-bottom: 16px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #F7F7F7; }
    .about-icon .placeholder-icon { width: 28px; height: 28px; opacity: var(--placeholder-icon-opacity, .28); }
    .about-highlight-image { display: block; width: 100%; height: 100%; object-fit: cover; }
    .about-highlight h3 { margin: 0 0 4px; font-family: var(--font-ui); font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }
    .about-highlight p { margin: 0; color: var(--color-text); font-size: var(--font-size-small); line-height: var(--line-height-default); }
    .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
    .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 16px; 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); }
    .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card { display: block; height: 100%; padding: 24px; 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; }
    .card:hover { border-color: var(--color-brand); }
    .card h3, .area-card h3, .learning-card h3, .author-card 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); }
    .learning-card h3 { font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); line-height: var(--line-height-caption); }
    .card p { color: var(--color-text); }
    .area-slider { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 16px; overflow-x: auto; padding: 4px 0 12px; scroll-snap-type: x mandatory; scrollbar-color: var(--color-border) transparent; }
    .area-card { scroll-snap-align: start; display: flex; min-height: 100%; flex-direction: column; 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; }
    .area-card:hover { border-color: var(--color-brand); }
    .area-card-media { width: 100%; height: 180px; overflow: hidden; border-bottom: 1px solid var(--color-border-soft); background: var(--color-placeholder-background); display: flex; align-items: center; justify-content: center; color: var(--color-text); font-weight: 700; }
    .area-card-image { display: block; width: 100%; height: 100%; object-fit: contain; }
    .area-card-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
    .area-card-body h3 { margin-bottom: 12px; }
    .area-card-body p { color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-regular); line-height: var(--line-height-default); }
    .area-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
    .area-card-body .area-card-count { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--color-muted); font-size: var(--font-size-small); font-weight: 600; }
    .count-icon { display: inline-block; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: var(--radius); }
    .area-card-more { display: inline-flex; align-items: center; gap: 8px; color: var(--color-muted); font-family: var(--font-ui); font-size: var(--font-size-small); font-weight: 600; text-decoration: none; white-space: nowrap; }
    .area-card:hover .area-card-more { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
    .arrow-placeholder { position: relative; display: inline-block; width: 16px; height: 10px; }
    .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); }
    .learning-slider { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 16px; overflow-x: auto; padding: 4px 0 12px; scroll-snap-type: x mandatory; scrollbar-color: var(--color-border) transparent; }
    .learning-card { display: flex; min-height: 100%; flex-direction: column; color: var(--color-text); text-decoration: none; }
    .learning-slider .learning-card { scroll-snap-align: start; }
    .learning-card:hover .learning-card-media { border-color: var(--color-brand); }
    .learning-card-media { position: relative; width: 100%; height: 180px; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-placeholder-background); box-shadow: 0 6px 18px rgba(44, 44, 44, .06); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .learning-card-image { display: block; width: 100%; height: 100%; object-fit: contain; }
    .learning-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, rgba(44, 44, 44, .62) 0%, rgba(44, 44, 44, .16) 52%, rgba(44, 44, 44, 0) 100%); }
    .rank-number { position: absolute; left: 12px; bottom: 8px; z-index: 1; color: var(--color-white); font-family: "Helvetica Neue UltraLight", "HelveticaNeue-UltraLight", "Open Sans Light", "Helvetica Neue", Arial, sans-serif; font-size: 64px; font-weight: 100; line-height: 1; opacity: 1; }
    .learning-card-body { display: flex; flex: 1; flex-direction: column; padding: 12px 0 0; }
    .learning-card-body h3 { margin-bottom: 0; }
    .author-slider { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 16px; overflow-x: auto; padding: 4px 0 12px; scroll-snap-type: x mandatory; scrollbar-color: var(--color-border) transparent; }
    .author-card { display: flex; min-height: 100%; flex-direction: column; color: var(--color-text); text-decoration: none; scroll-snap-align: start; }
    .author-card[href]:hover .author-card-media { border-color: var(--color-brand); }
    .author-card-media { position: relative; min-height: 190px; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-placeholder-background); box-shadow: 0 6px 18px rgba(44, 44, 44, .06); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .author-card-avatar { position: relative; z-index: 1; display: inline-flex; width: 118px; height: 118px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: 50%; background: rgba(255, 255, 255, .42); }
    .author-card-avatar .placeholder-icon { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; opacity: 1; }
    .author-card-body { display: flex; flex: 1; flex-direction: column; padding: 12px 0 0; }
    .author-card-body h3 { margin-bottom: 4px; font-size: var(--font-size-body); }
    .author-card-body p { margin: 0; color: var(--color-muted); font-size: var(--font-size-small); line-height: var(--line-height-caption); }
    .author-avatar { display: inline-flex; width: 40px; height: 40px; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-placeholder-background); }
    .author-avatar .placeholder-icon { width: 20px; height: 20px; opacity: var(--placeholder-icon-opacity, .28); }
    .meta { color: var(--color-text); font-size: var(--font-size-small); }
    .home-band { width: 100vw; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); margin-bottom: 0; padding: 64px 24px; }
    .home-band > .section-header, .home-band > .area-slider, .home-band > .learning-slider, .home-band > .author-slider, .home-band > .section-divider { max-width: 1132px; margin-right: auto; margin-left: auto; }
    .home-band-gray { background: var(--color-page); }
    .home-band-white { background: var(--color-white); }
    .section-description { max-width: 640px; margin: 12px 0 0; color: var(--color-muted); font-size: var(--font-size-body); line-height: var(--line-height-default); }
    .section-divider { margin: 64px 0 0; border: 0; border-top: 1px solid var(--color-border-soft); }
    .section-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
    .section-actions { display: flex; align-items: center; gap: 12px; }
    .slider-controls { display: flex; align-items: center; gap: 8px; }
    .slider-control { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #F7F7F7; color: #CBD1D6; font-family: var(--font-ui); font-size: 26px; line-height: 1; }
    .slider-control span { display: block; transform: translateY(-1px); }
    .slider-control.next { background: #F1F2F3; color: #2F3438; }
    .highlight { padding: 24px; border-left: 4px solid var(--color-brand); background: var(--color-highlight); }
    .contact-section { position: relative; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 64px 24px; overflow: hidden; background: var(--color-page); }
    .contact-inner { position: relative; z-index: 1; max-width: 1132px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(360px, 500px); gap: 48px; align-items: center; }
    .contact-copy { max-width: 520px; height: 100%; color: var(--color-text); display: flex; flex-direction: column; }
    .contact-copy h2 { color: var(--color-text); font-size: clamp(var(--font-size-title), 4vw, var(--font-size-page-title)); line-height: var(--line-height-tight); }
    .contact-copy p { color: var(--color-text); font-size: var(--font-size-body); line-height: var(--line-height-default); }
    .contact-copy a { color: var(--color-link); }
    .contact-copy-media { flex: 1; min-height: 220px; margin-top: 32px; border: 1px solid var(--color-border); border-radius: var(--radius); background-color: var(--color-placeholder-background); background-image: url('/img/Factoria_Formulario.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; }
    .contact-form { 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 h3 { 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; font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
    .required-mark { color: var(--color-required); }
    .input, .contact-form input, .contact-form select, .contact-form textarea { 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; }
    .contact-form input[type="text"], .contact-form input[type="email"] { cursor: text; }
    .contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { border-color: var(--color-brand); outline: 2px solid var(--color-brand); outline-offset: 2px; }
    .contact-form input::placeholder { color: var(--color-muted); opacity: .72; }
    .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; }
    .contact-form select:invalid { color: var(--color-muted); opacity: .72; }
    .contact-form select option { color: var(--color-text); opacity: 1; }
    .textarea { min-height: 112px; }
    .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; }
    .contact-form .button { margin-top: 12px; font-family: var(--font-ui); font-size: var(--font-size-body); }
    .box { width: 18px; height: 18px; border: 1px solid var(--color-border); border-radius: var(--radius); flex: 0 0 auto; margin-top: 3px; }
    .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; }
    .about-disclaimer { margin: 24px 0 0; color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-regular); line-height: var(--line-height-caption); }
    .about-disclaimer a { color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }
    .about-disclaimer a:hover { color: var(--color-link); }
    .text-nowrap { white-space: nowrap; }
    @media (max-width: 820px) { .nav { align-items: flex-start; flex-direction: column; } .grid, .grid.two, .about-inner, .about-highlights, .contact-inner, .form-grid { grid-template-columns: 1fr; } main { padding-top: 0; } .hero { padding: 0 24px 48px; } .hero-inner { grid-template-columns: 1fr; min-height: 0; gap: 32px; } .hero-content { padding: 48px 0 0; } .hero-media { min-height: 220px; border: 1px solid var(--color-border); border-radius: var(--radius); } .about-section { padding: 48px 24px; } .about-inner { gap: 32px; } .about-media { min-height: 220px; } .contact-section { padding: 48px 24px; } .contact-inner { gap: 32px; } }
    @media (max-width: 560px) { .learning-slider, .author-slider { grid-auto-columns: minmax(220px, 76vw); } }

    .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: 16px; 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: 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: 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; }

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