header{background:linear-gradient(135deg,#5b36b1,#7c52d9);padding:0 1.5rem;box-shadow:0 2px 12px #5b36b140}nav{display:flex;justify-content:space-between;align-items:center;height:60px;max-width:1400px;margin:0 auto}.nav-left{display:flex;align-items:center;gap:2rem}.nav-brand{display:flex;align-items:center;gap:.75rem;cursor:pointer;transition:opacity .15s;text-decoration:none}.nav-brand:hover{opacity:.9}.section-switcher{display:flex;background:#ffffff1a;border-radius:8px;padding:3px}.section-btn{background:transparent;border:none;color:#ffffffb3;padding:.375rem .75rem;border-radius:6px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s}.section-btn:hover{color:#fff}.section-btn.active{background:#fff3;color:#fff}.nav-links{display:flex;gap:.25rem}.nav-link{color:#fffc;text-decoration:none;padding:.5rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;transition:all .15s}.nav-link:hover{color:#fff;background:#ffffff1a}.nav-link.router-link-active{color:#fff;background:#ffffff26}.nav-link-primary{background:#ffffff26;color:#fff}.nav-link-primary:hover{background:#ffffff40}@media (max-width: 768px){.nav-links{display:none}}.brand-icon{width:36px;height:36px;background:#ffffff26;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:5px}.brand-icon svg{width:100%;height:100%;color:#fff}.brand-name{font-size:1.125rem;font-weight:700;color:#fff;letter-spacing:-.02em}.brand-accent{opacity:.8;font-weight:400}.nav-user{display:flex;align-items:center;gap:1rem}.user-name{color:#ffffffe6;font-size:.875rem}.user-role{background:#fff3;color:#fff;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:500}.btn-about{width:32px;height:32px;background:#ffffff1a;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.btn-about:hover{background:#fff3}.btn-about svg{width:18px;height:18px}.btn-logout{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;cursor:pointer;transition:all .2s}.btn-logout:hover{background:#ffffff1a;border-color:#ffffff80}main{max-width:1400px;margin:0 auto;padding:2rem 1.5rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.about-modal{background:#fff;border-radius:20px;width:90%;max-width:520px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;position:relative;box-shadow:0 25px 80px #0000004d;animation:modalSlideUp .3s ease}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:none;background:#fff3;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;z-index:1}.modal-close:hover{background:#ffffff4d}.modal-close svg{width:20px;height:20px;color:#fff}.modal-hero{background:linear-gradient(135deg,#5b36b1,#7c52d9);padding:48px 32px 40px;text-align:center;color:#fff;flex-shrink:0}.modal-icon{width:72px;height:72px;margin:0 auto 20px;background:#fff3;border-radius:18px;display:flex;align-items:center;justify-content:center}.modal-icon svg{width:40px;height:40px}.modal-hero h2{font-size:32px;font-weight:700;margin:0 0 8px;letter-spacing:-.02em}.modal-tagline{font-size:16px;opacity:.9;margin:0}.modal-content{padding:28px 32px;overflow-y:auto;flex:1}.mythology-section{display:flex;gap:16px;padding:20px;background:linear-gradient(135deg,#f8f6ff,#f0ecff);border-radius:14px;margin-bottom:24px}.section-icon{flex-shrink:0;width:44px;height:44px;background:linear-gradient(135deg,#5b36b1,#7c52d9);border-radius:12px;display:flex;align-items:center;justify-content:center}.section-icon svg{width:24px;height:24px;color:#fff}.section-text h3{font-size:15px;font-weight:600;color:#5b36b1;margin:0 0 8px}.section-text p{font-size:14px;line-height:1.6;color:#475569;margin:0}.feature-highlights{display:grid;grid-template-columns:1fr 1fr;gap:12px}.feature{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f1f5f9;border-radius:10px;font-size:13px;color:#475569}.feature-icon{font-size:18px}.modal-footer{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-top:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}.version-tag{font-size:12px;color:#94a3b8;background:#f1f5f9;padding:6px 12px;border-radius:6px}.modal-btn{background:linear-gradient(135deg,#5b36b1,#7c52d9);border:none;color:#fff;padding:12px 28px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.modal-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #5b36b166}@media (max-width: 540px){.about-modal{width:95%;margin:20px}.modal-hero{padding:36px 24px 32px}.modal-content{padding:24px}.feature-highlights{grid-template-columns:1fr}.modal-footer{flex-direction:column;gap:16px;padding:20px 24px}.modal-btn{width:100%}.mythology-section{flex-direction:column;text-align:center}.section-icon{margin:0 auto}}*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:#f8fafc;color:#1e293b;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{min-height:100vh}a{color:#6366f1;text-decoration:none}a:hover{text-decoration:underline}.text-muted{color:#64748b}.text-center{text-align:center}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}