:root {--bg-color: #05050D;--primary-start: #4F46E5;--primary-end: #22D3EE;--accent-color: #FBBF24;--text-color: #D1D5DB;--text-color-dark: #6B7280;--border-color: rgba(79, 70, 229, 0.3);--card-bg: rgba(22, 22, 35, 0.6);--user-color: #3B82F6;--ai-color: #8B5CF6;--tool-color: #10B981;}html { scroll-behavior: smooth; }body {background-color: var(--bg-color);color: var(--text-color);font-family: 'Poppins', sans-serif;overflow-x: hidden;}.font-mono { font-family: 'Fira Code', monospace; }.glass-pane {background: var(--card-bg);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);border: 1px solid var(--border-color);transition: all 0.4s ease;}.glass-pane:hover {border-color: var(--primary-end);transform: translateY(-8px);box-shadow: 0 0 40px rgba(34, 211, 238, 0.1);}.scroll-target {opacity: 0;transform: translateY(40px);transition: opacity 0.8s ease-out, transform 0.8s ease-out;}.scroll-target.is-visible {opacity: 1;transform: translateY(0);}.text-gradient {background: linear-gradient(90deg, var(--primary-start), var(--primary-end));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.bg-gradient { background: linear-gradient(90deg, var(--primary-start), var(--primary-end)); }.value-flow .flow-line { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw-line 2s ease-out forwards; }.value-flow .flow-dot { animation: pulse 2.5s ease-in-out infinite; }@keyframes draw-line { to { stroke-dashoffset: 0; } }@keyframes pulse { 0%, 100% { r: 1; opacity: 0; } 50% { r: 4; opacity: 1; } }.is-visible .value-flow .flow-line { animation-delay: 0.5s; }.is-visible .value-flow .flow-dot { animation-delay: 1.5s; }
/* AITTO Animation Styles */#animation-container {position: relative;min-height: 400px;}
#animation-stage {position: relative;width: 100%;height: 100%;}
.user-data-point {position: absolute;width: 100px;height: 30px;background-color: rgba(59, 130, 246, 0.2);border: 1px solid var(--user-color);border-radius: 15px;display: flex;align-items: center;justify-content: center;color: white;font-size: 12px;opacity: 0;transition: all 0.5s ease;padding: 0 8px;}
.user-data-point i {margin-right: 5px;font-size: 10px;}
.tool-item {width: 40px;height: 40px;background-color: rgba(16, 185, 129, 0.2);border: 1px solid var(--tool-color);border-radius: 8px;display: flex;align-items: center;justify-content: center;color: white;font-size: 16px;transition: all 0.3s ease;}
.tool-item.active {background-color: rgba(16, 185, 129, 0.5);box-shadow: 0 0 15px rgba(16, 185, 129, 0.7);transform: scale(1.1);}
.processed-data-item {position: absolute;width: 24px;height: 24px;background-color: rgba(139, 92, 246, 0.5);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;font-size: 10px;opacity: 0;}
.result-item {position: absolute;width: 30px;height: 30px;background-color: rgba(16, 185, 129, 0.5);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;font-size: 12px;opacity: 0;}
.light-beam {position: absolute;height: 2px;background: linear-gradient(90deg, var(--ai-color), var(--primary-end));transform-origin: left center;opacity: 0;box-shadow: 0 0 8px rgba(34, 211, 238, 0.8);}
.light-beam.reverse {transform-origin: right center;background: linear-gradient(90deg, var(--primary-end), var(--user-color));}
.light-beam.thick {height: 4px;box-shadow: 0 0 12px rgba(34, 211, 238, 1);}
#speech-bubble {top: -60px;left: 50%;transform: translateX(-50%);}
/* Animation classes */.pulse {animation: pulse 2s infinite ease-in-out;}
.rotate {animation: rotate 8s infinite linear;}
@keyframes pulse {0%, 100% { transform: scale(1); }50% { transform: scale(1.2); }}
@keyframes rotate {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}
@keyframes float {0%, 100% { transform: translateY(0); }50% { transform: translateY(-10px); }}
.float {animation: float 6s infinite ease-in-out;}
/* Responsive adjustments */@media (max-width: 768px) {.tool-item {width: 30px;height: 30px;font-size: 12px;}
#user-icon, #ai-agent-icon, #ioa-icon {width: 120px;height: 120px;font-size: 40px;}
.user-data-point {width: 80px;font-size: 10px;}}
/* AITTO Animation Loading States */
.aitto-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-color);
    font-size: 14px;
    opacity: 0.6;
}

.aitto-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--primary-end);
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 20px;
}

/* 优化动画容器的初始状态 */
#aitto-animation-container {
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

/* 确保动画容器在加载时有合适的尺寸 */
@media (max-width: 768px) {
    #aitto-animation-container {
        min-height: 300px;
    }
}

/* Authentication Modal Styles */
#modal-overlay {
    z-index: 50;
}

#auth-modal {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    min-width: 320px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    #auth-modal {
        margin: 1rem;
        padding: 1.5rem;
    }
    
    /* 移动端隐藏注册按钮，只显示登录按钮 */
    #signup-btn {
        display: none !important;
    }
    
    #login-btn {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Form input styles */
#auth-form input:focus {
    border-color: var(--primary-end);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

/* Loading state for submit button */
#auth-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Glass pane hover effect for modal */
#auth-modal:hover {
    border-color: var(--primary-end);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(34, 211, 238, 0.15);
}