Spaces:
Sleeping
Sleeping
| * { box-sizing: border-box; } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| margin: 0; | |
| padding: 20px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| .main-layout { | |
| display: flex; | |
| gap: 20px; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| min-height: 700px; | |
| } | |
| .features-sidebar { | |
| width: 320px; | |
| background: rgba(255,255,255,0.95); | |
| border-radius: 20px; | |
| padding: 25px; | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.2); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| /*height: fit-content; | |
| position: sticky; | |
| top: 20px; */ | |
| min-height: 700px; | |
| } | |
| .sidebar-header { | |
| text-align: center; | |
| margin-bottom: 25px; | |
| padding-bottom: 20px; | |
| border-bottom: 2px solid #e0e0e0; | |
| } | |
| .sidebar-header h3 { | |
| margin: 0 0 8px 0; | |
| color: #333; | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| } | |
| .sidebar-header p { | |
| margin: 0; | |
| color: #666; | |
| font-size: 0.9rem; | |
| font-style: italic; | |
| } | |
| .feature-section { | |
| margin-bottom: 25px; | |
| } | |
| .feature-section h4 { | |
| margin: 0 0 15px 0; | |
| color: #333; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid #f0f0f0; | |
| } | |
| .feature-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| margin-bottom: 15px; | |
| padding: 12px; | |
| background: rgba(102, 126, 234, 0.05); | |
| border-radius: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .feature-item:hover { | |
| background: rgba(102, 126, 234, 0.1); | |
| transform: translateX(5px); | |
| } | |
| .feature-icon { | |
| font-size: 1.5rem; | |
| flex-shrink: 0; | |
| } | |
| .feature-item strong { | |
| display: block; | |
| color: #333; | |
| font-size: 0.9rem; | |
| margin-bottom: 4px; | |
| } | |
| .feature-item p { | |
| margin: 0; | |
| color: #666; | |
| font-size: 0.8rem; | |
| line-height: 1.3; | |
| } | |
| .tech-stack { | |
| margin-top: 20px; | |
| padding-top: 20px; | |
| border-top: 2px solid #e0e0e0; | |
| } | |
| .tech-stack h4 { | |
| margin: 0 0 15px 0; | |
| color: #333; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| } | |
| .tech-badges { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .tech-badge { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 6px 12px; | |
| border-radius: 15px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .activity-dashboard { | |
| width: 300px; | |
| background: rgba(255,255,255,0.95); | |
| border-radius: 20px; | |
| padding: 25px; | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.2); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| /*height: fit-content; | |
| position: sticky; | |
| top: 20px;*/ | |
| min-height: 700px; | |
| } | |
| .dashboard-header { | |
| text-align: center; | |
| margin-bottom: 25px; | |
| padding-bottom: 20px; | |
| border-bottom: 2px solid #e0e0e0; | |
| } | |
| .dashboard-header h3 { | |
| margin: 0 0 12px 0; | |
| color: #333; | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| } | |
| .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| font-size: 0.85rem; | |
| color: #28a745; | |
| font-weight: 600; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #28a745; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .stats-section, .session-section, .system-section, .activity-section, .performance-section { | |
| margin-bottom: 25px; | |
| } | |
| .stats-section h4, .session-section h4, .system-section h4, .activity-section h4, .performance-section h4 { | |
| margin: 0 0 15px 0; | |
| color: #333; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid #f0f0f0; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| margin-bottom: 15px; | |
| padding: 15px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| border-radius: 12px; | |
| color: white; | |
| } | |
| .stat-value { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| font-size: 0.8rem; | |
| opacity: 0.9; | |
| } | |
| .session-item, .performance-metric { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| padding: 8px 12px; | |
| background: rgba(102, 126, 234, 0.05); | |
| border-radius: 8px; | |
| } | |
| .session-label, .metric-label { | |
| font-size: 0.85rem; | |
| color: #666; | |
| font-weight: 500; | |
| } | |
| .session-value, .metric-value { | |
| font-size: 0.85rem; | |
| color: #333; | |
| font-weight: 600; | |
| } | |
| .metric-value.success { | |
| color: #28a745; | |
| } | |
| .system-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 12px; | |
| padding: 10px; | |
| background: rgba(102, 126, 234, 0.05); | |
| border-radius: 8px; | |
| } | |
| .system-icon { | |
| font-size: 1.2rem; | |
| } | |
| .system-info { | |
| flex: 1; | |
| } | |
| .system-name { | |
| font-size: 0.85rem; | |
| color: #333; | |
| font-weight: 600; | |
| margin-bottom: 2px; | |
| } | |
| .system-status { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .system-status.online { | |
| color: #28a745; | |
| } | |
| .system-status.offline { | |
| color: #dc3545; | |
| } | |
| .activity-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 12px; | |
| } | |
| .activity-bar { | |
| flex: 1; | |
| height: 6px; | |
| background: #e0e0e0; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .activity-fill { | |
| height: 100%; | |
| background: linear-gradient(135deg, #28a745 0%, #20c997 100%); | |
| border-radius: 3px; | |
| transition: width 0.3s ease; | |
| } | |
| .activity-label { | |
| font-size: 0.8rem; | |
| color: #666; | |
| min-width: 80px; | |
| } | |
| .activity-percent { | |
| font-size: 0.8rem; | |
| color: #333; | |
| font-weight: 600; | |
| min-width: 35px; | |
| text-align: right; | |
| } | |
| .background-animation { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .floating-shape { | |
| position: absolute; | |
| opacity: 0.1; | |
| animation: float 20s infinite linear; | |
| } | |
| .shape-1 { | |
| width: 80px; | |
| height: 80px; | |
| background: rgba(255,255,255,0.2); | |
| border-radius: 50%; | |
| top: 20%; | |
| left: 10%; | |
| animation-delay: 0s; | |
| } | |
| .shape-2 { | |
| width: 60px; | |
| height: 60px; | |
| background: rgba(255,255,255,0.15); | |
| border-radius: 20%; | |
| top: 60%; | |
| right: 15%; | |
| animation-delay: -5s; | |
| } | |
| .shape-3 { | |
| width: 100px; | |
| height: 100px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 30%; | |
| top: 80%; | |
| left: 20%; | |
| animation-delay: -10s; | |
| } | |
| .shape-4 { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255,255,255,0.25); | |
| border-radius: 50%; | |
| top: 30%; | |
| right: 30%; | |
| animation-delay: -15s; | |
| } | |
| .shape-5 { | |
| width: 120px; | |
| height: 120px; | |
| background: rgba(255,255,255,0.08); | |
| border-radius: 40%; | |
| top: 10%; | |
| right: 5%; | |
| animation-delay: -7s; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0px) rotate(0deg); | |
| opacity: 0.1; | |
| } | |
| 50% { | |
| opacity: 0.2; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) rotate(360deg); | |
| opacity: 0; | |
| } | |
| } | |
| .chat-container { | |
| flex: 1; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.2); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .chat-container .logo-banner { | |
| background: #0B1320 ; | |
| color: white; | |
| padding: 15px; | |
| text-align: center; | |
| border-radius: 20px 20px 0 0; | |
| overflow: hidden; | |
| } | |
| div.logo-banner { | |
| background-color: #0B1320 ; | |
| background: #0B1320 ; | |
| } | |
| .logo { | |
| display: inline-block; | |
| margin-bottom: 15px; | |
| } | |
| .robot-logo { | |
| font-size: 2.5rem; | |
| margin: 0 auto 10px; | |
| text-align: center; | |
| animation: bounce 2s infinite; | |
| display: block; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } | |
| 40% { transform: translateY(-10px); } | |
| 60% { transform: translateY(-5px); } | |
| } | |
| .logo-text { | |
| color: white; | |
| text-align: center; | |
| } | |
| .logo-title { | |
| font-size: 2rem; | |
| font-weight: 900; | |
| letter-spacing: 2px; | |
| margin-bottom: 8px; | |
| font-family: 'Montserrat', 'Arial Black', sans-serif; | |
| background: linear-gradient(180deg, #00E8FF 0%, #00B8FF 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| filter: drop-shadow(0 0 15px rgba(0, 232, 255, 0.6)); | |
| } | |
| .logo-subtitle { | |
| font-size: 0.75rem; | |
| font-weight: 300; | |
| letter-spacing: 1px; | |
| color: #66F0FF; | |
| font-family: 'Montserrat', 'Arial', sans-serif; | |
| text-transform: uppercase; | |
| opacity: 0.9; | |
| } | |
| .chat-header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 30px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .chat-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(255,255,255,0.1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .chat-header h1 { | |
| margin: 0; | |
| font-size: 28px; | |
| font-weight: 600; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .chat-messages { | |
| height: 500px; | |
| overflow-y: auto; | |
| padding: 30px; | |
| background: rgba(255,255,255,0.95); | |
| } | |
| .message { | |
| margin: 15px 0; | |
| padding: 15px 20px; | |
| border-radius: 18px; | |
| max-width: 80%; | |
| word-wrap: break-word; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| } | |
| .user-message { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| margin-left: auto; | |
| margin-right: 0; | |
| border-bottom-right-radius: 5px; | |
| } | |
| .bot-message { | |
| background: white; | |
| color: #333; | |
| margin-left: 0; | |
| margin-right: auto; | |
| border: 1px solid #e0e0e0; | |
| border-bottom-left-radius: 5px; | |
| } | |
| .chat-input { | |
| display: flex; | |
| padding: 25px 30px; | |
| border-top: 1px solid #e0e0e0; | |
| background: rgba(255,255,255,0.95); | |
| align-items: center; | |
| border-radius: 0 0 20px 20px; | |
| } | |
| .chat-input input { | |
| flex: 1; | |
| padding: 15px 20px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 25px; | |
| margin-right: 15px; | |
| font-size: 16px; | |
| outline: none; | |
| transition: border-color 0.3s ease; | |
| } | |
| .chat-input input:focus { | |
| border-color: #667eea; | |
| } | |
| .chat-input button { | |
| padding: 15px 25px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| margin-left: 8px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .chat-input button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); | |
| } | |
| .file-input { display: none; } | |
| .file-button { | |
| background: rgba(102, 126, 234, 0.1); | |
| border: none; | |
| padding: 12px; | |
| cursor: pointer; | |
| border-radius: 50%; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .file-button:hover { | |
| background: rgba(102, 126, 234, 0.2); | |
| transform: scale(1.1); | |
| } | |
| .file-button svg { width: 24px; height: 24px; fill: #667eea; } | |
| .file-button:hover svg { fill: #5a67d8; } | |
| .upload-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.6); | |
| z-index: 9999; | |
| backdrop-filter: blur(5px); | |
| } | |
| .modal-content { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: white; | |
| padding: 30px; | |
| border-radius: 20px; | |
| width: 450px; | |
| max-width: 90vw; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.2); | |
| z-index: 10000; | |
| } | |
| .modal-content h3 { | |
| margin-top: 0; | |
| color: #333; | |
| font-size: 24px; | |
| font-weight: 600; | |
| } | |
| .modal-content textarea { | |
| width: 100%; | |
| margin: 15px 0; | |
| padding: 15px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 10px; | |
| resize: vertical; | |
| font-family: inherit; | |
| outline: none; | |
| transition: border-color 0.3s ease; | |
| } | |
| .modal-content textarea:focus { | |
| border-color: #667eea; | |
| } | |
| .modal-buttons { text-align: right; margin-top: 20px; } | |
| .modal-buttons button { | |
| margin-left: 15px; | |
| padding: 12px 24px; | |
| border: none; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.2s ease; | |
| } | |
| .modal-buttons button:first-child { | |
| background: #f8f9fa; | |
| color: #6c757d; | |
| border: 2px solid #e0e0e0; | |
| } | |
| .modal-buttons button:first-child:hover { | |
| background: #e9ecef; | |
| } | |
| .modal-buttons button:last-child { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .modal-buttons button:last-child:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); | |
| } | |
| .processing-indicator { display: inline-block; margin-left: 10px; } | |
| .spinner { | |
| border: 3px solid rgba(102, 126, 234, 0.2); | |
| border-top: 3px solid #667eea; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| animation: spin 1s linear infinite; | |
| display: inline-block; | |
| } | |
| @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | |
| .processing-message { | |
| background: linear-gradient(135deg, #ffeaa7 0%, #fff3cd 100%); | |
| border: 1px solid #f39c12; | |
| color: #856404; | |
| margin-left: 0; | |
| margin-right: auto; | |
| max-width: 80%; | |
| border-bottom-left-radius: 5px; | |
| } | |
| .mermaid-viewer { | |
| background: #f8f9fa; | |
| border: 1px solid #e0e0e0; | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin: 15px 0; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.05); | |
| } | |
| .mermaid-tabs { | |
| display: flex; | |
| border-bottom: 2px solid #e0e0e0; | |
| margin-bottom: 15px; | |
| } | |
| .mermaid-tab { | |
| background: transparent; | |
| border: none; | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| color: #666; | |
| border-bottom: 3px solid transparent; | |
| transition: all 0.3s ease; | |
| } | |
| .mermaid-tab.active { | |
| color: #667eea; | |
| border-bottom-color: #667eea; | |
| } | |
| .mermaid-tab:hover { | |
| color: #667eea; | |
| background: rgba(102, 126, 234, 0.1); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .option-buttons { | |
| display: flex; | |
| gap: 10px; | |
| margin: 15px 0; | |
| flex-wrap: wrap; | |
| } | |
| .option-btn { | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 20px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| background: linear-gradient(135deg, #28a745 0%, #20c997 100%); | |
| color: white; | |
| } | |
| .option-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4); | |
| } | |
| .option-btn.secondary { | |
| background: linear-gradient(135deg, #6c757d 0%, #495057 100%); | |
| } | |
| .option-btn.secondary:hover { | |
| box-shadow: 0 5px 15px rgba(108, 117, 125, 0.4); | |
| } | |
| .code-block { | |
| background: #2d3748; | |
| color: #e2e8f0; | |
| padding: 15px; | |
| border-radius: 10px; | |
| overflow-x: auto; | |
| font-family: 'Consolas', 'Monaco', 'Courier New', monospace; | |
| font-size: 14px; | |
| line-height: 1.4; | |
| position: relative; | |
| } | |
| .code-block pre { | |
| margin: 0; | |
| white-space: pre; | |
| font-family: inherit; | |
| font-size: inherit; | |
| color: inherit; | |
| background: transparent; | |
| } | |
| .mermaid-preview { | |
| background: white; | |
| border: 1px solid #e0e0e0; | |
| border-radius: 10px; | |
| padding: 20px; | |
| text-align: center; | |
| min-height: 300px; | |
| overflow: auto; | |
| } | |
| .mermaid-preview svg { | |
| max-width: 100%; | |
| height: auto; | |
| min-height: 200px; | |
| } | |
| .split-view { | |
| display: flex; | |
| gap: 15px; | |
| height: 400px; | |
| } | |
| .split-view > div { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .split-view .code-block { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| .split-view .mermaid-preview { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| .copy-btn { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: #667eea; | |
| color: white; | |
| border: none; | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| opacity: 0.8; | |
| } | |
| .copy-btn:hover { | |
| opacity: 1; | |
| } | |
| .download-btn { | |
| background: #28a745; | |
| color: white; | |
| border: none; | |
| padding: 8px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| margin-left: 10px; | |
| } | |
| .download-btn:hover { | |
| background: #218838; | |
| } | |
| .code-toggle { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border: none; | |
| padding: 10px 16px; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| font-size: 13px; | |
| margin-bottom: 15px; | |
| font-weight: 600; | |
| transition: all 0.2s ease; | |
| } | |
| .code-toggle:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3); | |
| } | |
| .disclaimer { | |
| text-align: center; | |
| margin-top: 20px; | |
| padding: 15px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 15px; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| } | |
| .disclaimer p { | |
| margin: 0; | |
| color: #64748b; | |
| font-size: 14px; | |
| font-style: italic; | |
| font-weight: 300; | |
| } | |
| .feedback-tile { | |
| padding: 20px 30px; | |
| margin-top: 15px; | |
| background: rgba(255,255,255,0.95); | |
| border-top: 1px solid #e0e0e0; | |
| text-align: center; | |
| border-radius: 0 0 20px 20px; | |
| } | |
| .feedback-btn { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border: none; | |
| padding: 12px 24px; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); | |
| } | |
| .feedback-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5); | |
| } | |
| .feedback-form { | |
| margin-top: 20px; | |
| padding: 20px; | |
| background: rgba(248, 249, 250, 0.8); | |
| border-radius: 15px; | |
| border: 1px solid #e0e0e0; | |
| text-align: left; | |
| } | |
| .feedback-form h4 { | |
| margin: 0 0 10px 0; | |
| color: #333; | |
| font-size: 1.1rem; | |
| } | |
| .feedback-form p { | |
| margin: 0 0 15px 0; | |
| color: #666; | |
| font-size: 0.9rem; | |
| } | |
| .feedback-input, .feedback-textarea { | |
| width: 100%; | |
| margin: 10px 0; | |
| padding: 12px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 8px; | |
| font-family: inherit; | |
| font-size: 14px; | |
| outline: none; | |
| transition: border-color 0.3s ease; | |
| } | |
| .feedback-input:focus, .feedback-textarea:focus { | |
| border-color: #667eea; | |
| } | |
| .feedback-textarea { | |
| resize: vertical; | |
| min-height: 80px; | |
| } | |
| .feedback-buttons { | |
| display: flex; | |
| gap: 10px; | |
| justify-content: flex-end; | |
| margin-top: 15px; | |
| } | |
| .feedback-cancel, .feedback-submit { | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.2s ease; | |
| } | |
| .feedback-cancel { | |
| background: #f8f9fa; | |
| color: #6c757d; | |
| border: 2px solid #e0e0e0; | |
| } | |
| .feedback-cancel:hover { | |
| background: #e9ecef; | |
| } | |
| .feedback-submit { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .feedback-submit:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); | |
| } | |
| .mini-game { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: rgba(255,255,255,0.95); | |
| border-radius: 15px; | |
| padding: 20px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.2); | |
| backdrop-filter: blur(10px); | |
| display: none; | |
| z-index: 1000; | |
| } | |
| .game-title { | |
| text-align: center; | |
| margin-bottom: 15px; | |
| color: #333; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .game-dots { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .game-dot { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| } | |
| .game-dot:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); | |
| } | |
| .game-dot.clicked { | |
| background: #28a745; | |
| transform: scale(0.8); | |
| } | |
| .game-score { | |
| text-align: center; | |
| color: #666; | |
| font-size: 14px; | |
| } | |
| pre { background: #f8f9fa; padding: 10px; border-radius: 5px; overflow-x: auto; } |