/* Base Wrapper */
.mg-wrapper {
    font-family: 'Inter', sans-serif;
    padding: 2rem;
    border-radius: 0.75rem;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
}

.mg-container { margin: 0 auto; }

/* Light Mode Defaults */
.mg-wrapper { background-color: #f1f5f9; color: #0f172a; }
.mg-card { background: #fff; border: 1px solid #cbd5e1; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border-radius: 1rem; padding: 2rem; }
.mg-input { background: #fff; border: 2px solid #e2e8f0; color: #0f172a; border-radius: 0.5rem; width: 100%; padding: 0.75rem 1rem; font-size: 0.875rem; box-sizing: border-box; }
.mg-input:focus { border-color: #f59e0b; outline: none; background: #fffbeb; }
.mg-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; margin-bottom: 0.5rem; color: #334155; }

/* Dark Mode Overrides */
.mg-wrapper.dark { background-color: #02040a !important; color: #e2e8f0; }
.mg-wrapper.dark .mg-card { background: #0f1623; border: 1px solid #1e293b; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5); }
.mg-wrapper.dark .mg-input { background: #020617; border: 1px solid #1e293b; color: #f8fafc; }
.mg-wrapper.dark .mg-input:focus { border-color: #f59e0b; background: #020617; }
.mg-wrapper.dark .mg-label { color: #94a3b8; }

/* Layout Grid */
.mg-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media(min-width: 1024px) {
    .mg-grid { grid-template-columns: 7fr 5fr; }
}

/* Header & Toggle */
.mg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.mg-header h2 { margin: 0; font-size: 1.25rem; opacity: 0.5; font-weight: bold; }
.mg-theme-switch { display: flex; gap: 5px; background: #fff; padding: 4px; border-radius: 99px; border: 1px solid #cbd5e1; }
.mg-wrapper.dark .mg-theme-switch { background: #0f1623; border-color: #334155; }
.mg-theme-switch button { border: none; background: none; padding: 4px 12px; font-size: 10px; font-weight: bold; border-radius: 99px; cursor: pointer; color: #64748b; transition: all 0.2s; }
.mg-theme-switch button.active { background: #1e293b; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.mg-wrapper:not(.dark) .mg-theme-switch button.active { background: #fff; color: #000; border: 1px solid #e2e8f0; }

/* Form Elements */
.mg-form-group { margin-bottom: 1.5rem; }
.mg-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
textarea.mg-input { resize: none; }

/* Preview Card */
.mg-preview-card { padding: 0.5rem; background: #fff; border-radius: 1rem; }
.mg-wrapper.dark .mg-preview-card { background: #0f1623; }
.mg-browser-dots { display: flex; gap: 6px; margin-bottom: 1.5rem; align-items: center; padding: 1rem 1.5rem 0; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }
#mg-trigger-modal { margin-left: auto; background: none; border: none; color: #f59e0b; font-weight: bold; font-size: 10px; text-transform: uppercase; cursor: pointer; }

.mg-preview-meta { font-family: monospace; font-size: 12px; padding: 0 1.5rem; margin-bottom: 1.5rem; }
.mg-meta-row { display: flex; opacity: 0.8; margin-bottom: 0.5rem; }
.mg-meta-row span:first-child { width: 4rem; text-align: right; margin-right: 1rem; opacity: 0.5; }
.mg-meta-row span:last-child { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mg-preview-action { text-align: center; padding: 1rem; border-top: 1px solid #e2e8f0; }
.mg-wrapper.dark .mg-preview-action { border-color: #1e293b; }
#mg-live-btn { color: #f59e0b; text-decoration: none; font-weight: bold; font-size: 1.125rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: transform 0.2s; }
#mg-live-btn:hover { transform: scale(1.05); }

/* Code Output */
.mg-code-card { padding: 1.25rem; margin-top: 1.5rem; }
.mg-code-block { margin-bottom: 1rem; }
.mg-code-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.mg-code-header label { font-size: 10px; font-weight: bold; text-transform: uppercase; }
.mg-code-header button { font-size: 10px; padding: 2px 8px; border-radius: 4px; border: none; background: #e2e8f0; cursor: pointer; font-weight: bold; }
.mg-code-header button:hover { background: #f59e0b; color: white; }
.mg-wrapper.dark .mg-code-header button { background: #1e293b; color: #94a3b8; }
.mg-wrapper.dark .mg-code-header button:hover { background: #f59e0b; color: white; }
.mg-code-input-wrap { background: #f8fafc; border: 1px solid #e2e8f0; padding: 0.5rem; border-radius: 4px; }
.mg-wrapper.dark .mg-code-input-wrap { background: #020617; border-color: #1e293b; }
.mg-code-input-wrap textarea { width: 100%; background: transparent; border: none; font-family: monospace; font-size: 11px; height: 3rem; outline: none; color: #059669; resize: none; }
.mg-wrapper.dark .mg-code-input-wrap textarea { color: #10b981; }
#mg-out-raw { color: #64748b; }

/* QR Section */
.mg-qr-card { padding: 0; overflow: hidden; margin-top: 1.5rem; }
#mg-qr-trigger { width: 100%; padding: 1rem; display: flex; justify-content: space-between; align-items: center; background: none; border: none; color: inherit; font-weight: bold; cursor: pointer; }
.mg-accordion { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.mg-wrapper.dark .mg-accordion { background: #020617; border-color: #1e293b; }
.mg-accordion.open { max-height: 500px; }
.mg-qr-inner { padding: 1.5rem; display: flex; flex-col; align-items: center; justify-content: center; flex-direction: column; }
#mg-qrcode { background: white; padding: 10px; border-radius: 8px; margin-bottom: 1rem; }
.mg-download-btn { background: #0f172a; color: white; border: none; padding: 0.5rem 1rem; border-radius: 99px; font-size: 12px; font-weight: bold; cursor: pointer; }
.mg-wrapper.dark .mg-download-btn { background: #1e293b; }

/* Modal */
#mg-modal-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
#mg-modal-overlay.active { opacity: 1; pointer-events: auto; }
#mg-modal-content { width: 90%; max-width: 600px; background: white; border-radius: 1rem; overflow: hidden; transform: scale(0.95); transition: transform 0.3s; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; max-height: 90vh; }
#mg-modal-overlay.active #mg-modal-content { transform: scale(1); }
.mg-wrapper.dark #mg-modal-content { background: #0f1623; border: 1px solid #1e293b; color: #e2e8f0; }

.mg-modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; background: #f1f5f9; }
.mg-wrapper.dark .mg-modal-header { background: #020617; border-color: #1e293b; }
.mg-modal-header h3 { margin: 0; font-size: 1.125rem; }
#mg-modal-close { background: none; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: inherit; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
#mg-modal-close:hover { background: #ef4444; color: white; }

.mg-modal-field { padding: 0.75rem 1.5rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: baseline; gap: 1rem; }
.mg-wrapper.dark .mg-modal-field { border-color: #1e293b; }
.mg-modal-field span.mg-label { margin: 0; width: 4rem; text-align: right; opacity: 0.6; }
.mg-value { font-family: monospace; font-size: 13px; flex: 1; word-break: break-all; }
.mg-value.bold { font-weight: bold; }
.hidden { display: none !important; }

.mg-modal-body { padding: 1.5rem; flex: 1; overflow-y: auto; background: #f8fafc; white-space: pre-wrap; line-height: 1.6; font-size: 14px; min-height: 150px; }
.mg-wrapper.dark .mg-modal-body { background: rgba(0,0,0,0.2); }

.mg-modal-footer { padding: 1rem; border-top: 1px solid #e2e8f0; background: #f1f5f9; text-align: right; }
.mg-wrapper.dark .mg-modal-footer { background: #020617; border-color: #1e293b; }
#mg-modal-done { background: #f59e0b; color: white; border: none; padding: 0.5rem 1.5rem; border-radius: 99px; font-weight: bold; cursor: pointer; }
#mg-modal-done:hover { background: #d97706; }