/* TriviaRush unified creator drawer — v1.1.0-beta.7.1 */
.creator-layout { display: block !important; min-height: 100vh; }
.app-main { width: 100%; min-width: 0; }
.sidebar.app-shell-drawer {
  position: fixed !important; inset: 0 auto 0 0 !important; width: min(360px,90vw) !important; height: 100vh !important;
  z-index: 120 !important; padding: 18px !important; border: 0 !important; border-right: 1px solid rgba(69,222,255,.52) !important;
  background: linear-gradient(180deg,#0c1530,#060a17 74%) !important; box-shadow: 24px 0 80px rgba(0,0,0,.45);
  transform: translateX(-105%); transition: transform .22s ease; display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar.app-shell-drawer.open { transform: translateX(0); }
.app-shell-scrim { position: fixed; inset: 0; z-index: 119; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); }
body.app-shell-open { overflow: hidden; }
.app-shell-drawer .shell-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.app-shell-drawer .shell-drawer-logo { width: 164px; max-height: 46px; object-fit: contain; object-position: left center; }
.app-shell-close, .app-shell-menu { border: 1px solid rgba(69,222,255,.24); background: rgba(255,255,255,.035); color: #f7fbff; cursor: pointer; display: inline-grid; place-items: center; }
.app-shell-close { width: 38px; height: 38px; border-radius: 11px; font-size: 25px; line-height: 1; }
.app-shell-menu { width: 44px; height: 44px; border-radius: 12px; padding: 10px; gap: 4px; flex: 0 0 auto; }
.app-shell-menu span { width: 22px; height: 2px; display: block; border-radius: 99px; background: #f7fbff; }
.app-shell-menu:hover, .app-shell-close:hover { border-color: #27e8ff; background: rgba(39,232,255,.1); }
.shell-live-card { margin-top: 20px; padding: 16px; border: 1px solid rgba(69,222,255,.24); border-radius: 15px; background: rgba(0,0,0,.22); }
.shell-live-card > span { display: block; color: #27e8ff; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.shell-live-card strong { display: block; margin-top: 8px; font-size: 18px; }
.shell-live-card small { display: block; margin-top: 5px; color: #9eabc9; font-size: 12px; }
.shell-drawer-nav { display: grid; gap: 20px; margin-top: 24px; }
.shell-drawer-group { display: grid; gap: 5px; }
.shell-drawer-label { color: #667493; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; padding: 0 10px 6px; }
.shell-drawer-group a { display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid transparent; border-radius: 11px; color: #9eabc9; font-weight: 750; text-decoration: none; }
.shell-drawer-group a:hover { color: #f7fbff; background: rgba(39,232,255,.07); border-color: rgba(39,232,255,.16); }
.shell-drawer-group a.active { color: #27e8ff; background: rgba(39,232,255,.1); border-color: rgba(39,232,255,.25); }
.shell-drawer-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.035); color: #27e8ff; font-size: 12px; font-weight: 900; }
.shell-drawer-logout { margin-top: auto; min-height: 44px; border: 1px solid rgba(255,89,102,.34); border-radius: 12px; background: rgba(255,89,102,.08); color: #ff98a1; cursor: pointer; font-weight: 850; }
.topbar { gap: 14px; padding-left: 18px !important; }
.topbar .app-shell-title-wrap { min-width: 0; flex: 1; }
.topbar > .app-shell-menu + * { min-width: 0; }
@media(max-width:760px){
  .sidebar.app-shell-drawer { top: 0 !important; bottom: 0 !important; width: min(340px,92vw) !important; height: 100vh !important; padding: 16px !important; border-top: 0 !important; }
  .topbar { min-height: 64px !important; padding: 8px 12px !important; flex-wrap: wrap; }
  .topbar .live-chip, .topbar .mission-top-actions { max-width: 100%; overflow-x: auto; }
  .page { padding-bottom: 70px !important; }
}