Upload 67 files

app/static/style.css

@@ -1,1320 +1,762 @@
-:root {
-  --bg: #eef8ef;
-  --bg-deep: #d7edd7;
-  --surface: rgba(255, 255, 255, 0.75);
-  --surface-strong: rgba(255, 255, 255, 0.9);
-  --border: rgba(98, 146, 104, 0.22);
-  --text: #173622;
-  --muted: #5d7865;
-  --primary: #4e9461;
-  --primary-deep: #2e6a44;
-  --primary-soft: #e6f4e5;
-  --accent: #f6b85b;
-  --danger: #d95b67;
-  --shadow: 0 24px 70px rgba(53, 98, 62, 0.12);
-  --radius-lg: 28px;
-  --radius-md: 20px;
-  --radius-sm: 14px;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  margin: 0;
-  font-family: "Segoe UI Variable", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
-  color: var(--text);
-  background: linear-gradient(180deg, #f5fbf2 0%, #e7f6e8 35%, #e1f0e0 100%);
-  min-height: 100vh;
-}
-
-.page-backdrop {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  background:
-    radial-gradient(circle at 12% 20%, rgba(246, 184, 91, 0.16), transparent 22%),
-    radial-gradient(circle at 82% 14%, rgba(112, 188, 128, 0.18), transparent 20%),
-    radial-gradient(circle at 50% 100%, rgba(120, 180, 139, 0.18), transparent 28%);
-}
-
-img {
-  display: block;
-  max-width: 100%;
-}
-
-.shell {
-  position: relative;
-  width: min(1200px, calc(100% - 32px));
-  margin: 0 auto;
-  padding: 28px 0 44px;
-}
-
-.content-shell {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.topbar {
-  position: sticky;
-  top: 18px;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 18px 22px;
-  margin-bottom: 24px;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(14px);
-  box-shadow: var(--shadow);
-}
-
-.brand-block {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-
-.brand-mark {
-  width: 52px;
-  height: 52px;
-  display: grid;
-  place-items: center;
-  border-radius: 18px;
-  background: linear-gradient(135deg, #63b67c, #88ca99);
-  color: white;
-  font-size: 1.4rem;
-  font-weight: 700;
-  box-shadow: 0 18px 26px rgba(76, 134, 91, 0.25);
-}
-
-.eyebrow {
-  margin: 0 0 6px;
-  color: var(--primary);
-  font-size: 0.78rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
-.brand-title,
-.hero-card h2,
-.glass-card h3,
-.login-copy h1,
-.login-panel h2 {
-  margin: 0;
-  font-family: "Georgia", "STKaiti", "KaiTi", serif;
-  letter-spacing: 0.02em;
-}
-
-.topnav {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.topnav a,
-.ghost-link {
-  color: var(--primary-deep);
-  text-decoration: none;
-  padding: 10px 14px;
-  border-radius: 999px;
-  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
-}
-
-.topnav a:hover,
-.ghost-link:hover {
-  background: rgba(78, 148, 97, 0.12);
-  transform: translateY(-1px);
-}
-
-.hero-card,
-.glass-card,
-.login-panel,
-.login-copy {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
-  backdrop-filter: blur(16px);
-  box-shadow: var(--shadow);
-}
-
-.hero-card {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 24px;
-  padding: 30px;
-  animation: rise-in 0.7s ease both;
-}
-
-.hero-card::after,
-.glass-card::after,
-.login-panel::after,
-.login-copy::after {
-  content: "";
-  position: absolute;
-  inset: auto -12% -50% auto;
-  width: 180px;
-  height: 180px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(246, 184, 91, 0.18), transparent 70%);
-}
-
-.hero-badges,
-.chip-row,
-.feature-list,
-.action-grid,
-.task-status-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.pill,
-.chip,
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 999px;
-  font-size: 0.92rem;
-  background: rgba(255, 255, 255, 0.72);
-  border: 1px solid rgba(78, 148, 97, 0.16);
-}
-
-.status-approved {
-  background: rgba(78, 148, 97, 0.14);
-  color: var(--primary-deep);
-}
-
-.status-rejected {
-  background: rgba(217, 91, 103, 0.14);
-  color: #9b3144;
-}
-
-.lead,
-.muted,
-.mini-note,
-label span,
-.meta-grid span,
-.data-table th {
-  color: var(--muted);
-}
-
-.lead {
-  font-size: 1.02rem;
-  line-height: 1.7;
-}
-
-.muted,
-.mini-note,
-.feedback-box {
-  line-height: 1.6;
-}
-
-.flash-stack {
-  display: grid;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.flash {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 18px;
-  border-radius: 18px;
-  border: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.85);
-  box-shadow: 0 14px 34px rgba(88, 132, 95, 0.08);
-}
-
-.flash-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--primary);
-}
-
-.flash-error .flash-dot {
-  background: var(--danger);
-}
-
-.flash-success .flash-dot {
-  background: #58a46b;
-}
-
-.flash p {
-  margin: 0;
-}
-
-.card-grid,
-.stats-grid,
-.task-grid,
-.review-grid {
-  display: grid;
-  gap: 20px;
-}
-
-.activity-grid {
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-}
-
-.group-grid,
-.review-grid {
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-}
-
-.task-grid {
-  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
-}
-
-.stats-grid {
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-}
-
-.page-grid,
-.two-column-layout {
-  display: grid;
-  grid-template-columns: minmax(280px, 360px) 1fr;
-  gap: 22px;
-}
-
-.admin-activity-grid {
-  grid-template-columns: 1.4fr 1fr;
-}
-
-.glass-card,
-.form-panel,
-.table-panel,
-.quick-panel {
-  padding: 24px;
-  animation: rise-in 0.7s ease both;
-}
-
-.activity-card h3,
-.task-card h3,
-.review-card h3,
-.group-card h3,
-.stat-card strong {
-  margin: 0 0 10px;
-}
-
-.meta-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-  margin: 18px 0;
-}
-
-.meta-grid div {
-  padding: 12px 14px;
-  border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.65);
-}
-
-.meta-grid strong {
-  display: block;
-  margin-top: 6px;
-}
-
-.progress-line {
-  height: 9px;
-  margin: 16px 0 14px;
-  background: rgba(78, 148, 97, 0.12);
-  border-radius: 999px;
-  overflow: hidden;
-}
-
-.progress-line div {
-  height: 100%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, #62b176, #8ac798, #f1c16b);
-}
-
-.card-footer,
-.card-topline,
-.section-head,
-.stack-item,
-.builder-title-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.section-head {
-  margin-bottom: 18px;
-}
-
-.tight-head {
-  margin-top: 8px;
-}
-
-.stack-list {
-  display: grid;
-  gap: 14px;
-}
-
-.stack-item {
-  padding: 14px 16px;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.62);
-  border: 1px solid rgba(78, 148, 97, 0.14);
-}
-
-.stack-item-block {
-  align-items: flex-start;
-}
-
-.form-stack,
-.compact-form {
-  display: grid;
-  gap: 14px;
-}
-
-.form-grid {
-  display: grid;
-  gap: 14px;
-}
-
-.cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.full-span {
-  grid-column: 1 / -1;
-}
-
-label {
-  display: grid;
-  gap: 8px;
-}
-
-input,
-select,
-textarea,
-button {
-  font: inherit;
-}
-
-input,
-select,
-textarea {
-  width: 100%;
-  padding: 14px 16px;
-  border-radius: 16px;
-  border: 1px solid rgba(91, 141, 99, 0.22);
-  background: rgba(255, 255, 255, 0.88);
-  color: var(--text);
-  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
-}
-
-input:focus,
-select:focus,
-textarea:focus {
-  outline: none;
-  border-color: rgba(78, 148, 97, 0.5);
-  box-shadow: 0 0 0 4px rgba(78, 148, 97, 0.12);
-  transform: translateY(-1px);
-}
-
-textarea {
-  resize: vertical;
-  min-height: 120px;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 18px;
-  border-radius: 999px;
-  border: none;
-  cursor: pointer;
-  text-decoration: none;
-  transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
-}
-
-.btn:hover:not(:disabled) {
-  transform: translateY(-2px);
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  color: white;
-  background: linear-gradient(135deg, #4c9460, #70ba80);
-  box-shadow: 0 16px 28px rgba(76, 148, 96, 0.24);
-}
-
-.btn-secondary {
-  color: var(--primary-deep);
-  background: rgba(78, 148, 97, 0.14);
-}
-
-.btn-danger {
-  color: white;
-  background: linear-gradient(135deg, #cf5a68, #e57b84);
-}
-
-.btn-ghost,
-.full-width-btn {
-  color: var(--primary-deep);
-  background: rgba(255, 255, 255, 0.72);
-  border: 1px solid rgba(78, 148, 97, 0.16);
-}
-
-.small-btn {
-  padding: 10px 14px;
-  font-size: 0.92rem;
-}
-
-.full-width-btn {
-  width: 100%;
-}
-
-.login-body {
-  display: grid;
-  place-items: center;
-  padding: 30px 16px;
-}
-
-.login-page {
-  position: relative;
-  display: grid;
-  grid-template-columns: 1.1fr minmax(320px, 420px);
-  width: min(1120px, 100%);
-  gap: 24px;
-}
-
-.compact-login-page {
-  grid-template-columns: 1fr minmax(320px, 420px);
-}
-
-.login-copy,
-.login-panel {
-  padding: 34px;
-}
-
-.spring-copy {
-  min-height: 520px;
-  background:
-    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.88), transparent 42%),
-    linear-gradient(145deg, rgba(125, 195, 137, 0.22), rgba(246, 184, 91, 0.18));
-}
-
-.admin-copy {
-  min-height: 420px;
-}
-
-.feature-list {
-  margin-top: 26px;
-}
-
-.feature-list span,
-.info-box,
-.feedback-box {
-  padding: 10px 14px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.62);
-  border: 1px solid rgba(78, 148, 97, 0.12);
-}
-
-.panel-glow {
-  position: absolute;
-  inset: auto auto -50px -30px;
-  width: 140px;
-  height: 140px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(246, 184, 91, 0.25), transparent 68%);
-}
-
-.task-card {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.task-card-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 14px;
-}
-
-.task-description {
-  min-height: 50px;
-}
-
-.task-media-wrap,
-.submission-preview {
-  display: grid;
-  gap: 10px;
-}
-
-.task-media,
-.submission-preview img,
-.review-image {
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: cover;
-  border-radius: 22px;
-  border: 1px solid rgba(78, 148, 97, 0.16);
-  box-shadow: 0 12px 30px rgba(86, 127, 93, 0.12);
-}
-
-.clue-toggle {
-  width: 48px;
-  height: 48px;
-  display: grid;
-  place-items: center;
-  border: none;
-  border-radius: 18px;
-  font-size: 1.2rem;
-  background: rgba(246, 184, 91, 0.14);
-  color: #c88929;
-  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
-}
-
-.clue-toggle.is-ready {
-  background: rgba(246, 184, 91, 0.26);
-  box-shadow: 0 14px 26px rgba(233, 173, 75, 0.22);
-}
-
-.clue-toggle.is-clue-view {
-  transform: rotate(-10deg) scale(1.04);
-}
-
-.release-note {
-  font-size: 0.88rem;
-  color: var(--muted);
-}
-
-.upload-form,
-.inline-form {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: end;
-}
-
-.inline-form-wide {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.visibility-form {
-  justify-content: flex-end;
-}
-
-.upload-label {
-  flex: 1 1 220px;
-}
-
-.feedback-box {
-  color: var(--text);
-}
-
-.leaderboard-card {
-  padding: 26px;
-}
-
-.rank-table-wrap,
-.table-shell {
-  overflow-x: auto;
-}
-
-.rank-table,
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.rank-table th,
-.rank-table td,
-.data-table th,
-.data-table td {
-  padding: 14px 12px;
-  border-bottom: 1px solid rgba(78, 148, 97, 0.12);
-  text-align: left;
-}
-
-.rank-table tbody tr:hover,
-.data-table tbody tr:hover {
-  background: rgba(78, 148, 97, 0.05);
-}
-
-.stat-card {
-  min-height: 130px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.stat-card strong {
-  font-size: 2rem;
-  color: var(--primary-deep);
-}
-
-.info-box {
-  margin-top: 18px;
-  display: grid;
-  gap: 12px;
-}
-
-.member-list {
-  display: grid;
-  gap: 10px;
-  margin: 16px 0;
-}
-
-.member-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 12px 14px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.62);
-}
-
-.checkbox-row {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.checkbox-row input {
-  width: 18px;
-  height: 18px;
-  padding: 0;
-}
-
-.compact-checkbox {
-  padding: 0;
-}
-
-.task-builder {
-  display: grid;
-  gap: 16px;
-}
-
-.task-builder-card {
-  padding: 18px;
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.64);
-  border: 1px dashed rgba(78, 148, 97, 0.24);
-  display: grid;
-  gap: 14px;
-}
-
-.review-card {
-  display: grid;
-  gap: 14px;
-}
-
-.review-filter-form {
-  align-items: end;
-}
-
-.review-filter-action {
-  justify-content: end;
-}
-
-.empty-state {
-  padding: 32px;
-  border-radius: var(--radius-lg);
-  background: rgba(255, 255, 255, 0.68);
-  border: 1px dashed rgba(78, 148, 97, 0.24);
-  text-align: center;
-}
-
-.pulse-highlight {
-  animation: pulse-glow 1.8s ease;
-}
-
-@keyframes rise-in {
-  from {
-    opacity: 0;
-    transform: translateY(18px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes pulse-glow {
-  0% {
-    box-shadow: var(--shadow);
-  }
-  35% {
-    box-shadow: 0 0 0 8px rgba(246, 184, 91, 0.18), var(--shadow);
-  }
-  100% {
-    box-shadow: var(--shadow);
-  }
-}
-
-@media (max-width: 980px) {
-  .topbar,
-  .hero-card,
-  .page-grid,
-  .two-column-layout,
-  .login-page,
-  .compact-login-page,
-  .admin-activity-grid {
-    grid-template-columns: 1fr;
-    flex-direction: column;
-  }
-
-  .topbar {
-    border-radius: 28px;
-    align-items: flex-start;
-  }
-
-  .topnav {
-    width: 100%;
-    justify-content: flex-start;
-  }
-
-  .login-copy {
-    min-height: auto;
-  }
-}
-
-@media (max-width: 720px) {
-  .shell {
-    width: min(100% - 20px, 1200px);
-    padding-top: 18px;
-  }
-
-  .topbar,
-  .hero-card,
-  .glass-card,
-  .login-copy,
-  .login-panel {
-    padding: 20px;
-  }
-
-  .cols-2,
-  .cols-3,
-  .meta-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .activity-grid,
-  .task-grid,
-  .group-grid,
-  .review-grid,
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .upload-form,
-  .inline-form,
-  .card-footer,
-  .section-head,
-  .stack-item,
-  .builder-title-row,
-  .task-card-head,
-  .task-status-row {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .btn,
-  .full-width-btn {
-    width: 100%;
-  }
-}
-
-.activity-actions,
-.task-editor-list {
-  display: grid;
-  gap: 14px;
-}
-
-.activity-catalog-panel {
-  overflow: hidden;
-}
-
-.activity-catalog-head {
-  margin-bottom: 20px;
-}
-
-.published-activity-list {
-  display: grid;
-  gap: 20px;
-}
-
-.published-activity-card {
-  position: relative;
-  display: grid;
-  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.9fr);
-  gap: 22px;
-  padding: 22px;
-  border-radius: 30px;
-  background:
-    radial-gradient(circle at 100% 0%, rgba(241, 193, 107, 0.18), transparent 28%),
-    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(236, 248, 239, 0.9));
-  border: 1px solid rgba(78, 148, 97, 0.16);
-  box-shadow: 0 20px 38px rgba(86, 127, 93, 0.12);
-}
-
-.published-activity-card::before {
-  content: "";
-  position: absolute;
-  inset: 0 auto auto 24px;
-  width: 110px;
-  height: 5px;
-  border-radius: 999px;
-  background: linear-gradient(90deg, rgba(96, 175, 114, 0.9), rgba(241, 193, 107, 0.82));
-}
-
-.published-activity-main,
-.published-activity-side,
-.published-activity-form {
-  display: grid;
-  gap: 16px;
-}
-
-.published-activity-main {
-  min-width: 0;
-  align-content: start;
-}
-
-.published-activity-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.published-activity-title {
-  margin: 4px 0 0;
-  font-size: 1.8rem;
-  line-height: 1.12;
-}
-
-.published-activity-badges {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.published-activity-metrics,
-.published-activity-notes {
-  display: grid;
-  gap: 14px;
-}
-
-.published-activity-metrics {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.published-activity-notes {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.activity-metric-card,
-.activity-note-card {
-  padding: 16px 18px;
-  border-radius: 22px;
-  border: 1px solid rgba(78, 148, 97, 0.12);
-}
-
-.activity-metric-card {
-  background: rgba(255, 255, 255, 0.78);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
-}
-
-.activity-note-card {
-  background: rgba(244, 250, 245, 0.88);
-}
-
-.activity-metric-card span,
-.activity-note-card span {
-  display: block;
-  font-size: 0.8rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.activity-metric-card strong,
-.activity-note-card strong {
-  display: block;
-  margin-top: 8px;
-  line-height: 1.45;
-  color: var(--primary-deep);
-}
-
-.activity-metric-card strong {
-  font-size: 1.02rem;
-}
-
-.published-activity-side {
-  align-content: start;
-  padding: 18px;
-  border-radius: 26px;
-  background: linear-gradient(180deg, rgba(247, 252, 248, 0.94), rgba(229, 244, 233, 0.88));
-  border: 1px solid rgba(78, 148, 97, 0.14);
-}
-
-.published-activity-side .btn,
-.published-delete-form .btn {
-  width: 100%;
-  justify-content: center;
-}
-
-.published-toggle-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-  padding: 14px 16px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.78);
-  border: 1px solid rgba(78, 148, 97, 0.12);
-}
-
-.published-toggle-row > div {
-  display: grid;
-  gap: 4px;
-}
-
-.published-toggle-row strong {
-  font-size: 1rem;
-  color: var(--primary-deep);
-}
-
-.published-toggle-row span {
-  font-size: 0.88rem;
-  line-height: 1.45;
-  color: var(--muted);
-}
-
-.published-toggle-row input {
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  margin: 0;
-  flex: 0 0 auto;
-}
-
-.task-editor-card {
-  gap: 16px;
-}
-
-.editor-preview-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
-}
-
-.editor-thumb,
-.empty-thumb {
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: cover;
-  border-radius: 20px;
-  border: 1px solid rgba(78, 148, 97, 0.16);
-  background: rgba(255, 255, 255, 0.6);
-}
-
-.empty-thumb {
-  display: grid;
-  place-items: center;
-  color: var(--muted);
-}
-
-.align-end-checkbox {
-  align-self: end;
-}
-
-@media (max-width: 720px) {
-  .editor-preview-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.users-admin-grid,
-.presence-admin-grid,
-.review-live-grid {
-  grid-template-columns: 1fr 1fr;
-}
-
-.bulk-toolbar {
-  display: grid;
-  grid-template-columns: 1fr 1fr auto;
-  gap: 14px;
-  margin-bottom: 18px;
-  align-items: end;
-}
-
-.leaderboard-hero {
-  align-items: stretch;
-}
-
-.hero-split-main {
-  display: grid;
-  gap: 14px;
-  flex: 1 1 55%;
-}
-
-.hero-side-rank {
-  width: min(420px, 100%);
-  padding: 18px 20px;
-}
-
-.inset-rank-card {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(231, 248, 233, 0.82));
-}
-
-.compact-head {
-  margin-bottom: 12px;
-}
-
-.task-carousel-shell {
-  display: grid;
-  gap: 18px;
-}
-
-.task-carousel-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-}
-
-.carousel-controls {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.task-flip-book {
-  position: relative;
-  min-height: 720px;
-}
-
-.task-page {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  pointer-events: none;
-  transform: perspective(1200px) rotateY(10deg) translateX(24px) scale(0.98);
-  transition: opacity 0.45s ease, transform 0.45s ease;
-}
-
-.task-page.is-active {
-  opacity: 1;
-  pointer-events: auto;
-  transform: perspective(1200px) rotateY(0deg) translateX(0) scale(1);
-  z-index: 2;
-}
-
-.task-page.is-left {
-  transform: perspective(1200px) rotateY(-12deg) translateX(-26px) scale(0.97);
-}
-
-.task-page-inner {
-  display: grid;
-  gap: 18px;
-}
-
-.task-page-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
-  gap: 22px;
-}
-
-.task-page-content {
-  display: grid;
-  gap: 14px;
-  align-content: start;
-}
-
-.task-page-media {
-  display: grid;
-  gap: 12px;
-}
-
-.is-hidden {
-  display: none !important;
-}
-
-.clue-modal {
-  position: fixed;
-  inset: 0;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  z-index: 50;
-  padding: 24px;
-}
-
-.clue-modal.is-open {
-  display: flex;
-}
-
-.clue-modal-backdrop {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(24, 57, 34, 0.78), rgba(76, 148, 97, 0.48), rgba(246, 184, 91, 0.42));
-  backdrop-filter: blur(16px);
-}
-
-.clue-modal-dialog {
-  position: relative;
-  z-index: 1;
-  width: min(760px, 100%);
-  display: grid;
-  gap: 12px;
-}
-
-.clue-close-btn {
-  justify-self: end;
-}
-
-.clue-gradient-panel {
-  padding: 18px;
-  border-radius: 30px;
-  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(223, 245, 228, 0.86), rgba(255, 241, 214, 0.9));
-  box-shadow: 0 30px 90px rgba(20, 51, 29, 0.28);
-}
-
-.clue-gradient-panel img {
-  width: 100%;
-  border-radius: 24px;
-  max-height: 72vh;
-  object-fit: contain;
-  background: rgba(255, 255, 255, 0.72);
-}
-
-.review-live-grid .review-grid {
-  grid-template-columns: 1fr;
-}
-
-.presence-item,
-.activity-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.inset-rank-card::after,
-.hero-side-rank::after {
-  display: none;
-}
-
-@media (max-width: 1080px) {
-  .leaderboard-hero,
-  .task-page-grid,
-  .users-admin-grid,
-  .presence-admin-grid,
-  .review-live-grid,
-  .published-activity-card {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-side-rank {
-    width: 100%;
-  }
-}
-
-@media (max-width: 720px) {
-  .bulk-toolbar,
-  .task-carousel-head,
-  .carousel-controls,
-  .presence-item,
-  .activity-actions,
-  .published-activity-head,
-  .published-toggle-row {
-    grid-template-columns: 1fr;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .published-activity-metrics,
-  .published-activity-notes {
-    grid-template-columns: 1fr;
-  }
-
-  .published-activity-badges {
-    justify-content: flex-start;
-  }
-
-  .task-flip-book {
-    min-height: 900px;
-  }
-}
-
-.image-library-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 18px;
-}
-
-.image-library-card {
-  display: grid;
-  gap: 14px;
-  padding: 16px;
-}
-
-.image-library-thumb {
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: cover;
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.74);
-  border: 1px solid rgba(78, 148, 97, 0.14);
-}
-
-.image-library-body {
-  display: grid;
-  gap: 12px;
-}
-
-.image-library-path {
-  word-break: break-all;
-}
-
-.image-library-actions {
-  align-items: center;
-}
-
-.compact-stack-list {
-  gap: 8px;
-}
-
-.compact-stack-item {
-  padding: 10px 12px;
+:root {
+  --bg: #eef8ef;
+  --bg-deep: #d7edd7;
+  --surface: rgba(255, 255, 255, 0.75);
+  --surface-strong: rgba(255, 255, 255, 0.9);
+  --border: rgba(98, 146, 104, 0.22);
+  --text: #173622;
+  --muted: #5d7865;
+  --primary: #4e9461;
+  --primary-deep: #2e6a44;
+  --primary-soft: #e6f4e5;
+  --accent: #f6b85b;
+  --danger: #d95b67;
+  --shadow: 0 24px 70px rgba(53, 98, 62, 0.12);
+  --radius-lg: 28px;
+  --radius-md: 20px;
+  --radius-sm: 14px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  font-family: "Segoe UI Variable", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
+  color: var(--text);
+  background: linear-gradient(180deg, #f5fbf2 0%, #e7f6e8 35%, #e1f0e0 100%);
+  min-height: 100vh;
+}
+
+.page-backdrop {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 12% 20%, rgba(246, 184, 91, 0.16), transparent 22%),
+    radial-gradient(circle at 82% 14%, rgba(112, 188, 128, 0.18), transparent 20%),
+    radial-gradient(circle at 50% 100%, rgba(120, 180, 139, 0.18), transparent 28%);
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+.shell {
+  position: relative;
+  width: min(1200px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 28px 0 44px;
+}
+
+.content-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.topbar {
+  position: sticky;
+  top: 18px;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 18px 22px;
+  margin-bottom: 24px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(14px);
+  box-shadow: var(--shadow);
+}
+
+.brand-block {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.brand-mark {
+  width: 52px;
+  height: 52px;
+  display: grid;
+  place-items: center;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #63b67c, #88ca99);
+  color: white;
+  font-size: 1.4rem;
+  font-weight: 700;
+  box-shadow: 0 18px 26px rgba(76, 134, 91, 0.25);
+}
+
+.eyebrow {
+  margin: 0 0 6px;
+  color: var(--primary);
+  font-size: 0.78rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.brand-title,
+.hero-card h2,
+.glass-card h3,
+.login-copy h1,
+.login-panel h2 {
+  margin: 0;
+  font-family: "Georgia", "STKaiti", "KaiTi", serif;
+  letter-spacing: 0.02em;
+}
+
+.topnav {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.topnav a,
+.ghost-link {
+  color: var(--primary-deep);
+  text-decoration: none;
+  padding: 10px 14px;
+  border-radius: 999px;
+  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
+}
+
+.topnav a:hover,
+.ghost-link:hover {
+  background: rgba(78, 148, 97, 0.12);
+  transform: translateY(-1px);
+}
+
+.hero-card,
+.glass-card,
+.login-panel,
+.login-copy {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
+  backdrop-filter: blur(16px);
+  box-shadow: var(--shadow);
+}
+
+.hero-card {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 30px;
+  animation: rise-in 0.7s ease both;
+}
+
+.hero-card::after,
+.glass-card::after,
+.login-panel::after,
+.login-copy::after {
+  content: "";
+  position: absolute;
+  inset: auto -12% -50% auto;
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(246, 184, 91, 0.18), transparent 70%);
+}
+
+.hero-badges,
+.chip-row,
+.feature-list,
+.action-grid,
+.task-status-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.pill,
+.chip,
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  font-size: 0.92rem;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(78, 148, 97, 0.16);
+}
+
+.status-approved {
+  background: rgba(78, 148, 97, 0.14);
+  color: var(--primary-deep);
+}
+
+.status-rejected {
+  background: rgba(217, 91, 103, 0.14);
+  color: #9b3144;
+}
+
+.lead,
+.muted,
+.mini-note,
+label span,
+.meta-grid span,
+.data-table th {
+  color: var(--muted);
+}
+
+.lead {
+  font-size: 1.02rem;
+  line-height: 1.7;
+}
+
+.muted,
+.mini-note,
+.feedback-box {
+  line-height: 1.6;
+}
+
+.flash-stack {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.flash {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  border-radius: 18px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 0 14px 34px rgba(88, 132, 95, 0.08);
+}
+
+.flash-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--primary);
+}
+
+.flash-error .flash-dot {
+  background: var(--danger);
+}
+
+.flash-success .flash-dot {
+  background: #58a46b;
+}
+
+.flash p {
+  margin: 0;
+}
+
+.card-grid,
+.stats-grid,
+.task-grid,
+.review-grid {
+  display: grid;
+  gap: 20px;
+}
+
+.activity-grid {
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.group-grid,
+.review-grid {
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.task-grid {
+  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
+}
+
+.stats-grid {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.page-grid,
+.two-column-layout {
+  display: grid;
+  grid-template-columns: minmax(280px, 360px) 1fr;
+  gap: 22px;
+}
+
+.admin-activity-grid {
+  grid-template-columns: 1fr;
+}
+
+.activity-actions,
+.task-editor-list {
+  display: grid;
+  gap: 14px;
+}
+
+.activity-catalog-panel {
+  overflow: hidden;
+}
+
+.activity-catalog-head {
+  margin-bottom: 20px;
+}
+
+.published-activity-list {
+  display: grid;
+  gap: 20px;
+}
+
+.published-activity-card {
+  position: relative;
+  display: grid;
+  gap: 18px;
+  padding: 24px;
+  border-radius: 30px;
+  background:
+    radial-gradient(circle at 100% 0%, rgba(241, 193, 107, 0.18), transparent 28%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(236, 248, 239, 0.9));
+  border: 1px solid rgba(78, 148, 97, 0.16);
+  box-shadow: 0 20px 38px rgba(86, 127, 93, 0.12);
+}
+
+.published-activity-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto auto 24px;
+  width: 120px;
+  height: 5px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(96, 175, 114, 0.9), rgba(241, 193, 107, 0.82));
+}
+
+.published-activity-hero,
+.published-settings-form,
+.published-delete-form,
+.published-toggle-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.published-activity-hero {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+}
+
+.published-activity-title-wrap {
+  min-width: 0;
+}
+
+.published-activity-title {
+  margin: 4px 0 0;
+  font-size: 1.8rem;
+  line-height: 1.1;
+}
+
+.published-activity-badges {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.published-activity-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 14px;
+}
+
+.activity-metric-card {
+  min-width: 0;
+  padding: 16px 18px;
+  border-radius: 22px;
+  border: 1px solid rgba(78, 148, 97, 0.12);
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
+}
+
+.activity-metric-card span {
+  display: block;
+  font-size: 0.8rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.activity-metric-card strong {
+  display: block;
+  margin-top: 8px;
+  line-height: 1.45;
+  color: var(--primary-deep);
+  font-size: 1rem;
+  word-break: break-word;
+}
+
+.published-settings-form {
+  padding: 18px;
+  border-radius: 26px;
+  background: linear-gradient(180deg, rgba(247, 252, 248, 0.94), rgba(229, 244, 233, 0.88));
+  border: 1px solid rgba(78, 148, 97, 0.14);
+}
+
+.published-toggle-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.published-toggle-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 18px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid rgba(78, 148, 97, 0.12);
+}
+
+.published-toggle-copy {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.published-toggle-copy strong {
+  font-size: 1rem;
+  color: var(--primary-deep);
+}
+
+.published-toggle-copy span {
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: var(--muted);
+}
+
+.published-toggle-card input {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  flex: 0 0 auto;
+}
+
+.published-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+}
+
+.published-action-row .btn {
+  flex: 1 1 220px;
+  justify-content: center;
+}
+
+.published-delete-form .btn {
+  width: 100%;
+  justify-content: center;
+}
+
+.task-editor-card {
+  gap: 16px;
+}
+
+.editor-preview-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.editor-thumb,
+.empty-thumb {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  border-radius: 20px;
+  border: 1px solid rgba(78, 148, 97, 0.16);
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.empty-thumb {
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+}
+
+.align-end-checkbox {
+  align-self: end;
+}
+
+@media (max-width: 720px) {
+  .editor-preview-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.users-admin-grid,
+.presence-admin-grid,
+.review-live-grid {
+  grid-template-columns: 1fr 1fr;
+}
+
+.bulk-toolbar {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 14px;
+  margin-bottom: 18px;
+  align-items: end;
+}
+
+.leaderboard-hero {
+  align-items: stretch;
+}
+
+.hero-split-main {
+  display: grid;
+  gap: 14px;
+  flex: 1 1 55%;
+}
+
+.hero-side-rank {
+  width: min(420px, 100%);
+  padding: 18px 20px;
+}
+
+.inset-rank-card {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(231, 248, 233, 0.82));
+}
+
+.compact-head {
+  margin-bottom: 12px;
+}
+
+.task-carousel-shell {
+  display: grid;
+  gap: 18px;
+}
+
+.task-carousel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.carousel-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.task-flip-book {
+  position: relative;
+  min-height: 720px;
+}
+
+.task-page {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: perspective(1200px) rotateY(10deg) translateX(24px) scale(0.98);
+  transition: opacity 0.45s ease, transform 0.45s ease;
+}
+
+.task-page.is-active {
+  opacity: 1;
+  pointer-events: auto;
+  transform: perspective(1200px) rotateY(0deg) translateX(0) scale(1);
+  z-index: 2;
+}
+
+.task-page.is-left {
+  transform: perspective(1200px) rotateY(-12deg) translateX(-26px) scale(0.97);
+}
+
+.task-page-inner {
+  display: grid;
+  gap: 18px;
+}
+
+.task-page-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+  gap: 22px;
+}
+
+.task-page-content {
+  display: grid;
+  gap: 14px;
+  align-content: start;
+}
+
+.task-page-media {
+  display: grid;
+  gap: 12px;
+}
+
+.is-hidden {
+  display: none !important;
+}
+
+.clue-modal {
+  position: fixed;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  padding: 24px;
+}
+
+.clue-modal.is-open {
+  display: flex;
+}
+
+.clue-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(24, 57, 34, 0.78), rgba(76, 148, 97, 0.48), rgba(246, 184, 91, 0.42));
+  backdrop-filter: blur(16px);
+}
+
+.clue-modal-dialog {
+  position: relative;
+  z-index: 1;
+  width: min(760px, 100%);
+  display: grid;
+  gap: 12px;
+}
+
+.clue-close-btn {
+  justify-self: end;
+}
+
+.clue-gradient-panel {
+  padding: 18px;
+  border-radius: 30px;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(223, 245, 228, 0.86), rgba(255, 241, 214, 0.9));
+  box-shadow: 0 30px 90px rgba(20, 51, 29, 0.28);
+}
+
+.clue-gradient-panel img {
+  width: 100%;
+  border-radius: 24px;
+  max-height: 72vh;
+  object-fit: contain;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.review-live-grid .review-grid {
+  grid-template-columns: 1fr;
+}
+
+.presence-item,
+.activity-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.inset-rank-card::after,
+.hero-side-rank::after {
+  display: none;
+}
+
+@media (max-width: 1080px) {
+  .leaderboard-hero,
+  .task-page-grid,
+  .users-admin-grid,
+  .presence-admin-grid,
+  .review-live-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .published-toggle-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-side-rank {
+    width: 100%;
+  }
+}
+
+@media (max-width: 720px) {
+  .bulk-toolbar,
+  .task-carousel-head,
+  .carousel-controls,
+  .presence-item,
+  .activity-actions,
+  .published-activity-hero,
+  .published-toggle-card,
+  .published-action-row {
+    grid-template-columns: 1fr;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .published-activity-metrics,
+  .published-toggle-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .published-activity-badges {
+    justify-content: flex-start;
+  }
+
+  .task-flip-book {
+    min-height: 900px;
+  }
+}
+
+.image-library-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 18px;
+}
+
+.image-library-card {
+  display: grid;
+  gap: 14px;
+  padding: 16px;
+}
+
+.image-library-thumb {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.74);
+  border: 1px solid rgba(78, 148, 97, 0.14);
+}
+
+.image-library-body {
+  display: grid;
+  gap: 12px;
+}
+
+.image-library-path {
+  word-break: break-all;
+}
+
+.image-library-actions {
+  align-items: center;
+}
+
+.compact-stack-list {
+  gap: 8px;
+}
+
+.compact-stack-item {
+  padding: 10px 12px;
 }
 
 

app/templates/admin_activities.html

@@ -85,85 +85,81 @@
         <div>
           <p class="eyebrow">Published Activities</p>
           <h3>已发布活动</h3>
-          <p class="mini-note">把活动信息、可见性开关和危险操作拆分展示，管理起来会更清晰。</p>
+          <p class="mini-note">活动信息、显示设置和危险操作分层展示，避免按钮和内容互相挤压。</p>
         </div>
       </div>
       <div class="published-activity-list">
         {% for activity in activities %}
           <article class="published-activity-card">
-            <div class="published-activity-main">
-              <div class="published-activity-head">
-                <div>
-                  <p class="eyebrow">Activity {{ loop.index }}</p>
-                  <h3 class="published-activity-title">{{ activity.title }}</h3>
-                </div>
-                <div class="published-activity-badges">
-                  <span class="status-badge {% if activity.is_visible %}status-approved{% else %}status-rejected{% endif %}">
-                    {{ '活动可见' if activity.is_visible else '活动隐藏' }}
-                  </span>
-                  <span class="status-badge {% if activity.leaderboard_visible %}status-approved{% else %}status-rejected{% endif %}">
-                    {{ '排行可见' if activity.leaderboard_visible else '排行隐藏' }}
-                  </span>
-                </div>
+            <div class="published-activity-hero">
+              <div class="published-activity-title-wrap">
+                <p class="eyebrow">Activity {{ loop.index }}</p>
+                <h3 class="published-activity-title">{{ activity.title }}</h3>
               </div>
-
-              <div class="published-activity-metrics">
-                <div class="activity-metric-card">
-                  <span>开始时间</span>
-                  <strong>{{ activity.start_at|datetime_local }}</strong>
-                </div>
-                <div class="activity-metric-card">
-                  <span>截止时间</span>
-                  <strong>{{ activity.deadline_at|datetime_local }}</strong>
-                </div>
-                <div class="activity-metric-card">
-                  <span>任务数量</span>
-                  <strong>{{ activity.tasks|length }} 个任务</strong>
-                </div>
+              <div class="published-activity-badges">
+                <span class="status-badge {% if activity.is_visible %}status-approved{% else %}status-rejected{% endif %}">
+                  {{ '活动可见' if activity.is_visible else '活动隐藏' }}
+                </span>
+                <span class="status-badge {% if activity.leaderboard_visible %}status-approved{% else %}status-rejected{% endif %}">
+                  {{ '排行可见' if activity.leaderboard_visible else '排行隐藏' }}
+                </span>
               </div>
+            </div>
 
-              <div class="published-activity-notes">
-                <div class="activity-note-card">
-                  <span>创建人</span>
-                  <strong>{{ activity.created_by.display_name }}</strong>
-                </div>
-                <div class="activity-note-card">
-                  <span>线索间隔</span>
-                  <strong>{{ activity.clue_interval_minutes if activity.clue_interval_minutes is not none else '与活动开始同步' }}</strong>
-                </div>
+            <div class="published-activity-metrics">
+              <div class="activity-metric-card">
+                <span>开始时间</span>
+                <strong>{{ activity.start_at|datetime_local }}</strong>
+              </div>
+              <div class="activity-metric-card">
+                <span>截止时间</span>
+                <strong>{{ activity.deadline_at|datetime_local }}</strong>
+              </div>
+              <div class="activity-metric-card">
+                <span>任务数量</span>
+                <strong>{{ activity.tasks|length }} 个任务</strong>
+              </div>
+              <div class="activity-metric-card">
+                <span>创建人</span>
+                <strong>{{ activity.created_by.display_name }}</strong>
+              </div>
+              <div class="activity-metric-card">
+                <span>线索间隔</span>
+                <strong>{{ activity.clue_interval_minutes if activity.clue_interval_minutes is not none else '与活动开始同步' }}</strong>
               </div>
             </div>
 
-            <aside class="published-activity-side">
-              <a class="btn btn-primary" href="/admin/activities/{{ activity.id }}/edit">编辑活动</a>
-
-              <form method="post" action="/admin/activities/{{ activity.id }}/visibility" class="published-activity-form">
-                <label class="published-toggle-row">
-                  <div>
+            <form method="post" action="/admin/activities/{{ activity.id }}/visibility" class="published-settings-form">
+              <div class="published-toggle-grid">
+                <label class="published-toggle-card">
+                  <div class="published-toggle-copy">
                     <strong>活动对用户可见</strong>
                     <span>关闭后，用户端不会显示，也不能直接进入此活动。</span>
                   </div>
                   <input type="checkbox" name="is_visible" {% if activity.is_visible %}checked{% endif %} />
                 </label>
-                <label class="published-toggle-row">
-                  <div>
+                <label class="published-toggle-card">
+                  <div class="published-toggle-copy">
                     <strong>排行榜对用户可见</strong>
                     <span>管理员始终可见，这里只控制普通用户是否能看到排行榜。</span>
                   </div>
                   <input type="checkbox" name="leaderboard_visible" {% if activity.leaderboard_visible %}checked{% endif %} />
                 </label>
+              </div>
+              <div class="published-action-row">
+                <a class="btn btn-primary" href="/admin/activities/{{ activity.id }}/edit">编辑活动</a>
                 <button class="btn btn-secondary" type="submit">保存显示设置</button>
-              </form>
+              </div>
+            </form>
 
-              <form method="post" action="/admin/activities/{{ activity.id }}/delete" class="published-delete-form">
-                <button class="btn btn-danger" type="submit" onclick="return confirm('确定删除这个活动吗？相关任务、审核记录和本地提交图片都会一并删除。');">删除活动</button>
-              </form>
-            </aside>
+            <form method="post" action="/admin/activities/{{ activity.id }}/delete" class="published-delete-form">
+              <button class="btn btn-danger" type="submit" onclick="return confirm('确定删除这个活动吗？相关任务、审核记录和本地提交图片都会一并删除。');">删除活动</button>
+            </form>
           </article>
         {% else %}
           <article class="empty-state">
             <h3>还没有活动</h3>
-            <p>先在左侧发布一个活动，这里会自动整理成更清晰的管理卡片。</p>
+            <p>先在上方发布一个活动，这里会自动整理成清晰的管理卡片。</p>
           </article>
         {% endfor %}
       </div>