|
|
|
|
|
|
|
|
|
|
|
body { |
|
|
background: |
|
|
radial-gradient(ellipse at top left, rgba(0, 212, 255, 0.08), transparent 40%), |
|
|
radial-gradient(ellipse at bottom right, rgba(255, 0, 110, 0.06), transparent 40%), |
|
|
linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%) !important; |
|
|
background-attachment: fixed !important; |
|
|
color: #e0e6ed !important; |
|
|
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important; |
|
|
overflow-x: hidden !important; |
|
|
} |
|
|
|
|
|
|
|
|
body::before { |
|
|
content: '' !important; |
|
|
position: fixed !important; |
|
|
top: 0 !important; |
|
|
left: 0 !important; |
|
|
width: 100vw !important; |
|
|
height: 100vh !important; |
|
|
background-image: |
|
|
radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.15) 1px, transparent 1px), |
|
|
radial-gradient(circle at 80% 70%, rgba(255, 0, 110, 0.12) 1px, transparent 1px) !important; |
|
|
background-size: 150px 150px, 200px 200px !important; |
|
|
animation: subtleParticles 20s linear infinite !important; |
|
|
pointer-events: none !important; |
|
|
z-index: -1 !important; |
|
|
opacity: 0.4 !important; |
|
|
} |
|
|
|
|
|
@keyframes subtleParticles { |
|
|
0% { background-position: 0 0, 0 0; } |
|
|
100% { background-position: 150px 150px, -200px -200px; } |
|
|
} |
|
|
|
|
|
|
|
|
.site-header { |
|
|
background: #011329; |
|
|
box-shadow: 0 2px 12px #38bdf844; |
|
|
margin-bottom: 18px; |
|
|
position: relative; |
|
|
z-index: 10; |
|
|
padding-bottom: 0; |
|
|
} |
|
|
|
|
|
.header-inner { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
padding: 18px 32px 0 32px; |
|
|
position: relative; |
|
|
gap:0px; |
|
|
} |
|
|
|
|
|
.logo-cluster { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 18px; |
|
|
flex: 1 1 auto; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.logo-img-header { |
|
|
width: 54px; |
|
|
height: 54px; |
|
|
border-radius: 50%; |
|
|
background: #fff; |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.18); |
|
|
padding: 4px; |
|
|
margin-top: -6px; |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|
|
|
.py-detect-title-header { |
|
|
font-size: 2.1rem; |
|
|
font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif; |
|
|
font-weight: 900; |
|
|
letter-spacing: 6px; |
|
|
color: #38bdf8; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 2px; |
|
|
margin-bottom: 1.5vh; |
|
|
} |
|
|
|
|
|
.py-detect-title-header .py-letter.p { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.y { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-shape { color: #e3f6ff; background: #e3f6ff; text-shadow: 0 0 6px #38bdf8; box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff; border: 2px solid #23272b; width: 18px; height: 4px; display: inline-block; margin: 0 8px; border-radius: 2px; } |
|
|
.py-detect-title-header .py-letter.d { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.e { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.t { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.e2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.c { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.t2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; } |
|
|
|
|
|
.header-progress { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 14px; |
|
|
margin-right: 32px; |
|
|
margin-left: 92vh; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.pykara-analysis-label { |
|
|
color: #38bdf8; |
|
|
font-size: 1.1em; |
|
|
font-weight: 700; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
@keyframes progressBarGradientMove { |
|
|
0% { background-position: 0% 50%; } |
|
|
100% { background-position: 100% 50%; } |
|
|
} |
|
|
|
|
|
.pykara-progress-percentage { |
|
|
color: #38bdf8; |
|
|
font-size: 1.05em; |
|
|
font-weight: 700; |
|
|
margin-left: 4px; |
|
|
} |
|
|
|
|
|
|
|
|
.progress-container { |
|
|
background: rgba(26, 26, 46, 0.9) !important; |
|
|
backdrop-filter: blur(10px) !important; |
|
|
padding: 8px 24px !important; |
|
|
position: relative !important; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
background: linear-gradient(90deg, #00d4ff 0%, #06ffa5 50%, #ff006e 100%) !important; |
|
|
height: 6px !important; |
|
|
border-radius: 3px !important; |
|
|
position: relative !important; |
|
|
box-shadow: 0 0 10px rgba(0, 212, 255, 0.4) !important; |
|
|
} |
|
|
|
|
|
.progress-text { |
|
|
display: flex !important; |
|
|
justify-content: space-between !important; |
|
|
align-items: center !important; |
|
|
font-size: 0.8rem !important; |
|
|
color: #e0e6ed !important; |
|
|
margin-bottom: 4px !important; |
|
|
} |
|
|
|
|
|
.progress-ai { |
|
|
color: #06ffa5 !important; |
|
|
font-weight: 600 !important; |
|
|
} |
|
|
|
|
|
|
|
|
.section-navigation { |
|
|
background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.95)) !important; |
|
|
backdrop-filter: blur(15px) !important; |
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
padding: 16px 0 !important; |
|
|
position: relative !important; |
|
|
} |
|
|
|
|
|
.section-pills { |
|
|
display: flex !important; |
|
|
justify-content: center !important; |
|
|
gap: 16px !important; |
|
|
max-width: 1200px !important; |
|
|
margin: 0 auto !important; |
|
|
padding: 0 24px !important; |
|
|
} |
|
|
|
|
|
.section-pill { |
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important; |
|
|
border: 1px solid rgba(0, 212, 255, 0.3) !important; |
|
|
backdrop-filter: blur(10px) !important; |
|
|
padding: 12px 20px !important; |
|
|
border-radius: 12px !important; |
|
|
color: #e0e6ed !important; |
|
|
font-weight: 500 !important; |
|
|
font-size: 0.9rem !important; |
|
|
cursor: pointer !important; |
|
|
transition: all 0.3s ease !important; |
|
|
position: relative !important; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 8px !important; |
|
|
min-width: 150px !important; |
|
|
justify-content: center !important; |
|
|
} |
|
|
|
|
|
.section-pill:hover { |
|
|
border-color: rgba(0, 212, 255, 0.6) !important; |
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3) !important; |
|
|
transform: translateY(-2px) !important; |
|
|
} |
|
|
|
|
|
.section-pill.active { |
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(255, 0, 110, 0.1)) !important; |
|
|
border-color: #00d4ff !important; |
|
|
color: white !important; |
|
|
box-shadow: 0 0 25px rgba(0, 212, 255, 0.4) !important; |
|
|
transform: translateY(-3px) !important; |
|
|
} |
|
|
|
|
|
.section-pill::after { |
|
|
content: attr(data-step) !important; |
|
|
position: absolute !important; |
|
|
top: -8px !important; |
|
|
left: 12px !important; |
|
|
width: 20px !important; |
|
|
height: 20px !important; |
|
|
background: linear-gradient(135deg, #7209b7, #4cc9f0) !important; |
|
|
color: white !important; |
|
|
border-radius: 50% !important; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
justify-content: center !important; |
|
|
font-size: 0.7rem !important; |
|
|
font-weight: 700 !important; |
|
|
border: 2px solid rgba(26, 26, 46, 0.9) !important; |
|
|
} |
|
|
|
|
|
.section-pill.active::after { |
|
|
background: linear-gradient(135deg, #ff006e, #8338ec) !important; |
|
|
animation: activeStep 2s ease-in-out infinite !important; |
|
|
} |
|
|
|
|
|
@keyframes activeStep { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
} |
|
|
|
|
|
|
|
|
.subgroup-pills { |
|
|
background: linear-gradient(135deg, rgba(22, 33, 62, 0.9), rgba(26, 26, 46, 0.95)) !important; |
|
|
backdrop-filter: blur(15px) !important; |
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
padding: 16px 24px !important; |
|
|
display: flex !important; |
|
|
justify-content: center !important; |
|
|
flex-wrap: wrap !important; |
|
|
gap: 12px !important; |
|
|
max-width: 1200px !important; |
|
|
margin: 0 auto !important; |
|
|
} |
|
|
|
|
|
.subgroup-pills .pill { |
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important; |
|
|
border: 1px solid rgba(0, 212, 255, 0.25) !important; |
|
|
backdrop-filter: blur(8px) !important; |
|
|
padding: 8px 16px !important; |
|
|
border-radius: 20px !important; |
|
|
color: #e0e6ed !important; |
|
|
font-weight: 500 !important; |
|
|
font-size: 0.85rem !important; |
|
|
cursor: pointer !important; |
|
|
transition: all 0.3s ease !important; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 6px !important; |
|
|
min-width: 120px !important; |
|
|
justify-content: center !important; |
|
|
} |
|
|
|
|
|
.subgroup-pills .pill:hover { |
|
|
border-color: rgba(6, 255, 165, 0.6) !important; |
|
|
box-shadow: 0 0 15px rgba(6, 255, 165, 0.3) !important; |
|
|
transform: translateY(-1px) !important; |
|
|
} |
|
|
|
|
|
.subgroup-pills .pill.active { |
|
|
background: linear-gradient(135deg, rgba(255, 0, 110, 0.2), rgba(131, 56, 236, 0.15)) !important; |
|
|
border-color: #ff006e !important; |
|
|
color: white !important; |
|
|
box-shadow: 0 0 20px rgba(255, 0, 110, 0.4) !important; |
|
|
transform: translateY(-2px) !important; |
|
|
} |
|
|
|
|
|
|
|
|
.investigation-container { |
|
|
background: transparent !important; |
|
|
padding: 24px 0 !important; |
|
|
max-width: 100vw !important; |
|
|
width: 96vw !important; |
|
|
margin: 0 !important; |
|
|
min-height: calc(100vh - 400px) !important; |
|
|
position: relative !important; |
|
|
left: 50% !important; |
|
|
right: 50% !important; |
|
|
margin-left: -48vw !important; |
|
|
margin-right: -50vw !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
|
|
|
.form-card { |
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.92)) !important; |
|
|
backdrop-filter: blur(20px) !important; |
|
|
border: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
border-radius: 0 !important; |
|
|
box-shadow: |
|
|
0 8px 32px rgba(0, 0, 0, 0.1), |
|
|
0 0 0 1px rgba(255, 255, 255, 0.2) !important; |
|
|
color: #2C3E50 !important; |
|
|
position: relative !important; |
|
|
overflow: visible !important; |
|
|
margin: 0 !important; |
|
|
width: 100% !important; |
|
|
max-width: 100% !important; |
|
|
padding: 0 24px !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
.form-card::before { |
|
|
content: '' !important; |
|
|
position: absolute !important; |
|
|
top: 0 !important; |
|
|
left: -100% !important; |
|
|
width: 100% !important; |
|
|
height: 2px !important; |
|
|
background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent) !important; |
|
|
animation: cardScan 4s linear infinite !important; |
|
|
} |
|
|
|
|
|
@keyframes cardScan { |
|
|
0% { left: -100%; } |
|
|
100% { left: 100%; } |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 0, 110, 0.05)) !important; |
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
padding: 16px 20px !important; |
|
|
border-radius: 0 !important; |
|
|
margin: 0 -24px !important; |
|
|
margin-bottom: 0 !important; |
|
|
} |
|
|
|
|
|
.card-header h2 { |
|
|
background: linear-gradient(45deg, #00d4ff, #ff006e) !important; |
|
|
-webkit-background-clip: text !important; |
|
|
-webkit-text-fill-color: transparent !important; |
|
|
background-clip: text !important; |
|
|
font-size: 1.1rem !important; |
|
|
font-weight: 700 !important; |
|
|
margin: 0 !important; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 8px !important; |
|
|
} |
|
|
|
|
|
.card-content { |
|
|
padding: 20px 0 !important; |
|
|
background: rgba(255, 255, 255, 0.98) !important; |
|
|
color: #2C3E50 !important; |
|
|
width: 100% !important; |
|
|
max-width: 100% !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
.section-description { |
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(6, 255, 165, 0.08)) !important; |
|
|
border: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
border-radius: 8px !important; |
|
|
padding: 12px 16px !important; |
|
|
margin-bottom: 20px !important; |
|
|
font-size: 0.85rem !important; |
|
|
color: #2C3E50 !important; |
|
|
border-left: 4px solid #00d4ff !important; |
|
|
width: 100% !important; |
|
|
max-width: 100% !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
|
|
|
.fields-grid { |
|
|
display: grid !important; |
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; |
|
|
gap: 16px !important; |
|
|
margin-top: 16px !important; |
|
|
width: 100% !important; |
|
|
max-width: 100% !important; |
|
|
box-sizing: border-box !important; |
|
|
padding: 0 !important; |
|
|
overflow: visible !important; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.field-container { |
|
|
background: rgba(255, 255, 255, 0.9) !important; |
|
|
border: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
border-radius: 8px !important; |
|
|
padding: 12px !important; |
|
|
transition: all 0.3s ease !important; |
|
|
position: relative !important; |
|
|
overflow: visible !important; |
|
|
z-index: 1; |
|
|
width: 100% !important; |
|
|
max-width: 100% !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
.field-container:hover { |
|
|
border-color: rgba(0, 212, 255, 0.4) !important; |
|
|
box-shadow: 0 0 15px rgba(0, 212, 255, 0.1) !important; |
|
|
transform: translateY(-1px) !important; |
|
|
} |
|
|
|
|
|
.field-label { |
|
|
color: #2C3E50 !important; |
|
|
font-weight: 600 !important; |
|
|
font-size: 0.85rem !important; |
|
|
margin-bottom: 6px !important; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 6px !important; |
|
|
width: 100% !important; |
|
|
} |
|
|
|
|
|
.field-input { |
|
|
width: 100% !important; |
|
|
padding: 10px 12px !important; |
|
|
border: 1px solid #E1E8ED !important; |
|
|
border-radius: 6px !important; |
|
|
background: white !important; |
|
|
color: #2C3E50 !important; |
|
|
font-size: 0.85rem !important; |
|
|
transition: all 0.3s ease !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
.field-input:focus { |
|
|
border-color: #00d4ff !important; |
|
|
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important; |
|
|
outline: none !important; |
|
|
} |
|
|
|
|
|
.field-input::placeholder { |
|
|
color: #7F8C8D !important; |
|
|
} |
|
|
|
|
|
|
|
|
.card-actions { |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 12px !important; |
|
|
justify-content: flex-start !important; |
|
|
width: 100% !important; |
|
|
flex-wrap: wrap !important; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.card-actions-spacer { |
|
|
flex: 1 1 auto; |
|
|
} |
|
|
|
|
|
.field-selector-container { |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
justify-content: flex-end !important; |
|
|
gap: 12px !important; |
|
|
width: 100% !important; |
|
|
} |
|
|
|
|
|
.modern-field-selector-btn { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: flex-end; |
|
|
margin-left: auto; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.field-selector-btn.modern-selector-animated { |
|
|
border-radius: 24px; |
|
|
background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%); |
|
|
color: #fff; |
|
|
font-weight: 700; |
|
|
font-size: 1rem; |
|
|
padding: 10px 22px; |
|
|
border: none; |
|
|
box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
cursor: pointer; |
|
|
transition: background 0.18s, box-shadow 0.18s, transform 0.18s; |
|
|
outline: none; |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
animation: selectorPulse 2s infinite alternate; |
|
|
} |
|
|
|
|
|
.field-selector-btn.modern-selector-animated:hover, |
|
|
.field-selector-btn.modern-selector-animated.active { |
|
|
background: linear-gradient(135deg, #06ffa5 0%, #00d4ff 60%, #ff006e 100%); |
|
|
box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); |
|
|
transform: scale(1.04); |
|
|
} |
|
|
|
|
|
@keyframes selectorPulse { |
|
|
0% { box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10); } |
|
|
100% { box-shadow: 0 6px 24px rgba(0, 212, 255, 0.18); } |
|
|
} |
|
|
|
|
|
.field-selector-btn.modern-selector-animated i { |
|
|
font-size: 1.2em; |
|
|
} |
|
|
|
|
|
|
|
|
.field-container.filled { |
|
|
border-color: #06ffa5 !important; |
|
|
box-shadow: 0 0 0 2px rgba(6,255,165,0.12); |
|
|
transition: border-color 0.25s, box-shadow 0.25s; |
|
|
} |
|
|
|
|
|
|
|
|
body { |
|
|
overflow-x: hidden !important; |
|
|
width: 100vw !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
html { |
|
|
overflow-x: hidden !important; |
|
|
width: 100vw !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
|
|
|
.site-header, |
|
|
.section-navigation, |
|
|
.subgroup-pills, |
|
|
.page-indicator-container { |
|
|
width: 100vw !important; |
|
|
max-width: 100vw !important; |
|
|
margin: 0 !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.investigation-container { |
|
|
padding: 16px 0 !important; |
|
|
margin-left: -50vw !important; |
|
|
margin-right: -50vw !important; |
|
|
left: 50% !important; |
|
|
right: 50% !important; |
|
|
} |
|
|
|
|
|
.form-card { |
|
|
padding: 0 16px !important; |
|
|
border-radius: 0 !important; |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
margin: 0 -16px !important; |
|
|
padding: 12px 16px !important; |
|
|
} |
|
|
|
|
|
.fields-grid { |
|
|
grid-template-columns: 1fr !important; |
|
|
gap: 12px !important; |
|
|
} |
|
|
|
|
|
.card-actions { |
|
|
flex-direction: column !important; |
|
|
align-items: stretch !important; |
|
|
gap: 8px !important; |
|
|
} |
|
|
|
|
|
.field-selector-container { |
|
|
width: 100% !important; |
|
|
} |
|
|
|
|
|
.field-selector-btn { |
|
|
width: 100% !important; |
|
|
justify-content: center !important; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 480px) { |
|
|
.investigation-container { |
|
|
padding: 12px 0 !important; |
|
|
} |
|
|
|
|
|
.form-card { |
|
|
padding: 0 12px !important; |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
margin: 0 -12px !important; |
|
|
padding: 10px 12px !important; |
|
|
} |
|
|
|
|
|
.card-content { |
|
|
padding: 16px 0 !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.autosave-indicator.crime-section-btn { |
|
|
background: linear-gradient(135deg, #E8F4FD 0%, #F0F8FF 100%) !important; |
|
|
border: 2px solid #4A90E2 !important; |
|
|
color: #357ABD !important; |
|
|
font-weight: 600 !important; |
|
|
border-radius: 20px !important; |
|
|
box-shadow: 0 2px 6px rgba(74, 144, 226, 0.08) !important; |
|
|
padding: 10px 20px !important; |
|
|
transition: all 0.3s; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 8px !important; |
|
|
} |
|
|
|
|
|
.autosave-indicator.crime-section-btn:hover { |
|
|
border-color: #357ABD !important; |
|
|
color: #fff !important; |
|
|
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important; |
|
|
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25) !important; |
|
|
} |
|
|
|
|
|
.autosave-right { |
|
|
margin-left: auto !important; |
|
|
margin-right: 0 !important; |
|
|
} |
|
|
|
|
|
.autosave-left { |
|
|
margin-right: auto !important; |
|
|
margin-left: 0 !important; |
|
|
} |
|
|
|
|
|
.header-actions { |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 16px !important; |
|
|
} |
|
|
|
|
|
.header-actions.autosave-right { |
|
|
display: flex !important; |
|
|
justify-content: flex-end !important; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.autosave-indicator { |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 8px !important; |
|
|
padding: 8px 16px !important; |
|
|
background: rgba(255, 255, 255, 0.15) !important; |
|
|
border: 1px solid rgba(255, 255, 255, 0.2) !important; |
|
|
border-radius: 8px !important; |
|
|
font-size: 0.875rem !important; |
|
|
color: white !important; |
|
|
font-weight: 500 !important; |
|
|
backdrop-filter: blur(10px) !important; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.autosave-indicator.saving { |
|
|
background: rgba(255, 255, 255, 0.25) !important; |
|
|
animation: pulse 1.5s ease-in-out infinite !important; |
|
|
} |
|
|
|
|
|
.main-section-pill { |
|
|
font-size: 1.25rem !important; |
|
|
padding: 20px 36px !important; |
|
|
min-width: 200px !important; |
|
|
min-height: 64px !important; |
|
|
border-width: 2.5px !important; |
|
|
box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18) !important; |
|
|
} |
|
|
|
|
|
.main-section-pill i { |
|
|
font-size: 2rem !important; |
|
|
} |
|
|
|
|
|
.main-section-pill span { |
|
|
font-size: 1.25em !important; |
|
|
font-weight: 700 !important; |
|
|
} |
|
|
|
|
|
|
|
|
.modern-nav-btns { |
|
|
display: flex; |
|
|
justify-content: flex-end; |
|
|
gap: 18px; |
|
|
margin-top: 32px; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.modern-round-btn { |
|
|
width: 56px; |
|
|
height: 56px; |
|
|
border-radius: 50%; |
|
|
border: none; |
|
|
background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%); |
|
|
color: #fff; |
|
|
font-size: 2rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18), 0 1.5px 6px rgba(0,0,0,0.08); |
|
|
cursor: pointer; |
|
|
transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s; |
|
|
outline: none; |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
.modern-round-btn:active { |
|
|
transform: scale(0.93); |
|
|
box-shadow: 0 2px 8px rgba(0, 212, 255, 0.12); |
|
|
} |
|
|
|
|
|
.modern-round-btn:disabled { |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.next-btn-animated { |
|
|
animation: bounceRight 1.2s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes bounceRight { |
|
|
0% { transform: translateX(0); } |
|
|
60% { transform: translateX(6px) scale(1.08); } |
|
|
100% { transform: translateX(0); } |
|
|
} |
|
|
|
|
|
.submit-btn-animated { |
|
|
animation: pulseSend 1.5s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes pulseSend { |
|
|
0% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); } |
|
|
60% { box-shadow: 0 8px 32px rgba(255, 0, 110, 0.22); } |
|
|
100% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); } |
|
|
} |
|
|
|
|
|
.modern-round-btn i { |
|
|
font-size: 2rem; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
|
|
|
.modern-floating-nav-btn { |
|
|
position: fixed; |
|
|
bottom: 95px; |
|
|
right: 32px; |
|
|
z-index: 2000; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 16px; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.modern-floating-nav-btn .modern-round-btn { |
|
|
pointer-events: auto; |
|
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
.modern-floating-nav-btn { |
|
|
bottom: 16px; |
|
|
right: 16px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.compact-card-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
padding: 8px 16px !important; |
|
|
min-height: 0; |
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(255, 0, 110, 0.04)) !important; |
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important; |
|
|
margin: 0 -24px !important; |
|
|
} |
|
|
|
|
|
.card-header-main { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.compact-title { |
|
|
font-size: 1.1rem !important; |
|
|
font-weight: 700 !important; |
|
|
margin: 0 !important; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
color: #00d4ff !important; |
|
|
background: none !important; |
|
|
} |
|
|
|
|
|
.compact-title i { |
|
|
font-size: 1.1em; |
|
|
color: #00d4ff; |
|
|
} |
|
|
|
|
|
.field-counter.compact-field-counter { |
|
|
font-size: 0.95em !important; |
|
|
font-weight: 600 !important; |
|
|
color: #222 !important; |
|
|
background: none !important; |
|
|
padding: 0 0 0 8px !important; |
|
|
box-shadow: none !important; |
|
|
border-radius: 0 !important; |
|
|
text-shadow: none !important; |
|
|
} |
|
|
|
|
|
.modern-field-selector-btn.compact-selector-btn { |
|
|
margin-left: 16px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
height: 32px; |
|
|
} |
|
|
|
|
|
.field-selector-btn.modern-selector-animated.compact-selector-btn-inner { |
|
|
font-size: 0.95rem; |
|
|
padding: 4px 14px; |
|
|
min-width: 0; |
|
|
height: 32px; |
|
|
border-radius: 16px; |
|
|
gap: 6px; |
|
|
} |
|
|
|
|
|
.field-selector-btn.modern-selector-animated.compact-selector-btn-inner i { |
|
|
font-size: 1em; |
|
|
} |
|
|
|
|
|
.field-selector-counter { |
|
|
font-size: 0.95em; |
|
|
font-weight: 600; |
|
|
margin-left: 2px; |
|
|
} |
|
|
|
|
|
|
|
|
.modern-field-selector-popup { |
|
|
position: absolute; |
|
|
top: 110%; |
|
|
right: 0; |
|
|
min-width: 260px; |
|
|
background: #fff; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 8px 32px rgba(0,212,255,0.12); |
|
|
z-index: 3000 !important; |
|
|
padding: 18px 20px 16px 20px; |
|
|
animation: popupFadeIn 0.25s cubic-bezier(.4,2,.6,1); |
|
|
} |
|
|
|
|
|
.modern-field-selector-btn { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
@keyframes popupFadeIn { |
|
|
from { opacity: 0; transform: translateY(-10px) scale(0.98); } |
|
|
to { opacity: 1; transform: translateY(0) scale(1); } |
|
|
} |
|
|
|
|
|
.popup-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
.popup-header span { |
|
|
font-weight: 700; |
|
|
font-size: 1.1em; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
color: #00d4ff; |
|
|
} |
|
|
|
|
|
.popup-header i { |
|
|
color: #00d4ff; |
|
|
} |
|
|
|
|
|
.popup-close-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.2em; |
|
|
color: #ff006e; |
|
|
cursor: pointer; |
|
|
transition: color 0.18s; |
|
|
} |
|
|
.popup-close-btn:hover { |
|
|
color: #00d4ff; |
|
|
} |
|
|
|
|
|
.popup-fields-list { |
|
|
max-height: 220px; |
|
|
overflow: auto; |
|
|
margin-bottom: 16px; |
|
|
padding-right: 2px; |
|
|
} |
|
|
|
|
|
.popup-field-row { |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.popup-field-label { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
font-size: 1em; |
|
|
cursor: pointer; |
|
|
user-select: none; |
|
|
font-weight: 500; |
|
|
color: #222; |
|
|
border-radius: 6px; |
|
|
padding: 2px 4px; |
|
|
transition: background 0.15s; |
|
|
} |
|
|
.popup-field-label:hover { |
|
|
background: #f0faff; |
|
|
} |
|
|
|
|
|
.popup-field-label input[type="checkbox"] { |
|
|
accent-color: #00d4ff; |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
border-radius: 4px; |
|
|
border: 1.5px solid #00d4ff; |
|
|
margin: 0; |
|
|
transition: box-shadow 0.15s; |
|
|
} |
|
|
|
|
|
.popup-field-label input[type="checkbox"]:checked { |
|
|
box-shadow: 0 0 0 2px #06ffa5; |
|
|
} |
|
|
|
|
|
.popup-field-text { |
|
|
font-weight: 500; |
|
|
color: #222; |
|
|
} |
|
|
|
|
|
.popup-actions { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.popup-action-btn { |
|
|
flex: 1; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
padding: 8px 0; |
|
|
font-weight: 600; |
|
|
font-size: 1em; |
|
|
cursor: pointer; |
|
|
transition: background 0.18s, color 0.18s, box-shadow 0.18s; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 6px; |
|
|
} |
|
|
|
|
|
.popup-action-btn.clear-btn { |
|
|
background: #f8f8f8; |
|
|
color: #ff006e; |
|
|
} |
|
|
.popup-action-btn.clear-btn:hover { |
|
|
background: #ffe6f0; |
|
|
color: #d1005b; |
|
|
} |
|
|
|
|
|
.popup-action-btn.selectall-btn { |
|
|
background: #f8f8f8; |
|
|
color: #06ffa5; |
|
|
} |
|
|
.popup-action-btn.selectall-btn:hover { |
|
|
background: #e6fff7; |
|
|
color: #00d4ff; |
|
|
} |
|
|
|
|
|
.popup-action-btn.save-btn { |
|
|
background: linear-gradient(135deg,#00d4ff,#06ffa5,#ff006e); |
|
|
color: #fff; |
|
|
box-shadow: 0 2px 8px rgba(0,212,255,0.10); |
|
|
} |
|
|
.popup-action-btn.save-btn:hover { |
|
|
background: linear-gradient(135deg,#06ffa5,#00d4ff,#ff006e); |
|
|
color: #fff; |
|
|
box-shadow: 0 4px 16px rgba(0,212,255,0.18); |
|
|
} |
|
|
|
|
|
|
|
|
.form-card, |
|
|
.investigation-container { |
|
|
overflow: visible !important; |
|
|
} |
|
|
|
|
|
.modern-field-selector-popup { |
|
|
z-index: 3000 !important; |
|
|
} |
|
|
|
|
|
.info-btn, .glossy-info-btn { |
|
|
opacity: 0.5; |
|
|
background: rgba(10, 30, 60, 0.35); |
|
|
border: 2px solid #00d4ff33; |
|
|
box-shadow: none; |
|
|
} |
|
|
.info-btn:hover, .glossy-info-btn:hover { |
|
|
opacity: 0.8; |
|
|
background: rgba(10, 30, 60, 0.55); |
|
|
border: 2px solid #00d4ff; |
|
|
} |
|
|
.info-btn i, .glossy-info-btn i { |
|
|
color: #0a1e3c; |
|
|
font-size: 0.95em; |
|
|
text-shadow: none; |
|
|
} |
|
|
|
|
|
.field-help { |
|
|
position: absolute !important; |
|
|
left: 36px; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
min-width: 180px; |
|
|
max-width: 260px; |
|
|
background: rgba(10, 30, 60, 0.85); |
|
|
color: #fff; |
|
|
border-radius: 10px; |
|
|
border: 2px solid #00d4ff; |
|
|
box-shadow: 0 4px 24px rgba(0,212,255,0.10); |
|
|
padding: 10px 16px 10px 16px; |
|
|
z-index: 4000; |
|
|
font-size: 0.97em; |
|
|
font-weight: 500; |
|
|
animation: fadeInInfoModal 0.18s cubic-bezier(.4,2,.6,1); |
|
|
pointer-events: auto; |
|
|
white-space: pre-line; |
|
|
} |
|
|
@keyframes fadeInInfoModal { |
|
|
from { opacity: 0; transform: translateY(-50%) scale(0.98); } |
|
|
to { opacity: 1; transform: translateY(-50%) scale(1); } |
|
|
} |
|
|
.field-help strong { |
|
|
color: #00d4ff; |
|
|
font-weight: 700; |
|
|
font-size: 1.05em; |
|
|
display: block; |
|
|
margin-bottom: 2px; |
|
|
} |
|
|
|
|
|
.file-upload-block { |
|
|
border: 2px solid #00d4ff; |
|
|
border-radius: 18px; |
|
|
background: rgba(240, 255, 255, 0.45); |
|
|
box-shadow: 0 2px 16px rgba(0,212,255,0.08); |
|
|
padding: 18px 18px 12px 18px; |
|
|
margin-bottom: 12px; |
|
|
position: relative; |
|
|
animation: fileGlow 2.2s infinite alternate; |
|
|
transition: box-shadow 0.22s, border-color 0.22s; |
|
|
} |
|
|
@keyframes fileGlow { |
|
|
0% { box-shadow: 0 2px 16px rgba(0,212,255,0.08), 0 0 0 0 #06ffa5; border-color: #00d4ff; } |
|
|
60% { box-shadow: 0 6px 32px rgba(0,212,255,0.18), 0 0 0 4px #06ffa5; border-color: #06ffa5; } |
|
|
100% { box-shadow: 0 2px 16px rgba(0,212,255,0.08), 0 0 0 0 #00d4ff; border-color: #00d4ff; } |
|
|
} |
|
|
|
|
|
.file-upload-block .file-drop-zone { |
|
|
background: rgba(255,255,255,0.85); |
|
|
border: 2px dashed #00d4ff; |
|
|
border-radius: 14px; |
|
|
padding: 18px 0 12px 0; |
|
|
text-align: center; |
|
|
transition: background 0.18s, border-color 0.18s, box-shadow 0.18s; |
|
|
cursor: pointer; |
|
|
margin-bottom: 8px; |
|
|
position: relative; |
|
|
} |
|
|
.file-upload-block .file-drop-zone:hover, .file-upload-block .file-drop-zone.drag-over { |
|
|
background: rgba(0,212,255,0.08); |
|
|
border-color: #06ffa5; |
|
|
box-shadow: 0 4px 24px rgba(0,212,255,0.18); |
|
|
} |
|
|
|
|
|
.file-upload-block .drop-zone-content i { |
|
|
color: #00d4ff; |
|
|
font-size: 2.2em; |
|
|
margin-bottom: 6px; |
|
|
animation: fileIconBounce 1.4s infinite alternate; |
|
|
filter: drop-shadow(0 0 8px #06ffa5); |
|
|
transition: color 0.18s; |
|
|
} |
|
|
@keyframes fileIconBounce { |
|
|
0% { transform: translateY(0) scale(1); } |
|
|
60% { transform: translateY(-8px) scale(1.12); color: #06ffa5; } |
|
|
100% { transform: translateY(0) scale(1); } |
|
|
} |
|
|
|
|
|
.file-upload-block .drop-zone-content p { |
|
|
color: #222; |
|
|
font-size: 1.08em; |
|
|
font-weight: 500; |
|
|
margin: 0; |
|
|
opacity: 0.85; |
|
|
} |
|
|
|
|
|
.file-upload-block .file-input { |
|
|
opacity: 0; |
|
|
position: absolute; |
|
|
left: 0; top: 0; width: 100%; height: 100%; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
|
|
|
.infopage-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
background: #011329; |
|
|
padding: 18px 32px 18px 32px; |
|
|
border-radius: 0 0 18px 18px; |
|
|
box-shadow: 0 2px 12px #38bdf844; |
|
|
margin-bottom: 18px; |
|
|
position: relative; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.header-left { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 18px; |
|
|
} |
|
|
|
|
|
.logo-img-header { |
|
|
width: 54px; |
|
|
height: 54px; |
|
|
border-radius: 50%; |
|
|
background: #fff; |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.18); |
|
|
padding: 4px; |
|
|
margin-top: -6px; |
|
|
margin-bottom: 1vh; |
|
|
} |
|
|
|
|
|
.py-detect-title-header { |
|
|
font-size: 2.1rem; |
|
|
font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif; |
|
|
font-weight: 900; |
|
|
letter-spacing: 6px; |
|
|
color: #38bdf8; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 2px; |
|
|
margin-bottom: 1.5vh; |
|
|
} |
|
|
|
|
|
.py-detect-title-header .py-letter.p { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.y { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-shape { color: #e3f6ff; background: #e3f6ff; text-shadow: 0 0 6px #38bdf8; box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff; border: 2px solid #23272b; width: 18px; height: 4px; display: inline-block; margin: 0 8px; border-radius: 2px; } |
|
|
.py-detect-title-header .py-letter.d { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.e { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.t { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.e2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.c { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; } |
|
|
.py-detect-title-header .py-letter.t2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; } |
|
|
|
|
|
.header-right { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 14px; |
|
|
} |
|
|
|
|
|
.pykara-analysis-label { |
|
|
color: #38bdf8; |
|
|
font-size: 1.1em; |
|
|
font-weight: 700; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.pykara-progress-bar { |
|
|
width: 186px; |
|
|
height: 6px; |
|
|
background: #e3f6ff; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 2px 8px #38bdf844, 0 0 12px #38bdf8aa; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.pykara-progress-bar-inner { |
|
|
height: 100%; |
|
|
background: linear-gradient(270deg, #38bdf8, #06ffa5, #ff006e, #38bdf8); |
|
|
background-size: 400% 100%; |
|
|
border-radius: 8px 0 0 8px; |
|
|
transition: width 0.4s cubic-bezier(.4,2,.6,1); |
|
|
animation: progressBarGradientMove 2.5s linear infinite; |
|
|
box-shadow: 0 0 16px #38bdf8cc, 0 0 8px #06ffa5aa; |
|
|
} |
|
|
|
|
|
@keyframes progressBarGradientMove { |
|
|
0% { background-position: 0% 50%; } |
|
|
100% { background-position: 100% 50%; } |
|
|
} |
|
|
|
|
|
.pykara-progress-percentage { |
|
|
color: #38bdf8; |
|
|
font-size: 1.05em; |
|
|
font-weight: 700; |
|
|
margin-left: 4px; |
|
|
} |
|
|
|
|
|
|
|
|
.progress-container { |
|
|
background: rgba(26, 26, 46, 0.9) !important; |
|
|
backdrop-filter: blur(10px) !important; |
|
|
padding: 8px 24px !important; |
|
|
position: relative !important; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
background: linear-gradient(90deg, #00d4ff 0%, #06ffa5 50%, #ff006e 100%) !important; |
|
|
height: 6px !important; |
|
|
border-radius: 3px !important; |
|
|
position: relative !important; |
|
|
box-shadow: 0 0 10px rgba(0, 212, 255, 0.4) !important; |
|
|
} |
|
|
|
|
|
.progress-text { |
|
|
display: flex !important; |
|
|
justify-content: space-between !important; |
|
|
align-items: center !important; |
|
|
font-size: 0.8rem !important; |
|
|
color: #e0e6ed !important; |
|
|
margin-bottom: 4px !important; |
|
|
} |
|
|
|
|
|
.progress-ai { |
|
|
color: #06ffa5 !important; |
|
|
font-weight: 600 !important; |
|
|
} |
|
|
|
|
|
|
|
|
.section-navigation { |
|
|
background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.95)) !important; |
|
|
backdrop-filter: blur(15px) !important; |
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
padding: 16px 0 !important; |
|
|
position: relative !important; |
|
|
} |
|
|
|
|
|
.section-pills { |
|
|
display: flex !important; |
|
|
justify-content: center !important; |
|
|
gap: 16px !important; |
|
|
max-width: 1200px !important; |
|
|
margin: 0 auto !important; |
|
|
padding: 0 24px !important; |
|
|
} |
|
|
|
|
|
.section-pill { |
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important; |
|
|
border: 1px solid rgba(0, 212, 255, 0.3) !important; |
|
|
backdrop-filter: blur(10px) !important; |
|
|
padding: 12px 20px !important; |
|
|
border-radius: 12px !important; |
|
|
color: #e0e6ed !important; |
|
|
font-weight: 500 !important; |
|
|
font-size: 0.9rem !important; |
|
|
cursor: pointer !important; |
|
|
transition: all 0.3s ease !important; |
|
|
position: relative !important; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 8px !important; |
|
|
min-width: 150px !important; |
|
|
justify-content: center !important; |
|
|
} |
|
|
|
|
|
.section-pill:hover { |
|
|
border-color: rgba(0, 212, 255, 0.6) !important; |
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3) !important; |
|
|
transform: translateY(-2px) !important; |
|
|
} |
|
|
|
|
|
.section-pill.active { |
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(255, 0, 110, 0.1)) !important; |
|
|
border-color: #00d4ff !important; |
|
|
color: white !important; |
|
|
box-shadow: 0 0 25px rgba(0, 212, 255, 0.4) !important; |
|
|
transform: translateY(-3px) !important; |
|
|
} |
|
|
|
|
|
.section-pill::after { |
|
|
content: attr(data-step) !important; |
|
|
position: absolute !important; |
|
|
top: -8px !important; |
|
|
left: 12px !important; |
|
|
width: 20px !important; |
|
|
height: 20px !important; |
|
|
background: linear-gradient(135deg, #7209b7, #4cc9f0) !important; |
|
|
color: white !important; |
|
|
border-radius: 50% !important; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
justify-content: center !important; |
|
|
font-size: 0.7rem !important; |
|
|
font-weight: 700 !important; |
|
|
border: 2px solid rgba(26, 26, 46, 0.9) !important; |
|
|
} |
|
|
|
|
|
.section-pill.active::after { |
|
|
background: linear-gradient(135deg, #ff006e, #8338ec) !important; |
|
|
animation: activeStep 2s ease-in-out infinite !important; |
|
|
} |
|
|
|
|
|
@keyframes activeStep { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
} |
|
|
|
|
|
|
|
|
.subgroup-pills { |
|
|
background: linear-gradient(135deg, rgba(22, 33, 62, 0.9), rgba(26, 26, 46, 0.95)) !important; |
|
|
backdrop-filter: blur(15px) !important; |
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
padding: 16px 24px !important; |
|
|
display: flex !important; |
|
|
justify-content: center !important; |
|
|
flex-wrap: wrap !important; |
|
|
gap: 12px !important; |
|
|
max-width: 1200px !important; |
|
|
margin: 0 auto !important; |
|
|
} |
|
|
|
|
|
.subgroup-pills .pill { |
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important; |
|
|
border: 1px solid rgba(0, 212, 255, 0.25) !important; |
|
|
backdrop-filter: blur(8px) !important; |
|
|
padding: 8px 16px !important; |
|
|
border-radius: 20px !important; |
|
|
color: #e0e6ed !important; |
|
|
font-weight: 500 !important; |
|
|
font-size: 0.85rem !important; |
|
|
cursor: pointer !important; |
|
|
transition: all 0.3s ease !important; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 6px !important; |
|
|
min-width: 120px !important; |
|
|
justify-content: center !important; |
|
|
} |
|
|
|
|
|
.subgroup-pills .pill:hover { |
|
|
border-color: rgba(6, 255, 165, 0.6) !important; |
|
|
box-shadow: 0 0 15px rgba(6, 255, 165, 0.3) !important; |
|
|
transform: translateY(-1px) !important; |
|
|
} |
|
|
|
|
|
.subgroup-pills .pill.active { |
|
|
background: linear-gradient(135deg, rgba(255, 0, 110, 0.2), rgba(131, 56, 236, 0.15)) !important; |
|
|
border-color: #ff006e !important; |
|
|
color: white !important; |
|
|
box-shadow: 0 0 20px rgba(255, 0, 110, 0.4) !important; |
|
|
transform: translateY(-2px) !important; |
|
|
} |
|
|
|
|
|
|
|
|
.investigation-container { |
|
|
background: transparent !important; |
|
|
padding: 24px 0 !important; |
|
|
max-width: 100vw !important; |
|
|
width: 96vw !important; |
|
|
margin: 0 !important; |
|
|
min-height: calc(100vh - 400px) !important; |
|
|
position: relative !important; |
|
|
left: 50% !important; |
|
|
right: 50% !important; |
|
|
margin-left: -48vw !important; |
|
|
margin-right: -50vw !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
|
|
|
.form-card { |
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.92)) !important; |
|
|
backdrop-filter: blur(20px) !important; |
|
|
border: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
border-radius: 0 !important; |
|
|
box-shadow: |
|
|
0 8px 32px rgba(0, 0, 0, 0.1), |
|
|
0 0 0 1px rgba(255, 255, 255, 0.2) !important; |
|
|
color: #2C3E50 !important; |
|
|
position: relative !important; |
|
|
overflow: visible !important; |
|
|
margin: 0 !important; |
|
|
width: 100% !important; |
|
|
max-width: 100% !important; |
|
|
padding: 0 24px !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
.form-card::before { |
|
|
content: '' !important; |
|
|
position: absolute !important; |
|
|
top: 0 !important; |
|
|
left: -100% !important; |
|
|
width: 100% !important; |
|
|
height: 2px !important; |
|
|
background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent) !important; |
|
|
animation: cardScan 4s linear infinite !important; |
|
|
} |
|
|
|
|
|
@keyframes cardScan { |
|
|
0% { left: -100%; } |
|
|
100% { left: 100%; } |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 0, 110, 0.05)) !important; |
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
padding: 16px 20px !important; |
|
|
border-radius: 0 !important; |
|
|
margin: 0 -24px !important; |
|
|
margin-bottom: 0 !important; |
|
|
} |
|
|
|
|
|
.card-header h2 { |
|
|
background: linear-gradient(45deg, #00d4ff, #ff006e) !important; |
|
|
-webkit-background-clip: text !important; |
|
|
-webkit-text-fill-color: transparent !important; |
|
|
background-clip: text !important; |
|
|
font-size: 1.1rem !important; |
|
|
font-weight: 700 !important; |
|
|
margin: 0 !important; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 8px !important; |
|
|
} |
|
|
|
|
|
.card-content { |
|
|
padding: 20px 0 !important; |
|
|
background: rgba(255, 255, 255, 0.98) !important; |
|
|
color: #2C3E50 !important; |
|
|
width: 100% !important; |
|
|
max-width: 100% !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
.section-description { |
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(6, 255, 165, 0.08)) !important; |
|
|
border: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
border-radius: 8px !important; |
|
|
padding: 12px 16px !important; |
|
|
margin-bottom: 20px !important; |
|
|
font-size: 0.85rem !important; |
|
|
color: #2C3E50 !important; |
|
|
border-left: 4px solid #00d4ff !important; |
|
|
width: 100% !important; |
|
|
max-width: 100% !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
|
|
|
.fields-grid { |
|
|
display: grid !important; |
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; |
|
|
gap: 16px !important; |
|
|
margin-top: 16px !important; |
|
|
width: 100% !important; |
|
|
max-width: 100% !important; |
|
|
box-sizing: border-box !important; |
|
|
padding: 0 !important; |
|
|
overflow: visible !important; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.field-container { |
|
|
background: rgba(255, 255, 255, 0.9) !important; |
|
|
border: 1px solid rgba(0, 212, 255, 0.2) !important; |
|
|
border-radius: 8px !important; |
|
|
padding: 12px !important; |
|
|
transition: all 0.3s ease !important; |
|
|
position: relative !important; |
|
|
overflow: visible !important; |
|
|
z-index: 1; |
|
|
width: 100% !important; |
|
|
max-width: 100% !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
.field-container:hover { |
|
|
border-color: rgba(0, 212, 255, 0.4) !important; |
|
|
box-shadow: 0 0 15px rgba(0, 212, 255, 0.1) !important; |
|
|
transform: translateY(-1px) !important; |
|
|
} |
|
|
|
|
|
.field-label { |
|
|
color: #2C3E50 !important; |
|
|
font-weight: 600 !important; |
|
|
font-size: 0.85rem !important; |
|
|
margin-bottom: 6px !important; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 6px !important; |
|
|
width: 100% !important; |
|
|
} |
|
|
|
|
|
.field-input { |
|
|
width: 100% !important; |
|
|
padding: 10px 12px !important; |
|
|
border: 1px solid #E1E8ED !important; |
|
|
border-radius: 6px !important; |
|
|
background: white !important; |
|
|
color: #2C3E50 !important; |
|
|
font-size: 0.85rem !important; |
|
|
transition: all 0.3s ease !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
.field-input:focus { |
|
|
border-color: #00d4ff !important; |
|
|
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important; |
|
|
outline: none !important; |
|
|
} |
|
|
|
|
|
.field-input::placeholder { |
|
|
color: #7F8C8D !important; |
|
|
} |
|
|
|
|
|
|
|
|
.card-actions { |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 12px !important; |
|
|
justify-content: flex-start !important; |
|
|
width: 100% !important; |
|
|
flex-wrap: wrap !important; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.card-actions-spacer { |
|
|
flex: 1 1 auto; |
|
|
} |
|
|
|
|
|
.field-selector-container { |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
justify-content: flex-end !important; |
|
|
gap: 12px !important; |
|
|
width: 100% !important; |
|
|
} |
|
|
|
|
|
.modern-field-selector-btn { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: flex-end; |
|
|
margin-left: auto; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.field-selector-btn.modern-selector-animated { |
|
|
border-radius: 24px; |
|
|
background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%); |
|
|
color: #fff; |
|
|
font-weight: 700; |
|
|
font-size: 1rem; |
|
|
padding: 10px 22px; |
|
|
border: none; |
|
|
box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
cursor: pointer; |
|
|
transition: background 0.18s, box-shadow 0.18s, transform 0.18s; |
|
|
outline: none; |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
animation: selectorPulse 2s infinite alternate; |
|
|
} |
|
|
|
|
|
.field-selector-btn.modern-selector-animated:hover, |
|
|
.field-selector-btn.modern-selector-animated.active { |
|
|
background: linear-gradient(135deg, #06ffa5 0%, #00d4ff 60%, #ff006e 100%); |
|
|
box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); |
|
|
transform: scale(1.04); |
|
|
} |
|
|
|
|
|
@keyframes selectorPulse { |
|
|
0% { box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10); } |
|
|
100% { box-shadow: 0 6px 24px rgba(0, 212, 255, 0.18); } |
|
|
} |
|
|
|
|
|
.field-selector-btn.modern-selector-animated i { |
|
|
font-size: 1.2em; |
|
|
} |
|
|
|
|
|
|
|
|
.field-container.filled { |
|
|
border-color: #06ffa5 !important; |
|
|
box-shadow: 0 0 0 2px rgba(6,255,165,0.12); |
|
|
transition: border-color 0.25s, box-shadow 0.25s; |
|
|
} |
|
|
|
|
|
|
|
|
body { |
|
|
overflow-x: hidden !important; |
|
|
width: 100vw !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
html { |
|
|
overflow-x: hidden !important; |
|
|
width: 100vw !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
|
|
|
.site-header, |
|
|
.section-navigation, |
|
|
.subgroup-pills, |
|
|
.page-indicator-container { |
|
|
width: 100vw !important; |
|
|
max-width: 100vw !important; |
|
|
margin: 0 !important; |
|
|
box-sizing: border-box !important; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.investigation-container { |
|
|
padding: 16px 0 !important; |
|
|
margin-left: -50vw !important; |
|
|
margin-right: -50vw !important; |
|
|
left: 50% !important; |
|
|
right: 50% !important; |
|
|
} |
|
|
|
|
|
.form-card { |
|
|
padding: 0 16px !important; |
|
|
border-radius: 0 !important; |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
margin: 0 -16px !important; |
|
|
padding: 12px 16px !important; |
|
|
} |
|
|
|
|
|
.fields-grid { |
|
|
grid-template-columns: 1fr !important; |
|
|
gap: 12px !important; |
|
|
} |
|
|
|
|
|
.card-actions { |
|
|
flex-direction: column !important; |
|
|
align-items: stretch !important; |
|
|
gap: 8px !important; |
|
|
} |
|
|
|
|
|
.field-selector-container { |
|
|
width: 100% !important; |
|
|
} |
|
|
|
|
|
.field-selector-btn { |
|
|
width: 100% !important; |
|
|
justify-content: center !important; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 480px) { |
|
|
.investigation-container { |
|
|
padding: 12px 0 !important; |
|
|
} |
|
|
|
|
|
.form-card { |
|
|
padding: 0 12px !important; |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
margin: 0 -12px !important; |
|
|
padding: 10px 12px !important; |
|
|
} |
|
|
|
|
|
.card-content { |
|
|
padding: 16px 0 !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.autosave-indicator.crime-section-btn { |
|
|
background: linear-gradient(135deg, #E8F4FD 0%, #F0F8FF 100%) !important; |
|
|
border: 2px solid #4A90E2 !important; |
|
|
color: #357ABD !important; |
|
|
font-weight: 600 !important; |
|
|
border-radius: 20px !important; |
|
|
box-shadow: 0 2px 6px rgba(74, 144, 226, 0.08) !important; |
|
|
padding: 10px 20px !important; |
|
|
transition: all 0.3s; |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 8px !important; |
|
|
} |
|
|
|
|
|
.autosave-indicator.crime-section-btn:hover { |
|
|
border-color: #357ABD !important; |
|
|
color: #fff !important; |
|
|
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important; |
|
|
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25) !important; |
|
|
} |
|
|
|
|
|
.autosave-right { |
|
|
margin-left: auto !important; |
|
|
margin-right: 0 !important; |
|
|
} |
|
|
|
|
|
.autosave-left { |
|
|
margin-right: auto !important; |
|
|
margin-left: 0 !important; |
|
|
} |
|
|
|
|
|
.header-actions { |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 16px !important; |
|
|
} |
|
|
|
|
|
.header-actions.autosave-right { |
|
|
display: flex !important; |
|
|
justify-content: flex-end !important; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.autosave-indicator { |
|
|
display: flex !important; |
|
|
align-items: center !important; |
|
|
gap: 8px !important; |
|
|
padding: 8px 16px !important; |
|
|
background: rgba(255, 255, 255, 0.15) !important; |
|
|
border: 1px solid rgba(255, 255, 255, 0.2) !important; |
|
|
border-radius: 8px !important; |
|
|
font-size: 0.875rem !important; |
|
|
color: white !important; |
|
|
font-weight: 500 !important; |
|
|
backdrop-filter: blur(10px) !important; |
|
|
} |
|
|
|
|
|
.autosave-indicator.saving { |
|
|
background: rgba(255, 255, 255, 0.25) !important; |
|
|
animation: pulse 1.5s ease-in-out infinite !important; |
|
|
} |
|
|
|
|
|
.main-section-pill { |
|
|
font-size: 1.25rem !important; |
|
|
padding: 20px 36px !important; |
|
|
min-width: 200px !important; |
|
|
min-height: 64px !important; |
|
|
border-width: 2.5px !important; |
|
|
box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18) !important; |
|
|
} |
|
|
|
|
|
.main-section-pill i { |
|
|
font-size: 2rem !important; |
|
|
} |
|
|
|
|
|
.main-section-pill span { |
|
|
font-size: 1.25em !important; |
|
|
font-weight: 700 !important; |
|
|
} |
|
|
|
|
|
|
|
|
.modern-nav-btns { |
|
|
display: flex; |
|
|
justify-content: flex-end; |
|
|
gap: 18px; |
|
|
margin-top: 32px; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.modern-round-btn { |
|
|
width: 56px; |
|
|
height: 56px; |
|
|
border-radius: 50%; |
|
|
border: none; |
|
|
background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%); |
|
|
color: #fff; |
|
|
font-size: 2rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18), 0 1.5px 6px rgba(0,0,0,0.08); |
|
|
cursor: pointer; |
|
|
transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s; |
|
|
outline: none; |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
.modern-round-btn:active { |
|
|
transform: scale(0.93); |
|
|
box-shadow: 0 2px 8px rgba(0, 212, 255, 0.12); |
|
|
} |
|
|
|
|
|
.modern-round-btn:disabled { |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.next-btn-animated { |
|
|
animation: bounceRight 1.2s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes bounceRight { |
|
|
0% { transform: translateX(0); } |
|
|
60% { transform: translateX(6px) scale(1.08); } |
|
|
100% { transform: translateX(0); } |
|
|
} |
|
|
|
|
|
.submit-btn-animated { |
|
|
animation: pulseSend 1.5s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes pulseSend { |
|
|
0% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); } |
|
|
60% { box-shadow: 0 8px 32px rgba(255, 0, 110, 0.22); } |
|
|
100% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); } |
|
|
} |
|
|
|
|
|
.modern-round-btn i { |
|
|
font-size: 2rem; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
|
|
|
.modern-floating-nav-btn { |
|
|
position: fixed; |
|
|
bottom: 95px; |
|
|
right: 32px; |
|
|
z-index: 2000; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 16px; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.modern-floating-nav-btn .modern-round-btn { |
|
|
pointer-events: auto; |
|
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
.modern-floating-nav-btn { |
|
|
bottom: 16px; |
|
|
right: 16px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.compact-card-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
padding: 8px 16px !important; |
|
|
min-height: 0; |
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(255, 0, 110, 0.04)) !important; |
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important; |
|
|
margin: 0 -24px !important; |
|
|
} |
|
|
|
|
|
.card-header-main { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.compact-title { |
|
|
font-size: 1.1rem !important; |
|
|
font-weight: 700 !important; |
|
|
margin: 0 !important; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
color: #00d4ff !important; |
|
|
background: none !important; |
|
|
} |
|
|
|
|
|
.compact-title i { |
|
|
font-size: 1.1em; |
|
|
color: #00d4ff; |
|
|
} |
|
|
|
|
|
.field-counter.compact-field-counter { |
|
|
font-size: 0.95em !important; |
|
|
font-weight: 600 !important; |
|
|
color: #222 !important; |
|
|
background: none !important; |
|
|
padding: 0 0 0 8px !important; |
|
|
box-shadow: none !important; |
|
|
border-radius: 0 !important; |
|
|
text-shadow: none !important; |
|
|
} |
|
|
|
|
|
.modern-field-selector-btn.compact-selector-btn { |
|
|
margin-left: 16px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
height: 32px; |
|
|
} |
|
|
|
|
|
.field-selector-btn.modern-selector-animated.compact-selector-btn-inner { |
|
|
font-size: 0.95rem; |
|
|
padding: 4px 14px; |
|
|
min-width: 0; |
|
|
height: 32px; |
|
|
border-radius: 16px; |
|
|
gap: 6px; |
|
|
} |
|
|
|
|
|
.field-selector-btn.modern-selector-animated.compact-selector-btn-inner i { |
|
|
font-size: 1em; |
|
|
} |
|
|
|
|
|
.field-selector-counter { |
|
|
font-size: 0.95em; |
|
|
font-weight: 600; |
|
|
margin-left: 2px; |
|
|
} |
|
|
|
|
|
|
|
|
.modern-field-selector-popup { |
|
|
position: absolute; |
|
|
top: 110%; |
|
|
right: 0; |
|
|
min-width: 260px; |
|
|
background: #fff; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 8px 32px rgba(0,212,255,0.12); |
|
|
z-index: 3000 !important; |
|
|
padding: 18px 20px 16px 20px; |
|
|
animation: popupFadeIn 0.25s cubic-bezier(.4,2,.6,1); |
|
|
} |
|
|
|
|
|
.modern-field-selector-btn { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
@keyframes popupFadeIn { |
|
|
from { opacity: 0; transform: translateY(-10px) scale(0.98); } |
|
|
to { opacity: 1; transform: translateY(0) scale(1); } |
|
|
} |
|
|
|
|
|
.popup-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
.popup-header span { |
|
|
font-weight: 700; |
|
|
font-size: 1.1em; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
color: #00d4ff; |
|
|
} |
|
|
|
|
|
.popup-header i { |
|
|
color: #00d4ff; |
|
|
} |
|
|
|
|
|
.popup-close-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.2em; |
|
|
color: #ff006e; |
|
|
cursor: pointer; |
|
|
transition: color 0.18s; |
|
|
} |
|
|
.popup-close-btn:hover { |
|
|
color: #00d4ff; |
|
|
} |
|
|
|
|
|
.popup-fields-list { |
|
|
max-height: 220px; |
|
|
overflow: auto; |
|
|
margin-bottom: 16px; |
|
|
padding-right: 2px; |
|
|
} |
|
|
|
|
|
.popup-field-row { |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.popup-field-label { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
font-size: 1em; |
|
|
cursor: pointer; |
|
|
user-select: none; |
|
|
font-weight: 500; |
|
|
color: #222; |
|
|
border-radius: 6px; |
|
|
padding: 2px 4px; |
|
|
transition: background 0.15s; |
|
|
} |
|
|
.popup-field-label:hover { |
|
|
background: #f0faff; |
|
|
} |
|
|
|
|
|
.popup-field-label input[type="checkbox"] { |
|
|
accent-color: #00d4ff; |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
border-radius: 4px; |
|
|
border: 1.5px solid #00d4ff; |
|
|
margin: 0; |
|
|
transition: box-shadow 0.15s; |
|
|
} |
|
|
|
|
|
.popup-field-label input[type="checkbox"]:checked { |
|
|
box-shadow: 0 0 0 2px #06ffa5; |
|
|
} |
|
|
|
|
|
.popup-field-text { |
|
|
font-weight: 500; |
|
|
color: #222; |
|
|
} |
|
|
|
|
|
.popup-actions { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.popup-action-btn { |
|
|
flex: 1; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
padding: 8px 0; |
|
|
font-weight: 600; |
|
|
font-size: 1em; |
|
|
cursor: pointer; |
|
|
transition: background 0.18s, color 0.18s, box-shadow 0.18s; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 6px; |
|
|
} |
|
|
|
|
|
.popup-action-btn.clear-btn { |
|
|
background: #f8f8f8; |
|
|
color: #ff006e; |
|
|
} |
|
|
.popup-action-btn.clear-btn:hover { |
|
|
background: #ffe6f0; |
|
|
color: #d1005b; |
|
|
} |
|
|
|
|
|
.popup-action-btn.selectall-btn { |
|
|
background: #f8f8f8; |
|
|
color: #06ffa5; |
|
|
} |
|
|
.popup-action-btn.selectall-btn:hover { |
|
|
background: #e6fff7; |
|
|
color: #00d4ff; |
|
|
} |
|
|
|
|
|
.popup-action-btn.save-btn { |
|
|
background: linear-gradient(135deg,#00d4ff,#06ffa5,#ff006e); |
|
|
color: #fff; |
|
|
box-shadow: 0 2px 8px rgba(0,212,255,0.10); |
|
|
} |
|
|
.popup-action-btn.save-btn:hover { |
|
|
background: linear-gradient(135deg,#06ffa5,#00d4ff,#ff006e); |
|
|
color: #fff; |
|
|
box-shadow: 0 4px 16px rgba(0,212,255,0.18); |
|
|
} |
|
|
|
|
|
|
|
|
.submit-popup-backdrop { |
|
|
position: fixed; |
|
|
inset: 0; |
|
|
background: rgba(0,0,0,0.35); |
|
|
z-index: 3000; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
.submit-popup-modal { |
|
|
background: #fff; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88; |
|
|
padding: 32px 36px 28px 36px; |
|
|
min-width: 320px; |
|
|
max-width: 90vw; |
|
|
text-align: center; |
|
|
z-index: 3001; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
} |
|
|
.submit-popup-content h3 { |
|
|
color: #38bdf8; |
|
|
margin: 12px 0 8px 0; |
|
|
font-size: 1.4em; |
|
|
font-weight: 700; |
|
|
} |
|
|
.submit-popup-content p { |
|
|
color: #23272b; |
|
|
font-size: 1.08em; |
|
|
margin-bottom: 18px; |
|
|
} |
|
|
.submit-popup-btn { |
|
|
background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%); |
|
|
color: #fff; |
|
|
font-size: 1em; |
|
|
font-weight: 600; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
padding: 10px 32px; |
|
|
box-shadow: 0 2px 12px #38bdf888; |
|
|
cursor: pointer; |
|
|
transition: background 0.3s, color 0.3s, box-shadow 0.3s; |
|
|
} |
|
|
.submit-popup-btn:hover { |
|
|
background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%); |
|
|
color: #bae6fd; |
|
|
box-shadow: 0 2px 24px #bae6fd88; |
|
|
} |
|
|
.submit-popup-icon { |
|
|
color: #38bdf8; |
|
|
font-size: 2.6em; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
footer { |
|
|
background: linear-gradient(to right, #011022, #01030a); |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
padding: 10px 0px; |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
} |
|
|
|
