@import url('data:text/css,');

/* ── DESIGN TOKENS ─────────────────────────────────── */
:root {
--bg-0: #0d0e11;
--bg-1: #13151a;
--bg-2: #1a1d24;
--bg-3: #22262f;
--bg-4: #2a2f3a;
--border: #2f3540;
--border-hi: #3d4555;
--text-0: #e8eaf0;
--text-1: #9aa3b8;
--text-2: #5c6480;
--accent: #f59e0b;
--accent-dim: #92610a;
--accent-glow: rgba(245,158,11,0.12);
--green: #34d399;
--blue: #60a5fa;
--red: #f87171;
--purple: #a78bfa;
--font-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Courier New', monospace;
--font-ui: 'Syne', 'DM Sans', system-ui, sans-serif;
--radius: 6px;
--pane-gap: 2px;
}

/* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
background: var(--bg-0);
color: var(--text-0);
font-family: var(--font-ui);
font-size: 14px;
display: flex;
flex-direction: column;
}

/* ── TOOLBAR ─────────────────────────────────────────── */
#toolbar {
height: 52px;
background: var(--bg-1);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 16px;
gap: 12px;
flex-shrink: 0;
position: relative;
z-index: 10;
}
#toolbar::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
opacity: 0.5;
}

.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.3px;
color: var(--text-0);
user-select: none;
flex-shrink: 0;
}
.logo-icon {
width: 30px; height: 30px;
background: var(--accent);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: 15px;
font-weight: 900;
color: #000;
font-family: var(--font-mono);
}
.logo-sep {
color: var(--accent);
font-family: var(--font-mono);
font-size: 16px;
}

.toolbar-divider {
width: 1px;
height: 28px;
background: var(--border);
flex-shrink: 0;
}

.toolbar-group {
display: flex;
align-items: center;
gap: 4px;
}

.tb-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-1);
font-size: 12px;
font-family: var(--font-ui);
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.tb-btn:hover {
background: var(--bg-4);
border-color: var(--border-hi);
color: var(--text-0);
}
.tb-btn.accent {
background: var(--accent-glow);
border-color: var(--accent-dim);
color: var(--accent);
}
.tb-btn.accent:hover {
background: rgba(245,158,11,0.2);
border-color: var(--accent);
}
.tb-btn svg { flex-shrink: 0; }

.spacer { flex: 1; }

.sync-indicator {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-2);
font-family: var(--font-mono);
}
.sync-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px var(--green);
transition: background 0.3s;
}
.sync-dot.syncing { background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse 0.6s ease-in-out; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* ── STUDIO LAYOUT ───────────────────────────────────── */
#studio {
flex: 1;
display: flex;
overflow: hidden;
gap: var(--pane-gap);
background: var(--border);
}

/* ── PANE ────────────────────────────────────────────── */
.pane {
flex: 1;
display: flex;
flex-direction: column;
background: var(--bg-1);
overflow: hidden;
min-width: 200px;
}

.pane-header {
height: 42px;
background: var(--bg-2);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 12px;
gap: 10px;
flex-shrink: 0;
}

.pane-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
font-family: var(--font-mono);
color: var(--text-2);
}
.pane-label.md { color: var(--accent); }
.pane-label.html { color: var(--blue); }

.mode-tabs {
display: flex;
gap: 2px;
background: var(--bg-0);
padding: 3px;
border-radius: 6px;
border: 1px solid var(--border);
}
.mode-tab {
padding: 3px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
color: var(--text-2);
border: none;
background: transparent;
font-family: var(--font-ui);
transition: all 0.15s;
}
.mode-tab:hover { color: var(--text-1); }
.mode-tab.active {
background: var(--bg-3);
color: var(--text-0);
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.pane-actions {
display: flex;
gap: 4px;
margin-left: auto;
}
.pane-btn {
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
color: var(--text-2);
cursor: pointer;
transition: all 0.15s;
}
.pane-btn:hover {
background: var(--bg-3);
border-color: var(--border);
color: var(--text-0);
}

.pane-body {
flex: 1;
overflow: hidden;
position: relative;
}

/* ── EDITOR (TEXTAREA) ───────────────────────────────── */
.editor {
position: absolute; inset: 0;
resize: none;
border: none;
outline: none;
background: var(--bg-1);
color: var(--text-0);
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.7;
padding: 20px;
width: 100%;
height: 100%;
tab-size: 2;
-webkit-font-smoothing: antialiased;
caret-color: var(--accent);
transition: opacity 0.2s;
}
.editor::selection { background: rgba(245,158,11,0.25); }
.editor:focus { box-shadow: inset 2px 0 0 var(--accent); }
.editor.html-editor:focus { box-shadow: inset 2px 0 0 var(--blue); }

/* ── PREVIEW ─────────────────────────────────────────── */
.preview-pane {
position: absolute; inset: 0;
overflow-y: auto;
padding: 24px 32px;
display: none;
}
.preview-pane.active { display: block; }
.preview-pane::-webkit-scrollbar { width: 6px; }
.preview-pane::-webkit-scrollbar-track { background: transparent; }
.preview-pane::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 3px; }

/* ── GITHUB-STYLE MARKDOWN CSS ───────────────────────── */
.md-preview {
color: var(--text-0);
line-height: 1.75;
font-family: 'Georgia', 'Cambria', 'Times New Roman', serif;
font-size: 15px;
max-width: 760px;
}
.md-preview h1,.md-preview h2,.md-preview h3,
.md-preview h4,.md-preview h5,.md-preview h6 {
font-family: var(--font-ui);
font-weight: 700;
line-height: 1.3;
margin: 1.5em 0 0.6em;
color: var(--text-0);
}
.md-preview h1 { font-size: 2em; border-bottom: 2px solid var(--border-hi); padding-bottom: 0.3em; color: #fff; }
.md-preview h2 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.md-preview h3 { font-size: 1.25em; }
.md-preview h4 { font-size: 1em; color: var(--accent); }
.md-preview h5 { font-size: 0.875em; color: var(--text-1); }
.md-preview h6 { font-size: 0.85em; color: var(--text-2); }
.md-preview p { margin: 0 0 1em; }
.md-preview a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.md-preview a:hover { color: #fbbf24; }
.md-preview code {
font-family: var(--font-mono);
font-size: 0.85em;
background: var(--bg-3);
border: 1px solid var(--border);
padding: 0.15em 0.4em;
border-radius: 4px;
color: var(--green);
}
.md-preview pre {
background: var(--bg-0);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
padding: 16px 20px;
overflow-x: auto;
margin: 1em 0;
}
.md-preview pre code {
background: none; border: none; padding: 0;
color: var(--text-0); font-size: 13px; line-height: 1.6;
}
.md-preview blockquote {
border-left: 4px solid var(--accent-dim);
background: var(--bg-2);
margin: 1em 0;
padding: 12px 20px;
border-radius: 0 var(--radius) var(--radius) 0;
color: var(--text-1);
font-style: italic;
}
.md-preview blockquote p:last-child { margin-bottom: 0; }
.md-preview ul, .md-preview ol { padding-left: 2em; margin: 0 0 1em; }
.md-preview li { margin: 0.25em 0; }
.md-preview li > ul, .md-preview li > ol { margin: 0.25em 0; }
.md-preview hr { border: none; border-top: 2px solid var(--border-hi); margin: 2em 0; }
.md-preview img { max-width: 100%; border-radius: var(--radius); }
.md-preview table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.md-preview th {
background: var(--bg-3); font-family: var(--font-ui); font-weight: 700;
font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase;
padding: 10px 14px; border: 1px solid var(--border); color: var(--accent);
}
.md-preview td { padding: 10px 14px; border: 1px solid var(--border); }
.md-preview tr:nth-child(even) { background: var(--bg-2); }
.md-preview del { text-decoration: line-through; color: var(--text-2); }
.md-preview strong { font-weight: 700; color: #fff; }
.md-preview em { font-style: italic; }
.md-preview input[type=checkbox] { margin-right: 6px; accent-color: var(--accent); }

/* ── HTML PREVIEW ─────────────────────────────────────── */
.html-render { color: var(--text-0); }

/* ── RESIZER ──────────────────────────────────────────── */
#resizer {
width: 6px;
background: var(--border);
cursor: col-resize;
flex-shrink: 0;
position: relative;
transition: background 0.2s;
z-index: 5;
}
#resizer:hover, #resizer.dragging { background: var(--accent-dim); }
#resizer::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2px; height: 30px;
background: var(--border-hi);
border-radius: 1px;
}

/* ── STATUS BAR ───────────────────────────────────────── */
#statusbar {
height: 26px;
background: var(--bg-2);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 16px;
gap: 16px;
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-2);
flex-shrink: 0;
}
.status-item { display: flex; align-items: center; gap: 5px; }
.status-item span { color: var(--text-1); }
.status-sep { color: var(--border-hi); }
#toast {
position: fixed;
bottom: 40px; right: 20px;
background: var(--bg-3);
border: 1px solid var(--border-hi);
border-left: 3px solid var(--green);
color: var(--text-0);
padding: 10px 16px;
border-radius: var(--radius);
font-size: 13px;
font-family: var(--font-ui);
box-shadow: 0 8px 30px rgba(0,0,0,0.5);
transform: translateY(20px);
opacity: 0;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
z-index: 1000;
}
#toast.show { transform: translateY(0); opacity: 1; }

/* ── SCROLLBARS ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* ── HIDDEN FILE INPUT ────────────────────────────────── */
#file-input { display: none; }

/* ── LOADING OVERLAY ──────────────────────────────────── */
#loading {
position: fixed; inset: 0;
background: var(--bg-0);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 16px;
z-index: 9999;
transition: opacity 0.4s;
}
#loading.done { opacity: 0; pointer-events: none; }
.loading-logo { font-size: 40px; font-family: var(--font-mono); color: var(--accent); font-weight: 900; }
.loading-bar {
width: 200px; height: 2px;
background: var(--bg-3);
border-radius: 1px;
overflow: hidden;
}
.loading-bar-inner {
height: 100%;
background: var(--accent);
border-radius: 1px;
animation: loadbar 0.6s ease-out forwards;
}
@keyframes loadbar { from { width: 0 } to { width: 100% } }
.loading-text { font-size: 12px; color: var(--text-2); font-family: var(--font-mono); }

/* ── UTILITY ──────────────────────────────────────────── */
.hidden { display: none !important; }