:root{--bg:#fff;--fg:#1f1f1f;--mut:#5f6368;--line:#e0e3e7;--hover:#f1f3f4;--acc:#0b57d0;--accbg:#d3e3fd;--side:#f8fafd}
@media(prefers-color-scheme:dark){:root{--bg:#131314;--fg:#e3e3e3;--mut:#9aa0a6;--line:#37393b;--hover:#1f2021;--acc:#a8c7fa;--accbg:#0842a0;--side:#1b1b1c}}
*{box-sizing:border-box}body{margin:0;font:14px/1.4 system-ui,sans-serif;background:var(--bg);color:var(--fg)}
button,input,select,textarea{font:inherit;color:inherit}
button{border:1px solid var(--line);background:var(--bg);border-radius:18px;padding:6px 14px;cursor:pointer}
button:hover{background:var(--hover)}button.pri{background:var(--acc);color:var(--bg);border-color:var(--acc)}button.ic{border:0;padding:4px 7px;border-radius:50%}
input,select,textarea{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:7px 10px}
.app{display:grid;grid-template-columns:220px 1fr;height:100vh}
.side{background:var(--side);padding:12px;display:flex;flex-direction:column;gap:4px;overflow:auto}
.side h1{font-size:20px;margin:6px 8px 14px}.side a{padding:9px 14px;border-radius:20px;cursor:pointer}
.side a:hover{background:var(--hover)}.side a.on{background:var(--accbg);font-weight:600}.side .sp{flex:1}
.main{display:flex;flex-direction:column;min-width:0}
.bar{display:flex;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.crumbs{flex:1;font-size:16px;min-width:140px}.crumbs span{cursor:pointer;padding:2px 4px;border-radius:6px}.crumbs span:hover{background:var(--hover)}
.content{flex:1;overflow:auto;padding:8px 16px}.content.drag{outline:3px dashed var(--acc);outline-offset:-8px}
table{width:100%;border-collapse:collapse}th{text-align:left;color:var(--mut);font-weight:500;padding:8px;border-bottom:1px solid var(--line)}
td{padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}tr.row:hover{background:var(--hover)}
td.n{width:100%;max-width:0;overflow:hidden;text-overflow:ellipsis;cursor:pointer}td.a{text-align:right}
.card{max-width:520px;margin:24px auto;display:grid;gap:10px}.card.wide{max-width:900px}
.login{height:100vh;display:grid;place-items:center}.login form{width:320px;display:grid;gap:10px;padding:28px;border:1px solid var(--line);border-radius:16px}
.err{color:#d93025}.mut{color:var(--mut)}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#323232;color:#fff;padding:10px 18px;border-radius:8px;z-index:9}
.modal{position:fixed;inset:0;background:#0008;display:grid;place-items:center;z-index:5}.modal>div{background:var(--bg);padding:20px;border-radius:14px;width:min(460px,92vw);display:grid;gap:10px}
.prog{height:4px;background:var(--line)}.prog i{display:block;height:100%;background:var(--acc);width:0}
textarea.code{width:100%;min-height:220px;font:13px/1.4 ui-monospace,monospace}
body.share .card{margin-top:40px}
@media(max-width:700px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.side{flex-direction:row;overflow-x:auto;padding:6px}.side h1,.side .sp{display:none}td.m{display:none}}