:root{--primary:#c33;--text:#fff;--muted:#888;--background:#202020;--background-alt:#343434;--overlay:#000000b6;--success:#24d124bb;--error:#d12424bb;--radius-sm:.2em;--radius-lg:.4em;--gap-sm:.2em;--gap-md:.5em;--gap-lg:1rem;--content-width:700px}body,html{width:100%;height:100%}body{padding:var(--gap-lg);box-sizing:border-box;background-color:var(--background-alt);color:var(--text);flex-direction:column;align-items:center;margin:0;font-family:sans-serif;display:flex;position:relative;overflow:hidden}main{row-gap:var(--gap-lg);flex-direction:column;flex-grow:1;width:100%;max-width:900px;display:flex;overflow:hidden}input[type=file]{display:none}input,textarea{background-color:var(--background);border:1px solid var(--text);border-radius:var(--radius-sm);color:var(--text);padding:var(--radius-sm) calc(var(--radius-sm) * 1.5);box-sizing:border-box;outline:none;flex-grow:1;font-size:1rem}:is(input,textarea):hover,:is(input,textarea):focus-within{border-color:var(--primary)}button,.btn{background-color:var(--background);color:var(--text);border-radius:var(--radius-sm);padding:var(--radius-lg);box-sizing:border-box;cursor:pointer;text-align:center;border:none;font-size:1rem}:is(button,.btn):hover{background-color:var(--primary)}:is(button,.btn):disabled{color:gray;background-color:var(--background)!important}.file-list-container{row-gap:var(--gap-md);flex-direction:column;flex-grow:1;display:flex;overflow:hidden}ul.file-list{row-gap:var(--gap-sm);box-sizing:border-box;flex-direction:column;flex-grow:1;margin:0;padding:0;list-style-type:none;display:flex;overflow:hidden auto}ul.file-list>li{padding:var(--gap-sm);justify-content:center;align-items:center;column-gap:var(--gap-md);background-color:var(--background);border-radius:var(--radius-sm);border:1px solid #0000;grid-template:"icon name rem""icon size rem"/auto 1fr auto;margin:0;display:grid}ul.file-list>li:hover{border-color:var(--primary)}ul.file-list>li .file-icon{grid-area:icon;font-size:1.25em}ul.file-list>li .file-name{text-align:start;text-overflow:ellipsis;text-wrap-mode:nowrap;grid-area:name;align-self:stretch;overflow:hidden}ul.file-list>li .file-size{text-align:start;color:var(--muted);-webkit-user-select:none;user-select:none;grid-area:size;align-self:stretch;font-size:.7em}ul.file-list>li .file-remove{grid-area:rem;justify-content:center;align-items:center;display:flex}ul.file-list>li .file-remove:hover{color:var(--primary)}.loader{--color-1:var(--text);--color-2:var(--primary);width:100%;height:calc(var(--gap-sm) * .5);background:var(--color-1);transform-origin:50%;box-sizing:border-box;animation:1.2s ease-in-out infinite stretch;display:block}@keyframes stretch{0%,to{background:var(--color-2);transform:scaleX(.1)}50%{background:var(--color-1);transform:scaleX(1)}}.blocker{z-index:9999;background-color:var(--overlay);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.blocker .blocker-content{text-align:center;font-size:1.7em}.blocker .blocker-hint{color:var(--muted)}.submit-container{row-gap:var(--gap-sm);flex-direction:column;justify-content:stretch;display:flex}.submit-container .password-container{column-gap:var(--gap-sm);flex-direction:row;display:flex}.submit-container .password-container>input{flex-grow:1}
