:root {
  --sidebar-width: 230px;
}
body.sidebar-collapsed {
  --sidebar-width: 58px;
}

.topbar {
  transition: width 0.2s ease, margin-left 0.2s ease;
}
.main-content {
  transition: padding-left 0.2s ease, padding-right 0.2s ease;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: var(--sidebar-width);
  padding: 22px 14px 18px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease, padding 0.2s ease, background 0.3s;
  background: #ffffff;
  border-right: 1px solid #f0f0f0;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.sidebar::-webkit-scrollbar {
  display: none;
}
.sidebar.collapsed {
  padding: 22px 8px 18px;
}

.logo-row { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid #f0f0f0; min-height: 36px; overflow: hidden; }
.logo-dot { width: 10px; height: 10px; border-radius: 50%; background: #e8297a; flex-shrink: 0; }
.logo-name { font-size: 16px; font-weight: 600; color: #1a1a1a; letter-spacing: -0.3px; white-space: nowrap; transition: opacity 0.15s; }
.core-badge { font-size: 9px; font-weight: 600; letter-spacing: 0.6px; color: #d4207a; background: #fdf0f7; border: 1px solid #f2c0db; border-radius: 20px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; }
.sidebar.collapsed .logo-name { opacity: 0; width: 0; overflow: hidden; }
.sidebar.collapsed .core-badge { opacity: 0; width: 0; overflow: hidden; padding: 0; border: none; }

.section-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #b0adb8; padding: 0 10px; margin-bottom: 2px; margin-top: 18px; white-space: nowrap; transition: opacity 0.15s, height 0.15s, margin 0.15s; overflow: hidden; height: 16px; }
.sidebar.collapsed .section-label { opacity: 0; height: 0; margin: 0; }

.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 400; color: #6b6878; white-space: nowrap; margin: 1px 0; transition: background 0.1s, color 0.1s; min-height: 38px; position: relative; text-decoration: none; }
.nav-item:hover { background: rgba(0,0,0,0.05); color: #1a1a1a; }
.nav-item.active { background: rgba(232,41,122,0.1); color: #d4207a; }
.nav-item.disabled { color: #c0bdc8; cursor: default; pointer-events: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 9px 0; gap: 0; }

.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #9a97a5; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active .icon { stroke: #e8297a; }
.nav-item.disabled .icon { stroke: #c0bdc8; }

.nav-label { transition: opacity 0.15s; overflow: hidden; white-space: nowrap; }
.sidebar.collapsed .nav-label { opacity: 0; width: 0; }
.soon-badge { margin-left: auto; font-size: 9.5px; font-weight: 500; color: #b0adb8; background: #f5f4f7; border: 1px solid #ebe9ef; border-radius: 20px; padding: 2px 7px; white-space: nowrap; }
.sidebar.collapsed .soon-badge { opacity: 0; width: 0; margin: 0; padding: 0; overflow: hidden; border: none; }

.bottom-section { margin-top: auto; display: flex; flex-direction: column; }
.divider { height: 1px; margin: 10px 0; background: #f0eef4; }

.theme-btn { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: #b0adb8; border: none; background: none; width: 100%; min-height: 38px; }
.theme-btn:hover { background: rgba(0,0,0,0.05); }
.sidebar.collapsed .theme-btn { justify-content: center; padding: 9px 0; gap: 0; }
.theme-btn-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; min-width: 14px; background: #e8297a; }
.theme-btn-label { transition: opacity 0.15s; overflow: hidden; white-space: nowrap; }
.sidebar.collapsed .theme-btn-label { opacity: 0; width: 0; }

.collapse-btn { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: #b0adb8; border: none; background: none; width: 100%; min-height: 38px; }
.collapse-btn:hover { background: rgba(0,0,0,0.05); }
.sidebar.collapsed .collapse-btn { justify-content: center; padding: 9px 0; gap: 0; }
.collapse-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #b0adb8; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.sidebar.collapsed .collapse-icon { transform: rotate(180deg); }
.collapse-btn-label { transition: opacity 0.15s; overflow: hidden; white-space: nowrap; }
.sidebar.collapsed .collapse-btn-label { opacity: 0; width: 0; }

.popover { display: none; position: fixed; width: 168px; background: #fff; border: 1px solid #e0dded; border-radius: 12px; padding: 11px; box-shadow: 0 12px 32px rgba(0,0,0,0.16); z-index: 1050; flex-direction: column; gap: 10px; }
.popover.open { display: flex; }
.pop-title { font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #b0adb8; }
.swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 7px; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s; }
.swatch:hover { transform: scale(1.1); }
.swatch.selected { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.custom-row { display: flex; align-items: center; gap: 7px; padding-top: 8px; border-top: 1px solid #f0eef4; }
.custom-row label { font-size: 11px; color: #9a97a5; cursor: pointer; margin: 0; }
#customColor { width: 24px; height: 24px; border: 1.5px solid #e0dded; border-radius: 6px; cursor: pointer; padding: 0; }