/*! MobileRanks — Phone Frontend v4.5 additive styles.
 *  Scoped under `.mrv45-*` to avoid clashing with v2/v3 styles.
 */
:root{
  --mrv45-bg:#ffffff;
  --mrv45-surface:#fbfaf7;
  --mrv45-border:#eae3d6;
  --mrv45-text:#191a1f;
  --mrv45-muted:#6a6a72;
  --mrv45-accent:#E8843A;
  --mrv45-accent-2:#C96A22;
  --mrv45-good:#166534;
  --mrv45-bad:#b1341c;
  --mrv45-radius:14px;
  --mrv45-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(15,23,42,.12);
}

.mrv45-card{
  background:var(--mrv45-bg);
  border:1px solid var(--mrv45-border);
  border-radius:var(--mrv45-radius);
  padding:20px;
  margin:22px 0;
  box-shadow:var(--mrv45-shadow);
  color:var(--mrv45-text);
}
.mrv45-card-head{margin:-4px 0 14px;}
.mrv45-eyebrow{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mrv45-accent-2);margin-bottom:4px;
}
.mrv45-h2{font-size:20px;line-height:1.25;margin:0 0 2px;font-weight:700;letter-spacing:-.01em;}

/* Analytics */
.mrv45-analytics-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.mrv45-stat{
  background:var(--mrv45-surface);border:1px solid var(--mrv45-border);
  border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;
}
.mrv45-stat span{font-size:11px;color:var(--mrv45-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.mrv45-stat strong{font-size:16px;font-weight:700;color:var(--mrv45-text);}
.mrv45-stat-low strong{color:var(--mrv45-good);}
.mrv45-stat-high strong{color:var(--mrv45-bad);}
.mrv45-stat-good strong{color:var(--mrv45-good);}

/* Graph */
.mrv45-graph-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:end;}
.mrv45-graph-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.mrv45-chipset{display:inline-flex;background:var(--mrv45-surface);border:1px solid var(--mrv45-border);border-radius:999px;padding:2px;}
.mrv45-chip{
  border:0;background:transparent;padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:600;color:var(--mrv45-muted);cursor:pointer;
}
.mrv45-chip.is-active{background:var(--mrv45-text);color:#fff;}
.mrv45-chip:focus-visible{outline:2px solid var(--mrv45-accent);outline-offset:2px;}
.mrv45-select{
  border:1px solid var(--mrv45-border);background:#fff;border-radius:8px;
  padding:6px 10px;font-size:12px;color:var(--mrv45-text);
}
.mrv45-graph-canvas{position:relative;margin-top:10px;}
.mrv45-graph-canvas svg{width:100%;height:220px;display:block;}
.mrv45-graph-canvas path.mrv45-line{fill:none;stroke:var(--mrv45-accent);stroke-width:2;}
.mrv45-graph-canvas path.mrv45-fill{fill:rgba(232,132,58,.12);stroke:none;}
.mrv45-graph-canvas circle{fill:var(--mrv45-accent);}
.mrv45-graph-canvas line.mrv45-axis{stroke:var(--mrv45-border);stroke-width:1;}
.mrv45-graph-canvas text{fill:var(--mrv45-muted);font-size:10px;font-family:inherit;}
.mrv45-graph-meta{margin-top:8px;font-size:12px;color:var(--mrv45-muted);display:flex;gap:14px;flex-wrap:wrap;}
.mrv45-graph-empty p{color:var(--mrv45-muted);margin:0;font-size:14px;text-align:center;}

/* Timeline */
.mrv45-timeline-row{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:1fr auto 1fr;align-items:center;}
.mrv45-tl-step{background:var(--mrv45-surface);border:1px solid var(--mrv45-border);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-height:64px;}
.mrv45-tl-step.is-current{background:linear-gradient(135deg,var(--mrv45-accent),var(--mrv45-accent-2));color:#fff;border-color:transparent;}
.mrv45-tl-step.is-current .mrv45-tl-lbl{color:rgba(255,255,255,.85);}
.mrv45-tl-step a{color:var(--mrv45-accent-2);text-decoration:none;font-weight:600;}
.mrv45-tl-step a:hover{text-decoration:underline;}
.mrv45-tl-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mrv45-muted);font-weight:600;}
.mrv45-tl-dash{color:var(--mrv45-muted);}
.mrv45-tl-step.is-empty{opacity:.65;}
@media (max-width:640px){.mrv45-timeline-row{grid-template-columns:1fr;}}

/* Software support */
.mrv45-sw-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.mrv45-sw-item{background:var(--mrv45-surface);border:1px solid var(--mrv45-border);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;}
.mrv45-sw-item span{font-size:11px;color:var(--mrv45-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.mrv45-sw-item strong{font-size:15px;color:var(--mrv45-text);}
.mrv45-sw-hl{background:#fff7ec;border-color:#f2d9b6;}

/* Colors */
.mrv45-swatches{list-style:none;padding:0;margin:0;display:flex;gap:14px;flex-wrap:wrap;}
.mrv45-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;width:78px;}
.mrv45-swatch-dot{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--mrv45-border);
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08);
}
.mrv45-swatch-name{font-size:12px;color:var(--mrv45-text);text-align:center;line-height:1.2;}

/* In the box */
.mrv45-box-grid{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
.mrv45-box-item{display:flex;gap:10px;align-items:center;background:var(--mrv45-surface);border:1px solid var(--mrv45-border);border-radius:10px;padding:10px 12px;}
.mrv45-box-ic{font-size:20px;line-height:1;}
.mrv45-box-lbl{font-size:13px;color:var(--mrv45-text);}

/* Review snapshot */
.mrv45-snap-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.mrv45-snap-score{display:inline-flex;align-items:baseline;gap:2px;background:var(--mrv45-text);color:#fff;padding:8px 12px;border-radius:10px;font-weight:700;}
.mrv45-snap-score .mrv45-snap-star{color:#fbbf24;margin-right:6px;}
.mrv45-snap-score strong{font-size:22px;}
.mrv45-snap-score span:last-child{font-size:12px;opacity:.75;margin-left:2px;}
.mrv45-snap-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.mrv45-snap-col{background:var(--mrv45-surface);border:1px solid var(--mrv45-border);border-radius:10px;padding:14px;}
.mrv45-snap-col h3{margin:0 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mrv45-muted);font-weight:700;}
.mrv45-snap-col ul{margin:0;padding-left:18px;font-size:14px;line-height:1.55;}
.mrv45-snap-col li{margin-bottom:4px;}
.mrv45-snap-pros h3 span{color:var(--mrv45-good);}
.mrv45-snap-cons h3 span{color:var(--mrv45-bad);}
.mrv45-snap-summary p{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--mrv45-text);}

.mrv45-tagrow{display:flex;flex-wrap:wrap;gap:6px;}
.mrv45-tag{background:#fff;border:1px solid var(--mrv45-border);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--mrv45-text);}

/* Trust signals */
.mrv45-trust{padding:16px 20px;}
.mrv45-trust-grid{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.mrv45-trust-item{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-left:3px solid var(--mrv45-accent);background:var(--mrv45-surface);border-radius:8px;}
.mrv45-trust-ic{font-size:14px;color:var(--mrv45-accent-2);font-weight:700;}
.mrv45-trust-lbl{font-size:11px;color:var(--mrv45-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.mrv45-trust-val{font-size:13px;color:var(--mrv45-text);font-weight:600;}

/* Highlights */
.mrv45-hl-grid{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;}
.mrv45-hl-chip{background:var(--mrv45-surface);border:1px solid var(--mrv45-border);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--mrv45-text);}
.mrv45-hl-chip.is-good{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}

/* Related rails */
.mrv45-rail{margin-top:14px;}
.mrv45-rail:first-of-type{margin-top:0;}
.mrv45-rail-title{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mrv45-muted);font-weight:700;margin:0 0 10px;}
.mrv45-rail-list{list-style:none;padding:0;margin:0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;}
.mrv45-rail-item{flex:0 0 140px;scroll-snap-align:start;}
.mrv45-rail-item a{display:block;text-decoration:none;color:var(--mrv45-text);border:1px solid var(--mrv45-border);border-radius:10px;padding:10px;background:var(--mrv45-surface);}
.mrv45-rail-item a:hover{border-color:var(--mrv45-accent);}
.mrv45-rail-item img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:6px;margin-bottom:8px;}
.mrv45-rail-item span{font-size:12px;line-height:1.35;display:block;}

/* Focus */
.mrv45-card :focus-visible{outline:2px solid var(--mrv45-accent);outline-offset:2px;}

@media (max-width:640px){
  .mrv45-card{padding:16px;border-radius:12px;}
  .mrv45-h2{font-size:17px;}
}

/* v4.6 — tooltip, cursor, trend pill */
.mrv45-graph-canvas{ overflow:visible; }
.mrv45-graph-canvas .mrv45-hover{ cursor:crosshair; }
.mrv45-graph-canvas line.mrv45-cursor{ stroke:var(--mrv45-accent); stroke-width:1; stroke-dasharray:3 3; opacity:.7; pointer-events:none; }
.mrv45-tip{
  position:absolute; pointer-events:none; min-width:150px; max-width:220px;
  background:#0f172a; color:#fff; border-radius:10px; padding:10px 12px;
  font-size:12px; line-height:1.35; box-shadow:0 10px 30px -10px rgba(15,23,42,.4);
  z-index:2;
}
.mrv45-tip-store{ font-weight:700; margin-bottom:6px; color:#fbbf24; }
.mrv45-tip-row{ display:flex; justify-content:space-between; gap:10px; padding:2px 0; }
.mrv45-tip-row span{ color:#cbd5e1; }
.mrv45-tip-row strong{ color:#fff; font-weight:600; }
.mrv45-trend{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-weight:600; }
.mrv45-trend-down{ background:#dcfce7; color:#166534; }
.mrv45-trend-up{ background:#fee2e2; color:#b1341c; }
.mrv45-trend-flat{ background:#f1f5f9; color:#475569; }