.pattern-canvas { width: 100%; height: auto; background-color: #1e1e2f; border-radius: 12px; border: 1px solid #dee2e6; margin-top: 1rem; display: block; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .canvas-container { text-align: center; margin: 1rem 0; position: relative; }
        .calibration-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 10px; justify-content: center; }
        .btn-cal { border-radius: 40px; padding: 8px 20px; font-weight: 500; transition: 0.2s; }
        .btn-cal.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
        .guidance-card { background-color: #f8fafc; border-left: 5px solid #2c7da0; padding: 1.2rem; border-radius: 8px; margin: 1.2rem 0; }
        .step-box { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1rem; transition: 0.2s; margin-bottom: 1rem; }
        .step-box h5 { color: #1e466e; font-weight: 600; }
        .legend { display: flex; justify-content: center; gap: 2rem; margin-top: 10px; font-size: 0.85rem; }
        .legend-color { width: 18px; height: 18px; display: inline-block; border-radius: 4px; margin-right: 6px; vertical-align: middle; }
        .ref-badge { font-size: 0.75rem; background: #e9ecef; padding: 2px 8px; border-radius: 20px; }
        .color-badge { display: inline-block; width: 24px; height: 24px; border-radius: 50%; margin-right: 8px; vertical-align: middle; border: 1px solid #ccc; }
        .fullscreen-exit-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 9999;
            background: rgba(0,0,0,0.7);
            color: white;
            border: none;
            border-radius: 40px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            backdrop-filter: blur(8px);
            font-weight: 500;
            transition: 0.2s;
            display: none;
            box-shadow: 0 2px 12px rgba(0,0,0,0.3);
        }
        .fullscreen-exit-btn:hover { background: rgba(0,0,0,0.9); transform: scale(1.02); }
        .fullscreen-btn {
            background: rgba(0,0,0,0.6);
            border: none;
            color: white;
            border-radius: 40px;
            padding: 6px 14px;
            margin-left: 12px;
            font-size: 14px;
            transition: 0.2s;
        }
        .fullscreen-btn:hover { background: var(--primary-color); color: white; }
        canvas:-webkit-full-screen { width: 100%; height: 100%; object-fit: contain; background: black; }
        canvas:fullscreen { width: 100%; height: 100%; object-fit: contain; background: black; }