* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: #222;
  background: #f5f6f8;
}

.att-wrap { max-width: 760px; margin: 0 auto; padding: 12px 14px 24px; }

/* 标题栏 */
.att-head {
  background: linear-gradient(135deg, #c62828, #d32f2f);
  color: #fff;
  padding: 14px 16px;
  border-radius: 0;
  margin: 0 -14px;
}
.att-title { font-size: 17px; font-weight: 600; }
.att-meta { font-size: 12px; opacity: .85; margin-top: 3px; }

/* 上传区 */
.upload-zone {
  margin-top: 14px;
  border: 2px dashed #c9ccd1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upload-zone:hover, .upload-zone.drag { border-color: #d32f2f; background: #fdf5f5; }
.up-inner { padding: 26px 16px; text-align: center; color: #7a7f87; }
.up-icon { width: 34px; height: 34px; color: #d32f2f; }
.up-text { margin-top: 8px; font-size: 14px; }
.up-sub { margin-top: 4px; font-size: 12px; color: #a0a4ab; }
.up-actions { margin-top: 14px; }
.shot-btn {
  border: 1px solid #d32f2f; color: #d32f2f; background: #fff;
  border-radius: 6px; padding: 7px 18px; cursor: pointer; font-size: 14px;
}
.shot-btn:hover { background: #d32f2f; color: #fff; }
.shot-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- 截图框选遮罩层（QQ 式） ---------- */
.shot-overlay {
  position: fixed; inset: 0; z-index: 999999;
  background: #000; cursor: crosshair;
  user-select: none;
}
.shot-canvas { position: absolute; }
.shot-mask { position: absolute; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.shot-box {
  position: absolute; display: none; pointer-events: none;
  border: 2px solid #4c9aff; box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}
.shot-size {
  position: absolute; display: none; pointer-events: none;
  background: #4c9aff; color: #fff; font-size: 12px;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.shot-tip {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  color: #fff; font-size: 14px; background: rgba(0,0,0,0.6);
  padding: 8px 16px; border-radius: 6px; pointer-events: none;
}

/* 附件类型 */
.type-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; background: #fff; padding: 10px 14px; border-radius: 6px;
}
.type-row label { color: #555; white-space: nowrap; }
.type-row select {
  flex: 1; padding: 6px 8px; border: 1px solid #d0d3d8; border-radius: 4px; font-size: 14px;
}

/* 进度 */
.prog-list { margin-top: 12px; }
.prog-item {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; padding: 8px 14px; border-radius: 6px; margin-bottom: 6px;
}
.p-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 12px; }
.p-state { white-space: nowrap; color: #888; }
.p-state.success { color: #2d8c6e; }
.p-state.fail { color: #c0392b; }

/* 列表 */
.list-head {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px; font-weight: 600; color: #333;
}
.count { color: #999; font-weight: 400; }
.refresh {
  margin-left: auto; border: 1px solid #d0d3d8; background: #fff; color: #555;
  border-radius: 4px; padding: 2px 9px; cursor: pointer; font-size: 15px;
}
.refresh:hover { border-color: #d32f2f; color: #d32f2f; }

.att-list { margin-top: 8px; }
.att-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff; padding: 10px 14px; border-radius: 6px; margin-bottom: 6px;
}
.a-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-meta { color: #999; font-size: 12px; white-space: nowrap; }
.badge-entry { display: inline-block; background: #eef3fb; color: #3a6ea5; font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: 6px; }
.empty { text-align: center; color: #aaa; padding: 24px 0; }