/* Layout wrappers (avoid using .container to not clash with site layout) */
    .q-wrap { max-width: 1120px; margin: 0 auto; padding: 28px 20px 50px; }
    .q-topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin: 14px 0 18px; }
    .q-back {
      display:inline-flex; align-items:center; gap:10px;
      padding: 10px 14px; border-radius: 999px;
      border: 1px solid var(--border); background: rgba(15,23,42,.03);
      color: var(--muted); text-decoration:none;
    }
    .q-back:hover { background: rgba(15,23,42,.06); color: var(--text); text-decoration:none; }

    .q-header {
      background: radial-gradient(420px 220px at 10% 0%, rgba(59,130,246,.12), rgba(59,130,246,0) 55%), #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      padding: 26px;
      margin-bottom: 18px;
    }
    .q-header h1 { margin:0 0 6px; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }
    .q-subtitle { color: var(--muted); margin:0; }

    .info-box {
      background: rgba(59,130,246,.10);
      border: 1px solid rgba(59,130,246,.18);
      border-left: 4px solid rgba(59,130,246,.65);
      border-radius: 14px;
      padding: 16px;
      margin-bottom: 18px;
    }

    .scenario-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      padding: 22px;
    }

    .navigation { display:grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .scenario-btn {
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: #fff;
      box-shadow: var(--shadow2);
      text-align:center;
      transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
    }
    .scenario-btn:hover { background: rgba(15,23,42,.03); transform: translateY(-2px); box-shadow: var(--shadow); }
    .scenario-btn-title { font-weight: 800; color: var(--muted); font-size: .9rem; margin-bottom: 10px; }

    .play-btn {
      background: linear-gradient(135deg, var(--primary), var(--primary2));
      color:#fff;
      padding: 9px 18px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.55);
      font-weight: 800;
      cursor:pointer;
    }
    .play-btn:hover { filter: brightness(1.05); }

    /* Modal */
    .modal { display:none; position:fixed; z-index:1000; inset:0; background: rgba(0,0,0,.6); animation: fadeIn .25s; }
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }

    .modal-content {
      background:#fff;
      margin: 24px auto;
      padding: 22px;
      border-radius: var(--radius);
      max-width: 1100px;
      max-height: 90vh;
      overflow:auto;
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 22px 70px rgba(0,0,0,.35);
      animation: slideIn .25s;
    }
    @keyframes slideIn { from{opacity:0; transform: translateY(-20px)} to{opacity:1; transform: translateY(0)} }

    .modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
    .modal-title { margin:0; font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; }
    .close-btn {
      width: 44px; height: 44px; border-radius: 14px;
      background: rgba(15,23,42,.04);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 1.5rem;
      cursor:pointer;
      line-height: 1;
    }
    .close-btn:hover { background: rgba(15,23,42,.08); color: var(--text); }

    /* Table + level badges */
    .nfr-compact-table {
      width:100%;
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow:hidden;
      background:#fff;
      font-size:.85rem;
    }
    .nfr-compact-table thead { background: rgba(15,23,42,.03); }
    .nfr-compact-table th { padding: 10px 8px; font-weight: 800; color: var(--muted); font-size: .75rem; border-bottom: 1px solid var(--border); }
    .nfr-compact-table td { padding: 8px; border-bottom: 1px solid rgba(15,23,42,.06); }
    .nfr-compact-table tr:last-child td { border-bottom: none; }
    .nfr-compact-table tr:hover { background: rgba(15,23,42,.02); }

    .nfr-level { display:inline-block; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; border: 1px solid rgba(15,23,42,.10); }
    .level-low { background: rgba(34,197,94,.14); color:#0f5132; }
    .level-nominal { background: rgba(245,158,11,.16); color:#7a4a00; }
    .level-high { background: rgba(239,68,68,.14); color:#7f1d1d; }
    .level-very-high { background: rgba(100,116,139,.18); color:#0b1220; }

    /* Step blocks used inside the modal */
    .calculator-section { background: rgba(15,23,42,.03); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-top: 16px; }
    .calc-title { margin:0 0 12px; font-weight: 900; letter-spacing: -0.02em; }
    .calc-input-group { background:#fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
    .calc-input-group label { display:block; font-size:.8rem; color: var(--muted); margin-bottom: 8px; font-weight: 700; }
    .calc-input-group input {
      width:100%; padding: 10px; border: 1px solid var(--border); border-radius: 12px;
      font-size: 1.05rem; font-weight: 800; text-align:center;
    }
    .calc-input-group input:focus { outline:none; border-color: rgba(59,130,246,.55); box-shadow: 0 0 0 4px rgba(59,130,246,.18); }

    .calc-formula { background:#fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin: 14px 0; text-align:center; color: var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; font-size:.85rem;
    }

    .total-display {
      background: radial-gradient(220px 140px at 25% 10%, rgba(59,130,246,.28), rgba(59,130,246,0) 60%),
                  linear-gradient(135deg, var(--primary), var(--primary2));
      color:#fff; border-radius: 18px; padding: 18px; text-align:center; border: 1px solid rgba(255,255,255,.12);
    }
    .total-label { font-size:.82rem; opacity:.9; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
    .total-value { font-size: 3rem; font-weight: 900; letter-spacing: -0.04em; }

    .graph-container { position: relative; max-width: 700px; margin: 0 auto; }
    .graph-container img { width:100%; display:block; border-radius: 14px; border: 1px solid var(--border); }
    .range-overlay { position:absolute; inset:0; cursor:pointer; border-radius: 14px; }
    .range-zone { position:absolute; width:100%; transition: background .2s, outline .2s; border-radius: 12px; }
    .range-zone:hover { background: rgba(59,130,246,.12); }
    .range-zone.selected { background: rgba(59,130,246,.22); outline: 3px solid rgba(59,130,246,.65); outline-offset: -3px; }

    .ranges-legend { background:#fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-top: 16px; }
    .ranges-legend h3 { margin:0 0 12px; font-size: 1rem; font-weight: 900; letter-spacing: -0.02em; }
    .range-item {
      display:flex; align-items:center; gap:12px;
      padding: 10px 12px; margin-bottom: 8px;
      border-radius: 14px;
      background: rgba(15,23,42,.03);
      border: 1px solid rgba(15,23,42,.06);
      cursor:pointer;
    }
    .range-item:hover { background: rgba(15,23,42,.06); }
    .range-item.selected { background: rgba(59,130,246,.10); border-left: 4px solid rgba(59,130,246,.65); }
    .range-letter { font-weight: 900; min-width: 90px; color: var(--muted); }

    /* Replace the current "question-box" and "action-note" look with a cleaner, premium card style */

    /* Shared base */
    .question-box,
    .action-note{
    border-radius: 18px;
    padding: 18px 18px;
    border: 1px solid rgba(15,23,42,.12);
    box-shadow: var(--shadow2);
    }

    /* Question box: success / selection */
    .question-box{
    background:
        radial-gradient(260px 160px at 10% 10%, rgba(34,197,94,.22), rgba(34,197,94,0) 55%),
        rgba(34,197,94,.08);
    border-left: none; /* remove the old left bar look */
    }
    .question-box strong{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #0f5132;
    margin-bottom: 8px;
    }
    .question-box strong::before{
    content: "✓";
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(34,197,94,.18);
    border: 1px solid rgba(34,197,94,.25);
    }

    /* Action note: info / next step */
    .action-note{
    background:
        radial-gradient(260px 160px at 10% 10%, rgba(59,130,246,.22), rgba(59,130,246,0) 55%),
        rgba(59,130,246,.08);
    border-left: none; /* remove the old left bar look */
    }
    .action-note strong{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #1e3a8a;
    margin-bottom: 8px;
    }
    .action-note strong::before{
    content: "→";
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59,130,246,.18);
    border: 1px solid rgba(59,130,246,.25);
    }

    /* Optional: tighten paragraph spacing inside both blocks */
    .question-box p,
    .action-note p{
    margin: 0;
    color: var(--muted);
    }


    .modal-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); display:flex; justify-content:space-between; gap: 12px; flex-wrap: wrap; }

    @media (max-width: 768px) { .navigation { grid-template-columns: repeat(2, 1fr); } .modal-content { margin: 16px; padding: 16px; } }