.sat4-root,.sat4-root *{box-sizing:border-box}
.sat4-root{
  isolation:isolate;
  position:relative;
  width:100%;
  max-width:100%;
  color:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.sat4-root h1,.sat4-root h2,.sat4-root h3,.sat4-root h4,.sat4-root h5,.sat4-root h6,.sat4-root p{margin:0}
.sat4-root button,.sat4-root input,.sat4-root select,.sat4-root svg{font:inherit}
.sat4-shell{max-width:1800px;margin:0 auto;padding:12px}
.sat4-app{
  background:#09090b;
  border:1px solid #27272a;
  border-radius:24px;
  min-height:82vh;
  overflow:hidden;
  box-shadow:0 20px 70px rgba(0,0,0,.35);
}
.sat4-grid{
  display:grid;
  grid-template-columns:270px 290px minmax(0,1fr) 270px;
  gap:12px;
  min-height:calc(100vh - 56px);
  padding:12px;
}
.sat4-panel{
  background:rgba(24,24,27,.88);
  border:1px solid #27272a;
  border-radius:18px;
  overflow:auto;
  min-width:0;
}
.sat4-head{padding:16px;border-bottom:1px solid #27272a}
.sat4-title{font-size:20px;font-weight:700;line-height:1.1;letter-spacing:-.01em;color:#fff}
.sat4-sub{margin-top:6px;font-size:12px;line-height:1.45;color:#a1a1aa}
.sat4-body{padding:16px}
.sat4-stack>*+*{margin-top:12px}
.sat4-row label{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#e4e4e7;margin-bottom:6px}
.sat4-input,.sat4-select,.sat4-button,.sat4-color{
  width:100%;
  border:1px solid #3f3f46;
  background:#09090b;
  color:#fff;
  border-radius:12px;
}
.sat4-input,.sat4-select{height:38px;padding:0 10px}
.sat4-color{height:38px;padding:4px}
.sat4-range{width:100%}
.sat4-button{
  height:38px;
  padding:0 10px;
  cursor:pointer;
}
.sat4-button:hover{background:#18181b}
.sat4-button.primary{background:#fff;color:#000}
.sat4-button:disabled{opacity:.4;cursor:not-allowed}
.sat4-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sat4-switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #27272a;
  background:#09090b;
  border-radius:14px;
}
.sat4-switch small{display:block;color:#71717a;font-size:11px;margin-top:2px}
.sat4-previewwrap{display:flex;flex-direction:column;height:100%}
.sat4-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}
.sat4-stat{padding:10px;border:1px solid #27272a;border-radius:14px;background:#09090b}
.sat4-stat b{display:block;font-size:10px;color:#71717a;text-transform:uppercase;letter-spacing:.18em;margin-bottom:4px}
.sat4-preview{flex:1;min-height:540px;padding:12px;background:radial-gradient(circle at center,rgba(255,255,255,.04),transparent 55%)}
.sat4-canvasbox{height:100%;background:#000;border:1px solid #27272a;border-radius:18px;padding:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.sat4-svg{width:100%;height:100%;display:block}
.sat4-footer{padding:12px;border-top:1px solid #27272a;background:#09090b}
.sat4-card{border:1px solid #27272a;border-radius:16px;background:rgba(24,24,27,.78);padding:12px}
.sat4-cardtitle{display:flex;align-items:center;gap:8px;font-size:12px;color:#e4e4e7;margin-bottom:8px}
.sat4-note{font-size:11px;color:#71717a}
.sat4-chiprow{display:flex;flex-wrap:wrap;gap:8px}
.sat4-chip{
  display:inline-flex;align-items:center;gap:8px;border:1px solid #3f3f46;background:#09090b;color:#fff;
  border-radius:999px;padding:6px 12px;font-size:12px
}
.sat4-preset{display:flex;align-items:center;gap:8px;border:1px solid #27272a;background:#09090b;border-radius:12px;padding:8px}
.sat4-preset button{width:auto}
.sat4-presetname{flex:1;text-align:left;background:none;border:none;color:#fff;padding:0;cursor:pointer}

  .sat4-stats{grid-template-columns:repeat(3,1fr)}
  .sat4-preview{min-height:430px}
}


/* Variant typography */
.sat4-brand-title{
  font-family:"Press Start 2P", system-ui, sans-serif;
  letter-spacing:0.03em;
  line-height:1.25;
}


/* CRT Edition */
.sat4-root{
  color:#b7ffb1;
}
.sat4-app{
  background:#07110a;
  border-color:#1e5f2f;
  box-shadow:0 0 0 1px rgba(63,255,129,.08), 0 16px 50px rgba(0,0,0,.45), inset 0 0 80px rgba(0,255,128,.04);
  position:relative;
}
.sat4-app::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(160,255,160,.05) 0px, rgba(160,255,160,.05) 1px, transparent 2px, transparent 4px),
    radial-gradient(circle at center, rgba(120,255,120,.06), transparent 65%);
  mix-blend-mode:screen;
}
.sat4-panel{
  background:rgba(7,17,10,.88);
  border-color:#1e5f2f;
  box-shadow:inset 0 0 0 1px rgba(63,255,129,.04);
}
.sat4-head,.sat4-footer{
  border-color:#1e5f2f;
  background:rgba(6,14,8,.72);
}
.sat4-title{
  color:#b7ffb1;
}
.sat4-brand-title{
  font-family:"Press Start 2P", system-ui, sans-serif;
  color:#9dff8a;
  font-size:10px;
  line-height:1.2;
  letter-spacing:0.01em;
  transform:scaleX(0.9);
  transform-origin:left;
  white-space:nowrap;
  text-shadow:0 0 4px rgba(125,255,125,.28), 0 0 12px rgba(125,255,125,.12);
}
.sat4-sub,.sat4-note{
  color:#77c77f;
  font-family:"VT323", monospace;
  font-size:18px;
  line-height:1.2;
}
.sat4-row label,.sat4-cardtitle,.sat4-chip,.sat4-stat b,.sat4-stat div,.sat4-switch div,.sat4-switch span{
  color:#b7ffb1;
}
.sat4-input,.sat4-select,.sat4-button,.sat4-color,.sat4-switch,.sat4-stat,.sat4-card,.sat4-preset{
  background:#08110a;
  border-color:#1e5f2f;
  color:#b7ffb1;
}
.sat4-button:hover{
  background:#102014;
}
.sat4-button.primary{
  background:#9dff8a;
  color:#08110a;
  border-color:#9dff8a;
}
.sat4-preview{
  background:radial-gradient(circle at center, rgba(125,255,125,.07), transparent 55%);
}
.sat4-canvasbox{
  background:#020603;
  border-color:#1e5f2f;
  box-shadow:inset 0 0 0 1px rgba(63,255,129,.05), inset 0 0 80px rgba(125,255,125,.03);
}


/* CRT green polish */
.sat4-root .sat4-note,
.sat4-root .sat4-sub,
.sat4-root .sat4-stat b,
.sat4-root .sat4-switch small,
.sat4-root .sat4-card .sat4-note,
.sat4-root option,
.sat4-root ::placeholder{
  color:#77c77f !important;
}

.sat4-root .sat4-row label,
.sat4-root .sat4-cardtitle,
.sat4-root .sat4-chip,
.sat4-root .sat4-stat div,
.sat4-root .sat4-switch div,
.sat4-root .sat4-switch span,
.sat4-root .sat4-input,
.sat4-root .sat4-select,
.sat4-root .sat4-button{
  color:#b7ffb1 !important;
}

.sat4-root .sat4-range{
  accent-color:#66ff99;
  filter: drop-shadow(0 0 1px rgba(125,255,125,.18));
}

.sat4-root input[type="range"]::-webkit-slider-runnable-track{
  background:#16301c;
  border:1px solid #1e5f2f;
  border-radius:999px;
  height:6px;
}
.sat4-root input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  margin-top:-6px;
  width:16px;
  height:16px;
  border-radius:999px;
  background:#9dff8a;
  border:1px solid #1e5f2f;
  box-shadow:0 0 6px rgba(125,255,125,.35);
}
.sat4-root input[type="range"]::-moz-range-track{
  background:#16301c;
  border:1px solid #1e5f2f;
  border-radius:999px;
  height:6px;
}
.sat4-root input[type="range"]::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:999px;
  background:#9dff8a;
  border:1px solid #1e5f2f;
  box-shadow:0 0 6px rgba(125,255,125,.35);
}

.sat4-root .sat4-input,
.sat4-root .sat4-select,
.sat4-root .sat4-color{
  box-shadow:inset 0 0 0 1px rgba(125,255,125,.05);
}

.sat4-root .sat4-button:hover{
  color:#d7ffd0 !important;
}


/* Default CRT canvas background green */
.sat4-root svg{
  background:#021a08 !important;
}



/* CRT boot animation */
.sat4-boot{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at center, rgba(120,255,120,.08), transparent 55%),
    #031108;
  color:#9dff8a;
  text-shadow:0 0 6px rgba(125,255,125,.35);
  overflow:hidden;
  pointer-events:none;
  opacity:1;
  transition:opacity .45s ease;
}
.sat4-boot.is-hidden{
  opacity:0;
}
.sat4-boot::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(to bottom, rgba(160,255,160,.06) 0px, rgba(160,255,160,.06) 1px, transparent 2px, transparent 4px);
  opacity:.75;
}
.sat4-boot-inner{
  position:relative;
  width:min(760px, 88%);
  font-family:"VT323", monospace;
  font-size:28px;
  line-height:1.1;
  letter-spacing:.03em;
}
.sat4-boot-logo{
  font-family:"Press Start 2P", system-ui, sans-serif;
  font-size:16px;
  line-height:1.5;
  color:#b7ffb1;
  margin-bottom:18px;
  text-shadow:0 0 8px rgba(125,255,125,.32);
}
.sat4-boot-line{
  opacity:0;
  transform:translateY(4px);
  animation:sat4BootLine .42s ease forwards;
}
.sat4-boot-line:nth-child(2){ animation-delay:.16s; }
.sat4-boot-line:nth-child(3){ animation-delay:.42s; }
.sat4-boot-line:nth-child(4){ animation-delay:.76s; }
.sat4-boot-line:nth-child(5){ animation-delay:1.08s; }
.sat4-boot-progress{
  margin-top:18px;
  height:10px;
  border:1px solid #1e5f2f;
  background:#08110a;
  box-shadow:inset 0 0 0 1px rgba(125,255,125,.05);
  position:relative;
}
.sat4-boot-progress-bar{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:linear-gradient(90deg, #3adb66, #9dff8a);
  box-shadow:0 0 10px rgba(125,255,125,.35);
  animation:sat4BootBar 2.6s ease forwards;
}
.sat4-boot-flicker{
  position:absolute;
  inset:0;
  background:rgba(160,255,160,.035);
  mix-blend-mode:screen;
  animation:sat4BootFlicker .14s steps(2,end) infinite;
}
@keyframes sat4BootLine{
  to{ opacity:1; transform:translateY(0); }
}
@keyframes sat4BootBar{
  from{ width:0; }
  to{ width:100%; }
}
@keyframes sat4BootFlicker{
  0%{ opacity:.35; }
  50%{ opacity:.08; }
  100%{ opacity:.28; }
}


/* CRT v4 tweaks */
.sat4-root .sat4-preview svg,
.sat4-root .sat4-svg,
.sat4-root .sat4-canvasbox,
.sat4-root .sat4-canvasbox svg{
  background:#021a08 !important;
}

.sat4-root .sat4-input[type="number"],
.sat4-root .sat4-input,
.sat4-root input[type="number"].sat4-input{
  background:#08110a !important;
  color:#b7ffb1 !important;
  border-color:#1e5f2f !important;
}

.sat4-root .sat4-button.primary{
  background:#08110a !important;
  color:#b7ffb1 !important;
  border:1px solid #1e5f2f !important;
  box-shadow:inset 0 0 0 1px rgba(125,255,125,.05);
}
.sat4-root .sat4-button.primary:hover{
  background:#102014 !important;
  color:#d7ffd0 !important;
}

.sat4r-root{width:100%;}

/* Retro theme color toggle */
.sat4-root{
  --crt-bg:#021a08;
  --crt-primary:#9dff8a;
  --crt-secondary:#77c77f;
  --crt-accent:#3adb66;
  --crt-border:#1e5f2f;
}
.sat4-root.sat4-theme-orange{
  --crt-bg:#1a0d02;
  --crt-primary:#ffb347;
  --crt-secondary:#cc8a3c;
  --crt-accent:#ff8c00;
  --crt-border:#5a2e00;
}
.sat4-root.sat4-theme-orange .sat4-app{
  background:#120a04;
  border-color:var(--crt-border);
}
.sat4-root.sat4-theme-orange .sat4-panel,
.sat4-root.sat4-theme-orange .sat4-head,
.sat4-root.sat4-theme-orange .sat4-footer,
.sat4-root.sat4-theme-orange .sat4-card,
.sat4-root.sat4-theme-orange .sat4-input,
.sat4-root.sat4-theme-orange .sat4-select,
.sat4-root.sat4-theme-orange .sat4-button,
.sat4-root.sat4-theme-orange .sat4-switch,
.sat4-root.sat4-theme-orange .sat4-stat,
.sat4-root.sat4-theme-orange .sat4-preset{
  border-color:var(--crt-border) !important;
}
.sat4-root.sat4-theme-orange .sat4-input,
.sat4-root.sat4-theme-orange .sat4-select,
.sat4-root.sat4-theme-orange .sat4-color,
.sat4-root.sat4-theme-orange .sat4-button,
.sat4-root.sat4-theme-orange .sat4-switch,
.sat4-root.sat4-theme-orange .sat4-stat,
.sat4-root.sat4-theme-orange .sat4-card,
.sat4-root.sat4-theme-orange .sat4-preset,
.sat4-root.sat4-theme-orange .sat4-canvasbox{
  background:#1a0d02 !important;
  color:var(--crt-primary) !important;
}
.sat4-root.sat4-theme-orange .sat4-preview,
.sat4-root.sat4-theme-orange .sat4-preview svg,
.sat4-root.sat4-theme-orange .sat4-svg,
.sat4-root.sat4-theme-orange .sat4-canvasbox svg{
  background:#1a0d02 !important;
}
.sat4-root.sat4-theme-orange .sat4-brand-title,
.sat4-root.sat4-theme-orange .sat4-title,
.sat4-root.sat4-theme-orange .sat4-row label,
.sat4-root.sat4-theme-orange .sat4-cardtitle,
.sat4-root.sat4-theme-orange .sat4-chip,
.sat4-root.sat4-theme-orange .sat4-stat div,
.sat4-root.sat4-theme-orange .sat4-stat b,
.sat4-root.sat4-theme-orange .sat4-note,
.sat4-root.sat4-theme-orange .sat4-sub,
.sat4-root.sat4-theme-orange .sat4-switch div,
.sat4-root.sat4-theme-orange .sat4-switch small{
  color:var(--crt-primary) !important;
}
.sat4-root.sat4-theme-orange input[type="range"]{
  accent-color:#ffb347;
}
.sat4-root.sat4-theme-orange input[type="range"]::-webkit-slider-runnable-track{
  background:#3a1d07;
  border-color:var(--crt-border);
}
.sat4-root.sat4-theme-orange input[type="range"]::-webkit-slider-thumb{
  background:#ffb347;
  border-color:var(--crt-border);
  box-shadow:0 0 6px rgba(255,179,71,.35);
}
.sat4-root.sat4-theme-orange input[type="range"]::-moz-range-track{
  background:#3a1d07;
  border-color:var(--crt-border);
}
.sat4-root.sat4-theme-orange input[type="range"]::-moz-range-thumb{
  background:#ffb347;
  border-color:var(--crt-border);
  box-shadow:0 0 6px rgba(255,179,71,.35);
}
.sat4-theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:0;
  padding:4px 8px;
  height:28px;
  margin-top:8px;
  font-size:10px;
  line-height:1;
  opacity:.88;
}


/* Retro theme toggle v3 refinements */
.sat4-theme-switch{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:8px;
  cursor:pointer;
  user-select:none;
}
.sat4-theme-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.sat4-theme-slider{
  position:relative;
  width:30px;
  height:16px;
  border-radius:999px;
  background:#08110a;
  border:1px solid var(--crt-border);
  box-shadow:inset 0 0 0 1px rgba(125,255,125,.04);
  flex:0 0 auto;
}
.sat4-theme-slider::after{
  content:"";
  position:absolute;
  top:1px;
  left:1px;
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--crt-primary);
  box-shadow:0 0 6px rgba(125,255,125,.28);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.sat4-theme-switch input:checked + .sat4-theme-slider::after{
  transform:translateX(14px);
  background:#ffb347;
  box-shadow:0 0 6px rgba(255,179,71,.28);
}
.sat4-theme-label{
  font-size:10px;
  line-height:1;
  color:var(--crt-secondary);
}

/* Make whole shell black, not green-tinted */
.sat4-root,
.sat4-root .sat4-app,
.sat4-root .sat4-panel,
.sat4-root .sat4-head,
.sat4-root .sat4-footer,
.sat4-root .sat4-card,
.sat4-root .sat4-switch,
.sat4-root .sat4-stat,
.sat4-root .sat4-preset,
.sat4-root .sat4-input,
.sat4-root .sat4-select,
.sat4-root .sat4-color,
.sat4-root .sat4-button{
  background:#050505 !important;
}
.sat4-root .sat4-preview{
  background:#050505 !important;
}
.sat4-root .sat4-canvasbox,
.sat4-root .sat4-preview svg,
.sat4-root .sat4-svg,
.sat4-root .sat4-canvasbox svg{
  background:#000000 !important;
}

/* Remove green line around the canvas region */
.sat4-root .sat4-canvasbox{
  border-color:#101010 !important;
  box-shadow:none !important;
}
.sat4-root .sat4-preview{
  border:none !important;
  box-shadow:none !important;
}

/* Seed field should match others and not glow green */
.sat4-root .sat4-input[type="number"],
.sat4-root input[type="number"].sat4-input{
  background:#050505 !important;
  border:1px solid var(--crt-border) !important;
  color:var(--crt-primary) !important;
  box-shadow:none !important;
}

/* Orange mode black shell, only accents change */
.sat4-root.sat4-theme-orange .sat4-app,
.sat4-root.sat4-theme-orange .sat4-panel,
.sat4-root.sat4-theme-orange .sat4-head,
.sat4-root.sat4-theme-orange .sat4-footer,
.sat4-root.sat4-theme-orange .sat4-card,
.sat4-root.sat4-theme-orange .sat4-switch,
.sat4-root.sat4-theme-orange .sat4-stat,
.sat4-root.sat4-theme-orange .sat4-preset,
.sat4-root.sat4-theme-orange .sat4-input,
.sat4-root.sat4-theme-orange .sat4-select,
.sat4-root.sat4-theme-orange .sat4-color,
.sat4-root.sat4-theme-orange .sat4-button,
.sat4-root.sat4-theme-orange .sat4-preview{
  background:#050505 !important;
}
.sat4-root.sat4-theme-orange .sat4-canvasbox,
.sat4-root.sat4-theme-orange .sat4-preview svg,
.sat4-root.sat4-theme-orange .sat4-svg,
.sat4-root.sat4-theme-orange .sat4-canvasbox svg{
  background:#000000 !important;
}
.sat4-root.sat4-theme-orange .sat4-canvasbox{
  border-color:#101010 !important;
  box-shadow:none !important;
}


/* HARD RESET TO TRUE BLACK + REMOVE ALL GREEN OUTLINES */
.sat4-root,
.sat4-root * {
  box-shadow: none !important;
}

.sat4-root {
  background: #000000 !important;
}

.sat4-root .sat4-app,
.sat4-root .sat4-panel,
.sat4-root .sat4-card,
.sat4-root .sat4-head,
.sat4-root .sat4-footer {
  background: #000000 !important;
  border-color: #111111 !important;
}

/* Fix stroke & background color pickers */
.sat4-root .sat4-color,
.sat4-root input[type="color"] {
  background: #000000 !important;
  border: 1px solid #111111 !important;
  outline: none !important;
}

/* Remove any green glow/outline on inputs */
.sat4-root input,
.sat4-root select {
  outline: none !important;
  box-shadow: none !important;
  border-color: #111111 !important;
}

/* Canvas container fix */
.sat4-root .sat4-canvasbox,
.sat4-root .sat4-preview {
  background: #000000 !important;
  border: none !important;
}

/* SVG background */
.sat4-root svg {
  background: #000000 !important;
}

/* Ensure orange mode doesn't reintroduce green */
.sat4-root.sat4-theme-orange * {
  box-shadow: none !important;
}


/* tighten toggle spacing (no label) */
.sat4-theme-switch{
  gap:0 !important;
}


/* toggle FX */
.sat4-theme-switch{
  position:relative;
}
.sat4-theme-switch.is-pulsing .sat4-theme-slider{
  animation:sat4ThemePulse .34s ease;
}
.sat4-theme-switch.is-pulsing .sat4-theme-slider::after{
  animation:sat4ThemeKnobFlash .34s ease;
}
.sat4-root.theme-flash-green .sat4-app::after,
.sat4-root.theme-flash-orange .sat4-app::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  animation:sat4ThemeScreenFlash .32s ease;
}
.sat4-root.theme-flash-green .sat4-app::after{
  background:radial-gradient(circle at center, rgba(157,255,138,.12), transparent 58%);
}
.sat4-root.theme-flash-orange .sat4-app::after{
  background:radial-gradient(circle at center, rgba(255,179,71,.12), transparent 58%);
}
@keyframes sat4ThemePulse{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}
@keyframes sat4ThemeKnobFlash{
  0%{ box-shadow:0 0 6px rgba(125,255,125,.28); }
  50%{ box-shadow:0 0 12px rgba(255,255,255,.32); }
  100%{ box-shadow:0 0 6px rgba(125,255,125,.28); }
}
@keyframes sat4ThemeScreenFlash{
  0%{ opacity:0; }
  35%{ opacity:1; }
  100%{ opacity:0; }
}


/* Outer breathing room like modern version */
.sat4-root{
  background: transparent !important;
  padding: 12px !important;
}

.sat4-root .sat4-app{
  background:#000000 !important;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 0 1px #111111;
}


/* Bring back contrast for green theme borders */
.sat4-root:not(.sat4-theme-orange) .sat4-panel,
.sat4-root:not(.sat4-theme-orange) .sat4-card,
.sat4-root:not(.sat4-theme-orange) .sat4-stat,
.sat4-root:not(.sat4-theme-orange) .sat4-switch,
.sat4-root:not(.sat4-theme-orange) .sat4-preset,
.sat4-root:not(.sat4-theme-orange) .sat4-input,
.sat4-root:not(.sat4-theme-orange) .sat4-select,
.sat4-root:not(.sat4-theme-orange) .sat4-button {
  border: 1px solid rgba(80, 255, 140, 0.35) !important;
}

/* Slight glow to restore CRT feel but subtle */
.sat4-root:not(.sat4-theme-orange) .sat4-panel,
.sat4-root:not(.sat4-theme-orange) .sat4-card {
  box-shadow: 0 0 6px rgba(80,255,140,0.08);
}

/* Restore outer container shadow */
.sat4-root .sat4-app{
  box-shadow:
    0 10px 30px rgba(0,0,0,0.6),
    0 0 0 1px #111111;
}

/* Make section dividers a bit more visible */
.sat4-root:not(.sat4-theme-orange) .sat4-head,
.sat4-root:not(.sat4-theme-orange) .sat4-footer {
  border-bottom: 1px solid rgba(80,255,140,0.25);
}



/* Restore modern-style outer shadow */
.sat4-root {
  padding: 14px !important;
}

.sat4-root .sat4-app {
  background:#000000 !important;
  border-radius:14px;
  overflow:hidden;

  /* Modern-style shadow */
  box-shadow:
    0 20px 60px rgba(0,0,0,0.65),
    0 8px 20px rgba(0,0,0,0.35),
    0 0 0 1px #111111;
}



/* Fix divider lines above/below canvas in green mode */
.sat4-root:not(.sat4-theme-orange) .sat4-preview,
.sat4-root:not(.sat4-theme-orange) .sat4-canvasbox {
  border-top: 1px solid rgba(80,255,140,0.35) !important;
  border-bottom: 1px solid rgba(80,255,140,0.35) !important;
}

/* Ensure consistency with other divider lines */
.sat4-root:not(.sat4-theme-orange) .sat4-preview::before,
.sat4-root:not(.sat4-theme-orange) .sat4-preview::after {
  border-color: rgba(80,255,140,0.35) !important;
}



/* GLOBAL divider consistency fix (green mode only) */
.sat4-root:not(.sat4-theme-orange) * {
  border-color: rgba(80,255,140,0.35) !important;
}

/* specifically reinforce vertical dividers */
.sat4-root:not(.sat4-theme-orange) .sat4-panel,
.sat4-root:not(.sat4-theme-orange) .sat4-card,
.sat4-root:not(.sat4-theme-orange) .sat4-stat,
.sat4-root:not(.sat4-theme-orange) .sat4-switch,
.sat4-root:not(.sat4-theme-orange) .sat4-preset {
  border: 1px solid rgba(80,255,140,0.35) !important;
}

/* fix the divider under the toggle area */
.sat4-root:not(.sat4-theme-orange) .sat4-theme-switch {
  border-bottom: 1px solid rgba(80,255,140,0.35);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

/* ensure column separators match too */
.sat4-root:not(.sat4-theme-orange) .sat4-grid > * {
  border-color: rgba(80,255,140,0.35) !important;
}



/* =========================
   CUSTOM CHECKBOXES (CRT)
   ========================= */

/* Base checkbox reset */
.sat4-root input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:14px;
  height:14px;
  border-radius:2px;
  background:#000000;
  cursor:pointer;
  position:relative;
  display:inline-block;
  border:1px solid rgba(80,255,140,0.6); /* green default */
}

/* Green mode */
.sat4-root:not(.sat4-theme-orange) input[type="checkbox"]{
  border-color: rgba(80,255,140,0.6);
}

.sat4-root:not(.sat4-theme-orange) input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:3px;
  top:0px;
  width:5px;
  height:9px;
  border:2px solid rgba(80,255,140,0.95);
  border-top:none;
  border-left:none;
  transform:rotate(45deg);
}

/* Orange mode */
.sat4-root.sat4-theme-orange input[type="checkbox"]{
  border-color: rgba(255,179,71,0.7);
}

.sat4-root.sat4-theme-orange input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:3px;
  top:0px;
  width:5px;
  height:9px;
  border:2px solid rgba(255,179,71,0.95);
  border-top:none;
  border-left:none;
  transform:rotate(45deg);
}

/* Remove ANY default browser styling */
.sat4-root input[type="checkbox"]:focus,
.sat4-root input[type="checkbox"]:active{
  outline:none !important;
  box-shadow:none !important;
}



/* ===== v13 polish fixes ===== */

/* 1) Brighten the vertical divider lines around the canvas/stat area in green mode */
.sat4-root:not(.sat4-theme-orange) .sat4-grid > .sat4-panel,
.sat4-root:not(.sat4-theme-orange) .sat4-previewwrap,
.sat4-root:not(.sat4-theme-orange) .sat4-head,
.sat4-root:not(.sat4-theme-orange) .sat4-footer{
  border-color: rgba(80,255,140,0.35) !important;
}

.sat4-root:not(.sat4-theme-orange) .sat4-preview{
  border-left: 1px solid rgba(80,255,140,0.35) !important;
  border-right: 1px solid rgba(80,255,140,0.35) !important;
}

/* 2) Remove the extra line under the toggle and left-justify it */
.sat4-root .sat4-theme-switch{
  display: inline-flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border: none !important;
  width: auto !important;
  align-self: flex-start !important;
}

.sat4-root .sat4-theme-switch::before,
.sat4-root .sat4-theme-switch::after{
  display:none !important;
  content:none !important;
}

.sat4-root .sat4-theme-label{
  display:none !important;
}

/* 3) Orange mode checkbox outline/check visibility */
.sat4-root.sat4-theme-orange input[type="checkbox"]{
  appearance:none !important;
  -webkit-appearance:none !important;
  background:#000000 !important;
  border:1px solid rgba(255,179,71,0.85) !important;
  box-shadow:none !important;
  outline:none !important;
  position:relative !important;
}

.sat4-root.sat4-theme-orange input[type="checkbox"]:checked::after{
  content:"" !important;
  position:absolute !important;
  left:3px !important;
  top:0px !important;
  width:5px !important;
  height:9px !important;
  border:2px solid rgba(255,179,71,0.98) !important;
  border-top:none !important;
  border-left:none !important;
  transform:rotate(45deg) !important;
}

/* 4) Also reinforce green mode checkbox visibility so both modes match */
.sat4-root:not(.sat4-theme-orange) input[type="checkbox"]{
  background:#000000 !important;
  border:1px solid rgba(80,255,140,0.85) !important;
}

.sat4-root:not(.sat4-theme-orange) input[type="checkbox"]:checked::after{
  border:2px solid rgba(80,255,140,0.98) !important;
  border-top:none !important;
  border-left:none !important;
}

/* 5) Nudge the toggle area snug under the title block */
.sat4-root .sat4-brand-title + .sat4-theme-switch{
  margin-left: 0 !important;
}


/* ===== v14 FINAL ALIGNMENT + CANVAS CLEAN ===== */

/* FORCE toggle fully left aligned like title text */
.sat4-root .sat4-head,
.sat4-root .sat4-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start !important;
}

.sat4-root .sat4-theme-switch{
  margin-left:0 !important;
  padding-left:0 !important;
  left:0 !important;
  transform:none !important;
}

/* Remove rounded border container around drawing area completely */
.sat4-root .sat4-canvasbox,
.sat4-root .sat4-preview{
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Remove any pseudo borders that create that rounded frame */
.sat4-root .sat4-canvasbox::before,
.sat4-root .sat4-canvasbox::after,
.sat4-root .sat4-preview::before,
.sat4-root .sat4-preview::after{
  display:none !important;
  content:none !important;
}

/* Ensure canvas sits clean with no top/bottom lines */
.sat4-root .sat4-preview{
  border-top:none !important;
  border-bottom:none !important;
}



/* v15 remove only the horizontal lines above and below the canvas */
.sat4-root .sat4-head{
  border-bottom: none !important;
}
.sat4-root .sat4-footer{
  border-top: none !important;
}

/* keep side separators visible */
.sat4-root .sat4-preview{
  border-left: 1px solid rgba(80,255,140,0.35) !important;
  border-right: 1px solid rgba(80,255,140,0.35) !important;
  border-top: none !important;
  border-bottom: none !important;
}
.sat4-root.sat4-theme-orange .sat4-preview{
  border-left: 1px solid rgba(255,179,71,0.35) !important;
  border-right: 1px solid rgba(255,179,71,0.35) !important;
  border-top: none !important;
  border-bottom: none !important;
}




/* ===== Corrected responsive behavior ===== */
/* Desktop: preserve original multi-column layout */
@media (min-width: 1201px){
  .sat4-grid{
    grid-template-columns: 270px 290px minmax(0,1fr) 270px !important;
    min-height: calc(100vh - 56px) !important;
  }
  .sat4-hide-mid{
    display: block !important;
  }
}

/* Tablet landscape / small laptops: keep controls visible, compress to 3 columns */
@media (max-width: 1200px) and (min-width: 901px){
  .sat4-grid{
    grid-template-columns: 260px minmax(0,1fr) 260px !important;
    min-height: auto !important;
  }

  .sat4-hide-mid{
    display: block !important;
  }

  .sat4-panel{
    overflow: auto !important;
  }

  .sat4-preview{
    min-height: 420px !important;
  }

  .sat4-stats{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Tablet portrait and below: stack panels, but keep sliders visible */
@media (max-width: 900px){
  .sat4-grid{
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .sat4-hide-mid{
    display: block !important;
  }

  .sat4-shell{
    padding: 10px !important;
  }

  .sat4-head,
  .sat4-body,
  .sat4-footer{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .sat4-panel{
    overflow: visible !important;
  }

  .sat4-preview{
    min-height: 360px !important;
    padding: 10px !important;
  }

  .sat4-stats{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

/* Phones */
@media (max-width: 560px){
  .sat4-title{
    font-size: 18px !important;
  }

  .sat4-grid2{
    grid-template-columns: 1fr 1fr !important;
  }

  .sat4-stat{
    padding: 8px !important;
  }

  .sat4-preview{
    min-height: 300px !important;
  }
}