.terminal-app {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    var(--primary-bg) 0%,
    var(--secondary-bg) 100%
  );
  padding: var(--spacing-lg);
  position: relative;
}
.terminal-app:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 50%, #00ffff08 50%);
  background-size: 100% 4px;
  pointer-events: none;
  animation: scanlines 0.1s linear infinite;
}
@keyframes scanlines {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(4px);
  }
}
.terminal-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  border: 2px solid var(--accent-cyan);
  border-radius: 8px;
  background: #00ffff0d;
  box-shadow: var(--glow-cyan);
}
.terminal-header h1 {
  font-size: 2rem;
  color: var(--accent-cyan);
  text-shadow: var(--glow-cyan);
  margin-bottom: var(--spacing-sm);
  animation: glow-pulse 2s ease-in-out infinite alternate;
}
.terminal-header p {
  color: var(--text-secondary);
  font-size: 1rem;
}
@keyframes glow-pulse {
  0% {
    text-shadow: var(--glow-cyan);
  }
  to {
    text-shadow:
      0 0 20px var(--accent-cyan),
      0 0 30px var(--accent-cyan);
  }
}
.terminal-content {
  display: grid;
  gap: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}
.terminal-window {
  background: #1a1a2ecc;
  border: 1px solid var(--accent-cyan);
  border-radius: 8px;
  box-shadow: var(--glow-cyan);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: #00ffff1a;
  border-bottom: 1px solid var(--accent-cyan);
}
.window-title {
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 0.9rem;
}
.window-controls {
  display: flex;
  gap: var(--spacing-xs);
}
.control {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}
.control.close {
  background: var(--error-red);
  box-shadow: 0 0 5px var(--error-red);
}
.control.maximize {
  background: var(--warning-amber);
  box-shadow: 0 0 5px var(--warning-amber);
}
.control.minimize {
  background: var(--success-green);
  box-shadow: 0 0 5px var(--success-green);
}
.control:hover {
  transform: scale(1.2);
}
.window-content {
  padding: var(--spacing-md);
  font-family: var(--font-mono);
  line-height: 1.6;
}
.status-line {
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}
.prompt {
  color: var(--accent-cyan);
  margin-right: var(--spacing-sm);
}
.success {
  color: var(--success-green);
  font-weight: 700;
  text-shadow: var(--glow-green);
}
.warning {
  color: var(--warning-amber);
  font-weight: 700;
}
.error {
  color: var(--error-red);
  font-weight: 700;
}
@media (max-width: 768px) {
  .terminal-app {
    padding: var(--spacing-md);
  }
  .terminal-header h1 {
    font-size: 1.5rem;
  }
  .terminal-header {
    padding: var(--spacing-md);
  }
  .window-content {
    padding: var(--spacing-sm);
  }
}
:root {
  --primary-bg: #0a0a0f;
  --secondary-bg: #1a1a2e;
  --accent-cyan: #00ffff;
  --accent-purple: #8a2be2;
  --success-green: #00ff41;
  --warning-amber: #ffbf00;
  --error-red: #ff073a;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --glow-cyan: 0 0 10px var(--accent-cyan);
  --glow-purple: 0 0 10px var(--accent-purple);
  --glow-green: 0 0 10px var(--success-green);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  font-family: var(--font-mono);
  background-color: var(--primary-bg);
  color: var(--text-primary);
  overflow-x: hidden;
}
#root {
  height: 100%;
  width: 100%;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--primary-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-cyan);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-purple);
}
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--primary-bg) 0%,
    var(--secondary-bg) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.loading-container {
  width: 90%;
  max-width: 600px;
}
.loading-window {
  animation: fadeInGlow 0.5s ease-in-out;
}
@keyframes fadeInGlow {
  0% {
    opacity: 0;
    transform: translateY(20px);
    box-shadow: none;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    box-shadow: var(--glow-cyan);
  }
}
.loading-content,
.error-content {
  min-height: 150px;
}
.loading-dots {
  animation: loadingDots 1.5s infinite;
}
@keyframes loadingDots {
  0%,
  20% {
    content: "";
  }
  40% {
    content: ".";
  }
  60% {
    content: "..";
  }
  80%,
  to {
    content: "...";
  }
}
.loading-bar {
  margin-top: var(--spacing-md);
  height: 4px;
  background: #0ff3;
  border-radius: 2px;
  overflow: hidden;
}
.loading-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  border-radius: 2px;
  animation: loadingProgress 2s ease-in-out infinite;
}
@keyframes loadingProgress {
  0% {
    width: 0%;
    transform: translate(-100%);
  }
  50% {
    width: 100%;
    transform: translate(0);
  }
  to {
    width: 100%;
    transform: translate(100%);
  }
}
.error-content .status-line.error {
  color: var(--error-red);
  font-weight: 700;
}
.terminal-button {
  background: transparent;
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.terminal-button:hover {
  background: #00ffff1a;
  box-shadow: var(--glow-cyan);
  transform: translateY(-1px);
}
.terminal-button:active {
  transform: translateY(0);
}
.terminal-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.terminal-button.loading {
  color: var(--text-secondary);
  border-color: var(--text-secondary);
}
.terminal-input {
  background: #1a1a2ecc;
  border: 1px solid var(--accent-cyan);
  color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  border-radius: 4px;
  width: 100%;
  transition: all 0.3s ease;
}
.terminal-input:focus {
  outline: none;
  box-shadow: var(--glow-cyan);
  background: #1a1a2e;
}
.terminal-input::placeholder {
  color: var(--text-secondary);
}
.terminal-textarea {
  background: #1a1a2ecc;
  border: 1px solid var(--accent-cyan);
  color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  border-radius: 4px;
  width: 100%;
  min-height: 100px;
  resize: vertical;
  transition: all 0.3s ease;
}
.terminal-textarea:focus {
  outline: none;
  box-shadow: var(--glow-cyan);
  background: #1a1a2e;
}
.terminal-select {
  background: #1a1a2ecc;
  border: 1px solid var(--accent-cyan);
  color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.terminal-select:focus {
  outline: none;
  box-shadow: var(--glow-cyan);
}
.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--text-secondary);
  border-radius: 50%;
  border-top-color: var(--accent-cyan);
  animation: spin 1s ease-in-out infinite;
  margin-left: var(--spacing-sm);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.terminal-window.primary {
  border-color: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
}
.terminal-window.secondary {
  border-color: var(--accent-purple);
  box-shadow: var(--glow-purple);
}
.terminal-window.success {
  border-color: var(--success-green);
  box-shadow: var(--glow-green);
}
.terminal-window.warning {
  border-color: var(--warning-amber);
  box-shadow: 0 0 10px var(--warning-amber);
}
.terminal-window.error {
  border-color: var(--error-red);
  box-shadow: 0 0 10px var(--error-red);
}
.terminal-button--primary {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.terminal-button--primary:hover {
  background: #00ffff1a;
  box-shadow: var(--glow-cyan);
}
.terminal-button--secondary {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}
.terminal-button--secondary:hover {
  background: #8a2be21a;
  box-shadow: var(--glow-purple);
}
.terminal-button--success {
  border-color: var(--success-green);
  color: var(--success-green);
}
.terminal-button--success:hover {
  background: #00ff411a;
  box-shadow: var(--glow-green);
}
.terminal-button--warning {
  border-color: var(--warning-amber);
  color: var(--warning-amber);
}
.terminal-button--warning:hover {
  background: #ffbf001a;
  box-shadow: 0 0 10px var(--warning-amber);
}
.terminal-button--error {
  border-color: var(--error-red);
  color: var(--error-red);
}
.terminal-button--error:hover {
  background: #ff073a1a;
  box-shadow: 0 0 10px var(--error-red);
}
.terminal-button--sm {
  padding: calc(var(--spacing-xs)) var(--spacing-sm);
  font-size: 0.8rem;
}
.terminal-button--md {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.9rem;
}
.terminal-button--lg {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 1rem;
}
.terminal-button__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.terminal-button__icon {
  display: flex;
  align-items: center;
}
.terminal-button--loading {
  opacity: 0.7;
  cursor: not-allowed;
}
.terminal-input-group {
  margin-bottom: var(--spacing-md);
}
.terminal-input-group--error .terminal-input,
.terminal-input-group--error .terminal-textarea,
.terminal-input-group--error .terminal-select {
  border-color: var(--error-red);
  box-shadow: 0 0 5px #ff073a4d;
}
.terminal-label {
  display: block;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-xs);
  font-weight: 700;
}
.terminal-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.terminal-input--with-icon {
  padding-left: 2.5rem;
}
.terminal-input-icon {
  position: absolute;
  left: var(--spacing-sm);
  color: var(--accent-cyan);
  z-index: 1;
}
.terminal-error {
  display: block;
  color: var(--error-red);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin-top: var(--spacing-xs);
}
.auth-container {
  max-width: 500px;
  margin: 0 auto;
}
.auth-header {
  margin-bottom: var(--spacing-lg);
  text-align: center;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.auth-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-md);
}
.auth-error {
  background: #ff073a1a;
  border: 1px solid var(--error-red);
  border-radius: 4px;
  padding: var(--spacing-sm);
  margin: var(--spacing-sm) 0;
}
.auth-status {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  background: #00ffff0d;
  border-radius: 4px;
}
.password-requirements {
  background: #ffbf001a;
  border: 1px solid var(--warning-amber);
  border-radius: 4px;
  padding: var(--spacing-sm);
  margin: var(--spacing-sm) 0;
}
.password-requirements .status-line.warning {
  color: var(--warning-amber);
  font-weight: 700;
}
@media (max-width: 768px) {
  .auth-container {
    max-width: 100%;
    padding: 0 var(--spacing-sm);
  }
  .auth-form {
    gap: var(--spacing-sm);
  }
}
.auth-status-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  font-size: 0.9rem;
}
.token-display {
  margin-top: var(--spacing-sm);
}
.token-preview {
  display: block;
  background: #0000004d;
  padding: var(--spacing-xs);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  word-break: break-all;
  border: 1px solid var(--accent-cyan);
}
@media (max-width: 768px) {
  .auth-status-header {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}
.image-uploader {
  margin-bottom: var(--spacing-lg);
}
.upload-info {
  margin-bottom: var(--spacing-sm);
}
.info-note {
  color: var(--warning-amber);
  font-size: 0.8rem;
  margin-left: var(--spacing-sm);
}
.upload-dropzone {
  border: 2px dashed var(--accent-cyan);
  border-radius: 8px;
  padding: var(--spacing-xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #00ffff0d;
}
.upload-dropzone:hover {
  border-color: var(--accent-purple);
  background: #8a2be20d;
  box-shadow: var(--glow-purple);
}
.upload-dropzone.drag-active {
  border-color: var(--success-green);
  background: #00ff411a;
  box-shadow: var(--glow-green);
}
.upload-dropzone.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}
.upload-icon {
  font-size: 3rem;
  opacity: 0.7;
}
.upload-text {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1rem;
  margin: 0;
}
.upload-subtext {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin: 0;
}
.upload-error {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: #ff073a1a;
  border: 1px solid var(--error-red);
  border-radius: 4px;
}
.image-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: #1a1a2ecc;
  border: 1px solid var(--accent-cyan);
  border-radius: 8px;
  margin-bottom: var(--spacing-md);
}
.stroke-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}
.control-label {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 700;
}
.stroke-size-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.stroke-size-indicator {
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 3ch;
  text-align: center;
}
.mask-controls {
  display: flex;
  gap: var(--spacing-sm);
}
.mask-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}
.mask-editor-placeholder {
  padding: var(--spacing-xl);
  text-align: center;
  border: 1px dashed var(--text-secondary);
  border-radius: 8px;
  background: #1a1a2e4d;
}
.scale-info {
  margin-bottom: var(--spacing-sm);
  text-align: center;
  padding: var(--spacing-sm);
  background: #ffbf001a;
  border: 1px solid var(--warning-amber);
  border-radius: 4px;
  max-width: 600px;
}
.image-container {
  position: relative;
  display: inline-block;
  border: 2px solid var(--accent-cyan);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--glow-cyan);
  width: auto;
  height: auto;
}
.image-container img {
  display: block;
  max-width: 100%;
  height: auto;
}
.image-container canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0.5 !important;
  cursor: crosshair !important;
}
@media (max-width: 768px) {
  .mask-editor {
    align-items: stretch;
  }
  .image-container {
    align-self: center;
    max-width: calc(100vw - 2rem);
  }
  .image-container img {
    max-width: 100%;
    height: auto;
  }
  .image-controls {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
  }
  .stroke-control,
  .mask-controls {
    justify-content: center;
  }
  .upload-dropzone {
    padding: var(--spacing-lg);
  }
  .upload-icon {
    font-size: 2rem;
  }
  .upload-text {
    font-size: 0.9rem;
  }
}
.image-editor-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.image-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--accent-cyan);
}
.prompt-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
@media (max-width: 768px) {
  .image-editor-section {
    gap: var(--spacing-sm);
  }
  .image-actions {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
  }
}
.api-controls,
.controls-header {
  margin-bottom: 1rem;
}
.controls-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.control-label {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-text-primary);
  font-weight: 600;
}
.mode-selector {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mode-description {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0;
}
.prompt-hint {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0;
}
.generate-button {
  min-height: 3rem;
  font-weight: 600;
}
.button-hint {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0;
  text-align: center;
}
.loading-status {
  margin-top: 1rem;
}
.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-primary);
}
.api-debug-panel {
  margin-bottom: 1rem;
}
.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.debug-terminal {
  background: #000c;
  border: 1px solid var(--color-primary);
}
.debug-controls {
  margin-bottom: 1rem;
  display: flex;
  justify-content: flex-end;
}
.payload-container {
  margin-bottom: 1rem;
  max-height: 400px;
  overflow-y: auto;
}
.payload-display {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0;
  padding: 1rem;
  background: #00142880;
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-break: break-all;
}
.payload-display .json-key {
  color: var(--color-primary);
}
.payload-display .json-string {
  color: var(--color-success);
}
.payload-display .json-literal {
  color: var(--color-warning);
}
.payload-display .json-number {
  color: #ff6b6b;
}
.payload-display .json-token {
  color: var(--color-success);
  background: #00ff411a;
  padding: 0 4px;
  border-radius: 2px;
}
.payload-display .json-error {
  color: var(--color-error);
  background: #ff073a1a;
  padding: 0 4px;
  border-radius: 2px;
}
.payload-display .json-data {
  color: var(--color-accent);
  background: #8a2be21a;
  padding: 0 4px;
  border-radius: 2px;
}
.debug-info {
  margin-top: 1rem;
}
.debug-note {
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  margin: 0.25rem 0;
}
.results-viewer {
  margin-bottom: 1rem;
}
.results-viewer.loading {
  text-align: center;
  padding: 3rem 1rem;
}
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 255, 255, 0.2);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.loading-spinner.small {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
.loading-dots {
  display: flex;
  gap: 0.5rem;
}
.loading-dots span {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}
.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
.results-viewer.error {
  border-color: var(--color-error);
}
.error-content {
  text-align: center;
}
.error-content h3 {
  color: var(--color-error);
  margin-bottom: 1rem;
}
.error-message {
  margin-bottom: 1.5rem;
}
.error-message pre {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: #ff073a1a;
  border: 1px solid var(--color-error);
  border-radius: 4px;
  padding: 1rem;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}
.error-actions {
  display: flex;
  justify-content: center;
}
.results-viewer.empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-secondary);
}
.empty-content .hint {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.results-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.download-status {
  font-size: 0.8rem;
  color: var(--color-success);
  font-family: var(--font-mono);
}
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.result-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.canvas-container {
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
  background: #0000004d;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
.result-canvas {
  max-width: 100%;
  max-height: 400px;
  height: auto;
  display: block;
}
.result-actions {
  display: flex;
  justify-content: center;
}
.status-display {
  margin-bottom: 1.5rem;
}
.status-line {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin: 0.5rem 0;
  color: var(--color-text-secondary);
}
.status-line .prompt {
  color: var(--color-primary);
  font-weight: 700;
}
.status-line .success {
  color: var(--color-success);
  font-weight: 700;
}
.status-line .error {
  color: var(--color-error);
  font-weight: 700;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%,
  80%,
  to {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .mode-selector {
    flex-direction: column;
  }
  .results-header {
    flex-direction: column;
    align-items: stretch;
  }
  .results-actions {
    justify-content: center;
  }
  .results-grid {
    grid-template-columns: 1fr;
  }
  .debug-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
}
.image-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
  background: #0014284d;
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 8px;
}
.mode-control,
.prompt-control,
.generate-control {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mode-control .mode-selector {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mode-control .mode-description {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0;
}
.prompt-control .prompt-hint {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0;
}
.generate-control .generate-button {
  min-height: 3rem;
  font-weight: 600;
}
.generate-control .button-hint {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0;
  text-align: center;
}
.api-controls-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 255, 255, 0.2);
}
.api-controls-section .control-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.api-controls-section .control-label {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-text-primary);
  font-weight: 600;
}
.api-controls-section .mode-selector {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.api-controls-section .mode-description {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0;
}
.api-controls-section .prompt-hint {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0;
}
.api-controls-section .generate-button {
  min-height: 3rem;
  font-weight: 600;
}
.api-controls-section .button-hint {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0;
  text-align: center;
}
.api-controls-section .loading-status {
  margin-top: 1rem;
}
.api-controls-section .status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-primary);
}
.error-boundary-content,
.error-display-content {
  padding: 1.5rem;
}
.error-header h3 {
  color: var(--color-error);
  margin-bottom: 0.5rem;
}
.error-header p {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}
.error-details {
  margin: 1.5rem 0;
}
.error-details h4 {
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.error-message {
  background: #ff073a1a;
  border: 1px solid var(--color-error);
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem 0;
}
.error-message code {
  font-family: var(--font-mono);
  color: var(--color-error);
  font-weight: 600;
}
.error-code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
}
.error-stack {
  margin-top: 1rem;
}
.error-stack summary {
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.error-stack pre {
  background: #00000080;
  border: 1px solid rgba(255, 7, 58, 0.3);
  border-radius: 4px;
  padding: 1rem;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.error-troubleshooting {
  margin: 1.5rem 0;
}
.error-troubleshooting h4 {
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}
.error-troubleshooting ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.error-troubleshooting li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}
.error-troubleshooting li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}
.error-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.error-help {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 255, 255, 0.2);
}
.error-help h4 {
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}
.error-help ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.error-help li {
  padding: 0.25rem 0 0.25rem 1.5rem;
  position: relative;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}
.error-help li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary);
}
.inline-error {
  background: #ff073a1a;
  border: 1px solid var(--color-error);
  border-radius: 4px;
  padding: 0.75rem;
  margin: 0.5rem 0;
}
.inline-error-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.error-icon {
  color: var(--color-error);
  font-weight: 700;
  flex-shrink: 0;
}
.inline-error .error-message {
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-primary);
}
.inline-error-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.error-retry-btn,
.error-dismiss-btn {
  background: none;
  border: 1px solid rgba(0, 255, 255, 0.3);
  color: var(--color-primary);
  width: 24px;
  height: 24px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.error-retry-btn:hover,
.error-dismiss-btn:hover {
  background: #00ffff1a;
  border-color: var(--color-primary);
}
.error-retry-btn:active,
.error-dismiss-btn:active {
  transform: scale(0.95);
}
.terminal.terminal--error {
  border-color: var(--color-error);
  background: #ff073a0d;
}
.terminal.terminal--error .terminal-header {
  background: #ff073a1a;
  border-bottom-color: var(--color-error);
}
.terminal.terminal--error .terminal-title {
  color: var(--color-error);
}
@media (max-width: 768px) {
  .error-actions {
    flex-direction: column;
  }
  .error-actions button {
    width: 100%;
  }
  .inline-error-content {
    flex-wrap: wrap;
  }
  .inline-error-actions {
    margin-top: 0.5rem;
    width: 100%;
    justify-content: flex-end;
  }
}
.enhanced-debug-panel {
  margin-bottom: 1rem;
}
.hacker-terminal {
  background: linear-gradient(135deg, #000000f2, #001400e6);
  border: 2px solid var(--color-success);
  box-shadow:
    0 0 20px #00ff414d,
    inset 0 0 20px #00ff411a;
  position: relative;
  overflow: hidden;
}
.hacker-terminal:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 65, 0.1),
    transparent
  );
  animation: hackerScan 3s infinite;
}
.debug-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-success);
  margin-bottom: 1rem;
  background: #00000080;
}
.debug-tab {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
  position: relative;
}
.debug-tab:hover {
  color: var(--color-success);
  background: #00ff411a;
}
.debug-tab.active {
  color: var(--color-success);
  border-bottom-color: var(--color-success);
  background: #00ff4133;
  text-shadow: 0 0 10px var(--color-success);
}
.debug-content {
  min-height: 300px;
  max-height: 600px;
  overflow-y: auto;
  padding: 1rem;
}
.debug-activity {
  font-family: var(--font-mono);
}
.activity-header h4 {
  color: var(--color-success);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px var(--color-success);
}
.activity-description {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.activity-log {
  background: #000000b3;
  border: 1px solid rgba(0, 255, 65, 0.3);
  border-radius: 4px;
  padding: 1rem;
  max-height: 400px;
  overflow-y: auto;
  font-size: 0.8rem;
}
.activity-empty {
  text-align: center;
  color: var(--color-text-secondary);
  padding: 2rem;
}
.activity-empty .hint {
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.activity-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem;
  border-radius: 2px;
  animation: activityFadeIn 0.5s ease-in;
}
.activity-time {
  color: var(--color-primary);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.activity-message {
  color: var(--color-text-primary);
  flex: 1;
}
.activity-details {
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  margin-top: 0.25rem;
  padding-left: 2rem;
  font-style: italic;
}
.activity-success {
  background: #00ff411a;
  border-left: 2px solid var(--color-success);
}
.activity-warning {
  background: #ffbf001a;
  border-left: 2px solid var(--color-warning);
}
.activity-error {
  background: #ff073a1a;
  border-left: 2px solid var(--color-error);
}
.debug-payload {
  font-family: var(--font-mono);
}
.payload-header {
  margin-bottom: 1rem;
}
.payload-header h4 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.payload-description {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.payload-json {
  background: #000c;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--color-text-primary);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}
.payload-explanation {
  margin-top: 1rem;
  padding: 1rem;
  background: #00ffff0d;
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 4px;
}
.payload-explanation h5 {
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.payload-explanation li {
  padding: 0.25rem 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.payload-explanation strong {
  color: var(--color-success);
}
.debug-curl {
  font-family: var(--font-mono);
}
.curl-header h4 {
  color: var(--color-warning);
  margin-bottom: 0.5rem;
}
.curl-section {
  margin-bottom: 2rem;
}
.curl-section h5 {
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.curl-command {
  background: #000000e6;
  border: 1px solid var(--color-warning);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.curl-command pre {
  color: var(--color-warning);
  font-size: 0.8rem;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.postman-info {
  margin-bottom: 0.75rem;
}
.postman-info p {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.curl-tips {
  padding: 1rem;
  background: #8a2be21a;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
}
.curl-tips h5 {
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}
.curl-tips li {
  padding: 0.25rem 0;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}
.curl-tips code {
  background: #00000080;
  color: var(--color-accent);
  padding: 0.125rem 0.25rem;
  border-radius: 2px;
  font-size: 0.7rem;
}
.debug-data {
  font-family: var(--font-mono);
}
.data-header h4 {
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.data-section {
  margin-bottom: 2rem;
}
.data-section h5 {
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.data-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.data-content {
  background: #000c;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  padding: 1rem;
  max-height: 200px;
  overflow-y: auto;
}
.data-content pre {
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.2;
}
.data-info {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #0000004d;
  border-radius: 2px;
}
.hacker-terminal ::-webkit-scrollbar {
  width: 8px;
}
.hacker-terminal ::-webkit-scrollbar-track {
  background: #00000080;
}
.hacker-terminal ::-webkit-scrollbar-thumb {
  background: var(--color-success);
  border-radius: 4px;
}
.hacker-terminal ::-webkit-scrollbar-thumb:hover {
  background: #00ff41cc;
}
@media (max-width: 768px) {
  .debug-tabs {
    flex-wrap: wrap;
  }
  .debug-tab {
    flex: 1;
    min-width: 120px;
    font-size: 0.8rem;
    padding: 0.5rem;
  }
  .debug-content {
    padding: 0.75rem;
  }
  .data-controls {
    flex-direction: column;
  }
  .curl-command pre {
    font-size: 0.7rem;
  }
}
.enhanced-debug-console {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(135deg, #000000fa, #001400f2);
  border-top: 2px solid var(--color-success);
  box-shadow:
    0 -5px 20px #00ff414d,
    inset 0 2px 20px #00ff411a;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.enhanced-debug-console.collapsed {
  transform: translateY(calc(100% - 60px));
}
.enhanced-debug-console.expanded {
  transform: translateY(0);
  height: 70vh;
  max-height: 600px;
}
.console-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 255, 65, 0.3);
  background: #000c;
  position: relative;
  overflow: hidden;
}
.console-header:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 65, 0.1),
    transparent
  );
  animation: hackerScan 4s infinite;
}
.console-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  color: var(--color-success);
  font-weight: 600;
  text-shadow: 0 0 10px var(--color-success);
}
.console-icon {
  font-size: 1.2rem;
  animation: consolePulse 2s infinite;
}
@keyframes consolePulse {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.console-text {
  font-size: 1rem;
  letter-spacing: 0.5px;
}
.activity-indicator {
  position: relative;
}
.activity-count {
  background: var(--color-success);
  color: var(--primary-bg);
  font-size: 0.7rem;
  padding: 0.125rem 0.375rem;
  border-radius: 10px;
  font-weight: 700;
  animation: activityPulse 1s infinite;
}
@keyframes activityPulse {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
.console-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}
.expand-hint {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.console-header:hover .expand-hint {
  opacity: 1;
  color: var(--color-success);
}
.expand-arrow {
  font-size: 1rem;
  color: var(--color-success);
  transition: all 0.3s ease;
  text-shadow: 0 0 5px var(--color-success);
}
.expand-arrow.up {
  transform: rotate(0);
}
.expand-arrow.down {
  transform: rotate(180deg);
}
.console-content {
  height: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.enhanced-debug-console .debug-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-success);
  background: #00000080;
  flex-shrink: 0;
}
.enhanced-debug-console .debug-tab {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.enhanced-debug-console .debug-tab:hover {
  color: var(--color-success);
  background: #00ff411a;
}
.enhanced-debug-console .debug-tab.active {
  color: var(--color-success);
  border-bottom-color: var(--color-success);
  background: #00ff4133;
  text-shadow: 0 0 10px var(--color-success);
}
.tab-badge {
  background: var(--color-success);
  color: var(--primary-bg);
  font-size: 0.6rem;
  padding: 0.125rem 0.25rem;
  border-radius: 8px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}
.enhanced-debug-console .debug-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: #0000004d;
}
.enhanced-debug-console:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 65, 0.05),
    transparent
  );
  animation: hackerScan 6s infinite;
  pointer-events: none;
}
.enhanced-debug-console ::-webkit-scrollbar {
  width: 8px;
}
.enhanced-debug-console ::-webkit-scrollbar-track {
  background: #00000080;
}
.enhanced-debug-console ::-webkit-scrollbar-thumb {
  background: var(--color-success);
  border-radius: 4px;
}
.enhanced-debug-console ::-webkit-scrollbar-thumb:hover {
  background: #00ff41cc;
}
@media (max-width: 768px) {
  .enhanced-debug-console.expanded {
    height: 80vh;
  }
  .console-header {
    padding: 0 1rem;
  }
  .console-title {
    gap: 0.5rem;
  }
  .console-text {
    font-size: 0.9rem;
  }
  .expand-hint {
    display: none;
  }
  .enhanced-debug-console .debug-tabs {
    flex-wrap: wrap;
  }
  .enhanced-debug-console .debug-tab {
    flex: 1;
    min-width: 120px;
    font-size: 0.8rem;
    padding: 0.5rem;
    justify-content: center;
  }
  .enhanced-debug-console .debug-content {
    padding: 0.75rem;
  }
}
body {
  padding-bottom: 60px;
}
.enhanced-debug-console .activity-log {
  background: #000000b3;
  border: 1px solid rgba(0, 255, 65, 0.3);
  border-radius: 4px;
  padding: 1rem;
  max-height: 300px;
  overflow-y: auto;
  font-size: 0.8rem;
}
.enhanced-debug-console .activity-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem;
  border-radius: 2px;
  animation: activityFadeIn 0.5s ease-in;
}
.enhanced-debug-console .activity-time {
  color: var(--color-primary);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.enhanced-debug-console .activity-icon {
  flex-shrink: 0;
}
.enhanced-debug-console .activity-message {
  color: var(--color-text-primary);
  flex: 1;
}
.enhanced-debug-console .activity-details {
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  margin-top: 0.25rem;
  padding-left: 2rem;
  font-style: italic;
}
.enhanced-debug-console .activity-success {
  background: #00ff411a;
  border-left: 2px solid var(--color-success);
}
.enhanced-debug-console .activity-warning {
  background: #ffbf001a;
  border-left: 2px solid var(--color-warning);
}
.enhanced-debug-console .activity-error {
  background: #ff073a1a;
  border-left: 2px solid var(--color-error);
}
.image-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s ease;
}
.image-editor-container .main-content {
  flex: 1;
  overflow-y: auto;
  transition: all 0.3s ease;
}
.image-editor-container.debug-expanded .main-content {
  max-height: 60vh;
}
.enhanced-debug-console {
  background: linear-gradient(135deg, #000000f2, #001400e6);
  border: 2px solid var(--success-green);
  box-shadow:
    0 0 20px #00ff414d,
    inset 0 0 20px #00ff411a;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 8px 8px 0 0;
}
.enhanced-debug-console.collapsed {
  height: auto;
  min-height: 60px;
}
.console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: #000c;
  border-bottom: 1px solid var(--success-green);
  cursor: pointer;
  transition: all 0.3s ease;
}
@media (max-width: 768px) {
  .image-editor-container.debug-expanded .main-content {
    max-height: 50vh;
  }
  .enhanced-debug-console.expanded {
    height: 50vh;
  }
  .debug-tabs {
    overflow-x: auto;
  }
  .debug-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .console-header {
    padding: var(--spacing-sm);
  }
  .console-title {
    font-size: 0.9rem;
  }
  .debug-content {
    padding: var(--spacing-sm);
  }
}
.terminal-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
  transition: padding-bottom 0.3s ease;
}
.terminal-app.debug-console-expanded .terminal-layout {
  padding-bottom: 40vh;
}
.enhanced-debug-console {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #000000f2, #001400e6);
  border: 2px solid var(--success-green);
  border-bottom: none;
  box-shadow:
    0 0 20px #00ff414d,
    inset 0 0 20px #00ff411a;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 8px 8px 0 0;
  z-index: 1000;
}
.enhanced-debug-console.collapsed {
  height: 60px;
}
.enhanced-debug-console.expanded {
  height: 40vh;
  min-height: 300px;
}
.enhanced-debug-console:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 65, 0.1),
    transparent
  );
  animation: hackerScan 3s infinite;
}
@keyframes hackerScan {
  0% {
    left: -100%;
  }
  to {
    left: 100%;
  }
}
.console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: #000c;
  border-bottom: 1px solid var(--success-green);
  cursor: pointer;
  transition: all 0.3s ease;
  height: 60px;
  box-sizing: border-box;
}
.console-header:hover {
  background: #00ff411a;
}
.console-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-mono);
  color: var(--success-green);
  font-weight: 700;
}
.console-icon {
  font-size: 1.2rem;
}
.console-text {
  font-size: 1rem;
  text-shadow: 0 0 10px var(--success-green);
}
.activity-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.activity-count {
  background: var(--success-green);
  color: var(--primary-bg);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.console-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.expand-hint {
  opacity: 0.7;
}
.expand-arrow {
  font-size: 1rem;
  color: var(--success-green);
  transition: transform 0.3s ease;
}
.expand-arrow.up {
  transform: rotate(180deg);
}
.console-content {
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px);
  overflow: hidden;
}
.enhanced-debug-console.collapsed .console-content {
  display: none;
}
.debug-tabs {
  display: flex;
  border-bottom: 1px solid var(--success-green);
  background: #00000080;
  flex-shrink: 0;
}
.debug-tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.debug-tab:hover {
  color: var(--success-green);
  background: #00ff411a;
}
.debug-tab.active {
  color: var(--success-green);
  border-bottom-color: var(--success-green);
  background: #00ff4133;
  text-shadow: 0 0 10px var(--success-green);
}
.tab-badge {
  background: var(--success-green);
  color: var(--primary-bg);
  padding: 1px 4px;
  border-radius: 8px;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 14px;
  text-align: center;
}
.debug-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  font-family: var(--font-mono);
}
.debug-activity .activity-header h4 {
  color: var(--success-green);
  margin-bottom: var(--spacing-xs);
  text-shadow: 0 0 10px var(--success-green);
}
.debug-activity .activity-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
}
.activity-log {
  background: #000000b3;
  border: 1px solid rgba(0, 255, 65, 0.3);
  border-radius: 4px;
  padding: var(--spacing-md);
  max-height: 300px;
  overflow-y: auto;
  font-size: 0.8rem;
}
.activity-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: var(--spacing-xl);
}
.activity-empty .hint {
  font-size: 0.8rem;
  margin-top: var(--spacing-xs);
}
.activity-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-xs);
  border-radius: 2px;
  animation: activityFadeIn 0.5s ease-in;
}
@keyframes activityFadeIn {
  0% {
    opacity: 0;
    transform: translate(-10px);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.activity-time {
  color: var(--accent-cyan);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.activity-icon {
  flex-shrink: 0;
}
.activity-message {
  color: var(--text-primary);
  flex: 1;
}
.activity-details {
  color: var(--text-secondary);
  font-size: 0.7rem;
  margin-top: var(--spacing-xs);
  padding-left: 2rem;
  font-style: italic;
}
.activity-success {
  background: #00ff411a;
  border-left: 2px solid var(--success-green);
}
.activity-warning {
  background: #ffbf001a;
  border-left: 2px solid var(--warning-amber);
}
.activity-error {
  background: #ff073a1a;
  border-left: 2px solid var(--error-red);
}
.debug-payload .payload-header h4,
.debug-curl .curl-header h4,
.debug-data .data-header h4 {
  color: var(--accent-cyan);
  margin-bottom: var(--spacing-xs);
}
.payload-json,
.curl-command pre,
.data-content pre {
  background: #000c;
  border: 1px solid var(--accent-cyan);
  border-radius: 4px;
  padding: var(--spacing-md);
  font-size: 0.8rem;
  color: var(--text-primary);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}
@media (max-width: 768px) {
  .terminal-app.debug-console-expanded .terminal-layout__content {
    padding-bottom: 50vh;
  }
  .enhanced-debug-console.expanded {
    height: 50vh;
  }
  .debug-tabs {
    overflow-x: auto;
  }
  .debug-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .console-header {
    padding: var(--spacing-sm);
  }
  .console-title {
    font-size: 0.9rem;
  }
  .debug-content {
    padding: var(--spacing-sm);
  }
}
.payload-header,
.curl-header,
.data-header {
  margin-bottom: var(--spacing-md);
}
.payload-description,
.curl-description,
.data-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
}
.payload-content {
  margin: var(--spacing-md) 0;
}
.payload-explanation {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: #00ffff0d;
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 4px;
}
.payload-explanation h5 {
  color: var(--accent-cyan);
  margin-bottom: var(--spacing-sm);
}
.payload-explanation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.payload-explanation li {
  padding: var(--spacing-xs) 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.payload-explanation strong {
  color: var(--accent-cyan);
}
.curl-section {
  margin-bottom: var(--spacing-lg);
}
.curl-section h5 {
  color: var(--accent-cyan);
  margin-bottom: var(--spacing-sm);
}
.curl-command,
.postman-info {
  margin: var(--spacing-sm) 0;
}
.postman-info p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}
.curl-tips {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: #00ffff0d;
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 4px;
}
.curl-tips h5 {
  color: var(--accent-cyan);
  margin-bottom: var(--spacing-sm);
}
.curl-tips ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.curl-tips li {
  padding: var(--spacing-xs) 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.curl-tips code {
  background: #00000080;
  padding: 2px 4px;
  border-radius: 2px;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
}
.data-section {
  margin-bottom: var(--spacing-lg);
}
.data-section h5 {
  color: var(--accent-cyan);
  margin-bottom: var(--spacing-sm);
}
.data-controls {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}
.data-content {
  margin: var(--spacing-sm) 0;
}
.data-info {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}
.debug-payload .payload-header .terminal-button,
.debug-curl .curl-section .terminal-button,
.debug-data .data-controls .terminal-button {
  margin-top: var(--spacing-sm);
}
.debug-payload,
.debug-curl,
.debug-data {
  padding: var(--spacing-md);
}
.debug-payload h4,
.debug-curl h4,
.debug-data h4 {
  margin-top: 0;
}
.enhanced-debug-console .debug-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #000000f2 !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid var(--success-green) !important;
}
.enhanced-debug-console .debug-content {
  overflow-y: auto !important;
  max-height: calc(100% - 100px) !important;
}
.debug-activity .activity-log {
  max-height: 250px !important;
  overflow-y: auto !important;
}
@media (max-width: 768px) {
  .terminal-layout {
    padding-bottom: 60px;
  }
  .terminal-app.debug-console-expanded .terminal-layout {
    padding-bottom: 50vh;
  }
}
.terminal-layout__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.terminal-layout__content {
  height: 100%;
  overflow-y: auto;
}
.curl-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}
.curl-section-header h5 {
  margin: 0;
  color: var(--accent-cyan);
}
.curl-section-header .terminal-button {
  margin: 0;
}
@media (max-width: 768px) {
  .curl-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
  .curl-section-header .terminal-button {
    align-self: flex-end;
  }
}
.terminal-layout {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.terminal-layout__header {
  flex-shrink: 0;
  margin-bottom: var(--spacing-lg);
}
.terminal-layout__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}
.terminal-layout__content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-lg);
  align-items: start;
  transition: all 0.3s ease;
}
.terminal-layout__main {
  min-width: 0;
}
.terminal-layout__sidebar {
  width: 350px;
  flex-shrink: 0;
}
.terminal-grid {
  display: grid;
  width: 100%;
}
.terminal-grid--1col {
  grid-template-columns: 1fr;
}
.terminal-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}
.terminal-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}
.terminal-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}
.terminal-grid--gap-sm {
  gap: var(--spacing-sm);
}
.terminal-grid--gap-md {
  gap: var(--spacing-md);
}
.terminal-grid--gap-lg {
  gap: var(--spacing-lg);
}
.terminal-grid__item {
  min-width: 0;
}
.terminal-grid__item--span-1 {
  grid-column: span 1;
}
.terminal-grid__item--span-2 {
  grid-column: span 2;
}
.terminal-grid__item--span-3 {
  grid-column: span 3;
}
.terminal-grid__item--span-4 {
  grid-column: span 4;
}
@media (max-width: 1200px) {
  .terminal-layout__sidebar {
    width: 300px;
  }
}
@media (max-width: 992px) {
  .terminal-layout__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  .terminal-layout__sidebar {
    width: 100%;
    order: -1;
  }
  .terminal-grid--3col,
  .terminal-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .terminal-layout {
    padding: var(--spacing-md);
  }
  .terminal-layout__content {
    gap: var(--spacing-sm);
  }
  .terminal-grid--2col,
  .terminal-grid--3col,
  .terminal-grid--4col {
    grid-template-columns: 1fr;
  }
  .terminal-grid__item--span-2,
  .terminal-grid__item--span-3,
  .terminal-grid__item--span-4 {
    grid-column: span 1;
  }
}
@media (max-width: 480px) {
  .terminal-layout {
    padding: var(--spacing-sm);
  }
  .terminal-layout__header {
    margin-bottom: var(--spacing-md);
  }
  .terminal-layout__content {
    gap: var(--spacing-xs);
  }
}
.terminal-section {
  margin-bottom: var(--spacing-xl);
}
.terminal-section__header {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--accent-cyan);
}
.terminal-section__title {
  color: var(--accent-cyan);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}
.terminal-section__subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: var(--spacing-xs) 0 0 0;
}
.terminal-hidden-mobile {
  display: block;
}
.terminal-hidden-desktop {
  display: none;
}
@media (max-width: 768px) {
  .terminal-hidden-mobile {
    display: none;
  }
  .terminal-hidden-desktop {
    display: block;
  }
}
.terminal-mt-0 {
  margin-top: 0;
}
.terminal-mt-sm {
  margin-top: var(--spacing-sm);
}
.terminal-mt-md {
  margin-top: var(--spacing-md);
}
.terminal-mt-lg {
  margin-top: var(--spacing-lg);
}
.terminal-mt-xl {
  margin-top: var(--spacing-xl);
}
.terminal-mb-0 {
  margin-bottom: 0;
}
.terminal-mb-sm {
  margin-bottom: var(--spacing-sm);
}
.terminal-mb-md {
  margin-bottom: var(--spacing-md);
}
.terminal-mb-lg {
  margin-bottom: var(--spacing-lg);
}
.terminal-mb-xl {
  margin-bottom: var(--spacing-xl);
}
.terminal-p-0 {
  padding: 0;
}
.terminal-p-sm {
  padding: var(--spacing-sm);
}
.terminal-p-md {
  padding: var(--spacing-md);
}
.terminal-p-lg {
  padding: var(--spacing-lg);
}
.terminal-p-xl {
  padding: var(--spacing-xl);
}