* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; color: #111; background: #f7f7f7; }
.start-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.start-card { width: min(520px, 100%); background: #fff; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: 32px; display: grid; gap: 14px; }
.start-card input, .text-input, .text-area { width: 100%; padding: 12px; border: 1px solid #bbb; border-radius: 8px; font-size: 16px; }
button, .button { padding: 10px 16px; border: 0; border-radius: 8px; background: #e6e6e6; cursor: pointer; font-weight: 700; }
button.primary { background: #1667a6; color: white; }
button:disabled { opacity: .45; cursor: not-allowed; }
.error { background: #ffdada; color: #8a0000; padding: 10px; border-radius: 8px; }
.test-page { height: 100vh; display: grid; grid-template-rows: 56px 1fr 56px; background: #fff; }
.test-form { display: contents; }
.test-header, .test-footer { background: #e9f3f8; border-color: #c9dce8; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; z-index: 20; }
.test-header { position: sticky; top: 0; border-bottom: 1px solid #c9dce8; }
.test-footer { position: sticky; bottom: 0; border-top: 1px solid #c9dce8; }
.test-body { overflow: hidden; }
.single-layout { display: grid; grid-template-columns: var(--single-left, 10%) var(--single-content, 70%) var(--single-right, 20%); }
.two-column-layout { display: grid; grid-template-columns: var(--stimulus-width, 60%) var(--question-width, 40%); }
.single-question-panel, .intro-panel, .stimulus-panel, .question-panel { height: 100%; overflow: auto; padding: 22px; min-width: 0; }
.single-question-panel, .intro-panel { grid-column: 2; }
.stimulus-panel { border-right: 1px solid #ddd; }
.question-text { font-size: 18px; line-height: 1.5; margin: 12px 0 24px; }
.answer-box { display: grid; gap: 12px; }
.option { display: block; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; line-height: 1.45; }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid #ccc; padding: 10px; text-align: left; }
th { background: #eef4f7; }
.result-page { max-width: 1100px; margin: 0 auto; padding: 24px; }
.result-header, .result-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.08); padding: 22px; margin-bottom: 18px; }
.side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.side-box, .interaction-box { border: 1px solid #ddd; border-radius: 10px; padding: 14px; background: #fafafa; overflow: auto; }
pre { white-space: pre-wrap; word-break: break-word; }
.interactive-control, .simulation-panel { border: 1px solid #b9d4e9; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: #f9fcff; }
.slider-row { display: grid; grid-template-columns: 240px 1fr 60px; gap: 12px; align-items: center; margin: 12px 0; }
.delete-row { background: #d9534f; color: white; }
.drag-zones { display: grid; gap: 12px; }
.drag-item, .drop-zone { border: 1px solid #bbb; border-radius: 8px; padding: 10px; margin: 6px 0; background: #f8f8f8; }
.drop-zone { min-height: 50px; background: #eef8ff; }
@media (max-width: 900px) { .two-column-layout { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .side-by-side { grid-template-columns: 1fr; } }

/* Custom Admin Panel */
.panel-body { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; background: #f3f6f8; }
.panel-sidebar { background: #0f2f44; color: #fff; padding: 22px 16px; position: sticky; top: 0; height: 100vh; }
.panel-brand { font-size: 20px; font-weight: 800; margin-bottom: 24px; }
.panel-nav { display: grid; gap: 8px; }
.panel-nav a { color: #fff; text-decoration: none; padding: 11px 12px; border-radius: 10px; background: rgba(255,255,255,.08); }
.panel-nav a:hover { background: rgba(255,255,255,.18); }
.panel-main { padding: 26px; overflow: auto; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.panel-header h1 { margin: 0 0 6px; }
.panel-header p { margin: 0; color: #506575; }
.panel-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 16px; margin-bottom: 18px; }
.stat-card, .panel-card { background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.07); padding: 20px; }
.stat-card strong { display: block; font-size: 32px; margin-bottom: 4px; }
.stat-card span { color: #506575; }
.panel-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.simple-list { padding-left: 18px; line-height: 1.8; }
.simple-list small { color: #697b88; margin-left: 8px; }
.panel-table { width: 100%; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.07); }
.panel-table th { background: #dcecf4; }
.actions-cell { display: flex; gap: 8px; flex-wrap: wrap; }
.actions-cell a { text-decoration: none; color: #1667a6; font-weight: 700; }
.form-card { max-width: 960px; }
.form-row { display: grid; gap: 7px; margin-bottom: 16px; }
.form-row label { font-weight: 700; }
.form-row small { color: #607383; }
.form-control, .json-textarea, .form-row select, .form-row input[type="text"], .form-row input[type="number"], .form-row textarea { width: 100%; padding: 11px; border: 1px solid #b8c4cc; border-radius: 9px; font-size: 15px; background: #fff; }
.json-textarea { font-family: Consolas, Monaco, monospace; line-height: 1.45; }
.field-error { color: #9d1c1c; font-weight: 700; }
.has-error .form-control, .has-error .json-textarea { border-color: #c0392b; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.button.primary, a.button.primary { background: #1667a6; color: #fff; }
.button, a.button { display: inline-block; text-decoration: none; }
button.danger { background: #c0392b; color: white; }
.messages { margin-bottom: 16px; }
.message { padding: 12px 14px; border-radius: 9px; background: #e7f7ea; color: #1b6f2a; font-weight: 700; }
.help-card { margin-top: 18px; max-width: 960px; }
.help-card pre { background: #f4f7f9; border: 1px solid #d8e2e8; border-radius: 10px; padding: 14px; }
.confirm-card { max-width: 600px; }
@media (max-width: 900px) {
  .panel-body { grid-template-columns: 1fr; }
  .panel-sidebar { height: auto; position: static; }
  .stat-grid, .panel-grid-2 { grid-template-columns: 1fr; }
  .panel-header { display: grid; }
}

/* v0.1.2 - slider step labels and header sorting */
.slider-block { margin: 12px 0 20px; }
.slider-ticks {
  margin-left: 252px;
  width: calc(100% - 324px);
  display: flex;
  justify-content: space-between;
  gap: 4px;
  color: #666;
  font-size: 13px;
  line-height: 1.2;
}
.slider-ticks span { position: relative; min-width: 28px; text-align: center; }
.slider-ticks span::before {
  content: "";
  display: block;
  width: 1px;
  height: 7px;
  background: #777;
  margin: 0 auto 4px;
}
.sortable-th { padding: 0; }
.sort-header-btn {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-weight: 800;
  text-align: left;
}
.sort-header-btn:hover { background: #dcecf4; }
.sort-indicator { font-size: 13px; color: #4c6474; }
.table-help { margin: 10px 0 0; color: #5a6c78; font-size: 14px; }
@media (max-width: 900px) {
  .slider-ticks { margin-left: 0; width: 100%; }
}


/* v0.1.3 result close button */
.result-footer-actions {
  margin-top: 32px;
  padding: 24px 0;
  text-align: center;
  border-top: 1px solid #d8e1ea;
}
.btn-close-result {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 10px;
  background: #1f6fae;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.btn-close-result:hover {
  background: #155986;
}

/* v0.1.3 interactive table controls moved below table */
.interactive-table-root .interactive-control {
  margin-top: 20px;
}

/* v0.1.4 equation editor */
.equation-answer-box { gap: 14px; }
.question-label { display: block; font-weight: 700; margin: 4px 0 2px; }
.equation-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.equation-toolbar button { min-width: 42px; padding: 8px 10px; border: 1px solid #b7c0c7; background: #f5f7f9; }
.equation-toolbar button:hover { background: #e4eef6; }
.equation-editor {
  min-height: 58px;
  border: 1px solid #aaa;
  border-radius: 8px;
  padding: 14px;
  font-size: 22px;
  line-height: 1.4;
  background: #fff;
  outline: none;
}
.equation-editor:focus { border-color: #1667a6; box-shadow: 0 0 0 3px rgba(22,103,166,.15); }
.equation-editor:empty::before { content: attr(data-placeholder); color: #7b8790; }

/* v0.1.4 drag and drop */
.drag-source { margin-bottom: 18px; }
.drag-empty, .drop-placeholder { color: #6b7780; font-style: italic; padding: 8px 0; }
.drop-zone-block { display: grid; gap: 6px; }
.drop-zone { min-height: 58px; }
.placed-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.remove-drag-item {
  padding: 5px 10px;
  border-radius: 6px;
  background: #d9534f;
  color: #fff;
  font-size: 13px;
}
.remove-drag-item:hover { background: #b83f3b; }
.plain-answer-text { font-size: 16px; line-height: 1.6; white-space: normal; }

/* v0.1.5 equation preview */
.equation-preview-block {
  margin-top: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #f8fafc;
}
.equation-preview-label { font-weight: 700; margin-bottom: 6px; }
.equation-preview { min-height: 32px; font-size: 22px; line-height: 1.5; }

/* v0.1.6 delivery pagination */
.delivery-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  padding: 0 14px;
  overflow-x: auto;
}
.page-dot {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1;
  background: #fff;
  color: #111;
}
.page-dot.status-current,
.page-dot.active {
  background: #111;
  color: #fff;
  border-color: #111;
  opacity: 1;
}
.page-dot.status-unseen {
  background: #fff;
  color: #111;
  border-color: #111;
}
.page-dot.status-answered {
  background: #16843a;
  color: #fff;
  border-color: #16843a;
}
.page-dot.status-seen_unanswered {
  background: #f28c28;
  color: #fff;
  border-color: #f28c28;
}
.page-dot:disabled {
  cursor: default;
  opacity: 1;
}
.page-dot:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
@media (max-width: 700px) {
  .test-footer { gap: 8px; padding: 0 8px; }
  .delivery-pagination { justify-content: flex-start; padding: 0 4px; }
  .page-dot { width: 30px; height: 30px; min-width: 30px; font-size: 13px; }
}

/* v0.1.7 rich text editor and package form */
.rich-editor-wrapper {
  border: 1px solid #b7c4d1;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: #f3f6f9;
  border-bottom: 1px solid #d5dde5;
}
.rich-toolbar button {
  border: 1px solid #bdc8d3;
  border-radius: 7px;
  background: #fff;
  padding: 7px 10px;
  cursor: pointer;
  font-weight: 700;
}
.rich-toolbar button:hover { background: #eaf2fb; }
.rich-editor {
  min-height: 180px;
  padding: 14px;
  outline: none;
  line-height: 1.6;
}
.rich-editor:focus { background: #fffef7; }
.rich-content-table,
.rich-editor table,
.question-text table,
.stimulus-block table,
.intro-panel table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
}
.rich-content-table td,
.rich-editor td,
.question-text td,
.stimulus-block td,
.intro-panel td,
.rich-content-table th,
.rich-editor th,
.question-text th,
.stimulus-block th,
.intro-panel th {
  border: 1px solid #b8c2cc;
  padding: 8px 10px;
}
.rich-content-image,
.question-text img,
.stimulus-block img,
.intro-panel img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px 0;
}
.inline-equation {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  background: #eef6ff;
  font-family: Georgia, 'Times New Roman', serif;
}
.form-row ul {
  list-style: none;
  padding-left: 0;
  margin: 8px 0;
  max-height: 360px;
  overflow: auto;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #fff;
}
.form-row ul li {
  padding: 8px 10px;
  border-bottom: 1px solid #eef1f4;
}
.form-row ul li:last-child { border-bottom: none; }
.form-row ul label { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.start-card select,
.start-card input { width: 100%; }

/* v0.1.8 rich text image upload and image sizing */
.rich-content-image.img-small,
.question-text img.img-small,
.stimulus-block img.img-small,
.intro-panel img.img-small { width: 25%; max-width: 100%; height: auto; }
.rich-content-image.img-medium,
.question-text img.img-medium,
.stimulus-block img.img-medium,
.intro-panel img.img-medium { width: 50%; max-width: 100%; height: auto; }
.rich-content-image.img-large,
.question-text img.img-large,
.stimulus-block img.img-large,
.intro-panel img.img-large { width: 75%; max-width: 100%; height: auto; }
.rich-content-image.img-full,
.question-text img.img-full,
.stimulus-block img.img-full,
.intro-panel img.img-full { width: 100%; max-width: 100%; height: auto; }

/* v0.1.9 - Modal upload gambar rich text editor */
.editor-image-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.editor-image-modal {
  width: min(560px, 96vw);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.editor-image-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #e5e7eb;
}

.editor-image-modal-header h3 {
  margin: 0;
  font-size: 22px;
}

.editor-image-modal-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.editor-image-modal-body {
  padding: 22px;
}

.editor-image-field {
  display: block;
  margin-bottom: 14px;
}

.editor-image-field span {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

.editor-image-field input,
.editor-image-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #b8c2cc;
  border-radius: 8px;
  font-size: 15px;
}

.editor-image-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.editor-image-actions button {
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
}

.editor-image-actions .btn-primary {
  background: #1769aa;
  color: #ffffff;
}

.editor-image-actions .btn-secondary {
  background: #e5e7eb;
  color: #111827;
}

.editor-image-actions .btn-muted {
  background: #f3f4f6;
  color: #374151;
}

.editor-image-message {
  min-height: 22px;
  margin-top: 12px;
  color: #1769aa;
  font-weight: 600;
}

.editor-image-message.error {
  color: #b42318;
}

/* v0.1.11 custom calculator stimulus */
.custom-calculator-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.custom-calculator-content {
  line-height: 1.6;
}
.custom-calculator-panel {
  border: 1px solid #333;
  background: #fff0dc;
  padding: 16px 18px;
}
.custom-calculator-panel h2 {
  margin: 0 0 18px;
  text-align: center;
}
.custom-calculator-inputs {
  display: grid;
  gap: 14px;
}
.custom-calculator-row {
  display: grid;
  grid-template-columns: 1fr 180px 78px;
  gap: 12px;
  align-items: center;
  font-weight: 700;
}
.custom-calculator-row input,
.custom-calculator-output input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #c6cbd1;
  border-radius: 7px;
  font-size: 16px;
  background: #fff;
}
.calculator-unit { font-weight: 700; }
.custom-calculator-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 18px 0 8px;
}
.custom-calculator-output {
  display: grid;
  grid-template-columns: 1fr 170px 70px;
  gap: 12px;
  align-items: center;
  margin: 12px -18px -16px;
  padding: 12px 18px;
  background: #c9c9c9;
  font-weight: 800;
}
.custom-calculator-output input { background: #fff; }
@media (max-width: 900px) {
  .custom-calculator-layout { grid-template-columns: 1fr; }
  .custom-calculator-row,
  .custom-calculator-output { grid-template-columns: 1fr; }
}

/* v0.1.11 collapsible question hint */
.question-hint {
  border: 1px solid #a9c6dd;
  border-radius: 8px;
  margin: 0 0 18px;
  overflow: hidden;
  background: #fff;
}
.question-hint summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: #cfe4f5;
  font-weight: 800;
  cursor: pointer;
}
.question-hint summary::-webkit-details-marker { display: none; }
.question-hint .hint-toggle-icon { transition: transform .18s ease; }
.question-hint[open] .hint-toggle-icon { transform: rotate(180deg); }
.question-hint-body {
  padding: 16px 18px;
  line-height: 1.6;
}
.question-hint-body table { border-collapse: collapse; width: 100%; }
.question-hint-body td, .question-hint-body th { border: 1px solid #b8c2cc; padding: 8px 10px; }
.question-hint-body img { max-width: 100%; height: auto; }

/* v0.1.12 layout fixes, pagination, preview, searchable select */
.two-column-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.stimulus-panel, .question-panel, .single-question-panel, .intro-panel { min-width: 0; }
.stimulus-block, .question-text, .rich-content-display, .instruction { max-width: 100%; overflow-x: auto; }
.stimulus-block table, .question-text table, .intro-panel table, .rich-content-display table, .question-hint-body table {
  max-width: 100%;
  table-layout: auto;
}
.stimulus-block img, .question-text img, .intro-panel img, .rich-content-display img, .question-hint-body img {
  max-width: 100%;
  height: auto;
}
.panel-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 18px 0;
}
.panel-pagination a, .panel-pagination span {
  padding: 8px 12px;
  border: 1px solid #c7d3de;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  font-weight: 700;
}
.panel-pagination .current {
  background: #1667a6;
  color: #fff;
  border-color: #1667a6;
}
.preview-admin-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: #fff8dc;
  border-bottom: 1px solid #e8d78a;
}
.preview-test-page {
  height: calc(100vh - 50px);
  grid-template-rows: 1fr;
}
.select-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #b8c4cc;
  border-radius: 9px;
  font-size: 15px;
  margin-bottom: 8px;
}

/* v0.1.13 KATALIS-P brand, custom calculator two columns, interactive chart/table answers */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}
.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
}
.panel-brand .brand-logo { width: 44px; height: 44px; }
.test-header .brand-logo { width: 30px; height: 30px; }
.panel-version-footer {
  margin-top: 28px;
  padding: 14px 0 4px;
  color: #5f7280;
  font-size: 13px;
  border-top: 1px solid #d8e2ea;
}
.custom-calculator-stimulus .custom-calculator-delivery {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  gap: 28px;
}
.custom-calculator-root { min-width: 0; }
.custom-calculator-content { min-width: 0; overflow-x: auto; }
.custom-calculator-content table { width: 100%; max-width: 100%; }
.custom-calculator-panel { max-width: 100%; overflow: hidden; }
.interactive-bar-chart-answer,
.interactive-table-answer {
  display: grid;
  gap: 14px;
  border: 1px solid #cbd5df;
  border-radius: 10px;
  padding: 14px;
  background: #fbfdff;
}
.bar-axis-control,
.table-answer-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
}
.bar-axis-control label,
.table-answer-controls label {
  display: grid;
  gap: 5px;
  font-weight: 700;
}
.bar-axis-control input,
.table-answer-controls select,
.bar-row input,
.interactive-answer-table input {
  padding: 8px 10px;
  border: 1px solid #b8c4cc;
  border-radius: 7px;
  font-size: 15px;
  background: #fff;
}
.bar-rows { display: grid; gap: 9px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 110px 42px 42px auto;
  gap: 8px;
  align-items: center;
}
.bar-chart-preview {
  border: 1px solid #d5dde5;
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}
.bar-axis-ticks { font-weight: 700; color: #516574; margin-bottom: 8px; }
.interactive-bar-chart-canvas {
  min-height: 260px;
  display: grid;
  grid-template-columns: repeat(var(--bar-count), minmax(52px, 1fr));
  gap: 14px;
  align-items: end;
  border-left: 2px solid #56616b;
  border-bottom: 2px solid #56616b;
  padding: 16px 14px 0;
}
.bar-item {
  height: 240px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 6px;
  text-align: center;
  min-width: 0;
}
.bar-track {
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
}
.bar-fill {
  width: min(56px, 80%);
  min-height: 2px;
  background: #1d74ae;
  border-radius: 8px 8px 0 0;
}
.bar-value-label { font-weight: 800; }
.bar-x-label { word-break: break-word; font-size: 13px; }
.interactive-answer-table input { width: 100%; box-sizing: border-box; }
.interactive-answer-table th { vertical-align: top; }
.table-action-cell { width: 1%; white-space: nowrap; }
@media (max-width: 900px) {
  .custom-calculator-stimulus .custom-calculator-delivery { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1fr 100px 38px 38px; }
  .bar-remove { grid-column: 1 / -1; }
}
.start-brand { justify-content: center; margin-bottom: 10px; }
.start-brand .brand-logo { width: 54px; height: 54px; }
.start-brand h1 { margin: 0; }
.start-card h2 { margin: 0 0 8px; text-align: center; }


/* v0.1.14 configurable delivery layout */
.rich-content, .stimulus-panel, .question-panel, .single-question-panel { min-width: 0; }
.rich-content img, .stimulus-panel img, .question-panel img, .single-question-panel img { max-width: 100%; height: auto; }
.rich-content table, .stimulus-panel table, .question-panel table, .single-question-panel table { max-width: 100%; }
.custom-calculator-layout {
  display: grid;
  grid-template-columns: var(--calculator-text-width, 50%) var(--calculator-tool-width, 50%);
  gap: 18px;
  align-items: start;
}
.calculator-context, .calculator-box { min-width: 0; overflow-x: auto; }
.layout-preview-grid { display: grid; gap: 14px; margin-top: 16px; }
.layout-preview-row { border: 1px solid #d4dde4; border-radius: 10px; padding: 12px; background: #f9fbfc; }
.layout-bar { display: grid; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid #c6d4dd; font-size: 13px; font-weight: 700; text-align: center; }
.layout-bar span { display: flex; align-items: center; justify-content: center; background: #e9f3f8; border-right: 1px solid #c6d4dd; }
.layout-bar span:last-child { border-right: 0; }
@media (max-width: 900px) {
  .single-layout { grid-template-columns: 1fr; }
  .single-question-panel, .intro-panel { grid-column: 1; }
  .custom-calculator-layout { grid-template-columns: 1fr; }
}


/* v0.1.15 - layout setting enforcement, brand controls, chart/table refinements */
.single-layout { grid-template-columns: var(--single-left, 10%) var(--single-content, 70%) var(--single-right, 20%) !important; }
.two-column-layout { grid-template-columns: var(--stimulus-width, 60%) var(--question-width, 40%) !important; }
.custom-calculator-layout { display: grid; grid-template-columns: var(--calculator-text-width, 50%) var(--calculator-tool-width, 50%) !important; gap: 20px; align-items: start; }
.brand-lockup:empty { display: none; }
.brand-logo { object-fit: contain; }
.rich-content-display, .stimulus-panel { min-width: 0; }
.rich-content-display table, .stimulus-panel table { max-width: 100% !important; }
.rich-content-display img, .stimulus-panel img { max-width: 100%; height: auto; }

.interactive-bar-chart-answer { border: 1px solid #d3dde6; border-radius: 10px; padding: 14px; background: #fff; }
.bar-axis-control { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
.bar-axis-control label { font-weight: 700; display: grid; gap: 5px; }
.bar-rows { display: grid; gap: 8px; margin-bottom: 10px; }
.bar-row { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: center; }
.bar-row .bar-inline-controls { display: none; }
.bar-chart-preview { border: 1px solid #d3dde6; border-radius: 10px; padding: 12px; margin-top: 14px; overflow-x: auto; background: #fff; }
.bar-chart-grid { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: 260px auto; min-width: max(620px, 100%); }
.bar-y-axis { grid-column: 1; grid-row: 1; position: relative; border-right: 2px solid #56616b; }
.bar-y-tick { position: absolute; right: 8px; transform: translateY(50%); font-size: 12px; color: #4e5d68; }
.bar-y-tick::after { content: ''; position: absolute; left: 100%; top: 50%; width: calc(100vw); border-top: 1px dashed #e3e8ed; z-index: 0; }
.interactive-bar-chart-canvas { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(var(--bar-count), minmax(90px, 1fr)); gap: 28px; align-items: end; height: 260px; border-bottom: 2px solid #56616b; padding: 0 20px; position: relative; background: transparent; }
.bar-item { height: 100%; display: flex; align-items: end; justify-content: center; position: relative; z-index: 1; }
.bar-stack { height: 100%; width: 56px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.bar-value-label { font-weight: 800; margin-bottom: 6px; min-height: 20px; }
.bar-fill { width: 100%; background: #1667a6; min-height: 2px; border-radius: 4px 4px 0 0; transition: height .15s ease; }
.bar-x-controls { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(var(--bar-count), minmax(90px, 1fr)); gap: 28px; padding: 8px 20px 0; }
.bar-x-item { text-align: center; display: grid; gap: 6px; justify-items: center; }
.bar-x-label { font-size: 13px; word-break: break-word; }
.bar-adjust-buttons { display: flex; gap: 6px; justify-content: center; }
.bar-adjust-buttons button { min-width: 38px; padding: 6px 10px; }
.interactive-answer-table th input { font-weight: 800; background: #fff; }
.interactive-answer-table th input:not([readonly]) { border-color: #98b9d2; }
@media (max-width: 900px) {
  .bar-axis-control, .bar-row { grid-template-columns: 1fr; }
  .custom-calculator-layout { grid-template-columns: 1fr !important; }
}

/* v0.1.16 - package usage badges, accessibility marker, responsive custom calculator */
.usage-badge,
.delivery-usage-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.usage-regular { background: #e8f2f8; color: #164a68; }
.usage-blind { background: #fff3cd; color: #735000; }
.accessibility-mode .test-header { background: #fff7df; }
.accessibility-mode input:focus,
.accessibility-mode button:focus,
.accessibility-mode select:focus,
.accessibility-mode textarea:focus {
  outline: 3px solid #111;
  outline-offset: 2px;
}
.custom-calculator-stimulus,
.custom-calculator-stimulus .custom-calculator-delivery,
.custom-calculator-stimulus .custom-calculator-root,
.custom-calculator-stimulus .custom-calculator-panel {
  max-width: 100%;
  min-width: 0;
}
.custom-calculator-stimulus .custom-calculator-delivery {
  width: 100%;
  grid-template-columns: minmax(0, var(--calculator-text-width, 50%)) minmax(0, var(--calculator-tool-width, 50%)) !important;
  overflow-x: visible;
}
.custom-calculator-stimulus .custom-calculator-root { overflow-x: visible; }
.custom-calculator-stimulus .custom-calculator-panel {
  width: 100%;
  overflow: hidden;
  padding: clamp(12px, 1.3vw, 18px);
}
.custom-calculator-stimulus .custom-calculator-row,
.custom-calculator-stimulus .custom-calculator-output {
  grid-template-columns: minmax(90px, 1fr) minmax(90px, 44%) minmax(36px, auto);
  gap: 8px;
}
.custom-calculator-stimulus .custom-calculator-output {
  margin-left: calc(-1 * clamp(12px, 1.3vw, 18px));
  margin-right: calc(-1 * clamp(12px, 1.3vw, 18px));
  margin-bottom: calc(-1 * clamp(12px, 1.3vw, 18px));
  padding-left: clamp(12px, 1.3vw, 18px);
  padding-right: clamp(12px, 1.3vw, 18px);
}
.custom-calculator-stimulus .custom-calculator-row input,
.custom-calculator-stimulus .custom-calculator-output input { min-width: 0; }
@media (max-width: 1100px) {
  .custom-calculator-stimulus .custom-calculator-row,
  .custom-calculator-stimulus .custom-calculator-output {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .custom-calculator-stimulus .custom-calculator-delivery { grid-template-columns: 1fr !important; }
}

/* v0.1.17 - custom calculator overflow fix, package builder, accessibility stage 1 */
.custom-calculator-stimulus,
.custom-calculator-stimulus * {
  box-sizing: border-box;
}
.custom-calculator-stimulus {
  overflow-x: hidden !important;
}
.custom-calculator-stimulus .custom-calculator-content,
.custom-calculator-stimulus .custom-calculator-root,
.custom-calculator-stimulus .custom-calculator-panel {
  min-width: 0 !important;
  max-width: 100% !important;
}
.custom-calculator-stimulus .custom-calculator-panel {
  width: 100% !important;
  overflow-x: hidden !important;
}
.custom-calculator-stimulus .custom-calculator-inputs {
  width: 100%;
  min-width: 0;
}
.custom-calculator-stimulus .custom-calculator-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0 !important;
}
.custom-calculator-stimulus .custom-calculator-row span:first-child {
  flex: 1 1 140px;
  min-width: 0;
}
.custom-calculator-stimulus .custom-calculator-row input {
  flex: 1 1 110px;
  min-width: 0 !important;
  max-width: 100%;
}
.custom-calculator-stimulus .calculator-unit {
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
}
.custom-calculator-stimulus .custom-calculator-actions {
  flex-wrap: wrap;
  gap: 10px;
}
.custom-calculator-stimulus .custom-calculator-output {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0 !important;
}
.custom-calculator-stimulus .custom-calculator-output label {
  flex: 1 1 120px;
  min-width: 0;
}
.custom-calculator-stimulus .custom-calculator-output input {
  flex: 1 1 110px;
  min-width: 0 !important;
}

.package-builder { margin-top: 18px; }
.package-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.package-search-label { flex: 1 1 320px; font-weight: 700; display: grid; gap: 6px; }
.package-count-info, .muted-text { color: #5a6d79; }
.package-question-table th:nth-child(3),
.package-question-table td:nth-child(3) { width: 110px; text-align: center; }
.package-selected-toolbar { margin-top: 10px; }
.package-selected-pagination { margin-top: 12px; }
.package-selected-table th:first-child,
.package-selected-table td:first-child { width: 80px; text-align: center; }
.package-pick-label { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }
.package-question-pagination button,
.package-selected-pagination button {
  padding: 8px 12px;
  border: 1px solid #c7d3de;
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
}
.package-question-pagination button.current,
.package-selected-pagination button.current {
  background: #1667a6;
  color: #fff;
  border-color: #1667a6;
}
.package-question-pagination button:disabled,
.package-selected-pagination button:disabled { opacity: .5; cursor: not-allowed; }
.checkbox-row label { display: inline-flex; gap: 8px; align-items: center; }
.accessibility-note,
.accessibility-description {
  border: 1px solid #e2c873;
  background: #fff9df;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
  line-height: 1.55;
}
.accessibility-description h3 { margin: 0 0 6px; font-size: 17px; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* v0.1.18 - HTML5 embed, accessibility stage 2, stronger calculator overflow fix */
.html5-animation-stimulus { overflow-x: hidden; }
.html5-animation-frame-wrap { display: grid; gap: 10px; max-width: 100%; }
.html5-animation-frame {
  width: 100%;
  max-width: 100%;
  border: 1px solid #cbd5df;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}
.html5-animation-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.html5-animation-context { margin-bottom: 14px; }

.custom-calculator-stimulus .custom-calculator-delivery {
  overflow-x: clip !important;
}
.custom-calculator-stimulus .custom-calculator-content,
.custom-calculator-stimulus .calculator-context {
  overflow-x: hidden !important;
}
.custom-calculator-stimulus .custom-calculator-content table,
.custom-calculator-stimulus .calculator-context table {
  width: 100% !important;
  max-width: 100% !important;
}
.custom-calculator-stimulus .custom-calculator-panel h2 {
  overflow-wrap: anywhere;
}
.custom-calculator-stimulus button {
  max-width: 100%;
  white-space: normal;
}
.package-accessibility-warning:empty { display: none; }
.accessibility-mode .interactive-table-answer input,
.accessibility-mode .interactive-bar-chart-answer input {
  min-height: 42px;
}
@media (max-width: 1100px) {
  .custom-calculator-stimulus .custom-calculator-row span:first-child,
  .custom-calculator-stimulus .custom-calculator-output label {
    flex-basis: 100%;
  }
}


/* v0.1.19 - diagram batang maksimal sejajar, pagination adaptif, modal daftar soal, header tabel editable */
.delivery-pagination {
  overflow-x: visible;
  flex-wrap: nowrap;
}
.page-ellipsis {
  min-width: 22px;
  text-align: center;
  font-weight: 800;
  color: #475569;
}
.question-list-toggle {
  border-radius: 999px;
  padding: 7px 12px;
  background: #eef3f8;
  border: 1px solid #b9c8d6;
  font-weight: 700;
  white-space: nowrap;
}
.question-list-modal[hidden] { display: none; }
.question-list-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.question-list-modal-card {
  width: min(760px, 96vw);
  max-height: min(680px, 88vh);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #cbd5df;
  box-shadow: 0 22px 80px rgba(0,0,0,.28);
  padding: 18px;
}
.question-list-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 18px;
}
.question-list-modal-header button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: #e8edf2;
  font-size: 24px;
  line-height: 1;
}
.question-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 10px;
}
.bar-chart-grid {
  grid-template-rows: 292px auto !important;
}
.bar-y-axis {
  height: 292px;
  border-right: 0 !important;
  padding-top: 32px;
  box-sizing: border-box;
}
.bar-y-plot {
  position: relative;
  height: 260px;
  border-right: 2px solid #56616b;
}
.interactive-bar-chart-canvas {
  height: 292px !important;
  padding: 32px 20px 0 !important;
  box-sizing: border-box;
  overflow: visible;
}
.bar-item {
  height: 260px !important;
  overflow: visible;
}
.bar-stack {
  position: relative;
  height: 100% !important;
  width: 56px;
  display: block !important;
}
.bar-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100% !important;
}
.bar-value-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  min-height: 20px;
  white-space: nowrap;
  z-index: 2;
}
.interactive-answer-table th input {
  pointer-events: auto;
  cursor: text;
  background: #fff !important;
}
.interactive-answer-table th input[readonly] {
  color: #111;
}
@media (max-width: 700px) {
  .delivery-pagination { gap: 5px; }
  .question-list-toggle { padding: 6px 9px; font-size: 12px; }
}


/* v0.1.20 - tema KATALIS-P, Tailwind-like utility layer, Tuna Netra tahap 2, diagram batang refined */
:root {
  --katalis-blue: #2497B8;
  --katalis-yellow: #F5AD00;
  --katalis-bg: #F8FAFC;
  --katalis-dark: #0F172A;
  --katalis-muted: #64748B;
  --katalis-border: #DCE3EA;
}
body { color: var(--katalis-dark); background: var(--katalis-bg); }
button.primary, .button.primary, a.button.primary, .btn-close-result,
.package-question-pagination button.current, .panel-pagination .current {
  background: var(--katalis-blue) !important;
  border-color: var(--katalis-blue) !important;
  color: #fff !important;
}
button.primary:hover, .button.primary:hover, a.button.primary:hover { filter: brightness(.95); }
.panel-sidebar { background: #123047; }
.panel-nav a:hover { background: rgba(36,151,184,.28); }
.panel-table th, th { background: #EEF7FA; color: #123047; }
.stat-card, .panel-card, .start-card, .result-header, .result-card { border: 1px solid rgba(220,227,234,.75); }
.form-control:focus, .json-textarea:focus, .text-input:focus, .text-area:focus,
.form-row select:focus, .form-row input:focus, .form-row textarea:focus {
  outline: 3px solid rgba(36,151,184,.18);
  border-color: var(--katalis-blue);
}
.delivery-usage-badge.usage-blind, .usage-badge.usage-blind { background: #FFF4CC; color: #7A5200; }
.delivery-usage-badge.usage-regular, .usage-badge.usage-regular { background: #E8F6FA; color: #15536A; }
.accessibility-note, .accessibility-description {
  border-color: rgba(245,173,0,.55);
  background: #FFFAE8;
}

/* utility classes, compatible with Tailwind-style incremental migration */
.tw-card { background: #fff; border: 1px solid var(--katalis-border); border-radius: 1rem; box-shadow: 0 10px 28px rgba(15,23,42,.06); }
.tw-btn-primary { background: var(--katalis-blue); color: #fff; border-radius: .75rem; font-weight: 800; }
.tw-btn-accent { background: var(--katalis-yellow); color: #1f2937; border-radius: .75rem; font-weight: 800; }
.tw-input { border: 1px solid var(--katalis-border); border-radius: .75rem; padding: .7rem .8rem; background: #fff; }
.tw-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .25rem .6rem; font-weight: 800; font-size: .75rem; }

/* Diagram batang: interval hanya visual; input nilai berada di bawah label kategori, bukan di daftar atas */
.bar-rows { display: none !important; }
.bar-add {
  width: max-content;
  background: #EEF7FA;
  border: 1px solid #B8DCE8;
  color: #15536A;
}
.bar-axis-control label:nth-child(3)::before { content: ''; }
.bar-chart-preview { overflow-x: auto; }
.bar-chart-grid { grid-template-rows: 292px auto !important; }
.bar-x-controls {
  align-items: start;
}
.bar-x-item {
  min-width: 90px;
  text-align: center;
  display: grid;
  gap: 6px;
  justify-items: stretch;
}
.bar-x-category-input,
.bar-x-value-input {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--katalis-border);
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  background: #fff;
}
.bar-x-category-input {
  font-weight: 800;
  color: var(--katalis-dark);
}
.bar-x-value-input {
  font-weight: 700;
}
.bar-adjust-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.bar-adjust-buttons button {
  min-width: 34px;
  padding: 6px 8px;
  border-radius: 8px;
}
.bar-chart-remove {
  background: #FEE2E2;
  color: #991B1B;
  font-size: 12px;
}
.bar-fill { background: var(--katalis-blue) !important; }
.bar-y-tick::after { border-top-color: #E6EEF4; }

/* Aksesibilitas tahap 2 */
.accessibility-mode .bar-chart-preview {
  border-color: #D9B64A;
  background: #FFFDF3;
}
.accessibility-mode .bar-x-category-input,
.accessibility-mode .bar-x-value-input,
.accessibility-mode .interactive-answer-table input,
.accessibility-mode .custom-calculator-row input,
.accessibility-mode .custom-calculator-output input {
  min-height: 44px;
  font-size: 16px;
}
.accessibility-mode .bar-adjust-buttons button,
.accessibility-mode .table-add-row,
.accessibility-mode .table-add-col,
.accessibility-mode .calc-run,
.accessibility-mode .calc-clear {
  min-height: 42px;
}

@media (max-width: 900px) {
  .bar-x-item { min-width: 76px; }
  .bar-x-category-input, .bar-x-value-input { font-size: 12px; padding: 6px; }
}


/* v0.1.21 - stronger HTML5 animation iframe compatibility */
.html5-animation-frame { display: block; min-height: 240px; }
.html5-iframe-fallback, .html5-tab-only {
  border: 1px dashed #cbd5df;
  background: #f8fafc;
  border-radius: 10px;
  padding: 14px;
  color: #334155;
}

/* v0.1.22 delivery entry and package card menu */
.delivery-entry-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef7fa 100%);
}
.delivery-entry-card {
  width: min(460px, 100%);
  background: #fff;
  border: 1px solid #dce3ea;
  border-radius: 22px;
  box-shadow: 0 16px 45px rgba(15, 23, 42, .12);
  padding: 34px;
  display: grid;
  gap: 14px;
}
.brand-logo-large { width: 92px; height: 92px; object-fit: contain; }
.center-text { text-align: center; }
.entry-button { width: 100%; margin-top: 6px; }
.package-menu-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #f8fafc;
}
.package-menu-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid #dce3ea;
  position: sticky;
  top: 0;
  z-index: 20;
}
.package-menu-participant { color: #0f172a; }
.package-menu-main { width: min(1180px, 100%); margin: 0 auto; padding: 28px 24px 36px; }
.package-menu-intro { margin-bottom: 24px; }
.package-menu-intro h1 { margin: 0 0 6px; color: #0f172a; }
.package-menu-intro p { margin: 0; color: #64748b; }
.package-category-section { margin-top: 28px; }
.package-category-section h2 { margin: 0 0 14px; font-size: 22px; color: #123047; }
.package-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
}
.package-card {
  display: block;
  text-decoration: none;
  color: #0f172a;
  background: #fff;
  border: 1px solid #dce3ea;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(15, 23, 42, .08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.package-card:hover, .package-card:focus-visible {
  transform: translateY(-2px);
  border-color: #2497B8;
  box-shadow: 0 10px 30px rgba(36, 151, 184, .18);
  outline: none;
}
.package-card-image {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: #eef7fa;
  overflow: hidden;
}
.package-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.package-card:not(:has(.package-card-image img[src*="uploads"])) .package-card-image img {
  width: 58%;
  height: 58%;
  object-fit: contain;
}
.package-card-body { padding: 13px 14px 15px; display: grid; gap: 8px; }
.package-card-body h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.package-menu-footer {
  text-align: center;
  padding: 18px 16px;
  color: #64748b;
  background: #fff;
  border-top: 1px solid #dce3ea;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .package-menu-header { grid-template-columns: 1fr; align-items: start; }
  .package-card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* v0.1.23 - Tailwind-inspired delivery refinement */
:root {
  --kp-blue: #2497B8;
  --kp-blue-dark: #16708c;
  --kp-yellow: #F5AD00;
  --kp-bg: #F8FAFC;
  --kp-dark: #0F172A;
  --kp-muted: #64748B;
  --kp-border: #DCE3EA;
  --kp-card: #FFFFFF;
}
body { background: var(--kp-bg); color: var(--kp-dark); }
.tw-btn-primary,
button.tw-btn-primary,
a.tw-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--kp-blue), var(--kp-blue-dark));
  color: #fff;
  font-weight: 800;
  padding: 12px 18px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(36,151,184,.22);
}
.tw-btn-primary:hover { filter: brightness(.98); transform: translateY(-1px); }
.tw-btn-full { width: 100%; }
.tw-btn-secondary,
a.tw-btn-secondary,
.tw-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--kp-border);
  background: #fff;
  color: var(--kp-dark);
  font-weight: 800;
  padding: 10px 16px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
}
.tw-btn-secondary:hover,
.tw-nav-button:hover { background: #F1F5F9; }
.tw-alert-error {
  width: 100%;
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #9f1239;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
}

/* Start page */
.tw-delivery-start {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 15%, rgba(245,173,0,.15), transparent 28%),
    radial-gradient(circle at 84% 20%, rgba(36,151,184,.14), transparent 30%),
    linear-gradient(180deg, #F8FAFC 0%, #EEF7FA 100%);
}
.tw-start-card {
  width: min(480px, 100%);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(220,227,234,.9);
  border-radius: 28px;
  padding: 38px;
  box-shadow: 0 24px 70px rgba(15,23,42,.12);
  display: grid;
  gap: 22px;
}
.tw-start-brand {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
}
.tw-start-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
}
.tw-start-brand h1 {
  margin: 0;
  font-size: clamp(34px, 7vw, 48px);
  letter-spacing: .12em;
  color: var(--kp-dark);
}
.tw-start-lead {
  margin: 0;
  color: var(--kp-muted);
  text-align: center;
  line-height: 1.55;
}
.tw-start-form { display: grid; gap: 12px; }
.tw-start-form label { font-weight: 800; color: var(--kp-dark); }
.tw-start-form input {
  width: 100%;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  background: #fff;
  padding: 14px 16px;
  font-size: 17px;
  outline: none;
}
.tw-start-form input:focus {
  border-color: var(--kp-blue);
  box-shadow: 0 0 0 4px rgba(36,151,184,.16);
}

/* Package menu */
.tw-package-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--kp-bg);
}
.tw-package-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kp-border);
}
.tw-header-inner {
  width: min(1180px, calc(100% - 32px));
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.tw-brand-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-right: auto;
}
.tw-brand-mini img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.tw-brand-mini strong {
  font-size: 22px;
  letter-spacing: .06em;
}
.tw-package-user {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--kp-muted);
}
.tw-package-user strong { color: var(--kp-dark); }
.tw-package-main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 38px 0 30px;
}
.tw-package-hero {
  border: 1px solid var(--kp-border);
  background: linear-gradient(135deg, #fff 0%, #F0F9FC 100%);
  border-radius: 26px;
  padding: clamp(24px, 4vw, 42px);
  box-shadow: 0 18px 50px rgba(15,23,42,.07);
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.tw-package-hero::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -80px;
  top: -80px;
  border-radius: 999px;
  background: rgba(245,173,0,.16);
}
.tw-eyebrow {
  margin: 0 0 8px;
  color: var(--kp-blue-dark);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 900;
}
.tw-package-hero h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1;
}
.tw-package-hero p:not(.tw-eyebrow) {
  margin: 14px 0 0;
  color: var(--kp-muted);
  max-width: 620px;
  line-height: 1.6;
  font-size: 17px;
}
.tw-package-section { margin-top: 30px; }
.tw-section-title-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tw-section-title-row h2 {
  margin: 0;
  font-size: 24px;
}
.tw-section-title-row span { color: var(--kp-muted); font-weight: 700; }
.tw-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}
.tw-package-card {
  display: block;
  background: #fff;
  border: 1px solid var(--kp-border);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: var(--kp-dark);
  box-shadow: 0 12px 28px rgba(15,23,42,.07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tw-package-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
  border-color: rgba(36,151,184,.55);
}
.tw-package-cover {
  aspect-ratio: 1 / 1;
  background: #F1F5F9;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tw-package-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tw-package-placeholder {
  width: 72%;
  height: 72%;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(245,173,0,.13), rgba(36,151,184,.12));
}
.tw-package-placeholder img {
  width: 58%;
  height: 58%;
  object-fit: contain;
}
.tw-package-card-body {
  padding: 14px 14px 16px;
  display: grid;
  gap: 10px;
}
.tw-package-card-body h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}
.tw-badge,
.usage-badge,
.delivery-usage-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}
.tw-badge-regular,
.usage-regular { color: #0F6477; background: #E7F7FB; }
.tw-badge-blind,
.usage-blind { color: #92400E; background: #FEF3C7; }
.tw-empty-card {
  border: 1px dashed #CBD5E1;
  border-radius: 18px;
  padding: 28px;
  background: #fff;
  color: var(--kp-muted);
}
.tw-package-footer {
  text-align: center;
  color: var(--kp-muted);
  border-top: 1px solid var(--kp-border);
  padding: 18px 16px 24px;
  font-size: 13px;
  line-height: 1.5;
}

/* Tailwind exercise for test delivery page */
.tw-test-page { background: #F8FAFC; }
.tw-test-header,
.tw-test-footer {
  min-height: 64px;
  background: rgba(255,255,255,.94);
  border-color: var(--kp-border);
  box-shadow: 0 4px 24px rgba(15,23,42,.06);
}
.tw-test-header {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr minmax(100px, 150px);
  gap: 18px;
}
.tw-test-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tw-test-brand img { width: 38px; height: 38px; object-fit: contain; }
.tw-test-brand strong { font-size: 15px; letter-spacing: .06em; white-space: nowrap; }
.tw-test-brand span { color: var(--kp-muted); letter-spacing: 0; }
.tw-test-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--kp-muted);
}
.tw-test-meta strong { color: var(--kp-dark); }
.tw-question-count {
  justify-self: end;
  font-weight: 900;
  color: var(--kp-dark);
}
.tw-test-body { padding: 18px; gap: 18px; background: #F8FAFC; }
.tw-delivery-card {
  height: 100%;
  min-width: 0;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--kp-border);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 12px 32px rgba(15,23,42,.06);
}
.tw-stimulus-card { border-right: 1px solid var(--kp-border); }
.tw-panel-kicker {
  color: var(--kp-blue-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.tw-question-card h2,
.tw-stimulus-card h2,
.tw-delivery-card h2 {
  margin-top: 0;
  color: var(--kp-dark);
  font-size: 28px;
  line-height: 1.15;
}
.tw-question-text {
  color: #1E293B;
  font-size: 18px;
  line-height: 1.65;
}
.tw-test-page .answer-box { gap: 12px; }
.tw-test-page .option {
  border: 1px solid #E2E8F0;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(15,23,42,.04);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.tw-test-page .option:hover {
  border-color: rgba(36,151,184,.55);
  background: #F8FDFF;
  transform: translateY(-1px);
}
.tw-test-page .text-input,
.tw-test-page .text-area,
.tw-test-page input[type="text"],
.tw-test-page input[type="number"],
.tw-test-page textarea,
.tw-test-page select {
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  outline: none;
}
.tw-test-page input:focus,
.tw-test-page textarea:focus,
.tw-test-page select:focus,
.tw-test-page button:focus-visible,
.tw-test-page a:focus-visible {
  outline: 3px solid rgba(245,173,0,.55);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(36,151,184,.14);
}
.tw-test-footer { gap: 14px; }
.tw-delivery-pagination {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  padding: 7px 12px;
  max-width: 70vw;
}
.tw-test-page .page-dot {
  border-color: #CBD5E1;
  box-shadow: none;
}
.tw-test-page .page-dot.active,
.tw-test-page .page-dot.status-current {
  background: var(--kp-dark);
  border-color: var(--kp-dark);
}
.tw-test-page .question-list-toggle {
  border-radius: 999px;
  padding: 8px 14px;
  color: #075985;
  background: #E7F7FB;
}
@media (max-width: 900px) {
  .tw-header-inner { min-height: auto; padding: 14px 0; flex-wrap: wrap; }
  .tw-package-user { order: 3; width: 100%; justify-content: center; }
  .tw-package-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tw-test-page { height: auto; min-height: 100vh; grid-template-rows: auto 1fr auto; }
  .tw-test-header { grid-template-columns: 1fr; justify-items: start; gap: 8px; padding: 12px 16px; }
  .tw-test-meta { justify-content: flex-start; }
  .tw-question-count { justify-self: start; }
  .tw-test-body { padding: 12px; }
  .tw-delivery-card { padding: 18px; }
  .two-column-layout.tw-test-body { grid-template-columns: 1fr !important; grid-template-rows: auto auto; overflow: auto; }
  .tw-test-footer { position: sticky; display: grid; grid-template-columns: auto 1fr auto; min-height: auto; padding: 10px; }
  .tw-delivery-pagination { max-width: 100%; border-radius: 18px; }
}
@media (max-width: 520px) {
  .tw-start-card { padding: 26px; border-radius: 22px; }
  .tw-start-logo { width: 74px; height: 74px; }
  .tw-package-main { width: min(100% - 24px, 1180px); padding-top: 24px; }
  .tw-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tw-package-card-body h3 { font-size: 15px; }
}

/* v0.1.24 robust delivery start/package layout fallback */
.kp-start-logo,.kp-brand-mini img{object-fit:contain}.kp-start-logo{max-width:104px!important;max-height:104px!important}.kp-brand-mini img{max-width:44px!important;max-height:44px!important}.kp-placeholder img{max-width:58%!important;max-height:58%!important;object-fit:contain}


/* v0.1.25 - HTML5 iframe srcdoc and local URL warning */
.html5-warning {
  border: 1px solid #f5ad00;
  background: #fff8e6;
  color: #7a4b00;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 700;
}
.html5-animation-frame-srcdoc {
  background: #eef6fb;
}


/* v0.1.27 - HTML5/Unity WebGL stimulus */
.html5-unity-note {
  padding: 10px 12px;
  border: 1px solid #bae6fd;
  background: #eff6ff;
  color: #075985;
  border-radius: 10px;
  font-size: 0.92rem;
  margin-bottom: 10px;
}
.html5-animation-frame {
  background: #111827;
}
.html5-animation-actions .button,
.html5-animation-actions button {
  white-space: nowrap;
}