.hac-editor-container { 
        display: flex;
        flex-direction: column;
        gap: 25px; 
        margin: 20px auto; 
        max-width: 540px; 
        font-family: Arial, sans-serif;
    }
    .hac-control-section, .hac-canvas-section { 
        background: #ffffff; 
        border: 1px solid #e2e8f0; 
        padding: 20px; 
        border-radius: 8px; 
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .hac-section-title { 
        font-size: 14px !important; 
        font-weight: bold !important; 
        margin-top: 0 !important; 
        margin-bottom: 15px !important; 
        display: flex; 
        align-items: center; 
        gap: 10px;
        color: #1e293b;
        letter-spacing: 0.5px;
    }
    .hac-badge { 
        background: #a38a70; 
        color: #fff; 
        border-radius: 50%; 
        width: 24px; 
        height: 24px; 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        font-size: 12px; 
    }
    .hac-template-selector { 
        display: flex; 
        gap: 10px; 
        flex-wrap: wrap;
    }
    .template-btn { 
        flex: 1;
        min-width: 120px;
        padding: 12px 10px; 
        background: #fff; 
        border: 1px solid #cbd5e1; 
        border-radius: 6px; 
        text-align: center; 
        cursor: pointer; 
        font-weight: bold; 
        font-size: 11px;
        color: #475569;
        transition: all 0.2s ease;
    }
    .template-btn.active { 
        border-color: #a38a70; 
        background: #fdfaf7; 
        color: #a38a70; 
    }
    .hac-action-btn { 
        background: #a38a70; 
        color: #fff; 
        border: none; 
        padding: 10px 15px; 
        border-radius: 6px; 
        cursor: pointer; 
        font-weight: bold;
        font-size: 11px;
    }
    .hac-danger-btn { 
        background: #fee2e2; 
        color: #dc2626; 
        border: 1px solid #fca5a5; 
        padding: 10px 15px; 
        border-radius: 6px; 
        cursor: pointer;
        font-weight: bold;
        font-size: 11px;
    }
    .hac-danger-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .canvas-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .canvas-tag {
        font-size: 12px;
        font-weight: bold;
        color: #64748b;
        margin-bottom: 10px;
        align-self: flex-start;
    }
    .canvas-box-wrap { 
        width: 500px !important;
        height: 500px !important;
        border: 1px solid #cbd5e1; 
        border-radius: 8px; 
        overflow: hidden; 
        background: #ffffff;
    }
    .canvas-box-wrap canvas, .canvas-container {
        width: 500px !important;
        height: 500px !important;
    }
    .form-row { 
        display: flex; 
        flex-direction: column; 
        gap: 6px; 
        margin-bottom: 15px; 
    }
    .form-label {
        font-size: 11px;
        font-weight: bold;
        color: #475569;
    }
    .form-input, .form-textarea { 
        padding: 10px; 
        border: 1px solid #cbd5e1; 
        border-radius: 6px; 
        width: 100%; 
        box-sizing: border-box; 
    }
    .form-textarea {
        height: 80px;
        resize: vertical;
    }
    .hac-submit-btn { 
        background: #a38a70; 
        color: #fff; 
        font-weight: bold; 
        border: none; 
        padding: 14px; 
        border-radius: 6px; 
        cursor: pointer; 
        width: 100%; 
        font-size: 13px;
        letter-spacing: 0.5px;
    }
    .hac-panel-box { 
        background: #f8fafc; 
        border: 1px solid #e2e8f0; 
        padding: 15px; 
        border-radius: 6px;
    }
    .hac-input-label { 
        font-size: 11px; 
        font-weight: bold; 
        display: block; 
        margin-bottom: 6px; 
        color: #64748b;
    }