/* Reset and base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0e0f12;
  --panel: #16181d;
  --panel-2: #1c1f26;
  --border: #2a2d35;
  --text: #e7e8ea;
  --text-dim: #8a8d96;
  --accent-success: #6fcf97;
  --accent-danger: #ff8a8a;
  --accent-primary: #5695ad;
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 5px;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  display: flex;
  min-height: 100vh;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 1.6;
  color-scheme: dark;
}

label,
input[type="checkbox"] {
  cursor: pointer;
  margin-top: 0.5rem;
}

a {
  color: var(--accent-primary);
  transition: opacity 0.2s;
}

a:hover {
  opacity: 0.8;
}

.sidebar {
  background-color: var(--panel);
  width: 340px;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  height: 100vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.main-content {
  position: relative;
  flex-grow: 1;
  margin-left: 340px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg);
  overflow: hidden;
  height: 100vh;
}

h1 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.canvas-title-row {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  /* #canvasContainer is a later sibling with its own stacking context
     (position: relative); without a real z-index here it wins paint order
     and its transparent hit-box swallows clicks meant for the button below,
     even though the button remains visually fine. */
  z-index: 2;
}

.canvas-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Sibling of the (pointer-events: none) title, so this stays clickable */
.canvas-title-btn {
  opacity: 0.6;
}

.canvas-title-btn:hover {
  opacity: 1;
}

.input-group {
  margin-bottom: 20px;
}

.drag-drop-area {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background-color: rgba(255, 255, 255, 0.02);
}

.drag-drop-area:hover {
  background-color: rgba(255, 255, 255, 0.045);
  border-color: var(--accent-primary);
}

.drag-drop-area.dragover {
  background-color: rgba(0, 122, 255, 0.1);
  border-color: var(--accent-primary);
}

.drag-drop-area button {
  margin-top: 0;
}

.drag-drop-area p {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.drag-drop-area p:last-child {
  margin-top: 6px;
}

#normalMap {
  display: none;
}

button {
  background: linear-gradient(180deg, #ffffff 15%, #c9cad0 100%);
  color: #16171a;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s;
  margin-top: 20px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

button:hover:not(:disabled) {
  filter: brightness(1.05);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

button:focus-visible {
  outline: 2px solid #8ab4ff;
  outline-offset: 2px;
}

.radio-buttons label {
  transition: all 0.2s;
  box-shadow: none;
}

button:hover,
.radio-buttons label:hover,
#knob:hover #knobCircle,
.checkbox-group div:hover {
  filter: brightness(1.05);
}

#canvasContainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#canvasWrapper {
  position: absolute;
  transform-origin: center;
  background-image:
    linear-gradient(45deg, #1c1f26 25%, transparent 25%),
    linear-gradient(-45deg, #1c1f26 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1c1f26 75%),
    linear-gradient(-45deg, transparent 75%, #1c1f26 75%);
  background-color: #2a2d35;
  background-size: 40px 40px;
  background-position:
    0 0,
    0 20px,
    20px -20px,
    -20px 0px;
}

canvas {
  display: block;
  box-shadow: 0 0 20px 4px rgb(0 0 0 / 60%);
  border: 1px solid var(--border);
}

#knobContainer {
  width: 200px;
  height: 200px;
  min-height: 200px;
  margin: 20px auto;
  position: relative;
}

#knob {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, #2b2e36 0%, #16181e 100%);
  position: relative;
  cursor: pointer;
  box-shadow: 0px 2px 20px 2px rgb(0 0 0 / 40%);
  border: 2px dotted #cacbd08a;
  background-origin: border-box;
}

#knob:hover {
  box-shadow: 0px 4px 25px 4px rgb(0 0 0 / 60%);
}

/* Rotates with the drag input; kept separate from #knob so the knob's
   own background gradient stays static (top-to-bottom) while spinning. */
#knobRotator {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* GSAP Draggable sets an inline cursor:grab on this element itself, which
     beats any non-!important stylesheet rule -- override it so most of the
     dial reads as "click to jump here" rather than "drag me". */
  cursor: crosshair !important;
  z-index: 2;
}

/* The indicator itself (line + thumb) is the actual grabbable handle. */
#knobIndicator,
#knobIndicatorThumb {
  cursor: grab;
}

/* Sibling of #knobRotator (not nested inside it) so this -- gradient AND
   the angle readout inside it -- stays static instead of spinning with
   the drag indicator. */
#knobCircle {
  width: 63px;
  height: 63px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #1c1e25 15%, #282a32 100%);
  border-radius: 50%;
  position: absolute;
  box-shadow:
    0 -2px 1px rgb(0 0 0 / 40%),
    0 2px 1px rgb(255 255 255 / 11%),
    0 0 12px 12px rgb(31 34 41);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: text;
  z-index: 2;
}

#knobIndicator {
  width: 3px;
  height: 50%;
  background: linear-gradient(0deg, #00000000, #7f7fff, #7f7fff);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom center;
}

/* Grab-handle dot at the outer tip of the indicator, styled like the
   Vector Strength slider's thumb. */
#knobIndicatorThumb {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 22px;
  /* House/pin shape: flat square cap at the outer tip (top) for an
     obvious grab handle, tapering to a point at the bottom so it blends
     into the thin indicator line instead of jumping width abruptly. */
  clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
  background: linear-gradient(180deg, #ac90ff 15%, #7f7fff 100%);
  border-radius: 3px;
  /* box-shadow follows the box edges, not the clip-path silhouette --
     drop-shadow hugs the actual triangle instead. */
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55))
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.knob-marking {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);
  top: 0;
  left: 50%;
  /* Pivot at 100px down = #knobContainer's exact vertical center (it's
     200px tall), matching #knobIndicator's own pivot so the ring and the
     pointer rotate around the same point. */
  transform-origin: 50% 100px;
  /* Purely decorative -- without this, a marking sitting on top of
     #knobRotator in paint order swallows the click/drag that should have
     started the knob's rotation. */
  pointer-events: none;
}

.knob-marking.thick {
  width: 3px;
  height: 12px;
  /* -(width / 2) to sit centered on left: 50% -- must match each
     variant's own width, not share one offset. */
  margin-left: -1.5px;
  opacity: 0.8;
}

.knob-marking.thin {
  width: 1px;
  height: 8px;
  margin-left: -0.5px;
  opacity: 0.6;
}

#angleDisplay {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  min-width: 1.4em;
  max-width: 2.6em;
  display: inline-block;
  text-align: center;
  padding-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
  outline: none;
  /* The page disables selection globally (body { user-select: none }) so
     drag/UI interactions don't accidentally highlight text -- but that also
     suppresses the caret/selection from rendering inside this contenteditable,
     making focus invisible even though it worked. Opt back in here. */
  -webkit-user-select: text;
  user-select: text;
}

#angleDisplay:focus {
  outline: none;
  border-bottom-color: transparent;
  color: var(--accent-primary);
}

/* ── Reset buttons ──────────────────────────────── */
.reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #606060;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  margin: 0;
  box-shadow: none;
  transition:
    color 0.15s,
    opacity 0.15s;
}

.reset-btn:hover {
  color: #fff;
  opacity: 0.85;
  filter: none;
}

.reset-btn.is-hidden {
  /* display:none would drop this out of the flex row's layout, shifting
     the label next to it every time the button toggles -- keep the space
     reserved and just hide it visually/from interaction instead. */
  visibility: hidden;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  align-items: left;
  /* Match .radio-group's between-section rhythm -- otherwise this only gets
     whatever its first row's own padding happens to contribute, which reads
     as noticeably tighter than every other section gap. */
  margin-top: 20px;
}

.checkbox-group div {
  transition: all 0.2s;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-group label {
  margin-top: 0;
}

.checkbox-group input {
  margin-right: 0;
  margin-top: 0;
  appearance: none;
  width: 34px;
  height: 19px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #2b2e36, #16181e);
  background-origin: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.checkbox-group input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  background: var(--text-dim);
  border-radius: 50%;
  transition:
    transform 0.2s,
    background 0.2s;
}

.checkbox-group input:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

.checkbox-group input:checked {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
}

.checkbox-group input:checked::after {
  transform: translateX(15px);
  background: linear-gradient(180deg, #ffffff 15%, #b9bbc2 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.radio-group {
  margin-top: 20px;
}

.radio-group-label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.radio-group-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* Groups with a help/reset button wrap their label in this row instead of
     using .radio-group-label directly -- carry the same label-to-control
     gap here (and zero it back out on the label itself below) so every
     group's label sits the same distance from its control either way. */
  margin-bottom: 10px;
}

.radio-group-label-row .radio-group-label {
  margin-bottom: 0;
}

/* ── Backend/standard toggle (OpenGL vs DirectX) ───── */
.backend-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  padding: 3px;
  background: linear-gradient(180deg, #23262d, #16181e);
  border-radius: var(--radius-sm);
}

.backend-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  margin-top: 0;
  width: auto;
  text-decoration: none;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.045);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: none;
  transition:
    background 0.15s,
    color 0.15s;
}

.backend-option:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  filter: none;
}

.backend-option.active {
  background: linear-gradient(180deg, #ffffff 15%, #c9cad0 100%);
  color: #16171a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.backend-option.active:hover {
  background: linear-gradient(180deg, #ffffff 15%, #c9cad0 100%);
  color: #16171a;
}

.option-name {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}



.radio-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radio-group input[type="radio"] {
  display: none;
}

.radio-group label {
  flex: 1 1 auto;
  min-width: 2.4em;
  background-color: rgba(255, 255, 255, 0.045);
  color: var(--text-dim);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
}

.radio-group label:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
}

.radio-group input[type="radio"]:checked + label {
  background: linear-gradient(180deg, #ffffff 15%, #c9cad0 100%);
  color: #16171a;
  border-color: #c9cad0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.slider-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
  gap: 0.75rem;
}

.slider-container label {
  margin-right: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

.slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.slider-notch {
  position: absolute;
  /* Marks the slider's default/neutral value (1.0 of a 0-4 range, i.e. 25%
     of the way across). Native range inputs inset the thumb's center by its
     own radius (7px, half of 14px) at each end, so the usable track for the
     thumb's center is (100% - 14px) wide starting 7px in -- this places the
     notch exactly where the thumb sits when the slider is at 1.0. */
  left: calc(7px + (100% - 14px) * 0.25);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 10px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

#strengthSlider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  outline: none;
  cursor: pointer;
  appearance: none;
}

#strengthSlider:hover {
  opacity: 1;
}

#strengthSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 15%, #b9bbc2 100%);
  cursor: pointer;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.55),
    0 1px 1px rgba(0, 0, 0, 0.35);
}

#strengthSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 15%, #b9bbc2 100%);
  cursor: pointer;
  border: none;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.55),
    0 1px 1px rgba(0, 0, 0, 0.35);
}

#strengthValue {
  margin-left: 0;
  min-width: 30px;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
}

#fullScreenDrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-size: 5em;
  background-color: rgba(28, 28, 30, 0.8);
  backdrop-filter: blur(10px);
}

.processing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(28, 28, 30, 0.8);
  backdrop-filter: blur(10px);
  display: none;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5em;
  z-index: 9999;
}

.processing-message {
  font-weight: 400;
}

/* Sideways tab pinned flush to the right edge, vertically centered.
   writing-mode lays the box out vertically for real, instead of rotating
   a horizontal box -- so its right edge is the browser's actual right
   edge (properly flush) and nothing gets clipped off-viewport. */
.comment-tab {
  position: fixed;
  top: 50%;
  right: 0;
  /* rotate(180deg) flips the vertical-rl text so it reads bottom-to-top
     instead of top-to-bottom -- rotating about the box's own center keeps
     its footprint (and the flush right edge) exactly where it was. */
  transform: translateY(-50%);
  writing-mode: sideways-lr;
  z-index: 20;
  padding: 18px 12px;
  /* Same colors as the OpenGL/DirectX toggle's idle background
     (.backend-options), just rotated -90deg (180deg -> 90deg) to shade
     across this tab's own thin axis instead. */
  background: linear-gradient(-90deg, #23262d, #16181e);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  /* Rounded on the two corners facing into the page; sharp on the two
     touching the viewport edge, so it stays flush there. */
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: background 0.15s, color 0.15s;
}

.comment-tab:hover {
  /* Same gradient the site's regular buttons use, inverted from this
     tab's black/white default. */
  background: linear-gradient(180deg, #ffffff 15%, #c9cad0 100%);
  color: #16171a;
}

#filenameLabel {
  display: block;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#filenameInput {
  padding: 8px 12px;
  margin-top: 0;
  background-color: rgba(255, 255, 255, 0.045);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.85rem;
  transition: all 0.2s;
  width: 100%;
}

#filenameInput:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
}

#filenameInput:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.06);
}

.download-btn {
  background: linear-gradient(180deg, #8a63f5 0%, #754cf3 100%);
  color: #ffffff;
}

small {
  opacity: 0.6;
  font-size: 0.75rem;
}

#poweredBy {
  margin-top: auto;
  opacity: 0.6;
  text-align: center;
  font-size: 80%;
  transition: opacity 0.3s;
  padding-top: 2em;
}

#poweredBy:hover {
  opacity: 1;
}

#poweredBy img {
  width: 80%;
}

@keyframes flashBackground {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    background-color: transparent;
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    background-color: rgba(255, 138, 138, 0.2);
  }
}

.flash-background {
  animation: flashBackground 3s ease-in-out 3;
}

/* ── Help modal ─────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(14, 15, 18, 0.75);
  backdrop-filter: blur(6px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  padding: 2rem;
}

.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.modal-close {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition:
    background 0.15s,
    color 0.15s;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  filter: none;
}

.modal-content {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  user-select: text;
}

.whats-new-content h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
  margin: 1.1rem 0 0.5rem;
}

.whats-new-content h3:first-child {
  margin-top: 0;
}

.whats-new-content ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.whats-new-content li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}

.whats-new-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-primary);
}

.whats-new-content li strong {
  color: var(--text);
}

.whats-new-content li em {
  font-style: italic;
  color: var(--text-dim);
}

.whats-new-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8em;
  background: rgba(255, 255, 255, 0.07);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

#whatsNewButton {
  font-size: 0.8em;
  color: #ffffff8a;
  width: auto !important;
  margin: 0;
  padding: 0.5rem;
  border: 2px solid #ffffff3d;
  border-radius: 0.5rem;
  white-space: nowrap !important;
  background: transparent;
  box-shadow: none;
}

.standards-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.standards-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}

.standards-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.standards-table tr:last-child td {
  border-bottom: none;
}

/* Blue Channel modal's mode names are short -- keep them on one line
   instead of wrapping ("As stored", "RG → RGB"). The standards-table's
   other use (software names) is intentionally left free to wrap. */
#blueChannelHelpModalOverlay .standards-table td:first-child {
  white-space: nowrap;
}

.standards-table td.standard-opengl {
  color: var(--accent-success);
}

.standards-table td.standard-directx {
  color: var(--accent-danger);
}

/* ── PSD layer picker ──────────────────────────────── */
.psd-modal-hint {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin: 0 0 0.75rem;
}

.psd-layer-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.psd-layer-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-top: 0;
  text-align: left;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  box-shadow: none;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.psd-layer-option:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--border);
  filter: none;
}

.psd-layer-option.psd-layer-flattened {
  border-color: rgba(120, 170, 255, 0.35);
}

.psd-layer-option:has(input:checked) {
  background: rgba(138, 180, 255, 0.14);
  border-color: rgba(138, 180, 255, 0.4);
}

.psd-layer-option input[type="checkbox"] {
  flex-shrink: 0;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  position: relative;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.psd-layer-option input[type="checkbox"]:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

.psd-layer-option input[type="checkbox"]:checked {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.psd-layer-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.psd-section-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 0.7rem;
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.psd-section-divider::before,
.psd-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.psd-layer-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.psd-select-buttons {
  display: flex;
  gap: 0.4rem;
}

.psd-select-btn {
  width: auto;
  margin-top: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.psd-select-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  filter: none;
}

.psd-trim-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
  font-size: 0.75rem;
  color: var(--text-dim);
  cursor: pointer;
}

.psd-trim-toggle input {
  margin: 0;
}

.psd-merge-btn {
  margin-top: 0.9rem;
}

.psd-layer-thumb-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  background-image:
    linear-gradient(45deg, #3a3d44 25%, transparent 25%),
    linear-gradient(-45deg, #3a3d44 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3d44 75%),
    linear-gradient(-45deg, transparent 75%, #3a3d44 75%);
  background-size: 10px 10px;
  background-position:
    0 0,
    0 5px,
    5px -5px,
    -5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.psd-layer-thumb-wrap canvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.psd-layer-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.psd-layer-name {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.psd-layer-meta {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.psd-empty-note {
  color: var(--text-dim);
  font-size: 0.8rem;
  padding: 0.5rem 0;
}

.standards-table td.standard-both {
  color: var(--text-dim);
}

/* Ko-fi floating chat widget styles */
.floatingchat-container-wrap,
.floatingchat-container-wrap-mobi {
  right: 26px !important;
  left: unset !important;
  width: 60% !important;
}

.floating-chat-kofi-popup-iframe,
.floating-chat-kofi-popup-iframe-mobi,
.floating-chat-kofi-popup-iframe-closer-mobi {
  right: 26px !important;
  left: unset !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--panel-2);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* Focus styles */
button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid #8ab4ff;
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 900px) {
  .sidebar {
    width: 280px;
  }

  .main-content {
    margin-left: 280px;
  }
}

@media (max-width: 640px) {
  body {
    flex-direction: column;
  }

  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 40vh;
    overflow-y: auto;
  }

  .main-content {
    margin-left: 0;
    flex-grow: 1;
  }

  h1 {
    font-size: 1rem;
    margin-bottom: 15px;
  }

  #knobContainer {
    width: 150px;
    height: 150px;
  }

  .radio-buttons {
    gap: 4px;
  }

  .radio-group label {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
}

/* ── Toast notifications ────────────────────────────── */
.toast-container {
  /* Top-right, not bottom-right -- the Ko-fi floating widget docks
     bottom-right and will sit on top of (and swallow clicks meant for)
     anything anchored down there. */
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 3000;
  max-width: min(420px, calc(100vw - 3rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.4;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.toast.toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.toast-warning {
  border-left-color: var(--accent-danger);
}

.toast.toast-success {
  border-left-color: var(--accent-success);
}

.toast-icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--accent-primary);
}

.toast-warning .toast-icon {
  color: var(--accent-danger);
}

.toast-success .toast-icon {
  color: var(--accent-success);
}

.toast-message {
  flex: 1;
  min-width: 0;
  white-space: pre-line;
  user-select: text;
}

.toast-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  font-size: 0.7rem;
  transition:
    background 0.15s,
    color 0.15s;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  filter: none;
}

/* High contrast */
@media (prefers-contrast: high) {
  :root {
    --bg: #000000;
    --panel: #0d0d0d;
    --panel-2: #1a1a1a;
    --text: #ffffff;
    --text-dim: #d0d0d0;
    --border: #666666;
  }
}