/* CONSORT Reviewer AI - Advanced Professional UI */

/* Advanced CSS Variables */
:root {
 /* Enhanced Color Palette */
 --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
 --glass-effect: rgba(255, 255, 255, 0.15);
 --glass-border: rgba(255, 255, 255, 0.2);
 --shadow-glow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
 --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.1);
 
 /* Advanced Typography - Vazirmatn Font */
 --font-display: 'Vazirmatn', 'Inter', system-ui, sans-serif;
 --font-body: 'Vazirmatn', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 
 /* Animation Timings */
 --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-smooth: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 --transition-elastic: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Vazirmatn Font Import */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Global Font Application */
* {
 font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-display) !important;
}

/* Advanced Animated Background - Neural Network Style */
body::before {
 content: '';
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: 
 /* Neural Network Nodes */
 radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.4) 0%, transparent 50%),
 radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.4) 0%, transparent 50%),
 radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%),
 radial-gradient(circle at 60% 70%, rgba(240, 147, 251, 0.3) 0%, transparent 40%),
 radial-gradient(circle at 30% 10%, rgba(67, 233, 123, 0.2) 0%, transparent 35%);
 background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
 z-index: -3;
 animation: neuralFloat 30s ease-in-out infinite;
}

body::after {
 content: '';
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: 
 /* Rotating Geometric Shapes */
 radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
 radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.08) 3px, transparent 3px),
 radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
 radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.09) 2px, transparent 2px);
 background-size: 80px 80px, 120px 120px, 60px 60px, 100px 100px;
 z-index: -2;
 animation: shapeRotate 40s linear infinite;
}

/* Floating Geometric Shapes */
.geometric-shapes {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: -1;
}

.geometric-shape {
 position: absolute;
 opacity: 0.1;
 animation: floatRotate 15s ease-in-out infinite;
}

.geometric-shape:nth-child(1) {
 top: 10%;
 left: 10%;
 width: 60px;
 height: 60px;
 background: linear-gradient(45deg, #667eea, #764ba2);
 border-radius: 50%;
 animation-delay: 0s;
}

.geometric-shape:nth-child(2) {
 top: 20%;
 right: 15%;
 width: 40px;
 height: 40px;
 background: linear-gradient(45deg, #f093fb, #f5576c);
 transform: rotate(45deg);
 animation-delay: -5s;
}

.geometric-shape:nth-child(3) {
 bottom: 30%;
 left: 20%;
 width: 50px;
 height: 50px;
 background: linear-gradient(45deg, #4facfe, #00f2fe);
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 animation-delay: -10s;
}

.geometric-shape:nth-child(4) {
 bottom: 20%;
 right: 25%;
 width: 35px;
 height: 35px;
 background: linear-gradient(45deg, #43e97b, #38f9d7);
 border-radius: 20%;
 animation-delay: -15s;
}

@keyframes neuralFloat {
 0%, 100% { 
 transform: translateY(0px) translateX(0px) rotate(0deg);
 opacity: 1;
 }
 25% { 
 transform: translateY(-8px) translateX(-8px) rotate(1deg);
 opacity: 0.9;
 }
 50% { 
 transform: translateY(0px) translateX(8px) rotate(-1deg);
 opacity: 0.95;
 }
 75% { 
 transform: translateY(8px) translateX(-5px) rotate(0.5deg);
 opacity: 0.85;
 }
}

@keyframes shapeRotate {
 0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
 25% { transform: translateY(-10px) translateX(10px) rotate(90deg); }
 50% { transform: translateY(0px) translateX(-10px) rotate(180deg); }
 75% { transform: translateY(10px) translateX(5px) rotate(270deg); }
 100% { transform: translateY(0px) translateX(0px) rotate(360deg); }
}

@keyframes floatRotate {
 0%, 100% {
 transform: translateY(0px) rotate(0deg) scale(1);
 opacity: 0.1;
 }
 25% {
 transform: translateY(-20px) rotate(90deg) scale(1.1);
 opacity: 0.3;
 }
 50% {
 transform: translateY(-10px) rotate(180deg) scale(0.9);
 opacity: 0.2;
 }
 75% {
 transform: translateY(-30px) rotate(270deg) scale(1.05);
 opacity: 0.25;
 }
}

/* Enhanced Glass Morphism Navigation v7.0.0 */
.navbar {
 background: var(--glass-effect);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border: none;
 border-bottom: 1px solid var(--glass-border);
 box-shadow: var(--shadow-glow);
 transition: var(--transition-smooth);
 padding: 1rem 0;
 z-index: 1050;
}

.navbar:hover {
 background: rgba(255, 255, 255, 0.25);
}

.navbar-brand {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 1.5rem;
 color: #fff !important;
 text-decoration: none;
 transition: var(--transition-bounce);
}

.navbar-brand:hover {
 transform: scale(1.05);
 filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.5));
 color: #fff !important;
}

.navbar-brand .fw-bold {
 background: var(--primary-gradient);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

/* Enhanced Navigation Links */
.nav-link {
 position: relative;
 font-weight: 500;
 color: rgba(255, 255, 255, 0.9) !important;
 transition: var(--transition-smooth);
 padding: 0.5rem 1rem;
 border-radius: 0.75rem;
 overflow: hidden;
 margin: 0 0.25rem;
}

.nav-link::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: var(--primary-gradient);
 transition: var(--transition-elastic);
 z-index: -1;
 opacity: 0.1;
}

.nav-link:hover::before {
 left: 0;
 opacity: 0.2;
}

.nav-link:hover {
 color: #fff !important;
 transform: translateY(-2px);
 background: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
 background: var(--primary-gradient);
 color: white !important;
 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Dark Mode Toggle Button */
#darkModeToggle {
 border: 2px solid rgba(255, 255, 255, 0.3);
 background: rgba(255, 255, 255, 0.1);
 color: #fff;
 transition: var(--transition-smooth);
 border-radius: 50%;
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 overflow: hidden;
}

#darkModeToggle:hover {
 background: rgba(255, 255, 255, 0.2);
 border-color: rgba(255, 255, 255, 0.5);
 transform: scale(1.1);
 color: #fff;
}

#darkModeToggle.switching {
 animation: switchingAnimation 0.3s ease-in-out;
}

@keyframes switchingAnimation {
 0% { transform: scale(1) rotate(0deg); }
 50% { transform: scale(1.2) rotate(180deg); }
 100% { transform: scale(1) rotate(360deg); }
}

/* Dropdown Menus */
.dropdown-menu {
 backdrop-filter: blur(20px);
 background: rgba(255, 255, 255, 0.95);
 border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: 12px;
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 padding: 0.5rem;
}

.dropdown-item {
 transition: var(--transition-smooth);
 border-radius: 8px;
 margin: 0.25rem 0;
 padding: 0.5rem 1rem;
}

.dropdown-item:hover {
 background: rgba(74, 144, 226, 0.1);
 transform: translateX(5px);
}

.dropdown-item.active {
 background: var(--primary-gradient);
 color: white;
}

/* Mobile Navigation */
.navbar-toggler {
 border: none;
 padding: 0.25rem 0.5rem;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 0.5rem;
}

.navbar-toggler:focus {
 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.navbar-toggler-icon {
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Responsive adjustments */
@media (max-width: 768px) {
 .navbar-nav {
 background: rgba(0, 0, 0, 0.9);
 border-radius: 12px;
 padding: 1rem;
 margin-top: 1rem;
 }
 
 .nav-link {
 margin: 0.25rem 0;
 }
 
 #darkModeToggle {
 margin: 0.5rem 0;
 }
}

/* Hero Section with Advanced Effects */
.hero-section {
 background: var(--primary-gradient);
 padding: 4rem 0;
 position: relative;
 overflow: hidden;
 color: white;
}

.hero-section::before {
 content: '';
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.15"/><circle cx="10" cy="90" r="0.5" fill="white" opacity="0.15"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
 animation: heroPattern 25s linear infinite;
 z-index: 1;
}

.hero-content {
 position: relative;
 z-index: 2;
}

@keyframes heroPattern {
 0% { transform: translateX(0) translateY(0); }
 25% { transform: translateX(-10px) translateY(-10px); }
 50% { transform: translateX(10px) translateY(-5px); }
 75% { transform: translateX(-5px) translateY(10px); }
 100% { transform: translateX(0) translateY(0); }
}

/* Advanced Card System */
.card {
 background: var(--glass-effect);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--glass-border);
 border-radius: 1.5rem;
 box-shadow: var(--shadow-glow);
 transition: var(--transition-smooth);
 overflow: hidden;
 position: relative;
}

.card::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 2px;
 background: var(--primary-gradient);
 transition: var(--transition-elastic);
}

.card:hover::before {
 left: 0;
}

.card:hover {
 transform: translateY(-8px) scale(1.02);
 box-shadow: var(--shadow-hover);
 border-color: rgba(102, 126, 234, 0.3);
}

/* Feature Cards with Icons */
.feature-card {
 text-align: center;
 padding: 2rem;
 transition: var(--transition-smooth);
 cursor: pointer;
}

.feature-icon {
 width: 80px;
 height: 80px;
 margin: 0 auto 1.5rem;
 background: var(--primary-gradient);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 2rem;
 color: white;
 transition: var(--transition-bounce);
 position: relative;
 overflow: hidden;
}

.feature-icon::before {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 0;
 height: 0;
 background: rgba(255, 255, 255, 0.3);
 border-radius: 50%;
 transition: var(--transition-smooth);
 transform: translate(-50%, -50%);
}

.feature-card:hover .feature-icon::before {
 width: 100%;
 height: 100%;
}

.feature-card:hover .feature-icon {
 transform: scale(1.1) rotate(5deg);
 box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

/* Advanced Button System */
.btn {
 position: relative;
 overflow: hidden;
 border: none;
 border-radius: 0.75rem;
 padding: 0.75rem 2rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 transition: var(--transition-smooth);
 cursor: pointer;
 z-index: 1;
}

.btn::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: var(--transition-fast);
 z-index: -1;
}

.btn:hover::before {
 left: 100%;
}

.btn-primary {
 background: var(--primary-gradient);
 color: white;
 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
 color: white;
}

.btn-secondary {
 background: var(--glass-effect);
 backdrop-filter: blur(10px);
 color: #4a5568;
 border: 1px solid var(--glass-border);
}

.btn-secondary:hover {
 background: rgba(255, 255, 255, 0.4);
 transform: translateY(-2px);
 color: #2d3748;
}

/* Loading Animation */
.loading-spinner {
 width: 40px;
 height: 40px;
 border: 4px solid rgba(102, 126, 234, 0.1);
 border-left-color: #667eea;
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

@keyframes spin {
 to { transform: rotate(360deg); }
}

/* Progress Bar with Gradient */
.progress {
 height: 8px;
 background: rgba(0, 0, 0, 0.1);
 border-radius: 4px;
 overflow: hidden;
 position: relative;
}

.progress-bar {
 height: 100%;
 background: var(--primary-gradient);
 border-radius: 4px;
 transition: var(--transition-smooth);
 position: relative;
 overflow: hidden;
}

.progress-bar::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 animation: progressShine 2s infinite;
}

@keyframes progressShine {
 0% { transform: translateX(-100%); }
 100% { transform: translateX(100%); }
}

/* Advanced Form Elements */
.form-control {
 background: var(--glass-effect);
 backdrop-filter: blur(10px);
 border: 1px solid var(--glass-border);
 border-radius: 0.75rem;
 padding: 1rem 1.25rem;
 transition: var(--transition-smooth);
 position: relative;
}

.form-control:focus {
 outline: none;
 border-color: #667eea;
 box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 background: rgba(255, 255, 255, 0.9);
 transform: translateY(-1px);
}

/* Floating Labels */
.form-floating {
 position: relative;
}

.form-floating label {
 position: absolute;
 top: 1rem;
 left: 1.25rem;
 color: #6b7280;
 transition: var(--transition-smooth);
 pointer-events: none;
 background: rgba(255, 255, 255, 0.8);
 padding: 0 0.5rem;
 border-radius: 0.25rem;
}

.form-floating input:focus + label,
.form-floating input:not(:placeholder-shown) + label {
 top: -0.5rem;
 left: 1rem;
 font-size: 0.75rem;
 color: #667eea;
 font-weight: 600;
}

/* Advanced Alert System */
.alert {
 background: var(--glass-effect);
 backdrop-filter: blur(20px);
 border: 1px solid var(--glass-border);
 border-radius: 1rem;
 padding: 1rem 1.5rem;
 position: relative;
 overflow: hidden;
 animation: slideInRight 0.5s ease-out;
}

.alert::before {
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 width: 4px;
 height: 100%;
 background: var(--primary-gradient);
}

.alert-success::before {
 background: var(--success-gradient);
}

.alert-warning::before {
 background: var(--warning-gradient);
}

@keyframes slideInRight {
 from {
 opacity: 0;
 transform: translateX(100px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
}

/* Responsive Enhancements */
@media (max-width: 768px) {
 .hero-section {
 padding: 2rem 0;
 }
 
 .feature-icon {
 width: 60px;
 height: 60px;
 font-size: 1.5rem;
 }
 
 .card {
 margin-bottom: 1rem;
 }
 
 .btn {
 padding: 0.5rem 1.5rem;
 font-size: 0.875rem;
 }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
 :root {
 --glass-effect: rgba(0, 0, 0, 0.25);
 --glass-border: rgba(255, 255, 255, 0.18);
 }
 
 .nav-link {
 color: #e2e8f0;
 }
 
 .form-control {
 color: #e2e8f0;
 }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
 * {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
}

/* Print Styles */
@media print {
 .navbar,
 .btn,
 .alert {
 background: white !important;
 color: black !important;
 box-shadow: none !important;
 }
}