body {
  min-width: 320px;
  color: var(--xp-text);
  background:
    radial-gradient(circle at 94% 14%, rgba(135, 160, 255, .10), transparent 28rem),
    radial-gradient(circle at 7% 76%, rgba(200, 255, 82, .08), transparent 24rem),
    var(--xp-paper);
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(9, 10, 15, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 10, 15, .035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
}

.shell { background: transparent; }

.brand-panel {
  color: #f7f7f2;
  border-right: 1px solid rgba(255, 255, 255, .10);
  background:
    radial-gradient(circle at 110% 10%, rgba(180, 154, 255, .20), transparent 18rem),
    radial-gradient(circle at 14% 88%, rgba(112, 242, 221, .12), transparent 20rem),
    linear-gradient(160deg, var(--xp-ink), var(--xp-ink-2));
  box-shadow: 16px 0 50px rgba(8, 10, 16, .12);
}

.brand-panel::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(200, 255, 82, .12);
  border-radius: 50%;
  pointer-events: none;
}

.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-copy { min-width: 0; }
.brand-copy small { display: block; color: #aeb1b9; font-size: 9px; letter-spacing: .12em; }
.brand-panel .eyebrow { margin: 0 0 2px; color: #fff; font-size: 13px; font-weight: 850; }
.brand-mark {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
  margin: 0;
  color: var(--xp-lime);
  border: 1px solid rgba(200, 255, 82, .20);
  border-radius: 50%;
  background: #06070a;
  box-shadow: 0 0 0 5px rgba(200, 255, 82, .04);
}
.brand-panel h1 { margin-top: 22px; color: #fff; font-size: 26px; }
.brand-panel .lead { color: #b8bbc3; font-size: 12px; line-height: 1.55; }
.brand-panel .service-status { color: #d8dadf; }
.brand-panel .status-dot.ready { background: var(--xp-lime); box-shadow: 0 0 0 5px rgba(200, 255, 82, .12); }

.nav-group-label { color: #7f838c; letter-spacing: .14em; }
.nav-item { color: #c6c8ce; border: 1px solid transparent; border-radius: 999px; }
.nav-item span { color: #9297a1; }
.nav-item:hover { color: #fff; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .06); }
.nav-item.active {
  color: var(--xp-ink);
  border-color: var(--xp-lime);
  background: var(--xp-lime);
  box-shadow: 0 12px 28px rgba(200, 255, 82, .13);
}
.nav-item.active span { color: var(--xp-ink); }
.nav-item small { color: #aeb1b9; background: rgba(255, 255, 255, .07); }
.nav-item.active small { color: var(--xp-ink); background: rgba(9, 10, 15, .08); }
.nav-item .nav-unread-badge { color: var(--xp-ink); background: var(--xp-lime); }
.nav-item.active .nav-unread-badge { color: #fff; background: var(--xp-ink); box-shadow: 0 0 0 3px rgba(9, 10, 15, .12); }

.workspace { background: transparent; }
.is-authenticated .workspace { padding-top: 28px; }
.is-authenticated .dashboard-header {
  border-bottom-color: var(--xp-line);
  background: rgba(244, 244, 239, .90);
  backdrop-filter: blur(18px) saturate(130%);
}
.dashboard-header h2,
.panel-heading h3,
.overview-block h4 { color: var(--xp-text); font-weight: 850; letter-spacing: -.04em; }
.dashboard-header .muted { margin-bottom: 0; }
.section-label { color: #5d70d7; }

.session-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 12px 16px;
  border: 1px solid rgba(16, 17, 22, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .60);
}
.session-strip-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--xp-ink);
  background: var(--xp-lime);
  font-weight: 900;
}
.session-strip > div { flex: 1; min-width: 0; }
.session-strip strong { display: block; font-size: 13px; }
.session-strip p { margin: 2px 0 0; color: var(--xp-muted); font-size: 11px; }
.session-strip-badge { color: #3f4640; font-size: 11px; font-weight: 800; }

.admin-panel {
  border-color: var(--xp-line);
  border-radius: var(--xp-radius);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 24px 70px rgba(8, 10, 16, .07);
  backdrop-filter: blur(10px);
}
.product-panel { margin-top: 20px; }

.overview-metrics {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.overview-metrics .metric-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 138px;
  padding: 19px;
  border-color: var(--xp-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .90);
}
.overview-metrics .metric-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -42px;
  bottom: -58px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  filter: blur(24px);
  opacity: .30;
}
.overview-metrics .metric-card.lime::after { background: var(--xp-lime); }
.overview-metrics .metric-card.aqua::after { background: var(--xp-aqua); }
.overview-metrics .metric-card.blue::after { background: var(--xp-blue); }
.overview-metrics .metric-card.violet::after { background: var(--xp-violet); }
.overview-metrics .metric-card.neutral::after { background: #9aa09b; }
.overview-metrics .metric-card span { color: #454946; font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.overview-metrics .metric-card strong { margin: 12px 0 4px; font-size: 38px; font-weight: 900; }
.overview-metrics .metric-card small { color: #6f736f; }

.operations-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 18px;
  margin-top: 18px;
}
.operations-main,
.operations-side { display: grid; align-content: start; gap: 18px; min-width: 0; }
.overview-block {
  padding: 20px;
  border-color: var(--xp-line);
  border-radius: 20px;
  background: rgba(249, 249, 245, .72);
}
.focus-block { background: rgba(255, 255, 255, .88); }
.overview-block .section-label { margin-bottom: 7px; }

.dashboard-feed,
.action-list { display: grid; gap: 10px; margin-top: 16px; }
.dashboard-feed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 66px;
  padding: 13px 14px;
  color: var(--xp-text);
  border: 1px solid rgba(16, 17, 22, .10);
  border-radius: 16px;
  background: rgba(255, 255, 255, .90);
  box-shadow: none;
  text-align: left;
}
.dashboard-feed-item:hover { border-color: rgba(16, 17, 22, .24); background: #fff; transform: translateY(-1px); }
.dashboard-feed-copy { min-width: 0; flex: 1; }
.dashboard-feed-copy strong,
.dashboard-feed-copy small { display: block; overflow-wrap: anywhere; }
.dashboard-feed-copy strong { font-size: 13px; }
.dashboard-feed-copy small { margin-top: 5px; color: #747873; font-size: 11px; line-height: 1.45; }
.dashboard-feed-meta { display: flex; align-items: center; flex: 0 0 auto; gap: 7px; }
.dashboard-feed-empty { margin-top: 16px; }
.dashboard-feed-empty .ui-state { padding: 14px; }
.dashboard-feed-empty .ui-state-icon { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; }
.dashboard-feed.compact .dashboard-feed-item { min-height: 58px; }

.action-item {
  border: 1px solid rgba(16, 17, 22, .10);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}
.action-item p { color: var(--xp-muted); }

.quota-overview { background: linear-gradient(145deg, #111319, #1a1d26); }
.quota-overview h4,
.quota-overview .section-label { color: #fff; }
.quota-overview .section-label { color: var(--xp-lime); }
.quota-overview .text-button { color: var(--xp-lime); }
.quota-overview-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 17px; color: #bfc2c9; font-size: 12px; }
.quota-overview-row strong { color: #fff; }
.quota-overview .quota-track { background: rgba(255, 255, 255, .10); }
.quota-overview .quota-track span { background: linear-gradient(90deg, var(--xp-lime), var(--xp-aqua)); }
.quota-overview-period { margin: 16px 0 0; color: #92969f; font-size: 11px; }

.project-card,
.order-card,
.material-card,
.expert-card,
.workspace-summary,
.subscription-summary,
.project-detail,
.order-detail,
.material-detail {
  border-color: var(--xp-line);
  border-radius: 20px;
}
.project-card.selected,
.order-card.selected,
.material-card.selected,
.expert-card.selected { border-color: #6d7eea; box-shadow: 0 0 0 3px rgba(135, 160, 255, .16); }
.quota-track span { background: linear-gradient(90deg, #677aea, var(--xp-blue)); }

.loading-view { color: var(--xp-muted); }
.loading-view strong { display: block; margin-top: 18px; color: var(--xp-text); font-size: 18px; }
.loading-view p { margin: 6px 0 0; }
.loading-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  color: var(--xp-lime);
  border-radius: 50%;
  background: var(--xp-ink);
  font-size: 22px;
  font-weight: 900;
}
.spinner { border-color: #dfe1db; border-top-color: #6d7eea; }

.auth-view h2 { color: var(--xp-text); }
.auth-view .section-label { color: #5d70d7; }

@media (max-width: 1080px) {
  .operations-layout { grid-template-columns: 1fr; }
  .operations-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-side .quota-overview { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .brand-panel::after { display: none; }
  .brand-lockup { min-width: 0; }
  .brand-copy small { display: none; }
  .is-authenticated .brand-mark { display: grid; flex-basis: 34px; width: 34px; height: 34px; }
  .is-authenticated .brand-panel h1 { margin: 0; }
  .is-authenticated .brand-panel .service-status { margin-left: auto; }
  .app-navigation { order: 10; }
  .nav-item { border-radius: 999px; }
  .session-strip { align-items: flex-start; border-radius: 20px; }
  .session-strip-badge { display: none; }
  .operations-layout,
  .operations-side { grid-template-columns: 1fr; }
  .operations-side .quota-overview { grid-column: auto; }
  .overview-block { padding: 17px; }
}

@media (max-width: 560px) {
  .overview-metrics { grid-template-columns: 1fr; }
  .overview-metrics .metric-card { min-height: 112px; }
  .dashboard-feed-item,
  .action-item { align-items: stretch; flex-direction: column; }
  .dashboard-feed-meta { justify-content: space-between; width: 100%; }
  .panel-heading > button { width: 100%; }
  .dashboard-actions { flex-direction: column; }
  .dashboard-actions > * { width: 100%; }
}