/* On Easy app — Routing + Interfaces cards in Settings, and the one-line meter under the HUD panel. */
.oe-routing, .oe-interfaces { display: grid; margin-top: 0.4rem; }
.oe-route, .oe-interface { display: grid; gap: 0.3rem; padding: 0.55rem 0; border-top: 1px solid var(--rule); }
.oe-route:first-child, .oe-interface:first-child { border-top: 0; }
.oe-route-name, .oe-interface-line { font-size: 0.92rem; }
.oe-route-name { font-weight: 600; }
.oe-route-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.45rem; }
.oe-route select, .oe-route input, .oe-interface input {
  width: 100%; min-width: 0; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 0.8rem; padding: 0.5rem 0.75rem; font-size: 0.9rem;
}
.oe-interface-bar { height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.oe-interface-bar i { display: block; height: 100%; width: 0; background: #8b7cff; transition: width 0.3s ease; }
.oe-interface.is-warn .oe-interface-bar i, .oe-interface-warn { color: #ff9f43; }
.oe-interface.is-warn .oe-interface-bar i { background: #ff9f43; }
.oe-interface-budget { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--dim); }
.oe-interface-budget input { max-width: 9rem; }
.oe-interfaces-line { padding: 0 0.9rem 0.4rem; }
@media (prefers-reduced-motion: reduce) { .oe-interface-bar i { transition: none; } }