/* Shared workspace surfaces for the account, billing, notifications, brand and projects views. */
body.dashboard-page {
  --workspace-surface: #1a1f26;
  --workspace-raised: #212832;
  --workspace-field: #121820;
  --workspace-border: #363f4b;
  --workspace-muted: #b7c0cb;
}

body.dashboard-page #settings {
  --settings-bg: var(--workspace-field);
  --settings-surface: var(--workspace-surface);
  --settings-hover: var(--workspace-raised);
  --settings-line: var(--workspace-border);
  --settings-muted: var(--workspace-muted);
}
body.dashboard-page #settings .user-settings-heading {
  background: var(--workspace-surface);
  border-color: var(--workspace-border);
}
body.dashboard-page #settings .user-settings-layout {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 16px;
}
body.dashboard-page #settings :is(.user-settings-nav,.settings-content-head,.settings-card,.settings-loading,.settings-error) {
  background: var(--workspace-surface);
  border-color: var(--workspace-border);
}
body.dashboard-page #settings .user-settings-nav button.active { background: #30283b; }
body.dashboard-page #settings .settings-card :is(input:not([type=checkbox]):not([type=radio]),select,textarea),
body.dashboard-page #settings :is(.settings-meta-row > div,.settings-switch,.settings-duration-options label > span) {
  background: var(--workspace-field);
  border-color: var(--workspace-border);
}
body.dashboard-page #settings .user-settings-content,
body.dashboard-page #settings .settings-form-grid > label { min-width: 0; }
body.dashboard-page #settings :is(.settings-content-head p,.settings-card label > small,.user-settings-nav small) {
  color: var(--workspace-muted);
  line-height: 1.8;
}

body.dashboard-page #billing { --bill-panel: var(--workspace-surface); --bill-line: var(--workspace-border); --bill-muted: var(--workspace-muted); }
body.dashboard-page #billing .billing-overview {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.35fr);
  align-items: stretch;
}
body.dashboard-page #billing :is(.billing-balance-hero,.billing-summary-grid article,.billing-plans-section,.billing-ledger),
body.dashboard-page #billing .billing-trust-row > div {
  background: var(--workspace-surface);
  border-color: var(--workspace-border);
  box-shadow: none;
}
body.dashboard-page #billing .billing-balance-hero { background: linear-gradient(145deg,#22232e,var(--workspace-surface) 58%); }
body.dashboard-page #billing .billing-summary-grid article { min-width: 0; min-height: 0; }
body.dashboard-page #billing :is(.billing-plan-card,.balance-details > span,.ledger-toolbar) {
  background: var(--workspace-raised);
  border-color: var(--workspace-border);
  box-shadow: none;
}
body.dashboard-page #billing .billing-plan-card.featured { background: #2b2938; border-color: #8c76ad; }
body.dashboard-page #billing .billing-plan-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
body.dashboard-page #billing :is(.billing-summary-grid small,.billing-summary-grid em,.billing-section-head p) { color: var(--workspace-muted); }

body.dashboard-page #notifications-center .notification-center-shell {
  width: 100%;
  background: transparent;
}
body.dashboard-page #notifications-center .notification-center-toolbar,
body.dashboard-page #notifications-center .notification-center-item,
body.dashboard-page #notifications-center .notifications-empty.large {
  background: var(--workspace-surface);
  border-color: var(--workspace-border);
  box-shadow: none;
}
body.dashboard-page #notifications-center .notification-center-item.unread { background: #212733; box-shadow: inset -3px 0 #a987ef; }
body.dashboard-page #notifications-center .notification-center-item:is(:hover,:focus-within) { background: var(--workspace-raised); }
body.dashboard-page #notifications-center .notification-center-list {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(100%,400px),1fr));
  align-items: start;
  min-height: 0;
}
body.dashboard-page #notifications-center :is(.notification-center-summary,.notification-center-copy time) { color: var(--workspace-muted); }

body.dashboard-page #branding :is(.brand-profiles-head,.brand-profile-item,.brand-profile-editor,.brand-profiles-empty) {
  background: var(--workspace-surface);
  border-color: var(--workspace-border);
  box-shadow: none;
}
body.dashboard-page #branding .brand-profile-item.active { background: var(--workspace-surface); border-color: #8c76ad; }
body.dashboard-page #branding .brand-profile-item { min-width: 0; min-height: 175px; }
body.dashboard-page #branding .brand-profile-main { gap: 8px; padding: 18px; }
body.dashboard-page #branding .brand-profile-toggle { background: var(--workspace-raised); border-color: var(--workspace-border); }
body.dashboard-page #branding .brand-profile-item p,
body.dashboard-page #branding .brand-profiles-head p { color: var(--workspace-muted); }
body.dashboard-page #branding .brand-profile-actions { background: transparent; border-color: var(--workspace-border); }

body.dashboard-page #projects :is(.library-toolbar,.library-summary > button) {
  background: var(--workspace-surface);
  border-color: var(--workspace-border);
  box-shadow: none;
}
body.dashboard-page #projects .library-grid {
  grid-template-columns: repeat(auto-fill,minmax(min(100%,290px),330px));
  justify-content: start;
  gap: 20px;
}
body.dashboard-page #projects .library-card,
body.dashboard-page #projects .library-card[data-color] {
  box-sizing: border-box;
  width: 100%;
  min-height: 370px;
  padding: 20px;
  border: 1px solid var(--workspace-border);
  border-radius: 20px;
  background: var(--workspace-surface);
  box-shadow: 5px 5px 8px #0d121a, -5px -5px 8px #28313c;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
body.dashboard-page #projects .library-card:is(:hover,:focus-within) {
  z-index: 1;
  border-color: #756092;
  background: var(--workspace-surface);
  box-shadow: 9px 14px 22px #0a0e15, -5px -5px 10px #2b3540;
  transform: translateY(-10px);
}
body.dashboard-page #projects .library-summary > button.active { background: #2a2835; border-color: #8c76ad; }
body.dashboard-page #projects .library-card :is(.card-progress,.library-detail) {
  background: var(--workspace-raised);
  border-color: var(--workspace-border);
  box-shadow: none;
}
body.dashboard-page #projects .library-card-image {
  position: relative;
  min-height: 170px;
  border: 1px solid #353e4b;
  border-radius: 15px;
  background: var(--workspace-raised);
  box-shadow: inset 5px 5px 6px #151b24, inset -5px -5px 6px #2b3440;
}
body.dashboard-page #projects .library-card-image::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 5px 5px 7px #10151d99, inset -5px -5px 7px #ffffff13;
  content: '';
  pointer-events: none;
}
body.dashboard-page #projects .library-card h3 { color: #f4f2f8; font-size: 18px; font-weight: 700; }
body.dashboard-page #projects .library-card .card-description { color: var(--workspace-muted); font-size: 13px; line-height: 1.75; }
body.dashboard-page #projects .library-card .card-footer { color: var(--workspace-muted); }
body.dashboard-page #projects :is(.library-subtitle,.card-description,.library-card time) { color: var(--workspace-muted); }

@media (max-width: 1250px) {
  body.dashboard-page #billing .billing-overview { grid-template-columns: minmax(0,1fr); }
  body.dashboard-page #billing .billing-summary-grid article { min-height: 115px; }
  body.dashboard-page #billing .billing-plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  body.dashboard-page #settings .user-settings-layout { grid-template-columns: 210px minmax(0,1fr); }
  body.dashboard-page #notifications-center .notification-center-list { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  body.dashboard-page #settings .user-settings-layout { display: block; }
  body.dashboard-page #settings .settings-form-grid { grid-template-columns: minmax(0,1fr); }
  body.dashboard-page #billing .billing-summary-grid,
  body.dashboard-page #billing .billing-plan-grid { grid-template-columns: minmax(0,1fr); }
  body.dashboard-page #billing .billing-plan-card:last-child:nth-child(odd) { grid-column: auto; }
  body.dashboard-page #notifications-center .notification-center-toolbar { flex-wrap: wrap; }
  body.dashboard-page #branding .brand-profile-list,
  body.dashboard-page #projects .library-grid { grid-template-columns: minmax(0,1fr); }
  body.dashboard-page #projects .library-card:is(:hover,:focus-within) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.dashboard-page #projects .library-card { transition: none; }
  body.dashboard-page #projects .library-card:is(:hover,:focus-within) { transform: none; }
}