/* =============================================================
   myproperty.now — Components
   Requires tokens.css. All classes are .im-* or semantic.
   ============================================================= */

/* --------- App shell ---------- */
.im-app {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% -10%, rgba(167,139,250,.06), transparent 50%),
    radial-gradient(circle at 100% 110%, rgba(167,139,250,.04), transparent 60%),
    var(--bg-base);
  position: relative;
  overflow: hidden;
}
.im-app::before {
  /* subtle dot grid */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* --------- OS chrome: top bar ---------- */
.im-topbar {
  position: relative; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s-5);
  padding: 0 var(--s-6);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11,14,16,.92), rgba(11,14,16,.6));
  backdrop-filter: blur(8px);
}
.im-brand {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-hi);
}
.im-brand-dot {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.im-brand-version {
  color: var(--text-lo);
  font-size: var(--fs-2xs);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}

/* center cluster of icon nav (matches screenshot pattern) */
.im-iconnav {
  display: flex; align-items: center; gap: 2px;
  margin: 0 auto;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
}
.im-iconnav button {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent; color: var(--text-mid);
  border: 0; border-radius: var(--r-pill);
  cursor: pointer; transition: all var(--dur-1) var(--ease);
}
.im-iconnav button:hover { color: var(--text-hi); background: var(--bg-elev); }
.im-iconnav button.is-active {
  background: var(--accent); color: var(--text-on-accent);
  box-shadow: 0 0 16px var(--accent-glow);
}
.im-iconnav button svg { width: 16px; height: 16px; }

.im-iconnav-label {
  position: absolute;
  margin-top: 64px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  background: var(--bg-base);
  padding: 2px 8px; border-radius: var(--r-xs);
  pointer-events: none;
}

/* tickers right side */
.im-ticker {
  display: flex; align-items: center; gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-lo);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
}
.im-ticker .v { color: var(--text-mid); }

/* coordinate strip below topbar */
.im-coords {
  position: relative; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
}
.im-coords .group { display: flex; gap: var(--s-5); }
.im-coords .label { color: var(--text-lo); margin-right: 4px; }

/* status bar (footer) */
.im-statusbar {
  position: relative; z-index: 5;
  height: var(--statusbar-h);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--s-6);
  border-top: 1px solid var(--line);
  background: var(--bg-base);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--text-lo);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
}
.im-statusbar .nav-jump { display: flex; gap: var(--s-3); align-items: center; }
.im-statusbar .nav-jump kbd {
  font-family: var(--font-mono);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 1px 5px; border-radius: var(--r-xs);
  color: var(--text-mid);
}

/* --------- Layout: app w/ sidebar ---------- */
.im-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--topbar-h) - var(--statusbar-h) - 30px);
}
.im-sidebar {
  border-right: 1px solid var(--line);
  background: var(--bg-raised);
  padding: var(--s-5) var(--s-3);
  position: sticky; top: 0;
}
.im-side-group { margin-bottom: var(--s-6); }
.im-side-title {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 var(--s-3) var(--s-2);
}
.im-side-link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-mid);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: all var(--dur-1) var(--ease);
  cursor: pointer;
}
.im-side-link:hover { background: var(--bg-elev); color: var(--text-hi); }
.im-side-link.is-active {
  background: var(--accent-wash);
  color: var(--accent-hi);
  box-shadow: inset 2px 0 0 var(--accent);
}
.im-side-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.im-side-link .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  background: var(--accent);
  color: var(--text-on-accent);
  padding: 1px 6px; border-radius: var(--r-pill);
}
.im-side-link .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  margin-left: auto;
}

/* main content area */
.im-main { padding: var(--s-7); position: relative; }
.im-main-header {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.im-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.im-eyebrow::before {
  content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-glow);
}
.im-h1 {
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 600;
  margin: 0;
}
.im-h1 em { font-style: normal; color: var(--accent); }
.im-h2 {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  margin: 0;
}
.im-h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
}
.im-lede { color: var(--text-mid); max-width: 640px; line-height: var(--lh-base); }

/* --------- Buttons ---------- */
.im-btn {
  --btn-bg: var(--bg-raised);
  --btn-fg: var(--text-hi);
  --btn-line: var(--line-strong);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
  white-space: nowrap;
}
.im-btn:hover { background: var(--bg-elev); border-color: var(--text-lo); }
.im-btn svg { width: 14px; height: 14px; }

.im-btn.is-primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--text-on-accent);
  --btn-line: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--accent-line), 0 6px 24px var(--accent-glow);
}
.im-btn.is-primary:hover { --btn-bg: var(--accent-hi); --btn-line: var(--accent-hi); }

.im-btn.is-ghost {
  --btn-bg: transparent;
  --btn-line: transparent;
  --btn-fg: var(--text-mid);
}
.im-btn.is-ghost:hover { --btn-bg: var(--bg-elev); --btn-fg: var(--text-hi); }

.im-btn.is-danger { --btn-fg: var(--bad); --btn-line: rgba(248,113,113,.3); }
.im-btn.is-danger:hover { --btn-bg: var(--bad-wash); }

.im-btn.is-sm { padding: 4px 10px; font-size: var(--fs-xs); }
.im-btn.is-lg { padding: 12px 20px; font-size: var(--fs-md); }

.im-iconbtn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text-mid);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}
.im-iconbtn:hover { background: var(--bg-elev); color: var(--text-hi); border-color: var(--line); }
.im-iconbtn svg { width: 16px; height: 16px; }

/* --------- Pills / segmented controls ---------- */
.im-segment {
  display: inline-flex;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px;
}
.im-segment button {
  background: transparent; border: 0;
  padding: 5px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-mid);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.im-segment button.is-active {
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
}

/* --------- Badges ---------- */
.im-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--r-xs);
  background: var(--bg-elev);
  color: var(--text-mid);
  border: 1px solid var(--line);
}
.im-badge.is-accent { background: var(--accent-wash); color: var(--accent-hi); border-color: var(--accent-line); }
.im-badge.is-ok    { background: var(--ok-wash);    color: var(--ok);    border-color: rgba(52,211,153,.3); }
.im-badge.is-warn  { background: var(--warn-wash);  color: var(--warn);  border-color: rgba(245,176,66,.3); }
.im-badge.is-bad   { background: var(--bad-wash);   color: var(--bad);   border-color: rgba(248,113,113,.3); }
.im-badge.is-info  { background: var(--info-wash);  color: var(--info);  border-color: rgba(96,165,250,.3); }
.im-badge.is-solid-accent { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }

.im-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* --------- Cards / panels ---------- */
.im-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative;
}
.im-card.is-flush { padding: 0; }
.im-card-header {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-soft);
}
.im-card-title {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-mid);
}
.im-card-body { padding: var(--s-5); }

/* Window-chrome card (browser-style) — matches screenshot */
.im-window {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.im-window-bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-4);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
}
.im-window-lights { display: flex; gap: 6px; }
.im-window-lights span {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--line-strong);
}
.im-window-lights span:nth-child(1) { background: #ff5f57; }
.im-window-lights span:nth-child(2) { background: #febc2e; }
.im-window-lights span:nth-child(3) { background: #28c840; }
.im-window-url {
  flex: 1; max-width: 300px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-mid);
  background: var(--bg-base);
  border: 1px solid var(--line);
  padding: 4px 10px; border-radius: var(--r-sm);
  display: flex; align-items: center; gap: var(--s-2);
}
.im-window-url svg { width: 11px; height: 11px; }
.im-window-tab {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  background: var(--accent);
  color: var(--text-on-accent);
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-weight: 600;
}

/* --------- Forms ---------- */
.im-field { display: flex; flex-direction: column; gap: 6px; }
.im-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-mid);
}
.im-label .req { color: var(--accent); margin-left: 4px; }

.im-input,
.im-select,
.im-textarea {
  background: var(--bg-base);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-hi);
  width: 100%;
  transition: all var(--dur-1) var(--ease);
}
.im-input:hover, .im-select:hover, .im-textarea:hover { border-color: var(--line-strong); }
.im-input:focus, .im-select:focus, .im-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.im-textarea { min-height: 96px; resize: vertical; font-family: var(--font-sans); }
.im-input::placeholder, .im-textarea::placeholder { color: var(--text-faint); }
.im-input.is-mono { font-family: var(--font-mono); font-size: var(--fs-xs); }

.im-input-group {
  display: flex; align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0 12px;
  gap: var(--s-2);
  transition: all var(--dur-1) var(--ease);
}
.im-input-group:focus-within {
  border-color: var(--accent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.im-input-group svg { width: 14px; height: 14px; color: var(--text-lo); flex-shrink: 0; }
.im-input-group input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text-hi); padding: 10px 0;
  font-family: var(--font-sans); font-size: var(--fs-sm);
}
.im-input-group input::placeholder { color: var(--text-faint); }
.im-input-group .affix {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--text-lo); letter-spacing: var(--tr-mono); text-transform: uppercase;
}

/* checkbox + radio */
.im-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--text-mid); cursor: pointer;
}
.im-check input { display: none; }
.im-check .box {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid var(--line-strong); background: var(--bg-base);
  display: grid; place-items: center;
  transition: all var(--dur-1) var(--ease);
}
.im-check input:checked + .box {
  background: var(--accent); border-color: var(--accent);
}
.im-check input:checked + .box::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid var(--text-on-accent);
  border-bottom: 2px solid var(--text-on-accent);
  transform: rotate(-45deg) translate(1px,-1px);
}

.im-toggle {
  width: 36px; height: 20px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  position: relative; cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}
.im-toggle::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-mid);
  transition: all var(--dur-2) var(--ease);
}
.im-toggle.is-on { background: var(--accent-wash); border-color: var(--accent); }
.im-toggle.is-on::after { left: 18px; background: var(--accent); }

/* --------- Tables ---------- */
.im-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.im-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-lo);
  text-align: left;
  padding: 10px var(--s-4);
  background: var(--bg-base);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.im-table tbody td {
  padding: 12px var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  color: var(--text-hi);
}
.im-table tbody tr { transition: background var(--dur-1) var(--ease); }
.im-table tbody tr:hover { background: var(--bg-elev); }
.im-table .num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.im-table .id  { font-family: var(--font-mono); color: var(--text-lo); font-size: var(--fs-xs); }
.im-table .muted { color: var(--text-mid); }

/* compact row variant */
.im-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.im-row:hover { background: var(--bg-elev); }
.im-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent); opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}
.im-row:hover::before { opacity: 1; }

/* --------- Stat cards / KPIs ---------- */
.im-kpi {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
}
.im-kpi::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
.im-kpi-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-lo);
  margin-bottom: var(--s-3);
}
.im-kpi-value {
  font-size: var(--fs-3xl);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: var(--s-2);
}
.im-kpi-unit {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text-lo); font-weight: 400;
}
.im-kpi-foot {
  margin-top: var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); color: var(--text-mid);
}
.im-trend-up   { color: var(--ok); font-family: var(--font-mono); font-size: var(--fs-xs); }
.im-trend-down { color: var(--bad); font-family: var(--font-mono); font-size: var(--fs-xs); }

/* --------- Property card (listing) ---------- */
.im-listing {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--dur-2) var(--ease);
  display: flex; flex-direction: column;
}
.im-listing:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: var(--sh-3);
}
.im-listing-img {
  aspect-ratio: 16/10;
  background: var(--bg-elev) center/cover;
  position: relative;
}
.im-listing-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(7,8,10,.7));
}
.im-listing-tags {
  position: absolute; top: var(--s-3); left: var(--s-3);
  display: flex; gap: 4px; z-index: 2;
}
.im-listing-fav {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 32px; height: 32px;
  background: rgba(7,8,10,.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  color: var(--text-mid);
  z-index: 2; cursor: pointer;
}
.im-listing-fav:hover { color: var(--accent); }
.im-listing-fav svg { width: 14px; height: 14px; }
.im-listing-price {
  position: absolute; bottom: var(--s-3); left: var(--s-3);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-hi);
  font-size: var(--fs-md);
  letter-spacing: var(--tr-tight);
  z-index: 2;
}
.im-listing-body { padding: var(--s-4); display: flex; flex-direction: column; gap: 6px; }
.im-listing-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-hi); }
.im-listing-loc {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-lo); letter-spacing: var(--tr-mono); text-transform: uppercase;
  display: flex; align-items: center; gap: 4px;
}
.im-listing-meta {
  display: flex; gap: var(--s-3);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs); color: var(--text-mid);
}
.im-listing-meta span { display: inline-flex; align-items: center; gap: 4px; }
.im-listing-meta svg { width: 12px; height: 12px; color: var(--text-lo); }

/* --------- Map placeholder ---------- */
.im-map {
  position: relative;
  background:
    linear-gradient(180deg, #0a0e15, #050709),
    var(--bg-base);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 360px;
}
.im-map svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.im-map-pin {
  position: absolute;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
  border: 2px solid var(--bg-base);
  border-radius: var(--r-pill);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 4px var(--accent-glow), 0 4px 12px rgba(0,0,0,.5);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease);
}
.im-map-pin:hover { transform: translate(-50%,-50%) scale(1.15); z-index: 5; }
.im-map-pin.is-muted {
  background: var(--bg-elev); color: var(--text-mid); border-color: var(--line);
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.im-map-overlay {
  position: absolute; top: var(--s-4); left: var(--s-4);
  background: rgba(11,14,16,.85); backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--text-mid);
}

/* --------- Charts ---------- */
.im-bar {
  width: 100%; height: 6px;
  background: var(--bg-inset);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.im-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  border-radius: inherit;
}
.im-spark { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.im-spark > span {
  flex: 1; background: var(--accent-wash);
  border-radius: 1px 1px 0 0;
  border-top: 1px solid var(--accent);
}

/* --------- Avatar ---------- */
.im-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elev) center/cover;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-mid);
}
.im-avatar.is-lg { width: 48px; height: 48px; font-size: var(--fs-md); }
.im-avatar.is-sm { width: 22px; height: 22px; font-size: var(--fs-2xs); }

/* --------- Misc helpers ---------- */
.im-divider { height: 1px; background: var(--line); border: 0; margin: var(--s-5) 0; }
.im-divider.dashed { background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px); }

.im-grid { display: grid; gap: var(--s-4); }
.im-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.im-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.im-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.im-grid.c5 { grid-template-columns: repeat(5, 1fr); }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.ml-auto { margin-left: auto; }
.text-mid { color: var(--text-mid); } .text-lo { color: var(--text-lo); } .text-hi { color: var(--text-hi); }
.text-accent { color: var(--accent); }