/* FUTKAR — Business Templates Hub Design System */

.template-hub-hero {
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(16, 185, 129, 0.1), transparent),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(37, 99, 235, 0.08), transparent),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.dark .template-hub-hero {
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(16, 185, 129, 0.12), transparent),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(37, 99, 235, 0.1), transparent),
    linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

.template-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.template-badge--version {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.dark .template-badge--version {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}
.template-badge--updated {
  background: #FFF5EB;
  color: #E06A12;
  border: 1px solid #F5C9A8;
}
.dark .template-badge--updated {
  background: rgba(37, 99, 235, 0.15);
  color: #93c5fd;
  border-color: rgba(37, 99, 235, 0.35);
}
.template-badge:not(.template-badge--version):not(.template-badge--updated) {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.dark .template-badge:not(.template-badge--version):not(.template-badge--updated) {
  background: #334155;
  color: #cbd5e1;
  border-color: #475569;
}

/* Preview frame — floating document */
.template-preview-shell {
  position: relative;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow:
    0 4px 6px -1px rgba(15, 23, 42, 0.06),
    0 24px 48px -12px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  transform-origin: top center;
  transition: transform 0.25s ease;
}
.dark .template-preview-shell {
  background: #1e293b;
  border-color: #334155;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.2),
    0 24px 48px -12px rgba(0, 0, 0, 0.35);
}

.template-preview-shell .quote-doc {
  overflow: hidden;
  max-width: 100%;
}

.template-preview-shell .quote-doc-header {
  flex-wrap: wrap;
  gap: 1rem;
}

.template-preview-shell .quote-doc-brand {
  flex: 1 1 12rem;
  max-width: 100%;
}

.template-preview-shell .quote-doc-doc-panel {
  flex: 0 0 auto;
  width: 12.5rem;
  max-width: 100%;
  margin-left: auto;
}

.template-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.dark .template-preview-toolbar {
  background: #0f172a;
  border-color: #334155;
}

.template-preview-tabs {
  display: inline-flex;
  padding: 0.25rem;
  border-radius: 0.625rem;
  background: #e2e8f0;
  gap: 0.25rem;
}
.dark .template-preview-tabs { background: #334155; }
.template-preview-tab {
  padding: 0.4rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  transition: background 0.2s, color 0.2s;
}
.dark .template-preview-tab { color: #94a3b8; }
.template-preview-tab.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.dark .template-preview-tab.active {
  background: #1e293b;
  color: #f1f5f9;
}

.template-preview-body {
  padding: 1.25rem;
  max-height: 28rem;
  overflow: auto;
}
@media (min-width: 1024px) {
  .template-preview-body { max-height: 32rem; }
}

.template-preview-panel { display: none; }
.template-preview-panel.active { display: block; }

/* Invoice document preview — extends invoice-print.css */
.template-preview-shell .invoice-doc {
  font-size: 0.8125rem;
}
.dark .template-preview-shell .invoice-doc-biz-name,
.dark .template-preview-shell .invoice-doc-title,
.dark .template-preview-shell .invoice-doc-strong { color: #f8fafc; }
.dark .template-preview-shell .invoice-doc-meta,
.dark .template-preview-shell .invoice-doc-label { color: #94a3b8; }
.dark .template-preview-shell .invoice-doc-info-card {
  background: #0f172a;
  border-color: #475569;
}
.dark .template-preview-shell .invoice-doc-info-card p { color: #cbd5e1; }
.dark .template-preview-shell .invoice-doc-section-title { color: #60a5fa; }
.dark .template-preview-shell .invoice-doc-table thead th {
  background: #1e40af;
  color: #fff;
}
.dark .template-preview-shell .invoice-doc-table tbody td {
  border-color: #475569;
  color: #cbd5e1;
}
.dark .template-preview-shell .invoice-doc-table tbody tr:nth-child(even) td {
  background: rgba(15, 23, 42, 0.5);
}
.dark .template-preview-shell .invoice-doc-payment-item {
  background: #0f172a;
  border-color: #475569;
}
.dark .template-preview-shell .invoice-doc-payment-item p { color: #cbd5e1; }
.dark .template-preview-shell .invoice-doc-payment-link {
  background: #0f172a;
  border-color: #475569;
}
.dark .template-preview-shell .invoice-doc-payment-link p { color: #cbd5e1; }
.dark .template-preview-shell .invoice-doc-pay-link { color: #60a5fa; }
.dark .template-preview-shell .invoice-doc-notes {
  background: #0f172a;
  color: #94a3b8;
  border-left-color: #3b82f6;
}
.dark .template-preview-shell .invoice-doc-total td { color: #94a3b8; }
.dark .template-preview-shell .invoice-doc-total tr.invoice-doc-total-final td {
  color: #f8fafc;
  border-top-color: #3b82f6;
}
.dark .template-preview-shell .invoice-doc-total tr.invoice-doc-total-final td:last-child {
  color: #60a5fa;
}
.dark .template-preview-shell .invoice-doc-footer { border-color: #475569; }
.dark .template-preview-shell .invoice-doc-empty { color: #64748b; }
.dark .template-preview-shell .invoice-doc-meta-row { color: #cbd5e1; }
.dark .template-preview-shell .invoice-doc-notes strong { color: #e2e8f0; }
.dark .template-preview-shell .invoice-doc-payment-item .invoice-doc-section-title,
.dark .template-preview-shell .invoice-doc-payment-link .invoice-doc-section-title { color: #94a3b8; }

/* Legacy invoice-doc overrides (kept for compatibility) */
.invoice-doc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #334155;
}
.dark .invoice-doc { color: #cbd5e1; }
.invoice-doc-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e2e8f0;
}
.dark .invoice-doc-header { border-color: #475569; }
.invoice-doc-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}
.invoice-doc-invoice-meta {
  text-align: right;
  flex-shrink: 0;
}
.invoice-doc-totals-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.invoice-doc-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
}
.dark .invoice-doc-footer { border-color: #475569; }
.invoice-doc-logo {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #F27A21, #E06A12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
}
.invoice-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.75rem;
}
.invoice-doc-table th,
.invoice-doc-table td {
  border: 1px solid #e2e8f0;
  padding: 0.5rem 0.625rem;
  text-align: left;
}
.dark .invoice-doc-table th,
.dark .invoice-doc-table td { border-color: #475569; }
.invoice-doc-table th {
  background: #f1f5f9;
  font-weight: 600;
  color: #0f172a;
}
.dark .invoice-doc-table th {
  background: #0f172a;
  color: #f1f5f9;
}
.invoice-doc-total {
  margin-left: auto;
  width: 100%;
  max-width: 14rem;
}
.invoice-doc-total td { border: none; padding: 0.25rem 0; }
.invoice-doc-total tr:last-child td {
  font-weight: 700;
  font-size: 0.875rem;
  padding-top: 0.5rem;
  border-top: 2px solid #e2e8f0;
}
.dark .invoice-doc-total tr:last-child td { border-color: #475569; }

.invoice-doc-biz-name {
  font-weight: 700;
  font-size: 1rem;
  color: #0f172a;
}
.dark .invoice-doc-biz-name { color: #f8fafc; }
.invoice-doc-title {
  font-weight: 700;
  font-size: 1.125rem;
  color: #0f172a;
}
.dark .invoice-doc-title { color: #f8fafc; }
.invoice-doc-meta {
  font-size: 0.75rem;
  color: #64748b;
}
.dark .invoice-doc-meta { color: #94a3b8; }
.invoice-doc-meta--right { text-align: right; }
.invoice-doc-label { color: #64748b; }
.dark .invoice-doc-label { color: #94a3b8; }
.invoice-doc-strong { font-weight: 600; color: #0f172a; }
.dark .invoice-doc-strong { color: #f1f5f9; }
.invoice-doc-section-title {
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 0.25rem;
}
.dark .invoice-doc-section-title { color: #f8fafc; }
.invoice-doc-parties {
  display: grid;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 640px) {
  .invoice-doc-parties { grid-template-columns: 1fr 1fr; }
  .invoice-doc-parties-right { text-align: right; }
}
.invoice-doc-total-label { font-weight: 700; color: #0f172a; }
.dark .invoice-doc-total-label { color: #f8fafc; }
.invoice-doc-total-value { color: #F27A21; font-weight: 700; }
.dark .invoice-doc-total-value { color: #60a5fa; }
.invoice-doc-payment { margin-top: 1rem; }
.invoice-doc-notes {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.75rem;
  color: #64748b;
}
.dark .invoice-doc-notes { border-color: #475569; color: #94a3b8; }
.invoice-doc-logo-img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.invoice-doc-logo-img--print {
  width: 4rem;
  height: 4rem;
}
.invoice-logo-preview-wrap { display: flex; align-items: center; }
.invoice-logo-preview {
  max-height: 3.5rem;
  max-width: 8rem;
  object-fit: contain;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 0.25rem;
}
.dark .invoice-logo-preview { border-color: #475569; background: #0f172a; }
.invoice-form-input--file {
  padding: 0.5rem;
  font-size: 0.8125rem;
}

.invoice-editable {
  outline: none;
  border-radius: 0.25rem;
  padding: 0 0.125rem;
  transition: background 0.15s, box-shadow 0.15s;
}
.invoice-editable:focus {
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}
.dark .invoice-editable:focus {
  background: rgba(96, 165, 250, 0.12);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.4);
}

/* Spreadsheet preview */
.sheet-grid {
  display: grid;
  grid-template-columns: 2.5rem repeat(5, minmax(0, 1fr));
  font-size: 0.6875rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  overflow: hidden;
}
.dark .sheet-grid { border-color: #475569; }
.sheet-cell {
  padding: 0.375rem 0.5rem;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  min-height: 1.75rem;
  display: flex;
  align-items: center;
}
.dark .sheet-cell {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
.sheet-cell--header {
  background: #f1f5f9;
  font-weight: 600;
  color: #475569;
}
.dark .sheet-cell--header {
  background: #0f172a;
  color: #94a3b8;
}
.sheet-cell--row-num {
  background: #f8fafc;
  color: #94a3b8;
  justify-content: center;
  font-weight: 500;
}
.dark .sheet-cell--row-num {
  background: #0f172a;
  color: #64748b;
}
.sheet-cell--formula { color: #059669; font-weight: 500; }
.dark .sheet-cell--formula { color: #34d399; }

/* Download cards */
.template-download-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.dark .template-download-card {
  background: #1e293b;
  border-color: #334155;
}
.template-download-card:hover {
  transform: translateY(-3px);
  border-color: #93c5fd;
  box-shadow: 0 16px 32px -12px rgba(37, 99, 235, 0.2);
}
.dark .template-download-card:hover { border-color: #3b82f6; }

.template-download-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.template-download-icon--excel { background: #ecfdf5; color: #059669; }
.template-download-icon--pdf { background: #fef2f2; color: #dc2626; }
.template-download-icon--sheets { background: #FFF5EB; color: #F27A21; }
.template-download-icon--print { background: #FFF5EB; color: #C45A10; }
.dark .template-download-icon--excel { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.dark .template-download-icon--pdf { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.dark .template-download-icon--sheets { background: rgba(37, 99, 235, 0.15); color: #60a5fa; }
.dark .template-download-icon--print { background: rgba(124, 58, 237, 0.15); color: #a78bfa; }

/* Workflow pipeline */
.template-workflow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.template-workflow-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}
.dark .template-workflow-step {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
.template-workflow-step--active {
  background: linear-gradient(135deg, #F27A21, #E06A12);
  border-color: transparent;
  color: #fff;
}
.template-workflow-arrow {
  color: #94a3b8;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Field chips */
.template-field-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  transition: border-color 0.2s, background 0.2s;
}
.dark .template-field-chip {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
.template-field-chip:hover {
  border-color: #93c5fd;
  background: #f8fafc;
}
.dark .template-field-chip:hover {
  border-color: #3b82f6;
  background: #0f172a;
}
.template-field-chip::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: #3b82f6;
  flex-shrink: 0;
}

/* Anatomy cards */
.template-anatomy-card {
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.dark .template-anatomy-card {
  background: #1e293b;
  border-color: #334155;
}
.template-anatomy-card h3 {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 0.375rem;
}
.dark .template-anatomy-card h3 { color: #f1f5f9; }
.template-anatomy-card p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #64748b;
}
.dark .template-anatomy-card p { color: #94a3b8; }

/* Use case cards */
.template-use-card {
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.dark .template-use-card {
  background: #1e293b;
  border-color: #334155;
}
.template-use-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.1);
}

/* Related template cards */
.template-related-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.dark .template-related-card {
  background: #1e293b;
  border-color: #334155;
}
.template-related-card:hover {
  transform: translateY(-3px);
  border-color: #93c5fd;
  box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.15);
}
.dark .template-related-card:hover { border-color: #3b82f6; }

/* Sticky download bar */
.template-sticky-bar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 50;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid #e2e8f0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.dark .template-sticky-bar {
  background: rgba(15, 23, 42, 0.92);
  border-color: #334155;
}
.template-sticky-bar.visible { transform: translateY(0); }

/* Toast */
#template-toast {
  position: fixed;
  top: 5rem;
  right: 1rem;
  left: 1rem;
  max-width: 24rem;
  margin-left: auto;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.15);
  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.dark #template-toast {
  background: #1e293b;
  border-color: #334155;
}
#template-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Step timeline */
.template-steps {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .template-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .template-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.template-step {
  position: relative;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  text-align: center;
}
.dark .template-step {
  background: #1e293b;
  border-color: #334155;
}
.template-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #F27A21, #E06A12);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* Feature benefit grid */
.template-benefit-grid {
  display: grid;
  gap: 0.75rem;
  grid-auto-rows: 1fr;
}
.template-benefit-grid > li {
  height: 100%;
  min-height: 4.25rem;
}
@media (min-width: 640px) {
  .template-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Smart assistant panel */
.tool-assistant-panel {
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
}
.dark .tool-assistant-panel {
  background: #1e293b;
  border-color: #334155;
}
.tool-assistant-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #FFF5EB 0%, #FFF5EB 100%);
}
.dark .tool-assistant-header {
  background: linear-gradient(135deg, rgba(37,99,235,0.15) 0%, rgba(139,92,246,0.12) 100%);
  border-color: #334155;
}
.tool-score-ring {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  border: 3px solid #e2e8f0;
  transition: border-color 0.3s, color 0.3s;
}
.tool-score-ring--low { border-color: #fca5a5; color: #dc2626; }
.tool-score-ring--mid { border-color: #fcd34d; color: #d97706; }
.tool-score-ring--high { border-color: #6ee7b7; color: #059669; }
.dark .tool-score-ring--low { border-color: #f87171; color: #fca5a5; }
.dark .tool-score-ring--mid { border-color: #fbbf24; color: #fcd34d; }
.dark .tool-score-ring--high { border-color: #34d399; color: #6ee7b7; }
.tool-progress-bar {
  height: 0.375rem;
  border-radius: 9999px;
  background: #e2e8f0;
  overflow: hidden;
}
.dark .tool-progress-bar { background: #334155; }
.tool-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #F27A21, #E06A12);
  transition: width 0.4s ease;
}
.tool-assistant-list { padding: 1rem 1.25rem; }
.tool-assistant-item {
  display: flex;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.dark .tool-assistant-item { border-color: #334155; }
.tool-assistant-item:last-child { border-bottom: none; }
.tool-assistant-item--warn .tool-assistant-icon { color: #f59e0b; }
.tool-assistant-item--error .tool-assistant-icon { color: #ef4444; }
.tool-assistant-item--tip .tool-assistant-icon { color: #3b82f6; }
.tool-assistant-item--ok .tool-assistant-icon { color: #10b981; }
.tool-ready-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.tool-ready-badge--draft {
  background: #f1f5f9;
  color: #64748b;
}
.tool-ready-badge--ready {
  background: #ecfdf5;
  color: #047857;
}
.dark .tool-ready-badge--draft { background: #334155; color: #94a3b8; }
.tool-ready-badge--progress {
  background: #fffbeb;
  color: #b45309;
}
.dark .tool-ready-badge--progress { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.dark .tool-ready-badge--ready { background: rgba(16,185,129,0.15); color: #6ee7b7; }
.tool-assistant-item--warn svg,
.tool-assistant-item--error svg,
.tool-assistant-item--tip svg,
.tool-assistant-item--ok svg { flex-shrink: 0; }
.tool-assistant-item--warn svg { color: #f59e0b; }
.tool-assistant-item--error svg { color: #ef4444; }
.tool-assistant-item--tip svg { color: #3b82f6; }
.tool-assistant-item--ok svg { color: #10b981; }
.invoice-form-input.is-valid { border-color: #34d399; }
.invoice-form-input.is-attention { border-color: #fbbf24; }
.invoice-form-input.is-invalid { border-color: #f87171; }
.tool-download-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.tool-download-overlay.show { opacity: 1; pointer-events: auto; }
.tool-download-modal {
  background: #fff;
  border-radius: 1.25rem;
  padding: 2rem;
  max-width: 22rem;
  width: 90%;
  text-align: center;
  box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}
.dark .tool-download-modal { background: #1e293b; border: 1px solid #334155; }

/* Hub nav pill */
.template-hub-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.dark .template-hub-nav {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.3);
}

/* ——— Invoice Builder Tool ——— */
.invoice-builder-section {
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 30%, #ffffff 100%);
  border-top: 1px solid #e2e8f0;
}
.dark .invoice-builder-section {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);
  border-color: #334155;
}

.invoice-builder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06);
}
.dark .invoice-builder-toolbar {
  background: #1e293b;
  border-color: #334155;
}

.invoice-builder-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .invoice-builder-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2.5fr);
    align-items: start;
  }
}
@media (min-width: 1280px) {
  .invoice-builder-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 2.5fr) minmax(0, 1fr);
  }
}

.invoice-builder-panel {
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
}
.dark .invoice-builder-panel {
  background: #1e293b;
  border-color: #334155;
}

.invoice-builder-panel-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.dark .invoice-builder-panel-header {
  background: #0f172a;
  border-color: #334155;
}

.invoice-builder-panel-body { padding: 1.25rem; }
@media (min-width: 1024px) {
  .invoice-builder-panel-body--form {
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
  }
  .invoice-builder-preview-col { position: sticky; top: 5.5rem; }
  .tool-assistant-col { position: sticky; top: 5.5rem; }
}

.invoice-form-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}
.dark .invoice-form-section { border-color: #334155; }
.invoice-form-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.invoice-form-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 0.375rem;
}
.dark .invoice-form-label { color: #94a3b8; }

.invoice-form-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.875rem;
  color: #0f172a;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.invoice-form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.dark .invoice-form-input {
  background: #0f172a;
  border-color: #475569;
  color: #f1f5f9;
}

.invoice-line-item {
  display: grid;
  grid-template-columns: 1fr 4rem 5.5rem 2rem 2rem;
  gap: 0.5rem;
  align-items: start;
  margin-bottom: 0.5rem;
}
@media (max-width: 480px) {
  .invoice-line-item { grid-template-columns: 1fr 1fr; }
  .invoice-line-desc { grid-column: 1 / -1; }
}

.invoice-line-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  color: #94a3b8;
}
.invoice-line-remove:hover { color: #ef4444; background: #fef2f2; }

.invoice-line-duplicate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  color: #94a3b8;
}
.invoice-line-duplicate:hover { color: #F27A21; background: #FFF5EB; }

.invoice-add-line {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #F27A21;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px dashed #93c5fd;
  background: #FFF5EB;
}
.dark .invoice-add-line {
  color: #60a5fa;
  border-color: #3b82f6;
  background: rgba(37, 99, 235, 0.1);
}

.invoice-save-indicator {
  font-size: 0.75rem;
  color: #059669;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.dark .invoice-save-indicator { color: #34d399; }

#invoice-print-area,
#quotation-print-area {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 210mm;
  background: #fff;
  color: #1e293b;
  pointer-events: none;
  visibility: hidden;
}

@media print {
  @page { margin: 12mm; size: A4; }
  body * { visibility: hidden !important; }
  #invoice-print-area, #invoice-print-area * { visibility: visible !important; }
  #invoice-print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    background: #fff !important;
    color: #1e293b !important;
  }
  #invoice-print-area .invoice-doc--print {
    color: #1e293b !important;
    font-size: 11pt;
    line-height: 1.45;
  }
  #invoice-print-area .invoice-doc-biz-name,
  #invoice-print-area .invoice-doc-title,
  #invoice-print-area .invoice-doc-section-title,
  #invoice-print-area .invoice-doc-total-label,
  #invoice-print-area .invoice-doc-strong {
    color: #0f172a !important;
  }
  #invoice-print-area .invoice-doc-meta,
  #invoice-print-area .invoice-doc-label,
  #invoice-print-area .invoice-doc-notes {
    color: #475569 !important;
  }
  #invoice-print-area .invoice-doc-total-value {
    color: #E06A12 !important;
  }
  #invoice-print-area .invoice-doc-header {
    border-bottom-color: #cbd5e1 !important;
  }
  #invoice-print-area .invoice-doc-table th,
  #invoice-print-area .invoice-doc-table td {
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
  }
  #invoice-print-area .invoice-doc-table th {
    background: #f8fafc !important;
    color: #0f172a !important;
  }
  #invoice-print-area .invoice-doc-logo-img--print {
    width: 56px;
    height: 56px;
    object-fit: contain;
  }
  .no-print { display: none !important; }
}

/* ——— Quotation Builder (violet theme) ——— */
.template-hub-nav--quote {
  background: #FFF5EB;
  color: #6d28d9;
  border: 1px solid #c4b5fd;
}
.dark .template-hub-nav--quote {
  background: rgba(124, 58, 237, 0.15);
  color: #c4b5fd;
  border-color: rgba(124, 58, 237, 0.35);
}

.quotation-builder-section {
  background: linear-gradient(180deg, #FFF5EB 0%, #FFF5EB 35%, #ffffff 100%);
  border-top: 1px solid #e9d5ff;
}
.dark .quotation-builder-section {
  background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 45%, #0f172a 100%);
  border-color: #4c1d95;
}

.quotation-builder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e9d5ff;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08);
}
.dark .quotation-builder-toolbar {
  background: #1e293b;
  border-color: #4c1d95;
}

.quotation-builder-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .quotation-builder-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2.5fr);
    align-items: start;
  }
}
@media (min-width: 1280px) {
  .quotation-builder-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 2.5fr) minmax(0, 1fr);
  }
}

.quotation-builder-panel {
  border-radius: 1rem;
  border: 1px solid #e9d5ff;
  background: #fff;
  overflow: hidden;
}
.dark .quotation-builder-panel {
  background: #1e293b;
  border-color: #4c1d95;
}

.quotation-builder-panel-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e9d5ff;
  background: #FFF5EB;
}
.dark .quotation-builder-panel-header {
  background: #1e1b4b;
  border-color: #4c1d95;
}

.quotation-builder-panel-body { padding: 1.25rem; }
@media (min-width: 1024px) {
  .quotation-builder-panel-body--form {
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
  }
  .quotation-builder-preview-col { position: sticky; top: 5.5rem; }
  .quotation-builder-section .tool-assistant-col { position: sticky; top: 5.5rem; }
}

.quote-form-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e9d5ff;
}
.dark .quote-form-section { border-color: #4c1d95; }
.quote-form-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.quote-form-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 0.35rem;
}
.dark .quote-form-label { color: #94a3b8; }

.quote-form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.875rem;
  color: #0f172a;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dark .quote-form-input {
  background: #0f172a;
  border-color: #475569;
  color: #f1f5f9;
}
.quote-form-input:focus {
  outline: none;
  border-color: #C45A10;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}
.quote-form-input.is-valid { border-color: #34d399; }
.quote-form-input.is-attention { border-color: #fbbf24; }
.quote-form-input.is-invalid { border-color: #f87171; }
.quote-form-input--file { padding: 0.5rem; font-size: 0.8125rem; }

.quote-line-item {
  display: grid;
  grid-template-columns: 1fr 3.5rem 4.5rem 4rem 2rem 2rem;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  align-items: start;
}
.quote-line-desc {
  resize: vertical;
  min-height: 2.75rem;
  line-height: 1.45;
}
@media (max-width: 639px) {
  .quote-line-item {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .quote-line-desc { grid-column: 1 / -1; }
  .quote-line-cost { grid-column: span 1; }
}

.quote-line-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 0.375rem;
  color: #94a3b8;
  transition: color 0.15s, background 0.15s;
}
.quote-line-remove:hover { color: #ef4444; background: #fef2f2; }

.quote-line-duplicate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 0.375rem;
  color: #94a3b8;
  transition: color 0.15s, background 0.15s;
}
.quote-line-duplicate:hover { color: #C45A10; background: #FFF5EB; }

.quote-add-line {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #C45A10;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px dashed #c4b5fd;
  background: #FFF5EB;
}
.dark .quote-add-line {
  color: #c4b5fd;
  border-color: #6d28d9;
  background: rgba(124, 58, 237, 0.1);
}

.quote-logo-preview {
  max-height: 3.5rem;
  max-width: 8rem;
  object-fit: contain;
  border-radius: 0.5rem;
  border: 1px solid #e9d5ff;
  background: #fff;
  padding: 0.25rem;
}

.template-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.template-compare-table th,
.template-compare-table td {
  border: 1px solid #e2e8f0;
  padding: 0.75rem 1rem;
  text-align: left;
}
.dark .template-compare-table th,
.dark .template-compare-table td { border-color: #475569; }
.template-compare-table th {
  background: #FFF5EB;
  font-weight: 600;
  color: #6d28d9;
}
.dark .template-compare-table th {
  background: #1e1b4b;
  color: #c4b5fd;
}

.dark .template-preview-shell .quote-doc-biz-name,
.dark .template-preview-shell .quote-doc-party-name { color: #f8fafc; }
.dark .template-preview-shell .quote-doc-contact-line,
.dark .template-preview-shell .quote-doc-party-line,
.dark .template-preview-shell .quote-doc-party-body { color: #94a3b8; }
.dark .template-preview-shell .quote-doc-header { border-bottom-color: #475569; }
.dark .template-preview-shell .quote-doc-parties { border-bottom-color: #334155; }
.dark .template-preview-shell .quote-doc-party-label,
.dark .template-preview-shell .quote-doc-section-title { color: #94a3b8; }
.dark .template-preview-shell .quote-doc-doc-card {
  border-color: #475569;
}
.dark .template-preview-shell .quote-doc-doc-card-head {
  background: #1e293b;
  border-bottom-color: #334155;
  color: #cbd5e1;
}
.dark .template-preview-shell .quote-doc-meta-table th {
  color: #94a3b8;
  border-bottom-color: #334155;
}
.dark .template-preview-shell .quote-doc-meta-table td {
  color: #f1f5f9;
  border-bottom-color: #334155;
}
.dark .template-preview-shell .quote-doc-table thead th {
  background: #1e293b;
  color: #cbd5e1;
  border-color: #475569;
}
.dark .template-preview-shell .quote-doc-table tbody td {
  border-color: #334155;
  color: #cbd5e1;
}
.dark .template-preview-shell .quote-doc-desc-cell { color: #e2e8f0; }
.dark .template-preview-shell .quote-doc-total td { color: #94a3b8; }
.dark .template-preview-shell .quote-doc-total td:last-child { color: #cbd5e1; }
.dark .template-preview-shell .quote-doc-total tr.quote-doc-total-final td,
.dark .template-preview-shell .quote-doc-total tr.quote-doc-total-final td:last-child { color: #f8fafc; }
.dark .template-preview-shell .quote-doc-margin-box {
  background: #0f172a;
  border-color: #475569;
  color: #cbd5e1;
}
.dark .template-preview-shell .quote-doc-margin-box .quote-doc-section-title { color: #94a3b8; }
.dark .template-preview-shell .quote-doc-signature-block,
.dark .template-preview-shell .quote-doc-signature-block p { color: #cbd5e1; }
.dark .template-preview-shell .quote-doc-signature-block strong { color: #f8fafc; }
.dark .template-preview-shell .quote-doc-pay-link { color: #e2e8f0; }
.dark .template-preview-shell .quote-doc-payment-block {
  background: #1e293b;
  border-color: #475569;
}
.dark .template-preview-shell .quote-doc-payment-row { color: #cbd5e1; }
.dark .template-preview-shell .quote-doc-prose-body { color: #cbd5e1; }

.quotation-hub-hero {
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(124, 58, 237, 0.12), transparent),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(99, 102, 241, 0.08), transparent),
    linear-gradient(180deg, #FFF5EB 0%, #ffffff 100%);
}
.dark .quotation-hub-hero {
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(124, 58, 237, 0.15), transparent),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(99, 102, 241, 0.1), transparent),
    linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

/* ═══════════════════════════════════════════════════════════════
   Business Plan / Product Catalogue / Marketing Calendar / Daily
   Checklist — shared builder design system extensions
   ═══════════════════════════════════════════════════════════════ */

/* Hub nav pill color variants */
.template-hub-nav--emerald { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.dark .template-hub-nav--emerald { background: rgba(16,185,129,0.15); color: #6ee7b7; border-color: rgba(16,185,129,0.35); }
.template-hub-nav--amber { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.dark .template-hub-nav--amber { background: rgba(217,119,6,0.15); color: #fcd34d; border-color: rgba(217,119,6,0.35); }
.template-hub-nav--teal { background: #FFF5EB; color: #0e7490; border-color: #a5f3fc; }
.dark .template-hub-nav--teal { background: rgba(14,116,144,0.18); color: #F5A05A; border-color: rgba(14,116,144,0.4); }
.template-hub-nav--rose { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.dark .template-hub-nav--rose { background: rgba(190,18,60,0.15); color: #fda4af; border-color: rgba(190,18,60,0.35); }

/* Hero backgrounds per tool */
.plan-hub-hero { background: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(5,150,105,0.1), transparent), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(14,165,233,0.08), transparent), linear-gradient(180deg, #f0fdf9 0%, #ffffff 100%); }
.dark .plan-hub-hero { background: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(5,150,105,0.14), transparent), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(14,165,233,0.1), transparent), linear-gradient(180deg, #0f172a 0%, #1e293b 100%); }
.catalog-hub-hero { background: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(217,119,6,0.1), transparent), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(234,88,12,0.08), transparent), linear-gradient(180deg, #fffbeb 0%, #ffffff 100%); }
.dark .catalog-hub-hero { background: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(217,119,6,0.14), transparent), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(234,88,12,0.1), transparent), linear-gradient(180deg, #0f172a 0%, #1e293b 100%); }
.calendar-hub-hero { background: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(8,145,178,0.1), transparent), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(99,102,241,0.08), transparent), linear-gradient(180deg, #FFF5EB 0%, #ffffff 100%); }
.dark .calendar-hub-hero { background: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(242, 122, 33, 0.15), transparent), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(99,102,241,0.1), transparent), linear-gradient(180deg, #0f172a 0%, #1e293b 100%); }
.checklist-hub-hero { background: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(225,29,72,0.1), transparent), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(99,102,241,0.08), transparent), linear-gradient(180deg, #fff1f2 0%, #ffffff 100%); }
.dark .checklist-hub-hero { background: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(225,29,72,0.15), transparent), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(99,102,241,0.1), transparent), linear-gradient(180deg, #0f172a 0%, #1e293b 100%); }

/* Builder section backdrop, per tool */
.tool-builder-section--emerald { background: linear-gradient(180deg, #ecfdf5 0%, #f8fafc 30%, #ffffff 100%); border-top: 1px solid #a7f3d0; }
.dark .tool-builder-section--emerald { background: linear-gradient(180deg, #0f172a 0%, #052e2b 40%, #0f172a 100%); border-color: #065f46; }
.tool-builder-section--amber { background: linear-gradient(180deg, #fffbeb 0%, #f8fafc 30%, #ffffff 100%); border-top: 1px solid #fde68a; }
.dark .tool-builder-section--amber { background: linear-gradient(180deg, #0f172a 0%, #451a03 40%, #0f172a 100%); border-color: #92400e; }
.tool-builder-section--teal { background: linear-gradient(180deg, #FFF5EB 0%, #f8fafc 30%, #ffffff 100%); border-top: 1px solid #a5f3fc; }
.dark .tool-builder-section--teal { background: linear-gradient(180deg, #0f172a 0%, #083344 40%, #0f172a 100%); border-color: #155e75; }
.tool-builder-section--rose { background: linear-gradient(180deg, #fff1f2 0%, #f8fafc 30%, #ffffff 100%); border-top: 1px solid #fecdd3; }
.dark .tool-builder-section--rose { background: linear-gradient(180deg, #0f172a 0%, #4c0519 40%, #0f172a 100%); border-color: #9f1239; }

/* Toolbar / panel color variants (border + shadow tint only — reuses .invoice-builder-toolbar / .invoice-builder-panel base) */
.tool-toolbar--emerald { border-color: #a7f3d0; box-shadow: 0 4px 16px rgba(5,150,105,0.08); }
.dark .tool-toolbar--emerald { border-color: #065f46; }
.tool-toolbar--amber { border-color: #fde68a; box-shadow: 0 4px 16px rgba(217,119,6,0.08); }
.dark .tool-toolbar--amber { border-color: #92400e; }
.tool-toolbar--teal { border-color: #a5f3fc; box-shadow: 0 4px 16px rgba(8,145,178,0.08); }
.dark .tool-toolbar--teal { border-color: #155e75; }
.tool-toolbar--rose { border-color: #fecdd3; box-shadow: 0 4px 16px rgba(225,29,72,0.08); }
.dark .tool-toolbar--rose { border-color: #9f1239; }

.tool-panel--emerald { border-color: #a7f3d0; }
.dark .tool-panel--emerald { border-color: #065f46; }
.tool-panel--amber { border-color: #fde68a; }
.dark .tool-panel--amber { border-color: #92400e; }
.tool-panel--teal { border-color: #a5f3fc; }
.dark .tool-panel--teal { border-color: #155e75; }
.tool-panel--rose { border-color: #fecdd3; }
.dark .tool-panel--rose { border-color: #9f1239; }

.tool-panel-header--emerald { background: #f0fdf9; border-color: #a7f3d0; }
.dark .tool-panel-header--emerald { background: #052e2b; border-color: #065f46; }
.tool-panel-header--amber { background: #fffbeb; border-color: #fde68a; }
.dark .tool-panel-header--amber { background: #451a03; border-color: #92400e; }
.tool-panel-header--teal { background: #FFF5EB; border-color: #a5f3fc; }
.dark .tool-panel-header--teal { background: #083344; border-color: #155e75; }
.tool-panel-header--rose { background: #fff1f2; border-color: #fecdd3; }
.dark .tool-panel-header--rose { background: #4c0519; border-color: #9f1239; }

/* 2-column builder grid (form/list | live preview) */
.tool-builder-grid-2col { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) {
  .tool-builder-grid-2col { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .tool-builder-grid-2col .tool-preview-col { position: sticky; top: 5.5rem; }
}

/* Add-line style buttons, color variants (base: .invoice-add-line) */
.tool-add-btn--emerald { color: #059669; border-color: #6ee7b7; background: #ecfdf5; }
.dark .tool-add-btn--emerald { color: #6ee7b7; border-color: #059669; background: rgba(5,150,105,0.12); }
.tool-add-btn--amber { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.dark .tool-add-btn--amber { color: #fcd34d; border-color: #b45309; background: rgba(217,119,6,0.12); }
.tool-add-btn--teal { color: #0e7490; border-color: #F5A05A; background: #FFF5EB; }
.dark .tool-add-btn--teal { color: #F5A05A; border-color: #0e7490; background: rgba(8,145,178,0.12); }

/* Focus ring color variants for form inputs */
.plan-input:focus, .catalog-input:focus, .calendar-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(5,150,105,0.15);
  border-color: #059669;
}
.catalog-input:focus { box-shadow: 0 0 0 3px rgba(217,119,6,0.15); border-color: #d97706; }
.calendar-input:focus { box-shadow: 0 0 0 3px rgba(242, 122, 33, 0.15); border-color: #3D3832; }

/* ——— Business Plan: tabbed section editor ——— */
.plan-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.dark .plan-tabs { background: #0f172a; border-color: #334155; }
.plan-tab-btn {
  padding: 0.45rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.dark .plan-tab-btn { color: #94a3b8; }
.plan-tab-btn:hover { background: #f1f5f9; color: #334155; }
.dark .plan-tab-btn:hover { background: #1e293b; color: #e2e8f0; }
.plan-tab-btn.active {
  background: linear-gradient(135deg, #059669, #0ea5e9);
  color: #fff;
  border-color: transparent;
}
.plan-section-panel { display: none; }
.plan-section-panel.active { display: block; }

.plan-fin-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.75rem; }
.plan-fin-row { display: grid; grid-template-columns: 5rem 1fr 1fr 1fr; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.plan-fin-row-label { font-size: 0.75rem; font-weight: 600; color: #64748b; }
.dark .plan-fin-row-label { color: #94a3b8; }
@media (max-width: 640px) {
  .plan-fin-row { grid-template-columns: 1fr; }
  .plan-fin-row-label { padding-top: 0.25rem; }
}
.plan-fin-profit { font-weight: 700; }
.plan-fin-profit.positive { color: #059669; }
.dark .plan-fin-profit.positive { color: #34d399; }
.plan-fin-profit.negative { color: #dc2626; }
.dark .plan-fin-profit.negative { color: #f87171; }

.plan-milestone-item { display: grid; grid-template-columns: 1fr 8rem 2rem 2rem; gap: 0.5rem; margin-bottom: 0.5rem; align-items: start; }
@media (max-width: 480px) {
  .plan-milestone-item { grid-template-columns: 1fr 1fr; }
  .plan-milestone-item .invoice-line-duplicate,
  .plan-milestone-item .invoice-line-remove { grid-column: span 1; justify-self: end; }
}

/* Preview scaling + dark mode for biz-doc inside on-screen preview shell */
.template-preview-shell .biz-doc { font-size: 0.8125rem; }
.dark .template-preview-shell .biz-doc-title-main,
.dark .template-preview-shell .biz-doc-strong,
.dark .template-preview-shell .biz-doc-h3 { color: #f8fafc; }
.dark .template-preview-shell .biz-doc-subtitle,
.dark .template-preview-shell .biz-doc-meta-row,
.dark .template-preview-shell .biz-doc-label,
.dark .template-preview-shell .biz-doc-prose { color: #cbd5e1; }
.dark .template-preview-shell .biz-doc-header { border-color: #475569; }
.dark .template-preview-shell .biz-doc-section-title { border-color: #334155; color: #34d399; }
.dark .template-preview-shell .biz-doc-eyebrow { color: #34d399; }
.dark .template-preview-shell .biz-doc-card { background: #0f172a; border-color: #475569; }
.dark .template-preview-shell .biz-doc-card p { color: #cbd5e1; }
.dark .template-preview-shell .biz-doc-table th, .dark .template-preview-shell .biz-doc-table td { border-color: #475569; color: #cbd5e1; }
.dark .template-preview-shell .biz-doc-table thead th { background: #0f172a; color: #f1f5f9; }
.dark .template-preview-shell .biz-doc-table tbody tr:nth-child(even) td { background: rgba(15,23,42,0.5); }
.dark .template-preview-shell .biz-doc-fin-box { border-color: #475569; background: #0f172a; }
.dark .template-preview-shell .biz-doc-fin-box .biz-doc-fin-value { color: #f8fafc; }
.dark .template-preview-shell .biz-doc-empty { color: #64748b; }
.dark .template-preview-shell .biz-doc-footer { border-color: #475569; color: #94a3b8; }
.dark .template-preview-shell .biz-doc-product-card { border-color: #475569; }
.dark .template-preview-shell .biz-doc-product-card .biz-doc-product-name { color: #f8fafc; }
.dark .template-preview-shell .biz-doc-product-card .biz-doc-product-desc,
.dark .template-preview-shell .biz-doc-product-card ul { color: #cbd5e1; }
.dark .template-preview-shell .biz-doc-cal-cell { border-color: #475569; }
.dark .template-preview-shell .biz-doc-cal-daynum { color: #f1f5f9; }
.dark .template-preview-shell .biz-doc-check-item { color: #e2e8f0; }
.dark .template-preview-shell .biz-doc-check-section h3 { color: #f8fafc; border-color: #334155; }

/* ——— Product Catalogue ——— */
.catalog-product-row {
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 0.75rem;
  background: #fff;
}
.dark .catalog-product-row { background: #0f172a; border-color: #334155; }
.catalog-product-row-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.625rem; }
.catalog-product-row-title { font-size: 0.8125rem; font-weight: 700; color: #0f172a; }
.dark .catalog-product-row-title { color: #f1f5f9; }
.catalog-stock-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; user-select: none; }
.catalog-stock-toggle input { width: 1rem; height: 1rem; accent-color: #059669; cursor: pointer; }

.catalog-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.875rem; }
.catalog-card {
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  padding: 1rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.dark .catalog-card { background: #1e293b; border-color: #334155; }
.catalog-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(217,119,6,0.15); }
.catalog-card-cat { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: #d97706; font-weight: 700; margin-bottom: 0.25rem; }
.dark .catalog-card-cat { color: #fbbf24; }
.catalog-card-name { font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight: 700; color: #0f172a; margin-bottom: 0.25rem; font-size: 0.9375rem; }
.dark .catalog-card-name { color: #f8fafc; }
.catalog-card-sku { font-size: 0.6875rem; color: #94a3b8; margin-bottom: 0.5rem; }
.catalog-card-desc { font-size: 0.75rem; color: #64748b; line-height: 1.45; margin-bottom: 0.5rem; }
.dark .catalog-card-desc { color: #94a3b8; }
.catalog-card-price { display: flex; align-items: baseline; gap: 0.4rem; margin-top: auto; }
.catalog-card-price-current { font-size: 1.0625rem; font-weight: 800; color: #d97706; }
.dark .catalog-card-price-current { color: #fbbf24; }
.catalog-card-price-compare { font-size: 0.75rem; color: #94a3b8; text-decoration: line-through; }
.catalog-card-features { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.catalog-card-features li { font-size: 0.6875rem; color: #475569; display: flex; gap: 0.35rem; }
.dark .catalog-card-features li { color: #cbd5e1; }
.catalog-card-features li::before { content: '✓'; color: #059669; font-weight: 700; flex-shrink: 0; }
.catalog-card-stock { position: absolute; top: 0.75rem; right: 0.75rem; }
.catalog-card-discount {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: #dc2626;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}
.catalog-card { position: relative; }
.cal-filter-chip--amber:hover { border-color: #fcd34d; color: #b45309; }
.cal-filter-chip--amber.active { background: linear-gradient(135deg, #d97706, #ea580c); color: #fff; border-color: transparent; }
.catalog-stat-pill { display: flex; flex-direction: column; align-items: center; padding: 0.875rem; border-radius: 0.75rem; background: #fffbeb; border: 1px solid #fde68a; }
.dark .catalog-stat-pill { background: rgba(217,119,6,0.1); border-color: #92400e; }
.catalog-stat-pill strong { font-size: 1.25rem; font-weight: 800; color: #b45309; }
.dark .catalog-stat-pill strong { color: #fcd34d; }
.catalog-stat-pill span { font-size: 0.6875rem; color: #92400e; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.dark .catalog-stat-pill span { color: #fcd34d; }

/* ——— Marketing Calendar ——— */
.cal-nav-btn {
  width: 2.25rem; height: 2.25rem; border-radius: 0.625rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; color: #475569; background: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.dark .cal-nav-btn { background: #1e293b; border-color: #475569; color: #cbd5e1; }
.cal-nav-btn:hover { background: #FFF5EB; border-color: #F5A05A; color: #0e7490; }
.dark .cal-nav-btn:hover { background: rgba(242, 122, 33, 0.15); border-color: #3D3832; color: #F5A05A; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 0.35rem; }
.cal-head { text-align: center; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; padding-bottom: 0.35rem; }
.cal-cell {
  min-height: 4.5rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 0.35rem;
  font-size: 0.6875rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}
.dark .cal-cell { background: #0f172a; border-color: #334155; }
.cal-cell--empty { background: transparent; border-color: transparent; }
.cal-cell--today { border-color: #3D3832; box-shadow: 0 0 0 1px #3D3832 inset; }
.cal-cell-num { font-weight: 700; color: #334155; font-size: 0.75rem; }
.dark .cal-cell-num { color: #e2e8f0; }
.cal-event-chip {
  display: block;
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event-chip--instagram { background: #fce7f3; color: #be185d; }
.cal-event-chip--whatsapp { background: #dcfce7; color: #15803d; }
.cal-event-chip--email { background: #FFE8D4; color: #E06A12; }
.cal-event-chip--ads { background: #fef3c7; color: #b45309; }
.cal-event-chip--blog { background: #e0e7ff; color: #4338ca; }
.cal-event-chip--offline { background: #f1f5f9; color: #475569; }
.dark .cal-event-chip--instagram { background: rgba(190,24,93,0.2); color: #f9a8d4; }
.dark .cal-event-chip--whatsapp { background: rgba(21,128,61,0.2); color: #86efac; }
.dark .cal-event-chip--email { background: rgba(29,78,216,0.2); color: #93c5fd; }
.dark .cal-event-chip--ads { background: rgba(180,83,9,0.2); color: #fcd34d; }
.dark .cal-event-chip--blog { background: rgba(67,56,202,0.2); color: #c7d2fe; }
.dark .cal-event-chip--offline { background: rgba(71,85,105,0.3); color: #cbd5e1; }

.channel-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; }
.channel-badge--instagram { background: #fce7f3; color: #be185d; }
.channel-badge--whatsapp { background: #dcfce7; color: #15803d; }
.channel-badge--email { background: #FFE8D4; color: #E06A12; }
.channel-badge--ads { background: #fef3c7; color: #b45309; }
.channel-badge--blog { background: #e0e7ff; color: #4338ca; }
.channel-badge--offline { background: #f1f5f9; color: #475569; }
.dark .channel-badge--instagram { background: rgba(190,24,93,0.2); color: #f9a8d4; }
.dark .channel-badge--whatsapp { background: rgba(21,128,61,0.2); color: #86efac; }
.dark .channel-badge--email { background: rgba(29,78,216,0.2); color: #93c5fd; }
.dark .channel-badge--ads { background: rgba(180,83,9,0.2); color: #fcd34d; }
.dark .channel-badge--blog { background: rgba(67,56,202,0.2); color: #c7d2fe; }
.dark .channel-badge--offline { background: rgba(71,85,105,0.3); color: #cbd5e1; }

.status-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; }
.status-badge--planned { background: #f1f5f9; color: #475569; }
.status-badge--in-progress { background: #fef3c7; color: #b45309; }
.status-badge--done { background: #ecfdf5; color: #047857; }
.status-badge--cancelled { background: #fef2f2; color: #b91c1c; }
.dark .status-badge--planned { background: rgba(71,85,105,0.3); color: #cbd5e1; }
.dark .status-badge--in-progress { background: rgba(180,83,9,0.2); color: #fcd34d; }
.dark .status-badge--done { background: rgba(4,120,87,0.2); color: #6ee7b7; }
.dark .status-badge--cancelled { background: rgba(185,28,28,0.2); color: #fca5a5; }

.campaign-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border: 1px solid #e2e8f0; border-radius: 0.75rem; background: #fff; margin-bottom: 0.5rem; }
.dark .campaign-item { background: #0f172a; border-color: #334155; }
.campaign-item-date { font-size: 0.75rem; font-weight: 700; color: #3D3832; min-width: 3.25rem; }
.dark .campaign-item-date { color: #F5A05A; }
.campaign-item-title { font-size: 0.8125rem; font-weight: 600; color: #0f172a; flex: 1 1 8rem; }
.dark .campaign-item-title { color: #f1f5f9; }
.campaign-item-notes { font-size: 0.75rem; color: #64748b; width: 100%; }
.dark .campaign-item-notes { color: #94a3b8; }
.campaign-item-remove { color: #94a3b8; padding: 0.25rem; border-radius: 0.375rem; }
.campaign-item-remove:hover { color: #ef4444; background: #fef2f2; }
.campaign-item-action { color: #94a3b8; padding: 0.25rem; border-radius: 0.375rem; }
.campaign-item-action:hover { color: #3D3832; background: #FFF5EB; }
.dark .campaign-item-action:hover { background: rgba(8, 145, 178, 0.15); }
.campaign-item { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.campaign-item:hover { border-color: #F5A05A; }
.dark .campaign-item:hover { border-color: rgba(103, 232, 249, 0.4); }
.campaign-item--editing { border-color: #3D3832; box-shadow: 0 0 0 1px #3D3832 inset; }
.campaign-item--highlight { background: #FFF5EB; border-color: #F5A05A; }
.dark .campaign-item--highlight { background: rgba(8, 145, 178, 0.12); }

.cal-cell[data-day] { cursor: pointer; }
.cal-cell--selected { border-color: #3D3832; box-shadow: 0 0 0 2px rgba(242, 122, 33, 0.35) inset; }

.cal-filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cal-filter-chip {
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dark .cal-filter-chip { background: #1e293b; border-color: #334155; color: #cbd5e1; }
.cal-filter-chip:hover { border-color: #F5A05A; color: #0e7490; }
.cal-filter-chip.active {
  background: linear-gradient(135deg, #3D3832, #E06A12);
  color: #fff;
  border-color: transparent;
}

/* ——— Daily Business Checklist ——— */
.dailychecklist-category { margin-bottom: 1.75rem; }
.dailychecklist-category:last-child { margin-bottom: 0; }
.dailychecklist-category-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.dailychecklist-category-title { display: flex; align-items: center; gap: 0.625rem; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight: 700; color: #0f172a; font-size: 0.9375rem; }
.dark .dailychecklist-category-title { color: #f1f5f9; }
.dailychecklist-category-icon { width: 2rem; height: 2rem; border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dailychecklist-category-count { font-size: 0.75rem; color: #94a3b8; font-weight: 600; }

.dailychecklist-date-nav { display: flex; align-items: center; gap: 0.625rem; }
.dailychecklist-date-btn { padding: 0.5rem 0.875rem; border-radius: 0.625rem; border: 1px solid #e2e8f0; background: #fff; font-size: 0.8125rem; font-weight: 600; color: #475569; }
.dark .dailychecklist-date-btn { background: #1e293b; border-color: #475569; color: #cbd5e1; }
.dailychecklist-date-btn:hover { border-color: #fda4af; color: #be123c; }
.dailychecklist-date-btn.active { background: linear-gradient(135deg, #e11d48, #ec4899); color: #fff; border-color: transparent; }
.dailychecklist-pack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.dailychecklist-pack-chip {
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.dark .dailychecklist-pack-chip {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
.dailychecklist-pack-chip:hover {
  border-color: #fda4af;
  color: #be123c;
}
.dailychecklist-pack-chip.active {
  background: linear-gradient(135deg, #e11d48, #c026d3);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(225, 29, 72, 0.55);
}
.dailychecklist-add-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: stretch;
}
.dailychecklist-add-bar .invoice-form-input {
  flex: 1 1 14rem;
  min-width: 0;
}
.dailychecklist-item-remove,
.dailychecklist-item-edit {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: #94a3b8;
}
.dailychecklist-item-remove:hover {
  color: #ef4444;
  background: #fef2f2;
}
.dark .dailychecklist-item-remove:hover {
  background: rgba(239, 68, 68, 0.12);
}
.dailychecklist-item-edit:hover {
  color: #F27A21;
  background: #FFF5EB;
}
.dark .dailychecklist-item-edit:hover {
  background: rgba(37, 99, 235, 0.15);
}
.dailychecklist-hide-completed .check-item.checked {
  display: none;
}
.dailychecklist-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  border: 1px dashed #fda4af;
  border-radius: 1rem;
  background: #fff1f2;
}
.dark .dailychecklist-empty {
  background: rgba(225, 29, 72, 0.08);
  border-color: rgba(251, 113, 133, 0.35);
}

.dailychecklist-stats {
  background: #fff;
  border: 1px solid #fecdd3;
  border-radius: 1.25rem;
  padding: 1.25rem 1.35rem 1.35rem;
  box-shadow: 0 10px 30px -18px rgba(225, 29, 72, 0.35);
}
.dark .dailychecklist-stats {
  background: #1e293b;
  border-color: rgba(251, 113, 133, 0.28);
}
.dailychecklist-stats-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.dailychecklist-stats-tabs {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.25rem;
  border-radius: 9999px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
}
.dark .dailychecklist-stats-tabs {
  background: rgba(225, 29, 72, 0.12);
  border-color: rgba(251, 113, 133, 0.3);
}
.dailychecklist-stats-tab {
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #9f1239;
  background: transparent;
}
.dark .dailychecklist-stats-tab { color: #fda4af; }
.dailychecklist-stats-tab.active {
  background: linear-gradient(135deg, #e11d48, #c026d3);
  color: #fff;
}
.dailychecklist-stats-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .dailychecklist-stats-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.dailychecklist-stat-card {
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0.9rem 1rem;
  min-width: 0;
}
.dark .dailychecklist-stat-card {
  background: #0f172a;
  border-color: #334155;
}
.dailychecklist-stat-card--accent {
  background: linear-gradient(145deg, #fff1f2, #fdf2f8);
  border-color: #fda4af;
}
.dark .dailychecklist-stat-card--accent {
  background: linear-gradient(145deg, rgba(225, 29, 72, 0.18), rgba(192, 38, 211, 0.12));
  border-color: rgba(251, 113, 133, 0.4);
}
.dailychecklist-stat-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}
.dailychecklist-stat-value {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}
.dark .dailychecklist-stat-value { color: #f8fafc; }
.dailychecklist-stat-sub {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #64748b;
}
.dark .dailychecklist-stat-sub { color: #94a3b8; }
.dailychecklist-stats-chart {
  margin-top: 1rem;
  display: grid;
  gap: 0.45rem;
}
.dailychecklist-bar-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 3.25rem;
  align-items: center;
  gap: 0.65rem;
}
.dailychecklist-bar-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}
.dark .dailychecklist-bar-label { color: #94a3b8; }
.dailychecklist-bar-track {
  height: 0.55rem;
  border-radius: 9999px;
  background: #e2e8f0;
  overflow: hidden;
}
.dark .dailychecklist-bar-track { background: #334155; }
.dailychecklist-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #e11d48, #c026d3);
  min-width: 0;
  transition: width 0.25s ease;
}
.dailychecklist-bar-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: #be123c;
  text-align: right;
}
.dark .dailychecklist-bar-pct { color: #fb7185; }
.dailychecklist-bar-row.is-empty .dailychecklist-bar-pct,
.dailychecklist-bar-row.is-empty .dailychecklist-bar-label {
  color: #94a3b8;
}
.dailychecklist-bar-row.is-clickable {
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 0.15rem 0.2rem;
}
.dailychecklist-bar-row.is-clickable:hover {
  background: #fff1f2;
}
.dark .dailychecklist-bar-row.is-clickable:hover {
  background: rgba(225, 29, 72, 0.1);
}