:root{ --sidebar-w: 292px; }

  .brand-logo{
    display:block;
    height:28px;
    width:auto;
    max-width:160px;
  }
  .sidebar-logo{
    display:block;
    width:100%;
    height:auto;
    max-width:152px;
  }

  .sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:16px 12px 12px;
    box-sizing:border-box;
    background:var(--bg);
    border-right:1px solid var(--border);
    z-index:1100;
    overflow:hidden;
  }
  .sidebar-top{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .sidebar-brand{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding-top:2px;
  }
  .sidebar-close{
    display:none;
    width:34px;
    min-width:34px;
    height:34px;
    border-radius:999px;
    border:0;
    background:var(--card);
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .sidebar-nav > .btn,
  .sidebar-nav > div,
  #sidebarToolsHost,
  #sidebarToolsHost .tools-wrap{
    width:100%;
  }
  .sidebar-nav .btn,
  #sidebarToolsHost #toolsBtn,
  #sidebarAccountHost .btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:42px;
    padding:10px 12px;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #sidebarToolsHost .tools-wrap{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  #sidebarToolsHost .tools-quick-row,
  #sidebarToolIcons{ display:none !important; }
  #sidebarToolsHost #toolsBtn{ display:flex; }
  .sidebar-section{ display:flex; flex-direction:column; gap:8px; }
  #sidebarBackHost:empty{ display:none; }
  #sidebarBackHost > #backToDataBtn{
    width:100%;
    margin-right:0 !important;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:42px;
    padding:10px 12px;
    text-align:left;
  }

  .sidebar-history-wrap{
    flex:1;
    min-height:220px;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--card);
    overflow:hidden;
  }
  .sidebar-history-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    padding:12px 12px 8px;
  }
  .sidebar-history-meta{
    margin-top:4px;
    font-size:12px;
    color:var(--muted);
  }
  .sidebar-history-actions{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .sidebar-history-list{
    flex:1;
    min-height:0;
    overflow:auto;
    padding:0 8px 8px;
    overscroll-behavior:contain;
  }
  #sidebarHistoryList .hist-item{
    display:flex;
    align-items:center;
    gap:6px;
    padding:2px 0;
    border:0;
    border-radius:0;
    margin:0;
    background:transparent;
  }
  #sidebarHistoryList .hist-item:hover{
    border-color:transparent;
    background:transparent;
  }
  #sidebarHistoryList .hist-main{
    flex:1;
    min-width:0;
    text-align:left;
    background:transparent;
    border:0;
    padding:7px 8px;
    cursor:pointer;
    border-radius:10px;
  }
  #sidebarHistoryList .hist-main:hover{
    background:rgba(127,127,127,.08);
  }
  #sidebarHistoryList .hist-line{
    display:block;
    font-size:14px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #sidebarHistoryList .hist-del{
    width:28px;
    min-width:28px;
    height:28px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
  }

  .sidebar-footer{
    padding-top:10px;
    border-top:1px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  #sidebarAccountHost{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .sidebar-backdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.34);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:1090;
  }
  .mobile-sidebar-toggle{
    position:fixed;
    left:10px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
    width:48px;
    height:48px;
    border-radius:999px;
    border:0;
    background:var(--card);
    box-shadow:0 12px 30px rgba(15,23,42,.18);
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    z-index:1095;
    cursor:pointer;
  }
  .mobile-sidebar-toggle .line{
    width:18px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    display:block;
  }

  @media (min-width: 641px){
    .sidebar{
      width:var(--sidebar-w);
      box-shadow:none;
      transform:none !important;
    }

    .topbar{ display:none !important; }

    .wrap{
      max-width:none;
      margin:0;
      padding:0 16px 24px var(--sidebar-w);
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .wrap .card{ margin:0; }
    body.wheels-open .wrap{ display:none !important; }

    #natalWheelCard,
    #rightWheelCard,
    #biWheelCard,
    #compositeWheelCard{
      border:0 !important;
      border-radius:0 !important;
      box-shadow:none !important;
      padding:0 !important;
      background:transparent !important;
    }

    body > .card{ margin:0 16px 0 var(--sidebar-w) !important; }
    body > #relocCard,
    body > #aspectFinderCard,
    body > #natalWheelCard,
    body > #rightWheelCard,
    body > #biWheelCard,
    body > #compositeWheelCard,
    body > #aiCard{
      margin:0 16px 0 var(--sidebar-w) !important;
    }

    #natalWheelCard .wheel-shell,
    #rightWheelCard .wheel-shell,
    #biWheelCard .wheel-shell,
    #compositeWheelCard .wheel-shell{
      margin-left:0 !important;
      margin-right:auto !important;
      max-inline-size:100%;
    }

    .wheel-stage > .wheel-switcher[data-wheel-switcher]{ display:none !important; }

    #sidebarToolsHost .tools-dropdown{
      left:calc(100% + 10px);
      right:auto;
      top:0;
    }

    #natalWheelCard #backToDataBtn,
    #rightWheelCard #backToDataBtnRight,
    #biWheelCard #backToDataBtnBi,
    #compositeWheelCard #backToDataBtnComposite,
    #rightWheelCard #backToDataBtnRight2,
    #biWheelCard #backToDataBtnBi2,
    #compositeWheelCard #backToDataBtnComposite2{
      display:none !important;
    }

    .sidebar-backdrop,
    .mobile-sidebar-toggle{ display:none !important; }
  }

  @media (max-width: 640px){
    body.sidebar-open{ overflow:hidden; }

    .sidebar{
      width:min(86vw, 320px);
      max-width:320px;
      transform:translateX(calc(-100% - 16px));
      transition:transform .22s ease;
      box-shadow:0 14px 40px rgba(15,23,42,.25);
    }
    body.sidebar-open .sidebar{ transform:translateX(0); }
    body.sidebar-open .sidebar-backdrop{
      opacity:1;
      pointer-events:auto;
    }

    .mobile-sidebar-toggle{ display:flex; }
    body.sidebar-open .mobile-sidebar-toggle{
      opacity:0;
      pointer-events:none;
    }

    .sidebar-close{
      display:inline-flex;
      align-self:flex-start;
    }

    .topbar .menu-wrap{ display:none !important; }

    #sidebarToolsHost .tools-dropdown{
      left:0;
      right:auto;
      top:calc(100% + 8px);
    }
  }