body.theme-debug {
  --bg-main: #0a0a0f;
  --bg1: #0a0a0f;
  --bg2: #0a0a0f;

  --accent: #888;
  --accent-soft: rgba(255,255,255,0.1);

  --text-main: #ccc;
  --robot-eyes: #ccc;

  --grid-primary: rgba(255,255,255,0.18);
  --grid-secondary: rgba(120,180,255,0.12);

  opacity: 0.60;
}
body {
  margin: 0;
  background: linear-gradient(
  135deg,
  #3b1f69 0%,
  #6a3fb5 35%,
  #ffb36b 100%
  );

  color:#f3f4ff; 
}

body.theme-gold {
  --bg1: #2a2d4a;     /* deep blue-purple */
  --bg2: #5b3a6d;     /* soft violet */
  --bg3: #f4a261;     /* warm sunset orange */

  --accent: #ffd700;
  --accent-soft: rgba(255, 215, 0, 0.25);

  --text-main: #ffffff;
}
h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6)
}

* {
    box-sizing: border-box;
}
@media (max-width: 768px) {

    .app-shell {

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;

        grid-template-columns: 1fr !important;

        justify-items: center;

        gap: 40px;
    }

    .robot-panel,
    .chat-panel,
    .logs-panel {

        width: 90% !important;
        max-width: 320px;
    }

}

.hidden {
    display: none;
}