/* ==========================================================================
   Hot Buttons (Reimagined!) Application Specific Styles
   ========================================================================== */

/* Main layout inside tab page */
.tab-content-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Preview Box (Sunken Well inside Preview Groupbox) */
.preview-groupbox {
  height: 235px;
  flex: 0 0 235px;
  min-height: 235px;
  max-height: 235px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.preview-stage {
  flex: 1;
  height: 100%;
  min-height: 0;
  max-height: 200px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background-color: var(--win-bg);
  border: 2px solid;
  border-color: var(--win-gray) var(--win-white) var(--win-white) var(--win-gray);
  box-shadow: inset 1px 1px 0px var(--win-dark), inset -1px -1px 0px var(--win-light);
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  background-image: 
    linear-gradient(45deg, #b8b8b8 25%, transparent 25%), 
    linear-gradient(-45deg, #b8b8b8 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #b8b8b8 75%), 
    linear-gradient(-45deg, transparent 75%, #b8b8b8 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

.preview-stage > * {
  margin: auto;
}

.heading-preview-wrap > * {
  width: 100%;
  box-sizing: border-box;
  margin: auto 0;
}

.preview-stage .bullet-preview-list {
  margin: auto auto auto 16px;
}

/* Options Grid (Left & Right columns) */
.options-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.options-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Control Row & Grid inside groupboxes */
.control-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.control-row:last-child {
  margin-bottom: 0;
}

.control-label {
  min-width: 55px;
  font-size: 11px;
}

/* Position Button Group */
.position-toggle-group {
  display: inline-flex;
  gap: 2px;
}

.pos-btn {
  padding: 2px 6px;
  min-width: 26px;
  font-size: 10px;
}

.pos-btn.active {
  border-color: var(--win-dark) var(--win-white) var(--win-white) var(--win-dark);
  box-shadow: inset 1px 1px 0px var(--win-dark), inset -1px -1px 0px var(--win-light);
  background-color: #d0d0d0;
  font-weight: bold;
}

/* Fine-tune Sliders inside Style */
.slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.win-range {
  flex: 1;
  accent-color: var(--win-navy);
  height: 14px;
}

.slider-val {
  min-width: 32px;
  text-align: right;
  font-family: var(--win-font-mono);
  font-size: 10px;
}

/* Image Gallery Carousel / Scroller */
.image-selector-well {
  background-color: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray) var(--win-white) var(--win-white) var(--win-gray);
  box-shadow: inset 1px 1px 0px var(--win-dark), inset -1px -1px 0px var(--win-light);
  height: 64px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.image-thumb {
  width: 48px;
  height: 48px;
  border: 1px solid #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f7f7;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px;
}

.image-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-thumb:hover {
  border-color: var(--win-navy);
  background-color: #e0e8f8;
}

.image-thumb.selected {
  border: 2px solid var(--win-navy);
  box-shadow: 0 0 0 1px var(--win-white) inset;
  background-color: #ccd9f0;
}

/* Color Palette Swatches */
.color-target-selector {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.color-target-btn {
  font-size: 10px;
  padding: 2px 6px;
  min-width: unset;
}

.color-target-btn.active {
  font-weight: bold;
  background-color: #d0d0d0;
  border-color: var(--win-dark) var(--win-white) var(--win-white) var(--win-dark);
  box-shadow: inset 1px 1px 0px var(--win-dark);
}

.color-swatches-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.color-swatch {
  width: 22px;
  height: 22px;
  cursor: pointer;
  position: relative;
  border: 2px solid;
  border-color: var(--win-white) var(--win-dark) var(--win-dark) var(--win-white);
  box-shadow: inset 1px 1px 0px var(--win-light), inset -1px -1px 0px var(--win-gray);
  flex-shrink: 0;
}

.color-swatch:hover {
  filter: brightness(1.1);
}

.color-swatch.active {
  outline: 2px solid #000;
  outline-offset: 1px;
}

.color-swatch.custom-swatch {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  position: relative;
}

.color-swatch.custom-swatch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.9);
}

/* Bottom Action Bar */
.bottom-actions-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 6px 0 2px 0;
}

.btn-generate {
  min-width: 120px;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 16px;
}

/* Code Output Drawer */
.code-drawer {
  display: none;
  background-color: var(--win-bg);
  border: 2px solid;
  border-color: var(--win-white) var(--win-dark) var(--win-dark) var(--win-white);
  box-shadow: inset 1px 1px 0px var(--win-light), inset -1px -1px 0px var(--win-gray);
  margin-top: 8px;
  padding: 8px;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.code-drawer.open {
  display: flex;
}

.code-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.code-drawer-title {
  font-weight: bold;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.code-drawer-options {
  display: flex;
  align-items: center;
  gap: 12px;
}

.code-tabs {
  display: flex;
  gap: 2px;
}

.code-tab-btn {
  font-size: 10px;
  padding: 2px 8px;
  min-width: 50px;
}

.code-tab-btn.active {
  font-weight: bold;
  background-color: #d0d0d0;
  border-color: var(--win-dark) var(--win-white) var(--win-white) var(--win-dark);
  box-shadow: inset 1px 1px 0px var(--win-dark);
}

.code-view-box {
  background-color: #ffffff;
  color: #000000;
  font-family: var(--win-font-mono);
  font-size: 11px;
  padding: 8px;
  border: 2px solid;
  border-color: var(--win-gray) var(--win-white) var(--win-white) var(--win-gray);
  box-shadow: inset 1px 1px 0px var(--win-dark), inset -1px -1px 0px var(--win-light);
  overflow: auto;
  white-space: pre;
  min-height: 100px;
  max-height: 140px;
  user-select: text;
}

.code-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copy-feedback {
  color: #008000;
  font-weight: bold;
  font-size: 11px;
  display: none;
}

.copy-feedback.show {
  display: inline;
}

/* Included Images in Code Output */
.code-included-images {
  margin-top: 6px;
  background-color: var(--win-bg);
  border-top: 1px solid var(--win-gray);
  padding-top: 6px;
}

.included-images-header {
  font-weight: bold;
  font-size: 11px;
  color: var(--win-dark);
  margin-bottom: 6px;
}

.included-images-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.included-image-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background-color: var(--win-bg);
  border: 1px solid var(--win-gray);
  box-shadow: inset 1px 1px 0 #fff;
}

.included-image-thumb {
  width: 36px;
  height: 36px;
  border: 2px solid;
  border-color: var(--win-gray) var(--win-white) var(--win-white) var(--win-gray);
  box-shadow: inset 1px 1px 0px var(--win-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: 
    linear-gradient(45deg, #ccc 25%, transparent 25%), 
    linear-gradient(-45deg, #ccc 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #ccc 75%), 
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 8px 8px;
  background-color: #fff;
}

.included-image-thumb img {
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
  cursor: pointer;
}

.included-image-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.included-image-name {
  font-size: 11px;
  font-family: var(--win-font-mono);
  font-weight: bold;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.included-image-download-btn {
  font-size: 10px;
  padding: 1px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--win-dark);
}

/* Custom Color Dialog */
.color-picker-body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.canvas-container {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

#colorSpectrumCanvas {
  box-sizing: content-box;
  width: 180px;
  height: 150px;
  border: 2px solid;
  border-color: var(--win-gray) var(--win-white) var(--win-white) var(--win-gray);
  box-shadow: inset 1px 1px 0px var(--win-dark);
  cursor: crosshair;
}

#colorLightnessCanvas {
  box-sizing: content-box;
  width: 20px;
  height: 150px;
  border: 2px solid;
  border-color: var(--win-gray) var(--win-white) var(--win-white) var(--win-gray);
  box-shadow: inset 1px 1px 0px var(--win-dark);
  cursor: ns-resize;
}

.color-values-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px;
}

.color-preview-box {
  width: 100%;
  height: 44px;
  border: 2px solid;
  border-color: var(--win-gray) var(--win-white) var(--win-white) var(--win-gray);
  box-shadow: inset 1px 1px 0px var(--win-dark);
  margin-bottom: 4px;
}

.color-input-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 11px;
}

.color-input-row span {
  width: 44px;
  text-align: right;
  flex-shrink: 0;
}

.color-input-row input {
  width: 70px;
  flex-shrink: 0;
}

/* Font Picker Dialog */
.font-dialog-grid {
  display: grid;
  grid-template-columns: 140px 100px 70px;
  gap: 8px;
}

.font-list-box {
  background-color: #fff;
  border: 2px solid;
  border-color: var(--win-gray) var(--win-white) var(--win-white) var(--win-gray);
  box-shadow: inset 1px 1px 0px var(--win-dark);
  height: 120px;
  overflow-y: auto;
  padding: 2px;
}

.font-list-item {
  padding: 2px 4px;
  cursor: pointer;
  white-space: nowrap;
}

.font-list-item:hover {
  background-color: #e0e8f8;
}

.font-list-item.selected {
  background-color: var(--win-navy);
  color: var(--win-white);
}

.font-preview-sample {
  height: 60px;
  background-color: #ffffff;
  border: 2px solid;
  border-color: var(--win-gray) var(--win-white) var(--win-white) var(--win-gray);
  box-shadow: inset 1px 1px 0px var(--win-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
  user-select: text;
}

/* About Dialog */
.about-dialog-content {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 6px 0;
}

.about-dialog-icon {
  width: 48px;
  height: 48px;
}

.about-dialog-text {
  font-size: 11px;
  line-height: 1.5;
}

.about-dialog-text h3 {
  margin: 0 0 6px 0;
  font-size: 14px;
  color: var(--win-navy);
}

.about-dialog-text p {
  margin: 4px 0;
}

.about-dialog-divider {
  border: none;
  border-top: 1px solid var(--win-gray);
  border-bottom: 1px solid var(--win-white);
  margin: 10px 0;
}

/* Rules Tab Specifics */
.rules-preview-wrap {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}

/* Bullets Tab Specifics */
.bullet-preview-list {
  margin: 0;
  padding-left: 24px;
}

.bullet-preview-list li {
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Headings Tab Specifics */
.heading-preview-wrap {
  text-align: center;
  width: 100%;
  padding: 10px;
}

/* Images Tab Specifics */
.image-preview-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.crt-scanlines {
  position: relative;
}

.crt-scanlines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
  background-size: 100% 4px;
  pointer-events: none;
}

/* Animation Suboptions Reserved Container */
.anim-suboptions-wrap {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: opacity 0.15s ease;
}

.glow-row-disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
  filter: grayscale(0.8);
}

.fixed-palette-note {
  font-size: 11px;
  color: #404040;
  margin-left: 6px;
  font-style: italic;
  user-select: none;
}

textarea.win-input {
  resize: vertical;
  line-height: 1.35;
  font-family: inherit;
  font-size: 11px;
}

/* Checkerboard Swatch for Transparency */
.checkerboard-swatch {
  background-color: #ffffff;
  background-image: 
    linear-gradient(45deg, #000000 25%, transparent 25%), 
    linear-gradient(-45deg, #000000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000000 75%), 
    linear-gradient(-45deg, transparent 75%, #000000 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

/* Image preview frame transparent checkerboard background */
.image-preview-frame.bg-transparent {
  background-color: #ffffff !important;
  background-image: 
    linear-gradient(45deg, #000000 25%, transparent 25%), 
    linear-gradient(-45deg, #000000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000000 75%), 
    linear-gradient(-45deg, transparent 75%, #000000 75%) !important;
  background-size: 16px 16px !important;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px !important;
}

.control-group-disabled {
  opacity: 0.38 !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* ==========================================================================
   CSS3 90s Animated Effects
   ========================================================================== */

/* Pulsing Glow */
@keyframes hot-pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 calc(var(--hot-anim-size, 16px) * 0.25) var(--hot-glow-color, #00ffff)) 
            drop-shadow(0 0 calc(var(--hot-anim-size, 16px) * 0.5) var(--hot-glow-color, #00ffff));
  }
  50% {
    filter: drop-shadow(0 0 var(--hot-anim-size, 16px) var(--hot-glow-color, #00ffff)) 
            drop-shadow(0 0 calc(var(--hot-anim-size, 16px) * 1.5) var(--hot-glow-color, #00ffff));
  }
}

/* Sweep Glow Left to Right */
@keyframes hot-sweep-lr {
  0% {
    filter: drop-shadow(calc(-1 * var(--hot-anim-size, 20px)) 0 calc(var(--hot-anim-size, 20px) * 0.35) var(--hot-glow-color, #00ffff));
  }
  50% {
    filter: drop-shadow(0 0 calc(var(--hot-anim-size, 20px) * 0.8) var(--hot-glow-color, #00ffff));
  }
  100% {
    filter: drop-shadow(var(--hot-anim-size, 20px) 0 calc(var(--hot-anim-size, 20px) * 0.35) var(--hot-glow-color, #00ffff));
  }
}

/* Sweep Glow Right to Left */
@keyframes hot-sweep-rl {
  0% {
    filter: drop-shadow(var(--hot-anim-size, 20px) 0 calc(var(--hot-anim-size, 20px) * 0.35) var(--hot-glow-color, #00ffff));
  }
  50% {
    filter: drop-shadow(0 0 calc(var(--hot-anim-size, 20px) * 0.8) var(--hot-glow-color, #00ffff));
  }
  100% {
    filter: drop-shadow(calc(-1 * var(--hot-anim-size, 20px)) 0 calc(var(--hot-anim-size, 20px) * 0.35) var(--hot-glow-color, #00ffff));
  }
}

/* Sweep Glow Top to Bottom */
@keyframes hot-sweep-tb {
  0% {
    filter: drop-shadow(0 calc(-1 * var(--hot-anim-size, 18px)) calc(var(--hot-anim-size, 18px) * 0.35) var(--hot-glow-color, #00ffff));
  }
  50% {
    filter: drop-shadow(0 0 calc(var(--hot-anim-size, 18px) * 0.8) var(--hot-glow-color, #00ffff));
  }
  100% {
    filter: drop-shadow(0 var(--hot-anim-size, 18px) calc(var(--hot-anim-size, 18px) * 0.35) var(--hot-glow-color, #00ffff));
  }
}

/* Sweep Glow Bottom to Top */
@keyframes hot-sweep-bt {
  0% {
    filter: drop-shadow(0 var(--hot-anim-size, 18px) calc(var(--hot-anim-size, 18px) * 0.35) var(--hot-glow-color, #00ffff));
  }
  50% {
    filter: drop-shadow(0 0 calc(var(--hot-anim-size, 18px) * 0.8) var(--hot-glow-color, #00ffff));
  }
  100% {
    filter: drop-shadow(0 calc(-1 * var(--hot-anim-size, 18px)) calc(var(--hot-anim-size, 18px) * 0.35) var(--hot-glow-color, #00ffff));
  }
}

/* Retro Fire / Flame Glow (Active 90s Flicker for Buttons, Headings, Images, Bullets) */
@keyframes hot-fire-flicker {
  0%, 100% {
    filter: drop-shadow(0 -2px calc(var(--hot-anim-size, 14px) * 0.3) #ff3300) 
            drop-shadow(0 -5px calc(var(--hot-anim-size, 14px) * 0.7) #ff8800) 
            drop-shadow(0 -10px var(--hot-anim-size, 14px) #ffff00);
    transform: translateY(0);
  }
  25% {
    filter: drop-shadow(-2px -4px calc(var(--hot-anim-size, 14px) * 0.4) #ff2200) 
            drop-shadow(2px -8px calc(var(--hot-anim-size, 14px) * 0.8) #ff6600) 
            drop-shadow(0 -13px calc(var(--hot-anim-size, 14px) * 1.3) #ffee00);
    transform: translateY(-1px);
  }
  50% {
    filter: drop-shadow(2px -3px calc(var(--hot-anim-size, 14px) * 0.35) #ff5500) 
            drop-shadow(-2px -7px calc(var(--hot-anim-size, 14px) * 0.75) #ff9900) 
            drop-shadow(1px -9px calc(var(--hot-anim-size, 14px) * 1.1) #ffff33);
    transform: translateY(0);
  }
  75% {
    filter: drop-shadow(-1px -5px calc(var(--hot-anim-size, 14px) * 0.45) #cc0000) 
            drop-shadow(1px -9px calc(var(--hot-anim-size, 14px) * 0.9) #ff7700) 
            drop-shadow(-1px -14px calc(var(--hot-anim-size, 14px) * 1.4) #ffff00);
    transform: translateY(-1px);
  }
}

/* 90s Drippy / Melting Effect */
@keyframes hot-drippy-melt {
  0%, 100% {
    transform: scaleY(1) skewX(0deg);
    filter: drop-shadow(0 calc(var(--hot-anim-size, 10px) * 0.3) calc(var(--hot-anim-size, 10px) * 0.5) var(--hot-glow-color, #00ff00));
  }
  50% {
    transform: scaleY(1.03) skewX(0.8deg) translateY(1px);
    filter: drop-shadow(0 calc(var(--hot-anim-size, 10px) * 0.6) var(--hot-anim-size, 10px) var(--hot-glow-color, #00ff00));
  }
}

/* 90s Cyber Rainbow Shimmer */
@keyframes hot-rainbow-shimmer {
  0% {
    filter: drop-shadow(0 0 calc(var(--hot-anim-size, 16px) * 0.5) #ff0000) hue-rotate(0deg);
  }
  50% {
    filter: drop-shadow(0 0 var(--hot-anim-size, 16px) #00ff00) hue-rotate(180deg);
  }
  100% {
    filter: drop-shadow(0 0 calc(var(--hot-anim-size, 16px) * 0.5) #ff0000) hue-rotate(360deg);
  }
}

/* Dedicated Calming, Safe Animations for Rules (Photosensitivity / Epilepsy Protection) */
@keyframes hot-rule-bullet-fire {
  0%, 100% {
    filter: drop-shadow(0 0 calc(var(--hot-anim-size, 14px) * 0.3) #ff4400) 
            drop-shadow(0 0 calc(var(--hot-anim-size, 14px) * 0.6) #ff8800);
  }
  50% {
    filter: drop-shadow(0 0 calc(var(--hot-anim-size, 14px) * 0.5) #ff6600) 
            drop-shadow(0 0 var(--hot-anim-size, 14px) #ffaa00);
  }
}

@keyframes hot-gentle-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 calc(var(--hot-anim-size, 16px) * 0.25) var(--hot-glow-color, #00ffff));
  }
  50% {
    filter: drop-shadow(0 0 calc(var(--hot-anim-size, 16px) * 0.75) var(--hot-glow-color, #00ffff));
  }
}

/* Standard utility classes (buttons, images, headings, bullets) */
.anim-pulse-glow {
  animation: hot-pulse-glow 2.2s ease-in-out infinite alternate !important;
}

.anim-sweep-lr {
  animation: hot-sweep-lr 2.4s ease-in-out infinite alternate !important;
}

.anim-sweep-rl {
  animation: hot-sweep-rl 2.4s ease-in-out infinite alternate !important;
}

.anim-sweep-tb {
  animation: hot-sweep-tb 2.4s ease-in-out infinite alternate !important;
}

.anim-sweep-bt {
  animation: hot-sweep-bt 2.4s ease-in-out infinite alternate !important;
}

.anim-fire {
  animation: hot-fire-flicker 0.45s ease-in-out infinite alternate !important;
}

.anim-drippy {
  animation: hot-drippy-melt 3s ease-in-out infinite !important;
}

.anim-rainbow {
  animation: hot-rainbow-shimmer 4s linear infinite !important;
}

/* Rules Tab: Calm, Smooth, Non-Strobing Fire Override */
.rules-preview-wrap .anim-fire,
.hot-rule.anim-fire {
  animation: hot-rule-bullet-fire 3.5s ease-in-out infinite alternate !important;
}

.rules-preview-wrap .anim-pulse-glow,
.hot-rule.anim-pulse-glow,
.bullet-preview-list .anim-pulse-glow,
.hot-bullet-item .anim-pulse-glow,
.hot-bullet-icon.anim-pulse-glow {
  animation: hot-gentle-pulse 3.5s ease-in-out infinite alternate !important;
}

.rules-preview-wrap .anim-sweep-lr,
.hot-rule.anim-sweep-lr,
.bullet-preview-list .anim-sweep-lr,
.hot-bullet-item .anim-sweep-lr {
  animation: hot-sweep-lr 4s ease-in-out infinite alternate !important;
}

.rules-preview-wrap .anim-sweep-rl,
.hot-rule.anim-sweep-rl,
.bullet-preview-list .anim-sweep-rl,
.hot-bullet-item .anim-sweep-rl {
  animation: hot-sweep-rl 4s ease-in-out infinite alternate !important;
}

.rules-preview-wrap .anim-rainbow,
.hot-rule.anim-rainbow,
.bullet-preview-list .anim-rainbow,
.hot-bullet-item .anim-rainbow {
  animation: hot-rainbow-shimmer 6s linear infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .anim-pulse-glow,
  .anim-sweep-lr,
  .anim-sweep-rl,
  .anim-sweep-tb,
  .anim-sweep-bt,
  .anim-fire,
  .anim-drippy,
  .anim-rainbow {
    animation: none !important;
    filter: drop-shadow(0 0 6px var(--hot-glow-color, #00ffff)) !important;
  }
}

/* ==========================================================================
   Mobile Responsive Adjustments (Screens <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Maximize Viewport Real Estate */
  .desktop-container {
    padding: 0;
  }

  .win-tab-container {
    padding: 4px 4px 2px 4px;
  }

  .win-tab-bar {
    padding-left: 2px;
  }

  .win-tab {
    padding: 4px 8px 3px 8px;
    font-size: 11px;
  }

  .win-tab.active {
    padding: 5px 8px;
  }

  .win-tab-content-frame {
    padding: 6px 4px;
  }

  .win-groupbox {
    padding: 6px 6px 8px 6px;
  }

  /* 2. Options Grid: Single Fluid Column */
  .options-columns {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* 3. Form Controls & Control Rows */
  .control-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  .slider-row {
    flex-wrap: nowrap;
  }

  .win-range {
    min-width: 0;
  }

  /* Buttons Tab: Image Controls Row Responsive Wrapping */
  .btn-image-ctrl-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .btn-image-ctrl-row .position-ctrl-col {
    order: 3;
    width: 100%;
  }

  .btn-image-ctrl-row #btnClearImageBtn {
    order: 2;
    margin-left: auto;
  }

  /* Dimensions Rows in Buttons and Images tabs */
  .btn-dimensions-row,
  .img-dimensions-row {
    justify-content: space-between !important;
    gap: 8px;
  }

  /* 4. Windows 95 Status Bar - hide redundant version panel to give status text room */
  .win-statusbar .win-status-panel:nth-child(2) {
    display: none;
  }

  /* 5. Code Drawer Section on Mobile */
  .code-drawer {
    max-height: none;
    overflow-y: visible;
    padding: 6px;
  }

  .code-drawer-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .code-drawer-title {
    width: 100%;
    justify-content: space-between;
  }

  .code-drawer-options {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .code-view-box {
    max-height: 180px;
    width: 100%;
    box-sizing: border-box;
  }

  /* 6. Modal Dialogs on Mobile */
  .win-modal-window {
    width: 95vw !important;
    max-width: 95vw !important;
    min-width: 0 !important;
  }

  .font-dialog-grid {
    grid-template-columns: 1.3fr 1.1fr 0.8fr;
    gap: 4px;
  }

  .color-picker-body {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .color-values-panel {
    min-width: 120px;
    width: 100%;
  }
}