/* ═══════════════ RESET & VARIABLES ═══════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0f0f0f; --sidebar-bg:#171717; --sidebar-hover:#1f1f1f; --sidebar-active:#242424;
  --editor-bg:#0f0f0f; --border:#2a2a2a; --text-primary:#e8e8e8; --text-secondary:#888;
  --text-muted:#555; --accent:#6ee7b7; --accent-dim:rgba(110,231,183,0.12);
  --danger:#f87171; --orange:#fb923c; --orange-dim:rgba(251,146,60,0.14);
  --font-ui:'DM Sans',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --sidebar-w:260px; --topbar-h:50px; --bar-bg:#0a0a0a; --input-bg:#111;
  --icon-bg:#1f1f1f; --dialog-bg:#1a1a1a;
}
:root.light {
  --bg:#f5f5f4; --sidebar-bg:#fafaf9; --sidebar-hover:#f0efee; --sidebar-active:#e8e7e5;
  --editor-bg:#fff; --border:#e2e0dd; --text-primary:#1c1917; --text-secondary:#78716c;
  --text-muted:#a8a29e; --accent:#059669; --accent-dim:rgba(5,150,105,0.1);
  --danger:#dc2626; --orange:#ea580c; --orange-dim:rgba(234,88,12,0.12);
  --bar-bg:#ebe9e6; --input-bg:#f0efed; --icon-bg:#e8e6e3; --dialog-bg:#f0efed;
}
html,body { height:100%;height:100dvh;background:var(--bg);color:var(--text-primary);
  font-family:var(--font-ui);overflow:hidden;display:flex;flex-direction:column;
  -webkit-tap-highlight-color:transparent; }

/* ═══════════════ LOGIN OVERLAY ═══════════════ */
#login-overlay {
  position:fixed;inset:0;background:var(--bg);z-index:1000;
  display:flex;align-items:center;justify-content:center;
}
#login-box {
  background:var(--sidebar-bg);border:1px solid var(--border);border-radius:16px;
  padding:36px 32px;width:340px;display:flex;flex-direction:column;gap:24px;
}
#login-box h1 { font-family:var(--font-mono);font-size:15px;color:var(--text-primary);font-weight:500;letter-spacing:0.04em;text-align:center; }
#login-divider { display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:11px; }
#login-divider::before,#login-divider::after { content:'';flex:1;height:1px;background:var(--border); }
#login-pwd {
  background:var(--input-bg);border:1px solid var(--border);border-radius:8px;
  padding:10px 14px;color:var(--text-primary);font-family:var(--font-ui);font-size:14px;
  outline:none;width:100%;transition:border-color 0.15s;
}
#login-pwd:focus { border-color:rgba(110,231,183,0.4); }
#login-btn {
  background:var(--accent);color:#0a0a0a;border:none;border-radius:8px;
  padding:10px;font-family:var(--font-ui);font-size:14px;font-weight:500;
  cursor:pointer;transition:opacity 0.15s;width:100%;
}
#login-btn:hover { opacity:0.85; }
#login-error { font-size:12px;color:var(--danger);display:none;text-align:center; }
#qr-wrap { display:flex;flex-direction:column;align-items:center;gap:10px; }
#qr-canvas { display:inline-block;padding:10px;background:#fff;border-radius:10px; }
#qr-progress-bar { width:100%;height:3px;background:var(--border);border-radius:2px;overflow:hidden; }
#qr-progress-fill { height:100%;background:var(--accent);border-radius:2px;transition:width 1s linear; }
#qr-status { font-size:11px;color:var(--text-muted); }

/* ═══════════════ DESKTOP ═══════════════ */
#desktop-app { display:flex;height:100%;overflow:hidden;width:100%; }
body,#sidebar,#main,.file-item,.file-icon,.tab,.sb-icon-btn,.font-btn,
#statusbar,.status-item,.pane-tabs-bar,#sidebar-header,#sidebar-footer,
#restore-banner,.banner-btn,.CodeMirror {
  transition:background-color 0.2s ease,border-color 0.2s ease,color 0.2s ease; }
.spinner,.save-dirty,.save-flash { transition:none !important; }

#btn-theme { position:relative;width:36px;height:20px;background:var(--border);
  border:none;border-radius:10px;cursor:pointer;flex-shrink:0;padding:0;transition:background 0.2s !important; }
#btn-theme::after { content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;
  border-radius:50%;background:var(--text-muted);transition:transform 0.2s,background 0.2s !important; }
:root.light #btn-theme { background:rgba(5,150,105,0.25); }
:root.light #btn-theme::after { transform:translateX(16px);background:var(--accent); }

#sidebar { width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;height:100%;overflow:hidden;
  transition:width 0.22s cubic-bezier(.4,0,.2,1); }
#sidebar.collapsed { width:0;border-right:none; }
#sidebar-header { padding:0 10px;height:var(--topbar-h);display:flex;align-items:center;gap:2px;
  border-bottom:1px solid var(--border);flex-shrink:0; }
#sidebar-logo { font-family:var(--font-mono);font-size:12px;color:var(--text-muted);letter-spacing:0.04em;margin-right:4px;flex-shrink:0; }
.sb-icon-btn { position:relative;background:none;border:none;color:var(--text-muted);
  width:34px;height:34px;border-radius:8px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:color 0.15s,background 0.15s;flex-shrink:0; }
.sb-icon-btn:hover { color:var(--text-primary);background:var(--sidebar-hover); }
.sb-icon-btn svg { width:16px;height:16px; }
.sb-icon-btn[data-tip]:hover::after { content:attr(data-tip);position:absolute;top:calc(100% + 6px);
  left:50%;transform:translateX(-50%);background:#1a1a1a;color:#e8e8e8;font-family:var(--font-ui);
  font-size:11px;padding:4px 8px;border-radius:5px;white-space:nowrap;border:1px solid #333;
  z-index:999;pointer-events:none; }
.sb-icon-btn.save-dirty { color:var(--orange);animation:pulse-orange 2s ease-in-out infinite; }
.sb-icon-btn.save-flash { animation:save-flash 0.4s ease-out forwards;color:var(--accent); }
.sb-sep { width:1px;height:18px;background:var(--border);margin:0 4px;flex-shrink:0; }
#search-wrapper { flex:1;display:flex;align-items:center;background:var(--input-bg);
  border:1px solid var(--border);border-radius:6px;padding:0 8px;gap:6px;
  transition:border-color 0.15s;min-width:0; }
#search-wrapper:focus-within { border-color:rgba(110,231,183,0.3); }
#search-wrapper svg { width:12px;height:12px;color:var(--text-muted);flex-shrink:0; }
#search-input { flex:1;background:none;border:none;outline:none;color:var(--text-primary);
  font-family:var(--font-ui);font-size:12px;padding:6px 0;min-width:0; }
#search-input::placeholder { color:var(--text-muted); }
#files-section { flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0; }
#files-section::-webkit-scrollbar { width:4px; }
#files-section::-webkit-scrollbar-thumb { background:#2a2a2a;border-radius:4px; }
.files-group-label { padding:8px 16px 4px;font-size:10px;font-weight:500;letter-spacing:0.1em;color:var(--text-muted);text-transform:uppercase; }
.file-item { position:relative;display:flex;align-items:center;gap:10px;padding:9px 14px;
  cursor:pointer;border-radius:6px;margin:1px 6px;transition:background 0.12s;user-select:none; }
.file-item:hover { background:var(--sidebar-hover); }
.file-item.active { background:var(--sidebar-active); }
.file-item.active::before { content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:2px;border-radius:0 2px 2px 0;background:var(--accent); }
.file-icon { width:28px;height:28px;border-radius:6px;background:var(--icon-bg);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:12px;color:var(--text-secondary);font-family:var(--font-mono); }
.file-item.active .file-icon { background:var(--accent-dim);border-color:rgba(110,231,183,0.3);color:var(--accent); }
.file-item.pinned .file-icon { background:var(--orange-dim);border-color:rgba(251,146,60,0.25);color:var(--orange); }
.file-info { flex:1;min-width:0; }

/* Renaming inline */
.file-name[contenteditable="true"] {
  outline:none;background:var(--input-bg);border-radius:4px;
  padding:1px 5px;border:1px solid rgba(110,231,183,0.4);
  color:var(--text-primary);white-space:nowrap;min-width:60px;
}
/* Mobile swipe */
.m-note-item { overflow:hidden; }
.m-note-inner { display:flex;align-items:center;gap:14px;padding:13px 16px;
  width:100%;transition:transform 0.25s cubic-bezier(.4,0,.2,1);position:relative;
  background:var(--bg); }
.m-swipe-actions { position:absolute;right:0;top:0;bottom:0;display:flex;align-items:stretch;
  width:128px;transform:translateX(128px);transition:transform 0.25s cubic-bezier(.4,0,.2,1); }
.m-note-item.swiped .m-swipe-actions { transform:translateX(0); }
.m-swipe-btn { width:64px;display:flex;align-items:center;justify-content:center;
  font-size:20px;border:none;cursor:pointer;flex-shrink:0; }
.m-swipe-btn.pin  { background:var(--orange-dim);color:#facc15; }
.m-swipe-btn.del  { background:rgba(248,113,113,0.15);color:var(--danger); }

.file-name { font-size:16px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3; }
.file-date { font-size:13px;color:var(--text-muted);margin-top:2px; }
.file-item:hover .file-actions { opacity:1; }
.file-item.pinned .file-actions { opacity:1; }
.file-actions { opacity:0;display:flex;align-items:center;gap:2px;flex-shrink:0;transition:opacity 0.12s; }
.file-action-btn { background:none;border:none;color:var(--text-muted);cursor:pointer;
  padding:3px 5px;border-radius:4px;transition:all 0.12s;font-size:12px;line-height:1; }
.file-action-btn:hover { color:var(--text-primary);background:rgba(255,255,255,0.07); }
.file-action-btn.delete:hover { color:var(--danger);background:rgba(248,113,113,0.1); }
.file-action-btn.share:hover { color:var(--accent);background:rgba(110,231,183,0.1); }
.file-action-btn.pin-active { color:#facc15 !important; }
.file-action-btn svg { width:13px;height:13px; }
.file-action-btn.delete { font-size:18px;padding:1px 6px; }
#files-empty { padding:24px 16px;font-size:12px;color:var(--text-muted);text-align:center;line-height:1.6; }
#files-loading { padding:20px 16px;font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:8px; }
.spinner { width:14px;height:14px;border:1.5px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:spin 0.7s linear infinite;flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
#sidebar-footer { padding:10px 14px;border-top:1px solid var(--border);flex-shrink:0; }
#font-controls { display:flex;align-items:center;gap:8px; }
.font-btn { background:transparent;border:1px solid var(--border);color:var(--text-secondary);
  border-radius:5px;width:28px;height:28px;cursor:pointer;font-family:var(--font-ui);font-size:11px;
  display:flex;align-items:center;justify-content:center;transition:all 0.12s; }
.font-btn:hover { background:var(--sidebar-hover);color:var(--text-primary); }
#font-size-display { font-size:11px;color:var(--text-muted);font-family:var(--font-mono);flex:1;text-align:center; }
#main { flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0; }
#btn-toggle-sidebar { background:none;border:none;color:var(--text-muted);cursor:pointer;
  padding:5px 7px;border-radius:5px;display:flex;align-items:center;transition:color 0.12s,background 0.12s;
  flex-shrink:0;margin-right:4px;align-self:center;margin-bottom:1px; }
#btn-toggle-sidebar:hover { color:var(--text-primary);background:var(--sidebar-hover); }
#btn-toggle-sidebar svg { width:15px;height:15px; }
.pane-tabs-bar { display:flex;align-items:flex-end;gap:2px;overflow-x:auto;padding:0 8px;
  flex-shrink:0;border-bottom:1px solid var(--border);background:var(--bar-bg);height:var(--topbar-h); }
.pane-tabs-bar::-webkit-scrollbar { display:none; }
.pane-tabs-bar.drag-target { background:rgba(110,231,183,0.04); }
.tab { display:flex;align-items:center;gap:6px;padding:6px 12px 7px;border-radius:6px 6px 0 0;
  border:1px solid transparent;border-bottom:none;cursor:pointer;font-family:var(--font-ui);
  font-size:12.5px;color:var(--text-muted);user-select:none;white-space:nowrap;flex-shrink:0;
  max-width:160px;transition:all 0.12s;position:relative;top:1px; }
.tab:hover { color:var(--text-secondary);background:var(--sidebar-hover); }
.tab.active { color:var(--text-primary);background:var(--editor-bg);border-color:var(--border);border-bottom-color:var(--editor-bg); }
.tab-title { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1; }
.tab-title[contenteditable="true"] { outline:none;background:rgba(255,255,255,0.05);border-radius:3px;padding:0 3px; }
.tab-dirty::after { content:'●';color:var(--orange);font-size:8px;margin-left:3px;flex-shrink:0;vertical-align:middle; }
.tab.dragging { opacity:0.35; }
.tab.drag-over { border-left:2px solid var(--accent); }
.tab-close { color:var(--text-muted);font-size:13px;line-height:1;padding:0 2px;border-radius:3px;flex-shrink:0; }
.tab-close:hover { color:var(--danger); }
.btn-add-tab { background:transparent;border:none;color:var(--text-muted);padding:5px 10px 6px;
  cursor:pointer;font-size:16px;line-height:1;flex-shrink:0;border-radius:5px 5px 0 0;
  top:1px;position:relative;transition:color 0.12s; }
.btn-add-tab:hover { color:var(--text-primary); }
@keyframes pulse-orange { 0%,100%{box-shadow:0 0 0 0 rgba(251,146,60,0)}50%{box-shadow:0 0 0 3px rgba(251,146,60,0.15)} }
@keyframes save-flash { 0%{color:var(--accent);transform:scale(1.15)}100%{color:var(--text-muted);transform:scale(1)} }
#editor-wrapper { flex:1;display:flex;overflow:hidden;position:relative; }
#pane-left,#pane-right { display:flex;flex-direction:column;overflow:hidden;flex:1;min-width:60px; }
#pane-right { display:none;border-left:1px solid var(--border); }
#pane-right.open { display:flex; }
.editor-area { flex:1;position:relative;overflow:hidden; }
.editor-instance { position:absolute;inset:0;display:none; }
.editor-instance.active { display:block; }
.CodeMirror { height:100% !important;font-size:15px;font-family:var(--font-mono) !important;
  background:var(--editor-bg) !important;line-height:1.7 !important;color:var(--text-primary) !important; }
:root.light .CodeMirror { background:#fff !important; }
:root.light .CodeMirror-gutters { background:#f8f8f7 !important;border-right:1px solid var(--border) !important; }
:root.light .CodeMirror-linenumber { color:var(--text-muted) !important; }
:root.light .CodeMirror-cursor { border-left-color:var(--text-primary) !important; }
:root.light .CodeMirror-selected { background:rgba(5,150,105,0.12) !important; }
.CodeMirror-scroll { padding:16px 0; }
#drop-zone-right { width:24px;background:transparent;border-left:1px dashed #333;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;cursor:col-resize;transition:all 0.15s;
  color:#333;font-size:10px;writing-mode:vertical-rl; }
#drop-zone-right.drag-active { width:40px;background:rgba(110,231,183,0.05);border-left-color:var(--accent);color:var(--accent); }
#split-divider { width:4px;background:var(--border);cursor:col-resize;flex-shrink:0;display:none;transition:background 0.15s; }
#split-divider.active,#split-divider:hover { background:var(--accent); }
#statusbar { height:24px;background:var(--bar-bg);border-top:1px solid var(--border);
  display:flex;align-items:center;padding:0 16px;gap:16px;flex-shrink:0; }
.status-item { font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);
  display:flex;align-items:center;gap:5px;white-space:nowrap; }
.status-item.ok { color:var(--accent); }
.status-item.error { color:var(--danger); }
.status-item.saving { color:var(--orange); }
#status-spacer { flex:1; }
#restore-banner { display:none;background:rgba(110,231,183,0.06);border-bottom:1px solid rgba(110,231,183,0.2);
  padding:8px 16px;font-size:12px;color:var(--text-secondary);align-items:center;gap:10px;flex-shrink:0; }
#restore-banner.visible { display:flex; }
#restore-banner span { flex:1; }
.banner-btn { background:transparent;border:1px solid var(--border);color:var(--text-secondary);
  padding:3px 10px;border-radius:5px;cursor:pointer;font-size:11.5px;font-family:var(--font-ui);transition:all 0.12s; }
.banner-btn:hover { background:var(--sidebar-hover); }
.banner-btn.primary { background:var(--accent-dim);border-color:rgba(110,231,183,0.3);color:var(--accent); }
.banner-btn.primary:hover { background:rgba(110,231,183,0.2); }
.CodeMirror-dialog { background:var(--dialog-bg) !important;border-bottom:1px solid var(--border) !important;
  padding:6px 12px !important;color:var(--text-primary) !important;font-family:var(--font-mono) !important;font-size:12px !important; }
.CodeMirror-dialog input { background:var(--input-bg) !important;color:var(--text-primary) !important;
  border:1px solid var(--border) !important;border-radius:5px !important;padding:3px 8px !important;
  outline:none !important;width:200px !important; }
.CodeMirror-dialog input:focus { border-color:rgba(110,231,183,0.4) !important; }
.cm-searching { background:rgba(110,231,183,0.15) !important;outline:1px solid rgba(110,231,183,0.4) !important;border-radius:2px; }
* { scrollbar-width:thin;scrollbar-color:#2a2a2a transparent; }

/* Toast */
#toast { position:fixed;bottom:36px;left:50%;transform:translateX(-50%);background:#1a1a1a;
  color:#e8e8e8;padding:8px 18px;border-radius:20px;font-family:var(--font-ui);font-size:12.5px;
  z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,0.55);opacity:0;transition:opacity 0.3s;
  border:1px solid #333;pointer-events:none;white-space:nowrap; }
#toast.show { opacity:1; }

/* ═══════════════ MOBILE ═══════════════ */
@media (max-width:640px) {
  #desktop-app { display:none !important; }
  #mobile-app { display:flex !important;flex-direction:column;height:100dvh;overflow:hidden;position:relative;background:var(--bg); }
  #m-home { position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);
    transform:translateX(0);transition:transform 0.3s cubic-bezier(.4,0,.2,1);z-index:1;will-change:transform; }
  #m-home.slide-out { transform:translateX(-100%); }
  #m-home-header { height:56px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;
    background:var(--sidebar-bg);border-bottom:1px solid var(--border);flex-shrink:0;
    padding-top:env(safe-area-inset-top,0px); }
  #m-home-logo { font-family:var(--font-mono);font-size:15px;color:var(--text-primary);font-weight:500;letter-spacing:0.02em; }
  .m-header-btns { display:flex;align-items:center;gap:2px; }
  .m-icon-btn { width:40px;height:40px;border-radius:10px;background:none;border:none;
    color:var(--text-secondary);display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:background 0.15s; }
  .m-icon-btn:active { background:var(--sidebar-hover); }
  .m-icon-btn svg { width:20px;height:20px; }
  #m-search-bar { padding:10px 14px 8px;background:var(--sidebar-bg);border-bottom:1px solid var(--border);flex-shrink:0; }
  #m-search-wrap { display:flex;align-items:center;gap:8px;background:var(--input-bg);
    border:1px solid var(--border);border-radius:10px;padding:0 12px;transition:border-color 0.15s; }
  #m-search-wrap:focus-within { border-color:rgba(110,231,183,0.3); }
  #m-search-wrap svg { width:14px;height:14px;color:var(--text-muted);flex-shrink:0; }
  #m-search-input { flex:1;background:none;border:none;outline:none;color:var(--text-primary);
    font-family:var(--font-ui);font-size:14px;padding:10px 0;min-width:0; }
  #m-search-input::placeholder { color:var(--text-muted); }
  #m-notes-list { flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:100px; }
  #m-notes-list::-webkit-scrollbar { display:none; }
  .m-group-label { padding:16px 16px 6px;font-size:11px;font-weight:500;letter-spacing:0.08em;color:var(--text-muted);text-transform:uppercase; }
  .m-note-item { display:flex;align-items:center;position:relative;
    border-bottom:1px solid var(--border);overflow:hidden;user-select:none; }
  .m-note-inner { display:flex;align-items:center;gap:14px;padding:13px 16px;
    width:100%;cursor:pointer;transition:transform 0.25s cubic-bezier(.4,0,.2,1);
    background:var(--bg);position:relative;z-index:1; }
  .m-note-inner:active { background:var(--sidebar-hover); }
  .m-note-item.active-note .m-note-inner { background:rgba(110,231,183,0.05); }
  .m-note-item.active-note::before { content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent); }
  .m-note-avatar { width:42px;height:42px;border-radius:11px;background:var(--icon-bg);
    border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
    flex-shrink:0;font-size:17px;color:var(--text-secondary);font-family:var(--font-mono);font-weight:500; }
  .m-note-item.active-note .m-note-avatar { background:var(--accent-dim);border-color:rgba(110,231,183,0.3);color:var(--accent); }
  .m-note-item.pinned-note .m-note-avatar { background:var(--orange-dim);border-color:rgba(251,146,60,0.25);color:var(--orange); }
  .m-note-body { flex:1;min-width:0; }
  .m-note-name { font-size:15px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3; }
  .m-note-meta { display:flex;align-items:center;gap:6px;margin-top:3px; }
  .m-note-date { font-size:12px;color:var(--text-muted); }
  .m-note-chevron { width:18px;height:18px;color:var(--text-muted);flex-shrink:0; }
  #m-fab { position:fixed;right:20px;bottom:30px;width:56px;height:56px;border-radius:16px;
    background:var(--accent);border:none;color:#0a0a0a;display:flex;align-items:center;
    justify-content:center;cursor:pointer;z-index:50;box-shadow:0 4px 20px rgba(110,231,183,0.3);
    transition:transform 0.15s,box-shadow 0.15s,background 0.2s; }
  #m-fab:active { transform:scale(0.92); }
  #m-fab.dirty { background:var(--orange);box-shadow:0 4px 20px rgba(251,146,60,0.35); }
  #m-fab svg { width:24px;height:24px; }
  #m-editor { position:absolute;inset:0;display:flex;flex-direction:column;background:var(--editor-bg);
    transform:translateX(100%);transition:transform 0.3s cubic-bezier(.4,0,.2,1);z-index:2;will-change:transform; }
  #m-editor.slide-in { transform:translateX(0); }
  #m-editor-header { background:var(--sidebar-bg);border-bottom:1px solid var(--border);display:flex;
    align-items:center;gap:2px;padding:0 6px;flex-shrink:0;min-height:50px;
    padding-top:env(safe-area-inset-top,0px); }
  #m-back-btn { width:44px;height:44px;border-radius:10px;background:none;border:none;
    color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; }
  #m-back-btn svg { width:22px;height:22px; }
  #m-tabs-row { flex:1;display:flex;align-items:flex-end;overflow-x:auto;min-width:0;padding:6px 0 0;gap:2px; }
  #m-tabs-row::-webkit-scrollbar { display:none; }
  .m-tab { display:flex;align-items:center;gap:4px;padding:5px 10px 6px;border-radius:5px 5px 0 0;
    border:1px solid transparent;border-bottom:none;cursor:pointer;font-size:12px;color:var(--text-muted);
    white-space:nowrap;flex-shrink:0;max-width:130px;position:relative;top:1px;user-select:none; }
  .m-tab.active { color:var(--text-primary);background:var(--editor-bg);border-color:var(--border);border-bottom-color:var(--editor-bg); }
  .m-tab-title { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11.5px; }
  .m-tab.dirty::after { content:'●';color:var(--orange);font-size:7px;margin-left:2px;vertical-align:middle; }
  .m-tab-close { color:var(--text-muted);font-size:14px;padding:0 1px;flex-shrink:0; }
  .m-btn-add-tab { background:none;border:none;color:var(--text-muted);padding:5px 8px 6px;font-size:18px;cursor:pointer;position:relative;top:1px;flex-shrink:0; }
  .m-editor-actions { display:flex;align-items:center;flex-shrink:0;padding-bottom:2px; }
  #m-btn-save { width:40px;height:40px;border-radius:10px;background:none;border:none;color:var(--text-secondary);
    display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s; }
  #m-btn-save svg { width:20px;height:20px; }
  #m-btn-save.save-dirty { color:var(--orange);animation:pulse-orange 2s ease-in-out infinite; }
  #m-btn-save.save-flash { animation:save-flash 0.4s ease-out forwards;color:var(--accent); }
  #m-btn-more { width:40px;height:40px;border-radius:10px;background:none;border:none;
    color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer; }
  #m-btn-more svg { width:20px;height:20px; }
  #m-restore-bar { display:none;background:rgba(110,231,183,0.06);border-bottom:1px solid rgba(110,231,183,0.2);
    padding:7px 14px;font-size:12px;color:var(--text-secondary);align-items:center;gap:8px;flex-shrink:0; }
  #m-restore-bar.visible { display:flex; }
  #m-restore-bar span { flex:1;font-size:11.5px; }
  #m-editor-body { flex:1;overflow:hidden;position:relative; }
  .m-wrap { position:absolute;inset:0;display:none; }
  .m-wrap.active { display:block; }
  .m-ta { width:100%;height:100%;background:var(--editor-bg);color:var(--text-primary);
    border:none;outline:none;resize:none;font-family:var(--font-mono);font-size:16px;
    padding:16px;line-height:1.7;-webkit-overflow-scrolling:touch;caret-color:var(--accent); }
  #m-statusbar { background:var(--bar-bg);border-top:1px solid var(--border);padding:0 14px;
    height:26px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
    padding-bottom:env(safe-area-inset-bottom,0px); }
  #m-statusbar span { font-family:var(--font-mono);font-size:10px;color:var(--text-muted); }
  #m-st-save.ok { color:var(--accent); }
  #m-st-save.error { color:var(--danger); }
  #m-st-save.saving { color:var(--orange); }
  .m-sheet-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:200;display:none;flex-direction:column;justify-content:flex-end; }
  .m-sheet-overlay.open { display:flex; }
  .m-sheet-box { background:var(--sidebar-bg);border-radius:20px 20px 0 0;border-top:1px solid var(--border);
    padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px));animation:sheet-up 0.28s cubic-bezier(.4,0,.2,1); }
  @keyframes sheet-up { from{transform:translateY(100%)}to{transform:translateY(0)} }
  .m-sheet-handle { width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 14px; }
  .m-sheet-title { font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px; }
  .m-sheet-btn { width:100%;padding:14px 16px;border-radius:12px;margin-bottom:8px;
    background:var(--sidebar-hover);border:1px solid var(--border);color:var(--text-primary);
    font-family:var(--font-ui);font-size:14px;cursor:pointer;display:flex;align-items:center;gap:12px; }
  .m-sheet-btn:active { background:var(--sidebar-active); }
  .m-sheet-btn.danger { color:var(--danger); }
  .m-sheet-btn svg { width:20px;height:20px;color:var(--text-secondary);flex-shrink:0; }
  .m-sheet-btn.danger svg { color:var(--danger); }
  .m-sheet-cancel { width:100%;padding:14px;text-align:center;color:var(--text-muted);
    font-family:var(--font-ui);font-size:14px;background:none;border:none;cursor:pointer;border-radius:12px;margin-top:2px; }
  .m-sheet-cancel:active { background:var(--sidebar-hover); }
}
@media (min-width:641px) {
  #mobile-app { display:none !important; }
  #desktop-app { display:flex !important; }
}