:root{
  --accent:#7c8cff;
  --accent-2:#36c9a0;
  --accent-3:#f5b44c;
}

/* Pills – shared look + color variants */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
      background:var(--pill);border:1px solid var(--border);font-weight:600}
.pill .label{opacity:.7;font-weight:500}
.pill--sub{background:color-mix(in srgb, var(--accent) 13%, transparent);border-color:color-mix(in srgb, var(--accent) 38%, var(--border))}
.pill--view{background:color-mix(in srgb, var(--accent-2) 13%, transparent);border-color:color-mix(in srgb, var(--accent-2) 38%, var(--border))}
.pill--ratio{background:color-mix(in srgb, var(--accent-3) 13%, transparent);border-color:color-mix(in srgb, var(--accent-3) 38%, var(--border))}
.pill .emoji{font-size:1.05rem}

/* Milestones mini table */
.mini-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);
  border-radius:12px;overflow:hidden;background:var(--card-bg)}
.mini-table thead th{background:var(--surface-soft);text-align:left;padding:10px 12px;font-weight:700}
.mini-table td{padding:10px 12px;border-top:1px solid var(--border)}
.mini-table td:nth-child(2){font-weight:700}
.mini-table td:first-child{white-space:nowrap}

.yt-eta-card,.im-card{
  background:var(--card-bg)!important;
  border:1px solid var(--border)!important;
  border-radius:14px;
  box-shadow:none!important;
}

.yt-eta-title,.im-title{
  font-size:1rem!important;
  letter-spacing:.02em;
  font-weight:700;
  margin:0 0 12px;
}