.qr-tool-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.qr-card {
    background-color: var(--icatdev-color-bg);
    border: 1px solid var(--icatdev-color-border);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qr-card h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--icatdev-color-text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--icatdev-color-border);
}

.qr-input-group { display: flex; flex-direction: column; gap: 8px; }
.qr-input-group label { font-size: 0.85rem; opacity: 0.8; }

input[type="text"], input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--icatdev-color-border);
    border-radius: 6px;
    background-color: #0f0f0f;
    color: var(--icatdev-color-text);
    font-family: var(--icatdev-font-family);
}

.qr-btn {
    background: var(--icatdev-color-text);
    color: var(--icatdev-color-bg);
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.2s ease;
}
.qr-btn:hover { opacity: 0.85; }
.qr-btn.btn-green { background: #2f855a; color: #fff; }
.qr-btn.btn-green:hover { background: #276749; }

.qr-result { padding: 12px; background: var(--icatdev-color-surface); border-left: 3px solid var(--icatdev-color-text); border-radius: 4px; word-break: break-all; font-size: 0.9rem; }
.qr-result.error { border-left-color: #e53e3e; color: #fed7d7; }

#svg-container { margin-top: 10px; padding: 15px; background-color: white; border-radius: 8px; text-align: center; }
#svg-container svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }

@media (max-width: 768px) { .qr-tool-grid { grid-template-columns: 1fr; } }