.user-area{display:flex;align-items:center;gap:8px;margin-left:12px}.user-login-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;background:rgba(0,212,138,0.1);border:1px solid rgba(0,212,138,0.3);border-radius:20px;color:#00d48a;font-size:13px;cursor:pointer;transition:all 0.2s;white-space:nowrap}.user-login-btn:hover{background:rgba(0,212,138,0.2);border-color:rgba(0,212,138,0.5)}.user-login-btn svg{width:16px;height:16px}.user-avatar-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:50%;cursor:pointer;transition:all 0.2s;overflow:hidden}.user-avatar-btn:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3)}.user-avatar-btn img{width:28px;height:28px;border-radius:50%;object-fit:cover}.user-info-area{display:none;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;border-radius:20px;transition:background 0.2s}.user-info-area:hover{background:rgba(255,255,255,0.1)}.user-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid rgba(0,212,138,0.5)}.user-nickname{font-size:13px;color:#fff;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sync-status{font-size:11px;padding:2px 6px;border-radius:10px;margin-left:4px}.sync-status.syncing{color:#ffc107;background:rgba(255,193,7,0.1)}.sync-status.synced{color:#00d48a;background:rgba(0,212,138,0.1)}.sync-status.offline{color:#ff6b6b;background:rgba(255,107,107,0.1)}.sync-status.error{color:#ff6b6b;background:rgba(255,107,107,0.1)}.user-menu{position:fixed;background:#1a1a2e;border:1px solid rgba(255,255,255,0.1);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.3);min-width:140px;z-index:1001;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.2s}.user-menu.show{opacity:1;visibility:visible;transform:translateY(0)}.user-menu-item{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:14px;color:#ccc;text-decoration:none;cursor:pointer;transition:all 0.2s}.user-menu-item svg{flex-shrink:0}.user-menu-item:hover{background:rgba(255,255,255,0.05);color:#fff}.user-menu-item:first-child{border-radius:8px 8px 0 0}.user-menu-item:last-child{border-radius:0 0 8px 8px}.user-menu-item.logout{color:#ff6b6b}.user-menu-item.logout:hover{background:rgba(255,107,107,0.1)}.user-menu-divider{height:1px;background:rgba(255,255,255,0.1);margin:4px 0}.user-menu-name{padding:10px 16px;font-size:13px;color:#8a8aad;border-bottom:1px solid rgba(255,255,255,0.1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s}.user-modal.show{opacity:1;visibility:visible}.user-modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)}.user-modal-content{position:relative;background:#1a1a2e;border-radius:16px;width:90%;max-width:360px;box-shadow:0 10px 40px rgba(0,0,0,0.4);transform:scale(0.9);transition:transform 0.3s}.user-modal.show .user-modal-content{transform:scale(1)}.user-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,0.1)}.user-modal-header h3{margin:0;font-size:18px;color:#fff}.user-modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#888;font-size:24px;cursor:pointer;border-radius:50%;transition:all 0.2s}.user-modal-close:hover{background:rgba(255,255,255,0.1);color:#fff}.user-modal-body{padding:24px}.user-form{display:flex;flex-direction:column;gap:16px}.form-group{position:relative}.form-group input{width:100%;padding:14px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:#fff;font-size:15px;transition:all 0.2s;box-sizing:border-box}.form-group input::placeholder{color:#666}.form-group input:focus{outline:none;border-color:rgba(0,212,138,0.5);background:rgba(255,255,255,0.08)}.form-error{color:#ff6b6b;font-size:13px;min-height:20px;text-align:center}.form-submit{width:100%;padding:14px;background:linear-gradient(135deg,#00d48a,#00b377);border:none;border-radius:10px;color:#fff;font-size:16px;font-weight:500;cursor:pointer;transition:all 0.2s}.form-submit:hover{background:linear-gradient(135deg,#00e69a,#00c488);transform:translateY(-1px)}.form-submit:active{transform:translateY(0)}.form-submit:disabled{background:#444;cursor:not-allowed;transform:none}.form-switch{text-align:center;margin-top:16px;font-size:14px;color:#888}.form-switch a{color:#00d48a;text-decoration:none;margin-left:4px}.form-switch a:hover{text-decoration:underline}.form-tip{text-align:center;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.1);font-size:12px;color:#666}@media (max-width:768px){.user-area{margin-left:8px}.user-login-btn{padding:5px 10px;font-size:12px}.user-login-btn span{display:none}.user-nickname{display:none}.user-modal-content{width:95%;margin:0 10px}}.register-prompt-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;margin-bottom:12px;background:linear-gradient(135deg,#fff3e0,#fff8e1);border:1px solid #ffe0b2;border-radius:8px;font-size:13px;color:#e65100;opacity:0;transform:translateY(-10px);transition:opacity 0.3s,transform 0.3s}.register-prompt-bar.show{opacity:1;transform:translateY(0)}.register-prompt-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.register-prompt-info svg{flex-shrink:0;color:#ff9800}.register-prompt-info span{line-height:1.4}.register-prompt-btn{flex-shrink:0;padding:5px 14px;background:#ff9800;color:#fff;border-radius:4px;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background 0.2s}.register-prompt-btn:hover{background:#f57c00}.register-prompt-close{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#bf360c;font-size:18px;cursor:pointer;opacity:0.6;transition:opacity 0.2s}.register-prompt-close:hover{opacity:1}@media (max-width:768px){.register-prompt-bar{padding:8px 12px;gap:8px;font-size:12px}.register-prompt-btn{padding:4px 10px;font-size:12px}}