.user-avatar[data-v-7ff8dae4]{position:relative;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-with-border[data-v-7ff8dae4]{border:2px solid rgba(255,255,255,.3)}.user-avatar img[data-v-7ff8dae4]{display:block}.avatar-placeholder[data-v-7ff8dae4]{border-radius:50%}#app{width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden}.app-header{background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;padding:15px 30px;box-shadow:0 2px 10px #0000001a;z-index:100}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.header-content h1{margin:0;font-size:1.5rem;font-weight:600}.user-info{display:flex;align-items:center;gap:20px;font-size:1rem}.user-dropdown{position:relative}.user-display{display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px 10px;border-radius:6px;transition:background-color .2s}.user-display:hover{background-color:#ffffff1a}.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.3)}.user-name{font-weight:500}.dropdown-arrow{font-size:.8rem;transition:transform .2s}.dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;min-width:180px;z-index:1000;overflow:hidden;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background-color .2s;color:#333;font-size:.95rem}.dropdown-item:hover{background-color:#f5f5f5}.dropdown-item.logout-item{color:#f44336}.dropdown-item.logout-item:hover{background-color:#fee}.dropdown-divider{height:1px;background-color:#e0e0e0;margin:0}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:2000}.modal-content{background:#fff;border-radius:12px;width:90%;max-width:400px;box-shadow:0 10px 40px #0003;animation:modalFadeIn .3s ease}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0}.modal-header h3{margin:0;font-size:1.25rem;color:#333}.close-btn{background:none;border:none;font-size:1.25rem;color:#999;cursor:pointer;padding:4px;transition:color .2s}.close-btn:hover{color:#333}.modal-body{padding:24px}.form-group{margin-bottom:20px}.form-group:last-child{margin-bottom:0}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#333;font-size:.95rem}.form-input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:1rem;transition:border-color .2s}.form-input:focus{outline:none;border-color:#4caf50}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0}.btn-secondary,.btn-primary{padding:10px 20px;border-radius:6px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s;border:none}.btn-secondary{background:#f5f5f5;color:#666}.btn-secondary:hover{background:#e0e0e0}.btn-primary{background:#4caf50;color:#fff}.btn-primary:hover{background:#45a049;transform:translateY(-1px)}.logout-btn,.config-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:1rem;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-width:36px;min-height:36px}.logout-btn:hover,.config-btn:hover{background:#ffffff4d;transform:translateY(-1px)}.main-content{flex:1;width:100%;overflow-y:auto;background-color:#f5f5f5}@media (max-width: 768px){.header-content{flex-direction:column;gap:10px;text-align:center}.header-content h1{font-size:1.2rem}.user-info{font-size:.9rem;gap:10px}.user-display{padding:4px 8px}.user-avatar{width:28px;height:28px}.dropdown-menu{min-width:160px;right:-10px}.dropdown-item{padding:10px 14px;font-size:.9rem}.modal-content{width:95%;max-width:350px}.modal-header,.modal-body,.modal-footer{padding:16px 20px}.form-group{margin-bottom:16px}.logout-btn,.config-btn{padding:4px 8px;font-size:.9rem;min-width:32px;min-height:32px}}