* { box-sizing: border-box; }
html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; background-color: #f1f5f9; color: #1e293b; height: 100vh; width: 100vw; overflow: hidden; }

.app-container { display: flex; flex-direction: row; height: 100vh; width: 100vw; overflow: hidden; }

/* LEFT PANEL (FORM) */
.editor-panel { flex: 0 0 680px; width: 680px; min-width: 500px; max-width: 800px; height: 100vh; background-color: #ffffff; padding: 25px 30px; overflow-y: auto; box-shadow: 2px 0 10px rgba(0,0,0,0.05); z-index: 10; border-right: 1px solid #e2e8f0; }
.editor-panel h2 { margin-top: 0; font-size: 20px; color: #0f172a; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0; }

.form-section { margin-bottom: 25px; }
.form-section h3 { font-size: 14px; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #f1f5f9; padding-bottom: 5px; margin-bottom: 15px; }

.subscribers-list { max-height: 200px; overflow-y: auto; background: #f8fafc; border: 1px solid #e2e8f0; padding: 15px; border-radius: 4px; font-size: 14px; }
.subscribers-list label { display: block; margin-bottom: 8px; cursor: pointer; }

label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #334155; margin-top: 15px; }
input[type="text"], input[type="date"], input[type="file"], select, textarea { width: 100%; padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; font-family: inherit; transition: border-color 0.2s; background: white; }
input[type="text"]:focus, input[type="date"]:focus, input[type="file"]:focus, select:focus, textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); }
textarea { resize: vertical; }

.btn-submit { display: block; width: 100%; padding: 12px; background-color: #1e3a8a; color: white; border: none; border-radius: 6px; font-size: 15px; font-weight: bold; cursor: pointer; margin-top: 25px; transition: background-color 0.2s; }
.btn-submit:hover { background-color: #172554; }

/* RIGHT PANEL (PREVIEW) */
.preview-panel { flex: 1 1 0%; min-width: 0; height: 100vh; display: flex; flex-direction: column; background-color: #e2e8f0; overflow: hidden; }
.preview-header { padding: 12px 20px; background-color: #ffffff; border-bottom: 1px solid #cbd5e1; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.preview-header h3 { margin: 0; font-size: 16px; color: #334155; }

.preview-content { flex: 1; padding: 0; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; background-color: #cbd5e1; }
#preview-frame { width: 100%; height: 100%; min-height: 100%; background-color: #ffffff; border: none; display: block; }

@media (max-width: 600px) {
    html, body { overflow: auto; height: auto; }
    .app-container { flex-direction: column; height: auto; overflow: visible; }
    .editor-panel { width: 100%; min-width: 100%; max-width: 100%; flex: none; height: auto; border-right: none; border-bottom: 1px solid #e2e8f0; }
    .preview-panel { width: 100%; height: 800px; flex: none; }
}