body {
            background: linear-gradient(135deg, #0f2027 0%, #2c5364 100%);
            color: #e0e0e0;
            font-family: 'Roboto Mono', 'Consolas', 'Courier New', monospace;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .pcb-bg {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 0;
            pointer-events: none;
        }
        #main-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            margin-top: 40px;
            gap: 36px;
        }
        #player-container {
            width: 760px;
            background: rgba(24, 32, 40, 0.98);
            border-radius: 20px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 2.5px solid #00ffcc;
            padding: 30px 32px 22px 32px;
            margin-right: 0;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #player-container:before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 20px;
            border: 2.5px dashed #00ffcc44;
            pointer-events: none;
        }
        #video {
            width: 700px;
            height: 400px;
            background: #000;
            border-radius: 14px;
            border: 2.5px solid #00ffcc;
            box-shadow: 0 0 28px #00ffcc33;
            display: block;
            margin: 0 auto;
        }
        #video-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 22px;
            background: #16222a;
            border-radius: 10px;
            padding: 12px 18px;
            box-shadow: 0 2px 8px #00ffcc22;
            border: 1.5px solid #00ffcc55;
            width: 700px;
            gap: 10px;
        }
        .controls-left, .controls-center, .controls-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .controls-center {
            flex: 1;
            justify-content: center;
        }
        .controls-right {
            justify-content: flex-end;
        }
        #progress {
            flex: 1;
            margin: 0 12px;
            accent-color: #00ffcc;
            height: 4px;
        }
        button, input[type=range] {
            margin-right: 0;
        }
        button {
            background: linear-gradient(90deg, #00ffcc 0%, #0077ff 100%);
            color: #181818;
            border: none;
            border-radius: 7px;
            padding: 7px 22px;
            font-size: 16px;
            font-family: inherit;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 2px 8px #00ffcc33;
            transition: background 0.2s, color 0.2s, transform 0.1s;
            outline: none;
        }
        button:active {
            transform: scale(0.97);
        }
        button:hover, #send-btn:hover {
            background: linear-gradient(90deg, #0077ff 0%, #00ffcc 100%);
            color: #fff;
        }
        #volume {
            width: 90px;
            accent-color: #00ffcc;
        }
        #current-time, #duration {
            font-family: 'Roboto Mono', monospace;
            font-size: 15px;
            color: #00ffcc;
        }
        #stream-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 18px;
            width: 700px;
            gap: 10px;
        }
        #protocol-select {
            background: #101c1c;
            border: 1.5px solid #0077ff;
            border-radius: 6px;
            color: #00ffcc;
            padding: 7px 12px;
            font-size: 16px;
            font-family: inherit;
            margin-right: 8px;
            outline: none;
            transition: border 0.2s;
        }
        #protocol-select:focus {
            border: 1.5px solid #00ffcc;
        }
        #flv-url {
            width: 320px;
            background: #101c1c;
            border: 1.5px solid #00ffcc;
            border-radius: 6px;
            color: #00ffcc;
            padding: 7px 12px;
            font-size: 16px;
            font-family: inherit;
            margin-right: 8px;
            outline: none;
            transition: border 0.2s;
        }
        #flv-url:focus {
            border: 1.5px solid #0077ff;
        }
        label {
            color: #00ffcc;
            font-weight: bold;
            margin-right: 6px;
            font-size: 15px;
        }
        #load {
            padding: 7px 22px;
            border-radius: 7px;
            font-size: 16px;
        }
        #webrtc-tip {
            margin-top: 10px;
            color: #00ffcc;
            display: none;
            font-size: 14px;
            width: 700px;
        }
        #whip-player-bar {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-top: 12px;
            width: 700px;
            gap: 10px;
        }
        #whip-url {
            width: 320px;
            background: #101c1c;
            border: 1.5px solid #0077ff;
            border-radius: 6px;
            color: #00ffcc;
            padding: 7px 12px;
            font-size: 16px;
            font-family: inherit;
            margin-right: 8px;
            outline: none;
            transition: border 0.2s;
        }
        #whip-url:focus {
            border: 1.5px solid #00ffcc;
        }
        #whip-load {
            padding: 7px 22px;
            border-radius: 7px;
            font-size: 16px;
        }
        #whip-tip {
            margin-top: 8px;
            color: #00ffcc;
            display: none;
            font-size: 14px;
            width: 700px;
        }
        /* 聊天窗口 */
        #chat-container {
            width: 350px;
            background: rgba(24, 32, 40, 0.98);
            border-radius: 20px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 2.5px solid #0077ff;
            padding: 22px 18px 14px 18px;
            display: flex;
            flex-direction: column;
            height: 555px;
            position: relative;
            overflow: hidden;
        }
        #chat-container:before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 20px;
            border: 2.5px dashed #0077ff44;
            pointer-events: none;
        }
        #chat-title {
            font-size: 20px;
            color: #00ffcc;
            font-weight: bold;
            margin-bottom: 12px;
            letter-spacing: 1px;
            text-shadow: 0 2px 8px #00ffcc33;
            text-align: center;
        }
        #chat-messages {
            flex: 1;
            background: #101c1c;
            border-radius: 10px;
            border: 1.5px solid #00ffcc55;
            padding: 12px;
            margin-bottom: 12px;
            overflow-y: auto;
            font-size: 15px;
            font-family: 'Roboto Mono', monospace;
            color: #e0e0e0;
            box-shadow: 0 2px 8px #00ffcc22;
        }
        .chat-message {
            margin-bottom: 8px;
            word-break: break-all;
        }
        .chat-message .user {
            color: #00ffcc;
            font-weight: bold;
            margin-right: 4px;
        }
        .chat-message .time {
            color: #0077ff;
            font-size: 12px;
            margin-left: 6px;
        }
        #chat-input-area {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        #chat-input {
            flex: 1;
            background: #101c1c;
            border: 1.5px solid #0077ff;
            border-radius: 6px;
            color: #00ffcc;
            padding: 7px 12px;
            font-size: 16px;
            font-family: inherit;
            margin-right: 0;
            outline: none;
            transition: border 0.2s;
        }
        #chat-input:focus {
            border: 1.5px solid #00ffcc;
        }
        #send-btn {
            background: linear-gradient(90deg, #0077ff 0%, #00ffcc 100%);
            color: #fff;
            border: none;
            border-radius: 7px;
            padding: 7px 20px;
            font-size: 16px;
            font-family: inherit;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 2px 8px #0077ff33;
            transition: background 0.2s, color 0.2s, transform 0.1s;
            outline: none;
        }
        #send-btn:active {
            transform: scale(0.97);
        }
        /* PCB元素装饰 */
        .pcb-dot {
            position: absolute;
            width: 12px; height: 12px;
            background: #00ffcc;
            border-radius: 50%;
            box-shadow: 0 0 14px #00ffcc99;
            z-index: 3;
        }
        /* 嵌入式芯片装饰 */
        .chip {
            position: absolute;
            width: 44px; height: 44px;
            background: #222;
            border: 2.5px solid #00ffcc;
            border-radius: 10px;
            box-shadow: 0 0 18px #00ffcc55;
            z-index: 4;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #00ffcc;
            font-family: 'Roboto Mono', monospace;
        }
        @media (max-width: 1200px) {
            #main-content {
                flex-direction: column;
                align-items: center;
                gap: 0;
            }
            #player-container, #chat-container {
                margin-right: 0;
                margin-bottom: 32px;
            }
            #player-container, #chat-container {
                width: 98vw;
                min-width: 0;
                max-width: 100vw;
                padding: 10px;
            }
            #video, #video-controls, #stream-bar, #webrtc-tip, #whip-player-bar, #whip-tip {
                width: 96vw !important;
                min-width: 0;
                max-width: 100vw;
            }
        }
        @media (max-width: 900px) {
            #player-container, #chat-container {
                width: 98vw;
                min-width: 0;
                max-width: 100vw;
                padding: 10px;
            }
            #video, #video-controls, #stream-bar, #webrtc-tip, #whip-player-bar, #whip-tip {
                width: 96vw !important;
                min-width: 0;
                max-width: 100vw;
            }
            #video {
                height: 54vw;
                min-height: 180px;
            }
        }