.lab-page {
            --primary-color: #007aff;
            --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            --card-bg: rgba(255, 255, 255, 0.72);
            --text-color: #1d1d1f;
            --border-color: rgba(255, 255, 255, 0.4);
            --shadow: 0 10px 40px rgba(31, 38, 135, 0.1);
            --switch-bg: #e9e9ea;
        }

        [data-theme="dark"] .lab-page {
            --primary-color: #0a84ff;
            --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
            --card-bg: rgba(28, 28, 30, 0.75);
            --text-color: #f5f5f7;
            --border-color: rgba(255, 255, 255, 0.1);
            --shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
            --switch-bg: #39393d;
        }

        * { box-sizing: border-box; transition: background 0.3s, color 0.3s; }

        .lab-page {
            scrollbar-gutter: stable;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--bg-gradient); background-attachment: fixed;
            color: var(--text-color); margin: 0; padding: 80px 20px 20px 20px;
            min-height: 100vh; display: flex; justify-content: center;
        
            padding-top: 80px;
        }

        .container { width: 100%; max-width: 900px; z-index: 1; }

        /* iOS Switch */
        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
        input:checked +
        input:checked +

        /* Card Style */
        .card {
            background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border-color); border-radius: 20px;
            padding: 24px; box-shadow: var(--shadow); margin-bottom: 24px;
        }

        .section-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }

        .upload-area { border: 2px dashed var(--primary-color); border-radius: 16px; padding: 40px; text-align: center; cursor: pointer; }
        
        .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 15px; }
        .control-group { display: flex; flex-direction: column; gap: 6px; }
        label { font-size: 12px; opacity: 0.6; font-weight: 600; text-transform: uppercase; }
        
        select, input[type="range"] { accent-color: var(--primary-color); }
        select { background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); padding: 8px; border-radius: 10px; font-size: 13px; }

        textarea {
            width: 100%; height: 100px; background: rgba(0,0,0,0.05); border: 1px solid var(--border-color);
            border-radius: 12px; color: var(--text-color); padding: 12px; font-family: 'SF Mono', monospace; font-size: 11px; resize: none;
        }

        button { background: var(--primary-color); color: white; border: none; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; }
        button.secondary { background: rgba(142, 142, 147, 0.2); color: var(--text-color); }

        .preview-container { background: #000; border-radius: 12px; padding: 15px; margin-bottom: 15px; display: flex; justify-content: center; overflow: hidden; }
        canvas { max-width: 100%; height: auto; image-rendering: pixelated; }

        #ascii-preview { background: #000; color: #fff; padding: 15px; border-radius: 12px; overflow-x: auto; white-space: pre; font-family: 'Courier New', monospace; line-height: 1; font-size: 8px; text-align: center; }
        .hidden { display: none; }
        .blob { position: fixed; width: 400px; height: 400px; background: var(--primary-color); filter: blur(100px); border-radius: 50%; z-index: -1; opacity: 0.1; }