/* Editor — Clean tool-style layout */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design Tokens ── */
:root {
    --bg:          #f3f4f6;
    --card-bg:     #ffffff;
    --border:      #e5e7eb;
    --border2:     #d1d5db;
    --text:        #111827;
    --text2:       #4b5563;
    --text3:       #9ca3af;
    --accent:      #2563eb;
    --accent-h:    #1d4ed8;
    --accent-bg:   #eff6ff;
    --accent-bg2:  #dbeafe;
    --success:     #16a34a;
    --warning:     #ea580c;
    --error:       #dc2626;
    --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:   'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --radius:      12px;
    --radius-sm:   8px;
    --shadow-sm:   0 1px 2px rgba(0,0,0,.04);
    --shadow:      0 1px 3px rgba(0,0,0,.06);
    --shadow-md:   0 4px 12px rgba(0,0,0,.08);
    --transition:  .15s ease;
}

[data-theme="dark"] {
    --bg:          #0f0f11;
    --card-bg:     #1a1a1e;
    --border:      #2a2a30;
    --border2:     #3a3a40;
    --text:        #e5e5e5;
    --text2:       #9ca3af;
    --text3:       #6b7280;
    --accent:      #3b82f6;
    --accent-h:    #60a5fa;
    --accent-bg:   #1e293b;
    --accent-bg2:  #1e3a5f;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
    font-family:var(--font-sans);font-size:14px;color:var(--text);
    background:var(--bg);-webkit-font-smoothing:antialiased;font-weight:400;
}
.app{height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* ════════════ Top Navigation ════════════ */
.top-nav{
    display:flex;align-items:center;justify-content:space-between;
    height:56px;padding:0 32px;background:var(--card-bg);
    border-bottom:1px solid var(--border);flex-shrink:0;position:sticky;top:0;z-index:100;
}
.top-nav-left{display:flex;align-items:center;gap:32px}
.top-nav-brand{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.top-nav-brand span{color:var(--accent)}
.top-nav-tabs{display:flex;gap:0}
.top-nav-tab{
    padding:16px 20px;border:none;background:none;font-size:14px;font-weight:500;
    color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;
    transition:all var(--transition);margin-bottom:-1px;
}
.top-nav-tab:hover{color:var(--text)}
.top-nav-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.top-nav-right{display:flex;align-items:center;gap:12px}
.top-nav-icon{
    width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
    border:none;background:none;font-size:18px;cursor:pointer;border-radius:8px;transition:all var(--transition);
}
.top-nav-icon:hover{background:var(--bg)}
.top-nav-link{font-size:13px;color:var(--text3);text-decoration:none;padding:6px 12px;border-radius:6px;transition:all var(--transition)}
.top-nav-link:hover{color:var(--text);background:var(--bg)}

/* ════════════ Page Title ════════════ */
.page-title{padding:32px 32px 8px;flex-shrink:0}
.page-title h1{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.page-title p{font-size:14px;color:var(--text3);margin-top:4px}

/* ════════════ Main Grid ════════════ */
.main-grid{
    display:grid;grid-template-columns:260px 1fr 1fr;gap:20px;
    padding:16px 32px 24px;flex:1;
}
.main-col{display:flex;flex-direction:column;gap:16px;min-width:0;height:100%}
.main-col-wide{min-width:0;height:100%}

/* ════════════ Panel / Card ════════════ */
.panel{
    background:var(--card-bg);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;overflow:hidden;flex:1;min-height:0;
}
.panel-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 20px;border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.panel-header h3{font-size:14px;font-weight:600;color:var(--text)}
.panel-header-actions{display:flex;gap:8px}
.panel-header-status{font-size:12px;color:var(--text3);font-weight:400}
.panel-editor{flex:1;min-height:0}
.panel-preview{flex:1;min-height:0}

/* ── File Tree ── */
.tree{flex:1;overflow-y:auto;padding:6px 0}
.tree-loading{padding:24px;text-align:center;color:var(--text3);font-size:13px}

/* ── Outline ── */
.outline-panel{flex:1;overflow-y:auto;padding:6px 0}
.outline-item{
    display:flex;align-items:center;gap:8px;padding:6px 20px;cursor:pointer;
    font-size:13px;color:var(--text2);transition:all var(--transition);
    border-left:2px solid transparent;
}
.outline-item:hover{background:var(--bg);border-left-color:var(--border2)}
.outline-item.outline-sub{padding-left:34px;font-size:12px;color:var(--text3)}
.outline-badge{font-size:10px;color:var(--accent);font-weight:600;opacity:.5}
.outline-empty{padding:32px;text-align:center;color:var(--text3);font-size:13px}

/* ── Source Editor ── */
.source-editor{
    flex:1;min-height:0;width:100%;border:none;resize:none;outline:none;
    padding:20px;font-family:var(--font-mono);font-size:13px;line-height:1.8;
    color:var(--text);background:var(--card-bg);tab-size:2;
}
.source-editor::placeholder{color:var(--text3);font-family:var(--font-sans);font-size:13px}

/* ── Section List ── */
.section-list-container{max-height:40%;overflow-y:auto;flex-shrink:0;border-top:1px solid var(--border)}

/* ── Preview ── */
.preview-toolbar{display:flex;align-items:center;gap:6px}
.zoom-label{font-size:12px;color:var(--text3);min-width:36px;text-align:center;font-weight:500}
.preview-viewport{
    flex:1;overflow-y:auto;overflow-x:hidden;
    padding:16px;background:var(--bg);
}
.preview-viewport:has(.pdf-preview-iframe){padding:8px}
.pdf-preview-iframe{width:100%;height:100%;border:none;border-radius:8px;background:#fff}

/* ── Preview Placeholder ── */
.preview-placeholder{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    height:100%;text-align:center;color:var(--text3);gap:16px;padding:40px 20px;
}
.preview-placeholder h3{font-size:15px;font-weight:600;color:var(--text2)}
.preview-placeholder p{font-size:13px;color:var(--text3);line-height:1.7;max-width:220px}
.placeholder-icon{margin-bottom:8px}

/* ════════════ Bottom Bar ════════════ */
.bottom-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 32px;background:var(--card-bg);border-top:1px solid var(--border);
    flex-shrink:0;position:sticky;bottom:0;z-index:100;
}
.bottom-bar-left{display:flex;align-items:center;gap:16px}
.bottom-bar-right{display:flex;align-items:center;gap:12px}
.bottom-bar-status{font-size:13px;color:var(--text3)}

/* ════════════ Buttons ════════════ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:8px 18px;border:1px solid var(--border2);border-radius:var(--radius-sm);
    background:var(--card-bg);color:var(--text2);font-size:13px;font-weight:500;
    cursor:pointer;transition:all var(--transition);white-space:nowrap;user-select:none;
    text-decoration:none;
}
.btn:hover{background:var(--bg);border-color:var(--text3)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-primary{
    background:var(--accent);color:#fff;border-color:var(--accent);
    font-weight:600;
}
.btn-primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
.btn-primary-lg{padding:10px 28px;font-size:14px;border-radius:var(--radius)}
.btn-outline{background:transparent;border-color:var(--border2)}
.btn-outline:hover{background:var(--bg)}

/* ════════════ Toast ════════════ */
.toast-container{
    position:fixed;bottom:80px;right:24px;z-index:9999;
    display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;
}
.toast{
    padding:10px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;
    background:var(--text);color:var(--card-bg);box-shadow:var(--shadow-md);
    pointer-events:auto;animation:toastIn .3s cubic-bezier(.22,.98,.46,1.01);
    border-left:3px solid var(--accent);
}
.toast.error{border-left-color:var(--error)}
.toast.success{border-left-color:var(--success)}
.toast.removing{animation:toastOut .25s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(8px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-8px) scale(.96)}}

/* ════════════ Shortcuts Modal ════════════ */
.shortcuts-overlay{
    position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.35);
    display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
}
.shortcuts-modal{
    background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
    padding:28px;min-width:360px;box-shadow:var(--shadow-md);
}
.shortcuts-modal h3{font-size:15px;font-weight:600;margin-bottom:16px}
.shortcuts-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:13px;color:var(--text2)}
.shortcuts-grid kbd{
    background:var(--bg);color:var(--text2);padding:2px 8px;border-radius:4px;
    font-size:11px;font-family:var(--font-mono);border:1px solid var(--border2);
}

/* ── Misc ── */
.preview-error{padding:24px;text-align:center;color:var(--error);font-size:13px;background:var(--accent-bg);border-radius:var(--radius-sm);margin:16px}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}

/* ── Responsive ── */
@media(max-width:1100px){
    .main-grid{grid-template-columns:220px 1fr 1fr;padding:12px 16px 20px}
    .top-nav{padding:0 16px}
    .page-title{padding:24px 16px 4px}
    .bottom-bar{padding:12px 16px}
}
@media(max-width:768px){
    .main-grid{grid-template-columns:1fr}
    .main-col-wide{order:-1}
    .top-nav-tabs{gap:0}
    .top-nav-tab{padding:16px 12px;font-size:13px}
}