/* Shared futuristic palette for the workbench and developer guide. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --tech-deep: #07172f;
  --tech-ink: #152d54;
  --tech-blue: #1769c8;
  --tech-cyan: #42dafa;
  --tech-violet: #8067de;
  --tech-line: #cbdcf3;

  --bg-main: #07172f;
  --card-bg: #f8fbff;
  --text-primary: #173762;
  --text-secondary: #4b6383;
  --text-muted: #647a96;
  --accent-orange: #1168ae;
  --border-color: #d1e0f4;
  --input-focus: #1a91d1;
  --error-color: #b4233e;
  --success-green: #087b72;
  --bin-0: #c4f5ff;
  --bin-1: #e1d7ff;
  --bin-2: #c8f4e9;
  --bin-3: #ffe5bf;
  --bin-4: #d9e7ff;
  --bin-5: #f8d9ef;
  --bin-6: #c3ecef;
  --bin-7: #eee0ff;
  --bin-8: #fce8c9;
  --bin-9: #cfe8ff;

  --gs1-blue: #143b75;
  --gs1-blue-light: #2365bf;
  --gs1-blue-soft: #e9f2ff;
  --gs1-orange: #1168ae;
  --gs1-orange-hover: #0c518d;
  --gs1-bg: #edf4ff;
  --gs1-card: #ffffff;
  --gs1-text: #203354;
  --gs1-text-muted: #506681;
  --gs1-border: #d3e0f3;
  --gs1-border-focus: #1888c7;
  --gs1-code-bg: #081a34;
  --gs1-code-text: #dff8ff;
  --gs1-shadow-sm: 0 4px 14px rgb(15 51 111 / 0.06);
  --gs1-shadow-md: 0 12px 28px rgb(15 51 111 / 0.12);
  --gs1-shadow-lg: 0 22px 45px rgb(15 51 111 / 0.17);
}

/* Workbench */
body.workbench-page {
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  background-color: var(--tech-deep);
  background-image:
    linear-gradient(rgb(91 193 255 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(91 193 255 / 0.055) 1px, transparent 1px),
    radial-gradient(circle at 8% 6%, rgb(45 198 245 / 0.22), transparent 34%),
    radial-gradient(circle at 94% 12%, rgb(128 103 222 / 0.22), transparent 36%),
    linear-gradient(135deg, #061328 0%, #0c2b55 62%, #141e43 100%);
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
}

.workbench-page .container {
  background: linear-gradient(180deg, #fbfdff 0%, #f2f7ff 100%);
  border: 1px solid rgb(118 209 255 / 0.48);
  border-radius: 20px;
  box-shadow: 0 28px 72px rgb(0 11 31 / 0.38), 0 0 38px rgb(52 195 255 / 0.11);
}

.workbench-page h1 {
  color: #f2fcff;
  background:
    radial-gradient(circle at 93% 4%, rgb(66 218 250 / 0.28), transparent 28%),
    linear-gradient(108deg, #082347 0%, #164783 67%, #312966 100%);
  border: 1px solid #71cde9;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 14px;
  letter-spacing: -0.025em;
  box-shadow: 0 9px 24px rgb(14 53 113 / 0.18);
}

.workbench-page .intro-text a {
  color: #0a679e;
}

.workbench-page .intro-text a:hover {
  color: #624aca;
}

.workbench-page .syntax-container {
  background: linear-gradient(105deg, #e5f8ff 0%, #edf1ff 100%);
  border-left-color: #20b9e2;
  box-shadow: inset 0 0 0 1px rgb(35 136 206 / 0.08);
}

.workbench-page .syntax-grid code {
  background: #102747;
  color: #d4f8ff;
  border: 1px solid #2c5d81;
}

.workbench-page .btn-demo,
.workbench-page .btn-action {
  background: #ffffff;
  border-color: #9dc7ec;
  color: #125b9e;
}

.workbench-page .btn-demo:hover,
.workbench-page .btn-action:hover {
  background: #e8f7ff;
  border-color: #44badd;
  color: #143b75;
}

.workbench-page .btn-action.copied {
  background: var(--success-green);
  border-color: var(--success-green);
  color: #ffffff;
}

.workbench-page .control-panel,
.workbench-page .output-panel,
.workbench-page details.scheme-accordion {
  border-color: var(--tech-line);
  box-shadow: 0 9px 26px rgb(31 89 155 / 0.07);
}

.workbench-page .control-panel,
.workbench-page details.scheme-accordion {
  background: #ffffff;
}

.workbench-page .output-panel,
.workbench-page .output-content-row {
  background: #f1f7ff;
}

.workbench-page input[type='text'],
.workbench-page input[type='number'] {
  border-color: #b8cce8;
  color: var(--tech-ink);
  background: #ffffff;
}

.workbench-page input[type='text']:focus,
.workbench-page input[type='number']:focus {
  box-shadow: 0 0 0 3px rgb(56 199 237 / 0.19);
}

.workbench-page .gcp-message-badge {
  background: #e4f7ff;
  border-color: #a3dbed;
  color: #125b80;
}

.workbench-page .output-engine h2 {
  color: #153b79;
  border-bottom-color: #c7e4f6;
}

.workbench-page summary.scheme-summary.lossless {
  background: #d9f7f1;
  color: #075b58;
}

.workbench-page summary.scheme-summary.lossless:hover {
  background: #c2efe7;
}

.workbench-page summary.scheme-summary.lossy {
  background: #fff0d2;
  color: #775020;
}

.workbench-page summary.scheme-summary.lossy:hover {
  background: #ffe5b2;
}

.workbench-page .output-value-text,
.workbench-page .binary {
  color: #142d52;
}

@media (max-width: 600px) {
  body.workbench-page {
    padding: 10px;
  }

  .workbench-page .container {
    padding: 16px;
  }

  .workbench-page h1 {
    font-size: 1.35rem;
    line-height: 1.35;
    padding: 14px;
    overflow-wrap: anywhere;
  }

  .workbench-page .syntax-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
  }

  .workbench-page .syntax-label {
    grid-column: 1 / -1;
    margin-top: 6px;
  }

  .workbench-page .syntax-code-wrapper {
    grid-column: 1;
  }

  .workbench-page .syntax-grid .btn-demo {
    grid-column: 2;
  }

  .workbench-page .control-panel,
  .workbench-page .output-panel {
    padding: 16px;
  }

  .workbench-page .parameter-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .workbench-page .form-group,
  .workbench-page .input-string-container {
    min-width: 0;
  }
}

/* Developer guide */
.guide-page .sidebar {
  background-color: #091b3a;
  background-image:
    radial-gradient(circle at 10% 0%, rgb(52 215 255 / 0.16), transparent 42%),
    radial-gradient(circle at 95% 100%, rgb(128 103 222 / 0.23), transparent 44%),
    linear-gradient(160deg, #071832 0%, #103268 67%, #1c2353 100%);
  border-right-color: rgb(91 216 255 / 0.22);
  box-shadow: 8px 0 26px rgb(10 29 68 / 0.13);
}

.guide-page .sidebar-header {
  border-bottom-color: rgb(91 216 255 / 0.2);
}

.guide-page .sidebar-logo {
  background: linear-gradient(135deg, #ffffff, #d5edff);
  border: 1px solid #72dcf4;
  color: #153b75;
  box-shadow: 0 0 18px rgb(66 218 250 / 0.25);
}

.guide-page .nav-item.active {
  background: rgb(66 218 250 / 0.15);
  border-left-color: #46ddfa;
  color: #effdff;
}

.guide-page .btn-clear-search-link {
  color: #79e4ff;
}

.guide-page .btn-open-workbench {
  background: linear-gradient(115deg, rgb(66 218 250 / 0.2), rgb(128 103 222 / 0.19));
  border-color: rgb(108 222 252 / 0.65);
  box-shadow: 0 0 17px rgb(66 218 250 / 0.13);
}

.guide-page .btn-open-workbench:hover {
  background: #53dcf8;
  border-color: #9cecff;
  color: #08244b;
}

.guide-page .content-area {
  background-color: #edf4ff;
  background-image:
    radial-gradient(circle at 95% 0%, rgb(124 111 229 / 0.13), transparent 35%),
    radial-gradient(circle at 2% 30%, rgb(66 218 250 / 0.11), transparent 31%),
    linear-gradient(rgb(38 113 179 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(38 113 179 / 0.035) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
}

.guide-page .hero-banner {
  background: linear-gradient(118deg, #092145 0%, #154381 57%, #302765 100%);
  border: 1px solid rgb(105 218 255 / 0.42);
  box-shadow: 0 18px 42px rgb(22 52 113 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.13);
}

.guide-page .hero-banner::before {
  content: '';
  position: absolute;
  width: 270px;
  height: 270px;
  right: 8%;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(66 218 250 / 0.32), transparent 69%);
  pointer-events: none;
}

.guide-page .hero-badge {
  background: #5de1f9;
  color: #082749;
}

.guide-page .doc-section {
  background: linear-gradient(180deg, #ffffff 0%, #fafdff 100%);
  border-color: #cfdff5;
  box-shadow: 0 12px 32px rgb(27 68 134 / 0.075);
}

.guide-page .section-icon {
  background: linear-gradient(135deg, #d5f7ff, #e8e6ff);
  color: #15588a;
}

.guide-page table.data-table th {
  background: linear-gradient(90deg, #e5f5ff, #edf0ff);
}

.guide-page table.data-table tr:hover td {
  background-color: #eef8ff;
}

.guide-page code {
  background: #eaf3ff;
  color: #183e73;
  border-color: #c6dff5;
}

.guide-page .code-block-container,
.guide-page pre,
.guide-page pre code {
  background: #081b36 !important;
  border-color: #254369;
  color: #e3f7ff !important;
}

.guide-page .code-block-header {
  background: #112746;
  border-bottom-color: #254369;
  color: #bfd5eb;
}

.guide-page .btn-back-to-top {
  background: linear-gradient(135deg, #1269ae, #514bb6);
  border-color: #73dbef;
  box-shadow: 0 8px 24px rgb(31 103 189 / 0.24);
}

.workbench-page :is(a, button, input, summary):focus-visible,
.guide-page :is(a, button, input, summary):focus-visible {
  outline: 2px solid #18a7d8;
  outline-offset: 3px;
}