/* Palette carried over from the original site: GitHub-dark tiers with the
   vault's own electric accent. Four surface tones, not two, which is what
   gives the explorer its depth. */
:root{
  --bg:#0e1117; --header:#010409; --panel:#161b22; --surface:#1c2128;
  --border:#30363d; --border-hi:#484f58;
  --accent:#00c8ff; --accent-dim:#0a3a4f;
  --text:#c9d1d9; --muted:#8b949e;
  --public:#3fb950; --internal:#d29922; --private:#a371f7; --danger:#f85149;
  --mono:ui-monospace,'SFMono-Regular','Consolas','Liberation Mono',monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:14px/1.55 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,select,input{font:inherit;color:var(--text)}
button,select{background:var(--surface);border:1px solid var(--border);
  border-radius:5px;padding:2px 7px;cursor:pointer;font-size:.82rem}
button:hover,select:hover{border-color:var(--border-hi)}
button.danger:hover{border-color:var(--danger);color:var(--danger)}
input[type=text],input[type=password]{background:var(--bg);
  border:1px solid var(--border);border-radius:5px;padding:5px 8px}
input:focus,button:focus-visible,select:focus,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}

.bar{display:flex;align-items:center;gap:16px;padding:9px 16px;
  background:var(--header);border-bottom:1px solid var(--border);flex:0 0 auto}
.brand{font-weight:700;letter-spacing:.1em;color:var(--accent)}
.bar .who{margin-left:auto;color:var(--muted);font-size:.82rem}
.bar .who em{font-style:normal;color:var(--accent)}
.bar .out{color:var(--muted);font-size:.82rem}

main{flex:1 1 auto;min-height:0}
#container{display:grid;grid-template-columns:320px minmax(0,1fr);height:100%}
@media (max-width:820px){#container{grid-template-columns:1fr;height:auto}}

#sidebar{background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;min-height:0}
#sidebar-header{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--border);background:var(--header)}
#sidebar-header h4{margin:0;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted)}
#sidebar-header .mk{margin-left:auto;display:flex;gap:5px}
#sidebar-header .mk input{width:118px;font-size:.8rem;padding:3px 7px}

ul.tree{list-style:none;margin:0;padding:0}
#sidebar>ul.tree{overflow:auto;padding:6px 0 20px;flex:1 1 auto}
ul.tree ul.tree{padding-left:14px;border-left:1px solid var(--border);
  margin-left:11px}
.node .row{display:flex;align-items:center;gap:6px;padding:3px 10px;
  border-radius:4px}
.node .row:hover{background:var(--surface)}
.node.sel>.row{background:var(--accent-dim)}
.node .name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.node.folder .name{color:var(--text);font-weight:600}
.node.folder.own .name{color:var(--private)}
.node.folder.own .name em{font-style:normal;font-size:.68rem;color:var(--muted);
  margin-left:6px;text-transform:uppercase;letter-spacing:.07em}
.node .size{color:var(--muted);font-family:var(--mono);font-size:.72rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.node .acts{display:none;gap:4px;align-items:center;white-space:nowrap}
.node .row:hover .acts,.node.sel .acts{display:flex}
.node .acts select{font-size:.7rem;padding:1px 3px}
.node .acts a{font-size:.78rem;color:var(--muted)}
.node .acts a:hover{color:var(--accent)}

/* Type tints: a wash on the name, not the whole row, so the tree still reads
   as one surface. */
.k-doc .name{color:#9ad1ff}
.k-code .name{color:#a5d6a7}
.k-data .name{color:#ffcc80}
.k-image .name{color:#f8bbd0}
.k-media .name{color:#ce93d8}
.k-pack .name{color:#bcaaa4}

.twist{background:none;border:none;padding:0;width:14px;color:var(--muted);
  transition:transform .12s;font-size:.7rem}
.node.open>.row .twist{transform:rotate(90deg)}
.kids{display:none}
.node.open>.kids{display:block}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dot.v-public{background:var(--public)}
.dot.v-internal{background:var(--internal)}
.dot.v-private{background:var(--private)}
ul.tree .empty{color:var(--muted);padding:4px 14px;font-size:.8rem}

#main-wrap{display:flex;flex-direction:column;min-width:0;min-height:0;
  position:relative}
#pane{flex:1 1 auto;overflow:auto;padding:16px 20px}
#pane.dragging{outline:3px dashed var(--accent);outline-offset:-10px;
  background:var(--accent-dim)}
.pane-head{display:flex;align-items:baseline;gap:14px;
  border-bottom:1px solid var(--border);padding-bottom:9px;margin-bottom:14px}
.pane-head h3{margin:0;font-size:1rem;word-break:break-all}
.pane-head .dl{margin-left:auto;font-size:.82rem;white-space:nowrap}
#placeholder{height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;color:var(--muted)}
.drop-hint{font-size:1.05rem;color:var(--text)}
.note{color:var(--muted)}
.note.error,.error{color:var(--danger)}
#pane pre{background:var(--panel);border:1px solid var(--border);
  border-radius:6px;padding:12px;overflow-x:auto;font-size:.8rem;
  position:relative}
#pane img{max-width:100%;height:auto;border-radius:6px}
#pane table{border-collapse:collapse}
#pane td,#pane th{border:1px solid var(--border);padding:5px 9px}
.copy{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .12s}
#pane pre:hover .copy{opacity:1}

.linkbox{display:flex;gap:7px;max-width:640px}
.linkbox input{flex:1 1 auto;font-family:var(--mono);font-size:.8rem}

#progress{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--surface)}
#bar{height:100%;width:0;background:var(--accent);transition:width .15s}

.login{max-width:380px;margin:14vh auto;text-align:center;
  display:flex;flex-direction:column;gap:14px}
.login h1{margin:0;font-size:1.9rem;letter-spacing:.14em;color:var(--accent)}
.login .sub,.login .hint{color:var(--muted);font-size:.85rem;margin:0}
.login form{display:flex;flex-direction:column;gap:10px}
.login input{text-align:center}
.login button{padding:8px}
code{font-family:var(--mono);font-size:.85em}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--accent);padding:8px 14px;
  border-radius:6px;font-size:.84rem;opacity:0;pointer-events:none;
  transition:opacity .18s;max-width:80vw;word-break:break-all;z-index:20}
#toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}