/* Shared luxury sidebar. Studio Mix Gold is the source of truth. */
.sidebar {
  width: 240px !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px 16px !important;
  background: #141317 !important;
  border-right: 1px solid rgba(196, 164, 102, .28) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  scrollbar-width: none !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.sidebar::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

/* .sidebar-top scrolls its own nav area so it never overlaps .sidebar-bottom
   (logo + nav grow to fill, bottom card stack stays pinned to the bottom). */.sidebar-top { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; scrollbar-width: none !important; }
.sidebar-top::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

.logo-area { display: flex !important; align-items: center !important; gap: 9px !important; margin-bottom: 12px !important; padding-left: 2px !important; color: #f2eee4 !important; text-decoration: none !important; }
.logo-area img { width: 50px !important; height: 36px !important; object-fit: contain !important; filter: drop-shadow(0 0 10px rgba(201, 166, 99, .45)) !important; }
.logo-text h1 { margin: 0 !important; max-width: 128px !important; color: #f2eee4 !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 1px !important; line-height: 1.05 !important; }
.logo-text h1 span { color: #c9a663 !important; }
.logo-text p { margin: 3px 0 0 !important; color: #bdb7aa !important; font-size: 7.5px !important; letter-spacing: 1.2px !important; line-height: 1.2 !important; }

.nav-links { display: flex !important; flex-direction: column !important; gap: 1px !important; }
.nav-links .nav-item { display: flex !important; align-items: center !important; gap: 12px !important; height: 32px !important; min-height: 32px !important; padding: 7px 14px !important; border: 0 !important; border-left: 3px solid transparent !important; border-radius: 6px !important; background: transparent !important; color: #bdb7aa !important; font-size: 13px !important; font-weight: 500 !important; line-height: normal !important; text-align: left !important; }
.nav-links .nav-item i { width: 16px !important; flex: 0 0 16px !important; text-align: center !important; opacity: .88 !important; }
.nav-links .nav-item:hover, .nav-links .nav-item.active { background: #18171b !important; color: #f2eee4 !important; }
.nav-links .nav-item.active { border-left-color: #c9a663 !important; border-top-left-radius: 2px !important; border-bottom-left-radius: 2px !important; }
.nav-chip, .pro-badge { margin-left: auto !important; border: 1px solid rgba(201, 166, 99, .5) !important; border-radius: 999px !important; padding: 2px 8px !important; background: rgba(201, 166, 99, .2) !important; color: #e6d3a4 !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1.2 !important; box-shadow: 0 0 12px rgba(201, 166, 99, .16) !important; }
.pro-badge { margin-left: 0 !important; border-radius: 3px !important; padding: 1px 4px !important; }

.sidebar-bottom { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.user-panel { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 43px !important; padding-top: 8px !important; border-top: 1px solid rgba(196, 164, 102, .28) !important; gap: 12px !important; }
.user-info { display: flex !important; align-items: center !important; min-width: 0 !important; gap: 10px !important; }
.user-panel .avatar { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; flex: 0 0 32px !important; border-radius: 50% !important; background: #c9a663 !important; color: #0a0a0c !important; font-size: 12px !important; font-weight: 700 !important; }
.user-name { max-width: 118px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: #f2eee4 !important; font-size: 12px !important; font-weight: 600 !important; line-height: normal !important; }
.user-plan { color: #bdb7aa !important; font-size: 10px !important; line-height: normal !important; }
.logout-icon-btn { display: grid !important; place-items: center !important; width: 32px !important; height: 32px !important; flex: 0 0 32px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #bdb7aa !important; }
.logout-icon-btn:hover { background: rgba(201, 166, 99, .12) !important; color: #f2eee4 !important; box-shadow: 0 0 18px rgba(201, 166, 99, .18) !important; }

.plan-summary-card { margin: 0 !important; padding: 12px 13px !important; border: 2px solid #c9a663 !important; border-radius: 18px !important; background: #141317 !important; color: #f2eee4 !important; box-shadow: 0 0 0 1px rgba(201, 166, 99, .08), inset 0 0 22px rgba(0, 0, 0, .2) !important; }
.plan-summary-head { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 8px !important; }
.plan-summary-title { color: #e6d3a4 !important; font-size: 17px !important; font-weight: 1000 !important; font-style: italic !important; letter-spacing: -.02em !important; line-height: 1 !important; }
.plan-summary-expire { color: #8d8d8d !important; font-size: 10px !important; font-weight: 1000 !important; font-style: italic !important; line-height: 1.08 !important; text-align: right !important; white-space: nowrap !important; }
.plan-summary-expire small { display: block !important; margin-top: 2px !important; color: #777 !important; font-size: 7px !important; line-height: 1.05 !important; }
.plan-summary-storage, .plan-summary-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important; align-items: end !important; gap: 8px !important; }
.plan-summary-storage { gap: 6px !important; margin-bottom: 5px !important; }
.plan-summary-label, .plan-summary-row .plan-summary-label { color: #868686 !important; font-size: 15px !important; font-weight: 1000 !important; font-style: italic !important; letter-spacing: -.02em !important; line-height: .98 !important; }
.plan-summary-label small { display: block !important; margin-top: 2px !important; color: #7a7a7a !important; font-size: 7px !important; font-style: normal !important; font-weight: 900 !important; line-height: 1.05 !important; letter-spacing: 0 !important; }
.plan-summary-value { max-width: 112px !important; color: #8d8d8d !important; font-size: 13px !important; font-weight: 1000 !important; font-style: italic !important; line-height: 1.02 !important; text-align: right !important; white-space: nowrap !important; }
.plan-summary-row .plan-summary-value { max-width: 98px !important; font-size: 14px !important; }
.plan-summary-bar { height: 6px !important; margin: 5px 0 8px !important; border-radius: 999px !important; background: rgba(255, 255, 255, .08) !important; overflow: hidden !important; }
.plan-summary-fill { display: block !important; height: 100% !important; background: linear-gradient(90deg, #8c6f39, #c9a663, #e6d3a4) !important; border-radius: 999px !important; }
.plan-summary-metrics { display: grid !important; gap: 6px !important; }

.ai-box { position: relative !important; padding: 14px !important; border: 1px solid rgba(201, 166, 99, .42) !important; border-radius: 8px !important; background: linear-gradient(135deg, #18140d 0%, #121114 100%) !important; }
.ai-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 6px !important; color: #e6d3a4 !important; font-size: 11px !important; font-weight: 700 !important; }
.ai-box p { margin: 0 !important; color: #bdb7aa !important; font-size: 11px !important; line-height: 1.4 !important; }
.smart-master-btn { width: 100% !important; margin-top: 10px !important; padding: 8px !important; border: 1px solid rgba(201, 166, 99, .55) !important; border-radius: 6px !important; background: transparent !important; color: #e6d3a4 !important; font-size: 11px !important; font-weight: 600 !important; line-height: normal !important; }

.ai-header-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: #e6d3a4 !important; text-decoration: none !important; cursor: pointer !important; transition: color .15s !important; }
.ai-header-link:hover { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px !important; }