:root{--bg:#eef5fd;--panel:#f7fbff;--panel2:#ffffff;--text:#1d3350;--muted:#55697f;--border:#cfe0f3;--accent:#4DA3FF;--accent-strong:#2F86E0;--accent-text:#08213d;--link:#1d6cc0;--hover:#e3f0ff;--active:#cde4ff;--danger:#c0392b;--err-bg:#fdecea;--shadow:0 1px 4px #1d4f8a1f;--code-bg:#fff;--toast:#1d3a5f;color-scheme:light}
html[data-theme="dark"]{--bg:#0e1828;--panel:#14223a;--panel2:#1a2b47;--text:#e2edfb;--muted:#a0b5d0;--border:#2b4366;--accent:#6CB4F5;--accent-strong:#8cc6ff;--accent-text:#06172b;--link:#8cc6ff;--hover:#1f3658;--active:#274d7c;--danger:#ff8a7a;--err-bg:#3a2527;--shadow:0 1px 4px #0008;--code-bg:#111e33;--toast:#274d7c;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.45 "Microsoft YaHei","PingFang SC","Noto Sans CJK SC","Segoe UI",sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
button{border:1px solid var(--border);background:var(--panel2);border-radius:6px;padding:5px 11px;cursor:pointer;white-space:nowrap}
button:hover:not(:disabled){background:var(--hover)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
button.primary{font-weight:600}
button.primary:hover:not(:disabled){filter:brightness(1.06);background:var(--accent)}
button.danger{color:var(--danger)}
button.ghost{border-color:transparent;background:transparent}
button.icon{padding:4px 8px}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{border:1px solid var(--border);background:var(--panel2);border-radius:6px;padding:6px 9px;outline:none}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:0}
a{color:var(--link)}
.boot{padding:60px;text-align:center;color:var(--muted)}
.topbar{height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--border);box-shadow:inset 0 3px 0 var(--accent)}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;text-decoration:none;color:inherit}
.brand img{width:28px;height:28px}
.brand small{font-weight:400;color:var(--muted);font-size:12px}
.spacer{flex:1}
.muted{color:var(--muted)}
.user{color:var(--muted);font-size:13px;max-width:240px;overflow:hidden;text-overflow:ellipsis}
/* login */
.login{max-width:380px;margin:9vh auto;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:28px;box-shadow:var(--shadow)}
.login h1{font-size:20px;margin:0 0 4px}
.login form{display:grid;gap:12px;margin-top:18px}
.login label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.login .err{color:var(--danger);min-height:1.2em;font-size:13px}
.login .alt{margin-top:16px;font-size:13px;color:var(--muted);line-height:1.7}
/* library */
.library{max-width:1180px;margin:0 auto;padding:20px}
.lib-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.lib-head h2{margin:0 12px 0 0;font-size:20px}
.lib-head input[type=search]{width:240px}
.usage{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.usage .bar{width:120px;height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.usage .bar i{display:block;height:100%;background:var(--accent)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px 14px 10px;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);position:relative}
.card:hover{border-color:var(--accent)}
.card h3{margin:0;font-size:15px;word-break:break-all;padding-right:30px}
.card .meta{font-size:12px;color:var(--muted)}
.card .more{position:absolute;right:8px;top:8px}
.card .actions{display:flex;gap:6px;margin-top:6px}
.empty{padding:50px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:10px}
/* editor */
.editor-view{display:flex;flex-direction:column;height:100vh}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--border)}
.toolbar .pname{font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 6px}
.toolbar label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
.toolbar select{padding:4px 6px;max-width:200px}
.toolbar .sep{width:1px;height:22px;background:var(--border);margin:0 4px}
.status{font-size:12px;color:var(--muted);min-width:80px}
.status.err{color:var(--danger)}
.workspace{flex:1;display:flex;min-height:0}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel)}
.tree-pane{width:230px;border-right:1px solid var(--border)}
.code-pane{flex:1 1 50%}
.preview-pane{flex:1 1 45%;border-left:1px solid var(--border);background:var(--bg)}
.resizer{width:5px;cursor:col-resize;background:transparent;flex:none;margin:0 -2px;z-index:2}
.resizer:hover,.resizer.drag{background:var(--accent)}
.pane-head{display:flex;align-items:center;gap:4px;padding:5px 8px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted);min-height:34px}
.pane-head b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree{flex:1;overflow:auto;padding:4px 0;user-select:none}
.tree.dragover{outline:2px dashed var(--accent);outline-offset:-4px}
.node{display:flex;align-items:center;gap:4px;padding:3px 8px;cursor:pointer;white-space:nowrap;font-size:13px}
.node:hover{background:var(--hover)}
.node.active{background:var(--active);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.node .ico{width:16px;text-align:center;flex:none;opacity:.8}
.node .name{overflow:hidden;text-overflow:ellipsis;flex:1}
.node .badge{font-size:10px;color:var(--link);border:1px solid var(--link);border-radius:3px;padding:0 3px}
.node .dot{color:var(--link)}
.node .menu-btn{visibility:hidden;border:0;background:transparent;padding:0 4px}
.node:hover .menu-btn{visibility:visible}
.codehost{flex:1;min-height:0;position:relative}
.codehost .cm-editor{height:100%;background:var(--code-bg)}
.codehost .cm-scroller{font-family:"Cascadia Mono",Consolas,"JetBrains Mono","Noto Sans Mono CJK SC",monospace;font-size:14px;line-height:1.55}
.filepreview{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:16px;background:var(--bg)}
.filepreview img{max-width:100%;box-shadow:var(--shadow);background:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%) 0 0/16px 16px}
.filepreview.zoomed img{max-width:none}
.placeholder{margin:auto;color:var(--muted);text-align:center;padding:30px}
.banner{padding:6px 10px;background:var(--err-bg);border-bottom:1px solid var(--border);font-size:13px;display:flex;gap:8px;align-items:center}
.preview-frame{flex:1;border:0;width:100%;background:var(--bg)}
.bottom{border-top:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;height:210px;min-height:0}
.bottom.hidden{display:none}
.bottom .tabs{display:flex;gap:2px;align-items:center;padding:3px 8px;border-bottom:1px solid var(--border)}
.bottom .tabs button{border:0;background:transparent;font-size:12px;padding:3px 10px}
.bottom .tabs button.on{background:var(--active);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.bottom .body{flex:1;overflow:auto;min-height:0}
.log{margin:0;padding:8px 10px;font:12px/1.4 Consolas,"Cascadia Mono",monospace;white-space:pre-wrap;word-break:break-all}
.errors{list-style:none;margin:0;padding:0}
.errors li{padding:5px 10px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px}
.errors li:hover{background:var(--hover)}
.errors li code{color:var(--danger);margin-right:8px}
/* dialogs & menus */
dialog{border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);padding:0;box-shadow:0 10px 40px #0005;max-width:min(92vw,900px)}
dialog::backdrop{background:#0006}
.dlg{padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:340px}
.dlg h3{margin:0;font-size:16px}
.dlg .row{display:flex;gap:8px;align-items:center}
.dlg label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.dlg .btns{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.dlg .msg{white-space:pre-wrap;word-break:break-word}
.menu{position:fixed;z-index:1000;background:var(--panel2);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 24px #0004;padding:4px;min-width:160px}
.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:6px 12px;border-radius:5px}
.menu button:hover{background:var(--hover)}
.menu hr{border:0;border-top:1px solid var(--border);margin:4px 0}
#toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:grid;gap:6px;z-index:2000;pointer-events:none}
.toast{background:var(--toast);color:#fff;padding:8px 14px;border-radius:6px;box-shadow:var(--shadow);font-size:13px;max-width:80vw;white-space:pre-wrap}
.toast.err{background:#8e2b20}
/* history */
.hist{display:grid;grid-template-columns:300px 1fr;gap:12px;height:62vh;width:min(86vw,880px)}
.hist ul{list-style:none;margin:0;padding:0;overflow:auto;border:1px solid var(--border);border-radius:6px}
.hist li{padding:6px 9px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px}
.hist li:hover{background:var(--hover)}.hist li.on{background:var(--active)}
.hist li .tag{color:var(--link);font-weight:600}
.hist pre{margin:0;overflow:auto;border:1px solid var(--border);border-radius:6px;padding:8px;font:12px/1.45 Consolas,monospace;background:var(--code-bg);white-space:pre-wrap}
.tabsel{display:flex;gap:4px}
.tabsel button.on{background:var(--active);border-color:var(--accent);font-weight:600}
table.snaps{width:100%;border-collapse:collapse;font-size:13px}
table.snaps td,table.snaps th{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left}
.snapwrap{max-height:56vh;overflow:auto;width:min(86vw,820px)}
.progress{height:3px;background:linear-gradient(90deg,var(--accent) 0 30%,transparent 30%);background-size:200% 100%;animation:prog 1s linear infinite}
@keyframes prog{from{background-position:100% 0}to{background-position:-100% 0}}
@media (max-width:860px){.tree-pane{width:170px}.preview-pane{display:none}.preview-pane.show{display:flex;position:fixed;inset:90px 0 0 0;z-index:5}}
.login .logo{display:block;width:56px;height:56px;margin:0 auto 12px}
.login h1{text-align:center}.login>.muted{text-align:center}
.card{border-top:3px solid var(--accent)}
.toolbar{box-shadow:inset 0 3px 0 var(--accent)}
.pane-head{background:var(--panel)}
.code-pane .pane-head{background:var(--hover)}
.live{font-size:12px;white-space:nowrap;padding:2px 8px;border-radius:10px;cursor:default}
.live.on{color:var(--link);background:var(--hover)}
.live.down{color:var(--muted);background:transparent;border:1px dashed var(--border)}
.dsync{font-size:12px;padding:3px 10px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);white-space:nowrap}
.dsync.synced{color:var(--link);background:var(--hover);border-color:transparent}
.dsync.syncing{color:var(--link);border-style:dashed}
.dsync.offline,.dsync.signed-out,.dsync.paused{color:var(--muted)}
.dsync.conflict,.dsync.error{color:var(--danger);border-color:var(--danger)}
.deskpanel{display:grid;gap:14px;width:min(80vw,620px)}
.dsec{display:grid;gap:6px;border-top:1px solid var(--border);padding-top:10px}
.dsec:first-child{border-top:0;padding-top:0}
.dsec h4{margin:0;font-size:14px}
.dsec .row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dsec .err{color:var(--danger);font-size:13px;min-height:1em}
.dsec code{word-break:break-all}
.conflicts{margin:0;padding-left:18px;max-height:160px;overflow:auto;font-size:13px}
.synctag.on{color:var(--link)}.synctag.off{color:var(--danger)}
.login .sso{width:100%;margin-top:18px;padding:10px 14px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-text);font-weight:600;cursor:pointer}
.login .sso:hover{filter:brightness(1.05)}
.login .or{margin-top:14px;font-size:12px;color:var(--muted);text-align:center}
.login .sso + .or + form button.primary{background:transparent;color:var(--link);border:1px solid var(--accent)}