.announcement {
    text-align: center;
    padding: 10px;
    margin-bottom: 20px;
    font-family: monospace;
    color: var(--scp-white);
    font-size: 1.1em;
    border: 1px solid var(--scp-red);
    background-color: rgba(20, 20, 20, 0.95);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(153, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.announcement::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(153, 0, 0, 0.1), transparent);
  animation: sweep 6s linear infinite;
}

@keyframes sweep {
  0% { left: -100%; }
  100% { left: 100%; }
}

.redacted {
    background-color: var(--scp-black);
    color: var(--scp-black);
    padding: 0 3px;
    margin: 0 2px;
    cursor: help;
    transition: background-color 0.3s;
    user-select: none;
    position: relative;
    border-radius: 2px;
}

.redacted::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, 
    rgba(0, 0, 0, 0.8) 25%, 
    rgba(0, 0, 0, 0.9) 25%, 
    rgba(0, 0, 0, 0.9) 50%, 
    rgba(0, 0, 0, 0.8) 50%, 
    rgba(0, 0, 0, 0.8) 75%, 
    rgba(0, 0, 0, 0.9) 75%);
  background-size: 4px 4px;
  pointer-events: none;
}

.redacted:hover {
    background-color: rgba(153, 0, 0, 0.5);
}

@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}

@keyframes textShadow {
  0% {
    text-shadow: 1px 0 1px rgba(0,30,255,0.3), -1px 0 1px rgba(255,0,80,0.2), 0 0 2px;
  }
  50% {
    text-shadow: 2px 0 1px rgba(0,30,255,0.3), -2px 0 1px rgba(255,0,80,0.2), 0 0 2px;
  }
  100% {
    text-shadow: 1px 0 1px rgba(0,30,255,0.3), -1px 0 1px rgba(255,0,80,0.2), 0 0 2px;
  }
}

.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 15;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.1) 50%
  );
  background-size: 100% 6px;
}

.scanlines::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(32, 128, 32, 0.1) 2%,
    transparent 3%
  );
  animation: scanline 8s linear infinite;
}

.crt {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.crt::before {
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
  background-size: 100% 6px;
  pointer-events: none;
  z-index: 10;
}

.crt::after {
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 16, 16, 0.05);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  animation: flicker 0.3s infinite;
}

@keyframes scanline {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

:root {
    --scp-red: #cc0000;
    --scp-red-dark: #990000;
    --scp-red-light: #ff3333;
    --scp-black: #000000;
    --scp-white: #ffffff;
    --scp-gray: #666666;
    --scp-dark-gray: #333333;
    --scp-light-gray: #999999;
    --scp-blue: #003366;
    --scp-green: #004400;
    --scp-gold: #ccaa00;
}

body {
    font-family: 'Courier New', Courier, monospace;
    background: linear-gradient(135deg, 
        var(--scp-black) 0%, 
        #111111 50%, 
        var(--scp-black) 100%);
    background-attachment: fixed;
    color: var(--scp-white);
    margin: 0;
    padding: 20px;
    position: relative;
    min-height: 100vh;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(145deg, 
        rgba(15, 15, 15, 0.95) 0%, 
        rgba(25, 15, 15, 0.9) 50%, 
        rgba(15, 15, 15, 0.95) 100%);
    padding: 30px;
    border: 3px solid var(--scp-red);
    border-radius: 15px;
    position: relative;
    z-index: 1;
    box-shadow: 
        0 0 30px rgba(204, 0, 0, 0.3),
        0 20px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(204, 0, 0, 0.05) 45deg,
        transparent 90deg,
        rgba(204, 0, 0, 0.03) 135deg,
        transparent 180deg,
        rgba(204, 0, 0, 0.05) 225deg,
        transparent 270deg,
        rgba(204, 0, 0, 0.03) 315deg,
        transparent 360deg
    );
    animation: rotate 60s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.header {
    text-align: center;
    border-bottom: 2px solid var(--scp-red);
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
}

.header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--scp-red), transparent);
}

.header h1 {
    color: var(--scp-red);
    margin: 0;
    font-size: 3em;
    text-shadow: 
        0 0 20px rgba(204, 0, 0, 0.6),
        0 0 40px rgba(204, 0, 0, 0.4);
    letter-spacing: 4px;
    text-transform: uppercase;
    background: linear-gradient(45deg, var(--scp-red), var(--scp-red-light), var(--scp-red));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.header h2 {
    color: var(--scp-white);
    margin: 10px 0 0 0;
    font-size: 1.2em;
    letter-spacing: 2px;
    opacity: 0.8;
}

.input-section {
    margin-bottom: 30px;
}

.mode-tabs {
    display: flex;
    margin-bottom: 25px;
    background: rgba(0,0,0,0.3);
    padding: 5px;
    border-radius: 8px;
    gap: 5px;
}

.mode-tab {
    flex: 1;
    background: transparent;
    color: var(--scp-gray);
    border: 1px solid transparent;
    padding: 15px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-radius: 5px;
    box-shadow: none;
}

.mode-tab:hover {
    color: var(--scp-white);
    background: rgba(255,255,255,0.05);
}

.mode-tab.active {
    background: var(--scp-red);
    color: var(--scp-white);
    box-shadow: 0 4px 15px rgba(204,0,0,0.3);
}

.mode-tab.active::before {
    display: none; /* remove button sweep effect */
}

.small-btn {
    padding: 5px 10px;
    min-height: 30px;
    font-size: 0.8em;
}

.input-section h3 {
    color: var(--scp-red);
}

textarea {
    width: 100%;
    height: 150px;
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid rgba(204, 0, 0, 0.3);
    box-shadow: 
        inset 0 4px 15px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(204, 0, 0, 0.1);
    padding: 15px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 15px;
    text-shadow: none;
    animation: none;
    color: var(--scp-white);
    font-size: 16px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

textarea:focus {
    outline: none;
    border-color: var(--scp-red-light);
    box-shadow: 
        inset 0 4px 15px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(204, 0, 0, 0.3);
}

button {
    background: linear-gradient(145deg, var(--scp-red), var(--scp-red-dark));
    color: var(--scp-white);
    border: 2px solid transparent;
    padding: 12px 24px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    transition: all 0.2s ease;
    letter-spacing: 1px;
    box-shadow: 
        0 4px 15px rgba(204, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    min-height: 48px;
    text-transform: uppercase;
    font-size: 0.9em;
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent);
    transition: left 0.3s;
}

button:hover::before {
    left: 100%;
}

button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(204, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(145deg, var(--scp-red-light), var(--scp-red));
}

.input-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.input-controls button {
  flex: 1;
  min-width: 150px;
}

.secondary-button {
  background-color: var(--scp-gray);
  color: var(--scp-white);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  transition: background-color 0.3s;
  text-shadow: none;
  animation: none;
  min-height: 44px;
}

.secondary-button:hover {
  background-color: #888888;
}

select {
    background-color: rgba(30, 30, 30, 0.9);
    color: var(--scp-white);
    border: 1px solid var(--scp-red);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    text-shadow: none;
    animation: none;
}

select option[value="Dark"] {
  background-color: #446644;
}

select option[value="Vlam"] {
  background-color: #444466;
}

select option[value="Keneq"] {
  background-color: #666644;
}

select option[value="Ehki"] {
  background-color: #664422;
}

select option[value="Amidia"] {
  background-color: #662222;
}

select:focus {
    outline: none;
    border-color: #cc0000;
    box-shadow: 0 0 10px rgba(153, 0, 0, 0.3);
}

.output-section {
    background: rgba(20, 20, 20, 0.95);
    padding: 25px;
    border: 2px solid rgba(204, 0, 0, 0.5);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.4);
    white-space: pre-line;
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

.output-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--scp-red);
    flex-wrap: wrap;
    gap: 10px;
}

.article-stats {
    display: flex;
    gap: 20px;
    color: var(--scp-gray);
    font-size: 0.9em;
}

.view-controls {
    display: flex;
    gap: 5px;
}

.view-button {
    background-color: var(--scp-gray);
    color: var(--scp-white);
    border: none;
    padding: 5px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8em;
    transition: all 0.2s ease;
    border-radius: 3px;
    min-height: 32px;
}

.view-button:hover {
    background-color: #888888;
}

.view-button.active {
    background-color: var(--scp-red);
    color: var(--scp-white);
}

#articleOutput.compact-view {
    font-size: 0.9em;
    line-height: 1.4;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--scp-gray);
    padding: 15px;
    background-color: rgba(30, 30, 30, 0.9);
}

#articleOutput.compact-view::-webkit-scrollbar {
    width: 8px;
}

#articleOutput.compact-view::-webkit-scrollbar-track {
    background: rgba(20, 20, 20, 0.95);
}

#articleOutput.compact-view::-webkit-scrollbar-thumb {
    background-color: var(--scp-red);
    border-radius: 4px;
}

#articleOutput {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.6;
    word-wrap: break-word;
}

.hidden {
    opacity: 0;
    transition: opacity 0.3s ease;
}

*:not(.hidden) {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(102, 102, 102, 0.3);
    border-top: 4px solid var(--scp-red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 25px auto;
    box-shadow: 0 0 20px rgba(204, 0, 0, 0.3);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

@keyframes glow {
    0%, 100% { 
        box-shadow: 
            0 0 30px rgba(204, 0, 0, 0.5),
            inset 0 0 20px rgba(0, 0, 0, 0.3);
    }
    50% { 
        box-shadow: 
            0 0 50px rgba(204, 0, 0, 0.8),
            inset 0 0 20px rgba(0, 0, 0, 0.3);
    }
}

#loadingIndicator {
    text-align: center;
    color: var(--scp-red);
}

.classified {
    color: var(--scp-red);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(153, 0, 0, 0.5);
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    padding: 25px;
    background: rgba(20, 20, 20, 0.8);
    border-radius: 12px;
    box-shadow: 
        inset 0 0 20px rgba(0, 0, 0, 0.3),
        0 4px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(204, 0, 0, 0.3);
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    background: rgba(25, 25, 25, 0.9);
    border-radius: 10px;
    border: 1px solid rgba(204, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.option-group:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(204, 0, 0, 0.15);
    border-color: rgba(204, 0, 0, 0.4);
}

.option-group label {
    color: var(--scp-red-light);
    font-weight: bold;
    font-size: 1.1em;
    text-shadow: 0 0 10px rgba(204, 0, 0, 0.3);
}

.option-group select {
    width: 100%;
    padding: 12px;
    background: rgba(30, 30, 30, 0.95);
    color: var(--scp-white);
    border: 2px solid rgba(204, 0, 0, 0.3);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 1em;
}

.option-group select:focus {
    outline: none;
    border-color: var(--scp-red-light);
    box-shadow: 
        inset 0 2px 10px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(204, 0, 0, 0.3);
}

.option-group select:hover {
    border-color: rgba(204, 0, 0, 0.5);
    box-shadow: 
        inset 0 2px 10px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(204, 0, 0, 0.2);
}

.option-group .disclaimer {
    font-size: 0.85em;
    color: var(--scp-red-light);
    margin-top: 8px;
    font-style: italic;
    padding: 8px 12px;
    background: rgba(204, 0, 0, 0.1);
    border-left: 4px solid var(--scp-red);
    border-radius: 0 8px 8px 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.toggle-button {
    background: rgba(102, 102, 102, 0.9);
    color: var(--scp-white);
    border: 2px solid transparent;
    padding: 10px 15px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 120px;
    text-align: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    min-height: 48px;
    box-shadow: 
        0 2px 10px rgba(0, 51, 102, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.toggle-button.active {
    background: linear-gradient(145deg, var(--scp-red), var(--scp-red-dark));
    border-color: var(--scp-red-light);
    transform: translateY(-1px);
    box-shadow: 
        0 4px 15px rgba(204, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.header-bunny {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--scp-red);
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 0 15px rgba(153, 0, 0, 0.5);
    filter: grayscale(50%) sepia(20%);
}

.header-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    transition: transform 0.2s ease;
    filter: brightness(0.9) contrast(1.1);
    cursor: pointer;
}

.header-logo:hover {
    transform: scale(1.1);
    filter: brightness(1) contrast(1.2);
}

.header-bunny:hover {
    transform: scale(1.1);
    filter: grayscale(0%) sepia(30%);
}

.header-bunny:active {
    transform: scale(0.95);
}

.title-text {
    text-align: center;
    flex: 1;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none; /* Hidden on desktop */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2001;
    background-color: var(--scp-red);
    color: var(--scp-white);
    padding: 12px 16px;
    border: 2px solid var(--scp-white);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 0.8em;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mobile-menu-btn:active {
    transform: scale(0.9);
}

.mobile-menu-btn.active {
    background-color: var(--scp-white);
    color: var(--scp-red);
    border-color: var(--scp-red);
}

/* App Controls Wrapper */
.app-controls {
    display: contents; /* Desktop: acts as if wrapper doesn't exist */
}

/* Existing Toggle Styles (Modified for Mobile compatibility) */
.music-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  background-color: rgba(153, 0, 0, 0.8);
  color: var(--scp-white);
  padding: 10px 20px;
  border: 2px solid var(--scp-white);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s ease;
  text-shadow: none;
  animation: none;
  box-shadow: 0 0 15px rgba(153, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  border-radius: 5px;
}

.music-toggle:hover {
  background-color: rgba(204, 0, 0, 0.8);
  transform: scale(1.05);
}

.music-toggle.active {
  background-color: rgba(153, 0, 0, 1);
  border-color: var(--scp-red);
}

.vfx-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 100;
  background-color: rgba(153, 0, 0, 0.8);
  color: var(--scp-white);
  padding: 10px 20px;
  border: 2px solid var(--scp-white);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s ease;
  text-shadow: none;
  animation: none;
  box-shadow: 0 0 15px rgba(153, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  border-radius: 5px;
}

.vfx-toggle:hover {
  background-color: rgba(204, 0, 0, 0.8);
  transform: scale(1.05);
}

.vfx-toggle.active {
  background-color: rgba(153, 0, 0, 1);
  border-color: var(--scp-red);
}

.crt.disabled {
  display: none;
}

.scanlines.disabled {
  display: none;
}

.vignette.disabled {
  display: none;
}

.announcement.vfx-disabled {
  animation: none;
}



/* Fix mobile font sizes for inputs to prevent iOS zoom */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

.subtitle-link {
    color: var(--scp-white);
    text-decoration: none;
    font-size: 1em;
    opacity: 0.8;
    transition: all 0.3s ease;
    display: block;
    margin-top: 5px;
}

.subtitle-link:hover {
    color: var(--scp-red);
    opacity: 1;
    text-shadow: 0 0 10px rgba(153, 0, 0, 0.8);
}

#customObjectClassFields {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#customObjectClassFields.hidden {
    display: none;
}

#customObjectClassFields input,
#customObjectClassFields textarea {
    width: 100%;
    padding: 8px;
    background-color: rgba(30, 30, 30, 0.9);
    color: var(--scp-white);
    border: 1px solid var(--scp-red);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    font-family: inherit;
}

#customObjectClassFields textarea {
    height: 80px;
    resize: vertical;
}

#customObjectClassFields input:focus,
#customObjectClassFields textarea:focus {
    outline: none;
    border-color: #cc0000;
    box-shadow: 0 0 10px rgba(153, 0, 0, 0.3);
}

.button-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.button-group button {
    flex: 0 1 auto;
}

#generateButton {
    flex: 1 0 100%;
    margin-bottom: 5px;
}

.feed-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: flex-end;
}

.community-feed {
    margin-top: 20px;
    border-top: 2px solid var(--scp-red);
    padding-top: 20px;
}

.community-feed.hidden {
    display: none;
}

.feed-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: rgba(20, 20, 20, 0.5);
    border-radius: 5px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.scp-post {
    background-color: rgba(20, 20, 20, 0.95);
    border: 1px solid var(--scp-red);
    padding: 20px;
    animation: fadeIn 0.3s ease-in-out;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.scp-post:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(153, 0, 0, 0.3);
}

.post-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--scp-gray);
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--scp-red);
}

.post-info {
    flex-grow: 1;
}

.author-name {
    color: var(--scp-red);
    font-weight: bold;
    text-decoration: none;
}

.post-date {
    color: var(--scp-gray);
    font-size: 0.9em;
}

.post-content {
    max-height: 200px;
    overflow-y: hidden;
    padding: 10px;
    background-color: rgba(30, 30, 30, 0.9);
    border: 1px solid var(--scp-gray);
    margin-bottom: 15px;
    position: relative;
    transition: max-height 0.3s ease-out;
}

.post-content.expanded {
    max-height: none;
}

.collapse-button {
    background: linear-gradient(transparent, rgba(30, 30, 30, 0.9) 50%);
    color: var(--scp-red);
    border: none;
    padding: 10px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: inherit;
}

.collapse-button:hover {
    color: var(--scp-white);
}

.collapse-button.hidden {
    display: none;
}

.post-content.expanded .collapse-button {
    position: static;
    background: none;
    margin-top: 10px;
}

.post-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.like-button {
    background: none;
    border: none;
    color: var(--scp-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    transition: color 0.3s;
}

.like-button:hover {
    color: var(--scp-red);
}

.like-button.liked {
    color: var(--scp-red);
}

.delete-post-button {
  background-color: #660000;
  color: var(--scp-white);
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.9em;
  margin-left: auto;
}

.delete-post-button:hover {
  background-color: #990000;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.info-box {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 300px;
  max-height: 80vh;
  overflow-y: auto;
  background-color: rgba(15, 15, 15, 0.95);
  border: 2px solid var(--scp-red);
  padding: 15px;
  font-family: 'Courier New', Courier, monospace;
  color: var(--scp-white);
  box-shadow: 0 0 15px rgba(153, 0, 0, 0.2);
  z-index: 1000;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.info-box:hover {
  box-shadow: 0 0 20px rgba(153, 0, 0, 0.3);
}

.info-box::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.info-box::-webkit-scrollbar-track {
  background: rgba(20, 20, 20, 0.95);
  border-radius: 5px;
}

.info-box::-webkit-scrollbar-thumb {
  background-color: var(--scp-red);
  border-radius: 5px;
}

.info-box::-webkit-scrollbar-thumb:hover {
  background-color: #cc0000;
}

.info-box h3 {
  color: var(--scp-red);
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--scp-red);
}

.info-section {
  margin-bottom: 15px;
}

.info-section h4 {
  color: var(--scp-red);
  margin: 10px 0 5px 0;
}

.info-section p {
  margin: 5px 0;
  font-size: 0.9em;
  line-height: 1.4;
}

.info-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--scp-white);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-close:hover {
  color: var(--scp-red);
}

.info-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: var(--scp-red);
  color: var(--scp-white);
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  box-shadow: 0 0 10px rgba(153, 0, 0, 0.3);
}

.info-toggle:hover {
  background-color: #cc0000;
}

.info-box.hidden {
    display: none;
}

.changelog-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1001;
  background-color: var(--scp-red);
  color: var(--scp-white);
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  box-shadow: 0 0 10px rgba(153, 0, 0, 0.3);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.changelog-toggle:hover {
  background-color: #cc0000;
  transform: scale(1.05);
}

.changelog-box {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 300px;
  max-height: 80vh;
  overflow-y: auto;
  background-color: rgba(15, 15, 15, 0.95);
  border: 2px solid var(--scp-red);
  padding: 15px;
  font-family: 'Courier New', Courier, monospace;
  color: var(--scp-white);
  box-shadow: 0 0 15px rgba(153, 0, 0, 0.2);
  z-index: 1000;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.changelog-box:hover {
  box-shadow: 0 0 20px rgba(153, 0, 0, 0.3);
}

.changelog-box h3 {
  color: var(--scp-red);
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--scp-red);
}

.changelog-entry {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(153, 0, 0, 0.3);
}

.changelog-entry:last-child {
  border-bottom: none;
}

.changelog-entry h4 {
  color: var(--scp-red);
  margin: 0 0 10px 0;
}

.changelog-entry ul {
  margin: 0;
  padding-left: 20px;
}

.changelog-entry ul ul {
  margin-top: 5px;
  margin-bottom: 5px;
}

.changelog-entry li {
  margin-bottom: 5px;
  font-size: 0.9em;
  line-height: 1.4;
}

.changelog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--scp-white);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.changelog-close:hover {
  color: var(--scp-red);
}

.changelog-box.hidden {
  display: none;
}

button:disabled {
    background-color: var(--scp-gray);
    cursor: not-allowed;
}

button:disabled:hover {
    background-color: var(--scp-gray);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(20, 20, 20, 0.95);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scp-red);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #cc0000;
}

#customLengthField {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#customLengthField.hidden {
    display: none;
}

#customLengthField input {
    width: 100%;
    padding: 8px;
    background-color: rgba(30, 30, 30, 0.9);
    color: var(--scp-white);
    border: 1px solid var(--scp-red);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    font-family: inherit;
}

#customLengthField input:focus {
    outline: none;
    border-color: #cc0000;
    box-shadow: 0 0 10px rgba(153, 0, 0, 0.3);
}

#riskClass {
    border-color: var(--scp-red);
}

#riskClass option[value="Notice"] {
    background-color: #446644;
}

#riskClass option[value="Caution"] {
    background-color: #666644;
}

#riskClass option[value="Warning"] {
    background-color: #664444;
}

#riskClass option[value="Danger"] {
    background-color: #442222;
}

#riskClass option[value="Critical"] {
    background-color: #220000;
}

#riskClass option[value="Planetary"] {
    background-color: #221133;
}

#riskClass option[value="Existential"] {
    background-color: #331122;
}

#riskClass option[value="Cosmic"] {
    background-color: #110022;
}

#clearanceLevel {
    border-color: var(--scp-red);
}

#clearanceLevel option[value="Level 1"] {
    background-color: #446644;
}

#clearanceLevel option[value="Level 2"] {
    background-color: #555544;
}

#clearanceLevel option[value="Level 3"] {
    background-color: #664444;
}

#clearanceLevel option[value="Level 4"] {
    background-color: #442222;
}

#clearanceLevel option[value="Level 5"] {
    background-color: #220000;
}

#clearanceLevel option[value="Level 6"] {
    background-color: #110000;
}

#objectClass {
    border-color: var(--scp-red);
}

#objectClass option[value="Safe"] {
    background-color: #446644;
}

#objectClass option[value="Euclid"] {
    background-color: #666644;
}

#objectClass option[value="Keter"] {
    background-color: #664444;
}

#objectClass option[value="Thaumiel"] {
    background-color: #446688;
}

#objectClass option[value="Apollyon"] {
    background-color: #220000;
}

#objectClass option[value="Neutralized"] {
    background-color: #444444;
}

#objectClass option[value="Archon"] {
    background-color: #664466;
}

#objectClass option[value="Cernunnos"] {
    background-color: #446666;
}

#objectClass option[value="Decommissioned"] {
    background-color: #333333;
}

#objectClass option[value="Explained"] {
    background-color: #555555;
}

#objectClass option[value="Hiemal"] {
    background-color: #446680;
}

#objectClass option[value="Pending"] {
    background-color: #555544;
}

#objectClass option[value="Tiamat"] {
    background-color: #664455;
}

#objectClass option[value="Ticonderoga"] {
    background-color: #445566;
}

#objectClass option[value="Uncontained"] {
    background-color: #663333;
}

#objectClass option[value="Esoteric"] {
    background-color: #553366;
}

#objectClass option[value="Anomalous"] {
    background-color: #554433;
}

#objectClass option[value="Gevurah"] {
    background-color: #443322;
}

#objectClass option[value="Hera"] {
    background-color: #553355;
}

#objectClass option[value="Ignosi"] {
    background-color: #662200;
}

#objectClass option[value="Maksur"] {
    background-color: #335566;
}

#objectClass option[value="Netzach"] {
    background-color: #335533;
}

#objectClass option[value="Yesod"] {
    background-color: #334455;
}

#disruptionClass {
    border-color: var(--scp-red);
}

#disruptionClass option[value="Dark"] {
    background-color: #446644;
}

#disruptionClass option[value="Vlam"] {
    background-color: #444466;
}

#disruptionClass option[value="Keneq"] {
    background-color: #666644;
}

#disruptionClass option[value="Ehki"] {
    background-color: #664422;
}

#disruptionClass option[value="Amidia"] {
    background-color: #662222;
}

#disruptionClass option[value="Ekhi"] {
    background-color: #663322;
}

#disruptionClass option[value="Amida"] {
    background-color: #661111;
}

#disruptionClass option[value="Zetetic"] {
    background-color: #553366;
}

#aiModel option[value="mistral-medium"] {
    background-color: #554466;
}

#aiModel option[value="mixtral-8x7b"] {
    background-color: #663355;
}

.preset-buttons,
.template-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.preset-button,
.template-button {
    background: linear-gradient(145deg, var(--scp-blue), #002244);
    color: var(--scp-white);
    border: 2px solid transparent;
    padding: 10px 15px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 120px;
    text-align: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    min-height: 48px;
    box-shadow: 
        0 2px 10px rgba(0, 51, 102, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.preset-button:hover,
.template-button:hover {
    background: linear-gradient(145deg, #004488, var(--scp-blue));
    transform: translateY(-1px);
    box-shadow: 
        0 4px 15px rgba(0, 51, 102, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.theme-toggle {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 100;
    background-color: rgba(102, 102, 102, 0.8);
    color: var(--scp-white);
    padding: 10px 20px;
    border: 2px solid var(--scp-white);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
    text-shadow: none;
    animation: none;
    box-shadow: 0 0 15px rgba(102, 102, 102, 0.3);
    backdrop-filter: blur(5px);
    border-radius: 5px;
}

.theme-toggle:hover {
    background-color: rgba(128, 128, 128, 0.8);
    transform: scale(1.05);
}

.light-theme {
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    color: var(--scp-black);
}

.light-theme .container {
    background: linear-gradient(145deg, 
        rgba(240, 240, 240, 0.95) 0%, 
        rgba(230, 230, 230, 0.9) 50%, 
        rgba(240, 240, 240, 0.95) 100%);
    color: var(--scp-black);
}

.light-theme textarea,
.light-theme select,
.light-theme input {
    background: rgba(250, 250, 250, 0.95);
    color: var(--scp-black);
    border-color: var(--scp-red);
}

.light-theme .option-group {
    background: rgba(245, 245, 245, 0.9);
    color: var(--scp-black);
}

.search-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(30, 30, 30, 0.9);
    color: var(--scp-white);
    border: 1px solid var(--scp-red);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9em;
}

.search-input:focus {
    outline: none;
    border-color: var(--scp-red-light);
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.3);
}

.clear-search-btn {
    background: var(--scp-gray);
    color: var(--scp-white);
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.8em;
    margin-left: 5px;
}

.modal-controls {
    display: flex;
    gap: 5px;
    flex: 1;
    margin: 0 15px;
}

.scp-tags-section {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--scp-gray);
}

.scp-tags-section h4 {
    color: var(--scp-red);
    margin: 0 0 10px 0;
    font-size: 0.9em;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tag-filter-btn {
    background: var(--scp-gray);
    color: var(--scp-white);
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.7em;
    transition: all 0.2s ease;
    min-height: 32px;
}

.tag-filter-btn:hover {
    background: var(--scp-red);
}

.tag-filter-btn.active {
    background: var(--scp-red);
}

.scp-tags {
    margin: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag {
    background: var(--scp-red);
    color: var(--scp-white);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    display: inline-block;
}

.import-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.file-input-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-input {
    display: none;
}

.import-textarea {
    width: 100%;
    height: 200px;
    background: rgba(30, 30, 30, 0.9);
    color: var(--scp-white);
    border: 1px solid var(--scp-red);
    padding: 10px;
    font-family: inherit;
    border-radius: 4px;
    resize: vertical;
}

.import-textarea:focus {
    outline: none;
    border-color: var(--scp-red-light);
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.3);
}

.import-controls {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* NEW: extra output controls responsiveness */
.output-extra-controls button {
  flex: 0 1 auto;
}

@media (max-width: 768px) {
    .output-extra-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .output-extra-controls button {
        width: 100%;
    }
}

/* NEW: small visual tweak for feed placeholders */


.feed-empty,
.feed-error {
  text-align: center;
  color: var(--scp-gray);
  padding: 15px;
  border: 1px dashed var(--scp-gray);
  border-radius: 6px;
  background: rgba(20,20,20,0.4);
}

/* NEW: tiny badges for counts */
.badge {
  display: inline-block;
  background: var(--scp-red);
  color: var(--scp-white);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.75em;
  margin-left: 6px;
}

/* NEW: Comments UI */
.comments-toggle {
  background: var(--scp-gray);
  color: var(--scp-white);
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.85em;
  cursor: pointer;
}
.comments-toggle:hover { background: #888; }

.comments-section {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--scp-gray);
  border-radius: 6px;
  background: rgba(25,25,25,0.9);
}
.comments-section.hidden { display: none; }

.comment-input {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.comment-input textarea {
  flex: 1;
  min-height: 64px;
  resize: vertical;
  font-size: 0.95em;
}
.comment-input .comment-submit {
  background: var(--scp-red);
  border: none;
  color: var(--scp-white);
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 40px;
}
.comment-input .comment-submit:disabled {
  background: var(--scp-gray);
  cursor: not-allowed;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment {
  background: rgba(20,20,20,0.95);
  border: 1px solid var(--scp-gray);
  border-radius: 6px;
  padding: 10px;
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--scp-red);
}
.comment-author {
  color: var(--scp-red);
  font-weight: bold;
  text-decoration: none;
  font-size: 0.9em;
}
.comment-date {
  color: var(--scp-gray);
  font-size: 0.75em;
  margin-left: auto;
}
.comment-body {
  color: var(--scp-white);
  font-size: 0.95em;
  white-space: pre-wrap;
  word-break: break-word;
}
.comment-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.comment-action-btn {
  background: none;
  border: none;
  color: var(--scp-white);
  cursor: pointer;
  font-size: 0.85em;
  padding: 4px 6px;
}
.comment-action-btn:hover { color: var(--scp-red); }

.reply-list {
  margin-top: 8px;
  margin-left: 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 2px dashed rgba(204,0,0,0.2);
  padding-left: 8px;
}

.reply-input {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.reply-input textarea {
  flex: 1;
  min-height: 52px;
  resize: vertical;
}
.reply-input .reply-submit {
  background: var(--scp-blue);
  border: none;
  color: var(--scp-white);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 38px;
}
.reply-input .reply-cancel {
  background: var(--scp-gray);
  border: none;
  color: var(--scp-white);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 38px;
}

/* Small helper for muted text */
.muted {
  color: var(--scp-gray);
  font-size: 0.85em;
}

@media (max-width: 480px) {
  .side-tab { width: 100vw; }
}

@media (max-width: 768px) {
    .preset-buttons,
    .template-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .preset-button,
    .template-button {
        min-width: auto;
        width: 100%;
    }

    .theme-toggle {
        bottom: 120px;
        right: 10px;
        padding: 12px 16px;
        font-size: 0.9em;
    }

    .modal-controls {
        flex-direction: column;
        gap: 10px;
        margin: 0;
    }

    .search-input {
        width: 100%;
    }

    .tags-container {
        gap: 3px;
    }

    .tag-filter-btn {
        font-size: 0.6em;
        padding: 6px 10px;
    }

    .import-section {
        gap: 12px;
    }

    .file-input-section {
        flex-direction: column;
        align-items: stretch;
    }

    .import-controls {
        flex-direction: column;
    }

    .import-textarea {
        height: 150px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .theme-toggle {
        bottom: 110px;
        padding: 10px 12px;
        font-size: 0.8em;
    }

    .tag-filter-btn {
        font-size: 0.55em;
        padding: 4px 6px;
    }

    .import-textarea {
        height: 120px;
    }
}

@media (max-width: 360px) {
    .container {
        padding: 8px;
    }

    .header h1 {
        font-size: 1.6em;
    }

    .options-grid {
        padding: 8px;
    }

    .option-group {
        padding: 10px;
    }

    button {
        padding: 14px 16px;
        font-size: 0.85em;
    }

    .toggle-button {
        padding: 14px 10px;
        font-size: 0.8em;
    }

    .info-box, .changelog-box {
        padding: 10px;
        font-size: 0.8em;
    }
}

/* Landscape orientation adjustments for mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .info-box, .changelog-box {
        max-height: 60vh;
    }

    .modal-content {
        max-height: 70vh;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    button {
        min-height: 48px;
        padding: 16px 20px;
    }

    .toggle-button {
        min-height: 52px;
        padding: 16px 12px;
    }

    select, input, textarea {
        min-height: 48px;
        padding: 12px;
        font-size: 16px;
    }

    .view-button {
        min-height: 48px;
        padding: 12px 20px;
    }

    /* Increase touch targets for small interactive elements */
    .info-close, .changelog-close, .modal-close {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    /* Better spacing for checkbox items */
    .reference-scp-item input[type="checkbox"] {
        width: 24px;
        height: 24px;
        margin-right: 15px;
    }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .container {
        padding: 15px;
        margin: 10px;
        width: auto;
        border-width: 2px;
    }

    .header {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding-bottom: 15px;
    }

    .title-container {
        flex-direction: column;
        gap: 10px;
    }

    .header-logo, .header-bunny {
        width: 80px;
        height: 80px;
    }

    .header h1 {
        font-size: 2em;
        line-height: 1.1;
        margin-bottom: 5px;
    }
    
    .header h2 {
        font-size: 1em;
    }

    /* Mobile Menu Logic */
    .mobile-menu-btn {
        display: flex;
    }

    .app-controls {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(10px);
        z-index: 2000;
        justify-content: center;
        align-items: center;
        padding: 40px;
        gap: 20px;
        transition: opacity 0.3s ease, visibility 0.3s;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .app-controls.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Override fixed positioning for controls when inside mobile menu */
    .app-controls .info-toggle,
    .app-controls .changelog-toggle,
    .app-controls .music-toggle,
    .app-controls .vfx-toggle,
    .app-controls .theme-toggle {
        position: static !important;
        width: 100%;
        max-width: 300px;
        margin: 0;
        transform: none;
        padding: 15px;
        font-size: 1.1em;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    /* Adjust modal positioning for mobile */
    .info-box, .changelog-box {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-height: 80vh;
        right: auto;
        z-index: 2100; /* Above menu */
    }
    
    /* Ensure the output section doesn't overflow horizontally */
    #articleOutput {
        font-size: 0.95em;
        overflow-x: hidden;
    }
    
    /* Better stacking for inputs */
    .option-group {
        padding: 12px;
    }
    
    .input-controls {
        flex-direction: column;
    }
    
    .input-controls button {
        width: 100%;
    }
    
    .button-group {
        flex-direction: column;
    }
    
    .button-group button {
        width: 100%;
        margin-bottom: 5px;
    }
}