/* so.css */

.so-card {
      background: var(--card-bg, #fff);
      border-radius: 12px;
      padding: 32px;
      max-width: 680px;
      margin: 32px auto;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    .so-card h2 { margin: 0 0 6px; font-size: 1.4rem; }
    .so-card .subtitle { color: #666; margin-bottom: 24px; font-size: 0.9rem; }
    .upload-area {
      border: 2px dashed #c0cfe0;
      border-radius: 10px;
      padding: 40px 24px;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      margin-bottom: 20px;
    }
    .upload-area:hover, .upload-area.drag-over {
      border-color: #3b7dd8;
      background: #f0f6ff;
    }
    .upload-area .icon { font-size: 2.5rem; margin-bottom: 10px; }
    .upload-area p { margin: 4px 0; color: #555; }
    .upload-area .hint { font-size: 0.8rem; color: #999; }
    .upload-area .file-name { font-weight: 600; color: #2d6bc4; margin-top: 8px; }
    #fileInput { display: none; }
    .run-btn {
      width: 100%;
      padding: 14px;
      background: #2d6bc4;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }
    .run-btn:hover:not(:disabled) { background: #1a56a8; }
    .run-btn:disabled { background: #aac4e8; cursor: not-allowed; }
    .status-box {
      margin-top: 20px;
      padding: 14px 18px;
      border-radius: 8px;
      font-size: 0.92rem;
      display: none;
    }
    .status-box.info    { background: #e8f0fe; color: #1a56a8; border-left: 4px solid #3b7dd8; }
    .status-box.success { background: #e6f4ea; color: #1e6e3a; border-left: 4px solid #34a853; }
    .status-box.error   { background: #fce8e6; color: #c5221f; border-left: 4px solid #d93025; }
    .progress-bar-wrap {
      height: 6px;
      background: #dde5f0;
      border-radius: 4px;
      margin-top: 12px;
      overflow: hidden;
      display: none;
    }
    .progress-bar {
      height: 100%;
      background: #3b7dd8;
      border-radius: 4px;
      width: 0%;
      transition: width 0.4s;
      animation: progress-pulse 1.5s infinite;
    }
    @keyframes progress-pulse {
      0%,100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
    .download-btn {
      display: none;
      width: 100%;
      padding: 13px;
      background: #1e7e34;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      margin-top: 12px;
      transition: background 0.2s;
    }
    .download-btn:hover { background: #155724; }
    .section-badge {
      display: inline-block;
      background: #e8f0fe;
      color: #1a56a8;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      margin-bottom: 14px;
      letter-spacing: 0.5px;
    }
    .rules-list {
      background: #f8f9fc;
      border-radius: 8px;
      padding: 14px 18px;
      margin-top: 22px;
      font-size: 0.85rem;
      color: #555;
    }
    .rules-list strong { color: #333; display: block; margin-bottom: 6px; }
    .rules-list li { margin: 4px 0; }