* { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #000; overflow: hidden; font-family: 'VT323', monospace; }

    .terminal-container { min-height: 100vh; background: #0a0a0a; color: #ffb000; position: relative; overflow: hidden; }
    .terminal-container::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
      pointer-events: none; z-index: 2; animation: scanlines 8s linear infinite;
    }
    @keyframes scanlines { 0% { transform: translateY(0); } 100% { transform: translateY(10px); } }

    .terminal-container::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.7) 100%);
      pointer-events: none; z-index: 1;
    }

    .banner h1 { font-size: 32px; margin-bottom: 5px; }
    .banner .subtitle { font-size: 20px; color: #ffe0b3; margin-top: 8px; letter-spacing: 2px; }

    .status-bar { background: #1a1a1a; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center;
      font-size: 20px; border-bottom: 2px solid #333; position: relative; z-index: 3; }
    .status-bar .status-item { display: flex; align-items: center; gap: 10px; }
    .status-indicator { width: 12px; height: 12px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 10px #00ff00; animation: pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

    .terminal-content { padding: 30px; height: calc(100vh - 180px); overflow-y: auto; position: relative; z-index: 3; }
    .terminal-content::-webkit-scrollbar { width: 12px; }
    .terminal-content::-webkit-scrollbar-track { background: #1a1a1a; }
    .terminal-content::-webkit-scrollbar-thumb { background: #ffb000; border-radius: 6px; }

    .terminal-line { font-size: 24px; line-height: 1.6; margin: 4px 0; text-shadow: 0 0 8px rgba(255,176,0,0.8); }
    .terminal-line.input { color: #ffd700; }
    .terminal-line.error { color: #ff4444; text-shadow: 0 0 8px rgba(255,68,68,0.8); }
    .terminal-line.output { color: #ffb000; }
    .terminal-line.system { color: #00ff88; text-shadow: 0 0 8px rgba(0,255,136,0.6); }

    .command-input { position: relative; z-index: 3; padding: 20px 30px; border-top: 2px solid #333; background: #0f0f0f; }
    .command-input form { display: flex; align-items: center; gap: 10px; }
    .command-input .prompt { font-size: 24px; color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.8); }
    .command-input input {
      flex: 1; background: transparent; border: none; outline: none;
      font-family: 'VT323', monospace; font-size: 24px; color: #ffd700;
      text-shadow: 0 0 8px rgba(255,215,0,0.8);
    }
    .cursor { display: inline-block; width: 12px; height: 24px; background: #ffb000;
      animation: blink 1s step-end infinite; box-shadow: 0 0 8px rgba(255,176,0,0.8); }
    @keyframes blink { 0%,50% { opacity: 1; } 50.1%,100% { opacity: 0; } }

    .crt-effect { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%),
                  linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06));
      background-size: 100% 2px, 3px 100%; pointer-events: none; z-index: 4; }

    @media (max-width: 768px) {
      .banner h1 { font-size: 28px; letter-spacing: 2px; }
      .banner .subtitle { font-size: 14px; }
      .status-bar { flex-direction: column; gap: 8px; font-size: 16px; }
      .terminal-line, .command-input .prompt, .command-input input { font-size: 18px; }
      .terminal-content { padding: 20px; height: calc(100vh - 240px); }
    }