:root{--bg:#fafafa;--card:#fff;--accent:#0366d6;--danger:#a00;--muted:#666}
html,body{height:100%}
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); margin:16px; color:#111; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; max-width:960px; margin-left:auto; margin-right:auto; }
h2{font-size:1.25rem;margin:0}
.hint{color:var(--muted);font-size:0.9rem}

/* Container / Grid */
.list { display:flex; flex-direction:column; gap:12px; max-width:960px; margin:0 auto; padding-bottom:32px; }
.file { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:12px; padding:12px; background:var(--card); border-radius:10px; box-shadow:0 1px 0 rgba(0,0,0,0.04); }
.file-left { display:flex; flex-direction:column; gap:6px; min-width:0; }
.file-link { color:var(--accent); text-decoration:none; font-weight:600; font-size:1rem; display:inline-block; max-width:calc(100vw - 220px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-meta { color:var(--muted); font-size:0.86rem; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.controls { display:flex; gap:8px; align-items:center; }
.btn { padding:8px 12px; border-radius:10px; border:1px solid rgba(0,0,0,0.06); background:#fff; cursor:pointer; font-weight:600; font-size:0.95rem; }
.btn:active{transform:translateY(1px)}
.btn-danger { color:var(--danger); border-color:rgba(160,0,0,0.12); }
.btn-ghost { background:transparent; border:1px solid rgba(0,0,0,0.03); }

.msg { margin:8px auto; padding:10px; background:#eef; border-radius:8px; max-width:960px; }

.upload, .upload-form { margin-top:14px; padding:12px; background:var(--card); border-radius:10px; max-width:960px; margin-left:auto; margin-right:auto; display:flex; gap:8px; align-items:center; }
.upload input[type="file"] { display:block; }
input[type="password"], .rename-input, input[type="text"] { padding:8px 10px; border-radius:8px; border:1px solid #ddd; font-size:0.95rem; }

/* Rename form inline on desktop, stacked on small screens */
.rename-form { display:none; gap:8px; align-items:center; margin-top:8px; }
.rename-form.show { display:flex; }
.rename-input { min-width:200px; max-width:60vw; }

/* Mobile adjustments */
@media (max-width:720px) {
  .site-header { flex-direction:column; align-items:flex-start; gap:8px; }
  .file { flex-direction:column; align-items:stretch; }
  .file-link { max-width:100%; white-space:normal; overflow:visible; text-overflow:unset; }
  .controls { justify-content:flex-end; margin-top:6px; }
  .rename-form { flex-direction:column; align-items:stretch; gap:8px; }
  .upload, .upload-form { flex-direction:column; align-items:stretch; }
  .btn { width:100%; padding:12px; border-radius:10px; }
  .btn.inline { width:auto; padding:8px 12px; }
  .file-meta { font-size:0.85rem; }
}

/* Accessibility focus */
.btn:focus, a:focus { outline:3px solid rgba(3,102,214,0.15); outline-offset:3px; }

/* small utility */
.small { font-size:0.9rem; color:var(--muted) }