html {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  margin: 0;
  background: #08090c;
}

body,
#root {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  background: #08090c;
}

body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

#root {
  height: auto;
  overflow: visible;
}

* {
  box-sizing: border-box;
}


/* ==========================================================
   SHIRE_HATCHABLE_VISUAL_PARITY_V1
   Native SHiRE engineering + Hatchable CoverCanvas styling.
   ========================================================== */

:root {
  --shire-h-bg: #03070b;
  --shire-h-panel: #071019;
  --shire-h-panel-2: #0c151f;
  --shire-h-line: #23303d;
  --shire-h-text: #f3f6f8;
  --shire-h-muted: #8e9aa7;
  --shire-h-red: #ff3b32;
  --shire-h-blue: #65c7ff;
  --shire-h-green: #23d777;
}

/* Whole CoverCanvas environment */

.shire-hatch-shell {
  min-height: 100vh;
  color: var(--shire-h-text);
  background:
    radial-gradient(
      circle at 60% 20%,
      #13202e 0%,
      #050a10 36%,
      #020406 75%
    );
}

/* Main SHiRE command bar */

.shire-hatch-top {
  border-color: #273542 !important;
  background:
    linear-gradient(
      180deg,
      rgba(3, 6, 8, .98),
      rgba(7, 12, 18, .98)
    ) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .28);
}

/* Workflow strip */

.shire-hatch-workflow {
  border-color: var(--shire-h-line) !important;
  background: rgba(5, 10, 16, .97) !important;
}

/* Navigation rail */

.shire-hatch-nav {
  border-color: var(--shire-h-line) !important;
  background: #050a10 !important;
}

/* Page workspace */

.shire-hatch-main {
  min-height: 100vh;
  background:
    linear-gradient(
      180deg,
      rgba(4, 10, 16, .30),
      rgba(3, 7, 11, .72)
    );
}

.shire-hatch-content {
  min-height: calc(100vh - 120px);
}

/* Hatchable-style panels */

.shire-hatch-shell .panel,
.shire-hatch-shell .panel-glass {
  border-color: var(--shire-h-line) !important;
  background:
    linear-gradient(
      180deg,
      rgba(12, 21, 31, .98),
      rgba(7, 16, 25, .98)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 22px 50px -34px rgba(0,0,0,.95);
}

/* Primary customer action */

.shire-hatch-shell .btn-primary {
  border-color:
    rgba(255, 59, 50, .75) !important;

  background:
    linear-gradient(
      90deg,
      #db2424,
      #ff4336
    ) !important;

  color: #fff !important;

  box-shadow:
    0 0 20px rgba(255,59,50,.13);
}

.shire-hatch-shell .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow:
    0 0 28px rgba(255,59,50,.22);
}

/* Preview / engineering accent */

.shire-hatch-shell .text-cyan-200,
.shire-hatch-shell .text-cyan-300,
.shire-hatch-shell .text-cyan-400 {
  color: var(--shire-h-blue) !important;
}

/* 3D / image viewport */

.shire-hatch-shell .viewport-grid {
  border-color:
    rgba(35,48,61,.95) !important;

  background:
    radial-gradient(
      circle,
      #192736 0%,
      #0b131d 35%,
      #060b11 70%
    ) !important;
}

/* Form controls */

.shire-hatch-shell select,
.shire-hatch-shell .field {
  border-color: #263442;
  background: #0a1119;
}

/* Scrollbars */

.shire-hatch-shell {
  scrollbar-color:
    #314151
    #071019;

  scrollbar-width: thin;
}

.shire-hatch-shell ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.shire-hatch-shell ::-webkit-scrollbar-track {
  background: #071019;
}

.shire-hatch-shell ::-webkit-scrollbar-thumb {
  background: #314151;
  border: 2px solid #071019;
  border-radius: 999px;
}

.shire-hatch-shell ::-webkit-scrollbar-thumb:hover {
  background: #415466;
}