/* ═══════════════════════════════════════════════════════
   DIGITAL SKILLS BUILDER — Hub design system
   3-panel workspace: list | editor | preview
═══════════════════════════════════════════════════════ */

:root {
  --dig-bg:              #f2f6fb;
  --dig-surface:         #ffffff;
  --dig-surface-soft:    #f8fafe;
  --dig-text:            #0b1424;
  --dig-text-2:          #26324a;
  --dig-muted:           #4b5873;
  --dig-muted-2:         #7a88a2;
  --dig-border:          #d8e2f0;
  --dig-border-strong:   #c0cedf;
  --dig-brand:           #273e57;
  --dig-brand-mid:       #1a2940;
  --dig-gold:            #c6a354;
  --dig-ok:              #0d7c3f;
  --dig-ok-bg:           #e9f6ef;
  --dig-warn:            #b45309;
  --dig-warn-bg:         #fdf3e6;
  --dig-err:             #b42318;
  --dig-err-bg:          #fdecea;
  --dig-info:            #0a6db0;
  --dig-info-bg:         #e6f1fa;
  --dig-radius-sm:       6px;
  --dig-radius-md:       10px;
  --dig-radius-lg:       14px;
  --dig-radius-xl:       20px;
  --dig-radius-full:     999px;
  --dig-shadow-sm:       0 1px 3px rgba(11,20,36,.06), 0 1px 2px rgba(11,20,36,.04);
  --dig-shadow-md:       0 4px 12px rgba(11,20,36,.08), 0 2px 6px rgba(11,20,36,.05);
  --dig-shadow-lg:       0 16px 40px rgba(11,20,36,.10), 0 4px 14px rgba(11,20,36,.06);
  --dig-topbar-h:        52px;
  --dig-list-w:          300px;
  --dig-preview-w:       340px;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body.dig-body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: var(--dig-text);
  background:
    radial-gradient(circle at 4% 0, rgba(39,62,87,.10) 0, transparent 50%),
    radial-gradient(circle at 96% 100%, rgba(198,163,84,.08) 0, transparent 48%),
    linear-gradient(180deg, #f5f9ff 0%, var(--dig-bg) 100%);
  overflow: hidden;
}

/* ── TOP BAR ──────────────────────────────────────── */
.dig-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--dig-topbar-h);
  flex-shrink: 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--dig-border);
  box-shadow: var(--dig-shadow-sm);
}

.dig-topbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 20px;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
}

.dig-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--dig-text);
}
.dig-brand-name { font-family: "Inter Tight", sans-serif; font-size: 14px; font-weight: 600; }
.dig-brand-name strong { font-weight: 700; color: var(--dig-brand); }
.dig-brand-sep { color: var(--dig-muted-2); margin: 0 2px; font-weight: 400; }
.dig-brand-page { color: var(--dig-muted); font-weight: 500; }

.dig-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7a5e18;
  background: rgba(198,163,84,.13);
  border: 1px solid rgba(198,163,84,.35);
  border-radius: var(--dig-radius-full);
  padding: 2px 9px;
}

.dig-topbar-spacer { flex: 1; }

.dig-topbar-actions { display: flex; align-items: center; gap: 8px; }

.dig-count-badge {
  font-size: 11px;
  color: var(--dig-muted);
  background: var(--dig-surface-soft);
  border: 1px solid var(--dig-border);
  border-radius: var(--dig-radius-full);
  padding: 3px 10px;
}

.dig-btn-back {
  font-size: 12px;
  font-weight: 500;
  color: var(--dig-muted);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--dig-border-strong);
  border-radius: var(--dig-radius-sm);
  transition: color .14s, border-color .14s;
}
.dig-btn-back:hover { color: var(--dig-text); border-color: var(--dig-muted-2); }

.dig-btn-logout {
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: var(--dig-muted);
  background: none;
  border: 1px solid var(--dig-border-strong);
  border-radius: var(--dig-radius-sm);
  padding: 5px 10px;
  transition: color .14s, border-color .14s;
}
.dig-btn-logout:hover { color: var(--dig-err); border-color: var(--dig-err); }

/* ── WORKSPACE ────────────────────────────────────── */
.dig-workspace {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── LIST PANEL (left) ────────────────────────────── */
.dig-panel-list {
  width: var(--dig-list-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--dig-border);
  background: var(--dig-surface);
  overflow: hidden;
}

.dig-panel-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--dig-border);
  flex-shrink: 0;
}

.dig-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dig-muted);
  margin: 0 0 10px;
}

.dig-btn-new-question {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--dig-brand);
  border: none;
  border-radius: var(--dig-radius-md);
  cursor: pointer;
  transition: background .14s, transform .14s;
  margin-bottom: 10px;
}
.dig-btn-new-question:hover { background: var(--dig-brand-mid); }

.dig-search {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--dig-text);
  background: var(--dig-surface-soft);
  border: 1.5px solid var(--dig-border);
  border-radius: var(--dig-radius-sm);
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.dig-search:focus { border-color: var(--dig-brand); box-shadow: 0 0 0 3px rgba(39,62,87,.12); }

.dig-filter-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.dig-filter-select {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 11px;
  font-family: inherit;
  color: var(--dig-text);
  background: var(--dig-surface-soft);
  border: 1.5px solid var(--dig-border);
  border-radius: var(--dig-radius-sm);
  outline: none;
  cursor: pointer;
  transition: border-color .14s;
}
.dig-filter-select:focus { border-color: var(--dig-brand); }

.dig-question-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px;
}

.dig-list-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--dig-muted-2);
  font-style: italic;
}

.dig-list-item {
  padding: 9px 10px;
  border-radius: var(--dig-radius-md);
  cursor: pointer;
  transition: background .12s;
  margin-bottom: 3px;
  border: 1.5px solid transparent;
}
.dig-list-item:hover { background: var(--dig-surface-soft); }
.dig-list-item.is-active {
  background: rgba(39,62,87,.07);
  border-color: rgba(39,62,87,.18);
}

.dig-list-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.dig-list-img-indicator { font-size: 11px; }

.dig-list-item-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--dig-text);
  line-height: 1.35;
  margin-bottom: 3px;
}

.dig-list-item-meta {
  font-size: 11px;
  color: var(--dig-muted-2);
}

/* State chips (list) */
.dig-state-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--dig-radius-full);
  border: 1px solid;
}
.dig-state-chip--active  { background: var(--dig-ok-bg);   border-color: rgba(13,124,63,.2);  color: var(--dig-ok); }
.dig-state-chip--review  { background: var(--dig-warn-bg); border-color: rgba(180,83,9,.2);  color: var(--dig-warn); }
.dig-state-chip--draft   { background: var(--dig-info-bg); border-color: rgba(10,109,176,.2); color: var(--dig-info); }

/* ── EDITOR PANEL (center) ────────────────────────── */
.dig-panel-editor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--dig-border);
}

.dig-editor-head {
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--dig-border);
  background: var(--dig-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dig-editor-head-left { flex: 1; min-width: 0; }

.dig-editor-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dig-muted);
  margin: 0;
}

.dig-edit-current {
  font-size: 12px;
  color: var(--dig-muted-2);
  margin: 2px 0 0;
}

/* State badge + cycle in header */
.dig-state-control { display: flex; align-items: center; gap: 8px; }

.dig-state-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--dig-radius-full);
  border: 1.5px solid;
}
.dig-state-badge[data-state="active"] { background: var(--dig-ok-bg);   border-color: rgba(13,124,63,.25);  color: var(--dig-ok); }
.dig-state-badge[data-state="review"] { background: var(--dig-warn-bg); border-color: rgba(180,83,9,.25);  color: var(--dig-warn); }
.dig-state-badge[data-state="draft"],
.dig-state-badge:not([data-state])    { background: var(--dig-info-bg); border-color: rgba(10,109,176,.25); color: var(--dig-info); }

.dig-btn-cycle {
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 12px;
  border-radius: var(--dig-radius-full);
  border: 1.5px solid var(--dig-border-strong);
  background: var(--dig-surface);
  color: var(--dig-muted);
  cursor: pointer;
  transition: all .14s;
  white-space: nowrap;
}
.dig-btn-cycle:hover:not(:disabled) { border-color: var(--dig-brand); color: var(--dig-brand); }
.dig-btn-cycle:disabled { opacity: .45; cursor: default; }

.dig-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Form fields */
.dig-field { display: flex; flex-direction: column; gap: 5px; }
.dig-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--dig-muted);
}

.dig-field input[type="text"],
.dig-field select,
.dig-field textarea,
.dig-input,
.dig-select,
.dig-textarea {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  color: var(--dig-text);
  background: var(--dig-surface-soft);
  border: 1.5px solid var(--dig-border-strong);
  border-radius: var(--dig-radius-md);
  padding: 8px 11px;
  outline: none;
  transition: border-color .14s, box-shadow .14s, background .14s;
  width: 100%;
  resize: vertical;
}
.dig-field input[type="text"]:focus,
.dig-field select:focus,
.dig-field textarea:focus,
.dig-input:focus,
.dig-select:focus,
.dig-textarea:focus {
  border-color: var(--dig-brand);
  background: var(--dig-surface);
  box-shadow: 0 0 0 3px rgba(39,62,87,.12);
}

.dig-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dig-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dig-option-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dig-option-key {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dig-muted);
}

/* ── IMAGE UPLOAD ─────────────────────────────────── */
.dig-image-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dig-image-zone {
  border: 2px dashed var(--dig-border-strong);
  border-radius: var(--dig-radius-lg);
  background: var(--dig-surface-soft);
  transition: border-color .14s, background .14s;
  cursor: pointer;
  overflow: hidden;
  min-height: 100px;
}
.dig-image-zone.is-drag-over {
  border-color: var(--dig-brand);
  background: rgba(39,62,87,.04);
}

.dig-image-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px;
  text-align: center;
  color: var(--dig-muted-2);
  cursor: pointer;
}
.dig-image-empty svg { opacity: .5; }
.dig-image-empty-label { font-size: 13px; font-weight: 500; }
.dig-image-empty-formats { font-size: 11px; color: var(--dig-muted-2); }

.dig-image-preview {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
}
.dig-image-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--dig-radius-sm);
  border: 1px solid var(--dig-border);
  background: var(--dig-border);
}
.dig-image-meta-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dig-image-filename { font-size: 12px; font-weight: 600; color: var(--dig-text); word-break: break-all; }
.dig-image-filesize { font-size: 11px; color: var(--dig-muted-2); }
.dig-image-actions { display: flex; gap: 6px; margin-top: 4px; }

.dig-btn-img-action {
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: var(--dig-radius-sm);
  border: 1.5px solid var(--dig-border-strong);
  background: var(--dig-surface);
  color: var(--dig-muted);
  cursor: pointer;
  transition: all .12s;
}
.dig-btn-img-action:hover { border-color: var(--dig-muted-2); color: var(--dig-text); }
.dig-btn-img-action.is-danger:hover { border-color: var(--dig-err); color: var(--dig-err); }

.dig-image-hidden-input { display: none; }

.dig-alt-input {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  color: var(--dig-text);
  background: var(--dig-surface-soft);
  border: 1.5px solid var(--dig-border-strong);
  border-radius: var(--dig-radius-md);
  padding: 7px 11px;
  width: 100%;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.dig-alt-input:focus { border-color: var(--dig-brand); box-shadow: 0 0 0 3px rgba(39,62,87,.12); }

/* ── EDITOR FOOTER ────────────────────────────────── */
.dig-editor-footer {
  border-top: 1px solid var(--dig-border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--dig-surface);
  flex-shrink: 0;
}

.dig-status {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--dig-muted);
  padding: 4px 0;
}
.dig-status[data-state="ok"]    { color: var(--dig-ok); }
.dig-status[data-state="error"] { color: var(--dig-err); }

.dig-btn-action {
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 7px 14px;
  border-radius: var(--dig-radius-full);
  border: 1.5px solid;
  cursor: pointer;
  transition: all .14s;
  white-space: nowrap;
}
.dig-btn-action--ghost {
  color: var(--dig-muted);
  background: var(--dig-surface);
  border-color: var(--dig-border-strong);
}
.dig-btn-action--ghost:hover { color: var(--dig-text); border-color: var(--dig-muted-2); }
.dig-btn-action--danger {
  color: var(--dig-err);
  background: var(--dig-surface);
  border-color: rgba(180,35,24,.3);
}
.dig-btn-action--danger:hover { background: var(--dig-err-bg); border-color: rgba(180,35,24,.5); }
.dig-btn-action--primary {
  color: #fff;
  background: var(--dig-brand);
  border-color: var(--dig-brand);
}
.dig-btn-action--primary:hover { background: var(--dig-brand-mid); border-color: var(--dig-brand-mid); }
.dig-btn-action--primary:disabled { opacity: .5; cursor: default; }

/* ── PREVIEW PANEL (right) ────────────────────────── */
.dig-panel-preview {
  width: var(--dig-preview-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--dig-surface-soft);
}

.dig-preview-head {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--dig-border);
  background: var(--dig-surface);
  flex-shrink: 0;
}
.dig-preview-head-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dig-muted);
  margin: 0;
}

.dig-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dig-preview-card {
  background: var(--dig-surface);
  border: 1px solid var(--dig-border);
  border-radius: var(--dig-radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--dig-shadow-sm);
}

.dig-preview-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dig-preview-source-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7a5e18;
  background: rgba(198,163,84,.12);
  border: 1px solid rgba(198,163,84,.3);
  border-radius: var(--dig-radius-full);
  padding: 2px 8px;
}

.dig-preview-diff-chip {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--dig-muted-2);
  background: var(--dig-surface-soft);
  border: 1px solid var(--dig-border);
  border-radius: var(--dig-radius-full);
  padding: 2px 8px;
}

.dig-preview-prompt {
  font-size: 14px;
  font-weight: 700;
  color: var(--dig-text);
  line-height: 1.4;
  margin: 0;
}

.dig-preview-passage {
  font-size: 13px;
  color: var(--dig-text-2);
  line-height: 1.65;
  white-space: pre-wrap;
  background: var(--dig-surface-soft);
  border-left: 3px solid var(--dig-border-strong);
  padding: 8px 12px;
  border-radius: 0 var(--dig-radius-sm) var(--dig-radius-sm) 0;
  max-height: 160px;
  overflow-y: auto;
}
.dig-preview-passage:empty { display: none; }

.dig-preview-image-wrap {
  border-radius: var(--dig-radius-md);
  overflow: hidden;
  background: var(--dig-border);
  border: 1px solid var(--dig-border);
}
.dig-preview-image-wrap img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  background: #fff;
}

.dig-preview-options { display: flex; flex-direction: column; gap: 6px; }

.dig-preview-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--dig-radius-md);
  border: 1.5px solid var(--dig-border);
  background: var(--dig-surface-soft);
  font-size: 13px;
  transition: background .12s;
}
.dig-preview-option.is-correct {
  background: var(--dig-ok-bg);
  border-color: rgba(13,124,63,.25);
}

.dig-preview-opt-letter {
  font-weight: 700;
  font-size: 12px;
  color: var(--dig-muted);
  flex-shrink: 0;
  width: 16px;
}
.dig-preview-option.is-correct .dig-preview-opt-letter { color: var(--dig-ok); }
.dig-preview-opt-text { flex: 1; color: var(--dig-text-2); line-height: 1.4; }
.dig-preview-correct-mark { color: var(--dig-ok); font-weight: 700; flex-shrink: 0; }

.dig-preview-answer-row {
  font-size: 12px;
  font-weight: 600;
  color: var(--dig-ok);
}
.dig-preview-answer-row:empty { display: none; }

.dig-preview-explanation {
  font-size: 12px;
  color: var(--dig-muted);
  background: var(--dig-surface-soft);
  border-radius: var(--dig-radius-sm);
  padding: 8px 10px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.dig-preview-explanation:empty { display: none; }

/* ── HIDDEN elements needed by JS ─────────────────── */
#builder-access-warning { display: none !important; }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 1100px) {
  .dig-panel-preview { width: 280px; }
}
@media (max-width: 900px) {
  body.dig-body { overflow: auto; }
  .dig-workspace { flex-direction: column; height: auto; overflow: visible; }
  .dig-panel-list { width: 100%; max-height: 280px; border-right: none; border-bottom: 1px solid var(--dig-border); }
  .dig-panel-preview { width: 100%; border-left: none; border-top: 1px solid var(--dig-border); }
  .dig-panel-editor { flex: none; }
  .dig-field-row,
  .dig-options-grid { grid-template-columns: 1fr; }
}