/* === Custom Scroll Container === */
    .bm-scroll-wrap { width: 100%; max-width: 100%; overflow-x: hidden; background: var(--app-bg); border-radius: 0 0 8px 8px; border: 1px solid var(--border-color); border-top: none; box-shadow: 0 4px 6px rgba(0,0,0,0.5); }

    /* === Action Bar === */
    .bm-action-bar { padding: 6px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; background: var(--card-bg); border: 1px solid var(--border-color); border-bottom: none; border-radius: 8px 8px 0 0; }
    .bm-action-bar::-webkit-scrollbar { display: none; }
    .bm-btn { border: none; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 6px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.5); transition: 0.2s; }
    .bm-btn:active { transform: scale(0.95); }
    .btn-clear { background: #334155; color: #f8fafc; border: 1px solid #475569; }
    .btn-red { background: linear-gradient(135deg, #dc2626, #991b1b); color: #fff; border: 1px solid #7f1d1d; }
    .btn-blue { background: linear-gradient(135deg, #2563eb, #1e3a8a); color: #fff; border: 1px solid #1e3a8a; }
    .btn-green { background: linear-gradient(135deg, #16a34a, #14532d); color: #fff; border: 1px solid #14532d; }
    .btn-brown { background: linear-gradient(135deg, #a16207, #713f12); color: #fff; border: 1px solid #451a03; }
    .btn-black { background: linear-gradient(135deg, #334155, var(--app-bg)); color: #fff; border: 1px solid #000; }

    /* === Table Core === */
    .bm-table { border-collapse: collapse; min-width: 400px; width: 100%; text-align: center; font-family: 'Inter', sans-serif; table-layout: fixed; margin: 0; }
    .bm-table th { background: var(--header-bg, var(--card-bg)); color: var(--header-text, var(--text-primary)); text-shadow: 0 1px 2px rgba(0,0,0,0.3); border: 1px solid var(--border-color); padding: 10px 4px; font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; border-top: none; }
    .bm-table td { border: 1px solid var(--border-color); padding: 8px 4px; font-size: 0.75rem; font-weight: 700; }
    .bm-table tr:nth-child(even) td { background: rgba(128, 128, 128, 0.05); }
    .bm-table tr:hover td { background: rgba(128, 128, 128, 0.1); }

    /* Data Elements */
    .reside { color: var(--text-primary); text-shadow: 0 1px 3px rgba(0,0,0,0.2); letter-spacing: 1px; }
    
    .ballhk {
        background: radial-gradient(circle at 10px 10px, #b91c1c, #7f1d1d);
        color: #FFF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 1rem;
        font-family: 'Inter', sans-serif;
        font-weight: 800;
        cursor: pointer;
        border: 2px solid #450a0a;
        margin: 2px;
        box-shadow: inset -2px -2px 4px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
        transition: 0.2s;
        text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    }
    .ballhk:active { transform: scale(0.9); }
    .ballhk.selected {
        border-color: #f1c40f;
        box-shadow: 0 0 10px rgba(241, 196, 15, 0.8), inset -2px -2px 4px rgba(0,0,0,0.5);
    }

    /* Selection Colors (Semantic Classes overrides) */
    .ballhk.paint-red { background: radial-gradient(circle at 10px 10px, #ef4444, #991b1b) !important; border-color: #7f1d1d !important; }
    .ballhk.paint-blue { background: radial-gradient(circle at 10px 10px, #3b82f6, #1e3a8a) !important; border-color: #1e3a8a !important; }
    .ballhk.paint-green { background: radial-gradient(circle at 10px 10px, #22c55e, #14532d) !important; border-color: #14532d !important; }
    .ballhk.paint-brown { background: radial-gradient(circle at 10px 10px, #eab308, #713f12) !important; border-color: #451a03 !important; }
    .ballhk.paint-black { background: radial-gradient(circle at 10px 10px, #64748b, var(--app-bg)) !important; border-color: #000 !important; }
    
    /* === Pencarian Color Target Bar === */
    .cari-input { width: 34px; height: 34px; background: var(--app-bg); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 6px; text-align: center; font-weight: 800; margin: 2px; font-size: 14px; outline: none; transition: 0.2s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
    .cari-input:focus { border-color: var(--accent-color); box-shadow: var(--accent-glow); }
    .input-red { color: #dc2626; border-color: #fca5a5; }
    .input-blue { color: #2563eb; border-color: #93c5fd; }
    .input-green { color: #16a34a; border-color: #86efac; }
    .input-brown { color: #a16207; border-color: #fde047; }
    .input-black { color: var(--app-bg); border-color: #94a3b8; }

    .noselect {
        -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    }