.dbqmdcg-root {
    max-width: 820px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    padding: 16px;

    .dbqmdcg-header {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .dbqmdcg-input-row {
        display: block;
        margin-bottom: 10px;
    }

    .dbqmdcg-label {
        display: block;
        font-size: 12px;
        opacity: 0.85;
        margin-bottom: 6px;
    }

    .dbqmdcg-input {
        width: 100%;
        border: 1px solid rgba(0, 0, 0, 0.18);
        border-radius: 10px;
        padding: 12px 12px;
        font-size: 14px;
        outline: none;

        &:focus {
            border-color: rgba(64, 106, 255, 0.55);
            box-shadow: 0 0 0 3px rgba(64, 106, 255, 0.18);
        }
    }

    .dbqmdcg-hint {
        margin-top: 8px;
        font-size: 12px;
        opacity: 0.75;
    }

    .dbqmdcg-status {
        margin-top: 10px;
        min-height: 18px;
        font-size: 12px;

        &.dbqmdcg-status-error {
            color: #b00020;
        }

        &.dbqmdcg-status-success {
            color: #156c2f;
        }
    }

    .dbqmdcg-output {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .dbqmdcg-section {
        margin-bottom: 16px;
    }

    .dbqmdcg-section-title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .dbqmdcg-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;

        @media (max-width: 820px) {
            grid-template-columns: 1fr;
        }
    }

    .dbqmdcg-tile {
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.10);
        overflow: hidden;
        cursor: pointer;
        user-select: none;
        transition: transform 120ms ease, box-shadow 120ms ease;

        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10);
        }
    }

    .dbqmdcg-tile-preview {
        height: 86px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }

    .dbqmdcg-tile-hex {
        font-family: Consolas, "Courier New", monospace;
        font-weight: 700;
        font-size: 14px;
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        background: rgba(255, 255, 255, 0.65);
        color: rgba(0, 0, 0, 0.90);
    }

    .dbqmdcg-tile-meta {
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding: 10px 12px 12px 12px;
    }

    .dbqmdcg-tile-title {
        font-size: 12px;
        font-weight: 700;
    }

    .dbqmdcg-footer-hint {
        margin-top: 6px;
        font-size: 12px;
        opacity: 0.75;
    }
}