/* Chinese SPA — mobile drawer overlay. Sidebar = .w-64.bg-white.border-r */
@media (max-width: 820px){
  /* Hide the sidebar by default; slide it in when body has .cnav-open */
  .w-64.bg-white.border-r{
    position:fixed!important;
    top:0;left:0;bottom:0;
    width:78vw!important;max-width:300px;
    z-index:9998;
    box-shadow:6px 0 24px rgba(0,0,0,.18);
    transform:translateX(-100%);
    transition:transform .25s ease;
    overflow-y:auto;
  }
  body.cnav-open .w-64.bg-white.border-r{ transform:translateX(0); }
  /* Backdrop */
  #cnav-back{
    position:fixed;inset:0;background:rgba(15,23,42,.45);
    z-index:9997;opacity:0;pointer-events:none;transition:opacity .2s;
  }
  body.cnav-open #cnav-back{opacity:1;pointer-events:auto;}
  /* Hamburger button */
  #cnav-btn{
    position:fixed;top:60px;left:10px;z-index:9996;
    width:42px;height:42px;border-radius:10px;
    background:#1a4d8f;color:#fff;border:none;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
    font-size:20px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  /* Main pane fills full width on mobile */
  .flex.h-screen > *:not(.w-64){ min-width:0; }
  .flex.h-screen{ overflow-x:hidden; }
}
@media (min-width: 821px){
  #cnav-btn,#cnav-back{display:none!important;}
}