* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #e9f2ff;
  background: #0b0f14;
}
a { color: #3ea6ff; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1180px; margin: 28px auto; padding: 0 16px; }
.header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.brand h1 { margin: 0; font-size: 1.9rem; color: #e8e8e8; text-align: center; }
.last-refresh { margin-top: 2px; font-size: 12px; color: #9db1c9; text-align: center; }

.section-title { display: flex; align-items: center; gap: .5rem; margin: 24px 0 14px; color: #cfd7e3; }
.icon-img { width: 26px; height: 26px; border-radius: 4px; object-fit: contain; display: inline-block; vertical-align: middle; }
.icon-emoji { font-size: 22px; vertical-align: middle; }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.card {
  grid-column: span 12;
  background: #0e1520;
  border: 1px solid #1f2a3a;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
}
.card h3 { margin: 0 0 8px; font-weight: 600; color:#e9f2ff; }

@media (min-width: 900px){
  .span-6 { grid-column: span 6; }
  .span-4 { grid-column: span 4; }
  .span-12 { grid-column: span 12; }
}

.metric-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px dashed #213247;
}
.metric-row:last-child { border-bottom: none; }
.metric-row span.label { color: #9db1c9; display:flex; align-items:center; gap:6px; }
.metric-row strong { color: #e9f2ff; font-weight: 600; white-space: nowrap; }
.metric-row strong.pos { color: #06d6a0; }

.info-dot {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 12px; color: #0b0f14; background: #a9c6ff; cursor: help;
}

.tooltip { position: fixed; z-index: 9999; display: none; max-width: 320px; padding: 8px 10px; font-size: 12px;
  color: #0b0f14; background: #cfe3ff; border: 1px solid #9ab8e6; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }

.legend { display:flex; gap:12px; color:#9db1c9; font-size:12px; margin-top:6px; }
.dot { width:10px;height:10px;border-radius:50%; display:inline-block; }
.dot.bl { background:#ffd166; }
.dot.eb { background:#06d6a0; }
.dot.net { background:#06d6a0; }
.dot.fee { background:#ef476f; }
.dot.ship { background:#8892a6; }

.compare { display:flex; gap:10px; align-items:center; margin-top:4px; }
.metric-cell { display:flex; flex-direction: column; }
.metric-cell .compare { margin-top: 6px; }
.bar {
  height: 12px;
  border-radius: 6px;
  background: #0e1b2e;
  width: 100%;
  overflow: hidden;
  border: 1px solid #2a446d;
  display: flex;
}
.bar .seg { height: 100%; width: 0%; }
.bar .seg.bl { background: #ffd166; }
.bar .seg.eb { background: #06d6a0; }
.bar .seg.net { background: #06d6a0; }
.bar .seg.fee { background: #ef476f; }
.bar .seg.ship { background: #8892a6; }
.legend.legend-compact { margin-top: 8px; }

/* Latest order card layout */
.latest-order { display:flex; gap:14px; align-items: center; }
.latest-info { flex: 1 1 60%; display:flex; align-items:center; gap:10px; min-width:0; }
.platform-badge { width: 26px; height: 26px; border-radius: 4px; object-fit: contain; }
.latest-mins { padding: 6px 8px; border-radius: 8px; border:1px solid #2a446d; background:#0e1b2e; color:#e9f2ff; font-weight: 700; min-width: 52px; text-align:center; }
.latest-line { display:flex; gap:8px; align-items:center; flex-wrap: nowrap; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest-line .sep { color:#9db1c9; }
#latest-title { max-width: 40ch; overflow:hidden; text-overflow: ellipsis; }
.latest-ages { flex: 0 0 40%; display:flex; gap:12px; justify-content:flex-end; }
.age-box { min-width: 110px; padding:10px 12px; border-radius: 10px; border:1px solid #2a446d; background:#0e1b2e; text-align:center; }
.age-box .label { font-size:12px; }
.age-box .label { font-size:11px; color:#9db1c9; }
.age-box .value { font-weight:700; color:#e9f2ff; margin-top:2px; }

/* Age colors */
.age-0 { background: rgba(6,214,160,.25); border-color:#06d6a0; }
.age-1 { background: rgba(6,214,160,.15); border-color:#06d6a0; }
.age-2 { background: rgba(255,209,102,.22); border-color:#ffd166; }
.age-3 { background: rgba(255,140,66,.22); border-color:#ff8c42; }
.age-4 { background: rgba(239,71,111,.22); border-color:#ef476f; }

@media (max-width: 700px){
  .latest-order { flex-direction: column; align-items: flex-start; }
  .latest-ages { width: 100%; justify-content: flex-start; }
}

/* Smooth fade for carousel swaps */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.fade-in { animation: fadeIn .3s ease both; }

.sale-card, .feedback-card {
  display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px;
  background: #0a1220; border: 1px solid #1a2740; border-radius: 10px; padding: 12px;
}
.feedback-card { padding-bottom: 8px; }
.sale-card .sale-line, .feedback-card .row { display: contents; }
.feedback-card .row span, .sale-card .sale-line span { color:#9db1c9; }
.feedback-card .row strong, .sale-card .sale-line strong { color:#e9f2ff; }
.sale-card .sale-line strong.pos { color:#06d6a0; }
.feedback-card .row-comment { grid-column:1/-1; }
.feedback-card .row-comment p {
  margin: 4px 0 0;
  color: #dbe7ff;
  /* Fix height regardless of comment length */
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; /* number of lines to show (reduced) */
  overflow: hidden;
  line-height: 1.3;
  min-height: calc(1.3em * 5.1);
}
.empty { color: #9db1c9; font-style: italic; }

/* Subsection headings within cards */
.subsection-title {
  font-size: 12px;
  color: #9db1c9;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin: 4px 0 6px;
}
.subsection-title.mt { margin-top: 10px; }

/* Platform pair grid: 2 columns, equal heights per row */
.platform-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 14px;
  row-gap: 8px; /* tighter vertical spacing to save height */
  align-items: stretch;
}
.platform-grid > .section-title {
  grid-column: span 1;
  margin: 12px 0 10px; /* compact breaker heading */
}
.platform-grid > .section-title { cursor: pointer; user-select: none; }
.platform-grid > .section-title::after { content: '▾'; margin-left: 6px; font-size: 12px; color: #9db1c9; }
.platform-grid.collapsed-bl .bl-head::after { content: '▸'; }
.platform-grid.collapsed-eb .eb-head::after { content: '▸'; }
.platform-grid.collapsed-bl .bl-overview,
.platform-grid.collapsed-bl .bl-sales,
.platform-grid.collapsed-bl .bl-feedback { display: none; }
.platform-grid.collapsed-eb .eb-overview,
.platform-grid.collapsed-eb .eb-sales,
.platform-grid.collapsed-eb .eb-feedback { display: none; }
/* Fallback: also hide specific cards inside wrappers */
.platform-grid.collapsed-bl #bl-overview-card,
.platform-grid.collapsed-bl #bl-sales-card,
.platform-grid.collapsed-bl #bl-feedback-card { display: none; }
.platform-grid.collapsed-eb #eb-overview-card,
.platform-grid.collapsed-eb #eb-sales-card,
.platform-grid.collapsed-eb #eb-feedback-card { display: none; }
.platform-grid > .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Rows size to content; cards still stretch to tallest in each row */
.platform-grid { grid-auto-rows: auto; }

/* Headings should not stretch; keep compact like main title */
.platform-grid > .section-title { align-self: start; height: auto; }

/* On small screens, stack */
@media (max-width: 980px){
  .platform-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      'bl-head'
      'bl-overview'
      'bl-sales'
      'bl-feedback'
      'eb-head'
      'eb-overview'
      'eb-sales'
      'eb-feedback';
  }
  .platform-grid .bl-head { grid-area: bl-head; }
  .platform-grid .eb-head { grid-area: eb-head; }
  .platform-grid .bl-overview { grid-area: bl-overview; }
  .platform-grid .eb-overview { grid-area: eb-overview; }
  .platform-grid .bl-sales { grid-area: bl-sales; }
  .platform-grid .eb-sales { grid-area: eb-sales; }
  .platform-grid .bl-feedback { grid-area: bl-feedback; }
  .platform-grid .eb-feedback { grid-area: eb-feedback; }
}

/* Pin BL to left column and EB to right column on desktop */
@media (min-width: 981px){
  .platform-grid .bl-head,
  .platform-grid .bl-overview,
  .platform-grid .bl-sales,
  .platform-grid .bl-feedback { grid-column: 1; }

  .platform-grid .eb-head,
  .platform-grid .eb-overview,
  .platform-grid .eb-sales,
  .platform-grid .eb-feedback { grid-column: 2; }
}

/* Footer */
.footer {
  margin: 24px 0;
  text-align: center;
  color: #9db1c9;
  font-size: 13px;
}
.footer-logos {
  margin-top: 10px;
  display: flex; gap: 16px; justify-content: center; align-items: center;
}
.footer-logos img { height: 22px; filter: saturate(1.2) brightness(1.1); }

/* Mildly compact spacing */
:root{ --row-gap: 6px; }
.section-title{ margin: 12px 0 8px; }
.card{ padding: 12px; }
.metric-row{ margin: var(--row-gap) 0; }

/* Ensure grid children span full width on narrow screens */
@media (max-width: 900px){
  .grid > * { grid-column: 1 / -1; }
}