@font-face{font-family:Italianno;src:url('/static/fonts/Italianno-Regular.ttf')}
#app-header,#app-header *,#browser,#browser *,#login,#login *{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:#404040}
#app-header,#browser,#login{color:#eee;font:12pt Arial,'Malgun Gothic',sans-serif}
body{background-image:url('/static/images/texture.png')}
#app-header{height:44px;display:flex;align-items:center;padding:0 20px;background:#474747;
box-shadow:0 1px 4px #0005;position:relative;z-index:10}
.brand{font:26px Italianno,cursive;color:inherit;text-decoration:none}
#logout{margin-left:auto;flex-shrink:0;white-space:nowrap;font:22px/28px Italianno,cursive}
#app-header button,#login button,#back{border:1px solid #777;border-radius:3px;background:#555;
color:#eee;cursor:pointer;padding:2px 10px}
#browser{width:100%;padding:18px 20px 36px}
#path-bar{display:flex;align-items:center;gap:12px;min-height:36px;margin-bottom:12px}
#back{font:24px Arial;padding:0 10px;flex:none}
#back[hidden]{display:block!important;visibility:hidden}
#breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:0;line-height:1.8}
#breadcrumbs a{color:#b8d4f2;text-decoration:none}
#breadcrumbs span{overflow-wrap:anywhere}
#breadcrumbs .separator{padding:0 9px;color:#aaa}
#listing{padding:0 4px}
#count{padding:2px 0 10px;color:#bbb;font-size:10pt}
#entries{list-style:none;margin:0;padding:0}
#entries .folder-tree{list-style:none;position:relative;margin:0 0 0 7px;padding:0}
#entries li{position:relative;padding-left:20px}
#entries li::before{content:'';position:absolute;left:6px;top:0;bottom:0;border-left:1px solid #777}
#entries li::after{content:'';position:absolute;left:6px;top:13px;width:14px;border-top:1px solid #777}
#entries li:last-child::before{bottom:auto;height:13px}
#entries>li:first-child::before{top:13px}
#entries>li:only-child::before{display:none}
#entries .folder-tree::before{content:'';position:absolute;left:6px;top:-13px;height:13px;
border-left:1px solid #777}
#entries a{display:flex;align-items:center;gap:8px;min-height:26px;line-height:20px;padding:3px 6px;
color:#eee;text-decoration:none}
#entries a:hover{background:#ffffff0d;border-radius:3px}
#entries .icon{color:#b8d4f2;flex:none;width:14px;text-align:center}
#entries .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#entries .chevron{margin-left:auto;color:#aaa}
#message{margin:0;padding:16px 18px;color:#ccc}
#message:empty{display:none}
#login{min-height:calc(100vh - 44px);display:grid;place-items:center;padding:20px}
#login-form{width:300px;max-width:100%;padding:24px 32px;background:#303030;
border:1px solid #666;border-radius:3px;display:flex;flex-direction:column;gap:10px}
#login h1{font:32px Italianno,cursive;text-align:center;margin:0 0 10px}
#login input{width:100%;height:36px;background:#333;color:#eee;border:1px solid #888;
border-radius:3px;padding:0 10px;font:16px Arial}
#login button{height:36px;font:24px Italianno,cursive}
#login-error{margin:0;color:#fbb;font-size:13px}
body.pdf-open #app-header,body.pdf-open #browser{display:none}
#pdf-screen{position:fixed;inset:0}
#pdf-screen #outerContainer{position:absolute;inset:0}
@media print{#app-header,#browser,#login{display:none!important}
#pdf-screen{position:static}body{background:none}}
@media(max-width:600px){#app-header{padding:0 12px}#browser{padding:12px 10px 24px}}