.iv {
  --iv-accent: #8b7cff; --iv-accent-2: #b4a9ff;
  display: grid; gap: 10px; padding: 18px 20px 16px; border-radius: 18px;
  background: var(--surface, #1D202A); border: 1px solid var(--line, #2F3440);
}
.iv[hidden] { display: none; }
.iv-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.iv-namn { font: 600 var(--t-small, .9375rem)/1.2 var(--font-text, system-ui, sans-serif); color: var(--ink-2, #C3C8D2); }
.iv-ord { font: 700 22px/1.1 var(--font-display, system-ui, sans-serif); letter-spacing: -.02em; color: var(--ink, #EDEFF4); }
.iv-rad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.iv-stopp {
  display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 10px 4px 9px; border-radius: 12px; cursor: pointer;
  background: var(--surface-2, #262A36); border: 1px solid var(--line, #2F3440); color: var(--ink-2, #C3C8D2);
  font: inherit; text-align: center; -webkit-tap-highlight-color: transparent;
  transition: background 140ms var(--ease, ease), border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.iv-stopp b { font: 700 24px/1 var(--font-display, system-ui, sans-serif); color: var(--ink, #EDEFF4); }
.iv-stopp-namn { font: 600 12.5px/1.2 var(--font-text, system-ui, sans-serif); overflow-wrap: anywhere; }
.iv-stopp small { font: 500 11.5px/1.2 var(--font-text, system-ui, sans-serif); color: var(--ink-3, #9AA0AD); }
.iv-stopp small:empty { display: none; }
.iv-stopp:hover { border-color: color-mix(in srgb, var(--iv-accent) 55%, var(--line, #2F3440)); }
.iv-stopp.pa { background: color-mix(in srgb, var(--iv-accent) 18%, var(--surface-2, #262A36)); border-color: var(--iv-accent); color: var(--ink, #EDEFF4); box-shadow: 0 0 0 1px var(--iv-accent), 0 0 18px -4px color-mix(in srgb, var(--iv-accent) 60%, transparent); }
.iv-stopp.pa small { color: var(--iv-accent-2); }
.iv-stopp:focus-visible { outline: 3px solid var(--focus, #EDEFF4); outline-offset: 2px; }
.iv-stopp[aria-disabled="true"] { cursor: not-allowed; opacity: .5; background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--ink-3, #9AA0AD) 18%, transparent) 5px 7px); }
.iv-kort { margin: 2px 0 0; color: var(--ink, #EDEFF4); font-size: var(--t-small, .9375rem); }
.iv-kost { margin: 0; color: var(--ink-2, #C3C8D2); font-size: var(--t-small, .9375rem); }
@media (max-width: 560px) { .iv { padding: 16px; } .iv-stopp { padding: 9px 2px 8px; } .iv-stopp b { font-size: 22px; } .iv-stopp-namn { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .iv-stopp { transition: none; } }