/* GREEN DREAMS TRADING | METALLIC GARAGE LAB V3 */

:root {
  --steel-green: #102b21;
  --steel-dark: #07140f;
  --steel-light: #456c58;
  --silver: #d5e0d8;
  --orange: #f5a34c;
  --green: #75e995;
}

/* Entire website: dark brushed emerald steel */
html {
  background: #06110d;
}

body {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(215,255,225,.018) 1px,
      transparent 3px,
      transparent 5px
    ),
    radial-gradient(
      ellipse at 45% 0%,
      rgba(36,91,62,.30),
      transparent 65%
    ),
    linear-gradient(
      145deg,
      #102b20,
      #071510 38%,
      #133025 75%,
      #06100c
    ) !important;
  color: var(--silver) !important;
  background-attachment: fixed !important;
}

/* Consistent embossed stainless lettering */
h1, h2, h3, h4 {
  text-shadow:
    0 1px 1px rgba(255,255,255,.22),
    0 -2px 2px rgba(0,0,0,.70);
}

button, select, input {
  font-family: inherit;
}

/* Main surface and navigation */
#nav, header, .topbar, .sidebar {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.035) 0px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      135deg,
      #183e2e,
      #091b14 46%,
      #28513b
    ) !important;
  border-color: rgba(151,212,170,.27) !important;
}

/* Brushed-metal plates */
.panel,
.station,
.gd-pattern-panel,
.workspace,
.instrument-rack,
.rack {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      145deg,
      #224835 0%,
      #10271c 42%,
      #315441 72%,
      #0b2017 100%
    ) !important;

  border: 1px solid #648574 !important;
  border-radius: 18px !important;

  box-shadow:
    inset 0 2px 2px rgba(238,255,241,.20),
    inset 0 -4px 6px rgba(0,0,0,.50),
    0 5px 15px rgba(0,0,0,.28) !important;
}

/* Data Engine: cool gunmetal steel */
.panel.data,
.panel.data-engine,
.data-engine {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.03) 0px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      125deg,
      #365b55,
      #172b29 52%,
      #47645f
    ) !important;
  border-color: #698f88 !important;
}

/* Calculation Engine: bronze-tinted steel */
.panel.calculation,
.panel.calc,
.panel.calculation-engine,
.calculation-engine {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      125deg,
      #54462d,
      #29271c 50%,
      #655638
    ) !important;
  border-color: #9c804c !important;
}

/* Pattern Tracker: deeper emerald steel */
.gd-pattern-panel {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      135deg,
      #285b3d,
      #102c20 50%,
      #1d4933
    ) !important;

  border-color: #6ab885 !important;
  padding: 22px;
}

/* Stainless steel physical buttons */
.station,
#tickers button,
#nav button,
.gd-pattern-panel select,
.gd-pattern-panel button,
button[data-ticker] {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.035) 0px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      155deg,
      #799287,
      #30493d 28%,
      #1a3328 55%,
      #648071
    ) !important;

  color: #dce9dd !important;
  border: 1px solid #8ba99a !important;
  border-radius: 12px !important;

  text-shadow:
    0 1px 1px rgba(255,255,255,.24),
    0 -2px 2px rgba(0,0,0,.85) !important;

  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.25),
    inset 0 -3px 4px rgba(0,0,0,.5),
    0 4px 8px rgba(0,0,0,.24) !important;

  transition:
    box-shadow .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

/* Workstation text stays metallic */
.station *,
#nav button * {
  color: inherit !important;
  text-shadow: inherit !important;
}

/* Soft orange glow only for selected controls */
.station.selected,
#nav button.metal-active,
#tickers button.selected,
button[data-ticker].selected,
button[aria-pressed="true"] {
  color: #ffca85 !important;
  border: 2px solid #f4a34a !important;

  box-shadow:
    inset 0 1px 3px rgba(255,225,173,.26),
    inset 0 -3px 5px rgba(0,0,0,.42),
    0 0 8px rgba(255,154,45,.40),
    0 0 20px rgba(255,145,28,.17) !important;
}

.station.selected *,
#nav button.metal-active * {
  color: inherit !important;
}

/* Keep green for the primary action */
#gdPrepare {
  background:
    linear-gradient(
      150deg,
      #a1ffc0,
      #45b978 50%,
      #21754a
    ) !important;
  color: #081c10 !important;
  border: 1px solid #a8ffcb !important;

  text-shadow: 0 1px rgba(255,255,255,.4) !important;

  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.55),
    0 0 12px rgba(61,235,123,.15) !important;
}

/* Metallic dropdowns */
#gdWindow, #gdPattern {
  color: #e5f1e7 !important;
  background:
    linear-gradient(
      155deg,
      #3c6350,
      #142b20,
      #345542
    ) !important;
  border-color: #739c80 !important;
}

/* Official logo: subtle emboss when asset is installed */
body::before {
  content: "";
  position: fixed;
  width: min(80vw, 460px);
  height: min(80vw, 460px);
  right: -12vw;
  top: 16vh;
  background:
    url("green_dreams_logo.jpg")
    center / contain no-repeat;
  opacity: .055;
  filter: grayscale(1) contrast(1.4);
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
}

body > * {
  position: relative;
}

/* Readable mobile layout */
@media (max-width: 600px) {
  .gd-pattern-panel {
    padding: 18px !important;
  }

  .station {
    min-width: 0;
  }

  h1, h2, h3 {
    overflow-wrap: break-word;
  }
}