/* SVG overlay berada di belakang angka sel */
        #drawing-table { position: relative; }
        #ai-svg-canvas {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            z-index: 5;
            overflow: visible;
        }

        /* ── Panel Styling ── */
        .wla-ai-panel {
            background: #ffffff;
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            margin: 10px auto;
            max-width: 100%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            font-family: 'Inter', system-ui, sans-serif;
            
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
        }

        /* 3. Actions Grid */
        .wla-ai-actions-grid { display: flex; flex: 0 0 auto; gap: 4px; flex-wrap: wrap; justify-content: center; }
        .wla-ai-btn-action {
            display: flex; flex-direction: row; align-items: center; justify-content: center;
            font-weight: 800; padding: 6px 8px; border-radius: 6px; cursor: pointer;
            font-size: 10px; border: 1px solid; transition: all 0.2s; text-align: center; gap: 4px; white-space: nowrap;
        }
        .wla-ai-btn-action i { font-size: 12px; font-style: normal; }

        /* 4. Search Buttons Grid */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;800;900&display=swap');

        .wla-ai-search-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-bottom: 6px; }
        .wla-ai-btn-search {
            display: flex; align-items: center; justify-content: center;
            font-weight: 900; padding: 7px 10px; border-radius: 8px; cursor: pointer;
            font-size: 11px; border: 1px solid transparent; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            white-space: nowrap; position: relative; overflow: hidden; letter-spacing: 0.5px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.3);
        }
        .wla-ai-btn-search::after {
            content: ''; position: absolute; top: -50%; left: -60%;
            width: 50%; height: 200%; background: rgba(255,255,255,0.15);
            transform: skewX(-20deg); transition: left 0.4s ease;
        }
        .wla-ai-btn-search:hover::after { left: 130%; }
        .wla-ai-btn-search:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
        .wla-ai-btn-search:active { transform: translateY(0) scale(0.97); }

        /* Tombol 3D — Premium Standout */
        .wla-ai-btn-search[data-tipe="3d"] {
            background: linear-gradient(135deg, #f953c6 0%, #b91d73 50%, #6f0043 100%) !important;
            color: #fff !important; border-color: #b91d73 !important;
            box-shadow: 0 4px 15px rgba(185,29,115,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
            font-size: 12px;
        }
        .wla-ai-btn-search[data-tipe="3d"]:hover {
            box-shadow: 0 6px 24px rgba(249,83,198,0.6), 0 0 0 2px rgba(249,83,198,0.3);
        }

        /* Tombol 4D */
        .wla-ai-btn-search[data-tipe="4d"] {
            background: linear-gradient(135deg, #fc5c7d 0%, #6a3093 100%) !important;
            color: #fff !important; border-color: #6a3093 !important;
            box-shadow: 0 4px 15px rgba(106,48,147,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
        }
        .wla-ai-btn-search[data-tipe="4d"]:hover {
            box-shadow: 0 6px 24px rgba(252,92,125,0.5), 0 0 0 2px rgba(252,92,125,0.3);
        }

        /* Tombol 2D */
        .wla-ai-btn-search[data-tipe="2d"] {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
            color: #fff !important; border-color: #11998e !important;
            box-shadow: 0 4px 15px rgba(17,153,142,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
        }
        .wla-ai-btn-search[data-tipe="2d"]:hover {
            box-shadow: 0 6px 24px rgba(56,239,125,0.45), 0 0 0 2px rgba(56,239,125,0.3);
        }

        /* Tombol AI2D */
        .wla-ai-btn-search[data-tipe="ai2d"] {
            background: linear-gradient(135deg, #1a73e8 0%, #4285f4 50%, #34a8fc 100%) !important;
            color: #fff !important; border-color: #1a73e8 !important;
            box-shadow: 0 4px 15px rgba(26,115,232,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
        }
        .wla-ai-btn-search[data-tipe="ai2d"]:hover {
            box-shadow: 0 6px 24px rgba(52,168,252,0.5), 0 0 0 2px rgba(52,168,252,0.3);
        }

        /* 📱 RESPONSIVE MOBILE */
        @media (max-width: 850px) {
            .wla-ai-panel { padding: 6px; gap: 4px; }
            .wla-ai-btn-action { padding: 4px 6px; font-size: 9px; }
            .wla-ai-btn-action i { font-size: 11px; }
            .wla-ai-btn-search { font-size: 10px; padding: 6px 8px; }
        }