Merge branch '贡献功能开发' into dev

sidepanel/sidepanel.css

@@ -100,7 +100,9 @@ body {
 header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 10px;
   position: sticky;
   top: 0;
   z-index: 200;
@@ -228,12 +230,19 @@ header {
   gap: 4px;
   flex-shrink: 0;
   flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
 .btn-contribution-mode {
   padding-inline: 10px;
 }
 
+.btn-contribution-mode.is-active {
+  border-color: color-mix(in srgb, var(--orange) 58%, var(--border));
+  background: color-mix(in srgb, var(--orange) 14%, var(--bg-base));
+  color: var(--orange);
+}
+
 /* ============================================================
    Theme Toggle
    ============================================================ */
@@ -541,6 +550,108 @@ header {
   pointer-events: none;
 }
 
+.is-contribution-hidden {
+  display: none !important;
+}
+
+.contribution-mode-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid color-mix(in srgb, var(--orange) 28%, var(--border));
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--orange) 10%, var(--bg-base)),
+      color-mix(in srgb, var(--bg-surface) 96%, var(--bg-base))
+    );
+}
+
+.contribution-mode-panel[hidden] {
+  display: none !important;
+}
+
+.contribution-mode-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.contribution-mode-badge {
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--orange) 16%, var(--bg-base));
+  color: var(--orange);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.contribution-mode-text {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.contribution-mode-status-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.contribution-mode-status-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--bg-base) 92%, var(--orange-soft));
+}
+
+.contribution-mode-status-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+}
+
+.contribution-mode-status-value {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--text-primary);
+}
+
+.contribution-mode-summary {
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--bg-base) 88%, var(--orange-soft));
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.contribution-mode-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.contribution-mode-actions .btn {
+  width: 100%;
+  justify-content: center;
+}
+
+@media (max-width: 540px) {
+  .contribution-mode-status-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .section-mini-header {
   display: flex;
   align-items: center;