* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--pe-font-ui), sans-serif; background: #f5f7fa; color: #1a1a2e; height: 100vh; overflow: hidden; }

/* ── Top Bar ── */
.topbar { height: 52px; background: #1a1a2e; color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.topbar h1 { font-size: 15px; font-weight: 600; }
.topbar .sep { flex: 1; }
.topbar a { color: #aab2bd; font-size: 13px; text-decoration: none; }
.topbar a:hover { color: #fff; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; transition: background .15s; }
.btn-primary { background: #4f46e5; color: #fff; }
.btn-primary:hover { background: #4338ca; }
.btn-success { background: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-ghost { background: transparent; color: #6b7280; border: 1px solid #d1d5db; }
.btn-ghost:hover { background: #f3f4f6; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.hidden-init { display: none; }

/* ── Layout ── */
.layout { display: flex; height: calc(100vh - 52px); }

/* ── Bank Panel (left) ── */
.bank-panel { width: 340px; min-width: 260px; max-width: 420px; border-left: 1px solid #e5e7eb; background: #fff; display: flex; flex-direction: column; resize: horizontal; overflow: auto; }
.bank-header { padding: 12px; border-bottom: 1px solid #e5e7eb; }
.bank-header h2 { font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.bank-header .new-q-btn { font-size: 12px; }
.bank-filters { display: flex; flex-direction: column; gap: 6px; }
.bank-filters input, .bank-filters select { width: 100%; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; }
.bank-filters .sort-filter { font-size: 12px; }
.bank-list { flex: 1; overflow-y: auto; }
.bank-item { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: background .1s; }
.bank-item:hover { background: #f9fafb; }
.bank-item.active { background: #eff6ff; border-right: 3px solid #4f46e5; }
.bank-item-code { font-size: 12px; color: #6b7280; }
.bank-item-preview { font-size: 13px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.bank-item-meta { display: flex; gap: 8px; font-size: 11px; color: #9ca3af; }
.bank-item-edit-hint { display: none; font-size: 11px; color: #4f46e5; font-weight: 600; }
.bank-item:hover .bank-item-edit-hint { display: inline; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; }
.badge-easy { background: #dcfce7; color: #15803d; }
.badge-med  { background: #fef9c3; color: #854d0e; }
.badge-hard { background: #fee2e2; color: #dc2626; }
.badge-inuse  { background: #dbeafe; color: #1d4ed8; }
.badge-owner  { background: #f0fdf4; color: #15803d; font-size: 10px; padding: 1px 4px; }
.badge-public { background: #eff6ff; color: #1d4ed8; font-size: 10px; padding: 1px 4px; }
.btn-disabled-lock { opacity: .45; cursor: not-allowed; pointer-events: none; }
.warn-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.warn-modal { background: #fff; border-radius: 12px; padding: 28px 32px; max-width: 440px; width: 92%; box-shadow: 0 8px 32px rgba(0,0,0,.18); direction: rtl; font-family: inherit; }
.warn-modal h3 { margin: 0 0 12px; font-size: 16px; color: #92400e; }
.warn-modal p  { margin: 0 0 20px; font-size: 14px; color: #374151; line-height: 1.6; }
.warn-modal-btns { display: flex; gap: 10px; justify-content: flex-end; }
.warn-modal-btns button { padding: 8px 20px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; font-family: inherit; }
.warn-btn-confirm { background: #d97706; color: #fff; }
.warn-btn-confirm:hover { background: #b45309; }
.warn-btn-confirm.danger { background: #dc2626; }
.warn-btn-cancel  { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db !important; }
.bank-footer { padding: 10px 12px; border-top: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #6b7280; }
.page-btn { padding: 3px 10px; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; cursor: pointer; font-size: 12px; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Editor Area ── */
.editor-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.editor-toolbar { padding: 10px 16px; background: #fff; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 8px; }
.editor-toolbar h2 { font-size: 14px; font-weight: 600; }
.editor-toolbar-title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.editor-state-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:13px; font-weight:700; white-space:nowrap; }
.editor-state-badge.idle { background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; }
.editor-state-badge.new-q { background:linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow:0 2px 8px rgba(16,185,129,.3); }
.editor-state-badge.edit-q { background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; box-shadow:0 2px 8px rgba(99,102,241,.3); }
.editor-state-badge.edit-q .q-code { background:rgba(255,255,255,.22); border-radius:8px; padding:1px 8px; font-family:monospace; font-size:12px; }
#editorSubtitle { display: none; font-size: 11px; color: #6b7280; gap: 6px; flex-wrap: wrap; }
#editorSubtitle.visible { display: flex; }
.subtitle-chip { border-radius: 10px; padding: 1px 8px; }
.subtitle-chip-lesson { background: #eff6ff; color: #1d4ed8; }
.subtitle-chip-diff { background: #f0fdf4; color: #15803d; }
.subtitle-chip-usage { background: #fff7ed; color: #c2410c; }
.subtitle-chip-readonly { background: #fef2f2; color: #b91c1c; }
.editor-toolbar .sep { flex: 1; }
.editor-content { flex: 1; overflow-y: auto; display: flex; gap: 0; }

/* ── Main Editor (left 65%) ── */
.editor-main { flex: 1; padding: 16px; overflow-y: auto; background: #f9fafb; }
.section-card { background: #fff; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 12px; }
.section-card.spaced-top { margin-top: 12px; }
.section-card-header { padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: space-between; }
.section-card-header label { font-size: 13px; font-weight: 600; color: #374151; }
.section-card-body { padding: 10px 14px; }
.ck-editor__editable { min-height: 90px; font-family: var(--pe-font-ui), sans-serif !important; }

/* ── Expand button ── */
.btn-expand { background: none; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; font-size: 13px; padding: 2px 7px; color: #6b7280; line-height: 1; }
.btn-expand:hover { background: #f3f4f6; border-color: #9ca3af; color: #374151; }

/* ── Splitter ── */
.ck-splitter { height: 8px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; margin: 2px 0 0; user-select: none; }
.ck-splitter::after { content: ''; display: block; width: 36px; height: 3px; background: #e5e7eb; border-radius: 2px; transition: background .15s; }
.ck-splitter:hover::after, .ck-splitter.dragging::after { background: #94a3b8; }

/* ── Expand Modal ── */
.ck-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.ck-modal { background: #fff; border-radius: 12px; display: flex; flex-direction: column; width: 90vw; height: 90vh; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.35); }
.ck-modal-header { padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ck-modal-header h3 { font-size: 14px; font-weight: 600; flex: 1; margin: 0; }
.ck-modal-body { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; }
.ck-modal-body .ck.ck-editor { flex: 1; display: flex; flex-direction: column; }
.ck-modal-body .ck.ck-editor__main { flex: 1; display: flex; flex-direction: column; }
.ck-modal-body .ck-editor__editable { flex: 1; min-height: calc(90vh - 160px) !important; }
@media (max-width: 700px) { .ck-modal { width: 100vw; height: 100vh; border-radius: 0; } .ck-modal-body .ck-editor__editable { min-height: calc(100vh - 160px) !important; } }
.choice-item { margin-bottom: 10px; position: relative; border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden; transition: border-color .15s; }
.choice-item.correct { border-color: #22c55e; }
.choice-item-header { padding: 6px 12px; background: #f8fafc; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #6b7280; }
.choice-item.correct .choice-item-header { background: #f0fdf4; color: #15803d; }
.choice-drag { cursor: grab; color: #9ca3af; font-size: 16px; }
.choice-num { width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #374151; }
.choice-item.correct .choice-num { background: #22c55e; color: #fff; }
.correct-toggle { margin-right: auto; display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
.correct-toggle input { width: 15px; height: 15px; cursor: pointer; }

/* ── Choice answer buttons ── */
.choice-answer-btn { border: 2px solid; border-radius: 20px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; padding: 4px 14px; min-width: 48px; text-align: center; transition: all .15s; line-height: 1.4; letter-spacing: .5px; }
.choice-answer-btn:hover { filter: brightness(1.1); transform: scale(1.04); }
.choice-answer-btn.correct-sel { box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.choice-answer-btn.correct-sel::after { content: ' ✓'; font-size: 13px; }

/* ── RTL/LTR Toggle Switch ── */
.dir-switch-wrap { display: flex; align-items: center; gap: 10px; }
.dir-label { font-size: 12px; font-weight: 600; color: #9ca3af; letter-spacing: .5px; transition: color .2s, font-weight .2s; }
.dir-label.active { color: #4f46e5; }
.dir-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.dir-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.dir-switch-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 26px; cursor: pointer; transition: background .2s; }
.dir-switch-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.dir-switch input:checked + .dir-switch-slider { background: #4f46e5; }
.dir-switch input:checked + .dir-switch-slider::before { transform: translateX(22px); }

/* ── Settings Panel (right 35%) ── */
.editor-settings { width: 300px; min-width: 240px; border-right: 1px solid #e5e7eb; background: #fff; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.setting-group { }
.setting-group label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.setting-group input[type=text], .setting-group select, .setting-group textarea { width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; }
.setting-group textarea { min-height: 60px; resize: vertical; }
.toggle-group { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle-item { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.toggle-item input { width: 16px; height: 16px; cursor: pointer; }
.divider { height: 1px; background: #e5e7eb; }

/* ── Preview ── */
.preview-section { padding: 12px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; }
.preview-section h3 { font-size: 12px; font-weight: 600; color: #0369a1; margin-bottom: 8px; }
.preview-q { font-size: 13px; color: #0c4a6e; margin-bottom: 8px; }
.preview-choice { padding: 5px 10px; border-radius: 6px; margin-bottom: 4px; font-size: 12px; border: 1px solid #e0f2fe; background: #fff; }
.preview-choice.correct-ans { background: #dcfce7; border-color: #86efac; color: #166534; }

/* ── States ── */
.empty-state { text-align: center; padding: 40px 20px; color: #9ca3af; }
.empty-state svg { width: 48px; height: 48px; opacity: .3; margin-bottom: 12px; }
.loading { text-align: center; padding: 20px; color: #6b7280; font-size: 13px; }
.error-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #dc2626; color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 13px; z-index: 9999; display: none; }
.success-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #16a34a; color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 13px; z-index: 9999; display: none; }

/* ── Choices count control ── */
.choices-count { display: flex; align-items: center; gap: 8px; }
.choices-count button { width: 28px; height: 28px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.choices-count span { font-size: 16px; font-weight: 700; min-width: 24px; text-align: center; }

/* ── In-JS-generated dynamic elements ── */
.readonly-warn-banner { background:#fef3c7; border:1px solid #f59e0b; border-radius:8px; padding:10px 14px; color:#92400e; font-size:13px; margin-bottom:12px; direction:rtl; display:flex; gap:8px; align-items:flex-start; }
.readonly-warn-banner .icon { font-size:16px; flex-shrink:0; }
#ckErrBanner { display:none; position:fixed; top:0; left:0; right:0; background:#dc2626; color:#fff; font-size:13px; padding:10px 16px; z-index:99999; word-break:break-all; direction:ltr; text-align:left; }

@media (max-width: 900px) {
  .bank-panel { width: 260px; }
  .editor-settings { width: 220px; }
}

/* ── Mobile tab nav ── */
.mob-nav { display: none; }

@media (max-width: 700px) {
  body { overflow-y: auto; }
  .layout { flex-direction: column; height: auto; overflow: visible; }
  .mob-nav { display: flex; background: #fff; border-bottom: 2px solid #e5e7eb; position: sticky; top: 0; z-index: 200; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
  .mob-nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 4px; font-size: 11px; border: none; background: none; cursor: pointer; color: #9ca3af; border-bottom: 3px solid transparent; margin-bottom: -2px; font-family: inherit; transition: color .15s; line-height: 1.2; }
  .mob-nav-btn span { font-size: 18px; }
  .mob-nav-btn.active { color: #4f46e5; border-bottom-color: #4f46e5; font-weight: 700; }
  .bank-panel { display: none; width: 100% !important; max-width: 100%; min-width: 0; height: calc(100vh - 96px); border-left: none; resize: none; }
  .bank-panel.mob-active { display: flex; }
  .editor-area { display: none; height: auto; min-height: calc(100vh - 96px); }
  .editor-area.mob-active { display: flex; }
  .editor-toolbar { flex-wrap: wrap; padding: 8px 12px; gap: 6px; position: sticky; top: 44px; z-index: 100; }
  .editor-toolbar h2, .editor-toolbar #editorTitle { font-size: 12px; width: 100%; margin: 0; }
  .editor-state-badge { font-size: 11px; padding: 4px 10px; }
  .editor-toolbar .sep { display: none; }
  .editor-content { flex-direction: column; height: auto; overflow: visible; }
  .editor-main { overflow-y: visible; padding: 10px; }
  .editor-settings { width: 100% !important; min-width: 0; border-right: none; border-top: 2px solid #e5e7eb; }
  .ck-editor__editable { min-height: 150px !important; }
  .choice-item-header { flex-wrap: wrap; gap: 6px; }
}