/* === base layout === */
.site-transfer { max-width: 720px; margin: 20px auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.st-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.05); }

/* Uploader form */
.st-form { display: grid; grid-template-columns: 1fr 200px 160px; gap: 10px; align-items: end; }
.st-file input[type=file] { padding: 10px; width: 100%; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; }
.st-expiry { display: grid; gap: 6px; }
.st-expiry select { padding: 8px; border-radius: 8px; border: 1px solid #cbd5e1; }

/* Progress list */
.st-progress-list { margin-top: 16px; display: grid; gap: 8px; }
.st-row { display: grid; grid-template-columns: 1fr 1fr 80px; gap: 8px; align-items: center; }
.st-row .st-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bar { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.st-fill { height: 100%; width: 0; background: #3b82f6; transition: width .2s linear; }
.st-status { font-size: 12px; text-align: right; }

/* Share box (after upload) */
.st-share { margin-top: 14px; display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.st-share input { padding: 8px; border: 1px solid #cbd5e1; border-radius: 8px; }

/* Small note */
.st-note { color: #64748b; font-size: 12px; margin-top: 8px; }

/* Responsive */
@media (max-width: 640px){
  .st-form { grid-template-columns: 1fr; }
  .st-row { grid-template-columns: 1fr; }
  .st-status { text-align: left; }
  .st-share { grid-template-columns: 1fr; }
}

/* --- Download page enhancements --- */
.st-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.site-transfer ul { list-style: none; margin: 0; padding: 0; }
.site-transfer li.st-file { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 12px; margin: 8px 0; }
.site-transfer .st-file a { text-decoration: none; }
.st-thumb { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: #f1f5f9; display: flex; align-items: center; justify-content: center; }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-icon svg { width: 24px; height: 24px; display: block; }
.st-filename { font-weight: 500; }
.st-filesize { color: #64748b; margin-left: 8px; }
.st-btn-sm { padding: 6px 10px; font-size: 12px; }

.st-badge { font-size: 12px; background: #f1f5f9; padding: 6px 10px; border-radius: 999px; }
.st-badge-ok { background: #ecfdf5; }

/* Footer on download page: top = expiry, bottom = actions (left aligned) */
.st-meta { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.st-line { display: inline-flex; align-items: center; gap: 12px; }
.st-actions { display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }

/* Brand buttons */
:root { --brand:#1a1727; }

.st-btn,
.st-btn:visited {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--brand);
  background:#fff;
  color:var(--brand) !important;
  text-decoration:none !important;
  font-weight:500;
  line-height:1;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .02s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  cursor:pointer;
  outline:none;
}
.st-btn:hover,
.st-btn:focus { background:var(--brand); color:#fff !important; box-shadow:0 0 0 3px rgba(26,23,39,.12); }
.st-btn:focus-visible { background:var(--brand); color:#fff !important; box-shadow:0 0 0 3px rgba(26,23,39,.18); }
.st-btn:active { transform: translateY(1px); }

/* Primary (filled) */
.st-btn--primary,
.st-btn--primary:visited { background:var(--brand); color:#fff !important; border-color:var(--brand); }
.st-btn--primary:hover,
.st-btn--primary:focus,
.st-btn--primary:focus-visible { filter:brightness(.95); box-shadow:0 0 0 3px rgba(26,23,39,.18); }

/* Disabled */
.st-btn[disabled], .st-btn.is-disabled { opacity:.45; pointer-events:none; }

/* Mobile actions */
@media (max-width: 560px){
  .st-actions { justify-content: stretch; }
  .st-actions .st-btn { flex: 1 1 auto; text-align: center; }
}

/* Share link row full width */
#st-share { width: 100%; }
#st-share input { width: 100%; }
.st-share { grid-template-columns: 1fr auto; } /* input grows, button hugs */

/* Name field (form) */
.st-form .st-name { display: grid; gap: 6px; }
.st-form .st-name input {
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  width: 100%;
}

/* Tiny tooltip “?” (the character is injected via ::before) */
.st-help{
  display:inline-grid; place-items:center;
  width: 18px; height: 18px; margin-left: 6px;
  border-radius: 999px; background: #f1f5f9; color:#1a1727;
  font-size: 12px; font-weight: 600; cursor: help;
}
.st-help::before{ content:'?'; line-height: 1; }