/**
 * AD213 Financial Accounting PWA - Study Panel Styles
 * Pure editorial reading canvas: eliminates nested cards, removes ribbon boxes,
 * and crafts an elegant, book-like study experience.
 */

.study-pane-inner {
  padding: 44px 32px 88px 32px;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   Primary Reading Canvas (Flattened Document Flow)
   ========================================================================== */

.study-main-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ==========================================================================
   Slide Header & Editorial Kicker
   ========================================================================== */

.slide-meta-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
}

.slide-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.slide-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.kicker-lecture {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.kicker-sep {
  color: var(--border-strong);
  font-size: 0.7rem;
}

.kicker-section {
  color: var(--accent-text);
  font-weight: 600;
}

.kicker-type {
  color: var(--text-secondary);
  font-weight: 600;
}

.kicker-type::before {
  content: '· ';
  color: var(--border-strong);
}

.slide-action-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-ghost-btn {
  height: 28px;
  padding: 0 8px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.action-ghost-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.action-ghost-btn.active {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.source-slide-btn .icon {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.slide-title {
  margin: 4px 0 0 0;
  font-family: var(--font-sans);
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.22;
  color: var(--text-primary);
  text-wrap: balance;
}

/* ==========================================================================
   Explanation & Natural Document Typography
   ========================================================================== */

.explanation-section,
.solution-body {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.975rem;
  line-height: 1.7;
}

.explanation-section p,
.solution-body p {
  margin: 0 0 16px 0;
}

.explanation-section p:last-child,
.solution-body p:last-child {
  margin-bottom: 0;
}

/* Clean Typographic Headings - Zero Artificial Ribbon Boxes */
.explanation-section h4,
.solution-body h4 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 28px 0 10px 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.explanation-section h4:first-child,
.solution-body h4:first-child {
  margin-top: 0;
}

.explanation-section h5,
.solution-body h5 {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 22px 0 8px 0;
  line-height: 1.4;
}

.explanation-section ul,
.explanation-section ol,
.solution-body ul,
.solution-body ol {
  margin: 10px 0 20px 24px;
  padding: 0;
}

.explanation-section li,
.solution-body li {
  margin-bottom: 8px;
  padding-left: 2px;
  line-height: 1.65;
}

.explanation-section li:last-child,
.solution-body li:last-child {
  margin-bottom: 0;
}

.explanation-section li::marker,
.solution-body li::marker {
  color: var(--accent-primary);
  font-weight: 600;
}

/* Editorial Callouts & Worked Equations */
.equation-impact-box,
.equation-callout {
  background-color: var(--callout-bg);
  border: none;
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 6px 6px 0;
  padding: 14px 18px;
  margin: 20px 0;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-primary);
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Key Takeaway & Distinction (Quiet Editorial Callout)
   ========================================================================== */

.exam-tip-callout {
  background-color: var(--warning-bg);
  border: none;
  border-left: 3px solid var(--warning-color);
  border-radius: 0 6px 6px 0;
  padding: 16px 20px;
  margin: 0;
  box-shadow: none;
}

.exam-tip-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.exam-tip-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warning-color);
  background: transparent;
  border: none;
  padding: 0;
}

.exam-tip-body {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-primary);
}

.exam-tip-body p {
  margin: 0;
}

/* ==========================================================================
   Collapsible Exercise Solution (Clean Minimal Disclosure)
   ========================================================================== */

.solution-accordion {
  border: none;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  overflow: visible;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.solution-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  transition: color 0.15s ease;
}

.solution-toggle:hover {
  color: var(--accent-primary);
}

.solution-toggle .toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.solution-toggle .toggle-icon {
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease;
  color: var(--text-secondary);
}

.solution-accordion.open .solution-toggle .toggle-icon {
  transform: rotate(90deg);
}

.solution-body {
  display: none;
  padding: 16px 0 24px 0;
  background: transparent;
  border-top: 1px solid var(--border-subtle);
}

.solution-accordion.open .solution-body {
  display: block;
}

/* ==========================================================================
   Editorial Scannability & Visual Learning Components
   Eliminates textbook walls of text with structured, bite-sized components.
   ========================================================================== */

/* 1. Key Takeaway & Hero Banners */
.takeaway-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background-color: var(--accent-subtle);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 6px 6px 0;
  padding: 14px 18px;
  margin: 18px 0;
}

.takeaway-banner:has(.takeaway-tag) {
  flex-direction: column;
  gap: 4px;
}

.takeaway-banner .banner-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--accent-primary);
  margin-top: 2px;
}

.takeaway-banner .banner-body,
.takeaway-banner .takeaway-body {
  flex: 1;
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--text-primary);
}

.takeaway-banner .banner-lead,
.takeaway-banner .takeaway-tag {
  display: block;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  margin-bottom: 2px;
}

.takeaway-banner .takeaway-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 2px;
}

/* 2. Process / Flow Pipelines (Linear Step Progression) */
.flow-pipeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

@media (min-width: 640px) {
  .flow-pipeline.horizontal {
    flex-direction: row;
    align-items: stretch;
  }
}

.flow-card {
  flex: 1;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: border-color 0.15s ease;
}

.flow-card:hover {
  border-color: var(--border-strong);
}

.flow-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flow-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background-color: var(--accent-primary);
  color: var(--text-inverse);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.flow-card-title,
.flow-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.25;
}

.flow-card-desc,
.flow-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.flow-arrow-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 1.1rem;
  padding: 0 4px;
}

@media (max-width: 639px) {
  .flow-arrow-separator {
    transform: rotate(90deg);
    padding: 2px 0;
  }
}

/* 3. Side-by-Side Comparison Grid (vs-grid) */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.comp-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

.comp-card.highlight {
  border-color: var(--accent-primary);
  background-color: var(--callout-bg);
}

.comp-card-badge,
.comp-sub {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  align-self: flex-start;
}

.comp-card.highlight .comp-sub,
.comp-card-badge.accent {
  background-color: var(--accent-subtle);
  color: var(--accent-text);
}

.comp-card-title,
.comp-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.comp-card-body,
.comp-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.comp-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.comp-card-list li {
  padding-left: 18px;
  position: relative;
  margin: 0;
}

.comp-card-list li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: var(--accent-primary);
  font-weight: bold;
}

/* 4. Concept Cards & Responsive Concept Grids */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

/* Explicit 2x2 and 2-Column Grids (prevents awkward 3+1 orphan card layouts) */
.grid-2x2,
.concept-grid.grid-2x2,
.concept-grid.grid-2,
.comp-grid.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 639px) {
  .grid-2x2,
  .concept-grid.grid-2x2,
  .concept-grid.grid-2,
  .comp-grid.grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Explicit 3-Column Grid */
.grid-3,
.concept-grid.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .grid-3,
  .concept-grid.grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Card Spanning Utilities */
.concept-card.span-full,
.comp-card.span-full {
  grid-column: 1 / -1;
}

.concept-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease;
}

.concept-card:hover {
  border-color: var(--border-color);
}

.concept-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.concept-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-text);
  background-color: var(--accent-subtle);
  padding: 2px 6px;
  border-radius: 3px;
}

.concept-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.concept-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* 4b. Editorial Non-Card Elements (Typography-Driven Scannability) */
.editorial-lead {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 12px 0 16px 0;
}

.editorial-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.editorial-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.editorial-list li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.editorial-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-primary);
}

.editorial-num-list {
  list-style: none;
  counter-reset: num-counter;
  padding: 0;
  margin: 14px 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.editorial-num-list li {
  position: relative;
  padding-left: 32px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.editorial-num-list li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.editorial-num-list li::before {
  counter-increment: num-counter;
  content: counter(num-counter);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--accent-subtle);
  color: var(--accent-text);
  font-size: 0.76rem;
  font-weight: 700;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
}

.editorial-callout {
  border-left: 3px solid var(--accent-primary);
  padding: 10px 14px;
  margin: 16px 0;
  background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
  border-radius: 0 4px 4px 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.editorial-callout.debit {
  border-left-color: var(--debit-color);
  background: color-mix(in srgb, var(--debit-color) 6%, transparent);
}

.editorial-callout.credit {
  border-left-color: var(--credit-color);
  background: color-mix(in srgb, var(--credit-color) 6%, transparent);
}

/* 5. Highlight Spans & Micro Badges */
.hl-keyword {
  font-weight: 600;
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  padding: 1px 4px;
  border-radius: 3px;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  margin-right: 4px;
}

.badge-pill.debit {
  background-color: var(--debit-bg);
  color: var(--debit-color);
  border-color: transparent;
}

.badge-pill.credit {
  background-color: var(--credit-bg);
  color: var(--credit-color);
  border-color: transparent;
}

.badge-pill.navy {
  background-color: var(--accent-subtle);
  color: var(--accent-text);
  border-color: transparent;
}

/* 6. Formula & Visual Equation Box */
.visual-equation-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 18px 0;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.visual-equation-card:has(.visual-eq-term) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.visual-eq-term {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  border-radius: 5px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
}

.visual-eq-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.visual-eq-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.visual-eq-op {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-tertiary);
}

.visual-equation-formula {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--text-primary);
}

.equation-term {
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.equation-term.asset {
  background-color: var(--debit-bg);
  color: var(--debit-color);
}

.equation-term.liability {
  background-color: var(--credit-bg);
  color: var(--credit-color);
}

.equation-term.equity {
  background-color: var(--accent-subtle);
  color: var(--accent-text);
}

.equation-op {
  color: var(--text-tertiary);
  font-weight: 700;
  font-size: 1.1rem;
}

.visual-equation-caption {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.45;
}

/* 7. Inline Diagrams & Vector Visuals */
.editorial-diagram-wrap {
  width: 100%;
  margin: 20px 0;
  padding: 16px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.editorial-diagram-wrap svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.diagram-caption {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-sans);
}

/* 8. Transaction 3-Step Analysis Box */
.tx-analysis-box {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px;
  margin: 18px 0;
  box-shadow: var(--shadow-sm);
}

.tx-analysis-title {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-primary);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tx-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tx-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.tx-step-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ==========================================================================
   Lecture Completion Screen (End of Lecture & Curriculum)
   ========================================================================== */

.lecture-complete-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: auto auto;
  width: 100%;
  max-width: 620px;
  gap: 22px;
}

.complete-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--accent-subtle);
  color: var(--accent-primary);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.complete-icon-circle svg {
  width: 24px;
  height: 24px;
}

.complete-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-bottom: none;
  padding-bottom: 0;
  max-width: 560px;
}

.complete-kicker {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}

.complete-title {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
}

.complete-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.complete-details-box {
  width: 100%;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

@media (max-width: 640px) {
  .complete-details-box {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
}

.complete-detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.complete-detail-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.complete-detail-val {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.complete-detail-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.complete-actions-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 4px;
}

.complete-btn-primary {
  height: 40px;
  padding: 0 20px;
  background-color: var(--btn-primary-bg);
  border: none;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--btn-primary-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.15s ease;
}

.complete-btn-primary:hover {
  opacity: 0.88;
}

.complete-btn-primary .icon {
  width: 14px;
  height: 14px;
}

.complete-btn-secondary {
  height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.complete-btn-secondary:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.complete-btn-secondary .icon {
  width: 14px;
  height: 14px;
}

.complete-btn-ghost {
  height: 40px;
  padding: 0 12px;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.complete-btn-ghost:hover {
  color: var(--text-primary);
}

.complete-btn-ghost .icon {
  width: 14px;
  height: 14px;
}