/* _content/Logikbug.Frontend/Components/Footer.razor.rz.scp.css */
/* ========================================
FOOTER - PROPER POSITIONING & Z-INDEX
======================================== */
.footer[b-sol4qec6xo] {
margin-top: auto; /* Push to bottom of flex container */
border-top: 1px solid #e5e7eb;
background: #ffffff;
flex-shrink: 0; /* Don't shrink */
position: relative;
z-index: 10; /* Proper z-index below header but above content */
width: 100%;
}
.footer-content[b-sol4qec6xo] {
max-width: 1400px;
margin: 0 auto;
padding: 1.5rem 1rem;
font-size: 0.875rem;
color: #6b7280;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
box-sizing: border-box;
}
.footer-left[b-sol4qec6xo] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-brand[b-sol4qec6xo] {
font-weight: 600;
color: #111827;
}
.footer-separator[b-sol4qec6xo] {
color: #d1d5db;
}
.footer-link[b-sol4qec6xo] {
color: #6b7280;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-link:hover[b-sol4qec6xo] {
color: #111827;
text-decoration: underline;
}
.footer-right[b-sol4qec6xo] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.footer-button[b-sol4qec6xo] {
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 8px;
color: #374151;
text-decoration: none;
font-size: 0.875rem;
transition: all 0.2s ease;
background: #ffffff;
position: relative;
z-index: 1; /* Ensure buttons stay clickable */
}
.footer-button:hover[b-sol4qec6xo] {
background: #f9fafb;
border-color: #9ca3af;
color: #111827;
text-decoration: none;
transform: translateY(-1px); /* Subtle lift on hover */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Responsive Footer */
@media (max-width: 640px) {
.footer-content[b-sol4qec6xo] {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.footer-left[b-sol4qec6xo] {
justify-content: center;
}
.footer-right[b-sol4qec6xo] {
justify-content: center;
}
}
/* _content/Logikbug.Frontend/Components/LabCard.razor.rz.scp.css */
/* Lab Card - Logikbug Theme */
.lab-card[b-w3r603pags] {
background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%);
border: 2px solid #bbf7d0;
border-radius: 16px;
padding: 1.5rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
min-height: var(--touch-target-min);
}
.lab-card:hover[b-w3r603pags] {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(34, 197, 94, 0.15);
border-color: #22c55e;
}
.lab-card[b-w3r603pags]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #22c55e, #16a34a, #059669);
opacity: 0;
transition: opacity 0.3s ease;
}
.lab-card:hover[b-w3r603pags]::before {
opacity: 1;
}
/* Compact vs Expanded Styles */
.lab-card.compact[b-w3r603pags] {
min-height: 280px;
}
.lab-card.expanded[b-w3r603pags] {
min-height: 400px;
}
/* Header Section */
.lab-header[b-w3r603pags] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.lab-category[b-w3r603pags] {
background: linear-gradient(135deg, #059669, #047857);
color: white;
padding: 0.35rem 0.9rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}
.lab-difficulty[b-w3r603pags] {
display: flex;
gap: 2px;
}
.difficulty-star[b-w3r603pags] {
font-size: 1rem;
color: #16a34a;
opacity: 0.3;
transition: opacity 0.2s ease;
}
.difficulty-star.filled[b-w3r603pags] {
opacity: 1;
color: #22c55e;
}
/* Title and Description */
.lab-title[b-w3r603pags] {
color: #1f2937;
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 0.8rem 0;
line-height: 1.3;
}
.lab-description[b-w3r603pags] {
color: #4b5563;
font-size: 0.95rem;
line-height: 1.5;
margin: 0 0 1rem 0;
}
/* Scenario and Objectives - Only in Expanded View */
.lab-scenario[b-w3r603pags] {
background: #ecfdf5;
border-left: 3px solid #22c55e;
padding: 0.8rem;
margin-bottom: 1rem;
border-radius: 0 8px 8px 0;
font-size: 0.9rem;
color: #065f46;
border: 1px solid #bbf7d0;
}
.lab-objectives[b-w3r603pags] {
margin-bottom: 1rem;
}
.lab-objectives strong[b-w3r603pags] {
color: #059669;
font-size: 0.9rem;
display: block;
margin-bottom: 0.5rem;
font-weight: 700;
}
.lab-objectives ul[b-w3r603pags] {
margin: 0;
padding-left: 1.2rem;
list-style-type: none;
}
.lab-objectives li[b-w3r603pags] {
color: #374151;
font-size: 0.85rem;
margin-bottom: 0.3rem;
position: relative;
}
.lab-objectives li[b-w3r603pags]::before {
content: '✓';
color: #22c55e;
font-weight: bold;
position: absolute;
left: -1rem;
}
.lab-objectives li em[b-w3r603pags] {
color: #6b7280;
}
/* Meta Information */
.lab-meta[b-w3r603pags] {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.lab-duration[b-w3r603pags],
.lab-points[b-w3r603pags],
.lab-progress[b-w3r603pags] {
display: flex;
align-items: center;
gap: 0.3rem;
color: #6b7280;
font-size: 0.85rem;
font-weight: 500;
}
.lab-progress[b-w3r603pags] {
color: #22c55e;
}
.icon[b-w3r603pags] {
font-size: 0.9rem;
}
/* Tags */
.lab-tags[b-w3r603pags] {
display: flex;
gap: 0.4rem;
margin-bottom: 1.2rem;
flex-wrap: wrap;
}
.tag[b-w3r603pags] {
background: #f3f4f6;
color: #4b5563;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid #e5e7eb;
}
/* Action Button */
.lab-actions[b-w3r603pags] {
margin-top: auto;
}
.lab-btn[b-w3r603pags] {
width: 100%;
padding: 0.8rem 1rem;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: var(--touch-target-min);
}
.lab-btn.start[b-w3r603pags] {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.lab-btn.start:hover[b-w3r603pags] {
background: linear-gradient(135deg, #16a34a, #15803d);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3);
}
.lab-btn.in-progress[b-w3r603pags] {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.lab-btn.in-progress:hover[b-w3r603pags] {
background: linear-gradient(135deg, #d97706, #b45309);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3);
}
.lab-btn.completed[b-w3r603pags] {
background: linear-gradient(135deg, #059669, #047857);
color: white;
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}
.lab-btn.completed:hover[b-w3r603pags] {
background: linear-gradient(135deg, #047857, #065f46);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3);
}
.btn-icon[b-w3r603pags] {
font-size: 1rem;
}
/* Responsive Design */
@media (max-width: 640px) {
.lab-card[b-w3r603pags] {
padding: 1rem;
}
.lab-title[b-w3r603pags] {
font-size: 1.1rem;
}
.lab-description[b-w3r603pags] {
font-size: 0.9rem;
}
.lab-meta[b-w3r603pags] {
gap: 0.8rem;
}
.lab-btn[b-w3r603pags] {
font-size: 0.85rem;
padding: 0.7rem;
}
}
/* Animation for card entrance */
@keyframes cardSlideIn-b-w3r603pags {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.lab-card[b-w3r603pags] {
animation: cardSlideIn-b-w3r603pags 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* _content/Logikbug.Frontend/Components/LibraryCard.razor.rz.scp.css */
/* Library Card - Professional Business Theme */
.library-card[b-qhenyeofsj] {
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 1.5rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
min-height: var(--touch-target-min);
display: flex;
flex-direction: column;
}
.library-card:hover[b-qhenyeofsj] {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
border-color: #3b82f6;
}
.library-card[b-qhenyeofsj]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #06b6d4, #10b981);
opacity: 0;
transition: opacity 0.3s ease;
}
.library-card:hover[b-qhenyeofsj]::before {
opacity: 1;
}
/* Compact vs Expanded Styles */
.library-card.compact[b-qhenyeofsj] {
min-height: 300px;
}
.library-card.expanded[b-qhenyeofsj] {
min-height: 450px;
}
/* Card Header */
.card-header[b-qhenyeofsj] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.software-badge[b-qhenyeofsj] {
background: linear-gradient(135deg, #1e40af, #3b82f6);
color: white;
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(30, 64, 175, 0.25);
}
.difficulty-rating[b-qhenyeofsj] {
display: flex;
gap: 2px;
}
.difficulty-star[b-qhenyeofsj] {
font-size: 1.1rem;
color: #cbd5e1;
transition: color 0.2s ease;
}
.difficulty-star.filled[b-qhenyeofsj] {
color: #f59e0b;
text-shadow: 0 0 4px rgba(245, 158, 11, 0.3);
}
/* Card Content */
.card-content[b-qhenyeofsj] {
flex: 1;
display: flex;
flex-direction: column;
}
.category-tag[b-qhenyeofsj] {
background: linear-gradient(135deg, #ecfdf5, #d1fae5);
color: #065f46;
padding: 0.3rem 0.8rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
align-self: flex-start;
margin-bottom: 0.8rem;
border: 1px solid #bbf7d0;
}
.item-title[b-qhenyeofsj] {
color: #1e293b;
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 0.8rem 0;
line-height: 1.3;
}
.item-description[b-qhenyeofsj] {
color: #475569;
font-size: 0.95rem;
line-height: 1.6;
margin: 0 0 1rem 0;
flex-grow: 1;
}
/* Expanded Content Sections */
.business-context[b-qhenyeofsj] {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-left: 4px solid #3b82f6;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 0 8px 8px 0;
border: 1px solid #bfdbfe;
}
.business-context h4[b-qhenyeofsj] {
color: #1e40af;
font-size: 0.9rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.business-context p[b-qhenyeofsj] {
color: #1e40af;
font-size: 0.85rem;
margin: 0;
line-height: 1.5;
font-weight: 500;
}
.learning-objectives[b-qhenyeofsj] {
margin-bottom: 1rem;
}
.learning-objectives h4[b-qhenyeofsj] {
color: #059669;
font-size: 0.9rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.learning-objectives ul[b-qhenyeofsj] {
margin: 0;
padding-left: 1.2rem;
list-style: none;
}
.learning-objectives li[b-qhenyeofsj] {
color: #374151;
font-size: 0.85rem;
margin-bottom: 0.3rem;
position: relative;
line-height: 1.4;
}
.learning-objectives li[b-qhenyeofsj]::before {
content: '✓';
color: #10b981;
font-weight: bold;
position: absolute;
left: -1rem;
}
.example-prompt[b-qhenyeofsj] {
margin-bottom: 1rem;
}
.example-prompt h4[b-qhenyeofsj] {
color: #7c3aed;
font-size: 0.9rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.prompt-preview[b-qhenyeofsj] {
background: #faf5ff;
border: 1px solid #e9d5ff;
border-left: 4px solid #8b5cf6;
padding: 0.8rem;
border-radius: 0 8px 8px 0;
font-size: 0.85rem;
color: #581c87;
font-style: italic;
line-height: 1.4;
}
/* Meta Information */
.item-meta[b-qhenyeofsj] {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.meta-item[b-qhenyeofsj] {
display: flex;
align-items: center;
gap: 0.4rem;
color: #6b7280;
font-size: 0.85rem;
font-weight: 500;
}
.meta-item .icon[b-qhenyeofsj] {
font-size: 0.9rem;
}
/* Tags */
.tags[b-qhenyeofsj] {
display: flex;
gap: 0.4rem;
margin-bottom: 1.2rem;
flex-wrap: wrap;
}
.tag[b-qhenyeofsj] {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #475569;
padding: 0.25rem 0.7rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid #cbd5e1;
transition: all 0.2s ease;
}
.tag:hover[b-qhenyeofsj] {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border-color: #3b82f6;
}
/* Action Button */
.card-actions[b-qhenyeofsj] {
margin-top: auto;
}
.library-btn[b-qhenyeofsj] {
width: 100%;
padding: 0.8rem 1rem;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: var(--touch-target-min);
position: relative;
overflow: hidden;
}
.library-btn[b-qhenyeofsj]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.library-btn:hover[b-qhenyeofsj]::before {
left: 100%;
}
.library-btn.start[b-qhenyeofsj] {
background: linear-gradient(135deg, #3b82f6, #1e40af);
color: white;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}
.library-btn.start:hover[b-qhenyeofsj] {
background: linear-gradient(135deg, #1e40af, #1e3a8a);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
}
.btn-icon[b-qhenyeofsj] {
font-size: 1.1rem;
}
/* Responsive Design */
@media (max-width: 640px) {
.library-card[b-qhenyeofsj] {
padding: 1rem;
}
.item-title[b-qhenyeofsj] {
font-size: 1.2rem;
}
.item-description[b-qhenyeofsj] {
font-size: 0.9rem;
}
.item-meta[b-qhenyeofsj] {
gap: 0.8rem;
}
.library-btn[b-qhenyeofsj] {
font-size: 0.85rem;
padding: 0.7rem;
}
}
/* Animation for card entrance */
@keyframes cardSlideIn-b-qhenyeofsj {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.library-card[b-qhenyeofsj] {
animation: cardSlideIn-b-qhenyeofsj 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hover effects for professional feel */
.library-card:hover .software-badge[b-qhenyeofsj] {
background: linear-gradient(135deg, #06b6d4, #0891b2);
transform: scale(1.05);
}
.library-card:hover .difficulty-star.filled[b-qhenyeofsj] {
color: #f97316;
transform: scale(1.1);
}
.library-card:hover .category-tag[b-qhenyeofsj] {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
transform: translateY(-1px);
}
/* _content/Logikbug.Frontend/Components/PuzzleCard.razor.rz.scp.css */
/* Compact View Styles */
.compact-card[b-frsflggb54] {
background: #ffffff;
border-radius: 12px;
padding: 1rem;
border: 1px solid #e5e7eb;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
gap: 0.75rem;
min-height: var(--touch-target-min);
}
/* Difficulty background colors for compact view */
.compact-card.difficulty-beginner[b-frsflggb54] {
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
border-color: #bbf7d0;
}
.compact-card.difficulty-intermediate[b-frsflggb54] {
background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
border-color: #fde68a;
}
.compact-card.difficulty-advanced[b-frsflggb54] {
background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
border-color: #fed7aa;
}
.compact-card.difficulty-expert[b-frsflggb54] {
background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
border-color: #fecaca;
}
.compact-card:hover[b-frsflggb54] {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
border-color: #4ade80;
}
.compact-header[b-frsflggb54] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
}
.compact-title[b-frsflggb54] {
font-size: 1rem;
font-weight: 600;
color: #111827;
margin: 0;
flex: 1;
line-height: 1.4;
display: flex;
align-items: center;
gap: 0.5rem;
}
.compact-difficulty[b-frsflggb54] {
flex-shrink: 0;
}
.difficulty-tag[b-frsflggb54] {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.difficulty-beginner[b-frsflggb54] {
background-color: #dcfce7;
color: #166534;
border: 1px solid #bbf7d0;
}
.difficulty-intermediate[b-frsflggb54] {
background-color: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
}
.difficulty-advanced[b-frsflggb54] {
background-color: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
}
.difficulty-expert[b-frsflggb54] {
background-color: #ede9fe;
color: #5b21b6;
border: 1px solid #ddd6fe;
}
.compact-description[b-frsflggb54] {
font-size: 0.875rem;
color: #6b7280;
margin: 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
padding-inline: var(--spacing-sm);
}
.compact-footer[b-frsflggb54] {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.compact-meta[b-frsflggb54] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.compact-time[b-frsflggb54], .compact-objectives[b-frsflggb54] {
font-size: 0.75rem;
color: #9ca3af;
display: flex;
align-items: center;
gap: 0.25rem;
}
.compact-progress[b-frsflggb54] {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
}
.compact-progress.completed[b-frsflggb54] {
color: #059669;
}
.compact-progress.in-progress[b-frsflggb54] {
color: #d97706;
}
.compact-play-btn[b-frsflggb54] {
background: #22c55e;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
}
.compact-play-btn:hover[b-frsflggb54] {
background: #16a34a;
}
/* Detailed View Styles */
.enhanced-puzzle-card[b-frsflggb54] {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 16px;
padding: 1.5rem;
border: 3px solid #e2e8f0;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
gap: 1.5rem;
align-items: flex-start;
min-height: 140px;
}
/* Difficulty border colors for detailed view */
.enhanced-puzzle-card.difficulty-beginner[b-frsflggb54] {
border-color: #22c55e;
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}
.enhanced-puzzle-card.difficulty-intermediate[b-frsflggb54] {
border-color: #f59e0b;
background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}
.enhanced-puzzle-card.difficulty-advanced[b-frsflggb54] {
border-color: #f97316;
background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
}
.enhanced-puzzle-card.difficulty-expert[b-frsflggb54] {
border-color: #ef4444;
background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}
.enhanced-puzzle-card:hover[b-frsflggb54] {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
border-color: #4ade80;
}
.puzzle-left[b-frsflggb54] {
flex: 2;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.puzzle-header-with-progress[b-frsflggb54] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.puzzle-title[b-frsflggb54] {
font-size: 1.25rem;
font-weight: 700;
color: #111827;
margin: 0;
line-height: 1.3;
display: flex;
align-items: center;
gap: 0.5rem;
}
.progress-indicator[b-frsflggb54] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
}
.completion-badge[b-frsflggb54], .in-progress-badge[b-frsflggb54] {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 6px;
font-weight: 500;
}
.completion-badge[b-frsflggb54] {
background: #dcfce7;
color: #166534;
}
.in-progress-badge[b-frsflggb54] {
background: #fef3c7;
color: #92400e;
}
.score-badge[b-frsflggb54], .star-rating[b-frsflggb54] {
font-size: 0.75rem;
color: #6b7280;
}
.puzzle-meta[b-frsflggb54] {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.category[b-frsflggb54], .difficulty[b-frsflggb54], .time[b-frsflggb54] {
font-size: 0.8rem;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-weight: 500;
}
.category[b-frsflggb54] {
background: #e0f2fe;
color: #0369a1;
}
.difficulty[b-frsflggb54] {
background: #fef3c7;
color: #92400e;
}
.time[b-frsflggb54] {
background: #f3e8ff;
color: #7c3aed;
}
.puzzle-description[b-frsflggb54] {
font-size: 0.9rem;
color: #64748b;
line-height: 1.5;
margin: 0;
}
@media (max-width: 640px) {
.compact-card[b-frsflggb54] {
padding: var(--gutter-mobile);
gap: var(--spacing-md);
margin-inline: var(--spacing-xs);
}
.puzzle-description[b-frsflggb54] {
padding-inline: var(--spacing-md);
line-height: 1.6;
margin-bottom: var(--spacing-md);
}
.compact-description[b-frsflggb54] {
padding-inline: var(--spacing-md);
line-height: 1.6;
}
.compact-play-btn[b-frsflggb54],
.play-btn[b-frsflggb54] {
min-height: var(--touch-target-min);
padding: var(--spacing-md) var(--spacing-lg);
}
}
.puzzle-middle[b-frsflggb54] {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
}
.learning-objectives[b-frsflggb54] {
font-size: 0.85rem;
}
.learning-objectives strong[b-frsflggb54] {
color: #374151;
display: block;
margin-bottom: 0.5rem;
}
.learning-objectives ul[b-frsflggb54] {
margin: 0;
padding-left: 1.25rem;
color: #6b7280;
}
.learning-objectives li[b-frsflggb54] {
margin-bottom: 0.25rem;
}
.puzzle-actions[b-frsflggb54] {
margin-top: auto;
}
.play-btn[b-frsflggb54] {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
border: none;
padding: 1.25rem 1.5rem;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.play-btn:hover[b-frsflggb54] {
background: linear-gradient(135deg, #16a34a, #15803d);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3);
}
.puzzle-right[b-frsflggb54] {
flex: 0 0 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.puzzle-indicators[b-frsflggb54] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.puzzle-type-icon[b-frsflggb54] {
font-size: 2.5rem;
opacity: 0.8;
}
.grid-info[b-frsflggb54] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.grid-size[b-frsflggb54], .complexity[b-frsflggb54] {
font-size: 0.75rem;
color: #6b7280;
font-weight: 500;
}
.grid-size[b-frsflggb54] {
background: #f1f5f9;
padding: 0.25rem 0.5rem;
border-radius: 6px;
}
/* Category Icon Styling */
.category-icon[b-frsflggb54] {
font-size: 1.2em;
opacity: 0.8;
flex-shrink: 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.enhanced-puzzle-card[b-frsflggb54] {
flex-direction: column;
gap: 1rem;
}
.puzzle-right[b-frsflggb54] {
flex: none;
flex-direction: row;
justify-content: space-around;
}
}
/* Expanded puzzle card - Lab-style layout */
.puzzle-card.expanded[b-frsflggb54] {
background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%);
border: 2px solid #bbf7d0;
border-radius: 16px;
padding: 1.5rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
min-height: 400px;
}
@media (min-width: 1024px) {
.puzzle-card .puzzle-description[b-frsflggb54] {
max-width: var(--readable-line-length);
line-height: 1.6;
}
.compact-description[b-frsflggb54] {
line-height: 1.5;
}
}
/* Difficulty-based colors */
.puzzle-card.expanded.difficulty-beginner[b-frsflggb54] {
border-color: #22c55e;
}
.puzzle-card.expanded.difficulty-beginner[b-frsflggb54]::before {
background: linear-gradient(90deg, #22c55e, #16a34a, #059669);
}
.puzzle-card.expanded.difficulty-intermediate[b-frsflggb54] {
border-color: #f59e0b;
}
.puzzle-card.expanded.difficulty-intermediate[b-frsflggb54]::before {
background: linear-gradient(90deg, #f59e0b, #d97706, #b45309);
}
.puzzle-card.expanded.difficulty-advanced[b-frsflggb54] {
border-color: #f97316;
}
.puzzle-card.expanded.difficulty-advanced[b-frsflggb54]::before {
background: linear-gradient(90deg, #f97316, #ea580c, #c2410c);
}
.puzzle-card.expanded.difficulty-expert[b-frsflggb54] {
border-color: #ef4444;
}
.puzzle-card.expanded.difficulty-expert[b-frsflggb54]::before {
background: linear-gradient(90deg, #ef4444, #dc2626, #b91c1c);
}
.puzzle-card.expanded:hover[b-frsflggb54] {
transform: translateY(-6px);
}
.puzzle-card.expanded.difficulty-beginner:hover[b-frsflggb54] {
box-shadow: 0 16px 32px rgba(34, 197, 94, 0.15);
}
.puzzle-card.expanded.difficulty-intermediate:hover[b-frsflggb54] {
box-shadow: 0 16px 32px rgba(245, 158, 11, 0.15);
}
.puzzle-card.expanded.difficulty-advanced:hover[b-frsflggb54] {
box-shadow: 0 16px 32px rgba(249, 115, 22, 0.15);
}
.puzzle-card.expanded.difficulty-expert:hover[b-frsflggb54] {
box-shadow: 0 16px 32px rgba(239, 68, 68, 0.15);
}
.puzzle-card.expanded[b-frsflggb54]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
opacity: 0;
transition: opacity 0.3s ease;
}
.puzzle-card.expanded:hover[b-frsflggb54]::before {
opacity: 1;
}
/* Header Section */
.puzzle-card .puzzle-header[b-frsflggb54] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.puzzle-card .puzzle-category[b-frsflggb54] {
background: linear-gradient(135deg, #059669, #047857);
color: white;
padding: 0.35rem 0.9rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}
.puzzle-card .puzzle-difficulty[b-frsflggb54] {
display: flex;
gap: 2px;
}
.puzzle-card .difficulty-star[b-frsflggb54] {
font-size: 1rem;
color: #16a34a;
opacity: 0.3;
transition: opacity 0.2s ease;
}
.puzzle-card .difficulty-star.filled[b-frsflggb54] {
opacity: 1;
color: #22c55e;
}
/* Title and Description */
.puzzle-card .puzzle-title[b-frsflggb54] {
color: #1f2937;
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 0.8rem 0;
line-height: 1.3;
}
.puzzle-card .puzzle-description[b-frsflggb54] {
color: #4b5563;
font-size: 0.95rem;
line-height: 1.5;
margin: 0 0 1rem 0;
}
/* Objectives */
.puzzle-card .puzzle-objectives[b-frsflggb54] {
background: #ecfdf5;
border-left: 3px solid #22c55e;
padding: 0.8rem;
margin-bottom: 1rem;
border-radius: 0 8px 8px 0;
border: 1px solid #bbf7d0;
}
.puzzle-card .puzzle-objectives strong[b-frsflggb54] {
color: #059669;
font-size: 0.9rem;
display: block;
margin-bottom: 0.5rem;
font-weight: 700;
}
.puzzle-card .puzzle-objectives ul[b-frsflggb54] {
margin: 0;
padding-left: 1.2rem;
list-style-type: none;
}
.puzzle-card .puzzle-objectives li[b-frsflggb54] {
color: #374151;
font-size: 0.85rem;
margin-bottom: 0.3rem;
position: relative;
}
.puzzle-card .puzzle-objectives li[b-frsflggb54]::before {
content: '✓';
color: #22c55e;
font-weight: bold;
position: absolute;
left: -1rem;
}
/* Meta Information */
.puzzle-card .puzzle-meta[b-frsflggb54] {
display: flex;
gap: 1rem;
margin-bottom: 1.2rem;
flex-wrap: wrap;
}
.puzzle-card .puzzle-duration[b-frsflggb54],
.puzzle-card .puzzle-type[b-frsflggb54],
.puzzle-card .puzzle-progress[b-frsflggb54] {
display: flex;
align-items: center;
gap: 0.3rem;
color: #6b7280;
font-size: 0.85rem;
font-weight: 500;
}
.puzzle-card .puzzle-progress[b-frsflggb54] {
color: #22c55e;
}
.puzzle-card .icon[b-frsflggb54] {
font-size: 0.9rem;
}
/* Action Button */
.puzzle-card .puzzle-actions[b-frsflggb54] {
margin-top: auto;
}
.puzzle-card .play-btn[b-frsflggb54] {
width: 100%;
padding: 0.8rem 1rem;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.puzzle-card .play-btn.start[b-frsflggb54] {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.puzzle-card .play-btn.start:hover[b-frsflggb54] {
background: linear-gradient(135deg, #16a34a, #15803d);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3);
}
.puzzle-card .play-btn.in-progress[b-frsflggb54] {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.puzzle-card .play-btn.in-progress:hover[b-frsflggb54] {
background: linear-gradient(135deg, #d97706, #b45309);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3);
}
.puzzle-card .play-btn.completed[b-frsflggb54] {
background: linear-gradient(135deg, #059669, #047857);
color: white;
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}
.puzzle-card .play-btn.completed:hover[b-frsflggb54] {
background: linear-gradient(135deg, #047857, #065f46);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3);
}
.puzzle-card .btn-icon[b-frsflggb54] {
font-size: 1rem;
}
/* _content/Logikbug.Frontend/Components/Puzzles/PatternBuilderComponent.razor.rz.scp.css */
/* Components/Puzzles/PatternBuilder.razor.css */
.puzzle-container[b-okoozcx7w3] {
background: var(--background);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
max-width: 800px;
margin: 2rem auto;
font-family: 'Segoe UI', Roboto, sans-serif;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.puzzle-container.loaded[b-okoozcx7w3] {
opacity: 1;
transform: translateY(0);
}
.puzzle-header[b-okoozcx7w3] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
border-bottom: 2px solid var(--logik-green-light);
padding-bottom: 1rem;
}
.puzzle-title-section[b-okoozcx7w3] {
display: flex;
align-items: center;
gap: 1rem;
}
.puzzle-mascot[b-okoozcx7w3] {
width: 3rem;
height: 3rem;
animation: gentle-bounce-b-okoozcx7w3 2s ease-in-out infinite;
}
@keyframes gentle-bounce-b-okoozcx7w3 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.puzzle-title[b-okoozcx7w3] {
color: var(--foreground);
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}
.puzzle-description[b-okoozcx7w3] {
color: var(--muted-foreground);
margin: 0.25rem 0 0 0;
font-size: 1rem;
}
.puzzle-progress[b-okoozcx7w3] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
}
.progress-bar[b-okoozcx7w3] {
width: 120px;
height: 8px;
background: var(--muted);
border-radius: 4px;
overflow: hidden;
}
.progress-fill[b-okoozcx7w3] {
height: 100%;
background: linear-gradient(90deg, var(--logik-green), var(--logik-yellow));
border-radius: 4px;
transition: width 0.8s ease;
}
.progress-text[b-okoozcx7w3] {
font-size: 0.875rem;
color: var(--muted-foreground);
font-weight: 500;
}
/* Game Area Styling */
.game-area[b-okoozcx7w3] {
display: flex;
flex-direction: column;
gap: 2rem;
margin-bottom: 2rem;
}
.pattern-display[b-okoozcx7w3] {
display: flex;
justify-content: center;
gap: 1rem;
padding: 2rem;
background: rgba(86, 177, 75, 0.05);
border-radius: 1rem;
border: 2px dashed var(--logik-green-light);
}
.pattern-slot[b-okoozcx7w3] {
width: 4rem;
height: 4rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
}
.pattern-piece[b-okoozcx7w3] {
width: 3.5rem;
height: 3.5rem;
border-radius: 0.5rem;
border: 3px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.pattern-piece.preview[b-okoozcx7w3] {
animation: gentle-pulse-b-okoozcx7w3 1s ease-in-out infinite;
border-color: var(--logik-yellow);
}
@keyframes gentle-pulse-b-okoozcx7w3 {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.missing-slot[b-okoozcx7w3] {
background: rgba(255, 215, 0, 0.1);
border: 2px dashed var(--logik-yellow);
}
.pattern-placeholder[b-okoozcx7w3] {
width: 3.5rem;
height: 3.5rem;
border: 3px dashed var(--muted-foreground);
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--muted-foreground);
animation: question-pulse-b-okoozcx7w3 2s ease-in-out infinite;
}
@keyframes question-pulse-b-okoozcx7w3 {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
.draggable-options[b-okoozcx7w3] {
display: flex;
justify-content: center;
gap: 1rem;
padding: 1.5rem;
background: var(--card);
border-radius: 1rem;
border: 1px solid var(--border);
}
.draggable-piece[b-okoozcx7w3] {
width: 3.5rem;
height: 3.5rem;
border-radius: 0.5rem;
border: 3px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.draggable-piece:hover[b-okoozcx7w3] {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.draggable-piece:active[b-okoozcx7w3] {
transform: translateY(-1px) scale(1.02);
}
.draggable-piece.selected[b-okoozcx7w3] {
border-color: var(--logik-yellow);
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
}
/* Control Buttons */
.puzzle-controls[b-okoozcx7w3] {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.btn[b-okoozcx7w3] {
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
border: none;
font-weight: 500;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary[b-okoozcx7w3] {
background: var(--logik-green);
color: white;
}
.btn-primary:hover:not(:disabled)[b-okoozcx7w3] {
background: var(--logik-green-hover);
transform: translateY(-2px);
}
.btn-secondary[b-okoozcx7w3] {
background: var(--muted);
color: var(--foreground);
}
.btn-secondary:hover:not(:disabled)[b-okoozcx7w3] {
background: var(--accent);
}
.btn:disabled[b-okoozcx7w3] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Feedback System */
.feedback-section[b-okoozcx7w3] {
background: var(--card);
border-radius: 1rem;
padding: 1.5rem;
border-left: 4px solid;
animation: feedback-appear-b-okoozcx7w3 0.5s ease;
}
@keyframes feedback-appear-b-okoozcx7w3 {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.feedback-success[b-okoozcx7w3] {
border-color: var(--logik-green);
background: var(--logik-green-light);
}
.feedback-partial[b-okoozcx7w3] {
border-color: var(--logik-yellow);
background: var(--logik-yellow-light);
}
.feedback-content[b-okoozcx7w3] {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
}
.feedback-icon[b-okoozcx7w3] {
font-size: 1.5rem;
margin-top: 0.25rem;
}
.feedback-success .feedback-icon[b-okoozcx7w3] {
color: var(--logik-green);
}
.feedback-partial .feedback-icon[b-okoozcx7w3] {
color: var(--logik-yellow-dark);
}
.feedback-text p[b-okoozcx7w3] {
margin: 0;
color: var(--foreground);
font-weight: 500;
}
.hint-text[b-okoozcx7w3] {
font-size: 0.9rem;
color: var(--muted-foreground);
font-style: italic;
margin-top: 0.5rem !important;
}
.btn-success[b-okoozcx7w3] {
background: var(--logik-green);
color: white;
align-self: flex-start;
}
.btn-success:hover[b-okoozcx7w3] {
background: var(--logik-green-hover);
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 768px) {
.puzzle-container[b-okoozcx7w3] {
margin: 1rem;
padding: 1.5rem;
}
.puzzle-header[b-okoozcx7w3] {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.pattern-display[b-okoozcx7w3] {
padding: 1.5rem;
gap: 0.75rem;
}
.pattern-slot[b-okoozcx7w3], .draggable-piece[b-okoozcx7w3] {
width: 3rem;
height: 3rem;
}
.pattern-piece[b-okoozcx7w3], .pattern-placeholder[b-okoozcx7w3] {
width: 2.5rem;
height: 2.5rem;
}
.draggable-options[b-okoozcx7w3] {
gap: 0.75rem;
padding: 1rem;
}
.puzzle-controls[b-okoozcx7w3] {
flex-direction: column;
}
}
/* Educational Accessibility */
.puzzle-container:focus-within[b-okoozcx7w3] {
box-shadow: 0 0 0 3px rgba(86, 177, 75, 0.3);
}
.draggable-piece:focus[b-okoozcx7w3] {
outline: 3px solid var(--logik-green);
outline-offset: 2px;
}
/* Success Celebration Animation */
@keyframes celebrate-success-b-okoozcx7w3 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.pattern-piece.success[b-okoozcx7w3] {
animation: celebrate-success-b-okoozcx7w3 0.6s ease;
}
/* _content/Logikbug.Frontend/Components/Puzzles/PatternBuilderPuzzle.razor.rz.scp.css */
/* Components/Puzzles/PatternBuilderPuzzle.razor.css */
.puzzle-container[b-wi6v39f2ls] {
background: #ffffff;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
max-width: 800px;
margin: 2rem auto;
font-family: 'Segoe UI', Roboto, sans-serif;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.puzzle-container.loaded[b-wi6v39f2ls] {
opacity: 1;
transform: translateY(0);
}
.puzzle-header[b-wi6v39f2ls] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
border-bottom: 2px solid rgba(86, 177, 75, 0.1);
padding-bottom: 1rem;
}
.puzzle-title-section[b-wi6v39f2ls] {
display: flex;
align-items: center;
gap: 1rem;
}
.puzzle-mascot[b-wi6v39f2ls] {
width: 3rem;
height: 3rem;
animation: gentle-bounce-b-wi6v39f2ls 2s ease-in-out infinite;
}
@keyframes gentle-bounce-b-wi6v39f2ls {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.puzzle-title[b-wi6v39f2ls] {
color: #030213;
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}
.puzzle-description[b-wi6v39f2ls] {
color: #717182;
margin: 0.25rem 0 0 0;
font-size: 1rem;
}
.puzzle-progress[b-wi6v39f2ls] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
}
.progress-bar[b-wi6v39f2ls] {
width: 120px;
height: 8px;
background: #ececf0;
border-radius: 4px;
overflow: hidden;
}
.progress-fill[b-wi6v39f2ls] {
height: 100%;
background: linear-gradient(90deg, #56B14B, #FFD700);
border-radius: 4px;
transition: width 0.8s ease;
}
.progress-text[b-wi6v39f2ls] {
font-size: 0.875rem;
color: #717182;
font-weight: 500;
}
.game-area[b-wi6v39f2ls] {
display: flex;
flex-direction: column;
gap: 2rem;
margin-bottom: 2rem;
}
.pattern-display[b-wi6v39f2ls] {
display: flex;
justify-content: center;
gap: 1rem;
padding: 2rem;
background: rgba(86, 177, 75, 0.05);
border-radius: 1rem;
border: 2px dashed rgba(86, 177, 75, 0.2);
}
.pattern-slot[b-wi6v39f2ls] {
width: 4rem;
height: 4rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
}
.pattern-piece[b-wi6v39f2ls] {
width: 3.5rem;
height: 3.5rem;
border-radius: 0.5rem;
border: 3px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.pattern-piece.preview[b-wi6v39f2ls] {
animation: gentle-pulse-b-wi6v39f2ls 1s ease-in-out infinite;
border-color: #FFD700;
}
@keyframes gentle-pulse-b-wi6v39f2ls {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.missing-slot[b-wi6v39f2ls] {
background: rgba(255, 215, 0, 0.1);
border: 2px dashed #FFD700;
border-radius: 0.75rem;
}
.pattern-placeholder[b-wi6v39f2ls] {
width: 3.5rem;
height: 3.5rem;
border: 3px dashed #717182;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #717182;
animation: question-pulse-b-wi6v39f2ls 2s ease-in-out infinite;
}
@keyframes question-pulse-b-wi6v39f2ls {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
.instruction-text[b-wi6v39f2ls] {
text-align: center;
margin: 1rem 0;
}
.instruction-text p[b-wi6v39f2ls] {
font-size: 1.1rem;
color: #030213;
font-weight: 500;
}
.draggable-options[b-wi6v39f2ls] {
display: flex;
justify-content: center;
gap: 1rem;
padding: 1.5rem;
background: #ffffff;
border-radius: 1rem;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.draggable-piece[b-wi6v39f2ls] {
width: 3.5rem;
height: 3.5rem;
border-radius: 0.5rem;
border: 3px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.draggable-piece:hover[b-wi6v39f2ls] {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.draggable-piece:active[b-wi6v39f2ls] {
transform: translateY(-1px) scale(1.02);
}
.draggable-piece.selected[b-wi6v39f2ls] {
border-color: #FFD700;
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
transform: translateY(-3px) scale(1.05);
}
.puzzle-controls[b-wi6v39f2ls] {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.btn[b-wi6v39f2ls] {
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
border: none;
font-weight: 500;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary[b-wi6v39f2ls] {
background: #56B14B;
color: white;
}
.btn-primary:hover:not(:disabled)[b-wi6v39f2ls] {
background: #4a9640;
transform: translateY(-2px);
}
.btn-secondary[b-wi6v39f2ls] {
background: #ececf0;
color: #030213;
}
.btn-secondary:hover:not(:disabled)[b-wi6v39f2ls] {
background: #e9ebef;
}
.btn:disabled[b-wi6v39f2ls] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.spinner[b-wi6v39f2ls] {
width: 1rem;
height: 1rem;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin-b-wi6v39f2ls 1s linear infinite;
}
@keyframes spin-b-wi6v39f2ls {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.feedback-section[b-wi6v39f2ls] {
background: #ffffff;
border-radius: 1rem;
padding: 1.5rem;
border-left: 4px solid;
animation: feedback-appear-b-wi6v39f2ls 0.5s ease;
}
@keyframes feedback-appear-b-wi6v39f2ls {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.feedback-success[b-wi6v39f2ls] {
border-color: #56B14B;
background: rgba(86, 177, 75, 0.1);
}
.feedback-partial[b-wi6v39f2ls] {
border-color: #FFD700;
background: rgba(255, 215, 0, 0.1);
}
.feedback-content[b-wi6v39f2ls] {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
}
.feedback-icon[b-wi6v39f2ls] {
font-size: 1.5rem;
margin-top: 0.25rem;
}
.feedback-text p[b-wi6v39f2ls] {
margin: 0;
color: #030213;
font-weight: 500;
}
.hint-text[b-wi6v39f2ls] {
font-size: 0.9rem;
color: #717182;
font-style: italic;
margin-top: 0.5rem !important;
}
.btn-success[b-wi6v39f2ls] {
background: #56B14B;
color: white;
align-self: flex-start;
}
.btn-success:hover[b-wi6v39f2ls] {
background: #4a9640;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 768px) {
.puzzle-container[b-wi6v39f2ls] {
margin: 1rem;
padding: 1.5rem;
}
.puzzle-header[b-wi6v39f2ls] {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.pattern-display[b-wi6v39f2ls] {
padding: 1.5rem;
gap: 0.75rem;
}
.pattern-slot[b-wi6v39f2ls], .draggable-piece[b-wi6v39f2ls] {
width: 3rem;
height: 3rem;
}
.pattern-piece[b-wi6v39f2ls], .pattern-placeholder[b-wi6v39f2ls] {
width: 2.5rem;
height: 2.5rem;
}
.draggable-options[b-wi6v39f2ls] {
gap: 0.75rem;
padding: 1rem;
}
.puzzle-controls[b-wi6v39f2ls] {
flex-direction: column;
}
}
/* Educational Accessibility */
.puzzle-container:focus-within[b-wi6v39f2ls] {
box-shadow: 0 0 0 3px rgba(86, 177, 75, 0.3);
}
.draggable-piece:focus[b-wi6v39f2ls] {
outline: 3px solid #56B14B;
outline-offset: 2px;
}
/* Success Animation */
@keyframes celebrate-success-b-wi6v39f2ls {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.pattern-piece.success[b-wi6v39f2ls] {
animation: celebrate-success-b-wi6v39f2ls 0.6s ease;
}
/* _content/Logikbug.Frontend/Pages/Index.razor.rz.scp.css */
/* Hero Section */
.hero-section[b-l3hj2ea2pb] {
width: 100%;
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 50%, #ecfdf5 100%);
padding: 4rem 0 6rem 0;
text-align: center;
}
.hero-container[b-l3hj2ea2pb] {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 3rem;
}
.hero-title[b-l3hj2ea2pb] {
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
color: #111827;
margin: 0;
letter-spacing: -0.025em;
max-width: 800px;
}
.hero-subtitle[b-l3hj2ea2pb] {
font-size: 1.25rem;
line-height: 1.6;
color: #6b7280;
margin: 0;
max-width: 600px;
}
.hero-actions[b-l3hj2ea2pb] {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.hero-preview[b-l3hj2ea2pb] {
display: flex;
justify-content: center;
margin-top: 1rem;
}
.puzzle-preview-card[b-l3hj2ea2pb] {
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
border-radius: 16px;
padding: 1.5rem;
border: 2px solid #bbf7d0;
min-width: 280px;
max-width: 320px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.preview-header[b-l3hj2ea2pb] {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.preview-icon[b-l3hj2ea2pb] {
font-size: 1.5rem;
}
.preview-header h3[b-l3hj2ea2pb] {
font-size: 1.1rem;
font-weight: 600;
color: #111827;
margin: 0;
}
.preview-text[b-l3hj2ea2pb] {
color: #6b7280;
font-size: 0.9rem;
margin: 0 0 1rem 0;
line-height: 1.5;
}
.preview-difficulty[b-l3hj2ea2pb] {
display: flex;
justify-content: flex-end;
}
.difficulty-beginner[b-l3hj2ea2pb] {
background: #dcfce7;
color: #166534;
border: 1px solid #bbf7d0;
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
}
/* Button Styles */
.primary-btn[b-l3hj2ea2pb] {
background: #22c55e;
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.primary-btn:hover[b-l3hj2ea2pb] {
background: #16a34a;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(34, 197, 94, 0.25);
}
.primary-btn.large[b-l3hj2ea2pb] {
padding: 1.25rem 2.5rem;
font-size: 1.2rem;
}
.secondary-btn[b-l3hj2ea2pb] {
background: transparent;
color: #374151;
border: 1px solid #d1d5db;
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.secondary-btn:hover[b-l3hj2ea2pb] {
background: #f9fafb;
border-color: #9ca3af;
transform: translateY(-1px);
}
/* Features Section */
.features-section[b-l3hj2ea2pb] {
width: 100%;
padding: 5rem 0;
background: #ffffff;
}
.features-container[b-l3hj2ea2pb] {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.section-title[b-l3hj2ea2pb] {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
color: #111827;
margin-bottom: 3rem;
letter-spacing: -0.025em;
}
.features-grid[b-l3hj2ea2pb] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.feature-card[b-l3hj2ea2pb] {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card:hover[b-l3hj2ea2pb] {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: #22c55e;
}
.feature-card:hover[b-l3hj2ea2pb]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #22c55e, #16a34a);
}
.feature-icon[b-l3hj2ea2pb] {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.9;
}
.feature-title[b-l3hj2ea2pb] {
font-size: 1.5rem;
font-weight: 600;
color: #111827;
margin-bottom: 1rem;
}
.feature-description[b-l3hj2ea2pb] {
color: #6b7280;
line-height: 1.6;
font-size: 1rem;
margin: 0;
}
/* CTA Section */
.cta-section[b-l3hj2ea2pb] {
width: 100%;
background: linear-gradient(135deg, #065f46 0%, #047857 50%, #059669 100%);
padding: 5rem 0;
color: white;
text-align: center;
}
.cta-container[b-l3hj2ea2pb] {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
.cta-title[b-l3hj2ea2pb] {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
letter-spacing: -0.025em;
}
.cta-subtitle[b-l3hj2ea2pb] {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 2.5rem;
line-height: 1.6;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-actions[b-l3hj2ea2pb] {
display: flex;
justify-content: center;
}
/* Safety Section */
.safety-section[b-l3hj2ea2pb] {
width: 100%;
padding: 3rem 0;
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
border-top: 1px solid #bbf7d0;
border-bottom: 1px solid #bbf7d0;
}
.safety-container[b-l3hj2ea2pb] {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
text-align: center;
}
.safety-title[b-l3hj2ea2pb] {
font-size: 1.5rem;
font-weight: 700;
color: #065f46;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.safety-description[b-l3hj2ea2pb] {
color: #374151;
line-height: 1.6;
font-size: 1rem;
margin: 0;
background: rgba(255, 255, 255, 0.8);
border-radius: 16px;
padding: 2rem;
border: 1px solid #bbf7d0;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-title[b-l3hj2ea2pb] {
font-size: 2.5rem;
}
.hero-subtitle[b-l3hj2ea2pb] {
font-size: 1.1rem;
}
.section-title[b-l3hj2ea2pb] {
font-size: 2rem;
}
.cta-title[b-l3hj2ea2pb] {
font-size: 2rem;
}
.features-grid[b-l3hj2ea2pb] {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.puzzle-preview-card[b-l3hj2ea2pb] {
min-width: 240px;
}
.hero-section[b-l3hj2ea2pb] {
padding: 3rem 0 4rem 0;
}
.features-section[b-l3hj2ea2pb], .cta-section[b-l3hj2ea2pb] {
padding: 3rem 0;
}
.safety-section[b-l3hj2ea2pb] {
padding: 2rem 0;
}
}
@media (max-width: 480px) {
.hero-section[b-l3hj2ea2pb] {
padding: 2rem 0 3rem 0;
}
.hero-title[b-l3hj2ea2pb] {
font-size: 2rem;
}
.primary-btn[b-l3hj2ea2pb], .secondary-btn[b-l3hj2ea2pb] {
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
.primary-btn.large[b-l3hj2ea2pb] {
padding: 1rem 2rem;
font-size: 1.1rem;
}
.hero-actions[b-l3hj2ea2pb] {
flex-direction: column;
align-items: center;
width: 100%;
}
.hero-actions button[b-l3hj2ea2pb] {
width: 100%;
max-width: 280px;
justify-content: center;
}
}
/* _content/Logikbug.Frontend/Pages/Labs/Index.razor.rz.scp.css */
/* Advanced Labs - Logikbug Theme */
.advanced-labs-container[b-fi42raruip] {
max-width: var(--content-max-width);
width: 100%;
margin: 0 auto;
padding: 2rem var(--gutter-desktop);
}
.page-header[b-fi42raruip] {
background: linear-gradient(135deg, #065f46 0%, #047857 50%, #059669 100%);
color: white;
text-align: center;
padding: 3rem 2rem;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(5, 150, 105, 0.15);
margin-bottom: 2rem;
}
.page-header h1[b-fi42raruip] {
color: white;
font-size: 2.75rem;
font-weight: 800;
margin-bottom: 1rem;
letter-spacing: -0.025em;
}
.page-header p[b-fi42raruip] {
color: rgba(255, 255, 255, 0.95);
font-size: 1.25rem;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
/* Filter Section */
.filter-section[b-fi42raruip] {
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
padding: 2rem;
border-radius: 16px;
margin-bottom: 2rem;
border: 1px solid #bbf7d0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.filter-categories[b-fi42raruip] {
margin-bottom: 1.5rem;
}
.filter-categories h3[b-fi42raruip] {
color: #065f46;
margin-bottom: 1.5rem;
font-size: 1.5rem;
font-weight: 800;
margin-top: 0;
text-align: center;
letter-spacing: -0.025em;
}
/* Controls Row */
.controls-row[b-fi42raruip] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
flex-wrap: wrap;
}
.filter-buttons[b-fi42raruip] {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.filter-btn[b-fi42raruip] {
background: white;
border: 2px solid #d1d5db;
color: #374151;
padding: 0.625rem 1.25rem;
border-radius: 12px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
min-height: var(--touch-target-min);
display: flex;
align-items: center;
justify-content: center;
}
.filter-btn:hover[b-fi42raruip] {
background: #f9fafb;
border-color: #22c55e;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.filter-btn.active[b-fi42raruip] {
background: #22c55e;
color: white;
border-color: #22c55e;
box-shadow: 0 4px 16px rgba(34, 197, 94, 0.25);
transform: translateY(-1px);
}
/* View Toggle Section */
.view-toggle-section[b-fi42raruip] {
display: flex;
align-items: center;
gap: 1rem;
}
/* Difficulty Filter Section */
.difficulty-filter-section[b-fi42raruip] {
display: flex;
align-items: center;
gap: 1rem;
}
.filter-label[b-fi42raruip],
.toggle-label[b-fi42raruip] {
font-weight: 600;
color: #374151;
}
.difficulty-filter[b-fi42raruip] {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.difficulty-btn[b-fi42raruip] {
background: white;
border: 2px solid #d1d5db;
color: #374151;
padding: 0.5rem 1rem;
border-radius: 12px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.difficulty-btn:hover[b-fi42raruip] {
background: #f9fafb;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.difficulty-btn.active[b-fi42raruip] {
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
/* Default active style for "All" button */
.difficulty-btn.active:not(.beginner):not(.intermediate):not(.advanced):not(.expert)[b-fi42raruip] {
background: linear-gradient(135deg, #22c55e, #16a34a);
border-color: #22c55e;
}
/* Difficulty-specific colors */
.difficulty-btn.beginner[b-fi42raruip] {
border-color: #22c55e;
}
.difficulty-btn.beginner:hover[b-fi42raruip] {
border-color: #16a34a;
}
.difficulty-btn.beginner.active[b-fi42raruip] {
background: linear-gradient(135deg, #22c55e, #16a34a);
border-color: #22c55e;
}
.difficulty-btn.intermediate[b-fi42raruip] {
border-color: #f59e0b;
}
.difficulty-btn.intermediate:hover[b-fi42raruip] {
border-color: #d97706;
}
.difficulty-btn.intermediate.active[b-fi42raruip] {
background: linear-gradient(135deg, #f59e0b, #d97706);
border-color: #f59e0b;
}
.difficulty-btn.advanced[b-fi42raruip] {
border-color: #f97316;
}
.difficulty-btn.advanced:hover[b-fi42raruip] {
border-color: #ea580c;
}
.difficulty-btn.advanced.active[b-fi42raruip] {
background: linear-gradient(135deg, #f97316, #ea580c);
border-color: #f97316;
}
.difficulty-btn.expert[b-fi42raruip] {
border-color: #ef4444;
}
.difficulty-btn.expert:hover[b-fi42raruip] {
border-color: #dc2626;
}
.difficulty-btn.expert.active[b-fi42raruip] {
background: linear-gradient(135deg, #ef4444, #dc2626);
border-color: #ef4444;
}
.view-toggle[b-fi42raruip] {
background: white;
border: 2px solid #d1d5db;
border-radius: 12px;
overflow: hidden;
display: flex;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.toggle-btn[b-fi42raruip] {
background: transparent;
border: none;
padding: 0.625rem 1.25rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
color: #6b7280;
min-height: var(--touch-target-min);
justify-content: center;
}
.toggle-btn:hover[b-fi42raruip] {
background: #f0fdf4;
color: #059669;
}
.toggle-btn.active[b-fi42raruip] {
background: #22c55e;
color: white;
}
.toggle-icon[b-fi42raruip] {
font-size: 1rem;
}
/* Labs Container */
.labs-container[b-fi42raruip] {
background: #ffffff;
border-radius: 16px;
padding: 2rem;
min-height: 400px;
border: 1px solid #e5e7eb;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
/* Grid Layouts */
.expanded-grid[b-fi42raruip] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 2rem;
}
.compact-grid[b-fi42raruip] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
/* No Labs Message */
.no-labs[b-fi42raruip] {
text-align: center;
padding: 3rem;
color: #6b7280;
}
.no-labs h3[b-fi42raruip] {
color: #374151;
margin-bottom: 0.5rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.advanced-labs-container[b-fi42raruip] {
padding: 1rem var(--gutter-tablet);
}
}
@media (max-width: 640px) {
.advanced-labs-container[b-fi42raruip] {
padding: 1rem var(--gutter-mobile);
}
.page-header[b-fi42raruip] {
padding: 1.5rem;
}
.page-header h1[b-fi42raruip] {
font-size: 2rem;
}
.page-header p[b-fi42raruip] {
font-size: 1rem;
}
.filter-section[b-fi42raruip] {
padding: 1rem;
}
.controls-row[b-fi42raruip] {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.view-toggle-section[b-fi42raruip] {
justify-content: flex-start;
}
.difficulty-filter-section[b-fi42raruip] {
width: 100%;
}
.difficulty-filter[b-fi42raruip] {
justify-content: center;
}
.expanded-grid[b-fi42raruip],
.compact-grid[b-fi42raruip] {
grid-template-columns: 1fr;
}
.labs-container[b-fi42raruip] {
padding: 1rem;
}
}
@media (max-width: 480px) {
.filter-buttons[b-fi42raruip] {
justify-content: center;
}
.filter-btn[b-fi42raruip] {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
.toggle-btn[b-fi42raruip] {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
}
/* _content/Logikbug.Frontend/Pages/Labs/LabDetail.razor.rz.scp.css */
/* Lab Detail Page Styles */
.lab-detail-container[b-rj24czf2i5] {
max-width: var(--content-max-width-wide);
margin: 0 auto;
padding: var(--gutter-desktop);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.lab-header[b-rj24czf2i5] {
background: linear-gradient(135deg, #065f46 0%, #047857 50%, #059669 100%);
color: white;
padding: var(--spacing-xl) var(--spacing-2xl);
border-radius: 16px;
margin-bottom: var(--spacing-xl);
}
.lab-title-row[b-rj24czf2i5] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
flex-wrap: wrap;
gap: 1rem;
}
.lab-meta-inline[b-rj24czf2i5] {
display: flex;
gap: 1.5rem;
font-size: 0.9rem;
opacity: 0.9;
}
.lab-meta-inline span[b-rj24czf2i5] {
display: flex;
align-items: center;
gap: 0.25rem;
}
.breadcrumb a[b-rj24czf2i5] {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.9rem;
margin-bottom: 1rem;
display: inline-block;
}
.breadcrumb a:hover[b-rj24czf2i5] {
color: white;
text-decoration: underline;
}
.lab-category-badge[b-rj24czf2i5] {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.lab-header h1[b-rj24czf2i5] {
font-size: 2.5rem;
margin: 0 0 1rem 0;
font-weight: 800;
}
.lab-description[b-rj24czf2i5] {
font-size: 1.2rem;
opacity: 0.9;
margin: 0 0 1.5rem 0;
line-height: 1.6;
}
.lab-meta[b-rj24czf2i5] {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.meta-item[b-rj24czf2i5] {
font-size: 0.95rem;
}
.meta-item strong[b-rj24czf2i5] {
opacity: 0.8;
}
/* Two Column Main Layout */
.lab-main-layout[b-rj24czf2i5] {
display: flex;
gap: var(--spacing-2xl);
flex: 1;
min-height: 0;
align-items: start;
}
/* Prompt Column (Left) */
.prompt-column[b-rj24czf2i5] {
position: sticky;
top: 80px; /* Account for nav height + some padding */
left: 0;
width: 30vw; /* 30% of viewport width */
display: flex;
flex-direction: column;
height: calc(100vh - 80px); /* Full height minus nav */
margin-left: calc(-1 * var(--gutter-desktop) + 23px); /* Align with content */
}
.prompt-interface[b-rj24czf2i5] {
background: white;
border-radius: 16px;
border: 2px solid #e5e7eb;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
position: relative;
}
.prompt-header[b-rj24czf2i5] {
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
padding: var(--spacing-lg) var(--spacing-xl);
border-bottom: 1px solid #d1fae5;
border-radius: 16px 16px 0 0;
}
.prompt-header h2[b-rj24czf2i5] {
color: #065f46;
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.prompt-header p[b-rj24czf2i5] {
color: #047857;
font-size: 0.9rem;
margin: 0;
line-height: 1.4;
}
.prompt-history[b-rj24czf2i5] {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
background: #fafafa;
scrollbar-width: thin;
scrollbar-color: #d1d5db #f9fafb;
min-height: 0; /* Allow flexbox shrinking */
scroll-behavior: smooth;
}
.prompt-history[b-rj24czf2i5]::-webkit-scrollbar {
width: 6px;
}
.prompt-history[b-rj24czf2i5]::-webkit-scrollbar-track {
background: #f9fafb;
}
.prompt-history[b-rj24czf2i5]::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px;
}
.message[b-rj24czf2i5] {
display: flex;
margin-bottom: var(--spacing-md);
animation: messageSlideIn-b-rj24czf2i5 0.3s ease-out;
}
.user-message[b-rj24czf2i5] {
justify-content: flex-end;
}
.ai-message[b-rj24czf2i5] {
justify-content: flex-start;
}
.message-content[b-rj24czf2i5] {
max-width: 80%;
background: white;
padding: var(--spacing-md) var(--spacing-lg);
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
position: relative;
}
.user-message .message-content[b-rj24czf2i5] {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
border-bottom-right-radius: 6px;
}
.ai-message .message-content[b-rj24czf2i5] {
background: white;
color: #374151;
border-bottom-left-radius: 6px;
border: 1px solid #e5e7eb;
}
.message-text[b-rj24czf2i5] {
font-size: 0.95rem;
line-height: 1.5;
white-space: pre-wrap;
}
.message-time[b-rj24czf2i5] {
font-size: 0.75rem;
opacity: 0.7;
margin-top: 0.25rem;
text-align: right;
}
.ai-message .message-time[b-rj24czf2i5] {
text-align: left;
}
.prompt-input-area[b-rj24czf2i5] {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-lg);
border-top: 1px solid #e5e7eb;
background: white;
border-radius: 0 0 16px 16px;
}
.prompt-input[b-rj24czf2i5] {
flex: 1;
padding: var(--spacing-md) var(--spacing-lg);
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 0.95rem;
outline: none;
transition: border-color 0.2s ease;
min-height: var(--touch-target-min);
}
.prompt-input:focus[b-rj24czf2i5] {
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.send-button[b-rj24czf2i5] {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
border: none;
padding: var(--spacing-md) var(--spacing-xl);
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
min-width: var(--touch-target-min);
min-height: var(--touch-target-min);
display: flex;
align-items: center;
justify-content: center;
}
.send-button:hover:not(:disabled)[b-rj24czf2i5] {
background: linear-gradient(135deg, #16a34a, #15803d);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.send-button:disabled[b-rj24czf2i5] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.loading-spinner[b-rj24czf2i5] {
animation: spin-b-rj24czf2i5 1s linear infinite;
}
/* Lab Column (Right) */
.lab-column[b-rj24czf2i5] {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
width: calc(70% - var(--spacing-2xl));
margin-left: auto;
}
/* Content Sections */
.lab-content[b-rj24czf2i5] {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.scenario-section[b-rj24czf2i5],
.objectives-section[b-rj24czf2i5],
.challenges-section[b-rj24czf2i5],
.ai-interface-placeholder[b-rj24czf2i5],
.hints-section[b-rj24czf2i5] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
}
.lab-content h2[b-rj24czf2i5] {
color: #1f2937;
font-size: 1.5rem;
margin: 0 0 1rem 0;
font-weight: 700;
}
/* Scenario Box */
.scenario-box[b-rj24czf2i5] {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-left: 4px solid #0ea5e9;
padding: 1.5rem;
border-radius: 0 8px 8px 0;
font-size: 1.1rem;
line-height: 1.6;
color: #0f172a;
}
/* Objectives List */
.objectives-list[b-rj24czf2i5] {
margin: 0;
padding-left: 0;
list-style: none;
}
.objectives-list li[b-rj24czf2i5] {
background: #f8fafc;
border-left: 3px solid #22c55e;
padding: 0.8rem 1rem;
margin-bottom: 0.5rem;
border-radius: 0 6px 6px 0;
position: relative;
}
.objectives-list li[b-rj24czf2i5]::before {
content: '✓';
color: #22c55e;
font-weight: bold;
margin-right: 0.5rem;
}
/* Challenges List */
.challenges-list[b-rj24czf2i5] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.challenge-item[b-rj24czf2i5] {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #fefefe;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 1.2rem;
transition: all 0.2s ease;
}
.challenge-item:hover[b-rj24czf2i5] {
border-color: #4c1d95;
box-shadow: 0 4px 8px rgba(76, 29, 149, 0.1);
}
.challenge-number[b-rj24czf2i5] {
background: linear-gradient(135deg, #4c1d95, #7c3aed);
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
flex-shrink: 0;
}
.challenge-text[b-rj24czf2i5] {
font-size: 1rem;
line-height: 1.6;
color: #374151;
}
/* AI Interface Placeholder */
.ai-interface-placeholder[b-rj24czf2i5] {
border: 2px dashed #d1d5db;
text-align: center;
position: relative;
}
.coming-soon p[b-rj24czf2i5] {
color: #6b7280;
margin: 0.5rem 0;
font-size: 0.95rem;
line-height: 1.5;
}
.coming-soon p:first-child[b-rj24czf2i5] {
font-size: 1.1rem;
color: #374151;
}
/* Hints Section */
.hints-list[b-rj24czf2i5] {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.hint-item[b-rj24czf2i5] {
background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
border-left: 3px solid #f59e0b;
padding: 1rem;
border-radius: 0 8px 8px 0;
font-size: 0.95rem;
color: #92400e;
}
/* Actions */
.lab-actions[b-rj24czf2i5] {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}
.btn-primary[b-rj24czf2i5],
.btn-secondary[b-rj24czf2i5] {
padding: 0.8rem 1.5rem;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary[b-rj24czf2i5] {
background: linear-gradient(135deg, #4c1d95, #7c3aed);
color: white;
}
.btn-primary:hover[b-rj24czf2i5] {
background: linear-gradient(135deg, #3730a3, #6d28d9);
transform: translateY(-1px);
}
.btn-secondary[b-rj24czf2i5] {
background: #f8fafc;
color: #374151;
border: 1px solid #d1d5db;
}
.btn-secondary:hover[b-rj24czf2i5] {
background: #f1f5f9;
border-color: #9ca3af;
}
.loading[b-rj24czf2i5] {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
color: #6b7280;
}
/* Animations */
@keyframes messageSlideIn-b-rj24czf2i5 {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin-b-rj24czf2i5 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Responsive Design */
@media (max-width: 1024px) {
.lab-main-layout[b-rj24czf2i5] {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.prompt-column[b-rj24czf2i5] {
position: relative; /* Remove sticky on tablet/mobile */
height: 500px;
min-height: 500px;
max-height: 600px;
order: 2;
top: auto;
width: 100%;
}
.lab-column[b-rj24czf2i5] {
order: 1;
margin-left: 0;
width: 100%;
}
}
@media (max-width: 768px) {
.lab-detail-container[b-rj24czf2i5] {
padding: var(--gutter-tablet);
}
.lab-header[b-rj24czf2i5] {
padding: var(--spacing-lg);
}
.lab-header h1[b-rj24czf2i5] {
font-size: 2rem;
}
.lab-title-row[b-rj24czf2i5] {
flex-direction: column;
align-items: flex-start;
}
.lab-meta-inline[b-rj24czf2i5] {
flex-direction: column;
gap: 0.5rem;
}
.prompt-column[b-rj24czf2i5] {
position: relative;
height: 400px;
min-height: 400px;
max-height: 450px;
top: auto;
width: 100%;
}
.prompt-interface[b-rj24czf2i5] {
border-radius: 12px;
}
.prompt-header[b-rj24czf2i5] {
padding: var(--spacing-md);
}
.prompt-history[b-rj24czf2i5] {
padding: var(--spacing-md);
}
.prompt-input-area[b-rj24czf2i5] {
padding: var(--spacing-md);
flex-direction: column;
gap: var(--spacing-sm);
}
.send-button[b-rj24czf2i5] {
width: 100%;
}
.message-content[b-rj24czf2i5] {
max-width: 90%;
padding: var(--spacing-sm) var(--spacing-md);
}
.challenge-item[b-rj24czf2i5] {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.8rem;
}
.lab-actions[b-rj24czf2i5] {
flex-direction: column;
gap: var(--spacing-md);
}
.btn-primary[b-rj24czf2i5],
.btn-secondary[b-rj24czf2i5] {
width: 100%;
justify-content: center;
min-height: var(--touch-target-min);
}
}
@media (max-width: 640px) {
.lab-detail-container[b-rj24czf2i5] {
padding: var(--gutter-mobile);
}
.lab-header[b-rj24czf2i5] {
padding: var(--spacing-md);
}
.lab-header h1[b-rj24czf2i5] {
font-size: 1.75rem;
}
.prompt-column[b-rj24czf2i5] {
position: relative;
height: 350px;
min-height: 350px;
max-height: 400px;
top: auto;
width: 100%;
}
.prompt-input[b-rj24czf2i5] {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 16px; /* Prevent zoom on iOS */
}
}
/* _content/Logikbug.Frontend/Pages/Library/Index.razor.rz.scp.css */
/* Library Page - Business/Professional Styling */
.library-container[b-oym0w1i7nl] {
max-width: var(--content-max-width-wide);
margin: 0 auto;
padding: var(--gutter-desktop);
min-height: 100vh;
}
/* Header Section */
.library-header[b-oym0w1i7nl] {
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 25%, #06b6d4 75%, #10b981 100%);
color: white;
border-radius: 20px;
padding: 3rem 2rem;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
}
.library-header[b-oym0w1i7nl]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.header-content[b-oym0w1i7nl] {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
position: relative;
z-index: 1;
}
.title-section h1[b-oym0w1i7nl] {
font-size: 3rem;
font-weight: 800;
margin: 0 0 0.5rem 0;
background: linear-gradient(45deg, #ffffff, #e0f2fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle[b-oym0w1i7nl] {
font-size: 1.3rem;
opacity: 0.9;
margin: 0;
font-weight: 300;
}
.stats-section[b-oym0w1i7nl] {
display: flex;
gap: 2rem;
}
.stat-item[b-oym0w1i7nl] {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 1rem;
border-radius: 12px;
backdrop-filter: blur(10px);
}
.stat-number[b-oym0w1i7nl] {
display: block;
font-size: 2rem;
font-weight: 700;
color: #ffffff;
}
.stat-label[b-oym0w1i7nl] {
font-size: 0.9rem;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Filter Section */
.filter-section[b-oym0w1i7nl] {
background: white;
border: 2px solid #e5e7eb;
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.filter-categories h3[b-oym0w1i7nl] {
color: #1e40af;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 1rem 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
.category-buttons[b-oym0w1i7nl] {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
margin-bottom: 1.5rem;
}
.category-btn[b-oym0w1i7nl] {
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
color: #475569;
border: 2px solid #cbd5e1;
padding: 0.6rem 1.2rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.category-btn:hover[b-oym0w1i7nl] {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border-color: #3b82f6;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.25);
}
.category-btn.active[b-oym0w1i7nl] {
background: linear-gradient(135deg, #1e40af, #1e3a8a);
color: white;
border-color: #1e40af;
box-shadow: 0 4px 12px rgba(30, 64, 175, 0.4);
}
.controls-row[b-oym0w1i7nl] {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
}
.filter-controls[b-oym0w1i7nl] {
display: flex;
gap: 2rem;
align-items: center;
flex-wrap: wrap;
}
.filter-group[b-oym0w1i7nl] {
display: flex;
align-items: center;
gap: 0.8rem;
}
.filter-group label[b-oym0w1i7nl] {
font-weight: 600;
color: #374151;
font-size: 0.9rem;
}
.filter-group select[b-oym0w1i7nl] {
padding: 0.5rem 1rem;
border: 2px solid #d1d5db;
border-radius: 8px;
font-size: 0.9rem;
background: white;
color: #374151;
cursor: pointer;
transition: border-color 0.2s ease;
}
.filter-group select:focus[b-oym0w1i7nl] {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.difficulty-buttons[b-oym0w1i7nl] {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.difficulty-btn[b-oym0w1i7nl] {
padding: 0.4rem 0.8rem;
border: 2px solid #d1d5db;
background: white;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.difficulty-btn:hover[b-oym0w1i7nl] {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.difficulty-btn.active[b-oym0w1i7nl] {
color: white;
border-color: currentColor;
}
.difficulty-btn.beginner.active[b-oym0w1i7nl] { background: linear-gradient(135deg, #22c55e, #16a34a); }
.difficulty-btn.intermediate.active[b-oym0w1i7nl] { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.difficulty-btn.advanced.active[b-oym0w1i7nl] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.difficulty-btn.expert.active[b-oym0w1i7nl] { background: linear-gradient(135deg, #ef4444, #dc2626); }
.difficulty-btn.master.active[b-oym0w1i7nl] { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.difficulty-btn.active:not(.beginner):not(.intermediate):not(.advanced):not(.expert):not(.master)[b-oym0w1i7nl] {
background: linear-gradient(135deg, #1e40af, #1e3a8a);
border-color: #1e40af;
}
.view-controls[b-oym0w1i7nl] {
display: flex;
align-items: center;
gap: 0.8rem;
}
.view-controls label[b-oym0w1i7nl] {
font-weight: 600;
color: #374151;
font-size: 0.9rem;
}
.view-buttons[b-oym0w1i7nl] {
display: flex;
gap: 0.5rem;
}
.view-btn[b-oym0w1i7nl] {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
border: 2px solid #d1d5db;
background: white;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.view-btn:hover[b-oym0w1i7nl] {
border-color: #3b82f6;
background: #f0f9ff;
}
.view-btn.active[b-oym0w1i7nl] {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border-color: #3b82f6;
}
.view-btn .icon[b-oym0w1i7nl] {
font-size: 1rem;
}
/* Library Grid */
.library-grid[b-oym0w1i7nl] {
display: grid;
gap: 1.5rem;
margin-bottom: 2rem;
}
.library-grid.compact[b-oym0w1i7nl] {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.library-grid.expanded[b-oym0w1i7nl] {
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}
/* Empty State */
.empty-state[b-oym0w1i7nl] {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
text-align: center;
}
.empty-content[b-oym0w1i7nl] {
max-width: 400px;
}
.empty-icon[b-oym0w1i7nl] {
font-size: 4rem;
display: block;
margin-bottom: 1rem;
}
.empty-content h3[b-oym0w1i7nl] {
color: #374151;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.empty-content p[b-oym0w1i7nl] {
color: #6b7280;
margin-bottom: 1.5rem;
}
.btn-primary[b-oym0w1i7nl] {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary:hover[b-oym0w1i7nl] {
background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.25);
}
/* Responsive Design */
@media (max-width: 1024px) {
.library-container[b-oym0w1i7nl] {
padding: var(--gutter-tablet);
}
.header-content[b-oym0w1i7nl] {
flex-direction: column;
text-align: center;
}
.title-section h1[b-oym0w1i7nl] {
font-size: 2.5rem;
}
.stats-section[b-oym0w1i7nl] {
justify-content: center;
}
.controls-row[b-oym0w1i7nl] {
flex-direction: column;
gap: 1.5rem;
}
.filter-controls[b-oym0w1i7nl] {
justify-content: center;
}
.library-grid.compact[b-oym0w1i7nl] {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.library-grid.expanded[b-oym0w1i7nl] {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.library-container[b-oym0w1i7nl] {
padding: var(--gutter-mobile);
}
.library-header[b-oym0w1i7nl] {
padding: 2rem 1rem;
}
.title-section h1[b-oym0w1i7nl] {
font-size: 2rem;
}
.subtitle[b-oym0w1i7nl] {
font-size: 1.1rem;
}
.stats-section[b-oym0w1i7nl] {
gap: 1rem;
}
.category-buttons[b-oym0w1i7nl] {
gap: 0.5rem;
}
.category-btn[b-oym0w1i7nl] {
padding: 0.5rem 1rem;
font-size: 0.8rem;
}
.filter-controls[b-oym0w1i7nl] {
flex-direction: column;
gap: 1rem;
width: 100%;
}
.difficulty-buttons[b-oym0w1i7nl] {
justify-content: center;
}
.library-grid.compact[b-oym0w1i7nl] {
grid-template-columns: 1fr;
}
}
/* _content/Logikbug.Frontend/Pages/Library/LibraryDetail.razor.rz.scp.css */
/* Library Detail Page - Professional Business Theme */
.library-detail-container[b-ddx3qfn5fd] {
max-width: var(--content-max-width-wide);
margin: 0 auto;
padding: var(--gutter-desktop);
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Guardrail Safety Badge */
.guardrail-badge[b-ddx3qfn5fd] {
background: linear-gradient(45deg, #10b981, #059669) !important;
color: white !important;
border: 2px solid rgba(255, 255, 255, 0.3);
font-weight: 600;
padding: 0.3rem 0.8rem !important;
font-size: 0.8rem !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
animation: pulse-safe-b-ddx3qfn5fd 3s infinite;
}
@keyframes pulse-safe-b-ddx3qfn5fd {
0%, 100% { box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3); }
50% { box-shadow: 0 4px 8px rgba(16, 185, 129, 0.5); }
}
.library-header[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 25%, #06b6d4 75%, #10b981 100%);
color: white;
padding: var(--spacing-xl) var(--spacing-2xl);
border-radius: 20px;
margin-bottom: var(--spacing-xl);
position: relative;
overflow: hidden;
}
.library-header[b-ddx3qfn5fd]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.library-title-row[b-ddx3qfn5fd] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
flex-wrap: wrap;
gap: 1rem;
position: relative;
z-index: 1;
}
.library-meta-inline[b-ddx3qfn5fd] {
display: flex;
gap: 1.5rem;
font-size: 0.9rem;
opacity: 0.9;
flex-wrap: wrap;
}
.library-meta-inline span[b-ddx3qfn5fd] {
display: flex;
align-items: center;
gap: 0.25rem;
}
.breadcrumb a[b-ddx3qfn5fd] {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.9rem;
margin-bottom: 1rem;
display: inline-block;
position: relative;
z-index: 1;
}
.breadcrumb a:hover[b-ddx3qfn5fd] {
color: white;
text-decoration: underline;
}
.software-category-badge[b-ddx3qfn5fd] {
display: inline-block;
background: rgba(255, 255, 255, 0.25);
padding: 0.5rem 1.2rem;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.library-header h1[b-ddx3qfn5fd] {
font-size: 2.8rem;
margin: 0 0 1rem 0;
font-weight: 800;
position: relative;
z-index: 1;
background: linear-gradient(45deg, #ffffff, #e0f2fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.library-description[b-ddx3qfn5fd] {
font-size: 1.2rem;
opacity: 0.9;
margin: 0;
line-height: 1.6;
position: relative;
z-index: 1;
font-weight: 300;
}
/* Two Column Main Layout */
.library-main-layout[b-ddx3qfn5fd] {
display: flex;
gap: var(--spacing-2xl);
flex: 1;
min-height: 0;
align-items: start;
}
/* AI Coach Column (Left) */
.coach-column[b-ddx3qfn5fd] {
position: sticky;
top: 80px;
left: 0;
width: 70vw;
display: flex;
flex-direction: column;
height: calc(100vh - 80px);
margin-left: calc(-1 * var(--gutter-desktop) + 23px);
}
.coach-interface[b-ddx3qfn5fd] {
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
border-radius: 20px;
border: 2px solid #e2e8f0;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.12);
position: relative;
}
.coach-interface[b-ddx3qfn5fd]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #06b6d4, #10b981);
}
.coach-header[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
padding: var(--spacing-lg) var(--spacing-xl);
border-bottom: 2px solid #bfdbfe;
border-radius: 20px 20px 0 0;
}
.coach-header h2[b-ddx3qfn5fd] {
color: #1e40af;
font-size: 1.4rem;
font-weight: 800;
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.coach-header p[b-ddx3qfn5fd] {
color: #3b82f6;
font-size: 0.95rem;
margin: 0 0 1rem 0;
line-height: 1.4;
font-weight: 500;
}
.coach-stats[b-ddx3qfn5fd] {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
}
.stat[b-ddx3qfn5fd] {
background: rgba(59, 130, 246, 0.1);
color: #1e40af;
padding: 0.3rem 0.8rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.coach-history[b-ddx3qfn5fd] {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
min-height: 0;
scroll-behavior: smooth;
}
.coach-history[b-ddx3qfn5fd]::-webkit-scrollbar {
width: 8px;
}
.coach-history[b-ddx3qfn5fd]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.coach-history[b-ddx3qfn5fd]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.coach-history[b-ddx3qfn5fd]::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.message[b-ddx3qfn5fd] {
display: flex;
margin-bottom: var(--spacing-md);
animation: messageSlideIn-b-ddx3qfn5fd 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-message[b-ddx3qfn5fd] {
justify-content: flex-end;
}
.coach-message[b-ddx3qfn5fd] {
justify-content: flex-start;
}
.message-content[b-ddx3qfn5fd] {
background: white;
padding: var(--spacing-md) var(--spacing-lg);
border-radius: 18px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
position: relative;
border: 1px solid #e5e7eb;
}
.user-message .message-content[b-ddx3qfn5fd] {
max-width: 85%;
background: linear-gradient(135deg, #3b82f6, #1e40af);
color: white;
border-bottom-right-radius: 8px;
border: 1px solid #3b82f6;
}
.coach-message .message-content[b-ddx3qfn5fd] {
width: 100%;
max-width: 100%;
background: linear-gradient(145deg, #ffffff, #f8fafc);
color: #1e293b;
border-bottom-left-radius: 8px;
border: 2px solid #e2e8f0;
}
.message-text[b-ddx3qfn5fd] {
font-size: 0.95rem;
line-height: 1.6;
white-space: pre-wrap;
}
.message-time[b-ddx3qfn5fd] {
font-size: 0.75rem;
opacity: 0.7;
margin-top: 0.5rem;
text-align: right;
}
.coach-message .message-time[b-ddx3qfn5fd] {
text-align: left;
}
.feedback-score[b-ddx3qfn5fd] {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.8rem;
padding-top: 0.8rem;
border-top: 1px solid #e2e8f0;
}
.score[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
}
.score-label[b-ddx3qfn5fd] {
font-size: 0.75rem;
color: #6b7280;
font-weight: 600;
}
.coach-input-area[b-ddx3qfn5fd] {
background: white;
border-top: 2px solid #e2e8f0;
border-radius: 0 0 20px 20px;
position: relative;
padding: var(--spacing-lg);
}
.input-suggestions[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-bottom: 1px solid #fbbf24;
padding: var(--spacing-md) var(--spacing-lg);
border-radius: 0;
}
.input-suggestions strong[b-ddx3qfn5fd] {
color: #92400e;
font-size: 0.85rem;
display: block;
margin-bottom: 0.8rem;
}
.suggestion-btn[b-ddx3qfn5fd] {
background: white;
border: 1px solid #fbbf24;
color: #92400e;
padding: 0.4rem 0.8rem;
border-radius: 12px;
font-size: 0.8rem;
cursor: pointer;
margin: 0.2rem 0.4rem 0.2rem 0;
transition: all 0.2s ease;
font-weight: 500;
}
.suggestion-btn:hover[b-ddx3qfn5fd] {
background: #fbbf24;
color: white;
transform: translateY(-1px);
}
.coach-input-area .input-row[b-ddx3qfn5fd] {
display: flex;
gap: var(--spacing-md);
align-items: center;
}
.coach-input[b-ddx3qfn5fd] {
flex: 1;
padding: var(--spacing-md) var(--spacing-lg);
border: 2px solid #e2e8f0;
border-radius: 16px;
font-size: 0.95rem;
outline: none;
transition: all 0.3s ease;
min-height: var(--touch-target-min);
background: linear-gradient(145deg, #ffffff, #f8fafc);
}
.coach-input:focus[b-ddx3qfn5fd] {
border-color: #3b82f6;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
background: white;
}
.send-button[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #3b82f6, #1e40af);
color: white;
border: none;
padding: var(--spacing-md) var(--spacing-xl);
border-radius: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
min-width: var(--touch-target-min);
min-height: var(--touch-target-min);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.send-button:hover:not(:disabled)[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #1e40af, #1e3a8a);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}
.send-button:disabled[b-ddx3qfn5fd] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.loading-spinner[b-ddx3qfn5fd] {
animation: spin-b-ddx3qfn5fd 1s linear infinite;
}
/* Content Column (Right) */
.content-column[b-ddx3qfn5fd] {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
width: calc(30% - var(--spacing-2xl));
margin-left: auto;
}
/* Content Sections */
.library-content[b-ddx3qfn5fd] {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.business-scenario-section[b-ddx3qfn5fd],
.objectives-section[b-ddx3qfn5fd],
.challenges-section[b-ddx3qfn5fd],
.examples-section[b-ddx3qfn5fd],
.tips-section[b-ddx3qfn5fd] {
background: linear-gradient(145deg, #ffffff, #f8fafc);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
overflow-wrap: break-word;
word-wrap: break-word;
min-width: 0;
}
.business-scenario-section:hover[b-ddx3qfn5fd],
.objectives-section:hover[b-ddx3qfn5fd],
.challenges-section:hover[b-ddx3qfn5fd],
.examples-section:hover[b-ddx3qfn5fd],
.tips-section:hover[b-ddx3qfn5fd] {
border-color: #3b82f6;
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.1);
}
.library-content h2[b-ddx3qfn5fd] {
color: #1e293b;
font-size: 1.6rem;
margin: 0 0 1.5rem 0;
font-weight: 800;
display: flex;
align-items: center;
gap: 0.8rem;
}
/* Scenario Box */
.scenario-box[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border-left: 4px solid #3b82f6;
padding: 1.8rem;
border-radius: 0 12px 12px 0;
font-size: 1.1rem;
line-height: 1.7;
color: #1e40af;
margin-bottom: 1rem;
border: 1px solid #bfdbfe;
}
.context-highlight[b-ddx3qfn5fd] {
background: rgba(59, 130, 246, 0.05);
padding: 1rem;
border-radius: 12px;
border: 1px solid #bfdbfe;
}
.context-highlight strong[b-ddx3qfn5fd] {
color: #1e40af;
}
/* Objectives List */
.objectives-list[b-ddx3qfn5fd] {
margin: 0;
padding-left: 0;
list-style: none;
display: grid;
gap: 1rem;
}
.objectives-list li[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #ecfdf5, #d1fae5);
border-left: 4px solid #10b981;
padding: 1rem 1.5rem;
border-radius: 0 12px 12px 0;
position: relative;
font-size: 1rem;
color: #065f46;
border: 1px solid #bbf7d0;
transition: all 0.2s ease;
}
.objectives-list li:hover[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
transform: translateX(4px);
}
.objectives-list li[b-ddx3qfn5fd]::before {
content: '🎯';
margin-right: 0.8rem;
font-size: 1.1rem;
}
/* Challenges List */
.challenges-list[b-ddx3qfn5fd] {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.challenge-item[b-ddx3qfn5fd] {
display: flex;
align-items: flex-start;
gap: 1.2rem;
background: linear-gradient(135deg, #fefefe, #f8fafc);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 1.5rem;
transition: all 0.3s ease;
}
.challenge-item:hover[b-ddx3qfn5fd] {
border-color: #f59e0b;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15);
transform: translateY(-2px);
}
.challenge-number[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.1rem;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.challenge-text[b-ddx3qfn5fd] {
font-size: 1rem;
line-height: 1.6;
color: #374151;
font-weight: 500;
}
/* Examples Section */
.examples-list[b-ddx3qfn5fd] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.example-item[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #faf5ff, #f3e8ff);
border: 2px solid #e9d5ff;
border-radius: 16px;
padding: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.example-item:hover[b-ddx3qfn5fd] {
border-color: #8b5cf6;
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
transform: translateY(-3px);
}
.example-item[b-ddx3qfn5fd]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
transition: left 0.5s ease;
}
.example-item:hover[b-ddx3qfn5fd]::before {
left: 100%;
}
.example-text[b-ddx3qfn5fd] {
font-style: italic;
color: #581c87;
margin-bottom: 1rem;
font-size: 1rem;
line-height: 1.6;
position: relative;
z-index: 1;
}
.try-button[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s ease;
position: relative;
z-index: 1;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.try-button:hover[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #7c3aed, #6d28d9);
transform: translateY(-1px);
}
/* Tips Section */
.tips-list[b-ddx3qfn5fd] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tip-item[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-left: 4px solid #f59e0b;
padding: 1.2rem;
border-radius: 0 12px 12px 0;
font-size: 0.95rem;
color: #92400e;
border: 1px solid #fcd34d;
font-weight: 500;
}
/* Actions */
.library-actions[b-ddx3qfn5fd] {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid #e2e8f0;
}
.btn-primary[b-ddx3qfn5fd],
.btn-secondary[b-ddx3qfn5fd] {
padding: 1rem 2rem;
border: none;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.8rem;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-primary[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #3b82f6, #1e40af);
color: white;
}
.btn-primary:hover[b-ddx3qfn5fd] {
background: linear-gradient(135deg, #1e40af, #1e3a8a);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}
.btn-secondary[b-ddx3qfn5fd] {
background: linear-gradient(145deg, #f8fafc, #e2e8f0);
color: #374151;
border: 2px solid #cbd5e1;
}
.btn-secondary:hover[b-ddx3qfn5fd] {
background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
border-color: #9ca3af;
transform: translateY(-2px);
}
.loading[b-ddx3qfn5fd] {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
color: #6b7280;
font-size: 1.2rem;
}
/* Animations */
@keyframes messageSlideIn-b-ddx3qfn5fd {
from {
opacity: 0;
transform: translateY(15px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes spin-b-ddx3qfn5fd {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Responsive Design */
@media (max-width: 1024px) {
.library-main-layout[b-ddx3qfn5fd] {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.coach-column[b-ddx3qfn5fd] {
position: relative;
height: 500px;
min-height: 500px;
max-height: 600px;
order: 2;
top: auto;
width: 100%;
margin-left: 0;
}
.content-column[b-ddx3qfn5fd] {
order: 1;
margin-left: 0;
width: 100%;
}
}
@media (max-width: 768px) {
.library-detail-container[b-ddx3qfn5fd] {
padding: var(--gutter-tablet);
}
.library-header[b-ddx3qfn5fd] {
padding: var(--spacing-lg);
}
.library-header h1[b-ddx3qfn5fd] {
font-size: 2.2rem;
word-break: break-word;
}
.library-title-row[b-ddx3qfn5fd] {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.library-meta-inline[b-ddx3qfn5fd] {
flex-direction: column;
gap: 0.5rem;
}
.software-category-badge[b-ddx3qfn5fd] {
font-size: 0.8rem;
padding: 0.4rem 1rem;
word-break: break-word;
}
.coach-column[b-ddx3qfn5fd] {
position: relative;
height: 400px;
min-height: 400px;
max-height: 450px;
top: auto;
width: 100%;
margin-left: 0;
}
.coach-header[b-ddx3qfn5fd] {
padding: var(--spacing-md);
}
.coach-header h2[b-ddx3qfn5fd] {
font-size: 1.2rem;
}
.coach-header p[b-ddx3qfn5fd] {
font-size: 0.85rem;
}
.coach-stats[b-ddx3qfn5fd] {
gap: 0.5rem;
}
.stat[b-ddx3qfn5fd] {
font-size: 0.7rem;
padding: 0.25rem 0.6rem;
}
.coach-history[b-ddx3qfn5fd] {
padding: var(--spacing-md);
}
.coach-input-area .input-row[b-ddx3qfn5fd] {
flex-direction: column;
gap: var(--spacing-sm);
}
.send-button[b-ddx3qfn5fd] {
width: 100%;
}
.user-message .message-content[b-ddx3qfn5fd] {
max-width: 90%;
padding: var(--spacing-sm) var(--spacing-md);
}
.coach-message .message-content[b-ddx3qfn5fd] {
padding: var(--spacing-sm) var(--spacing-md);
}
/* Content sections mobile improvements */
.business-scenario-section[b-ddx3qfn5fd],
.objectives-section[b-ddx3qfn5fd],
.challenges-section[b-ddx3qfn5fd],
.examples-section[b-ddx3qfn5fd],
.tips-section[b-ddx3qfn5fd] {
padding: 1.5rem;
border-radius: 12px;
}
.library-content h2[b-ddx3qfn5fd] {
font-size: 1.4rem;
margin-bottom: 1rem;
word-break: break-word;
}
/* Scenario box mobile */
.scenario-box[b-ddx3qfn5fd] {
padding: 1.2rem;
font-size: 1rem;
border-radius: 8px;
}
.context-highlight[b-ddx3qfn5fd] {
padding: 0.8rem;
border-radius: 8px;
}
/* Objectives list mobile */
.objectives-list li[b-ddx3qfn5fd] {
padding: 0.8rem 1rem;
font-size: 0.9rem;
border-radius: 8px;
}
/* Challenges mobile */
.challenge-item[b-ddx3qfn5fd] {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
padding: 1rem;
}
.challenge-number[b-ddx3qfn5fd] {
width: 35px;
height: 35px;
font-size: 1rem;
}
.challenge-text[b-ddx3qfn5fd] {
font-size: 0.9rem;
}
/* Examples mobile */
.example-item[b-ddx3qfn5fd] {
padding: 1rem;
border-radius: 12px;
}
.example-text[b-ddx3qfn5fd] {
font-size: 0.9rem;
margin-bottom: 0.8rem;
}
.try-button[b-ddx3qfn5fd] {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
border-radius: 8px;
}
/* Tips mobile */
.tip-item[b-ddx3qfn5fd] {
padding: 1rem;
font-size: 0.85rem;
border-radius: 8px;
}
/* Actions mobile */
.library-actions[b-ddx3qfn5fd] {
flex-direction: column;
gap: var(--spacing-md);
margin-top: 1.5rem;
padding-top: 1.5rem;
}
.btn-primary[b-ddx3qfn5fd],
.btn-secondary[b-ddx3qfn5fd] {
width: 100%;
justify-content: center;
min-height: var(--touch-target-min);
padding: 1rem;
font-size: 0.9rem;
}
}
@media (max-width: 640px) {
.library-detail-container[b-ddx3qfn5fd] {
padding: var(--gutter-mobile);
}
.library-header[b-ddx3qfn5fd] {
padding: var(--spacing-md);
}
.library-header h1[b-ddx3qfn5fd] {
font-size: 1.8rem;
line-height: 1.2;
}
.library-description[b-ddx3qfn5fd] {
font-size: 1rem;
}
.library-meta-inline[b-ddx3qfn5fd] {
font-size: 0.8rem;
}
.software-category-badge[b-ddx3qfn5fd] {
font-size: 0.75rem;
padding: 0.3rem 0.8rem;
}
.coach-column[b-ddx3qfn5fd] {
position: relative;
height: 350px;
min-height: 350px;
max-height: 400px;
top: auto;
width: 100%;
margin-left: 0;
}
.coach-header h2[b-ddx3qfn5fd] {
font-size: 1.1rem;
}
.coach-header p[b-ddx3qfn5fd] {
font-size: 0.8rem;
}
.coach-input[b-ddx3qfn5fd] {
font-size: 16px; /* Prevent zoom on iOS */
}
.library-content h2[b-ddx3qfn5fd] {
font-size: 1.3rem;
margin-bottom: 0.8rem;
}
/* Mobile content sections - ultra compact */
.business-scenario-section[b-ddx3qfn5fd],
.objectives-section[b-ddx3qfn5fd],
.challenges-section[b-ddx3qfn5fd],
.examples-section[b-ddx3qfn5fd],
.tips-section[b-ddx3qfn5fd] {
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.scenario-box[b-ddx3qfn5fd] {
padding: 1rem;
font-size: 0.9rem;
}
.context-highlight[b-ddx3qfn5fd] {
padding: 0.6rem;
font-size: 0.85rem;
}
.objectives-list[b-ddx3qfn5fd] {
gap: 0.8rem;
}
.objectives-list li[b-ddx3qfn5fd] {
padding: 0.6rem 0.8rem;
font-size: 0.85rem;
}
.challenge-item[b-ddx3qfn5fd] {
padding: 0.8rem;
gap: 0.8rem;
}
.challenge-number[b-ddx3qfn5fd] {
width: 30px;
height: 30px;
font-size: 0.9rem;
}
.challenge-text[b-ddx3qfn5fd] {
font-size: 0.85rem;
line-height: 1.4;
}
.example-item[b-ddx3qfn5fd] {
padding: 0.8rem;
}
.example-text[b-ddx3qfn5fd] {
font-size: 0.85rem;
margin-bottom: 0.6rem;
line-height: 1.4;
}
.try-button[b-ddx3qfn5fd] {
padding: 0.3rem 0.6rem;
font-size: 0.75rem;
}
.tip-item[b-ddx3qfn5fd] {
padding: 0.8rem;
font-size: 0.8rem;
line-height: 1.4;
}
.library-actions[b-ddx3qfn5fd] {
margin-top: 1rem;
padding-top: 1rem;
gap: 0.8rem;
}
.btn-primary[b-ddx3qfn5fd],
.btn-secondary[b-ddx3qfn5fd] {
padding: 0.8rem;
font-size: 0.85rem;
border-radius: 8px;
}
/* Improve readability on small screens */
.message-text[b-ddx3qfn5fd] {
font-size: 0.9rem;
line-height: 1.5;
}
.feedback-score[b-ddx3qfn5fd] {
margin-top: 0.6rem;
padding-top: 0.6rem;
}
.score[b-ddx3qfn5fd] {
font-size: 0.75rem;
padding: 0.25rem 0.6rem;
}
.score-label[b-ddx3qfn5fd] {
font-size: 0.7rem;
}
}
/* _content/Logikbug.Frontend/Pages/Login.razor.rz.scp.css */
.login-container[b-dif4ivi3c8] {
max-width: 360px;
margin: 10vh auto;
padding: 2rem;
background-color: #f9f9f9;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-align: center;
}
.login-logo[b-dif4ivi3c8] {
width: 80px;
margin-bottom: 1rem;
}
.login-form[b-dif4ivi3c8] {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.login-form input[b-dif4ivi3c8] {
padding: 0.6rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
}
.login-form button[b-dif4ivi3c8] {
padding: 0.6rem;
background-color: #4CAF50;
color: white;
font-size: 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.login-form button:hover[b-dif4ivi3c8] {
background-color: #388e3c;
}
.error-msg[b-dif4ivi3c8] {
color: #c0392b;
font-size: 0.9rem;
margin-top: 0.5rem;
}
/* _content/Logikbug.Frontend/Pages/ParentDashboard/Dashboard.razor.rz.scp.css */
.parent-dashboard-container[b-faphocunq0] {
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 2rem 1rem;
min-height: 100vh;
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 50%, #ecfdf5 100%);
}
.dashboard-header[b-faphocunq0] {
background: linear-gradient(135deg, #065f46 0%, #047857 50%, #059669 100%);
color: white;
text-align: center;
padding: 3rem 2rem;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(5, 150, 105, 0.15);
margin-bottom: 3rem;
}
.dashboard-header h1[b-faphocunq0] {
color: white;
margin-bottom: 1rem;
font-size: 2.75rem;
font-weight: 800;
letter-spacing: -0.025em;
}
.dashboard-header p[b-faphocunq0] {
color: rgba(255, 255, 255, 0.95);
font-size: 1.25rem;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.loading-container[b-faphocunq0] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
gap: 1rem;
}
.spinner[b-faphocunq0] {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #22c55e;
border-radius: 50%;
animation: spin-b-faphocunq0 1s linear infinite;
}
@keyframes spin-b-faphocunq0 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Child Overview */
.child-overview[b-faphocunq0] {
margin-bottom: 3rem;
}
.child-card[b-faphocunq0] {
background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border: 2px solid #bbf7d0;
}
.child-header[b-faphocunq0] {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.child-avatar[b-faphocunq0] {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #22c55e, #16a34a);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.child-info h3[b-faphocunq0] {
margin: 0;
font-size: 1.5rem;
color: #065f46;
font-weight: 700;
}
.child-age[b-faphocunq0] {
margin: 0.25rem 0 0 0;
color: #666;
font-size: 0.9rem;
}
.stats-grid[b-faphocunq0] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-item[b-faphocunq0] {
text-align: center;
padding: 1.25rem 1rem;
background: linear-gradient(135deg, #ecfdf5 0%, #dcfce7 100%);
border-radius: 12px;
border: 1px solid #bbf7d0;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
transition: transform 0.2s ease;
}
.stat-item:hover[b-faphocunq0] {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(34, 197, 94, 0.15);
}
.stat-number[b-faphocunq0] {
font-size: 2rem;
font-weight: 800;
color: #059669;
margin-bottom: 0.25rem;
}
.stat-label[b-faphocunq0] {
font-size: 0.9rem;
color: #666;
}
.progress-section[b-faphocunq0] {
margin-top: 1.5rem;
}
.progress-section h4[b-faphocunq0] {
margin: 0 0 1rem 0;
color: #065f46;
font-size: 1.1rem;
font-weight: 700;
}
.progress-bar[b-faphocunq0] {
height: 12px;
background: #e9ecef;
border-radius: 6px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-fill[b-faphocunq0] {
height: 100%;
background: linear-gradient(90deg, #22c55e, #16a34a);
transition: width 0.5s ease;
border-radius: 6px;
}
.progress-text[b-faphocunq0] {
font-size: 0.9rem;
color: #059669;
font-weight: 600;
}
/* Main Content Grid */
.main-content-grid[b-faphocunq0] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.left-column[b-faphocunq0],
.right-column[b-faphocunq0] {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* Skills Analysis */
.skills-analysis[b-faphocunq0] {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
}
.skills-analysis h3[b-faphocunq0] {
color: #065f46;
margin-bottom: 1.5rem;
font-size: 1.4rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.category-grid[b-faphocunq0] {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.category-card[b-faphocunq0] {
background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1);
border: 1px solid #bbf7d0;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.category-card:hover[b-faphocunq0] {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(34, 197, 94, 0.15);
}
.category-header[b-faphocunq0] {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.category-icon[b-faphocunq0] {
font-size: 1.5rem;
}
.category-name[b-faphocunq0] {
font-weight: 600;
color: #333;
font-size: 1.1rem;
}
.category-progress[b-faphocunq0] {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.category-bar[b-faphocunq0] {
flex: 1;
height: 8px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
}
.category-fill[b-faphocunq0] {
height: 100%;
background: linear-gradient(90deg, #22c55e, #16a34a);
transition: width 0.3s ease;
border-radius: 4px;
}
.category-percent[b-faphocunq0] {
min-width: 45px;
text-align: right;
font-weight: 600;
color: #059669;
}
.category-details[b-faphocunq0] {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: #666;
}
.category-score[b-faphocunq0] {
font-weight: 500;
}
/* Recent Activity */
.recent-activity h3[b-faphocunq0] {
color: #065f46;
margin-bottom: 1.5rem;
font-size: 1.4rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.activity-timeline[b-faphocunq0] {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
}
.activity-item[b-faphocunq0] {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-bottom: 1px solid #f0f0f0;
}
.activity-item:last-child[b-faphocunq0] {
border-bottom: none;
}
.activity-status[b-faphocunq0] {
font-size: 1.2rem;
}
.activity-content[b-faphocunq0] {
flex: 1;
}
.activity-title[b-faphocunq0] {
font-weight: 500;
color: #333;
margin-bottom: 0.25rem;
}
.activity-meta[b-faphocunq0] {
display: flex;
gap: 1rem;
font-size: 0.85rem;
color: #666;
}
.activity-category[b-faphocunq0] {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #065f46;
padding: 0.25rem 0.6rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.8rem;
}
.activity-rating[b-faphocunq0] {
font-size: 0.9rem;
}
.no-activity[b-faphocunq0] {
text-align: center;
padding: 2rem;
color: #666;
}
.no-activity p[b-faphocunq0] {
margin: 0.5rem 0;
}
/* Learning Insights */
.learning-insights[b-faphocunq0] {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
}
.learning-insights h3[b-faphocunq0] {
color: #065f46;
margin-bottom: 1.5rem;
font-size: 1.4rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.insights-grid[b-faphocunq0] {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.insight-card[b-faphocunq0] {
background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
display: flex;
gap: 1rem;
border-left: 4px solid;
transition: transform 0.2s ease;
}
.insight-card:hover[b-faphocunq0] {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.insight-positive[b-faphocunq0] {
border-left-color: #22c55e;
}
.insight-neutral[b-faphocunq0] {
border-left-color: #f59e0b;
}
.insight-info[b-faphocunq0] {
border-left-color: #059669;
}
.insight-icon[b-faphocunq0] {
font-size: 1.8rem;
}
.insight-content h4[b-faphocunq0] {
margin: 0 0 0.5rem 0;
color: #333;
font-size: 1rem;
}
.insight-content p[b-faphocunq0] {
margin: 0;
color: #666;
font-size: 0.9rem;
line-height: 1.4;
}
/* Responsive Design */
@media (max-width: 1024px) {
.main-content-grid[b-faphocunq0] {
grid-template-columns: 1fr;
gap: 2rem;
}
.insights-grid[b-faphocunq0] {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
}
@media (max-width: 768px) {
.parent-dashboard-container[b-faphocunq0] {
padding: 1rem;
}
.dashboard-header h1[b-faphocunq0] {
font-size: 2rem;
}
.main-content-grid[b-faphocunq0] {
gap: 1.5rem;
}
.stats-grid[b-faphocunq0] {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.insights-grid[b-faphocunq0] {
grid-template-columns: 1fr;
gap: 1rem;
}
.activity-meta[b-faphocunq0] {
flex-direction: column;
gap: 0.5rem;
}
}
/* _content/Logikbug.Frontend/Pages/PromptLab/GridComponent.razor.rz.scp.css */
.grid[b-4kh42tf6ng] {
display: grid;
grid-template-columns: repeat(6, 40px); /* Match your column count */
gap: 4px;
margin-top: 10px;
}
.grid-tile[b-4kh42tf6ng] {
width: 40px;
height: 40px;
background-color: #eee;
border: 1px solid #ccc;
box-sizing: border-box;
}
.player-tile[b-4kh42tf6ng] {
background-color: deepskyblue;
}
.goal-tile[b-4kh42tf6ng] {
background-color: gold;
}
.wall-tile[b-4kh42tf6ng] {
background-color: #444;
}
/* _content/Logikbug.Frontend/Pages/PromptLab/PromptLabGrid.razor.rz.scp.css */
.prompt-lab-layout[b-sos23r7wow] {
display: flex;
flex-direction: row;
width: 100%;
min-height: 0; /* Allow flex shrinking */
flex: 1; /* Take remaining space in new layout */
padding: 2rem;
box-sizing: border-box;
gap: 2rem;
overflow: hidden; /* Prevent layout shifts */
}
.grid-area[b-sos23r7wow] {
flex: 2;
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
}
.grid[b-sos23r7wow] {
display: grid;
grid-template-columns: repeat(6, 60px);
grid-template-rows: repeat(6, 60px);
gap: 6px;
margin-bottom: 1rem;
}
.grid-tile[b-sos23r7wow] {
width: 60px;
height: 60px;
background-color: #e2e8f0;
border: 1px solid #ccc;
border-radius: 6px;
}
.goal-tile[b-sos23r7wow] {
background-color: #fcd34d;
}
.player-tile[b-sos23r7wow] {
background-color: #4ade80;
}
.prompt-panel[b-sos23r7wow] {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
max-width: 400px;
min-width: 350px;
background-color: #f9f9f9;
border-radius: 8px;
padding: 1rem;
min-height: 0; /* Allow flex shrinking */
box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
overflow: hidden; /* Contain all content */
}
.prompt-history[b-sos23r7wow] {
flex: 1;
min-height: 0; /* Critical: Allow flex child to shrink */
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
padding-right: 0.5rem; /* Space for scrollbar */
scrollbar-width: thin;
}
/* Custom scrollbar styling for webkit browsers */
.prompt-history[b-sos23r7wow]::-webkit-scrollbar {
width: 6px;
}
.prompt-history[b-sos23r7wow]::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.prompt-history[b-sos23r7wow]::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.prompt-history[b-sos23r7wow]::-webkit-scrollbar-thumb:hover {
background: #a1a1a1;
}
.prompt-entry[b-sos23r7wow] {
background-color: #ffffff;
padding: 0.75rem;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
font-size: 0.95rem;
line-height: 1.5;
}
.prompt-input-area[b-sos23r7wow] {
display: flex;
gap: var(--spacing-md);
flex-shrink: 0; /* Don't shrink the input area */
background-color: #f9f9f9;
padding-top: var(--spacing-md);
border-top: 1px solid #e5e7eb;
margin-top: var(--spacing-md);
}
.prompt-input[b-sos23r7wow] {
flex: 1;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
min-height: var(--touch-target-min);
}
.submit-button[b-sos23r7wow] {
background-color: #4caf50;
color: white;
border: none;
padding: 0.75rem 1rem;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
min-height: var(--touch-target-min);
min-width: var(--touch-target-min);
}
.submit-button:hover[b-sos23r7wow] {
background-color: #388e3c;
}
/* Hint block under grid */
.prompt-hint[b-sos23r7wow] {
margin-top: 1rem;
font-size: 0.95rem;
background-color: #f0fdf4;
padding: 1rem;
border-radius: 6px;
border: 1px solid #bbf7d0;
color: #065f46;
}
/* Fade-in animation */
.fade-in[b-sos23r7wow] {
animation: fadeIn-b-sos23r7wow 0.3s ease-in;
}
@keyframes fadeIn-b-sos23r7wow {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.next-button[b-sos23r7wow] {
margin-top: 1.5rem;
padding: 0.6rem 1.5rem;
background-color: #28c76f;
color: white;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.15s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.next-button:hover[b-sos23r7wow] {
background-color: #20a95b;
transform: translateY(-1px);
}
.puzzle-complete-banner[b-sos23r7wow] {
background: white;
border-radius: 16px;
padding: 2rem 3rem;
box-shadow: 0 4px 20px rgba(50, 205, 50, 0.2);
border: 2px solid rgba(50, 205, 50, 0.2);
color: #2d6a4f;
text-align: center;
animation: popIn-b-sos23r7wow 0.3s ease-out;
}
.puzzle-complete-banner h1[b-sos23r7wow] {
font-size: 2.2rem;
margin-bottom: 0.5rem;
}
.puzzle-complete-banner p[b-sos23r7wow] {
font-size: 1.1rem;
color: #444;
}
@keyframes popIn-b-sos23r7wow {
from {
transform: translateX(-50%) scale(0.9);
opacity: 0;
}
to {
transform: translateX(-50%) scale(1);
opacity: 1;
}
}
@keyframes subtleGlow-b-sos23r7wow {
0% {
box-shadow: 0 0 10px rgba(0, 200, 255, 0.2);
}
100% {
box-shadow: 0 0 30px rgba(0, 200, 255, 0.4);
}
}
/* Mobile-specific improvements */
@media (max-width: 640px) {
.prompt-lab-layout[b-sos23r7wow] {
flex-direction: column;
padding: var(--gutter-mobile);
gap: var(--spacing-xl);
}
.grid-area[b-sos23r7wow] {
flex: none;
order: 1;
}
.prompt-panel[b-sos23r7wow] {
flex: none;
order: 2;
max-width: none;
min-width: auto;
min-height: 300px;
}
.prompt-entry[b-sos23r7wow] {
padding: var(--spacing-lg);
margin-inline: var(--spacing-xs);
}
.prompt-input-area[b-sos23r7wow] {
padding-top: var(--spacing-lg);
margin-top: var(--spacing-lg);
gap: var(--spacing-md);
}
.prompt-input[b-sos23r7wow] {
padding: var(--spacing-lg);
font-size: 1rem;
}
.submit-button[b-sos23r7wow] {
padding: var(--spacing-lg) var(--spacing-xl);
font-size: 1rem;
}
.prompt-history[b-sos23r7wow] {
gap: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
}
/* _content/Logikbug.Frontend/Pages/Puzzles/GridPuzzle.razor.rz.scp.css */
/* Grid Puzzle Player Styles */
.grid-puzzle-container[b-4o696hrxsq] {
width: 100%;
margin: 0 auto;
padding: 1rem;
height: 100%;
}
.loading-container[b-4o696hrxsq] {
text-align: center;
padding: 3rem;
color: #666;
}
/* Header */
.puzzle-header[b-4o696hrxsq] {
display: flex;
align-items: center;
gap: 2rem;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 12px 12px 0 0;
border-bottom: 1px solid #e9ecef;
flex-shrink: 0;
}
.back-btn[b-4o696hrxsq] {
padding: 0.5rem 1rem;
background: #e5e7eb;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
.back-btn:hover[b-4o696hrxsq] {
background: #d1d5db;
}
.puzzle-info h1[b-4o696hrxsq] {
color: #116530;
margin: 0 0 0.5rem 0;
font-size: 1.8rem;
}
.puzzle-description[b-4o696hrxsq] {
color: #666;
margin: 0 0 1rem 0;
}
.puzzle-meta[b-4o696hrxsq] {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.puzzle-meta span[b-4o696hrxsq] {
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 500;
}
.category[b-4o696hrxsq] {
background: #dbeafe;
color: #1e40af;
}
.difficulty[b-4o696hrxsq] {
color: white;
}
.difficulty.beginner[b-4o696hrxsq] {
background: #22c55e;
}
.difficulty.intermediate[b-4o696hrxsq] {
background: #f59e0b;
}
.difficulty.advanced[b-4o696hrxsq] {
background: #f97316;
}
.difficulty.expert[b-4o696hrxsq] {
background: #ef4444;
}
.time[b-4o696hrxsq] {
background: #f3e8ff;
color: #7c3aed;
}
.points[b-4o696hrxsq] {
background: #fef3c7;
color: #92400e;
}
.completion-badge[b-4o696hrxsq] {
background: #22c55e;
color: white;
padding: 0.5rem 1rem;
border-radius: 8px;
font-weight: bold;
margin-left: auto;
}
/* Game Layout */
.game-layout[b-4o696hrxsq] {
display: grid;
grid-template-columns: 450px 1fr;
gap: 2rem;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* Game Area */
.game-area[b-4o696hrxsq] {
background: white;
border-radius: 12px;
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
height: 100%;
}
.grid-container[b-4o696hrxsq] {
flex: 1;
padding: 1.5rem;
display: flex;
flex-direction: column;
}
.grid-container h3[b-4o696hrxsq] {
color: #116530;
margin-bottom: 1rem;
text-align: center;
}
/* Game Grid */
.game-grid[b-4o696hrxsq] {
display: grid;
gap: 3px;
max-width: 600px;
margin: 0 auto 2rem auto;
background: #f3f4f6;
padding: 1.5rem;
border-radius: 8px;
}
.grid-cell[b-4o696hrxsq] {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 1.4rem;
position: relative;
transition: all 0.3s ease;
}
.cell-empty[b-4o696hrxsq] {
background: #f9fafb;
border: 1px solid #e5e7eb;
}
.cell-start[b-4o696hrxsq] {
background: #dcfce7;
border: 2px solid #22c55e;
}
.cell-goal[b-4o696hrxsq] {
background: #fef3c7;
border: 2px solid #f59e0b;
}
.cell-wall[b-4o696hrxsq] {
background: #374151;
border: 1px solid #1f2937;
}
.has-player[b-4o696hrxsq] {
background: #3b82f6 !important;
border: 2px solid #1d4ed8 !important;
animation: pulse-b-4o696hrxsq 2s infinite;
}
.player[b-4o696hrxsq] {
font-size: 1.5rem;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
@keyframes pulse-b-4o696hrxsq {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Prompt Hints */
.prompt-hints[b-4o696hrxsq] {
background: #f0fdf4;
padding: 1rem;
border-radius: 8px;
border: 1px solid #bbf7d0;
}
.prompt-hints h4[b-4o696hrxsq] {
color: #065f46;
margin: 0 0 0.75rem 0;
font-size: 1rem;
}
.hint-list[b-4o696hrxsq] {
margin-bottom: 1rem;
}
.hint-item[b-4o696hrxsq] {
color: #047857;
font-size: 0.9rem;
margin-bottom: 0.5rem;
padding-left: 1rem;
position: relative;
}
.hint-item[b-4o696hrxsq]::before {
content: "•";
position: absolute;
left: 0;
color: #10b981;
}
.reset-btn[b-4o696hrxsq] {
padding: 0.5rem 1rem;
background: #f59e0b;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: background 0.2s;
}
.reset-btn:hover:not(:disabled)[b-4o696hrxsq] {
background: #d97706;
}
.reset-btn:disabled[b-4o696hrxsq] {
opacity: 0.5;
cursor: not-allowed;
}
/* Prompt Panel */
.prompt-panel[b-4o696hrxsq] {
background: white;
border-radius: 12px;
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
height: 100%;
}
.panel-header[b-4o696hrxsq] {
padding: 1.5rem 1.5rem 0 1.5rem;
margin-bottom: 1rem;
}
.header-content[b-4o696hrxsq] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.panel-header h3[b-4o696hrxsq] {
color: #116530;
margin: 0;
}
.panel-header p[b-4o696hrxsq] {
color: #666;
margin: 0;
font-size: 0.9rem;
}
.tips-btn[b-4o696hrxsq] {
padding: 0.5rem 1rem;
background: #3b82f6;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: background 0.2s;
}
.tips-btn:hover[b-4o696hrxsq] {
background: #2563eb;
}
/* Conversation History */
.conversation-history[b-4o696hrxsq] {
flex: 1;
overflow-y: auto;
margin-bottom: 1rem;
padding: 0 1.5rem;
max-height: 400px;
scroll-behavior: smooth;
}
.message[b-4o696hrxsq] {
margin-bottom: 1rem;
padding: 0.75rem;
border-radius: 8px;
}
.user-message[b-4o696hrxsq] {
background: #eff6ff;
border-left: 3px solid #3b82f6;
}
.system-message[b-4o696hrxsq] {
background: #f0fdf4;
border-left: 3px solid #22c55e;
border-right: 3px solid #22c55e;
}
.message-header[b-4o696hrxsq] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.message-header strong[b-4o696hrxsq] {
color: #374151;
}
.timestamp[b-4o696hrxsq] {
color: #9ca3af;
font-size: 0.8rem;
}
.message-content[b-4o696hrxsq] {
color: #4b5563;
line-height: 1.4;
}
.prompt-score[b-4o696hrxsq] {
margin-top: 0.5rem;
padding: 0.5rem;
background: #f9fafb;
border-radius: 4px;
font-size: 0.85rem;
}
.improvement-tip[b-4o696hrxsq] {
color: #f59e0b;
font-weight: 500;
margin-left: 0.5rem;
}
/* Prompt Input */
.prompt-input-area[b-4o696hrxsq] {
border-top: 1px solid #e5e7eb;
padding: 1rem 1.5rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.prompt-input[b-4o696hrxsq] {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 6px;
resize: vertical;
min-height: 80px;
font-family: inherit;
}
.prompt-input:focus[b-4o696hrxsq] {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.submit-btn[b-4o696hrxsq] {
padding: 0.75rem 1.5rem;
background: #4CAF50;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: background 0.2s;
align-self: stretch;
}
.submit-btn:hover:not(:disabled)[b-4o696hrxsq] {
background: #45a049;
}
.submit-btn:disabled[b-4o696hrxsq] {
opacity: 0.5;
cursor: not-allowed;
}
.input-meta[b-4o696hrxsq] {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: #6b7280;
}
.tip[b-4o696hrxsq] {
color: #059669;
}
/* Streaming Text Animation */
.typing-cursor[b-4o696hrxsq] {
display: inline-block;
background-color: #22c55e;
margin-left: 2px;
animation: blink-b-4o696hrxsq 1s infinite;
}
@keyframes blink-b-4o696hrxsq {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
/* Tips Modal */
.modal-overlay[b-4o696hrxsq] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content[b-4o696hrxsq] {
background: white;
border-radius: 12px;
max-width: 500px;
width: 90%;
max-height: 80%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.modal-header[b-4o696hrxsq] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.modal-header h4[b-4o696hrxsq] {
color: #065f46;
margin: 0;
font-size: 1.1rem;
}
.close-btn[b-4o696hrxsq] {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #6b7280;
padding: 0.25rem;
border-radius: 4px;
transition: all 0.2s;
}
.close-btn:hover[b-4o696hrxsq] {
background: #f3f4f6;
color: #374151;
}
.modal-body[b-4o696hrxsq] {
padding: 1.5rem;
overflow-y: scroll;;
}
.tips-modal .hint-list[b-4o696hrxsq] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tips-modal .hint-item[b-4o696hrxsq] {
padding: 0.75rem;
background: #f0fdf4;
border-radius: 6px;
border-left: 3px solid #10b981;
border-right: 3px solid #10b981;
}
.tips-modal .hint-item strong[b-4o696hrxsq] {
color: #065f46;
display: block;
margin-bottom: 0.25rem;
}
/* Success Modal */
.success-modal[b-4o696hrxsq] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.success-content[b-4o696hrxsq] {
background: white;
padding: 2rem;
border-radius: 16px;
max-width: 500px;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.success-content h2[b-4o696hrxsq] {
color: #116530;
margin-bottom: 1rem;
}
.final-score[b-4o696hrxsq] {
margin: 1.5rem 0;
padding: 1rem;
background: #f0fdf4;
border-radius: 8px;
}
.final-score h3[b-4o696hrxsq] {
color: #047857;
margin: 0;
}
.success-actions[b-4o696hrxsq] {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.next-btn[b-4o696hrxsq], .retry-btn[b-4o696hrxsq] {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.next-btn[b-4o696hrxsq] {
background: #4CAF50;
color: white;
}
.next-btn:hover[b-4o696hrxsq] {
background: #45a049;
}
.retry-btn[b-4o696hrxsq] {
background: #f59e0b;
color: white;
}
.retry-btn:hover[b-4o696hrxsq] {
background: #d97706;
}
/* Responsive Design */
@media (max-width: 1024px) {
.game-layout[b-4o696hrxsq] {
grid-template-columns: 1fr;
height: auto;
}
.prompt-panel[b-4o696hrxsq] {
max-height: 400px;
}
}
@media (max-width: 768px) {
.grid-puzzle-container[b-4o696hrxsq] {
padding: 0.5rem;
}
.puzzle-header[b-4o696hrxsq] {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.game-grid[b-4o696hrxsq] {
max-width: 300px;
}
.grid-cell[b-4o696hrxsq] {
width: 30px;
height: 30px;
font-size: 1rem;
}
.input-container[b-4o696hrxsq] {
flex-direction: column;
}
.success-actions[b-4o696hrxsq] {
flex-direction: column;
}
}
/* _content/Logikbug.Frontend/Pages/Puzzles/Index.razor.rz.scp.css */
/* Enhanced Puzzles - Consistent with Labs */
.enhanced-puzzles-container[b-x4fer2ruxn] {
max-width: var(--content-max-width);
width: 100%;
margin: 0 auto;
padding: 2rem var(--gutter-desktop);
}
.page-header[b-x4fer2ruxn] {
background: linear-gradient(135deg, #065f46 0%, #047857 50%, #059669 100%);
color: white;
text-align: center;
padding: 3rem 2rem;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(5, 150, 105, 0.15);
margin-bottom: 2rem;
}
.page-header h1[b-x4fer2ruxn] {
color: white;
font-size: 2.75rem;
font-weight: 800;
margin-bottom: 1rem;
letter-spacing: -0.025em;
}
.page-header p[b-x4fer2ruxn] {
color: rgba(255, 255, 255, 0.95);
font-size: 1.25rem;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
/* Filter Section */
.filter-section[b-x4fer2ruxn] {
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
padding: 2rem;
border-radius: 16px;
margin-bottom: 2rem;
border: 1px solid #bbf7d0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.filter-categories[b-x4fer2ruxn] {
margin-bottom: 1.5rem;
}
.filter-categories h3[b-x4fer2ruxn] {
color: #065f46;
margin-bottom: 1.5rem;
font-size: 1.5rem;
font-weight: 800;
margin-top: 0;
text-align: center;
letter-spacing: -0.025em;
}
/* Controls Row */
.controls-row[b-x4fer2ruxn] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
flex-wrap: wrap;
}
/* View Toggle Section */
.view-toggle-section[b-x4fer2ruxn] {
display: flex;
align-items: center;
gap: 1rem;
}
/* Difficulty Filter Section */
.difficulty-filter-section[b-x4fer2ruxn] {
display: flex;
align-items: center;
gap: 1rem;
}
.filter-label[b-x4fer2ruxn] {
font-weight: 600;
color: #374151;
}
.difficulty-filter[b-x4fer2ruxn] {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.difficulty-btn[b-x4fer2ruxn] {
background: white;
border: 2px solid #d1d5db;
color: #374151;
padding: 0.5rem 1rem;
border-radius: 12px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.difficulty-btn:hover[b-x4fer2ruxn] {
background: #f9fafb;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.difficulty-btn.active[b-x4fer2ruxn] {
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
/* Default active style for "All" button */
.difficulty-btn.active:not(.beginner):not(.intermediate):not(.advanced):not(.expert)[b-x4fer2ruxn] {
background: linear-gradient(135deg, #22c55e, #16a34a);
border-color: #22c55e;
}
/* Difficulty-specific colors */
.difficulty-btn.beginner[b-x4fer2ruxn] {
border-color: #22c55e;
}
.difficulty-btn.beginner:hover[b-x4fer2ruxn] {
border-color: #16a34a;
}
.difficulty-btn.beginner.active[b-x4fer2ruxn] {
background: linear-gradient(135deg, #22c55e, #16a34a);
border-color: #22c55e;
}
.difficulty-btn.intermediate[b-x4fer2ruxn] {
border-color: #f59e0b;
}
.difficulty-btn.intermediate:hover[b-x4fer2ruxn] {
border-color: #d97706;
}
.difficulty-btn.intermediate.active[b-x4fer2ruxn] {
background: linear-gradient(135deg, #f59e0b, #d97706);
border-color: #f59e0b;
}
.difficulty-btn.advanced[b-x4fer2ruxn] {
border-color: #f97316;
}
.difficulty-btn.advanced:hover[b-x4fer2ruxn] {
border-color: #ea580c;
}
.difficulty-btn.advanced.active[b-x4fer2ruxn] {
background: linear-gradient(135deg, #f97316, #ea580c);
border-color: #f97316;
}
.difficulty-btn.expert[b-x4fer2ruxn] {
border-color: #ef4444;
}
.difficulty-btn.expert:hover[b-x4fer2ruxn] {
border-color: #dc2626;
}
.difficulty-btn.expert.active[b-x4fer2ruxn] {
background: linear-gradient(135deg, #ef4444, #dc2626);
border-color: #ef4444;
}
.toggle-label[b-x4fer2ruxn] {
font-weight: 600;
color: #374151;
}
.view-toggle[b-x4fer2ruxn] {
background: white;
border: 2px solid #d1d5db;
border-radius: 12px;
overflow: hidden;
display: flex;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.toggle-btn[b-x4fer2ruxn] {
background: transparent;
border: none;
padding: 0.625rem 1.25rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
color: #6b7280;
min-height: var(--touch-target-min);
justify-content: center;
}
.toggle-btn:hover[b-x4fer2ruxn] {
background: #f0fdf4;
color: #059669;
}
.toggle-btn.active[b-x4fer2ruxn] {
background: #22c55e;
color: white;
}
.toggle-icon[b-x4fer2ruxn] {
font-size: 1rem;
}
.filter-buttons[b-x4fer2ruxn] {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.filter-btn[b-x4fer2ruxn] {
background: white;
border: 2px solid #d1d5db;
color: #374151;
padding: 0.625rem 1.25rem;
border-radius: 12px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
min-height: var(--touch-target-min);
display: flex;
align-items: center;
justify-content: center;
}
.filter-btn:hover[b-x4fer2ruxn] {
background: #f9fafb;
border-color: #22c55e;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.filter-btn.active[b-x4fer2ruxn] {
background: #22c55e;
color: white;
border-color: #22c55e;
box-shadow: 0 4px 16px rgba(34, 197, 94, 0.25);
transform: translateY(-1px);
}
/* Puzzles Container */
.puzzles-container[b-x4fer2ruxn] {
background: #ffffff;
border-radius: 16px;
padding: 2rem;
min-height: 400px;
border: 1px solid #e5e7eb;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
/* Legacy Puzzles Grid (if still used) */
.puzzles-grid[b-x4fer2ruxn] {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 2rem;
}
.enhanced-puzzle-card[b-x4fer2ruxn] {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 3px solid transparent;
display: grid;
grid-template-columns: 2fr 1.5fr 1fr;
gap: 2rem;
align-items: stretch;
min-height: 180px;
width: 100%;
cursor: pointer;
}
.enhanced-puzzle-card:hover[b-x4fer2ruxn] {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* Difficulty border colors */
.enhanced-puzzle-card.difficulty-beginner[b-x4fer2ruxn] {
border-color: #22c55e;
}
.enhanced-puzzle-card.difficulty-intermediate[b-x4fer2ruxn] {
border-color: #f59e0b;
}
.enhanced-puzzle-card.difficulty-advanced[b-x4fer2ruxn] {
border-color: #f97316;
}
.enhanced-puzzle-card.difficulty-expert[b-x4fer2ruxn] {
border-color: #ef4444;
}
.puzzle-left[b-x4fer2ruxn] {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
min-height: 140px;
gap: 0.75rem;
}
.puzzle-middle[b-x4fer2ruxn] {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
gap: 1rem;
padding-left: 1rem;
}
.puzzle-right[b-x4fer2ruxn] {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
height: 100%;
min-height: 140px;
padding: 1rem;
}
.puzzle-title[b-x4fer2ruxn] {
color: #116530;
margin: 0 0 0.5rem 0;
font-size: 1.4rem;
font-weight: 600;
}
.puzzle-meta[b-x4fer2ruxn] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.puzzle-meta span[b-x4fer2ruxn] {
background: #f1f5f9;
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 500;
}
.category[b-x4fer2ruxn] {
background: #dbeafe !important;
color: #1e40af;
}
.difficulty[b-x4fer2ruxn] {
color: white;
}
.enhanced-puzzle-card.difficulty-beginner .difficulty[b-x4fer2ruxn] {
background: #22c55e !important;
}
.enhanced-puzzle-card.difficulty-intermediate .difficulty[b-x4fer2ruxn] {
background: #f59e0b !important;
}
.enhanced-puzzle-card.difficulty-advanced .difficulty[b-x4fer2ruxn] {
background: #f97316 !important;
}
.enhanced-puzzle-card.difficulty-expert .difficulty[b-x4fer2ruxn] {
background: #ef4444 !important;
}
.time[b-x4fer2ruxn] {
background: #f3e8ff !important;
color: #7c3aed;
}
.puzzle-description[b-x4fer2ruxn] {
color: #555;
line-height: 1.4;
font-size: 0.95rem;
margin: 0;
}
.learning-objectives[b-x4fer2ruxn] {
text-align: left;
}
.learning-objectives strong[b-x4fer2ruxn] {
color: #116530;
font-size: 0.9rem;
}
.learning-objectives ul[b-x4fer2ruxn] {
margin: 0.25rem 0 0 0;
padding: 0;
list-style: none;
}
.learning-objectives li[b-x4fer2ruxn] {
color: #666;
font-size: 0.85rem;
margin-bottom: 0.15rem;
}
.learning-objectives li[b-x4fer2ruxn]::before {
content: "• ";
color: #4CAF50;
}
/* Visual Indicators */
.puzzle-indicators[b-x4fer2ruxn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
width: 120px;
height: 120px;
justify-content: center;
}
.puzzle-type-icon[b-x4fer2ruxn] {
font-size: 2.5rem;
margin-bottom: 0.25rem;
}
.grid-info[b-x4fer2ruxn] {
text-align: center;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.grid-size[b-x4fer2ruxn] {
font-weight: 600;
color: #374151;
font-size: 0.9rem;
}
.complexity[b-x4fer2ruxn] {
font-size: 0.8rem;
color: #6b7280;
font-style: italic;
}
/* Action Buttons */
.puzzle-actions[b-x4fer2ruxn] {
margin-top: auto;
}
.play-btn[b-x4fer2ruxn] {
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
pointer-events: none;
font-size: 1.1rem;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.play-btn:hover[b-x4fer2ruxn] {
background: linear-gradient(135deg, #16a34a, #15803d);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3);
}
/* No Puzzles State */
.no-puzzles[b-x4fer2ruxn] {
grid-column: 1 / -1;
text-align: center;
padding: 3rem;
color: #666;
}
/* Responsive Design */
@media (max-width: 768px) {
.enhanced-puzzles-container[b-x4fer2ruxn] {
width: 100%;
padding: 1rem;
}
.enhanced-puzzle-card[b-x4fer2ruxn] {
grid-template-columns: 1fr;
gap: 1rem;
height: auto;
padding: 1rem;
}
.puzzle-middle[b-x4fer2ruxn] {
padding-left: 0;
padding-top: 1rem;
border-top: 1px solid #e9ecef;
}
.puzzle-right[b-x4fer2ruxn] {
padding-top: 1rem;
border-top: 1px solid #e9ecef;
}
.filter-buttons[b-x4fer2ruxn] {
flex-direction: column;
}
.puzzle-indicators[b-x4fer2ruxn] {
width: 100px;
height: 100px;
padding: 0.75rem;
}
.puzzle-type-icon[b-x4fer2ruxn] {
font-size: 2rem;
}
}
/* Progress Indicators */
.puzzle-header-with-progress[b-x4fer2ruxn] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.progress-indicator[b-x4fer2ruxn] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.completion-badge[b-x4fer2ruxn] {
background: #22c55e;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 500;
}
.in-progress-badge[b-x4fer2ruxn] {
background: #f59e0b;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 500;
}
.score-badge[b-x4fer2ruxn] {
background: #3b82f6;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 500;
}
.star-rating[b-x4fer2ruxn] {
font-size: 0.9rem;
margin-left: 0.25rem;
}
/* Compact Grid Layout */
.compact-grid[b-x4fer2ruxn] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}
/* Expanded Grid Layout - 3 Column (matches Labs) */
.expanded-grid[b-x4fer2ruxn] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 2rem;
margin-top: 1rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.enhanced-puzzles-container[b-x4fer2ruxn] {
padding: 1rem var(--gutter-tablet);
}
}
@media (max-width: 640px) {
.enhanced-puzzles-container[b-x4fer2ruxn] {
padding: 1rem var(--gutter-mobile);
}
.page-header[b-x4fer2ruxn] {
padding: 1.5rem;
}
.page-header h1[b-x4fer2ruxn] {
font-size: 2rem;
}
.page-header p[b-x4fer2ruxn] {
font-size: 1rem;
}
.filter-section[b-x4fer2ruxn] {
padding: 1rem;
}
.controls-row[b-x4fer2ruxn] {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.view-toggle-section[b-x4fer2ruxn] {
justify-content: flex-start;
}
.difficulty-filter-section[b-x4fer2ruxn] {
width: 100%;
}
.difficulty-filter[b-x4fer2ruxn] {
justify-content: center;
}
.expanded-grid[b-x4fer2ruxn],
.compact-grid[b-x4fer2ruxn] {
grid-template-columns: 1fr;
}
.puzzles-container[b-x4fer2ruxn] {
padding: 1rem;
}
}
@media (max-width: 480px) {
.filter-buttons[b-x4fer2ruxn] {
justify-content: center;
}
.filter-btn[b-x4fer2ruxn] {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
.toggle-btn[b-x4fer2ruxn] {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
}
/* _content/Logikbug.Frontend/Pages/Puzzles/LogikPuzzle.razor.rz.scp.css */
.logik-puzzle-container[b-5knr3tsqx0] {
width: 100%;
padding: 2rem;
min-height: 100vh;
background: #f8fffe;
}
/* Header */
.puzzle-header[b-5knr3tsqx0] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
padding: 1.5rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.puzzle-info h1[b-5knr3tsqx0] {
margin: 0 0 0.5rem 0;
color: #116530;
font-size: 1.8rem;
}
.puzzle-description[b-5knr3tsqx0] {
margin: 0 0 1rem 0;
color: #666;
font-size: 1.1rem;
}
.puzzle-meta[b-5knr3tsqx0] {
display: flex;
gap: 1rem;
}
.difficulty[b-5knr3tsqx0] {
padding: 0.3rem 0.8rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
}
.difficulty-beginner[b-5knr3tsqx0] {
background: #e8f5e8;
color: #116530;
}
.difficulty-intermediate[b-5knr3tsqx0] {
background: #fff3cd;
color: #856404;
}
.difficulty-advanced[b-5knr3tsqx0] {
background: #f8d7da;
color: #721c24;
}
.category[b-5knr3tsqx0] {
padding: 0.3rem 0.8rem;
background: #e3f2fd;
color: #1565c0;
border-radius: 6px;
font-size: 0.9rem;
}
.puzzle-stats[b-5knr3tsqx0] {
display: flex;
gap: 2rem;
}
.stat-item[b-5knr3tsqx0] {
text-align: center;
}
.stat-label[b-5knr3tsqx0] {
display: block;
font-size: 0.9rem;
color: #666;
margin-bottom: 0.25rem;
}
.stat-value[b-5knr3tsqx0] {
display: block;
font-size: 1.4rem;
font-weight: bold;
color: #116530;
}
/* Main Layout */
.puzzle-layout[b-5knr3tsqx0] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* Logic Panel */
.logic-panel[b-5knr3tsqx0] {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.panel-header[b-5knr3tsqx0] {
margin-bottom: 1.5rem;
}
.panel-header h3[b-5knr3tsqx0] {
margin: 0 0 0.5rem 0;
color: #116530;
font-size: 1.3rem;
}
.panel-header p[b-5knr3tsqx0] {
margin: 0;
color: #666;
}
/* Logic Grid */
.logic-grid[b-5knr3tsqx0] {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 1.5rem;
}
.grid-row[b-5knr3tsqx0] {
display: flex;
}
.grid-cell[b-5knr3tsqx0] {
width: 60px;
height: 60px;
border: 2px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
background: white;
transition: all 0.2s ease;
}
.grid-cell:hover[b-5knr3tsqx0] {
border-color: #4CAF50;
transform: scale(1.05);
}
.grid-cell.clue-cell[b-5knr3tsqx0] {
background: #f0f8f0;
border-color: #4CAF50;
cursor: not-allowed;
}
.grid-cell.clue-cell:hover[b-5knr3tsqx0] {
transform: none;
}
.cell-symbol[b-5knr3tsqx0] {
font-size: 1.5rem;
}
.clue-marker[b-5knr3tsqx0] {
position: absolute;
top: 2px;
right: 2px;
font-size: 0.7rem;
}
.cell-empty[b-5knr3tsqx0] {
background: white;
}
.cell-red[b-5knr3tsqx0] {
background: #ffebee;
border-color: #f44336;
}
.cell-blue[b-5knr3tsqx0] {
background: #e3f2fd;
border-color: #2196f3;
}
.cell-green[b-5knr3tsqx0] {
background: #e8f5e8;
border-color: #4caf50;
}
.cell-yellow[b-5knr3tsqx0] {
background: #fffbf0;
border-color: #ff9800;
}
/* Puzzle Controls */
.puzzle-controls[b-5knr3tsqx0] {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 1rem;
}
.control-btn[b-5knr3tsqx0] {
padding: 0.8rem 1.5rem;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.reset-btn[b-5knr3tsqx0] {
background: #f44336;
color: white;
}
.reset-btn:hover:not(:disabled)[b-5knr3tsqx0] {
background: #d32f2f;
}
.check-btn[b-5knr3tsqx0] {
background: #4CAF50;
color: white;
}
.check-btn:hover:not(:disabled)[b-5knr3tsqx0] {
background: #388e3c;
}
.control-btn:disabled[b-5knr3tsqx0] {
opacity: 0.5;
cursor: not-allowed;
}
/* Completion Banner */
.completion-banner[b-5knr3tsqx0] {
text-align: center;
padding: 1rem;
background: linear-gradient(135deg, #4CAF50, #66BB6A);
color: white;
border-radius: 8px;
margin-top: 1rem;
}
.completion-banner h4[b-5knr3tsqx0] {
margin: 0 0 0.5rem 0;
}
.next-btn[b-5knr3tsqx0] {
margin-top: 1rem;
padding: 0.8rem 1.5rem;
background: white;
color: #4CAF50;
border: none;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
}
/* Hint Panel */
.hint-panel[b-5knr3tsqx0] {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
max-height: 100%;
}
/* Hint History */
.hint-history[b-5knr3tsqx0] {
flex: 1;
overflow-y: auto;
margin-bottom: 1rem;
padding-right: 0.5rem;
}
.hint-message[b-5knr3tsqx0] {
margin-bottom: 1rem;
padding: 1rem;
border-radius: 8px;
}
.user-hint[b-5knr3tsqx0] {
background: #e3f2fd;
border-left: 4px solid #2196f3;
}
.ai-hint[b-5knr3tsqx0] {
background: #f0f8f0;
border-left: 4px solid #4CAF50;
}
.hint-header[b-5knr3tsqx0] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.hint-header strong[b-5knr3tsqx0] {
color: #333;
}
.timestamp[b-5knr3tsqx0] {
color: #666;
font-size: 0.8rem;
}
.hint-content[b-5knr3tsqx0] {
color: #333;
line-height: 1.4;
}
/* Prompt Quality */
.prompt-quality[b-5knr3tsqx0] {
margin-top: 0.75rem;
padding: 0.5rem;
background: #f8f9fa;
border-radius: 4px;
font-size: 0.85rem;
}
.quality-label[b-5knr3tsqx0] {
color: #666;
margin-right: 0.5rem;
}
.quality-stars[b-5knr3tsqx0] {
display: inline-flex;
margin-right: 0.5rem;
}
.star[b-5knr3tsqx0] {
font-size: 0.8rem;
}
.star.filled[b-5knr3tsqx0] {
color: #ffc107;
}
.star.empty[b-5knr3tsqx0] {
color: #e0e0e0;
}
.improvement-tip[b-5knr3tsqx0] {
display: block;
margin-top: 0.25rem;
color: #ff5722;
font-style: italic;
}
/* Hint Input */
.hint-input-area[b-5knr3tsqx0] {
border-top: 1px solid #eee;
padding-top: 1rem;
}
.hint-textarea[b-5knr3tsqx0] {
width: 100%;
padding: 0.8rem;
border: 2px solid #ddd;
border-radius: 8px;
font-family: inherit;
font-size: 0.95rem;
resize: vertical;
min-height: 80px;
margin-bottom: 0.75rem;
}
.hint-textarea:focus[b-5knr3tsqx0] {
outline: none;
border-color: #4CAF50;
}
.hint-textarea:disabled[b-5knr3tsqx0] {
background: #f5f5f5;
cursor: not-allowed;
}
.hint-buttons[b-5knr3tsqx0] {
display: flex;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.hint-btn[b-5knr3tsqx0] {
flex: 1;
padding: 0.8rem 1.2rem;
background: #4CAF50;
color: white;
border: none;
border-radius: 6px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.hint-btn:hover:not(:disabled)[b-5knr3tsqx0] {
background: #388e3c;
}
.hint-btn:disabled[b-5knr3tsqx0] {
background: #ccc;
cursor: not-allowed;
}
.tips-btn[b-5knr3tsqx0] {
padding: 0.8rem 1.2rem;
background: #2196f3;
color: white;
border: none;
border-radius: 6px;
font-size: 0.95rem;
cursor: pointer;
}
.tips-btn:hover[b-5knr3tsqx0] {
background: #1976d2;
}
.hint-meta[b-5knr3tsqx0] {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: #666;
}
.hint-tip[b-5knr3tsqx0] {
font-style: italic;
}
/* Modal */
.modal-overlay[b-5knr3tsqx0] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content[b-5knr3tsqx0] {
background: white;
border-radius: 12px;
padding: 0;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.modal-header[b-5knr3tsqx0] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid #eee;
}
.modal-header h3[b-5knr3tsqx0] {
margin: 0;
color: #333;
}
.close-btn[b-5knr3tsqx0] {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: #666;
padding: 0.25rem;
}
.close-btn:hover[b-5knr3tsqx0] {
color: #333;
}
.modal-body[b-5knr3tsqx0] {
padding: 1.5rem;
}
.tip-section[b-5knr3tsqx0] {
margin-bottom: 1.5rem;
}
.tip-section h4[b-5knr3tsqx0] {
margin: 0 0 0.75rem 0;
color: #333;
}
.tip-section ul[b-5knr3tsqx0] {
margin: 0;
padding-left: 1.5rem;
}
.tip-section li[b-5knr3tsqx0] {
margin-bottom: 0.5rem;
line-height: 1.4;
}
/* Loading */
.loading-container[b-5knr3tsqx0] {
text-align: center;
padding: 3rem;
}
.back-btn[b-5knr3tsqx0] {
margin-top: 1rem;
padding: 0.8rem 1.5rem;
background: #4CAF50;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
/* Responsive Design */
@media (max-width: 1024px) {
.puzzle-layout[b-5knr3tsqx0] {
grid-template-columns: 1fr;
gap: 1.5rem;
height: auto;
}
.puzzle-stats[b-5knr3tsqx0] {
gap: 1rem;
}
}
@media (max-width: 768px) {
.logik-puzzle-container[b-5knr3tsqx0] {
padding: 1rem;
}
.puzzle-header[b-5knr3tsqx0] {
flex-direction: column;
gap: 1rem;
}
.puzzle-stats[b-5knr3tsqx0] {
justify-content: center;
}
.grid-cell[b-5knr3tsqx0] {
width: 50px;
height: 50px;
}
.cell-symbol[b-5knr3tsqx0] {
font-size: 1.2rem;
}
}
/* _content/Logikbug.Frontend/Pages/Puzzles/PatternPuzzle.razor.rz.scp.css */
.pattern-puzzle-container[b-5bet8dgl8q] {
width: 100%;
padding: 2rem;
min-height: 100vh;
background: #f8fffe;
}
/* Header */
.puzzle-header[b-5bet8dgl8q] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
padding: 1.5rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.puzzle-info h1[b-5bet8dgl8q] {
margin: 0 0 0.5rem 0;
color: #116530;
font-size: 1.8rem;
}
.puzzle-description[b-5bet8dgl8q] {
margin: 0 0 1rem 0;
color: #666;
font-size: 1.1rem;
}
.puzzle-meta[b-5bet8dgl8q] {
display: flex;
gap: 1rem;
}
.difficulty[b-5bet8dgl8q] {
padding: 0.3rem 0.8rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
}
.difficulty-beginner[b-5bet8dgl8q] {
background: #e8f5e8;
color: #116530;
}
.category[b-5bet8dgl8q] {
padding: 0.3rem 0.8rem;
background: #e3f2fd;
color: #1565c0;
border-radius: 6px;
font-size: 0.9rem;
}
.puzzle-stats[b-5bet8dgl8q] {
display: flex;
gap: 2rem;
}
.stat-item[b-5bet8dgl8q] {
text-align: center;
}
.stat-label[b-5bet8dgl8q] {
display: block;
font-size: 0.9rem;
color: #666;
margin-bottom: 0.25rem;
}
.stat-value[b-5bet8dgl8q] {
display: block;
font-size: 1.4rem;
font-weight: bold;
color: #116530;
}
/* Layout */
.puzzle-layout[b-5bet8dgl8q] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* Pattern Panel */
.pattern-panel[b-5bet8dgl8q] {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.panel-header[b-5bet8dgl8q] {
margin-bottom: 1.5rem;
}
.panel-header h3[b-5bet8dgl8q] {
margin: 0 0 0.5rem 0;
color: #116530;
font-size: 1.3rem;
}
.panel-header p[b-5bet8dgl8q] {
margin: 0;
color: #666;
}
/* Pattern Sequence */
.pattern-sequence[b-5bet8dgl8q] {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 2rem;
}
.sequence-label[b-5bet8dgl8q] {
font-weight: 600;
color: #333;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.pattern-items[b-5bet8dgl8q] {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 8px;
}
.pattern-item[b-5bet8dgl8q] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.pattern-item.highlight .pattern-shape[b-5bet8dgl8q] {
box-shadow: 0 0 15px rgba(17, 101, 48, 0.4);
transform: scale(1.1);
}
.pattern-shape[b-5bet8dgl8q] {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 1.8rem;
font-weight: bold;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.pattern-shape.missing-shape[b-5bet8dgl8q] {
background: #e9ecef;
border: 2px dashed #adb5bd;
color: #6c757d;
}
.question-mark[b-5bet8dgl8q] {
font-size: 2rem;
color: #6c757d;
}
.pattern-arrow[b-5bet8dgl8q] {
font-size: 1.5rem;
color: #666;
margin: 0 0.25rem;
}
/* Shape Styles */
.shape-circle[b-5bet8dgl8q] { border-radius: 50%; }
.shape-square[b-5bet8dgl8q] { border-radius: 4px; }
.shape-triangle[b-5bet8dgl8q] {
width: 0;
height: 0;
border-radius: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
display: flex;
align-items: flex-end;
justify-content: center;
}
.shape-diamond[b-5bet8dgl8q] { transform: rotate(45deg); border-radius: 4px; }
/* Color Styles */
.color-red[b-5bet8dgl8q] { background: #ff4444; color: white; }
.color-blue[b-5bet8dgl8q] { background: #4444ff; color: white; }
.color-green[b-5bet8dgl8q] { background: #44ff44; color: white; }
.color-yellow[b-5bet8dgl8q] { background: #ffff44; color: black; }
.color-purple[b-5bet8dgl8q] { background: #8844ff; color: white; }
.color-orange[b-5bet8dgl8q] { background: #ff8844; color: white; }
/* Triangle color override */
.shape-triangle.color-red[b-5bet8dgl8q] { border-bottom: 50px solid #ff4444; }
.shape-triangle.color-blue[b-5bet8dgl8q] { border-bottom: 50px solid #4444ff; }
.shape-triangle.color-green[b-5bet8dgl8q] { border-bottom: 50px solid #44ff44; }
.shape-triangle.color-yellow[b-5bet8dgl8q] { border-bottom: 50px solid #ffff44; }
.shape-triangle.color-purple[b-5bet8dgl8q] { border-bottom: 50px solid #8844ff; }
/* Size Styles */
.size-small[b-5bet8dgl8q] { width: 40px; height: 40px; font-size: 1.2rem; }
.size-medium[b-5bet8dgl8q] { width: 60px; height: 60px; font-size: 1.8rem; }
.size-large[b-5bet8dgl8q] { width: 80px; height: 80px; font-size: 2.4rem; }
/* Answer Section */
.answer-section[b-5bet8dgl8q] {
border-top: 1px solid #eee;
padding-top: 1.5rem;
}
.section-label[b-5bet8dgl8q] {
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
.answer-options[b-5bet8dgl8q] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.answer-option[b-5bet8dgl8q] {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
border: 2px solid #ddd;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
background: white;
}
.answer-option:hover[b-5bet8dgl8q] {
border-color: #4CAF50;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.answer-option.selected[b-5bet8dgl8q] {
border-color: #4CAF50;
background: #f0f8f0;
}
.answer-option.correct[b-5bet8dgl8q] {
border-color: #4CAF50;
background: #e8f5e8;
}
.answer-option.incorrect[b-5bet8dgl8q] {
border-color: #f44336;
background: #ffebee;
}
.option-letter[b-5bet8dgl8q] {
font-weight: bold;
color: #333;
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.option-shape[b-5bet8dgl8q] {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
/* Controls */
.pattern-controls[b-5bet8dgl8q] {
display: flex;
gap: 1rem;
justify-content: center;
}
.check-btn[b-5bet8dgl8q], .next-btn[b-5bet8dgl8q] {
padding: 0.8rem 1.5rem;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.check-btn[b-5bet8dgl8q] {
background: #4CAF50;
color: white;
}
.check-btn:hover:not(:disabled)[b-5bet8dgl8q] {
background: #388e3c;
}
.next-btn[b-5bet8dgl8q] {
background: #2196f3;
color: white;
}
.next-btn:hover[b-5bet8dgl8q] {
background: #1976d2;
}
.check-btn:disabled[b-5bet8dgl8q] {
background: #ccc;
cursor: not-allowed;
}
/* Result Banner */
.result-banner[b-5bet8dgl8q] {
margin-top: 1.5rem;
padding: 1.5rem;
border-radius: 8px;
text-align: center;
}
.result-banner.success[b-5bet8dgl8q] {
background: linear-gradient(135deg, #4CAF50, #66BB6A);
color: white;
}
.result-banner.try-again[b-5bet8dgl8q] {
background: linear-gradient(135deg, #ff9800, #ffb74d);
color: white;
}
.result-banner h4[b-5bet8dgl8q] {
margin: 0 0 0.5rem 0;
}
.result-banner p[b-5bet8dgl8q] {
margin: 0.25rem 0;
}
/* Analysis Panel */
.analysis-panel[b-5bet8dgl8q] {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.analysis-history[b-5bet8dgl8q] {
flex: 1;
overflow-y: auto;
margin-bottom: 1rem;
padding-right: 0.5rem;
max-height: 400px;
}
.analysis-message[b-5bet8dgl8q] {
margin-bottom: 1rem;
padding: 1rem;
border-radius: 8px;
}
.user-analysis[b-5bet8dgl8q] {
background: #e3f2fd;
border-left: 4px solid #2196f3;
}
.ai-analysis[b-5bet8dgl8q] {
background: #f0f8f0;
border-left: 4px solid #4CAF50;
}
.analysis-header[b-5bet8dgl8q] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.analysis-header strong[b-5bet8dgl8q] {
color: #333;
}
.timestamp[b-5bet8dgl8q] {
color: #666;
font-size: 0.8rem;
}
.analysis-content[b-5bet8dgl8q] {
color: #333;
line-height: 1.4;
}
/* Analysis Quality */
.analysis-quality[b-5bet8dgl8q] {
margin-top: 0.75rem;
padding: 0.5rem;
background: #f8f9fa;
border-radius: 4px;
font-size: 0.85rem;
}
.quality-label[b-5bet8dgl8q] {
color: #666;
margin-right: 0.5rem;
}
.quality-stars[b-5bet8dgl8q] {
display: inline-flex;
margin-right: 0.5rem;
}
.star[b-5bet8dgl8q] {
font-size: 0.8rem;
}
.star.filled[b-5bet8dgl8q] {
color: #ffc107;
}
.star.empty[b-5bet8dgl8q] {
color: #e0e0e0;
}
.improvement-tip[b-5bet8dgl8q] {
display: block;
margin-top: 0.25rem;
color: #ff5722;
font-style: italic;
}
/* Analysis Input */
.analysis-input-area[b-5bet8dgl8q] {
border-top: 1px solid #eee;
padding-top: 1rem;
}
.analysis-textarea[b-5bet8dgl8q] {
width: 100%;
padding: 0.8rem;
border: 2px solid #ddd;
border-radius: 8px;
font-family: inherit;
font-size: 0.95rem;
resize: vertical;
min-height: 80px;
margin-bottom: 0.75rem;
}
.analysis-textarea:focus[b-5bet8dgl8q] {
outline: none;
border-color: #4CAF50;
}
.analysis-buttons[b-5bet8dgl8q] {
display: flex;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.analysis-btn[b-5bet8dgl8q] {
flex: 1;
padding: 0.8rem 1.2rem;
background: #4CAF50;
color: white;
border: none;
border-radius: 6px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.analysis-btn:hover:not(:disabled)[b-5bet8dgl8q] {
background: #388e3c;
}
.analysis-btn:disabled[b-5bet8dgl8q] {
background: #ccc;
cursor: not-allowed;
}
.tips-btn[b-5bet8dgl8q] {
padding: 0.8rem 1.2rem;
background: #2196f3;
color: white;
border: none;
border-radius: 6px;
font-size: 0.95rem;
cursor: pointer;
}
.tips-btn:hover[b-5bet8dgl8q] {
background: #1976d2;
}
.analysis-meta[b-5bet8dgl8q] {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: #666;
}
.analysis-tip[b-5bet8dgl8q] {
font-style: italic;
}
/* Modal */
.modal-overlay[b-5bet8dgl8q] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content[b-5bet8dgl8q] {
background: white;
border-radius: 12px;
padding: 0;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.modal-header[b-5bet8dgl8q] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid #eee;
}
.modal-header h3[b-5bet8dgl8q] {
margin: 0;
color: #333;
}
.close-btn[b-5bet8dgl8q] {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: #666;
padding: 0.25rem;
}
.modal-body[b-5bet8dgl8q] {
padding: 1.5rem;
}
.tip-section[b-5bet8dgl8q] {
margin-bottom: 1.5rem;
}
.tip-section h4[b-5bet8dgl8q] {
margin: 0 0 0.75rem 0;
color: #333;
}
.tip-section ul[b-5bet8dgl8q] {
margin: 0;
padding-left: 1.5rem;
}
.tip-section li[b-5bet8dgl8q] {
margin-bottom: 0.5rem;
line-height: 1.4;
}
/* Loading */
.loading-container[b-5bet8dgl8q] {
text-align: center;
padding: 3rem;
}
.back-btn[b-5bet8dgl8q] {
margin-top: 1rem;
padding: 0.8rem 1.5rem;
background: #4CAF50;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
/* Responsive Design */
@media (max-width: 1024px) {
.puzzle-layout[b-5bet8dgl8q] {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.puzzle-stats[b-5bet8dgl8q] {
gap: 1rem;
}
}
@media (max-width: 768px) {
.pattern-puzzle-container[b-5bet8dgl8q] {
padding: 1rem;
}
.puzzle-header[b-5bet8dgl8q] {
flex-direction: column;
gap: 1rem;
}
.puzzle-stats[b-5bet8dgl8q] {
justify-content: center;
}
.pattern-items[b-5bet8dgl8q] {
flex-wrap: wrap;
gap: 0.5rem;
}
.pattern-shape[b-5bet8dgl8q] {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.answer-options[b-5bet8dgl8q] {
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
}
/* _content/Logikbug.Frontend/Pages/RoleSelection.razor.rz.scp.css */
.role-selection-container[b-c6pqrx3kzj] {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.role-selection-header[b-c6pqrx3kzj] {
margin-bottom: 3rem;
}
.role-logo[b-c6pqrx3kzj] {
height: 60px;
margin-bottom: 1rem;
}
.role-selection-header h1[b-c6pqrx3kzj] {
color: #2c3e50;
margin-bottom: 0.5rem;
font-size: 2.5rem;
}
.subtitle[b-c6pqrx3kzj] {
color: #6c757d;
font-size: 1.2rem;
margin-bottom: 0;
}
.role-cards[b-c6pqrx3kzj] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.role-card[b-c6pqrx3kzj] {
background: white;
border: 2px solid #e9ecef;
border-radius: 16px;
padding: 2rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.role-card:hover[b-c6pqrx3kzj] {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.role-student[b-c6pqrx3kzj] {
border-color: #28a745;
}
.role-student:hover[b-c6pqrx3kzj] {
border-color: #218838;
background: #f8fff9;
}
.role-parent[b-c6pqrx3kzj] {
border-color: #007bff;
}
.role-parent:hover[b-c6pqrx3kzj] {
border-color: #0056b3;
background: #f8f9ff;
}
.role-teacher[b-c6pqrx3kzj] {
border-color: #ffc107;
}
.role-teacher:hover[b-c6pqrx3kzj] {
border-color: #d39e00;
background: #fffdf8;
}
.role-business[b-c6pqrx3kzj] {
border-color: #6c757d;
}
.role-business:hover[b-c6pqrx3kzj] {
border-color: #495057;
background: #f8f9fa;
}
.role-icon[b-c6pqrx3kzj] {
font-size: 3rem;
margin-bottom: 1rem;
}
.role-card h3[b-c6pqrx3kzj] {
color: #2c3e50;
margin-bottom: 0.5rem;
font-size: 1.5rem;
}
.role-card > p[b-c6pqrx3kzj] {
color: #6c757d;
margin-bottom: 1.5rem;
line-height: 1.4;
}
.role-features[b-c6pqrx3kzj] {
text-align: left;
margin-bottom: 2rem;
}
.feature-item[b-c6pqrx3kzj] {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
.feature-icon[b-c6pqrx3kzj] {
color: #28a745;
font-weight: bold;
margin-right: 0.5rem;
font-size: 1.1rem;
}
.select-role-btn[b-c6pqrx3kzj] {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
width: 100%;
}
.select-role-btn:hover[b-c6pqrx3kzj] {
background: linear-gradient(135deg, #218838, #1ba085);
transform: translateY(-1px);
}
.pilot-info[b-c6pqrx3kzj] {
background: #e3f2fd;
border: 1px solid #bbdefb;
border-radius: 8px;
padding: 1rem;
margin-top: 2rem;
}
.pilot-note[b-c6pqrx3kzj] {
margin: 0;
color: #1565c0;
font-size: 0.9rem;
line-height: 1.4;
}
@media (max-width: 768px) {
.role-cards[b-c6pqrx3kzj] {
grid-template-columns: 1fr;
}
.role-selection-header h1[b-c6pqrx3kzj] {
font-size: 2rem;
}
}
/* _content/Logikbug.Frontend/Pages/TeacherDashboard/TeacherDashboard.razor.rz.scp.css */
.teacher-dashboard-container[b-u4x5474vsn] {
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 2rem 1rem;
min-height: 100vh;
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 50%, #ecfdf5 100%);
}
.dashboard-header[b-u4x5474vsn] {
background: linear-gradient(135deg, #065f46 0%, #047857 50%, #059669 100%);
color: white;
text-align: center;
padding: 3rem 2rem;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(5, 150, 105, 0.15);
margin-bottom: 3rem;
}
.dashboard-header h1[b-u4x5474vsn] {
color: white;
margin-bottom: 1rem;
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.025em;
}
.dashboard-header p[b-u4x5474vsn] {
color: rgba(255, 255, 255, 0.95);
font-size: 1.25rem;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.overview-grid[b-u4x5474vsn] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 3rem;
}
.stat-card[b-u4x5474vsn] {
background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border: 2px solid #bbf7d0;
display: flex;
align-items: center;
gap: 1.5rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover[b-u4x5474vsn] {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(34, 197, 94, 0.15);
}
.stat-icon[b-u4x5474vsn] {
font-size: 2.5rem;
background: linear-gradient(135deg, #22c55e, #16a34a);
border-radius: 12px;
padding: 0.75rem;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.stat-content h3[b-u4x5474vsn] {
font-size: 2rem;
font-weight: 800;
margin: 0;
color: #059669;
}
.stat-content p[b-u4x5474vsn] {
margin: 0;
color: #666;
font-size: 0.9rem;
}
.charts-section[b-u4x5474vsn] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.chart-container[b-u4x5474vsn] {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
}
.chart-container h3[b-u4x5474vsn] {
margin-bottom: 1.5rem;
color: #065f46;
font-size: 1.4rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.category-bars[b-u4x5474vsn], .difficulty-chart[b-u4x5474vsn] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.category-bar-item[b-u4x5474vsn] {
display: flex;
align-items: center;
gap: 1rem;
}
.category-info[b-u4x5474vsn] {
min-width: 120px;
display: flex;
flex-direction: column;
}
.category-name[b-u4x5474vsn] {
font-weight: 500;
color: #333;
}
.category-stats[b-u4x5474vsn] {
font-size: 0.8rem;
color: #666;
}
.progress-bar[b-u4x5474vsn] {
flex: 1;
height: 8px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
}
.progress-fill[b-u4x5474vsn] {
height: 100%;
background: linear-gradient(90deg, #22c55e, #16a34a);
transition: width 0.3s ease;
border-radius: 4px;
}
.percentage[b-u4x5474vsn] {
min-width: 40px;
text-align: right;
font-weight: 600;
color: #059669;
}
.bottom-section[b-u4x5474vsn] {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3rem;
}
.recent-activity[b-u4x5474vsn], .puzzle-usage[b-u4x5474vsn] {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
}
.recent-activity h3[b-u4x5474vsn], .puzzle-usage h3[b-u4x5474vsn] {
margin-bottom: 1.5rem;
color: #065f46;
font-size: 1.4rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.activity-list[b-u4x5474vsn] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.activity-item[b-u4x5474vsn] {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: linear-gradient(145deg, #f8f9fa 0%, #f0fdf4 100%);
border-radius: 12px;
border: 1px solid #e5e7eb;
transition: transform 0.2s ease;
}
.activity-item:hover[b-u4x5474vsn] {
transform: translateX(4px);
border-color: #bbf7d0;
}
.activity-content[b-u4x5474vsn] {
flex: 1;
}
.activity-main[b-u4x5474vsn] {
display: flex;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.activity-meta[b-u4x5474vsn] {
display: flex;
gap: 1rem;
font-size: 0.8rem;
color: #666;
}
.student-name[b-u4x5474vsn] {
font-weight: 600;
color: #059669;
}
.puzzle-name[b-u4x5474vsn] {
font-weight: 500;
color: #374151;
}
.activity-action[b-u4x5474vsn] {
color: #6b7280;
}
/* Difficulty badges */
.difficulty-badge[b-u4x5474vsn] {
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.difficulty-beginner[b-u4x5474vsn] {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #065f46;
}
.difficulty-intermediate[b-u4x5474vsn] {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
}
.difficulty-advanced[b-u4x5474vsn] {
background: linear-gradient(135deg, #fed7aa, #fdba74);
color: #c2410c;
}
.difficulty-expert[b-u4x5474vsn] {
background: linear-gradient(135deg, #fecaca, #fca5a5);
color: #dc2626;
}
/* Puzzle usage styling */
.puzzle-list[b-u4x5474vsn] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.puzzle-usage-item[b-u4x5474vsn] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: linear-gradient(145deg, #f9fafb 0%, #f0fdf4 100%);
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.puzzle-info[b-u4x5474vsn] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.puzzle-title[b-u4x5474vsn] {
font-weight: 600;
color: #374151;
}
.puzzle-category[b-u4x5474vsn] {
font-size: 0.8rem;
color: #6b7280;
background: #f3f4f6;
padding: 0.15rem 0.5rem;
border-radius: 4px;
width: fit-content;
}
.attempt-count[b-u4x5474vsn] {
font-weight: 600;
color: #059669;
background: #dcfce7;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.85rem;
}
.loading-container[b-u4x5474vsn] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
}
.spinner[b-u4x5474vsn] {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #22c55e;
border-radius: 50%;
animation: spin-b-u4x5474vsn 1s linear infinite;
}
@keyframes spin-b-u4x5474vsn {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 1200px) {
.overview-grid[b-u4x5474vsn] {
grid-template-columns: repeat(2, 1fr);
}
.bottom-section[b-u4x5474vsn] {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 768px) {
.teacher-dashboard-container[b-u4x5474vsn] {
padding: 1rem;
overflow-x: hidden;
}
.overview-grid[b-u4x5474vsn] {
grid-template-columns: 1fr;
gap: 1rem;
}
.charts-section[b-u4x5474vsn] {
grid-template-columns: 1fr;
gap: 1rem;
}
.bottom-section[b-u4x5474vsn] {
grid-template-columns: 1fr;
gap: 1rem;
}
/* Fix activity items overflow */
.activity-item[b-u4x5474vsn] {
flex-wrap: wrap;
gap: 0.5rem;
}
.activity-content[b-u4x5474vsn] {
min-width: 0; /* Allow shrinking */
flex: 1;
}
.activity-main[b-u4x5474vsn] {
flex-wrap: wrap;
gap: 0.25rem;
}
.activity-meta[b-u4x5474vsn] {
flex-wrap: wrap;
gap: 0.5rem;
}
.student-name[b-u4x5474vsn], .puzzle-name[b-u4x5474vsn], .activity-action[b-u4x5474vsn] {
word-break: break-word;
min-width: 0;
}
/* Fix puzzle usage items overflow */
.puzzle-usage-item[b-u4x5474vsn] {
flex-wrap: wrap;
gap: 0.5rem;
}
.puzzle-info[b-u4x5474vsn] {
min-width: 0;
flex: 1;
}
.puzzle-title[b-u4x5474vsn] {
word-break: break-word;
line-height: 1.3;
}
.puzzle-category[b-u4x5474vsn] {
word-break: break-word;
}
/* Fix category bar items overflow */
.category-bar-item[b-u4x5474vsn] {
flex-wrap: wrap;
gap: 0.5rem;
}
.category-info[b-u4x5474vsn] {
min-width: 0;
flex: 1;
}
.category-name[b-u4x5474vsn] {
word-break: break-word;
font-size: 0.9rem;
}
.progress-bar[b-u4x5474vsn] {
min-width: 100px;
flex: 1;
}
/* Ensure dashboard header text wraps */
.dashboard-header h1[b-u4x5474vsn] {
font-size: 2rem;
word-break: break-word;
}
.dashboard-header p[b-u4x5474vsn] {
word-break: break-word;
}
/* Ensure stat cards don't overflow */
.stat-card[b-u4x5474vsn] {
flex-wrap: wrap;
gap: 1rem;
text-align: center;
justify-content: center;
}
.stat-content h3[b-u4x5474vsn] {
font-size: 1.5rem;
word-break: break-word;
}
}
@media (max-width: 480px) {
.teacher-dashboard-container[b-u4x5474vsn] {
padding: 0.5rem;
}
.dashboard-header[b-u4x5474vsn] {
padding: 2rem 1rem;
}
.dashboard-header h1[b-u4x5474vsn] {
font-size: 1.75rem;
}
.dashboard-header p[b-u4x5474vsn] {
font-size: 1rem;
}
.stat-card[b-u4x5474vsn], .chart-container[b-u4x5474vsn], .recent-activity[b-u4x5474vsn], .puzzle-usage[b-u4x5474vsn] {
padding: 1rem;
}
.activity-item[b-u4x5474vsn], .puzzle-usage-item[b-u4x5474vsn] {
padding: 0.75rem;
}
/* Stack category bar items vertically on very small screens */
.category-bar-item[b-u4x5474vsn] {
flex-direction: column;
align-items: flex-start;
}
.progress-bar[b-u4x5474vsn] {
width: 100%;
min-width: unset;
}
.percentage[b-u4x5474vsn] {
align-self: flex-end;
margin-top: 0.25rem;
}
}
/* _content/Logikbug.Frontend/Shared/MainLayout.razor.rz.scp.css */
/* ========================================
MAIN LAYOUT STRUCTURE - FULL HEIGHT FLEX
======================================== */
/* Root app layout - full height, flex column */
.app-layout[b-nwzwim7zhb] {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
/* ========================================
HEADER - STICKY TOP NAVIGATION
======================================== */
.app-header[b-nwzwim7zhb] {
position: sticky;
top: 0;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
z-index: 1000; /* High z-index to stay above content */
flex-shrink: 0; /* Don't shrink */
}
.header-content[b-nwzwim7zhb] {
max-width: var(--content-max-width-wide);
margin: 0 auto;
padding: 0.75rem var(--gutter-desktop);
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
box-sizing: border-box;
}
.header-left[b-nwzwim7zhb] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo-image[b-nwzwim7zhb] {
height: 52px;
width: 52px;
flex-shrink: 0;
}
.logo-text[b-nwzwim7zhb] {
display: flex;
flex-direction: column;
min-width: 120px;
white-space: nowrap;
}
.logo-title[b-nwzwim7zhb] {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.025em;
color: #111827;
line-height: 1.2;
margin: 0;
}
.logo-subtitle[b-nwzwim7zhb] {
font-size: 0.875rem;
color: #6b7280;
line-height: 1.2;
margin: 0;
}
/* Mobile menu button - hidden by default */
.mobile-menu-btn[b-nwzwim7zhb] {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: var(--touch-target-min);
height: var(--touch-target-min);
background: none;
border: none;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.mobile-menu-btn:hover[b-nwzwim7zhb] {
background: #f3f4f6;
}
.hamburger-icon[b-nwzwim7zhb] {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 24px;
height: 18px;
position: relative;
}
.hamburger-icon span[b-nwzwim7zhb] {
display: block;
width: 24px;
height: 2px;
background: #374151;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: absolute;
}
.hamburger-icon span:nth-child(1)[b-nwzwim7zhb] {
top: 0;
}
.hamburger-icon span:nth-child(2)[b-nwzwim7zhb] {
top: 8px;
}
.hamburger-icon span:nth-child(3)[b-nwzwim7zhb] {
top: 16px;
}
/* Hamburger animation when open */
.hamburger-icon.open span:nth-child(1)[b-nwzwim7zhb] {
transform: rotate(45deg);
top: 8px;
}
.hamburger-icon.open span:nth-child(2)[b-nwzwim7zhb] {
opacity: 0;
}
.hamburger-icon.open span:nth-child(3)[b-nwzwim7zhb] {
transform: rotate(-45deg);
top: 8px;
}
/* Desktop navigation */
.desktop-nav[b-nwzwim7zhb] {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Mobile navigation - hidden by default */
.mobile-nav[b-nwzwim7zhb] {
position: fixed;
top: 80px;
left: 0;
right: 0;
background: white;
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 999;
}
.mobile-nav.open[b-nwzwim7zhb] {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.mobile-nav-content[b-nwzwim7zhb] {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 1400px;
margin: 0 auto;
}
.mobile-nav-link[b-nwzwim7zhb] {
padding: 0.75rem 1rem;
color: #374151;
text-decoration: none;
font-weight: 500;
font-size: 1rem;
border-radius: 8px;
transition: all 0.2s ease;
display: block;
min-height: var(--touch-target-min);
display: flex;
align-items: center;
}
.mobile-nav-link:hover[b-nwzwim7zhb] {
color: #059669;
background: #f0fdf4;
text-decoration: none;
}
.mobile-user-role[b-nwzwim7zhb] {
background: #e0f2fe;
color: #0277bd;
padding: 0.75rem 1rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
border: 1px solid #b3e5fc;
margin-bottom: 0.5rem;
text-align: center;
}
.nav-link[b-nwzwim7zhb] {
padding: 0.5rem 0.75rem;
color: #374151;
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
border-radius: 6px;
transition: all 0.2s ease;
white-space: nowrap;
min-height: var(--touch-target-min);
display: flex;
align-items: center;
}
.nav-link:hover[b-nwzwim7zhb] {
color: #059669;
background: #f0fdf4;
text-decoration: none;
}
.user-role[b-nwzwim7zhb] {
background: #e0f2fe;
color: #0277bd;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
border: 1px solid #b3e5fc;
white-space: nowrap;
}
/* ========================================
MAIN CONTENT AREA - FLEXIBLE BODY
======================================== */
.app-main[b-nwzwim7zhb] {
flex: 1; /* Takes all remaining space */
display: flex;
flex-direction: column;
width: 100%;
min-height: 0; /* Allow flex child to shrink */
position: relative;
z-index: 1; /* Below header, above footer issues */
}
/* ========================================
RESPONSIVE DESIGN
======================================== */
@media (max-width: 768px) {
.header-content[b-nwzwim7zhb] {
padding: 0.75rem var(--gutter-tablet);
min-height: 70px;
}
/* Show mobile menu button, hide desktop nav */
.mobile-menu-btn[b-nwzwim7zhb] {
display: flex;
}
.desktop-nav[b-nwzwim7zhb] {
display: none;
}
.logo-title[b-nwzwim7zhb] {
font-size: 1.25rem;
}
.logo-subtitle[b-nwzwim7zhb] {
font-size: 0.8rem;
}
/* Adjust mobile nav position for smaller header */
.mobile-nav[b-nwzwim7zhb] {
top: 70px;
}
}
@media (max-width: 640px) {
.header-content[b-nwzwim7zhb] {
padding: 0.5rem var(--gutter-mobile);
}
.logo-title[b-nwzwim7zhb] {
font-size: 1.1rem;
}
.logo-subtitle[b-nwzwim7zhb] {
font-size: 0.75rem;
}
.mobile-nav[b-nwzwim7zhb] {
top: 60px;
}
.mobile-nav-content[b-nwzwim7zhb] {
padding: 0.75rem;
}
}
/* ========================================
UTILITY STYLES FOR SPECIFIC COMPONENTS
======================================== */
/* Loading states */
.loading-redirect[b-nwzwim7zhb] {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
padding: 2rem;
color: #6b7280;
}
/* Unauthorized access */
.unauthorized-container[b-nwzwim7zhb] {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: 2rem;
}
.unauthorized-content[b-nwzwim7zhb] {
text-align: center;
background: #f9fafb;
padding: 3rem;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 400px;
}
.unauthorized-content h2[b-nwzwim7zhb] {
color: #111827;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.unauthorized-content p[b-nwzwim7zhb] {
color: #6b7280;
margin-bottom: 2rem;
}
.login-btn[b-nwzwim7zhb] {
background: #059669;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.2s;
text-decoration: none;
display: inline-block;
font-weight: 500;
}
.login-btn:hover[b-nwzwim7zhb] {
background: #047857;
color: white;
text-decoration: none;
}
/* _content/Logikbug.Frontend/Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-6fli8s0ke2] {
background-color: rgba(255, 255, 255, 0.1);
}
.top-row[b-6fli8s0ke2] {
height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand[b-6fli8s0ke2] {
font-size: 1.1rem;
}
.oi[b-6fli8s0ke2] {
width: 2rem;
font-size: 1.1rem;
vertical-align: text-top;
top: -2px;
}
.nav-item[b-6fli8s0ke2] {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type[b-6fli8s0ke2] {
padding-top: 1rem;
}
.nav-item:last-of-type[b-6fli8s0ke2] {
padding-bottom: 1rem;
}
.nav-item[b-6fli8s0ke2] a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.nav-item[b-6fli8s0ke2] a.active {
background-color: rgba(255,255,255,0.25);
color: white;
}
.nav-item[b-6fli8s0ke2] a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
@media (min-width: 641px) {
.navbar-toggler[b-6fli8s0ke2] {
display: none;
}
.collapse[b-6fli8s0ke2] {
/* Never collapse the sidebar for wide screens */
display: block;
}
.nav-scrollable[b-6fli8s0ke2] {
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}