/* CONSORT Reviewer AI - Professional Modern Design System v8.0.0 */

/* 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%);
 --error-gradient: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
 --info-gradient: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
 
 /* Glass Morphism */
 --glass-effect: rgba(255, 255, 255, 0.15);
 --glass-border: rgba(255, 255, 255, 0.2);
 --glass-dark: rgba(0, 0, 0, 0.15);
 --glass-border-dark: rgba(255, 255, 255, 0.1);
 
 /* Advanced Shadows */
 --shadow-glow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
 --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.1);
 --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.1);
 --shadow-button: 0 4px 15px rgba(102, 126, 234, 0.4);
 
 /* Typography - Vazirmatn Font */
 --font-display: 'Vazirmatn', 'Inter', system-ui, sans-serif;
 --font-body: 'Vazirmatn', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
 
 /* Spacing System */
 --space-xs: 0.25rem;
 --space-sm: 0.5rem;
 --space-md: 1rem;
 --space-lg: 1.5rem;
 --space-xl: 2rem;
 --space-2xl: 3rem;
 --space-3xl: 4rem;
 --space-4xl: 6rem;
 
 /* Border Radius */
 --radius-sm: 0.375rem;
 --radius-md: 0.5rem;
 --radius-lg: 0.75rem;
 --radius-xl: 1rem;
 --radius-2xl: 1.5rem;
 --radius-full: 9999px;
 
 /* Animation Timings */
 --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 --transition-elastic: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
 /* Z-Index Scale */
 --z-dropdown: 1000;
 --z-sticky: 1020;
 --z-fixed: 1030;
 --z-modal-backdrop: 1040;
 --z-modal: 1050;
 --z-popover: 1060;
 --z-tooltip: 1070;
 --z-toast: 1080;
}

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

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

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

code, pre, .font-mono {
 font-family: var(--font-mono) !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;
}

@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); }
}

/* Modern Container System */
.modern-container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 var(--space-md);
}

.modern-container-fluid {
 width: 100%;
 padding: 0 var(--space-md);
}

/* Enhanced Glass Morphism Navigation */
.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-normal);
 padding: var(--space-md) 0;
 z-index: var(--z-fixed);
}

.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-normal);
 padding: var(--space-sm) var(--space-md);
 border-radius: var(--radius-lg);
 overflow: hidden;
 margin: 0 var(--space-xs);
}

.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: var(--shadow-button);
}

/* Modern Button System */
.modern-btn {
 position: relative;
 overflow: hidden;
 border: none;
 border-radius: var(--radius-lg);
 padding: var(--space-md) var(--space-xl);
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 transition: var(--transition-normal);
 cursor: pointer;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--space-sm);
 text-decoration: none;
}

.modern-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;
}

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

.modern-btn-primary {
 background: var(--primary-gradient);
 color: white;
 box-shadow: var(--shadow-button);
}

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

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

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

.modern-btn-success {
 background: var(--success-gradient);
 color: white;
 box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}

.modern-btn-warning {
 background: var(--warning-gradient);
 color: white;
 box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);
}

.modern-btn-error {
 background: var(--error-gradient);
 color: white;
 box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.modern-btn-lg {
 padding: var(--space-lg) var(--space-2xl);
 font-size: 1.125rem;
}

.modern-btn-sm {
 padding: var(--space-sm) var(--space-md);
 font-size: 0.875rem;
}

/* Modern Card System */
.modern-card {
 background: var(--glass-effect);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-2xl);
 box-shadow: var(--shadow-card);
 transition: var(--transition-normal);
 overflow: hidden;
 position: relative;
}

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

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

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

.modern-card-header {
 padding: var(--space-xl);
 border-bottom: 1px solid var(--glass-border);
}

.modern-card-body {
 padding: var(--space-xl);
}

.modern-card-footer {
 padding: var(--space-xl);
 border-top: 1px solid var(--glass-border);
 background: rgba(255, 255, 255, 0.05);
}

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

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

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

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

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

/* Modern Form Elements */
.modern-form-control {
 background: var(--glass-effect);
 backdrop-filter: blur(10px);
 border: 1px solid var(--glass-border);
 border-radius: var(--radius-lg);
 padding: var(--space-md) var(--space-lg);
 transition: var(--transition-normal);
 position: relative;
 color: #333;
}

.modern-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);
}

.modern-form-control::placeholder {
 color: rgba(0, 0, 0, 0.5);
}

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

.modern-form-floating label {
 position: absolute;
 top: var(--space-md);
 left: var(--space-lg);
 color: #6b7280;
 transition: var(--transition-normal);
 pointer-events: none;
 background: rgba(255, 255, 255, 0.8);
 padding: 0 var(--space-sm);
 border-radius: var(--radius-sm);
}

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

/* Modern Badge System */
.modern-badge {
 display: inline-flex;
 align-items: center;
 gap: var(--space-xs);
 padding: var(--space-xs) var(--space-sm);
 border-radius: var(--radius-full);
 font-size: 0.75rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 transition: var(--transition-normal);
}

.modern-badge-primary {
 background: var(--primary-gradient);
 color: white;
}

.modern-badge-success {
 background: var(--success-gradient);
 color: white;
}

.modern-badge-warning {
 background: var(--warning-gradient);
 color: white;
}

.modern-badge-error {
 background: var(--error-gradient);
 color: white;
}

.modern-badge-info {
 background: var(--info-gradient);
 color: white;
}

/* Modern Progress Bar */
.modern-progress {
 height: 8px;
 background: rgba(0, 0, 0, 0.1);
 border-radius: var(--radius-sm);
 overflow: hidden;
 position: relative;
}

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

.modern-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%); }
}

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

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

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

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

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

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

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

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

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

.modern-hero::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;
}

.modern-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); }
}

/* Grid System */
.modern-grid {
 display: grid;
 gap: var(--space-lg);
}

.modern-grid-2 {
 grid-template-columns: repeat(2, 1fr);
}

.modern-grid-3 {
 grid-template-columns: repeat(3, 1fr);
}

.modern-grid-4 {
 grid-template-columns: repeat(4, 1fr);
}

.modern-grid-auto {
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Responsive Design */
@media (max-width: 768px) {
 .modern-container {
 padding: 0 var(--space-sm);
 }
 
 .modern-hero {
 padding: var(--space-2xl) 0;
 }
 
 .modern-feature-icon {
 width: 60px;
 height: 60px;
 font-size: 1.5rem;
 }
 
 .modern-card {
 margin-bottom: var(--space-md);
 }
 
 .modern-btn {
 padding: var(--space-sm) var(--space-lg);
 font-size: 0.875rem;
 }
 
 .modern-grid-2,
 .modern-grid-3,
 .modern-grid-4 {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 480px) {
 .modern-container {
 padding: 0 var(--space-xs);
 }
 
 .modern-card-body,
 .modern-card-header,
 .modern-card-footer {
 padding: var(--space-md);
 }
}

/* 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;
 }
 
 .modern-form-control {
 color: #e2e8f0;
 background: rgba(0, 0, 0, 0.2);
 }
 
 .modern-form-control::placeholder {
 color: rgba(255, 255, 255, 0.5);
 }
}

/* 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,
 .modern-btn,
 .modern-alert {
 background: white !important;
 color: black !important;
 box-shadow: none !important;
 }
}

/* Utility Classes */
.text-gradient {
 background: var(--primary-gradient);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.glass-effect {
 background: var(--glass-effect);
 backdrop-filter: blur(20px);
 border: 1px solid var(--glass-border);
}

.shadow-glow {
 box-shadow: var(--shadow-glow);
}

.shadow-hover {
 box-shadow: var(--shadow-hover);
}

.transition-fast {
 transition: var(--transition-fast);
}

.transition-normal {
 transition: var(--transition-normal);
}

.transition-slow {
 transition: var(--transition-slow);
}

.transition-bounce {
 transition: var(--transition-bounce);
}

.transition-elastic {
 transition: var(--transition-elastic);
}

/* Accessibility Features */
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
 
 .hero-bg-animation,
 .particle-bg,
 .neural-network-bg {
 animation: none !important;
 }
}

/* Focus Indicators */
.modern-btn:focus,
.modern-form-control:focus,
.nav-link:focus,
.dropdown-toggle:focus {
 outline: 2px solid var(--primary-color);
 outline-offset: 2px;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
 :root {
 --primary-color: #000000;
 --secondary-color: #ffffff;
 --text-color: #000000;
 --bg-color: #ffffff;
 }
}

/* Screen Reader Only Text */
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}