body {
  font-family: "Microsoft Yahei", Arial, sans-serif;
  background-color: #f8f8f8;
  margin: 20px;
  color: #333;
}

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.view-link {
  background-color: #409eff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
}

.view-link:hover {
  background-color: #66b1ff;
}

.icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.section {
  background-color: #fff;
  border-radius: 6px;
  padding: 15px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.1);
}

h3 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 6px;
  color: #2c3e50;
}

#projectName {
  width: 100%;
  max-width: 320px;
  padding: 8px 12px;
  border: 1.5px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
}

#projectName:focus {
  border-color: #409eff;
  box-shadow: 0 0 5px #409eff;
}

.upload-area {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background-color: #fafafa;
  padding: 10px 10px;
  border: 2px dashed #bbb;
  border-radius: 6px;
  min-height: 130px;
  align-items: flex-start;
  position: relative;
}

.add-button {
  width: 110px;
  height: 110px;
  border: 2px dashed #aaa;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 52px;
  color: #999;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

.add-button:hover {
  border-color: #409eff;
  color: #409eff;
}

.thumbnail-container {
  width: 110px;
  height: 110px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
  background-color: #fff;
  flex-shrink: 0;
}

.thumbnail-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.delete-button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.delete-button:hover {
  opacity: 1;
}

.submit-btn {
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 12px 28px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 15px;
  user-select: none;
  display: inline-block;
}

.submit-btn:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

.submit-btn:hover:not(:disabled) {
  background-color: #66b1ff;
}

progress#uploadProgress {
  width: 100%;
  height: 22px;
  appearance: none;
  -webkit-appearance: none;
}

#uploadStatus {
  margin-top: 8px;
  font-size: 14px;
  color: #555;
}

label {
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}

input[type="radio"] {
  margin-right: 6px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .upload-area {
    justify-content: center;
  }
}
/* =========== Design Tokens =========== */
:root{
  --primary:#3b82f6;           /* 主色：亮一点更现代 */
  --primary-600:#2563eb;
  --bg:#f6f7f9;                /* 背景灰 */
  --card:#ffffff;              /* 卡片 */
  --text:#0f172a;              /* 标题/正文深色 */
  --muted:#6b7280;             /* 次要文字 */
  --border:rgba(15,23,42,.08); /* 边框淡灰 */
  --shadow:0 8px 32px rgba(2,8,23,.08);
  --radius:12px;
  --focus:0 0 0 3px rgba(59,130,246,.25);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b1220;
    --card:#0f172a;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --border:rgba(148,163,184,.18);
    --shadow:0 10px 36px rgba(0,0,0,.35);
  }
}

/* =========== 基础排版与容器 =========== */
html,body{background:var(--bg);color:var(--text);}
.container{max-width:1160px;margin:0 auto;}
.header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}

/* 顶部按钮更现代 */
.view-link{
  background:linear-gradient(180deg,var(--primary),var(--primary-600));
  color:#fff;padding:10px 18px;border-radius:10px;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.view-link .icon{width:18px;height:18px}
.view-link:hover{transform:translateY(-1px);}
.view-link:active{transform:translateY(0);opacity:.9}

/* =========== 卡片与标题 =========== */
.section{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 18px;margin-bottom:20px;
}
.section>h3{
  display:flex;align-items:center;gap:10px;
  border:0;margin:0 0 12px;padding:0;font-size:18px;font-weight:700;
  color:var(--text);
}
.section>h3 small{color:var(--muted);font-weight:400}

/* =========== 输入/表单 =========== */
#projectName{
  width:100%;max-width:460px;
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:transparent;color:inherit;font-size:15px;transition:border .2s, box-shadow .2s;
}
#projectName:focus{border-color:var(--primary);box-shadow:var(--focus);outline:0}

label{font-weight:500;font-size:15px;color:var(--text)}
input[type="radio"]{margin-right:6px;accent-color:var(--primary);}

/* “改名”复选框用系统 accent-color 即现代又兼容 */
.rename-checkbox{accent-color:var(--primary);}

/* =========== 上传区：改为自适应网格卡片 =========== */
.upload-area{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:12px;padding:12px;border:2px dashed var(--border);border-radius:14px;
  background:linear-gradient(180deg,rgba(148,163,184,.06),transparent);
  min-height:auto;align-items:stretch;transition:border-color .2s, background .2s;
}
.upload-area:hover{border-color:rgba(59,130,246,.4);}

/* 拖拽时高亮（可选：见下方很小一段 JS 加/去此类） */
.upload-area.is-dragover{
  border-color:var(--primary);
  background:linear-gradient(180deg,rgba(59,130,246,.08),transparent);
}

/* “+” 按钮 = 占位卡片 */
.add-button{
  border:2px dashed rgba(148,163,184,.65);
  background:linear-gradient(180deg,rgba(0,0,0,.02),transparent);
  border-radius:14px;height:110px;display:flex;align-items:center;justify-content:center;
  font-size:48px;color:#98a1b3;cursor:pointer;user-select:none;
  transition:border-color .2s, color .2s, transform .12s ease, box-shadow .12s ease;
}
.add-button:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px);box-shadow:0 8px 18px rgba(2,8,23,.08);}

/* 缩略图卡片 */
.thumbnail-container{
  position:relative;width:100%;height:110px;border-radius:14px;overflow:hidden;
  background:#0b1220;box-shadow:0 6px 14px rgba(2,8,23,.12);
  transition:transform .12s ease, box-shadow .12s ease, outline-color .2s;
  outline:1px solid rgba(148,163,184,.18);
}
.thumbnail-container:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(2,8,23,.16);}
.thumbnail-container img{width:100%;height:100%;object-fit:cover;display:block}

/* 删除按钮悬浮更漂亮 */
.delete-button{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;
  border-radius:10px;background:rgba(0,0,0,.55);color:#fff;font-weight:700;font-size:16px;
  line-height:26px;cursor:pointer;opacity:.9;transition:transform .15s ease, opacity .2s ease;
  backdrop-filter:blur(3px);
}
.delete-button:hover{opacity:1;transform:scale(1.06);}

/* =========== 按钮与进度条 =========== */
.submit-btn{
  background:linear-gradient(180deg,var(--primary),var(--primary-600));
  color:#fff;border:0;border-radius:12px;padding:12px 22px;font-size:15px;font-weight:700;
  box-shadow:0 10px 20px rgba(59,130,246,.25);cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, opacity .2s ease;
}
.submit-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 28px rgba(59,130,246,.28);}
.submit-btn:disabled{background:linear-gradient(180deg,#9abcfb,#8aaef3);cursor:not-allowed;opacity:.85}

/* 进度条（圆角+条纹动画） */
#uploadProgress{
  height:12px;border-radius:999px;background:rgba(15,23,42,.08);overflow:hidden;
}
#uploadProgress::-webkit-progress-bar{background:transparent;}
#uploadProgress::-webkit-progress-value{
  border-radius:999px;
  background:repeating-linear-gradient(
    45deg,
    var(--primary) 0, var(--primary) 10px,
    rgba(255,255,255,.25) 10px, rgba(255,255,255,.25) 20px
  );
  animation:stripe 1.2s linear infinite;
}
#uploadProgress::-moz-progress-bar{
  background:var(--primary);
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 10px, transparent 10px 20px);
  animation:stripe 1.2s linear infinite;
}
@keyframes stripe{to{background-position:40px 0}}

#uploadStatus{color:var(--muted);font-size:14px;margin-top:8px}

/* 响应式：小屏时更密 */
@media (max-width:520px){
  .upload-area{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:400px){
  .upload-area{grid-template-columns:repeat(2,1fr);}
}