:root { --secondary-studio-sidebar: 214px; }
body.secondary-studio-active {
  padding-left: var(--secondary-studio-sidebar);
  background: #111114 !important;
}
body.secondary-studio-active.secondary-sidebar-collapsed { --secondary-studio-sidebar: 72px; }
.secondary-studio-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
  width: var(--secondary-studio-sidebar);
  display: flex;
  flex-direction: column;
  border-right: 1px solid #34343d;
  background: #17171b;
  color: #f5f2f6;
  transition: width .18s ease, transform .18s ease;
}
.secondary-studio-brand { min-height: 74px; display: flex; align-items: center; padding: 18px 20px; border-bottom: 1px solid #34343d; font: 800 16px/1 "Segoe UI", sans-serif; }
.secondary-studio-brand span { color: #ff376b; }
.secondary-studio-collapse { margin: 12px 14px 8px; min-height: 36px; border: 1px solid #47414b; border-radius: 7px; background: transparent; color: #c8c1cb; cursor: pointer; }
.secondary-studio-label { margin: 14px 25px 8px; color: #777482; font-size: 9px; letter-spacing: 1.2px; }
.secondary-studio-nav { display: grid; gap: 5px; padding: 0 12px; }
.secondary-studio-nav a { min-height: 43px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 7px; color: #bbb6c2; text-decoration: none; font: 500 13px/1.3 "Leelawadee UI", "Segoe UI", sans-serif; }
.secondary-studio-nav a:hover { background: #232329; color: #fff; }
.secondary-studio-nav a.active { background: #3a2531; color: #ffadc5; box-shadow: inset 3px 0 #ff376b; }
.secondary-studio-icon { width: 20px; flex: 0 0 20px; text-align: center; font-size: 17px; }
.secondary-studio-footer { margin-top: auto; padding: 16px 20px; border-top: 1px solid #34343d; color: #777482; font-size: 10px; }
.secondary-studio-switch { margin: 10px 14px 16px; min-height: 37px; border: 1px solid #5a4650; border-radius: 7px; background: #2d252b; color: #fff; cursor: pointer; font-weight: 700; }
.secondary-studio-mobile { display: none; position: fixed; left: 12px; bottom: 14px; z-index: 210; min-height: 42px; padding: 8px 13px; border: 1px solid #5a5360; border-radius: 9px; background: #242329; color: #fff; cursor: pointer; }
.secondary-studio-backdrop { display: none; }
.secondary-sidebar-collapsed .secondary-studio-name,
.secondary-sidebar-collapsed .secondary-studio-label,
.secondary-sidebar-collapsed .secondary-studio-footer { display: none; }
.secondary-sidebar-collapsed .secondary-studio-brand,
.secondary-sidebar-collapsed .secondary-studio-nav a { justify-content: center; padding-inline: 0; }
.secondary-sidebar-collapsed .secondary-studio-nav { padding-inline: 9px; }
body.secondary-studio-active .wrap,
body.secondary-studio-active .topbar-inner { max-width: 1500px; }
body.secondary-studio-active .panel,
body.secondary-studio-active .card,
body.secondary-studio-active .hero-card { border-color: #34343d !important; background-color: #1b1b20 !important; box-shadow: none !important; }
body.secondary-studio-active .topbar { background: rgba(24,24,28,.96) !important; border-color: #34343d !important; }

@media (max-width: 820px) {
  body.secondary-studio-active { padding-left: 0; }
  .secondary-studio-sidebar { width: 258px; transform: translateX(-100%); visibility: hidden; }
  .secondary-studio-sidebar.drawer-open { transform: translateX(0); visibility: visible; box-shadow: 18px 0 70px rgba(0,0,0,.55); }
  .secondary-studio-mobile { display: block; }
  .secondary-studio-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 180; background: rgba(0,0,0,.72); }
}
@media (prefers-reduced-motion: reduce) { .secondary-studio-sidebar { transition: none; } }