:root {
        --bg-1: #f4efe8;
        --bg-2: #f7f2ea;
        --ink: #1f1a17;
        --muted: #5b524c;
        --card: #ffffff;
        --line: #e2d6ca;
        --accent: #c97c3b;
        --accent-dark: #8c4b18;
        --accent-soft: #fff1e6;
        --accent-2: #2c7a7b;
        --accent-2-soft: #e6f4f1;
        --risk-bajo: #2ecc71;
        --risk-medio-bajo: #9bd34d;
        --risk-medio: #f1c40f;
        --risk-medio-alto: #f39c12;
        --risk-alto: #e74c3c;
        --shadow: 0 20px 45px rgba(31, 26, 23, 0.12);
        --shadow-soft: 0 10px 25px rgba(31, 26, 23, 0.1);
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: "Roboto", "Trebuchet MS", sans-serif;
        color: var(--ink);
        background:
          radial-gradient(circle at 15% 20%, var(--accent-soft), transparent 45%),
          radial-gradient(circle at 85% 80%, var(--accent-2-soft), transparent 40%),
          linear-gradient(120deg, var(--bg-1), var(--bg-2));
        min-height: 100vh;
      }

      .page {
        max-width: 1200px;
        margin: 0 auto;
        padding: 32px 20px 48px;
      }

      header {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 28px;
      }

      .top-bar {
        border-bottom: 1px solid var(--line);
        background: var(--accent-soft);
        position: static;
        top: auto;
        z-index: 1000;
      }

      .top-bar__inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 12px 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        text-decoration: none;
        color: inherit;
        line-height: 0;
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
      }

      .brand:hover {
        color: inherit;
      }

      .brand-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        background: transparent url("../logogrc.png") center / 220% no-repeat;
        color: transparent;
        font-size: 0;
        overflow: hidden;
      }

      .top-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .calc-dropdown {
        position: relative;
        width: 220px;
      }

      .resources-dropdown {
        width: 220px;
      }

      .calc-dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        height: 12px;
      }

      .calc-toggle {
        width: 100%;
        justify-content: center;
        position: relative;
        padding-right: 28px;
      }

      .calc-toggle::after {
        content: "▾";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        line-height: 1;
      }

      .calc-menu {
        position: absolute;
        top: calc(100% + 2px);
        right: 0;
        min-width: 100%;
        width: 100%;
        padding: 8px;
        border: 1px solid var(--accent);
        border-radius: 14px;
        background: var(--accent-soft);
        box-shadow: var(--shadow);
        display: none;
        flex-direction: column;
        gap: 6px;
        z-index: 1200;
      }

      .calc-dropdown:hover .calc-menu,
      .calc-dropdown:focus-within .calc-menu {
        display: flex;
      }

      .calc-menu .top-bar__link {
        width: 100%;
        justify-content: center;
        text-align: center;
      }

      .top-action {
        min-width: 220px;
        justify-content: center;
      }

      .settings-dropdown {
        position: relative;
        width: 220px;
      }

      .settings-dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        height: 12px;
      }

      .settings-toggle {
        width: 100%;
        justify-content: center;
        position: relative;
        padding-right: 28px;
      }

      .settings-toggle::after {
        content: "▾";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        line-height: 1;
      }

      .settings-menu {
        position: absolute;
        top: calc(100% + 2px);
        right: 0;
        width: 100%;
        min-width: 100%;
        padding: 10px;
        border: 1px solid var(--accent);
        border-radius: 14px;
        background: var(--accent-soft);
        box-shadow: var(--shadow);
        display: none;
        flex-direction: column;
        gap: 8px;
        z-index: 1200;
      }

      .settings-dropdown:hover .settings-menu,
      .settings-dropdown:focus-within .settings-menu {
        display: flex;
      }

      .settings-menu__label {
        font-size: 12px;
        font-weight: 700;
        color: var(--muted);
        text-align: left;
      }

      .settings-menu__select {
        width: 100%;
        border: 1px solid var(--accent);
        border-radius: 10px;
        background: var(--card);
        color: var(--ink);
        font: inherit;
        font-size: 12px;
        padding: 8px 10px;
      }

      .settings-card {
        max-width: 900px;
        margin: 0 auto;
      }

      .settings-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
      }

      .lang-select {
        width: 100%;
        max-width: 280px;
        border: 1px solid var(--accent);
        border-radius: 12px;
        background: var(--card);
        color: var(--ink);
        padding: 10px 12px;
        font: inherit;
      }

      .theme-select-hidden,
      .lang-select-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
      }

      .settings-menu__theme-toggle,
      .settings-menu__lang-toggle {
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .settings-card__theme-toggle,
      .settings-card__lang-toggle {
        width: 100%;
        max-width: 280px;
      }

      .lang-switch {
        --lang-thumb-w: 50px;
        --lang-thumb-h: 42px;
        --lang-thumb-shift: 56px;
        position: relative;
        width: 118px;
        height: 56px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #d8daec;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        transition: background-color 0.25s ease, border-color 0.25s ease;
      }

      .lang-switch::after {
        content: attr(data-active-label);
        position: absolute;
        top: 6px;
        left: 6px;
        width: var(--lang-thumb-w);
        height: var(--lang-thumb-h);
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.8px;
        color: #10233f;
        z-index: 2;
        pointer-events: none;
        transition: transform 0.25s ease, color 0.25s ease;
      }

      .lang-switch:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      .lang-switch__label {
        position: relative;
        z-index: 1;
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.8px;
        color: #5c6d88;
        transition: color 0.2s ease, opacity 0.2s ease;
      }

      .lang-switch__thumb {
        position: absolute;
        top: 6px;
        left: 6px;
        width: var(--lang-thumb-w);
        height: var(--lang-thumb-h);
        border-radius: 999px;
        background: #f4f6ff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 6px 14px rgba(31, 26, 23, 0.2);
        transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
      }

      .lang-switch.is-es .lang-switch__label--es,
      .lang-switch.is-en .lang-switch__label--en {
        opacity: 0;
      }

      .lang-switch.is-es .lang-switch__label--en,
      .lang-switch.is-en .lang-switch__label--es {
        opacity: 0.7;
      }

      .lang-switch.is-en .lang-switch__thumb {
        transform: translateX(var(--lang-thumb-shift));
      }

      .lang-switch.is-en::after {
        transform: translateX(var(--lang-thumb-shift));
      }

      .theme-switch {
        --theme-thumb-w: 42px;
        --theme-thumb-h: 42px;
        --theme-thumb-shift: 64px;
        position: relative;
        width: 118px;
        height: 56px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #d8daec;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        transition: background-color 0.25s ease, border-color 0.25s ease;
      }

      .theme-switch::after {
        content: attr(data-active-icon);
        position: absolute;
        top: 6px;
        left: 6px;
        width: var(--theme-thumb-w);
        height: var(--theme-thumb-h);
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        color: #10233f;
        z-index: 2;
        pointer-events: none;
        transition: transform 0.25s ease, color 0.25s ease;
      }

      .theme-switch:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      .theme-switch__icon {
        position: relative;
        z-index: 1;
        flex: 1;
        text-align: center;
        font-size: 18px;
        line-height: 1;
        opacity: 0.45;
        transition: opacity 0.2s ease;
      }

      .theme-switch__thumb {
        position: absolute;
        top: 6px;
        left: 6px;
        width: var(--theme-thumb-w);
        height: var(--theme-thumb-h);
        border-radius: 50%;
        background: #f4f6ff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 6px 14px rgba(31, 26, 23, 0.2);
        z-index: 0;
        transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
      }

      .theme-switch.is-light .theme-switch__icon--light {
        opacity: 0;
      }

      .theme-switch.is-dark {
        background: #1f2f47;
        border-color: #4b6280;
      }

      .theme-switch.is-dark .theme-switch__thumb {
        transform: translateX(var(--theme-thumb-shift));
        background: #0f172a;
        border-color: #334155;
      }

      .theme-switch.is-dark .theme-switch__icon--dark {
        opacity: 0;
      }

      .theme-switch.is-dark .theme-switch__icon--light {
        opacity: 0.55;
      }

      .theme-switch.is-light .theme-switch__icon--dark {
        opacity: 0.55;
      }

      .theme-switch.is-dark::after {
        color: #f8fafc;
        transform: translateX(var(--theme-thumb-shift));
      }

      .settings-menu__theme-toggle .theme-switch,
      .settings-menu__lang-toggle .lang-switch {
        --lang-thumb-w: 36px;
        --lang-thumb-h: 36px;
        --lang-thumb-shift: 60px;
        width: 108px;
        height: 50px;
      }

      .settings-menu__theme-toggle .theme-switch {
        --theme-thumb-w: 36px;
        --theme-thumb-h: 36px;
        --theme-thumb-shift: 60px;
        padding: 0 10px;
      }

      .settings-menu__lang-toggle .lang-switch {
        padding: 0 6px;
      }

      .settings-menu__lang-toggle .lang-switch__label {
        font-size: 11px;
      }

      .settings-menu__lang-toggle .lang-switch::after {
        font-size: 11px;
      }

      .settings-menu__theme-toggle .theme-switch__icon {
        font-size: 16px;
      }

      .settings-menu__theme-toggle .theme-switch::after {
        font-size: 16px;
      }

      .settings-menu__theme-toggle .theme-switch__thumb,
      .settings-menu__lang-toggle .lang-switch__thumb {
        width: 36px;
        height: 36px;
      }

      .settings-menu__lang-toggle .lang-switch.is-en .lang-switch__thumb {
        transform: translateX(var(--lang-thumb-shift));
      }

      .settings-menu__lang-toggle .lang-switch.is-en::after {
        transform: translateX(var(--lang-thumb-shift));
      }

      .settings-menu__theme-toggle .theme-switch.is-dark .theme-switch__thumb {
        transform: translateX(var(--theme-thumb-shift));
      }

      .settings-menu__theme-toggle .theme-switch.is-dark::after {
        transform: translateX(var(--theme-thumb-shift));
      }

      .palette-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
        margin-top: 10px;
      }

      .palette-btn {
        border: 1px solid var(--accent);
        background: var(--card);
        color: var(--ink);
        border-radius: 14px;
        padding: 10px 12px;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-start;
      }

      .palette-btn:hover {
        border-color: var(--accent-dark);
      }

      .palette-btn.active {
        background: var(--accent-soft);
        border-color: var(--accent-dark);
      }

      .palette-swatch {
        width: 18px;
        height: 18px;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        flex: 0 0 auto;
      }

      .palette-swatch.default { background: #c97c3b; }
      .palette-swatch.blue { background: #2b6cb0; }
      .palette-swatch.purple { background: #7b4bb3; }
      .palette-swatch.red { background: #c0392b; }
      .palette-swatch.gray { background: #6b7280; }
      .palette-swatch.green { background: #2f855a; }

      .top-bar button,
      .top-bar .top-bar__link {
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: var(--card);
        color: var(--ink);
        font-weight: 600;
        padding: 8px 14px;
        font-size: 12px;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
      }

      .top-bar button:hover,
      .top-bar .top-bar__link:hover {
        border-color: var(--accent);
        color: var(--accent-dark);
      }

      .top-bar .top-bar__link.active {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent-dark);
      }

      header h1 {
        font-family: "Roboto", "Trebuchet MS", sans-serif;
        font-size: clamp(22px, 3.2vw, 38px);
        margin: 0;
        letter-spacing: 0.4px;
      }

      header p {
        margin: 0;
        max-width: 680px;
        color: var(--muted);
        font-size: 15px;
      }

      .layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .layout > aside {
        order: -1;
      }

      .card {
        background: var(--card);
        border-radius: 20px;
        padding: 24px;
        border: 1px solid var(--accent);
        box-shadow: var(--shadow);
        position: relative;
        overflow: hidden;
      }

      .card::after {
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(201, 124, 59, 0.12), transparent 70%);
        top: -70px;
        right: -60px;
        pointer-events: none;
      }

      .section {
        margin-bottom: 20px;
      }

      .section:last-child {
        margin-bottom: 0;
      }

      #cdn-form .section {
        margin-bottom: 20px;
      }

      .section h2 {
        font-size: 16px;
        margin: 0 0 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--accent-dark);
      }

      .resources-repo-layout .resources-repo-title {
        font-size: 16px;
        margin: 0 0 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--accent-dark);
      }

      .learning-block {
        margin-bottom: 18px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: linear-gradient(180deg, #fffbf7 0%, #fff6ed 100%);
      }

      .learning-block:last-child {
        margin-bottom: 0;
      }

      .learning-grid {
        display: grid;
        gap: 12px;
        align-items: start;
      }

      .learning-grid-2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .learning-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .learning-card {
        border: 1px solid var(--line);
        background: var(--card);
        border-radius: 14px;
        padding: 12px 14px;
        box-shadow: var(--shadow-soft);
      }

      @media (max-width: 1100px) {
        .learning-grid-3 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 760px) {
        .learning-grid-2,
        .learning-grid-3 {
          grid-template-columns: 1fr;
        }
      }

      .learning-card h3 {
        margin: 0 0 8px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--accent-dark);
      }

      .learning-card h3 a {
        color: inherit;
        text-decoration: none;
      }

      .learning-card h3 a:hover,
      .learning-card h3 a:focus-visible {
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      .learning-card p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
      }

      .resources-start-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        text-decoration: none;
        min-width: 110px;
        padding: 8px 14px;
      }

      .quiz-page header p {
        max-width: 760px;
      }

      .quiz-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .quiz-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .quiz-start {
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: linear-gradient(180deg, #fffbf7 0%, #fff6ed 100%);
      }

      .quiz-start h2 {
        margin: 0 0 8px;
        font-size: 18px;
        color: var(--accent-dark);
      }

      .quiz-start p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
      }

      .quiz-progress {
        margin-bottom: 12px;
      }

      .quiz-progress__label {
        font-size: 13px;
        color: var(--muted);
        margin-bottom: 6px;
      }

      .quiz-progress__bar {
        width: 100%;
        height: 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #f8efe5;
        overflow: hidden;
      }

      .quiz-progress__bar span {
        display: block;
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, var(--accent), var(--accent-dark));
        transition: width 0.25s ease;
      }

      .quiz-question {
        border-width: 2px;
      }

      .quiz-question h3 {
        margin-bottom: 6px;
      }

      .quiz-question-topic {
        margin: 0 0 6px;
        font-size: 12px;
        font-weight: 700;
        color: var(--accent-dark);
        text-transform: uppercase;
        letter-spacing: 0.4px;
      }

      .quiz-question-text {
        font-size: 14px;
        font-weight: 500;
        color: var(--ink);
      }

      .quiz-options {
        margin-top: 12px;
        display: grid;
        gap: 8px;
      }

      .quiz-option {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fffdf9;
        cursor: pointer;
        transition: border-color 0.2s ease, background 0.2s ease;
      }

      .quiz-option:hover {
        border-color: var(--accent);
      }

      .quiz-option input {
        width: 16px;
        min-width: 16px;
        height: 16px;
        margin-top: 2px;
        padding: 0;
        border-radius: 50%;
      }

      .quiz-option span {
        color: var(--muted);
        line-height: 1.45;
      }

      .quiz-option strong {
        color: var(--ink);
      }

      .quiz-actions {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .quiz-actions #cveMiniEvalBtn {
        margin-bottom: 14px;
      }

      #cveMiniResult {
        margin-top: 0;
      }

      .quiz-secondary-button {
        background: #ffffff;
        color: var(--accent-dark);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .quiz-secondary-button:hover {
        background: var(--accent-soft);
      }

      .quiz-result {
        margin-top: 16px;
        padding: 14px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: linear-gradient(180deg, #f8fcff 0%, #f2f9ff 100%);
      }

      .quiz-result h2 {
        margin: 0 0 8px;
        font-size: 16px;
        color: var(--accent-dark);
      }

      .quiz-result p {
        margin: 0 0 6px;
        font-size: 14px;
      }

      .quiz-topic-summary-list {
        margin: 0 0 14px;
        padding-left: 18px;
        display: grid;
        gap: 6px;
      }

      .quiz-topic-summary-list li {
        font-size: 13px;
        color: var(--muted);
      }

      .quiz-radar-wrap {
        margin: 8px 0 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #ffffff;
        padding: 10px;
      }

      .quiz-radar-svg {
        width: 100%;
        max-width: 620px;
        display: block;
        margin: 0 auto;
      }

      .quiz-radar-grid polygon,
      .quiz-radar-grid line {
        fill: none;
        stroke: #d8e3ef;
        stroke-width: 1;
      }

      .quiz-radar-data {
        fill: rgba(44, 122, 123, 0.28);
        stroke: #2c7a7b;
        stroke-width: 2;
      }

      .quiz-radar-labels text {
        fill: var(--muted);
        font-size: 11px;
        font-weight: 600;
      }

      .quiz-recommendations-list {
        margin: 0 0 14px;
        padding-left: 18px;
        display: grid;
        gap: 8px;
      }

      .quiz-recommendations-list li {
        color: var(--muted);
      }

      .quiz-recommendations-list p {
        margin: 4px 0 0;
      }

      #assetQuizForm label,
      #incidentQuizForm label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
        cursor: pointer;
        color: var(--muted);
      }

      #assetQuizForm label:last-child,
      #incidentQuizForm label:last-child {
        margin-bottom: 0;
      }

      #assetQuizForm input[type="radio"],
      #incidentQuizForm input[type="radio"] {
        width: 16px;
        min-width: 16px;
        height: 16px;
        padding: 0;
        margin-top: 2px;
        border-radius: 50%;
        border: 1px solid var(--accent);
        background: #fffdf9;
      }

      .resources-repo-layout .learning-card h3 {
        font-size: 15px;
        letter-spacing: 0.4px;
      }

      .resources-repo-layout .learning-card p {
        font-size: 15px;
        line-height: 1.6;
      }

      .resources-repo-layout .resources-start-button {
        font-size: 15px;
        padding: 10px 18px;
      }

      .cve-learning-page .cve-progress-label {
        font-size: 14px;
      }

      .cve-learning-page .cve-module-head h2 {
        font-size: 24px;
      }

      .cve-learning-page .cve-module-head p {
        font-size: 16px;
      }

      .cve-learning-page .learning-card h3 {
        font-size: 16px;
        text-transform: none;
        letter-spacing: 0.2px;
      }

      .cve-learning-page .learning-card p,
      .cve-learning-page .cve-steps-list li,
      .cve-learning-page #assetQuizForm label,
      .cve-learning-page #incidentQuizForm label {
        font-size: 15px;
        line-height: 1.6;
      }

      .incident-learning-page .cve-progress-label {
        font-size: 14px;
      }

      .incident-learning-page .cve-module-head h2 {
        font-size: 24px;
      }

      .incident-learning-page .cve-module-head p {
        font-size: 16px;
      }

      .incident-learning-page .learning-card h3 {
        font-size: 16px;
        text-transform: none;
        letter-spacing: 0.2px;
      }

      .incident-learning-page .learning-card p,
      .incident-learning-page .cve-steps-list li,
      .incident-learning-page #incidentQuizForm label {
        font-size: 15px;
        line-height: 1.6;
      }

      .quiz-feedback {
        margin-top: 12px;
        padding: 12px;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: #f8fbff;
      }

      .quiz-feedback h3 {
        margin: 0 0 8px;
        font-size: 15px;
      }

      .quiz-feedback p {
        margin: 0 0 6px;
        font-size: 14px;
        color: var(--muted);
      }

      .quiz-feedback--correct {
        border-color: #6bbf8f;
        background: #edf9f1;
      }

      .quiz-feedback--incorrect {
        border-color: #d99090;
        background: #fff1f1;
      }

      .quiz-review-list {
        margin: 0;
        padding-left: 18px;
        display: grid;
        gap: 10px;
      }

      .quiz-review-list li {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px;
        background: #ffffff;
      }

      .quiz-review-list p {
        margin: 0 0 6px;
      }

      .quiz-empty {
        margin-top: 12px;
        padding: 12px;
        border: 1px dashed var(--line);
        border-radius: 12px;
        color: var(--muted);
      }

      .quiz-question.quiz-correct {
        border-color: #6bbf8f;
      }

      .quiz-question.quiz-incorrect {
        border-color: #d99090;
      }

      .quiz-option.is-correct {
        border-color: #6bbf8f;
        background: #edf9f1;
      }

      .quiz-option.is-incorrect {
        border-color: #d99090;
        background: #fff1f1;
      }

      .quiz-option.is-selected {
        border-color: var(--accent);
      }

      .cve-learning-page header p {
        max-width: 820px;
      }

      .cve-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .cve-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .cve-toolbar-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .cve-progress-wrap {
        margin-top: 2px;
      }

      .cve-progress-label {
        font-size: 13px;
        color: var(--muted);
        margin-bottom: 6px;
      }

      .cve-progress-bar {
        width: 100%;
        height: 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #f8efe5;
        overflow: hidden;
      }

      .cve-progress-bar span {
        display: block;
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, var(--accent), var(--accent-dark));
        transition: width 0.25s ease;
      }

      .cve-module-head h2 {
        margin: 0 0 6px;
        font-size: 20px;
        color: var(--accent-dark);
      }

      .cve-module-head p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
      }

      .cve-module-content {
        display: grid;
        gap: 12px;
      }

      .cve-id-grid {
        align-items: stretch;
      }

      .cve-id-card h3 {
        font-size: 14px;
      }

      .cve-id-card p {
        font-size: 13px;
      }

      .cve-inline-panel {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: linear-gradient(180deg, #fffbf7 0%, #fff6ed 100%);
        padding: 14px;
      }

      .cve-inline-panel h3 {
        margin: 0 0 8px;
        font-size: 15px;
        color: var(--accent-dark);
      }

      .cve-inline-panel p {
        margin: 0 0 10px;
      }

      .cve-steps-list {
        margin: 0;
        padding-left: 18px;
        display: grid;
        gap: 6px;
      }

      .cve-steps-list li {
        color: var(--muted);
        line-height: 1.45;
      }

      .cve-cvss-scale li {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 7px 9px;
        background: #ffffff;
      }

      .cve-inline-form {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }

      .cve-inline-form input[type="text"] {
        flex: 1;
        min-width: 220px;
      }

      .cve-inline-form--stack {
        display: grid;
        gap: 10px;
      }

      .cve-inline-form--stack label {
        margin-bottom: 0;
      }

      .cve-result-box {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #ffffff;
        padding: 10px 12px;
        color: var(--muted);
        margin: 0;
      }

      .cve-random-example {
        margin-top: 10px;
      }

      .cve-inline-panel #cveExampleBtn {
        margin-bottom: 14px;
      }

      .cve-inline-panel #cveExampleText {
        margin-top: 0;
      }

      .cve-result-box--ok {
        border-color: #6bbf8f;
        background: #edf9f1;
        color: #21583a;
      }

      .cve-result-box--warn {
        border-color: #d99090;
        background: #fff1f1;
        color: #7c2d2d;
      }

      .cve-id-breakdown {
        margin-top: 10px;
        display: grid;
        gap: 6px;
      }

      .cve-break-row {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 8px;
        align-items: center;
      }

      .cve-break-k {
        font-size: 12px;
        font-weight: 700;
        color: var(--accent-dark);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .cve-break-v {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 7px 9px;
        background: #ffffff;
        color: var(--ink);
        font-family: Consolas, "Courier New", monospace;
        font-size: 13px;
      }

      .cve-inline-note {
        margin-top: 8px !important;
        font-size: 12px;
        color: var(--muted);
      }

      .cve-check-grid--long {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      }

      .cve-check-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 8px;
      }

      .cve-mini-quiz {
        display: grid;
        gap: 10px;
      }

      .cve-mini-question h3 {
        text-transform: none;
        font-size: 14px;
      }

      .cve-mini-options {
        display: grid;
        gap: 8px;
      }

      .cve-mini-why {
        margin-top: 8px !important;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 8px 10px;
        background: #ffffff;
      }

      .cve-mini-why--ok {
        border-color: #6bbf8f;
        background: #edf9f1;
        color: #21583a !important;
      }

      .cve-mini-why--warn {
        border-color: #d99090;
        background: #fff1f1;
        color: #7c2d2d !important;
      }

      .cve-nav {
        display: flex;
        justify-content: space-between;
        gap: 10px;
      }

      .phishing-learning-page .card {
        padding: 28px 26px;
      }

      .phishing-learning-page .section {
        margin-bottom: 26px;
      }

      .phishing-learning-page .cve-toolbar {
        gap: 16px;
      }

      .phishing-learning-page .cve-toolbar-actions {
        gap: 12px;
      }

      .phishing-learning-page .cve-progress-wrap {
        margin-top: 8px;
      }

      .phishing-learning-page #phLearningState {
        display: grid;
        gap: 18px;
      }

      .phishing-learning-page #phLearningState > .learning-card {
        padding: 16px 18px;
        border-radius: 16px;
      }

      .phishing-learning-page #phScreenDescription {
        margin: 0 0 12px;
        line-height: 1.6;
      }

      .phishing-learning-page #phScreenPoints {
        margin-top: 0;
        gap: 10px;
      }

      .phishing-learning-page #phScreenCards {
        margin-top: 2px;
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .phishing-learning-page #phScreenCards .learning-card {
        min-height: 100%;
        padding: 14px 16px;
      }

      .phishing-learning-page .cve-nav {
        margin-top: 4px;
        gap: 14px;
      }

      .phishing-learning-page #phQuizState {
        display: grid;
        gap: 16px;
      }

      .phishing-learning-page #phQuizQuestionCard {
        padding: 16px 18px;
        border-radius: 16px;
      }

      .phishing-learning-page #phQuizOptions {
        gap: 10px;
      }

      .phishing-learning-page #phQuizFeedback {
        margin-top: 0;
      }

      .phishing-learning-page #phResultState {
        margin-top: 0;
        padding: 18px;
      }

      .phishing-learning-page #phResultState .quiz-actions {
        margin-top: 18px;
        gap: 12px;
      }

      .cve-finish-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        z-index: 1600;
      }

      .cve-finish-dialog {
        width: min(560px, 100%);
        border: 1px solid var(--accent);
        border-radius: 16px;
        background: var(--card);
        box-shadow: var(--shadow);
        padding: 18px;
      }

      .cve-finish-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }

      .cve-finish-dialog h2 {
        margin: 0 0 8px;
        color: var(--accent-dark);
        font-size: 20px;
      }

      .cve-finish-dialog p {
        margin: 0;
        color: var(--muted);
      }

      .cve-finish-actions {
        margin-top: 14px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .cve-finish-actions .action-button,
      .cve-nav .action-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .cve-finish-close {
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #ffffff;
        color: var(--muted);
        font-weight: 700;
        line-height: 1;
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        cursor: pointer;
      }

      .cve-finish-close:hover {
        border-color: var(--accent);
        color: var(--accent-dark);
      }

      .cve-finish-close:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      .cve-formula {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #ffffff;
        padding: 10px 12px;
        font-family: Consolas, "Courier New", monospace;
        font-size: 13px;
        color: var(--ink);
      }

      .cve-matrix-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 10px;
      }

      .cve-matrix-wrap {
        overflow-x: auto;
      }

      .cve-priority-matrix {
        width: 100%;
        border-collapse: collapse;
        min-width: 560px;
      }

      .cve-priority-matrix th,
      .cve-priority-matrix td {
        border: 1px solid var(--line);
        padding: 8px;
        text-align: center;
        vertical-align: middle;
      }

      .cve-priority-matrix thead th {
        background: #fff6ed;
        color: var(--accent-dark);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .cve-priority-matrix tbody th {
        background: #f8efe5;
        color: var(--accent-dark);
        width: 44px;
      }

      .cve-priority-matrix td strong {
        display: block;
        font-size: 14px;
      }

      .cve-priority-matrix td span {
        display: block;
        font-size: 11px;
        margin-top: 2px;
      }

      .cve-prio-low {
        background: #edf9f1;
        color: #21583a;
      }

      .cve-prio-medium {
        background: #fff6e4;
        color: #7a4b00;
      }

      .cve-prio-high {
        background: #fff1f1;
        color: #7c2d2d;
      }

      .learning-controls {
        margin-top: 14px;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }

      .learning-control label {
        margin-bottom: 4px;
      }

      .learning-control input,
      .learning-control select {
        background: #fffdf9;
      }

      .learning-actions {
        display: flex;
        align-items: flex-end;
        gap: 8px;
      }

      .learning-action-button {
        padding: 9px 12px;
      }

      .learning-empty {
        margin-top: 10px;
      }

      .learning-hidden {
        display: none !important;
      }

      .learning-lock-scroll {
        overflow: hidden;
      }

      @media (max-width: 760px) {
        .cve-break-row {
          grid-template-columns: 1fr;
          gap: 4px;
        }

        .cve-inline-panel {
          padding: 12px;
        }

        .cve-nav {
          flex-direction: column-reverse;
          align-items: stretch;
        }

        .cve-finish-actions {
          flex-direction: column;
        }

        .cve-nav .action-button,
        .cve-finish-actions .action-button {
          width: 100%;
        }

        .cve-priority-matrix {
          min-width: 500px;
        }

        .cve-priority-matrix th,
        .cve-priority-matrix td {
          padding: 6px;
        }
      }

      @media (max-width: 960px) {
        .phishing-learning-page .card {
          padding: 22px 18px;
        }

        .phishing-learning-page .section {
          margin-bottom: 20px;
        }

        .phishing-learning-page #phScreenCards {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 480px) {
        .cve-priority-matrix {
          min-width: 420px;
        }
      }

      .learning-hidden-section {
        display: none !important;
      }

      .learning-card.learning-accordion {
        padding-top: 10px;
      }

      .learning-term-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: 1px solid transparent;
        border-radius: 12px;
        background: transparent;
        color: inherit;
        text-align: left;
        font: inherit;
        font-weight: 700;
        padding: 6px 2px 8px;
        cursor: pointer;
      }

      .learning-term-toggle::after {
        content: "▾";
        font-size: 12px;
        line-height: 1;
        opacity: 0.8;
        transform: rotate(-90deg);
        transition: transform 0.2s ease;
      }

      .learning-card.learning-open .learning-term-toggle::after {
        transform: rotate(0deg);
      }

      .learning-term-content {
        display: none;
        padding-top: 4px;
      }

      .learning-card.learning-open .learning-term-content {
        display: grid;
        gap: 8px;
      }

      .learning-tag {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: var(--accent-soft);
        color: var(--accent-dark);
        font-size: 11px;
        font-weight: 700;
        padding: 4px 8px;
        margin-top: 8px;
      }

      .grid-2 {
        display: grid;
        gap: 18px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }

      .section .grid-2 + .grid-2 {
        margin-top: 16px;
      }

      .grid-span {
        grid-column: 1 / -1;
      }

      .time-input-group {
        margin-top: 10px;
      }

      label {
        font-size: 13px;
        color: var(--muted);
        display: block;
        margin-bottom: 6px;
      }

      input,
      select,
      textarea {
        width: 100%;
        padding: 14px 16px;
        border-radius: 12px;
        border: 1px solid var(--accent);
        background: #fdfbf8;
        font-family: inherit;
        font-size: 14px;
        color: var(--ink);
        line-height: 1.5;
      }

      .cve-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        align-items: center;
      }

      .cve-row input {
        flex: 1;
        min-width: 220px;
      }

      .action-button {
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: var(--accent);
        color: #fff;
        font-weight: 600;
        padding: 10px 16px;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
        white-space: nowrap;
      }

      .action-button:hover {
        background: var(--accent-dark);
        border-color: var(--accent-dark);
      }

      .action-button:disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }

      .form-mode-toggle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 8px;
      }

      .form-mode-label {
        order: 1;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
      }

      .form-mode-help {
        order: 2;
        flex-basis: 100%;
        margin: -4px 0 0;
        font-size: 12px;
        line-height: 1.4;
        color: var(--muted);
      }

      .form-mode-buttons {
        order: 3;
        display: inline-flex;
        gap: 8px;
        padding: 4px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: #fffdf9;
      }

      .mode-button {
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-weight: 600;
        font-size: 13px;
        padding: 8px 14px;
        cursor: pointer;
      }

      .mode-button.is-active {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent-dark);
      }

      .wizard-toolbar {
        display: grid;
        gap: 10px;
        margin: 2px 0 12px;
      }

      .wizard-progress {
        width: 100%;
        height: 8px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: #fffdf9;
        overflow: hidden;
      }

      .wizard-progress-bar {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--accent), var(--accent-dark));
        transition: width 0.25s ease;
      }

      .wizard-step-track {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .wizard-step-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 999px;
        padding: 5px 10px;
        border: 1px solid var(--line);
        background: #fffdf9;
        color: var(--muted);
        font-size: 12px;
        font-family: inherit;
        cursor: pointer;
        appearance: none;
        transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
      }

      .wizard-step-chip:hover {
        transform: translateY(-1px);
      }

      .wizard-step-chip::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1px solid currentColor;
        background: transparent;
      }

      .wizard-step-chip.is-active {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent-dark);
      }

      .wizard-step-chip.status-empty::before {
        border-color: #ef4444;
        background: #ef4444;
      }

      .wizard-step-chip.status-partial::before {
        border-color: #f59e0b;
        background: #f59e0b;
      }

      .wizard-step-chip.status-complete::before {
        border-color: #22c55e;
        background: #22c55e;
      }

      .wizard-step-chip.status-empty {
        border-color: #efb0b0;
      }

      .wizard-step-chip.status-partial {
        border-color: #f4d08a;
      }

      .wizard-step-chip.status-complete {
        border-color: #8ad3ab;
      }

      .wizard-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 8px;
      }

      .wizard-nav-button {
        min-width: 120px;
      }

      .wizard-step-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
      }

      .wizard-hidden {
        display: none !important;
      }

      .wizard-periods-hint {
        margin: 6px 0 12px;
      }

      #cdn-form.wizard-periods-active .wizard-period-block .entry-card {
        border-color: var(--accent);
        background: var(--accent-soft);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      }

      #cdn-form.wizard-periods-active .wizard-period-block .period-table-wrapper {
        border: 1px solid var(--accent);
        border-radius: 12px;
        padding: 10px;
        background: #fffdf9;
      }

      #cdn-form.wizard-periods-active .wizard-period-block .process-actions {
        margin-top: 10px;
      }

      .cve-result {
        border-radius: 14px;
        border: 1px solid #efd9c5;
        background: #fff9f3;
        padding: 10px 12px;
        font-size: 13px;
        color: var(--ink);
        white-space: pre-line;
      }

      .process-list {
        display: grid;
        gap: 12px;
      }

      .entry-list {
        display: grid;
        gap: 12px;
      }

      .entry-card {
        border: 1px solid var(--accent);
        border-radius: 16px;
        padding: 12px;
        background: #fffdf9;
      }

      .check-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px 0 2px;
      }

      .check-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: #fff7ef;
        font-size: 12px;
        color: var(--ink);
        cursor: pointer;
      }

      .check-label input {
        width: 14px;
        height: 14px;
        margin: 0;
      }

      .check-summary {
        font-size: 12px;
        color: var(--muted);
        margin-top: 6px;
      }

      .period-table-wrapper {
        margin-top: 12px;
        overflow-x: visible;
        max-width: 100%;
      }

      .period-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 8px;
        table-layout: fixed;
        min-width: 0;
      }

      .period-table th {
        text-align: left;
        font-size: 11px;
        color: var(--muted);
        padding: 0 6px;
        vertical-align: bottom;
      }

      .period-table td {
        background: #fffdf9;
        border: 1px solid var(--accent);
        padding: 6px 8px;
        border-radius: 12px;
        font-size: 12px;
      }

      .data-table td {
        white-space: pre-line;
      }

      .impact-level {
        width: 100%;
        min-width: 0;
        font-size: 11px;
        padding: 6px 8px;
      }

      .impact-level.level-1 {
        background: #eaf7f0;
        border-color: #bfe3cf;
        color: #1f6c3d;
      }

      .impact-level.level-2 {
        background: #fff8dc;
        border-color: #f3da86;
        color: #8a6a00;
      }

      .impact-level.level-3 {
        background: #ffefd9;
        border-color: #f5c58a;
        color: #8a4b00;
      }

      .impact-level.level-4 {
        background: #ffe2e2;
        border-color: #f4a5a5;
        color: #8f1f1f;
      }

      .period-table td:last-child {
        text-align: right;
        width: 1%;
        white-space: nowrap;
      }

      .row-actions {
        text-align: right;
        width: 1%;
        white-space: nowrap;
      }

      .icon-button {
        width: 26px;
        height: 26px;
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: #fff1e6;
        color: var(--accent-dark);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        line-height: 1;
      }

      .icon-button:hover {
        border-color: var(--accent);
        background: #ffe7d6;
      }

      .period-empty {
        font-size: 12px;
        color: var(--muted);
        margin-top: 8px;
      }

      .remove-button.small {
        padding: 6px 10px;
        font-size: 12px;
      }

      .impact-chips {
        display: grid;
        gap: 14px;
        margin-top: 12px;
      }

      .impact-card {
        border: 1px solid var(--accent);
        border-radius: 16px;
        padding: 12px;
        background: #fffdf9;
        display: grid;
        gap: 0;
      }

      .impact-header {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
      }

      .impact-title {
        font-weight: 600;
        font-size: 14px;
        color: var(--ink);
      }

      .impact-selected {
        font-size: 12px;
        color: var(--muted);
      }

      .chip-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .chip-option {
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: #fff7ef;
        color: var(--ink);
        font-weight: 600;
        padding: 6px 12px;
        cursor: pointer;
        font-size: 12px;
      }

      .chip-option.active {
        border-color: var(--accent);
        background: #fff1e6;
        color: var(--accent-dark);
      }

      .chip-other {
        margin-top: 6px;
      }

      .level-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .level-chip {
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: #fdfbf8;
        color: var(--ink);
        font-weight: 600;
        padding: 6px 12px;
        cursor: pointer;
        font-size: 12px;
      }

      .level-chip.active {
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
      }

      .level-chip.level-1 {
        background: #eaf7f0;
        border-color: #bfe3cf;
        color: #1f6c3d;
      }

      .level-chip.level-2 {
        background: #fff8dc;
        border-color: #f3da86;
        color: #8a6a00;
      }

      .level-chip.level-3 {
        background: #ffefd9;
        border-color: #f5c58a;
        color: #8a4b00;
      }

      .level-chip.level-4 {
        background: #ffe2e2;
        border-color: #f4a5a5;
        color: #8f1f1f;
      }

      .time-levels {
        display: grid;
        gap: 0;
      }

      .time-level-row {
        display: grid;
        gap: 8px;
        padding: 10px;
        border-radius: 12px;
        background: #fff7ef;
        border: 1px dashed var(--line);
      }

      .time-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
      }

      .process-item {
        display: flex;
        gap: 0;
        align-items: center;
      }

      .process-actions {
        margin-top: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .add-button {
        border-radius: 999px;
        border: 1px dashed var(--accent);
        background: #fff7ef;
        color: var(--accent-dark);
        font-weight: 600;
        padding: 8px 14px;
        cursor: pointer;
        width: fit-content;
      }

      .remove-button {
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: #fdfaf6;
        color: var(--muted);
        font-weight: 600;
        padding: 8px 14px;
        cursor: pointer;
        width: fit-content;
      }

      .add-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .remove-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      textarea {
        min-height: 96px;
        resize: vertical;
      }

      .control-block {
        margin-top: 14px;
        display: grid;
        gap: 12px;
      }

      .control-header h3 {
        margin: 0;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--ink);
      }

      .control-header p {
        margin: 0;
      }

      .control-options {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
      }

      .control-option,
      .control-type {
        position: relative;
        cursor: pointer;
        height: 100%;
      }

      .control-option input,
      .control-type input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .control-body,
      .control-type-body {
        border: 1px solid var(--accent);
        border-radius: 16px;
        padding: 14px;
        background: #fdfaf6;
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 190px;
        height: 100%;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      }

      .control-title,
      .control-type-title {
        font-size: 15px;
        font-weight: 600;
      }

      .control-note {
        font-size: 12px;
        font-weight: 600;
        color: var(--accent-dark);
        background: #fff3e6;
        padding: 4px 10px;
        border-radius: 999px;
        width: fit-content;
        margin-top: auto;
      }

      .control-option input:checked + .control-body,
      .control-type input:checked + .control-type-body {
        border-color: var(--accent);
        box-shadow: 0 10px 20px rgba(201, 124, 59, 0.18);
        transform: translateY(-2px);
      }

      .control-effective .control-body {
        background: #eef8f1;
        border-color: #9bd7b2;
      }

      .control-partial .control-body {
        background: #fff8e5;
        border-color: #f1c97a;
      }

      .control-weak .control-body {
        background: #fff1f1;
        border-color: #f0b1b1;
      }

      .control-type-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
      }

      .control-chip-group {
        display: grid;
        gap: 12px;
        margin-top: 16px;
      }

      .chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
      }

      .chip {
        display: inline-flex;
        align-items: center;
      }

      .chip input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .chip-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: #fff7ef;
        color: var(--ink);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      }

      .chip-badge {
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: #ffffff;
        color: var(--accent-dark);
      }

      .chip input:checked + .chip-label {
        border-color: var(--accent);
        background: var(--accent);
        color: #fff;
        box-shadow: 0 10px 18px rgba(201, 124, 59, 0.2);
        transform: translateY(-1px);
      }

      .chip input:checked + .chip-label .chip-badge {
        border-color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
      }

      .chip-help {
        margin: 0;
      }

      .control-detail {
        border-radius: 16px;
        border: 1px solid #efd9c5;
        background: #fff9f3;
        padding: 12px 14px;
        display: grid;
        gap: 6px;
      }

      .control-detail-title {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--accent-dark);
        font-weight: 600;
      }

      .control-detail-body {
        font-size: 13px;
        color: var(--ink);
        white-space: pre-line;
      }

      .chip-preventive .chip-label {
        background: #f0f4ff;
      }

      .chip-detective .chip-label {
        background: #eef7f2;
      }

      .chip-corrective .chip-label {
        background: #fff7ef;
      }

      .chip-dissuasive .chip-label {
        background: #f7f1ff;
      }

      .chip-effective .chip-label {
        background: #eef8f1;
      }

      .chip-partial .chip-label {
        background: #fff8e5;
      }

      .chip-weak .chip-label {
        background: #fff1f1;
      }

      .accordion {
        display: grid;
        gap: 12px;
      }

      .accordion-item {
        border: 1px solid var(--accent);
        border-radius: 16px;
        background: #fffdf9;
        box-shadow: 0 10px 20px rgba(31, 26, 23, 0.08);
        overflow: hidden;
      }

      .accordion-summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        font-weight: 600;
        color: var(--ink);
      }

      .accordion-summary::-webkit-details-marker {
        display: none;
      }

      .accordion-summary::after {
        content: "+";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: #fffdf9;
        color: var(--accent-dark);
        font-weight: 700;
      }

      .accordion-item[open] .accordion-summary::after {
        content: "-";
      }

      .accordion-meta {
        font-size: 11px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
      }

      .accordion-panel {
        padding: 0 16px 16px;
        border-top: 1px solid #efe3d8;
        background: #fffaf4;
      }

      .accordion-item[open] .accordion-summary {
        color: var(--accent-dark);
      }

      .accordion-panel .control-block {
        margin-top: 0;
      }

      .control-domain-list {
        display: grid;
        gap: 12px;
      }

      .control-domain-list .control-type-body {
        min-height: auto;
      }

      .control-preventive .control-type-body {
        background: #f0f4ff;
        border-color: #b7c8f5;
      }

      .control-detective .control-type-body {
        background: #eef7f2;
        border-color: #a7dac1;
      }

      .control-corrective .control-type-body {
        background: #fff7ef;
        border-color: #f2caa5;
      }

      .control-dissuasive .control-type-body {
        background: #f7f1ff;
        border-color: #d3b9f2;
      }

      .result-card {
        display: flex;
        flex-direction: column;
        gap: 18px;
        animation: float-in 0.6s ease-out;
      }

      .summary-panel {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        border-radius: 18px;
        border: 1px solid #efe3d8;
        background: #fff9f3;
      }

      .results-top {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: 16px;
        align-items: start;
      }

      .summary-primary {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
      }

      .summary-quick {
        display: grid;
        gap: 0;
      }

      .heatmap-panel {
        border-radius: 18px;
        border: 1px solid #efe3d8;
        background: #fffdf9;
        padding: 14px;
      }

      .heatmap-panel .section {
        margin: 0;
      }

      .results-details {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }

      .summary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid #efe3d8;
        background: #fffdf9;
        font-size: 14px;
      }

      .summary-row-multiline {
        flex-direction: column;
        align-items: flex-start;
      }

      .summary-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--muted);
        font-weight: 600;
      }

      .summary-value {
        font-weight: 600;
        color: var(--ink);
      }

      .severity-pill {
        display: inline-grid;
        grid-auto-rows: auto;
        align-items: start;
        gap: 5px;
        padding: 14px 16px;
        border-radius: 16px;
        border: 1px solid #efe3d8;
        background: #fff7ef;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        min-width: 170px;
        width: fit-content;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
      }

      .severity-pill span {
        font-size: 12px;
        text-transform: none;
        letter-spacing: 0.3px;
        opacity: 0.92;
      }

      .severity-pill > div {
        font-size: 22px;
        line-height: 1.05;
        font-weight: 700;
      }

      .severity-pill.severity-1 {
        background: #eaf7f0;
        border-color: #bfe3cf;
        color: #1f6c3d;
      }

      .severity-pill.severity-2 {
        background: #fff8dc;
        border-color: #f3da86;
        color: #8a6a00;
      }

      .severity-pill.severity-3 {
        background: #ffefd9;
        border-color: #f5c58a;
        color: #8a4b00;
      }

      .severity-pill.severity-4 {
        background: #ffe2e2;
        border-color: #f4a5a5;
        color: #8f1f1f;
      }

      .severity-pill.severity-5 {
        background: #ffd6d6;
        border-color: #f08a8a;
        color: #7a1010;
      }

      .badge {
        padding: 14px 16px;
        border-radius: 16px;
        font-size: 14px;
        font-weight: 600;
        display: inline-grid;
        grid-auto-rows: auto;
        align-items: start;
        gap: 5px;
        color: #fff;
        min-width: 170px;
        width: fit-content;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
      }

      .badge span {
        font-size: 12px;
        text-transform: none;
        letter-spacing: 0.3px;
        opacity: 0.92;
      }

      .badge > div {
        font-size: 22px;
        line-height: 1.05;
        font-weight: 700;
      }

      .badge.risk-bajo {
        color: #0f5132;
        border: 1px solid #87d6ac;
      }

      .badge.risk-medio-bajo,
      .badge.risk-medio {
        color: #5f4600;
        border: 1px solid #dbcf67;
      }

      .badge.risk-medio-alto {
        color: #6f3900;
        border: 1px solid #e8a66e;
      }

      .badge.risk-alto {
        color: #ffffff;
        border: 1px solid #d86f6f;
      }


      .stat-list {
        display: grid;
        gap: 14px;
      }

      .summary-card {
        margin-top: 16px;
        padding: 14px;
        border-radius: 16px;
        background: #fff9f3;
        border: 1px solid #efd9c5;
        display: grid;
        gap: 12px;
      }

      .summary-card h3 {
        margin: 0;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--accent-dark);
      }

      .summary-grid {
        display: grid;
        gap: 14px;
      }

      .summary-item {
        display: grid;
        gap: 6px;
        padding: 10px 12px;
        border-radius: 12px;
        background: #fffdf9;
        border: 1px solid #efe3d8;
      }

      .summary-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--muted);
        font-weight: 600;
      }

      .summary-value {
        font-size: 14px;
        color: var(--ink);
      }

      .summary-table-wrapper {
        overflow-x: auto;
      }

      .summary-table {
        font-size: 11px;
      }

      .summary-table th,
      .summary-table td {
        padding: 6px 8px;
      }

      .summary-impact-values {
        margin-top: 10px;
        font-size: 12px;
        color: var(--muted);
      }

      .summary-table .level-cell.level-1 {
        background: #eaf7f0;
        border-color: #bfe3cf;
        color: #1f6c3d;
      }

      .summary-table .level-cell.level-2 {
        background: #fff8dc;
        border-color: #f3da86;
        color: #8a6a00;
      }

      .summary-table .level-cell.level-3 {
        background: #ffefd9;
        border-color: #f5c58a;
        color: #8a4b00;
      }

      .summary-table .level-cell.level-4 {
        background: #ffe2e2;
        border-color: #f4a5a5;
        color: #8f1f1f;
      }

      .summary-multiline {
        white-space: pre-line;
      }

      .summary-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .summary-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        border: 1px solid transparent;
      }

      .summary-chip-1 {
        background: #eaf7f0;
        color: #1f6c3d;
        border-color: #bfe3cf;
      }

      .summary-chip-2 {
        background: #fff8dc;
        color: #8a6a00;
        border-color: #f3da86;
      }

      .summary-chip-3 {
        background: #ffefd9;
        color: #8a4b00;
        border-color: #f5c58a;
      }

      .summary-chip-4 {
        background: #ffe2e2;
        color: #8f1f1f;
        border-color: #f4a5a5;
      }

      .action-row {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: wrap;
      }

      .download-button {
        border-radius: 999px;
        border: 1px solid var(--accent);
        background: var(--accent);
        color: #fff;
        font-weight: 600;
        padding: 10px 18px;
        cursor: pointer;
        box-shadow: 0 10px 20px rgba(201, 124, 59, 0.2);
      }

      .download-button:hover {
        background: var(--accent-dark);
        border-color: var(--accent-dark);
      }

      .download-button:disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }

      .clear-button {
        background: transparent;
        color: var(--accent-dark);
        border-color: var(--line);
        box-shadow: none;
      }

      .clear-button:hover {
        background: var(--accent-soft);
        border-color: var(--accent);
      }

      .pdf-export-row {
        margin-top: 14px;
      }

      .pdf-preview-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.68);
        z-index: 4000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }

      .pdf-preview-dialog {
        width: min(980px, 100%);
        max-height: 92vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 16px;
        box-shadow: var(--shadow);
      }

      .pdf-preview-header h3 {
        margin: 0;
        font-size: 18px;
      }

      .pdf-preview-note {
        margin: 0;
        font-size: 13px;
        color: var(--muted);
      }

      .pdf-preview-content {
        overflow: auto;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: linear-gradient(120deg, var(--bg-1), var(--bg-2));
        padding: 12px;
      }

      .pdf-preview-canvas {
        display: grid;
        gap: 12px;
      }

      .pdf-export-surface {
        animation: none !important;
      }

      .pdf-preview-canvas > * {
        margin: 0 !important;
      }

      .pdf-preview-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
      }

      .pdf-preview-cancel {
        border-radius: 999px;
        border: 1px solid var(--line);
        background: var(--card);
        color: var(--ink);
        font-weight: 600;
        padding: 10px 16px;
        cursor: pointer;
      }

      .pdf-preview-cancel:hover {
        border-color: var(--accent);
      }

      .stat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        background: #faf6f1;
        border-radius: 12px;
        border: 1px solid #efe3d8;
        font-size: 14px;
      }

      .stat-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .tip-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;
      }

      .tip-button {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid var(--accent);
        background: #fff7ef;
        color: var(--accent-dark);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        cursor: default;
        padding: 0;
      }

      .tip-bubble {
        position: absolute;
        left: 0;
        top: calc(100% + 2px);
        width: 220px;
        background: #fff7ef;
        border: 2px solid var(--accent);
        border-radius: 14px 14px 14px 4px;
        padding: 10px 12px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
        font-size: 12px;
        color: var(--ink);
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 2;
      }

      .tip-wrapper:hover .tip-bubble,
      .tip-wrapper:focus-within .tip-bubble {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .stat strong {
        font-weight: 600;
      }

      .heatmap {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
      }

      .cell {
        padding: 12px 6px;
        border-radius: 10px;
        text-align: center;
        font-size: 12px;
        color: #1b1b1b;
        font-weight: 600;
        border: 1px solid rgba(0, 0, 0, 0.08);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
      }

      .cell.header {
        background: #fdfaf6;
        color: var(--muted);
        font-weight: 600;
      }

      .cell.axis-corner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
        text-align: left;
        padding: 8px 10px;
      }

      .cell.axis-corner .axis-x,
      .cell.axis-corner .axis-y {
        display: block;
        font-size: 11px;
        line-height: 1.2;
      }

      .cell.active {
        transform: scale(1.05);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
        outline: 2px solid rgba(0, 0, 0, 0.18);
      }

      .legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 12px;
        color: var(--muted);
        margin-top: 12px;
        justify-content: center;
      }

      .legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #fdfaf6;
        border: 1px solid #efe3d8;
        padding: 6px 12px;
        border-radius: 999px;
      }

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
      }

      .legend .risk-bajo {
        background: #eaf7f0;
        border-color: #c6edd6;
        color: #1f6c3d;
      }

      .legend .risk-medio {
        background: #fff8dc;
        border-color: #f3da86;
        color: #8a6a00;
      }

      .legend .risk-medio-alto {
        background: #ffefd9;
        border-color: #f5c58a;
        color: #8a4b00;
      }

      .legend .risk-alto {
        background: #ffe2e2;
        border-color: #f4a5a5;
        color: #8f1f1f;
      }

      .risk-bajo {
        background: var(--risk-bajo);
      }

      .risk-medio-bajo {
        background: var(--risk-medio-bajo);
      }

      .risk-medio {
        background: var(--risk-medio);
      }

      .risk-medio-alto {
        background: var(--risk-medio-alto);
      }

      .risk-alto {
        background: var(--risk-alto);
      }

      :root:not([data-theme="dark"]) {
        --panel-blue-bg: #f8fbff;
        --panel-blue-bg-soft: #f2f7ff;
        --panel-blue-bg-strong: #edf4ff;
        --panel-blue-border: #cddcf2;
      }

      :root:not([data-theme="dark"]) .summary-panel,
      :root:not([data-theme="dark"]) .heatmap-panel {
        border-color: var(--panel-blue-border);
        background: linear-gradient(180deg, var(--panel-blue-bg) 0%, var(--panel-blue-bg-soft) 100%);
      }

      :root:not([data-theme="dark"]) .summary-row,
      :root:not([data-theme="dark"]) .summary-item,
      :root:not([data-theme="dark"]) .summary-card,
      :root:not([data-theme="dark"]) .stat {
        border-color: var(--panel-blue-border);
        background: var(--panel-blue-bg);
      }

      :root:not([data-theme="dark"]) .cell.header,
      :root:not([data-theme="dark"]) .legend span {
        border-color: var(--panel-blue-border);
        background: var(--panel-blue-bg-strong);
      }

      :root:not([data-theme="dark"]) .tip-button {
        background: var(--panel-blue-bg-soft);
        border-color: #8fb3ea;
      }

      :root:not([data-theme="dark"]) .tip-bubble {
        background: var(--panel-blue-bg);
        border-color: #9ab9ea;
      }

      :root[data-theme="dark"] .lang-switch {
        background: #1f2f47;
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .lang-switch__thumb {
        background: #0f172a;
        border-color: #334155;
      }

      :root[data-theme="dark"] .lang-switch__label {
        color: #9fb2cb;
      }

      :root[data-theme="dark"] .lang-switch::after {
        color: #f8fafc;
      }

      :root[data-theme="dark"] .lang-switch.is-es .lang-switch__label--es,
      :root[data-theme="dark"] .lang-switch.is-en .lang-switch__label--en {
        color: #f8fafc;
      }

      :root[data-theme="dark"] .form-mode-buttons,
      :root[data-theme="dark"] .wizard-progress,
      :root[data-theme="dark"] .wizard-step-chip {
        background: #1f3045;
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .mode-button {
        color: #c1d2ea;
      }

      :root[data-theme="dark"] .mode-button.is-active {
        background: #2f4a67;
        border-color: #7ca1cf;
        color: #f3f7fd;
      }

      :root[data-theme="dark"] .wizard-step-chip {
        color: #c1d2ea;
      }

      :root[data-theme="dark"] .wizard-step-chip.is-active {
        background: #2f4a67;
        border-color: #7ca1cf;
        color: #f3f7fd;
      }

      :root[data-theme="dark"] .wizard-step-chip.status-empty {
        border-color: #7f3a3a;
      }

      :root[data-theme="dark"] .wizard-step-chip.status-partial {
        border-color: #7b6630;
      }

      :root[data-theme="dark"] .wizard-step-chip.status-complete {
        border-color: #2f6c4a;
      }

      :root[data-theme="dark"] .wizard-step-label,
      :root[data-theme="dark"] .form-mode-label {
        color: #c7d4e8;
      }

      :root[data-theme="dark"] #cdn-form.wizard-periods-active .wizard-period-block .entry-card {
        background: #22344a;
        border-color: #7ca1cf;
      }

      :root[data-theme="dark"] #cdn-form.wizard-periods-active .wizard-period-block .period-table-wrapper {
        background: #1f3045;
        border-color: #7ca1cf;
      }

      :root[data-theme="dark"] .result-card .stat {
        background: #1a2a3d;
        border-color: #3b4f68;
      }

      :root[data-theme="dark"] .result-card .stat > div {
        color: #cbd5e1;
      }

      :root[data-theme="dark"] .result-card .stat strong {
        color: #f8fafc;
      }

      :root[data-theme="dark"] .result-card .summary-card {
        background: #1f3045;
        border-color: #3b4f68;
      }

      :root[data-theme="dark"] .result-card .summary-card h3 {
        color: #fcd34d;
      }

      :root[data-theme="dark"] .result-card .summary-item {
        background: #24384f;
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .result-card .summary-label {
        color: #c1d2ea;
      }

      :root[data-theme="dark"] .result-card .summary-value {
        color: #f3f6fb;
      }

      :root[data-theme="dark"] .result-card .summary-chip-1 {
        background: #143c2d;
        border-color: #2d7a5a;
        color: #c9ffe2;
      }

      :root[data-theme="dark"] .result-card .summary-chip-2 {
        background: #453a12;
        border-color: #9b7f22;
        color: #fff2c2;
      }

      :root[data-theme="dark"] .result-card .summary-chip-3 {
        background: #4a2f1b;
        border-color: #a8672b;
        color: #ffdcb8;
      }

      :root[data-theme="dark"] .result-card .summary-chip-4 {
        background: #4a2020;
        border-color: #b65a5a;
        color: #ffd0d0;
      }

      :root[data-theme="dark"] .result-card .legend span {
        background: #24384f;
        border-color: #4b6280;
        color: #d8e2f2;
      }

      :root[data-theme="dark"] .heatmap .cell.header {
        background: #2a3f58;
        border-color: #4b6280;
        color: #dbeafe;
      }

      :root[data-theme="dark"] .add-button {
        background: #1f3045;
        border-color: #5f83ad;
        color: #e4efff;
      }

      :root[data-theme="dark"] .add-button:hover {
        background: #27405f;
        border-color: #7ea7d5;
      }

      :root[data-theme="dark"] .remove-button {
        background: #2a3647;
        border-color: #5d738f;
        color: #d5e2f4;
      }

      :root[data-theme="dark"] .remove-button:hover {
        background: #33475f;
        border-color: #7f97b7;
      }

      :root[data-theme="dark"] .add-button:disabled,
      :root[data-theme="dark"] .remove-button:disabled {
        opacity: 0.8;
        background: #273445;
        border-color: #4b6280;
        color: #b9c9dd;
      }

      :root[data-theme="dark"] .card::after {
        background: radial-gradient(circle, rgba(34, 211, 238, 0.14), transparent 70%);
      }

      :root[data-theme="dark"] label {
        color: #c7d4e8;
      }

      :root[data-theme="dark"] .section h2 {
        color: #fcd34d;
      }

      :root[data-theme="dark"] .learning-block {
        background: linear-gradient(180deg, #1e2e44 0%, #1a273b 100%);
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .learning-card {
        background: #22344a;
        border-color: #4b6280;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
      }

      :root[data-theme="dark"] .learning-card h3 {
        color: #fcd34d;
      }

      :root[data-theme="dark"] .learning-card p {
        color: #dbe7f6;
      }

      :root[data-theme="dark"] .learning-control input,
      :root[data-theme="dark"] .learning-control select {
        background: #1a2a3d;
        border-color: #4b6280;
        color: #f8fafc;
      }

      :root[data-theme="dark"] .learning-action-button {
        background: #24384f;
        border-color: #4b6280;
        color: #eaf0fa;
      }

      :root[data-theme="dark"] .learning-action-button:hover {
        background: #2d4662;
        border-color: #7ca1cf;
      }

      :root[data-theme="dark"] .learning-term-toggle {
        color: #f3f7fd;
      }

      :root[data-theme="dark"] .learning-tag {
        background: #2f4a67;
        border-color: #7ca1cf;
        color: #f3f7fd;
      }

      :root[data-theme="dark"] .quiz-question-text {
        color: #f4f7fc;
      }

      :root[data-theme="dark"] .quiz-question-topic {
        color: #fcd34d;
      }

      :root[data-theme="dark"] .quiz-start {
        background: linear-gradient(180deg, #21344b 0%, #1a2a3d 100%);
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .quiz-start h2 {
        color: #fcd34d;
      }

      :root[data-theme="dark"] .quiz-start p,
      :root[data-theme="dark"] .quiz-progress__label {
        color: #dbe7f6;
      }

      :root[data-theme="dark"] .quiz-progress__bar {
        background: #1a2a3d;
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .quiz-option {
        background: #1a2a3d;
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .quiz-option span {
        color: #dbe7f6;
      }

      :root[data-theme="dark"] .quiz-option strong {
        color: #f8fafc;
      }

      :root[data-theme="dark"] .quiz-option:hover {
        border-color: #7ca1cf;
      }

      :root[data-theme="dark"] .quiz-secondary-button {
        background: #24384f;
        border-color: #4b6280;
        color: #eaf0fa;
      }

      :root[data-theme="dark"] .quiz-secondary-button:hover {
        background: #2d4662;
        border-color: #7ca1cf;
      }

      :root[data-theme="dark"] .quiz-result {
        background: linear-gradient(180deg, #21344b 0%, #1a2a3d 100%);
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .quiz-result h2 {
        color: #fcd34d;
      }

      :root[data-theme="dark"] .quiz-result p,
      :root[data-theme="dark"] .quiz-empty {
        color: #dbe7f6;
      }

      :root[data-theme="dark"] .quiz-topic-summary-list li,
      :root[data-theme="dark"] .quiz-recommendations-list li,
      :root[data-theme="dark"] .quiz-radar-labels text {
        color: #dbe7f6;
        fill: #dbe7f6;
      }

      :root[data-theme="dark"] #assetQuizForm label,
      :root[data-theme="dark"] #incidentQuizForm label {
        color: #dbe7f6;
      }

      :root[data-theme="dark"] .incident-learning-page .learning-card p,
      :root[data-theme="dark"] .incident-learning-page .cve-steps-list li,
      :root[data-theme="dark"] .incident-learning-page #incidentQuizForm label {
        color: #dbe7f6;
      }

      :root[data-theme="dark"] #assetQuizForm input[type="radio"],
      :root[data-theme="dark"] #incidentQuizForm input[type="radio"] {
        border-color: #7ca1cf;
        background: #1a2a3d;
      }

      :root[data-theme="dark"] .quiz-radar-wrap {
        border-color: #4b6280;
        background: #1a2a3d;
      }

      :root[data-theme="dark"] .quiz-radar-grid polygon,
      :root[data-theme="dark"] .quiz-radar-grid line {
        stroke: #4b6280;
      }

      :root[data-theme="dark"] .quiz-radar-data {
        fill: rgba(124, 161, 207, 0.32);
        stroke: #8fb9ff;
      }

      :root[data-theme="dark"] .quiz-feedback {
        border-color: #4b6280;
        background: #22344a;
      }

      :root[data-theme="dark"] .quiz-feedback p {
        color: #dbe7f6;
      }

      :root[data-theme="dark"] .quiz-feedback--correct {
        border-color: #4aa06f;
        background: #203b2d;
      }

      :root[data-theme="dark"] .quiz-feedback--incorrect {
        border-color: #b56f6f;
        background: #452a2a;
      }

      :root[data-theme="dark"] .quiz-review-list li {
        border-color: #4b6280;
        background: #1a2a3d;
      }

      :root[data-theme="dark"] .quiz-empty {
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .quiz-question.quiz-correct {
        border-color: #4aa06f;
      }

      :root[data-theme="dark"] .quiz-question.quiz-incorrect {
        border-color: #b56f6f;
      }

      :root[data-theme="dark"] .quiz-option.is-correct {
        border-color: #4aa06f;
        background: #203b2d;
      }

      :root[data-theme="dark"] .quiz-option.is-incorrect {
        border-color: #b56f6f;
        background: #452a2a;
      }

      :root[data-theme="dark"] .cve-progress-label,
      :root[data-theme="dark"] .cve-module-head p {
        color: #dbe7f6;
      }

      :root[data-theme="dark"] .cve-module-head h2 {
        color: #fcd34d;
      }

      :root[data-theme="dark"] .cve-progress-bar {
        background: #1a2a3d;
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .cve-inline-panel {
        background: linear-gradient(180deg, #21344b 0%, #1a2a3d 100%);
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .cve-inline-panel h3,
      :root[data-theme="dark"] .cve-break-k {
        color: #fcd34d;
      }

      :root[data-theme="dark"] .cve-steps-list li,
      :root[data-theme="dark"] .cve-inline-note {
        color: #dbe7f6;
      }

      :root[data-theme="dark"] .cve-cvss-scale li {
        border-color: #4b6280;
        background: #1a2a3d;
      }

      :root[data-theme="dark"] .cve-result-box {
        border-color: #4b6280;
        background: #1a2a3d;
        color: #dbe7f6;
      }

      :root[data-theme="dark"] .cve-formula {
        border-color: #4b6280;
        background: #1a2a3d;
        color: #eaf0fa;
      }

      :root[data-theme="dark"] .cve-priority-matrix th,
      :root[data-theme="dark"] .cve-priority-matrix td {
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .cve-priority-matrix thead th {
        background: #24384f;
        color: #fcd34d;
      }

      :root[data-theme="dark"] .cve-priority-matrix tbody th {
        background: #21344b;
        color: #fcd34d;
      }

      :root[data-theme="dark"] .cve-prio-low {
        background: #203b2d;
        color: #d9fbe7;
      }

      :root[data-theme="dark"] .cve-prio-medium {
        background: #4b3b20;
        color: #ffe8b3;
      }

      :root[data-theme="dark"] .cve-prio-high {
        background: #452a2a;
        color: #ffe3e3;
      }

      :root[data-theme="dark"] .cve-finish-dialog {
        border-color: #4b6280;
        background: #1a2a3d;
      }

      :root[data-theme="dark"] .cve-finish-dialog h2 {
        color: #fcd34d;
      }

      :root[data-theme="dark"] .cve-finish-dialog p {
        color: #dbe7f6;
      }

      :root[data-theme="dark"] .cve-finish-close {
        border-color: #4b6280;
        background: #21344b;
        color: #dbe7f6;
      }

      :root[data-theme="dark"] .cve-finish-close:hover {
        border-color: #8fb9ff;
        color: #fcd34d;
      }

      :root[data-theme="dark"] .cve-break-v {
        border-color: #4b6280;
        background: #1a2a3d;
        color: #eaf0fa;
      }

      :root[data-theme="dark"] .cve-result-box--ok {
        border-color: #4aa06f;
        background: #203b2d;
        color: #d9fbe7;
      }

      :root[data-theme="dark"] .cve-result-box--warn {
        border-color: #b56f6f;
        background: #452a2a;
        color: #ffe3e3;
      }

      :root[data-theme="dark"] .cve-mini-why {
        border-color: #4b6280;
        background: #1a2a3d;
        color: #dbe7f6;
      }

      :root[data-theme="dark"] input,
      :root[data-theme="dark"] select,
      :root[data-theme="dark"] textarea {
        background: #1a2a3d;
        border-color: #4b6280;
        color: #f8fafc;
      }

      :root[data-theme="dark"] input::placeholder,
      :root[data-theme="dark"] textarea::placeholder {
        color: #9fb2cb;
        opacity: 1;
      }

      :root[data-theme="dark"] .cve-result,
      :root[data-theme="dark"] .entry-card,
      :root[data-theme="dark"] .impact-card,
      :root[data-theme="dark"] .period-table td,
      :root[data-theme="dark"] .summary-panel,
      :root[data-theme="dark"] .heatmap-panel,
      :root[data-theme="dark"] .summary-row,
      :root[data-theme="dark"] .control-body,
      :root[data-theme="dark"] .control-type-body,
      :root[data-theme="dark"] .control-detail,
      :root[data-theme="dark"] .check-label,
      :root[data-theme="dark"] .chip-label,
      :root[data-theme="dark"] .chip-option,
      :root[data-theme="dark"] .level-chip,
      :root[data-theme="dark"] .tip-button,
      :root[data-theme="dark"] .tip-bubble,
      :root[data-theme="dark"] .legend span {
        background: #1f3045;
        border-color: #4b6280;
        color: #eaf0fa;
      }

      :root[data-theme="dark"] .legend span.risk-bajo {
        background: #eaf7f0;
        border-color: #c6edd6;
        color: #1f6c3d;
      }

      :root[data-theme="dark"] .legend span.risk-medio-bajo {
        background: #f3f7df;
        border-color: #d9e4a3;
        color: #4d5f16;
      }

      :root[data-theme="dark"] .legend span.risk-medio {
        background: #fff8dc;
        border-color: #f3da86;
        color: #8a6a00;
      }

      :root[data-theme="dark"] .legend span.risk-medio-alto {
        background: #ffefd9;
        border-color: #f5c58a;
        color: #8a4b00;
      }

      :root[data-theme="dark"] .legend span.risk-alto {
        background: #ffe2e2;
        border-color: #f4a5a5;
        color: #8f1f1f;
      }

      :root[data-theme="dark"] .control-note {
        background: #324a65;
        color: #f3f7fd;
        border: 1px solid #5f7ea3;
      }

      :root[data-theme="dark"] .pdf-preview-dialog {
        background: #1f3045;
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .pdf-preview-content {
        background: linear-gradient(120deg, #1a2638, #23354d);
        border-color: #4b6280;
      }

      :root[data-theme="dark"] .pdf-preview-cancel {
        background: #24384f;
        border-color: #4b6280;
        color: #eaf0fa;
      }

      :root[data-theme="dark"] .clear-button {
        background: #24384f;
        border-color: #4b6280;
        color: #eaf0fa;
      }

      :root[data-theme="dark"] .clear-button:hover {
        background: #2c4561;
        border-color: #7aa4d6;
      }

      :root[data-theme="dark"] .control-effective .control-body {
        background: #163728;
        border-color: #2d7a5a;
      }

      :root[data-theme="dark"] .control-partial .control-body {
        background: #443813;
        border-color: #9b7f22;
      }

      :root[data-theme="dark"] .control-weak .control-body {
        background: #452525;
        border-color: #b65a5a;
      }

      :root[data-theme="dark"] .chip-preventive .chip-label {
        background: #28405d;
        border-color: #5d86b5;
        color: #eaf2ff;
      }

      :root[data-theme="dark"] .chip-detective .chip-label {
        background: #23463d;
        border-color: #4c9a7f;
        color: #e8fff6;
      }

      :root[data-theme="dark"] .chip-corrective .chip-label {
        background: #4a3921;
        border-color: #c99845;
        color: #fff5df;
      }

      :root[data-theme="dark"] .chip-dissuasive .chip-label {
        background: #3a3052;
        border-color: #8d76ba;
        color: #f2ecff;
      }

      :root[data-theme="dark"] .chip-effective .chip-label {
        background: #1b4731;
        border-color: #3e9f73;
        color: #e7fff4;
      }

      :root[data-theme="dark"] .chip-partial .chip-label {
        background: #56461a;
        border-color: #caa547;
        color: #fff5da;
      }

      :root[data-theme="dark"] .chip-weak .chip-label {
        background: #5a2c2c;
        border-color: #c86d6d;
        color: #ffecec;
      }

      :root[data-theme="dark"] .chip-badge {
        background: rgba(15, 23, 42, 0.55);
        border-color: #7b97b8;
        color: #e9f1ff;
      }

      :root[data-theme="dark"] .chip input:checked + .chip-label {
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
        transform: translateY(-1px);
      }

      :root[data-theme="dark"] .chip input:checked + .chip-label .chip-badge {
        border-color: rgba(255, 255, 255, 0.28);
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
      }

      :root[data-theme="dark"] .chip-effective input:checked + .chip-label {
        background: #1f7a4d;
        border-color: #3be69c;
        color: #f3fff8;
      }

      :root[data-theme="dark"] .chip-partial input:checked + .chip-label {
        background: #8f6a1a;
        border-color: #ffd26b;
        color: #fff9e9;
      }

      :root[data-theme="dark"] .chip-weak input:checked + .chip-label {
        background: #933535;
        border-color: #ff9a9a;
        color: #fff3f3;
      }

      :root[data-theme="dark"] .chip-preventive input:checked + .chip-label {
        background: #2f5f97;
        border-color: #8fb9ff;
        color: #f2f7ff;
      }

      :root[data-theme="dark"] .chip-detective input:checked + .chip-label {
        background: #246e54;
        border-color: #70d7ad;
        color: #f0fff9;
      }

      :root[data-theme="dark"] .chip-corrective input:checked + .chip-label {
        background: #9a6b21;
        border-color: #ffd083;
        color: #fff8eb;
      }

      :root[data-theme="dark"] .chip-dissuasive input:checked + .chip-label {
        background: #5a468d;
        border-color: #b39bf2;
        color: #f8f4ff;
      }

      :root[data-theme="dark"] .control-detail-title {
        color: #fcd34d;
      }

      :root[data-theme="dark"] .control-detail-body {
        color: #f3f6fb;
      }

      :root[data-theme="dark"] .icon-button {
        background: #22344a;
        border-color: #4b6280;
        color: #fcd34d;
      }

      :root[data-theme="dark"] .icon-button:hover {
        background: #2b3f58;
      }

      :root[data-theme="dark"] .impact-selected,
      :root[data-theme="dark"] .period-empty,
      :root[data-theme="dark"] .summary-impact-values {
        color: #c1d2ea;
      }

      :root[data-theme="dark"] .level-chip.level-1,
      :root[data-theme="dark"] .impact-level.level-1,
      :root[data-theme="dark"] .summary-table .level-cell.level-1 {
        background: #143c2d;
        border-color: #2d7a5a;
        color: #c9ffe2;
      }

      :root[data-theme="dark"] .level-chip.level-2,
      :root[data-theme="dark"] .impact-level.level-2,
      :root[data-theme="dark"] .summary-table .level-cell.level-2 {
        background: #453a12;
        border-color: #9b7f22;
        color: #fff2c2;
      }

      :root[data-theme="dark"] .level-chip.level-3,
      :root[data-theme="dark"] .impact-level.level-3,
      :root[data-theme="dark"] .summary-table .level-cell.level-3 {
        background: #4a2f1b;
        border-color: #a8672b;
        color: #ffdcb8;
      }

      :root[data-theme="dark"] .level-chip.level-4,
      :root[data-theme="dark"] .impact-level.level-4,
      :root[data-theme="dark"] .summary-table .level-cell.level-4 {
        background: #4a2020;
        border-color: #b65a5a;
        color: #ffd0d0;
      }

      :root[data-theme="dark"] .framework-meta {
        border-color: #4b6280;
        background: #1a2a3d;
        color: #dbe7f6;
      }

      .muted {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
      }

      .framework-meta {
        margin: 0;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--accent-soft);
        padding: 10px 12px;
      }

      .hidden {
        display: none;
      }

      .guide-section {
        border: 1px dashed var(--line);
        border-radius: 16px;
        padding: 16px;
        background: linear-gradient(180deg, var(--card), var(--accent-soft));
      }

      .guide-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
      }

      .guide-header-row h2 {
        margin: 0;
      }

      .guide-start-btn {
        padding: 8px 14px;
        font-size: 12px;
      }

      .tour-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(24, 20, 16, 0.45);
        z-index: 2000;
      }

      .tour-popover {
        position: fixed;
        right: 18px;
        bottom: 18px;
        width: min(420px, calc(100vw - 24px));
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow);
        padding: 16px;
        z-index: 2001;
        display: grid;
        gap: 10px;
      }

      .tour-popover.hidden,
      .tour-backdrop.hidden {
        display: none !important;
      }

      .tour-step {
        font-size: 12px;
        font-weight: 600;
        color: var(--accent-dark);
        text-transform: uppercase;
        letter-spacing: 0.8px;
      }

      .tour-popover h3 {
        margin: 0;
        font-size: 18px;
      }

      .tour-popover p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
      }

      .tour-controls {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
      }

      .tour-btn {
        border-radius: 999px;
        border: 1px solid transparent;
        font-weight: 600;
        font-size: 13px;
        padding: 8px 14px;
        cursor: pointer;
      }

      .tour-btn-light {
        border-color: var(--line);
        background: var(--card);
        color: var(--ink);
      }

      .tour-btn-light:hover {
        border-color: var(--accent);
        color: var(--accent-dark);
      }

      .tour-btn-primary {
        border-color: var(--accent);
        background: var(--accent);
        color: #fff;
      }

      .tour-btn-primary:hover {
        border-color: var(--accent-dark);
        background: var(--accent-dark);
      }

      .tour-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }

      .tour-target-active {
        position: relative;
        z-index: 2002;
        outline: 3px solid var(--accent);
        outline-offset: 3px;
        border-radius: 10px;
        box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.15);
      }

      :root[data-theme="dark"] .guide-section {
        border-color: #4f6a89;
        background: linear-gradient(180deg, #1e2f44, #23374f);
      }

      :root[data-theme="dark"] .tour-backdrop {
        background: rgba(3, 7, 18, 0.65);
      }

      :root[data-theme="dark"] .tour-popover {
        background: #1c2b3f;
        border-color: #4f6a89;
        box-shadow: 0 24px 45px rgba(0, 0, 0, 0.5);
      }

      :root[data-theme="dark"] .tour-btn-light {
        background: #22344a;
        border-color: #5d86b5;
        color: #dbeafe;
      }

      @media (max-width: 640px) {
        .guide-header-row {
          flex-direction: column;
          align-items: flex-start;
        }

        .tour-popover {
          right: 12px;
          left: 12px;
          bottom: 12px;
          width: auto;
        }

        .tour-controls {
          justify-content: stretch;
        }

        .tour-btn {
          flex: 1 1 auto;
        }
      }

      @keyframes float-in {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (max-width: 960px) {
        .layout {
          grid-template-columns: 1fr;
        }

        .results-top {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 1100px) {
        .control-options {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .control-type-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 720px) {
        .control-options {
          grid-template-columns: 1fr;
        }

        .control-type-grid {
          grid-template-columns: 1fr;
        }
      }