* { margin: 0; padding: 0; box-sizing: 
border-box; } body {
    font-family: 'Segoe UI', Tahoma, Geneva, 
    Verdana, sans-serif; background: 
    linear-gradient(135deg, #667eea 0%, 
    #764ba2 100%);
    min-height: 100vh; color: #333;
}
.container { max-width: 1200px; margin: 0 
auto; padding: 20px; } header {
    background: rgba(255,255,255,0.95); 
    backdrop-filter: blur(10px); box-shadow: 0 
    4px 20px rgba(0,0,0,0.1); padding: 1rem 0; 
    position: sticky; top: 0; z-index: 100;
}
nav { display: flex; justify-content: 
space-between; align-items: center; } .logo { 
font-size: 1.8em; font-weight: bold; color: 
#4a5568; }
.nav-links a { margin-left: 2rem; color: 
    #4a5568; text-decoration: none;
    padding: 0.5rem 1rem; border-radius: 25px; 
    transition: all 0.3s;
}
.nav-links a:hover { background: #667eea; 
color: white; } .card {
    background: white; border-radius: 15px; 
    padding: 2rem; box-shadow: 0 10px 30px 
    rgba(0,0,0,0.1); margin: 1rem 0;
}
form { background: #f8f9ff; padding: 2rem; 
border-radius: 10px; } input, select, 
textarea, button {
    width: 100%; padding: 12px; margin: 10px 
    0; border: 2px solid #e2e8f0; 
    border-radius: 8px; font-size: 1rem;
}
input:focus, select:focus, textarea:focus { 
    outline: none; border-color: #667eea; 
    box-shadow: 0 0 0 3px 
    rgba(102,126,234,0.1);
}
button { background: linear-gradient(135deg, 
    #667eea 0%, #764ba2 100%);
    color: white; border: none; font-weight: 
    bold; cursor: pointer; transition: 
    transform 0.2s;
}
button:hover { transform: translateY(-2px); } 
.status-open { background: #10b981; color: 
white; padding: 4px 12px; border-radius: 20px; 
font-size: 0.85em; } .status-over { 
background: #6b7280; color: white; padding: 
4px 12px; border-radius: 20px; font-size: 
0.85em; } .status-postponed { background: 
#f59e0b; color: white; padding: 4px 12px; 
border-radius: 20px; font-size: 0.85em; } 
.status-cancelled { background: #ef4444; 
color: white; padding: 4px 12px; 
border-radius: 20px; font-size: 0.85em; } 
table { width: 100%; border-collapse: 
collapse; margin: 1rem 0; } th, td { padding: 
12px; text-align: left; border-bottom: 1px 
solid #e2e8f0; } th { background: #f8fafc; 
font-weight: 600; } tr:hover { background: 
#f8fafc; }
.gender-male::before { content: "♂️ "; } 
.gender-female::before { content: "♀️ "; } 
.gender-other::before { content: "⚧️ "; } 
.tree-node {
    margin-left: 2rem; border-left: 2px solid 
    #e2e8f0; padding-left: 1rem;
    position: relative; margin-top: 1rem;
}
.tree-node::before { content: ''; position: 
    absolute; left: -102px; top: 0; width: 
    20px; height: 2px; background: #e2e8f0;
}
img { border-radius: 50%; border: 3px solid 
#e2e8f0; max-width: 60px; }
.success { background: #d4edda; color: 
#155724; padding: 1rem; border-radius: 8px; 
margin: 1rem 0; } .error { background: 
#f8d7da; color: #721c24; padding: 1rem; 
border-radius: 8px; margin: 1rem 0; } @media 
(max-width: 768px) {
    .container { padding: 10px; } .nav-links { 
    display: none; } .tree-node { margin-left: 
    1rem; }
}