/* ============================================================
   扣叮活动影像空间 —— 全局样式
   设计语言：清爽 / 理性 / 克制；柔和蓝色系；卡片 + 圆角 + 留白
   ============================================================ */

:root {
  /* 柔和蓝色系主色板（避免纯黑/深色大色块） */
  --c-bg:        #f5f7fb;   /* 页面背景 浅蓝灰 */
  --c-surface:   #ffffff;   /* 卡片表面 */
  --c-surface-2: #eef2f9;   /* 次级表面 */
  --c-primary:   #3b6fd4;   /* 主蓝 */
  --c-primary-d: #2f59ab;   /* 主蓝深 hover */
  --c-primary-l: #e7eefb;   /* 主蓝浅底 */
  --c-text:      #2a3242;   /* 主文字（深蓝灰，非纯黑） */
  --c-text-2:    #6b7689;   /* 次文字 */
  --c-border:    #e2e8f2;   /* 边框 */
  --c-danger:    #d9534f;   /* 删除/警示 */
  --c-success:   #3fa776;   /* 成功 */
  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 2px 10px rgba(59, 111, 212, 0.07);
  --shadow-h:    0 6px 20px rgba(59, 111, 212, 0.14);
  --gap:         16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-d); }

/* ---------------- 顶栏 ---------------- */
.topbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  color: var(--c-text);
}
.brand .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), #6da0f0);
}
.brand small { font-weight: 400; color: var(--c-text-2); font-size: 13px; }

/* ---------------- 容器 ---------------- */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: 22px; }
.page-head .sub { color: var(--c-text-2); font-size: 14px; margin-top: 4px; }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--c-primary-d); border-color: var(--c-primary-d); color: #fff; }
.btn-danger {
  background: #fff; border-color: #f0c9c8; color: var(--c-danger);
}
.btn-danger:hover { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--c-text-2); }
.btn-ghost:hover { color: var(--c-primary); background: var(--c-primary-l); }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- 表单 ---------------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--c-text-2); margin-bottom: 6px; }
.input, textarea.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-surface);
  font-family: inherit;
}
.input:focus, textarea.input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-l);
}
textarea.input { resize: vertical; min-height: 70px; }

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------------- 活动列表网格 ---------------- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.event-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.event-cover {
  aspect-ratio: 16 / 10;
  background: var(--c-surface-2);
  position: relative;
  overflow: hidden;
}
.event-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-cover .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-2); font-size: 13px;
  background: linear-gradient(135deg, #eaf0fb, #f3f6fc);
}
.event-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.event-body h3 { margin: 0 0 4px; font-size: 16px; }
.event-meta { color: var(--c-text-2); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; }
.event-desc { color: var(--c-text-2); font-size: 13px; margin-top: 8px; flex: 1; }
/* 活动卡片操作按钮区：6 个按钮（上传/上传二维码/浏览/查重清理/打包下载/删除）。
   关键修复：flex-wrap 允许换行，避免在窄卡片里挤成一行导致文字竖排、末个按钮溢出卡片右边框被切掉。
   按钮统一最小宽度 + 不换行文字 + 自适应撑开，桌面窄卡片与手机窄屏均不溢出、不贴边。 */
.event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.event-actions .btn {
  flex: 1 1 auto;
  min-width: 84px;
  justify-content: center;
  white-space: nowrap;   /* 防止「上传二维码」等被压成竖排 */
}
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  background: var(--c-primary-l); color: var(--c-primary-d); font-size: 12px;
}

/* ---------------- 瀑布流（CSS columns） ---------------- */
.masonry {
  column-count: 4;
  column-gap: 12px;
}
.masonry .tile {
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-surface-2);
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease;
}
.masonry .tile:hover { box-shadow: var(--shadow-h); }
.masonry .tile img {
  width: 100%;
  display: block;
  background: var(--c-surface-2);
  transition: opacity .3s ease;
  opacity: 0;
}
.masonry .tile img.loaded { opacity: 1; }
.masonry .tile .vbadge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(42,50,66,.78); color: #fff;
  border-radius: 20px; padding: 3px 9px; font-size: 12px;
  display: flex; align-items: center; gap: 4px;
}
.masonry .tile .vthumb {
  aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#dbe6fa,#eef3fc); color: var(--c-primary-d);
  font-size: 30px;
}

@media (max-width: 1100px) { .masonry { column-count: 3; } }
@media (max-width: 760px)  { .masonry { column-count: 2; column-gap: 10px; } .masonry .tile { margin-bottom: 10px; } }

/* ---------------- 灯箱 ---------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(28, 36, 54, .92);
  display: none;
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox .lb-stage {
  max-width: 94vw; max-height: 84vh;
  display: flex; align-items: center; justify-content: center;
}
.lightbox img, .lightbox video {
  max-width: 94vw; max-height: 84vh;
  border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.4);
  background: #000;
}
.lb-btn {
  position: absolute;
  background: rgba(255,255,255,.14);
  border: none; color: #fff;
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.lb-btn:hover { background: rgba(255,255,255,.28); }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-close { top: 16px; right: 18px; width: 42px; height: 42px; font-size: 20px; }
.lb-bar {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center;
}
.lb-bar .btn { background: rgba(255,255,255,.92); }
/* 灯箱内"删除此照片"：默认白底红字，悬停/触碰转实心红，移动端按钮够大易点 */
.lb-bar .btn-danger { background: rgba(255,255,255,.92); color: var(--c-danger); border-color: #f0c9c8; }
.lb-bar .btn-danger:hover { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.lb-bar .btn-danger:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 640px) {
  .lb-bar { flex-wrap: wrap; justify-content: center; max-width: 92vw; }
  .lb-bar .btn { padding: 9px 14px; }
}
.lb-count {
  position: absolute; top: 18px; left: 20px;
  color: #fff; font-size: 14px; background: rgba(0,0,0,.3);
  padding: 4px 12px; border-radius: 20px;
}

/* ---------------- 分享 / 二维码弹窗 ---------------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(42,50,66,.45);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-mask.open { display: flex; }
.modal {
  background: var(--c-surface);
  border-radius: var(--radius);
  width: 100%; max-width: 420px;
  padding: 24px;
  box-shadow: var(--shadow-h);
}
.modal h3 { margin: 0 0 16px; font-size: 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qr-box canvas, .qr-box img { border-radius: 10px; border: 1px solid var(--c-border); }
.share-link {
  width: 100%; display: flex; gap: 8px;
}
.share-link .input { font-size: 13px; }

/* ---------------- 上传进度 ---------------- */
.upload-zone {
  border: 2px dashed var(--c-border);
  border-radius: var(--radius);
  padding: 36px 20px;
  text-align: center;
  color: var(--c-text-2);
  background: var(--c-surface);
  transition: all .15s ease;
  cursor: pointer;
}
.upload-zone.drag { border-color: var(--c-primary); background: var(--c-primary-l); color: var(--c-primary-d); }
.upload-zone .big { font-size: 30px; margin-bottom: 6px; }
.progress-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.progress-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--c-surface-2); border-radius: var(--radius-sm); padding: 8px 12px;
  font-size: 13px;
}
.progress-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { flex: 1.5; height: 7px; background: #d9e2f2; border-radius: 6px; overflow: hidden; }
.bar > span { display: block; height: 100%; width: 0; background: var(--c-primary); transition: width .2s ease; }
.progress-item .state { width: 56px; text-align: right; color: var(--c-text-2); }
.progress-item.done .state { color: var(--c-success); }
.progress-item.err .state { color: var(--c-danger); }
/* 单项重试按钮：柔和蓝色次要按钮，延续整体风格 */
.progress-item .retry-btn {
  flex: 0 0 auto;
  border: 1px solid var(--c-primary);
  background: var(--c-primary-l);
  color: var(--c-primary-d);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s ease;
}
.progress-item .retry-btn:hover { background: var(--c-primary); color: #fff; }
/* 上传操作区：开始上传 + 重试全部失败 */
.upload-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 14px;
}
.upload-tip { font-size: 12px; color: var(--c-text-2); margin-top: 8px; }

/* ---------------- 杂项 ---------------- */
.empty {
  text-align: center; color: var(--c-text-2); padding: 60px 20px;
  background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: var(--radius);
}
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--c-text); color: #fff; padding: 10px 18px;
  border-radius: 24px; font-size: 14px; z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.toast.show { opacity: .95; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--c-text-2); }
.hidden { display: none !important; }
.notice {
  background: var(--c-primary-l); color: var(--c-primary-d);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 16px;
}

/* ---------------- 上传二维码弹窗辅助 ---------------- */
.qr-hint { font-size: 13px; color: var(--c-text-2); text-align: center; }

/* ============================================================
   移动端上传优化（≤640px）
   - 上传按钮占满宽度、加大点击热区
   - 拖拽区在手机上转为醒目的"点击选择照片"大卡片
   - 进度列表小屏更清晰
   设计延续柔和蓝色系，不引入新色系。
   ============================================================ */
@media (max-width: 640px) {
  .container { padding: 16px 14px 48px; }

  /* 弹窗在小屏接近全宽 */
  .modal { max-width: 100%; padding: 18px 16px; }
  .modal-mask { padding: 12px; align-items: flex-end; }

  /* 上传区变成醒目大卡片 */
  .upload-zone {
    padding: 40px 18px;
    border-width: 2px;
    border-color: var(--c-primary);
    background: var(--c-primary-l);
    color: var(--c-primary-d);
  }
  .upload-zone .big { font-size: 44px; margin-bottom: 10px; }
  .upload-zone .pick-cta {
    display: inline-block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--c-primary-d);
  }

  /* 开始上传 / 关闭按钮：占满宽度、加高，便于点按 */
  .modal-foot {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .modal-foot .btn {
    width: 100%;
    justify-content: center;
    padding: 13px 16px;
    font-size: 16px;
  }

  /* 进度列表小屏清晰：换行展示，进度条独占一行 */
  .progress-item {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }
  .progress-item .name {
    flex: 1 1 100%;
    font-size: 14px;
    white-space: normal;
    word-break: break-all;
  }
  .progress-item .bar { flex: 1 1 70%; height: 9px; }
  .progress-item .state { flex: 0 0 auto; width: auto; font-size: 13px; }

  /* 活动卡片操作按钮在小屏排布更宽松：每行约 2~3 个，自动换行不溢出 */
  .event-actions .btn { flex: 1 1 40%; min-width: 96px; }
}

/* ============================================================
   免密上传页（upload.html）专属
   ============================================================ */
.upload-page-head {
  text-align: center;
  margin-bottom: 18px;
}
.upload-page-head h1 { margin: 0 0 4px; font-size: 20px; }
.upload-page-head .sub { color: var(--c-text-2); font-size: 14px; }
.upload-panel { padding: 20px; }
.upload-panel .modal-foot { justify-content: center; }
@media (min-width: 641px) {
  .upload-panel { max-width: 560px; margin: 24px auto; }
}

/* ============================================================
   v2 新增样式（去重 / 查重清理 / 转码进度 / 打包下载）
   延续柔和蓝色系，不引入新色系。
   ============================================================ */

/* 功能1：上传进度「已存在」状态（柔和提示，区别于失败的红色） */
.progress-item.exists { opacity: .92; }
.progress-item.exists .state { color: var(--c-primary-d); }

/* 功能4/5：底部转码进度浮层 */
.transcode-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border); box-shadow: var(--shadow-h);
  border-radius: 24px; padding: 10px 18px; font-size: 14px;
  display: flex; align-items: center; gap: 10px; z-index: 180; max-width: 92vw;
}
.transcode-bar .tc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-primary);
  animation: tc-pulse 1.1s ease-in-out infinite;
}
@keyframes tc-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* 视频瀑布流「处理中」角标（与 🎬 视频 角标错开，放左上角） */
.masonry .tile .vbadge.tc-pending {
  left: 8px; right: auto; top: 8px;
  background: rgba(59,111,212,.85);
}

/* 功能2：查重清理页 */
.dedup-summary {
  background: var(--c-primary-l); color: var(--c-primary-d);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; margin-bottom: 16px;
}
.dedup-group { padding: 16px; margin-bottom: 18px; }
.dedup-group-head { font-size: 14px; color: var(--c-text); margin-bottom: 12px; }
.dedup-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.dedup-item {
  display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 8px; background: var(--c-surface);
}
.dedup-thumb {
  aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--c-surface-2); display: flex; align-items: center; justify-content: center;
}
.dedup-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dedup-vthumb {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: var(--c-primary-d);
  background: linear-gradient(135deg,#dbe6fa,#eef3fc);
}
.dedup-meta { display: flex; flex-direction: column; gap: 4px; }
.dedup-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dedup-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-text-2); }
.keep-tag {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 12px;
  background: var(--c-success); color: #fff; font-size: 11px;
}
.dedup-actions {
  position: sticky; bottom: 0; background: var(--c-surface);
  border-top: 1px solid var(--c-border); padding: 14px 0; margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* ============================================================
   v3 新增样式（拍摄时间排序下拉 / 后台下载链接管理区块）
   延续柔和蓝色系（--c-primary #3b6fd4），不引入新色系。
   ============================================================ */

/* P0：相册页排序下拉 */
.sort-control {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--c-text-2);
}
.sort-control label { white-space: nowrap; }
.sort-select {
  width: auto; min-width: 130px;
  padding: 7px 10px; font-size: 13px; cursor: pointer;
}

/* P1：后台活动卡片下载链接管理区块 */
.dl-block {
  margin-top: 12px;
  border-top: 1px dashed var(--c-border);
  padding-top: 12px;
}
.dl-head {
  font-size: 13px; font-weight: 600; color: var(--c-text);
  margin-bottom: 8px;
}
.dl-body {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px;
}
.dl-body .muted { font-size: 13px; }

/* 状态徽标（延续蓝色系，仅失败用警示红） */
.dl-badge {
  display: inline-block; align-self: flex-start;
  padding: 2px 10px; border-radius: 20px; font-size: 12px;
  background: var(--c-primary-l); color: var(--c-primary-d);
}
.dl-badge.dl-ready { background: var(--c-primary); color: #fff; }
.dl-badge.dl-pending,
.dl-badge.dl-processing { background: var(--c-primary-l); color: var(--c-primary-d); }
.dl-badge.dl-failed { background: #fbe9e9; color: var(--c-danger); }

.dl-link-row { display: flex; gap: 8px; align-items: center; }
.dl-link-input { font-size: 12px; padding: 7px 10px; }
.dl-info { font-size: 12px; }
.dl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dl-actions .btn { flex: 0 0 auto; }
.dl-fail-tip { font-size: 12px; color: var(--c-danger); }

/* ---------------- v4：相册三档可见性（后台徽标 + 切换控件） ----------------
   三色协调：公开=绿、不公开=琥珀、私密=红（复用 --c-danger 红色系）。
   主题仍以柔和蓝 --c-primary 为骨架，三色仅用于状态标识，不抢主色。 */
.vis-badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 12px; white-space: nowrap;
}
.vis-badge.vis-public   { background: #e6f6ec; color: #1f8a4c; }
.vis-badge.vis-unlisted { background: #fdf3e0; color: #b9791b; }
.vis-badge.vis-private  { background: #fbe9e9; color: var(--c-danger); }

.vis-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
}
.vis-row-label { font-size: 13px; color: var(--c-text-2); flex: 0 0 auto; }
.input-sm { padding: 6px 9px; font-size: 13px; }
.vis-select { flex: 1 1 auto; min-width: 0; cursor: pointer; }