/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&family=Roboto+Serif:opsz@8..144&display=swap');

:root { /* CSS variables for easy theme changes */
    --text-color: #333;
    --placeholder-color: #bebebe;
    --border-color: #000;
    --bg-color: #fff;
    --container-bg: #fff;
    --meta-color: #666;
    --focus-border: #333;
    --toolbar-bg: #333;
    --toolbar-hover: #555;
    --btn-bg: #fff;
    --btn-text: #000;
    --btn-border: #000;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    padding: 20px;
    margin: 0;
    transition: background-color 0.3s, color 0.3s;
}
.container { max-width: 700px; width: 100%; position: relative; }
#title, #author {
    width: 100%; border: none; outline: none; background: transparent; padding: 0;
    font-family: 'Roboto', sans-serif; color: var(--text-color);
}
#title { font-size: 2.8em; font-weight: 400; line-height: 1.2; margin-bottom: 5px; }
#author { font-size: 1.1em; color: var(--meta-color); margin-bottom: 2em; }
#editor {
    font-family: 'Roboto Serif', serif; font-size: 1.15em; line-height: 1.7;
    outline: none; min-height: 200px; position: relative;
}
#editor:empty:before { content: "Your story..."; color: var(--placeholder-color); pointer-events: none; display: block; }
#editor p.is-focused { border-left: 2px solid var(--focus-border); padding-left: 10px; margin-left: -12px; }
#editor p { margin: 0; padding: 0.5em 0; }
#editor img, .article-content img { max-width: 100%; height: auto; display: block; margin: 1em auto; }
#editor iframe, .article-content iframe { width: 100%; min-height: 400px; border: 1px solid #eee; margin: 1em 0; }
#editor h2, .article-content h2 { font-size: 1.5em; font-weight: bold; margin-top: 1.4em; }
#editor h3, .article-content h3 { font-size: 1.2em; font-weight: bold; margin-top: 1.2em; }
#editor blockquote, .article-content blockquote {
    border-left: 3px solid #ccc; padding-left: 20px; margin: 1.5em 0;
    font-style: italic; color: #555;
}
.toolbar {
    position: absolute; display: flex; align-items: center; gap: 5px;
    opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s;
    z-index: 99; background: var(--toolbar-bg); border-radius: 5px; padding: 5px;
}
.toolbar.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.toolbar button { background: none; border: none; color: #fff; cursor: pointer; border-radius: 3px; padding: 8px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; }
.toolbar button:hover { background-color: var(--toolbar-hover); }
#inlineToolbar { transform: translateY(10px); }
#inlineToolbar button { font-size: 1.1em; width: 36px; height: 36px; }
#newLineToolbar { background: none; padding: 0; }
#newLineToolbar button { background: var(--btn-bg); border: 1px solid #ccc; border-radius: 50%; color: var(--text-color); width: 36px; height: 36px; }

.top-right-controls {
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
}
#publish, .edit-button {
    background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-border);
    border-radius: 20px; padding: 6px 18px; font-size: 0.9em; cursor: pointer;
    text-decoration: none; transition: all 0.2s ease;
}
#publish:hover, .edit-button:hover { background-color: var(--btn-border); color: var(--btn-bg); }
.dark-mode-toggle {
    background: var(--btn-bg); border: 1px solid #ccc; border-radius: 50%;
    width: 32px; height: 32px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

.article-meta { margin-bottom: 2em; color: var(--meta-color); }
.article-content a { color: #007bff; text-decoration: none; border-bottom: 1px dotted #007bff; }
.article-content a:hover { border-bottom-style: solid; }
.share-buttons { margin-top: 2em; display: flex; gap: 10px; align-items: center; }
.share-buttons a { background-color: #f0f0f0; padding: 8px 15px; border-radius: 5px; text-decoration: none; color: #333; }

/* --- DARK MODE THEME --- */
body.dark-mode {
    --text-color: #e0e0e0;
    --placeholder-color: #666;
    --border-color: #e0e0e0;
    --bg-color: #121212;
    --container-bg: #121212;
    --meta-color: #888;
    --focus-border: #e0e0e0;
    --toolbar-bg: #2a2a2a;
    --toolbar-hover: #444;
    --btn-bg: #121212;
    --btn-text: #e0e0e0;
    --btn-border: #e0e0e0;
}
/* FIX: Explicitly set editor and article text color for dark mode */
body.dark-mode #editor,
body.dark-mode .article-content {
    color: var(--text-color);
}
body.dark-mode .article-content a {
    color: #58a6ff; /* A lighter blue for better contrast in dark mode */
    border-bottom-color: #58a6ff;
}
body.dark-mode .share-buttons a { background-color: #2a2a2a; color: #e0e0e0; }

@media (max-width: 768px) {
    #title { font-size: 2.2em; } #editor { font-size: 1.1em; }
    .top-right-controls { top: 15px; right: 15px; }
}