:root{--b: #000;--color: #fff;--color-1: #f5f5f5;--color-2: #d3d3d3;--color-4: #eaeaea;--color-5:#20546e}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}img{object-fit:cover}body{margin:0;background:var(--color-1);background-size:100px;background-image:repeating-linear-gradient(to right,#e9e9e9,#e9e9e9 1px,var(--color-1) 1px,var(--color-1))}:focus{outline:none}button{background:none;padding:5px 9px;border:none;cursor:pointer}body,button,input,textarea{font-family:Open Sans,serif;color:var(--b);font-weight:400;font-size:12px}main{padding:0 10px}.surface{background:var(--color);padding:10px;border-radius:10px;box-shadow:0 0 1px 1px var(--color-2);display:flex;flex-direction:column;gap:20px;max-width:600px;margin:20px auto;width:100%}.wb{background:var(--color);box-shadow:0 0 1px 1px var(--color-4);border-radius:5px}.drop-zone{border:1px dotted var(--color-2);padding:15px;cursor:pointer;clear:both;background:var(--color-1);border-radius:5px;display:flex;flex-direction:column;gap:10px;align-items:center}.drag-active{background:var(--color-4)}.drop-zone p{margin:0;font-size:16px}.upload-item p{margin:0;font-size:14px}.upload-item{margin-bottom:10px;padding:10px}.type,.upload-item{box-shadow:0 0 1px 1px var(--color-4);border-radius:5px}.type{background:var(--color-1);padding:5px;float:left;margin-right:10px}.progress-bar{width:100%;background:#eee;height:7px;border-radius:4px;overflow:hidden;margin-top:5px}.progress-fill{height:100%;background:var(--b);transition:width .3s ease}.lc{display:grid;grid-template-columns:auto 1fr auto;align-items:anchor-center;background:var(--color-1);border-radius:5px;overflow:hidden;justify-items:start;column-gap:10px}.url{color:var(--color-5);text-decoration:none;grid-area:1/2}.url:hover{color:var(--color-5)}.copy{box-shadow:0 1px 5px 0 var(--color-2);border-radius:0;grid-area:1/3}.name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.announcement>div{background-color:#fff;color:#030303;padding:10px;border-radius:5px;display:flex;justify-content:space-between;align-items:center;border:1px solid #8380d7;margin:5px}.close{cursor:pointer;background:none;border:none;color:#ff0018;align-self:flex-start}.close:hover{opacity:.5}.announcement{position:fixed;bottom:0;z-index:3;left:50%;transform:translate(-50%);width:100%;max-width:600px;animation:show-hide 20s ease forwards}@keyframes show-hide{0%{transform:translate(-50%) translateY(300%);opacity:0}10%{transform:translate(-50%) translateY(0);opacity:1}80%{transform:translate(-50%) translateY(0);opacity:1}to{transform:translate(-50%) translateY(300%);opacity:0}}.delete{cursor:pointer;color:red;grid-area:1/1;border-right:1px solid var(--color)}.delete:hover{opacity:.7}.error{color:#a20b0b;font-weight:700;margin-top:10px}.message{position:fixed;top:20px;right:20px;background:#323232;color:#fff;padding:10px 20px;border-radius:4px;box-shadow:0 2px 8px #0000004d;font-weight:500;z-index:1000}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideInOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.slideInRight{animation:slideInRight .3s forwards}.slideInOutRight{animation:slideInOutRight .3s forwards}.announcement:before{content:"";background:url(/assets/img/pik.png);position:absolute;--size: 80px;width:var(--size);height:var(--size);background-size:cover;right:0;top:-69px}