/* Overview: full-width workspace with the sidebar's quiet slate surfaces. */
body.dashboard-page #overview {
  --overview-surface: #14191f;
  --overview-raised: #1a2028;
  --overview-line: #303641;
  --overview-accent: #a383e8;
  --overview-muted: #c5ced9;
  --overview-text: #f3f4f7;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-top: 28px;
}
body.dashboard-page #overview svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.dashboard-page #overview :is(.overview-hero,.overview-stats .stat-card,.overview-primary-grid > .panel,.overview-secondary-grid > .panel) {
  min-width: 0;
  border: 1px solid var(--overview-line)!important;
  border-radius: 16px;
  background: var(--overview-card-bg,var(--overview-surface))!important;
  box-shadow: none!important;
}
body.dashboard-page #overview :is(.overview-hero,.stat-card,.creation-quick-panel,.social-spotlight,.feedback-panel)::before,
body.dashboard-page #overview :is(.creation-quick-panel,.social-spotlight,.feedback-panel)::after { content: none!important; }
body.dashboard-page #overview .overview-hero {
  --overview-card-bg: linear-gradient(105deg,#14191f 35%,#1a1d28);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 86px;
  margin: 0 0 16px;
  padding: 16px 24px;
}
body.dashboard-page #overview .overview-hero::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 0;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: var(--overview-accent);
}
body.dashboard-page #overview .overview-hero-copy { min-width: 0; }
body.dashboard-page #overview :is(.eyebrow,.overview-kicker,.social-spotlight > div:first-child > span) {
  color: var(--overview-accent);
  font-size: 11px;
  font-weight: 700;
}
body.dashboard-page #overview .overview-hero .eyebrow { margin: 0 0 5px; }
body.dashboard-page #overview .overview-hero h1 {
  margin: 0 0 5px;
  color: var(--overview-text);
  font-size: clamp(21px,2vw,25px);
  font-weight: 800;
  line-height: 1.55;
}
body.dashboard-page #overview .overview-hero h1 span { color: var(--overview-accent); font-size: .78em; }
body.dashboard-page #overview .overview-hero .muted { margin: 0; color: var(--overview-muted); font-size: 13px; line-height: 1.8; }
body.dashboard-page #overview :is(.creation-quick-button,.overview-empty button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 41px;
  padding: 8px 14px;
  border: 1px solid #6b568c;
  border-radius: 10px;
  background: #292338;
  box-shadow: none;
  color: #f2eaff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transform: none;
}
body.dashboard-page #overview :is(.creation-quick-button,.overview-empty button):hover {
  border-color: var(--overview-accent);
  background: #352b49;
  box-shadow: none;
  color: #fff;
  transform: none;
}
body.dashboard-page #overview .creation-quick-button svg { width: 17px; height: 17px; }
body.dashboard-page #overview .overview-stats {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 12px;
  margin: 0 0 16px;
}
body.dashboard-page #overview .overview-stats .stat-card {
  grid-column: span 4;
  display: grid;
  grid-template-areas: 'metric icon';
  grid-template-columns: minmax(0,1fr) 48px;
  align-items: start;
  gap: 12px;
  min-height: 112px;
  padding: 16px;
  transition: border-color .18s ease,background-color .18s ease;
}
body.dashboard-page #overview .overview-stats .stat-card:hover { border-color: #6b568c!important; background: var(--overview-raised)!important; transform: none; }
body.dashboard-page #overview .overview-stats .stat-icon,
body.dashboard-page #overview :is(.tip-glow,.feedback-orb) {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid #4b3d61;
  border-radius: 13px;
  background: #242030;
  box-shadow: none;
  color: var(--overview-accent);
}
body.dashboard-page #overview .overview-stats .stat-icon { grid-area: icon; }
body.dashboard-page #overview .overview-stats .stat-icon svg { width: 26px; height: 26px; }
body.dashboard-page #overview .overview-stats .stat-card > div:last-child { display: flex; flex-direction: column; grid-area: metric; min-width: 0; }
body.dashboard-page #overview .overview-stats .stat-card span { display: block; color: var(--overview-muted); font-size: 12px; line-height: 1.6; }
body.dashboard-page #overview .overview-stats .stat-card strong { order: -1; display: block; margin: 0 0 3px; color: var(--overview-text); font-size: 24px; font-weight: 800; line-height: 1.4; font-variant-numeric: tabular-nums; }
body.dashboard-page #overview .overview-stats .stat-card small { display: block; margin-top: 4px; color: #b7c0cc; font-size: 13px; line-height: 1.7; }
body.dashboard-page #overview .overview-stats .stat-card:nth-child(-n+2) { border-color: #514366!important; }
body.dashboard-page #overview .overview-primary-grid,
body.dashboard-page #overview .overview-secondary-grid { display: grid; gap: 16px; margin: 0 0 16px; }
body.dashboard-page #overview .overview-primary-grid { grid-template-columns: repeat(12,minmax(0,1fr)); }
body.dashboard-page #overview .overview-primary-grid > .creation-quick-panel { grid-column: span 4; }
body.dashboard-page #overview .overview-primary-grid > .activity-panel { grid-column: span 8; }
body.dashboard-page #overview .overview-secondary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
body.dashboard-page #overview .overview-secondary-grid > .panel { grid-column: auto; }
body.dashboard-page #overview .overview-primary-grid > .panel { min-height: 218px; padding: 22px; }
body.dashboard-page #overview .overview-secondary-grid > .panel { min-height: 166px; padding: 21px 22px; }
body.dashboard-page #overview .creation-quick-panel {
  --overview-card-bg: linear-gradient(115deg,#151a21 45%,#1c1b2b);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
body.dashboard-page #overview .creation-quick-copy { min-width: 0; }
body.dashboard-page #overview .creation-quick-panel .eyebrow { margin: 0 0 5px; }
body.dashboard-page #overview .creation-quick-panel h2 { margin: 0 0 8px; color: var(--overview-text); font-size: 20px; line-height: 1.6; }
body.dashboard-page #overview .creation-quick-panel p:not(.eyebrow) { max-width: 540px; margin: 0; color: var(--overview-muted); font-size: 13px; line-height: 1.9; }
body.dashboard-page #overview .creation-quick-panel .creation-quick-button { flex: none; min-height: 46px; padding-inline: 18px; border-color: #9b77e5; background: #8054d5; color: #fff; font-size: 14px; }
body.dashboard-page #overview .creation-quick-panel .creation-quick-button:hover { border-color: #b89af3; background: #7650c6; }
body.dashboard-page #overview .creation-quick-panel h2 { font-size: 22px; }
body.dashboard-page #overview .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 13px; }
body.dashboard-page #overview .overview-kicker { display: block; margin-bottom: 3px; }
body.dashboard-page #overview :is(.panel-heading,.social-spotlight,.tip-panel,.feedback-panel) h2 {
  margin: 0 0 4px;
  color: var(--overview-text);
  font-size: 16px;
  line-height: 1.6;
}
body.dashboard-page #overview :is(.panel-heading p,.social-spotlight p,.tip-panel p,.feedback-copy p) {
  margin: 0;
  color: var(--overview-muted);
  font-size: 13px;
  line-height: 1.9;
}
body.dashboard-page #overview :is(.text-btn,.social-spotlight a,.feedback-cta) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #cbb2fb;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
body.dashboard-page #overview :is(.text-btn,.social-spotlight a,.feedback-cta):hover { background: transparent; color: #e1d1ff; transform: none; }
body.dashboard-page #overview .activity-list { display: grid; gap: 2px; min-height: 156px; }
body.dashboard-page #overview .activity {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid var(--overview-line);
}
body.dashboard-page #overview .activity:last-child { border-bottom: 0; }
body.dashboard-page #overview .activity-order {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--overview-line);
  border-radius: 8px;
  background: var(--overview-raised);
  color: #bcb8c2;
  font-size: 10px;
}
body.dashboard-page #overview .activity-copy { min-width: 0; }
body.dashboard-page #overview .activity-main { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; }
body.dashboard-page #overview .activity strong { display: block; overflow: hidden; color: var(--overview-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
body.dashboard-page #overview .activity small { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; color: var(--overview-muted); font-size: 13px; line-height: 1.6; }
body.dashboard-page #overview .activity-action { min-height: 40px; padding: 8px 4px; border: 0; border-radius: 6px; background: transparent; color: #d9c3ff; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
body.dashboard-page #overview .activity-action:hover { background: #30283b; color: #fff; }
body.dashboard-page #overview .activity-action:focus-visible { outline: 2px solid var(--overview-accent); outline-offset: 2px; }
body.dashboard-page #overview .activity-status {
  padding: 2px 7px;
  border: 1px solid var(--overview-line);
  border-radius: 999px;
  background: var(--overview-raised);
  color: var(--overview-muted);
  font-size: 11px;
  white-space: nowrap;
}
body.dashboard-page #overview .activity[data-status="completed"] .activity-status { border-color: #32604d; background: #1d2b25; color: #82dab1; }
body.dashboard-page #overview .activity:is([data-status="processing"],[data-status="queued"]) .activity-status { border-color: #665188; background: #30283b; color: #cbb2fb; }
body.dashboard-page #overview .activity[data-status="awaiting_review"] .activity-status { border-color: #6b542e; background: #30291f; color: #e7c282; }
body.dashboard-page #overview .activity:is([data-status="failed"],[data-status="cancelled"]) .activity-status { border-color: #6c3e49; background: #322126; color: #eda3b3; }
body.dashboard-page #overview .overview-list-skeleton { display: grid; gap: 9px; padding-top: 4px; }
body.dashboard-page #overview .overview-list-skeleton i { height: 35px; border-radius: 8px; background: linear-gradient(90deg,#1a2028 25%,#252c36 50%,#1a2028 75%); background-size: 200% 100%; animation: overviewShimmer 1.5s infinite; }
body.dashboard-page #overview .overview-empty { display: grid; place-items: center; align-content: center; min-height: 168px; padding: 18px; text-align: center; }
body.dashboard-page #overview .overview-empty > span { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 10px; color: var(--overview-accent); }
body.dashboard-page #overview .overview-empty strong { font-size: 12px; }
body.dashboard-page #overview .overview-empty small { margin: 5px 0 12px; color: var(--overview-muted); font-size: 13px; }
body.dashboard-page #overview .usage-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; color: var(--overview-muted); font-size: 13px; }
body.dashboard-page #overview .usage-progress-heading strong { color: var(--overview-text); font-size: 13px; }
body.dashboard-page #overview .progress-track { height: 9px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #303641; }
body.dashboard-page #overview .progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#c6a7ff,#9e72ef); }
body.dashboard-page #overview .usage-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--overview-muted); font-size: 13px; }
body.dashboard-page #overview .overview-secondary-grid > :is(.tip-panel,.feedback-panel) { --overview-card-bg: #131820; border-color: #2a3038!important; min-height: 145px; }
body.dashboard-page #overview .social-spotlight { display: flex; align-items: center; justify-content: space-between; gap: 18px!important; overflow: hidden; }
body.dashboard-page #overview .overview-secondary-grid > .social-spotlight { min-height: 166px!important; padding: 21px 22px!important; }
body.dashboard-page #overview .social-spotlight > div { min-width: 0; }
body.dashboard-page #overview .social-spotlight > div:first-child > span { display: block; margin-bottom: 4px; }
body.dashboard-page #overview .social-spotlight p { margin: 0 0 8px; }
body.dashboard-page #overview .social-spotlight a { margin-left: 11px; }
body.dashboard-page #overview .social-spotlight-profile { flex: none; padding: 9px; border: 1px solid var(--overview-line); border-radius: 11px; background: var(--overview-raised); }
body.dashboard-page #overview :is(.tip-panel,.feedback-panel) { display: flex; align-items: center; gap: 14px; }
body.dashboard-page #overview :is(.tip-glow,.feedback-orb) { width: 46px; height: 46px; }
body.dashboard-page #overview :is(.tip-glow,.feedback-orb) svg { width: 24px; height: 24px; }
body.dashboard-page #overview :is(.tip-panel p,.feedback-copy p) { margin-bottom: 7px; }
body.dashboard-page #overview :is(.tip-panel > div,.feedback-copy) { min-width: 0; }
body.dashboard-page #overview :is(.creation-quick-button,.text-btn,.social-spotlight a,.feedback-cta,.overview-empty button):focus-visible { outline: 2px solid var(--overview-accent); outline-offset: 3px; }
body.dashboard-page #overview .welcome-credit-banner {
  border: 1px solid #6b568c;
  background: var(--overview-surface)!important;
  background-image: none!important;
  box-shadow: none;
  color: var(--overview-text);
}
body.dashboard-page #overview .welcome-credit-banner button { border: 1px solid #6b568c; border-radius: 9px; background: #292338; color: #f2eaff; }
@keyframes overviewShimmer { to { background-position: -200% 0; } }
@media (min-width: 1600px) {
  body.dashboard-page #overview .overview-secondary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  body.dashboard-page #overview .overview-secondary-grid > .panel { grid-column: auto; }
  body.dashboard-page #overview .social-spotlight { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 1100px) {
  body.dashboard-page #overview .overview-hero { flex-wrap: wrap; }
  body.dashboard-page #overview .overview-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.dashboard-page #overview .overview-stats .stat-card { grid-column: auto; }
  body.dashboard-page #overview .overview-stats .stat-card:last-child { grid-column: 1/-1; }
  body.dashboard-page #overview .overview-primary-grid { grid-template-columns: minmax(0,1fr); }
  body.dashboard-page #overview .overview-primary-grid > .panel { grid-column: auto; }
  body.dashboard-page #overview .overview-secondary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.dashboard-page #overview .overview-secondary-grid > .panel { grid-column: auto; }
  body.dashboard-page #overview .overview-primary-grid > .panel { min-height: 200px; }
}
@media (max-width: 760px) {
  body.dashboard-page #overview { padding-top: 16px; }
  body.dashboard-page #overview .overview-hero { min-height: 0; padding: 16px 20px; }
  body.dashboard-page #overview .overview-hero::after { top: 16px; bottom: 16px; }
  body.dashboard-page #overview .overview-hero h1 { font-size: 21px; }
  body.dashboard-page #overview .overview-stats { grid-template-columns: minmax(0,1fr); gap: 9px; margin-bottom: 12px; }
  body.dashboard-page #overview .overview-stats .stat-card { grid-template-areas: 'icon' 'metric'; grid-template-columns: minmax(0,1fr); gap: 8px; min-height: 146px; padding: 13px; }
  body.dashboard-page #overview .overview-stats .stat-card strong { font-size: 20px; }
  body.dashboard-page #overview .overview-stats .stat-card small { display: none; }
  body.dashboard-page #overview .overview-primary-grid,
  body.dashboard-page #overview .overview-secondary-grid { grid-template-columns: minmax(0,1fr); gap: 12px; margin-bottom: 12px; }
  body.dashboard-page #overview .overview-primary-grid > .panel,
  body.dashboard-page #overview .overview-secondary-grid > .panel { min-height: 0; padding: 18px; }
  body.dashboard-page #overview .overview-secondary-grid > .social-spotlight { min-height: 0!important; padding: 18px!important; }
  body.dashboard-page #overview .creation-quick-panel { align-items: stretch; flex-direction: column; gap: 18px; }
  body.dashboard-page #overview .creation-quick-button { width: 100%; }
  body.dashboard-page #overview .activity-list { min-height: 145px; }
  body.dashboard-page #overview .activity { grid-template-columns: 32px minmax(0,1fr); }
  body.dashboard-page #overview .activity-action { grid-column: 2; justify-self: start; }
  body.dashboard-page #overview .activity strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
  body.dashboard-page #overview .social-spotlight { align-items: flex-start; flex-direction: column; }
  body.dashboard-page #overview .social-spotlight-profile { width: 100%; }
}
@media (max-width: 380px) {
  body.dashboard-page #overview .overview-hero h1 { font-size: 19px; }
  body.dashboard-page #overview .overview-stats .stat-card { min-height: 140px; padding: 11px; }
  body.dashboard-page #overview .overview-stats .stat-card strong { font-size: 18px; }
  body.dashboard-page #overview :is(.tip-panel,.feedback-panel) { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  body.dashboard-page #overview .overview-stats .stat-card { transition: none; }
  body.dashboard-page #overview .overview-list-skeleton i { animation: none; }
}