/* Space-mission skin shared by the tools hub and all four tools. */
:root.space-tools-root {
  color-scheme: dark;
  --bg: #03050c;
  --bg-elev: #090d1c;
  --surface: rgba(10, 15, 34, 0.78);
  --surface-solid: #0a0f20;
  --surface-2: rgba(255, 255, 255, 0.065);
  --surface-hover: rgba(255, 255, 255, 0.095);
  --input-bg: rgba(3, 7, 18, 0.74);
  --header-bg: rgba(3, 5, 12, 0.76);
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(125, 211, 252, 0.28);
  --grid-line: rgba(125, 211, 252, 0.045);
  --grid-line-strong: rgba(125, 211, 252, 0.085);
  --text: #f4f7fb;
  --text-muted: #b3bed0;
  --text-faint: #8e9aae;
  --accent: #34d399;
  --accent-strong: #6ee7b7;
  --accent-text: #6ee7b7;
  --accent-contrast: #02170f;
  --accent-soft: rgba(52, 211, 153, 0.13);
  --accent-soft-strong: rgba(52, 211, 153, 0.23);
  --accent-2: #22d3ee;
  --accent-2-soft: rgba(34, 211, 238, 0.12);
  --gradient: linear-gradient(100deg, #86efac 0%, #34d399 38%, #22d3ee 100%);
  --gradient-soft: linear-gradient(135deg, rgba(52, 211, 153, 0.17), rgba(34, 211, 238, 0.09));
  --success: #4ade9a;
  --success-soft: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.12);
  --danger: #ff9c94;
  --danger-soft: rgba(248, 113, 113, 0.13);
  --glow-1: rgba(16, 185, 129, 0.3);
  --glow-2: rgba(34, 211, 238, 0.17);
  --spot: rgba(52, 211, 153, 0.1);
  --spot-border: rgba(110, 231, 183, 0.6);
  --inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.065);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.45), 0 18px 46px -22px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.5), 0 38px 100px -38px rgba(0, 0, 0, 0.95);
  --focus-ring: #67e8f9;
}

.space-tools-root body {
  background:
    radial-gradient(70vmax 55vmax at 90% 7%, rgba(67, 56, 202, 0.2), transparent 70%),
    radial-gradient(55vmax 45vmax at 4% 46%, rgba(8, 145, 178, 0.13), transparent 72%),
    #03050c;
  background-attachment: fixed;
}
.space-tools-root body::before {
  opacity: 1;
  background-image:
    radial-gradient(1px 1px at 24px 36px, #fff, transparent),
    radial-gradient(1px 1px at 148px 92px, rgba(255,255,255,.72), transparent),
    radial-gradient(1.4px 1.4px at 92px 170px, #cfe3ff, transparent),
    radial-gradient(1px 1px at 230px 214px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 296px 48px, #ffe9c7, transparent),
    radial-gradient(1px 1px at 330px 300px, rgba(255,255,255,.58), transparent);
  background-size: 320px 260px, 320px 260px, 410px 370px, 410px 370px, 530px 450px, 530px 450px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%);
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
.space-tools-root body::after {
  opacity: .7;
  background:
    radial-gradient(42vw 25vw at 76% 12%, rgba(139, 92, 246, .14), transparent 72%),
    radial-gradient(34vw 24vw at 18% 64%, rgba(34, 211, 238, .09), transparent 74%);
}

.space-tools-root .tool-hero { position: relative; overflow: hidden; }
.space-tools-root .tool-hero::before {
  content: "MISSION TOOLKIT";
  position: absolute;
  right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  top: 1.5rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: #7dd3fc;
  opacity: .62;
}
.space-tools-root .tool-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -7rem;
  bottom: -11rem;
  width: 23rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #273b70, #10152f 46%, #050713 70%);
  box-shadow: -18px -12px 60px rgba(125, 211, 252, .13), inset 24px 10px 36px rgba(125, 211, 252, .07);
}
.space-tools-root .tool-panel,
.space-tools-root .card,
.space-tools-root .result-panel,
.space-tools-root .wc-app,
.space-tools-root .vat-tabs-bar {
  background-color: rgba(8, 13, 29, .8);
  border-color: rgba(125, 211, 252, .14);
  box-shadow: var(--inner-glow), 0 30px 80px -48px rgba(34, 211, 238, .36);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
.space-tools-root .tool-panel,
.space-tools-root .card { position: relative; }
.space-tools-root .tool-panel::before,
.space-tools-root .card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110, 231, 183, .58), rgba(34, 211, 238, .42), transparent);
  pointer-events: none;
}
.space-tools-root .input,
.space-tools-root .select,
.space-tools-root .textarea { box-shadow: inset 0 0 22px rgba(34, 211, 238, .025); }
.space-tools-root .breadcrumb { font-family: var(--font-mono); }
.space-tools-root .breadcrumb a { color: #7dd3fc; }
.space-tools-root .site-footer { background: rgba(3, 5, 12, .72); }

@media (max-width: 600px) {
  .space-tools-root .tool-hero::before { display: none; }
  .space-tools-root .tool-hero::after { width: 17rem; right: -9rem; bottom: -8rem; }
}