:root{
  --tg-btn:  var(--tg-theme-button-color,     #2481cc);
  --tg-btnT: var(--tg-theme-button-text-color,#ffffff);
}

html,body{height:100%;overscroll-behavior:none}
body{-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch}

html.tg-app body{
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

@media (max-width:900px){
  /*
   * Real Linaria class names extracted from Twenty bundle:
   *   s1cjr53l = StyledLeftPanelWrapper  (sidebar)
   *   slp6lnv  = StyledNavigationDrawerWrapper (nav inside sidebar)
   *   s17t7imy = StyledResizeHandleBar   (hide on mobile)
   *   s10s5rxt / s1g8s9g9 = StyledMainContainer
   *   sxho7x6  = StyledTopBarContainer
   *   s1nbwame / sltii1y = StyledLayout (root flex container)
   * We also add [data-tg-sidebar] via JS for future-proofing.
   */

  /* Hide resize handle */
  .s17t7imy { display:none!important; }

  /* === SIDEBAR === */
  .s1cjr53l,
  [data-tg-sidebar] {
    position:fixed!important;
    top:0!important;left:0!important;bottom:0!important;
    width:75vw!important;max-width:280px!important;
    transform:translateX(-110%)!important;
    transition:transform 220ms cubic-bezier(.4,0,.2,1)!important;
    z-index:9998!important;
    box-shadow:none!important;
    overflow-y:auto!important;
  }
  body.tg-sidebar-open .s1cjr53l,
  body.tg-sidebar-open [data-tg-sidebar] {
    transform:translateX(0)!important;
    box-shadow:0 0 32px rgba(0,0,0,.45)!important;
  }

  /* Dim backdrop */
  body.tg-sidebar-open::after{
    content:'';position:fixed;inset:0;
    background:rgba(0,0,0,.45);
    z-index:9997;
    pointer-events:auto;
  }

  /* === MAIN CONTENT fills viewport === */
  .s10s5rxt,
  .s1g8s9g9,
  [data-tg-main] {
    margin-left:0!important;
    min-width:0!important;
    width:100%!important;
    flex:1 1 auto!important;
  }

  /* Top bar: leave room for hamburger */
  .sxho7x6 {
    padding-left:44px!important;
    min-height:46px!important;
    box-sizing:border-box!important;
  }

  /* Touch targets */
  button,a,[role="button"]{min-height:40px}
  .sauq8y3 { min-height:40px!important; }
  input,textarea,select{font-size:16px!important}

  /* Modal fullscreen */
  [role="dialog"]{
    max-width:100vw!important;
    max-height:90vh!important;
    margin:0!important;
    border-radius:12px 12px 0 0!important;
    bottom:0!important;top:auto!important;
    position:fixed!important;
  }
}

/* === HAMBURGER BUTTON === */
#tg-mobile-menu{
  display:none;
  position:fixed;top:6px;left:8px;z-index:9999;
  width:36px;height:36px;
  border-radius:8px;border:none;cursor:pointer;
  background:var(--tg-btn);
  color:var(--tg-btnT);
  font-size:20px;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  align-items:center;justify-content:center;
  padding:0;
}
@media(max-width:900px){
  #tg-mobile-menu{display:flex}
}

/* Hide vertical separator between panel and main */
@media(max-width:900px){
  .s194eghi{display:none!important}
}