:root {
            --bg: #161616;
            --panel: #414040;
            --subpanel: #2b2b3b;
            --text: #cdd6f4;
            --accent: #cba6f7;
            --accent-hover: #f5c2e7;
            --green: #a6e3a1;
        }
        body {
            font-family: system-ui, -apple-system, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }
        .card {
            background: var(--panel);
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            width: 100%;
            max-width: 420px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
            border: 1px solid #313244;
            margin-bottom: 20px;
        }
        input, button {
            width: 100%;
            padding: 12px;
            margin-top: 10px;
            border-radius: 8px;
            border: none;
            box-sizing: border-box;
            font-size: 16px;
        }
        input {
            background: var(--subpanel);
            color: var(--accent);
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            border: 1px solid #45475a;
        }
        input.code-input {
            font-size: 24px;
            letter-spacing: 4px;
        }
        button {
            background: var(--accent);
            color: #11111b;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.2s;
        }
        button:hover { background: var(--accent-hover); }
        .btn-green { background: var(--green); }
        .btn-green:hover { background: #b4befe; }
        
        .code-display {
            font-size: 36px;
            font-weight: bold;
            color: var(--green);
            letter-spacing: 6px;
            margin: 15px 0;
            background: var(--subpanel);
            padding: 12px;
            border-radius: 8px;
            border: 1px dashed var(--accent);
        }

        #video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
            gap: 20px;
            width: 100%;
            max-width: 1400px;
        }
        
        .video-container {
            position: relative;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
            border: 1px solid #313244;
            display: flex;
            flex-direction: column;
        }

        .video-header {
            background: #11111b;
            color: var(--accent);
            padding: 10px 15px;
            font-size: 14px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid #313244;
        }
        .video-header span {
            color: var(--text);
        }

        video {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            max-height: 70vh;
            background: #000;
        }
        #status { font-size: 14px; color: #89dceb; margin-top: 15px; }