.ng-sim-status { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 35; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 7px 10px; border: 1px solid #ffb020; border-radius: 10px; background: #0f1a2cf2; color: #dce6f7; box-shadow: 0 8px 28px #0008; font: 11px/1.3 system-ui, sans-serif; }
.ng-sim-status-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ng-sim-kicker { color: #ffcf70; font-weight: 800; font-size: 9px; letter-spacing: .08em; }
.ng-sim-status b { color: #7bf0b0; font-size: 10px; }
.ng-sim-status b[data-state="DISCONNECTED"] { color: #ff9aab; }
.ng-sim-status span { color: #b8c7df; }
.ng-sim-status-actions button { border: 1px solid #7d2638; border-radius: 7px; background: #3a1420; color: #ffd7dd; padding: 5px 7px; font: inherit; font-size: 10px; cursor: pointer; }
.ng-sim-marker { position: relative; width: 42px; height: 42px; cursor: pointer; }
.ng-sim-marker canvas { position: absolute; inset: 5px; width: 32px; height: 32px; transform: rotate(var(--ng-sim-heading, 0deg)); transform-origin: center; filter: drop-shadow(0 0 3px #ff7bd5); }
.ng-sim-marker::before { content: ""; position: absolute; inset: 1px; border: 2px solid #ffb020; border-radius: 50%; box-shadow: 0 0 0 2px #ff7bd5; }
.ng-sim-marker-label { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 1px 4px; border: 1px solid #ffb020; border-radius: 4px; background: #2a210d; color: #ffe6b0; font: 800 8px/1.2 system-ui; white-space: nowrap; pointer-events: none; }
@media (max-width: 700px) { .ng-sim-status { top: 56px; width: calc(100vw - 20px); justify-content: space-between; } .ng-sim-kicker { display: none; } }