/* Item Planning hero mockup frame. Named .ip-* rather than .app-frame/.app-bar/
   .app-body, since style.css already defines those for the (unrelated,
   currently-unused) homepage device-mockup component with an incompatible
   layout — reusing those names would silently inherit the wrong styling,
   the same class-collision bug documented in CLAUDE.md for the Exponential
   Retail podcast player. Everything inside the frame (.dot, .app-title,
   .app-live, .kpi/.kpi-row, table.mock, .pill, .mock-note, .up/.down/.amber)
   reuses module-page.css as-is — those are correctly scoped already. */
.ip-frame { border-radius:14px; border:1px solid var(--border-2); background:linear-gradient(180deg,#16100A,#0E0A06); box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,146,62,0.06); overflow:hidden; }
.ip-bar { display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--border); background:#150F0A; }
.ip-body { padding:18px; }