:root{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",Meiryo,sans-serif;
  color:#f5f5f5;
  background:#090909;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
  radial-gradient(circle at 50% 10%,rgba(255,255,255,.035),transparent 35%),
  #090909;color:#f5f5f5}
body{min-height:100vh}
.wrap{max-width:1060px;margin:0 auto;padding:28px 20px 48px}
.narrow{max-width:720px}

.site-header,header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid #262626
}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{display:block;width:min(340px,44vw);height:auto;max-height:82px;object-fit:contain;object-position:left center}
.header-actions{display:flex;gap:10px;align-items:center}

.hero{text-align:center;margin:28px 0 24px}
.hero h1{font-size:30px;letter-spacing:.04em;margin:0 0 6px}
.hero p{margin:0;color:#a9a9a9;font-size:15px}

h1{margin:0;font-size:30px;letter-spacing:.04em}
h2{margin-top:0}
.sub{margin:4px 0 0;color:#9a9a9a}

.card{
  background:linear-gradient(180deg,#1a1a1a,#151515);
  border:1px solid #343434;border-radius:16px;padding:28px;margin-bottom:18px;
  box-shadow:0 16px 40px rgba(0,0,0,.35)
}
.upload-card{padding:30px}
.login-card,.download-card{padding:32px}

.drop{
  border:1.5px dashed #5a5a5a;border-radius:14px;min-height:285px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;cursor:pointer;transition:.18s;background:rgba(255,255,255,.01)
}
.drop:hover,.drop.over{border-color:#aaa;background:rgba(255,255,255,.035)}
.drop-icon{font-size:50px;font-weight:200;line-height:1}
.drop strong{font-size:20px}
.drop span,.muted{color:#9a9a9a;font-size:14px}
.limit-note{margin-top:6px;color:#777!important}

.options{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
label{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:14px}

input,select{
  width:100%;padding:12px 13px;border:1px solid #444;border-radius:9px;
  font:inherit;background:#171717;color:#fff;outline:none
}
input:focus,select:focus{border-color:#777}

button,.button{
  display:inline-block;border:1px solid #eee;border-radius:8px;background:#f2f2f2;
  color:#111;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none
}
button:hover,.button:hover{filter:brightness(.92)}
.secondary{background:#171717;color:#fff;border-color:#666}
.logout-button{background:#171717;color:#ff6464;border-color:#b43737}
.link{color:#ddd}

.upload-row,.recent-row{border-top:1px solid #2f2f2f;padding:16px 0}
.upload-row:first-child{margin-top:18px}
.file-top,.section-head,.recent-row{display:flex;justify-content:space-between;gap:14px;align-items:center}
.bar{height:8px;background:#303030;border-radius:99px;overflow:hidden;margin:10px 0}
.bar>div{height:100%;width:0;background:#f1f1f1;transition:.15s}
.status{font-size:13px;color:#aaa}
.status a{color:#fff}
.copy{margin-left:8px;padding:6px 9px;font-size:12px}

.recent-actions{display:flex;align-items:center;gap:8px}
.recent-actions a{color:#fff}
.bigsize{font-size:28px;font-weight:700}
.error{padding:12px;border-radius:10px;background:#3a1118;color:#ffb7c1;margin:14px 0}
.failed .bar>div{background:#888}

.danger{background:#171717;color:#ff7070;border:1px solid #7e2f38}

footer{
  text-align:center;color:#777;font-size:12px;padding:26px 0 8px
}

@media(max-width:700px){
  .wrap{padding:18px 14px 36px}
  .brand img{width:220px;max-height:58px}
  .site-header,header{align-items:flex-start;gap:12px}
  .header-actions{flex-direction:column;align-items:stretch}
  .options{grid-template-columns:1fr}
  .recent-row{align-items:flex-start;flex-direction:column}
  .login-card form,.download-card form{flex-direction:column}
  .card{padding:18px}
  .drop{min-height:220px;text-align:center;padding:18px}
  .drop strong{font-size:17px}
}

/* Logo display size only - original image is not modified */
.brand img {
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
  max-height: none !important;
}
@media(max-width:700px){
  .brand img {
    width: 150px !important;
    max-width: 150px !important;
  }
}