.smartboard-demo,
.smartboard-demo .small,
.smartboard-demo .form-select-sm,
.smartboard-demo .btn-sm,
.smartboard-demo table {
  font-size: 0.875rem;
}

.smartboard-demo {
  --pt-border: #dee2e6;
  --pt-hover: #f8f9fa;
  --pt-drop-bg: #f8f9fa;
  --pt-header-bg: #f8f9fa;
  --pt-header-text: #212529;
  --pt-row-odd: #fff;
  --pt-sticky-bg: #fff;
  --pt-total-bg: #f8f9fa;
  --pt-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --pt-row-no-width: 52px;
  --pt-header-row-height: 38px;
}

.smartboard-hero-panel {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border: 1px solid rgba(27, 77, 255, 0.12);
  border-radius: 28px;
  background: linear-gradient(160deg, #f5f8ff 0%, #ffffff 62%);
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.08);
}

.smartboard-hero-panel::after {
  content: "";
  position: absolute;
  inset: auto -120px -120px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 77, 255, 0.12) 0%, transparent 68%);
  pointer-events: none;
}

.smartboard-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #1b4dff;
  border: 1px solid rgba(27, 77, 255, 0.16);
  font-size: 0.875rem;
  font-weight: 700;
}

.smartboard-hero-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.22;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: #111827;
}

.smartboard-hero-subtitle {
  max-width: 46rem;
  color: #4b5563;
  font-size: 1.02rem;
}

.smartboard-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.smartboard-inline-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: #ecfdf5;
  border: 1px solid rgba(5, 150, 105, 0.18);
  color: #065f46;
  font-weight: 600;
}

.smartboard-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.smartboard-mini-card {
  min-height: 100%;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.smartboard-mini-card__label {
  font-size: 0.875rem;
  color: #6b7280;
}

.smartboard-mini-card__value {
  margin-top: 0.2rem;
  font-size: 1.18rem;
  font-weight: 800;
  color: #111827;
}

.smartboard-mini-card__hint {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  color: #9ca3af;
}

.smartboard-surface {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

.smartboard-surface__header {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.smartboard-surface__body {
  padding: 1.25rem;
}

.smartboard-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1b4dff;
}

.smartboard-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.smartboard-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: #374151;
}

.smartboard-check-list li::before {
  content: "\F633";
  font-family: "bootstrap-icons";
  color: #059669;
  line-height: 1.35;
}

.smartboard-callout {
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.smartboard-callout--accent {
  background: #eef2ff;
  border-color: rgba(27, 77, 255, 0.14);
}

.smartboard-callout--success {
  background: #ecfdf5;
  border-color: rgba(5, 150, 105, 0.16);
}

.smartboard-kpi {
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.smartboard-kpi .small {
  color: #6b7280 !important;
  font-weight: 600;
}

.smartboard-kpi .fs-4 {
  margin-top: 0.15rem;
  color: #111827;
  letter-spacing: -0.03em;
}

.smartboard-concept {
  padding: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.96)),
    radial-gradient(circle at top right, rgba(27, 77, 255, 0.08) 0, transparent 38%);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.05);
}

.smartboard-wireframe {
  height: 100%;
  padding: 1rem;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fff;
}

.smartboard-wireframe--desktop {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 30px rgba(15, 23, 42, 0.06);
}

.smartboard-wireframe--mobile {
  max-width: 460px;
  margin-inline: auto;
}

.smartboard-wireframe__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.smartboard-wireframe__eyebrow {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1b4dff;
}

.smartboard-wireframe__title {
  margin-top: 0.2rem;
  font-size: 1.02rem;
  font-weight: 800;
  color: #111827;
}

.smartboard-wireframe__chip {
  flex-shrink: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid rgba(27, 77, 255, 0.14);
  color: #1b4dff;
  font-size: 0.875rem;
  font-weight: 700;
}

.smartboard-wireframe__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.smartboard-wireframe__body--mobile {
  gap: 0.65rem;
}

.smartboard-wireframe__row {
  display: grid;
  gap: 0.75rem;
}

.smartboard-wireframe__row--kpi {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.smartboard-wireframe__row--grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.smartboard-wireframe__panel {
  min-height: 180px;
  padding: 0.9rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.smartboard-wireframe__panel-head {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #4b5563;
}

.smartboard-wireframe__panel--table {
  min-height: 120px;
}

.smartboard-wireframe__panel--list {
  min-height: 122px;
}

.smartboard-wireframe__kpi {
  padding: 0.85rem 0.9rem;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.smartboard-wireframe__kpi span,
.smartboard-wireframe__kpi strong {
  display: block;
}

.smartboard-wireframe__kpi span {
  font-size: 0.875rem;
  color: #6b7280;
}

.smartboard-wireframe__kpi strong {
  margin-top: 0.25rem;
  font-size: 1.05rem;
  color: #111827;
  letter-spacing: -0.03em;
}

.smartboard-wireframe__kpi--small strong {
  font-size: 1rem;
}

.smartboard-wireframe__stack {
  display: grid;
  gap: 0.65rem;
}

.smartboard-wireframe__bars {
  height: 100%;
  min-height: 110px;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0.35rem 0.15rem 0.1rem;
}

.smartboard-wireframe__bars span {
  flex: 1;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #1b4dff, #7ea0ff);
  opacity: 0.72;
}

.smartboard-wireframe__bars--mobile {
  min-height: 96px;
}

.smartboard-wireframe__line {
  position: relative;
  min-height: 120px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(27, 77, 255, 0.05), rgba(27, 77, 255, 0)),
    repeating-linear-gradient(to top, rgba(148, 163, 184, 0.18) 0, rgba(148, 163, 184, 0.18) 1px, transparent 1px, transparent 24px);
}

.smartboard-wireframe__line span {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #1b4dff;
  box-shadow: 0 0 0 6px rgba(27, 77, 255, 0.12);
}

.smartboard-wireframe__table {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1fr 0.8fr;
  gap: 0.45rem;
}

.smartboard-wireframe__table span {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: #e5e7eb;
}

.smartboard-wireframe__table span:nth-child(4n + 1) {
  background: #dbeafe;
}

.smartboard-wireframe__table span:nth-child(4n + 2) {
  background: #e5e7eb;
}

.smartboard-wireframe__table span:nth-child(4n + 3) {
  background: #f3f4f6;
}

.smartboard-wireframe__list {
  display: grid;
  gap: 0.5rem;
}

.smartboard-wireframe__list span {
  display: block;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: #374151;
  font-size: 0.88rem;
  font-weight: 600;
}

.smartboard-demo .text-muted {
  line-height: 1.65;
}

.smartboard-mapping {
  display: grid;
  gap: 10px;
}

.smartboard-mapping__row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(23, 79, 42, 0.08);
  border-radius: 14px;
  background: #fbfdfb;
}

.smartboard-mapping__label {
  color: #174f2a;
  font-weight: 700;
}

.smartboard-mapping__value {
  color: #5d6b5f;
  word-break: break-all;
}

.smartboard-chart {
  min-height: 280px;
}

.smartboard-select {
  min-width: 150px;
}

.pivot-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field-panel,
.filter-bar,
.pivot-table-wrap {
  background: #fff;
  border: 1px solid var(--pt-border);
  border-radius: 0.5rem;
  box-shadow: var(--pt-shadow);
}

.field-panel {
  padding: 1rem;
}

.field-panel-title {
  margin-bottom: 0.5rem;
  color: #6c757d;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.drop-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  min-height: 52px;
  padding: 0.375rem;
  border: 2px dashed var(--pt-border);
  border-radius: 0.375rem;
  transition: background 0.15s, border-color 0.15s;
}

.drop-zone.drag-over {
  background: var(--pt-drop-bg);
  border-color: #adb5bd;
}

.drop-zone-label {
  padding: 0.25rem 0.5rem;
  color: #8b949e;
  font-size: 0.875rem;
  pointer-events: none;
  user-select: none;
}

.field-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
}

.field-chip.dragging {
  opacity: 0.4;
}

.zone-fields .field-chip {
  color: #212529;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

.zone-rows .field-chip,
.zone-cols .field-chip,
.zone-values .field-chip,
.zone-filters .field-chip {
  color: #212529;
  background: #fff;
  border: 1px solid #ced4da;
}

.field-chip .btn-remove {
  padding: 0;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: 0;
  opacity: 0.65;
}

.agg-select {
  padding: 0 2px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.filter-bar {
  padding: 0.75rem 1rem;
}

.pivot-table-wrap {
  overflow: auto;
  max-width: 100%;
}

.pivot-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  background: #fff;
}

.pivot-table th,
.pivot-table td {
  box-sizing: border-box;
  padding: 0.45rem 0.7rem;
  border-right: 1px solid var(--pt-border);
  border-bottom: 1px solid var(--pt-border);
  white-space: nowrap;
}

.pivot-table th:first-child,
.pivot-table td:first-child {
  border-left: 1px solid var(--pt-border);
}

.pivot-table thead tr:first-child th {
  border-top: 1px solid var(--pt-border);
}

.pivot-table thead th {
  position: sticky;
  top: 0;
  height: var(--pt-header-row-height);
  line-height: 1.25;
  z-index: 2;
  color: var(--pt-header-text);
  font-weight: 600;
  text-align: center;
  background: var(--pt-header-bg);
}

.pivot-table thead tr:nth-child(2) th {
  top: var(--pt-header-row-height);
}

.pivot-table .row-no-header,
.pivot-table .row-no {
  width: var(--pt-row-no-width);
  min-width: var(--pt-row-no-width);
  max-width: var(--pt-row-no-width);
  text-align: center;
}

.pivot-table .row-no-header {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--pt-header-bg);
  box-shadow: 1px 0 0 var(--pt-border);
}

.pivot-table .row-no {
  position: sticky;
  left: 0;
  z-index: 3;
  font-weight: 700;
  background: var(--pt-sticky-bg) !important;
  box-shadow: 1px 0 0 var(--pt-border);
}

.pivot-table thead th.row-header {
  position: sticky;
  left: var(--pt-row-no-width);
  z-index: 4;
  background: var(--pt-header-bg);
  box-shadow: 1px 0 0 var(--pt-border);
}

.pivot-table thead th.col-group {
  background: var(--pt-header-bg);
}

.pivot-table thead th.grand-col {
  background: var(--pt-header-bg);
}

.pivot-table tbody tr:nth-child(odd) td {
  background: var(--pt-row-odd);
}

.pivot-table tbody tr:hover td {
  background: var(--pt-hover);
}

.pivot-table td.row-label {
  position: sticky;
  left: var(--pt-row-no-width);
  z-index: 2;
  color: #212529;
  font-weight: 600;
  background: var(--pt-sticky-bg) !important;
  box-shadow: 1px 0 0 var(--pt-border);
}

.pivot-table tbody tr.grand-row td {
  font-weight: 700;
  background: var(--pt-total-bg) !important;
}

.pivot-table td.num {
  text-align: right;
}

.pivot-empty {
  padding: 3rem;
  color: #8b949e;
  font-size: 0.95rem;
  text-align: center;
}

.dl-dropzone {
  cursor: pointer;
  background: #f8f9ff;
  border: 2px dashed #0d6efd;
  transition: background 0.15s, border-color 0.15s;
}

.dl-dropzone.dl-dragover,
.dl-dropzone:hover {
  background: #eef2ff;
  border-color: #0a58ca;
}

@media (max-width: 575.98px) {
  .smartboard-demo {
    --pt-row-no-width: 46px;
    --pt-header-row-height: 36px;
  }

  .pivot-table th,
  .pivot-table td {
    padding: 0.42rem 0.58rem;
  }

  .pivot-table .row-no-header,
  .pivot-table .row-no {
    width: var(--pt-row-no-width);
  }

  .smartboard-mapping__row {
    grid-template-columns: 1fr;
  }

  .smartboard-select {
    width: 100%;
  }

  .smartboard-concept {
    padding: 1rem;
    border-radius: 22px;
  }

  .smartboard-wireframe {
    padding: 0.85rem;
    border-radius: 20px;
  }

  .smartboard-wireframe__row--kpi,
  .smartboard-wireframe__row--grid {
    grid-template-columns: 1fr;
  }

  .smartboard-wireframe__header {
    flex-direction: column;
  }

  .smartboard-wireframe__chip {
    align-self: flex-start;
  }

  .smartboard-wireframe__panel {
    min-height: 150px;
  }

  .smartboard-wireframe__panel--table,
  .smartboard-wireframe__panel--list {
    min-height: 110px;
  }
}


/* Demo landing page styles */
:root {
  --sb-primary:#1B4DFF; --sb-primary-dark:#0F33CC; --sb-primary-light:#EEF2FF;
  --sb-accent:#FF6B2B; --sb-dark:#0D0F1A;
  --sb-gray-100:#F7F8FA; --sb-gray-200:#ECEEF2; --sb-gray-400:#9CA3AF;
  --sb-gray-600:#4B5563; --sb-gray-800:#1F2937;
  --sb-success:#059669; --sb-success-light:#ECFDF5;
  --sb-font:'Noto Sans KR',sans-serif;
  --sb-radius:12px; --sb-radius-lg:20px;
  --sb-shadow:0 2px 16px rgba(0,0,0,0.08);
  --sb-shadow-lg:0 8px 40px rgba(0,0,0,0.12);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sb-font);color:var(--sb-gray-800);background:var(--sb-gray-100);line-height:1.7;}
.security-banner{background:var(--sb-success-light);border-bottom:1px solid rgba(5,150,105,0.15);padding:10px 0;}
.security-banner .inner{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;color:#065F46;}
.page-header{background:#fff;border-bottom:1px solid var(--sb-gray-200);padding:28px 0 24px;}
.page-header h1{font-size:26px;font-weight:800;letter-spacing:-0.5px;margin-bottom:6px;}
.page-header p{font-size:15px;color:var(--sb-gray-600);margin:0;}
.card-sb{background:#fff;border-radius:var(--sb-radius-lg);border:1px solid var(--sb-gray-200);padding:28px;}
.card-sb-title{font-size:16px;font-weight:700;margin-bottom:6px;}
.card-sb-desc{font-size:14px;color:var(--sb-gray-400);margin-bottom:20px;}
.sample-btn{
  display:flex;align-items:flex-start;gap:14px;
  background:#fff;border:1.5px solid var(--sb-gray-200);
  border-radius:var(--sb-radius);padding:16px 20px;
  cursor:pointer;transition:border-color 0.2s,box-shadow 0.2s;
  text-align:left;width:100%;margin-bottom:10px;
}
.sample-btn:hover{border-color:var(--sb-primary);box-shadow:var(--sb-shadow);}
.sample-btn.active{border-color:var(--sb-primary);background:var(--sb-primary-light);}
.sample-btn .icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;border-radius:10px;
  background:var(--sb-gray-100);color:var(--sb-primary);font-size:20px;
}
.sample-btn.active .icon{background:#fff;}
.sample-btn .info{width:100%;min-width:0;}
.sample-btn .info h4{font-size:14px;font-weight:700;margin:0 0 2px;}
.sample-btn .info p{font-size:14px;color:var(--sb-gray-400);margin:0;}
.sample-btn .badge-target{font-size:14px;font-weight:600;background:var(--sb-primary-light);color:var(--sb-primary);border-radius:6px;padding:2px 8px;display:inline-block;margin-bottom:4px;}
.sample-visual{
  display:flex;align-items:flex-end;gap:4px;height:28px;margin-top:10px;
  padding:5px 8px;border-radius:8px;background:#f8fafc;border:1px solid var(--sb-gray-200);
}
.sample-visual i{display:block;flex:1;min-width:8px;border-radius:3px 3px 1px 1px;background:var(--sb-primary);opacity:.75;}
.sample-visual--wholesale i{background:var(--sb-success);}
.sample-visual--food i{background:var(--sb-accent);}
.sample-download-row{
  display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;
  margin:-2px 0 12px;
}
.sample-download-link{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--sb-gray-200);
  color:var(--sb-primary);border-radius:999px;
  padding:6px 12px;font-size:14px;font-weight:700;
  text-decoration:none;transition:border-color 0.2s,background 0.2s;
}
.sample-download-link:hover{border-color:var(--sb-primary);background:var(--sb-primary-light);color:var(--sb-primary);}
.upload-card{position:relative;overflow:hidden;}
.upload-card::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--sb-primary),var(--sb-success),var(--sb-accent));
}
.upload-zone{
  border:2px dashed #cbd5e1;border-radius:var(--sb-radius);
  padding:28px 18px;text-align:center;cursor:pointer;
  transition:border-color 0.2s,background 0.2s,transform 0.2s;
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--sb-primary);background:var(--sb-primary-light);transform:translateY(-1px);}
.upload-zone .upload-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;margin-bottom:12px;border-radius:14px;
  background:#fff;color:var(--sb-primary);font-size:30px;
  box-shadow:0 8px 22px rgba(27,77,255,0.14);
}
.upload-zone h4{font-size:15px;font-weight:700;margin-bottom:4px;}
.upload-zone p{font-size:14px;color:var(--sb-gray-400);margin:0;}
#fileInput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.upload-meta{
  display:none;align-items:center;gap:8px;margin-top:12px;
  padding:10px 12px;border-radius:10px;background:var(--sb-primary-light);
  color:var(--sb-primary);font-size:14px;font-weight:700;
}
.upload-meta.is-visible{display:flex;}
.upload-safe{
  display:flex;align-items:center;gap:6px;margin-top:12px;
  color:#065f46;font-size:14px;font-weight:600;
}
.column-guide-map{
  display:grid;gap:12px;margin-top:4px;
}
.column-guide-flow{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:9px 10px;border-radius:10px;background:#f8fafc;
  border:1px solid var(--sb-gray-200);color:var(--sb-gray-600);
  font-size:12px;font-weight:700;
}
.column-guide-flow i{color:var(--sb-primary);font-size:13px;}
.column-chip-grid{
  display:flex;flex-wrap:wrap;gap:7px;
}
.column-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 9px;border-radius:999px;background:#fff;
  border:1px solid var(--sb-gray-200);color:var(--sb-gray-600);
  font-size:13px;font-weight:700;
}
.column-chip i{font-size:12px;color:var(--sb-gray-400);}
.column-chip.is-primary{
  background:var(--sb-primary-light);border-color:rgba(27,77,255,0.18);
  color:var(--sb-primary);
}
.column-chip.is-primary i{color:var(--sb-primary);}
.column-role-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.column-role-card{
  display:flex;align-items:flex-start;gap:8px;
  padding:10px;border-radius:10px;background:#fff;
  border:1px solid var(--sb-gray-200);
}
.column-role-card>i{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;background:var(--sb-primary-light);
  color:var(--sb-primary);font-size:14px;flex-shrink:0;
}
.column-role-card strong,
.column-role-card span{display:block;}
.column-role-card strong{font-size:13px;line-height:1.2;color:var(--sb-gray-800);}
.column-role-card span{margin-top:2px;font-size:12px;line-height:1.35;color:var(--sb-gray-600);}
#columnGuideNote{
  display:flex;align-items:flex-start;gap:7px;margin-top:12px;
  padding:10px 11px;border-radius:10px;background:#ecfdf5;
  border:1px solid rgba(5,150,105,0.16);
  color:#065f46;font-size:13px;font-weight:600;line-height:1.5;
}
#columnGuideNote i{margin-top:2px;flex-shrink:0;}
#results{display:none;}
.section-results-header{
  background:var(--sb-primary);color:#fff;
  border-radius:var(--sb-radius-lg) var(--sb-radius-lg) 0 0;
  padding:20px 28px;display:flex;align-items:center;justify-content:space-between;
}
.section-results-header h2{font-size:18px;font-weight:800;margin:0;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:24px;}
.kpi-card{background:var(--sb-gray-100);border-radius:var(--sb-radius);padding:18px 14px;text-align:center;}
.kpi-card .kpi-val{font-size:24px;font-weight:800;color:var(--sb-primary);line-height:1.2;}
.kpi-card .kpi-lbl{font-size:14px;color:var(--sb-gray-400);margin-top:4px;}
.kpi-card .kpi-delta{font-size:14px;font-weight:600;margin-top:4px;}
.insight-strip{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;
  margin:0 0 22px;padding:18px 20px;border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  border:1px solid var(--sb-gray-200);
  box-shadow:0 8px 24px rgba(15,23,42,0.04);
}
.insight-strip__copy strong{
  display:block;margin-bottom:5px;color:var(--sb-gray-800);
  font-size:17px;font-weight:800;line-height:1.35;
}
.insight-strip__copy p{
  margin:0;color:var(--sb-gray-600);font-size:14px;line-height:1.55;
}
.insight-strip__flow{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.insight-strip__flow>span{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 11px;border-radius:10px;background:#fff;
  border:1px solid var(--sb-gray-200);
  color:var(--sb-gray-800);font-size:13px;font-weight:800;
}
.insight-strip__flow>span i{
  color:var(--sb-primary);font-size:15px;
}
.insight-strip__flow>i{
  color:var(--sb-gray-400);font-size:18px;
}
.tab-nav{display:flex;gap:4px;border-bottom:2px solid var(--sb-gray-200);margin-bottom:24px;}
.tab-btn{background:none;border:none;padding:10px 18px;font-size:14px;font-weight:600;color:var(--sb-gray-400);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color 0.15s;}
.tab-btn.active{color:var(--sb-primary);border-bottom-color:var(--sb-primary);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.pivot-controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:16px;background:var(--sb-gray-100);border-radius:var(--sb-radius);}
.pivot-controls label{font-size:14px;font-weight:600;color:var(--sb-gray-600);display:block;margin-bottom:4px;}
.pivot-controls select{font-size:14px;padding:6px 10px;border:1px solid var(--sb-gray-200);border-radius:8px;background:#fff;}
.grid-wrap{overflow-x:auto;border-radius:var(--sb-radius);border:1px solid var(--sb-gray-200);}
.grid-table{width:100%;border-collapse:collapse;font-size:14px;}
.grid-table th{background:var(--sb-gray-100);padding:10px 14px;font-weight:700;text-align:left;border-bottom:1px solid var(--sb-gray-200);white-space:nowrap;}
.grid-table td{padding:9px 14px;border-bottom:1px solid var(--sb-gray-100);white-space:nowrap;}
.grid-table tr:last-child td{border-bottom:none;}
  .grid-table tr:hover td{background:var(--sb-gray-100);}
  .chart-card{
    min-height:340px;
    display:flex;
    flex-direction:column;
  }
  .chart-card.chart-card-line{
    min-height:260px;
  }
  .chart-card canvas{
    flex:1;
    min-height:240px !important;
    max-height:240px !important;
  }
  .chart-card.chart-card-line canvas{
    min-height:160px !important;
    max-height:160px !important;
  }
  .grid-search{padding:10px 14px;border:1px solid var(--sb-gray-200);border-radius:8px;font-size:14px;width:220px;}
.cta-banner{
  background:linear-gradient(135deg,var(--sb-dark) 0%,#1a2a6c 100%);
  color:#fff;border-radius:var(--sb-radius-lg);
  padding:32px 28px;margin-top:24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
}
.cta-banner h3{font-size:20px;font-weight:800;margin-bottom:6px;letter-spacing:-0.3px;}
.cta-banner p{font-size:14px;color:rgba(255,255,255,0.6);margin:0;}
.btn-cta-white{background:#fff;color:var(--sb-primary);border-radius:10px;padding:13px 26px;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;transition:opacity 0.2s;}
.btn-cta-white:hover{opacity:0.9;color:var(--sb-primary);}
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--sb-gray-200);padding:14px 20px;z-index:999;}
@media(max-width:768px){.sticky-cta{display:flex;gap:10px;}}
.pagination-wrap{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;color:var(--sb-gray-600);}
.page-btn{background:#fff;border:1px solid var(--sb-gray-200);border-radius:6px;padding:5px 11px;cursor:pointer;font-size:14px;}
.page-btn:hover{border-color:var(--sb-primary);color:var(--sb-primary);}
.page-btn.active{background:var(--sb-primary);color:#fff;border-color:var(--sb-primary);}
  @media (max-width: 768px) {
    body { padding-bottom: 96px; }
    .column-role-grid{grid-template-columns:1fr;}
    .column-guide-flow{font-size:11px;}
    .insight-strip{grid-template-columns:1fr;padding:16px;}
    .insight-strip__flow{flex-wrap:wrap;white-space:normal;}
  }

.demo-cta-primary {
  background: var(--sb-primary);
  color: #fff;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.demo-cta-primary:hover {
  color: #fff;
  background: var(--sb-primary-dark);
}

.demo-export-btn {
  background: var(--sb-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}