/* engineering-roadmap-inline.css v20260717 — expanded platform roadmap */

:root {
  --rm-bg:        var(--bg-deep, #04060a);
  --rm-bg-2:      var(--bg-surface, #0a0e16);
  --rm-text:      var(--text, #d8e4f5);
  --rm-dim:       var(--muted, #5b6c89);
  --rm-border:    var(--border, rgba(95, 200, 255, 0.18));
  --rm-accent:    var(--info, #5fc8ff);
  --rm-purple:    var(--purple, #a78bfa);
  --rm-gold:      var(--warning, #fbbf24);
  --rm-green:     var(--accent, #34d399);
  --rm-blue:      var(--info, #60a5fa);
  --rm-pink:      #f472b6;
  --rm-glow:      0 0 24px rgba(95, 200, 255, 0.45);
  --rm-hm0:       rgba(15,22,35,0.8);
  --rm-hm1:       rgba(0,180,160,0.25);
  --rm-hm2:       rgba(0,220,170,0.5);
  --rm-hm3:       rgba(0,255,180,0.75);
  --rm-hm4:       #00ffa3;
}

html, body { background: var(--rm-bg); color: var(--rm-text); margin: 0; padding: 0; min-height: 100%; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

.rm-app {
  max-width: 1420px;
  margin: 0 auto;
  padding: 24px 18px 80px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Header ───────────────────────────────────────────────── */
.rm-header {
  padding: 20px 26px;
  background: linear-gradient(135deg, rgba(95,200,255,0.08), rgba(167,139,250,0.06));
  border: 1px solid var(--rm-border);
  border-radius: 18px;
  position: relative; overflow: hidden;
}
.rm-header::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 80% 20%, rgba(251,191,36,0.12), transparent 55%);
  pointer-events:none; animation: rm-shimmer 6s ease-in-out infinite;
}
@keyframes rm-shimmer { 0%,100%{opacity:.55} 50%{opacity:1} }
.rm-back {
  display:inline-block; padding:5px 12px; border-radius:10px;
  background:rgba(95,200,255,0.1); border:1px solid rgba(95,200,255,0.25);
  color:var(--rm-accent); text-decoration:none; font-size:12px; font-weight:700; width:fit-content;
}
.rm-back:hover { background:rgba(95,200,255,0.2); }
.rm-title {
  font-family:'Orbitron',monospace; font-size:24px; font-weight:900;
  letter-spacing:.06em; margin:6px 0;
  background:linear-gradient(90deg,var(--rm-accent),var(--rm-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(251,191,36,0.2));
}
.rm-headline { display:flex; align-items:center; gap:18px; flex-wrap:wrap; position:relative; z-index:1; }
.rm-ring {
  width:96px; height:96px; border-radius:50%;
  background:conic-gradient(var(--rm-gold) 0deg, var(--rm-accent) 260deg, transparent 260deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; box-shadow:0 0 28px rgba(251,191,36,0.28);
  animation:rm-ring-rotate 18s linear infinite;
}
.rm-ring::before { content:''; position:absolute; inset:6px; border-radius:50%; background:var(--rm-bg-2); }
.rm-ring-num { position:relative; z-index:1; font-family:'Orbitron',monospace; font-size:26px; font-weight:900; color:var(--rm-gold); }
.rm-ring-lbl { position:relative; z-index:1; font-size:9px; color:var(--rm-dim); letter-spacing:.1em; margin-top:-2px; }
@keyframes rm-ring-rotate { from{filter:hue-rotate(0)} to{filter:hue-rotate(360deg)} }
.rm-headline-text { flex:1; min-width:200px; }
.rm-verdict { font-size:17px; font-weight:800; color:var(--rm-text); margin-bottom:4px; }
.rm-verdict.platinum {
  background:linear-gradient(90deg,var(--rm-gold),var(--rm-pink),var(--rm-accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:rm-platinum-glow 3s ease-in-out infinite;
}
@keyframes rm-platinum-glow { 0%,100%{filter:brightness(1) drop-shadow(0 0 8px rgba(251,191,36,.4))} 50%{filter:brightness(1.3) drop-shadow(0 0 20px rgba(251,191,36,.7))} }
.rm-counts { font-size:11px; color:var(--rm-dim); }
.rm-countdown { text-align:center; padding:10px 16px; background:rgba(167,139,250,0.1); border:1px solid rgba(167,139,250,0.25); border-radius:12px; }
.rm-countdown-num { font-family:'Orbitron',monospace; font-size:26px; font-weight:900; color:var(--rm-purple); line-height:1; }
.rm-countdown-lbl { font-size:9px; color:var(--rm-dim); letter-spacing:.1em; text-transform:uppercase; margin-top:4px; }

/* ── Cards ───────────────────────────────────────────────── */
.rm-card {
  background:linear-gradient(180deg,rgba(20,28,45,.55),rgba(20,28,45,.25));
  border:1px solid var(--rm-border); border-radius:16px; padding:16px 20px;
}
.rm-card-title { font-size:13px; font-weight:800; margin-bottom:12px; color:var(--rm-text); letter-spacing:.02em; }
.rm-card-title-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.rm-sparkline-card { padding:12px 16px 8px; }

/* ── Heatmap ─────────────────────────────────────────────── */
.rm-heatmap-card { overflow-x:auto; }
.rm-heatmap-legend { display:flex; align-items:center; gap:4px; }
.rm-hm-lbl { font-size:10px; color:var(--rm-dim); }
.rm-hm-cell {
  display:inline-block; width:12px; height:12px; border-radius:2px;
  background:var(--rm-hm0);
}
.rm-hm-cell[data-level="1"] { background:var(--rm-hm1); }
.rm-hm-cell[data-level="2"] { background:var(--rm-hm2); }
.rm-hm-cell[data-level="3"] { background:var(--rm-hm3); }
.rm-hm-cell[data-level="4"] { background:var(--rm-hm4); }
.rm-heatmap-wrap { padding-bottom:4px; min-width:680px; }
.rm-heatmap-months { display:flex; margin-left:28px; margin-bottom:4px; }
.rm-heatmap-month-lbl { font-size:9px; color:var(--rm-dim); text-align:left; padding-right:4px; }
.rm-heatmap-rows { display:flex; gap:4px; }
.rm-heatmap-days {
  display:grid; grid-template-rows:repeat(7,18px); gap:3px;
  font-size:9px; color:var(--rm-dim); line-height:18px; text-align:right;
  padding-right:5px; padding-top:0;
}
.rm-heatmap-grid {
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,18px);
  gap:3px;
}
.rm-hm-day {
  width:18px; height:18px; border-radius:3px;
  background:var(--rm-hm0); cursor:default; transition:transform .12s, box-shadow .12s;
}
.rm-hm-day[data-cnt]:not([data-cnt="0"]):not([data-future]) { cursor:pointer; }
.rm-hm-day:hover { transform:scale(1.35); z-index:5; }
.rm-hm-day[data-cnt]:not([data-cnt="0"]):hover { transform:scale(1.5); }
.rm-hm-day[data-level="1"] { background:var(--rm-hm1); }
.rm-hm-day[data-level="2"] { background:var(--rm-hm2); }
.rm-hm-day[data-level="3"] { background:var(--rm-hm3); }
.rm-hm-day[data-level="4"] { background:var(--rm-hm4); box-shadow:0 0 6px var(--rm-hm4); }
.rm-hm-day[data-future] { opacity:.25; }

/* ── Version Timeline ────────────────────────────────────── */
.rm-vtl-card { overflow-x:auto; }
.rm-version-timeline {
  display:flex; align-items:stretch; gap:0;
  position:relative; padding:24px 0 16px;
  min-width:600px;
}
.rm-version-timeline::before {
  content:''; position:absolute; left:0; right:0; top:50%;
  height:2px; background:linear-gradient(90deg,var(--rm-accent),var(--rm-gold));
  transform:translateY(-50%); opacity:.3;
}
.rm-vt-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; }
.rm-vt-node {
  width:36px; height:36px; border-radius:50%;
  background:var(--rm-bg-2);
  border:2px solid var(--rm-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; font-family:'Orbitron',monospace;
  position:relative; z-index:2; cursor:default;
  transition:all .2s;
}
.rm-vt-item:hover .rm-vt-node { transform:scale(1.18); }
.rm-vt-item.done .rm-vt-node { background:var(--rm-green); border-color:var(--rm-green); box-shadow:0 0 16px rgba(52,211,153,.4); color:#000; }
.rm-vt-item.upcoming .rm-vt-node { border-style:dashed; opacity:.65; }
.rm-vt-tag { font-size:11px; font-weight:800; color:var(--rm-accent); font-family:'Orbitron',monospace; }
.rm-vt-name { font-size:10.5px; font-weight:700; color:var(--rm-text); }
.rm-vt-date { font-size:9px; color:var(--rm-dim); }
.rm-vt-features { display:flex; flex-direction:column; gap:2px; margin-top:4px; max-width:120px; }
.rm-vt-feat { font-size:8.5px; color:var(--rm-dim); text-align:center; }
.rm-vt-upcoming-pill {
  font-size:7.5px; color:var(--rm-purple); background:rgba(167,139,250,.15);
  border:1px solid rgba(167,139,250,.3); border-radius:6px; padding:1px 6px;
  font-weight:700; letter-spacing:.05em;
}

/* ── Filter bar ──────────────────────────────────────────── */
.rm-filter-bar {
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  padding:12px 16px;
  background:rgba(10,14,22,.6); border:1px solid var(--rm-border); border-radius:12px;
}
.rm-fc {
  padding:5px 12px; background:rgba(95,200,255,.06); border:1px solid rgba(95,200,255,.2);
  color:var(--rm-text); border-radius:999px; font-size:11px; font-weight:600;
  cursor:pointer; transition:all .18s; white-space:nowrap;
}
.rm-fc:hover { background:rgba(95,200,255,.14); }
.rm-fc.active { background:linear-gradient(135deg,var(--rm-accent),var(--rm-gold)); color:var(--rm-bg); border-color:var(--rm-gold); box-shadow:0 0 14px rgba(251,191,36,.3); }

/* ── Section ─────────────────────────────────────────────── */
.rm-section { display:flex; flex-direction:column; gap:10px; }
.rm-section-hdr { display:flex; align-items:center; gap:8px; padding:0 4px; }
.rm-section-icon { font-size:18px; }
.rm-section-title { font-size:15px; font-weight:800; color:var(--rm-text); }
.rm-section-sub { font-size:11px; color:var(--rm-dim); }
.rm-cat-label { font-size:11px; font-weight:700; color:var(--rm-dim); letter-spacing:.08em; text-transform:uppercase; padding:0 4px; }

/* ── App Grid ────────────────────────────────────────────── */
.rm-app-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:10px;
}
.rm-ac {
  background:linear-gradient(135deg,rgba(15,20,32,.9),rgba(10,14,22,.8));
  border:1px solid var(--rm-border); border-radius:14px;
  padding:14px 16px; cursor:pointer;
  transition:all .2s; position:relative; overflow:hidden;
}
.rm-ac::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--rm-card-color, var(--rm-accent));
  border-radius:14px 14px 0 0;
}
.rm-ac:hover { border-color:rgba(95,200,255,.4); transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.4); }
.rm-ac.selected { border-color:var(--rm-accent); box-shadow:0 0 20px rgba(95,200,255,.25); }
.rm-ac-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.rm-ac-emoji { font-size:20px; line-height:1; }
.rm-ac-name { font-size:12.5px; font-weight:700; color:var(--rm-text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rm-ac-pct { font-size:13px; font-weight:800; color:var(--rm-gold); font-family:'Orbitron',monospace; }
.rm-ac-bar-wrap { height:4px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; margin-bottom:8px; }
.rm-ac-bar { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--rm-card-color,var(--rm-accent)),var(--rm-gold)); transition:width .6s ease; }
.rm-ac-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rm-ac-status {
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px;
}
.rm-ac-status.active { background:rgba(52,211,153,.18); color:#34d399; border:1px solid rgba(52,211,153,.3); }
.rm-ac-status.building { background:rgba(251,191,36,.15); color:var(--rm-gold); border:1px solid rgba(251,191,36,.3); }
.rm-ac-status.live { background:rgba(95,200,255,.15); color:var(--rm-accent); border:1px solid rgba(95,200,255,.3); }
.rm-ac-status.planned { background:rgba(167,139,250,.15); color:var(--rm-purple); border:1px solid rgba(167,139,250,.3); }
.rm-ac-steps { font-size:9.5px; color:var(--rm-dim); margin-left:auto; }
.rm-ac-cat { font-size:9px; color:var(--rm-dim); }

/* ── Step panel (side drawer) ────────────────────────────── */
.rm-step-panel {
  position:fixed; top:0; right:0; bottom:0; width:380px; max-width:95vw;
  background:linear-gradient(180deg,rgba(10,14,22,.97),rgba(6,10,18,.99));
  border-left:1px solid var(--rm-border);
  backdrop-filter:blur(24px);
  z-index:9800;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;
}
.rm-step-panel.open { transform:translateX(0); }
.rm-sp-header {
  display:flex; align-items:flex-start; gap:10px; padding:16px 18px 12px;
  border-bottom:1px solid var(--rm-border); flex-shrink:0;
}
.rm-sp-title-row { flex:1; display:flex; align-items:center; gap:8px; min-width:0; }
.rm-sp-emoji { font-size:22px; flex-shrink:0; }
.rm-sp-name { font-size:15px; font-weight:800; color:var(--rm-text); flex:1; min-width:0; }
.rm-sp-pct { font-size:18px; font-weight:900; color:var(--rm-gold); font-family:'Orbitron',monospace; flex-shrink:0; }
.rm-sp-close {
  flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1px solid var(--rm-border);
  background:rgba(255,255,255,.06); color:var(--rm-dim); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.rm-sp-close:hover { background:rgba(255,255,255,.12); color:var(--rm-text); }
.rm-sp-bar-wrap { height:3px; background:rgba(255,255,255,.06); flex-shrink:0; }
.rm-sp-bar { height:100%; background:linear-gradient(90deg,var(--rm-accent),var(--rm-gold)); transition:width .5s ease; }
.rm-sp-status-row { display:flex; align-items:center; gap:8px; padding:8px 18px; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,.05); }
.rm-sp-status-badge { font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
.rm-sp-cat { font-size:10px; color:var(--rm-dim); flex:1; }
.rm-sp-link { font-size:10px; color:var(--rm-accent); text-decoration:none; }
.rm-sp-link:hover { text-decoration:underline; }

.rm-sp-steps { flex:1; overflow-y:auto; padding:12px 18px; display:flex; flex-direction:column; gap:4px; }
.rm-sp-step {
  display:flex; align-items:flex-start; gap:10px; padding:9px 10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
  border-radius:9px; cursor:pointer; transition:all .15s;
}
.rm-sp-step:hover { background:rgba(255,255,255,.07); }
.rm-sp-step.done { border-left:2px solid var(--rm-green); }
.rm-sp-step.todo { border-left:2px solid rgba(255,255,255,.12); }
.rm-sp-check {
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.2); margin-top:1px; cursor:pointer;
  transition:all .15s; display:flex; align-items:center; justify-content:center;
  font-size:9px;
}
.rm-sp-step.done .rm-sp-check { background:var(--rm-green); border-color:var(--rm-green); color:#000; }
.rm-sp-step-body { flex:1; min-width:0; }
.rm-sp-step-title { font-size:12px; font-weight:600; color:var(--rm-text); line-height:1.4; }
.rm-sp-step.done .rm-sp-step-title { text-decoration:line-through; color:var(--rm-dim); }
.rm-sp-step-meta { display:flex; align-items:center; gap:6px; margin-top:3px; }
.rm-sp-step-ver { font-size:9px; color:var(--rm-purple); background:rgba(167,139,250,.12); padding:1px 5px; border-radius:5px; }
.rm-sp-step-pri { font-size:8px; color:var(--rm-dim); }
.rm-sp-step-edit {
  opacity:0; flex-shrink:0; font-size:11px; color:var(--rm-dim); cursor:pointer;
  padding:2px 5px; border-radius:5px; transition:all .15s;
}
.rm-sp-step:hover .rm-sp-step-edit { opacity:1; }
.rm-sp-step-edit:hover { background:rgba(255,255,255,.1); color:var(--rm-text); }

.rm-sp-add-btn {
  flex-shrink:0; margin:10px 18px 16px; padding:10px;
  background:rgba(95,200,255,.08); border:1px dashed rgba(95,200,255,.3);
  color:var(--rm-accent); border-radius:10px; cursor:pointer; font-size:12px; font-weight:700;
  transition:all .15s;
}
.rm-sp-add-btn:hover { background:rgba(95,200,255,.18); }

/* ── Add/Edit step form ──────────────────────────────────── */
.rm-add-step {
  flex-shrink:0; margin:0 18px; padding:12px; background:rgba(95,200,255,.04);
  border:1px solid rgba(95,200,255,.18); border-radius:12px;
  display:flex; flex-direction:column; gap:8px;
}
.rm-as-title { font-size:11px; font-weight:800; color:var(--rm-accent); }
.rm-as-input, .rm-as-textarea, .rm-as-select {
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.1);
  color:var(--rm-text); border-radius:8px; padding:7px 10px; font-size:11.5px;
  font-family:inherit; outline:none; width:100%; box-sizing:border-box;
  transition:border-color .15s;
}
.rm-as-input:focus, .rm-as-textarea:focus { border-color:var(--rm-accent); }
.rm-as-textarea { min-height:60px; resize:vertical; }
.rm-as-row { display:flex; gap:8px; }
.rm-as-row .rm-as-select { flex:1; }
.rm-as-actions { display:flex; gap:6px; justify-content:flex-end; }
.rm-as-btn {
  padding:6px 14px; border-radius:8px; font-size:11px; font-weight:700; cursor:pointer;
  border:1px solid transparent; transition:all .15s;
}
.rm-as-btn.primary { background:var(--rm-accent); color:var(--rm-bg); border-color:var(--rm-accent); }
.rm-as-btn.primary:hover { filter:brightness(1.15); }
.rm-as-btn.ghost { background:rgba(255,255,255,.06); color:var(--rm-text); border-color:rgba(255,255,255,.12); }
.rm-as-btn.ghost:hover { background:rgba(255,255,255,.12); }
.rm-as-btn.danger { background:rgba(239,68,68,.15); color:#ef4444; border-color:rgba(239,68,68,.3); }
.rm-as-btn.danger:hover { background:rgba(239,68,68,.28); }

/* ── Edit modal ──────────────────────────────────────────── */
.rm-edit-modal-bg {
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9900;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.rm-edit-modal-bg.open { opacity:1; pointer-events:auto; }
.rm-edit-modal {
  background:rgba(10,14,22,.98); border:1px solid var(--rm-border); border-radius:16px;
  padding:20px; width:100%; max-width:400px;
  display:flex; flex-direction:column; gap:10px;
  transform:scale(.92); transition:transform .2s;
}
.rm-edit-modal-bg.open .rm-edit-modal { transform:scale(1); }
.rm-em-title { font-size:14px; font-weight:800; color:var(--rm-text); margin:0; }

/* ── Original sparkline ──────────────────────────────────── */
.rm-sparkline { width:100%; height:80px; display:block; }
.rm-sparkline-line { fill:none; stroke:url(#rm-spark-grad); stroke-width:2.5; stroke-linejoin:round; filter:drop-shadow(0 0 6px rgba(251,191,36,.6)); }
.rm-sparkline-area { fill:url(#rm-spark-area); }
.rm-sparkline-dot { fill:var(--rm-gold); filter:drop-shadow(0 0 6px var(--rm-gold)); }

/* ── Original filters ────────────────────────────────────── */
.rm-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.rm-chip {
  padding:6px 12px; background:rgba(95,200,255,.06); border:1px solid rgba(95,200,255,.25);
  color:var(--rm-text); border-radius:999px; font-size:11.5px; font-weight:600;
  cursor:pointer; transition:all .18s;
}
.rm-chip:hover { background:rgba(95,200,255,.16); }
.rm-chip.active { background:linear-gradient(135deg,var(--rm-accent),var(--rm-gold)); color:var(--rm-bg); border-color:var(--rm-gold); box-shadow:0 0 16px rgba(251,191,36,.35); }

/* ── Original timeline ───────────────────────────────────── */
.rm-timeline-wrap { position:relative; width:100%; height:280px; overflow:hidden; border-radius:12px; background:radial-gradient(ellipse at center,rgba(95,200,255,.04),transparent 70%); }
.rm-timeline { width:100%; height:100%; display:block; }
.rm-now-cursor { position:absolute; top:12px; bottom:12px; width:2px; background:linear-gradient(180deg,transparent,var(--rm-gold),transparent); pointer-events:none; transition:left 1.5s linear; }
.rm-now-pulse { position:absolute; top:50%; left:-6px; width:14px; height:14px; background:var(--rm-gold); border-radius:50%; transform:translateY(-50%); box-shadow:0 0 18px var(--rm-gold),0 0 32px rgba(251,191,36,.5); animation:rm-now-pulse 1.4s ease-in-out infinite; }
@keyframes rm-now-pulse { 0%,100%{transform:translateY(-50%) scale(1);opacity:1} 50%{transform:translateY(-50%) scale(1.45);opacity:.7} }
.rm-now-label { position:absolute; top:-18px; left:-18px; font-size:9px; font-weight:900; letter-spacing:.18em; color:var(--rm-gold); }
.rm-waypoint { cursor:pointer; transition:transform .2s; }
.rm-waypoint:hover { transform:scale(1.18); }
.rm-waypoint-circle-milestone { fill:var(--rm-green); }
.rm-waypoint-circle-score     { fill:var(--rm-gold); }
.rm-waypoint-circle-waypoint  { fill:var(--rm-purple); }
.rm-waypoint-circle-upcoming  { fill:var(--rm-blue); opacity:.6; }
.rm-waypoint-glow { filter:blur(4px); opacity:.7; }
.rm-waypoint-label { font-size:9px; fill:var(--rm-dim); font-family:'Inter',sans-serif; font-weight:600; text-anchor:middle; }
.rm-line-base { stroke:rgba(95,200,255,.18); stroke-width:2; stroke-linecap:round; }
.rm-line-progress { stroke:url(#rm-line-grad); stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(251,191,36,.4)); }
.rm-detail { padding:14px; background:rgba(0,0,0,.35); border:1px solid var(--rm-border); border-radius:10px; font-size:12.5px; color:var(--rm-text); margin-bottom:14px; min-height:60px; }
.rm-events { display:flex; flex-direction:column; gap:8px; }
.rm-event { display:flex; gap:12px; align-items:flex-start; padding:10px 14px; border-left:3px solid var(--rm-accent); background:rgba(95,200,255,.04); border-radius:0 10px 10px 0; transition:all .18s; cursor:pointer; }
.rm-event:hover { background:rgba(95,200,255,.1); transform:translateX(3px); }
.rm-event-icon { font-size:18px; line-height:1.3; }
.rm-event-meta { flex:1; }
.rm-event-title { font-weight:700; font-size:12.5px; }
.rm-event-date { font-size:10.5px; color:var(--rm-dim); margin-top:2px; }
.rm-event[data-kind="milestone"] { border-left-color:var(--rm-green); }
.rm-event[data-kind="score"]     { border-left-color:var(--rm-gold); }
.rm-event[data-kind="waypoint"]  { border-left-color:var(--rm-purple); }
.rm-event[data-kind="upcoming"]  { border-left-color:var(--rm-blue); border-left-style:dashed; }

/* ── Toast ───────────────────────────────────────────────── */
#rm-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(60px);
  background:rgba(10,14,22,.95); border:1px solid var(--rm-border); border-radius:12px;
  padding:10px 20px; font-size:12px; font-weight:600; color:var(--rm-text);
  z-index:99999; pointer-events:none; transition:transform .3s,opacity .3s; opacity:0;
}
#rm-toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
#rm-toast.ok { border-color:var(--rm-green); color:var(--rm-green); }
#rm-toast.err { border-color:#ef4444; color:#ef4444; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:720px) {
  .rm-headline { gap:12px; }
  .rm-ring { width:80px; height:80px; }
  .rm-ring-num { font-size:20px; }
  .rm-title { font-size:18px; }
  .rm-timeline-wrap { height:200px; }
  .rm-app-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .rm-step-panel { width:100%; border-left:none; border-top:1px solid var(--rm-border); top:auto; height:75vh; transform:translateY(100%); }
  .rm-step-panel.open { transform:translateY(0); }
  .rm-version-timeline { min-width:480px; }
}

/* ── Heatmap enhancements ─────────────────────────────────── */
.rm-hm-today {
  outline:2px solid var(--rm-gold) !important;
  outline-offset:1px;
  z-index:4;
  position:relative;
}
.rm-hm-today-label {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-size:7px; font-weight:900; color:var(--rm-gold); letter-spacing:.1em;
  white-space:nowrap; pointer-events:none;
  text-shadow:0 0 8px var(--rm-gold);
}
.rm-hm-cat-legend {
  display:flex; flex-wrap:wrap; gap:6px; padding:8px 4px 2px;
}
.rm-hm-cat-chip {
  font-size:9px; font-weight:700; padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb, var(--hcat) 15%, transparent);
  color:var(--hcat);
  border:1px solid color-mix(in srgb, var(--hcat) 35%, transparent);
}

/* ── Day popup ───────────────────────────────────────────── */
.rm-day-popup {
  display:none; flex-direction:column;
  position:fixed; top:120px; right:20px; z-index:9850;
  width:380px; max-width:calc(100vw - 40px);
  max-height:70vh; overflow:hidden;
  background:rgba(8,12,20,.97);
  border:1px solid var(--rm-border);
  border-radius:16px;
  backdrop-filter:blur(24px);
  box-shadow:0 8px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(95,200,255,.08);
  animation:rm-popup-in .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes rm-popup-in { from{opacity:0;transform:scale(.92) translateY(-8px)} to{opacity:1;transform:none} }
.rm-dp-header {
  display:flex; align-items:center; gap:10px; padding:14px 18px 10px;
  border-bottom:1px solid var(--rm-border); flex-shrink:0;
}
.rm-dp-date { flex:1; font-size:13px; font-weight:700; color:var(--rm-text); font-family:'Orbitron',monospace; }
.rm-dp-close {
  width:26px; height:26px; border-radius:50%; border:1px solid var(--rm-border);
  background:rgba(255,255,255,.06); color:var(--rm-dim); font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.rm-dp-close:hover { background:rgba(255,255,255,.14); color:var(--rm-text); }
.rm-dp-body { flex:1; overflow-y:auto; padding:10px 16px; display:flex; flex-direction:column; gap:8px; }
.rm-dp-commit {
  padding:10px 12px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06); border-radius:10px;
}
.rm-dp-commit-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.rm-dp-hash { font-family:monospace; font-size:10px; color:var(--rm-dim); background:rgba(0,0,0,.3); padding:1px 5px; border-radius:4px; }
.rm-dp-cat { font-size:8px; font-weight:700; padding:2px 7px; border-radius:999px; text-transform:uppercase; }
.rm-dp-msg { font-size:12px; font-weight:600; color:var(--rm-text); line-height:1.4; }
.rm-dp-body-text { font-size:10.5px; color:var(--rm-dim); margin-top:4px; line-height:1.5; }
.rm-dp-files { display:flex; flex-wrap:wrap; gap:3px; margin-top:6px; }
.rm-dp-file { font-size:8.5px; color:var(--rm-accent); background:rgba(95,200,255,.06); padding:1px 5px; border-radius:4px; font-family:monospace; }

/* ── Card detail modal ───────────────────────────────────── */
.rm-card-modal-bg {
  display:none; position:fixed; inset:0; z-index:9900;
  background:rgba(0,0,0,.55); align-items:center; justify-content:center;
  padding:20px;
  opacity:0; transition:opacity .2s;
}
.rm-card-modal-bg.open { display:flex; opacity:1; }
.rm-card-modal {
  background:rgba(8,12,20,.98); border:1px solid var(--rm-border);
  border-radius:20px; width:100%; max-width:520px;
  max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  animation:rm-popup-in .25s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;
}
.rm-cm-header {
  padding:20px 22px 14px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border-bottom:1px solid var(--rm-border);
  position:relative;
}
.rm-cm-header::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--cm-color, var(--rm-accent));
  border-radius:20px 20px 0 0;
}
.rm-cm-title-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.rm-cm-emoji { font-size:26px; flex-shrink:0; }
.rm-cm-title-text { flex:1; min-width:0; }
.rm-cm-name { font-size:16px; font-weight:800; color:var(--rm-text); }
.rm-cm-meta-row { display:flex; align-items:center; gap:6px; margin-top:3px; flex-wrap:wrap; }
.rm-cm-cat { font-size:9px; color:var(--rm-dim); }
.rm-cm-commits { font-size:9px; color:var(--rm-dim); }
.rm-cm-pct { font-size:22px; font-weight:900; font-family:'Orbitron',monospace; color:var(--rm-gold); flex-shrink:0; }
.rm-cm-close {
  flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--rm-border);
  background:rgba(255,255,255,.06); color:var(--rm-dim); font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.rm-cm-close:hover { background:rgba(255,255,255,.14); color:var(--rm-text); }
.rm-cm-bar-wrap { height:5px; background:rgba(255,255,255,.08); border-radius:5px; overflow:hidden; margin-bottom:4px; }
.rm-cm-bar { height:100%; border-radius:5px; transition:width .5s ease; }
.rm-cm-progress-label { font-size:10px; color:var(--rm-dim); }

.rm-cm-steps-scroll { flex:1; overflow-y:auto; padding:12px 20px; }
.rm-cm-ver-group { margin-bottom:14px; }
.rm-cm-ver-label {
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
  padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.06);
}
.rm-cm-ver-tag {
  font-size:10px; font-weight:800; color:var(--rm-purple); font-family:'Orbitron',monospace;
  background:rgba(167,139,250,.12); padding:2px 8px; border-radius:999px;
}
.rm-cm-ver-count { font-size:9px; color:var(--rm-dim); margin-left:auto; }
.rm-cm-step {
  display:flex; align-items:flex-start; gap:10px; padding:8px 10px;
  border-radius:9px; cursor:pointer; transition:background .15s;
  border-left:2px solid transparent;
}
.rm-cm-step:hover { background:rgba(255,255,255,.05); }
.rm-cm-step.done { border-left-color:var(--rm-green); }
.rm-cm-step.todo { border-left-color:rgba(255,255,255,.1); }
.rm-cm-check { font-size:16px; flex-shrink:0; line-height:1.3; user-select:none; }
.rm-cm-step-body { flex:1; min-width:0; }
.rm-cm-step-title { font-size:12px; font-weight:600; color:var(--rm-text); line-height:1.4; }
.rm-cm-step.done .rm-cm-step-title { text-decoration:line-through; color:var(--rm-dim); }
.rm-cm-step-meta { font-size:9.5px; color:var(--rm-dim); margin-top:2px; }

.rm-cm-footer {
  display:flex; gap:8px; align-items:center; padding:12px 20px 16px;
  border-top:1px solid rgba(255,255,255,.06); flex-shrink:0; flex-wrap:wrap;
}
.rm-cm-open-btn {
  padding:7px 14px; background:var(--rm-accent); color:var(--rm-bg);
  border-radius:9px; text-decoration:none; font-size:12px; font-weight:700;
  transition:filter .15s;
}
.rm-cm-open-btn:hover { filter:brightness(1.15); }
.rm-cm-edit-btn, .rm-cm-close-btn {
  padding:7px 14px; border-radius:9px; font-size:12px; font-weight:700; cursor:pointer;
  border:1px solid var(--rm-border);
}
.rm-cm-edit-btn { background:rgba(95,200,255,.08); color:var(--rm-accent); }
.rm-cm-edit-btn:hover { background:rgba(95,200,255,.18); }
.rm-cm-close-btn { background:rgba(255,255,255,.05); color:var(--rm-text); margin-left:auto; }
.rm-cm-close-btn:hover { background:rgba(255,255,255,.12); }

/* ── App card dots row ───────────────────────────────────── */
.rm-ac-dots { display:flex; gap:3px; margin-top:6px; flex-wrap:wrap; }
.rm-ac-dot {
  width:7px; height:7px; border-radius:50%;
  flex-shrink:0; transition:transform .1s;
}
.rm-ac:hover .rm-ac-dot { transform:scale(1.2); }

/* ── Version timeline phase enhancements ──────────────────── */
.rm-vt-top-row { display:flex; justify-content:center; margin-bottom:4px; }
.rm-vt-phase-pill {
  font-size:7.5px; font-weight:800; padding:2px 7px; border-radius:999px;
  border:1px solid; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap;
}
.rm-vt-current-pill {
  font-size:8px; font-weight:900; color:#3ac9ff; letter-spacing:.06em;
  text-align:center; margin-top:2px; animation:rm-current-pulse 2s ease-in-out infinite;
}
@keyframes rm-current-pulse {
  0%,100%{opacity:1;text-shadow:0 0 8px #3ac9ff} 50%{opacity:.6;text-shadow:none}
}
.rm-vt-current-node {
  animation:rm-current-node-glow 2s ease-in-out infinite !important;
}
@keyframes rm-current-node-glow {
  0%,100%{box-shadow:0 0 20px #3ac9ff66,0 0 40px #3ac9ff22}
  50%{box-shadow:0 0 30px #3ac9ff99,0 0 60px #3ac9ff44}
}
.rm-vt-item.current .rm-vt-node { font-size:18px; }
.rm-vt-req {
  font-size:7px; color:var(--rm-gold); font-weight:700;
  text-align:center; margin-top:3px; padding:2px 4px;
  background:rgba(251,191,36,.08); border-radius:5px; line-height:1.4;
}
/* Alpha phase items: slightly muted */
.rm-vt-item.done .rm-vt-node {
  opacity:.8;
}
/* Beta: highlight */
.rm-vt-item.current { z-index:2; }

/* ── Project Stats Counter Strip ────────────────────────── */
.rm-stats-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
@media(max-width:720px){ .rm-stats-strip{ grid-template-columns:repeat(2,1fr); } }
.rm-stat-card {
  background:linear-gradient(135deg,rgba(15,20,32,.9),rgba(10,14,22,.8));
  border:1px solid var(--rm-border); border-radius:14px;
  padding:16px 18px; text-align:center; position:relative; overflow:hidden;
}
.rm-stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--rm-accent), var(--rm-gold));
  border-radius:14px 14px 0 0;
}
#rms-spend::before  { background:linear-gradient(90deg,#ef4444,#f97316); }
#rms-tokens::before { background:linear-gradient(90deg,#a78bfa,#5fc8ff); }
#rms-hours::before  { background:linear-gradient(90deg,#00ffa3,#34d399); }
#rms-cmds::before   { background:linear-gradient(90deg,#fbbf24,#f97316); }

.rm-stat-num {
  font-family:'Orbitron',monospace; font-size:22px; font-weight:900;
  color:var(--rm-text); line-height:1; margin-bottom:4px;
  transition:all .3s;
}
#rms-spend .rm-stat-num  { color:#f97316; }
#rms-tokens .rm-stat-num { color:#a78bfa; }
#rms-hours .rm-stat-num  { color:#00ffa3; }
#rms-cmds .rm-stat-num   { color:#fbbf24; }

.rm-stat-lbl { font-size:10px; font-weight:700; color:var(--rm-text); letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px; }
.rm-stat-sub { font-size:9px; color:var(--rm-dim); }
.rm-stat-card.loaded .rm-stat-num { animation:rm-count-bounce .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes rm-count-bounce { 0%{transform:scale(.8);opacity:.5} 100%{transform:scale(1);opacity:1} }