:root { --glass-bg: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.2); }
body { margin: 0; overflow-x: hidden; background-size: cover; background-attachment: fixed; font-family: sans-serif; color: #fff; }
#loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; justify-content: center; align-items: center; z-index: 9999; }
.spinner { width: 50px; height: 50px; border: 5px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#snow-canvas { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1; }
.glass-card { position: relative; z-index: 2; display: flex; width: 80%; margin: 10vh auto; background: var(--glass-bg); backdrop-filter: blur(15px); border: 1px solid var(--glass-border); border-radius: 20px; padding: 40px; box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37); animation: slideUp 1s ease-out; }
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.left-section { flex: 2; padding-right: 20px; }
.right-section { flex: 1; text-align: center; border-left: 1px solid var(--glass-border); padding-left: 20px; }
.sidebar { position: fixed; left: 20px; top: 50%; transform: translateY(-50%); background: var(--glass-bg); backdrop-filter: blur(10px); padding: 20px; border-radius: 15px; z-index: 10; border: 1px solid var(--glass-border); }
.sidebar ul { list-style: none; padding: 0; }
.sidebar a { color: #fff; text-decoration: none; display: block; margin: 15px 0; font-weight: bold; }
.avatar { width: 120px; height: 120px; border-radius: 50%; border: 3px solid #fff; margin-bottom: 20px; }
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
.photo-item { width: 100%; border-radius: 10px; opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
.photo-item.fade-in { opacity: 1; transform: translateY(0); }
.modal { display: none; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.modal-content { background: rgba(255,255,255,0.1); backdrop-filter: blur(20px); margin: 15% auto; padding: 30px; width: 300px; border-radius: 20px; color: #fff; border: 1px solid var(--glass-border); }