body { background: linear-gradient(135deg, #1b1f38 0%, #2655a5 50%, #0b1935 100%); color: #f1f5ff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
nav { background: rgba(10, 20, 60, 0.85); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
nav a { color: #dbe3ff; margin-right: 1rem; text-decoration: none; font-weight: 600; }
nav a:hover { color: #fff; }
main.container { padding: 1.5rem 1rem; max-width: 1024px; margin: 0 auto; animation: fadeIn 0.7s ease-out; }
h1, h2, h3, h4 { color: #fff; }
.card { background-color: rgba(20, 30, 70, 0.9) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
label { color: #e8eeff; display: block; margin: 0.5rem 0; font-weight: 600; }
input, select, button { background: #111d46; border: 1px solid #3f67d5; color: #fff; padding: .5rem .75rem; border-radius: 8px; }
button { background: #4e7cff; border-color: #7ba8ff; cursor: pointer; transition: transform .15s ease, background .25s ease; }
button:hover { transform: translateY(-2px); background: #7ea8ff; }
table { width: 100%; border-collapse: collapse; background: rgba(10, 20, 50, 0.75); }
th, td { border: 1px solid rgba(255,255,255,0.08); padding: 0.5rem; }
th { background: rgba(15, 40, 100, 0.85); }
tr:hover { background: rgba(59, 93, 200, 0.2); }
pre { background: rgba(0,0,0,0.45); color: #f7f9ff; border-left: 4px solid #8bb1ff; padding: 1rem; }
.alert { animation: pulse 1.2s ease infinite alternate; }
.animated-title { display: inline-block; animation: glow 2.5s ease-in-out infinite alternate; }
.button-animate { animation: bounce 3s infinite ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} }
@keyframes glow { from { text-shadow: 0 0 8px rgba(255,220,102,.2), 0 0 20px rgba(255,255,255,.25); } to { text-shadow: 0 0 24px rgba(255,220,102,.35), 0 0 30px rgba(255,255,255,.45); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.02); } }
@keyframes floatCard { 0% { transform: translateY(0px);} 50%{transform: translateY(-8px);}100%{transform: translateY(0px);} }
.card, section { animation: floatCard 6s ease-in-out infinite; }
.hero { background: rgba(10, 20, 50, 0.8); border-radius: 16px; padding: 1rem; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,0.15); }
.highlight { color: #ffd166; }