*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#18202a;font:15px Arial,sans-serif}.layout{display:flex;min-height:100vh}aside{width:230px;background:#111827;color:#fff;padding:24px 16px}aside h2{margin:0 0 25px;font-size:20px}aside a{display:block;color:#cbd5e1;text-decoration:none;padding:11px 12px;border-radius:8px;margin:4px 0}aside a:hover,aside a.active{background:#263244;color:#fff}main{flex:1;padding:32px;max-width:1200px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}h1{margin:0 0 22px}h2{margin-top:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.card,.panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.04)}.card span{display:block;color:#64748b}.card b{display:block;font-size:30px;margin-top:8px}.actions{display:flex;gap:10px}.btn{display:inline-block;border:0;border-radius:8px;background:#2563eb;color:#fff;text-decoration:none;padding:11px 16px;cursor:pointer}.btn.secondary{background:#475569}.btn.danger{background:#dc2626}.btn.danger:hover{background:#b91c1c}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #e5e7eb;vertical-align:top}label{display:block;font-weight:600;margin:0 0 16px}input,select,textarea{display:block;width:100%;margin-top:7px;padding:11px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font:inherit}textarea{font-family:Consolas,monospace}.alert,.success{padding:12px;border-radius:8px;margin-bottom:16px}.alert{background:#fee2e2;color:#991b1b}.success{background:#dcfce7;color:#166534}.muted{color:#64748b}small{font-weight:normal;color:#64748b}@media(max-width:800px){aside{width:180px}.cards{grid-template-columns:1fr}main{padding:20px}}.editor-wrap{border:1px solid #cbd5e1;border-radius:10px;overflow:hidden;background:#fff;margin:7px 0 16px}.editor-toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:9px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.editor-toolbar button,.editor-toolbar select,.toolbar-file{display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;padding:7px 10px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#1e293b;font:inherit;cursor:pointer;text-decoration:none}.editor-toolbar button:hover,.editor-toolbar select:hover,.toolbar-file:hover{background:#eef2ff;border-color:#93c5fd}.editor-toolbar select{min-width:105px}.toolbar-file input{display:none}.toolbar-sep{width:1px;height:26px;background:#cbd5e1;margin:0 2px}.visual-editor,.source-editor{min-height:420px;padding:18px;outline:none;line-height:1.55;background:#fff}.visual-editor:focus,.source-editor:focus{box-shadow:inset 0 0 0 2px #bfdbfe}.visual-editor img{max-width:100%;height:auto}.source-editor{width:100%;border:0;border-radius:0;resize:vertical;font-family:Consolas,Monaco,monospace;font-size:13px;white-space:pre-wrap}.html-preview{display:none;min-height:220px;padding:20px;border-top:1px solid #e2e8f0;background:#fff}.html-preview.visible{display:block}.editor-status{padding:8px 12px;background:#f8fafc;border-top:1px solid #e2e8f0;color:#64748b;font-size:13px}@media(max-width:700px){.editor-toolbar{gap:4px}.editor-toolbar button,.editor-toolbar select,.toolbar-file{padding:6px 8px}.visual-editor,.source-editor{min-height:360px}}
.check{display:flex;gap:8px;align-items:center;font-weight:normal}.check input{width:auto;margin:0}code,pre{font-family:Consolas,monospace}pre{background:#0f172a;color:#e2e8f0;padding:14px;border-radius:8px;overflow:auto}
.dropzone{border:2px dashed #94a3b8;border-radius:10px;padding:24px;text-align:center;margin:14px 0;cursor:pointer;background:#f8fafc}.dropzone.drag{border-color:#2563eb;background:#eff6ff}.check{display:inline-flex;align-items:center;gap:8px;margin:12px 0}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* =========================================================
   EDITOR HTML / PREVIEW
   ========================================================= */

.editor-wrap {
    margin-top: 12px;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #dbe2ea;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.editor-toolbar button,
.editor-toolbar select {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 13px;
}

.editor-toolbar button:hover,
.editor-toolbar select:hover {
    background: #f1f5f9;
}

.editor-toolbar button:active {
    transform: translateY(1px);
}

.toolbar-sep {
    width: 1px;
    height: 25px;
    background: #cbd5e1;
    margin: 0 3px;
}

.toolbar-file {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 13px;
}

.toolbar-file:hover {
    background: #f1f5f9;
}

.visual-editor,
.source-editor {
    min-height: 420px;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dbe2ea;
    padding: 24px;
}

.visual-editor {
    outline: none;
    overflow: auto;
    line-height: 1.6;
}

.visual-editor:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
}

.visual-editor.dragging {
    border-color: #2563eb;
    background: #eff6ff;
}

.source-editor {
    display: none;
    resize: vertical;
    min-height: 420px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #0f172a;
}

.html-preview {
    display: block;
    margin-top: 20px;
    padding: 20px;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    min-height: 200px;
}

.email-preview-frame {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(15, 23, 42, .08);
}

.email-preview-header {
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 12px;
}

.email-preview-body {
    background: #ffffff;
    padding: 20px;
    overflow-wrap: break-word;
}

.email-preview-body img {
    max-width: 100%;
    height: auto;
}

.email-preview-body table {
    max-width: 100%;
}

.email-preview-body a {
    word-break: break-word;
}

.editor-status {
    padding: 9px 12px;
    color: #64748b;
    font-size: 12px;
}

@media (max-width: 900px) {

    .editor-toolbar {
        gap: 5px;
    }

    .visual-editor,
    .source-editor {
        min-height: 350px;
        padding: 15px;
    }

    .html-preview {
        padding: 10px;
    }

    .email-preview-body {
        padding: 10px;
    }
}