:root {
--primary-color: #2563eb;
--secondary-color: #10b981;
--success-color: #059669;
--warning-color: #d97706;
--error-color: #dc2626;
--bg-light: #f8fafc;
--bg-white: #ffffff;
--text-dark: #1f2937;
--text-gray: #6b7280;
--border-color: #e5e7eb;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--radius: 12px;
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
--gradient-warning: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
} .phassyl-scanner-container *,
.phassyl-dashboard *,
.phassyl-qr-generator * {
box-sizing: border-box;
} .phassyl-scanner-container,
.phassyl-dashboard,
.phassyl-qr-generator {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background: var(--bg-light);
min-height: 100vh;
} .phassyl-header {
background: var(--gradient-primary);
color: white;
padding: 40px;
border-radius: var(--radius);
text-align: center;
margin-bottom: 30px;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.phassyl-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="rgba(255,255,255,0.1)"><polygon points="0,0 1000,0 1000,80 0,100"/></svg>');
background-size: cover;
}
.phassyl-header h1 {
margin: 0 0 15px 0;
font-size: 32px;
font-weight: 800;
position: relative;
z-index: 2;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.phassyl-status {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
display: inline-block;
padding: 10px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
position: relative;
z-index: 2;
border: 1px solid rgba(255, 255, 255, 0.3);
} #client-info {
background: var(--bg-white);
border-radius: var(--radius);
padding: 30px;
margin-bottom: 30px;
box-shadow: var(--shadow-lg);
border-left: 5px solid var(--secondary-color);
position: relative;
}
.client-details h2 {
color: var(--text-dark);
margin: 0 0 20px 0;
font-size: 28px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.client-details p {
margin: 12px 0;
color: var(--text-gray);
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.client-details strong {
color: var(--text-dark);
font-weight: 600;
}
.hours-progress {
margin-top: 25px;
padding: 20px;
background: linear-gradient(135deg, #f6f9fc 0%, #e9f4f1 100%);
border-radius: var(--radius);
border: 1px solid #e1f0ec;
}
.progress-bar {
width: 100%;
height: 12px;
background: #e5e7eb;
border-radius: 6px;
overflow: hidden;
margin-top: 15px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.progress-fill {
height: 100%;
background: var(--gradient-success);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.hours-progress.updated {
animation: pulse-update 1s ease;
}
@keyframes pulse-update {
0%, 100% { background: linear-gradient(135deg, #f6f9fc 0%, #e9f4f1 100%); }
50% { background: linear-gradient(135deg, #dcfdf7 0%, #a7f3d0 100%); }
} #professor-form {
background: var(--bg-white);
border-radius: var(--radius);
padding: 35px;
box-shadow: var(--shadow-lg);
border-top: 4px solid var(--primary-color);
}
.form-section {
margin-bottom: 35px;
}
.form-section h3 {
color: var(--text-dark);
margin: 0 0 20px 0;
font-size: 20px;
font-weight: 700;
padding-bottom: 12px;
border-bottom: 3px solid var(--bg-light);
position: relative;
}
.form-section h3::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 60px;
height: 3px;
background: var(--primary-color);
border-radius: 2px;
}
.form-section input,
.form-section textarea {
width: 100%;
padding: 16px 20px;
border: 2px solid var(--border-color);
border-radius: var(--radius);
font-size: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--bg-white);
font-family: inherit;
}
.form-section input:focus,
.form-section textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
transform: translateY(-2px);
}
.form-section small {
display: block;
margin-top: 8px;
color: var(--text-gray);
font-size: 14px;
font-style: italic;
} .hours-selection {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-radius: var(--radius);
padding: 25px;
border: 2px solid #e2e8f0;
}
.hours-input-group {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.hours-input-group label {
font-weight: 600;
color: var(--text-dark);
font-size: 16px;
min-width: 140px;
}
.hours-input {
width: 120px;
padding: 12px 16px;
border: 2px solid var(--border-color);
border-radius: 8px;
font-size: 18px;
font-weight: 600;
text-align: center;
background: white;
transition: all 0.3s ease;
}
.hours-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
transform: scale(1.05);
}
.hours-info {
display: flex;
align-items: center;
gap: 10px;
}
.hours-note {
background: rgba(37, 99, 235, 0.1);
color: var(--primary-color);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
border: 1px solid rgba(37, 99, 235, 0.2);
transition: all 0.3s ease;
} .validate-btn {
width: 100%;
padding: 20px;
background: var(--gradient-success);
color: white;
border: none;
border-radius: var(--radius);
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 25px;
text-transform: uppercase;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.validate-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.6s;
}
.validate-btn:hover:not(:disabled)::before {
left: 100%;
}
.validate-btn:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.2);
}
.validate-btn:active:not(:disabled) {
transform: translateY(-1px);
}
.validate-btn:disabled {
background: linear-gradient(135deg, #9ca3af, #6b7280);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-icon {
font-size: 20px;
}
.btn-text {
font-weight: 700;
} #professor-history {
background: var(--bg-white);
border-radius: var(--radius);
padding: 25px;
margin-top: 25px;
box-shadow: var(--shadow);
border-left: 4px solid var(--warning-color);
}
#professor-history h3 {
margin: 0 0 20px 0;
color: var(--text-dark);
font-size: 18px;
font-weight: 600;
}
#professor-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.professor-item {
background: var(--bg-light);
padding: 15px 20px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
border-left: 3px solid var(--secondary-color);
transition: all 0.3s ease;
}
.professor-item:hover {
background: rgba(16, 185, 129, 0.1);
transform: translateX(5px);
}
.professor-name {
font-weight: 600;
color: var(--text-dark);
}
.professor-details {
font-size: 14px;
color: var(--text-gray);
} .dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.metric-card {
background: var(--bg-white);
padding: 30px;
border-radius: var(--radius);
text-align: center;
box-shadow: var(--shadow-lg);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-top: 4px solid transparent;
position: relative;
overflow: hidden;
}
.metric-card:nth-child(1) { border-top-color: #3b82f6; }
.metric-card:nth-child(2) { border-top-color: #10b981; }
.metric-card:nth-child(3) { border-top-color: #f59e0b; }
.metric-card:nth-child(4) { border-top-color: #ef4444; }
.metric-card.treasury { border-top-color: #10b981; }
.metric-card.revenue { border-top-color: #3b82f6; }
.metric-card.profit { border-top-color: #f59e0b; }
.metric-card.margin { border-top-color: #8b5cf6; }
.metric-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, rgba(59, 130, 246, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.metric-card:hover::before {
opacity: 1;
}
.metric-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}
.metric-icon {
font-size: 40px;
margin-bottom: 15px;
}
.metric-value {
font-size: 36px;
font-weight: 800;
color: var(--text-dark);
margin-bottom: 8px;
position: relative;
z-index: 2;
}
.metric-label {
color: var(--text-gray);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
z-index: 2;
} .financial-health {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-left: 5px solid #10b981;
}
.financial-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-top: 20px;
}
.financial-card {
background: var(--bg-white);
border-radius: var(--radius);
padding: 25px;
box-shadow: var(--shadow);
border-left: 4px solid;
}
.financial-card.positive {
border-left-color: #10b981;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}
.financial-card.negative {
border-left-color: #ef4444;
background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
}
.financial-card h4 {
margin: 0 0 20px 0;
font-size: 18px;
font-weight: 700;
text-align: center;
padding: 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.7);
}
.financial-items {
display: flex;
flex-direction: column;
gap: 12px;
}
.financial-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
border-left: 3px solid transparent;
}
.financial-item:hover {
background: rgba(255, 255, 255, 0.8);
transform: translateX(5px);
transition: all 0.3s ease;
}
.amount {
font-weight: 700;
font-size: 16px;
}
.amount.positive {
color: #059669;
}
.amount.negative {
color: #dc2626;
}
.amount.pending {
color: #d97706;
}
.amount.overdue {
color: #dc2626;
animation: pulse-red 2s infinite;
}
.amount.projected {
color: #6366f1;
font-style: italic;
}
@keyframes pulse-red {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
} .dashboard-section {
background: var(--bg-white);
border-radius: var(--radius);
padding: 30px;
margin-bottom: 30px;
box-shadow: var(--shadow-lg);
}
.dashboard-section h3 {
margin: 0 0 25px 0;
color: var(--text-dark);
font-size: 22px;
font-weight: 700;
border-bottom: 3px solid var(--bg-light);
padding-bottom: 10px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.stat-item {
text-align: center;
padding: 20px;
background: var(--bg-light);
border-radius: 8px;
border-left: 4px solid var(--primary-color);
transition: all 0.3s ease;
}
.stat-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 5px;
}
.stat-label {
font-size: 14px;
color: var(--text-gray);
font-weight: 500;
} .costs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.cost-item {
background: var(--bg-white);
border-radius: var(--radius);
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: var(--shadow);
border-left: 4px solid var(--primary-color);
transition: all 0.3s ease;
}
.cost-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.cost-icon {
font-size: 32px;
background: var(--bg-light);
padding: 12px;
border-radius: 50%;
min-width: 56px;
text-align: center;
}
.cost-details {
flex: 1;
}
.cost-label {
font-size: 14px;
color: var(--text-gray);
font-weight: 500;
margin-bottom: 5px;
}
.cost-value {
font-size: 20px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 3px;
}
.cost-percentage {
font-size: 12px;
color: var(--text-gray);
background: var(--bg-light);
padding: 2px 8px;
border-radius: 10px;
display: inline-block;
} .evolution-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.evolution-card {
background: var(--bg-white);
border-radius: var(--radius);
padding: 25px;
box-shadow: var(--shadow);
text-align: center;
border-top: 4px solid var(--primary-color);
}
.evolution-card.comparison {
border-top-color: var(--warning-color);
background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
}
.evolution-card h4 {
margin: 0 0 20px 0;
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
}
.evolution-stats {
display: flex;
flex-direction: column;
gap: 10px;
}
.evolution-stats .stat {
padding: 8px 12px;
background: var(--bg-light);
border-radius: 6px;
font-weight: 500;
}
.evolution-stats .stat.profit {
background: #dcfdf7;
color: #059669;
font-weight: 700;
}
.evolution-stats .stat.positive {
background: #dcfdf7;
color: #059669;
}
.evolution-stats .stat.negative {
background: #fef2f2;
color: #dc2626;
} .projection-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-top: 20px;
}
.projection-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: var(--radius);
padding: 30px;
text-align: center;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.projection-card.annual {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.projection-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="rgba(255,255,255,0.1)"><circle cx="20" cy="20" r="2"/><circle cx="80" cy="80" r="3"/><circle cx="40" cy="70" r="1"/></svg>');
opacity: 0.3;
}
.projection-period {
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
opacity: 0.9;
position: relative;
z-index: 2;
}
.projection-revenue {
font-size: 28px;
font-weight: 800;
margin-bottom: 10px;
position: relative;
z-index: 2;
}
.projection-profit {
font-size: 14px;
opacity: 0.9;
position: relative;
z-index: 2;
} .qr-manual-section {
background: var(--bg-white);
border-radius: var(--radius);
padding: 30px;
margin-bottom: 30px;
box-shadow: var(--shadow-lg);
border-top: 4px solid var(--secondary-color);
}
.qr-manual-section h3 {
margin: 0 0 20px 0;
color: var(--text-dark);
font-size: 20px;
font-weight: 700;
}
.form-row {
display: flex;
gap: 15px;
align-items: end;
}
.form-row input {
flex: 1;
padding: 14px 18px;
border: 2px solid var(--border-color);
border-radius: var(--radius);
font-size: 16px;
transition: all 0.3s ease;
}
.form-row input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.generate-btn {
padding: 14px 24px;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: var(--radius);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.generate-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.qr-existing-section {
background: var(--bg-white);
border-radius: var(--radius);
padding: 30px;
margin-bottom: 30px;
box-shadow: var(--shadow-lg);
}
.qr-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.qr-card {
background: var(--bg-white);
border-radius: var(--radius);
padding: 25px;
text-align: center;
box-shadow: var(--shadow);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid var(--border-color);
}
.qr-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.qr-code {
margin-bottom: 20px;
position: relative;
}
.qr-code img {
border-radius: var(--radius);
border: 3px solid var(--border-color);
transition: all 0.3s ease;
}
.qr-card:hover .qr-code img {
border-color: var(--primary-color);
transform: scale(1.05);
}
.qr-info h3 {
margin: 0 0 10px 0;
color: var(--text-dark);
font-size: 18px;
}
.qr-info p {
margin: 5px 0;
color: var(--text-gray);
font-size: 14px;
}
.test-btn {
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background: var(--secondary-color);
color: white;
text-decoration: none;
border-radius: var(--radius);
font-weight: 500;
transition: all 0.3s ease;
}
.test-btn:hover {
background: #059669;
transform: translateY(-2px);
text-decoration: none;
color: white;
}
.print-section {
text-align: center;
background: var(--bg-white);
padding: 30px;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.print-btn {
padding: 15px 30px;
background: var(--text-dark);
color: white;
border: none;
border-radius: var(--radius);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.print-btn:hover {
background: #374151;
transform: translateY(-2px);
} .no-client {
text-align: center;
background: var(--bg-white);
padding: 50px 30px;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.no-client h2 {
color: var(--text-dark);
margin-bottom: 15px;
font-size: 24px;
}
.no-client p {
color: var(--text-gray);
margin-bottom: 30px;
font-size: 16px;
}
.qr-demo {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
.demo-link {
display: inline-block;
padding: 12px 24px;
background: var(--primary-color);
color: white;
text-decoration: none;
border-radius: var(--radius);
font-weight: 500;
transition: all 0.3s ease;
}
.demo-link:hover {
background: #1d4ed8;
transform: translateY(-2px);
text-decoration: none;
color: white;
} .success-message,
.error-message,
.warning-message {
padding: 20px 25px;
border-radius: var(--radius);
margin: 20px 0;
font-weight: 500;
border-left: 5px solid;
display: flex;
align-items: flex-start;
gap: 15px;
}
.success-message {
background: linear-gradient(135deg, #dcfdf7 0%, #a7f3d0 100%);
color: var(--success-color);
border-left-color: var(--success-color);
}
.error-message {
background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
color: var(--error-color);
border-left-color: var(--error-color);
}
.warning-message {
background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
color: var(--warning-color);
border-left-color: var(--warning-color);
}
.message-icon {
font-size: 24px;
flex-shrink: 0;
}
.message-content h3 {
margin: 0 0 8px 0;
font-size: 18px;
font-weight: 700;
}
.message-content p {
margin: 4px 0;
font-size: 14px;
} .loading,
.loading-dashboard {
text-align: center;
padding: 40px;
font-size: 18px;
color: var(--text-gray);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
#client-info,
#professor-form,
.dashboard-section {
animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.metric-card {
animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.metric-card:nth-child(1) { animation-delay: 0.1s; }
.metric-card:nth-child(2) { animation-delay: 0.2s; }
.metric-card:nth-child(3) { animation-delay: 0.3s; }
.metric-card:nth-child(4) { animation-delay: 0.4s; } @media (max-width: 768px) {
.phassyl-scanner-container,
.phassyl-dashboard,
.phassyl-qr-generator {
padding: 15px;
}
.phassyl-header {
padding: 25px 20px;
}
.phassyl-header h1 {
font-size: 24px;
}
.hours-input-group {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.hours-input {
width: 100%;
}
.form-row {
flex-direction: column;
}
.dashboard-grid {
grid-template-columns: repeat(2, 1fr);
}
.qr-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: 1fr;
}
.financial-grid {
grid-template-columns: 1fr;
}
.costs-grid {
grid-template-columns: 1fr;
}
.evolution-grid {
grid-template-columns: 1fr;
}
.projection-grid {
grid-template-columns: 1fr;
}
.financial-item {
flex-direction: column;
text-align: center;
gap: 8px;
}
.cost-item {
flex-direction: column;
text-align: center;
}
.cost-icon {
margin-bottom: 10px;
}
}
@media (max-width: 480px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.phassyl-header h1 {
font-size: 20px;
}
#client-info,
#professor-form {
padding: 20px;
}
.metric-card {
padding: 20px;
}
.metric-value {
font-size: 28px;
}
} @media print {
.phassyl-header,
.print-section,
.generate-btn,
.test-btn,
.validate-btn {
display: none !important;
}
.qr-grid {
display: block;
}
.qr-card {
page-break-inside: avoid;
margin-bottom: 30px;
border: 2px solid #000;
box-shadow: none;
}
body {
background: white !important;
}
} @media (prefers-color-scheme: dark) {
:root {
--bg-light: #1f2937;
--bg-white: #374151;
--text-dark: #f9fafb;
--text-gray: #d1d5db;
--border-color: #4b5563;
}
}