:root {
  --surface-accent-rgb: 56, 189, 248;
  --surface-accent: rgb(var(--surface-accent-rgb));
}

body.with-sidebar {
  background:
    radial-gradient(circle at 8% -6%, rgba(168, 85, 247, 0.18), transparent 28rem),
    radial-gradient(circle at 92% 14%, rgba(56, 189, 248, 0.16), transparent 30rem),
    radial-gradient(circle at 18% 92%, rgba(34, 197, 94, 0.10), transparent 26rem),
    #020617;
}

.surface-tone-cyan {
  --surface-accent-rgb: 56, 189, 248;
}

.surface-tone-violet {
  --surface-accent-rgb: 168, 85, 247;
}

.surface-tone-emerald {
  --surface-accent-rgb: 34, 197, 94;
}

.surface-tone-amber {
  --surface-accent-rgb: 245, 158, 11;
}

.support-command,
.account-hero,
.aws-status-strip article {
  --surface-accent-rgb: 56, 189, 248;
}

.support-strip,
.account-directory-panel,
.account-analytics-panel,
.aws-panel {
  --surface-accent-rgb: 168, 85, 247;
}

.support-panel,
.account-form-panel,
.account-metrics article {
  --surface-accent-rgb: 34, 197, 94;
}

.support-panel:nth-of-type(3n),
.account-result-card,
.aws-panel:nth-of-type(3n) {
  --surface-accent-rgb: 245, 158, 11;
}

.panel,
.status,
.ops-dashboard,
.suite-dashboard,
.qa-admin-dashboard,
.suite-control-card,
.qa-admin-card,
.ops-kpi,
.ops-graph-card,
.tile,
.card-form,
.org-create-form,
.org-edit-form,
.branding-form,
.support-command,
.support-strip,
.support-panel,
.account-hero,
.account-directory-panel,
.account-form-panel,
.account-analytics-panel,
.account-metrics article,
.account-result-card,
.aws-status-strip article,
.aws-panel {
  position: relative;
  isolation: isolate;
  overflow: visible;
  transform: perspective(1400px) rotateX(0.8deg) translateY(-1px);
  transform-origin: center top;
}

.panel::before,
.status::before,
.ops-dashboard::before,
.suite-dashboard::before,
.qa-admin-dashboard::before,
.suite-control-card::before,
.qa-admin-card::before,
.ops-kpi::before,
.ops-graph-card::before,
.tile::before,
.card-form::before,
.org-create-form::before,
.org-edit-form::before,
.branding-form::before,
.support-command::before,
.support-strip::before,
.support-panel::before,
.account-hero::before,
.account-directory-panel::before,
.account-form-panel::before,
.account-analytics-panel::before,
.account-metrics article::before,
.account-result-card::before,
.aws-status-strip article::before,
.aws-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(var(--surface-accent-rgb), 0.10) 0%,
    rgba(var(--surface-accent-rgb), 0.88) 22%,
    rgba(var(--surface-accent-rgb), 0.34) 72%,
    rgba(var(--surface-accent-rgb), 0.08) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.panel::after,
.status::after,
.ops-dashboard::after,
.suite-dashboard::after,
.qa-admin-dashboard::after,
.suite-control-card::after,
.qa-admin-card::after,
.ops-kpi::after,
.ops-graph-card::after,
.tile::after,
.card-form::after,
.org-create-form::after,
.org-edit-form::after,
.branding-form::after,
.support-command::after,
.support-strip::after,
.support-panel::after,
.account-hero::after,
.account-directory-panel::after,
.account-form-panel::after,
.account-analytics-panel::after,
.account-metrics article::after,
.account-result-card::after,
.aws-status-strip article::after,
.aws-panel::after {
  content: "";
  position: absolute;
  inset: auto 8% -24px 8%;
  height: 50px;
  border-radius: 999px;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(var(--surface-accent-rgb), 0.28) 0%,
    rgba(var(--surface-accent-rgb), 0.16) 36%,
    rgba(var(--surface-accent-rgb), 0) 76%
  );
  filter: blur(20px);
  opacity: 0.95;
  pointer-events: none;
  z-index: -1;
}

.panel,
.status,
.ops-dashboard,
.suite-dashboard,
.qa-admin-dashboard,
.support-command,
.support-strip,
.support-panel,
.account-hero,
.account-directory-panel,
.account-form-panel,
.account-analytics-panel,
.aws-panel {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 2px 4px rgba(2, 6, 23, 0.55),
    0 12px 20px rgba(2, 6, 23, 0.28),
    0 26px 55px -22px rgba(var(--surface-accent-rgb), 0.34),
    0 40px 70px -32px rgba(2, 6, 23, 0.72);
}

.suite-control-card,
.qa-admin-card,
.ops-kpi,
.ops-graph-card,
.card-form,
.org-create-form,
.org-edit-form,
.branding-form,
.account-metrics article,
.account-result-card,
.aws-status-strip article {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 2px 4px rgba(2, 6, 23, 0.48),
    0 10px 18px rgba(2, 6, 23, 0.24),
    0 18px 42px -26px rgba(var(--surface-accent-rgb), 0.28);
}

.tile {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 2px 5px rgba(2, 6, 23, 0.44),
    0 14px 24px -16px rgba(var(--surface-accent-rgb), 0.26);
}

.tile:hover,
.tile:focus {
  transform: perspective(1400px) rotateX(1deg) translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 4px 8px rgba(2, 6, 23, 0.48),
    0 18px 30px -16px rgba(var(--surface-accent-rgb), 0.34),
    0 30px 48px -24px rgba(2, 6, 23, 0.66);
}

/* Account Management is a long stacked operations workspace. Keep the
   decorative depth inside each section so tall open panels do not overlap
   the next section in the working flow. */
body.with-sidebar .workspace-grid > .panel,
body.with-sidebar .workspace-grid > .status,
body.with-sidebar .account-command-center,
body.with-sidebar .account-context-bar {
  transform: none;
  overflow: hidden;
}

body.with-sidebar .workspace-grid > .panel::after,
body.with-sidebar .workspace-grid > .status::after,
body.with-sidebar .account-command-center::after,
body.with-sidebar .account-context-bar::after {
  inset: auto 8% 0 8%;
  height: 28px;
  opacity: 0.55;
  filter: blur(16px);
}

/* Document Center is customer-facing. The generic floating status treatment
   adds a blue rule directly against the live process text, which reads like
   internal console chrome. Keep this panel quiet and high-contrast. */
body.with-sidebar .result-card .status {
  color: #f8fafc;
  transform: none;
}

body.with-sidebar .result-card .status::before,
body.with-sidebar .result-card .status::after {
  display: none;
}

body.with-sidebar .result-card .status.error {
  color: #fecaca;
}

body.with-sidebar .result-card .status.warning {
  color: #fde68a;
}

body.with-sidebar .status-waiting-shell {
  padding: 1.8rem 1.25rem;
}

body.with-sidebar .status-waiting-shell #status-text {
  line-height: 1.55;
}