.nav{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.nav a{color:#0969da;text-decoration:none;font-size:14px;white-space:nowrap}
.nav a:hover{text-decoration:underline}
.nav .spacer{flex:1}
.nav .logout{color:#cf222e;cursor:pointer;font-size:14px}

h1{color:#0969da;font-size:20px;margin-bottom:10px}

.bread-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:nowrap}
.breadcrumb{color:#656d76;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.breadcrumb a{color:#0969da;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.bread-bar .target-label{color:#656d76;font-size:13px;white-space:nowrap}
.bread-bar select{background:#ffffff;border:1px solid #d0d7de;border-radius:4px;color:#24292f;padding:6px 10px;font-size:13px;min-width:140px}

.upload-zone{background:#f6f8fa;border:2px dashed #d0d7de;border-radius:8px;padding:24px;margin-bottom:14px;text-align:center}
.upload-zone:hover{border-color:#0969da}
.upload-zone p{color:#656d76;font-size:14px;cursor:pointer}
.upload-zone input[type=file]{display:none}

.file-list{background:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;overflow-x:auto}
.file-row{padding:10px 14px;border-bottom:1px solid #d0d7de}
.file-row:last-child{border-bottom:none}
.file-row:hover{background:#eaeef2}
.file-name{font-family:monospace;font-size:13px;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-name a{color:#1a7f37;text-decoration:none}
.file-body{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.file-preview{width:60px;height:60px;border-radius:4px;object-fit:cover;border:1px solid #d0d7de;flex-shrink:0;cursor:pointer;background:#f6f8fa}
.file-preview:hover{opacity:.8}
.file-icon{font-size:32px;flex-shrink:0}
.file-size{color:#656d76;font-size:12px;white-space:nowrap;flex-shrink:0}
.file-time{color:#8c959f;font-size:11px;flex:1}

.spinner{width:36px;height:36px;border:3px solid #d0d7de;border-top-color:#0969da;border-radius:50%;margin:0 auto 12px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.msg{color:#24292f;font-size:14px;text-align:center;margin-bottom:12px}
.ok,.err{font-size:24px;text-align:center;margin-bottom:8px}
.ok{color:#1a7f37}.err{color:#cf222e}

@media(max-width:600px){
  body{padding:10px}
  h1{font-size:17px}
  .btn{padding:8px 12px;font-size:12px;width:auto;margin-bottom:0}
  .bread-bar{flex-direction:column;align-items:flex-start}
  .bread-bar .target-label{margin-top:8px}
}