/* Minimal, clean, responsive */
.jlpt-practice-wrapper { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.jp-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.jp-header h2 { margin: 0 0 4px 0; font-size: 1.25rem; }
.badge { background: #111827; color: #fff; padding: 2px 8px; border-radius: 999px; font-size: .85rem; }
.chip { background: #f3f4f6; color: #111827; padding: 2px 8px; border-radius: 999px; font-size: .85rem; margin-left: 6px; }
.jp-controls { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.jp-controls label { display: grid; gap: 4px; font-size: .9rem; color: #374151; }
.jp-controls input[type="number"], .jp-controls select { padding: 6px 10px; border-radius: 10px; border: 1px solid #d1d5db; min-width: 90px; }
.jp-controls .jp-generate { background: #111827; color: #fff; border: 0; padding: 10px 14px; border-radius: 12px; cursor: pointer; }
.jp-controls .jp-generate:hover { filter: brightness(1.05); }

.jp-stream { margin-top: 12px; border: 1px dashed #e5e7eb; border-radius: 12px; padding: 10px; background: #fafafa; }
.jp-stream-label { font-size:.85rem; color: #6b7280; margin-bottom: 6px; }
.jp-stream-box { margin:0; white-space: pre-wrap; max-height: 180px; overflow: auto; font-size: .85rem; color: #111827; }

.jp-quiz { margin-top: 16px; }
.jp-questions { display: grid; gap: 12px; padding-left: 20px; }
.jp-question { background: #ffffff; border: 1px solid #f3f4f6; border-radius: 12px; padding: 12px; }
.jp-prompt { font-weight: 600; margin-bottom: 8px; }
.jp-options { display: grid; gap: 6px; }
.jp-option { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; border: 1px solid #e5e7eb; }
.jp-option input { transform: translateY(1px); }
.jp-submit { margin-top: 12px; background: #2563eb; color: #fff; border: 0; padding: 10px 14px; border-radius: 12px; cursor: pointer; }
.jp-submit:hover { filter: brightness(1.05); }

.jp-results { margin-top: 16px; border-top: 1px solid #e5e7eb; padding-top: 12px; }
.jp-score { font-weight: 700; margin-bottom: 10px; }
.jp-detail { display: grid; gap: 8px; }
.jp-detail-row { display: grid; gap: 8px; grid-template-columns: 1fr 1fr 1fr; background: #f9fafb; border:1px solid #eef2f7; border-radius: 10px; padding: 10px; }
.jp-detail-row.ok { border-color: #bbf7d0; background: #f0fdf4; }
.jp-detail-row.bad { border-color: #fecaca; background: #fef2f2; }
.jp-detail-q { font-weight: 600; }
.jp-detail-exp { grid-column: 1 / -1; color:#374151; font-size:.9rem; }

.hidden { display: none !important; }

@media (max-width: 640px){
  .jp-detail-row{ grid-template-columns: 1fr; }
}


/* Loader UI */
.jp-loader { display:flex; align-items:center; gap:10px; padding:12px; border:1px dashed #e5e7eb; border-radius:12px; background:#fafafa; }
.jp-spinner { width:16px; height:16px; border-radius:50%; border:3px solid rgba(0,0,0,.1); border-top-color:#111827; animation: jp-spin 0.8s linear infinite; }
.jp-loading-text { font-size:.95rem; color:#374151; }

@keyframes jp-spin { to { transform: rotate(360deg); } }