:root { color-scheme: dark; }
  html, body {
    height: 100%; margin: 0; background: #000; overflow: hidden; overscroll-behavior: none;
  }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #f2f2f2;
  }
  #canvas-wrap { position: fixed; inset: 0; touch-action: none; }
  canvas { display: block; width: 100%; height: 100%; }

  .ui-layer {
    position: fixed; inset: 0; pointer-events: none;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(8px, 2.5vw, 14px));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(8px, 2.5vw, 14px));
    padding-left: clamp(8px, 2.5vw, 14px);
    padding-right: clamp(8px, 2.5vw, 14px);
    box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .top-row { display: flex; justify-content: flex-end; align-items: flex-start; gap: 8px; }

  .btn-row { display: flex; flex-direction: row; gap: 8px; pointer-events: auto; flex-wrap: wrap; justify-content: flex-end; }

  .icon-btn {
    font-family: inherit; color: #fff;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    width: clamp(36px, 9vw, 42px); height: clamp(36px, 9vw, 42px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex: none; padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    box-sizing: border-box;
  }
  .icon-btn svg { width: 56%; height: 56%; display: block; }
  .icon-btn .dollar-icon {
    font-size: 1.15em; font-weight: 700; line-height: 1; display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  .icon-btn:hover { background: rgba(255,255,255,0.14); }
  .icon-btn:active { background: rgba(255,255,255,0.22); }
  .icon-btn:disabled { opacity: 0.35; cursor: default; }
  .icon-btn.active {
    background: rgba(255,255,255,0.22);
    border-color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
  }

  .msg {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    font-size: 10.5px; color: #bbb; background: rgba(20,20,20,0.9);
    border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; padding: 6px 10px;
    max-width: 200px; text-align: right; pointer-events: none;
    opacity: 0; transform: translateY(-4px); transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: normal;
  }
  .msg.show { opacity: 1; transform: translateY(0); }
  .btn-row { position: relative; }

  .bottom-row { display: flex; justify-content: flex-start; }
  .info-panel {
    pointer-events: none; font-variant-numeric: tabular-nums;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.28);
    border-radius: 8px; padding: 6px 9px; font-size: 10px; line-height: 1.45;
    color: #e6e6e6; min-width: 0; max-width: 46vw; backdrop-filter: blur(2px);
  }
  .info-panel .sat-name {
    font-size: 10.5px; font-weight: 700; color: #fff; letter-spacing: 0.02em;
    display: flex; align-items: center; gap: 5px; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .info-panel .sat-name .pulse {
    width: 5px; height: 5px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 5px 1px rgba(255,255,255,0.9); animation: pulse 2s ease-in-out infinite; flex: none;
  }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  .info-panel .row { display: flex; justify-content: space-between; gap: 10px; color: #cfcfcf; }
  .info-panel .row b { color: #fff; font-weight: 600; }

  .label {
    position: fixed; pointer-events: none; transform: translate(-50%, -130%);
    font-size: 10.5px; color: #fff; background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.45); border-radius: 5px; padding: 2px 6px;
    white-space: nowrap; letter-spacing: 0.02em; transition: opacity 0.15s ease;
    display: none;
  }
  .label.user-label { border-color: rgba(255,255,255,0.3); color: #ddd; }

  .trail-tooltip {
    position: fixed; pointer-events: none; transform: translate(-50%, -130%);
    font-size: 11px; color: #fff; background: rgba(20,8,8,0.92);
    border: 1px solid rgba(255,110,90,0.7); border-radius: 6px; padding: 4px 8px;
    white-space: nowrap; letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
    opacity: 0; transition: opacity 0.15s ease; z-index: 5;
  }
  .trail-tooltip.show { opacity: 1; }

  .loading-overlay {
    position: fixed; inset: 0; background: #000; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 10px; z-index: 50; transition: opacity 0.4s ease;
  }
  .loading-overlay .ring { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); border-top-color: #fff; animation: spin 0.9s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-overlay span { font-size: 11px; color: #888; letter-spacing: 0.05em; text-transform: uppercase; }

  .fallback {
    position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
    background: #000; color: #ccc; font-size: 13px; padding: 30px; text-align: center; box-sizing: border-box;
  }

  @media (max-width: 380px) {
    .info-panel { max-width: 58vw; }
  }