/* ---- SIMULATOR-SPECIFIC CSS ---- */

    /* ---- SCENARIO LIST ---- */
    .scenario-list{ display: grid; gap: 12px; }

    .scenario-card{
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 20px;
      background: #fff;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .scenario-card:hover{
      border-color: var(--muted-light);
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      transform: translateY(-1px);
    }

    .scenario-card .sc-title{ font-size: var(--fs-lg); font-weight: 600; margin-bottom: 6px; }
    .scenario-card .sc-teaser{ font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
    .scenario-card .sc-diff{ display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-top: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
    .sc-diff.diff-easy{ background: #e8f5e9; color: #2e7d32; }
    .sc-diff.diff-middle{ background: #fff3e0; color: #e65100; }
    .sc-diff.diff-difficult, .sc-diff.diff-hard{ background: #fce4ec; color: #c62828; }

    .difficulty-filter{ display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
    .diff-btn{ padding: 8px 18px; border-radius: 20px; border: 2px solid var(--border); background: #fff; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; transition: all 0.2s; }
    .diff-btn:hover{ border-color: var(--muted); }
    .diff-btn.active{ background: var(--bg-dark); color: #fff; border-color: var(--bg-dark); }

    /* ---- STEP INDICATOR ---- */
    .step-bar{ display: flex; gap: 4px; margin-bottom: 24px; align-items: center; }
    .step-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--border); transition: background 0.3s; }
    .step-dot.done{ background: var(--score-high); }
    .step-dot.current{ background: var(--fg); }
    .step-line{ flex: 1; height: 2px; background: var(--border); }
    .step-label{ font-size: var(--fs-xs); color: var(--muted); margin-left: 8px; }

    /* ---- RESULT ---- */
    .result-summary{
      background: #fff; border: 1px solid var(--border);
      border-radius: var(--radius); padding: 24px; margin-bottom: 20px;
    }

    .result-row{
      display: flex; align-items: center; gap: 12px;
      padding: 10px 0; border-bottom: 1px solid var(--border-light);
    }
    .result-row:last-child{ border-bottom: none; }
    .result-step-label{ font-size: var(--fs-sm); color: var(--muted); font-weight: 500; min-width: 80px; }
    .result-choice{ flex: 1; font-size: var(--fs-md); font-weight: 600; }
    .result-pts{ font-size: var(--fs-lg); font-weight: 700; min-width: 40px; text-align: center; }
    .result-pts.s2{ color: var(--score-high); }
    .result-pts.s1{ color: var(--score-mid); }
    .result-pts.s0{ color: var(--score-low); }
    .result-pts.penalty{ color: #c62828; }

    .total-score{ text-align: center; padding: 24px; margin-bottom: 24px; }
    .total-score .big-score{ font-size: 64px; font-weight: 700; line-height: 1; }
    .total-score .score-max{ font-size: var(--fs-lg); color: var(--muted); font-weight: 400; }
    .total-score .score-label{ font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }

    .score-bar{ width: 100%; height: 8px; background: var(--border-light); border-radius: 4px; margin-top: 12px; overflow: hidden; }
    .score-bar-fill{ height: 100%; border-radius: 4px; transition: width 0.6s ease; }

    .result-actions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

    /* Solution reveal */
    .solution-toggle{
      display: flex; justify-content: center; margin: 20px 0 0;
    }
    .solution-toggle .btn{ font-size: var(--fs-sm); }

    .solution-panel{
      display: none;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      margin-top: 16px;
    }
    .solution-panel.open{ display: block; animation: slideIn 0.3s ease; }
    .solution-panel h3{ font-size: var(--fs-md); font-weight: 600; margin-bottom: 16px; }

    .sol-section{ margin-bottom: 16px; }
    .sol-section:last-child{ margin-bottom: 0; }
    .sol-section-title{
      font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.5px; color: var(--muted); margin-bottom: 8px;
    }

    .sol-item{
      padding: 8px 12px; border-radius: 6px; margin-bottom: 6px;
      font-size: var(--fs-sm); line-height: 1.5;
    }
    .sol-item:last-child{ margin-bottom: 0; }

    .sol-best{ background: rgba(22,163,74,0.06); border-left: 3px solid var(--score-high); }
    .sol-yours-ok{ background: rgba(22,163,74,0.04); border-left: 3px solid var(--score-high); }
    .sol-yours-partial{ background: rgba(202,138,4,0.06); border-left: 3px solid var(--score-mid); }
    .sol-yours-wrong{ background: rgba(161,161,170,0.06); border-left: 3px solid var(--score-low); }
    .sol-yours-penalty{ background: rgba(198,40,40,0.06); border-left: 3px solid #c62828; }

    .sol-label{
      font-size: var(--fs-xxs); font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.5px; margin-bottom: 2px;
    }
    .sol-label.best{ color: var(--score-high); }
    .sol-label.you{ color: var(--muted); }

    .sol-id{ font-weight: 600; }
    .sol-why{ color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }

    /* Notes */
    .notes-section{ margin: 20px 0; }
    .notes-section label{ display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; color: var(--muted); }
    .notes-section textarea{
      width: 100%; min-height: 80px; padding: 12px;
      border: 1px solid var(--border); border-radius: var(--radius);
      font: inherit; font-size: var(--fs-sm); line-height: 1.5;
      resize: vertical; background: #fff; color: var(--fg);
    }
    .notes-section textarea:focus{ outline: none; border-color: var(--muted-light); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
    .notes-section .notes-hint{ font-size: var(--fs-xxs); color: var(--muted-light); margin-top: 4px; }

    /* ---- LOG OVERLAY ---- */
    .log-overlay{
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.5); z-index: 2000;
      align-items: center; justify-content: center;
    }
    .log-overlay.active{ display: flex; }

    .log-panel{
      background: #fff; border-radius: 12px; padding: 24px;
      max-width: 700px; width: 90%; max-height: 80vh; overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    }
    .log-panel h2{ font-size: var(--fs-lg); margin-bottom: 16px; }

    .log-entry{
      border: 1px solid var(--border-light);
      border-radius: var(--radius);
      padding: 12px 16px;
      margin-bottom: 10px;
    }

    .log-entry-header{
      display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
    }

    .log-entry-title{ font-size: var(--fs-sm); font-weight: 600; }
    .log-entry-date{ font-size: var(--fs-xxs); color: var(--muted-light); }

    .log-entry-scores{
      display: flex; gap: 12px; font-size: var(--fs-xs); margin-bottom: 4px;
    }

    .log-entry-scores span{ color: var(--muted); }
    .log-entry-scores strong{ color: var(--fg); }

    .log-entry-note{
      font-size: var(--fs-xs); color: var(--muted); font-style: italic;
      line-height: 1.4; margin-top: 6px; padding-top: 6px;
      border-top: 1px solid var(--border-light);
    }