body {
    background-color: #36393f;
    color: #dcddde;
    font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.main-container { display: flex; flex-direction: column; width: 90%; height: 90%; }
.editor-container { display: flex; flex: 1; background-color: #2f3136; border-radius: 8px; overflow: hidden; }
.raw-input-panel, .preview-panel { flex: 1; padding: 20px; overflow-y: auto; }
#raw-input {
    width: 100%; height: 100%; background-color: #40444b;
    border: none; border-radius: 3px; color: #dcddde; padding: 15px;
    font-size: 16px; resize: none; box-sizing: border-box;
    font-family: 'Consolas', 'Courier New', monospace; /* Monospace for raw text */
}
#raw-input:focus { outline: none; }
#preview { width: 100%; height: 100%; word-wrap: break-word; font-size: 16px; line-height: 1.5; }

/* --- NEW: Code Block Styles --- */
#preview code {
    background-color: #2b2d31; /* Darker background */
    border-radius: 3px;
    padding: 0.1em 0.3em;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.875em;
}
#preview pre {
    background-color: #2b2d31;
    border: 1px solid #202225;
    border-radius: 5px;
    padding: 10px;
    overflow-x: auto; /* Add horizontal scroll for long lines */
    margin: 4px 0;
}
#preview pre code {
    background-color: transparent; /* Code inside pre shouldn't have its own background */
    padding: 0;
}

#preview a { color: #00a8fc; text-decoration: none; }
#preview a:hover { text-decoration: underline; }
#preview u, #preview s { text-decoration-color: #dcddde; }
#preview .subtext { color: #8e9297; font-size: 0.875em; margin: 0.1em 0 -0.5em 0; line-height: 1.2; }
#preview h1, #preview h2, #preview h3 { margin: 0.5em 0 0em 0; line-height: 1.2; font-weight: 700; }
#preview h1 { font-size: 24px; color: #ffffff; }
#preview h2 { font-size: 20px; color: #ffffff; }
#preview h3 { font-size: 16px; color: #ffffff; }
#preview ul { padding-left: 22px; margin: 4px 0; }
#preview li { margin: 2px 0; }
#preview > ul > li { list-style-type: disc; }
#preview ul ul li { list-style-type: circle; }
#preview blockquote {
    color: #b9bbbe; /* This is the new line for grey text */
    margin: 4px 0;
    padding: 2px 10px 2px 12px;
    background-color: #2f3136;
    border-left: 4px solid #4f545c;
    border-radius: 4px;
}
#preview blockquote h1 {
    color: #b9bbbe;
}
#preview blockquote h2 {
    color: #b9bbbe;
}
#preview blockquote h3 {
    color: #b9bbbe;
}

/* (All previous styles remain the same) */

/* NEW: Style for the mode toggle button panel */
.mode-toggle-panel {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
#toggle-edit-mode-btn {
    background-color: #7289da;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}
#toggle-edit-mode-btn:hover {
    background-color: #677bc4;
}

/* NEW: Visual feedback for when preview is editable */
#preview.editable {
    outline: 2px solid #7289da;
    border-radius: 3px;
}

.control-panel { display: flex; justify-content: center; flex-wrap: wrap; padding: 10px; background-color: #2f3136; margin-top: 10px; border-radius: 8px; }
.control-panel button { background-color: #40444b; border: none; color: #b9bbbe; padding: 8px 12px; margin: 3px; border-radius: 5px; cursor: pointer; font-size: 16px; min-width: 44px; transition: all 0.2s ease-in-out; }
.control-panel button:hover { color: #ffffff; background-color: #52565d; }
.control-panel button:active { transform: scale(1.1); background-color: #7289da; color: #ffffff; }