Upload style.css

style.css

@@ -654,511 +654,465 @@ select.form-control {
     format('woff2');
 }
 
-/* Header */
+/* Додаткові стилі для навчального дашборду */
+
+.app-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Заголовок */
 .header {
-  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
   color: var(--color-btn-primary-text);
-  padding: var(--space-24) 0;
-  margin-bottom: var(--space-32);
+  padding: var(--space-20) 0;
+  box-shadow: var(--shadow-md);
 }
 
-.header__title {
+.header h1 {
+  margin: 0;
   font-size: var(--font-size-3xl);
+  text-align: center;
   font-weight: var(--font-weight-bold);
-  margin-bottom: var(--space-8);
 }
 
-.header__subtitle {
-  font-size: var(--font-size-lg);
-  opacity: 0.9;
-  margin: 0;
+/* Основний контент */
+.main-content {
+  flex: 1;
+  padding: var(--space-24) var(--space-16);
 }
 
-/* Main Layout */
-.main {
-  min-height: calc(100vh - 200px);
+.workflow-container {
+  gap: var(--space-32);
+  align-items: flex-start;
 }
 
-.container {
-  display: grid;
-  grid-template-columns: 280px 1fr 1fr;
-  gap: var(--space-32);
-  align-items: start;
+/* Бічна панель */
+.sidebar {
+  width: 280px;
+  flex-shrink: 0;
 }
 
-/* Filters Sidebar */
-.filters {
-  background: var(--color-surface);
-  border: 1px solid var(--color-card-border);
-  border-radius: var(--radius-lg);
-  padding: var(--space-24);
+.sidebar-content {
   position: sticky;
   top: var(--space-24);
-  box-shadow: var(--shadow-sm);
 }
 
-.filters__section {
-  margin-bottom: var(--space-24);
-}
-
-.filters__section:last-child {
-  margin-bottom: 0;
-}
-
-.filters__title {
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  margin-bottom: var(--space-12);
-  color: var(--color-text);
-}
-
-.filters .form-control {
+.sidebar h3 {
   margin-bottom: var(--space-16);
+  color: var(--color-text);
+  font-size: var(--font-size-lg);
+  border-bottom: 2px solid var(--color-primary);
+  padding-bottom: var(--space-8);
 }
 
-.progress-summary {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-8);
-}
-
-.progress-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-8);
-  background: var(--color-secondary);
-  border-radius: var(--radius-sm);
-}
-
-.progress-label {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-}
-
-.progress-value {
-  font-weight: var(--font-weight-bold);
-  color: var(--color-primary);
-}
-
-/* Timeline */
-.timeline-container {
-  position: relative;
-}
-
-.timeline {
-  position: relative;
-  padding: var(--space-24) 0;
-}
-
-.timeline__line {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-border) 60%, var(--color-border) 100%);
-  border-radius: var(--radius-full);
-  transform: translateX(-50%);
+.steps-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--space-24) 0;
 }
 
-.timeline__stages {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-24);
+.steps-list li {
+  margin-bottom: var(--space-8);
 }
 
-.timeline-stage {
-  position: relative;
+.step-link {
   display: flex;
   align-items: center;
-  cursor: pointer;
+  padding: var(--space-12);
+  text-decoration: none;
+  color: var(--color-text);
+  border-radius: var(--radius-base);
   transition: all var(--duration-normal) var(--ease-standard);
+  border: 1px solid transparent;
+  gap: var(--space-12);
 }
 
-.timeline-stage:hover {
-  transform: translateY(-2px);
-}
-
-.timeline-stage--left {
-  justify-content: flex-end;
-  padding-right: calc(50% + var(--space-32));
+.step-link:hover {
+  background: var(--color-secondary);
+  border-color: var(--color-border);
 }
 
-.timeline-stage--right {
-  justify-content: flex-start;
-  padding-left: calc(50% + var(--space-32));
+.step-link.active {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+  border-color: var(--color-primary);
 }
 
-.timeline-stage__node {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
+.step-number {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--font-size-2xl);
-  border: 4px solid var(--color-surface);
-  box-shadow: var(--shadow-md);
-  transition: all var(--duration-normal) var(--ease-standard);
-  z-index: 2;
-}
-
-.timeline-stage--completed .timeline-stage__node {
-  background: var(--color-success);
-  color: white;
-}
-
-.timeline-stage--in-progress .timeline-stage__node {
-  background: var(--color-warning);
-  color: white;
-  animation: pulse 2s infinite;
-}
-
-.timeline-stage--pending .timeline-stage__node {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
   background: var(--color-secondary);
-  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  flex-shrink: 0;
 }
 
-.timeline-stage--active .timeline-stage__node {
-  transform: translate(-50%, -50%) scale(1.1);
-  box-shadow: var(--shadow-lg), var(--focus-ring);
+.step-link.active .step-number {
+  background: var(--color-btn-primary-text);
+  color: var(--color-primary);
 }
 
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
+.step-link.visited .step-number {
+  background: var(--color-success);
+  color: var(--color-btn-primary-text);
 }
 
-.timeline-stage__card {
+/* Прогрес */
+.progress-container {
   background: var(--color-surface);
-  border: 1px solid var(--color-card-border);
+  padding: var(--space-16);
   border-radius: var(--radius-lg);
-  padding: var(--space-20);
-  max-width: 300px;
-  box-shadow: var(--shadow-sm);
-  transition: all var(--duration-normal) var(--ease-standard);
+  border: 1px solid var(--color-border);
 }
 
-.timeline-stage:hover .timeline-stage__card {
-  box-shadow: var(--shadow-md);
-  border-color: var(--color-primary);
+.progress-container h4 {
+  margin-bottom: var(--space-12);
+  font-size: var(--font-size-md);
 }
 
-.timeline-stage__title {
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: var(--color-secondary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
   margin-bottom: var(--space-8);
-  color: var(--color-text);
 }
 
-.timeline-stage__description {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  margin: 0;
-}
-
-.timeline-stage__status {
-  display: inline-block;
-  margin-top: var(--space-8);
-  padding: var(--space-4) var(--space-8);
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
   border-radius: var(--radius-full);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.status--completed {
-  background: rgba(var(--color-success-rgb), 0.15);
-  color: var(--color-success);
-  border: 1px solid rgba(var(--color-success-rgb), 0.25);
-}
-
-.status--in-progress {
-  background: rgba(var(--color-warning-rgb), 0.15);
-  color: var(--color-warning);
-  border: 1px solid rgba(var(--color-warning-rgb), 0.25);
+  transition: width var(--duration-normal) var(--ease-standard);
+  width: 0%;
 }
 
-.status--pending {
-  background: rgba(var(--color-info-rgb), 0.15);
-  color: var(--color-info);
-  border: 1px solid rgba(var(--color-info-rgb), 0.25);
+#progressText {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-12);
 }
 
-/* Content Area */
-.content-area {
-  background: var(--color-surface);
-  border: 1px solid var(--color-card-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-  min-height: 600px;
+/* Основна панель */
+.main-panel {
+  flex: 1;
+  min-width: 0;
 }
 
-.stage-detail {
-  padding: var(--space-32);
+/* Вступ */
+.introduction {
+  margin-bottom: var(--space-32);
 }
 
-.welcome-message h2 {
-  color: var(--color-text);
+.introduction h2 {
   margin-bottom: var(--space-16);
+  color: var(--color-primary);
 }
 
-.welcome-message p {
-  color: var(--color-text-secondary);
+/* Візуалізація робочого процесу */
+.workflow-visualization {
   margin-bottom: var(--space-32);
 }
 
-.overview-stats {
+.workflow-diagram {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-16);
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-20);
+  padding: var(--space-24);
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
 }
 
-.stat-card {
+.workflow-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
   padding: var(--space-20);
-  background: var(--color-secondary);
+  background: var(--color-background);
   border-radius: var(--radius-md);
-  border: 1px solid var(--color-card-border);
+  border: 2px solid var(--color-border);
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  position: relative;
 }
 
-.stat-card h3 {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-8);
-  font-weight: var(--font-weight-medium);
+.workflow-step:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--color-primary);
 }
 
-.stat-value {
-  font-size: var(--font-size-3xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-primary);
+.workflow-step.active {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+  border-color: var(--color-primary);
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
 }
 
-/* Stage Detail Content */
-.stage-content {
-  animation: fadeIn 0.3s ease-in-out;
+.workflow-step.visited {
+  border-color: var(--color-success);
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+.workflow-step.visited::after {
+  content: "✓";
+  position: absolute;
+  top: var(--space-8);
+  right: var(--space-8);
+  background: var(--color-success);
+  color: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs);
+  font-weight: bold;
 }
 
-.stage-header {
+.step-icon {
+  width: 48px;
+  height: 48px;
+  background: var(--color-secondary);
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  gap: var(--space-16);
-  margin-bottom: var(--space-24);
-  padding-bottom: var(--space-16);
-  border-bottom: 1px solid var(--color-border);
+  justify-content: center;
+  margin-bottom: var(--space-12);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
 }
 
-.stage-icon {
-  font-size: var(--font-size-4xl);
+.workflow-step.active .step-icon {
+  background: var(--color-btn-primary-text);
+  color: var(--color-primary);
 }
 
-.stage-title {
-  font-size: var(--font-size-3xl);
+.workflow-step h3 {
   margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
 }
 
-.stage-description {
-  color: var(--color-text-secondary);
-  margin: var(--space-8) 0 0 0;
+/* Деталі етапу */
+.step-details {
+  display: none;
+}
+
+.step-details.active {
+  display: block;
+}
+
+.step-navigation {
+  display: flex;
+  gap: var(--space-12);
 }
 
-.stage-sections {
+.step-content {
   display: grid;
   gap: var(--space-24);
 }
 
-.stage-section {
+.step-description {
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-normal);
+}
+
+.step-key-points, .step-tips {
   background: var(--color-background);
   padding: var(--space-20);
   border-radius: var(--radius-md);
-  border: 1px solid var(--color-card-border-inner);
+  border-left: 4px solid var(--color-primary);
 }
 
-.stage-section h4 {
-  margin-bottom: var(--space-12);
-  color: var(--color-text);
-  font-size: var(--font-size-lg);
+.step-key-points h3, .step-tips h3 {
+  margin-top: 0;
+  margin-bottom: var(--space-16);
+  color: var(--color-primary);
 }
 
-.key-points {
-  list-style: none;
-  padding: 0;
+.step-key-points ul, .step-tips ul {
   margin: 0;
+  padding-left: var(--space-20);
 }
 
-.key-points li {
-  padding: var(--space-8) 0;
-  padding-left: var(--space-20);
-  position: relative;
+.step-key-points li, .step-tips li {
+  margin-bottom: var(--space-8);
+  line-height: var(--line-height-normal);
 }
 
-.key-points li:before {
-  content: "✓";
-  position: absolute;
-  left: 0;
-  color: var(--color-success);
-  font-weight: var(--font-weight-bold);
+.example-box {
+  background: var(--color-secondary);
+  padding: var(--space-20);
+  border-radius: var(--radius-md);
+  border-left: 4px solid var(--color-warning);
+  font-style: italic;
+  line-height: var(--line-height-normal);
 }
 
-.compliance-badges {
-  display: flex;
-  gap: var(--space-8);
-  flex-wrap: wrap;
+.step-example h3 {
+  margin-bottom: var(--space-16);
+  color: var(--color-warning);
 }
 
-.compliance-badge {
-  padding: var(--space-6) var(--space-12);
-  border-radius: var(--radius-full);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+/* Вікторина */
+.step-quiz {
+  background: var(--color-surface);
+  padding: var(--space-24);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
 }
 
-.compliance-badge--active {
-  background: var(--color-success);
-  color: var(--color-btn-primary-text);
+.step-quiz h3 {
+  margin-top: 0;
+  margin-bottom: var(--space-20);
+  color: var(--color-primary);
 }
 
-.compliance-badge--inactive {
-  background: var(--color-secondary);
-  color: var(--color-text-secondary);
+.quiz-question {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--space-16);
 }
 
-.metrics-grid {
+.quiz-options {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--space-16);
+  gap: var(--space-8);
+  margin-bottom: var(--space-16);
 }
 
-.metric-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.quiz-option {
   padding: var(--space-12);
-  background: var(--color-surface);
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-card-border-inner);
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-standard);
 }
 
-.metric-label {
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text);
+.quiz-option:hover {
+  background: var(--color-secondary);
+  border-color: var(--color-primary);
 }
 
-.metric-value {
-  font-weight: var(--font-weight-bold);
-  color: var(--color-primary);
+.quiz-option.selected {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+  border-color: var(--color-primary);
 }
 
-.chart-container {
-  height: 300px;
-  margin-top: var(--space-16);
+.quiz-option.correct {
+  background: var(--color-success);
+  color: var(--color-btn-primary-text);
+  border-color: var(--color-success);
 }
 
-.model-selector {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--space-12);
-  margin-bottom: var(--space-20);
+.quiz-option.incorrect {
+  background: var(--color-error);
+  color: var(--color-btn-primary-text);
+  border-color: var(--color-error);
 }
 
-.model-option {
-  padding: var(--space-16);
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all var(--duration-normal) var(--ease-standard);
-  text-align: center;
+.quiz-result {
+  padding: var(--space-12);
+  border-radius: var(--radius-base);
+  margin-bottom: var(--space-16);
+  display: none;
 }
 
-.model-option:hover {
-  border-color: var(--color-primary);
-  background: var(--color-secondary);
+.quiz-result.show {
+  display: block;
 }
 
-.model-option--selected {
-  border-color: var(--color-primary);
+.quiz-result.correct {
   background: rgba(var(--color-success-rgb), 0.1);
+  border: 1px solid var(--color-success);
+  color: var(--color-success);
 }
 
-.alert {
-  padding: var(--space-16);
-  border-radius: var(--radius-md);
-  margin: var(--space-12) 0;
-  border-left: 4px solid;
-}
-
-.alert--warning {
-  background: rgba(var(--color-warning-rgb), 0.1);
-  border-left-color: var(--color-warning);
-  color: var(--color-warning);
+.quiz-result.incorrect {
+  background: rgba(var(--color-error-rgb), 0.1);
+  border: 1px solid var(--color-error);
+  color: var(--color-error);
 }
 
-.alert--success {
-  background: rgba(var(--color-success-rgb), 0.1);
-  border-left-color: var(--color-success);
-  color: var(--color-success);
+/* Футер */
+.footer {
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+  padding: var(--space-20) 0;
+  margin-top: var(--space-32);
 }
 
-.alert--info {
-  background: rgba(var(--color-info-rgb), 0.1);
-  border-left-color: var(--color-info);
-  color: var(--color-info);
+.footer p {
+  margin: 0;
+  text-align: center;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
 }
 
-/* Responsive Design */
-@media (max-width: 1024px) {
-  .container {
-    grid-template-columns: 1fr;
+/* Responsive design */
+@media (max-width: 768px) {
+  .workflow-container {
+    flex-direction: column;
     gap: var(--space-24);
   }
   
-  .filters {
-    position: static;
-    order: -1;
+  .sidebar {
+    width: 100%;
+    order: 2;
   }
   
-  .timeline-container {
+  .main-panel {
     order: 1;
   }
   
-  .content-area {
-    order: 2;
+  .workflow-diagram {
+    grid-template-columns: 1fr;
+    gap: var(--space-16);
+    padding: var(--space-16);
   }
   
-  .overview-stats {
-    grid-template-columns: 1fr;
+  .step-navigation {
+    flex-direction: column;
+  }
+  
+  .step-navigation .btn {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .header h1 {
+    font-size: var(--font-size-2xl);
   }
 }
 
-@media (max-width: 768px) {
-  .header__title {
-    font-size: var(--font-size-2xl);
+@media (max-width: 480px) {
+  .main-content {
+    padding: var(--space-16) var(--space-12);
   }
   
-  .timeline-stage--left,
-  .timeline-stage--right {
-    justify-content: center;
-    padding: 0 var(--space-16);
+  .workflow-step {
+    padding: var(--space-16);
   }
   
-  .timeline-stage__card {
-    max-width: 100%;
+  .step-icon {
+    width: 40px;
+    height: 40px;
+    font-size: var(--font-size-lg);
   }
   
-  .stage-header {
-    flex-direction: column;
-    text-align: center;
+  .step-content {
+    gap: var(--space-20);
   }
 }