#pisi-app {
    max-width: 1100px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    color: #111;
}
h2 { margin-bottom: 18px; color:#2d7ef7; }
.toolbar { margin-bottom: 15px; }
.toolbar button { margin-right: 8px; padding: 8px 14px; cursor: pointer; }
.filters { display:flex; gap:10px; margin-bottom:15px; flex-wrap:wrap; align-items:flex-start; }
.filters input, .filters select { padding:8px; min-height:46px; box-sizing:border-box; }
#languageSelector, #subjectSelector, #gradeSelector { min-width: 188px; }
#topicFilter { min-width: 220px; }
#bankPathPreview { min-width: 240px; background:#f8f8f8; }

.quiz-count-wrap{
  display:flex;
  flex-direction:column;
  min-width:140px;
}
.quiz-count-hint{
  margin-top:6px;
  font-size:12px;
  color:#5f6f86;
  line-height:1.2;
}
.font-status { padding:10px 12px; border-radius:8px; margin-bottom:14px; font-size:14px; }
.font-status.ok { background:#e9f8ec; color:#1e6a31; border:1px solid #b7e1c2; }
.font-status.warn { background:#fff4e5; color:#8a5a00; border:1px solid #f3d19b; }
.meta-editor { border: 1px solid #ddd; padding: 15px; margin-bottom: 20px; background: #fafafa; }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.meta-field label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: bold; }
.meta-field input { width: 100%; padding: 8px; box-sizing: border-box; }
.meta-full { grid-column: 1 / -1; }
.meta-actions { margin-top: 12px; }
#questions-list { margin-top: 10px; }
.q-item { border-bottom: none; padding: 12px 0; }
.q-label { display: block; font-weight: bold; }
.q-label input { margin-right: 8px; }
.q-points-preview { margin: 8px 0 0 28px; font-size: 13px; color: #444; }
.quiz-meta-line { margin: 6px 0 0 28px; font-size: 13px; color: #34506f; }
.q-meta-preview { margin: 6px 0 0 28px; font-size: 12px; color: #666; }
.list-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; margin-left: 28px; margin-top: 10px; }
.actions { margin-top: 20px; }
.actions button { margin-right: 8px; padding: 10px 16px; cursor: pointer; margin-bottom:6px; }
#test-output { margin-top: 30px; background: #fff; clear:both; width:100%; display:block; }
.print-sheet { background: #fff; box-sizing: border-box; position: relative; min-height: 1120px; }
.repeating-header { position: fixed; top: 0; left: 0; right: 0; padding: 16mm 14mm 0 14mm; background: #fff; }
.repeating-header-row { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 18px; }
.repeating-title { font-size: 18px; margin-bottom: 8px; }
.repeating-variant { font-size: 17px; font-weight: bold; margin-bottom: 10px; }
.repeating-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 0 14mm 10mm 14mm; display: flex; justify-content: space-between; font-size: 12px; background: #fff; }
.sheet-content { padding: 52mm 14mm 24mm 14mm; font-size: 11pt; line-height: 1.4; }
.question { margin-bottom: 18px; page-break-inside: avoid; break-inside: avoid; }
.question-top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.question-line { font-size: 11pt; flex: 1; font-weight: bold; }
.question-points { min-width: 150px; text-align: right; font-size: 10pt; white-space: nowrap; }
.qnum { display: inline-block; min-width: auto; width: auto; height: auto; padding: 0; border: none; border-radius: 0; font-size: 10pt; margin-right: 6px; vertical-align: baseline; box-sizing: border-box; white-space: nowrap; font-weight: bold; }
.options-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; row-gap: 6px; margin-left: 40px; margin-top: 8px; }
.answer-lines { margin-top: 8px; }
.answer-lines::before, .answer-lines::after { content:""; display:block; border-bottom:1px solid #000; margin-top:12px; }
.key-separator { margin: 20px 0; border:none; border-top:1px solid #bbb; }
.page-break { page-break-before: always; break-before: page; }
.answer-header-once { padding: 16mm 14mm 8mm 14mm; }
.answer-key-title { font-size: 12pt; font-weight: bold; }
.answer-footer-once { padding: 0 14mm 10mm 14mm; display: flex; justify-content: space-between; font-size: 12px; margin-top: 24px; }
.answer-content { padding: 6mm 14mm 14mm 14mm; font-size: 11pt; line-height: 1.4; }
.answer-key-sheet h3 { margin-top: 18px; margin-bottom: 8px; }
.answer-key-list { padding-left: 24px; }
@page { size:A4; margin:0; }

@media screen {
  .repeating-header, .repeating-footer, .answer-header-once, .answer-footer-once { position: static !important; background: transparent !important; }
  .print-sheet { min-height: auto !important; margin: 28px auto 20px auto !important; border: 1px solid #ddd; padding-bottom: 16mm; max-width: 210mm; }
  .sheet-content { padding: 10mm 14mm 10mm 14mm !important; }
  .answer-content { padding-top: 8mm !important; }
}

@media print {
  header, nav, footer, .toolbar, .filters, .font-status, .meta-editor, #questions-list, .actions, h2 { display:none !important; }
  body { background:#fff; }
  #pisi-app { max-width:none; margin:0; }
}

.field-label-row{
  display:flex;
  gap:14px;
  margin-bottom:6px;
  color:#8a8a8a;
  font-size:12px;
  line-height:1;
  padding-left:0;
}
.field-label-row span:nth-child(1){ width:170px; }
.field-label-row span:nth-child(2){ width:170px; }
.field-label-row span:nth-child(3){ width:170px; }
.field-label-row span:nth-child(4){ flex:1; }
.field-label{ display:inline-block; }
.selection-stats{
  color:#7b7b7b;
  font-size:12px;
  margin:8px 0 16px 0;
}
#difficultyFilter, #typeFilter, #topicFilter, #subjectSelector, #gradeSelector, #languageSelector{
  appearance:auto;
  -webkit-appearance:menulist;
  background-image:none;
}

.selection-progress-wrap{
  margin: 8px 0 18px 0;
  max-width: 430px;
}
.selection-progress-labels{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#7b7b7b;
  margin-bottom:5px;
}
.selection-progress-track{
  width:100%;
  height:12px;
  background:#e9edf3;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #d5dce6;
}
.selection-progress-bar{
  height:100%;
  width:0%;
  background:#2f6fb2;
  border-radius:999px;
  transition:width .18s ease;
}

.print-module-disabled .print-module-shell{display:none !important;}
.print-module-enabled #selectionProgressWrap{display:block !important;}
.print-module-enabled .actions.print-actions{display:block !important;}
.print-module-enabled #test-output{display:block !important;}
.quiz-actions { margin-top: 16px; }
.quiz-summary {
  margin: 16px 0 12px 0;
  padding: 12px 14px;
  border: 1px solid #cfe0ff;
  background: #f5f9ff;
  border-radius: 8px;
  font-size: 15px;
}
#quiz-area { margin: 10px 0 24px 0; }
.quiz-question {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 14px;
  margin: 12px 0;
  background: #fff;
}
.quiz-q-title { font-weight: bold; font-size: 20px; margin-bottom: 10px; }
.quiz-option {
  display:flex; align-items:center; gap:10px; margin:8px 0; padding:8px 10px; border-radius:8px; cursor:pointer;
}
.quiz-option.correct { background:#eaf8ee; border:1px solid #bde2c5; }
.quiz-option.wrong { background:#fff0f0; border:1px solid #efc0c0; }
.quiz-mark { min-width:22px; font-weight:bold; }
.quiz-mark.ok { color:#188038; }
.quiz-mark.bad { color:#c5221f; }
.quiz-open-note { color:#666; font-size:13px; margin-top:8px; }

.quiz-bottom-actions{
  margin: 18px 0 10px 0;
}
.bottom-actions{
  justify-content:flex-start;
}

.topic-filter-box{
  min-width:220px;
  max-height:170px;
  overflow:auto;
  border:1px solid #cfd7e3;
  background:#fff;
  border-radius:6px;
  padding:8px 10px;
  box-sizing:border-box;
}
.topic-filter-item{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px 0;
  font-size:14px;
  line-height:1.2;
  cursor:pointer;
}
.topic-filter-item:last-child{ margin-bottom:0; }
.topic-filter-item input{ margin:0; }


.review-row {
  margin: 10px 0 8px 0;
  text-align: left;
}

.primary-btn {
  font-size: 15px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #2d7ef7, #1a5fd0);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.2);
}

.selection-stats{
  color:#334155;
  font-size:13.5px;
  margin:10px 0 14px 0;
  padding:8px 12px;
  background:#f5f7fa;
  border-radius:6px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.selection-stats .stats-item{
  background:#fff;
  padding:4px 8px;
  border-radius:4px;
}

.selection-stats b{
  color:#1a5fd0;
}

.quiz-explanation {
  margin-top: 10px;
  padding: 10px 12px;
  background: #eef6ff;
  border-left: 4px solid #2d7ef7;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #1f2937;
}


.review-help {
  margin-top: 8px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 500;
}

.font-status{ display:none !important; }


.quiz-open-wrap { margin-top: 10px; }
.quiz-open-input {
  width: min(420px, 100%);
  padding: 10px 12px;
  border: 1px solid #cfd7e3;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
  background: #fff;
}
.quiz-open-input:focus {
  outline: none;
  border-color: #2d7ef7;
  box-shadow: 0 0 0 3px rgba(45,126,247,0.12);
}


.print-module-shell{ margin: 18px 0 24px 0; }
.top-print-actions{ margin-top: 6px; }
.checkbox-field{ display:flex; align-items:center; gap:10px; }
.checkbox-field label{ margin:0; }
.checkbox-field input{ width:auto; }
.actions.print-actions button,
.actions.quiz-actions button{
  font-size:15px;
  padding:10px 16px;
  background:#2f6fb2;
  color:#fff;
  border:none;
  border-radius:4px;
}
.actions.print-actions button:hover,
.actions.quiz-actions button:hover,
.meta-actions button:hover{ opacity:.92; }
.answer-key-item{ margin-bottom: 10px; }
.review-help{ margin-top:10px; color:#475569; }


.topic-filter-empty{padding:8px 10px;font-size:13px;color:#666;}
.empty-state.bank-error{padding:12px 14px;border:1px solid #e3b7b7;background:#fff5f5;color:#8a1f1f;border-radius:6px;}
.bank-error-detail{margin-top:6px;font-size:12px;opacity:.85;word-break:break-word;}


.print-jump-wrap{ margin:18px 0 8px 0; }
.print-jump-btn{ font-size:15px; padding:10px 16px; background:#2f6fb2; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.print-jump-help{ margin-top:8px; color:#5f6f86; font-size:13px; }
.print-module-bottom{ margin-top:28px; padding-top:8px; border-top:1px solid #d8e0ea; }
.print-module-title{ margin:0 0 8px 0; color:#173a67; font-size:26px; }
.print-module-note{ margin:0 0 12px 0; color:#5f6f86; font-size:13px; }
.print-success-message{ margin:0 0 12px 0; padding:10px 12px; border:1px solid #cfe0ff; background:#f5f9ff; color:#244d7c; border-radius:8px; }


/* V5.8.5.1 clean number rendering */
.qnum{all:unset !important;font-weight:700 !important;margin-right:6px !important;}
.question-line strong{display:inline !important;font-weight:700;}

/* V5.8.5.2 final hard remove of old number circles */
.question-line, .answer-key-item { font-size: 11pt; }
.question-line strong, .answer-key-item strong:first-child, .qnum, .question-number { all: unset !important; }
.question-line::before, .answer-key-item::before { content: none !important; }
.question-line span, .answer-key-item span { border:none !important; border-radius:0 !important; box-shadow:none !important; }

.language-hidden-wrap{display:none !important;}
.compact-top-row .lang-placeholder{display:none; width:0 !important;}
.field-label-row.compact-top-row{gap:10px;}
.field-label-row.compact-top-row span:nth-child(1){width:0 !important;}
.field-label-row.compact-top-row span:nth-child(2),
.field-label-row.compact-top-row span:nth-child(3){width:188px;}
.quiz-actions-top{margin: 6px 0 10px 0;}
.quiz-actions-top button{font-weight:600;}
.quiz-option.selected{outline:1px dashed #8fb3e8;}

.smart-tools-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:10px 0 14px;}
.smart-toggle{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#234;}
.smart-toggle input{transform:scale(1.1);}