Muyue/agora-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply glassmorphism design across all components

Browse Source 
Replace gradient backgrounds and solid colors with:
- Dark gradient backgrounds (#0f0c29, #302b63, #24243e)
- Semi-transparent glass cards with backdrop-filter blur
- Subtle white borders at 15-20% opacity
- Soft shadows for depth
- White text with appropriate opacity levels
- Consistent accent colors (blue/purple)

Components updated:
- CollaborativeInput: Main form with glass effect
- CollaborativeSession: Session header and panels
- DocumentViewer: Content display with dark theme
- NetworkStatus: Status indicator with glass
- App: Root background with gradient

Design features:
- Consistent spacing and border radius (12-20px)
- Smooth transitions on hover
- Accessible text contrast
- Professional, modern appearance

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Augustin ROUX 2025-10-17 17:31:19 +02:00
parent 08056ce9fd
commit 610d4bb686
5 changed files with 164 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/App.vue
View File

@ -67,6 +67,7 @@ body {
.app { .app {
min-height: 100vh; min-height: 100vh;
padding: 2rem; padding: 2rem;
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
} }
.new-session-btn { .new-session-btn {
@ -74,21 +75,22 @@ body {
top: 2rem; top: 2rem;
right: 2rem; right: 2rem;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
background-color: white; background: rgba(102, 126, 234, 0.8);
border: 2px solid #667eea; border: 1px solid rgba(255, 255, 255, 0.2);
color: #667eea; color: white;
border-radius: 8px; border-radius: 12px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
backdrop-filter: blur(10px);
z-index: 50; z-index: 50;
} }
.new-session-btn:hover { .new-session-btn:hover {
background-color: #667eea; background: rgba(102, 126, 234, 0.95);
color: white;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
border-color: rgba(255, 255, 255, 0.3);
} }
</style> </style>

132
frontend/src/components/CollaborativeInput.vue
View File

@ -192,12 +192,28 @@ const removeFile = () => {
.collaborative-input { .collaborative-input {
min-height: 100vh; min-height: 100vh;
padding: 2rem; padding: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
position: relative;
overflow: hidden;
}
.collaborative-input::before {
content: '';
position: fixed;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
} }
.container { .container {
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
position: relative;
z-index: 1;
} }
.header { .header {
@ -210,20 +226,24 @@ const removeFile = () => {
font-size: 2.5rem; font-size: 2.5rem;
margin: 0; margin: 0;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-weight: 700;
letter-spacing: -0.5px;
} }
.subtitle { .subtitle {
font-size: 1.1rem; font-size: 1.1rem;
opacity: 0.95; opacity: 0.85;
margin: 0; margin: 0;
line-height: 1.6; line-height: 1.6;
} }
.form { .form {
background: white; background: rgba(255, 255, 255, 0.08);
border-radius: 16px; backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 2.5rem; padding: 2.5rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -234,13 +254,13 @@ const removeFile = () => {
.label { .label {
display: block; display: block;
font-weight: 600; font-weight: 600;
color: #2c3e50; color: white;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem; font-size: 1rem;
} }
.label-hint { .label-hint {
color: #666; color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem; font-size: 0.95rem;
margin: 0 0 0.75rem 0; margin: 0 0 0.75rem 0;
} }
@ -248,23 +268,31 @@ const removeFile = () => {
.textarea { .textarea {
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
border: 2px solid #e0e6ed; border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px; border-radius: 12px;
font-family: inherit; font-family: inherit;
font-size: 1rem; font-size: 1rem;
resize: vertical; resize: vertical;
transition: border-color 0.3s; transition: all 0.3s;
background: rgba(255, 255, 255, 0.05);
color: white;
backdrop-filter: blur(5px);
}
.textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
} }
.textarea:focus { .textarea:focus {
outline: none; outline: none;
border-color: #667eea; border-color: rgba(102, 126, 234, 0.6);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), inset 0 0 20px rgba(102, 126, 234, 0.05);
} }
.hint { .hint {
font-size: 0.85rem; font-size: 0.85rem;
color: #999; color: rgba(255, 255, 255, 0.6);
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0; margin-bottom: 0;
} }
@ -283,38 +311,47 @@ const removeFile = () => {
.select { .select {
padding: 0.75rem; padding: 0.75rem;
border: 2px solid #e0e6ed; border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px; border-radius: 12px;
font-size: 1rem; font-size: 1rem;
background: white; background: rgba(255, 255, 255, 0.05);
color: white;
cursor: pointer; cursor: pointer;
transition: border-color 0.3s; transition: all 0.3s;
backdrop-filter: blur(5px);
}
.select option {
background: #302b63;
color: white;
} }
.select:focus { .select:focus {
outline: none; outline: none;
border-color: #667eea; border-color: rgba(102, 126, 234, 0.6);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
} }
.info-box { .info-box {
background: #f5f7fa; background: rgba(102, 126, 234, 0.1);
border: 2px solid #e0e6ed; border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: 8px; border-radius: 12px;
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
backdrop-filter: blur(10px);
} }
.info-box p { .info-box p {
margin: 0 0 0.75rem 0; margin: 0 0 0.75rem 0;
color: #2c3e50; color: white;
font-weight: 600; font-weight: 600;
} }
.info-box ul { .info-box ul {
margin: 0; margin: 0;
padding-left: 1.5rem; padding-left: 1.5rem;
color: #666; color: rgba(255, 255, 255, 0.8);
} }
.info-box li { .info-box li {
@ -324,24 +361,27 @@ const removeFile = () => {
.submit-btn { .submit-btn {
width: 100%; width: 100%;
padding: 1.25rem; padding: 1.25rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
color: white; color: white;
border: none; border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px; border-radius: 12px;
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s; transition: all 0.3s;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
backdrop-filter: blur(10px);
} }
.submit-btn:hover:not(:disabled) { .submit-btn:hover:not(:disabled) {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6); background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
border-color: rgba(255, 255, 255, 0.3);
} }
.submit-btn:disabled { .submit-btn:disabled {
opacity: 0.6; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
@ -357,24 +397,26 @@ const removeFile = () => {
.file-label { .file-label {
display: block; display: block;
padding: 1rem; padding: 1rem;
border: 2px dashed #667eea; border: 2px dashed rgba(102, 126, 234, 0.5);
border-radius: 8px; border-radius: 12px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
background: #f9fafb; background: rgba(102, 126, 234, 0.05);
color: #667eea; color: rgba(255, 255, 255, 0.8);
font-weight: 600; font-weight: 600;
backdrop-filter: blur(5px);
} }
.file-label:hover { .file-label:hover {
background: #f0f3ff; background: rgba(102, 126, 234, 0.15);
border-color: #764ba2; border-color: rgba(102, 126, 234, 0.8);
color: white;
} }
.file-input:focus + .file-label { .file-input:focus + .file-label {
border-color: #667eea; border-color: rgba(102, 126, 234, 0.8);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15), inset 0 0 20px rgba(102, 126, 234, 0.05);
} }
.file-selected { .file-selected {
@ -382,14 +424,15 @@ const removeFile = () => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: #e8f5e9; background: rgba(76, 175, 80, 0.15);
border: 1px solid #4caf50; border: 1px solid rgba(76, 175, 80, 0.4);
border-radius: 8px; border-radius: 8px;
margin-top: 0.75rem; margin-top: 0.75rem;
backdrop-filter: blur(5px);
} }
.file-name { .file-name {
color: #2e7d32; color: rgba(76, 175, 80, 0.9);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
} }
@ -397,7 +440,7 @@ const removeFile = () => {
.remove-btn { .remove-btn {
background: none; background: none;
border: none; border: none;
color: #d32f2f; color: rgba(244, 67, 54, 0.7);
font-size: 0.85rem; font-size: 0.85rem;
cursor: pointer; cursor: pointer;
padding: 0 0.75rem; padding: 0 0.75rem;
@ -406,13 +449,12 @@ const removeFile = () => {
} }
.remove-btn:hover { .remove-btn:hover {
color: #f44336; color: rgba(244, 67, 54, 1);
} }
.footer { .footer {
text-align: center; text-align: center;
color: white; color: rgba(255, 255, 255, 0.7);
opacity: 0.9;
font-size: 0.95rem; font-size: 0.95rem;
} }

64
frontend/src/components/CollaborativeSession.vue
View File

@ -241,14 +241,18 @@ function formatAgentName(agent) {
align-items: flex-start; align-items: flex-start;
margin-bottom: 2rem; margin-bottom: 2rem;
padding: 1.5rem; padding: 1.5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: rgba(255, 255, 255, 0.08);
border-radius: 12px; backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
color: white; color: white;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
} }
.header-content h1 { .header-content h1 {
margin: 0; margin: 0;
font-size: 2rem; font-size: 2rem;
font-weight: 700;
} }
.session-meta { .session-meta {
@ -279,8 +283,7 @@ function formatAgentName(agent) {
.btn { .btn {
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
border: none; border-radius: 10px;
border-radius: 8px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
@ -288,13 +291,14 @@ function formatAgentName(agent) {
} }
.btn-primary { .btn-primary {
background: white; background: rgba(255, 255, 255, 0.95);
color: #667eea; color: #667eea;
border: none;
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
} }
.btn-secondary, .btn-secondary,
@ -302,11 +306,13 @@ function formatAgentName(agent) {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.15);
color: white; color: white;
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(5px);
} }
.btn-secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled) { .btn-outline:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
} }
.btn:disabled { .btn:disabled {
@ -316,13 +322,14 @@ function formatAgentName(agent) {
.convergence-message { .convergence-message {
padding: 1rem; padding: 1rem;
background: #d4edda; background: rgba(76, 175, 80, 0.15);
border: 1px solid #c3e6cb; border: 1px solid rgba(76, 175, 80, 0.4);
border-radius: 8px; border-radius: 12px;
color: #155724; color: rgba(76, 175, 80, 0.9);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
backdrop-filter: blur(5px);
} }
.agents-section { .agents-section {
@ -331,7 +338,7 @@ function formatAgentName(agent) {
.agents-section h3 { .agents-section h3 {
margin-bottom: 1rem; margin-bottom: 1rem;
color: #2c3e50; color: white;
} }
.agents-grid { .agents-grid {
@ -342,23 +349,27 @@ function formatAgentName(agent) {
.agent-badge { .agent-badge {
padding: 0.75rem; padding: 0.75rem;
background: #f5f7fa; background: rgba(102, 126, 234, 0.1);
border: 1px solid #e0e6ed; border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: 8px; border-radius: 10px;
text-align: center; text-align: center;
font-size: 0.95rem; font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(5px);
} }
.timeline-section { .timeline-section {
margin-bottom: 2rem; margin-bottom: 2rem;
padding: 1.5rem; padding: 1.5rem;
background: #f9fafb; background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px; border-radius: 12px;
backdrop-filter: blur(10px);
} }
.timeline-section h3 { .timeline-section h3 {
margin-top: 0; margin-top: 0;
color: #2c3e50; color: white;
} }
.timeline { .timeline {
@ -371,9 +382,10 @@ function formatAgentName(agent) {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
background: white; background: rgba(255, 255, 255, 0.05);
border-radius: 8px; border-radius: 8px;
border-left: 3px solid #667eea; border-left: 3px solid rgba(102, 126, 234, 0.6);
backdrop-filter: blur(5px);
} }
.timeline-marker { .timeline-marker {
@ -382,7 +394,7 @@ function formatAgentName(agent) {
justify-content: center; justify-content: center;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
background: #667eea; background: rgba(102, 126, 234, 0.6);
color: white; color: white;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
@ -395,18 +407,18 @@ function formatAgentName(agent) {
.round-title { .round-title {
font-weight: 600; font-weight: 600;
color: #2c3e50; color: white;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.agents-modified { .agents-modified {
font-size: 0.875rem; font-size: 0.875rem;
color: #666; color: rgba(255, 255, 255, 0.7);
} }
.no-changes { .no-changes {
font-size: 0.875rem; font-size: 0.875rem;
color: #999; color: rgba(255, 255, 255, 0.5);
font-style: italic; font-style: italic;
} }
@ -416,10 +428,12 @@ function formatAgentName(agent) {
.round-info { .round-info {
padding: 1rem; padding: 1rem;
background: #f5f7fa; background: rgba(255, 255, 255, 0.08);
border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
text-align: center; text-align: center;
color: #666; color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
} }
@media (max-width: 768px) { @media (max-width: 768px) {

41
frontend/src/components/DocumentViewer.vue
View File

@ -83,17 +83,18 @@ function simpleMarkdownToHtml(md) {
} }
.document-container { .document-container {
background: white; background: rgba(255, 255, 255, 0.08);
border: 1px solid #e0e6ed; backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
} }
.document-content { .document-content {
padding: 2rem; padding: 2rem;
line-height: 1.8; line-height: 1.8;
color: #2c3e50; color: rgba(255, 255, 255, 0.9);
overflow-x: auto; overflow-x: auto;
} }
@ -103,7 +104,7 @@ function simpleMarkdownToHtml(md) {
.document-content :deep(h4), .document-content :deep(h4),
.document-content :deep(h5), .document-content :deep(h5),
.document-content :deep(h6) { .document-content :deep(h6) {
color: #2c3e50; color: white;
margin-top: 1.5rem; margin-top: 1.5rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
font-weight: 700; font-weight: 700;
@ -111,17 +112,18 @@ function simpleMarkdownToHtml(md) {
.document-content :deep(h1) { .document-content :deep(h1) {
font-size: 2rem; font-size: 2rem;
border-bottom: 2px solid #667eea; border-bottom: 2px solid rgba(102, 126, 234, 0.6);
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.document-content :deep(h2) { .document-content :deep(h2) {
font-size: 1.5rem; font-size: 1.5rem;
color: #667eea; color: rgba(102, 126, 234, 0.9);
} }
.document-content :deep(h3) { .document-content :deep(h3) {
font-size: 1.25rem; font-size: 1.25rem;
color: rgba(255, 255, 255, 0.95);
} }
.document-content :deep(p) { .document-content :deep(p) {
@ -139,17 +141,18 @@ function simpleMarkdownToHtml(md) {
} }
.document-content :deep(code) { .document-content :deep(code) {
background: #f5f7fa; background: rgba(102, 126, 234, 0.15);
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
border-radius: 3px; border-radius: 3px;
font-family: 'Monaco', 'Courier New', monospace; font-family: 'Monaco', 'Courier New', monospace;
font-size: 0.9em; font-size: 0.9em;
color: #d63384; color: rgba(102, 200, 255, 0.9);
} }
.document-content :deep(pre) { .document-content :deep(pre) {
background: #2c3e50; background: rgba(0, 0, 0, 0.3);
color: #ecf0f1; border: 1px solid rgba(102, 126, 234, 0.3);
color: rgba(255, 255, 255, 0.9);
padding: 1rem; padding: 1rem;
border-radius: 8px; border-radius: 8px;
overflow-x: auto; overflow-x: auto;
@ -157,13 +160,14 @@ function simpleMarkdownToHtml(md) {
font-family: 'Monaco', 'Courier New', monospace; font-family: 'Monaco', 'Courier New', monospace;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.4; line-height: 1.4;
backdrop-filter: blur(5px);
} }
.document-content :deep(blockquote) { .document-content :deep(blockquote) {
border-left: 4px solid #667eea; border-left: 4px solid rgba(102, 126, 234, 0.6);
padding-left: 1rem; padding-left: 1rem;
margin-left: 0; margin-left: 0;
color: #666; color: rgba(255, 255, 255, 0.7);
font-style: italic; font-style: italic;
} }
@ -175,24 +179,25 @@ function simpleMarkdownToHtml(md) {
.document-content :deep(th), .document-content :deep(th),
.document-content :deep(td) { .document-content :deep(td) {
border: 1px solid #e0e6ed; border: 1px solid rgba(102, 126, 234, 0.3);
padding: 0.75rem; padding: 0.75rem;
text-align: left; text-align: left;
color: rgba(255, 255, 255, 0.9);
} }
.document-content :deep(th) { .document-content :deep(th) {
background: #f5f7fa; background: rgba(102, 126, 234, 0.15);
font-weight: 700; font-weight: 700;
} }
.document-content :deep(a) { .document-content :deep(a) {
color: #667eea; color: rgba(102, 200, 255, 0.9);
text-decoration: none; text-decoration: none;
transition: color 0.3s; transition: color 0.3s;
} }
.document-content :deep(a:hover) { .document-content :deep(a:hover) {
color: #764ba2; color: rgba(102, 200, 255, 1);
text-decoration: underline; text-decoration: underline;
} }
@ -203,7 +208,7 @@ function simpleMarkdownToHtml(md) {
.empty-state { .empty-state {
text-align: center; text-align: center;
color: #999; color: rgba(255, 255, 255, 0.5);
padding: 2rem; padding: 2rem;
font-style: italic; font-style: italic;
} }

7
frontend/src/components/NetworkStatus.vue
View File

@ -96,17 +96,20 @@ function getStatusEmoji() {
color: white; color: white;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
z-index: 40; z-index: 40;
transition: all 0.3s; transition: all 0.3s;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
} }
.network-status:hover { .network-status:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 12px 40px rgba(31, 38, 135, 0.3);
} }
.status-content { .status-content {