.container { max-width: 1600px; margin: 0 auto; background: white; border-radius: 15px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }.control-panel { display: flex; justify-content: center; gap: 15px; margin: 15px 0; flex-wrap: wrap; } .btn-next { background: #28a745; color: white; } .btn-next:hover { background: #218838; transform: translateY(-2px); } .btn-prev { background: #6c757d; color: white; } .btn-prev:hover { background: #5a6268; transform: translateY(-2px); } .btn-auto { background: #17a2b8; color: white; } .btn-auto:hover { background: #138496; transform: translateY(-2px); } .btn-reset { background: #dc3545; color: white; } .btn-reset:hover { background: #c82333; transform: translateY(-2px); } .control-panel-min { position: fixed; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.97); border: 2px solid #667eea; border-radius: 10px; padding: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.25); display: none; z-index: 1000; cursor: move; user-select: none; touch-action: none; } .control-panel-min.visible { display: flex; gap: 6px; flex-wrap: wrap; max-width: 280px; } .control-panel-min button { padding: 6px 12px; font-size: 12px; border-radius: 5px; } .control-panel-min .drag-handle { width: 100%; text-align: center; font-size: 11px; color: #888; margin-bottom: 4px; pointer-events: none; } .info-panel { background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 10px; padding: 15px 20px; margin: 15px 0 20px 0; } .explanation { font-size: 16px; color: #333; margin-bottom: 10px; padding: 12px; background: #e7f3ff; border-left: 4px solid #007bff; border-radius: 5px; min-height: 50px; } .calculation { font-size: 14px; color: #333; padding: 12px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 5px; font-family: 'Courier New', monospace; white-space: pre-wrap; min-height: 50px; } .step-counter { text-align: center; font-size: 18px; color: #667eea; font-weight: bold; margin: 10px 0; } .legend { display: flex; justify-content: center; gap: 20px; margin: 12px 0; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; } .legend-color { width: 25px; height: 25px; border: 2px solid #333; border-radius: 5px; } .legend-source { background: #fff3cd; } .legend-target { background: #d4edda; } .legend-current { background: #cce5ff; } .legend-link { background: #f8d7da; } .legend-candidate { background: #e2d5f1; } .tables-container { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 20px; margin-top: 20px; } .table-block { background: #fafafa; border: 1px solid #e0e0e0; border-radius: 10px; padding: 12px; overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { border: 2px solid #ddd; padding: 6px 4px; text-align: center; transition: all 0.3s ease; } th { background: #667eea; color: white; font-weight: bold; font-size: 12px; } .source-cell { background: #fff3cd !important; border-color: #ffc107 !important; font-weight: bold; box-shadow: 0 0 6px rgba(255, 193, 7, 0.6); } .target-cell { background: #d4edda !important; border-color: #28a745 !important; font-weight: bold; box-shadow: 0 0 6px rgba(40, 167, 69, 0.6); } .current-cell { background: #cce5ff !important; border-color: #007bff !important; animation: pulse 1s infinite; } .link-cell { background: #f8d7da !important; border-color: #dc3545 !important; font-weight: bold; box-shadow: 0 0 8px rgba(220, 53, 69, 0.7); animation: pulseLink 1.2s infinite; } .candidate-cell { background: #e2d5f1 !important; border-color: #6f42c1 !important; font-weight: bold; box-shadow: 0 0 8px rgba(111, 66, 193, 0.7); animation: pulseCandidate 1s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes pulseLink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } } @keyframes pulseCandidate { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.08); } } @media (max-width: 1100px) { .tables-container { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .tables-container { grid-template-columns: 1fr; } .control-panel-min { position: fixed; top: auto !important; bottom: 10px !important; right: 10px !important; left: 10px !important; max-width: none; } }
.control-panel-min .btn-close { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; padding: 0; font-size: 14px; font-weight: bold; line-height: 20px; background: #dc3545; color: white; border: none; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; z-index: 10; } .control-panel-min .btn-close:hover { background: #c82333; transform: scale(1.15); } .control-panel-min { position: fixed; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.97); border: 2px solid #667eea; border-radius: 10px; padding: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.25); display: none; z-index: 1000; cursor: move; user-select: none; touch-action: none; }