:root {
    --bg: #0d1117;
    --surface: #161b22;
    --surface2: #1c2128;
    --border: #30363d;
    --text: #e6edf3;
    --text-muted: #8b949e;
    --accent: #58a6ff;
    --green: #3fb950;
    --red: #f85149;
    --yellow: #d2991d;
    --radius: 6px;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    --transition: 0.15s ease;
    --cm-bg: #0d1117;
    --cm-text: #e6edf3;
    --cm-gutter: #161b22;
    --cm-border: #30363d;
    --cm-cursor: #c9d1d9;
}
body.light-theme {
    --bg: #ffffff;
    --surface: #f6f8fa;
    --surface2: #eaeef2;
    --border: #d0d7de;
    --text: #1f2328;
    --text-muted: #656d76;
    --accent: #0969da;
    --green: #1a7f37;
    --red: #cf222e;
    --yellow: #9a6700;
    --cm-bg: #ffffff;
    --cm-text: #1f2328;
    --cm-gutter: #f6f8fa;
    --cm-border: #d0d7de;
    --cm-cursor: #1f2328;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    transition: background 0.2s, color 0.2s;
}
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius:3px; }
.header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    z-index: 10;
    transition: background 0.2s;
}
.header .logo {
    font-weight: 600; font-size:15px; color: var(--text);
    display: flex; align-items:center; gap:7px; white-space:nowrap;
}
.header .logo svg { width:18px; height:18px; fill: currentColor; }
.header .sep { width:1px; height:18px; background:var(--border); opacity:0.6; margin:0 4px; }
.header input, .header select {
    background: var(--bg); border:1px solid var(--border); color:var(--text);
    padding:5px 10px; border-radius:var(--radius); font-size:12px;
    font-family: var(--font-sans); outline:none; transition:0.15s;
}
.header input:focus, .header select:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(88,166,255,0.15); }
.header input.token-input { width:170px; font-family:var(--font-mono); letter-spacing:0.3px; }
.header select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5l3-3' fill='none' stroke='%238b949e' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; padding-right:26px; min-width:100px; }
.header select.repo-select { min-width:150px; }
.header .btn {
    background: transparent; border:1px solid var(--border); color: var(--text-muted);
    padding:5px 12px; border-radius:var(--radius); cursor:pointer; font-size:12px;
    font-weight:500; font-family:var(--font-sans); transition:0.15s;
    display:flex; align-items:center; gap:4px; white-space:nowrap;
}
.header .btn:hover { background: var(--surface2); color: var(--text); border-color:#484f58; }
.header .btn.primary { background:var(--green); border-color:var(--green); color:#fff; font-weight:600; }
.header .btn.primary:hover { background:#2ea043; border-color:#2ea043; }
.header .btn.danger { color:var(--red); border-color:var(--red); }
.header .btn.danger:hover { background:var(--red); color:#fff; }
.header .btn.small { padding:4px 8px; font-size:11px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--red); flex-shrink:0; }
.status-dot.on { background:var(--green); box-shadow:0 0 5px rgba(63,185,80,0.6); }
.main { display:flex; flex:1; overflow:hidden; }
.sidebar {
    width:260px; min-width:180px; background:var(--surface);
    border-right:1px solid var(--border); display:flex; flex-direction:column;
    overflow:hidden; resize:horizontal; transition: background 0.2s;
}
.sidebar-header {
    padding:8px 12px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    font-size:11px; font-weight:600; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.4px;
}
.file-tree { flex:1; overflow-y:auto; overflow-x:hidden; padding:4px 0; }
.tree-item {
    display:flex; align-items:center; padding:5px 10px; cursor:pointer;
    font-size:12.5px; gap:6px; transition: background 0.1s;
    border-left:3px solid transparent; position:relative;
}
.tree-item:hover { background: rgba(128,128,128,0.1); }
.tree-item.active { background: rgba(88,166,255,0.1); border-left-color:var(--accent); }
.tree-item .chevron { font-size:9px; width:12px; color:var(--text-muted); transition:transform 0.15s; text-align:center; }
.tree-item.directory.expanded .chevron { transform:rotate(90deg); }
.tree-item .icon { flex-shrink:0; font-size:13px; width:16px; text-align:center; }
.tree-item .name { overflow:hidden; text-overflow:ellipsis; flex:1; }
.tree-item .delete-icon { opacity:0; color:var(--text-muted); font-size:14px; cursor:pointer; padding:0 4px; border-radius:3px; transition:0.15s; margin-left:auto; }
.tree-item:hover .delete-icon { opacity:1; }
.tree-item .delete-icon:hover { color:var(--red); background:rgba(248,81,73,0.15); }
.children { overflow:hidden; transition:max-height 0.2s ease; }
.children.collapsed { max-height:0 !important; }
.editor-area { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); transition: background 0.2s; }
.tab-bar {
    display:flex; background:var(--surface2); border-bottom:1px solid var(--border);
    overflow-x:auto; min-height:33px;
}
.tab {
    display:flex; align-items:center; gap:5px; padding:6px 14px; font-size:12px;
    cursor:pointer; border-right:1px solid var(--border); background:var(--surface2);
    color:var(--text-muted); white-space:nowrap; transition:0.1s;
}
.tab.active { background:var(--bg); color:var(--text); border-bottom:2px solid var(--accent); margin-bottom:-1px; }
.tab .close-tab { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:0 4px; font-size:15px; line-height:1; border-radius:3px; }
.tab .close-tab:hover { color:var(--red); background:rgba(248,81,73,0.2); }
.tab .modified-dot { width:6px; height:6px; border-radius:50%; background:var(--yellow); }
.editor-container { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.editor-container .placeholder { flex:1; display:flex; align-items:center; justify-content:center; color:var(--text-muted); flex-direction:column; gap:8px; }
.editor-wrapper { flex:1; display:flex; flex-direction:column; overflow:hidden; position: relative; }
.CodeMirror { height:100%; font-size:13.5px; line-height:1.6; background:var(--cm-bg); color:var(--cm-text); }
.CodeMirror-gutters { background:var(--cm-gutter); border-right:1px solid var(--cm-border); }
.CodeMirror-cursor { border-left-color: var(--cm-cursor); }
.image-preview { flex:1; display:flex; align-items:center; justify-content:center; padding:20px; background:#0a0a0a; }
.image-preview img { max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--radius); box-shadow:0 4px 20px rgba(0,0,0,0.5); }
.binary-notice { flex:1; display:flex; align-items:center; justify-content:center; color:var(--text-muted); flex-direction:column; gap:6px; }
.md-preview { flex:1; padding:20px; overflow-y:auto; background:var(--bg); color:var(--text); display:none; }
.md-preview h1,.md-preview h2,.md-preview h3 { margin-top:16px; margin-bottom:8px; }
.md-preview pre { background:var(--surface); padding:12px; border-radius:var(--radius); overflow-x:auto; }
.md-preview code { font-family:var(--font-mono); font-size:12px; }
.status-bar {
    background:var(--surface); border-top:1px solid var(--border);
    padding:5px 14px; font-size:11px; color:var(--text-muted); display:flex; gap:16px;
    transition: background 0.2s;
}
.toast-container { position:fixed; bottom:16px; right:16px; z-index:1000; display:flex; flex-direction:column; gap:6px; }
.toast { background:var(--surface); border:1px solid var(--border); padding:10px 16px; border-radius:var(--radius); font-size:12px; box-shadow:0 4px 14px rgba(0,0,0,0.4); animation:slideIn 0.3s ease; display:flex; align-items:center; gap:8px; max-width:360px; }
.toast.success { border-left:3px solid var(--green); }
.toast.error { border-left:3px solid var(--red); }
.toast.info { border-left:3px solid var(--accent); }
@keyframes slideIn { from{transform:translateX(60px);opacity:0;} to{transform:translateX(0);opacity:1;} }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:999; display:flex; align-items:center; justify-content:center; animation:fadeIn 0.2s; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:22px; min-width:340px; max-width:460px; box-shadow:0 10px 30px rgba(0,0,0,0.5); transition: background 0.2s; }
.modal h3 { font-size:15px; margin-bottom:10px; }
.modal p { font-size:12px; color:var(--text-muted); margin-bottom:12px; }
.modal input { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:var(--radius); font-size:12px; margin-bottom:12px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; }
.modal-actions button { padding:7px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface2); color:var(--text); cursor:pointer; font-size:12px; transition:0.15s; }
.modal-actions button:hover { background:#252c35; }
.modal-actions .confirm-btn { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.modal-actions .danger-btn { background:var(--red); border-color:var(--red); color:#fff; font-weight:600; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.drop-zone { border:2px dashed var(--border); padding:20px; text-align:center; color:var(--text-muted); margin:10px; border-radius:8px; transition:0.2s; }
.drop-zone.drag-over { border-color:var(--accent); background:rgba(88,166,255,0.05); }
.history-modal-content { max-height:300px; overflow-y:auto; }
.history-item { padding:8px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.history-item:hover { background:var(--surface2); }
@media (max-width:768px) { .sidebar{width:100%!important;max-height:40vh;resize:none;border-right:none;border-bottom:1px solid var(--border);} .main{flex-direction:column;} .header{gap:6px;} }