* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root { --bg:#1e1e1e; --panel:#252526; --panel2:#2d2d30; --border:#3c3c3c; --text:#d4d4d4; --muted:#858585; --accent:#0e639c; --accent2:#1177bb; --danger:#f14c4c; }
html, body { height:100%; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,"Segoe UI",Roboto,sans-serif; font-size:15px; display:flex; flex-direction:column; height:100dvh; overflow:hidden; }
button, input, select { font-family:inherit; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top)); background:var(--panel); border-bottom:1px solid var(--border); }
.brand { font-weight:700; font-size:18px; letter-spacing:1px; color:#fff; }
.brand span { color:var(--accent2); font-weight:400; }
.top-actions { display:flex; gap:6px; }
.icon-btn { background:none; border:none; color:var(--text); font-size:18px; padding:6px 8px; border-radius:8px; text-decoration:none; }
.icon-btn:active { background:var(--panel2); }
.crumbs { display:flex; align-items:center; gap:2px; padding:8px 14px; background:var(--bg); overflow-x:auto; white-space:nowrap; border-bottom:1px solid var(--border); -webkit-overflow-scrolling:touch; }
.crumb { color:var(--accent2); background:none; border:none; font-size:14px; padding:4px 2px; }
.crumb.current { color:var(--text); font-weight:600; }
.crumb-sep { color:var(--muted); font-size:12px; padding:0 2px; }
.toolbar { display:flex; gap:8px; padding:8px 14px; overflow-x:auto; white-space:nowrap; background:var(--bg); -webkit-overflow-scrolling:touch; }
.tool-btn { background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:14px; flex-shrink:0; }
.tool-btn:active { background:var(--accent); border-color:var(--accent); color:#fff; }
.paste-btn { background:var(--accent); border-color:var(--accent); color:#fff; }
.list { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
.row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid #2a2a2a; }
.row:active { background:var(--panel2); }
.row.selected { background:#0e639c33; }
.row-check { width:22px; height:22px; border:2px solid var(--muted); border-radius:6px; flex-shrink:0; display:none; align-items:center; justify-content:center; font-size:14px; color:#fff; }
body.selecting .row-check { display:flex; }
.row.selected .row-check { background:var(--accent); border-color:var(--accent); }
.row-icon { font-size:24px; flex-shrink:0; width:30px; text-align:center; }
.row-main { flex:1; min-width:0; }
.row-name { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:right; }
.row-meta { font-size:12px; color:var(--muted); margin-top:2px; direction:ltr; text-align:right; }
.empty { text-align:center; color:var(--muted); padding:60px 20px; font-size:14px; }
.selbar { position:fixed; bottom:0; left:0; right:0; background:var(--panel); border-top:1px solid var(--border); padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:8px; z-index:40; }
.selinfo { font-size:13px; color:var(--muted); flex-shrink:0; }
.selacts { display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sel-btn { background:var(--panel2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:17px; padding:8px 10px; flex-shrink:0; }
.sel-btn.danger { color:var(--danger); }
.editor { position:fixed; inset:0; background:var(--bg); z-index:60; display:flex; flex-direction:column; }
.editor-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top)); background:var(--panel); border-bottom:1px solid var(--border); }
.editor-name { flex:1; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:center; color:#fff; }
.save-btn { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 18px; font-size:14px; font-weight:600; }
.save-btn:active { background:var(--accent2); }
.editor-host { flex:1; overflow:hidden; direction:ltr; }
.editor-host .CodeMirror { height:100%; font-size:13px; font-family:"SF Mono",Menlo,Consolas,monospace; }
.search { position:fixed; inset:0; background:var(--bg); z-index:70; display:flex; flex-direction:column; }
.search-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top)); background:var(--panel); border-bottom:1px solid var(--border); }
.search-input { flex:1; background:var(--panel2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:16px; padding:10px 12px; outline:none; }
.search-input:focus { border-color:var(--accent); }
.search-results { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.modal { position:fixed; inset:0; background:#000000aa; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-card { background:var(--panel); border:1px solid var(--border); border-radius:14px; width:100%; max-width:340px; padding:18px; }
.modal-title { font-size:16px; font-weight:600; margin-bottom:14px; color:#fff; }
.modal-body { display:flex; flex-direction:column; gap:10px; }
.md-input { background:var(--panel2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:16px; padding:10px 12px; outline:none; width:100%; direction:ltr; text-align:left; }
.md-input:focus { border-color:var(--accent); }
.md-select { background:var(--panel2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:16px; padding:10px 12px; outline:none; width:100%; }
.md-note { font-size:13px; color:var(--muted); }
.md-list { max-height:40dvh; overflow-y:auto; border:1px solid var(--border); border-radius:8px; }
.md-list .row { padding:10px 12px; }
.modal-actions { display:flex; gap:10px; margin-top:16px; }
.md-btn { flex:1; background:var(--panel2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:15px; padding:10px; }
.md-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.toast { position:fixed; bottom:calc(100px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:10px 18px; border-radius:20px; font-size:14px; z-index:100; max-width:85vw; text-align:center; box-shadow:0 4px 14px #00000088; }
.toast.err { background:var(--danger); }
.toast.ok { background:#1a7f37; }
.progress { position:fixed; top:calc(70px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 16px; z-index:90; font-size:13px; display:flex; align-items:center; gap:10px; box-shadow:0 4px 14px #00000088; }
.spinner { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent2); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.hidden { display:none !important; }
.login-body { align-items:center; justify-content:center; padding:20px; }
.login-card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 24px; width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px; }
.login-logo { font-size:30px; font-weight:800; text-align:center; color:#fff; letter-spacing:3px; }
.login-sub { text-align:center; color:var(--accent2); font-size:13px; margin-bottom:8px; }
.login-error { background:#f14c4c22; border:1px solid var(--danger); color:#ff8a8a; border-radius:8px; padding:9px; font-size:13px; text-align:center; }
.login-input { background:var(--panel2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:16px; padding:12px; outline:none; text-align:center; }
.login-input:focus { border-color:var(--accent); }
.login-btn { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:12px; font-size:16px; font-weight:600; }
.login-btn:active { background:var(--accent2); }