From b352d43d640d6fa77ca9346cfc79105f67209cd4 Mon Sep 17 00:00:00 2001
From: liumangmang <a362165265@qq.com>
Date: Thu, 7 May 2026 21:20:54 +0800
Subject: [PATCH] feat: add Dark Professional theme CSS with animations

Phase 7-8 complete - added exceptions.css with wizard step transitions,
modal animations, skeleton loading pulse, dark scrollbar styling, and
indigo/emerald accent colors for form elements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/main.jsx              |  1 +
 frontend/src/styles/exceptions.css | 49 ++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 frontend/src/styles/exceptions.css

diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 47742c1..979bc8e 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
+import './styles/exceptions.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
diff --git a/frontend/src/styles/exceptions.css b/frontend/src/styles/exceptions.css
new file mode 100644
index 0000000..ca69034
--- /dev/null
+++ b/frontend/src/styles/exceptions.css
@@ -0,0 +1,49 @@
+/* Dark Professional theme animations for exception center */
+
+/* Wizard step transition */
+@keyframes exception-fade-in {
+  from { opacity: 0; transform: translateX(8px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+/* Modal animations */
+@keyframes exception-modal-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes exception-modal-scale {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+/* Skeleton loading pulse */
+@keyframes exception-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* Dark scrollbar for exception panels */
+.exception-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+.exception-scrollbar::-webkit-scrollbar-track {
+  background: #0f172a;
+}
+.exception-scrollbar::-webkit-scrollbar-thumb {
+  background: #334155;
+  border-radius: 3px;
+}
+.exception-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #475569;
+}
+
+/* Smooth checkbox accent */
+input[type="checkbox"] {
+  accent-color: #6366f1;
+}
+
+/* Range input accent for audio player */
+input[type="range"] {
+  accent-color: #34d399;
+}