* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Safe-area insets for the iPhone notch / home bar. Moved here from
       dacum-responsive.css (Phase 4): it is not a media query, and a
       responsive sheet carrying base rules is a sheet whose load order
       becomes load-bearing by accident. */
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* 3.56.0: the warm grey page of Module Builder (was the purple gradient) */
    background: #E8E9E6;
    min-height: 100vh;
    padding: 20px;
    padding-top: 60px; /* toolbar height — always applied regardless of cache state */
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background-color: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

h1 {
    color: #667eea;
    margin-bottom: 10px;
    font-size: 2.5em;
    text-align: center;
    font-weight: 700;
}

h2 {
    color: #2c3e50;
    font-size: 1.8em;
    margin-bottom: 20px;
    font-weight: 600;
}

h3 {
    color: #34495e;
    font-size: 1.4em;
    margin-bottom: 15px;
    font-weight: 600;
}

h4 {
    color: #555;
    font-size: 1.2em;
    margin-bottom: 10px;
    font-weight: 600;
}

input[type="text"], textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1.05em;
    margin-bottom: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="text"]:focus, textarea:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

button {
    cursor: pointer;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.05em;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* PHASE 4: the lift used to be `transform: translateY(-2px)`, which is a
   layout-affecting property and therefore clipped by any overflow:hidden
   ancestor — the toolbar, card views, the accordion. dacum-fixes.css then
   cancelled it globally with !important and re-created the effect with
   filter + box-shadow, and dacum-responsive.css cancelled it again for the
   toolbar. Three files arguing about one property.

   The transform is gone at the source, so there is nothing left to cancel
   and the !important arms race is over. filter and box-shadow do not
   participate in layout, so they cannot be clipped. */
button:hover {
    filter: brightness(1.04);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

button:active {
    transform: scale(0.97);   /* inward scale never clips */
    filter: none;
}

/* A disabled button must not look pressable. */
button[disabled]:hover,
button:disabled:hover {
    filter: none;
    box-shadow: none;
    transform: none;
}
button[disabled]:active,
button:disabled:active {
    transform: none;
}

/* 3.58.0: the former green buttons use the slate of the Additional Info
   section buttons (.btn-format): #f1f5f9 / #475569 / #cbd5e1. */
.btn-add {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: none;
}

.btn-add:hover {
    box-shadow: none;
    background: #e2e8f0;
    color: #1e293b;
    border-color: #94a3b8;
}

.btn-remove {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.btn-remove:hover {
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4);
}

.btn-export {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 14px 28px;
    font-size: 1.15em;
}

.btn-export:hover {
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

.btn-export-word {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 14px 28px;
    font-size: 1.15em;
}

.btn-export-word:hover {
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
}

.btn-export-json {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 14px 28px;
    font-size: 1.15em;
}

.btn-export-json:hover {
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
}

.btn-save-data {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    padding: 14px 28px;
    font-size: 1.15em;
}

.btn-save-data:hover {
    box-shadow: none;
    background: #e2e8f0;
    color: #1e293b;
    border-color: #94a3b8;
}

.btn-load-data {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 14px 28px;
    font-size: 1.15em;
}

.btn-load-data:hover {
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
}

.btn-clear-all {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 14px 28px;
    font-size: 1.15em;
}

.btn-clear-all:hover {
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4);
}

input[type="date"] {
    padding: 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1.05em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: border-color 0.3s, box-shadow 0.3s;
    width: 100%;
}

input[type="date"]:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.info-box {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 6px solid #f59e0b;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: relative;
}

.info-box h3 {
    color: #d97706;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-box p {
    font-size: 1em;
    line-height: 1.3;
    color: #78716c;
    margin-bottom: 6px;
}

.info-box .example-section {
    margin-top: 12px;
    font-style: italic;
    background: rgba(255,255,255,0.7);
    padding: 12px;
    border-radius: 8px;
}

.info-box .example-section p {
    margin-bottom: 2px;
}

.btn-toggle-info {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 6px 14px;
    font-size: 0.85em;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-toggle-info:hover {
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

.image-upload-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.image-preview {
    width: 95px;
    height: 95px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f9fafb;
}

.image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.image-preview.has-image {
    border: 2px solid #10b981;
    background: white;
}

/* 3.57.0: same look as the Additional Info section buttons
   (.btn-format / .btn-clear-section): slate at rest, red tint for
   the destructive one, solid red only on hover. */
.btn-add-image,
.btn-remove-image {
    align-items: center;
    gap: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.88em;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    padding: 8px 16px;
    box-shadow: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-add-image {
    background: #f1f5f9;
    color: #475569;
}

.btn-add-image:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #94a3b8;
    box-shadow: none;
    filter: none;
}

.btn-remove-image {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.btn-remove-image:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    box-shadow: none;
    filter: none;
}

.btn-add-image:focus-visible,
.btn-remove-image:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.duty-row, .ks-row, .behavior-row {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #7dd3fc;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.duty-header, .ks-header, .behavior-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.task-list, .ks-list, .behavior-list {
    margin-left: 20px;
}

.task-item, .ks-item, .behavior-item {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: center;
}

.task-label, .ks-label, .behavior-label {
    width: 90px;
    color: #666;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 1.05em;
}

/* ── View Toggle Button ─────────────────────────────── */
.dcv-toggle-btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 0.88em;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(59,130,246,0.3);
  white-space: nowrap;
}
.dcv-toggle-btn:hover { background: #2563eb; }
.dcv-toggle-btn.is-card { background: #fff; color: #3b82f6; border: 2px solid #3b82f6; }
.dcv-toggle-btn.is-card:hover { background: #eff6ff; }

/* ════════════════════════════════════════════════════
   CARD VIEW LAYOUT  —  redesigned for DACUM workshops
   Goals: no internal scrollbars, auto height, equal
   heights per row, multi-line wrapping text.
   ════════════════════════════════════════════════════ */

/* Reset duty-row wrapper in card mode */
#dutiesContainer.card-view-mode .duty-row {
  background: none;
  border: none;
  padding: 0 0 4px 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}

/* ── Row: one duty + its tasks ────────────────────── */
.dcv-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 14px 4px 12px;   /* top clears delete btn overhang */
  border-bottom: 1px solid #e2e8f0;
}
.dcv-row:last-child { border-bottom: none; }

/* ── Blue Duty Card ───────────────────────────────── */
.dcv-duty-card {
  flex-shrink: 0;
  width: 180px;
  min-width: 180px;
  height: auto;
  min-height: 120px;
  background: linear-gradient(145deg, #bfdbfe, #93c5fd);
  border: 2px solid #60a5fa;
  border-radius: 14px;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  box-shadow: 0 3px 10px rgba(96,165,250,0.25);
  overflow: visible;
}

.dcv-duty-label {
  flex-shrink: 0;
  font-size: 0.7em;
  font-weight: 800;
  color: #1e40af;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 6px;
  padding-right: 20px; /* room for delete btn */
}

/* Auto-expanding duty textarea */
.dcv-duty-input {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.88em;
  font-style: italic;
  color: #1e3a8a;
  font-family: inherit;
  outline: none;
  resize: none;
  overflow: hidden;
  height: auto;
  min-height: 72px;
  line-height: 1.5;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  field-sizing: content;
  transition: background 0.15s;
}
.dcv-duty-input:focus {
  background: rgba(255,255,255,0.25);
}
.dcv-duty-input::placeholder { color: rgba(30,64,175,0.45); }

/* ── Red close button ─────────────────────────────── */
.dcv-close-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: 2px solid #fff;
  font-size: 0.7em;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.15s, transform 0.12s;
  padding: 0;
  z-index: 20;   /* above card, never clipped */
  /* Pinned so the touch-target min-height in dacum-responsive.css cannot
     stretch this circle into a vertical oval. */
  min-width: 22px;
  min-height: 22px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
.dcv-close-btn:hover { background: #b91c1c; transform: scale(1.15); }

/* ── Tasks area ───────────────────────────────────── */
.dcv-tasks-area {
  display: flex;
  align-items: stretch;
  flex: 1;
  overflow: hidden;
  margin-left: 12px;
}

/* Scroll strip */
.dcv-tasks-scroll {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 10px 6px 10px;  /* top padding so delete btn never clips */
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #93c5fd #e0f2fe;
}
.dcv-tasks-scroll::-webkit-scrollbar        { height: 5px; }
.dcv-tasks-scroll::-webkit-scrollbar-track  { background: #e0f2fe; border-radius: 4px; }
.dcv-tasks-scroll::-webkit-scrollbar-thumb  { background: #60a5fa; border-radius: 4px; }

/* ── Yellow Task Card ─────────────────────────────── */
.dcv-task-card {
  flex-shrink: 0;
  width: 180px;
  min-width: 180px;
  height: auto;
  min-height: 120px;
  background: linear-gradient(145deg, #fef9c3, #fef08a);
  border: 2px solid #facc15;
  border-radius: 14px;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  box-shadow: 0 3px 10px rgba(250,204,21,0.22);
  overflow: visible;
}

.dcv-task-label {
  flex-shrink: 0;
  font-size: 0.7em;
  font-weight: 800;
  color: #854d0e;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 6px;
  padding-right: 20px;
}

/* Auto-expanding task textarea */
.dcv-task-input {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.86em;
  font-style: italic;
  color: #713f12;
  font-family: inherit;
  outline: none;
  resize: none;
  overflow: hidden;
  height: auto;
  min-height: 72px;
  line-height: 1.5;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  field-sizing: content;
  transition: background 0.15s;
}
.dcv-task-input:focus {
  background: rgba(255,255,255,0.25);
}
.dcv-task-input::placeholder { color: rgba(133,77,14,0.45); }

/* ── ＋ Task button — inside scroll strip ─────────── */
.dcv-add-task-btn {
  flex-shrink: 0;
  align-self: center;        /* vertically centred      */
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  box-shadow: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.84em;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  height: fit-content;
  transition: background 0.15s, transform 0.1s;
}
.dcv-add-task-btn:hover  { background: #e2e8f0; color: #1e293b; border-color: #94a3b8; box-shadow: none; filter: none; }
.dcv-add-task-btn:active { transform: scale(0.97); }

/* ── ＋ Add Duty button ────────────────────────────── */
.dcv-add-duty-btn {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  box-shadow: none;
  border-radius: 10px;
  padding: 11px 24px;
  font-size: 0.92em;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  transition: background 0.15s, transform 0.1s;
}
.dcv-add-duty-btn:hover  { background: #e2e8f0; color: #1e293b; border-color: #94a3b8; box-shadow: none; filter: none; }
.dcv-add-duty-btn:active { transform: scale(0.97); }

/* 3.110.0: the row under the chart — ＋ Add Duty at one end, the
   verified DACUM chart button at the other (it used to sit above the
   chart and take its space). */
.duties-foot-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 14px; margin-top: 14px;
}
.duties-foot-row .dcv-add-duty-btn { margin-top: 0; }

/* ── Fallback for browsers without field-sizing ─────
   Uses JS-free CSS clamp trick: textarea grows via
   scrollHeight when user types (no resize handle)    */
@supports not (field-sizing: content) {
  .dcv-duty-input,
  .dcv-task-input {
    overflow: hidden;
    min-height: 72px;
  }
}

/* Hide table-view DOM elements when card mode active  */
#dutiesContainer.card-view-mode .duty-row > .duty-header,
#dutiesContainer.card-view-mode .duty-row > input[data-duty-id],
#dutiesContainer.card-view-mode .duty-row > .task-list,
#dutiesContainer.card-view-mode .duty-row > .btn-add { display: none !important; }

.button-container { display: none; }   /* moved to fixed toolbar */

/* ═══════════════════════════════════════════════════════
   HELP CENTER STYLES
   ═══════════════════════════════════════════════════════ */

/* Header banner */
.hc-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 32px;
    /* 3.86.4: AI-card blue (was the indigo/violet gradient). */
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: 16px;
    margin-bottom: 28px;
    box-shadow: 0 6px 24px rgba(2,132,199,0.25);
}
.hc-header-icon {
    font-size: 2.4em;
    line-height: 1;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 10px 14px;
}
.hc-title {
    margin: 0;
    font-size: 1.6em;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}
.hc-subtitle {
    margin: 4px 0 0;
    font-size: 0.9em;
    color: rgba(255,255,255,0.85);
}

/* Card grid */
.hc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 780px) { .hc-grid { grid-template-columns: 1fr; } }

/* Cards */
.hc-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.hc-card-full { grid-column: 1 / -1; }
.hc-card-warm { background: #fffbeb; border-color: #fde68a; }

/* Card header row */
.hc-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.hc-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    flex-shrink: 0;
}
.hc-card-title {
    margin: 0;
    font-size: 1.1em;
    font-weight: 800;
    color: #0f172a;
}
.hc-card-desc {
    color: #64748b;
    font-size: 0.9em;
    line-height: 1.7;
    margin: 0 0 20px;
}

/* Steps list */
.hc-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.hc-steps li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 14px;
    background: rgba(255,255,255,0.7);
    border-radius: 8px;
    border: 1px solid rgba(102,126,234,0.15);
    font-size: 0.9em;
    color: #334155;
    line-height: 1.5;
}

/* Tips block — single card matching screenshot style */
.hc-tips-block {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(102,126,234,0.2);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hc-tips-block p {
    margin: 0;
    font-size: 0.88em;
    color: #334155;
    font-style: italic;
    line-height: 1.6;
}
.hc-tips-block strong { font-style: normal; color: #1e293b; }
.hc-step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg,#0ea5e9,#0284c7);
    color: #fff;
    font-size: 0.78em;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Compact steps — two-column grid */
.hc-steps-compact {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
@media (max-width: 700px) { .hc-steps-compact { grid-template-columns: 1fr; } }
.hc-steps-compact li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 0.86em;
    color: #334155;
    line-height: 1.5;
}
.hc-steps-compact .hc-step-num { flex-shrink: 0; }

/* Tips single row bar */
.hc-tips-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 11px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 0.84em;
    color: #78350f;
    line-height: 1.5;
}
.hc-tips-sep {
    width: 1px; height: 16px;
    background: #fcd34d; flex-shrink: 0;
}
@media (max-width: 700px) { .hc-tips-sep { display: none; } }

.hc-tip-icon { font-size: 1.1em; flex-shrink: 0; }

/* User Guide buttons */
.hc-btn-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.hc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 9px;
    font-size: 0.88em;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}
.hc-btn-primary {
    background: linear-gradient(135deg,#0ea5e9,#0284c7);
    color: #fff;
    box-shadow: 0 3px 10px rgba(2,132,199,0.35);
}
.hc-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.hc-btn-secondary {
    background: #f8fafc;
    color: #475569;
    border: 1.5px solid #cbd5e1;
}
.hc-btn-secondary:hover { background: #e2e8f0; }

/* QR code */
.hc-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.hc-qr-img {
    width: 189px;
    height: 189px;
    border-radius: 10px;
    image-rendering: pixelated;
}
.hc-qr-placeholder {
    width: 189px;
    height: 189px;
    border-radius: 10px;
    background: #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 2em;
    color: #94a3b8;
}
.hc-qr-caption {
    margin: 0;
    font-size: 0.8em;
    color: #64748b;
    text-align: center;
    line-height: 1.5;
}

/* Creator card */
.hc-creator {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg,#f0f9ff,#e0f2fe);
    border-radius: 12px;
    margin-bottom: 18px;
}
.hc-creator-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg,#0ea5e9,#0284c7);
    color: #fff;
    font-size: 1.1em;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hc-creator-name { margin: 0; font-size: 1em; font-weight: 800; color: #0c4a6e; }
.hc-creator-role { margin: 2px 0 0; font-size: 0.82em; color: #0369a1; font-weight: 600; }
.hc-creator-sub  { margin: 2px 0 0; font-size: 0.8em;  color: #64748b; }

/* Contact links */
.hc-contact-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.hc-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.hc-contact-item:hover { background: #eff6ff; border-color: #93c5fd; }
.hc-contact-icon { font-size: 1.3em; flex-shrink: 0; }
.hc-contact-label {
    display: block;
    font-size: 0.76em;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.hc-contact-value { display: block; font-size: 0.88em; font-weight: 600; color: #3b82f6; }

/* Callout */
.hc-callout {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
}
.hc-callout-icon { font-size: 1.3em; flex-shrink: 0; }
.hc-callout strong { display: block; font-size: 0.9em; color: #92400e; margin-bottom: 4px; }
.hc-callout p { margin: 0; font-size: 0.85em; color: #78350f; line-height: 1.6; }

/* ── Fixed Top Toolbar ───────────────────────────────── */
/* ═══════════════════════════════════════════════════
   TOP TOOLBAR — Figma style
   Light background, pill-shaped buttons with soft
   colored icons/fills, subtle shadows, no gradients.
   ═══════════════════════════════════════════════════ */
#dacumTopToolbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 60px;
    background: #f7f7f8;
    border-bottom: 1px solid #e5e5e6;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 4px;
    z-index: 600;          /* above sidebar z-index:300 */
    box-sizing: border-box;
    /* Must not clip the hover shadow of its buttons. Note .dtb-center is
       the exception — it owns overflow-x:auto so the middle group can
       scroll to reach Clear All on a phone. */
    overflow: visible;
}
.dtb-left  { display:flex; align-items:center; gap:5px; flex-shrink:0; overflow:visible; }
.dtb-center{
    display:flex; align-items:center; gap:4px;
    flex:1; min-width:0;
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
    scrollbar-width: none;
}
.dtb-center::-webkit-scrollbar { display: none; }
.dtb-right { display:flex; align-items:center; gap:4px; flex-shrink:0; margin-left:auto; overflow:visible; }
.dtb-divider {
    width: 1px; height: 28px;
    background: #d9d9db; margin: 0 4px;
    flex-shrink: 0;
}
/* Figma-style icon — colored square with rounded corners */
.dtb-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: visible;
}
/* Figma pill base */
.dtb-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px;
    border: 1.5px solid #e2e2e4;
    border-radius: 99px;          /* full pill */
    background: #ffffff;
    color: #1a1a1a;
    font-size: 0.83em; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dtb-btn:hover {
    background: #f0f0f2;
    border-color: #c8c8cc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.dtb-btn:active { transform: scale(0.97); box-shadow: none; }

/* Snapshot — amber icon tint */
.dtb-snapshot {
    background: #fff8ee;
    border-color: #fcd68a;
    color: #92570a;
}
.dtb-snapshot:hover { background: #fff0d4; border-color: #f0b64a; }

/* Export Project — indigo tint */
.dtb-primary {
    background: #eef0ff;
    border-color: #b5bbf9;
    color: #3b3fce;
}
.dtb-primary:hover { background: #e0e4ff; border-color: #8891f2; }

/* Import Project — emerald tint */
.dtb-secondary {
    background: #edfaf4;
    border-color: #86e0b5;
    color: #0e7a4a;
}
.dtb-secondary:hover { background: #d5f4e6; border-color: #4dbb88; }

/* PDF / Word — neutral */
.dtb-ghost {
    background: #ffffff;
    border-color: #e2e2e4;
    color: #444447;
}
.dtb-ghost:hover { background: #f0f0f2; border-color: #c4c4c8; }

/* Clear All — red tint */
.dtb-danger {
    background: #fff0f0;
    border-color: #f9b3b3;
    color: #c41c1c;
}
.dtb-danger:hover { background: #ffe0e0; border-color: #f07070; }

/* Undo / Redo — neutral pill */
.dtb-undo {
    display: inline-flex; align-items: center;
    background: #ffffff; color: #444447;
    border: 1.5px solid #e2e2e4; border-radius: 99px;
    padding: 7px 13px; font-size: 0.82em; font-weight: 600;
    cursor: pointer; transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dtb-undo:not([disabled]):hover {
    background: #eef0ff; color: #3b3fce; border-color: #b5bbf9;
}
.dtb-undo[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Snapshot lens */
.dtb-lens {
    background: #ffffff; border: 1.5px solid #e2e2e4;
    border-radius: 99px; font-size: 1em;
    cursor: pointer; padding: 7px 11px;
    transition: background 0.12s, border-color 0.12s;
    line-height: 1; color: #444447;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dtb-lens:hover { background: #fff8ee; border-color: #fcd68a; color: #92570a; }

/* ── Snapshot Modal ────────────────────────────────── */
#snapModal { position: fixed; inset: 0; z-index: 9000; }
#snapModalOverlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.25);
}
#snapModalBox {
  position: absolute;
  top: 68px; right: 14px;
  width: 320px;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.08);
  font-family: inherit;
  border: 1px solid #e5e5e6;
}
#snapModalHeader {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: #f7f7f8;
  border-bottom: 1px solid #e5e5e6;
  font-size: 0.82em; font-weight: 700;
  color: #3b3fce; letter-spacing: 0.05em;
}
#snapModalClose {
  background: none; border: none; color: #9ca3af;
  font-size: 1em; cursor: pointer; padding: 2px 6px;
  border-radius: 4px;
}
#snapModalClose:hover { background: #f0f0f2; color: #1a1a1a; }
#snapshotList {
  max-height: 340px; overflow-y: auto; padding: 10px;
  scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent;
}
.snap-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  background: #f7f7f8; border: 1px solid #e5e5e6;
  margin-bottom: 7px;
}
.snap-item:hover { background: #f0f4ff; border-color: #b5bbf9; }
.snap-meta { flex: 1; min-width: 0; }
.snap-name {
  display: block; font-weight: 600; font-size: 0.88em;
  color: #1a1a1a; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.snap-date { display: block; font-size: 0.74em; color: #9ca3af; margin-top: 2px; }
.snap-actions { display: flex; gap: 5px; flex-shrink: 0; }
.snap-btn {
  border: 1.5px solid transparent; border-radius: 99px; padding: 4px 11px;
  font-size: 0.78em; font-weight: 700; cursor: pointer;
}
.snap-restore { background: #eef0ff; border-color: #b5bbf9; color: #3b3fce; }
.snap-restore:hover { background: #e0e4ff; border-color: #8891f2; }
.snap-delete  { background: #fff0f0; border-color: #f9b3b3; color: #c41c1c; }
.snap-delete:hover { background: #ffe0e0; border-color: #f07070; }
#snapModalFoot {
  padding: 10px;
  border-top: 1px solid #e5e5e6;
  background: #f7f7f8;
}
#snapModalSave {
  width: 100%; padding: 8px;
  background: #eef0ff;
  color: #3b3fce; border: 1.5px solid #b5bbf9; border-radius: 99px;
  font-size: 0.85em; font-weight: 700; cursor: pointer;
}
#snapModalSave:hover { background: #e0e4ff; border-color: #8891f2; }
.snap-empty {
  color: #9ca3af; font-size: 0.83em;
  text-align: center; padding: 20px 0;
}

/* Push page content below fixed toolbar */
body { padding-top: 60px; box-sizing: border-box; }

/* ── Snapshot Panel ─────────────────────────────────── */
#snapshotPanel {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
#snapshotPanel h3 {
    margin: 0 0 10px;
    font-size: 0.95em;
    color: #374151;
    display: flex; align-items: center; gap: 8px;
}
.snap-item {
    display: flex; align-items: center;
    justify-content: space-between; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid #e5e7eb; margin-bottom: 6px;
    background: #f9fafb;
}
.snap-item:hover { background: #f0f4ff; }
.snap-meta { flex: 1; min-width: 0; }
.snap-name { display:block; font-weight:600; font-size:0.88em; color:#1f2937;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.snap-date { display:block; font-size:0.75em; color:#9ca3af; margin-top:2px; }
.snap-actions { display:flex; gap:5px; flex-shrink:0; }
.snap-btn { border:none; border-radius:5px; padding:4px 10px;
            font-size:0.78em; font-weight:600; cursor:pointer; }
.snap-restore { background:#667eea; color:#fff; }
.snap-restore:hover { background:#4f46e5; }
.snap-delete  { background:#fee2e2; color:#dc2626; }
.snap-delete:hover { background:#fecaca; }

.copyright {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #e0e0e0;
    color: #7f8c8d;
    font-size: 1.05em;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.icon {
    margin-right: 8px;
}

.hidden {
    display: none;
}

/* PHASE 4: the tab component was defined twice — here, and again in
   dacum-typography.css which re-skinned it completely (pill radius, grey
   palette, its own padding). Typography loaded later so it won, which
   made most of the original definition below dead code.

   Worse, typography also loaded AFTER dacum-responsive.css, so its
   base-level `font-size: 1.05em !important` beat the !important tab
   font-sizes inside all three mobile breakpoints — those overrides had
   silently stopped working. Consolidating here, ahead of the responsive
   sheet, brings them back to life.

   The values below are the ones that were actually rendering. */
.tabs {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 3px solid #e0e0e0;
    gap: 8px;
    flex-wrap: wrap;
}

.tab {
    padding: 8px 14px;
    cursor: pointer;
    border: none;
    background-color: #f3f4f6;
    border-radius: 999px;
    font-size: 1.05em;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #374151;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}

.tab:hover {
    background: #e0e0e0;
    color: #333;
}

.tab.active {
    /* The shorthand sets background-image; the background-color line that
       follows overrides only the colour layer, which the gradient paints
       over. Both are kept because that is exactly what was rendering when
       the declarations lived in two separate files. */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-color: #667eea;
    color: #ffffff;
    border: none;
    font-size: 1.05em;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(3px);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.two-column {
    display: flex;
    gap: 25px;
}

.column {
    flex: 1;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
    font-size: 1.1em;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* 3.136.0: a floating notice, like Module Builder's. It sat at the very
   bottom of the page, so on a long tab or a short screen the message
   appeared out of sight and the action looked as if it had done nothing.
   Fixed to the viewport, it is always seen; click it to dismiss. */
.status {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 100000;
    width: max-content;
    max-width: min(92vw, 560px);
    margin: 0;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    font-size: 1.05em;
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.status.info {
    background: #dbeafe;
    color: #1e40af;
    border: 2px solid #3b82f6;
}

.status.success {
    background: #d1fae5;
    color: #065f46;
    border: 2px solid #10b981;
}

.status.error {
    background: #fee2e2;
    color: #991b1b;
    border: 2px solid #ef4444;
}

.section-container {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.section-header-editable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-header-editable h3 {
    margin: 0;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.3s;
}

.section-header-editable h3[contenteditable="true"] {
    background: #fff;
    border: 2px solid #667eea;
    outline: none;
    cursor: text;
}

/* ── Section header action buttons ────────────────────────────
   Rename / Number / Bullet / Clear.

   These four used to be four different saturated gradients — amber,
   two purples and a red — sitting side by side above every section.
   Four competing colours on a row of secondary controls read as
   decoration, and they out-shouted the section heading itself.

   They are now built from the SAME token set as .btn-back-step in
   dacum-components.css: the neutral slate palette, 8px radius, 1px
   border, 600 weight, 0.15s transition. Identical reasoning too —
   these are utilities acting ON the content, not the content or the
   primary action of the tab.

   Clear keeps its colour, because it is the only DESTRUCTIVE one and
   must stay distinguishable at a glance. It is toned down to a red
   TINT at rest and goes solid red on hover: still unmistakably the
   dangerous button, without shouting at the user for the whole
   session. It also keeps its text label while the other three are
   icon-only — a control that wipes a section should be the clearest
   thing in the row, not the most cryptic. */

.btn-rename,
.btn-format,
.btn-clear-section,
.btn-remove-section {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.88em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    padding: 8px 16px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-rename:hover,
.btn-format:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #94a3b8;
}

/* Icon-only variant. Square, so the three sit as an even group; the
   label lives in title + aria-label, never in the visible text. */
.btn-icon {
    padding: 0;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    pointer-events: none;   /* clicks always land on the button */
}

/* Keyboard users get the same affordance as mouse users. Without this
   an icon-only button is invisible to tab navigation. */
.btn-rename:focus-visible,
.btn-format:focus-visible,
.btn-clear-section:focus-visible,
.btn-remove-section:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Heading is in edit mode — the rename button is a live toggle, so it
   has to look pressed rather than leaving the user to guess. */
.btn-rename[aria-pressed="true"] {
    background: #667eea;
    color: #ffffff;
    border-color: #667eea;
}

.btn-clear-section,
.btn-remove-section {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.btn-clear-section:hover,
.btn-remove-section:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

.btn-ai-generate:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}

/* Loading Modal */
.loading-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-modal.active {
    display: flex;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-content {
    background: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-content h3 {
    color: #667eea;
    margin: 0 0 10px 0;
    font-size: 1.3em;
}

.loading-content p {
    color: #666;
    margin: 0;
    font-size: 1em;
}

/* Usage Limit Badge */
.usage-badge {
    display: inline-block;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 10px;
}

.usage-badge.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.usage-badge.limit {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Task Verification Tab Styles */
.verification-mode-selector {
    /* 3.60.0: the sky-blue of the AI cards (was purple) */
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    text-align: center;
}

.verification-mode-selector h3 {
    color: white;
    margin: 0 0 15px 0;
}

.mode-options {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.mode-option {
    background: white;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mode-option input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.mode-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.mode-option label {
    cursor: pointer;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.duty-accordion {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s;
}

.duty-accordion:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.duty-accordion-header {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    border-bottom: 2px solid transparent;
}

.duty-accordion-header:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.duty-accordion-header.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom-color: #5a67d8;
}

.duty-title {
    font-size: 1.1em;
    font-weight: 600;
    flex: 1;
}

.duty-toggle {
    font-size: 1.3em;
    transition: transform 0.3s;
}

.duty-accordion-header.active .duty-toggle {
    transform: rotate(180deg);
}

.duty-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.duty-accordion-content.active {
    max-height: 5000px;
    transition: max-height 0.5s ease-in;
}

.verification-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

/* Extended mode requires more width - enable horizontal scroll */
.workflow-extended .verification-table {
    min-width: 1400px;
}

.verification-table th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.95em;
}

.verification-table th:first-child {
    border-top-left-radius: 8px;
}

.verification-table th:last-child {
    border-top-right-radius: 8px;
}

.verification-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.verification-table tr:last-child td {
    border-bottom: none;
}

.verification-table tr:hover {
    background: #f9fafb;
}

.task-text {
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

.rating-scale {
    display: flex;
    gap: 15px;
    align-items: center;
    /* One row, always. Wrapping split the 0-1-2-3 scale into two rows of
       two, which reads as two separate controls and doubles the height of
       every task row. It scrolls sideways instead; the bar is hidden here
       and revealed on touch devices in dacum-responsive.css. */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.rating-scale::-webkit-scrollbar { display: none; }

.rating-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.rating-option input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    /* Every axis pinned. dacum-responsive.css gives all radios
       min-height:44px for touch targets, which stretched a 20px radio
       into a 20x44 oval and pushed every task row taller. The
       .rating-option wrapper (radio + number label) already clears 44px,
       so the tap target is unaffected. */
    min-width: 20px;
    min-height: 20px;
    flex: 0 0 auto;
}

.rating-option label {
    font-size: 0.85em;
    color: #666;
    font-weight: 600;
    cursor: pointer;
}

.no-duties-message {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    margin: 30px 0;
}

.no-duties-message h3 {
    color: #92400e;
    margin: 0 0 10px 0;
}

.no-duties-message p {
    color: #78350f;
    margin: 0;
}

.verification-instructions {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.verification-instructions h4 {
    color: #1e40af;
    margin: 0 0 8px 0;
    font-size: 1.05em;
}

.verification-instructions p {
    color: #1e3a8a;
    margin: 0;
    line-height: 1.5;
    font-size: 0.95em;
}

/* Rating Scale Labels */
.scale-legend {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.scale-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scale-legend-label {
    font-weight: 600;
    color: #667eea;
}

.scale-legend-values {
    color: #666;
    font-size: 0.9em;
}

/* Extended Mode - Additional Fields */
.performs-task-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}

.performs-task-toggle label {
    font-weight: 600;
    margin: 0;
}

.performs-task-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Completion Indicator */
.completion-indicator {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
}

.completion-indicator.complete {
    background: #d1fae5;
    color: #065f46;
}

.completion-indicator.incomplete {
    background: #fee2e2;
    color: #991b1b;
}

/* Priority Level Badge */
.priority-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
}

.priority-badge.high {
    background: #fee2e2;
    color: #991b1b;
}

.priority-badge.medium {
    background: #fed7aa;
    color: #92400e;
}

.priority-badge.low {
    background: #dbeafe;
    color: #1e40af;
}

/* Score Display */
.score-display {
    font-weight: 600;
    font-size: 1.1em;
    color: #667eea;
}

/* Comments Textarea */
.task-comments {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: inherit;
    resize: vertical;
}

.task-comments:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Extended mode visibility */
.extended-only {
    display: none;
}

.workflow-extended .extended-only {
    display: table-cell;
}

.workflow-extended .scale-legend .extended-only {
    display: flex;
}

/* ============ WORKSHOP AGGREGATED COUNTS CSS ============ */

/* Workshop Participant Count Field */
.workshop-participants {
    /* 3.60.0: slate like the Additional Info buttons (was green) */
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    padding: 20px;
    border-radius: 12px;
    margin: 20px 0;
    text-align: center;
}

.workshop-participants h3 {
    color: #475569;
    margin: 0 0 15px 0;
}

.workshop-participants input {
    width: 150px;
    padding: 10px;
    font-size: 1.2em;
    text-align: center;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-weight: bold;
    background: #fff;
}

/* Count Input Grid */
.count-input-grid {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.count-input-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.count-input-item label {
    font-weight: 600;
    color: #667eea;
    font-size: 0.9em;
}

.count-input-item input {
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    transition: all 0.3s;
}

.count-input-item input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.count-input-item input:invalid {
    border-color: #ef4444;
}

/* Validation Warning */
/* Validation Messages: Error (red/blocking) and Warning (yellow/non-blocking) */
.validation-warning {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 6px;
    display: none;
}

.validation-warning.show {
    display: block;
}

/* Error state: Red (blocking) - sum > participants */
.validation-warning.error {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
}

.validation-warning.error p {
    color: #991b1b;
    font-size: 0.9em;
    font-weight: 600;
    margin: 0;
}

/* Warning state: Yellow (non-blocking) - sum < participants */
.validation-warning.warning {
    background: #fefce8;
    border-left: 4px solid #eab308;
}

.validation-warning.warning p {
    color: #854d0e;
    font-size: 0.9em;
    font-weight: 600;
    margin: 0;
}

.validation-warning p {
    margin: 0;
    color: #991b1b;
    font-size: 0.9em;
    font-weight: 600;
}

/* Weighted Mean Display */
.weighted-mean {
    font-weight: 600;
    color: #10b981;
    font-size: 1em;
}

/* Priority Formula Selector */
.priority-formula-selector {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.priority-formula-selector h4 {
    margin: 0 0 15px 0;
    color: #667eea;
}

.formula-options {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.formula-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.formula-option:hover {
    border-color: #667eea;
    background: #f9fafb;
}

.formula-option input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.formula-option label {
    cursor: pointer;
    font-weight: 600;
    margin: 0;
}

/* Project selector for dashboard */
.dpd-selector {
    padding: 7px 32px 7px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #1e293b;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 200px;
}
.dpd-selector:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}
.dpd-selector:hover { border-color: #667eea; }

/* Results Dashboard */
.results-dashboard {
    background: white;
    border: 2px solid #667eea;
    border-radius: 12px;
    padding: 0;
    margin: 30px 0;
    overflow: hidden;
}

.results-dashboard-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}

.results-dashboard-header:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b3fa8 100%);
}

.results-dashboard-header h3 {
    color: white;
    margin: 0;
    font-size: 1.3em;
}

.results-dashboard-toggle {
    color: white;
    font-size: 1.5em;
    transition: transform 0.3s;
}

.results-dashboard-header.active .results-dashboard-toggle {
    transform: rotate(180deg);
}

.results-dashboard-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.results-dashboard-content.active {
    max-height: 5000px;
    transition: max-height 0.5s ease-in;
}

.results-dashboard-inner {
    padding: 20px;
}

/* Dashboard Summary Stats */
.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.summary-card {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.summary-card h4 {
    margin: 0 0 5px 0;
    color: #667eea;
    font-size: 0.9em;
}

.summary-card p {
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
    color: #333;
}

/* Dashboard Table */
.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.dashboard-table th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9em;
    position: sticky;
    top: 0;
    z-index: 10;
}

.dashboard-table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-table tr:hover {
    background: #f9fafb;
}

.dashboard-table tr.high-priority {
    background: #fef2f2;
    font-weight: 600;
}

.dashboard-table tr.high-priority td {
    border-bottom-color: #fecaca;
}

/* Rank Badge */
.rank-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    background: #667eea;
    color: white;
}

.rank-badge.top {
    background: #ef4444;
}

/* Priority Index Display */
.priority-index {
    font-weight: 600;
    font-size: 1.1em;
    color: #667eea;
}

/* Mean Value Display */
.mean-value {
    font-weight: 600;
    color: #10b981;
}

/* Export Dashboard Button */
.btn-export-dashboard {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    margin-top: 20px;
}

.btn-export-dashboard:hover {
    box-shadow: none;
    background: #e2e8f0;
    color: #1e293b;
    border-color: #94a3b8;
}

/* Clustering Styles */
.clustering-section {
    background: #f9fafb;
    padding: 25px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    margin-bottom: 30px;
}

.clustering-section h3 {
    color: #667eea;
    margin: 0 0 20px 0;
    font-size: 1.3em;
}

.available-tasks-list {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.task-checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s;
}

.task-checkbox-item:hover {
    background: #f9fafb;
}

.task-checkbox-item:last-child {
    border-bottom: none;
}

.task-checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.task-checkbox-label {
    flex: 1;
    cursor: pointer;
    color: #333;
    line-height: 1.5;
}

.task-priority-badge {
    background: #667eea;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
}

.btn-create-cluster {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    padding: 14px 30px;
    font-size: 1.05em;
    margin: 20px 0;
    display: block;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.btn-create-cluster:disabled {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
    transform: none;
}

.btn-create-cluster:disabled:hover {
    box-shadow: none;
    transform: none;
}

.clusters-container {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 25px;
    margin-top: 30px;
}

.cluster-item {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #7dd3fc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.cluster-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #7dd3fc;
}

.cluster-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #0369a1;
    flex: 1 1 auto;             /* 3.71.0: the title wraps, the buttons stay one row */
    min-width: 0;
    overflow-wrap: anywhere;
}

.cluster-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;             /* 3.71.0: buttons keep one row (narrow screens wrap the header, dacum-responsive.css) */
}

.btn-rename-cluster {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 8px 16px;
    font-size: 0.9em;
    white-space: nowrap;
}

.btn-delete-cluster {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 8px 16px;
    font-size: 0.9em;
    white-space: nowrap;
}

/* 3.71.0: ✨ AI on a cluster card in the sky-blue of the AI cards
   (it shared the purple Rename class before). */
.btn-ai-cluster {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    padding: 8px 16px;
    font-size: 0.9em;
    white-space: nowrap;
}

.btn-ai-cluster:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.btn-ai-cluster:focus-visible {
    outline: 2px solid #0369a1;
    outline-offset: 2px;
}

/* 3.75.0: "✨ AI draft — review" + "↶ Restore previous" — ONE style for
   every AI card (ai_draft.js aiMarkHTML). Replaces .ta-ai-badge* (inline
   in index.html) and .cl-ai-* (here). rem, not em: the mark sits in an
   h3 (Task Analysis), an h4 (Clusters) or its own row (Additional Info)
   and must read the same size in all three. */
.ai-draft-mark {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-inline-start: 8px;
    vertical-align: middle;
}

.ai-draft-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0369a1;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.ai-draft-restore {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 2px 9px;
    gap: 4px;
    white-space: nowrap;
}

.ai-draft-restore:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    box-shadow: none;
}

.ai-draft-restore:focus-visible {
    outline: 2px solid #0369a1;
    outline-offset: 2px;
}

/* Additional Info: the mark has its own row between header and textarea */
.ai-draft-row {
    margin: -4px 0 6px;
}

.ai-draft-row .ai-draft-mark {
    margin-inline-start: 0;
}

.cluster-tasks-list {
    margin-top: 15px;
}

.cluster-task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: white;
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid #e0f2fe;
}

.cluster-task-text {
    flex: 1;
    color: #333;
    line-height: 1.5;
}

.btn-remove-task {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-remove-task:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.no-tasks-message {
    text-align: center;
    padding: 40px;
    color: #999;
    font-style: italic;
}

.no-clusters-message {
    text-align: center;
    padding: 40px;
    color: #999;
    font-style: italic;
}

.task-reassign-dropdown {
    padding: 6px 10px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    color: #333;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 150px;
}

.task-reassign-dropdown:hover {
    border-color: #667eea;
}

.task-reassign-dropdown:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.task-dropdown-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.task-dropdown-label {
    font-size: 0.85em;
    color: #666;
    font-weight: 600;
}

.cluster-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #e0f2fe;
}

.cluster-section h4 {
    color: #0369a1;
    font-size: 1em;
    margin-bottom: 10px;
    font-weight: 600;
}

.cluster-section textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.95em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    resize: vertical;
    min-height: 80px;
}

.cluster-section textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.cluster-helper-text {
    font-size: 0.85em;
    color: #666;
    font-style: italic;
    margin-bottom: 8px;
}

.related-tasks-list {
    background: white;
    border: 1px solid #e0f2fe;
    border-radius: 6px;
    padding: 12px;
}

.related-task-item {
    padding: 8px;
    color: #333;
    line-height: 1.5;
    border-bottom: 1px solid #f3f4f6;
}

.related-task-item:last-child {
    border-bottom: none;
}

.performance-criteria-list {
    background: white;
    border: 1px solid #e0f2fe;
    border-radius: 6px;
    padding: 12px;
}

.performance-criterion-item {
    padding: 8px;
    color: #333;
    line-height: 1.5;
    border-bottom: 1px solid #f3f4f6;
}

.performance-criterion-item:last-child {
    border-bottom: none;
}

.criterion-number {
    font-weight: 600;
    color: #667eea;
    margin-right: 8px;
}

.lo-mode-info {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #7dd3fc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

.lo-mode-info h4 {
    color: #0369a1;
    margin: 0 0 15px 0;
}

.lo-pattern {
    margin-bottom: 10px;
    padding: 10px;
    background: white;
    border-radius: 6px;
}

.lo-pattern strong {
    color: #667eea;
}

.pc-source-list {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.pc-cluster-group {
    margin-bottom: 25px;
}

.pc-cluster-group h4 {
    color: #0369a1;
    margin-bottom: 12px;
    font-size: 1.1em;
}

.pc-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s;
}

.pc-checkbox-item:hover {
    background: #f9fafb;
}

.pc-checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-top: 2px;
    flex-shrink: 0;
}

.pc-checkbox-item.used {
    opacity: 0.5;
}

.pc-checkbox-item.used input[type="checkbox"] {
    cursor: not-allowed;
}

.pc-label {
    flex: 1;
    cursor: pointer;
    line-height: 1.6;
}

.pc-number {
    font-weight: 600;
    color: #667eea;
    margin-right: 6px;
}

.pc-used-badge {
    background: #10b981;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
}

.btn-create-lo {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    padding: 14px 30px;
    font-size: 1.05em;
    margin: 20px 0;
    display: block;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.btn-create-lo:disabled {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
    transform: none;
}

.btn-create-lo:disabled:hover {
    box-shadow: none;
    transform: none;
}

.lo-blocks-container {
    margin-top: 30px;
}

.lo-block {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.lo-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #fbbf24;
}

.lo-number {
    font-size: 1.2em;
    font-weight: 600;
    color: #92400e;
}

.lo-actions {
    display: flex;
    gap: 10px;
}

.btn-edit-lo {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 8px 16px;
    font-size: 0.9em;
}

.btn-delete-lo {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 8px 16px;
    font-size: 0.9em;
}

.lo-statement {
    background: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    min-height: 60px;
    line-height: 1.6;
    color: #333;
}

.lo-statement textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.95em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    resize: vertical;
    min-height: 80px;
}

.lo-linked-criteria {
    background: white;
    padding: 15px;
    border-radius: 8px;
}

.lo-linked-criteria h5 {
    color: #92400e;
    font-size: 0.95em;
    margin: 0 0 10px 0;
}

.lo-linked-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #fef3c7;
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 0.9em;
    color: #78350f;
}

.lo-block-item {
    padding: 15px;
    background: white;
    border: 2px solid #e0f2fe;
    border-radius: 8px;
    margin-bottom: 15px;
}

.lo-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.lo-block-number {
    font-weight: 600;
    color: #667eea;
    font-size: 1.1em;
}

.lo-block-statement {
    color: #333;
    margin-bottom: 10px;
    line-height: 1.5;
}

.lo-block-actions {
    display: flex;
    gap: 10px;
}

/* Module Mapping Styles */
.module-lo-list {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.module-lo-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.module-lo-item:hover {
    border-color: #667eea;
    background: #f9fafb;
}

.module-lo-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-top: 3px;
}

.module-lo-content {
    flex: 1;
}

.module-lo-number {
    font-weight: 600;
    color: #667eea;
    margin-bottom: 5px;
}

.module-lo-statement {
    color: #333;
    line-height: 1.5;
    margin-bottom: 8px;
}

.module-lo-criteria {
    font-size: 0.9em;
    color: #666;
    font-style: italic;
}

.btn-create-module {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    padding: 14px 30px;
    font-size: 1.05em;
    margin: 20px 0;
    display: block;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-create-module:hover {
    box-shadow: none;
    background: #e2e8f0;
    color: #1e293b;
    border-color: #94a3b8;
}

.btn-create-module:disabled {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
    transform: none;
}

.btn-create-module:disabled:hover {
    box-shadow: none;
    transform: none;
}

.modules-container {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 25px;
}

.module-item {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #fbbf24;
}

.module-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #92400e;
}

.module-actions {
    display: flex;
    gap: 10px;
}

.btn-rename-module {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 8px 16px;
    font-size: 0.9em;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-rename-module:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
}

.btn-delete-module {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 8px 16px;
    font-size: 0.9em;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-delete-module:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4);
}

.module-los-list {
    margin-top: 15px;
}

.module-lo-assigned {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px;
    background: white;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid #fde68a;
}

.module-lo-assigned-content {
    flex: 1;
}

.module-lo-assigned-number {
    font-weight: 600;
    color: #667eea;
    margin-bottom: 5px;
}

.module-lo-assigned-statement {
    color: #333;
    line-height: 1.5;
    margin-bottom: 5px;
}

.module-lo-assigned-criteria {
    font-size: 0.85em;
    color: #666;
    font-style: italic;
}

.btn-remove-lo {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-remove-lo:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.btn-bypass-verification {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 15px 40px;
    font-size: 1.1em;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

/* ============ SKILLS LEVEL MATRIX STYLES ============ */

.skills-level-accordion {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    margin: 30px 0 20px 0;
    overflow: hidden;
    transition: all 0.3s;
}

.skills-level-accordion:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.skills-level-header {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    border-bottom: 2px solid transparent;
}

.skills-level-header:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* 3.59.0: slate like the Additional Info buttons (was green) */
.skills-level-header.active {
    background: #f1f5f9;
    color: #475569;
    border-bottom-color: #cbd5e1;
}

.skills-level-title {
    font-size: 1.2em;
    font-weight: 600;
    flex: 1;
}

.skills-level-toggle {
    font-size: 1.3em;
    transition: transform 0.3s;
}

.skills-level-header.active .skills-level-toggle {
    transform: rotate(180deg);
}

.skills-level-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.skills-level-content.active {
    max-height: 10000px;
    transition: max-height 0.5s ease-in;
    padding: 20px;
}

.skills-level-category {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background: #f9fafb;
}

.skills-level-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.skills-level-category-name {
    width: 100%;
    padding: 10px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1.05em;
    margin-bottom: 15px;
    font-weight: 600;
}

.skills-competency-row {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 10px;
}

.skills-competency-input-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.skills-competency-id {
    min-width: 60px;
    text-align: right;
    font-weight: 600;
    color: #667eea;
}

.skills-competency-text {
    flex: 1;
    padding: 10px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1em;
}

.skills-level-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-left: 70px;
    padding-top: 10px;
}

.skills-level-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95em;
    cursor: pointer;
}

.skills-level-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.skills-level-info-box {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.skills-level-info-box h3 {
    color: #1e40af;
    margin-bottom: 10px;
}

.skills-level-info-box p {
    color: #1e3a8a;
    margin-bottom: 10px;
}

.skills-level-info-box ul {
    list-style: disc;
    margin-left: 20px;
    color: #1e3a8a;
}

.skills-level-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.btn-add-category {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1em;
}

.btn-add-competency {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
}

/* 3.58.0: hover for the former green buttons that had none of their own */
.btn-create-cluster:not(:disabled):hover,
.btn-create-lo:not(:disabled):hover,
.btn-add-category:hover,
.btn-add-competency:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #94a3b8;
    box-shadow: none;
    filter: none;
}

.btn-remove-category {
    background: #ef4444;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
}

.btn-remove-competency {
    background: #ef4444;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
}

.btn-reset-skills {
    background: #ef4444;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
}
#qrCodeContainer img {
    image-rendering: pixelated;
    max-width: none;
}

/* ════════════════════════════════════════════════════════════
   QR Modal  —  two-column layout (QR left · buttons right)
   ════════════════════════════════════════════════════════════ */

/* ── Full-screen overlay ─────────────────────────────────── */
#lwQRModal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow-y: auto;           /* allow scroll if viewport tiny */
}
.qrm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 30, 0.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ── Dialog card ─────────────────────────────────────────── */
.qrm-dialog {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.40), 0 6px 20px rgba(0,0,0,0.20);
  overflow: hidden;

  /* Two-column: QR on left, panel on right */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: min(860px, 96vw);
  max-height: 94vh;
}

/* ── LEFT column — QR code ───────────────────────────────── */
.qrm-left {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  gap: 14px;
  flex: 0 0 auto;
}

/* White frame around QR */
.qrm-code-wrap {
  background: #ffffff;
  border: 3px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qrm-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Force QR to be large and sharp */
.qrm-container img,
.qrm-container canvas {
  width: 360px !important;
  height: 360px !important;
  max-width: 360px !important;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* URL pill under QR */
.qrm-url-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 12px;
  width: 100%;
  box-sizing: border-box;
  max-width: 400px;
  overflow: hidden;
}
.qrm-url-label { font-size: 0.9em; flex-shrink: 0; }
.qrm-url-text {
  font-size: 0.72em;
  color: #475569;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* ── RIGHT column — header + buttons ────────────────────── */
.qrm-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 28px;
  gap: 18px;
  width: 220px;
  min-width: 0;          /* allow shrink */
  flex: 0 0 220px;       /* fixed column width */
  overflow: hidden;
}

/* Header */
.qrm-header { width: 100%; }
.qrm-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.qrm-icon  { font-size: 1.6em; line-height: 1; flex-shrink: 0; }
.qrm-title {
  margin: 0;
  font-size: 1.2em;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: break-word;
}
.qrm-subtitle {
  margin: 0;
  font-size: 0.82em;
  color: #64748b;
  line-height: 1.6;
  word-break: break-word;
  white-space: normal;
}

/* Divider */
.qrm-divider {
  height: 1px;
  background: #e2e8f0;
  width: 100%;
}

/* Button column — stacked vertically, auto width */
.qrm-btn-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}
.qrm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 160px;
  max-width: 200px;
  align-self: stretch;
  padding: 13px 18px;
  border: none;
  border-radius: 12px;
  font-size: 0.93em;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  letter-spacing: 0.01em;
  box-sizing: border-box;
}
.qrm-btn:active { transform: scale(0.97); }

/* Green — Download */
.qrm-btn-green {
  background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: none;
}
.qrm-btn-green:hover {
    box-shadow: none;
  background: #e2e8f0;
    color: #1e293b;
    border-color: #94a3b8;
}

/* Blue — Copy */
.qrm-btn-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 3px 10px rgba(59,130,246,0.35);
}
.qrm-btn-blue:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 5px 16px rgba(59,130,246,0.45);
  transform: translateY(-1px);
}
.qrm-btn-blue.copied {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

/* Red — Close */
.qrm-btn-neutral {
  background: #f8fafc;
  color: #475569;
  border: 1.5px solid #cbd5e1;
}
.qrm-btn-neutral:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
  transform: translateY(-1px);
}

/* Feedback message */
.qrm-feedback {
  font-size: 0.82em;
  font-weight: 600;
  min-height: 1.5em;
  color: #16a34a;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s;
  word-break: break-word;
  white-space: normal;
  width: 100%;
}
.qrm-feedback.visible { opacity: 1; }

/* ── Responsive: stack vertically on small screens ───────── */
@media (max-width: 640px) {
  .qrm-dialog {
    flex-direction: column;
    width: min(440px, 96vw);
    max-height: none;
  }
  .qrm-left {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    padding: 24px 20px 18px;
  }
  .qrm-container img,
  .qrm-container canvas {
    width: 280px !important;
    height: 280px !important;
    max-width: 280px !important;
  }
  .qrm-right {
    padding: 22px 20px 24px;
    min-width: unset;
  }
  .qrm-btn { padding: 13px 18px; }
}