.comp-page { padding: 24px 0; }
.comp-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 24px; flex-wrap: wrap;
}
.comp-top-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

.cell-color-btn.btn-ghost { font-size: 0.78rem; }
.cell-color-excel .cell-color-btn { background: #C6EFCE; color: #276221; border-color: #A9D4AD; }

@media (max-width: 480px) {
  .comp-top { flex-direction: column; align-items: stretch; }
  .comp-top-actions { justify-content: flex-end; }
  .cell-color-btn.btn-ghost { font-size: 0.74rem; padding: 5px 8px; }
}

.comp-event-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.comp-event-tabs::-webkit-scrollbar { display: none; }
.comp-event-tab {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.comp-event-tab:hover { background: var(--border); color: var(--text); }
.comp-event-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
}

#bundles-container { display: flex; flex-direction: column; gap: 24px; }

.bundle-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.bundle-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.bundle-name-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bundle-name-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  font-family: inherit;
  padding: 4px 6px 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .2s, background .2s;
  min-width: 0;
}
.bundle-name-input:hover {
  border-bottom-color: var(--border);
  background: var(--surface2);
  border-radius: 4px 4px 0 0;
  padding-left: 4px;
}
.bundle-name-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
  background: var(--surface2);
  border-radius: 4px 4px 0 0;
  padding-left: 4px;
}
.bundle-name-edit-hint {
  font-size: .72rem;
  color: var(--text2);
  opacity: 0;
  white-space: nowrap;
  transition: opacity .2s;
  pointer-events: none;
}
.bundle-name-wrap:hover .bundle-name-edit-hint { opacity: 1; }

.comp-no-tags {
  font-size: .83rem;
  color: var(--text2);
  margin-bottom: 12px;
}
.comp-no-tags a { color: var(--accent); }

.comp-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }

.comp-table { width: 100%; border-collapse: collapse; font-size: .83rem; }

/* Freeze header row */
.comp-table thead tr th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface2);
}
/* Freeze first column */
.comp-table thead tr th:first-child,
.comp-table tbody tr td:first-child,
.comp-table tfoot tr td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface);
}
/* First header cell: freeze both axes */
.comp-table thead tr th:first-child { z-index: 3; background: var(--surface2); }

.comp-vendor-col {
  min-width: 160px;
  text-align: left;
  padding: 7px 10px;
  background: var(--surface2);
  font-weight: 600;
  font-size: .75rem;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}

.comp-tag-col {
  min-width: 64px;
  max-width: 90px;
  text-align: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.comp-tag-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
  max-width: 86px;
}

.comp-table tbody tr { border-bottom: 1px solid var(--border); }
.comp-table tbody tr:last-child { border-bottom: none; }

.comp-add-row td { padding: 8px 12px; }

.comp-vendor-cell {
  padding: 7px 10px;
  position: relative;
  min-width: 160px;
}
.comp-vendor-name { font-weight: 600; font-size: .84rem; color: var(--text); }
.comp-vendor-sub  { font-size: .74rem; color: var(--text2); margin-top: 1px; }
.comp-remove-btn  {
  position: absolute;
  top: 8px; right: 8px;
  background: none; border: none;
  color: var(--text2); cursor: pointer;
  font-size: .78rem; padding: 2px 5px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .15s, color .15s;
}
.comp-table tbody tr:hover .comp-remove-btn { opacity: 1; }
.comp-remove-btn:hover { color: var(--red); }

.comp-check-cell {
  text-align: center;
  padding: 7px 4px;
  font-size: .9rem;
  border-left: 1px solid var(--border);
}
.comp-check-cell.check-yes,
.summary-check-cell.check-yes { color: #4caf50; font-weight: 700; }
.comp-check-cell.check-no,
.summary-check-cell.check-no  { color: var(--border); }

.cell-color-excel .comp-check-cell.check-yes,
.cell-color-excel .summary-check-cell.check-yes {
  background: #C6EFCE; color: #276221; font-weight: 700;
}
.cell-color-excel .comp-check-cell.check-no,
.cell-color-excel .summary-check-cell.check-no {
  background: #FFC7CE; color: #9C0006; font-weight: 700;
}

.comp-footer-row {
  border-top: 2px solid var(--border);
  background: var(--surface2);
}
.comp-total-cell { padding: 8px 10px; font-size: .84rem; color: var(--text); }
.comp-footer-cell { font-size: 1rem; border-left: 1px solid var(--border); }
.comp-footer-cell.covered     { color: #4caf50; font-weight: 700; }
.comp-footer-cell.not-covered { color: var(--border); }

/* Summary Comparison Table */
.summary-section {
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.summary-title { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.summary-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); }
.summary-table { width: 100%; border-collapse: collapse; font-size: .82rem; }

.summary-label-col { min-width: 130px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.summary-bundle-col {
  min-width: 110px; text-align: center; padding: 7px 8px;
  background: var(--surface2); font-weight: 700; font-size: .8rem; color: var(--text);
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.summary-row-label {
  padding: 7px 10px; font-size: .8rem; color: var(--text2);
  white-space: normal; word-break: break-word;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.summary-tag-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 4px; }

.summary-price-row { border-top: 2px solid var(--border); }
.summary-price-cell {
  text-align: center; padding: 8px 8px;
  font-weight: 700; font-size: .86rem; color: var(--accent2);
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.summary-cheapest { color: #4caf50 !important; background: #4caf5010; }

.summary-check-cell {
  text-align: center; padding: 7px 4px; font-size: .9rem;
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
}

.summary-count-row { border-top: 2px solid var(--border); background: var(--surface2); }
.summary-count-cell {
  text-align: center; padding: 8px 8px;
  font-weight: 700; font-size: .82rem; color: var(--text);
  border-left: 1px solid var(--border);
}

/* Empty state */
.empty-comp {
  text-align: center;
  padding: 60px 24px;
  color: var(--text2);
  display: none;
}
.empty-comp-icon { font-size: 3rem; margin-bottom: 12px; }
.empty-comp p { margin: 6px 0; }
.empty-comp-hint { font-size: .85rem; }
.empty-comp a { color: var(--accent); }

/* Vendor Picker Modal */
.modal-picker {
  max-width: 560px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.modal-picker-head {
  flex-shrink: 0;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.modal-picker-head h2 { margin-bottom: 10px; }
.modal-picker-head .form-input { width: 100%; }
.picker-body {
  flex: 1;
  overflow-y: auto;
  border: none;
  border-radius: 0;
  margin: 0;
}
.modal-picker-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.picker-event-group { padding: 0; }
.picker-event-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text2);
  padding: 10px 14px 4px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}

.picker-vendor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.picker-vendor-row:hover { background: var(--surface2); }
.picker-vendor-row.selected { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.picker-vendor-row:last-child { border-bottom: none; }

.picker-vendor-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--accent); }

.picker-vendor-info { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.picker-vendor-name { font-size: .88rem; font-weight: 500; color: var(--text); }
.picker-vendor-paket { font-size: .8rem; color: var(--text2); font-weight: 400; }
.picker-vendor-price { font-size: .82rem; font-weight: 700; color: var(--accent2); white-space: nowrap; }

.display-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .display-summary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .display-summary-grid { grid-template-columns: 1fr; } }
.dsv-card {
  border: 1.5px solid var(--border); border-radius: 12px;
  overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.07);
  background: var(--surface);
}
.dsv-card-head {
  background: var(--surface2); padding: 10px 14px;
  border-bottom: 1.5px solid var(--border);
}
.dsv-name { font-weight: 700; font-size: .92rem; margin-bottom: 3px; }
.dsv-price { font-size: .8rem; color: var(--accent2); font-weight: 600; }
.dsv-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
.dsv-item {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; background: var(--surface2);
}
.dsv-label { font-size: .8rem; font-weight: 600; margin-bottom: 6px; }
.dsv-paket { font-weight: 400; color: var(--text2); }
.dsv-empty { font-size: .78rem; color: var(--text2); font-style: italic; padding: 4px 0; }
.display-thumbs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.display-thumb-xs { width: 48px; height: 48px; object-fit: cover; border-radius: 5px; cursor: pointer; border: 1px solid var(--border); transition: opacity .15s, transform .15s; }
.display-thumb-xs:hover { opacity: .82; transform: scale(1.06); }
.display-link-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: .77rem; color: var(--accent); text-decoration: none; }
.display-link-chip:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.dg-wrap { display: flex; flex-direction: column; gap: 6px; }
.dg-main { display: flex; align-items: center; gap: 6px; }
.dg-viewer { flex: 1; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--border); background: var(--surface2); display: flex; }
.dg-img-main { width: 100%; aspect-ratio: 1; object-fit: contain; cursor: pointer; display: block; transition: opacity .15s; }
.dg-img-main:hover { opacity: .88; }
.dg-link-main { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; font-size: .95rem; color: var(--accent); text-decoration: none; gap: 6px; transition: background .15s, color .15s; }
.dg-link-main:hover { background: var(--accent); color: #fff; }
.dg-btn { flex-shrink: 0; width: 34px; height: 34px; border: 1.5px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; padding: 0; line-height: 1; font-family: inherit; }
.dg-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.dg-counter { text-align: center; font-size: .73rem; color: var(--text2); }
.dg-strip { display: flex; gap: 4px; flex-wrap: wrap; }
.dg-sm-item { width: 38px; height: 38px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, opacity .15s; opacity: .5; }
.dg-sm-item:hover { opacity: 1; }
.dg-sm-active { border-color: var(--accent) !important; opacity: 1 !important; }
.dg-sm-link { display: inline-flex; align-items: center; justify-content: center; background: var(--surface2); font-size: .8rem; }

.dsv-stars { display: flex; gap: 3px; margin-top: 5px; margin-bottom: 2px; }
.dsv-star { font-size: 1.15rem; cursor: pointer; color: var(--border); transition: color .1s; line-height: 1; }
.dsv-star.active { color: #f5a623; }
.dsv-star:hover { color: #f5a623; }