/* optimize.css — Monetization Optimizer page styles.
   Prefix: .opt-   All tokens defined here; no shared CSS edits needed. */

/* ── Shell ─────────────────────────────────────────────────────────────────── */
body { background: #000; color: #E8E8E8; font-family: 'Inter', sans-serif; }

.opt-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #1A1A1A;
}

.opt-topbar-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.opt-back-link {
  font-size: 0.82rem;
  color: #555;
  text-decoration: none;
  transition: color 0.15s;
}
.opt-back-link:hover { color: #00F2EA; }

.opt-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.opt-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
}

/* ── Hero grid ─────────────────────────────────────────────────────────────── */
.opt-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

/* ── Module grid ───────────────────────────────────────────────────────────── */
.opt-modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.opt-card {
  background: #0A0A0A;
  border: 1px solid #1A1A1A;
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
}

.opt-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.opt-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.opt-card-sub {
  font-size: 0.72rem;
  color: #555;
}

.opt-module-icon {
  font-size: 1.1rem;
}

/* ── Revenue mix ───────────────────────────────────────────────────────────── */
.opt-mix-body {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}

.opt-pie-canvas {
  flex-shrink: 0;
  border-radius: 50%;
}

.opt-mix-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.opt-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #ccc;
}

.opt-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.opt-legend-label {
  white-space: nowrap;
}

.opt-mix-table-wrap { overflow-x: auto; }

.opt-mix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 4px;
}
.opt-mix-table th {
  text-align: left;
  color: #555;
  font-weight: 600;
  padding: 5px 6px;
  border-bottom: 1px solid #1A1A1A;
}
.opt-mix-table td {
  padding: 6px 6px;
  color: #ccc;
  border-bottom: 1px solid #111;
}
.opt-mix-table tr:last-child td { border-bottom: none; }

/* ── Actions preview ───────────────────────────────────────────────────────── */
.opt-actions-preview { display: flex; flex-direction: column; }

.opt-preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #111;
  border: 1px solid #1A1A1A;
  border-radius: 8px;
  margin-bottom: 10px;
}
.opt-preview-item:last-child { margin-bottom: 0; }

.opt-preview-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* ── Module body stats ─────────────────────────────────────────────────────── */
.opt-stat-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.opt-stat-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
}

.opt-stat-label {
  font-size: 0.75rem;
  color: #666;
}

.opt-stat-sep {
  font-size: 0.9rem;
  color: #333;
  margin: 0 2px;
}

.opt-meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.opt-meta-text {
  font-size: 0.78rem;
  color: #888;
}

/* ── Badges ────────────────────────────────────────────────────────────────── */
.opt-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  margin-right: 6px;
}
.opt-badge-coral { background: rgba(255,77,109,0.12); color: #FF4D6D; border: 1px solid rgba(255,77,109,0.3); }
.opt-badge-cyan  { background: rgba(0,242,234,0.10); color: #00F2EA; border: 1px solid rgba(0,242,234,0.3); }

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.opt-alert {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 7px;
  margin: 6px 0;
}
.opt-alert-coral { background: rgba(255,77,109,0.1); color: #FF4D6D; border: 1px solid rgba(255,77,109,0.2); }

/* ── Progress bars ─────────────────────────────────────────────────────────── */
.opt-bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 5px;
}

.opt-gating-bar-track {
  background: #1A1A1A;
  border-radius: 4px;
  height: 6px;
  position: relative;
  margin-bottom: 4px;
}

.opt-gating-bar-fill {
  height: 6px;
  border-radius: 4px;
  background: #00F2EA;
  transition: width 0.4s ease;
}
.opt-gating-bar-fill.low { background: #FF4D6D; }

/* ── Tier markers ──────────────────────────────────────────────────────────── */
.opt-tier-markers {
  position: relative;
  height: 14px;
}
.opt-tier-mark {
  position: absolute;
  font-size: 0.6rem;
  color: #555;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ── Storefront funnel ─────────────────────────────────────────────────────── */
.opt-funnel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 6px;
}

.opt-funnel-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.opt-funnel-val {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.opt-funnel-lbl {
  font-size: 0.68rem;
  color: #666;
}

.opt-funnel-arrow {
  font-size: 1rem;
  color: #333;
}

/* ── Loop posts ────────────────────────────────────────────────────────────── */
.opt-loops-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.opt-loop-post {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #111;
}
.opt-loop-post:last-child { border-bottom: none; }

.opt-loop-caption {
  font-size: 0.78rem;
  color: #ccc;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opt-loop-count {
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Forecast ──────────────────────────────────────────────────────────────── */
.opt-forecast {
  background: #0A0A0A;
  border: 1px solid #1A1A1A;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 24px;
}

.opt-forecast-range {
  font-size: 0.9rem;
  color: #aaa;
  margin: 0 0 16px;
  line-height: 1.6;
}

.opt-forecast-conservative { color: #888; font-weight: 700; }
.opt-forecast-green { color: #22C55E; font-weight: 800; }

.opt-forecast-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.opt-scenario {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #111;
  border: 1px solid #1A1A1A;
  border-radius: 10px;
  padding: 14px 12px;
}
.opt-scenario-mid { border-color: rgba(0,242,234,0.2); }

.opt-scenario-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.opt-scenario-value {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
}

.opt-scenario-desc {
  font-size: 0.68rem;
  color: #555;
}

/* ── Action queue ──────────────────────────────────────────────────────────── */
.opt-action-queue {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}

.opt-action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #0A0A0A;
  border: 1px solid #1A1A1A;
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.15s;
}
.opt-action-item:hover { border-color: #2A2A2A; }

.opt-action-rank {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  background: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.opt-action-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.opt-action-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
}

.opt-action-impact {
  font-size: 0.75rem;
  font-weight: 700;
}

.opt-action-rationale {
  font-size: 0.72rem;
  color: #8A8B91;
  line-height: 1.4;
}

/* ── CTA buttons ───────────────────────────────────────────────────────────── */
.opt-btn {
  display: inline-flex;
  align-items: center;
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  color: #ccc;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  margin-top: 14px;
}
.opt-btn:hover { border-color: #00F2EA; color: #00F2EA; }

.opt-btn-sm {
  padding: 6px 10px;
  font-size: 0.72rem;
  margin-top: 0;
}

/* ── Signal colours ────────────────────────────────────────────────────────── */
.opt-cyan   { color: #00F2EA; }
.opt-coral  { color: #FF4D6D; }
.opt-flag-red { color: #FF4D6D; font-weight: 700; }

/* ── Empty / error states ──────────────────────────────────────────────────── */
.opt-empty {
  font-size: 0.78rem;
  color: #555;
  margin: 0;
}

.opt-error {
  font-size: 0.78rem;
  color: #FF4D6D;
  margin: 0;
}

/* ── Skeleton loader ───────────────────────────────────────────────────────── */
.opt-skeleton {
  background: #1A1A1A;
  border-radius: 6px;
  animation: optPulse 1.4s ease-in-out infinite;
}

@keyframes optPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Chart wraps ──────────────────────────────────────────────────────────── */
.chart-wrap {
  position: relative;
  width: 100%;
  min-height: 180px;
}
.chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .opt-hero                { grid-template-columns: 1fr; }
  .opt-modules             { grid-template-columns: 1fr; }
  .opt-forecast-scenarios  { grid-template-columns: 1fr; }
  .opt-mix-body            { flex-direction: column; align-items: flex-start; }
  .opt-pie-canvas          { align-self: center; }
  .opt-topbar              { padding: 12px 16px; }
  .opt-container           { padding: 16px 12px 48px; }
  .opt-funnel-row          { gap: 6px; }
}