.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 0;position:sticky;top:0;background:var(--bg);z-index:1000}
  .topbar .title{margin:0;font-size:20px}
  .menu-wrap{position:relative}
  .dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--border);
            border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08);display:none;min-width:180px;overflow:hidden}
  .dropdown.open{display:block}
  .dropdown .menu-item{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:transparent;cursor:pointer}
  .dropdown .menu-item:hover{background:#f8fafc}
  /* Mobile adaptation */
@media (max-width: 640px){
  :root{ --ui-scale: 0.9; --wheel-max: 100vh; }

  .wrap{ padding:0 10px }
  .card{ padding:12px; margin:10px 0 }
  .row{ gap:8px }
  .wheels-row .col{ flex:1 1 100%; min-width:0 }

  /* карточки с колёсами — без боковых полей/радиусов и без левого «зазора» */
  #natalWheelCard,
  #rightWheelCard,
  #biWheelCard,
  #compositeWheelCard{
    padding-left:0; padding-right:0;
    margin-left:0;  margin-right:0;
    border-left:0;  border-right:0;
    border-radius:0;
  }
  /* шапки карточек оставляем с небольшим внутренним отступом */
  #natalWheelCard .whead,
  #rightWheelCard .whead,
  #biWheelCard .whead,
  #compositeWheelCard .whead{ padding-inline:12px; }

  /* full-bleed для самого колеса, симметрично по краям */
  #natalWheelCard .wheel-shell,
  #rightWheelCard .wheel-shell,
  #biWheelCard .wheel-shell,
  #compositeWheelCard .wheel-shell{
    width:100vw !important;              /* можно заменить на inline-size, если предпочитаешь */
    margin-left: calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
  }

  /* на всякий случай: снять старый сдвиг только у К1, если он где-то всплывёт */
  #natalWheelCard .wheel-shell{ margin-left: calc(50% - 50vw) !important; }
}