/* =========================================
   QR Code Generator - Glassmorphism Styles
========================================= */

.page-wrapper { width: 90%; margin: 0 auto; display: grid; grid-template-columns: 1fr 6fr 1fr; gap: 2rem; padding: 100px 0 4rem 0; flex: 1; }
.ad-space-left, .ad-space-right { width: 100%; min-height: 600px; background: rgba(255, 255, 255, 0.4); border: 1px dashed var(--glass-border, rgba(255, 255, 255, 0.7)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #475569); font-size: 0.8rem; }
.main-content { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 2rem; }
.glass-panel { background: var(--glass-bg, rgba(255, 255, 255, 0.55)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.7)); border-radius: 12px; padding: 2rem; box-shadow: var(--glass-shadow, 0 8px 32px 0 rgba(0, 85, 255, 0.15)); }
.glass-card { background: rgba(255, 255, 255, 0.8); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.7)); border-radius: 8px; padding: 1.5rem; transition: transform 0.2s, box-shadow 0.2s; }

.background-shapes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.6; }
.shape-1 { width: 400px; height: 400px; background: #00a2ff; top: -100px; left: -100px; }
.shape-2 { width: 500px; height: 500px; background: #0033cc; bottom: -150px; right: -100px; }
.shape-3 { width: 300px; height: 300px; background: #7dd3fc; top: 40%; left: 30%; }

h1 { margin-bottom: 1.5rem; color: var(--text-dark, #1e293b); font-size: 1.8rem; }
h2 { font-size: 1.4rem; color: var(--text-dark, #1e293b); margin-bottom: 1.5rem; border-bottom: 2px solid var(--glass-border); padding-bottom: 0.5rem; }

/* Generator Layout */
.generator-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; }

/* Input Group Styles */
.input-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.input-group.full-width { width: 100%; }
.input-group label { font-weight: 600; font-size: 0.9rem; color: var(--text-dark, #1e293b); }
.input-group textarea { width: 100%; height: 120px; padding: 1rem; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-dark); font-family: inherit; font-size: 1rem; outline: none; resize: vertical; transition: border-color 0.2s; }
.input-group textarea:focus { border-color: var(--accent); }
.input-group select { padding: 0.75rem; border: 1px solid var(--glass-border); border-radius: 8px; background: rgba(255, 255, 255, 0.8); color: var(--text-dark); font-family: inherit; font-size: 1rem; outline: none; height: 45px; transition: border-color 0.2s; }
.input-group select:focus { border-color: var(--accent); }

/* Settings Grid */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }

/* Color Picker */
.color-picker-wrapper { display: flex; align-items: center; gap: 1rem; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--glass-border); padding: 0.5rem; border-radius: 8px; height: 45px; }
.color-picker-wrapper input[type="color"] { -webkit-appearance: none; border: none; width: 30px; height: 30px; border-radius: 4px; cursor: pointer; padding: 0; background: none; }
.color-picker-wrapper input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-wrapper input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0,0,0,0.2); border-radius: 4px; }
.color-picker-wrapper span { font-family: monospace; font-size: 0.95rem; font-weight: 600; color: var(--text-dark); text-transform: uppercase; }

/* Buttons */
.generate-btn { background: var(--accent, #0055ff); color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 1.1rem; cursor: pointer; height: 50px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s, transform 0.1s; }
.generate-btn:hover { background: var(--accent-hover, #0033cc); }
.generate-btn:active { transform: scale(0.98); }

/* Preview Section */
.preview-section { display: flex; align-items: flex-start; justify-content: center; }
.preview-card { background: rgba(255, 255, 255, 0.9); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: 100%; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.qr-output { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; background: #ffffff; border-radius: 8px; overflow: hidden; }
.qr-output img, .qr-output canvas { max-width: 100%; max-height: 100%; object-fit: contain; }
.download-btn { background: #10b981; }
.download-btn:hover { background: #059669; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.info-block h4 { font-size: 1.15rem; color: var(--accent, #0055ff); border-bottom: 2px solid var(--glass-border, rgba(255, 255, 255, 0.7)); padding-bottom: 0.5rem; margin-bottom: 1rem; }
.info-block p { color: var(--text-muted, #475569); font-size: 0.95rem; line-height: 1.6; }

@media (max-width: 1024px) { .page-wrapper { width: 95%; grid-template-columns: 1fr; } .ad-space-left, .ad-space-right { display: none; } }
@media (max-width: 768px) { .generator-layout { grid-template-columns: 1fr; } .settings-grid { grid-template-columns: 1fr; } }